npm - @zanichelli/albe-web-components - Versions diffs - 19.2.12-rc3 → 19.2.12 - Mend

@zanichelli/albe-web-components 19.2.12-rc3 → 19.2.12

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 (1449) hide show

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

@@ -1 +1,2 @@
-import{proxyCustomElement as o,HTMLElement as r,createEvent as e,h as t,transformTag as i}from"@stencil/core/internal/client";import{d as a}from"./index3.js";const s=o(class extends r{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.toggleClick=e(this,"toggleClick",7),this.isdisabled=!1,this.opened=!1,this.ariaLabel=""}emitToggleClick(){this.isdisabled||(this.opened=!this.opened,this.toggleClick.emit(this.opened))}render(){return t("button",{key:"3448d665412b78c55f77951e408df8abaa158803",tabindex:this.avoidclick?"-1":"0",class:{isopen:this.opened,"avoid-clicks":this.avoidclick},disabled:this.isdisabled,"aria-expanded":this.opened?"true":"false","aria-label":this.ariaLabel,onClick:()=>this.emitToggleClick()},t("z-icon",{key:"4514f07522fc6ecfced03793a5bc58e7c8f185e8",name:this.opened?"chevron-down":"chevron-up",width:16,height:16}),this.label)}static get style(){return"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:var(--shadow-2);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}"}},[1,"z-toggle-button",{label:[1],isdisabled:[4],avoidclick:[4],opened:[1028],ariaLabel:[1,"aria-label"]}]),n=s,l=function(){"undefined"!=typeof customElements&&["z-toggle-button","z-icon"].forEach((o=>{switch(o){case"z-toggle-button":customElements.get(i(o))||customElements.define(i(o),s);break;case"z-icon":customElements.get(i(o))||a()}}))};export{n as ZToggleButton,l as defineCustomElement}
+import{proxyCustomElement as o,HTMLElement as r,createEvent as e,h as t,transformTag as i}from"@stencil/core/internal/client";import{d as a}from"./index3.js";const s=()=>`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:var(--shadow-2);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 n=o(class o extends r{constructor(o){super();if(o!==false){this.__registerHost()}this.__attachShadow();this.toggleClick=e(this,"toggleClick",7);this.isdisabled=false;this.opened=false;this.ariaLabel=""}emitToggleClick(){if(this.isdisabled){return}this.opened=!this.opened;this.toggleClick.emit(this.opened)}render(){return t("button",{key:"12715211c2a202659aebbbafce50ef723523e5b5",tabindex:this.avoidclick?"-1":"0",class:{isopen:this.opened,"avoid-clicks":this.avoidclick},disabled:this.isdisabled,"aria-expanded":this.opened?"true":"false","aria-label":this.ariaLabel,onClick:()=>this.emitToggleClick()},t("z-icon",{key:"2e6c9c85c5728eb03116da7b58f13da76abd1cf1",name:this.opened?"chevron-down":"chevron-up",width:16,height:16}),this.label)}static get style(){return s()}},[1,"z-toggle-button",{label:[1],isdisabled:[4],avoidclick:[4],opened:[1028],ariaLabel:[1,"aria-label"]}]);function l(){if(typeof customElements==="undefined"){return}const o=["z-toggle-button","z-icon"];o.forEach((o=>{switch(o){case"z-toggle-button":if(!customElements.get(i(o))){customElements.define(i(o),n)}break;case"z-icon":if(!customElements.get(i(o))){a()}break}}))}const c=n;const d=l;export{c as ZToggleButton,d as defineCustomElement};
+//# sourceMappingURL=z-toggle-button.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"names":["stylesCss","ZToggleButton","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","isdisabled","opened","ariaLabel","emitToggleClick","toggleClick","emit","render","h","key","tabindex","avoidclick","class","isopen","disabled","onClick","name","width","height","label"],"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: var(--shadow-2);\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, ComponentInterface, 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 implements ComponentInterface {\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"],"mappings":"8JAAA,MAAMA,EAAY,IAAM,kiC,MCOXC,EAAaC,EAAA,MAAAD,UAAAE,EAL1B,WAAAC,CAAAC,G,2GAYEC,KAAAC,WAAuB,MAQvBD,KAAAE,OAAmB,MAInBF,KAAAG,UAAY,EAqCb,CA/BS,eAAAC,GACN,GAAIJ,KAAKC,WAAY,CACnB,M,CAGFD,KAAKE,QAAUF,KAAKE,OACpBF,KAAKK,YAAYC,KAAKN,KAAKE,O,CAG7B,MAAAK,GACE,OACEC,EAAA,UAAAC,IAAA,2CACEC,SAAUV,KAAKW,WAAa,KAAO,IACnCC,MAAO,CACLC,OAAUb,KAAKE,OACf,eAAgBF,KAAKW,YAEvBG,SAAUd,KAAKC,WAAU,gBACVD,KAAKE,OAAS,OAAS,QAAO,aACjCF,KAAKG,UACjBY,QAAS,IAAMf,KAAKI,mBAEpBI,EAAA,UAAAC,IAAA,2CACEO,KAAMhB,KAAKE,OAAS,eAAiB,aACrCe,MAAO,GACPC,OAAQ,KAETlB,KAAKmB,M","ignoreList":[]}

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

@@ -1 +1,2 @@
-import{proxyCustomElement as e,HTMLElement as t,createEvent as c,h as s,Host as i,transformTag as l}from"@stencil/core/internal/client";import{k as o}from"./index2.js";import{r as a}from"./utils.js";import{d as r}from"./index3.js";const n=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.toggleClick=c(this,"toggleClick",7),this.disabled=!1,this.labelPosition=o.LEFT,this.checked=!1,this.htmlid="toggle-switch-id-"+a()}emitToggleClick(){this.toggleClick.emit({id:this.htmlid,checked:this.checked})}handleClick(e){this.disabled||(this.checked=e.target.checked,this.emitToggleClick())}render(){return s(i,{key:"d31f156ba646f113f8f2509afdaee3e79fdb33f7"},s("input",{key:"48a3963dd555c00867816af0169ed677dc4ccc68",id:this.htmlid,type:"checkbox",checked:this.checked,disabled:this.disabled,onChange:this.handleClick.bind(this)}),s("label",{key:"3872377775f759727b62288794555cd84e60b12c",htmlFor:this.htmlid,class:{[this.labelPosition]:!0,disabled:this.disabled}},s("span",{key:"b46cb8e359cdb11e696a116661659c9872d49a1e"},s("slot",{key:"42fc26c0ced09c5fdda062735fe543b8cb57a658"})),s("span",{key:"b55f0fbd2ff23f01c1ac0b845c6af5571d81c13f",class:{container:!0,disabled:this.disabled,checked:this.checked}},s("span",{key:"87bc69be905d84458fec5384f756348a94e446fe",class:"circle"},this.checked&&s("z-icon",{key:"4464b2bf8aa91a7c0c5c9e2bff26e84ff7c34be2",width:12,height:12,name:"checkmark"})))))}static get style(){return'.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}'}},[262,"z-toggle-switch",{disabled:[516],labelPosition:[513,"label-position"],checked:[1028],htmlid:[1]}]),g=n,h=function(){"undefined"!=typeof customElements&&["z-toggle-switch","z-icon"].forEach((e=>{switch(e){case"z-toggle-switch":customElements.get(l(e))||customElements.define(l(e),n);break;case"z-icon":customElements.get(l(e))||r()}}))};export{g as ZToggleSwitch,h as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as t,createEvent as s,h as c,Host as i,transformTag as a}from"@stencil/core/internal/client";import{k as l}from"./index2.js";import{r as o}from"./utils.js";import{d as r}from"./index3.js";const n=()=>`.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 g=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.toggleClick=s(this,"toggleClick",7);this.disabled=false;this.labelPosition=l.LEFT;this.checked=false;this.htmlid=`toggle-switch-id-${o()}`}emitToggleClick(){this.toggleClick.emit({id:this.htmlid,checked:this.checked})}handleClick(e){if(this.disabled){return}this.checked=e.target.checked;this.emitToggleClick()}render(){return c(i,{key:"56f9d8ff6eb13dfa9c113cbf6c0938e141d55c67"},c("input",{key:"3417b90e089286fad9bccb61a5f4b39ae4168f91",id:this.htmlid,type:"checkbox",checked:this.checked,disabled:this.disabled,onChange:this.handleClick.bind(this)}),c("label",{key:"ddd2fe347095d9551d8881c83a9a88f2a76baa75",htmlFor:this.htmlid,class:{[this.labelPosition]:true,disabled:this.disabled}},c("span",{key:"8532e35c90ac967e7bd5ba19b6cfb427e30a8a9e"},c("slot",{key:"013eb019d7033bdf49fc2ca79ec647dc47aa5516"})),c("span",{key:"4aa4b5abb12d819bb253c68f8315baf89935dd70",class:{container:true,disabled:this.disabled,checked:this.checked}},c("span",{key:"1379aa626ccb15cc65337fd09063865051078dfb",class:"circle"},this.checked&&c("z-icon",{key:"c69f5f85fd886ae9ab30a559a6db66c1ad4f1db7",width:12,height:12,name:"checkmark"})))))}static get style(){return n()}},[262,"z-toggle-switch",{disabled:[516],labelPosition:[513,"label-position"],checked:[1028],htmlid:[1]}]);function h(){if(typeof customElements==="undefined"){return}const e=["z-toggle-switch","z-icon"];e.forEach((e=>{switch(e){case"z-toggle-switch":if(!customElements.get(a(e))){customElements.define(a(e),g)}break;case"z-icon":if(!customElements.get(a(e))){r()}break}}))}const d=g;const b=h;export{d as ZToggleSwitch,b as defineCustomElement};
+//# sourceMappingURL=z-toggle-switch.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"names":["stylesCss","ZToggleSwitch","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","disabled","labelPosition","LabelPosition","LEFT","checked","htmlid","randomId","emitToggleClick","toggleClick","emit","id","handleClick","ev","target","render","h","Host","key","type","onChange","bind","htmlFor","class","container","width","height","name"],"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, ComponentInterface, 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 implements ComponentInterface {\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"],"mappings":"uOAAA,MAAMA,EAAY,IAAM,05E,MCUXC,EAAaC,EAAA,MAAAD,UAAAE,EAN1B,WAAAC,CAAAC,G,qFASEC,KAAAC,SAAqB,MAIrBD,KAAAE,cAAiBC,EAAcC,KAI/BJ,KAAAK,QAAoB,MAIpBL,KAAAM,OAAS,oBAAoBC,KA+D9B,CAzDS,eAAAC,GACNR,KAAKS,YAAYC,KAAK,CACpBC,GAAIX,KAAKM,OACTD,QAASL,KAAKK,S,CAIV,WAAAO,CAAYC,GAClB,GAAIb,KAAKC,SAAU,CACjB,M,CAGFD,KAAKK,QAAUQ,EAAGC,OAAOT,QACzBL,KAAKQ,iB,CAGP,MAAAO,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,SAAAE,IAAA,2CACEP,GAAIX,KAAKM,OACTa,KAAK,WACLd,QAASL,KAAKK,QACdJ,SAAUD,KAAKC,SACfmB,SAAUpB,KAAKY,YAAYS,KAAKrB,QAElCgB,EAAA,SAAAE,IAAA,2CACEI,QAAStB,KAAKM,OACdiB,MAAO,CACL,CAACvB,KAAKE,eAAgB,KACtBD,SAAUD,KAAKC,WAGjBe,EAAA,QAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,8CAEFF,EAAA,QAAAE,IAAA,2CACEK,MAAO,CACLC,UAAW,KACXvB,SAAUD,KAAKC,SACfI,QAASL,KAAKK,UAGhBW,EAAA,QAAAE,IAAA,2CAAMK,MAAM,UACTvB,KAAKK,SACJW,EAAA,UAAAE,IAAA,2CACEO,MAAO,GACPC,OAAQ,GACRC,KAAK,iB","ignoreList":[]}

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

