@nexim/snackbar/dist/main.mjs

Snackbar component with signal capability.

/** 📦 @nexim/snackbar v2.1.2 */
__dev_mode__: console.debug("📦 @nexim/snackbar v2.1.2");
var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __decorateClass=(decorators,target,key,kind)=>{var result=kind>1?void 0:kind?__getOwnPropDesc(target,key):target;for(var i=decorators.length-1,decorator;i>=0;i--)if(decorator=decorators[i])result=(kind?decorator(target,key,result):decorator(result))||result;if(kind&&result)__defProp(target,key,result);return result};import{packageTracer}from"@alwatr/package-tracer";import{delay}from"@alwatr/delay";import{createLogger}from"@alwatr/logger";import debounce from"debounce";import{AlwatrSignal,AlwatrTrigger}from"@alwatr/flux";var snackbarActionButtonClickedSignal=new AlwatrTrigger({name:"snackbar-action-button-click"});var snackbarCloseButtonClickedSignal=new AlwatrTrigger({name:"snackbar-close-button-click"});var snackbarSignal=new AlwatrSignal({name:"snackbar"});var logger=createLogger("@nexim/snackbar");var closeLastSnackbar=null;var unsubscribeActionButtonHandler=null;var unsubscribeCloseButtonHandler=null;function createSnackbarElement(options){const element=document.createElement("snack-bar");element.setAttribute("content",options.content);if(options.addCloseButton===true){element.setAttribute("add-close-button","")}if(options.action!=null){element.setAttribute("action-button-label",options.action.label)}return element}function handleActionButtonClick(closeSnackbar,handler){logger.logMethod?.("handleActionButtonClick");(async()=>{try{await handler()}catch(error){logger.error("handleActionButtonClick","call_handler_failed",error)}})();return closeSnackbar()}async function showSnackbar(options){logger.logMethodArgs?.("showSnackbar",{options});options.duration??="5s";const element=createSnackbarElement(options);let closed=false;const closeSnackbar=async()=>{if(closed)return;logger.logMethodArgs?.("closeSnackbar",{options});await element.close();unsubscribeActionButtonHandler?.();unsubscribeCloseButtonHandler?.();closed=true};await closeLastSnackbar?.();closeLastSnackbar=closeSnackbar;if(options.action!=null){unsubscribeActionButtonHandler=snackbarActionButtonClickedSignal.subscribe(handleActionButtonClick.bind(null,closeSnackbar,options.action.handler)).unsubscribe}if(options.addCloseButton===true){unsubscribeCloseButtonHandler=snackbarCloseButtonClickedSignal.subscribe(closeSnackbar.bind(null)).unsubscribe}document.body.appendChild(element);if(options.duration!=="infinite"){delay.by(options.duration).then(closeSnackbar)}}var debouncedShowSnackbar=debounce(options=>{showSnackbar(options)},50);snackbarSignal.subscribe(options=>{debouncedShowSnackbar(options)});import{delay as delay3}from"@alwatr/delay";import{lightDomMixin,loggerMixin}from"@nexim/element";import{html,LitElement,nothing}from"lit";import{customElement,property}from"lit/decorators.js";import{delay as delay2}from"@alwatr/delay";function waitForNextFrame(){return new Promise(resolve=>{delay2.untilNextAnimationFrame().then(()=>{delay2.immediate().then(resolve)})})}var SnackbarElement=class extends lightDomMixin(loggerMixin(LitElement)){constructor(){super(...arguments);this.content="";this.actionButtonLabel=null;this.addCloseButton=false}firstUpdated(changedProperties){super.firstUpdated(changedProperties);waitForNextFrame().then(()=>{this.setAttribute("open","")})}async close(){this.logger_.logMethod?.("close");this.removeAttribute("open");await delay3.by(SnackbarElement.openAndCloseAnimationDuration__);this.remove()}closeButtonClickHandler__(){this.logger_.logMethod?.("closeButtonClickHandler__");snackbarCloseButtonClickedSignal.notify()}actionButtonClickHandler__(){this.logger_.logMethod?.("actionButtonClickHandler__");snackbarActionButtonClickedSignal.notify()}render(){super.render();const actionButtonHtml=this.renderActionButton__();const closeButtonHtml=this.renderCloseButton__();let actionButtonHandler=nothing;if(actionButtonHtml!=nothing||closeButtonHtml!=nothing){actionButtonHandler=html`<div>${actionButtonHtml} ${closeButtonHtml}</div>`}return[html`<span>${this.content}</span>`,actionButtonHandler]}renderActionButton__(){if(this.actionButtonLabel==null)return nothing;this.logger_.logMethodArgs?.("renderActionButton__",{actionLabel:this.actionButtonLabel});return html` <button class="action-button" @click=${this.actionButtonClickHandler__.bind(this)}>${this.actionButtonLabel}</button> `}renderCloseButton__(){if(!this.addCloseButton)return nothing;this.logger_.logMethod?.("renderCloseButton__");return html`
      <button class="close-button" @click=${this.closeButtonClickHandler__.bind(this)}>
        <span class="icon">close</span>
      </button>
    `}};SnackbarElement.openAndCloseAnimationDuration__=200;__decorateClass([property({type:String})],SnackbarElement.prototype,"content",2);__decorateClass([property({type:String,attribute:"action-button-label"})],SnackbarElement.prototype,"actionButtonLabel",2);__decorateClass([property({type:Boolean,attribute:"add-close-button"})],SnackbarElement.prototype,"addCloseButton",2);SnackbarElement=__decorateClass([customElement("snack-bar")],SnackbarElement);__dev_mode__:packageTracer.add("@nexim/snackbar","2.1.2");export{SnackbarElement,snackbarSignal};
//# sourceMappingURL=main.mjs.map