@zanichelli/albe-web-components 2.33.1 → 2.33.3

package/dist/collection/components/navigation/z-menu-section/index.js

@@ -0,0 +1,109 @@
+import { Component, h, Prop, State, Event, Element, Listen, Host } from '@stencil/core';
+/**
+ * @slot - Menu section label
+ * @slot item - Single entry of the section. Can be slotted multiple times to insert items.
+ */
+export class ZMenuSection {
+  toggle() {
+    if (!this.hasContent) {
+      return;
+    }
+    this.open = !this.open;
+    this.open ? this.opened.emit() : this.closed.emit();
+  }
+  /** Close the list when a click is performed outside of this Element. */
+  handleClick(ev) {
+    if (!this.open || this.hostElement.contains(ev.target)) {
+      return;
+    }
+    this.open = false;
+    this.closed.emit();
+  }
+  /**
+   * Check if some content slot is set.
+   */
+  checkContent() {
+    this.hasContent = !!this.hostElement.querySelectorAll('[slot="item"]').length;
+  }
+  componentWillLoad() {
+    this.checkContent();
+  }
+  render() {
+    return h(Host, { role: "menu", open: this.open },
+      h("button", { class: "label", "aria-pressed": this.open ? 'true' : 'false', onClick: this.toggle.bind(this) },
+        h("slot", null),
+        this.hasContent && h("z-icon", { name: this.open ? 'chevron-up' : 'chevron-down' })),
+      this.open && h("div", { class: "items" },
+        h("slot", { name: "item", onSlotchange: this.checkContent.bind(this) })));
+  }
+  static get is() { return "z-menu-section"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "active": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "active",
+      "reflect": true
+    }
+  }; }
+  static get states() { return {
+    "open": {},
+    "hasContent": {}
+  }; }
+  static get events() { return [{
+      "method": "opened",
+      "name": "opened",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "The section has been opened."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "closed",
+      "name": "closed",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "The section has been closed."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "hostElement"; }
+  static get listeners() { return [{
+      "name": "click",
+      "method": "handleClick",
+      "target": "document",
+      "capture": false,
+      "passive": false
+    }]; }
+}

package/dist/collection/components/navigation/z-menu-section/styles.css

@@ -0,0 +1,91 @@
+:host {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 0;
+  font-family: var(--font-family-sans);
+}
+
+:host,
+::slotted(*),
+* {
+  box-sizing: border-box;
+}
+
+::slotted(a) {
+  text-decoration: none;
+}
+
+::slotted(*) {
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+  color: var(--color-text01);
+}
+
+:host([active]) .label,
+:host([open]) .label,
+.label:hover {
+  border-color: var(--color-secondary01);
+}
+
+.label {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin: 0;
+  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);
+  text-align: left;
+  background: transparent;
+  border-radius: 0;
+  border: 0;
+  border-bottom: var(--border-size-small) solid var(--color-surface05);
+  cursor: pointer;
+}
+
+.label ::slotted(*) {
+  width: 100%;
+  margin: 0;
+  font-size: var(--font-size-3);
+  line-height: 1.25;
+}
+
+.label:focus:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-focus-primary);
+}
+
+.label z-icon {
+  margin-left: calc(var(--space-unit) * 4);
+  fill: currentColor;
+}
+
+.items {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: calc(var(--space-unit) * 0.5);
+  padding-bottom: calc(var(--space-unit) * 2);
+}
+
+.items > ::slotted([slot='item']) {
+  display: inline-flex;
+  margin: 0;
+  padding: calc(var(--space-unit) * 0.5);
+  font-size: var(--font-size-2);
+  line-height: 1.4;
+  outline: none;
+}
+
+.items > ::slotted([slot='item']:last-child) {
+  padding-bottom: 0;
+}
+
+.items > ::slotted([slot='item']:focus:focus-visible) {
+  box-shadow: var(--shadow-focus-primary);
+  color: var(--color-secondary01);
+}
+
+.items > ::slotted([slot='item']:hover) {
+  color: var(--color-secondary01);
+}

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

