@aqua-ds/web-components
Version:
AquaDS Web Components
57 lines (53 loc) • 2.76 kB
JavaScript
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { d as defineCustomElement$1 } from './aq-tooltip2.js';
const aqSubheadingCss = ".aq-subheading{display:-ms-inline-flexbox;display:inline-flex;gap:var(--spacing-size-small);color:var(--color-ink-base);font-family:var(--font-family-basic);font-weight:var(--font-weight-semi-bold);font-size:var(--font-size-m);line-height:var(--font-line-height-6)}.aq-subheading__info{color:var(--color-paper-darker);font-size:var(--font-size-s)}.aq-subheading--required::after{content:\"*\";vertical-align:top;font-size:var(--font-size-xs);color:var(--color-danger-base)}";
const AqSubheading = /*@__PURE__*/ proxyCustomElement(class AqSubheading extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.isRequired = false;
this.tooltipWidth = '';
this.info = '';
this.level = 2;
this.customClass = '';
}
get infoIsVisible() {
return this.info?.length > 0;
}
getTooltip() {
return (this.info !== '' && (h("aq-tooltip", { config: { placement: 'top', maxWidth: this.tooltipWidth } }, h("span", null, this.info))));
}
render() {
const Tag = `h${this.level}`;
const tooltip = this.getTooltip();
return (h(Tag, { key: '01c2b744a8564f23b81b48417577cf46b7d45194', class: "aq-subheading" }, h("slot", { key: 'c819b7430170a64cf855d2fae83a551396ec8a5e', name: "text" }), this.isRequired && h("span", { key: 'd22249a5a1a5a15fe0d903976ddbc3545fe2d629', class: "aq-subheading--required" }), h("span", { key: '181328d1f25a5e78c557b23f8b3de0c22571f8c6' }, tooltip, this.info && h("span", { key: 'c3d58a017703003287c11234cec6495042d84354', class: "aq-icon-alert-circle aq-subheading__info", "aria-hidden": "true" }))));
}
static get style() { return aqSubheadingCss; }
}, [260, "aq-subheading", {
"isRequired": [4, "is-required"],
"tooltipWidth": [1, "tooltip-width"],
"info": [1],
"level": [2],
"customClass": [1, "custom-class"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["aq-subheading", "aq-tooltip"];
components.forEach(tagName => { switch (tagName) {
case "aq-subheading":
if (!customElements.get(tagName)) {
customElements.define(tagName, AqSubheading);
}
break;
case "aq-tooltip":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
export { AqSubheading as A, defineCustomElement as d };