@zanichelli/albe-web-components 5.6.2 → 6.0.0

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

@@ -16,17 +16,17 @@ input::-ms-reveal {
 
 input,
 textarea,
-.textareaWrapper,
+.textarea-wrapper,
 ul[role="listbox"] {
+  box-sizing: border-box;
+  border: var(--border-size-small) solid var(--color-surface04);
   background: var(--color-input-field01);
   border-radius: var(--border-radius-small);
-  border: var(--border-size-small) solid var(--color-surface04);
-  box-sizing: border-box;
   color: var(--color-text02);
   fill: var(--color-icon02);
   font-family: var(--font-family-sans);
-  font-weight: var(--font-rg);
   font-size: var(--font-size-3);
+  font-weight: var(--font-rg);
   outline: none;
 }
 
@@ -43,27 +43,27 @@ li[role="option"]:focus:focus-visible,
 }
 
 /* STATUSES (success, warning, error) */
-.input_success,
-.input_success:hover,
-.input_success.hover {
-  background: var(--color-success-inverse);
+.input-success,
+.input-success:hover,
+.input-success.hover {
   border-color: var(--color-success01);
+  background: var(--color-success-inverse);
   fill: var(--color-success01);
 }
 
-.input_error,
-.input_error:hover,
-.input_error.hover {
-  background: var(--color-error-inverse);
+.input-error,
+.input-error:hover,
+.input-error.hover {
   border-color: var(--color-error01);
+  background: var(--color-error-inverse);
   fill: var(--color-error01);
 }
 
-.input_warning,
-.input_warning:hover,
-.input_warning.hover {
-  background: var(--color-warning-inverse);
+.input-warning,
+.input-warning:hover,
+.input-warning.hover {
   border-color: var(--color-warning01);
+  background: var(--color-warning-inverse);
   fill: var(--color-warning01);
 }
 
@@ -80,10 +80,10 @@ input:disabled,
 .disabled,
 .filled:disabled {
   border-color: var(--color-disabled01);
+  box-shadow: none;
   color: var(--color-disabled02);
   fill: var(--color-disabled01);
   pointer-events: none;
-  box-shadow: none;
 }
 
 /* PLACEHOLDER */
@@ -92,59 +92,50 @@ textarea::placeholder {
   color: var(--color-text05);
 }
 
-::-webkit-input-placeholder,
 ::-webkit-textarea-placeholder {
   color: var(--color-text05);
 }
 
-:-ms-input-placeholder,
 :-ms-textarea-placeholder {
   color: var(--color-text05);
 }
 
-::-moz-placeholder {
-  color: var(--color-text05);
-}
-
-:-moz-placeholder {
+::placeholder {
   color: var(--color-text05);
 }
 
-.textWrapper > div {
+.text-wrapper > div {
+  position: relative;
+  z-index: 1;
   fill: var(--color-icon02);
 }
 
-.textWrapper > div > input {
+.text-wrapper > div > input {
   width: 100%;
   height: calc(var(--space-unit) * 5.5);
-  margin: 0;
-  padding: 0 calc(var(--space-unit) * 4.5) 0 calc(var(--space-unit) * 1.5);
   box-sizing: border-box;
+  padding: 0 calc(var(--space-unit) * 4.5) 0 calc(var(--space-unit) * 1.5);
+  margin: 0;
 }
 
-.textWrapper > div > input.hasIcon,
-.textWrapper > div > input.hasClearIcon {
+.text-wrapper > div > input.has-icon,
+.text-wrapper > div > input.has-clear-icon {
   padding-right: calc(var(--space-unit) * 4);
 }
 
-.textWrapper > div > input.hasIcon.hasClearIcon {
+.text-wrapper > div > input.has-icon.has-clear-icon {
   padding-right: calc(var(--space-unit) * 7);
 }
 
-.textWrapper > div {
-  position: relative;
-  z-index: 1;
-}
-
-.textWrapper .iconsWrapper {
+.text-wrapper .icons-wrapper {
   position: absolute;
-  bottom: calc(var(--space-unit) * 1.5);
+  z-index: 2;
   right: calc(var(--space-unit) * 1.5);
+  bottom: calc(var(--space-unit) * 1.5);
   display: flex;
-  z-index: 2;
 }
 
-.textWrapper .iconsWrapper > z-icon {
+.text-wrapper .icons-wrapper > z-icon {
   --z-icon-width: 18px;
   --z-icon-height: 18px;
 
@@ -152,20 +143,20 @@ textarea::placeholder {
   margin-left: calc(var(--space-unit) * 0.5);
 }
 
-.textWrapper .iconsWrapper > z-icon.resetIcon,
-.textWrapper .iconsWrapper > z-icon.showHidePasswordIcon {
+.text-wrapper .icons-wrapper > z-icon.reset-icon,
+.text-wrapper .icons-wrapper > z-icon.toggle-password-icon {
   cursor: pointer;
 }
 
 /* Disable background color webkit */
-.textWrapper > div > input:-webkit-autofill,
-.textWrapper > div > input:-webkit-autofill:hover,
-.textWrapper > div > input:-webkit-autofill:focus,
-.textWrapper > div > input:-webkit-autofill:active {
-  -webkit-background-clip: text !important;
+.text-wrapper > div > input:-webkit-autofill,
+.text-wrapper > div > input:-webkit-autofill:hover,
+.text-wrapper > div > input:-webkit-autofill:focus,
+.text-wrapper > div > input:-webkit-autofill:active {
+  background-clip: text !important;
 }
 
-.textareaWrapper {
+.textarea-wrapper {
   padding: calc(var(--space-unit) * 1.5);
 
   /* Firefox scrollbar */
@@ -173,13 +164,8 @@ textarea::placeholder {
 }
 
 textarea::-webkit-scrollbar {
-  background: linear-gradient(
-    to right,
-    transparent 0 3px,
-    var(--gray200) 3px 7px,
-    transparent 7px 10px
-  );
   width: 10px;
+  background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);
   border-radius: var(--border-radius);
 }
 
@@ -198,99 +184,99 @@ textarea::-webkit-scrollbar-thumb:hover {
 }
 
 textarea {
-  min-height: 132px;
   width: 100%;
-  margin: 0;
+  min-height: 132px;
   padding: 0;
   border: none;
+  margin: 0;
   resize: none;
 }
 
-.radioWrapper,
-.checkboxWrapper {
+.radio-wrapper,
+.checkbox-wrapper {
+  position: relative;
   display: inline-flex;
   flex-direction: row;
   align-items: center;
-  font-family: var(--font-family-sans);
-  position: relative;
   color: var(--color-text01);
   fill: var(--color-primary01);
+  font-family: var(--font-family-sans);
 }
 
-.radioWrapper:hover,
-.checkboxWrapper:hover {
+.radio-wrapper:hover,
+.checkbox-wrapper:hover {
   color: var(--color-hover-primary);
-  fill: currentColor;
+  fill: currentcolor;
 }
 
-.radioWrapper > input,
-.checkboxWrapper > input {
+.radio-wrapper > input,
+.checkbox-wrapper > input {
   position: absolute;
-  opacity: 0;
   z-index: -1;
+  opacity: 0;
   pointer-events: none;
 }
 
-.radioWrapper .radioLabel,
-.checkboxWrapper .checkboxLabel {
+.radio-wrapper .radio-label,
+.checkbox-wrapper .checkbox-label {
   display: inline-flex;
   align-items: center;
   margin: 0;
-  line-height: 1;
   color: inherit;
   font-family: inherit;
-  font-weight: inherit;
   font-size: inherit;
+  font-weight: inherit;
+  line-height: 1;
   text-transform: inherit;
 }
 
-.radioWrapper input:not(:disabled) + .radioLabel,
-.checkboxWrapper input:not(:disabled) + .checkboxLabel {
+.radio-wrapper input:not(:disabled) + .radio-label,
+.checkbox-wrapper input:not(:disabled) + .checkbox-label {
   cursor: pointer;
 }
 
-.radioWrapper .radioLabel z-icon,
-.checkboxWrapper .checkboxLabel z-icon {
-  fill: inherit;
+.radio-wrapper .radio-label z-icon,
+.checkbox-wrapper .checkbox-label z-icon {
   cursor: pointer;
+  fill: inherit;
 }
 
-.radioWrapper .radioLabel.after,
-.checkboxWrapper .checkboxLabel.after {
+.radio-wrapper .radio-label.after,
+.checkbox-wrapper .checkbox-label.after {
   flex-direction: row;
 }
 
-.radioWrapper .radioLabel.before,
-.checkboxWrapper .checkboxLabel.before {
+.radio-wrapper .radio-label.before,
+.checkbox-wrapper .checkbox-label.before {
   flex-direction: row-reverse;
 }
 
-.radioWrapper .radioLabel.after > span,
-.checkboxWrapper .checkboxLabel.after > span {
+.radio-wrapper .radio-label.after > span,
+.checkbox-wrapper .checkbox-label.after > span {
   margin-left: var(--space-unit);
 }
 
-.radioWrapper .radioLabel.before > span,
-.checkboxWrapper .checkboxLabel.before > span {
+.radio-wrapper .radio-label.before > span,
+.checkbox-wrapper .checkbox-label.before > span {
   margin-right: var(--space-unit);
 }
 
 /* focus */
-.radioWrapper > input:focus:focus-visible + .radioLabel > z-icon,
-.checkboxWrapper > input:focus:focus-visible + .checkboxLabel > z-icon {
-  box-shadow: var(--shadow-focus-primary);
+.radio-wrapper > input:focus:focus-visible + .radio-label > z-icon,
+.checkbox-wrapper > input:focus:focus-visible + .checkbox-label > z-icon {
   border-radius: var(--border-radius-small);
+  box-shadow: var(--shadow-focus-primary);
 }
 
 /* disabled */
-.radioWrapper > input:disabled + .radioLabel,
-.checkboxWrapper > input:disabled + .checkboxLabel {
+.radio-wrapper > input:disabled + .radio-label,
+.checkbox-wrapper > input:disabled + .checkbox-label {
   color: var(--color-disabled02);
 }
 
-.radioWrapper > input:disabled + .radioLabel > z-icon,
-.checkboxWrapper > input:disabled + .checkboxLabel > z-icon {
-  fill: var(--color-disabled01);
+.radio-wrapper > input:disabled + .radio-label > z-icon,
+.checkbox-wrapper > input:disabled + .checkbox-label > z-icon {
   cursor: default;
+  fill: var(--color-disabled01);
 }
 

package/dist/collection/deprecated/z-input-label/index.js

@@ -5,7 +5,7 @@ export class ZInputLabel {
     this.disabled = false;
   }
   render() {
-    return h("label", { htmlFor: this.htmlfor, class: { disabled: this.disabled } }, this.value);
+    return (h("label", { htmlFor: this.htmlfor, class: { disabled: this.disabled } }, this.value));
   }
   static get is() { return "z-input-label"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/deprecated/z-input-label/styles.css

@@ -5,10 +5,10 @@ label {
   font-family: var(--font-family-sans);
   font-size: var(--font-size-1);
   font-weight: var(--font-sb);
-  line-height: 1.33;
   letter-spacing: 0.32px;
-  text-transform: uppercase;
+  line-height: 1.33;
   text-align: left;
+  text-transform: uppercase;
 }
 
 label.disabled {

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

@@ -1,6 +1,5 @@
-import { h, Host, } from "@stencil/core";
-import classNames from "classnames";
-import { PopoverPosition, PopoverBorderRadius, PopoverShadow, KeyboardKeys, } from "../../beans";
+import { h, Host } from "@stencil/core";
+import { PopoverPosition, PopoverBorderRadius, PopoverShadow, KeyboardCode } from "../../beans";
 import { getElementTree } from "../../utils/utils";
 export class ZPopoverDeprecated {
   /**
@@ -8,13 +7,13 @@ export class ZPopoverDeprecated {
    */
   constructor() {
     /** [optional] Popover position */
-    this.position = PopoverPosition["after-up"];
+    this.position = PopoverPosition.AFTER_UP;
     /** [optional] Background color token for popover */
     this.backgroundColor = "color-white";
     /** [optional] Border radius token for popover */
-    this.borderRadius = PopoverBorderRadius.small;
+    this.borderRadius = PopoverBorderRadius.SMALL;
     /** [optional] Box shadow token for popover */
-    this.boxShadow = PopoverShadow["shadow-1"];
+    this.boxShadow = PopoverShadow.SHADOW_1;
     /** [optional] Show or hide arrow */
     this.showArrow = false;
     /** [optional] Sets padding for Popover container */
@@ -58,8 +57,7 @@ export class ZPopoverDeprecated {
     }
     // If right is outside viewport
     if (r > width) {
-      if (this.position.startsWith("above") ||
-        this.position.startsWith("below")) {
+      if (this.position.startsWith("above") || this.position.startsWith("below")) {
         secondSide = "left";
       }
       else {
@@ -68,8 +66,7 @@ export class ZPopoverDeprecated {
     }
     // If left is outside viewport
     if (l < 0) {
-      if (this.position.startsWith("above") ||
-        this.position.startsWith("below")) {
+      if (this.position.startsWith("above") || this.position.startsWith("below")) {
         secondSide = "right";
       }
       else {
@@ -84,7 +81,7 @@ export class ZPopoverDeprecated {
     this.isVisible = false;
   }
   closePopoverWithKeyboard(e) {
-    if (e.key === KeyboardKeys.ESC) {
+    if (e.key === KeyboardCode.ESC) {
       this.closePopover();
     }
   }
@@ -94,7 +91,7 @@ export class ZPopoverDeprecated {
     event.stopPropagation();
   }
   handleKeyDown(event) {
-    if (event.code === KeyboardKeys.ENTER) {
+    if (event.code === KeyboardCode.ENTER) {
       this.isVisible ? this.closePopover() : this.openPopover();
     }
   }
@@ -107,10 +104,17 @@ export class ZPopoverDeprecated {
   }
   render() {
     return (h(Host, { onKeyDown: this.handleKeyDown }, h("div", { tabindex: "0", onClick: (event) => this.handleClick(event), onKeyDown: (event) => {
-        if (event.key === KeyboardKeys.ENTER) {
+        if (event.key === KeyboardCode.ENTER) {
           this.handleClick(event);
         }
-      } }, h("slot", { name: "trigger" })), h("div", { ref: (e) => (this.popoverElem = e), class: classNames("popover-content-container", this.popoverPosition, `border-radius-${this.borderRadius}`, this.boxShadow, { "show-arrow": this.showArrow }, { visible: this.isVisible }), style: {
+      } }, h("slot", { name: "trigger" })), h("div", { ref: (e) => (this.popoverElem = e), class: {
+        "popover-content-container": true,
+        [this.popoverPosition]: true,
+        [`border-radius-${this.borderRadius}`]: true,
+        [this.boxShadow]: true,
+        "show-arrow": this.showArrow,
+        "visible": this.isVisible,
+      }, style: {
         backgroundColor: `var(--${this.backgroundColor})`,
         padding: this.padding,
       } }, h("slot", { name: "popover" }))));
@@ -134,7 +138,7 @@ export class ZPopoverDeprecated {
         "mutable": false,
         "complexType": {
           "original": "PopoverPosition",
-          "resolved": "(typeof PopoverPosition)[\"above-center\"] | (typeof PopoverPosition)[\"above-left\"] | (typeof PopoverPosition)[\"above-right\"] | (typeof PopoverPosition)[\"after-center\"] | (typeof PopoverPosition)[\"after-down\"] | (typeof PopoverPosition)[\"after-up\"] | (typeof PopoverPosition)[\"before-center\"] | (typeof PopoverPosition)[\"before-down\"] | (typeof PopoverPosition)[\"before-up\"] | (typeof PopoverPosition)[\"below-center\"] | (typeof PopoverPosition)[\"below-left\"] | (typeof PopoverPosition)[\"below-right\"]",
+          "resolved": "PopoverPosition.ABOVE_CENTER | PopoverPosition.ABOVE_LEFT | PopoverPosition.ABOVE_RIGHT | PopoverPosition.AFTER_CENTER | PopoverPosition.AFTER_DOWN | PopoverPosition.AFTER_UP | PopoverPosition.BEFORE_CENTER | PopoverPosition.BEFORE_DOWN | PopoverPosition.BEFORE_UP | PopoverPosition.BELOW_CENTER | PopoverPosition.BELOW_LEFT | PopoverPosition.BELOW_RIGHT",
           "references": {
             "PopoverPosition": {
               "location": "import",
@@ -150,7 +154,7 @@ export class ZPopoverDeprecated {
         },
         "attribute": "position",
         "reflect": false,
-        "defaultValue": "PopoverPosition[\"after-up\"]"
+        "defaultValue": "PopoverPosition.AFTER_UP"
       },
       "backgroundColor": {
         "type": "string",
@@ -175,7 +179,7 @@ export class ZPopoverDeprecated {
         "mutable": false,
         "complexType": {
           "original": "PopoverBorderRadius",
-          "resolved": "PopoverBorderRadius.medium | PopoverBorderRadius.none | PopoverBorderRadius.small",
+          "resolved": "PopoverBorderRadius.MEDIUM | PopoverBorderRadius.NONE | PopoverBorderRadius.SMALL",
           "references": {
             "PopoverBorderRadius": {
               "location": "import",
@@ -191,14 +195,14 @@ export class ZPopoverDeprecated {
         },
         "attribute": "border-radius",
         "reflect": false,
-        "defaultValue": "PopoverBorderRadius.small"
+        "defaultValue": "PopoverBorderRadius.SMALL"
       },
       "boxShadow": {
         "type": "string",
         "mutable": false,
         "complexType": {
           "original": "PopoverShadow",
-          "resolved": "(typeof PopoverShadow)[\"shadow-1\"] | (typeof PopoverShadow)[\"shadow-12\"] | (typeof PopoverShadow)[\"shadow-16\"] | (typeof PopoverShadow)[\"shadow-2\"] | (typeof PopoverShadow)[\"shadow-24\"] | (typeof PopoverShadow)[\"shadow-3\"] | (typeof PopoverShadow)[\"shadow-4\"] | (typeof PopoverShadow)[\"shadow-6\"] | (typeof PopoverShadow)[\"shadow-8\"]",
+          "resolved": "PopoverShadow.SHADOW_1 | PopoverShadow.SHADOW_12 | PopoverShadow.SHADOW_16 | PopoverShadow.SHADOW_2 | PopoverShadow.SHADOW_24 | PopoverShadow.SHADOW_3 | PopoverShadow.SHADOW_4 | PopoverShadow.SHADOW_6 | PopoverShadow.SHADOW_8",
           "references": {
             "PopoverShadow": {
               "location": "import",
@@ -214,7 +218,7 @@ export class ZPopoverDeprecated {
         },
         "attribute": "box-shadow",
         "reflect": false,
-        "defaultValue": "PopoverShadow[\"shadow-1\"]"
+        "defaultValue": "PopoverShadow.SHADOW_1"
       },
       "showArrow": {
         "type": "boolean",

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

@@ -1,21 +1,20 @@
 :host {
-  font-family: var(--dashboard-font);
-  font-weight: var(--font-rg);
-
   position: relative;
   display: inline-block;
+  font-family: var(--dashboard-font);
+  font-weight: var(--font-rg);
 
-  --shadow-arrow-color: rgba(66, 69, 72, 0.2);
-  --shadow-arrow-below-color: rgba(66, 69, 72, 0.1);
+  --shadow-arrow-color: rgb(66 69 72 / 20%);
+  --shadow-arrow-below-color: rgb(66 69 72 / 10%);
 }
 
 .popover-content-container {
-  box-sizing: border-box;
-  visibility: hidden;
   position: absolute;
+  z-index: 999;
   min-width: 64px;
   min-height: 32px;
-  z-index: 999;
+  box-sizing: border-box;
+  visibility: hidden;
 }
 
 .popover-content-container.visible {
@@ -97,19 +96,19 @@ Popover-positions
 }
 
 .popover-content-container.below-right {
-  left: 0;
   top: calc(100% + var(--space-unit));
+  left: 0;
 }
 
 .popover-content-container.below-center {
-  left: 50%;
   top: calc(100% + var(--space-unit));
+  left: 50%;
   transform: translateX(-50%);
 }
 
 .popover-content-container.below-left {
-  right: 0;
   top: calc(100% + var(--space-unit));
+  right: 0;
 }
 
 .popover-content-container.before-down {
@@ -124,18 +123,18 @@ Popover-positions
 }
 
 .popover-content-container.before-up {
-  bottom: 0;
   right: calc(100% + var(--space-unit));
+  bottom: 0;
 }
 
 .popover-content-container.above-right {
-  left: 0;
   bottom: calc(100% + var(--space-unit));
+  left: 0;
 }
 
 .popover-content-container.above-center {
-  left: 50%;
   bottom: calc(100% + var(--space-unit));
+  left: 50%;
   transform: translateX(-50%);
 }
 
@@ -147,90 +146,90 @@ Popover-positions
 /*
 Arrows
 */
-.popover-content-container:before {
-  display: none;
+.popover-content-container::before {
   position: absolute;
-  content: "";
+  z-index: -1;
+  display: none;
   width: 8px;
   height: 8px;
-  z-index: -1;
   background-color: inherit;
+  content: "";
   transform: rotate(45deg);
 }
 
-.popover-content-container.after-down:before {
+.popover-content-container.after-down::before {
   top: 12px;
   left: -4px;
   box-shadow: -1px 1px 1.5px var(--shadow-arrow-color);
 }
 
-.popover-content-container.after-center:before {
+.popover-content-container.after-center::before {
   top: calc(50% - 4px);
   left: -4px;
   box-shadow: -1px 1px 1.5px var(--shadow-arrow-color);
 }
 
-.popover-content-container.after-up:before {
+.popover-content-container.after-up::before {
   bottom: 12px;
   left: -4px;
   box-shadow: -1px 1px 1.5px var(--shadow-arrow-color);
 }
 
-.popover-content-container.below-right:before {
-  left: 12px;
+.popover-content-container.below-right::before {
   top: -4px;
+  left: 12px;
   box-shadow: -1px -1px 2px var(--shadow-arrow-below-color);
 }
 
-.popover-content-container.below-center:before {
-  left: calc(50% - 4px);
+.popover-content-container.below-center::before {
   top: -4px;
+  left: calc(50% - 4px);
   box-shadow: -1px -1px 2px var(--shadow-arrow-below-color);
 }
 
-.popover-content-container.below-left:before {
-  right: 12px;
+.popover-content-container.below-left::before {
   top: -4px;
+  right: 12px;
   box-shadow: -1px -1px 2px var(--shadow-arrow-below-color);
 }
 
-.popover-content-container.before-down:before {
+.popover-content-container.before-down::before {
   top: 12px;
   right: -4px;
   box-shadow: 1px -1px 1.5px var(--shadow-arrow-color);
 }
 
-.popover-content-container.before-center:before {
+.popover-content-container.before-center::before {
   top: calc(50% - 4px);
   right: -4px;
   box-shadow: 1px -1px 1.5px var(--shadow-arrow-color);
 }
 
-.popover-content-container.before-up:before {
-  bottom: 12px;
+.popover-content-container.before-up::before {
   right: -4px;
+  bottom: 12px;
   box-shadow: 1px -1px 1.5px var(--shadow-arrow-color);
 }
 
-.popover-content-container.above-right:before {
-  left: 12px;
+.popover-content-container.above-right::before {
   bottom: -4px;
+  left: 12px;
   box-shadow: 1px 1px 1.5px var(--shadow-arrow-color);
 }
 
-.popover-content-container.above-center:before {
-  left: calc(50% - 4px);
+.popover-content-container.above-center::before {
   bottom: -4px;
+  left: calc(50% - 4px);
   box-shadow: 1px 1px 1.5px var(--shadow-arrow-color);
 }
 
-.popover-content-container.above-left:before {
+.popover-content-container.above-left::before {
   right: 12px;
   bottom: -4px;
   box-shadow: 1px 1px 1.5px var(--shadow-arrow-color);
 }
 
 /** Show/Hide arrow */
-.popover-content-container.show-arrow:before {
+.popover-content-container.show-arrow::before {
   display: block;
 }