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

package/dist/components/z-myz-card-dictionary.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ZMyzCardDictionary extends Components.ZMyzCardDictionary, HTMLElement {}
+export const ZMyzCardDictionary: {
+    prototype: ZMyzCardDictionary;
+    new (): ZMyzCardDictionary;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,94 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { B as ButtonVariant, d as ButtonSize } from './index2.js';
+import { d as defineCustomElement$7 } from './index4.js';
+import { d as defineCustomElement$6 } from './index9.js';
+import { d as defineCustomElement$5 } from './index16.js';
+import { d as defineCustomElement$4 } from './index17.js';
+import { d as defineCustomElement$3 } from './index18.js';
+import { d as defineCustomElement$2 } from './index19.js';
+
+const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host z-myz-card{--card-overflow:visible}:host>div{position:relative;width:100%;height:522px;transition:-webkit-transform 0.5s ease-out;transition:transform 0.5s ease-out;transition:transform 0.5s ease-out, -webkit-transform 0.5s ease-out}:host>div .content{position:relative;z-index:2;width:100%;height:522px;transform-style:preserve-3d;transition:-webkit-transform 0.5s ease-out;transition:transform 0.5s ease-out;transition:transform 0.5s ease-out, -webkit-transform 0.5s ease-out}:host>div .content.flipped{margin-top:-2px;transform:rotateY(180deg)}:host>div .front,:host>div .back{position:absolute;top:0;left:0;width:100%;height:100%;backface-visibility:hidden}:host>div .front{z-index:2;top:0;left:0;transform:rotateY(0deg)}:host>div .front z-button{position:absolute;z-index:3;top:calc(var(--space-unit) * 0.5);left:calc(-1 * var(--space-unit))}:host>div .back{z-index:1;top:0;left:0;display:flex;justify-content:center;padding:0 var(--space-unit);margin-left:calc(-1 * var(--space-unit));transform:rotateY(180deg)}.hide-info{display:none}";
+const ZMyzCardDictionaryStyle0 = stylesCss;
+
+const ZMyzCardDictionary$1 = /*@__PURE__*/ proxyCustomElement(class ZMyzCardDictionary extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.cardFlipped = createEvent(this, "cardFlipped", 7);
+        this.name = undefined;
+        this.cover = undefined;
+        this.disabled = false;
+        this.flipped = false;
+        this.flipbuttonlabel = "INFO";
+        this.hideinfobtn = false;
+    }
+    handleFlipCard(e) {
+        this.flipCard(e.detail);
+    }
+    flipCard(showBack = true) {
+        this.flipped = showBack;
+        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' }))));
+    }
+    static get style() { return ZMyzCardDictionaryStyle0; }
+}, [1, "z-myz-card-dictionary", {
+        "name": [1],
+        "cover": [1],
+        "disabled": [4],
+        "flipped": [1028],
+        "flipbuttonlabel": [1],
+        "hideinfobtn": [4]
+    }, [[0, "flipCard", "handleFlipCard"]]]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["z-myz-card-dictionary", "z-button", "z-icon", "z-myz-card", "z-myz-card-body", "z-myz-card-cover", "z-myz-card-header"];
+    components.forEach(tagName => { switch (tagName) {
+        case "z-myz-card-dictionary":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZMyzCardDictionary$1);
+            }
+            break;
+        case "z-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "z-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "z-myz-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "z-myz-card-body":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "z-myz-card-cover":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "z-myz-card-header":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const ZMyzCardDictionary = ZMyzCardDictionary$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZMyzCardDictionary, defineCustomElement };
+
+//# sourceMappingURL=z-myz-card-dictionary.js.map

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

@@ -0,0 +1 @@
+{"file":"z-myz-card-dictionary.js","mappings":";;;;;;;;;AAAA,MAAM,SAAS,GAAG,8lCAA8lC,CAAC;AACjnC,iCAAe,SAAS;;MCWXA,oBAAkB;;;;;;;;wBAWlB,KAAK;uBAIN,KAAK;+BAIG,MAAM;2BAIV,KAAK;;IAGnB,cAAc,CAAC,CAAc;QAC3B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;KACzB;IAMO,QAAQ,CAAC,QAAQ,GAAG,IAAI;QAC9B,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC;QACxB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACjC;IAED,MAAM;QACJ,QACE,8DACE,qEACE,0EAAmB,MAAM,EAAE,IAAI,CAAC,IAAI,GAAsB,EAC1D,4DAAK,KAAK,EAAE,WAAW,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,EAAE,EAAE,IACpD,4DAAK,KAAK,EAAC,OAAO,IAChB,0EACE,yEACE,IAAI,EAAC,OAAO,EACZ,MAAM,EAAE,IAAI,CAAC,IAAI,EACjB,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,KAAK,EAAE,IAAI,CAAC,QAAQ,GACpB,CACc,EAClB,iEACE,KAAK,EAAE,EAAC,WAAW,EAAE,IAAI,CAAC,WAAW,EAAC,EACtC,OAAO,EAAE,aAAa,CAAC,SAAS,EAChC,IAAI,EAAC,mBAAmB,EACxB,IAAI,EAAE,UAAU,CAAC,OAAO,EACxB,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAClC,QAAQ,EAAE,IAAI,CAAC,OAAO,IAErB,IAAI,CAAC,eAAe,CACZ,CACP,EACN,4DAAK,KAAK,EAAC,MAAM,IACf,6DAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACF,EACN,8DAAQ,CACG,CACT,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZMyzCardDictionary"],"sources":["src/snowflakes/myz/card/z-myz-card-dictionary/styles.css?tag=z-myz-card-dictionary&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-dictionary/index.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host z-myz-card {\n  --card-overflow: visible;\n}\n\n:host > div {\n  position: relative;\n  width: 100%;\n  height: 522px;\n  transition: -webkit-transform 0.5s ease-out;\n  transition: transform 0.5s ease-out;\n  transition: transform 0.5s ease-out, -webkit-transform 0.5s ease-out;\n}\n\n:host > div .content {\n  position: relative;\n  z-index: 2;\n  width: 100%;\n  height: 522px;\n  transform-style: preserve-3d;\n  transition: -webkit-transform 0.5s ease-out;\n  transition: transform 0.5s ease-out;\n  transition: transform 0.5s ease-out, -webkit-transform 0.5s ease-out;\n}\n\n:host > div .content.flipped {\n  margin-top: -2px;\n  transform: rotateY(180deg);\n}\n\n:host > div .front,\n:host > div .back {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  backface-visibility: hidden;\n}\n\n:host > div .front {\n  z-index: 2;\n  top: 0;\n  left: 0;\n  transform: rotateY(0deg);\n}\n\n:host > div .front z-button {\n  position: absolute;\n  z-index: 3;\n  top: calc(var(--space-unit) * 0.5);\n  left: calc(-1 * var(--space-unit));\n}\n\n:host > div .back {\n  z-index: 1;\n  top: 0;\n  left: 0;\n  display: flex;\n  justify-content: center;\n  padding: 0 var(--space-unit);\n  margin-left: calc(-1 * var(--space-unit));\n  transform: rotateY(180deg);\n}\n\n.hide-info {\n  display: none;\n}\n","import {Component, Prop, h, Listen, Event, EventEmitter} from \"@stencil/core\";\nimport {ButtonSize, ButtonVariant} from \"../../../../beans\";\n\n/**\n * @slot  - generic card slot\n * @slot info - flipped card info\n */\n@Component({\n  tag: \"z-myz-card-dictionary\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardDictionary {\n  /** card title */\n  @Prop()\n  name: string;\n\n  /** card cover */\n  @Prop()\n  cover: string;\n\n  /** card is disabled */\n  @Prop()\n  disabled = false;\n\n  /** card is flipped */\n  @Prop({mutable: true})\n  flipped = false;\n\n  /** flip button label */\n  @Prop()\n  flipbuttonlabel = \"INFO\";\n\n  /** hide info button */\n  @Prop()\n  hideinfobtn = false;\n\n  @Listen(\"flipCard\")\n  handleFlipCard(e: CustomEvent): void {\n    this.flipCard(e.detail);\n  }\n\n  /** when card is flipped */\n  @Event()\n  cardFlipped: EventEmitter;\n\n  private flipCard(showBack = true): void {\n    this.flipped = showBack;\n    this.cardFlipped.emit(showBack);\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div>\n        <z-myz-card>\n          <z-myz-card-header titolo={this.name}></z-myz-card-header>\n          <div class={`content ${this.flipped ? \"flipped\" : \"\"}`}>\n            <div class=\"front\">\n              <z-myz-card-body>\n                <z-myz-card-cover\n                  slot=\"cover\"\n                  titolo={this.name}\n                  img={this.cover}\n                  faded={this.disabled}\n                />\n              </z-myz-card-body>\n              <z-button\n                class={{\"hide-info\": this.hideinfobtn}}\n                variant={ButtonVariant.SECONDARY}\n                icon=\"informationsource\"\n                size={ButtonSize.X_SMALL}\n                onClick={() => this.flipCard(true)}\n                disabled={this.flipped}\n              >\n                {this.flipbuttonlabel}\n              </z-button>\n            </div>\n            <div class=\"back\">\n              <slot name=\"info\" />\n            </div>\n          </div>\n          <slot />\n        </z-myz-card>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/z-myz-card-footer-sections.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ZMyzCardFooterSections extends Components.ZMyzCardFooterSections, HTMLElement {}
+export const ZMyzCardFooterSections: {
+    prototype: ZMyzCardFooterSections;
+    new (): ZMyzCardFooterSections;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,36 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div>footer{height:128px;box-sizing:border-box;padding:var(--space-unit) calc(var(--space-unit) * 2) 0;border-top:var(--border-size-medium) solid var(--color-surface03);border-radius:0 0 var(--border-radius) var(--border-radius);color:var(--color-surface05);font-size:16px;line-height:24px}:host>div>footer>div.top,:host>div>footer>div.bottom{height:60px}";
+const ZMyzCardFooterSectionsStyle0 = stylesCss;
+
+const ZMyzCardFooterSections$1 = /*@__PURE__*/ proxyCustomElement(class ZMyzCardFooterSections extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    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" })))));
+    }
+    static get style() { return ZMyzCardFooterSectionsStyle0; }
+}, [1, "z-myz-card-footer-sections"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["z-myz-card-footer-sections"];
+    components.forEach(tagName => { switch (tagName) {
+        case "z-myz-card-footer-sections":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZMyzCardFooterSections$1);
+            }
+            break;
+    } });
+}
+
+const ZMyzCardFooterSections = ZMyzCardFooterSections$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZMyzCardFooterSections, defineCustomElement };
+
+//# sourceMappingURL=z-myz-card-footer-sections.js.map

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

