@sellmate/design-system 1.0.17 → 1.0.18

package/dist/esm/sd-toast-message.entry.js

@@ -1,58 +0,0 @@
-import { r as registerInstance, c as createEvent, h } from './index-BNCQkS1w.js';
-import { r as resolveColor } from './resolveColor-DcGvp3RM.js';
-
-const sdToastMessageCss = () => `sd-toast-message{display:block;width:fit-content;height:fit-content}sd-toast-message .sd-toast-message{display:flex;width:fit-content;align-items:center;gap:16px;padding:12px 24px;border-radius:4px;background-color:var(--sd-toast-bg);color:var(--sd-toast-text);transition:opacity 0.2s ease, visibility 0.2s ease;box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}sd-toast-message .sd-toast-message--hidden{opacity:0;visibility:hidden;pointer-events:none}sd-toast-message .sd-toast-message__icon{display:flex;align-items:center;flex-shrink:0}sd-toast-message .sd-toast-message__content{display:flex;flex:1}sd-toast-message .sd-toast-message__message{font-size:14px;line-height:20px;font-weight:400}sd-toast-message .sd-toast-message__link{font-size:14px;line-height:20px;color:var(--sd-toast-text);text-decoration:underline;cursor:pointer;transition:opacity 0.2s ease;margin-left:4px}sd-toast-message .sd-toast-message__link:hover{opacity:0.8}sd-toast-message .sd-toast-message__button{flex-shrink:0}sd-toast-message .sd-toast-message__button button{color:var(--button-text-color, inherit) !important}sd-toast-message .sd-toast-message__close{display:flex;align-items:center;justify-content:center;padding:4px;background-color:transparent;border:none;cursor:pointer;transition:opacity 0.2s ease;flex-shrink:0}sd-toast-message .sd-toast-message__close:hover{opacity:0.7}sd-toast-message .sd-toast-message__close:active{opacity:0.5}`;
-
-const SdToastMessage = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.close = createEvent(this, "sdClose");
-        this.buttonClick = createEvent(this, "sdButtonClick");
-    }
-    icon;
-    message;
-    link;
-    linkLabel;
-    buttonLabel;
-    useClose = false;
-    type = 'basicDark';
-    close;
-    buttonClick;
-    isVisible = true;
-    static COLOR_OF_TYPE = {
-        basicLight: { background: 'white', text: 'grey_95' },
-        basicDark: { background: 'steelblue_90', text: 'white' },
-        error: { background: 'red_70', text: 'white' },
-        caution: { background: 'yellow_40', text: 'grey_90' },
-        complete: { background: 'green_75', text: 'white' },
-        progress: { background: 'brilliantblue_80', text: 'white' },
-    };
-    handleClose = () => {
-        this.isVisible = false;
-        this.close.emit();
-    };
-    handleButtonClick = () => {
-        this.buttonClick.emit();
-    };
-    getContainerClasses() {
-        const classes = ['sd-toast-message', `sd-toast-message--${this.type}`];
-        if (!this.isVisible) {
-            classes.push('sd-toast-message--hidden');
-        }
-        return classes.join(' ');
-    }
-    render() {
-        const colorTokens = SdToastMessage.COLOR_OF_TYPE[this.type];
-        const colors = {
-            background: resolveColor(colorTokens.background),
-            text: resolveColor(colorTokens.text),
-        };
-        return (h("div", { key: '5fd84c67e2766016835cfa6fb87a6624b654338d', style: {
-                '--sd-toast-bg': colors.background,
-                '--sd-toast-text': colors.text,
-            } }, h("div", { key: '00cbdacb890e65c6a4a1980933496e3a007d4c55', class: this.getContainerClasses(), role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: '40a4942dafb3c7b5e720ece5af28bfbe40a05726', class: "sd-toast-message__icon" }, h("sd-icon", { key: 'a2541d653e24e33a2496a36f476a98acd81d1d9d', name: this.icon, size: 16, color: colors.text }))), h("div", { key: '09d913c231f397813f4c145577113334b4d8936c', class: "sd-toast-message__content" }, h("span", { key: '1b6ddeadab09234698824b2e07b6b3170a52b742', class: "sd-toast-message__message" }, this.message)), this.link && (h("a", { key: '2c85646a763edb49dfd4ace150b11704064ffacb', href: this.link, class: "sd-toast-message__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (h("sd-button", { key: '5e53f5a629c3b9a1000b8606877d833eaf56de2a', class: `sd-toast-message__button ${this.type === 'basicLight' ? 'text-white' : ''}`, label: this.buttonLabel, variant: "primary", color: this.type === 'basicLight' ? 'oceanblue_75' : 'white', size: "sm", onSdClick: this.handleButtonClick, style: this.type !== 'basicLight' ? { '--button-text-color': resolveColor('grey_95') } : {} })), this.useClose && (h("button", { key: '78583506f960dab8c2e978a51de52fa0cfecc559', type: "button", class: "sd-toast-message__close", onClick: this.handleClose, "aria-label": "Close", title: "Close" }, h("sd-icon", { key: '926c90a10942c2bb2ed0815236e2857d3d46b6f6', name: "close", size: 12, color: colors.text }))))));
-    }
-};
-SdToastMessage.style = sdToastMessageCss();
-
-export { SdToastMessage as sd_toast_message };