@sankhyalabs/ezui 5.20.0-dev.2 → 5.20.0-dev.21

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

@@ -115,6 +115,7 @@ ez-icon {
 .list-container {
   /*public*/
   min-width: var(--ez-search__list-min-width);
+  overflow: auto;
 
   /*private*/
   position: relative;
@@ -130,6 +131,7 @@ ez-icon {
   /*public*/
   z-index: var(--more-visible, 2);
   max-height: 350px;
+  min-width: 150px;
   background-color: var(--ez-search--background-color--xlight);
   border-radius: var(--ez-search--border-radius);
   box-shadow: var(--shadow, 0px 0px 16px 0px #000);
@@ -195,7 +197,6 @@ ez-icon {
   /*public*/
   border-radius: var(--ez-search--border-radius-small);
   padding: var(--ez-search--space--small);
-  min-height: var(--ez-search__list-height);
   gap: var(--space--small, 6px);
 }
 

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

@@ -187,10 +187,9 @@ export class EzSearch {
     if (currentValue == undefined) {
       return;
     }
-    if (!this.showSelectedValue || currentValue.value == undefined) {
-      return currentValue.label;
-    }
-    return currentValue.label ? `${currentValue.value} - ${currentValue.label}` : currentValue.value;
+    let text = (!this.showSelectedValue || currentValue.value == undefined) ? currentValue.label : `${currentValue.value} - ${currentValue.label}`;
+    text = text.replace(new RegExp(this._startHighlightTag, 'g'), '').replace(new RegExp(this._endHighlightTag, 'g'), '');
+    return text;
   }
   getText() {
     const currentValue = this.getSelectedOption(this.value);
@@ -262,7 +261,7 @@ export class EzSearch {
       title: opt.label,
       details: opt.details
     };
-    return h("div", { style: { "height": "100%" }, onMouseDown: () => this.createOption(card), onMouseOver: () => this._preSelection = index }, h("ez-card-item", { item: card }));
+    return h("div", { style: { "height": "100%" }, class: index === this._preSelection ? "item preselected" : "item", id: `item_${opt.value}`, onMouseDown: () => this.createOption(card), onMouseOver: () => this._preSelection = index }, h("ez-card-item", { item: card }));
   }
   showOptions() {
     if (!this.enabled)
@@ -306,7 +305,7 @@ export class EzSearch {
   }
   scrollToOption(opt) {
     window.requestAnimationFrame(() => {
-      const liElem = (opt === null || opt === void 0 ? void 0 : opt.value) ? this._optionsList.querySelector(`li#item_${opt.value.replace(/[<>\[\]#=]/g, '\\$&').replace(/:/g, '\\:')}`) : undefined;
+      const liElem = (opt === null || opt === void 0 ? void 0 : opt.value) ? this._optionsList.querySelector(`div#item_${opt.value.replace(/[<>\[\]#=]/g, '\\$&').replace(/:/g, '\\:')}`) : undefined;
       if (liElem)
         liElem.scrollIntoView({ behavior: "smooth", block: "nearest" });
     });

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

@@ -0,0 +1,229 @@
+:host {
+
+    /* dimensions */
+    /*@doc Define a largura mínima do componente.*/
+    --ez-split-button--min-width: 24;
+    /*@doc Define a largura do componente.*/
+    --ez-split-button--width: 'auto';
+    /*@doc Define a altura do componente.*/
+    --ez-split-button__medium--height: 32px;
+    --ez-split-button__large--height: 42px;
+    /*@doc Define a largura do slot que contém o ícone.*/
+    --ez-split-button__medium-icon--width: 40px;
+    --ez-split-button__large-icon--width: 44px;
+    /*@doc Define o espaçamento entre o ícone e o label.*/
+    --ez-split-button__inline__icon--gap: 6px;
+    /*@doc Define o espaçamento superior ao label.*/
+    --ez-split-button__label--padding-top: 0px;
+    /*@doc Define o espaçamento inferior ao label.*/
+    --ez-split-button__label--padding-bottom: 0px;
+    /*@doc Define o espaçamento esquerdo ao ícone.*/
+    --ez-split-button__right-button--padding-left: 8px;
+    /* general */
+    /*@doc Define a cor do label.*/
+    --ez-split-button--color: var(--title--primary, #FFF);
+    /*@doc Define o tamanho do label.*/
+    --ez-split-button--font-size: var(--text--medium, 14px);
+    /*@doc Define a família da fonte do label.*/
+    --ez-split-button--font-family: var(--font-pattern, Arial);
+    /*@doc Define o peso da fonte do label.*/
+    --ez-split-button--font-weight: var(--text-weight--large);
+    /*@doc Define a cor de fundo do botão.*/
+    --ez-split-button--background-color: var(--background--medium, #008561);
+    /*@doc Define o raio da borda do botão.*/
+    --ez-split-button--border-radius: var(--border--radius-large, 12px);
+    /*@doc Define o estilo da borda do botão.*/
+    --ez-split-button--border: none;
+    /*@doc Define o alinhamento horizontal do conteúdo do botão.*/
+    --ez-split-button--justify-content: center;
+    /*@doc Define a cor do texto e do ícone quando o cursor está sobre o botão.*/
+    --ez-split-button--hover-color: var(--color--primary-600);
+    /*@doc Define a cor de fundo quando o cursor está sobre o botão.*/
+    --ez-split-button--hover--background-color: var(--background--medium, var(--ez-split-button--background-color));
+    /*@doc Define a cor do texto quando o botão está desabilitado.*/
+    --ez-split-button--disabled-color: var(--text--disable);
+    /*@doc Define a cor de fundo quando o botão está desabilitado.*/
+    --ez-split-button--disabled--background-color: var(--color--disable-secondary);
+    /*@doc Define o estido da borda quando o botão está selecionado.*/
+    --ez-split-button--focus--border: var(--border--medium, 2px) var(--color--primary-300);
+    /*@doc Define a sombra do botão quando selecionado.*/
+    --ez-split-button--focus--box-shadow: none;
+    /*@doc Define a cor do texto e do ícone ao ativar o botão.*/
+    --ez-split-button--active-color: var(--color--primary-700);
+     /*@doc Define a cor do fundo ao ativar o botão.*/
+    --ez-split-button--active--background-color: var(--background--strong);
+  }
+  
+  ez-icon {
+    --ez-icon--color: inherit;
+  }
+  
+  button {
+    /*private*/
+    position: relative;
+    display: flex;
+    align-items: center;
+    margin: 0;
+    cursor: pointer;
+    transition: background-color 0.2s linear;
+    white-space: nowrap;
+  
+    /*public*/
+    min-width: var(--ez-split-button--min-width);
+    width: var(--ez-split-button--width);
+    height: var(--ez-split-button__medium--height);
+    font-family: var(--ez-split-button--font-family);
+    font-size: var(--ez-split-button--font-size);
+    font-weight: var(--ez-split-button--font-weight);
+    padding: var(--ez-split-button__label--padding-top) 0 var(--ez-split-button__label--padding-bottom) 0;
+    border-top-left-radius: var(--ez-split-button--border-radius);
+    border-bottom-left-radius: var(--ez-split-button--border-radius);
+    background-color: var(--ez-split-button--background-color);
+    color: var(--ez-split-button--color);
+    fill: var(--ez-split-button--color);
+    border: var(--ez-split-button--border);
+    justify-content: var(--ez-split-button--justify-content);
+  }
+
+  label {
+    cursor: pointer;
+  }
+
+  button:active {
+    outline: none;
+    box-shadow: none;
+    background-color: var(--ez-split-button--active--background-color);
+    color: var(--ez-split-button--active-color);
+    fill: var(--ez-split-button--active-color);
+    --ez-icon--color: var(--ez-split-button--active-color);
+  }
+
+  .ez-split-button__left-button:focus,
+  .ez-split-button__right-button:focus {
+    outline: var(--ez-split-button--focus--border);
+    box-shadow: var(--ez-split-button--focus--box-shadow);
+  }
+
+  .ez-split-button__left-button:hover,
+  .ez-split-button__right-button:hover {
+    outline: none;
+    background-color: var(--ez-split-button--hover--background-color);
+    color: var(--ez-split-button--hover-color);
+    fill: var(--ez-split-button--hover-color);
+    --ez-icon--color: var(--ez-split-button--hover-color);
+  }
+
+  .ez-split-button__left-button:disabled,
+  .ez-split-button__left-button:disabled label,
+  .ez-split-button__right-button:disabled{
+    background-color: var(--ez-split-button--disabled--background-color);
+    color: var(--ez-split-button--disabled-color);
+    fill: var(--ez-split-button--disabled-color);
+    border: none;
+    --ez-icon--color: var(--ez-split-button--disabled-color);
+    cursor: not-allowed;
+  }
+
+  button.large {
+    height: var(--ez-split-button__large--height);
+  }
+
+  button.medium {
+    height: var(--ez-split-button__medium--height);
+  }
+
+  /*default*/
+  .default label {
+    padding: var(--ez-split-button__label--padding-top) 12px var(--ez-split-button__label--padding-bottom) 20px;
+  }
+
+  /*icon-left*/
+  .icon-left {
+    gap: var(--ez-split-button__inline__icon--gap);
+  }
+  
+  .icon-left label {
+    padding-right: 12px;
+  }
+
+  .icon-left ez-icon {
+    padding-left: 20px;
+  }
+
+  /*icon-only*/
+  .icon-only {
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+
+  .ez-split-button__right-button {
+    border-top-right-radius: var(--ez-split-button--border-radius);
+    border-bottom-right-radius: var(--ez-split-button--border-radius);
+    border-top-left-radius: 0;
+    border-bottom-left-radius:0;
+  }
+  
+  .ez-split-button__right-button--medium {
+    min-width: var(--ez-split-button__medium-icon--width);
+  }
+
+  .ez-split-button__right-button--large {
+    min-width: var(--ez-split-button__large-icon--width);
+  }
+
+  .ez-split-button__right-button--divider {
+    top: 10%;
+    bottom: 10%;
+  }
+  .ez-split-button__right-button--divider:before {
+    content: "";
+    position: absolute;
+    left: 0;
+    border-left: 1px solid rgba(0, 0, 0, 20%);
+    border-radius: 2px;
+    height: 75%;
+  }
+  
+  .btn-icon--medium {
+    min-width: --ez-split-button__medium-icon--width;
+  }
+  
+  .btn-icon--large {
+    min-width: --ez-split-button__large-icon--width;
+  }
+
+  .ez-split-button__right-button-container {
+    position: absolute;
+    left: 0;
+    padding-left: var(--ez-split-button__right-button--padding-left);
+  }
+  
+  .label-icon {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    color: var(--ez-split-button--color);
+  }
+  
+  .label-icon:active {
+    color: var(--ez-split-button--active-color);
+    fill: var(--ez-split-button--active-color);
+    --ez-icon--color: var(--ez-split-button--active-color);
+  }
+
+  .dropdown {
+    display: flex;
+  }
+  
+  .dropdown-content {
+    display: block;
+    position: absolute;
+    background-color: #f1f1f1;
+    min-width: 160px;
+    z-index: --ez-elevation--8;
+    border-radius: var(--ez-split-button--border-radius);
+  }
+
+  .dropdown-content > ez-dropdown {
+    position: relative;
+}