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

package/dist/cjs/z-pocket_3.cjs.entry.js

@@ -1,125 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-e3299e0a.js');
-const index$1 = require('./index-fa110f37.js');
-const utils = require('./utils-600bad93.js');
-const hammer = require('./hammer-4f20813e.js');
-require('./breakpoints-88c4fd6c.js');
-require('./_commonjsHelpers-537d719a.js');
-
-const stylesCss$2 = ":host{width:inherit;height:100%;margin:inherit;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{width:inherit;height:100%;margin:inherit}:host>div>div.background{position:fixed;z-index:998;top:0;right:0;bottom:0;left:0;width:0;height:0}:host>div>div.background.open{width:100%;height:100%}:host>div>div.content-wrapper{position:fixed;z-index:999;bottom:0;left:0;width:inherit;margin:inherit}:host>div>div.content-wrapper>div{margin:calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 0.5) 0 calc(var(--space-unit) * 0.5);border-radius:var(--space-unit) var(--space-unit) 0 0;box-shadow:0 -2px calc(var(--space-unit) * 0.5) 0 rgb(66 69 72 / 40%)}";
-
-const ZPocket = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.pocketToggle = index.createEvent(this, "pocketToggle", 7);
-    /** pocket status */
-    this.status = index$1.PocketStatus.PREVIEW;
-  }
-  /** open z-pocket */
-  async open() {
-    this.status = index$1.PocketStatus.OPEN;
-  }
-  /** close z-pocket */
-  async close() {
-    this.status = index$1.PocketStatus.CLOSED;
-  }
-  emitPocketToggle(id, status) {
-    this.pocketToggle.emit({ id, status });
-  }
-  handlePocketHeaderClick(e) {
-    if (e.detail.id && e.detail.id === this.pocketid) {
-      switch (this.status) {
-        case index$1.PocketStatus.PREVIEW:
-        case index$1.PocketStatus.CLOSED:
-          this.status = index$1.PocketStatus.OPEN;
-          break;
-        case index$1.PocketStatus.OPEN:
-          this.status = index$1.PocketStatus.CLOSED;
-          break;
-      }
-    }
-  }
-  handlePocketHeaderPan(e) {
-    if (e.detail.id && e.detail.id === this.pocketid) {
-      if (e.detail.direction === "up") {
-        this.status = index$1.PocketStatus.OPEN;
-      }
-      else if (e.detail.direction === "down") {
-        this.status = index$1.PocketStatus.CLOSED;
-      }
-    }
-  }
-  watchStatusHandler(newVal) {
-    this.emitPocketToggle(this.pocketid, newVal);
-  }
-  componentWillLoad() {
-    this.emitPocketToggle(this.pocketid, this.status);
-  }
-  handleBackgroundClick(e) {
-    if (e.target.dataset.action == "pocketBackground") {
-      this.close();
-    }
-  }
-  render() {
-    return (index.h("div", null, index.h("div", { "data-action": "pocketBackground", "data-pocket": this.pocketid, class: `background ${this.status}`, onClick: (e) => this.handleBackgroundClick(e) }), index.h("div", { id: this.pocketid, class: "content-wrapper" }, index.h("div", null, index.h("slot", null)))));
-  }
-  get hostElement() { return index.getElement(this); }
-  static get watchers() { return {
-    "status": ["watchStatusHandler"]
-  }; }
-};
-ZPocket.style = stylesCss$2;
-
-const stylesCss$1 = ":host{display:block;width:100%;box-sizing:border-box;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>main{overflow:auto;border-right:var(--border-size-small) solid var(--color-surface03);border-left:var(--border-size-small) solid var(--color-surface03);background:var(--color-surface01);scrollbar-width:none}:host>main.preview{max-height:225px;transition:all 200ms ease-in-out, top 200ms ease-in-out}:host>main.open{max-height:calc(100vh - 48px);transition:all 200ms ease-in-out, top 200ms ease-in-out}:host>main.closed{height:0;transition:all 200ms ease-in-out, top 200ms ease-in-out}:host ::-webkit-scrollbar{width:0}@media only screen and (min-width: 768px){:host>main.preview{max-height:157px}}";
-
-const ZPocketBody = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /** pocket status */
-    this.status = index$1.PocketStatus.PREVIEW;
-  }
-  handlePocketToggle(e) {
-    if (e.detail.id && e.detail.id === this.pocketid) {
-      this.status = e.detail.status;
-    }
-  }
-  render() {
-    return (index.h("main", { class: this.status }, index.h("slot", null)));
-  }
-};
-ZPocketBody.style = stylesCss$1;
-
-const stylesCss = ":host{display:block;width:100%;box-sizing:border-box;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>header{display:flex;height:36px;flex-flow:row nowrap;align-items:center;justify-content:center;border:var(--border-size-small) solid var(--color-surface03);background:var(--color-surface01);border-radius:var(--space-unit) var(--space-unit) 0 0;cursor:pointer}:host>header:focus{outline:none}:host>header::-moz-focus-inner{border:0}";
-
-const ZPocketHeader = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.pocketHeaderClick = index.createEvent(this, "pocketHeaderClick", 7);
-    this.pocketHeaderPan = index.createEvent(this, "pocketHeaderPan", 7);
-    this.emitPocketHeaderClick = this.emitPocketHeaderClick.bind(this);
-  }
-  emitPocketHeaderClick() {
-    this.pocketHeaderClick.emit({ id: this.pocketid });
-  }
-  emitPocketHeaderPan(direction) {
-    this.pocketHeaderPan.emit({ id: this.pocketid, direction });
-  }
-  componentDidLoad() {
-    // INFO: swipe handling
-    const mc = new hammer.hammer(this.swipeWrap);
-    mc.get("pan").set({ direction: hammer.hammer.DIRECTION_VERTICAL });
-    mc.on("panup", () => this.emitPocketHeaderPan("up"));
-    mc.on("pandown", () => this.emitPocketHeaderPan("down"));
-  }
-  render() {
-    return (index.h("header", { role: "button", tabindex: 0, onClick: () => this.emitPocketHeaderClick(), onKeyPress: (ev) => utils.handleKeyboardSubmit(ev, this.emitPocketHeaderClick), ref: (el) => (this.swipeWrap = el) }, index.h("slot", null)));
-  }
-};
-ZPocketHeader.style = stylesCss;
-
-exports.z_pocket = ZPocket;
-exports.z_pocket_body = ZPocketBody;
-exports.z_pocket_header = ZPocketHeader;

