@supersoniks/concorde 1.0.5 → 1.0.8

package/core/components/ui/tabs/tabs.js

@@ -0,0 +1,127 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement, css } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { ResizeController } from "@lit-labs/observers/resize_controller.js";
+import { tailwind } from "../theme/theme";
+let Tabs = class Tabs extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.size = "md";
+        this.direction = "column";
+        this.icon = false;
+        this._resizeController = new ResizeController(this, {});
+    }
+    updated(_changedProperties) {
+        super.updated(_changedProperties);
+        this._setChildrenSize();
+    }
+    firstUpdated() {
+        const tabsMenu = this.menu;
+        let isDown = false;
+        let startX;
+        let scrollLeft;
+        tabsMenu.addEventListener("mousedown", (e) => {
+            isDown = true;
+            tabsMenu.classList.add("active");
+            startX = e.pageX - tabsMenu.offsetLeft;
+            scrollLeft = tabsMenu.scrollLeft;
+        });
+        tabsMenu.addEventListener("mouseleave", () => {
+            isDown = false;
+            tabsMenu.classList.remove("active");
+        });
+        tabsMenu.addEventListener("mouseup", () => {
+            isDown = false;
+            tabsMenu.classList.remove("active");
+        });
+        tabsMenu.addEventListener("mousemove", (e) => {
+            if (!isDown)
+                return;
+            e.preventDefault();
+            const x = e.pageX - tabsMenu.offsetLeft;
+            const walk = (x - startX) * 1.5; //scroll-fast
+            tabsMenu.scrollLeft = scrollLeft - walk;
+        });
+    }
+    _setChildrenSize() {
+        if (this.size) {
+            const children = this.querySelectorAll("sonic-button, sonic-tabs-item");
+            children.forEach((elt) => {
+                if (!elt.hasAttribute("size")) {
+                    elt.setAttribute("size", this.size);
+                }
+            });
+        }
+    }
+    render() {
+        return html `<menu part="tabs"
+      ><slot></slot>
+      <sonic-pop class="flex"  >
+        <sonic-tab >
+          <sonic-icon prefix="iconoir" class="my-auto" size="xl" name="more-vert"></sonic-icon>
+        </sonic-tab>
+        <sonic-menu slot="content"></sonic-menu>
+      <sonic-pop>
+    </menu>`;
+    }
+};
+Tabs.styles = [
+    tailwind,
+    css `
+      :host {
+        display: block;
+      }
+
+      menu::-webkit-scrollbar {
+        display: none;
+      }
+
+      menu {
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+        overflow-x: scroll;
+        display: flex;
+        max-width: 100%;
+        flex-direction: row;
+        padding: 0.5em;
+        margin: 0;
+        gap: 0.15rem;
+      }
+
+      :host([icon]) {
+        --sc-icon-size: 1.6em;
+      }
+
+      :host([icon]) ::slotted(sonic-tab) {
+        font-size: 85em;
+        border: 7px solid;
+        text-transform: uppercase;
+      }
+    `,
+];
+__decorate([
+    property({ type: String, reflect: true })
+], Tabs.prototype, "size", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Tabs.prototype, "direction", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Tabs.prototype, "icon", void 0);
+__decorate([
+    query("menu")
+], Tabs.prototype, "menu", void 0);
+Tabs = __decorate([
+    customElement("sonic-tabs")
+], Tabs);
+export { Tabs };
+//Ajout pour la creation du cem notamment pour Storybook
+try {
+    customElements.define("sonic-tabs", Tabs);
+}
+catch (e) { }

package/core/components/ui/taxonomy/taxonomy.d.ts

