@zanichelli/albe-web-components 2.33.1 → 2.33.3

package/dist/{web-components-library/z-tooltip.entry.js → collection/components/notification/z-tooltip/index.js}

@@ -1,8 +1,5 @@
-import { r as registerInstance, f as createEvent, h, e as Host, g as getElement } from './index-44936066.js';
-import { f as TooltipPosition } from './index-8f67b3da.js';
-
-const stylesCss = ":host{--z-tooltip-theme--surface:var(--color-surface01);--z-tooltip-theme--text:var(--color-text01);--arrow-size:6px;--edge-offset:calc(-1 * (var(--arrow-size) + calc(var(--space-unit) * 2)));position:relative;display:none;align-items:center;justify-content:center;padding:var(--space-unit);min-width:calc(var(--space-unit) * 8);min-height:calc(var(--space-unit) * 4);color:var(--z-tooltip-theme--text);fill:currentColor;font-family:var(--font-family-sans);text-align:center;border-radius:var(--border-radius-small);background:var(--z-tooltip-theme--surface);filter:drop-shadow(0 4px 8px var(--shadow-color-base));will-change:filter}:host(.legacy){display:inline-flex;padding:calc(var(--space-unit) * 2);min-width:auto;min-height:auto;max-width:200px;font-style:italic;line-height:16px;letter-spacing:0.32px;font-size:12px;border:var(--border-size-small) solid var(--gray200);border-radius:var(--border-radius);filter:drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.08))}:host(.legacy)::before{--arrow-size:14px}:host([position])::before{--arrow-edge-offset:calc(100% - var(--arrow-size) - var(--space-unit));--arrow-center-x-offset:calc(50% - calc(var(--arrow-size) / 2));--arrow-center-y-offset:calc(100% - calc(var(--arrow-size) / 2));content:'';position:absolute;width:var(--arrow-size);height:var(--arrow-size);background:inherit;transform:rotate(45deg)}:host([open][style*='top:']),:host([open][style*='inset:']){display:inline-flex}:host([position^='top']){margin-bottom:var(--space-unit)}:host([position='right']){margin-left:var(--space-unit)}:host([position='top_right']),:host([position='bottom_right']){margin-left:var(--edge-offset)}:host([position^='bottom']){margin-top:var(--space-unit)}:host([position='left']){margin-right:var(--space-unit)}:host([position='top_left']),:host([position='bottom_left']){margin-right:var(--edge-offset)}:host([position^='top'])::before{top:var(--arrow-center-y-offset)}:host([position^='bottom'])::before{bottom:var(--arrow-center-y-offset)}:host([position='top'])::before,:host([position='bottom'])::before{left:var(--arrow-center-x-offset)}:host([position='right'])::before,:host([position='left'])::before{top:var(--arrow-center-x-offset)}:host([position='right'])::before{right:var(--arrow-center-y-offset)}:host([position='top_right'])::before,:host([position='bottom_right'])::before{right:var(--arrow-edge-offset)}:host([position='left'])::before{left:var(--arrow-center-y-offset)}:host([position='top_left'])::before,:host([position='bottom_left'])::before{left:var(--arrow-edge-offset)}::slotted(*){flex:1 auto;overflow:auto}";
-
+import { Component, Prop, h, Host, Watch, Element, State, Event, } from "@stencil/core";
+import { TooltipPosition } from "../../../beans/index";
 const documentElement = document.documentElement;
 /**
  * Find the closest scrollable parent of a node.
@@ -80,10 +77,8 @@ function computeOffset(element, targetParentOffset) {
   const bottom = parentHeight - top - rect.height;
   return { top, right, bottom, left, width, height };
 }
-const ZTooltip = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.positionChange = createEvent(this, "positionChange", 7);
+export class ZTooltip {
+  constructor() {
     /** Tooltip position. */
     this.type = TooltipPosition.AUTO;
     /**
@@ -256,15 +251,129 @@ const ZTooltip = class {
     if (this.content) {
       return (h(Host, { class: "legacy", position: this.type }, this.content));
     }
-    return (h(Host, { position: this.position }, h("slot", null)));
+    return (h(Host, { position: this.position },
+      h("slot", null)));
   }
-  get host() { return getElement(this); }
-  static get watchers() { return {
-    "type": ["validateType"],
-    "position": ["onPositionChange"],
-    "open": ["onOpen"]
+  static get is() { return "z-tooltip"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
   }; }
-};
-ZTooltip.style = stylesCss;
-
-export { ZTooltip as z_tooltip };
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "content": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "deprecated"
+          }],
+        "text": "Content text."
+      },
+      "attribute": "content",
+      "reflect": false
+    },
+    "type": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "TooltipPosition",
+        "resolved": "TooltipPosition.AUTO | TooltipPosition.BOTTOM | TooltipPosition.BOTTOM_LEFT | TooltipPosition.BOTTOM_RIGHT | TooltipPosition.LEFT | TooltipPosition.RIGHT | TooltipPosition.TOP | TooltipPosition.TOP_LEFT | TooltipPosition.TOP_RIGHT",
+        "references": {
+          "TooltipPosition": {
+            "location": "import",
+            "path": "../../../beans/index"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Tooltip position."
+      },
+      "attribute": "type",
+      "reflect": false,
+      "defaultValue": "TooltipPosition.AUTO"
+    },
+    "open": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The open state of the tooltip."
+      },
+      "attribute": "open",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "bindTo": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | HTMLElement",
+        "resolved": "HTMLElement | string",
+        "references": {
+          "HTMLElement": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The selector or the element bound with the tooltip."
+      },
+      "attribute": "bind-to",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "position": {}
+  }; }
+  static get events() { return [{
+      "method": "positionChange",
+      "name": "positionChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Position change event."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "type",
+      "methodName": "validateType"
+    }, {
+      "propName": "position",
+      "methodName": "onPositionChange"
+    }, {
+      "propName": "open",
+      "methodName": "onOpen"
+    }]; }
+}

package/dist/collection/components/notification/z-tooltip/styles.css

@@ -0,0 +1,128 @@
+:host {
+  --z-tooltip-theme--surface: var(--color-surface01);
+  --z-tooltip-theme--text: var(--color-text01);
+  --arrow-size: 6px;
+  --edge-offset: calc(-1 * (var(--arrow-size) + calc(var(--space-unit) * 2)));
+
+  position: relative;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-unit);
+  min-width: calc(var(--space-unit) * 8);
+  min-height: calc(var(--space-unit) * 4);
+  color: var(--z-tooltip-theme--text);
+  fill: currentColor;
+  font-family: var(--font-family-sans);
+  text-align: center;
+  border-radius: var(--border-radius-small);
+  background: var(--z-tooltip-theme--surface);
+  filter: drop-shadow(0 4px 8px var(--shadow-color-base));
+  will-change: filter;
+}
+
+:host(.legacy) {
+  display: inline-flex;
+  padding: calc(var(--space-unit) * 2);
+  min-width: auto;
+  min-height: auto;
+  max-width: 200px;
+  font-style: italic;
+  line-height: 16px;
+  letter-spacing: 0.32px;
+  font-size: 12px;
+  border: var(--border-size-small) solid var(--gray200);
+  border-radius: var(--border-radius);
+  filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.08));
+}
+
+:host(.legacy)::before {
+  --arrow-size: 14px;
+}
+
+:host([position])::before {
+  --arrow-edge-offset: calc(100% - var(--arrow-size) - var(--space-unit));
+  --arrow-center-x-offset: calc(50% - calc(var(--arrow-size) / 2));
+  --arrow-center-y-offset: calc(100% - calc(var(--arrow-size) / 2));
+
+  content: '';
+  position: absolute;
+  width: var(--arrow-size);
+  height: var(--arrow-size);
+  background: inherit;
+  transform: rotate(45deg);
+}
+
+:host([open][style*='top:']),
+:host([open][style*='inset:']) {
+  display: inline-flex;
+}
+
+:host([position^='top']) {
+  margin-bottom: var(--space-unit);
+}
+
+:host([position='right']) {
+  margin-left: var(--space-unit);
+}
+
+:host([position='top_right']),
+:host([position='bottom_right']) {
+  margin-left: var(--edge-offset);
+}
+
+:host([position^='bottom']) {
+  margin-top: var(--space-unit);
+}
+
+:host([position='left']) {
+  margin-right: var(--space-unit);
+}
+
+:host([position='top_left']),
+:host([position='bottom_left']) {
+  margin-right: var(--edge-offset);
+}
+
+/* Arrow style */
+
+:host([position^='top'])::before {
+  top: var(--arrow-center-y-offset);
+}
+
+:host([position^='bottom'])::before {
+  bottom: var(--arrow-center-y-offset);
+}
+
+:host([position='top'])::before,
+:host([position='bottom'])::before {
+  left: var(--arrow-center-x-offset);
+}
+
+:host([position='right'])::before,
+:host([position='left'])::before {
+  top: var(--arrow-center-x-offset);
+}
+
+:host([position='right'])::before {
+  right: var(--arrow-center-y-offset);
+}
+
+:host([position='top_right'])::before,
+:host([position='bottom_right'])::before {
+  right: var(--arrow-edge-offset);
+}
+
+:host([position='left'])::before {
+  left: var(--arrow-center-y-offset);
+}
+
+:host([position='top_left'])::before,
+:host([position='bottom_left'])::before {
+  left: var(--arrow-edge-offset);
+}
+
+::slotted(*) {
+  flex: 1 auto;
+  overflow: auto;
+}

