@aqua-ds/web-components
Version:
AquaDS Web Components
66 lines (61 loc) • 5.62 kB
JavaScript
import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
var Variant;
(function (Variant) {
Variant["ACCENT"] = "accent";
Variant["ALERT"] = "alert";
Variant["HIGHLIGHT"] = "highlight";
Variant["INFO"] = "info";
Variant["POSITIVE"] = "positive";
Variant["SUPPORT"] = "support";
Variant["DEFAULT"] = "default";
})(Variant || (Variant = {}));
const aqTagCss = ":root{--aq-tag-text-color:var(--color-ink-light);--aq-tag-close-icon-color:var(--color-ink-lighter);--aq-tag-background-color:var(--color-paper-base)}.aq-tag{font-family:var(--font-family-basic);font-size:var(--font-size-xs);font-weight:var(--font-weight-semi-bold);color:var(--aq-tag-text-color);background-color:var(--aq-tag-background-color);border-radius:var(--spacing-size-medium);gap:var(--spacing-size-short);padding:var(--spacing-size-small) var(--spacing-size-minor) var(--spacing-size-small);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;vertical-align:top}.aq-tag__left{display:-ms-inline-flexbox;display:inline-flex;gap:var(--spacing-size-small)}.aq-tag__icon{font-size:var(--font-size-m)}.aq-tag__icon-close{font-size:var(--font-size-xs);color:var(--aq-tag-close-icon-color);cursor:pointer;border-radius:50%;padding:var(--spacing-size-small)}.aq-tag__icon-close:hover{background-color:var(--color-white);opacity:0.4}.aq-tag.is-disabled{pointer-events:none;cursor:default;--aq-tag-text-color:var(--color-paper-dark);--aq-tag-background-color:var(--color-paper-light);--aq-tag-close-icon-color:var(--color-paper-dark)}.aq-tag.accent{--aq-tag-text-color:var(--color-rose-70);--aq-tag-background-color:var(--color-rose-20);--aq-tag-close-icon-color:var(--color-rose-70)}.aq-tag.accent.is-disabled{--aq-tag-text-color:var(--color-rose-20);--aq-tag-background-color:var(--color-rose-5);--aq-tag-close-icon-color:var(--color-rose-20)}.aq-tag.highlight{--aq-tag-text-color:var(--color-purple-70);--aq-tag-background-color:var(--color-purple-20);--aq-tag-close-icon-color:var(--color-purple-70)}.aq-tag.highlight.is-disabled{--aq-tag-text-color:var(--color-purple-20);--aq-tag-background-color:var(--color-purple-5);--aq-tag-close-icon-color:var(--color-purple-20)}.aq-tag.positive{--aq-tag-text-color:var(--color-lime-70);--aq-tag-background-color:var(--color-lime-20);--aq-tag-close-icon-color:var(--color-lime-70)}.aq-tag.positive.is-disabled{--aq-tag-text-color:var(--color-lime-20);--aq-tag-background-color:var(--color-lime-5);--aq-tag-close-icon-color:var(--color-lime-20)}.aq-tag.alert{--aq-tag-text-color:var(--color-orange-70);--aq-tag-background-color:var(--color-orange-20);--aq-tag-close-icon-color:var(--color-orange-70)}.aq-tag.alert.is-disabled{--aq-tag-text-color:var(--color-orange-20);--aq-tag-background-color:var(--color-orange-5);--aq-tag-close-icon-color:var(--color-orange-20)}.aq-tag.support{--aq-tag-text-color:var(--color-teal-70);--aq-tag-background-color:var(--color-teal-20);--aq-tag-close-icon-color:var(--color-teal-70)}.aq-tag.support.is-disabled{--aq-tag-text-color:var(--color-teal-20);--aq-tag-background-color:var(--color-teal-5);--aq-tag-close-icon-color:var(--color-teal-20)}.aq-tag.info{--aq-tag-text-color:var(--color-cyan-70);--aq-tag-background-color:var(--color-cyan-20);--aq-tag-close-icon-color:var(--color-cyan-70)}.aq-tag.info.is-disabled{--aq-tag-text-color:var(--color-cyan-20);--aq-tag-background-color:var(--color-cyan-5);--aq-tag-close-icon-color:var(--color-cyan-20)}.aq-tag:not(:has(.aq-tag__icon-close)){padding-right:calc(var(--spacing-size-small) * 3)}.aq-tag:not(:has(.aq-tag__icon)){padding-left:calc(var(--spacing-size-small) * 3)}";
const AqTag = /*@__PURE__*/ proxyCustomElement(class AqTag extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.close = createEvent(this, "close", 7);
this.text = '';
this.icon = '';
this.isDisabled = false;
this.hasCloseIcon = false;
this.variant = Variant.DEFAULT;
}
handleClose(event) {
this.close.emit({ close: true, event });
}
get getStyleClassMap() {
return {
'aq-tag': true,
'is-disabled': this.isDisabled,
[this.variant]: !!this.variant,
};
}
render() {
const cssClass = this.getStyleClassMap;
return (h(Fragment, { key: '6cdcd2dc2b085d152268a1566fe938beb59d9a0a' }, h("div", { key: '440981b919a1a853526fb8634395ac54206445bb', class: cssClass }, h("div", { key: '9334eca123f16720008b3fb6373610d70dd22689', class: "aq-tag__left" }, this.icon && h("span", { key: '2ecb4f6ef8814e745fbb71f5976d1342d3bc8694', class: `aq-tag__icon ${this.icon}` }), this.text), this.hasCloseIcon && h("span", { key: '08a5a1b35d498bd962df85cda67476843acab798', class: "aq-icon-close aq-tag__icon-close", onClick: e => this.handleClose(e) }))));
}
static get style() { return aqTagCss; }
}, [256, "aq-tag", {
"text": [1],
"icon": [1],
"isDisabled": [4, "is-disabled"],
"hasCloseIcon": [4, "has-close-icon"],
"variant": [1]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["aq-tag"];
components.forEach(tagName => { switch (tagName) {
case "aq-tag":
if (!customElements.get(tagName)) {
customElements.define(tagName, AqTag);
}
break;
} });
}
export { AqTag as A, defineCustomElement as d };