@openremote/or-mwc-components 1.8.0-snapshot.20250725120002 → 1.8.0-snapshot.20250728102340

package/lib/or-mwc-menu.js

@@ -1,237 +1,45 @@
-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, unsafeCSS } from "lit";
-import { customElement, property, query } from "lit/decorators.js";
-import { classMap } from 'lit/directives/class-map.js';
-import { MDCMenu } from "@material/menu";
-import { DefaultColor4, DefaultColor8 } from "@openremote/core";
-// @ts-ignore
-import listStyle from "@material/list/dist/mdc.list.css";
-// @ts-ignore
-import menuSurfaceStyle from "@material/menu-surface/dist/mdc.menu-surface.css";
-import { getItemTemplate, getListTemplate, ListType } from "./or-mwc-list";
-import { ref } from 'lit/directives/ref.js';
-// @ts-ignore
-const menuStyle = require("@material/menu/dist/mdc.menu.css");
-export class OrMwcMenuChangedEvent extends CustomEvent {
-    constructor(values) {
-        super(OrMwcMenuChangedEvent.NAME, {
-            detail: values,
-            bubbles: true,
-            composed: true
-        });
-    }
-}
-OrMwcMenuChangedEvent.NAME = "or-mwc-menu-changed";
-export class OrMwcMenuClosedEvent extends CustomEvent {
-    constructor() {
-        super(OrMwcMenuClosedEvent.NAME, {
-            bubbles: true,
-            composed: true
-        });
-    }
-}
-OrMwcMenuClosedEvent.NAME = "or-mwc-menu-closed";
-export function positionMenuAtElement(menu, hostElement) {
-    if (!hostElement) {
-        hostElement = document.body;
-    }
-    const rect = hostElement.getBoundingClientRect();
-    // Applying a style that is calculated from the runtime coordinates of
-    // the host element.
-    Object.assign(menu.style, {
-        position: 'fixed',
-        top: `${rect.bottom}px`,
-        left: `${rect.left}px`,
-        zIndex: '1000',
-        display: 'block'
-    });
-    return menu;
-}
-export function getContentWithMenuTemplate(content, menuItems, selectedValues, valueChangedCallback, closedCallback, multiSelect = false, translateValues = true, midHeight = false, fullWidth = false, menuId = "menu", fixedToHost = false) {
-    let menuRef = null; // Reference to the menu
-    const openMenu = (evt) => {
-        if (!menuItems) {
-            return;
-        }
-        if (fixedToHost && menuRef) {
-            const hostElement = evt.currentTarget;
-            // Using run time coordinates to assign a fixed position to the menu
-            positionMenuAtElement(menuRef, hostElement);
-        }
-        evt.currentTarget.parentElement.lastElementChild.open();
-    };
-    return html `
-        <span>
-            <span @click="${openMenu}">${content}</span>
-            ${menuItems ? html `<or-mwc-menu ?multiselect="${multiSelect}" @or-mwc-menu-closed="${() => { if (closedCallback) {
-        closedCallback();
-    } }}" @or-mwc-menu-changed="${(evt) => { if (valueChangedCallback) {
-        valueChangedCallback(evt.detail);
-    } }}" .translateValues="${translateValues}" .values="${selectedValues}" .menuItems="${menuItems}" .midHeight="${midHeight}" .fullWidth="${fullWidth}" id="${menuId}" ${ref(el => (menuRef = el))}></or-mwc-menu>` : ``}
-        </span>
-    `;
-}
-// language=CSS
-const style = css `
-    :host {
-        white-space: nowrap;
-        --internal-or-mwc-input-color: var(--or-mwc-input-color, var(--or-app-color4, ${unsafeCSS(DefaultColor4)}));    
-        --internal-or-mwc-input-text-color: var(--or-mwc-input-text-color, var(--or-app-color8, ${unsafeCSS(DefaultColor8)}));
-        
-        --mdc-theme-primary: var(--internal-or-mwc-input-color);
-        --mdc-theme-on-primary: var(--internal-or-mwc-input-text-color);
-        --mdc-theme-secondary: var(--internal-or-mwc-input-color);
-    }
-    
-    .mdc-list-item__graphic {
-        margin-right: 16px;
-    }   
-
-    a {
-        text-decoration: none;
-        color: rgba(0, 0, 0, 0.87);
-    }
-     
-    .mdc-menu-surface-mid-height {
-        max-height: calc(45vh - 32px) !important;
-    }
-    .mdc-menu-surface-full-width {
-        width: 100%;
-    }
-`;
-let OrMwcMenu = class OrMwcMenu extends LitElement {
-    static get styles() {
-        return [
-            css `${unsafeCSS(listStyle)}`,
-            css `${unsafeCSS(menuStyle)}`,
-            css `${unsafeCSS(menuSurfaceStyle)}`,
-            style
-        ];
-    }
-    open() {
-        this._mdcComponent.open = true;
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        if (this._mdcComponent) {
-            this._mdcComponent.destroy();
-            this._mdcComponent = undefined;
-        }
-    }
-    render() {
-        if (!this.menuItems || this.menuItems.length === 0) {
-            return html ``;
-        }
-        const content = this.getItemsTemplate(this.menuItems, this.translateValues);
-        const isTwoLine = this.menuItems && this.menuItems.some((item) => item && !Array.isArray(item) && !!item.secondaryText);
-        const classes = {
-            'mdc-menu-surface-mid-height': (this.midHeight ? 1 : 0),
-            'mdc-menu-surface-full-width': (this.fullWidth ? 1 : 0)
-        };
-        return html `
-            <div id="wrapper" class="mdc-menu-surface--anchor">
-                <div class="mdc-menu mdc-menu-surface ${classMap(classes)}" id="menu" @MDCMenuSurface:closed="${this._onMenuClosed}">
-                    ${getListTemplate(ListType.MULTI_TICK, content, isTwoLine, "menu")}
-                </div>
-            </div>
-        `;
-    }
-    getItemsTemplate(items, translate) {
-        const type = this.multiSelect ? ListType.MULTI_TICK : ListType.PLAIN;
-        return html `
-            ${items.map((item, index) => {
-            if (Array.isArray(item)) {
-                return html `
-                    <li>
-                        <ul class="mdc-menu__selection-group">
-                            ${this.getItemsTemplate(item, translate)}
-                        </ul>
-                    </li>
-                `;
-            }
-            return getItemTemplate(item, index, (Array.isArray(this.values) ? this.values : this.values ? [this.values] : []), type, translate, (e, item) => this._itemClicked(e, item));
-        })}`;
-    }
-    firstUpdated(_changedProperties) {
-        super.firstUpdated(_changedProperties);
-        if (this._mdcElem) {
-            this._mdcComponent = new MDCMenu(this._mdcElem);
-            // This overrides the standard mdc menu body click capture handler as it doesn't work with webcomponents
-            this._mdcComponent.menuSurface_.foundation.handleBodyClick = function (evt) {
-                const el = evt.composedPath()[0]; // Use composed path not evt target to work with webcomponents
-                if (this.adapter.isElementInContainer(el)) {
-                    return;
-                }
-                this.close();
-            };
-            this._mdcComponent.quickOpen = true;
-        }
-    }
-    updated(_changedProperties) {
-        if (_changedProperties.has("visible")) {
-            this._mdcComponent.open = this.visible || false;
-        }
-    }
-    _onMenuClosed() {
-        this.dispatchEvent(new OrMwcMenuClosedEvent());
-    }
-    _itemClicked(e, item) {
-        e.stopPropagation();
-        const value = item.value;
-        if (!this.multiSelect) {
-            this.values = value;
-            this._mdcComponent.open = false;
-        }
-        else {
-            if (!Array.isArray(this.values)) {
-                this.values = this.values ? [this.values] : [];
-            }
-            const index = this.values.findIndex((v) => v === value);
-            if (index >= 0) {
-                this.values.splice(index, 1);
-            }
-            else {
-                this.values.push(value);
-            }
-            this.requestUpdate();
-        }
-        this.dispatchEvent(new OrMwcMenuChangedEvent(this.values));
-    }
-};
-__decorate([
-    property({ type: Array })
-], OrMwcMenu.prototype, "menuItems", void 0);
-__decorate([
-    property({ type: Array })
-], OrMwcMenu.prototype, "values", void 0);
-__decorate([
-    property({ type: Boolean, attribute: true })
-], OrMwcMenu.prototype, "multiSelect", void 0);
-__decorate([
-    property({ type: Boolean, attribute: true })
-], OrMwcMenu.prototype, "visible", void 0);
-__decorate([
-    property({ type: Boolean, attribute: true })
-], OrMwcMenu.prototype, "translateValues", void 0);
-__decorate([
-    property({ type: Boolean, attribute: false })
-], OrMwcMenu.prototype, "midHeight", void 0);
-__decorate([
-    property({ type: Boolean, attribute: false })
-], OrMwcMenu.prototype, "fullWidth", void 0);
-__decorate([
-    query("#wrapper")
-], OrMwcMenu.prototype, "_wrapperElem", void 0);
-__decorate([
-    query("#menu")
-], OrMwcMenu.prototype, "_mdcElem", void 0);
-OrMwcMenu = __decorate([
-    customElement("or-mwc-menu")
-], OrMwcMenu);
-export { OrMwcMenu };
-//# sourceMappingURL=or-mwc-menu.js.map
+var __decorate=this&&this.__decorate||function(e,t,r,o){var n,i=arguments.length,s=i<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,r):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,r,o);else for(var c=e.length-1;c>=0;c--)(n=e[c])&&(s=(i<3?n(s):i>3?n(t,r,s):n(t,r))||s);return i>3&&s&&Object.defineProperty(t,r,s),s};import{css as e,html as t,LitElement as r,unsafeCSS as o}from"lit";import{customElement as n,property as i,query as s}from"lit/decorators.js";import{classMap as c}from"lit/directives/class-map.js";import{MDCMenu as a}from"@material/menu";import{DefaultColor4 as m,DefaultColor8 as l}from"@openremote/core";import u from"@material/list/dist/mdc.list.css";import d from"@material/menu-surface/dist/mdc.menu-surface.css";import{getItemTemplate as p,getListTemplate as h,ListType as v}from"./or-mwc-list";import{ref as M}from"lit/directives/ref.js";let menuStyle=require("@material/menu/dist/mdc.menu.css");export class OrMwcMenuChangedEvent extends CustomEvent{constructor(e){super(OrMwcMenuChangedEvent.NAME,{detail:e,bubbles:!0,composed:!0})}}OrMwcMenuChangedEvent.NAME="or-mwc-menu-changed";export class OrMwcMenuClosedEvent extends CustomEvent{constructor(){super(OrMwcMenuClosedEvent.NAME,{bubbles:!0,composed:!0})}}OrMwcMenuClosedEvent.NAME="or-mwc-menu-closed";export function positionMenuAtElement(e,t){t||(t=document.body);let r=t.getBoundingClientRect();return Object.assign(e.style,{position:"fixed",top:`${r.bottom}px`,left:`${r.left}px`,zIndex:"1000",display:"block"}),e}export function getContentWithMenuTemplate(e,r,o,n,i,s=!1,c=!0,a=!1,m=!1,l="menu",u=!1){let d=null;return t`
+        <span>
+            <span @click="${e=>{if(r){if(u&&d){let t=e.currentTarget;positionMenuAtElement(d,t)}e.currentTarget.parentElement.lastElementChild.open()}}}">${e}</span>
+            ${r?t`<or-mwc-menu ?multiselect="${s}" @or-mwc-menu-closed="${()=>{i&&i()}}" @or-mwc-menu-changed="${e=>{n&&n(e.detail)}}" .translateValues="${c}" .values="${o}" .menuItems="${r}" .midHeight="${a}" .fullWidth="${m}" id="${l}" ${M(e=>d=e)}></or-mwc-menu>`:""}
+        </span>
+    `}let style=e`
+    :host {
+        white-space: nowrap;
+        --internal-or-mwc-input-color: var(--or-mwc-input-color, var(--or-app-color4, ${o(m)}));    
+        --internal-or-mwc-input-text-color: var(--or-mwc-input-text-color, var(--or-app-color8, ${o(l)}));
+        
+        --mdc-theme-primary: var(--internal-or-mwc-input-color);
+        --mdc-theme-on-primary: var(--internal-or-mwc-input-text-color);
+        --mdc-theme-secondary: var(--internal-or-mwc-input-color);
+    }
+    
+    .mdc-list-item__graphic {
+        margin-right: 16px;
+    }   
+
+    a {
+        text-decoration: none;
+        color: rgba(0, 0, 0, 0.87);
+    }
+     
+    .mdc-menu-surface-mid-height {
+        max-height: calc(45vh - 32px) !important;
+    }
+    .mdc-menu-surface-full-width {
+        width: 100%;
+    }
+`,OrMwcMenu=class extends r{static get styles(){return[e`${o(u)}`,e`${o(menuStyle)}`,e`${o(d)}`,style]}open(){this._mdcComponent.open=!0}disconnectedCallback(){super.disconnectedCallback(),this._mdcComponent&&(this._mdcComponent.destroy(),this._mdcComponent=void 0)}render(){if(!this.menuItems||0===this.menuItems.length)return t``;let e=this.getItemsTemplate(this.menuItems,this.translateValues),r=this.menuItems&&this.menuItems.some(e=>e&&!Array.isArray(e)&&!!e.secondaryText),o={"mdc-menu-surface-mid-height":+!!this.midHeight,"mdc-menu-surface-full-width":+!!this.fullWidth};return t`
+            <div id="wrapper" class="mdc-menu-surface--anchor">
+                <div class="mdc-menu mdc-menu-surface ${c(o)}" id="menu" @MDCMenuSurface:closed="${this._onMenuClosed}">
+                    ${h(v.MULTI_TICK,e,r,"menu")}
+                </div>
+            </div>
+        `}getItemsTemplate(e,r){let o=this.multiSelect?v.MULTI_TICK:v.PLAIN;return t`
+            ${e.map((e,n)=>Array.isArray(e)?t`
+                    <li>
+                        <ul class="mdc-menu__selection-group">
+                            ${this.getItemsTemplate(e,r)}
+                        </ul>
+                    </li>
+                `:p(e,n,Array.isArray(this.values)?this.values:this.values?[this.values]:[],o,r,(e,t)=>this._itemClicked(e,t)))}`}firstUpdated(e){super.firstUpdated(e),this._mdcElem&&(this._mdcComponent=new a(this._mdcElem),this._mdcComponent.menuSurface_.foundation.handleBodyClick=function(e){let t=e.composedPath()[0];this.adapter.isElementInContainer(t)||this.close()},this._mdcComponent.quickOpen=!0)}updated(e){e.has("visible")&&(this._mdcComponent.open=this.visible||!1)}_onMenuClosed(){this.dispatchEvent(new OrMwcMenuClosedEvent)}_itemClicked(e,t){e.stopPropagation();let r=t.value;if(this.multiSelect){Array.isArray(this.values)||(this.values=this.values?[this.values]:[]);let e=this.values.findIndex(e=>e===r);e>=0?this.values.splice(e,1):this.values.push(r),this.requestUpdate()}else this.values=r,this._mdcComponent.open=!1;this.dispatchEvent(new OrMwcMenuChangedEvent(this.values))}};__decorate([i({type:Array})],OrMwcMenu.prototype,"menuItems",void 0),__decorate([i({type:Array})],OrMwcMenu.prototype,"values",void 0),__decorate([i({type:Boolean,attribute:!0})],OrMwcMenu.prototype,"multiSelect",void 0),__decorate([i({type:Boolean,attribute:!0})],OrMwcMenu.prototype,"visible",void 0),__decorate([i({type:Boolean,attribute:!0})],OrMwcMenu.prototype,"translateValues",void 0),__decorate([i({type:Boolean,attribute:!1})],OrMwcMenu.prototype,"midHeight",void 0),__decorate([i({type:Boolean,attribute:!1})],OrMwcMenu.prototype,"fullWidth",void 0),__decorate([s("#wrapper")],OrMwcMenu.prototype,"_wrapperElem",void 0),__decorate([s("#menu")],OrMwcMenu.prototype,"_mdcElem",void 0),OrMwcMenu=__decorate([n("or-mwc-menu")],OrMwcMenu);export{OrMwcMenu};

package/lib/or-mwc-snackbar.js

@@ -1,141 +1,17 @@
-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, unsafeCSS } from "lit";
-import { customElement, property, query } from "lit/decorators.js";
-import { MDCSnackbar } from "@material/snackbar";
-const drawerStyle = require("@material/snackbar/dist/mdc.snackbar.css");
-export class OrMwcSnackbarChangedEvent extends CustomEvent {
-    constructor(value) {
-        super(OrMwcSnackbarChangedEvent.NAME, {
-            detail: value,
-            bubbles: true,
-            composed: true
-        });
-    }
-}
-OrMwcSnackbarChangedEvent.NAME = "or-mwc-snackbar-changed";
-export function showSnackbar(hostElement, text, buttonText, buttonAction) {
-    if (!hostElement) {
-        hostElement = OrMwcSnackbar.DialogHostElement || document.body;
-    }
-    const snackbar = new OrMwcSnackbar();
-    snackbar.text = text;
-    snackbar.buttonText = buttonText;
-    snackbar.buttonAction = buttonAction;
-    snackbar.isOpen = true;
-    snackbar.addEventListener(OrMwcSnackbarChangedEvent.NAME, (ev) => {
-        ev.stopPropagation();
-        if (!ev.detail.opened) {
-            window.setTimeout(() => {
-                if (snackbar.parentElement) {
-                    snackbar.parentElement.removeChild(snackbar);
-                }
-            }, 0);
-        }
-    });
-    hostElement.append(snackbar);
-    return snackbar;
-}
-let OrMwcSnackbar = class OrMwcSnackbar extends LitElement {
-    constructor() {
-        super(...arguments);
-        this._open = false;
-    }
-    static get styles() {
-        return [
-            css `${unsafeCSS(drawerStyle)}`,
-            css `
-      `
-        ];
-    }
-    get isOpen() {
-        return this._mdcComponent ? this._mdcComponent.isOpen : false;
-    }
-    set isOpen(isOpen) {
-        this._open = true;
-    }
-    open() {
-        if (this._mdcElem && !this._mdcComponent) {
-            this._mdcComponent = new MDCSnackbar(this._mdcElem);
-            this._mdcComponent.timeoutMs = this.timeout || 4000;
-        }
-        if (this._mdcComponent) {
-            this._mdcComponent.open();
-        }
-    }
-    close(action) {
-        if (this._mdcComponent) {
-            this._mdcComponent.close(action);
-        }
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        if (this._mdcComponent) {
-            this._mdcComponent.destroy();
-            this._mdcComponent = undefined;
-        }
-    }
-    render() {
-        return html `
-            <div id="mdc-snackbar" class="mdc-snackbar" @MDCSnackbar:opened="${() => this.onOpen()}"
-                 @MDCSnackbar:closed="${(ev) => this.onClose(ev.detail.reason)}">
-                <div class="mdc-snackbar__surface" role="status" aria-relevant="additions">
-                    <div class="mdc-snackbar__label" aria-atomic="false">
-                        <or-translate value="${this.text}"></or-translate>
-                    </div>
-                    ${!this.buttonText ? html `` : html `
-                        <div class="mdc-snackbar__actions" aria-atomic="true">
-                            <or-mwc-input type="button" class="mdc-button mdc-snackbar__action" label="${this.buttonText}">                                
-                            </or-mwc-input>
-                        </div>
-                    `}
-                </div>
-            </div>
-        `;
-    }
-    updated(_changedProperties) {
-        super.updated(_changedProperties);
-        if (_changedProperties.has("_open") && this._open) {
-            this.open();
-        }
-    }
-    onClose(reason) {
-        if (this.buttonAction) {
-            this.buttonAction();
-        }
-        this.dispatchChangedEvent({ opened: false, closeReason: reason });
-    }
-    onOpen() {
-        this.dispatchChangedEvent({ opened: true });
-    }
-    dispatchChangedEvent(detail) {
-        this.dispatchEvent(new OrMwcSnackbarChangedEvent(detail));
-    }
-};
-__decorate([
-    property({ type: String, attribute: false })
-], OrMwcSnackbar.prototype, "text", void 0);
-__decorate([
-    property({ type: String })
-], OrMwcSnackbar.prototype, "buttonText", void 0);
-__decorate([
-    property({ type: Object, attribute: false })
-], OrMwcSnackbar.prototype, "buttonAction", void 0);
-__decorate([
-    property({ type: Number })
-], OrMwcSnackbar.prototype, "timeout", void 0);
-__decorate([
-    property({ type: Boolean })
-], OrMwcSnackbar.prototype, "_open", void 0);
-__decorate([
-    query("#mdc-snackbar")
-], OrMwcSnackbar.prototype, "_mdcElem", void 0);
-OrMwcSnackbar = __decorate([
-    customElement("or-mwc-snackbar")
-], OrMwcSnackbar);
-export { OrMwcSnackbar };
-//# sourceMappingURL=or-mwc-snackbar.js.map
+var __decorate=this&&this.__decorate||function(t,e,n,o){var a,r=arguments.length,c=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,n):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)c=Reflect.decorate(t,e,n,o);else for(var s=t.length-1;s>=0;s--)(a=t[s])&&(c=(r<3?a(c):r>3?a(e,n,c):a(e,n))||c);return r>3&&c&&Object.defineProperty(e,n,c),c};import{css as t,html as e,LitElement as n,unsafeCSS as o}from"lit";import{customElement as a,property as r,query as c}from"lit/decorators.js";import{MDCSnackbar as s}from"@material/snackbar";let drawerStyle=require("@material/snackbar/dist/mdc.snackbar.css");export class OrMwcSnackbarChangedEvent extends CustomEvent{constructor(t){super(OrMwcSnackbarChangedEvent.NAME,{detail:t,bubbles:!0,composed:!0})}}OrMwcSnackbarChangedEvent.NAME="or-mwc-snackbar-changed";export function showSnackbar(t,e,n,o){t||(t=OrMwcSnackbar.DialogHostElement||document.body);let a=new OrMwcSnackbar;return a.text=e,a.buttonText=n,a.buttonAction=o,a.isOpen=!0,a.addEventListener(OrMwcSnackbarChangedEvent.NAME,t=>{t.stopPropagation(),t.detail.opened||window.setTimeout(()=>{a.parentElement&&a.parentElement.removeChild(a)},0)}),t.append(a),a}let OrMwcSnackbar=class extends n{constructor(){super(...arguments),this._open=!1}static get styles(){return[t`${o(drawerStyle)}`,t`
+      `]}get isOpen(){return!!this._mdcComponent&&this._mdcComponent.isOpen}set isOpen(t){this._open=!0}open(){this._mdcElem&&!this._mdcComponent&&(this._mdcComponent=new s(this._mdcElem),this._mdcComponent.timeoutMs=this.timeout||4e3),this._mdcComponent&&this._mdcComponent.open()}close(t){this._mdcComponent&&this._mdcComponent.close(t)}disconnectedCallback(){super.disconnectedCallback(),this._mdcComponent&&(this._mdcComponent.destroy(),this._mdcComponent=void 0)}render(){return e`
+            <div id="mdc-snackbar" class="mdc-snackbar" @MDCSnackbar:opened="${()=>this.onOpen()}"
+                 @MDCSnackbar:closed="${t=>this.onClose(t.detail.reason)}">
+                <div class="mdc-snackbar__surface" role="status" aria-relevant="additions">
+                    <div class="mdc-snackbar__label" aria-atomic="false">
+                        <or-translate value="${this.text}"></or-translate>
+                    </div>
+                    ${!this.buttonText?e``:e`
+                        <div class="mdc-snackbar__actions" aria-atomic="true">
+                            <or-mwc-input type="button" class="mdc-button mdc-snackbar__action" label="${this.buttonText}">                                
+                            </or-mwc-input>
+                        </div>
+                    `}
+                </div>
+            </div>
+        `}updated(t){super.updated(t),t.has("_open")&&this._open&&this.open()}onClose(t){this.buttonAction&&this.buttonAction(),this.dispatchChangedEvent({opened:!1,closeReason:t})}onOpen(){this.dispatchChangedEvent({opened:!0})}dispatchChangedEvent(t){this.dispatchEvent(new OrMwcSnackbarChangedEvent(t))}};__decorate([r({type:String,attribute:!1})],OrMwcSnackbar.prototype,"text",void 0),__decorate([r({type:String})],OrMwcSnackbar.prototype,"buttonText",void 0),__decorate([r({type:Object,attribute:!1})],OrMwcSnackbar.prototype,"buttonAction",void 0),__decorate([r({type:Number})],OrMwcSnackbar.prototype,"timeout",void 0),__decorate([r({type:Boolean})],OrMwcSnackbar.prototype,"_open",void 0),__decorate([c("#mdc-snackbar")],OrMwcSnackbar.prototype,"_mdcElem",void 0),OrMwcSnackbar=__decorate([a("or-mwc-snackbar")],OrMwcSnackbar);export{OrMwcSnackbar};