@kit-data-manager/pid-component
Version:
The PID-Component is a web component that can be used to evaluate and display FAIR Digital Objects, PIDs, ORCiDs, and possibly other identifiers in a user-friendly way. It is easily extensible to support other identifier types.
138 lines (137 loc) • 6.29 kB
JavaScript
/*!
*
* Copyright 2024-2026 Karlsruhe Institute of Technology.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* https://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/
import { h } from "@stencil/core";
export class PidActions {
constructor() {
this.actions = [];
this.darkMode = 'system';
}
render() {
if (this.actions.length === 0) {
return null;
}
const isDarkMode = this.darkMode === 'dark' || (this.darkMode === 'system' && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
const containerId = this.actionsId || `actions-${Math.random().toString(36).substring(2, 11)}`;
return (h("div", { id: containerId, class: `actions-container sticky right-0 bottom-0 left-0 z-20 w-full ${isDarkMode ? 'bg-gray-800' : 'bg-white'}`, role: "toolbar", "aria-label": "Available actions" }, h("span", { id: `${containerId}-desc`, class: "sr-only" }, "The following links open related resources in new tabs"), h("div", { class: "flex flex-wrap justify-between gap-1", "aria-describedby": `${containerId}-desc` }, this.actions.map((action, index) => {
const baseClasses = 'p-1 font-semibold text-sm rounded-sm border transition-colors duration-200';
const focusClasses = 'focus:outline-hidden focus:ring-2 focus:ring-offset-1 focus:ring-blue-500';
let styleClasses;
if (isDarkMode) {
switch (action.style) {
case 'primary':
styleClasses = 'bg-blue-700 text-white hover:bg-blue-600 border-blue-600';
break;
case 'secondary':
styleClasses = 'bg-slate-700 text-blue-300 hover:bg-slate-600 border-slate-600';
break;
case 'danger':
styleClasses = 'bg-red-700 text-white hover:bg-red-600 border-red-600';
break;
default:
styleClasses = 'bg-gray-700 text-gray-200 hover:bg-gray-600 border-gray-600';
}
}
else {
switch (action.style) {
case 'primary':
styleClasses = 'bg-blue-500 text-white hover:bg-blue-600 border-blue-400';
break;
case 'secondary':
styleClasses = 'bg-slate-200 text-blue-500 hover:bg-slate-300 border-slate-300';
break;
case 'danger':
styleClasses = 'bg-red-500 text-white hover:bg-red-600 border-red-400';
break;
default:
styleClasses = 'bg-gray-200 text-gray-700 hover:bg-gray-300 border-gray-300';
}
}
return (h("a", { key: `action-${action.title}-${index}`, href: action.link, class: `${baseClasses} ${styleClasses} ${focusClasses}`, rel: "noopener noreferrer", target: "_blank", "aria-label": `${action.title} (opens in new tab)`, title: `${action.title} - Opens in a new tab` }, h("span", null, action.title), h("span", { class: "sr-only" }, "(opens in new tab)")));
}))));
}
static get is() { return "pid-actions"; }
static get properties() {
return {
"actions": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "FoldableAction[]",
"resolved": "FoldableAction[]",
"references": {
"FoldableAction": {
"location": "import",
"path": "../../utils/FoldableAction",
"id": "src/utils/FoldableAction.ts::FoldableAction",
"referenceLocation": "FoldableAction"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Array of actions to display"
},
"getter": false,
"setter": false,
"defaultValue": "[]"
},
"actionsId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Optional ID for the actions container for ARIA references"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "actions-id"
},
"darkMode": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'light' | 'dark' | 'system'",
"resolved": "\"dark\" | \"light\" | \"system\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The dark mode setting for the component\nOptions: \"light\", \"dark\", \"system\"\nDefault: \"system\""
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "dark-mode",
"defaultValue": "'system'"
}
};
}
}
//# sourceMappingURL=pid-actions.js.map