@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.
73 lines (72 loc) • 2.41 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, Host } from "@stencil/core";
import { HSLColor } from "./HSLColor";
export class ColorHighlight {
async componentWillLoad() {
this.color = await HSLColor.generateColor(this.text);
}
render() {
return (h(Host, { key: '50b6e91f4e98be29cfa37552eb799883aeb49c9e' }, h("span", { key: '72295507c6bdc176bb0bb66e2fcd59a20cc567d0', style: {
color: 'hsl(' + this.color.hue + ',' + this.color.sat + '%,' + this.color.lum + '%)',
}, class: `m-0 inline p-0 align-baseline font-mono leading-none font-bold` }, this.text)));
}
static get is() { return "color-highlight"; }
static get originalStyleUrls() {
return {
"$": ["color-highlight.css"]
};
}
static get styleUrls() {
return {
"$": ["color-highlight.css"]
};
}
static get properties() {
return {
"text": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [{
"name": "type",
"text": "{string}"
}],
"text": "The text to highlight."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "text"
}
};
}
static get states() {
return {
"color": {}
};
}
}
//# sourceMappingURL=color-highlight.js.map