@zanichelli/albe-web-components 2.47.3 → 3.0.0

package/dist/collection/components/z-skip-to-content/styles.css

@@ -0,0 +1,84 @@
+:host {
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+  position: absolute;
+  left: -100%;
+  background-color: #24f4ff;
+  padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 3);
+  height: 60px;
+  box-sizing: border-box;
+}
+
+:host.skip-to-content-visible,
+:host:focus {
+  position: static;
+  display: block;
+}
+
+:host > z-link {
+  display: block;
+  text-align: center;
+}
+
+:host > z-link.link-invisible {
+  height: 0;
+  width: 0;
+  overflow: hidden;
+}
+
+:host > z-link.link-visible {
+  height: initial;
+  width: initial;
+}
+
+:host.dark {
+  background-color: var(--bg-grey-800);
+  color: var(--color-white);
+}
+
+:host.light {
+  background-color: var(--bg-white);
+  color: var(--text-grey-800);
+  border: 2px solid var(--text-grey-800);
+}
+
+/* Tablet breakpoint */
+@media (min-width: 768px) {
+  :host > z-link {
+    text-align: left;
+  }
+}
+
+/* Desktop breakpoint */
+@media (min-width: 1152px) {
+  :host > z-link {
+    display: inline-block;
+    padding: 0 calc(var(--space-unit) * 3);
+    border-right: 1px solid var(--bg-grey-800);
+  }
+
+  :host > z-link.link-invisible {
+    height: initial;
+    width: initial;
+    overflow: initial;
+  }
+
+  :host > z-link:first-child {
+    padding-left: 0;
+  }
+
+  :host > z-link:last-child,
+  :host.dark > z-link:last-child,
+  :host.light > z-link:last-child {
+    border-right: none;
+    padding-right: 0;
+  }
+
+  :host.dark > z-link {
+    border-right: 1px solid var(--bg-white);
+  }
+}
+
+/* Wide breakpoint */
+@media (min-width: 1366px) {
+}

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

