dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
122 lines (121 loc) • 4.1 kB
JavaScript
import { clsx as l } from "../../node_modules/clsx/dist/clsx.js";
import "../../node_modules/@lit/reactive-element/reactive-element.js";
import { nothing as p } from "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { property as a } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { html as n } from "../../node_modules/lit-html/static.js";
import { DdsElement as u } from "../../internal/dds-hu-element.js";
import { SizedMixin as m } from "../../internal/mixin/sizedMixin.js";
import f from "../icon/icon.component.js";
import S from "../stack/stack.component.js";
import b from "./badge.scss.js";
import { unsafeCSS as I } from "../../node_modules/@lit/reactive-element/css-tag.js";
var g = Object.defineProperty, c = (d, t, e, y) => {
for (var i = void 0, r = d.length - 1, h; r >= 0; r--)
(h = d[r]) && (i = h(t, e, i) || i);
return i && g(t, e, i), i;
};
const v = m(u), s = class s extends v {
constructor() {
super(...arguments), this.type = "neutral", this.live = !1, this._hasSlottedIcon = !1, this._cachedIconSize = 12;
}
/** Maps effectiveSize from SizedMixin to the badge's two visual sizes (sm | lg). */
get badgeSize() {
const t = this.effectiveSize;
return t === "lg" || t === "md" ? "lg" : "sm";
}
firstUpdated(t) {
super.firstUpdated(t), this.setAccessibilityAttributes(), this._cachedIconSize = this.getIconSize(this.badgeSize), this.setupSlotListeners(), this.updateIconSlot();
}
updated(t) {
super.updated(t), (t.has("size") || t.has("sizeMap")) && (this._cachedIconSize = this.getIconSize(this.badgeSize), this.updateIconSlot()), t.has("live") && this.setAccessibilityAttributes(), t.has("icon") && this.validateIcon();
}
setAccessibilityAttributes() {
this.live ? (this.setAttribute("role", "status"), this.setAttribute("aria-live", "polite")) : (this.removeAttribute("role"), this.removeAttribute("aria-live"));
}
validateIcon() {
this.icon && typeof this.icon == "string" && this.icon.trim() === "" && console.warn("Badge: Empty icon name provided");
}
setupSlotListeners() {
try {
if (!this.shadowRoot) return;
const t = this.shadowRoot.querySelector(
'slot[name="icon"]'
);
if (!t) return;
t.addEventListener("slotchange", () => {
this.updateIconSlot(), this.requestUpdate();
});
} catch (t) {
console.warn("Failed to setup slot listeners:", t);
}
}
updateIconSlot() {
try {
if (!this.shadowRoot) return;
const t = this.shadowRoot.querySelector(
'slot[name="icon"]'
);
if (!t) {
this._hasSlottedIcon = !1;
return;
}
const e = t.assignedElements();
this._hasSlottedIcon = e.length > 0, e.length > 0 && e[0].setAttribute(
"staticSize",
this._cachedIconSize.toString()
);
} catch (t) {
console.warn("Failed to update icon slot:", t), this._hasSlottedIcon = !1;
}
}
getIconSize(t) {
return t === "sm" ? 12 : 16;
}
renderIcon() {
return this.icon ? n`
<dap-ds-icon
part="icon"
exportparts="icon, base:icon-base"
name="${this.icon}"
staticSize=${this._cachedIconSize}>
</dap-ds-icon>
` : n`<slot name="icon" part="icon"></slot>`;
}
render() {
const t = this.icon || this._hasSlottedIcon;
return n`
<div
part="base"
class=${l(
"badge",
`badge--${this.type}`,
`badge--${this.badgeSize}`,
t && "badge--has-icon"
)}>
<dap-ds-stack direction="row" spacing="100">
${t ? this.renderIcon() : p}
<slot part="content"></slot>
</dap-ds-stack>
</div>
`;
}
};
s.tagName = "dap-ds-badge", s.dependencies = {
"dap-ds-icon": f,
"dap-ds-stack": S
}, s.styles = I(b);
let o = s;
c([
a()
], o.prototype, "type");
c([
a()
], o.prototype, "icon");
c([
a({ type: Boolean })
], o.prototype, "live");
export {
o as default
};
//# sourceMappingURL=badge.component.js.map