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

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

@@ -1,264 +0,0 @@
-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

@@ -1,200 +0,0 @@
-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

@@ -1,104 +0,0 @@
-: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);
-}