@vsn-ux/ngx-gaia 0.5.1 → 0.6.0

package/fesm2022/vsn-ux-ngx-gaia.mjs

@@ -344,11 +344,11 @@ const CHECKBOX_CONTROL_VALUE_ACCESSOR = {
 };
 // Increasing integer for generating unique ids for checkbox components.
 // Inspired by @angular/components
-let nextUniqueId$5 = 0;
+let nextUniqueId$6 = 0;
 class GaCheckboxComponent {
     tabindex;
     /** @ignore */
-    _uniqueId = `ga-checkbox-${++nextUniqueId$5}`;
+    _uniqueId = `ga-checkbox-${++nextUniqueId$6}`;
     /** @ignore */
     injector = inject(Injector);
     icons = { Minus, Check };
@@ -404,7 +404,7 @@ class GaCheckboxComponent {
         this.tabindex = tabindex;
     }
     ngDoCheck() {
-        const ngControl = this.injector.get(NgControl, null);
+        const ngControl = this.injector.get(NgControl, null, { self: true });
         if (ngControl) {
             this._invalidNgModel.set(!!ngControl.invalid);
             this._ngModelName.set(ngControl.name);
@@ -683,9 +683,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 }]
         }] });
 
-let nextUniqueId$4 = 0;
+let nextUniqueId$5 = 0;
 class GaInputDirective {
-    uniqueId = `ga-input-${++nextUniqueId$4}`;
+    uniqueId = `ga-input-${++nextUniqueId$5}`;
     implicitNgControl = inject(NgControl, {
         optional: true,
         self: true,
@@ -754,9 +754,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 }]
         }] });
 
