@coderundebug/ui-web/ui-toast.js

A collection of UI web components that can be used in any web project.

/* By Stephen Paul Hassall (web: https://coderundebug.com) */
import { UiTools } from "./ui-tools.js";export default class UiToast extends HTMLElement{static LOCATION_TOP_LEFT=0;static LOCATION_TOP_CENTER=1;static LOCATION_TOP_RIGHT=2;static LOCATION_BOTTOM_LEFT=3;static LOCATION_BOTTOM_CENTER=4;static LOCATION_BOTTOM_RIGHT=5;static t=[];static i=[];static o=null;static l=[];constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=UiToast.uiHtml,this.shadowRoot.adoptedStyleSheets=[UiToast.uiCssStyleSheet],this.p=this.shadowRoot.querySelector(".top-left"),this.u=this.shadowRoot.querySelector(".top-center"),this.T=this.shadowRoot.querySelector(".top-right"),this.v=this.shadowRoot.querySelector(".bottom-left"),this.m=this.shadowRoot.querySelector(".bottom-center"),this.h=this.shadowRoot.querySelector(".bottom-right")}connectedCallback(){UiToast.i.forEach((t=>{this.U(t.elementTag,t.data,t.timeout,t.location)})),UiToast.i=[]}async U(t,i,s,o){const e=document.createElement("div");e.classList.add("holder"),e.style.zIndex="1";const a=document.createElement(t);a.O=o,a._=i,-1!==t.indexOf("-")&&await customElements.whenDefined(t),a.initializeCallback&&a.initializeCallback(i),e.appendChild(a),UiToast.t.push(a);let n=null;0===o&&(n=this.p),1===o&&(n=this.u),2===o&&(n=this.T),3===o&&(n=this.v),4===o&&(n=this.m),5===o&&(n=this.h),0!==o&&1!==o&&2!==o||n.insertBefore(e,n.firstChild),3!==o&&4!==o&&5!==o||n.appendChild(e);const r=a.getBoundingClientRect();e.style.height=0,e.style.opacity=0,0!==o&&1!==o&&2!==o||(e.style.marginBlockStart="0"),3!==o&&4!==o&&5!==o||(e.style.marginBlockEnd="0"),setTimeout((()=>{e.style.height=r.height.toString()+"px",e.style.opacity=1,0!==o&&1!==o&&2!==o||(e.style.marginBlockStart="var(--ui-toast-inner-gap, 8px)"),3!==o&&4!==o&&5!==o||(e.style.marginBlockEnd="var(--ui-toast-inner-gap, 8px)"),e.style.zIndex=""})),this.L(a,s);for(let t=0;t<UiToast.l.length;t++){const s=UiToast.l[t];"add"===s.type&&s.listener(a,i)}}k(t){const i=UiToast.t.indexOf(t);if(-1===i)return;const s=t.parentElement;UiToast.t.splice(i,1),s.style.height="0",s.style.opacity="0",0!==t.O&&1!==t.O&&2!==t.O||(s.style.alignItems="end",s.style.zIndex="0"),0!==t.O&&1!==t.O&&2!==t.O||(s.style.marginBlockStart="0"),3!==t.O&&4!==t.O&&5!==t.O||(s.style.marginBlockEnd="0"),s.C=!1,s.addEventListener("transitionend",(()=>{if(!0!==s.C){s.remove(),s.C=!0;for(let i=0;i<UiToast.l.length;i++){const s=UiToast.l[i];"remove"===s.type&&s.listener(t,t._)}}}))}L(t,i){i&&(i<2500||i>6e4||setTimeout((()=>{UiToast.remove(t)}),i))}static addMessage(t,i,s,o,e){t&&(void 0===i&&(i=!1),void 0===o&&!1===i&&(o=5e3),void 0===e&&(e=4),UiToast.add("ui-toast-message",{text:t,iconTag:s,showClose:i},o,e))}static addAlert(t,i,s,o,e,a,n){void 0===e&&(e=!1),void 0===a&&!1===e&&(a=5e3),void 0===n&&(n=4),UiToast.add("ui-toast-alert",{type:t,title:i,text:s,iconTag:o,showClose:e},a,n)}static add(t,i,s,o){if(null===UiToast.o)return UiToast.i.push({elementTag:t,data:i,location:o,timeout:s}),void UiToast.I();UiToast.o.U(t,i,s,o)}static remove(t){null!==UiToast.o&&UiToast.o.k(t)}static addEventListener(t,i){UiToast.l.push({type:t,listener:i})}static removeEventListener(t,i){for(let s=0;s<UiToast.l.length;s++){const o=UiToast.l[s];if(o.type===t&&o.listener===i)return void UiToast.l.splice(s,1)}}static I(){UiToast.o=document.createElement("ui-toast"),document.body.insertBefore(UiToast.o,null)}}UiToast.uiCss=" .base{position:fixed;inset:0;background-color:transparent;pointer-events:none;isolation:isolate;z-index:1;}.top-left{position:absolute;inset-block-start:calc(var(--ui-toast-outer-gap, 16px) - var(--ui-toast-inner-gap, 8px));inset-inline-start:var(--ui-toast-outer-gap, 16px);display:grid;justify-items:start;}.top-center{position:absolute;inset-block-start:calc(var(--ui-toast-outer-gap, 16px) - var(--ui-toast-inner-gap, 8px));inset-inline:0;display:grid;justify-items:center;}.top-right{position:absolute;inset-block-start:calc(var(--ui-toast-outer-gap, 16px) - var(--ui-toast-inner-gap, 8px));inset-inline-end:var(--ui-toast-outer-gap, 16px);display:grid;justify-items:end;}.bottom-left{position:absolute;inset-block-end:calc(var(--ui-toast-outer-gap, 16px) - var(--ui-toast-inner-gap, 8px));inset-inline-start:var(--ui-toast-outer-gap, 16px);display:grid;justify-items:start;}.bottom-center{position:absolute;inset-block-end:calc(var(--ui-toast-outer-gap, 16px) - var(--ui-toast-inner-gap, 8px));inset-inline:0;display:grid;justify-items:center;}.bottom-right{position:absolute;inset-block-end:calc(var(--ui-toast-outer-gap, 16px) - var(--ui-toast-inner-gap, 8px));inset-inline-end:var(--ui-toast-outer-gap, 16px);display:grid;justify-items:end;}.holder{display:flex;opacity:0;z-index:2;pointer-events:all;transition:height 0.5s ease-in-out, margin-block 0.5s ease-in-out, opacity 0.5s ease-in-out;}@media (prefers-reduced-motion){.holder{transition:height 10ms ease-in-out, margin-block 10ms ease-in-out, opacity 10ms ease-in-out;}} ",UiToast.uiHtml='<div class="base"><div class="top-left"></div><div class="top-center"></div><div class="top-right"></div><div class="bottom-left"></div><div class="bottom-center"></div><div class="bottom-right"></div></div>',UiTools.createUi(UiToast,"ui-toast",import.meta.url);class UiToastAlert extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=UiToastAlert.uiHtml,this.shadowRoot.adoptedStyleSheets=[UiToastAlert.uiCssStyleSheet],this.i=this.shadowRoot.querySelector(".base"),this.t=this.shadowRoot.getElementById("icon"),this.o=this.shadowRoot.querySelector(".info"),this.u=this.shadowRoot.getElementById("title"),this.l=this.shadowRoot.getElementById("text"),this.v=this.shadowRoot.getElementById("close"),this.h=this.h.bind(this)}initializeCallback(r){if(this.l.textContent=r.text,r.type&&this.i.classList.add(r.type),r.iconTag){const i=document.createElement(r.iconTag);this.t.appendChild(i)}else this.t.remove();r.title?this.u.textContent=r.title:this.u.remove(),r.text?this.l.textContent=r.text:this.l.remove(),r.title||r.text||this.o.remove(),r.outline&&this.i.classList.add("outline"),r.invert&&this.i.classList.add("invert"),!0!==r.showClose?this.v.remove():this.v.addEventListener("click",this.h)}h(){UiToast.remove(this)}}UiToastAlert.uiCss=" :host{display:inline-block;}.base{max-width:90vw;display:flex;align-items:center;overflow:hidden;padding:var(--ui-toast-alert-padding, 8px);--ui-ta-bc:var(--ui-toast-alert-default-background, var(--ui-default-background, hsl(0 0% 90% / 1)));--ui-ta-fc:var(--ui-toast-alert-default-foreground, var(--ui-default-foreground, hsl(0 0% 30% / 1)));border-radius:var(--ui-toast-alert-border-radius, var(--ui-border-radius-large, 6px));box-shadow:var(--ui-toast-alert-box-shadow, var(--ui-border-box-shadow, none));background-color:var(--ui-ta-bc);color:var(--ui-ta-fc);}.base.selected{--ui-ta-bc:var(--ui-toast-alert-selected-background, var(--ui-selected-background, hsl(215 50% 90% / 1)));--ui-ta-fc:var(--ui-toast-alert-selected-foreground, var(--ui-selected-foreground, hsl(215 50% 30% / 1)));}.base.success{--ui-ta-bc:var(--ui-toast-alert-success-background, var(--ui-success-background, hsl(104 50% 90% / 1)));--ui-ta-fc:var(--ui-toast-alert-success-foreground, var(--ui-success-foreground, hsl(104 50% 30% / 1)));}.base.warning{--ui-ta-bc:var(--ui-toast-alert-warning-background, var(--ui-warning-background, hsl(45 50% 90% / 1)));--ui-ta-fc:var(--ui-toast-alert-warning-foreground, var(--ui-warning-foreground, hsl(45 50% 30% / 1)));}.base.danger{--ui-ta-bc:var(--ui-toast-alert-danger-background, var(--ui-danger-background, hsl(0 50% 90% / 1)));--ui-ta-fc:var(--ui-toast-alert-danger-foreground, var(--ui-danger-foreground, hsl(0 50% 30% / 1)));}.base.info{--ui-ta-bc:var(--ui-toast-alert-info-background, var(--ui-info-background, hsl(190 50% 90% / 1)));--ui-ta-fc:var(--ui-toast-alert-info-foreground, var(--ui-info-foreground, hsl(190 90% 30% / 1)));}.base.highlight{--ui-ta-bc:var(--ui-toast-alert-highlight-background, var(--ui-highlight-background, hsl(302 50% 90% / 1)));--ui-ta-fc:var(--ui-toast-alert-highlight-foreground, var(--ui-highlight-foreground, hsl(302 50% 30% / 1)));}.base.outline{border-style:var(--ui-toast-alert-border-style, var(--ui-border-style, solid));border-width:var(--ui-toast-alert-border-width, var(--ui-border-width, 1px));border-color:var(--ui-toast-alert-border-color, var(--ui-ta-fc));box-shadow:var(--ui-toast-alert-box-shadow, var(--ui-border-box-shadow, none));}#icon{padding:var(--ui-toast-message-icon-padding, 8px);}#icon > *{display:grid;--ui-icon-primary-color:var(--ui-ta-fc);width:var(--ui-toast-alert-icon-size, 24px);height:var(--ui-toast-alert-icon-size, 24px);}.info-area{padding:var(--ui-toast-alert-info-padding, 0 8px);}#title{font-size:var(--ui-toast-alert-title-font-size, var(--ui-font-size-normal, 16px));font-weight:var(--ui-toast-alert-title-font-weight, var(--ui-font-weight-bold, 600));line-height:150%;user-select:none;-webkit-user-select:none;}#text{font-size:var(--ui-toast-alert-text-font-size, var(--ui-font-size-normal, 16px));font-weight:var(--ui-toast-alert-text-font-weight, var(--ui-font-weight-normal, normal));line-height:150%;user-select:none;-webkit-user-select:none;}#close{width:calc(var(--ui-toast-alert-close-icon-size, 16px) * 2);height:calc(var(--ui-toast-alert-close-icon-size, 16px) * 2);padding:var(--ui-toast-alert-close-padding, 8px);box-sizing:content-box;background-color:var(--ui-ta-bc);border:none;outline:none;--ui-icon-primary-color:var(--ui-ta-fc);border-radius:var(--ui-toast-alert-close-radius, var(--ui-border-radius-normal, 4px));cursor:pointer;-webkit-tap-highlight-color:transparent;}#close:hover{background-color:var(--ui-ta-fc);--ui-icon-primary-color:var(--ui-ta-bc);}#close:active{filter:brightness(65%);}#close:focus-visible{background-color:var(--ui-ta-fc);--ui-icon-primary-color:var(--ui-ta-bc);}svg{width:var(--ui-toast-alert-close-icon-size, 16px);height:var(--ui-toast-alert-close-icon-size, 16px);}.base.invert{background-color:var(--ui-ta-fc);color:var(--ui-ta-bc);--ui-icon-primary-color:var(--ui-ta-bc);}.base.invert #icon > *{--ui-icon-primary-color:var(--ui-ta-bc);}.base.invert #close{background-color:var(--ui-ta-fc);--ui-icon-primary-color:var(--ui-ta-bc);}.base.invert #close:hover{background-color:var(--ui-ta-bc);--ui-icon-primary-color:var(--ui-ta-fc);}.base.invert #close:focus-visible{background-color:var(--ui-ta-bc);--ui-icon-primary-color:var(--ui-ta-fc);}.base.invert.outline{border-color:color-mix( in hsl, var(--ui-ta-bc) 50%, var(--ui-ta-fc) 50% );}@media (forced-colors:active) or (prefers-contrast:more){.base{border-style:var(--ui-border-style, solid);border-width:var(--ui-border-width, 1px);}.base.invert{background-color:var(--ui-ta-bc);color:var(--ui-ta-fc);--ui-icon-primary-color:var(--ui-ta-fc);}#close:hover, .base.invert #close{background-color:var(--ui-ta-bc);--ui-icon-primary-color:var(--ui-ta-fc);}.base.invert #icon > *{--ui-icon-primary-color:var(--ui-ta-fc);}} ",UiToastAlert.uiHtml='<div class="base" role="alert" aria-live="polite" aria-atomic="true"><div id="icon"></div><div class="info-area"><div id="title"></div><div id="text"></div></div><button id="close" aria-label="close"><svg viewBox="0 0 16 16" style=" fill: none; stroke-width: 2; stroke-linecap: round; stroke: var(--ui-icon-primary-color);"><path d="M 2,2 14,14"></path><path d="M 2,14 14,2"></path></svg></button></div>',UiTools.createUi(UiToastAlert,"ui-toast-alert",import.meta.url);class UiToastMessage extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=UiToastMessage.uiHtml,this.shadowRoot.adoptedStyleSheets=[UiToastMessage.uiCssStyleSheet],this.i=this.shadowRoot.querySelector(".base"),this.o=this.shadowRoot.getElementById("icon"),this.t=this.shadowRoot.getElementById("text"),this.l=this.shadowRoot.getElementById("close"),this.u=this.u.bind(this)}initializeCallback(i){if(this.t.textContent=i.text,i.iconTag){const e=document.createElement(i.iconTag);this.o.appendChild(e),this.i.classList.add("icon")}else this.o.remove();!0!==i.showClose?this.l.remove():this.l.addEventListener("click",this.u)}u(){UiToast.remove(this)}}UiToastMessage.uiCss=" :host{display:inline-block;}.base{max-width:90vw;display:flex;align-items:center;overflow:hidden;--ui-tm-bc:var(--ui-toast-message-background, var(--ui-module-background, hsl(0 0% 97% / 1)));--ui-tm-fc:var(--ui-toast-message-foreground, var(--ui-module-foreground, hsl(0 0% 18% / 1)));background-color:var(--ui-tm-bc);color:var(--ui-tm-fc);border-radius:var(--ui-toast-message-border-radius, var(--ui-border-radius-large, 6px));border-style:var(--ui-toast-message-border-style, var(--ui-module-border-style, none));border-width:var(--ui-toast-message-border-width, var(--ui-module-border-width, 0));border-color:var(--ui-toast-message-border-color, var(--ui-module-border-color, transparent));box-shadow:var(--ui-toast-message-box-shadow, var(--ui-module-shadow, 0 1px 4px 0 rgb(from var(--ui-module-foreground, hsl(0 0% 18% / 1)) r g b / 50%)));}#icon{padding:var(--ui-toast-message-icon-padding, 8px);}#icon > *{display:grid;--ui-icon-primary-color:var(--ui-tm-fc);width:var(--ui-toast-message-icon-size, 24px);height:var(--ui-toast-message-icon-size, 24px);}#text{padding:var(--ui-toast-message-padding, 8px 16px);font-size:var(--ui-toast-message-font-size, var(--ui-font-size-normal, 16px));font-weight:var(--ui-toast-message-font-weight, var(--ui-font-weight-normal, normal));line-height:150%;user-select:none;-webkit-user-select:none;}.base.icon #text{padding-inline-start:0;}#close{align-self:stretch;display:grid;justify-items:center;align-items:center;padding:var(--ui-toast-message-close-padding, 8px);background-color:var(--ui-tm-bc);border:none;outline:none;--ui-icon-primary-color:var(--ui-tm-fc);border-inline-start-style:var(--ui-toast-message-bar-style, solid);border-inline-start-width:var(--ui-toast-message-bar-width, 1px);border-inline-start-color:var(--ui-toast-message-bar-color, rgb(from var(--ui-module-foreground, hsl(0 0% 18% / 1)) r g b / 50%));cursor:pointer;-webkit-tap-highlight-color:transparent;}#close:hover{background-color:var(--ui-tm-fc);--ui-icon-primary-color:var(--ui-tm-bc);}#close:active{filter:brightness(65%);}#close:focus-visible{background-color:var(--ui-tm-fc);--ui-icon-primary-color:var(--ui-tm-bc);}svg{width:var(--ui-toast-message-close-icon-size, 16px);height:var(--ui-toast-message-close-icon-size, 16px);}@media (forced-colors:active) or (prefers-contrast:more){.base{border-style:var(--ui-border-style, solid);border-width:var(--ui-border-width, 1px);}#close:hover{background-color:var(--ui-tm-bc);--ui-icon-primary-color:var(--ui-tm-fc);}} ",UiToastMessage.uiHtml='<div class="base" aria-live="polite"><div id="icon"></div><div id="text"></div><button id="close" aria-label="close"><svg viewBox="0 0 16 16" style=" fill: none; stroke-width: 2; stroke-linecap: round; stroke: var(--ui-icon-primary-color);"><path d="M 2,2 14,14"></path><path d="M 2,14 14,2"></path></svg></button></div>',UiTools.createUi(UiToastMessage,"ui-toast-message",import.meta.url);