@zanichelli/albe-web-components 7.0.0 → 7.1.0

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

@@ -1,126 +1,126 @@
-import { h } from "@stencil/core";
-export class ZToggleButton {
-  constructor() {
-    /** disabled status flag (optional) */
-    this.isdisabled = false;
-    /** open by default (optional) */
-    this.opened = false;
-  }
-  emitToggleClick() {
-    if (this.isdisabled) {
-      return;
-    }
-    this.opened = !this.opened;
-    this.toggleClick.emit(this.opened);
-  }
-  render() {
-    return (h("button", { tabindex: this.avoidclick ? "-1" : "0", class: {
-        "isopen": this.opened,
-        "avoid-clicks": this.avoidclick,
-      }, disabled: this.isdisabled, onClick: () => this.emitToggleClick() }, h("z-icon", { name: this.opened ? "chevron-down" : "chevron-up", width: 16, height: 16 }), this.label));
-  }
-  static get is() { return "z-toggle-button"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "label text"
-        },
-        "attribute": "label",
-        "reflect": false
-      },
-      "isdisabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "disabled status flag (optional)"
-        },
-        "attribute": "isdisabled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "avoidclick": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "avoidclick status flag"
-        },
-        "attribute": "avoidclick",
-        "reflect": false
-      },
-      "opened": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "open by default (optional)"
-        },
-        "attribute": "opened",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "toggleClick",
-        "name": "toggleClick",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "emitted on toggle button click, returns isOpen"
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
-}
+import { h } from "@stencil/core";
+export class ZToggleButton {
+  constructor() {
+    /** disabled status flag (optional) */
+    this.isdisabled = false;
+    /** open by default (optional) */
+    this.opened = false;
+  }
+  emitToggleClick() {
+    if (this.isdisabled) {
+      return;
+    }
+    this.opened = !this.opened;
+    this.toggleClick.emit(this.opened);
+  }
+  render() {
+    return (h("button", { tabindex: this.avoidclick ? "-1" : "0", class: {
+        "isopen": this.opened,
+        "avoid-clicks": this.avoidclick,
+      }, disabled: this.isdisabled, onClick: () => this.emitToggleClick() }, h("z-icon", { name: this.opened ? "chevron-down" : "chevron-up", width: 16, height: 16 }), this.label));
+  }
+  static get is() { return "z-toggle-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "label text"
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "isdisabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "disabled status flag (optional)"
+        },
+        "attribute": "isdisabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "avoidclick": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "avoidclick status flag"
+        },
+        "attribute": "avoidclick",
+        "reflect": false
+      },
+      "opened": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "open by default (optional)"
+        },
+        "attribute": "opened",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "toggleClick",
+        "name": "toggleClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "emitted on toggle button click, returns isOpen"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+}

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

@@ -1,62 +1,62 @@
-button {
-  height: 36px;
-  padding-right: calc(var(--space-unit) * 2);
-  padding-left: 0;
-  border: var(--border-size-medium) solid;
-  border-color: transparent;
-  background-color: var(--bg-white);
-  border-radius: var(--border-radius);
-  box-shadow: 0 0 4px 0 rgb(0 0 0 / 20%);
-  color: var(--myz-blue);
-  cursor: pointer;
-  fill: var(--myz-blue);
-  font-family: var(--dashboard-font);
-  font-size: 14px;
-  font-weight: var(--font-sb);
-  outline: none;
-  text-transform: uppercase;
-  transition: all 200ms linear;
-}
-
-button::-moz-focus-inner {
-  border: 0;
-}
-
-button:hover {
-  color: var(--myz-blue-dark);
-  fill: var(--myz-blue-dark);
-}
-
-button:focus {
-  border-color: var(--myz-blue);
-  box-shadow: 0 0 2px 2px var(--accent-dark);
-  color: var(--myz-blue);
-  fill: var(--myz-blue);
-}
-
-button:active {
-  border-color: var(--myz-blue-light);
-  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 40%);
-  color: var(--myz-blue-light);
-  fill: var(--myz-blue-light);
-}
-
-button:disabled {
-  color: var(--text-grey-700);
-  fill: var(--text-grey-700);
-}
-
-z-icon {
-  display: inline-block;
-  margin: 0 var(--space-unit) 0 calc(var(--space-unit) * 2);
-  transform: rotate(360deg);
-  transition: all 200ms linear;
-}
-
-button.isopen {
-  top: -20px;
-}
-
-button.avoid-clicks {
-  pointer-events: none;
-}
+button {
+  height: 36px;
+  padding-right: calc(var(--space-unit) * 2);
+  padding-left: 0;
+  border: var(--border-size-medium) solid;
+  border-color: transparent;
+  background-color: var(--bg-white);
+  border-radius: var(--border-radius);
+  box-shadow: 0 0 4px 0 rgb(0 0 0 / 20%);
+  color: var(--myz-blue);
+  cursor: pointer;
+  fill: var(--myz-blue);
+  font-family: var(--dashboard-font);
+  font-size: 14px;
+  font-weight: var(--font-sb);
+  outline: none;
+  text-transform: uppercase;
+  transition: all 200ms linear;
+}
+
+button::-moz-focus-inner {
+  border: 0;
+}
+
+button:hover {
+  color: var(--myz-blue-dark);
+  fill: var(--myz-blue-dark);
+}
+
+button:focus {
+  border-color: var(--myz-blue);
+  box-shadow: 0 0 2px 2px var(--accent-dark);
+  color: var(--myz-blue);
+  fill: var(--myz-blue);
+}
+
+button:active {
+  border-color: var(--myz-blue-light);
+  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 40%);
+  color: var(--myz-blue-light);
+  fill: var(--myz-blue-light);
+}
+
+button:disabled {
+  color: var(--text-grey-700);
+  fill: var(--text-grey-700);
+}
+
+z-icon {
+  display: inline-block;
+  margin: 0 var(--space-unit) 0 calc(var(--space-unit) * 2);
+  transform: rotate(360deg);
+  transition: all 200ms linear;
+}
+
+button.isopen {
+  top: -20px;
+}
+
+button.avoid-clicks {
+  pointer-events: none;
+}