-let nextUniqueId$3 = 0;
+let nextUniqueId$4 = 0;
 class GaFormFieldComponent {
-    uniqueId = `ga-form-field-${++nextUniqueId$3}`;
+    uniqueId = `ga-form-field-${++nextUniqueId$4}`;
     formControl = contentChild(GA_FORM_CONTROL, { descendants: true });
     controlId = computed(() => {
         return this.formControl()?._formControlId() ?? this.uniqueId;
@@ -1380,10 +1380,10 @@ const RADIO_CONTROL_VALUE_ACCESSOR = {
     multi: true,
 };
 // Increasing integer for generating unique ids for radio components.
-let nextUniqueId$2 = 0;
+let nextUniqueId$3 = 0;
 class GaRadioGroupComponent {
     /** Name of the radio button group. All radio buttons inside this group will use this name. */
-    name = input(`ga-radio-group-${nextUniqueId$2++}`);
+    name = input(`ga-radio-group-${nextUniqueId$3++}`);
     /**
      * Value for the radio-group. Should equal the value of the selected radio button if there is
      * a corresponding radio button with a matching value. If there is not such a corresponding
@@ -1442,13 +1442,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
         }] });
 
 // Increasing integer for generating unique ids for radio button components.
-let nextUniqueId$1 = 0;
+let nextUniqueId$2 = 0;
 class GaRadioButtonComponent {
     tabindex;
     radioGroup = inject(GaRadioGroupComponent, {
         optional: true,
     });
-    _uniqueId = `ga-radio-button-${++nextUniqueId$1}`;
+    _uniqueId = `ga-radio-button-${++nextUniqueId$2}`;
     /** The value attribute of the native input element */
     value = input(null);
     inputId = input(null, { alias: 'id' });
@@ -1538,18 +1538,22 @@ class GaOptionComponent {
     cdkOption = inject(CdkOption, { self: true });
     value = input(null);
     disabled = input(false, { transform: booleanAttribute });
-    withInput = input(false, { transform: booleanAttribute });
+    withInput = input(this.selectComponent.multiple(), {
+        transform: booleanAttribute,
+    });
     selected = computed(() => this._isSelected() &&
         this.cdkOption.value !== undefined &&
         this.cdkOption.value !== null &&
         this.cdkOption.value !== '');
     active = this._isActive.asReadonly();
     constructor() {
-        afterRender(() => {
-            // NOTE: currently there is no other reliable way to track the selected state,
-            // refactor once cdk will be based on signals or more appropriate events introduced
-            this._isSelected.set(this.cdkOption.isSelected());
-            this._isActive.set(this.cdkOption.isActive());
+        afterRender({
+            read: () => {
+                // NOTE: currently there is no other reliable way to track the selected state,
+                // refactor once cdk will be based on signals or more appropriate events introduced
+                this._isSelected.set(this.cdkOption.isSelected());
+                this._isActive.set(this.cdkOption.isActive());
+            },
         });
     }
     onClick() {
@@ -1594,29 +1598,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
 
 class GaSelectDefaultValueComponent {
     selectComponent = inject(GaSelectComponent);
-    optionViewValue = computed(() => {
+    icons = { X };
+    singleViewValue = computed(() => {
         const options = this.selectComponent.selectedOptions();
         if (!options.length) {
-            return null;
+            return '';
         }
-        return options
-            .map((option) => option.cdkOption.element.textContent?.trim() ?? '')
-            .join(', ');
+        return options[0].cdkOption.getLabel();
     });
+    deselectOption(option) {
+        this.selectComponent.deselectValue(option.cdkOption.value);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSelectDefaultValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: GaSelectDefaultValueComponent, isStandalone: true, selector: "ga-select-default-value", ngImport: i0, template: `{{ optionViewValue() }}`, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: GaSelectDefaultValueComponent, isStandalone: true, selector: "ga-select-default-value", host: { classAttribute: "ga-select__value" }, ngImport: i0, template: "@if (selectComponent.multiple()) {\n  @for (option of selectComponent.selectedOptions(); track option) {\n    <div class=\"ga-tag ga-tag ga-tag--interactive-selected\">\n      <span class=\"ga-tag__label\">{{ option.cdkOption.getLabel() }}</span>\n      <div class=\"ga-tag__separator\"></div>\n      <ga-icon\n        [icon]=\"icons.X\"\n        size=\"16\"\n        class=\"ga-tag__icon\"\n        (click)=\"deselectOption(option); $event.stopPropagation()\"\n      />\n    </div>\n  }\n} @else {\n  {{ singleViewValue() }}\n}\n", dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSelectDefaultValueComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'ga-select-default-value',
-                    template: `{{ optionViewValue() }}`,
-                }]
+            args: [{ selector: 'ga-select-default-value', imports: [GaIconModule], host: {
+                        class: 'ga-select__value',
+                    }, template: "@if (selectComponent.multiple()) {\n  @for (option of selectComponent.selectedOptions(); track option) {\n    <div class=\"ga-tag ga-tag ga-tag--interactive-selected\">\n      <span class=\"ga-tag__label\">{{ option.cdkOption.getLabel() }}</span>\n      <div class=\"ga-tag__separator\"></div>\n      <ga-icon\n        [icon]=\"icons.X\"\n        size=\"16\"\n        class=\"ga-tag__icon\"\n        (click)=\"deselectOption(option); $event.stopPropagation()\"\n      />\n    </div>\n  }\n} @else {\n  {{ singleViewValue() }}\n}\n" }]
         }] });
 
-let nextUniqueId = 0;
+let nextUniqueId$1 = 0;
 class GaSelectComponent {
-    _uniqueId = `ga-select-${++nextUniqueId}`;
+    _uniqueId = `ga-select-${++nextUniqueId$1}`;
     focusedTriggerElement = null;
     _onTouched;
     _onModelChanged;
@@ -1737,7 +1742,9 @@ class GaSelectComponent {
         });
     }
     ngDoCheck() {
-        const implicitNgControl = this.injector.get(NgControl, null);
+        const implicitNgControl = this.injector.get(NgControl, null, {
+            self: true,
+        });
         // we can rely on computed because `ivalid` of NgControl is not a signal, yet
         if (implicitNgControl) {
             this.implicitInvalid.set(!!implicitNgControl.invalid && !!implicitNgControl.dirty);
@@ -1799,11 +1806,7 @@ class GaSelectComponent {
         if (activeOption) {
             const { cdkOption } = activeOption;
             this.cdkListbox().toggle(cdkOption);
-            let { value } = this.cdkListbox();
-            if (!this.multiple()) {
-                [value] = value;
-            }
-            this.value.set(value);
+            this.syncValue();
         }
     }
     onInputKeyDown(event) {
@@ -1842,11 +1845,24 @@ class GaSelectComponent {
     }
     onOverlayDetach() {
         this._isOpen.set(false);
-        this.focusedTriggerElement?.focus();
+        if (this.inputSearch()?.nativeElement !== this.focusedTriggerElement) {
+            this.focusedTriggerElement?.focus();
+        }
         this.textValue.set('');
         this._onTouched?.();
         this.closed.emit();
     }
+    deselectValue(value) {
+        this.cdkListbox().deselectValue(value);
+        this.syncValue();
+    }
+    syncValue() {
+        let { value } = this.cdkListbox();
+        if (!this.multiple()) {
+            [value] = value;
+        }
+        this.value.set(value);
+    }
     setItemActive(direction) {
         const options = this.gaOptions();
         const currentIndex = options.findIndex(({ cdkOption }) => cdkOption.isActive());
@@ -1867,7 +1883,7 @@ class GaSelectComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: GaSelectComponent, isStandalone: true, selector: "ga-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, textValue: { classPropertyName: "textValue", publicName: "textValue", isSignal: true, isRequired: false, transformFunction: null }, leftIcon: { classPropertyName: "leftIcon", publicName: "leftIcon", isSignal: true, isRequired: false, transformFunction: null }, idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", textValue: "textValueChange", opened: "opened", closed: "closed" }, host: { attributes: { "role": "combobox", "aria-haspopup": "listbox" }, listeners: { "click": "toggle()", "keydown.arrowdown": "open(); $event.preventDefault()", "keydown.space": "open(); $event.preventDefault()", "keydown.enter": "open(); $event.preventDefault()" }, properties: { "attr.id": "id()", "class.ga-select--expanded": "isOpen()", "class.ga-select--disabled": "disabled()", "class.ga-select--invalid": "invalid()", "class.ga-select--empty": "!hasValue()", "attr.aria-expanded": "isOpen()", "attr.aria-controls": "cdkListbox().id", "attr.aria-invalid": "invalid()", "attr.aria-disabled": "disabled()", "attr.aria-owns": "searchable() ? cdkListbox().id : null", "attr.aria-activedescendant": "!searchable() ? activeDescendantId() : null", "attr.tabindex": "disabled() ? -1 : 0" }, classAttribute: "ga-select" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: GaSelectComponent, isStandalone: true, selector: "ga-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, textValue: { classPropertyName: "textValue", publicName: "textValue", isSignal: true, isRequired: false, transformFunction: null }, leftIcon: { classPropertyName: "leftIcon", publicName: "leftIcon", isSignal: true, isRequired: false, transformFunction: null }, idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", textValue: "textValueChange", opened: "opened", closed: "closed" }, host: { attributes: { "role": "combobox", "aria-haspopup": "listbox" }, listeners: { "click": "toggle()", "keydown.arrowdown": "open(); $event.preventDefault()", "keydown.space": "open(); $event.preventDefault()", "keydown.enter": "open(); $event.preventDefault()" }, properties: { "attr.id": "id()", "class.ga-select--multi": "multiple()", "class.ga-select--expanded": "isOpen()", "class.ga-select--disabled": "disabled()", "class.ga-select--invalid": "invalid()", "class.ga-select--empty": "!hasValue()", "attr.aria-expanded": "isOpen()", "attr.aria-controls": "cdkListbox().id", "attr.aria-invalid": "invalid()", "attr.aria-disabled": "disabled()", "attr.aria-owns": "searchable() ? cdkListbox().id : null", "attr.aria-activedescendant": "!searchable() ? activeDescendantId() : null", "attr.tabindex": "disabled() ? -1 : 0" }, classAttribute: "ga-select" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => GaSelectComponent),
@@ -1877,7 +1893,7 @@ class GaSelectComponent {
                 provide: GA_FORM_CONTROL,
                 useExisting: forwardRef(() => GaSelectComponent),
             },
-        ], queries: [{ propertyName: "gaOptions", predicate: GaOptionComponent, descendants: true, read: GaOptionComponent, isSignal: true }, { propertyName: "cdkListbox", first: true, predicate: CdkListbox, descendants: true, isSignal: true }, { propertyName: "customSelectValue", first: true, predicate: GaSelectValueComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputSearch", first: true, predicate: ["inputSearch"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["ngContent"], descendants: true, read: ElementRef, isSignal: true }], hostDirectives: [{ directive: i1$3.CdkOverlayOrigin }], ngImport: i0, template: "@if (leftIcon()) {\n  <ga-icon [icon]=\"leftIcon()!\" />\n}\n@if (searchable() && isOpen()) {\n  <input\n    #inputSearch\n    type=\"text\"\n    class=\"ga-select__input\"\n    aria-autocomplete=\"list\"\n    [value]=\"textValue()\"\n    (input)=\"textValue.set(inputSearch.value)\"\n    (click)=\"$event.stopPropagation()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-controls]=\"cdkListbox().id\"\n    [attr.aria-activedescendant]=\"activeDescendantId()\"\n    [placeholder]=\"placeholder()\"\n    (keydown)=\"onInputKeyDown($event)\"\n    tabindex=\"-1\"\n  />\n} @else if (hasValue()) {\n  <div class=\"ga-select__value\">\n    @if (customSelectValue()) {\n      <ng-content select=\"ga-select-value\" />\n    } @else {\n      <ga-select-default-value />\n    }\n  </div>\n} @else {\n  <div class=\"ga-select__placeholder\">\n    {{ placeholder() }}\n  </div>\n}\n<ga-icon [icon]=\"menuStatusIcon()\" />\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayLockPosition\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  (overlayOutsideClick)=\"close()\"\n  (attach)=\"onOverlayAttach()\"\n  (detach)=\"onOverlayDetach()\"\n>\n  <ng-content select=\"ga-select-dropdown\" />\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }, { kind: "ngmodule", type: GaButtonModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: GaSelectDefaultValueComponent, selector: "ga-select-default-value" }] });
+        ], queries: [{ propertyName: "gaOptions", predicate: GaOptionComponent, descendants: true, read: GaOptionComponent, isSignal: true }, { propertyName: "cdkListbox", first: true, predicate: CdkListbox, descendants: true, isSignal: true }, { propertyName: "customSelectValue", first: true, predicate: GaSelectValueComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputSearch", first: true, predicate: ["inputSearch"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["ngContent"], descendants: true, read: ElementRef, isSignal: true }], hostDirectives: [{ directive: i1$3.CdkOverlayOrigin }], ngImport: i0, template: "@if (leftIcon()) {\n  <ga-icon [icon]=\"leftIcon()!\" />\n}\n\n<div class=\"ga-select__main-area\">\n  @if (hasValue() && (!textValue() || multiple())) {\n    @if (customSelectValue()) {\n      <div class=\"ga-select__value\">\n        <ng-content select=\"ga-select-value\" />\n      </div>\n    } @else {\n      <ga-select-default-value />\n    }\n  } @else if (!searchable()) {\n    <div class=\"ga-select__placeholder\">\n      {{ placeholder() }}\n    </div>\n  }\n\n  @if (searchable()) {\n    <input\n      #inputSearch\n      type=\"text\"\n      class=\"ga-select__input\"\n      aria-autocomplete=\"list\"\n      [value]=\"textValue()\"\n      (input)=\"open(); textValue.set(inputSearch.value)\"\n      (click)=\"open(); $event.stopPropagation()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-controls]=\"cdkListbox().id\"\n      [attr.aria-activedescendant]=\"activeDescendantId()\"\n      [placeholder]=\"hasValue() ? '' : placeholder()\"\n      (keydown)=\"onInputKeyDown($event)\"\n      tabindex=\"-1\"\n    />\n  }\n</div>\n\n<div class=\"ga-select__suffix\">\n  <ga-icon [icon]=\"menuStatusIcon()\" class=\"ga-select__action-icon\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayLockPosition\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  (overlayOutsideClick)=\"close()\"\n  (attach)=\"onOverlayAttach()\"\n  (detach)=\"onOverlayDetach()\"\n>\n  <ng-content select=\"ga-select-dropdown\" />\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }, { kind: "ngmodule", type: GaButtonModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: GaSelectDefaultValueComponent, selector: "ga-select-default-value" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSelectComponent, decorators: [{
             type: Component,
@@ -1900,6 +1916,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                         role: 'combobox',
                         '[attr.id]': 'id()',
                         class: 'ga-select',
+                        '[class.ga-select--multi]': 'multiple()',
                         '[class.ga-select--expanded]': 'isOpen()',
                         '[class.ga-select--disabled]': 'disabled()',
                         '[class.ga-select--invalid]': 'invalid()',
@@ -1916,7 +1933,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                         '(keydown.arrowdown)': 'open(); $event.preventDefault()',
                         '(keydown.space)': 'open(); $event.preventDefault()',
                         '(keydown.enter)': 'open(); $event.preventDefault()',
-                    }, template: "@if (leftIcon()) {\n  <ga-icon [icon]=\"leftIcon()!\" />\n}\n@if (searchable() && isOpen()) {\n  <input\n    #inputSearch\n    type=\"text\"\n    class=\"ga-select__input\"\n    aria-autocomplete=\"list\"\n    [value]=\"textValue()\"\n    (input)=\"textValue.set(inputSearch.value)\"\n    (click)=\"$event.stopPropagation()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-controls]=\"cdkListbox().id\"\n    [attr.aria-activedescendant]=\"activeDescendantId()\"\n    [placeholder]=\"placeholder()\"\n    (keydown)=\"onInputKeyDown($event)\"\n    tabindex=\"-1\"\n  />\n} @else if (hasValue()) {\n  <div class=\"ga-select__value\">\n    @if (customSelectValue()) {\n      <ng-content select=\"ga-select-value\" />\n    } @else {\n      <ga-select-default-value />\n    }\n  </div>\n} @else {\n  <div class=\"ga-select__placeholder\">\n    {{ placeholder() }}\n  </div>\n}\n<ga-icon [icon]=\"menuStatusIcon()\" />\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayLockPosition\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  (overlayOutsideClick)=\"close()\"\n  (attach)=\"onOverlayAttach()\"\n  (detach)=\"onOverlayDetach()\"\n>\n  <ng-content select=\"ga-select-dropdown\" />\n</ng-template>\n" }]
+                    }, template: "@if (leftIcon()) {\n  <ga-icon [icon]=\"leftIcon()!\" />\n}\n\n<div class=\"ga-select__main-area\">\n  @if (hasValue() && (!textValue() || multiple())) {\n    @if (customSelectValue()) {\n      <div class=\"ga-select__value\">\n        <ng-content select=\"ga-select-value\" />\n      </div>\n    } @else {\n      <ga-select-default-value />\n    }\n  } @else if (!searchable()) {\n    <div class=\"ga-select__placeholder\">\n      {{ placeholder() }}\n    </div>\n  }\n\n  @if (searchable()) {\n    <input\n      #inputSearch\n      type=\"text\"\n      class=\"ga-select__input\"\n      aria-autocomplete=\"list\"\n      [value]=\"textValue()\"\n      (input)=\"open(); textValue.set(inputSearch.value)\"\n      (click)=\"open(); $event.stopPropagation()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-controls]=\"cdkListbox().id\"\n      [attr.aria-activedescendant]=\"activeDescendantId()\"\n      [placeholder]=\"hasValue() ? '' : placeholder()\"\n      (keydown)=\"onInputKeyDown($event)\"\n      tabindex=\"-1\"\n    />\n  }\n</div>\n\n<div class=\"ga-select__suffix\">\n  <ga-icon [icon]=\"menuStatusIcon()\" class=\"ga-select__action-icon\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayLockPosition\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  (overlayOutsideClick)=\"close()\"\n  (attach)=\"onOverlayAttach()\"\n  (detach)=\"onOverlayDetach()\"\n>\n  <ng-content select=\"ga-select-dropdown\" />\n</ng-template>\n" }]
         }], ctorParameters: () => [] });
 
 class GaOptgroupComponent {
@@ -2204,6 +2221,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 }]
         }] });
 
