@limetech/lime-elements
Version:
1 lines • 7.17 kB
JavaScript
import{r as t,c as i,h as e,a}from"./p-DBTJNfo7.js";import{t as r}from"./p-DVRaJQvC.js";import{c as s}from"./p-JbKhhoXs.js";const o=new class{constructor(){this.snackbarElements=[]}add(t){const i=this.getPopover(t);null==i||i.showPopover(),this.snackbarElements=[t,...this.snackbarElements],this.emitOffsets()}remove(t){const i=this.getPopover(t);null==i||i.hidePopover(),this.snackbarElements=this.snackbarElements.filter((i=>i!==t)),this.emitOffsets()}emitOffsets(){let t=0;for(const i of this.snackbarElements)i.dispatchEvent(new CustomEvent("changeOffset",{detail:t})),t+=this.getPopover(i).getBoundingClientRect().height}getPopover(t){return t.shadowRoot.querySelector("[popover]")}},n=class{constructor(e){t(this,e),this.action=i(this,"action"),this.hide=i(this,"hide"),this.open=!1,this.timeout=5e3,this.dismissible=!0,this.language="en",this.offset=0,this.isOpen=!1,this.closing=!0,this.handleOpen=()=>{this.isOpen||(this.isOpen=!0,this.closing=!1,o.add(this.host),this.timeout&&-1!==this.timeout&&(this.timeoutId=window.setTimeout(this.handleClose,Math.max(this.timeout-300,300))))},this.handleClose=()=>{this.isOpen&&(this.closing=!0,this.timeoutId&&(clearTimeout(this.timeoutId),this.timeoutId=void 0),setTimeout((()=>{this.isOpen=!1,o.remove(this.host),this.hide.emit(),this.offset=0}),300))},this.handleClickAction=()=>{this.action.emit()},this.snackbarId=s()}componentDidLoad(){this.open&&requestAnimationFrame(this.handleOpen)}onChangeIndex(t){t.stopPropagation(),this.offset=t.detail}watchOpen(){this.open?this.handleOpen():this.handleClose(),this.isOpen=this.open}async show(){console.warn("The `show` method in `limel-snackbar` is deprecated. Please use the `open` property instead."),this.open||this.handleOpen()}render(){return e("aside",{key:"0c9605ecafcab256f9e1b2ac43b72c70695c1719",popover:"manual",style:{"--snackbar-timeout":`${Math.max(this.timeout||0,0)}ms`,"--snackbar-distance-to-top-edge":`${this.offset}px`},class:{open:this.open,"is-closing":this.closing,"limel-portal--parent":!0},id:this.snackbarId,role:this.setAriaRoles(),"aria-atomic":this.open?"true":void 0,"aria-relevant":this.open?"additions":void 0},e("div",{key:"58b4d6d2f94be604273c46e0babccade357798ab",class:"surface"},e("div",{key:"148001236225eb6980f3894151e04fd43037863e",class:"label"},this.message),this.renderActions(this.actionText),this.renderDismissButton(this.dismissible)))}setAriaRoles(){if(this.open)return this.timeout&&-1!==this.timeout?"status":"alertdialog"}renderActions(t){if(t)return e("div",{class:"actions"},this.renderActionButton(t))}renderActionButton(t){if(t)return e("limel-button",{label:t,onClick:this.handleClickAction})}renderDismissButton(t){if(!t)return;const i=r.get("snackbar.dismiss",this.language);return e("div",{class:"dismiss"},this.renderTimeoutVisualization(),e("limel-icon-button",{class:"dismiss-button",icon:"multiply",label:i,onClick:this.handleClose,"aria-controls":this.snackbarId}))}renderTimeoutVisualization(){if(this.timeout&&-1!==this.timeout)return e("svg",{width:"36",height:"36",viewBox:"0 0 36 36"},e("circle",{r:"18",cx:"18",cy:"18",fill:"var(--track-color)"}),e("path",{class:"track",d:"M 18,18 m -16,0 a 16,16 0 1,0 32,0 a 16,16 0 1,0 -32,0",stroke:"var(--fill-color)"}))}get host(){return a(this)}static get watchers(){return{open:[{watchOpen:0}]}}};n.style=".limel-portal--container{font-family:var(--limel-portal-font-family, inherit);opacity:0;display:none}.limel-portal--container.is-visible{opacity:1;display:inline-block}.limel-portal--container.is-visible>*{will-change:opacity, transform}@keyframes fade-in{from{opacity:0;transform:scale(0.94)}to{opacity:1;transform:scale(1) translate3d(0, 0, 0)}}@keyframes fade-out{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.94) translate3d(0, 0, 0)}}.limel-portal--container>*{animation:fade-in 0.18s cubic-bezier(0.11, 0.59, 0.18, 1.26) forwards}.limel-portal--container.is-hiding>*{animation:fade-out 0.22s ease forwards}.limel-portal--container[data-popper-placement=left-start]>*{transform-origin:right top}.limel-portal--container[data-popper-placement=left]>*{transform-origin:right center}.limel-portal--container[data-popper-placement=left-end]>*{transform-origin:right bottom}.limel-portal--container[data-popper-placement=top-start]>*{transform-origin:left bottom}.limel-portal--container[data-popper-placement=top]>*{transform-origin:center bottom}.limel-portal--container[data-popper-placement=top-end]>*{transform-origin:right bottom}.limel-portal--container[data-popper-placement=right-start]>*{transform-origin:left top}.limel-portal--container[data-popper-placement=right]>*{transform-origin:left center}.limel-portal--container[data-popper-placement=right-end]>*{transform-origin:left bottom}.limel-portal--container[data-popper-placement=bottom-start]>*{transform-origin:left top}.limel-portal--container[data-popper-placement=bottom]>*{transform-origin:center top}.limel-portal--container[data-popper-placement=bottom-end]>*{transform-origin:right top}*{box-sizing:border-box}aside{background:none;border:none;inset:unset;overflow:visible;padding:0.5rem 0.5rem 0 0.5rem;right:0;width:var(--limel-snackbar-width, 21rem);top:calc(var(--snackbar-distance-to-top-edge) + env(safe-area-inset-top, 0));transition:opacity var(--limel-snackbar-opacity-transition-speed, 0.2s) ease, top var(--limel-snackbar-top-transition-speed, 0.46s) cubic-bezier(1, 0.09, 0, 0.89), transform var(--limel-snackbar-top-transition-speed, 0.46s) ease;transform:translate3d(0, 0, 0);opacity:1}aside.is-closing{transform:translate3d(2rem, 0, 0);opacity:0;--limel-snackbar-top-transition-speed:0.2s;--limel-snackbar-opacity-transition-speed:0.2s}.surface{overflow:hidden;padding:0.5rem;display:flex;align-items:center;justify-content:flex-start;gap:0.25rem;min-height:3.25rem;border-radius:0.75rem;background-color:rgb(var(--contrast-1400));box-shadow:var(--shadow-depth-8), var(--shadow-depth-16)}.label{color:rgb(var(--contrast-100));-webkit-font-smoothing:antialiased;font-size:var(--limel-theme-default-small-font-size);font-weight:400;padding:0 0.25rem;width:100%;flex-grow:1}.actions{display:flex;flex-shrink:0;align-items:center;box-sizing:border-box;gap:0.5rem}.dismiss,.actions{--lime-elevated-surface-background-color:rgb( var(--contrast-1300) )}.dismiss{--limel-theme-on-surface-color:rgb( var(--contrast-100) );--icon-background-color:var(--lime-elevated-surface-background-color);--fill-color:var(--lime-primary-color, var(--limel-theme-primary-color));--track-color:rgb(var(--contrast-800), 0.2);transition:opacity 0.1s ease, transform 0.1s ease;position:absolute;top:-0.375rem;left:-0.375rem;transform:scale(0.7);display:flex;align-items:center;justify-content:center}.dismiss svg{position:absolute;transform:rotate(90deg);fill:transparent;stroke-dasharray:100;stroke-linecap:round}aside.open .dismiss svg{animation:timeout var(--snackbar-timeout) linear forwards}.dismiss .is-closing{transform:scale(0.5);opacity:0}.dismiss-button{transform:scale(0.8);margin:0;padding:0}@keyframes timeout{0%{stroke-width:4;stroke-dashoffset:0;opacity:1}100%{stroke-width:1;stroke-dashoffset:-100;opacity:0.7}}";export{n as limel_snackbar}