@zanichelli/albe-web-components 13.1.0-rc3 → 13.1.1

package/dist/collection/components/z-skip-to-content/index.js

@@ -45,7 +45,7 @@ export class ZSkipToContent {
         this.visible = false;
     }
     render() {
-        return (h(Host, { key: '148da854d3c5a83e5c103b3efcc5358f86278936', class: {
+        return (h(Host, { key: '08004b426a63113ef27d0cac85716b5433a2a292', class: {
                 [this.variant]: true,
                 "skip-to-content-visible": this.visible,
             } }, this.links.map((link, i) => {

package/dist/collection/components/z-tag/index.js

@@ -11,10 +11,10 @@ export class ZTag {
         this.expandable = undefined;
     }
     render() {
-        return (h(Host, { key: '9d45170a5cefce5d815ac7b5402123645a8d243b', class: {
+        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: '9cf3b9f7b169709cf109cdab4d0cfe346a9eb29c' }, h("slot", { key: 'c26454112b3fa7ce120eaf50844cb82c9e11e751' }))));
+            } }, this.icon && h("z-icon", { name: this.icon }), h("div", { key: '37bbe9678c9a2022a6fe260753b7955fdb9a76d1' }, h("slot", { key: 'f9f7a5f44c6b89d90b4b252fd990889751e955c8' }))));
     }
     static get is() { return "z-tag"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/z-visually-hidden/index.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class ZVisuallyHidden {
     render() {
-        return h("slot", { key: '9ce7d87881fa96e717bc1556d5242cbfe68d0739' });
+        return h("slot", { key: '9fb05af5cc8c977fc5041b5a5b75d5813caefd82' });
     }
     static get is() { return "z-visually-hidden"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/deprecated/z-link/index.js

@@ -45,7 +45,7 @@ export class ZLink {
         }
     }
     render() {
-        return (h("a", { key: 'b5b630a2b5ffe83a239315612faf6b673158c782', id: this.htmlid, href: this.href ? this.href : null, class: {
+        return (h("a", { key: 'e5b80b5dac596f11648e2e8afa373c1da00e6e5d', id: this.htmlid, href: this.href ? this.href : null, class: {
                 disabled: this.isdisabled,
                 active: this.isactive,
                 white: this.iswhite,

package/dist/collection/snowflakes/myz/card/z-myz-card/index.js

@@ -33,7 +33,7 @@ export class ZMyzCardComponent {
         return elemClasses;
     }
     render() {
-        return (h("div", { key: '2ea30f2293b9dd4cc187d2cc97449caf4851b424', class: this.retrieveClass(), tabindex: "0" }, h("slot", { key: 'ee17e5ceb45cba4f565e6efe41cf524f2cf91ed7' })));
+        return (h("div", { key: 'bb61c603563fe59552323e57f54348036621173a', class: this.retrieveClass(), tabindex: "0" }, h("slot", { key: '154d569cd2055c0ba1fca9c2551a5078e7f2f7ce' })));
     }
     static get is() { return "z-myz-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/snowflakes/myz/card/z-myz-card-alert/index.js

@@ -46,7 +46,7 @@ export class ZMyzCardAlert {
         }
     }
     render() {
-        return (h("div", { key: '1b444689e78b349adce31ea4d4b318ae447acc05', class: "alert-external-wrapper " + this.retrieveClass() }, h("z-alert", { key: '8774b645a0c306246db8afbed890b372ae8dcdff', type: this.getAlertType() }, h("div", { key: '03df6396443cffd9b791a9b29b146f05f405a035', class: "relative-container" }, h("z-icon", { key: '7d0a21e9cd2dbbde634440b3e36f2d892023cc81', name: this.iconname, width: 18, height: 18, class: this.retrieveClass() }), h("span", { key: 'a0bc80e8f7b28cebba25ad3f8a5f9bf3233a6930', class: "content-text" }, this.contenttext), this.actiontext && !!this.actiontext.trim().length && (h("span", { role: "button", tabindex: "0", class: "content-action", onClick: (e) => {
+        return (h("div", { key: '470f1e9563148daba93a5d2dd19727bc04d706c5', class: "alert-external-wrapper " + this.retrieveClass() }, h("z-alert", { key: '4e42f67a1fd020466c3b9ab94301927f94230da2', type: this.getAlertType() }, h("div", { key: 'f395f1d7d32f23ab38badc5ce27894a7fbfb2cc4', class: "relative-container" }, h("z-icon", { key: '4e6cab20b05b8843982c640cd99243693abcc36c', name: this.iconname, width: 18, height: 18, class: this.retrieveClass() }), h("span", { key: '9b6c135f64c3ab78fe740e91efedcc5282a0de01', class: "content-text" }, this.contenttext), this.actiontext && !!this.actiontext.trim().length && (h("span", { role: "button", tabindex: "0", class: "content-action", onClick: (e) => {
                 this.handleActionButtonClick(e);
             }, onKeyPress: (e) => {
                 this.handleSpaceKeyPress(e);

package/dist/collection/snowflakes/myz/card/z-myz-card-body/index.js

@@ -5,7 +5,7 @@ import { h } from "@stencil/core";
  */
 export class ZMyzCardBody {
     render() {
-        return (h("div", { key: '445a0d9463e21e7e51df000bbd32b892d16db6f7' }, h("slot", { key: 'aff7823ed27e2055d2803a1a55a0be35cfbcebf5', name: "alert" }), h("slot", { key: '0f435dc867e63caadc313043006a97156ebe2dc3', name: "cover" })));
+        return (h("div", { key: 'bc6cdeae214e8d2a678b06affa36c464edc8f7ea' }, h("slot", { key: '6891036c0f1a98722edc901ea45042c0451831a3', name: "alert" }), h("slot", { key: '50357c351f505338ffb08cd3b0df6eb6619745e7', name: "cover" })));
     }
     static get is() { return "z-myz-card-body"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/snowflakes/myz/card/z-myz-card-cover/index.js

@@ -10,7 +10,7 @@ export class ZMyzCardCover {
         this.img = this.defaultimg;
     }
     render() {
-        return (h("img", { key: '3b84be44f2691dea2e073c4f941672de4febfb8c', class: this.faded && "faded", onError: this.hadleOnImageError.bind(this), alt: this.titolo, src: this.img }));
+        return (h("img", { key: 'b248cf088629c40f40cbd42695c8dd2ec93d92e0', class: this.faded && "faded", onError: this.hadleOnImageError.bind(this), alt: this.titolo, src: this.img }));
     }
     static get is() { return "z-myz-card-cover"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/snowflakes/myz/card/z-myz-card-dictionary/index.js

@@ -21,7 +21,7 @@ export class ZMyzCardDictionary {
         this.cardFlipped.emit(showBack);
     }
     render() {
-        return (h("div", { key: '27902c8b5de865c26c56ba38e245b9bad6edbd18' }, h("z-myz-card", { key: 'fc8095edfa2a7d59331977975e24af5fb6e35930' }, h("z-myz-card-header", { key: '66dd4738696aa8417d36de2bcd4e8b6957a5f5e2', titolo: this.name }), h("div", { key: '5f825ad42844b2e895f17516e7b090d3c5ce8a6c', class: `content ${this.flipped ? "flipped" : ""}` }, h("div", { key: 'f86a2a9e7378ba99b4eacf5c106f1a0dce5f4f96', class: "front" }, h("z-myz-card-body", { key: 'ca603d9fde5d8eef714dce707d6d7107d3211e4d' }, h("z-myz-card-cover", { key: '63381a0912ced7fd24ad16865417c4e1da993e77', slot: "cover", titolo: this.name, img: this.cover, faded: this.disabled })), h("z-button", { key: '0cdfdcd7c39064180d4ec16bd5c0beb4b82c6e8c', class: { "hide-info": this.hideinfobtn }, variant: ButtonVariant.SECONDARY, icon: "informationsource", size: ButtonSize.X_SMALL, onClick: () => this.flipCard(true), disabled: this.flipped }, this.flipbuttonlabel)), h("div", { key: 'ca62bad1d808d9f5fec3b620fa558c0a6ecea908', class: "back" }, h("slot", { key: '068e582536a203fbf6bbd56eeef4ede786b89d1c', name: "info" }))), h("slot", { key: '97fb9bea58f45f42d81ff5344f34a9acaba32639' }))));
+        return (h("div", { key: '75b18feaa0c930cafb3eeadfbd3a815acf629ad3' }, h("z-myz-card", { key: '069f6f457a1245042e32e1d79101f76d40a065bc' }, h("z-myz-card-header", { key: '7143e0aa8db6f3130778bb34c84f84074950a8ec', titolo: this.name }), h("div", { key: '9562c13fbd46a054f9a8a2a307803a62a3973462', class: `content ${this.flipped ? "flipped" : ""}` }, h("div", { key: '2887ee676e44064eaaa5ec96981b1d6f2ec75553', class: "front" }, h("z-myz-card-body", { key: '46a2ae89fb4aa4ff0283f6bd8315da9572bf9e12' }, h("z-myz-card-cover", { key: '15ae6368e0adee0b691acae69456ca57151f22e5', slot: "cover", titolo: this.name, img: this.cover, faded: this.disabled })), h("z-button", { key: 'c8c0a403c084f72c934fb4c9c4a171bec8cf7cdd', class: { "hide-info": this.hideinfobtn }, variant: ButtonVariant.SECONDARY, icon: "informationsource", size: ButtonSize.X_SMALL, onClick: () => this.flipCard(true), disabled: this.flipped }, this.flipbuttonlabel)), h("div", { key: '5923095048d52d5c2ac78b4074e4e876468e06b0', class: "back" }, h("slot", { key: '4e934ba81c365e10e411fd758edfad1593642bb0', name: "info" }))), h("slot", { key: '211875e202f745c2e4d44c90858c3edc878e762b' }))));
     }
     static get is() { return "z-myz-card-dictionary"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/snowflakes/myz/card/z-myz-card-footer/index.js

@@ -59,7 +59,7 @@ export class ZMyzCardFooter {
         return this.host.querySelector("[slot=list] > li a");
     }
     render() {
-        return (h("div", { key: '3f351c6ae37e9756acb54ba18a33141902b36f66', class: Object.assign(Object.assign({}, this.retrieveClass()), { wrapper: true }) }, h("footer", { key: 'a7813aa007cc2a85dbb2b14cfc26fc174e49929d', class: this.retrieveClass(), onTransitionEnd: (e) => this.footerTransitionHandler(e) }, h("span", { key: 'ab1b726546099b8f5ac53294e9ecfefb8501cf8a', class: "toggle" }, h("slot", { key: 'acda20d4eb36305f614d74aa930131f8f4ecd270', name: "toggle" })), this.titolo && h("p", { class: { "custom-content": this.customContent } }, this.titolo), h("div", { key: '0f090b00007fa5b7f5fe6b7d9553e83449d0a11a', class: { "content": true, "custom-content": this.customContent } }, h("div", { key: '4f9c2e93e4e73f38dd9012b8a7e12be58ed506f7' }, h("p", { key: '342ce9c1c2a3b0d8eb0a585b84933441bccc044b', class: "authors", ref: (el) => (this.ellipsisAuthors = el) }, h("span", { key: '0c7fbe530be3eae718701f62bcfc190cfe1c3cbe', title: this.getTitleAuthors() }, h("span", { key: 'c6f1cd41b9353bbb39eb2a0f3a92664c05cb45d9', "aria-description": "Autori", class: "bold" }, this.autori))), h("p", { key: '8f5930ae90e38554151c10e5996014103f6fae6a', class: "year-isbn" }, h("span", { key: '18ebc65de360d4fdbc09a31f1e35fb07af7930d0', class: "isbn" }, h("span", { key: '25b8d2bf3bd332132b28f16b72ad81ee870a0202' }, h("span", { key: '7ba427f38f89b31f0228c09419281188d9f0e6a9', "aria-description": "ISBN edizione cartacea", class: "bold" }, this.isbn), " ", "(ed. cartacea)")))), h("div", { key: '1b553a8af97ebf9035a3411dbefc34db332ae3bb', class: `slot-handler ${this.isOpen ? "visible" : "hidden"}` }, h("slot", { key: 'e38a67048f019687d6b0a40b84ccdf0075adf98a', name: "list" })))), this.customContent && h("slot", { name: "content" })));
+        return (h("div", { key: '5dd8a1450395437b275fb926b09da03549915574', class: Object.assign(Object.assign({}, this.retrieveClass()), { wrapper: true }) }, h("footer", { key: '7b7e36ef2959885e4a560982cb7e08ac04818780', class: this.retrieveClass(), onTransitionEnd: (e) => this.footerTransitionHandler(e) }, h("span", { key: '1c40adf2f5d502c07c9376b63a8698d4667db396', class: "toggle" }, h("slot", { key: 'bd6af616f75d683d7be56058acc8b73b3bf93df6', name: "toggle" })), this.titolo && h("p", { class: { "custom-content": this.customContent } }, this.titolo), h("div", { key: '65e8bf56114cffbd456848ee1f8d1114e6e5080a', class: { "content": true, "custom-content": this.customContent } }, h("div", { key: '66e9bc72b76b51fd62b480fdcd79fb1275fa6025' }, h("p", { key: '3ed9294e4344921197fab0e6514060c44fbb1e1b', class: "authors", ref: (el) => (this.ellipsisAuthors = el) }, h("span", { key: '59377aadd8b9390fe356ef2b43c19deba9215ef8', title: this.getTitleAuthors() }, h("span", { key: 'ee5c8a2ae408e4e5188dc446155c9aeb718166d4', "aria-description": "Autori", class: "bold" }, this.autori))), h("p", { key: 'e18fb80f72dcc4167f9f3a9b01125bee192d93c4', class: "year-isbn" }, h("span", { key: '2bd10075dbcad13130986d76b0a1876b83c38a3e', class: "isbn" }, h("span", { key: '0db0267195bbac8406e70f4476b5f47063fe94b5' }, h("span", { key: '2353a8330af27b7cb67b581867684fd8038aa482', "aria-description": "ISBN edizione cartacea", class: "bold" }, this.isbn), " ", "(ed. cartacea)")))), h("div", { key: 'bcd81eae284110276be84b0493386f50280714bb', class: `slot-handler ${this.isOpen ? "visible" : "hidden"}` }, h("slot", { key: '74920df025462ca9464bbe269036a5c72a1b239e', name: "list" })))), this.customContent && h("slot", { name: "content" })));
     }
     static get is() { return "z-myz-card-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/snowflakes/myz/card/z-myz-card-footer-sections/index.js

@@ -5,7 +5,7 @@ import { h } from "@stencil/core";
  */
 export class ZMyzCardFooterSections {
     render() {
-        return (h("div", { key: '62c6d04f17701a66638885f241c6cee08411eb45' }, h("footer", { key: '935193a38295ec3b700b3c30a32aca8ed310b3ad' }, h("div", { key: '8c7af9e6f32e4353942a7831dea7f9875455e868', class: "top" }, h("slot", { key: '3a93460244816042d5a46a37909fe150b7dad333', name: "top" })), h("div", { key: '3bc02862cb0fcebbc1a763ba6f40e909cf39dbf1', class: "bottom" }, h("slot", { key: '600288fe385b411013722ca70809a8f841236563', name: "bottom" })))));
+        return (h("div", { key: 'ad5a5b4ce763cd24f68d02ec7b6e29b2545b94be' }, h("footer", { key: '85252bc9e7ac49dd5250160f31eda28d0cd9b56c' }, h("div", { key: '43fdf6d47836f0c6cddb8e6a2a807837642a46b6', class: "top" }, h("slot", { key: 'ec8b4121c2c3aa2975f19c8ba846689f5a0e0dea', name: "top" })), h("div", { key: 'a76056af1fba864d1dd3dbc7c4c6a109ee1e5e9d', class: "bottom" }, h("slot", { key: 'b1f51897fe2f8bac34c21b409c74003651bc641a', name: "bottom" })))));
     }
     static get is() { return "z-myz-card-footer-sections"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/snowflakes/myz/card/z-myz-card-header/index.js

@@ -30,7 +30,7 @@ export class ZMyzCardHeader {
         };
     }
     render() {
-        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" })));
+        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" })));
     }
     static get is() { return "z-myz-card-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/snowflakes/myz/card/z-myz-card-icon/index.js

@@ -6,7 +6,7 @@ export class ZMyzCardIcon {
         this.ariaLabel = "";
     }
     render() {
-        return (h("button", { key: 'e68fbaeb5c1d0522eebc83712a35599040eb6e29', disabled: this.isdisabled, "aria-label": this.ariaLabel }, h("span", { key: '221fd2a3d3b6a5f540488000659d405ac9b6cdb1' }, h("z-icon", { key: '244e5acf3ecd37c1db63f094e1783500814cdd6d', name: this.icon, width: 16, height: 16 }))));
+        return (h("button", { key: 'a847d6b5a8492bcd22ed033aeece36f7652dd5f2', disabled: this.isdisabled, "aria-label": this.ariaLabel }, h("span", { key: '0f7e06abb02b75cd18a905cceaaed460808c9685' }, h("z-icon", { key: '178e3cd6a28c2533c3443348bb635125cec14099', name: this.icon, width: 16, height: 16 }))));
     }
     static get is() { return "z-myz-card-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/snowflakes/myz/card/z-myz-card-info/index.js

@@ -114,7 +114,7 @@ export class ZMyzCardInfo {
         return (h("section", { ref: (el) => (this.offlineLicenseWrapper = el) }, h("span", { class: "license-heading" }, h("span", null, "Licenza offline"), this.setExpirationLicenseMessage("offline")), "Scadenza il ", h("b", null, this.cardData.offlineLicense.expiration), h("br", null), "Installazioni disponibili: ", h("b", null, this.cardData.offlineLicense.installations)));
     }
     render() {
-        return (h("div", { key: 'cdc99e22e6b891a80166dfd1c8fe5643687c6ac5' }, this.renderCloseIcon(), h("div", { key: '4a987a72789738cacaaf56874141b616b5121ee4', class: "content-wrapper", ref: (el) => (this.contentWrapper = el) }, this.renderGeneralSection(), this.renderTooltip(), this.renderOnlineLicenseSection(), this.renderOfflineLicenseSection()), h("div", { key: 'd0437dfce9bf76ddcdb5606f31da3c1c661a2e66', class: "cta-wrapper" }, h("slot", { key: '9d1b541e7d4e64e87ce6e2b08d98a7e96f0c1b7e' }))));
+        return (h("div", { key: 'e34d518208aaf68c4b793dbc7b019a8e4dd81b7f' }, this.renderCloseIcon(), h("div", { key: '649ceef05259db97c3e6d2277dd4397abb3ea45d', class: "content-wrapper", ref: (el) => (this.contentWrapper = el) }, this.renderGeneralSection(), this.renderTooltip(), this.renderOnlineLicenseSection(), this.renderOfflineLicenseSection()), h("div", { key: '66876539093110aa88efdb94aab18ffccf19f8c1', class: "cta-wrapper" }, h("slot", { key: '13a47c231d3685a33693e88841d92277b763a3f2' }))));
     }
     static get is() { return "z-myz-card-info"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/snowflakes/myz/card/z-myz-card-list/index.js

@@ -23,7 +23,7 @@ export class ZMyzCardList {
         });
     }
     render() {
-        return h("ul", { key: 'd233563583f4c1de64348fee709013c5a48781ca' }, this.renderList(JSON.parse(this.listdata)));
+        return h("ul", { key: '1ab3695f896cb1c963751a88e9513b90678aea47' }, this.renderList(JSON.parse(this.listdata)));
     }
     static get is() { return "z-myz-card-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/snowflakes/myz/list/z-myz-list/index.js

@@ -17,7 +17,7 @@ export class ZMyzList {
     }
     render() {
         const lastElem = this.list ? this.list.length - 1 : -1;
-        return (h("ul", { key: '9cf88d3a10f5a2239690c9b548ba18e2a21f4285' }, this.list &&
+        return (h("ul", { key: '8441b9ea072bc8d0e77ef66cbdcc6a71dc37cfca' }, this.list &&
             this.list.map((bean, i) => (h("z-myz-list-item", { listitemid: bean.listitemid, text: bean.text, link: bean.link, linktarget: bean.linktarget, icon: bean.icon, underlined: lastElem != i })))));
     }
     static get is() { return "z-myz-list"; }

package/dist/collection/snowflakes/myz/pocket/z-messages-pocket/index.js

@@ -34,7 +34,7 @@ export class ZMessagesPocket {
         return (h("z-pocket-body", { pocketid: this.pocketid }, h("div", { class: "body" }, h("slot", null)), h("div", { class: "gradient" })));
     }
     render() {
-        return (h("z-pocket", { key: '3aefef3d845cb5f672ed037667da8d59bf2355dd', pocketid: this.pocketid, status: this.status, class: this.status }, this.renderHeader(), this.renderBody()));
+        return (h("z-pocket", { key: '2bf2ce854eb809ffe7cc0b64d071e6926d08814c', pocketid: this.pocketid, status: this.status, class: this.status }, this.renderHeader(), this.renderBody()));
     }
     static get is() { return "z-messages-pocket"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/snowflakes/myz/pocket/z-pocket/index.js

@@ -54,7 +54,7 @@ export class ZPocket {
         }
     }
     render() {
-        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' })))));
+        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' })))));
     }
     static get is() { return "z-pocket"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/snowflakes/myz/pocket/z-pocket-body/index.js

@@ -14,7 +14,7 @@ export class ZPocketBody {
         }
     }
     render() {
-        return (h("main", { key: 'a21e5307e4af8970761af2f04d1344997e171b48', class: this.status }, h("slot", { key: 'c6b38fb56dbca9e8cdb03acfb601f32822312fee' })));
+        return (h("main", { key: 'cd660568916f4384dc815a3c0067a579c217fa33', class: this.status }, h("slot", { key: '3dd94db83f10a36a3656914a90ca571bd088fc6d' })));
     }
     static get is() { return "z-pocket-body"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/snowflakes/myz/pocket/z-pocket-header/index.js

@@ -23,7 +23,7 @@ export class ZPocketHeader {
         mc.on("pandown", () => this.emitPocketHeaderPan("down"));
     }
     render() {
-        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' })));
+        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' })));
     }
     static get is() { return "z-pocket-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/snowflakes/myz/pocket/z-pocket-message/index.js

@@ -5,7 +5,7 @@ import { h } from "@stencil/core";
  */
 export class ZPocketMessage {
     render() {
-        return (h("div", { key: 'fd2ad4b6202ff5ec00783d54f10852f5afead5cc' }, h("z-icon", { key: 'a6872094ff69a350e72992874e641480ef1bd582', name: "exclamation-circle" }), h("div", { key: 'b9c7d36ea2c2f6beed7aaf98f409db7e37eff2d0', class: "content" }, h("slot", { key: '04b72c04be291ffc5690c162ed8bea07251346da' })), h("div", { key: 'b51c6836991f7f66a0e21968cefe81e49fda0043', class: "cta-wrapper" }, h("slot", { key: '944145d6af60175fc717951e1a8b5a03e533c2d8', name: "cta" }))));
+        return (h("div", { key: 'af350f4364cdc056efb2bfb7573f32aff6e1fb74' }, h("z-icon", { key: '978d77e166c93ff7dc66ce4488b9de335ad222f1', name: "exclamation-circle" }), h("div", { key: '8b2b15f096af975a001abc24f13145c19a93df10', class: "content" }, h("slot", { key: 'dc4a2c27b657fa13e1ed27b095c31903f481dfb6' })), h("div", { key: '73f8485447c46858f416f8cf10c332808ee8a129', class: "cta-wrapper" }, h("slot", { key: '9b36b26758f23f527da634df4a115d0db6ca8b51', name: "cta" }))));
     }
     static get is() { return "z-pocket-message"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/snowflakes/myz/z-alert/index.js

@@ -7,7 +7,7 @@ export class ZAlert {
         this.type = undefined;
     }
     render() {
-        return (h("div", { key: '0e8d6f5868bf26d42ced73efef2393b2d0729543', class: this.type }, h("slot", { key: '104f5e9e5f2b5cd5ed34a7e3f0ba56e14243a47b' })));
+        return (h("div", { key: '118a9d311dba051df5cb7fc1ad53a8e72fb0e5b0', class: this.type }, h("slot", { key: 'eec707ce1616abc18e015a7486f12dbc17e0c0eb' })));
     }
     static get is() { return "z-alert"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/snowflakes/myz/z-otp/index.js

@@ -14,7 +14,7 @@ export class ZOtp {
         this.otpRef = [...Array(this.inputNum)];
     }
     render() {
-        return (h("div", { key: 'ed4894a5e991ebb5e870ab0a1f54c75217721c5c', class: "otp-container" }, h("div", { key: '1bef4aae264fb80813a5b7b71412eb638c17736d', class: "digits-container" }, this.otp.map((_val, i) => (h("input", { class: this.status == InputStatus.ERROR ? "error" : null, onKeyDown: (e) => {
+        return (h("div", { key: '52fb020b2ebcd1d55b61a700c42b9292e23e88d7', class: "otp-container" }, h("div", { key: 'fd1c71d7029342f745a0adee68b79b5440c01927', class: "digits-container" }, this.otp.map((_val, i) => (h("input", { class: this.status == InputStatus.ERROR ? "error" : null, onKeyDown: (e) => {
                 if (e.keyCode > 47) {
                     this.otpRef[i].value = "";
                 }
@@ -25,7 +25,7 @@ export class ZOtp {
             }, onInput: (e) => {
                 this.otp[i] = e.target.value;
                 this.emitInputChange(this.otp.join(""));
-            }, type: "text", minlength: "1", maxlength: "1", autoComplete: "off", ref: (el) => (this.otpRef[i] = el) })))), h("z-input-message", { key: '6b40b61f792ad0f1789a44d27b51657e2f446a8b', message: this.message, status: this.status })));
+            }, type: "text", minlength: "1", maxlength: "1", autoComplete: "off", ref: (el) => (this.otpRef[i] = el) })))), h("z-input-message", { key: '2eb46b8273e78ce177f352d50441493e5ac260e8', message: this.message, status: this.status })));
     }
     static get is() { return "z-otp"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/index.d.ts

@@ -27,8 +27,6 @@ export { ZChip as ZChip } from '../types/components/buttons/z-chip/index';
 export { defineCustomElement as defineCustomElementZChip } from './z-chip';
 export { ZCombobox as ZCombobox } from '../types/components/inputs/z-combobox/index';
 export { defineCustomElement as defineCustomElementZCombobox } from './z-combobox';
-export { ZContextualMenu as ZContextualMenu } from '../types/components/z-contextual-menu/index';
-export { defineCustomElement as defineCustomElementZContextualMenu } from './z-contextual-menu';
 export { ZCoverHero as ZCoverHero } from '../types/components/z-cover-hero/index';
 export { defineCustomElement as defineCustomElementZCoverHero } from './z-cover-hero';
 export { ZDatePicker as ZDatePicker } from '../types/components/date-picker/z-date-picker/index';
@@ -97,10 +95,6 @@ export { ZMyzList as ZMyzList } from '../types/snowflakes/myz/list/z-myz-list/in
 export { defineCustomElement as defineCustomElementZMyzList } from './z-myz-list';
 export { ZMyzListItem as ZMyzListItem } from '../types/snowflakes/myz/list/z-myz-list-item/index';
 export { defineCustomElement as defineCustomElementZMyzListItem } from './z-myz-list-item';
-export { ZNavigationTab as ZNavigationTab } from '../types/deprecated/z-navigation-tab/index';
-export { defineCustomElement as defineCustomElementZNavigationTab } from './z-navigation-tab';
-export { ZNavigationTabLink as ZNavigationTabLink } from '../types/deprecated/z-navigation-tab-link/index';
-export { defineCustomElement as defineCustomElementZNavigationTabLink } from './z-navigation-tab-link';
 export { ZNavigationTabs as ZNavigationTabs } from '../types/components/navigation/z-navigation-tabs/index';
 export { defineCustomElement as defineCustomElementZNavigationTabs } from './z-navigation-tabs';
 export { ZNotification as ZNotification } from '../types/components/notification/z-notification/index';
@@ -141,28 +135,6 @@ export { ZStepperItem as ZStepperItem } from '../types/components/indicators/z-s
 export { defineCustomElement as defineCustomElementZStepperItem } from './z-stepper-item';
 export { ZTable as ZTable } from '../types/components/table/z-table/index';
 export { defineCustomElement as defineCustomElementZTable } from './z-table';
-export { ZTableBody as ZTableBody } from '../types/deprecated/z-table-deprecated/z-table-body/index';
-export { defineCustomElement as defineCustomElementZTableBody } from './z-table-body';
-export { ZTableCell as ZTableCell } from '../types/deprecated/z-table-deprecated/z-table-cell/index';
-export { defineCustomElement as defineCustomElementZTableCell } from './z-table-cell';
-export { ZTableDeprecated as ZTableDeprecated } from '../types/deprecated/z-table-deprecated/z-table-deprecated/index';
-export { defineCustomElement as defineCustomElementZTableDeprecated } from './z-table-deprecated';
-export { ZTableEmptyBox as ZTableEmptyBox } from '../types/deprecated/z-table-deprecated/z-table-empty-box/index';
-export { defineCustomElement as defineCustomElementZTableEmptyBox } from './z-table-empty-box';
-export { ZTableExpandedRow as ZTableExpandedRow } from '../types/deprecated/z-table-deprecated/z-table-expanded-row/index';
-export { defineCustomElement as defineCustomElementZTableExpandedRow } from './z-table-expanded-row';
-export { ZTableFooter as ZTableFooter } from '../types/deprecated/z-table-deprecated/z-table-footer/index';
-export { defineCustomElement as defineCustomElementZTableFooter } from './z-table-footer';
-export { ZTableHead as ZTableHead } from '../types/deprecated/z-table-deprecated/z-table-head/index';
-export { defineCustomElement as defineCustomElementZTableHead } from './z-table-head';
-export { ZTableHeader as ZTableHeader } from '../types/deprecated/z-table-deprecated/z-table-header/index';
-export { defineCustomElement as defineCustomElementZTableHeader } from './z-table-header';
-export { ZTableHeaderRow as ZTableHeaderRow } from '../types/deprecated/z-table-deprecated/z-table-header-row/index';
-export { defineCustomElement as defineCustomElementZTableHeaderRow } from './z-table-header-row';
-export { ZTableRow as ZTableRow } from '../types/deprecated/z-table-deprecated/z-table-row/index';
-export { defineCustomElement as defineCustomElementZTableRow } from './z-table-row';
-export { ZTableStickyFooter as ZTableStickyFooter } from '../types/deprecated/z-table-deprecated/z-table-sticky-footer/index';
-export { defineCustomElement as defineCustomElementZTableStickyFooter } from './z-table-sticky-footer';
 export { ZTag as ZTag } from '../types/components/z-tag/index';
 export { defineCustomElement as defineCustomElementZTag } from './z-tag';
 export { ZTbody as ZTbody } from '../types/components/table/z-tbody/index';

package/dist/components/index.js

@@ -15,7 +15,6 @@ export { ZCard, defineCustomElement as defineCustomElementZCard } from './z-card
 export { ZCarousel, defineCustomElement as defineCustomElementZCarousel } from './z-carousel.js';
 export { ZChip, defineCustomElement as defineCustomElementZChip } from './z-chip.js';
 export { ZCombobox, defineCustomElement as defineCustomElementZCombobox } from './z-combobox.js';
-export { ZContextualMenu, defineCustomElement as defineCustomElementZContextualMenu } from './z-contextual-menu.js';
 export { ZCoverHero, defineCustomElement as defineCustomElementZCoverHero } from './z-cover-hero.js';
 export { ZDatePicker, defineCustomElement as defineCustomElementZDatePicker } from './z-date-picker.js';
 export { ZDivider, defineCustomElement as defineCustomElementZDivider } from './z-divider.js';
@@ -50,8 +49,6 @@ export { ZMyzCardInfo, defineCustomElement as defineCustomElementZMyzCardInfo }
 export { ZMyzCardList, defineCustomElement as defineCustomElementZMyzCardList } from './z-myz-card-list.js';
 export { ZMyzList, defineCustomElement as defineCustomElementZMyzList } from './z-myz-list.js';
 export { ZMyzListItem, defineCustomElement as defineCustomElementZMyzListItem } from './z-myz-list-item.js';
-export { ZNavigationTab, defineCustomElement as defineCustomElementZNavigationTab } from './z-navigation-tab.js';
-export { ZNavigationTabLink, defineCustomElement as defineCustomElementZNavigationTabLink } from './z-navigation-tab-link.js';
 export { ZNavigationTabs, defineCustomElement as defineCustomElementZNavigationTabs } from './z-navigation-tabs.js';
 export { ZNotification, defineCustomElement as defineCustomElementZNotification } from './z-notification.js';
 export { ZOffcanvas, defineCustomElement as defineCustomElementZOffcanvas } from './z-offcanvas.js';
@@ -72,17 +69,6 @@ export { ZSlideshow, defineCustomElement as defineCustomElementZSlideshow } from
 export { ZStepper, defineCustomElement as defineCustomElementZStepper } from './z-stepper.js';
 export { ZStepperItem, defineCustomElement as defineCustomElementZStepperItem } from './z-stepper-item.js';
 export { ZTable, defineCustomElement as defineCustomElementZTable } from './z-table.js';
-export { ZTableBody, defineCustomElement as defineCustomElementZTableBody } from './z-table-body.js';
-export { ZTableCell, defineCustomElement as defineCustomElementZTableCell } from './z-table-cell.js';
-export { ZTableDeprecated, defineCustomElement as defineCustomElementZTableDeprecated } from './z-table-deprecated.js';
-export { ZTableEmptyBox, defineCustomElement as defineCustomElementZTableEmptyBox } from './z-table-empty-box.js';
-export { ZTableExpandedRow, defineCustomElement as defineCustomElementZTableExpandedRow } from './z-table-expanded-row.js';
-export { ZTableFooter, defineCustomElement as defineCustomElementZTableFooter } from './z-table-footer.js';
-export { ZTableHead, defineCustomElement as defineCustomElementZTableHead } from './z-table-head.js';
-export { ZTableHeader, defineCustomElement as defineCustomElementZTableHeader } from './z-table-header.js';
-export { ZTableHeaderRow, defineCustomElement as defineCustomElementZTableHeaderRow } from './z-table-header-row.js';
-export { ZTableRow, defineCustomElement as defineCustomElementZTableRow } from './z-table-row.js';
-export { ZTableStickyFooter, defineCustomElement as defineCustomElementZTableStickyFooter } from './z-table-sticky-footer.js';
 export { ZTag, defineCustomElement as defineCustomElementZTag } from './z-tag.js';
 export { ZTbody, defineCustomElement as defineCustomElementZTbody } from './z-tbody.js';
 export { ZTd, defineCustomElement as defineCustomElementZTd } from './z-td.js';

package/dist/components/index.js.map

@@ -1 +1 @@
-{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAEM,KAAK,GAAG;IACZ,WAAW;;;;;","names":[],"sources":["src/index.ts"],"sourcesContent":["import {colorFromId} from \"./utils/utils\";\n\nconst UTILS = {\n  colorFromId,\n};\n\nexport {UTILS as Utils};\nexport * from \"./components\";\nexport * from \"./beans\";\n"],"version":3}
+{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAEM,KAAK,GAAG;IACZ,WAAW;;;;;","names":[],"sources":["src/index.ts"],"sourcesContent":["import {colorFromId} from \"./utils/utils\";\n\nconst UTILS = {\n  colorFromId,\n};\n\nexport {UTILS as Utils};\nexport * from \"./components\";\nexport * from \"./beans\";\n"],"version":3}

package/dist/components/index13.js

@@ -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,: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 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 ZListElementStyle0 = stylesCss;
 
 const ZListElement = /*@__PURE__*/ proxyCustomElement(class ZListElement extends HTMLElement {
@@ -44,7 +44,6 @@ 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";
@@ -63,12 +62,6 @@ 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) {
@@ -131,7 +124,7 @@ const ZListElement = /*@__PURE__*/ proxyCustomElement(class ZListElement extends
         }
     }
     render() {
-        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 }))));
+        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 }))));
     }
     get host() { return this; }
     static get style() { return ZListElementStyle0; }
@@ -147,7 +140,6 @@ 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

@@ -1 +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>&bull;&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}
+{"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>&bull;&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}

package/dist/components/index16.js

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

package/dist/components/index17.js

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

package/dist/components/index18.js

@@ -17,7 +17,7 @@ const ZMyzCardCover = /*@__PURE__*/ proxyCustomElement(class ZMyzCardCover exten
         this.img = this.defaultimg;
     }
     render() {
-        return (h("img", { key: '3b84be44f2691dea2e073c4f941672de4febfb8c', class: this.faded && "faded", onError: this.hadleOnImageError.bind(this), alt: this.titolo, src: this.img }));
+        return (h("img", { key: 'b248cf088629c40f40cbd42695c8dd2ec93d92e0', 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

@@ -34,7 +34,7 @@ const ZMyzCardHeader = /*@__PURE__*/ proxyCustomElement(class ZMyzCardHeader ext
         };
     }
     render() {
-        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" })));
+        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" })));
     }
     static get style() { return ZMyzCardHeaderStyle0; }
 }, [1, "z-myz-card-header", {