+let nextUniqueId = 0;
+class GaTextAreaDirective {
+    id = input(undefined);
+    disabled = input(false, { transform: booleanAttribute });
+    invalid = input(undefined, { transform: booleanAttribute });
+    _formControlId = computed(() => this.uniqueId());
+    _formControlDisabled = computed(() => this.disabledModel());
+    uniqueId = computed(() => this.id() ?? this.generatedUniqueId);
+    invalidInput = computed(() => this.invalid() ?? this.implicitInvalid());
+    generatedUniqueId = `ga-text-area-${++nextUniqueId}`;
+    injector = inject(Injector);
+    implicitInvalid = signal(false);
+    disabledModel = linkedSignal(() => this.disabled());
+    ngDoCheck() {
+        const ngControl = this.injector.get(NgControl, null, { self: true });
+        if (ngControl) {
+            this.implicitInvalid.set(!!ngControl.invalid && !!ngControl.dirty);
+            this.disabledModel.set(!!ngControl.disabled);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaTextAreaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.5", type: GaTextAreaDirective, isStandalone: true, selector: "[gaTextArea]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ga-text-area--invalid": "invalidInput()", "attr.id": "uniqueId()" }, classAttribute: "ga-text-area" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaTextAreaDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[gaTextArea]',
+                    host: {
+                        class: 'ga-text-area',
+                        '[class.ga-text-area--invalid]': 'invalidInput()',
+                        '[attr.id]': 'uniqueId()',
+                    },
+                }]
+        }] });
+
+class GaTextAreaModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaTextAreaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: GaTextAreaModule, imports: [GaTextAreaDirective], exports: [GaTextAreaDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaTextAreaModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaTextAreaModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [GaTextAreaDirective],
+                    exports: [GaTextAreaDirective],
+                }]
+        }] });
+
 /*
  * Public API Surface of ngx-gaia
  */
