@zanichelli/albe-web-components 12.1.3-rc.0 → 12.1.3

package/dist/cjs/z-menu.cjs.entry.js

@@ -2,114 +2,118 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-dc60bee7.js');
+const index = require('./index-195ca522.js');
 
 const stylesCss = ":host,::slotted(*),*{box-sizing:border-box}:host{position:relative;display:inline-flex;flex-direction:column;--z-menu-label-color:var(--color-text01)}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-text01);font-family:var(--font-family-sans);font-weight:var(--font-rg)}.menu-label{padding:0;border:0;margin:0;background:transparent;border-radius:0;color:inherit;outline:none;text-align:left}button.menu-label{cursor:pointer}.menu-label:focus-within{z-index:1;padding-right:calc(var(--space-unit) * 0.5);padding-left:calc(var(--space-unit) * 0.5);margin-right:calc(var(--space-unit) * -0.5);margin-left:calc(var(--space-unit) * -0.5);box-shadow:var(--shadow-focus-primary)}.menu-label .menu-label-content{position:relative;display:flex;align-items:center}:host(:is([active],[open])) .menu-label-content,.menu-label:focus-within .menu-label-content{font-weight:var(--font-bd)}:host(:is([active],[open])) .menu-label-content ::slotted(*),.menu-label:focus-within .menu-label-content ::slotted(*){letter-spacing:normal}:host .menu-label .menu-label-content ::slotted(*:not([slot]):focus:focus-visible){box-shadow:none !important}:host(:is([active],[open],[vertical-context])) .menu-label .menu-label-content::after,.menu-label .menu-label-content:hover::after,.menu-label:focus-within .menu-label-content::after{position:absolute;bottom:0;left:0;width:100%;content:\"\";pointer-events:none}:host([vertical-context]) .menu-label-content::after{height:var(--border-size-small);background-color:var(--color-surface03)}:host(:is([active],[open])) .menu-label .menu-label-content::after,.menu-label .menu-label-content:hover::after,.menu-label:focus-within .menu-label-content::after{height:var(--border-size-large);background-color:var(--color-secondary01)}::slotted([data-text])::after{height:0;content:attr(data-text);content:attr(data-text) / \"\";font-weight:var(--font-bd);letter-spacing:normal;pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text])::after{display:none}}::slotted([data-text]){display:inline-flex;flex-direction:column}.menu-label .menu-label-content ::slotted(*){display:inline-flex;width:100%;margin:0;appearance:none;color:var(--z-menu-label-color);font-family:var(--font-family-sans);font-size:var(--font-size-5);font-weight:inherit;letter-spacing:0.36px;line-height:1.2;outline:none}.menu-label .menu-label-content ::slotted(*),.menu-label .menu-label-content z-icon{padding:var(--space-unit) 0}.menu-label .menu-label-content z-icon{margin-left:calc(var(--space-unit) * 1.5);fill:currentcolor}.content{background:var(--color-surface01)}:host(:not([open])) .content{display:none}:host([floating]) .content{position:absolute;top:100%;left:0;width:375px;min-width:100%;max-width:100vw;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2);box-shadow:var(--shadow-2)}:host(:not([floating])) .content{width:100%}.header{display:flex;align-items:center;padding:var(--space-unit) 0 calc(var(--space-unit) * 2)}.header ::slotted(img[slot=\"header\"]){width:calc(var(--space-unit) * 11.25);height:auto;object-fit:contain}.header ::slotted([slot=\"header\"]:not(:first-child)){margin:auto 0;margin-left:calc(var(--space-unit) * 2.5);font-size:var(--font-size-3);font-weight:var(--font-sb);line-height:1.5}.items{display:flex;flex-direction:column;align-items:flex-start;background:inherit}.items>::slotted([slot=\"item\"]){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.25;outline:none}.items>::slotted([slot=\"item\"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}.items>::slotted([slot=\"item\"]:not(z-menu-section)){padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);border-bottom:var(--border-size-small) solid var(--color-surface05)}.items>::slotted([slot=\"item\"]:hover),.items>::slotted([slot=\"item\"]:focus:focus-visible),.items>::slotted([slot=\"item\"]:active){border-color:var(--color-secondary01);font-weight:var(--font-bd)}";
