OSLC Selection WebComponent Demo

Experience the OSLC Selection WebComponent with full styling capabilities. This demo showcases both the functional OSLC integration and the comprehensive theming system using CSS custom properties.

Build Status: Loading components...

Live Functional Demo

Try the Selection Component:

Click the button below to experience OSLC resource selection. This demo simulates the selection process and displays the results.

OSLC Selector URL:

Change this URL to test with different OSLC providers. The protocol dropdown will be automatically selected based on the URL hash. Default connects to https://rm.refimpl.oslc.ldsw.eu/ (credentials: admin/admin).

Usage in HTML:

<oslc-selection-button 
    dialog-url="[Base URL from input field] + [Protocol from dropdown]"
    dialog-title="Select Resources"
    button-text="Browse Items">
</oslc-selection-button>

<script>
document.querySelector('oslc-selection-button')
    .addEventListener('oslc-selection-made', (event) => {
        console.log('Selected:', event.detail.resources);
    });
</script>
                            

Selected Resources

No resources selected yet

Use the selection button above to choose OSLC resources. Selected items will appear here.

Component Styling Examples

The OSLC Selection WebComponent supports extensive styling through CSS custom properties. Here are various pre-built themes:

Default Theme

/* No custom properties needed for default styling */

Material Design

.material-theme {
    --oslc-button-background: #1976d2;
    --oslc-button-color: white;
    --oslc-button-font-weight: 500;
    --oslc-button-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

Bootstrap Style

.bootstrap-theme {
    --oslc-button-border: 1px solid #007bff;
    --oslc-button-background: #007bff;
    --oslc-button-color: #ffffff;
    --oslc-button-border-radius: 0.375rem;
}

Rounded Theme

.rounded-theme {
    --oslc-button-border-radius: 25px;
    --oslc-button-background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --oslc-button-hover-transform: translateY(-2px);
}

Dark Theme

.dark-theme {
    --oslc-button-background: #495057;
    --oslc-button-color: #ffffff;
    --oslc-button-border: 1px solid #6c757d;
}

Outline Theme

.outline-theme {
    --oslc-button-background: transparent;
    --oslc-button-color: #007bff;
    --oslc-button-border: 2px solid #007bff;
    --oslc-button-hover-background: #007bff;
    --oslc-button-hover-color: white;
}

Success Theme

.success-theme {
    --oslc-button-background: #28a745;
    --oslc-button-color: white;
    --oslc-button-hover-background: #218838;
}

Large Theme

.large-theme {
    --oslc-button-padding: 16px 32px;
    --oslc-button-font-size: 1.2rem;
    --oslc-button-font-weight: 600;
    --oslc-button-min-width: 200px;
}

Compact Theme

.compact-theme {
    --oslc-button-padding: 4px 8px;
    --oslc-button-font-size: 0.875rem;
    --oslc-button-border-radius: 2px;
}

Animated Theme

.animated-theme {
    --oslc-button-background: #ff6b6b;
    --oslc-button-hover-transform: scale(1.05);
    --oslc-button-active-transform: scale(0.95);
    --oslc-button-transition: all 0.3s ease;
}

Integration Examples

JSP Integration (No Build Required)

<%@ page contentType="text/html" %>
<!DOCTYPE html>
<html>
<head>
    <script type="module" 
      src="https://cdn.jsdelivr.net/npm/@oslc/selection-webcomponent/dist/index.esm.js">
    </script>
</head>
<body>
    <oslc-selection-button 
        dialog-url="${pageContext.request.contextPath}/services/selector"
        dialog-title="Select Requirements"
        button-text="Browse">
    </oslc-selection-button>
</body>
</html>
                            

JavaScript/TypeScript

import { OslcSelectionButton } from '@oslc/selection-webcomponent';

const button = new OslcSelectionButton();
button.dialogUrl = 'https://rm.refimpl.oslc.ldsw.eu/services/serviceProviders/sp_single/service1/requirements/selector#oslc-core-postMessage-1.0';
button.dialogTitle = 'Select Items';

button.addEventListener('oslc-selection-made', (event) => {
    event.detail.resources.forEach(resource => {
        console.log(`Selected: ${resource['oslc:label']}`);
    });
});

document.body.appendChild(button);
                            

Build Instructions

To build and run the production components locally:

# Windows
build-components.ps1

# Linux/Mac
chmod +x build-components.sh
./build-components.sh

# Then serve the demo
cd src/oslc-selection-demo
python -m http.server 8080
# or
npx serve .
                    

After building, refresh this page to see the production components in action with full OSLC integration.