npm - @zanichelli/albe-web-components - Versions diffs - 17.0.4 → 17.0.5-RC1 - Mend

@zanichelli/albe-web-components 17.0.4 → 17.0.5-RC1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1434) hide show

package/dist/components/z-toggle-button.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './index9.js';
-const stylesCss = "button{display:flex;height:36px;align-items:center;padding-right:calc(var(--space-unit) * 2);padding-left:0;border:var(--border-size-medium) solid;border-color:transparent;background-color:var(--color-surface01);border-radius:var(--border-radius);box-shadow:0 0 4px 0 rgb(0 0 0 / 20%);color:var(--color-primary01);cursor:pointer;fill:var(--color-primary01);font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);outline:none;text-transform:uppercase}button::-moz-focus-inner{border:0}button:hover{color:var(--color-hover-primary);fill:var(--color-hover-primary)}button:focus{box-shadow:var(--shadow-focus-primary)}button:active{border-color:var(--color-pressed-primary);box-shadow:var(--shadow-2);color:var(--color-pressed-primary);fill:var(--color-pressed-primary)}button:disabled{color:var(--color-disabled03);fill:var(--color-disabled03)}z-icon{display:inline-block;margin:0 var(--space-unit) 0 calc(var(--space-unit) * 2);transform:rotate(360deg);transition:all 200ms linear}button.isopen{top:-20px}button.avoid-clicks{pointer-events:none}";
+const stylesCss = "button{display:-ms-flexbox;display:flex;height:36px;-ms-flex-align:center;align-items:center;padding-right:calc(var(--space-unit) * 2);padding-left:0;border:var(--border-size-medium) solid;border-color:transparent;background-color:var(--color-surface01);border-radius:var(--border-radius);-webkit-box-shadow:0 0 4px 0 rgb(0 0 0 / 20%);box-shadow:0 0 4px 0 rgb(0 0 0 / 20%);color:var(--color-primary01);cursor:pointer;fill:var(--color-primary01);font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);outline:none;text-transform:uppercase}button::-moz-focus-inner{border:0}button:hover{color:var(--color-hover-primary);fill:var(--color-hover-primary)}button:focus{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary)}button:active{border-color:var(--color-pressed-primary);-webkit-box-shadow:var(--shadow-2);box-shadow:var(--shadow-2);color:var(--color-pressed-primary);fill:var(--color-pressed-primary)}button:disabled{color:var(--color-disabled03);fill:var(--color-disabled03)}z-icon{display:inline-block;margin:0 var(--space-unit) 0 calc(var(--space-unit) * 2);-webkit-transform:rotate(360deg);transform:rotate(360deg);-webkit-transition:all 200ms linear;transition:all 200ms linear}button.isopen{top:-20px}button.avoid-clicks{pointer-events:none}";
 const ZToggleButtonStyle0 = stylesCss;
 const ZToggleButton$1 = /*@__PURE__*/ proxyCustomElement(class ZToggleButton extends HTMLElement {

package/dist/components/z-toggle-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-toggle-button.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,~~4iCAA4iC~~,CAAC;~~AAC/jC~~,4BAAe,SAAS;;MCMXA,eAAa;;;;;;;0BAOD,KAAK;;sBAQT,KAAK;yBAIZ,EAAE;;IAMN,eAAe;QACrB,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,OAAO;SACR;QAED,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACpC;IAED,MAAM;QACJ,QACE,+DACE,QAAQ,EAAE,IAAI,CAAC,UAAU,GAAG,IAAI,GAAG,GAAG,EACtC,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,MAAM;gBACrB,cAAc,EAAE,IAAI,CAAC,UAAU;aAChC,EACD,QAAQ,EAAE,IAAI,CAAC,UAAU,mBACV,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,gBACjC,IAAI,CAAC,SAAS,EAC1B,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,EAAE,IAErC,+DACE,IAAI,EAAE,IAAI,CAAC,MAAM,GAAG,cAAc,GAAG,YAAY,EACjD,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,EACD,IAAI,CAAC,KAAK,CACJ,EACT;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZToggleButton"],"sources":["src/components/z-toggle-button/styles.css?tag=z-toggle-button&encapsulation=shadow","src/components/z-toggle-button/index.tsx"],"sourcesContent":["button {\n display: flex;\n height: 36px;\n align-items: center;\n padding-right: calc(var(--space-unit) * 2);\n padding-left: 0;\n border: var(--border-size-medium) solid;\n border-color: transparent;\n background-color: var(--color-surface01);\n border-radius: var(--border-radius);\n box-shadow: 0 0 4px 0 rgb(0 0 0 / 20%);\n color: var(--color-primary01);\n cursor: pointer;\n fill: var(--color-primary01);\n font-family: var(--font-family-sans);\n font-size: 14px;\n font-weight: var(--font-sb);\n outline: none;\n text-transform: uppercase;\n}\n\nbutton::-moz-focus-inner {\n border: 0;\n}\n\nbutton:hover {\n color: var(--color-hover-primary);\n fill: var(--color-hover-primary);\n}\n\nbutton:focus {\n box-shadow: var(--shadow-focus-primary);\n}\n\nbutton:active {\n border-color: var(--color-pressed-primary);\n box-shadow: var(--shadow-2);\n color: var(--color-pressed-primary);\n fill: var(--color-pressed-primary);\n}\n\nbutton:disabled {\n color: var(--color-disabled03);\n fill: var(--color-disabled03);\n}\n\nz-icon {\n display: inline-block;\n margin: 0 var(--space-unit) 0 calc(var(--space-unit) * 2);\n transform: rotate(360deg);\n transition: all 200ms linear;\n}\n\nbutton.isopen {\n top: -20px;\n}\n\nbutton.avoid-clicks {\n pointer-events: none;\n}\n","import {Component, Event, EventEmitter, Prop, h} from \"@stencil/core\";\n\n@Component({\n tag: \"z-toggle-button\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZToggleButton {\n /** label text /\n @Prop()\n label: string;\n\n /* disabled status flag (optional) /\n @Prop()\n isdisabled?: boolean = false;\n\n /* avoidclick status flag /\n @Prop()\n avoidclick: boolean;\n\n /* open by default (optional) /\n @Prop({mutable: true})\n opened?: boolean = false;\n\n /* aria-label for the button /\n @Prop()\n ariaLabel = \"\";\n\n /* emitted on toggle button click, returns isOpen */\n @Event()\n toggleClick: EventEmitter;\n\n private emitToggleClick(): void {\n if (this.isdisabled) {\n return;\n }\n\n this.opened = !this.opened;\n this.toggleClick.emit(this.opened);\n }\n\n render(): HTMLButtonElement {\n return (\n <button\n tabindex={this.avoidclick ? \"-1\" : \"0\"}\n class={{\n \"isopen\": this.opened,\n \"avoid-clicks\": this.avoidclick,\n }}\n disabled={this.isdisabled}\n aria-expanded={this.opened ? \"true\" : \"false\"}\n aria-label={this.ariaLabel}\n onClick={() => this.emitToggleClick()}\n >\n <z-icon\n name={this.opened ? \"chevron-down\" : \"chevron-up\"}\n width={16}\n height={16}\n />\n {this.label}\n </button>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-toggle-button.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,2xCAA2xC,CAAC;AAC9yC,4BAAe,SAAS;;MCMXA,eAAa;;;;;;;0BAOD,KAAK;;sBAQT,KAAK;yBAIZ,EAAE;;IAMN,eAAe;QACrB,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,OAAO;SACR;QAED,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACpC;IAED,MAAM;QACJ,QACE,+DACE,QAAQ,EAAE,IAAI,CAAC,UAAU,GAAG,IAAI,GAAG,GAAG,EACtC,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,MAAM;gBACrB,cAAc,EAAE,IAAI,CAAC,UAAU;aAChC,EACD,QAAQ,EAAE,IAAI,CAAC,UAAU,mBACV,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,gBACjC,IAAI,CAAC,SAAS,EAC1B,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,EAAE,IAErC,+DACE,IAAI,EAAE,IAAI,CAAC,MAAM,GAAG,cAAc,GAAG,YAAY,EACjD,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,EACD,IAAI,CAAC,KAAK,CACJ,EACT;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZToggleButton"],"sources":["src/components/z-toggle-button/styles.css?tag=z-toggle-button&encapsulation=shadow","src/components/z-toggle-button/index.tsx"],"sourcesContent":["button {\n display: flex;\n height: 36px;\n align-items: center;\n padding-right: calc(var(--space-unit) * 2);\n padding-left: 0;\n border: var(--border-size-medium) solid;\n border-color: transparent;\n background-color: var(--color-surface01);\n border-radius: var(--border-radius);\n box-shadow: 0 0 4px 0 rgb(0 0 0 / 20%);\n color: var(--color-primary01);\n cursor: pointer;\n fill: var(--color-primary01);\n font-family: var(--font-family-sans);\n font-size: 14px;\n font-weight: var(--font-sb);\n outline: none;\n text-transform: uppercase;\n}\n\nbutton::-moz-focus-inner {\n border: 0;\n}\n\nbutton:hover {\n color: var(--color-hover-primary);\n fill: var(--color-hover-primary);\n}\n\nbutton:focus {\n box-shadow: var(--shadow-focus-primary);\n}\n\nbutton:active {\n border-color: var(--color-pressed-primary);\n box-shadow: var(--shadow-2);\n color: var(--color-pressed-primary);\n fill: var(--color-pressed-primary);\n}\n\nbutton:disabled {\n color: var(--color-disabled03);\n fill: var(--color-disabled03);\n}\n\nz-icon {\n display: inline-block;\n margin: 0 var(--space-unit) 0 calc(var(--space-unit) * 2);\n transform: rotate(360deg);\n transition: all 200ms linear;\n}\n\nbutton.isopen {\n top: -20px;\n}\n\nbutton.avoid-clicks {\n pointer-events: none;\n}\n","import {Component, Event, EventEmitter, Prop, h} from \"@stencil/core\";\n\n@Component({\n tag: \"z-toggle-button\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZToggleButton {\n /** label text /\n @Prop()\n label: string;\n\n /* disabled status flag (optional) /\n @Prop()\n isdisabled?: boolean = false;\n\n /* avoidclick status flag /\n @Prop()\n avoidclick: boolean;\n\n /* open by default (optional) /\n @Prop({mutable: true})\n opened?: boolean = false;\n\n /* aria-label for the button /\n @Prop()\n ariaLabel = \"\";\n\n /* emitted on toggle button click, returns isOpen */\n @Event()\n toggleClick: EventEmitter;\n\n private emitToggleClick(): void {\n if (this.isdisabled) {\n return;\n }\n\n this.opened = !this.opened;\n this.toggleClick.emit(this.opened);\n }\n\n render(): HTMLButtonElement {\n return (\n <button\n tabindex={this.avoidclick ? \"-1\" : \"0\"}\n class={{\n \"isopen\": this.opened,\n \"avoid-clicks\": this.avoidclick,\n }}\n disabled={this.isdisabled}\n aria-expanded={this.opened ? \"true\" : \"false\"}\n aria-label={this.ariaLabel}\n onClick={() => this.emitToggleClick()}\n >\n <z-icon\n name={this.opened ? \"chevron-down\" : \"chevron-up\"}\n width={16}\n height={16}\n />\n {this.label}\n </button>\n );\n }\n}\n"],"version":3}

