@zanichelli/albe-web-components 2.33.1 → 2.33.3

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

@@ -0,0 +1,219 @@
+import { Component, Prop, h, Element } from "@stencil/core";
+import classNames from "classnames";
+import { ButtonVariantEnum, ButtonTypeEnum, ButtonSizeEnum, } from "../../../beans";
+/**
+ * @slot - button label
+ */
+export class ZButton {
+  constructor() {
+    /** HTML button disabled attribute. */
+    this.disabled = false;
+    /** HTML button type attribute. */
+    this.type = ButtonTypeEnum.button;
+    /** Graphical variant: `primary`, `secondary`, `tertiary`, `dark-bg`. Defaults to `primary`. */
+    this.variant = ButtonVariantEnum.primary;
+    /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
+    this.size = ButtonSizeEnum.big;
+    /** Reduce button size (deprecated).
+     *
+     * @deprecated Use `size` prop.
+     * */
+    this.issmall = false;
+    /** Spy to render square button. */
+    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: classNames(this.variant, this.size, { 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"; }
+  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": "HTMLButtonElement[\"type\"]",
+        "resolved": "string",
+        "references": {
+          "HTMLButtonElement": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "HTML button type attribute."
+      },
+      "attribute": "type",
+      "reflect": false,
+      "defaultValue": "ButtonTypeEnum.button"
+    },
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "ButtonVariantBean",
+        "resolved": "ButtonVariantEnum.primary | ButtonVariantEnum.secondary | ButtonVariantEnum.tertiary | typeof ButtonVariantEnum[\"dark-bg\"]",
+        "references": {
+          "ButtonVariantBean": {
+            "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": "ButtonVariantEnum.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": "ButtonSizeEnum",
+        "resolved": "ButtonSizeEnum.big | ButtonSizeEnum.small | typeof ButtonSizeEnum[\"x-small\"]",
+        "references": {
+          "ButtonSizeEnum": {
+            "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": "ButtonSizeEnum.big"
+    },
+    "issmall": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Use `size` prop.",
+            "name": "deprecated"
+          }],
+        "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"; }
+}

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

@@ -0,0 +1,231 @@
+:host {
+  display: inline-block;
+
+  --z-icon-width: 16px;
+  --z-icon-height: 16px;
+  --z-icon-right-margin: var(--space-unit);
+  --rgb-white: 240, 240, 240
+}
+
+button:disabled,
+::slotted(button:disabled) {
+  pointer-events: none;
+}
+
+button,
+::slotted(button),
+::slotted(a) {
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  font-family: var(--dashboard-font);
+  font-weight: var(--font-sb);
+  font-size: 14px;
+  line-height: 1;
+  letter-spacing: 0.3px;
+  border-width: var(--border-size-medium);
+  border-style: solid;
+  border-radius: var(--border-radius);
+  vertical-align: middle;
+  text-transform: uppercase;
+  text-decoration: none;
+  cursor: pointer;
+  white-space: nowrap;
+  outline: none;
+  fill: currentColor;
+}
+
+button.big,
+:host([size="big"]) ::slotted(button),
+:host([size="big"]) ::slotted(a) {
+  height: 44px;
+  min-width: 44px;
+}
+
+button.small,
+:host([size="small"]) ::slotted(button),
+:host([size="small"]) ::slotted(a) {
+  height: 36px;
+  min-width: 36px;
+}
+
+button.issmall,
+:host([issmall]) ::slotted(button),
+:host([issmall]) ::slotted(a) {
+  height: 36px;
+  min-width: 36px;
+}
+
+button.x-small,
+:host([size="x-small"]) ::slotted(button),
+:host([size="x-small"]) ::slotted(a) {
+  height: 32px;
+  min-width: 32px;
+}
+
+button:not(.square),
+:host(:not([square])) ::slotted(button),
+:host(:not([square])) ::slotted(a) {
+  min-width: calc(var(--space-unit) * 8);
+  padding: 0 calc(var(--space-unit) * 2);
+}
+
+button.square,
+:host([square]) {
+  --z-icon-right-margin: 0;
+}
+
+button.primary,
+:host([variant="primary"]) ::slotted(button),
+:host([variant="primary"]) ::slotted(a) {
+  background-color: var(--color-primary01);
+  border-color: var(--color-primary01);
+  color: var(--color-text-inverse);
+}
+
+@media (hover: hover) {
+  button.primary:hover,
+  :host([variant="primary"]) ::slotted(button:hover),
+  :host([variant="primary"]) ::slotted(a:hover) {
+    background-color: var(--color-hover-primary);
+    border-color: var(--color-hover-primary);
+    color: var(--color-text-inverse);
+  }
+}
+
+button:focus:focus-visible,
+::slotted(button:focus:focus-visible),
+::slotted(a:focus:focus-visible) {
+  box-shadow: var(--shadow-focus-primary);
+}
+
+button.primary:active,
+:host([variant="primary"]) ::slotted(button:active),
+:host([variant="primary"]) ::slotted(a:active) {
+  background-color: var(--color-pressed-primary);
+  border-color: var(--color-pressed-primary);
+  color: var(--color-text-inverse);
+  box-shadow: var(--shadow-2);
+}
+
+button.primary:disabled,
+:host([variant="primary"]) ::slotted(button:disabled) {
+  background-color: var(--color-disabled01);
+  border-color: var(--color-disabled01);
+  color: var(--color-disabled02);
+}
+
+button.secondary,
+:host([variant="secondary"]) ::slotted(button),
+:host([variant="secondary"]) ::slotted(a) {
+  background-color: var(--color-surface01);
+  border-color: var(--color-primary01);
+  color: var(--color-primary01);
+}
+
+@media (hover: hover) {
+  button.secondary:hover,
+  :host([variant="secondary"]) ::slotted(button:hover),
+  :host([variant="secondary"]) ::slotted(a:hover) {
+    background-color: var(--color-surface01);
+    border-color: var(--color-hover-primary);
+    color: var(--color-hover-primary);
+  }
+}
+
+button.secondary:active,
+:host([variant="secondary"]) ::slotted(button:active),
+:host([variant="secondary"]) ::slotted(a:active) {
+  background-color: var(--color-surface01);
+  border-color: var(--color-pressed-primary);
+  color: var(--color-pressed-primary);
+  box-shadow: var(--shadow-2);
+}
+
+button.secondary:disabled,
+:host([variant="secondary"]) ::slotted(button:disabled) {
+  background-color: var(--color-surface01);
+  border-color: var(--color-disabled01);
+  color: var(--color-disabled02);
+}
+
+button.tertiary,
+:host([variant="tertiary"]) ::slotted(button),
+:host([variant="tertiary"]) ::slotted(a) {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--color-primary01);
+}
+
+button.tertiary.hasContent {
+  padding: 0 var(--space-unit);
+}
+
+@media (hover: hover) {
+  button.tertiary:hover,
+  :host([variant="tertiary"]) ::slotted(button:hover),
+  :host([variant="tertiary"]) ::slotted(a:hover) {
+    background-color: var(--color-primary03);
+    border-color: var(--color-primary03);
+    color: var(--color-hover-primary);
+  }
+}
+
+button.tertiary:focus:focus-visible,
+:host([variant="tertiary"]) ::slotted(button:focus:focus-visible),
+:host([variant="tertiary"]) ::slotted(a:focus:focus-visible) {
+  background-color: var(--color-surface01);
+  border-color: var(--color-surface01);
+  color: var(--color-primary01);
+}
+
+button.tertiary:active,
+:host([variant="tertiary"]) ::slotted(button:active),
+:host([variant="tertiary"]) ::slotted(a:active) {
+  background-color: var(--color-surface01);
+  border-color: var(--color-surface01);
+  color: var(--color-primary01);
+  box-shadow: var(--shadow-2);
+}
+
+button.tertiary:disabled,
+:host([variant="tertiary"]) ::slotted(button:disabled) {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--color-disabled02);
+}
+
+button.dark-bg,
+:host([variant="dark-bg"]) ::slotted(button),
+:host([variant="dark-bg"]) ::slotted(a) {
+  background-color: rgba(var(--rgb-white), 0.2);
+  border-color: transparent;
+  color: var(--color-text04);
+}
+
+button.dark-bg.hasContent {
+  padding: 0 var(--space-unit);
+}
+
+@media (hover: hover) {
+  button.dark-bg:hover,
+  :host([variant="dark-bg"]) ::slotted(button:hover),
+  :host([variant="dark-bg"]) ::slotted(a:hover) {
+    background-color: rgba(var(--rgb-white), 0.1);
+  }
+}
+
+button.dark-bg:active,
+:host([variant="dark-bg"]) ::slotted(button:active),
+:host([variant="dark-bg"]) ::slotted(a:active) {
+  background-color: rgba(var(--rgb-white), 0.3);
+}
+
+button.dark-bg:disabled,
+:host([variant="dark-bg"]) ::slotted(button:disabled) {
+  color: var(--color-disabled03);
+  background-color: rgba(var(--rgb-white), 0.05);
+}

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

@@ -0,0 +1,155 @@
+import { Component, Prop, Event, h } from "@stencil/core";
+export class ZButtonFilter {
+  constructor() {
+    /** disable action on button */
+    this.isfixed = false;
+    /** add icon to button */
+    this.hasicon = true;
+    /** reduce button size (optional) */
+    this.issmall = false;
+    this.handleRemovingFilterClick = this.handleRemovingFilterClick.bind(this);
+  }
+  handleRemovingFilterClick() {
+    this.removefilter.emit({
+      filterid: this.filterid,
+    });
+  }
+  renderFixedPillow(filtername) {
+    return (h("button", { class: `container ${this.issmall ? "small" : ""}` },
+      this.renderIcon(),
+      this.renderContent(filtername)));
+  }
+  renderDynamicPillow(filtername) {
+    return (h("button", { class: `container isactive ${this.issmall ? "small" : ""}`, onClick: this.handleRemovingFilterClick },
+      this.renderIcon(),
+      this.renderContent(filtername)));
+  }
+  renderIcon() {
+    if (!this.hasicon)
+      return null;
+    return (h("z-icon", { class: "close-icon-container", name: "multiply", height: 12, width: 12 }));
+  }
+  renderContent(filtername) {
+    return h("span", { class: "text-container" }, filtername);
+  }
+  render() {
+    if (this.isfixed) {
+      return this.renderFixedPillow(this.filtername);
+    }
+    return this.renderDynamicPillow(this.filtername);
+  }
+  static get is() { return "z-button-filter"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "filtername": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "filter text content"
+      },
+      "attribute": "filtername",
+      "reflect": false
+    },
+    "isfixed": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "disable action on button"
+      },
+      "attribute": "isfixed",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "hasicon": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "add icon to button"
+      },
+      "attribute": "hasicon",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "filterid": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "filter id"
+      },
+      "attribute": "filterid",
+      "reflect": false
+    },
+    "issmall": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "reduce button size (optional)"
+      },
+      "attribute": "issmall",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get events() { return [{
+      "method": "removefilter",
+      "name": "removefilter",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "remove filter click event, returns filterid"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+}

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

@@ -0,0 +1,74 @@
+button.container {
+  min-height: 32px;
+  line-height: 32px;
+
+  border: var(--border-size-small) solid var(--bg-grey-200);
+  border-radius: 16px;
+
+  box-shadow: 0px 2px 5px 0px var(--bg-neutral-300);
+  -webkit-box-shadow: 0px 2px 5px 0px var(--bg-neutral-300);
+  -moz-box-shadow: 0px 2px 5px 0px var(--bg-neutral-300);
+
+  text-align: center;
+
+  padding: 0 calc(var(--space-unit) * 2);
+
+  cursor: pointer;
+
+  letter-spacing: 0.17px;
+  font-family: var(--dashboard-font);
+  font-size: 12px;
+  font-weight: var(--font-sb);
+
+  opacity: 1;
+
+  transition: all 200ms linear;
+}
+
+button.container.small {
+  min-height: 24px;
+  line-height: 24px;
+}
+
+button.container:focus {
+  outline: 0;
+}
+
+button.container::-moz-focus-inner {
+  border: 0;
+}
+
+.text-container {
+  margin-left: 4px;
+}
+
+button.container,
+button.container:focus,
+button.container:hover {
+  background-color: var(--bg-white);
+  color: var(--text-grey-700);
+  fill: var(--text-grey-700);
+}
+
+button.container.isactive {
+  background-color: var(--bg-white);
+  color: var(--myz-blue);
+  fill: var(--myz-blue);
+}
+
+button.container.isactive:hover {
+  color: var(--myz-blue-dark);
+  fill: var(--myz-blue-dark);
+}
+
+button.container.isactive:focus {
+  background-color: var(--myz-blue-dark);
+  border-color: var(--myz-blue-dark);
+  box-shadow: 0px 0px 4px 0px var(--text-grey-800);
+  color: var(--bg-white);
+  fill: var(--bg-white);
+}
+
+button z-icon {
+  display: inline-block;
+}