@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-08202.0

package/dist/collection/components/ez-check/ez-check.css

@@ -0,0 +1,366 @@
+:host {
+
+  /***************
+     Regular mode
+  ***************/
+  /*dimensions */
+  /*@doc Define a largura do box do checkbox.*/
+  --ez-check--box--width: 20px;
+  /*@doc Define a altura do box do checkbox.*/
+  --ez-check--box--height: 20px;
+  /*@doc Define a largura do input do checkbox.*/
+  --ez-check--width: calc(var(--ez-check--box--width) + var(--ez-check--outter-gap, 14px));
+  /*@doc Define a altura do input do checkbox */
+  --ez-check--height: calc(var(--ez-check--box--width) + var(--ez-check--outter-gap, 14px));
+
+  /*general*/
+  /*@doc Define o raio da borda do input do checkbox.*/
+  --ez-check--border-radius: var(--border--radius-small);
+
+  /*box*/
+  /*@doc Define a cor de fundo do input do checkbox quando marcado.*/
+  --ez-check--checked--background-color: var(--color--primary-200);
+  /*@doc Define a cor de fundo do input do checkbox quando focado.*/
+  --ez-check--focus--background-color: var(--color--strokes, #FFFFFF);
+  /*@doc Define a cor de fundo do input do checkbox quando o cursor está sobre ele.*/
+  --ez-check--hover--background-color: var(--background--medium);
+  /*@doc Define a cor de fundo do input do checkbox quando marcado e desabilitado.*/
+  --ez-check--checked--disabled--background-color: var(--color--disable-secondary);
+
+  /*@doc Define o estilo da borda do input do checkbox.*/
+  --ez-check--border: var(--border--medium) var(--title--primary);
+  /*@doc Define o estilo da borda do input do checkbox quando desabilitado.*/
+  --ez-check--disabled--border: var(--border--medium) var(--color--strokes);
+  /*@doc Define o estilo da borda do input do checkbox quando marcado.*/
+  --ez-check--checked--border: var(--border--medium) var(--color--primary);
+
+
+  /*@doc Define a cor de fundo do input do checkbox quando ativo e com o cursor sobre ele.*/
+  --ez-check--checked--hover--background-color: var(--color--primary-200);
+  /*@doc Define a cor de fundo do input do checkbox quando ativo e focado.*/
+  --ez-check--checked--focus--background-color: var(--color--primary-300, #FFFFFF);
+
+  /*check*/
+  /*@doc Contém o ícone do input marcado.*/
+  --ez-check--check--image: url('data:image/svg+xml;utf8,<svg width="8" height="7" viewBox="0 0 8 7" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M7.70002 0.398999L7.48502 0.207997C7.31524 0.0598858 7.09376 -0.0150438 6.86894 -0.000430025C6.64411 0.0141838 6.43419 0.117153 6.28502 0.285997L2.70002 4.332L1.61802 3.384C1.44837 3.23576 1.22697 3.16067 1.00214 3.17509C0.77732 3.18952 0.567332 3.2923 0.418019 3.461L0.229019 3.674C0.0752361 3.84797 -0.00437434 4.07521 0.00721192 4.30713C0.0187982 4.53904 0.120661 4.75722 0.291019 4.915L2.27402 6.762C2.35832 6.8432 2.45842 6.90618 2.56811 6.94702C2.67779 6.98787 2.79471 7.00571 2.91159 6.99942C3.02846 6.99314 3.14279 6.96287 3.24747 6.91049C3.35214 6.85812 3.44492 6.78477 3.52002 6.695L7.79102 1.638C7.94063 1.46048 8.01486 1.23149 7.99786 0.999963C7.98085 0.768436 7.87396 0.552749 7.70002 0.398999Z"/></svg>');
+  /*@doc Ícone usado para o estado "indeterminado" do componente.*/
+  --ez-check--indeterminate--image: url('data:image/svg+xml;utf8,<svg width="10" height="2" viewBox="0 0 10 2" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="m 1,0 h 8 c 0.554,0 1,0.446 1,1 0,0.554 -0.446,1 -1,1 H 1 C 0.446,2 0,1.554 0,1 0,0.446 0.446,0 1,0 Z" /></svg>');
+  /*@doc Define a cor de fundo do slot do ícone quando marcado.*/
+  --ez-check--check--background-color: var(--color--primary);
+  /*@doc Define a cor de fundo do slot do ícone quando marcado e desabilitado.*/
+  --ez-check--check--disabled--background-color: var(--color--strokes);
+
+  /***************
+    Switch mode
+  ***************/
+  /*dimensions */
+  /*@doc Define a largura do slider do checkbox.*/
+  --ez-switch--slider--width: 34px;
+  /*@doc Define a altura do slider do checkbox.*/
+  --ez-switch--slider--height: 14px;
+  /*@doc Define a largura do pino do slider do checkbox.*/
+  --ez-switch--pin--width: 19px;
+  /*@doc Define a altura do pino do slider do checkbox.*/
+  --ez-switch--pin--height: 19px;
+  /*@doc Define a largura do slider quando focado.*/
+  --ez-switch--focus--width: 32px;
+  /*@doc Define a altura do slider quando focado.*/
+  --ez-switch--focus--height: 32px;
+
+  /*background*/
+  /*@doc Define a cor de fundo do checkbox no modo switch.*/
+  --ez-switch--background-color: var(--color--strokes);
+  /*@doc Define a cor de fundo do checkbox desabilitado no modo switch.*/
+  --ez-switch--disabled--background-color: var(--color--disable-secondary);
+  /*@doc Define a cor de fundo do checkbox marcado no modo switch.*/
+  --ez-switch--disabled--checked--background-color: var(--color--primary-300);
+  /*@doc Define a cor de fundo do checkbox marcado no modo switch.*/
+  --ez-switch--checked--background-color: var(--color--primary);
+
+  /*pin*/
+  /*@doc Define a cor de fundo do pino do slider. */
+  --ez-switch--pin--background-color: var(--background--xlight);
+  /*@doc Define a cor de fundo do pino do slider quando desabilitado. */
+  --ez-switch--pin--disabled--background-color: var(--color--disable-primary);
+  /*@doc Define a cor de fundo do pino do slider quando marcado. */
+  --ez-switch--pin--checked--background-color: var(--background--xlight);
+  /*@doc Define a cor de fundo do pino do slider quando marcado e desabilitado1. */
+  --ez-switch--pin--checked--disabled--background-color: #E8F7F4;
+  /*@doc Define a cor de fundo do pino do slider quando focado. */
+  --ez-switch--pin--focus--background-color: var(--text--disable);
+  /*@doc Define a cor de fundo do pino do slider quando marcado e focado. */
+  --ez-switch--pin--checked--focus--background-color: var(--color--primary);
+
+  /*@doc Define a cor da borda do pino do slider. */
+  --ez-switch--pin--border-color: var(--text--primary);
+  /*@doc Define a cor da borda do pino do slider quando desabilitado. */
+  --ez-switch--pin--disabled--border-color: var(--text--secondary);
+
+  /*@doc Define o tamanho da fonte do label.*/
+  --ez-check--label--font-size: var(--text--medium, 14px);
+  /*@doc Define a família da fonte do label.*/
+  --ez-check--label--font-family: var(--font-pattern, Arial);
+  /*@doc Define a cor da fonte do label.*/
+  --ez-check--label--color: var(--title--primary, #000);
+  /*@doc Define a cor da fonte do label quando desabilitado.*/
+  --ez-check--label--disabled--color: var(--text--disable, #AFB6C0);
+
+  /***************
+     host style  
+  ***************/
+  /*private*/
+  display: flex;
+  align-items: center;
+  margin: 0;
+}
+
+/******** REGULAR MODE ********/
+/*---------------------------unchecked------------------------------*/
+input.regular-mode {
+  /*private*/
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  -webkit-appearance: none;
+  appearance: none;
+  cursor: pointer;
+  border-radius: 50%;
+  position: relative;
+
+
+  /*public*/
+  width: var(--ez-check--width);
+  height: var(--ez-check--height);
+}
+
+input.compact{
+  margin-right: 0px;
+}
+
+input.regular-mode:enabled:hover {
+  /*public*/
+  background-color: var(--ez-check--hover--background-color);
+}
+
+input.regular-mode:enabled:focus {
+  /*private*/
+  outline: none;
+
+  /*public*/
+  background-color: var(--ez-check--focus--background-color);
+}
+
+input.regular-mode:disabled {
+  /*private*/
+  cursor: auto;
+  background: none;
+}
+
+input.regular-mode::before {
+  /*private*/
+  box-sizing: border-box;
+  content: "";
+  display: block;
+
+  /*public*/
+  width: var(--ez-check--box--width);
+  height: var(--ez-check--box--height);
+  border-radius: var(--ez-check--border-radius);
+  border: var(--ez-check--border);
+}
+
+input.regular-mode:disabled::before {
+  /*public*/
+  border: var(--ez-check--disabled--border);
+}
+
+/*-------------------------------checked---------------------------------*/
+input.regular-mode:checked:enabled:hover, input.regular-mode:indeterminate:enabled:hover {
+  /*public*/
+  background-color: var(--ez-check--checked--hover--background-color);
+}
+
+input.regular-mode:checked:enabled:focus, input.regular-mode:indeterminate:enabled:focus {
+  /*public*/
+  background-color: var(--ez-check--checked--focus--background-color);
+}
+
+input.regular-mode:checked::before, input.regular-mode:indeterminate::before {
+  /*public*/
+  border: var(--ez-check--checked--border);
+  background-color: var(--ez-check--checked--background-color);
+}
+
+input.regular-mode:disabled:before {
+  /*public*/
+  border: var(--ez-check--disabled--border);
+  background-color: var(--ez-check--checked--disabled--background-color);
+}
+
+input.regular-mode:checked::after, input.regular-mode:indeterminate:after {
+  /*private*/
+  display: flex;
+  position: absolute;
+  content: "";
+  background-color: var(--ez-check--check--background-color);
+  width: 8px;
+  height: 7px;
+
+  /*public*/
+  -webkit-mask-image: var(--ez-check--check--image);
+  mask-image: var(--ez-check--check--image);
+}
+
+input.regular-mode:indeterminate:after {
+  /*private*/
+  display: flex;
+  position: absolute;
+  content: "";
+  background-color: var(--ez-check--check--background-color);
+  width: 10px;
+  height: 2px;
+
+  /*public*/
+  -webkit-mask-image: var(--ez-check--indeterminate--image);
+  mask-image: var(--ez-check--indeterminate--image);
+}
+
+input.regular-mode:checked:disabled::after, input.regular-mode:indeterminate:disabled::after{
+  /*public*/
+  background-color: var(--ez-check--check--disabled--background-color);
+}
+
+/******** SWITCH MODE ********/
+/*-------------------------------OFF---------------------------------*/
+input.switch-mode {
+  /*private*/
+  flex-shrink: 0;
+  -webkit-appearance: none;
+  appearance: none;
+  position: relative;
+  outline: none;
+  cursor: pointer;
+  border-radius: 20px;
+  border: var(--border--small, 1px solid) var(--ez-switch--pin--border-color, #626e82);
+  transition: background-color var(--transition);
+
+  /*public*/
+  width: var(--ez-switch--slider--width);
+  height: var(--ez-switch--slider--height);
+  background-color: var(--ez-switch--background-color);
+}
+
+input.switch-mode:disabled {
+  /*public*/
+  background-color: var(--ez-switch--disabled--background-color);
+  border: var(--border--small, 1px solid) var(--ez-switch--pin--disabled--border-color, #a2abb9);
+}
+
+input.switch-mode:checked:disabled {
+  /*public*/
+  background-color: var(--ez-switch--disabled--checked--background-color);
+}
+
+input.switch-mode::after {
+  /*private*/
+  content: "";
+  display: block;
+  position: absolute;
+  box-shadow: var(--shadow);
+  transition: transform var(--transition);
+  transition: background-color var(--transition);
+  transition: border-color var(--transition);
+  transform: translateX(-2px) translateY(-4px);
+  border-radius: 50%;
+  border: var(--border--small, 1px solid) var(--ez-switch--pin--border-color, #626e82);
+
+  /*public*/
+  width: var(--ez-switch--pin--width);
+  height: var(--ez-switch--pin--height);
+  background-color: var(--ez-switch--pin--background-color);
+}
+
+input.switch-mode:disabled::after {
+  /*public*/
+  background-color: var(--ez-switch--pin--disabled--background-color);
+  border: var(--border--small, 1px solid) var(--ez-switch--pin--disabled--border-color, #a2abb9);
+}
+
+/*-------------------------------ON---------------------------------*/
+input.switch-mode:checked {
+  /*private*/
+  transition: background-color var(--transition), border var(--transition);
+
+  /*public*/
+  background-color: var(--ez-switch--checked--background-color);
+  border: var(--border--small, 1px solid) var(--color--primary, #008561);
+}
+
+input.switch-mode::before {
+  /*private*/
+  display: block;
+  content: "";
+  display: block;
+  position: absolute;
+  border-radius: 50%;
+  opacity: 0;
+
+  /*public*/
+  width: var(--ez-switch--focus--width);
+  height: var(--ez-switch--focus--height);
+  top: calc((var(--ez-switch--slider--height) - var(--ez-switch--focus--height)) / 2);
+  left: calc((var(--ez-switch--pin--width) - var(--ez-switch--focus--width) - 2px) / 2);
+  background-color: var(--ez-switch--pin--focus--background-color);
+}
+
+input.switch-mode:focus::before {
+  /*private*/
+  opacity: 0.24;
+  transition: opacity var(--transition);
+}
+
+input.switch-mode:checked:focus::before {
+  /*private*/
+  background-color: var(--ez-switch--pin--checked--focus--background-color);
+  transform: translateX(calc(var(--ez-switch--slider--width) - var(--ez-switch--pin--width) + 2px));
+}
+
+input.switch-mode:checked::after {
+  /*private*/
+  transition: transform var(--transition);
+  transition: background-color var(--transition);
+  transition: border-color var(--transition);
+  transform: translateX(calc(var(--ez-switch--slider--width) - var(--ez-switch--pin--width))) translateY(-4px);
+  box-shadow: var(--shadow);
+
+  /*public*/
+  background-color: var(--ez-switch--pin--checked--background-color);
+  border: var(--border--small, 1px solid) var(--color--primary, #008561);
+}
+
+input.switch-mode:checked:disabled::after {
+  /*public*/
+  background-color: var(--ez-switch--pin--checked--disabled--background-color);
+}
+
+.label {
+  flex-shrink: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--ez-check--label--color);
+  font-size: var(--ez-check--label--font-size);
+  font-family: var(--ez-check--label--font-family);
+  cursor: default;
+  width: inherit;
+}
+
+.label--disabled {
+  color: var(--ez-check--label--disabled--color);
+}
+
+.label--padding {
+  padding-left: var(--space--small);
+}

package/dist/collection/components/ez-check/ez-check.js

@@ -0,0 +1,272 @@
+import { ElementIDUtils } from '@sankhyalabs/core';
+import { h, Host } from '@stencil/core';
+import { CheckMode } from './CheckMode';
+export class EzCheck {
+  constructor() {
+    this.label = undefined;
+    this.value = undefined;
+    this.enabled = true;
+    this.indeterminate = undefined;
+    this.mode = CheckMode.REGULAR;
+    this.compact = false;
+  }
+  observeValue(newValue, oldValue) {
+    if (!this._inputElem)
+      return;
+    if (newValue != oldValue) {
+      this._inputElem.checked = newValue;
+    }
+    if (this._inputElem.indeterminate != this.indeterminate) {
+      this._inputElem.indeterminate = this.indeterminate;
+    }
+  }
+  observeIndeterminate(newValue, oldValue) {
+    if (!this._inputElem)
+      return;
+    if (newValue != oldValue) {
+      this._inputElem.indeterminate = newValue;
+    }
+  }
+  //---------------------------------------------
+  // Public methods
+  //---------------------------------------------
+  /**
+   * Obtém o modo escolhido.
+   */
+  async getMode() {
+    return CheckMode[this.mode];
+  }
+  /**
+   * Aplica o foco no campo.
+   */
+  async setFocus() {
+    this._inputElem.focus();
+  }
+  componentDidLoad() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element, 'input');
+    }
+  }
+  changeValue() {
+    if (!this.enabled) {
+      return;
+    }
+    this.value = !this.value;
+    this.ezChange.emit(this.value);
+  }
+  getLabelClasses() {
+    const classes = ["label"];
+    if (!this.enabled) {
+      classes.push("label--disabled");
+    }
+    if (!this.compact) {
+      classes.push("label--padding");
+    }
+    return classes.join(" ");
+  }
+  getInputClasses() {
+    var _a;
+    const classes = [""];
+    classes.push(((_a = this.mode) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === CheckMode.SWITCH ? "switch-mode" : "regular-mode");
+    if (this.compact)
+      classes.push("compact");
+    return classes.join(" ");
+  }
+  render() {
+    return (h(Host, null, h("input", { type: "checkbox", ref: (el) => this._inputElem = el, class: this.getInputClasses(), checked: this.value === true, onChange: () => { this.changeValue(); }, indeterminate: this.indeterminate, disabled: !this.enabled, "data-element-id": ElementIDUtils.getInternalIDInfo("input") }), this.label ? h("label", { class: this.getLabelClasses(), onClick: () => { this.changeValue(); }, title: this.label }, this.label) : undefined));
+  }
+  static get is() { return "ez-check"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-check.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-check.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Texto a ser apresentado como t\u00EDtulo do campo."
+        },
+        "attribute": "label",
+        "reflect": true
+      },
+      "value": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o valor do campo."
+        },
+        "attribute": "value",
+        "reflect": true
+      },
+      "enabled": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se false o usu\u00E1rio n\u00E3o pode interagir com o campo."
+        },
+        "attribute": "enabled",
+        "reflect": true,
+        "defaultValue": "true"
+      },
+      "indeterminate": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true ativa o estado indeterminado, nem marcado nem desmarcado (n\u00E3o dispon\u00EDvel em modo `switch`)."
+        },
+        "attribute": "indeterminate",
+        "reflect": true
+      },
+      "mode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "CheckMode",
+          "resolved": "CheckMode.REGULAR | CheckMode.SWITCH",
+          "references": {
+            "CheckMode": {
+              "location": "import",
+              "path": "./CheckMode"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o modo de visualiza\u00E7\u00E3o do ez-check."
+        },
+        "attribute": "mode",
+        "reflect": true,
+        "defaultValue": "CheckMode.REGULAR"
+      },
+      "compact": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o modo compacto com espa\u00E7amento menor entre label e o input"
+        },
+        "attribute": "compact",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "ezChange",
+        "name": "ezChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando acontece a altera\u00E7\u00E3o de valor do campo."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "getMode": {
+        "complexType": {
+          "signature": "() => Promise<CheckMode>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "CheckMode": {
+              "location": "import",
+              "path": "./CheckMode"
+            }
+          },
+          "return": "Promise<CheckMode>"
+        },
+        "docs": {
+          "text": "Obt\u00E9m o modo escolhido.",
+          "tags": []
+        }
+      },
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Aplica o foco no campo.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "_element"; }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "observeValue"
+      }, {
+        "propName": "indeterminate",
+        "methodName": "observeIndeterminate"
+      }];
+  }
+}