@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.
106 lines (105 loc) • 3.86 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";
export class LocaleVisualization {
constructor() {
this.showFlag = true;
}
render() {
const getLocaleDetail = (locale) => {
const userLocale = [navigator.language.split('-')[0]];
const type = locale.split('-').length > 1 ? 'language' : 'region';
const friendlyName = new Intl.DisplayNames(userLocale, { type: type }).of(locale.toUpperCase());
if (friendlyName == locale.toUpperCase()) {
return new Intl.DisplayNames(userLocale, { type: 'language' }).of(locale.toUpperCase());
}
if (type === 'language') {
const flag = generateFlag(locale.split('-')[1]);
return `${flag}${friendlyName}`;
}
return `${generateFlag(locale)}${friendlyName}`;
};
const generateFlag = (locale) => {
if (!this.showFlag)
return '';
const codePoints = locale
.toUpperCase()
.split('')
.map(char => 127397 + char.charCodeAt(0));
return String.fromCodePoint(...codePoints) + ' ';
};
return (h(Host, null, h("span", null, getLocaleDetail(this.locale))));
}
static get is() { return "locale-visualization"; }
static get properties() {
return {
"locale": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [{
"name": "type",
"text": "{string}"
}, {
"name": "public",
"text": undefined
}],
"text": "The locale to visualize."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "locale"
},
"showFlag": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "type",
"text": "{boolean}"
}, {
"name": "public",
"text": undefined
}],
"text": "Whether to show the flag of the region."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "show-flag",
"defaultValue": "true"
}
};
}
}
//# sourceMappingURL=locale-visualization.js.map