@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) • 13.8 kB
JavaScript
import{Z as t,i as e,e as o,l as s,s as i,y as r,h as n,g as a,o as l,c as d}from"../internals/_929d7f55.js";class c{constructor(t){this.elements=new Set,this.channel=new EventTarget,this.root=t}}class h extends t{static#t=this._globalChannel=new EventTarget;get _state(){if("ZUI-TABLE"===this.tagName)return h.#e.get(this);const t=h.#o.get(this);return t?h.#e.get(t):void 0}static#e=new WeakMap;static#o=new WeakMap;constructor(){super(),"ZUI-TABLE"===this.tagName&&h.#e.set(this,new c(this))}connectedCallback(){super.connectedCallback(),"ZUI-TABLE"!==this.tagName&&h._globalChannel.dispatchEvent(new CustomEvent("connected",{detail:{element:this}}))}disconnectedCallback(){super.disconnectedCallback(),"ZUI-TABLE"===this.tagName?h.#e.delete(this):(h.#o.delete(this),this._state?.elements.delete(this))}_associateElement(t){"ZUI-TABLE"===this.tagName&&"ZUI-TABLE"!==t.tagName&&(h.#o.set(t,this),this._state.elements.add(t))}}const m=e`:host{contain:none;display:block}:host([banded]) ::slotted(zui-table-row:not([header]):nth-child(even)){background-color:var(--zui-gray-25)}:host([banded]) ::slotted(zui-table-row:not([header])){border:0}:host([no-results]) .no-results{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}}::slotted(zui-table-row:not([header])){border-bottom:2px solid var(--zui-gray-100)}{::slotted(zui-table-row:not([header])){border-bottom-width:1px}}::slotted(zui-table-row:not([header]):last-of-type){border-bottom:0}.table{display:flex;width:100%;flex-direction:column;border-collapse:collapse;border-spacing:0}{.table{background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}}`;var u=function(t,e,o,s){var i,r=arguments.length,n=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,o):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,o,s);else for(var a=t.length-1;a>=0;a--)(i=t[a])&&(n=(r<3?i(n):r>3?i(e,o,n):i(e,o))||n);return r>3&&n&&Object.defineProperty(e,o,n),n};class b extends h{#s;#i;#r;#n;static get styles(){return[super.styles,m]}constructor(){super(),this.banded=!1,this.noResults=!1,this.#i=window.matchMedia(`only screen and (max-width: ${i.xsmall})`),this.#r=!1,this.#n=t=>{t.matches?this.#a():this.#l()},this.#s=this.attachInternals?.(),h._globalChannel.addEventListener("connected",(t=>{this.contains(t.detail.element)&&this._associateElement(t.detail.element)})),this._state.channel.addEventListener("sort",(t=>{this.#r||(this.#r=!0,this.dispatchEvent(new CustomEvent("sort",{detail:t.detail,bubbles:!0})),setTimeout((()=>this.#r=!1),0))}))}connectedCallback(){super.connectedCallback(),this.setAttribute("role","table"),this.#i.addEventListener?this.#i.addEventListener("change",this.#n):this.#i.addListener(this.#n)}disconnectedCallback(){super.disconnectedCallback(),this.#i.addEventListener?this.#i.removeEventListener("change",this.#n):this.#i.addListener&&this.#i.removeListener(this.#n)}firstUpdated(){this.#d(),this.#i.matches?this.#a():this.#l()}render(){return r`<div class="table"><slot ="${this.#i.matches?this.#a:this.#l}"></slot>${this.noResults?this.#c():""}</div><div><slot name="footer"></slot></div>`}#c(){return r`<div class="no-results"><slot name="no-results-message"></slot></div>`}#d(){this._footer?.map((t=>t.setAttribute("slot","footer")))}#a(){const t=this._rows.filter((t=>t.hasAttribute("header"))),e=this._rows.filter((t=>!t.hasAttribute("header")&&!t.hasAttribute("summary")));if(t.length>0)for(const o of e)for(let e=0;e<o.children.length;e++){const s=o.children[e];if(!s.shadowRoot.querySelector(".header")){const o=document.createElement("div");o.classList.add("header");const i=t[0].children[e].textContent;o.innerText=i,s.shadowRoot.prepend(o)}}this.#s?.states?.add("--mobile"),this.requestUpdate()}#l(){const t=this._rows.filter((t=>!t.hasAttribute("header")&&!t.hasAttribute("summary")));for(const e of t)for(let t=0;t<e.children.length;t++){const o=e.children[t].shadowRoot,s=o.querySelector(".header");s&&o.removeChild(s)}this.#s?.states?.has("--mobile")&&this.#s.states.delete("--mobile"),this.requestUpdate()}}u([o({type:Boolean,reflect:!0})],b.prototype,"banded",void 0),u([o({type:Boolean,reflect:!0,attribute:"no-results"})],b.prototype,"noResults",void 0),u([s({selector:"zui-table-row"})],b.prototype,"_rows",void 0),u([s({selector:"zui-table-footer"})],b.prototype,"_footer",void 0),window.customElements.define("zui-table",b);const p=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:first-of-type){margin-left:1.25rem}}{.action ::slotted(zui-button:first-of-type){margin-left:.625rem}}.action ::slotted(zui-button:not(:first-of-type)){margin-top:.625rem}{.action ::slotted(zui-button:not(:first-of-type)){margin-top:0;margin-left:.625rem}}`;var g=function(t,e,o,s){var i,r=arguments.length,n=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,o):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,o,s);else for(var a=t.length-1;a>=0;a--)(i=t[a])&&(n=(r<3?i(n):r>3?i(e,o,n):i(e,o))||n);return r>3&&n&&Object.defineProperty(e,o,n),n};class f extends h{#i=window.matchMedia(`only screen and (max-width: ${i.xsmall})`);#h=t=>{t.matches?this.#m():this.#u()};static get styles(){return[super.styles,p]}connectedCallback(){super.connectedCallback(),this.#i.addEventListener?this.#i.addEventListener("change",this.#h):this.#i.addListener(this.#h)}disconnectedCallback(){super.disconnectedCallback(),this.#i.addEventListener?this.#i.removeEventListener("change",this.#h):this.#i.addListener&&this.#i.removeListener(this.#h)}firstUpdated(){this.#i.matches?this.#m():this.#u(),this.#b(),this.#p()}render(){return r`<div class="topbar"><div class="content"><slot></slot></div><div class="counter"><slot name="counter" ="${this.#p}"></slot></div><div class="action"><slot name="action" ="${this.#g}"></slot></div></div>`}#g(){this.#b(),this.#i.matches?this.#m():this.#u()}#m(){if(this._actionButtons.length>0)for(const t of this._actionButtons)t.hasAttribute("block")||t.setAttribute("block","");this.requestUpdate()}#u(){if(this._actionButtons.length>0)for(const t of this._actionButtons)t.hasAttribute("block")&&t.removeAttribute("block");this.requestUpdate()}#p(){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()}#b(){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()}}g([s({slot:"action"})],f.prototype,"_actionSlottedElements",void 0),g([n({slot:"counter"})],f.prototype,"_counterSlottedNodes",void 0),g([s({selector:"zui-button",slot:"action"})],f.prototype,"_actionButtons",void 0),window.customElements.define("zui-table-topbar",f);const v=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 h{static get styles(){return[super.styles,v]}render(){return r`<div class="footer"><slot></slot></div>`}});const y=e`:host{contain:none}:host(:last-of-type:not([summary])) div,:host([summary]) div{margin-bottom:0}:host([header]){display:none;background-color:#fff;border-bottom:1px solid var(--zui-gray-200)}{:host([header]){display:block}}:host([header]) div{box-shadow:none}:host([header]) ::slotted(zui-table-cell){--zui-table-cell-padding:0.53125rem 1.25rem;font-weight:600;user-select:none}div{display:grid;grid-template-columns:auto;margin-bottom:0;padding:.625rem 0;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}{div{grid-template-columns:var(--zui-table-columns-template,repeat(auto-fit,minmax(0,1fr)));padding:0;background-color:rgba(0,0,0,0);box-shadow:none}}:host([summary]){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)}`;var w=function(t,e,o,s){var i,r=arguments.length,n=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,o):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,o,s);else for(var a=t.length-1;a>=0;a--)(i=t[a])&&(n=(r<3?i(n):r>3?i(e,o,n):i(e,o))||n);return r>3&&n&&Object.defineProperty(e,o,n),n};class k extends h{constructor(){super(...arguments),this.header=!1,this.summary=!1}#r;static get styles(){return[super.styles,y]}connectedCallback(){super.connectedCallback(),this.setAttribute("role","row")}firstUpdated(){if(this.header){const t=this._slottedCells?.find((t=>t?.hasAttribute("sort")));this._slottedCells.forEach((e=>{e.sort&&e!==t&&(e.sort=null)}))}}updated(t){super.updated(t),t.has("header")&&(this.#f(),this.header&&this._state?.channel.addEventListener("sort",(t=>this.#v(t))))}render(){return r`<div><slot ="${this.#f()}"></slot></div>`}#v(t){this.#r||(this.#r=!0,this._slottedCells?.forEach((e=>{e!==t.detail.cell&&(e.sort=null)})),setTimeout((()=>{this.#r=!1}),0))}#f(){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})))}}w([o({type:Boolean,reflect:!0})],k.prototype,"header",void 0),w([o({type:Boolean,reflect:!0})],k.prototype,"summary",void 0),w([s({selector:"zui-table-cell"})],k.prototype,"_slottedCells",void 0),window.customElements.define("zui-table-row",k);const z=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([action]) div{display:flex}{:host([action]) div{--zui-table-cell-padding:0.375rem 1.25rem;align-items:center}}:host([action]) ::slotted(zui-button:not(:first-of-type)){margin-left:.625rem}: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)}div{padding:var(--zui-table-cell-padding,.3125rem .9375rem)}{div{padding:var(--zui-table-cell-padding,.8125rem 1.25rem)}}div.header{float:left;width:33.333%;font-weight:600}div.header+div{padding:var(--zui-table-cell-padding,.3125rem .9375rem .3125rem 0)}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 B=function(t,e,o,s){var i,r=arguments.length,n=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,o):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,o,s);else for(var a=t.length-1;a>=0;a--)(i=t[a])&&(n=(r<3?i(n):r>3?i(e,o,n):i(e,o))||n);return r>3&&n&&Object.defineProperty(e,o,n),n};class E extends h{constructor(){super(...arguments),this.action=!1,this._isAllowedSort=!1,this.#y=null,this.#w=!1}get sort(){return this.#y}set sort(t){if(["ascending","descending",null].includes(t)){const e=this.#y;this.#y=t,this.requestUpdate("sort",e),this._state?.channel.dispatchEvent(new CustomEvent("sort",{detail:{sort:t,cell:this}}))}}get sortable(){return this._isAllowedSort&&this.#w}set sortable(t){const e=this.#w;this.#w=t,this.requestUpdate("sortable",e)}#y;#w;static get styles(){return[super.styles,z]}render(){this.sortable&&import("../internals/_a9530e03.js");const t={"is-selectable":this.sortable};return r`<div ="${this.#k}" class="${l(t)}"><slot></slot>${this.sortable?r`<zui-icon icon="zui-sort"></zui-icon>`:d}</div>`}click(){super.click(),this.#k()}#k(){if(this.sortable)switch(this.sort){case"ascending":this.sort="descending";break;case"descending":this.sort=null;break;default:this.sort="ascending"}}}B([o({type:Boolean,reflect:!0})],E.prototype,"action",void 0),B([o({type:String,reflect:!0})],E.prototype,"sort",null),B([o({type:Boolean,reflect:!0})],E.prototype,"sortable",null),B([a()],E.prototype,"_isAllowedSort",void 0),window.customElements.define("zui-table-cell",E);