package/dist/cjs/z-table-expanded-row.cjs.entry.js

@@ -1,19 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-e3299e0a.js');
-
-const stylesCss = ":host{display:none;background-color:var(--gray50)}:host>td>div.content-container{margin-bottom:calc(var(--space-unit) / 2);box-shadow:var(--shadow-2)}";
-
-const ZTableExpandedRow = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index.h("td", { colSpan: this.colSpan }, index.h("div", { class: "content-container" }, index.h("slot", null))));
-  }
-};
-ZTableExpandedRow.style = stylesCss;
-
-exports.z_table_expanded_row = ZTableExpandedRow;

package/dist/collection/collection-manifest.json

@@ -1,100 +0,0 @@
-{
-  "entries": [
-    "./components/typography/z-typography/index.js",
-    "./components/buttons/z-button/index.js",
-    "./components/buttons/z-button-sort/index.js",
-    "./components/buttons/z-chip/index.js",
-    "./components/buttons/z-toggle-button/index.js",
-    "./components/buttons/z-toggle-switch/index.js",
-    "./components/date-picker/z-date-picker/index.js",
-    "./components/date-picker/z-range-picker/index.js",
-    "./components/file-upload/z-dragdrop-area/index.js",
-    "./components/file-upload/z-file/index.js",
-    "./components/file-upload/z-file-upload/index.js",
-    "./components/icons/z-icon/index.js",
-    "./components/indicators/z-stepper/index.js",
-    "./components/indicators/z-stepper-item/index.js",
-    "./components/inputs/z-input/index.js",
-    "./snowflakes/myz/list/z-myz-list-item/index.js",
-    "./components/inputs/z-combobox/index.js",
-    "./components/inputs/z-input-message/index.js",
-    "./components/inputs/z-searchbar/index.js",
-    "./components/inputs/z-select/index.js",
-    "./components/list/z-list/index.js",
-    "./components/list/z-list-element/index.js",
-    "./components/list/z-list-group/index.js",
-    "./components/list/z-toast-notification-list/index.js",
-    "./components/logo/z-logo/index.js",
-    "./components/modal/z-modal/index.js",
-    "./components/navigation/tabs/z-navigation-tab/index.js",
-    "./components/navigation/tabs/z-navigation-tab-link/index.js",
-    "./components/navigation/tabs/z-navigation-tabs/index.js",
-    "./components/navigation/z-menu/index.js",
-    "./components/navigation/z-app-header/index.js",
-    "./components/navigation/z-app-switcher/index.js",
-    "./components/navigation/z-link/index.js",
-    "./components/navigation/z-menu-section/index.js",
-    "./components/notification/z-info-box/index.js",
-    "./components/notification/z-notification/index.js",
-    "./components/notification/z-toast-notification/index.js",
-    "./components/notification/z-tooltip/index.js",
-    "./components/panel/z-panel-elem/index.js",
-    "./components/typography/z-body/index.js",
-    "./components/typography/z-heading/index.js",
-    "./components/z-anchor-navigation/index.js",
-    "./components/z-aria-alert/index.js",
-    "./components/z-avatar/index.js",
-    "./components/z-card/index.js",
-    "./components/z-carousel/index.js",
-    "./components/z-contextual-menu/index.js",
-    "./components/z-cover-hero/index.js",
-    "./components/z-divider/index.js",
-    "./components/z-ghost-loading/index.js",
-    "./components/z-info-reveal/index.js",
-    "./components/z-offcanvas/index.js",
-    "./components/z-pagination/index.js",
-    "./components/z-popover/index.js",
-    "./components/z-section-title/index.js",
-    "./components/z-skip-to-content/index.js",
-    "./components/z-table/z-table/index.js",
-    "./components/z-table/z-table-body/index.js",
-    "./components/z-table/z-table-cell/index.js",
-    "./components/z-table/z-table-empty-box/index.js",
-    "./components/z-table/z-table-expanded-row/index.js",
-    "./components/z-table/z-table-footer/index.js",
-    "./components/z-table/z-table-head/index.js",
-    "./components/z-table/z-table-header/index.js",
-    "./components/z-table/z-table-header-row/index.js",
-    "./components/z-table/z-table-row/index.js",
-    "./components/z-table/z-table-sticky-footer/index.js",
-    "./components/z-tag/index.js",
-    "./components/z-visually-hidden/index.js",
-    "./snowflakes/myz/card/z-myz-card/index.js",
-    "./snowflakes/myz/card/z-myz-card-alert/index.js",
-    "./snowflakes/myz/card/z-myz-card-body/index.js",
-    "./snowflakes/myz/card/z-myz-card-cover/index.js",
-    "./snowflakes/myz/card/z-myz-card-dictionary/index.js",
-    "./snowflakes/myz/card/z-myz-card-footer/index.js",
-    "./snowflakes/myz/card/z-myz-card-footer-sections/index.js",
-    "./snowflakes/myz/card/z-myz-card-header/index.js",
-    "./snowflakes/myz/card/z-myz-card-icon/index.js",
-    "./snowflakes/myz/card/z-myz-card-info/index.js",
-    "./snowflakes/myz/card/z-myz-card-list/index.js",
-    "./snowflakes/myz/list/z-myz-list/index.js",
-    "./snowflakes/myz/pocket/z-messages-pocket/index.js",
-    "./snowflakes/myz/pocket/z-pocket/index.js",
-    "./snowflakes/myz/pocket/z-pocket-body/index.js",
-    "./snowflakes/myz/pocket/z-pocket-header/index.js",
-    "./snowflakes/myz/pocket/z-pocket-message/index.js",
-    "./snowflakes/myz/z-alert/index.js",
-    "./snowflakes/myz/z-otp/index.js",
-    "./snowflakes/myz/z-slideshow/index.js"
-  ],
-  "compiler": {
-    "name": "@stencil/core",
-    "version": "2.18.1",
-    "typescriptVersion": "4.7.4"
-  },
-  "collections": [],
-  "bundles": []
-}