@@ -0,0 +1,41 @@
+import { LitElement, nothing } from "lit";
+import "../icon/icon";
+import "../badge/badge";
+/**
+ * Le composant taxonomy crée un badge (*sonic-badge*) contenant une liste de termes préfixés par une icone (*sonic-icon*) optionelle séparées par une chaine html séparatrice (*separator*)
+ */
+export declare class Taxonomy extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Identifiant d'icone passé en interne au composant *sonic-icon*
+     */
+    icon: any;
+    /**
+     * Tableau d'objets de la forme :{*key*_name:*"Une taxonomie"*} ou *key* correspond à la valeur fournie à la propriété *key*.
+     * Dans ce cas *"une taxonomie"* sera un des termes affiches dans le composant.
+     */
+    taxonomy: never[];
+    /**
+     * Chaque terme sera séparé par la valeur contenue dans cette propriété
+     */
+    separator: string;
+    /**
+     * La clée utilisé pour extraire le terme de la donnée. (voir la propriété *taxonomy*)
+     */
+    key: string;
+    /**
+     * Le type change surtout la couleur composant :  voir *Badge*, *Button*
+     */
+    type: "primary" | "warning" | "danger" | "success" | "info" | "default";
+    /**
+     * Le composant par defaut sans se paramètre à forte afordance
+     * * gost : composant super léger visuellement
+     * * outline : composant légé avec une bordure
+     */
+    variant: "default" | "outline";
+    /**
+     * Taille du composant, implique notamment des modifications de typo et de marge interne
+     */
+    size: "md" | "xs" | "sm" | "lg";
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+}

package/core/components/ui/taxonomy/taxonomy.js

@@ -0,0 +1,113 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+import "../icon/icon";
+import "../badge/badge";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+/**
+ * Le composant taxonomy crée un badge (*sonic-badge*) contenant une liste de termes préfixés par une icone (*sonic-icon*) optionelle séparées par une chaine html séparatrice (*separator*)
+ */
+let Taxonomy = class Taxonomy extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Identifiant d'icone passé en interne au composant *sonic-icon*
+         */
+        this.icon = {};
+        /**
+         * Tableau d'objets de la forme :{*key*_name:*"Une taxonomie"*} ou *key* correspond à la valeur fournie à la propriété *key*.
+         * Dans ce cas *"une taxonomie"* sera un des termes affiches dans le composant.
+         */
+        this.taxonomy = [];
+        /**
+         * Chaque terme sera séparé par la valeur contenue dans cette propriété
+         */
+        this.separator = ",&nbsp;";
+        /**
+         * La clée utilisé pour extraire le terme de la donnée. (voir la propriété *taxonomy*)
+         */
+        this.key = "";
+        /**
+         * Le type change surtout la couleur composant :  voir *Badge*, *Button*
+         */
+        this.type = "default";
+        /**
+         * Le composant par defaut sans se paramètre à forte afordance
+         * * gost : composant super léger visuellement
+         * * outline : composant légé avec une bordure
+         */
+        this.variant = "default";
+        /**
+         * Taille du composant, implique notamment des modifications de typo et de marge interne
+         */
+        this.size = "md";
+    }
+    render() {
+        if (!this.taxonomy)
+            return nothing;
+        let key = this.key + "_display";
+        let taxo = this.taxonomy.filter((elt) => elt != null && (elt[key] === true || elt[key] == "1" || !elt.hasOwnProperty(key)));
+        if (taxo.length === 0) {
+            this.style.display = "none";
+            return nothing;
+        }
+        this.style.removeProperty("display");
+        return html `
+      <sonic-badge type=${this.type} variant=${this.variant} size=${this.size}>
+        <sonic-icon slot="prefix" name=${this.icon.name} prefix=${this.icon.prefix}></sonic-icon>
+        <span class="taxonomy-list">
+          ${repeat(taxo, (item) => item[this.key + "_id"], (item) => {
+            return html `<span> ${item[this.key + "_name"]}</span
+                ><span class="sonic-taxonomy-separator">${unsafeHTML(this.separator)}</span>`;
+        })}
+        </span>
+      </sonic-badge>
+    `;
+    }
+};
+Taxonomy.styles = css `
+    :host .sonic-taxonomy-separator:last-child {
+      display: none;
+    }
+
+    .taxonomy-list {
+      display: flex;
+      flex-wrap: wrap;
+    }
+  `;
+__decorate([
+    property({ type: Object })
+], Taxonomy.prototype, "icon", void 0);
+__decorate([
+    property({ type: Array })
+], Taxonomy.prototype, "taxonomy", void 0);
+__decorate([
+    property({ type: String })
+], Taxonomy.prototype, "separator", void 0);
+__decorate([
+    property({ type: String })
+], Taxonomy.prototype, "key", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Taxonomy.prototype, "type", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Taxonomy.prototype, "variant", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Taxonomy.prototype, "size", void 0);
+Taxonomy = __decorate([
+    customElement("sonic-taxonomy")
+], Taxonomy);
+export { Taxonomy };
+//Ajout pour la creation du cem notamment pour Storybook
+try {
+    customElements.define("sonic-taxonomy", Taxonomy);
+}
+catch (e) { }

