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

package/dist/collection/collection-manifest.json

@@ -0,0 +1,100 @@
+{
+  "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

@@ -0,0 +1,241 @@
+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

@@ -0,0 +1,149 @@
+: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);
+}