@zanichelli/albe-web-components 3.2.0 → 4.0.0

package/dist/collection/components/inputs/z-select/styles.css

@@ -1,13 +1,10 @@
 :host {
   display: inline-block;
   width: inherit;
-}
-
-/* FOCUS */
-li[role="option"]:focus:focus-visible {
-  border-color: transparent;
-  box-shadow: var(--shadow-focus-primary);
-  outline: none;
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+  font-size: var(--font-size-3);
+  color: var(--color-text02);
 }
 
 .selectWrapper > z-input {
@@ -26,7 +23,7 @@ li[role="option"]:focus:focus-visible {
 .selectWrapper .ulScrollWrapper {
   background: var(--color-surface01);
   position: absolute;
-  padding: calc(var(--space-unit) * .5) var(--space-unit);
+  padding: calc(var(--space-unit) * 0.5) var(--space-unit);
   border: var(--border-size-small) solid var(--gray200);
   border-top: none;
   width: 100%;
@@ -42,12 +39,9 @@ li[role="option"]:focus:focus-visible {
   z-index: 20;
 }
 
-.selectWrapper .ulScrollWrapper > ul {
+.selectWrapper .ulScrollWrapper > z-list {
   position: relative;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  border: 0;
+  padding: calc(var(--space-unit) * 0.5);
   max-height: 240px;
   overflow: auto;
   outline: none;
@@ -56,7 +50,7 @@ li[role="option"]:focus:focus-visible {
   scrollbar-color: var(--color-primary01) transparent;
 }
 
-.selectWrapper .ulScrollWrapper > ul::-webkit-scrollbar {
+.selectWrapper .ulScrollWrapper > z-list::-webkit-scrollbar {
   background: linear-gradient(
     to right,
     transparent 0 3px,
@@ -67,65 +61,29 @@ li[role="option"]:focus:focus-visible {
   border-radius: var(--border-radius);
 }
 
-.selectWrapper .ulScrollWrapper > ul::-webkit-scrollbar-track {
+.selectWrapper .ulScrollWrapper > z-list::-webkit-scrollbar-track {
   background-color: transparent;
 }
 
-.selectWrapper .ulScrollWrapper > ul::-webkit-scrollbar-thumb {
+.selectWrapper .ulScrollWrapper > z-list::-webkit-scrollbar-thumb {
   width: 10px;
   background-color: var(--color-primary01);
   border-radius: var(--border-radius);
 }
 
-.selectWrapper .ulScrollWrapper > ul::-webkit-scrollbar-thumb:hover {
+.selectWrapper .ulScrollWrapper > z-list::-webkit-scrollbar-thumb:hover {
   background-color: var(--color-hover-primary);
 }
 
-.selectWrapper .ulScrollWrapper ul li {
-  display: flex;
-  align-items: center;
-  min-height: calc(var(--space-unit) * 5.5);
-  padding: calc(var(--space-unit) * 1.5);
-  box-sizing: border-box;
-  border-bottom: var(--border-size-small) solid var(--gray200);
-  text-align: left;
-  cursor: pointer;
+.selectWrapper .ulScrollWrapper z-list z-list-element span {
+  display: block;
+  padding: 0 calc(var(--space-unit) * 1.5);
 }
 
-.selectWrapper .ulScrollWrapper ul li:hover {
-  color: var(--color-hover-primary);
-  background: var(--color-surface02);
-}
-
-.selectWrapper .ulScrollWrapper ul li:focus:focus-visible {
-  margin: 2px;
-}
-
-.selectWrapper .ulScrollWrapper ul li[aria-selected=""] {
-  font-weight: var(--font-sb);
-}
-
-.selectWrapper .ulScrollWrapper ul li.disabled {
-  color: var(--color-disabled02);
-  cursor: default;
-  pointer-events: none;
-}
-
-.selectWrapper .ulScrollWrapper ul li.noResults {
-  color: var(--color-primary01);
-  fill: currentColor;
-  border: none;
+.selectWrapper .ulScrollWrapper z-list z-list-element span.selected {
+  font-weight: bold;
 }
 
 .selectWrapper .ulScrollWrapper .noResults z-icon {
   margin-right: var(--space-unit);
 }
-
-.selectWrapper .chipsWrapper {
-  padding-bottom: var(--space-unit);
-}
-
-.selectWrapper .chipsWrapper z-button-filter {
-  display: inline-block;
-  margin: calc(var(--space-unit) * 0.5);
-}

package/dist/collection/components/modal/z-modal-login/index.js

@@ -153,7 +153,7 @@ export class zModalLogin {
       "mutable": true,
       "complexType": {
         "original": "InputStatusBean",
-        "resolved": "\"error\" | \"selecting\" | \"success\" | \"warning\"",
+        "resolved": "\"error\" | \"success\" | \"warning\"",
         "references": {
           "InputStatusBean": {
             "location": "import",

package/dist/collection/components/navigation/z-menu-dropdown/index.js

@@ -1,6 +1,6 @@
 import { Component, Prop, h, State } from "@stencil/core";
-import { keybordKeyCodeEnum } from "../../../beans/index";
-import { handleKeyboardSubmit, getClickedElement, getElementTree } from "../../../utils/utils";
+import { KeyboardKeyCodeEnum } from "../../../beans/index";
+import { handleKeyboardSubmit, getClickedElement, getElementTree, } from "../../../utils/utils";
 export class ZMenuDropdown {
   constructor() {
     this.ismenuopen = false;
@@ -15,7 +15,7 @@ export class ZMenuDropdown {
   }
   renderMenuOpen() {
     if (this.ismenuopen) {
-      return (h("ul", null, this.linkarray.map(bean => (h("li", null,
+      return (h("ul", null, this.linkarray.map((bean) => (h("li", null,
         h("z-link", { htmlid: bean.id, href: bean.link, icon: bean.icon }, bean.label))))));
     }
   }
@@ -31,7 +31,7 @@ export class ZMenuDropdown {
     this.ismenuopen = !this.ismenuopen;
   }
   handleFocus(e) {
-    if (e instanceof KeyboardEvent && e.keyCode !== keybordKeyCodeEnum.TAB)
+    if (e instanceof KeyboardEvent && e.keyCode !== KeyboardKeyCodeEnum.TAB)
       return;
     const tree = getElementTree(getClickedElement());
     const menuParent = tree.find((elem) => elem.nodeName.toLowerCase() === "z-menu-dropdown");

package/dist/collection/components/z-date-picker/index.js

@@ -166,7 +166,7 @@ export class ZDatePicker {
       h("slot", { name: "toggle" })));
   }
   renderZInput() {
-    return (h("z-input", { class: classNames(this.datepickerid), type: "text", icon: "event", hasmessage: false, tabindex: "0" }));
+    return (h("z-input", { ariaLabel: this.ariaLabel, label: this.label, class: classNames(this.datepickerid), type: "text", icon: "event", message: false, tabindex: "0" }));
   }
   render() {
     return (h("div", { class: classNames("flatpickr-toggle-container", this.hasChildren && this.datepickerid, this.flatpickrPosition, this.mode) }, this.hasChildren ? this.renderSlottedContent() : this.renderZInput()));
@@ -196,6 +196,40 @@ export class ZDatePicker {
       "attribute": "datepickerid",
       "reflect": false
     },
+    "ariaLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "z-input aria label"
+      },
+      "attribute": "aria-label",
+      "reflect": false
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "z-input label"
+      },
+      "attribute": "label",
+      "reflect": false
+    },
     "mode": {
       "type": "string",
       "mutable": false,

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

@@ -192,7 +192,7 @@ export class ZPagination {
             ev.preventDefault();
             this.selectPage(this.goToPageValue);
           } },
-          h("z-input", { class: "go-to-page-input", type: "number", hasmessage: false, onInput: (ev) => { this.goToPageValue = ev.target.value; }, placeholder: this.currentPage.toString(), hasclearicon: false }),
+          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("span", null, `/${this.totalPages}`))),
         this.renderForwardButton()),
     ];
@@ -232,7 +232,7 @@ 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", hasmessage: 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", 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")))),
     ];
   }