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

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

@@ -1,226 +0,0 @@
-import { h } from "@stencil/core";
-import { ButtonVariant, ButtonType, ButtonSize } from "../../beans";
-/**
- * @slot - button label
- */
-export class ZButtonDeprecated {
-  constructor() {
-    /** HTML button disabled attribute. */
-    this.disabled = false;
-    /** HTML button type attribute. */
-    this.type = ButtonType.BUTTON;
-    /** Graphical variant: `primary`, `secondary`, `tertiary`, `dark-bg`. Defaults to `primary`. */
-    this.variant = ButtonVariant.PRIMARY;
-    /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
-    this.size = ButtonSize.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: {
-        [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"; }
-}

package/dist/collection/deprecated/z-button-deprecated/styles.css

@@ -1,231 +0,0 @@
-: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) {
-  display: inline-flex;
-  width: 100%;
-  box-sizing: border-box;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  border-width: var(--border-size-medium);
-  border-style: solid;
-  border-radius: var(--border-radius);
-  cursor: pointer;
-  fill: currentcolor;
-  font-family: var(--dashboard-font);
-  font-size: 14px;
-  font-weight: var(--font-sb);
-  letter-spacing: 0.3px;
-  line-height: 1;
-  outline: none;
-  text-decoration: none;
-  text-transform: uppercase;
-  vertical-align: middle;
-  white-space: nowrap;
-}
-
-button.big,
-:host([size="big"]) ::slotted(button),
-:host([size="big"]) ::slotted(a) {
-  min-width: 44px;
-  height: 44px;
-}
-
-button.small,
-:host([size="small"]) ::slotted(button),
-:host([size="small"]) ::slotted(a) {
-  min-width: 36px;
-  height: 36px;
-}
-
-button.issmall,
-:host([issmall]) ::slotted(button),
-:host([issmall]) ::slotted(a) {
-  min-width: 36px;
-  height: 36px;
-}
-
-button.x-small,
-:host([size="x-small"]) ::slotted(button),
-:host([size="x-small"]) ::slotted(a) {
-  min-width: 32px;
-  height: 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) {
-  border-color: var(--color-primary01);
-  background-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) {
-    border-color: var(--color-hover-primary);
-    background-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) {
-  border-color: var(--color-pressed-primary);
-  background-color: var(--color-pressed-primary);
-  box-shadow: var(--shadow-2);
-  color: var(--color-text-inverse);
-}
-
-button.primary:disabled,
-:host([variant="primary"]) ::slotted(button:disabled) {
-  border-color: var(--color-disabled01);
-  background-color: var(--color-disabled01);
-  color: var(--color-disabled02);
-}
-
-button.secondary,
-:host([variant="secondary"]) ::slotted(button),
-:host([variant="secondary"]) ::slotted(a) {
-  border-color: var(--color-primary01);
-  background-color: var(--color-surface01);
-  color: var(--color-primary01);
-}
-
-@media (hover: hover) {
-  button.secondary:hover,
-  :host([variant="secondary"]) ::slotted(button:hover),
-  :host([variant="secondary"]) ::slotted(a:hover) {
-    border-color: var(--color-hover-primary);
-    background-color: var(--color-surface01);
-    color: var(--color-hover-primary);
-  }
-}
-
-button.secondary:active,
-:host([variant="secondary"]) ::slotted(button:active),
-:host([variant="secondary"]) ::slotted(a:active) {
-  border-color: var(--color-pressed-primary);
-  background-color: var(--color-surface01);
-  box-shadow: var(--shadow-2);
-  color: var(--color-pressed-primary);
-}
-
-button.secondary:disabled,
-:host([variant="secondary"]) ::slotted(button:disabled) {
-  border-color: var(--color-disabled01);
-  background-color: var(--color-surface01);
-  color: var(--color-disabled02);
-}
-
-button.tertiary,
-:host([variant="tertiary"]) ::slotted(button),
-:host([variant="tertiary"]) ::slotted(a) {
-  border-color: transparent;
-  background-color: transparent;
-  color: var(--color-primary01);
-}
-
-button.tertiary.has-content {
-  padding: 0 var(--space-unit);
-}
-
-@media (hover: hover) {
-  button.tertiary:hover,
-  :host([variant="tertiary"]) ::slotted(button:hover),
-  :host([variant="tertiary"]) ::slotted(a:hover) {
-    border-color: var(--color-primary03);
-    background-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) {
-  border-color: var(--color-surface01);
-  background-color: var(--color-surface01);
-  color: var(--color-primary01);
-}
-
-button.tertiary:active,
-:host([variant="tertiary"]) ::slotted(button:active),
-:host([variant="tertiary"]) ::slotted(a:active) {
-  border-color: var(--color-surface01);
-  background-color: var(--color-surface01);
-  box-shadow: var(--shadow-2);
-  color: var(--color-primary01);
-}
-
-button.tertiary:disabled,
-:host([variant="tertiary"]) ::slotted(button:disabled) {
-  border-color: transparent;
-  background-color: transparent;
-  color: var(--color-disabled02);
-}
-
-button.dark-bg,
-:host([variant="dark-bg"]) ::slotted(button),
-:host([variant="dark-bg"]) ::slotted(a) {
-  border-color: transparent;
-  background-color: rgb(var(--rgb-white) 0.2);
-  color: var(--color-text04);
-}
-
-button.dark-bg.has-content {
-  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: rgb(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: rgb(var(--rgb-white) 0.3);
-}
-
-button.dark-bg:disabled,
-:host([variant="dark-bg"]) ::slotted(button:disabled) {
-  background-color: rgb(var(--rgb-white) 0.05);
-  color: var(--color-disabled03);
-}

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

@@ -1,160 +0,0 @@
-import { 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/deprecated/z-button-filter/styles.css

@@ -1,64 +0,0 @@
-button.container {
-  min-height: 32px;
-  padding: 0 calc(var(--space-unit) * 2);
-  border: var(--border-size-small) solid var(--bg-grey-200);
-  border-radius: 16px;
-  box-shadow: 0 2px 5px 0 var(--bg-neutral-300);
-  cursor: pointer;
-  font-family: var(--dashboard-font);
-  font-size: 12px;
-  font-weight: var(--font-sb);
-  letter-spacing: 0.17px;
-  line-height: 32px;
-  opacity: 1;
-  text-align: center;
-  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 {
-  border-color: var(--myz-blue-dark);
-  background-color: var(--myz-blue-dark);
-  box-shadow: 0 0 4px 0 var(--text-grey-800);
-  color: var(--bg-white);
-  fill: var(--bg-white);
-}
-
-button z-icon {
-  display: inline-block;
-}