@zanichelli/albe-web-components 19.2.3-RC1 → 19.2.3

package/dist/components/z-myz-card-icon.js

@@ -1 +1,49 @@
-import{proxyCustomElement as r,HTMLElement as a,h as e,transformTag as o}from"@stencil/core/internal/client";import{d as t}from"./index3.js";const n=r(class extends a{constructor(r){super(),!1!==r&&this.__registerHost(),this.__attachShadow(),this.isdisabled=!1,this.ariaLabel=""}render(){return e("button",{key:"8a82157a9baa9383b9617bb5f2579ecbfab25d7a",disabled:this.isdisabled,"aria-label":this.ariaLabel},e("span",{key:"4b6df20cba84e9d9a0aab92d49cff430fd498980"},e("z-icon",{key:"07fe7425dc9a9d95a6b87bc79bcb1d0c927ca859",name:this.icon,width:16,height:16})))}static get style(){return"button{display:flex;width:42px;width:calc(var(--space-unit) * 6);height:calc(var(--space-unit) * 5);height:calc(var(--space-unit) * 6);align-items:center;justify-content:center;padding:0;border:none;border-left:var(--border-size-medium) solid var(--color-surface03);margin:0;background:none;border-radius:0 var(--border-radius) 0 0;color:var(--color-primary01);cursor:pointer;fill:var(--color-primary01);outline:none}button:active,button:focus{color:var(--blue700);fill:var(--blue700)}button>span{display:flex;width:28px;height:28px;align-items:center;justify-content:center;border:0;border-radius:var(--border-radius)}button:hover>span{background:var(--color-primary03)}button:focus>span{background:var(--color-surface01);border-radius:var(--border-radius);box-shadow:var(--shadow-focus-primary)}button:active>span{background:var(--color-surface01);border-radius:var(--border-radius);box-shadow:var(--shadow-2)}button:disabled{cursor:not-allowed}button:disabled>span{background:none;box-shadow:var(--shadow-0);pointer-events:none}button:disabled>span>z-icon{fill:var(--color-surface03)}button::-moz-focus-inner{border:0}"}},[1,"z-myz-card-icon",{icon:[1],isdisabled:[4],ariaLabel:[1,"aria-label"]}]),i=n,s=function(){"undefined"!=typeof customElements&&["z-myz-card-icon","z-icon"].forEach((r=>{switch(r){case"z-myz-card-icon":customElements.get(o(r))||customElements.define(o(r),n);break;case"z-icon":customElements.get(o(r))||t()}}))};export{i as ZMyzCardIcon,s as defineCustomElement}
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './index10.js';
+
+const stylesCss = "button{display:flex;width:42px;width:calc(var(--space-unit) * 6);height:calc(var(--space-unit) * 5);height:calc(var(--space-unit) * 6);align-items:center;justify-content:center;padding:0;border:none;border-left:var(--border-size-medium) solid var(--color-surface03);margin:0;background:none;border-radius:0 var(--border-radius) 0 0;color:var(--color-primary01);cursor:pointer;fill:var(--color-primary01);outline:none}button:active,button:focus{color:var(--blue700);fill:var(--blue700)}button>span{display:flex;width:28px;height:28px;align-items:center;justify-content:center;border:0;border-radius:var(--border-radius)}button:hover>span{background:var(--color-primary03)}button:focus>span{background:var(--color-surface01);border-radius:var(--border-radius);box-shadow:var(--shadow-focus-primary)}button:active>span{background:var(--color-surface01);border-radius:var(--border-radius);box-shadow:var(--shadow-2)}button:disabled{cursor:not-allowed}button:disabled>span{background:none;box-shadow:var(--shadow-0);pointer-events:none}button:disabled>span>z-icon{fill:var(--color-surface03)}button::-moz-focus-inner{border:0}";
+const ZMyzCardIconStyle0 = stylesCss;
+
+const ZMyzCardIcon$1 = /*@__PURE__*/ proxyCustomElement(class ZMyzCardIcon extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.icon = undefined;
+        this.isdisabled = false;
+        this.ariaLabel = "";
+    }
+    render() {
+        return (h("button", { key: '6c7bbcbde5d35a54fafe344f2c1e4be78f8b2d29', disabled: this.isdisabled, "aria-label": this.ariaLabel }, h("span", { key: '81c38638c37f57c5e68e8d2db9f16db83752bc15' }, h("z-icon", { key: '8d1b8d34c61411f7079c4a492294fde70cd923e2', name: this.icon, width: 16, height: 16 }))));
+    }
+    static get style() { return ZMyzCardIconStyle0; }
+}, [1, "z-myz-card-icon", {
+        "icon": [1],
+        "isdisabled": [4],
+        "ariaLabel": [1, "aria-label"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["z-myz-card-icon", "z-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "z-myz-card-icon":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZMyzCardIcon$1);
+            }
+            break;
+        case "z-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const ZMyzCardIcon = ZMyzCardIcon$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZMyzCardIcon, defineCustomElement };
+
+//# sourceMappingURL=z-myz-card-icon.js.map

package/dist/components/z-myz-card-icon.js.map

@@ -0,0 +1 @@
+{"file":"z-myz-card-icon.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,mmCAAmmC,CAAC;AACtnC,2BAAe,SAAS;;MCMXA,cAAY;;;;;;0BAOV,KAAK;yBAIN,EAAE;;IAEd,MAAM;QACJ,QACE,+DACE,QAAQ,EAAE,IAAI,CAAC,UAAU,gBACb,IAAI,CAAC,SAAS,IAE1B,+DACE,+DACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACG,CACA,EACT;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZMyzCardIcon"],"sources":["src/snowflakes/myz/card/z-myz-card-icon/styles.css?tag=z-myz-card-icon&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-icon/index.tsx"],"sourcesContent":["button {\n  display: flex;\n  width: 42px;\n  width: calc(var(--space-unit) * 6);\n  height: calc(var(--space-unit) * 5);\n  height: calc(var(--space-unit) * 6);\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  border-left: var(--border-size-medium) solid var(--color-surface03);\n  margin: 0;\n  background: none;\n  border-radius: 0 var(--border-radius) 0 0;\n  color: var(--color-primary01);\n  cursor: pointer;\n  fill: var(--color-primary01);\n  outline: none;\n}\n\nbutton:active,\nbutton:focus {\n  color: var(--blue700);\n  fill: var(--blue700);\n}\n\nbutton > span {\n  display: flex;\n  width: 28px;\n  height: 28px;\n  align-items: center;\n  justify-content: center;\n  border: 0;\n  border-radius: var(--border-radius);\n}\n\nbutton:hover > span {\n  background: var(--color-primary03);\n}\n\nbutton:focus > span {\n  background: var(--color-surface01);\n  border-radius: var(--border-radius);\n  box-shadow: var(--shadow-focus-primary);\n}\n\nbutton:active > span {\n  background: var(--color-surface01);\n  border-radius: var(--border-radius);\n  box-shadow: var(--shadow-2);\n}\n\nbutton:disabled {\n  cursor: not-allowed;\n}\n\nbutton:disabled > span {\n  background: none;\n  box-shadow: var(--shadow-0);\n  pointer-events: none;\n}\n\nbutton:disabled > span > z-icon {\n  fill: var(--color-surface03);\n}\n\nbutton::-moz-focus-inner {\n  border: 0;\n}\n","import {Component, Prop, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-myz-card-icon\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardIcon {\n  /** icon name */\n  @Prop()\n  icon: string;\n\n  /** disabled status flag */\n  @Prop()\n  isdisabled = false;\n\n  /** description of the icon*/\n  @Prop()\n  ariaLabel = \"\";\n\n  render(): HTMLButtonElement {\n    return (\n      <button\n        disabled={this.isdisabled}\n        aria-label={this.ariaLabel}\n      >\n        <span>\n          <z-icon\n            name={this.icon}\n            width={16}\n            height={16}\n          />\n        </span>\n      </button>\n    );\n  }\n}\n"],"version":3}

package/dist/components/z-myz-card-info.js

@@ -1 +1,162 @@
-import{proxyCustomElement as i,HTMLElement as t,createEvent as e,h as n,transformTag as o}from"@stencil/core/internal/client";import{P as s}from"./index2.js";import{h as r}from"./utils.js";import{d as l}from"./index3.js";import{d as a}from"./index17.js";const d=i(class extends t{emitFlipCard(i=!1){this.flipCard.emit(i)}constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.flipCard=e(this,"flipCard",7),this.htmltabindex=0,this.hiddenContent=!1,this.tooltip=!1,this.emitFlipCard=this.emitFlipCard.bind(this)}componentWillLoad(){this.setStringOrArray()}componentWillUpdate(){this.setStringOrArray()}componentDidRender(){this.handleContentHeight()}handleContentHeight(){if(this.contentWrapper||this.infoWrapper){if(this.contentWrapper.scrollHeight>this.contentWrapper.offsetHeight||this.infoWrapper.scrollHeight>this.infoWrapper.offsetHeight)return this.infoWrapper.style.height=this.contentWrapper.offsetHeight-this.onlineLicenseWrapper.offsetHeight-this.offlineLicenseWrapper.offsetHeight+"px",void(this.hiddenContent=!0);this.hiddenContent=!1}else this.hiddenContent=!1}setStringOrArray(){this.cardData="string"==typeof this.data?JSON.parse(this.data):this.data}renderCloseIcon(){return n("z-icon",{name:"multiply-circled-filled",height:18,width:18,onClick:()=>this.emitFlipCard(!1),tabindex:this.htmltabindex,onKeyUp:i=>{r(i,this.emitFlipCard,!1)}})}renderGeneralSection(){var i,t;const e=null===(i=null==this?void 0:this.cardData)||void 0===i?void 0:i.title,o=null===(t=null==this?void 0:this.cardData)||void 0===t?void 0:t.description;return n("section",{class:"info-wrapper "+(this.hiddenContent?"hidden":""),onClick:()=>{this.hiddenContent&&(this.tooltip=!this.tooltip)},ref:i=>this.infoWrapper=i},this.renderAuthor(),this.renderYear(),e,n("br",null),o)}renderAuthor(){var i;const t=null===(i=null==this?void 0:this.cardData)||void 0===i?void 0:i.author;return t?n("span",null,"Autore: ",n("b",null,t),n("br",null)):null}renderYear(){var i;const t=null===(i=null==this?void 0:this.cardData)||void 0===i?void 0:i.year;return t?n("span",null,"Anno: ",n("b",null,t),n("br",null)):null}renderTooltip(){if(!this.tooltip)return;if(!this.cardData)return;const{title:i,year:t,author:e,description:o}=this.cardData;return n("z-popover",{position:s.RIGHT,onClick:()=>this.tooltip=!1},`${i} ${t} ${e} ${o}`)}setExpirationLicenseMessage(i){return"online"===i&&this.cardData.onlineLicense.expired||"offline"===i&&this.cardData.offlineLicense.expired?n("span",{class:"expired"},"SCADUTA"):"online"===i&&this.cardData.onlineLicense.expiring||"offline"===i&&this.cardData.offlineLicense.expiring?n("span",{class:"expiring"},"IN SCADENZA"):void 0}renderOnlineLicenseSection(){var i;if(null===(i=null==this?void 0:this.cardData)||void 0===i?void 0:i.onlineLicense)return n("section",{ref:i=>this.onlineLicenseWrapper=i},n("span",{class:"license-heading"},n("span",null,"Licenza online"),this.setExpirationLicenseMessage("online")),"Scadenza il ",n("b",null,this.cardData.onlineLicense.expiration),n("br",null))}renderOfflineLicenseSection(){var i;if(null===(i=null==this?void 0:this.cardData)||void 0===i?void 0:i.offlineLicense)return n("section",{ref:i=>this.offlineLicenseWrapper=i},n("span",{class:"license-heading"},n("span",null,"Licenza offline"),this.setExpirationLicenseMessage("offline")),"Scadenza il ",n("b",null,this.cardData.offlineLicense.expiration),n("br",null),"Installazioni disponibili: ",n("b",null,this.cardData.offlineLicense.installations))}render(){return n("div",{key:"91c9865eabec4c2dfc4f0bdb3883517944b5dc07"},this.renderCloseIcon(),n("div",{key:"d6b6744fd8a9b26344fe1e502bd774bafca7de5c",class:"content-wrapper",ref:i=>this.contentWrapper=i},this.renderGeneralSection(),this.renderTooltip(),this.renderOnlineLicenseSection(),this.renderOfflineLicenseSection()),n("div",{key:"45453dc08188aa77542934ffc12d74f64efd10b4",class:"cta-wrapper"},n("slot",{key:"978e72fdf752608e8ac8b0bf4895d66a9eb208c1"})))}static get style(){return':host{width:100%;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{position:relative;display:grid;width:calc(100% + calc(var(--space-unit) * 2));height:402px;box-sizing:border-box;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 3);border:var(--border-size-small) solid var(--color-primary01);margin-left:calc(-1 * var(--space-unit));background:var(--color-surface01);border-radius:0;box-shadow:0 2px 4px 0 rgb(66 69 72 / 35%)}:host>div>z-icon{position:absolute;top:var(--space-unit);right:var(--space-unit);cursor:pointer;fill:var(--color-primary01)}:host>div>div.cta-wrapper{display:flex;flex-flow:column nowrap;align-self:end;justify-content:space-between}:host>div>div.content-wrapper{position:relative;overflow:hidden;align-self:stretch}:host>div>div.content-wrapper>section{box-sizing:border-box;padding:var(--space-unit) 0;border-bottom:var(--border-size-small) solid var(--color-surface04);color:var(--color-surface05);font-size:14px;line-height:20px}:host>div>div.content-wrapper>section:last-child{border-bottom:none}:host>div>div.content-wrapper>section.info-wrapper{position:relative;overflow:hidden;box-sizing:border-box}:host>div>div.content-wrapper>section.info-wrapper.hidden::after{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg, rgb(255 0 0 / 0%), rgb(255 0 0 / 0%) 60%, white);content:"";pointer-events:none}:host>div>div.content-wrapper>section>span.license-heading{display:flex;justify-content:space-between}:host>div>div.content-wrapper>section>span.license-heading>span.expired{color:var(--color-primary01);font-size:12px;font-weight:600}:host>div>div.content-wrapper>section>span.license-heading>span.expiring{color:var(--color-hover-warning);font-size:12px;font-weight:600}:host>div>div.content-wrapper>z-popover{position:absolute;top:0;left:calc(var(--space-unit) * 4)}'}},[257,"z-myz-card-info",{data:[1],htmltabindex:[2],hiddenContent:[32],tooltip:[32]}]),c=d,h=function(){"undefined"!=typeof customElements&&["z-myz-card-info","z-icon","z-popover"].forEach((i=>{switch(i){case"z-myz-card-info":customElements.get(o(i))||customElements.define(o(i),d);break;case"z-icon":customElements.get(o(i))||l();break;case"z-popover":customElements.get(o(i))||a()}}))};export{c as ZMyzCardInfo,h as defineCustomElement}
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { P as PopoverPosition } from './index2.js';
+import { h as handleKeyboardSubmit } from './utils.js';
+import { d as defineCustomElement$3 } from './index10.js';
+import { d as defineCustomElement$2 } from './index24.js';
+
+const stylesCss = ":host{width:100%;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{position:relative;display:grid;width:calc(100% + calc(var(--space-unit) * 2));height:402px;box-sizing:border-box;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 3);border:var(--border-size-small) solid var(--color-primary01);margin-left:calc(-1 * var(--space-unit));background:var(--color-surface01);border-radius:0;box-shadow:0 2px 4px 0 rgb(66 69 72 / 35%)}:host>div>z-icon{position:absolute;top:var(--space-unit);right:var(--space-unit);cursor:pointer;fill:var(--color-primary01)}:host>div>div.cta-wrapper{display:flex;flex-flow:column nowrap;align-self:end;justify-content:space-between}:host>div>div.content-wrapper{position:relative;overflow:hidden;align-self:stretch}:host>div>div.content-wrapper>section{box-sizing:border-box;padding:var(--space-unit) 0;border-bottom:var(--border-size-small) solid var(--color-surface04);color:var(--color-surface05);font-size:14px;line-height:20px}:host>div>div.content-wrapper>section:last-child{border-bottom:none}:host>div>div.content-wrapper>section.info-wrapper{position:relative;overflow:hidden;box-sizing:border-box}:host>div>div.content-wrapper>section.info-wrapper.hidden::after{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg, rgb(255 0 0 / 0%), rgb(255 0 0 / 0%) 60%, white);content:\"\";pointer-events:none}:host>div>div.content-wrapper>section>span.license-heading{display:flex;justify-content:space-between}:host>div>div.content-wrapper>section>span.license-heading>span.expired{color:var(--color-primary01);font-size:12px;font-weight:600}:host>div>div.content-wrapper>section>span.license-heading>span.expiring{color:var(--color-hover-warning);font-size:12px;font-weight:600}:host>div>div.content-wrapper>z-popover{position:absolute;top:0;left:calc(var(--space-unit) * 4)}";
+const ZMyzCardInfoStyle0 = stylesCss;
+
+const ZMyzCardInfo$1 = /*@__PURE__*/ proxyCustomElement(class ZMyzCardInfo extends HTMLElement {
+    emitFlipCard(showBack = false) {
+        this.flipCard.emit(showBack);
+    }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.flipCard = createEvent(this, "flipCard", 7);
+        this.data = undefined;
+        this.htmltabindex = 0;
+        this.hiddenContent = false;
+        this.tooltip = false;
+        this.emitFlipCard = this.emitFlipCard.bind(this);
+    }
+    componentWillLoad() {
+        this.setStringOrArray();
+    }
+    componentWillUpdate() {
+        this.setStringOrArray();
+    }
+    componentDidRender() {
+        this.handleContentHeight();
+    }
+    handleContentHeight() {
+        if (!this.contentWrapper && !this.infoWrapper) {
+            this.hiddenContent = false;
+            return;
+        }
+        if (this.contentWrapper.scrollHeight > this.contentWrapper.offsetHeight ||
+            this.infoWrapper.scrollHeight > this.infoWrapper.offsetHeight) {
+            const height = this.contentWrapper.offsetHeight -
+                this.onlineLicenseWrapper.offsetHeight -
+                this.offlineLicenseWrapper.offsetHeight;
+            this.infoWrapper.style.height = `${height}px`;
+            this.hiddenContent = true;
+            return;
+        }
+        this.hiddenContent = false;
+    }
+    setStringOrArray() {
+        if (typeof this.data === "string") {
+            this.cardData = JSON.parse(this.data);
+        }
+        else {
+            this.cardData = this.data;
+        }
+    }
+    renderCloseIcon() {
+        return (h("z-icon", { name: "multiply-circled-filled", height: 18, width: 18, onClick: () => this.emitFlipCard(false), tabindex: this.htmltabindex, onKeyUp: (e) => {
+                handleKeyboardSubmit(e, this.emitFlipCard, false);
+            } }));
+    }
+    renderGeneralSection() {
+        var _a, _b;
+        const title = (_a = this === null || this === void 0 ? void 0 : this.cardData) === null || _a === void 0 ? void 0 : _a.title;
+        const description = (_b = this === null || this === void 0 ? void 0 : this.cardData) === null || _b === void 0 ? void 0 : _b.description;
+        return (h("section", { class: `info-wrapper ${this.hiddenContent ? "hidden" : ""}`, onClick: () => {
+                if (this.hiddenContent) {
+                    this.tooltip = !this.tooltip;
+                }
+            }, ref: (el) => (this.infoWrapper = el) }, this.renderAuthor(), this.renderYear(), title, h("br", null), description));
+    }
+    renderAuthor() {
+        var _a;
+        const author = (_a = this === null || this === void 0 ? void 0 : this.cardData) === null || _a === void 0 ? void 0 : _a.author;
+        if (!author) {
+            return null;
+        }
+        return (h("span", null, "Autore: ", h("b", null, author), h("br", null)));
+    }
+    renderYear() {
+        var _a;
+        const year = (_a = this === null || this === void 0 ? void 0 : this.cardData) === null || _a === void 0 ? void 0 : _a.year;
+        if (!year) {
+            return null;
+        }
+        return (h("span", null, "Anno: ", h("b", null, year), h("br", null)));
+    }
+    renderTooltip() {
+        if (!this.tooltip) {
+            return;
+        }
+        if (!this.cardData) {
+            return;
+        }
+        const { title, year, author, description } = this.cardData;
+        return (h("z-popover", { position: PopoverPosition.RIGHT, onClick: () => (this.tooltip = false) }, `${title} ${year} ${author} ${description}`));
+    }
+    setExpirationLicenseMessage(type) {
+        if ((type === "online" && this.cardData.onlineLicense.expired) ||
+            (type === "offline" && this.cardData.offlineLicense.expired)) {
+            return h("span", { class: "expired" }, "SCADUTA");
+        }
+        if ((type === "online" && this.cardData.onlineLicense.expiring) ||
+            (type === "offline" && this.cardData.offlineLicense.expiring)) {
+            return h("span", { class: "expiring" }, "IN SCADENZA");
+        }
+    }
+    renderOnlineLicenseSection() {
+        var _a;
+        if (!((_a = this === null || this === void 0 ? void 0 : this.cardData) === null || _a === void 0 ? void 0 : _a.onlineLicense)) {
+            return;
+        }
+        return (h("section", { ref: (el) => (this.onlineLicenseWrapper = el) }, h("span", { class: "license-heading" }, h("span", null, "Licenza online"), this.setExpirationLicenseMessage("online")), "Scadenza il ", h("b", null, this.cardData.onlineLicense.expiration), h("br", null)));
+    }
+    renderOfflineLicenseSection() {
+        var _a;
+        if (!((_a = this === null || this === void 0 ? void 0 : this.cardData) === null || _a === void 0 ? void 0 : _a.offlineLicense)) {
+            return;
+        }
+        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: '81d2f2e223da107bea1c15bb4df6640567a37990' }, this.renderCloseIcon(), h("div", { key: 'fed0c665a34ab4c264313d726b642a587e04bd61', class: "content-wrapper", ref: (el) => (this.contentWrapper = el) }, this.renderGeneralSection(), this.renderTooltip(), this.renderOnlineLicenseSection(), this.renderOfflineLicenseSection()), h("div", { key: '8978d9206d452b14843fadad6c8c6bacd976f77c', class: "cta-wrapper" }, h("slot", { key: '2d2431d4c8a8ed03c7428e77fc19a6556cd1cc35' }))));
+    }
+    static get style() { return ZMyzCardInfoStyle0; }
+}, [1, "z-myz-card-info", {
+        "data": [1],
+        "htmltabindex": [2],
+        "hiddenContent": [32],
+        "tooltip": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["z-myz-card-info", "z-icon", "z-popover"];
+    components.forEach(tagName => { switch (tagName) {
+        case "z-myz-card-info":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZMyzCardInfo$1);
+            }
+            break;
+        case "z-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "z-popover":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const ZMyzCardInfo = ZMyzCardInfo$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZMyzCardInfo, defineCustomElement };
+
+//# sourceMappingURL=z-myz-card-info.js.map

package/dist/components/z-myz-card-info.js.map

@@ -0,0 +1 @@
+{"file":"z-myz-card-info.js","mappings":"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","names":["ZMyzCardInfo"],"sources":["src/snowflakes/myz/card/z-myz-card-info/styles.css?tag=z-myz-card-info&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-info/index.tsx"],"sourcesContent":[":host {\n  width: 100%;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > div {\n  position: relative;\n  display: grid;\n  width: calc(100% + calc(var(--space-unit) * 2));\n  height: 402px;\n  box-sizing: border-box;\n  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 3);\n  border: var(--border-size-small) solid var(--color-primary01);\n  margin-left: calc(-1 * var(--space-unit));\n  background: var(--color-surface01);\n  border-radius: 0;\n  box-shadow: 0 2px 4px 0 rgb(66 69 72 / 35%);\n}\n\n:host > div > z-icon {\n  position: absolute;\n  top: var(--space-unit);\n  right: var(--space-unit);\n  cursor: pointer;\n  fill: var(--color-primary01);\n}\n\n:host > div > div.cta-wrapper {\n  display: flex;\n  flex-flow: column nowrap;\n  align-self: end;\n  justify-content: space-between;\n}\n\n:host > div > div.content-wrapper {\n  position: relative;\n  overflow: hidden;\n  align-self: stretch;\n}\n\n:host > div > div.content-wrapper > section {\n  box-sizing: border-box;\n  padding: var(--space-unit) 0;\n  border-bottom: var(--border-size-small) solid var(--color-surface04);\n  color: var(--color-surface05);\n  font-size: 14px;\n  line-height: 20px;\n}\n\n:host > div > div.content-wrapper > section:last-child {\n  border-bottom: none;\n}\n\n:host > div > div.content-wrapper > section.info-wrapper {\n  position: relative;\n  overflow: hidden;\n  box-sizing: border-box;\n}\n\n:host > div > div.content-wrapper > section.info-wrapper.hidden::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background: linear-gradient(180deg, rgb(255 0 0 / 0%), rgb(255 0 0 / 0%) 60%, white);\n  content: \"\";\n  pointer-events: none;\n}\n\n:host > div > div.content-wrapper > section > span.license-heading {\n  display: flex;\n  justify-content: space-between;\n}\n\n:host > div > div.content-wrapper > section > span.license-heading > span.expired {\n  color: var(--color-primary01);\n  font-size: 12px;\n  font-weight: 600;\n}\n\n:host > div > div.content-wrapper > section > span.license-heading > span.expiring {\n  color: var(--color-hover-warning);\n  font-size: 12px;\n  font-weight: 600;\n}\n\n:host > div > div.content-wrapper > z-popover {\n  position: absolute;\n  top: 0;\n  left: calc(var(--space-unit) * 4);\n}\n","import {Component, Event, EventEmitter, Prop, State, h} from \"@stencil/core\";\nimport {DictionaryData, PopoverPosition} from \"../../../../beans\";\nimport {handleKeyboardSubmit} from \"../../../../utils/utils\";\n\n/**\n * @slot  - content\n */\n@Component({\n  tag: \"z-myz-card-info\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardInfo {\n  /** dictionary info */\n  @Prop()\n  data: string | DictionaryData;\n\n  /** tabindex link attribute (optional) */\n  @Prop()\n  htmltabindex?: number = 0;\n\n  @State()\n  hiddenContent = false;\n\n  @State()\n  tooltip = false;\n\n  private cardData: DictionaryData;\n\n  private contentWrapper: HTMLElement;\n\n  private infoWrapper: HTMLElement;\n\n  private onlineLicenseWrapper: HTMLElement;\n\n  private offlineLicenseWrapper: HTMLElement;\n\n  /** flip card to front */\n  @Event()\n  flipCard: EventEmitter;\n\n  private emitFlipCard(showBack = false): void {\n    this.flipCard.emit(showBack);\n  }\n\n  constructor() {\n    this.emitFlipCard = this.emitFlipCard.bind(this);\n  }\n\n  componentWillLoad(): void {\n    this.setStringOrArray();\n  }\n\n  componentWillUpdate(): void {\n    this.setStringOrArray();\n  }\n\n  componentDidRender(): void {\n    this.handleContentHeight();\n  }\n\n  private handleContentHeight(): void {\n    if (!this.contentWrapper && !this.infoWrapper) {\n      this.hiddenContent = false;\n\n      return;\n    }\n\n    if (\n      this.contentWrapper.scrollHeight > this.contentWrapper.offsetHeight ||\n      this.infoWrapper.scrollHeight > this.infoWrapper.offsetHeight\n    ) {\n      const height =\n        this.contentWrapper.offsetHeight -\n        this.onlineLicenseWrapper.offsetHeight -\n        this.offlineLicenseWrapper.offsetHeight;\n      this.infoWrapper.style.height = `${height}px`;\n      this.hiddenContent = true;\n\n      return;\n    }\n\n    this.hiddenContent = false;\n  }\n\n  private setStringOrArray(): void {\n    if (typeof this.data === \"string\") {\n      this.cardData = JSON.parse(this.data);\n    } else {\n      this.cardData = this.data;\n    }\n  }\n\n  private renderCloseIcon(): HTMLZIconElement {\n    return (\n      <z-icon\n        name=\"multiply-circled-filled\"\n        height={18}\n        width={18}\n        onClick={() => this.emitFlipCard(false)}\n        tabindex={this.htmltabindex}\n        onKeyUp={(e: KeyboardEvent) => {\n          handleKeyboardSubmit(e, this.emitFlipCard, false);\n        }}\n      />\n    );\n  }\n\n  private renderGeneralSection(): HTMLElement {\n    const title = this?.cardData?.title;\n    const description = this?.cardData?.description;\n\n    return (\n      <section\n        class={`info-wrapper ${this.hiddenContent ? \"hidden\" : \"\"}`}\n        onClick={() => {\n          if (this.hiddenContent) {\n            this.tooltip = !this.tooltip;\n          }\n        }}\n        ref={(el) => (this.infoWrapper = el)}\n      >\n        {this.renderAuthor()}\n        {this.renderYear()}\n        {title}\n        <br />\n        {description}\n      </section>\n    );\n  }\n\n  private renderAuthor(): HTMLSpanElement {\n    const author = this?.cardData?.author;\n    if (!author) {\n      return null;\n    }\n\n    return (\n      <span>\n        Autore: <b>{author}</b>\n        <br />\n      </span>\n    );\n  }\n\n  private renderYear(): HTMLSpanElement {\n    const year = this?.cardData?.year;\n    if (!year) {\n      return null;\n    }\n\n    return (\n      <span>\n        Anno: <b>{year}</b>\n        <br />\n      </span>\n    );\n  }\n\n  private renderTooltip(): HTMLZPopoverElement {\n    if (!this.tooltip) {\n      return;\n    }\n\n    if (!this.cardData) {\n      return;\n    }\n    const {title, year, author, description} = this.cardData;\n\n    return (\n      <z-popover\n        position={PopoverPosition.RIGHT}\n        onClick={() => (this.tooltip = false)}\n      >\n        {`${title} ${year} ${author} ${description}`}\n      </z-popover>\n    );\n  }\n\n  private setExpirationLicenseMessage(type: string): HTMLSpanElement {\n    if (\n      (type === \"online\" && this.cardData.onlineLicense.expired) ||\n      (type === \"offline\" && this.cardData.offlineLicense.expired)\n    ) {\n      return <span class=\"expired\">SCADUTA</span>;\n    }\n\n    if (\n      (type === \"online\" && this.cardData.onlineLicense.expiring) ||\n      (type === \"offline\" && this.cardData.offlineLicense.expiring)\n    ) {\n      return <span class=\"expiring\">IN SCADENZA</span>;\n    }\n  }\n\n  private renderOnlineLicenseSection(): HTMLElement {\n    if (!this?.cardData?.onlineLicense) {\n      return;\n    }\n\n    return (\n      <section ref={(el) => (this.onlineLicenseWrapper = el)}>\n        <span class=\"license-heading\">\n          <span>Licenza online</span>\n          {this.setExpirationLicenseMessage(\"online\")}\n        </span>\n        Scadenza il <b>{this.cardData.onlineLicense.expiration}</b>\n        <br />\n      </section>\n    );\n  }\n\n  private renderOfflineLicenseSection(): HTMLElement {\n    if (!this?.cardData?.offlineLicense) {\n      return;\n    }\n\n    return (\n      <section ref={(el) => (this.offlineLicenseWrapper = el)}>\n        <span class=\"license-heading\">\n          <span>Licenza offline</span>\n          {this.setExpirationLicenseMessage(\"offline\")}\n        </span>\n        Scadenza il <b>{this.cardData.offlineLicense.expiration}</b>\n        <br />\n        Installazioni disponibili: <b>{this.cardData.offlineLicense.installations}</b>\n      </section>\n    );\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div>\n        {this.renderCloseIcon()}\n        <div\n          class=\"content-wrapper\"\n          ref={(el) => (this.contentWrapper = el)}\n        >\n          {this.renderGeneralSection()}\n          {this.renderTooltip()}\n          {this.renderOnlineLicenseSection()}\n          {this.renderOfflineLicenseSection()}\n        </div>\n        <div class=\"cta-wrapper\">\n          <slot />\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/z-myz-card-list.js

@@ -1 +1,58 @@
-import{proxyCustomElement as t,HTMLElement as e,h as n,transformTag as a}from"@stencil/core/internal/client";const i=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.renderList=this.renderList.bind(this)}handleSpaceKeyPress(t,e){32!=t.keyCode&&13!=t.keyCode||(t.preventDefault(),window.open(e,"_blank"))}formatListContent(t){const{value:e,isLink:a,url:i}=t;return a?n("a",{role:"button",onKeyPress:t=>this.handleSpaceKeyPress(t,i),href:i,target:"_blank"},e):n("span",null,e)}renderList(t){return t.map((t=>n("li",null,this.formatListContent(t))))}render(){return n("ul",{key:"50f8aa7d25f8d601135324dac7b57a2ea0c33ab2"},this.renderList(JSON.parse(this.listdata)))}static get style(){return'*:focus{box-shadow:var(--shadow-focus-primary);outline:none !important}ul{overflow:hidden;width:auto;height:auto;padding:0;margin:0 calc(var(--space-unit) * 2);color:var(--color-primary01);font-family:var(--font-family-sans);list-style:none}ul>li{padding-left:10px;text-indent:-10px}ul>li>a{display:block;padding-top:calc(var(--space-unit) * 0.5);color:var(--color-primary01);font-size:14px;font-weight:var(--font-sb);letter-spacing:0.16px;line-height:calc(var(--space-unit) * 2.5);text-decoration:none}ul>li>a::before{padding-right:5px;content:"•"}ul>li>span{padding:0 calc(var(--space-unit) * 2);color:var(--color-surface04);font-size:14px;font-weight:var(--font-rg);letter-spacing:0.16px;line-height:calc(var(--space-unit) * 2.5);text-decoration:none}'}},[1,"z-myz-card-list",{listdata:[1]}]),r=i,o=function(){"undefined"!=typeof customElements&&["z-myz-card-list"].forEach((t=>{"z-myz-card-list"===t&&(customElements.get(a(t))||customElements.define(a(t),i))}))};export{r as ZMyzCardList,o as defineCustomElement}
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const stylesCss = "*:focus{box-shadow:var(--shadow-focus-primary);outline:none !important}ul{overflow:hidden;width:auto;height:auto;padding:0;margin:0 calc(var(--space-unit) * 2);color:var(--color-primary01);font-family:var(--font-family-sans);list-style:none}ul>li{padding-left:10px;text-indent:-10px}ul>li>a{display:block;padding-top:calc(var(--space-unit) * 0.5);color:var(--color-primary01);font-size:14px;font-weight:var(--font-sb);letter-spacing:0.16px;line-height:calc(var(--space-unit) * 2.5);text-decoration:none}ul>li>a::before{padding-right:5px;content:\"•\"}ul>li>span{padding:0 calc(var(--space-unit) * 2);color:var(--color-surface04);font-size:14px;font-weight:var(--font-rg);letter-spacing:0.16px;line-height:calc(var(--space-unit) * 2.5);text-decoration:none}";
+const ZMyzCardListStyle0 = stylesCss;
+
+const ZMyzCardList$1 = /*@__PURE__*/ proxyCustomElement(class ZMyzCardList extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.listdata = undefined;
+        this.renderList = this.renderList.bind(this);
+    }
+    handleSpaceKeyPress(e, url) {
+        if (e.keyCode == 32 || e.keyCode == 13) {
+            e.preventDefault();
+            window.open(url, "_blank");
+        }
+    }
+    formatListContent(data) {
+        const { value, isLink, url } = data;
+        if (!isLink) {
+            return h("span", null, value);
+        }
+        return (h("a", { role: "button", onKeyPress: (e) => this.handleSpaceKeyPress(e, url), href: url, target: "_blank" }, value));
+    }
+    renderList(dataArray) {
+        return dataArray.map((data) => {
+            return h("li", null, this.formatListContent(data));
+        });
+    }
+    render() {
+        return h("ul", { key: 'aa9fc5633a56ebb91f157bc65cb8cfb20cf1bacb' }, this.renderList(JSON.parse(this.listdata)));
+    }
+    static get style() { return ZMyzCardListStyle0; }
+}, [1, "z-myz-card-list", {
+        "listdata": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["z-myz-card-list"];
+    components.forEach(tagName => { switch (tagName) {
+        case "z-myz-card-list":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZMyzCardList$1);
+            }
+            break;
+    } });
+}
+
+const ZMyzCardList = ZMyzCardList$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZMyzCardList, defineCustomElement };
+
+//# sourceMappingURL=z-myz-card-list.js.map