@@ -1 +1,2 @@
-import{proxyCustomElement as t,HTMLElement as e,createEvent as i,h as o,Host as n,transformTag as s}from"@stencil/core/internal/client";import{P as a,g as r}from"./index2.js";import{a as l}from"./utils.js";import{d as h}from"./index3.js";import{d}from"./index17.js";import{d as f}from"./index27.js";const b=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.toggleSubmenu=i(this,"toggleSubmenu",7),this.toggleTooltip=i(this,"toggleTooltip",7),this.tooltipPosition=a.TOP,this.active=!1,this.disabled=!1,this.open=!1,this.tooltipOpen=!1,this.hasSlottedContent=!1,this.isMobile=!1,this.hasNestedOpenTools=!1,this.isNested=!1,this.handleTooltipOpen=t=>{this.tooltip&&!this.open&&this.buttonRef.contains(t.target)&&(clearTimeout(this.hoverDelay),this.hoverDelay=setTimeout((()=>{this.tooltipOpen=!0}),1e3))},this.handleTooltipClose=t=>{var e;this.tooltip&&(null===(e=t.relatedTarget)||void 0===e?void 0:e.closest("z-tooltip"))!==this.tooltipRef&&(clearTimeout(this.hoverDelay),this.tooltipOpen=!1)},this.handleClick=()=>{if(!this.disabled&&this.hasSlottedContent&&(this.open=!this.open,this.open)){const t=this.hostElement.querySelector(":scope > z-color-picker");if(t)return void t.setFocus();const e=this.hostElement.querySelector(":scope > z-toolbar z-tool[active]:not(:disabled)")||this.hostElement.querySelector(":scope > z-toolbar z-tool:not(:disabled)");null==e||e.setFocus()}},this.onTooltipOpenChange=t=>{t.target!==this.tooltipRef&&(this.tooltipOpen=t.detail.open)}}handleOpenChange(){this.toggleSubmenu.emit(this.open)}handleTooltipOpenChange(){this.toggleTooltip.emit(this.tooltipOpen)}handleKeyDown(t){if(this.open&&!this.hasNestedOpenTools)switch(t.key){case r.ESC:t.stopPropagation(),this.open=!1,this.setFocus();break;case r.TAB:t.shiftKey&&t.target.closest("z-tool:not(:scope)")===this.hostElement&&(this.open=!1)}}onOutsideClick(t){const e=t.composedPath()[0];!this.open||l(this.hostElement,e)||this.hasNestedOpenTools||(this.open=!1)}onNestedToolToggle(t){t.target!==this.hostElement&&(this.hasNestedOpenTools=!0===t.detail||Array.from(this.hostElement.querySelectorAll("z-tool")).some((t=>t.open)))}handleColorSelected(t){Array.from(this.hostElement.children).includes(t.target)&&(this.indicatorColor=t.detail,this.open=!1,this.setFocus())}handleExternalFocusin(t){l(this.hostElement,t.target)||(this.open=!1)}async setFocus(){this.disabled||setTimeout((()=>{var t;null===(t=this.buttonRef)||void 0===t||t.focus()}),50)}async setTabIndex(t){this.buttonRef&&(this.buttonRef.tabIndex=this.disabled?-1:t)}async closeTooltip(){clearTimeout(this.hoverDelay),this.tooltipOpen=!1}componentWillLoad(){this.hasSlottedContent=this.hostElement.children.length>0,this.isNested=!!this.hostElement.closest("z-tool:not(:scope)"),this.mainToolbar=this.hostElement.closest("z-toolbar:not(z-toolbar z-toolbar)"),this.hasNestedOpenTools=!!this.hostElement.querySelector("z-tool[open]"),this.mql=matchMedia("(max-width: 767px)"),this.onMobileViewChange=t=>this.isMobile=t.matches,this.mql.addEventListener("change",this.onMobileViewChange),this.isMobile=this.mql.matches}disconnectedCallback(){var t;clearTimeout(this.hoverDelay),null===(t=this.mql)||void 0===t||t.removeEventListener("change",this.onMobileViewChange)}render(){return o(n,{key:"f5da5cd309607dc94dd12a28596b2ea02d28ba4c",class:{"z-tool-tooltip-open":this.tooltipOpen}},o("button",{key:"be63d078b5035ba1f08c480c8c08f365b3115191",class:"z-tool",type:"button",ref:t=>this.buttonRef=t,"aria-pressed":this.hasSlottedContent?void 0:this.active?"true":"false","aria-expanded":this.hasSlottedContent?this.open?"true":"false":void 0,"aria-haspopup":this.hasSlottedContent?"true":void 0,"aria-label":this.htmlAriaLabel||this.tooltip||void 0,disabled:this.disabled,onClick:this.handleClick,onMouseEnter:this.handleTooltipOpen,onMouseLeave:this.handleTooltipClose,onFocus:this.handleTooltipOpen,onBlur:this.handleTooltipClose},o("z-icon",{key:"a08b5432871a1522374633050a835bb18001a6d6",ref:t=>this.iconRef=t,name:this.icon,indicatorColor:this.indicatorColor})),this.tooltip&&o("z-tooltip",{key:"9e0fa11a43662f333404543e315b097aa96ab08c",class:"z-tool-tooltip",ref:t=>this.tooltipRef=t,bindTo:this.iconRef,open:this.tooltipOpen&&!this.open,position:this.isNested?a.BOTTOM:this.tooltipPosition,dark:!0,onMouseLeave:this.handleTooltipClose,onBlur:this.handleTooltipClose,onOpenChange:this.onTooltipOpenChange},o("span",{key:"bfc2be83824830ed05b70f423e9f044015624f49",class:"body-4"},this.tooltip)),this.hasSlottedContent&&o("z-popover",{key:"717697756e5333f066f96c96695cd9741b006e93",class:"z-tool-submenu",open:this.open,bindTo:this.isMobile&&this.mainToolbar?this.mainToolbar:this.hostElement,center:!0,closable:!1,position:this.isMobile?a.TOP:a.BOTTOM},o("slot",{key:"d151d02e38fb7a0941012ec969b6cea647721846"})))}get hostElement(){return this}static get watchers(){return{open:[{handleOpenChange:0}],tooltipOpen:[{handleTooltipOpenChange:0}]}}static get style(){return':host,*{box-sizing:border-box}.z-tool{--z-tool-size:calc(var(--space-unit) * 5.5);--z-tool-icon-size:calc(var(--space-unit) * 2.5);position:relative;display:inline-flex;width:var(--z-tool-size);height:var(--z-tool-size);align-items:center;justify-content:center;padding:0;border:none;margin:0;background-color:var(--color-surface01);border-radius:var(--border-radius);cursor:pointer}:host(:is([active],[open])) .z-tool{box-shadow:inset 0 0 0 2px var(--color-primary01)}:host([open]) .z-tool{background:var(--color-primary03)}@media (hover: hover){:host(:hover),:host(.z-tool-tooltip-open){z-index:1}:host(:not([disabled])) .z-tool:hover{background-color:var(--color-primary03)}}.z-tool:focus:focus-visible{background-color:var(--color-primary03);outline:none}z-icon{--z-icon-width:var(--z-tool-icon-size);--z-icon-height:var(--z-tool-icon-size);display:block;fill:var(--color-default-icon)}:host([disabled]) .z-tool{color:var(--color-disabled01-icon);cursor:not-allowed}:host([disabled]) z-icon{fill:var(--color-disabled01-icon)}.z-tool-tooltip{--z-tooltip-padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);--z-tooltip-shadow-filter:drop-shadow(0 4px 8px var(--shadow-color-base));position:relative;z-index:2;font-family:var(--font-family-sans);white-space:nowrap}.z-tool-submenu{z-index:3;border-radius:calc(var(--border-radius) + var(--border-size-small))}.z-tool-submenu ::slotted(z-color-picker){border:var(--border-size-small) solid var(--color-surface03);border-radius:var(--border-radius)}@media (max-width: 767px) and (hover: none){.z-tool-tooltip{display:none !important}}:root{--font-family-sans:"IBM Plex Sans", sans-serif;--font-family-serif:"IBM Plex Serif", serif;--font-lt:300;--font-rg:400;--font-sb:600;--font-bd:700;--font-size-1:0.75rem;--font-size-2:0.875rem;--font-size-3:1rem;--font-size-4:1.125rem;--font-size-5:1.25rem;--font-size-6:1.5rem;--font-size-7:1.75rem;--font-size-8:2rem;--font-size-9:2.25rem;--font-size-10:2.625rem;--font-size-11:3rem;--font-size-12:3.375rem;--font-size-13:3.75rem;--font-size-14:4.25rem;--font-size-15:4.75rem;--font-size-16:5.25rem;--font-size-17:5.75rem;--section-title-1:var(--font-sb) var(--font-size-11) / 1.083 var(--font-family-serif);--section-title-2:var(--font-sb) var(--font-size-10) / 1.142 var(--font-family-serif);--section-title-3:var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);--section-title-4:var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);--section-title-5:var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);--section-title-6:var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif)}.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.heading-3,.heading-3-sb,.heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.heading-4,.heading-4-sb,.heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.body-1,.body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.body-2,.body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.body-3,.body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.body-4,.body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.body-5,.body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.interactive-1,.interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.interactive-2,.interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.interactive-3,.interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.helper,.helper-sb{font-size:var(--font-size-1);font-style:italic;font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.section-title-1{font:var(--section-title-1)}.section-title-2{font:var(--section-title-2)}.section-title-3{font:var(--section-title-3)}.section-title-4{font:var(--section-title-4)}.section-title-5{font:var(--section-title-5)}.section-title-6{font:var(--section-title-6)}@media (min-width: 1152px){.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}}@media (max-width: 767px){.mobile-heading-1,.mobile-heading-1-sb,.mobile-heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.mobile-heading-2,.mobile-heading-2-sb,.mobile-heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.mobile-heading-3,.mobile-heading-3-sb,.mobile-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.mobile-heading-4,.mobile-heading-4-sb,.mobile-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.mobile-body-1,.mobile-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.mobile-body-2,.mobile-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.mobile-body-3,.mobile-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.mobile-body-4,.mobile-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.mobile-body-5,.mobile-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.mobile-interactive-1,.mobile-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.mobile-interactive-2,.mobile-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.mobile-interactive-3,.mobile-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.mobile-section-title-1{font:var(--section-title-1)}.mobile-section-title-2{font:var(--section-title-2)}.mobile-section-title-3{font:var(--section-title-3)}.mobile-section-title-4{font:var(--section-title-4)}.mobile-section-title-5{font:var(--section-title-5)}.mobile-section-title-6{font:var(--section-title-6)}.mobile-heading-1-lt,.mobile-heading-2-lt,.mobile-heading-3-lt,.mobile-heading-4-lt{font-weight:var(--font-lt)}.mobile-heading-1-sb,.mobile-heading-2-sb,.mobile-heading-3-sb,.mobile-heading-4-sb,.mobile-body-1-sb,.mobile-body-2-sb,.mobile-body-3-sb,.mobile-body-4-sb,.mobile-body-5-sb,.mobile-interactive-1-sb,.mobile-interactive-2-sb,.mobile-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 768px) and (max-width: 1151px){.tablet-heading-1,.tablet-heading-1-sb,.tablet-heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.tablet-heading-2,.tablet-heading-2-sb,.tablet-heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.tablet-heading-3,.tablet-heading-3-sb,.tablet-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.tablet-heading-4,.tablet-heading-4-sb,.tablet-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.tablet-body-1,.tablet-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.tablet-body-2,.tablet-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.tablet-body-3,.tablet-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.tablet-body-4,.tablet-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.tablet-body-5,.tablet-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.tablet-interactive-1,.tablet-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.tablet-interactive-2,.tablet-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.tablet-interactive-3,.tablet-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.tablet-section-title-1{font:var(--section-title-1)}.tablet-section-title-2{font:var(--section-title-2)}.tablet-section-title-3{font:var(--section-title-3)}.tablet-section-title-4{font:var(--section-title-4)}.tablet-section-title-5{font:var(--section-title-5)}.tablet-section-title-6{font:var(--section-title-6)}.tablet-heading-1-lt,.tablet-heading-2-lt,.tablet-heading-3-lt,.tablet-heading-4-lt{font-weight:var(--font-lt)}.tablet-heading-1-sb,.tablet-heading-2-sb,.tablet-heading-3-sb,.tablet-heading-4-sb,.tablet-body-1-sb,.tablet-body-2-sb,.tablet-body-3-sb,.tablet-body-4-sb,.tablet-body-5-sb,.tablet-interactive-1-sb,.tablet-interactive-2-sb,.tablet-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 1152px) and (max-width: 1365px){.desktop-heading-1,.desktop-heading-1-sb,.desktop-heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.desktop-heading-2,.desktop-heading-2-sb,.desktop-heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.desktop-heading-3,.desktop-heading-3-sb,.desktop-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.desktop-heading-4,.desktop-heading-4-sb,.desktop-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.desktop-body-1,.desktop-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.desktop-body-2,.desktop-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.desktop-body-3,.desktop-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.desktop-body-4,.desktop-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.desktop-body-5,.desktop-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.desktop-interactive-1,.desktop-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.desktop-interactive-2,.desktop-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.desktop-interactive-3,.desktop-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.desktop-section-title-1{font:var(--section-title-1)}.desktop-section-title-2{font:var(--section-title-2)}.desktop-section-title-3{font:var(--section-title-3)}.desktop-section-title-4{font:var(--section-title-4)}.desktop-section-title-5{font:var(--section-title-5)}.desktop-section-title-6{font:var(--section-title-6)}.desktop-heading-1-lt,.desktop-heading-2-lt,.desktop-heading-3-lt,.desktop-heading-4-lt{font-weight:var(--font-lt)}.desktop-heading-1-sb,.desktop-heading-2-sb,.desktop-heading-3-sb,.desktop-heading-4-sb,.desktop-body-1-sb,.desktop-body-2-sb,.desktop-body-3-sb,.desktop-body-4-sb,.desktop-body-5-sb,.desktop-interactive-1-sb,.desktop-interactive-2-sb,.desktop-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 1366px){.wide-heading-1,.wide-heading-1-sb,.wide-heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.wide-heading-2,.wide-heading-2-sb,.wide-heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.wide-heading-3,.wide-heading-3-sb,.wide-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.wide-heading-4,.wide-heading-4-sb,.wide-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.wide-body-1,.wide-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.wide-body-2,.wide-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.wide-body-3,.wide-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.wide-body-4,.wide-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.wide-body-5,.wide-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.wide-interactive-1,.wide-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.wide-interactive-2,.wide-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.wide-interactive-3,.wide-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.wide-section-title-1{font:var(--section-title-1)}.wide-section-title-2{font:var(--section-title-2)}.wide-section-title-3{font:var(--section-title-3)}.wide-section-title-4{font:var(--section-title-4)}.wide-section-title-5{font:var(--section-title-5)}.wide-section-title-6{font:var(--section-title-6)}.wide-heading-1-lt,.wide-heading-2-lt,.wide-heading-3-lt,.wide-heading-4-lt{font-weight:var(--font-lt)}.wide-heading-1-sb,.wide-heading-2-sb,.wide-heading-3-sb,.wide-heading-4-sb,.wide-body-1-sb,.wide-body-2-sb,.wide-body-3-sb,.wide-body-4-sb,.wide-body-5-sb,.wide-interactive-1-sb,.wide-interactive-2-sb,.wide-interactive-3-sb{font-weight:var(--font-sb)}}.heading-1-lt,.heading-2-lt,.heading-3-lt,.heading-4-lt{font-weight:var(--font-lt)}.heading-1-sb,.heading-2-sb,.heading-3-sb,.heading-4-sb,.body-1-sb,.body-2-sb,.body-3-sb,.body-4-sb,.body-5-sb,.interactive-1-sb,.interactive-2-sb,.interactive-3-sb,.helper-sb{font-weight:var(--font-sb)}'}},[257,"z-tool",{icon:[1],tooltip:[1],tooltipPosition:[1,"tooltip-position"],htmlAriaLabel:[1,"html-aria-label"],active:[516],disabled:[516],open:[1540],indicatorColor:[1025,"indicator-color"],tooltipOpen:[32],hasSlottedContent:[32],isMobile:[32],hasNestedOpenTools:[32],setFocus:[64],setTabIndex:[64],closeTooltip:[64]},[[0,"keydown","handleKeyDown"],[16,"click","onOutsideClick"],[0,"toggleSubmenu","onNestedToolToggle"],[0,"colorSelected","handleColorSelected"],[17,"focusin","handleExternalFocusin"]],{open:[{handleOpenChange:0}],tooltipOpen:[{handleTooltipOpenChange:0}]}]),g=b,c=function(){"undefined"!=typeof customElements&&["z-tool","z-icon","z-popover","z-tooltip"].forEach((t=>{switch(t){case"z-tool":customElements.get(s(t))||customElements.define(s(t),b);break;case"z-icon":customElements.get(s(t))||h();break;case"z-popover":customElements.get(s(t))||d();break;case"z-tooltip":customElements.get(s(t))||f()}}))};export{g as ZTool,c as defineCustomElement}
+import{proxyCustomElement as t,HTMLElement as e,createEvent as i,h as o,Host as n,transformTag as s}from"@stencil/core/internal/client";import{P as a,g as r}from"./index2.js";import{a as l}from"./utils.js";import{d as h}from"./index3.js";import{d as f}from"./index17.js";import{d}from"./index27.js";const b=()=>`:host,*{box-sizing:border-box}.z-tool{--z-tool-size:calc(var(--space-unit) * 5.5);--z-tool-icon-size:calc(var(--space-unit) * 2.5);position:relative;display:inline-flex;width:var(--z-tool-size);height:var(--z-tool-size);align-items:center;justify-content:center;padding:0;border:none;margin:0;background-color:var(--color-surface01);border-radius:var(--border-radius);cursor:pointer}:host(:is([active],[open])) .z-tool{box-shadow:inset 0 0 0 2px var(--color-primary01)}:host([open]) .z-tool{background:var(--color-primary03)}@media (hover: hover){:host(:hover),:host(.z-tool-tooltip-open){z-index:1}:host(:not([disabled])) .z-tool:hover{background-color:var(--color-primary03)}}.z-tool:focus:focus-visible{background-color:var(--color-primary03);outline:none}z-icon{--z-icon-width:var(--z-tool-icon-size);--z-icon-height:var(--z-tool-icon-size);display:block;fill:var(--color-default-icon)}:host([disabled]) .z-tool{color:var(--color-disabled01-icon);cursor:not-allowed}:host([disabled]) z-icon{fill:var(--color-disabled01-icon)}.z-tool-tooltip{--z-tooltip-padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);--z-tooltip-shadow-filter:drop-shadow(0 4px 8px var(--shadow-color-base));position:relative;z-index:2;font-family:var(--font-family-sans);white-space:nowrap}.z-tool-submenu{z-index:3;border-radius:calc(var(--border-radius) + var(--border-size-small))}.z-tool-submenu ::slotted(z-color-picker){border:var(--border-size-small) solid var(--color-surface03);border-radius:var(--border-radius)}@media (max-width: 767px) and (hover: none){.z-tool-tooltip{display:none !important}}`;const g=()=>`:root{--font-family-sans:"IBM Plex Sans", sans-serif;--font-family-serif:"IBM Plex Serif", serif;--font-lt:300;--font-rg:400;--font-sb:600;--font-bd:700;--font-size-1:0.75rem;--font-size-2:0.875rem;--font-size-3:1rem;--font-size-4:1.125rem;--font-size-5:1.25rem;--font-size-6:1.5rem;--font-size-7:1.75rem;--font-size-8:2rem;--font-size-9:2.25rem;--font-size-10:2.625rem;--font-size-11:3rem;--font-size-12:3.375rem;--font-size-13:3.75rem;--font-size-14:4.25rem;--font-size-15:4.75rem;--font-size-16:5.25rem;--font-size-17:5.75rem;--section-title-1:var(--font-sb) var(--font-size-11) / 1.083 var(--font-family-serif);--section-title-2:var(--font-sb) var(--font-size-10) / 1.142 var(--font-family-serif);--section-title-3:var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);--section-title-4:var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);--section-title-5:var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);--section-title-6:var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif)}.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.heading-3,.heading-3-sb,.heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.heading-4,.heading-4-sb,.heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.body-1,.body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.body-2,.body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.body-3,.body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.body-4,.body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.body-5,.body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.interactive-1,.interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.interactive-2,.interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.interactive-3,.interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.helper,.helper-sb{font-size:var(--font-size-1);font-style:italic;font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.section-title-1{font:var(--section-title-1)}.section-title-2{font:var(--section-title-2)}.section-title-3{font:var(--section-title-3)}.section-title-4{font:var(--section-title-4)}.section-title-5{font:var(--section-title-5)}.section-title-6{font:var(--section-title-6)}@media (min-width: 1152px){.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}}@media (max-width: 767px){.mobile-heading-1,.mobile-heading-1-sb,.mobile-heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.mobile-heading-2,.mobile-heading-2-sb,.mobile-heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.mobile-heading-3,.mobile-heading-3-sb,.mobile-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.mobile-heading-4,.mobile-heading-4-sb,.mobile-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.mobile-body-1,.mobile-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.mobile-body-2,.mobile-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.mobile-body-3,.mobile-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.mobile-body-4,.mobile-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.mobile-body-5,.mobile-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.mobile-interactive-1,.mobile-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.mobile-interactive-2,.mobile-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.mobile-interactive-3,.mobile-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.mobile-section-title-1{font:var(--section-title-1)}.mobile-section-title-2{font:var(--section-title-2)}.mobile-section-title-3{font:var(--section-title-3)}.mobile-section-title-4{font:var(--section-title-4)}.mobile-section-title-5{font:var(--section-title-5)}.mobile-section-title-6{font:var(--section-title-6)}.mobile-heading-1-lt,.mobile-heading-2-lt,.mobile-heading-3-lt,.mobile-heading-4-lt{font-weight:var(--font-lt)}.mobile-heading-1-sb,.mobile-heading-2-sb,.mobile-heading-3-sb,.mobile-heading-4-sb,.mobile-body-1-sb,.mobile-body-2-sb,.mobile-body-3-sb,.mobile-body-4-sb,.mobile-body-5-sb,.mobile-interactive-1-sb,.mobile-interactive-2-sb,.mobile-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 768px) and (max-width: 1151px){.tablet-heading-1,.tablet-heading-1-sb,.tablet-heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.tablet-heading-2,.tablet-heading-2-sb,.tablet-heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.tablet-heading-3,.tablet-heading-3-sb,.tablet-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.tablet-heading-4,.tablet-heading-4-sb,.tablet-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.tablet-body-1,.tablet-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.tablet-body-2,.tablet-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.tablet-body-3,.tablet-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.tablet-body-4,.tablet-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.tablet-body-5,.tablet-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.tablet-interactive-1,.tablet-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.tablet-interactive-2,.tablet-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.tablet-interactive-3,.tablet-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.tablet-section-title-1{font:var(--section-title-1)}.tablet-section-title-2{font:var(--section-title-2)}.tablet-section-title-3{font:var(--section-title-3)}.tablet-section-title-4{font:var(--section-title-4)}.tablet-section-title-5{font:var(--section-title-5)}.tablet-section-title-6{font:var(--section-title-6)}.tablet-heading-1-lt,.tablet-heading-2-lt,.tablet-heading-3-lt,.tablet-heading-4-lt{font-weight:var(--font-lt)}.tablet-heading-1-sb,.tablet-heading-2-sb,.tablet-heading-3-sb,.tablet-heading-4-sb,.tablet-body-1-sb,.tablet-body-2-sb,.tablet-body-3-sb,.tablet-body-4-sb,.tablet-body-5-sb,.tablet-interactive-1-sb,.tablet-interactive-2-sb,.tablet-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 1152px) and (max-width: 1365px){.desktop-heading-1,.desktop-heading-1-sb,.desktop-heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.desktop-heading-2,.desktop-heading-2-sb,.desktop-heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.desktop-heading-3,.desktop-heading-3-sb,.desktop-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.desktop-heading-4,.desktop-heading-4-sb,.desktop-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.desktop-body-1,.desktop-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.desktop-body-2,.desktop-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.desktop-body-3,.desktop-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.desktop-body-4,.desktop-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.desktop-body-5,.desktop-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.desktop-interactive-1,.desktop-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.desktop-interactive-2,.desktop-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.desktop-interactive-3,.desktop-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.desktop-section-title-1{font:var(--section-title-1)}.desktop-section-title-2{font:var(--section-title-2)}.desktop-section-title-3{font:var(--section-title-3)}.desktop-section-title-4{font:var(--section-title-4)}.desktop-section-title-5{font:var(--section-title-5)}.desktop-section-title-6{font:var(--section-title-6)}.desktop-heading-1-lt,.desktop-heading-2-lt,.desktop-heading-3-lt,.desktop-heading-4-lt{font-weight:var(--font-lt)}.desktop-heading-1-sb,.desktop-heading-2-sb,.desktop-heading-3-sb,.desktop-heading-4-sb,.desktop-body-1-sb,.desktop-body-2-sb,.desktop-body-3-sb,.desktop-body-4-sb,.desktop-body-5-sb,.desktop-interactive-1-sb,.desktop-interactive-2-sb,.desktop-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 1366px){.wide-heading-1,.wide-heading-1-sb,.wide-heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.wide-heading-2,.wide-heading-2-sb,.wide-heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.wide-heading-3,.wide-heading-3-sb,.wide-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.wide-heading-4,.wide-heading-4-sb,.wide-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.wide-body-1,.wide-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.wide-body-2,.wide-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.wide-body-3,.wide-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.wide-body-4,.wide-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.wide-body-5,.wide-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.wide-interactive-1,.wide-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.wide-interactive-2,.wide-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.wide-interactive-3,.wide-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.wide-section-title-1{font:var(--section-title-1)}.wide-section-title-2{font:var(--section-title-2)}.wide-section-title-3{font:var(--section-title-3)}.wide-section-title-4{font:var(--section-title-4)}.wide-section-title-5{font:var(--section-title-5)}.wide-section-title-6{font:var(--section-title-6)}.wide-heading-1-lt,.wide-heading-2-lt,.wide-heading-3-lt,.wide-heading-4-lt{font-weight:var(--font-lt)}.wide-heading-1-sb,.wide-heading-2-sb,.wide-heading-3-sb,.wide-heading-4-sb,.wide-body-1-sb,.wide-body-2-sb,.wide-body-3-sb,.wide-body-4-sb,.wide-body-5-sb,.wide-interactive-1-sb,.wide-interactive-2-sb,.wide-interactive-3-sb{font-weight:var(--font-sb)}}.heading-1-lt,.heading-2-lt,.heading-3-lt,.heading-4-lt{font-weight:var(--font-lt)}.heading-1-sb,.heading-2-sb,.heading-3-sb,.heading-4-sb,.body-1-sb,.body-2-sb,.body-3-sb,.body-4-sb,.body-5-sb,.interactive-1-sb,.interactive-2-sb,.interactive-3-sb,.helper-sb{font-weight:var(--font-sb)}`;const c=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.toggleSubmenu=i(this,"toggleSubmenu",7);this.toggleTooltip=i(this,"toggleTooltip",7);this.tooltipPosition=a.TOP;this.active=false;this.disabled=false;this.open=false;this.tooltipOpen=false;this.hasSlottedContent=false;this.isMobile=false;this.hasNestedOpenTools=false;this.isNested=false;this.handleTooltipOpen=t=>{if(!this.tooltip||this.open||!this.buttonRef.contains(t.target)){return}clearTimeout(this.hoverDelay);this.hoverDelay=setTimeout((()=>{this.tooltipOpen=true}),1e3)};this.handleTooltipClose=t=>{var e;if(!this.tooltip||((e=t.relatedTarget)===null||e===void 0?void 0:e.closest("z-tooltip"))===this.tooltipRef){return}clearTimeout(this.hoverDelay);this.tooltipOpen=false};this.handleClick=()=>{if(this.disabled||!this.hasSlottedContent){return}this.open=!this.open;if(this.open){const t=this.hostElement.querySelector(":scope > z-color-picker");if(t){t.setFocus();return}const e=this.hostElement.querySelector(":scope > z-toolbar z-tool[active]:not(:disabled)")||this.hostElement.querySelector(":scope > z-toolbar z-tool:not(:disabled)");e===null||e===void 0?void 0:e.setFocus()}};this.onTooltipOpenChange=t=>{if(t.target===this.tooltipRef){return}this.tooltipOpen=t.detail.open}}handleOpenChange(){this.toggleSubmenu.emit(this.open)}handleTooltipOpenChange(){this.toggleTooltip.emit(this.tooltipOpen)}handleKeyDown(t){if(!this.open||this.hasNestedOpenTools){return}switch(t.key){case r.ESC:t.stopPropagation();this.open=false;this.setFocus();break;case r.TAB:if(t.shiftKey&&t.target.closest("z-tool:not(:scope)")===this.hostElement){this.open=false}break}}onOutsideClick(t){const e=t.composedPath()[0];if(!this.open||l(this.hostElement,e)||this.hasNestedOpenTools){return}this.open=false}onNestedToolToggle(t){if(t.target===this.hostElement){return}if(t.detail===true){this.hasNestedOpenTools=true;return}this.hasNestedOpenTools=Array.from(this.hostElement.querySelectorAll("z-tool")).some((t=>t.open))}handleColorSelected(t){if(!Array.from(this.hostElement.children).includes(t.target)){return}this.indicatorColor=t.detail;this.open=false;this.setFocus()}handleExternalFocusin(t){const e=t.target;if(!l(this.hostElement,e)){this.open=false}}async setFocus(){if(this.disabled){return}setTimeout((()=>{var t;(t=this.buttonRef)===null||t===void 0?void 0:t.focus()}),50)}async setTabIndex(t){if(!this.buttonRef){return}this.buttonRef.tabIndex=this.disabled?-1:t}async closeTooltip(){clearTimeout(this.hoverDelay);this.tooltipOpen=false}componentWillLoad(){this.hasSlottedContent=this.hostElement.children.length>0;this.isNested=!!this.hostElement.closest("z-tool:not(:scope)");this.mainToolbar=this.hostElement.closest("z-toolbar:not(z-toolbar z-toolbar)");this.hasNestedOpenTools=!!this.hostElement.querySelector("z-tool[open]");this.mql=matchMedia("(max-width: 767px)");this.onMobileViewChange=t=>this.isMobile=t.matches;this.mql.addEventListener("change",this.onMobileViewChange);this.isMobile=this.mql.matches}disconnectedCallback(){var t;clearTimeout(this.hoverDelay);(t=this.mql)===null||t===void 0?void 0:t.removeEventListener("change",this.onMobileViewChange)}render(){return o(n,{key:"5adf35d9c14bc55415a5f333f032d07e70c679ce",class:{"z-tool-tooltip-open":this.tooltipOpen}},o("button",{key:"9042104162bc039b37f109bac99f3213a3865f7f",class:"z-tool",type:"button",ref:t=>this.buttonRef=t,"aria-pressed":this.hasSlottedContent?undefined:this.active?"true":"false","aria-expanded":this.hasSlottedContent?this.open?"true":"false":undefined,"aria-haspopup":this.hasSlottedContent?"true":undefined,"aria-label":this.htmlAriaLabel||this.tooltip||undefined,disabled:this.disabled,onClick:this.handleClick,onMouseEnter:this.handleTooltipOpen,onMouseLeave:this.handleTooltipClose,onFocus:this.handleTooltipOpen,onBlur:this.handleTooltipClose},o("z-icon",{key:"21f9a4e4a429b3d4a8cc294195ebcec03baebdff",ref:t=>this.iconRef=t,name:this.icon,indicatorColor:this.indicatorColor})),this.tooltip&&o("z-tooltip",{key:"98d553c4bc74b15b5762284dd3f973086a5dc39c",class:"z-tool-tooltip",ref:t=>this.tooltipRef=t,bindTo:this.iconRef,open:this.tooltipOpen&&!this.open,position:this.isNested?a.BOTTOM:this.tooltipPosition,dark:true,onMouseLeave:this.handleTooltipClose,onBlur:this.handleTooltipClose,onOpenChange:this.onTooltipOpenChange},o("span",{key:"ae88d5b59fe21ec1df190c3599042740c3a76634",class:"body-4"},this.tooltip)),this.hasSlottedContent&&o("z-popover",{key:"796d9040bbf935d87b0981d64d6e0404a36189b0",class:"z-tool-submenu",open:this.open,bindTo:this.isMobile&&this.mainToolbar?this.mainToolbar:this.hostElement,center:true,closable:false,position:this.isMobile?a.TOP:a.BOTTOM},o("slot",{key:"a16a3b105a1488373193752b3c9eeb2eab0dc0c2"})))}get hostElement(){return this}static get watchers(){return{open:[{handleOpenChange:0}],tooltipOpen:[{handleTooltipOpenChange:0}]}}static get style(){return b()+g()}},[257,"z-tool",{icon:[1],tooltip:[1],tooltipPosition:[1,"tooltip-position"],htmlAriaLabel:[1,"html-aria-label"],active:[516],disabled:[516],open:[1540],indicatorColor:[1025,"indicator-color"],tooltipOpen:[32],hasSlottedContent:[32],isMobile:[32],hasNestedOpenTools:[32],setFocus:[64],setTabIndex:[64],closeTooltip:[64]},[[0,"keydown","handleKeyDown"],[16,"click","onOutsideClick"],[0,"toggleSubmenu","onNestedToolToggle"],[0,"colorSelected","handleColorSelected"],[17,"focusin","handleExternalFocusin"]],{open:[{handleOpenChange:0}],tooltipOpen:[{handleTooltipOpenChange:0}]}]);function v(){if(typeof customElements==="undefined"){return}const t=["z-tool","z-icon","z-popover","z-tooltip"];t.forEach((t=>{switch(t){case"z-tool":if(!customElements.get(s(t))){customElements.define(s(t),c)}break;case"z-icon":if(!customElements.get(s(t))){h()}break;case"z-popover":if(!customElements.get(s(t))){f()}break;case"z-tooltip":if(!customElements.get(s(t))){d()}break}}))}const z=c;const p=v;export{z as ZTool,p as defineCustomElement};
+//# sourceMappingURL=z-tool.js.map

