dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
171 lines (170 loc) • 6.57 kB
JavaScript
import { clsx as m } from "../../node_modules/clsx/dist/clsx.js";
import "../../node_modules/@lit/reactive-element/reactive-element.js";
import { nothing as r } from "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { property as s } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { html as i } from "../../node_modules/lit-html/static.js";
import { normalizeStringProperty as f, stringPropertyConverter as u } from "../../common/utils.js";
import { DdsElement as b } from "../../internal/dds-hu-element.js";
import "../../localization/localization.js";
import g from "../card/card.component.js";
import y from "../card/card-content.component.js";
import $ from "../icon/icon.component.js";
import v from "../icon-button/icon-button.component.js";
import x from "../icons/system/system-alert-fill/system-alert-fill.component.js";
import B from "../icons/system/system-checkbox-circle-fill/system-checkbox-circle-fill.component.js";
import S from "../icons/system/system-error-warning-fill/system-error-warning-fill.component.js";
import _ from "../icons/system/system-information-2-fill/system-information-2-fill.component.js";
import C from "./callout.scss.js";
import { unsafeCSS as D } from "../../node_modules/@lit/reactive-element/css-tag.js";
import { translate as I } from "../../node_modules/lit-i18n/src/lit-i18n.js";
var w = Object.defineProperty, a = (d, t, n, p) => {
for (var l = void 0, c = d.length - 1, h; c >= 0; c--)
(h = d[c]) && (l = h(t, n, l) || l);
return l && w(t, n, l), l;
}, e;
const o = (e = class extends b {
constructor() {
super(...arguments), this.variant = "brand", this.alignment = "horizontal", this.shade = "base", this.noBorder = "true", this.closeable = !1, this.closeButtonTestId = "callout-close-button", this.opened = "true", this._hasActions = !1;
}
get hasActions() {
return this._hasActions;
}
handleActionsSlotChange(t) {
const p = t.target.assignedElements();
this._hasActions = p.length > 0, this.requestUpdate();
}
getDefaultIcon(t) {
var n;
return (n = e.defaultIcons[t]) != null ? n : e.defaultIcons.brand;
}
handleClose() {
this.emit("dds-close");
}
handleKeyDown(t) {
t.key === "Escape" && this.closeable && (t.preventDefault(), this.handleClose());
}
updated(t) {
super.updated(t), t.has("title") && (this.title = f(this.title));
}
render() {
return this.opened !== "false" ? i`
<dap-ds-card
part="base"
role="region"
aria-live="polite"
aria-labelledby=${this.title && typeof this.title == "string" && this.title.trim() && this.title !== "null" && this.title !== "undefined" ? "callout-title" : r}
=${this.handleKeyDown}
.noBorder=${this.noBorder === "true"}
class=${m(
"callout",
`callout--${this.variant}`,
`callout--${this.alignment}`,
`callout--${this.shade}`,
{ "callout--border": this.noBorder === "false" }
)}>
<dap-ds-card-content
class="callout__content"
spacing="none"
part="content"
exportparts="base:card-content">
<span class="callout__icon" aria-hidden="true">
<slot name="icon" part="icon">
${this.getDefaultIcon(this.variant)}
</slot>
</span>
<span class="callout__content-wrapper">
${this.title && typeof this.title == "string" && this.title.trim() && this.title !== "null" && this.title !== "undefined" ? i`<span
part="title"
class="callout__title"
id="callout-title">
<slot name="title">${this.title}</slot>
</span>` : r}
<span part="description" class="callout__description">
<slot></slot>
</span>
<span
part="actions"
class="callout__actions"
?hidden=${!this.hasActions}>
<slot
name="actions"
part="actions"
=${this.handleActionsSlotChange}></slot>
</span>
</span>
${this.closeable ? i` <span part="close" class="callout__close">
<slot name="close">
<dap-ds-icon-button
clean
data-testid=${this.closeButtonTestId}
aria-label=${this.closeButtonLabel ? this.closeButtonLabel : I("close")}
=${this.handleClose}>
<dap-ds-icon name="close-line"></dap-ds-icon>
</dap-ds-icon-button>
</slot>
</span>` : r}
</dap-ds-card-content>
</dap-ds-card>
` : r;
}
}, e.tagName = "dap-ds-callout", e.dependencies = {
"dap-ds-icon-information-2-fill": _,
"dap-ds-icon-checkbox-circle-fill": B,
"dap-ds-icon-alert-fill": x,
"dap-ds-icon-error-warning-fill": S,
"dap-ds-card": g,
"dap-ds-card-content": y,
"dap-ds-icon-button": v,
"dap-ds-icon": $
}, e.styles = D(C), e.defaultIcons = {
brand: i`<dap-ds-icon-information-2-fill
aria-hidden="true"
exportparts="base:icon-base"></dap-ds-icon-information-2-fill>`,
info: i`<dap-ds-icon-information-2-fill
aria-hidden="true"
exportparts="base:icon-base"></dap-ds-icon-information-2-fill>`,
positive: i`<dap-ds-icon-checkbox-circle-fill
aria-hidden="true"
exportparts="base:icon-base"></dap-ds-icon-checkbox-circle-fill>`,
warning: i`<dap-ds-icon-alert-fill
aria-hidden="true"
exportparts="base:icon-base"></dap-ds-icon-alert-fill>`,
negative: i`<dap-ds-icon-error-warning-fill
aria-hidden="true"
exportparts="base:icon-base"></dap-ds-icon-error-warning-fill>`
}, e);
a([
s()
], o.prototype, "variant");
a([
s()
], o.prototype, "alignment");
a([
s()
], o.prototype, "shade");
a([
s({ type: String })
], o.prototype, "noBorder");
a([
s({ type: Boolean })
], o.prototype, "closeable");
a([
s({
converter: u
})
], o.prototype, "title");
a([
s()
], o.prototype, "closeButtonLabel");
a([
s()
], o.prototype, "closeButtonTestId");
a([
s({ reflect: !0 })
], o.prototype, "opened");
let R = o;
export {
R as default
};
//# sourceMappingURL=callout.component.js.map