@zanichelli/albe-web-components 2.46.1 → 2.47.0

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

@@ -1,31 +1,30 @@
-import { Component, Prop, h, Element } from "@stencil/core";
-import { ZChipType } from "../../../beans";
+import { Component, Prop, h, Element, Event, } from "@stencil/core";
+import { DeviceEnum, ZChipType } from "../../../beans";
+import { getDevice, handleKeyboardSubmit } from "../../../utils/utils";
 export class ZChip {
   constructor() {
+    this.type = ZChipType.default;
     this.disabled = false;
-    this.filter = false;
   }
-  renderLegacyChip() {
-    return (h("div", null,
-      h("span", { class: "boldtext" }, this.boldtext),
-      " ",
-      this.regulartext));
+  emitinteractiveIconClick() {
+    this.interactiveIconClick.emit();
   }
-  renderFilterChip() {
-    if (this.filter) {
-      return (h("button", { class: this.type ? this.type : ZChipType.default, disabled: this.disabled, tabindex: "0" },
-        h("slot", null)));
-    }
-    return (h("div", { class: this.type ? this.type : "" },
-      h("slot", null)));
+  getIconSize() {
+    return getDevice() !== DeviceEnum.desktop ? 22 : 14;
   }
   render() {
-    return this.boldtext != null || this.regulartext != null
-      ? this.renderLegacyChip()
-      : this.renderFilterChip();
+    if (this.interactiveIcon) {
+      return (h("button", { class: this.type, disabled: this.disabled, tabindex: "0" },
+        this.icon && (h("z-icon", { class: "iconSx", name: this.icon, width: this.getIconSize(), height: this.getIconSize() })),
+        h("slot", null),
+        h("z-icon", { tabIndex: this.disabled ? -1 : 0, onClick: () => this.emitinteractiveIconClick(), onKeyPress: (e) => handleKeyboardSubmit(e, this.emitinteractiveIconClick), name: this.interactiveIcon, width: this.getIconSize(), height: this.getIconSize() })));
+    }
+    return (h("div", { class: `${this.type}`, tabindex: "0" },
+      this.icon && (h("z-icon", { name: this.icon, width: this.getIconSize(), height: this.getIconSize() })),
+      h("slot", null)));
   }
   static get is() { return "z-chip"; }
-  static get encapsulation() { return "shadow"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() { return {
     "$": ["styles.css"]
   }; }
@@ -33,7 +32,7 @@ export class ZChip {
     "$": ["styles.css"]
   }; }
   static get properties() { return {
-    "regulartext": {
+    "icon": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -47,24 +46,7 @@ export class ZChip {
         "tags": [],
         "text": ""
       },
-      "attribute": "regulartext",
-      "reflect": false
-    },
-    "boldtext": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "boldtext",
+      "attribute": "icon",
       "reflect": false
     },
     "type": {
@@ -72,7 +54,7 @@ export class ZChip {
       "mutable": false,
       "complexType": {
         "original": "ZChipType",
-        "resolved": "ZChipType.default | ZChipType.mini",
+        "resolved": "ZChipType.default | ZChipType.medium | ZChipType.small",
         "references": {
           "ZChipType": {
             "location": "import",
@@ -87,14 +69,15 @@ export class ZChip {
         "text": ""
       },
       "attribute": "type",
-      "reflect": true
+      "reflect": true,
+      "defaultValue": "ZChipType.default"
     },
-    "disabled": {
-      "type": "boolean",
+    "interactiveIcon": {
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "string",
+        "resolved": "string",
         "references": {}
       },
       "required": false,
@@ -103,11 +86,10 @@ export class ZChip {
         "tags": [],
         "text": ""
       },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
+      "attribute": "interactive-icon",
+      "reflect": true
     },
-    "filter": {
+    "disabled": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -121,10 +103,26 @@ export class ZChip {
         "tags": [],
         "text": ""
       },
-      "attribute": "filter",
+      "attribute": "disabled",
       "reflect": true,
       "defaultValue": "false"
     }
   }; }
-  static get elementRef() { return "hostElement"; }
+  static get events() { return [{
+      "method": "interactiveIconClick",
+      "name": "interactiveIconClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
 }

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

@@ -1,64 +1,110 @@
 :host > button {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
   padding: 0 calc(var(--space-unit) * 1.5);
   background-color: var(--bg-white);
-  border: var(--border-size-medium) solid var(--bg-grey-200);
-  color: var(--text-grey-800);
+  border: var(--border-size-small) solid var(--gray400);
+  border-radius: 14px;
+  color: var(--color-primary01);
   fill: var(--text-grey-800);
   font-family: var(--dashboard-font);
   font-size: 14px;
+  font-weight: var(--font-sb);
 }
 
-:host > div {
-  display: inline-block;
-  min-height: 28px;
-  line-height: 28px;
-  padding: 0 calc(var(--space-unit) * 1.5);
-  background-color: var(--bg-white);
-  border: var(--border-size-small) solid var(--bg-grey-200);
-  border-radius: 14px;
-  color: var(--text-grey-800);
-  fill: var(--text-grey-800);
-  font-family: var(--dashboard-font);
-  font-size: 12px;
+:host > button:hover:not(:disabled),
+:host > button:hover:not(:disabled) > z-icon:last-child {
+  color: var(--color-hover-primary);
+  fill: var(--color-hover-primary);
+}
+
+:host > button:hover:not(:disabled) > z-icon:first-child {
+  fill: var(--color-icon02);
 }
 
-.boldtext {
-  font-weight: bold;
+:host > button > z-icon:last-child {
+  cursor: pointer;
 }
 
-:host > button:hover {
-  color: var(--myz-blue-dark);
+:host > button > z-icon.iconSx {
+  margin-right: calc(var(--space-unit) / 2);
+}
+
+:host > button > z-icon:last-child {
+  margin-left: var(--space-unit);
+  fill: var(--color-primary01);
+}
+
+:host > button:disabled,
+:host > button:disabled > z-icon {
+  color: var(--color-disabled03);
+  fill: var(--color-disabled03);
+}
+
+:host > button:disabled > z-icon {
+  cursor: auto;
 }
 
 :host > button:disabled {
-  border: var(--border-size-medium) solid var(--bg-grey-200);
-  color: rgb(149, 153, 157);
-  box-shadow: none;
+  border: var(--border-size-small) solid var(--color-disabled01);
 }
 
-:host > button.default:focus:focus-visible,
-:host > button.mini:focus:focus-visible {
+:host > button:focus:focus-visible,
+:host > div:focus:focus-visible {
   box-shadow: var(--shadow-focus-primary);
   outline: none;
 }
 
 :host > button:not(:disabled):active {
   background-color: var(--gray50);
+  text-decoration: underline;
+}
+
+:host > button:not(:disabled):active:hover,
+:host > button:hover:not(:disabled):active:hover > z-icon:last-child {
+  color: var(--color-primary01);
+  fill: var(--color-primary01);
+}
+
+:host > div {
+  display: inline-flex;
+  align-items: center;
+  min-height: 28px;
+  line-height: 28px;
+  padding: 0 calc(var(--space-unit) * 1.5);
+  background-color: var(--bg-white);
+  border: var(--border-size-small) solid var(--bg-grey-200);
+  border-radius: 14px;
+  color: var(--text-grey-800);
+  fill: var(--text-grey-800);
+  font-family: var(--dashboard-font);
+  font-size: 14px;
+}
+
+:host > div > z-icon {
+  margin-right: calc(var(--space-unit) / 2);
 }
 
+/* :host type */
 :host > button.default,
 :host > div.default {
   min-height: 44px;
-  border-radius: 22px;
   line-height: 44px;
+  border-radius: 22px;
 }
 
-:host > button.mini,
-:host > div.mini {
-  min-height: 36px;
+:host > button.medium,
+:host > div.medium {
+  min-height: 40px;
+  line-height: 40px;
   border-radius: 22px;
+}
+
+:host > button.small,
+:host > div.small {
+  min-height: 36px;
   line-height: 36px;
+  border-radius: 22px;
 }
 
 /* Desktop breakpoint */
@@ -67,17 +113,29 @@
     font-size: 12px;
   }
 
+  :host > div {
+    font-size: 12px;
+  }
+
+  /* :host type */
   :host > button.default,
   :host > div.default {
     min-height: 32px;
-    border-radius: 16px;
     line-height: 32px;
+    border-radius: 16px;
   }
 
-  :host > button.mini,
-  :host > div.mini {
-    min-height: 24px;
+  :host > button.medium,
+  :host > div.medium {
+    min-height: 28px;
+    line-height: 28px;
     border-radius: 16px;
+  }
+
+  :host > button.small,
+  :host > div.small {
+    min-height: 24px;
     line-height: 24px;
+    border-radius: 16px;
   }
 }

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

@@ -1,8 +1,7 @@
 import { Component, h, Event, Element, Host, State, Listen, Prop, } from "@stencil/core";
-import { DeviceEnum, TooltipPosition, ZChipType } from "../../../beans";
+import { TooltipPosition, ZChipType } from "../../../beans";
 import { tabletBreakpoint } from "../../../constants/breakpoints";
-import { getDevice } from "../../../utils/utils";
-import './index';
+import "./index";
 export class ZFile {
   constructor() {
     this.allowTooltip = false;
@@ -18,6 +17,9 @@ export class ZFile {
   onMouseLeave() {
     this.tooltipVisible = false;
   }
+  onInteractiveIconClick() {
+    this.removeFileHandler();
+  }
   componentDidLoad() {
     var _a, _b;
     if (this.elementHasEllipsis() && window.innerWidth > tabletBreakpoint)
@@ -25,25 +27,16 @@ 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() {
     return (h(Host, null,
       this.allowTooltip && (h("z-tooltip", { open: this.tooltipVisible, type: TooltipPosition.AUTO, "bind-to": `#chip-${this.fileNumber}` },
         h("span", { class: "body-5 tootip-content" }, this.ellipsis.innerText))),
-      h("z-chip", { id: `chip-${this.fileNumber}`, filter: true, type: ZChipType.default },
-        h("div", { class: "chip-content" },
-          h("span", { ref: (el) => (this.ellipsis = el), tabIndex: -1, class: {
-              "body-3-sb": getDevice() == DeviceEnum.desktop,
-              "body-2-sb": getDevice() !== DeviceEnum.desktop,
-            } },
-            h("slot", null)),
-          h("z-icon", { "aria-label": "Elimina file", tabIndex: 0, onClick: () => this.removeFileHandler(), onKeyPress: (e) => {
-              if (e.code == "Space" || e.code == "Enter") {
-                e.preventDefault();
-                this.removeFileHandler();
-              }
-            }, name: "multiply-circled", height: getDevice() !== DeviceEnum.desktop ? 20 : 15, width: getDevice() !== DeviceEnum.desktop ? 20 : 15, ref: (val) => (this.icon = val) })))));
+      h("z-chip", { id: `chip-${this.fileNumber}`, interactiveIcon: "multiply-circled", type: ZChipType.default },
+        h("span", { ref: (el) => (this.ellipsis = el), tabIndex: -1 },
+          h("slot", null)))));
   }
   static get is() { return "z-file"; }
   static get encapsulation() { return "scoped"; }
@@ -105,5 +98,11 @@ export class ZFile {
       "target": undefined,
       "capture": false,
       "passive": true
+    }, {
+      "name": "interactiveIconClick",
+      "method": "onInteractiveIconClick",
+      "target": undefined,
+      "capture": false,
+      "passive": false
     }]; }
 }

package/dist/collection/components/file-upload/z-file/styles.css

@@ -4,11 +4,6 @@
   position: relative;
 }
 
-:host .chip-content {
-  display: flex;
-  align-items: center;
-}
-
 :host > z-tooltip {
   z-index: 10;
 }
@@ -17,28 +12,14 @@
   white-space: nowrap;
 }
 
-:host > z-chip > .chip-content > span {
+:host > z-chip span {
   max-width: 250px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 14px;
   line-height: 1.33;
   letter-spacing: 0.32px;
-}
-
-:host > z-chip > .chip-content > span.regular {
-  font-weight: var(--font-rg);
-}
-
-:host > z-chip > .chip-content > span.bold {
-  font-weight: var(--font-sb);
-}
-
-:host .chip-content > z-icon:last-child {
-  margin-left: var(--space-unit);
-  cursor: pointer;
-  fill: var(--color-icon01);
+  display: block;
 }
 
 /* Tablet breakpoint */
@@ -47,13 +28,7 @@
 
 /* Desktop breakpoint */
 @media only screen and (min-width: 1152px) {
-  :host {
-    border-radius: 16px;
-  }
 
-  :host > z-chip > .chip-content > span {
-    font-size: 12px;
-  }
 }
 
 /* Wide breakpoint */

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

@@ -39,7 +39,7 @@ export class ZFileUpload {
   }
   handleAccessibility() {
     if (this.filesNumber > 0) {
-      this.el.querySelector('z-file:last-child > z-chip').shadowRoot.querySelector('button').focus();
+      this.el.querySelector('z-file:last-child z-chip button').focus();
     }
     else {
       this.type === ZFileUploadTypeEnum.default ? this.button.shadowRoot.querySelector('button').focus() : this.uploadLink.focus();

package/dist/collection/components/navigation/tabs/navigation-tab.css

@@ -1,9 +1,5 @@
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-:host > * {
+:host > button,
+:host > a {
   position: relative;
   z-index: 0;
   display: inline-flex;
@@ -31,6 +27,11 @@
   text-decoration: none;
 }
 
+:host *::before,
+:host *::after {
+  box-sizing: border-box;
+}
+
 :host(:not([disabled]):hover) > *,
 :host([selected]) > * {
   color: var(--color-hover-secondary);
@@ -70,7 +71,7 @@ slot[name="icon"] z-icon,
   background-color: var(--color-background);
 }
 
-> *:focus:focus-visible {
+:host > *:focus:focus-visible {
   box-shadow: var(--shadow-focus-primary);
 }
 

package/dist/collection/components/navigation/tabs/z-navigation-tab-link/index.js

@@ -60,10 +60,10 @@ export class ZNavigationTabLink {
   static get is() { return "z-navigation-tab-link"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["../navigation-tab.css", "styles.css"]
+    "$": ["../navigation-tab.css"]
   }; }
   static get styleUrls() { return {
-    "$": ["../navigation-tab.css", "styles.css"]
+    "$": ["../navigation-tab.css"]
   }; }
   static get properties() { return {
     "selected": {

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

@@ -0,0 +1,62 @@
+import { Component, Prop, h, Host } from "@stencil/core";
+/**
+ * Ztag  component.
+ * @slot - The text of the z-tag.
+ * @cssprop --z-tag-text-color - text and icon color using tokens.
+ * @cssprop --z-tag-bg - background color of the z-tag.
+ */
+export class ZTag {
+  render() {
+    return (h(Host, { class: {
+        "body-5-sb": true,
+        expandable: this.expandable && !!this.icon,
+      } },
+      this.icon && h("z-icon", { name: this.icon }),
+      h("div", null,
+        h("slot", null))));
+  }
+  static get is() { return "z-tag"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "[optional] Tag icon"
+      },
+      "attribute": "icon",
+      "reflect": false
+    },
+    "expandable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "[optional] Hide the text and show it on hover"
+      },
+      "attribute": "expandable",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/components/z-tag/styles.css

@@ -0,0 +1,51 @@
+:host {
+  --z-icon-width: 14px;
+  --z-icon-height: 14px;
+
+  --z-tag-text-color: var(--color-primary03);
+  --z-tag-bg: var(--color-hover-primary);
+
+  font-family: var(--font-family-sans);
+
+  border-radius: var(--border-radius);
+  padding: calc(var(--space-unit) / 2);
+  text-transform: uppercase;
+
+  display: flex;
+  width: fit-content;
+  height: fit-content;
+
+  max-width: inherit;
+  max-height: inherit;
+
+  color: var(--z-tag-text-color);
+  fill: var(--z-tag-text-color);
+  background-color: var(--z-tag-bg);
+  line-height: 14px;
+}
+
+:host > z-icon {
+  margin-right: var(--space-unit);
+}
+
+:host(.expandable) > z-icon {
+  margin-right: 0;
+  transition: margin-right 0.3s ease-out;
+}
+
+:host(:not(.expandable)) > z-icon:not(:last-child),
+:host(.expandable:hover) > z-icon:not(:last-child) {
+  margin-right: var(--space-unit);
+  transition: margin-right 0.3s ease-out 0s;
+}
+
+:host(.expandable) > div {
+  max-width: 0;
+  max-height: 0;
+  overflow: hidden;
+}
+
+:host(.expandable:hover) > div {
+  max-width: 100%;
+  max-height: 100%;
+}

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

@@ -0,0 +1,59 @@
+import { Component, Prop, h } from '@stencil/core';
+export class ZChipDeprecated {
+  renderLegacyChip() {
+    return h("div", null,
+      h("span", { class: "boldtext" }, this.boldtext),
+      " ",
+      this.regulartext);
+  }
+  render() {
+    return this.boldtext != null || this.regulartext != null ?
+      this.renderLegacyChip() :
+      h("div", null,
+        h("slot", null));
+  }
+  static get is() { return "z-chip-deprecated"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "regulartext": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "regulartext",
+      "reflect": false
+    },
+    "boldtext": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "boldtext",
+      "reflect": false
+    }
+  }; }
+}