package/dist/components/z-tool.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["stylesCss","typographyCss","ZTool","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","tooltipPosition","PopoverPosition","TOP","active","disabled","open","tooltipOpen","hasSlottedContent","isMobile","hasNestedOpenTools","isNested","handleTooltipOpen","ev","tooltip","buttonRef","contains","target","clearTimeout","hoverDelay","setTimeout","handleTooltipClose","_a","relatedTarget","closest","tooltipRef","handleClick","colorPicker","hostElement","querySelector","setFocus","firstActiveOrEnabledNestedTool","onTooltipOpenChange","event","detail","handleOpenChange","toggleSubmenu","emit","handleTooltipOpenChange","toggleTooltip","handleKeyDown","key","KeyboardCode","ESC","stopPropagation","TAB","shiftKey","onOutsideClick","composedPath","containsElement","onNestedToolToggle","Array","from","querySelectorAll","some","tool","handleColorSelected","children","includes","indicatorColor","handleExternalFocusin","focus","setTabIndex","value","tabIndex","closeTooltip","componentWillLoad","length","mainToolbar","mql","matchMedia","onMobileViewChange","e","matches","addEventListener","disconnectedCallback","removeEventListener","render","h","Host","class","type","ref","el","undefined","htmlAriaLabel","onClick","onMouseEnter","onMouseLeave","onFocus","onBlur","iconRef","name","icon","bindTo","position","BOTTOM","dark","onOpenChange","center","closable"],"sources":["src/components/z-tool/styles.css?tag=z-tool&encapsulation=shadow","src/tokens/typography.css?tag=z-tool&encapsulation=shadow","src/components/z-tool/index.tsx"],"sourcesContent":[":host,\n* {\n box-sizing: border-box;\n}\n\n.z-tool {\n --z-tool-size: calc(var(--space-unit) * 5.5);\n --z-tool-icon-size: calc(var(--space-unit) * 2.5);\n\n position: relative;\n display: inline-flex;\n width: var(--z-tool-size);\n height: var(--z-tool-size);\n align-items: center;\n justify-content: center;\n padding: 0;\n border: none;\n margin: 0;\n background-color: var(--color-surface01);\n border-radius: var(--border-radius);\n cursor: pointer;\n}\n\n:host(:is([active], [open])) .z-tool {\n box-shadow: inset 0 0 0 2px var(--color-primary01);\n}\n\n:host([open]) .z-tool {\n background: var(--color-primary03);\n}\n\n@media (hover: hover) {\n :host(:hover),\n :host(.z-tool-tooltip-open) {\n /* ensure any open tooltip is shown over sibling elements */\n z-index: 1;\n }\n\n :host(:not([disabled])) .z-tool:hover {\n background-color: var(--color-primary03);\n }\n}\n\n.z-tool:focus:focus-visible {\n background-color: var(--color-primary03);\n outline: none;\n}\n\nz-icon {\n --z-icon-width: var(--z-tool-icon-size);\n --z-icon-height: var(--z-tool-icon-size);\n\n display: block;\n fill: var(--color-default-icon);\n}\n\n:host([disabled]) .z-tool {\n color: var(--color-disabled01-icon);\n cursor: not-allowed;\n}\n\n:host([disabled]) z-icon {\n fill: var(--color-disabled01-icon);\n}\n\n.z-tool-tooltip {\n --z-tooltip-padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);\n --z-tooltip-shadow-filter: drop-shadow(0 4px 8px var(--shadow-color-base));\n\n position: relative;\n z-index: 2;\n font-family: var(--font-family-sans);\n white-space: nowrap;\n}\n\n.z-tool-submenu {\n z-index: 3;\n border-radius: calc(var(--border-radius) + var(--border-size-small));\n}\n\n.z-tool-submenu ::slotted(z-color-picker) {\n border: var(--border-size-small) solid var(--color-surface03);\n border-radius: var(--border-radius);\n}\n\n@media (max-width: 767px) and (hover: none) {\n .z-tool-tooltip {\n display: none !important;\n }\n}\n",":root {\n /* font-family */\n --font-family-sans: \"IBM Plex Sans\", sans-serif;\n --font-family-serif: \"IBM Plex Serif\", serif;\n\n /* font-weight */\n --font-lt: 300;\n --font-rg: 400;\n --font-sb: 600;\n --font-bd: 700;\n\n /* font-size type scale */\n --font-size-1: 0.75rem; /* 12px */\n --font-size-2: 0.875rem; /* 14px */\n --font-size-3: 1rem; /* assuming 16px */\n --font-size-4: 1.125rem; /* 18px */\n --font-size-5: 1.25rem; /* 20px */\n --font-size-6: 1.5rem; /* 24px */\n --font-size-7: 1.75rem; /* 28px */\n --font-size-8: 2rem; /* 32px */\n --font-size-9: 2.25rem; /* 36px */\n --font-size-10: 2.625rem; /* 42px */\n --font-size-11: 3rem; /* 48px */\n --font-size-12: 3.375rem; /* 54px */\n --font-size-13: 3.75rem; /* 60px */\n --font-size-14: 4.25rem; /* 68px */\n --font-size-15: 4.75rem; /* 76px */\n --font-size-16: 5.25rem; /* 84px */\n --font-size-17: 5.75rem; /* 92px */\n\n /* cssprops to use with `font` shorthand property */\n --section-title-1: var(--font-sb) var(--font-size-11) / 1.083 var(--font-family-serif);\n --section-title-2: var(--font-sb) var(--font-size-10) / 1.142 var(--font-family-serif);\n --section-title-3: var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);\n --section-title-4: var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);\n --section-title-5: var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);\n --section-title-6: var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif);\n}\n\n/* Typography classes */\n.heading-1,\n.heading-1-sb,\n.heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n}\n\n.heading-2,\n.heading-2-sb,\n.heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n}\n\n.heading-3,\n.heading-3-sb,\n.heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n}\n\n.heading-4,\n.heading-4-sb,\n.heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n}\n\n.body-1,\n.body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n}\n\n.body-2,\n.body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.body-3,\n.body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.body-4,\n.body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n}\n\n.body-5,\n.body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n.interactive-1,\n.interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.interactive-2,\n.interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n}\n\n.interactive-3,\n.interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n.helper,\n.helper-sb {\n font-size: var(--font-size-1);\n font-style: italic;\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n/* section title */\n.section-title-1 {\n font: var(--section-title-1);\n}\n\n.section-title-2 {\n font: var(--section-title-2);\n}\n\n.section-title-3 {\n font: var(--section-title-3);\n}\n\n.section-title-4 {\n font: var(--section-title-4);\n}\n\n.section-title-5 {\n font: var(--section-title-5);\n}\n\n.section-title-6 {\n font: var(--section-title-6);\n}\n\n/* heading-1/2 for desktop and wide viewports */\n@media (min-width: 1152px) {\n .heading-1,\n .heading-1-sb,\n .heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .heading-2,\n .heading-2-sb,\n .heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n}\n\n/* viewport classes */\n@media (max-width: 767px) {\n .mobile-heading-1,\n .mobile-heading-1-sb,\n .mobile-heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .mobile-heading-2,\n .mobile-heading-2-sb,\n .mobile-heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .mobile-heading-3,\n .mobile-heading-3-sb,\n .mobile-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .mobile-heading-4,\n .mobile-heading-4-sb,\n .mobile-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .mobile-body-1,\n .mobile-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .mobile-body-2,\n .mobile-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-body-3,\n .mobile-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-body-4,\n .mobile-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .mobile-body-5,\n .mobile-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .mobile-interactive-1,\n .mobile-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-interactive-2,\n .mobile-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .mobile-interactive-3,\n .mobile-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .mobile-section-title-1 {\n font: var(--section-title-1);\n }\n\n .mobile-section-title-2 {\n font: var(--section-title-2);\n }\n\n .mobile-section-title-3 {\n font: var(--section-title-3);\n }\n\n .mobile-section-title-4 {\n font: var(--section-title-4);\n }\n\n .mobile-section-title-5 {\n font: var(--section-title-5);\n }\n\n .mobile-section-title-6 {\n font: var(--section-title-6);\n }\n\n .mobile-heading-1-lt,\n .mobile-heading-2-lt,\n .mobile-heading-3-lt,\n .mobile-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .mobile-heading-1-sb,\n .mobile-heading-2-sb,\n .mobile-heading-3-sb,\n .mobile-heading-4-sb,\n .mobile-body-1-sb,\n .mobile-body-2-sb,\n .mobile-body-3-sb,\n .mobile-body-4-sb,\n .mobile-body-5-sb,\n .mobile-interactive-1-sb,\n .mobile-interactive-2-sb,\n .mobile-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n@media (min-width: 768px) and (max-width: 1151px) {\n .tablet-heading-1,\n .tablet-heading-1-sb,\n .tablet-heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .tablet-heading-2,\n .tablet-heading-2-sb,\n .tablet-heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .tablet-heading-3,\n .tablet-heading-3-sb,\n .tablet-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .tablet-heading-4,\n .tablet-heading-4-sb,\n .tablet-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .tablet-body-1,\n .tablet-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .tablet-body-2,\n .tablet-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-body-3,\n .tablet-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-body-4,\n .tablet-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .tablet-body-5,\n .tablet-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .tablet-interactive-1,\n .tablet-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-interactive-2,\n .tablet-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .tablet-interactive-3,\n .tablet-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .tablet-section-title-1 {\n font: var(--section-title-1);\n }\n\n .tablet-section-title-2 {\n font: var(--section-title-2);\n }\n\n .tablet-section-title-3 {\n font: var(--section-title-3);\n }\n\n .tablet-section-title-4 {\n font: var(--section-title-4);\n }\n\n .tablet-section-title-5 {\n font: var(--section-title-5);\n }\n\n .tablet-section-title-6 {\n font: var(--section-title-6);\n }\n\n .tablet-heading-1-lt,\n .tablet-heading-2-lt,\n .tablet-heading-3-lt,\n .tablet-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .tablet-heading-1-sb,\n .tablet-heading-2-sb,\n .tablet-heading-3-sb,\n .tablet-heading-4-sb,\n .tablet-body-1-sb,\n .tablet-body-2-sb,\n .tablet-body-3-sb,\n .tablet-body-4-sb,\n .tablet-body-5-sb,\n .tablet-interactive-1-sb,\n .tablet-interactive-2-sb,\n .tablet-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n@media (min-width: 1152px) and (max-width: 1365px) {\n .desktop-heading-1,\n .desktop-heading-1-sb,\n .desktop-heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .desktop-heading-2,\n .desktop-heading-2-sb,\n .desktop-heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .desktop-heading-3,\n .desktop-heading-3-sb,\n .desktop-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .desktop-heading-4,\n .desktop-heading-4-sb,\n .desktop-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .desktop-body-1,\n .desktop-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .desktop-body-2,\n .desktop-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-body-3,\n .desktop-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-body-4,\n .desktop-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .desktop-body-5,\n .desktop-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .desktop-interactive-1,\n .desktop-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-interactive-2,\n .desktop-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .desktop-interactive-3,\n .desktop-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .desktop-section-title-1 {\n font: var(--section-title-1);\n }\n\n .desktop-section-title-2 {\n font: var(--section-title-2);\n }\n\n .desktop-section-title-3 {\n font: var(--section-title-3);\n }\n\n .desktop-section-title-4 {\n font: var(--section-title-4);\n }\n\n .desktop-section-title-5 {\n font: var(--section-title-5);\n }\n\n .desktop-section-title-6 {\n font: var(--section-title-6);\n }\n\n .desktop-heading-1-lt,\n .desktop-heading-2-lt,\n .desktop-heading-3-lt,\n .desktop-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .desktop-heading-1-sb,\n .desktop-heading-2-sb,\n .desktop-heading-3-sb,\n .desktop-heading-4-sb,\n .desktop-body-1-sb,\n .desktop-body-2-sb,\n .desktop-body-3-sb,\n .desktop-body-4-sb,\n .desktop-body-5-sb,\n .desktop-interactive-1-sb,\n .desktop-interactive-2-sb,\n .desktop-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n@media (min-width: 1366px) {\n .wide-heading-1,\n .wide-heading-1-sb,\n .wide-heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .wide-heading-2,\n .wide-heading-2-sb,\n .wide-heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .wide-heading-3,\n .wide-heading-3-sb,\n .wide-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .wide-heading-4,\n .wide-heading-4-sb,\n .wide-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .wide-body-1,\n .wide-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .wide-body-2,\n .wide-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-body-3,\n .wide-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-body-4,\n .wide-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .wide-body-5,\n .wide-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .wide-interactive-1,\n .wide-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-interactive-2,\n .wide-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .wide-interactive-3,\n .wide-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .wide-section-title-1 {\n font: var(--section-title-1);\n }\n\n .wide-section-title-2 {\n font: var(--section-title-2);\n }\n\n .wide-section-title-3 {\n font: var(--section-title-3);\n }\n\n .wide-section-title-4 {\n font: var(--section-title-4);\n }\n\n .wide-section-title-5 {\n font: var(--section-title-5);\n }\n\n .wide-section-title-6 {\n font: var(--section-title-6);\n }\n\n .wide-heading-1-lt,\n .wide-heading-2-lt,\n .wide-heading-3-lt,\n .wide-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .wide-heading-1-sb,\n .wide-heading-2-sb,\n .wide-heading-3-sb,\n .wide-heading-4-sb,\n .wide-body-1-sb,\n .wide-body-2-sb,\n .wide-body-3-sb,\n .wide-body-4-sb,\n .wide-body-5-sb,\n .wide-interactive-1-sb,\n .wide-interactive-2-sb,\n .wide-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n/* font-weight variants */\n.heading-1-lt,\n.heading-2-lt,\n.heading-3-lt,\n.heading-4-lt {\n font-weight: var(--font-lt);\n}\n\n.heading-1-sb,\n.heading-2-sb,\n.heading-3-sb,\n.heading-4-sb,\n.body-1-sb,\n.body-2-sb,\n.body-3-sb,\n.body-4-sb,\n.body-5-sb,\n.interactive-1-sb,\n.interactive-2-sb,\n.interactive-3-sb,\n.helper-sb {\n font-weight: var(--font-sb);\n}\n","import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Host,\n Listen,\n Method,\n Prop,\n State,\n Watch,\n h,\n} from \"@stencil/core\";\nimport {ColorPickerPalette, KeyboardCode, PopoverPosition} from \"../../beans\";\nimport {ZColorPickerCustomEvent, ZToolCustomEvent, ZTooltipCustomEvent} from \"../../components\";\nimport {IconName} from \"../../constants/iconset\";\nimport {containsElement} from \"../../utils/utils\";\n\n/**\n * ZTool component. Can display an icon, an optional tooltip (mainly for hints about the tool's functionality), and can contain a nested `z-toolbar` as a submenu that opens on click.\n * @slot - Optional slot for nested content (e.g., a secondary `z-toolbar`) that appears when the tool is open/clicked.\n */\n@Component({\n tag: \"z-tool\",\n styleUrls: [\"styles.css\", \"../../tokens/typography.css\"],\n shadow: true,\n})\nexport class ZTool implements ComponentInterface {\n @Element() hostElement: HTMLZToolElement;\n\n /** Tool icon */\n @Prop()\n icon: IconName;\n\n /** Text displayed inside the tooltip. */\n @Prop()\n tooltip?: string;\n\n /** Preferred tooltip position. Defaults to true. */\n @Prop()\n tooltipPosition: PopoverPosition = PopoverPosition.TOP;\n\n /** Accessible label for the tool trigger. Falls back to tooltip content. */\n @Prop()\n htmlAriaLabel?: string;\n\n /** Visual active state. */\n @Prop({reflect: true})\n active = false;\n\n /** Disabled state. */\n @Prop({reflect: true})\n disabled = false;\n\n /** Open state. */\n @Prop({reflect: true, mutable: true})\n open = false;\n\n /**\n * Color to use to fill the icon's color indicator, if it has one.\n * Can be any valid value for the `fill` svg attribute.\n * The value of this prop is passed down to the `z-icon` component inside the tool.\n *\n * If `z-color-picker` component is used inside the tool's slot, its `colorSelected` event is listened\n * to automatically update `indicatorColor` and change the color of the icon indicator accordingly.\n */\n @Prop({mutable: true})\n indicatorColor?: string;\n\n @State()\n tooltipOpen = false;\n\n @State()\n hasSlottedContent = false;\n\n @State()\n isMobile = false;\n\n /** Indicates if the tool has nested open tools. Used to decide whether to auto-close the submenu. */\n @State()\n hasNestedOpenTools = false;\n\n /** Emitted when the open state changes. */\n @Event()\n toggleSubmenu: EventEmitter;\n\n /** Emitted when the tooltip open state changes. */\n @Event()\n toggleTooltip: EventEmitter;\n\n private buttonRef?: HTMLButtonElement;\n\n private iconRef?: HTMLElement;\n\n private tooltipRef?: HTMLZTooltipElement;\n\n private hoverDelay?: ReturnType<typeof setTimeout>;\n\n /** Indicates if the tool is nested inside another tool. */\n private isNested = false;\n\n /** Main `z-toolbar` ancestor element, meant to be the top-level toolbar not nested inside another tool. */\n private mainToolbar?: HTMLZToolbarElement;\n\n /** Media query list for detecting mobile view. */\n private mql?: MediaQueryList;\n\n /** Listener for changes in the mobile view media query. */\n private onMobileViewChange?: (e: MediaQueryListEvent) => void;\n\n /**\n * Opens the tooltip with a delay when the button is hovered or focused, and if the tool's content isn't already visible.\n */\n private handleTooltipOpen = (ev: FocusEvent | MouseEvent): void => {\n if (!this.tooltip || this.open || !this.buttonRef.contains(ev.target as Node)) {\n return;\n }\n\n clearTimeout(this.hoverDelay);\n this.hoverDelay = setTimeout(() => {\n this.tooltipOpen = true;\n }, 1000);\n };\n\n /**\n * Closes the tooltip immediately on button blur or when the mouse leaves the button or the tooltip, clearing any pending hover delay.\n */\n private handleTooltipClose = (ev: FocusEvent | MouseEvent): void => {\n if (!this.tooltip || (ev.relatedTarget as HTMLElement)?.closest(\"z-tooltip\") === this.tooltipRef) {\n return;\n }\n\n clearTimeout(this.hoverDelay);\n this.tooltipOpen = false;\n };\n\n /**\n * Handles click events on the tool's button element.\n * If the tool has slotted content, toggles the open state and focuses the active/selected item in the nested toolbar or color picker,\n * or the first item if no active/selected item is found.\n */\n private handleClick = (): void => {\n if (this.disabled || !this.hasSlottedContent) {\n return;\n }\n\n this.open = !this.open;\n if (this.open) {\n const colorPicker = this.hostElement.querySelector(\":scope > z-color-picker\") as HTMLZColorPickerElement | null;\n if (colorPicker) {\n colorPicker.setFocus();\n\n return;\n }\n\n // Focus the first active tool in the nested toolbar, or the first enabled if no active tool is found.\n const firstActiveOrEnabledNestedTool = (this.hostElement.querySelector(\n \":scope > z-toolbar z-tool[active]:not(:disabled)\"\n ) || this.hostElement.querySelector(\":scope > z-toolbar z-tool:not(:disabled)\")) as HTMLZToolElement | null;\n\n firstActiveOrEnabledNestedTool?.setFocus();\n }\n };\n\n /**\n * Handles `openChange` events from the tooltip popover to keep the `tooltipOpen` state in sync, but only if the event is coming from this tool's tooltip (and not from nested tools' tooltips).\n */\n private onTooltipOpenChange = (event: ZTooltipCustomEvent<{open: boolean}>): void => {\n if ((event.target as HTMLElement) === this.tooltipRef) {\n return;\n }\n\n this.tooltipOpen = event.detail.open;\n };\n\n @Watch(\"open\")\n handleOpenChange(): void {\n this.toggleSubmenu.emit(this.open);\n }\n\n @Watch(\"tooltipOpen\")\n handleTooltipOpenChange(): void {\n this.toggleTooltip.emit(this.tooltipOpen);\n }\n\n /**\n * Handle `ESC` and `shift+TAB` to close the submenu and move focus back to the button.\n */\n @Listen(\"keydown\")\n handleKeyDown(event: KeyboardEvent): void {\n if (!this.open || this.hasNestedOpenTools) {\n return;\n }\n\n switch (event.key) {\n case KeyboardCode.ESC:\n event.stopPropagation();\n this.open = false;\n this.setFocus();\n break;\n case KeyboardCode.TAB:\n if (event.shiftKey && (event.target as Element).closest(\"z-tool:not(:scope)\") === this.hostElement) {\n this.open = false;\n }\n break;\n }\n }\n\n /**\n * Close the popover on clicks outside the component, only if there are no nested open tools.\n * In that case any outside click should close the nested submenu(s) first.\n */\n @Listen(\"click\", {target: \"body\"})\n onOutsideClick(event: MouseEvent): void {\n const target = event.composedPath()[0] as HTMLElement;\n if (!this.open || containsElement(this.hostElement, target) || this.hasNestedOpenTools) {\n return;\n }\n\n this.open = false;\n }\n\n @Listen(\"toggleSubmenu\")\n onNestedToolToggle(ev: ZToolCustomEvent<boolean>): void {\n if (ev.target === this.hostElement) {\n return;\n }\n\n if (ev.detail === true) {\n this.hasNestedOpenTools = true;\n\n return;\n }\n\n this.hasNestedOpenTools = Array.from(this.hostElement.querySelectorAll(\"z-tool\")).some((tool) => tool.open);\n }\n\n /**\n * Handles the `colorSelected` event from a nested `z-color-picker` component.\n * Updates the `indicatorColor` and closes the tool's popover.\n */\n @Listen(\"colorSelected\")\n handleColorSelected(event: ZColorPickerCustomEvent<ColorPickerPalette>): void {\n if (!Array.from(this.hostElement.children).includes(event.target as Element)) {\n return;\n }\n\n this.indicatorColor = event.detail;\n this.open = false;\n this.setFocus();\n }\n\n /**\n * Close the submenu when focus moves outside the tool.\n */\n @Listen(\"focusin\", {target: \"body\", passive: true})\n handleExternalFocusin(ev: FocusEvent): void {\n const target = ev.target as Node;\n if (!containsElement(this.hostElement, target)) {\n this.open = false;\n }\n }\n\n /** Focuses the tool's button element. */\n @Method()\n async setFocus(): Promise<void> {\n if (this.disabled) {\n return;\n }\n\n setTimeout(() => {\n this.buttonRef?.focus();\n }, 50);\n }\n\n /** Sets the tab index of the tool's internal button element. */\n @Method()\n async setTabIndex(value: number): Promise<void> {\n if (!this.buttonRef) {\n return;\n }\n\n this.buttonRef.tabIndex = this.disabled ? -1 : value;\n }\n\n /** Closes the tooltip. */\n @Method()\n async closeTooltip(): Promise<void> {\n clearTimeout(this.hoverDelay);\n this.tooltipOpen = false;\n }\n\n componentWillLoad(): void {\n this.hasSlottedContent = this.hostElement.children.length > 0;\n this.isNested = !!this.hostElement.closest(\"z-tool:not(:scope)\");\n this.mainToolbar = this.hostElement.closest(\"z-toolbar:not(z-toolbar z-toolbar)\");\n this.hasNestedOpenTools = !!this.hostElement.querySelector(\"z-tool[open]\");\n\n this.mql = matchMedia(\"(max-width: 767px)\");\n this.onMobileViewChange = (e: MediaQueryListEvent) => (this.isMobile = e.matches);\n this.mql.addEventListener(\"change\", this.onMobileViewChange);\n this.isMobile = this.mql.matches;\n }\n\n disconnectedCallback(): void {\n clearTimeout(this.hoverDelay);\n this.mql?.removeEventListener(\"change\", this.onMobileViewChange);\n }\n\n render(): HTMLZToolElement {\n return (\n <Host class={{\"z-tool-tooltip-open\": this.tooltipOpen}}>\n <button\n class=\"z-tool\"\n type=\"button\"\n ref={(el) => (this.buttonRef = el)}\n aria-pressed={this.hasSlottedContent ? undefined : this.active ? \"true\" : \"false\"}\n aria-expanded={this.hasSlottedContent ? (this.open ? \"true\" : \"false\") : undefined}\n aria-haspopup={this.hasSlottedContent ? \"true\" : undefined}\n aria-label={this.htmlAriaLabel || this.tooltip || undefined}\n disabled={this.disabled}\n onClick={this.handleClick}\n onMouseEnter={this.handleTooltipOpen}\n onMouseLeave={this.handleTooltipClose}\n onFocus={this.handleTooltipOpen}\n onBlur={this.handleTooltipClose}\n >\n <z-icon\n ref={(el) => (this.iconRef = el)}\n name={this.icon}\n indicatorColor={this.indicatorColor}\n ></z-icon>\n </button>\n {this.tooltip && (\n <z-tooltip\n class=\"z-tool-tooltip\"\n ref={(el) => (this.tooltipRef = el)}\n bindTo={this.iconRef}\n open={this.tooltipOpen && !this.open}\n position={this.isNested ? PopoverPosition.BOTTOM : this.tooltipPosition}\n dark\n onMouseLeave={this.handleTooltipClose}\n onBlur={this.handleTooltipClose}\n onOpenChange={this.onTooltipOpenChange}\n >\n <span class=\"body-4\">{this.tooltip}</span>\n </z-tooltip>\n )}\n {this.hasSlottedContent && (\n <z-popover\n class=\"z-tool-submenu\"\n open={this.open}\n bindTo={this.isMobile && this.mainToolbar ? this.mainToolbar : this.hostElement}\n center\n /* disable auto-close to prevent unwanted close behaviors on mobile,\n when the bound element is the main toolbar */\n closable={false}\n position={this.isMobile ? PopoverPosition.TOP : PopoverPosition.BOTTOM}\n >\n <slot></slot>\n </z-popover>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1 +1,2 @@
-import{proxyCustomElement as t,HTMLElement as o,h as e,Host as s,transformTag as i}from"@stencil/core/internal/client";import{g as a}from"./index2.js";const r=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.currentFocusIndex=0,this.toolItems=[]}componentDidLoad(){this.collectToolItems(),this.updateTabIndexes();let t=parseInt(getComputedStyle(this.hostElement).getPropertyValue("--z-toolbar-columns")||"6");t=this.toolItems.length<=t?this.toolItems.length:t,this.hostElement.style.setProperty("--z-toolbar-columns",""+t)}collectToolItems(){this.toolItems=Array.from(this.hostElement.querySelectorAll("z-tool:not(:scope z-tool z-tool)"))}updateTabIndexes(){this.toolItems.forEach(((t,o)=>{t.setTabIndex(o===this.currentFocusIndex?0:-1)}))}focusToolAt(t,o="next"){const e=this.toolItems[t];if(e){if(this.currentFocusIndex=t,!e.disabled)return e.setFocus(),void this.updateTabIndexes();"next"===o?this.focusNextTool():this.focusPreviousTool()}}focusNextTool(){this.focusToolAt((this.currentFocusIndex+1)%this.toolItems.length)}focusPreviousTool(){this.focusToolAt((this.currentFocusIndex-1+this.toolItems.length)%this.toolItems.length,"previous")}closeSiblingSubmenusOnOpen(t){if(!0!==t.detail)return;const o=t.target.closest("z-tool");o&&this.toolItems.includes(o)&&this.toolItems.forEach((t=>{t!==o&&t.open&&(t.open=!1)}))}closeSiblingTooltipsOnOpen(t){if(!0!==t.detail)return;const o=t.target;this.toolItems.includes(o)&&this.toolItems.forEach((t=>{t!==o&&t.closeTooltip()}))}handleKeyDown(t){const o=t.target.closest("z-tool");if(!o||!this.toolItems.includes(o))return;const e=this.toolItems.indexOf(o);switch(-1!==e&&(this.currentFocusIndex=e),t.key){case a.ARROW_RIGHT:t.preventDefault(),this.focusNextTool();break;case a.ARROW_LEFT:t.preventDefault(),this.focusPreviousTool()}}handleFocusIn(t){const o=t.target.closest("z-tool"),e=this.toolItems.indexOf(o);-1!==e&&e!==this.currentFocusIndex&&(this.currentFocusIndex=e,this.updateTabIndexes())}render(){return e(s,{key:"9f77e33a2a5e3566137ca23c4a41526b58b46515",role:"toolbar","aria-label":this.htmlAriaLabel},e("slot",{key:"a62af35ef54781baee92f865a969a8642ce58703",onSlotchange:()=>{this.collectToolItems(),this.updateTabIndexes()}}))}get hostElement(){return this}static get style(){return":host,*{box-sizing:border-box}:host{display:flex;width:fit-content;align-items:center;padding:0;border:var(--border-size-small) solid var(--color-surface03);background-color:var(--color-surface01);border-radius:calc(var(--border-radius) + var(--border-size-small));box-shadow:var(--shadow-4);gap:calc(var(--space-unit) / 2)}::slotted(z-divider){height:calc(var(--space-unit) * 4.5) !important}@media (max-width: 767px){:host{--z-toolbar-columns:6;position:relative;display:grid;max-width:100%;background:repeating-linear-gradient(         to bottom,         transparent 0,         transparent calc(var(--space-unit) * 5.5),         var(--color-surface03) calc(var(--space-unit) * 5.5),         var(--color-surface03) calc(var(--space-unit) * 5.5 + 1px)       )       center / calc(100% - var(--space-unit)) 100% no-repeat var(--color-surface01);gap:var(--border-size-small) calc(var(--space-unit) / 2);grid-template-columns:repeat(var(--z-toolbar-columns, auto-fill), minmax(44px, auto))}::slotted(z-divider){display:none !important}}"}},[257,"z-toolbar",{htmlAriaLabel:[1,"html-aria-label"],currentFocusIndex:[32]},[[0,"toggleSubmenu","closeSiblingSubmenusOnOpen"],[0,"toggleTooltip","closeSiblingTooltipsOnOpen"],[0,"keydown","handleKeyDown"],[0,"focusin","handleFocusIn"]]]),n=r,l=function(){"undefined"!=typeof customElements&&["z-toolbar"].forEach((t=>{"z-toolbar"===t&&(customElements.get(i(t))||customElements.define(i(t),r))}))};export{n as ZToolbar,l as defineCustomElement}
+import{proxyCustomElement as t,HTMLElement as o,h as e,Host as s,transformTag as i}from"@stencil/core/internal/client";import{g as r}from"./index2.js";const a=()=>`:host,*{box-sizing:border-box}:host{display:flex;width:fit-content;align-items:center;padding:0;border:var(--border-size-small) solid var(--color-surface03);background-color:var(--color-surface01);border-radius:calc(var(--border-radius) + var(--border-size-small));box-shadow:var(--shadow-4);gap:calc(var(--space-unit) / 2)}::slotted(z-divider){height:calc(var(--space-unit) * 4.5) !important}@media (max-width: 767px){:host{--z-toolbar-columns:6;position:relative;display:grid;max-width:100%;background:repeating-linear-gradient(         to bottom,         transparent 0,         transparent calc(var(--space-unit) * 5.5),         var(--color-surface03) calc(var(--space-unit) * 5.5),         var(--color-surface03) calc(var(--space-unit) * 5.5 + 1px)       )       center / calc(100% - var(--space-unit)) 100% no-repeat var(--color-surface01);gap:var(--border-size-small) calc(var(--space-unit) / 2);grid-template-columns:repeat(var(--z-toolbar-columns, auto-fill), minmax(44px, auto))}::slotted(z-divider){display:none !important}}`;const n=t(class t extends o{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.currentFocusIndex=0;this.toolItems=[]}componentDidLoad(){this.collectToolItems();this.updateTabIndexes();let t=parseInt(getComputedStyle(this.hostElement).getPropertyValue("--z-toolbar-columns")||"6");t=this.toolItems.length<=t?this.toolItems.length:t;this.hostElement.style.setProperty("--z-toolbar-columns",t.toString())}collectToolItems(){this.toolItems=Array.from(this.hostElement.querySelectorAll("z-tool:not(:scope z-tool z-tool)"))}updateTabIndexes(){this.toolItems.forEach(((t,o)=>{t.setTabIndex(o===this.currentFocusIndex?0:-1)}))}focusToolAt(t,o="next"){const e=this.toolItems[t];if(!e){return}this.currentFocusIndex=t;if(!e.disabled){e.setFocus();this.updateTabIndexes();return}if(o==="next"){this.focusNextTool()}else{this.focusPreviousTool()}}focusNextTool(){const t=(this.currentFocusIndex+1)%this.toolItems.length;this.focusToolAt(t)}focusPreviousTool(){const t=(this.currentFocusIndex-1+this.toolItems.length)%this.toolItems.length;this.focusToolAt(t,"previous")}closeSiblingSubmenusOnOpen(t){if(t.detail!==true){return}const o=t.target.closest("z-tool");if(!o||!this.toolItems.includes(o)){return}this.toolItems.forEach((t=>{if(t!==o&&t.open){t.open=false}}))}closeSiblingTooltipsOnOpen(t){if(t.detail!==true){return}const o=t.target;if(!this.toolItems.includes(o)){return}this.toolItems.forEach((t=>{if(t!==o){t.closeTooltip()}}))}handleKeyDown(t){const o=t.target;const e=o.closest("z-tool");if(!e||!this.toolItems.includes(e)){return}const s=this.toolItems.indexOf(e);if(s!==-1){this.currentFocusIndex=s}switch(t.key){case r.ARROW_RIGHT:t.preventDefault();this.focusNextTool();break;case r.ARROW_LEFT:t.preventDefault();this.focusPreviousTool();break}}handleFocusIn(t){const o=t.target;const e=o.closest("z-tool");const s=this.toolItems.indexOf(e);if(s!==-1&&s!==this.currentFocusIndex){this.currentFocusIndex=s;this.updateTabIndexes()}}render(){return e(s,{key:"da37a1abe86b6c96aaabdc4f5714716ea3ce7281",role:"toolbar","aria-label":this.htmlAriaLabel},e("slot",{key:"73b950e1efb794a75930915ccb39cf58dc524fb0",onSlotchange:()=>{this.collectToolItems();this.updateTabIndexes()}}))}get hostElement(){return this}static get style(){return a()}},[257,"z-toolbar",{htmlAriaLabel:[1,"html-aria-label"],currentFocusIndex:[32]},[[0,"toggleSubmenu","closeSiblingSubmenusOnOpen"],[0,"toggleTooltip","closeSiblingTooltipsOnOpen"],[0,"keydown","handleKeyDown"],[0,"focusin","handleFocusIn"]]]);function c(){if(typeof customElements==="undefined"){return}const t=["z-toolbar"];t.forEach((t=>{switch(t){case"z-toolbar":if(!customElements.get(i(t))){customElements.define(i(t),n)}break}}))}const l=n;const h=c;export{l as ZToolbar,h as defineCustomElement};
+//# sourceMappingURL=z-toolbar.js.map