package/dist/components/z-myz-card-list.js.map

@@ -0,0 +1 @@
+{"file":"z-myz-card-list.js","mappings":";;AAAA,MAAM,SAAS,GAAG,svBAAsvB,CAAC;AACzwB,2BAAe,SAAS;;MCOXA,cAAY;IAKvB;;;;;QACE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9C;IAEO,mBAAmB,CAAC,CAAgB,EAAE,GAAW;QACvD,IAAI,CAAC,CAAC,OAAO,IAAI,EAAE,IAAI,CAAC,CAAC,OAAO,IAAI,EAAE,EAAE;YACtC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;SAC5B;KACF;IAEO,iBAAiB,CAAC,IAAY;QACpC,MAAM,EAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAC,GAAG,IAAI,CAAC;QAClC,IAAI,CAAC,MAAM,EAAE;YACX,OAAO,gBAAO,KAAK,CAAQ,CAAC;SAC7B;QAED,QACE,SACE,IAAI,EAAC,QAAQ,EACb,UAAU,EAAE,CAAC,CAAgB,KAAK,IAAI,CAAC,mBAAmB,CAAC,CAAC,EAAE,GAAG,CAAC,EAClE,IAAI,EAAE,GAAG,EACT,MAAM,EAAC,QAAQ,IAEd,KAAK,CACJ,EACJ;KACH;IAEO,UAAU,CAAC,SAAmB;QACpC,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC,IAAY;YAChC,OAAO,cAAK,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAM,CAAC;SAChD,CAAC,CAAC;KACJ;IAED,MAAM;QACJ,OAAO,6DAAK,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAM,CAAC;KAC9D;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZMyzCardList"],"sources":["src/snowflakes/myz/card/z-myz-card-list/styles.css?tag=z-myz-card-list&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-list/index.tsx"],"sourcesContent":["*:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none !important;\n}\n\nul {\n  overflow: hidden;\n  width: auto;\n  height: auto;\n  padding: 0;\n  margin: 0 calc(var(--space-unit) * 2);\n  color: var(--color-primary01);\n  font-family: var(--font-family-sans);\n  list-style: none;\n}\n\nul > li {\n  padding-left: 10px;\n  text-indent: -10px;\n}\n\nul > li > a {\n  display: block;\n  padding-top: calc(var(--space-unit) * 0.5);\n  color: var(--color-primary01);\n  font-size: 14px;\n  font-weight: var(--font-sb);\n  letter-spacing: 0.16px;\n  line-height: calc(var(--space-unit) * 2.5);\n  text-decoration: none;\n}\n\nul > li > a::before {\n  padding-right: 5px;\n  content: \"•\";\n}\n\nul > li > span {\n  padding: 0 calc(var(--space-unit) * 2);\n  color: var(--color-surface04);\n  font-size: 14px;\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: calc(var(--space-unit) * 2.5);\n  text-decoration: none;\n}\n","import {Component, Prop, h} from \"@stencil/core\";\nimport {Action} from \"../../../../beans\";\n\n@Component({\n  tag: \"z-myz-card-list\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardList {\n  /** list data stringified array */\n  @Prop()\n  listdata: string;\n\n  constructor() {\n    this.renderList = this.renderList.bind(this);\n  }\n\n  private handleSpaceKeyPress(e: KeyboardEvent, url: string): void {\n    if (e.keyCode == 32 || e.keyCode == 13) {\n      e.preventDefault();\n      window.open(url, \"_blank\");\n    }\n  }\n\n  private formatListContent(data: Action): HTMLAnchorElement {\n    const {value, isLink, url} = data;\n    if (!isLink) {\n      return <span>{value}</span>;\n    }\n\n    return (\n      <a\n        role=\"button\"\n        onKeyPress={(e: KeyboardEvent) => this.handleSpaceKeyPress(e, url)}\n        href={url}\n        target=\"_blank\"\n      >\n        {value}\n      </a>\n    );\n  }\n\n  private renderList(dataArray: Action[]): HTMLLIElement[] {\n    return dataArray.map((data: Action) => {\n      return <li>{this.formatListContent(data)}</li>;\n    });\n  }\n\n  render(): HTMLUListElement {\n    return <ul>{this.renderList(JSON.parse(this.listdata))}</ul>;\n  }\n}\n"],"version":3}

