A comprehensive toolkit for implementing OSLC Selection dialogs in web applications, featuring modern Web Components with extensive styling capabilities.
# Configure npm for GitHub registry
npm config set @oslc:registry https://npm.pkg.github.com
# Install the components
npm install @oslc/postmessage-helper @oslc/selection-webcomponent<!DOCTYPE html>
<html>
<head>
<script type="module" src="https://cdn.jsdelivr.net/gh/OSLC/olsc-selection-utils@main/src/oslc-selection-demo/vendor/@oslc/oslc-selection-webcomponent/index.browser.js"></script>
</head>
<body>
<oslc-selection-button
dialog-url="https://your-oslc-server/selector"
dialog-title="Select Resources"
button-text="Browse Resources">
</oslc-selection-button>
<script>
document.querySelector('oslc-selection-button')
.addEventListener('oslc-selection-made', (event) => {
console.log('Selected resources:', event.detail.resources);
});
</script>
</body>
</html>A TypeScript utility for handling OSLC postMessage communication in delegated UIs.
Features:
- Type-safe postMessage handling
- OSLC Core 3.0 compliant
- Support for selection and creation dialogs
- Comprehensive error handling
A modern Web Component for OSLC selection dialogs with extensive styling support.
Features:
- Standards-based Custom Element
- Extensive CSS customization via custom properties
- Built-in dialog management
- Event-driven architecture
- Framework agnostic
The selection webcomponent supports comprehensive styling through CSS custom properties:
.my-theme {
--oslc-button-background: #007bff;
--oslc-button-color: white;
--oslc-button-border-radius: 4px;
--oslc-button-padding: 8px 16px;
--oslc-button-hover-background: #0056b3;
--oslc-button-transition: all 0.3s ease;
}See the live demo for comprehensive styling examples.
- Node.js 22+
- PowerShell 7+ (for Windows scripts)
Packages are published to:
https://npm.pkg.github.com/@oslc/postmessage-helperhttps://npm.pkg.github.com/@oslc/selection-webcomponent
Live demo automatically deployed to: https://OSLC.github.io/olsc-selection-utils/
- Live Demo - Interactive examples and styling showcase
- Component Documentation - PostMessage Helper API
- WebComponent Documentation - Selection WebComponent API
import { OslcPostMessageHelper } from '@oslc/postmessage-helper';
const helper = new OslcPostMessageHelper();
helper.onSelectionMade = (resources) => {
console.log('Selected:', resources);
};// Programmatic usage
const button = document.createElement('oslc-selection-button');
button.dialogUrl = 'https://your-server/selector';
button.dialogTitle = 'Select Items';
button.buttonText = 'Browse';
button.addEventListener('oslc-selection-made', (event) => {
const resources = event.detail.resources;
// Handle selection
});<oslc-selection-button
dialog-url="https://rm.example.com/selector"
dialog-title="Select Requirements"
button-text="Choose Requirements">
</oslc-selection-button><oslc-selection-button
dialog-url="https://rm.example.com/selector"
dialog-title="Select Requirements"
button-text="Choose Requirements"
class="my-custom-theme">
</oslc-selection-button>
<style>
.my-custom-theme {
--oslc-button-background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
--oslc-button-border-radius: 25px;
--oslc-button-padding: 12px 24px;
}
</style>document.addEventListener('oslc-selection-made', (event) => {
const resources = event.detail.resources;
resources.forEach(resource => {
console.log(`Selected: ${resource['oslc:label']}`);
console.log(`URI: ${resource['rdf:resource']}`);
});
});This project is licensed under the Eclipse Public License 2.0.