@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) • 14.4 kB
JavaScript
import{Z as t,i as e,n as o,o as i,k as s,u as n,R as r,D as a}from"../internals/_9c1b2703.js";import{s as l,n as d,r as c}from"../internals/_9ff69d09.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{contain:none;display:block}:host .no-results{display:none}: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{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]) zui-spinner{position:absolute;top:50%;left:50%}:host([loading]) .table{min-height:var(--zui-table-loading-min-height,20rem)}::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{position:relative;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 b=function(t,e,o,i){var s,n=arguments.length,r=n<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,o,i);else for(var a=t.length-1;a>=0;a--)(s=t[a])&&(r=(n<3?s(r):n>3?s(e,o,r):s(e,o))||r);return n>3&&r&&Object.defineProperty(e,o,r),r};class p extends u{#o;#i;#s;#n;static get styles(){return[super.styles,m]}constructor(){super(),this.banded=!1,this.noResults=!1,this.loading=!1,this.#i=window.matchMedia(`only screen and (max-width: ${l.xsmall})`),this.#s=!1,this.#n=t=>{t.matches?this.#r():this.#a()},this.#o=this.attachInternals?.(),u._globalChannel.addEventListener("connected",(t=>{this.contains(t.detail.element)&&this._associateElement(t.detail.element)})),this._state.channel.addEventListener("sort",(t=>{this.#s||(this.#s=!0,this.dispatchEvent(new CustomEvent("sort",{detail:t.detail,bubbles:!0})),setTimeout((()=>this.#s=!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.#l(),this.#i.matches?this.#r():this.#a()}render(){return s`<div class="table"><slot ="${this.#i.matches?this.#r:this.#a}"></slot>${this.loading?s`<zui-spinner active="" part="loader"></zui-spinner>`:s``} ${this.#d()}</div><div><slot name="footer"></slot></div>`}#d(){return s`<div class="no-results"><slot name="no-results-message"></slot></div>`}#l(){this._footer?.map((t=>t.setAttribute("slot","footer")))}#r(){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 i=o.children[e];if(!i.shadowRoot.querySelector(".header")){const o=document.createElement("div");o.classList.add("header");const s=t[0].children[e].textContent;o.innerText=s,i.shadowRoot.prepend(o)}}n(this.#o,"add","mobile"),this.requestUpdate()}#a(){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,i=o.querySelector(".header");i&&o.removeChild(i)}n(this.#o,"delete","mobile"),this.requestUpdate()}}b([o({type:Boolean,reflect:!0})],p.prototype,"banded",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([i({selector:"zui-table-row"})],p.prototype,"_rows",void 0),b([i({selector:"zui-table-footer"})],p.prototype,"_footer",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,n=arguments.length,r=n<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,o,i);else for(var a=t.length-1;a>=0;a--)(s=t[a])&&(r=(n<3?s(r):n>3?s(e,o,r):s(e,o))||r);return n>3&&r&&Object.defineProperty(e,o,r),r};class v extends u{#i=window.matchMedia(`only screen and (max-width: ${l.xsmall})`);#c=t=>{t.matches?this.#h():this.#u()};static get styles(){return[super.styles,g]}connectedCallback(){super.connectedCallback(),this.#i.addEventListener?this.#i.addEventListener("change",this.#c):this.#i.addListener(this.#c)}disconnectedCallback(){super.disconnectedCallback(),this.#i.addEventListener?this.#i.removeEventListener("change",this.#c):this.#i.addListener&&this.#i.removeListener(this.#c)}firstUpdated(){this.#i.matches?this.#h():this.#u(),this.#m(),this.#b()}render(){return s`<div class="topbar"><div class="content"><slot></slot></div><div class="counter"><slot name="counter" ="${this.#b}"></slot></div><div class="action"><slot name="action" ="${this.#p}"></slot></div></div>`}#p(){this.#m(),this.#i.matches?this.#h():this.#u()}#h(){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()}#b(){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()}#m(){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([i({slot:"action"})],v.prototype,"_actionSlottedElements",void 0),f([d({slot:"counter"})],v.prototype,"_counterSlottedNodes",void 0),f([i({selector:"zui-button",slot:"action"})],v.prototype,"_actionButtons",void 0),window.customElements.define("zui-table-topbar",v);const y=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,y]}render(){return s`<div class="footer"><slot></slot></div>`}});const w=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 k=function(t,e,o,i){var s,n=arguments.length,r=n<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,o,i);else for(var a=t.length-1;a>=0;a--)(s=t[a])&&(r=(n<3?s(r):n>3?s(e,o,r):s(e,o))||r);return n>3&&r&&Object.defineProperty(e,o,r),r};class z extends u{constructor(){super(...arguments),this.header=!1,this.summary=!1}#s;static get styles(){return[super.styles,w]}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.#g(),this.header&&this._state?.channel.addEventListener("sort",(t=>this.#f(t))))}render(){return s`<div><slot ="${this.#g()}"></slot></div>`}#f(t){this.#s||(this.#s=!0,this._slottedCells?.forEach((e=>{e!==t.detail.cell&&(e.sort=null)})),setTimeout((()=>{this.#s=!1}),0))}#g(){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})))}}k([o({type:Boolean,reflect:!0})],z.prototype,"header",void 0),k([o({type:Boolean,reflect:!0})],z.prototype,"summary",void 0),k([i({selector:"zui-table-cell"})],z.prototype,"_slottedCells",void 0),window.customElements.define("zui-table-row",z);const B=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 E=function(t,e,o,i){var s,n=arguments.length,r=n<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,o,i);else for(var a=t.length-1;a>=0;a--)(s=t[a])&&(r=(n<3?s(r):n>3?s(e,o,r):s(e,o))||r);return n>3&&r&&Object.defineProperty(e,o,r),r};class x extends u{constructor(){super(...arguments),this.action=!1,this._isAllowedSort=!1,this.#v=null,this.#y=!1}get sort(){return this.#v}set sort(t){if(["ascending","descending",null].includes(t)){const e=this.#v;this.#v=t,this.requestUpdate("sort",e),this._state?.channel.dispatchEvent(new CustomEvent("sort",{detail:{sort:t,cell:this}}))}}get sortable(){return this._isAllowedSort&&this.#y}set sortable(t){const e=this.#y;this.#y=t,this.requestUpdate("sortable",e)}#v;#y;static get styles(){return[super.styles,B]}render(){this.sortable&&import("../internals/_b8a41158.js");const t={"is-selectable":this.sortable};return s`<div ="${this.#w}" class="${r(t)}"><slot></slot>${this.sortable?s`<zui-icon icon="zui-sort"></zui-icon>`:a}</div>`}click(){super.click(),this.#w()}#w(){if(this.sortable)switch(this.sort){case"ascending":this.sort="descending";break;case"descending":this.sort=null;break;default:this.sort="ascending"}}}E([o({type:Boolean,reflect:!0})],x.prototype,"action",void 0),E([o({type:String,reflect:!0})],x.prototype,"sort",null),E([o({type:Boolean,reflect:!0})],x.prototype,"sortable",null),E([c()],x.prototype,"_isAllowedSort",void 0),window.customElements.define("zui-table-cell",x);