@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) • 15.8 kB
JavaScript
import{Z as t,i as e,n as o,x as i,u as s,a as r,E as a}from"../internals/_def61d4d.js";import{o as l}from"../internals/_f2c0bbb6.js";import{r as n}from"../internals/_bf2251da.js";import{n as d,s as c}from"../internals/_be429861.js";class h{constructor(t){this.elements=new Set,this.channel=new EventTarget,this.root=t}}class u extends t{static{this._globalChannel=new EventTarget}get _state(){if("ZUI-TABLE"===this.tagName)return u.#t.get(this);const t=u.#e.get(this);return t?u.#t.get(t):void 0}static#t=new WeakMap;static#e=new WeakMap;constructor(){super(),"ZUI-TABLE"===this.tagName&&u.#t.set(this,new h(this))}connectedCallback(){super.connectedCallback(),"ZUI-TABLE"!==this.tagName&&u._globalChannel.dispatchEvent(new CustomEvent("connected",{detail:{element:this}}))}disconnectedCallback(){super.disconnectedCallback(),"ZUI-TABLE"===this.tagName?u.#t.delete(this):(u.#e.delete(this),this._state?.elements.delete(this))}_associateElement(t){"ZUI-TABLE"===this.tagName&&"ZUI-TABLE"!==t.tagName&&(u.#e.set(t,this),this._state.elements.add(t))}}const m=e`{:host([mode=fixed-sizing]) .table{scrollbar-color:var(--zui-gray-400) rgba(0,0,0,0);scrollbar-width:thin}}:host([mode=fixed-sizing]) .table::-webkit-scrollbar{width:7px;height:7px}:host([mode=fixed-sizing]) .table::-webkit-scrollbar-track{background-color:rgba(0,0,0,0);border-radius:7px}:host([mode=fixed-sizing]) .table::-webkit-scrollbar-thumb{background-color:var(--zui-gray-400);border-radius:7px}:host([mode=fixed-sizing]) .table::-webkit-scrollbar-thumb:hover{background-color:var(--zui-gray-300)}:host([mode=fixed-sizing]) .table::-webkit-scrollbar-thumb:active{background-color:var(--zui-gray-600)}:host{contain:none;display:block}:host .no-results{display:none}:host([banded]) ::slotted(zui-table-row:not([header]):not([summary]):nth-child(2n)){--zui-table-row-background:var(--zui-gray-25)}:host([banded]) ::slotted(zui-table-row:not([header],[summary])){border:0}:host([no-results]) .no-results{display:block;padding:.75rem 1.25rem;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}{:host([no-results]) .no-results{background-color:rgba(0,0,0,0);box-shadow:none}}:host([loading]) .no-results,:host([loading]) ::slotted(zui-table-row:not([header])){visibility:hidden}:host([loading]) .table-wrapper{min-height:var(--zui-table-loading-min-height,20rem)}:host([loading]) zui-spinner{position:absolute;top:calc(50% - var(--zui-spinner-size,1.75rem)/ 2);left:calc(50% - var(--zui-spinner-size,1.75rem)/ 2)}{:host([mode=fixed-sizing]){max-width:var(--zui-table-max-width,none)}:host([mode=fixed-sizing]) .table{max-height:var(--zui-table-max-height,none);overflow:auto}:host([mode=fixed-sizing]) ::slotted(zui-table-row[header]){position:sticky;top:0;z-index:1}}::slotted(zui-table-row:not([header],[summary])){border-bottom:2px solid var(--zui-gray-100)}{::slotted(zui-table-row:not([header],[summary])){border-bottom-width:1px}}::slotted(zui-table-row:not([header]):has(+zui-table-row[summary])),::slotted(zui-table-row:not([header]):last-of-type){border-bottom:0}{.wrapper{background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}}.wrapper .table-wrapper{display:flex;flex-direction:column;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}{.wrapper .table-wrapper{box-shadow:none}}.wrapper .table-wrapper .table{display:flex;flex-direction:column;flex:1}.wrapper .table-wrapper .table .body{position:relative;flex:1}`;var b=function(t,e,o,i){var s,r=arguments.length,a=r<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,o,i);else for(var l=t.length-1;l>=0;l--)(s=t[l])&&(a=(r<3?s(a):r>3?s(e,o,a):s(e,o))||a);return r>3&&a&&Object.defineProperty(e,o,a),a};class p extends u{#o;#i;static get styles(){return[super.styles,m]}constructor(){super(),this.banded=!1,this.mode="default",this.noResults=!1,this.loading=!1,this.#i=!1,this.#o=this.attachInternals(),this.#o.role="table",u._globalChannel.addEventListener("connected",(t=>{this.contains(t.detail.element)&&this._associateElement(t.detail.element)})),this._state.channel.addEventListener("sort",(t=>{this.#i||(this.#i=!0,this.dispatchEvent(new CustomEvent("sort",{detail:t.detail,bubbles:!0})),setTimeout((()=>this.#i=!1),0))}))}connectedCallback(){super.connectedCallback(),this.setAttribute("role","table")}firstUpdated(t){super.firstUpdated(t),this.#s()}updated(t){super.updated(t);const e=this.querySelector("zui-table-footer:not([slot])"),o=this.querySelector("zui-table-row[header]:not([slot])"),i=this.querySelector("zui-table-topbar:not([slot])"),s=this.querySelector("zui-table-row[summary]:not([slot])");e?.setAttribute("slot","footer"),o?.setAttribute("slot","header"),i?.setAttribute("slot","topbar"),s?.setAttribute("slot","summary")}render(){return i`<div class="wrapper"><slot name="topbar"></slot><div class="table-wrapper"><div class="table" role="rowgroup"><slot name="header" ="${this.#r}"></slot><div class="body"><slot ="${this.#r}"></slot>${this.loading?i`<zui-spinner active="" part="loader"></zui-spinner>`:i``}<div class="no-results"><slot name="no-results-message"></slot></div></div></div><slot name="summary"></slot></div></div><div><slot name="footer"></slot></div>`}#r(){this.#s(),this.requestUpdate()}async#s(){const t=this.querySelector("zui-table-row[header]");if(t){const e=this._rows.filter((t=>!t.hasAttribute("header")&&!t.hasAttribute("summary")));for(const o of e)for(let e=0;e<o.children.length;e++){o.children[e]._header=t.children?.[e]?.textContent??""}}s(this.#o,"add","mobile")}}b([o({type:Boolean,reflect:!0})],p.prototype,"banded",void 0),b([o({reflect:!0})],p.prototype,"mode",void 0),b([o({type:Boolean,reflect:!0,attribute:"no-results"})],p.prototype,"noResults",void 0),b([o({type:Boolean,reflect:!0})],p.prototype,"loading",void 0),b([l({selector:"zui-table-row"})],p.prototype,"_rows",void 0),window.customElements.define("zui-table",p);const g=e`:host{contain:none}.topbar{display:flex;width:100%;min-height:3.75rem;flex-wrap:wrap;justify-content:space-between;align-items:center}{.topbar{flex-wrap:nowrap;padding:.625rem 1.25rem;background-color:var(--zui-gray-25);box-shadow:none}}.content{display:flex;flex:1;align-items:center;order:1;margin-bottom:1.25rem}{.content{flex:auto;order:0}}{.content{margin-bottom:0}}.content ::slotted(zui-search){--zui-search-border-color:var(--zui-gray-50);width:100%}{.content ::slotted(zui-search){width:auto}}.counter{display:flex;width:100%;flex-shrink:0;justify-content:flex-end;order:2;margin-bottom:.625rem;margin-left:auto;padding-left:.625rem;font-size:.75rem;color:var(--zui-gray-400)}{.counter{width:auto;order:0;margin-bottom:0}}.action{display:flex;width:100%;justify-content:flex-end;margin-bottom:1.25rem}{.action{width:auto}}{.action{margin-bottom:0}}.action slot[name=action]{display:flex;width:100%;flex-direction:column}{.action slot[name=action]{flex-direction:row}}.action ::slotted(zui-button){width:100%}{.action ::slotted(zui-button){width:auto}}{.action ::slotted(zui-button-group:first-of-type),.action ::slotted(zui-button:first-of-type){margin-left:1.25rem}}{.action ::slotted(zui-button-group:first-of-type),.action ::slotted(zui-button:first-of-type){margin-left:.625rem}}.action ::slotted(zui-button-group:not(:first-of-type)),.action ::slotted(zui-button:not(:first-of-type)){margin-top:.625rem}{.action ::slotted(zui-button-group:not(:first-of-type)),.action ::slotted(zui-button:not(:first-of-type)){margin-top:0;margin-left:.625rem}}`;var f=function(t,e,o,i){var s,r=arguments.length,a=r<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,o,i);else for(var l=t.length-1;l>=0;l--)(s=t[l])&&(a=(r<3?s(a):r>3?s(e,o,a):s(e,o))||a);return r>3&&a&&Object.defineProperty(e,o,a),a};class y extends u{#a=window.matchMedia(`only screen and (max-width: ${c.xsmall})`);#l=t=>{t.matches?this.#n():this.#d()};static get styles(){return[super.styles,g]}connectedCallback(){super.connectedCallback(),this.#a.addEventListener("change",this.#l)}disconnectedCallback(){super.disconnectedCallback(),this.#a.removeEventListener("change",this.#l)}firstUpdated(){this.#a.matches?this.#n():this.#d(),this.#c(),this.#h()}render(){return i`<div class="topbar"><div class="content"><slot></slot></div><div class="counter"><slot name="counter" ="${this.#h}"></slot></div><div class="action"><slot name="action" ="${this.#u}"></slot></div></div>`}#u(){this.#c(),this.#a.matches?this.#n():this.#d()}#n(){if(this._actionButtons.length>0)for(const t of this._actionButtons)t.hasAttribute("block")||t.setAttribute("block","");this.requestUpdate()}#d(){if(this._actionButtons.length>0)for(const t of this._actionButtons)t.hasAttribute("block")&&t.removeAttribute("block");this.requestUpdate()}#h(){const t=this.shadowRoot.querySelector(".counter");0===this._counterSlottedNodes.length?t.style.display="none":this._counterSlottedNodes.length>0&&"none"===t.style.display&&t.style.removeProperty("display"),this.requestUpdate()}#c(){const t=this.shadowRoot.querySelector(".action");0===this._actionSlottedElements.length?t.style.display="none":this._actionSlottedElements.length>0&&"none"===t.style.display&&t.style.removeProperty("display"),this.requestUpdate()}}f([l({slot:"action"})],y.prototype,"_actionSlottedElements",void 0),f([d({slot:"counter"})],y.prototype,"_counterSlottedNodes",void 0),f([l({selector:"zui-button",slot:"action"})],y.prototype,"_actionButtons",void 0),window.customElements.define("zui-table-topbar",y);const w=e`:host{contain:none}.footer{display:flex;justify-content:center;align-items:center;margin-top:var(--zui-table-footer-margin,.625rem)}::slotted(zui-pager){width:100%}`;window.customElements.define("zui-table-footer",class extends u{static get styles(){return[super.styles,w]}render(){return i`<div class="footer"><slot></slot></div>`}});const v=e`:host{contain:none;display:flex}:host([header]){--zui-table-row-background:#fff;display:none}{:host([header]){display:flex}}:host([header]) div{border-bottom:.0625rem solid var(--zui-gray-200);box-shadow:none}:host([header]) ::slotted(zui-table-cell){--zui-table-cell-padding:0.53125rem 1.25rem;font-weight:600;user-select:none}:host([summary]){--zui-table-columns-template:1fr;background-color:var(--zui-table-summary-background-color,var(--zui-gray-600))!important}:host([summary]) div{margin-bottom:0;background-color:rgba(0,0,0,0)}:host([summary]) ::slotted(zui-table-cell){font-weight:600;color:var(--zui-table-summary-text-color,#fff)}:host(:last-of-type:not([summary])) div,:host([summary]) div{margin-bottom:0}div{display:grid;flex:1;grid-template-columns:auto;margin-bottom:0;padding:.625rem 0;background-color:var(--zui-table-row-background,#fff)}{div{grid-template-columns:var(--zui-table-columns-template,repeat(auto-fit,minmax(0,1fr)));padding:0;background-color:var(--zui-table-row-background,transparent);box-shadow:none}}`;var z=function(t,e,o,i){var s,r=arguments.length,a=r<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,o,i);else for(var l=t.length-1;l>=0;l--)(s=t[l])&&(a=(r<3?s(a):r>3?s(e,o,a):s(e,o))||a);return r>3&&a&&Object.defineProperty(e,o,a),a};class k extends u{constructor(){super(...arguments),this.header=!1,this.summary=!1}#i;static get styles(){return[super.styles,v]}connectedCallback(){super.connectedCallback(),this.setAttribute("role","row")}firstUpdated(){if(this.header){const t=this._slottedCells?.find((t=>t?.hasAttribute("sort")||null!==t?.sort));this._slottedCells.forEach((e=>{(e?.hasAttribute("sort")||e.sort)&&e!==t&&(e.sort=null,e.removeAttribute("sort"))}))}}updated(t){super.updated(t),t.has("header")&&(this.#m(),this.header&&this._state?.channel.addEventListener("sort",(t=>this.#b(t))))}render(){return i`<div><slot ="${this.#m()}"></slot></div>`}#b(t){this.#i||(this.#i=!0,this._slottedCells?.forEach((e=>{e!==t.detail.cell&&(e.sort=null)})),setTimeout((()=>{this.#i=!1}),0))}#m(){this._slottedCells&&(this.header?this._slottedCells.forEach((t=>{t.setAttribute("role","columnheader"),t._isAllowedSort=!0})):this._slottedCells.forEach((t=>{t.setAttribute("role","cell"),t._isAllowedSort=!1})))}}z([o({type:Boolean,reflect:!0})],k.prototype,"header",void 0),z([o({type:Boolean,reflect:!0})],k.prototype,"summary",void 0),z([l({selector:"zui-table-cell"})],k.prototype,"_slottedCells",void 0),window.customElements.define("zui-table-row",k);const x=e`:host{--zui-table-cell-sort-active-color:var(--zui-blue);--zui-table-cell-sort-color:var(--zui-gray-300);contain:none;overflow-wrap:break-word}:host([sort=ascending]) zui-icon{--zui-icon-sort-ascending-color:var(--zui-table-cell-sort-active-color)}:host([sort=descending]) zui-icon{--zui-icon-sort-descending-color:var(--zui-table-cell-sort-active-color)}:host([action]) div:not(.mobile-header){--zui-table-cell-padding:0.3125rem 0.9375rem}{:host([action]) div:not(.mobile-header){--zui-table-cell-padding:0.375rem 1.25rem;display:flex;align-items:center}}:host([action]) ::slotted(zui-button:not(:first-of-type)){margin-left:.625rem}.wrapper{display:grid;grid-template-columns:1fr 2fr;padding:var(--zui-table-cell-padding,.3125rem .9375rem);gap:.625rem}{.wrapper{display:block;padding:var(--zui-table-cell-padding,.8125rem 1.25rem)}}.mobile-header{font-weight:600}.mobile-header:empty{display:none}.mobile-header:empty+div{grid-column:span 2}{.mobile-header{display:none}}zui-icon{--zui-icon-size:1.125rem;vertical-align:middle;margin-left:.625rem;fill:var(--zui-table-cell-sort-color)}.is-selectable{cursor:pointer}`;var _=function(t,e,o,i){var s,r=arguments.length,a=r<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,o,i);else for(var l=t.length-1;l>=0;l--)(s=t[l])&&(a=(r<3?s(a):r>3?s(e,o,a):s(e,o))||a);return r>3&&a&&Object.defineProperty(e,o,a),a};class B extends u{constructor(){super(...arguments),this.action=!1,this._isAllowedSort=!1,this.#p=null,this.#g=!1}get sort(){return this.#p}set sort(t){if(["ascending","descending",null].includes(t)){const e=this.#p;this.#p=t,this.requestUpdate("sort",e),this._state?.channel.dispatchEvent(new CustomEvent("sort",{detail:{sort:t,cell:this}}))}}get sortable(){return this._isAllowedSort&&this.#g}set sortable(t){const e=this.#g;this.#g=t,this.requestUpdate("sortable",e)}#p;#g;static get styles(){return[super.styles,x]}render(){this.sortable&&import("../internals/_0e176b8d.js");const t={"is-selectable":this.sortable};return i`<div class="wrapper"><div class="mobile-header">${this._header??""}</div><div ="${this.#f}" class="${r(t)}"><slot></slot>${this.sortable?i`<zui-icon icon="zui-sort"></zui-icon>`:a}</div></div>`}click(){super.click(),this.#f()}#f(){if(this.sortable)switch(this.sort){case"ascending":this.sort="descending";break;case"descending":this.sort=null;break;default:this.sort="ascending"}}}_([o({type:Boolean,reflect:!0})],B.prototype,"action",void 0),_([o({type:String,reflect:!0})],B.prototype,"sort",null),_([o({type:Boolean,reflect:!0})],B.prototype,"sortable",null),_([n()],B.prototype,"_isAllowedSort",void 0),_([n()],B.prototype,"_header",void 0),window.customElements.define("zui-table-cell",B);