@solcre-org/core-ui 2.20.22 → 2.20.24

package/assets/css/inc/components/header.css

@@ -68,8 +68,9 @@
 }
 
 .c-header__filter-item{
-    flex: 0 1 auto;
+    flex: 1 1 200px;
     min-width: 200px;
+    max-width: 400px;
 }
 
 .c-header__filter-actions{

package/assets/css/inc/components/native-select.css

@@ -0,0 +1,229 @@
+/* ******************************************** */
+/** COMPONENT: NATIVE SELECT (custom dropdown)  */
+/* ******************************************** */
+
+
+/* ---- Wrapper: positioning context ---- */
+
+.c-entry-input--native-select{
+    position: relative;
+}
+
+
+/* ---- Wrapper state: open ---- */
+
+.c-entry-input--native-select.is-open{
+    z-index: 10;
+}
+
+
+/* ---- Wrapper state: disabled ---- */
+
+.c-entry-input--native-select.is-disabled{
+    opacity: 0.6;
+    pointer-events: none;
+    cursor: not-allowed;
+}
+
+
+/* ---- Control area (clickable trigger) ---- */
+
+.c-native-select__control{
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.25em;
+    flex: 1;
+    min-height: 1.4em;
+    max-height: 5em;
+    overflow-y: auto;
+    cursor: pointer;
+    min-width: 0;
+}
+
+
+/* ---- Single value ---- */
+
+.c-native-select__single-value{
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    pointer-events: none;
+}
+
+
+/* ---- Placeholder ---- */
+
+.c-native-select__placeholder{
+    color: var(--_entry-input-placeholder-color);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    pointer-events: none;
+}
+
+
+/* ---- Multi-select chips container ---- */
+
+.c-native-select__values{
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.2em;
+    align-items: center;
+    flex: 1;
+    min-width: 0;
+}
+
+
+/* ---- Chip ---- */
+
+.c-native-select__chip{
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3em;
+    background-color: var(--form-highlighted-color, var(--color-neutral-300));
+    color: #3F4E6A;
+    border-radius: 4px;
+    padding: 0.2em 0.8em;
+    font-size: 0.9em;
+    line-height: 1.3;
+    white-space: nowrap;
+}
+
+
+/* ---- Chip remove ---- */
+
+.c-native-select__chip-remove{
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: none;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    font-size: 1.1em;
+    line-height: 1;
+    color: #3F4E6A;
+    opacity: 0.7;
+    transition: opacity 100ms ease-out;
+    -webkit-tap-highlight-color: transparent;
+}
+.c-native-select__chip-remove:hover{
+    opacity: 1;
+}
+.c-native-select__chip-remove-icon::before{
+    content: '\00d7';
+}
+
+
+/* ---- Search input ---- */
+
+.c-native-select__search{
+    border: none;
+    outline: none;
+    background: transparent;
+    font: inherit;
+    color: inherit;
+    padding: 0;
+    min-width: 4em;
+    flex: 1;
+    width: 100%;
+}
+
+
+/* ---- Clear button ---- */
+
+.c-native-select__clear{
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: none;
+    padding: 0 0.2em;
+    cursor: pointer;
+    font-size: 1.1em;
+    color: hsl(var(--_entry-input-addon-color-hsl));
+    opacity: 0.7;
+    transition: opacity 100ms ease-out, color 100ms ease-out;
+    -webkit-tap-highlight-color: transparent;
+    flex-shrink: 0;
+}
+.c-native-select__clear:hover{
+    opacity: 1;
+    color: var(--color-hover, var(--color-primary-400));
+}
+.c-native-select__clear-icon::before{
+    content: '\00d7';
+}
+
+
+/* ---- Arrow ---- */
+
+.c-entry-input--native-select .c-entry-input__addon{
+    cursor: pointer;
+}
+.c-entry-input--native-select .c-entry-input__addon.is-flipped{
+    transform: rotate(180deg);
+}
+
+
+/* ---- Dropdown panel ---- */
+
+.c-native-select__dropdown{
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    margin-top: 0.3em;
+    z-index: 10;
+}
+
+.c-native-select__options{
+    background: #f2f5fa;
+    border-radius: var(--_entry-input-br, 8px);
+    padding: 0.6em;
+    box-shadow: 1em 2.4em 3.4em -2em hsl(var(--color-neutral-900-hsl) / 25%);
+    max-height: 16em;
+    overflow-y: auto;
+}
+
+
+/* ---- Option items ---- */
+
+.c-native-select__option{
+    padding: 0.6em 0.8em;
+    color: #6A788C;
+    cursor: pointer;
+    border-radius: calc(var(--_entry-input-br, 8px) * 0.6);
+    transition: background-color 100ms ease-out, color 100ms ease-out;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.c-native-select__option.is-highlighted{
+    background-color: hsl(var(--color-primary-400-hsl) / 8%);
+    color: var(--color-primary-400);
+}
+.c-native-select__option.is-selected{
+    color: var(--color-primary-400);
+    font-weight: 500;
+}
+
+@media (hover: hover){
+    .c-native-select__option:hover{
+        background-color: hsl(var(--color-primary-400-hsl) / 8%);
+        color: var(--color-primary-400);
+    }
+}
+
+
+/* ---- No results ---- */
+
+.c-native-select__no-results{
+    padding: 0.8em;
+    text-align: center;
+    color: hsl(from hsl(var(--color-context-error-hsl)) h s 60%);
+    background-color: hsl(from hsl(var(--color-context-error-hsl)) h s 94%);
+    border-radius: var(--_entry-input-br, 8px);
+}

package/assets/css/inc/components/ng-select.css

@@ -208,5 +208,9 @@ app-server-select-field .ng-select:not(.ng-select-filtered):not(.ng-select-opene
 }
 
 .ng-select.ng-select-opened {
-    z-index: 1;
+    z-index: 999;
+}
+
+.ng-dropdown-panel {
+    z-index: 998;
 }

package/assets/css/main.css

@@ -81,6 +81,7 @@
  @import url(inc/components/mobile-nav.css); 
  @import url(inc/components/calendar.css); 
  @import url(inc/components/ng-select.css); 
+ @import url(inc/components/native-select.css); 
  
 /* Utilities */
  @import url(inc/utilities/headings.css);

package/assets/i18n/es/common.json

@@ -49,7 +49,7 @@
     "logout": "Cerrar sesión",
     "users": "Usuarios",
     "clients": "Clientes",
-    "administration": "Administración"
+    "administration": "Configuración"
   },
   "dialog": {
     "confirm": "Confirmar",