@vsn-ux/ngx-gaia 0.14.5 → 0.14.6

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, inject, ElementRef, HostAttributeToken, input, numberAttribute, computed, ViewEncapsulation, Component, NgModule, Injectable, booleanAttribute, ChangeDetectionStrategy, output, contentChild, Directive, linkedSignal, signal, Injector, DestroyRef, effect, isSignal, afterEveryRender, isDevMode, forwardRef, LOCALE_ID, model, Renderer2, Attribute, untracked, HostListener, viewChild, TemplateRef, contentChildren, NgZone, Input, DOCUMENT, afterNextRender, viewChildren } from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, inject, ElementRef, HostAttributeToken, input, numberAttribute, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule, Injectable, booleanAttribute, output, contentChild, Directive, linkedSignal, signal, Injector, DestroyRef, effect, isSignal, afterEveryRender, isDevMode, forwardRef, LOCALE_ID, model, Renderer2, Attribute, untracked, HostListener, viewChild, TemplateRef, contentChildren, NgZone, Input, DOCUMENT, afterNextRender, viewChildren } from '@angular/core';
 import * as i1 from 'lucide-angular';
 import { LucideAngularModule, X, CircleCheck, TriangleAlert, OctagonAlert, Info, Check, Minus, ChevronDown, ChevronUp, ChevronRight, ChevronLeft, CalendarDays, CircleX, CircleDashed, CircleCheckBig } from 'lucide-angular';
 import { NgForm, ControlContainer, NgControl, NG_VALUE_ACCESSOR, NG_VALIDATORS, CheckboxRequiredValidator, RequiredValidator } from '@angular/forms';
