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

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

@@ -0,0 +1,101 @@
+import { ElementIDUtils, StringUtils } from "@sankhyalabs/core";
+import { h, Host } from "@stencil/core";
+export class EzIcon {
+  constructor() {
+    this.size = "medium";
+    this.href = undefined;
+    this.iconName = undefined;
+  }
+  isSprite() {
+    return this.href && this.href.indexOf("#") > -1;
+  }
+  getIconClassName() {
+    return `ez-icon-${this.iconName}`;
+  }
+  getIconContent() {
+    if (this.isSprite()) {
+      return h("svg", { class: this.size, role: "img" }, h("use", { xlinkHref: this.href }));
+    }
+    else if (!StringUtils.isEmpty(this.iconName)) {
+      return h("span", { class: `icon-content ${this.getIconClassName()}  ${this.size}--font` });
+    }
+    else {
+      return h("img", { class: this.size, src: this.href });
+    }
+  }
+  componentDidLoad() {
+    ElementIDUtils.addIDInfo(this._hostElement, "icon");
+  }
+  render() {
+    return (h(Host, null, this.getIconContent()));
+  }
+  static get is() { return "ez-icon"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-icon.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-icon.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"x-small\" | \"small\"| \"medium\" | \"large\" | \"x-large\"",
+          "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o tamanho do \u00EDcone."
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "\"medium\""
+      },
+      "href": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o endere\u00E7o da imagem quando n\u00E3o contempladas na biblioteca de \u00EDcones."
+        },
+        "attribute": "href",
+        "reflect": true
+      },
+      "iconName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o \u00EDcone a ser usado da biblioteca de \u00EDcones: [ez-icons](https://sankhyalabs-storybook.herokuapp.com/themes/default/icons/fonts/index.html)"
+        },
+        "attribute": "icon-name",
+        "reflect": true
+      }
+    };
+  }
+  static get elementRef() { return "_hostElement"; }
+}

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