package/core/components/ui/theme/css/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/core/components/ui/theme/css/tailwind.d.ts

@@ -0,0 +1,2 @@
+declare module "*.css";
+declare module "*.css?inline";

package/core/components/ui/theme/theme-collection/core-variables.d.ts

@@ -0,0 +1 @@
+export declare const coreVariables: import("lit").CSSResult;

package/core/components/ui/theme/theme-collection/core-variables.js

@@ -0,0 +1,50 @@
+import { css } from "lit";
+export const coreVariables = css `
+  :host {
+    /* --sc-rfs: 16px; */
+
+    /* polices*/
+    --sc-font-family-base: "neue-haas-unica", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto,
+      "Helvetica Neue", Arial, sans-serif;
+    --sc-font-weight-base: 400;
+    --sc-font-style-base: inherit;
+
+    --sc-headings-font-family: var(--sc-font-family-base);
+    --sc-headings-font-style: var(--sc-font-family-base);
+    --sc-headings-line-height: 1.1;
+    --sc-headings-font-weight: 700;
+    --sc-headings-text-transform: none;
+
+    /* Button*/
+    --sc-btn-font-weight: var(--sc-font-weight-base);
+    --sc-btn-font-family: var(--sc-font-family-base);
+    --sc-btn-font-style: var(--sc-font-weight-base);
+
+    /* ROUNDED*/
+    --sc-btn-rounded: 0.38em;
+    --sc-input-rounded: 0.38em;
+
+    --sc-rounded-sm: calc(var(--sc-rounded) * 0.5);
+    --sc-rounded: 0.35rem;
+    --sc-rounded-md: calc(var(--sc-rounded) * 1.8);
+    --sc-rounded-lg: calc(var(--sc-rounded) * 3.5);
+    --sc-rounded-xl: calc(var(--sc-rounded) * 7);
+
+    /* Placeholder */
+    --sc-placeholder-bg: rgba(17, 24, 39, 0.05);
+
+    /* Images*/
+    --sc-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --sc-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --sc-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --sc-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    --sc-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+
+    /* formulaires*/
+    --sc-form-border-width: 0.1rem;
+
+    /*Couleurs -- textes sur images*/
+    --sc-contrast-content: #fff;
+    --sc-contrast: #0f172a;
+  }
+`;

package/core/components/ui/theme/theme-collection/dark.js

@@ -0,0 +1,41 @@
+import { css } from "lit";
+const darkCss = css `
+  --sc-primary: var(--sc-dark-primary, var(--sc-base-700));
+  --sc-info: var(--sc-dark-info, #3abff8);
+  --sc-danger: var(--sc-dark-danger, #f87272);
+  --sc-warning: var(--sc-dark-warning, #fbbd23);
+  --sc-success: var(--sc-dark-success, #36d399);
+
+  --sc-primary-content: var(--sc-dark-primary-content, #002b3d);
+  --sc-info-content: var(--sc-dark-info-content, #002b3d);
+  --sc-danger-content: var(--sc-dark-danger-content, #382800);
+  --sc-warning-content: var(--sc-dark-warning-content, #382800);
+  --sc-success-content: var(--sc-dark-success-content, #003320);
+
+  --sc-base: var(--sc-dark-base, #1f2937);
+  --sc-base-100: var(--sc-dark-base-100, #262f3d);
+  --sc-base-200: var(--sc-dark-base-200, #2c3543);
+  --sc-base-300: var(--sc-dark-base-300, #38414e);
+  --sc-base-400: var(--sc-dark-base-400, #515964);
+  --sc-base-500: var(--sc-dark-base-500, #828891);
+  --sc-base-600: var(--sc-dark-base-600, #b4b8be);
+  --sc-base-700: var(--sc-dark-base-700, #cdd0d5);
+  --sc-base-800: var(--sc-dark-base-800, #d9dce0);
+  --sc-base-900: var(--sc-dark-base-900, #e5e7eb);
+  --sc-base-content: var(--sc-dark-base-content, #e5e7eb);
+
+  --sc-input-border-color: var(--sc-dark-input-border-color, var(--sc-base-100));
+  --sc-input-bg: var(--sc-dark-input-bg, var(--sc-base-100));
+  --sc-input-color: var(--sc-dark-input-color, var(--sc-base-content));
+`;
+export const dark = css `
+  :host([theme="dark"]) {
+    ${darkCss}
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :host([theme="auto"]) {
+      ${darkCss}
+    }
+  }
+`;

