npm - @zanichelli/albe-web-components - Versions diffs - 13.0.0 → 13.1.0-rc2 - Mend

@zanichelli/albe-web-components 13.0.0 → 13.1.0-rc2

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

package/dist/components/index13.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { j as ExpandableListButtonAlign, l as ListDividerType, D as DividerSize,
 import { d as defineCustomElement$2 } from './index6.js';
 import { d as defineCustomElement$1 } from './index9.js';
-const stylesCss = ":host{outline:none}:host>.container{--background-color-list-element:var(--color-surface01);--background-hover-color-list-element:var(--color-surface02);--background-active-color-list-element:var(--color-surface02);display:flex;box-sizing:border-box;flex-direction:column;justify-content:center;font-family:var(--font-family-sans);font-weight:var(--font-rg);outline:none}:host([size=\"small\"])>.container{min-height:calc(var(--space-unit) * 4);padding:calc(var(--space-unit) / 2) 0}:host([size=\"medium\"])>.container{min-height:calc(var(--space-unit) * 5);padding:var(--space-unit) 0}:host([size=\"large\"])>.container{min-height:calc(var(--space-unit) * 7);padding:calc(var(--space-unit) * 2) 0}:host([size=\"x-large\"])>.container{min-height:calc(var(--space-unit) * 9);padding:calc(var(--space-unit) * 3) 0}:host([expandable])>.container,:host([clickable])>.container{cursor:pointer}:host([expandable]:hover)>.container,:host([clickable]:hover)>.container{background-color:var(--background-hover-color-list-element)}:host([expandable]:focus:focus-visible)>.container,:host([clickable]:focus:focus-visible)>.container{box-shadow:var(--shadow-focus-primary)}:host([clickable]:not([expandable]))>.container.clicked{box-shadow:var(--shadow-focus-primary)}:host([expandable]:active)>.container,:host([clickable]:active)>.container{background-color:var(--background-active-color-list-element)}:host([align-button=\"left\"][expandable])>.container>.z-list-element-container{display:flex}:host([align-button=\"right\"][expandable])>.container>.z-list-element-container{display:flex;flex-direction:row-reverse;justify-content:space-between}:host([align-button=\"left\"][expandable])>.container>.z-list-element-container>z-icon{margin-right:var(--space-unit)}:host([align-button=\"right\"][expandable])>.container>.z-list-element-container>z-icon{margin-left:var(--space-unit)}:host>.container>.z-list-element-inner-container{display:none}:host>.container>.z-list-element-inner-container.expanded{display:block}.z-list-content-container{display:flex;align-items:center}";
+const stylesCss = ":host{outline:none}:host>.container,:host>.container-contextual-menu{--background-color-list-element:var(--color-surface01);--background-hover-color-list-element:var(--color-surface02);--background-active-color-list-element:var(--color-surface02);display:flex;box-sizing:border-box;flex-direction:column;justify-content:center;font-family:var(--font-family-sans);font-weight:var(--font-rg);outline:none}:host([size=\"small\"])>.container{min-height:calc(var(--space-unit) * 4);padding:calc(var(--space-unit) / 2) 0}:host([size=\"medium\"])>.container{min-height:calc(var(--space-unit) * 5);padding:var(--space-unit) 0}:host([size=\"large\"])>.container{min-height:calc(var(--space-unit) * 7);padding:calc(var(--space-unit) * 2) 0}:host([size=\"x-large\"])>.container{min-height:calc(var(--space-unit) * 9);padding:calc(var(--space-unit) * 3) 0}:host([expandable])>.container,:host([expandable])>.container-contextual-menu,:host([clickable])>.container,:host([clickable])>.container-contextual-menu{cursor:pointer}:host([expandable]:hover)>.container,:host([expandable]:hover)>.container-contextual-menu,:host([clickable]:hover)>.container,:host([clickable]:hover)>.container-contextual-menu{background-color:var(--background-hover-color-list-element)}:host([expandable]:focus:focus-visible)>.container,:host([expandable]:focus:focus-visible)>.container-contextual-menu,:host([clickable]:focus:focus-visible)>.container,:host([clickable]:focus:focus-visible)>.container-contextual-menu{box-shadow:var(--shadow-focus-primary)}:host([clickable]:not([expandable]))>.container.clicked,:host([clickable]:not([expandable]))>.container-contextual-menu.clicked{box-shadow:var(--shadow-focus-primary)}:host([expandable]:active)>.container,:host([expandable]:active)>.container-contextual-menu,:host([clickable]:active)>.container,:host([clickable]:active)>.container-contextual-menu{background-color:var(--background-active-color-list-element)}:host([align-button=\"left\"][expandable])>.container>.z-list-element-container,:host([align-button=\"left\"][expandable])>.container-contextual-menu>.z-list-element-container{display:flex}:host([align-button=\"right\"][expandable])>.container>.z-list-element-container,:host([align-button=\"right\"][expandable])>.container-contextual-menu>.z-list-element-container{display:flex;flex-direction:row-reverse;justify-content:space-between}:host([align-button=\"left\"][expandable])>.container>.z-list-element-container>z-icon,:host([align-button=\"left\"][expandable])>.container-contextual-menu>.z-list-element-container>z-icon{margin-right:var(--space-unit)}:host([align-button=\"right\"][expandable])>.container>.z-list-element-container>z-icon,:host([align-button=\"right\"][expandable])>.container-contextual-menu>.z-list-element-container>z-icon{margin-left:var(--space-unit)}:host>.container>.z-list-element-inner-container,:host>.container-contextual-menu>.z-list-element-inner-container{display:none}:host>.container>.z-list-element-inner-container.expanded,:host>.container-contextual-menu>.z-list-element-inner-container.expanded{display:block}:host([clickable]:hover)>.container-contextual-menu{background-color:var(--color-surface03)}.container-contextual-menu:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.z-list-content-container{display:flex;align-items:center}";
 const ZListElementStyle0 = stylesCss;
 const ZListElement = /*@__PURE__*/ proxyCustomElement(class ZListElement extends HTMLElement {
@@ -44,6 +44,7 @@ const ZListElement = /*@__PURE__*/ proxyCustomElement(class ZListElement extends
         this.size = ListSize.MEDIUM;
         this.color = "none";
         this.disabled = false;
+        this.isContextualMenu = false;
         this.listElementPosition = "0";
         this.listType = ListType.NONE;
         this.role = "listitem";
@@ -62,6 +63,12 @@ const ZListElement = /*@__PURE__*/ proxyCustomElement(class ZListElement extends
         }
         this.showInnerContent = !this.showInnerContent;
     }
+    calculateClass() {
+        if (this.isContextualMenu) {
+            return "container-contextual-menu";
+        }
+        return "container";
+    }
     handleKeyDown(event) {
         const expandByKey = event.code === KeyboardCode.ENTER;
         switch (event.code) {
@@ -124,7 +131,7 @@ const ZListElement = /*@__PURE__*/ proxyCustomElement(class ZListElement extends
         }
     }
     render() {
-        return (h(Host, { key: 'b0dc00b8abad630739f30361dcb1abad5fa379e0', "aria-expanded": this.expandable ? this.showInnerContent : null, onClick: this.handleClick, onFocus: () => this.ariaDescendantFocus.emit(this.listElementId), onKeyDown: this.handleKeyDown, clickable: this.clickable && !this.disabled, tabIndex: "0" }, h("div", { key: '81f742ce528b757fb67feefc231ce78e7e76ba87', class: "container", style: { color: `var(--${this.color})` }, tabindex: "-1", id: `z-list-element-id-${this.listElementId}`, part: "list-item-container" }, h("div", { key: 'c2230431473ea5e8292b26c280c71a86d795a1de', class: "z-list-element-container" }, this.renderExpandableButton(), this.renderContent()), this.renderExpandedContent()), this.dividerType === ListDividerType.ELEMENT && (h("z-divider", { color: this.dividerColor, size: this.dividerSize }))));
+        return (h(Host, { key: '3c55ce5744a82e1b1871f658d0d63dc49a55fbba', "aria-expanded": this.expandable ? this.showInnerContent : null, onClick: this.handleClick, onFocus: () => this.ariaDescendantFocus.emit(this.listElementId), onKeyDown: this.handleKeyDown, clickable: this.clickable && !this.disabled, tabIndex: !this.isContextualMenu ? "0" : null }, h("div", { key: 'f9ccf0529e72d61ffed2f8da94461b6d0d904447', class: `${this.calculateClass()}`, style: { color: `var(--${this.color})` }, tabindex: this.isContextualMenu ? "0" : "-1", id: `z-list-element-id-${this.listElementId}`, part: "list-item-container" }, h("div", { key: '9747b70e158f1e0a50bd392bc11724df0951196e', class: "z-list-element-container" }, this.renderExpandableButton(), this.renderContent()), this.renderExpandedContent()), this.dividerType === ListDividerType.ELEMENT && (h("z-divider", { color: this.dividerColor, size: this.dividerSize }))));
     }
     get host() { return this; }
     static get style() { return ZListElementStyle0; }
@@ -140,6 +147,7 @@ const ZListElement = /*@__PURE__*/ proxyCustomElement(class ZListElement extends
         "size": [513],
         "color": [513],
         "disabled": [516],
+        "isContextualMenu": [516, "is-contextual-menu"],
         "listElementPosition": [513, "list-element-position"],
         "listType": [513, "list-type"],
         "role": [513],

package/dist/components/index13.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"index13.js","mappings":"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","names":[],"sources":["src/components/list/z-list-element/styles.css?tag=z-list-element&encapsulation=shadow","src/components/list/z-list-element/index.tsx"],"sourcesContent":[":host {\n outline: none;\n}\n\n:host > .container {\n --background-color-list-element: var(--color-surface01);\n --background-hover-color-list-element: var(--color-surface02);\n --background-active-color-list-element: var(--color-surface02);\n\n display: flex;\n box-sizing: border-box;\n flex-direction: column;\n justify-content: center;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n outline: none;\n}\n\n/* z-list-element size /\n\n:host([size=\"small\"]) > .container {\n min-height: calc(var(--space-unit) 4);\n padding: calc(var(--space-unit) / 2) 0;\n}\n\n:host([size=\"medium\"]) > .container {\n min-height: calc(var(--space-unit) * 5);\n padding: var(--space-unit) 0;\n}\n\n:host([size=\"large\"]) > .container {\n min-height: calc(var(--space-unit) * 7);\n padding: calc(var(--space-unit) * 2) 0;\n}\n\n:host([size=\"x-large\"]) > .container {\n min-height: calc(var(--space-unit) * 9);\n padding: calc(var(--space-unit) * 3) 0;\n}\n\n/* ----------------- /\n\n:host([expandable]) > .container,\n:host([clickable]) > .container {\n cursor: pointer;\n}\n\n:host([expandable]:hover) > .container,\n:host([clickable]:hover) > .container {\n background-color: var(--background-hover-color-list-element);\n}\n\n:host([expandable]:focus:focus-visible) > .container,\n:host([clickable]:focus:focus-visible) > .container {\n box-shadow: var(--shadow-focus-primary);\n}\n\n:host([clickable]:not([expandable])) > .container.clicked {\n box-shadow: var(--shadow-focus-primary);\n}\n\n:host([expandable]:active) > .container,\n:host([clickable]:active) > .container {\n background-color: var(--background-active-color-list-element);\n}\n\n:host([align-button=\"left\"][expandable]) > .container > .z-list-element-container {\n display: flex;\n}\n\n:host([align-button=\"right\"][expandable]) > .container > .z-list-element-container {\n display: flex;\n flex-direction: row-reverse;\n justify-content: space-between;\n}\n\n:host([align-button=\"left\"][expandable]) > .container > .z-list-element-container > z-icon {\n margin-right: var(--space-unit);\n}\n\n:host([align-button=\"right\"][expandable]) > .container > .z-list-element-container > z-icon {\n margin-left: var(--space-unit);\n}\n\n:host > .container > .z-list-element-inner-container {\n display: none;\n}\n\n:host > .container > .z-list-element-inner-container.expanded {\n display: block;\n}\n\n.z-list-content-container {\n display: flex;\n align-items: center;\n}\n","import {Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State} from \"@stencil/core\";\nimport {\n DividerSize,\n ExpandableListButtonAlign,\n ExpandableListStyle,\n KeyboardCode,\n ListDividerType,\n ListSize,\n ListType,\n} from \"../../../beans\";\n\n@Component({\n tag: \"z-list-element\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZListElement {\n @Element() host: HTMLZListElementElement;\n\n /* remove filter click event, returns filterid /\n @Event({\n eventName: \"accessibleFocus\",\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n accessibleFocus: EventEmitter<number>;\n\n /* set parent aria-activedescendant on focus event, returns filterid /\n @Event({\n eventName: \"ariaDescendantFocus\",\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n ariaDescendantFocus: EventEmitter<number>;\n\n /* remove filter click event, returns filterid /\n @Event({\n eventName: \"clickItem\",\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n clickItem: EventEmitter;\n\n @Listen(\"accessibleFocus\", {target: \"document\"})\n accessibleFocusHandler(e: CustomEvent): void {\n if (this.listElementId === e.detail) {\n const toFocus = this.host.shadowRoot.getElementById(`z-list-element-id-${e.detail}`);\n toFocus.focus();\n }\n }\n\n /\n [optional] Align expandable button left or right.\n /\n @Prop({reflect: true})\n alignButton?: ExpandableListButtonAlign = ExpandableListButtonAlign.LEFT;\n\n /\n [optional] Sets element clickable.\n /\n @Prop({reflect: true})\n clickable?: boolean = false;\n\n /\n [optional] Sets the divider color.\n /\n @Prop()\n dividerColor?: string = \"color-surface03\";\n\n /\n [optional] Sets the position where to insert the divider.\n /\n @Prop()\n dividerType?: ListDividerType = ListDividerType.NONE;\n\n /\n [optional] Sets the divider size.\n /\n @Prop()\n dividerSize?: DividerSize = DividerSize.SMALL;\n\n /\n [optional] Sets element as expandable.\n /\n @Prop({reflect: true})\n expandable?: boolean = false;\n\n /\n [optional] Sets expandable style to element.\n /\n @Prop()\n expandableStyle?: ExpandableListStyle = ExpandableListStyle.ACCORDION;\n\n /\n [optional] List element id.\n /\n @Prop({reflect: true})\n listElementId?: number;\n\n /\n [optional] Sets size of inside elements.\n /\n @Prop({reflect: true})\n size?: ListSize = ListSize.MEDIUM;\n\n /\n [optional] Sets text color of the element.\n /\n @Prop({reflect: true})\n color?: string = \"none\";\n\n /\n [optional] Sets disabled style of the element.\n /\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /\n [optional] position of the list element inside the list or the group\n /\n @Prop({reflect: true})\n listElementPosition?: string = \"0\";\n\n /\n [optional] type of the list marker for each element\n /\n @Prop({reflect: true})\n listType?: ListType = ListType.NONE;\n\n /\n [optional] Sets element role.\n /\n @Prop({reflect: true})\n role?: string = \"listitem\";\n\n @State()\n showInnerContent = false;\n\n private openElementConfig = {\n accordion: {\n open: \"minus-circled\",\n close: \"plus-circled\",\n },\n menu: {\n open: \"chevron-up\",\n close: \"chevron-down\",\n },\n };\n\n /\n Constructor.\n /\n constructor() {\n this.handleClick = this.handleClick.bind(this);\n this.handleKeyDown = this.handleKeyDown.bind(this);\n }\n\n /\n Handler for click on element. If element is expandable, change state.\n * @returns void\n /\n private handleClick(): void {\n this.clickItem.emit(this.listElementId);\n if (!this.expandable) {\n return;\n }\n this.showInnerContent = !this.showInnerContent;\n }\n\n private handleKeyDown(event): void {\n const expandByKey = event.code === KeyboardCode.ENTER;\n switch (event.code) {\n case KeyboardCode.ARROW_DOWN:\n event.preventDefault();\n this.accessibleFocus.emit(this.listElementId + 1);\n break;\n case KeyboardCode.ARROW_UP:\n event.preventDefault();\n this.accessibleFocus.emit(this.listElementId - 1);\n break;\n case KeyboardCode.ENTER:\n event.preventDefault();\n this.clickItem.emit(this.listElementId);\n break;\n default:\n break;\n }\n\n if (!this.expandable \|\| !expandByKey) {\n return;\n }\n this.showInnerContent = !this.showInnerContent;\n }\n\n /\n Renders button to expand element.\n * @returns expadable button\n /\n private renderExpandableButton(): HTMLZIconElement {\n if (!this.expandable) {\n return null;\n }\n\n return (\n <z-icon\n name={\n this.showInnerContent\n ? this.openElementConfig[this.expandableStyle].open\n : this.openElementConfig[this.expandableStyle].close\n }\n />\n );\n }\n\n /\n Renders expanded content if element is expandable.\n * @returns expanded content\n /\n private renderExpandedContent(): HTMLDivElement {\n if (!this.expandable) {\n return null;\n }\n\n return (\n <div\n class={{\n \"z-list-element-inner-container\": true,\n \"expanded\": this.showInnerContent,\n }}\n >\n <slot name=\"inner-content\" />\n </div>\n );\n }\n\n /\n Renders content of the z-list-element\n * @returns list content\n */\n private renderContent(): HTMLDivElement {\n if (this.listType === ListType.NONE) {\n return <slot />;\n }\n\n if (this.listType === ListType.ORDERED) {\n return (\n <div class=\"z-list-content-container\">\n <div>{this.listElementPosition}.&emsp;</div>\n <slot />\n </div>\n );\n }\n\n if (this.listType === ListType.UNORDERED) {\n return (\n <div class=\"z-list-content-container\">\n <span>•&emsp;</span>\n <slot />\n </div>\n );\n }\n }\n\n render(): HTMLZListElementElement {\n return (\n <Host\n aria-expanded={this.expandable ? this.showInnerContent : null}\n onClick={this.handleClick}\n onFocus={() => this.ariaDescendantFocus.emit(this.listElementId)}\n onKeyDown={this.handleKeyDown}\n clickable={this.clickable && !this.disabled}\n tabIndex=\"0\"\n >\n <div\n class=\"container\"\n style={{color: `var(--${this.color})`}}\n tabindex=\"-1\"\n id={`z-list-element-id-${this.listElementId}`}\n part=\"list-item-container\"\n >\n <div class=\"z-list-element-container\">\n {this.renderExpandableButton()}\n {this.renderContent()}\n </div>\n {this.renderExpandedContent()}\n </div>\n {this.dividerType === ListDividerType.ELEMENT && (\n <z-divider\n color={this.dividerColor}\n size={this.dividerSize}\n />\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"index13.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,owGAAowG,CAAC;AACvxG,2BAAe,SAAS;;MCeX,YAAY;IA+BvB,sBAAsB,CAAC,CAAc;QACnC,IAAI,IAAI,CAAC,aAAa,KAAK,CAAC,CAAC,MAAM,EAAE;YACnC,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,qBAAqB,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC;YACrF,OAAO,CAAC,KAAK,EAAE,CAAC;SACjB;KACF;;;;IA6GD;;;;;;;QAdQ,sBAAiB,GAAG;YAC1B,SAAS,EAAE;gBACT,IAAI,EAAE,eAAe;gBACrB,KAAK,EAAE,cAAc;aACtB;YACD,IAAI,EAAE;gBACJ,IAAI,EAAE,YAAY;gBAClB,KAAK,EAAE,cAAc;aACtB;SACF,CAAC;2BAlGwC,yBAAyB,CAAC,IAAI;yBAMlD,KAAK;4BAMH,iBAAiB;2BAMT,eAAe,CAAC,IAAI;2BAMxB,WAAW,CAAC,KAAK;0BAMtB,KAAK;+BAMY,mBAAmB,CAAC,SAAS;;oBAYnD,QAAQ,CAAC,MAAM;qBAMhB,MAAM;wBAMF,KAAK;gCAMG,KAAK;mCAMH,GAAG;wBAMZ,QAAQ,CAAC,IAAI;oBAMnB,UAAU;gCAGP,KAAK;QAiBtB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC/C,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACpD;;;;;IAMO,WAAW;QACjB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACxC,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YACpB,OAAO;SACR;QACD,IAAI,CAAC,gBAAgB,GAAG,CAAC,IAAI,CAAC,gBAAgB,CAAC;KAChD;IAEO,cAAc;QACpB,IAAI,IAAI,CAAC,gBAAgB,EAAE;YACzB,OAAO,2BAA2B,CAAC;SACpC;QAED,OAAO,WAAW,CAAC;KACpB;IAEO,aAAa,CAAC,KAAK;QACzB,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,KAAK,YAAY,CAAC,KAAK,CAAC;QACtD,QAAQ,KAAK,CAAC,IAAI;YAChB,KAAK,YAAY,CAAC,UAAU;gBAC1B,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC;gBAClD,MAAM;YACR,KAAK,YAAY,CAAC,QAAQ;gBACxB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC;gBAClD,MAAM;YACR,KAAK,YAAY,CAAC,KAAK;gBACrB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;gBACxC,MAAM;SAGT;QAED,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,WAAW,EAAE;YACpC,OAAO;SACR;QACD,IAAI,CAAC,gBAAgB,GAAG,CAAC,IAAI,CAAC,gBAAgB,CAAC;KAChD;;;;;IAMO,sBAAsB;QAC5B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YACpB,OAAO,IAAI,CAAC;SACb;QAED,QACE,cACE,IAAI,EACF,IAAI,CAAC,gBAAgB;kBACjB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,IAAI;kBACjD,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,KAAK,GAExD,EACF;KACH;;;;;IAMO,qBAAqB;QAC3B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YACpB,OAAO,IAAI,CAAC;SACb;QAED,QACE,WACE,KAAK,EAAE;gBACL,gCAAgC,EAAE,IAAI;gBACtC,UAAU,EAAE,IAAI,CAAC,gBAAgB;aAClC,IAED,YAAM,IAAI,EAAC,eAAe,GAAG,CACzB,EACN;KACH;;;;;IAMO,aAAa;QACnB,IAAI,IAAI,CAAC,QAAQ,KAAK,QAAQ,CAAC,IAAI,EAAE;YACnC,OAAO,eAAQ,CAAC;SACjB;QAED,IAAI,IAAI,CAAC,QAAQ,KAAK,QAAQ,CAAC,OAAO,EAAE;YACtC,QACE,WAAK,KAAK,EAAC,0BAA0B,IACnC,eAAM,IAAI,CAAC,mBAAmB,YAAc,EAC5C,eAAQ,CACJ,EACN;SACH;QAED,IAAI,IAAI,CAAC,QAAQ,KAAK,QAAQ,CAAC,SAAS,EAAE;YACxC,QACE,WAAK,KAAK,EAAC,0BAA0B,IACnC,+BAAyB,EACzB,eAAQ,CACJ,EACN;SACH;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,sEACY,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,gBAAgB,GAAG,IAAI,EAC7D,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,MAAM,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,EAChE,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,SAAS,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ,EAC3C,QAAQ,EAAE,CAAC,IAAI,CAAC,gBAAgB,GAAG,GAAG,GAAG,IAAI,IAE7C,4DACE,KAAK,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,EAAE,EACjC,KAAK,EAAE,EAAC,KAAK,EAAE,SAAS,IAAI,CAAC,KAAK,GAAG,EAAC,EACtC,QAAQ,EAAE,IAAI,CAAC,gBAAgB,GAAG,GAAG,GAAG,IAAI,EAC5C,EAAE,EAAE,qBAAqB,IAAI,CAAC,aAAa,EAAE,EAC7C,IAAI,EAAC,qBAAqB,IAE1B,4DAAK,KAAK,EAAC,0BAA0B,IAClC,IAAI,CAAC,sBAAsB,EAAE,EAC7B,IAAI,CAAC,aAAa,EAAE,CACjB,EACL,IAAI,CAAC,qBAAqB,EAAE,CACzB,EACL,IAAI,CAAC,WAAW,KAAK,eAAe,CAAC,OAAO,KAC3C,iBACE,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,IAAI,EAAE,IAAI,CAAC,WAAW,GACtB,CACH,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/list/z-list-element/styles.css?tag=z-list-element&encapsulation=shadow","src/components/list/z-list-element/index.tsx"],"sourcesContent":[":host {\n outline: none;\n}\n\n:host > .container,\n:host > .container-contextual-menu {\n --background-color-list-element: var(--color-surface01);\n --background-hover-color-list-element: var(--color-surface02);\n --background-active-color-list-element: var(--color-surface02);\n\n display: flex;\n box-sizing: border-box;\n flex-direction: column;\n justify-content: center;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n outline: none;\n}\n\n/* z-list-element size /\n\n:host([size=\"small\"]) > .container {\n min-height: calc(var(--space-unit) 4);\n padding: calc(var(--space-unit) / 2) 0;\n}\n\n:host([size=\"medium\"]) > .container {\n min-height: calc(var(--space-unit) * 5);\n padding: var(--space-unit) 0;\n}\n\n:host([size=\"large\"]) > .container {\n min-height: calc(var(--space-unit) * 7);\n padding: calc(var(--space-unit) * 2) 0;\n}\n\n:host([size=\"x-large\"]) > .container {\n min-height: calc(var(--space-unit) * 9);\n padding: calc(var(--space-unit) * 3) 0;\n}\n\n/* ----------------- /\n\n:host([expandable]) > .container,\n:host([expandable]) > .container-contextual-menu,\n:host([clickable]) > .container,\n:host([clickable]) > .container-contextual-menu {\n cursor: pointer;\n}\n\n:host([expandable]:hover) > .container,\n:host([expandable]:hover) > .container-contextual-menu,\n:host([clickable]:hover) > .container,\n:host([clickable]:hover) > .container-contextual-menu {\n background-color: var(--background-hover-color-list-element);\n}\n\n:host([expandable]:focus:focus-visible) > .container,\n:host([expandable]:focus:focus-visible) > .container-contextual-menu,\n:host([clickable]:focus:focus-visible) > .container,\n:host([clickable]:focus:focus-visible) > .container-contextual-menu {\n box-shadow: var(--shadow-focus-primary);\n}\n\n:host([clickable]:not([expandable])) > .container.clicked,\n:host([clickable]:not([expandable])) > .container-contextual-menu.clicked {\n box-shadow: var(--shadow-focus-primary);\n}\n\n:host([expandable]:active) > .container,\n:host([expandable]:active) > .container-contextual-menu,\n:host([clickable]:active) > .container,\n:host([clickable]:active) > .container-contextual-menu {\n background-color: var(--background-active-color-list-element);\n}\n\n:host([align-button=\"left\"][expandable]) > .container > .z-list-element-container,\n:host([align-button=\"left\"][expandable]) > .container-contextual-menu > .z-list-element-container {\n display: flex;\n}\n\n:host([align-button=\"right\"][expandable]) > .container > .z-list-element-container,\n:host([align-button=\"right\"][expandable]) > .container-contextual-menu > .z-list-element-container {\n display: flex;\n flex-direction: row-reverse;\n justify-content: space-between;\n}\n\n:host([align-button=\"left\"][expandable]) > .container > .z-list-element-container > z-icon,\n:host([align-button=\"left\"][expandable]) > .container-contextual-menu > .z-list-element-container > z-icon {\n margin-right: var(--space-unit);\n}\n\n:host([align-button=\"right\"][expandable]) > .container > .z-list-element-container > z-icon,\n:host([align-button=\"right\"][expandable]) > .container-contextual-menu > .z-list-element-container > z-icon {\n margin-left: var(--space-unit);\n}\n\n:host > .container > .z-list-element-inner-container,\n:host > .container-contextual-menu > .z-list-element-inner-container {\n display: none;\n}\n\n:host > .container > .z-list-element-inner-container.expanded,\n:host > .container-contextual-menu > .z-list-element-inner-container.expanded {\n display: block;\n}\n\n:host([clickable]:hover) > .container-contextual-menu {\n background-color: var(--color-surface03);\n}\n\n.container-contextual-menu:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n.z-list-content-container {\n display: flex;\n align-items: center;\n}\n","import {Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State} from \"@stencil/core\";\nimport {\n DividerSize,\n ExpandableListButtonAlign,\n ExpandableListStyle,\n KeyboardCode,\n ListDividerType,\n ListSize,\n ListType,\n} from \"../../../beans\";\n\n@Component({\n tag: \"z-list-element\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZListElement {\n @Element() host: HTMLZListElementElement;\n\n /* remove filter click event, returns filterid /\n @Event({\n eventName: \"accessibleFocus\",\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n accessibleFocus: EventEmitter<number>;\n\n /* set parent aria-activedescendant on focus event, returns filterid /\n @Event({\n eventName: \"ariaDescendantFocus\",\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n ariaDescendantFocus: EventEmitter<number>;\n\n /* remove filter click event, returns filterid /\n @Event({\n eventName: \"clickItem\",\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n clickItem: EventEmitter;\n\n @Listen(\"accessibleFocus\", {target: \"document\"})\n accessibleFocusHandler(e: CustomEvent): void {\n if (this.listElementId === e.detail) {\n const toFocus = this.host.shadowRoot.getElementById(`z-list-element-id-${e.detail}`);\n toFocus.focus();\n }\n }\n\n /\n [optional] Align expandable button left or right.\n /\n @Prop({reflect: true})\n alignButton?: ExpandableListButtonAlign = ExpandableListButtonAlign.LEFT;\n\n /\n [optional] Sets element clickable.\n /\n @Prop({reflect: true})\n clickable?: boolean = false;\n\n /\n [optional] Sets the divider color.\n /\n @Prop()\n dividerColor?: string = \"color-surface03\";\n\n /\n [optional] Sets the position where to insert the divider.\n /\n @Prop()\n dividerType?: ListDividerType = ListDividerType.NONE;\n\n /\n [optional] Sets the divider size.\n /\n @Prop()\n dividerSize?: DividerSize = DividerSize.SMALL;\n\n /\n [optional] Sets element as expandable.\n /\n @Prop({reflect: true})\n expandable?: boolean = false;\n\n /\n [optional] Sets expandable style to element.\n /\n @Prop()\n expandableStyle?: ExpandableListStyle = ExpandableListStyle.ACCORDION;\n\n /\n [optional] List element id.\n /\n @Prop({reflect: true})\n listElementId?: number;\n\n /\n [optional] Sets size of inside elements.\n /\n @Prop({reflect: true})\n size?: ListSize = ListSize.MEDIUM;\n\n /\n [optional] Sets text color of the element.\n /\n @Prop({reflect: true})\n color?: string = \"none\";\n\n /\n [optional] Sets disabled style of the element.\n /\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /\n [optional] If is used in ZContextualMenu component\n /\n @Prop({reflect: true})\n isContextualMenu?: boolean = false;\n\n /\n [optional] position of the list element inside the list or the group\n /\n @Prop({reflect: true})\n listElementPosition?: string = \"0\";\n\n /\n [optional] type of the list marker for each element\n /\n @Prop({reflect: true})\n listType?: ListType = ListType.NONE;\n\n /\n [optional] Sets element role.\n /\n @Prop({reflect: true})\n role?: string = \"listitem\";\n\n @State()\n showInnerContent = false;\n\n private openElementConfig = {\n accordion: {\n open: \"minus-circled\",\n close: \"plus-circled\",\n },\n menu: {\n open: \"chevron-up\",\n close: \"chevron-down\",\n },\n };\n\n /\n Constructor.\n /\n constructor() {\n this.handleClick = this.handleClick.bind(this);\n this.handleKeyDown = this.handleKeyDown.bind(this);\n }\n\n /\n Handler for click on element. If element is expandable, change state.\n * @returns void\n /\n private handleClick(): void {\n this.clickItem.emit(this.listElementId);\n if (!this.expandable) {\n return;\n }\n this.showInnerContent = !this.showInnerContent;\n }\n\n private calculateClass(): string {\n if (this.isContextualMenu) {\n return \"container-contextual-menu\";\n }\n\n return \"container\";\n }\n\n private handleKeyDown(event): void {\n const expandByKey = event.code === KeyboardCode.ENTER;\n switch (event.code) {\n case KeyboardCode.ARROW_DOWN:\n event.preventDefault();\n this.accessibleFocus.emit(this.listElementId + 1);\n break;\n case KeyboardCode.ARROW_UP:\n event.preventDefault();\n this.accessibleFocus.emit(this.listElementId - 1);\n break;\n case KeyboardCode.ENTER:\n event.preventDefault();\n this.clickItem.emit(this.listElementId);\n break;\n default:\n break;\n }\n\n if (!this.expandable \|\| !expandByKey) {\n return;\n }\n this.showInnerContent = !this.showInnerContent;\n }\n\n /\n Renders button to expand element.\n * @returns expadable button\n /\n private renderExpandableButton(): HTMLZIconElement {\n if (!this.expandable) {\n return null;\n }\n\n return (\n <z-icon\n name={\n this.showInnerContent\n ? this.openElementConfig[this.expandableStyle].open\n : this.openElementConfig[this.expandableStyle].close\n }\n />\n );\n }\n\n /\n Renders expanded content if element is expandable.\n * @returns expanded content\n /\n private renderExpandedContent(): HTMLDivElement {\n if (!this.expandable) {\n return null;\n }\n\n return (\n <div\n class={{\n \"z-list-element-inner-container\": true,\n \"expanded\": this.showInnerContent,\n }}\n >\n <slot name=\"inner-content\" />\n </div>\n );\n }\n\n /\n Renders content of the z-list-element\n * @returns list content\n */\n private renderContent(): HTMLDivElement {\n if (this.listType === ListType.NONE) {\n return <slot />;\n }\n\n if (this.listType === ListType.ORDERED) {\n return (\n <div class=\"z-list-content-container\">\n <div>{this.listElementPosition}.&emsp;</div>\n <slot />\n </div>\n );\n }\n\n if (this.listType === ListType.UNORDERED) {\n return (\n <div class=\"z-list-content-container\">\n <span>•&emsp;</span>\n <slot />\n </div>\n );\n }\n }\n\n render(): HTMLZListElementElement {\n return (\n <Host\n aria-expanded={this.expandable ? this.showInnerContent : null}\n onClick={this.handleClick}\n onFocus={() => this.ariaDescendantFocus.emit(this.listElementId)}\n onKeyDown={this.handleKeyDown}\n clickable={this.clickable && !this.disabled}\n tabIndex={!this.isContextualMenu ? \"0\" : null}\n >\n <div\n class={`${this.calculateClass()}`}\n style={{color: `var(--${this.color})`}}\n tabindex={this.isContextualMenu ? \"0\" : \"-1\"}\n id={`z-list-element-id-${this.listElementId}`}\n part=\"list-item-container\"\n >\n <div class=\"z-list-element-container\">\n {this.renderExpandableButton()}\n {this.renderContent()}\n </div>\n {this.renderExpandedContent()}\n </div>\n {this.dividerType === ListDividerType.ELEMENT && (\n <z-divider\n color={this.dividerColor}\n size={this.dividerSize}\n />\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/index16.js CHANGED Viewed

@@ -37,7 +37,7 @@ const ZMyzCardComponent = /*@__PURE__*/ proxyCustomElement(class ZMyzCardCompone
         return elemClasses;
     }
     render() {
-        return (h("div", { key: 'bb61c603563fe59552323e57f54348036621173a', class: this.retrieveClass(), tabindex: "0" }, h("slot", { key: '154d569cd2055c0ba1fca9c2551a5078e7f2f7ce' })));
+        return (h("div", { key: '2ea30f2293b9dd4cc187d2cc97449caf4851b424', class: this.retrieveClass(), tabindex: "0" }, h("slot", { key: 'ee17e5ceb45cba4f565e6efe41cf524f2cf91ed7' })));
     }
     static get style() { return ZMyzCardStyle0; }
 }, [1, "z-myz-card", {

package/dist/components/index17.js CHANGED Viewed

@@ -10,7 +10,7 @@ const ZMyzCardBody = /*@__PURE__*/ proxyCustomElement(class ZMyzCardBody extends
         this.__attachShadow();
     }
     render() {
-        return (h("div", { key: 'bc6cdeae214e8d2a678b06affa36c464edc8f7ea' }, h("slot", { key: '6891036c0f1a98722edc901ea45042c0451831a3', name: "alert" }), h("slot", { key: '50357c351f505338ffb08cd3b0df6eb6619745e7', name: "cover" })));
+        return (h("div", { key: '445a0d9463e21e7e51df000bbd32b892d16db6f7' }, h("slot", { key: 'aff7823ed27e2055d2803a1a55a0be35cfbcebf5', name: "alert" }), h("slot", { key: '0f435dc867e63caadc313043006a97156ebe2dc3', name: "cover" })));
     }
     static get style() { return ZMyzCardBodyStyle0; }
 }, [1, "z-myz-card-body"]);

package/dist/components/index18.js CHANGED Viewed

@@ -17,7 +17,7 @@ const ZMyzCardCover = /*@__PURE__*/ proxyCustomElement(class ZMyzCardCover exten
         this.img = this.defaultimg;
     }
     render() {
-        return (h("img", { key: 'b248cf088629c40f40cbd42695c8dd2ec93d92e0', class: this.faded && "faded", onError: this.hadleOnImageError.bind(this), alt: this.titolo, src: this.img }));
+        return (h("img", { key: '3b84be44f2691dea2e073c4f941672de4febfb8c', class: this.faded && "faded", onError: this.hadleOnImageError.bind(this), alt: this.titolo, src: this.img }));
     }
     static get style() { return ZMyzCardCoverStyle0; }
 }, [1, "z-myz-card-cover", {

package/dist/components/index19.js CHANGED Viewed

@@ -34,7 +34,7 @@ const ZMyzCardHeader = /*@__PURE__*/ proxyCustomElement(class ZMyzCardHeader ext
         };
     }
     render() {
-        return (h("header", { key: 'f3d234d1b49462a02c765ca33c76bc787bb6e1f0', class: this.retrieveClass() }, h("slot", { key: '9b83dea3d133b504dc5a233165c268f5c30fd001', name: "aria-heading" }), h("span", { key: 'e05a6f12405b5615d4722dbff22cb5148ed372b4', class: "card-title", ref: (el) => (this.ellipsis = el), title: this.getTitle() }, this.titolo), h("slot", { key: '318bc12c3d51dd4cb5227d0017d18ceb9a7326f5', name: "icon" })));
+        return (h("header", { key: '42e4bbade9cd208a99dcee56b87ee0fcff8202b2', class: this.retrieveClass() }, h("slot", { key: '939ec6cec0e6b04daba246efa4cbd841c8f72199', name: "aria-heading" }), h("span", { key: 'd71fe4dcb951f026dccdb791f67c56aa74508487', class: "card-title", ref: (el) => (this.ellipsis = el), title: this.getTitle() }, this.titolo), h("slot", { key: 'dd4ad05319e7c87f1ad55a6fb1ff02e2e529757d', name: "icon" })));
     }
     static get style() { return ZMyzCardHeaderStyle0; }
 }, [1, "z-myz-card-header", {

package/dist/components/index21.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { O as OffCanvasVariant, v as TransitionDirection } from './index2.js';
-const stylesCss = ".sc-z-offcanvas-h{--z-offcanvas--container-width:375px;--z-offcanvas--top-space:0;min-width:100%;height:100%;font-family:var(--font-family-sans);font-weight:var(--font-rg)}.canvas-container.sc-z-offcanvas{display:flex;overflow:-moz-scrollbars-none;overflow:hidden;min-width:100%;height:100%;flex-direction:column;background:var(--color-surface01)}[variant=\"pushcontent\"].sc-z-offcanvas-h{display:none}[open].sc-z-offcanvas-h{display:flex;visibility:visible}.sc-z-offcanvas-h:not([open]){visibility:hidden}[variant=\"overlay\"].sc-z-offcanvas-h{position:fixed;z-index:1000;top:var(--z-offcanvas--top-space);right:0;bottom:0;left:0;display:flex;height:calc(100% - var(--z-offcanvas--top-space))}[variant=\"overlay\"][transitiondirection=\"left\"].sc-z-offcanvas-h{justify-content:end}[variant=\"overlay\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{z-index:1010}[variant=\"overlay\"].sc-z-offcanvas-h .canvas-background.sc-z-offcanvas{position:absolute;left:0;width:100%;height:100%;background-color:var(--gray900);opacity:0.7}.canvas-container.sc-z-offcanvas>.canvas-content.sc-z-offcanvas{overflow:auto;flex:1 auto;padding:0 calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0;overflow-x:hidden}[variant=\"overlay\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas>.canvas-content.sc-z-offcanvas{padding:0 calc(var(--space-unit) * 2) calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) 0 0}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-track{background-color:transparent}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas{scrollbar-color:var(--color-primary01) transparent}@media only screen and (max-width: 767px){[open][transitiondirection=\"left\"].sc-z-offcanvas-h:not(.skip-animation)>.canvas-container.sc-z-offcanvas{animation:enter-right 0.4s ease-out}[open][transitiondirection=\"right\"].sc-z-offcanvas-h:not(.skip-animation)>.canvas-container.sc-z-offcanvas{animation:enter-left 0.4s ease-out}}@media only screen and (min-width: 768px){.sc-z-offcanvas-h{min-width:auto}.canvas-container.sc-z-offcanvas{width:auto;min-width:max(var(--z-offcanvas--container-width), 375px);max-width:max(var(--z-offcanvas--container-width), 375px);height:auto;min-height:calc(var(--space-unit) * 40)}.sc-z-offcanvas-h:not([variant=\"overlay\"])[open]:not(.skip-animation){width:auto;animation:grow 0.4s ease-out}}@keyframes grow{from{width:0}to{width:max(var(--z-offcanvas--container-width), 375px)}}@keyframes enter-left{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes enter-right{from{transform:translateX(100%)}to{transform:translateX(0)}}[open][variant=\"overlay\"][transitiondirection=\"left\"].sc-z-offcanvas-h:not(.skip-animation)>.canvas-container.sc-z-offcanvas{animation:enter-right 0.4s ease-out}[open][transitiondirection=\"right\"].sc-z-offcanvas-h:not(.skip-animation)>.canvas-container.sc-z-offcanvas{animation:enter-left 0.4s ease-out}.sc-z-offcanvas-h:not([open])[variant=\"overlay\"][transitiondirection=\"right\"]>.canvas-container.sc-z-offcanvas{transform:translateX(-100%);transition:visibility 0.4s ease-out, transform 0.4s ease-out}.sc-z-offcanvas-h:not([open])[variant=\"overlay\"][transitiondirection=\"left\"]>.canvas-container.sc-z-offcanvas{transform:translateX(100%);transition:visibility 0.4s ease-out, transform 0.4s ease-out}.sc-z-offcanvas-h:not([open])[variant=\"overlay\"] .canvas-background.sc-z-offcanvas{transition:visibility 0.4s ease-out;visibility:hidden}";
+const stylesCss = ".sc-z-offcanvas-h{--z-offcanvas--container-width:375px;--z-offcanvas--top-space:0;min-width:100%;height:100%;font-family:var(--font-family-sans);font-weight:var(--font-rg)}.canvas-container.sc-z-offcanvas{display:flex;overflow:-moz-scrollbars-none;overflow:hidden;min-width:100%;height:100%;flex-direction:column;background:var(--color-surface01)}[variant=\"pushcontent\"].sc-z-offcanvas-h{display:none}[open].sc-z-offcanvas-h{display:flex;visibility:visible}.sc-z-offcanvas-h:not([open]){visibility:hidden}[variant=\"overlay\"].sc-z-offcanvas-h{position:fixed;z-index:1000;top:var(--z-offcanvas--top-space);right:0;bottom:0;left:0;display:flex;height:calc(100% - var(--z-offcanvas--top-space))}[variant=\"overlay\"][transitiondirection=\"left\"].sc-z-offcanvas-h{justify-content:end}[variant=\"overlay\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{z-index:1010}[variant=\"overlay\"].sc-z-offcanvas-h .canvas-background.sc-z-offcanvas{position:absolute;left:0;width:100%;height:100%;background-color:var(--gray900);opacity:0.7}.canvas-container.sc-z-offcanvas>.canvas-content.sc-z-offcanvas{overflow:auto;flex:1 auto;padding:0 calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0;overflow-x:hidden}[variant=\"overlay\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas>.canvas-content.sc-z-offcanvas{padding:0 calc(var(--space-unit) * 2) calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) 0 0}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-track{background-color:transparent}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas{scrollbar-color:var(--color-primary01) transparent}@media only screen and (max-width: 768px){[open][transitiondirection=\"left\"].sc-z-offcanvas-h:not(.skip-animation)>.canvas-container.sc-z-offcanvas{animation:enter-right 0.4s ease-out}[open][transitiondirection=\"right\"].sc-z-offcanvas-h:not(.skip-animation)>.canvas-container.sc-z-offcanvas{animation:enter-left 0.4s ease-out}}@media only screen and (min-width: 768px){.sc-z-offcanvas-h{min-width:auto}.canvas-container.sc-z-offcanvas{width:auto;min-width:max(var(--z-offcanvas--container-width), 375px);max-width:max(var(--z-offcanvas--container-width), 375px);height:auto;min-height:calc(var(--space-unit) * 40)}.sc-z-offcanvas-h:not([variant=\"overlay\"])[open]:not(.skip-animation){width:auto;animation:grow 0.4s ease-out}}@keyframes grow{from{width:0}to{width:max(var(--z-offcanvas--container-width), 375px)}}@keyframes enter-left{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes enter-right{from{transform:translateX(100%)}to{transform:translateX(0)}}[open][variant=\"overlay\"][transitiondirection=\"left\"].sc-z-offcanvas-h:not(.skip-animation)>.canvas-container.sc-z-offcanvas{animation:enter-right 0.4s ease-out}[open][transitiondirection=\"right\"].sc-z-offcanvas-h:not(.skip-animation)>.canvas-container.sc-z-offcanvas{animation:enter-left 0.4s ease-out}.sc-z-offcanvas-h:not([open])[variant=\"overlay\"][transitiondirection=\"right\"]>.canvas-container.sc-z-offcanvas{transform:translateX(-100%);transition:visibility 0.4s ease-out, transform 0.4s ease-out}.sc-z-offcanvas-h:not([open])[variant=\"overlay\"][transitiondirection=\"left\"]>.canvas-container.sc-z-offcanvas{transform:translateX(100%);transition:visibility 0.4s ease-out, transform 0.4s ease-out}.sc-z-offcanvas-h:not([open])[variant=\"overlay\"] .canvas-background.sc-z-offcanvas{transition:visibility 0.4s ease-out;visibility:hidden}";
 const ZOffcanvasStyle0 = stylesCss;
 const ZOffcanvas = /*@__PURE__*/ proxyCustomElement(class ZOffcanvas extends HTMLElement {
@@ -29,7 +29,7 @@ const ZOffcanvas = /*@__PURE__*/ proxyCustomElement(class ZOffcanvas extends HTM
         this.open = false;
     }
     render() {
-        return (h(Host, { key: '60946289b968d1faf19d7f2620a848a4c5fe049b', class: { "skip-animation": this.skipLoadAnimation } }, h("div", { key: 'b29107d6cfc579c79bef11aa8ae35b6cb7b2d319', role: "presentation", class: "canvas-container", onTransitionEnd: () => this.handlePageOverflow() }, h("div", { key: '6fdb6a4048b7f25b81fed9adb148e1afc1f2838c', role: "presentation", class: "canvas-content" }, h("slot", { key: '51ffe7fbc7bda15cf4ee2dd92d6cf87984a7ee96', name: "canvasContent" }))), this.variant == OffCanvasVariant.OVERLAY && (h("div", { class: "canvas-background", "data-action": "canvasBackground", onClick: () => (this.open = false) }))));
+        return (h(Host, { key: 'f0f282fa9732f81f98d644210d2b602a53161b7d', class: { "skip-animation": this.skipLoadAnimation } }, h("div", { key: '15bf03615f187509da41d3206b39d705ca34cb50', role: "presentation", class: "canvas-container", onTransitionEnd: () => this.handlePageOverflow() }, h("div", { key: 'ba4444c4f3e6c3d9c9fecc4ff4ab103fc614b6bb', role: "presentation", class: "canvas-content" }, h("slot", { key: '4da6be1451be2a26815c7d6503a1eb9cec7c48f6', name: "canvasContent" }))), this.variant == OffCanvasVariant.OVERLAY && (h("div", { class: "canvas-background", "data-action": "canvasBackground", onClick: () => (this.open = false) }))));
     }
     static get watchers() { return {
         "open": ["onOpenChanged"]

package/dist/components/index21.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"index21.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,2jIAA2jI,CAAC;AAC9kI,yBAAe,SAAS;;MCUX,UAAU;;;;;uBAOQ,gBAAgB,CAAC,WAAW;oBAIlD,KAAK;mCAIgC,mBAAmB,CAAC,IAAI;iCAOhD,KAAK;;IAOzB,aAAa;QACX,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,iBAAiB,EAAE;YACxC,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;SAChC;QAED,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9C;IAEO,kBAAkB;QACxB,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,KAAK,gBAAgB,CAAC,OAAO,GAAG,YAAY,GAAG,YAAY,CAAC;QACzF,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,IAAI,GAAG,QAAQ,GAAG,EAAE,CAAC;KAC3D;IAED,oBAAoB;QAClB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAC,gBAAgB,EAAE,IAAI,CAAC,iBAAiB,EAAC,IACrD,4DACE,IAAI,EAAC,cAAc,EACnB,KAAK,EAAC,kBAAkB,EACxB,eAAe,EAAE,MAAM,IAAI,CAAC,kBAAkB,EAAE,IAEhD,4DACE,IAAI,EAAC,cAAc,EACnB,KAAK,EAAC,gBAAgB,IAEtB,6DAAM,IAAI,EAAC,eAAe,GAAQ,CAC9B,CACF,EACL,IAAI,CAAC,OAAO,IAAI,gBAAgB,CAAC,OAAO,KACvC,WACE,KAAK,EAAC,mBAAmB,iBACb,kBAAkB,EAC9B,OAAO,EAAE,OAAO,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,GAC7B,CACR,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/z-offcanvas/styles.css?tag=z-offcanvas&encapsulation=scoped","src/components/z-offcanvas/index.tsx"],"sourcesContent":[":host {\n --z-offcanvas--container-width: 375px;\n --z-offcanvas--top-space: 0;\n\n min-width: 100%;\n height: 100%;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n.canvas-container {\n display: flex;\n overflow: -moz-scrollbars-none;\n overflow: hidden;\n min-width: 100%;\n height: 100%;\n flex-direction: column;\n background: var(--color-surface01);\n}\n\n:host([variant=\"pushcontent\"]) {\n display: none;\n}\n\n:host([open]) {\n display: flex;\n visibility: visible;\n}\n\n:host(:not([open])) {\n visibility: hidden;\n}\n\n:host([variant=\"overlay\"]) {\n position: fixed;\n z-index: 1000;\n top: var(--z-offcanvas--top-space);\n right: 0;\n bottom: 0;\n left: 0;\n display: flex;\n height: calc(100% - var(--z-offcanvas--top-space));\n}\n\n:host([variant=\"overlay\"][transitiondirection=\"left\"]) {\n justify-content: end;\n}\n\n:host([variant=\"overlay\"]) > .canvas-container {\n z-index: 1010;\n}\n\n:host([variant=\"overlay\"]) .canvas-background {\n position: absolute;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: var(--gray900);\n opacity: 0.7;\n}\n\n.canvas-container > .canvas-content {\n overflow: auto;\n flex: 1 auto;\n padding: 0 calc(var(--space-unit) * 2);\n margin: calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0;\n overflow-x: hidden;\n}\n\n:host([variant=\"overlay\"]) > .canvas-container > .canvas-content {\n padding: 0 calc(var(--space-unit) * 2) calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);\n margin: calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) 0 0;\n}\n\n/* Webkit Scrollbar /\n.canvas-container .canvas-content::-webkit-scrollbar {\n width: 10px;\n background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);\n border-radius: var(--border-radius);\n}\n\n.canvas-container .canvas-content::-webkit-scrollbar-track {\n background-color: transparent;\n}\n\n.canvas-container .canvas-content::-webkit-scrollbar-thumb {\n width: 10px;\n background-color: var(--color-primary01);\n border-radius: var(--border-radius);\n}\n\n.canvas-container .canvas-content::-webkit-scrollbar-thumb:hover {\n background-color: var(--color-hover-primary);\n}\n\n/ Firefox /\n.canvas-container .canvas-content {\n scrollbar-color: var(--color-primary01) transparent;\n}\n\n/ Mobile /\n@media only screen and (max-width: ~~767px~~) {\n :host([open][transitiondirection=\"left\"]:not(.skip-animation)) > .canvas-container {\n animation: enter-right 0.4s ease-out;\n }\n\n :host([open][transitiondirection=\"right\"]:not(.skip-animation)) > .canvas-container {\n animation: enter-left 0.4s ease-out;\n }\n}\n\n/ Tablet / Desktop /\n@media only screen and (min-width: 768px) {\n :host {\n min-width: auto;\n }\n\n .canvas-container {\n width: auto;\n min-width: max(var(--z-offcanvas--container-width), 375px);\n max-width: max(var(--z-offcanvas--container-width), 375px);\n height: auto;\n min-height: calc(var(--space-unit) 40);\n }\n\n :host(:not([variant=\"overlay\"])[open]:not(.skip-animation)) {\n width: auto;\n animation: grow 0.4s ease-out;\n }\n}\n\n/* ANIMATION /\n\n@keyframes grow {\n from {\n width: 0;\n }\n\n to {\n width: max(var(--z-offcanvas--container-width), 375px);\n }\n}\n\n@keyframes enter-left {\n from {\n transform: translateX(-100%);\n }\n\n to {\n transform: translateX(0);\n }\n}\n\n@keyframes enter-right {\n from {\n transform: translateX(100%);\n }\n\n to {\n transform: translateX(0);\n }\n}\n\n:host([open][variant=\"overlay\"][transitiondirection=\"left\"]:not(.skip-animation)) > .canvas-container {\n animation: enter-right 0.4s ease-out;\n}\n\n:host([open][transitiondirection=\"right\"]:not(.skip-animation)) > .canvas-container {\n animation: enter-left 0.4s ease-out;\n}\n\n:host(:not([open])[variant=\"overlay\"][transitiondirection=\"right\"]) > .canvas-container {\n transform: translateX(-100%);\n transition: visibility 0.4s ease-out, transform 0.4s ease-out;\n}\n\n:host(:not([open])[variant=\"overlay\"][transitiondirection=\"left\"]) > .canvas-container {\n transform: translateX(100%);\n transition: visibility 0.4s ease-out, transform 0.4s ease-out;\n}\n\n:host(:not([open])[variant=\"overlay\"]) .canvas-background {\n transition: visibility 0.4s ease-out;\n visibility: hidden;\n}\n","import {Component, Event, EventEmitter, h, Host, Prop, Watch} from \"@stencil/core\";\nimport {OffCanvasVariant, TransitionDirection} from \"../../beans\";\n/\n @slot canvasContent - Slot for the main content.\n /\n@Component({\n tag: \"z-offcanvas\",\n styleUrl: \"styles.css\",\n shadow: false,\n scoped: true,\n})\nexport class ZOffcanvas {\n /\n Offcanvas variant.\n * Can be one `overlay` or `pushcontent`.\n * Default variant: pushcontent\n /\n @Prop({reflect: true})\n variant?: OffCanvasVariant = OffCanvasVariant.PUSHCONTENT;\n\n /* Whether the offcanvas is open. Default: false /\n @Prop({reflect: true, mutable: true})\n open = false;\n\n /* open content transitioning in a specified direction left \| right. Default: left /\n @Prop({reflect: true})\n transitiondirection?: TransitionDirection = TransitionDirection.LEFT;\n\n /\n Whether to skip the initial animation.\n * Useful when the initial value of the `open` prop is set to `true`.\n /\n @Prop({mutable: true})\n skipLoadAnimation = false;\n\n /* emitted when `open` prop changes */\n @Event()\n canvasOpenStatusChanged: EventEmitter;\n\n @Watch(\"open\")\n onOpenChanged(): void {\n if (!this.open && this.skipLoadAnimation) {\n this.skipLoadAnimation = false;\n }\n\n this.handlePageOverflow();\n this.canvasOpenStatusChanged.emit(this.open);\n }\n\n private handlePageOverflow(): void {\n const overflow = this.variant === OffCanvasVariant.OVERLAY ? \"overflow-y\" : \"overflow-x\";\n document.body.style[overflow] = this.open ? \"hidden\" : \"\";\n }\n\n disconnectedCallback(): void {\n this.open = false;\n }\n\n render(): HTMLZOffcanvasElement {\n return (\n <Host class={{\"skip-animation\": this.skipLoadAnimation}}>\n <div\n role=\"presentation\"\n class=\"canvas-container\"\n onTransitionEnd={() => this.handlePageOverflow()}\n >\n <div\n role=\"presentation\"\n class=\"canvas-content\"\n >\n <slot name=\"canvasContent\"></slot>\n </div>\n </div>\n {this.variant == OffCanvasVariant.OVERLAY && (\n <div\n class=\"canvas-background\"\n data-action=\"canvasBackground\"\n onClick={() => (this.open = false)}\n ></div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"index21.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,2jIAA2jI,CAAC;AAC9kI,yBAAe,SAAS;;MCUX,UAAU;;;;;uBAOQ,gBAAgB,CAAC,WAAW;oBAIlD,KAAK;mCAIgC,mBAAmB,CAAC,IAAI;iCAOhD,KAAK;;IAOzB,aAAa;QACX,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,iBAAiB,EAAE;YACxC,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;SAChC;QAED,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9C;IAEO,kBAAkB;QACxB,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,KAAK,gBAAgB,CAAC,OAAO,GAAG,YAAY,GAAG,YAAY,CAAC;QACzF,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,IAAI,GAAG,QAAQ,GAAG,EAAE,CAAC;KAC3D;IAED,oBAAoB;QAClB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAC,gBAAgB,EAAE,IAAI,CAAC,iBAAiB,EAAC,IACrD,4DACE,IAAI,EAAC,cAAc,EACnB,KAAK,EAAC,kBAAkB,EACxB,eAAe,EAAE,MAAM,IAAI,CAAC,kBAAkB,EAAE,IAEhD,4DACE,IAAI,EAAC,cAAc,EACnB,KAAK,EAAC,gBAAgB,IAEtB,6DAAM,IAAI,EAAC,eAAe,GAAQ,CAC9B,CACF,EACL,IAAI,CAAC,OAAO,IAAI,gBAAgB,CAAC,OAAO,KACvC,WACE,KAAK,EAAC,mBAAmB,iBACb,kBAAkB,EAC9B,OAAO,EAAE,OAAO,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,GAC7B,CACR,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/z-offcanvas/styles.css?tag=z-offcanvas&encapsulation=scoped","src/components/z-offcanvas/index.tsx"],"sourcesContent":[":host {\n --z-offcanvas--container-width: 375px;\n --z-offcanvas--top-space: 0;\n\n min-width: 100%;\n height: 100%;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n.canvas-container {\n display: flex;\n overflow: -moz-scrollbars-none;\n overflow: hidden;\n min-width: 100%;\n height: 100%;\n flex-direction: column;\n background: var(--color-surface01);\n}\n\n:host([variant=\"pushcontent\"]) {\n display: none;\n}\n\n:host([open]) {\n display: flex;\n visibility: visible;\n}\n\n:host(:not([open])) {\n visibility: hidden;\n}\n\n:host([variant=\"overlay\"]) {\n position: fixed;\n z-index: 1000;\n top: var(--z-offcanvas--top-space);\n right: 0;\n bottom: 0;\n left: 0;\n display: flex;\n height: calc(100% - var(--z-offcanvas--top-space));\n}\n\n:host([variant=\"overlay\"][transitiondirection=\"left\"]) {\n justify-content: end;\n}\n\n:host([variant=\"overlay\"]) > .canvas-container {\n z-index: 1010;\n}\n\n:host([variant=\"overlay\"]) .canvas-background {\n position: absolute;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: var(--gray900);\n opacity: 0.7;\n}\n\n.canvas-container > .canvas-content {\n overflow: auto;\n flex: 1 auto;\n padding: 0 calc(var(--space-unit) * 2);\n margin: calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0;\n overflow-x: hidden;\n}\n\n:host([variant=\"overlay\"]) > .canvas-container > .canvas-content {\n padding: 0 calc(var(--space-unit) * 2) calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);\n margin: calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) 0 0;\n}\n\n/* Webkit Scrollbar /\n.canvas-container .canvas-content::-webkit-scrollbar {\n width: 10px;\n background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);\n border-radius: var(--border-radius);\n}\n\n.canvas-container .canvas-content::-webkit-scrollbar-track {\n background-color: transparent;\n}\n\n.canvas-container .canvas-content::-webkit-scrollbar-thumb {\n width: 10px;\n background-color: var(--color-primary01);\n border-radius: var(--border-radius);\n}\n\n.canvas-container .canvas-content::-webkit-scrollbar-thumb:hover {\n background-color: var(--color-hover-primary);\n}\n\n/ Firefox /\n.canvas-container .canvas-content {\n scrollbar-color: var(--color-primary01) transparent;\n}\n\n/ Mobile /\n@media only screen and (max-width: 768px) {\n :host([open][transitiondirection=\"left\"]:not(.skip-animation)) > .canvas-container {\n animation: enter-right 0.4s ease-out;\n }\n\n :host([open][transitiondirection=\"right\"]:not(.skip-animation)) > .canvas-container {\n animation: enter-left 0.4s ease-out;\n }\n}\n\n/ Tablet / Desktop /\n@media only screen and (min-width: 768px) {\n :host {\n min-width: auto;\n }\n\n .canvas-container {\n width: auto;\n min-width: max(var(--z-offcanvas--container-width), 375px);\n max-width: max(var(--z-offcanvas--container-width), 375px);\n height: auto;\n min-height: calc(var(--space-unit) 40);\n }\n\n :host(:not([variant=\"overlay\"])[open]:not(.skip-animation)) {\n width: auto;\n animation: grow 0.4s ease-out;\n }\n}\n\n/* ANIMATION /\n\n@keyframes grow {\n from {\n width: 0;\n }\n\n to {\n width: max(var(--z-offcanvas--container-width), 375px);\n }\n}\n\n@keyframes enter-left {\n from {\n transform: translateX(-100%);\n }\n\n to {\n transform: translateX(0);\n }\n}\n\n@keyframes enter-right {\n from {\n transform: translateX(100%);\n }\n\n to {\n transform: translateX(0);\n }\n}\n\n:host([open][variant=\"overlay\"][transitiondirection=\"left\"]:not(.skip-animation)) > .canvas-container {\n animation: enter-right 0.4s ease-out;\n}\n\n:host([open][transitiondirection=\"right\"]:not(.skip-animation)) > .canvas-container {\n animation: enter-left 0.4s ease-out;\n}\n\n:host(:not([open])[variant=\"overlay\"][transitiondirection=\"right\"]) > .canvas-container {\n transform: translateX(-100%);\n transition: visibility 0.4s ease-out, transform 0.4s ease-out;\n}\n\n:host(:not([open])[variant=\"overlay\"][transitiondirection=\"left\"]) > .canvas-container {\n transform: translateX(100%);\n transition: visibility 0.4s ease-out, transform 0.4s ease-out;\n}\n\n:host(:not([open])[variant=\"overlay\"]) .canvas-background {\n transition: visibility 0.4s ease-out;\n visibility: hidden;\n}\n","import {Component, Event, EventEmitter, h, Host, Prop, Watch} from \"@stencil/core\";\nimport {OffCanvasVariant, TransitionDirection} from \"../../beans\";\n/\n @slot canvasContent - Slot for the main content.\n /\n@Component({\n tag: \"z-offcanvas\",\n styleUrl: \"styles.css\",\n shadow: false,\n scoped: true,\n})\nexport class ZOffcanvas {\n /\n Offcanvas variant.\n * Can be one `overlay` or `pushcontent`.\n * Default variant: pushcontent\n /\n @Prop({reflect: true})\n variant?: OffCanvasVariant = OffCanvasVariant.PUSHCONTENT;\n\n /* Whether the offcanvas is open. Default: false /\n @Prop({reflect: true, mutable: true})\n open = false;\n\n /* open content transitioning in a specified direction left \| right. Default: left /\n @Prop({reflect: true})\n transitiondirection?: TransitionDirection = TransitionDirection.LEFT;\n\n /\n Whether to skip the initial animation.\n * Useful when the initial value of the `open` prop is set to `true`.\n /\n @Prop({mutable: true})\n skipLoadAnimation = false;\n\n /* emitted when `open` prop changes */\n @Event()\n canvasOpenStatusChanged: EventEmitter;\n\n @Watch(\"open\")\n onOpenChanged(): void {\n if (!this.open && this.skipLoadAnimation) {\n this.skipLoadAnimation = false;\n }\n\n this.handlePageOverflow();\n this.canvasOpenStatusChanged.emit(this.open);\n }\n\n private handlePageOverflow(): void {\n const overflow = this.variant === OffCanvasVariant.OVERLAY ? \"overflow-y\" : \"overflow-x\";\n document.body.style[overflow] = this.open ? \"hidden\" : \"\";\n }\n\n disconnectedCallback(): void {\n this.open = false;\n }\n\n render(): HTMLZOffcanvasElement {\n return (\n <Host class={{\"skip-animation\": this.skipLoadAnimation}}>\n <div\n role=\"presentation\"\n class=\"canvas-container\"\n onTransitionEnd={() => this.handlePageOverflow()}\n >\n <div\n role=\"presentation\"\n class=\"canvas-content\"\n >\n <slot name=\"canvasContent\"></slot>\n </div>\n </div>\n {this.variant == OffCanvasVariant.OVERLAY && (\n <div\n class=\"canvas-background\"\n data-action=\"canvasBackground\"\n onClick={() => (this.open = false)}\n ></div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/index22.js CHANGED Viewed

@@ -59,7 +59,7 @@ const ZPocket = /*@__PURE__*/ proxyCustomElement(class ZPocket extends HTMLEleme
         }
     }
     render() {
-        return (h("div", { key: '97d80e0b2cb56a932f35aa104256bf763f1eee7c' }, h("div", { key: '9e8f3eacd18892d80cc1a5c314c861ef18178daa', "data-action": "pocketBackground", "data-pocket": this.pocketid, class: `background ${this.status}`, onClick: (e) => this.handleBackgroundClick(e) }), h("div", { key: 'ee7d44929e94ebe8f2c128a74e0b8250819df04b', id: this.pocketid, class: "content-wrapper" }, h("div", { key: '57a77810690ce70ed3c7fac92cc4fa7e5158f17d' }, h("slot", { key: '9f1c1757f0bc2ff2db326ac9158d80f33802970f' })))));
+        return (h("div", { key: '326350f5b42a676f92c1246a676f074c12b5e2c8' }, h("div", { key: 'ff53a47e16b8a2809e96d49b129c6187e0e3364a', "data-action": "pocketBackground", "data-pocket": this.pocketid, class: `background ${this.status}`, onClick: (e) => this.handleBackgroundClick(e) }), h("div", { key: '28606d7b860f7283919f00010bf5f1c83ca75aa7', id: this.pocketid, class: "content-wrapper" }, h("div", { key: 'b54698aaa349bb75df7c6344b3cfff3122e530c5' }, h("slot", { key: '0e5ac1491d2c5128ed4c93b116d91a62e2afde41' })))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/index23.js CHANGED Viewed

@@ -18,7 +18,7 @@ const ZPocketBody = /*@__PURE__*/ proxyCustomElement(class ZPocketBody extends H
         }
     }
     render() {
-        return (h("main", { key: 'cd660568916f4384dc815a3c0067a579c217fa33', class: this.status }, h("slot", { key: '3dd94db83f10a36a3656914a90ca571bd088fc6d' })));
+        return (h("main", { key: 'a21e5307e4af8970761af2f04d1344997e171b48', class: this.status }, h("slot", { key: 'c6b38fb56dbca9e8cdb03acfb601f32822312fee' })));
     }
     static get style() { return ZPocketBodyStyle0; }
 }, [1, "z-pocket-body", {

package/dist/components/index24.js CHANGED Viewed

@@ -29,7 +29,7 @@ const ZPocketHeader = /*@__PURE__*/ proxyCustomElement(class ZPocketHeader exten
         mc.on("pandown", () => this.emitPocketHeaderPan("down"));
     }
     render() {
-        return (h("header", { key: '4f1f69686926f9b45d72800e711ae8437a3ca2f5', role: "button", tabindex: 0, onClick: () => this.emitPocketHeaderClick(), onKeyPress: (ev) => handleKeyboardSubmit(ev, this.emitPocketHeaderClick), ref: (el) => (this.swipeWrap = el) }, h("slot", { key: 'cfdaf2acf381639e86ea15349a83834c311fda71' })));
+        return (h("header", { key: '90a6554d0c79aebcb62332c7ee23018103fa1916', role: "button", tabindex: 0, onClick: () => this.emitPocketHeaderClick(), onKeyPress: (ev) => handleKeyboardSubmit(ev, this.emitPocketHeaderClick), ref: (el) => (this.swipeWrap = el) }, h("slot", { key: '4a3e7b093ba47de8fdbe0e96fff4f5880220bec4' })));
     }
     static get style() { return ZPocketHeaderStyle0; }
 }, [1, "z-pocket-header", {

package/dist/components/index25.js CHANGED Viewed

@@ -302,7 +302,7 @@ const ZPopover = /*@__PURE__*/ proxyCustomElement(class ZPopover extends HTMLEle
         this.onOpen();
     }
     render() {
-        return h("slot", { key: '70c742e7871fbf8a871165a4de625dda200ae024' });
+        return h("slot", { key: '0f5c1c7c46c904cd0a572cafb31befb36b6f177e' });
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/index26.js CHANGED Viewed

@@ -9,9 +9,9 @@ import { d as defineCustomElement$5 } from './index11.js';
 import { d as defineCustomElement$4 } from './index12.js';
 import { d as defineCustomElement$3 } from './index13.js';
 import { d as defineCustomElement$2 } from './index14.js';
-import { d as defineCustomElement$1 } from './index27.js';
+import { d as defineCustomElement$1 } from './index30.js';
-const stylesCss = ":host{--z-searchbar-tag-text-color:var(--color-primary03);--z-searchbar-tag-bg:var(--color-hover-primary);z-index:15;display:flex;column-gap:calc(var(--space-unit) * 2);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host,*{box-sizing:border-box}.input-container{position:relative;display:flex;width:100%;flex-direction:column}.results-wrapper{position:absolute;top:calc(100% - 1px);left:0;width:100%;padding:calc(var(--space-unit) / 4);border:var(--border-size-small) solid var(--color-surface03);border-top:none;background:var(--color-surface01)}.results{overflow:auto;max-height:var(--z-searchbar-results-height, 540px);padding:calc(var(--space-unit) / 2) calc(var(--space-unit) * 1.5);scrollbar-color:var(--color-primary01) transparent}.results::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.results::-webkit-scrollbar-track{background-color:transparent}.results::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.results .category-heading{display:block;font-size:var(--font-size-2);font-weight:var(--font-rg);line-height:var(--font-size-3)}.results .category-heading>*{display:block}.results .category-heading>.category{color:var(--color-text05);font-style:italic}.results .category-heading>.subcategory{margin-top:var(--space-unit);color:var(--color-text01);text-transform:uppercase}.results z-list-element{display:block}.results z-list-element>.list-element{display:flex;justify-content:space-between}.results z-list-element>.list-element>z-tag{border:1px solid var(--gray800);font-size:var(--font-size-1);font-weight:var(--font-sb);--z-tag-bg:var(--z-searchbar-tag-bg);--z-tag-text-color:var(--z-searchbar-tag-text-color)}.results .item{--z-icon-height:12px;--z-icon-width:12px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-start;color:var(--color-text01);column-gap:calc(var(--space-unit) * 1.5);fill:var(--color-icon02);font-size:var(--font-size-2);line-height:var(--font-size-3)}.results .item.ellipsis>.item-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.results .item>.item-label mark{background:var(--color-primary03)}.results .item.has-category{padding-left:calc(var(--space-unit) * 3)}.results .item.item-search{--z-icon-height:16px;--z-icon-width:16px}.results .item-show-all{text-align:center}.results .item-no-results{display:block;font-size:var(--font-size-2);font-style:italic;line-height:var(--font-size-5)}.results .item-no-results>ul{padding-left:calc(var(--space-unit) * 2);margin:var(--space-unit)}@media (min-width: 768px){.results .category-heading{font-size:var(--font-size-3);line-height:var(--font-size-6)}.results .item{font-size:var(--font-size-3);line-height:var(--font-size-6)}.results .item.item-search{--z-icon-height:18px;--z-icon-width:18px}.results .item.ellipsis>.item-label{height:24px}}@media (min-width: 1152px){.results .item{cursor:pointer}.results .item-no-results{cursor:default;font-size:var(--font-size-3);line-height:var(--font-size-6)}}:host([size=\"small\"]) .results :is(.item,.category-heading),:host([size=\"x-small\"]) .results :is(.item,.category-heading){font-size:var(--font-size-2)}:host([size=\"small\"]) .results .item:not(.has-category),:host([size=\"x-small\"]) .results .item:not(.has-category){--z-icon-height:16px;--z-icon-width:16px}:host([size=\"small\"])::part(list-item-container){min-height:calc(var(--space-unit) * 4.5);padding:0}:host([size=\"x-small\"])::part(list-item-container){min-height:calc(var(--space-unit) * 4);padding:0}";
+const stylesCss = ":host{z-index:15;display:flex;column-gap:calc(var(--space-unit) * 2);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host,*{box-sizing:border-box}.input-container{position:relative;display:flex;width:100%;flex-direction:column}.results-wrapper{position:absolute;top:calc(100% - 1px);left:0;width:100%;padding:calc(var(--space-unit) / 4);border:var(--border-size-small) solid var(--color-surface03);border-top:none;background:var(--color-surface01)}.results{overflow:auto;max-height:var(--z-searchbar-results-height, 540px);padding:calc(var(--space-unit) / 2) calc(var(--space-unit) * 1.5);scrollbar-color:var(--color-primary01) transparent}.results::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.results::-webkit-scrollbar-track{background-color:transparent}.results::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.results .category-heading{display:block;font-size:var(--font-size-2);font-weight:var(--font-rg);line-height:var(--font-size-3)}.results .category-heading>*{display:block}.results .category-heading>.category{color:var(--color-text05);font-style:italic}.results .category-heading>.subcategory{margin-top:var(--space-unit);color:var(--color-text01);text-transform:uppercase}.results z-list-element{display:block}.results z-list-element>.list-element{display:flex;justify-content:space-between}.results z-list-element>.list-element>z-tag{border:1px solid var(--gray800);font-size:var(--font-size-1);font-weight:var(--font-sb);--z-tag-bg:white;--z-tag-text-color:var(--color-text01)}.results .item{--z-icon-height:12px;--z-icon-width:12px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-start;color:var(--color-text01);column-gap:calc(var(--space-unit) * 1.5);fill:var(--color-icon02);font-size:var(--font-size-2);line-height:var(--font-size-3)}.results .item.ellipsis>.item-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.results .item>.item-label mark{background:var(--color-primary03)}.results .item.has-category{padding-left:calc(var(--space-unit) * 3)}.results .item.item-search{--z-icon-height:16px;--z-icon-width:16px}.results .item-show-all{text-align:center}.results .item-no-results{display:block;font-size:var(--font-size-2);font-style:italic;line-height:var(--font-size-5)}.results .item-no-results>ul{padding-left:calc(var(--space-unit) * 2);margin:var(--space-unit)}@media (min-width: 768px){.results .category-heading{font-size:var(--font-size-3);line-height:var(--font-size-6)}.results .item{font-size:var(--font-size-3);line-height:var(--font-size-6)}.results .item.item-search{--z-icon-height:18px;--z-icon-width:18px}.results .item.ellipsis>.item-label{height:24px}}@media (min-width: 1152px){.results .item{cursor:pointer}.results .item-no-results{cursor:default;font-size:var(--font-size-3);line-height:var(--font-size-6)}}:host([size=\"small\"]) .results :is(.item,.category-heading),:host([size=\"x-small\"]) .results :is(.item,.category-heading){font-size:var(--font-size-2)}:host([size=\"small\"]) .results .item:not(.has-category),:host([size=\"x-small\"]) .results .item:not(.has-category){--z-icon-height:16px;--z-icon-width:16px}:host([size=\"small\"])::part(list-item-container){min-height:calc(var(--space-unit) * 4.5);padding:0}:host([size=\"x-small\"])::part(list-item-container){min-height:calc(var(--space-unit) * 4);padding:0}";
 const ZSearchbarStyle0 = stylesCss;
 const ZSearchbar = /*@__PURE__*/ proxyCustomElement(class ZSearchbar extends HTMLElement {
@@ -237,7 +237,7 @@ const ZSearchbar = /*@__PURE__*/ proxyCustomElement(class ZSearchbar extends HTM
         return (h("z-list-element", { role: "option", tabindex: 0, clickable: true, id: `list-item-${this.htmlid}-show-all`, onClickItem: () => (this.currResultsCount = 0), color: "color-primary01" }, h("div", { class: "item-show-all" }, "Vedi tutti i risultati")));
     }
     render() {
-        return (h(Host, { key: 'b198d39d33540acea446c870ae3d47776bfa1470', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": this.showSearchButton, "has-results": this.autocomplete } }, h("div", { key: 'cebdc4139bc155e30da8d90266289aa485406265', class: "input-container" }, this.renderInput(), this.renderResults()), this.renderButton()));
+        return (h(Host, { key: '49e7bb3d48c18519e07ac4952188f271895dd1a1', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": this.showSearchButton, "has-results": this.autocomplete } }, h("div", { key: '033d0ae0a35385e0d9d915e18887650b997c5688', class: "input-container" }, this.renderInput(), this.renderResults()), this.renderButton()));
     }
     get element() { return this; }
     static get watchers() { return {

package/dist/components/index26.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"index26.js","mappings":"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","names":[],"sources":["src/components/inputs/z-searchbar/styles.css?tag=z-searchbar&encapsulation=shadow","src/components/inputs/z-searchbar/index.tsx"],"sourcesContent":[":host {\n --z-searchbar-tag-text-color: var(--color-primary03);\n --z-searchbar-tag-bg: var(--color-hover-primary);\n\n z-index: 15;\n display: flex;\n column-gap: calc(var(--space-unit) * 2);\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host,\n* {\n box-sizing: border-box;\n}\n\n.input-container {\n position: relative;\n display: flex;\n width: 100%;\n flex-direction: column;\n}\n\n.results-wrapper {\n position: absolute;\n top: calc(100% - 1px);\n left: 0;\n width: 100%;\n padding: calc(var(--space-unit) / 4);\n border: var(--border-size-small) solid var(--color-surface03);\n border-top: none;\n background: var(--color-surface01);\n}\n\n.results {\n overflow: auto;\n max-height: var(--z-searchbar-results-height, 540px);\n padding: calc(var(--space-unit) / 2) calc(var(--space-unit) * 1.5);\n scrollbar-color: var(--color-primary01) transparent;\n}\n\n.results::-webkit-scrollbar {\n width: 10px;\n background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);\n border-radius: var(--border-radius);\n}\n\n.results::-webkit-scrollbar-track {\n background-color: transparent;\n}\n\n.results::-webkit-scrollbar-thumb {\n width: 10px;\n background-color: var(--color-primary01);\n border-radius: var(--border-radius);\n}\n\n.results .category-heading {\n display: block;\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n line-height: var(--font-size-3);\n}\n\n.results .category-heading > * {\n display: block;\n}\n\n.results .category-heading > .category {\n color: var(--color-text05);\n font-style: italic;\n}\n\n.results .category-heading > .subcategory {\n margin-top: var(--space-unit);\n color: var(--color-text01);\n text-transform: uppercase;\n}\n\n.results z-list-element {\n display: block;\n}\n\n.results z-list-element > .list-element {\n display: flex;\n justify-content: space-between;\n}\n\n.results z-list-element > .list-element > z-tag {\n border: 1px solid var(--gray800);\n font-size: var(--font-size-1);\n font-weight: var(--font-sb);\n\n --z-tag-bg: var(--z-searchbar-tag-bg);\n --z-tag-text-color: var(--z-searchbar-tag-text-color);\n}\n\n.results .item {\n --z-icon-height: 12px;\n --z-icon-width: 12px;\n\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-content: flex-start;\n color: var(--color-text01);\n column-gap: calc(var(--space-unit) * 1.5);\n fill: var(--color-icon02);\n font-size: var(--font-size-2);\n line-height: var(--font-size-3);\n}\n\n.results .item.ellipsis > .item-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.results .item > .item-label mark {\n background: var(--color-primary03);\n}\n\n.results .item.has-category {\n padding-left: calc(var(--space-unit) * 3);\n}\n\n.results .item.item-search {\n --z-icon-height: 16px;\n --z-icon-width: 16px;\n}\n\n.results .item-show-all {\n text-align: center;\n}\n\n.results .item-no-results {\n display: block;\n font-size: var(--font-size-2);\n font-style: italic;\n line-height: var(--font-size-5);\n}\n\n.results .item-no-results > ul {\n padding-left: calc(var(--space-unit) * 2);\n margin: var(--space-unit);\n}\n\n/* Tablet breakpoint /\n@media (min-width: 768px) {\n .results .category-heading {\n font-size: var(--font-size-3);\n line-height: var(--font-size-6);\n }\n\n .results .item {\n font-size: var(--font-size-3);\n line-height: var(--font-size-6);\n }\n\n .results .item.item-search {\n --z-icon-height: 18px;\n --z-icon-width: 18px;\n }\n\n .results .item.ellipsis > .item-label {\n height: 24px;\n }\n}\n\n/ Desktop breakpoint /\n@media (min-width: 1152px) {\n .results .item {\n cursor: pointer;\n }\n\n .results .item-no-results {\n cursor: default;\n font-size: var(--font-size-3);\n line-height: var(--font-size-6);\n }\n}\n\n:host([size=\"small\"]) .results :is(.item, .category-heading),\n:host([size=\"x-small\"]) .results :is(.item, .category-heading) {\n font-size: var(--font-size-2);\n}\n\n:host([size=\"small\"]) .results .item:not(.has-category),\n:host([size=\"x-small\"]) .results .item:not(.has-category) {\n --z-icon-height: 16px;\n --z-icon-width: 16px;\n}\n\n:host([size=\"small\"])::part(list-item-container) {\n min-height: calc(var(--space-unit) 4.5);\n padding: 0;\n}\n\n:host([size=\"x-small\"])::part(list-item-container) {\n min-height: calc(var(--space-unit) * 4);\n padding: 0;\n}\n","import {Component, Event, EventEmitter, h, Host, Listen, Prop, State, Watch, Element} from \"@stencil/core\";\nimport {\n ButtonVariant,\n ListDividerType,\n SearchbarGroup,\n SearchbarGroupedItem,\n SearchbarItem,\n ControlSize,\n Device,\n} from \"../../../beans\";\nimport {getDevice, handleEnterKeydSubmit, randomId} from \"../../../utils/utils\";\n\n/*\n @cssprop --z-searchbar-results-height - Max height of the results container (default: 540px)\n * @cssprop --z-searchbar-tag-text-color - Color of tag's text (default --color-primary03);\n * @cssprop --z-searchbar-tag-bg - Color of tag's background (default --color-hover-primary);\n /\n@Component({\n tag: \"z-searchbar\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZSearchbar {\n /* the id of the searchbar element /\n @Prop({reflect: true})\n htmlid = `searchbar-${randomId()}`;\n\n /* Prevent submit action /\n @Prop()\n preventSubmit?: boolean = false;\n\n /* Input search string /\n @Prop()\n value?: string;\n\n /* Search input placeholder /\n @Prop()\n placeholder?: string;\n\n /* Show autocomplete results /\n @Prop()\n autocomplete?: boolean = false;\n\n /* Minimun number of characters to dispatch typing event /\n @Prop()\n autocompleteMinChars?: number = 3;\n\n /* Number of results shown - default all /\n @Prop()\n resultsCount?: number;\n\n /* Truncate results to single row /\n @Prop()\n resultsEllipsis?: boolean = true;\n\n /* Search helper text /\n @Prop()\n searchHelperLabel?: string = \"Cerca {searchString}\";\n\n /* Autocomplete results items /\n @Prop()\n resultsItems?: SearchbarItem[] \| string;\n\n /* Sort autocomplete results items /\n @Prop()\n sortResultsItems?: boolean = false;\n\n /* Show submit button /\n @Prop()\n showSearchButton?: boolean = false;\n\n /* Set button icon without label/\n @Prop()\n searchButtonIconOnly?: boolean = false;\n\n /* Available sizes: `big`, `small` and `x-small`. Defaults to `big`. /\n @Prop()\n size?: ControlSize = ControlSize.BIG;\n\n /* Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`. /\n @Prop()\n variant?: ButtonVariant = ButtonVariant.PRIMARY;\n\n @State()\n searchString = this.value;\n\n @State()\n currResultsCount = 0;\n\n @State()\n showResults = false;\n\n @State()\n isMobile = false;\n\n @Element() element: HTMLZSearchbarElement;\n\n private resultsItemsList: SearchbarItem[] \| undefined = null;\n\n private inputRef: HTMLZInputElement;\n\n private resizeObserver: ResizeObserver;\n\n /* Emitted on search submit, return search string /\n @Event()\n searchSubmit: EventEmitter<string>;\n\n private emitSearchSubmit(): void {\n this.searchSubmit.emit(this.inputRef.value);\n }\n\n /* Emitted on search typing, return search string /\n @Event()\n searchTyping: EventEmitter<string>;\n\n private emitSearchTyping(search: string): void {\n this.searchTyping.emit(search);\n }\n\n /* Emitted on search result click, return item /\n @Event()\n searchItemClick: EventEmitter<SearchbarItem>;\n\n private emitSearchItemClick(item: SearchbarItem): void {\n this.searchItemClick.emit(item);\n }\n\n @Watch(\"resultsItems\")\n watchItems(): void {\n this.resultsItemsList = this.getResultsItemsList();\n }\n\n @Watch(\"resultsCount\")\n watchResultsCount(): void {\n this.currResultsCount = this.resultsCount;\n }\n\n @Watch(\"value\")\n watchValue(): void {\n this.searchString = this.value;\n }\n\n @Watch(\"searchString\")\n watchSearchString(): void {\n this.emitSearchTyping(this.searchString);\n if (!this.searchString) {\n this.currResultsCount = this.resultsCount;\n }\n }\n\n disconnectedCallback(): void {\n this.resizeObserver.disconnect();\n }\n\n componentDidLoad(): void {\n this.resizeObserver = new ResizeObserver(() => {\n if (getDevice() === Device.MOBILE && !this.isMobile) {\n this.isMobile = true;\n }\n if (getDevice() !== Device.MOBILE && this.isMobile) {\n this.isMobile = false;\n }\n });\n this.resizeObserver.observe(this.element);\n }\n\n componentWillLoad(): void {\n this.resultsItemsList = this.getResultsItemsList();\n this.currResultsCount = this.resultsCount;\n }\n\n private getResultsItemsList(): SearchbarItem[] \| undefined {\n return typeof this.resultsItems === \"string\" ? JSON.parse(this.resultsItems) : this.resultsItems;\n }\n\n private getGroupedItems(items: SearchbarItem[]): SearchbarGroupedItem {\n const groupedItems = {};\n items.forEach((item: SearchbarItem) => {\n const key = `${item?.category}${item?.subcategory}`;\n groupedItems[key] = groupedItems[key] ?? {\n category: item?.category,\n subcategory: item?.subcategory,\n items: [],\n };\n groupedItems[key][\"items\"].push(item);\n });\n\n if (this.sortResultsItems) {\n return Object.keys(groupedItems)\n .sort()\n .reduce((obj, key) => {\n obj[key] = {\n ...groupedItems[key],\n items: groupedItems[key][\"items\"].sort((a: SearchbarItem, b: SearchbarItem) => {\n const nameA = a.label.toUpperCase();\n const nameB = b.label.toUpperCase();\n if (nameA < nameB) {\n return -1;\n }\n if (nameA > nameB) {\n return 1;\n }\n\n return 0;\n }),\n };\n\n return obj;\n }, {});\n }\n\n return groupedItems;\n }\n\n private checkResultsCount(counter: number): boolean {\n if (!this.currResultsCount \|\| counter < this.currResultsCount) {\n return true;\n }\n\n return false;\n }\n\n private handleStopTyping(e: CustomEvent): void {\n e.stopPropagation();\n this.searchString = e.detail.value;\n }\n\n private handleSubmit(): void {\n if (this.preventSubmit) {\n return;\n }\n\n this.emitSearchSubmit();\n }\n\n @Listen(\"click\", {target: \"document\"})\n private handleOutsideClick(e: MouseEvent): void {\n const cp = e.composedPath();\n\n const searchbar = cp.find((elem: HTMLElement) => elem.nodeName === \"Z-SEARCHBAR\");\n if (!searchbar \|\| (searchbar as HTMLZSearchbarElement).htmlid !== this.htmlid) {\n this.showResults = false;\n\n return;\n }\n\n if (cp.find((elem: HTMLElement) => elem?.nodeName === \"Z-INPUT\" \|\| elem?.classList?.contains(\"results\"))) {\n this.showResults = true;\n\n return;\n }\n\n this.showResults = false;\n }\n\n private renderInput(): HTMLZInputElement {\n return (\n <z-input\n ref={(val) => {\n this.inputRef = val;\n }}\n message={false}\n placeholder={this.placeholder}\n onStopTyping={(e: CustomEvent) => this.handleStopTyping(e)}\n onKeyUp={(e: KeyboardEvent) => handleEnterKeydSubmit(e, () => this.handleSubmit())}\n value={this.value}\n size={this.size}\n />\n );\n }\n\n private renderButton(): HTMLZButtonElement \| null {\n if (!this.showSearchButton) {\n return null;\n }\n\n const iconProp = this.searchButtonIconOnly ? {icon: \"search\"} : null;\n const buttonLabel = this.searchButtonIconOnly ? \"\" : \"CERCA\";\n const defaultProps = {\n disabled: this.preventSubmit,\n variant: this.variant,\n size: this.size,\n onClick: () => this.handleSubmit(),\n ...iconProp,\n };\n\n return <z-button {...defaultProps}>{buttonLabel}</z-button>;\n }\n\n private renderResults(): HTMLDivElement \| null {\n if (\n !this.showResults \|\|\n !this.autocomplete \|\|\n !this.searchString \|\|\n this.searchString.length < this.autocompleteMinChars \|\|\n !this.resultsItemsList\n ) {\n return null;\n }\n\n return (\n <div class=\"results-wrapper\">\n <div class=\"results\">{this.renderResultsList()}</div>\n </div>\n );\n }\n\n private renderResultsList(): HTMLZListElement \| HTMLSpanElement {\n if (this.preventSubmit && !this.resultsItemsList?.length) {\n return (\n <span class=\"item item-no-results\">\n Non abbiamo trovato risultati per <b>{this.searchString}</b>\n <br />\n <br />\n Cosa puoi fare?\n <ul>\n <li>Verificare di aver scritto bene</li>\n <li>Provare a cercare un'altra parola</li>\n <li>Provare a cercare qualcosa di più generico</li>\n </ul>\n </span>\n );\n }\n\n return (\n <z-list\n role=\"listbox\"\n id={`list-${this.htmlid}`}\n >\n {this.renderSearchHelper(!!this.resultsItemsList?.length)}\n {this.renderItems()}\n {this.renderShowAllResults()}\n </z-list>\n );\n }\n\n private renderItems(): HTMLZListGroupElement[] {\n if (!this.resultsItemsList?.length) {\n return [];\n }\n\n const groupedItems = this.getGroupedItems(this.resultsItemsList);\n const listGroups: HTMLZListGroupElement[] = [];\n let counter = 0;\n\n Object.values(groupedItems).forEach((groupItem: SearchbarGroup, index: number, array) => {\n if (this.checkResultsCount(counter)) {\n const listGroupsElements: HTMLZListElement[] = [];\n groupItem.items.forEach((item: SearchbarItem, subindex: number, subarray) => {\n if (this.checkResultsCount(counter)) {\n const isLast = index === array.length - 1 && subindex === subarray.length - 1;\n listGroupsElements.push(this.renderItem(item, subindex, !isLast));\n }\n counter++;\n });\n\n if (listGroupsElements.length) {\n listGroups.push(\n <z-list-group divider-type={ListDividerType.ELEMENT}>\n {this.renderItemCategory(groupItem)}\n {listGroupsElements}\n </z-list-group>\n );\n }\n }\n });\n\n return listGroups;\n }\n\n private renderItem(item: SearchbarItem, key: number, divider: boolean): HTMLZListElementElement {\n return (\n <z-list-element\n id={`list-item-${this.htmlid}-${key}`}\n role=\"option\"\n tabindex={0}\n dividerType={divider ? ListDividerType.ELEMENT : undefined}\n clickable\n onClickItem={() => this.emitSearchItemClick(item)}\n >\n <div class=\"list-element\">\n <span class={{\"item\": true, \"ellipsis\": this.resultsEllipsis, \"has-category\": !!item.category}}>\n {item?.icon && (\n <z-icon\n class=\"item-icon\"\n name={item.icon}\n />\n )}\n <span\n class=\"item-label\"\n title={item.label}\n innerHTML={this.renderItemLabel(item.label)}\n />\n </span>\n {item?.tag && <z-tag icon={item.tag.icon}>{!this.isMobile ? item.tag.text : \"\"}</z-tag>}\n </div>\n </z-list-element>\n );\n }\n\n private renderItemLabel(label: string): string {\n if (!this.searchString) {\n return label;\n }\n\n return label.replace(\n new RegExp(this.searchString.replace(/[.+?^${}()\|[\\]\\\\]/g, \"\\\\$&\"), \"gmi\"),\n (found) => `<mark>${found}</mark>`\n );\n }\n\n private renderItemCategory(groupItem: SearchbarGroup): HTMLSpanElement \| null {\n if (!groupItem?.category) {\n return null;\n }\n\n return (\n <span\n class=\"category-heading\"\n slot=\"header-title\"\n >\n <span class=\"category\">{groupItem.category}</span>\n {groupItem?.subcategory && <span class=\"subcategory\">{groupItem.subcategory}</span>}\n </span>\n );\n }\n\n private renderSearchHelper(hasDivider = true): HTMLZListElement \| null {\n if (!this.autocomplete \|\| this.preventSubmit \|\| !this.searchString) {\n return null;\n }\n\n return (\n <z-list-element\n role=\"option\"\n tabindex={0}\n dividerType={hasDivider ? ListDividerType.ELEMENT : undefined}\n clickable\n id={`list-item-${this.htmlid}-search`}\n onClickItem={() => this.emitSearchSubmit()}\n >\n <span class=\"item item-search\">\n <z-icon\n class=\"search-icon\"\n name=\"left-magnifying-glass\"\n />\n <span\n class=\"item-label\"\n innerHTML={this.searchHelperLabel.replace(\"{searchString}\", `<mark>${this.searchString}</mark>`)}\n />\n </span>\n </z-list-element>\n );\n }\n\n private renderShowAllResults(): HTMLZListElement \| null {\n if (\n !this.currResultsCount \|\|\n !this.searchString \|\|\n !this.resultsItemsList?.length \|\|\n this.currResultsCount >= this.resultsItemsList?.length\n ) {\n return null;\n }\n\n return (\n <z-list-element\n role=\"option\"\n tabindex={0}\n clickable\n id={`list-item-${this.htmlid}-show-all`}\n onClickItem={() => (this.currResultsCount = 0)}\n color=\"color-primary01\"\n >\n <div class=\"item-show-all\">Vedi tutti i risultati</div>\n </z-list-element>\n );\n }\n\n render(): HTMLZSearchbarElement {\n return (\n <Host\n onFocus={() => (this.showResults = true)}\n onClick={(e) => this.handleOutsideClick(e)}\n class={{\"has-submit\": this.showSearchButton, \"has-results\": this.autocomplete}}\n >\n <div class=\"input-container\">\n {this.renderInput()}\n {this.renderResults()}\n </div>\n {this.renderButton()}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"index26.js","mappings":"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","names":[],"sources":["src/components/inputs/z-searchbar/styles.css?tag=z-searchbar&encapsulation=shadow","src/components/inputs/z-searchbar/index.tsx"],"sourcesContent":[":host {\n z-index: 15;\n display: flex;\n column-gap: calc(var(--space-unit) * 2);\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host,\n* {\n box-sizing: border-box;\n}\n\n.input-container {\n position: relative;\n display: flex;\n width: 100%;\n flex-direction: column;\n}\n\n.results-wrapper {\n position: absolute;\n top: calc(100% - 1px);\n left: 0;\n width: 100%;\n padding: calc(var(--space-unit) / 4);\n border: var(--border-size-small) solid var(--color-surface03);\n border-top: none;\n background: var(--color-surface01);\n}\n\n.results {\n overflow: auto;\n max-height: var(--z-searchbar-results-height, 540px);\n padding: calc(var(--space-unit) / 2) calc(var(--space-unit) * 1.5);\n scrollbar-color: var(--color-primary01) transparent;\n}\n\n.results::-webkit-scrollbar {\n width: 10px;\n background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);\n border-radius: var(--border-radius);\n}\n\n.results::-webkit-scrollbar-track {\n background-color: transparent;\n}\n\n.results::-webkit-scrollbar-thumb {\n width: 10px;\n background-color: var(--color-primary01);\n border-radius: var(--border-radius);\n}\n\n.results .category-heading {\n display: block;\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n line-height: var(--font-size-3);\n}\n\n.results .category-heading > * {\n display: block;\n}\n\n.results .category-heading > .category {\n color: var(--color-text05);\n font-style: italic;\n}\n\n.results .category-heading > .subcategory {\n margin-top: var(--space-unit);\n color: var(--color-text01);\n text-transform: uppercase;\n}\n\n.results z-list-element {\n display: block;\n}\n\n.results z-list-element > .list-element {\n display: flex;\n justify-content: space-between;\n}\n\n.results z-list-element > .list-element > z-tag {\n border: 1px solid var(--gray800);\n font-size: var(--font-size-1);\n font-weight: var(--font-sb);\n\n --z-tag-bg: white;\n --z-tag-text-color: var(--color-text01);\n}\n\n.results .item {\n --z-icon-height: 12px;\n --z-icon-width: 12px;\n\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-content: flex-start;\n color: var(--color-text01);\n column-gap: calc(var(--space-unit) * 1.5);\n fill: var(--color-icon02);\n font-size: var(--font-size-2);\n line-height: var(--font-size-3);\n}\n\n.results .item.ellipsis > .item-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.results .item > .item-label mark {\n background: var(--color-primary03);\n}\n\n.results .item.has-category {\n padding-left: calc(var(--space-unit) * 3);\n}\n\n.results .item.item-search {\n --z-icon-height: 16px;\n --z-icon-width: 16px;\n}\n\n.results .item-show-all {\n text-align: center;\n}\n\n.results .item-no-results {\n display: block;\n font-size: var(--font-size-2);\n font-style: italic;\n line-height: var(--font-size-5);\n}\n\n.results .item-no-results > ul {\n padding-left: calc(var(--space-unit) * 2);\n margin: var(--space-unit);\n}\n\n/* Tablet breakpoint /\n@media (min-width: 768px) {\n .results .category-heading {\n font-size: var(--font-size-3);\n line-height: var(--font-size-6);\n }\n\n .results .item {\n font-size: var(--font-size-3);\n line-height: var(--font-size-6);\n }\n\n .results .item.item-search {\n --z-icon-height: 18px;\n --z-icon-width: 18px;\n }\n\n .results .item.ellipsis > .item-label {\n height: 24px;\n }\n}\n\n/ Desktop breakpoint /\n@media (min-width: 1152px) {\n .results .item {\n cursor: pointer;\n }\n\n .results .item-no-results {\n cursor: default;\n font-size: var(--font-size-3);\n line-height: var(--font-size-6);\n }\n}\n\n:host([size=\"small\"]) .results :is(.item, .category-heading),\n:host([size=\"x-small\"]) .results :is(.item, .category-heading) {\n font-size: var(--font-size-2);\n}\n\n:host([size=\"small\"]) .results .item:not(.has-category),\n:host([size=\"x-small\"]) .results .item:not(.has-category) {\n --z-icon-height: 16px;\n --z-icon-width: 16px;\n}\n\n:host([size=\"small\"])::part(list-item-container) {\n min-height: calc(var(--space-unit) 4.5);\n padding: 0;\n}\n\n:host([size=\"x-small\"])::part(list-item-container) {\n min-height: calc(var(--space-unit) * 4);\n padding: 0;\n}\n","import {Component, Event, EventEmitter, h, Host, Listen, Prop, State, Watch, Element} from \"@stencil/core\";\nimport {\n ButtonVariant,\n ListDividerType,\n SearchbarGroup,\n SearchbarGroupedItem,\n SearchbarItem,\n ControlSize,\n Device,\n} from \"../../../beans\";\nimport {getDevice, handleEnterKeydSubmit, randomId} from \"../../../utils/utils\";\n\n/*\n @cssprop --z-searchbar-results-height - Max height of the results container (default: 540px)\n /\n@Component({\n tag: \"z-searchbar\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZSearchbar {\n /* the id of the searchbar element /\n @Prop({reflect: true})\n htmlid = `searchbar-${randomId()}`;\n\n /* Prevent submit action /\n @Prop()\n preventSubmit?: boolean = false;\n\n /* Input search string /\n @Prop()\n value?: string;\n\n /* Search input placeholder /\n @Prop()\n placeholder?: string;\n\n /* Show autocomplete results /\n @Prop()\n autocomplete?: boolean = false;\n\n /* Minimun number of characters to dispatch typing event /\n @Prop()\n autocompleteMinChars?: number = 3;\n\n /* Number of results shown - default all /\n @Prop()\n resultsCount?: number;\n\n /* Truncate results to single row /\n @Prop()\n resultsEllipsis?: boolean = true;\n\n /* Search helper text /\n @Prop()\n searchHelperLabel?: string = \"Cerca {searchString}\";\n\n /* Autocomplete results items /\n @Prop()\n resultsItems?: SearchbarItem[] \| string;\n\n /* Sort autocomplete results items /\n @Prop()\n sortResultsItems?: boolean = false;\n\n /* Show submit button /\n @Prop()\n showSearchButton?: boolean = false;\n\n /* Set button icon without label/\n @Prop()\n searchButtonIconOnly?: boolean = false;\n\n /* Available sizes: `big`, `small` and `x-small`. Defaults to `big`. /\n @Prop()\n size?: ControlSize = ControlSize.BIG;\n\n /* Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`. /\n @Prop()\n variant?: ButtonVariant = ButtonVariant.PRIMARY;\n\n @State()\n searchString = this.value;\n\n @State()\n currResultsCount = 0;\n\n @State()\n showResults = false;\n\n @State()\n isMobile = false;\n\n @Element() element: HTMLZSearchbarElement;\n\n private resultsItemsList: SearchbarItem[] \| undefined = null;\n\n private inputRef: HTMLZInputElement;\n\n private resizeObserver: ResizeObserver;\n\n /* Emitted on search submit, return search string /\n @Event()\n searchSubmit: EventEmitter<string>;\n\n private emitSearchSubmit(): void {\n this.searchSubmit.emit(this.inputRef.value);\n }\n\n /* Emitted on search typing, return search string /\n @Event()\n searchTyping: EventEmitter<string>;\n\n private emitSearchTyping(search: string): void {\n this.searchTyping.emit(search);\n }\n\n /* Emitted on search result click, return item /\n @Event()\n searchItemClick: EventEmitter<SearchbarItem>;\n\n private emitSearchItemClick(item: SearchbarItem): void {\n this.searchItemClick.emit(item);\n }\n\n @Watch(\"resultsItems\")\n watchItems(): void {\n this.resultsItemsList = this.getResultsItemsList();\n }\n\n @Watch(\"resultsCount\")\n watchResultsCount(): void {\n this.currResultsCount = this.resultsCount;\n }\n\n @Watch(\"value\")\n watchValue(): void {\n this.searchString = this.value;\n }\n\n @Watch(\"searchString\")\n watchSearchString(): void {\n this.emitSearchTyping(this.searchString);\n if (!this.searchString) {\n this.currResultsCount = this.resultsCount;\n }\n }\n\n disconnectedCallback(): void {\n this.resizeObserver.disconnect();\n }\n\n componentDidLoad(): void {\n this.resizeObserver = new ResizeObserver(() => {\n if (getDevice() === Device.MOBILE && !this.isMobile) {\n this.isMobile = true;\n }\n if (getDevice() !== Device.MOBILE && this.isMobile) {\n this.isMobile = false;\n }\n });\n this.resizeObserver.observe(this.element);\n }\n\n componentWillLoad(): void {\n this.resultsItemsList = this.getResultsItemsList();\n this.currResultsCount = this.resultsCount;\n }\n\n private getResultsItemsList(): SearchbarItem[] \| undefined {\n return typeof this.resultsItems === \"string\" ? JSON.parse(this.resultsItems) : this.resultsItems;\n }\n\n private getGroupedItems(items: SearchbarItem[]): SearchbarGroupedItem {\n const groupedItems = {};\n items.forEach((item: SearchbarItem) => {\n const key = `${item?.category}${item?.subcategory}`;\n groupedItems[key] = groupedItems[key] ?? {\n category: item?.category,\n subcategory: item?.subcategory,\n items: [],\n };\n groupedItems[key][\"items\"].push(item);\n });\n\n if (this.sortResultsItems) {\n return Object.keys(groupedItems)\n .sort()\n .reduce((obj, key) => {\n obj[key] = {\n ...groupedItems[key],\n items: groupedItems[key][\"items\"].sort((a: SearchbarItem, b: SearchbarItem) => {\n const nameA = a.label.toUpperCase();\n const nameB = b.label.toUpperCase();\n if (nameA < nameB) {\n return -1;\n }\n if (nameA > nameB) {\n return 1;\n }\n\n return 0;\n }),\n };\n\n return obj;\n }, {});\n }\n\n return groupedItems;\n }\n\n private checkResultsCount(counter: number): boolean {\n if (!this.currResultsCount \|\| counter < this.currResultsCount) {\n return true;\n }\n\n return false;\n }\n\n private handleStopTyping(e: CustomEvent): void {\n e.stopPropagation();\n this.searchString = e.detail.value;\n }\n\n private handleSubmit(): void {\n if (this.preventSubmit) {\n return;\n }\n\n this.emitSearchSubmit();\n }\n\n @Listen(\"click\", {target: \"document\"})\n private handleOutsideClick(e: MouseEvent): void {\n const cp = e.composedPath();\n\n const searchbar = cp.find((elem: HTMLElement) => elem.nodeName === \"Z-SEARCHBAR\");\n if (!searchbar \|\| (searchbar as HTMLZSearchbarElement).htmlid !== this.htmlid) {\n this.showResults = false;\n\n return;\n }\n\n if (cp.find((elem: HTMLElement) => elem?.nodeName === \"Z-INPUT\" \|\| elem?.classList?.contains(\"results\"))) {\n this.showResults = true;\n\n return;\n }\n\n this.showResults = false;\n }\n\n private renderInput(): HTMLZInputElement {\n return (\n <z-input\n ref={(val) => {\n this.inputRef = val;\n }}\n message={false}\n placeholder={this.placeholder}\n onStopTyping={(e: CustomEvent) => this.handleStopTyping(e)}\n onKeyUp={(e: KeyboardEvent) => handleEnterKeydSubmit(e, () => this.handleSubmit())}\n value={this.value}\n size={this.size}\n />\n );\n }\n\n private renderButton(): HTMLZButtonElement \| null {\n if (!this.showSearchButton) {\n return null;\n }\n\n const iconProp = this.searchButtonIconOnly ? {icon: \"search\"} : null;\n const buttonLabel = this.searchButtonIconOnly ? \"\" : \"CERCA\";\n const defaultProps = {\n disabled: this.preventSubmit,\n variant: this.variant,\n size: this.size,\n onClick: () => this.handleSubmit(),\n ...iconProp,\n };\n\n return <z-button {...defaultProps}>{buttonLabel}</z-button>;\n }\n\n private renderResults(): HTMLDivElement \| null {\n if (\n !this.showResults \|\|\n !this.autocomplete \|\|\n !this.searchString \|\|\n this.searchString.length < this.autocompleteMinChars \|\|\n !this.resultsItemsList\n ) {\n return null;\n }\n\n return (\n <div class=\"results-wrapper\">\n <div class=\"results\">{this.renderResultsList()}</div>\n </div>\n );\n }\n\n private renderResultsList(): HTMLZListElement \| HTMLSpanElement {\n if (this.preventSubmit && !this.resultsItemsList?.length) {\n return (\n <span class=\"item item-no-results\">\n Non abbiamo trovato risultati per <b>{this.searchString}</b>\n <br />\n <br />\n Cosa puoi fare?\n <ul>\n <li>Verificare di aver scritto bene</li>\n <li>Provare a cercare un'altra parola</li>\n <li>Provare a cercare qualcosa di più generico</li>\n </ul>\n </span>\n );\n }\n\n return (\n <z-list\n role=\"listbox\"\n id={`list-${this.htmlid}`}\n >\n {this.renderSearchHelper(!!this.resultsItemsList?.length)}\n {this.renderItems()}\n {this.renderShowAllResults()}\n </z-list>\n );\n }\n\n private renderItems(): HTMLZListGroupElement[] {\n if (!this.resultsItemsList?.length) {\n return [];\n }\n\n const groupedItems = this.getGroupedItems(this.resultsItemsList);\n const listGroups: HTMLZListGroupElement[] = [];\n let counter = 0;\n\n Object.values(groupedItems).forEach((groupItem: SearchbarGroup, index: number, array) => {\n if (this.checkResultsCount(counter)) {\n const listGroupsElements: HTMLZListElement[] = [];\n groupItem.items.forEach((item: SearchbarItem, subindex: number, subarray) => {\n if (this.checkResultsCount(counter)) {\n const isLast = index === array.length - 1 && subindex === subarray.length - 1;\n listGroupsElements.push(this.renderItem(item, subindex, !isLast));\n }\n counter++;\n });\n\n if (listGroupsElements.length) {\n listGroups.push(\n <z-list-group divider-type={ListDividerType.ELEMENT}>\n {this.renderItemCategory(groupItem)}\n {listGroupsElements}\n </z-list-group>\n );\n }\n }\n });\n\n return listGroups;\n }\n\n private renderItem(item: SearchbarItem, key: number, divider: boolean): HTMLZListElementElement {\n return (\n <z-list-element\n id={`list-item-${this.htmlid}-${key}`}\n role=\"option\"\n tabindex={0}\n dividerType={divider ? ListDividerType.ELEMENT : undefined}\n clickable\n onClickItem={() => this.emitSearchItemClick(item)}\n >\n <div class=\"list-element\">\n <span class={{\"item\": true, \"ellipsis\": this.resultsEllipsis, \"has-category\": !!item.category}}>\n {item?.icon && (\n <z-icon\n class=\"item-icon\"\n name={item.icon}\n />\n )}\n <span\n class=\"item-label\"\n title={item.label}\n innerHTML={this.renderItemLabel(item.label)}\n />\n </span>\n {item?.tag && <z-tag icon={item.tag.icon}>{!this.isMobile ? item.tag.text : \"\"}</z-tag>}\n </div>\n </z-list-element>\n );\n }\n\n private renderItemLabel(label: string): string {\n if (!this.searchString) {\n return label;\n }\n\n return label.replace(\n new RegExp(this.searchString.replace(/[.+?^${}()\|[\\]\\\\]/g, \"\\\\$&\"), \"gmi\"),\n (found) => `<mark>${found}</mark>`\n );\n }\n\n private renderItemCategory(groupItem: SearchbarGroup): HTMLSpanElement \| null {\n if (!groupItem?.category) {\n return null;\n }\n\n return (\n <span\n class=\"category-heading\"\n slot=\"header-title\"\n >\n <span class=\"category\">{groupItem.category}</span>\n {groupItem?.subcategory && <span class=\"subcategory\">{groupItem.subcategory}</span>}\n </span>\n );\n }\n\n private renderSearchHelper(hasDivider = true): HTMLZListElement \| null {\n if (!this.autocomplete \|\| this.preventSubmit \|\| !this.searchString) {\n return null;\n }\n\n return (\n <z-list-element\n role=\"option\"\n tabindex={0}\n dividerType={hasDivider ? ListDividerType.ELEMENT : undefined}\n clickable\n id={`list-item-${this.htmlid}-search`}\n onClickItem={() => this.emitSearchSubmit()}\n >\n <span class=\"item item-search\">\n <z-icon\n class=\"search-icon\"\n name=\"left-magnifying-glass\"\n />\n <span\n class=\"item-label\"\n innerHTML={this.searchHelperLabel.replace(\"{searchString}\", `<mark>${this.searchString}</mark>`)}\n />\n </span>\n </z-list-element>\n );\n }\n\n private renderShowAllResults(): HTMLZListElement \| null {\n if (\n !this.currResultsCount \|\|\n !this.searchString \|\|\n !this.resultsItemsList?.length \|\|\n this.currResultsCount >= this.resultsItemsList?.length\n ) {\n return null;\n }\n\n return (\n <z-list-element\n role=\"option\"\n tabindex={0}\n clickable\n id={`list-item-${this.htmlid}-show-all`}\n onClickItem={() => (this.currResultsCount = 0)}\n color=\"color-primary01\"\n >\n <div class=\"item-show-all\">Vedi tutti i risultati</div>\n </z-list-element>\n );\n }\n\n render(): HTMLZSearchbarElement {\n return (\n <Host\n onFocus={() => (this.showResults = true)}\n onClick={(e) => this.handleOutsideClick(e)}\n class={{\"has-submit\": this.showSearchButton, \"has-results\": this.autocomplete}}\n >\n <div class=\"input-container\">\n {this.renderInput()}\n {this.renderResults()}\n </div>\n {this.renderButton()}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/index27.js CHANGED Viewed

@@ -1,36 +1,56 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { B as ButtonVariant, d as ButtonSize } from './index2.js';
+import { d as defineCustomElement$2 } from './index4.js';
 import { d as defineCustomElement$1 } from './index9.js';
-const stylesCss = ".sc-z-tag-h{--z-icon-width:14px;--z-icon-height:14px;--z-tag-text-color:var(--color-primary03);--z-tag-bg:var(--color-hover-primary);display:flex;width:fit-content;max-width:inherit;height:fit-content;max-height:inherit;padding:calc(var(--space-unit) / 2);background-color:var(--z-tag-bg);border-radius:var(--border-radius);color:var(--z-tag-text-color);fill:var(--z-tag-text-color);font-family:var(--font-family-sans);line-height:14px;text-transform:uppercase}.sc-z-tag-h>z-icon.sc-z-tag{margin-right:var(--space-unit)}.expandable.sc-z-tag-h>z-icon.sc-z-tag{margin-right:0;transition:margin-right 0.3s ease-out}.sc-z-tag-h:not(.expandable)>z-icon.sc-z-tag:not(:last-child),.expandable.sc-z-tag-h:hover>z-icon.sc-z-tag:not(:last-child){margin-right:var(--space-unit);transition:margin-right 0.3s ease-out 0s}.expandable.sc-z-tag-h>div.sc-z-tag{overflow:hidden;max-width:0;max-height:0}.expandable.sc-z-tag-h:hover>div.sc-z-tag{max-width:100%;max-height:100%}";
-const ZTagStyle0 = stylesCss;
+const stylesCss = ":host{display:table-cell;border-bottom:var(--border-size-small) solid var(--color-surface03);background-color:var(--color-white);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>.button-container{display:none}:host:hover>.button-container{display:initial}.button-container{position:absolute;z-index:5;top:8px;right:8px}.button-content{position:relative}.contextual-menu-container{position:absolute;top:calc(100% - var(--space-unit));right:0;display:none}.button-container.visible,.contextual-menu-container.visible{display:initial}:host([padding=\"x-small\"]){padding:calc(var(--space-unit) * 0.5)}:host([padding=\"small\"]){padding:calc(var(--space-unit))}:host([padding=\"medium\"]){padding:calc(var(--space-unit) * 2)}:host([padding=\"large\"]){padding:calc(var(--space-unit) * 2.5)}:host([padding=\"special\"]){padding:0}";
+const ZTableCellStyle0 = stylesCss;
-const ZTag = /*@__PURE__*/ proxyCustomElement(class ZTag extends HTMLElement {
+const ZTableCell = /*@__PURE__*/ proxyCustomElement(class ZTableCell extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        this.icon = undefined;
-        this.expandable = undefined;
+        this.__attachShadow();
+        this.showButton = undefined;
+        this.padding = "medium";
+        this.isMenuOpened = false;
+    }
+    handleMenu() {
+        this.isMenuOpened = !this.isMenuOpened;
+    }
+    componentWillRender() {
+        this.host.setAttribute("role", "cell");
     }
     render() {
-        return (h(Host, { key: 'fa2bfa00bef52495bef1e2271ffa20c09a60380a', class: {
-                "body-5-sb": true,
-                "expandable": this.expandable && !!this.icon,
-            } }, this.icon && h("z-icon", { name: this.icon }), h("div", { key: '37bbe9678c9a2022a6fe260753b7955fdb9a76d1' }, h("slot", { key: 'f9f7a5f44c6b89d90b4b252fd990889751e955c8' }))));
+        return (h(Host, { key: 'a55491d43ef04929fdd38073b589d12d5d373ca4' }, this.showButton && (h("div", { class: {
+                "button-container": true,
+                "visible": this.isMenuOpened,
+            } }, h("div", { class: "button-content" }, h("z-button", { icon: "contextual-menu", variant: ButtonVariant.TERTIARY, size: ButtonSize.X_SMALL, onClick: () => this.handleMenu() }), h("div", { class: {
+                "contextual-menu-container": true,
+                "visible": this.isMenuOpened,
+            } }, h("slot", { name: "contextual-menu" }))))), h("slot", { key: 'd8d5dab5bac78f43151d50d22df6cfbefdc81694' })));
     }
-    static get style() { return ZTagStyle0; }
-}, [6, "z-tag", {
-        "icon": [1],
-        "expandable": [4]
+    get host() { return this; }
+    static get style() { return ZTableCellStyle0; }
+}, [1, "z-table-cell", {
+        "showButton": [4, "show-button"],
+        "padding": [513],
+        "isMenuOpened": [32]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["z-tag", "z-icon"];
+    const components = ["z-table-cell", "z-button", "z-icon"];
     components.forEach(tagName => { switch (tagName) {
-        case "z-tag":
+        case "z-table-cell":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZTableCell);
+            }
+            break;
+        case "z-button":
             if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZTag);
+                defineCustomElement$2();
             }
             break;
         case "z-icon":
@@ -41,6 +61,6 @@ function defineCustomElement() {
     } });
 }
-export { ZTag as Z, defineCustomElement as d };
+export { ZTableCell as Z, defineCustomElement as d };
 //# sourceMappingURL=index27.js.map

package/dist/components/index27.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"index27.js","mappings":"~~;;;~~AAAA,MAAM,SAAS,GAAG,~~g8BAAg8B,~~CAAC;~~AACn9B~~,~~mBAAe~~,SAAS;;~~MCaX~~,IAAI~~;;;;;;;IASf~~,MAAM;QACJ,QACE,EAAC,IAAI,~~qDACH~~,KAAK,EAAE;gBACL,~~WAAW~~,EAAE,IAAI;~~gBACjB~~,~~YAAY~~,EAAE,IAAI,CAAC,~~UAAU~~,IAAI,~~CAAC~~,CAAC,IAAI,CAAC,~~IAAI;aAC7C~~,~~IAEA~~,IAAI,CAAC,~~IAAI~~,~~IAAI~~,~~cAAQ~~,IAAI,EAAE,IAAI,CAAC,IAAI,~~GAAI~~,~~EACzC~~,~~8DACE~~,8DAAQ,~~CACJ~~,~~CACD,~~EACP;KACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":["src/~~components~~/z-~~tag~~/styles.css?tag=z-~~tag~~&encapsulation=~~scoped~~","src/~~components~~/z-~~tag~~/index.tsx"],"sourcesContent":[":host {\n ~~--z-icon-width~~: ~~14px~~;\n --z-~~icon~~-~~height:~~ ~~14px~~;\n ~~--z~~-~~tag-text-~~color: var(--color-~~primary03~~);\n --z-~~tag~~-bg: var(--~~color~~-~~hover-primary~~);\n\n display: ~~flex~~;\n ~~width~~: ~~fit~~-~~content;\~~n ~~max-width~~: ~~inherit~~;\n ~~height~~: ~~fit-content~~;\n ~~max~~-~~height~~: ~~inherit~~;\n ~~padding~~: ~~calc(var(--space-unit) / 2)~~;\n ~~background-color~~: ~~var(--z-tag-bg)~~;\n ~~border~~-~~radius:~~ ~~var(--border-radius);\~~n ~~color~~: ~~var(--z~~-~~tag~~-~~text-color);\~~n ~~fill~~: ~~var(--z-tag-text-color)~~;\n ~~font-family~~: var(--~~font~~-~~family-sans~~);\n ~~line-height~~: ~~14px~~;\n ~~text-transform~~: ~~uppercase~~;\n}\n\n~~:host > z~~-~~icon~~ {\n ~~margin-right~~: ~~var(--space-unit)~~;\n}\n\n:host(~~.expandable~~) ~~> z-icon~~ {\n ~~margin-right~~: ~~0;\n transition: margin~~-~~right~~ 0.~~3s ease-out~~;\n}\n\n:host(~~:not(.expandable~~)) > ~~z-icon:not~~(~~:last~~-~~child~~),\n:host(~~.expandable:hover~~) ~~> z-icon:not(:last-child)~~ {\n ~~margin-right~~: var(--space-unit)~~;\n transition:~~ ~~margin-right~~ ~~0.3s ease-out 0s~~;\n}\n\n:host(~~.expandable~~) ~~> div~~ {\n ~~overflow~~: ~~hidden;\n max~~-~~width:~~ ~~0;\n max-height:~~ 0;\n}\n\n:host(~~.expandable:hover~~) ~~> div~~ {\n ~~max-width~~: ~~100%;\~~n ~~max-height: 100%;\n~~}\n","import {Component, ~~Prop~~, h, Host} from \"@stencil/core\";\~~n\n/*\n~~ ~~Ztag component.\n~~ * ~~@slot - The text of the z-tag.\~~n * @cssprop --z-tag-text-color - text and icon color using tokens.\n * @~~cssprop --z-tag-bg - background color of the z-tag.\~~n /\n@Component({\n tag: \"z-~~tag~~\",\n styleUrl: \"styles.css\",\n shadow: ~~false,\n scoped:~~ true,\n})\nexport class ~~ZTag~~ {\n /* [~~optional~~] ~~Tag~~ ~~icon~~ /\n @Prop()\n ~~icon~~?: ~~string~~;\n\n /* ~~[optional]~~ ~~Hide~~ ~~the~~ ~~text~~ ~~and~~ ~~show~~ it on ~~hover~~*/\n @Prop()\n ~~expandable?:~~ ~~boolean~~;\n\n render(): ~~HTMLZTagElement~~ {\n return (\n <Host\n class={{\n \"~~body~~-~~5-sb~~\": true,\n \"~~expandable~~\": this.~~expandable && !!this.icon~~,\n }}\n >\n ~~{this.icon~~ && <z-icon ~~name~~={~~this~~.~~icon~~} />}\n <div>\n <slot />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"index27.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,+0BAA+0B,CAAC;AACl2B,yBAAe,SAAS;;MCUX,UAAU;;;;;;uBAS2C,QAAQ;4BAGzD,KAAK;;IAEZ,UAAU;QAChB,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;KACxC;IAED,mBAAmB;QACjB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;KACxC;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACF,IAAI,CAAC,UAAU,KACd,WACE,KAAK,EAAE;gBACL,kBAAkB,EAAE,IAAI;gBACxB,SAAS,EAAE,IAAI,CAAC,YAAY;aAC7B,IAED,WAAK,KAAK,EAAC,gBAAgB,IACzB,gBACE,IAAI,EAAC,iBAAiB,EACtB,OAAO,EAAE,aAAa,CAAC,QAAQ,EAC/B,IAAI,EAAE,UAAU,CAAC,OAAO,EACxB,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,GAChC,EACF,WACE,KAAK,EAAE;gBACL,2BAA2B,EAAE,IAAI;gBACjC,SAAS,EAAE,IAAI,CAAC,YAAY;aAC7B,IAED,YAAM,IAAI,EAAC,iBAAiB,GAAG,CAC3B,CACF,CACF,CACP,EACD,8DAAQ,CACH,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/deprecated/z-table-deprecated/z-table-cell/styles.css?tag=z-table-cell&encapsulation=shadow","src/deprecated/z-table-deprecated/z-table-cell/index.tsx"],"sourcesContent":[":host {\n display: table-cell;\n border-bottom: var(--border-size-small) solid var(--color-surface03);\n background-color: var(--color-white);\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host > .button-container {\n display: none;\n}\n\n:host:hover > .button-container {\n display: initial;\n}\n\n.button-container {\n position: absolute;\n z-index: 5;\n top: 8px;\n right: 8px;\n}\n\n.button-content {\n position: relative;\n}\n\n.contextual-menu-container {\n position: absolute;\n top: calc(100% - var(--space-unit));\n right: 0;\n display: none;\n}\n\n.button-container.visible,\n.contextual-menu-container.visible {\n display: initial;\n}\n\n:host([padding=\"x-small\"]) {\n padding: calc(var(--space-unit) * 0.5);\n}\n\n:host([padding=\"small\"]) {\n padding: calc(var(--space-unit));\n}\n\n:host([padding=\"medium\"]) {\n padding: calc(var(--space-unit) * 2);\n}\n\n:host([padding=\"large\"]) {\n padding: calc(var(--space-unit) * 2.5);\n}\n\n:host([padding=\"special\"]) {\n padding: 0;\n}\n","import {Component, Element, h, Host, Prop, State} from \"@stencil/core\";\nimport {ButtonVariant, ButtonSize} from \"../../../beans\";\n\n/*\n @deprecated\n /\n@Component({\n tag: \"z-table-cell\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTableCell {\n @Element() host: HTMLZTableCellElement;\n\n /* [Optional] Show contextual menu button /\n @Prop()\n showButton?: boolean;\n\n /* Set padding size of cell, if special 0px padding will be set */\n @Prop({reflect: true})\n padding: \"x-small\" \| \"small\" \| \"medium\" \| \"large\" \| \"special\" = \"medium\";\n\n @State()\n isMenuOpened = false;\n\n private handleMenu(): void {\n this.isMenuOpened = !this.isMenuOpened;\n }\n\n componentWillRender(): void {\n this.host.setAttribute(\"role\", \"cell\");\n }\n\n render(): HTMLZTableCellElement {\n return (\n <Host>\n {this.showButton && (\n <div\n class={{\n \"button-container\": true,\n \"visible\": this.isMenuOpened,\n }}\n >\n <div class=\"button-content\">\n <z-button\n icon=\"contextual-menu\"\n variant={ButtonVariant.TERTIARY}\n size={ButtonSize.X_SMALL}\n onClick={() => this.handleMenu()}\n />\n <div\n class={{\n \"contextual-menu-container\": true,\n \"visible\": this.isMenuOpened,\n }}\n >\n <slot name=\"contextual-menu\" />\n </div>\n </div>\n </div>\n )}\n <slot />\n </Host>\n );\n }\n}\n"],"version":3}