@sankhyalabs/sankhyablocks 2.10.0 → 2.11.1

package/dist/collection/components/snk-form/subcomponents/snk-form-config/snk-form-config.css

@@ -1,74 +1,103 @@
 :host {
-  /* Título */
-  /*@doc Define o estilo da mensagem exibida no título.*/
-  --snk-form-config__title--font-pattern: var(--font-pattern, "Roboto");
-  /*@doc Define o peso do título.*/
-  --snk-form-config__title--weight--large: var(--text-weight--large, 600);
-  
+  /*@doc Define o z-index do componente.*/
+  --snk-form-config--z-index: var(--more-visible, 2);
+  /*@doc Define a cor de fundo do componente.*/
+  --snk-form-config--background-color: var(--background--xlight, #fff);
+  /*@doc Define a cor dos icones do componente.*/
+  --snk-form-config__icon--color: var(--text--disable, #AFB6C0);
+  /*@doc Define o peso do texto do label de contagem de campos disponíveis.*/
+  --snk-form-config__label-counter--font-weight: var(--text-weight--extra-small, 200);
+  /*@doc Define o raio da borda externa do bloco para adicionar novo grupo.*/
+  --snk-form-config__add-group-container--border-radius: var(--border--radius-medium, 12px);
+  /*@doc Define a cor de fundo do bloco para adicionar novo grupo.*/
+  --snk-form-config__add-group-container--background-color: var(--background--medium, #d2dce9);
+  /*@doc Define o espaçamento interno do bloco para adicionar novo grupo.*/
+  --snk-form-config__add-group-container--padding: var(--space--small, 6px);
+  /*@doc Define a borda interna do bloco para adicionar novo grupo.*/
+  --snk-form-config__add-group-content--border: 2px dashed var(--color-strokes, #DCE0E8);
+  /*@doc Define o raio da borda interna do bloco para adicionar novo grupo.*/
+  --snk-form-config__add-group-content--border-radius: var(--border--radius-small, 6px);
+  /*@doc Define o espaçamento interno do label do bloco para adicionar novo grupo.*/
+  --snk-form-config__add-group-label--padding: var(--space--large, 24px);
+  /*@doc Define o espaçamento interno da área interna do bloco para adicionar novo grupo.*/
+  --snk-form-config__btn-add-group--padding: var(--space--large, 24px) var(--space--medium, 12px) 0;
+  /*@doc Define o espaçamento interno do botão para adicionar novo grupo.*/
+  --snk-form-config__btn-add-group-container--padding: var(--space--medium, 12px);
+  /*@doc Define o raio da borda do botão para adicionar novo grupo.*/
+  --snk-form-config__btn-add-group-container--border-radius: var(--border--radius-medium, 12px);
+  /*@doc Define a borda do botão para adicionar novo grupo.*/
+  --snk-form-config__btn-add-group-container--border: 2px solid var(--color-strokes, #DCE0E8);
+  /*@doc Define a cor de fundo do botão para adicionar novo grupo.*/
+  --snk-form-config__btn-add-group-container--background-color: var(--background--body, #fafcff);
+
   /*private*/
   display: flex;
   flex-direction: column;
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
 
   /*public*/
-  z-index: var(--more-visible, 2);
-  background-color: var(--background--xlight); 
-}
-
-.form-config__title {
-  display: flex;
-  margin: 0;
-  line-height: 1.3;
-
-  /*public*/
-  font-family: var(--snk-form-config__title--font-pattern);
-  font-weight: var(--snk-form-config__title--weight--large);
+  z-index: var(--snk-form-config--z-index);
+  background-color: var(--snk-form-config--background-color);
 }
 
 .form-config__header-container {
+  /*private*/
   display: flex;
 }
 
 .form-config__field-container {
+  /*private*/
   width: 32%;
   padding: 6px;
 }
 
 .form-config__hide-content {
+  /*private*/
   display: none;
 } 
 
 ez-icon .left-icon {
-  --ez-icon--color: var(--text--disable);
+  /*public*/
+  --ez-icon--color: var(--snk-form-config__icon--color);
 }
 
 .ez-box__label-counter {
-  font-weight: var(--text-weight--extra-small);
-  margin-top: -7px;  
+  /*private*/
+  margin-top: -7px;
+
+  /*public*/
+  font-weight: var(--snk-form-config__label-counter--font-weight);
 }
 
 .form-config__btn-options {
+  /*private*/
   --ez-button--min-width: 300px;
-  --ez-button--background-color: #FFFFFF;
+
+  /*public*/
+  --ez-button--background-color: var(--snk-form-config--background-color);
 }
 
 [data-draggable-parent] {
+  /*private*/
   position: relative;
 }
 
 .form-config__field-config--selected {
+  /*private*/
   position: static;
 }
 
 .form-config__field-config--dragged .draggable-mirror {
-  z-index: var(--more-visible, 2);
+  /*public*/
+  z-index: var(--snk-form-config--z-index);
 }
 
 .form-config__config-options {
+  /*private*/
   position: relative;
   margin-top: -3px;
   min-width: 100%;
@@ -77,6 +106,7 @@ ez-icon .left-icon {
 
 .form-config__tab-container,
 .form-config__fields-available {
+  /*private*/
   position: relative;
   height: 100%;
   max-height: calc(100vh - 92px);
@@ -84,11 +114,13 @@ ez-icon .left-icon {
 
 .form-config__tab-container .ez-box__container,
 .form-config__fields-available .ez-box__container {
+  /*private*/
   align-content: flex-start;
   height: 100%;
 }
 
 .form-config__fields-available [data-draggable-parent] {
+  /*private*/
   align-content: flex-start;
   overflow-y: auto;
   height: 100%;
@@ -96,6 +128,7 @@ ez-icon .left-icon {
 }
 
 .form-config__tab-content {
+  /*private*/
   align-content: flex-start;
   overflow-y: auto;
   height: auto;
@@ -103,83 +136,102 @@ ez-icon .left-icon {
 }
 
 [data-draggable-element] {
+  /*private*/
   cursor: grab;
 }
 
 .form-config__actions-button {
+  /*private*/
   --ez-actions-button__btn-action--min-width: 235px;
 }
 
 .form-config__add-group {
+  /*private*/
   position: relative;
   min-height: 120px;
   margin-bottom: 10px;
 }
 
 .form-config__add-group-container {
+  /*private*/
   position: absolute;
   display: flex;
   flex-wrap: wrap;
   width: 100%;
   box-sizing: border-box;
-  border-radius: var(--border--radius-medium, 12px);
-  background-color: var(--background--medium, #d2dce9);
-  padding: var(--space--small, 6px);
+
+  /*public*/
+  border-radius: var(--snk-form-config__add-group-container--border-radius);
+  background-color: var(--snk-form-config__add-group-container--background-color);
+  padding: var(--snk-form-config__add-group-container--padding);
 }
 
 .form-config__add-group-content {
+  /*private*/
   width: 100%;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   box-sizing: border-box;
-  border: 2px dashed var(--color-strokes, #DCE0E8);
-  border-radius: var(--border--radius-small, 6px);
+
+  /*public*/
+  border: var(--snk-form-config__add-group-content--border);
+  border-radius: var(--snk-form-config__add-group-content--border-radius);
 }
 
 .form-config__add-group-label {
+  /*private*/
   display: flex;
   justify-content: center;
   box-sizing: border-box;
-  padding: var(--space--large, 24px);
+
+  /*public*/
+  padding: var(--snk-form-config__add-group-label--padding);
 }
 
 .form-config__btn-add-group {
+  /*private*/
   position: relative;
-  padding: var(--space--large, 24px) var(--space--medium, 12px) 0;
-}
 
-.form-config__btn-add-group-container {
-  padding: var(--space--medium, 12px);
-  border-radius: var(--border--radius-medium, 12px);
-  border: 2px solid var(--color-strokes, #DCE0E8);
-  background-color: var(--background--body, #fafcff);
+  /*public*/
+  padding: var(--snk-form-config__btn-add-group--padding);
 }
 
-.form-config__left-icon--eye-off{
-  padding-top: var(--space--medium, 8px);
+.form-config__btn-add-group-container {
+  /*public*/
+  padding: var(--snk-form-config__btn-add-group-container--padding);
+  border-radius: var(--snk-form-config__btn-add-group-container--border-radius);
+  border: var(--snk-form-config__btn-add-group-container--border);
+  background-color: var(--snk-form-config__btn-add-group-container--background-color);
 }
 
 ez-collapsible-box.draggable-mirror {
+  /*private*/
   display: table;
-  background-color: #FFFFFF;
+
+  /*public*/
+  background-color: var(--snk-form-config--background-color);
 }
 
 ez-collapsible-box{
+  /*private*/
   margin-bottom: 10px;
 }
 
 @media screen and (min-width: 480px) {
   .form-config__field-config--selected .ez-flex.form-config__config-options {
+    /*private*/
     min-width: calc(300% + 12px);
   }
 
   .form-config__field-config--selected:nth-child(3n+2) .ez-flex.form-config__config-options {
+    /*private*/
     transform: translate(calc(100% / 3 * -1));
   }
   
   .form-config__field-config--selected:nth-child(3n+3) .ez-flex.form-config__config-options {
+    /*private*/
     transform: translate(calc(100% / 3 * -2));
   }
 }

package/dist/collection/components/snk-form/subcomponents/snk-tab-config/snk-tab-config.css

@@ -13,7 +13,44 @@
   --snk-tab-config--backward-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16px" width="10px"><path d="M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z"/></svg>');
   /*@doc Contém o ícone de avançar para a aba posterior.*/
   --snk-tab-config--forward-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16px" width="10px"><path d="M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z"/></svg>');
-
+  /*@doc Define a cor de fundo da barra do componente.*/
+  --snk-tab-config__lower-bar--background-color: var(--color--disable-primary, #e5eaf0);
+  /*@doc Define a borda da barra do componente.*/
+  --snk-tab-config__lower-bar--border: 2px solid var(--color--disable-primary, #e5eaf0);
+  /*@doc Define a cor do texto do componente.*/
+  --snk-tab-config__tab--color: var(--text--primary, #626e82);
+  /*@doc Define a fonte do texto do componente.*/
+  --snk-tab-config__tab--font-family: var(--font-pattern, "Roboto");
+  /*@doc Define o tamanho do texto do componente.*/
+  --snk-tab-config__tab--font-size: var(--title--small, 14px);
+  /*@doc Define o espaçamento interno do componente.*/
+  --snk-tab-config__tab--padding: var(--space--small, 6px) var(--space--medium, 12px);
+  /*@doc Define a cor do texto ativo do componente.*/
+  --snk-tab-config__tab-is-active--color: var(--color--primary, #008561);
+  /*@doc Define a cor no hover do texto do componente.*/
+  --snk-tab-config__tab-hover--color: var(--color--secondary, #383c45);
+  /*@doc Define a borda no foco do componente.*/
+  --snk-tab-config__tab-is-focused--border: 1px dashed var(--color--primary, #008561);
+  /*@doc Define a sombra do label do componente.*/
+  --snk-tab-config__tab-label--text-shadow: var(--text-shadow, 0 0 0 #353535, 0 0 1px transparent);
+  /*@doc Define o espaçamento externo inferior do label do componente.*/
+  --snk-tab-config__tab-label--margin-bottom: var(--space--extra-small, 3px);
+  /*@doc Define a cor do icone do botão de nova aba do componente.*/
+  --snk-tab-config__new-button-icon--color: var(--color--secondary-700, #1C1D22);
+  /*@doc Define a cor de fundo dos botões de navegação na barra do componente.*/
+  --snk-tab-config__forward-button--background-color: var(--text--primary, #626e82);
+  /*@doc Define a cor de fundo no hover dos botões de navegação na barra do componente.*/
+  --snk-tab-config__forward-button-hover--background-color: var(--color--primary, #008561);
+  /*@doc Define o espaçamento interno direito do icone esquerdo do componente.*/
+  --snk-tab-config__left-icon--padding-right: var(--space--small, 6px);
+  /*@doc Define a cor do icone esquerdo do componente.*/
+  --snk-tab-config__left-icon--color: var(--text--disable, #AFB6C0);
+  /*@doc Define a cor do label desabilitado do componente.*/
+  --snk-tab-config__tab-label-disabled--color: var(--text--disable, #AFB6C0);
+  /*@doc Define o espaçamento externo esquerdo no slot do componente.*/
+  --snk-tab-config__slot--margin-left: var(--space--small, 6px);
+
+  /*private*/
   display: flex;
   position: relative;
   width: 100%;
@@ -21,6 +58,7 @@
 }
 
 .tab-config__scroll {
+  /*private*/
   display: flex;
   width: 100%;
   scroll-behavior: smooth;
@@ -28,19 +66,8 @@
   scrollbar-width: none;
 }
 
-.tab-config__scroll--start-hidden {
-  -webkit-mask-image: linear-gradient(90deg, transparent 20px, #000 48px);
-}
-
-.tab-config__scroll--middle {
-  -webkit-mask-image: linear-gradient(90deg, transparent 20px, #000 48px, #000 calc(100% - 48px), transparent calc(100% - 20px));
-}
-
-.tab-config__scroll--end-hidden {
-  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent calc(100% - 20px));
-}
-
 .tab-config__lower-bar {
+  /*private*/
   position: absolute;
   left: 0%;
   right: 0%;
@@ -49,11 +76,12 @@
   border-radius: 2px;
 
   /*public*/
-  background: var(--color--disable-primary);
-  border: 2px solid var(--color--disable-primary)
+  background-color: var(--snk-tab-config__lower-bar--background-color);
+  border: var(--snk-tab-config__lower-bar--border);
 }
 
 .tab-config__tab {
+  /*private*/
   display: flex;
   border: none;
   background-color: unset;
@@ -63,62 +91,69 @@
   min-width: fit-content;
 
   /*public*/
-  color: var(--text--primary, #626e82);
-  font-family: var(--font-pattern, "Roboto");
-  font-size: var(--title--small, 14px);
-  padding: var(--space--small, 6px) var(--space--medium, 12px);
+  color: var(--snk-tab-config__tab--color);
+  font-family: var(--snk-tab-config__tab--font-family);
+  font-size: var(--snk-tab-config__tab--font-size);
+  padding: var(--snk-tab-config__tab--padding);
 }
 
 .tab-config__tab:focus,
 .tab-config__forward-button,
 .tab-config__backward-button {
+  /*private*/
   outline: none;
 }
 
 .tab-config__tab--is-active {
+  /*private*/
   position: relative;
 
   /*public*/
-  color: var(--color--primary, #008561);
+  color: var(--snk-tab-config__tab-is-active--color);
 }
 
 .tab-config__tab:hover {
   /*public*/
-  color: var(--color--secondary, #383c45);
+  color: var(--snk-tab-config__tab-hover--color);
 }
 
 .tab-config__tab--is-active:hover {
   /*public*/
-  color: var(--color--primary, #008561);
+  color: var(--snk-tab-config__tab-is-active--color);
 }
 
 .tab-config__tab--is-active::after {
+  /*private*/
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
-  background-color: var(--color--primary, #008561);
   clip-path: inset(calc(100% - 3px) 0px 0px 0px);
   animation: activate 0.25s ease-in-out;
+
+  /*public*/
+  background-color: var(--snk-tab-config__tab-is-active--color);
 }
 
 .tab-config__tab--is-focused {
   /*public*/
-  border: 1px dashed var(--color--primary, #000000c5);
+  border: var(--snk-tab-config__tab-is-focused--border);
 }
 
 .tab-config__tab-label {
+  /*private*/
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 
   /*public*/
-  text-shadow: var(--text-shadow);
-  margin-bottom: var(--space--extra-small, 3px);
+  text-shadow: var(--snk-tab-config__tab-label--text-shadow);
+  margin-bottom: var(--snk-tab-config__tab-label--margin-bottom);
 }
 
 .tab-config__forward-button,
-.tab-config__backward-button{
+.tab-config__backward-button {
+  /*private*/
   position: absolute;
   z-index: 1;
   display: flex;
@@ -136,6 +171,7 @@
 }
 
 .tab-config__new-button {
+  /*private*/
   position: absolute;
   z-index: 1;
   display: flex;
@@ -152,27 +188,33 @@
 }
 
 .tab-config__new-button ez-icon {
-  --ez-icon--color: var(--color--secondary-700, #1C1D22);
+  /*public*/
+  --ez-icon--color: var(--snk-tab-config__new-button-icon--color);
 }
 
 .tab-config__backward-button {
+  /*private*/
   left: 0px;
   box-shadow: 10px 10px 5px 5px white;
   background: white;
 }
 
 .tab-config__forward-button {
+  /*private*/
   box-shadow: 10px 10px 5px 20px white;
   background: white;
 }
 
 .tab-config__forward-button::after,
 .tab-config__backward-button::after {
+  /*private*/
   content: '';
   display: flex;
-  background-color: var(--text--primary, #008561);
   width: 10px;
   height: 16px;
+
+  /*public*/
+  background-color: var(--snk-tab-config__forward-button--background-color);
 }
 
 .tab-config__forward-button::after {
@@ -190,83 +232,92 @@
 .tab-config__forward-button:hover::after,
 .tab-config__backward-button:hover::after {
   /*public*/
-  background-color: var(--color--primary, #4e4e4e);
+  background-color: var(--snk-tab-config__forward-button-hover--background-color);
 }
 
 .tab-config__new-button:hover ez-icon {
-  --ez-icon--color: var(--color--primary, #4e4e4e);
+  /*public*/
+  --ez-icon--color: var(--snk-tab-config__forward-button-hover--background-color);
 }
 
 .tab-config__hidden {
+  /*private*/
   display: none;
 }
 
 .tab-config__scroll::-webkit-scrollbar {
+  /*private*/
   display: none;
 }
 
 .tab-config__left-icon {
   /*public*/
-  padding-right: var(--space--small);
-  --ez-icon--color: var(--text--disable);
+  padding-right: var(--snk-tab-config__left-icon--padding-right);
+  --ez-icon--color: var(--snk-tab-config__left-icon--color);
 }
 
 .tab-config__left-icon--eye-off {
   /*public*/
-  --ez-icon--color: var(--text--disable, #AFB6C0);
+  --ez-icon--color: var(--snk-tab-config__left-icon--color);
 }
 
-.tab-config__right-icon {  
+.tab-config__right-icon {
+  /*private*/
   visibility: hidden;
 
   /*public*/
-  padding-left: var(--space--small);
+  padding-left: var(--snk-tab-config__left-icon--padding-right);
 }
 
 .tab-config__tab:hover .tab-config__right-icon {
+  /*private*/
   visibility: visible;
 }
 
-.tab-config__tab--is-active .tab-config__right-icon{
+.tab-config__tab--is-active .tab-config__right-icon {
+  /*private*/
   visibility: visible;
 
   /*public*/
-  --ez-icon--color: var(--color--primary);
+  --ez-icon--color: var(--snk-tab-config__tab-is-active--color);
 }
 
-.tab-config__tab:hover .tab-config__right-icon{
+.tab-config__tab:hover .tab-config__right-icon {
   /*public*/
-  --ez-icon--color: var(--color--secondary, #383c45);
+  --ez-icon--color: var(--snk-tab-config__tab-hover--color);
 }
 
-.tab-config__tab--is-active:hover .tab-config__right-icon{
+.tab-config__tab--is-active:hover .tab-config__right-icon {
   /*public*/
-  --ez-icon--color: var(--color--primary);
+  --ez-icon--color: var(--snk-tab-config__tab-is-active--color);
 }
 
 .tab-config__actions-button {
+  /*private*/
   --ez-actions-button__btn-action--min-width: 100px;
   visibility: hidden;
   opacity: 0;
-  transition:visibility 1s linear,opacity 0.3s linear;
+  transition: visibility 1s linear, opacity 0.3s linear;
 }
 
 .tab-config__tab:hover .tab-config__actions-button {
+  /*private*/
   visibility: visible;
   opacity: 1;
   transition: visibility 0.2s linear, opacity 0.10s linear;
 }
 
 [data-draggable-element] {
+  /*private*/
   cursor: grab;
 }
 
 .tab-config__tab-label-disabled {
   /*public*/
-  color: var(--text--disable, #AFB6C0);
+  color: var(--snk-tab-config__tab-label-disabled--color);
 }
 
 .tab-config__slot {
   /*public*/
-  margin-left: var(--space--small, 6px);
+  margin-left: var(--snk-tab-config__slot--margin-left);
 }