@zanichelli/albe-web-components 6.6.10-test → 6.7.0

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

@@ -0,0 +1,264 @@
+import { h } from "@stencil/core";
+import { NavigationTabsOrientation, NavigationTabsSize } from "../../../../beans";
+import { ICONS } from "../../../icons/icons";
+/**
+ * Single tab component to use inside `z-navigation-tabs`. It renders an anchor element.
+ */
+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 = NavigationTabsOrientation.HORIZONTAL;
+    /**
+     * Tab size. Do not set this manually: `z-navigation-tabs` will handle this.
+     */
+    this.size = NavigationTabsSize.BIG;
+  }
+  /**
+   * Scroll into view to center the tab.
+   */
+  scrollToTab({ target: button }) {
+    const scrollOptions = this.orientation === NavigationTabsOrientation.HORIZONTAL
+      ? { block: "nearest", inline: "center" }
+      : { block: "center", inline: "nearest" };
+    button.scrollIntoView(Object.assign({ behavior: "smooth" }, scrollOptions));
+  }
+  onClick() {
+    this.selected = true;
+  }
+  onSelected() {
+    if (this.selected) {
+      this.selectedEvent.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, onFocus: this.scrollToTab.bind(this) }, this.icon && this.renderIcon(), this.orientation === "horizontal" && this.label));
+  }
+  static get is() { return "z-navigation-tab-link"; }
+  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": "NavigationTabsOrientation.HORIZONTAL | NavigationTabsOrientation.VERTICAL",
+          "references": {}
+        },
+        "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": "NavigationTabsOrientation.HORIZONTAL"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "NavigationTabsSize",
+          "resolved": "NavigationTabsSize.BIG | NavigationTabsSize.SMALL",
+          "references": {}
+        },
+        "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": "NavigationTabsSize.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.\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": "selectedEvent",
+        "name": "selected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "The tab has been selected."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get watchers() {
+    return [{
+        "propName": "selected",
+        "methodName": "onSelected"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "onClick",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

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

@@ -0,0 +1,200 @@
+import { h, Host } from "@stencil/core";
+import { NavigationTabsSize, NavigationTabsOrientation } from "../../../../beans";
+/**
+ * Navigation tabs component.
+ * @slot - Main slot. Use `z-navigation-tab` or `z-navigation-tab-link` components as children.
+ */
+export class ZNavigationTabs {
+  constructor() {
+    /**
+     * Navigation tabs orientation.
+     */
+    this.orientation = NavigationTabsOrientation.HORIZONTAL;
+    /**
+     * Navigation tabs size.
+     */
+    this.size = NavigationTabsSize.BIG;
+  }
+  /**
+   * Getter for the direction to check based on current orientation.
+   */
+  get direction() {
+    return this.orientation == NavigationTabsOrientation.HORIZONTAL ? "Left" : "Top";
+  }
+  /**
+   * Getter for the dimension to check based on current orientation.
+   */
+  get dimension() {
+    return this.orientation == NavigationTabsOrientation.HORIZONTAL ? "Width" : "Height";
+  }
+  /**
+   * Set the `size` prop to all `z-navigation-tab` children.
+   */
+  setChildrenSize() {
+    const children = Array.from(this.host.children);
+    children.forEach((child) => {
+      child.setAttribute("size", this.size);
+    });
+  }
+  /**
+   * Set the `orientation` prop to all `z-navigation-tab` children.
+   */
+  setChildrenOrientation() {
+    const children = Array.from(this.host.children);
+    children.forEach((child) => {
+      child.setAttribute("orientation", this.orientation);
+    });
+  }
+  /**
+   * Check if the navigation buttons are needed on window resize.
+   */
+  checkScrollVisible() {
+    if (!this.tabsNav) {
+      return;
+    }
+    this.canNavigate = this.tabsNav[`scroll${this.dimension}`] > this.tabsNav[`client${this.dimension}`];
+  }
+  /**
+   * Check if navigation buttons can be enabled for each direction.
+   */
+  checkScrollEnabled() {
+    if (!this.tabsNav) {
+      return;
+    }
+    this.canNavigateNext =
+      this.tabsNav[`scroll${this.direction}`] + this.tabsNav[`client${this.dimension}`] <
+        this.tabsNav[`scroll${this.dimension}`];
+    this.canNavigatePrev = this.tabsNav[`scroll${this.direction}`] > 0;
+  }
+  /**
+   * Listen for child tab selection.
+   * Deselect all other previously selected tabs,
+   * then scroll to the new selected tab and center it.
+   * @param {CustomEvent} event `selected` event triggered by a child tab
+   */
+  onTabSelected(event) {
+    const tab = event.target;
+    const children = Array.from(this.host.children);
+    children.forEach((child) => {
+      if (child !== tab) {
+        child.removeAttribute("selected");
+      }
+    });
+  }
+  /**
+   * Scroll the navigation bar half of its size backward.
+   */
+  navigateBackwards() {
+    this.tabsNav.scrollBy({
+      [this.direction.toLowerCase()]: 0 - this.tabsNav[`client${this.dimension}`] / 2,
+      behavior: "smooth",
+    });
+  }
+  /**
+   * Scroll the navigation bar half of its size forward.
+   */
+  navigateForward() {
+    this.tabsNav.scrollBy({
+      [this.direction.toLowerCase()]: this.tabsNav[`scroll${this.direction}`] + this.tabsNav[`client${this.dimension}`] / 2,
+      behavior: "smooth",
+    });
+  }
+  componentDidRender() {
+    this.setChildrenSize();
+    this.setChildrenOrientation();
+    this.checkScrollVisible();
+  }
+  render() {
+    return (h(Host, { class: {
+        "interactive-2": this.size === NavigationTabsSize.SMALL,
+        "interactive-1": this.size !== NavigationTabsSize.SMALL,
+      }, scrollable: this.canNavigate }, this.canNavigate && (h("button", { class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabindex: "-1", disabled: !this.canNavigatePrev }, h("z-icon", { name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 }))), h("nav", { role: "tablist", ref: (el) => (this.tabsNav = el !== null && el !== void 0 ? el : this.tabsNav), onScroll: this.checkScrollEnabled.bind(this) }, h("slot", null)), this.canNavigate && (h("button", { class: "navigation-button", onClick: this.navigateForward.bind(this), tabindex: "-1", disabled: !this.canNavigateNext }, h("z-icon", { name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 })))));
+  }
+  static get is() { return "z-navigation-tabs"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "orientation": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "NavigationTabsOrientation",
+          "resolved": "NavigationTabsOrientation.HORIZONTAL | NavigationTabsOrientation.VERTICAL",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Navigation tabs orientation."
+        },
+        "attribute": "orientation",
+        "reflect": true,
+        "defaultValue": "NavigationTabsOrientation.HORIZONTAL"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "NavigationTabsSize",
+          "resolved": "NavigationTabsSize.BIG | NavigationTabsSize.SMALL",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Navigation tabs size."
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "NavigationTabsSize.BIG"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "canNavigate": {},
+      "canNavigatePrev": {},
+      "canNavigateNext": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "size",
+        "methodName": "setChildrenSize"
+      }, {
+        "propName": "orientation",
+        "methodName": "setChildrenOrientation"
+      }, {
+        "propName": "canNavigate",
+        "methodName": "checkScrollEnabled"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "checkScrollVisible",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "selected",
+        "method": "onTabSelected",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/navigation/tabs/z-navigation-tabs/styles.css

@@ -0,0 +1,104 @@
+:host {
+  position: relative;
+  z-index: 0;
+  display: flex;
+  overflow: hidden;
+  flex-direction: row;
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+}
+
+:host,
+:host *,
+::slotted(*) {
+  box-sizing: border-box;
+}
+
+::-webkit-scrollbar {
+  display: none;
+}
+
+.navigation-button {
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  margin: 0;
+  background: var(--color-white);
+  border-radius: var(--border-no-radius);
+  box-shadow: 0 0 4px 1px rgb(66 69 72 / 40%);
+  cursor: pointer;
+  fill: var(--color-primary01);
+  outline: none;
+}
+
+.navigation-button:focus:focus-visible {
+  box-shadow: inset var(--shadow-focus-primary);
+  fill: var(--color-primary01);
+}
+
+.navigation-button:disabled {
+  display: none;
+}
+
+nav {
+  display: flex;
+  overflow: auto;
+  align-items: center;
+  justify-content: flex-start;
+  scroll-behavior: smooth;
+
+  /* hide scrollbar in Firefox */
+  scrollbar-width: none;
+}
+
+:host([orientation="horizontal"]) nav {
+  width: 100%;
+}
+
+:host([orientation="horizontal"]) .navigation-button {
+  top: 0;
+  width: calc(var(--space-unit) * 4);
+  height: 100%;
+}
+
+:host([orientation="horizontal"]) .navigation-button:first-child {
+  left: 0;
+}
+
+:host([orientation="horizontal"]) .navigation-button:last-child {
+  right: 0;
+}
+
+/* Orientation vertical */
+:host([orientation="vertical"]) {
+  width: fit-content;
+  flex-direction: column;
+}
+
+:host([orientation="vertical"]) nav {
+  height: 100%;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+:host([orientation="vertical"]) .navigation-button {
+  left: 0;
+  width: 100%;
+  height: calc(var(--space-unit) * 4);
+}
+
+:host([orientation="vertical"]) .navigation-button:first-child {
+  top: 0;
+}
+
+:host([orientation="vertical"]) .navigation-button:last-child {
+  bottom: 0;
+}
+
+:host([size="small"][orientation="vertical"]) .navigation-button {
+  height: calc(var(--space-unit) * 4);
+}