@vsn-ux/ngx-gaia 0.14.4 → 0.14.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/fesm2022/vsn-ux-ngx-gaia.mjs +112 -73
  2. package/fesm2022/vsn-ux-ngx-gaia.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/types/vsn-ux-ngx-gaia.d.ts +3 -0
package/fesm2022/vsn-ux-ngx-gaia.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- 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';
2
+ 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';
3
3
  import * as i1 from 'lucide-angular';
4
4
  import { LucideAngularModule, X, CircleCheck, TriangleAlert, OctagonAlert, Info, Check, Minus, ChevronDown, ChevronUp, ChevronRight, ChevronLeft, CalendarDays, CircleX, CircleDashed, CircleCheckBig } from 'lucide-angular';
5
5
  import { NgForm, ControlContainer, NgControl, NG_VALUE_ACCESSOR, NG_VALIDATORS, CheckboxRequiredValidator, RequiredValidator } from '@angular/forms';
@@ -10,11 +10,11 @@ import { NgTemplateOutlet } from '@angular/common';
10
10
  import { ComponentPortal } from '@angular/cdk/portal';
11
11
  import { Subject, takeUntil, map, merge, filter, Observable, isObservable, timer } from 'rxjs';
12
12
  import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
13
+ import * as i1$3 from '@angular/cdk/a11y';
14
+ import { FocusMonitor, CdkTrapFocus } from '@angular/cdk/a11y';
13
15
  import * as i1$2 from '@angular/cdk/menu';
14
16
  import { CdkMenu, CdkMenuItem, CdkMenuTrigger, MENU_SCROLL_STRATEGY } from '@angular/cdk/menu';
15
17
  import { Router, ResolveStart } from '@angular/router';
16
- import * as i1$3 from '@angular/cdk/a11y';
17
- import { CdkTrapFocus } from '@angular/cdk/a11y';
18
18
  import * as i1$4 from '@angular/cdk/scrolling';
19
19
  import { CdkScrollable } from '@angular/cdk/scrolling';
20
20
  import * as i1$5 from '@angular/cdk/listbox';
@@ -63,11 +63,11 @@ class GaIconComponent {
63
63
  [name]="icon()"
64
64
  [color]="color()"
65
65
  [strokeWidth]="strokeWidth()"
66
- />`, 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 });
66
+ />`, 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 });
67
67
  }
68
68
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaIconComponent, decorators: [{
69
69
  type: Component,
70
- args: [{ selector: 'ga-icon', imports: [LucideAngularModule], template: `<lucide-icon
70
+ args: [{ selector: 'ga-icon', changeDetection: ChangeDetectionStrategy.OnPush, imports: [LucideAngularModule], template: `<lucide-icon
71
71
  [name]="icon()"
72
72
  [color]="color()"
73
73
  [strokeWidth]="strokeWidth()"
@@ -93,12 +93,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
93
93
 
94
94
  class GaAlertTitleComponent {
95
95
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaAlertTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
96
- 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 });
96
+ 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 });
97
97
  }