package/dist/components/z-toggle-switch.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { k as LabelPosition } from './index2.js';
 import { r as randomId } from './utils.js';
 import { d as defineCustomElement$2 } from './index9.js';
-const stylesCss = ".sc-z-toggle-switch-h{position:relative;display:inline-flex;font-family:var(--font-family-sans);font-weight:var(--font-rg)}label.sc-z-toggle-switch{display:flex;flex-direction:row;align-items:center;cursor:pointer}label.disabled.sc-z-toggle-switch{cursor:default}label.right.sc-z-toggle-switch{flex-direction:row-reverse}label.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{color:var(--color-default-text);letter-spacing:0}label.left.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{margin-right:var(--space-unit)}label.right.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{margin-left:var(--space-unit)}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch{position:relative;top:1px;left:1px;display:flex;width:calc(var(--space-unit) * 4);height:18px;align-items:center;background-color:var(--gray500);border-radius:var(--space-unit);color:var(--gray500);cursor:pointer}label.sc-z-toggle-switch>span.container.disabled.sc-z-toggle-switch,label.sc-z-toggle-switch>span.container.checked.disabled.sc-z-toggle-switch{background-color:var(--color-disabled01);cursor:default}label.sc-z-toggle-switch>span.container.checked.disabled.sc-z-toggle-switch>span.circle.sc-z-toggle-switch>z-icon.sc-z-toggle-switch{fill:var(--color-disabled01)}label.sc-z-toggle-switch>span.container.checked.sc-z-toggle-switch{background-color:var(--color-primary01);fill:var(--color-primary01)}input.sc-z-toggle-switch:focus:focus-visible+label.sc-z-toggle-switch>span.container.sc-z-toggle-switch:not(.disabled){box-shadow:var(--shadow-focus-primary);outline:none}input.sc-z-toggle-switch:focus:focus-visible+label.sc-z-toggle-switch>span.container.disabled.sc-z-toggle-switch{outline:none}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch:not(.disabled):hover{background-color:var(--color-hover-primary);fill:var(--color-hover-primary)}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch>span.circle.sc-z-toggle-switch{position:absolute;top:1px;left:1px;display:flex;width:calc(var(--space-unit) * 2);height:calc(var(--space-unit) * 2);align-items:center;justify-content:center;margin:0;background-color:var(--color-white);border-radius:7px;box-shadow:var(--shadow-1);transition:transform 0.3s ease}label.sc-z-toggle-switch>span.container.checked.sc-z-toggle-switch>span.circle.sc-z-toggle-switch{transform:translateX(calc(100% - 2px))}input[type=\"checkbox\"].sc-z-toggle-switch{position:absolute;z-index:-1;opacity:0;pointer-events:none}";
+const stylesCss = ".sc-z-toggle-switch-h{position:relative;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--font-family-sans);font-weight:var(--font-rg)}label.sc-z-toggle-switch{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;cursor:pointer}label.disabled.sc-z-toggle-switch{cursor:default}label.right.sc-z-toggle-switch{-ms-flex-direction:row-reverse;flex-direction:row-reverse}label.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{color:var(--color-default-text);letter-spacing:0}label.left.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{margin-right:var(--space-unit)}label.right.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{margin-left:var(--space-unit)}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch{position:relative;top:1px;left:1px;display:-ms-flexbox;display:flex;width:calc(var(--space-unit) * 4);height:18px;-ms-flex-align:center;align-items:center;background-color:var(--gray500);border-radius:var(--space-unit);color:var(--gray500);cursor:pointer}label.sc-z-toggle-switch>span.container.disabled.sc-z-toggle-switch,label.sc-z-toggle-switch>span.container.checked.disabled.sc-z-toggle-switch{background-color:var(--color-disabled01);cursor:default}label.sc-z-toggle-switch>span.container.checked.disabled.sc-z-toggle-switch>span.circle.sc-z-toggle-switch>z-icon.sc-z-toggle-switch{fill:var(--color-disabled01)}label.sc-z-toggle-switch>span.container.checked.sc-z-toggle-switch{background-color:var(--color-primary01);fill:var(--color-primary01)}input.sc-z-toggle-switch:focus:focus-visible+label.sc-z-toggle-switch>span.container.sc-z-toggle-switch:not(.disabled){-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary);outline:none}input.sc-z-toggle-switch:focus:focus-visible+label.sc-z-toggle-switch>span.container.disabled.sc-z-toggle-switch{outline:none}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch:not(.disabled):hover{background-color:var(--color-hover-primary);fill:var(--color-hover-primary)}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch>span.circle.sc-z-toggle-switch{position:absolute;top:1px;left:1px;display:-ms-flexbox;display:flex;width:calc(var(--space-unit) * 2);height:calc(var(--space-unit) * 2);-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;margin:0;background-color:var(--color-white);border-radius:7px;-webkit-box-shadow:var(--shadow-1);box-shadow:var(--shadow-1);-webkit-transition:-webkit-transform 0.3s ease;transition:-webkit-transform 0.3s ease;transition:transform 0.3s ease;transition:transform 0.3s ease, -webkit-transform 0.3s ease}label.sc-z-toggle-switch>span.container.checked.sc-z-toggle-switch>span.circle.sc-z-toggle-switch{-webkit-transform:translateX(calc(100% - 2px));transform:translateX(calc(100% - 2px))}input[type=\"checkbox\"].sc-z-toggle-switch{position:absolute;z-index:-1;opacity:0;pointer-events:none}";
 const ZToggleSwitchStyle0 = stylesCss;
 const ZToggleSwitch$1 = /*@__PURE__*/ proxyCustomElement(class ZToggleSwitch extends HTMLElement {

package/dist/components/z-toggle-switch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-toggle-switch.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,~~25EAA25E~~,CAAC;~~AAC96E~~,4BAAe,SAAS;;MCSXA,eAAa;;;;;wBAGH,KAAK;6BAIT,aAAa,CAAC,IAAI;uBAIf,KAAK;sBAIhB,oBAAoB,QAAQ,EAAE,EAAE;;IAMjC,eAAe;QACrB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;YACpB,EAAE,EAAE,IAAI,CAAC,MAAM;YACf,OAAO,EAAE,IAAI,CAAC,OAAO;SACtB,CAAC,CAAC;KACJ;IAEO,WAAW,CAAC,EAAE;QACpB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO;SACR;QAED,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC;QACjC,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DACE,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GACrC,EACF,8DACE,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,KAAK,EAAE;gBACL,CAAC,IAAI,CAAC,aAAa,GAAG,IAAI;gBAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,IAED,+DACE,8DAAQ,CACH,EACP,6DACE,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,OAAO,EAAE,IAAI,CAAC,OAAO;aACtB,IAED,6DAAM,KAAK,EAAC,QAAQ,IACjB,IAAI,CAAC,OAAO,KACX,+DACE,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,IAAI,EAAC,WAAW,GACR,CACX,CACI,CACF,CACD,CACH,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZToggleSwitch"],"sources":["src/components/z-toggle-switch/styles.css?tag=z-toggle-switch&encapsulation=scoped","src/components/z-toggle-switch/index.tsx"],"sourcesContent":[":host {\n position: relative;\n display: inline-flex;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\nlabel {\n display: flex;\n flex-direction: row;\n align-items: center;\n cursor: pointer;\n}\n\nlabel.disabled {\n cursor: default;\n}\n\nlabel.right {\n flex-direction: row-reverse;\n}\n\nlabel > span:first-child {\n color: var(--color-default-text);\n letter-spacing: 0;\n}\n\nlabel.left > span:first-child {\n margin-right: var(--space-unit);\n}\n\nlabel.right > span:first-child {\n margin-left: var(--space-unit);\n}\n\nlabel > span.container {\n position: relative;\n top: 1px;\n left: 1px;\n display: flex;\n width: calc(var(--space-unit) * 4);\n height: 18px;\n align-items: center;\n background-color: var(--gray500);\n border-radius: var(--space-unit);\n color: var(--gray500);\n cursor: pointer;\n}\n\nlabel > span.container.disabled,\nlabel > span.container.checked.disabled {\n background-color: var(--color-disabled01);\n cursor: default;\n}\n\nlabel > span.container.checked.disabled > span.circle > z-icon {\n fill: var(--color-disabled01);\n}\n\nlabel > span.container.checked {\n background-color: var(--color-primary01);\n fill: var(--color-primary01);\n}\n\ninput:focus:focus-visible + label > span.container:not(.disabled) {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\ninput:focus:focus-visible + label > span.container.disabled {\n outline: none;\n}\n\nlabel > span.container:not(.disabled):hover {\n background-color: var(--color-hover-primary);\n fill: var(--color-hover-primary);\n}\n\nlabel > span.container > span.circle {\n position: absolute;\n top: 1px;\n left: 1px;\n display: flex;\n width: calc(var(--space-unit) * 2);\n height: calc(var(--space-unit) * 2);\n align-items: center;\n justify-content: center;\n margin: 0;\n background-color: var(--color-white);\n border-radius: 7px;\n box-shadow: var(--shadow-1);\n transition: transform 0.3s ease;\n}\n\nlabel > span.container.checked > span.circle {\n transform: translateX(calc(100% - 2px));\n}\n\ninput[type=\"checkbox\"] {\n position: absolute;\n z-index: -1;\n opacity: 0;\n pointer-events: none;\n}\n","import {Component, Event, EventEmitter, Host, Prop, h} from \"@stencil/core\";\nimport {LabelPosition} from \"../../beans\";\nimport {randomId} from \"../../utils/utils\";\n\n@Component({\n tag: \"z-toggle-switch\",\n styleUrl: \"styles.css\",\n shadow: false,\n scoped: true,\n})\nexport class ZToggleSwitch {\n /** Disabled flag /\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /* Label position /\n @Prop({reflect: true})\n labelPosition? = LabelPosition.LEFT;\n\n /* Checked state /\n @Prop({mutable: true})\n checked?: boolean = false;\n\n /* HTML id attribute to set to the internal checkbox /\n @Prop()\n htmlid = `toggle-switch-id-${randomId()}`;\n\n /* Toggle click event */\n @Event()\n toggleClick: EventEmitter;\n\n private emitToggleClick(): void {\n this.toggleClick.emit({\n id: this.htmlid,\n checked: this.checked,\n });\n }\n\n private handleClick(ev): void {\n if (this.disabled) {\n return;\n }\n\n this.checked = ev.target.checked;\n this.emitToggleClick();\n }\n\n render(): HTMLZToggleSwitchElement {\n return (\n <Host>\n <input\n id={this.htmlid}\n type=\"checkbox\"\n checked={this.checked}\n disabled={this.disabled}\n onChange={this.handleClick.bind(this)}\n />\n <label\n htmlFor={this.htmlid}\n class={{\n [this.labelPosition]: true,\n disabled: this.disabled,\n }}\n >\n <span>\n <slot />\n </span>\n <span\n class={{\n container: true,\n disabled: this.disabled,\n checked: this.checked,\n }}\n >\n <span class=\"circle\">\n {this.checked && (\n <z-icon\n width={12}\n height={12}\n name=\"checkmark\"\n ></z-icon>\n )}\n </span>\n </span>\n </label>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-toggle-switch.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,k5FAAk5F,CAAC;AACr6F,4BAAe,SAAS;;MCSXA,eAAa;;;;;wBAGH,KAAK;6BAIT,aAAa,CAAC,IAAI;uBAIf,KAAK;sBAIhB,oBAAoB,QAAQ,EAAE,EAAE;;IAMjC,eAAe;QACrB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;YACpB,EAAE,EAAE,IAAI,CAAC,MAAM;YACf,OAAO,EAAE,IAAI,CAAC,OAAO;SACtB,CAAC,CAAC;KACJ;IAEO,WAAW,CAAC,EAAE;QACpB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO;SACR;QAED,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC;QACjC,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DACE,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GACrC,EACF,8DACE,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,KAAK,EAAE;gBACL,CAAC,IAAI,CAAC,aAAa,GAAG,IAAI;gBAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,IAED,+DACE,8DAAQ,CACH,EACP,6DACE,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,OAAO,EAAE,IAAI,CAAC,OAAO;aACtB,IAED,6DAAM,KAAK,EAAC,QAAQ,IACjB,IAAI,CAAC,OAAO,KACX,+DACE,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,IAAI,EAAC,WAAW,GACR,CACX,CACI,CACF,CACD,CACH,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZToggleSwitch"],"sources":["src/components/z-toggle-switch/styles.css?tag=z-toggle-switch&encapsulation=scoped","src/components/z-toggle-switch/index.tsx"],"sourcesContent":[":host {\n position: relative;\n display: inline-flex;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\nlabel {\n display: flex;\n flex-direction: row;\n align-items: center;\n cursor: pointer;\n}\n\nlabel.disabled {\n cursor: default;\n}\n\nlabel.right {\n flex-direction: row-reverse;\n}\n\nlabel > span:first-child {\n color: var(--color-default-text);\n letter-spacing: 0;\n}\n\nlabel.left > span:first-child {\n margin-right: var(--space-unit);\n}\n\nlabel.right > span:first-child {\n margin-left: var(--space-unit);\n}\n\nlabel > span.container {\n position: relative;\n top: 1px;\n left: 1px;\n display: flex;\n width: calc(var(--space-unit) * 4);\n height: 18px;\n align-items: center;\n background-color: var(--gray500);\n border-radius: var(--space-unit);\n color: var(--gray500);\n cursor: pointer;\n}\n\nlabel > span.container.disabled,\nlabel > span.container.checked.disabled {\n background-color: var(--color-disabled01);\n cursor: default;\n}\n\nlabel > span.container.checked.disabled > span.circle > z-icon {\n fill: var(--color-disabled01);\n}\n\nlabel > span.container.checked {\n background-color: var(--color-primary01);\n fill: var(--color-primary01);\n}\n\ninput:focus:focus-visible + label > span.container:not(.disabled) {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\ninput:focus:focus-visible + label > span.container.disabled {\n outline: none;\n}\n\nlabel > span.container:not(.disabled):hover {\n background-color: var(--color-hover-primary);\n fill: var(--color-hover-primary);\n}\n\nlabel > span.container > span.circle {\n position: absolute;\n top: 1px;\n left: 1px;\n display: flex;\n width: calc(var(--space-unit) * 2);\n height: calc(var(--space-unit) * 2);\n align-items: center;\n justify-content: center;\n margin: 0;\n background-color: var(--color-white);\n border-radius: 7px;\n box-shadow: var(--shadow-1);\n transition: transform 0.3s ease;\n}\n\nlabel > span.container.checked > span.circle {\n transform: translateX(calc(100% - 2px));\n}\n\ninput[type=\"checkbox\"] {\n position: absolute;\n z-index: -1;\n opacity: 0;\n pointer-events: none;\n}\n","import {Component, Event, EventEmitter, Host, Prop, h} from \"@stencil/core\";\nimport {LabelPosition} from \"../../beans\";\nimport {randomId} from \"../../utils/utils\";\n\n@Component({\n tag: \"z-toggle-switch\",\n styleUrl: \"styles.css\",\n shadow: false,\n scoped: true,\n})\nexport class ZToggleSwitch {\n /** Disabled flag /\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /* Label position /\n @Prop({reflect: true})\n labelPosition? = LabelPosition.LEFT;\n\n /* Checked state /\n @Prop({mutable: true})\n checked?: boolean = false;\n\n /* HTML id attribute to set to the internal checkbox /\n @Prop()\n htmlid = `toggle-switch-id-${randomId()}`;\n\n /* Toggle click event */\n @Event()\n toggleClick: EventEmitter;\n\n private emitToggleClick(): void {\n this.toggleClick.emit({\n id: this.htmlid,\n checked: this.checked,\n });\n }\n\n private handleClick(ev): void {\n if (this.disabled) {\n return;\n }\n\n this.checked = ev.target.checked;\n this.emitToggleClick();\n }\n\n render(): HTMLZToggleSwitchElement {\n return (\n <Host>\n <input\n id={this.htmlid}\n type=\"checkbox\"\n checked={this.checked}\n disabled={this.disabled}\n onChange={this.handleClick.bind(this)}\n />\n <label\n htmlFor={this.htmlid}\n class={{\n [this.labelPosition]: true,\n disabled: this.disabled,\n }}\n >\n <span>\n <slot />\n </span>\n <span\n class={{\n container: true,\n disabled: this.disabled,\n checked: this.checked,\n }}\n >\n <span class=\"circle\">\n {this.checked && (\n <z-icon\n width={12}\n height={12}\n name=\"checkmark\"\n ></z-icon>\n )}\n </span>\n </span>\n </label>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/z-tr.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { r as randomId } from './utils.js';
 import './index2.js';
 import { d as defineCustomElement$2 } from './index9.js';
-const stylesCss = ":host{--columns:1;display:grid;box-sizing:border-box;grid-auto-flow:column;grid-template-columns:var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr))}*{box-sizing:border-box}.z-tr--expand-button-container,::slotted(*){border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}::slotted(*:not(:last-child)){border-right:var(--z-table--cell-left-border, none)}:host([expandable]){--show-expandable-button:visible;cursor:pointer}:host([expandable]) ::slotted(*){grid-row:1}:host([expandable]) ::slotted(:nth-last-child(2)){border-right:none}:host([expandable]) ::slotted(*:last-child){border-left:0;grid-column:1 / span calc(var(--columns) + 1);grid-row:2}:host([expandable]:not([expanded])) ::slotted(*:last-child){display:none}:host([expanded]){margin-bottom:4px;box-shadow:0 4px 4px -2px var(--shadow-color-base)}:host([expanded]) .z-tr--expand-button-container,:host([expanded]) ::slotted(*){background-color:var(--color-background)}.z-tr--expand-button-container{display:flex;align-items:center;justify-content:center;background-color:var(--z-table--cells-background, var(--color-surface01))}.z-tr--expand-button-container button{display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:auto;appearance:none;background:transparent;cursor:pointer;visibility:var(--show-expandable-button, hidden)}.z-tr--expand-button-container button:focus{box-shadow:var(--shadow-focus-primary);outline:none}.z-tr--expand-button-container button z-icon{--z-icon-width:16px;--z-icon-height:16px}";
+const stylesCss = ":host{--columns:1;display:grid;-webkit-box-sizing:border-box;box-sizing:border-box;grid-auto-flow:column;grid-template-columns:var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr))}*{-webkit-box-sizing:border-box;box-sizing:border-box}.z-tr--expand-button-container,::slotted(*){border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}::slotted(*:not(:last-child)){border-right:var(--z-table--cell-left-border, none)}:host([expandable]){--show-expandable-button:visible;cursor:pointer}:host([expandable]) ::slotted(*){grid-row:1}:host([expandable]) ::slotted(:nth-last-child(2)){border-right:none}:host([expandable]) ::slotted(*:last-child){border-left:0;grid-column:1 / span calc(var(--columns) + 1);grid-row:2}:host([expandable]:not([expanded])) ::slotted(*:last-child){display:none}:host([expanded]){margin-bottom:4px;-webkit-box-shadow:0 4px 4px -2px var(--shadow-color-base);box-shadow:0 4px 4px -2px var(--shadow-color-base)}:host([expanded]) .z-tr--expand-button-container,:host([expanded]) ::slotted(*){background-color:var(--color-background)}.z-tr--expand-button-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--z-table--cells-background, var(--color-surface01))}.z-tr--expand-button-container button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:0;border:none;margin:auto;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer;visibility:var(--show-expandable-button, hidden)}.z-tr--expand-button-container button:focus{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary);outline:none}.z-tr--expand-button-container button z-icon{--z-icon-width:16px;--z-icon-height:16px}";
 const ZTrStyle0 = stylesCss;
 const ZTr$1 = /*@__PURE__*/ proxyCustomElement(class ZTr extends HTMLElement {

package/dist/components/z-tr.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-tr.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,~~ojDAAojD~~,CAAC;~~AACvkD~~,kBAAe,SAAS;;MCeXA,KAAG;;;;;;0BAaD,KAAK;wBAMP,KAAK;;;IAeN,aAAa;QACrB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAkC,YAAY,CAAC,CAAC,CAAC;QACpG,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,KAAK,CAAC,GAAG,EAAE,CAAC;SACb;QAED,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;QAClF,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,WAAW,EAAE,GAAG,OAAO,EAAE,CAAC,CAAC;QAEvD,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,MAAM,iBAAiB,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC;YACtC,iBAAiB,CAAC,EAAE,GAAG,iBAAiB,CAAC,EAAE,IAAI,2BAA2B,QAAQ,EAAE,EAAE,CAAC;YACvF,IAAI,CAAC,mBAAmB,GAAG,iBAAiB,CAAC,EAAE,CAAC;SACjD;KACF;;;;;IAMO,UAAU,CAAC,KAAiB;QAClC,MAAM,aAAa,GAAI,KAAK,CAAC,MAAsB,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAC/E,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,aAAa,EAAE;YACrC,OAAO;SACR;QAED,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,CAAC,CAAC;KAC7C;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,KAAK,EACV,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEvB,4DAAK,KAAK,EAAC,+BAA+B,IACvC,IAAI,CAAC,UAAU,KACd,gFACiB,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,gBACnC,IAAI,CAAC,QAAQ,GAAG,eAAe,GAAG,cAAc,mBAC7C,IAAI,CAAC,mBAAmB,EACvC,IAAI,EAAC,QAAQ,IAEb,+DAAQ,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,eAAe,GAAG,cAAc,GAAW,CAClE,CACV,CACG,EACN,6DAAM,YAAY,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,CACrD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZTr"],"sources":["src/components/table/z-tr/styles.css?tag=z-tr&encapsulation=shadow","src/components/table/z-tr/index.tsx"],"sourcesContent":[":host {\n /* number of columns of the row. will be set in component's ts code /\n --columns: 1;\n\n display: grid;\n box-sizing: border-box;\n grid-auto-flow: column;\n grid-template-columns: var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr));\n}\n\n {\n box-sizing: border-box;\n}\n\n.z-tr--expand-button-container,\n::slotted() {\n border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);\n}\n\n::slotted(:not(:last-child)) {\n border-right: var(--z-table--cell-left-border, none);\n}\n\n:host([expandable]) {\n --show-expandable-button: visible;\n\n cursor: pointer;\n}\n\n:host([expandable]) ::slotted() {\n grid-row: 1;\n}\n\n:host([expandable]) ::slotted(:nth-last-child(2)) {\n border-right: none;\n}\n\n:host([expandable]) ::slotted(:last-child) {\n border-left: 0;\n grid-column: 1 / span calc(var(--columns) + 1);\n grid-row: 2;\n}\n\n:host([expandable]:not([expanded])) ::slotted(:last-child) {\n display: none;\n}\n\n:host([expanded]) {\n margin-bottom: 4px; / prevents shadow to be cut by the next element /\n box-shadow: 0 4px 4px -2px var(--shadow-color-base);\n}\n\n:host([expanded]) .z-tr--expand-button-container,\n:host([expanded]) ::slotted() {\n background-color: var(--color-background);\n}\n\n.z-tr--expand-button-container {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--z-table--cells-background, var(--color-surface01));\n}\n\n.z-tr--expand-button-container button {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: none;\n margin: auto;\n appearance: none;\n background: transparent;\n cursor: pointer;\n visibility: var(--show-expandable-button, hidden);\n}\n\n.z-tr--expand-button-container button:focus {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n.z-tr--expand-button-container button z-icon {\n --z-icon-width: 16px;\n --z-icon-height: 16px;\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {randomId} from \"../../../utils/utils\";\nimport \"../cells/z-td/index\";\nimport \"../cells/z-th/index\";\n\n/*\n ZTr component.\n * When the row is `expandable`, you can set the `prevent-expand` css class on an interactive element inside the row\n * to prevent the row from expanding.\n * @slot - ZTr content (`z-td` or `z-th`).\n /\n@Component({\n tag: \"z-tr\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTr {\n @Element() host: HTMLZTrElement;\n\n /\n Whether the row is expandable.\n * Use a `z-td` as the last cell of the row for the additional content.\n * It will show a button to expand/collapse the row.\n * The last cell will be hidden until the button or row is clicked.\n \n If some element inside the expandable row contains the `prevent-expand` css class,\n * the row will not expand by clicking that element.\n /\n @Prop({reflect: true})\n expandable = false;\n\n /\n Whether the row is currently expanded.\n /\n @State()\n expanded = false;\n\n /\n HTML Id of the expandable content.\n * It is used to link the button to the content through the `aria-controls` attribute.\n /\n @State()\n expandableContentId: string;\n\n /* Row has been expanded /\n @Event()\n expand: EventEmitter;\n\n @Watch(\"expandable\")\n @Listen(\"colspanchange\")\n protected updateColumns(): void {\n const cells = Array.from(this.host.querySelectorAll<HTMLZTdElement \| HTMLZThElement>(\"z-td, z-th\"));\n if (this.expandable) {\n cells.pop();\n }\n\n const columns = cells.map((cell) => cell.colspan \|\| 1).reduce((a, b) => a + b, 0);\n this.host.style.setProperty(\"--columns\", `${columns}`);\n\n if (this.expandable) {\n const expandableContent = cells.pop();\n expandableContent.id = expandableContent.id \|\| `z-tr-expandable-content-${randomId()}`;\n this.expandableContentId = expandableContent.id;\n }\n }\n\n /\n Handle click on row.\n * Skip expansion if the click is on a element with `prevent-expand` css class.\n */\n private onRowClick(event: MouseEvent): void {\n const preventExpand = (event.target as HTMLElement).closest(\".prevent-expand\");\n if (!this.expandable \|\| preventExpand) {\n return;\n }\n\n this.expanded = !this.expanded;\n this.expand.emit({expanded: this.expanded});\n }\n\n componentWillLoad(): void {\n this.updateColumns();\n }\n\n render(): HTMLZTrElement {\n return (\n <Host\n role=\"row\"\n onClick={this.onRowClick.bind(this)}\n expanded={this.expanded}\n >\n <div class=\"z-tr--expand-button-container\">\n {this.expandable && (\n <button\n aria-expanded={this.expanded ? \"true\" : \"false\"}\n aria-label={this.expanded ? \"Comprimi riga\" : \"Espandi riga\"}\n aria-controls={this.expandableContentId}\n type=\"button\"\n >\n <z-icon name={this.expanded ? \"minus-circled\" : \"plus-circled\"}></z-icon>\n </button>\n )}\n </div>\n <slot onSlotchange={this.updateColumns.bind(this)}></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-tr.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,q4DAAq4D,CAAC;AACx5D,kBAAe,SAAS;;MCeXA,KAAG;;;;;;0BAaD,KAAK;wBAMP,KAAK;;;IAeN,aAAa;QACrB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAkC,YAAY,CAAC,CAAC,CAAC;QACpG,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,KAAK,CAAC,GAAG,EAAE,CAAC;SACb;QAED,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;QAClF,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,WAAW,EAAE,GAAG,OAAO,EAAE,CAAC,CAAC;QAEvD,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,MAAM,iBAAiB,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC;YACtC,iBAAiB,CAAC,EAAE,GAAG,iBAAiB,CAAC,EAAE,IAAI,2BAA2B,QAAQ,EAAE,EAAE,CAAC;YACvF,IAAI,CAAC,mBAAmB,GAAG,iBAAiB,CAAC,EAAE,CAAC;SACjD;KACF;;;;;IAMO,UAAU,CAAC,KAAiB;QAClC,MAAM,aAAa,GAAI,KAAK,CAAC,MAAsB,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAC/E,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,aAAa,EAAE;YACrC,OAAO;SACR;QAED,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,CAAC,CAAC;KAC7C;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,KAAK,EACV,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEvB,4DAAK,KAAK,EAAC,+BAA+B,IACvC,IAAI,CAAC,UAAU,KACd,gFACiB,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,gBACnC,IAAI,CAAC,QAAQ,GAAG,eAAe,GAAG,cAAc,mBAC7C,IAAI,CAAC,mBAAmB,EACvC,IAAI,EAAC,QAAQ,IAEb,+DAAQ,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,eAAe,GAAG,cAAc,GAAW,CAClE,CACV,CACG,EACN,6DAAM,YAAY,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,CACrD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZTr"],"sources":["src/components/table/z-tr/styles.css?tag=z-tr&encapsulation=shadow","src/components/table/z-tr/index.tsx"],"sourcesContent":[":host {\n /* number of columns of the row. will be set in component's ts code /\n --columns: 1;\n\n display: grid;\n box-sizing: border-box;\n grid-auto-flow: column;\n grid-template-columns: var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr));\n}\n\n {\n box-sizing: border-box;\n}\n\n.z-tr--expand-button-container,\n::slotted() {\n border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);\n}\n\n::slotted(:not(:last-child)) {\n border-right: var(--z-table--cell-left-border, none);\n}\n\n:host([expandable]) {\n --show-expandable-button: visible;\n\n cursor: pointer;\n}\n\n:host([expandable]) ::slotted() {\n grid-row: 1;\n}\n\n:host([expandable]) ::slotted(:nth-last-child(2)) {\n border-right: none;\n}\n\n:host([expandable]) ::slotted(:last-child) {\n border-left: 0;\n grid-column: 1 / span calc(var(--columns) + 1);\n grid-row: 2;\n}\n\n:host([expandable]:not([expanded])) ::slotted(:last-child) {\n display: none;\n}\n\n:host([expanded]) {\n margin-bottom: 4px; / prevents shadow to be cut by the next element /\n box-shadow: 0 4px 4px -2px var(--shadow-color-base);\n}\n\n:host([expanded]) .z-tr--expand-button-container,\n:host([expanded]) ::slotted() {\n background-color: var(--color-background);\n}\n\n.z-tr--expand-button-container {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--z-table--cells-background, var(--color-surface01));\n}\n\n.z-tr--expand-button-container button {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: none;\n margin: auto;\n appearance: none;\n background: transparent;\n cursor: pointer;\n visibility: var(--show-expandable-button, hidden);\n}\n\n.z-tr--expand-button-container button:focus {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n.z-tr--expand-button-container button z-icon {\n --z-icon-width: 16px;\n --z-icon-height: 16px;\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {randomId} from \"../../../utils/utils\";\nimport \"../cells/z-td/index\";\nimport \"../cells/z-th/index\";\n\n/*\n ZTr component.\n * When the row is `expandable`, you can set the `prevent-expand` css class on an interactive element inside the row\n * to prevent the row from expanding.\n * @slot - ZTr content (`z-td` or `z-th`).\n /\n@Component({\n tag: \"z-tr\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTr {\n @Element() host: HTMLZTrElement;\n\n /\n Whether the row is expandable.\n * Use a `z-td` as the last cell of the row for the additional content.\n * It will show a button to expand/collapse the row.\n * The last cell will be hidden until the button or row is clicked.\n \n If some element inside the expandable row contains the `prevent-expand` css class,\n * the row will not expand by clicking that element.\n /\n @Prop({reflect: true})\n expandable = false;\n\n /\n Whether the row is currently expanded.\n /\n @State()\n expanded = false;\n\n /\n HTML Id of the expandable content.\n * It is used to link the button to the content through the `aria-controls` attribute.\n /\n @State()\n expandableContentId: string;\n\n /* Row has been expanded /\n @Event()\n expand: EventEmitter;\n\n @Watch(\"expandable\")\n @Listen(\"colspanchange\")\n protected updateColumns(): void {\n const cells = Array.from(this.host.querySelectorAll<HTMLZTdElement \| HTMLZThElement>(\"z-td, z-th\"));\n if (this.expandable) {\n cells.pop();\n }\n\n const columns = cells.map((cell) => cell.colspan \|\| 1).reduce((a, b) => a + b, 0);\n this.host.style.setProperty(\"--columns\", `${columns}`);\n\n if (this.expandable) {\n const expandableContent = cells.pop();\n expandableContent.id = expandableContent.id \|\| `z-tr-expandable-content-${randomId()}`;\n this.expandableContentId = expandableContent.id;\n }\n }\n\n /\n Handle click on row.\n * Skip expansion if the click is on a element with `prevent-expand` css class.\n */\n private onRowClick(event: MouseEvent): void {\n const preventExpand = (event.target as HTMLElement).closest(\".prevent-expand\");\n if (!this.expandable \|\| preventExpand) {\n return;\n }\n\n this.expanded = !this.expanded;\n this.expand.emit({expanded: this.expanded});\n }\n\n componentWillLoad(): void {\n this.updateColumns();\n }\n\n render(): HTMLZTrElement {\n return (\n <Host\n role=\"row\"\n onClick={this.onRowClick.bind(this)}\n expanded={this.expanded}\n >\n <div class=\"z-tr--expand-button-container\">\n {this.expandable && (\n <button\n aria-expanded={this.expanded ? \"true\" : \"false\"}\n aria-label={this.expanded ? \"Comprimi riga\" : \"Espandi riga\"}\n aria-controls={this.expandableContentId}\n type=\"button\"\n >\n <z-icon name={this.expanded ? \"minus-circled\" : \"plus-circled\"}></z-icon>\n </button>\n )}\n </div>\n <slot onSlotchange={this.updateColumns.bind(this)}></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/z-visually-hidden.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-const stylesCss = ":host{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:0 -1px -1px 0;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}";
+const stylesCss = ":host{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:0 -1px -1px 0;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap}";
 const ZVisuallyHiddenStyle0 = stylesCss;
 const ZVisuallyHidden$1 = /*@__PURE__*/ proxyCustomElement(class ZVisuallyHidden extends HTMLElement {

package/dist/components/z-visually-hidden.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-visually-hidden.js","mappings":";;AAAA,MAAM,SAAS,GAAG,~~kKAAkK,~~CAAC;~~AACrL~~,8BAAe,SAAS;;MCMXA,iBAAe;;;;;;IAC1B,MAAM;QACJ,OAAO,8DAAQ,CAAC;KACjB;;;;;;;;;;;;;;;;;;;;;;","names":["ZVisuallyHidden"],"sources":["src/components/z-visually-hidden/styles.css?tag=z-visually-hidden&encapsulation=shadow","src/components/z-visually-hidden/index.tsx"],"sourcesContent":[":host {\n position: absolute;\n overflow: hidden;\n width: 1px;\n height: 1px;\n padding: 0;\n border: 0;\n margin: 0 -1px -1px 0;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n}\n","import {Component, h} from \"@stencil/core\";\n\n@Component({\n tag: \"z-visually-hidden\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZVisuallyHidden {\n render(): HTMLSlotElement {\n return <slot />;\n }\n}\n"],"version":3}
1	+ {"file":"z-visually-hidden.js","mappings":";;AAAA,MAAM,SAAS,GAAG,+LAA+L,CAAC;AAClN,8BAAe,SAAS;;MCMXA,iBAAe;;;;;;IAC1B,MAAM;QACJ,OAAO,8DAAQ,CAAC;KACjB;;;;;;;;;;;;;;;;;;;;;;","names":["ZVisuallyHidden"],"sources":["src/components/z-visually-hidden/styles.css?tag=z-visually-hidden&encapsulation=shadow","src/components/z-visually-hidden/index.tsx"],"sourcesContent":[":host {\n position: absolute;\n overflow: hidden;\n width: 1px;\n height: 1px;\n padding: 0;\n border: 0;\n margin: 0 -1px -1px 0;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n}\n","import {Component, h} from \"@stencil/core\";\n\n@Component({\n tag: \"z-visually-hidden\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZVisuallyHidden {\n render(): HTMLSlotElement {\n return <slot />;\n }\n}\n"],"version":3}

package/dist/esm/index-08bf4c13.js ADDED Viewed

@@ -0,0 +1,18 @@
+import { r as registerInstance, h, a as Host } from './index-c8ceadeb.js';
+const stylesCss = ":host{display:block;-webkit-box-sizing:border-box;box-sizing:border-box}";
+const ZTbodyStyle0 = stylesCss;
+const ZTbody = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h(Host, { key: 'b704110bd5823c470d18953bc24db09da7c66e8a', role: "rowgroup" }, h("slot", { key: 'd71e881ccc992ac2a8e97efa8617d33c63ae1003' })));
+    }
+};
+ZTbody.style = ZTbodyStyle0;
+export { ZTbody as Z };
+//# sourceMappingURL=index-08bf4c13.js.map

package/dist/esm/index-08bf4c13.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"index-08bf4c13.js","mappings":";;AAAA,MAAM,SAAS,GAAG,0EAA0E,CAAC;AAC7F,qBAAe,SAAS;;MCUX,MAAM;;;;IACjB,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,IACnB,8DAAa,CACR,EACP;KACH;;;;;;","names":[],"sources":["src/components/table/z-tbody/styles.css?tag=z-tbody&encapsulation=shadow","src/components/table/z-tbody/index.tsx"],"sourcesContent":[":host {\n display: block;\n box-sizing: border-box;\n}\n","import {Component, Host, h} from \"@stencil/core\";\n\n/**\n * ZTbody component.\n * @slot - ZTbody content (`z-tr`).\n */\n@Component({\n tag: \"z-tbody\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTbody {\n render(): HTMLZTbodyElement {\n return (\n <Host role=\"rowgroup\">\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/index-2a6f56f8.js ADDED Viewed

@@ -0,0 +1,65 @@
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-c8ceadeb.js';
+import { P as PopoverPosition, S as SortDirection, B as ButtonVariant, e as ControlSize } from './index-ee40e66b.js';
+const stylesCss = ":host{position:relative;display:-ms-flexbox;display:flex;max-width:100%;-ms-flex-align:center;align-items:center;padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2));background-color:var(--color-surface01);gap:calc(var(--space-unit) * 2) var(--space-unit)}:host,*{-webkit-box-sizing:border-box;box-sizing:border-box}:host([sticky]){position:-webkit-sticky;position:sticky;z-index:1;top:0;left:0;-webkit-box-shadow:8px 0 16px -8px var(--shadow-color-base);box-shadow:8px 0 16px -8px var(--shadow-color-base)}:host([menu-open]){z-index:2}.cell--content{display:-ms-flexbox;display:flex;width:100%;height:100%;-ms-flex-align:center;align-items:center}:host([show-menu]) .cell--content{-webkit-column-gap:var(--space-unit);-moz-column-gap:var(--space-unit);column-gap:var(--space-unit)}.cell--menu-container{margin-left:auto}:host(:not([show-menu])) .cell--menu-container{opacity:0;pointer-events:none}:host(:is([show-menu],[menu-open])) .cell--menu-container,:host([show-menu]) .cell--menu-container:focus-within{z-index:1;opacity:1;pointer-events:all}:host .cell-popover{z-index:100}@media (min-width: 768px) and (hover: hover){:host([show-menu=\"hover\"]) .cell--menu-container{opacity:0;pointer-events:none}:host([show-menu=\"hover\"]:hover) .cell--menu-container{z-index:1;opacity:1;pointer-events:all}}:host{z-index:1;padding:0;background-color:var(--color-background);font-weight:var(--font-sb)}.cell--content{padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2))}:host([show-sorting]) .cell--content{-webkit-column-gap:var(--space-unit);-moz-column-gap:var(--space-unit);column-gap:var(--space-unit)}.z-th--sort-button{padding:0;border:none;background-color:transparent;cursor:pointer;outline:none}@media (min-width: 768px) and (hover: hover){:host([show-sorting=\"hover\"]) .z-th--sort-button{opacity:0;pointer-events:none}:host([show-sorting=\"hover\"]:hover) .z-th--sort-button,:host([show-sorting=\"hover\"]) .z-th--sort-button:focus:focus-visible,:host([show-sorting=\"always\"]) .z-th--sort-button,:host([sorted]) .z-th--sort-button{opacity:1;pointer-events:all}}:host([show-sorting=\"hover\"]:hover) .z-th--sort-button::after,:host([show-sorting=\"hover\"]) .z-th--sort-button:focus:focus-visible::after,:host([show-sorting=\"always\"]) .z-th--sort-button::after,:host([sorted]) .z-th--sort-button::after{position:absolute;top:6px;left:6px;width:calc(100% - 12px);height:calc(100% - 10px);background-color:transparent;content:\"\"}:host([sorted]) .z-th--sort-button::after,.z-th--sort-button:focus:focus-visible::after{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary)}";
+const ZThStyle0 = stylesCss;
+const ZTh = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.sort = createEvent(this, "sort", 7);
+        this.colspan = undefined;
+        this.showMenu = null;
+        this.showSorting = null;
+        this.sticky = false;
+        this.sortDirection = undefined;
+        this.sorted = false;
+        this.popoverPosition = PopoverPosition.AUTO;
+        this.isMenuOpen = false;
+    }
+    /**
+     * Get the value to set to the `aria-sort` attribute based on the current sort direction.
+     */
+    get ariaSortDirection() {
+        if (!this.sortDirection) {
+            return null;
+        }
+        return this.sortDirection === SortDirection.ASC ? "ascending" : "descending";
+    }
+    /**
+     * Handle the click on the sort button.
+     * @fires sort
+     */
+    handleSort() {
+        if (!this.sortDirection) {
+            this.sorted = false;
+            return;
+        }
+        this.sortDirection = this.sortDirection === SortDirection.ASC ? SortDirection.DESC : SortDirection.ASC;
+        this.sorted = true;
+        this.sort.emit({ sortDirection: this.sortDirection });
+    }
+    updateColspan() {
+        if (this.colspan) {
+            this.host.style.gridColumn = `span ${this.colspan}`;
+        }
+        else {
+            this.host.style.removeProperty("grid-column");
+        }
+    }
+    componentWillLoad() {
+        this.updateColspan();
+    }
+    render() {
+        return (h(Host, { key: '29d00b9cca980ef969f1e5437497fb8d3813fcc0', role: "columnheader", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection, sortable: this.showSorting }, h("div", { key: 'e1aa40618413575fedcc7e627280669e064054f8', class: "cell--content" }, h("slot", { key: '842da5d5c6c500e8706203ed07a0dd243d26b42c' }), this.showSorting && (h("button", { key: 'ef2473dc91e989eb398a667c8a73bb7579082258', class: "z-th--sort-button", type: "button", onClick: this.handleSort.bind(this) }, h("z-icon", { key: '17c11e9ada49d94c13173380fafeaff4deae1ec9', name: this.sortDirection === SortDirection.DESC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (h("div", { key: 'db09ba4db62162a09966b0554d80bcc4f1e254a8', class: "cell--menu-container" }, h("z-button", { key: 'fb3027cdca8658a2616a5612b02641f8a5dafeb0', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: () => (this.popoverEl.open = !this.popoverEl.open) }), h("z-popover", { key: '25c3d7bd294a9384e606220930073e530db7c0ae', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: '95be7b90aee8feb2904a982fe59355e461df9c46', name: "contextual-menu" })))))));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "colspan": ["updateColspan"]
+    }; }
+};
+ZTh.style = ZThStyle0;
+export { ZTh as Z };
+//# sourceMappingURL=index-2a6f56f8.js.map

package/dist/esm/index-2a6f56f8.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"index-2a6f56f8.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,qlFAAqlF,CAAC;AACxmF,kBAAe,SAAS;;MCYX,GAAG;;;;;wBAekB,IAAI;2BAQD,IAAI;sBAM9B,KAAK;;sBAYW,KAAK;+BAMZ,eAAe,CAAC,IAAI;0BAMzB,KAAK;;;;;IAiBlB,IAAY,iBAAiB;QAC3B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;YACvB,OAAO,IAAI,CAAC;SACb;QAED,OAAO,IAAI,CAAC,aAAa,KAAK,aAAa,CAAC,GAAG,GAAG,WAAW,GAAG,YAAY,CAAC;KAC9E;;;;;IAMO,UAAU;QAChB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;YACvB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YAEpB,OAAO;SACR;QAED,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,KAAK,aAAa,CAAC,GAAG,GAAG,aAAa,CAAC,IAAI,GAAG,aAAa,CAAC,GAAG,CAAC;QACvG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QAEnB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAAC,aAAa,EAAE,IAAI,CAAC,aAAa,EAAC,CAAC,CAAC;KACrD;IAGS,aAAa;QACrB,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;SACrD;aAAM;YACL,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;SAC/C;KACF;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,cAAc,eACR,IAAI,CAAC,UAAU,eACf,IAAI,CAAC,iBAAiB,EACjC,QAAQ,EAAE,IAAI,CAAC,WAAW,IAE1B,4DAAK,KAAK,EAAC,eAAe,IACxB,8DAAa,EACZ,IAAI,CAAC,WAAW,KACf,+DACE,KAAK,EAAC,mBAAmB,EACzB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAEnC,+DACE,IAAI,EAAE,IAAI,CAAC,aAAa,KAAK,aAAa,CAAC,IAAI,GAAG,iBAAiB,GAAG,mBAAmB,EACzF,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACK,CACV,EACA,IAAI,CAAC,QAAQ,KACZ,4DAAK,KAAK,EAAC,sBAAsB,IAC/B,iEACE,OAAO,EAAE,aAAa,CAAC,QAAQ,EAC/B,IAAI,EAAC,iBAAiB,EACtB,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAiB,CAAC,EACnD,OAAO,EAAE,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,GAC3D,EACF,kEACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAyB,CAAC,EACzD,MAAM,EAAE,IAAI,CAAC,WAAW,EACxB,YAAY,EAAE,CAAC,KAAK,MAAM,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAC9D,QAAQ,EAAE,IAAI,CAAC,eAAe,IAE9B,6DAAM,IAAI,EAAC,iBAAiB,GAAQ,CAC1B,CACR,CACP,CACG,CACD,EACP;KACH;;;;;;;;;;","names":[],"sources":["src/components/table/cells/z-th/styles.css?tag=z-th&encapsulation=shadow","src/components/table/cells/z-th/index.tsx"],"sourcesContent":["@import \"../z-table-cells.css\";\n\n:host {\n z-index: 1;\n padding: 0;\n background-color: var(--color-background);\n font-weight: var(--font-sb);\n}\n\n.cell--content {\n padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));\n}\n\n:host([show-sorting]) .cell--content {\n column-gap: var(--space-unit);\n}\n\n.z-th--sort-button {\n padding: 0;\n border: none;\n background-color: transparent;\n cursor: pointer;\n outline: none;\n}\n\n@media (min-width: 768px) and (hover: hover) {\n :host([show-sorting=\"hover\"]) .z-th--sort-button {\n opacity: 0;\n pointer-events: none;\n }\n\n :host([show-sorting=\"hover\"]:hover) .z-th--sort-button,\n :host([show-sorting=\"hover\"]) .z-th--sort-button:focus:focus-visible,\n :host([show-sorting=\"always\"]) .z-th--sort-button,\n :host([sorted]) .z-th--sort-button {\n opacity: 1;\n pointer-events: all;\n }\n}\n\n:host([show-sorting=\"hover\"]:hover) .z-th--sort-button::after,\n:host([show-sorting=\"hover\"]) .z-th--sort-button:focus:focus-visible::after,\n:host([show-sorting=\"always\"]) .z-th--sort-button::after,\n:host([sorted]) .z-th--sort-button::after {\n position: absolute;\n top: 6px;\n left: 6px;\n width: calc(100% - 12px);\n height: calc(100% - 10px);\n background-color: transparent;\n content: \"\";\n}\n\n:host([sorted]) .z-th--sort-button::after,\n.z-th--sort-button:focus:focus-visible::after {\n box-shadow: var(--shadow-focus-primary);\n}\n","import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, PopoverPosition, SortDirection, VisibilityCondition} from \"../../../../beans\";\n\n/**\n * ZTh component.\n * @slot - ZTh content.\n * @slot contextual-menu - Contextual menu content. Only visible when `showMenu` is true.\n */\n@Component({\n tag: \"z-th\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTh {\n @Element() host: HTMLZThElement;\n\n /**\n * Number of columns that the cell should span.\n */\n @Prop()\n colspan: number;\n\n /**\n * Enables the contextual menu.\n * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n * Set a nullish value to hide the menu button.\n */\n @Prop({reflect: true})\n showMenu: VisibilityCondition = null;\n\n /**\n * Enables the sorting button.\n * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n * Set a nullish value to hide the sort button.\n */\n @Prop({reflect: true})\n showSorting: VisibilityCondition = null;\n\n /**\n * Whether the cell should stick.\n */\n @Prop({reflect: true})\n sticky = false;\n\n /**\n * Current sorting direction.\n */\n @Prop({mutable: true})\n sortDirection?: SortDirection;\n\n /**\n * Sorted state of the column.\n */\n @Prop({reflect: true, mutable: true})\n sorted: boolean | null = false;\n\n /**\n * Set popover position.\n */\n @Prop()\n popoverPosition = PopoverPosition.AUTO;\n\n /**\n * Store the open state of the menu.\n */\n @State()\n isMenuOpen = false;\n\n /**\n * Sort event fired when the user clicks on the sort button.\n * The sorting logic must be implemented by the app.\n * You can set an `id` on the `z-th` to easly identify the column in the event listener.\n */\n @Event()\n private sort: EventEmitter;\n\n private menuTrigger: HTMLElement;\n\n private popoverEl: HTMLZPopoverElement;\n\n /**\n * Get the value to set to the `aria-sort` attribute based on the current sort direction.\n */\n private get ariaSortDirection(): string {\n if (!this.sortDirection) {\n return null;\n }\n\n return this.sortDirection === SortDirection.ASC ? \"ascending\" : \"descending\";\n }\n\n /**\n * Handle the click on the sort button.\n * @fires sort\n */\n private handleSort(): void {\n if (!this.sortDirection) {\n this.sorted = false;\n\n return;\n }\n\n this.sortDirection = this.sortDirection === SortDirection.ASC ? SortDirection.DESC : SortDirection.ASC;\n this.sorted = true;\n\n this.sort.emit({sortDirection: this.sortDirection});\n }\n\n @Watch(\"colspan\")\n protected updateColspan(): void {\n if (this.colspan) {\n this.host.style.gridColumn = `span ${this.colspan}`;\n } else {\n this.host.style.removeProperty(\"grid-column\");\n }\n }\n\n componentWillLoad(): void {\n this.updateColspan();\n }\n\n render(): HTMLZThElement {\n return (\n <Host\n role=\"columnheader\"\n menu-open={this.isMenuOpen}\n aria-sort={this.ariaSortDirection}\n sortable={this.showSorting}\n >\n <div class=\"cell--content\">\n <slot></slot>\n {this.showSorting && (\n <button\n class=\"z-th--sort-button\"\n type=\"button\"\n onClick={this.handleSort.bind(this)}\n >\n <z-icon\n name={this.sortDirection === SortDirection.DESC ? \"arrow-simple-up\" : \"arrow-simple-down\"}\n width={14}\n height={14}\n />\n </button>\n )}\n {this.showMenu && (\n <div class=\"cell--menu-container\">\n <z-button\n variant={ButtonVariant.TERTIARY}\n icon=\"contextual-menu\"\n size={ControlSize.X_SMALL}\n ref={(el) => (this.menuTrigger = el as HTMLElement)}\n onClick={() => (this.popoverEl.open = !this.popoverEl.open)}\n />\n <z-popover\n ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n bindTo={this.menuTrigger}\n onOpenChange={(event) => (this.isMenuOpen = event.detail.open)}\n position={this.popoverPosition}\n >\n <slot name=\"contextual-menu\"></slot>\n </z-popover>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/index-2d88cd2a.js ADDED Viewed

@@ -0,0 +1,19 @@
+import { r as registerInstance, h, a as Host } from './index-c8ceadeb.js';
+const stylesCss = ":host{display:block;-webkit-box-sizing:border-box;box-sizing:border-box;border-top:1px solid var(--color-surface03);border-bottom:1px solid var(--color-surface03)}:host([sticky]){position:-webkit-sticky;position:sticky;z-index:1;bottom:0;background-color:var(--color-surface01)}";
+const ZTfootStyle0 = stylesCss;
+const ZTfoot = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.sticky = false;
+    }
+    render() {
+        return (h(Host, { key: '86efe92f23250e482ef7e9c0b646d28f294214c6', role: "rowgroup" }, h("slot", { key: '07ff4d3ad791419325d865160a229b228d9f0626' })));
+    }
+};
+ZTfoot.style = ZTfootStyle0;
+export { ZTfoot as Z };
+//# sourceMappingURL=index-2d88cd2a.js.map

package/dist/esm/index-2d88cd2a.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"index-2d88cd2a.js","mappings":";;AAAA,MAAM,SAAS,GAAG,wRAAwR,CAAC;AAC3S,qBAAe,SAAS;;MCUX,MAAM;;;sBAKR,KAAK;;IAEd,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,IACnB,8DAAa,CACR,EACP;KACH;;;;;;","names":[],"sources":["src/components/table/z-tfoot/styles.css?tag=z-tfoot&encapsulation=shadow","src/components/table/z-tfoot/index.tsx"],"sourcesContent":[":host {\n display: block;\n box-sizing: border-box;\n border-top: 1px solid var(--color-surface03);\n border-bottom: 1px solid var(--color-surface03);\n}\n\n:host([sticky]) {\n position: sticky;\n z-index: 1;\n bottom: 0;\n background-color: var(--color-surface01);\n}\n","import {Component, Host, Prop, h} from \"@stencil/core\";\n\n/**\n * ZTFoot component.\n * @slot - ZTFoot content (`z-tr`).\n */\n@Component({\n tag: \"z-tfoot\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTfoot {\n /**\n * If true, the footer will be stuck to the bottom of the table.\n */\n @Prop({reflect: true})\n sticky = false;\n\n render(): void {\n return (\n <Host role=\"rowgroup\">\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/index-72c3946c.js ADDED Viewed

@@ -0,0 +1,19 @@
+import { r as registerInstance, h, a as Host } from './index-c8ceadeb.js';
+const stylesCss = ":host{--z-table--cells-bottom-border-size:var(\n    --border-size-medium\n  );--z-table--cells-background:var(\n    --color-background\n  );display:block;-webkit-box-sizing:border-box;box-sizing:border-box}:host([sticky]){position:-webkit-sticky;position:sticky;z-index:2;top:0;-webkit-box-shadow:0 2px 4px -2px var(--shadow-color-base);box-shadow:0 2px 4px -2px var(--shadow-color-base)}";
+const ZTheadStyle0 = stylesCss;
+const ZThead = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.sticky = false;
+    }
+    render() {
+        return (h(Host, { key: 'ef0a3c17f7163b6bdb0d43d21cb1ac6607f53e7c', role: "rowgroup" }, h("slot", { key: '80b4a406f26e0c637972e663d99707431d39e9a4' })));
+    }
+};
+ZThead.style = ZTheadStyle0;
+export { ZThead as Z };
+//# sourceMappingURL=index-72c3946c.js.map

package/dist/esm/index-72c3946c.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"index-72c3946c.js","mappings":";;AAAA,MAAM,SAAS,GAAG,sYAAsY,CAAC;AACzZ,qBAAe,SAAS;;MCUX,MAAM;;;sBAKR,KAAK;;IAEd,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,IACnB,8DAAa,CACR,EACP;KACH;;;;;;","names":[],"sources":["src/components/table/z-thead/styles.css?tag=z-thead&encapsulation=shadow","src/components/table/z-thead/index.tsx"],"sourcesContent":[":host {\n --z-table--cells-bottom-border-size: var(\n --border-size-medium\n ); /* Needed to handle the border of the expand button cell */\n\n --z-table--cells-background: var(\n --color-background\n ); /* Needed to handle the background-color of the expand button cell */\n\n display: block;\n box-sizing: border-box;\n}\n\n:host([sticky]) {\n position: sticky;\n z-index: 2;\n top: 0;\n box-shadow: 0 2px 4px -2px var(--shadow-color-base);\n}\n","import {Component, Host, Prop, h} from \"@stencil/core\";\n\n/**\n * ZThead component.\n * @slot - ZThead content (`z-tr`).\n */\n@Component({\n tag: \"z-thead\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZThead {\n /**\n * If true, the header will be stuck to the top of the table.\n */\n @Prop({reflect: true})\n sticky = false;\n\n render(): HTMLZTheadElement {\n return (\n <Host role=\"rowgroup\">\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/index-821e1d1c.js ADDED Viewed

@@ -0,0 +1,57 @@
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-c8ceadeb.js';
+import { r as randomId } from './utils-b924649f.js';
+import './index-fd99721b.js';
+import './index-2a6f56f8.js';
+const stylesCss = ":host{--columns:1;display:grid;-webkit-box-sizing:border-box;box-sizing:border-box;grid-auto-flow:column;grid-template-columns:var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr))}*{-webkit-box-sizing:border-box;box-sizing:border-box}.z-tr--expand-button-container,::slotted(*){border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}::slotted(*:not(:last-child)){border-right:var(--z-table--cell-left-border, none)}:host([expandable]){--show-expandable-button:visible;cursor:pointer}:host([expandable]) ::slotted(*){grid-row:1}:host([expandable]) ::slotted(:nth-last-child(2)){border-right:none}:host([expandable]) ::slotted(*:last-child){border-left:0;grid-column:1 / span calc(var(--columns) + 1);grid-row:2}:host([expandable]:not([expanded])) ::slotted(*:last-child){display:none}:host([expanded]){margin-bottom:4px;-webkit-box-shadow:0 4px 4px -2px var(--shadow-color-base);box-shadow:0 4px 4px -2px var(--shadow-color-base)}:host([expanded]) .z-tr--expand-button-container,:host([expanded]) ::slotted(*){background-color:var(--color-background)}.z-tr--expand-button-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--z-table--cells-background, var(--color-surface01))}.z-tr--expand-button-container button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:0;border:none;margin:auto;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer;visibility:var(--show-expandable-button, hidden)}.z-tr--expand-button-container button:focus{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary);outline:none}.z-tr--expand-button-container button z-icon{--z-icon-width:16px;--z-icon-height:16px}";
+const ZTrStyle0 = stylesCss;
+const ZTr = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.expand = createEvent(this, "expand", 7);
+        this.expandable = false;
+        this.expanded = false;
+        this.expandableContentId = undefined;
+    }
+    updateColumns() {
+        const cells = Array.from(this.host.querySelectorAll("z-td, z-th"));
+        if (this.expandable) {
+            cells.pop();
+        }
+        const columns = cells.map((cell) => cell.colspan || 1).reduce((a, b) => a + b, 0);
+        this.host.style.setProperty("--columns", `${columns}`);
+        if (this.expandable) {
+            const expandableContent = cells.pop();
+            expandableContent.id = expandableContent.id || `z-tr-expandable-content-${randomId()}`;
+            this.expandableContentId = expandableContent.id;
+        }
+    }
+    /**
+     * Handle click on row.
+     * Skip expansion if the click is on a element with `prevent-expand` css class.
+     */
+    onRowClick(event) {
+        const preventExpand = event.target.closest(".prevent-expand");
+        if (!this.expandable || preventExpand) {
+            return;
+        }
+        this.expanded = !this.expanded;
+        this.expand.emit({ expanded: this.expanded });
+    }
+    componentWillLoad() {
+        this.updateColumns();
+    }
+    render() {
+        return (h(Host, { key: '467c0a01f3c28851b85d47bd178e6555cbb3f57f', role: "row", onClick: this.onRowClick.bind(this), expanded: this.expanded }, h("div", { key: 'ff2c7ecbc7775ee60951a3df3e7ecf67a6d77362', class: "z-tr--expand-button-container" }, this.expandable && (h("button", { key: 'fe1297aafa51d66acd09794bf47333079bc90604', "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, h("z-icon", { key: '517ffd66223d3ca7dc093aaa730455a02e6a61fd', name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { key: 'cead9ff3b1da3cf20982bdc87413414925264c40', onSlotchange: this.updateColumns.bind(this) })));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "expandable": ["updateColumns"]
+    }; }
+};
+ZTr.style = ZTrStyle0;
+export { ZTr as Z };
+//# sourceMappingURL=index-821e1d1c.js.map

package/dist/esm/index-821e1d1c.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"index-821e1d1c.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,q4DAAq4D,CAAC;AACx5D,kBAAe,SAAS;;MCeX,GAAG;;;;0BAaD,KAAK;wBAMP,KAAK;;;IAeN,aAAa;QACrB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAkC,YAAY,CAAC,CAAC,CAAC;QACpG,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,KAAK,CAAC,GAAG,EAAE,CAAC;SACb;QAED,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;QAClF,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,WAAW,EAAE,GAAG,OAAO,EAAE,CAAC,CAAC;QAEvD,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,MAAM,iBAAiB,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC;YACtC,iBAAiB,CAAC,EAAE,GAAG,iBAAiB,CAAC,EAAE,IAAI,2BAA2B,QAAQ,EAAE,EAAE,CAAC;YACvF,IAAI,CAAC,mBAAmB,GAAG,iBAAiB,CAAC,EAAE,CAAC;SACjD;KACF;;;;;IAMO,UAAU,CAAC,KAAiB;QAClC,MAAM,aAAa,GAAI,KAAK,CAAC,MAAsB,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAC/E,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,aAAa,EAAE;YACrC,OAAO;SACR;QAED,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,CAAC,CAAC;KAC7C;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,KAAK,EACV,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEvB,4DAAK,KAAK,EAAC,+BAA+B,IACvC,IAAI,CAAC,UAAU,KACd,gFACiB,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,gBACnC,IAAI,CAAC,QAAQ,GAAG,eAAe,GAAG,cAAc,mBAC7C,IAAI,CAAC,mBAAmB,EACvC,IAAI,EAAC,QAAQ,IAEb,+DAAQ,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,eAAe,GAAG,cAAc,GAAW,CAClE,CACV,CACG,EACN,6DAAM,YAAY,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,CACrD,EACP;KACH;;;;;;;;;;","names":[],"sources":["src/components/table/z-tr/styles.css?tag=z-tr&encapsulation=shadow","src/components/table/z-tr/index.tsx"],"sourcesContent":[":host {\n /* number of columns of the row. will be set in component's ts code */\n --columns: 1;\n\n display: grid;\n box-sizing: border-box;\n grid-auto-flow: column;\n grid-template-columns: var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr));\n}\n\n* {\n box-sizing: border-box;\n}\n\n.z-tr--expand-button-container,\n::slotted(*) {\n border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);\n}\n\n::slotted(*:not(:last-child)) {\n border-right: var(--z-table--cell-left-border, none);\n}\n\n:host([expandable]) {\n --show-expandable-button: visible;\n\n cursor: pointer;\n}\n\n:host([expandable]) ::slotted(*) {\n grid-row: 1;\n}\n\n:host([expandable]) ::slotted(:nth-last-child(2)) {\n border-right: none;\n}\n\n:host([expandable]) ::slotted(*:last-child) {\n border-left: 0;\n grid-column: 1 / span calc(var(--columns) + 1);\n grid-row: 2;\n}\n\n:host([expandable]:not([expanded])) ::slotted(*:last-child) {\n display: none;\n}\n\n:host([expanded]) {\n margin-bottom: 4px; /* prevents shadow to be cut by the next element */\n box-shadow: 0 4px 4px -2px var(--shadow-color-base);\n}\n\n:host([expanded]) .z-tr--expand-button-container,\n:host([expanded]) ::slotted(*) {\n background-color: var(--color-background);\n}\n\n.z-tr--expand-button-container {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--z-table--cells-background, var(--color-surface01));\n}\n\n.z-tr--expand-button-container button {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: none;\n margin: auto;\n appearance: none;\n background: transparent;\n cursor: pointer;\n visibility: var(--show-expandable-button, hidden);\n}\n\n.z-tr--expand-button-container button:focus {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n.z-tr--expand-button-container button z-icon {\n --z-icon-width: 16px;\n --z-icon-height: 16px;\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {randomId} from \"../../../utils/utils\";\nimport \"../cells/z-td/index\";\nimport \"../cells/z-th/index\";\n\n/**\n * ZTr component.\n * When the row is `expandable`, you can set the `prevent-expand` css class on an interactive element inside the row\n * to prevent the row from expanding.\n * @slot - ZTr content (`z-td` or `z-th`).\n */\n@Component({\n tag: \"z-tr\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTr {\n @Element() host: HTMLZTrElement;\n\n /**\n * Whether the row is expandable.\n * Use a `z-td` as the last cell of the row for the additional content.\n * It will show a button to expand/collapse the row.\n * The last cell will be hidden until the button or row is clicked.\n *\n * If some element inside the expandable row contains the `prevent-expand` css class,\n * the row will not expand by clicking that element.\n */\n @Prop({reflect: true})\n expandable = false;\n\n /**\n * Whether the row is currently expanded.\n */\n @State()\n expanded = false;\n\n /**\n * HTML Id of the expandable content.\n * It is used to link the button to the content through the `aria-controls` attribute.\n */\n @State()\n expandableContentId: string;\n\n /** Row has been expanded */\n @Event()\n expand: EventEmitter;\n\n @Watch(\"expandable\")\n @Listen(\"colspanchange\")\n protected updateColumns(): void {\n const cells = Array.from(this.host.querySelectorAll<HTMLZTdElement | HTMLZThElement>(\"z-td, z-th\"));\n if (this.expandable) {\n cells.pop();\n }\n\n const columns = cells.map((cell) => cell.colspan || 1).reduce((a, b) => a + b, 0);\n this.host.style.setProperty(\"--columns\", `${columns}`);\n\n if (this.expandable) {\n const expandableContent = cells.pop();\n expandableContent.id = expandableContent.id || `z-tr-expandable-content-${randomId()}`;\n this.expandableContentId = expandableContent.id;\n }\n }\n\n /**\n * Handle click on row.\n * Skip expansion if the click is on a element with `prevent-expand` css class.\n */\n private onRowClick(event: MouseEvent): void {\n const preventExpand = (event.target as HTMLElement).closest(\".prevent-expand\");\n if (!this.expandable || preventExpand) {\n return;\n }\n\n this.expanded = !this.expanded;\n this.expand.emit({expanded: this.expanded});\n }\n\n componentWillLoad(): void {\n this.updateColumns();\n }\n\n render(): HTMLZTrElement {\n return (\n <Host\n role=\"row\"\n onClick={this.onRowClick.bind(this)}\n expanded={this.expanded}\n >\n <div class=\"z-tr--expand-button-container\">\n {this.expandable && (\n <button\n aria-expanded={this.expanded ? \"true\" : \"false\"}\n aria-label={this.expanded ? \"Comprimi riga\" : \"Espandi riga\"}\n aria-controls={this.expandableContentId}\n type=\"button\"\n >\n <z-icon name={this.expanded ? \"minus-circled\" : \"plus-circled\"}></z-icon>\n </button>\n )}\n </div>\n <slot onSlotchange={this.updateColumns.bind(this)}></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/index-fd99721b.js ADDED Viewed

@@ -0,0 +1,45 @@
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-c8ceadeb.js';
+import { P as PopoverPosition, B as ButtonVariant, e as ControlSize } from './index-ee40e66b.js';
+const stylesCss = ":host{position:relative;display:-ms-flexbox;display:flex;max-width:100%;-ms-flex-align:center;align-items:center;padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2));background-color:var(--color-surface01);gap:calc(var(--space-unit) * 2) var(--space-unit)}:host,*{-webkit-box-sizing:border-box;box-sizing:border-box}:host([sticky]){position:-webkit-sticky;position:sticky;z-index:1;top:0;left:0;-webkit-box-shadow:8px 0 16px -8px var(--shadow-color-base);box-shadow:8px 0 16px -8px var(--shadow-color-base)}:host([menu-open]){z-index:2}.cell--content{display:-ms-flexbox;display:flex;width:100%;height:100%;-ms-flex-align:center;align-items:center}:host([show-menu]) .cell--content{-webkit-column-gap:var(--space-unit);-moz-column-gap:var(--space-unit);column-gap:var(--space-unit)}.cell--menu-container{margin-left:auto}:host(:not([show-menu])) .cell--menu-container{opacity:0;pointer-events:none}:host(:is([show-menu],[menu-open])) .cell--menu-container,:host([show-menu]) .cell--menu-container:focus-within{z-index:1;opacity:1;pointer-events:all}:host .cell-popover{z-index:100}@media (min-width: 768px) and (hover: hover){:host([show-menu=\"hover\"]) .cell--menu-container{opacity:0;pointer-events:none}:host([show-menu=\"hover\"]:hover) .cell--menu-container{z-index:1;opacity:1;pointer-events:all}}";
+const ZTdStyle0 = stylesCss;
+const ZTd = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.colspanChange = createEvent(this, "colspanChange", 6);
+        this.colspan = undefined;
+        this.sticky = false;
+        this.showMenu = null;
+        this.popoverPosition = PopoverPosition.AUTO;
+        this.isMenuOpen = false;
+    }
+    updateColspan() {
+        if (this.colspan) {
+            this.host.style.gridColumn = `span ${this.colspan}`;
+        }
+        else {
+            this.host.style.removeProperty("grid-column");
+        }
+        this.colspanChange.emit(this.colspan || 1);
+    }
+    onMenuButtonClick(ev) {
+        ev.stopPropagation();
+        this.popoverEl.open = !this.popoverEl.open;
+    }
+    componentWillLoad() {
+        this.updateColspan();
+    }
+    render() {
+        return (h(Host, { key: 'f7de551489427a62939270e957e45f4dbfd2e276', role: "cell", "menu-open": this.isMenuOpen }, h("div", { key: 'c3bab70a1017dcf030e0a57d36da2a46472b6d94', class: "cell--content" }, h("slot", { key: 'bab52a837654d4d72d34a04a6fac360f46d00485' }), this.showMenu && (h("div", { key: '657f551215f6b9c6cdcc0a5c3727dc1270fa5fe5', class: "cell--menu-container prevent-expand" }, h("z-button", { key: '42b96474d307462bf80defd4014e94dc479fde65', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), h("z-popover", { key: '02c317216820acbc543100ca4368a2f441eaae9f', class: "cell-popover", ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: 'b765e4b58ed69fe10a8337e929b0dc156cfce650', name: "contextual-menu" })))))));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "colspan": ["updateColspan"]
+    }; }
+};
+ZTd.style = ZTdStyle0;
+export { ZTd as Z };
+//# sourceMappingURL=index-fd99721b.js.map

package/dist/esm/index-fd99721b.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"index-fd99721b.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,wyCAAwyC,CAAC;AAC3zC,kBAAe,SAAS;;MCWX,GAAG;;;;;sBAaL,KAAK;wBAQkB,IAAI;+BAMA,eAAe,CAAC,IAAI;0BAM3C,KAAK;;IAgBR,aAAa;QACrB,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;SACrD;aAAM;YACL,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;SAC/C;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC;KAC5C;IAEO,iBAAiB,CAAC,EAAc;QACtC,EAAE,CAAC,eAAe,EAAE,CAAC;QACrB,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;KAC5C;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,MAAM,eACA,IAAI,CAAC,UAAU,IAE1B,4DAAK,KAAK,EAAC,eAAe,IACxB,8DAAa,EACZ,IAAI,CAAC,QAAQ,KACZ,4DAAK,KAAK,EAAC,qCAAqC,IAC9C,iEACE,OAAO,EAAE,aAAa,CAAC,QAAQ,EAC/B,IAAI,EAAC,iBAAiB,EACtB,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAwB,CAAC,EAC1D,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,GAC1C,EACF,kEACE,KAAK,EAAC,cAAc,EACpB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAyB,CAAC,EACzD,MAAM,EAAE,IAAI,CAAC,WAA0B,EACvC,YAAY,EAAE,CAAC,KAAK,MAAM,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAC9D,QAAQ,EAAE,IAAI,CAAC,eAAe,IAE9B,6DAAM,IAAI,EAAC,iBAAiB,GAAQ,CAC1B,CACR,CACP,CACG,CACD,EACP;KACH;;;;;;;;;;","names":[],"sources":["src/components/table/cells/z-td/styles.css?tag=z-td&encapsulation=shadow","src/components/table/cells/z-td/index.tsx"],"sourcesContent":["@import \"../z-table-cells.css\";\n","import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, PopoverPosition, VisibilityCondition} from \"../../../../beans\";\n\n/**\n * ZTd component.\n * @slot - ZTd content.\n */\n@Component({\n tag: \"z-td\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTd {\n @Element() host: HTMLZTdElement;\n\n /**\n * Number of columns that the cell should span.\n */\n @Prop()\n colspan: number;\n\n /**\n * Whether the cell should stick.\n */\n @Prop({reflect: true})\n sticky = false;\n\n /**\n * Enables the contextual menu.\n * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n * Set a nullish value to hide the menu button.\n */\n @Prop({reflect: true})\n showMenu: VisibilityCondition = null;\n\n /**\n * Set the popover position, the default is \"auto\".\n */\n @Prop()\n popoverPosition?: PopoverPosition = PopoverPosition.AUTO;\n\n /**\n * Store the open state of the menu.\n */\n @State()\n isMenuOpen = false;\n\n private menuTrigger: HTMLZButtonElement;\n\n private popoverEl: HTMLZPopoverElement;\n\n /**\n * Emitted when the value of the `colspan` changes.\n */\n @Event({\n bubbles: true,\n cancelable: false,\n })\n colspanChange: EventEmitter<number>;\n\n @Watch(\"colspan\")\n protected updateColspan(): void {\n if (this.colspan) {\n this.host.style.gridColumn = `span ${this.colspan}`;\n } else {\n this.host.style.removeProperty(\"grid-column\");\n }\n\n this.colspanChange.emit(this.colspan || 1);\n }\n\n private onMenuButtonClick(ev: MouseEvent): void {\n ev.stopPropagation();\n this.popoverEl.open = !this.popoverEl.open;\n }\n\n componentWillLoad(): void {\n this.updateColspan();\n }\n\n render(): HTMLZTdElement {\n return (\n <Host\n role=\"cell\"\n menu-open={this.isMenuOpen}\n >\n <div class=\"cell--content\">\n <slot></slot>\n {this.showMenu && (\n <div class=\"cell--menu-container prevent-expand\">\n <z-button\n variant={ButtonVariant.TERTIARY}\n icon=\"contextual-menu\"\n size={ControlSize.X_SMALL}\n ref={(el) => (this.menuTrigger = el as HTMLZButtonElement)}\n onClick={this.onMenuButtonClick.bind(this)}\n />\n <z-popover\n class=\"cell-popover\"\n ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n bindTo={this.menuTrigger as HTMLElement}\n onOpenChange={(event) => (this.isMenuOpen = event.detail.open)}\n position={this.popoverPosition}\n >\n <slot name=\"contextual-menu\"></slot>\n </z-popover>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}