@@ -0,0 +1 @@
+{"file":"z-myz-card-footer-sections.js","mappings":";;AAAA,MAAM,SAAS,GAAG,+aAA+a,CAAC;AAClc,qCAAe,SAAS;;MCUXA,wBAAsB;;;;;;IACjC,MAAM;QACJ,QACE,8DACE,iEACE,4DAAK,KAAK,EAAC,KAAK,IACd,6DAAM,IAAI,EAAC,KAAK,GAAG,CACf,EACN,4DAAK,KAAK,EAAC,QAAQ,IACjB,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACC,CACL,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;","names":["ZMyzCardFooterSections"],"sources":["src/snowflakes/myz/card/z-myz-card-footer-sections/styles.css?tag=z-myz-card-footer-sections&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-footer-sections/index.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > div > footer {\n  height: 128px;\n  box-sizing: border-box;\n  padding: var(--space-unit) calc(var(--space-unit) * 2) 0;\n  border-top: var(--border-size-medium) solid var(--color-surface03);\n  border-radius: 0 0 var(--border-radius) var(--border-radius);\n  color: var(--color-surface05);\n  font-size: 16px;\n  line-height: 24px;\n}\n\n:host > div > footer > div.top,\n:host > div > footer > div.bottom {\n  height: 60px;\n}\n","import {Component, h} from \"@stencil/core\";\n\n/**\n * @slot top - footer top content\n * @slot bottom - footer bottom content\n */\n@Component({\n  tag: \"z-myz-card-footer-sections\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardFooterSections {\n  render(): HTMLDivElement {\n    return (\n      <div>\n        <footer>\n          <div class=\"top\">\n            <slot name=\"top\" />\n          </div>\n          <div class=\"bottom\">\n            <slot name=\"bottom\" />\n          </div>\n        </footer>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/z-myz-card-footer.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ZMyzCardFooter extends Components.ZMyzCardFooter, HTMLElement {}
+export const ZMyzCardFooter: {
+    prototype: ZMyzCardFooter;
+    new (): ZMyzCardFooter;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,99 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { L as LicenseType } from './index2.js';
+
+const stylesCss = "footer{position:relative;z-index:5;top:0;width:auto;height:calc(var(--space-unit) * 6);padding:0;border-top:var(--border-size-medium) solid var(--color-surface03);margin:0;background-color:var(--color-surface01);border-radius:0 0 var(--border-radius) var(--border-radius);color:var(--color-surface05);font-family:var(--font-family-sans);font-weight:var(--font-rg);transition:height 500ms ease-in-out, top 500ms ease-in-out}footer.real,footer.trial,footer.temp{border-top:var(--border-size-medium) solid var(--blue100)}footer .bold{font-family:var(--font-family-sans);font-weight:var(--font-sb)}footer>p{overflow:hidden;height:40px;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 2) var(--space-unit) calc(var(--space-unit) * 2);margin:0;background-color:var(--color-surface01);font-family:var(--font-family-sans);font-size:16px;font-weight:var(--font-rg);line-height:22px;transition:all 200ms linear}footer.isopen>p{background-color:var(--gray200);font-size:14px;font-weight:var(--font-sb);transition:all 200ms linear}footer.isopen.real>p,footer.isopen.trial>p,footer.isopen.temp>p{background-color:var(--blue100)}footer .visible{display:block}footer .hidden{display:none}footer>div.content{overflow:hidden;height:60px}footer>div.content>div:not(.slot-handler){padding:var(--space-unit) calc(var(--space-unit) * 2)}footer>div.content>div>p{overflow:hidden;height:20px;padding:0;margin:0;font-size:14px;line-height:20px;text-overflow:ellipsis;white-space:nowrap}footer>div.content>div>p.year-isbn{display:flex;flex-direction:row;justify-content:space-between;padding-top:var(--space-unit)}footer>div.content>div>p.year-isbn>span.isbn{overflow:hidden;text-overflow:ellipsis}footer.isopen>div.content>div:not(.slot-handler){height:68px}footer.isopen>div.content>div>p.authors{height:40px;text-overflow:initial;white-space:initial}footer.isopen>div.content>div>p.year-isbn{height:50px;flex-direction:column;padding-left:0}footer.isopen>div.content>div>p.year-isbn>span.isbn{display:inline-grid;padding-left:0}footer.isopen{top:-212px;height:295px;transition:height 500ms ease-in-out, top 500ms ease-in-out}footer.isopen.custom-content{top:-292px}footer.isopen>div.content{height:280px;transition:height 500ms ease-in-out, top 500ms ease-in-out}footer.isopen.custom-content>div.content{height:230px}.toggle{position:absolute;z-index:10;top:-24px;left:16px}.faded{opacity:0.3;pointer-events:none}footer>p.custom-content,footer .content.custom-content{display:none}footer.isopen>p.custom-content,footer.isopen .content.custom-content{display:block}div.wrapper{position:relative;height:100%}div.wrapper ::slotted([slot=\"content\"]){position:absolute;z-index:10;top:calc(var(--space-unit) * 2);display:block;width:100%;height:112px;box-sizing:border-box;padding:0 calc(var(--space-unit) * 2);border-top:var(--border-size-medium) solid transparent;background:var(--color-white)}div.wrapper.isopen ::slotted([slot=\"content\"]){top:0;bottom:0;height:128px;padding:calc(var(--space-unit) * 2);border-color:var(--blue100)}";
+const ZMyzCardFooterStyle0 = stylesCss;
+
+const ZMyzCardFooter$1 = /*@__PURE__*/ proxyCustomElement(class ZMyzCardFooter extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.titolo = undefined;
+        this.autori = undefined;
+        this.isbn = undefined;
+        this.faded = undefined;
+        this.cardtype = undefined;
+        this.opened = false;
+        this.customContent = false;
+        this.isOpen = false;
+        this.allowTooltipAuthors = false;
+    }
+    handleToggle() {
+        this.isOpen = !this.isOpen;
+        if (this.isOpen) {
+            const firstElem = this.getFirstListItem();
+            if (firstElem) {
+                requestAnimationFrame(() => {
+                    firstElem.focus();
+                });
+            }
+        }
+    }
+    getTitleAuthors() {
+        return this.allowTooltipAuthors ? this.autori : "";
+    }
+    componentWillLoad() {
+        if (this.opened) {
+            this.isOpen = true;
+        }
+    }
+    elementsEllipsis() {
+        this.allowTooltipAuthors = this.elementAuthorsHasEllipsis() ? true : false;
+    }
+    elementAuthorsHasEllipsis() {
+        return this.ellipsisAuthors.offsetWidth < this.ellipsisAuthors.scrollWidth;
+    }
+    retrieveClass() {
+        return {
+            "isopen": this.isOpen,
+            "real": this.cardtype === LicenseType.REAL,
+            "trial": this.cardtype === LicenseType.TRIAL,
+            "temp": this.cardtype === LicenseType.TEMP,
+            "custom-content": this.customContent,
+        };
+    }
+    footerTransitionHandler(e) {
+        if (["visibility", "height"].includes(e.propertyName)) {
+            this.elementsEllipsis();
+        }
+    }
+    getFirstListItem() {
+        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" })));
+    }
+    get host() { return this; }
+    static get style() { return ZMyzCardFooterStyle0; }
+}, [1, "z-myz-card-footer", {
+        "titolo": [1],
+        "autori": [1],
+        "isbn": [1],
+        "faded": [4],
+        "cardtype": [1],
+        "opened": [4],
+        "customContent": [4, "custom-content"],
+        "isOpen": [32],
+        "allowTooltipAuthors": [32]
+    }, [[0, "toggleClick", "handleToggle"]]]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["z-myz-card-footer"];
+    components.forEach(tagName => { switch (tagName) {
+        case "z-myz-card-footer":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZMyzCardFooter$1);
+            }
+            break;
+    } });
+}
+
+const ZMyzCardFooter = ZMyzCardFooter$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZMyzCardFooter, defineCustomElement };
+
+//# sourceMappingURL=z-myz-card-footer.js.map

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