98
98
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaAlertTitleComponent, decorators: [{
99
99
  type: Component,
100
100
  args: [{
101
101
  selector: 'ga-alert-title',
102
+ changeDetection: ChangeDetectionStrategy.OnPush,
102
103
  template: `<ng-content />`,
103
104
  host: {
104
105
  class: 'ga-notification__title',
@@ -172,11 +173,11 @@ class GaSpinnerComponent {
172
173
  style="transform-origin: center; animation: ga-spinner__animation 1100ms linear infinite;"
173
174
  ></circle>
174
175
  </svg>
175
- `, 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 });
176
+ `, 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 });
176
177
  }
177
178
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaSpinnerComponent, decorators: [{
178
179
  type: Component,
179
- args: [{ selector: 'ga-spinner', template: `
180
+ args: [{ selector: 'ga-spinner', changeDetection: ChangeDetectionStrategy.OnPush, template: `
180
181
  <svg
181
182
  [attr.width]="size()"
182
183
  [attr.height]="size()"
@@ -416,11 +417,11 @@ class GaAlertComponent {
416
417
  return this.ariaLive() === 'assertive' ? 'alert' : 'status';
417
418
  }, ...(ngDevMode ? [{ debugName: "role" }] : []));
418
419
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
419
- 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"] }] });
420
+ 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 });
420
421
  }
421
422
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaAlertComponent, decorators: [{
422
423
  type: Component,
423
- args: [{ selector: 'ga-alert', imports: [GaIconModule, GaButtonModule], host: {
424
+ args: [{ selector: 'ga-alert', changeDetection: ChangeDetectionStrategy.OnPush, imports: [GaIconModule, GaButtonModule], host: {
424
425
  '[attr.role]': 'role()',
425
426
  '[attr.aria-live]': 'ariaLive()',
426
427
  'aria-atomic': 'true',
@@ -430,12 +431,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
430
431
 
431
432
  class GaAlertTitleActionsComponent {
432
433
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaAlertTitleActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
433
- 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 });
434
+ 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 });
434
435
  }
435
436
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaAlertTitleActionsComponent, decorators: [{
436
437
  type: Component,
437
438
  args: [{
438
439
  selector: 'ga-alert-title-actions',
440
+ changeDetection: ChangeDetectionStrategy.OnPush,
439
441
  template: `<ng-content />`,
440
442
  host: {
441
443
  class: 'ga-notification__title-actions',
@@ -475,12 +477,13 @@ class GaBadgeComponent {
475
477
  return `ga-badge ga-badge--${this.type()} ga-badge--${this.variant()}`;
476
478
  }, ...(ngDevMode ? [{ debugName: "variantClass" }] : []));
477
479
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
478
- 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 });
480
+ 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 });
479
481
  }
480
482
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaBadgeComponent, decorators: [{
481
483
  type: Component,
482
484
  args: [{
483
485
  selector: 'ga-badge',
486
+ changeDetection: ChangeDetectionStrategy.OnPush,
484
487
  template: `<ng-content />`,
485
488
  host: {
486
489
  '[class]': `variantClass()`,
@@ -506,12 +509,13 @@ class GaCardComponent {
506
509
  selected = input(false, { ...(ngDevMode ? { debugName: "selected" } : {}), transform: booleanAttribute });
507
510
  disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
508
511
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
509
- 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 });
512
+ 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 });
510
513
  }
511
514
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaCardComponent, decorators: [{
512
515
  type: Component,
513
516
  args: [{
514
517
  selector: 'ga-card',
518
+ changeDetection: ChangeDetectionStrategy.OnPush,
515
519
  template: `<ng-content />`,
516
520
  host: {
517
521
  class: 'ga-card',
@@ -1332,11 +1336,11 @@ class GaDatepickerComponent {
1332
1336
  return this.i18n.monthNames[monthIndex - 1]; // Convert from 1-12 to 0-11 for array access
1333
1337
  }
1334
1338
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1335
- 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"] }] });
1339
+ 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 });
1336
1340
  }
1337
1341
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaDatepickerComponent, decorators: [{
1338
1342
  type: Component,
1339
- args: [{ selector: 'ga-datepicker', imports: [GaIconModule], host: {
1343
+ args: [{ selector: 'ga-datepicker', changeDetection: ChangeDetectionStrategy.OnPush, imports: [GaIconModule], host: {
1340
1344
  class: 'ga-calendar',
1341
1345
  }, 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"] }]
1342
1346
  }], 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 {
1408
1412
  announcement = input('', ...(ngDevMode ? [{ debugName: "announcement" }] : []));
1409
1413
  ariaLive = input('polite', ...(ngDevMode ? [{ debugName: "ariaLive" }] : []));
1410
1414
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaInputLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1411
- 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"] }] });
1415
+ 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 });
1412
1416
  }
1413
1417
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaInputLoadingComponent, decorators: [{
1414
1418
  type: Component,
1415
- args: [{ selector: 'ga-input-loading', template: `<ga-spinner size="16" />`, imports: [GaSpinnerComponent], host: {
1419
+ args: [{ selector: 'ga-input-loading', changeDetection: ChangeDetectionStrategy.OnPush, template: `<ga-spinner size="16" />`, imports: [GaSpinnerComponent], host: {
1416
1420
  role: 'status',
1417
1421
  '[attr.aria-label]': 'announcement() || null',
1418
1422
  '[attr.aria-live]': 'ariaLive()',
@@ -1523,11 +1527,11 @@ class GaDatepickerToggleComponent {
1523
1527
  this.close();
1524
1528
  }
1525
1529
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaDatepickerToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1526
- 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 });
1530
+ 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 });
1527
1531
  }
1528
1532
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaDatepickerToggleComponent, decorators: [{
1529
1533
  type: Component,
1530
- args: [{ selector: 'ga-datepicker-toggle', imports: [GaIconModule, GaButtonModule, OverlayModule, GaDatepickerComponent], encapsulation: ViewEncapsulation.None, host: {
1534
+ args: [{ selector: 'ga-datepicker-toggle', changeDetection: ChangeDetectionStrategy.OnPush, imports: [GaIconModule, GaButtonModule, OverlayModule, GaDatepickerComponent], encapsulation: ViewEncapsulation.None, host: {
1531
1535
  '(keydown.escape)': 'close()',
1532
1536
  }, 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"] }]
1533
1537
  }], propDecorators: { for: [{ type: i0.Input, args: [{ isSignal: true, alias: "for", required: true }] }] } });
@@ -2249,11 +2253,11 @@ class GaInputClearButtonComponent {
2249
2253
  ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
2250
2254
  cleared = output();
2251
2255
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaInputClearButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2252
- 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"] }] });
2256
+ 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 });
2253
2257
  }
2254
2258
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaInputClearButtonComponent, decorators: [{
2255
2259
  type: Component,
2256
- args: [{ selector: 'ga-input-clear-button', template: `<ga-icon [icon]="icon" size="16" />`, imports: [GaIconComponent], host: {
2260
+ args: [{ selector: 'ga-input-clear-button', changeDetection: ChangeDetectionStrategy.OnPush, template: `<ga-icon [icon]="icon" size="16" />`, imports: [GaIconComponent], host: {
2257
2261
  role: 'button',
2258
2262
  tabindex: '-1',
2259
2263
  '[attr.aria-label]': 'ariaLabel() || i18n.clearLabel',
@@ -2532,6 +2536,7 @@ class GaTooltipDirective {
2532
2536
  elementRef = inject(ElementRef);
2533
2537
  overlay = inject(Overlay);
2534
2538
  ngZone = inject(NgZone);
2539
+ focusMonitor = inject(FocusMonitor);
2535
2540
  destroyed$ = new Subject();
2536
2541
  _content = null;
2537
2542
  tooltipInstanceDestroyed$ = null;
@@ -2612,9 +2617,28 @@ class GaTooltipDirective {
2612
2617
  get placement() {
2613
2618
  return this._placement;
2614
2619
  }
2620
+ constructor() {
2621
+ // Only treat keyboard focus as a tooltip trigger. Pointer-originated focus
2622
+ // (e.g. clicking a button) is left to the hover lifecycle, so the tooltip
2623
+ // dismisses on mouse leave even though the element keeps focus.
2624
+ this.focusMonitor
2625
+ .monitor(this.elementRef)
2626
+ .pipe(takeUntil(this.destroyed$))
2627
+ .subscribe((origin) => {
2628
+ this.ngZone.run(() => {
2629
+ if (origin === 'keyboard') {
2630
+ this.handleFocusIn();
2631
+ }
2632
+ else if (!origin) {
2633
+ this.handleFocusOut();
2634
+ }
2635
+ });
2636
+ });
2637
+ }
2615
2638
  ngOnDestroy() {
2616
2639
  this.clearShowTimeout();
2617
2640
  this.isAnimatingOut = false;
2641
+ this.focusMonitor.stopMonitoring(this.elementRef);
2618
2642
  this.destroyed$.next();
2619
2643
  this.destroyed$.complete();
2620
2644
  this.overlayRef?.detach();
@@ -2875,7 +2899,7 @@ class GaTooltipDirective {
2875
2899
  }
2876
2900
  }
2877
2901
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
2878
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: GaTooltipDirective, isStandalone: true, selector: "[gaTooltip]", inputs: { content: { classPropertyName: "content", publicName: "gaTooltip", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "gaTooltipDisabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, controlMode: { classPropertyName: "controlMode", publicName: "gaTooltipControlMode", isSignal: false, isRequired: false, transformFunction: null }, showControlMode: { classPropertyName: "showControlMode", publicName: "gaTooltipShowControlMode", isSignal: false, isRequired: false, transformFunction: null }, hideControlMode: { classPropertyName: "hideControlMode", publicName: "gaTooltipHideControlMode", isSignal: false, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "gaTooltipOffsetSize", isSignal: false, isRequired: false, transformFunction: numberAttribute }, showDelay: { classPropertyName: "showDelay", publicName: "gaTooltipShowDelay", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "gaTooltipPlacement", isSignal: false, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "handleMouseClick()", "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()", "focusin": "handleFocusIn()", "focusout": "handleFocusOut()" }, properties: { "attr.aria-describedby": "ariaDescribedBy()" } }, exportAs: ["gaTooltip"], ngImport: i0 });
2902
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: GaTooltipDirective, isStandalone: true, selector: "[gaTooltip]", inputs: { content: { classPropertyName: "content", publicName: "gaTooltip", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "gaTooltipDisabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, controlMode: { classPropertyName: "controlMode", publicName: "gaTooltipControlMode", isSignal: false, isRequired: false, transformFunction: null }, showControlMode: { classPropertyName: "showControlMode", publicName: "gaTooltipShowControlMode", isSignal: false, isRequired: false, transformFunction: null }, hideControlMode: { classPropertyName: "hideControlMode", publicName: "gaTooltipHideControlMode", isSignal: false, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "gaTooltipOffsetSize", isSignal: false, isRequired: false, transformFunction: numberAttribute }, showDelay: { classPropertyName: "showDelay", publicName: "gaTooltipShowDelay", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "gaTooltipPlacement", isSignal: false, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "handleMouseClick()", "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()" }, properties: { "attr.aria-describedby": "ariaDescribedBy()" } }, exportAs: ["gaTooltip"], ngImport: i0 });
2879
2903
  }
2880
2904
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaTooltipDirective, decorators: [{
2881
2905
  type: Directive,
@@ -2887,11 +2911,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
2887
2911
  '(click)': 'handleMouseClick()',
2888
2912
  '(mouseenter)': 'handleMouseEnter()',
2889
2913
  '(mouseleave)': 'handleMouseLeave()',
2890
- '(focusin)': 'handleFocusIn()',
2891
- '(focusout)': 'handleFocusOut()',
2892
2914
  },
2893
2915
  }]
2894
- }], propDecorators: { content: [{
2916
+ }], ctorParameters: () => [], propDecorators: { content: [{
2895
2917
  type: Input,
2896
2918
  args: ['gaTooltip']
2897
2919
  }], disabled: [{
@@ -3070,11 +3092,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
3070
3092
 
3071
3093
  class GaMenuComponent {
3072
3094
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3073
- 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"] });
3095
+ 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 });
3074
3096
  }
3075
3097
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaMenuComponent, decorators: [{
3076
3098
  type: Component,
3077
- args: [{ selector: 'ga-menu', template: `<ng-content />`, hostDirectives: [CdkMenu], host: {
3099
+ args: [{ selector: 'ga-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: `<ng-content />`, hostDirectives: [CdkMenu], host: {
3078
3100
  class: 'ga-menu',
3079
3101
  'animate.enter': 'ga-animation-reveal',
3080
3102
  'animate.leave': 'ga-animation-dismiss',
@@ -3088,11 +3110,11 @@ class GaMenuItemComponent {
3088
3110
  selected = input(false, { ...(ngDevMode ? { debugName: "selected" } : {}), alias: 'gaMenuItemSelected',
3089
3111
  transform: booleanAttribute });
3090
3112
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3091
- 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"] }] });
3113
+ 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 });
3092
3114
  }
3093
3115
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaMenuItemComponent, decorators: [{
3094
3116
  type: Component,
3095
- args: [{ selector: '[gaMenuItem]', imports: [GaIconModule], hostDirectives: [CdkMenuItem], host: {
3117
+ args: [{ selector: '[gaMenuItem]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [GaIconModule], hostDirectives: [CdkMenuItem], host: {
3096
3118
  class: 'ga-menu__item',
3097
3119
  '[class.ga-menu__item--selected]': 'selected()',
3098
3120
  }, 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" }]
@@ -3100,12 +3122,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
3100
3122
 
3101
3123
  class GaMenuTitleComponent {
3102
3124
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaMenuTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3103
- 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 });
3125
+ 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 });
3104
3126
  }
3105
3127
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaMenuTitleComponent, decorators: [{
3106
3128
  type: Component,
3107
3129
  args: [{
3108
3130
  selector: 'ga-menu-title',
3131
+ changeDetection: ChangeDetectionStrategy.OnPush,
3109
3132
  template: `<ng-content />`,
3110
3133
  host: {
3111
3134
  class: 'ga-menu__title',
@@ -3159,12 +3182,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
3159
3182
 
3160
3183
  class GaMenuSeparatorComponent {
3161
3184
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaMenuSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3162
- 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 });
3185
+ 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 });
3163
3186
  }
3164
3187
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaMenuSeparatorComponent, decorators: [{
3165
3188
  type: Component,
3166
3189
  args: [{
3167
3190
  selector: 'ga-menu-separator',
3191
+ changeDetection: ChangeDetectionStrategy.OnPush,
3168
3192
  template: `<ng-content />`,
3169
3193
  host: {
3170
3194
  class: 'ga-menu__separator',
@@ -3178,12 +3202,13 @@ class GaMenuTriggerIconComponent {
3178
3202
  return this.menuTrigger.isOpen() ? ChevronUp : ChevronDown;
3179
3203
  }, ...(ngDevMode ? [{ debugName: "icon" }] : []));
3180
3204
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaMenuTriggerIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3181
- 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"] }] });
3205
+ 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 });
3182
3206
  }
3183
3207
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaMenuTriggerIconComponent, decorators: [{
3184
3208
  type: Component,
3185
3209
  args: [{
3186
3210
  selector: 'ga-menu-trigger-icon',
3211
+ changeDetection: ChangeDetectionStrategy.OnPush,
3187
3212
  imports: [GaIconModule],
3188
3213
  template: `<ga-icon [icon]="icon()" />`,
3189
3214
  }]
@@ -3476,12 +3501,13 @@ class GaModalComponent {
3476
3501
  };
3477
3502
  }
3478
3503
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3479
- 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 });
3504
+ 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 });
3480
3505
  }
3481
3506
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaModalComponent, decorators: [{
3482
3507
  type: Component,
3483
3508
  args: [{
3484
3509
  template: '',
3510
+ changeDetection: ChangeDetectionStrategy.OnPush,
3485
3511
  host: {
3486
3512
  class: 'ga-modal',
3487
3513
  '[attr.role]': 'options.role',
@@ -3609,12 +3635,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
3609
3635
 
3610
3636
  class GaModalDescriptionComponent {
3611
3637
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaModalDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3612
- 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 });
3638
+ 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 });
3613
3639
  }
3614
3640
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaModalDescriptionComponent, decorators: [{
3615
3641
  type: Component,
3616
3642
  args: [{
3617
3643
  selector: 'ga-modal-description',
3644
+ changeDetection: ChangeDetectionStrategy.OnPush,
3618
3645
  template: `<ng-content />`,
3619
3646
  hostDirectives: [GaModalDescriptionDirective],
3620
3647
  host: {
@@ -3625,12 +3652,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
3625
3652
 
3626
3653
  class GaModalContentComponent {
3627
3654
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaModalContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3628
- 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 });
3655
+ 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 });
3629
3656
  }
3630
3657
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaModalContentComponent, decorators: [{
3631
3658
  type: Component,
3632
3659
  args: [{
3633
3660
  selector: 'ga-modal-content',
3661
+ changeDetection: ChangeDetectionStrategy.OnPush,
3634
3662
  template: `<ng-content />`,
3635
3663
  hostDirectives: [CdkScrollable],
3636
3664
  host: {
@@ -3641,12 +3669,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
3641
3669
 
3642
3670
  class GaModalActionsComponent {
3643
3671
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaModalActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3644
- 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 });
3672
+ 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 });
3645
3673
  }
3646
3674
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaModalActionsComponent, decorators: [{
3647
3675
  type: Component,
3648
3676
  args: [{
3649
3677
  selector: 'ga-modal-actions',
3678
+ changeDetection: ChangeDetectionStrategy.OnPush,
3650
3679
  template: ` <ng-content />`,
3651
3680
  host: {
3652
3681
  class: 'ga-modal__actions',
@@ -3729,12 +3758,13 @@ class GaModalHeaderComponent {
3729
3758
  >
3730
3759
  {{ i18n.dismissLabel }}
3731
3760
  </button>
3732
- `, 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"] }] });
3761
+ `, 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 });
3733
3762
  }
3734
3763
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaModalHeaderComponent, decorators: [{
3735
3764
  type: Component,
3736
3765
  args: [{
3737
3766
  selector: 'ga-modal-header',
3767
+ changeDetection: ChangeDetectionStrategy.OnPush,
3738
3768
  imports: [GaButtonModule, GaIconModule],
3739
3769
  template: `
3740
3770
  @if (modalRef.instance.options.type !== 'none') {
@@ -4023,11 +4053,11 @@ class GaOptionComponent {
4023
4053
  }
4024
4054
  }
4025
4055
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
4026
- 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"] }] });
4056
+ 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 });
4027
4057
  }
4028
4058
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaOptionComponent, decorators: [{
4029
4059
  type: Component,
4030
- args: [{ selector: 'ga-option', imports: [GaCheckboxModule, GaFormFieldIgnoreDirective, GaRadioModule], hostDirectives: [
4060
+ args: [{ selector: 'ga-option', changeDetection: ChangeDetectionStrategy.OnPush, imports: [GaCheckboxModule, GaFormFieldIgnoreDirective, GaRadioModule], hostDirectives: [
4031
4061
  {
4032
4062
  directive: CdkOption,
4033
4063
  inputs: [
@@ -4048,12 +4078,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
4048
4078
 
4049
4079
  class GaSelectValueComponent {
4050
4080
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaSelectValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
4051
- 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 });
4081
+ 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 });
4052
4082
  }
4053
4083
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaSelectValueComponent, decorators: [{
4054
4084
  type: Component,
4055
4085
  args: [{
4056
4086
  selector: 'ga-select-value',
4087
+ changeDetection: ChangeDetectionStrategy.OnPush,
4057
4088
  template: `<ng-content />`,
4058
4089
  }]
4059
4090
  }] });
@@ -4072,11 +4103,11 @@ class GaSelectDefaultValueComponent {
4072
4103
  this.selectComponent.deselectValue(option.cdkOption.value);
4073
4104
  }
4074
4105
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaSelectDefaultValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
4075
- 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"] }] });
4106
+ 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 });
4076
4107
  }
4077
4108
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaSelectDefaultValueComponent, decorators: [{
4078
4109
  type: Component,
4079
- args: [{ selector: 'ga-select-default-value', imports: [GaIconModule], host: {
4110
+ args: [{ selector: 'ga-select-default-value', changeDetection: ChangeDetectionStrategy.OnPush, imports: [GaIconModule], host: {
4080
4111
  class: 'ga-select__value',
4081
4112
  }, 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" }]
4082
4113
  }] });
@@ -4129,12 +4160,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
4129
4160
 
4130
4161
  class GaSelectDropdownSpinnerComponent {
4131
4162
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaSelectDropdownSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
4132
- 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"] }] });
4163
+ 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 });
4133
4164
  }
4134
4165
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaSelectDropdownSpinnerComponent, decorators: [{
4135
4166
  type: Component,
4136
4167
  args: [{
4137
4168
  selector: 'ga-select-dropdown-spinner',
4169
+ changeDetection: ChangeDetectionStrategy.OnPush,
4138
4170
  template: `<ga-spinner size="16" />`,
4139
4171
  imports: [GaSpinnerModule],
4140
4172
  host: {
@@ -4150,11 +4182,11 @@ class GaSelectDropdownComponent {
4150
4182
  this.elementRef.nativeElement.scrollTo(0, 0);
4151
4183
  }
4152
4184
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaSelectDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
4153
- 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" }] });
4185
+ 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 });
4154
4186
  }
4155
4187
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaSelectDropdownComponent, decorators: [{
4156
4188
  type: Component,
4157
- args: [{ selector: 'ga-select-dropdown', imports: [GaSelectDropdownSpinnerComponent], hostDirectives: [CdkListbox], host: {
4189
+ args: [{ selector: 'ga-select-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, imports: [GaSelectDropdownSpinnerComponent], hostDirectives: [CdkListbox], host: {
4158
4190
  class: 'ga-dropdown ga-dropdown__content',
4159
4191
  'animate.enter': 'ga-animation-reveal',
4160
4192
  'animate.leave': 'ga-animation-dismiss',
@@ -4424,7 +4456,7 @@ class GaSelectComponent {
4424
4456
  this.autoClose();
4425
4457
  }
4426
4458
  onInputKeyDown(event) {
4427
- switch (event.code) {
4459
+ switch (event.key) {
4428
4460
  case 'ArrowDown':
4429
4461
  this.setNextItemActive();
4430
4462
  event.preventDefault();
@@ -4435,7 +4467,7 @@ class GaSelectComponent {
4435
4467
  event.preventDefault();
4436
4468
  event.stopPropagation();
4437
4469
  break;
4438
- case 'Space':
4470
+ case ' ':
4439
4471
  event.stopPropagation();
4440
4472
  break;
4441
4473
  case 'Enter':
@@ -4544,11 +4576,11 @@ class GaSelectComponent {
4544
4576
  useExisting: forwardRef(() => GaSelectComponent),
4545
4577
  multi: true,
4546
4578
  },
4547
- ], 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" }] });
4579
+ ], 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 });
4548
4580
  }
4549
4581
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaSelectComponent, decorators: [{
4550
4582
  type: Component,
4551
- args: [{ selector: 'ga-select', imports: [
4583
+ args: [{ selector: 'ga-select', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
4552
4584
  GaIconModule,
4553
4585
  GaButtonModule,
4554
4586
  OverlayModule,
@@ -4603,12 +4635,13 @@ class GaOptgroupComponent {
4603
4635
  <div class="ga-dropdown__caption">{{ label() }}</div>
4604
4636
  }
4605
4637
  <ng-content />
4606
- `, isInline: true });
4638
+ `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
4607
4639
  }
4608
4640
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaOptgroupComponent, decorators: [{
4609
4641
  type: Component,
4610
4642
  args: [{
4611
4643
  selector: 'ga-optgroup',
4644
+ changeDetection: ChangeDetectionStrategy.OnPush,
4612
4645
  template: `
4613
4646
  @if (label()) {
4614
4647
  <div class="ga-dropdown__caption">{{ label() }}</div>
@@ -4730,11 +4763,11 @@ class GaDataOptionComponent {
4730
4763
  }
4731
4764
  }
4732
4765
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaDataOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
4733
- 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"] }] });
4766
+ 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 });
4734
4767
  }
4735
4768
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaDataOptionComponent, decorators: [{
4736
4769
  type: Component,
4737
- args: [{ selector: 'ga-data-option', imports: [GaCheckboxModule, GaFormFieldIgnoreDirective, GaRadioModule], hostDirectives: [
4770
+ args: [{ selector: 'ga-data-option', changeDetection: ChangeDetectionStrategy.OnPush, imports: [GaCheckboxModule, GaFormFieldIgnoreDirective, GaRadioModule], hostDirectives: [
4738
4771
  {
4739
4772
  directive: CdkOption,
4740
4773
  inputs: [
@@ -4851,11 +4884,11 @@ class GaDataSelectValueComponent {
4851
4884
  this.selectComponent.deselectValues(this.selectedItems());
4852
4885
  }
4853
4886
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaDataSelectValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
4854
- 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"] }] });
4887
+ 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 });
4855
4888
  }
4856
4889
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaDataSelectValueComponent, decorators: [{
4857
4890
  type: Component,
4858
- args: [{ selector: 'ga-data-select-value', imports: [GaIconModule, NgTemplateOutlet], host: {
4891
+ args: [{ selector: 'ga-data-select-value', changeDetection: ChangeDetectionStrategy.OnPush, imports: [GaIconModule, NgTemplateOutlet], host: {
4859
4892
  class: 'ga-select__value',
4860
4893
  }, 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" }]
4861
4894
  }], propDecorators: { customValueTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "customValueTemplate", required: false }] }] } });
@@ -4863,12 +4896,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
4863
4896
  class GaDataSelectDropdownSpinnerComponent {
4864
4897
  i18n = inject(GaDataSelectI18n);
4865
4898
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaDataSelectDropdownSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
4866
- 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"] }] });
4899
+ 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 });
4867
4900
  }
4868
4901
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaDataSelectDropdownSpinnerComponent, decorators: [{
4869
4902
  type: Component,
4870
4903
  args: [{
4871
4904
  selector: 'ga-data-select-dropdown-spinner',
4905
+ changeDetection: ChangeDetectionStrategy.OnPush,
4872
4906
  template: `<ga-spinner size="16" />`,
4873
4907
  imports: [GaSpinnerModule],
4874
4908
  host: {
@@ -4896,11 +4930,11 @@ class GaDataSelectDropdownComponent {
4896
4930
  this.elementRef.nativeElement.scrollTo(0, 0);
4897
4931
  }
4898
4932
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaDataSelectDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
4899
- 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" }] });
4933
+ 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 });
4900
4934
  }
4901
4935
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaDataSelectDropdownComponent, decorators: [{
4902
4936
  type: Component,
4903
- args: [{ selector: 'ga-data-select-dropdown', imports: [GaDataSelectDropdownSpinnerComponent], hostDirectives: [
4937
+ args: [{ selector: 'ga-data-select-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, imports: [GaDataSelectDropdownSpinnerComponent], hostDirectives: [
4904
4938
  {
4905
4939
  directive: CdkListbox,
4906
4940
  inputs: [
@@ -4934,12 +4968,13 @@ class GaDataOptgroupComponent {
4934
4968
  <div class="ga-dropdown__caption">{{ label() }}</div>
4935
4969
  }
4936
4970
  <ng-content />
4937
- `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
4971
+ `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4938
4972
  }
4939
4973
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaDataOptgroupComponent, decorators: [{
4940
4974
  type: Component,
4941
4975
  args: [{
4942
4976
  selector: 'ga-data-optgroup',
4977
+ changeDetection: ChangeDetectionStrategy.OnPush,
4943
4978
  imports: [NgTemplateOutlet],
4944
4979
  template: `
4945
4980
  @if (customLabelTemplate(); as templateRef) {
@@ -5070,6 +5105,7 @@ class GaDataSelectComponent {
5070
5105
  },
5071
5106
  ];
5072
5107
  injector = inject(Injector);
5108
+ destroyRef = inject(DestroyRef);
5073
5109
  elementRef = inject((ElementRef));
5074
5110
  formFieldConnector = inject(GaFormFieldConnector, {
5075
5111
  optional: true,
@@ -5343,7 +5379,9 @@ class GaDataSelectComponent {
5343
5379
  const cdkListbox = this.cdkListbox();
5344
5380
  if (cdkListbox) {
5345
5381
  untracked(() => {
5346
- cdkListbox.valueChange.subscribe(({ value }) => {
5382
+ cdkListbox.valueChange
5383
+ .pipe(takeUntilDestroyed(this.destroyRef))
5384
+ .subscribe(({ value }) => {
5347
5385
  if (!this.multiple()) {
5348
5386
  [value] = value;
5349
5387
  }
@@ -5446,7 +5484,7 @@ class GaDataSelectComponent {
5446
5484
  this.autoClose();
5447
5485
  }
5448
5486
  onInputKeyDown(event) {
5449
- switch (event.code) {
5487
+ switch (event.key) {
5450
5488
  case 'ArrowDown':
5451
5489
  case 'ArrowUp':
5452
5490
  case 'Enter': {
@@ -5455,13 +5493,13 @@ class GaDataSelectComponent {
5455
5493
  event.stopPropagation();
5456
5494
  const eventClone = new KeyboardEvent(event.type, event);
5457
5495
  this.dropdownElRef()?.nativeElement.dispatchEvent(eventClone);
5458
- if (event.code === 'Enter' && this.isOpen()) {
5496
+ if (event.key === 'Enter' && this.isOpen()) {
5459
5497
  // if the value wasn't changed via cdkListbox valueChange, close the dropdown manually
5460
5498
  this.autoClose();
5461
5499
  }
5462
5500
  break;
5463
5501
  }
5464
- case 'Space':
5502
+ case ' ':
5465
5503
  event.stopPropagation();
5466
5504
  break;
5467
5505
  case 'Tab':
@@ -5562,11 +5600,11 @@ class GaDataSelectComponent {
5562
5600
  useExisting: forwardRef(() => GaDataSelectComponent),
5563
5601
  multi: true,
5564
5602
  },
5565
- ], 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"] }] });
5603
+ ], 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 });
5566
5604
  }
5567
5605
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaDataSelectComponent, decorators: [{
5568
5606
  type: Component,
5569
- args: [{ selector: 'ga-data-select', imports: [
5607
+ args: [{ selector: 'ga-data-select', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
5570
5608
  GaIconModule,
5571
5609
  GaButtonModule,
5572
5610
  OverlayModule,
@@ -5932,11 +5970,11 @@ class GaTabComponent {
5932
5970
  return this.explicitContent() ?? this.implicitContent();
5933
5971
  }, ...(ngDevMode ? [{ debugName: "contentTpl" }] : []));
5934
5972
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
5935
- 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" });
5973
+ 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 });
5936
5974
  }
5937
5975
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaTabComponent, decorators: [{
5938
5976
  type: Component,
5939
- args: [{ selector: 'ga-tab', template: "<ng-template><ng-content></ng-content></ng-template>\n" }]
5977
+ args: [{ selector: 'ga-tab', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template><ng-content></ng-content></ng-template>\n" }]
5940
5978
  }], 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), { ...{
5941
5979
  read: TemplateRef,
5942
5980
  }, isSignal: true }] }], implicitContent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
@@ -6177,11 +6215,11 @@ class GaTabsComponent {
6177
6215
  this.overflowTabIndices.set(overflow);
6178
6216
  }
6179
6217
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6180
- 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"] }] });
6218
+ 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 });
6181
6219
  }
6182
6220
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaTabsComponent, decorators: [{
6183
6221
  type: Component,
6184
- args: [{ selector: 'ga-tabs', imports: [
6222
+ args: [{ selector: 'ga-tabs', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
6185
6223
  NgTemplateOutlet,
6186
6224
  GaIconComponent,
6187
6225
  GaMenuComponent,
@@ -6290,11 +6328,11 @@ class GaChipListboxComponent {
6290
6328
  this.cdkListbox.focus();
6291
6329
  }
6292
6330
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaChipListboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6293
- 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" });
6331
+ 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 });
6294
6332
  }
6295
6333
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaChipListboxComponent, decorators: [{
6296
6334
  type: Component,
6297
- args: [{ selector: 'ga-chip-listbox', hostDirectives: [
6335
+ args: [{ selector: 'ga-chip-listbox', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
6298
6336
  {
6299
6337
  directive: CdkListbox,
6300
6338
  inputs: [
@@ -6325,11 +6363,11 @@ class GaChipComponent {
6325
6363
  });
6326
6364
  }
6327
6365
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6328
- 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 }] });
6366
+ 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 });
6329
6367
  }
6330
6368
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaChipComponent, decorators: [{
6331
6369
  type: Component,
6332
- args: [{ selector: 'ga-chip', imports: [CdkListboxModule], hostDirectives: [
6370
+ args: [{ selector: 'ga-chip', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CdkListboxModule], hostDirectives: [
6333
6371
  {
6334
6372
  directive: CdkOption,
6335
6373
  inputs: ['cdkOption: value', 'cdkOptionDisabled: disabled'],
@@ -6560,12 +6598,13 @@ class GaStepComponent {
6560
6598
  /** Whether the step is disabled (cannot be navigated to) */
6561
6599
  disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
6562
6600
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6563
- 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 });
6601
+ 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 });
6564
6602
  }
6565
6603
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaStepComponent, decorators: [{
6566
6604
  type: Component,
6567
6605
  args: [{
6568
6606
  selector: 'ga-step',
6607
+ changeDetection: ChangeDetectionStrategy.OnPush,
6569
6608
  template: '',
6570
6609
  }]
6571
6610
  }], 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 }] }] } });