UNPKG

radh-ui

Version:

Stencil Component Starter

67 lines (60 loc) 2 kB
'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); const index = require('./index-710e648a.js'); function getComponentClosestLanguage(element) { let closestElement = element.closest('[lang]'); return closestElement ? closestElement.lang : 'en'; } function fetchLocaleStringsForComponent(componentName, locale) { return new Promise((resolve, reject) => { fetch(`/assets/i18n/${componentName}.${locale}.json`) .then((result) => { if (result.ok) resolve(result.json()); else reject(); }, () => reject()); }); } async function getLocaleComponentStrings(element) { let componentName = element.tagName.toLowerCase(); let componentLanguage = getComponentClosestLanguage(element); let strings; try { strings = await fetchLocaleStringsForComponent(componentName, componentLanguage); } catch (e) { console.warn(`no locale for ${componentName} (${componentLanguage}) loading default locale en.`); strings = await fetchLocaleStringsForComponent(componentName, 'en'); } return strings; } const radhHelloCss = ".active{color:red}"; class RadhHello { constructor(hostRef) { index.registerInstance(this, hostRef); this.selected = index.createEvent(this, "selected", 7); } async loadStrings() { this.strings = await getLocaleComponentStrings(this.myComponent); } componentWillLoad() { return this.loadStrings(); } async loadLocale() { this.loadStrings(); } onListenClick() { this.selected.emit(this.name); this.addClass(); } addClass() { this.myComponent.classList.add("active"); } render() { return (index.h("div", { id: "hello" }, this.strings.hello, " ", this.name)); } get myComponent() { return index.getElement(this); } } RadhHello.style = radhHelloCss; exports.radh_hello = RadhHello;