-const ZMenuStyle0 = stylesCss;
 
 const ZMenu = class {
-    toggle() {
-        if (!this.hasContent) {
-            return;
-        }
-        this.open = !this.open;
-        this.open ? this.opened.emit() : this.closed.emit();
-    }
-    /** Close the floating list when a click is performed outside of this Element. */
-    handleClick(ev) {
-        if (!this.floating || !this.open || this.hostElement.contains(ev.target)) {
-            return;
-        }
-        this.reflow();
-        this.open = false;
-        this.closed.emit();
-    }
-    onOpenChanged() {
-        if (this.open) {
-            this.reflow(true);
-        }
-        else {
-            cancelAnimationFrame(this.raf);
-        }
-    }
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.opened = index.createEvent(this, "opened", 7);
-        this.closed = index.createEvent(this, "closed", 7);
-        this.active = undefined;
-        this.floating = false;
-        this.open = false;
-        this.verticalContext = false;
-        this.hasHeader = undefined;
-        this.hasContent = undefined;
-        this.toggle = this.toggle.bind(this);
-        this.checkContent = this.checkContent.bind(this);
-        this.onLabelSlotChange = this.onLabelSlotChange.bind(this);
-        this.onItemsChange = this.onItemsChange.bind(this);
-    }
-    componentWillLoad() {
-        this.checkContent();
-    }
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.opened = index.createEvent(this, "opened", 7);
+    this.closed = index.createEvent(this, "closed", 7);
     /**
-     * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.
-     * @param ev Slotchange event
+     * Flag to set the display mode of the list.
+     * If true, the list will be absolutely positioned under the menu label,
+     * stacked beneath it otherwise.
      */
-    onLabelSlotChange(ev) {
-        const labelElement = ev.target.assignedElements()[0];
-        labelElement.dataset.text = labelElement === null || labelElement === void 0 ? void 0 : labelElement.textContent;
-    }
+    this.floating = false;
+    /** The opening state of the menu. */
+    this.open = false;
     /**
-     * Correctly set position of the floating menu in order to prevent overflow.
-     * @param live Should run the method on every refresh frame.
+     * Tells the component that it's placed in a vertical context with other `ZMenu`s (e.g. in the ZAppHeader's offcanvas).
+     * A small border is placed under it as a separator from other elements.
      */