@@ -2212,5 +2277,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CHECKBOX_CONTROL_VALUE_ACCESSOR, GA_ALERT_I18N_FACTORY, GA_BASE_FONT_SIZE, GA_CHECKBOX_REQUIRED_VALIDATOR, GA_FORM_CONTROL, GA_ICON_DEFAULT_SIZE, GA_SELECT_REQUIRED_VALIDATOR, GA_TOOLTIP_DEFAULT_OFFSET, GaAlertComponent, GaAlertI18n, GaAlertI18nDefault, GaAlertModule, GaAlertTitleActionsComponent, GaAlertTitleComponent, GaBadgeComponent, GaBadgeModule, GaButtonDirective, GaButtonModule, GaCardComponent, GaCardModule, GaCheckboxComponent, GaCheckboxModule, GaCheckboxRequiredValidator, GaFieldInfoComponent, GaFieldLabelComponent, GaFormControlDirective, GaFormFieldComponent, GaFormFieldModule, GaIconButtonDirective, GaIconComponent, GaIconModule, GaInputComponent, GaInputDirective, GaInputModule, GaLinkDirective, GaLinkModule, GaMenuComponent, GaMenuItemComponent, GaMenuModule, GaMenuSeparatorComponent, GaMenuTitleComponent, GaMenuTriggerDirective, GaMenuTriggerIconComponent, GaOptgroupComponent, GaOptionComponent, GaRadioButtonComponent, GaRadioGroupComponent, GaRadioModule, GaSegmentedControlButtonDirective, GaSegmentedControlComponent, GaSegmentedControlIconButtonComponent, GaSegmentedControlModule, GaSegmentedControlTextButtonComponent, GaSelectComponent, GaSelectDropdownComponent, GaSelectDropdownSpinnerComponent, GaSelectModule, GaSelectRequiredValidator, GaSelectValueComponent, GaSpinnerComponent, GaSpinnerModule, GaTooltipComponent, GaTooltipDirective, GaTooltipModule, RADIO_CONTROL_VALUE_ACCESSOR, provideGaAlertI18n, provideGaBaseFontSize };
+export { CHECKBOX_CONTROL_VALUE_ACCESSOR, GA_ALERT_I18N_FACTORY, GA_BASE_FONT_SIZE, GA_CHECKBOX_REQUIRED_VALIDATOR, GA_FORM_CONTROL, GA_ICON_DEFAULT_SIZE, GA_SELECT_REQUIRED_VALIDATOR, GA_TOOLTIP_DEFAULT_OFFSET, GaAlertComponent, GaAlertI18n, GaAlertI18nDefault, GaAlertModule, GaAlertTitleActionsComponent, GaAlertTitleComponent, GaBadgeComponent, GaBadgeModule, GaButtonDirective, GaButtonModule, GaCardComponent, GaCardModule, GaCheckboxComponent, GaCheckboxModule, GaCheckboxRequiredValidator, GaFieldInfoComponent, GaFieldLabelComponent, GaFormControlDirective, GaFormFieldComponent, GaFormFieldModule, GaIconButtonDirective, GaIconComponent, GaIconModule, GaInputComponent, GaInputDirective, GaInputModule, GaLinkDirective, GaLinkModule, GaMenuComponent, GaMenuItemComponent, GaMenuModule, GaMenuSeparatorComponent, GaMenuTitleComponent, GaMenuTriggerDirective, GaMenuTriggerIconComponent, GaOptgroupComponent, GaOptionComponent, GaRadioButtonComponent, GaRadioGroupComponent, GaRadioModule, GaSegmentedControlButtonDirective, GaSegmentedControlComponent, GaSegmentedControlIconButtonComponent, GaSegmentedControlModule, GaSegmentedControlTextButtonComponent, GaSelectComponent, GaSelectDropdownComponent, GaSelectDropdownSpinnerComponent, GaSelectModule, GaSelectRequiredValidator, GaSelectValueComponent, GaSpinnerComponent, GaSpinnerModule, GaTextAreaDirective, GaTextAreaModule, GaTooltipComponent, GaTooltipDirective, GaTooltipModule, RADIO_CONTROL_VALUE_ACCESSOR, provideGaAlertI18n, provideGaBaseFontSize };
 //# sourceMappingURL=vsn-ux-ngx-gaia.mjs.map