@@ -0,0 +1,434 @@
+:host {
+  /* @doc Define a camada de visibilidae do componente. */
+  --ez-list__host--z-index: var(--visible, 1);
+
+  /* @doc Define o raio da borda do componente. */
+  --ez-list__host--border-radius: var(--border--radius-medium, 12px);
+
+  /* @doc Define o espaçamento entre a lista e o componente. */
+  --ez-list__host--padding: var(--space--medium, 12px);
+
+  /* @doc Define o espaçamento interno do ícone. */
+  --ez-list__icon--padding: var(--space--small, 6px);
+
+  /* @doc Define a cor do ícone de arrasto do item da lista. */
+  --ez-list__icon--color: #AFB6C0;
+
+  /* @doc Define o espaçamento externo do item da lista. */
+  --ez-list__item--margin: 0 var(--space--small, 6px);
+
+  /* @doc Define a cor do texto do item da lista. */
+  --ez-list__item--color: var(--title--primary, #2b3a54);
+
+  /* @doc Define o estilo borda inferior do item da lista. */
+  --ez-list__item--border-bottom: var(--border--small, 1px solid);
+
+  /* @doc Define a cor da borda inferior do item da lista. */
+  --ez-list__item--border-color: var(--title--primary, #2b3a54);
+
+  /* @doc Define o estilo do texto do item da lista. */
+  --ez-list__item--font-family: var(--font-pattern, "Roboto");
+
+  /* @doc Define o tamanho do texto do item da lista. */
+  --ez-list__item--font-size: var(--text--medium, 14px);
+
+  /* @doc Define o espaçamento lateral direito para items selecionados. */
+  --ez-list__selectable--padding-right: var(--space--small, 6px);
+  
+  /* @doc Define o espaçamento lateral esquerdo para items selecionados. */
+  --ez-list__selectable--padding-left: var(--space--small, 6px);
+
+  /*@doc Define o raio da borda de items selecionados.*/
+  --ez-list__selected-item--border-radius: var(--border--radius-small, 6px);
+  
+  /*@doc Define a cor de fundo de items selecionados.*/
+  --ez-list__selected-item--background-color: var(--color--primary-300, #E2F4EF);
+
+  /* @doc Define o estilo do texto do grupo da lista. */
+  --ez-list__group--font-family: var(--font-pattern, "Roboto");
+  
+  /* @doc Define o tamanho do texto do grupo da lista. */
+  --ez-list__group--font-size: var(--text--medium, 14px);
+  
+  /* @doc Define o peso do texto do grupo da lista. */
+  --ez-list__group--font-weight: var(--text-weight--large, 600);
+  
+  /* @doc Define o espaçamento inferior do grupo da lista. */
+  --ez-list__group--padding-bottom: var(--space-small, 6px);
+
+  /* @doc Define o estilo do texto da área de transferência de grupos. */
+  --ez-list__group-overlay--font-family: var(--font-pattern, "Roboto");
+
+  /* @doc Define o tamanho do texto da área de transferência de grupos. */
+  --ez-list__group-overlay--font-size: var(--text--medium, 14px);
+  
+  /* @doc Define a cor da borda pontilhada sobre os elementos da lista. */
+  --ez-list__over--border--color: var(--color--primary, #008561);
+
+  /*@doc Define a altura do container para arrasto para última posição .*/
+  --ez-list__last-droppable-space--height: var(--space--small, 6px);
+  
+  /*@doc Define o espaçamento do container de itens arrastáveis .*/
+  --ez-list__draggable-list--padding-bottom: var(--space--small, 6px);
+
+  /* @doc Define a imagem do ícone de drag. */
+  --ez-list__draggable-icon--image: url('data:image/svg+xml;utf8,<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="m 6.75,2.25 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z"/></svg>');
+
+  /* scrollbar */
+  /*@doc Define a cor da barra de rolagem do componente.*/
+  --ez-list__scrollbar--color-default: var(--scrollbar--default, #626e82);
+  /*@doc Define a cor de fundo da barra de rolagem do componente.*/
+  --ez-list__scrollbar--color-background: var(--scrollbar--background, #E5EAF0);
+  /*@doc Define a cor do hover na barra de rolagem do componente.*/
+  --ez-list__scrollbar--color-hover: var(--scrollbar--hover, #2B3A54);
+  /*@doc Define a cor do active na barra de rolagem do componente.*/
+  --ez-list__scrollbar--color-clicked: var(--scrollbar--clicked, #a2abb9);
+  /*@doc Define o raio da borda da barra de rolagem do componente.*/
+  --ez-list__scrollbar--border-radius: var(--border--radius-small, 6px);
+  /*@doc Define a largura da barra de rolagem do componente.*/
+  --ez-list__scrollbar--width: var(--space--medium, 12px);
+
+  max-height: 100%;
+  width: 100%;
+  background-color: #fff;
+  display: flex;
+
+  /*public*/
+  z-index: var(--ez-list__host--z-index);
+}
+
+p {
+  margin: 0;
+}
+
+.draggable {
+  /* private */
+  width: 100%;
+  display: grid;
+  grid-template-columns: minmax(0px, auto) minmax(0px, auto);
+  place-items: center;
+  border-top: 1px dashed #fff;
+  justify-content: space-between;
+
+  /*public*/
+  font-family: var(--ez-list__item--font-family);
+  font-size: var(--ez-list__item--font-size);
+}
+
+.dragging {
+  background: #FFFFFF;
+  /* Primary/color--primary */
+
+  border: 1px solid #008561;
+  box-sizing: border-box;
+  box-shadow: 0px 0px 16px rgba(0, 38, 111, 0.122);
+  border-radius: 6px;
+}
+
+.selectable {
+  cursor: pointer;
+
+  /*public*/
+  padding-right: var(--ez-list__selectable--padding-right);
+  padding-left: var(--ez-list__selectable--padding-left);
+}
+
+.selectable-container {
+  margin: 0px !important;
+}
+
+.hover-feedback:hover {
+  background-color: var(--background--medium);
+  border-radius: var(--border--radius-regular);
+}
+
+.item-content {
+  display: flex;
+  overflow: hidden;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+}
+
+.draggable-list {
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  max-height: 100%;
+  scrollbar-width: thin;
+
+  /*public*/
+  color: var(--text-color);
+  scrollbar-color: var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background);
+}
+
+.draggable-list li {
+  display: flex;
+  height: 32px;
+
+  /*public*/
+  margin: var(--ez-list__item--margin);
+  font-family: var(--ez-list__item--font-family);
+  font-size: var(--ez-list__item--font-size);
+  color: var(--ez-list__item--color);
+}
+
+.over {
+  /*public*/
+  border-top: 1px dashed var(--ez-list__over--border--color);
+}
+
+.last-droppable-space {
+  /*public*/
+  height: var(--ez-list__last-droppable-space--height);
+}
+
+.draggable-selected {
+  /*public*/
+  background-color: var(--background--strong) !important;
+}
+
+.draggable-selected div:hover {
+  /*public*/
+  background-color: var(--background--strong) !important;
+}
+
+.draggable-list::-webkit-scrollbar {
+  /*public*/
+  background-color: var(--ez-list__scrollbar--color-background);
+  width: var(--ez-list__scrollbar--width);
+  max-width: var(--ez-list__scrollbar--width);
+  min-width: var(--ez-list__scrollbar--width);
+}
+
+.draggable-list::-webkit-scrollbar-track {
+  /*public*/
+  background-color: var(--ez-list__scrollbar--color-background);
+  border-radius: var(--ez-list__scrollbar--border-radius);
+}
+
+.draggable-list::-webkit-scrollbar-thumb {
+  /*public*/
+  background-color: var(--ez-list__scrollbar--color-default);
+  border-radius: var(--ez-list__scrollbar--border-radius);
+}
+
+.draggable-list::-webkit-scrollbar-thumb:vertical:hover,
+.draggable-list::-webkit-scrollbar-thumb:horizontal:hover {
+  /*public*/
+  background-color: var(--ez-list__scrollbar--color-hover);
+}
+
+.draggable-list::-webkit-scrollbar-thumb:vertical:active,
+.draggable-list::-webkit-scrollbar-thumb:horizontal:active {
+  /*public*/
+  background-color: var(--ez-list__scrollbar--color-clicked);
+}
+
+.draggable-icon {
+  align-items: flex-start;
+  display: flex;
+  outline: none;
+  border: none;
+  background-color: unset;
+}
+
+.draggable-icon::after {
+  content: '';
+  display: flex;
+  width: 18px;
+  height: 18px;
+
+  /*public*/
+  background-color: var(--ez-list__icon--color);
+  -webkit-mask-image: var(--ez-list__draggable-icon--image);
+  mask-image: var(--ez-list__draggable-icon--image);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.checkbox {
+  width: fit-content;
+}
+
+.text--ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.group-container {
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+  overflow-y: auto;
+  outline: none;
+  width: 100%;
+  scrollbar-width: thin;
+
+  /*public*/
+  scrollbar-color: var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background);
+}
+
+.group-name {
+  -webkit-user-select: none;
+  -moz-user-select: -moz-none;
+  -ms-user-select: none;
+  user-select: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  /*public*/
+  color: var(--title--primary);
+  font-family: var(--ez-list__group--font-family);
+  font-size: var(--ez-list__group--font-size);
+  font-weight: var(--ez-list__group--font-weight);
+  padding-bottom: var(--ez-list__group--padding-bottom);
+}
+
+.group {
+  display: flex;
+  flex-direction: column;
+}
+
+.group-container::-webkit-scrollbar {
+  /*public*/
+  background-color: var(--ez-list__scrollbar--color-background);
+  width: var(--ez-list__scrollbar--width);
+  max-width: var(--ez-list__scrollbar--width);
+  min-width: var(--ez-list__scrollbar--width);
+}
+
+.group-container::-webkit-scrollbar-track {
+  /*public*/
+  background-color: var(--ez-list__scrollbar--color-background);
+  border-radius: var(--ez-list__scrollbar--border-radius);
+}
+
+.group-container::-webkit-scrollbar-thumb {
+  /*public*/
+  background-color: var(--ez-list__scrollbar--color-default);
+  border-radius: var(--ez-list__scrollbar--border-radius);
+}
+
+.group-container::-webkit-scrollbar-thumb:vertical:hover,
+.group-container::-webkit-scrollbar-thumb:horizontal:hover {
+  /*public*/
+  background-color: var(--ez-list__scrollbar--color-hover);
+}
+
+.group-container::-webkit-scrollbar-thumb:vertical:active,
+.group-container::-webkit-scrollbar-thumb:horizontal:active {
+  /*public*/
+  background-color: var(--ez-list__scrollbar--color-clicked);
+}
+
+.section-container {
+  display: flex;
+  position: relative;
+  height: 100%;
+}
+
+.items-container {
+  width: 100%;
+  max-height: 100%;
+  outline: none;
+  scrollbar-width: thin;
+
+  /*public*/
+  scrollbar-color: var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background);
+}
+
+.group-items-container {
+  width: 100%;
+  max-height: 100%;
+  height: 100%;
+  outline: none;
+}
+
+.items-container::-webkit-scrollbar {
+  /*public*/
+  background-color: var(--ez-list__scrollbar--color-background);
+  width: var(--ez-list__scrollbar--width);
+  max-width: var(--ez-list__scrollbar--width);
+  min-width: var(--ez-list__scrollbar--width);
+}
+
+.items-container::-webkit-scrollbar-track {
+  /*public*/
+  background-color: var(--ez-list__scrollbar--color-background);
+  border-radius: var(--ez-list__scrollbar--border-radius);
+}
+
+.items-container::-webkit-scrollbar-thumb {
+  /*public*/
+  background-color: var(--ez-list__scrollbar--color-default);
+  border-radius: var(--ez-list__scrollbar--border-radius);
+}
+
+.items-container::-webkit-scrollbar-thumb:vertical:hover,
+.items-container::-webkit-scrollbar-thumb:horizontal:hover {
+  /*public*/
+  background-color: var(--ez-list__scrollbar--color-hover);
+}
+
+.items-container::-webkit-scrollbar-thumb:vertical:active,
+.items-container::-webkit-scrollbar-thumb:horizontal:active {
+  /*public*/
+  background-color: var(--ez-list__scrollbar--color-clicked);
+}
+
+.group-overlay {
+  background: rgba(226, 244, 239, 0.8);
+  border: 1px solid #008561;
+  border-radius: 8px;
+  position: absolute;
+  display: none;
+  place-items: center;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 2;
+  margin: 0;
+  cursor: pointer;
+
+  /*public*/
+  font-family: var(--ez-list__group-overlay--font-family);
+  font-size: var(--ez-list__group-overlay--font-size);
+}
+
+.presetedHeight {
+  min-height: 100px;
+}
+
+.overlay-text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  font-size: 50px;
+  color: white;
+  transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+}
+
+.selected-item {
+  /*public*/
+  background: var(--ez-list__selected-item--background-color);
+  border-radius: var(--ez-list__selected-item--border-radius);
+}
+
+.slot-item {
+  align-items: flex-end;
+}
+
+.overGroup {
+  background: rgba(226, 244, 239, 0.8);
+  border: 1px solid #008561;
+  box-sizing: border-box;
+  border-radius: 8px;
+  padding-top: 6px;
+}