@zanichelli/albe-web-components 2.46.0 → 2.46.1

package/dist/collection/components/navigation/{z-navigation-tab/styles.css → tabs/navigation-tab.css}

@@ -1,10 +1,15 @@
-button {
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:host > * {
   position: relative;
   z-index: 0;
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 100%;
+  width: auto;
   margin: 0;
   padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);
   background-color: unset;
@@ -22,51 +27,54 @@ button {
   cursor: pointer;
 }
 
-*::before,
-*::after {
-  box-sizing: border-box;
+:host > a {
+  text-decoration: none;
 }
 
-:host(:hover:not([disabled])) button,
-:host([selected]) button {
+:host(:not([disabled]):hover) > *,
+:host([selected]) > * {
   color: var(--color-hover-secondary);
   fill: currentColor;
 }
 
-:host(:hover:not([disabled])) button::after,
-:host([selected]) button::after {
+:host(:not([disabled]):hover) > *::after,
+:host([selected]) > *::after {
   content: '';
   position: absolute;
   background-color: var(--color-hover-secondary);
 }
 
-:host([orientation='horizontal']:not([disabled]):hover) button::after,
-:host([orientation='horizontal'][selected]) button::after {
+:host([orientation='horizontal']:not([disabled]):hover) > *::after,
+:host([orientation='horizontal'][selected]) > *::after {
   bottom: 0;
   left: 0;
   width: 100%;
   height: var(--border-size-large);
 }
 
-::slotted(z-icon) {
+slot[name="icon"] z-icon,
+::slotted([slot="icon"]) {
   --z-icon-width: calc(var(--space-unit) * 2);
   --z-icon-height: calc(var(--space-unit) * 2);
+
+  display: flex;
   margin: 0;
 }
 
-:host([orientation='horizontal']) ::slotted(z-icon) {
+:host([orientation='horizontal']) slot[name="icon"] z-icon,
+:host([orientation='horizontal']) ::slotted([slot="icon"]) {
   margin-right: var(--space-unit);
 }
 
-:host(:hover:not([disabled])) button {
+:host(:not([disabled]):hover) > * {
   background-color: var(--color-background);
 }
 
-button:focus:focus-visible {
+> *:focus:focus-visible {
   box-shadow: var(--shadow-focus-primary);
 }
 
-:host([disabled]) button {
+:host([disabled]) > * {
   pointer-events: all;
   cursor: not-allowed;
   color: var(--gray500);
@@ -74,39 +82,36 @@ button:focus:focus-visible {
 }
 
 /* Size small (only available for horizontal) */
-:host([size='small']) button {
+:host([size='small']) > * {
   font-size: var(--font-size-2);
   line-height: 1.4;
   letter-spacing: 0.16px;
 }
 
-:host([size='small'][orientation='horizontal']) button {
+:host([size='small'][orientation='horizontal']) > * {
   padding: var(--space-unit) calc(var(--space-unit) * 2);
 }
 
-:host([size='small'][orientation='horizontal']:not([disabled]):hover) button::after,
-:host([size='small'][orientation='horizontal'][selected]) button::after {
+:host([size='small'][orientation='horizontal']:not([disabled]):hover) > *::after,
+:host([size='small'][orientation='horizontal'][selected]) > *::after {
   height: var(--border-size-medium);
 }
 
-:host([size='small']:not([orientation='vertical'])) ::slotted(z-icon) {
+:host([size='small']:not([orientation='vertical'])) slot[name="icon"] z-icon,
+:host([size='small']:not([orientation='vertical'])) ::slotted([slot="icon"]) {
   --z-icon-width: 14px;
   --z-icon-height: 14px;
 }
 
 /* Orientation Vertical */
-:host([orientation='vertical']) button {
+:host([orientation='vertical']) > * {
   padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);
 }
 
-:host([orientation='vertical']:hover:not([disabled])) button::after,
-:host([orientation='vertical'][selected]) button::after {
+:host([orientation='vertical']:hover:not([disabled])) > *::after,
+:host([orientation='vertical'][selected]) > *::after {
   width: var(--border-size-large);
   height: 100%;
   top: 0;
   right: 0;
 }
-
-:host([orientation='vertical']) ::slotted([slot='label']) {
-  display: none;
-}

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

@@ -0,0 +1,239 @@
+import { Component, Prop, h, Element, Listen, Event, Watch } from "@stencil/core";
+import { NavigationTabsOrientations, NavigationTabsSizes } from "../../../../beans";
+import { icons } from "../../../icons/icons";
+/**
+ * Single tab component to use inside `z-navigation-tabs`. It renders a button.
+ * @slot icon - Tab icon. If no extra customization is needed, use the `icon` prop passing the icon's name.
+ */
+export class ZNavigationTab {
+  constructor() {
+    /**
+     * Whether the tab is selected.
+     */
+    this.selected = false;
+    /**
+     * Whether the tab is disabled.
+     */
+    this.disabled = false;
+    /**
+     * Tab orientation. Do not set this manually: `z-navigation-tabs` will handle this.
+     */
+    this.orientation = NavigationTabsOrientations.horizontal;
+    /**
+     * Tab size. Do not set this manually: `z-navigation-tabs` will handle this.
+     */
+    this.size = NavigationTabsSizes.big;
+  }
+  onFocus() {
+    this.host.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest",
+      inline: "nearest",
+    });
+  }
+  onClick() {
+    if (!this.disabled) {
+      this.selected = true;
+    }
+  }
+  onSelected() {
+    if (this.selected) {
+      this.emitSelected.emit();
+    }
+  }
+  /**
+   * Render the icon component using the icon's name passed from prop.
+   * Use the `filled` version when the tab is `selected`.
+   * @returns {HTMLElement}
+   */
+  renderIcon() {
+    let icon = this.icon;
+    const iconFilled = `${icon.replace(/-filled$/, '')}-filled`;
+    if (this.selected && Object.keys(icons).includes(iconFilled)) {
+      icon = iconFilled;
+    }
+    return h("z-icon", { name: icon });
+  }
+  render() {
+    return (h("button", { role: "tab", disabled: this.disabled, title: this.htmlTitle },
+      h("slot", { name: "icon" }, this.icon && this.renderIcon()),
+      this.orientation === "horizontal" && this.label));
+  }
+  static get is() { return "z-navigation-tab"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["../navigation-tab.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["../navigation-tab.css"]
+  }; }
+  static get properties() { return {
+    "selected": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Whether the tab is selected."
+      },
+      "attribute": "selected",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Whether the tab is disabled."
+      },
+      "attribute": "disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "orientation": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "NavigationTabsOrientation",
+        "resolved": "\"horizontal\" | \"vertical\"",
+        "references": {
+          "NavigationTabsOrientation": {
+            "location": "import",
+            "path": "../../../../beans"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Tab orientation. Do not set this manually: `z-navigation-tabs` will handle this."
+      },
+      "attribute": "orientation",
+      "reflect": true,
+      "defaultValue": "NavigationTabsOrientations.horizontal"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "NavigationTabsSize",
+        "resolved": "\"big\" | \"small\"",
+        "references": {
+          "NavigationTabsSize": {
+            "location": "import",
+            "path": "../../../../beans"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Tab size. Do not set this manually: `z-navigation-tabs` will handle this."
+      },
+      "attribute": "size",
+      "reflect": true,
+      "defaultValue": "NavigationTabsSizes.big"
+    },
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Name of the icon to use. Use the slot `icon` for extra customization.\nThe `filled` version will be automatically used (if found) when the tab is `selected`."
+      },
+      "attribute": "icon",
+      "reflect": false
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Label to show in the tab."
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "htmlTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Html `title` attribute for the button."
+      },
+      "attribute": "html-title",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "emitSelected",
+      "name": "selected",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "selected",
+      "methodName": "onSelected"
+    }]; }
+  static get listeners() { return [{
+      "name": "focus",
+      "method": "onFocus",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "click",
+      "method": "onClick",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

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

@@ -0,0 +1,271 @@
+import { Component, Prop, h, Element, Listen, Event, Watch, } from "@stencil/core";
+import { NavigationTabsOrientations, NavigationTabsSizes, } from "../../../../beans";
+import { icons } from "../../../icons/icons";
+/**
+ * Single tab component to use inside `z-navigation-tabs`. It renders an anchor element.
+ * @slot icon - Tab icon. If no extra customization is needed, use the `icon` prop passing the icon's name.
+ */
+export class ZNavigationTabLink {
+  constructor() {
+    /**
+     * Whether the tab is selected.
+     */
+    this.selected = false;
+    /**
+     * Whether the tab is disabled.
+     */
+    this.disabled = false;
+    /**
+     * Tab orientation. Do not set this manually: `z-navigation-tabs` will handle this.
+     */
+    this.orientation = NavigationTabsOrientations.horizontal;
+    /**
+     * Tab size. Do not set this manually: `z-navigation-tabs` will handle this.
+     */
+    this.size = NavigationTabsSizes.big;
+  }
+  onFocus() {
+    this.host.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest",
+      inline: "nearest",
+    });
+  }
+  onClick() {
+    this.selected = true;
+  }
+  onSelected() {
+    if (this.selected) {
+      this.emitSelected.emit();
+    }
+  }
+  /**
+   * Render the icon component using the icon's name passed from prop.
+   * Use the `filled` version when the tab is `selected`.
+   * @returns {HTMLElement}
+   */
+  renderIcon() {
+    let icon = this.icon;
+    const iconFilled = `${icon.replace(/-filled$/, '')}-filled`;
+    if (this.selected && Object.keys(icons).includes(iconFilled)) {
+      icon = iconFilled;
+    }
+    return h("z-icon", { name: icon });
+  }
+  render() {
+    return (h("a", { role: "tab", href: !this.disabled && this.href, title: this.htmlTitle, target: this.target },
+      h("slot", { name: "icon" }, this.icon && this.renderIcon()),
+      this.orientation === "horizontal" && this.label));
+  }
+  static get is() { return "z-navigation-tab-link"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["../navigation-tab.css", "styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["../navigation-tab.css", "styles.css"]
+  }; }
+  static get properties() { return {
+    "selected": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Whether the tab is selected."
+      },
+      "attribute": "selected",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Whether the tab is disabled."
+      },
+      "attribute": "disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "orientation": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "NavigationTabsOrientation",
+        "resolved": "\"horizontal\" | \"vertical\"",
+        "references": {
+          "NavigationTabsOrientation": {
+            "location": "import",
+            "path": "../../../../beans"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Tab orientation. Do not set this manually: `z-navigation-tabs` will handle this."
+      },
+      "attribute": "orientation",
+      "reflect": true,
+      "defaultValue": "NavigationTabsOrientations.horizontal"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "NavigationTabsSize",
+        "resolved": "\"big\" | \"small\"",
+        "references": {
+          "NavigationTabsSize": {
+            "location": "import",
+            "path": "../../../../beans"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Tab size. Do not set this manually: `z-navigation-tabs` will handle this."
+      },
+      "attribute": "size",
+      "reflect": true,
+      "defaultValue": "NavigationTabsSizes.big"
+    },
+    "htmlTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Html title attribute for the anchor element."
+      },
+      "attribute": "html-title",
+      "reflect": false
+    },
+    "target": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Html `target` attribute for the anchor element."
+      },
+      "attribute": "target",
+      "reflect": false
+    },
+    "href": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Url to set to the anchor element."
+      },
+      "attribute": "href",
+      "reflect": false
+    },
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Name of the icon to use. Use the slot `icon` for extra customization.\nThe `filled` version will be automatically used (if found) when the tab is `selected`."
+      },
+      "attribute": "icon",
+      "reflect": false
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Label to show in the tab."
+      },
+      "attribute": "label",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "emitSelected",
+      "name": "selected",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "selected",
+      "methodName": "onSelected"
+    }]; }
+  static get listeners() { return [{
+      "name": "focus",
+      "method": "onFocus",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "click",
+      "method": "onClick",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}