@sandlada/mdc/build/components/snackbar/snackbar.js

@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.

import{customElement as e}from"../../node_modules/@lit/reactive-element/decorators/custom-element.js";import{property as t}from"../../node_modules/@lit/reactive-element/decorators/property.js";import{state as n}from"../../node_modules/@lit/reactive-element/decorators/state.js";import{query as r}from"../../node_modules/@lit/reactive-element/decorators/query.js";import"../../node_modules/lit/decorators.js";import{html as i}from"../../node_modules/lit-html/lit-html.js";import{LitElement as a}from"../../node_modules/lit-element/lit-element.js";import"../../node_modules/lit/index.js";import{classMap as o}from"../../node_modules/lit-html/directives/class-map.js";import"../../node_modules/lit/directives/class-map.js";import{composeMixin as s}from"../../utils/compose-mixin/compose-mixin.js";import c from"../../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";import{mixinDelegatesAria as l}from"../../utils/aria/delegate.js";import{SNACKBAR_ACTION_EVENT as u,SNACKBAR_CLOSED_EVENT as d,SNACKBAR_CLOSING_EVENT as f,SNACKBAR_OPENED_EVENT as p,SNACKBAR_OPENING_EVENT as m}from"./snackbar.interface.js";import{SnackbarStyles as h}from"./snackbar.style.js";
/**
* @license
* Copyright 2026 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*/
let g=class extends s(l)(a){static{this.styles=h}constructor(){super(),this.open=!1,this.duration=`short`,this.animationMode=`slide`,this.multiline=!1,this.variant=`inverse-surface`,this.hasAction=!1,this.hasCloseIcon=!1,this.hasIcon=!1,this.autoHideTimer=null,this.animationAbortController=null,this.addEventListener(`click`,this.handleClick)}connectedCallback(){super.connectedCallback(),this.hasAttribute(`open`)&&(this.open=!0)}disconnectedCallback(){super.disconnectedCallback(),this.clearAutoHideTimer(),this.animationAbortController?.abort()}willUpdate(e){e.has(`open`)&&(this.open?this.handleOpen():e.get(`open`)===!0&&this.handleClose())}getRenderClasses(){return{container:!0,[`variant-${this.variant}`]:!0,multiline:this.multiline,"has-action":this.hasAction,"has-close-icon":this.hasCloseIcon,"has-icon":this.hasIcon,closing:!1}}render(){return i`<div class="${o(this.getRenderClasses())}"><span class="background"></span> ${this.renderIcon()} ${this.renderLabel()} ${this.renderAction()} ${this.renderCloseIcon()}</div>`}renderIcon(){return i`<span class="icon" aria-hidden="true"><slot name="icon" @slotchange="${this.handleIconSlotChange}"></slot></span>`}renderLabel(){return i`<span class="label"><slot></slot></span>`}renderAction(){return i`<button class="action" @click="${this.handleActionClick}"><slot name="action" @slotchange="${this.handleActionSlotChange}"></slot></button>`}renderCloseIcon(){return i`<button class="close-icon" aria-label="Close" @click="${this.handleCloseIconClick}"><slot name="close-icon" @slotchange="${this.handleCloseIconSlotChange}"><svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg></slot></button>`}async show(){this.open||=!0}async hide(){this.open&&=!1}handleOpen(){this.dispatchEvent(new Event(m,{bubbles:!0,composed:!0})),this.startAutoHideTimer(),setTimeout(()=>{this.dispatchEvent(new Event(p,{bubbles:!0,composed:!0}))},300)}handleClose(){this.clearAutoHideTimer(),this.containerElement?.classList.add(`closing`),this.dispatchEvent(new Event(f,{bubbles:!0,composed:!0})),setTimeout(()=>{this.containerElement?.classList.remove(`closing`),this.dispatchEvent(new Event(d,{bubbles:!0,composed:!0}))},300)}startAutoHideTimer(){if(this.clearAutoHideTimer(),this.duration===`indefinite`)return;let e=this.duration===`short`?4e3:1e4;this.autoHideTimer=setTimeout(()=>{this.open=!1},e)}clearAutoHideTimer(){this.autoHideTimer!==null&&(clearTimeout(this.autoHideTimer),this.autoHideTimer=null)}handleClick(e){this.open&&this.duration!==`indefinite`&&this.startAutoHideTimer()}handleActionClick(e){let t=this.actionButton?.textContent?.trim()??``;this.dispatchEvent(new CustomEvent(u,{detail:{action:t},bubbles:!0,composed:!0}))}handleCloseIconClick(e){this.open=!1}handleActionSlotChange(e){let t=e.target;this.hasAction=t.assignedElements().length>0}handleCloseIconSlotChange(e){let t=e.target;this.hasCloseIcon=t.assignedElements().length>0}handleIconSlotChange(e){let t=e.target;this.hasIcon=t.assignedElements().length>0}};c([t({type:Boolean,reflect:!0})],g.prototype,`open`,void 0),c([t({type:String,attribute:`duration`,reflect:!0})],g.prototype,`duration`,void 0),c([t({type:String,attribute:`animation-mode`,reflect:!0})],g.prototype,`animationMode`,void 0),c([t({type:Boolean,reflect:!0})],g.prototype,`multiline`,void 0),c([t({type:String,reflect:!0})],g.prototype,`variant`,void 0),c([n()],g.prototype,`hasAction`,void 0),c([n()],g.prototype,`hasCloseIcon`,void 0),c([n()],g.prototype,`hasIcon`,void 0),c([r(`.container`)],g.prototype,`containerElement`,void 0),c([r(`.action`)],g.prototype,`actionButton`,void 0),c([r(`.close-icon`)],g.prototype,`closeButton`,void 0),g=c([e(`mdc-snackbar`)],g);export{g as MDCSnackbar};
//# sourceMappingURL=snackbar.js.map