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

package/dist/collection/components/buttons/z-toggle-switch/index.js

@@ -1,15 +1,11 @@
-import { h, Host } from "@stencil/core";
+import { h } from "@stencil/core";
 import { randomId } from "../../../utils/utils";
 import { LabelPositions } from "../../../beans";
 export class ZToggleSwitch {
   constructor() {
-    /** Disabled flag */
     this.disabled = false;
-    /** Label position */
-    this.labelPosition = LabelPositions.LEFT;
-    /** Checked state */
+    this.labelPosition = LabelPositions.left;
     this.checked = false;
-    /** HTML id attribute to set to the internal checkbox */
     this.htmlid = `toggle-switch-id-${randomId()}`;
   }
   emitToggleClick() {
@@ -19,21 +15,23 @@ export class ZToggleSwitch {
     });
   }
   handleClick(ev) {
-    if (this.disabled) {
+    if (this.disabled)
       return;
-    }
     this.checked = ev.target.checked;
     this.emitToggleClick();
   }
   render() {
-    return (h(Host, null, h("input", { id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), h("label", { htmlFor: this.htmlid, class: {
-        [this.labelPosition]: true,
-        disabled: this.disabled,
-      } }, h("span", null, h("slot", null)), h("span", { class: {
-        container: true,
-        disabled: this.disabled,
-        checked: this.checked,
-      } }, h("span", { class: "circle" }, this.checked && (h("z-icon", { width: 12, height: 12, name: "checkmark" })))))));
+    return [
+      h("input", { id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }),
+      h("label", { htmlFor: this.htmlid, class: {
+          [this.labelPosition]: true,
+          disabled: this.disabled,
+        } }, h("span", null, h("slot", null)), h("span", { class: {
+          container: true,
+          disabled: this.disabled,
+          checked: this.checked,
+        } }, h("span", { class: "circle" }, this.checked && (h("z-icon", { width: 12, height: 12, name: "checkmark" }))))),
+    ];
   }
   static get is() { return "z-toggle-switch"; }
   static get encapsulation() { return "scoped"; }
@@ -61,7 +59,7 @@ export class ZToggleSwitch {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Disabled flag"
+          "text": ""
         },
         "attribute": "disabled",
         "reflect": true,
@@ -71,19 +69,24 @@ export class ZToggleSwitch {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "LabelPositions",
-          "resolved": "LabelPositions.LEFT | LabelPositions.RIGHT",
-          "references": {}
+          "original": "LabelPosition",
+          "resolved": "\"left\" | \"right\"",
+          "references": {
+            "LabelPosition": {
+              "location": "import",
+              "path": "../../../beans"
+            }
+          }
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Label position"
+          "text": ""
         },
         "attribute": "label-position",
         "reflect": true,
-        "defaultValue": "LabelPositions.LEFT"
+        "defaultValue": "LabelPositions.left"
       },
       "checked": {
         "type": "boolean",
@@ -97,7 +100,7 @@ export class ZToggleSwitch {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Checked state"
+          "text": ""
         },
         "attribute": "checked",
         "reflect": false,
@@ -115,7 +118,7 @@ export class ZToggleSwitch {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "HTML id attribute to set to the internal checkbox"
+          "text": ""
         },
         "attribute": "htmlid",
         "reflect": false,
@@ -132,7 +135,7 @@ export class ZToggleSwitch {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Toggle click event"
+          "text": ""
         },
         "complexType": {
           "original": "any",

package/dist/collection/components/buttons/z-toggle-switch/styles.css

@@ -1,14 +1,14 @@
 :host {
-  position: relative;
-  display: inline-flex;
   font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
+  display: inline-flex;
+  position: relative;
 }
 
 label {
   display: flex;
-  flex-direction: row;
   align-items: center;
+  flex-direction: row;
   cursor: pointer;
 }
 
@@ -21,8 +21,8 @@ label.right {
 }
 
 label > span:first-child {
-  color: var(--color-text01);
   letter-spacing: 0;
+  color: var(--color-text01);
 }
 
 label.left > span:first-child {
@@ -34,16 +34,19 @@ label.right > span:first-child {
 }
 
 label > span.container {
-  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+label > span.container {
   top: 1px;
   left: 1px;
-  display: flex;
-  width: calc(var(--space-unit) * 4);
   height: 18px;
-  align-items: center;
-  background-color: var(--gray500);
+  width: calc(var(--space-unit) * 4);
   border-radius: var(--space-unit);
   color: var(--gray500);
+  background-color: var(--gray500);
+  position: relative;
   cursor: pointer;
 }
 
@@ -63,8 +66,8 @@ label > span.container.checked {
 }
 
 input:focus:focus-visible + label > span.container:not(.disabled) {
-  box-shadow: var(--shadow-focus-primary);
   outline: none;
+  box-shadow: var(--shadow-focus-primary);
 }
 
 input:focus:focus-visible + label > span.container.disabled {
@@ -77,17 +80,17 @@ label > span.container:not(.disabled):hover {
 }
 
 label > span.container > span.circle {
-  position: absolute;
   top: 1px;
   left: 1px;
+  position: absolute;
   display: flex;
-  width: calc(var(--space-unit) * 2);
-  height: calc(var(--space-unit) * 2);
   align-items: center;
   justify-content: center;
   margin: 0;
-  background-color: var(--color-white);
+  height: calc(var(--space-unit) * 2);
+  width: calc(var(--space-unit) * 2);
   border-radius: 7px;
+  background-color: var(--color-white);
   box-shadow: var(--shadow-1);
   transition: transform 0.3s ease;
 }
@@ -98,7 +101,7 @@ label > span.container.checked > span.circle {
 
 input[type="checkbox"] {
   position: absolute;
-  z-index: -1;
   opacity: 0;
+  z-index: -1;
   pointer-events: none;
 }

package/dist/collection/components/date-picker/styles.css

@@ -130,8 +130,6 @@
 }
 
 
-/* stylelint-disable selector-class-pattern -- we have no control over flatpickr css classes naming */
-
 :host {
   font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
@@ -160,11 +158,12 @@ z-range-picker {
 }
 
 .hidden-input {
+  visibility: hidden !important;
   position: absolute;
-  bottom: 0;
+
   width: 0;
   height: 0;
-  visibility: hidden !important;
+  bottom: 0;
 }
 
 /* Calendar container selectors */
@@ -174,13 +173,16 @@ z-range-picker {
 }
 
 .flatpickr-calendar {
+  font-family: var(--font-family-sans) !important;
   position: absolute !important;
-  top: var(--z-range-picker--toggle-height) !important;
-  left: 0 !important;
-  padding-top: calc(var(--space-unit) * 2);
+
   border-radius: 2px;
   box-shadow: var(--shadow-2);
-  font-family: var(--font-family-sans) !important;
+
+  padding-top: calc(var(--space-unit) * 2);
+
+  left: 0 !important;
+  top: var(--z-range-picker--toggle-height) !important;
 }
 
 .months.top > .flatpickr-calendar {
@@ -216,9 +218,10 @@ z-range-picker {
 /* Months and year row containers selectors */
 .flatpickr-months {
   position: relative;
-  height: calc(var(--space-unit) * 6) !important;
   align-items: center;
+
   margin-bottom: var(--space-unit) 0 !important;
+  height: calc(var(--space-unit) * 6) !important;
 }
 
 .flatpickr-month {
@@ -227,51 +230,51 @@ z-range-picker {
 }
 
 .flatpickr-current-month {
-  left: 0 !important;
   display: flex !important;
-  width: fill-available;
-  height: calc(var(--space-unit) * 6);
-  align-items: baseline;
   justify-content: space-evenly;
+  align-items: baseline;
+
+  width: -webkit-fill-available;
+  height: calc(var(--space-unit) * 6);
+  left: 0 !important;
   padding-top: 0;
 }
 
 /* Months arrows selectors */
 .flatpickr-next-month,
 .flatpickr-prev-month {
-  position: static !important;
   display: flex;
-  width: calc(var(--space-unit) * 4) !important;
-  height: calc(var(--space-unit) * 4) !important;
   align-items: center;
   justify-content: center;
+  position: static !important;
+
+  height: calc(var(--space-unit) * 4) !important;
+  width: calc(var(--space-unit) * 4) !important;
   padding: 0 !important;
 }
-
 .flatpickr-prev-month {
   margin-left: var(--space-unit);
 }
-
 .flatpickr-next-month {
   margin-right: var(--space-unit);
 }
 
 .flatpickr-next-month > svg,
 .flatpickr-prev-month > svg {
-  width: calc(var(--space-unit) * 2) !important;
-  height: calc(var(--space-unit) * 2) !important;
   fill: var(--color-primary01);
+  height: calc(var(--space-unit) * 2) !important;
+  width: calc(var(--space-unit) * 2) !important;
 }
 
 .flatpickr-next-month:hover,
 .flatpickr-prev-month:hover,
 .flatpickr-next-month:focus,
 .flatpickr-prev-month:focus {
-  border: none !important;
-  border-color: var(--color-primary03) !important;
-  background-color: var(--color-primary03) !important;
   border-radius: var(--border-radius);
+  background-color: var(--color-primary03) !important;
+  border-color: var(--color-primary03) !important;
   color: var(--color-hover-primary) !important;
+  border: none !important;
   outline: none !important;
 }
 
@@ -282,11 +285,11 @@ z-range-picker {
 
 .flatpickr-next-month:active,
 .flatpickr-prev-month:active {
-  border-color: var(--color-surface01) !important;
-  background-color: var(--color-surface01) !important;
   border-radius: var(--border-radius);
-  box-shadow: var(--shadow-2) !important;
+  background-color: var(--color-surface01) !important;
+  border-color: var(--color-surface01) !important;
   color: var(--color-primary01) !important;
+  box-shadow: var(--shadow-2) !important;
 }
 
 .flatpickr-next-month:focus svg,
@@ -296,14 +299,15 @@ z-range-picker {
 
 /* Months dropdown selectors */
 .flatpickr-monthDropdown-months {
-  width: 108px !important;
-  height: calc(var(--space-unit) * 5.5) !important;
-  padding-left: var(--space-unit) !important;
   background: var(--color-surface01) !important;
-  color: var(--color-text02) !important;
   font-size: var(--font-size-3) !important;
   font-weight: var(--font-rg) !important;
+  color: var(--color-text02) !important;
   outline: 1px solid black !important;
+
+  width: 108px !important;
+  height: calc(var(--space-unit) * 5.5) !important;
+  padding-left: var(--space-unit) !important;
 }
 
 .flatpickr-monthDropdown-months:hover,
@@ -314,11 +318,12 @@ z-range-picker {
 /* Year toggle selectors */
 .flatpickr-current-month > .numInputWrapper {
   display: flex;
-  width: calc(var(--space-unit) * 10);
-  height: calc(var(--space-unit) * 5.5) !important;
   background: var(--color-surface01) !important;
   color: var(--color-text02);
   outline: 1px solid black !important;
+
+  height: calc(var(--space-unit) * 5.5) !important;
+  width: calc(var(--space-unit) * 10);
 }
 
 .flatpickr-current-month > .numInputWrapper:hover,
@@ -327,10 +332,11 @@ z-range-picker {
 }
 
 .flatpickr-current-month > .numInputWrapper > input {
-  padding: 0 calc(var(--space-unit) * 3) 0 var(--space-unit);
   font-size: var(--font-size-3) !important;
   font-weight: var(--font-rg) !important;
   text-align: center;
+
+  padding: 0 calc(var(--space-unit) * 3) 0 var(--space-unit);
 }
 
 /* Weekdays selectors */
@@ -340,35 +346,39 @@ z-range-picker {
 }
 
 .flatpickr-weekday {
-  font-size: var(--font-size-3) !important;
   font-weight: var(--font-rg) !important;
+  font-size: var(--font-size-3) !important;
 }
 
 /* Calendar days and months selectors */
 .flatpickr-day,
 .flatpickr-monthSelect-month {
+  height: calc(var(--space-unit) * 6) !important;
   width: calc(var(--space-unit) * 6) !important;
   max-width: 100% !important;
-  height: calc(var(--space-unit) * 6) !important;
-  border: none;
+
+  font-size: var(--font-size-3) !important;
+  line-height: calc(var(--space-unit) * 6) !important;
+
   margin: 0 !important;
+  border: none;
   border-radius: 0 !important;
   box-shadow: none !important;
-  font-size: var(--font-size-3) !important;
-  line-height: calc(var(--space-unit) * 6) !important;
 }
 
 .flatpickr-day {
   width: calc(var(--space-unit) * 6) !important;
-  border: none;
+
   line-height: calc(var(--space-unit) * 6) !important;
+  border: none;
 }
 
 .flatpickr-monthSelect-month {
   width: calc(var(--space-unit) * 14) !important;
   padding: 0 !important;
-  border: 2px solid var(--color-surface01) !important;
+
   line-height: calc(var(--space-unit) * 5) !important;
+  border: 2px solid var(--color-surface01) !important;
 }
 
 .flatpickr-day:not(.flatpickr-disabled):hover,
@@ -383,8 +393,8 @@ z-range-picker {
 .flatpickr-monthSelect-month:hover,
 .flatpickr-monthSelect-month:active,
 .flatpickr-monthSelect-month:focus {
-  border-color: var(--color-hover-primary) !important;
   background-color: var(--color-hover-primary) !important;
+  border-color: var(--color-hover-primary) !important;
   color: var(--color-text04) !important;
 }
 
@@ -395,8 +405,8 @@ z-range-picker {
 
 .flatpickr-day.selected:not(.flatpickr-disabled),
 .flatpickr-monthSelect-month.selected:not(.flatpickr-disabled) {
-  border-color: var(--color-primary01) !important;
   background-color: var(--color-primary01) !important;
+  border-color: var(--color-primary01) !important;
 }
 
 .flatpickr-weekday:nth-child(6),
@@ -409,20 +419,22 @@ z-range-picker {
 /* Date and time selectors */
 .flatpickr-time {
   display: block;
+  text-align: left;
+
   height: 90px !important;
   max-height: 90px !important;
-  text-align: left;
 }
 
 .flatpickr-time::before {
   display: block;
-  width: 100%;
-  padding-left: var(--space-unit);
-  color: var(--color-text02) !important;
   content: "Orario";
   font-size: var(--font-size-1);
   font-weight: var(--font-sb);
   text-transform: uppercase;
+  color: var(--color-text02) !important;
+
+  width: 100%;
+  padding-left: var(--space-unit);
 }
 
 .flatpickr-time.time24hr {
@@ -436,17 +448,18 @@ z-range-picker {
 }
 
 .flatpickr-time.time24hr > div {
-  width: calc(var(--space-unit) * 10) !important;
   height: calc(var(--space-unit) * 5.5) !important;
-  margin-right: var(--space-unit) !important;
+  width: calc(var(--space-unit) * 10) !important;
   margin-left: var(--space-unit) !important;
+  margin-right: var(--space-unit) !important;
 }
 
 .flatpickr-time-separator {
   display: flex;
-  height: calc(var(--space-unit) * 5.5) !important;
   align-items: center;
   justify-content: center;
+
+  height: calc(var(--space-unit) * 5.5) !important;
   font-weight: unset !important;
 }
 
@@ -454,6 +467,7 @@ z-range-picker {
 .flatpickr-hour {
   font-size: var(--font-size-3) !important;
   font-weight: var(--font-rg) !important;
+
   outline: 1px solid black !important;
 }
 
@@ -467,11 +481,12 @@ z-range-picker {
 /* toggle arrows selectors */
 .arrowUp,
 .arrowDown {
-  width: calc(var(--space-unit) * 2) !important;
+  opacity: 1 !important;
+  border: none !important;
+
   height: calc(var(--space-unit) * 2) !important;
+  width: calc(var(--space-unit) * 2) !important;
   padding: 0 !important;
-  border: none !important;
-  opacity: 1 !important;
 }
 
 .arrowUp {
@@ -487,40 +502,43 @@ z-range-picker {
 
 .arrowUp:hover,
 .arrowDown:hover {
-  border-color: var(--color-primary03) !important;
-  background-color: var(--color-primary03) !important;
   border-radius: var(--border-radius);
+  background-color: var(--color-primary03) !important;
+  border-color: var(--color-primary03) !important;
   color: var(--color-hover-primary) !important;
 }
 
 .arrowUp:active,
 .arrowDown:active {
-  border-color: var(--color-surface01) !important;
-  background-color: var(--color-surface01) !important;
   border-radius: var(--border-radius);
-  box-shadow: var(--shadow-2) !important;
+  background-color: var(--color-surface01) !important;
+  border-color: var(--color-surface01) !important;
   color: var(--color-primary01) !important;
+  box-shadow: var(--shadow-2) !important;
 }
 
 .arrowUp::after,
 .arrowDown::after {
-  padding: 2.5px !important;
   border: solid var(--color-primary01) !important;
   border-width: 0 1px 1px 0 !important;
+
+  padding: 2.5px !important;
 }
 
 .arrowUp::after {
+  transform: rotate(-135deg);
+
   top: 0 !important;
-  margin-top: 6px !important;
   margin-left: 5.5px !important;
-  transform: rotate(-135deg);
+  margin-top: 6px !important;
 }
 
 .arrowDown::after {
+  transform: rotate(45deg);
+
   top: 0 !important;
   left: 5.5px !important;
   margin-top: 4px !important;
-  transform: rotate(45deg);
 }
 
 /* range-date-picker selectors */
@@ -529,30 +547,30 @@ z-range-picker {
 .flatpickr-day:not(.flatpickr-disabled).today.inRange:hover,
 .flatpickr-day.prevMonthDay:not(.flatpickr-disabled).inRange:hover,
 .flatpickr-monthSelect-month:not(.flatpickr-disabled).inRange:hover {
-  border-color: var(--color-hover-primary) !important;
   background-color: var(--color-hover-primary) !important;
+  border-color: var(--color-hover-primary) !important;
 }
 
 .flatpickr-day:not(.flatpickr-disabled).inRange,
 .flatpickr-day:not(.flatpickr-disabled).today.inRange,
 .flatpickr-day:not(.flatpickr-disabled).prevMonthDay.inRange,
 .flatpickr-monthSelect-month:not(.flatpickr-disabled).inRange {
-  border-color: var(--color-primary03);
   background-color: var(--color-primary03);
+  border-color: var(--color-primary03);
 }
 
 .flatpickr-day:not(.flatpickr-disabled).startRange,
 .flatpickr-day:not(.flatpickr-disabled).endRange,
 .flatpickr-monthSelect-month:not(.flatpickr-disabled).startRange,
 .flatpickr-monthSelect-month:not(.flatpickr-disabled).endRange {
-  border-color: var(--color-primary01) !important;
   background-color: var(--color-primary01) !important;
+  border-color: var(--color-primary01) !important;
 }
 
 .flatpickr-day:not(.flatpickr-disabled).prevMonthDay.selected.startRange,
 .flatpickr-day:not(.flatpickr-disabled).prevMonthDay.selected.endRange {
-  border-color: var(--color-primary01) !important;
   background-color: var(--color-primary01) !important;
+  border-color: var(--color-primary01) !important;
 }
 
 .flatpickr-range.second-input {