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

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

@@ -1,282 +0,0 @@
-:host {
-  display: inline-block;
-  width: inherit;
-}
-
-input::-ms-clear,
-input::-ms-reveal {
-  display: none;
-}
-
-/* GENERAL */
-:host input::-ms-clear,
-:host input::-ms-reveal {
-  display: none;
-}
-
-input,
-textarea,
-.textarea-wrapper,
-ul[role="listbox"] {
-  box-sizing: border-box;
-  border: var(--border-size-small) solid var(--color-surface04);
-  background: var(--color-input-field01);
-  border-radius: var(--border-radius-small);
-  color: var(--color-text02);
-  fill: var(--color-icon02);
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-3);
-  font-weight: var(--font-rg);
-  outline: none;
-}
-
-/* FOCUS */
-input:focus:focus-visible,
-li[role="option"]:focus:focus-visible,
-.focus {
-  box-shadow: var(--shadow-focus-primary);
-}
-
-/* FILLED */
-.filled {
-  border-color: var(--color-surface05);
-}
-
-/* STATUSES (success, warning, error) */
-.input-success,
-.input-success:hover,
-.input-success.hover {
-  border-color: var(--color-success01);
-  background: var(--color-success-inverse);
-  fill: var(--color-success01);
-}
-
-.input-error,
-.input-error:hover,
-.input-error.hover {
-  border-color: var(--color-error01);
-  background: var(--color-error-inverse);
-  fill: var(--color-error01);
-}
-
-.input-warning,
-.input-warning:hover,
-.input-warning.hover {
-  border-color: var(--color-warning01);
-  background: var(--color-warning-inverse);
-  fill: var(--color-warning01);
-}
-
-/* READONLY */
-input[readonly],
-.readonly {
-  border-color: var(--color-disabled01);
-  fill: var(--color-disabled01);
-  pointer-events: none;
-}
-
-/* DISABLED */
-input:disabled,
-.disabled,
-.filled:disabled {
-  border-color: var(--color-disabled01);
-  box-shadow: none;
-  color: var(--color-disabled02);
-  fill: var(--color-disabled01);
-  pointer-events: none;
-}
-
-/* PLACEHOLDER */
-input::placeholder,
-textarea::placeholder {
-  color: var(--color-text05);
-}
-
-::-webkit-textarea-placeholder {
-  color: var(--color-text05);
-}
-
-:-ms-textarea-placeholder {
-  color: var(--color-text05);
-}
-
-::placeholder {
-  color: var(--color-text05);
-}
-
-.text-wrapper > div {
-  position: relative;
-  z-index: 1;
-  fill: var(--color-icon02);
-}
-
-.text-wrapper > div > input {
-  width: 100%;
-  height: calc(var(--space-unit) * 5.5);
-  box-sizing: border-box;
-  padding: 0 calc(var(--space-unit) * 4.5) 0 calc(var(--space-unit) * 1.5);
-  margin: 0;
-}
-
-.text-wrapper > div > input.has-icon,
-.text-wrapper > div > input.has-clear-icon {
-  padding-right: calc(var(--space-unit) * 4);
-}
-
-.text-wrapper > div > input.has-icon.has-clear-icon {
-  padding-right: calc(var(--space-unit) * 7);
-}
-
-.text-wrapper .icons-wrapper {
-  position: absolute;
-  z-index: 2;
-  right: calc(var(--space-unit) * 1.5);
-  bottom: calc(var(--space-unit) * 1.5);
-  display: flex;
-}
-
-.text-wrapper .icons-wrapper > z-icon {
-  --z-icon-width: 18px;
-  --z-icon-height: 18px;
-
-  display: block;
-  margin-left: calc(var(--space-unit) * 0.5);
-}
-
-.text-wrapper .icons-wrapper > z-icon.reset-icon,
-.text-wrapper .icons-wrapper > z-icon.toggle-password-icon {
-  cursor: pointer;
-}
-
-/* Disable background color webkit */
-.text-wrapper > div > input:-webkit-autofill,
-.text-wrapper > div > input:-webkit-autofill:hover,
-.text-wrapper > div > input:-webkit-autofill:focus,
-.text-wrapper > div > input:-webkit-autofill:active {
-  background-clip: text !important;
-}
-
-.textarea-wrapper {
-  padding: calc(var(--space-unit) * 1.5);
-
-  /* Firefox scrollbar */
-  scrollbar-color: var(--color-primary01) transparent;
-}
-
-textarea::-webkit-scrollbar {
-  width: 10px;
-  background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);
-  border-radius: var(--border-radius);
-}
-
-textarea::-webkit-scrollbar-track {
-  background-color: transparent;
-}
-
-textarea::-webkit-scrollbar-thumb {
-  width: 10px;
-  background-color: var(--color-primary01);
-  border-radius: var(--border-radius);
-}
-
-textarea::-webkit-scrollbar-thumb:hover {
-  background-color: var(--color-hover-primary);
-}
-
-textarea {
-  width: 100%;
-  min-height: 132px;
-  padding: 0;
-  border: none;
-  margin: 0;
-  resize: none;
-}
-
-.radio-wrapper,
-.checkbox-wrapper {
-  position: relative;
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-  color: var(--color-text01);
-  fill: var(--color-primary01);
-  font-family: var(--font-family-sans);
-}
-
-.radio-wrapper:hover,
-.checkbox-wrapper:hover {
-  color: var(--color-hover-primary);
-  fill: currentcolor;
-}
-
-.radio-wrapper > input,
-.checkbox-wrapper > input {
-  position: absolute;
-  z-index: -1;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.radio-wrapper .radio-label,
-.checkbox-wrapper .checkbox-label {
-  display: inline-flex;
-  align-items: center;
-  margin: 0;
-  color: inherit;
-  font-family: inherit;
-  font-size: inherit;
-  font-weight: inherit;
-  line-height: 1;
-  text-transform: inherit;
-}
-
-.radio-wrapper input:not(:disabled) + .radio-label,
-.checkbox-wrapper input:not(:disabled) + .checkbox-label {
-  cursor: pointer;
-}
-
-.radio-wrapper .radio-label z-icon,
-.checkbox-wrapper .checkbox-label z-icon {
-  cursor: pointer;
-  fill: inherit;
-}
-
-.radio-wrapper .radio-label.after,
-.checkbox-wrapper .checkbox-label.after {
-  flex-direction: row;
-}
-
-.radio-wrapper .radio-label.before,
-.checkbox-wrapper .checkbox-label.before {
-  flex-direction: row-reverse;
-}
-
-.radio-wrapper .radio-label.after > span,
-.checkbox-wrapper .checkbox-label.after > span {
-  margin-left: var(--space-unit);
-}
-
-.radio-wrapper .radio-label.before > span,
-.checkbox-wrapper .checkbox-label.before > span {
-  margin-right: var(--space-unit);
-}
-
-/* focus */
-.radio-wrapper > input:focus:focus-visible + .radio-label > z-icon,
-.checkbox-wrapper > input:focus:focus-visible + .checkbox-label > z-icon {
-  border-radius: var(--border-radius-small);
-  box-shadow: var(--shadow-focus-primary);
-}
-
-/* disabled */
-.radio-wrapper > input:disabled + .radio-label,
-.checkbox-wrapper > input:disabled + .checkbox-label {
-  color: var(--color-disabled02);
-}
-
-.radio-wrapper > input:disabled + .radio-label > z-icon,
-.checkbox-wrapper > input:disabled + .checkbox-label > z-icon {
-  cursor: default;
-  fill: var(--color-disabled01);
-}
-

package/dist/collection/deprecated/z-input-label/index.js

@@ -1,78 +0,0 @@
-import { h } from "@stencil/core";
-export class ZInputLabel {
-  constructor() {
-    /** the label is disabled */
-    this.disabled = false;
-  }
-  render() {
-    return (h("label", { htmlFor: this.htmlfor, class: { disabled: this.disabled } }, this.value));
-  }
-  static get is() { return "z-input-label"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "value": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "the label value"
-        },
-        "attribute": "value",
-        "reflect": false
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "the label is disabled"
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "htmlfor": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "the label is attached to"
-        },
-        "attribute": "htmlfor",
-        "reflect": false
-      }
-    };
-  }
-}