package/dist/components/z-toolbar.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["stylesCss","ZToolbar","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","currentFocusIndex","toolItems","componentDidLoad","collectToolItems","updateTabIndexes","mobileColumnCount","parseInt","getComputedStyle","hostElement","getPropertyValue","length","style","setProperty","toString","Array","from","querySelectorAll","forEach","tool","index","setTabIndex","focusToolAt","fallback","disabled","setFocus","focusNextTool","focusPreviousTool","nextIndex","prevIndex","closeSiblingSubmenusOnOpen","event","detail","targetTool","target","closest","includes","open","closeSiblingTooltipsOnOpen","closeTooltip","handleKeyDown","toolElement","focusedIndex","indexOf","key","KeyboardCode","ARROW_RIGHT","preventDefault","ARROW_LEFT","handleFocusIn","render","h","Host","role","htmlAriaLabel","onSlotchange"],"sources":["src/components/z-toolbar/styles.css?tag=z-toolbar&encapsulation=shadow","src/components/z-toolbar/index.tsx"],"sourcesContent":[":host,\n* {\n box-sizing: border-box;\n}\n\n:host {\n /**\n * @prop --z-toolbar-columns: Number of items per row in the toolbar. Only applies on mobile viewport, when the toolbar can be displayed in a multi-row layout. Default: `6`.\n */\n\n display: flex;\n width: fit-content;\n align-items: center;\n padding: 0;\n border: var(--border-size-small) solid var(--color-surface03);\n background-color: var(--color-surface01);\n border-radius: calc(var(--border-radius) + var(--border-size-small)); /* ensure correct radius for nested items */\n box-shadow: var(--shadow-4);\n gap: calc(var(--space-unit) / 2);\n}\n\n::slotted(z-divider) {\n height: calc(var(--space-unit) * 4.5) !important;\n}\n\n@media (max-width: 767px) {\n :host {\n --z-toolbar-columns: 6;\n\n position: relative;\n display: grid;\n max-width: 100%;\n\n /* Draws a horizontal separator line between rows */\n background: repeating-linear-gradient(\n to bottom,\n transparent 0,\n transparent calc(var(--space-unit) * 5.5),\n var(--color-surface03) calc(var(--space-unit) * 5.5),\n var(--color-surface03) calc(var(--space-unit) * 5.5 + 1px)\n )\n center / calc(100% - var(--space-unit)) 100% no-repeat var(--color-surface01);\n gap: var(--border-size-small) calc(var(--space-unit) / 2);\n grid-template-columns: repeat(var(--z-toolbar-columns, auto-fill), minmax(44px, auto));\n }\n\n ::slotted(z-divider) {\n display: none !important;\n }\n}\n","import {Component, ComponentInterface, Element, Host, Listen, Prop, State, h} from \"@stencil/core\";\nimport {KeyboardCode} from \"../../beans\";\nimport {ZToolCustomEvent} from \"../../components\";\n\n/**\n * ZToolbar component. This component mainly serves as a container for `z-tool` elements, but can also be nested inside a `z-tool` to create submenus.\n * Implements WCAG toolbar pattern with roving tabindex keyboard navigation.\n * Tools can be visually grouped using `z-divider` elements as separators.\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/\n *\n */\n@Component({\n tag: \"z-toolbar\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZToolbar implements ComponentInterface {\n @Element() hostElement: HTMLZToolbarElement;\n\n /** Accessible label for the toolbar. */\n @Prop()\n htmlAriaLabel?: string;\n\n /** Index of the currently focusable item (roving tabindex). */\n @State()\n currentFocusIndex = 0;\n\n /** List of focusable tool elements. */\n private toolItems: HTMLZToolElement[] = [];\n\n componentDidLoad(): void {\n this.collectToolItems();\n this.updateTabIndexes();\n // set css variable `--z-toolbar-columns` based on the number of tools in the toolbar, so that the background pattern can adapt to the number of rows\n let mobileColumnCount = parseInt(getComputedStyle(this.hostElement).getPropertyValue(\"--z-toolbar-columns\") || \"6\");\n mobileColumnCount = this.toolItems.length <= mobileColumnCount ? this.toolItems.length : mobileColumnCount;\n this.hostElement.style.setProperty(\"--z-toolbar-columns\", mobileColumnCount.toString());\n }\n\n /** Collect first level children `z-tool` elements in the toolbar (not nested ones). */\n private collectToolItems(): void {\n this.toolItems = Array.from(this.hostElement.querySelectorAll(\"z-tool:not(:scope z-tool z-tool)\"));\n }\n\n /**\n * Update the `tabindex` of all children tools based on the current focus index,\n * so that only the currently focusable tool is in the tab order (tabindex=\"0\") and all others are not focusable via keyboard (tabindex=\"-1\").\n */\n private updateTabIndexes(): void {\n this.toolItems.forEach((tool, index) => {\n tool.setTabIndex(index === this.currentFocusIndex ? 0 : -1);\n });\n }\n\n private focusToolAt(index: number, fallback: \"previous\" | \"next\" = \"next\"): void {\n const tool = this.toolItems[index];\n if (!tool) {\n return;\n }\n\n this.currentFocusIndex = index;\n if (!tool.disabled) {\n tool.setFocus();\n this.updateTabIndexes();\n\n return;\n }\n\n if (fallback === \"next\") {\n this.focusNextTool();\n } else {\n this.focusPreviousTool();\n }\n }\n\n private focusNextTool(): void {\n const nextIndex = (this.currentFocusIndex + 1) % this.toolItems.length;\n this.focusToolAt(nextIndex);\n }\n\n private focusPreviousTool(): void {\n const prevIndex = (this.currentFocusIndex - 1 + this.toolItems.length) % this.toolItems.length;\n this.focusToolAt(prevIndex, \"previous\");\n }\n\n /**\n * Listen for custom \"toggleSubmenu\" events from child tools and close sibling submenus when one is opened,\n * to prevent multiple submenus from being open at the same time.\n */\n @Listen(\"toggleSubmenu\")\n closeSiblingSubmenusOnOpen(event: ZToolCustomEvent<boolean>): void {\n if (event.detail !== true) {\n return;\n }\n\n const targetTool = (event.target as HTMLElement).closest(\"z-tool\") as HTMLZToolElement | null;\n if (!targetTool || !this.toolItems.includes(targetTool)) {\n return;\n }\n\n this.toolItems.forEach((tool) => {\n if (tool !== targetTool && tool.open) {\n tool.open = false;\n }\n });\n }\n\n /**\n * Listen for custom \"toggleTooltip\" events from child tools and close sibling tooltips when one is opened,\n * to prevent multiple tooltips from being open at the same time.\n */\n @Listen(\"toggleTooltip\")\n closeSiblingTooltipsOnOpen(event: ZToolCustomEvent<boolean>): void {\n if (event.detail !== true) {\n return;\n }\n\n const targetTool = event.target;\n if (!this.toolItems.includes(targetTool)) {\n return;\n }\n\n this.toolItems.forEach((tool) => {\n if (tool !== targetTool) {\n tool.closeTooltip();\n }\n });\n }\n\n @Listen(\"keydown\")\n handleKeyDown(event: KeyboardEvent): void {\n const target = event.target as HTMLElement;\n const toolElement = target.closest(\"z-tool\") as HTMLZToolElement;\n\n if (!toolElement || !this.toolItems.includes(toolElement)) {\n return;\n }\n\n const focusedIndex = this.toolItems.indexOf(toolElement);\n if (focusedIndex !== -1) {\n this.currentFocusIndex = focusedIndex;\n }\n\n switch (event.key) {\n case KeyboardCode.ARROW_RIGHT:\n event.preventDefault();\n this.focusNextTool();\n break;\n case KeyboardCode.ARROW_LEFT:\n event.preventDefault();\n this.focusPreviousTool();\n break;\n }\n }\n\n /**\n * When focus enters the toolbar, update the current focus index to match the focused tool,\n * so that roving tabindex is in sync with actual focus.\n */\n @Listen(\"focusin\")\n handleFocusIn(event: FocusEvent): void {\n const target = event.target as HTMLElement;\n const toolElement = target.closest(\"z-tool\") as HTMLZToolElement;\n const index = this.toolItems.indexOf(toolElement);\n if (index !== -1 && index !== this.currentFocusIndex) {\n this.currentFocusIndex = index;\n this.updateTabIndexes();\n }\n }\n\n render(): HTMLZToolbarElement {\n return (\n <Host\n role=\"toolbar\"\n aria-label={this.htmlAriaLabel}\n >\n <slot\n onSlotchange={() => {\n this.collectToolItems();\n this.updateTabIndexes();\n }}\n ></slot>\n </Host>\n );\n }\n}\n"],"mappings":"uJAAA,MAAMA,EAAY,IAAM,6gC,MCgBXC,EAAQC,EAAA,MAAAD,UAAAE,EALrB,WAAAC,CAAAC,G,kEAcEC,KAAAC,kBAAoB,EAGZD,KAAAE,UAAgC,EA6JzC,CA3JC,gBAAAC,GACEH,KAAKI,mBACLJ,KAAKK,mBAEL,IAAIC,EAAoBC,SAASC,iBAAiBR,KAAKS,aAAaC,iBAAiB,wBAA0B,KAC/GJ,EAAoBN,KAAKE,UAAUS,QAAUL,EAAoBN,KAAKE,UAAUS,OAASL,EACzFN,KAAKS,YAAYG,MAAMC,YAAY,sBAAuBP,EAAkBQ,W,CAItE,gBAAAV,GACNJ,KAAKE,UAAYa,MAAMC,KAAKhB,KAAKS,YAAYQ,iBAAiB,oC,CAOxD,gBAAAZ,GACNL,KAAKE,UAAUgB,SAAQ,CAACC,EAAMC,KAC5BD,EAAKE,YAAYD,IAAUpB,KAAKC,kBAAoB,GAAI,EAAG,G,CAIvD,WAAAqB,CAAYF,EAAeG,EAAgC,QACjE,MAAMJ,EAAOnB,KAAKE,UAAUkB,GAC5B,IAAKD,EAAM,CACT,M,CAGFnB,KAAKC,kBAAoBmB,EACzB,IAAKD,EAAKK,SAAU,CAClBL,EAAKM,WACLzB,KAAKK,mBAEL,M,CAGF,GAAIkB,IAAa,OAAQ,CACvBvB,KAAK0B,e,KACA,CACL1B,KAAK2B,mB,EAID,aAAAD,GACN,MAAME,GAAa5B,KAAKC,kBAAoB,GAAKD,KAAKE,UAAUS,OAChEX,KAAKsB,YAAYM,E,CAGX,iBAAAD,GACN,MAAME,GAAa7B,KAAKC,kBAAoB,EAAID,KAAKE,UAAUS,QAAUX,KAAKE,UAAUS,OACxFX,KAAKsB,YAAYO,EAAW,W,CAQ9B,0BAAAC,CAA2BC,GACzB,GAAIA,EAAMC,SAAW,KAAM,CACzB,M,CAGF,MAAMC,EAAcF,EAAMG,OAAuBC,QAAQ,UACzD,IAAKF,IAAejC,KAAKE,UAAUkC,SAASH,GAAa,CACvD,M,CAGFjC,KAAKE,UAAUgB,SAASC,IACtB,GAAIA,IAASc,GAAcd,EAAKkB,KAAM,CACpClB,EAAKkB,KAAO,K,KAUlB,0BAAAC,CAA2BP,GACzB,GAAIA,EAAMC,SAAW,KAAM,CACzB,M,CAGF,MAAMC,EAAaF,EAAMG,OACzB,IAAKlC,KAAKE,UAAUkC,SAASH,GAAa,CACxC,M,CAGFjC,KAAKE,UAAUgB,SAASC,IACtB,GAAIA,IAASc,EAAY,CACvBd,EAAKoB,c,KAMX,aAAAC,CAAcT,GACZ,MAAMG,EAASH,EAAMG,OACrB,MAAMO,EAAcP,EAAOC,QAAQ,UAEnC,IAAKM,IAAgBzC,KAAKE,UAAUkC,SAASK,GAAc,CACzD,M,CAGF,MAAMC,EAAe1C,KAAKE,UAAUyC,QAAQF,GAC5C,GAAIC,KAAiB,EAAI,CACvB1C,KAAKC,kBAAoByC,C,CAG3B,OAAQX,EAAMa,KACZ,KAAKC,EAAaC,YAChBf,EAAMgB,iBACN/C,KAAK0B,gBACL,MACF,KAAKmB,EAAaG,WAChBjB,EAAMgB,iBACN/C,KAAK2B,oBACL,M,CASN,aAAAsB,CAAclB,GACZ,MAAMG,EAASH,EAAMG,OACrB,MAAMO,EAAcP,EAAOC,QAAQ,UACnC,MAAMf,EAAQpB,KAAKE,UAAUyC,QAAQF,GACrC,GAAIrB,KAAU,GAAMA,IAAUpB,KAAKC,kBAAmB,CACpDD,KAAKC,kBAAoBmB,EACzBpB,KAAKK,kB,EAIT,MAAA6C,GACE,OACEC,EAACC,EAAI,CAAAR,IAAA,2CACHS,KAAK,UAAS,aACFrD,KAAKsD,eAEjBH,EAAA,QAAAP,IAAA,2CACEW,aAAc,KACZvD,KAAKI,mBACLJ,KAAKK,kBAAkB,I","ignoreList":[]}

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

