@zanichelli/albe-web-components 2.33.4 → 2.33.5-rc1

package/dist/collection/components/inputs/z-input/styles.css

@@ -1,304 +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,
-.textareaWrapper,
-ul[role="listbox"] {
-  background: var(--color-input-field01);
-  border-radius: var(--border-radius-small);
-  border: var(--border-size-small) solid var(--color-surface04);
-  box-sizing: border-box;
-  color: var(--color-text02);
-  fill: var(--color-icon02);
-  font-family: var(--font-family-sans);
-  font-weight: var(--font-rg);
-  font-size: var(--font-size-3);
-  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);
-}
-
-/* TYPING */
-.istyping,
-.focus.istyping,
-.input_selecting {
-  border-color: var(--color-primary01);
-  color: var(--color-primary01);
-}
-
-/* STATUSES (success, warning, error) */
-.input_success,
-.input_success:hover,
-.input_success.hover {
-  background: var(--color-success-inverse);
-  border-color: var(--color-success01);
-  fill: var(--color-success01);
-}
-
-.input_error,
-.input_error:hover,
-.input_error.hover {
-  background: var(--color-error-inverse);
-  border-color: var(--color-error01);
-  fill: var(--color-error01);
-}
-
-.input_warning,
-.input_warning:hover,
-.input_warning.hover {
-  background: var(--color-warning-inverse);
-  border-color: var(--color-warning01);
-  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);
-  color: var(--color-disabled02);
-  fill: var(--color-disabled01);
-  pointer-events: none;
-  box-shadow: none;
-}
-
-/* PLACEHOLDER */
-input::placeholder,
-textarea::placeholder {
-  color: var(--color-text05);
-}
-
-::-webkit-input-placeholder,
-::-webkit-textarea-placeholder {
-  color: var(--color-text05);
-}
-
-:-ms-input-placeholder,
-:-ms-textarea-placeholder {
-  color: var(--color-text05);
-}
-
-::-moz-placeholder {
-  color: var(--color-text05);
-}
-
-:-moz-placeholder {
-  color: var(--color-text05);
-}
-
-.textWrapper > div {
-  fill: var(--color-icon02);
-}
-
-.textWrapper > div > input {
-  width: 100%;
-  height: calc(var(--space-unit) * 5.5);
-  margin: 0;
-  padding: 0 calc(var(--space-unit) * 4.5) 0 calc(var(--space-unit) * 1.5);
-  box-sizing: border-box;
-}
-
-.textWrapper > div > input.hasIcon,
-.textWrapper > div > input.hasClearIcon {
-  padding-right: calc(var(--space-unit) * 4);
-}
-
-.textWrapper > div > input.hasIcon.hasClearIcon {
-  padding-right: calc(var(--space-unit) * 7);
-}
-
-.textWrapper > div {
-  position: relative;
-  z-index: 1;
-}
-
-.textWrapper .iconsWrapper {
-  position: absolute;
-  bottom: calc(var(--space-unit) * 1.5);
-  right: calc(var(--space-unit) * 1.5);
-  display: flex;
-  z-index: 2;
-}
-
-.textWrapper .iconsWrapper > z-icon {
-  --z-icon-width: 18px;
-  --z-icon-height: 18px;
-
-  display: block;
-  margin-left: calc(var(--space-unit) * 0.5);
-}
-
-.textWrapper .iconsWrapper > z-icon.resetIcon,
-.textWrapper .iconsWrapper > z-icon.showHidePasswordIcon {
-  cursor: pointer;
-}
-
-/* Disable background color webkit */
-.textWrapper > div > input:-webkit-autofill,
-.textWrapper > div > input:-webkit-autofill:hover,
-.textWrapper > div > input:-webkit-autofill:focus,
-.textWrapper > div > input:-webkit-autofill:active {
-  -webkit-background-clip: text !important;
-}
-
-.textareaWrapper {
-  padding: calc(var(--space-unit) * 1.5);
-
-  /* Firefox scrollbar */
-  scrollbar-color: var(--color-primary01) transparent;
-}
-
-textarea::-webkit-scrollbar {
-  background: linear-gradient(
-    to right,
-    transparent 0 3px,
-    var(--gray200) 3px 7px,
-    transparent 7px 10px
-  );
-  width: 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 {
-  min-height: 132px;
-  width: 100%;
-  margin: 0;
-  padding: 0;
-  border: none;
-  resize: none;
-}
-
-.radioWrapper,
-.checkboxWrapper {
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-  font-family: var(--font-family-sans);
-  position: relative;
-  color: var(--color-text01);
-  fill: var(--color-primary01);
-}
-
-.radioWrapper:hover,
-.checkboxWrapper:hover {
-  color: var(--color-hover-primary);
-  fill: currentColor;
-}
-
-.radioWrapper > input,
-.checkboxWrapper > input {
-  position: absolute;
-  opacity: 0;
-  z-index: -1;
-  pointer-events: none;
-}
-
-.radioWrapper .radioLabel,
-.checkboxWrapper .checkboxLabel {
-  display: inline-flex;
-  align-items: center;
-  margin: 0;
-  line-height: 1;
-  color: inherit;
-  font-family: inherit;
-  font-weight: inherit;
-  font-size: inherit;
-  text-transform: inherit;
-}
-
-.radioWrapper input:not(:disabled) + .radioLabel,
-.checkboxWrapper input:not(:disabled) + .checkboxLabel {
-  cursor: pointer;
-}
-
-.radioWrapper .radioLabel z-icon,
-.checkboxWrapper .checkboxLabel z-icon {
-  fill: inherit;
-  cursor: pointer;
-}
-
-.radioWrapper .radioLabel.after,
-.checkboxWrapper .checkboxLabel.after {
-  flex-direction: row;
-}
-
-.radioWrapper .radioLabel.before,
-.checkboxWrapper .checkboxLabel.before {
-  flex-direction: row-reverse;
-}
-
-.radioWrapper .radioLabel.after > span,
-.checkboxWrapper .checkboxLabel.after > span {
-  margin-left: var(--space-unit);
-}
-
-.radioWrapper .radioLabel.before > span,
-.checkboxWrapper .checkboxLabel.before > span {
-  margin-right: var(--space-unit);
-}
-
-/* focus */
-.radioWrapper > input:focus:focus-visible + .radioLabel > z-icon,
-.checkboxWrapper > input:focus:focus-visible + .checkboxLabel > z-icon {
-  box-shadow: var(--shadow-focus-primary);
-  border-radius: var(--border-radius-small);
-}
-
-/* disabled */
-.radioWrapper > input:disabled + .radioLabel,
-.checkboxWrapper > input:disabled + .checkboxLabel {
-  color: var(--color-disabled02);
-}
-
-.radioWrapper > input:disabled + .radioLabel > z-icon,
-.checkboxWrapper > input:disabled + .checkboxLabel > z-icon {
-  fill: var(--color-disabled01);
-  cursor: default;
-}
-

package/dist/collection/components/inputs/z-input-label/index.js

@@ -1,72 +0,0 @@
-import { Component, Prop, 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/components/inputs/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);
-  line-height: 1.33;
-  letter-spacing: 0.32px;
-  text-transform: uppercase;
-  text-align: left;
-}
-
-label.disabled {
-  color: var(--color-disabled02);
-}

