@telekom/scale-components
Version:
Scale is the digital design system for Telekom products and experiences.
140 lines (135 loc) • 7.73 kB
JavaScript
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { c as classnames } from './index2.js';
import { s as statusNote } from './status-note.js';
import { e as emitEvent } from './utils.js';
import { d as defineCustomElement$6 } from './action-circle-close.js';
import { d as defineCustomElement$5 } from './action-success.js';
import { d as defineCustomElement$4 } from './alert-error.js';
import { d as defineCustomElement$3 } from './alert-information.js';
import { d as defineCustomElement$2 } from './alert-warning.js';
const notificationMessageCss = ":host{--width:100%;--radius:var(--telekom-radius-standard);--border:var(--telekom-line-weight-standard) solid transparent;--background-error:var(--telekom-color-functional-danger-subtle);--background-warning:var(--telekom-color-functional-warning-subtle);--background-informational:var(\n --telekom-color-functional-informational-subtle\n );--background-success:var(--telekom-color-functional-success-subtle)}.notification-message{border:var(--border);border-radius:var(--radius);width:var(--width);position:relative}.notification-message--variant-error{background:var(--background-error)}.notification-message--variant-warning{background-color:var(--background-warning)}.notification-message--variant-informational{background-color:var(--background-informational)}.notification-message--variant-success{background-color:var(--background-success)}.notification-message__heading{margin:14px 48px 14px 48px;font-weight:var(--telekom-typography-font-weight-bold);line-height:var(--telekom-typography-line-spacing-standard)}.notification-message__text{margin:8px 48px 15px 48px}::slotted(*){font-weight:var(--telekom-typography-font-weight-regular)}.notification-message__icon-close{position:absolute;top:8px;right:13.5px;border:none;cursor:pointer;margin:0;padding:0;background:transparent;color:var(--telekom-color-text-and-icon-standard)}.notification-message__icon-close svg{height:19px;width:19px;padding:6.5px;border-radius:20%}.notification-message__icon-close:hover svg{background-color:hsl(0, 0%, 100%);color:var(--telekom-color-text-and-icon-primary-hovered)}.notification-message__icon-success{position:absolute;top:12.5px;left:17px;height:20px;width:20px;color:var(--telekom-color-text-and-icon-functional-success)}.notification-message__icon-error{position:absolute;top:12px;left:17px;height:20px;width:20px;color:var(--telekom-color-text-and-icon-functional-danger)}.notification-message__icon-information{position:absolute;top:12px;left:17px;height:20px;width:20px;color:var(--telekom-color-text-and-icon-functional-informational)}@media screen and (forced-colors: active), (-ms-high-contrast: active){.notification-message__icon-close{color:hsl(0, 0%, 100%)}.notification-message{border:1px solid hsl(0, 0%, 100%)}}";
const NotificationMessage = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.scaleClose = createEvent(this, "scale-close", 7);
this.variant = 'informational';
this.dismissible = false;
this.autoHide = false;
this.autoHideDuration = 3000;
/** (optional) Label for close button */
this.closeButtonLabel = 'close';
/** (optional) Title for close button */
this.closeButtonTitle = 'close';
this.close = () => {
this.opened = false;
emitEvent(this, 'scaleClose');
};
}
componentWillLoad() {
this.hasSlotText = !!this.hostElement.querySelector('[slot=text]');
}
componentDidRender() {
if (this.autoHide === true) {
setTimeout(this.close, this.autoHideDuration);
}
}
componentDidUpdate() {
this.hasSlotText = !!this.hostElement.querySelector('[slot=text]');
}
connectedCallback() {
statusNote({ source: this.hostElement, type: 'warn' });
}
async open() {
this.opened = true;
}
handleIcons() {
if (this.variant) {
switch (this.variant) {
case 'success':
return (h("scale-icon-action-success", { class: "notification-message__icon-success", color: "#187431", "aria-hidden": "true" }));
case 'informational':
return (h("scale-icon-alert-information", { class: "notification-message__icon-information", "aria-hidden": "true" }));
case 'error':
return (h("scale-icon-alert-error", { class: "notification-message__icon-error", "aria-hidden": "true" }));
case 'warning':
return (h("scale-icon-alert-warning", { class: "notification-message__icon-information", color: "#AE461C", "aria-hidden": "true" }));
}
}
return;
}
render() {
if (!this.opened) {
return null;
}
return (h(Host, null, h("div", { role: "alert", style: { display: `${this.opened ? '' : 'none'}` }, part: this.getBasePartMap(), class: this.getCssClassMap(), tabindex: "0" }, h("div", { part: "container", class: "notification-message__container" }, this.handleIcons(), h("div", { part: "heading", class: "notification-message__heading" }, h("slot", null, "\u2003"), this.dismissible && (h("button", { part: "button-dismissable", type: "button", class: "notification-message__icon-close", onClick: () => this.close(), tabindex: 0, "aria-label": this.closeButtonLabel, title: this.closeButtonTitle, onKeyDown: (e) => {
if (e.key === 'Enter') {
this.close();
}
} }, h("scale-icon-action-circle-close", null)))), this.hasSlotText && (h("div", { part: "text", class: "notification-message__text" }, h("slot", { name: "text" })))))));
}
getBasePartMap() {
return this.getCssOrBasePartMap('basePart');
}
getCssClassMap() {
return this.getCssOrBasePartMap('css');
}
getCssOrBasePartMap(mode) {
const name = 'notification-message';
const prefix = mode === 'basePart' ? '' : `${name}--`;
return classnames(name, this.variant && `${prefix}variant-${this.variant}`);
}
get hostElement() { return this; }
static get style() { return notificationMessageCss; }
}, [1, "scale-notification-message", {
"variant": [1],
"dismissible": [4],
"opened": [516],
"autoHide": [4, "auto-hide"],
"autoHideDuration": [2, "auto-hide-duration"],
"closeButtonLabel": [1, "close-button-label"],
"closeButtonTitle": [1, "close-button-title"],
"open": [64]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["scale-notification-message", "scale-icon-action-circle-close", "scale-icon-action-success", "scale-icon-alert-error", "scale-icon-alert-information", "scale-icon-alert-warning"];
components.forEach(tagName => { switch (tagName) {
case "scale-notification-message":
if (!customElements.get(tagName)) {
customElements.define(tagName, NotificationMessage);
}
break;
case "scale-icon-action-circle-close":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "scale-icon-action-success":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "scale-icon-alert-error":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "scale-icon-alert-information":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "scale-icon-alert-warning":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
const ScaleNotificationMessage = NotificationMessage;
const defineCustomElement = defineCustomElement$1;
export { ScaleNotificationMessage, defineCustomElement };