@@ -1 +1,2 @@
-import{Z as o,d as s}from"./index27.js";const r=o,t=s;export{r as ZTooltip,t as defineCustomElement}
+import{Z as o,d as s}from"./index27.js";const t=o;const n=s;export{t as ZTooltip,n as defineCustomElement};
+//# sourceMappingURL=z-tooltip.js.map

package/dist/components/z-tooltip.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"names":[],"sources":[],"mappings":"","ignoreList":[]}

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

@@ -1 +1,2 @@
-import{proxyCustomElement as t,HTMLElement as e,createEvent as o,h as n,Host as r,transformTag as s}from"@stencil/core/internal/client";import{r as a}from"./utils.js";import"./index2.js";import{d as i}from"./index3.js";import"./index17.js";const d=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.expand=o(this,"expand",7),this.expandable=!1,this.expanded=!1}updateColumns(){const t=Array.from(this.host.querySelectorAll("z-td, z-th"));this.expandable&&t.pop();const e=t.map((t=>t.colspan||1)).reduce(((t,e)=>t+e),0);if(this.host.style.setProperty("--columns",""+e),this.expandable){const e=t.pop();e.id=e.id||"z-tr-expandable-content-"+a(),this.expandableContentId=e.id}}onRowClick(t){const e=t.target.closest(".prevent-expand");this.expandable&&!e&&(this.expanded=!this.expanded,this.expand.emit({expanded:this.expanded}))}onKeyDown(t){this.expandable&&document.activeElement===this.host&&("Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.expanded=!this.expanded,this.expand.emit({expanded:this.expanded})))}componentWillLoad(){this.updateColumns()}render(){return n(r,{key:"e045e79af9cf2e3c29b4eb180c840b4657c893a3",role:"row",tabIndex:this.expandable?0:void 0,expanded:this.expanded,onClick:this.onRowClick.bind(this),onKeyDown:this.onKeyDown.bind(this)},n("div",{key:"8715e76d1ed1d64693c069a22f3c50040933ee4d",class:"z-tr--focus-overlay","aria-hidden":"true"}),n("div",{key:"3d10e01e6183299d8a03dbcc6586950f74148743",class:"z-tr--expand-button-container"},this.expandable&&n("button",{key:"c43441d3fc106b2c0cf43c6def18bf0fc0062e7e",tabIndex:-1,"aria-expanded":this.expanded?"true":"false","aria-label":this.expanded?"Comprimi riga":"Espandi riga","aria-controls":this.expandableContentId,type:"button"},n("z-icon",{key:"8ec3aaa2c05de39c19a9e8ff291c98f9b35478e3",name:this.expanded?"minus-circled":"plus-circled"}))),n("slot",{key:"a86066e86c9415b5eb03a0cd97d58e58ada095d2",onSlotchange:this.updateColumns.bind(this)}))}get host(){return this}static get watchers(){return{expandable:[{updateColumns:0}]}}static get style(){return":host{position:relative;display:grid;width:100%;box-sizing:border-box;grid-auto-flow:column;grid-template-columns:var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr));--columns:1}*{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)}:host(:hover) ::slotted(z-td),:host(:hover) ::slotted(z-th){border-top:var(--border-size-small) solid var(--color-surface04);border-bottom:var(--border-size-small) solid var(--color-surface04);background-color:var(--color-surface02)}:host(:focus){position:relative;z-index:20;box-shadow:var(--shadow-focus-primary);outline:none}.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 z-icon{--z-icon-width:16px;--z-icon-height:16px}.z-tr--focus-overlay{position:absolute;z-index:30;right:0;left:0;width:100%;border-radius:4px;box-shadow:none;inset:0;outline:none;pointer-events:none;transition:box-shadow 0.2s}:host(:focus) .z-tr--focus-overlay{box-shadow:0 0 0 2px var(--shadow-focus-primary),     var(--shadow-focus-primary);outline:none}:host(:focus) ::slotted(*){border-bottom:none}:host(:focus) .z-tr--expand-button-container{border-bottom:none}"}},[257,"z-tr",{expandable:[516],expanded:[32],expandableContentId:[32]},[[0,"colspanchange","updateColumns"]],{expandable:[{updateColumns:0}]}]),c=d,l=function(){"undefined"!=typeof customElements&&["z-tr","z-icon"].forEach((t=>{switch(t){case"z-tr":customElements.get(s(t))||customElements.define(s(t),d);break;case"z-icon":customElements.get(s(t))||i()}}))};export{c as ZTr,l as defineCustomElement}
+import{proxyCustomElement as t,HTMLElement as e,createEvent as o,h as n,Host as a,transformTag as s}from"@stencil/core/internal/client";import{r}from"./utils.js";import"./index2.js";import{d as i}from"./index3.js";import"./index17.js";const d=()=>`:host{position:relative;display:grid;width:100%;box-sizing:border-box;grid-auto-flow:column;grid-template-columns:var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr));--columns:1}*{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)}:host(:hover):has([tabIndex]) ::slotted(z-td),:host(:hover):has([tabIndex]) ::slotted(z-th){border-top:var(--border-size-small) solid var(--color-surface04);border-bottom:var(--border-size-small) solid var(--color-surface04);background-color:var(--color-surface02)}:host(:focus){position:relative;z-index:20;box-shadow:var(--shadow-focus-primary);outline:none}.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 z-icon{--z-icon-width:16px;--z-icon-height:16px}.z-tr--focus-overlay{position:absolute;z-index:30;right:0;left:0;width:100%;border-radius:4px;box-shadow:none;inset:0;outline:none;pointer-events:none;transition:box-shadow 0.2s}:host(:focus) .z-tr--focus-overlay{box-shadow:0 0 0 2px var(--shadow-focus-primary),     var(--shadow-focus-primary);outline:none}:host(:focus) ::slotted(*){border-bottom:none}:host(:focus) .z-tr--expand-button-container{border-bottom:none}`;const c=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.expand=o(this,"expand",7);this.expandable=false;this.expanded=false}updateColumns(){const t=Array.from(this.host.querySelectorAll("z-td, z-th"));if(this.expandable){t.pop()}const e=t.map((t=>t.colspan||1)).reduce(((t,e)=>t+e),0);this.host.style.setProperty("--columns",`${e}`);if(this.expandable){const e=t.pop();e.id=e.id||`z-tr-expandable-content-${r()}`;this.expandableContentId=e.id}}onRowClick(t){const e=t.target.closest(".prevent-expand");if(!this.expandable||e){return}this.expanded=!this.expanded;this.expand.emit({expanded:this.expanded})}onKeyDown(t){if(!this.expandable){return}const e=document.activeElement;if(e!==this.host){return}if(t.key==="Enter"||t.key===" "){t.preventDefault();this.expanded=!this.expanded;this.expand.emit({expanded:this.expanded})}}componentWillLoad(){this.updateColumns()}render(){return n(a,{key:"92be779ec3e863cc85336fcedb02f718fa3a19fa",role:"row",tabIndex:this.expandable?0:undefined,expanded:this.expanded,onClick:this.onRowClick.bind(this),onKeyDown:this.onKeyDown.bind(this)},n("div",{key:"720c8209c21104e78129cbd76c12a6cdf8806ca2",class:"z-tr--focus-overlay","aria-hidden":"true"}),n("div",{key:"3bb4f4d2e5ae60da5c105d1c8a99d6ff0fa59302",class:"z-tr--expand-button-container"},this.expandable&&n("button",{key:"d27d18c1a4515ac055ce7db13ec3efdfc7d0314d",tabIndex:-1,"aria-expanded":this.expanded?"true":"false","aria-label":this.expanded?"Comprimi riga":"Espandi riga","aria-controls":this.expandableContentId,type:"button"},n("z-icon",{key:"9fd14fcab4ea512b42c63928c3e2dabb83fd1da3",name:this.expanded?"minus-circled":"plus-circled"}))),n("slot",{key:"c5fcb7a2f92eb8401c4d27d28e5b68a5001616b7",onSlotchange:this.updateColumns.bind(this)}))}get host(){return this}static get watchers(){return{expandable:[{updateColumns:0}]}}static get style(){return d()}},[257,"z-tr",{expandable:[516],expanded:[32],expandableContentId:[32]},[[0,"colspanchange","updateColumns"]],{expandable:[{updateColumns:0}]}]);function l(){if(typeof customElements==="undefined"){return}const t=["z-tr","z-icon"];t.forEach((t=>{switch(t){case"z-tr":if(!customElements.get(s(t))){customElements.define(s(t),c)}break;case"z-icon":if(!customElements.get(s(t))){i()}break}}))}const b=c;const h=l;export{b as ZTr,h as defineCustomElement};
+//# sourceMappingURL=z-tr.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"names":["stylesCss","ZTr","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","expandable","expanded","updateColumns","cells","Array","from","host","querySelectorAll","pop","columns","map","cell","colspan","reduce","a","b","style","setProperty","expandableContent","id","randomId","expandableContentId","onRowClick","event","preventExpand","target","closest","expand","emit","onKeyDown","active","document","activeElement","key","preventDefault","componentWillLoad","render","h","Host","role","tabIndex","undefined","onClick","bind","class","type","name","onSlotchange"],"sources":["src/components/table/z-tr/styles.css?tag=z-tr&encapsulation=shadow","src/components/table/z-tr/index.tsx"],"sourcesContent":[":host {\n position: relative;\n display: grid;\n width: 100%;\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 --columns: 1;\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:host(:hover):has([tabIndex]) ::slotted(z-td),\n:host(:hover):has([tabIndex]) ::slotted(z-th) {\n border-top: var(--border-size-small) solid var(--color-surface04);\n border-bottom: var(--border-size-small) solid var(--color-surface04);\n background-color: var(--color-surface02);\n}\n\n:host(:focus) {\n position: relative;\n z-index: 20;\n box-shadow: var(--shadow-focus-primary);\n outline: none;\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 z-icon {\n --z-icon-width: 16px;\n --z-icon-height: 16px;\n}\n\n.z-tr--focus-overlay {\n position: absolute;\n z-index: 30;\n right: 0;\n left: 0;\n width: 100%;\n border-radius: 4px;\n box-shadow: none;\n inset: 0;\n outline: none;\n pointer-events: none;\n transition: box-shadow 0.2s;\n}\n\n:host(:focus) .z-tr--focus-overlay {\n box-shadow:\n 0 0 0 2px var(--shadow-focus-primary),\n var(--shadow-focus-primary);\n outline: none;\n}\n\n:host(:focus) ::slotted(*) {\n border-bottom: none;\n}\n\n:host(:focus) .z-tr--expand-button-container {\n border-bottom: none;\n}\n","import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n h,\n} 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 implements ComponentInterface {\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 private onKeyDown(event: KeyboardEvent): void {\n if (!this.expandable) {\n return;\n }\n\n const active = document.activeElement;\n if (active !== this.host) {\n return;\n }\n\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n this.expanded = !this.expanded;\n this.expand.emit({expanded: this.expanded});\n }\n }\n\n componentWillLoad(): void {\n this.updateColumns();\n }\n\n render(): HTMLZTrElement {\n return (\n <Host\n role=\"row\"\n tabIndex={this.expandable ? 0 : undefined}\n expanded={this.expanded}\n onClick={this.onRowClick.bind(this)}\n onKeyDown={this.onKeyDown.bind(this)}\n >\n <div\n class=\"z-tr--focus-overlay\"\n aria-hidden=\"true\"\n ></div>\n <div class=\"z-tr--expand-button-container\">\n {this.expandable && (\n <button\n tabIndex={-1}\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"],"mappings":"2OAAA,MAAMA,EAAY,IAAM,4vE,MC4BXC,EAAGC,EAAA,MAAAD,UAAAE,EALhB,WAAAC,CAAAC,G,iGAkBEC,KAAAC,WAAa,MAMbD,KAAAE,SAAW,KAgGZ,CAjFW,aAAAC,GACR,MAAMC,EAAQC,MAAMC,KAAKN,KAAKO,KAAKC,iBAAkD,eACrF,GAAIR,KAAKC,WAAY,CACnBG,EAAMK,K,CAGR,MAAMC,EAAUN,EAAMO,KAAKC,GAASA,EAAKC,SAAW,IAAGC,QAAO,CAACC,EAAGC,IAAMD,EAAIC,GAAG,GAC/EhB,KAAKO,KAAKU,MAAMC,YAAY,YAAa,GAAGR,KAE5C,GAAIV,KAAKC,WAAY,CACnB,MAAMkB,EAAoBf,EAAMK,MAChCU,EAAkBC,GAAKD,EAAkBC,IAAM,2BAA2BC,MAC1ErB,KAAKsB,oBAAsBH,EAAkBC,E,EAQzC,UAAAG,CAAWC,GACjB,MAAMC,EAAiBD,EAAME,OAAuBC,QAAQ,mBAC5D,IAAK3B,KAAKC,YAAcwB,EAAe,CACrC,M,CAGFzB,KAAKE,UAAYF,KAAKE,SACtBF,KAAK4B,OAAOC,KAAK,CAAC3B,SAAUF,KAAKE,U,CAG3B,SAAA4B,CAAUN,GAChB,IAAKxB,KAAKC,WAAY,CACpB,M,CAGF,MAAM8B,EAASC,SAASC,cACxB,GAAIF,IAAW/B,KAAKO,KAAM,CACxB,M,CAGF,GAAIiB,EAAMU,MAAQ,SAAWV,EAAMU,MAAQ,IAAK,CAC9CV,EAAMW,iBACNnC,KAAKE,UAAYF,KAAKE,SACtBF,KAAK4B,OAAOC,KAAK,CAAC3B,SAAUF,KAAKE,U,EAIrC,iBAAAkC,GACEpC,KAAKG,e,CAGP,MAAAkC,GACE,OACEC,EAACC,EAAI,CAAAL,IAAA,2CACHM,KAAK,MACLC,SAAUzC,KAAKC,WAAa,EAAIyC,UAChCxC,SAAUF,KAAKE,SACfyC,QAAS3C,KAAKuB,WAAWqB,KAAK5C,MAC9B8B,UAAW9B,KAAK8B,UAAUc,KAAK5C,OAE/BsC,EAAA,OAAAJ,IAAA,2CACEW,MAAM,sBAAqB,cACf,SAEdP,EAAA,OAAAJ,IAAA,2CAAKW,MAAM,iCACR7C,KAAKC,YACJqC,EAAA,UAAAJ,IAAA,2CACEO,UAAU,EAAE,gBACGzC,KAAKE,SAAW,OAAS,QAAO,aACnCF,KAAKE,SAAW,gBAAkB,eAAc,gBAC7CF,KAAKsB,oBACpBwB,KAAK,UAELR,EAAA,UAAAJ,IAAA,2CAAQa,KAAM/C,KAAKE,SAAW,gBAAkB,mBAItDoC,EAAA,QAAAJ,IAAA,2CAAMc,aAAchD,KAAKG,cAAcyC,KAAK5C,Q","ignoreList":[]}

