@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
100 lines (92 loc) • 5.54 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { B as BaseWebComponent } from './variant-quote.js';
import { I as IconFC } from './component3.js';
import './common.js';
import './prop.validators.js';
import { c as createPropDefinition, n as normalizeString } from './normalizers.js';
import { l as labelProp } from './label2.js';
import { B as BaseController } from './base-controller.js';
const iconsProp = createPropDefinition('icons', 'kolicon-logo', normalizeString);
const iconPropsConfig = {
required: [iconsProp, labelProp],
};
class IconController extends BaseController {
constructor(stateAccess) {
super(stateAccess, iconPropsConfig);
}
componentWillLoad(props) {
const { icons, label } = props;
this.watchIcons(icons);
this.watchLabel(label);
}
watchIcons(value) {
iconsProp.apply(value, (v) => {
this.setRenderProp('icons', v);
});
}
watchLabel(value) {
labelProp.apply(value, (v) => {
this.setRenderProp('label', v);
});
}
}
const defaultStyleCss = "@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1780571516250\"); /* IE9*/\n src: url(\"kolicons.eot?t=1780571516250#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1780571516250\") format(\"woff2\"), url(\"kolicons.woff?t=1780571516250\") format(\"woff\"), url(\"kolicons.ttf?t=1780571516250\") format(\"truetype\"), url(\"kolicons.svg?t=1780571516250#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\n [class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n .kolicon-alert-error::before {\n content: \"\\ea01\";\n }\n .kolicon-alert-info::before {\n content: \"\\ea02\";\n }\n .kolicon-alert-success::before {\n content: \"\\ea03\";\n }\n .kolicon-alert-warning::before {\n content: \"\\ea04\";\n }\n .kolicon-check::before {\n content: \"\\ea05\";\n }\n .kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n }\n .kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n }\n .kolicon-chevron-down::before {\n content: \"\\ea08\";\n }\n .kolicon-chevron-left::before {\n content: \"\\ea09\";\n }\n .kolicon-chevron-right::before {\n content: \"\\ea0a\";\n }\n .kolicon-chevron-up::before {\n content: \"\\ea0b\";\n }\n .kolicon-cogwheel::before {\n content: \"\\ea0c\";\n }\n .kolicon-cross::before {\n content: \"\\ea0d\";\n }\n .kolicon-eye-closed::before {\n content: \"\\ea0e\";\n }\n .kolicon-eye::before {\n content: \"\\ea0f\";\n }\n .kolicon-house::before {\n content: \"\\ea10\";\n }\n .kolicon-kolibri::before {\n content: \"\\ea11\";\n }\n .kolicon-link-external::before {\n content: \"\\ea12\";\n }\n .kolicon-link::before {\n content: \"\\ea13\";\n }\n .kolicon-minus::before {\n content: \"\\ea14\";\n }\n .kolicon-plus::before {\n content: \"\\ea15\";\n }\n .kolicon-settings::before {\n content: \"\\ea16\";\n }\n .kolicon-sort-asc::before {\n content: \"\\ea17\";\n }\n .kolicon-sort-desc::before {\n content: \"\\ea18\";\n }\n .kolicon-sort-neutral::before {\n content: \"\\ea19\";\n }\n .kolicon-up::before {\n content: \"\\ea1a\";\n }\n .kolicon-version::before {\n content: \"\\ea1b\";\n }\n}\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n}";
const KolIcon$1 = proxyCustomElement(class KolIcon extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.__attachShadow();
this.ctrl = new IconController(BaseWebComponent.stateLess);
}
watchIcons(value) {
this.ctrl.watchIcons(value);
}
watchLabel(value) {
this.ctrl.watchLabel(value);
}
componentWillLoad() {
this.ctrl.componentWillLoad({
icons: this._icons,
label: this._label,
});
}
render() {
return (h(Host, { key: '0127f2d35f4164f440a30fec825e10158fc833a5' }, h(IconFC, { key: '6fa23897706337c29bc4ef2551904436b2a65785', icons: this.ctrl.getRenderProp('icons'), label: this.ctrl.getRenderProp('label') })));
}
static get watchers() { return {
"_icons": ["watchIcons"],
"_label": ["watchLabel"]
}; }
static get style() { return {
default: defaultStyleCss
}; }
}, [289, "kol-icon", {
"_icons": [1],
"_label": [1]
}, undefined, {
"_icons": ["watchIcons"],
"_label": ["watchLabel"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kol-icon"];
components.forEach(tagName => { switch (tagName) {
case "kol-icon":
if (!customElements.get(tagName)) {
customElements.define(tagName, KolIcon$1);
}
break;
} });
}
const KolIcon = KolIcon$1;
const defineCustomElement = defineCustomElement$1;
export { KolIcon, defineCustomElement };
//# sourceMappingURL=kol-icon.js.map
//# sourceMappingURL=kol-icon.js.map