@zanichelli/albe-web-components 3.2.1 → 4.0.1

package/dist/collection/components/buttons/z-button/index.js

@@ -1,5 +1,4 @@
 import { Component, Prop, h, Element } from "@stencil/core";
-import classNames from "classnames";
 import { ButtonVariantEnum, ButtonTypeEnum, ButtonSizeEnum, } from "../../../beans";
 /**
  * @slot - button label
@@ -18,24 +17,22 @@ export class ZButton {
   getAttributes() {
     return {
       id: this.htmlid,
-      class: classNames(this.variant, this.size),
       "aria-label": this.ariaLabel,
+      class: {
+        container: true,
+        [this.variant]: true,
+        [this.size]: true,
+        "has-text": !!this.hostElement.textContent
+      }
     };
   }
-  componentDidLoad() {
-    if (this.hostElement.innerText) {
-      this.hostElement.classList.add("with-text");
-    }
-  }
-  componentWillRender() {
-    this.hostElement.style.pointerEvents = this.disabled ? "none" : "auto";
-  }
   render() {
-    if (this.href)
-      return (h("a", Object.assign({ href: this.href, target: this.target }, this.getAttributes()),
+    if (this.href) {
+      return (h("a", Object.assign({}, this.getAttributes(), { href: this.href, target: this.target }),
         this.icon && h("z-icon", { name: this.icon, width: 16, height: 16 }),
         h("slot", null)));
-    return (h("button", Object.assign({ name: this.name, type: this.type, disabled: this.disabled }, this.getAttributes()),
+    }
+    return (h("button", Object.assign({}, this.getAttributes(), { name: this.name, type: this.type, disabled: this.disabled }),
       this.icon && h("z-icon", { name: this.icon, width: 16, height: 16 }),
       h("slot", null)));
   }
@@ -77,7 +74,7 @@ export class ZButton {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "HTML a href attribute. If it is set, it renders an HTML a tag."
+        "text": "HTML <a> href attribute. If it is set, it renders an HTML <a> tag."
       },
       "attribute": "href",
       "reflect": true
@@ -211,7 +208,7 @@ export class ZButton {
         "text": "`z-icon` name to use (optional)."
       },
       "attribute": "icon",
-      "reflect": false
+      "reflect": true
     },
     "size": {
       "type": "string",

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

@@ -3,21 +3,20 @@
   --z-icon-width: 16px;
   --z-icon-height: 16px;
   --z-icon-right-margin: 0;
-  --rgb-white: 240, 240, 240;
 }
 
-button:disabled,
-a:disabled {
+:host([disabled]:not([disabled="false"])) {
   pointer-events: none;
 }
 
-button,
-a {
+:host .container {
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-family: var(--dashboard-font);
+  width: 100%;
+  padding: 0;
+  font-family: var(--font-family-sans);
   font-weight: var(--font-sb);
   font-size: 14px;
   line-height: 1;
@@ -28,124 +27,121 @@ a {
   text-transform: uppercase;
   text-decoration: none;
   cursor: pointer;
-  width: 100%;
   white-space: nowrap;
   outline: none;
   fill: currentColor;
 }
 
-:host.with-text z-icon {
-  --z-icon-right-margin: var(--space-unit);
-}
-
-:host.with-text button,
-:host.with-text a {
+:host .container.has-text {
   min-width: calc(var(--space-unit) * 8);
   padding: 0 calc(var(--space-unit) * 2);
 }
 
-.big {
+:host .container.has-text z-icon {
+  --z-icon-right-margin: var(--space-unit);
+}
+
+:host .big {
   height: 44px;
   min-width: 44px;
 }
 
-.small {
+:host .small {
   height: 36px;
   min-width: 36px;
 }
 
-.x-small {
+:host .x-small {
   height: 32px;
   min-width: 32px;
 }
 
-.primary {
+:host .primary {
   background-color: var(--color-primary01);
   border-color: var(--color-primary01);
   color: var(--color-text-inverse);
 }
 
 @media (hover: hover) {
-  .primary:hover {
+  :host .primary:hover {
     background-color: var(--color-hover-primary);
     border-color: var(--color-hover-primary);
     color: var(--color-text-inverse);
   }
 }
 
-button:focus:focus-visible,
-a:focus:focus-visible {
+:host .container:focus:focus-visible {
   box-shadow: var(--shadow-focus-primary);
 }
 
-.primary:active {
+:host .primary:active {
   background-color: var(--color-pressed-primary);
   border-color: var(--color-pressed-primary);
   color: var(--color-text-inverse);
   box-shadow: var(--shadow-2);
 }
 
-.primary:disabled {
+:host([disabled]:not([disabled="false"])) .primary {
   background-color: var(--color-disabled01);
   border-color: var(--color-disabled01);
   color: var(--color-disabled02);
 }
 
-.secondary {
+:host .secondary {
   background-color: var(--color-surface01);
   border-color: var(--color-primary01);
   color: var(--color-primary01);
 }
 
 @media (hover: hover) {
-  .secondary:hover {
+  :host .secondary:hover {
     background-color: var(--color-surface01);
     border-color: var(--color-hover-primary);
     color: var(--color-hover-primary);
   }
 }
 
-.secondary:active {
+:host .secondary:active {
   background-color: var(--color-surface01);
   border-color: var(--color-pressed-primary);
   color: var(--color-pressed-primary);
   box-shadow: var(--shadow-2);
 }
 
-.secondary:disabled {
+:host([disabled]:not([disabled="false"])) .secondary {
   background-color: var(--color-surface01);
   border-color: var(--color-disabled01);
   color: var(--color-disabled02);
 }
 
-.tertiary {
+:host .tertiary {
   background-color: transparent;
   border-color: transparent;
   color: var(--color-primary01);
 }
 
 @media (hover: hover) {
-  .tertiary:hover {
+  :host .tertiary:hover {
     background-color: var(--color-primary03);
     border-color: var(--color-primary03);
     color: var(--color-hover-primary);
   }
 }
 
-.tertiary:focus:focus-visible {
+:host .tertiary:focus:focus-visible {
   background-color: var(--color-surface01);
   border-color: var(--color-surface01);
   color: var(--color-primary01);
 }
 
-.tertiary:active {
+:host .tertiary:active {
   background-color: var(--color-surface01);
   border-color: var(--color-surface01);
   color: var(--color-primary01);
   box-shadow: var(--shadow-2);
 }
 
-.tertiary:disabled {
+:host([disabled]:not([disabled="false"])) .tertiary {
   background-color: transparent;
   border-color: transparent;
   color: var(--color-disabled02);

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

@@ -1,10 +1,10 @@
 import { Component, Prop, h, Event } from "@stencil/core";
 import { randomId } from "../../../utils/utils";
-import { ZtoggleSwitchPositionEnum } from "../../../beans";
+import { LabelPositions } from "../../../beans";
 export class ZToggleSwitch {
   constructor() {
     this.disabled = false;
-    this.labelPosition = ZtoggleSwitchPositionEnum.left;
+    this.labelPosition = LabelPositions.left;
     this.checked = false;
     this.htmlid = `toggle-switch-id-${randomId()}`;
   }
@@ -68,10 +68,10 @@ export class ZToggleSwitch {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "ZtoggleSwitchPositionEnum",
-        "resolved": "ZtoggleSwitchPositionEnum.left | ZtoggleSwitchPositionEnum.right",
+        "original": "LabelPosition",
+        "resolved": "\"left\" | \"right\"",
         "references": {
-          "ZtoggleSwitchPositionEnum": {
+          "LabelPosition": {
             "location": "import",
             "path": "../../../beans"
           }
@@ -85,7 +85,7 @@ export class ZToggleSwitch {
       },
       "attribute": "label-position",
       "reflect": true,
-      "defaultValue": "ZtoggleSwitchPositionEnum.left"
+      "defaultValue": "LabelPositions.left"
     },
     "checked": {
       "type": "boolean",

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

@@ -10,7 +10,6 @@ export class ZDragdropArea {
   }
   render() {
     return (h("div", { tabIndex: 0, ref: (val) => (this.dragDropContainer = val), class: "dragdrop", onDragOver: (e) => {
-        console.log(e);
         e.preventDefault();
         this.dragDropContainer.classList.add("dragover");
       }, onDragLeave: () => {

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

@@ -27,7 +27,6 @@ export class ZFile {
     (_b = (_a = this.icon) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
   }
   elementHasEllipsis() {
-    console.log(this.ellipsis, this.ellipsis.offsetWidth, this.ellipsis.scrollWidth);
     return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
   }
   render() {

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

@@ -1,5 +1,5 @@
 import { Component, Prop, h, State, Listen, Watch, Event, } from "@stencil/core";
-import { InputTypeEnum, keybordKeyCodeEnum, } from "../../../beans";
+import { InputTypeEnum, KeyboardKeyCodeEnum, } from "../../../beans";
 import { handleKeyboardSubmit } from "../../../utils/utils";
 export class ZCombobox {
   constructor() {
@@ -101,7 +101,7 @@ export class ZCombobox {
   }
   renderHeader() {
     return (h("div", { class: "header", onClick: () => this.toggleComboBox(), onKeyDown: (ev) => {
-        if (ev.keyCode === keybordKeyCodeEnum.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" },
@@ -147,7 +147,7 @@ export class ZCombobox {
   renderSearchInput() {
     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, hasmessage: false, onInputChange: (e) => {
+    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)
           return this.closeFilterItems();
         this.filterItems(e.detail.value);
@@ -162,7 +162,7 @@ export class ZCombobox {
           this.maxcheckableitems < this.itemsList.length })));
   }
   render() {
-    return (h("div", { "data-action": `combo-${this.inputid}`, class: `${this.isopen ? "open" : ""} ${this.isfixed ? "fixed" : ""}`, id: this.inputid },
+    return (h("div", { "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed }, id: this.inputid },
       this.renderHeader(),
       this.renderContent()));
   }