-    reflow(live = false) {
-        if (this.content) {
-            const { style } = this.content;
-            const { left } = this.hostElement.getBoundingClientRect();
-            const widthPx = getComputedStyle(this.content).width;
-            const width = widthPx ? parseFloat(widthPx.replace("px", "")) : 375;
-            const safeScrollbarSpace = 30;
-            style.left = `${Math.min(window.innerWidth - left - width - safeScrollbarSpace, 0)}px`;
-        }
-        if (live) {
-            this.raf = requestAnimationFrame(this.reflow.bind(this, live));
-        }
+    this.verticalContext = false;
+    this.toggle = this.toggle.bind(this);
+    this.checkContent = this.checkContent.bind(this);
+    this.onLabelSlotChange = this.onLabelSlotChange.bind(this);
+    this.onItemsChange = this.onItemsChange.bind(this);
+  }
+  toggle() {
+    if (!this.hasContent) {
+      return;
     }
-    /**
-     * Check if some content slot is set.
-     */
-    checkContent() {
-        this.hasHeader = !!this.hostElement.querySelectorAll("[slot=header]").length;
-        this.hasContent = !!this.hostElement.querySelectorAll("[slot=item]").length || this.hasHeader;
+    this.open = !this.open;
+    this.open ? this.opened.emit() : this.closed.emit();
+  }
+  /** Close the floating list when a click is performed outside of this Element. */
+  handleClick(ev) {
+    if (!this.floating || !this.open || this.hostElement.contains(ev.target)) {
+      return;
     }
-    /**
-     * Set `menuitem` role to all menu items.
-     * Set the item's inner text to the `data-text` attribute (this is for using bold text avoiding layout shifts).
-     */
-    onItemsChange() {
-        this.checkContent();
-        const items = this.hostElement.querySelectorAll("[slot=item]");
-        items.forEach((item) => {
-            item.setAttribute("role", "menuitem");
-            item.dataset.text = item.textContent;
-        });
+    this.reflow();
+    this.open = false;
+    this.closed.emit();
+  }
+  onOpenChanged() {
+    if (this.open) {
+      this.reflow(true);
     }
-    renderMenuLabel() {
-        if (this.hasContent) {
-            return (index.h("button", { class: "menu-label", "aria-expanded": this.open ? "true" : "false", "aria-label": this.open ? "Chiudi menù" : "Apri menù", onClick: this.toggle }, index.h("div", { class: "menu-label-content" }, index.h("slot", { onSlotchange: this.onLabelSlotChange }), index.h("z-icon", { name: this.open ? "chevron-up" : "chevron-down" }))));
-        }
-        return (index.h("div", { class: "menu-label" }, index.h("div", { class: "menu-label-content" }, index.h("slot", { onSlotchange: this.onLabelSlotChange }))));
+    else {
+      cancelAnimationFrame(this.raf);
     }
-    render() {
-        return (index.h(index.Host, { key: 'f76898d2bf69ae311b8e0ae16ac15651a72aff19' }, this.renderMenuLabel(), this.hasContent && (index.h("div", { class: "content", ref: (el) => (this.content = el) }, this.hasHeader && (index.h("header", { class: "header" }, index.h("slot", { name: "header", onSlotchange: this.checkContent }))), index.h("div", { class: "items", role: "menu" }, index.h("slot", { name: "item", onSlotchange: this.onItemsChange }))))));
+  }
+  componentWillLoad() {
+    this.checkContent();
+  }
+  /**
+   * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.
+   * @param ev Slotchange event
+   */
+  onLabelSlotChange(ev) {
+    const labelElement = ev.target.assignedElements()[0];
+    labelElement.dataset.text = labelElement === null || labelElement === void 0 ? void 0 : labelElement.textContent;
+  }
+  /**
+   * Correctly set position of the floating menu in order to prevent overflow.
+   * @param live Should run the method on every refresh frame.
+   */
+  reflow(live = false) {
+    if (this.content) {
+      const { style } = this.content;
+      const { left } = this.hostElement.getBoundingClientRect();
+      const widthPx = getComputedStyle(this.content).width;
+      const width = widthPx ? parseFloat(widthPx.replace("px", "")) : 375;
+      const safeScrollbarSpace = 30;
+      style.left = `${Math.min(window.innerWidth - left - width - safeScrollbarSpace, 0)}px`;
     }
-    get hostElement() { return index.getElement(this); }
-    static get watchers() { return {
-        "open": ["onOpenChanged"]
-    }; }
+    if (live) {
+      this.raf = requestAnimationFrame(this.reflow.bind(this, live));
+    }
+  }
+  /**
+   * Check if some content slot is set.
+   */
+  checkContent() {
+    this.hasHeader = !!this.hostElement.querySelectorAll("[slot=header]").length;
+    this.hasContent = !!this.hostElement.querySelectorAll("[slot=item]").length || this.hasHeader;
+  }
+  /**
+   * Set `menuitem` role to all menu items.
+   * Set the item's inner text to the `data-text` attribute (this is for using bold text avoiding layout shifts).
+   */
+  onItemsChange() {
+    this.checkContent();
+    const items = this.hostElement.querySelectorAll("[slot=item]");
+    items.forEach((item) => {
+      item.setAttribute("role", "menuitem");
+      item.dataset.text = item.textContent;
+    });
+  }
+  renderMenuLabel() {
+    if (this.hasContent) {
+      return (index.h("button", { class: "menu-label", "aria-expanded": this.open ? "true" : "false", "aria-label": this.open ? "Chiudi menù" : "Apri menù", onClick: this.toggle }, index.h("div", { class: "menu-label-content" }, index.h("slot", { onSlotchange: this.onLabelSlotChange }), index.h("z-icon", { name: this.open ? "chevron-up" : "chevron-down" }))));
+    }
+    return (index.h("div", { class: "menu-label" }, index.h("div", { class: "menu-label-content" }, index.h("slot", { onSlotchange: this.onLabelSlotChange }))));
+  }
+  render() {
+    return (index.h(index.Host, null, this.renderMenuLabel(), this.hasContent && (index.h("div", { class: "content", ref: (el) => (this.content = el) }, this.hasHeader && (index.h("header", { class: "header" }, index.h("slot", { name: "header", onSlotchange: this.checkContent }))), index.h("div", { class: "items", role: "menu" }, index.h("slot", { name: "item", onSlotchange: this.onItemsChange }))))));
+  }
+  get hostElement() { return index.getElement(this); }
+  static get watchers() { return {
+    "open": ["onOpenChanged"]
+  }; }
 };
-ZMenu.style = ZMenuStyle0;
+ZMenu.style = stylesCss;
 
 exports.z_menu = ZMenu;
-
-//# sourceMappingURL=z-menu.cjs.entry.js.map

package/dist/cjs/z-messages-pocket.cjs.entry.js

@@ -2,49 +2,45 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-dc60bee7.js');
-const index$1 = require('./index-39ce4edf.js');
+const index = require('./index-195ca522.js');
+const index$1 = require('./index-cf9497bc.js');
 
 const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>z-pocket{width:100%}:host>z-pocket.closed{width:158px}:host>z-pocket>z-pocket-header{color:var(--color-primary01);fill:var(--color-primary01);font-size:12px;font-weight:var(--font-sb)}:host>z-pocket>z-pocket-header span.badge{display:inline-block;padding:0 calc(var(--space-unit) * 0.5);margin-left:var(--space-unit);background:var(--color-secondary02);border-radius:50%;color:var(--color-surface01)}:host>z-pocket>z-pocket-header>z-icon{margin-left:var(--space-unit)}:host>z-pocket>z-pocket-body>div.body{overflow:hidden;padding:var(--space-unit);margin:0 var(--space-unit)}:host>z-pocket.preview>z-pocket-body{position:relative}:host>z-pocket.preview>z-pocket-body>div.gradient{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgb(255 0 0 / 0%), white)}:host>z-pocket.open>z-pocket-body>div.body{overflow:auto;max-height:calc(100vh - 166px);scrollbar-width:none}:host ::-webkit-scrollbar{width:0}@media only screen and (min-width: 768px){:host>z-pocket{width:768px;margin:0 calc((100% - 768px) / 2)}:host>z-pocket.closed{margin:0 calc((100% - 158px) / 2)}:host>z-pocket.open>z-pocket-body>div.body{max-height:326px}}@media only screen and (min-width: 1152px){:host>z-pocket.open>z-pocket-body>div.body{scrollbar-color:var(--color-primary01) var(--color-surface03);scrollbar-width:thin}:host ::-webkit-scrollbar{width:10px;background:linear-gradient(\n      90deg,\n      var(--color-surface01) 2px,\n      var(--color-surface03) 4px,\n      var(--color-surface01) 8px\n    );border-radius:var(--border-radius)}:host ::-webkit-scrollbar-thumb{width:var(--space-unit);background-color:var(--color-primary01);border-radius:var(--border-radius)}}";
-const ZMessagesPocketStyle0 = stylesCss;
 
 const ZMessagesPocket = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.pocketid = undefined;
-        this.messages = undefined;
-        this.status = index$1.PocketStatus.PREVIEW;
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** pocket status */
+    this.status = index$1.PocketStatus.PREVIEW;
+  }
+  handlePocketToggle(e) {
+    if (e.detail.id === this.pocketid) {
+      this.status = e.detail.status;
     }
-    handlePocketToggle(e) {
-        if (e.detail.id === this.pocketid) {
-            this.status = e.detail.status;
-        }
-    }
-    renderHeader() {
-        let message;
-        let icon;
-        switch (this.status) {
-            case index$1.PocketStatus.PREVIEW:
-            case index$1.PocketStatus.CLOSED:
-                message = (index.h("span", null, "Messaggi ", index.h("span", { class: "badge" }, this.messages)));
-                icon = "chevron-up";
-                break;
-            case index$1.PocketStatus.OPEN:
-                message = index.h("span", null, "Riduci");
-                icon = "chevron-down";
-                break;
-        }
-        return (index.h("z-pocket-header", { pocketid: this.pocketid }, message, index.h("z-icon", { name: icon, width: 14, height: 14 })));
-    }
-    renderBody() {
-        return (index.h("z-pocket-body", { pocketid: this.pocketid }, index.h("div", { class: "body" }, index.h("slot", null)), index.h("div", { class: "gradient" })));
-    }
-    render() {
-        return (index.h("z-pocket", { key: '3aefef3d845cb5f672ed037667da8d59bf2355dd', pocketid: this.pocketid, status: this.status, class: this.status }, this.renderHeader(), this.renderBody()));
+  }
+  renderHeader() {
+    let message;
+    let icon;
+    switch (this.status) {
+      case index$1.PocketStatus.PREVIEW:
+      case index$1.PocketStatus.CLOSED:
+        message = (index.h("span", null, "Messaggi ", index.h("span", { class: "badge" }, this.messages)));
+        icon = "chevron-up";
+        break;
+      case index$1.PocketStatus.OPEN:
+        message = index.h("span", null, "Riduci");
+        icon = "chevron-down";
+        break;
     }
+    return (index.h("z-pocket-header", { pocketid: this.pocketid }, message, index.h("z-icon", { name: icon, width: 14, height: 14 })));
+  }
+  renderBody() {
+    return (index.h("z-pocket-body", { pocketid: this.pocketid }, index.h("div", { class: "body" }, index.h("slot", null)), index.h("div", { class: "gradient" })));
+  }
+  render() {
+    return (index.h("z-pocket", { pocketid: this.pocketid, status: this.status, class: this.status }, this.renderHeader(), this.renderBody()));
+  }
 };
-ZMessagesPocket.style = ZMessagesPocketStyle0;
+ZMessagesPocket.style = stylesCss;
 
 exports.z_messages_pocket = ZMessagesPocket;
-
-//# sourceMappingURL=z-messages-pocket.cjs.entry.js.map

package/dist/cjs/z-myz-card-alert.cjs.entry.js

@@ -2,69 +2,62 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-dc60bee7.js');
-const index$1 = require('./index-39ce4edf.js');
+const index = require('./index-195ca522.js');
+const index$1 = require('./index-cf9497bc.js');
 
 const stylesCss = ":host{position:absolute;z-index:2;top:0;left:0;width:100%;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>z-alert{height:calc(var(--space-unit) * 6)}.relative-container{position:relative;display:grid;align-items:center;padding:0;grid-column-gap:var(--space-unit);grid-template-columns:18px auto 46px;grid-template-rows:1fr;outline:none}.relative-container::-moz-focus-inner{border:0}.alert-external-wrapper.remove-alert{border:var(--border-size-medium) solid var(--color-surface02);border-top:none}:host div.add-alert{background:var(--color-success-inverse)}:host div.remove-alert{background:var(--color-warning-inverse)}:host div>.content-text{color:var(--color-surface05);font-size:14px;letter-spacing:0.16px;line-height:20px}:host div>.content-action{height:20px;color:var(--color-primary01);cursor:pointer;font-size:12px;font-weight:var(--font-sb);letter-spacing:0.32px;line-height:20px}:host div>z-icon{justify-self:center}";
-const ZMyzCardAlertStyle0 = stylesCss;
 
 const ZMyzCardAlert = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.undoAction = index.createEvent(this, "undoAction", 7);
-        this.iconname = undefined;
-        this.contenttext = undefined;
-        this.actiontext = undefined;
-        this.type = undefined;
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.undoAction = index.createEvent(this, "undoAction", 7);
+  }
+  emitUndoAction() {
+    this.undoAction.emit({ actionType: this.type });
+  }
+  handleSpaceKeyPress(e) {
+    if (e.keyCode == 32 || e.keyCode == 13) {
+      e.preventDefault();
+      this.emitUndoAction();
     }
-    emitUndoAction() {
-        this.undoAction.emit({ actionType: this.type });
+  }
+  handleActionButtonClick(e) {
+    e.preventDefault();
+    this.emitUndoAction();
+  }
+  retrieveClass() {
+    let className = "";
+    switch (this.type) {
+      case "add":
+        className = "add-alert";
+        break;
+      case "remove":
+        className = "remove-alert";
+        break;
+      default:
+        className = "";
+        break;
     }
-    handleSpaceKeyPress(e) {
-        if (e.keyCode == 32 || e.keyCode == 13) {
-            e.preventDefault();
-            this.emitUndoAction();
-        }
-    }
-    handleActionButtonClick(e) {
-        e.preventDefault();
-        this.emitUndoAction();
-    }
-    retrieveClass() {
-        let className = "";
-        switch (this.type) {
-            case "add":
-                className = "add-alert";
-                break;
-            case "remove":
-                className = "remove-alert";
-                break;
-            default:
-                className = "";
-                break;
-        }
-        return className;
-    }
-    getAlertType() {
-        switch (this.type) {
-            case "add":
-                return index$1.AlertType.SUCCESS;
-            case "remove":
-                return index$1.AlertType.WARNING;
-            default:
-                return null;
-        }
-    }
-    render() {
-        return (index.h("div", { key: '1b444689e78b349adce31ea4d4b318ae447acc05', class: "alert-external-wrapper " + this.retrieveClass() }, index.h("z-alert", { key: '8774b645a0c306246db8afbed890b372ae8dcdff', type: this.getAlertType() }, index.h("div", { key: '03df6396443cffd9b791a9b29b146f05f405a035', class: "relative-container" }, index.h("z-icon", { key: '7d0a21e9cd2dbbde634440b3e36f2d892023cc81', name: this.iconname, width: 18, height: 18, class: this.retrieveClass() }), index.h("span", { key: 'a0bc80e8f7b28cebba25ad3f8a5f9bf3233a6930', class: "content-text" }, this.contenttext), this.actiontext && !!this.actiontext.trim().length && (index.h("span", { role: "button", tabindex: "0", class: "content-action", onClick: (e) => {
-                this.handleActionButtonClick(e);
-            }, onKeyPress: (e) => {
-                this.handleSpaceKeyPress(e);
-            } }, this.actiontext))))));
+    return className;
+  }
+  getAlertType() {
+    switch (this.type) {
+      case "add":
+        return index$1.AlertType.SUCCESS;
+      case "remove":
+        return index$1.AlertType.WARNING;
+      default:
+        return null;
     }
+  }
+  render() {
+    return (index.h("div", { class: "alert-external-wrapper " + this.retrieveClass() }, index.h("z-alert", { type: this.getAlertType() }, index.h("div", { class: "relative-container" }, index.h("z-icon", { name: this.iconname, width: 18, height: 18, class: this.retrieveClass() }), index.h("span", { class: "content-text" }, this.contenttext), this.actiontext && !!this.actiontext.trim().length && (index.h("span", { role: "button", tabindex: "0", class: "content-action", onClick: (e) => {
+        this.handleActionButtonClick(e);
+      }, onKeyPress: (e) => {
+        this.handleSpaceKeyPress(e);
+      } }, this.actiontext))))));
+  }
 };
-ZMyzCardAlert.style = ZMyzCardAlertStyle0;
+ZMyzCardAlert.style = stylesCss;
 
 exports.z_myz_card_alert = ZMyzCardAlert;
-
-//# sourceMappingURL=z-myz-card-alert.cjs.entry.js.map

package/dist/cjs/z-myz-card-dictionary.cjs.entry.js

@@ -2,36 +2,35 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-dc60bee7.js');
-const index$1 = require('./index-39ce4edf.js');
+const index = require('./index-195ca522.js');
+const index$1 = require('./index-cf9497bc.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 = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.cardFlipped = index.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 (index.h("div", { key: '27902c8b5de865c26c56ba38e245b9bad6edbd18' }, index.h("z-myz-card", { key: 'fc8095edfa2a7d59331977975e24af5fb6e35930' }, index.h("z-myz-card-header", { key: '66dd4738696aa8417d36de2bcd4e8b6957a5f5e2', titolo: this.name }), index.h("div", { key: '5f825ad42844b2e895f17516e7b090d3c5ce8a6c', class: `content ${this.flipped ? "flipped" : ""}` }, index.h("div", { key: 'f86a2a9e7378ba99b4eacf5c106f1a0dce5f4f96', class: "front" }, index.h("z-myz-card-body", { key: 'ca603d9fde5d8eef714dce707d6d7107d3211e4d' }, index.h("z-myz-card-cover", { key: '63381a0912ced7fd24ad16865417c4e1da993e77', slot: "cover", titolo: this.name, img: this.cover, faded: this.disabled })), index.h("z-button", { key: '0cdfdcd7c39064180d4ec16bd5c0beb4b82c6e8c', class: { "hide-info": this.hideinfobtn }, variant: index$1.ButtonVariant.SECONDARY, icon: "informationsource", size: index$1.ButtonSize.X_SMALL, onClick: () => this.flipCard(true), disabled: this.flipped }, this.flipbuttonlabel)), index.h("div", { key: 'ca62bad1d808d9f5fec3b620fa558c0a6ecea908', class: "back" }, index.h("slot", { key: '068e582536a203fbf6bbd56eeef4ede786b89d1c', name: "info" }))), index.h("slot", { key: '97fb9bea58f45f42d81ff5344f34a9acaba32639' }))));
-    }
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.cardFlipped = index.createEvent(this, "cardFlipped", 7);
+    /** card is disabled */
+    this.disabled = false;
+    /** card is flipped */
+    this.flipped = false;
+    /** flip button label */
+    this.flipbuttonlabel = "INFO";
+    /** hide info button */
+    this.hideinfobtn = false;
+  }
+  handleFlipCard(e) {
+    this.flipCard(e.detail);
+  }
+  flipCard(showBack = true) {
+    this.flipped = showBack;
+    this.cardFlipped.emit(showBack);
+  }
+  render() {
+    return (index.h("div", null, index.h("z-myz-card", null, index.h("z-myz-card-header", { titolo: this.name }), index.h("div", { class: `content ${this.flipped ? "flipped" : ""}` }, index.h("div", { class: "front" }, index.h("z-myz-card-body", null, index.h("z-myz-card-cover", { slot: "cover", titolo: this.name, img: this.cover, faded: this.disabled })), index.h("z-button", { class: { "hide-info": this.hideinfobtn }, variant: index$1.ButtonVariant.SECONDARY, icon: "informationsource", size: index$1.ButtonSize.X_SMALL, onClick: () => this.flipCard(true), disabled: this.flipped }, this.flipbuttonlabel)), index.h("div", { class: "back" }, index.h("slot", { name: "info" }))), index.h("slot", null))));
+  }
 };
