A comprehensive toolkit for implementing OSLC Selection dialogs in web applications, featuring modern Web Components with extensive styling capabilities.
# 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:
Publishing is triggered by a published GitHub release. Each package must have
the OSLC/oslc-selection-utils repository's .github/workflows/ci-cd.yml
workflow configured as an npm
Trusted Publisher.
Because these are new npm packages, an @oslc organization maintainer must
publish each package once before its Trusted Publisher can be configured.
To publish a release from main, let GitHub create the tag and release:
gh release create v0.1.3 --repo OSLC/oslc-selection-utils --target main \
--generate-notesThe repository keeps the package versions at 999.9.9. The release workflow
substitutes the release version only in its runner before publishing. The
website identifies the source as v0.1.3+<short SHA>.
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.