@@ -63,11 +63,11 @@ class GaIconComponent {
     [name]="icon()"
     [color]="color()"
     [strokeWidth]="strokeWidth()"
-  />`, isInline: true, styles: [".ga-icon{display:inline-block;vertical-align:middle;-webkit-user-select:none;user-select:none;width:fit-content;height:fit-content}.ga-icon lucide-icon>svg{width:var(--ga-icon-size);height:var(--ga-icon-size)}\n"], dependencies: [{ kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], encapsulation: i0.ViewEncapsulation.None });
+  />`, isInline: true, styles: [".ga-icon{display:inline-block;vertical-align:middle;-webkit-user-select:none;user-select:none;width:fit-content;height:fit-content}.ga-icon lucide-icon>svg{width:var(--ga-icon-size);height:var(--ga-icon-size)}\n"], dependencies: [{ kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ga-icon', imports: [LucideAngularModule], template: `<lucide-icon
+            args: [{ selector: 'ga-icon', changeDetection: ChangeDetectionStrategy.OnPush, imports: [LucideAngularModule], template: `<lucide-icon
     [name]="icon()"
     [color]="color()"
     [strokeWidth]="strokeWidth()"
@@ -93,12 +93,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 
 class GaAlertTitleComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaAlertTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: GaAlertTitleComponent, isStandalone: true, selector: "ga-alert-title", host: { classAttribute: "ga-notification__title" }, ngImport: i0, template: `<ng-content />`, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: GaAlertTitleComponent, isStandalone: true, selector: "ga-alert-title", host: { classAttribute: "ga-notification__title" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaAlertTitleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ga-alert-title',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `<ng-content />`,
                     host: {
                         class: 'ga-notification__title',
@@ -172,11 +173,11 @@ class GaSpinnerComponent {
         style="transform-origin: center; animation: ga-spinner__animation 1100ms linear infinite;"
       ></circle>
     </svg>
-  `, isInline: true, styles: [".ga-spinner{display:inline-block}@keyframes ga-spinner__animation{0%{transform:rotate(0)}31.82%{transform:rotate(90deg)}63.64%{transform:rotate(180deg)}81.82%{transform:rotate(270deg)}to{transform:rotate(360deg)}}\n"], encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".ga-spinner{display:inline-block}@keyframes ga-spinner__animation{0%{transform:rotate(0)}31.82%{transform:rotate(90deg)}63.64%{transform:rotate(180deg)}81.82%{transform:rotate(270deg)}to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaSpinnerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ga-spinner', template: `
+            args: [{ selector: 'ga-spinner', changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <svg
       [attr.width]="size()"
       [attr.height]="size()"
@@ -416,11 +417,11 @@ class GaAlertComponent {
         return this.ariaLive() === 'assertive' ? 'alert' : 'status';
     }, ...(ngDevMode ? [{ debugName: "role" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GaAlertComponent, isStandalone: true, selector: "ga-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, explicitIcon: { classPropertyName: "explicitIcon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, explicitRole: { classPropertyName: "explicitRole", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, explicitAriaLive: { classPropertyName: "explicitAriaLive", publicName: "aria-live", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, progressLabel: { classPropertyName: "progressLabel", publicName: "progressLabel", isSignal: true, isRequired: false, transformFunction: null }, progressLabelledBy: { classPropertyName: "progressLabelledBy", publicName: "progressLabelledBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss" }, host: { attributes: { "aria-atomic": "true" }, properties: { "attr.role": "role()", "attr.aria-live": "ariaLive()", "class": "variantClass()" } }, queries: [{ propertyName: "title", first: true, predicate: GaAlertTitleComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (icon()) {\n  <ga-icon [icon]=\"icon()!\" class=\"ga-notification__icon\" />\n}\n<div class=\"ga-notification__content\">\n  @if (title()) {\n    <div class=\"ga-notification__heading\">\n      <ng-content select=\"ga-alert-title\" />\n      <ng-content select=\"ga-alert-title-actions\" />\n    </div>\n  }\n  <div class=\"ga-notification__description\">\n    <ng-content />\n  </div>\n</div>\n\n@if (hasProgress()) {\n  <div\n    role=\"progressbar\"\n    class=\"ga-notification__progress\"\n    [class.ga-notification__progress--indeterminate]=\"\n      progress() === 'indeterminate'\n    \"\n    [id]=\"progressId\"\n    [attr.aria-label]=\"progressLabel()\"\n    [attr.aria-labelledby]=\"progressLabelledBy()\"\n    [attr.aria-valuenow]=\"progressValue()\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n  >\n    <div\n      class=\"ga-notification__progress-bar\"\n      [style.width]=\"progressBarWidth()\"\n    ></div>\n  </div>\n}\n\n@if (dismissible()) {\n  <button\n    type=\"button\"\n    [gaIconButton]=\"dismissIcon\"\n    gaIconButtonVariant=\"ghost\"\n    (click)=\"dismiss.emit()\"\n  >\n    {{ i18n.dismissLabel }}\n  </button>\n}\n", dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }, { kind: "ngmodule", type: GaButtonModule }, { kind: "component", type: GaIconButtonDirective, selector: "button[gaIconButton], a[gaIconButton]", inputs: ["gaIconButton", "gaIconButtonVariant", "gaIconButtonLoading", "gaIconButtonLoadingLabel", "disabled"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GaAlertComponent, isStandalone: true, selector: "ga-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, explicitIcon: { classPropertyName: "explicitIcon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, explicitRole: { classPropertyName: "explicitRole", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, explicitAriaLive: { classPropertyName: "explicitAriaLive", publicName: "aria-live", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, progressLabel: { classPropertyName: "progressLabel", publicName: "progressLabel", isSignal: true, isRequired: false, transformFunction: null }, progressLabelledBy: { classPropertyName: "progressLabelledBy", publicName: "progressLabelledBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss" }, host: { attributes: { "aria-atomic": "true" }, properties: { "attr.role": "role()", "attr.aria-live": "ariaLive()", "class": "variantClass()" } }, queries: [{ propertyName: "title", first: true, predicate: GaAlertTitleComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (icon()) {\n  <ga-icon [icon]=\"icon()!\" class=\"ga-notification__icon\" />\n}\n<div class=\"ga-notification__content\">\n  @if (title()) {\n    <div class=\"ga-notification__heading\">\n      <ng-content select=\"ga-alert-title\" />\n      <ng-content select=\"ga-alert-title-actions\" />\n    </div>\n  }\n  <div class=\"ga-notification__description\">\n    <ng-content />\n  </div>\n</div>\n\n@if (hasProgress()) {\n  <div\n    role=\"progressbar\"\n    class=\"ga-notification__progress\"\n    [class.ga-notification__progress--indeterminate]=\"\n      progress() === 'indeterminate'\n    \"\n    [id]=\"progressId\"\n    [attr.aria-label]=\"progressLabel()\"\n    [attr.aria-labelledby]=\"progressLabelledBy()\"\n    [attr.aria-valuenow]=\"progressValue()\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n  >\n    <div\n      class=\"ga-notification__progress-bar\"\n      [style.width]=\"progressBarWidth()\"\n    ></div>\n  </div>\n}\n\n@if (dismissible()) {\n  <button\n    type=\"button\"\n    [gaIconButton]=\"dismissIcon\"\n    gaIconButtonVariant=\"ghost\"\n    (click)=\"dismiss.emit()\"\n  >\n    {{ i18n.dismissLabel }}\n  </button>\n}\n", dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }, { kind: "ngmodule", type: GaButtonModule }, { kind: "component", type: GaIconButtonDirective, selector: "button[gaIconButton], a[gaIconButton]", inputs: ["gaIconButton", "gaIconButtonVariant", "gaIconButtonLoading", "gaIconButtonLoadingLabel", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaAlertComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ga-alert', imports: [GaIconModule, GaButtonModule], host: {
+            args: [{ selector: 'ga-alert', changeDetection: ChangeDetectionStrategy.OnPush, imports: [GaIconModule, GaButtonModule], host: {
                         '[attr.role]': 'role()',
                         '[attr.aria-live]': 'ariaLive()',
                         'aria-atomic': 'true',
@@ -430,12 +431,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 
 class GaAlertTitleActionsComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaAlertTitleActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: GaAlertTitleActionsComponent, isStandalone: true, selector: "ga-alert-title-actions", host: { classAttribute: "ga-notification__title-actions" }, ngImport: i0, template: `<ng-content />`, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: GaAlertTitleActionsComponent, isStandalone: true, selector: "ga-alert-title-actions", host: { classAttribute: "ga-notification__title-actions" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaAlertTitleActionsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ga-alert-title-actions',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `<ng-content />`,
                     host: {
                         class: 'ga-notification__title-actions',
@@ -475,12 +477,13 @@ class GaBadgeComponent {
         return `ga-badge ga-badge--${this.type()} ga-badge--${this.variant()}`;
     }, ...(ngDevMode ? [{ debugName: "variantClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: GaBadgeComponent, isStandalone: true, selector: "ga-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "variantClass()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: GaBadgeComponent, isStandalone: true, selector: "ga-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "variantClass()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaBadgeComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ga-badge',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `<ng-content />`,
                     host: {
                         '[class]': `variantClass()`,
@@ -506,12 +509,13 @@ class GaCardComponent {
     selected = input(false, { ...(ngDevMode ? { debugName: "selected" } : {}), transform: booleanAttribute });
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: GaCardComponent, isStandalone: true, selector: "ga-card", inputs: { selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ga-card--selectable": "selectable()", "class.ga-card--selected": "selected()", "class.ga-card--disabled": "disabled()" }, classAttribute: "ga-card" }, ngImport: i0, template: `<ng-content />`, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: GaCardComponent, isStandalone: true, selector: "ga-card", inputs: { selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ga-card--selectable": "selectable()", "class.ga-card--selected": "selected()", "class.ga-card--disabled": "disabled()" }, classAttribute: "ga-card" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaCardComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ga-card',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `<ng-content />`,
                     host: {
                         class: 'ga-card',
@@ -1332,11 +1336,11 @@ class GaDatepickerComponent {
         return this.i18n.monthNames[monthIndex - 1]; // Convert from 1-12 to 0-11 for array access
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GaDatepickerComponent, isStandalone: true, selector: "ga-datepicker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "ga-calendar" }, ngImport: i0, template: "<div class=\"ga-calendar__header\">\n  <div class=\"ga-calendar__month-year\">\n    <button\n      type=\"button\"\n      class=\"ga-calendar__month-year-button\"\n      (click)=\"toggleMonthView()\"\n      [attr.aria-label]=\"i18n.selectMonthLabel\"\n    >\n      {{ getMonthName(viewDate().month) }}\n      <ga-icon\n        [icon]=\"viewMode() === 'month' ? icons.ChevronUp : icons.ChevronDown\"\n        size=\"16\"\n      />\n    </button>\n    <button\n      type=\"button\"\n      class=\"ga-calendar__month-year-button\"\n      (click)=\"toggleYearView()\"\n      [attr.aria-label]=\"i18n.selectYearLabel\"\n    >\n      {{ viewDate().year }}\n      <ga-icon\n        [icon]=\"viewMode() === 'year' ? icons.ChevronUp : icons.ChevronDown\"\n        size=\"16\"\n      />\n    </button>\n  </div>\n  @if (viewMode() !== 'month') {\n    <div class=\"ga-calendar__navigation\">\n      <button\n        type=\"button\"\n        class=\"ga-calendar__navigation-button\"\n        (click)=\"navigatePrevious()\"\n        [attr.aria-label]=\"i18n.previousLabel\"\n      >\n        <ga-icon [icon]=\"icons.ChevronLeft\" size=\"24\" />\n      </button>\n      <button\n        type=\"button\"\n        class=\"ga-calendar__navigation-button\"\n        (click)=\"navigateNext()\"\n        [attr.aria-label]=\"i18n.nextLabel\"\n      >\n        <ga-icon [icon]=\"icons.ChevronRight\" size=\"24\" />\n      </button>\n    </div>\n  }\n</div>\n\n@switch (viewMode()) {\n  @case ('day') {\n    <div class=\"ga-calendar__weekdays\">\n      @for (day of weekDays(); track day) {\n        <div class=\"ga-calendar__weekday\">{{ day }}</div>\n      }\n    </div>\n    <div class=\"ga-calendar__selection ga-calendar__selection--day\">\n      @for (\n        dateStruct of calendarDays();\n        track dateStruct.year + '-' + dateStruct.month + '-' + dateStruct.day\n      ) {\n        <button\n          type=\"button\"\n          class=\"ga-calendar__day\"\n          [class.ga-calendar__day--selected]=\"isSelected(dateStruct)\"\n          [class.ga-calendar__day--current]=\"isToday(dateStruct)\"\n          [class.ga-calendar__day--disabled]=\"isDateDisabled(dateStruct)\"\n          [class.ga-calendar__day--weekend]=\"isWeekend(dateStruct)\"\n          [disabled]=\"isDateDisabled(dateStruct)\"\n          (click)=\"selectDate(dateStruct)\"\n        >\n          {{ dateStruct.day }}\n        </button>\n      }\n    </div>\n  }\n  @case ('month') {\n    <div class=\"ga-calendar__selection ga-calendar__selection--month\">\n      @for (month of months(); track month.index) {\n        <button\n          type=\"button\"\n          class=\"ga-calendar__month\"\n          [class.ga-calendar__month--selected]=\"isSelectedMonth(month.index)\"\n          [class.ga-calendar__month--disabled]=\"isMonthDisabled(month.index)\"\n          [disabled]=\"isMonthDisabled(month.index)\"\n          (click)=\"selectMonth(month.index)\"\n        >\n          {{ month.shortName }}\n        </button>\n      }\n    </div>\n  }\n  @case ('year') {\n    <div class=\"ga-calendar__selection ga-calendar__selection--year\">\n      @for (year of years(); track year) {\n        <button\n          type=\"button\"\n          class=\"ga-calendar__year\"\n          [class.ga-calendar__year--selected]=\"isSelectedYear(year)\"\n          [class.ga-calendar__year--disabled]=\"isYearDisabled(year)\"\n          [disabled]=\"isYearDisabled(year)\"\n          (click)=\"selectYear(year)\"\n        >\n          {{ year }}\n        </button>\n      }\n    </div>\n  }\n}\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GaDatepickerComponent, isStandalone: true, selector: "ga-datepicker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "ga-calendar" }, ngImport: i0, template: "<div class=\"ga-calendar__header\">\n  <div class=\"ga-calendar__month-year\">\n    <button\n      type=\"button\"\n      class=\"ga-calendar__month-year-button\"\n      (click)=\"toggleMonthView()\"\n      [attr.aria-label]=\"i18n.selectMonthLabel\"\n    >\n      {{ getMonthName(viewDate().month) }}\n      <ga-icon\n        [icon]=\"viewMode() === 'month' ? icons.ChevronUp : icons.ChevronDown\"\n        size=\"16\"\n      />\n    </button>\n    <button\n      type=\"button\"\n      class=\"ga-calendar__month-year-button\"\n      (click)=\"toggleYearView()\"\n      [attr.aria-label]=\"i18n.selectYearLabel\"\n    >\n      {{ viewDate().year }}\n      <ga-icon\n        [icon]=\"viewMode() === 'year' ? icons.ChevronUp : icons.ChevronDown\"\n        size=\"16\"\n      />\n    </button>\n  </div>\n  @if (viewMode() !== 'month') {\n    <div class=\"ga-calendar__navigation\">\n      <button\n        type=\"button\"\n        class=\"ga-calendar__navigation-button\"\n        (click)=\"navigatePrevious()\"\n        [attr.aria-label]=\"i18n.previousLabel\"\n      >\n        <ga-icon [icon]=\"icons.ChevronLeft\" size=\"24\" />\n      </button>\n      <button\n        type=\"button\"\n        class=\"ga-calendar__navigation-button\"\n        (click)=\"navigateNext()\"\n        [attr.aria-label]=\"i18n.nextLabel\"\n      >\n        <ga-icon [icon]=\"icons.ChevronRight\" size=\"24\" />\n      </button>\n    </div>\n  }\n</div>\n\n@switch (viewMode()) {\n  @case ('day') {\n    <div class=\"ga-calendar__weekdays\">\n      @for (day of weekDays(); track day) {\n        <div class=\"ga-calendar__weekday\">{{ day }}</div>\n      }\n    </div>\n    <div class=\"ga-calendar__selection ga-calendar__selection--day\">\n      @for (\n        dateStruct of calendarDays();\n        track dateStruct.year + '-' + dateStruct.month + '-' + dateStruct.day\n      ) {\n        <button\n          type=\"button\"\n          class=\"ga-calendar__day\"\n          [class.ga-calendar__day--selected]=\"isSelected(dateStruct)\"\n          [class.ga-calendar__day--current]=\"isToday(dateStruct)\"\n          [class.ga-calendar__day--disabled]=\"isDateDisabled(dateStruct)\"\n          [class.ga-calendar__day--weekend]=\"isWeekend(dateStruct)\"\n          [disabled]=\"isDateDisabled(dateStruct)\"\n          (click)=\"selectDate(dateStruct)\"\n        >\n          {{ dateStruct.day }}\n        </button>\n      }\n    </div>\n  }\n  @case ('month') {\n    <div class=\"ga-calendar__selection ga-calendar__selection--month\">\n      @for (month of months(); track month.index) {\n        <button\n          type=\"button\"\n          class=\"ga-calendar__month\"\n          [class.ga-calendar__month--selected]=\"isSelectedMonth(month.index)\"\n          [class.ga-calendar__month--disabled]=\"isMonthDisabled(month.index)\"\n          [disabled]=\"isMonthDisabled(month.index)\"\n          (click)=\"selectMonth(month.index)\"\n        >\n          {{ month.shortName }}\n        </button>\n      }\n    </div>\n  }\n  @case ('year') {\n    <div class=\"ga-calendar__selection ga-calendar__selection--year\">\n      @for (year of years(); track year) {\n        <button\n          type=\"button\"\n          class=\"ga-calendar__year\"\n          [class.ga-calendar__year--selected]=\"isSelectedYear(year)\"\n          [class.ga-calendar__year--disabled]=\"isYearDisabled(year)\"\n          [disabled]=\"isYearDisabled(year)\"\n          (click)=\"selectYear(year)\"\n        >\n          {{ year }}\n        </button>\n      }\n    </div>\n  }\n}\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaDatepickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ga-datepicker', imports: [GaIconModule], host: {
+            args: [{ selector: 'ga-datepicker', changeDetection: ChangeDetectionStrategy.OnPush, imports: [GaIconModule], host: {
                         class: 'ga-calendar',
                     }, template: "<div class=\"ga-calendar__header\">\n  <div class=\"ga-calendar__month-year\">\n    <button\n      type=\"button\"\n      class=\"ga-calendar__month-year-button\"\n      (click)=\"toggleMonthView()\"\n      [attr.aria-label]=\"i18n.selectMonthLabel\"\n    >\n      {{ getMonthName(viewDate().month) }}\n      <ga-icon\n        [icon]=\"viewMode() === 'month' ? icons.ChevronUp : icons.ChevronDown\"\n        size=\"16\"\n      />\n    </button>\n    <button\n      type=\"button\"\n      class=\"ga-calendar__month-year-button\"\n      (click)=\"toggleYearView()\"\n      [attr.aria-label]=\"i18n.selectYearLabel\"\n    >\n      {{ viewDate().year }}\n      <ga-icon\n        [icon]=\"viewMode() === 'year' ? icons.ChevronUp : icons.ChevronDown\"\n        size=\"16\"\n      />\n    </button>\n  </div>\n  @if (viewMode() !== 'month') {\n    <div class=\"ga-calendar__navigation\">\n      <button\n        type=\"button\"\n        class=\"ga-calendar__navigation-button\"\n        (click)=\"navigatePrevious()\"\n        [attr.aria-label]=\"i18n.previousLabel\"\n      >\n        <ga-icon [icon]=\"icons.ChevronLeft\" size=\"24\" />\n      </button>\n      <button\n        type=\"button\"\n        class=\"ga-calendar__navigation-button\"\n        (click)=\"navigateNext()\"\n        [attr.aria-label]=\"i18n.nextLabel\"\n      >\n        <ga-icon [icon]=\"icons.ChevronRight\" size=\"24\" />\n      </button>\n    </div>\n  }\n</div>\n\n@switch (viewMode()) {\n  @case ('day') {\n    <div class=\"ga-calendar__weekdays\">\n      @for (day of weekDays(); track day) {\n        <div class=\"ga-calendar__weekday\">{{ day }}</div>\n      }\n    </div>\n    <div class=\"ga-calendar__selection ga-calendar__selection--day\">\n      @for (\n        dateStruct of calendarDays();\n        track dateStruct.year + '-' + dateStruct.month + '-' + dateStruct.day\n      ) {\n        <button\n          type=\"button\"\n          class=\"ga-calendar__day\"\n          [class.ga-calendar__day--selected]=\"isSelected(dateStruct)\"\n          [class.ga-calendar__day--current]=\"isToday(dateStruct)\"\n          [class.ga-calendar__day--disabled]=\"isDateDisabled(dateStruct)\"\n          [class.ga-calendar__day--weekend]=\"isWeekend(dateStruct)\"\n          [disabled]=\"isDateDisabled(dateStruct)\"\n          (click)=\"selectDate(dateStruct)\"\n        >\n          {{ dateStruct.day }}\n        </button>\n      }\n    </div>\n  }\n  @case ('month') {\n    <div class=\"ga-calendar__selection ga-calendar__selection--month\">\n      @for (month of months(); track month.index) {\n        <button\n          type=\"button\"\n          class=\"ga-calendar__month\"\n          [class.ga-calendar__month--selected]=\"isSelectedMonth(month.index)\"\n          [class.ga-calendar__month--disabled]=\"isMonthDisabled(month.index)\"\n          [disabled]=\"isMonthDisabled(month.index)\"\n          (click)=\"selectMonth(month.index)\"\n        >\n          {{ month.shortName }}\n        </button>\n      }\n    </div>\n  }\n  @case ('year') {\n    <div class=\"ga-calendar__selection ga-calendar__selection--year\">\n      @for (year of years(); track year) {\n        <button\n          type=\"button\"\n          class=\"ga-calendar__year\"\n          [class.ga-calendar__year--selected]=\"isSelectedYear(year)\"\n          [class.ga-calendar__year--disabled]=\"isYearDisabled(year)\"\n          [disabled]=\"isYearDisabled(year)\"\n          (click)=\"selectYear(year)\"\n        >\n          {{ year }}\n        </button>\n      }\n    </div>\n  }\n}\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }] } });
@@ -1408,11 +1412,11 @@ class GaInputLoadingComponent {
     announcement = input('', ...(ngDevMode ? [{ debugName: "announcement" }] : []));
     ariaLive = input('polite', ...(ngDevMode ? [{ debugName: "ariaLive" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaInputLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: GaInputLoadingComponent, isStandalone: true, selector: "ga-input-loading", inputs: { announcement: { classPropertyName: "announcement", publicName: "announcement", isSignal: true, isRequired: false, transformFunction: null }, ariaLive: { classPropertyName: "ariaLive", publicName: "ariaLive", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status" }, properties: { "attr.aria-label": "announcement() || null", "attr.aria-live": "ariaLive()" } }, ngImport: i0, template: `<ga-spinner size="16" />`, isInline: true, styles: [":host{display:inline-flex}\n"], dependencies: [{ kind: "component", type: GaSpinnerComponent, selector: "ga-spinner", inputs: ["size"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: GaInputLoadingComponent, isStandalone: true, selector: "ga-input-loading", inputs: { announcement: { classPropertyName: "announcement", publicName: "announcement", isSignal: true, isRequired: false, transformFunction: null }, ariaLive: { classPropertyName: "ariaLive", publicName: "ariaLive", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status" }, properties: { "attr.aria-label": "announcement() || null", "attr.aria-live": "ariaLive()" } }, ngImport: i0, template: `<ga-spinner size="16" />`, isInline: true, styles: [":host{display:inline-flex}\n"], dependencies: [{ kind: "component", type: GaSpinnerComponent, selector: "ga-spinner", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaInputLoadingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ga-input-loading', template: `<ga-spinner size="16" />`, imports: [GaSpinnerComponent], host: {
+            args: [{ selector: 'ga-input-loading', changeDetection: ChangeDetectionStrategy.OnPush, template: `<ga-spinner size="16" />`, imports: [GaSpinnerComponent], host: {
                         role: 'status',
                         '[attr.aria-label]': 'announcement() || null',
                         '[attr.aria-live]': 'ariaLive()',
@@ -1523,11 +1527,11 @@ class GaDatepickerToggleComponent {
         this.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaDatepickerToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: GaDatepickerToggleComponent, isStandalone: true, selector: "ga-datepicker-toggle", inputs: { for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "keydown.escape": "close()" } }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"ga-datepicker-toggle\"\n  [disabled]=\"for().disabled()\"\n  (click)=\"toggle()\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-haspopup]=\"true\"\n  [attr.aria-label]=\"i18n.openCalendarLabel\"\n  tabindex=\"-1\"\n>\n  <ga-icon [icon]=\"icons.CalendarDays\" size=\"24\" />\n</button>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayLockPosition\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n  (overlayOutsideClick)=\"close()\"\n  (overlayKeydown)=\"$event.code === 'Escape' && close()\"\n>\n  <div\n    class=\"ga-datepicker\"\n    animate.enter=\"ga-animation-reveal\"\n    animate.leave=\"ga-animation-dismiss\"\n  >\n    <ga-datepicker\n      [value]=\"for().value()\"\n      (valueChange)=\"onDatepickerValueChange($event)\"\n      [min]=\"for().min()\"\n      [max]=\"for().max()\"\n    />\n    <div class=\"ga-datepicker__footer\">\n      <button type=\"button\" gaButton (click)=\"setToday()\">\n        {{ i18n.todayButtonLabel }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n", styles: [".ga-datepicker__footer{text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }, { kind: "ngmodule", type: GaButtonModule }, { kind: "component", type: GaButtonDirective, selector: "button[gaButton], a[gaButton]", inputs: ["gaButton", "gaButtonLoading", "gaButtonLoadingLabel", "disabled"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$1.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", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: GaDatepickerComponent, selector: "ga-datepicker", inputs: ["value", "min", "max"], outputs: ["valueChange"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: GaDatepickerToggleComponent, isStandalone: true, selector: "ga-datepicker-toggle", inputs: { for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "keydown.escape": "close()" } }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"ga-datepicker-toggle\"\n  [disabled]=\"for().disabled()\"\n  (click)=\"toggle()\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-haspopup]=\"true\"\n  [attr.aria-label]=\"i18n.openCalendarLabel\"\n  tabindex=\"-1\"\n>\n  <ga-icon [icon]=\"icons.CalendarDays\" size=\"24\" />\n</button>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayLockPosition\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n  (overlayOutsideClick)=\"close()\"\n  (overlayKeydown)=\"$event.code === 'Escape' && close()\"\n>\n  <div\n    class=\"ga-datepicker\"\n    animate.enter=\"ga-animation-reveal\"\n    animate.leave=\"ga-animation-dismiss\"\n  >\n    <ga-datepicker\n      [value]=\"for().value()\"\n      (valueChange)=\"onDatepickerValueChange($event)\"\n      [min]=\"for().min()\"\n      [max]=\"for().max()\"\n    />\n    <div class=\"ga-datepicker__footer\">\n      <button type=\"button\" gaButton (click)=\"setToday()\">\n        {{ i18n.todayButtonLabel }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n", styles: [".ga-datepicker__footer{text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }, { kind: "ngmodule", type: GaButtonModule }, { kind: "component", type: GaButtonDirective, selector: "button[gaButton], a[gaButton]", inputs: ["gaButton", "gaButtonLoading", "gaButtonLoadingLabel", "disabled"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$1.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", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: GaDatepickerComponent, selector: "ga-datepicker", inputs: ["value", "min", "max"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaDatepickerToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ga-datepicker-toggle', imports: [GaIconModule, GaButtonModule, OverlayModule, GaDatepickerComponent], encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: 'ga-datepicker-toggle', changeDetection: ChangeDetectionStrategy.OnPush, imports: [GaIconModule, GaButtonModule, OverlayModule, GaDatepickerComponent], encapsulation: ViewEncapsulation.None, host: {
                         '(keydown.escape)': 'close()',
                     }, template: "<button\n  type=\"button\"\n  class=\"ga-datepicker-toggle\"\n  [disabled]=\"for().disabled()\"\n  (click)=\"toggle()\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-haspopup]=\"true\"\n  [attr.aria-label]=\"i18n.openCalendarLabel\"\n  tabindex=\"-1\"\n>\n  <ga-icon [icon]=\"icons.CalendarDays\" size=\"24\" />\n</button>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayLockPosition\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n  (overlayOutsideClick)=\"close()\"\n  (overlayKeydown)=\"$event.code === 'Escape' && close()\"\n>\n  <div\n    class=\"ga-datepicker\"\n    animate.enter=\"ga-animation-reveal\"\n    animate.leave=\"ga-animation-dismiss\"\n  >\n    <ga-datepicker\n      [value]=\"for().value()\"\n      (valueChange)=\"onDatepickerValueChange($event)\"\n      [min]=\"for().min()\"\n      [max]=\"for().max()\"\n    />\n    <div class=\"ga-datepicker__footer\">\n      <button type=\"button\" gaButton (click)=\"setToday()\">\n        {{ i18n.todayButtonLabel }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n", styles: [".ga-datepicker__footer{text-align:center}\n"] }]
         }], propDecorators: { for: [{ type: i0.Input, args: [{ isSignal: true, alias: "for", required: true }] }] } });
@@ -2249,11 +2253,11 @@ class GaInputClearButtonComponent {
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
     cleared = output();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaInputClearButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: GaInputClearButtonComponent, isStandalone: true, selector: "ga-input-clear-button", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cleared: "cleared" }, host: { attributes: { "role": "button", "tabindex": "-1" }, listeners: { "click": "cleared.emit(); $event.stopPropagation()" }, properties: { "attr.aria-label": "ariaLabel() || i18n.clearLabel" } }, ngImport: i0, template: `<ga-icon [icon]="icon" size="16" />`, isInline: true, styles: [":host{display:flex;cursor:pointer}\n"], dependencies: [{ kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: GaInputClearButtonComponent, isStandalone: true, selector: "ga-input-clear-button", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cleared: "cleared" }, host: { attributes: { "role": "button", "tabindex": "-1" }, listeners: { "click": "cleared.emit(); $event.stopPropagation()" }, properties: { "attr.aria-label": "ariaLabel() || i18n.clearLabel" } }, ngImport: i0, template: `<ga-icon [icon]="icon" size="16" />`, isInline: true, styles: [":host{display:flex;cursor:pointer}\n"], dependencies: [{ kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaInputClearButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ga-input-clear-button', template: `<ga-icon [icon]="icon" size="16" />`, imports: [GaIconComponent], host: {
+            args: [{ selector: 'ga-input-clear-button', changeDetection: ChangeDetectionStrategy.OnPush, template: `<ga-icon [icon]="icon" size="16" />`, imports: [GaIconComponent], host: {
                         role: 'button',
                         tabindex: '-1',
                         '[attr.aria-label]': 'ariaLabel() || i18n.clearLabel',
@@ -3088,11 +3092,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 
 class GaMenuComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: GaMenuComponent, isStandalone: true, selector: "ga-menu", host: { attributes: { "animate.enter": "ga-animation-reveal", "animate.leave": "ga-animation-dismiss" }, classAttribute: "ga-menu" }, hostDirectives: [{ directive: i1$2.CdkMenu }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{margin-top:calc(var(--ga-size-spacing-03) * var(--ga-base-scaling-factor, 1));margin-bottom:calc(var(--ga-size-spacing-03) * var(--ga-base-scaling-factor, 1))}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: GaMenuComponent, isStandalone: true, selector: "ga-menu", host: { attributes: { "animate.enter": "ga-animation-reveal", "animate.leave": "ga-animation-dismiss" }, classAttribute: "ga-menu" }, hostDirectives: [{ directive: i1$2.CdkMenu }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{margin-top:calc(var(--ga-size-spacing-03) * var(--ga-base-scaling-factor, 1));margin-bottom:calc(var(--ga-size-spacing-03) * var(--ga-base-scaling-factor, 1))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ga-menu', template: `<ng-content />`, hostDirectives: [CdkMenu], host: {
+            args: [{ selector: 'ga-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: `<ng-content />`, hostDirectives: [CdkMenu], host: {
                         class: 'ga-menu',
                         'animate.enter': 'ga-animation-reveal',
                         'animate.leave': 'ga-animation-dismiss',
@@ -3106,11 +3110,11 @@ class GaMenuItemComponent {
     selected = input(false, { ...(ngDevMode ? { debugName: "selected" } : {}), alias: 'gaMenuItemSelected',
         transform: booleanAttribute });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GaMenuItemComponent, isStandalone: true, selector: "[gaMenuItem]", inputs: { icon: { classPropertyName: "icon", publicName: "gaMenuItemIcon", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "gaMenuItemDescription", isSignal: true, isRequired: false, transformFunction: null }, shortcut: { classPropertyName: "shortcut", publicName: "gaMenuItemShortcut", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "gaMenuItemSelected", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ga-menu__item--selected": "selected()" }, classAttribute: "ga-menu__item" }, hostDirectives: [{ directive: i1$2.CdkMenuItem }], ngImport: i0, template: "@if (icon()) {\n  <ga-icon [icon]=\"icon()!\" class=\"ga-menu__item-icon\" size=\"16\" />\n}\n<div class=\"ga-menu__item-content\">\n  <div class=\"ga-menu__item-title\">\n    <div class=\"ga-menu__item-label\"><ng-content /></div>\n    @if (shortcut()) {\n      <span class=\"ga-menu__item-shortcut\">{{ shortcut() }}</span>\n    }\n  </div>\n  @if (description()) {\n    <div class=\"ga-menu__item-description\">{{ description() }}</div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GaMenuItemComponent, isStandalone: true, selector: "[gaMenuItem]", inputs: { icon: { classPropertyName: "icon", publicName: "gaMenuItemIcon", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "gaMenuItemDescription", isSignal: true, isRequired: false, transformFunction: null }, shortcut: { classPropertyName: "shortcut", publicName: "gaMenuItemShortcut", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "gaMenuItemSelected", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ga-menu__item--selected": "selected()" }, classAttribute: "ga-menu__item" }, hostDirectives: [{ directive: i1$2.CdkMenuItem }], ngImport: i0, template: "@if (icon()) {\n  <ga-icon [icon]=\"icon()!\" class=\"ga-menu__item-icon\" size=\"16\" />\n}\n<div class=\"ga-menu__item-content\">\n  <div class=\"ga-menu__item-title\">\n    <div class=\"ga-menu__item-label\"><ng-content /></div>\n    @if (shortcut()) {\n      <span class=\"ga-menu__item-shortcut\">{{ shortcut() }}</span>\n    }\n  </div>\n  @if (description()) {\n    <div class=\"ga-menu__item-description\">{{ description() }}</div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaMenuItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[gaMenuItem]', imports: [GaIconModule], hostDirectives: [CdkMenuItem], host: {
+            args: [{ selector: '[gaMenuItem]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [GaIconModule], hostDirectives: [CdkMenuItem], host: {
                         class: 'ga-menu__item',
                         '[class.ga-menu__item--selected]': 'selected()',
                     }, template: "@if (icon()) {\n  <ga-icon [icon]=\"icon()!\" class=\"ga-menu__item-icon\" size=\"16\" />\n}\n<div class=\"ga-menu__item-content\">\n  <div class=\"ga-menu__item-title\">\n    <div class=\"ga-menu__item-label\"><ng-content /></div>\n    @if (shortcut()) {\n      <span class=\"ga-menu__item-shortcut\">{{ shortcut() }}</span>\n    }\n  </div>\n  @if (description()) {\n    <div class=\"ga-menu__item-description\">{{ description() }}</div>\n  }\n</div>\n" }]
@@ -3118,12 +3122,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 
 class GaMenuTitleComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaMenuTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: GaMenuTitleComponent, isStandalone: true, selector: "ga-menu-title", host: { classAttribute: "ga-menu__title" }, ngImport: i0, template: `<ng-content />`, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: GaMenuTitleComponent, isStandalone: true, selector: "ga-menu-title", host: { classAttribute: "ga-menu__title" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaMenuTitleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ga-menu-title',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `<ng-content />`,
                     host: {
                         class: 'ga-menu__title',
@@ -3177,12 +3182,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 
 class GaMenuSeparatorComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaMenuSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: GaMenuSeparatorComponent, isStandalone: true, selector: "ga-menu-separator", host: { classAttribute: "ga-menu__separator" }, ngImport: i0, template: `<ng-content />`, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: GaMenuSeparatorComponent, isStandalone: true, selector: "ga-menu-separator", host: { classAttribute: "ga-menu__separator" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaMenuSeparatorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ga-menu-separator',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `<ng-content />`,
                     host: {
                         class: 'ga-menu__separator',
@@ -3196,12 +3202,13 @@ class GaMenuTriggerIconComponent {
         return this.menuTrigger.isOpen() ? ChevronUp : ChevronDown;
     }, ...(ngDevMode ? [{ debugName: "icon" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaMenuTriggerIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: GaMenuTriggerIconComponent, isStandalone: true, selector: "ga-menu-trigger-icon", ngImport: i0, template: `<ga-icon [icon]="icon()" />`, isInline: true, dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: GaMenuTriggerIconComponent, isStandalone: true, selector: "ga-menu-trigger-icon", ngImport: i0, template: `<ga-icon [icon]="icon()" />`, isInline: true, dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaMenuTriggerIconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ga-menu-trigger-icon',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [GaIconModule],
                     template: `<ga-icon [icon]="icon()" />`,
                 }]
@@ -3494,12 +3501,13 @@ class GaModalComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: GaModalComponent, isStandalone: true, selector: "ng-component", host: { properties: { "attr.role": "options.role", "attr.aria-labelledby": "options.labelledBy ?? labelledBy()", "attr.aria-describedby": "options.describedBy ?? describedBy()", "class.ga-modal--small": "options.size === 'sm'", "class.ga-modal--medium": "options.size === 'md'", "class.ga-modal--large": "options.size === 'lg'", "class.ga-modal--information": "options.type === 'info'", "class.ga-modal--danger": "options.type === 'danger'", "class.ga-modal--warning": "options.type === 'warning'", "class.ga-modal--success": "options.type === 'success'" }, classAttribute: "ga-modal" }, hostDirectives: [{ directive: i1$3.CdkTrapFocus }], ngImport: i0, template: '', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: GaModalComponent, isStandalone: true, selector: "ng-component", host: { properties: { "attr.role": "options.role", "attr.aria-labelledby": "options.labelledBy ?? labelledBy()", "attr.aria-describedby": "options.describedBy ?? describedBy()", "class.ga-modal--small": "options.size === 'sm'", "class.ga-modal--medium": "options.size === 'md'", "class.ga-modal--large": "options.size === 'lg'", "class.ga-modal--information": "options.type === 'info'", "class.ga-modal--danger": "options.type === 'danger'", "class.ga-modal--warning": "options.type === 'warning'", "class.ga-modal--success": "options.type === 'success'" }, classAttribute: "ga-modal" }, hostDirectives: [{ directive: i1$3.CdkTrapFocus }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaModalComponent, decorators: [{
             type: Component,
             args: [{
                     template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         class: 'ga-modal',
                         '[attr.role]': 'options.role',
@@ -3627,12 +3635,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 
 class GaModalDescriptionComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaModalDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: GaModalDescriptionComponent, isStandalone: true, selector: "ga-modal-description", host: { classAttribute: "ga-modal__description" }, hostDirectives: [{ directive: GaModalDescriptionDirective }], ngImport: i0, template: `<ng-content />`, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: GaModalDescriptionComponent, isStandalone: true, selector: "ga-modal-description", host: { classAttribute: "ga-modal__description" }, hostDirectives: [{ directive: GaModalDescriptionDirective }], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaModalDescriptionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ga-modal-description',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `<ng-content />`,
                     hostDirectives: [GaModalDescriptionDirective],
                     host: {
@@ -3643,12 +3652,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 
 class GaModalContentComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaModalContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: GaModalContentComponent, isStandalone: true, selector: "ga-modal-content", host: { classAttribute: "ga-modal__content" }, hostDirectives: [{ directive: i1$4.CdkScrollable }], ngImport: i0, template: `<ng-content />`, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: GaModalContentComponent, isStandalone: true, selector: "ga-modal-content", host: { classAttribute: "ga-modal__content" }, hostDirectives: [{ directive: i1$4.CdkScrollable }], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaModalContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ga-modal-content',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `<ng-content />`,
                     hostDirectives: [CdkScrollable],
                     host: {
@@ -3659,12 +3669,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 
 class GaModalActionsComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaModalActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: GaModalActionsComponent, isStandalone: true, selector: "ga-modal-actions", host: { classAttribute: "ga-modal__actions" }, ngImport: i0, template: ` <ng-content />`, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: GaModalActionsComponent, isStandalone: true, selector: "ga-modal-actions", host: { classAttribute: "ga-modal__actions" }, ngImport: i0, template: ` <ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaModalActionsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ga-modal-actions',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: ` <ng-content />`,
                     host: {
                         class: 'ga-modal__actions',
@@ -3747,12 +3758,13 @@ class GaModalHeaderComponent {
     >
       {{ i18n.dismissLabel }}
     </button>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: GaButtonModule }, { kind: "component", type: GaIconButtonDirective, selector: "button[gaIconButton], a[gaIconButton]", inputs: ["gaIconButton", "gaIconButtonVariant", "gaIconButtonLoading", "gaIconButtonLoadingLabel", "disabled"] }, { kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: GaButtonModule }, { kind: "component", type: GaIconButtonDirective, selector: "button[gaIconButton], a[gaIconButton]", inputs: ["gaIconButton", "gaIconButtonVariant", "gaIconButtonLoading", "gaIconButtonLoadingLabel", "disabled"] }, { kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaModalHeaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ga-modal-header',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [GaButtonModule, GaIconModule],
                     template: `
     @if (modalRef.instance.options.type !== 'none') {
@@ -4041,11 +4053,11 @@ class GaOptionComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GaOptionComponent, isStandalone: true, selector: "ga-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, withInput: { classPropertyName: "withInput", publicName: "withInput", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()" }, properties: { "class.ga-dropdown__item--selected": "selected()", "class.ga-dropdown__item--disabled": "cdkOption.disabled", "class.ga-dropdown__item--active": "active() && !cdkOption.disabled", "attr.hidden": "hidden() ? '' : null" }, classAttribute: "ga-dropdown__item" }, hostDirectives: [{ directive: i1$5.CdkOption, inputs: ["cdkOption", "value", "cdkOptionDisabled", "disabled", "cdkOptionTypeaheadLabel", "typeaheadLabel"] }], ngImport: i0, template: "@if (withInput()) {\n  @if (selectComponent.multiple()) {\n    <ga-checkbox\n      gaFormFieldIgnore\n      [checked]=\"selected()\"\n      [disabled]=\"disabled()\"\n      aria-hidden=\"true\"\n      style=\"pointer-events: none\"\n      tabindex=\"-1\"\n    />\n  } @else {\n    <ga-radio-button\n      [checked]=\"selected()\"\n      [disabled]=\"disabled()\"\n      aria-hidden=\"true\"\n      style=\"pointer-events: none\"\n      tabindex=\"-1\"\n    />\n  }\n}\n<div class=\"ga-dropdown__item-label\"><ng-content /></div>\n", dependencies: [{ kind: "ngmodule", type: GaCheckboxModule }, { kind: "component", type: GaCheckboxComponent, selector: "ga-checkbox", inputs: ["value", "disabled", "checked", "name", "id", "indeterminate", "aria-label", "aria-labelledby", "aria-describedby", "inError", "aria-invalid", "aria-errormessage", "required"], outputs: ["checkedChange", "change", "indeterminateChange"] }, { kind: "directive", type: GaFormFieldIgnoreDirective, selector: "[gaFormFieldIgnore]" }, { kind: "ngmodule", type: GaRadioModule }, { kind: "component", type: GaRadioButtonComponent, selector: "ga-radio-button", inputs: ["value", "id", "name", "checked", "disabled", "aria-label", "aria-labelledby", "aria-describedby", "inError", "aria-invalid", "aria-errormessage"], outputs: ["change"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GaOptionComponent, isStandalone: true, selector: "ga-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, withInput: { classPropertyName: "withInput", publicName: "withInput", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()" }, properties: { "class.ga-dropdown__item--selected": "selected()", "class.ga-dropdown__item--disabled": "cdkOption.disabled", "class.ga-dropdown__item--active": "active() && !cdkOption.disabled", "attr.hidden": "hidden() ? '' : null" }, classAttribute: "ga-dropdown__item" }, hostDirectives: [{ directive: i1$5.CdkOption, inputs: ["cdkOption", "value", "cdkOptionDisabled", "disabled", "cdkOptionTypeaheadLabel", "typeaheadLabel"] }], ngImport: i0, template: "@if (withInput()) {\n  @if (selectComponent.multiple()) {\n    <ga-checkbox\n      gaFormFieldIgnore\n      [checked]=\"selected()\"\n      [disabled]=\"disabled()\"\n      aria-hidden=\"true\"\n      style=\"pointer-events: none\"\n      tabindex=\"-1\"\n    />\n  } @else {\n    <ga-radio-button\n      [checked]=\"selected()\"\n      [disabled]=\"disabled()\"\n      aria-hidden=\"true\"\n      style=\"pointer-events: none\"\n      tabindex=\"-1\"\n    />\n  }\n}\n<div class=\"ga-dropdown__item-label\"><ng-content /></div>\n", dependencies: [{ kind: "ngmodule", type: GaCheckboxModule }, { kind: "component", type: GaCheckboxComponent, selector: "ga-checkbox", inputs: ["value", "disabled", "checked", "name", "id", "indeterminate", "aria-label", "aria-labelledby", "aria-describedby", "inError", "aria-invalid", "aria-errormessage", "required"], outputs: ["checkedChange", "change", "indeterminateChange"] }, { kind: "directive", type: GaFormFieldIgnoreDirective, selector: "[gaFormFieldIgnore]" }, { kind: "ngmodule", type: GaRadioModule }, { kind: "component", type: GaRadioButtonComponent, selector: "ga-radio-button", inputs: ["value", "id", "name", "checked", "disabled", "aria-label", "aria-labelledby", "aria-describedby", "inError", "aria-invalid", "aria-errormessage"], outputs: ["change"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaOptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ga-option', imports: [GaCheckboxModule, GaFormFieldIgnoreDirective, GaRadioModule], hostDirectives: [
+            args: [{ selector: 'ga-option', changeDetection: ChangeDetectionStrategy.OnPush, imports: [GaCheckboxModule, GaFormFieldIgnoreDirective, GaRadioModule], hostDirectives: [
                         {
                             directive: CdkOption,
                             inputs: [
@@ -4066,12 +4078,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 
 class GaSelectValueComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaSelectValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: GaSelectValueComponent, isStandalone: true, selector: "ga-select-value", ngImport: i0, template: `<ng-content />`, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: GaSelectValueComponent, isStandalone: true, selector: "ga-select-value", ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaSelectValueComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ga-select-value',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `<ng-content />`,
                 }]
         }] });
@@ -4090,11 +4103,11 @@ class GaSelectDefaultValueComponent {
         this.selectComponent.deselectValue(option.cdkOption.value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaSelectDefaultValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", 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\n      class=\"ga-tag\"\n      [class.ga-tag--interactive-selected]=\"!selectComponent.disabled()\"\n      [class.ga-tag--interactive-selected-disabled]=\"selectComponent.disabled()\"\n    >\n      <span class=\"ga-tag__label\">{{ option.cdkOption.getLabel() }}</span>\n      @if (!selectComponent.disabled()) {\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      }\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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", 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\n      class=\"ga-tag\"\n      [class.ga-tag--interactive-selected]=\"!selectComponent.disabled()\"\n      [class.ga-tag--interactive-selected-disabled]=\"selectComponent.disabled()\"\n    >\n      <span class=\"ga-tag__label\">{{ option.cdkOption.getLabel() }}</span>\n      @if (!selectComponent.disabled()) {\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      }\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaSelectDefaultValueComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ga-select-default-value', imports: [GaIconModule], host: {
+            args: [{ selector: 'ga-select-default-value', changeDetection: ChangeDetectionStrategy.OnPush, imports: [GaIconModule], host: {
                         class: 'ga-select__value',
                     }, template: "@if (selectComponent.multiple()) {\n  @for (option of selectComponent.selectedOptions(); track option) {\n    <div\n      class=\"ga-tag\"\n      [class.ga-tag--interactive-selected]=\"!selectComponent.disabled()\"\n      [class.ga-tag--interactive-selected-disabled]=\"selectComponent.disabled()\"\n    >\n      <span class=\"ga-tag__label\">{{ option.cdkOption.getLabel() }}</span>\n      @if (!selectComponent.disabled()) {\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      }\n    </div>\n  }\n} @else {\n  {{ singleViewValue() }}\n}\n" }]
         }] });
@@ -4147,12 +4160,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 
 class GaSelectDropdownSpinnerComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaSelectDropdownSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: GaSelectDropdownSpinnerComponent, isStandalone: true, selector: "ga-select-dropdown-spinner", host: { classAttribute: "ga-dropdown__spinner" }, ngImport: i0, template: `<ga-spinner size="16" />`, isInline: true, dependencies: [{ kind: "ngmodule", type: GaSpinnerModule }, { kind: "component", type: GaSpinnerComponent, selector: "ga-spinner", inputs: ["size"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: GaSelectDropdownSpinnerComponent, isStandalone: true, selector: "ga-select-dropdown-spinner", host: { classAttribute: "ga-dropdown__spinner" }, ngImport: i0, template: `<ga-spinner size="16" />`, isInline: true, dependencies: [{ kind: "ngmodule", type: GaSpinnerModule }, { kind: "component", type: GaSpinnerComponent, selector: "ga-spinner", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaSelectDropdownSpinnerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ga-select-dropdown-spinner',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `<ga-spinner size="16" />`,
                     imports: [GaSpinnerModule],
                     host: {
@@ -4168,11 +4182,11 @@ class GaSelectDropdownComponent {
         this.elementRef.nativeElement.scrollTo(0, 0);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaSelectDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GaSelectDropdownComponent, isStandalone: true, selector: "ga-select-dropdown", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "animate.enter": "ga-animation-reveal", "animate.leave": "ga-animation-dismiss" }, classAttribute: "ga-dropdown ga-dropdown__content" }, hostDirectives: [{ directive: i1$5.CdkListbox }], ngImport: i0, template: "@if (loading()) {\n  <ga-select-dropdown-spinner />\n} @else {\n  <ng-content />\n}\n", dependencies: [{ kind: "component", type: GaSelectDropdownSpinnerComponent, selector: "ga-select-dropdown-spinner" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GaSelectDropdownComponent, isStandalone: true, selector: "ga-select-dropdown", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "animate.enter": "ga-animation-reveal", "animate.leave": "ga-animation-dismiss" }, classAttribute: "ga-dropdown ga-dropdown__content" }, hostDirectives: [{ directive: i1$5.CdkListbox }], ngImport: i0, template: "@if (loading()) {\n  <ga-select-dropdown-spinner />\n} @else {\n  <ng-content />\n}\n", dependencies: [{ kind: "component", type: GaSelectDropdownSpinnerComponent, selector: "ga-select-dropdown-spinner" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaSelectDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ga-select-dropdown', imports: [GaSelectDropdownSpinnerComponent], hostDirectives: [CdkListbox], host: {
+            args: [{ selector: 'ga-select-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, imports: [GaSelectDropdownSpinnerComponent], hostDirectives: [CdkListbox], host: {
                         class: 'ga-dropdown ga-dropdown__content',
                         'animate.enter': 'ga-animation-reveal',
                         'animate.leave': 'ga-animation-dismiss',
@@ -4442,7 +4456,7 @@ class GaSelectComponent {
         this.autoClose();
     }
     onInputKeyDown(event) {
-        switch (event.code) {
+        switch (event.key) {
             case 'ArrowDown':
                 this.setNextItemActive();
                 event.preventDefault();
@@ -4453,7 +4467,7 @@ class GaSelectComponent {
                 event.preventDefault();
                 event.stopPropagation();
                 break;
-            case 'Space':
+            case ' ':
                 event.stopPropagation();
                 break;
             case 'Enter':
@@ -4562,11 +4576,11 @@ class GaSelectComponent {
                 useExisting: forwardRef(() => GaSelectComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "gaOptions", predicate: GaOptionComponent, descendants: true, read: GaOptionComponent, isSignal: true }, { propertyName: "cdkListbox", first: true, predicate: CdkListbox, descendants: true, isSignal: true }, { propertyName: "gaDropdown", first: true, predicate: GaSelectDropdownComponent, 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 }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1$1.CdkOverlayOrigin }, { directive: GaLabelledByFormFieldDirective, inputs: ["aria-labelledby", "aria-labelledby"] }, { directive: GaFormControlDirective }], 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-controls]=\"isOpen() ? cdkListbox().id : null\"\n      [attr.aria-activedescendant]=\"isOpen() ? activeDescendantId() : null\"\n      [attr.aria-label]=\"searchInputLabel() ?? i18n.defaultSearchInputLabel\"\n      [placeholder]=\"hasValue() ? '' : placeholder()\"\n      (keydown)=\"onInputKeyDown($event)\"\n      tabindex=\"-1\"\n      [disabled]=\"disabled()\"\n    />\n  }\n</div>\n\n<div class=\"ga-select__suffix\">\n  @if (clearable() && hasValue() && !disabled()) {\n    <button\n      type=\"button\"\n      tabindex=\"-1\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      [attr.aria-label]=\"clearableLabel() ?? i18n.clearLabel\"\n      style=\"font-size: 0\"\n    >\n      <ga-icon [icon]=\"icons.CircleX\" size=\"16\" />\n    </button>\n  }\n\n  <ga-icon [icon]=\"menuStatusIcon()\" class=\"ga-select__action-icon\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n  (overlayOutsideClick)=\"close()\"\n  (attach)=\"onOverlayAttach()\"\n  (detach)=\"onOverlayDetach()\"\n  (overlayKeydown)=\"onOverlayKeydown($event)\"\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$1.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", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], 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: "gaDropdown", first: true, predicate: GaSelectDropdownComponent, 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 }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1$1.CdkOverlayOrigin }, { directive: GaLabelledByFormFieldDirective, inputs: ["aria-labelledby", "aria-labelledby"] }, { directive: GaFormControlDirective }], 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-controls]=\"isOpen() ? cdkListbox().id : null\"\n      [attr.aria-activedescendant]=\"isOpen() ? activeDescendantId() : null\"\n      [attr.aria-label]=\"searchInputLabel() ?? i18n.defaultSearchInputLabel\"\n      [placeholder]=\"hasValue() ? '' : placeholder()\"\n      (keydown)=\"onInputKeyDown($event)\"\n      tabindex=\"-1\"\n      [disabled]=\"disabled()\"\n    />\n  }\n</div>\n\n<div class=\"ga-select__suffix\">\n  @if (clearable() && hasValue() && !disabled()) {\n    <button\n      type=\"button\"\n      tabindex=\"-1\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      [attr.aria-label]=\"clearableLabel() ?? i18n.clearLabel\"\n      style=\"font-size: 0\"\n    >\n      <ga-icon [icon]=\"icons.CircleX\" size=\"16\" />\n    </button>\n  }\n\n  <ga-icon [icon]=\"menuStatusIcon()\" class=\"ga-select__action-icon\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n  (overlayOutsideClick)=\"close()\"\n  (attach)=\"onOverlayAttach()\"\n  (detach)=\"onOverlayDetach()\"\n  (overlayKeydown)=\"onOverlayKeydown($event)\"\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$1.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", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: GaSelectDefaultValueComponent, selector: "ga-select-default-value" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ga-select', imports: [
+            args: [{ selector: 'ga-select', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         GaIconModule,
                         GaButtonModule,
                         OverlayModule,
@@ -4621,12 +4635,13 @@ class GaOptgroupComponent {
       <div class="ga-dropdown__caption">{{ label() }}</div>
     }
     <ng-content />
-  `, isInline: true });
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaOptgroupComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ga-optgroup',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
     @if (label()) {
       <div class="ga-dropdown__caption">{{ label() }}</div>
@@ -4748,11 +4763,11 @@ class GaDataOptionComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaDataOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GaDataOptionComponent, isStandalone: true, selector: "ga-data-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, withInput: { classPropertyName: "withInput", publicName: "withInput", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.enter": "autoClose($event);", "keydown.space": "autoClose($event);", "click": "autoClose();" }, properties: { "class.ga-dropdown__item--selected": "selected()", "class.ga-dropdown__item--disabled": "cdkOption.disabled", "class.ga-dropdown__item--active": "active() && !cdkOption.disabled" }, classAttribute: "ga-dropdown__item" }, hostDirectives: [{ directive: i1$5.CdkOption, inputs: ["cdkOption", "value", "cdkOptionDisabled", "disabled", "cdkOptionTypeaheadLabel", "typeaheadLabel"] }], ngImport: i0, template: "@if (withInput()) {\n  @if (selectComponent.multiple()) {\n    <ga-checkbox\n      gaFormFieldIgnore\n      [checked]=\"selected()\"\n      [disabled]=\"disabled()\"\n      aria-hidden=\"true\"\n      style=\"pointer-events: none\"\n      tabindex=\"-1\"\n    />\n  } @else {\n    <ga-radio-button\n      [checked]=\"selected()\"\n      [disabled]=\"disabled()\"\n      aria-hidden=\"true\"\n      style=\"pointer-events: none\"\n      tabindex=\"-1\"\n    />\n  }\n}\n<div class=\"ga-dropdown__item-label\"><ng-content /></div>\n", dependencies: [{ kind: "ngmodule", type: GaCheckboxModule }, { kind: "component", type: GaCheckboxComponent, selector: "ga-checkbox", inputs: ["value", "disabled", "checked", "name", "id", "indeterminate", "aria-label", "aria-labelledby", "aria-describedby", "inError", "aria-invalid", "aria-errormessage", "required"], outputs: ["checkedChange", "change", "indeterminateChange"] }, { kind: "directive", type: GaFormFieldIgnoreDirective, selector: "[gaFormFieldIgnore]" }, { kind: "ngmodule", type: GaRadioModule }, { kind: "component", type: GaRadioButtonComponent, selector: "ga-radio-button", inputs: ["value", "id", "name", "checked", "disabled", "aria-label", "aria-labelledby", "aria-describedby", "inError", "aria-invalid", "aria-errormessage"], outputs: ["change"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GaDataOptionComponent, isStandalone: true, selector: "ga-data-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, withInput: { classPropertyName: "withInput", publicName: "withInput", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.enter": "autoClose($event);", "keydown.space": "autoClose($event);", "click": "autoClose();" }, properties: { "class.ga-dropdown__item--selected": "selected()", "class.ga-dropdown__item--disabled": "cdkOption.disabled", "class.ga-dropdown__item--active": "active() && !cdkOption.disabled" }, classAttribute: "ga-dropdown__item" }, hostDirectives: [{ directive: i1$5.CdkOption, inputs: ["cdkOption", "value", "cdkOptionDisabled", "disabled", "cdkOptionTypeaheadLabel", "typeaheadLabel"] }], ngImport: i0, template: "@if (withInput()) {\n  @if (selectComponent.multiple()) {\n    <ga-checkbox\n      gaFormFieldIgnore\n      [checked]=\"selected()\"\n      [disabled]=\"disabled()\"\n      aria-hidden=\"true\"\n      style=\"pointer-events: none\"\n      tabindex=\"-1\"\n    />\n  } @else {\n    <ga-radio-button\n      [checked]=\"selected()\"\n      [disabled]=\"disabled()\"\n      aria-hidden=\"true\"\n      style=\"pointer-events: none\"\n      tabindex=\"-1\"\n    />\n  }\n}\n<div class=\"ga-dropdown__item-label\"><ng-content /></div>\n", dependencies: [{ kind: "ngmodule", type: GaCheckboxModule }, { kind: "component", type: GaCheckboxComponent, selector: "ga-checkbox", inputs: ["value", "disabled", "checked", "name", "id", "indeterminate", "aria-label", "aria-labelledby", "aria-describedby", "inError", "aria-invalid", "aria-errormessage", "required"], outputs: ["checkedChange", "change", "indeterminateChange"] }, { kind: "directive", type: GaFormFieldIgnoreDirective, selector: "[gaFormFieldIgnore]" }, { kind: "ngmodule", type: GaRadioModule }, { kind: "component", type: GaRadioButtonComponent, selector: "ga-radio-button", inputs: ["value", "id", "name", "checked", "disabled", "aria-label", "aria-labelledby", "aria-describedby", "inError", "aria-invalid", "aria-errormessage"], outputs: ["change"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaDataOptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ga-data-option', imports: [GaCheckboxModule, GaFormFieldIgnoreDirective, GaRadioModule], hostDirectives: [
+            args: [{ selector: 'ga-data-option', changeDetection: ChangeDetectionStrategy.OnPush, imports: [GaCheckboxModule, GaFormFieldIgnoreDirective, GaRadioModule], hostDirectives: [
                         {
                             directive: CdkOption,
                             inputs: [
@@ -4869,11 +4884,11 @@ class GaDataSelectValueComponent {
         this.selectComponent.deselectValues(this.selectedItems());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaDataSelectValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GaDataSelectValueComponent, isStandalone: true, selector: "ga-data-select-value", inputs: { customValueTemplate: { classPropertyName: "customValueTemplate", publicName: "customValueTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ga-select__value" }, ngImport: i0, template: "@if (selectComponent.multiple()) {\n  @for (\n    selectedItem of visibleSelectedItems();\n    track selectComponent.getItemValue(selectedItem)\n  ) {\n    <div\n      class=\"ga-tag\"\n      [class.ga-tag--interactive-selected]=\"!selectComponent.disabled()\"\n      [class.ga-tag--interactive-selected-disabled]=\"selectComponent.disabled()\"\n    >\n      <span class=\"ga-tag__label\">\n        @if (customValueTemplate(); as templateRef) {\n          <ng-container\n            [ngTemplateOutlet]=\"templateRef\"\n            [ngTemplateOutletContext]=\"customValueTemplateContext(selectedItem)\"\n          />\n        } @else {\n          {{ selectComponent.getItemLabel(selectedItem) }}\n        }\n      </span>\n      @if (!selectComponent.disabled()) {\n        <div class=\"ga-tag__separator\"></div>\n        <ga-icon\n          [icon]=\"icons.X\"\n          size=\"16\"\n          class=\"ga-tag__icon\"\n          (click)=\"\n            deselectOption(selectComponent.getItemValue(selectedItem));\n            $event.stopPropagation()\n          \"\n        />\n      }\n    </div>\n  }\n  @if (hiddenItemsCount() > 0) {\n    <div\n      class=\"ga-tag\"\n      [class.ga-tag--interactive-selected]=\"!selectComponent.disabled()\"\n      [class.ga-tag--interactive-selected-disabled]=\"selectComponent.disabled()\"\n    >\n      <span class=\"ga-tag__label\">\n        @if (selectComponent.valueDisplayLimit() === 0) {\n          {{ hiddenItemsCount() }}\n        } @else {\n          {{ i18n.displayLimitReachedLabel(hiddenItemsCount()) }}\n        }\n      </span>\n      @if (\n        !selectComponent.disabled() && selectComponent.valueDisplayLimit() === 0\n      ) {\n        <div class=\"ga-tag__separator\"></div>\n        <ga-icon\n          [icon]=\"icons.X\"\n          size=\"16\"\n          class=\"ga-tag__icon\"\n          (click)=\"deselectHiddenOptions(); $event.stopPropagation()\"\n        />\n      }\n    </div>\n  }\n} @else {\n  @if (customValueTemplate(); as templateRef) {\n    <ng-container\n      [ngTemplateOutlet]=\"templateRef\"\n      [ngTemplateOutletContext]=\"\n        customValueTemplateContext(selectComponent.selectedItem())\n      \"\n    />\n  } @else {\n    {{ singleViewValue() }}\n  }\n}\n", dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GaDataSelectValueComponent, isStandalone: true, selector: "ga-data-select-value", inputs: { customValueTemplate: { classPropertyName: "customValueTemplate", publicName: "customValueTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ga-select__value" }, ngImport: i0, template: "@if (selectComponent.multiple()) {\n  @for (\n    selectedItem of visibleSelectedItems();\n    track selectComponent.getItemValue(selectedItem)\n  ) {\n    <div\n      class=\"ga-tag\"\n      [class.ga-tag--interactive-selected]=\"!selectComponent.disabled()\"\n      [class.ga-tag--interactive-selected-disabled]=\"selectComponent.disabled()\"\n    >\n      <span class=\"ga-tag__label\">\n        @if (customValueTemplate(); as templateRef) {\n          <ng-container\n            [ngTemplateOutlet]=\"templateRef\"\n            [ngTemplateOutletContext]=\"customValueTemplateContext(selectedItem)\"\n          />\n        } @else {\n          {{ selectComponent.getItemLabel(selectedItem) }}\n        }\n      </span>\n      @if (!selectComponent.disabled()) {\n        <div class=\"ga-tag__separator\"></div>\n        <ga-icon\n          [icon]=\"icons.X\"\n          size=\"16\"\n          class=\"ga-tag__icon\"\n          (click)=\"\n            deselectOption(selectComponent.getItemValue(selectedItem));\n            $event.stopPropagation()\n          \"\n        />\n      }\n    </div>\n  }\n  @if (hiddenItemsCount() > 0) {\n    <div\n      class=\"ga-tag\"\n      [class.ga-tag--interactive-selected]=\"!selectComponent.disabled()\"\n      [class.ga-tag--interactive-selected-disabled]=\"selectComponent.disabled()\"\n    >\n      <span class=\"ga-tag__label\">\n        @if (selectComponent.valueDisplayLimit() === 0) {\n          {{ hiddenItemsCount() }}\n        } @else {\n          {{ i18n.displayLimitReachedLabel(hiddenItemsCount()) }}\n        }\n      </span>\n      @if (\n        !selectComponent.disabled() && selectComponent.valueDisplayLimit() === 0\n      ) {\n        <div class=\"ga-tag__separator\"></div>\n        <ga-icon\n          [icon]=\"icons.X\"\n          size=\"16\"\n          class=\"ga-tag__icon\"\n          (click)=\"deselectHiddenOptions(); $event.stopPropagation()\"\n        />\n      }\n    </div>\n  }\n} @else {\n  @if (customValueTemplate(); as templateRef) {\n    <ng-container\n      [ngTemplateOutlet]=\"templateRef\"\n      [ngTemplateOutletContext]=\"\n        customValueTemplateContext(selectComponent.selectedItem())\n      \"\n    />\n  } @else {\n    {{ singleViewValue() }}\n  }\n}\n", dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaDataSelectValueComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ga-data-select-value', imports: [GaIconModule, NgTemplateOutlet], host: {
+            args: [{ selector: 'ga-data-select-value', changeDetection: ChangeDetectionStrategy.OnPush, imports: [GaIconModule, NgTemplateOutlet], host: {
                         class: 'ga-select__value',
                     }, template: "@if (selectComponent.multiple()) {\n  @for (\n    selectedItem of visibleSelectedItems();\n    track selectComponent.getItemValue(selectedItem)\n  ) {\n    <div\n      class=\"ga-tag\"\n      [class.ga-tag--interactive-selected]=\"!selectComponent.disabled()\"\n      [class.ga-tag--interactive-selected-disabled]=\"selectComponent.disabled()\"\n    >\n      <span class=\"ga-tag__label\">\n        @if (customValueTemplate(); as templateRef) {\n          <ng-container\n            [ngTemplateOutlet]=\"templateRef\"\n            [ngTemplateOutletContext]=\"customValueTemplateContext(selectedItem)\"\n          />\n        } @else {\n          {{ selectComponent.getItemLabel(selectedItem) }}\n        }\n      </span>\n      @if (!selectComponent.disabled()) {\n        <div class=\"ga-tag__separator\"></div>\n        <ga-icon\n          [icon]=\"icons.X\"\n          size=\"16\"\n          class=\"ga-tag__icon\"\n          (click)=\"\n            deselectOption(selectComponent.getItemValue(selectedItem));\n            $event.stopPropagation()\n          \"\n        />\n      }\n    </div>\n  }\n  @if (hiddenItemsCount() > 0) {\n    <div\n      class=\"ga-tag\"\n      [class.ga-tag--interactive-selected]=\"!selectComponent.disabled()\"\n      [class.ga-tag--interactive-selected-disabled]=\"selectComponent.disabled()\"\n    >\n      <span class=\"ga-tag__label\">\n        @if (selectComponent.valueDisplayLimit() === 0) {\n          {{ hiddenItemsCount() }}\n        } @else {\n          {{ i18n.displayLimitReachedLabel(hiddenItemsCount()) }}\n        }\n      </span>\n      @if (\n        !selectComponent.disabled() && selectComponent.valueDisplayLimit() === 0\n      ) {\n        <div class=\"ga-tag__separator\"></div>\n        <ga-icon\n          [icon]=\"icons.X\"\n          size=\"16\"\n          class=\"ga-tag__icon\"\n          (click)=\"deselectHiddenOptions(); $event.stopPropagation()\"\n        />\n      }\n    </div>\n  }\n} @else {\n  @if (customValueTemplate(); as templateRef) {\n    <ng-container\n      [ngTemplateOutlet]=\"templateRef\"\n      [ngTemplateOutletContext]=\"\n        customValueTemplateContext(selectComponent.selectedItem())\n      \"\n    />\n  } @else {\n    {{ singleViewValue() }}\n  }\n}\n" }]
         }], propDecorators: { customValueTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "customValueTemplate", required: false }] }] } });
@@ -4881,12 +4896,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 class GaDataSelectDropdownSpinnerComponent {
     i18n = inject(GaDataSelectI18n);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaDataSelectDropdownSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: GaDataSelectDropdownSpinnerComponent, isStandalone: true, selector: "ga-data-select-dropdown-spinner", host: { attributes: { "role": "status" }, properties: { "attr.aria-label": "i18n.loadingLabel" }, classAttribute: "ga-dropdown__spinner" }, ngImport: i0, template: `<ga-spinner size="16" />`, isInline: true, dependencies: [{ kind: "ngmodule", type: GaSpinnerModule }, { kind: "component", type: GaSpinnerComponent, selector: "ga-spinner", inputs: ["size"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: GaDataSelectDropdownSpinnerComponent, isStandalone: true, selector: "ga-data-select-dropdown-spinner", host: { attributes: { "role": "status" }, properties: { "attr.aria-label": "i18n.loadingLabel" }, classAttribute: "ga-dropdown__spinner" }, ngImport: i0, template: `<ga-spinner size="16" />`, isInline: true, dependencies: [{ kind: "ngmodule", type: GaSpinnerModule }, { kind: "component", type: GaSpinnerComponent, selector: "ga-spinner", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaDataSelectDropdownSpinnerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ga-data-select-dropdown-spinner',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `<ga-spinner size="16" />`,
                     imports: [GaSpinnerModule],
                     host: {
@@ -4914,11 +4930,11 @@ class GaDataSelectDropdownComponent {
         this.elementRef.nativeElement.scrollTo(0, 0);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaDataSelectDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GaDataSelectDropdownComponent, isStandalone: true, selector: "ga-data-select-dropdown", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, hasNoOptions: { classPropertyName: "hasNoOptions", publicName: "hasNoOptions", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mousedown": "onMousedown($event)" }, properties: { "attr.aria-busy": "loading() && hasNoOptions()" }, classAttribute: "ga-dropdown ga-dropdown__content" }, hostDirectives: [{ directive: i1$5.CdkListbox, inputs: ["cdkListboxMultiple", "multiple", "cdkListboxUseActiveDescendant", "useActiveDescendant", "cdkListboxNavigationWrapDisabled", "navigationWrapDisabled", "cdkListboxCompareWith", "compareWith"] }], ngImport: i0, template: "<ng-content />\n\n@if (loading()) {\n  <ga-data-select-dropdown-spinner />\n}\n", styles: [":host{width:100%}\n"], dependencies: [{ kind: "component", type: GaDataSelectDropdownSpinnerComponent, selector: "ga-data-select-dropdown-spinner" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GaDataSelectDropdownComponent, isStandalone: true, selector: "ga-data-select-dropdown", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, hasNoOptions: { classPropertyName: "hasNoOptions", publicName: "hasNoOptions", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mousedown": "onMousedown($event)" }, properties: { "attr.aria-busy": "loading() && hasNoOptions()" }, classAttribute: "ga-dropdown ga-dropdown__content" }, hostDirectives: [{ directive: i1$5.CdkListbox, inputs: ["cdkListboxMultiple", "multiple", "cdkListboxUseActiveDescendant", "useActiveDescendant", "cdkListboxNavigationWrapDisabled", "navigationWrapDisabled", "cdkListboxCompareWith", "compareWith"] }], ngImport: i0, template: "<ng-content />\n\n@if (loading()) {\n  <ga-data-select-dropdown-spinner />\n}\n", styles: [":host{width:100%}\n"], dependencies: [{ kind: "component", type: GaDataSelectDropdownSpinnerComponent, selector: "ga-data-select-dropdown-spinner" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaDataSelectDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ga-data-select-dropdown', imports: [GaDataSelectDropdownSpinnerComponent], hostDirectives: [
+            args: [{ selector: 'ga-data-select-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, imports: [GaDataSelectDropdownSpinnerComponent], hostDirectives: [
                         {
                             directive: CdkListbox,
                             inputs: [
@@ -4952,12 +4968,13 @@ class GaDataOptgroupComponent {
       <div class="ga-dropdown__caption">{{ label() }}</div>
     }
     <ng-content />
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaDataOptgroupComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ga-data-optgroup',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [NgTemplateOutlet],
                     template: `
     @if (customLabelTemplate(); as templateRef) {
@@ -5088,6 +5105,7 @@ class GaDataSelectComponent {
         },
     ];
     injector = inject(Injector);
+    destroyRef = inject(DestroyRef);
     elementRef = inject((ElementRef));
     formFieldConnector = inject(GaFormFieldConnector, {
         optional: true,
@@ -5361,7 +5379,9 @@ class GaDataSelectComponent {
             const cdkListbox = this.cdkListbox();
             if (cdkListbox) {
                 untracked(() => {
-                    cdkListbox.valueChange.subscribe(({ value }) => {
+                    cdkListbox.valueChange
+                        .pipe(takeUntilDestroyed(this.destroyRef))
+                        .subscribe(({ value }) => {
                         if (!this.multiple()) {
                             [value] = value;
                         }
@@ -5464,7 +5484,7 @@ class GaDataSelectComponent {
         this.autoClose();
     }
     onInputKeyDown(event) {
-        switch (event.code) {
+        switch (event.key) {
             case 'ArrowDown':
             case 'ArrowUp':
             case 'Enter': {
@@ -5473,13 +5493,13 @@ class GaDataSelectComponent {
                 event.stopPropagation();
                 const eventClone = new KeyboardEvent(event.type, event);
                 this.dropdownElRef()?.nativeElement.dispatchEvent(eventClone);
-                if (event.code === 'Enter' && this.isOpen()) {
+                if (event.key === 'Enter' && this.isOpen()) {
                     // if the value wasn't changed via cdkListbox valueChange, close the dropdown manually
                     this.autoClose();
                 }
                 break;
             }
-            case 'Space':
+            case ' ':
                 event.stopPropagation();
                 break;
             case 'Tab':
@@ -5580,11 +5600,11 @@ class GaDataSelectComponent {
                 useExisting: forwardRef(() => GaDataSelectComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "customValueTemplate", first: true, predicate: GaDataSelectValueDirective, descendants: true, isSignal: true }, { propertyName: "customOptionLabelTemplate", first: true, predicate: GaDataSelectOptionLabelDirective, descendants: true, isSignal: true }, { propertyName: "customOptgroupLabelTemplate", first: true, predicate: GaDataSelectOptgroupLabelDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dropdownElRef", first: true, predicate: ["selectDropdown"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "gaOptions", predicate: GaDataOptionComponent, descendants: true, isSignal: true }, { propertyName: "cdkListbox", first: true, predicate: CdkListbox, descendants: true, isSignal: true }, { propertyName: "gaDropdown", first: true, predicate: GaDataSelectDropdownComponent, descendants: true, isSignal: true }, { propertyName: "inputSearch", first: true, predicate: ["inputSearch"], descendants: true, isSignal: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1$1.CdkOverlayOrigin }, { directive: GaLabelledByFormFieldDirective, inputs: ["aria-labelledby", "aria-labelledby"] }, { directive: GaFormControlDirective }], ngImport: i0, template: "@if (leftIcon()) {\n  <ga-icon [icon]=\"leftIcon()!\" />\n}\n\n<div class=\"ga-select__main-area\">\n  @if (hasValue() && (!searchValue() || multiple())) {\n    <ga-data-select-value\n      [customValueTemplate]=\"customValueTemplate()?.templateRef\"\n    />\n\n    @if (multiple() && !searchable() && labelHidden()) {\n      <div class=\"ga-select__placeholder\" [title]=\"placeholder()\">\n        {{ placeholder() }}\n      </div>\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      tabindex=\"-1\"\n      class=\"ga-select__input\"\n      aria-autocomplete=\"list\"\n      [value]=\"searchValue() ?? ''\"\n      (input)=\"open(); searchValue.set(inputSearch.value)\"\n      (click)=\"open(); $event.stopPropagation()\"\n      [attr.aria-controls]=\"isOpen() ? cdkListbox()?.id : null\"\n      [attr.aria-activedescendant]=\"isOpen() ? activeDescendantId() : null\"\n      [attr.aria-label]=\"i18n.searchInputLabel\"\n      [placeholder]=\"hasValue() && !labelHidden() ? '' : placeholder()\"\n      [title]=\"labelHidden() ? placeholder() : ''\"\n      (keydown)=\"onInputKeyDown($event)\"\n      [disabled]=\"disabled()\"\n    />\n  }\n</div>\n\n<div class=\"ga-select__suffix\">\n  @if (valueLoading()) {\n    <ga-spinner size=\"16\" role=\"presentation\" />\n  }\n\n  @if (clearable() && hasValue() && !disabled()) {\n    <button\n      type=\"button\"\n      tabindex=\"-1\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      [attr.aria-label]=\"clearableLabel() ?? i18n.clearLabel\"\n      style=\"font-size: 0\"\n    >\n      <ga-icon [icon]=\"icons.CircleX\" size=\"16\" />\n    </button>\n  }\n\n  <ga-icon [icon]=\"menuStatusIcon()\" class=\"ga-select__action-icon\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n  [cdkConnectedOverlayMinWidth]=\"overlayWidth()\"\n  (overlayOutsideClick)=\"close()\"\n  (attach)=\"onOverlayAttach()\"\n  (detach)=\"onOverlayDetach()\"\n  (overlayKeydown)=\"onOverlayKeydown($event)\"\n>\n  <ga-data-select-dropdown\n    animate.enter=\"ga-animation-reveal\"\n    animate.leave=\"ga-animation-dismiss\"\n    [multiple]=\"multiple()\"\n    [useActiveDescendant]=\"searchable()\"\n    [navigationWrapDisabled]=\"isOptionsLoading()\"\n    [compareWith]=\"listboxCompareWith()\"\n    [loading]=\"isOptionsLoading()\"\n    [hasNoOptions]=\"hasNoOptions()\"\n    #selectDropdown\n  >\n    @if (hasNoOptions() && !isOptionsLoading()) {\n      <div class=\"ga-dropdown__empty\">\n        {{ noOptionsLabel() ?? i18n.noOptionsLabel }}\n      </div>\n    }\n\n    @for (group of groupedItems(); track group.label) {\n      @if (group.label) {\n        <ga-data-optgroup\n          [label]=\"group.label\"\n          [customLabelTemplate]=\"customOptgroupLabelTemplate()?.templateRef\"\n          [customLabelContext]=\"getOptgroupLabelTemplateContext(group)\"\n        >\n          @for (item of group.items; track getItemValue(item)) {\n            <ga-data-option\n              [value]=\"getItemValue(item)\"\n              [withInput]=\"withOptionInput()\"\n              [disabled]=\"getItemDisabled(item)\"\n              [typeaheadLabel]=\"getItemTypeaheadLabel(item)\"\n            >\n              @if (customOptionLabelTemplate(); as labelTemplate) {\n                <ng-container\n                  [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n                  [ngTemplateOutletContext]=\"\n                    getOptionLabelTemplateContext(item)\n                  \"\n                />\n              } @else {\n                {{ getItemLabel(item) }}\n              }\n            </ga-data-option>\n          }\n        </ga-data-optgroup>\n      } @else {\n        @for (item of group.items; track getItemValue(item)) {\n          <ga-data-option\n            [value]=\"getItemValue(item)\"\n            [withInput]=\"withOptionInput() ?? multiple()\"\n            [disabled]=\"getItemDisabled(item)\"\n            [typeaheadLabel]=\"getItemTypeaheadLabel(item)\"\n          >\n            @if (customOptionLabelTemplate(); as labelTemplate) {\n              <ng-container\n                [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"getOptionLabelTemplateContext(item)\"\n              />\n            } @else {\n              {{ getItemLabel(item) }}\n            }\n          </ga-data-option>\n        }\n      }\n    }\n\n    <!--\n      Virtual items: Render hidden disabled options for all selected values.\n      This ensures cdkListbox maintains state when filtering occurs - even when\n      selected values don't match the currently visible filtered options, they\n      remain valid options in the listbox, preventing state loss.\n    -->\n    @for (item of virtualItems(); track getItemValue(item)) {\n      <ga-data-option\n        [value]=\"getItemValue(item)\"\n        [withInput]=\"withOptionInput() ?? multiple()\"\n        disabled\n        hidden\n      >\n        @if (customOptionLabelTemplate(); as labelTemplate) {\n          <ng-container\n            [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n            [ngTemplateOutletContext]=\"getOptionLabelTemplateContext(item)\"\n          />\n        } @else {\n          {{ getItemLabel(item) }}\n        }\n      </ga-data-option>\n    }\n\n    <ga-intersection-trigger\n      parentAsRoot\n      rootMargin=\"0% 0% 20px 0%\"\n      (trigger)=\"endReached()\"\n    />\n  </ga-data-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$1.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", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: GaDataSelectValueComponent, selector: "ga-data-select-value", inputs: ["customValueTemplate"] }, { kind: "component", type: GaDataSelectDropdownComponent, selector: "ga-data-select-dropdown", inputs: ["loading", "hasNoOptions"] }, { kind: "component", type: GaDataOptionComponent, selector: "ga-data-option", inputs: ["value", "disabled", "withInput"] }, { kind: "component", type: GaDataOptgroupComponent, selector: "ga-data-optgroup", inputs: ["label", "customLabelTemplate", "customLabelContext"] }, { kind: "component", type: GaIntersectionTriggerComponent, selector: "ga-intersection-trigger", inputs: ["rootElement", "rootMargin", "parentAsRoot"], outputs: ["trigger"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GaSpinnerComponent, selector: "ga-spinner", inputs: ["size"] }] });
+        ], queries: [{ propertyName: "customValueTemplate", first: true, predicate: GaDataSelectValueDirective, descendants: true, isSignal: true }, { propertyName: "customOptionLabelTemplate", first: true, predicate: GaDataSelectOptionLabelDirective, descendants: true, isSignal: true }, { propertyName: "customOptgroupLabelTemplate", first: true, predicate: GaDataSelectOptgroupLabelDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dropdownElRef", first: true, predicate: ["selectDropdown"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "gaOptions", predicate: GaDataOptionComponent, descendants: true, isSignal: true }, { propertyName: "cdkListbox", first: true, predicate: CdkListbox, descendants: true, isSignal: true }, { propertyName: "gaDropdown", first: true, predicate: GaDataSelectDropdownComponent, descendants: true, isSignal: true }, { propertyName: "inputSearch", first: true, predicate: ["inputSearch"], descendants: true, isSignal: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1$1.CdkOverlayOrigin }, { directive: GaLabelledByFormFieldDirective, inputs: ["aria-labelledby", "aria-labelledby"] }, { directive: GaFormControlDirective }], ngImport: i0, template: "@if (leftIcon()) {\n  <ga-icon [icon]=\"leftIcon()!\" />\n}\n\n<div class=\"ga-select__main-area\">\n  @if (hasValue() && (!searchValue() || multiple())) {\n    <ga-data-select-value\n      [customValueTemplate]=\"customValueTemplate()?.templateRef\"\n    />\n\n    @if (multiple() && !searchable() && labelHidden()) {\n      <div class=\"ga-select__placeholder\" [title]=\"placeholder()\">\n        {{ placeholder() }}\n      </div>\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      tabindex=\"-1\"\n      class=\"ga-select__input\"\n      aria-autocomplete=\"list\"\n      [value]=\"searchValue() ?? ''\"\n      (input)=\"open(); searchValue.set(inputSearch.value)\"\n      (click)=\"open(); $event.stopPropagation()\"\n      [attr.aria-controls]=\"isOpen() ? cdkListbox()?.id : null\"\n      [attr.aria-activedescendant]=\"isOpen() ? activeDescendantId() : null\"\n      [attr.aria-label]=\"i18n.searchInputLabel\"\n      [placeholder]=\"hasValue() && !labelHidden() ? '' : placeholder()\"\n      [title]=\"labelHidden() ? placeholder() : ''\"\n      (keydown)=\"onInputKeyDown($event)\"\n      [disabled]=\"disabled()\"\n    />\n  }\n</div>\n\n<div class=\"ga-select__suffix\">\n  @if (valueLoading()) {\n    <ga-spinner size=\"16\" role=\"presentation\" />\n  }\n\n  @if (clearable() && hasValue() && !disabled()) {\n    <button\n      type=\"button\"\n      tabindex=\"-1\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      [attr.aria-label]=\"clearableLabel() ?? i18n.clearLabel\"\n      style=\"font-size: 0\"\n    >\n      <ga-icon [icon]=\"icons.CircleX\" size=\"16\" />\n    </button>\n  }\n\n  <ga-icon [icon]=\"menuStatusIcon()\" class=\"ga-select__action-icon\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n  [cdkConnectedOverlayMinWidth]=\"overlayWidth()\"\n  (overlayOutsideClick)=\"close()\"\n  (attach)=\"onOverlayAttach()\"\n  (detach)=\"onOverlayDetach()\"\n  (overlayKeydown)=\"onOverlayKeydown($event)\"\n>\n  <ga-data-select-dropdown\n    animate.enter=\"ga-animation-reveal\"\n    animate.leave=\"ga-animation-dismiss\"\n    [multiple]=\"multiple()\"\n    [useActiveDescendant]=\"searchable()\"\n    [navigationWrapDisabled]=\"isOptionsLoading()\"\n    [compareWith]=\"listboxCompareWith()\"\n    [loading]=\"isOptionsLoading()\"\n    [hasNoOptions]=\"hasNoOptions()\"\n    #selectDropdown\n  >\n    @if (hasNoOptions() && !isOptionsLoading()) {\n      <div class=\"ga-dropdown__empty\">\n        {{ noOptionsLabel() ?? i18n.noOptionsLabel }}\n      </div>\n    }\n\n    @for (group of groupedItems(); track group.label) {\n      @if (group.label) {\n        <ga-data-optgroup\n          [label]=\"group.label\"\n          [customLabelTemplate]=\"customOptgroupLabelTemplate()?.templateRef\"\n          [customLabelContext]=\"getOptgroupLabelTemplateContext(group)\"\n        >\n          @for (item of group.items; track getItemValue(item)) {\n            <ga-data-option\n              [value]=\"getItemValue(item)\"\n              [withInput]=\"withOptionInput()\"\n              [disabled]=\"getItemDisabled(item)\"\n              [typeaheadLabel]=\"getItemTypeaheadLabel(item)\"\n            >\n              @if (customOptionLabelTemplate(); as labelTemplate) {\n                <ng-container\n                  [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n                  [ngTemplateOutletContext]=\"\n                    getOptionLabelTemplateContext(item)\n                  \"\n                />\n              } @else {\n                {{ getItemLabel(item) }}\n              }\n            </ga-data-option>\n          }\n        </ga-data-optgroup>\n      } @else {\n        @for (item of group.items; track getItemValue(item)) {\n          <ga-data-option\n            [value]=\"getItemValue(item)\"\n            [withInput]=\"withOptionInput() ?? multiple()\"\n            [disabled]=\"getItemDisabled(item)\"\n            [typeaheadLabel]=\"getItemTypeaheadLabel(item)\"\n          >\n            @if (customOptionLabelTemplate(); as labelTemplate) {\n              <ng-container\n                [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"getOptionLabelTemplateContext(item)\"\n              />\n            } @else {\n              {{ getItemLabel(item) }}\n            }\n          </ga-data-option>\n        }\n      }\n    }\n\n    <!--\n      Virtual items: Render hidden disabled options for all selected values.\n      This ensures cdkListbox maintains state when filtering occurs - even when\n      selected values don't match the currently visible filtered options, they\n      remain valid options in the listbox, preventing state loss.\n    -->\n    @for (item of virtualItems(); track getItemValue(item)) {\n      <ga-data-option\n        [value]=\"getItemValue(item)\"\n        [withInput]=\"withOptionInput() ?? multiple()\"\n        disabled\n        hidden\n      >\n        @if (customOptionLabelTemplate(); as labelTemplate) {\n          <ng-container\n            [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n            [ngTemplateOutletContext]=\"getOptionLabelTemplateContext(item)\"\n          />\n        } @else {\n          {{ getItemLabel(item) }}\n        }\n      </ga-data-option>\n    }\n\n    <ga-intersection-trigger\n      parentAsRoot\n      rootMargin=\"0% 0% 20px 0%\"\n      (trigger)=\"endReached()\"\n    />\n  </ga-data-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$1.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", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: GaDataSelectValueComponent, selector: "ga-data-select-value", inputs: ["customValueTemplate"] }, { kind: "component", type: GaDataSelectDropdownComponent, selector: "ga-data-select-dropdown", inputs: ["loading", "hasNoOptions"] }, { kind: "component", type: GaDataOptionComponent, selector: "ga-data-option", inputs: ["value", "disabled", "withInput"] }, { kind: "component", type: GaDataOptgroupComponent, selector: "ga-data-optgroup", inputs: ["label", "customLabelTemplate", "customLabelContext"] }, { kind: "component", type: GaIntersectionTriggerComponent, selector: "ga-intersection-trigger", inputs: ["rootElement", "rootMargin", "parentAsRoot"], outputs: ["trigger"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GaSpinnerComponent, selector: "ga-spinner", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaDataSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ga-data-select', imports: [
+            args: [{ selector: 'ga-data-select', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         GaIconModule,
                         GaButtonModule,
                         OverlayModule,
@@ -5950,11 +5970,11 @@ class GaTabComponent {
         return this.explicitContent() ?? this.implicitContent();
     }, ...(ngDevMode ? [{ debugName: "contentTpl" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: GaTabComponent, isStandalone: true, selector: "ga-tab", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, rightIcon: { classPropertyName: "rightIcon", publicName: "rightIcon", isSignal: true, isRequired: false, transformFunction: null }, rightIconColor: { classPropertyName: "rightIconColor", publicName: "rightIconColor", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "explicitContent", first: true, predicate: GaTabContentDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "implicitContent", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template><ng-content></ng-content></ng-template>\n" });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: GaTabComponent, isStandalone: true, selector: "ga-tab", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, rightIcon: { classPropertyName: "rightIcon", publicName: "rightIcon", isSignal: true, isRequired: false, transformFunction: null }, rightIconColor: { classPropertyName: "rightIconColor", publicName: "rightIconColor", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "explicitContent", first: true, predicate: GaTabContentDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "implicitContent", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template><ng-content></ng-content></ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaTabComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ga-tab', template: "<ng-template><ng-content></ng-content></ng-template>\n" }]
+            args: [{ selector: 'ga-tab', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template><ng-content></ng-content></ng-template>\n" }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], rightIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightIcon", required: false }] }], rightIconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightIconColor", required: false }] }], explicitContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GaTabContentDirective), { ...{
                             read: TemplateRef,
                         }, isSignal: true }] }], implicitContent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
@@ -6195,11 +6215,11 @@ class GaTabsComponent {
         this.overflowTabIndices.set(overflow);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GaTabsComponent, isStandalone: true, selector: "ga-tabs", inputs: { withKeyline: { classPropertyName: "withKeyline", publicName: "withKeyline", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, selectedIndexInput: { classPropertyName: "selectedIndexInput", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { beforeTabChange: "beforeTabChange", selectedIndexChange: "selectedIndexChange", selectedTabChange: "selectedTabChange" }, host: { properties: { "attr.aria-label": "null", "attr.aria-labelledby": "null", "class.ga-tabs-container--horizontal": "orientation() === 'horizontal'", "class.ga-tabs-container--vertical": "orientation() === 'vertical'" } }, queries: [{ propertyName: "tabs", predicate: GaTabComponent, isSignal: true }], viewQueries: [{ propertyName: "tabListRef", first: true, predicate: ["tabList"], descendants: true, isSignal: true }, { propertyName: "tabButtonRefs", predicate: ["tabButton"], descendants: true, isSignal: true }, { propertyName: "moreButtonRef", first: true, predicate: ["moreButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<ul\n  #tabList\n  role=\"tablist\"\n  [attr.id]=\"uniqueId\"\n  class=\"ga-tabs\"\n  [class.ga-tabs--horizontal]=\"orientation() === 'horizontal'\"\n  [class.ga-tabs--vertical]=\"orientation() === 'vertical'\"\n  [class.ga-tabs--keyline]=\"withKeyline()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-labelledby]=\"ariaLabelledby()\"\n  [attr.aria-orientation]=\"orientation()\"\n>\n  @for (tab of tabs(); track tab; let i = $index) {\n    @if (visibleTabIndices().includes(i)) {\n      <li\n        #tabButton\n        [attr.id]=\"uniqueId + '-tablabel-' + i\"\n        class=\"ga-tabs__tab\"\n        [class.ga-tabs__tab--selected]=\"i === selectedIndex()\"\n        [class.ga-tabs__tab--disabled]=\"tab.disabled()\"\n        role=\"tab\"\n        [tabindex]=\"tab.disabled() ? -1 : undefined\"\n        (click)=\"onTabClick(i); $event.preventDefault()\"\n        (keydown.enter)=\"onTabClick(i); $event.preventDefault()\"\n        (keydown.space)=\"onTabClick(i); $event.preventDefault()\"\n        [attr.aria-selected]=\"i === selectedIndex()\"\n        [attr.aria-disabled]=\"tab.disabled()\"\n        [attr.aria-controls]=\"uniqueId + '-tabpanel-' + i\"\n      >\n        {{ tab.title() }}\n        @let tabTitleIcon = tab.rightIcon();\n        @if (tabTitleIcon) {\n          <ga-icon\n            [icon]=\"tabTitleIcon\"\n            size=\"16\"\n            class=\"ga-tabs__tab-icon\"\n            [color]=\"tab.rightIconColor()\"\n          />\n        }\n      </li>\n    }\n  }\n\n  <!-- More button for overflow tabs -->\n  <li\n    #moreButton\n    class=\"ga-tabs__tab ga-tabs__more\"\n    [class.ga-tabs__more--hidden]=\"!hasOverflow()\"\n    [class.ga-tabs__tab--selected]=\"selectedInOverflow()\"\n    [gaMenuTrigger]=\"overflowMenu\"\n    aria-haspopup=\"menu\"\n  >\n    {{ i18n.moreLabel }}\n    <ga-icon [icon]=\"chevronDown\" size=\"16\" />\n  </li>\n</ul>\n\n<!-- Overflow menu -->\n<ng-template #overflowMenu>\n  <ga-menu>\n    @for (i of overflowTabIndices(); track i) {\n      <button\n        gaMenuItem\n        (click)=\"onTabClick(i)\"\n        [gaMenuItemSelected]=\"i === selectedIndex()\"\n      >\n        {{ tabs()[i].title() }}\n      </button>\n    }\n  </ga-menu>\n</ng-template>\n\n@for (tab of tabs(); track tab; let i = $index) {\n  @if (tab === selectedTab()) {\n    <div\n      role=\"tabpanel\"\n      [attr.id]=\"uniqueId + '-tabpanel-' + i\"\n      [attr.aria-labelledby]=\"uniqueId + '-tablabel-' + i\"\n    >\n      <ng-template [ngTemplateOutlet]=\"tab.contentTpl()\"></ng-template>\n    </div>\n  }\n}\n", styles: [":host{display:flex}:host.ga-tabs-container--horizontal{flex-direction:column}:host.ga-tabs-container--vertical{flex-direction:row}:host .ga-tabs{white-space:nowrap}:host .ga-tabs__more{display:flex;align-items:center;gap:4px;cursor:pointer}:host .ga-tabs__more--hidden{visibility:hidden;position:absolute;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }, { kind: "component", type: GaMenuComponent, selector: "ga-menu" }, { kind: "directive", type: GaMenuTriggerDirective, selector: "[gaMenuTrigger]", inputs: ["gaMenuTrigger"], exportAs: ["gaMenuTrigger"] }, { kind: "component", type: GaMenuItemComponent, selector: "[gaMenuItem]", inputs: ["gaMenuItemIcon", "gaMenuItemDescription", "gaMenuItemShortcut", "gaMenuItemSelected"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GaTabsComponent, isStandalone: true, selector: "ga-tabs", inputs: { withKeyline: { classPropertyName: "withKeyline", publicName: "withKeyline", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, selectedIndexInput: { classPropertyName: "selectedIndexInput", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { beforeTabChange: "beforeTabChange", selectedIndexChange: "selectedIndexChange", selectedTabChange: "selectedTabChange" }, host: { properties: { "attr.aria-label": "null", "attr.aria-labelledby": "null", "class.ga-tabs-container--horizontal": "orientation() === 'horizontal'", "class.ga-tabs-container--vertical": "orientation() === 'vertical'" } }, queries: [{ propertyName: "tabs", predicate: GaTabComponent, isSignal: true }], viewQueries: [{ propertyName: "tabListRef", first: true, predicate: ["tabList"], descendants: true, isSignal: true }, { propertyName: "tabButtonRefs", predicate: ["tabButton"], descendants: true, isSignal: true }, { propertyName: "moreButtonRef", first: true, predicate: ["moreButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<ul\n  #tabList\n  role=\"tablist\"\n  [attr.id]=\"uniqueId\"\n  class=\"ga-tabs\"\n  [class.ga-tabs--horizontal]=\"orientation() === 'horizontal'\"\n  [class.ga-tabs--vertical]=\"orientation() === 'vertical'\"\n  [class.ga-tabs--keyline]=\"withKeyline()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-labelledby]=\"ariaLabelledby()\"\n  [attr.aria-orientation]=\"orientation()\"\n>\n  @for (tab of tabs(); track tab; let i = $index) {\n    @if (visibleTabIndices().includes(i)) {\n      <li\n        #tabButton\n        [attr.id]=\"uniqueId + '-tablabel-' + i\"\n        class=\"ga-tabs__tab\"\n        [class.ga-tabs__tab--selected]=\"i === selectedIndex()\"\n        [class.ga-tabs__tab--disabled]=\"tab.disabled()\"\n        role=\"tab\"\n        [tabindex]=\"tab.disabled() ? -1 : undefined\"\n        (click)=\"onTabClick(i); $event.preventDefault()\"\n        (keydown.enter)=\"onTabClick(i); $event.preventDefault()\"\n        (keydown.space)=\"onTabClick(i); $event.preventDefault()\"\n        [attr.aria-selected]=\"i === selectedIndex()\"\n        [attr.aria-disabled]=\"tab.disabled()\"\n        [attr.aria-controls]=\"uniqueId + '-tabpanel-' + i\"\n      >\n        {{ tab.title() }}\n        @let tabTitleIcon = tab.rightIcon();\n        @if (tabTitleIcon) {\n          <ga-icon\n            [icon]=\"tabTitleIcon\"\n            size=\"16\"\n            class=\"ga-tabs__tab-icon\"\n            [color]=\"tab.rightIconColor()\"\n          />\n        }\n      </li>\n    }\n  }\n\n  <!-- More button for overflow tabs -->\n  <li\n    #moreButton\n    class=\"ga-tabs__tab ga-tabs__more\"\n    [class.ga-tabs__more--hidden]=\"!hasOverflow()\"\n    [class.ga-tabs__tab--selected]=\"selectedInOverflow()\"\n    [gaMenuTrigger]=\"overflowMenu\"\n    aria-haspopup=\"menu\"\n  >\n    {{ i18n.moreLabel }}\n    <ga-icon [icon]=\"chevronDown\" size=\"16\" />\n  </li>\n</ul>\n\n<!-- Overflow menu -->\n<ng-template #overflowMenu>\n  <ga-menu>\n    @for (i of overflowTabIndices(); track i) {\n      <button\n        gaMenuItem\n        (click)=\"onTabClick(i)\"\n        [gaMenuItemSelected]=\"i === selectedIndex()\"\n      >\n        {{ tabs()[i].title() }}\n      </button>\n    }\n  </ga-menu>\n</ng-template>\n\n@for (tab of tabs(); track tab; let i = $index) {\n  @if (tab === selectedTab()) {\n    <div\n      role=\"tabpanel\"\n      [attr.id]=\"uniqueId + '-tabpanel-' + i\"\n      [attr.aria-labelledby]=\"uniqueId + '-tablabel-' + i\"\n    >\n      <ng-template [ngTemplateOutlet]=\"tab.contentTpl()\"></ng-template>\n    </div>\n  }\n}\n", styles: [":host{display:flex}:host.ga-tabs-container--horizontal{flex-direction:column}:host.ga-tabs-container--vertical{flex-direction:row}:host .ga-tabs{white-space:nowrap}:host .ga-tabs__more{display:flex;align-items:center;gap:4px;cursor:pointer}:host .ga-tabs__more--hidden{visibility:hidden;position:absolute;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }, { kind: "component", type: GaMenuComponent, selector: "ga-menu" }, { kind: "directive", type: GaMenuTriggerDirective, selector: "[gaMenuTrigger]", inputs: ["gaMenuTrigger"], exportAs: ["gaMenuTrigger"] }, { kind: "component", type: GaMenuItemComponent, selector: "[gaMenuItem]", inputs: ["gaMenuItemIcon", "gaMenuItemDescription", "gaMenuItemShortcut", "gaMenuItemSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ga-tabs', imports: [
+            args: [{ selector: 'ga-tabs', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         NgTemplateOutlet,
                         GaIconComponent,
                         GaMenuComponent,
@@ -6308,11 +6328,11 @@ class GaChipListboxComponent {
         this.cdkListbox.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaChipListboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: GaChipListboxComponent, isStandalone: true, selector: "ga-chip-listbox", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { classAttribute: "ga-chip-listbox" }, hostDirectives: [{ directive: i1$5.CdkListbox, inputs: ["cdkListboxMultiple", "multiple", "cdkListboxValue", "value", "cdkListboxDisabled", "disabled", "cdkListboxCompareWith", "compareWith"] }], ngImport: i0, template: "<ng-content />\n" });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: GaChipListboxComponent, isStandalone: true, selector: "ga-chip-listbox", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { classAttribute: "ga-chip-listbox" }, hostDirectives: [{ directive: i1$5.CdkListbox, inputs: ["cdkListboxMultiple", "multiple", "cdkListboxValue", "value", "cdkListboxDisabled", "disabled", "cdkListboxCompareWith", "compareWith"] }], ngImport: i0, template: "<ng-content />\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaChipListboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ga-chip-listbox', hostDirectives: [
+            args: [{ selector: 'ga-chip-listbox', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
                         {
                             directive: CdkListbox,
                             inputs: [
@@ -6343,11 +6363,11 @@ class GaChipComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: GaChipComponent, isStandalone: true, selector: "ga-chip", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ga-quick-filter-button--transparent": "listbox.variant() === 'transparent'", "class.ga-quick-filter-button--disabled": "disabled() || listbox.disabled()", "class.ga-quick-filter-button--selected": "selected()" }, classAttribute: "ga-quick-filter-button" }, hostDirectives: [{ directive: i1$5.CdkOption, inputs: ["cdkOption", "value", "cdkOptionDisabled", "disabled"] }], ngImport: i0, template: "<ng-content />\n", dependencies: [{ kind: "ngmodule", type: CdkListboxModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: GaChipComponent, isStandalone: true, selector: "ga-chip", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ga-quick-filter-button--transparent": "listbox.variant() === 'transparent'", "class.ga-quick-filter-button--disabled": "disabled() || listbox.disabled()", "class.ga-quick-filter-button--selected": "selected()" }, classAttribute: "ga-quick-filter-button" }, hostDirectives: [{ directive: i1$5.CdkOption, inputs: ["cdkOption", "value", "cdkOptionDisabled", "disabled"] }], ngImport: i0, template: "<ng-content />\n", dependencies: [{ kind: "ngmodule", type: CdkListboxModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaChipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ga-chip', imports: [CdkListboxModule], hostDirectives: [
+            args: [{ selector: 'ga-chip', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CdkListboxModule], hostDirectives: [
                         {
                             directive: CdkOption,
                             inputs: ['cdkOption: value', 'cdkOptionDisabled: disabled'],
@@ -6578,12 +6598,13 @@ class GaStepComponent {
     /** Whether the step is disabled (cannot be navigated to) */
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: GaStepComponent, isStandalone: true, selector: "ga-step", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, labelState: { classPropertyName: "labelState", publicName: "labelState", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, completed: { classPropertyName: "completed", publicName: "completed", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: GaStepComponent, isStandalone: true, selector: "ga-step", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, labelState: { classPropertyName: "labelState", publicName: "labelState", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, completed: { classPropertyName: "completed", publicName: "completed", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaStepComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ga-step',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '',
                 }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], labelState: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelState", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], completed: [{ type: i0.Input, args: [{ isSignal: true, alias: "completed", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });