@zanichelli/albe-web-components 5.5.6-cs1 → 5.6.2

package/dist/collection/components/icons/z-icon/index.js

@@ -1,14 +1,16 @@
 import { h } from "@stencil/core";
-import { ICONS } from "../icons";
+import { icons } from "../icons";
 export class ZIcon {
-  selectPathOrPolygon(iconValue) {
-    if (iconValue === null || iconValue === void 0 ? void 0 : iconValue.startsWith("M")) {
-      return h("path", { d: ICONS[this.name] });
+  selectPathOrPolygon(iconName) {
+    if (iconName && iconName.startsWith("M")) {
+      return h("path", { d: icons[this.name] });
+    }
+    else {
+      return h("polygon", { points: icons[this.name] });
     }
-    return h("polygon", { points: ICONS[this.name] });
   }
   render() {
-    return (h("svg", { viewBox: "0 0 1000 1000", width: this.width, height: this.height, id: this.iconid, fill: this.fill ? `var(--${this.fill})` : "" }, this.selectPathOrPolygon(ICONS[this.name])));
+    return (h("svg", { viewBox: "0 0 1000 1000", width: this.width, height: this.height, id: this.iconid, fill: this.fill ? `var(--${this.fill})` : "" }, this.selectPathOrPolygon(icons[this.name])));
   }
   static get is() { return "z-icon"; }
   static get encapsulation() { return "shadow"; }
@@ -36,7 +38,7 @@ export class ZIcon {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "icon name"
+          "text": "icon name (choice between available icons)"
         },
         "attribute": "name",
         "reflect": false

package/dist/collection/components/icons/z-icon/styles.css

@@ -1,8 +1,8 @@
 :host {
-  margin-right: var(--z-icon-right-margin, 0);
-  margin-left: var(--z-icon-left-margin, 0);
   line-height: 0;
   vertical-align: middle;
+  margin-right: var(--z-icon-right-margin, 0);
+  margin-left: var(--z-icon-left-margin, 0);
 }
 
 :host svg:not([width]) {

package/dist/collection/components/icons/z-icon-package/index.js

@@ -1,8 +1,9 @@
-import { h } from "@stencil/core";
-import { ICONS } from "../icons";
+import { h } from '@stencil/core';
+import { icons } from '../icons';
 export class ZIconPackage {
   render() {
-    return (h("div", null, Object.keys(ICONS).map((icon) => {
+    const iconsNames = Object.keys(icons);
+    return (h("div", null, iconsNames.map((icon) => {
       return (h("div", null, h("z-icon", { name: icon }), h("label", null, icon)));
     })));
   }

package/dist/collection/components/icons/z-icon-package/styles.css

@@ -1,4 +1,4 @@
-:host > div {
+:host>div {
   display: flex;
   flex-flow: row wrap;
   justify-content: flex-start;
@@ -6,11 +6,11 @@
   font-size: 12px;
 }
 
-:host > div > div {
+:host>div>div {
   width: 300px;
   margin: 5px;
 }
 
-:host > div > div > label {
+:host>div>div>label {
   margin: 0 10px;
 }

package/dist/collection/components/indicators/z-stepper/index.js

@@ -1,10 +1,10 @@
-import { h } from "@stencil/core";
+import { h } from '@stencil/core';
 /**
  * @slot - z-stepper-item
  */
 export class ZStepper {
   render() {
-    return h("slot", null);
+    return (h("slot", null));
   }
   static get is() { return "z-stepper"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/indicators/z-stepper/styles.css

@@ -1,12 +1,12 @@
 :host {
+  box-sizing: border-box;
   position: relative;
   display: flex;
+  flex-direction: row;
   width: 100%;
   max-width: 100%;
-  box-sizing: border-box;
-  flex-direction: row;
-  padding: 0;
   margin: 0;
+  padding: 0;
   font-family: var(--dashboard-font);
   font-weight: var(--font-rg);
   list-style: none;

package/dist/collection/components/indicators/z-stepper-item/index.js

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { h } from '@stencil/core';
 export class ZStepperItem {
   render() {
     if (this.href) {

package/dist/collection/components/indicators/z-stepper-item/styles.css

@@ -11,32 +11,32 @@
 
 :host(:not(:last-child))::after {
   position: absolute;
-  z-index: 1;
   top: calc(var(--space-unit) * 4);
-  right: calc(var(--space-unit) * 2);
   left: calc(var(--space-unit) * 3);
+  right: calc(var(--space-unit) * 2);
+  z-index: 1;
+  content: '';
   display: block;
   width: auto;
-  border-bottom: solid 2px var(--bg-grey-700);
   margin: 0 calc(-1 * calc(var(--space-unit) * 2)) 0 calc(var(--space-unit) * 2);
-  content: "";
+  border-bottom: solid 2px var(--bg-grey-700);
 }
 
 .stepper-item {
   display: flex;
-  width: calc(var(--space-unit) * 5);
   flex-direction: column;
   align-items: center;
+  width: calc(var(--space-unit) * 5);
   padding: 0;
-  border: 0;
-  appearance: none;
-  background: transparent;
   color: inherit;
   font-family: inherit;
   font-size: 18px;
+  text-decoration: none;
   line-height: 28px;
+  background: transparent;
+  border: 0;
   outline: 0;
-  text-decoration: none;
+  appearance: none;
 }
 
 .stepper-item span {
@@ -49,42 +49,43 @@
   cursor: pointer;
 }
 
+
 :host([disabled]) .stepper-item {
   pointer-events: none;
 }
 
 .indicator {
+  content: counter(stepper);
+  box-sizing: border-box;
   display: flex;
+  justify-content: center;
+  align-items: center;
   width: calc(var(--space-unit) * 4);
   height: calc(var(--space-unit) * 4);
-  box-sizing: border-box;
-  align-items: center;
-  justify-content: center;
-  border: 2px solid var(--myz-blue);
   margin: calc(var(--space-unit) * 2);
-  background: var(--bg-white);
-  border-radius: 50%;
-  color: var(--myz-blue);
-  content: counter(stepper);
   font-size: 14px;
   font-weight: var(--font-sb);
   line-height: 1;
+  color: var(--myz-blue);
+  background: var(--bg-white);
+  border: 2px solid var(--myz-blue);
+  border-radius: 50%;
 }
 
 :host([pressed]:not([disabled])) .indicator {
-  border-color: var(--myz-blue-dark);
-  background: var(--myz-blue-dark);
   color: var(--text-white);
+  background: var(--myz-blue-dark);
+  border-color: var(--myz-blue-dark);
 }
 
 :host(:not([disabled]):focus-within) .indicator {
-  box-shadow: 0 0 2px 2px var(--accent-dark);
+  box-shadow: 0px 0px 2px 2px var(--accent-dark);
 }
 
 :host([disabled]) .indicator {
-  border-color: currentcolor;
-  background: var(--bg-grey-200);
   color: var(--text-grey-700);
+  background: var(--bg-grey-200);
+  border-color: currentColor;
 }
 
 /* Tablet breakpoint */

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

@@ -1,5 +1,5 @@
-import { h } from "@stencil/core";
-import { InputTypeEnum, KeyboardKeyCodeEnum } from "../../../beans";
+import { h, } from "@stencil/core";
+import { InputTypeEnum, KeyboardKeyCodeEnum, } from "../../../beans";
 import { handleKeyboardSubmit } from "../../../utils/utils";
 export class ZCombobox {
   constructor() {
@@ -23,12 +23,13 @@ export class ZCombobox {
     this.maxcheckableitems = 0;
     this.renderItemsList = []; // used for render only
     this.itemsList = [];
-    this.inputType = InputTypeEnum.TEXT;
+    this.inputType = InputTypeEnum.text;
     this.toggleComboBox = this.toggleComboBox.bind(this);
     this.closeFilterItems = this.closeFilterItems.bind(this);
   }
   watchItems() {
-    this.itemsList = typeof this.items === "string" ? JSON.parse(this.items) : this.items;
+    this.itemsList =
+      typeof this.items === "string" ? JSON.parse(this.items) : this.items;
     this.selectedCounter = this.itemsList.filter((item) => item.checked).length;
     if (this.searchValue) {
       this.filterItems(this.searchValue);
@@ -39,13 +40,14 @@ export class ZCombobox {
   }
   inputCheckListener(e) {
     const id = e.detail.id.replace(`combo-checkbox-${this.inputid}-`, "");
-    if (id === "check-all" && (!this.maxcheckableitems || this.maxcheckableitems >= this.itemsList.length)) {
+    if (id === "check-all" &&
+      (!this.maxcheckableitems ||
+        this.maxcheckableitems >= this.itemsList.length)) {
       return this.checkAll(e.detail.checked);
     }
     this.itemsList = this.itemsList.map((item) => {
-      if (item.id === id) {
+      if (item.id === id)
         item.checked = e.detail.checked;
-      }
       return item;
     });
     this.resetRenderItemsList();
@@ -71,9 +73,8 @@ export class ZCombobox {
     this.renderItemsList = renderItemsList;
   }
   filterItems(value) {
-    if (!value) {
+    if (!value)
       return this.closeFilterItems();
-    }
     this.searchValue = value;
     this.resetRenderItemsList();
     this.renderItemsList = this.renderItemsList.filter((item) => {
@@ -100,32 +101,29 @@ export class ZCombobox {
   }
   renderHeader() {
     return (h("div", { class: "header", onClick: () => this.toggleComboBox(), onKeyDown: (ev) => {
-        if (ev.keyCode === KeyboardKeyCodeEnum.SPACE) {
+        if (ev.keyCode === KeyboardKeyCodeEnum.SPACE)
           ev.preventDefault();
-        }
       }, onKeyUp: (ev) => handleKeyboardSubmit(ev, this.toggleComboBox), role: "button", tabindex: 0 }, h("z-body", { level: 3, component: "p" }, this.label, h("span", null, this.selectedCounter > 0 && ` (${this.selectedCounter})`)), h("z-icon", { name: "caret-down", width: 18, height: 18 })));
   }
   renderContent() {
-    if (!this.isopen) {
+    if (!this.isopen)
       return;
-    }
-    return (h("div", { class: "open-combo-data" }, this.hassearch && this.renderSearchInput(), this.hascheckall && this.renderCheckAll(), this.renderItems()));
+    return (h("div", { class: "openComboData" }, this.hassearch && this.renderSearchInput(), this.hascheckall && this.renderCheckAll(), this.renderItems()));
   }
   renderItems() {
-    if (!this.isopen) {
+    if (!this.isopen)
       return;
-    }
     return (h("div", { class: this.searchValue && "search", tabindex: -1 }, this.renderList(this.renderItemsList), this.searchValue && this.renderCloseButton()));
   }
   renderList(items) {
-    if (!items) {
+    if (!items)
       return;
-    }
-    if (!items.length && this.searchValue) {
+    if (!items.length && this.searchValue)
       return this.renderNoSearchResults();
-    }
     return (h("ul", null, items.map((item, i) => {
-      return (h("z-myz-list-item", { id: item.id, listitemid: item.id, action: `combo-li-${this.inputid}`, underlined: i !== items.length - 1 }, h("z-input", { type: InputTypeEnum.CHECKBOX, checked: item.checked, htmlid: `combo-checkbox-${this.inputid}-${item.id}`, label: item.name, disabled: !item.checked && this.maxcheckableitems && this.maxcheckableitems === this.selectedCounter })));
+      return (h("z-myz-list-item", { id: item.id, listitemid: item.id, action: `combo-li-${this.inputid}`, underlined: i !== items.length - 1 }, h("z-input", { type: InputTypeEnum.checkbox, checked: item.checked, htmlid: `combo-checkbox-${this.inputid}-${item.id}`, label: item.name, disabled: !item.checked &&
+          this.maxcheckableitems &&
+          this.maxcheckableitems === this.selectedCounter })));
     })));
   }
   renderNoSearchResults() {
@@ -135,22 +133,20 @@ export class ZCombobox {
     return (h("div", null, h("a", { onClick: () => this.closeFilterItems(), onKeyUp: (e) => handleKeyboardSubmit(e, this.closeFilterItems), role: "button", tabindex: 0 }, this.closesearchtext)));
   }
   renderSearchInput() {
-    if (!this.isopen) {
+    if (!this.isopen)
       return;
-    }
     return (h("z-input", { htmlid: `${this.inputid}_search`, label: this.searchlabel, placeholder: this.searchplaceholder, htmltitle: this.searchtitle, type: this.inputType, value: this.searchValue, message: false, onInputChange: (e) => {
-        if (e.detail.keycode === 27) {
+        if (e.detail.keycode === 27)
           return this.closeFilterItems();
-        }
         this.filterItems(e.detail.value);
       } }));
   }
   renderCheckAll() {
-    if (this.searchValue) {
+    if (this.searchValue)
       return;
-    }
     const allChecked = this.selectedCounter === this.itemsList.length;
-    return (h("div", { class: "check-all-wrapper" }, h("z-input", { type: InputTypeEnum.CHECKBOX, checked: allChecked, htmlid: `combo-checkbox-${this.inputid}-check-all`, label: allChecked ? this.uncheckalltext : this.checkalltext, disabled: this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length })));
+    return (h("div", { class: "checkAllWrapper" }, h("z-input", { type: InputTypeEnum.checkbox, checked: allChecked, htmlid: `combo-checkbox-${this.inputid}-check-all`, label: allChecked ? this.uncheckalltext : this.checkalltext, disabled: this.maxcheckableitems &&
+        this.maxcheckableitems < this.itemsList.length })));
   }
   render() {
     return (h("div", { "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed }, id: this.inputid }, this.renderHeader(), this.renderContent()));

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

@@ -7,17 +7,17 @@
 }
 
 :host > div > .header {
+  background-color: var(--bg-white);
+  border-radius: var(--border-radius-small);
+  border: var(--border-size-small) solid var(--bg-grey-700);
   position: relative;
   z-index: 10;
-  display: flex;
   min-height: 42px;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 calc(var(--space-unit) * 2);
-  border: var(--border-size-small) solid var(--bg-grey-700);
   margin: 0;
-  background-color: var(--bg-white);
-  border-radius: var(--border-radius-small);
+  padding: 0 calc(var(--space-unit) * 2);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   cursor: pointer;
 }
 
@@ -28,8 +28,8 @@
 }
 
 :host > div > .header > z-body {
-  padding: var(--space-unit) 0;
   margin: 0;
+  padding: var(--space-unit) 0;
   color: var(--text-grey-800);
 }
 
@@ -44,8 +44,8 @@
 }
 
 :host > div.open > .header {
-  border: var(--border-size-small) solid var(--blue500);
   border-radius: var(border-radius-small) var(border-radius-small) 0 0;
+  border: var(--border-size-small) solid var(--blue500);
 }
 
 :host > div.open > .header > z-icon {
@@ -54,89 +54,94 @@
   transition: all 200ms linear;
 }
 
-:host > div.open > div.open-combo-data {
+:host > div.open > div.openComboData {
+  background-color: var(--bg-white);
+  border-radius: 0;
+  border: var(--border-size-small) solid var(--gray200);
+  border-top: 0px;
   position: relative;
   z-index: 12;
   padding: var(--space-unit) calc(var(--space-unit) * 2);
-  border: var(--border-size-small) solid var(--gray200);
-  border-top: 0;
-  background-color: var(--bg-white);
-  border-radius: 0;
 }
 
-:host > div.open > div.open-combo-data > div {
-  overflow: auto;
-  max-height: 235px;
+:host > div.open > div.openComboData > div {
   padding: 0;
-  scrollbar-color: var(--myz-blue) var(--gray200);
+  max-height: 235px;
+  overflow: auto;
   scrollbar-width: thin;
+  scrollbar-color: var(--myz-blue) var(--gray200);
 }
 
-:host > div.open > div.open-combo-data > z-input {
-  width: 100%;
+:host > div.open > div.openComboData > z-input {
   margin-bottom: calc(var(--space-unit) * 2);
+  width: 100%;
 }
 
-:host > div.open > div.open-combo-data > div > ul {
-  max-height: 235px;
-  padding: 0 3px; /* needed for checkbox focus shadow */
+:host > div.open > div.openComboData > div > ul {
   margin: 0;
+  padding: 0 3px; /* needed for checkbox focus shadow */
+  max-height: 235px;
 }
 
 ::-webkit-scrollbar {
-  width: 10px;
-  background: linear-gradient(90deg, var(--bg-white) 2px, var(--bg-grey-200) 4px, var(--bg-white) 8px);
+  background: linear-gradient(
+    90deg,
+    var(--bg-white) 2px,
+    var(--bg-grey-200) 4px,
+    var(--bg-white) 8px
+  );
   border-radius: var(--border-radius);
+  width: 10px;
 }
 
 ::-webkit-scrollbar-thumb {
-  width: 10px;
   background-color: var(--myz-blue);
   border-radius: var(--border-radius);
+  width: 10px;
 }
 
 :host > div.open > z-input {
+  color: var(--myz-blue);
+  margin: 0 calc(var(--space-unit) * 2);
+  width: 238px;
   position: relative;
   z-index: 1;
-  width: 238px;
-  margin: 0 calc(var(--space-unit) * 2);
-  color: var(--myz-blue);
 }
 
-:host > div.open > div.open-combo-data > div.search {
-  overflow: hidden;
-  max-height: auto;
+:host > div.open > div.openComboData > div.search {
+  box-shadow: 1px 1px 4px 2px rgba(217, 222, 227, 0.5);
   margin-top: 0;
-  box-shadow: 1px 1px 4px 2px rgb(217 222 227 / 50%);
+  max-height: auto;
+  overflow: hidden;
 }
 
-:host > div.open > div.open-combo-data > div.search > ul {
-  overflow: auto;
-  max-height: 180px;
+:host > div.open > div.openComboData > div.search > ul {
   padding: var(--space-unit) calc(var(--space-unit) * 2);
-  scrollbar-color: var(--myz-blue) var(--bg-grey-200);
+  max-height: 180px;
+  overflow: auto;
   scrollbar-width: thin;
+  scrollbar-color: var(--myz-blue) var(--bg-grey-200);
 }
 
-:host > div.open > div.open-combo-data > div.search > div {
+:host > div.open > div.openComboData > div.search > div {
   display: flex;
   justify-content: center;
 }
 
-:host > div.open > div.open-combo-data > div.search > div > a {
+:host > div.open > div.openComboData > div.search > div > a {
   display: inline-block;
-  height: 44px;
-  color: var(--myz-blue);
   cursor: pointer;
+  color: var(--myz-blue);
   font-family: var(--dashboard-font);
-  font-size: 14px;
   font-weight: var(--font-sb);
+  font-size: 14px;
+  height: 44px;
   line-height: 44px;
   text-align: center;
   text-transform: uppercase;
 }
 
-:host > div.open > div.open-combo-data > div.check-all-wrapper {
+:host > div.open > div.openComboData > div.checkAllWrapper {
   padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);
   text-align: left;
 }