@openremote/or-mwc-components 1.8.0-snapshot.20250725074716 → 1.8.0-snapshot.20250725120001

package/lib/or-mwc-menu.js

@@ -1,45 +1,237 @@
-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};
+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

package/lib/or-mwc-snackbar.js

@@ -1,17 +1,141 @@
-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};
+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