@coderundebug/ui-web/ui-popup.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 t}from"./ui-tools.js";export class UiPopup extends HTMLElement{static t=null;constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=UiPopup.uiHtml,this.shadowRoot.adoptedStyleSheets=[UiPopup.uiCssStyleSheet],this.i=this.shadowRoot.getElementById("trigger"),this.l=this.shadowRoot.getElementById("dialog"),this.o=this.o.bind(this),this.p=this.p.bind(this),this.u=this.u.bind(this),this.h=!1}connectedCallback(){this.m(),this.i.addEventListener("click",this.o)}disconnectedCallback(){this.i.removeEventListener("click",this.o)}close(){!1!==this.h&&this.v()}o(t){const i=this.k();if(!0===this.h)return this.v(),this.P(!1),i===this&&(UiPopup.t=null),void t.stopPropagation();null!==UiPopup.t&&UiPopup.t!==i&&(UiPopup.t.close(),UiPopup.t=null),this.U(),this.l.show(),this.j(),this.P(!0),UiPopup.t=i,this.l.addEventListener("click",this.p),document.addEventListener("click",this.u),this.h=!0,t.stopPropagation()}p(t){t.stopPropagation()}u(t){this.v()}v(){this.l.removeEventListener("click",this.p),document.removeEventListener("click",this.u),this.l.close(),this._(),this.P(!1),this.C(),this.h=!1}C(){const t=this.O();if(null===t)return;t.querySelectorAll("ui-popup").forEach((t=>{t.close()}))}U(){let t=null,i=this.parentElement;for(;;){if("ui-popup"===i.tagName.toLowerCase()){t=i;break}if(i=i.parentElement,null===i)break}if(null===t)return;t.querySelectorAll("ui-popup").forEach((t=>{t!==this&&t.close()}))}j(){const t=this.O();null!==t&&t.setAttribute("open","")}_(){const t=this.O();null!==t&&t.removeAttribute("open")}P(t){const i=this.shadowRoot.querySelector('slot[name="trigger"]').assignedElements();if(0===i.length)return;const e=i[0];!0===t?e.setAttribute("selected",""):e.removeAttribute("selected")}k(){let t=this,i=this.parentElement;for(;"ui-popup"===i.tagName.toLowerCase()&&(t=i),i=i.parentElement,null!==i;);return t}O(){const t=this.shadowRoot.querySelector('slot[name="dialog"]').assignedElements();if(0===t.length)return null;return t[0]}m(){const t=this.closest("ui-popup-menu, ui-menu-group");this.classList.remove("inside-popup-menu"),this.classList.remove("inside-menu-group"),t&&("UI-POPUP-MENU"===t.tagName&&this.classList.add("inside-popup-menu"),"UI-MENU-GROUP"===t.tagName&&this.classList.add("inside-menu-group"))}}UiPopup.uiCss=':host{display:inline-grid;position:relative;}#dialog{position:absolute;background-color:transparent;color:var(--ui-module-foreground, hsl(0 0% 75% / 1));padding:0;margin:0;outline:none;z-index:9999;border:none;}:host(.inside-menu-group){display:grid;}#dialog{inset:unset;}:host([top][start]) #dialog{inset-block-end:calc(100% + var(--gap, 0.5rem));justify-self:start;align-self:end;}:host([top]:not([start]):not([end])) #dialog{inset-block-end:calc(100% + var(--gap, 0.5rem));justify-self:center;align-self:end;}:host([top][end]) #dialog{inset-block-end:calc(100% + var(--gap, 0.5rem));justify-self:end;align-self:end;}:host([bottom][start]) #dialog{inset-block-start:calc(100% + var(--gap, 0.5rem));justify-self:start;align-self:start;}:host([bottom]:not([start]):not([end])) #dialog{inset-block-start:calc(100% + var(--gap, 0.5rem));justify-self:center;align-self:start;}:host([bottom][end]) #dialog{inset-block-start:calc(100% + var(--gap, 0.5rem));justify-self:end;align-self:start;}:host([left][start]) #dialog{inset-inline-end:calc(100% + var(--gap, 0.5rem));justify-self:end;align-self:start;}:host([left]:not([start]):not([end])) #dialog{inset-inline-end:calc(100% + var(--gap, 0.5rem));justify-self:end;align-self:center;}:host([left][end]) #dialog{inset-inline-end:calc(100% + var(--gap, 0.5rem));justify-self:end;align-self:end;}:host([right][start]) #dialog{inset-inline-start:calc(100% + var(--gap, 0.5rem));justify-self:start;align-self:start;}:host([right]:not([start]):not([end])) #dialog{inset-inline-start:calc(100% + var(--gap, 0.5rem));justify-self:start;align-self:center;}:host([right][end]) #dialog{inset-inline-start:calc(100% + var(--gap, 0.5rem));justify-self:start;align-self:end;}:host(.inside-popup-menu[end]) slot[name="dialog"]::slotted(ui-popup-menu){bottom:calc(var(--ui-border-radius-large, 6px) * -1);}:host(.inside-popup-menu[start]) slot[name="dialog"]::slotted(ui-popup-menu){top:calc(var(--ui-border-radius-large, 6px) * -1);}::slotted(*:not(:defined)){display:none;}',UiPopup.uiHtml='<div id="trigger"><slot name="trigger"></slot></div><dialog id="dialog"><slot name="dialog"></slot></dialog>',t.createUi(UiPopup,"ui-popup",import.meta.url);