package/dist/collection/components/buttons/z-button/index.js

@@ -1,241 +0,0 @@
-import { h } from "@stencil/core";
-import { ButtonVariant, ButtonType, ButtonSize } from "../../../beans";
-/**
- * @slot - button label
- */
-export class ZButton {
-  constructor() {
-    /** defines a string value that labels an interactive element, used for accessibility. */
-    this.ariaLabel = "";
-    /** HTML button disabled attribute. */
-    this.disabled = false;
-    /** HTML button type attribute. */
-    this.type = ButtonType.BUTTON;
-    /** Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`. */
-    this.variant = ButtonVariant.PRIMARY;
-    /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
-    this.size = ButtonSize.BIG;
-  }
-  getAttributes() {
-    return {
-      id: this.htmlid,
-      class: {
-        "z-button--container": true,
-        "z-button--has-text": !!this.hostElement.textContent.trim(),
-      },
-    };
-  }
-  render() {
-    if (this.href) {
-      return (h("a", Object.assign({}, this.getAttributes(), { "aria-label": this.ariaLabel, href: this.href, target: this.target }), this.icon && (h("z-icon", { name: this.icon, width: 16, height: 16 })), h("slot", null)));
-    }
-    return (h("button", Object.assign({}, this.getAttributes(), { "aria-label": this.ariaLabel, name: this.name, type: this.type, disabled: this.disabled }), this.icon && (h("z-icon", { name: this.icon, width: 16, height: 16 })), h("slot", null)));
-  }
-  static get is() { return "z-button"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "ariaLabel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "defines a string value that labels an interactive element, used for accessibility."
-        },
-        "attribute": "aria-label",
-        "reflect": true,
-        "defaultValue": "\"\""
-      },
-      "href": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "HTML <a> href attribute. If it is set, it renders an HTML <a> tag."
-        },
-        "attribute": "href",
-        "reflect": false
-      },
-      "target": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "HTML a target attribute."
-        },
-        "attribute": "target",
-        "reflect": false
-      },
-      "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`. 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"
-      }
-    };
-  }
-  static get elementRef() { return "hostElement"; }
-}