package/dist/collection/components/buttons/z-toggle-switch/index.js

@@ -1,144 +1,144 @@
-import { h, Host } from "@stencil/core";
-import { randomId } from "../../../utils/utils";
-import { LabelPosition } from "../../../beans";
-export class ZToggleSwitch {
-  constructor() {
-    /** Disabled flag */
-    this.disabled = false;
-    /** Label position */
-    this.labelPosition = LabelPosition.LEFT;
-    /** Checked state */
-    this.checked = false;
-    /** HTML id attribute to set to the internal checkbox */
-    this.htmlid = `toggle-switch-id-${randomId()}`;
-  }
-  emitToggleClick() {
-    this.toggleClick.emit({
-      id: this.htmlid,
-      checked: this.checked,
-    });
-  }
-  handleClick(ev) {
-    if (this.disabled) {
-      return;
-    }
-    this.checked = ev.target.checked;
-    this.emitToggleClick();
-  }
-  render() {
-    return (h(Host, null, h("input", { id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), h("label", { htmlFor: this.htmlid, class: {
-        [this.labelPosition]: true,
-        disabled: this.disabled,
-      } }, h("span", null, h("slot", null)), h("span", { class: {
-        container: true,
-        disabled: this.disabled,
-        checked: this.checked,
-      } }, h("span", { class: "circle" }, this.checked && (h("z-icon", { width: 12, height: 12, name: "checkmark" })))))));
-  }
-  static get is() { return "z-toggle-switch"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Disabled flag"
-        },
-        "attribute": "disabled",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "labelPosition": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "LabelPosition",
-          "resolved": "LabelPosition.LEFT | LabelPosition.RIGHT",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Label position"
-        },
-        "attribute": "label-position",
-        "reflect": true,
-        "defaultValue": "LabelPosition.LEFT"
-      },
-      "checked": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Checked state"
-        },
-        "attribute": "checked",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "htmlid": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "HTML id attribute to set to the internal checkbox"
-        },
-        "attribute": "htmlid",
-        "reflect": false,
-        "defaultValue": "`toggle-switch-id-${randomId()}`"
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "toggleClick",
-        "name": "toggleClick",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Toggle click event"
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
-}
+import { h, Host } from "@stencil/core";
+import { randomId } from "../../../utils/utils";
+import { LabelPosition } from "../../../beans";
+export class ZToggleSwitch {
+  constructor() {
+    /** Disabled flag */
+    this.disabled = false;
+    /** Label position */
+    this.labelPosition = LabelPosition.LEFT;
+    /** Checked state */
+    this.checked = false;
+    /** HTML id attribute to set to the internal checkbox */
+    this.htmlid = `toggle-switch-id-${randomId()}`;
+  }
+  emitToggleClick() {
+    this.toggleClick.emit({
+      id: this.htmlid,
+      checked: this.checked,
+    });
+  }
+  handleClick(ev) {
+    if (this.disabled) {
+      return;
+    }
+    this.checked = ev.target.checked;
+    this.emitToggleClick();
+  }
+  render() {
+    return (h(Host, null, h("input", { id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), h("label", { htmlFor: this.htmlid, class: {
+        [this.labelPosition]: true,
+        disabled: this.disabled,
+      } }, h("span", null, h("slot", null)), h("span", { class: {
+        container: true,
+        disabled: this.disabled,
+        checked: this.checked,
+      } }, h("span", { class: "circle" }, this.checked && (h("z-icon", { width: 12, height: 12, name: "checkmark" })))))));
+  }
+  static get is() { return "z-toggle-switch"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Disabled flag"
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "labelPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "LabelPosition",
+          "resolved": "LabelPosition.LEFT | LabelPosition.RIGHT",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Label position"
+        },
+        "attribute": "label-position",
+        "reflect": true,
+        "defaultValue": "LabelPosition.LEFT"
+      },
+      "checked": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Checked state"
+        },
+        "attribute": "checked",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "htmlid": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "HTML id attribute to set to the internal checkbox"
+        },
+        "attribute": "htmlid",
+        "reflect": false,
+        "defaultValue": "`toggle-switch-id-${randomId()}`"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "toggleClick",
+        "name": "toggleClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Toggle click event"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+}