dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
235 lines (234 loc) • 8.4 kB
JavaScript
var y = Object.defineProperty, w = Object.defineProperties;
var v = Object.getOwnPropertyDescriptors;
var p = Object.getOwnPropertySymbols;
var k = Object.prototype.hasOwnProperty, E = Object.prototype.propertyIsEnumerable;
var m = (t, e, s) => e in t ? y(t, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : t[e] = s, r = (t, e) => {
for (var s in e || (e = {}))
k.call(e, s) && m(t, s, e[s]);
if (p)
for (var s of p(e))
E.call(e, s) && m(t, s, e[s]);
return t;
}, c = (t, e) => w(t, v(e));
import { clsx as M } from "../../node_modules/clsx/dist/clsx.js";
import "../../node_modules/@lit/reactive-element/reactive-element.js";
import "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { property as h } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { state as g } from "../../node_modules/@lit/reactive-element/decorators/state.js";
import { ifDefined as f } from "../../node_modules/lit-html/directives/if-defined.js";
import { repeat as C } from "../../node_modules/lit-html/directives/repeat.js";
import { html as b } from "../../node_modules/lit-html/static.js";
import "../../localization/localization.js";
import { DdsElement as T } from "../../internal/dds-hu-element.js";
import $ from "./snackbar.scss.js";
import x from "./snackbar-message.component.js";
import { unsafeCSS as A } from "../../node_modules/@lit/reactive-element/css-tag.js";
import { translate as S } from "../../node_modules/lit-i18n/src/lit-i18n.js";
var L = Object.defineProperty, l = (t, e, s, o) => {
for (var i = void 0, n = t.length - 1, u; n >= 0; n--)
(u = t[n]) && (i = u(e, s, i) || i);
return i && L(e, s, i), i;
};
typeof window != "undefined" && (window.showDapSnackbar = (t, e) => {
a.show(t, e);
}, window.closeAllDapSnackbars = () => {
a.closeAll();
});
const d = class d extends T {
constructor() {
super(...arguments), this.maxItems = 4, this.position = "bottom-right", this.duration = 6e3, this.announceMessages = !0, this.messages = [], this.idCounter = 0, this.timeouts = /* @__PURE__ */ new Map(), this.handleShowSnackbarEvent = (e) => {
const { message: s, options: o } = e.detail;
this.addMessage(s, o);
}, this.handleCloseAllEvent = () => {
this.closeAll();
}, this.handleKeyDown = (e) => {
if (e.key === "Escape" && this.messages.length > 0) {
const s = this.messages[this.messages.length - 1];
s && this.removeMessage(s.id);
}
};
}
/**
* Static method to show a snackbar message anywhere in the application
* @param message - The message to display
* @param options - Optional configuration for the message
*/
static show(e, s) {
document.dispatchEvent(
new CustomEvent("dds-show-snackbar", {
detail: { message: e, options: s },
bubbles: !0
})
);
}
/**
* Static method to show a success message
* @param message - The message to display
* @param options - Optional configuration (alertType will be overridden to 'successful')
*/
static success(e, s) {
this.show(e, c(r({}, s), { alertType: "successful" }));
}
/**
* Static method to show an error message
* @param message - The message to display
* @param options - Optional configuration (alertType will be overridden to 'error')
*/
static error(e, s) {
this.show(e, c(r({}, s), { alertType: "error" }));
}
/**
* Static method to show an information message
* @param message - The message to display
* @param options - Optional configuration (alertType will be overridden to 'information')
*/
static info(e, s) {
this.show(e, c(r({}, s), { alertType: "information" }));
}
/**
* Static method to show a default message
* @param message - The message to display
* @param options - Optional configuration (alertType will be overridden to 'default')
*/
static default(e, s) {
this.show(e, c(r({}, s), { alertType: "default" }));
}
/**
* Static method to close all snackbar messages globally
*/
static closeAll() {
document.dispatchEvent(
new CustomEvent("dds-close-all-snackbars", {
bubbles: !0
})
);
}
/**
* Close all currently displayed messages
*/
closeAll() {
this.clearAllTimeouts(), this.messages = [];
}
generateId() {
return this.idCounter++, `dap-snackbar-${this.idCounter}`;
}
addMessage(e, s) {
if (!e || typeof e != "string") {
console.warn("DapDSSnackbar: Message must be a non-empty string");
return;
}
const o = this.generateId();
this.messages.length >= this.maxItems && this.sliceMessage();
const i = r({
id: o,
message: e.trim()
}, s && { options: s });
this.messages = [...this.messages, i], this.elapseMessages(o, s == null ? void 0 : s.duration, s == null ? void 0 : s.persistent), this.announceMessages && this.announceToScreenReader(e);
}
sliceMessage() {
this.messages && (this.messages = this.messages.slice(1));
}
removeMessage(e) {
e && (this.messages = this.messages.filter(
(s) => s.id !== e
), this.clearTimeout(e));
}
elapseMessages(e, s, o) {
if (o)
return;
const i = s != null ? s : this.duration, n = setTimeout(() => {
this.removeMessage(e);
}, i);
this.timeouts.set(e, n);
}
clearTimeout(e) {
const s = this.timeouts.get(e);
s && (clearTimeout(s), this.timeouts.delete(e));
}
clearAllTimeouts() {
this.timeouts.forEach((e) => clearTimeout(e)), this.timeouts.clear();
}
connectedCallback() {
super.connectedCallback(), document.addEventListener(
"dds-show-snackbar",
this.handleShowSnackbarEvent
), document.addEventListener(
"dds-close-all-snackbars",
this.handleCloseAllEvent
), document.addEventListener("keydown", this.handleKeyDown);
}
disconnectedCallback() {
this.clearAllTimeouts(), document.removeEventListener(
"dds-show-snackbar",
this.handleShowSnackbarEvent
), document.removeEventListener(
"dds-close-all-snackbars",
this.handleCloseAllEvent
), document.removeEventListener("keydown", this.handleKeyDown), super.disconnectedCallback();
}
announceToScreenReader(e) {
const s = document.createElement("div");
s.setAttribute("aria-live", "assertive"), s.setAttribute("aria-atomic", "true"), s.style.position = "absolute", s.style.left = "-10000px", s.style.width = "1px", s.style.height = "1px", s.style.overflow = "hidden", document.body.appendChild(s), s.textContent = e, setTimeout(() => {
document.body.removeChild(s);
}, 1e3);
}
_closeMessage(e) {
var s;
(s = e == null ? void 0 : e.detail) != null && s.id && this.removeMessage(e.detail.id);
}
render() {
return b`<div
class=${M("snackbar", `snackbar--${this.position}`)}
role="region"
aria-live="polite"
aria-label=${S("snackbar.notifications")}>
${C(
this.messages,
(e) => e.id,
(e) => {
var s, o, i, n;
return b`
<dap-ds-snackbar-message
part="message"
exportparts="base:message-base, text:message-text, closebutton:message-closebutton, close-icon:message-close-icon, actions:message-actions"
@dds-close=${this._closeMessage}
id=${e.id}
message=${e.message}
alertType=${f((s = e == null ? void 0 : e.options) == null ? void 0 : s.alertType)}
.actions=${(o = e == null ? void 0 : e.options) == null ? void 0 : o.actions}
closeButton=${f((i = e == null ? void 0 : e.options) == null ? void 0 : i.closeButton)}
.customStyle=${(n = e == null ? void 0 : e.options) == null ? void 0 : n.customStyle}
position=${this.position}></dap-ds-snackbar-message>
`;
}
)}
</div>`;
}
};
d.tagName = "dap-ds-snackbar", d.dependencies = {
"dap-ds-snackbar-message": x
}, d.styles = A($);
let a = d;
l([
h({ type: Number })
], a.prototype, "maxItems");
l([
h({ type: String })
], a.prototype, "position");
l([
h({ type: Number })
], a.prototype, "duration");
l([
h({ type: Boolean })
], a.prototype, "announceMessages");
l([
g()
], a.prototype, "messages");
l([
g()
], a.prototype, "idCounter");
export {
a as default
};
//# sourceMappingURL=snackbar.component.js.map