package/core/components/ui/theme/theme-collection/light.js

@@ -0,0 +1,35 @@
+import { css } from "lit";
+export const light = css `
+  :host {
+    /*Boutons*/
+    --sc-primary: var(--sc-base-800);
+    --sc-info: #2563eb;
+    --sc-danger: #f43f5e;
+    --sc-warning: #f97316;
+    --sc-success: #14b8a6;
+
+    --sc-primary-content: var(--sc-base);
+    --sc-info-content: var(--sc-base);
+    --sc-danger-content: var(--sc-base);
+    --sc-warning-content: var(--sc-base);
+    --sc-success-content: var(--sc-base);
+
+    /*Bases*/
+    --sc-base: #fff;
+    --sc-base-100: #f1f5f9;
+    --sc-base-200: #e2e8f0;
+    --sc-base-300: #cbd5e1;
+    --sc-base-400: #94a3b8;
+    --sc-base-500: #64748b;
+    --sc-base-600: #475569;
+    --sc-base-700: #334155;
+    --sc-base-800: #1e293b;
+    --sc-base-900: #0f172a;
+    --sc-base-content: var(--sc-base-700);
+
+    /*formulaires*/
+    --sc-input-border-color: var(--sc-base-100);
+    --sc-input-bg: var(--sc-base-100);
+    --sc-input-color: var(--sc-base-content);
+  }
+`;

package/core/components/ui/theme/theme.d.ts

@@ -0,0 +1,11 @@
+import { LitElement } from "lit";
+export declare const tailwind: import("lit").CSSResult;
+export declare class Theme extends LitElement {
+    static styles: import("lit").CSSResult[];
+    connectedCallback(): void;
+    postCSSVars(): void;
+    receiveMessage(event: any): void;
+    theme: string;
+    getCssVariables(): Record<string, string>;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/core/components/ui/theme/theme.js

@@ -0,0 +1,105 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var Theme_1;
+import { html, LitElement, css, unsafeCSS } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { coreVariables } from "./theme-collection/core-variables";
+import { light } from "./theme-collection/light";
+import { dark } from "./theme-collection/dark";
+import tailwindImport from "./css/tailwind.css?inline";
+export const tailwind = css `
+  ${unsafeCSS(tailwindImport)}
+`;
+let Theme = Theme_1 = class Theme extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.theme = "light";
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener("message", (e) => this.receiveMessage(e), false);
+        this.postCSSVars();
+    }
+    postCSSVars() {
+        const stylesheets = document.styleSheets;
+        const ssLength = stylesheets.length;
+        let fontUrls = [];
+        for (let i = 0; i < ssLength; i++) {
+            let ss = stylesheets[i];
+            if (ss.href && (ss.href.includes("googleapis") || ss.href.includes("typekit.net")))
+                fontUrls.push(ss.href);
+        }
+        document.querySelectorAll("iframe").forEach((elt) => {
+            var _a;
+            return (_a = elt.contentWindow) === null || _a === void 0 ? void 0 : _a.postMessage({
+                type: "SonicTheme",
+                variables: this.getCssVariables(),
+                fonts: fontUrls,
+            }, "*");
+        });
+    }
+    receiveMessage(event) {
+        let data = event.data;
+        if (!data.type || data.type != "GetSonicTheme")
+            return;
+        this.postCSSVars();
+    }
+    getCssVariables() {
+        let names = [];
+        let stylesheets = [...Theme_1.styles.map((s) => s.styleSheet), ...Array.from(document.styleSheets)];
+        for (let stylesheet of stylesheets) {
+            try {
+                let rules = stylesheet === null || stylesheet === void 0 ? void 0 : stylesheet.cssRules;
+                for (let rule of rules) {
+                    if (!rule.style)
+                        continue;
+                    for (let name of rule.style) {
+                        if (names.includes(name) || name.indexOf("--sc") !== 0)
+                            continue;
+                        names.push(name);
+                    }
+                }
+            }
+            catch (e) { }
+        }
+        let style = window.getComputedStyle(this);
+        let result = {};
+        names.forEach((name) => (result[name] = style.getPropertyValue(name)));
+        return result;
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+Theme.styles = [
+    light,
+    dark,
+    coreVariables,
+    css `
+      :host([background]) {
+        display: block !important;
+        background: var(--sc-base) !important;
+      }
+
+      :host([color]) {
+        color: var(--sc-base-content);
+      }
+
+      :host([font]) {
+        font-family: var(--sc-font-family-base);
+        font-weight: var(--sc-font-weight-base);
+        font-style: var(--sc-font-style-base);
+      }
+    `,
+];
+__decorate([
+    property({ type: String, reflect: true })
+], Theme.prototype, "theme", void 0);
+Theme = Theme_1 = __decorate([
+    customElement("sonic-theme")
+], Theme);
+export { Theme };

package/core/components/ui/toast/message-subscriber.d.ts

@@ -0,0 +1,17 @@
+import { LitElement } from "lit";
+declare const MessageSubscriber_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface) & typeof LitElement;
+export declare class MessageSubscriber extends MessageSubscriber_base {
+    _messages: Array<any>;
+    success: boolean | null;
+    status: boolean | null;
+    get messages(): Array<any>;
+    set messages(value: Array<any>);
+    _message: string;
+    get message(): string;
+    set message(value: string);
+    _data: Record<string, any>[] | string;
+    get data(): string | Record<string, any>[];
+    set data(value: string | Record<string, any>[]);
+    render(): symbol;
+}
+export {};