package/dist/components/z-tree-list.js CHANGED Viewed

@@ -1 +1,2 @@
-import{proxyCustomElement as e,HTMLElement as t,createEvent as i,h as l,Host as s,transformTag as n}from"@stencil/core/internal/client";import{g as r}from"./index2.js";import{d as o}from"./index6.js";import{d as a}from"./index3.js";import{d}from"./index9.js";import{d as c}from"./index10.js";const m=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.treeItemClicked=i(this,"treeItemClicked",7),this.items=[],this.parsedItems=[]}watchItems(){this.parsedItems="string"==typeof this.items?JSON.parse(this.items):this.items}componentWillLoad(){this.watchItems()}handleClick(e){this.treeItemClicked.emit({id:e.id,name:e.name,url:e.url})}getFocusableElements(){return Array.from(this.host.shadowRoot.querySelectorAll('a[tabindex="0"]'))}getAncestor(e,t){let i=e;for(let e=0;e<t;e++)if(i=null==i?void 0:i.parentElement,!i)return;return i}handleArrowNav(e){if(e.code===r.TAB)return void e.preventDefault();const t=this.getFocusableElements(),i=t.indexOf(e.target);if(-1!==i){if(e.code===r.ARROW_DOWN||e.code===r.ARROW_UP){e.preventDefault();const l=i+(e.code===r.ARROW_DOWN?1:-1);if(l<0||l>=t.length)return;t[l].focus()}if(e.code===r.ARROW_LEFT){e.preventDefault();const l=this.getAncestor(t[i],4);if(!l||!l.children[0]||"a"!==l.children[0].tagName.toLowerCase()&&null===l.getAttribute("tabindex"))return;l.children[0].focus()}if(e.code===r.ARROW_RIGHT){e.preventDefault();const t=e.target.closest("z-list-element");if(!t)return;const i=t.querySelector("z-list");if(!i)return;const l=i.querySelector('a[tabindex="0"]');if(!l)return;l.focus()}}}renderTreeList(e,t,i=1){var s,n;this.htmlTag=e.url?"a":"span";const o=l("z-list-element",{id:t,class:e.icon?"":"no-icon-elm",clickable:!!e.url,hasTreeItems:!0,role:"none","aria-hidden":void 0},l(this.htmlTag,{class:{"list-element":!0,"z-link":!!e.url,"link-clickable":!!e.url},tabIndex:e.url?0:-1,onClick:()=>this.handleClick(e),onKeyUp:t=>{t.code!==r.ENTER&&t.code!==r.SPACE||this.handleClick(e)},onKeyDown:e=>this.handleArrowNav(e),role:e.url?"treeitem":void 0,"aria-hidden":e.url?void 0:"true","aria-expanded":(null===(s=e.children)||void 0===s?void 0:s.length)>0&&!0,"aria-level":i,"aria-label":e.name,href:e.url},l("span",{class:"item ellipsis"},e.icon&&l("z-icon",{width:16,height:16,fill:e.url?"color-primary01":"color-default-icon",class:"item-icon",name:e.icon}),l("span",{class:{"item-label":!0,"no-icon-label":!e.icon,"bold-item":e.bold},title:e.name},e.name))),(null===(n=e.children)||void 0===n?void 0:n.length)>0&&l("z-list",{role:"group"},l("div",{class:"children-node"},e.children.map(((e,t)=>this.renderTreeList(e,""+t,i+1))))));return o}render(){const e=this.parsedItems.some((e=>!!e.url));return l(s,{key:"ca5b846e86140efd7a98028001e646349cc5683a",class:"tree-list",role:e?"navigation":"none","aria-hidden":e?void 0:"true","aria-labelledby":this.htmlAriaLabelledby},l("div",{key:"eac955c253173abb6e5f0992d356311dc52f9ee6",tabIndex:-1,role:e?"tree":"none","aria-hidden":e?void 0:"true","aria-label":this.htmlSectionTitle},this.parsedItems.map(((e,t)=>this.renderTreeList(e,""+t)))))}get host(){return this}static get watchers(){return{items:[{watchItems:0}]}}static get style(){return':host{font-family:var(--font-family-sans)}z-list-element{position:relative;display:block;padding-top:var(--space-unit)}z-list-element::before,z-list-element::after{position:absolute;z-index:100;top:0.125rem;left:-0.5rem;content:""}z-list z-list-element::before{width:var(--space-unit);height:calc(var(--space-unit) * 2);border-bottom:var(--border-size-small) solid var(--color-disabled01-icon);border-left:var(--border-size-small) solid var(--color-disabled01-icon)}z-list z-list-element::after{width:var(--space-unit);height:100%;border-left:var(--border-size-small) solid var(--color-disabled01-icon)}z-list z-list-element:last-child::after,z-list>z-list-element::before,z-list>z-list-element::after,z-list>z-list-group>z-list-element::before,z-list>z-list-group>z-list-element::after{display:none}z-list>div.children-node{padding-left:calc(var(--space-unit) * 2)}z-list-element>.list-element{z-index:100;display:flex;justify-content:space-between;padding:0;color:var(--color-default-text);font-size:var(--font-size-2);font-style:normal;font-weight:var(--font-rg);text-decoration:none}z-list-element>.list-element.link-clickable{color:var(--color-primary01)}z-list-element>.list-element.link-clickable:hover{text-decoration:underline}z-list-element>.list-element .item.ellipsis{overflow:hidden}z-list-element .list-element::after{position:absolute;top:0;right:-0.0625rem;display:block;width:100%;height:calc(var(--space-unit) * 5);content:"";transform:translateX(-100%)}.item-label{overflow:hidden;flex-grow:1;font-size:var(--font-size-2);font-style:normal;font-weight:var(--font-rg);letter-spacing:0.0032rem;line-height:1.25rem;text-overflow:ellipsis;white-space:nowrap}.item-label.bold-item{font-weight:var(--font-sb)}.item.ellipsis{display:flex;overflow:hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap}.children-node>z-list-element{padding:0;padding-top:0.125;padding-left:calc(var(--space-unit) * 1.25)}.item-icon{margin-right:var(--space-unit)}.no-icon-label{padding-left:var(--space-unit)}.children-node>z-list-element.no-icon-elm{padding-left:0}z-list-element>.list-element:focus:focus-visible{position:relative;z-index:200;box-shadow:var(--shadow-focus-primary);outline:none}@media (max-width: 767px){z-list-element::before,z-list-element::after{top:0.1875rem}z-list z-list-element::before{height:calc(var(--space-unit) * 2.5)}.children-node>z-list-element{padding-top:var(--space-unit)}}'}},[1,"z-tree-list",{items:[1],htmlAriaLabelledby:[513,"html-aria-labelledby"],htmlSectionTitle:[513,"html-section-title"]},void 0,{items:[{watchItems:0}]}]),h=m,f=function(){"undefined"!=typeof customElements&&["z-tree-list","z-divider","z-icon","z-list","z-list-element"].forEach((e=>{switch(e){case"z-tree-list":customElements.get(n(e))||customElements.define(n(e),m);break;case"z-divider":customElements.get(n(e))||o();break;case"z-icon":customElements.get(n(e))||a();break;case"z-list":customElements.get(n(e))||d();break;case"z-list-element":customElements.get(n(e))||c()}}))};export{h as ZTreeList,f as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as t,createEvent as i,h as l,Host as n,transformTag as s}from"@stencil/core/internal/client";import{g as r}from"./index2.js";import{d as o}from"./index6.js";import{d as a}from"./index3.js";import{d}from"./index9.js";import{d as c}from"./index10.js";const m=()=>`:host{font-family:var(--font-family-sans)}z-list-element{position:relative;display:block;padding-top:var(--space-unit)}z-list-element::before,z-list-element::after{position:absolute;z-index:100;top:0.125rem;left:-0.5rem;content:""}z-list z-list-element::before{width:var(--space-unit);height:calc(var(--space-unit) * 2);border-bottom:var(--border-size-small) solid var(--color-disabled01-icon);border-left:var(--border-size-small) solid var(--color-disabled01-icon)}z-list z-list-element::after{width:var(--space-unit);height:100%;border-left:var(--border-size-small) solid var(--color-disabled01-icon)}z-list z-list-element:last-child::after,z-list>z-list-element::before,z-list>z-list-element::after,z-list>z-list-group>z-list-element::before,z-list>z-list-group>z-list-element::after{display:none}z-list>div.children-node{padding-left:calc(var(--space-unit) * 2)}z-list-element>.list-element{z-index:100;display:flex;justify-content:space-between;padding:0;color:var(--color-default-text);font-size:var(--font-size-2);font-style:normal;font-weight:var(--font-rg);text-decoration:none}z-list-element>.list-element.link-clickable{color:var(--color-primary01)}z-list-element>.list-element.link-clickable:hover{text-decoration:underline}z-list-element>.list-element .item.ellipsis{overflow:hidden}z-list-element .list-element::after{position:absolute;top:0;right:-0.0625rem;display:block;width:100%;height:calc(var(--space-unit) * 5);content:"";transform:translateX(-100%)}.item-label{overflow:hidden;flex-grow:1;font-size:var(--font-size-2);font-style:normal;font-weight:var(--font-rg);letter-spacing:0.0032rem;line-height:1.25rem;text-overflow:ellipsis;white-space:nowrap}.item-label.bold-item{font-weight:var(--font-sb)}.item.ellipsis{display:flex;overflow:hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap}.children-node>z-list-element{padding:0;padding-top:0.125;padding-left:calc(var(--space-unit) * 1.25)}.item-icon{margin-right:var(--space-unit)}.no-icon-label{padding-left:var(--space-unit)}.children-node>z-list-element.no-icon-elm{padding-left:0}z-list-element>.list-element:focus:focus-visible{position:relative;z-index:200;box-shadow:var(--shadow-focus-primary);outline:none}@media (max-width: 767px){z-list-element::before,z-list-element::after{top:0.1875rem}z-list z-list-element::before{height:calc(var(--space-unit) * 2.5)}.children-node>z-list-element{padding-top:var(--space-unit)}}`;const f=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.treeItemClicked=i(this,"treeItemClicked",7);this.items=[];this.parsedItems=[]}watchItems(){this.parsedItems=typeof this.items==="string"?JSON.parse(this.items):this.items}componentWillLoad(){this.watchItems()}handleClick(e){this.treeItemClicked.emit({id:e.id,name:e.name,url:e.url})}getFocusableElements(){return Array.from(this.host.shadowRoot.querySelectorAll('a[tabindex="0"]'))}getAncestor(e,t){let i=e;for(let e=0;e<t;e++){i=i===null||i===void 0?void 0:i.parentElement;if(!i){return}}return i}handleArrowNav(e){if(e.code===r.TAB){e.preventDefault();return}const t=this.getFocusableElements();const i=t.indexOf(e.target);if(i===-1){return}if(e.code===r.ARROW_DOWN||e.code===r.ARROW_UP){e.preventDefault();const l=i+(e.code===r.ARROW_DOWN?1:-1);if(l<0||l>=t.length){return}t[l].focus()}if(e.code===r.ARROW_LEFT){e.preventDefault();const l=this.getAncestor(t[i],4);if(!l||!l.children[0]||l.children[0].tagName.toLowerCase()!=="a"&&l.getAttribute("tabindex")===null){return}l.children[0].focus()}if(e.code===r.ARROW_RIGHT){e.preventDefault();const t=e.target.closest("z-list-element");if(!t){return}const i=t.querySelector("z-list");if(!i){return}const l=i.querySelector('a[tabindex="0"]');if(!l){return}l.focus()}}renderTreeList(e,t,i=1){var n,s;this.htmlTag=e.url?"a":"span";const o=l("z-list-element",{id:t,class:!e.icon?"no-icon-elm":"",clickable:Boolean(e.url),hasTreeItems:true,role:"none","aria-hidden":undefined},l(this.htmlTag,{class:{"list-element":true,"z-link":Boolean(e.url),"link-clickable":Boolean(e.url)},tabIndex:e.url?0:-1,onClick:()=>this.handleClick(e),onKeyUp:t=>{if(t.code===r.ENTER||t.code===r.SPACE){this.handleClick(e)}},onKeyDown:e=>this.handleArrowNav(e),role:e.url?"treeitem":undefined,"aria-hidden":e.url?undefined:"true","aria-expanded":((n=e.children)===null||n===void 0?void 0:n.length)>0&&true,"aria-level":i,"aria-label":e.name,href:e.url},l("span",{class:"item ellipsis"},e.icon&&l("z-icon",{width:16,height:16,fill:e.url?"color-primary01":"color-default-icon",class:"item-icon",name:e.icon}),l("span",{class:{"item-label":true,"no-icon-label":!e.icon,"bold-item":e.bold},title:e.name},e.name))),((s=e.children)===null||s===void 0?void 0:s.length)>0&&l("z-list",{role:"group"},l("div",{class:"children-node"},e.children.map(((e,t)=>this.renderTreeList(e,`${t}`,i+1))))));return o}render(){const e=this.parsedItems.some((e=>!!e.url));return l(n,{key:"68d06fd53ad0f4bce01853b95aef0f7482f3304a",class:"tree-list",role:e?"navigation":"none","aria-hidden":e?undefined:"true","aria-labelledby":this.htmlAriaLabelledby},l("div",{key:"6b8010ae9caf73ec0a43b09f5d9610247110d1a6",tabIndex:-1,role:e?"tree":"none","aria-hidden":e?undefined:"true","aria-label":this.htmlSectionTitle},this.parsedItems.map(((e,t)=>this.renderTreeList(e,`${t}`)))))}get host(){return this}static get watchers(){return{items:[{watchItems:0}]}}static get style(){return m()}},[1,"z-tree-list",{items:[1],htmlAriaLabelledby:[513,"html-aria-labelledby"],htmlSectionTitle:[513,"html-section-title"]},undefined,{items:[{watchItems:0}]}]);function h(){if(typeof customElements==="undefined"){return}const e=["z-tree-list","z-divider","z-icon","z-list","z-list-element"];e.forEach((e=>{switch(e){case"z-tree-list":if(!customElements.get(s(e))){customElements.define(s(e),f)}break;case"z-divider":if(!customElements.get(s(e))){o()}break;case"z-icon":if(!customElements.get(s(e))){a()}break;case"z-list":if(!customElements.get(s(e))){d()}break;case"z-list-element":if(!customElements.get(s(e))){c()}break}}))}const u=f;const p=h;export{u as ZTreeList,p as defineCustomElement};
+//# sourceMappingURL=z-tree-list.js.map

