@zywave/zui-bundle
Version:
ZUI, out of the box, provides ES modules with bare path modifiers (e.g. `import '@zywave/zui-foo-bar'`). This is great as that's the way browsers are _going_, but they aren't there quite yet. Tooling exists to help solve this problem like webpack or rollu
2 lines (1 loc) • 8.54 kB
JavaScript
import{i as e,n as t,Z as o,x as n,a as i,E as s}from"../internals/_def61d4d.js";import{n as l}from"../internals/_0e55c1bc.js";class r extends EventTarget{#e=new Set;keys(){return[...this.#e].keys()}values(){return[...this.#e].values()}add(...e){for(const t of e)this.toggle(t,!0)}remove(...e){for(const t of e)this.toggle(t,!1)}toggle(e,t){const o=this.#e.size;return t!==!!t?this.#e.has(e)?this.#e.delete(e):this.#e.add(e):t?this.#e.add(e):this.#e.delete(e),this.#e.size!==o&&this.#t(),this.#e.has(e)}contains(e){return this.#e.has(e)}item(e){return[...this.#e][e]??null}get length(){return this.#e.size}[Symbol.iterator](){return[...this.#e].values()}#t(){this.dispatchEvent(new Event("tokenchange"))}}const a=e`{section{scrollbar-color:var(--zui-gray-400) rgba(0,0,0,0);scrollbar-width:thin}}section::-webkit-scrollbar{width:7px;height:7px}section::-webkit-scrollbar-track{background-color:rgba(0,0,0,0);border-radius:7px}section::-webkit-scrollbar-thumb{background-color:var(--zui-gray-400);border-radius:7px}section::-webkit-scrollbar-thumb:hover{background-color:var(--zui-gray-300)}section::-webkit-scrollbar-thumb:active{background-color:var(--zui-gray-600)}:host([opened]) .content-root{right:0;visibility:visible}:host([mode=overlay]) article{height:100vh}:host([mode=inline]) .content-root{top:var(--zui-flyout-top,0);z-index:1001;background-color:#fff;box-shadow:0 .25rem .25rem rgba(0,0,0,.25)}:host([mode=inline]) .content-root article{height:100vh}:host([mode=inline]) .content-root.using-shell{top:var(--zui-flyout-top,calc(var(--zui-shell-topbar-global-height) + var(--zui-shell-topbar-app-height-collapsed) + var(--zui-shell-banner-height)))}:host([mode=inline]) .content-root.using-shell article{height:calc(100vh - (var(--zui-shell-topbar-global-height) + var(--zui-shell-topbar-app-height-collapsed) + var(--zui-shell-banner-height)))}:host([mode=inline]) .content-root.using-shell.shell-has-app-name{top:var(--zui-flyout-top,calc(var(--zui-shell-topbar-global-height) + var(--zui-shell-topbar-app-height) + var(--zui-shell-banner-height)))}:host([mode=inline]) .content-root.using-shell.shell-has-app-name article{height:calc(100vh - (var(--zui-flyout-top,calc(var(--zui-shell-topbar-global-height) + var(--zui-shell-topbar-app-height) + var(--zui-shell-banner-height)))))}:host([mode=inline][expanded]) .content-root{width:100vw}{:host([mode=inline][expanded]) .content-root{width:calc(100vw - var(--zui-shell-nav-width))}:host([mode=inline][expanded]) .content-root.shell-nav-collapsed{width:calc(100vw - var(--zui-shell-nav-width-collapsed))}}:host([mode=overlay][expanded]) .content-root{width:100vw}::slotted(h1[slot=header]){margin:0!important}.content-root{position:fixed;right:-50vw;display:block;width:50vw;visibility:hidden;transition:right 250ms ease,width 250ms ease}{.content-root{right:calc(var(--zui-flyout-width,50ch)*-1);width:var(--zui-flyout-width,50ch)}}dialog{display:flex;max-width:none;max-height:none;margin-top:0;margin-right:0;margin-bottom:0;padding:0;border:0;box-shadow:0 .25rem .25rem rgba(0,0,0,.25);color:var(--zui-gray-800)}dialog::backdrop{background:rgba(0,0,0,.25)}article{display:flex;flex-direction:column}header{display:flex;justify-content:space-between;align-items:center;padding:.9375rem 1.25rem;border-bottom:.0625rem solid var(--zui-gray-100);gap:1ch}header button{display:block;padding:0;background:0 0;border:0;line-height:0;cursor:pointer}header zui-icon{color:var(--zui-gray-500)}header zui-icon[icon=zui-remove]{--zui-icon-size:1.25rem}footer,section{padding:.625rem}section{height:100%;overflow-y:auto}footer{margin-top:auto;background-color:var(--zui-flyout-footer-background-color);border-top:.0625rem solid var(--zui-gray-100)}footer.hide{display:none}`;var h,d=function(e,t,o,n){var i,s=arguments.length,l=s<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,o):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,n);else for(var r=e.length-1;r>=0;r--)(i=e[r])&&(l=(s<3?i(l):s>3?i(t,o,l):i(t,o))||l);return s>3&&l&&Object.defineProperty(t,o,l),l};class c extends o{static#o=new Set;#n;#i;#s;#l;#r;#a;#h;#d;#c;get#u(){if(this.contentSelector)return document.querySelector(this.contentSelector);const e=this._getElements("ZUI-SHELL")?.[0];return e||document.querySelector("body")}static get styles(){return[super.styles,a]}get mode(){return this.#i}set mode(e){const t=this.#i;t!==e&&(this.#i=e,this.#p(e,t))}get controlsList(){return this.#a}set controlsList(e){if(!e)return;const t=e.split(/\s+/).filter((e=>e));for(const e of t)this.#a.add(e);const o=[...this.#a].filter((e=>!t.includes(e)));for(const e of o)this.#a.remove(e)}get opened(){return this.#s}set opened(e){const t=this.#s;t!==e&&(this.#s=e,this.#g(e,t))}get expanded(){return this.#l}set expanded(e){this.#l!==e&&(this.#l=e)}get#m(){return"overlay"===this.mode?this.shadowRoot?.querySelector("dialog")??null:null}get#b(){return!!this._getElements("ZUI-SHELL")?.length}constructor(){super(),this.#n=null,this.#i="overlay",this.#s=!1,this.#l=!1,this.#r=!1,this.#a=new r,this.#h=this.#v.bind(this),this.#c=Symbol(),this.contentSelector=null,this.#a.addEventListener("tokenchange",(()=>this.requestUpdate())),this.#d=this.attachInternals(),this.#d.role="dialog",this.#d.ariaModal="true",this.#d.ariaHidden="true"}connectedCallback(){super.connectedCallback(),window.addEventListener("navcollapsechange",this.#h),h.#o.add(this),this.#f()}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("navcollapsechange",this.#h),h.#o.delete(this),this.#f()}async open(){this.opened=!0,await this.updateComplete}async close(){this.opened=!1,this.expanded=!1,await this.updateComplete}expand(){this.expanded=!0}collapse(){this.expanded=!1}render(){const e={"using-shell":this.#b};return"inline"===this.mode?this.#y(e):this.#w(e)}#w(e){return n`<dialog class="content-root ${i(e)}" ="${()=>this.close()}">${this.#z()}</dialog>`}#y(e){const t=this._getElements("ZUI-SHELL")?.[0],o=this._getElements("ZUI-SHELL-NAV")?.[0],s={...e,"shell-has-app-name":!!t?.getAttribute("app-name"),"shell-nav-collapsed":!!o?.hasAttribute("collapsed")};return n`<div class="content-root ${i(s)}">${this.#z()}</div>`}#z(){return n`<article><header>${this.#k()}<slot name="header"></slot>${this.#x()}</header><section><slot></slot></section><footer class="${i({hide:!this.#r})}"><slot name="footer" ="${this.#C}"></slot></footer></article>`}#k(){return this.expanded?n`<button class="collapse" ="${()=>this.collapse()}"><zui-icon icon="zui-collapse" class="small"></zui-icon></button>`:n`<button class="expand" ="${()=>this.expand()}"><zui-icon icon="zui-expand" class="small"></zui-icon></button>`}#x(){return this.#a.contains("noclose")?s:n`<button class="close" ="${()=>this.close()}"><zui-icon icon="zui-remove"></zui-icon></button>`}#g(e,t){if(this.requestUpdate("opened",t),e)for(const e of h.#o)e.#c!==this.#c&&e.opened&&e.close();"inline"!==this.mode&&this.#E(e),this.#f(),this.#d.ariaHidden=e?"false":"true";const o=e?"open":"close";this.dispatchEvent(new CustomEvent(o,{bubbles:!0,composed:!0}))}#p(e,t){"inline"===e?(this.#d.role="complementary",this.#d.ariaModal="false"):(this.#d.role="dialog",this.#d.ariaModal="true"),this.requestUpdate("mode",t)}#v(){this.requestUpdate()}#C(){this.#r=this._footerSlottedNodes.length>0,this.requestUpdate()}#f(){const e=Array.from(h.#o).filter((e=>e.opened&&e.isConnected)),t=e.some((e=>"inline"===e.mode)),o=e.length>0;null===this.#n&&(this.#n=document.body.style.overflow),document.body.style.overflow=o?"hidden":this.#n,document.body.classList.toggle("zui-flyout-inline-opened",t),this.#u&&this.#u.classList.toggle("zui-flyout-inline-opened",t);const n=this._getElements("ZUI-SHELL-CONTENT-ACTIONBAR")?.[0];n?.classList.toggle("zui-flyout-inline-opened",t)}async#E(e){this.#m||await this.updateComplete,e??=this.opened,e?this.#m?.showModal():this.#m?.close()}}h=c,d([t({type:String,reflect:!0})],c.prototype,"mode",null),d([t({attribute:"controlslist",converter:{fromAttribute:e=>e,toAttribute:e=>{const t=[...e];return t.length>0?t.join(" "):null}}})],c.prototype,"controlsList",null),d([t({type:String,attribute:"content-selector"})],c.prototype,"contentSelector",void 0),d([t({type:Boolean,reflect:!0})],c.prototype,"opened",null),d([t({type:Boolean,reflect:!0})],c.prototype,"expanded",null),d([l({slot:"footer"})],c.prototype,"_footerSlottedNodes",void 0),window.customElements.define("zui-flyout",c);