@aqua-ds/web-components
Version:
AquaDS Web Components
56 lines (52 loc) • 2.77 kB
JavaScript
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { d as defineCustomElement$1 } from './aq-tooltip2.js';
const aqLabelCss = ".aq-label{font-family:var(--font-family-basic);font-size:var(--font-size-xs);font-weight:var(--font-weight-semi-bold);color:var(--color-ink-light);display:-ms-inline-flexbox;display:inline-flex;gap:var(--spacing-size-small)}.aq-label__required{color:var(--color-danger-base)}.aq-label.is-disabled label{color:var(--color-paper-dark);pointer-events:none}.aq-label.is-disabled .aq-label__required{color:var(--color-danger-light)}";
const AqLabel = /*@__PURE__*/ proxyCustomElement(class AqLabel extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.for = '';
this.info = '';
this.tooltipWidth = '';
this.isDisabled = false;
this.isRequired = false;
}
getStyleClassMap() {
return {
'aq-label': true,
'is-disabled': this.isDisabled,
};
}
render() {
const cssClass = this.getStyleClassMap();
return (h("div", { key: 'c47c8051f703f6c211cf9372dc09f02b58ffd46c', class: cssClass }, h("label", { key: '6ad6e504294054b8e4ffcb8fe32ba63949d8bcd8', htmlFor: this.for }, h("slot", { key: '4bcb415199a52697b3a5bcce2c79d11b9748f570', name: "text" })), this.isRequired && h("span", { key: 'd0189b7e2813010bceb93c04d31c1c826e578768', class: "aq-label__required" }, "*"), !!this.info && (h("span", { key: '215fe7faa270d05c42b37dd4d8e287c4ea35e0ba' }, h("aq-tooltip", { key: 'af50cca2a6b43127e9a85bac7d71da83a2b5b019', config: { placement: 'top', maxWidth: this.tooltipWidth } }, h("span", { key: '8daa15a20d2052859517d9a157110424f0f8ba9b' }, " ", this.info, " ")), h("span", { key: 'd446be020b96fff2cae9b975d15ca1f9426a2c5d', class: "aq-icon-info-circle" })))));
}
static get style() { return aqLabelCss; }
}, [260, "aq-label", {
"for": [1],
"info": [1],
"tooltipWidth": [1, "tooltip-width"],
"isDisabled": [4, "is-disabled"],
"isRequired": [4, "is-required"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["aq-label", "aq-tooltip"];
components.forEach(tagName => { switch (tagName) {
case "aq-label":
if (!customElements.get(tagName)) {
customElements.define(tagName, AqLabel);
}
break;
case "aq-tooltip":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
export { AqLabel as A, defineCustomElement as d };