package/dist/components/z-tree-list.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["stylesCss","ZTreeList","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","items","parsedItems","watchItems","JSON","parse","componentWillLoad","handleClick","item","treeItemClicked","emit","id","name","url","getFocusableElements","Array","from","host","shadowRoot","querySelectorAll","getAncestor","element","levels","ancestor","i","parentElement","handleArrowNav","event","code","KeyboardCode","TAB","preventDefault","focusableElements","currentIndex","indexOf","target","ARROW_DOWN","ARROW_UP","nextIndex","length","focus","ARROW_LEFT","children","tagName","toLowerCase","getAttribute","ARROW_RIGHT","parentElm","closest","childrenContainer","querySelector","firstChild","renderTreeList","key","level","htmlTag","treeListContent","h","class","icon","clickable","Boolean","hasTreeItems","role","undefined","tabIndex","onClick","onKeyUp","ENTER","SPACE","onKeyDown","_a","href","width","height","fill","bold","title","_b","map","child","render","hasClickableItems","some","Host","htmlAriaLabelledby","htmlSectionTitle"],"sources":["src/components/list/z-tree-list/styles.css?tag=z-tree-list&encapsulation=shadow","src/components/list/z-tree-list/index.tsx"],"sourcesContent":[":host {\n font-family: var(--font-family-sans);\n}\n\nz-list-element {\n position: relative;\n display: block;\n padding-top: var(--space-unit);\n}\n\nz-list-element::before,\nz-list-element::after {\n position: absolute;\n z-index: 100;\n top: 0.125rem;\n left: -0.5rem;\n content: \"\";\n}\n\nz-list z-list-element::before {\n width: var(--space-unit);\n height: calc(var(--space-unit) * 2);\n border-bottom: var(--border-size-small) solid var(--color-disabled01-icon);\n border-left: var(--border-size-small) solid var(--color-disabled01-icon);\n}\n\nz-list z-list-element::after {\n width: var(--space-unit);\n height: 100%;\n border-left: var(--border-size-small) solid var(--color-disabled01-icon);\n}\n\nz-list z-list-element:last-child::after,\nz-list > z-list-element::before,\nz-list > z-list-element::after,\nz-list > z-list-group > z-list-element::before,\nz-list > z-list-group > z-list-element::after {\n display: none;\n}\n\nz-list > div.children-node {\n padding-left: calc(var(--space-unit) * 2);\n}\n\nz-list-element > .list-element {\n z-index: 100;\n display: flex;\n justify-content: space-between;\n padding: 0;\n color: var(--color-default-text);\n font-size: var(--font-size-2);\n font-style: normal;\n font-weight: var(--font-rg);\n text-decoration: none;\n}\n\nz-list-element > .list-element.link-clickable {\n color: var(--color-primary01);\n}\n\nz-list-element > .list-element.link-clickable:hover {\n text-decoration: underline;\n}\n\nz-list-element > .list-element .item.ellipsis {\n overflow: hidden;\n}\n\nz-list-element .list-element::after {\n position: absolute;\n top: 0;\n right: -0.0625rem;\n display: block;\n width: 100%;\n height: calc(var(--space-unit) * 5);\n content: \"\";\n transform: translateX(-100%);\n}\n\n.item-label {\n overflow: hidden;\n flex-grow: 1;\n font-size: var(--font-size-2);\n font-style: normal;\n font-weight: var(--font-rg);\n letter-spacing: 0.0032rem;\n line-height: 1.25rem;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.item-label.bold-item {\n font-weight: var(--font-sb);\n}\n\n.item.ellipsis {\n display: flex;\n overflow: hidden;\n max-width: 100%;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.children-node > z-list-element {\n padding: 0;\n padding-top: 0.125;\n padding-left: calc(var(--space-unit) * 1.25);\n}\n\n.item-icon {\n margin-right: var(--space-unit);\n}\n\n.no-icon-label {\n padding-left: var(--space-unit);\n}\n\n.children-node > z-list-element.no-icon-elm {\n padding-left: 0;\n}\n\nz-list-element > .list-element:focus:focus-visible {\n position: relative;\n z-index: 200;\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n@media (max-width: 767px) {\n z-list-element::before,\n z-list-element::after {\n top: 0.1875rem;\n }\n\n z-list z-list-element::before {\n height: calc(var(--space-unit) * 2.5);\n }\n\n .children-node > z-list-element {\n padding-top: var(--space-unit);\n }\n}\n","import {Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, Watch, h} from \"@stencil/core\";\nimport {KeyboardCode, TreeListItem} from \"../../../beans\";\n\n@Component({\n tag: \"z-tree-list\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTreeList implements ComponentInterface {\n @Element() host: HTMLZTreeListElement;\n\n /** Items to render, if they have the url property they will be rendered as clickable links */\n @Prop()\n items: TreeListItem[] | string = [];\n\n /** Used for aria-labelledby attribute, sets name in \"navigation\" */\n @Prop({reflect: true})\n htmlAriaLabelledby: string;\n\n /** Used for aria-label attribute, sets name in \"tree\" */\n @Prop({reflect: true})\n htmlSectionTitle: string;\n\n /** Emitted on item click, it return the id, name and url of the clicked item */\n @Event()\n treeItemClicked: EventEmitter<{id: string; name: string; url: string}>;\n\n private parsedItems: TreeListItem[] = [];\n\n private htmlTag: string;\n\n @Watch(\"items\")\n watchItems(): void {\n this.parsedItems = typeof this.items === \"string\" ? JSON.parse(this.items) : this.items;\n }\n\n componentWillLoad(): void {\n this.watchItems();\n }\n\n private handleClick(item: TreeListItem): void {\n this.treeItemClicked.emit({id: item.id, name: item.name, url: item.url});\n }\n\n private getFocusableElements(): HTMLElement[] {\n return Array.from(this.host.shadowRoot.querySelectorAll('a[tabindex=\"0\"]'));\n }\n\n private getAncestor(element: HTMLElement, levels: number): HTMLElement | null {\n let ancestor: HTMLElement | null = element;\n\n for (let i = 0; i < levels; i++) {\n ancestor = ancestor?.parentElement;\n if (!ancestor) {\n return;\n }\n }\n\n return ancestor;\n }\n\n private handleArrowNav(event: KeyboardEvent): void {\n if (event.code === KeyboardCode.TAB) {\n event.preventDefault();\n\n return;\n }\n\n const focusableElements = this.getFocusableElements();\n const currentIndex = focusableElements.indexOf(event.target as HTMLElement);\n\n if (currentIndex === -1) {\n return;\n }\n\n if (event.code === KeyboardCode.ARROW_DOWN || event.code === KeyboardCode.ARROW_UP) {\n event.preventDefault();\n\n const nextIndex = currentIndex + (event.code === KeyboardCode.ARROW_DOWN ? 1 : -1);\n if (nextIndex < 0 || nextIndex >= focusableElements.length) {\n return;\n }\n\n focusableElements[nextIndex].focus();\n }\n\n if (event.code === KeyboardCode.ARROW_LEFT) {\n event.preventDefault();\n const ancestor = this.getAncestor(focusableElements[currentIndex], 4);\n\n if (\n !ancestor ||\n !ancestor.children[0] ||\n (ancestor.children[0].tagName.toLowerCase() !== \"a\" && ancestor.getAttribute(\"tabindex\") === null)\n ) {\n return;\n }\n\n (ancestor.children[0] as HTMLElement).focus();\n }\n\n if (event.code === KeyboardCode.ARROW_RIGHT) {\n event.preventDefault();\n\n const parentElm = (event.target as HTMLElement).closest(\"z-list-element\") as HTMLElement;\n\n if (!parentElm) {\n return;\n }\n\n const childrenContainer = parentElm.querySelector(\"z-list\") as HTMLElement;\n\n if (!childrenContainer) {\n return;\n }\n\n const firstChild = childrenContainer.querySelector('a[tabindex=\"0\"]') as HTMLElement;\n\n if (!firstChild) {\n return;\n }\n\n firstChild.focus();\n }\n }\n\n private renderTreeList(item: TreeListItem, key: string, level = 1): HTMLZListElementElement {\n this.htmlTag = item.url ? \"a\" : \"span\";\n\n const treeListContent = (\n <z-list-element\n id={key}\n class={!item.icon ? \"no-icon-elm\" : \"\"}\n clickable={Boolean(item.url)}\n hasTreeItems={true}\n role=\"none\"\n aria-hidden={undefined}\n >\n <this.htmlTag\n class={{\n \"list-element\": true,\n \"z-link\": Boolean(item.url),\n \"link-clickable\": Boolean(item.url),\n }}\n tabIndex={item.url ? 0 : -1}\n onClick={() => this.handleClick(item)}\n onKeyUp={(event: KeyboardEvent) => {\n if (event.code === KeyboardCode.ENTER || event.code === KeyboardCode.SPACE) {\n this.handleClick(item);\n }\n }}\n onKeyDown={(event: KeyboardEvent) => this.handleArrowNav(event)}\n role={item.url ? \"treeitem\" : undefined}\n aria-hidden={item.url ? undefined : \"true\"}\n aria-expanded={item.children?.length > 0 && true}\n aria-level={level}\n aria-label={item.name}\n href={item.url}\n >\n <span class=\"item ellipsis\">\n {item.icon && (\n <z-icon\n width={16}\n height={16}\n fill={item.url ? \"color-primary01\" : \"color-default-icon\"}\n class=\"item-icon\"\n name={item.icon}\n />\n )}\n <span\n class={{\n \"item-label\": true,\n \"no-icon-label\": !item.icon,\n \"bold-item\": item.bold,\n }}\n title={item.name}\n >\n {item.name}\n </span>\n </span>\n </this.htmlTag>\n {item.children?.length > 0 && (\n <z-list role=\"group\">\n <div class=\"children-node\">\n {item.children.map((child, key) => this.renderTreeList(child, `${key}`, level + 1))}\n </div>\n </z-list>\n )}\n </z-list-element>\n );\n\n return treeListContent;\n }\n\n render(): HTMLZTreeListElement {\n const hasClickableItems = this.parsedItems.some((item) => !!item.url);\n\n return (\n <Host\n class=\"tree-list\"\n role={hasClickableItems ? \"navigation\" : \"none\"}\n aria-hidden={hasClickableItems ? undefined : \"true\"}\n aria-labelledby={this.htmlAriaLabelledby}\n >\n <div\n tabIndex={-1}\n role={hasClickableItems ? \"tree\" : \"none\"}\n aria-hidden={hasClickableItems ? undefined : \"true\"}\n aria-label={this.htmlSectionTitle}\n >\n {this.parsedItems.map((item, key) => this.renderTreeList(item, `${key}`))}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1 +1,2 @@
-import{proxyCustomElement as e,HTMLElement as t,h as i,transformTag as n}from"@stencil/core/internal/client";const s=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}render(){return i("slot",{key:"7ddc72b3dc926a0205188bf75d5e42c15f913771"})}static get style(){return":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}"}},[257,"z-visually-hidden"]),o=s,d=function(){"undefined"!=typeof customElements&&["z-visually-hidden"].forEach((e=>{"z-visually-hidden"===e&&(customElements.get(n(e))||customElements.define(n(e),s))}))};export{o as ZVisuallyHidden,d as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as t,h as s,transformTag as n}from"@stencil/core/internal/client";const i=()=>`: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 c=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow()}render(){return s("slot",{key:"e1a4d7e8ec823326ce9decd1bcbf5ffc3e2987bf"})}static get style(){return i()}},[257,"z-visually-hidden"]);function o(){if(typeof customElements==="undefined"){return}const e=["z-visually-hidden"];e.forEach((e=>{switch(e){case"z-visually-hidden":if(!customElements.get(n(e))){customElements.define(n(e),c)}break}}))}const r=c;const l=o;export{r as ZVisuallyHidden,l as defineCustomElement};
+//# sourceMappingURL=z-visually-hidden.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"names":["stylesCss","ZVisuallyHidden","__stencil_proxyCustomElement","HTMLElement","render","h","key"],"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, ComponentInterface, h} from \"@stencil/core\";\n\n@Component({\n tag: \"z-visually-hidden\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZVisuallyHidden implements ComponentInterface {\n render(): HTMLSlotElement {\n return <slot />;\n }\n}\n"],"mappings":"6GAAA,MAAMA,EAAY,IAAM,mK,MCOXC,EAAeC,EAAA,MAAAD,UAAAE,E,iFAC1B,MAAAC,GACE,OAAOC,EAAA,QAAAC,IAAA,4C","ignoreList":[]}

package/dist/esm/_commonjsHelpers-B85MJLTf.js CHANGED Viewed

@@ -3,3 +3,6 @@ function getDefaultExportFromCjs (x) {
 }
 export { getDefaultExportFromCjs as g };
+//# sourceMappingURL=_commonjsHelpers-B85MJLTf.js.map
+//# sourceMappingURL=_commonjsHelpers-B85MJLTf.js.map

package/dist/esm/_commonjsHelpers-B85MJLTf.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"_commonjsHelpers-B85MJLTf.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/esm/breakpoints-Q-tWjk7P.js CHANGED Viewed

@@ -7,3 +7,6 @@ var Breakpoints;
 })(Breakpoints || (Breakpoints = {}));
 export { Breakpoints as B };
+//# sourceMappingURL=breakpoints-Q-tWjk7P.js.map
+//# sourceMappingURL=breakpoints-Q-tWjk7P.js.map

package/dist/esm/breakpoints-Q-tWjk7P.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"breakpoints-Q-tWjk7P.js","sources":["src/constants/breakpoints.ts"],"sourcesContent":["/** Breakpoints for responsive design. The values are the max width of the screen for each breakpoint. */\nexport enum Breakpoints {\n MOBILE = 767,\n TABLET = 1151,\n DESKTOP = 1365,\n}\n"],"names":[],"mappings":"AAAA;AACA,IAAY;AAAZ,CAAA,UAAY,WAAW,EAAA;IACrB,WAAA,CAAA,WAAA,CAAA,QAAA,CAAA,GAAA,GAAA,CAAA,GAAA,QAAY;IACZ,WAAA,CAAA,WAAA,CAAA,QAAA,CAAA,GAAA,IAAA,CAAA,GAAA,QAAa;IACb,WAAA,CAAA,WAAA,CAAA,SAAA,CAAA,GAAA,IAAA,CAAA,GAAA,SAAc;AAChB,CAAC,EAJW,WAAW,KAAX,WAAW,GAAA,EAAA,CAAA,CAAA;;;;"}

package/dist/esm/iconset-AwzX9V8L.js CHANGED Viewed

@@ -1022,3 +1022,6 @@ const COLOR_INDICATOR_ICONS = [
 ];
 export { COLOR_INDICATOR_ICONS as C, ICONS as I };
+//# sourceMappingURL=iconset-AwzX9V8L.js.map
+//# sourceMappingURL=iconset-AwzX9V8L.js.map