-ZMyzCardDictionary.style = ZMyzCardDictionaryStyle0;
+ZMyzCardDictionary.style = stylesCss;
 
 exports.z_myz_card_dictionary = ZMyzCardDictionary;
-
-//# sourceMappingURL=z-myz-card-dictionary.cjs.entry.js.map

package/dist/cjs/z-myz-card-footer-sections.cjs.entry.js

@@ -2,21 +2,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-dc60bee7.js');
+const index = require('./index-195ca522.js');
 
 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 = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    render() {
-        return (index.h("div", { key: '62c6d04f17701a66638885f241c6cee08411eb45' }, index.h("footer", { key: '935193a38295ec3b700b3c30a32aca8ed310b3ad' }, index.h("div", { key: '8c7af9e6f32e4353942a7831dea7f9875455e868', class: "top" }, index.h("slot", { key: '3a93460244816042d5a46a37909fe150b7dad333', name: "top" })), index.h("div", { key: '3bc02862cb0fcebbc1a763ba6f40e909cf39dbf1', class: "bottom" }, index.h("slot", { key: '600288fe385b411013722ca70809a8f841236563', name: "bottom" })))));
-    }
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h("div", null, index.h("footer", null, index.h("div", { class: "top" }, index.h("slot", { name: "top" })), index.h("div", { class: "bottom" }, index.h("slot", { name: "bottom" })))));
+  }
 };
-ZMyzCardFooterSections.style = ZMyzCardFooterSectionsStyle0;
+ZMyzCardFooterSections.style = stylesCss;
 
 exports.z_myz_card_footer_sections = ZMyzCardFooterSections;
-
-//# sourceMappingURL=z-myz-card-footer-sections.cjs.entry.js.map