@@ -66,15 +66,15 @@ export class ZTable {
           h("div", { class: tableContentClass },
             h("slot", { name: "table-body" }),
             h("z-table-empty-box", { class: this.bordered && "bordered", message: this.message, subtitle: this.subtitle },
-              !!this.callToActionLabel && (h("z-button", { slot: "cta1", variant: ButtonVariantEnum.tertiary, onClick: () => this.callToAction.emit(), size: buttonSize }, this.callToActionLabel)),
-              !!this.callToActionTwoLabel && (h("z-button", { slot: "cta2", variant: ButtonVariantEnum.tertiary, onClick: () => this.callToActionTwo.emit(), size: buttonSize }, this.callToActionTwoLabel)))))));
+              !!this.callToActionLabel && (h("z-button-deprecated", { slot: "cta1", variant: ButtonVariantEnum.tertiary, onClick: () => this.callToAction.emit(), size: buttonSize }, this.callToActionLabel)),
+              !!this.callToActionTwoLabel && (h("z-button-deprecated", { slot: "cta2", variant: ButtonVariantEnum.tertiary, onClick: () => this.callToActionTwo.emit(), size: buttonSize }, this.callToActionTwoLabel)))))));
     }
     return (h(Host, null,
       h("div", { class: tableClass },
         h("slot", { name: "table-header" })),
       h("z-table-empty-box", { class: this.bordered && "bordered", message: this.message, subtitle: this.subtitle },
-        !!this.callToActionLabel && (h("z-button", { slot: "cta1", variant: ButtonVariantEnum.tertiary, onClick: () => this.callToAction.emit(), size: buttonSize }, this.callToActionLabel)),
-        !!this.callToActionTwoLabel && (h("z-button", { slot: "cta2", variant: ButtonVariantEnum.tertiary, onClick: () => this.callToActionTwo.emit(), size: buttonSize }, this.callToActionTwoLabel)))));
+        !!this.callToActionLabel && (h("z-button-deprecated", { slot: "cta1", variant: ButtonVariantEnum.tertiary, onClick: () => this.callToAction.emit(), size: buttonSize }, this.callToActionLabel)),
+        !!this.callToActionTwoLabel && (h("z-button-deprecated", { slot: "cta2", variant: ButtonVariantEnum.tertiary, onClick: () => this.callToActionTwo.emit(), size: buttonSize }, this.callToActionTwoLabel)))));
   }
   render() {
     const tableClass = `table ${this.empty ? "table-empty" : ""} ${this.bordered ? "table-bordered" : ""}

package/dist/collection/components/z-table/z-table-cell/index.js

@@ -19,7 +19,7 @@ export class ZTableCell {
           visible: this.isMenuOpened,
         }) },
         h("div", { class: "button-content" },
-          h("z-button", { icon: "contextual-menu", variant: ButtonVariantEnum.tertiary, size: ButtonSizeEnum["x-small"], onClick: () => this.handleMenu(), square: true }),
+          h("z-button-deprecated", { icon: "contextual-menu", variant: ButtonVariantEnum.tertiary, size: ButtonSizeEnum["x-small"], onClick: () => this.handleMenu(), square: true }),
           h("div", { class: classNames("contextual-menu-container", {
               visible: this.isMenuOpened,
             }) },

package/dist/collection/components/z-table/z-table-header/index.js

@@ -74,7 +74,7 @@ export class ZTableHeader {
           visible: this.isMenuOpened,
         }) },
         h("z-popover", { position: PopoverPosition["below-center"], "background-color": "gray200" },
-          h("z-button", { icon: "contextual-menu", variant: ButtonVariantEnum["tertiary"], size: ButtonSizeEnum["x-small"], square: true, slot: "trigger", onClick: () => this.handleMenuClick() }),
+          h("z-button-deprecated", { icon: "contextual-menu", variant: ButtonVariantEnum["tertiary"], size: ButtonSizeEnum["x-small"], square: true, slot: "trigger", onClick: () => this.handleMenuClick() }),
           h("div", { slot: "popover" },
             h("slot", { name: "contextual-menu" })))))));
   }

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

@@ -0,0 +1,218 @@
+import { Component, Prop, h, Element } from "@stencil/core";
+import classNames from "classnames";
+import { ButtonVariantEnum, ButtonTypeEnum, ButtonSizeEnum, } from "../../beans";
+/**
+ * @slot - button label
+ */
+export class ZButtonDeprecated {
+  constructor() {
+    /** HTML button disabled attribute. */
+    this.disabled = false;
+    /** HTML button type attribute. */
+    this.type = ButtonTypeEnum.button;
+    /** Graphical variant: `primary`, `secondary`, `tertiary`, `dark-bg`. Defaults to `primary`. */
+    this.variant = ButtonVariantEnum.primary;
+    /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
+    this.size = ButtonSizeEnum.big;
+    /** Reduce button size (deprecated).
+     * @deprecated Use `size` prop.
+     */
+    this.issmall = false;
+    /** Spy to render square button. */
+    this.square = false;
+  }
+  render() {
+    this.hostElement.style.pointerEvents = this.disabled ? "none" : "auto";
+    return (h("slot", { name: "element" },
+      h("button", { id: this.htmlid, name: this.name, type: this.type, disabled: this.disabled, class: classNames(this.variant, this.size, { issmall: this.issmall }, { square: this.square }) },
+        this.icon && h("z-icon", { name: this.icon, width: 16, height: 16 }),
+        h("slot", null))));
+  }
+  static get is() { return "z-button-deprecated"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "htmlid": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Identifier, should be unique."
+      },
+      "attribute": "htmlid",
+      "reflect": false
+    },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "HTML button name attribute."
+      },
+      "attribute": "name",
+      "reflect": false
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "HTML button disabled attribute."
+      },
+      "attribute": "disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "HTMLButtonElement[\"type\"]",
+        "resolved": "string",
+        "references": {
+          "HTMLButtonElement": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "HTML button type attribute."
+      },
+      "attribute": "type",
+      "reflect": false,
+      "defaultValue": "ButtonTypeEnum.button"
+    },
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "ButtonVariantBean",
+        "resolved": "ButtonVariantEnum.primary | ButtonVariantEnum.secondary | ButtonVariantEnum.tertiary | typeof ButtonVariantEnum[\"dark-bg\"]",
+        "references": {
+          "ButtonVariantBean": {
+            "location": "import",
+            "path": "../../beans"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Graphical variant: `primary`, `secondary`, `tertiary`, `dark-bg`. Defaults to `primary`."
+      },
+      "attribute": "variant",
+      "reflect": true,
+      "defaultValue": "ButtonVariantEnum.primary"
+    },
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "`z-icon` name to use (optional)."
+      },
+      "attribute": "icon",
+      "reflect": false
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "ButtonSizeEnum",
+        "resolved": "ButtonSizeEnum.big | ButtonSizeEnum.small | typeof ButtonSizeEnum[\"x-small\"]",
+        "references": {
+          "ButtonSizeEnum": {
+            "location": "import",
+            "path": "../../beans"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Available sizes: `big`, `small` and `x-small`. Defaults to `big`."
+      },
+      "attribute": "size",
+      "reflect": true,
+      "defaultValue": "ButtonSizeEnum.big"
+    },
+    "issmall": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "name": "deprecated",
+            "text": "Use `size` prop."
+          }],
+        "text": "Reduce button size (deprecated)."
+      },
+      "attribute": "issmall",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "square": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Spy to render square button."
+      },
+      "attribute": "square",
+      "reflect": true,
+      "defaultValue": "false"
+    }
+  }; }
+  static get elementRef() { return "hostElement"; }
+}

package/dist/collection/deprecated/z-button-deprecated/styles.css

@@ -0,0 +1,231 @@
+:host {
+  display: inline-block;
+
+  --z-icon-width: 16px;
+  --z-icon-height: 16px;
+  --z-icon-right-margin: var(--space-unit);
+  --rgb-white: 240, 240, 240
+}
+
+button:disabled,
+::slotted(button:disabled) {
+  pointer-events: none;
+}
+
+button,
+::slotted(button),
+::slotted(a) {
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  font-family: var(--dashboard-font);
+  font-weight: var(--font-sb);
+  font-size: 14px;
+  line-height: 1;
+  letter-spacing: 0.3px;
+  border-width: var(--border-size-medium);
+  border-style: solid;
+  border-radius: var(--border-radius);
+  vertical-align: middle;
+  text-transform: uppercase;
+  text-decoration: none;
+  cursor: pointer;
+  white-space: nowrap;
+  outline: none;
+  fill: currentColor;
+}
+
+button.big,
+:host([size="big"]) ::slotted(button),
+:host([size="big"]) ::slotted(a) {
+  height: 44px;
+  min-width: 44px;
+}
+
+button.small,
+:host([size="small"]) ::slotted(button),
+:host([size="small"]) ::slotted(a) {
+  height: 36px;
+  min-width: 36px;
+}
+
+button.issmall,
+:host([issmall]) ::slotted(button),
+:host([issmall]) ::slotted(a) {
+  height: 36px;
+  min-width: 36px;
+}
+
+button.x-small,
+:host([size="x-small"]) ::slotted(button),
+:host([size="x-small"]) ::slotted(a) {
+  height: 32px;
+  min-width: 32px;
+}
+
+button:not(.square),
+:host(:not([square])) ::slotted(button),
+:host(:not([square])) ::slotted(a) {
+  min-width: calc(var(--space-unit) * 8);
+  padding: 0 calc(var(--space-unit) * 2);
+}
+
+button.square,
+:host([square]) {
+  --z-icon-right-margin: 0;
+}
+
+button.primary,
+:host([variant="primary"]) ::slotted(button),
+:host([variant="primary"]) ::slotted(a) {
+  background-color: var(--color-primary01);
+  border-color: var(--color-primary01);
+  color: var(--color-text-inverse);
+}
+
+@media (hover: hover) {
+  button.primary:hover,
+  :host([variant="primary"]) ::slotted(button:hover),
+  :host([variant="primary"]) ::slotted(a:hover) {
+    background-color: var(--color-hover-primary);
+    border-color: var(--color-hover-primary);
+    color: var(--color-text-inverse);
+  }
+}
+
+button:focus:focus-visible,
+::slotted(button:focus:focus-visible),
+::slotted(a:focus:focus-visible) {
+  box-shadow: var(--shadow-focus-primary);
+}
+
+button.primary:active,
+:host([variant="primary"]) ::slotted(button:active),
+:host([variant="primary"]) ::slotted(a:active) {
+  background-color: var(--color-pressed-primary);
+  border-color: var(--color-pressed-primary);
+  color: var(--color-text-inverse);
+  box-shadow: var(--shadow-2);
+}
+
+button.primary:disabled,
+:host([variant="primary"]) ::slotted(button:disabled) {
+  background-color: var(--color-disabled01);
+  border-color: var(--color-disabled01);
+  color: var(--color-disabled02);
+}
+
+button.secondary,
+:host([variant="secondary"]) ::slotted(button),
+:host([variant="secondary"]) ::slotted(a) {
+  background-color: var(--color-surface01);
+  border-color: var(--color-primary01);
+  color: var(--color-primary01);
+}
+
+@media (hover: hover) {
+  button.secondary:hover,
+  :host([variant="secondary"]) ::slotted(button:hover),
+  :host([variant="secondary"]) ::slotted(a:hover) {
+    background-color: var(--color-surface01);
+    border-color: var(--color-hover-primary);
+    color: var(--color-hover-primary);
+  }
+}
+
+button.secondary:active,
+:host([variant="secondary"]) ::slotted(button:active),
+:host([variant="secondary"]) ::slotted(a:active) {
+  background-color: var(--color-surface01);
+  border-color: var(--color-pressed-primary);
+  color: var(--color-pressed-primary);
+  box-shadow: var(--shadow-2);
+}
+
+button.secondary:disabled,
+:host([variant="secondary"]) ::slotted(button:disabled) {
+  background-color: var(--color-surface01);
+  border-color: var(--color-disabled01);
+  color: var(--color-disabled02);
+}
+
+button.tertiary,
+:host([variant="tertiary"]) ::slotted(button),
+:host([variant="tertiary"]) ::slotted(a) {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--color-primary01);
+}
+
+button.tertiary.hasContent {
+  padding: 0 var(--space-unit);
+}
+
+@media (hover: hover) {
+  button.tertiary:hover,
+  :host([variant="tertiary"]) ::slotted(button:hover),
+  :host([variant="tertiary"]) ::slotted(a:hover) {
+    background-color: var(--color-primary03);
+    border-color: var(--color-primary03);
+    color: var(--color-hover-primary);
+  }
+}
+
+button.tertiary:focus:focus-visible,
+:host([variant="tertiary"]) ::slotted(button:focus:focus-visible),
+:host([variant="tertiary"]) ::slotted(a:focus:focus-visible) {
+  background-color: var(--color-surface01);
+  border-color: var(--color-surface01);
+  color: var(--color-primary01);
+}
+
+button.tertiary:active,
+:host([variant="tertiary"]) ::slotted(button:active),
+:host([variant="tertiary"]) ::slotted(a:active) {
+  background-color: var(--color-surface01);
+  border-color: var(--color-surface01);
+  color: var(--color-primary01);
+  box-shadow: var(--shadow-2);
+}
+
+button.tertiary:disabled,
+:host([variant="tertiary"]) ::slotted(button:disabled) {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--color-disabled02);
+}
+
+button.dark-bg,
+:host([variant="dark-bg"]) ::slotted(button),
+:host([variant="dark-bg"]) ::slotted(a) {
+  background-color: rgba(var(--rgb-white), 0.2);
+  border-color: transparent;
+  color: var(--color-text04);
+}
+
+button.dark-bg.hasContent {
+  padding: 0 var(--space-unit);
+}
+
+@media (hover: hover) {
+  button.dark-bg:hover,
+  :host([variant="dark-bg"]) ::slotted(button:hover),
+  :host([variant="dark-bg"]) ::slotted(a:hover) {
+    background-color: rgba(var(--rgb-white), 0.1);
+  }
+}
+
+button.dark-bg:active,
+:host([variant="dark-bg"]) ::slotted(button:active),
+:host([variant="dark-bg"]) ::slotted(a:active) {
+  background-color: rgba(var(--rgb-white), 0.3);
+}
+
+button.dark-bg:disabled,
+:host([variant="dark-bg"]) ::slotted(button:disabled) {
+  color: var(--color-disabled03);
+  background-color: rgba(var(--rgb-white), 0.05);
+}

package/dist/collection/snowflakes/myz/card/z-myz-card/styles.css

@@ -1,3 +1,7 @@
+:host {
+  --card-overflow: hidden;
+}
+
 div {
   background-color: var(--color-surface01);
   display: flex;
@@ -8,7 +12,7 @@ div {
   height: 522px;
   border: var(--border-size-medium) solid var(--color-surface03);
   border-radius: var(--border-radius);
-  overflow: hidden;
+  overflow: var(--card-overflow);
 }
 
 div.real,

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

@@ -30,7 +30,7 @@ export class ZMyzCardDictionary {
           h("div", { class: "front" },
             h("z-myz-card-body", null,
               h("z-myz-card-cover", { slot: "cover", titolo: this.name, img: this.cover, faded: this.disabled })),
-            h("z-button", { class: this.hideinfobtn ? "hideInfo" : "", variant: ButtonVariantEnum.secondary, icon: "informationsource", issmall: true, onClick: () => this.flipCard(true), disabled: this.flipped }, this.flipbuttonlabel)),
+            h("z-button-deprecated", { class: this.hideinfobtn ? "hideInfo" : "", variant: ButtonVariantEnum.secondary, icon: "informationsource", issmall: true, onClick: () => this.flipCard(true), disabled: this.flipped }, this.flipbuttonlabel)),
           h("div", { class: "back" },
             h("slot", { name: "info" }))),
         h("slot", null))));

package/dist/collection/snowflakes/myz/card/z-myz-card-dictionary/styles.css

@@ -3,6 +3,10 @@
   font-weight: var(--font-rg);
 }
 
+:host z-myz-card {
+  --card-overflow: visible;
+}
+
 :host > div {
   position: relative;
   height: 522px;
@@ -49,7 +53,7 @@
   transform: rotateY(0deg);
 }
 
-:host > div .front z-button {
+:host > div .front z-button-deprecated {
   position: absolute;
   z-index: 3;
   top: calc(var(--space-unit) * 0.5);

package/dist/collection/snowflakes/myz/topbar/index.js

@@ -138,7 +138,7 @@ export class ZMyzTopbar {
     if (this.hideloginbutton) {
       return;
     }
-    return (h("z-button", { htmlid: "login-button", variant: this.ismyz ? ButtonVariantEnum.secondary : ButtonVariantEnum.tertiary, icon: "login", issmall: true }, "entra"));
+    return (h("z-button-deprecated", { htmlid: "login-button", variant: this.ismyz ? ButtonVariantEnum.secondary : ButtonVariantEnum.tertiary, icon: "login", issmall: true }, "entra"));
   }
   renderMobileLoginDiv(userData) {
     return (h("div", { id: "mobile-login", class: "mobile-login" },