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

package/dist/collection/components/ez-radio-button/ez-radio-button.css

@@ -0,0 +1,217 @@
+:host {
+ 
+  /* Título do radio */
+  /*@doc Define a família da fonte do label.*/
+  --ez-radio-button--font-family: var(--font-pattern, Arial);
+  /*@doc Define o tamanho do label.*/
+  --ez-radio-button--font-size:  var(--text--medium, 14px);
+  /*@doc Define o peso da fonte do label.*/
+  --ez-radio-button--font-weight: var(--text-weight--large);
+  /*@doc Define a cor do texto.*/
+  --ez-radio-button--font-color: var(--title--primary, #2B3A54);
+  /*@doc Define o espaço superior e inferior da lista de opções.*/
+  --ez-radio-button--padding-vertical: var(--space--medium, 12px);
+  /*@doc Define o espaço lateral da lista de opções.*/
+  --ez-radio-button--padding-horizontal: var(--space--small, 6px);
+  
+  /* Label itens do radio */
+  /*@doc Define a família da fonte do label. */
+  --ez-radio-button__form-label--font-family: var(--font-pattern, Arial);
+  /*@doc Define o peso da fonte do label. */
+  --ez-radio-button__form-label--font-weight: var(--text-weight--medium, 400);
+  /*@doc Define a cor do texto. */
+  --ez-radio-button__form-label--title-primary: var(--title--primary, #2B3A54);
+  /*@doc Define o tamanho do label. */
+  --ez-radio-button__form-label--font-size: var(--text--medium, 14px);
+  /*@doc Define o espaço lateral da lista de opções.*/
+  --ez-radio-button__form-label--padding-horizontal: var(--space--medium, 12px);
+
+  /* Colors */
+  /*@doc cor da borda do radio sem seleção (sem seleção / sem foco / sem hover / enabled) */
+  --ez-radio-button__form-radio--border-color: var(--title--primary, #2B3A54);
+  /*@doc cor do radio selecionado (com seleção / sem foco / sem hover / enabled) */
+  --ez-radio-button__form-radio--checked--color: var(--color--primary, #008561);
+  /*@doc cor da borda do radio quando está desativado (sem seleção / sem foco / sem hover / disabled) */
+  --ez-radio-button__form-radio--disabled--border-color: var(--color--strokes, #dce0e8);
+  /*@doc cor do background do radio quando está desativado (sem seleção / sem foco / sem hover / disabled) */
+  --ez-radio-button__form-radio--disabled--background-color: var(--background--medium, #f0f3f7);
+  /*@doc cor da label quando o radio está desativado (sem seleção / sem foco / sem hover / disabled) */
+  --ez-radio-button__form-radio--disabled--color: var(--color--strokes, #dce0e8);
+  /*@doc cor do centro do radio quando o radio está desativado (com seleção / sem foco / sem hover / disabled) */
+  --ez-radio-button__form-radio--disabled--before--background-color: var(--color--strokes, #dce0e8);
+  /*@doc cor do background quando o radio está ativado e sem seleção (sem seleção / com foco / sem hover / enabled) */
+  --ez-radio-button__form-radio--focus--background-color: var(--color--inverted, #fff);
+  /*@doc cor do box-shadow quando o radio está ativado e sem seleção (sem seleção / com foco / sem hover / enabled) */
+  --ez-radio-button__form-radio--checked--box-shadow-color: var(--background--strong, #e4eaf1);
+  /*@doc cor do background quando o radio está marcado e com foco (com seleção / com foco / sem hover / enabled) */
+  --ez-radio-button__form-radio--checked--focus--background-color: var(--color--inverted, #fff);
+  /*@doc cor do background quando o radio está marcado e com foco (com seleção / com foco / sem hover / enabled) */
+  --ez-radio-button__form-radio--checked--focus--box-shadow-color: var(--color--primary-300, #e2f4ef);
+  /*@doc cor do background quando o radio está marcado, com foco e com hover (com seleção / com foco / com hover / enabled) */
+  --ez-radio-button__form-radio--checked--hover--background-color: var(--color--inverted, #fff);
+  /*@doc cor do box-shadow quando o radio está marcado, com foco e com hover (com seleção / com foco / com hover / enabled) */
+  --ez-radio-button__form-radio--checked--hover--box-shadow-color: #daece7; /*d7e9e4*/
+  /*@doc cor do hover quando o radio está desmarcado (sem seleção / sem foco / com hover / enabled) */
+  --ez-radio-button__form-radio--hover--box-shadow-color: var(--color--strokes, #dce0e8);
+  /*@doc cor do fundo quando o radio está marcado e desativado (com seleção / sem foco / com hover / disabled) */
+  --ez-radio-button__form-radio--checked--disabled--hover--background-color: var(--background--medium, #f0f3f7);
+
+  /*private*/
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: flex-start;
+  box-sizing: border-box;
+}
+
+.form {
+  /*public*/
+  padding: var(--ez-radio-button--padding-vertical) var(--ez-radio-button--padding-horizontal);
+  gap: var(--ez-radio-button__form-label--padding-horizontal);
+}
+
+.form--vertical {
+  /*private*/
+  display: flex;
+  flex-direction: column;
+}
+
+.form--horizontal {
+  /*private*/
+  display: flex;
+  flex-direction: row; 
+}
+
+.form__group {
+  /*private*/
+  display: grid;
+  grid-template-columns: 20px auto;
+  align-items: center;
+}
+
+.label{
+  /*public*/
+  font-family: var(--ez-radio-button--font-family);
+  font-size: var(--ez-radio-button--font-size);
+  font-weight: var(--ez-radio-button--font-weight);  
+  color: var(--ez-radio-button--font-color);
+}
+
+.form__label{
+  /*private*/
+  cursor: pointer;
+  /*public*/
+  font-weight: var(--ez-radio-button__form-label--font-weight);  
+  color: var(--ez-radio-button__form-label--title-primary);
+  font-family: var(--ez-radio-button__form-label--font-family);
+  font-size: var(--ez-radio-button__form-label--font-size);
+  padding-left: var(--ez-radio-button__form-label--padding-horizontal);
+  padding-right: var(--ez-radio-button__form-label--padding-horizontal);
+}
+
+.form__radio {
+  /*private*/
+  cursor: pointer;
+  appearance: none;  
+  outline: none;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0;  
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  /*public*/
+  border: 2px solid var(--ez-radio-button__form-radio--border-color);
+}
+
+.form__radio::before {
+  /*private*/
+  content: '';
+  display: block;
+  position: absolute;
+  opacity: 0;
+  transition: all 300ms ease-in-out;
+  height: 100%;
+  width: 100%;
+  border-radius: 50%;
+  transform: scale(0.5);
+  /*public*/
+  background: var(--ez-radio-button__form-radio--checked--color);
+}
+
+.form__radio:checked:before {
+  /*private*/
+  opacity: 1;
+}
+
+.form__radio:checked{
+  /*public*/
+  border: 2px solid var(--ez-radio-button__form-radio--checked--color);
+}
+
+.form__radio:disabled{
+  /*private*/
+  cursor: default;
+  /*public*/
+  border: 2px solid var(--ez-radio-button__form-radio--disabled--border-color);
+  background-color: var(--ez-radio-button__form-radio--disabled--background-color);
+}
+
+.form__radio:disabled:hover {
+  /*private*/
+  box-shadow: inherit;
+}
+
+input[type=radio]:disabled ~ label{
+  /*private*/
+  cursor: default;
+  /*public*/
+  color: var(--ez-radio-button__form-radio--disabled--color);
+}
+
+.form__radio:disabled:before {
+  /*public*/
+  background: var(--ez-radio-button__form-radio--disabled--before--background-color);
+}
+
+.form__radio:focus {
+  /*private*/
+  transition: 0.25s linear;
+  /*public*/
+  background-color: var(--ez-radio-button__form-radio--focus--background-color); 
+  box-shadow: 0px 0px 0px 6px var(--ez-radio-button__form-radio--checked--box-shadow-color);
+}
+
+.form__radio:checked:focus {
+  /*private*/
+  transition: 0.25s linear;
+  /*public*/
+  background-color: var(--ez-radio-button__form-radio--checked--focus--background-color); 
+  box-shadow: 0px 0px 0px 6px var(--ez-radio-button__form-radio--checked--focus--box-shadow-color);
+}
+
+.form__radio:checked:hover {
+  /*private*/
+  transition: 0.25s linear;
+  /*public*/
+  background-color: var(--ez-radio-button__form-radio--checked--hover--background-color); 
+  box-shadow: 0px 0px 0px 6px var(--ez-radio-button__form-radio--checked--hover--box-shadow-color);
+}
+
+.form__radio:hover {
+  /*private*/
+  transition: 0.25s linear;
+  /*public*/
+  box-shadow: 0px 0px 0px 6px var(--ez-radio-button__form-radio--hover--box-shadow-color);
+}
+
+.form__radio:checked:disabled:hover{
+  /*private*/
+  box-shadow: none;
+  /*public*/
+  background-color: var(--ez-radio-button__form-radio--checked--disabled--hover--background-color);
+}
+

package/dist/collection/components/ez-radio-button/ez-radio-button.js

@@ -0,0 +1,163 @@
+import { ElementIDUtils } from '@sankhyalabs/core';
+import { Host, h } from '@stencil/core';
+export class EzRadioButton {
+  constructor() {
+    this.value = undefined;
+    this.options = [];
+    this.enabled = true;
+    this.label = undefined;
+    this.direction = "vertical";
+  }
+  componentDidLoad() {
+    if (this.hostElement) {
+      ElementIDUtils.addIDInfo(this.hostElement, 'input');
+    }
+  }
+  componentWillRender() {
+    this._options = [...this.options];
+    const optionsTags = this.hostElement.querySelectorAll("ez-radio-button-option");
+    if (optionsTags) {
+      optionsTags.forEach(e => {
+        let label = e.getAttribute("label");
+        let value = e.getAttribute("value");
+        this._options.push({ label, value });
+      });
+    }
+  }
+  handleInputChange(ev) {
+    const slot = ev.target;
+    this.value = slot.value;
+    this.ezChange.emit(this.value);
+  }
+  render() {
+    return (h(Host, null, this.label && h("label", { class: "label" }, this.label), h("div", { class: "form form--" + this.direction }, this._options.map((option, key) => h("div", { class: "form__group" }, h("input", { id: "rad" + key, class: "form__radio", name: "theradio", type: "radio", value: option.value, onChange: (ev) => { this.handleInputChange(ev); }, disabled: !this.enabled, checked: option.value === this.value, "data-element-id": ElementIDUtils.getInternalIDInfo(`input_${option.value}`) }), h("label", { htmlFor: "rad" + key, class: "form__label" }, option.label))))));
+  }
+  static get is() { return "ez-radio-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-radio-button.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-radio-button.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "any",
+        "mutable": true,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o valor do campo."
+        },
+        "attribute": "value",
+        "reflect": true
+      },
+      "options": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Array<Radio>",
+          "resolved": "Radio[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "Radio": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define as op\u00E7\u00F5es que ser\u00E3o apresentadas"
+        },
+        "defaultValue": "[]"
+      },
+      "enabled": {
+        "type": "boolean",
+        "mutable": false,
+        "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"
+      },
+      "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
+      },
+      "direction": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "\"vertical\" | \"horizontal\"",
+          "resolved": "\"horizontal\" | \"vertical\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define a dire\u00E7\u00E3o dos itens."
+        },
+        "attribute": "direction",
+        "reflect": true,
+        "defaultValue": "\"vertical\""
+      }
+    };
+  }
+  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 elementRef() { return "hostElement"; }
+}

package/dist/collection/components/ez-scroller/EzScrollDirection.js

@@ -0,0 +1,6 @@
+export var EzScrollDirection;
+(function (EzScrollDirection) {
+  EzScrollDirection["HORIZONTAL"] = "horizontal";
+  EzScrollDirection["VERTICAL"] = "vertical";
+  EzScrollDirection["BOTH"] = "both";
+})(EzScrollDirection || (EzScrollDirection = {}));

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

@@ -0,0 +1,192 @@
+:host {
+  /*@doc Define a cor de efeito de sombreado com componente.*/
+  --ez-scroller--box-shadow-color: var(--background--body, #fafcff);
+
+  /* scrollbar */
+  /*@doc Define a cor da barra de rolagem do componente.*/
+  --ez-scroller__scrollbar--color-default: var(--scrollbar--default, #626e82);
+  /*@doc Define a cor de fundo da barra de rolagem do componente.*/
+  --ez-scroller__scrollbar--color-background: var(--scrollbar--background, #E5EAF0);
+  /*@doc Define a cor do hover na barra de rolagem do componente.*/
+  --ez-scroller__scrollbar--color-hover: var(--scrollbar--hover, #2B3A54);
+  /*@doc Define a cor do active na barra de rolagem do componente.*/
+  --ez-scroller__scrollbar--color-clicked: var(--scrollbar--clicked, #a2abb9);
+  /*@doc Define o raio da borda da barra de rolagem do componente.*/
+  --ez-scroller__scrollbar--border-radius: var(--border--radius-small, 6px);
+  /*@doc Define a largura da barra de rolagem do componente.*/
+  --ez-scroller__scrollbar--width: var(--space--small, 6px);
+  /*@doc Define o a altura máxima do componente.*/
+  --ez-scroller__max-height: unset;
+
+  display: flex;
+  cursor: grab;
+  width: 100%;
+  overflow: hidden;
+}
+
+.dragging {
+  cursor: grabbing;
+}
+
+.ez-scroller__container {
+  display: flex;
+  overflow-y: hidden;
+  overflow-x: hidden;
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+
+.ez-scroller__container--both:not(.ez-scroller__container--locked),
+.ez-scroller__container:not(.ez-scroller__container--locked):hover {
+  /*public*/
+  scrollbar-color: var(--ez-scroller__scrollbar--color-clicked) var(--ez-scroller__scrollbar--color-background);
+}
+
+.ez-scroller__container--both {
+  overflow-y: scroll;
+  overflow-x: scroll;
+  flex-wrap: wrap;
+}
+
+.ez-scroller__container--horizontal {
+  overflow-x: scroll;
+  flex-direction: row;
+}
+
+.ez-scroller__container--vertical {
+  overflow-y: scroll;
+  flex-direction: column;
+  max-height: var(--ez-scroller__max-height);
+}
+
+.ez-scroller__container::-webkit-scrollbar {
+  background-color: transparent;
+
+  /*public*/
+  width: var(--ez-scroller__scrollbar--width);
+  height: var(--ez-scroller__scrollbar--width);
+  max-width: var(--ez-scroller__scrollbar--width);
+  min-width: var(--ez-scroller__scrollbar--width);
+}
+
+.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar,
+.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar {
+  /*public*/
+  background-color: var(--ez-scroller__scrollbar--color-background);
+}
+
+.ez-scroller__container::-webkit-scrollbar-track {
+  visibility: hidden;
+  background-color: transparent;
+
+  /*public*/
+  border-radius: var(--ez-scroller__scrollbar--border-radius);
+}
+
+.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-track,
+.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-track {
+  /*public*/
+  background-color: var(--ez-scroller__scrollbar--color-background);
+}
+
+.ez-scroller__container::-webkit-scrollbar-thumb {
+  background-color: transparent;
+
+  /*public*/
+  border-radius: var(--ez-scroller__scrollbar--border-radius);
+}
+
+.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb,
+.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb {
+  /*public*/
+  background-color: var(--ez-scroller__scrollbar--color-default);
+}
+
+.ez-scroller__container::-webkit-scrollbar-thumb:vertical:hover,
+.ez-scroller__container::-webkit-scrollbar-thumb:horizontal:hover {
+  background-color: transparent;
+}
+
+.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:vertical:hover,
+.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:horizontal:hover,
+.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:vertical:hover,
+.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:horizontal:hover {
+  /*public*/
+  background-color: var(--ez-scroller__scrollbar--color-hover);
+}
+
+.ez-scroller__container::-webkit-scrollbar-thumb:vertical:active,
+.ez-scroller__container::-webkit-scrollbar-thumb:horizontal:active {
+  background-color: transparent;
+}
+
+.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:vertical:active,
+.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:horizontal:active,
+.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:vertical:active,
+.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:horizontal:active {
+  /*public*/
+  background-color: var(--ez-scroller__scrollbar--color-clicked);
+}
+
+.ez-scroller__wrapper {
+  display: flex;
+  position: relative;
+  width: 100%;
+  height: auto;
+}
+
+.ez-scroller__wrapper--horizontal {
+  flex-direction: row;
+}
+
+.ez-scroller__wrapper--vertical {
+  flex-direction: column;
+}
+
+.ez-scroller__wrapper--shadow-start::before,
+.ez-scroller__wrapper--shadow-end::after {
+  content: "";
+  display: flex;
+  position: absolute;
+  z-index: 1;
+}
+
+.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-start::before,
+.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-end::after {
+  width: 24px;
+  min-height: calc(100% - 10px);
+}
+
+.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-start::before {
+  left: 0;
+
+  /*public*/
+  background: linear-gradient(to right, var(--ez-scroller--box-shadow-color) 20%, transparent 80%);
+}
+
+.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-end::after {
+  right: 0;
+
+  /*public*/
+  background: linear-gradient(to left, var(--ez-scroller--box-shadow-color) 20%, transparent 80%);
+}
+
+.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-start::before,
+.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-end::after {
+  min-width: calc(100% - 10px);
+  height: 24px;
+}
+
+.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-start::before {
+  top: 0;
+
+  /*public*/
+  background: linear-gradient(to bottom, var(--ez-scroller--box-shadow-color) 20%, transparent 80%);
+}
+
+.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-end::after {
+  bottom: 0;
+
+  /*public*/
+  background: linear-gradient(to top, var(--ez-scroller--box-shadow-color) 20%, transparent 80%);
+}