@limetech/lime-elements
Version:
2 lines • 7.34 kB
JavaScript
import{r as t,c as i,h as e,g as r}from"./p-288f0842.js";import{t as a}from"./p-4c88e5d3.js";import{c as s}from"./p-ad52787a.js";class o{constructor(){this.snackbarElements=[]}add(t){const i=this.getPopover(t);i===null||i===void 0?void 0:i.showPopover();this.snackbarElements=[t,...this.snackbarElements];this.emitOffsets()}remove(t){const i=this.getPopover(t);i===null||i===void 0?void 0: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]")}}const n="*{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(\n var(--contrast-1300)\n )}.dismiss{--limel-theme-on-surface-color:rgb(\n var(--contrast-100)\n );--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}}.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}";const l=new o;const c=300;const m=class{constructor(e){t(this,e);this.action=i(this,"action",7);this.hide=i(this,"hide",7);this.handleOpen=()=>{if(this.isOpen){return}this.isOpen=true;this.closing=false;l.add(this.host);if(this.timeout&&this.timeout!==-1){this.timeoutId=window.setTimeout(this.handleClose,Math.max(this.timeout-c,c))}};this.handleClose=()=>{if(!this.isOpen){return}this.closing=true;if(this.timeoutId){clearTimeout(this.timeoutId);this.timeoutId=undefined}setTimeout((()=>{this.isOpen=false;l.remove(this.host);this.hide.emit();this.offset=0}),c)};this.handleClickAction=()=>{this.action.emit()};this.open=false;this.message=undefined;this.timeout=5e3;this.actionText=undefined;this.dismissible=true;this.multiline=undefined;this.language="en";this.offset=0;this.isOpen=false;this.closing=true;this.snackbarId=s()}componentDidLoad(){if(this.open){requestAnimationFrame(this.handleOpen)}}onChangeIndex(t){t.stopPropagation();this.offset=t.detail}watchOpen(){if(this.open){this.handleOpen()}else{this.handleClose()}this.isOpen=this.open}async show(){console.warn("The `show` method in `limel-snackbar` is deprecated. Please use the `open` property instead.");if(!this.open){this.handleOpen()}}render(){return e("aside",{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":true},id:this.snackbarId,role:this.setAriaRoles(),"aria-relevant":this.open?"additions":undefined},e("div",{class:"surface","aria-atomic":"false"},e("div",{class:"label"},this.message),this.renderActions(this.actionText),this.renderDismissButton(this.dismissible)))}setAriaRoles(){if(!this.open){return}if(!this.timeout||this.timeout===-1){return"alertdialog"}return"status"}renderActions(t){if(!t){return}return e("div",{class:"actions","aria-atomic":"true"},this.renderActionButton(t))}renderActionButton(t){if(!t){return}return e("limel-button",{label:t,onClick:this.handleClickAction})}renderDismissButton(t){if(!t){return}const i=a.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||this.timeout===-1){return}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 r(this)}static get watchers(){return{open:["watchOpen"]}}};m.style=n;export{m as limel_snackbar};
//# sourceMappingURL=p-aeba4aa4.entry.js.map