@sankhyalabs/ezui 1.1.160 → 1.1.162

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

@@ -1,78 +1,102 @@
 :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);
+  --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);
+  --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, "Sora");
+
   /* @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);
+  --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: var(--color--primary-300, #E2F4EF);
+  --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, "Sora");
+  
   /* @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, "Sora");
+  --ez-list__group-overlay--font-family: var(--font-pattern, "Sora");
+
   /* @doc Define o tamanho do texto da área de transferência de grupos. */
-  --ez-list__group__overlay--font-size: var(--text--medium, 14px);
+  --ez-list__group-overlay--font-size: var(--text--medium, 14px);
 
   /*@doc Define o raio da borda da barra de rolagem do container de grupos.*/
-  --ez-list__group-container__scrollbar--border-radius: var(--border--radius-large, 24px);
+  --ez-list__group-container-scrollbar--border-radius: var(--border--radius-small, 6px);
+  
   /*@doc Define a largura da barra de rolagem do container de grupos.*/
-  --ez-list__group-container__scrollbar--width: var(--space--medium, 12px);
+  --ez-list__group-container-scrollbar--width: var(--space--medium, 12px);
+  
   /*@doc Define a cor da barra de rolagem do container de grupos.*/
-  --ez-list__group-container__scrollbar--background-color: var(--text--primary, #626e82);
+  --ez-list__group-container-scrollbar--background-color-primary: var(--scrollbar--primary, #2B3A54);
+  
+  /*@doc Define a cor de fundo da barra de rolagem do container de grupos.*/
+  --ez-list__group-container-scrollbar--background-color-secondary: var(--scrollbar--secondary, #E5EAF0);
 
   /* @doc Define a cor da borda pontilhada sobre os elementos da lista. */
   --ez-list__over--border--color: var(--color--primary, #008561);
 
-  /*@doc Define o espaçamento do container de itens arrastáveis .*/
-  --ez-list__draggable__list--padding-bottom: var(--space--small, 6px);
-
   /*@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 raio da borda da barra de rolagem do componente.*/
-  --ez-list__draggable__scrollbar--border-radius: var(--border--radius-large, 24px);
+  --ez-list__draggable-scrollbar--border-radius: var(--border--radius-small, 6px);
+
   /*@doc Define a largura da barra de rolagem do componente.*/
-  --ez-list__draggable__scrollbar--width: var(--space--medium, 12px);
+  --ez-list__draggable-scrollbar--width: var(--space--medium, 12px);
+
   /*@doc Define a cor da barra de rolagem do componente.*/
-  --ez-list__draggable__scrollbar--background-color: var(--text--primary, #626e82);
+  --ez-list__draggable-scrollbar--background-color-primary: var(--scrollbar--primary, #2B3A54);
+
+  /*@doc Define a cor de fundo da barra de rolagem do componente.*/
+  --ez-list__draggable-scrollbar--background-color-secondary: var(--scrollbar--secondary, #E5EAF0);
+  
+  /*@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>');
+  --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>');
 
   max-height: 100%;
   width: 100%;
@@ -94,6 +118,7 @@ p {
   font-family: var(--ez-list__item--font-family);
   font-size: var(--ez-list__item--font-size);
   flex: 1;
+  width: 100%;
 }
 
 .dragging {
@@ -118,8 +143,9 @@ p {
 
 .item-content {
   display: flex;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: center;
+  width: calc(100% - 41px);
 }
 
 .draggable-list {
@@ -128,12 +154,16 @@ p {
   margin: 0;
   width: 100%;
   max-height: 100%;
+  scrollbar-width: thin;
+
+  /*public*/
+  scrollbar-color: var(--ez-list__draggable-scrollbar--background-color-primary) var(--ez-list__draggable-scrollbar--background-color-secondary);
 }
 
 .draggable-list li {
   background-color: #fff;
   display: flex;
-  margin: var(--ez-list__item__margin);
+  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);
@@ -159,19 +189,19 @@ p {
 
 /* Precisamos dos tokens do scrollbar */
 .draggable-list::-webkit-scrollbar-track {
-  background-color: #f0f2f5;
+  background-color: var(--ez-list__draggable-scrollbar--background-color-secondary);
 }
 
 .draggable-list::-webkit-scrollbar-thumb {
-  background-color: var(--ez-list__draggable__scrollbar--background-color);
-  border-radius: var(--ez-list__draggable__scrollbar--border-radius);
+  background-color: var(--ez-list__draggable-scrollbar--background-color-primary);
+  border-radius: var(--ez-list__draggable-scrollbar--border-radius);
 }
 
 .draggable-list::-webkit-scrollbar {
-  background-color: #f0f2f5;
-  width: var(--ez-list__draggable__scrollbar--width);
-  max-width: var(--ez-list__draggable__scrollbar--width);
-  min-width: var(--ez-list__draggable__scrollbar--width);
+  background-color: var(--ez-list__draggable-scrollbar--background-color-secondary);
+  width: var(--ez-list__draggable-scrollbar--width);
+  max-width: var(--ez-list__draggable-scrollbar--width);
+  min-width: var(--ez-list__draggable-scrollbar--width);
 }
 
 .draggable-icon {
@@ -188,8 +218,8 @@ p {
   background-color: var(--ez-list__icon--color);
   width: 18px;
   height: 18px;
-  -webkit-mask-image: var(--ez-list__draggable__icon--image);
-  mask-image: var(--ez-list__draggable__icon--image);
+  -webkit-mask-image: var(--ez-list__draggable-icon--image);
+  mask-image: var(--ez-list__draggable-icon--image);
 }
 
 * {
@@ -213,6 +243,10 @@ p {
   overflow-y: auto;
   outline: none;
   width: 100%;
+  scrollbar-width: thin;
+
+  /*public*/
+  scrollbar-color: var(--ez-list__group-container-scrollbar--background-color-primary) var(--ez-list__group-container-scrollbar--background-color-secondary);
 }
 
 .group-name {
@@ -234,19 +268,19 @@ p {
 
 /* Precisamos dos tokens do scrollbar */
 .group-container::-webkit-scrollbar-track {
-  background-color: #f0f2f5;
+  background-color: var(--ez-list__group-container-scrollbar--background-color-secondary);
 }
 
 .group-container::-webkit-scrollbar-thumb {
-  background-color: var(--ez-list__group-container__scrollbar--background-color);
-  border-radius: var(--ez-list__group-container__scrollbar--border-radius);
+  background-color: var(--ez-list__group-container-scrollbar--background-color-primary);
+  border-radius: var(--ez-list__group-container-scrollbar--border-radius);
 }
 
 .group-container::-webkit-scrollbar {
-  background-color: #f0f2f5;
-  width: var(--ez-list__group-container__scrollbar--width);
-  max-width: var(--ez-list__group-container__scrollbar--width);
-  min-width: var(--ez-list__group-container__scrollbar--width);
+  background-color: var(--ez-list__group-container-scrollbar--background-color-secondary);
+  width: var(--ez-list__group-container-scrollbar--width);
+  max-width: var(--ez-list__group-container-scrollbar--width);
+  min-width: var(--ez-list__group-container-scrollbar--width);
 }
 
 .section-container {
@@ -260,6 +294,10 @@ p {
   max-height: 100%;
   overflow-y: auto;
   outline: none;
+  scrollbar-width: thin;
+
+  /*public*/
+  scrollbar-color: var(--ez-list__draggable-scrollbar--background-color-primary) var(--ez-list__draggable-scrollbar--background-color-secondary);
 }
 
 .group-items-container {
@@ -270,24 +308,24 @@ p {
 }
 
 .items-container::-webkit-scrollbar-track {
-  background-color: #f0f2f5;
+  background-color: var(--ez-list__draggable-scrollbar--background-color-secondary);
 }
 
 .items-container::-webkit-scrollbar-thumb {
-  background-color: var(--ez-list__draggable__scrollbar--background-color);
-  border-radius: var(--ez-list__draggable__scrollbar--border-radius);
+  background-color: var(--ez-list__draggable-scrollbar--background-color-primary);
+  border-radius: var(--ez-list__draggable-scrollbar--border-radius);
 }
 
 .items-container::-webkit-scrollbar {
-  background-color: #f0f2f5;
-  width: var(--ez-list__draggable__scrollbar--width);
-  max-width: var(--ez-list__draggable__scrollbar--width);
-  min-width: var(--ez-list__draggable__scrollbar--width);
+  background-color: var(--ez-list__draggable-scrollbar--background-color-secondary);
+  width: var(--ez-list__draggable-scrollbar--width);
+  max-width: var(--ez-list__draggable-scrollbar--width);
+  min-width: var(--ez-list__draggable-scrollbar--width);
 }
 
 .group-overlay {
-  font-family: var(--ez-list__group__overlay--font-family);
-  font-size: var(--ez-list__group__overlay--font-size);
+  font-family: var(--ez-list__group-overlay--font-family);
+  font-size: var(--ez-list__group-overlay--font-size);
   background: rgba(226, 244, 239, 0.8);
   border: 1px solid #008561;
   border-radius: 8px;
@@ -318,8 +356,8 @@ p {
 }
 
 .selected-item {
-  background: var(--ez-list__selected-item__background);
-  border-radius: var(--ez-list__selected-item__border-radius);
+  background: var(--ez-list__selected-item--background-color);
+  border-radius: var(--ez-list__selected-item--border-radius);
 }
 
 .slot-item {

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

@@ -54,8 +54,8 @@
 .modal__content {
   display: flex;
   flex-wrap: wrap;
-  /* Cálculo deve ser revisto pois foi feito apenas para lista de tarefas */
-  max-height: calc(100% - 48px);
+  box-sizing: border-box;
+  max-height: 100%;
   height: 100%;
   overflow-y: auto;
   background-color: rgb(255, 255, 255);

package/dist/custom-elements/index.d.ts

@@ -86,6 +86,12 @@ export const EzGrid: {
   new (): EzGrid;
 };
 
+interface EzGridConfig extends Components.EzGridConfig, HTMLElement {}
+export const EzGridConfig: {
+  prototype: EzGridConfig;
+  new (): EzGridConfig;
+};
+
 interface EzIcon extends Components.EzIcon, HTMLElement {}
 export const EzIcon: {
   prototype: EzIcon;
@@ -134,6 +140,12 @@ export const EzSearch: {
   new (): EzSearch;
 };
 
+interface EzSelectBox extends Components.EzSelectBox, HTMLElement {}
+export const EzSelectBox: {
+  prototype: EzSelectBox;
+  new (): EzSelectBox;
+};
+
 interface EzTabselector extends Components.EzTabselector, HTMLElement {}
 export const EzTabselector: {
   prototype: EzTabselector;
@@ -176,18 +188,6 @@ export const EzViewStack: {
   new (): EzViewStack;
 };
 
-interface GridConfig extends Components.GridConfig, HTMLElement {}
-export const GridConfig: {
-  prototype: GridConfig;
-  new (): GridConfig;
-};
-
-interface SelectBox extends Components.SelectBox, HTMLElement {}
-export const SelectBox: {
-  prototype: SelectBox;
-  new (): SelectBox;
-};
-
 interface TestDu extends Components.TestDu, HTMLElement {}
 export const TestDu: {
   prototype: TestDu;