@@ -0,0 +1 @@
+{"file":"z-myz-card-footer.js","mappings":"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","names":["ZMyzCardFooter"],"sources":["src/snowflakes/myz/card/z-myz-card-footer/styles.css?tag=z-myz-card-footer&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-footer/index.tsx"],"sourcesContent":["footer {\n  position: relative;\n  z-index: 5;\n  top: 0;\n  width: auto;\n  height: calc(var(--space-unit) * 6);\n  padding: 0;\n  border-top: var(--border-size-medium) solid var(--color-surface03);\n  margin: 0;\n  background-color: var(--color-surface01);\n  border-radius: 0 0 var(--border-radius) var(--border-radius);\n  color: var(--color-surface05);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n  transition: height 500ms ease-in-out, top 500ms ease-in-out;\n}\n\nfooter.real,\nfooter.trial,\nfooter.temp {\n  border-top: var(--border-size-medium) solid var(--blue100);\n}\n\nfooter .bold {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-sb);\n}\n\nfooter > p {\n  overflow: hidden;\n  height: 40px;\n  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 2) var(--space-unit) calc(var(--space-unit) * 2);\n  margin: 0;\n  background-color: var(--color-surface01);\n  font-family: var(--font-family-sans);\n  font-size: 16px;\n  font-weight: var(--font-rg);\n  line-height: 22px;\n  transition: all 200ms linear;\n}\n\nfooter.isopen > p {\n  background-color: var(--gray200);\n  font-size: 14px;\n  font-weight: var(--font-sb);\n  transition: all 200ms linear;\n}\n\nfooter.isopen.real > p,\nfooter.isopen.trial > p,\nfooter.isopen.temp > p {\n  background-color: var(--blue100);\n}\n\nfooter .visible {\n  display: block;\n}\n\nfooter .hidden {\n  display: none;\n}\n\nfooter > div.content {\n  overflow: hidden;\n  height: 60px;\n}\n\nfooter > div.content > div:not(.slot-handler) {\n  padding: var(--space-unit) calc(var(--space-unit) * 2);\n}\n\nfooter > div.content > div > p {\n  overflow: hidden;\n  height: 20px;\n  padding: 0;\n  margin: 0;\n  font-size: 14px;\n  line-height: 20px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\nfooter > div.content > div > p.year-isbn {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  padding-top: var(--space-unit);\n}\n\nfooter > div.content > div > p.year-isbn > span.isbn {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\nfooter.isopen > div.content > div:not(.slot-handler) {\n  height: 68px;\n}\n\nfooter.isopen > div.content > div > p.authors {\n  height: 40px;\n  text-overflow: initial;\n  white-space: initial;\n}\n\nfooter.isopen > div.content > div > p.year-isbn {\n  height: 50px;\n  flex-direction: column;\n  padding-left: 0;\n}\n\nfooter.isopen > div.content > div > p.year-isbn > span.isbn {\n  display: inline-grid;\n  padding-left: 0;\n}\n\nfooter.isopen {\n  top: -212px;\n  height: 295px;\n  transition: height 500ms ease-in-out, top 500ms ease-in-out;\n}\n\nfooter.isopen.custom-content {\n  top: -292px;\n}\n\nfooter.isopen > div.content {\n  height: 280px;\n  transition: height 500ms ease-in-out, top 500ms ease-in-out;\n}\n\nfooter.isopen.custom-content > div.content {\n  height: 230px;\n}\n\n.toggle {\n  position: absolute;\n  z-index: 10;\n  top: -24px;\n  left: 16px;\n}\n\n.faded {\n  opacity: 0.3;\n  pointer-events: none;\n}\n\nfooter > p.custom-content,\nfooter .content.custom-content {\n  display: none;\n}\n\nfooter.isopen > p.custom-content,\nfooter.isopen .content.custom-content {\n  display: block;\n}\n\ndiv.wrapper {\n  position: relative;\n  height: 100%;\n}\n\ndiv.wrapper ::slotted([slot=\"content\"]) {\n  position: absolute;\n  z-index: 10;\n  top: calc(var(--space-unit) * 2);\n  display: block;\n  width: 100%;\n  height: 112px;\n  box-sizing: border-box;\n  padding: 0 calc(var(--space-unit) * 2);\n  border-top: var(--border-size-medium) solid transparent;\n  background: var(--color-white);\n}\n\ndiv.wrapper.isopen ::slotted([slot=\"content\"]) {\n  top: 0;\n  bottom: 0;\n  height: 128px;\n  padding: calc(var(--space-unit) * 2);\n  border-color: var(--blue100);\n}\n","import {Element, Component, Prop, h, State, Listen} from \"@stencil/core\";\nimport {JSXBase} from \"@stencil/core/internal\";\nimport {LicenseType} from \"../../../../beans/index\";\n\n/**\n * @slot toggle - toggle button slot\n * @slot list - card resources list slot\n */\n@Component({\n  tag: \"z-myz-card-footer\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardFooter {\n  @Element() host: HTMLZMyzCardFooterElement;\n\n  /** volume title */\n  @Prop()\n  titolo: string;\n\n  /** authors name text */\n  @Prop()\n  autori: string;\n\n  /** volume isbn */\n  @Prop()\n  isbn: string;\n\n  /** faded status */\n  @Prop()\n  faded: boolean;\n\n  /** card graphic variant (optional) */\n  @Prop()\n  cardtype?: LicenseType;\n\n  /** footer opened by default (optional) */\n  @Prop()\n  opened?: boolean = false;\n\n  /** display footer custom slotted content */\n  @Prop()\n  customContent = false;\n\n  @State()\n  isOpen = false;\n\n  @State()\n  allowTooltipAuthors = false;\n\n  private ellipsisAuthors?: HTMLElement;\n\n  @Listen(\"toggleClick\")\n  handleToggle(): void {\n    this.isOpen = !this.isOpen;\n    if (this.isOpen) {\n      const firstElem = this.getFirstListItem();\n      if (firstElem) {\n        requestAnimationFrame(() => {\n          firstElem.focus();\n        });\n      }\n    }\n  }\n\n  private getTitleAuthors(): string {\n    return this.allowTooltipAuthors ? this.autori : \"\";\n  }\n\n  componentWillLoad(): void {\n    if (this.opened) {\n      this.isOpen = true;\n    }\n  }\n\n  private elementsEllipsis(): void {\n    this.allowTooltipAuthors = this.elementAuthorsHasEllipsis() ? true : false;\n  }\n\n  private elementAuthorsHasEllipsis(): boolean {\n    return this.ellipsisAuthors.offsetWidth < this.ellipsisAuthors.scrollWidth;\n  }\n\n  private retrieveClass(): JSXBase.HTMLAttributes[\"class\"] {\n    return {\n      \"isopen\": this.isOpen,\n      \"real\": this.cardtype === LicenseType.REAL,\n      \"trial\": this.cardtype === LicenseType.TRIAL,\n      \"temp\": this.cardtype === LicenseType.TEMP,\n      \"custom-content\": this.customContent,\n    };\n  }\n\n  private footerTransitionHandler(e: TransitionEvent): void {\n    if ([\"visibility\", \"height\"].includes(e.propertyName)) {\n      this.elementsEllipsis();\n    }\n  }\n\n  private getFirstListItem(): HTMLElement {\n    return this.host.querySelector(\"[slot=list] > li a\");\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div class={{...(this.retrieveClass() as Record<string, boolean>), wrapper: true}}>\n        <footer\n          class={this.retrieveClass()}\n          onTransitionEnd={(e: TransitionEvent) => this.footerTransitionHandler(e)}\n        >\n          <span class=\"toggle\">\n            <slot name=\"toggle\" />\n          </span>\n          {this.titolo && <p class={{\"custom-content\": this.customContent}}>{this.titolo}</p>}\n          <div class={{\"content\": true, \"custom-content\": this.customContent}}>\n            <div>\n              <p\n                class=\"authors\"\n                ref={(el) => (this.ellipsisAuthors = el as HTMLElement)}\n              >\n                <span title={this.getTitleAuthors()}>\n                  <span\n                    aria-description=\"Autori\"\n                    class=\"bold\"\n                  >\n                    {this.autori}\n                  </span>\n                </span>\n              </p>\n              <p class=\"year-isbn\">\n                <span class=\"isbn\">\n                  <span>\n                    <span\n                      aria-description=\"ISBN edizione cartacea\"\n                      class=\"bold\"\n                    >\n                      {this.isbn}\n                    </span>{\" \"}\n                    (ed. cartacea)\n                  </span>\n                </span>\n              </p>\n            </div>\n            <div class={`slot-handler ${this.isOpen ? \"visible\" : \"hidden\"}`}>\n              <slot name=\"list\" />\n            </div>\n          </div>\n        </footer>\n        {this.customContent && <slot name=\"content\" />}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/z-myz-card-header.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ZMyzCardHeader extends Components.ZMyzCardHeader, HTMLElement {}
+export const ZMyzCardHeader: {
+    prototype: ZMyzCardHeader;
+    new (): ZMyzCardHeader;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,8 @@
+import { Z as ZMyzCardHeader$1, d as defineCustomElement$1 } from './index19.js';
+
+const ZMyzCardHeader = ZMyzCardHeader$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZMyzCardHeader, defineCustomElement };
+
+//# sourceMappingURL=z-myz-card-header.js.map

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

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

package/dist/components/z-myz-card-icon.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ZMyzCardIcon extends Components.ZMyzCardIcon, HTMLElement {}
+export const ZMyzCardIcon: {
+    prototype: ZMyzCardIcon;
+    new (): ZMyzCardIcon;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,49 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './index9.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: 'e68fbaeb5c1d0522eebc83712a35599040eb6e29', disabled: this.isdisabled, "aria-label": this.ariaLabel }, h("span", { key: '221fd2a3d3b6a5f540488000659d405ac9b6cdb1' }, h("z-icon", { key: '244e5acf3ecd37c1db63f094e1783500814cdd6d', 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.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ZMyzCardInfo extends Components.ZMyzCardInfo, HTMLElement {}
+export const ZMyzCardInfo: {
+    prototype: ZMyzCardInfo;
+    new (): ZMyzCardInfo;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,162 @@
+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 './index9.js';
+import { d as defineCustomElement$2 } from './index25.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-secondary02);font-size:12px;font-weight:600}:host>div>div.content-wrapper>section>span.license-heading>span.expiring{color:var(--color-warning01);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: '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' }))));
+    }
+    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-secondary02);\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-warning01);\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, Prop, h, Event, EventEmitter, State} 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}