@zanichelli/albe-web-components 5.0.0 → 5.2.0

package/dist/collection/components/buttons/z-button/styles.css

@@ -9,7 +9,7 @@
   pointer-events: none;
 }
 
-:host .container {
+:host .z-button--container {
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
@@ -32,116 +32,116 @@
   fill: currentColor;
 }
 
-:host .container.has-text {
+:host .z-button--container:focus:focus-visible {
+  box-shadow: var(--shadow-focus-primary);
+}
+
+:host .z-button--container.z-button--has-text {
   min-width: calc(var(--space-unit) * 8);
   padding: 0 calc(var(--space-unit) * 2);
 }
 
-:host .container.has-text z-icon {
+:host .z-button--container.z-button--has-text z-icon {
   --z-icon-right-margin: var(--space-unit);
 }
 
-:host .big {
+:host([size="big"]) .z-button--container {
   height: 44px;
   min-width: 44px;
 }
 
-:host .small {
+:host([size="small"]) .z-button--container {
   height: 36px;
   min-width: 36px;
 }
 
-:host .x-small {
+:host([size="x-small"]) .z-button--container {
   height: 32px;
   min-width: 32px;
 }
 
-:host .primary {
+:host([variant="primary"]) .z-button--container {
   background-color: var(--color-primary01);
   border-color: var(--color-primary01);
   color: var(--color-text-inverse);
 }
 
 @media (hover: hover) {
-  :host .primary:hover {
+  :host([variant="primary"]) .z-button--container:hover {
     background-color: var(--color-hover-primary);
     border-color: var(--color-hover-primary);
     color: var(--color-text-inverse);
   }
 }
 
-:host .container:focus:focus-visible {
-  box-shadow: var(--shadow-focus-primary);
-}
-
-:host .primary:active {
+:host([variant="primary"]) .z-button--container:active {
   background-color: var(--color-pressed-primary);
   border-color: var(--color-pressed-primary);
   color: var(--color-text-inverse);
   box-shadow: var(--shadow-2);
 }
 
-:host([disabled]:not([disabled="false"])) .primary {
+:host([variant="primary"][disabled]:not([disabled="false"])) .z-button--container {
   background-color: var(--color-disabled01);
   border-color: var(--color-disabled01);
   color: var(--color-disabled02);
 }
 
-:host .secondary {
+:host([variant="secondary"]) .z-button--container {
   background-color: var(--color-surface01);
   border-color: var(--color-primary01);
   color: var(--color-primary01);
 }
 
 @media (hover: hover) {
-  :host .secondary:hover {
+  :host([variant="secondary"]) .z-button--container:hover {
     background-color: var(--color-surface01);
     border-color: var(--color-hover-primary);
     color: var(--color-hover-primary);
   }
 }
 
-:host .secondary:active {
+:host([variant="secondary"]) .z-button--container:active {
   background-color: var(--color-surface01);
   border-color: var(--color-pressed-primary);
   color: var(--color-pressed-primary);
   box-shadow: var(--shadow-2);
 }
 
-:host([disabled]:not([disabled="false"])) .secondary {
+:host([variant="secondary"][disabled]:not([disabled="false"])) .z-button--container {
   background-color: var(--color-surface01);
   border-color: var(--color-disabled01);
   color: var(--color-disabled02);
 }
 
-:host .tertiary {
+:host([variant="tertiary"]) .z-button--container {
   background-color: transparent;
   border-color: transparent;
   color: var(--color-primary01);
 }
 
 @media (hover: hover) {
-  :host .tertiary:hover {
+  :host([variant="tertiary"]) .z-button--container:hover {
     background-color: var(--color-primary03);
     border-color: var(--color-primary03);
     color: var(--color-hover-primary);
   }
 }
 
-:host .tertiary:focus:focus-visible {
+:host([variant="tertiary"]) .z-button--container:focus:focus-visible {
   background-color: var(--color-surface01);
   border-color: var(--color-surface01);
   color: var(--color-primary01);
 }
 
-:host .tertiary:active {
+:host([variant="tertiary"]) .z-button--container:active {
   background-color: var(--color-surface01);
   border-color: var(--color-surface01);
   color: var(--color-primary01);
   box-shadow: var(--shadow-2);
 }
 
-:host([disabled]:not([disabled="false"])) .tertiary {
+:host([variant="tertiary"][disabled]:not([disabled="false"])) .z-button--container {
   background-color: transparent;
   border-color: transparent;
   color: var(--color-disabled02);

package/dist/collection/components/file-upload/z-file/index.js

@@ -31,7 +31,7 @@ export class ZFile {
   }
   render() {
     return (h(Host, null,
-      this.allowPopover && (h("z-popover", { open: this.popoverVisible, position: PopoverPositions.AUTO, bindTo: this.chip },
+      this.allowPopover && (h("z-popover", { open: this.popoverVisible, position: PopoverPositions.auto, bindTo: this.chip },
         h("span", { class: "body-5 tooltip-content" }, this.ellipsis.innerText))),
       h("z-chip", { ref: (el) => (this.chip = el), id: `chip-${this.fileNumber}`, interactiveIcon: "multiply-circled", type: ZChipType.default },
         h("span", { ref: (el) => (this.ellipsis = el), tabIndex: -1 },

package/dist/collection/components/inputs/z-input/index.js

@@ -108,12 +108,33 @@ export class ZInput {
       onInput: (e) => this.emitInputChange(e.target.value),
     };
   }
+  getNumberAttributes(type) {
+    if (type != InputTypeEnum.number)
+      return;
+    return {
+      min: this.min,
+      max: this.max,
+      step: this.step,
+    };
+  }
+  getPatternAttribute(type) {
+    if (type != InputTypeEnum.password &&
+      type != InputTypeEnum.text &&
+      type != InputTypeEnum.tel &&
+      type != InputTypeEnum.search &&
+      type != InputTypeEnum.url &&
+      type != InputTypeEnum.email)
+      return;
+    return {
+      pattern: this.pattern,
+    };
+  }
   renderInputText(type = InputTypeEnum.text) {
-    const attr = this.getTextAttributes();
+    const attr = Object.assign(Object.assign(Object.assign({}, this.getTextAttributes()), this.getNumberAttributes(type)), this.getPatternAttribute(type));
     if (this.icon || type === InputTypeEnum.password) {
       attr.class = Object.assign(Object.assign({}, attr.class), { hasIcon: true });
     }
-    if (this.hasclearicon) {
+    if (this.hasclearicon && type != InputTypeEnum.number) {
       attr.class = Object.assign(Object.assign({}, attr.class), { hasClearIcon: true });
     }
     return (h("div", { class: "textWrapper" },
@@ -145,7 +166,11 @@ export class ZInput {
       h("z-icon", { name: this.icon })));
   }
   renderResetIcon() {
-    if (!this.hasclearicon || !this.value || this.disabled || this.readonly)
+    if (!this.hasclearicon ||
+      !this.value ||
+      this.disabled ||
+      this.readonly ||
+      this.type == InputTypeEnum.number)
       return;
     return (h("button", { type: "button", class: "iconButton resetIcon", "aria-label": "cancella il contenuto dell'input", onClick: () => this.emitInputChange("") },
       h("z-icon", { name: "multiply" })));
@@ -244,7 +269,7 @@ export class ZInput {
       "mutable": false,
       "complexType": {
         "original": "InputTypeBean",
-        "resolved": "\"checkbox\" | \"email\" | \"number\" | \"password\" | \"radio\" | \"text\" | \"textarea\"",
+        "resolved": "\"checkbox\" | \"email\" | \"number\" | \"password\" | \"radio\" | \"search\" | \"tel\" | \"text\" | \"textarea\" | \"url\"",
         "references": {
           "InputTypeBean": {
             "location": "import",
@@ -549,6 +574,74 @@ export class ZInput {
       },
       "attribute": "icon",
       "reflect": false
+    },
+    "min": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "min number value (optional): available for number"
+      },
+      "attribute": "min",
+      "reflect": false
+    },
+    "max": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "max number value (optional): available for number"
+      },
+      "attribute": "max",
+      "reflect": false
+    },
+    "step": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "step number value (optional): available for number"
+      },
+      "attribute": "step",
+      "reflect": false
+    },
+    "pattern": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "pattern value (optional): available for tel, text, search, url, email, password"
+      },
+      "attribute": "pattern",
+      "reflect": false
     }
   }; }
   static get states() { return {

package/dist/collection/components/notification/z-tooltip/index.js

@@ -11,7 +11,7 @@ import { PopoverPositions } from "../../../beans";
 export class ZTooltip {
   constructor() {
     /** Tooltip position. */
-    this.position = PopoverPositions.AUTO;
+    this.position = PopoverPositions.auto;
     /** Enable tooltip dark mode. */
     this.dark = false;
     /**
@@ -40,7 +40,7 @@ export class ZTooltip {
       "mutable": true,
       "complexType": {
         "original": "PopoverPositions",
-        "resolved": "PopoverPositions.AUTO | PopoverPositions.BOTTOM | PopoverPositions.BOTTOM_LEFT | PopoverPositions.BOTTOM_RIGHT | PopoverPositions.LEFT | PopoverPositions.LEFT_BOTTOM | PopoverPositions.LEFT_TOP | PopoverPositions.RIGHT | PopoverPositions.RIGHT_BOTTOM | PopoverPositions.RIGHT_TOP | PopoverPositions.TOP | PopoverPositions.TOP_LEFT | PopoverPositions.TOP_RIGHT",
+        "resolved": "PopoverPositions.auto | PopoverPositions.bottom | PopoverPositions.bottom_left | PopoverPositions.bottom_right | PopoverPositions.left | PopoverPositions.left_bottom | PopoverPositions.left_top | PopoverPositions.right | PopoverPositions.right_bottom | PopoverPositions.right_top | PopoverPositions.top | PopoverPositions.top_left | PopoverPositions.top_right",
         "references": {
           "PopoverPositions": {
             "location": "import",
@@ -56,7 +56,7 @@ export class ZTooltip {
       },
       "attribute": "position",
       "reflect": true,
-      "defaultValue": "PopoverPositions.AUTO"
+      "defaultValue": "PopoverPositions.auto"
     },
     "dark": {
       "type": "boolean",

package/dist/collection/components/z-contextual-menu/index.js

@@ -9,7 +9,7 @@ export class ZContextualMenu {
     /**
      * [optional] Sets the position of the popover
      */
-    this.popoverPosition = PopoverPositions.BOTTOM_RIGHT;
+    this.popoverPosition = PopoverPositions.bottom_right;
   }
   componentWillRender() {
     if (this.elements) {
@@ -94,7 +94,7 @@ export class ZContextualMenu {
       "mutable": false,
       "complexType": {
         "original": "PopoverPositions",
-        "resolved": "PopoverPositions.AUTO | PopoverPositions.BOTTOM | PopoverPositions.BOTTOM_LEFT | PopoverPositions.BOTTOM_RIGHT | PopoverPositions.LEFT | PopoverPositions.LEFT_BOTTOM | PopoverPositions.LEFT_TOP | PopoverPositions.RIGHT | PopoverPositions.RIGHT_BOTTOM | PopoverPositions.RIGHT_TOP | PopoverPositions.TOP | PopoverPositions.TOP_LEFT | PopoverPositions.TOP_RIGHT",
+        "resolved": "PopoverPositions.auto | PopoverPositions.bottom | PopoverPositions.bottom_left | PopoverPositions.bottom_right | PopoverPositions.left | PopoverPositions.left_bottom | PopoverPositions.left_top | PopoverPositions.right | PopoverPositions.right_bottom | PopoverPositions.right_top | PopoverPositions.top | PopoverPositions.top_left | PopoverPositions.top_right",
         "references": {
           "PopoverPositions": {
             "location": "import",
@@ -110,7 +110,7 @@ export class ZContextualMenu {
       },
       "attribute": "popover-position",
       "reflect": true,
-      "defaultValue": "PopoverPositions.BOTTOM_RIGHT"
+      "defaultValue": "PopoverPositions.bottom_right"
     }
   }; }
   static get events() { return [{

package/dist/collection/components/z-contextual-menu/styles.css

@@ -1,11 +1,15 @@
 :host {
-  display: flex;
   position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
 }
 
 button {
+  width: 100%;
+  height: 100%;
   border: none;
   background: transparent;
   cursor: pointer;

package/dist/collection/components/z-info-reveal/index.js

@@ -0,0 +1,143 @@
+import { Component, h, Prop, State, Watch, Element, Host, } from '@stencil/core';
+import { InfoRevealPosition } from "../../beans";
+/**
+ * Info reveal component.
+ *
+ * @slot - info to display in the info box. If more than one element has been slotted,
+ * by clicking on the panel it switches to the next info element.
+ * @cssprop --z-info-reveal-theme--surface - background color of the info reveal panel.
+ * @cssprop --z-info-reveal-theme--text - foreground color of the info reveal panel.
+ * @cssprop --z-info-reveal-shadow - shadow of the info reveal panel.
+ * @cssprop --z-info-reveal-max-width - max width of the info reveal panel.
+ */
+export class ZInfoReveal {
+  constructor() {
+    /** Name of the icon for the open button */
+    this.icon = 'informationsource';
+    this.position = InfoRevealPosition.bottom_right;
+    /** Whether the info panel is open. */
+    this.open = false;
+    /** Current index for the info queue. */
+    this.currentIndex = null;
+  }
+  watchItems() {
+    Array.from(this.el.children).forEach((child, index) => {
+      if (this.currentIndex === index) {
+        child.setAttribute('data-current', '');
+      }
+      else {
+        child.removeAttribute('data-current');
+      }
+    });
+  }
+  /**
+   * Open the info box.
+   */
+  openInfoBox() {
+    this.currentIndex = 0;
+    this.open = true;
+  }
+  /**
+   * Close the info box.
+   */
+  closeInfoBox() {
+    this.open = false;
+  }
+  /**
+   * Navigate slotted info.
+   * It closes the info box after the last info has been navigated.
+   */
+  next() {
+    this.currentIndex = this.currentIndex + 1;
+    if (this.currentIndex === this.el.children.length) {
+      this.closeInfoBox();
+    }
+  }
+  render() {
+    return h(Host, { open: this.open },
+      h("button", { class: "z-info-reveal-trigger", onClick: this.openInfoBox.bind(this) },
+        this.label && h("span", { class: "z-info-reveal-label" }, this.label),
+        h("z-icon", { name: this.icon })),
+      this.open && h("div", { class: "info-box", onClick: this.next.bind(this), tabIndex: 0 },
+        h("slot", null),
+        h("button", { class: "z-info-reveal-close", onClick: this.closeInfoBox.bind(this) },
+          h("z-icon", { name: "close" }))));
+  }
+  static get is() { return "z-info-reveal"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Name of the icon for the open button"
+      },
+      "attribute": "icon",
+      "reflect": false,
+      "defaultValue": "'informationsource'"
+    },
+    "position": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "InfoRevealPositionBean",
+        "resolved": "\"bottom_left\" | \"bottom_right\" | \"top_left\" | \"top_right\"",
+        "references": {
+          "InfoRevealPositionBean": {
+            "location": "import",
+            "path": "../../beans"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "position",
+      "reflect": true,
+      "defaultValue": "InfoRevealPosition.bottom_right"
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Text that appears on closed panel next to the open button."
+      },
+      "attribute": "label",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "open": {},
+    "currentIndex": {}
+  }; }
+  static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "currentIndex",
+      "methodName": "watchItems"
+    }]; }
+}

package/dist/collection/components/z-info-reveal/styles.css

@@ -0,0 +1,97 @@
+:host {
+  --z-info-reveal-theme--surface: var(--color-black);
+  --z-info-reveal-theme--text: var(--color-white);
+  --z-info-reveal-shadow: var(--shadow-2);
+  --z-info-reveal-max-width: 375px; /* defaults to average width of mobile devices */
+
+  position: relative;
+  display: flex;
+  width: fit-content;
+  background-color: var(--z-info-reveal-theme--surface);
+  color: var(--z-info-reveal-theme--text);
+  font-size: var(--font-size-3);
+  font-weight: var(--font-rg);
+  line-height: 1.5;
+  letter-spacing: 0;
+}
+
+button {
+  padding: 0;
+  background-color: transparent;
+  cursor: pointer;
+  border: none;
+  border-radius: 0;
+  color: inherit;
+  fill: currentColor;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+}
+
+z-icon {
+  --z-icon-width: calc(var(--space-unit) * 3);
+  --z-icon-height: calc(var(--space-unit) * 3);
+  display: flex;
+}
+
+.z-info-reveal-trigger {
+  display: flex;
+  align-items: center;
+  width: fit-content;
+  height: 100%;
+  column-gap: calc(var(--space-unit) / 2);
+  padding: calc(var(--space-unit) / 2);
+  box-shadow: var(--z-info-reveal-shadow);
+}
+
+:host([position="top_left"]) .z-info-reveal-trigger,
+:host([position="bottom_left"]) .z-info-reveal-trigger {
+  flex-direction: row-reverse;
+}
+
+:host([open]) .z-info-reveal-trigger {
+  box-shadow: none;
+}
+
+.info-box {
+  position: absolute;
+  display: flex;
+  max-width: var(--z-info-reveal-max-width);
+  column-gap: calc(var(--space-unit) / 2);
+  padding: calc(var(--space-unit) / 2);
+  background-color: var(--z-info-reveal-theme--surface);
+  box-shadow: var(--z-info-reveal-shadow);
+  cursor: pointer;
+}
+
+:host([position="top_right"]) .info-box,
+:host([position="bottom_right"]) .info-box {
+  right: 0;
+}
+
+:host([position="top_left"]) .info-box,
+:host([position="bottom_left"]) .info-box {
+  left: 0;
+  flex-direction: row-reverse;
+}
+
+::slotted(*) {
+  display: none;
+  width: max-content;
+}
+
+::slotted([data-current]) {
+  display: block;
+}
+
+:host([position="top_left"]) .z-info-reveal-close,
+:host([position="top_right"]) .z-info-reveal-close {
+  align-self: flex-start;
+}
+
+:host([position="bottom_left"]) .z-info-reveal-close,
+:host([position="bottom_right"]) .z-info-reveal-close {
+  align-self: flex-end;
+}

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

@@ -155,7 +155,8 @@ export class ZPagination {
         this.renderPage(this.totalPages),
       ];
     }
-    if (this.currentPage > this.split * 2 + 2 && this.currentPage < this.totalPages - this.split * 2 - 1) {
+    if (this.currentPage > this.split * 2 + 2 &&
+      this.currentPage < this.totalPages - this.split * 2 - 1) {
       // Render first page, ellipsis, current page surrounded by (split) pages both before and after, another ellipsis, then last page.
       return [
         this.renderPage(1),
@@ -192,7 +193,9 @@ export class ZPagination {
             ev.preventDefault();
             this.selectPage(this.goToPageValue);
           } },
-          h("z-input", { class: "go-to-page-input", type: "number", message: false, onInput: (ev) => { this.goToPageValue = ev.target.value; }, placeholder: this.currentPage.toString(), hasclearicon: false }),
+          h("z-input", { class: "go-to-page-input", type: "number", min: 1, max: this.totalPages, message: false, onInput: (ev) => {
+              this.goToPageValue = ev.target.value;
+            }, placeholder: this.currentPage.toString(), hasclearicon: false }),
           h("span", null, `/${this.totalPages}`))),
         this.renderForwardButton()),
     ];
@@ -219,9 +222,7 @@ export class ZPagination {
           "-",
           this.skip)),
         this.navArrows && this.renderBackButton(),
-        h("div", { class: "pages-container", role: "navigation", tabIndex: -1 }, this.split ?
-          this.renderSplitPages() :
-          this.renderPages()),
+        h("div", { class: "pages-container", role: "navigation", tabIndex: -1 }, this.split ? this.renderSplitPages() : this.renderPages()),
         this.navArrows && this.renderForwardButton(),
         this.skip < this.totalPages && this.skip > 1 && (h("button", { class: "pagination-button", type: "button", title: `Vai alla pagina ${this.currentPage + this.skip}`, disabled: this.currentPage > this.totalPages - this.skip, onClick: () => this.selectPage(this.currentPage + this.skip) },
           "+",
@@ -232,7 +233,9 @@ export class ZPagination {
       this.goToPage && (h("div", { class: "go-to-page" },
         h("span", { class: "label body-5-sb" }, "Vai a pagina:"),
         h("div", { class: "inputs" },
-          h("z-input", { class: "go-to-page-input", type: "number", message: false, placeholder: "2", hasclearicon: false, onInput: (ev) => { this.goToPageValue = ev.target.value; }, onKeyDown: (ev) => ev.key === "Enter" && this.selectPage(this.goToPageValue) }),
+          h("z-input", { class: "go-to-page-input", type: "number", min: 1, max: this.totalPages, message: false, placeholder: "2", hasclearicon: false, onInput: (ev) => {
+              this.goToPageValue = ev.target.value;
+            }, onKeyDown: (ev) => ev.key === "Enter" && this.selectPage(this.goToPageValue) }),
           h("z-button", { disabled: !this.goToPageValue, title: "Vai alla pagina inserita", onClick: () => this.selectPage(this.goToPageValue) }, "vai")))),
     ];
   }