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

package/dist/collection/deprecated/z-button-deprecated/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) {
+  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

@@ -0,0 +1,159 @@
+import { h } from "@stencil/core";
+export class ZButtonFilter {
+  constructor() {
+    this.filtername = undefined;
+    this.isfixed = false;
+    this.hasicon = true;
+    this.filterid = undefined;
+    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

@@ -0,0 +1,64 @@
+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;
+}

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

@@ -0,0 +1,63 @@
+import { h } from "@stencil/core";
+export class ZChipDeprecated {
+  constructor() {
+    this.regulartext = undefined;
+    this.boldtext = undefined;
+  }
+  renderLegacyChip() {
+    return (h("div", null, h("span", { class: "boldtext" }, this.boldtext), " ", this.regulartext));
+  }
+  render() {
+    return this.boldtext != null || this.regulartext != null ? (this.renderLegacyChip()) : (h("div", null, h("slot", null)));
+  }
+  static get is() { return "z-chip-deprecated"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "regulartext": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Text with regular font weight"
+        },
+        "attribute": "regulartext",
+        "reflect": false
+      },
+      "boldtext": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Text with bold font weight"
+        },
+        "attribute": "boldtext",
+        "reflect": false
+      }
+    };
+  }
+}

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

@@ -0,0 +1,17 @@
+:host > div {
+  display: inline-block;
+  min-height: 28px;
+  padding: 0 calc(var(--space-unit) * 1.5);
+  border: var(--border-size-small) solid var(--bg-grey-200);
+  background-color: var(--bg-white);
+  border-radius: 14px;
+  color: var(--text-grey-800);
+  fill: var(--text-grey-800);
+  font-family: var(--dashboard-font);
+  font-size: 12px;
+  line-height: 28px;
+}
+
+.boldtext {
+  font-weight: bold;
+}