@zanichelli/albe-web-components 2.44.1 → 2.46.1

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

@@ -0,0 +1,207 @@
+import { Component, Prop, h, Listen, Element, State, Watch, Host } from '@stencil/core';
+import { NavigationTabsSizes, NavigationTabsOrientations } 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 = NavigationTabsOrientations.horizontal;
+    /**
+     * Navigation tabs size.
+     */
+    this.size = NavigationTabsSizes.big;
+  }
+  /**
+   * Getter for the direction to check based on current orientation.
+   */
+  get direction() {
+    return this.orientation == NavigationTabsOrientations.horizontal ? 'Left' : 'Top';
+  }
+  /**
+   * Getter for the dimension to check based on current orientation.
+   */
+  get dimension() {
+    return this.orientation == NavigationTabsOrientations.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.
+   * @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() {
+    const safeScrollAreaSize = parseFloat(getComputedStyle(this.host).getPropertyValue('--safe-scroll-area'));
+    this.tabsNav.scrollBy({
+      [this.direction.toLowerCase()]: 0 -
+        (this.tabsNav[`client${this.dimension}`] / 2) -
+        safeScrollAreaSize,
+      behavior: 'smooth',
+    });
+  }
+  /**
+   * Scroll the navigation bar half of its size forward.
+   */
+  navigateForward() {
+    const safeScrollAreaSize = parseFloat(getComputedStyle(this.host).getPropertyValue('--safe-scroll-area'));
+    this.tabsNav.scrollBy({
+      [this.direction.toLowerCase()]: this.tabsNav[`scroll${this.direction}`] +
+        (this.tabsNav[`client${this.dimension}`] / 2) +
+        safeScrollAreaSize,
+      behavior: 'smooth',
+    });
+  }
+  componentDidRender() {
+    this.setChildrenSize();
+    this.setChildrenOrientation();
+    this.checkScrollVisible();
+  }
+  render() {
+    return h(Host, { class: {
+        'interactive-2': this.size === NavigationTabsSizes.small,
+        'interactive-1': this.size !== NavigationTabsSizes.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 == NavigationTabsOrientations.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 == NavigationTabsOrientations.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": "\"horizontal\" | \"vertical\"",
+        "references": {
+          "NavigationTabsOrientation": {
+            "location": "import",
+            "path": "../../../../beans"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Navigation tabs orientation."
+      },
+      "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": true,
+      "docs": {
+        "tags": [],
+        "text": "Navigation tabs size."
+      },
+      "attribute": "size",
+      "reflect": true,
+      "defaultValue": "NavigationTabsSizes.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/{z-navigation-tabs → tabs/z-navigation-tabs}/styles.css

@@ -23,7 +23,7 @@
   display: none;
 }
 
-button.navigation {
+.navigation-button {
   position: absolute;
   display: flex;
   align-items: center;
@@ -39,12 +39,12 @@ button.navigation {
   z-index: 1;
 }
 
-button.navigation:focus {
+.navigation-button:focus {
   fill: var(--color-primary01);
   box-shadow: var(--shadow-focus-primary);
 }
 
-button.navigation:disabled {
+.navigation-button:disabled {
   display: none;
 }
 
@@ -65,19 +65,19 @@ nav {
   width: 100%;
 }
 
-:host([orientation='horizontal']) button.navigation {
+:host([orientation='horizontal']) .navigation-button {
   top: 0;
   height: 100%;
   width: calc((var(--space-unit) * 4) + var(--safe-scroll-area));
 }
 
-:host([orientation='horizontal']) button.navigation:first-child {
+:host([orientation='horizontal']) .navigation-button:first-child {
   left: 0;
   padding-left: var(--safe-scroll-area);
   box-shadow: 5px 0px var(--safe-scroll-area) var(--negative-safe-scroll-area) rgba(66, 69, 72, 0.40);
 }
 
-:host([orientation='horizontal']) button.navigation:last-child {
+:host([orientation='horizontal']) .navigation-button:last-child {
   right: 0;
   padding-right: 4px;
   box-shadow: -5px 0px var(--safe-scroll-area) var(--negative-safe-scroll-area) rgba(66, 69, 72, 0.40);
@@ -86,6 +86,7 @@ nav {
 /* Orientation vertical */
 :host([orientation='vertical']) {
   flex-direction: column;
+  width: fit-content;
 }
 
 :host([orientation='vertical']) nav {
@@ -94,24 +95,24 @@ nav {
   height: 100%;
 }
 
-:host([orientation='vertical']) button.navigation {
+:host([orientation='vertical']) .navigation-button {
   left: 0;
   width: 100%;
   height: calc((var(--space-unit) * 4) + var(--safe-scroll-area));
 }
 
-:host([orientation='vertical']) button.navigation:first-child {
+:host([orientation='vertical']) .navigation-button:first-child {
   top: 0;
   padding-top: var(--safe-scroll-area);
   box-shadow: 0px 5px var(--safe-scroll-area) var(--negative-safe-scroll-area) rgba(66, 69, 72, 0.40);
 }
 
-:host([orientation='vertical']) button.navigation:last-child {
+:host([orientation='vertical']) .navigation-button:last-child {
   bottom: 0;
   padding-bottom: var(--safe-scroll-area);
   box-shadow: 0px -5px var(--safe-scroll-area) var(--negative-safe-scroll-area) rgba(66, 69, 72, 0.40);
 }
 
-:host([size='small'][orientation='vertical']) button.navigation {
+:host([size='small'][orientation='vertical']) .navigation-button {
   height: calc(var(--space-unit) * 4);
 }

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

@@ -1,11 +1,21 @@
-import { Component, h } from "@stencil/core";
+import { Component, h, Prop } from "@stencil/core";
 /**
  * ZCarousel component.
  * @cssprop --z-carousel-gutter - The gutter between items.
  * @slot - carousel items. use `<li>` elements inside this slot as it is wrapped inside an `<ul>`
  */
 export class ZCarousel {
+  constructor() {
+    /** sets the height of z-carousel ghost loading, this prop is mandatory when isloading is set to true, as otherwise the component won't show. */
+    this.ghostloadingheight = "100";
+  }
   render() {
+    if (this.isloading) {
+      return (h("div", { style: { height: `${this.ghostloadingheight}px` } },
+        h("z-ghost-loading", null),
+        h("div", { style: { display: "none" } },
+          h("slot", null))));
+    }
     return (h("ul", { class: "z-carousel-items-container" },
       h("slot", null)));
   }
@@ -16,4 +26,41 @@ export class ZCarousel {
   static get styleUrls() { return {
     "$": ["styles.css"]
   }; }
+  static get properties() { return {
+    "isloading": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "sets whether the z-carousel is on loading state"
+      },
+      "attribute": "isloading",
+      "reflect": false
+    },
+    "ghostloadingheight": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "sets the height of z-carousel ghost loading, this prop is mandatory when isloading is set to true, as otherwise the component won't show."
+      },
+      "attribute": "ghostloadingheight",
+      "reflect": false,
+      "defaultValue": "\"100\""
+    }
+  }; }
 }

package/dist/collection/components/z-date-picker/index.js

@@ -0,0 +1,143 @@
+import { Component, Prop, Element, h, Event, State, } from "@stencil/core";
+import flatpickr from "flatpickr";
+import { Italian } from "flatpickr/dist/l10n/it.js";
+import monthSelectPlugin from "flatpickr/dist/plugins/monthSelect";
+import classNames from "classnames";
+import { ZDatePickerMode, ZDatePickerModeValues, ZDatePickerPosition, } from "../../beans";
+export class ZDatePicker {
+  constructor() {
+    /** [Optional] datepicker mode: date, datetime, only months */
+    this.mode = ZDatePickerMode.date;
+    this.flatpickrPosition = ZDatePickerPosition.bottom;
+  }
+  emitDateSelect(date) {
+    this.dateSelect.emit(date);
+  }
+  componentWillLoad() {
+    let customToggle = this.element.querySelector("[slot=toggle]");
+    this.hasChildren = !!customToggle;
+    this.hasChildren && customToggle.setAttribute("data-toggle", "data-toggle");
+  }
+  componentDidLoad() {
+    flatpickr(`.${this.datepickerid}`, {
+      appendTo: this.element.children[0],
+      enableTime: this.mode === ZDatePickerMode.dateTime,
+      locale: Italian,
+      dateFormat: this.mode === ZDatePickerMode.dateTime ? "d-m-Y - H:i" : "d-m-Y",
+      ariaDateFormat: this.mode === ZDatePickerMode.months ? "F Y" : "d F Y",
+      minuteIncrement: 1,
+      time_24hr: true,
+      onChange: (_selectedDates, dateStr) => {
+        this.emitDateSelect(dateStr);
+      },
+      wrap: this.hasChildren,
+      plugins: this.mode === ZDatePickerMode.months && [
+        monthSelectPlugin({
+          dateFormat: "m-Y",
+          altFormat: "m-Y",
+        }),
+      ],
+    });
+    this.element.querySelectorAll(".flatpickr-weekday").forEach((element) => {
+      element.innerHTML = element.innerHTML.trim().charAt(0);
+    });
+  }
+  setFlatpickrPosition() {
+    const toggleHeight = this.element.children[0].clientHeight;
+    this.element.style.setProperty("--toggle-height", `${toggleHeight}px`);
+    const flatpickrHeight = this.mode === ZDatePickerMode.dateTime
+      ? ZDatePickerModeValues.DATETIME
+      : this.mode === ZDatePickerMode.months
+        ? ZDatePickerModeValues.MONTHS
+        : ZDatePickerModeValues.DATE;
+    const bottom = this.element.getBoundingClientRect().bottom;
+    const overflowBottom = bottom + flatpickrHeight > window.innerHeight;
+    const overflowTop = bottom - flatpickrHeight - toggleHeight < 0;
+    if (!overflowTop && overflowBottom) {
+      this.flatpickrPosition = ZDatePickerPosition.top;
+    }
+    else {
+      this.flatpickrPosition = ZDatePickerPosition.bottom;
+    }
+  }
+  renderSlottedContent() {
+    return (h("div", null,
+      h("input", { class: "hidden-input", "data-input": true }),
+      h("slot", { name: "toggle" })));
+  }
+  renderZInput() {
+    return (h("z-input", { class: classNames(this.datepickerid), type: "text", name: "datepicker", icon: "event", hasmessage: false }));
+  }
+  render() {
+    return (h("div", { class: classNames("flatpickr-toggle-container", this.hasChildren && this.datepickerid, this.flatpickrPosition, this.mode), onClick: () => this.setFlatpickrPosition() }, this.hasChildren ? this.renderSlottedContent() : this.renderZInput()));
+  }
+  static get is() { return "z-date-picker"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "datepickerid": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "unique id"
+      },
+      "attribute": "datepickerid",
+      "reflect": false
+    },
+    "mode": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "ZDatePickerMode",
+        "resolved": "ZDatePickerMode.date | ZDatePickerMode.dateTime | ZDatePickerMode.months",
+        "references": {
+          "ZDatePickerMode": {
+            "location": "import",
+            "path": "../../beans"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "[Optional] datepicker mode: date, datetime, only months"
+      },
+      "attribute": "mode",
+      "reflect": false,
+      "defaultValue": "ZDatePickerMode.date"
+    }
+  }; }
+  static get states() { return {
+    "flatpickrPosition": {}
+  }; }
+  static get events() { return [{
+      "method": "dateSelect",
+      "name": "dateSelect",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "emitted when date changes, returns selected date"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "element"; }
+}