@zanichelli/albe-web-components 2.33.1 → 2.33.3

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

@@ -0,0 +1,304 @@
+: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

@@ -0,0 +1,72 @@
+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

@@ -0,0 +1,16 @@
+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

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

@@ -0,0 +1,33 @@
+: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
+}