@gipisistemas/ngx-core 1.0.25 → 1.0.26

package/components/form-wrapper/form-wrapper.scss

@@ -99,7 +99,7 @@
             width: 100% !important;
             background-color: $white-100 !important;
 
-            @include breakpoints.tablet-view {
+            @include breakpoints.compact-view {
                 max-height: 100% !important;
             }
 

package/components/password-requirements/password-requirements.scss

@@ -20,7 +20,7 @@
         padding: 0.4rem 0;
         width: 100%;
 
-        @include media.tablet-view {
+        @include media.compact-view {
             gap: 3.2rem;
             padding: 0.6rem 0;
         }

package/components/select/select.scss

@@ -51,16 +51,18 @@
             gap: 0.4rem;
             max-width: 14rem;
             max-height: 2rem;
+            min-width: 0;
             padding: 0.2rem 0.8rem;
             border-radius: 0.6rem;
             background-color: #e0e1e2;
             font-size: 1.2rem;
             color: $font-color;
             font-weight: 600;
-            flex-shrink: 0;
+            flex: 0 1 auto;
         }
 
         .g-select-value-chip-label {
+            flex: 1 1 auto;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
@@ -79,6 +81,7 @@
             background: transparent;
             color: $font-color;
             cursor: pointer;
+            flex-shrink: 0;
 
             > span {
                 font-size: 1.4rem;
@@ -91,17 +94,6 @@
             }
         }
 
-        .g-select-value-chip-ellipsis {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            min-width: 2.4rem;
-            padding: 0 0.6rem;
-            font-size: $font-size;
-            color: $font-color;
-            flex-shrink: 0;
-        }
-
         .select-input-multiple-hidden {
             display: none;
         }

package/fesm2022/gipisistemas-ngx-core.mjs

@@ -1414,9 +1414,9 @@ class ArrayUtil {
 
 class CssUtil {
     static { this.BREAKPOINT_MOBILE_PX = 639.98; }
-    static { this.BREAKPOINT_MOBILE = '(max-width: 639.98px)'; }
-    static { this.BREAKPOINT_TABLET = '(min-width: 640px) and (max-width: 1279.98px)'; }
-    static { this.BREAKPOINT_DESKTOP = '(min-width: 1280px)'; }
+    static { this.BREAKPOINT_MOBILE = '(max-width: 767.98px)'; }
+    static { this.BREAKPOINT_TABLET = '(min-width: 768px) and (max-width: 1366.98px)'; }
+    static { this.BREAKPOINT_DESKTOP = '(min-width: 1367px)'; }
     static { this.BREAKPOINTS = {
         sm: this.BREAKPOINT_MOBILE,
         md: this.BREAKPOINT_TABLET,
@@ -14338,12 +14338,6 @@ class Select extends BaseControlValueAccessor {
             }
             return this.valueAsArray().slice(0, this.visibleSelectedCount());
         }, ...(ngDevMode ? [{ debugName: "visibleSelectedValues" }] : []));
-        this.hasHiddenSelectedValues = computed(() => {
-            if (!this.multiple()) {
-                return false;
-            }
-            return this.hiddenSelectedCount() > 0;
-        }, ...(ngDevMode ? [{ debugName: "hasHiddenSelectedValues" }] : []));
         this.hiddenSelectedCount = computed(() => {
             if (!this.multiple()) {
                 return 0;
@@ -14808,29 +14802,23 @@ class Select extends BaseControlValueAccessor {
         const actionsWidth = actions?.offsetWidth ?? 0;
         const availableWidth = Math.max(wrapperWidth - actionsWidth - 24, 0);
         if (availableWidth <= 0) {
-            this.visibleSelectedCount.set(0);
+            this.visibleSelectedCount.set(1);
             return;
         }
         const chipGap = 4;
-        const ellipsisWidth = 28;
         let usedWidth = 0;
         let visibleCount = 0;
-        for (let i = 0; i < selected.length; i++) {
-            const label = this.getOptionLabelByValue(selected[i]);
+        for (const selectedValue of selected) {
+            const label = this.getOptionLabelByValue(selectedValue);
             const chipWidth = this._measureChipWidth(label, input);
-            const remainingItems = selected.length - (i + 1);
-            const needsEllipsis = remainingItems > 0;
-            const projectedWidth = usedWidth +
-                (visibleCount > 0 ? chipGap : 0) +
-                chipWidth +
-                (needsEllipsis ? chipGap + ellipsisWidth : 0);
+            const projectedWidth = usedWidth + (visibleCount > 0 ? chipGap : 0) + chipWidth;
             if (projectedWidth > availableWidth) {
                 break;
             }
             usedWidth += (visibleCount > 0 ? chipGap : 0) + chipWidth;
             visibleCount++;
         }
-        this.visibleSelectedCount.set(visibleCount);
+        this.visibleSelectedCount.set(Math.max(visibleCount, 1));
     }
     _measureChipWidth(label, input) {
         if (!this._measureCanvas) {
@@ -15001,9 +14989,6 @@ class Select extends BaseControlValueAccessor {
                             </button>
                         </span>
                     }
-                    @if (hasHiddenSelectedValues()) {
-                        <span class="g-select-value-chip-ellipsis">...</span>
-                    }
                 </div>
             }
 
@@ -15242,9 +15227,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             </button>
                         </span>
                     }
-                    @if (hasHiddenSelectedValues()) {
-                        <span class="g-select-value-chip-ellipsis">...</span>
-                    }
                 </div>
             }
 
@@ -16355,8 +16337,8 @@ const SELECTORS = `
 const BREAKPOINTS = {
     base: '(min-width: 0px)',
     sm: '(max-width: 767px)',
-    md: '(min-width: 768px) and (max-width: 1279px)',
-    lg: '(min-width: 1280px)',
+    md: '(min-width: 768px) and (max-width: 1366px)',
+    lg: '(min-width: 1367px)',
 };
 class FlexLayoutDirective {
     constructor() {
@@ -19629,7 +19611,7 @@ class Sidenav {
         this._changeDetectorRef.detectChanges();
     }
     _getViewportSize(width) {
-        if (width <= 640) {
+        if (width <= 767) {
             return 'mobile';
         }
         if (width < 1366) {