package/dist/collection/components/inputs/z-input-message/index.js

@@ -1,64 +0,0 @@
-import { Component, Prop, h, Host } from "@stencil/core";
-export class ZInputMessage {
-  constructor() {
-    this.statusIcons = {
-      success: "checkmark-circle",
-      error: "multiply-circled",
-      warning: "exclamation-circle",
-    };
-  }
-  render() {
-    return (h(Host, { role: "alert", "aria-label": this.message, tabindex: this.message ? 0 : -1 },
-      this.statusIcons[this.status] && this.message && (h("z-icon", { name: this.statusIcons[this.status] })),
-      h("span", { innerHTML: this.message })));
-  }
-  static get is() { return "z-input-message"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get properties() { return {
-    "message": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "input helper message"
-      },
-      "attribute": "message",
-      "reflect": false
-    },
-    "status": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "InputStatusBean",
-        "resolved": "\"error\" | \"selecting\" | \"success\" | \"warning\"",
-        "references": {
-          "InputStatusBean": {
-            "location": "import",
-            "path": "../../../beans"
-          }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "input status (optional)"
-      },
-      "attribute": "status",
-      "reflect": true
-    }
-  }; }
-}

package/dist/collection/components/inputs/z-input-message/styles.css

@@ -1,33 +0,0 @@
-:host {
-  display: flex;
-  align-items: start;
-  min-height: calc(var(--space-unit) * 2);
-  margin-top: var(--space-unit);
-  color: var(--color-text05);
-  fill: currentColor;
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-2);
-  letter-spacing: 0.16px;
-}
-
-:host([status='success']) {
-  color: var(--color-text-success);
-}
-
-:host([status='error']) {
-  color: var(--color-text-error);
-}
-
-:host([status='warning']) {
-  color: var(--color-warning02);
-}
-
-:host(:focus) {
-  outline: none;
-}
-
-:host > z-icon {
-  --z-icon-width: calc(var(--space-unit) * 2);
-  --z-icon-height: calc(var(--space-unit) * 2);
-  margin: calc(var(--space-unit) / 3) var(--space-unit) 0 0
-}