package/dist/collection/components/pagination/z-pagination-bar/index.js

@@ -0,0 +1,278 @@
+import { Component, Prop, h, State, Event } from "@stencil/core";
+import Hammer from "hammerjs";
+import { handleKeyboardSubmit } from "../../../utils/utils";
+export class ZPaginationBar {
+  constructor() {
+    /** current displayed page (mutable) */
+    this.currentpage = 1;
+    /** initial page (mutable) */
+    this.startpage = 1;
+    /** array of history of visited pages (mutable, optional) */
+    this.listhistoryrow = [];
+    this.currentPages = [];
+    this.velocityConstantMultiplier = 2;
+    this.navigateRight = this.navigateRight.bind(this);
+    this.navigateLeft = this.navigateLeft.bind(this);
+    this.emitGoToPage = this.emitGoToPage.bind(this);
+  }
+  componentDidLoad() {
+    this.scrollPage = this.scrollPage.bind(this);
+    let mc = new Hammer(this.bar);
+    // listen to events...
+    mc.on("swiperight", this.scrollPage);
+    mc.on("swipeleft", this.scrollPage);
+  }
+  componentWillRender() {
+    this.initPagination();
+  }
+  componentWillUpdate() {
+    this.initPagination();
+  }
+  initPagination() {
+    this.loadPages();
+    if (this.historyraw) {
+      this.parsehistoryraw(this.historyraw);
+    }
+  }
+  parsehistoryraw(historyraw) {
+    this.listhistoryrow = [...JSON.parse(historyraw)];
+  }
+  scrollPage(ev) {
+    let vel = Math.round(Math.abs(ev.velocity)) * this.velocityConstantMultiplier;
+    const deltaPage = Math.max(1, vel);
+    switch (ev.type) {
+      case "swiperight":
+        if (!this.canNavigateLeft())
+          break;
+        const newstartPage1 = this.startpage - deltaPage;
+        if (newstartPage1 > 1)
+          this.emitChangeStartPage(newstartPage1);
+        else
+          this.emitChangeStartPage(1);
+        break;
+      case "swipeleft":
+        if (!this.canNavigateRight())
+          break;
+        const newstartPage2 = this.startpage + deltaPage;
+        if (newstartPage2 < this.pages - this.visiblepages + 1)
+          this.emitChangeStartPage(newstartPage2);
+        else
+          this.emitChangeStartPage(this.pages - this.visiblepages + 1);
+        break;
+      default:
+        break;
+    }
+  }
+  emitGoToPage(page) {
+    this.currentpage = page;
+    this.goToPage.emit({ page: page });
+    this.addPageToHistory.emit({ page: page });
+  }
+  emitChangeStartPage(startpage) {
+    this.startpage = startpage;
+    this.changeStartPage.emit({ startpage: startpage });
+  }
+  emitAddPageToHistory(page) {
+    this.listhistoryrow.push(page);
+    this.changeStartPage.emit({ page: page });
+  }
+  loadPages() {
+    this.currentPages.splice(0);
+    const lastPage = this.pageWindow();
+    let i;
+    for (i = 0; i < lastPage; i++) {
+      this.currentPages.push(i + this.startpage);
+    }
+  }
+  pageWindow() {
+    return Math.min(this.pages, this.visiblepages); //How many pages are there to show?
+  }
+  canNavigateLeft() {
+    return this.startpage > 1;
+  }
+  canNavigateRight() {
+    return this.startpage + this.visiblepages - 1 < this.pages;
+  }
+  navigateLeft() {
+    if (this.canNavigateLeft()) {
+      this.startpage--;
+      this.emitChangeStartPage(this.startpage);
+      this.loadPages();
+    }
+  }
+  navigateRight() {
+    if (this.canNavigateRight()) {
+      this.startpage++;
+      this.emitChangeStartPage(this.startpage);
+      this.loadPages();
+    }
+  }
+  render() {
+    return (h("div", { ref: el => (this.bar = el) },
+      h("z-icon", { name: "chevron-left", class: !this.canNavigateLeft() && "disabled", onClick: () => this.navigateLeft(), onKeyPress: (ev) => handleKeyboardSubmit(ev, this.navigateLeft), tabindex: this.canNavigateLeft() ? 0 : -1 }),
+      this.currentPages.map(page => (h("z-pagination-page", { value: page, isselected: page === this.currentpage, onClick: () => this.emitGoToPage(page), onKeyDown: (ev) => handleKeyboardSubmit(ev, this.emitGoToPage, page), isvisited: this.listhistoryrow.includes(page) }))),
+      h("z-icon", { name: "chevron-right", class: !this.canNavigateRight() && "disabled", onClick: () => this.navigateRight(), onKeyPress: (ev) => handleKeyboardSubmit(ev, this.navigateRight), tabindex: this.canNavigateRight() ? 0 : -1 })));
+  }
+  static get is() { return "z-pagination-bar"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "pages": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "pages number"
+      },
+      "attribute": "pages",
+      "reflect": false
+    },
+    "visiblepages": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "number of visible pages"
+      },
+      "attribute": "visiblepages",
+      "reflect": false
+    },
+    "currentpage": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "current displayed page (mutable)"
+      },
+      "attribute": "currentpage",
+      "reflect": false,
+      "defaultValue": "1"
+    },
+    "startpage": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "initial page (mutable)"
+      },
+      "attribute": "startpage",
+      "reflect": false,
+      "defaultValue": "1"
+    },
+    "historyraw": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "json stringified history of visited pages (optional)"
+      },
+      "attribute": "historyraw",
+      "reflect": false
+    },
+    "listhistoryrow": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "number[]",
+        "resolved": "number[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "array of history of visited pages (mutable, optional)"
+      },
+      "defaultValue": "[]"
+    }
+  }; }
+  static get states() { return {
+    "currentPages": {}
+  }; }
+  static get events() { return [{
+      "method": "goToPage",
+      "name": "goToPage",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "emitted on page number click, returns page"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "changeStartPage",
+      "name": "changeStartPage",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "emitted on start page change, returns startpage"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "addPageToHistory",
+      "name": "addPageToHistory",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "emitted on adding page to isvisited array, returns page"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+}

package/dist/collection/components/pagination/z-pagination-bar/styles.css

@@ -0,0 +1,23 @@
+:host > div {
+  height: 48px;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+	justify-content: space-around;
+	align-items: center;
+	align-content: center;
+}
+
+:host > div > z-icon {
+  cursor: pointer;
+  margin: calc(var(--space-unit) * 2) 0;
+  color: var(--color-primary01);
+  fill: var(--color-primary01);
+}
+
+:host > div > z-icon.disabled {
+  cursor: default;
+  pointer-events: none;
+  color: var(--color-disabled01);
+  fill: var(--color-disabled01);
+}