package/dist/components/z-myz-card.js

@@ -1 +1,8 @@
-import{Z as o,d as s}from"./index22.js";const r=o,t=s;export{r as ZMyzCard,t as defineCustomElement}
+import { Z as ZMyzCardComponent, d as defineCustomElement$1 } from './index18.js';
+
+const ZMyzCard = ZMyzCardComponent;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZMyzCard, defineCustomElement };
+
+//# sourceMappingURL=z-myz-card.js.map

package/dist/components/z-myz-card.js.map

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

package/dist/components/z-myz-list-item.js

@@ -1 +1,8 @@
-import{Z as o,d as s}from"./index26.js";const r=o,t=s;export{r as ZMyzListItem,t as defineCustomElement}
+import { Z as ZMyzListItem$1, d as defineCustomElement$1 } from './index22.js';
+
+const ZMyzListItem = ZMyzListItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZMyzListItem, defineCustomElement };
+
+//# sourceMappingURL=z-myz-list-item.js.map

package/dist/components/z-myz-list-item.js.map

@@ -0,0 +1 @@
+{"file":"z-myz-list-item.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/z-myz-list.js

@@ -1 +1,71 @@
-import{proxyCustomElement as t,HTMLElement as i,h as e,transformTag as s}from"@stencil/core/internal/client";import{d as n}from"./index3.js";import{d as a}from"./index26.js";const r=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}componentWillLoad(){this.inputrawdata&&this.parseinputrawdata(this.inputrawdata)}parseinputrawdata(t){this.list=[...JSON.parse(t)]}oninputrawdataChange(t){this.parseinputrawdata(t)}render(){const t=this.list?this.list.length-1:-1;return e("ul",{key:"6a2623cc98a4039d09522d061163e909002e3139"},this.list&&this.list.map(((i,s)=>e("z-myz-list-item",{listitemid:i.listitemid,text:i.text,link:i.link,linktarget:i.linktarget,icon:i.icon,underlined:t!=s}))))}static get watchers(){return{inputrawdata:[{oninputrawdataChange:0}]}}static get style(){return"ul{padding:0;margin:0}"}},[1,"z-myz-list",{inputrawdata:[1],list:[1040]},void 0,{inputrawdata:[{oninputrawdataChange:0}]}]),o=r,m=function(){"undefined"!=typeof customElements&&["z-myz-list","z-icon","z-myz-list-item"].forEach((t=>{switch(t){case"z-myz-list":customElements.get(s(t))||customElements.define(s(t),r);break;case"z-icon":customElements.get(s(t))||n();break;case"z-myz-list-item":customElements.get(s(t))||a()}}))};export{o as ZMyzList,m as defineCustomElement}
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './index10.js';
+import { d as defineCustomElement$2 } from './index22.js';
+
+const stylesCss = "ul{padding:0;margin:0}";
+const ZMyzListStyle0 = stylesCss;
+
+const ZMyzList$1 = /*@__PURE__*/ proxyCustomElement(class ZMyzList extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.inputrawdata = undefined;
+        this.list = undefined;
+    }
+    componentWillLoad() {
+        if (this.inputrawdata) {
+            this.parseinputrawdata(this.inputrawdata);
+        }
+    }
+    parseinputrawdata(inputrawdata) {
+        this.list = [...JSON.parse(inputrawdata)];
+    }
+    oninputrawdataChange(newValue) {
+        this.parseinputrawdata(newValue);
+    }
+    render() {
+        const lastElem = this.list ? this.list.length - 1 : -1;
+        return (h("ul", { key: '94453803cc1c6b3d3b81e19f107c09abc395bbff' }, 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 watchers() { return {
+        "inputrawdata": ["oninputrawdataChange"]
+    }; }
+    static get style() { return ZMyzListStyle0; }
+}, [1, "z-myz-list", {
+        "inputrawdata": [1],
+        "list": [1040]
+    }, undefined, {
+        "inputrawdata": ["oninputrawdataChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["z-myz-list", "z-icon", "z-myz-list-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "z-myz-list":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZMyzList$1);
+            }
+            break;
+        case "z-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "z-myz-list-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const ZMyzList = ZMyzList$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZMyzList, defineCustomElement };
+
+//# sourceMappingURL=z-myz-list.js.map

package/dist/components/z-myz-list.js.map

@@ -0,0 +1 @@
+{"file":"z-myz-list.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,wBAAwB,CAAC;AAC3C,uBAAe,SAAS;;MCOXA,UAAQ;;;;;;;;IASnB,iBAAiB;QACf,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SAC3C;KACF;IAEO,iBAAiB,CAAC,YAAoB;QAC5C,IAAI,CAAC,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC;KAC3C;IAGD,oBAAoB,CAAC,QAAgB;QACnC,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;KAClC;IAED,MAAM;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;QAEvD,QACE,6DACG,IAAI,CAAC,IAAI;YACR,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,MACpB,uBACE,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,UAAU,EAAE,QAAQ,IAAI,CAAC,GACzB,CACH,CAAC,CACD,EACL;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZMyzList"],"sources":["src/snowflakes/myz/list/z-myz-list/styles.css?tag=z-myz-list&encapsulation=shadow","src/snowflakes/myz/list/z-myz-list/index.tsx"],"sourcesContent":["ul {\n  padding: 0;\n  margin: 0;\n}\n","import {Component, Prop, Watch, h} from \"@stencil/core\";\nimport {ListItem} from \"../../../../beans/index.js\";\n\n@Component({\n  tag: \"z-myz-list\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzList {\n  /** json stringified list data (mutable, optional) */\n  @Prop()\n  inputrawdata?: string;\n\n  /** list item data (mutable, optional)*/\n  @Prop({mutable: true})\n  list?: ListItem[];\n\n  componentWillLoad(): void {\n    if (this.inputrawdata) {\n      this.parseinputrawdata(this.inputrawdata);\n    }\n  }\n\n  private parseinputrawdata(inputrawdata: string): void {\n    this.list = [...JSON.parse(inputrawdata)];\n  }\n\n  @Watch(\"inputrawdata\")\n  oninputrawdataChange(newValue: string): void {\n    this.parseinputrawdata(newValue);\n  }\n\n  render(): HTMLUListElement {\n    const lastElem = this.list ? this.list.length - 1 : -1;\n\n    return (\n      <ul>\n        {this.list &&\n          this.list.map((bean, i) => (\n            <z-myz-list-item\n              listitemid={bean.listitemid}\n              text={bean.text}\n              link={bean.link}\n              linktarget={bean.linktarget}\n              icon={bean.icon}\n              underlined={lastElem != i}\n            />\n          ))}\n      </ul>\n    );\n  }\n}\n"],"version":3}