package/core/components/ui/toast/message-subscriber.js

@@ -0,0 +1,85 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
+import { SonicToast } from "./toast";
+//Superbe mix de multples versions d'api.
+let MessageSubscriber = class MessageSubscriber extends Subscriber(LitElement) {
+    constructor() {
+        super(...arguments);
+        this._messages = [];
+        this.success = null;
+        this.status = null;
+        this._message = "";
+        this._data = ""; //👍 quel plaisir mmmm.... 😭😭😭
+    }
+    get messages() {
+        return this._messages;
+    }
+    set messages(value) {
+        this._messages = value;
+        if (!this.messages)
+            return;
+        value.forEach((message) => {
+            if (message.type == "public")
+                SonicToast.add({ text: message.content, status: message.status });
+        });
+    }
+    get message() {
+        return this._message;
+    }
+    set message(value) {
+        this._message = value;
+        if (!this.message)
+            return;
+        if (this.props.success !== false)
+            return;
+        if (this.props.public_message)
+            return;
+        //OUi OUi il faut afficher "message" que si success est parfaitement égal à false et qu'il n'y a rien dans public_message.
+        SonicToast.add({ text: this.message, status: "error" });
+    }
+    get data() {
+        return this._data;
+    }
+    set data(value) {
+        this._data = value;
+        const toastOptions = { text: "Votre produit a bien été ajouté", status: "success" };
+        if (Array.isArray(this.data) && this.props.success === true)
+            SonicToast.add(toastOptions);
+        if (this.data == "" && this.props.status === true)
+            SonicToast.add(toastOptions);
+        if (this.props.success !== false)
+            return;
+        if (this.props.public_message)
+            return;
+        SonicToast.add({ text: this.data, status: "error" });
+    }
+    render() {
+        return nothing;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], MessageSubscriber.prototype, "success", void 0);
+__decorate([
+    property({ type: Boolean })
+], MessageSubscriber.prototype, "status", void 0);
+__decorate([
+    property({ type: Array })
+], MessageSubscriber.prototype, "messages", null);
+__decorate([
+    property({ type: String })
+], MessageSubscriber.prototype, "message", null);
+__decorate([
+    property()
+], MessageSubscriber.prototype, "data", null);
+MessageSubscriber = __decorate([
+    customElement("sonic-toast-message-subscriber")
+], MessageSubscriber);
+export { MessageSubscriber };