@@ -0,0 +1,151 @@
+import { Component, Prop, h, Element, Listen, Event, Watch } from "@stencil/core";
+/**
+ * @slot icon - tab icon
+ * @slot label - tab label
+ */
+export class ZNavigationTab {
+  constructor() {
+    this.selected = false;
+    this.disabled = false;
+    this.orientation = 'horizontal';
+    this.size = '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() {
+    return (h("button", { disabled: this.disabled, role: "tab" },
+      h("slot", { name: "icon" }),
+      this.orientation === "horizontal" && h("slot", { name: "label" })));
+  }
+  static get is() { return "z-navigation-tab"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "selected": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "selected",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "orientation": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "orientation",
+      "reflect": true,
+      "defaultValue": "'horizontal'"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "size",
+      "reflect": true,
+      "defaultValue": "'big'"
+    }
+  }; }
+  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/z-navigation-tab/styles.css

@@ -0,0 +1,113 @@
+button {
+  position: relative;
+  z-index: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  margin: 0;
+  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);
+  background-color: unset;
+  text-align: center;
+  font-size: inherit;
+  font-family: var(--font-family-sans);
+  line-height: inherit;
+  letter-spacing: inherit;
+  white-space: nowrap;
+  color: var(--color-primary01);
+  fill: currentColor;
+  border: none;
+  border-radius: var(--border-no-radius);
+  outline: none;
+  cursor: pointer;
+}
+
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:host(:hover:not([disabled])) button,
+:host([selected]) button {
+  color: var(--color-hover-secondary);
+  fill: currentColor;
+}
+
+:host(:hover:not([disabled])) button::after,
+:host([selected]) button::after {
+  content: '';
+  position: absolute;
+  background-color: var(--color-hover-secondary);
+}
+
+:host([orientation='horizontal']:not([disabled]):hover) button::after,
+:host([orientation='horizontal'][selected]) button::after {
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: var(--border-size-large);
+}
+
+:host([orientation='horizontal']) ::slotted(z-icon) {
+  margin-right: var(--space-unit);
+}
+
+:host(:hover:not([disabled])) button {
+  background-color: var(--color-background);
+}
+
+button:focus:focus-visible {
+  box-shadow: var(--shadow-focus-primary);
+}
+
+:host([disabled]) button {
+  pointer-events: all;
+  cursor: not-allowed;
+  color: var(--gray500);
+  fill: currentColor;
+}
+
+/* Size small (only available for horizontal) */
+:host([size='small']) button {
+  font-size: var(--font-size-2);
+  line-height: 1.4;
+  letter-spacing: 0.16px;
+}
+
+:host([size='small'][orientation='horizontal']) button {
+  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 {
+  height: var(--border-size-medium);
+}
+
+:host([size='small']:not([orientation='vertical'])) ::slotted(z-icon) {
+  --z-icon-width: 14px;
+  --z-icon-height: 14px;
+}
+
+/* Orientation Vertical */
+:host([orientation='vertical']) button {
+  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 {
+  width: var(--border-size-large);
+  height: 100%;
+  top: 0;
+  right: 0;
+}
+
+:host([orientation='vertical']) ::slotted([slot='label']) {
+  display: none;
+}
+
+::slotted(z-icon) {
+  --z-icon-width: calc(var(--space-unit) * 2);
+  --z-icon-height: calc(var(--space-unit) * 2);
+  margin: 0;
+}
+

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

@@ -0,0 +1,179 @@
+import { Component, Prop, h, Listen, Element, State, Watch, Host } from '@stencil/core';
+import { TabSizeEnum, TabOrientationEnum } from '../../../beans';
+export class ZNavigationTabs {
+  constructor() {
+    /** Available orientation: `horizontal` and `vertical`. Defaults to `horizontal`. */
+    this.orientation = TabOrientationEnum.horizontal;
+    /** Available sizes: `big` and `small`. Defaults to `big`. */
+    this.size = TabSizeEnum.big;
+    this.direction = this.orientation == TabOrientationEnum.vertical ? 'Top' : 'Left';
+    this.dimension = this.orientation == TabOrientationEnum.vertical ? 'Height' : 'Width';
+  }
+  /** Set all childrens (tab) size attribute : big (default) or small */
+  setChildrenSize() {
+    const children = this.host.children;
+    for (let i = 0; i < children.length; i++) {
+      children[i].setAttribute('size', this.size);
+    }
+  }
+  /** Set all childrens (tab) orientation attribute : horizontal (default) or vertical */
+  setChildrenOrientation() {
+    const children = this.host.children;
+    for (let i = 0; i < children.length; i++) {
+      children[i].setAttribute('orientation', this.orientation);
+    }
+  }
+  /** When resize check if the navigation buttons are needed */
+  checkScrollVisible() {
+    if (!this.tabsNav) {
+      return;
+    }
+    this.canNavigate = this.tabsNav[`scroll${this.dimension}`] > this.tabsNav[`client${this.dimension}`];
+    this.checkScrollEnabled();
+  }
+  /** Check if navigation buttons can be enabled for each orientation */
+  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;
+  }
+  selectedTabHandler(event) {
+    this.select(event.target);
+  }
+  /** Select a tab child and deselect the others */
+  select(tab) {
+    const children = this.host.children;
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i];
+      if (child.tagName === 'Z-NAVIGATION-TAB') {
+        if (child !== tab) {
+          child.selected = false;
+        }
+      }
+    }
+  }
+  /** Scroll the navigation bar (half of its size) backward, based on orientation */
+  navigatePrevious() {
+    this.tabsNav.scrollBy({
+      [this.direction.toLowerCase()]: 0 - (this.tabsNav[`client${this.dimension}`] / 2),
+      behavior: 'smooth',
+    });
+  }
+  /** Scroll the navigation bar (half of its size) forward, based on orientation */
+  navigateNext() {
+    this.tabsNav.scrollBy({
+      [this.direction.toLowerCase()]: this.tabsNav.scrollTop + (this.tabsNav[`client${this.dimension}`] / 2),
+      behavior: 'smooth',
+    });
+  }
+  componentDidLoad() {
+    this.setChildrenSize();
+    this.setChildrenOrientation();
+    this.checkScrollVisible();
+  }
+  render() {
+    return h(Host, { class: {
+        'interactive-2': this.size === 'small',
+        'interactive-1': this.size !== 'small'
+      }, scrollable: this.canNavigate },
+      this.canNavigate && h("button", { class: "navigation", onClick: () => this.navigatePrevious(), tabindex: "-1", disabled: !this.canNavigatePrev },
+        h("z-icon", { name: this.orientation == '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", onClick: () => { this.navigateNext(); }, tabindex: "-1", disabled: !this.canNavigateNext },
+        h("z-icon", { name: this.orientation == '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": "TabOrientationBean",
+        "resolved": "TabOrientationEnum.horizontal | TabOrientationEnum.vertical",
+        "references": {
+          "TabOrientationBean": {
+            "location": "import",
+            "path": "../../../beans"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Available orientation: `horizontal` and `vertical`. Defaults to `horizontal`."
+      },
+      "attribute": "orientation",
+      "reflect": true,
+      "defaultValue": "TabOrientationEnum.horizontal"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "TabSizeBean",
+        "resolved": "TabSizeEnum.big | TabSizeEnum.small",
+        "references": {
+          "TabSizeBean": {
+            "location": "import",
+            "path": "../../../beans"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Available sizes: `big` and `small`. Defaults to `big`."
+      },
+      "attribute": "size",
+      "reflect": true,
+      "defaultValue": "TabSizeEnum.big"
+    }
+  }; }
+  static get states() { return {
+    "canNavigate": {},
+    "canNavigatePrev": {},
+    "canNavigateNext": {},
+    "direction": {},
+    "dimension": {}
+  }; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "size",
+      "methodName": "setChildrenSize"
+    }, {
+      "propName": "orientation",
+      "methodName": "setChildrenOrientation"
+    }, {
+      "propName": "direction",
+      "methodName": "checkScrollEnabled"
+    }, {
+      "propName": "dimension",
+      "methodName": "checkScrollEnabled"
+    }]; }
+  static get listeners() { return [{
+      "name": "resize",
+      "method": "checkScrollVisible",
+      "target": "window",
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "selected",
+      "method": "selectedTabHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}