@zanichelli/albe-web-components 6.3.2-rc1 → 6.3.2

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

@@ -0,0 +1,271 @@
+import { h } from "@stencil/core";
+import Hammer from "hammerjs";
+import { handleKeyboardSubmit } from "../../../utils/utils";
+export class ZPaginationBar {
+  constructor() {
+    this.velocityConstantMultiplier = 2;
+    this.pages = undefined;
+    this.visiblepages = undefined;
+    this.currentpage = 1;
+    this.startpage = 1;
+    this.historyraw = undefined;
+    this.listhistoryrow = [];
+    this.currentPages = [];
+    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);
+    const 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) {
+    const vel = Math.round(Math.abs(ev.velocity)) * this.velocityConstantMultiplier;
+    const deltaPage = Math.max(1, vel);
+    switch (ev.type) {
+      case "swiperight":
+        if (this.canNavigateLeft()) {
+          this.emitChangeStartPage(Math.max(1, this.startpage - deltaPage));
+        }
+        break;
+      case "swipeleft":
+        if (this.canNavigateRight()) {
+          this.emitChangeStartPage(Math.min(this.startpage + deltaPage, this.pages - this.visiblepages + 1));
+        }
+        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 });
+  }
+  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/deprecated/pagination/z-pagination-bar/styles.css

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

package/dist/collection/deprecated/pagination/z-pagination-page/index.js

@@ -0,0 +1,136 @@
+import { h } from "@stencil/core";
+export class ZPaginationPage {
+  constructor() {
+    this.pageid = undefined;
+    this.value = undefined;
+    this.isselected = false;
+    this.isdisabled = false;
+    this.isvisited = false;
+    this.ariaLabel = "";
+  }
+  render() {
+    return (h("button", { id: this.pageid, "aria-label": this.ariaLabel ? this.ariaLabel : `Go to page ${this.value}`, class: { selected: this.isselected, visited: this.isvisited }, disabled: this.isdisabled, type: "button" }, this.value));
+  }
+  static get is() { return "z-pagination-page"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "pageid": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "html id"
+        },
+        "attribute": "pageid",
+        "reflect": false
+      },
+      "value": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "numeric page value (optional)"
+        },
+        "attribute": "value",
+        "reflect": false
+      },
+      "isselected": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "selected status flag"
+        },
+        "attribute": "isselected",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "isdisabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "disabled status flag"
+        },
+        "attribute": "isdisabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "isvisited": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "visited status flag"
+        },
+        "attribute": "isvisited",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "ariaLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "aria-label string"
+        },
+        "attribute": "aria-label",
+        "reflect": false,
+        "defaultValue": "\"\""
+      }
+    };
+  }
+}

package/dist/collection/deprecated/pagination/z-pagination-page/styles.css

@@ -0,0 +1,57 @@
+:host {
+  display: inline-block;
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-sb);
+}
+
+:host > button {
+  display: inline-block;
+  min-width: 56px;
+  height: 48px;
+  box-sizing: border-box;
+  border: none;
+  border-bottom: var(--border-size-large) solid transparent;
+  margin: 0;
+  background: transparent;
+  color: var(--color-primary01);
+  cursor: pointer;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-2);
+  font-weight: inherit;
+  line-height: 48px;
+  outline: none;
+  text-align: center;
+  text-decoration: none;
+  transition: border-bottom 0.2s ease, font-size 0.2s ease;
+}
+
+:host > button[disabled] {
+  color: var(--color-disabled02);
+  cursor: default;
+  pointer-events: none;
+}
+
+:host > button:hover {
+  border-bottom: var(--border-size-large) solid var(--color-hover-light);
+  background-color: var(--color-background);
+  text-decoration: none;
+  transition: border-bottom 0.2s ease, background-color 0.2s ease;
+}
+
+:host > button:focus {
+  border-bottom: var(--border-size-large) solid var(--color-hover-light);
+  background-color: var(--color-background);
+  box-shadow: var(--shadow-focus-primary);
+  text-decoration: none;
+}
+
+:host > button.visited {
+  border-color: var(--color-hover-light);
+  text-decoration: none;
+}
+
+:host > button.selected {
+  border-bottom: var(--border-size-large) solid var(--color-primary01);
+  font-size: var(--font-size-7);
+  transition: border-bottom 0.2s ease, font-size 0.2s ease;
+}

package/dist/collection/deprecated/z-button-deprecated/index.js

@@ -0,0 +1,221 @@
+import { h } from "@stencil/core";
+import { ButtonVariant, ButtonType, ButtonSize } from "../../beans";
+/**
+ * @slot - button label
+ */
+export class ZButtonDeprecated {
+  constructor() {
+    this.htmlid = undefined;
+    this.name = undefined;
+    this.disabled = false;
+    this.type = ButtonType.BUTTON;
+    this.variant = ButtonVariant.PRIMARY;
+    this.icon = undefined;
+    this.size = ButtonSize.BIG;
+    this.issmall = false;
+    this.square = false;
+  }
+  render() {
+    this.hostElement.style.pointerEvents = this.disabled ? "none" : "auto";
+    return (h("slot", { name: "element" }, h("button", { id: this.htmlid, name: this.name, type: this.type, disabled: this.disabled, class: {
+        [this.variant]: true,
+        [this.size]: true,
+        issmall: this.issmall,
+        square: this.square,
+      } }, this.icon && (h("z-icon", { name: this.icon, width: 16, height: 16 })), h("slot", null))));
+  }
+  static get is() { return "z-button-deprecated"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "htmlid": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Identifier, should be unique."
+        },
+        "attribute": "htmlid",
+        "reflect": false
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "HTML button name attribute."
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "HTML button disabled attribute."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ButtonType",
+          "resolved": "ButtonType.BUTTON | ButtonType.RESET | ButtonType.SUBMIT",
+          "references": {
+            "ButtonType": {
+              "location": "import",
+              "path": "../../beans"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "HTML button type attribute."
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "ButtonType.BUTTON"
+      },
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ButtonVariant",
+          "resolved": "ButtonVariant.DARK_BG | ButtonVariant.PRIMARY | ButtonVariant.SECONDARY | ButtonVariant.TERTIARY",
+          "references": {
+            "ButtonVariant": {
+              "location": "import",
+              "path": "../../beans"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Graphical variant: `primary`, `secondary`, `tertiary`, `dark-bg`. Defaults to `primary`."
+        },
+        "attribute": "variant",
+        "reflect": true,
+        "defaultValue": "ButtonVariant.PRIMARY"
+      },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "`z-icon` name to use (optional)."
+        },
+        "attribute": "icon",
+        "reflect": false
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ButtonSize",
+          "resolved": "ButtonSize.BIG | ButtonSize.SMALL | ButtonSize.X_SMALL",
+          "references": {
+            "ButtonSize": {
+              "location": "import",
+              "path": "../../beans"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Available sizes: `big`, `small` and `x-small`. Defaults to `big`."
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "ButtonSize.BIG"
+      },
+      "issmall": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": "Use `size` prop."
+            }],
+          "text": "Reduce button size (deprecated)."
+        },
+        "attribute": "issmall",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "square": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Spy to render square button."
+        },
+        "attribute": "square",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get elementRef() { return "hostElement"; }
+}