package/dist/collection/components/buttons/z-button/styles.css

@@ -1,149 +0,0 @@
-:host {
-  display: inline-block;
-
-  --z-icon-width: 16px;
-  --z-icon-height: 16px;
-  --z-icon-right-margin: 0;
-}
-
-:host([disabled]:not([disabled="false"])) {
-  pointer-events: none;
-}
-
-:host .z-button--container {
-  display: inline-flex;
-  width: 100%;
-  box-sizing: border-box;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  border-width: var(--border-size-medium);
-  border-style: solid;
-  border-radius: var(--border-radius);
-  cursor: pointer;
-  fill: currentcolor;
-  font-family: var(--font-family-sans);
-  font-size: 14px;
-  font-weight: var(--font-sb);
-  letter-spacing: 0.3px;
-  line-height: 1;
-  outline: none;
-  text-decoration: none;
-  text-transform: uppercase;
-  white-space: nowrap;
-}
-
-:host .z-button--container:focus:focus-visible {
-  box-shadow: var(--shadow-focus-primary);
-}
-
-:host .z-button--container.z-button--has-text {
-  min-width: calc(var(--space-unit) * 8);
-  padding: 0 calc(var(--space-unit) * 2);
-}
-
-:host .z-button--container.z-button--has-text z-icon {
-  --z-icon-right-margin: var(--space-unit);
-}
-
-:host([size="big"]) .z-button--container {
-  min-width: 44px;
-  height: 44px;
-}
-
-:host([size="small"]) .z-button--container {
-  min-width: 36px;
-  height: 36px;
-}
-
-:host([size="x-small"]) .z-button--container {
-  min-width: 32px;
-  height: 32px;
-}
-
-:host([variant="primary"]) .z-button--container {
-  border-color: var(--color-primary01);
-  background-color: var(--color-primary01);
-  color: var(--color-text-inverse);
-}
-
-@media (hover: hover) {
-  :host([variant="primary"]) .z-button--container:hover {
-    border-color: var(--color-hover-primary);
-    background-color: var(--color-hover-primary);
-    color: var(--color-text-inverse);
-  }
-}
-
-:host([variant="primary"]) .z-button--container:active {
-  border-color: var(--color-pressed-primary);
-  background-color: var(--color-pressed-primary);
-  box-shadow: var(--shadow-2);
-  color: var(--color-text-inverse);
-}
-
-:host([variant="primary"][disabled]:not([disabled="false"])) .z-button--container {
-  border-color: var(--color-disabled01);
-  background-color: var(--color-disabled01);
-  color: var(--color-disabled02);
-}
-
-:host([variant="secondary"]) .z-button--container {
-  border-color: var(--color-primary01);
-  background-color: var(--color-surface01);
-  color: var(--color-primary01);
-}
-
-@media (hover: hover) {
-  :host([variant="secondary"]) .z-button--container:hover {
-    border-color: var(--color-hover-primary);
-    background-color: var(--color-surface01);
-    color: var(--color-hover-primary);
-  }
-}
-
-:host([variant="secondary"]) .z-button--container:active {
-  border-color: var(--color-pressed-primary);
-  background-color: var(--color-surface01);
-  box-shadow: var(--shadow-2);
-  color: var(--color-pressed-primary);
-}
-
-:host([variant="secondary"][disabled]:not([disabled="false"])) .z-button--container {
-  border-color: var(--color-disabled01);
-  background-color: var(--color-surface01);
-  color: var(--color-disabled02);
-}
-
-:host([variant="tertiary"]) .z-button--container {
-  border-color: transparent;
-  background-color: transparent;
-  color: var(--color-primary01);
-}
-
-@media (hover: hover) {
-  :host([variant="tertiary"]) .z-button--container:hover {
-    border-color: var(--color-primary03);
-    background-color: var(--color-primary03);
-    color: var(--color-hover-primary);
-  }
-}
-
-:host([variant="tertiary"]) .z-button--container:focus:focus-visible {
-  border-color: var(--color-surface01);
-  background-color: var(--color-surface01);
-  color: var(--color-primary01);
-}
-
-:host([variant="tertiary"]) .z-button--container:active {
-  border-color: var(--color-surface01);
-  background-color: var(--color-surface01);
-  box-shadow: var(--shadow-2);
-  color: var(--color-primary01);
-}
-
-:host([variant="tertiary"][disabled]:not([disabled="false"])) .z-button--container {
-  border-color: transparent;
-  background-color: transparent;
-  color: var(--color-disabled02);
-}