@gipisistemas/ngx-core 1.0.15 → 1.0.16

package/components/form-field/form-field.scss

@@ -37,7 +37,7 @@
         height: fit-content;
         font-family: $font-family;
         font-size: $font-size;
-        color: $black-300;
+        color: $font-color;
 
         .g-form-field-wrapper {
             display: flex;
@@ -51,11 +51,11 @@
             border-radius: 0.6rem;
             padding: 0;
             border: 0.1rem solid $black-400;
-            caret-color: $black-300;
             background-color: $white-100;
             font-family: $font-family;
             font-size: $font-size;
-            color: $black-300;
+            color: $font-color;
+            caret-color: $font-color;
 
             @include form-field-controls() {
                 flex: 1;

package/components/select/select.scss

@@ -7,8 +7,12 @@
 
     $white-100: utils.get-color($theme, white, 100);
     $white-300: utils.get-color($theme, white, 300);
+
     $black-200: utils.get-color($theme, black, 200);
     $black-300: utils.get-color($theme, black, 300);
+
+    $primary-500: utils.get-color($theme, primary, 500);
+
     $secondary-50: utils.get-color($theme, secondary, 50);
     $secondary-200: utils.get-color($theme, secondary, 200);
 
@@ -28,6 +32,80 @@
         height: fit-content;
         cursor: pointer;
 
+        .g-select-multiple-values {
+            display: flex;
+            align-items: center;
+            gap: 0.4rem;
+            flex: 1;
+            min-width: 0;
+            max-width: 100%;
+            overflow: hidden;
+            white-space: nowrap;
+            padding: 0.8rem 1rem;
+            pointer-events: auto;
+        }
+
+        .g-select-value-chip {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.4rem;
+            max-width: 14rem;
+            max-height: 2rem;
+            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;
+        }
+
+        .g-select-value-chip-label {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            min-width: 0;
+        }
+
+        .g-select-value-chip-remove {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 1.6rem;
+            height: 1.6rem;
+            padding: 0;
+            border: none;
+            border-radius: 50%;
+            background: transparent;
+            color: $font-color;
+            cursor: pointer;
+
+            > span {
+                font-size: 1.4rem;
+                line-height: 1;
+            }
+
+            &:hover {
+                color: $black-200;
+                background-color: $white-300;
+            }
+        }
+
+        .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;
+        }
+
         .g-select-actions {
             display: flex;
             align-items: center;
@@ -38,13 +116,13 @@
                 display: inline-flex;
                 align-items: center;
                 justify-content: center;
-                min-width: 2rem;
-                height: 2rem;
+                min-width: 2.4rem;
+                height: 2.2rem;
                 padding: 0 0.6rem;
                 margin-right: 0.4rem;
-                background-color: $secondary-50;
+                background-color: $primary-500;
                 color: $white-100;
-                border-radius: 1rem;
+                border-radius: 0.6rem;
                 font-size: 1.2rem;
                 font-weight: 600;
                 line-height: 1;
@@ -60,6 +138,12 @@
                 background: transparent;
                 transition: color 150ms;
                 cursor: pointer;
+                transition: all 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
+
+                &:disabled {
+                    opacity: 0.5;
+                    cursor: not-allowed;
+                }
 
                 &.clear {
                     width: 3.2rem;
@@ -69,6 +153,7 @@
 
                     &:hover {
                         color: $black-200;
+                        background-color: $white-300;
                     }
 
                     > span {
@@ -85,11 +170,6 @@
                         color: $black-200;
                     }
 
-                    &:disabled {
-                        opacity: 0.5;
-                        cursor: not-allowed;
-                    }
-
                     > span {
                         font-size: 2.6rem;
                         transition: transform 150ms;

package/fesm2022/gipisistemas-ngx-core.mjs

@@ -285,8 +285,8 @@ class DateUtil {
         if (this.isEmpty(inp)) {
             return null;
         }
-        const date = typeof inp === 'string' ? inp : DateTime.fromJSDate(inp).toFormat('yyyy-MM-dd');
-        return DateTime.fromFormat(date, 'yyyy-MM-dd').set({ hour: 12 }).toJSDate();
+        const date = typeof inp === 'string' ? DateTime.fromISO(inp) : DateTime.fromJSDate(inp);
+        return date.set({ hour: 12 }).toJSDate();
     }
     /**
      * Retorna a data e hora atual.
@@ -2161,6 +2161,7 @@ class StateUtil {
     }
 }
 
+/* eslint-disable max-len */
 class DocumentUtil {
     static _isLastChar(index, input) {
         return index === input.length - 1;
@@ -2385,11 +2386,24 @@ class DocumentUtil {
      * DocumentUtil.isValidCep('12345678'); // Retorna `true`.
      * DocumentUtil.isValidCep('1234567'); // Retorna `false`.
      * DocumentUtil.isValidCep('123456789'); // Retorna `false`.
+     * DocumentUtil.isValidCep('11111-111'); // Retorna `false`.
+     * DocumentUtil.isValidCep('99999-999'); // Retorna `false`.
      */
     static isValidCep(cep) {
-        if (StringUtil.isEmpty(cep) || NumberUtil.onlyNumbers(cep).length !== 8) {
+        if (StringUtil.isEmpty(cep)) {
             return false;
         }
+        const cleanCep = NumberUtil.onlyNumbers(cep);
+        // precisa ter 8 dígitos
+        if (cleanCep.length !== 8)
+            return false;
+        // não pode ser todos iguais
+        if (/^(\d)\1{7}$/.test(cleanCep))
+            return false;
+        const numCep = Number(cleanCep);
+        // faixa válida do brasil
+        if (numCep < 1000000 || numCep > 99999999)
+            return false;
         return true;
     }
     /**
@@ -2525,8 +2539,11 @@ class DocumentUtil {
      * - `displayCorrectDigit`: Se `true`, exibe o dígito verificador correto.
      * @returns `true` se a inscrição estadual for válida, caso contrário, `false`.
      * @example
-     * DocumentUtil.isValidIE('GO', '113687214'); // Retorna `{ isValid: true, message: '' }`.
-     * DocumentUtil.isValidIE('AC', '0185402241495'); // Retorna `{ isValid: false, message: 'Inscrição estadual inválida para AC. Motivo: Dígito verificador inválido.' }`.
+     * // Retorna `{ isValid: true, message: '' }`.
+     * DocumentUtil.isValidIE('GO', '113687214');
+     *
+     * // Retorna `{ isValid: false, message: 'Inscrição estadual inválida para AC. Motivo: Dígito verificador inválido.' }`.
+     * DocumentUtil.isValidIE('AC', '0185402241495');
      */
     static isValidIE(uf, stateRegistration, options) {
         const cIgnorarChar = './-';
@@ -6039,7 +6056,7 @@ class BaseAuthService extends BaseService {
         this.router = inject(Router);
         this.localStorageToken = inject(LocalStorageToken);
         this.sessionStorageToken = inject(SessionStorageToken);
-        this.TOKEN_KEY = 'auth_token';
+        this.TOKEN_KEY = 'token';
         this._token = signal(null, ...(ngDevMode ? [{ debugName: "_token" }] : []));
         this._user = signal(null, ...(ngDevMode ? [{ debugName: "_user" }] : []));
         this.token$ = toObservable(this._token);
@@ -14169,15 +14186,19 @@ class Select extends BaseControlValueAccessor {
         this._optionId = inject(_IdGenerator).getId('gipi-select-option-');
         this._uniqueId = inject(_IdGenerator).getId('gipi-select-');
         this._inputRef = viewChild('inputElement', ...(ngDevMode ? [{ debugName: "_inputRef" }] : []));
+        this._actionsRef = viewChild('actionsElement', ...(ngDevMode ? [{ debugName: "_actionsRef" }] : []));
         this._searchInputRef = viewChild('searchInput', ...(ngDevMode ? [{ debugName: "_searchInputRef" }] : []));
         this._optionElementsRef = viewChildren('optionElement', ...(ngDevMode ? [{ debugName: "_optionElementsRef" }] : []));
         this._optionsContainerRef = viewChild('optionsContainer', ...(ngDevMode ? [{ debugName: "_optionsContainerRef" }] : []));
         this._dropdownPanelRef = viewChild('dropdownPanel', ...(ngDevMode ? [{ debugName: "_dropdownPanelRef" }] : []));
         this._typeAheadBuffer = '';
         this._typeAheadTimeout = null;
+        this._resizeObserver = null;
+        this._measureCanvas = null;
         this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
         this.search = useSearch('', 0);
         this.activeIndex = signal(-1, ...(ngDevMode ? [{ debugName: "activeIndex" }] : []));
+        this.visibleSelectedCount = signal(2, ...(ngDevMode ? [{ debugName: "visibleSelectedCount" }] : []));
         this.positions = [
             {
                 originX: 'start',
@@ -14249,6 +14270,26 @@ class Select extends BaseControlValueAccessor {
             }
             return !ObjectUtil.isEmpty(value);
         }, ...(ngDevMode ? [{ debugName: "hasValue" }] : []));
+        this.visibleSelectedValues = computed(() => {
+            if (!this.multiple()) {
+                return [];
+            }
+            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;
+            }
+            const total = this.valueAsArray().length;
+            const visible = this.visibleSelectedValues().length;
+            return Math.max(total - visible, 0);
+        }, ...(ngDevMode ? [{ debugName: "hiddenSelectedCount" }] : []));
         this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
         this.placeholder = input('Selecionar', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
         this.help = input('', ...(ngDevMode ? [{ debugName: "help" }] : []));
@@ -14279,6 +14320,23 @@ class Select extends BaseControlValueAccessor {
             const term = this.search.term() ?? '';
             this.searchChange.emit(term);
         });
+        effect(() => {
+            this.multiple();
+            this.value();
+            this.options();
+            this.propertyLabel();
+            setTimeout(() => this._recalculateVisibleSelectedCount(), 0);
+        });
+    }
+    ngAfterViewInit() {
+        this._initResizeObserver();
+        setTimeout(() => this._recalculateVisibleSelectedCount(), 0);
+    }
+    ngOnDestroy() {
+        if (this._resizeObserver) {
+            this._resizeObserver.disconnect();
+            this._resizeObserver = null;
+        }
     }
     writeControlValue(value, setModelValue) {
         this.value.set(value);
@@ -14644,7 +14702,89 @@ class Select extends BaseControlValueAccessor {
     }
     getOptionLabelByValue(value) {
         const option = this.options().find((opt) => SelectOptionsUtil.isEqualOption(this.getOptionValue(opt), value));
-        return option ? this.getOptionLabel(option) : String(value);
+        if (option) {
+            return this.getOptionLabel(option);
+        }
+        if (value && typeof value === 'object') {
+            const propertyLabelFn = this.propertyLabel();
+            if (propertyLabelFn) {
+                return SelectOptionsUtil.getOptionLabel(value, propertyLabelFn);
+            }
+        }
+        return String(value);
+    }
+    _initResizeObserver() {
+        const input = this._inputRef()?.nativeElement;
+        if (!input) {
+            return;
+        }
+        const wrapper = input.parentElement;
+        if (!wrapper || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        this._resizeObserver = new ResizeObserver(() => this._recalculateVisibleSelectedCount());
+        this._resizeObserver.observe(wrapper);
+    }
+    _recalculateVisibleSelectedCount() {
+        if (!this.multiple()) {
+            this.visibleSelectedCount.set(0);
+            return;
+        }
+        const selected = this.valueAsArray();
+        if (ArrayUtil.isEmpty(selected)) {
+            this.visibleSelectedCount.set(0);
+            return;
+        }
+        const input = this._inputRef()?.nativeElement;
+        const actions = this._actionsRef()?.nativeElement;
+        const wrapper = input?.parentElement;
+        if (!input || !wrapper) {
+            this.visibleSelectedCount.set(Math.min(selected.length, 2));
+            return;
+        }
+        const wrapperWidth = wrapper.clientWidth;
+        const actionsWidth = actions?.offsetWidth ?? 0;
+        const availableWidth = Math.max(wrapperWidth - actionsWidth - 24, 0);
+        if (availableWidth <= 0) {
+            this.visibleSelectedCount.set(0);
+            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]);
+            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);
+            if (projectedWidth > availableWidth) {
+                break;
+            }
+            usedWidth += (visibleCount > 0 ? chipGap : 0) + chipWidth;
+            visibleCount++;
+        }
+        this.visibleSelectedCount.set(visibleCount);
+    }
+    _measureChipWidth(label, input) {
+        if (!this._measureCanvas) {
+            this._measureCanvas = document.createElement('canvas');
+        }
+        const ctx = this._measureCanvas.getContext('2d');
+        if (!ctx) {
+            return 120;
+        }
+        const style = window.getComputedStyle(input);
+        ctx.font = `${style.fontWeight} ${style.fontSize} ${style.fontFamily}`;
+        const textWidth = ctx.measureText(label).width;
+        // label + close button + paddings/gap
+        const maxLabelWidth = 140;
+        const clampedLabelWidth = Math.min(textWidth, maxLabelWidth);
+        return clampedLabelWidth + 32;
     }
     removeValue(value, event) {
         event.stopPropagation();
@@ -14761,7 +14901,7 @@ class Select extends BaseControlValueAccessor {
         this.notifyValueChange(newValue);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Select, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: Select, isStandalone: true, selector: "gipi-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, help: { classPropertyName: "help", publicName: "help", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, suggestion: { classPropertyName: "suggestion", publicName: "suggestion", isSignal: true, isRequired: false, transformFunction: null }, suggestionTooltip: { classPropertyName: "suggestionTooltip", publicName: "suggestionTooltip", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, controlErrors: { classPropertyName: "controlErrors", publicName: "controlErrors", isSignal: true, isRequired: true, transformFunction: null }, noOptionsText: { classPropertyName: "noOptionsText", publicName: "noOptionsText", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null }, compareBy: { classPropertyName: "compareBy", publicName: "compareBy", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, propertyLabel: { classPropertyName: "propertyLabel", publicName: "propertyLabel", isSignal: true, isRequired: false, transformFunction: null }, propertyValue: { classPropertyName: "propertyValue", publicName: "propertyValue", isSignal: true, isRequired: false, transformFunction: null }, optionsExclude: { classPropertyName: "optionsExclude", publicName: "optionsExclude", isSignal: true, isRequired: false, transformFunction: null }, optionsDisable: { classPropertyName: "optionsDisable", publicName: "optionsDisable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchChange: "searchChange", loadMoreClick: "loadMoreClick", opened: "opened", closed: "closed", optionsScroll: "optionsScroll" }, host: { properties: { "attr.id": "id()", "attr.name": "name()", "class.g-select-disabled": "$disabled()", "class.g-select-multiple": "multiple()" }, classAttribute: "g-select" }, providers: [provideValueAccessor(Select)], viewQueries: [{ propertyName: "_inputRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "_searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "_optionElementsRef", predicate: ["optionElement"], descendants: true, isSignal: true }, { propertyName: "_optionsContainerRef", first: true, predicate: ["optionsContainer"], descendants: true, isSignal: true }, { propertyName: "_dropdownPanelRef", first: true, predicate: ["dropdownPanel"], descendants: true, isSignal: true }], exportAs: ["gSelect"], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: Select, isStandalone: true, selector: "gipi-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, help: { classPropertyName: "help", publicName: "help", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, suggestion: { classPropertyName: "suggestion", publicName: "suggestion", isSignal: true, isRequired: false, transformFunction: null }, suggestionTooltip: { classPropertyName: "suggestionTooltip", publicName: "suggestionTooltip", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, controlErrors: { classPropertyName: "controlErrors", publicName: "controlErrors", isSignal: true, isRequired: true, transformFunction: null }, noOptionsText: { classPropertyName: "noOptionsText", publicName: "noOptionsText", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null }, compareBy: { classPropertyName: "compareBy", publicName: "compareBy", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, propertyLabel: { classPropertyName: "propertyLabel", publicName: "propertyLabel", isSignal: true, isRequired: false, transformFunction: null }, propertyValue: { classPropertyName: "propertyValue", publicName: "propertyValue", isSignal: true, isRequired: false, transformFunction: null }, optionsExclude: { classPropertyName: "optionsExclude", publicName: "optionsExclude", isSignal: true, isRequired: false, transformFunction: null }, optionsDisable: { classPropertyName: "optionsDisable", publicName: "optionsDisable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchChange: "searchChange", loadMoreClick: "loadMoreClick", opened: "opened", closed: "closed", optionsScroll: "optionsScroll" }, host: { properties: { "attr.id": "id()", "attr.name": "name()", "class.g-select-disabled": "$disabled()", "class.g-select-multiple": "multiple()" }, classAttribute: "g-select" }, providers: [provideValueAccessor(Select)], viewQueries: [{ propertyName: "_inputRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "_actionsRef", first: true, predicate: ["actionsElement"], descendants: true, isSignal: true }, { propertyName: "_searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "_optionElementsRef", predicate: ["optionElement"], descendants: true, isSignal: true }, { propertyName: "_optionsContainerRef", first: true, predicate: ["optionsContainer"], descendants: true, isSignal: true }, { propertyName: "_dropdownPanelRef", first: true, predicate: ["dropdownPanel"], descendants: true, isSignal: true }], exportAs: ["gSelect"], usesInheritance: true, ngImport: i0, template: `
         <gipi-form-field
             #trigger="cdkOverlayOrigin"
             cdkOverlayOrigin
@@ -14775,6 +14915,36 @@ class Select extends BaseControlValueAccessor {
             [required]="required()"
             [hasError]="hasError()"
         >
+            @if (multiple() && hasValue()) {
+                <div
+                    class="g-select-multiple-values"
+                    tabindex="-1"
+                    (blur)="onInputBlur()"
+                    (keydown)="onKeyDown($event)"
+                    (click)="onInputClick()"
+                >
+                    @for (selectedValue of visibleSelectedValues(); track $index) {
+                        <span class="g-select-value-chip">
+                            <span class="g-select-value-chip-label">
+                                {{ getOptionLabelByValue(selectedValue) }}
+                            </span>
+                            <button
+                                type="button"
+                                tabindex="-1"
+                                class="g-select-value-chip-remove"
+                                aria-label="Remover item"
+                                (click)="removeValue(selectedValue, $event)"
+                            >
+                                <span class="material-symbols-rounded">close</span>
+                            </button>
+                        </span>
+                    }
+                    @if (hasHiddenSelectedValues()) {
+                        <span class="g-select-value-chip-ellipsis">...</span>
+                    }
+                </div>
+            }
+
             <input
                 #inputElement
                 gInput
@@ -14783,29 +14953,31 @@ class Select extends BaseControlValueAccessor {
                 role="combobox"
                 class="select-input"
                 [class.select-input-open]="isOpen()"
+                [class.select-input-multiple-hidden]="multiple() && hasValue()"
                 [attr.id]="_controlId"
                 [attr.name]="_controlId"
                 [attr.aria-expanded]="isOpen()"
                 [attr.aria-haspopup]="'listbox'"
                 [attr.aria-controls]="_listboxId"
                 [attr.aria-label]="label() || placeholder()"
-                [placeholder]="placeholder()"
+                [placeholder]="multiple() && hasValue() ? '' : placeholder()"
                 [disabled]="$disabled()"
                 [required]="required()"
                 [readonly]="true"
-                [value]="getInputValue()"
+                [value]="multiple() ? '' : getInputValue()"
                 (blur)="onInputBlur()"
                 (keydown)="onKeyDown($event)"
                 (click)="onInputClick()"
             />
 
             <div
+                #actionsElement
                 gSuffix
                 class="g-select-actions"
                 [class.disabled]="$disabled()"
             >
-                @if (multiple() && hasValue() && valueAsArray().length > 1) {
-                    <span class="g-select-badge">+{{ valueAsArray().length - 1 }}</span>
+                @if (multiple() && hiddenSelectedCount() > 0) {
+                    <span class="g-select-badge">+{{ hiddenSelectedCount() }}</span>
                 }
 
                 @if (showClear() && hasValue() && !$disabled() && !required()) {
@@ -14984,6 +15156,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             [required]="required()"
             [hasError]="hasError()"
         >
+            @if (multiple() && hasValue()) {
+                <div
+                    class="g-select-multiple-values"
+                    tabindex="-1"
+                    (blur)="onInputBlur()"
+                    (keydown)="onKeyDown($event)"
+                    (click)="onInputClick()"
+                >
+                    @for (selectedValue of visibleSelectedValues(); track $index) {
+                        <span class="g-select-value-chip">
+                            <span class="g-select-value-chip-label">
+                                {{ getOptionLabelByValue(selectedValue) }}
+                            </span>
+                            <button
+                                type="button"
+                                tabindex="-1"
+                                class="g-select-value-chip-remove"
+                                aria-label="Remover item"
+                                (click)="removeValue(selectedValue, $event)"
+                            >
+                                <span class="material-symbols-rounded">close</span>
+                            </button>
+                        </span>
+                    }
+                    @if (hasHiddenSelectedValues()) {
+                        <span class="g-select-value-chip-ellipsis">...</span>
+                    }
+                </div>
+            }
+
             <input
                 #inputElement
                 gInput
@@ -14992,29 +15194,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 role="combobox"
                 class="select-input"
                 [class.select-input-open]="isOpen()"
+                [class.select-input-multiple-hidden]="multiple() && hasValue()"
                 [attr.id]="_controlId"
                 [attr.name]="_controlId"
                 [attr.aria-expanded]="isOpen()"
                 [attr.aria-haspopup]="'listbox'"
                 [attr.aria-controls]="_listboxId"
                 [attr.aria-label]="label() || placeholder()"
-                [placeholder]="placeholder()"
+                [placeholder]="multiple() && hasValue() ? '' : placeholder()"
                 [disabled]="$disabled()"
                 [required]="required()"
                 [readonly]="true"
-                [value]="getInputValue()"
+                [value]="multiple() ? '' : getInputValue()"
                 (blur)="onInputBlur()"
                 (keydown)="onKeyDown($event)"
                 (click)="onInputClick()"
             />
 
             <div
+                #actionsElement
                 gSuffix
                 class="g-select-actions"
                 [class.disabled]="$disabled()"
             >
-                @if (multiple() && hasValue() && valueAsArray().length > 1) {
-                    <span class="g-select-badge">+{{ valueAsArray().length - 1 }}</span>
+                @if (multiple() && hiddenSelectedCount() > 0) {
+                    <span class="g-select-badge">+{{ hiddenSelectedCount() }}</span>
                 }
 
                 @if (showClear() && hasValue() && !$disabled() && !required()) {
@@ -15189,7 +15393,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         LoadingModule,
                         CheckboxModule,
                     ] }]
-        }], ctorParameters: () => [], propDecorators: { _inputRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], _searchInputRef: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], _optionElementsRef: [{ type: i0.ViewChildren, args: ['optionElement', { isSignal: true }] }], _optionsContainerRef: [{ type: i0.ViewChild, args: ['optionsContainer', { isSignal: true }] }], _dropdownPanelRef: [{ type: i0.ViewChild, args: ['dropdownPanel', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], help: [{ type: i0.Input, args: [{ isSignal: true, alias: "help", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], suggestion: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestion", required: false }] }], suggestionTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestionTooltip", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], controlErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlErrors", required: true }] }], noOptionsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noOptionsText", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], showSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectAll", required: false }] }], compareBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareBy", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], propertyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "propertyLabel", required: false }] }], propertyValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "propertyValue", required: false }] }], optionsExclude: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsExclude", required: false }] }], optionsDisable: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsDisable", required: false }] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], loadMoreClick: [{ type: i0.Output, args: ["loadMoreClick"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], optionsScroll: [{ type: i0.Output, args: ["optionsScroll"] }] } });
+        }], ctorParameters: () => [], propDecorators: { _inputRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], _actionsRef: [{ type: i0.ViewChild, args: ['actionsElement', { isSignal: true }] }], _searchInputRef: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], _optionElementsRef: [{ type: i0.ViewChildren, args: ['optionElement', { isSignal: true }] }], _optionsContainerRef: [{ type: i0.ViewChild, args: ['optionsContainer', { isSignal: true }] }], _dropdownPanelRef: [{ type: i0.ViewChild, args: ['dropdownPanel', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], help: [{ type: i0.Input, args: [{ isSignal: true, alias: "help", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], suggestion: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestion", required: false }] }], suggestionTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestionTooltip", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], controlErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlErrors", required: true }] }], noOptionsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noOptionsText", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], showSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectAll", required: false }] }], compareBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareBy", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], propertyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "propertyLabel", required: false }] }], propertyValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "propertyValue", required: false }] }], optionsExclude: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsExclude", required: false }] }], optionsDisable: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsDisable", required: false }] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], loadMoreClick: [{ type: i0.Output, args: ["loadMoreClick"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], optionsScroll: [{ type: i0.Output, args: ["optionsScroll"] }] } });
 
 class SelectClientSide extends BaseControlValueAccessor {
     constructor() {
@@ -21772,7 +21976,6 @@ class Textarea extends BaseControlValueAccessor {
             return;
         }
         const processedValue = this._processValue(value);
-        this.value.set(processedValue);
         this.notifyValueChange(processedValue);
         this.markAsTouched();
     }
@@ -21837,7 +22040,6 @@ class Textarea extends BaseControlValueAccessor {
         if (this.$disabled()) {
             return;
         }
-        this.value.set('');
         this.notifyValueChange('');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Textarea, deps: [], target: i0.ɵɵFactoryTarget.Component }); }