package/dist/collection/deprecated/z-input-label/styles.css

@@ -1,16 +0,0 @@
-label {
-  display: block;
-  margin: var(--space-unit) 0;
-  color: var(--color-text02);
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-1);
-  font-weight: var(--font-sb);
-  letter-spacing: 0.32px;
-  line-height: 1.33;
-  text-align: left;
-  text-transform: uppercase;
-}
-
-label.disabled {
-  color: var(--color-disabled02);
-}

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

@@ -1,306 +0,0 @@
-import { h, Host } from "@stencil/core";
-import { PopoverPosition, PopoverBorderRadius, PopoverShadow, KeyboardCode } from "../../beans";
-import { getElementTree } from "../../utils/utils";
-export class ZPopoverDeprecated {
-  /**
-   * Constructor.
-   */
-  constructor() {
-    /** [optional] Popover position */
-    this.position = PopoverPosition.AFTER_UP;
-    /** [optional] Background color token for popover */
-    this.backgroundColor = "color-white";
-    /** [optional] Border radius token for popover */
-    this.borderRadius = PopoverBorderRadius.SMALL;
-    /** [optional] Box shadow token for popover */
-    this.boxShadow = PopoverShadow.SHADOW_1;
-    /** [optional] Show or hide arrow */
-    this.showArrow = false;
-    /** [optional] Sets padding for Popover container */
-    this.padding = "8px";
-    this.isVisible = false;
-    this.popoverPosition = this.position;
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-  }
-  emitTriggerClick() {
-    this.triggerClick.emit({
-      isVisible: this.isVisible,
-    });
-  }
-  openPopover() {
-    const width = document.body.clientWidth;
-    const height = window.innerHeight;
-    const rect = this.popoverElem.getBoundingClientRect();
-    const l = rect.left;
-    const r = rect.right;
-    const t = rect.top;
-    const b = rect.bottom;
-    let firstSide = this.position.split("-")[0];
-    let secondSide = this.position.split("-")[1];
-    // If top is outside viewport
-    if (t < 0) {
-      if (this.position.startsWith("above")) {
-        firstSide = "below";
-      }
-      else {
-        secondSide = "down";
-      }
-    }
-    // If bottom is outside viewport
-    if (b > height) {
-      if (this.position.startsWith("below")) {
-        firstSide = "above";
-      }
-      else {
-        secondSide = "up";
-      }
-    }
-    // If right is outside viewport
-    if (r > width) {
-      if (this.position.startsWith("above") || this.position.startsWith("below")) {
-        secondSide = "left";
-      }
-      else {
-        firstSide = "before";
-      }
-    }
-    // If left is outside viewport
-    if (l < 0) {
-      if (this.position.startsWith("above") || this.position.startsWith("below")) {
-        secondSide = "right";
-      }
-      else {
-        firstSide = "after";
-      }
-    }
-    this.popoverPosition = PopoverPosition[`${firstSide}-${secondSide}`];
-    this.isVisible = true;
-  }
-  closePopover() {
-    this.popoverPosition = this.position;
-    this.isVisible = false;
-  }
-  closePopoverWithKeyboard(e) {
-    if (e.key === KeyboardCode.ESC) {
-      this.closePopover();
-    }
-  }
-  handleClick(event) {
-    this.isVisible ? this.closePopover() : this.openPopover();
-    this.emitTriggerClick();
-    event.stopPropagation();
-  }
-  handleKeyDown(event) {
-    if (event.code === KeyboardCode.ENTER) {
-      this.isVisible ? this.closePopover() : this.openPopover();
-    }
-  }
-  handleOutsideClick(e) {
-    const tree = getElementTree(e.target);
-    const parent = tree.find((elem) => elem.nodeName.toLowerCase() === "z-popover-deprecated");
-    if (!parent) {
-      this.closePopover();
-    }
-  }
-  render() {
-    return (h(Host, { onKeyDown: this.handleKeyDown }, h("div", { tabindex: "0", onClick: (event) => this.handleClick(event), onKeyDown: (event) => {
-        if (event.key === KeyboardCode.ENTER) {
-          this.handleClick(event);
-        }
-      } }, h("slot", { name: "trigger" })), h("div", { ref: (e) => (this.popoverElem = e), class: {
-        "popover-content-container": true,
-        [this.popoverPosition]: true,
-        [`border-radius-${this.borderRadius}`]: true,
-        [this.boxShadow]: true,
-        "show-arrow": this.showArrow,
-        "visible": this.isVisible,
-      }, style: {
-        backgroundColor: `var(--${this.backgroundColor})`,
-        padding: this.padding,
-      } }, h("slot", { name: "popover" }))));
-  }
-  static get is() { return "z-popover-deprecated"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "position": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "PopoverPosition",
-          "resolved": "PopoverPosition.ABOVE_CENTER | PopoverPosition.ABOVE_LEFT | PopoverPosition.ABOVE_RIGHT | PopoverPosition.AFTER_CENTER | PopoverPosition.AFTER_DOWN | PopoverPosition.AFTER_UP | PopoverPosition.BEFORE_CENTER | PopoverPosition.BEFORE_DOWN | PopoverPosition.BEFORE_UP | PopoverPosition.BELOW_CENTER | PopoverPosition.BELOW_LEFT | PopoverPosition.BELOW_RIGHT",
-          "references": {
-            "PopoverPosition": {
-              "location": "import",
-              "path": "../../beans"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "[optional] Popover position"
-        },
-        "attribute": "position",
-        "reflect": false,
-        "defaultValue": "PopoverPosition.AFTER_UP"
-      },
-      "backgroundColor": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "[optional] Background color token for popover"
-        },
-        "attribute": "background-color",
-        "reflect": false,
-        "defaultValue": "\"color-white\""
-      },
-      "borderRadius": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "PopoverBorderRadius",
-          "resolved": "PopoverBorderRadius.MEDIUM | PopoverBorderRadius.NONE | PopoverBorderRadius.SMALL",
-          "references": {
-            "PopoverBorderRadius": {
-              "location": "import",
-              "path": "../../beans"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "[optional] Border radius token for popover"
-        },
-        "attribute": "border-radius",
-        "reflect": false,
-        "defaultValue": "PopoverBorderRadius.SMALL"
-      },
-      "boxShadow": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "PopoverShadow",
-          "resolved": "PopoverShadow.SHADOW_1 | PopoverShadow.SHADOW_12 | PopoverShadow.SHADOW_16 | PopoverShadow.SHADOW_2 | PopoverShadow.SHADOW_24 | PopoverShadow.SHADOW_3 | PopoverShadow.SHADOW_4 | PopoverShadow.SHADOW_6 | PopoverShadow.SHADOW_8",
-          "references": {
-            "PopoverShadow": {
-              "location": "import",
-              "path": "../../beans"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "[optional] Box shadow token for popover"
-        },
-        "attribute": "box-shadow",
-        "reflect": false,
-        "defaultValue": "PopoverShadow.SHADOW_1"
-      },
-      "showArrow": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "[optional] Show or hide arrow"
-        },
-        "attribute": "show-arrow",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "padding": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "[optional] Sets padding for Popover container"
-        },
-        "attribute": "padding",
-        "reflect": false,
-        "defaultValue": "\"8px\""
-      }
-    };
-  }
-  static get states() {
-    return {
-      "isVisible": {},
-      "popoverPosition": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "triggerClick",
-        "name": "triggerClick",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted on popover click, returns isVisible state"
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "closePopover",
-        "method": "closePopover",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "keyup",
-        "method": "closePopoverWithKeyboard",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "click",
-        "method": "handleOutsideClick",
-        "target": "body",
-        "capture": true,
-        "passive": false
-      }];
-  }
-}