@coderundebug/ui-web/ui-dialog.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 as i}from"./ui-tools.js";export default class o extends HTMLElement{static i=[];constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=o.uiHtml,this.shadowRoot.adoptedStyleSheets=[o.uiCssStyleSheet],this.o=this.shadowRoot.querySelector("dialog"),this.t=this.shadowRoot.querySelector(".modal"),this.l=this.shadowRoot.querySelector('slot[name="header"]'),this.m=this.shadowRoot.querySelector('slot[name="footer"]'),this.h=this.h.bind(this),this.u=this.u.bind(this),this.p=this.p.bind(this),this.v=this.v.bind(this),this.k=this.k.bind(this),this._=this._.bind(this)}connectedCallback(){o.D(this),this.l.addEventListener("slotchange",this.k),this.m.addEventListener("slotchange",this._)}disconnectedCallback(){o.C(this),this.l.removeEventListener("slotchange",this.k),this.m.removeEventListener("slotchange",this._)}h(i){if(!0===this.hasAttribute("locked"))return;const o=this.t.getBoundingClientRect();(i.clientY<o.top||i.clientY>o.top+o.height||i.clientX<o.left||i.clientX>o.left+o.width)&&this.Y()}u(i){!1===this.hasAttribute("locked")&&this.Y(),i.preventDefault()}p(i){"Escape"===i.key&&!0===this.hasAttribute("locked")&&i.preventDefault()}k(i){0!==this.l.assignedElements().length?this.o.setAttribute("has-header",""):this.o.removeAttribute("has-header")}_(i){0!==this.m.assignedElements().length?this.o.setAttribute("has-footer",""):this.o.removeAttribute("has-footer")}static open(i){o.j="";for(let a=0;a<o.i.length;a++){const t=o.i[a];if(!1!==t.hasAttribute("name")&&t.getAttribute("name")===i)return void t.L()}o.j=i}static close(i){o.j="";for(let a=0;a<o.i.length;a++){const t=o.i[a];!1!==t.hasAttribute("name")&&(t.getAttribute("name")===i&&t.Y())}}L(){this.o.addEventListener("click",this.h),this.o.addEventListener("cancel",this.u),this.o.addEventListener("keydown",this.p),this.o.showModal(),this.o.classList.remove("hide"),this.o.classList.add("show")}Y(){!0!==this.S&&(this.S=!0,this.o.classList.remove("show"),this.o.classList.add("hide"),this.o.addEventListener("animationend",this.v))}v(){this.o.removeEventListener("animationend",this.v),this.A()}A(){this.o.removeEventListener("click",this.h),this.o.removeEventListener("cancel",this.u),this.o.removeEventListener("keydown",this.p),this.o.close(),this.S=!1}static D(i){o.i.push(i),!0===i.hasAttribute("name")&&i.getAttribute("name")===o.j&&(o.j="",i.L())}static C(i){if(o.i)for(let a=0;a<o.i.length;a++){if(o.i[a]===i)return void o.i.splice(a,1)}}}o.uiCss=' dialog{position:fixed;inset:0;align-items:center;justify-content:center;margin:0;max-height:100%;max-width:100%;height:100%;width:100%;background-color:transparent;padding:0;border:none;outline:none;overflow:auto;}.modal{display:flex;flex-direction:column;justify-content:center;background-color:var(--ui-dialog-background, var(--ui-module-background, hsl(0 0% 97% / 1)));color:var(--ui-dialog-foreground, var(--ui-module-foreground, hsl(0 0% 18% / 1)));border-radius:var(--ui-dialog-border-radius, var(--ui-border-radius-large, 6px));border-style:var(--ui-dialog-border-style, var(--ui-module-border-style, none));border-width:var(--ui-dialog-border-width, var(--ui-module-border-width, 0));border-color:var(--ui-dialog-border-color, var(--ui-module-border-color, transparent));box-shadow:var(--ui-dialog-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% ) ) );margin:0.5rem;max-inline-size:calc(100dvw - 2rem);inline-size:fit-content;}.body{margin-top:var(--ui-dialog-border-radius, var(--ui-border-radius-large, 6px));margin-bottom:var(--ui-dialog-border-radius, var(--ui-border-radius-large, 6px));}:host([bar]) dialog[has-header] .header, :host([bar-header]) dialog[has-header] .header{border-bottom-style:var(--ui-dialog-bar-style, var(--ui-border-style, solid));border-bottom-width:var(--ui-dialog-bar-width, var(--ui-border-width, 1px));border-bottom-color:var(--ui-dialog-bar-color, var(--ui-module-border-color, transparent));}:host([bar]) dialog[has-footer] .footer, :host([bar-footer]) dialog[has-footer] .footer{border-top-style:var(--ui-dialog-bar-style, var(--ui-border-style, solid));border-top-width:var(--ui-dialog-bar-width, var(--ui-border-width, 1px));border-top-color:var(--ui-dialog-bar-color, var(--ui-module-border-color, transparent));}:host([size]) .modal{inline-size:calc(100dvw - 1rem);}:host([size="small"]) .modal{max-inline-size:max(30dvw, 18rem);}:host([size="medium"]) .modal{max-inline-size:max(50dvw, 28rem);}:host([size="large"]) .modal{max-inline-size:max(70dvw, 38rem);}:host([size="full"]) .modal{max-inline-size:calc(100dvw - 2rem);}:host([location="top"]) .modal{align-self:start;margin-block-start:1rem;}:host([location="bottom"]) .modal{align-self:end;margin-block-end:1rem;}@media (max-width:40rem){:host([size="large"]) .modal{max-width:calc(100dvw - 2rem);}} @media (max-width:30rem){:host([size="medium"]) .modal{max-width:calc(100dvw - 2rem);}} @media (max-width:20rem){:host([size="small"]) .modal{max-width:calc(100dvw - 2rem);}} dialog::backdrop{background-color:var(--ui-dialog-backdrop, var(--ui-module-backdrop, hsla(0, 0%, 97%, 0.25)));user-select:none;-webkit-user-select:none;transition:background-color var(--ui-animation-duration-default, 200ms) linear;}dialog::-webkit-scrollbar{display:none;}dialog[open]{opacity:0;display:grid;}:host(:not(open-animation)) dialog[open].show{opacity:1;}:host([open-animation]) dialog[open].show{animation-name:fade-in;animation-duration:var(--ui-animation-duration-default, 200ms);animation-timing-function:ease-in-out;animation-fill-mode:forwards;}:host([open-animation="up"]) dialog[open].show .modal{animation-name:up-in;animation-duration:var(--ui-animation-duration-default, 200ms);animation-timing-function:ease-in-out;animation-fill-mode:forwards;}:host([open-animation="down"]) dialog[open].show .modal{animation-name:down-in;animation-duration:var(--ui-animation-duration-default, 200ms);animation-timing-function:ease-in-out;animation-fill-mode:forwards;}:host([open-animation="scale"]) dialog[open].show .modal{animation-name:scale-in;animation-duration:var(--ui-animation-duration-default, 200ms);animation-timing-function:ease-in-out;animation-fill-mode:forwards;}:host(:not(open-animation)) dialog[open].hide{animation-name:fade-out;animation-duration:10ms;animation-timing-function:ease-in-out;animation-fill-mode:forwards;}:host([close-animation]) dialog[open].hide{animation-name:fade-out;animation-duration:var(--ui-animation-duration-default, 200ms);animation-timing-function:ease-in-out;animation-fill-mode:forwards;}:host([close-animation="up"]) dialog[open].hide .modal{animation-name:up-out;animation-duration:var(--ui-animation-duration-default, 200ms);animation-timing-function:ease-in-out;animation-fill-mode:forwards;}:host([close-animation="down"]) dialog[open].hide .modal{animation-name:down-out;animation-duration:var(--ui-animation-duration-default, 200ms);animation-timing-function:ease-in-out;animation-fill-mode:forwards;}:host([close-animation="scale"]) dialog[open].hide .modal{animation-name:scale-out;animation-duration:var(--ui-animation-duration-default, 200ms);animation-timing-function:ease-in-out;animation-fill-mode:forwards;}@keyframes fade-in{0%{opacity:0;}100%{opacity:1;}} @keyframes up-in{0%{transform:translateY(100%);}} @keyframes down-in{0%{transform:translateY(-100%);}} @keyframes scale-in{0%{transform:scale(0.75);}} @keyframes fade-out{0%{opacity:1;}100%{opacity:0;}} @keyframes up-out{100%{transform:translateY(-100%)}} @keyframes down-out{100%{transform:translateY(100%)}} @keyframes scale-out{100%{transform:scale(0.75);}} @keyframes no-animation-out{0%{opacity:0;}} @media (forced-colors:active) or (prefers-contrast:more){.modal{border-style:solid;border-width:2px;border-color:var(--ui-foreground, hsl(0 0% 18% / 1));box-shadow:none;}} @media (prefers-reduced-motion){#dialog[open][open-animation].show{opacity:1;animation:none;}#dialog[open][close-animation].hide{opacity:0;animation:no-animation-out;}}',o.uiHtml='<dialog><div class="modal"><div class="header"><slot name="header"></slot></div><div class="body"><slot></slot></div><div class="footer"><slot name="footer"></slot></div></div></dialog>',i.createUi(o,"ui-dialog",import.meta.url);