@corto-ai/gds-angular 2.1.2 → 2.1.3-dev.2

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 (5) hide show
  1. package/README.md +5 -15
  2. package/fesm2022/corto-ai-gds-angular.mjs +471 -229
  3. package/fesm2022/corto-ai-gds-angular.mjs.map +1 -1
  4. package/package.json +13 -3
  5. package/types/corto-ai-gds-angular.d.ts +81 -40
package/fesm2022/corto-ai-gds-angular.mjs CHANGED
@@ -1,25 +1,23 @@
1
1
  import * as i0 from '@angular/core';
2
- import { Injectable, inject, signal, Injector, input, viewChild, effect, afterNextRender, ChangeDetectionStrategy, Component, model, booleanAttribute, computed, ElementRef, output, Directive, contentChild, DestroyRef, Renderer2, Input, ChangeDetectorRef, EventEmitter, NgZone, Output, DOCUMENT, HostBinding, InjectionToken, EnvironmentInjector, ApplicationRef, createComponent, Pipe, contentChildren, ViewEncapsulation, untracked, ViewContainerRef, runInInjectionContext, TemplateRef, numberAttribute, HostListener, provideAppInitializer, NgModule } from '@angular/core';
2
+ import { Injectable, inject, signal, Injector, input, viewChild, effect, afterNextRender, ChangeDetectionStrategy, Component, model, booleanAttribute, computed, ElementRef, output, Directive, contentChild, DestroyRef, Renderer2, InjectionToken, Input, ChangeDetectorRef, EventEmitter, NgZone, Output, DOCUMENT, HostBinding, EnvironmentInjector, ApplicationRef, createComponent, Pipe, contentChildren, ViewEncapsulation, untracked, ViewContainerRef, runInInjectionContext, TemplateRef, numberAttribute, HostListener, provideAppInitializer, NgModule } from '@angular/core';
3
3
  import { injectRegisterIcons, SvgIconRegistry, SvgIconComponent, provideSvgIconsConfig } from '@ngneat/svg-icon';
4
4
  import { DomSanitizer } from '@angular/platform-browser';
5
5
  import * as i1 from '@ngneat/helipopper';
6
6
  import { TippyDirective } from '@ngneat/helipopper';
7
7
  import { NgClass, NgTemplateOutlet, TitleCasePipe, DOCUMENT as DOCUMENT$1, CommonModule } from '@angular/common';
8
8
  import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
9
- import { Subject, tap, debounceTime, fromEvent, take } from 'rxjs';
10
- import { DEBOUNCE_DURATION, CDK_MENU_CONNECTED_POSITIONS } from '@corto/utils/constants';
11
- import { BrandEnum, GdsContextMenuItemVariantEnum } from '@corto/utils/types';
9
+ import { Subject, tap, debounceTime, fromEvent, take, map } from 'rxjs';
10
+ import { format, intervalToDuration } from 'date-fns';
12
11
  import * as i1$2 from '@angular/cdk/a11y';
13
12
  import { FocusKeyManager, CdkTrapFocus, A11yModule } from '@angular/cdk/a11y';
14
13
  import * as i1$1 from '@angular/cdk/menu';
15
14
  import { CdkMenuItem, CdkMenuTrigger, CdkMenuItemCheckbox, MENU_TRIGGER, CdkMenu, CdkTargetMenuAim } from '@angular/cdk/menu';
16
15
  import { FormField } from '@angular/forms/signals';
17
16
  import { v4 } from 'uuid';
18
- import { format, intervalToDuration } from 'date-fns';
19
17
  import { OverlayModule } from '@angular/cdk/overlay';
20
18
  import * as i1$3 from '@ngx-translate/core';
21
19
  import { TranslatePipe, TranslateModule } from '@ngx-translate/core';
22
- import { DeviceDetectorSignalService } from '@corto/utils/services';
20
+ import { DeviceDetectorService } from 'ngx-device-detector';
23
21
  import { MAT_DATE_LOCALE, provideNativeDateAdapter } from '@angular/material/core';
24
22
  import * as i1$4 from '@angular/material/datepicker';
25
23
  import { MatDatepickerModule } from '@angular/material/datepicker';
@@ -27,8 +25,7 @@ import * as i1$5 from '@angular/forms';
27
25
  import { FormsModule } from '@angular/forms';
28
26
  import * as i2 from '@ng-select/ng-select';
29
27
  import { NgSelectComponent, NgLabelTemplateDirective, NgMultiLabelTemplateDirective, NgFooterTemplateDirective, NgClearButtonTemplateDirective, NgOptionTemplateDirective, NgPlaceholderTemplateDirective, NgSelectModule } from '@ng-select/ng-select';
30
- import { getScreenSizeSignal, getOperatingSystem, getBrowser } from '@corto/utils/functions';
31
- import { computedPrevious } from '@corto/utils/signals';
28
+ import { BreakpointObserver } from '@angular/cdk/layout';
32
29
  import * as i1$6 from 'ngx-toastr';
33
30
  import { ToastNoAnimation, provideToastr } from 'ngx-toastr';
34
31
  import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
@@ -3679,11 +3676,11 @@ class GdsIconComponent {
3679
3676
  }, { injector: this.#injector });
3680
3677
  }, ...(ngDevMode ? [{ debugName: "#removeInlineStylesEffect" }] : /* istanbul ignore next */ []));
3681
3678
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3682
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsIconComponent, isStandalone: true, selector: "gds-icon", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "svgIcon", first: true, predicate: SvgIconComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<svg-icon\n [key]=\"key()\"\n [noShrink]=\"true\"\n [width]=\"width()\"\n [height]=\"height()\"\n [color]=\"color()\"\n/>\n", styles: [":host{display:inline-block;line-height:0}:host svg-icon{display:inherit;font-size:var(--gds-iconSize-sm);min-width:var(--gds-iconSize-sm)}\n"], dependencies: [{ kind: "component", type: SvgIconComponent, selector: "svg-icon", inputs: ["key", "fallback", "size", "width", "height", "fontSize", "color", "noShrink", "preserveAspectRatio"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3679
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsIconComponent, isStandalone: true, selector: "gds-icon", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "svgIcon", first: true, predicate: SvgIconComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<svg-icon\n [key]=\"key()\"\n [noShrink]=\"true\"\n [width]=\"width()\"\n [height]=\"height()\"\n [color]=\"color()\"\n/>\n", styles: ["@layer design-system{:host{display:inline-block;line-height:0}:host svg-icon{display:inherit;font-size:var(--gds-iconSize-sm);min-width:var(--gds-iconSize-sm)}}\n"], dependencies: [{ kind: "component", type: SvgIconComponent, selector: "svg-icon", inputs: ["key", "fallback", "size", "width", "height", "fontSize", "color", "noShrink", "preserveAspectRatio"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3683
3680
  }
3684
3681
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsIconComponent, decorators: [{
3685
3682
  type: Component,
3686
- args: [{ selector: 'gds-icon', imports: [SvgIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg-icon\n [key]=\"key()\"\n [noShrink]=\"true\"\n [width]=\"width()\"\n [height]=\"height()\"\n [color]=\"color()\"\n/>\n", styles: [":host{display:inline-block;line-height:0}:host svg-icon{display:inherit;font-size:var(--gds-iconSize-sm);min-width:var(--gds-iconSize-sm)}\n"] }]
3683
+ args: [{ selector: 'gds-icon', imports: [SvgIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg-icon\n [key]=\"key()\"\n [noShrink]=\"true\"\n [width]=\"width()\"\n [height]=\"height()\"\n [color]=\"color()\"\n/>\n", styles: ["@layer design-system{:host{display:inline-block;line-height:0}:host svg-icon{display:inherit;font-size:var(--gds-iconSize-sm);min-width:var(--gds-iconSize-sm)}}\n"] }]
3687
3684
  }], propDecorators: { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], svgIcon: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SvgIconComponent), { isSignal: true }] }] } });
3688
3685
 
3689
3686
  class GdsAvatarComponent {
@@ -3764,7 +3761,7 @@ class GdsAvatarComponent {
3764
3761
  this.data.set(this.fallbackData());
3765
3762
  }
3766
3763
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3767
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsAvatarComponent, isStandalone: true, selector: "gds-avatar, button[gds-avatar]", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fallbackVariant: { classPropertyName: "fallbackVariant", publicName: "fallbackVariant", isSignal: true, isRequired: false, transformFunction: null }, fallbackData: { classPropertyName: "fallbackData", publicName: "fallbackData", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { data: "dataChange", variant: "variantChange" }, host: { properties: { "attr.isActive": "isActive()", "attr.disabled": "disabled() ? \"\" : undefined", "attr.size": "size()", "attr.variant": "variant()", "style.--color": "textColor()", "style.--background-color": "backgroundColor()" } }, ngImport: i0, template: "@switch (variant()) {\n @case ('text') {\n {{ initials() }}\n }\n @case ('count') {\n +{{ count() }}\n }\n @case ('icon') {\n <gds-icon\n [key]=\"iconKey()\"\n [width]=\"'0.8em'\"\n [height]=\"'0.8em'\"\n />\n }\n @case ('organization') {\n <gds-icon\n [key]=\"organizationIconKey()\"\n [class]=\"organizationIconSizeClass()\"\n />\n }\n @case ('image') {\n <img\n class=\"\n gds-height-100-parent\n gds-width-100-parent\n img\n \"\n [src]=\"data()\"\n (error)=\"handleImageError()\"\n alt=\"\"\n />\n }\n}\n", styles: [":host{--color: var(--gds-palette-text-default-primary);--background-color: var(--gds-palette-badge-default);--font-weight: var(--gds-fontWeight-captionStrong)}:host[size=xs]{--size: var(--gds-primitive-size-500-rem);--font-size: var(--gds-primitive-size-200-rem);--line-height: var(--gds-lineHeight-caption)}:host[size=sm]{--size: var(--gds-primitive-size-600-rem);--font-size: .625rem;--line-height: var(--gds-lineHeight-caption)}:host[size=md]{--size: var(--gds-primitive-size-700-rem);--font-size: var(--gds-fontSize-body);--line-height: var(--gds-lineHeight-body)}:host[size=lg]{--size: var(--gds-primitive-size-900-rem);--font-size: var(--gds-fontSize-subtitle);--line-height: var(--gds-lineHeight-subtitle)}:host[size=xl]{--size: var(--gds-primitive-size-1200-rem);--font-size: var(--gds-fontSize-titleLarge);--line-height: var(--gds-lineHeight-titleLarge)}:host{all:unset;width:var(--size);height:var(--size);aspect-ratio:1;overflow:visible;transition:none;border:none;color:var(--color);background-color:var(--background-color);font-family:var(--gds-fontFamily-body);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);display:inline-flex;align-items:center;justify-content:center;letter-spacing:normal;background-size:contain;background-position:center center;border-radius:50%}:host .img{object-fit:cover;border-radius:inherit}:host[disabled]{color:var(--gds-palette-text-default-disabled);background-color:var(--gds-neutral-50)}:host[isActive=true]{outline:2px solid}button:host{cursor:pointer}button:host:focus,button:host:focus-visible,button:host:hover{outline:2px solid}button:host:disabled{cursor:not-allowed;outline:none}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3764
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsAvatarComponent, isStandalone: true, selector: "gds-avatar, button[gds-avatar]", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fallbackVariant: { classPropertyName: "fallbackVariant", publicName: "fallbackVariant", isSignal: true, isRequired: false, transformFunction: null }, fallbackData: { classPropertyName: "fallbackData", publicName: "fallbackData", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { data: "dataChange", variant: "variantChange" }, host: { properties: { "attr.isActive": "isActive()", "attr.disabled": "disabled() ? \"\" : undefined", "attr.size": "size()", "attr.variant": "variant()", "style.--color": "textColor()", "style.--background-color": "backgroundColor()" } }, ngImport: i0, template: "@switch (variant()) {\n @case ('text') {\n {{ initials() }}\n }\n @case ('count') {\n +{{ count() }}\n }\n @case ('icon') {\n <gds-icon\n [key]=\"iconKey()\"\n [width]=\"'0.8em'\"\n [height]=\"'0.8em'\"\n />\n }\n @case ('organization') {\n <gds-icon\n [key]=\"organizationIconKey()\"\n [class]=\"organizationIconSizeClass()\"\n />\n }\n @case ('image') {\n <img\n class=\"\n gds-height-100-parent\n gds-width-100-parent\n img\n \"\n [src]=\"data()\"\n (error)=\"handleImageError()\"\n alt=\"\"\n />\n }\n}\n", styles: ["@layer design-system{:host{--color: var(--gds-palette-text-default-primary);--background-color: var(--gds-palette-badge-default);--font-weight: var(--gds-fontWeight-captionStrong)}:host[size=xs]{--size: var(--gds-primitive-size-500-rem);--font-size: var(--gds-primitive-size-200-rem);--line-height: var(--gds-lineHeight-caption)}:host[size=sm]{--size: var(--gds-primitive-size-600-rem);--font-size: .625rem;--line-height: var(--gds-lineHeight-caption)}:host[size=md]{--size: var(--gds-primitive-size-700-rem);--font-size: var(--gds-fontSize-body);--line-height: var(--gds-lineHeight-body)}:host[size=lg]{--size: var(--gds-primitive-size-900-rem);--font-size: var(--gds-fontSize-subtitle);--line-height: var(--gds-lineHeight-subtitle)}:host[size=xl]{--size: var(--gds-primitive-size-1200-rem);--font-size: var(--gds-fontSize-titleLarge);--line-height: var(--gds-lineHeight-titleLarge)}:host{all:unset;width:var(--size);height:var(--size);aspect-ratio:1;overflow:visible;transition:none;border:none;color:var(--color);background-color:var(--background-color);font-family:var(--gds-fontFamily-body);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);display:inline-flex;align-items:center;justify-content:center;letter-spacing:normal;background-size:contain;background-position:center center;border-radius:50%}:host .img{object-fit:cover;border-radius:inherit}:host[disabled]{color:var(--gds-palette-text-default-disabled);background-color:var(--gds-neutral-50)}:host[isActive=true]{outline:2px solid}button:host{cursor:pointer}button:host:focus,button:host:focus-visible,button:host:hover{outline:2px solid}button:host:disabled{cursor:not-allowed;outline:none}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3768
3765
  }
3769
3766
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsAvatarComponent, decorators: [{
3770
3767
  type: Component,
@@ -3775,7 +3772,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
3775
3772
  '[attr.variant]': 'variant()',
3776
3773
  '[style.--color]': 'textColor()',
3777
3774
  '[style.--background-color]': 'backgroundColor()'
3778
- }, template: "@switch (variant()) {\n @case ('text') {\n {{ initials() }}\n }\n @case ('count') {\n +{{ count() }}\n }\n @case ('icon') {\n <gds-icon\n [key]=\"iconKey()\"\n [width]=\"'0.8em'\"\n [height]=\"'0.8em'\"\n />\n }\n @case ('organization') {\n <gds-icon\n [key]=\"organizationIconKey()\"\n [class]=\"organizationIconSizeClass()\"\n />\n }\n @case ('image') {\n <img\n class=\"\n gds-height-100-parent\n gds-width-100-parent\n img\n \"\n [src]=\"data()\"\n (error)=\"handleImageError()\"\n alt=\"\"\n />\n }\n}\n", styles: [":host{--color: var(--gds-palette-text-default-primary);--background-color: var(--gds-palette-badge-default);--font-weight: var(--gds-fontWeight-captionStrong)}:host[size=xs]{--size: var(--gds-primitive-size-500-rem);--font-size: var(--gds-primitive-size-200-rem);--line-height: var(--gds-lineHeight-caption)}:host[size=sm]{--size: var(--gds-primitive-size-600-rem);--font-size: .625rem;--line-height: var(--gds-lineHeight-caption)}:host[size=md]{--size: var(--gds-primitive-size-700-rem);--font-size: var(--gds-fontSize-body);--line-height: var(--gds-lineHeight-body)}:host[size=lg]{--size: var(--gds-primitive-size-900-rem);--font-size: var(--gds-fontSize-subtitle);--line-height: var(--gds-lineHeight-subtitle)}:host[size=xl]{--size: var(--gds-primitive-size-1200-rem);--font-size: var(--gds-fontSize-titleLarge);--line-height: var(--gds-lineHeight-titleLarge)}:host{all:unset;width:var(--size);height:var(--size);aspect-ratio:1;overflow:visible;transition:none;border:none;color:var(--color);background-color:var(--background-color);font-family:var(--gds-fontFamily-body);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);display:inline-flex;align-items:center;justify-content:center;letter-spacing:normal;background-size:contain;background-position:center center;border-radius:50%}:host .img{object-fit:cover;border-radius:inherit}:host[disabled]{color:var(--gds-palette-text-default-disabled);background-color:var(--gds-neutral-50)}:host[isActive=true]{outline:2px solid}button:host{cursor:pointer}button:host:focus,button:host:focus-visible,button:host:hover{outline:2px solid}button:host:disabled{cursor:not-allowed;outline:none}\n"] }]
3775
+ }, template: "@switch (variant()) {\n @case ('text') {\n {{ initials() }}\n }\n @case ('count') {\n +{{ count() }}\n }\n @case ('icon') {\n <gds-icon\n [key]=\"iconKey()\"\n [width]=\"'0.8em'\"\n [height]=\"'0.8em'\"\n />\n }\n @case ('organization') {\n <gds-icon\n [key]=\"organizationIconKey()\"\n [class]=\"organizationIconSizeClass()\"\n />\n }\n @case ('image') {\n <img\n class=\"\n gds-height-100-parent\n gds-width-100-parent\n img\n \"\n [src]=\"data()\"\n (error)=\"handleImageError()\"\n alt=\"\"\n />\n }\n}\n", styles: ["@layer design-system{:host{--color: var(--gds-palette-text-default-primary);--background-color: var(--gds-palette-badge-default);--font-weight: var(--gds-fontWeight-captionStrong)}:host[size=xs]{--size: var(--gds-primitive-size-500-rem);--font-size: var(--gds-primitive-size-200-rem);--line-height: var(--gds-lineHeight-caption)}:host[size=sm]{--size: var(--gds-primitive-size-600-rem);--font-size: .625rem;--line-height: var(--gds-lineHeight-caption)}:host[size=md]{--size: var(--gds-primitive-size-700-rem);--font-size: var(--gds-fontSize-body);--line-height: var(--gds-lineHeight-body)}:host[size=lg]{--size: var(--gds-primitive-size-900-rem);--font-size: var(--gds-fontSize-subtitle);--line-height: var(--gds-lineHeight-subtitle)}:host[size=xl]{--size: var(--gds-primitive-size-1200-rem);--font-size: var(--gds-fontSize-titleLarge);--line-height: var(--gds-lineHeight-titleLarge)}:host{all:unset;width:var(--size);height:var(--size);aspect-ratio:1;overflow:visible;transition:none;border:none;color:var(--color);background-color:var(--background-color);font-family:var(--gds-fontFamily-body);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);display:inline-flex;align-items:center;justify-content:center;letter-spacing:normal;background-size:contain;background-position:center center;border-radius:50%}:host .img{object-fit:cover;border-radius:inherit}:host[disabled]{color:var(--gds-palette-text-default-disabled);background-color:var(--gds-neutral-50)}:host[isActive=true]{outline:2px solid}button:host{cursor:pointer}button:host:focus,button:host:focus-visible,button:host:hover{outline:2px solid}button:host:disabled{cursor:not-allowed;outline:none}}\n"] }]
3779
3776
  }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }, { type: i0.Output, args: ["dataChange"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }, { type: i0.Output, args: ["variantChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fallbackVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallbackVariant", required: false }] }], fallbackData: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallbackData", required: false }] }], isActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isActive", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
3780
3777
 
3781
3778
  class GdsBadgeComponent {
@@ -3783,11 +3780,11 @@ class GdsBadgeComponent {
3783
3780
  tooltip = input(...(ngDevMode ? [undefined, { debugName: "tooltip" }] : /* istanbul ignore next */ []));
3784
3781
  tooltipInteractive = input(false, { ...(ngDevMode ? { debugName: "tooltipInteractive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
3785
3782
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3786
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsBadgeComponent, isStandalone: true, selector: "span[gds-badge]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipInteractive: { classPropertyName: "tooltipInteractive", publicName: "tooltipInteractive", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (icon(); as icon) {\n <gds-icon\n [key]=\"icon\"\n class=\"\n gds-badge_icon\n gds-icon-size-3xs\n \"\n />\n}\n<span\n class=\"\n gds-display-none-empty\n gds-padding-inline-3xs\n \"\n [tp]=\"tooltip()\"\n [tpInteractive]=\"tooltipInteractive()\"\n tpPlacement=\"top\"\n tpVariation=\"light\"\n>\n <ng-content />\n</span>\n", styles: [":host{display:inline-flex;justify-content:center;align-items:center;min-width:var(--gds-primitive-size-500-rem);width:fit-content;height:var(--gds-primitive-size-500-rem);padding-inline:var(--gds-spacing-3xs);border-radius:var(--gds-primitive-size-400-rem);background-color:var(--gds-palette-badge-default);white-space:nowrap;font:var(--gds-font-caption);color:var(--gds-palette-text-default-primary)}:host .gds-badge_icon{color:var(--gds-palette-icon-primary)}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3783
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsBadgeComponent, isStandalone: true, selector: "span[gds-badge]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipInteractive: { classPropertyName: "tooltipInteractive", publicName: "tooltipInteractive", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (icon(); as icon) {\n <gds-icon\n [key]=\"icon\"\n class=\"\n gds-badge_icon\n gds-icon-size-3xs\n \"\n />\n}\n<span\n class=\"\n gds-display-none-empty\n gds-padding-inline-3xs\n \"\n [tp]=\"tooltip()\"\n [tpInteractive]=\"tooltipInteractive()\"\n tpPlacement=\"top\"\n tpVariation=\"light\"\n>\n <ng-content />\n</span>\n", styles: ["@layer design-system{:host{display:inline-flex;justify-content:center;align-items:center;min-width:var(--gds-primitive-size-500-rem);width:fit-content;height:var(--gds-primitive-size-500-rem);padding-inline:var(--gds-spacing-3xs);border-radius:var(--gds-primitive-size-400-rem);background-color:var(--gds-palette-badge-default);white-space:nowrap;font:var(--gds-font-caption);color:var(--gds-palette-text-default-primary)}:host .gds-badge_icon{color:var(--gds-palette-icon-primary)}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3787
3784
  }
3788
3785
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsBadgeComponent, decorators: [{
3789
3786
  type: Component,
3790
- args: [{ selector: 'span[gds-badge]', imports: [GdsIconComponent, TippyDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (icon(); as icon) {\n <gds-icon\n [key]=\"icon\"\n class=\"\n gds-badge_icon\n gds-icon-size-3xs\n \"\n />\n}\n<span\n class=\"\n gds-display-none-empty\n gds-padding-inline-3xs\n \"\n [tp]=\"tooltip()\"\n [tpInteractive]=\"tooltipInteractive()\"\n tpPlacement=\"top\"\n tpVariation=\"light\"\n>\n <ng-content />\n</span>\n", styles: [":host{display:inline-flex;justify-content:center;align-items:center;min-width:var(--gds-primitive-size-500-rem);width:fit-content;height:var(--gds-primitive-size-500-rem);padding-inline:var(--gds-spacing-3xs);border-radius:var(--gds-primitive-size-400-rem);background-color:var(--gds-palette-badge-default);white-space:nowrap;font:var(--gds-font-caption);color:var(--gds-palette-text-default-primary)}:host .gds-badge_icon{color:var(--gds-palette-icon-primary)}\n"] }]
3787
+ args: [{ selector: 'span[gds-badge]', imports: [GdsIconComponent, TippyDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (icon(); as icon) {\n <gds-icon\n [key]=\"icon\"\n class=\"\n gds-badge_icon\n gds-icon-size-3xs\n \"\n />\n}\n<span\n class=\"\n gds-display-none-empty\n gds-padding-inline-3xs\n \"\n [tp]=\"tooltip()\"\n [tpInteractive]=\"tooltipInteractive()\"\n tpPlacement=\"top\"\n tpVariation=\"light\"\n>\n <ng-content />\n</span>\n", styles: ["@layer design-system{:host{display:inline-flex;justify-content:center;align-items:center;min-width:var(--gds-primitive-size-500-rem);width:fit-content;height:var(--gds-primitive-size-500-rem);padding-inline:var(--gds-spacing-3xs);border-radius:var(--gds-primitive-size-400-rem);background-color:var(--gds-palette-badge-default);white-space:nowrap;font:var(--gds-font-caption);color:var(--gds-palette-text-default-primary)}:host .gds-badge_icon{color:var(--gds-palette-icon-primary)}}\n"] }]
3791
3788
  }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], tooltipInteractive: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipInteractive", required: false }] }] } });
3792
3789
 
3793
3790
  var GdsBadgeColorType;
@@ -3841,22 +3838,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
3841
3838
 
3842
3839
  class GdsButtonComponent extends ButtonBaseDirective {
3843
3840
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
3844
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsButtonComponent, isStandalone: true, selector: "button[gds-button]", usesInheritance: true, ngImport: i0, template: "<div class=\"body\">\n @if (busy()) {\n <gds-icon\n role=\"progressbar\"\n class=\"busy-icon\"\n key=\"loading-kebab\"\n />\n }\n <div class=\"label\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3841
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsButtonComponent, isStandalone: true, selector: "button[gds-button]", usesInheritance: true, ngImport: i0, template: "<div class=\"body\">\n @if (busy()) {\n <gds-icon\n role=\"progressbar\"\n class=\"busy-icon\"\n key=\"loading-kebab\"\n />\n }\n <div class=\"label\">\n <ng-content />\n </div>\n</div>\n", styles: ["@layer design-system{:host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3845
3842
  }
3846
3843
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsButtonComponent, decorators: [{
3847
3844
  type: Component,
3848
- args: [{ selector: 'button[gds-button]', imports: [GdsIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"body\">\n @if (busy()) {\n <gds-icon\n role=\"progressbar\"\n class=\"busy-icon\"\n key=\"loading-kebab\"\n />\n }\n <div class=\"label\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}\n"] }]
3845
+ args: [{ selector: 'button[gds-button]', imports: [GdsIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"body\">\n @if (busy()) {\n <gds-icon\n role=\"progressbar\"\n class=\"busy-icon\"\n key=\"loading-kebab\"\n />\n }\n <div class=\"label\">\n <ng-content />\n </div>\n</div>\n", styles: ["@layer design-system{:host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}}\n"] }]
3849
3846
  }] });
3850
3847
 
3851
3848
  class GdsIconButtonComponent extends ButtonBaseDirective {
3852
3849
  tooltipLabel = input(...(ngDevMode ? [undefined, { debugName: "tooltipLabel" }] : /* istanbul ignore next */ []));
3853
3850
  enableTooltip = computed(() => !this.disabled() && !!this.tooltipLabel()?.trim(), ...(ngDevMode ? [{ debugName: "enableTooltip" }] : /* istanbul ignore next */ []));
3854
3851
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsIconButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
3855
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsIconButtonComponent, isStandalone: true, selector: "button[gds-icon-button]", inputs: { tooltipLabel: { classPropertyName: "tooltipLabel", publicName: "tooltipLabel", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div\n class=\"body\"\n [tp]=\"tooltipLabel()\"\n tpVariation=\"light\"\n tpAppendTo=\"parent\"\n [tpIsEnabled]=\"enableTooltip()\"\n [tpHideOnClick]=\"false\"\n>\n @if (busy()) {\n <gds-icon\n role=\"progressbar\"\n class=\"busy-icon\"\n key=\"loading-kebab\"\n />\n }\n\n <div class=\"\n gds-display-grid\n gds-gap-0\n label\n \">\n <ng-content select=\"gds-icon\" />\n </div>\n</div>\n", styles: [":host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}:host{--gds-button-color: var(--gds-palette-icon-secondary);--gds-button-borderColor: transparent;--gds-button-color-hover: var(--gds-palette-text-default-primary);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-color-disabled: var(--gds-palette-icon-disabled);--gds-button-borderColor-disabled: transparent;--gds-mobile-button-size: var(--gds-size-lg)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-icon-primary);--gds-button-borderColor: transparent;--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-button-primary-hover);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-borderColor-hover: transparent}:is(body[isMobile=true]) :host[data-size=default],:is(body[isMobile=true]) :host[data-size=small],:is(body[isMobile=true]) :host[data-size=medium],:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-mobile-button-size);height:var(--gds-mobile-button-size);padding-inline:0}:host:has(gds-icon:only-child){aspect-ratio:1;padding:unset}\n"], dependencies: [{ kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3852
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsIconButtonComponent, isStandalone: true, selector: "button[gds-icon-button]", inputs: { tooltipLabel: { classPropertyName: "tooltipLabel", publicName: "tooltipLabel", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div\n class=\"body\"\n [tp]=\"tooltipLabel()\"\n tpVariation=\"light\"\n tpAppendTo=\"parent\"\n [tpIsEnabled]=\"enableTooltip()\"\n [tpHideOnClick]=\"false\"\n>\n @if (busy()) {\n <gds-icon\n role=\"progressbar\"\n class=\"busy-icon\"\n key=\"loading-kebab\"\n />\n }\n\n <div class=\"\n gds-display-grid\n gds-gap-0\n label\n \">\n <ng-content select=\"gds-icon\" />\n </div>\n</div>\n", styles: ["@layer design-system{:host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}:host{--gds-button-color: var(--gds-palette-icon-secondary);--gds-button-borderColor: transparent;--gds-button-color-hover: var(--gds-palette-text-default-primary);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-color-disabled: var(--gds-palette-icon-disabled);--gds-button-borderColor-disabled: transparent;--gds-mobile-button-size: var(--gds-size-lg)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-icon-primary);--gds-button-borderColor: transparent;--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-button-primary-hover);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-borderColor-hover: transparent}:is(body[isMobile=true]) :host[data-size=default],:is(body[isMobile=true]) :host[data-size=small],:is(body[isMobile=true]) :host[data-size=medium],:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-mobile-button-size);height:var(--gds-mobile-button-size);padding-inline:0}:host:has(gds-icon:only-child){aspect-ratio:1;padding:unset}}\n"], dependencies: [{ kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3856
3853
  }
3857
3854
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsIconButtonComponent, decorators: [{
3858
3855
  type: Component,
3859
- args: [{ selector: 'button[gds-icon-button]', imports: [TippyDirective, GdsIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"body\"\n [tp]=\"tooltipLabel()\"\n tpVariation=\"light\"\n tpAppendTo=\"parent\"\n [tpIsEnabled]=\"enableTooltip()\"\n [tpHideOnClick]=\"false\"\n>\n @if (busy()) {\n <gds-icon\n role=\"progressbar\"\n class=\"busy-icon\"\n key=\"loading-kebab\"\n />\n }\n\n <div class=\"\n gds-display-grid\n gds-gap-0\n label\n \">\n <ng-content select=\"gds-icon\" />\n </div>\n</div>\n", styles: [":host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}:host{--gds-button-color: var(--gds-palette-icon-secondary);--gds-button-borderColor: transparent;--gds-button-color-hover: var(--gds-palette-text-default-primary);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-color-disabled: var(--gds-palette-icon-disabled);--gds-button-borderColor-disabled: transparent;--gds-mobile-button-size: var(--gds-size-lg)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-icon-primary);--gds-button-borderColor: transparent;--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-button-primary-hover);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-borderColor-hover: transparent}:is(body[isMobile=true]) :host[data-size=default],:is(body[isMobile=true]) :host[data-size=small],:is(body[isMobile=true]) :host[data-size=medium],:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-mobile-button-size);height:var(--gds-mobile-button-size);padding-inline:0}:host:has(gds-icon:only-child){aspect-ratio:1;padding:unset}\n"] }]
3856
+ args: [{ selector: 'button[gds-icon-button]', imports: [TippyDirective, GdsIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"body\"\n [tp]=\"tooltipLabel()\"\n tpVariation=\"light\"\n tpAppendTo=\"parent\"\n [tpIsEnabled]=\"enableTooltip()\"\n [tpHideOnClick]=\"false\"\n>\n @if (busy()) {\n <gds-icon\n role=\"progressbar\"\n class=\"busy-icon\"\n key=\"loading-kebab\"\n />\n }\n\n <div class=\"\n gds-display-grid\n gds-gap-0\n label\n \">\n <ng-content select=\"gds-icon\" />\n </div>\n</div>\n", styles: ["@layer design-system{:host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}:host{--gds-button-color: var(--gds-palette-icon-secondary);--gds-button-borderColor: transparent;--gds-button-color-hover: var(--gds-palette-text-default-primary);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-color-disabled: var(--gds-palette-icon-disabled);--gds-button-borderColor-disabled: transparent;--gds-mobile-button-size: var(--gds-size-lg)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-icon-primary);--gds-button-borderColor: transparent;--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-button-primary-hover);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-borderColor-hover: transparent}:is(body[isMobile=true]) :host[data-size=default],:is(body[isMobile=true]) :host[data-size=small],:is(body[isMobile=true]) :host[data-size=medium],:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-mobile-button-size);height:var(--gds-mobile-button-size);padding-inline:0}:host:has(gds-icon:only-child){aspect-ratio:1;padding:unset}}\n"] }]
3860
3857
  }], propDecorators: { tooltipLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipLabel", required: false }] }] } });
3861
3858
 
3862
3859
  class GdsBannerComponent {
@@ -3867,16 +3864,26 @@ class GdsBannerComponent {
3867
3864
  actionBtnClick = output();
3868
3865
  contentExpanded = computed(() => this.state() === 'expanded', ...(ngDevMode ? [{ debugName: "contentExpanded" }] : /* istanbul ignore next */ []));
3869
3866
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3870
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsBannerComponent, isStandalone: true, selector: "gds-banner", inputs: { iconKey: { classPropertyName: "iconKey", publicName: "iconKey", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, btnLabel: { classPropertyName: "btnLabel", publicName: "btnLabel", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { state: "stateChange", actionBtnClick: "actionBtnClick" }, host: { properties: { "attr.hidden": "state() === \"hidden\" ? \"\" : undefined", "attr.expanded": "state() === \"expanded\" ? \"\" : undefined" } }, ngImport: i0, template: "<div\n class=\"\n gds-display-flex\n gds-flex-column\n gds-gap-xs\n \"\n [ngClass]=\"{ 'gds-gap-xs': state() === 'expanded' }\"\n>\n <div class=\"\n gds-align-items-center\n gds-display-flex\n gds-gap-2xs\n \">\n <gds-icon\n [key]=\"iconKey()\"\n class=\"\n gds-icon-size-xs\n gds-text-primary-primary\n \"\n />\n <span class=\"\n gds-text-body-strong\n gds-text-primary-primary\n label\n \"> {{ label() }} </span>\n @if (btnLabel()) {\n <button\n gds-button\n variant=\"primary\"\n (clicked)=\"actionBtnClick.emit()\"\n >\n {{ btnLabel() }}\n </button>\n }\n <button\n gds-icon-button\n size=\"small\"\n class=\"gds-background-none\"\n aria-label=\"Close\"\n (clicked)=\"state.set('hidden')\"\n >\n <gds-icon\n class=\"\n gds-icon-size-3xs\n icon\n \"\n key=\"line-dismiss\"\n />\n </button>\n </div>\n @if (contentExpanded()) {\n <div\n class=\"content\"\n animate.enter=\"gds-expand-vertical\"\n >\n <ng-content />\n </div>\n }\n</div>\n", styles: [":host{--banner-radius: var(--gds-borderRadius-sm)}:host[expanded]{--banner-radius: var(--gds-borderRadius-md)}:host{padding:var(--gds-spacing-2xs);width:100%;background:var(--gds-palette-background-chat);border-radius:var(--banner-radius);display:block}:host[hidden]{display:none}:host .label{margin-right:auto}:host .content{overflow:hidden}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: GdsButtonComponent, selector: "button[gds-button]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3867
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsBannerComponent, isStandalone: true, selector: "gds-banner", inputs: { iconKey: { classPropertyName: "iconKey", publicName: "iconKey", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, btnLabel: { classPropertyName: "btnLabel", publicName: "btnLabel", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { state: "stateChange", actionBtnClick: "actionBtnClick" }, host: { properties: { "attr.hidden": "state() === \"hidden\" ? \"\" : undefined", "attr.expanded": "state() === \"expanded\" ? \"\" : undefined" } }, ngImport: i0, template: "<div\n class=\"\n gds-display-flex\n gds-flex-column\n gds-gap-xs\n \"\n [ngClass]=\"{ 'gds-gap-xs': state() === 'expanded' }\"\n>\n <div class=\"\n gds-align-items-center\n gds-display-flex\n gds-gap-2xs\n \">\n <gds-icon\n [key]=\"iconKey()\"\n class=\"\n gds-icon-size-xs\n gds-text-primary-primary\n \"\n />\n <span class=\"\n gds-text-body-strong\n gds-text-primary-primary\n label\n \"> {{ label() }} </span>\n @if (btnLabel()) {\n <button\n gds-button\n variant=\"primary\"\n (clicked)=\"actionBtnClick.emit()\"\n >\n {{ btnLabel() }}\n </button>\n }\n <button\n gds-icon-button\n size=\"small\"\n class=\"gds-background-none\"\n aria-label=\"Close\"\n (clicked)=\"state.set('hidden')\"\n >\n <gds-icon\n class=\"\n gds-icon-size-3xs\n icon\n \"\n key=\"line-dismiss\"\n />\n </button>\n </div>\n @if (contentExpanded()) {\n <div\n class=\"content\"\n animate.enter=\"gds-expand-vertical\"\n >\n <ng-content />\n </div>\n }\n</div>\n", styles: ["@layer design-system{:host{--banner-radius: var(--gds-borderRadius-sm)}:host[expanded]{--banner-radius: var(--gds-borderRadius-md)}:host{padding:var(--gds-spacing-2xs);width:100%;background:var(--gds-palette-background-chat);border-radius:var(--banner-radius);display:block}:host[hidden]{display:none}:host .label{margin-right:auto}:host .content{overflow:hidden}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: GdsButtonComponent, selector: "button[gds-button]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3871
3868
  }
3872
3869
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsBannerComponent, decorators: [{
3873
3870
  type: Component,
3874
3871
  args: [{ selector: 'gds-banner', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [GdsIconComponent, GdsIconButtonComponent, NgClass, GdsButtonComponent], host: {
3875
3872
  '[attr.hidden]': 'state() === "hidden" ? "" : undefined',
3876
3873
  '[attr.expanded]': 'state() === "expanded" ? "" : undefined'
3877
- }, template: "<div\n class=\"\n gds-display-flex\n gds-flex-column\n gds-gap-xs\n \"\n [ngClass]=\"{ 'gds-gap-xs': state() === 'expanded' }\"\n>\n <div class=\"\n gds-align-items-center\n gds-display-flex\n gds-gap-2xs\n \">\n <gds-icon\n [key]=\"iconKey()\"\n class=\"\n gds-icon-size-xs\n gds-text-primary-primary\n \"\n />\n <span class=\"\n gds-text-body-strong\n gds-text-primary-primary\n label\n \"> {{ label() }} </span>\n @if (btnLabel()) {\n <button\n gds-button\n variant=\"primary\"\n (clicked)=\"actionBtnClick.emit()\"\n >\n {{ btnLabel() }}\n </button>\n }\n <button\n gds-icon-button\n size=\"small\"\n class=\"gds-background-none\"\n aria-label=\"Close\"\n (clicked)=\"state.set('hidden')\"\n >\n <gds-icon\n class=\"\n gds-icon-size-3xs\n icon\n \"\n key=\"line-dismiss\"\n />\n </button>\n </div>\n @if (contentExpanded()) {\n <div\n class=\"content\"\n animate.enter=\"gds-expand-vertical\"\n >\n <ng-content />\n </div>\n }\n</div>\n", styles: [":host{--banner-radius: var(--gds-borderRadius-sm)}:host[expanded]{--banner-radius: var(--gds-borderRadius-md)}:host{padding:var(--gds-spacing-2xs);width:100%;background:var(--gds-palette-background-chat);border-radius:var(--banner-radius);display:block}:host[hidden]{display:none}:host .label{margin-right:auto}:host .content{overflow:hidden}\n"] }]
3874
+ }, template: "<div\n class=\"\n gds-display-flex\n gds-flex-column\n gds-gap-xs\n \"\n [ngClass]=\"{ 'gds-gap-xs': state() === 'expanded' }\"\n>\n <div class=\"\n gds-align-items-center\n gds-display-flex\n gds-gap-2xs\n \">\n <gds-icon\n [key]=\"iconKey()\"\n class=\"\n gds-icon-size-xs\n gds-text-primary-primary\n \"\n />\n <span class=\"\n gds-text-body-strong\n gds-text-primary-primary\n label\n \"> {{ label() }} </span>\n @if (btnLabel()) {\n <button\n gds-button\n variant=\"primary\"\n (clicked)=\"actionBtnClick.emit()\"\n >\n {{ btnLabel() }}\n </button>\n }\n <button\n gds-icon-button\n size=\"small\"\n class=\"gds-background-none\"\n aria-label=\"Close\"\n (clicked)=\"state.set('hidden')\"\n >\n <gds-icon\n class=\"\n gds-icon-size-3xs\n icon\n \"\n key=\"line-dismiss\"\n />\n </button>\n </div>\n @if (contentExpanded()) {\n <div\n class=\"content\"\n animate.enter=\"gds-expand-vertical\"\n >\n <ng-content />\n </div>\n }\n</div>\n", styles: ["@layer design-system{:host{--banner-radius: var(--gds-borderRadius-sm)}:host[expanded]{--banner-radius: var(--gds-borderRadius-md)}:host{padding:var(--gds-spacing-2xs);width:100%;background:var(--gds-palette-background-chat);border-radius:var(--banner-radius);display:block}:host[hidden]{display:none}:host .label{margin-right:auto}:host .content{overflow:hidden}}\n"] }]
3878
3875
  }], propDecorators: { iconKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconKey", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], btnLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "btnLabel", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }, { type: i0.Output, args: ["stateChange"] }], actionBtnClick: [{ type: i0.Output, args: ["actionBtnClick"] }] } });
3879
3876
 
3877
+ const DEBOUNCE_DURATION = {
3878
+ instant: 0, // prevent duplicate events that arrive at the exact same time
3879
+ userInput: 300, // user interactions (keyboard input, clicking, etc.)
3880
+ userInputLong: 1000, // longer duration for user interactions that may take more time
3881
+ browserEvent: 300, // browser dispatched events (ResizeObserver, OnScroll, etc.)
3882
+ loadingTimeout: 1000, // invoke an action if loading takes longer than this duration
3883
+ pubsubEvent: 300,
3884
+ pubsubEventLong: 1000
3885
+ };
3886
+
3880
3887
  class GdsBreadcrumbsComponent {
3881
3888
  ellipsisTmpl = contentChild('ellipsisTmpl', ...(ngDevMode ? [{ debugName: "ellipsisTmpl" }] : /* istanbul ignore next */ []));
3882
3889
  path = viewChild('path', ...(ngDevMode ? [{ debugName: "path" }] : /* istanbul ignore next */ []));
@@ -3950,13 +3957,52 @@ class GdsBreadcrumbsComponent {
3950
3957
  }
3951
3958
  };
3952
3959
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsBreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3953
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsBreadcrumbsComponent, isStandalone: true, selector: "gds-breadcrumbs", queries: [{ propertyName: "ellipsisTmpl", first: true, predicate: ["ellipsisTmpl"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "path", first: true, predicate: ["path"], descendants: true, isSignal: true }, { propertyName: "ellipsis", first: true, predicate: ["ellipsis"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n #ellipsis\n class=\"gds-breadcrumbs_ellipsis-container\"\n>\n <ng-container *ngTemplateOutlet=\"ellipsisTmpl() ?? defaultEllipsisTmpl\" />\n</div>\n<div\n #path\n class=\"gds-breadcrumbs_container\"\n>\n <ng-content />\n</div>\n\n<ng-template #defaultEllipsisTmpl> ... </ng-template>\n", styles: [":host{width:100%;display:flex}:host .gds-breadcrumbs_container{display:flex;align-items:center;flex:1;min-width:0}:host .gds-breadcrumbs_ellipsis-container{display:flex;align-items:center;max-width:fit-content;max-height:fit-content}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3960
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsBreadcrumbsComponent, isStandalone: true, selector: "gds-breadcrumbs", queries: [{ propertyName: "ellipsisTmpl", first: true, predicate: ["ellipsisTmpl"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "path", first: true, predicate: ["path"], descendants: true, isSignal: true }, { propertyName: "ellipsis", first: true, predicate: ["ellipsis"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n #ellipsis\n class=\"gds-breadcrumbs_ellipsis-container\"\n>\n <ng-container *ngTemplateOutlet=\"ellipsisTmpl() ?? defaultEllipsisTmpl\" />\n</div>\n<div\n #path\n class=\"gds-breadcrumbs_container\"\n>\n <ng-content />\n</div>\n\n<ng-template #defaultEllipsisTmpl> ... </ng-template>\n", styles: ["@layer design-system{:host{width:100%;display:flex}:host .gds-breadcrumbs_container{display:flex;align-items:center;flex:1;min-width:0}:host .gds-breadcrumbs_ellipsis-container{display:flex;align-items:center;max-width:fit-content;max-height:fit-content}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3954
3961
  }
3955
3962
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsBreadcrumbsComponent, decorators: [{
3956
3963
  type: Component,
3957
- args: [{ selector: 'gds-breadcrumbs', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n #ellipsis\n class=\"gds-breadcrumbs_ellipsis-container\"\n>\n <ng-container *ngTemplateOutlet=\"ellipsisTmpl() ?? defaultEllipsisTmpl\" />\n</div>\n<div\n #path\n class=\"gds-breadcrumbs_container\"\n>\n <ng-content />\n</div>\n\n<ng-template #defaultEllipsisTmpl> ... </ng-template>\n", styles: [":host{width:100%;display:flex}:host .gds-breadcrumbs_container{display:flex;align-items:center;flex:1;min-width:0}:host .gds-breadcrumbs_ellipsis-container{display:flex;align-items:center;max-width:fit-content;max-height:fit-content}\n"] }]
3964
+ args: [{ selector: 'gds-breadcrumbs', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n #ellipsis\n class=\"gds-breadcrumbs_ellipsis-container\"\n>\n <ng-container *ngTemplateOutlet=\"ellipsisTmpl() ?? defaultEllipsisTmpl\" />\n</div>\n<div\n #path\n class=\"gds-breadcrumbs_container\"\n>\n <ng-content />\n</div>\n\n<ng-template #defaultEllipsisTmpl> ... </ng-template>\n", styles: ["@layer design-system{:host{width:100%;display:flex}:host .gds-breadcrumbs_container{display:flex;align-items:center;flex:1;min-width:0}:host .gds-breadcrumbs_ellipsis-container{display:flex;align-items:center;max-width:fit-content;max-height:fit-content}}\n"] }]
3958
3965
  }], ctorParameters: () => [], propDecorators: { ellipsisTmpl: [{ type: i0.ContentChild, args: ['ellipsisTmpl', { isSignal: true }] }], path: [{ type: i0.ViewChild, args: ['path', { isSignal: true }] }], ellipsis: [{ type: i0.ViewChild, args: ['ellipsis', { isSignal: true }] }] } });
3959
3966
 
3967
+ const gdsButtonVariants = ['default', 'primary', 'invisible'];
3968
+ const gdsButtonSizes = ['small', 'default', 'medium', 'large'];
3969
+
3970
+ const ngSelectDropdownPositions = ['auto', 'bottom', 'top', 'left', 'right'];
3971
+
3972
+ const gdsDropdownPositionsX = ['auto', 'left', 'right'];
3973
+ const gdsDropdownPositionsY = ['auto', 'top', 'bottom'];
3974
+
3975
+ const CDN_URL = new InjectionToken('CDN_URL', {
3976
+ factory: () => 'https://cdn.cortoaws.com'
3977
+ });
3978
+
3979
+ const gdsUserPromptSecondaryTextVariants = ['default', 'error'];
3980
+
3981
+ // NOTE: Duplicated from libs/utils/src/types/brand.ts — keep in sync.
3982
+ const GDS_BRANDS = {
3983
+ Corto: 'corto',
3984
+ CortoDark: 'corto dark',
3985
+ LawY: 'lawy',
3986
+ Acctivity: 'acctivity',
3987
+ Leap: 'leap',
3988
+ StandardIntegration: 'standardIntegration'
3989
+ };
3990
+ // Back-compat alias: keeps `import { BrandEnum } from '@corto/gds'` working (see GettingStarted.mdx)
3991
+ // without it being a second nominal `enum`. Exported in both the value and type namespace so both
3992
+ // `BrandEnum.Leap` (value) and `brand: BrandEnum` (type) keep working.
3993
+ const BrandEnum = GDS_BRANDS;
3994
+
3995
+ var GdsContextMenuItemVariantEnum;
3996
+ (function (GdsContextMenuItemVariantEnum) {
3997
+ GdsContextMenuItemVariantEnum["Default"] = "default";
3998
+ GdsContextMenuItemVariantEnum["Radio"] = "radio";
3999
+ GdsContextMenuItemVariantEnum["Check"] = "check";
4000
+ GdsContextMenuItemVariantEnum["Indent"] = "indent";
4001
+ GdsContextMenuItemVariantEnum["DoubleIndent"] = "double-indent";
4002
+ GdsContextMenuItemVariantEnum["Heading"] = "heading";
4003
+ GdsContextMenuItemVariantEnum["Switch"] = "switch";
4004
+ })(GdsContextMenuItemVariantEnum || (GdsContextMenuItemVariantEnum = {}));
4005
+
3960
4006
  const chipTypes = [
3961
4007
  'current',
3962
4008
  'in progress',
@@ -4046,20 +4092,99 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
4046
4092
  type: Input
4047
4093
  }] } });
4048
4094
 
4095
+ const formatDate = (value, option) => {
4096
+ if (!value) {
4097
+ return undefined;
4098
+ }
4099
+ const isString = typeof value === 'string';
4100
+ if (isString && isNaN(Date.parse(value))) {
4101
+ return undefined;
4102
+ }
4103
+ const dateValue = isString ? new Date(value) : value;
4104
+ return format(dateValue, option);
4105
+ };
4106
+ const shortDate = (value) => formatDate(value, 'P');
4107
+ const shortDateTime = (value) => formatDate(value, 'Pp');
4108
+ const transformDateFormat = (value) => {
4109
+ let dateFormat = value;
4110
+ if (value.includes('yyyy')) {
4111
+ dateFormat = dateFormat.replace('yyyy', 'yy');
4112
+ }
4113
+ else if (value.includes('yy')) {
4114
+ dateFormat = dateFormat.replace('yy', 'y');
4115
+ }
4116
+ if (value.includes('MMMM')) {
4117
+ dateFormat = dateFormat.replace('MMMM', 'MM');
4118
+ }
4119
+ else if (value.includes('MMM')) {
4120
+ dateFormat = dateFormat.replace('MMM', 'M');
4121
+ }
4122
+ else if (value.includes('MM')) {
4123
+ dateFormat = dateFormat.replace('MM', 'mm');
4124
+ }
4125
+ else if (value.includes('M')) {
4126
+ dateFormat = dateFormat.replace('M', 'm');
4127
+ }
4128
+ return dateFormat;
4129
+ };
4130
+ const transformSecondsToDuration = (seconds) => {
4131
+ const duration = intervalToDuration({ start: 0, end: seconds * 1000 });
4132
+ const zeroPad = (val) => String(val).padStart(2, '0');
4133
+ const hours = (duration.days ?? 0) * 24 + (duration.hours ?? 0);
4134
+ const minutes = duration.minutes ?? 0;
4135
+ const secs = duration.seconds ?? 0;
4136
+ return [hours, minutes, secs].map(zeroPad).join(':');
4137
+ };
4138
+ const transformDurationToSeconds = (duration) => {
4139
+ const [hour, minute, second] = duration.split(':');
4140
+ return +hour * 3600 + +minute * 60 + +second;
4141
+ };
4142
+ // can't just use Date.toISOString() as that takes into account
4143
+ // the time zone, so it was using the incorrect date
4144
+ const formatToISO = (date) => {
4145
+ if (!date) {
4146
+ return undefined;
4147
+ }
4148
+ return format(date, "yyyy-MM-dd'T'HH:mm:ss.sss'Z'");
4149
+ };
4150
+ const parseLocalizedDate = (dateString) => {
4151
+ if (navigator.language === 'en-US') {
4152
+ return new Date(dateString);
4153
+ }
4154
+ // parse dd/MM/yyyy date strings for use with Date
4155
+ const split = dateString.split('/');
4156
+ if (split.length !== 3) {
4157
+ throw new Error(`Invalid date ${dateString}`);
4158
+ }
4159
+ const [day, month, year] = split;
4160
+ return new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
4161
+ };
4162
+
4163
+ const getIconsByPrefix = (prefix) => Object.values(icons).reduce((acc, curr) => {
4164
+ if (curr.name.startsWith(prefix)) {
4165
+ acc.push(curr.name);
4166
+ return acc;
4167
+ }
4168
+ return acc;
4169
+ }, []);
4170
+
4171
+ const GDS_BRAND_VALUES = Object.values(GDS_BRANDS);
4172
+ const isGdsBrand = (value) => value !== null && value !== undefined && GDS_BRAND_VALUES.includes(value);
4173
+
4049
4174
  class OnBrandChanged {
4050
4175
  #observer;
4051
4176
  #cdr = inject(ChangeDetectorRef);
4052
- brand = signal(BrandEnum.Corto, ...(ngDevMode ? [{ debugName: "brand" }] : /* istanbul ignore next */ []));
4053
- brandIsExternal = computed(() => [BrandEnum.StandardIntegration, BrandEnum.Leap].includes(this.brand()), ...(ngDevMode ? [{ debugName: "brandIsExternal" }] : /* istanbul ignore next */ []));
4177
+ brand = signal(GDS_BRANDS.Corto, ...(ngDevMode ? [{ debugName: "brand" }] : /* istanbul ignore next */ []));
4178
+ brandIsExternal = computed(() => [GDS_BRANDS.StandardIntegration, GDS_BRANDS.Leap].includes(this.brand()), ...(ngDevMode ? [{ debugName: "brandIsExternal" }] : /* istanbul ignore next */ []));
4054
4179
  constructor() {
4055
- this.brand.set(document.body.getAttribute('brand'));
4180
+ this.#setBrandFromDocument();
4056
4181
  this.onBrandChanged?.();
4057
4182
  }
4058
4183
  ngOnInit() {
4059
4184
  this.#observer = new MutationObserver((mutations) => {
4060
4185
  mutations.forEach((mutation) => {
4061
4186
  if (mutation.type === 'attributes' && mutation.attributeName === 'brand') {
4062
- this.brand.set(document.body.getAttribute('brand'));
4187
+ this.#setBrandFromDocument();
4063
4188
  this.onBrandChanged?.();
4064
4189
  this.#cdr.markForCheck();
4065
4190
  }
@@ -4067,6 +4192,10 @@ class OnBrandChanged {
4067
4192
  });
4068
4193
  this.#observer.observe(document.body, { attributes: true, attributeFilter: ['brand'] });
4069
4194
  }
4195
+ #setBrandFromDocument() {
4196
+ const documentBrand = document.body.getAttribute('brand');
4197
+ this.brand.set(isGdsBrand(documentBrand) ? documentBrand : GDS_BRANDS.Corto);
4198
+ }
4070
4199
  ngOnDestroy() {
4071
4200
  if (this.#observer) {
4072
4201
  this.#observer.disconnect();
@@ -4386,7 +4515,7 @@ class GdsTooltipComponent extends OnBrandChanged {
4386
4515
  open = input(false, { ...(ngDevMode ? { debugName: "open" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
4387
4516
  maxWidth = input('100vw', ...(ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []));
4388
4517
  appendTo = input(this.#document.body, ...(ngDevMode ? [{ debugName: "appendTo" }] : /* istanbul ignore next */ []));
4389
- tooltipVariation = computed(() => (this.brand() === BrandEnum.CortoDark ? 'dark' : 'light'), ...(ngDevMode ? [{ debugName: "tooltipVariation" }] : /* istanbul ignore next */ []));
4518
+ tooltipVariation = computed(() => (this.brand() === GDS_BRANDS.CortoDark ? 'dark' : 'light'), ...(ngDevMode ? [{ debugName: "tooltipVariation" }] : /* istanbul ignore next */ []));
4390
4519
  tippyDirective = viewChild.required(TippyDirective);
4391
4520
  span = viewChild.required('span');
4392
4521
  get isOverflowing() {
@@ -4411,11 +4540,11 @@ class GdsTooltipComponent extends OnBrandChanged {
4411
4540
  }
4412
4541
  }, ...(ngDevMode ? [{ debugName: "#openOnOpen" }] : /* istanbul ignore next */ []));
4413
4542
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsTooltipComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
4414
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsTooltipComponent, isStandalone: true, selector: "gds-tooltip", inputs: { tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: true, transformFunction: null }, onlyTextOverflow: { classPropertyName: "onlyTextOverflow", publicName: "onlyTextOverflow", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, tooltipPlacement: { classPropertyName: "tooltipPlacement", publicName: "tooltipPlacement", isSignal: true, isRequired: false, transformFunction: null }, tooltipInteractive: { classPropertyName: "tooltipInteractive", publicName: "tooltipInteractive", isSignal: true, isRequired: false, transformFunction: null }, useHostWidth: { classPropertyName: "useHostWidth", publicName: "useHostWidth", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tippyDirective", first: true, predicate: TippyDirective, descendants: true, isSignal: true }, { propertyName: "span", first: true, predicate: ["span"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.TippyDirective }], ngImport: i0, template: "<span\n #span\n class=\"gds-tooltip_container\"\n [tp]=\"tooltip()\"\n [tpVariation]=\"tooltipVariation()\"\n [tpPlacement]=\"tooltipPlacement()\"\n [tpInteractive]=\"tooltipInteractive()\"\n [tpIsEnabled]=\"!disabled()\"\n [tpUseHostWidth]=\"useHostWidth()\"\n [tpOnlyTextOverflow]=\"onlyTextOverflow()\"\n [tpUseTextContent]=\"!tooltip()\"\n [tpMaxWidth]=\"maxWidth()\"\n [tpAppendTo]=\"appendTo()\"\n>\n <ng-content />\n</span>\n", styles: [":host{display:flex;min-width:0}:host .gds-tooltip_container{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4543
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsTooltipComponent, isStandalone: true, selector: "gds-tooltip", inputs: { tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: true, transformFunction: null }, onlyTextOverflow: { classPropertyName: "onlyTextOverflow", publicName: "onlyTextOverflow", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, tooltipPlacement: { classPropertyName: "tooltipPlacement", publicName: "tooltipPlacement", isSignal: true, isRequired: false, transformFunction: null }, tooltipInteractive: { classPropertyName: "tooltipInteractive", publicName: "tooltipInteractive", isSignal: true, isRequired: false, transformFunction: null }, useHostWidth: { classPropertyName: "useHostWidth", publicName: "useHostWidth", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tippyDirective", first: true, predicate: TippyDirective, descendants: true, isSignal: true }, { propertyName: "span", first: true, predicate: ["span"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.TippyDirective }], ngImport: i0, template: "<span\n #span\n class=\"gds-tooltip_container\"\n [tp]=\"tooltip()\"\n [tpVariation]=\"tooltipVariation()\"\n [tpPlacement]=\"tooltipPlacement()\"\n [tpInteractive]=\"tooltipInteractive()\"\n [tpIsEnabled]=\"!disabled()\"\n [tpUseHostWidth]=\"useHostWidth()\"\n [tpOnlyTextOverflow]=\"onlyTextOverflow()\"\n [tpUseTextContent]=\"!tooltip()\"\n [tpMaxWidth]=\"maxWidth()\"\n [tpAppendTo]=\"appendTo()\"\n>\n <ng-content />\n</span>\n", styles: ["@layer design-system{:host{display:flex;min-width:0}:host .gds-tooltip_container{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}\n"], dependencies: [{ kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4415
4544
  }
4416
4545
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsTooltipComponent, decorators: [{
4417
4546
  type: Component,
4418
- args: [{ selector: 'gds-tooltip', hostDirectives: [TippyDirective], imports: [TippyDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n #span\n class=\"gds-tooltip_container\"\n [tp]=\"tooltip()\"\n [tpVariation]=\"tooltipVariation()\"\n [tpPlacement]=\"tooltipPlacement()\"\n [tpInteractive]=\"tooltipInteractive()\"\n [tpIsEnabled]=\"!disabled()\"\n [tpUseHostWidth]=\"useHostWidth()\"\n [tpOnlyTextOverflow]=\"onlyTextOverflow()\"\n [tpUseTextContent]=\"!tooltip()\"\n [tpMaxWidth]=\"maxWidth()\"\n [tpAppendTo]=\"appendTo()\"\n>\n <ng-content />\n</span>\n", styles: [":host{display:flex;min-width:0}:host .gds-tooltip_container{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
4547
+ args: [{ selector: 'gds-tooltip', hostDirectives: [TippyDirective], imports: [TippyDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n #span\n class=\"gds-tooltip_container\"\n [tp]=\"tooltip()\"\n [tpVariation]=\"tooltipVariation()\"\n [tpPlacement]=\"tooltipPlacement()\"\n [tpInteractive]=\"tooltipInteractive()\"\n [tpIsEnabled]=\"!disabled()\"\n [tpUseHostWidth]=\"useHostWidth()\"\n [tpOnlyTextOverflow]=\"onlyTextOverflow()\"\n [tpUseTextContent]=\"!tooltip()\"\n [tpMaxWidth]=\"maxWidth()\"\n [tpAppendTo]=\"appendTo()\"\n>\n <ng-content />\n</span>\n", styles: ["@layer design-system{:host{display:flex;min-width:0}:host .gds-tooltip_container{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}\n"] }]
4419
4548
  }], propDecorators: { tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: true }] }], onlyTextOverflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlyTextOverflow", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], tooltipPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPlacement", required: false }] }], tooltipInteractive: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipInteractive", required: false }] }], useHostWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "useHostWidth", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], tippyDirective: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TippyDirective), { isSignal: true }] }], span: [{ type: i0.ViewChild, args: ['span', { isSignal: true }] }] } });
4420
4549
 
4421
4550
  class GdsChipComponent extends OnBrandChanged {
@@ -4425,8 +4554,8 @@ class GdsChipComponent extends OnBrandChanged {
4425
4554
  color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
4426
4555
  rounded = input(false, { ...(ngDevMode ? { debugName: "rounded" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
4427
4556
  dismissed = new EventEmitter();
4428
- #backgroundKey = computed(() => (this.brand() === BrandEnum.CortoDark ? 'dark' : 'light'), ...(ngDevMode ? [{ debugName: "#backgroundKey" }] : /* istanbul ignore next */ []));
4429
- #textKey = computed(() => (this.brand() === BrandEnum.CortoDark ? 'light' : 'dark'), ...(ngDevMode ? [{ debugName: "#textKey" }] : /* istanbul ignore next */ []));
4557
+ #backgroundKey = computed(() => (this.brand() === GDS_BRANDS.CortoDark ? 'dark' : 'light'), ...(ngDevMode ? [{ debugName: "#backgroundKey" }] : /* istanbul ignore next */ []));
4558
+ #textKey = computed(() => (this.brand() === GDS_BRANDS.CortoDark ? 'light' : 'dark'), ...(ngDevMode ? [{ debugName: "#textKey" }] : /* istanbul ignore next */ []));
4430
4559
  #chipColor = computed(() => this.#getColor(this.color() ?? this.text()), ...(ngDevMode ? [{ debugName: "#chipColor" }] : /* istanbul ignore next */ []));
4431
4560
  background = computed(() => GdsChipColorsMap[this.#chipColor()][this.#backgroundKey()], ...(ngDevMode ? [{ debugName: "background" }] : /* istanbul ignore next */ []));
4432
4561
  textColor = computed(() => GdsChipColorsMap[this.#chipColor()][this.#textKey()], ...(ngDevMode ? [{ debugName: "textColor" }] : /* istanbul ignore next */ []));
@@ -4485,11 +4614,11 @@ class GdsChipComponent extends OnBrandChanged {
4485
4614
  return map[chipText.toLowerCase()] ?? 'grey';
4486
4615
  }
4487
4616
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsChipComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
4488
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsChipComponent, isStandalone: true, selector: "gds-chip", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { properties: { "attr.rounded": "this.roundedAttr", "attr.btn": "this.hasDismiss", "attr.width": "this.widthStyle", "attr.compact": "this.compactAttr", "style.--background-color": "this.backgroundStyle", "style.--color": "this.textColorStyle" } }, usesInheritance: true, ngImport: i0, template: "<gds-tooltip\n onlyTextOverflow\n [tooltip]=\"text() | titlecase\"\n>\n {{ text() }}\n</gds-tooltip>\n@if (hasDismiss) {\n <gds-icon\n class=\"\n gds-chip_dismiss\n gds-icon-size-3xs\n \"\n key=\"line-dismiss\"\n (click)=\"handleDismissed($event)\"\n />\n}\n", styles: [":host{--border-radius: var(--gds-borderRadius-sm);--text-transform: uppercase;--cursor: default;--padding: var(--gds-spacing-2xs) var(--gds-spacing-xs);--min-height: 32px}:host[rounded]{--border-radius: var(--gds-borderRadius-lg);--text-transform: capitalize}:host[btn=true]{--cursor: pointer}:host[width=fixed]{--min-width: 124px;--max-width: 124px}:host[width=auto]{--min-width: auto;--max-width: 100%}:host[width=fit-content]{--min-width: fit-content;--max-width: fit-content}:host[compact]{--padding: 3px var(--gds-spacing-2xs);--min-height: 20px}:host{font:var(--gds-text-captionStrong-shorthand);border-radius:var(--border-radius);text-transform:var(--text-transform);min-width:var(--min-width);max-width:var(--max-width);padding:var(--padding);min-height:var(--min-height);cursor:var(--cursor);color:var(--color);background-color:var(--background-color);display:inline-flex;align-items:center;justify-content:center;height:fit-content;gap:var(--gds-spacing-2xs)}:host .gds-chip_dismiss{margin-left:auto}\n"], dependencies: [{ kind: "component", type: GdsTooltipComponent, selector: "gds-tooltip", inputs: ["tooltip", "onlyTextOverflow", "disabled", "tooltipPlacement", "tooltipInteractive", "useHostWidth", "open", "maxWidth", "appendTo"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4617
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsChipComponent, isStandalone: true, selector: "gds-chip", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { properties: { "attr.rounded": "this.roundedAttr", "attr.btn": "this.hasDismiss", "attr.width": "this.widthStyle", "attr.compact": "this.compactAttr", "style.--background-color": "this.backgroundStyle", "style.--color": "this.textColorStyle" } }, usesInheritance: true, ngImport: i0, template: "<gds-tooltip\n onlyTextOverflow\n [tooltip]=\"text() | titlecase\"\n>\n {{ text() }}\n</gds-tooltip>\n@if (hasDismiss) {\n <gds-icon\n class=\"\n gds-chip_dismiss\n gds-icon-size-3xs\n \"\n key=\"line-dismiss\"\n (click)=\"handleDismissed($event)\"\n />\n}\n", styles: ["@layer design-system{:host{--border-radius: var(--gds-borderRadius-sm);--text-transform: uppercase;--cursor: default;--padding: var(--gds-spacing-2xs) var(--gds-spacing-xs);--min-height: 32px}:host[rounded]{--border-radius: var(--gds-borderRadius-lg);--text-transform: capitalize}:host[btn=true]{--cursor: pointer}:host[width=fixed]{--min-width: 124px;--max-width: 124px}:host[width=auto]{--min-width: auto;--max-width: 100%}:host[width=fit-content]{--min-width: fit-content;--max-width: fit-content}:host[compact]{--padding: 3px var(--gds-spacing-2xs);--min-height: 20px}:host{font:var(--gds-text-captionStrong-shorthand);border-radius:var(--border-radius);text-transform:var(--text-transform);min-width:var(--min-width);max-width:var(--max-width);padding:var(--padding);min-height:var(--min-height);cursor:var(--cursor);color:var(--color);background-color:var(--background-color);display:inline-flex;align-items:center;justify-content:center;height:fit-content;gap:var(--gds-spacing-2xs)}:host .gds-chip_dismiss{margin-left:auto}}\n"], dependencies: [{ kind: "component", type: GdsTooltipComponent, selector: "gds-tooltip", inputs: ["tooltip", "onlyTextOverflow", "disabled", "tooltipPlacement", "tooltipInteractive", "useHostWidth", "open", "maxWidth", "appendTo"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4489
4618
  }
4490
4619
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsChipComponent, decorators: [{
4491
4620
  type: Component,
4492
- args: [{ selector: 'gds-chip', imports: [GdsTooltipComponent, GdsIconComponent, TitleCasePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<gds-tooltip\n onlyTextOverflow\n [tooltip]=\"text() | titlecase\"\n>\n {{ text() }}\n</gds-tooltip>\n@if (hasDismiss) {\n <gds-icon\n class=\"\n gds-chip_dismiss\n gds-icon-size-3xs\n \"\n key=\"line-dismiss\"\n (click)=\"handleDismissed($event)\"\n />\n}\n", styles: [":host{--border-radius: var(--gds-borderRadius-sm);--text-transform: uppercase;--cursor: default;--padding: var(--gds-spacing-2xs) var(--gds-spacing-xs);--min-height: 32px}:host[rounded]{--border-radius: var(--gds-borderRadius-lg);--text-transform: capitalize}:host[btn=true]{--cursor: pointer}:host[width=fixed]{--min-width: 124px;--max-width: 124px}:host[width=auto]{--min-width: auto;--max-width: 100%}:host[width=fit-content]{--min-width: fit-content;--max-width: fit-content}:host[compact]{--padding: 3px var(--gds-spacing-2xs);--min-height: 20px}:host{font:var(--gds-text-captionStrong-shorthand);border-radius:var(--border-radius);text-transform:var(--text-transform);min-width:var(--min-width);max-width:var(--max-width);padding:var(--padding);min-height:var(--min-height);cursor:var(--cursor);color:var(--color);background-color:var(--background-color);display:inline-flex;align-items:center;justify-content:center;height:fit-content;gap:var(--gds-spacing-2xs)}:host .gds-chip_dismiss{margin-left:auto}\n"] }]
4621
+ args: [{ selector: 'gds-chip', imports: [GdsTooltipComponent, GdsIconComponent, TitleCasePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<gds-tooltip\n onlyTextOverflow\n [tooltip]=\"text() | titlecase\"\n>\n {{ text() }}\n</gds-tooltip>\n@if (hasDismiss) {\n <gds-icon\n class=\"\n gds-chip_dismiss\n gds-icon-size-3xs\n \"\n key=\"line-dismiss\"\n (click)=\"handleDismissed($event)\"\n />\n}\n", styles: ["@layer design-system{:host{--border-radius: var(--gds-borderRadius-sm);--text-transform: uppercase;--cursor: default;--padding: var(--gds-spacing-2xs) var(--gds-spacing-xs);--min-height: 32px}:host[rounded]{--border-radius: var(--gds-borderRadius-lg);--text-transform: capitalize}:host[btn=true]{--cursor: pointer}:host[width=fixed]{--min-width: 124px;--max-width: 124px}:host[width=auto]{--min-width: auto;--max-width: 100%}:host[width=fit-content]{--min-width: fit-content;--max-width: fit-content}:host[compact]{--padding: 3px var(--gds-spacing-2xs);--min-height: 20px}:host{font:var(--gds-text-captionStrong-shorthand);border-radius:var(--border-radius);text-transform:var(--text-transform);min-width:var(--min-width);max-width:var(--max-width);padding:var(--padding);min-height:var(--min-height);cursor:var(--cursor);color:var(--color);background-color:var(--background-color);display:inline-flex;align-items:center;justify-content:center;height:fit-content;gap:var(--gds-spacing-2xs)}:host .gds-chip_dismiss{margin-left:auto}}\n"] }]
4493
4622
  }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], dismissed: [{
4494
4623
  type: Output
4495
4624
  }], roundedAttr: [{
@@ -4610,7 +4739,7 @@ class GdsSwitchComponent extends GdsSignalFormContainer {
4610
4739
  }
4611
4740
  }
4612
4741
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsSwitchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
4613
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsSwitchComponent, isStandalone: true, selector: "gds-switch", host: { attributes: { "tabindex": "0" }, listeners: { "click": "input()?.nativeElement?.click()", "keydown.enter": "input()?.nativeElement?.click()" }, classAttribute: "gds-display-inline-flex gds-radius-2xl gds-padding-3xs gds-align-self-end" }, queries: [{ propertyName: "input", first: true, predicate: GdsNativeInputDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"gds-display-none\">\n <ng-content />\n</div>\n\n<span class=\"\n gds-height-xs\n gds-radius-2xl\n gds-width-xs\n thumb\n\"></span>\n", styles: [":host{--gds-form-control-border-color: var(--gds-palette-background-dark);--gds-form-control-background-color: var(--gds-palette-background-white);--gds-form-control-hover-color: var(--gds-palette-background-bright);--gds-form-control-disabled-background-color: var(--gds-palette-background-white);--gds-form-control-disabled-border-color: var(--gds-palette-badge-hover);--gds-form-control-cursor: pointer;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{cursor:var(--cursor);background-color:var(--border-color);height:20px;width:40px}:host .thumb{background-color:var(--background-color);transform:translate(var(--switch-thumb-x-transform, 0px));transition:transform .15s cubic-bezier(.4,0,.2,1) 0ms,width .15s}:host:has(input:checked){--gds-form-control-border-color: var(--gds-palette-background-bright);--gds-form-control-hover-color: var(--gds-palette-background-bright-hover);--gds-form-control-disabled-border-color: var(--gds-palette-button-primary-disabled);--switch-thumb-x-transform: 20px}:host:has(input:checked):hover{background-color:var(--hover-color)}:host:has(input:checked):active{--switch-thumb-x-transform: var(--gds-spacing-sm)}:host[disabled]:hover,:host:has(*:disabled,*[disabled=true]):hover{background-color:var(--disabled-border-color)}:host:focus-visible{outline:var(--gds-palette-border-dark) solid 2px;border-radius:var(--gds-borderRadius-2xl);outline-offset:2px}:host:active .thumb{width:var(--gds-size-sm)!important}:is(body[isMobile=true]) :host{height:30px;width:51px;padding:3px!important}:is(body[isMobile=true]) :host .thumb{height:var(--gds-primitive-size-600)!important;width:var(--gds-primitive-size-600)!important;box-shadow:0 1px 2px #0000004d,0 1px 3px 1px #00000026}:is(body[isMobile=true]) :host:has(input:checked){--gds-form-control-border-color: var(--gds-palette-button-primary-default);--gds-form-control-hover-color: var(--gds-palette-button-primary-hover);--switch-thumb-x-transform: 21px}:is(body[isMobile=true]) :host:has(input:checked):active{--switch-thumb-x-transform: 13px}:is(body[isMobile=true]) :host[disabled] .thumb,:is(body[isMobile=true]) :host:has(*:disabled,*[disabled=true]) .thumb{box-shadow:none}:is(body[isMobile=true]) :host:active .thumb{width:var(--gds-size-md)!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4742
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsSwitchComponent, isStandalone: true, selector: "gds-switch", host: { attributes: { "tabindex": "0" }, listeners: { "click": "input()?.nativeElement?.click()", "keydown.enter": "input()?.nativeElement?.click()" }, classAttribute: "gds-display-inline-flex gds-radius-2xl gds-padding-3xs gds-align-self-end" }, queries: [{ propertyName: "input", first: true, predicate: GdsNativeInputDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"gds-display-none\">\n <ng-content />\n</div>\n\n<span class=\"\n gds-height-xs\n gds-radius-2xl\n gds-width-xs\n thumb\n\"></span>\n", styles: ["@layer design-system{:host{--gds-form-control-border-color: var(--gds-palette-background-dark);--gds-form-control-background-color: var(--gds-palette-background-white);--gds-form-control-hover-color: var(--gds-palette-background-bright);--gds-form-control-disabled-background-color: var(--gds-palette-background-white);--gds-form-control-disabled-border-color: var(--gds-palette-badge-hover);--gds-form-control-cursor: pointer;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{cursor:var(--cursor);background-color:var(--border-color);height:20px;width:40px}:host .thumb{background-color:var(--background-color);transform:translate(var(--switch-thumb-x-transform, 0px));transition:transform .15s cubic-bezier(.4,0,.2,1) 0ms,width .15s}:host:has(input:checked){--gds-form-control-border-color: var(--gds-palette-background-bright);--gds-form-control-hover-color: var(--gds-palette-background-bright-hover);--gds-form-control-disabled-border-color: var(--gds-palette-button-primary-disabled);--switch-thumb-x-transform: 20px}:host:has(input:checked):hover{background-color:var(--hover-color)}:host:has(input:checked):active{--switch-thumb-x-transform: var(--gds-spacing-sm)}:host[disabled]:hover,:host:has(*:disabled,*[disabled=true]):hover{background-color:var(--disabled-border-color)}:host:focus-visible{outline:var(--gds-palette-border-dark) solid 2px;border-radius:var(--gds-borderRadius-2xl);outline-offset:2px}:host:active .thumb{width:var(--gds-size-sm)!important}:is(body[isMobile=true]) :host{height:30px;width:51px;padding:3px!important}:is(body[isMobile=true]) :host .thumb{height:var(--gds-primitive-size-600)!important;width:var(--gds-primitive-size-600)!important;box-shadow:0 1px 2px #0000004d,0 1px 3px 1px #00000026}:is(body[isMobile=true]) :host:has(input:checked){--gds-form-control-border-color: var(--gds-palette-button-primary-default);--gds-form-control-hover-color: var(--gds-palette-button-primary-hover);--switch-thumb-x-transform: 21px}:is(body[isMobile=true]) :host:has(input:checked):active{--switch-thumb-x-transform: 13px}:is(body[isMobile=true]) :host[disabled] .thumb,:is(body[isMobile=true]) :host:has(*:disabled,*[disabled=true]) .thumb{box-shadow:none}:is(body[isMobile=true]) :host:active .thumb{width:var(--gds-size-md)!important}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4614
4743
  }
4615
4744
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsSwitchComponent, decorators: [{
4616
4745
  type: Component,
@@ -4619,7 +4748,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
4619
4748
  tabindex: '0',
4620
4749
  '(click)': 'input()?.nativeElement?.click()',
4621
4750
  '(keydown.enter)': 'input()?.nativeElement?.click()'
4622
- }, template: "<div class=\"gds-display-none\">\n <ng-content />\n</div>\n\n<span class=\"\n gds-height-xs\n gds-radius-2xl\n gds-width-xs\n thumb\n\"></span>\n", styles: [":host{--gds-form-control-border-color: var(--gds-palette-background-dark);--gds-form-control-background-color: var(--gds-palette-background-white);--gds-form-control-hover-color: var(--gds-palette-background-bright);--gds-form-control-disabled-background-color: var(--gds-palette-background-white);--gds-form-control-disabled-border-color: var(--gds-palette-badge-hover);--gds-form-control-cursor: pointer;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{cursor:var(--cursor);background-color:var(--border-color);height:20px;width:40px}:host .thumb{background-color:var(--background-color);transform:translate(var(--switch-thumb-x-transform, 0px));transition:transform .15s cubic-bezier(.4,0,.2,1) 0ms,width .15s}:host:has(input:checked){--gds-form-control-border-color: var(--gds-palette-background-bright);--gds-form-control-hover-color: var(--gds-palette-background-bright-hover);--gds-form-control-disabled-border-color: var(--gds-palette-button-primary-disabled);--switch-thumb-x-transform: 20px}:host:has(input:checked):hover{background-color:var(--hover-color)}:host:has(input:checked):active{--switch-thumb-x-transform: var(--gds-spacing-sm)}:host[disabled]:hover,:host:has(*:disabled,*[disabled=true]):hover{background-color:var(--disabled-border-color)}:host:focus-visible{outline:var(--gds-palette-border-dark) solid 2px;border-radius:var(--gds-borderRadius-2xl);outline-offset:2px}:host:active .thumb{width:var(--gds-size-sm)!important}:is(body[isMobile=true]) :host{height:30px;width:51px;padding:3px!important}:is(body[isMobile=true]) :host .thumb{height:var(--gds-primitive-size-600)!important;width:var(--gds-primitive-size-600)!important;box-shadow:0 1px 2px #0000004d,0 1px 3px 1px #00000026}:is(body[isMobile=true]) :host:has(input:checked){--gds-form-control-border-color: var(--gds-palette-button-primary-default);--gds-form-control-hover-color: var(--gds-palette-button-primary-hover);--switch-thumb-x-transform: 21px}:is(body[isMobile=true]) :host:has(input:checked):active{--switch-thumb-x-transform: 13px}:is(body[isMobile=true]) :host[disabled] .thumb,:is(body[isMobile=true]) :host:has(*:disabled,*[disabled=true]) .thumb{box-shadow:none}:is(body[isMobile=true]) :host:active .thumb{width:var(--gds-size-md)!important}\n"] }]
4751
+ }, template: "<div class=\"gds-display-none\">\n <ng-content />\n</div>\n\n<span class=\"\n gds-height-xs\n gds-radius-2xl\n gds-width-xs\n thumb\n\"></span>\n", styles: ["@layer design-system{:host{--gds-form-control-border-color: var(--gds-palette-background-dark);--gds-form-control-background-color: var(--gds-palette-background-white);--gds-form-control-hover-color: var(--gds-palette-background-bright);--gds-form-control-disabled-background-color: var(--gds-palette-background-white);--gds-form-control-disabled-border-color: var(--gds-palette-badge-hover);--gds-form-control-cursor: pointer;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{cursor:var(--cursor);background-color:var(--border-color);height:20px;width:40px}:host .thumb{background-color:var(--background-color);transform:translate(var(--switch-thumb-x-transform, 0px));transition:transform .15s cubic-bezier(.4,0,.2,1) 0ms,width .15s}:host:has(input:checked){--gds-form-control-border-color: var(--gds-palette-background-bright);--gds-form-control-hover-color: var(--gds-palette-background-bright-hover);--gds-form-control-disabled-border-color: var(--gds-palette-button-primary-disabled);--switch-thumb-x-transform: 20px}:host:has(input:checked):hover{background-color:var(--hover-color)}:host:has(input:checked):active{--switch-thumb-x-transform: var(--gds-spacing-sm)}:host[disabled]:hover,:host:has(*:disabled,*[disabled=true]):hover{background-color:var(--disabled-border-color)}:host:focus-visible{outline:var(--gds-palette-border-dark) solid 2px;border-radius:var(--gds-borderRadius-2xl);outline-offset:2px}:host:active .thumb{width:var(--gds-size-sm)!important}:is(body[isMobile=true]) :host{height:30px;width:51px;padding:3px!important}:is(body[isMobile=true]) :host .thumb{height:var(--gds-primitive-size-600)!important;width:var(--gds-primitive-size-600)!important;box-shadow:0 1px 2px #0000004d,0 1px 3px 1px #00000026}:is(body[isMobile=true]) :host:has(input:checked){--gds-form-control-border-color: var(--gds-palette-button-primary-default);--gds-form-control-hover-color: var(--gds-palette-button-primary-hover);--switch-thumb-x-transform: 21px}:is(body[isMobile=true]) :host:has(input:checked):active{--switch-thumb-x-transform: 13px}:is(body[isMobile=true]) :host[disabled] .thumb,:is(body[isMobile=true]) :host:has(*:disabled,*[disabled=true]) .thumb{box-shadow:none}:is(body[isMobile=true]) :host:active .thumb{width:var(--gds-size-md)!important}}\n"] }]
4623
4752
  }], propDecorators: { input: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GdsNativeInputDirective), { isSignal: true }] }] } });
4624
4753
 
4625
4754
  class GdsContextMenuBaseDirective extends OnBrandChanged {
@@ -4631,7 +4760,7 @@ class GdsContextMenuBaseDirective extends OnBrandChanged {
4631
4760
  size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
4632
4761
  selected = signal(false).asReadonly();
4633
4762
  hasChildren = signal(false).asReadonly();
4634
- tooltipVariation = computed(() => (this.brand() === BrandEnum.CortoDark ? 'dark' : 'light'), ...(ngDevMode ? [{ debugName: "tooltipVariation" }] : /* istanbul ignore next */ []));
4763
+ tooltipVariation = computed(() => (this.brand() === GDS_BRANDS.CortoDark ? 'dark' : 'light'), ...(ngDevMode ? [{ debugName: "tooltipVariation" }] : /* istanbul ignore next */ []));
4635
4764
  variantIcon = computed(() => {
4636
4765
  switch (this.variant()) {
4637
4766
  case 'check':
@@ -4662,7 +4791,7 @@ class GdsContextMenuItemComponent extends GdsContextMenuBaseDirective {
4662
4791
  nestedMenu = input(...(ngDevMode ? [undefined, { debugName: "nestedMenu" }] : /* istanbul ignore next */ []));
4663
4792
  hasChildren = computed(() => !!this.nestedMenu(), ...(ngDevMode ? [{ debugName: "hasChildren" }] : /* istanbul ignore next */ []));
4664
4793
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsContextMenuItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
4665
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsContextMenuItemComponent, isStandalone: true, selector: "gds-context-menu-item", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, nestedMenu: { classPropertyName: "nestedMenu", publicName: "nestedMenu", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0" } }, usesInheritance: true, hostDirectives: [{ directive: i1$1.CdkMenuItem, outputs: ["cdkMenuItemTriggered", "clicked"] }, { directive: i1$1.CdkMenuTrigger, inputs: ["cdkMenuTriggerFor", "nestedMenu"] }], ngImport: i0, template: "@if (border()) {\n <div class=\"border\"></div>\n}\n<div class=\"\n gds-radius-sm\n wrapper\n\">\n @if (variantIcon(); as variantIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-2xs\n \"\n [key]=\"variantIcon\"\n />\n }\n\n @if (startIcon(); as startIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-xs\n \"\n [key]=\"startIcon\"\n />\n }\n\n <div\n class=\"\n gds-align-items-start\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n gds-justify-content-center\n gds-min-width-0\n \"\n >\n <div\n class=\"\n gds-context-menu-item_label\n gds-truncate\n gds-width-100-parent\n \"\n [class]=\"labelClass()\"\n [tp]=\"label()\"\n [tpOnlyTextOverflow]=\"true\"\n [tpVariation]=\"tooltipVariation()\"\n >\n {{ label() }}\n </div>\n\n @if (hint(); as hint) {\n <div class=\"gds-context-menu-item_hint\">{{ hint }}</div>\n }\n </div>\n\n @if (variant() === 'switch') {\n <gds-switch class=\"\n gds-margin-block-auto\n gds-margin-inline-start-auto\n gds-min-width-fit-content\n \">\n <input\n type=\"checkbox\"\n [checked]=\"selected()\"\n (click)=\"$event.stopPropagation()\"\n />\n </gds-switch>\n }\n\n @if (hasChildren()) {\n <gds-icon\n class=\"\n gds-context-menu-item_endIcon\n gds-icon-size-xs\n \"\n key=\"line-chevron-right-stroke\"\n />\n }\n</div>\n", styles: [":host{--icon-color: var(--gds-palette-icon-primary)}:host .border{border-top:1px solid var(--gds-palette-border-modal);height:var(--gds-spacing-2xs)}:host .wrapper{--font: var(--gds-text-body-shorthand);--color: var(--gds-palette-text-default-primary);--background-color: var(--gds-palette-background-white);display:flex;align-items:center;padding:7px 11px;gap:var(--gds-spacing-xs);cursor:default;background:var(--background-color)}:host[variant=heading]>.wrapper{--font: var(--gds-text-bodyStrong-shorthand);--color: var(--gds-palette-text-primary-primary)}:host[variant=indent]>.wrapper{padding-left:40px}:host[variant=double-indent]>.wrapper{padding-left:68px}:host[compact]>.wrapper{padding:3px 11px}:host:focus-visible>.wrapper{outline:none;--background-color: var(--gds-palette-background-hover)}:host:focus-visible{outline:none;--background-color: var(--gds-palette-background-hover)}:host[clickable]>.wrapper{cursor:pointer}:host[clickable]>.wrapper:hover{--background-color: var(--gds-palette-background-hover)}:host .gds-context-menu-item_label{flex:1;font:var(--font);color:var(--color);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .gds-context-menu-item_endIcon{margin-left:auto;color:var(--icon-color)}:host .gds-context-menu-item_startIcon{color:var(--icon-color)}:host .gds-context-menu-item_hint{font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-default-secondary)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{--font: var(--gds-text-caption-shorthand);--color: var(--gds-palette-text-default-secondary);border-bottom:1px solid var(--gds-palette-border-modal);border-radius:0}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host>.wrapper{justify-content:center}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=default]>.wrapper,:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{padding-inline:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=check]>.wrapper{position:relative;right:var(--gds-spacing-sm)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=indent]>.wrapper{padding-left:0}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }, { kind: "component", type: GdsSwitchComponent, selector: "gds-switch" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4794
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsContextMenuItemComponent, isStandalone: true, selector: "gds-context-menu-item", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, nestedMenu: { classPropertyName: "nestedMenu", publicName: "nestedMenu", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0" } }, usesInheritance: true, hostDirectives: [{ directive: i1$1.CdkMenuItem, outputs: ["cdkMenuItemTriggered", "clicked"] }, { directive: i1$1.CdkMenuTrigger, inputs: ["cdkMenuTriggerFor", "nestedMenu"] }], ngImport: i0, template: "@if (border()) {\n <div class=\"border\"></div>\n}\n<div class=\"\n gds-radius-sm\n wrapper\n\">\n @if (variantIcon(); as variantIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-2xs\n \"\n [key]=\"variantIcon\"\n />\n }\n\n @if (startIcon(); as startIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-xs\n \"\n [key]=\"startIcon\"\n />\n }\n\n <div\n class=\"\n gds-align-items-start\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n gds-justify-content-center\n gds-min-width-0\n \"\n >\n <div\n class=\"\n gds-context-menu-item_label\n gds-truncate\n gds-width-100-parent\n \"\n [class]=\"labelClass()\"\n [tp]=\"label()\"\n [tpOnlyTextOverflow]=\"true\"\n [tpVariation]=\"tooltipVariation()\"\n >\n {{ label() }}\n </div>\n\n @if (hint(); as hint) {\n <div class=\"gds-context-menu-item_hint\">{{ hint }}</div>\n }\n </div>\n\n @if (variant() === 'switch') {\n <gds-switch class=\"\n gds-margin-block-auto\n gds-margin-inline-start-auto\n gds-min-width-fit-content\n \">\n <input\n type=\"checkbox\"\n [checked]=\"selected()\"\n (click)=\"$event.stopPropagation()\"\n />\n </gds-switch>\n }\n\n @if (hasChildren()) {\n <gds-icon\n class=\"\n gds-context-menu-item_endIcon\n gds-icon-size-xs\n \"\n key=\"line-chevron-right-stroke\"\n />\n }\n</div>\n", styles: ["@layer design-system{:host{--icon-color: var(--gds-palette-icon-primary)}:host .border{border-top:1px solid var(--gds-palette-border-modal);height:var(--gds-spacing-2xs)}:host .wrapper{--font: var(--gds-text-body-shorthand);--color: var(--gds-palette-text-default-primary);--background-color: var(--gds-palette-background-white);display:flex;align-items:center;padding:7px 11px;gap:var(--gds-spacing-xs);cursor:default;background:var(--background-color)}:host[variant=heading]>.wrapper{--font: var(--gds-text-bodyStrong-shorthand);--color: var(--gds-palette-text-primary-primary)}:host[variant=indent]>.wrapper{padding-left:40px}:host[variant=double-indent]>.wrapper{padding-left:68px}:host[compact]>.wrapper{padding:3px 11px}:host:focus-visible>.wrapper{outline:none;--background-color: var(--gds-palette-background-hover)}:host:focus-visible{outline:none;--background-color: var(--gds-palette-background-hover)}:host[clickable]>.wrapper{cursor:pointer}:host[clickable]>.wrapper:hover{--background-color: var(--gds-palette-background-hover)}:host .gds-context-menu-item_label{flex:1;font:var(--font);color:var(--color);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .gds-context-menu-item_endIcon{margin-left:auto;color:var(--icon-color)}:host .gds-context-menu-item_startIcon{color:var(--icon-color)}:host .gds-context-menu-item_hint{font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-default-secondary)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{--font: var(--gds-text-caption-shorthand);--color: var(--gds-palette-text-default-secondary);border-bottom:1px solid var(--gds-palette-border-modal);border-radius:0}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host>.wrapper{justify-content:center}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=default]>.wrapper,:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{padding-inline:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=check]>.wrapper{position:relative;right:var(--gds-spacing-sm)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=indent]>.wrapper{padding-left:0}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }, { kind: "component", type: GdsSwitchComponent, selector: "gds-switch" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4666
4795
  }
4667
4796
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsContextMenuItemComponent, decorators: [{
4668
4797
  type: Component,
@@ -4671,17 +4800,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
4671
4800
  { directive: CdkMenuTrigger, inputs: ['cdkMenuTriggerFor: nestedMenu'] }
4672
4801
  ], host: {
4673
4802
  tabindex: '0'
4674
- }, template: "@if (border()) {\n <div class=\"border\"></div>\n}\n<div class=\"\n gds-radius-sm\n wrapper\n\">\n @if (variantIcon(); as variantIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-2xs\n \"\n [key]=\"variantIcon\"\n />\n }\n\n @if (startIcon(); as startIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-xs\n \"\n [key]=\"startIcon\"\n />\n }\n\n <div\n class=\"\n gds-align-items-start\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n gds-justify-content-center\n gds-min-width-0\n \"\n >\n <div\n class=\"\n gds-context-menu-item_label\n gds-truncate\n gds-width-100-parent\n \"\n [class]=\"labelClass()\"\n [tp]=\"label()\"\n [tpOnlyTextOverflow]=\"true\"\n [tpVariation]=\"tooltipVariation()\"\n >\n {{ label() }}\n </div>\n\n @if (hint(); as hint) {\n <div class=\"gds-context-menu-item_hint\">{{ hint }}</div>\n }\n </div>\n\n @if (variant() === 'switch') {\n <gds-switch class=\"\n gds-margin-block-auto\n gds-margin-inline-start-auto\n gds-min-width-fit-content\n \">\n <input\n type=\"checkbox\"\n [checked]=\"selected()\"\n (click)=\"$event.stopPropagation()\"\n />\n </gds-switch>\n }\n\n @if (hasChildren()) {\n <gds-icon\n class=\"\n gds-context-menu-item_endIcon\n gds-icon-size-xs\n \"\n key=\"line-chevron-right-stroke\"\n />\n }\n</div>\n", styles: [":host{--icon-color: var(--gds-palette-icon-primary)}:host .border{border-top:1px solid var(--gds-palette-border-modal);height:var(--gds-spacing-2xs)}:host .wrapper{--font: var(--gds-text-body-shorthand);--color: var(--gds-palette-text-default-primary);--background-color: var(--gds-palette-background-white);display:flex;align-items:center;padding:7px 11px;gap:var(--gds-spacing-xs);cursor:default;background:var(--background-color)}:host[variant=heading]>.wrapper{--font: var(--gds-text-bodyStrong-shorthand);--color: var(--gds-palette-text-primary-primary)}:host[variant=indent]>.wrapper{padding-left:40px}:host[variant=double-indent]>.wrapper{padding-left:68px}:host[compact]>.wrapper{padding:3px 11px}:host:focus-visible>.wrapper{outline:none;--background-color: var(--gds-palette-background-hover)}:host:focus-visible{outline:none;--background-color: var(--gds-palette-background-hover)}:host[clickable]>.wrapper{cursor:pointer}:host[clickable]>.wrapper:hover{--background-color: var(--gds-palette-background-hover)}:host .gds-context-menu-item_label{flex:1;font:var(--font);color:var(--color);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .gds-context-menu-item_endIcon{margin-left:auto;color:var(--icon-color)}:host .gds-context-menu-item_startIcon{color:var(--icon-color)}:host .gds-context-menu-item_hint{font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-default-secondary)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{--font: var(--gds-text-caption-shorthand);--color: var(--gds-palette-text-default-secondary);border-bottom:1px solid var(--gds-palette-border-modal);border-radius:0}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host>.wrapper{justify-content:center}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=default]>.wrapper,:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{padding-inline:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=check]>.wrapper{position:relative;right:var(--gds-spacing-sm)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=indent]>.wrapper{padding-left:0}\n"] }]
4803
+ }, template: "@if (border()) {\n <div class=\"border\"></div>\n}\n<div class=\"\n gds-radius-sm\n wrapper\n\">\n @if (variantIcon(); as variantIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-2xs\n \"\n [key]=\"variantIcon\"\n />\n }\n\n @if (startIcon(); as startIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-xs\n \"\n [key]=\"startIcon\"\n />\n }\n\n <div\n class=\"\n gds-align-items-start\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n gds-justify-content-center\n gds-min-width-0\n \"\n >\n <div\n class=\"\n gds-context-menu-item_label\n gds-truncate\n gds-width-100-parent\n \"\n [class]=\"labelClass()\"\n [tp]=\"label()\"\n [tpOnlyTextOverflow]=\"true\"\n [tpVariation]=\"tooltipVariation()\"\n >\n {{ label() }}\n </div>\n\n @if (hint(); as hint) {\n <div class=\"gds-context-menu-item_hint\">{{ hint }}</div>\n }\n </div>\n\n @if (variant() === 'switch') {\n <gds-switch class=\"\n gds-margin-block-auto\n gds-margin-inline-start-auto\n gds-min-width-fit-content\n \">\n <input\n type=\"checkbox\"\n [checked]=\"selected()\"\n (click)=\"$event.stopPropagation()\"\n />\n </gds-switch>\n }\n\n @if (hasChildren()) {\n <gds-icon\n class=\"\n gds-context-menu-item_endIcon\n gds-icon-size-xs\n \"\n key=\"line-chevron-right-stroke\"\n />\n }\n</div>\n", styles: ["@layer design-system{:host{--icon-color: var(--gds-palette-icon-primary)}:host .border{border-top:1px solid var(--gds-palette-border-modal);height:var(--gds-spacing-2xs)}:host .wrapper{--font: var(--gds-text-body-shorthand);--color: var(--gds-palette-text-default-primary);--background-color: var(--gds-palette-background-white);display:flex;align-items:center;padding:7px 11px;gap:var(--gds-spacing-xs);cursor:default;background:var(--background-color)}:host[variant=heading]>.wrapper{--font: var(--gds-text-bodyStrong-shorthand);--color: var(--gds-palette-text-primary-primary)}:host[variant=indent]>.wrapper{padding-left:40px}:host[variant=double-indent]>.wrapper{padding-left:68px}:host[compact]>.wrapper{padding:3px 11px}:host:focus-visible>.wrapper{outline:none;--background-color: var(--gds-palette-background-hover)}:host:focus-visible{outline:none;--background-color: var(--gds-palette-background-hover)}:host[clickable]>.wrapper{cursor:pointer}:host[clickable]>.wrapper:hover{--background-color: var(--gds-palette-background-hover)}:host .gds-context-menu-item_label{flex:1;font:var(--font);color:var(--color);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .gds-context-menu-item_endIcon{margin-left:auto;color:var(--icon-color)}:host .gds-context-menu-item_startIcon{color:var(--icon-color)}:host .gds-context-menu-item_hint{font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-default-secondary)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{--font: var(--gds-text-caption-shorthand);--color: var(--gds-palette-text-default-secondary);border-bottom:1px solid var(--gds-palette-border-modal);border-radius:0}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host>.wrapper{justify-content:center}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=default]>.wrapper,:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{padding-inline:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=check]>.wrapper{position:relative;right:var(--gds-spacing-sm)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=indent]>.wrapper{padding-left:0}}\n"] }]
4675
4804
  }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], nestedMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "nestedMenu", required: false }] }] } });
4676
4805
 
4677
4806
  class GdsContextMenuHeadingComponent extends GdsContextMenuBaseDirective {
4678
4807
  variant = signal(GdsContextMenuItemVariantEnum.Heading).asReadonly();
4679
4808
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsContextMenuHeadingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
4680
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsContextMenuHeadingComponent, isStandalone: true, selector: "gds-context-menu-heading", usesInheritance: true, ngImport: i0, template: "@if (border()) {\n <div class=\"border\"></div>\n}\n<div class=\"\n gds-radius-sm\n wrapper\n\">\n @if (variantIcon(); as variantIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-2xs\n \"\n [key]=\"variantIcon\"\n />\n }\n\n @if (startIcon(); as startIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-xs\n \"\n [key]=\"startIcon\"\n />\n }\n\n <div\n class=\"\n gds-align-items-start\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n gds-justify-content-center\n gds-min-width-0\n \"\n >\n <div\n class=\"\n gds-context-menu-item_label\n gds-truncate\n gds-width-100-parent\n \"\n [class]=\"labelClass()\"\n [tp]=\"label()\"\n [tpOnlyTextOverflow]=\"true\"\n [tpVariation]=\"tooltipVariation()\"\n >\n {{ label() }}\n </div>\n\n @if (hint(); as hint) {\n <div class=\"gds-context-menu-item_hint\">{{ hint }}</div>\n }\n </div>\n\n @if (variant() === 'switch') {\n <gds-switch class=\"\n gds-margin-block-auto\n gds-margin-inline-start-auto\n gds-min-width-fit-content\n \">\n <input\n type=\"checkbox\"\n [checked]=\"selected()\"\n (click)=\"$event.stopPropagation()\"\n />\n </gds-switch>\n }\n\n @if (hasChildren()) {\n <gds-icon\n class=\"\n gds-context-menu-item_endIcon\n gds-icon-size-xs\n \"\n key=\"line-chevron-right-stroke\"\n />\n }\n</div>\n", styles: [":host{--icon-color: var(--gds-palette-icon-primary)}:host .border{border-top:1px solid var(--gds-palette-border-modal);height:var(--gds-spacing-2xs)}:host .wrapper{--font: var(--gds-text-body-shorthand);--color: var(--gds-palette-text-default-primary);--background-color: var(--gds-palette-background-white);display:flex;align-items:center;padding:7px 11px;gap:var(--gds-spacing-xs);cursor:default;background:var(--background-color)}:host[variant=heading]>.wrapper{--font: var(--gds-text-bodyStrong-shorthand);--color: var(--gds-palette-text-primary-primary)}:host[variant=indent]>.wrapper{padding-left:40px}:host[variant=double-indent]>.wrapper{padding-left:68px}:host[compact]>.wrapper{padding:3px 11px}:host:focus-visible>.wrapper{outline:none;--background-color: var(--gds-palette-background-hover)}:host:focus-visible{outline:none;--background-color: var(--gds-palette-background-hover)}:host[clickable]>.wrapper{cursor:pointer}:host[clickable]>.wrapper:hover{--background-color: var(--gds-palette-background-hover)}:host .gds-context-menu-item_label{flex:1;font:var(--font);color:var(--color);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .gds-context-menu-item_endIcon{margin-left:auto;color:var(--icon-color)}:host .gds-context-menu-item_startIcon{color:var(--icon-color)}:host .gds-context-menu-item_hint{font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-default-secondary)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{--font: var(--gds-text-caption-shorthand);--color: var(--gds-palette-text-default-secondary);border-bottom:1px solid var(--gds-palette-border-modal);border-radius:0}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host>.wrapper{justify-content:center}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=default]>.wrapper,:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{padding-inline:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=check]>.wrapper{position:relative;right:var(--gds-spacing-sm)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=indent]>.wrapper{padding-left:0}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }, { kind: "component", type: GdsSwitchComponent, selector: "gds-switch" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4809
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsContextMenuHeadingComponent, isStandalone: true, selector: "gds-context-menu-heading", usesInheritance: true, ngImport: i0, template: "@if (border()) {\n <div class=\"border\"></div>\n}\n<div class=\"\n gds-radius-sm\n wrapper\n\">\n @if (variantIcon(); as variantIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-2xs\n \"\n [key]=\"variantIcon\"\n />\n }\n\n @if (startIcon(); as startIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-xs\n \"\n [key]=\"startIcon\"\n />\n }\n\n <div\n class=\"\n gds-align-items-start\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n gds-justify-content-center\n gds-min-width-0\n \"\n >\n <div\n class=\"\n gds-context-menu-item_label\n gds-truncate\n gds-width-100-parent\n \"\n [class]=\"labelClass()\"\n [tp]=\"label()\"\n [tpOnlyTextOverflow]=\"true\"\n [tpVariation]=\"tooltipVariation()\"\n >\n {{ label() }}\n </div>\n\n @if (hint(); as hint) {\n <div class=\"gds-context-menu-item_hint\">{{ hint }}</div>\n }\n </div>\n\n @if (variant() === 'switch') {\n <gds-switch class=\"\n gds-margin-block-auto\n gds-margin-inline-start-auto\n gds-min-width-fit-content\n \">\n <input\n type=\"checkbox\"\n [checked]=\"selected()\"\n (click)=\"$event.stopPropagation()\"\n />\n </gds-switch>\n }\n\n @if (hasChildren()) {\n <gds-icon\n class=\"\n gds-context-menu-item_endIcon\n gds-icon-size-xs\n \"\n key=\"line-chevron-right-stroke\"\n />\n }\n</div>\n", styles: ["@layer design-system{:host{--icon-color: var(--gds-palette-icon-primary)}:host .border{border-top:1px solid var(--gds-palette-border-modal);height:var(--gds-spacing-2xs)}:host .wrapper{--font: var(--gds-text-body-shorthand);--color: var(--gds-palette-text-default-primary);--background-color: var(--gds-palette-background-white);display:flex;align-items:center;padding:7px 11px;gap:var(--gds-spacing-xs);cursor:default;background:var(--background-color)}:host[variant=heading]>.wrapper{--font: var(--gds-text-bodyStrong-shorthand);--color: var(--gds-palette-text-primary-primary)}:host[variant=indent]>.wrapper{padding-left:40px}:host[variant=double-indent]>.wrapper{padding-left:68px}:host[compact]>.wrapper{padding:3px 11px}:host:focus-visible>.wrapper{outline:none;--background-color: var(--gds-palette-background-hover)}:host:focus-visible{outline:none;--background-color: var(--gds-palette-background-hover)}:host[clickable]>.wrapper{cursor:pointer}:host[clickable]>.wrapper:hover{--background-color: var(--gds-palette-background-hover)}:host .gds-context-menu-item_label{flex:1;font:var(--font);color:var(--color);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .gds-context-menu-item_endIcon{margin-left:auto;color:var(--icon-color)}:host .gds-context-menu-item_startIcon{color:var(--icon-color)}:host .gds-context-menu-item_hint{font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-default-secondary)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{--font: var(--gds-text-caption-shorthand);--color: var(--gds-palette-text-default-secondary);border-bottom:1px solid var(--gds-palette-border-modal);border-radius:0}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host>.wrapper{justify-content:center}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=default]>.wrapper,:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{padding-inline:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=check]>.wrapper{position:relative;right:var(--gds-spacing-sm)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=indent]>.wrapper{padding-left:0}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }, { kind: "component", type: GdsSwitchComponent, selector: "gds-switch" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4681
4810
  }
4682
4811
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsContextMenuHeadingComponent, decorators: [{
4683
4812
  type: Component,
4684
- args: [{ selector: 'gds-context-menu-heading', imports: [GdsIconComponent, TippyDirective, GdsSwitchComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (border()) {\n <div class=\"border\"></div>\n}\n<div class=\"\n gds-radius-sm\n wrapper\n\">\n @if (variantIcon(); as variantIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-2xs\n \"\n [key]=\"variantIcon\"\n />\n }\n\n @if (startIcon(); as startIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-xs\n \"\n [key]=\"startIcon\"\n />\n }\n\n <div\n class=\"\n gds-align-items-start\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n gds-justify-content-center\n gds-min-width-0\n \"\n >\n <div\n class=\"\n gds-context-menu-item_label\n gds-truncate\n gds-width-100-parent\n \"\n [class]=\"labelClass()\"\n [tp]=\"label()\"\n [tpOnlyTextOverflow]=\"true\"\n [tpVariation]=\"tooltipVariation()\"\n >\n {{ label() }}\n </div>\n\n @if (hint(); as hint) {\n <div class=\"gds-context-menu-item_hint\">{{ hint }}</div>\n }\n </div>\n\n @if (variant() === 'switch') {\n <gds-switch class=\"\n gds-margin-block-auto\n gds-margin-inline-start-auto\n gds-min-width-fit-content\n \">\n <input\n type=\"checkbox\"\n [checked]=\"selected()\"\n (click)=\"$event.stopPropagation()\"\n />\n </gds-switch>\n }\n\n @if (hasChildren()) {\n <gds-icon\n class=\"\n gds-context-menu-item_endIcon\n gds-icon-size-xs\n \"\n key=\"line-chevron-right-stroke\"\n />\n }\n</div>\n", styles: [":host{--icon-color: var(--gds-palette-icon-primary)}:host .border{border-top:1px solid var(--gds-palette-border-modal);height:var(--gds-spacing-2xs)}:host .wrapper{--font: var(--gds-text-body-shorthand);--color: var(--gds-palette-text-default-primary);--background-color: var(--gds-palette-background-white);display:flex;align-items:center;padding:7px 11px;gap:var(--gds-spacing-xs);cursor:default;background:var(--background-color)}:host[variant=heading]>.wrapper{--font: var(--gds-text-bodyStrong-shorthand);--color: var(--gds-palette-text-primary-primary)}:host[variant=indent]>.wrapper{padding-left:40px}:host[variant=double-indent]>.wrapper{padding-left:68px}:host[compact]>.wrapper{padding:3px 11px}:host:focus-visible>.wrapper{outline:none;--background-color: var(--gds-palette-background-hover)}:host:focus-visible{outline:none;--background-color: var(--gds-palette-background-hover)}:host[clickable]>.wrapper{cursor:pointer}:host[clickable]>.wrapper:hover{--background-color: var(--gds-palette-background-hover)}:host .gds-context-menu-item_label{flex:1;font:var(--font);color:var(--color);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .gds-context-menu-item_endIcon{margin-left:auto;color:var(--icon-color)}:host .gds-context-menu-item_startIcon{color:var(--icon-color)}:host .gds-context-menu-item_hint{font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-default-secondary)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{--font: var(--gds-text-caption-shorthand);--color: var(--gds-palette-text-default-secondary);border-bottom:1px solid var(--gds-palette-border-modal);border-radius:0}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host>.wrapper{justify-content:center}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=default]>.wrapper,:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{padding-inline:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=check]>.wrapper{position:relative;right:var(--gds-spacing-sm)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=indent]>.wrapper{padding-left:0}\n"] }]
4813
+ args: [{ selector: 'gds-context-menu-heading', imports: [GdsIconComponent, TippyDirective, GdsSwitchComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (border()) {\n <div class=\"border\"></div>\n}\n<div class=\"\n gds-radius-sm\n wrapper\n\">\n @if (variantIcon(); as variantIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-2xs\n \"\n [key]=\"variantIcon\"\n />\n }\n\n @if (startIcon(); as startIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-xs\n \"\n [key]=\"startIcon\"\n />\n }\n\n <div\n class=\"\n gds-align-items-start\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n gds-justify-content-center\n gds-min-width-0\n \"\n >\n <div\n class=\"\n gds-context-menu-item_label\n gds-truncate\n gds-width-100-parent\n \"\n [class]=\"labelClass()\"\n [tp]=\"label()\"\n [tpOnlyTextOverflow]=\"true\"\n [tpVariation]=\"tooltipVariation()\"\n >\n {{ label() }}\n </div>\n\n @if (hint(); as hint) {\n <div class=\"gds-context-menu-item_hint\">{{ hint }}</div>\n }\n </div>\n\n @if (variant() === 'switch') {\n <gds-switch class=\"\n gds-margin-block-auto\n gds-margin-inline-start-auto\n gds-min-width-fit-content\n \">\n <input\n type=\"checkbox\"\n [checked]=\"selected()\"\n (click)=\"$event.stopPropagation()\"\n />\n </gds-switch>\n }\n\n @if (hasChildren()) {\n <gds-icon\n class=\"\n gds-context-menu-item_endIcon\n gds-icon-size-xs\n \"\n key=\"line-chevron-right-stroke\"\n />\n }\n</div>\n", styles: ["@layer design-system{:host{--icon-color: var(--gds-palette-icon-primary)}:host .border{border-top:1px solid var(--gds-palette-border-modal);height:var(--gds-spacing-2xs)}:host .wrapper{--font: var(--gds-text-body-shorthand);--color: var(--gds-palette-text-default-primary);--background-color: var(--gds-palette-background-white);display:flex;align-items:center;padding:7px 11px;gap:var(--gds-spacing-xs);cursor:default;background:var(--background-color)}:host[variant=heading]>.wrapper{--font: var(--gds-text-bodyStrong-shorthand);--color: var(--gds-palette-text-primary-primary)}:host[variant=indent]>.wrapper{padding-left:40px}:host[variant=double-indent]>.wrapper{padding-left:68px}:host[compact]>.wrapper{padding:3px 11px}:host:focus-visible>.wrapper{outline:none;--background-color: var(--gds-palette-background-hover)}:host:focus-visible{outline:none;--background-color: var(--gds-palette-background-hover)}:host[clickable]>.wrapper{cursor:pointer}:host[clickable]>.wrapper:hover{--background-color: var(--gds-palette-background-hover)}:host .gds-context-menu-item_label{flex:1;font:var(--font);color:var(--color);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .gds-context-menu-item_endIcon{margin-left:auto;color:var(--icon-color)}:host .gds-context-menu-item_startIcon{color:var(--icon-color)}:host .gds-context-menu-item_hint{font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-default-secondary)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{--font: var(--gds-text-caption-shorthand);--color: var(--gds-palette-text-default-secondary);border-bottom:1px solid var(--gds-palette-border-modal);border-radius:0}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host>.wrapper{justify-content:center}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=default]>.wrapper,:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{padding-inline:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=check]>.wrapper{position:relative;right:var(--gds-spacing-sm)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=indent]>.wrapper{padding-left:0}}\n"] }]
4685
4814
  }] });
4686
4815
 
4687
4816
  class GdsContextMenuSwitchComponent extends GdsContextMenuBaseDirective {
@@ -4699,7 +4828,7 @@ class GdsContextMenuSwitchComponent extends GdsContextMenuBaseDirective {
4699
4828
  };
4700
4829
  }
4701
4830
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsContextMenuSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
4702
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsContextMenuSwitchComponent, isStandalone: true, selector: "gds-context-menu-switch", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, triggered: { classPropertyName: "triggered", publicName: "triggered", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", triggered: "triggeredChange" }, usesInheritance: true, hostDirectives: [{ directive: i1$1.CdkMenuItemCheckbox, inputs: ["cdkMenuItemChecked", "selected"], outputs: ["cdkMenuItemTriggered", "clicked"] }, { directive: i1$1.CdkMenuTrigger }], ngImport: i0, template: "@if (border()) {\n <div class=\"border\"></div>\n}\n<div class=\"\n gds-radius-sm\n wrapper\n\">\n @if (variantIcon(); as variantIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-2xs\n \"\n [key]=\"variantIcon\"\n />\n }\n\n @if (startIcon(); as startIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-xs\n \"\n [key]=\"startIcon\"\n />\n }\n\n <div\n class=\"\n gds-align-items-start\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n gds-justify-content-center\n gds-min-width-0\n \"\n >\n <div\n class=\"\n gds-context-menu-item_label\n gds-truncate\n gds-width-100-parent\n \"\n [class]=\"labelClass()\"\n [tp]=\"label()\"\n [tpOnlyTextOverflow]=\"true\"\n [tpVariation]=\"tooltipVariation()\"\n >\n {{ label() }}\n </div>\n\n @if (hint(); as hint) {\n <div class=\"gds-context-menu-item_hint\">{{ hint }}</div>\n }\n </div>\n\n @if (variant() === 'switch') {\n <gds-switch class=\"\n gds-margin-block-auto\n gds-margin-inline-start-auto\n gds-min-width-fit-content\n \">\n <input\n type=\"checkbox\"\n [checked]=\"selected()\"\n (click)=\"$event.stopPropagation()\"\n />\n </gds-switch>\n }\n\n @if (hasChildren()) {\n <gds-icon\n class=\"\n gds-context-menu-item_endIcon\n gds-icon-size-xs\n \"\n key=\"line-chevron-right-stroke\"\n />\n }\n</div>\n", styles: [":host{--icon-color: var(--gds-palette-icon-primary)}:host .border{border-top:1px solid var(--gds-palette-border-modal);height:var(--gds-spacing-2xs)}:host .wrapper{--font: var(--gds-text-body-shorthand);--color: var(--gds-palette-text-default-primary);--background-color: var(--gds-palette-background-white);display:flex;align-items:center;padding:7px 11px;gap:var(--gds-spacing-xs);cursor:default;background:var(--background-color)}:host[variant=heading]>.wrapper{--font: var(--gds-text-bodyStrong-shorthand);--color: var(--gds-palette-text-primary-primary)}:host[variant=indent]>.wrapper{padding-left:40px}:host[variant=double-indent]>.wrapper{padding-left:68px}:host[compact]>.wrapper{padding:3px 11px}:host:focus-visible>.wrapper{outline:none;--background-color: var(--gds-palette-background-hover)}:host:focus-visible{outline:none;--background-color: var(--gds-palette-background-hover)}:host[clickable]>.wrapper{cursor:pointer}:host[clickable]>.wrapper:hover{--background-color: var(--gds-palette-background-hover)}:host .gds-context-menu-item_label{flex:1;font:var(--font);color:var(--color);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .gds-context-menu-item_endIcon{margin-left:auto;color:var(--icon-color)}:host .gds-context-menu-item_startIcon{color:var(--icon-color)}:host .gds-context-menu-item_hint{font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-default-secondary)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{--font: var(--gds-text-caption-shorthand);--color: var(--gds-palette-text-default-secondary);border-bottom:1px solid var(--gds-palette-border-modal);border-radius:0}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host>.wrapper{justify-content:center}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=default]>.wrapper,:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{padding-inline:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=check]>.wrapper{position:relative;right:var(--gds-spacing-sm)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=indent]>.wrapper{padding-left:0}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }, { kind: "component", type: GdsSwitchComponent, selector: "gds-switch" }, { kind: "directive", type: GdsNativeInputDirective, selector: "input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4831
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsContextMenuSwitchComponent, isStandalone: true, selector: "gds-context-menu-switch", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, triggered: { classPropertyName: "triggered", publicName: "triggered", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", triggered: "triggeredChange" }, usesInheritance: true, hostDirectives: [{ directive: i1$1.CdkMenuItemCheckbox, inputs: ["cdkMenuItemChecked", "selected"], outputs: ["cdkMenuItemTriggered", "clicked"] }, { directive: i1$1.CdkMenuTrigger }], ngImport: i0, template: "@if (border()) {\n <div class=\"border\"></div>\n}\n<div class=\"\n gds-radius-sm\n wrapper\n\">\n @if (variantIcon(); as variantIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-2xs\n \"\n [key]=\"variantIcon\"\n />\n }\n\n @if (startIcon(); as startIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-xs\n \"\n [key]=\"startIcon\"\n />\n }\n\n <div\n class=\"\n gds-align-items-start\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n gds-justify-content-center\n gds-min-width-0\n \"\n >\n <div\n class=\"\n gds-context-menu-item_label\n gds-truncate\n gds-width-100-parent\n \"\n [class]=\"labelClass()\"\n [tp]=\"label()\"\n [tpOnlyTextOverflow]=\"true\"\n [tpVariation]=\"tooltipVariation()\"\n >\n {{ label() }}\n </div>\n\n @if (hint(); as hint) {\n <div class=\"gds-context-menu-item_hint\">{{ hint }}</div>\n }\n </div>\n\n @if (variant() === 'switch') {\n <gds-switch class=\"\n gds-margin-block-auto\n gds-margin-inline-start-auto\n gds-min-width-fit-content\n \">\n <input\n type=\"checkbox\"\n [checked]=\"selected()\"\n (click)=\"$event.stopPropagation()\"\n />\n </gds-switch>\n }\n\n @if (hasChildren()) {\n <gds-icon\n class=\"\n gds-context-menu-item_endIcon\n gds-icon-size-xs\n \"\n key=\"line-chevron-right-stroke\"\n />\n }\n</div>\n", styles: ["@layer design-system{:host{--icon-color: var(--gds-palette-icon-primary)}:host .border{border-top:1px solid var(--gds-palette-border-modal);height:var(--gds-spacing-2xs)}:host .wrapper{--font: var(--gds-text-body-shorthand);--color: var(--gds-palette-text-default-primary);--background-color: var(--gds-palette-background-white);display:flex;align-items:center;padding:7px 11px;gap:var(--gds-spacing-xs);cursor:default;background:var(--background-color)}:host[variant=heading]>.wrapper{--font: var(--gds-text-bodyStrong-shorthand);--color: var(--gds-palette-text-primary-primary)}:host[variant=indent]>.wrapper{padding-left:40px}:host[variant=double-indent]>.wrapper{padding-left:68px}:host[compact]>.wrapper{padding:3px 11px}:host:focus-visible>.wrapper{outline:none;--background-color: var(--gds-palette-background-hover)}:host:focus-visible{outline:none;--background-color: var(--gds-palette-background-hover)}:host[clickable]>.wrapper{cursor:pointer}:host[clickable]>.wrapper:hover{--background-color: var(--gds-palette-background-hover)}:host .gds-context-menu-item_label{flex:1;font:var(--font);color:var(--color);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .gds-context-menu-item_endIcon{margin-left:auto;color:var(--icon-color)}:host .gds-context-menu-item_startIcon{color:var(--icon-color)}:host .gds-context-menu-item_hint{font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-default-secondary)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{--font: var(--gds-text-caption-shorthand);--color: var(--gds-palette-text-default-secondary);border-bottom:1px solid var(--gds-palette-border-modal);border-radius:0}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host>.wrapper{justify-content:center}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=default]>.wrapper,:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{padding-inline:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=check]>.wrapper{position:relative;right:var(--gds-spacing-sm)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=indent]>.wrapper{padding-left:0}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }, { kind: "component", type: GdsSwitchComponent, selector: "gds-switch" }, { kind: "directive", type: GdsNativeInputDirective, selector: "input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4703
4832
  }
4704
4833
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsContextMenuSwitchComponent, decorators: [{
4705
4834
  type: Component,
@@ -4710,7 +4839,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
4710
4839
  outputs: ['cdkMenuItemTriggered: clicked']
4711
4840
  },
4712
4841
  { directive: CdkMenuTrigger }
4713
- ], template: "@if (border()) {\n <div class=\"border\"></div>\n}\n<div class=\"\n gds-radius-sm\n wrapper\n\">\n @if (variantIcon(); as variantIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-2xs\n \"\n [key]=\"variantIcon\"\n />\n }\n\n @if (startIcon(); as startIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-xs\n \"\n [key]=\"startIcon\"\n />\n }\n\n <div\n class=\"\n gds-align-items-start\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n gds-justify-content-center\n gds-min-width-0\n \"\n >\n <div\n class=\"\n gds-context-menu-item_label\n gds-truncate\n gds-width-100-parent\n \"\n [class]=\"labelClass()\"\n [tp]=\"label()\"\n [tpOnlyTextOverflow]=\"true\"\n [tpVariation]=\"tooltipVariation()\"\n >\n {{ label() }}\n </div>\n\n @if (hint(); as hint) {\n <div class=\"gds-context-menu-item_hint\">{{ hint }}</div>\n }\n </div>\n\n @if (variant() === 'switch') {\n <gds-switch class=\"\n gds-margin-block-auto\n gds-margin-inline-start-auto\n gds-min-width-fit-content\n \">\n <input\n type=\"checkbox\"\n [checked]=\"selected()\"\n (click)=\"$event.stopPropagation()\"\n />\n </gds-switch>\n }\n\n @if (hasChildren()) {\n <gds-icon\n class=\"\n gds-context-menu-item_endIcon\n gds-icon-size-xs\n \"\n key=\"line-chevron-right-stroke\"\n />\n }\n</div>\n", styles: [":host{--icon-color: var(--gds-palette-icon-primary)}:host .border{border-top:1px solid var(--gds-palette-border-modal);height:var(--gds-spacing-2xs)}:host .wrapper{--font: var(--gds-text-body-shorthand);--color: var(--gds-palette-text-default-primary);--background-color: var(--gds-palette-background-white);display:flex;align-items:center;padding:7px 11px;gap:var(--gds-spacing-xs);cursor:default;background:var(--background-color)}:host[variant=heading]>.wrapper{--font: var(--gds-text-bodyStrong-shorthand);--color: var(--gds-palette-text-primary-primary)}:host[variant=indent]>.wrapper{padding-left:40px}:host[variant=double-indent]>.wrapper{padding-left:68px}:host[compact]>.wrapper{padding:3px 11px}:host:focus-visible>.wrapper{outline:none;--background-color: var(--gds-palette-background-hover)}:host:focus-visible{outline:none;--background-color: var(--gds-palette-background-hover)}:host[clickable]>.wrapper{cursor:pointer}:host[clickable]>.wrapper:hover{--background-color: var(--gds-palette-background-hover)}:host .gds-context-menu-item_label{flex:1;font:var(--font);color:var(--color);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .gds-context-menu-item_endIcon{margin-left:auto;color:var(--icon-color)}:host .gds-context-menu-item_startIcon{color:var(--icon-color)}:host .gds-context-menu-item_hint{font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-default-secondary)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{--font: var(--gds-text-caption-shorthand);--color: var(--gds-palette-text-default-secondary);border-bottom:1px solid var(--gds-palette-border-modal);border-radius:0}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host>.wrapper{justify-content:center}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=default]>.wrapper,:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{padding-inline:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=check]>.wrapper{position:relative;right:var(--gds-spacing-sm)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=indent]>.wrapper{padding-left:0}\n"] }]
4842
+ ], template: "@if (border()) {\n <div class=\"border\"></div>\n}\n<div class=\"\n gds-radius-sm\n wrapper\n\">\n @if (variantIcon(); as variantIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-2xs\n \"\n [key]=\"variantIcon\"\n />\n }\n\n @if (startIcon(); as startIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-xs\n \"\n [key]=\"startIcon\"\n />\n }\n\n <div\n class=\"\n gds-align-items-start\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n gds-justify-content-center\n gds-min-width-0\n \"\n >\n <div\n class=\"\n gds-context-menu-item_label\n gds-truncate\n gds-width-100-parent\n \"\n [class]=\"labelClass()\"\n [tp]=\"label()\"\n [tpOnlyTextOverflow]=\"true\"\n [tpVariation]=\"tooltipVariation()\"\n >\n {{ label() }}\n </div>\n\n @if (hint(); as hint) {\n <div class=\"gds-context-menu-item_hint\">{{ hint }}</div>\n }\n </div>\n\n @if (variant() === 'switch') {\n <gds-switch class=\"\n gds-margin-block-auto\n gds-margin-inline-start-auto\n gds-min-width-fit-content\n \">\n <input\n type=\"checkbox\"\n [checked]=\"selected()\"\n (click)=\"$event.stopPropagation()\"\n />\n </gds-switch>\n }\n\n @if (hasChildren()) {\n <gds-icon\n class=\"\n gds-context-menu-item_endIcon\n gds-icon-size-xs\n \"\n key=\"line-chevron-right-stroke\"\n />\n }\n</div>\n", styles: ["@layer design-system{:host{--icon-color: var(--gds-palette-icon-primary)}:host .border{border-top:1px solid var(--gds-palette-border-modal);height:var(--gds-spacing-2xs)}:host .wrapper{--font: var(--gds-text-body-shorthand);--color: var(--gds-palette-text-default-primary);--background-color: var(--gds-palette-background-white);display:flex;align-items:center;padding:7px 11px;gap:var(--gds-spacing-xs);cursor:default;background:var(--background-color)}:host[variant=heading]>.wrapper{--font: var(--gds-text-bodyStrong-shorthand);--color: var(--gds-palette-text-primary-primary)}:host[variant=indent]>.wrapper{padding-left:40px}:host[variant=double-indent]>.wrapper{padding-left:68px}:host[compact]>.wrapper{padding:3px 11px}:host:focus-visible>.wrapper{outline:none;--background-color: var(--gds-palette-background-hover)}:host:focus-visible{outline:none;--background-color: var(--gds-palette-background-hover)}:host[clickable]>.wrapper{cursor:pointer}:host[clickable]>.wrapper:hover{--background-color: var(--gds-palette-background-hover)}:host .gds-context-menu-item_label{flex:1;font:var(--font);color:var(--color);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .gds-context-menu-item_endIcon{margin-left:auto;color:var(--icon-color)}:host .gds-context-menu-item_startIcon{color:var(--icon-color)}:host .gds-context-menu-item_hint{font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-default-secondary)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{--font: var(--gds-text-caption-shorthand);--color: var(--gds-palette-text-default-secondary);border-bottom:1px solid var(--gds-palette-border-modal);border-radius:0}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host>.wrapper{justify-content:center}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=default]>.wrapper,:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{padding-inline:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=check]>.wrapper{position:relative;right:var(--gds-spacing-sm)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=indent]>.wrapper{padding-left:0}}\n"] }]
4714
4843
  }], ctorParameters: () => [], propDecorators: { selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], triggered: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggered", required: false }] }, { type: i0.Output, args: ["triggeredChange"] }] } });
4715
4844
 
4716
4845
  class GdsDialogComponent {
@@ -4776,7 +4905,7 @@ class GdsDialogComponent {
4776
4905
  this.canceled.emit();
4777
4906
  }
4778
4907
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
4779
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsDialogComponent, isStandalone: true, selector: "dialog[gds-dialog]", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, headerLabelAlignment: { classPropertyName: "headerLabelAlignment", publicName: "headerLabelAlignment", isSignal: true, isRequired: false, transformFunction: null }, showFooterBorder: { classPropertyName: "showFooterBorder", publicName: "showFooterBorder", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, suppressDismissBtn: { classPropertyName: "suppressDismissBtn", publicName: "suppressDismissBtn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", canceled: "canceled" }, host: { listeners: { "close": "onClose($event)", "cancel": "onCancel($event)", "click": "dialogClicked($event)" }, properties: { "class.gds-mobile-radius-bottom-right-lg": "type() !== \"drawer-bottom\"", "class.gds-mobile-radius-bottom-left-lg": "type() !== \"drawer-bottom\"", "class.gds-radius-top-right-2xl": "type() === \"drawer-bottom\"", "class.gds-radius-top-left-2xl": "type() === \"drawer-bottom\"", "class.gds-radius-bottom-right-0": "type() === \"drawer-bottom\" || type() === \"slide-right\"", "class.gds-radius-bottom-left-0": "type() === \"drawer-bottom\" || type() === \"slide-left\"", "class.gds-slide-top": "type() === \"drawer-top\"", "class.gds-slide-bottom": "type() === \"drawer-bottom\"", "class.gds-slide-left": "type() === \"slide-left\"", "class.gds-radius-top-left-0": "type() === \"slide-left\"", "class.gds-slide-right": "type() === \"slide-right\"", "class.gds-radius-top-right-0": "type() === \"slide-right\"", "attr.type": "type()", "attr.background": "background()", "attr.header-label-alignment": "headerLabelAlignment()" }, classAttribute: "gds-radius-md gds-mobile-radius-top-right-lg gds-mobile-radius-top-left-lg" }, queries: [{ propertyName: "layoutTmpl", first: true, predicate: ["layoutTmpl"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "closeBtn", first: true, predicate: ["closeBtn"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1$2.CdkTrapFocus }], ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"layoutTmpl() ?? defaultLayoutTmpl\" />\n\n<ng-template #defaultLayoutTmpl>\n <div\n class=\"\n gds-dialog_container\n gds-display-flex\n gds-flex-column\n gds-flex-grow-1\n gds-flex-shrink-1\n gds-min-height-0\n gds-width-100-parent\n \"\n >\n <header class=\"\n gds-align-items-center\n gds-display-grid\n gds-text-primary-primary\n gds-text-subtitle\n header\n \">\n <div class=\"\n gds-min-width-0\n header-label\n \">\n <ng-content select=\"[header-label]\" />\n </div>\n <div\n class=\"\n gds-align-items-center\n gds-align-self-start\n gds-display-inline-flex\n gds-gap-xs\n gds-icon-primary\n gds-margin-inline-start-auto\n header-actions\n \"\n >\n <ng-content select=\"[header-actions]\" />\n @if (closeObserved) {\n <button\n gds-icon-button\n #closeBtn\n size=\"medium\"\n class=\"gds-background-none\"\n (click)=\"onClose($event)\"\n (keydown.enter)=\"onClose($event)\"\n >\n <gds-icon\n key=\"titlebar-dismiss\"\n class=\"\n gds-icon-size-2xs\n gds-mobile-icon-size-sm\n \"\n />\n </button>\n }\n </div>\n </header>\n <div\n class=\"\n gds-display-flex\n gds-flex-column\n gds-flex-grow-1\n gds-flex-shrink-1\n gds-min-height-0\n gds-min-width-0\n gds-text-body\n gds-text-primary\n \"\n >\n <ng-content />\n </div>\n <footer\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-gap-xs\n \"\n [attr.bordered]=\"borderedFooter\"\n [ngClass]=\"{ 'gds-display-none': !footerSecondary.hasChildNodes() && !footerPrimary.hasChildNodes() }\"\n >\n <span\n class=\"\n gds-display-inline-flex\n gds-flex-grow-1\n gds-flex-wrap\n gds-gap-2xs\n \"\n [ngClass]=\"{ 'gds-display-none': !footerSecondary.hasChildNodes() }\"\n #footerSecondary\n >\n <ng-content select=\"[footer-actions-secondary]\" />\n </span>\n <span\n class=\"\n gds-display-inline-flex\n gds-flex-grow-1\n gds-flex-wrap\n gds-gap-2xs\n gds-justify-content-end\n \"\n [ngClass]=\"{ 'gds-display-none': !footerPrimary.hasChildNodes() }\"\n #footerPrimary\n >\n <ng-content select=\"[footer-actions-primary]\" />\n </span>\n </footer>\n </div>\n</ng-template>\n", styles: [":host{--gds-dialog-base-padding: var(--gds-spacing-sm);--gds-dialog-base-gap: var(--gds-spacing-sm);position:relative;width:65vw;max-width:452px;height:fit-content;max-height:100vh;overflow:visible;padding:0;border:1px solid var(--gds-palette-border-modal);box-shadow:0 32px 64px #00000030,0 2px 21px #00000026;-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);background-color:var(--gds-dialog-background-color);outline:none}:host[open]{display:flex}:host[open][type=slide-left]{margin-left:var(--gds-spacing-0)}:host[open][type=drawer-bottom]{position:fixed;bottom:0;max-width:none;width:100%;box-shadow:none;margin:auto 0 0}:host[background=base]{--gds-dialog-background-color: var(--gds-palette-background-base)}:host[background=white]{--gds-dialog-background-color: var(--gds-palette-background-white)}:host .gds-dialog_container{gap:var(--gds-dialog-base-gap);padding:var(--gds-dialog-base-padding)}:host[header-label-alignment=left] .header{grid-template-columns:0fr auto 1fr}:host[header-label-alignment=center] .header{grid-template-columns:1fr auto 1fr}:host .header-label{grid-column:2}:host .header-actions{grid-column:3}:host .gds-dialog_header-actions:only-child{margin-inline-start:auto}:host [bordered]{border-block-start:var(--gds-border-default-shorthand);padding-top:var(--gds-dialog-base-padding)}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4908
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsDialogComponent, isStandalone: true, selector: "dialog[gds-dialog]", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, headerLabelAlignment: { classPropertyName: "headerLabelAlignment", publicName: "headerLabelAlignment", isSignal: true, isRequired: false, transformFunction: null }, showFooterBorder: { classPropertyName: "showFooterBorder", publicName: "showFooterBorder", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, suppressDismissBtn: { classPropertyName: "suppressDismissBtn", publicName: "suppressDismissBtn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", canceled: "canceled" }, host: { listeners: { "close": "onClose($event)", "cancel": "onCancel($event)", "click": "dialogClicked($event)" }, properties: { "class.gds-mobile-radius-bottom-right-lg": "type() !== \"drawer-bottom\"", "class.gds-mobile-radius-bottom-left-lg": "type() !== \"drawer-bottom\"", "class.gds-radius-top-right-2xl": "type() === \"drawer-bottom\"", "class.gds-radius-top-left-2xl": "type() === \"drawer-bottom\"", "class.gds-radius-bottom-right-0": "type() === \"drawer-bottom\" || type() === \"slide-right\"", "class.gds-radius-bottom-left-0": "type() === \"drawer-bottom\" || type() === \"slide-left\"", "class.gds-slide-top": "type() === \"drawer-top\"", "class.gds-slide-bottom": "type() === \"drawer-bottom\"", "class.gds-slide-left": "type() === \"slide-left\"", "class.gds-radius-top-left-0": "type() === \"slide-left\"", "class.gds-slide-right": "type() === \"slide-right\"", "class.gds-radius-top-right-0": "type() === \"slide-right\"", "attr.type": "type()", "attr.background": "background()", "attr.header-label-alignment": "headerLabelAlignment()" }, classAttribute: "gds-radius-md gds-mobile-radius-top-right-lg gds-mobile-radius-top-left-lg" }, queries: [{ propertyName: "layoutTmpl", first: true, predicate: ["layoutTmpl"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "closeBtn", first: true, predicate: ["closeBtn"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1$2.CdkTrapFocus }], ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"layoutTmpl() ?? defaultLayoutTmpl\" />\n\n<ng-template #defaultLayoutTmpl>\n <div\n class=\"\n gds-dialog_container\n gds-display-flex\n gds-flex-column\n gds-flex-grow-1\n gds-flex-shrink-1\n gds-min-height-0\n gds-width-100-parent\n \"\n >\n <header class=\"\n gds-align-items-center\n gds-display-grid\n gds-text-primary-primary\n gds-text-subtitle\n header\n \">\n <div class=\"\n gds-min-width-0\n header-label\n \">\n <ng-content select=\"[header-label]\" />\n </div>\n <div\n class=\"\n gds-align-items-center\n gds-align-self-start\n gds-display-inline-flex\n gds-gap-xs\n gds-icon-primary\n gds-margin-inline-start-auto\n header-actions\n \"\n >\n <ng-content select=\"[header-actions]\" />\n @if (closeObserved) {\n <button\n gds-icon-button\n #closeBtn\n size=\"medium\"\n class=\"gds-background-none\"\n (click)=\"onClose($event)\"\n (keydown.enter)=\"onClose($event)\"\n >\n <gds-icon\n key=\"titlebar-dismiss\"\n class=\"\n gds-icon-size-2xs\n gds-mobile-icon-size-sm\n \"\n />\n </button>\n }\n </div>\n </header>\n <div\n class=\"\n gds-display-flex\n gds-flex-column\n gds-flex-grow-1\n gds-flex-shrink-1\n gds-min-height-0\n gds-min-width-0\n gds-text-body\n gds-text-primary\n \"\n >\n <ng-content />\n </div>\n <footer\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-gap-xs\n \"\n [attr.bordered]=\"borderedFooter\"\n [ngClass]=\"{ 'gds-display-none': !footerSecondary.hasChildNodes() && !footerPrimary.hasChildNodes() }\"\n >\n <span\n class=\"\n gds-display-inline-flex\n gds-flex-grow-1\n gds-flex-wrap\n gds-gap-2xs\n \"\n [ngClass]=\"{ 'gds-display-none': !footerSecondary.hasChildNodes() }\"\n #footerSecondary\n >\n <ng-content select=\"[footer-actions-secondary]\" />\n </span>\n <span\n class=\"\n gds-display-inline-flex\n gds-flex-grow-1\n gds-flex-wrap\n gds-gap-2xs\n gds-justify-content-end\n \"\n [ngClass]=\"{ 'gds-display-none': !footerPrimary.hasChildNodes() }\"\n #footerPrimary\n >\n <ng-content select=\"[footer-actions-primary]\" />\n </span>\n </footer>\n </div>\n</ng-template>\n", styles: ["@layer design-system{:host{--gds-dialog-base-padding: var(--gds-spacing-sm);--gds-dialog-base-gap: var(--gds-spacing-sm);position:relative;width:65vw;max-width:452px;height:fit-content;max-height:100vh;overflow:visible;padding:0;border:1px solid var(--gds-palette-border-modal);box-shadow:0 32px 64px #00000030,0 2px 21px #00000026;-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);background-color:var(--gds-dialog-background-color);outline:none}:host[open]{display:flex}:host[open][type=slide-left]{margin-left:var(--gds-spacing-0)}:host[open][type=drawer-bottom]{position:fixed;bottom:0;max-width:none;width:100%;box-shadow:none;margin:auto 0 0}:host[background=base]{--gds-dialog-background-color: var(--gds-palette-background-base)}:host[background=white]{--gds-dialog-background-color: var(--gds-palette-background-white)}:host .gds-dialog_container{gap:var(--gds-dialog-base-gap);padding:var(--gds-dialog-base-padding)}:host[header-label-alignment=left] .header{grid-template-columns:0fr auto 1fr}:host[header-label-alignment=center] .header{grid-template-columns:1fr auto 1fr}:host .header-label{grid-column:2}:host .header-actions{grid-column:3}:host .gds-dialog_header-actions:only-child{margin-inline-start:auto}:host [bordered]{border-block-start:var(--gds-border-default-shorthand);padding-top:var(--gds-dialog-base-padding)}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4780
4909
  }
4781
4910
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsDialogComponent, decorators: [{
4782
4911
  type: Component,
@@ -4800,7 +4929,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
4800
4929
  '(close)': 'onClose($event)',
4801
4930
  '(cancel)': 'onCancel($event)',
4802
4931
  '(click)': 'dialogClicked($event)'
4803
- }, template: "<ng-container *ngTemplateOutlet=\"layoutTmpl() ?? defaultLayoutTmpl\" />\n\n<ng-template #defaultLayoutTmpl>\n <div\n class=\"\n gds-dialog_container\n gds-display-flex\n gds-flex-column\n gds-flex-grow-1\n gds-flex-shrink-1\n gds-min-height-0\n gds-width-100-parent\n \"\n >\n <header class=\"\n gds-align-items-center\n gds-display-grid\n gds-text-primary-primary\n gds-text-subtitle\n header\n \">\n <div class=\"\n gds-min-width-0\n header-label\n \">\n <ng-content select=\"[header-label]\" />\n </div>\n <div\n class=\"\n gds-align-items-center\n gds-align-self-start\n gds-display-inline-flex\n gds-gap-xs\n gds-icon-primary\n gds-margin-inline-start-auto\n header-actions\n \"\n >\n <ng-content select=\"[header-actions]\" />\n @if (closeObserved) {\n <button\n gds-icon-button\n #closeBtn\n size=\"medium\"\n class=\"gds-background-none\"\n (click)=\"onClose($event)\"\n (keydown.enter)=\"onClose($event)\"\n >\n <gds-icon\n key=\"titlebar-dismiss\"\n class=\"\n gds-icon-size-2xs\n gds-mobile-icon-size-sm\n \"\n />\n </button>\n }\n </div>\n </header>\n <div\n class=\"\n gds-display-flex\n gds-flex-column\n gds-flex-grow-1\n gds-flex-shrink-1\n gds-min-height-0\n gds-min-width-0\n gds-text-body\n gds-text-primary\n \"\n >\n <ng-content />\n </div>\n <footer\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-gap-xs\n \"\n [attr.bordered]=\"borderedFooter\"\n [ngClass]=\"{ 'gds-display-none': !footerSecondary.hasChildNodes() && !footerPrimary.hasChildNodes() }\"\n >\n <span\n class=\"\n gds-display-inline-flex\n gds-flex-grow-1\n gds-flex-wrap\n gds-gap-2xs\n \"\n [ngClass]=\"{ 'gds-display-none': !footerSecondary.hasChildNodes() }\"\n #footerSecondary\n >\n <ng-content select=\"[footer-actions-secondary]\" />\n </span>\n <span\n class=\"\n gds-display-inline-flex\n gds-flex-grow-1\n gds-flex-wrap\n gds-gap-2xs\n gds-justify-content-end\n \"\n [ngClass]=\"{ 'gds-display-none': !footerPrimary.hasChildNodes() }\"\n #footerPrimary\n >\n <ng-content select=\"[footer-actions-primary]\" />\n </span>\n </footer>\n </div>\n</ng-template>\n", styles: [":host{--gds-dialog-base-padding: var(--gds-spacing-sm);--gds-dialog-base-gap: var(--gds-spacing-sm);position:relative;width:65vw;max-width:452px;height:fit-content;max-height:100vh;overflow:visible;padding:0;border:1px solid var(--gds-palette-border-modal);box-shadow:0 32px 64px #00000030,0 2px 21px #00000026;-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);background-color:var(--gds-dialog-background-color);outline:none}:host[open]{display:flex}:host[open][type=slide-left]{margin-left:var(--gds-spacing-0)}:host[open][type=drawer-bottom]{position:fixed;bottom:0;max-width:none;width:100%;box-shadow:none;margin:auto 0 0}:host[background=base]{--gds-dialog-background-color: var(--gds-palette-background-base)}:host[background=white]{--gds-dialog-background-color: var(--gds-palette-background-white)}:host .gds-dialog_container{gap:var(--gds-dialog-base-gap);padding:var(--gds-dialog-base-padding)}:host[header-label-alignment=left] .header{grid-template-columns:0fr auto 1fr}:host[header-label-alignment=center] .header{grid-template-columns:1fr auto 1fr}:host .header-label{grid-column:2}:host .header-actions{grid-column:3}:host .gds-dialog_header-actions:only-child{margin-inline-start:auto}:host [bordered]{border-block-start:var(--gds-border-default-shorthand);padding-top:var(--gds-dialog-base-padding)}\n"] }]
4932
+ }, template: "<ng-container *ngTemplateOutlet=\"layoutTmpl() ?? defaultLayoutTmpl\" />\n\n<ng-template #defaultLayoutTmpl>\n <div\n class=\"\n gds-dialog_container\n gds-display-flex\n gds-flex-column\n gds-flex-grow-1\n gds-flex-shrink-1\n gds-min-height-0\n gds-width-100-parent\n \"\n >\n <header class=\"\n gds-align-items-center\n gds-display-grid\n gds-text-primary-primary\n gds-text-subtitle\n header\n \">\n <div class=\"\n gds-min-width-0\n header-label\n \">\n <ng-content select=\"[header-label]\" />\n </div>\n <div\n class=\"\n gds-align-items-center\n gds-align-self-start\n gds-display-inline-flex\n gds-gap-xs\n gds-icon-primary\n gds-margin-inline-start-auto\n header-actions\n \"\n >\n <ng-content select=\"[header-actions]\" />\n @if (closeObserved) {\n <button\n gds-icon-button\n #closeBtn\n size=\"medium\"\n class=\"gds-background-none\"\n (click)=\"onClose($event)\"\n (keydown.enter)=\"onClose($event)\"\n >\n <gds-icon\n key=\"titlebar-dismiss\"\n class=\"\n gds-icon-size-2xs\n gds-mobile-icon-size-sm\n \"\n />\n </button>\n }\n </div>\n </header>\n <div\n class=\"\n gds-display-flex\n gds-flex-column\n gds-flex-grow-1\n gds-flex-shrink-1\n gds-min-height-0\n gds-min-width-0\n gds-text-body\n gds-text-primary\n \"\n >\n <ng-content />\n </div>\n <footer\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-gap-xs\n \"\n [attr.bordered]=\"borderedFooter\"\n [ngClass]=\"{ 'gds-display-none': !footerSecondary.hasChildNodes() && !footerPrimary.hasChildNodes() }\"\n >\n <span\n class=\"\n gds-display-inline-flex\n gds-flex-grow-1\n gds-flex-wrap\n gds-gap-2xs\n \"\n [ngClass]=\"{ 'gds-display-none': !footerSecondary.hasChildNodes() }\"\n #footerSecondary\n >\n <ng-content select=\"[footer-actions-secondary]\" />\n </span>\n <span\n class=\"\n gds-display-inline-flex\n gds-flex-grow-1\n gds-flex-wrap\n gds-gap-2xs\n gds-justify-content-end\n \"\n [ngClass]=\"{ 'gds-display-none': !footerPrimary.hasChildNodes() }\"\n #footerPrimary\n >\n <ng-content select=\"[footer-actions-primary]\" />\n </span>\n </footer>\n </div>\n</ng-template>\n", styles: ["@layer design-system{:host{--gds-dialog-base-padding: var(--gds-spacing-sm);--gds-dialog-base-gap: var(--gds-spacing-sm);position:relative;width:65vw;max-width:452px;height:fit-content;max-height:100vh;overflow:visible;padding:0;border:1px solid var(--gds-palette-border-modal);box-shadow:0 32px 64px #00000030,0 2px 21px #00000026;-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);background-color:var(--gds-dialog-background-color);outline:none}:host[open]{display:flex}:host[open][type=slide-left]{margin-left:var(--gds-spacing-0)}:host[open][type=drawer-bottom]{position:fixed;bottom:0;max-width:none;width:100%;box-shadow:none;margin:auto 0 0}:host[background=base]{--gds-dialog-background-color: var(--gds-palette-background-base)}:host[background=white]{--gds-dialog-background-color: var(--gds-palette-background-white)}:host .gds-dialog_container{gap:var(--gds-dialog-base-gap);padding:var(--gds-dialog-base-padding)}:host[header-label-alignment=left] .header{grid-template-columns:0fr auto 1fr}:host[header-label-alignment=center] .header{grid-template-columns:1fr auto 1fr}:host .header-label{grid-column:2}:host .header-actions{grid-column:3}:host .gds-dialog_header-actions:only-child{margin-inline-start:auto}:host [bordered]{border-block-start:var(--gds-border-default-shorthand);padding-top:var(--gds-dialog-base-padding)}}\n"] }]
4804
4933
  }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], headerLabelAlignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerLabelAlignment", required: false }] }], showFooterBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooterBorder", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], suppressDismissBtn: [{ type: i0.Input, args: [{ isSignal: true, alias: "suppressDismissBtn", required: false }] }], closed: [{
4805
4934
  type: Output
4806
4935
  }], canceled: [{ type: i0.Output, args: ["canceled"] }], closeBtn: [{ type: i0.ViewChild, args: ['closeBtn', { isSignal: true }] }], layoutTmpl: [{ type: i0.ContentChild, args: ['layoutTmpl', { isSignal: true }] }] } });
@@ -4897,93 +5026,17 @@ class GdsItemDisplayComponent {
4897
5026
  return this.dismissed.observed && !this.suppressDismiss();
4898
5027
  }
4899
5028
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsItemDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
4900
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsItemDisplayComponent, isStandalone: true, selector: "gds-item-display, button[gds-item-display]", inputs: { suppressDismiss: { classPropertyName: "suppressDismiss", publicName: "suppressDismiss", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { classAttribute: "gds-position-relative gds-display-flex gds-align-items-center gds-gap-2xs gds-padding-2xs gds-radius-sm gds-background-base" }, ngImport: i0, template: "<div class=\"\n container\n gds-align-items-center\n gds-display-flex\n gds-flex-grow-1\n gds-flex-wrap\n gds-gap-xs\n gds-min-width-0\n\">\n <ng-content select=\"gds-icon\" />\n <div class=\"\n gds-flex-1\n gds-text-start\n label\n \">\n <ng-content />\n </div>\n <div class=\"\n gds-display-contents\n gds-min-width-0\n \">\n <ng-content select=\"[trailing]\" />\n </div>\n</div>\n@if (hasDismiss) {\n <button\n gds-icon-button\n class=\"\n dismiss\n gds-background-none\n \"\n (clicked)=\"dismissed.emit()\"\n >\n <gds-icon\n key=\"line-dismiss\"\n class=\"gds-icon-size-2xs\"\n />\n </button>\n}\n", styles: [":host .container{z-index:1}:host .label{min-width:50px}:host .dismiss{--gds-button-color-hover: var(--gds-palette-icon-selected)}button:host{border:none;width:100%}button:host:hover,button:host:focus-visible,button:host:focus,button:host.active{outline:none}button:host:hover:before,button:host:focus-visible:before,button:host:focus:before,button:host.active:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none;height:100%;width:100%}\n"], dependencies: [{ kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5029
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsItemDisplayComponent, isStandalone: true, selector: "gds-item-display, button[gds-item-display]", inputs: { suppressDismiss: { classPropertyName: "suppressDismiss", publicName: "suppressDismiss", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { classAttribute: "gds-position-relative gds-display-flex gds-align-items-center gds-gap-2xs gds-padding-2xs gds-radius-sm gds-background-base" }, ngImport: i0, template: "<div class=\"\n container\n gds-align-items-center\n gds-display-flex\n gds-flex-grow-1\n gds-flex-wrap\n gds-gap-xs\n gds-min-width-0\n\">\n <ng-content select=\"gds-icon\" />\n <div class=\"\n gds-flex-1\n gds-text-start\n label\n \">\n <ng-content />\n </div>\n <div class=\"\n gds-display-contents\n gds-min-width-0\n \">\n <ng-content select=\"[trailing]\" />\n </div>\n</div>\n@if (hasDismiss) {\n <button\n gds-icon-button\n class=\"\n dismiss\n gds-background-none\n \"\n (clicked)=\"dismissed.emit()\"\n >\n <gds-icon\n key=\"line-dismiss\"\n class=\"gds-icon-size-2xs\"\n />\n </button>\n}\n", styles: ["@layer design-system{:host .container{z-index:1}:host .label{min-width:50px}:host .dismiss{--gds-button-color-hover: var(--gds-palette-icon-selected)}button:host{border:none;width:100%}button:host:hover,button:host:focus-visible,button:host:focus,button:host.active{outline:none}button:host:hover:before,button:host:focus-visible:before,button:host:focus:before,button:host.active:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none;height:100%;width:100%}}\n"], dependencies: [{ kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4901
5030
  }
4902
5031
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsItemDisplayComponent, decorators: [{
4903
5032
  type: Component,
4904
5033
  args: [{ selector: 'gds-item-display, button[gds-item-display]', imports: [GdsIconButtonComponent, GdsIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
4905
5034
  class: 'gds-position-relative gds-display-flex gds-align-items-center gds-gap-2xs gds-padding-2xs gds-radius-sm gds-background-base'
4906
- }, template: "<div class=\"\n container\n gds-align-items-center\n gds-display-flex\n gds-flex-grow-1\n gds-flex-wrap\n gds-gap-xs\n gds-min-width-0\n\">\n <ng-content select=\"gds-icon\" />\n <div class=\"\n gds-flex-1\n gds-text-start\n label\n \">\n <ng-content />\n </div>\n <div class=\"\n gds-display-contents\n gds-min-width-0\n \">\n <ng-content select=\"[trailing]\" />\n </div>\n</div>\n@if (hasDismiss) {\n <button\n gds-icon-button\n class=\"\n dismiss\n gds-background-none\n \"\n (clicked)=\"dismissed.emit()\"\n >\n <gds-icon\n key=\"line-dismiss\"\n class=\"gds-icon-size-2xs\"\n />\n </button>\n}\n", styles: [":host .container{z-index:1}:host .label{min-width:50px}:host .dismiss{--gds-button-color-hover: var(--gds-palette-icon-selected)}button:host{border:none;width:100%}button:host:hover,button:host:focus-visible,button:host:focus,button:host.active{outline:none}button:host:hover:before,button:host:focus-visible:before,button:host:focus:before,button:host.active:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none;height:100%;width:100%}\n"] }]
5035
+ }, template: "<div class=\"\n container\n gds-align-items-center\n gds-display-flex\n gds-flex-grow-1\n gds-flex-wrap\n gds-gap-xs\n gds-min-width-0\n\">\n <ng-content select=\"gds-icon\" />\n <div class=\"\n gds-flex-1\n gds-text-start\n label\n \">\n <ng-content />\n </div>\n <div class=\"\n gds-display-contents\n gds-min-width-0\n \">\n <ng-content select=\"[trailing]\" />\n </div>\n</div>\n@if (hasDismiss) {\n <button\n gds-icon-button\n class=\"\n dismiss\n gds-background-none\n \"\n (clicked)=\"dismissed.emit()\"\n >\n <gds-icon\n key=\"line-dismiss\"\n class=\"gds-icon-size-2xs\"\n />\n </button>\n}\n", styles: ["@layer design-system{:host .container{z-index:1}:host .label{min-width:50px}:host .dismiss{--gds-button-color-hover: var(--gds-palette-icon-selected)}button:host{border:none;width:100%}button:host:hover,button:host:focus-visible,button:host:focus,button:host.active{outline:none}button:host:hover:before,button:host:focus-visible:before,button:host:focus:before,button:host.active:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none;height:100%;width:100%}}\n"] }]
4907
5036
  }], propDecorators: { suppressDismiss: [{ type: i0.Input, args: [{ isSignal: true, alias: "suppressDismiss", required: false }] }], dismissed: [{
4908
5037
  type: Output
4909
5038
  }] } });
4910
5039
 
4911
- const formatDate = (value, option) => {
4912
- if (!value) {
4913
- return undefined;
4914
- }
4915
- const isString = typeof value === 'string';
4916
- if (isString && isNaN(Date.parse(value))) {
4917
- return undefined;
4918
- }
4919
- const dateValue = isString ? new Date(value) : value;
4920
- return format(dateValue, option);
4921
- };
4922
- const shortDate = (value) => formatDate(value, 'P');
4923
- const shortDateTime = (value) => formatDate(value, 'Pp');
4924
- const transformDateFormat = (value) => {
4925
- let dateFormat = value;
4926
- if (value.includes('yyyy')) {
4927
- dateFormat = dateFormat.replace('yyyy', 'yy');
4928
- }
4929
- else if (value.includes('yy')) {
4930
- dateFormat = dateFormat.replace('yy', 'y');
4931
- }
4932
- if (value.includes('MMMM')) {
4933
- dateFormat = dateFormat.replace('MMMM', 'MM');
4934
- }
4935
- else if (value.includes('MMM')) {
4936
- dateFormat = dateFormat.replace('MMM', 'M');
4937
- }
4938
- else if (value.includes('MM')) {
4939
- dateFormat = dateFormat.replace('MM', 'mm');
4940
- }
4941
- else if (value.includes('M')) {
4942
- dateFormat = dateFormat.replace('M', 'm');
4943
- }
4944
- return dateFormat;
4945
- };
4946
- const transformSecondsToDuration = (seconds) => {
4947
- const duration = intervalToDuration({ start: 0, end: seconds * 1000 });
4948
- const zeroPad = (val) => String(val).padStart(2, '0');
4949
- const hours = (duration.days ?? 0) * 24 + (duration.hours ?? 0);
4950
- const minutes = duration.minutes ?? 0;
4951
- const secs = duration.seconds ?? 0;
4952
- return [hours, minutes, secs].map(zeroPad).join(':');
4953
- };
4954
- const transformDurationToSeconds = (duration) => {
4955
- const [hour, minute, second] = duration.split(':');
4956
- return +hour * 3600 + +minute * 60 + +second;
4957
- };
4958
- // can't just use Date.toISOString() as that takes into account
4959
- // the time zone, so it was using the incorrect date
4960
- const formatToISO = (date) => {
4961
- if (!date) {
4962
- return undefined;
4963
- }
4964
- return format(date, "yyyy-MM-dd'T'HH:mm:ss.sss'Z'");
4965
- };
4966
- const parseLocalizedDate = (dateString) => {
4967
- if (navigator.language === 'en-US') {
4968
- return new Date(dateString);
4969
- }
4970
- // parse dd/MM/yyyy date strings for use with Date
4971
- const split = dateString.split('/');
4972
- if (split.length !== 3) {
4973
- throw new Error(`Invalid date ${dateString}`);
4974
- }
4975
- const [day, month, year] = split;
4976
- return new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
4977
- };
4978
-
4979
- const getIconsByPrefix = (prefix) => Object.values(icons).reduce((acc, curr) => {
4980
- if (curr.name.startsWith(prefix)) {
4981
- acc.push(curr.name);
4982
- return acc;
4983
- }
4984
- return acc;
4985
- }, []);
4986
-
4987
5040
  class GdsDatePipe {
4988
5041
  transform(value, option) {
4989
5042
  if (option === 'short+time') {
@@ -5132,17 +5185,42 @@ class GdsDocumentItemComponent {
5132
5185
  return !this.clicked.observed;
5133
5186
  }
5134
5187
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsDocumentItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
5135
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsDocumentItemComponent, isStandalone: true, selector: "gds-document-item", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed", clicked: "clicked" }, ngImport: i0, template: "<button\n gds-item-display\n class=\"gds-mobile-padding-sm\"\n [ngClass]=\"{ active: active(), 'suppress-click': suppressClick }\"\n [suppressDismiss]=\"suppressDismissed\"\n (click)=\"clicked.emit()\"\n (dismissed)=\"dismissed.emit()\"\n>\n <gds-icon [key]=\"ext | gdsDoctypeToIcon\" />\n <div\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-gap-xs\n gds-min-width-0\n gds-mobile-align-items-start\n gds-mobile-flex-column\n gds-row-gap-3xs\n gds-width-100-parent\n \"\n >\n <gds-tooltip\n [tooltip]=\"fileName\"\n onlyTextOverflow\n class=\"\n gds-mobile-text-body\n gds-text-body-strong\n gds-text-primary-primary\n gds-text-start\n gds-width-100-parent\n \"\n >\n {{ fileName }}\n </gds-tooltip>\n\n @if (subtitle()) {\n <span class=\"\n gds-min-width-fit-content\n gds-text-caption\n gds-text-primary\n \">{{ subtitle() }}</span>\n }\n </div>\n</button>\n", styles: [":host .suppress-click{cursor:default}\n"], dependencies: [{ kind: "component", type: GdsItemDisplayComponent, selector: "gds-item-display, button[gds-item-display]", inputs: ["suppressDismiss"], outputs: ["dismissed"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsTooltipComponent, selector: "gds-tooltip", inputs: ["tooltip", "onlyTextOverflow", "disabled", "tooltipPlacement", "tooltipInteractive", "useHostWidth", "open", "maxWidth", "appendTo"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: GdsDoctypeToIconPipe, name: "gdsDoctypeToIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5188
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsDocumentItemComponent, isStandalone: true, selector: "gds-document-item", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed", clicked: "clicked" }, ngImport: i0, template: "<button\n gds-item-display\n class=\"gds-mobile-padding-sm\"\n [ngClass]=\"{ active: active(), 'suppress-click': suppressClick }\"\n [suppressDismiss]=\"suppressDismissed\"\n (click)=\"clicked.emit()\"\n (dismissed)=\"dismissed.emit()\"\n>\n <gds-icon [key]=\"ext | gdsDoctypeToIcon\" />\n <div\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-gap-xs\n gds-min-width-0\n gds-mobile-align-items-start\n gds-mobile-flex-column\n gds-row-gap-3xs\n gds-width-100-parent\n \"\n >\n <gds-tooltip\n [tooltip]=\"fileName\"\n onlyTextOverflow\n class=\"\n gds-mobile-text-body\n gds-text-body-strong\n gds-text-primary-primary\n gds-text-start\n gds-width-100-parent\n \"\n >\n {{ fileName }}\n </gds-tooltip>\n\n @if (subtitle()) {\n <span class=\"\n gds-min-width-fit-content\n gds-text-caption\n gds-text-primary\n \">{{ subtitle() }}</span>\n }\n </div>\n</button>\n", styles: ["@layer design-system{:host .suppress-click{cursor:default}}\n"], dependencies: [{ kind: "component", type: GdsItemDisplayComponent, selector: "gds-item-display, button[gds-item-display]", inputs: ["suppressDismiss"], outputs: ["dismissed"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsTooltipComponent, selector: "gds-tooltip", inputs: ["tooltip", "onlyTextOverflow", "disabled", "tooltipPlacement", "tooltipInteractive", "useHostWidth", "open", "maxWidth", "appendTo"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: GdsDoctypeToIconPipe, name: "gdsDoctypeToIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5136
5189
  }
5137
5190
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsDocumentItemComponent, decorators: [{
5138
5191
  type: Component,
5139
- args: [{ selector: 'gds-document-item', imports: [GdsItemDisplayComponent, GdsDoctypeToIconPipe, GdsIconComponent, GdsTooltipComponent, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n gds-item-display\n class=\"gds-mobile-padding-sm\"\n [ngClass]=\"{ active: active(), 'suppress-click': suppressClick }\"\n [suppressDismiss]=\"suppressDismissed\"\n (click)=\"clicked.emit()\"\n (dismissed)=\"dismissed.emit()\"\n>\n <gds-icon [key]=\"ext | gdsDoctypeToIcon\" />\n <div\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-gap-xs\n gds-min-width-0\n gds-mobile-align-items-start\n gds-mobile-flex-column\n gds-row-gap-3xs\n gds-width-100-parent\n \"\n >\n <gds-tooltip\n [tooltip]=\"fileName\"\n onlyTextOverflow\n class=\"\n gds-mobile-text-body\n gds-text-body-strong\n gds-text-primary-primary\n gds-text-start\n gds-width-100-parent\n \"\n >\n {{ fileName }}\n </gds-tooltip>\n\n @if (subtitle()) {\n <span class=\"\n gds-min-width-fit-content\n gds-text-caption\n gds-text-primary\n \">{{ subtitle() }}</span>\n }\n </div>\n</button>\n", styles: [":host .suppress-click{cursor:default}\n"] }]
5192
+ args: [{ selector: 'gds-document-item', imports: [GdsItemDisplayComponent, GdsDoctypeToIconPipe, GdsIconComponent, GdsTooltipComponent, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n gds-item-display\n class=\"gds-mobile-padding-sm\"\n [ngClass]=\"{ active: active(), 'suppress-click': suppressClick }\"\n [suppressDismiss]=\"suppressDismissed\"\n (click)=\"clicked.emit()\"\n (dismissed)=\"dismissed.emit()\"\n>\n <gds-icon [key]=\"ext | gdsDoctypeToIcon\" />\n <div\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-gap-xs\n gds-min-width-0\n gds-mobile-align-items-start\n gds-mobile-flex-column\n gds-row-gap-3xs\n gds-width-100-parent\n \"\n >\n <gds-tooltip\n [tooltip]=\"fileName\"\n onlyTextOverflow\n class=\"\n gds-mobile-text-body\n gds-text-body-strong\n gds-text-primary-primary\n gds-text-start\n gds-width-100-parent\n \"\n >\n {{ fileName }}\n </gds-tooltip>\n\n @if (subtitle()) {\n <span class=\"\n gds-min-width-fit-content\n gds-text-caption\n gds-text-primary\n \">{{ subtitle() }}</span>\n }\n </div>\n</button>\n", styles: ["@layer design-system{:host .suppress-click{cursor:default}}\n"] }]
5140
5193
  }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], dismissed: [{
5141
5194
  type: Output
5142
5195
  }], clicked: [{
5143
5196
  type: Output
5144
5197
  }] } });
5145
5198
 
5199
+ // NOTE: Duplicated from libs/utils/src/services/device-detector-signal-service.ts — keep in sync.
5200
+ class DeviceDetectorSignalService extends DeviceDetectorService {
5201
+ resizeObservable$ = fromEvent(window, 'resize');
5202
+ resizeSubscription$;
5203
+ userAgentSignal = signal(navigator.userAgent, ...(ngDevMode ? [{ debugName: "userAgentSignal" }] : /* istanbul ignore next */ []));
5204
+ constructor() {
5205
+ super();
5206
+ this.resizeSubscription$ = this.resizeObservable$
5207
+ .pipe(takeUntilDestroyed())
5208
+ .pipe(debounceTime(DEBOUNCE_DURATION.browserEvent))
5209
+ .subscribe(() => {
5210
+ this.userAgentSignal.set(navigator.userAgent);
5211
+ });
5212
+ }
5213
+ isMobile = computed(() => super.isMobile(this.userAgentSignal()), ...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
5214
+ isTablet = computed(() => super.isTablet(this.userAgentSignal()), ...(ngDevMode ? [{ debugName: "isTablet" }] : /* istanbul ignore next */ []));
5215
+ isDesktop = computed(() => super.isDesktop(this.userAgentSignal()), ...(ngDevMode ? [{ debugName: "isDesktop" }] : /* istanbul ignore next */ []));
5216
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DeviceDetectorSignalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
5217
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DeviceDetectorSignalService, providedIn: 'root' });
5218
+ }
5219
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DeviceDetectorSignalService, decorators: [{
5220
+ type: Injectable,
5221
+ args: [{ providedIn: 'root' }]
5222
+ }], ctorParameters: () => [] });
5223
+
5146
5224
  class GdsDropdownComponent {
5147
5225
  #deviceDetectorSvc = inject(DeviceDetectorSignalService);
5148
5226
  #elementRef = inject(ElementRef);
@@ -5220,7 +5298,7 @@ class GdsDropdownComponent {
5220
5298
  };
5221
5299
  };
5222
5300
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
5223
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsDropdownComponent, isStandalone: true, selector: "gds-dropdown", inputs: { triggerElement: { classPropertyName: "triggerElement", publicName: "triggerElement", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null }, preventMobileStyling: { classPropertyName: "preventMobileStyling", publicName: "preventMobileStyling", isSignal: true, isRequired: false, transformFunction: null }, allowDefaultTabBehavior: { classPropertyName: "allowDefaultTabBehavior", publicName: "allowDefaultTabBehavior", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "attr.horizontal": "horizontal() ? \"\" : undefined", "attr.isMobile": "isMobile() && !preventMobileStyling() ? \"\" : undefined", "animate.enter": "!preventMobileStyling() && isMobile() ? \"gds-mobile-slide-bottom\" : undefined", "animate.leave": "!preventMobileStyling() && isMobile() ? \"gds-mobile-slide-bottom leave\" : undefined" } }, queries: [{ propertyName: "items", predicate: CdkMenuItem, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1$1.CdkMenu, outputs: ["closed", "closed"] }], ngImport: i0, template: "<div class=\"\n content\n gds-background-white\n gds-display-flex\n gds-gap-2xs\n gds-padding-block-3xs\n\">\n <ng-content />\n</div>\n<div\n class=\"\n cancel\n gds-align-items-center\n gds-background-white\n gds-height-xl\n gds-justify-content-center\n gds-padding-block-3xs\n gds-padding-inline-sm\n gds-text-body-strong\n gds-text-primary\n gds-width-100-parent\n \"\n cdkMenuItem\n>\n <span>{{ 'Core.Button.Cancel' | translate }}</span>\n</div>\n", styles: ["gds-dropdown .content{overflow:hidden;border-radius:var(--gds-borderRadius-sm);box-shadow:var(--gds-shadow-default);flex-direction:column}gds-dropdown .content[horizontal]{flex-direction:row}gds-dropdown .content{padding-inline:5px}gds-dropdown .cancel{display:none;border-radius:var(--gds-borderRadius-sm);border-bottom-left-radius:var(--gds-borderRadius-2xl);border-bottom-right-radius:var(--gds-borderRadius-2xl);box-shadow:var(--gds-shadow-default)}gds-dropdown[isMobile]{width:100%;margin-block-end:var(--gds-spacing-md);margin-inline:var(--gds-spacing-2xs);display:flex;flex-direction:column;gap:var(--gds-spacing-3xs)}gds-dropdown[isMobile] .content{width:100%;border-top-left-radius:var(--gds-borderRadius-2xl);border-top-right-radius:var(--gds-borderRadius-2xl)}gds-dropdown[isMobile] .cancel{display:flex}.cdk-overlay-container:has(gds-dropdown[isMobile]){display:grid;pointer-events:none;inset:0}.cdk-overlay-container:has(gds-dropdown[isMobile]):before{background-color:var(--gds-pattern-overlay-background-default);inset:0;content:\"\";position:absolute;pointer-events:auto}.cdk-overlay-container:has(gds-dropdown[isMobile]) .cdk-overlay-connected-position-bounding-box{grid-area:1/-1}.cdk-overlay-container:has(gds-dropdown[isMobile]) .cdk-overlay-connected-position-bounding-box:not(:last-of-type){display:none}.cdk-overlay-container:has(gds-dropdown[isMobile]) .cdk-overlay-pane{position:unset!important;transform:unset!important;align-items:center!important}.cdk-overlay-container:has(gds-dropdown[isMobile]):has(gds-dropdown) .cdk-overlay-connected-position-bounding-box{flex-direction:column-reverse!important}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
5301
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsDropdownComponent, isStandalone: true, selector: "gds-dropdown", inputs: { triggerElement: { classPropertyName: "triggerElement", publicName: "triggerElement", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null }, preventMobileStyling: { classPropertyName: "preventMobileStyling", publicName: "preventMobileStyling", isSignal: true, isRequired: false, transformFunction: null }, allowDefaultTabBehavior: { classPropertyName: "allowDefaultTabBehavior", publicName: "allowDefaultTabBehavior", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "attr.horizontal": "horizontal() ? \"\" : undefined", "attr.isMobile": "isMobile() && !preventMobileStyling() ? \"\" : undefined", "animate.enter": "!preventMobileStyling() && isMobile() ? \"gds-mobile-slide-bottom\" : undefined", "animate.leave": "!preventMobileStyling() && isMobile() ? \"gds-mobile-slide-bottom leave\" : undefined" } }, queries: [{ propertyName: "items", predicate: CdkMenuItem, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1$1.CdkMenu, outputs: ["closed", "closed"] }], ngImport: i0, template: "<div class=\"\n content\n gds-background-white\n gds-display-flex\n gds-gap-2xs\n gds-padding-block-3xs\n\">\n <ng-content />\n</div>\n<div\n class=\"\n cancel\n gds-align-items-center\n gds-background-white\n gds-height-xl\n gds-justify-content-center\n gds-padding-block-3xs\n gds-padding-inline-sm\n gds-text-body-strong\n gds-text-primary\n gds-width-100-parent\n \"\n cdkMenuItem\n>\n <span>{{ 'Core.Button.Cancel' | translate }}</span>\n</div>\n", styles: ["@layer design-system{gds-dropdown .content{overflow:hidden;border-radius:var(--gds-borderRadius-sm);box-shadow:var(--gds-shadow-default);flex-direction:column}gds-dropdown .content[horizontal]{flex-direction:row}gds-dropdown .content{padding-inline:5px}gds-dropdown .cancel{display:none;border-radius:var(--gds-borderRadius-sm);border-bottom-left-radius:var(--gds-borderRadius-2xl);border-bottom-right-radius:var(--gds-borderRadius-2xl);box-shadow:var(--gds-shadow-default)}gds-dropdown[isMobile]{width:100%;margin-block-end:var(--gds-spacing-md);margin-inline:var(--gds-spacing-2xs);display:flex;flex-direction:column;gap:var(--gds-spacing-3xs)}gds-dropdown[isMobile] .content{width:100%;border-top-left-radius:var(--gds-borderRadius-2xl);border-top-right-radius:var(--gds-borderRadius-2xl)}gds-dropdown[isMobile] .cancel{display:flex}.cdk-overlay-container:has(gds-dropdown[isMobile]){display:grid;pointer-events:none;inset:0}.cdk-overlay-container:has(gds-dropdown[isMobile]):before{background-color:var(--gds-pattern-overlay-background-default);inset:0;content:\"\";position:absolute;pointer-events:auto}.cdk-overlay-container:has(gds-dropdown[isMobile]) .cdk-overlay-connected-position-bounding-box{grid-area:1/-1}.cdk-overlay-container:has(gds-dropdown[isMobile]) .cdk-overlay-connected-position-bounding-box:not(:last-of-type){display:none}.cdk-overlay-container:has(gds-dropdown[isMobile]) .cdk-overlay-pane{position:unset!important;transform:unset!important;align-items:center!important}.cdk-overlay-container:has(gds-dropdown[isMobile]):has(gds-dropdown) .cdk-overlay-connected-position-bounding-box{flex-direction:column-reverse!important}}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
5224
5302
  }
5225
5303
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsDropdownComponent, decorators: [{
5226
5304
  type: Component,
@@ -5235,23 +5313,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
5235
5313
  '(keydown)': 'onKeydown($event)',
5236
5314
  '[animate.enter]': '!preventMobileStyling() && isMobile() ? "gds-mobile-slide-bottom" : undefined',
5237
5315
  '[animate.leave]': '!preventMobileStyling() && isMobile() ? "gds-mobile-slide-bottom leave" : undefined'
5238
- }, encapsulation: ViewEncapsulation.None, template: "<div class=\"\n content\n gds-background-white\n gds-display-flex\n gds-gap-2xs\n gds-padding-block-3xs\n\">\n <ng-content />\n</div>\n<div\n class=\"\n cancel\n gds-align-items-center\n gds-background-white\n gds-height-xl\n gds-justify-content-center\n gds-padding-block-3xs\n gds-padding-inline-sm\n gds-text-body-strong\n gds-text-primary\n gds-width-100-parent\n \"\n cdkMenuItem\n>\n <span>{{ 'Core.Button.Cancel' | translate }}</span>\n</div>\n", styles: ["gds-dropdown .content{overflow:hidden;border-radius:var(--gds-borderRadius-sm);box-shadow:var(--gds-shadow-default);flex-direction:column}gds-dropdown .content[horizontal]{flex-direction:row}gds-dropdown .content{padding-inline:5px}gds-dropdown .cancel{display:none;border-radius:var(--gds-borderRadius-sm);border-bottom-left-radius:var(--gds-borderRadius-2xl);border-bottom-right-radius:var(--gds-borderRadius-2xl);box-shadow:var(--gds-shadow-default)}gds-dropdown[isMobile]{width:100%;margin-block-end:var(--gds-spacing-md);margin-inline:var(--gds-spacing-2xs);display:flex;flex-direction:column;gap:var(--gds-spacing-3xs)}gds-dropdown[isMobile] .content{width:100%;border-top-left-radius:var(--gds-borderRadius-2xl);border-top-right-radius:var(--gds-borderRadius-2xl)}gds-dropdown[isMobile] .cancel{display:flex}.cdk-overlay-container:has(gds-dropdown[isMobile]){display:grid;pointer-events:none;inset:0}.cdk-overlay-container:has(gds-dropdown[isMobile]):before{background-color:var(--gds-pattern-overlay-background-default);inset:0;content:\"\";position:absolute;pointer-events:auto}.cdk-overlay-container:has(gds-dropdown[isMobile]) .cdk-overlay-connected-position-bounding-box{grid-area:1/-1}.cdk-overlay-container:has(gds-dropdown[isMobile]) .cdk-overlay-connected-position-bounding-box:not(:last-of-type){display:none}.cdk-overlay-container:has(gds-dropdown[isMobile]) .cdk-overlay-pane{position:unset!important;transform:unset!important;align-items:center!important}.cdk-overlay-container:has(gds-dropdown[isMobile]):has(gds-dropdown) .cdk-overlay-connected-position-bounding-box{flex-direction:column-reverse!important}\n"] }]
5316
+ }, encapsulation: ViewEncapsulation.None, template: "<div class=\"\n content\n gds-background-white\n gds-display-flex\n gds-gap-2xs\n gds-padding-block-3xs\n\">\n <ng-content />\n</div>\n<div\n class=\"\n cancel\n gds-align-items-center\n gds-background-white\n gds-height-xl\n gds-justify-content-center\n gds-padding-block-3xs\n gds-padding-inline-sm\n gds-text-body-strong\n gds-text-primary\n gds-width-100-parent\n \"\n cdkMenuItem\n>\n <span>{{ 'Core.Button.Cancel' | translate }}</span>\n</div>\n", styles: ["@layer design-system{gds-dropdown .content{overflow:hidden;border-radius:var(--gds-borderRadius-sm);box-shadow:var(--gds-shadow-default);flex-direction:column}gds-dropdown .content[horizontal]{flex-direction:row}gds-dropdown .content{padding-inline:5px}gds-dropdown .cancel{display:none;border-radius:var(--gds-borderRadius-sm);border-bottom-left-radius:var(--gds-borderRadius-2xl);border-bottom-right-radius:var(--gds-borderRadius-2xl);box-shadow:var(--gds-shadow-default)}gds-dropdown[isMobile]{width:100%;margin-block-end:var(--gds-spacing-md);margin-inline:var(--gds-spacing-2xs);display:flex;flex-direction:column;gap:var(--gds-spacing-3xs)}gds-dropdown[isMobile] .content{width:100%;border-top-left-radius:var(--gds-borderRadius-2xl);border-top-right-radius:var(--gds-borderRadius-2xl)}gds-dropdown[isMobile] .cancel{display:flex}.cdk-overlay-container:has(gds-dropdown[isMobile]){display:grid;pointer-events:none;inset:0}.cdk-overlay-container:has(gds-dropdown[isMobile]):before{background-color:var(--gds-pattern-overlay-background-default);inset:0;content:\"\";position:absolute;pointer-events:auto}.cdk-overlay-container:has(gds-dropdown[isMobile]) .cdk-overlay-connected-position-bounding-box{grid-area:1/-1}.cdk-overlay-container:has(gds-dropdown[isMobile]) .cdk-overlay-connected-position-bounding-box:not(:last-of-type){display:none}.cdk-overlay-container:has(gds-dropdown[isMobile]) .cdk-overlay-pane{position:unset!important;transform:unset!important;align-items:center!important}.cdk-overlay-container:has(gds-dropdown[isMobile]):has(gds-dropdown) .cdk-overlay-connected-position-bounding-box{flex-direction:column-reverse!important}}\n"] }]
5239
5317
  }], ctorParameters: () => [], propDecorators: { triggerElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerElement", required: false }] }], horizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontal", required: false }] }], preventMobileStyling: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventMobileStyling", required: false }] }], allowDefaultTabBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDefaultTabBehavior", required: false }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CdkMenuItem), { ...{ descendants: true }, isSignal: true }] }] } });
5240
5318
 
5241
- const gdsButtonVariants = ['default', 'primary', 'invisible'];
5242
- const gdsButtonSizes = ['small', 'default', 'medium', 'large'];
5243
-
5244
- const ngSelectDropdownPositions = ['auto', 'bottom', 'top', 'left', 'right'];
5245
-
5246
- const gdsDropdownPositionsX = ['auto', 'left', 'right'];
5247
- const gdsDropdownPositionsY = ['auto', 'top', 'bottom'];
5248
-
5249
- const CDN_URL = new InjectionToken('CDN_URL', {
5250
- factory: () => 'https://cdn.cortoaws.com'
5251
- });
5252
-
5253
- const gdsUserPromptSecondaryTextVariants = ['default', 'error'];
5254
-
5255
5319
  class GdsEmptyStateComponent extends OnBrandChanged {
5256
5320
  #cdnUrl = inject(CDN_URL);
5257
5321
  variant = input('info-circle', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
@@ -5259,9 +5323,9 @@ class GdsEmptyStateComponent extends OnBrandChanged {
5259
5323
  compact = input(false, { ...(ngDevMode ? { debugName: "compact" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
5260
5324
  #supportedBrand = computed(() => {
5261
5325
  switch (this.brand()) {
5262
- case BrandEnum.StandardIntegration:
5263
- case BrandEnum.CortoDark:
5264
- return BrandEnum.Corto;
5326
+ case GDS_BRANDS.StandardIntegration:
5327
+ case GDS_BRANDS.CortoDark:
5328
+ return GDS_BRANDS.Corto;
5265
5329
  default:
5266
5330
  return this.brand();
5267
5331
  }
@@ -5270,7 +5334,7 @@ class GdsEmptyStateComponent extends OnBrandChanged {
5270
5334
  titleTextSize = computed(() => `gds-text-${this.compact() ? 'subtitle' : 'title'}`, ...(ngDevMode ? [{ debugName: "titleTextSize" }] : /* istanbul ignore next */ []));
5271
5335
  otherTextSize = computed(() => `gds-text-${this.compact() ? 'caption' : 'body'}`, ...(ngDevMode ? [{ debugName: "otherTextSize" }] : /* istanbul ignore next */ []));
5272
5336
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsEmptyStateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
5273
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsEmptyStateComponent, isStandalone: true, selector: "gds-empty-state", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, suppressIcon: { classPropertyName: "suppressIcon", publicName: "suppressIcon", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "\n gds-align-items-center\n gds-display-flex\n gds-flex-column\n gds-height-100-parent\n gds-justify-content-center\n gds-text-body\n gds-text-center\n gds-text-primary-primary\n gds-width-100-parent\n gds-gap-sm\n " }, usesInheritance: true, ngImport: i0, template: "@if (!suppressIcon()) {\n <img\n class=\"icon\"\n [src]=\"imageSrc()\"\n alt=\"empty state icon\"\n />\n}\n\n<div\n class=\"\n gds-display-none-empty\n gds-text-primary-primary\n \"\n [ngClass]=\"titleTextSize()\"\n>\n <ng-content />\n</div>\n\n<div\n class=\"\n gds-display-none-empty\n gds-text-primary-primary\n \"\n [ngClass]=\"otherTextSize()\"\n>\n <ng-content select=\"[subtitle]\" />\n</div>\n\n<div class=\"gds-display-none-empty\">\n <ng-content select=\"[button]\" />\n</div>\n\n<div\n class=\"\n gds-display-none-empty\n gds-text-secondary\n \"\n [ngClass]=\"otherTextSize()\"\n>\n <ng-content select=\"[footer]\" />\n</div>\n", styles: [":host{--gds-empty-state-icon-size: 132px}:host .icon{height:var(--gds-empty-state-icon-size);width:var(--gds-empty-state-icon-size)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5337
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsEmptyStateComponent, isStandalone: true, selector: "gds-empty-state", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, suppressIcon: { classPropertyName: "suppressIcon", publicName: "suppressIcon", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "\n gds-align-items-center\n gds-display-flex\n gds-flex-column\n gds-height-100-parent\n gds-justify-content-center\n gds-text-body\n gds-text-center\n gds-text-primary-primary\n gds-width-100-parent\n gds-gap-sm\n " }, usesInheritance: true, ngImport: i0, template: "@if (!suppressIcon()) {\n <img\n class=\"icon\"\n [src]=\"imageSrc()\"\n alt=\"empty state icon\"\n />\n}\n\n<div\n class=\"\n gds-display-none-empty\n gds-text-primary-primary\n \"\n [ngClass]=\"titleTextSize()\"\n>\n <ng-content />\n</div>\n\n<div\n class=\"\n gds-display-none-empty\n gds-text-primary-primary\n \"\n [ngClass]=\"otherTextSize()\"\n>\n <ng-content select=\"[subtitle]\" />\n</div>\n\n<div class=\"gds-display-none-empty\">\n <ng-content select=\"[button]\" />\n</div>\n\n<div\n class=\"\n gds-display-none-empty\n gds-text-secondary\n \"\n [ngClass]=\"otherTextSize()\"\n>\n <ng-content select=\"[footer]\" />\n</div>\n", styles: ["@layer design-system{:host{--gds-empty-state-icon-size: 132px}:host .icon{height:var(--gds-empty-state-icon-size);width:var(--gds-empty-state-icon-size)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5274
5338
  }
5275
5339
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsEmptyStateComponent, decorators: [{
5276
5340
  type: Component,
@@ -5287,7 +5351,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
5287
5351
  gds-width-100-parent
5288
5352
  gds-gap-sm
5289
5353
  `
5290
- }, template: "@if (!suppressIcon()) {\n <img\n class=\"icon\"\n [src]=\"imageSrc()\"\n alt=\"empty state icon\"\n />\n}\n\n<div\n class=\"\n gds-display-none-empty\n gds-text-primary-primary\n \"\n [ngClass]=\"titleTextSize()\"\n>\n <ng-content />\n</div>\n\n<div\n class=\"\n gds-display-none-empty\n gds-text-primary-primary\n \"\n [ngClass]=\"otherTextSize()\"\n>\n <ng-content select=\"[subtitle]\" />\n</div>\n\n<div class=\"gds-display-none-empty\">\n <ng-content select=\"[button]\" />\n</div>\n\n<div\n class=\"\n gds-display-none-empty\n gds-text-secondary\n \"\n [ngClass]=\"otherTextSize()\"\n>\n <ng-content select=\"[footer]\" />\n</div>\n", styles: [":host{--gds-empty-state-icon-size: 132px}:host .icon{height:var(--gds-empty-state-icon-size);width:var(--gds-empty-state-icon-size)}\n"] }]
5354
+ }, template: "@if (!suppressIcon()) {\n <img\n class=\"icon\"\n [src]=\"imageSrc()\"\n alt=\"empty state icon\"\n />\n}\n\n<div\n class=\"\n gds-display-none-empty\n gds-text-primary-primary\n \"\n [ngClass]=\"titleTextSize()\"\n>\n <ng-content />\n</div>\n\n<div\n class=\"\n gds-display-none-empty\n gds-text-primary-primary\n \"\n [ngClass]=\"otherTextSize()\"\n>\n <ng-content select=\"[subtitle]\" />\n</div>\n\n<div class=\"gds-display-none-empty\">\n <ng-content select=\"[button]\" />\n</div>\n\n<div\n class=\"\n gds-display-none-empty\n gds-text-secondary\n \"\n [ngClass]=\"otherTextSize()\"\n>\n <ng-content select=\"[footer]\" />\n</div>\n", styles: ["@layer design-system{:host{--gds-empty-state-icon-size: 132px}:host .icon{height:var(--gds-empty-state-icon-size);width:var(--gds-empty-state-icon-size)}}\n"] }]
5291
5355
  }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], suppressIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "suppressIcon", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }] } });
5292
5356
 
5293
5357
  const GDS_EMPTY_STATE_VARIANTS = [
@@ -5350,7 +5414,7 @@ class GdsFeatureBlockComponent {
5350
5414
  }
5351
5415
  ];
5352
5416
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsFeatureBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
5353
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsFeatureBlockComponent, isStandalone: true, selector: "gds-feature-block", inputs: { feature: { classPropertyName: "feature", publicName: "feature", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "style.background": "selectedColor().background", "style.color": "selectedColor().color" }, classAttribute: "gds-display-flex gds-flex-column gds-gap-sm gds-padding-sm gds-radius-lg gds-border" }, ngImport: i0, template: "<span class=\"\n gds-align-items-center\n gds-display-flex\n gds-gap-2xs\n gds-text-body-large-strong\n\">\n <gds-icon [key]=\"icon() | gdsSvgicon\" />\n {{ name() }}\n</span>\n<span class=\"\n gds-line-height-sm\n gds-text-body\n\">{{ description() }}</span>\n\n@if (learnMoreLink()) {\n <a\n class=\"\n gds-margin-block-start-auto\n gds-text-body\n gds-text-primary-primary\n \"\n [href]=\"learnMoreLink()\"\n target=\"_blank\"\n >\n {{ 'Gds.FeatureBlock.LearnMore' | translate }}\n </a>\n}\n", styles: [":host{width:22.188rem;min-height:10.563rem;border-color:var(--gds-palette-accent-indigo-default)}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "pipe", type: GdsSvgIconPipe, name: "gdsSvgicon" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5417
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsFeatureBlockComponent, isStandalone: true, selector: "gds-feature-block", inputs: { feature: { classPropertyName: "feature", publicName: "feature", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "style.background": "selectedColor().background", "style.color": "selectedColor().color" }, classAttribute: "gds-display-flex gds-flex-column gds-gap-sm gds-padding-sm gds-radius-lg gds-border" }, ngImport: i0, template: "<span class=\"\n gds-align-items-center\n gds-display-flex\n gds-gap-2xs\n gds-text-body-large-strong\n\">\n <gds-icon [key]=\"icon() | gdsSvgicon\" />\n {{ name() }}\n</span>\n<span class=\"\n gds-line-height-sm\n gds-text-body\n\">{{ description() }}</span>\n\n@if (learnMoreLink()) {\n <a\n class=\"\n gds-margin-block-start-auto\n gds-text-body\n gds-text-primary-primary\n \"\n [href]=\"learnMoreLink()\"\n target=\"_blank\"\n >\n {{ 'Gds.FeatureBlock.LearnMore' | translate }}\n </a>\n}\n", styles: ["@layer design-system{:host{width:22.188rem;min-height:10.563rem;border-color:var(--gds-palette-accent-indigo-default)}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "pipe", type: GdsSvgIconPipe, name: "gdsSvgicon" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5354
5418
  }
5355
5419
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsFeatureBlockComponent, decorators: [{
5356
5420
  type: Component,
@@ -5358,7 +5422,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
5358
5422
  class: 'gds-display-flex gds-flex-column gds-gap-sm gds-padding-sm gds-radius-lg gds-border',
5359
5423
  '[style.background]': 'selectedColor().background',
5360
5424
  '[style.color]': 'selectedColor().color'
5361
- }, imports: [GdsIconComponent, GdsSvgIconPipe, TranslatePipe], template: "<span class=\"\n gds-align-items-center\n gds-display-flex\n gds-gap-2xs\n gds-text-body-large-strong\n\">\n <gds-icon [key]=\"icon() | gdsSvgicon\" />\n {{ name() }}\n</span>\n<span class=\"\n gds-line-height-sm\n gds-text-body\n\">{{ description() }}</span>\n\n@if (learnMoreLink()) {\n <a\n class=\"\n gds-margin-block-start-auto\n gds-text-body\n gds-text-primary-primary\n \"\n [href]=\"learnMoreLink()\"\n target=\"_blank\"\n >\n {{ 'Gds.FeatureBlock.LearnMore' | translate }}\n </a>\n}\n", styles: [":host{width:22.188rem;min-height:10.563rem;border-color:var(--gds-palette-accent-indigo-default)}\n"] }]
5425
+ }, imports: [GdsIconComponent, GdsSvgIconPipe, TranslatePipe], template: "<span class=\"\n gds-align-items-center\n gds-display-flex\n gds-gap-2xs\n gds-text-body-large-strong\n\">\n <gds-icon [key]=\"icon() | gdsSvgicon\" />\n {{ name() }}\n</span>\n<span class=\"\n gds-line-height-sm\n gds-text-body\n\">{{ description() }}</span>\n\n@if (learnMoreLink()) {\n <a\n class=\"\n gds-margin-block-start-auto\n gds-text-body\n gds-text-primary-primary\n \"\n [href]=\"learnMoreLink()\"\n target=\"_blank\"\n >\n {{ 'Gds.FeatureBlock.LearnMore' | translate }}\n </a>\n}\n", styles: ["@layer design-system{:host{width:22.188rem;min-height:10.563rem;border-color:var(--gds-palette-accent-indigo-default)}}\n"] }]
5362
5426
  }], propDecorators: { feature: [{ type: i0.Input, args: [{ isSignal: true, alias: "feature", required: true }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: true }] }] } });
5363
5427
 
5364
5428
  class GdsFeedbackButtonComponent extends ButtonBaseDirective {
@@ -5381,14 +5445,14 @@ class GdsFeedbackButtonComponent extends ButtonBaseDirective {
5381
5445
  }
5382
5446
  }
5383
5447
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsFeedbackButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
5384
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsFeedbackButtonComponent, isStandalone: true, selector: "button[gds-feedback-button]", inputs: { tooltipLabel: { classPropertyName: "tooltipLabel", publicName: "tooltipLabel", isSignal: true, isRequired: false, transformFunction: null }, clickedLabel: { classPropertyName: "clickedLabel", publicName: "clickedLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--icon": "iconVisible()", "style.--clicked-icon": "clickedIconVisible()" } }, usesInheritance: true, ngImport: i0, template: "<div\n class=\"body\"\n [tp]=\"tooltipTemplate\"\n tpVariation=\"light\"\n tpAppendTo=\"parent\"\n [tpIsEnabled]=\"hasTooltip()\"\n [tpHideOnClick]=\"false\"\n>\n @if (busy()) {\n <gds-icon\n role=\"progressbar\"\n class=\"busy-icon\"\n key=\"loading-kebab\"\n />\n }\n\n <div class=\"\n gds-display-grid\n gds-gap-0\n label\n \">\n <ng-content select=\"gds-icon\" />\n <ng-content select=\"[clicked-icon]\" />\n </div>\n</div>\n\n<ng-template #tooltipTemplate>\n {{ tooltipTextContent() }}\n</ng-template>\n", styles: [":host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}:host{--gds-button-color: var(--gds-palette-icon-secondary);--gds-button-borderColor: transparent;--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-text-default-primary);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-color-disabled: var(--gds-palette-icon-disabled);--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled);--gds-mobile-button-size: var(--gds-size-lg)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-icon-primary);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-button-primary-hover);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover)}:is(body[isMobile=true]) :host[data-size=default],:is(body[isMobile=true]) :host[data-size=small],:is(body[isMobile=true]) :host[data-size=medium],:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-mobile-button-size);height:var(--gds-mobile-button-size);padding-inline:0}:host{aspect-ratio:1;padding-inline:unset}:host .body{display:grid;grid-template-columns:1fr;grid-template-areas:\"main\";align-items:center;justify-items:center}:host .label ::ng-deep>*{grid-area:main}:host .label ::ng-deep>*:has(+[clicked-icon]){transition:175ms opacity ease-out,.15s transform ease-out 50ms;transform:scale(var(--icon));opacity:var(--icon)}:host .label ::ng-deep>[clicked-icon]{transition:.2s opacity ease-out,.15s transform ease-out 50ms;transform:scale(var(--clicked-icon));opacity:var(--clicked-icon)}\n"], dependencies: [{ kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5448
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsFeedbackButtonComponent, isStandalone: true, selector: "button[gds-feedback-button]", inputs: { tooltipLabel: { classPropertyName: "tooltipLabel", publicName: "tooltipLabel", isSignal: true, isRequired: false, transformFunction: null }, clickedLabel: { classPropertyName: "clickedLabel", publicName: "clickedLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--icon": "iconVisible()", "style.--clicked-icon": "clickedIconVisible()" } }, usesInheritance: true, ngImport: i0, template: "<div\n class=\"body\"\n [tp]=\"tooltipTemplate\"\n tpVariation=\"light\"\n tpAppendTo=\"parent\"\n [tpIsEnabled]=\"hasTooltip()\"\n [tpHideOnClick]=\"false\"\n>\n @if (busy()) {\n <gds-icon\n role=\"progressbar\"\n class=\"busy-icon\"\n key=\"loading-kebab\"\n />\n }\n\n <div class=\"\n gds-display-grid\n gds-gap-0\n label\n \">\n <ng-content select=\"gds-icon\" />\n <ng-content select=\"[clicked-icon]\" />\n </div>\n</div>\n\n<ng-template #tooltipTemplate>\n {{ tooltipTextContent() }}\n</ng-template>\n", styles: ["@layer design-system{:host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}:host{--gds-button-color: var(--gds-palette-icon-secondary);--gds-button-borderColor: transparent;--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-text-default-primary);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-color-disabled: var(--gds-palette-icon-disabled);--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled);--gds-mobile-button-size: var(--gds-size-lg)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-icon-primary);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-button-primary-hover);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover)}:is(body[isMobile=true]) :host[data-size=default],:is(body[isMobile=true]) :host[data-size=small],:is(body[isMobile=true]) :host[data-size=medium],:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-mobile-button-size);height:var(--gds-mobile-button-size);padding-inline:0}:host{aspect-ratio:1;padding-inline:unset}:host .body{display:grid;grid-template-columns:1fr;grid-template-areas:\"main\";align-items:center;justify-items:center}:host .label ::ng-deep>*{grid-area:main}:host .label ::ng-deep>*:has(+[clicked-icon]){transition:175ms opacity ease-out,.15s transform ease-out 50ms;transform:scale(var(--icon));opacity:var(--icon)}:host .label ::ng-deep>[clicked-icon]{transition:.2s opacity ease-out,.15s transform ease-out 50ms;transform:scale(var(--clicked-icon));opacity:var(--clicked-icon)}}\n"], dependencies: [{ kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5385
5449
  }
5386
5450
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsFeedbackButtonComponent, decorators: [{
5387
5451
  type: Component,
5388
5452
  args: [{ selector: 'button[gds-feedback-button]', imports: [TippyDirective, GdsIconComponent], host: {
5389
5453
  '[style.--icon]': 'iconVisible()',
5390
5454
  '[style.--clicked-icon]': 'clickedIconVisible()'
5391
- }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"body\"\n [tp]=\"tooltipTemplate\"\n tpVariation=\"light\"\n tpAppendTo=\"parent\"\n [tpIsEnabled]=\"hasTooltip()\"\n [tpHideOnClick]=\"false\"\n>\n @if (busy()) {\n <gds-icon\n role=\"progressbar\"\n class=\"busy-icon\"\n key=\"loading-kebab\"\n />\n }\n\n <div class=\"\n gds-display-grid\n gds-gap-0\n label\n \">\n <ng-content select=\"gds-icon\" />\n <ng-content select=\"[clicked-icon]\" />\n </div>\n</div>\n\n<ng-template #tooltipTemplate>\n {{ tooltipTextContent() }}\n</ng-template>\n", styles: [":host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}:host{--gds-button-color: var(--gds-palette-icon-secondary);--gds-button-borderColor: transparent;--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-text-default-primary);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-color-disabled: var(--gds-palette-icon-disabled);--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled);--gds-mobile-button-size: var(--gds-size-lg)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-icon-primary);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-button-primary-hover);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover)}:is(body[isMobile=true]) :host[data-size=default],:is(body[isMobile=true]) :host[data-size=small],:is(body[isMobile=true]) :host[data-size=medium],:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-mobile-button-size);height:var(--gds-mobile-button-size);padding-inline:0}:host{aspect-ratio:1;padding-inline:unset}:host .body{display:grid;grid-template-columns:1fr;grid-template-areas:\"main\";align-items:center;justify-items:center}:host .label ::ng-deep>*{grid-area:main}:host .label ::ng-deep>*:has(+[clicked-icon]){transition:175ms opacity ease-out,.15s transform ease-out 50ms;transform:scale(var(--icon));opacity:var(--icon)}:host .label ::ng-deep>[clicked-icon]{transition:.2s opacity ease-out,.15s transform ease-out 50ms;transform:scale(var(--clicked-icon));opacity:var(--clicked-icon)}\n"] }]
5455
+ }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"body\"\n [tp]=\"tooltipTemplate\"\n tpVariation=\"light\"\n tpAppendTo=\"parent\"\n [tpIsEnabled]=\"hasTooltip()\"\n [tpHideOnClick]=\"false\"\n>\n @if (busy()) {\n <gds-icon\n role=\"progressbar\"\n class=\"busy-icon\"\n key=\"loading-kebab\"\n />\n }\n\n <div class=\"\n gds-display-grid\n gds-gap-0\n label\n \">\n <ng-content select=\"gds-icon\" />\n <ng-content select=\"[clicked-icon]\" />\n </div>\n</div>\n\n<ng-template #tooltipTemplate>\n {{ tooltipTextContent() }}\n</ng-template>\n", styles: ["@layer design-system{:host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}:host{--gds-button-color: var(--gds-palette-icon-secondary);--gds-button-borderColor: transparent;--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-text-default-primary);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-color-disabled: var(--gds-palette-icon-disabled);--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled);--gds-mobile-button-size: var(--gds-size-lg)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-icon-primary);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-button-primary-hover);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover)}:is(body[isMobile=true]) :host[data-size=default],:is(body[isMobile=true]) :host[data-size=small],:is(body[isMobile=true]) :host[data-size=medium],:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-mobile-button-size);height:var(--gds-mobile-button-size);padding-inline:0}:host{aspect-ratio:1;padding-inline:unset}:host .body{display:grid;grid-template-columns:1fr;grid-template-areas:\"main\";align-items:center;justify-items:center}:host .label ::ng-deep>*{grid-area:main}:host .label ::ng-deep>*:has(+[clicked-icon]){transition:175ms opacity ease-out,.15s transform ease-out 50ms;transform:scale(var(--icon));opacity:var(--icon)}:host .label ::ng-deep>[clicked-icon]{transition:.2s opacity ease-out,.15s transform ease-out 50ms;transform:scale(var(--clicked-icon));opacity:var(--clicked-icon)}}\n"] }]
5392
5456
  }], propDecorators: { tooltipLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipLabel", required: false }] }], clickedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickedLabel", required: false }] }] } });
5393
5457
 
5394
5458
  class GdsFilterChipComponent extends OnBrandChanged {
@@ -5400,7 +5464,7 @@ class GdsFilterChipComponent extends OnBrandChanged {
5400
5464
  this.dismiss.emit();
5401
5465
  };
5402
5466
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsFilterChipComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
5403
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: GdsFilterChipComponent, isStandalone: true, selector: "gds-filter-chip, button[gds-filter-chip]", inputs: { dismissDisabled: { classPropertyName: "dismissDisabled", publicName: "dismissDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss" }, host: { attributes: { "tabIndex": "0" }, listeners: { "keydown.delete": "handleDismiss()", "keydown.backspace": "handleDismiss()" }, classAttribute: "\n gds-align-items-center\n gds-display-flex\n gds-gap-2xs\n gds-padding-inline-2xs\n gds-radius-sm\n gds-text-caption\n gds-text-primary\n gds-min-height-md\n " }, usesInheritance: true, ngImport: i0, template: "<ng-content />\n<button\n gds-icon-button\n variant=\"primary\"\n class=\"\n gds-background-none\n gds-margin-inline-start-auto\n gds-min-height-0\n \"\n [attr.aria-label]=\"'Features.Activities.Page.Filter.Clear' | translate\"\n [disabled]=\"dismissDisabled()\"\n (click)=\"handleDismiss()\"\n>\n <gds-icon\n key=\"line-dismiss\"\n class=\"\n gds-icon-primary\n gds-icon-size-3xs\n \"\n />\n</button>\n", styles: [":host{background-color:var(--gds-pattern-label-background-default);padding-block:6px}button:host{cursor:pointer;border:none;width:100%}button:host:focus,button:host:focus-visible,button:host:hover{background-color:var(--gds-pattern-label-background-hover)}button:host:disabled{cursor:not-allowed;outline:none}\n"], dependencies: [{ kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5467
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: GdsFilterChipComponent, isStandalone: true, selector: "gds-filter-chip, button[gds-filter-chip]", inputs: { dismissDisabled: { classPropertyName: "dismissDisabled", publicName: "dismissDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss" }, host: { attributes: { "tabIndex": "0" }, listeners: { "keydown.delete": "handleDismiss()", "keydown.backspace": "handleDismiss()" }, classAttribute: "\n gds-align-items-center\n gds-display-flex\n gds-gap-2xs\n gds-padding-inline-2xs\n gds-radius-sm\n gds-text-caption\n gds-text-primary\n gds-min-height-md\n " }, usesInheritance: true, ngImport: i0, template: "<ng-content />\n<button\n gds-icon-button\n variant=\"primary\"\n class=\"\n gds-background-none\n gds-margin-inline-start-auto\n gds-min-height-0\n \"\n [attr.aria-label]=\"'Features.Activities.Page.Filter.Clear' | translate\"\n [disabled]=\"dismissDisabled()\"\n (click)=\"handleDismiss()\"\n>\n <gds-icon\n key=\"line-dismiss\"\n class=\"\n gds-icon-primary\n gds-icon-size-3xs\n \"\n />\n</button>\n", styles: ["@layer design-system{:host{background-color:var(--gds-pattern-label-background-default);padding-block:6px}button:host{cursor:pointer;border:none;width:100%}button:host:focus,button:host:focus-visible,button:host:hover{background-color:var(--gds-pattern-label-background-hover)}button:host:disabled{cursor:not-allowed;outline:none}}\n"], dependencies: [{ kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5404
5468
  }
5405
5469
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsFilterChipComponent, decorators: [{
5406
5470
  type: Component,
@@ -5418,7 +5482,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
5418
5482
  '(keydown.delete)': 'handleDismiss()',
5419
5483
  '(keydown.backspace)': 'handleDismiss()',
5420
5484
  tabIndex: '0'
5421
- }, template: "<ng-content />\n<button\n gds-icon-button\n variant=\"primary\"\n class=\"\n gds-background-none\n gds-margin-inline-start-auto\n gds-min-height-0\n \"\n [attr.aria-label]=\"'Features.Activities.Page.Filter.Clear' | translate\"\n [disabled]=\"dismissDisabled()\"\n (click)=\"handleDismiss()\"\n>\n <gds-icon\n key=\"line-dismiss\"\n class=\"\n gds-icon-primary\n gds-icon-size-3xs\n \"\n />\n</button>\n", styles: [":host{background-color:var(--gds-pattern-label-background-default);padding-block:6px}button:host{cursor:pointer;border:none;width:100%}button:host:focus,button:host:focus-visible,button:host:hover{background-color:var(--gds-pattern-label-background-hover)}button:host:disabled{cursor:not-allowed;outline:none}\n"] }]
5485
+ }, template: "<ng-content />\n<button\n gds-icon-button\n variant=\"primary\"\n class=\"\n gds-background-none\n gds-margin-inline-start-auto\n gds-min-height-0\n \"\n [attr.aria-label]=\"'Features.Activities.Page.Filter.Clear' | translate\"\n [disabled]=\"dismissDisabled()\"\n (click)=\"handleDismiss()\"\n>\n <gds-icon\n key=\"line-dismiss\"\n class=\"\n gds-icon-primary\n gds-icon-size-3xs\n \"\n />\n</button>\n", styles: ["@layer design-system{:host{background-color:var(--gds-pattern-label-background-default);padding-block:6px}button:host{cursor:pointer;border:none;width:100%}button:host:focus,button:host:focus-visible,button:host:hover{background-color:var(--gds-pattern-label-background-hover)}button:host:disabled{cursor:not-allowed;outline:none}}\n"] }]
5422
5486
  }], propDecorators: { dismissDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissDisabled", required: false }] }], dismiss: [{
5423
5487
  type: Output
5424
5488
  }] } });
@@ -5437,7 +5501,7 @@ class GdsCheckboxComponent {
5437
5501
  tabindex = model(0, ...(ngDevMode ? [{ debugName: "tabindex" }] : /* istanbul ignore next */ []));
5438
5502
  toggle = () => this.checked.update((value) => !value);
5439
5503
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
5440
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: GdsCheckboxComponent, isStandalone: true, selector: "input[type=\"checkbox\"][gds-checkbox]", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", touched: "touchedChange", tabindex: "tabindexChange" }, host: { listeners: { "change": "toggle()" }, properties: { "attr.invalid": "invalid() ? \"\" : undefined", "attr.touched": "touched() ? \"\" : undefined", "attr.disabled": "disabled() ? \"\" : undefined", "attr.readonly": "readonly() ? \"\" : undefined", "attr.hidden": "hidden() ? \"\" : undefined", "checked": "checked()", "tabindex": "tabindex()" }, classAttribute: "gds-radius-sm gds-display-grid" }, ngImport: i0, template: '', isInline: true, styles: [":host{--gds-form-control-border-color: var(--gds-palette-border-dark);--gds-form-control-cursor: pointer;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{aspect-ratio:1/1;height:20px;width:fit-content;flex-shrink:0;place-content:center}:host:indeterminate{--clip-path: polygon(5% 43%, 95% 43%, 95% 57%, 5% 57%);--background-color: var(--gds-palette-background-bright);--border-color: var(--gds-palette-background-bright)}:host:checked{--clip-path: polygon( 100% 7.425%, 100% 7.425%, 100.429% 8.143%, 100.757% 8.924%, 100.986% 9.75%, 101.115% 10.605%, 101.145% 11.473%, 101.077% 12.336%, 100.91% 13.18%, 100.645% 13.986%, 100.283% 14.739%, 99.823% 15.423%, 32.983% 100%, 32.983% 100%, 32.351% 100.681%, 31.665% 101.206%, 30.938% 101.575%, 30.186% 101.789%, 29.421% 101.848%, 28.658% 101.751%, 27.912% 101.5%, 27.196% 101.095%, 26.525% 100.537%, 25.912% 99.824%, 3.32% 69.04%, 3.32% 69.04%, 2.879% 68.334%, 2.538% 67.564%, 2.295% 66.745%, 2.152% 65.894%, 2.107% 65.027%, 2.161% 64.161%, 2.314% 63.313%, 2.566% 62.499%, 2.916% 61.735%, 3.364% 61.039%, 3.364% 61.039%, 3.889% 60.447%, 4.463% 59.989%, 5.074% 59.663%, 5.707% 59.471%, 6.353% 59.411%, 6.998% 59.484%, 7.629% 59.689%, 8.236% 60.026%, 8.805% 60.496%, 9.324% 61.098%, 29.602% 88.728%, 94.042% 7.188%, 94.042% 7.188%, 94.578% 6.612%, 95.159% 6.171%, 95.774% 5.864%, 96.411% 5.69%, 97.058% 5.65%, 97.701% 5.741%, 98.329% 5.965%, 98.93% 6.321%, 99.491% 6.807%, 100% 7.425% );--background-color: var(--gds-palette-background-bright);--border-color: var(--gds-palette-background-bright)}:host:checked:hover{--background-color: var(--gds-palette-background-bright-hover);--border-color: var(--gds-palette-background-bright-hover)}:host[disabled],:host:has(*:disabled,*[disabled=true]){--border-color: var(--gds-palette-border-default);--background-color: var(--disabled-background-color)}:host[disabled]:checked,:host:has(*:disabled,*[disabled=true]):checked{--background-color: var(--gds-palette-button-primary-disabled);--border-color: var(--gds-palette-button-primary-disabled)}:host[invalid][touched]:not(:focus-within,.is-controlled):checked,:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled):checked{--background-color: var(--invalid-color)}:host:focus-visible{outline:max(2px,.15em) solid var(--border-color);outline-offset:max(2px,.15em)}:host{background-color:var(--background-color);border:1px solid var(--border-color);cursor:var(--cursor)}:host:before{content:\"\";width:.85em;height:.6em;clip-path:var(--clip-path, polygon(0 0, 0 0));box-shadow:inset 1em 1em var(--gds-palette-background-white);border-radius:var(--gds-borderRadius-sm)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5504
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: GdsCheckboxComponent, isStandalone: true, selector: "input[type=\"checkbox\"][gds-checkbox]", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", touched: "touchedChange", tabindex: "tabindexChange" }, host: { listeners: { "change": "toggle()" }, properties: { "attr.invalid": "invalid() ? \"\" : undefined", "attr.touched": "touched() ? \"\" : undefined", "attr.disabled": "disabled() ? \"\" : undefined", "attr.readonly": "readonly() ? \"\" : undefined", "attr.hidden": "hidden() ? \"\" : undefined", "checked": "checked()", "tabindex": "tabindex()" }, classAttribute: "gds-radius-sm gds-display-grid" }, ngImport: i0, template: '', isInline: true, styles: ["@layer design-system{:host{--gds-form-control-border-color: var(--gds-palette-border-dark);--gds-form-control-cursor: pointer;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{aspect-ratio:1/1;height:20px;width:fit-content;flex-shrink:0;place-content:center}:host:indeterminate{--clip-path: polygon(5% 43%, 95% 43%, 95% 57%, 5% 57%);--background-color: var(--gds-palette-background-bright);--border-color: var(--gds-palette-background-bright)}:host:checked{--clip-path: polygon( 100% 7.425%, 100% 7.425%, 100.429% 8.143%, 100.757% 8.924%, 100.986% 9.75%, 101.115% 10.605%, 101.145% 11.473%, 101.077% 12.336%, 100.91% 13.18%, 100.645% 13.986%, 100.283% 14.739%, 99.823% 15.423%, 32.983% 100%, 32.983% 100%, 32.351% 100.681%, 31.665% 101.206%, 30.938% 101.575%, 30.186% 101.789%, 29.421% 101.848%, 28.658% 101.751%, 27.912% 101.5%, 27.196% 101.095%, 26.525% 100.537%, 25.912% 99.824%, 3.32% 69.04%, 3.32% 69.04%, 2.879% 68.334%, 2.538% 67.564%, 2.295% 66.745%, 2.152% 65.894%, 2.107% 65.027%, 2.161% 64.161%, 2.314% 63.313%, 2.566% 62.499%, 2.916% 61.735%, 3.364% 61.039%, 3.364% 61.039%, 3.889% 60.447%, 4.463% 59.989%, 5.074% 59.663%, 5.707% 59.471%, 6.353% 59.411%, 6.998% 59.484%, 7.629% 59.689%, 8.236% 60.026%, 8.805% 60.496%, 9.324% 61.098%, 29.602% 88.728%, 94.042% 7.188%, 94.042% 7.188%, 94.578% 6.612%, 95.159% 6.171%, 95.774% 5.864%, 96.411% 5.69%, 97.058% 5.65%, 97.701% 5.741%, 98.329% 5.965%, 98.93% 6.321%, 99.491% 6.807%, 100% 7.425% );--background-color: var(--gds-palette-background-bright);--border-color: var(--gds-palette-background-bright)}:host:checked:hover{--background-color: var(--gds-palette-background-bright-hover);--border-color: var(--gds-palette-background-bright-hover)}:host[disabled],:host:has(*:disabled,*[disabled=true]){--border-color: var(--gds-palette-border-default);--background-color: var(--disabled-background-color)}:host[disabled]:checked,:host:has(*:disabled,*[disabled=true]):checked{--background-color: var(--gds-palette-button-primary-disabled);--border-color: var(--gds-palette-button-primary-disabled)}:host[invalid][touched]:not(:focus-within,.is-controlled):checked,:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled):checked{--background-color: var(--invalid-color)}:host:focus-visible{outline:max(2px,.15em) solid var(--border-color);outline-offset:max(2px,.15em)}:host{background-color:var(--background-color);border:1px solid var(--border-color);cursor:var(--cursor)}:host:before{content:\"\";width:.85em;height:.6em;clip-path:var(--clip-path, polygon(0 0, 0 0));box-shadow:inset 1em 1em var(--gds-palette-background-white);border-radius:var(--gds-borderRadius-sm)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5441
5505
  }
5442
5506
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsCheckboxComponent, decorators: [{
5443
5507
  type: Component,
@@ -5451,7 +5515,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
5451
5515
  '[checked]': 'checked()',
5452
5516
  '[tabindex]': 'tabindex()',
5453
5517
  '(change)': 'toggle()'
5454
- }, styles: [":host{--gds-form-control-border-color: var(--gds-palette-border-dark);--gds-form-control-cursor: pointer;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{aspect-ratio:1/1;height:20px;width:fit-content;flex-shrink:0;place-content:center}:host:indeterminate{--clip-path: polygon(5% 43%, 95% 43%, 95% 57%, 5% 57%);--background-color: var(--gds-palette-background-bright);--border-color: var(--gds-palette-background-bright)}:host:checked{--clip-path: polygon( 100% 7.425%, 100% 7.425%, 100.429% 8.143%, 100.757% 8.924%, 100.986% 9.75%, 101.115% 10.605%, 101.145% 11.473%, 101.077% 12.336%, 100.91% 13.18%, 100.645% 13.986%, 100.283% 14.739%, 99.823% 15.423%, 32.983% 100%, 32.983% 100%, 32.351% 100.681%, 31.665% 101.206%, 30.938% 101.575%, 30.186% 101.789%, 29.421% 101.848%, 28.658% 101.751%, 27.912% 101.5%, 27.196% 101.095%, 26.525% 100.537%, 25.912% 99.824%, 3.32% 69.04%, 3.32% 69.04%, 2.879% 68.334%, 2.538% 67.564%, 2.295% 66.745%, 2.152% 65.894%, 2.107% 65.027%, 2.161% 64.161%, 2.314% 63.313%, 2.566% 62.499%, 2.916% 61.735%, 3.364% 61.039%, 3.364% 61.039%, 3.889% 60.447%, 4.463% 59.989%, 5.074% 59.663%, 5.707% 59.471%, 6.353% 59.411%, 6.998% 59.484%, 7.629% 59.689%, 8.236% 60.026%, 8.805% 60.496%, 9.324% 61.098%, 29.602% 88.728%, 94.042% 7.188%, 94.042% 7.188%, 94.578% 6.612%, 95.159% 6.171%, 95.774% 5.864%, 96.411% 5.69%, 97.058% 5.65%, 97.701% 5.741%, 98.329% 5.965%, 98.93% 6.321%, 99.491% 6.807%, 100% 7.425% );--background-color: var(--gds-palette-background-bright);--border-color: var(--gds-palette-background-bright)}:host:checked:hover{--background-color: var(--gds-palette-background-bright-hover);--border-color: var(--gds-palette-background-bright-hover)}:host[disabled],:host:has(*:disabled,*[disabled=true]){--border-color: var(--gds-palette-border-default);--background-color: var(--disabled-background-color)}:host[disabled]:checked,:host:has(*:disabled,*[disabled=true]):checked{--background-color: var(--gds-palette-button-primary-disabled);--border-color: var(--gds-palette-button-primary-disabled)}:host[invalid][touched]:not(:focus-within,.is-controlled):checked,:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled):checked{--background-color: var(--invalid-color)}:host:focus-visible{outline:max(2px,.15em) solid var(--border-color);outline-offset:max(2px,.15em)}:host{background-color:var(--background-color);border:1px solid var(--border-color);cursor:var(--cursor)}:host:before{content:\"\";width:.85em;height:.6em;clip-path:var(--clip-path, polygon(0 0, 0 0));box-shadow:inset 1em 1em var(--gds-palette-background-white);border-radius:var(--gds-borderRadius-sm)}\n"] }]
5518
+ }, styles: ["@layer design-system{:host{--gds-form-control-border-color: var(--gds-palette-border-dark);--gds-form-control-cursor: pointer;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{aspect-ratio:1/1;height:20px;width:fit-content;flex-shrink:0;place-content:center}:host:indeterminate{--clip-path: polygon(5% 43%, 95% 43%, 95% 57%, 5% 57%);--background-color: var(--gds-palette-background-bright);--border-color: var(--gds-palette-background-bright)}:host:checked{--clip-path: polygon( 100% 7.425%, 100% 7.425%, 100.429% 8.143%, 100.757% 8.924%, 100.986% 9.75%, 101.115% 10.605%, 101.145% 11.473%, 101.077% 12.336%, 100.91% 13.18%, 100.645% 13.986%, 100.283% 14.739%, 99.823% 15.423%, 32.983% 100%, 32.983% 100%, 32.351% 100.681%, 31.665% 101.206%, 30.938% 101.575%, 30.186% 101.789%, 29.421% 101.848%, 28.658% 101.751%, 27.912% 101.5%, 27.196% 101.095%, 26.525% 100.537%, 25.912% 99.824%, 3.32% 69.04%, 3.32% 69.04%, 2.879% 68.334%, 2.538% 67.564%, 2.295% 66.745%, 2.152% 65.894%, 2.107% 65.027%, 2.161% 64.161%, 2.314% 63.313%, 2.566% 62.499%, 2.916% 61.735%, 3.364% 61.039%, 3.364% 61.039%, 3.889% 60.447%, 4.463% 59.989%, 5.074% 59.663%, 5.707% 59.471%, 6.353% 59.411%, 6.998% 59.484%, 7.629% 59.689%, 8.236% 60.026%, 8.805% 60.496%, 9.324% 61.098%, 29.602% 88.728%, 94.042% 7.188%, 94.042% 7.188%, 94.578% 6.612%, 95.159% 6.171%, 95.774% 5.864%, 96.411% 5.69%, 97.058% 5.65%, 97.701% 5.741%, 98.329% 5.965%, 98.93% 6.321%, 99.491% 6.807%, 100% 7.425% );--background-color: var(--gds-palette-background-bright);--border-color: var(--gds-palette-background-bright)}:host:checked:hover{--background-color: var(--gds-palette-background-bright-hover);--border-color: var(--gds-palette-background-bright-hover)}:host[disabled],:host:has(*:disabled,*[disabled=true]){--border-color: var(--gds-palette-border-default);--background-color: var(--disabled-background-color)}:host[disabled]:checked,:host:has(*:disabled,*[disabled=true]):checked{--background-color: var(--gds-palette-button-primary-disabled);--border-color: var(--gds-palette-button-primary-disabled)}:host[invalid][touched]:not(:focus-within,.is-controlled):checked,:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled):checked{--background-color: var(--invalid-color)}:host:focus-visible{outline:max(2px,.15em) solid var(--border-color);outline-offset:max(2px,.15em)}:host{background-color:var(--background-color);border:1px solid var(--border-color);cursor:var(--cursor)}:host:before{content:\"\";width:.85em;height:.6em;clip-path:var(--clip-path, polygon(0 0, 0 0));box-shadow:inset 1em 1em var(--gds-palette-background-white);border-radius:var(--gds-borderRadius-sm)}}\n"] }]
5455
5519
  }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }, { type: i0.Output, args: ["tabindexChange"] }] } });
5456
5520
 
5457
5521
  class GdsDateInputComponent extends GdsSignalFormContainer {
@@ -5598,7 +5662,7 @@ class GdsDateInputComponent extends GdsSignalFormContainer {
5598
5662
  useValue: navigator.language
5599
5663
  },
5600
5664
  provideNativeDateAdapter()
5601
- ], queries: [{ propertyName: "inputComponent", first: true, predicate: GdsNativeInputDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "calendarContainer", first: true, predicate: ["calendarContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"[leading-visual]\" />\n<ng-content />\n<ng-content select=\"[trailing-visual]\" />\n@if (calendarVisible()) {\n <div\n #calendarContainer\n class=\"gds-date-input_calendar-container\"\n [ngClass]=\"dropdownPositionClass()\"\n tabindex=\"-1\"\n (blur)=\"onCalendarBlur($event)\"\n >\n <mat-calendar\n [(selected)]=\"selectedDate\"\n [startAt]=\"selectedDate()\"\n (click)=\"onCalendarClick($event)\"\n (selectedChange)=\"onSelectedDateChange()\"\n (viewChanged)=\"onCalendarViewChanged($event)\"\n />\n </div>\n}\n", styles: [":host{--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{background-color:var(--background-color);border:.5px solid var(--border-color);color:var(--text-color);cursor:var(--cursor)!important}:host ::ng-deep input:focus,:host ::ng-deep textarea:focus{outline:none}:host:focus-within,:host.is-controlled{isolation:isolate;position:relative}:host:focus-within:before,:host.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--active-color);border-radius:var(--gds-borderRadius-xs)}:host{min-height:var(--gds-size-md-rem)}:is(body[isMobile=true]) :host{min-height:var(--gds-size-lg-rem)}:host:hover{background-color:var(--hover-color)}:host[disabled]::ng-deep svg-icon,:host:has(*:disabled,*[disabled=true])::ng-deep svg-icon{color:var(--disabled-text-color)}:host[invalid][touched]:not(:focus-within,.is-controlled)::ng-deep svg-icon,:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled)::ng-deep svg-icon{color:var(--invalid-color)}:host ::ng-deep *::placeholder{color:var(--placeholder-color)}:host .gds-date-input_calendar-container{width:300px;position:absolute;z-index:1;outline:none}:host .gds-date-input_calendar-container.position-top-left{bottom:100%;left:0}:host .gds-date-input_calendar-container.position-top-right{bottom:100%;right:0}:host .gds-date-input_calendar-container.position-bottom-left{top:100%;left:0}:host .gds-date-input_calendar-container.position-bottom-right{top:100%;right:0}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-mdc-button,:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-mdc-icon-button,:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-mdc-button-touch-target{padding:0;margin:0;height:auto}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-table-header-divider{display:none}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-header{padding:0}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-body tr[aria-hidden]{display:none}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-body .mat-calendar-body-label{visibility:hidden}:host .gds-date-input_calendar-container ::ng-deep mat-calendar.mat-calendar{border-radius:var(--gds-borderRadius-md);box-shadow:var(--gds-shadow-default);background-color:var(--gds-palette-background-white)}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-header{border-bottom:1px solid var(--gds-palette-border-default);padding-top:var(--gds-spacing-2xs);margin-bottom:var(--gds-spacing-xs)}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-controls{margin:0 var(--gds-spacing-sm) var(--gds-spacing-2xs)}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-controls .mat-calendar-period-button{font-weight:var(--gds-fontWeight-title);color:var(--gds-palette-text-default-primary)}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-controls .mat-calendar-period-button svg{display:none}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-controls .mat-calendar-previous-button,:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-controls .mat-calendar-next-button{color:var(--gds-palette-button-primary-default);transform:rotate(90deg)}:host .gds-date-input_calendar-container ::ng-deep mat-calendar{--mat-datepicker-calendar-text-font: var(--gds-fontFamily-body);--mat-datepicker-calendar-text-size: var(--gds-fontSize-bodyStrong);--mat-datepicker-calendar-header-text-weight: var(--gds-fontWeight-title);--mat-datepicker-calendar-date-text-color: var(--gds-palette-text-default-primary);--mat-datepicker-calendar-header-text-color: var(--gds-palette-text-default-primary);--mat-datepicker-calendar-date-selected-state-text-color: var(--gds-palette-text-default-contrast);--mat-datepicker-calendar-date-selected-state-background-color: var(--gds-palette-button-primary-default);--mat-datepicker-calendar-date-today-outline-color: var(--gds-palette-button-primary-default);--mat-datepicker-calendar-date-today-selected-state-outline-color: var(--gds-palette-button-primary-default)}\n"], dependencies: [{ kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$4.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5665
+ ], queries: [{ propertyName: "inputComponent", first: true, predicate: GdsNativeInputDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "calendarContainer", first: true, predicate: ["calendarContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"[leading-visual]\" />\n<ng-content />\n<ng-content select=\"[trailing-visual]\" />\n@if (calendarVisible()) {\n <div\n #calendarContainer\n class=\"gds-date-input_calendar-container\"\n [ngClass]=\"dropdownPositionClass()\"\n tabindex=\"-1\"\n (blur)=\"onCalendarBlur($event)\"\n >\n <mat-calendar\n [(selected)]=\"selectedDate\"\n [startAt]=\"selectedDate()\"\n (click)=\"onCalendarClick($event)\"\n (selectedChange)=\"onSelectedDateChange()\"\n (viewChanged)=\"onCalendarViewChanged($event)\"\n />\n </div>\n}\n", styles: ["@layer design-system{:host{--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{background-color:var(--background-color);border:.5px solid var(--border-color);color:var(--text-color);cursor:var(--cursor)!important}:host ::ng-deep input:focus,:host ::ng-deep textarea:focus{outline:none}:host:focus-within,:host.is-controlled{isolation:isolate;position:relative}:host:focus-within:before,:host.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--active-color);border-radius:var(--gds-borderRadius-xs)}:host{min-height:var(--gds-size-md-rem)}:is(body[isMobile=true]) :host{min-height:var(--gds-size-lg-rem)}:host:hover{background-color:var(--hover-color)}:host[disabled]::ng-deep svg-icon,:host:has(*:disabled,*[disabled=true])::ng-deep svg-icon{color:var(--disabled-text-color)}:host[invalid][touched]:not(:focus-within,.is-controlled)::ng-deep svg-icon,:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled)::ng-deep svg-icon{color:var(--invalid-color)}:host ::ng-deep *::placeholder{color:var(--placeholder-color)}:host .gds-date-input_calendar-container{width:300px;position:absolute;z-index:1;outline:none}:host .gds-date-input_calendar-container.position-top-left{bottom:100%;left:0}:host .gds-date-input_calendar-container.position-top-right{bottom:100%;right:0}:host .gds-date-input_calendar-container.position-bottom-left{top:100%;left:0}:host .gds-date-input_calendar-container.position-bottom-right{top:100%;right:0}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-mdc-button,:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-mdc-icon-button,:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-mdc-button-touch-target{padding:0;margin:0;height:auto}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-table-header-divider{display:none}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-header{padding:0}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-body tr[aria-hidden]{display:none}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-body .mat-calendar-body-label{visibility:hidden}:host .gds-date-input_calendar-container ::ng-deep mat-calendar.mat-calendar{border-radius:var(--gds-borderRadius-md);box-shadow:var(--gds-shadow-default);background-color:var(--gds-palette-background-white)}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-header{border-bottom:1px solid var(--gds-palette-border-default);padding-top:var(--gds-spacing-2xs);margin-bottom:var(--gds-spacing-xs)}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-controls{margin:0 var(--gds-spacing-sm) var(--gds-spacing-2xs)}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-controls .mat-calendar-period-button{font-weight:var(--gds-fontWeight-title);color:var(--gds-palette-text-default-primary)}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-controls .mat-calendar-period-button svg{display:none}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-controls .mat-calendar-previous-button,:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-controls .mat-calendar-next-button{color:var(--gds-palette-button-primary-default);transform:rotate(90deg)}:host .gds-date-input_calendar-container ::ng-deep mat-calendar{--mat-datepicker-calendar-text-font: var(--gds-fontFamily-body);--mat-datepicker-calendar-text-size: var(--gds-fontSize-bodyStrong);--mat-datepicker-calendar-header-text-weight: var(--gds-fontWeight-title);--mat-datepicker-calendar-date-text-color: var(--gds-palette-text-default-primary);--mat-datepicker-calendar-header-text-color: var(--gds-palette-text-default-primary);--mat-datepicker-calendar-date-selected-state-text-color: var(--gds-palette-text-default-contrast);--mat-datepicker-calendar-date-selected-state-background-color: var(--gds-palette-button-primary-default);--mat-datepicker-calendar-date-today-outline-color: var(--gds-palette-button-primary-default);--mat-datepicker-calendar-date-today-selected-state-outline-color: var(--gds-palette-button-primary-default)}}\n"], dependencies: [{ kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$4.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5602
5666
  }
5603
5667
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsDateInputComponent, decorators: [{
5604
5668
  type: Component,
@@ -5625,7 +5689,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
5625
5689
  `,
5626
5690
  '(window:resize)': 'setWindowDimensions()',
5627
5691
  '(window:scroll)': 'setInputElementClientRect()'
5628
- }, template: "<ng-content select=\"[leading-visual]\" />\n<ng-content />\n<ng-content select=\"[trailing-visual]\" />\n@if (calendarVisible()) {\n <div\n #calendarContainer\n class=\"gds-date-input_calendar-container\"\n [ngClass]=\"dropdownPositionClass()\"\n tabindex=\"-1\"\n (blur)=\"onCalendarBlur($event)\"\n >\n <mat-calendar\n [(selected)]=\"selectedDate\"\n [startAt]=\"selectedDate()\"\n (click)=\"onCalendarClick($event)\"\n (selectedChange)=\"onSelectedDateChange()\"\n (viewChanged)=\"onCalendarViewChanged($event)\"\n />\n </div>\n}\n", styles: [":host{--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{background-color:var(--background-color);border:.5px solid var(--border-color);color:var(--text-color);cursor:var(--cursor)!important}:host ::ng-deep input:focus,:host ::ng-deep textarea:focus{outline:none}:host:focus-within,:host.is-controlled{isolation:isolate;position:relative}:host:focus-within:before,:host.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--active-color);border-radius:var(--gds-borderRadius-xs)}:host{min-height:var(--gds-size-md-rem)}:is(body[isMobile=true]) :host{min-height:var(--gds-size-lg-rem)}:host:hover{background-color:var(--hover-color)}:host[disabled]::ng-deep svg-icon,:host:has(*:disabled,*[disabled=true])::ng-deep svg-icon{color:var(--disabled-text-color)}:host[invalid][touched]:not(:focus-within,.is-controlled)::ng-deep svg-icon,:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled)::ng-deep svg-icon{color:var(--invalid-color)}:host ::ng-deep *::placeholder{color:var(--placeholder-color)}:host .gds-date-input_calendar-container{width:300px;position:absolute;z-index:1;outline:none}:host .gds-date-input_calendar-container.position-top-left{bottom:100%;left:0}:host .gds-date-input_calendar-container.position-top-right{bottom:100%;right:0}:host .gds-date-input_calendar-container.position-bottom-left{top:100%;left:0}:host .gds-date-input_calendar-container.position-bottom-right{top:100%;right:0}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-mdc-button,:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-mdc-icon-button,:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-mdc-button-touch-target{padding:0;margin:0;height:auto}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-table-header-divider{display:none}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-header{padding:0}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-body tr[aria-hidden]{display:none}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-body .mat-calendar-body-label{visibility:hidden}:host .gds-date-input_calendar-container ::ng-deep mat-calendar.mat-calendar{border-radius:var(--gds-borderRadius-md);box-shadow:var(--gds-shadow-default);background-color:var(--gds-palette-background-white)}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-header{border-bottom:1px solid var(--gds-palette-border-default);padding-top:var(--gds-spacing-2xs);margin-bottom:var(--gds-spacing-xs)}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-controls{margin:0 var(--gds-spacing-sm) var(--gds-spacing-2xs)}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-controls .mat-calendar-period-button{font-weight:var(--gds-fontWeight-title);color:var(--gds-palette-text-default-primary)}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-controls .mat-calendar-period-button svg{display:none}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-controls .mat-calendar-previous-button,:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-controls .mat-calendar-next-button{color:var(--gds-palette-button-primary-default);transform:rotate(90deg)}:host .gds-date-input_calendar-container ::ng-deep mat-calendar{--mat-datepicker-calendar-text-font: var(--gds-fontFamily-body);--mat-datepicker-calendar-text-size: var(--gds-fontSize-bodyStrong);--mat-datepicker-calendar-header-text-weight: var(--gds-fontWeight-title);--mat-datepicker-calendar-date-text-color: var(--gds-palette-text-default-primary);--mat-datepicker-calendar-header-text-color: var(--gds-palette-text-default-primary);--mat-datepicker-calendar-date-selected-state-text-color: var(--gds-palette-text-default-contrast);--mat-datepicker-calendar-date-selected-state-background-color: var(--gds-palette-button-primary-default);--mat-datepicker-calendar-date-today-outline-color: var(--gds-palette-button-primary-default);--mat-datepicker-calendar-date-today-selected-state-outline-color: var(--gds-palette-button-primary-default)}\n"] }]
5692
+ }, template: "<ng-content select=\"[leading-visual]\" />\n<ng-content />\n<ng-content select=\"[trailing-visual]\" />\n@if (calendarVisible()) {\n <div\n #calendarContainer\n class=\"gds-date-input_calendar-container\"\n [ngClass]=\"dropdownPositionClass()\"\n tabindex=\"-1\"\n (blur)=\"onCalendarBlur($event)\"\n >\n <mat-calendar\n [(selected)]=\"selectedDate\"\n [startAt]=\"selectedDate()\"\n (click)=\"onCalendarClick($event)\"\n (selectedChange)=\"onSelectedDateChange()\"\n (viewChanged)=\"onCalendarViewChanged($event)\"\n />\n </div>\n}\n", styles: ["@layer design-system{:host{--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{background-color:var(--background-color);border:.5px solid var(--border-color);color:var(--text-color);cursor:var(--cursor)!important}:host ::ng-deep input:focus,:host ::ng-deep textarea:focus{outline:none}:host:focus-within,:host.is-controlled{isolation:isolate;position:relative}:host:focus-within:before,:host.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--active-color);border-radius:var(--gds-borderRadius-xs)}:host{min-height:var(--gds-size-md-rem)}:is(body[isMobile=true]) :host{min-height:var(--gds-size-lg-rem)}:host:hover{background-color:var(--hover-color)}:host[disabled]::ng-deep svg-icon,:host:has(*:disabled,*[disabled=true])::ng-deep svg-icon{color:var(--disabled-text-color)}:host[invalid][touched]:not(:focus-within,.is-controlled)::ng-deep svg-icon,:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled)::ng-deep svg-icon{color:var(--invalid-color)}:host ::ng-deep *::placeholder{color:var(--placeholder-color)}:host .gds-date-input_calendar-container{width:300px;position:absolute;z-index:1;outline:none}:host .gds-date-input_calendar-container.position-top-left{bottom:100%;left:0}:host .gds-date-input_calendar-container.position-top-right{bottom:100%;right:0}:host .gds-date-input_calendar-container.position-bottom-left{top:100%;left:0}:host .gds-date-input_calendar-container.position-bottom-right{top:100%;right:0}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-mdc-button,:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-mdc-icon-button,:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-mdc-button-touch-target{padding:0;margin:0;height:auto}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-table-header-divider{display:none}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-header{padding:0}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-body tr[aria-hidden]{display:none}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-body .mat-calendar-body-label{visibility:hidden}:host .gds-date-input_calendar-container ::ng-deep mat-calendar.mat-calendar{border-radius:var(--gds-borderRadius-md);box-shadow:var(--gds-shadow-default);background-color:var(--gds-palette-background-white)}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-header{border-bottom:1px solid var(--gds-palette-border-default);padding-top:var(--gds-spacing-2xs);margin-bottom:var(--gds-spacing-xs)}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-controls{margin:0 var(--gds-spacing-sm) var(--gds-spacing-2xs)}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-controls .mat-calendar-period-button{font-weight:var(--gds-fontWeight-title);color:var(--gds-palette-text-default-primary)}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-controls .mat-calendar-period-button svg{display:none}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-controls .mat-calendar-previous-button,:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-controls .mat-calendar-next-button{color:var(--gds-palette-button-primary-default);transform:rotate(90deg)}:host .gds-date-input_calendar-container ::ng-deep mat-calendar{--mat-datepicker-calendar-text-font: var(--gds-fontFamily-body);--mat-datepicker-calendar-text-size: var(--gds-fontSize-bodyStrong);--mat-datepicker-calendar-header-text-weight: var(--gds-fontWeight-title);--mat-datepicker-calendar-date-text-color: var(--gds-palette-text-default-primary);--mat-datepicker-calendar-header-text-color: var(--gds-palette-text-default-primary);--mat-datepicker-calendar-date-selected-state-text-color: var(--gds-palette-text-default-contrast);--mat-datepicker-calendar-date-selected-state-background-color: var(--gds-palette-button-primary-default);--mat-datepicker-calendar-date-today-outline-color: var(--gds-palette-button-primary-default);--mat-datepicker-calendar-date-today-selected-state-outline-color: var(--gds-palette-button-primary-default)}}\n"] }]
5629
5693
  }], propDecorators: { dropdownPositionX: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownPositionX", required: false }] }], dropdownPositionY: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownPositionY", required: false }] }], blurred: [{ type: i0.Output, args: ["blurred"] }], selectedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDate", required: false }] }, { type: i0.Output, args: ["selectedDateChange"] }], calendarContainer: [{ type: i0.ViewChild, args: ['calendarContainer', { isSignal: true }] }], inputComponent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GdsNativeInputDirective), { isSignal: true }] }] } });
5630
5694
 
5631
5695
  class GdsFileUploadComponent extends GdsSignalFormControl {
@@ -5667,7 +5731,7 @@ class GdsFileUploadComponent extends GdsSignalFormControl {
5667
5731
  this.fileUpload().nativeElement.click();
5668
5732
  }
5669
5733
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsFileUploadComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
5670
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsFileUploadComponent, isStandalone: true, selector: "gds-file-upload", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, dragDropLabel: { classPropertyName: "dragDropLabel", publicName: "dragDropLabel", isSignal: true, isRequired: false, transformFunction: null }, inputAriaLabel: { classPropertyName: "inputAriaLabel", publicName: "inputAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, host: { listeners: { "drop": "onFileDrop($event)", "dragover": "preventDragEvent($event, true)", "dragleave": "preventDragEvent($event)" }, properties: { "attr.data-dragover": "dragOver() ? \"\": undefined" }, classAttribute: "\n gds-height-100-parent\n gds-width-100-parent\n " }, viewQueries: [{ propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<label\n tabindex=\"0\"\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-flex-column\n gds-gap-sm\n gds-height-100-parent\n gds-justify-content-center\n gds-padding-md\n gds-radius-md\n gds-width-100-parent\n \"\n [ngClass]=\"{ 'gds-pointer-events-none': disabled() }\"\n [attr.inert]=\"disabled() ? '' : undefined\"\n (keydown.enter)=\"openFileSelector()\"\n>\n <gds-icon\n class=\"\n gds-icon-size-lg\n icon\n \"\n key=\"line-cloud-up\"\n aria-hidden=\"true\"\n />\n <div class=\"\n gds-align-items-center\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n gds-text-body\n gds-text-center\n \">\n <span class=\"\n gds-text-body-large-strong\n text\n \">{{ dragDropLabel() | translate }}</span>\n <span class=\"text\">{{ 'Gds.FileUpload.Separator' | translate }}</span>\n <a class=\"link\">\n {{ 'Gds.FileUpload.Browse' | translate }}\n </a>\n </div>\n <span\n class=\"\n gds-align-content-center\n gds-display-flex\n gds-flex-wrap\n gds-gap-2xs\n gds-justify-content-center\n gds-text-body\n gds-text-secondary\n \"\n >\n <ng-content />\n </span>\n\n <input\n #fileUpload\n type=\"file\"\n class=\"gds-display-none\"\n [accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [attr.aria-label]=\"inputAriaLabel() | translate\"\n (change)=\"fileSelected($event)\"\n />\n</label>\n", styles: [":host{--gds-form-control-cursor: pointer;--gds-form-control-border-color: var(--gds-palette-border-primary);--gds-form-control-background-color: var(--gds-palette-background-base);--gds-form-control-text-color: var(--gds-palette-text-primary-primary);--icon-color: var(--gds-brand-300);--text-decoration: underline;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host[disabled],:host:has(*:disabled,*[disabled=true]){--icon-color: var(--disabled-text-color);--border-color: var(--disabled-text-color)}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--icon-color: var(--invalid-color);--background-color: var(--gds-palette-helper-error-default)}:host,:host label{cursor:var(--cursor)}:host[data-dragover] label,:host label:focus{outline:var(--border-color) auto 1px}:host label{background:var(--background-color);border:2px dashed var(--border-color)}:host label .text{color:var(--text-color)}:host label .icon{color:var(--icon-color)}:host label .link{color:var(--text-color)}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5734
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsFileUploadComponent, isStandalone: true, selector: "gds-file-upload", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, dragDropLabel: { classPropertyName: "dragDropLabel", publicName: "dragDropLabel", isSignal: true, isRequired: false, transformFunction: null }, inputAriaLabel: { classPropertyName: "inputAriaLabel", publicName: "inputAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, host: { listeners: { "drop": "onFileDrop($event)", "dragover": "preventDragEvent($event, true)", "dragleave": "preventDragEvent($event)" }, properties: { "attr.data-dragover": "dragOver() ? \"\": undefined" }, classAttribute: "\n gds-height-100-parent\n gds-width-100-parent\n " }, viewQueries: [{ propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<label\n tabindex=\"0\"\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-flex-column\n gds-gap-sm\n gds-height-100-parent\n gds-justify-content-center\n gds-padding-md\n gds-radius-md\n gds-width-100-parent\n \"\n [ngClass]=\"{ 'gds-pointer-events-none': disabled() }\"\n [attr.inert]=\"disabled() ? '' : undefined\"\n (keydown.enter)=\"openFileSelector()\"\n>\n <gds-icon\n class=\"\n gds-icon-size-lg\n icon\n \"\n key=\"line-cloud-up\"\n aria-hidden=\"true\"\n />\n <div class=\"\n gds-align-items-center\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n gds-text-body\n gds-text-center\n \">\n <span class=\"\n gds-text-body-large-strong\n text\n \">{{ dragDropLabel() | translate }}</span>\n <span class=\"text\">{{ 'Gds.FileUpload.Separator' | translate }}</span>\n <a class=\"link\">\n {{ 'Gds.FileUpload.Browse' | translate }}\n </a>\n </div>\n <span\n class=\"\n gds-align-content-center\n gds-display-flex\n gds-flex-wrap\n gds-gap-2xs\n gds-justify-content-center\n gds-text-body\n gds-text-secondary\n \"\n >\n <ng-content />\n </span>\n\n <input\n #fileUpload\n type=\"file\"\n class=\"gds-display-none\"\n [accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [attr.aria-label]=\"inputAriaLabel() | translate\"\n (change)=\"fileSelected($event)\"\n />\n</label>\n", styles: ["@layer design-system{:host{--gds-form-control-cursor: pointer;--gds-form-control-border-color: var(--gds-palette-border-primary);--gds-form-control-background-color: var(--gds-palette-background-base);--gds-form-control-text-color: var(--gds-palette-text-primary-primary);--icon-color: var(--gds-brand-300);--text-decoration: underline;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host[disabled],:host:has(*:disabled,*[disabled=true]){--icon-color: var(--disabled-text-color);--border-color: var(--disabled-text-color)}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--icon-color: var(--invalid-color);--background-color: var(--gds-palette-helper-error-default)}:host,:host label{cursor:var(--cursor)}:host[data-dragover] label,:host label:focus{outline:var(--border-color) auto 1px}:host label{background:var(--background-color);border:2px dashed var(--border-color)}:host label .text{color:var(--text-color)}:host label .icon{color:var(--icon-color)}:host label .link{color:var(--text-color)}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5671
5735
  }
5672
5736
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsFileUploadComponent, decorators: [{
5673
5737
  type: Component,
@@ -5680,20 +5744,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
5680
5744
  gds-height-100-parent
5681
5745
  gds-width-100-parent
5682
5746
  `
5683
- }, template: "<label\n tabindex=\"0\"\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-flex-column\n gds-gap-sm\n gds-height-100-parent\n gds-justify-content-center\n gds-padding-md\n gds-radius-md\n gds-width-100-parent\n \"\n [ngClass]=\"{ 'gds-pointer-events-none': disabled() }\"\n [attr.inert]=\"disabled() ? '' : undefined\"\n (keydown.enter)=\"openFileSelector()\"\n>\n <gds-icon\n class=\"\n gds-icon-size-lg\n icon\n \"\n key=\"line-cloud-up\"\n aria-hidden=\"true\"\n />\n <div class=\"\n gds-align-items-center\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n gds-text-body\n gds-text-center\n \">\n <span class=\"\n gds-text-body-large-strong\n text\n \">{{ dragDropLabel() | translate }}</span>\n <span class=\"text\">{{ 'Gds.FileUpload.Separator' | translate }}</span>\n <a class=\"link\">\n {{ 'Gds.FileUpload.Browse' | translate }}\n </a>\n </div>\n <span\n class=\"\n gds-align-content-center\n gds-display-flex\n gds-flex-wrap\n gds-gap-2xs\n gds-justify-content-center\n gds-text-body\n gds-text-secondary\n \"\n >\n <ng-content />\n </span>\n\n <input\n #fileUpload\n type=\"file\"\n class=\"gds-display-none\"\n [accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [attr.aria-label]=\"inputAriaLabel() | translate\"\n (change)=\"fileSelected($event)\"\n />\n</label>\n", styles: [":host{--gds-form-control-cursor: pointer;--gds-form-control-border-color: var(--gds-palette-border-primary);--gds-form-control-background-color: var(--gds-palette-background-base);--gds-form-control-text-color: var(--gds-palette-text-primary-primary);--icon-color: var(--gds-brand-300);--text-decoration: underline;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host[disabled],:host:has(*:disabled,*[disabled=true]){--icon-color: var(--disabled-text-color);--border-color: var(--disabled-text-color)}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--icon-color: var(--invalid-color);--background-color: var(--gds-palette-helper-error-default)}:host,:host label{cursor:var(--cursor)}:host[data-dragover] label,:host label:focus{outline:var(--border-color) auto 1px}:host label{background:var(--background-color);border:2px dashed var(--border-color)}:host label .text{color:var(--text-color)}:host label .icon{color:var(--icon-color)}:host label .link{color:var(--text-color)}\n"] }]
5747
+ }, template: "<label\n tabindex=\"0\"\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-flex-column\n gds-gap-sm\n gds-height-100-parent\n gds-justify-content-center\n gds-padding-md\n gds-radius-md\n gds-width-100-parent\n \"\n [ngClass]=\"{ 'gds-pointer-events-none': disabled() }\"\n [attr.inert]=\"disabled() ? '' : undefined\"\n (keydown.enter)=\"openFileSelector()\"\n>\n <gds-icon\n class=\"\n gds-icon-size-lg\n icon\n \"\n key=\"line-cloud-up\"\n aria-hidden=\"true\"\n />\n <div class=\"\n gds-align-items-center\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n gds-text-body\n gds-text-center\n \">\n <span class=\"\n gds-text-body-large-strong\n text\n \">{{ dragDropLabel() | translate }}</span>\n <span class=\"text\">{{ 'Gds.FileUpload.Separator' | translate }}</span>\n <a class=\"link\">\n {{ 'Gds.FileUpload.Browse' | translate }}\n </a>\n </div>\n <span\n class=\"\n gds-align-content-center\n gds-display-flex\n gds-flex-wrap\n gds-gap-2xs\n gds-justify-content-center\n gds-text-body\n gds-text-secondary\n \"\n >\n <ng-content />\n </span>\n\n <input\n #fileUpload\n type=\"file\"\n class=\"gds-display-none\"\n [accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [attr.aria-label]=\"inputAriaLabel() | translate\"\n (change)=\"fileSelected($event)\"\n />\n</label>\n", styles: ["@layer design-system{:host{--gds-form-control-cursor: pointer;--gds-form-control-border-color: var(--gds-palette-border-primary);--gds-form-control-background-color: var(--gds-palette-background-base);--gds-form-control-text-color: var(--gds-palette-text-primary-primary);--icon-color: var(--gds-brand-300);--text-decoration: underline;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host[disabled],:host:has(*:disabled,*[disabled=true]){--icon-color: var(--disabled-text-color);--border-color: var(--disabled-text-color)}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--icon-color: var(--invalid-color);--background-color: var(--gds-palette-helper-error-default)}:host,:host label{cursor:var(--cursor)}:host[data-dragover] label,:host label:focus{outline:var(--border-color) auto 1px}:host label{background:var(--background-color);border:2px dashed var(--border-color)}:host label .text{color:var(--text-color)}:host label .icon{color:var(--icon-color)}:host label .link{color:var(--text-color)}}\n"] }]
5684
5748
  }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], dragDropLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragDropLabel", required: false }] }], inputAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputAriaLabel", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }], fileUpload: [{ type: i0.ViewChild, args: ['fileUpload', { isSignal: true }] }] } });
5685
5749
 
5686
5750
  class GdsFormControlComponent extends GdsSignalFormContainer {
5687
5751
  locked = input(false, { ...(ngDevMode ? { debugName: "locked" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
5688
5752
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsFormControlComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
5689
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsFormControlComponent, isStandalone: true, selector: "gds-form-control", inputs: { locked: { classPropertyName: "locked", publicName: "locked", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.locked": "locked() ? \"\" : undefined" }, classAttribute: "gds-display-flex" }, usesInheritance: true, ngImport: i0, template: "<div class=\"\n gds-text-body\n gds-whitespace-nowrap\n label\n\">\n <ng-content select=\"[label]\" />\n</div>\n<div class=\"\n body\n gds-display-flex\n gds-flex-column\n gds-min-height-0\n gds-row-gap-2xs\n gds-text-body\n gds-text-primary\n\">\n <ng-container *ngTemplateOutlet=\"locked() ? lockedTemplate : editableTemplate\" />\n @if (formFieldError(); as errorMessage) {\n <span class=\"\n feedback\n gds-text-caption\n \">\n {{ errorMessage | translate }}\n </span>\n }\n</div>\n\n<ng-template #lockedTemplate>\n <ng-content select=\"[locked]\" />\n</ng-template>\n\n<ng-template #editableTemplate>\n <ng-content />\n</ng-template>\n", styles: [":host{flex-direction:column;align-items:baseline;gap:var(--gds-spacing-2xs);--gds-form-control-feedback-display: none;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--gds-form-control-feedback-display: initial;--feedback-color: var(--invalid-color)}:host[disabled],:host:has(*:disabled,*[disabled=true]){--feedback-color: var(--disabled-text-color)}:host.gds-flex-row .label,:host.gds-flex-row-reverse .label{flex:1}:is(body[isMobile=true]) :host.gds-flex-row,:is(body[isMobile=true]) :host.gds-flex-row-reverse{gap:var(--gds-spacing-sm)}:host .label:empty{display:none}:host .label{color:var(--text-color, var(--gds-palette-text-default-primary))}:host:not(.gds-flex-row):not(.gds-flex-row-reverse) .body{width:100%}:host .feedback{display:var(--gds-form-control-feedback-display);color:var(--feedback-color, var(--gds-palette-text-default-tertiary))}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5753
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsFormControlComponent, isStandalone: true, selector: "gds-form-control", inputs: { locked: { classPropertyName: "locked", publicName: "locked", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.locked": "locked() ? \"\" : undefined" }, classAttribute: "gds-display-flex" }, usesInheritance: true, ngImport: i0, template: "<div class=\"\n gds-text-body\n gds-whitespace-nowrap\n label\n\">\n <ng-content select=\"[label]\" />\n</div>\n<div class=\"\n body\n gds-display-flex\n gds-flex-column\n gds-min-height-0\n gds-row-gap-2xs\n gds-text-body\n gds-text-primary\n\">\n <ng-container *ngTemplateOutlet=\"locked() ? lockedTemplate : editableTemplate\" />\n @if (formFieldError(); as errorMessage) {\n <span class=\"\n feedback\n gds-text-caption\n \">\n {{ errorMessage | translate }}\n </span>\n }\n</div>\n\n<ng-template #lockedTemplate>\n <ng-content select=\"[locked]\" />\n</ng-template>\n\n<ng-template #editableTemplate>\n <ng-content />\n</ng-template>\n", styles: ["@layer design-system{:host{flex-direction:column;align-items:baseline;gap:var(--gds-spacing-2xs);--gds-form-control-feedback-display: none;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--gds-form-control-feedback-display: initial;--feedback-color: var(--invalid-color)}:host[disabled],:host:has(*:disabled,*[disabled=true]){--feedback-color: var(--disabled-text-color)}:host.gds-flex-row .label,:host.gds-flex-row-reverse .label{flex:1}:is(body[isMobile=true]) :host.gds-flex-row,:is(body[isMobile=true]) :host.gds-flex-row-reverse{gap:var(--gds-spacing-sm)}:host .label:empty{display:none}:host .label{color:var(--text-color, var(--gds-palette-text-default-primary))}:host:not(.gds-flex-row):not(.gds-flex-row-reverse) .body{width:100%}:host .feedback{display:var(--gds-form-control-feedback-display);color:var(--feedback-color, var(--gds-palette-text-default-tertiary))}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5690
5754
  }
5691
5755
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsFormControlComponent, decorators: [{
5692
5756
  type: Component,
5693
5757
  args: [{ selector: 'gds-form-control', imports: [NgTemplateOutlet, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, host: {
5694
5758
  class: 'gds-display-flex',
5695
5759
  '[attr.locked]': 'locked() ? "" : undefined'
5696
- }, template: "<div class=\"\n gds-text-body\n gds-whitespace-nowrap\n label\n\">\n <ng-content select=\"[label]\" />\n</div>\n<div class=\"\n body\n gds-display-flex\n gds-flex-column\n gds-min-height-0\n gds-row-gap-2xs\n gds-text-body\n gds-text-primary\n\">\n <ng-container *ngTemplateOutlet=\"locked() ? lockedTemplate : editableTemplate\" />\n @if (formFieldError(); as errorMessage) {\n <span class=\"\n feedback\n gds-text-caption\n \">\n {{ errorMessage | translate }}\n </span>\n }\n</div>\n\n<ng-template #lockedTemplate>\n <ng-content select=\"[locked]\" />\n</ng-template>\n\n<ng-template #editableTemplate>\n <ng-content />\n</ng-template>\n", styles: [":host{flex-direction:column;align-items:baseline;gap:var(--gds-spacing-2xs);--gds-form-control-feedback-display: none;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--gds-form-control-feedback-display: initial;--feedback-color: var(--invalid-color)}:host[disabled],:host:has(*:disabled,*[disabled=true]){--feedback-color: var(--disabled-text-color)}:host.gds-flex-row .label,:host.gds-flex-row-reverse .label{flex:1}:is(body[isMobile=true]) :host.gds-flex-row,:is(body[isMobile=true]) :host.gds-flex-row-reverse{gap:var(--gds-spacing-sm)}:host .label:empty{display:none}:host .label{color:var(--text-color, var(--gds-palette-text-default-primary))}:host:not(.gds-flex-row):not(.gds-flex-row-reverse) .body{width:100%}:host .feedback{display:var(--gds-form-control-feedback-display);color:var(--feedback-color, var(--gds-palette-text-default-tertiary))}\n"] }]
5760
+ }, template: "<div class=\"\n gds-text-body\n gds-whitespace-nowrap\n label\n\">\n <ng-content select=\"[label]\" />\n</div>\n<div class=\"\n body\n gds-display-flex\n gds-flex-column\n gds-min-height-0\n gds-row-gap-2xs\n gds-text-body\n gds-text-primary\n\">\n <ng-container *ngTemplateOutlet=\"locked() ? lockedTemplate : editableTemplate\" />\n @if (formFieldError(); as errorMessage) {\n <span class=\"\n feedback\n gds-text-caption\n \">\n {{ errorMessage | translate }}\n </span>\n }\n</div>\n\n<ng-template #lockedTemplate>\n <ng-content select=\"[locked]\" />\n</ng-template>\n\n<ng-template #editableTemplate>\n <ng-content />\n</ng-template>\n", styles: ["@layer design-system{:host{flex-direction:column;align-items:baseline;gap:var(--gds-spacing-2xs);--gds-form-control-feedback-display: none;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--gds-form-control-feedback-display: initial;--feedback-color: var(--invalid-color)}:host[disabled],:host:has(*:disabled,*[disabled=true]){--feedback-color: var(--disabled-text-color)}:host.gds-flex-row .label,:host.gds-flex-row-reverse .label{flex:1}:is(body[isMobile=true]) :host.gds-flex-row,:is(body[isMobile=true]) :host.gds-flex-row-reverse{gap:var(--gds-spacing-sm)}:host .label:empty{display:none}:host .label{color:var(--text-color, var(--gds-palette-text-default-primary))}:host:not(.gds-flex-row):not(.gds-flex-row-reverse) .body{width:100%}:host .feedback{display:var(--gds-form-control-feedback-display);color:var(--feedback-color, var(--gds-palette-text-default-tertiary))}}\n"] }]
5697
5761
  }], propDecorators: { locked: [{ type: i0.Input, args: [{ isSignal: true, alias: "locked", required: false }] }] } });
5698
5762
 
5699
5763
  class GdsMapArrayToRadioOptionsPipe {
@@ -5736,7 +5800,7 @@ class GdsRadioComponent extends GdsSignalFormControl {
5736
5800
  this.value.set(value);
5737
5801
  }
5738
5802
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsRadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
5739
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsRadioComponent, isStandalone: true, selector: "gds-radio", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "role": "radiogroup" }, properties: { "attr.invalid": "invalid() ? '' : null" }, classAttribute: "gds-display-flex gds-align-items-start gds-gap-2xs" }, queries: [{ propertyName: "optionTmpl", first: true, predicate: ["optionTmpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@for (option of options(); track $index) {\n <div class=\"\n gds-height-100-parent\n gds-width-100-parent\n item\n \">\n <!-- use 'name() + id' for \"id\" and \"for\" to prevent issue where multiple radios have the same id -->\n @let id = name() + option.id;\n <ng-container\n *ngTemplateOutlet=\"\n optionTmpl() ?? defaultTmpl;\n context: {\n config:\n option\n | gdsBuildOptionConfig\n : { name: name(), selected: option.value === value(), disabled: disabled(), invalid: invalid() }\n : id,\n onChange: handleChange.bind(this)\n }\n \"\n />\n </div>\n}\n\n<ng-template\n #defaultTmpl\n let-config=\"config\"\n let-onChange=\"onChange\"\n>\n <input\n type=\"radio\"\n [id]=\"config.id\"\n [name]=\"config.name\"\n [value]=\"config.value\"\n [checked]=\"config.selected\"\n [disabled]=\"config.disabled\"\n [attr.invalid]=\"config.invalid\"\n [attr.aria-labelledby]=\"config.id + '-label'\"\n (change)=\"onChange(config.value)\"\n />\n <label\n class=\"\n gds-display-none-empty\n gds-margin-inline-start-2xs\n \"\n [for]=\"config.id\"\n [id]=\"config.id + '-label'\"\n >{{ config.label }}</label\n >\n</ng-template>\n", styles: [":host{--gds-form-control-cursor: pointer;--gds-form-control-border-color: var(--gds-palette-border-dark);--gds-form-control-disabled-background-color: var(--gds-palette-background-white);--gds-form-control-disabled-border-color: var(--gds-palette-border-default);--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{--radio-size: var(--gds-primitive-size-500);--radio-border-width: var(--gds-borderWidth-md);--font: var(--gds-text-body-shorthand);display:flex;flex-direction:column}:host.gds-radio-compact{--radio-size: var(--gds-primitive-size-400);--font: var(--gds-text-caption-shorthand)}:host{font:var(--font);color:var(--text-color)}:host .item{cursor:var(--cursor)}:host .item:hover:has(input:not(:disabled)){--background-color: var(--gds-palette-background-base);--border-color: var(--gds-palette-background-bright-hover);--radio-border-width: var(--gds-borderWidth-lg)}:host[invalid][touched]:not(:focus-within,.is-controlled) .item:hover,:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled) .item:hover{--border-color: var(--invalid-color)}:host label{vertical-align:middle;cursor:inherit}:host input[type=radio]{appearance:none;background-color:var(--background-color);border-radius:var(--gds-borderRadius-pill);width:var(--radio-size);height:var(--radio-size);border:var(--radio-border-width) solid var(--border-color);cursor:inherit}:host input[type=radio]:focus-visible{outline:var(--gds-borderWidth-lg) solid var(--gds-palette-border-dark);outline-offset:2px}:host input[type=radio]:checked{--border-color: var(--active-color);--radio-border-width: var(--gds-borderWidth-xl)}:host input[type=radio]:checked:disabled{--border-color: var(--disabled-border-color)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: A11yModule }, { kind: "pipe", type: GdsBuildOptionConfigPipe, name: "gdsBuildOptionConfig" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5803
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsRadioComponent, isStandalone: true, selector: "gds-radio", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "role": "radiogroup" }, properties: { "attr.invalid": "invalid() ? '' : null" }, classAttribute: "gds-display-flex gds-align-items-start gds-gap-2xs" }, queries: [{ propertyName: "optionTmpl", first: true, predicate: ["optionTmpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@for (option of options(); track $index) {\n <div class=\"\n gds-height-100-parent\n gds-width-100-parent\n item\n \">\n <!-- use 'name() + id' for \"id\" and \"for\" to prevent issue where multiple radios have the same id -->\n @let id = name() + option.id;\n <ng-container\n *ngTemplateOutlet=\"\n optionTmpl() ?? defaultTmpl;\n context: {\n config:\n option\n | gdsBuildOptionConfig\n : { name: name(), selected: option.value === value(), disabled: disabled(), invalid: invalid() }\n : id,\n onChange: handleChange.bind(this)\n }\n \"\n />\n </div>\n}\n\n<ng-template\n #defaultTmpl\n let-config=\"config\"\n let-onChange=\"onChange\"\n>\n <input\n type=\"radio\"\n [id]=\"config.id\"\n [name]=\"config.name\"\n [value]=\"config.value\"\n [checked]=\"config.selected\"\n [disabled]=\"config.disabled\"\n [attr.invalid]=\"config.invalid\"\n [attr.aria-labelledby]=\"config.id + '-label'\"\n (change)=\"onChange(config.value)\"\n />\n <label\n class=\"\n gds-display-none-empty\n gds-margin-inline-start-2xs\n \"\n [for]=\"config.id\"\n [id]=\"config.id + '-label'\"\n >{{ config.label }}</label\n >\n</ng-template>\n", styles: ["@layer design-system{:host{--gds-form-control-cursor: pointer;--gds-form-control-border-color: var(--gds-palette-border-dark);--gds-form-control-disabled-background-color: var(--gds-palette-background-white);--gds-form-control-disabled-border-color: var(--gds-palette-border-default);--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{--radio-size: var(--gds-primitive-size-500);--radio-border-width: var(--gds-borderWidth-md);--font: var(--gds-text-body-shorthand);display:flex;flex-direction:column}:host.gds-radio-compact{--radio-size: var(--gds-primitive-size-400);--font: var(--gds-text-caption-shorthand)}:host{font:var(--font);color:var(--text-color)}:host .item{cursor:var(--cursor)}:host .item:hover:has(input:not(:disabled)){--background-color: var(--gds-palette-background-base);--border-color: var(--gds-palette-background-bright-hover);--radio-border-width: var(--gds-borderWidth-lg)}:host[invalid][touched]:not(:focus-within,.is-controlled) .item:hover,:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled) .item:hover{--border-color: var(--invalid-color)}:host label{vertical-align:middle;cursor:inherit}:host input[type=radio]{appearance:none;background-color:var(--background-color);border-radius:var(--gds-borderRadius-pill);width:var(--radio-size);height:var(--radio-size);border:var(--radio-border-width) solid var(--border-color);cursor:inherit}:host input[type=radio]:focus-visible{outline:var(--gds-borderWidth-lg) solid var(--gds-palette-border-dark);outline-offset:2px}:host input[type=radio]:checked{--border-color: var(--active-color);--radio-border-width: var(--gds-borderWidth-xl)}:host input[type=radio]:checked:disabled{--border-color: var(--disabled-border-color)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: A11yModule }, { kind: "pipe", type: GdsBuildOptionConfigPipe, name: "gdsBuildOptionConfig" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5740
5804
  }
5741
5805
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsRadioComponent, decorators: [{
5742
5806
  type: Component,
@@ -5744,7 +5808,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
5744
5808
  class: 'gds-display-flex gds-align-items-start gds-gap-2xs',
5745
5809
  '[attr.invalid]': "invalid() ? '' : null",
5746
5810
  role: 'radiogroup'
5747
- }, template: "@for (option of options(); track $index) {\n <div class=\"\n gds-height-100-parent\n gds-width-100-parent\n item\n \">\n <!-- use 'name() + id' for \"id\" and \"for\" to prevent issue where multiple radios have the same id -->\n @let id = name() + option.id;\n <ng-container\n *ngTemplateOutlet=\"\n optionTmpl() ?? defaultTmpl;\n context: {\n config:\n option\n | gdsBuildOptionConfig\n : { name: name(), selected: option.value === value(), disabled: disabled(), invalid: invalid() }\n : id,\n onChange: handleChange.bind(this)\n }\n \"\n />\n </div>\n}\n\n<ng-template\n #defaultTmpl\n let-config=\"config\"\n let-onChange=\"onChange\"\n>\n <input\n type=\"radio\"\n [id]=\"config.id\"\n [name]=\"config.name\"\n [value]=\"config.value\"\n [checked]=\"config.selected\"\n [disabled]=\"config.disabled\"\n [attr.invalid]=\"config.invalid\"\n [attr.aria-labelledby]=\"config.id + '-label'\"\n (change)=\"onChange(config.value)\"\n />\n <label\n class=\"\n gds-display-none-empty\n gds-margin-inline-start-2xs\n \"\n [for]=\"config.id\"\n [id]=\"config.id + '-label'\"\n >{{ config.label }}</label\n >\n</ng-template>\n", styles: [":host{--gds-form-control-cursor: pointer;--gds-form-control-border-color: var(--gds-palette-border-dark);--gds-form-control-disabled-background-color: var(--gds-palette-background-white);--gds-form-control-disabled-border-color: var(--gds-palette-border-default);--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{--radio-size: var(--gds-primitive-size-500);--radio-border-width: var(--gds-borderWidth-md);--font: var(--gds-text-body-shorthand);display:flex;flex-direction:column}:host.gds-radio-compact{--radio-size: var(--gds-primitive-size-400);--font: var(--gds-text-caption-shorthand)}:host{font:var(--font);color:var(--text-color)}:host .item{cursor:var(--cursor)}:host .item:hover:has(input:not(:disabled)){--background-color: var(--gds-palette-background-base);--border-color: var(--gds-palette-background-bright-hover);--radio-border-width: var(--gds-borderWidth-lg)}:host[invalid][touched]:not(:focus-within,.is-controlled) .item:hover,:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled) .item:hover{--border-color: var(--invalid-color)}:host label{vertical-align:middle;cursor:inherit}:host input[type=radio]{appearance:none;background-color:var(--background-color);border-radius:var(--gds-borderRadius-pill);width:var(--radio-size);height:var(--radio-size);border:var(--radio-border-width) solid var(--border-color);cursor:inherit}:host input[type=radio]:focus-visible{outline:var(--gds-borderWidth-lg) solid var(--gds-palette-border-dark);outline-offset:2px}:host input[type=radio]:checked{--border-color: var(--active-color);--radio-border-width: var(--gds-borderWidth-xl)}:host input[type=radio]:checked:disabled{--border-color: var(--disabled-border-color)}\n"] }]
5811
+ }, template: "@for (option of options(); track $index) {\n <div class=\"\n gds-height-100-parent\n gds-width-100-parent\n item\n \">\n <!-- use 'name() + id' for \"id\" and \"for\" to prevent issue where multiple radios have the same id -->\n @let id = name() + option.id;\n <ng-container\n *ngTemplateOutlet=\"\n optionTmpl() ?? defaultTmpl;\n context: {\n config:\n option\n | gdsBuildOptionConfig\n : { name: name(), selected: option.value === value(), disabled: disabled(), invalid: invalid() }\n : id,\n onChange: handleChange.bind(this)\n }\n \"\n />\n </div>\n}\n\n<ng-template\n #defaultTmpl\n let-config=\"config\"\n let-onChange=\"onChange\"\n>\n <input\n type=\"radio\"\n [id]=\"config.id\"\n [name]=\"config.name\"\n [value]=\"config.value\"\n [checked]=\"config.selected\"\n [disabled]=\"config.disabled\"\n [attr.invalid]=\"config.invalid\"\n [attr.aria-labelledby]=\"config.id + '-label'\"\n (change)=\"onChange(config.value)\"\n />\n <label\n class=\"\n gds-display-none-empty\n gds-margin-inline-start-2xs\n \"\n [for]=\"config.id\"\n [id]=\"config.id + '-label'\"\n >{{ config.label }}</label\n >\n</ng-template>\n", styles: ["@layer design-system{:host{--gds-form-control-cursor: pointer;--gds-form-control-border-color: var(--gds-palette-border-dark);--gds-form-control-disabled-background-color: var(--gds-palette-background-white);--gds-form-control-disabled-border-color: var(--gds-palette-border-default);--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{--radio-size: var(--gds-primitive-size-500);--radio-border-width: var(--gds-borderWidth-md);--font: var(--gds-text-body-shorthand);display:flex;flex-direction:column}:host.gds-radio-compact{--radio-size: var(--gds-primitive-size-400);--font: var(--gds-text-caption-shorthand)}:host{font:var(--font);color:var(--text-color)}:host .item{cursor:var(--cursor)}:host .item:hover:has(input:not(:disabled)){--background-color: var(--gds-palette-background-base);--border-color: var(--gds-palette-background-bright-hover);--radio-border-width: var(--gds-borderWidth-lg)}:host[invalid][touched]:not(:focus-within,.is-controlled) .item:hover,:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled) .item:hover{--border-color: var(--invalid-color)}:host label{vertical-align:middle;cursor:inherit}:host input[type=radio]{appearance:none;background-color:var(--background-color);border-radius:var(--gds-borderRadius-pill);width:var(--radio-size);height:var(--radio-size);border:var(--radio-border-width) solid var(--border-color);cursor:inherit}:host input[type=radio]:focus-visible{outline:var(--gds-borderWidth-lg) solid var(--gds-palette-border-dark);outline-offset:2px}:host input[type=radio]:checked{--border-color: var(--active-color);--radio-border-width: var(--gds-borderWidth-xl)}:host input[type=radio]:checked:disabled{--border-color: var(--disabled-border-color)}}\n"] }]
5748
5812
  }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], optionTmpl: [{ type: i0.ContentChild, args: ['optionTmpl', { isSignal: true }] }] } });
5749
5813
 
5750
5814
  class GdsRadioOptionDirective {
@@ -5771,7 +5835,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
5771
5835
 
5772
5836
  class GdsButtonRadioOptionComponent extends GdsRadioOptionDirective {
5773
5837
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsButtonRadioOptionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
5774
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: GdsButtonRadioOptionComponent, isStandalone: true, selector: "input[gds-button-radio-option]", host: { attributes: { "type": "radio" }, listeners: { "change": "onChange()" }, properties: { "checked": "selected()", "id": "id()", "name": "name()", "disabled": "disabled()", "attr.invalid": "invalid()", "attr.data-label": "label()", "attr.aria-label": "label()" }, classAttribute: "gds-text-caption-strong gds-radius-sm" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [":host{border:var(--gds-borderWidth-md) solid;border-color:var(--gds-palette-border-primary);color:var(--gds-palette-text-primary-primary)}:host:hover,:host:checked{border-color:var(--gds-palette-border-selected);background-color:var(--gds-palette-background-hover)}:host[invalid=true],:host:disabled{border-color:inherit;color:inherit;background-color:inherit}:host[invalid=true]:hover,:host[invalid=true]:checked{background-color:var(--gds-palette-helper-error-default)}:host:focus-visible{outline:var(--gds-borderWidth-lg) solid var(--gds-palette-border-dark);outline-offset:2px}:host:before{display:block;content:attr(data-label);padding:var(--gds-spacing-2xs)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5838
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: GdsButtonRadioOptionComponent, isStandalone: true, selector: "input[gds-button-radio-option]", host: { attributes: { "type": "radio" }, listeners: { "change": "onChange()" }, properties: { "checked": "selected()", "id": "id()", "name": "name()", "disabled": "disabled()", "attr.invalid": "invalid()", "attr.data-label": "label()", "attr.aria-label": "label()" }, classAttribute: "gds-text-caption-strong gds-radius-sm" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: ["@layer design-system{:host{border:var(--gds-borderWidth-md) solid;border-color:var(--gds-palette-border-primary);color:var(--gds-palette-text-primary-primary)}:host:hover,:host:checked{border-color:var(--gds-palette-border-selected);background-color:var(--gds-palette-background-hover)}:host[invalid=true],:host:disabled{border-color:inherit;color:inherit;background-color:inherit}:host[invalid=true]:hover,:host[invalid=true]:checked{background-color:var(--gds-palette-helper-error-default)}:host:focus-visible{outline:var(--gds-borderWidth-lg) solid var(--gds-palette-border-dark);outline-offset:2px}:host:before{display:block;content:attr(data-label);padding:var(--gds-spacing-2xs)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5775
5839
  }
5776
5840
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsButtonRadioOptionComponent, decorators: [{
5777
5841
  type: Component,
@@ -5789,7 +5853,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
5789
5853
  '[attr.data-label]': 'label()',
5790
5854
  // a11y
5791
5855
  '[attr.aria-label]': 'label()'
5792
- }, styles: [":host{border:var(--gds-borderWidth-md) solid;border-color:var(--gds-palette-border-primary);color:var(--gds-palette-text-primary-primary)}:host:hover,:host:checked{border-color:var(--gds-palette-border-selected);background-color:var(--gds-palette-background-hover)}:host[invalid=true],:host:disabled{border-color:inherit;color:inherit;background-color:inherit}:host[invalid=true]:hover,:host[invalid=true]:checked{background-color:var(--gds-palette-helper-error-default)}:host:focus-visible{outline:var(--gds-borderWidth-lg) solid var(--gds-palette-border-dark);outline-offset:2px}:host:before{display:block;content:attr(data-label);padding:var(--gds-spacing-2xs)}\n"] }]
5856
+ }, styles: ["@layer design-system{:host{border:var(--gds-borderWidth-md) solid;border-color:var(--gds-palette-border-primary);color:var(--gds-palette-text-primary-primary)}:host:hover,:host:checked{border-color:var(--gds-palette-border-selected);background-color:var(--gds-palette-background-hover)}:host[invalid=true],:host:disabled{border-color:inherit;color:inherit;background-color:inherit}:host[invalid=true]:hover,:host[invalid=true]:checked{background-color:var(--gds-palette-helper-error-default)}:host:focus-visible{outline:var(--gds-borderWidth-lg) solid var(--gds-palette-border-dark);outline-offset:2px}:host:before{display:block;content:attr(data-label);padding:var(--gds-spacing-2xs)}}\n"] }]
5793
5857
  }] });
5794
5858
 
5795
5859
  class GdsSelectComponent extends GdsSignalFormControl {
@@ -5913,7 +5977,7 @@ class GdsSelectComponent extends GdsSignalFormControl {
5913
5977
  this.ref().handleClearClick();
5914
5978
  };
5915
5979
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
5916
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsSelectComponent, isStandalone: true, selector: "gds-select", inputs: { clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, hideChevron: { classPropertyName: "hideChevron", publicName: "hideChevron", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "dropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { changed: "changed", searched: "searched", blurred: "blurred", cleared: "cleared", closed: "closed", opened: "opened", bindValue: "bindValueChange", bindLabel: "bindLabelChange", value: "valueChange", items: "itemsChange" }, host: { listeners: { "keydown": "setMarkedItemIndex()" } }, queries: [{ propertyName: "multiLabelTmpl", first: true, predicate: ["multiLabelTmpl"], descendants: true, isSignal: true }, { propertyName: "labelTmpl", first: true, predicate: ["labelTmpl"], descendants: true, isSignal: true }, { propertyName: "optionTmpl", first: true, predicate: ["optionTmpl"], descendants: true, isSignal: true }, { propertyName: "footerTmpl", first: true, predicate: ["footerTmpl"], descendants: true, isSignal: true }, { propertyName: "clearBtnTmpl", first: true, predicate: ["clearBtnTmpl"], descendants: true, isSignal: true }, { propertyName: "placeholderTmpl", first: true, predicate: ["placeholderTmpl"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "ref", first: true, predicate: NgSelectComponent, descendants: true, isSignal: true }, { propertyName: "clearButton", first: true, predicate: ["clearButton"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-select\n class=\"\n gds-mobile-text-input-mobile\n gds-text-input\n \"\n [ngClass]=\"{ 'ng-select-hide-chevron': hideChevron() }\"\n [dropdownPosition]=\"dropdownPosition()\"\n [notFoundText]=\"emptyText()\"\n [bindValue]=\"bindValue()\"\n [bindLabel]=\"bindLabel()\"\n [multiple]=\"multiple()\"\n [closeOnSelect]=\"!multiple()\"\n [disabled]=\"disabled()\"\n [items]=\"items()\"\n [ngModel]=\"value()\"\n [loading]=\"loading()\"\n [loadingText]=\"loadingText() | translate\"\n [searchable]=\"searchable()\"\n [clearable]=\"clearable()\"\n [virtualScroll]=\"virtualScroll()\"\n [searchFn]=\"itemShouldDisplay\"\n [appendTo]=\"appendTo()\"\n [keyDownFn]=\"onKeyDown\"\n [labelForId]=\"id()\"\n (ngModelChange)=\"setValue($event)\"\n (change)=\"onHandleChange($event)\"\n (search)=\"onSearchChange($event)\"\n (clear)=\"cleared.emit()\"\n (open)=\"handleOpened()\"\n (close)=\"handleClosed()\"\n>\n <ng-template\n ng-label-tmp\n let-item=\"item\"\n >\n <ng-container *ngTemplateOutlet=\"labelTmpl() ?? defaultLabelTmpl; context: { item }\" />\n </ng-template>\n\n @if (!value()) {\n <ng-template ng-placeholder-tmp>\n <ng-container *ngTemplateOutlet=\"placeholderTmpl() ?? defaultPlaceholderTmpl\" />\n </ng-template>\n }\n\n <ng-template\n ng-multi-label-tmp\n let-items=\"items\"\n >\n <ng-container *ngTemplateOutlet=\"multiLabelTmpl() ?? defaultMultiLabelTmpl; context: { items }\" />\n </ng-template>\n\n <ng-template\n ng-option-tmp\n let-option=\"item\"\n let-selected=\"item$.selected\"\n let-index=\"index\"\n >\n @if (multiple()) {\n <input\n type=\"checkbox\"\n class=\"\n gds-margin-block-auto\n gds-margin-inline-3xs\n \"\n gds-checkbox\n [checked]=\"selected\"\n (mousedown)=\"onCheckboxChanged($event)\"\n />\n }\n <ng-container\n *ngTemplateOutlet=\"optionTmpl() ?? defaultOptionTmpl; context: { option, marked: markedIndex() === index }\"\n />\n </ng-template>\n\n @if (footerTmpl(); as footerTmpl) {\n <ng-template ng-footer-tmp>\n <div\n class=\"\n gds-height-100-parent\n gds-width-100-parent\n \"\n (mouseenter)=\"unmarkItem()\"\n >\n <ng-container *ngTemplateOutlet=\"footerTmpl\" />\n </div>\n </ng-template>\n }\n\n <ng-template ng-clearbutton-tmp>\n <span class=\"ng-clear-wrapper\">\n <ng-container *ngTemplateOutlet=\"clearBtnTmpl() ?? defaultClearBtnTmpl\" />\n </span>\n </ng-template>\n</ng-select>\n\n<ng-template\n #defaultLabelTmpl\n let-item=\"item\"\n>\n @if (value !== undefined) {\n <gds-tooltip\n onlyTextOverflow\n [tooltip]=\"item[bindLabel()] | translate\"\n >\n {{ item[bindLabel()] | translate }}\n </gds-tooltip>\n }\n</ng-template>\n\n<ng-template\n #defaultMultiLabelTmpl\n let-items=\"items\"\n>\n <div class=\"\n gds-align-items-center\n gds-display-inline-flex\n gds-gap-2xs\n gds-select--multi-selected-content\n \">\n <gds-tooltip\n onlyOnTextOverflow\n [tooltip]=\"items[0][bindLabel()] | translate\"\n >\n {{ items[0][bindLabel()] | translate }}\n </gds-tooltip>\n @if (items.length > 1) {\n <span gds-badge>+{{ items.length - 1 }}</span>\n }\n </div>\n</ng-template>\n\n<ng-template\n #defaultOptionTmpl\n let-option=\"option\"\n let-active=\"marked\"\n>\n <gds-tooltip\n class=\"option\"\n onlyTextOverflow\n [tooltip]=\"option[bindLabel()] | translate\"\n [open]=\"active\"\n >\n {{ option[bindLabel()] | translate }}\n </gds-tooltip>\n</ng-template>\n\n<ng-template #defaultPlaceholderTmpl>\n <span class=\"ng-placeholder\">{{ placeholder() }}</span>\n</ng-template>\n\n<ng-template #defaultClearBtnTmpl>\n <button\n #clearButton\n gds-icon-button\n class=\"gds-background-none\"\n [attr.aria-label]=\"clearAriaLabel() | translate\"\n (click)=\"onClearClicked()\"\n (keydown.enter)=\"onClearClicked()\"\n >\n <gds-icon\n class=\"\n gds-icon-primary\n gds-icon-size-3xs\n \"\n key=\"line-dismiss\"\n />\n </button>\n</ng-template>\n", styles: [":host{--gds-form-control-cursor: pointer;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%231E365E' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%23cd2127' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host[disabled],:host:has(*:disabled,*[disabled=true]){--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%23b2b2b2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");--cursor: not-allowed}:host ng-select.ng-select-clearable,:host ng-select.ng-select-hide-chevron{--arrow-display: none}:host ng-select.ng-select-opened{--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.75 10.25L8 5.75L3.25 10.25' stroke='%231E365E' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host ng-select.ng-select-multiple ::ng-deep .ng-value-container{gap:var(--gds-spacing-2xs);flex-wrap:nowrap!important}:host ng-select.ng-select-multiple ::ng-deep .ng-value-container .ng-input{padding-left:0}:host ng-select ::ng-deep .ng-select-container{background-color:var(--background-color);border:.5px solid var(--border-color);color:var(--text-color);cursor:var(--cursor)!important}:host ng-select ::ng-deep .ng-select-container ::ng-deep input:focus,:host ng-select ::ng-deep .ng-select-container ::ng-deep textarea:focus{outline:none}:host ng-select ::ng-deep .ng-select-container:focus-within,:host ng-select ::ng-deep .ng-select-container.is-controlled{isolation:isolate;position:relative}:host ng-select ::ng-deep .ng-select-container:focus-within:before,:host ng-select ::ng-deep .ng-select-container.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--active-color);border-radius:var(--gds-borderRadius-xs)}:host ng-select ::ng-deep .ng-select-container{min-height:var(--gds-size-md-rem)}:is(body[isMobile=true]) :host ng-select ::ng-deep .ng-select-container{min-height:var(--gds-size-lg-rem)}:host ng-select ::ng-deep .ng-select-container:hover{background-color:var(--hover-color)}:host ng-select ::ng-deep .ng-select-container[disabled]::ng-deep svg-icon,:host ng-select ::ng-deep .ng-select-container:has(*:disabled,*[disabled=true])::ng-deep svg-icon{color:var(--disabled-text-color)}:host ng-select ::ng-deep .ng-select-container[invalid][touched]:not(:focus-within,.is-controlled)::ng-deep svg-icon,:host ng-select ::ng-deep .ng-select-container:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled)::ng-deep svg-icon{color:var(--invalid-color)}:host ng-select ::ng-deep .ng-select-container ::ng-deep *::placeholder{color:var(--placeholder-color)}:host ng-select ::ng-deep .ng-select-container{border-radius:var(--gds-borderRadius-sm);padding-block:var(--gds-spacing-3xs);padding-inline:var(--gds-spacing-xs);gap:var(--gds-spacing-2xs)}:is(body[isMobile=true]) :host ng-select ::ng-deep .ng-select-container{padding-block:0}:host ng-select ::ng-deep .ng-has-value .ng-arrow-wrapper{display:var(--arrow-display);cursor:var(--cursor)}:host ng-select ::ng-deep .ng-arrow-wrapper,:host ng-select ::ng-deep .ng-clear-wrapper{width:var(--gds-size-sm-rem);height:var(--gds-size-sm-rem);display:flex;align-items:center;justify-content:center}:host ng-select ::ng-deep .ng-arrow-wrapper .ng-arrow,:host ng-select ::ng-deep .ng-clear-wrapper .ng-arrow{width:var(--gds-size-sm-rem)!important;height:var(--gds-size-sm-rem)!important;background-image:var(--arrow-url)}:host ng-select ::ng-deep .ng-arrow-wrapper .ng-clear,:host ng-select ::ng-deep .ng-clear-wrapper .ng-clear{font-size:var(--gds-fontSize-bodyLarge)}:host ng-select ::ng-deep .ng-option{display:flex!important;gap:var(--gds-spacing-3xs);padding:11px var(--gds-spacing-sm);border-radius:var(--gds-borderRadius-sm);color:var(--text-color);position:relative}:host ng-select ::ng-deep .ng-option.ng-option-marked:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none;--wrapper-margin-inline: 5px;--wrapper-margin-block: 4px;z-index:-1}:host ng-select ::ng-deep .ng-value-container{overflow:hidden!important;align-items:center;height:var(--gds-primitive-lineHeight-250)}:host ng-select ::ng-deep .ng-value-container .ng-value{height:fit-content}:host ng-select ::ng-deep .ng-placeholder{color:var(--placeholder-color);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;min-width:0}:host ng-select ::ng-deep .ng-option-disabled{cursor:default!important}:host ng-select ::ng-deep .ng-spinner-loader{border-left-color:var(--gds-palette-text-primary-primary)!important}.gds-select--multi-selected-content{color:var(--gds-palette-text-default-primary);font:var(--gds-text-body-shorthand);min-width:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "directive", type: NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }, { kind: "directive", type: NgClearButtonTemplateDirective, selector: "[ng-clearbutton-tmp]" }, { kind: "directive", type: NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: NgPlaceholderTemplateDirective, selector: "[ng-placeholder-tmp]" }, { kind: "component", type: GdsCheckboxComponent, selector: "input[type=\"checkbox\"][gds-checkbox]", inputs: ["checked", "touched", "disabled", "readonly", "hidden", "invalid", "tabindex"], outputs: ["checkedChange", "touchedChange", "tabindexChange"] }, { kind: "component", type: GdsBadgeComponent, selector: "span[gds-badge]", inputs: ["icon", "tooltip", "tooltipInteractive"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsTooltipComponent, selector: "gds-tooltip", inputs: ["tooltip", "onlyTextOverflow", "disabled", "tooltipPlacement", "tooltipInteractive", "useHostWidth", "open", "maxWidth", "appendTo"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5980
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsSelectComponent, isStandalone: true, selector: "gds-select", inputs: { clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, hideChevron: { classPropertyName: "hideChevron", publicName: "hideChevron", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "dropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { changed: "changed", searched: "searched", blurred: "blurred", cleared: "cleared", closed: "closed", opened: "opened", bindValue: "bindValueChange", bindLabel: "bindLabelChange", value: "valueChange", items: "itemsChange" }, host: { listeners: { "keydown": "setMarkedItemIndex()" } }, queries: [{ propertyName: "multiLabelTmpl", first: true, predicate: ["multiLabelTmpl"], descendants: true, isSignal: true }, { propertyName: "labelTmpl", first: true, predicate: ["labelTmpl"], descendants: true, isSignal: true }, { propertyName: "optionTmpl", first: true, predicate: ["optionTmpl"], descendants: true, isSignal: true }, { propertyName: "footerTmpl", first: true, predicate: ["footerTmpl"], descendants: true, isSignal: true }, { propertyName: "clearBtnTmpl", first: true, predicate: ["clearBtnTmpl"], descendants: true, isSignal: true }, { propertyName: "placeholderTmpl", first: true, predicate: ["placeholderTmpl"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "ref", first: true, predicate: NgSelectComponent, descendants: true, isSignal: true }, { propertyName: "clearButton", first: true, predicate: ["clearButton"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-select\n class=\"\n gds-mobile-text-input-mobile\n gds-text-input\n \"\n [ngClass]=\"{ 'ng-select-hide-chevron': hideChevron() }\"\n [dropdownPosition]=\"dropdownPosition()\"\n [notFoundText]=\"emptyText()\"\n [bindValue]=\"bindValue()\"\n [bindLabel]=\"bindLabel()\"\n [multiple]=\"multiple()\"\n [closeOnSelect]=\"!multiple()\"\n [disabled]=\"disabled()\"\n [items]=\"items()\"\n [ngModel]=\"value()\"\n [loading]=\"loading()\"\n [loadingText]=\"loadingText() | translate\"\n [searchable]=\"searchable()\"\n [clearable]=\"clearable()\"\n [virtualScroll]=\"virtualScroll()\"\n [searchFn]=\"itemShouldDisplay\"\n [appendTo]=\"appendTo()\"\n [keyDownFn]=\"onKeyDown\"\n [labelForId]=\"id()\"\n (ngModelChange)=\"setValue($event)\"\n (change)=\"onHandleChange($event)\"\n (search)=\"onSearchChange($event)\"\n (clear)=\"cleared.emit()\"\n (open)=\"handleOpened()\"\n (close)=\"handleClosed()\"\n>\n <ng-template\n ng-label-tmp\n let-item=\"item\"\n >\n <ng-container *ngTemplateOutlet=\"labelTmpl() ?? defaultLabelTmpl; context: { item }\" />\n </ng-template>\n\n @if (!value()) {\n <ng-template ng-placeholder-tmp>\n <ng-container *ngTemplateOutlet=\"placeholderTmpl() ?? defaultPlaceholderTmpl\" />\n </ng-template>\n }\n\n <ng-template\n ng-multi-label-tmp\n let-items=\"items\"\n >\n <ng-container *ngTemplateOutlet=\"multiLabelTmpl() ?? defaultMultiLabelTmpl; context: { items }\" />\n </ng-template>\n\n <ng-template\n ng-option-tmp\n let-option=\"item\"\n let-selected=\"item$.selected\"\n let-index=\"index\"\n >\n @if (multiple()) {\n <input\n type=\"checkbox\"\n class=\"\n gds-margin-block-auto\n gds-margin-inline-3xs\n \"\n gds-checkbox\n [checked]=\"selected\"\n (mousedown)=\"onCheckboxChanged($event)\"\n />\n }\n <ng-container\n *ngTemplateOutlet=\"optionTmpl() ?? defaultOptionTmpl; context: { option, marked: markedIndex() === index }\"\n />\n </ng-template>\n\n @if (footerTmpl(); as footerTmpl) {\n <ng-template ng-footer-tmp>\n <div\n class=\"\n gds-height-100-parent\n gds-width-100-parent\n \"\n (mouseenter)=\"unmarkItem()\"\n >\n <ng-container *ngTemplateOutlet=\"footerTmpl\" />\n </div>\n </ng-template>\n }\n\n <ng-template ng-clearbutton-tmp>\n <span class=\"ng-clear-wrapper\">\n <ng-container *ngTemplateOutlet=\"clearBtnTmpl() ?? defaultClearBtnTmpl\" />\n </span>\n </ng-template>\n</ng-select>\n\n<ng-template\n #defaultLabelTmpl\n let-item=\"item\"\n>\n @if (value !== undefined) {\n <gds-tooltip\n onlyTextOverflow\n [tooltip]=\"item[bindLabel()] | translate\"\n >\n {{ item[bindLabel()] | translate }}\n </gds-tooltip>\n }\n</ng-template>\n\n<ng-template\n #defaultMultiLabelTmpl\n let-items=\"items\"\n>\n <div class=\"\n gds-align-items-center\n gds-display-inline-flex\n gds-gap-2xs\n gds-select--multi-selected-content\n \">\n <gds-tooltip\n onlyOnTextOverflow\n [tooltip]=\"items[0][bindLabel()] | translate\"\n >\n {{ items[0][bindLabel()] | translate }}\n </gds-tooltip>\n @if (items.length > 1) {\n <span gds-badge>+{{ items.length - 1 }}</span>\n }\n </div>\n</ng-template>\n\n<ng-template\n #defaultOptionTmpl\n let-option=\"option\"\n let-active=\"marked\"\n>\n <gds-tooltip\n class=\"option\"\n onlyTextOverflow\n [tooltip]=\"option[bindLabel()] | translate\"\n [open]=\"active\"\n >\n {{ option[bindLabel()] | translate }}\n </gds-tooltip>\n</ng-template>\n\n<ng-template #defaultPlaceholderTmpl>\n <span class=\"ng-placeholder\">{{ placeholder() }}</span>\n</ng-template>\n\n<ng-template #defaultClearBtnTmpl>\n <button\n #clearButton\n gds-icon-button\n class=\"gds-background-none\"\n [attr.aria-label]=\"clearAriaLabel() | translate\"\n (click)=\"onClearClicked()\"\n (keydown.enter)=\"onClearClicked()\"\n >\n <gds-icon\n class=\"\n gds-icon-primary\n gds-icon-size-3xs\n \"\n key=\"line-dismiss\"\n />\n </button>\n</ng-template>\n", styles: ["@layer design-system{:host{--gds-form-control-cursor: pointer;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%231E365E' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%23cd2127' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host[disabled],:host:has(*:disabled,*[disabled=true]){--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%23b2b2b2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");--cursor: not-allowed}:host ng-select.ng-select-clearable,:host ng-select.ng-select-hide-chevron{--arrow-display: none}:host ng-select.ng-select-opened{--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.75 10.25L8 5.75L3.25 10.25' stroke='%231E365E' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host ng-select.ng-select-multiple ::ng-deep .ng-value-container{gap:var(--gds-spacing-2xs);flex-wrap:nowrap!important}:host ng-select.ng-select-multiple ::ng-deep .ng-value-container .ng-input{padding-left:0}:host ng-select ::ng-deep .ng-select-container{background-color:var(--background-color);border:.5px solid var(--border-color);color:var(--text-color);cursor:var(--cursor)!important}:host ng-select ::ng-deep .ng-select-container ::ng-deep input:focus,:host ng-select ::ng-deep .ng-select-container ::ng-deep textarea:focus{outline:none}:host ng-select ::ng-deep .ng-select-container:focus-within,:host ng-select ::ng-deep .ng-select-container.is-controlled{isolation:isolate;position:relative}:host ng-select ::ng-deep .ng-select-container:focus-within:before,:host ng-select ::ng-deep .ng-select-container.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--active-color);border-radius:var(--gds-borderRadius-xs)}:host ng-select ::ng-deep .ng-select-container{min-height:var(--gds-size-md-rem)}:is(body[isMobile=true]) :host ng-select ::ng-deep .ng-select-container{min-height:var(--gds-size-lg-rem)}:host ng-select ::ng-deep .ng-select-container:hover{background-color:var(--hover-color)}:host ng-select ::ng-deep .ng-select-container[disabled]::ng-deep svg-icon,:host ng-select ::ng-deep .ng-select-container:has(*:disabled,*[disabled=true])::ng-deep svg-icon{color:var(--disabled-text-color)}:host ng-select ::ng-deep .ng-select-container[invalid][touched]:not(:focus-within,.is-controlled)::ng-deep svg-icon,:host ng-select ::ng-deep .ng-select-container:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled)::ng-deep svg-icon{color:var(--invalid-color)}:host ng-select ::ng-deep .ng-select-container ::ng-deep *::placeholder{color:var(--placeholder-color)}:host ng-select ::ng-deep .ng-select-container{border-radius:var(--gds-borderRadius-sm);padding-block:var(--gds-spacing-3xs);padding-inline:var(--gds-spacing-xs);gap:var(--gds-spacing-2xs)}:is(body[isMobile=true]) :host ng-select ::ng-deep .ng-select-container{padding-block:0}:host ng-select ::ng-deep .ng-has-value .ng-arrow-wrapper{display:var(--arrow-display);cursor:var(--cursor)}:host ng-select ::ng-deep .ng-arrow-wrapper,:host ng-select ::ng-deep .ng-clear-wrapper{width:var(--gds-size-sm-rem);height:var(--gds-size-sm-rem);display:flex;align-items:center;justify-content:center}:host ng-select ::ng-deep .ng-arrow-wrapper .ng-arrow,:host ng-select ::ng-deep .ng-clear-wrapper .ng-arrow{width:var(--gds-size-sm-rem)!important;height:var(--gds-size-sm-rem)!important;background-image:var(--arrow-url)}:host ng-select ::ng-deep .ng-arrow-wrapper .ng-clear,:host ng-select ::ng-deep .ng-clear-wrapper .ng-clear{font-size:var(--gds-fontSize-bodyLarge)}:host ng-select ::ng-deep .ng-option{display:flex!important;gap:var(--gds-spacing-3xs);padding:11px var(--gds-spacing-sm);border-radius:var(--gds-borderRadius-sm);color:var(--text-color);position:relative}:host ng-select ::ng-deep .ng-option.ng-option-marked:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none;--wrapper-margin-inline: 5px;--wrapper-margin-block: 4px;z-index:-1}:host ng-select ::ng-deep .ng-value-container{overflow:hidden!important;align-items:center;height:var(--gds-primitive-lineHeight-250)}:host ng-select ::ng-deep .ng-value-container .ng-value{height:fit-content}:host ng-select ::ng-deep .ng-placeholder{color:var(--placeholder-color);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;min-width:0}:host ng-select ::ng-deep .ng-option-disabled{cursor:default!important}:host ng-select ::ng-deep .ng-spinner-loader{border-left-color:var(--gds-palette-text-primary-primary)!important}.gds-select--multi-selected-content{color:var(--gds-palette-text-default-primary);font:var(--gds-text-body-shorthand);min-width:0}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "directive", type: NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }, { kind: "directive", type: NgClearButtonTemplateDirective, selector: "[ng-clearbutton-tmp]" }, { kind: "directive", type: NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: NgPlaceholderTemplateDirective, selector: "[ng-placeholder-tmp]" }, { kind: "component", type: GdsCheckboxComponent, selector: "input[type=\"checkbox\"][gds-checkbox]", inputs: ["checked", "touched", "disabled", "readonly", "hidden", "invalid", "tabindex"], outputs: ["checkedChange", "touchedChange", "tabindexChange"] }, { kind: "component", type: GdsBadgeComponent, selector: "span[gds-badge]", inputs: ["icon", "tooltip", "tooltipInteractive"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsTooltipComponent, selector: "gds-tooltip", inputs: ["tooltip", "onlyTextOverflow", "disabled", "tooltipPlacement", "tooltipInteractive", "useHostWidth", "open", "maxWidth", "appendTo"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5917
5981
  }
5918
5982
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsSelectComponent, decorators: [{
5919
5983
  type: Component,
@@ -5937,7 +6001,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
5937
6001
  NgClass
5938
6002
  ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
5939
6003
  '(keydown)': 'setMarkedItemIndex()'
5940
- }, template: "<ng-select\n class=\"\n gds-mobile-text-input-mobile\n gds-text-input\n \"\n [ngClass]=\"{ 'ng-select-hide-chevron': hideChevron() }\"\n [dropdownPosition]=\"dropdownPosition()\"\n [notFoundText]=\"emptyText()\"\n [bindValue]=\"bindValue()\"\n [bindLabel]=\"bindLabel()\"\n [multiple]=\"multiple()\"\n [closeOnSelect]=\"!multiple()\"\n [disabled]=\"disabled()\"\n [items]=\"items()\"\n [ngModel]=\"value()\"\n [loading]=\"loading()\"\n [loadingText]=\"loadingText() | translate\"\n [searchable]=\"searchable()\"\n [clearable]=\"clearable()\"\n [virtualScroll]=\"virtualScroll()\"\n [searchFn]=\"itemShouldDisplay\"\n [appendTo]=\"appendTo()\"\n [keyDownFn]=\"onKeyDown\"\n [labelForId]=\"id()\"\n (ngModelChange)=\"setValue($event)\"\n (change)=\"onHandleChange($event)\"\n (search)=\"onSearchChange($event)\"\n (clear)=\"cleared.emit()\"\n (open)=\"handleOpened()\"\n (close)=\"handleClosed()\"\n>\n <ng-template\n ng-label-tmp\n let-item=\"item\"\n >\n <ng-container *ngTemplateOutlet=\"labelTmpl() ?? defaultLabelTmpl; context: { item }\" />\n </ng-template>\n\n @if (!value()) {\n <ng-template ng-placeholder-tmp>\n <ng-container *ngTemplateOutlet=\"placeholderTmpl() ?? defaultPlaceholderTmpl\" />\n </ng-template>\n }\n\n <ng-template\n ng-multi-label-tmp\n let-items=\"items\"\n >\n <ng-container *ngTemplateOutlet=\"multiLabelTmpl() ?? defaultMultiLabelTmpl; context: { items }\" />\n </ng-template>\n\n <ng-template\n ng-option-tmp\n let-option=\"item\"\n let-selected=\"item$.selected\"\n let-index=\"index\"\n >\n @if (multiple()) {\n <input\n type=\"checkbox\"\n class=\"\n gds-margin-block-auto\n gds-margin-inline-3xs\n \"\n gds-checkbox\n [checked]=\"selected\"\n (mousedown)=\"onCheckboxChanged($event)\"\n />\n }\n <ng-container\n *ngTemplateOutlet=\"optionTmpl() ?? defaultOptionTmpl; context: { option, marked: markedIndex() === index }\"\n />\n </ng-template>\n\n @if (footerTmpl(); as footerTmpl) {\n <ng-template ng-footer-tmp>\n <div\n class=\"\n gds-height-100-parent\n gds-width-100-parent\n \"\n (mouseenter)=\"unmarkItem()\"\n >\n <ng-container *ngTemplateOutlet=\"footerTmpl\" />\n </div>\n </ng-template>\n }\n\n <ng-template ng-clearbutton-tmp>\n <span class=\"ng-clear-wrapper\">\n <ng-container *ngTemplateOutlet=\"clearBtnTmpl() ?? defaultClearBtnTmpl\" />\n </span>\n </ng-template>\n</ng-select>\n\n<ng-template\n #defaultLabelTmpl\n let-item=\"item\"\n>\n @if (value !== undefined) {\n <gds-tooltip\n onlyTextOverflow\n [tooltip]=\"item[bindLabel()] | translate\"\n >\n {{ item[bindLabel()] | translate }}\n </gds-tooltip>\n }\n</ng-template>\n\n<ng-template\n #defaultMultiLabelTmpl\n let-items=\"items\"\n>\n <div class=\"\n gds-align-items-center\n gds-display-inline-flex\n gds-gap-2xs\n gds-select--multi-selected-content\n \">\n <gds-tooltip\n onlyOnTextOverflow\n [tooltip]=\"items[0][bindLabel()] | translate\"\n >\n {{ items[0][bindLabel()] | translate }}\n </gds-tooltip>\n @if (items.length > 1) {\n <span gds-badge>+{{ items.length - 1 }}</span>\n }\n </div>\n</ng-template>\n\n<ng-template\n #defaultOptionTmpl\n let-option=\"option\"\n let-active=\"marked\"\n>\n <gds-tooltip\n class=\"option\"\n onlyTextOverflow\n [tooltip]=\"option[bindLabel()] | translate\"\n [open]=\"active\"\n >\n {{ option[bindLabel()] | translate }}\n </gds-tooltip>\n</ng-template>\n\n<ng-template #defaultPlaceholderTmpl>\n <span class=\"ng-placeholder\">{{ placeholder() }}</span>\n</ng-template>\n\n<ng-template #defaultClearBtnTmpl>\n <button\n #clearButton\n gds-icon-button\n class=\"gds-background-none\"\n [attr.aria-label]=\"clearAriaLabel() | translate\"\n (click)=\"onClearClicked()\"\n (keydown.enter)=\"onClearClicked()\"\n >\n <gds-icon\n class=\"\n gds-icon-primary\n gds-icon-size-3xs\n \"\n key=\"line-dismiss\"\n />\n </button>\n</ng-template>\n", styles: [":host{--gds-form-control-cursor: pointer;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%231E365E' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%23cd2127' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host[disabled],:host:has(*:disabled,*[disabled=true]){--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%23b2b2b2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");--cursor: not-allowed}:host ng-select.ng-select-clearable,:host ng-select.ng-select-hide-chevron{--arrow-display: none}:host ng-select.ng-select-opened{--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.75 10.25L8 5.75L3.25 10.25' stroke='%231E365E' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host ng-select.ng-select-multiple ::ng-deep .ng-value-container{gap:var(--gds-spacing-2xs);flex-wrap:nowrap!important}:host ng-select.ng-select-multiple ::ng-deep .ng-value-container .ng-input{padding-left:0}:host ng-select ::ng-deep .ng-select-container{background-color:var(--background-color);border:.5px solid var(--border-color);color:var(--text-color);cursor:var(--cursor)!important}:host ng-select ::ng-deep .ng-select-container ::ng-deep input:focus,:host ng-select ::ng-deep .ng-select-container ::ng-deep textarea:focus{outline:none}:host ng-select ::ng-deep .ng-select-container:focus-within,:host ng-select ::ng-deep .ng-select-container.is-controlled{isolation:isolate;position:relative}:host ng-select ::ng-deep .ng-select-container:focus-within:before,:host ng-select ::ng-deep .ng-select-container.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--active-color);border-radius:var(--gds-borderRadius-xs)}:host ng-select ::ng-deep .ng-select-container{min-height:var(--gds-size-md-rem)}:is(body[isMobile=true]) :host ng-select ::ng-deep .ng-select-container{min-height:var(--gds-size-lg-rem)}:host ng-select ::ng-deep .ng-select-container:hover{background-color:var(--hover-color)}:host ng-select ::ng-deep .ng-select-container[disabled]::ng-deep svg-icon,:host ng-select ::ng-deep .ng-select-container:has(*:disabled,*[disabled=true])::ng-deep svg-icon{color:var(--disabled-text-color)}:host ng-select ::ng-deep .ng-select-container[invalid][touched]:not(:focus-within,.is-controlled)::ng-deep svg-icon,:host ng-select ::ng-deep .ng-select-container:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled)::ng-deep svg-icon{color:var(--invalid-color)}:host ng-select ::ng-deep .ng-select-container ::ng-deep *::placeholder{color:var(--placeholder-color)}:host ng-select ::ng-deep .ng-select-container{border-radius:var(--gds-borderRadius-sm);padding-block:var(--gds-spacing-3xs);padding-inline:var(--gds-spacing-xs);gap:var(--gds-spacing-2xs)}:is(body[isMobile=true]) :host ng-select ::ng-deep .ng-select-container{padding-block:0}:host ng-select ::ng-deep .ng-has-value .ng-arrow-wrapper{display:var(--arrow-display);cursor:var(--cursor)}:host ng-select ::ng-deep .ng-arrow-wrapper,:host ng-select ::ng-deep .ng-clear-wrapper{width:var(--gds-size-sm-rem);height:var(--gds-size-sm-rem);display:flex;align-items:center;justify-content:center}:host ng-select ::ng-deep .ng-arrow-wrapper .ng-arrow,:host ng-select ::ng-deep .ng-clear-wrapper .ng-arrow{width:var(--gds-size-sm-rem)!important;height:var(--gds-size-sm-rem)!important;background-image:var(--arrow-url)}:host ng-select ::ng-deep .ng-arrow-wrapper .ng-clear,:host ng-select ::ng-deep .ng-clear-wrapper .ng-clear{font-size:var(--gds-fontSize-bodyLarge)}:host ng-select ::ng-deep .ng-option{display:flex!important;gap:var(--gds-spacing-3xs);padding:11px var(--gds-spacing-sm);border-radius:var(--gds-borderRadius-sm);color:var(--text-color);position:relative}:host ng-select ::ng-deep .ng-option.ng-option-marked:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none;--wrapper-margin-inline: 5px;--wrapper-margin-block: 4px;z-index:-1}:host ng-select ::ng-deep .ng-value-container{overflow:hidden!important;align-items:center;height:var(--gds-primitive-lineHeight-250)}:host ng-select ::ng-deep .ng-value-container .ng-value{height:fit-content}:host ng-select ::ng-deep .ng-placeholder{color:var(--placeholder-color);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;min-width:0}:host ng-select ::ng-deep .ng-option-disabled{cursor:default!important}:host ng-select ::ng-deep .ng-spinner-loader{border-left-color:var(--gds-palette-text-primary-primary)!important}.gds-select--multi-selected-content{color:var(--gds-palette-text-default-primary);font:var(--gds-text-body-shorthand);min-width:0}\n"] }]
6004
+ }, template: "<ng-select\n class=\"\n gds-mobile-text-input-mobile\n gds-text-input\n \"\n [ngClass]=\"{ 'ng-select-hide-chevron': hideChevron() }\"\n [dropdownPosition]=\"dropdownPosition()\"\n [notFoundText]=\"emptyText()\"\n [bindValue]=\"bindValue()\"\n [bindLabel]=\"bindLabel()\"\n [multiple]=\"multiple()\"\n [closeOnSelect]=\"!multiple()\"\n [disabled]=\"disabled()\"\n [items]=\"items()\"\n [ngModel]=\"value()\"\n [loading]=\"loading()\"\n [loadingText]=\"loadingText() | translate\"\n [searchable]=\"searchable()\"\n [clearable]=\"clearable()\"\n [virtualScroll]=\"virtualScroll()\"\n [searchFn]=\"itemShouldDisplay\"\n [appendTo]=\"appendTo()\"\n [keyDownFn]=\"onKeyDown\"\n [labelForId]=\"id()\"\n (ngModelChange)=\"setValue($event)\"\n (change)=\"onHandleChange($event)\"\n (search)=\"onSearchChange($event)\"\n (clear)=\"cleared.emit()\"\n (open)=\"handleOpened()\"\n (close)=\"handleClosed()\"\n>\n <ng-template\n ng-label-tmp\n let-item=\"item\"\n >\n <ng-container *ngTemplateOutlet=\"labelTmpl() ?? defaultLabelTmpl; context: { item }\" />\n </ng-template>\n\n @if (!value()) {\n <ng-template ng-placeholder-tmp>\n <ng-container *ngTemplateOutlet=\"placeholderTmpl() ?? defaultPlaceholderTmpl\" />\n </ng-template>\n }\n\n <ng-template\n ng-multi-label-tmp\n let-items=\"items\"\n >\n <ng-container *ngTemplateOutlet=\"multiLabelTmpl() ?? defaultMultiLabelTmpl; context: { items }\" />\n </ng-template>\n\n <ng-template\n ng-option-tmp\n let-option=\"item\"\n let-selected=\"item$.selected\"\n let-index=\"index\"\n >\n @if (multiple()) {\n <input\n type=\"checkbox\"\n class=\"\n gds-margin-block-auto\n gds-margin-inline-3xs\n \"\n gds-checkbox\n [checked]=\"selected\"\n (mousedown)=\"onCheckboxChanged($event)\"\n />\n }\n <ng-container\n *ngTemplateOutlet=\"optionTmpl() ?? defaultOptionTmpl; context: { option, marked: markedIndex() === index }\"\n />\n </ng-template>\n\n @if (footerTmpl(); as footerTmpl) {\n <ng-template ng-footer-tmp>\n <div\n class=\"\n gds-height-100-parent\n gds-width-100-parent\n \"\n (mouseenter)=\"unmarkItem()\"\n >\n <ng-container *ngTemplateOutlet=\"footerTmpl\" />\n </div>\n </ng-template>\n }\n\n <ng-template ng-clearbutton-tmp>\n <span class=\"ng-clear-wrapper\">\n <ng-container *ngTemplateOutlet=\"clearBtnTmpl() ?? defaultClearBtnTmpl\" />\n </span>\n </ng-template>\n</ng-select>\n\n<ng-template\n #defaultLabelTmpl\n let-item=\"item\"\n>\n @if (value !== undefined) {\n <gds-tooltip\n onlyTextOverflow\n [tooltip]=\"item[bindLabel()] | translate\"\n >\n {{ item[bindLabel()] | translate }}\n </gds-tooltip>\n }\n</ng-template>\n\n<ng-template\n #defaultMultiLabelTmpl\n let-items=\"items\"\n>\n <div class=\"\n gds-align-items-center\n gds-display-inline-flex\n gds-gap-2xs\n gds-select--multi-selected-content\n \">\n <gds-tooltip\n onlyOnTextOverflow\n [tooltip]=\"items[0][bindLabel()] | translate\"\n >\n {{ items[0][bindLabel()] | translate }}\n </gds-tooltip>\n @if (items.length > 1) {\n <span gds-badge>+{{ items.length - 1 }}</span>\n }\n </div>\n</ng-template>\n\n<ng-template\n #defaultOptionTmpl\n let-option=\"option\"\n let-active=\"marked\"\n>\n <gds-tooltip\n class=\"option\"\n onlyTextOverflow\n [tooltip]=\"option[bindLabel()] | translate\"\n [open]=\"active\"\n >\n {{ option[bindLabel()] | translate }}\n </gds-tooltip>\n</ng-template>\n\n<ng-template #defaultPlaceholderTmpl>\n <span class=\"ng-placeholder\">{{ placeholder() }}</span>\n</ng-template>\n\n<ng-template #defaultClearBtnTmpl>\n <button\n #clearButton\n gds-icon-button\n class=\"gds-background-none\"\n [attr.aria-label]=\"clearAriaLabel() | translate\"\n (click)=\"onClearClicked()\"\n (keydown.enter)=\"onClearClicked()\"\n >\n <gds-icon\n class=\"\n gds-icon-primary\n gds-icon-size-3xs\n \"\n key=\"line-dismiss\"\n />\n </button>\n</ng-template>\n", styles: ["@layer design-system{:host{--gds-form-control-cursor: pointer;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%231E365E' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%23cd2127' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host[disabled],:host:has(*:disabled,*[disabled=true]){--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%23b2b2b2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");--cursor: not-allowed}:host ng-select.ng-select-clearable,:host ng-select.ng-select-hide-chevron{--arrow-display: none}:host ng-select.ng-select-opened{--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.75 10.25L8 5.75L3.25 10.25' stroke='%231E365E' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host ng-select.ng-select-multiple ::ng-deep .ng-value-container{gap:var(--gds-spacing-2xs);flex-wrap:nowrap!important}:host ng-select.ng-select-multiple ::ng-deep .ng-value-container .ng-input{padding-left:0}:host ng-select ::ng-deep .ng-select-container{background-color:var(--background-color);border:.5px solid var(--border-color);color:var(--text-color);cursor:var(--cursor)!important}:host ng-select ::ng-deep .ng-select-container ::ng-deep input:focus,:host ng-select ::ng-deep .ng-select-container ::ng-deep textarea:focus{outline:none}:host ng-select ::ng-deep .ng-select-container:focus-within,:host ng-select ::ng-deep .ng-select-container.is-controlled{isolation:isolate;position:relative}:host ng-select ::ng-deep .ng-select-container:focus-within:before,:host ng-select ::ng-deep .ng-select-container.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--active-color);border-radius:var(--gds-borderRadius-xs)}:host ng-select ::ng-deep .ng-select-container{min-height:var(--gds-size-md-rem)}:is(body[isMobile=true]) :host ng-select ::ng-deep .ng-select-container{min-height:var(--gds-size-lg-rem)}:host ng-select ::ng-deep .ng-select-container:hover{background-color:var(--hover-color)}:host ng-select ::ng-deep .ng-select-container[disabled]::ng-deep svg-icon,:host ng-select ::ng-deep .ng-select-container:has(*:disabled,*[disabled=true])::ng-deep svg-icon{color:var(--disabled-text-color)}:host ng-select ::ng-deep .ng-select-container[invalid][touched]:not(:focus-within,.is-controlled)::ng-deep svg-icon,:host ng-select ::ng-deep .ng-select-container:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled)::ng-deep svg-icon{color:var(--invalid-color)}:host ng-select ::ng-deep .ng-select-container ::ng-deep *::placeholder{color:var(--placeholder-color)}:host ng-select ::ng-deep .ng-select-container{border-radius:var(--gds-borderRadius-sm);padding-block:var(--gds-spacing-3xs);padding-inline:var(--gds-spacing-xs);gap:var(--gds-spacing-2xs)}:is(body[isMobile=true]) :host ng-select ::ng-deep .ng-select-container{padding-block:0}:host ng-select ::ng-deep .ng-has-value .ng-arrow-wrapper{display:var(--arrow-display);cursor:var(--cursor)}:host ng-select ::ng-deep .ng-arrow-wrapper,:host ng-select ::ng-deep .ng-clear-wrapper{width:var(--gds-size-sm-rem);height:var(--gds-size-sm-rem);display:flex;align-items:center;justify-content:center}:host ng-select ::ng-deep .ng-arrow-wrapper .ng-arrow,:host ng-select ::ng-deep .ng-clear-wrapper .ng-arrow{width:var(--gds-size-sm-rem)!important;height:var(--gds-size-sm-rem)!important;background-image:var(--arrow-url)}:host ng-select ::ng-deep .ng-arrow-wrapper .ng-clear,:host ng-select ::ng-deep .ng-clear-wrapper .ng-clear{font-size:var(--gds-fontSize-bodyLarge)}:host ng-select ::ng-deep .ng-option{display:flex!important;gap:var(--gds-spacing-3xs);padding:11px var(--gds-spacing-sm);border-radius:var(--gds-borderRadius-sm);color:var(--text-color);position:relative}:host ng-select ::ng-deep .ng-option.ng-option-marked:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none;--wrapper-margin-inline: 5px;--wrapper-margin-block: 4px;z-index:-1}:host ng-select ::ng-deep .ng-value-container{overflow:hidden!important;align-items:center;height:var(--gds-primitive-lineHeight-250)}:host ng-select ::ng-deep .ng-value-container .ng-value{height:fit-content}:host ng-select ::ng-deep .ng-placeholder{color:var(--placeholder-color);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;min-width:0}:host ng-select ::ng-deep .ng-option-disabled{cursor:default!important}:host ng-select ::ng-deep .ng-spinner-loader{border-left-color:var(--gds-palette-text-primary-primary)!important}.gds-select--multi-selected-content{color:var(--gds-palette-text-default-primary);font:var(--gds-text-body-shorthand);min-width:0}}\n"] }]
5941
6005
  }], propDecorators: { clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], hideChevron: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideChevron", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], dropdownPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownPosition", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }], searched: [{ type: i0.Output, args: ["searched"] }], blurred: [{ type: i0.Output, args: ["blurred"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], closed: [{ type: i0.Output, args: ["closed"] }], opened: [{ type: i0.Output, args: ["opened"] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }, { type: i0.Output, args: ["bindValueChange"] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }, { type: i0.Output, args: ["bindLabelChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }, { type: i0.Output, args: ["itemsChange"] }], ref: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NgSelectComponent), { isSignal: true }] }], clearButton: [{ type: i0.ViewChild, args: ['clearButton', { ...{
5942
6006
  read: (ElementRef)
5943
6007
  }, isSignal: true }] }], multiLabelTmpl: [{ type: i0.ContentChild, args: ['multiLabelTmpl', { isSignal: true }] }], labelTmpl: [{ type: i0.ContentChild, args: ['labelTmpl', { isSignal: true }] }], optionTmpl: [{ type: i0.ContentChild, args: ['optionTmpl', { isSignal: true }] }], footerTmpl: [{ type: i0.ContentChild, args: ['footerTmpl', { isSignal: true }] }], clearBtnTmpl: [{ type: i0.ContentChild, args: ['clearBtnTmpl', { isSignal: true }] }], placeholderTmpl: [{ type: i0.ContentChild, args: ['placeholderTmpl', { isSignal: true }] }] } });
@@ -6033,13 +6097,13 @@ class GdsSliderComponent extends GdsSignalFormContainer {
6033
6097
  this.inputValue.set(Number(this.input()?.nativeElement.value));
6034
6098
  };
6035
6099
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsSliderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
6036
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsSliderComponent, isStandalone: true, selector: "gds-slider", host: { classAttribute: "gds-position-relative" }, queries: [{ propertyName: "input", first: true, predicate: GdsNativeInputDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content />\n<div\n [innerHTML]=\"inputValue()\"\n data-testId=\"valueTooltip\"\n [style.left]=\"currentValueTooltipLeftOffset()\"\n class=\"\n gds-border-color-default\n gds-display-inline-block\n gds-padding-block-3xs\n gds-padding-inline-2xs\n gds-radius-sm\n gds-text-caption\n gds-text-center\n value-tooltip\n \"\n></div>\n", styles: [":host{--gds-form-control-active-color: var(--gds-palette-background-bright);--gds-form-control-background-color: var(--gds-palette-background-bright);--gds-form-control-cursor: pointer;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--background-color: var(--invalid-color)}:host[disabled],:host:has(*:disabled,*[disabled=true]){--active-color: var(--disabled-border-color)}:host ::ng-deep input{cursor:var(--cursor);overflow:visible;border-radius:var(--gds-borderRadius-sm)}:host ::ng-deep input::-webkit-slider-thumb{appearance:none;height:20px;width:20px;border-radius:50%;background-color:var(--active-color);border:4px solid var(--gds-palette-background-white);outline:1px solid var(--border-color);box-sizing:border-box;margin-top:-8px}:host ::ng-deep input::-moz-range-thumb{appearance:none;height:20px;width:20px;margin-top:-6px;border-radius:50%;background-color:var(--active-color);border:4px solid var(--gds-palette-background-white);outline:1px solid var(--border-color);box-sizing:border-box}:host ::ng-deep input::-webkit-slider-runnable-track{height:var(--gds-size-3xs);background:var(--background-color);border-radius:var(--gds-borderRadius-sm)}:host ::ng-deep input::-moz-range-track{height:var(--gds-size-3xs);background:var(--background-color);border-radius:var(--gds-borderRadius-sm)}:host ::ng-deep input:focus-visible{outline:2px solid var(--gds-palette-border-dark);outline-offset:10px}:host .value-tooltip{position:absolute;top:-28px;left:0;border:1px solid;color:var(--text-color);background-color:var(--gds-palette-background-white);box-shadow:0 4px 8px #00000024;transform:translate(-50%)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6100
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsSliderComponent, isStandalone: true, selector: "gds-slider", host: { classAttribute: "gds-position-relative" }, queries: [{ propertyName: "input", first: true, predicate: GdsNativeInputDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content />\n<div\n [innerHTML]=\"inputValue()\"\n data-testId=\"valueTooltip\"\n [style.left]=\"currentValueTooltipLeftOffset()\"\n class=\"\n gds-border-color-default\n gds-display-inline-block\n gds-padding-block-3xs\n gds-padding-inline-2xs\n gds-radius-sm\n gds-text-caption\n gds-text-center\n value-tooltip\n \"\n></div>\n", styles: ["@layer design-system{:host{--gds-form-control-active-color: var(--gds-palette-background-bright);--gds-form-control-background-color: var(--gds-palette-background-bright);--gds-form-control-cursor: pointer;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--background-color: var(--invalid-color)}:host[disabled],:host:has(*:disabled,*[disabled=true]){--active-color: var(--disabled-border-color)}:host ::ng-deep input{cursor:var(--cursor);overflow:visible;border-radius:var(--gds-borderRadius-sm)}:host ::ng-deep input::-webkit-slider-thumb{appearance:none;height:20px;width:20px;border-radius:50%;background-color:var(--active-color);border:4px solid var(--gds-palette-background-white);outline:1px solid var(--border-color);box-sizing:border-box;margin-top:-8px}:host ::ng-deep input::-moz-range-thumb{appearance:none;height:20px;width:20px;margin-top:-6px;border-radius:50%;background-color:var(--active-color);border:4px solid var(--gds-palette-background-white);outline:1px solid var(--border-color);box-sizing:border-box}:host ::ng-deep input::-webkit-slider-runnable-track{height:var(--gds-size-3xs);background:var(--background-color);border-radius:var(--gds-borderRadius-sm)}:host ::ng-deep input::-moz-range-track{height:var(--gds-size-3xs);background:var(--background-color);border-radius:var(--gds-borderRadius-sm)}:host ::ng-deep input:focus-visible{outline:2px solid var(--gds-palette-border-dark);outline-offset:10px}:host .value-tooltip{position:absolute;top:-28px;left:0;border:1px solid;color:var(--text-color);background-color:var(--gds-palette-background-white);box-shadow:0 4px 8px #00000024;transform:translate(-50%)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6037
6101
  }
6038
6102
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsSliderComponent, decorators: [{
6039
6103
  type: Component,
6040
6104
  args: [{ selector: 'gds-slider', changeDetection: ChangeDetectionStrategy.OnPush, host: {
6041
6105
  class: 'gds-position-relative'
6042
- }, template: "<ng-content />\n<div\n [innerHTML]=\"inputValue()\"\n data-testId=\"valueTooltip\"\n [style.left]=\"currentValueTooltipLeftOffset()\"\n class=\"\n gds-border-color-default\n gds-display-inline-block\n gds-padding-block-3xs\n gds-padding-inline-2xs\n gds-radius-sm\n gds-text-caption\n gds-text-center\n value-tooltip\n \"\n></div>\n", styles: [":host{--gds-form-control-active-color: var(--gds-palette-background-bright);--gds-form-control-background-color: var(--gds-palette-background-bright);--gds-form-control-cursor: pointer;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--background-color: var(--invalid-color)}:host[disabled],:host:has(*:disabled,*[disabled=true]){--active-color: var(--disabled-border-color)}:host ::ng-deep input{cursor:var(--cursor);overflow:visible;border-radius:var(--gds-borderRadius-sm)}:host ::ng-deep input::-webkit-slider-thumb{appearance:none;height:20px;width:20px;border-radius:50%;background-color:var(--active-color);border:4px solid var(--gds-palette-background-white);outline:1px solid var(--border-color);box-sizing:border-box;margin-top:-8px}:host ::ng-deep input::-moz-range-thumb{appearance:none;height:20px;width:20px;margin-top:-6px;border-radius:50%;background-color:var(--active-color);border:4px solid var(--gds-palette-background-white);outline:1px solid var(--border-color);box-sizing:border-box}:host ::ng-deep input::-webkit-slider-runnable-track{height:var(--gds-size-3xs);background:var(--background-color);border-radius:var(--gds-borderRadius-sm)}:host ::ng-deep input::-moz-range-track{height:var(--gds-size-3xs);background:var(--background-color);border-radius:var(--gds-borderRadius-sm)}:host ::ng-deep input:focus-visible{outline:2px solid var(--gds-palette-border-dark);outline-offset:10px}:host .value-tooltip{position:absolute;top:-28px;left:0;border:1px solid;color:var(--text-color);background-color:var(--gds-palette-background-white);box-shadow:0 4px 8px #00000024;transform:translate(-50%)}\n"] }]
6106
+ }, template: "<ng-content />\n<div\n [innerHTML]=\"inputValue()\"\n data-testId=\"valueTooltip\"\n [style.left]=\"currentValueTooltipLeftOffset()\"\n class=\"\n gds-border-color-default\n gds-display-inline-block\n gds-padding-block-3xs\n gds-padding-inline-2xs\n gds-radius-sm\n gds-text-caption\n gds-text-center\n value-tooltip\n \"\n></div>\n", styles: ["@layer design-system{:host{--gds-form-control-active-color: var(--gds-palette-background-bright);--gds-form-control-background-color: var(--gds-palette-background-bright);--gds-form-control-cursor: pointer;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--background-color: var(--invalid-color)}:host[disabled],:host:has(*:disabled,*[disabled=true]){--active-color: var(--disabled-border-color)}:host ::ng-deep input{cursor:var(--cursor);overflow:visible;border-radius:var(--gds-borderRadius-sm)}:host ::ng-deep input::-webkit-slider-thumb{appearance:none;height:20px;width:20px;border-radius:50%;background-color:var(--active-color);border:4px solid var(--gds-palette-background-white);outline:1px solid var(--border-color);box-sizing:border-box;margin-top:-8px}:host ::ng-deep input::-moz-range-thumb{appearance:none;height:20px;width:20px;margin-top:-6px;border-radius:50%;background-color:var(--active-color);border:4px solid var(--gds-palette-background-white);outline:1px solid var(--border-color);box-sizing:border-box}:host ::ng-deep input::-webkit-slider-runnable-track{height:var(--gds-size-3xs);background:var(--background-color);border-radius:var(--gds-borderRadius-sm)}:host ::ng-deep input::-moz-range-track{height:var(--gds-size-3xs);background:var(--background-color);border-radius:var(--gds-borderRadius-sm)}:host ::ng-deep input:focus-visible{outline:2px solid var(--gds-palette-border-dark);outline-offset:10px}:host .value-tooltip{position:absolute;top:-28px;left:0;border:1px solid;color:var(--text-color);background-color:var(--gds-palette-background-white);box-shadow:0 4px 8px #00000024;transform:translate(-50%)}}\n"] }]
6043
6107
  }], propDecorators: { input: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GdsNativeInputDirective), { isSignal: true }] }] } });
6044
6108
 
6045
6109
  class GdsTextInputComponent extends GdsSignalFormContainer {
@@ -6052,7 +6116,7 @@ class GdsTextInputComponent extends GdsSignalFormContainer {
6052
6116
  }
6053
6117
  }
6054
6118
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsTextInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
6055
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsTextInputComponent, isStandalone: true, selector: "gds-text-input", host: { listeners: { "click": "input()?.nativeElement?.focus()" }, classAttribute: "gds-display-flex gds-align-items-center gds-justify-content-center gds-gap-2xs gds-padding-block-3xs gds-padding-inline-xs gds-radius-sm gds-text-input\n gds-mobile-padding-block-0 gds-mobile-padding-inline-end-0 gds-mobile-text-input-mobile" }, queries: [{ propertyName: "input", first: true, predicate: GdsNativeInputDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"[leading-visual]\" />\n<ng-content />\n<ng-content select=\"[trailing-visual]\" />\n", styles: [":host{--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{background-color:var(--background-color);border:.5px solid var(--border-color);color:var(--text-color);cursor:var(--cursor)!important}:host ::ng-deep input:focus,:host ::ng-deep textarea:focus{outline:none}:host:focus-within,:host.is-controlled{isolation:isolate;position:relative}:host:focus-within:before,:host.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--active-color);border-radius:var(--gds-borderRadius-xs)}:host{min-height:var(--gds-size-md-rem)}:is(body[isMobile=true]) :host{min-height:var(--gds-size-lg-rem)}:host:hover{background-color:var(--hover-color)}:host[disabled]::ng-deep svg-icon,:host:has(*:disabled,*[disabled=true])::ng-deep svg-icon{color:var(--disabled-text-color)}:host[invalid][touched]:not(:focus-within,.is-controlled)::ng-deep svg-icon,:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled)::ng-deep svg-icon{color:var(--invalid-color)}:host ::ng-deep *::placeholder{color:var(--placeholder-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6119
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsTextInputComponent, isStandalone: true, selector: "gds-text-input", host: { listeners: { "click": "input()?.nativeElement?.focus()" }, classAttribute: "gds-display-flex gds-align-items-center gds-justify-content-center gds-gap-2xs gds-padding-block-3xs gds-padding-inline-xs gds-radius-sm gds-text-input\n gds-mobile-padding-block-0 gds-mobile-padding-inline-end-0 gds-mobile-text-input-mobile" }, queries: [{ propertyName: "input", first: true, predicate: GdsNativeInputDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"[leading-visual]\" />\n<ng-content />\n<ng-content select=\"[trailing-visual]\" />\n", styles: ["@layer design-system{:host{--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{background-color:var(--background-color);border:.5px solid var(--border-color);color:var(--text-color);cursor:var(--cursor)!important}:host ::ng-deep input:focus,:host ::ng-deep textarea:focus{outline:none}:host:focus-within,:host.is-controlled{isolation:isolate;position:relative}:host:focus-within:before,:host.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--active-color);border-radius:var(--gds-borderRadius-xs)}:host{min-height:var(--gds-size-md-rem)}:is(body[isMobile=true]) :host{min-height:var(--gds-size-lg-rem)}:host:hover{background-color:var(--hover-color)}:host[disabled]::ng-deep svg-icon,:host:has(*:disabled,*[disabled=true])::ng-deep svg-icon{color:var(--disabled-text-color)}:host[invalid][touched]:not(:focus-within,.is-controlled)::ng-deep svg-icon,:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled)::ng-deep svg-icon{color:var(--invalid-color)}:host ::ng-deep *::placeholder{color:var(--placeholder-color)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6056
6120
  }
6057
6121
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsTextInputComponent, decorators: [{
6058
6122
  type: Component,
@@ -6060,7 +6124,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
6060
6124
  '(click)': 'input()?.nativeElement?.focus()',
6061
6125
  class: `gds-display-flex gds-align-items-center gds-justify-content-center gds-gap-2xs gds-padding-block-3xs gds-padding-inline-xs gds-radius-sm gds-text-input
6062
6126
  gds-mobile-padding-block-0 gds-mobile-padding-inline-end-0 gds-mobile-text-input-mobile`
6063
- }, template: "<ng-content select=\"[leading-visual]\" />\n<ng-content />\n<ng-content select=\"[trailing-visual]\" />\n", styles: [":host{--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{background-color:var(--background-color);border:.5px solid var(--border-color);color:var(--text-color);cursor:var(--cursor)!important}:host ::ng-deep input:focus,:host ::ng-deep textarea:focus{outline:none}:host:focus-within,:host.is-controlled{isolation:isolate;position:relative}:host:focus-within:before,:host.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--active-color);border-radius:var(--gds-borderRadius-xs)}:host{min-height:var(--gds-size-md-rem)}:is(body[isMobile=true]) :host{min-height:var(--gds-size-lg-rem)}:host:hover{background-color:var(--hover-color)}:host[disabled]::ng-deep svg-icon,:host:has(*:disabled,*[disabled=true])::ng-deep svg-icon{color:var(--disabled-text-color)}:host[invalid][touched]:not(:focus-within,.is-controlled)::ng-deep svg-icon,:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled)::ng-deep svg-icon{color:var(--invalid-color)}:host ::ng-deep *::placeholder{color:var(--placeholder-color)}\n"] }]
6127
+ }, template: "<ng-content select=\"[leading-visual]\" />\n<ng-content />\n<ng-content select=\"[trailing-visual]\" />\n", styles: ["@layer design-system{:host{--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{background-color:var(--background-color);border:.5px solid var(--border-color);color:var(--text-color);cursor:var(--cursor)!important}:host ::ng-deep input:focus,:host ::ng-deep textarea:focus{outline:none}:host:focus-within,:host.is-controlled{isolation:isolate;position:relative}:host:focus-within:before,:host.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--active-color);border-radius:var(--gds-borderRadius-xs)}:host{min-height:var(--gds-size-md-rem)}:is(body[isMobile=true]) :host{min-height:var(--gds-size-lg-rem)}:host:hover{background-color:var(--hover-color)}:host[disabled]::ng-deep svg-icon,:host:has(*:disabled,*[disabled=true])::ng-deep svg-icon{color:var(--disabled-text-color)}:host[invalid][touched]:not(:focus-within,.is-controlled)::ng-deep svg-icon,:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled)::ng-deep svg-icon{color:var(--invalid-color)}:host ::ng-deep *::placeholder{color:var(--placeholder-color)}}\n"] }]
6064
6128
  }], propDecorators: { input: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GdsNativeInputDirective), { isSignal: true }] }] } });
6065
6129
 
6066
6130
  class GdsAutoGrowingTextareaComponent extends GdsSignalFormContainer {
@@ -6081,7 +6145,7 @@ class GdsAutoGrowingTextareaComponent extends GdsSignalFormContainer {
6081
6145
  this.dataReplicatedValue.set(this.textarea()?.nativeElement.value ?? '');
6082
6146
  }
6083
6147
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsAutoGrowingTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
6084
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsAutoGrowingTextareaComponent, isStandalone: true, selector: "gds-auto-growing-text-area", inputs: { maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "textarea()?.nativeElement?.focus()" }, properties: { "style.--max-rows": "maxRows()", "attr.data-replicated-value": "dataReplicatedValue()" } }, queries: [{ propertyName: "textarea", first: true, predicate: GdsNativeTextareaDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:grid;flex:1;max-height:calc(var(--max-rows) * var(--gds-lineHeight-body));overflow:auto;overflow-wrap:anywhere}:is(body[isMobile=true]) :host{font:var(--gds-text-inputMobile-shorthand)}:host:after{content:attr(data-replicated-value) \" \";white-space:pre-wrap;visibility:hidden}:host ::ng-deep textarea{resize:none;padding:0;border:none;outline:none;background:transparent;overflow:hidden;cursor:inherit}:host ::ng-deep textarea,:host:after{font:inherit;grid-area:1/1/2/2}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6148
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsAutoGrowingTextareaComponent, isStandalone: true, selector: "gds-auto-growing-text-area", inputs: { maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "textarea()?.nativeElement?.focus()" }, properties: { "style.--max-rows": "maxRows()", "attr.data-replicated-value": "dataReplicatedValue()" } }, queries: [{ propertyName: "textarea", first: true, predicate: GdsNativeTextareaDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true, styles: ["@layer design-system{:host{display:grid;flex:1;max-height:calc(var(--max-rows) * var(--gds-lineHeight-body));overflow:auto;overflow-wrap:anywhere}:is(body[isMobile=true]) :host{font:var(--gds-text-inputMobile-shorthand)}:host:after{content:attr(data-replicated-value) \" \";white-space:pre-wrap;visibility:hidden}:host ::ng-deep textarea{resize:none;padding:0;border:none;outline:none;background:transparent;overflow:hidden;cursor:inherit}:host ::ng-deep textarea,:host:after{font:inherit;grid-area:1/1/2/2}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6085
6149
  }
6086
6150
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsAutoGrowingTextareaComponent, decorators: [{
6087
6151
  type: Component,
@@ -6089,12 +6153,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
6089
6153
  '[style.--max-rows]': 'maxRows()',
6090
6154
  '[attr.data-replicated-value]': 'dataReplicatedValue()',
6091
6155
  '(click)': 'textarea()?.nativeElement?.focus()'
6092
- }, styles: [":host{display:grid;flex:1;max-height:calc(var(--max-rows) * var(--gds-lineHeight-body));overflow:auto;overflow-wrap:anywhere}:is(body[isMobile=true]) :host{font:var(--gds-text-inputMobile-shorthand)}:host:after{content:attr(data-replicated-value) \" \";white-space:pre-wrap;visibility:hidden}:host ::ng-deep textarea{resize:none;padding:0;border:none;outline:none;background:transparent;overflow:hidden;cursor:inherit}:host ::ng-deep textarea,:host:after{font:inherit;grid-area:1/1/2/2}\n"] }]
6156
+ }, styles: ["@layer design-system{:host{display:grid;flex:1;max-height:calc(var(--max-rows) * var(--gds-lineHeight-body));overflow:auto;overflow-wrap:anywhere}:is(body[isMobile=true]) :host{font:var(--gds-text-inputMobile-shorthand)}:host:after{content:attr(data-replicated-value) \" \";white-space:pre-wrap;visibility:hidden}:host ::ng-deep textarea{resize:none;padding:0;border:none;outline:none;background:transparent;overflow:hidden;cursor:inherit}:host ::ng-deep textarea,:host:after{font:inherit;grid-area:1/1/2/2}}\n"] }]
6093
6157
  }], propDecorators: { maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRows", required: false }] }], textarea: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GdsNativeTextareaDirective), { isSignal: true }] }] } });
6094
6158
 
6095
6159
  class GdsTextareaComponent extends GdsAutoGrowingTextareaComponent {
6096
6160
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
6097
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: GdsTextareaComponent, isStandalone: true, selector: "gds-textarea", host: { listeners: { "click": "textarea()?.nativeElement?.focus()" }, properties: { "style.--max-rows": "maxRows()" }, classAttribute: "gds-display-flex gds-align-items-center gds-justify-content-between gds-gap-2xs gds-height-fit-content gds-radius-sm gds-text-input\n gds-mobile-text-input-mobile gds-position-relative gds-max-height-100-parent" }, usesInheritance: true, ngImport: i0, template: "<div\n #leadingSlot\n class=\"\n gds-display-flex\n gds-left-2xs\n gds-position-absolute\n slot-leading\n \"\n [ngClass]=\"{ 'gds-display-none': !leadingSlot.children.length }\"\n>\n <ng-content select=\"[leading-visual]\" />\n</div>\n<div\n class=\"\n container\n gds-display-grid\n gds-flex-1\n gds-height-100-parent\n gds-mobile-padding-block-2xs\n gds-padding-block-3xs\n gds-padding-inline-xs\n \"\n [ngClass]=\"{\n 'gds-padding-inline-start-md': leadingSlot.children.length,\n 'gds-padding-inline-end-md': trailingSlot.children.length\n }\"\n [attr.data-replicated-value]=\"dataReplicatedValue()\"\n>\n <ng-content />\n</div>\n<div\n #trailingSlot\n class=\"\n gds-display-flex\n gds-flex-column-reverse\n gds-position-absolute\n gds-right-2xs\n slot-trailing\n \"\n [ngClass]=\"{ 'gds-display-none': !trailingSlot.children.length }\"\n>\n <ng-content select=\"[trailing-visual]\" />\n</div>\n", styles: [":host{--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{background-color:var(--background-color);border:.5px solid var(--border-color);color:var(--text-color);cursor:var(--cursor)!important}:host ::ng-deep input:focus,:host ::ng-deep textarea:focus{outline:none}:host:focus-within,:host.is-controlled{isolation:isolate;position:relative}:host:focus-within:before,:host.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--active-color);border-radius:var(--gds-borderRadius-xs)}:host{min-height:var(--gds-size-md-rem)}:is(body[isMobile=true]) :host{min-height:var(--gds-size-lg-rem)}:host:hover{background-color:var(--hover-color)}:host[disabled]::ng-deep svg-icon,:host:has(*:disabled,*[disabled=true])::ng-deep svg-icon{color:var(--disabled-text-color)}:host[invalid][touched]:not(:focus-within,.is-controlled)::ng-deep svg-icon,:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled)::ng-deep svg-icon{color:var(--invalid-color)}:host ::ng-deep *::placeholder{color:var(--placeholder-color)}:host .container{max-height:calc(var(--max-rows) * var(--gds-lineHeight-input) + var(--gds-spacing-3xs) * 2);overflow:auto;overflow-wrap:anywhere}:is(body[isMobile=true]) :host .container{max-height:calc(var(--max-rows) * var(--gds-lineHeight-input) + var(--gds-spacing-2xs) * 2)}:host .container:after{content:attr(data-replicated-value) \" \";white-space:pre-wrap;visibility:hidden}:host .slot-leading{top:7px}:is(body[isMobile=true]) :host .slot-leading{top:11px}:host .slot-trailing{bottom:7px}:is(body[isMobile=true]) :host .slot-trailing{bottom:11px}:host ::ng-deep textarea,:host .container:after{grid-area:1/1/2/2}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6161
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: GdsTextareaComponent, isStandalone: true, selector: "gds-textarea", host: { listeners: { "click": "textarea()?.nativeElement?.focus()" }, properties: { "style.--max-rows": "maxRows()" }, classAttribute: "gds-display-flex gds-align-items-center gds-justify-content-between gds-gap-2xs gds-height-fit-content gds-radius-sm gds-text-input\n gds-mobile-text-input-mobile gds-position-relative gds-max-height-100-parent" }, usesInheritance: true, ngImport: i0, template: "<div\n #leadingSlot\n class=\"\n gds-display-flex\n gds-left-2xs\n gds-position-absolute\n slot-leading\n \"\n [ngClass]=\"{ 'gds-display-none': !leadingSlot.children.length }\"\n>\n <ng-content select=\"[leading-visual]\" />\n</div>\n<div\n class=\"\n container\n gds-display-grid\n gds-flex-1\n gds-height-100-parent\n gds-mobile-padding-block-2xs\n gds-padding-block-3xs\n gds-padding-inline-xs\n \"\n [ngClass]=\"{\n 'gds-padding-inline-start-md': leadingSlot.children.length,\n 'gds-padding-inline-end-md': trailingSlot.children.length\n }\"\n [attr.data-replicated-value]=\"dataReplicatedValue()\"\n>\n <ng-content />\n</div>\n<div\n #trailingSlot\n class=\"\n gds-display-flex\n gds-flex-column-reverse\n gds-position-absolute\n gds-right-2xs\n slot-trailing\n \"\n [ngClass]=\"{ 'gds-display-none': !trailingSlot.children.length }\"\n>\n <ng-content select=\"[trailing-visual]\" />\n</div>\n", styles: ["@layer design-system{:host{--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{background-color:var(--background-color);border:.5px solid var(--border-color);color:var(--text-color);cursor:var(--cursor)!important}:host ::ng-deep input:focus,:host ::ng-deep textarea:focus{outline:none}:host:focus-within,:host.is-controlled{isolation:isolate;position:relative}:host:focus-within:before,:host.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--active-color);border-radius:var(--gds-borderRadius-xs)}:host{min-height:var(--gds-size-md-rem)}:is(body[isMobile=true]) :host{min-height:var(--gds-size-lg-rem)}:host:hover{background-color:var(--hover-color)}:host[disabled]::ng-deep svg-icon,:host:has(*:disabled,*[disabled=true])::ng-deep svg-icon{color:var(--disabled-text-color)}:host[invalid][touched]:not(:focus-within,.is-controlled)::ng-deep svg-icon,:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled)::ng-deep svg-icon{color:var(--invalid-color)}:host ::ng-deep *::placeholder{color:var(--placeholder-color)}:host .container{max-height:calc(var(--max-rows) * var(--gds-lineHeight-input) + var(--gds-spacing-3xs) * 2);overflow:auto;overflow-wrap:anywhere}:is(body[isMobile=true]) :host .container{max-height:calc(var(--max-rows) * var(--gds-lineHeight-input) + var(--gds-spacing-2xs) * 2)}:host .container:after{content:attr(data-replicated-value) \" \";white-space:pre-wrap;visibility:hidden}:host .slot-leading{top:7px}:is(body[isMobile=true]) :host .slot-leading{top:11px}:host .slot-trailing{bottom:7px}:is(body[isMobile=true]) :host .slot-trailing{bottom:11px}:host ::ng-deep textarea,:host .container:after{grid-area:1/1/2/2}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6098
6162
  }
6099
6163
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsTextareaComponent, decorators: [{
6100
6164
  type: Component,
@@ -6103,7 +6167,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
6103
6167
  gds-mobile-text-input-mobile gds-position-relative gds-max-height-100-parent`,
6104
6168
  '(click)': 'textarea()?.nativeElement?.focus()',
6105
6169
  '[style.--max-rows]': 'maxRows()'
6106
- }, imports: [NgClass], template: "<div\n #leadingSlot\n class=\"\n gds-display-flex\n gds-left-2xs\n gds-position-absolute\n slot-leading\n \"\n [ngClass]=\"{ 'gds-display-none': !leadingSlot.children.length }\"\n>\n <ng-content select=\"[leading-visual]\" />\n</div>\n<div\n class=\"\n container\n gds-display-grid\n gds-flex-1\n gds-height-100-parent\n gds-mobile-padding-block-2xs\n gds-padding-block-3xs\n gds-padding-inline-xs\n \"\n [ngClass]=\"{\n 'gds-padding-inline-start-md': leadingSlot.children.length,\n 'gds-padding-inline-end-md': trailingSlot.children.length\n }\"\n [attr.data-replicated-value]=\"dataReplicatedValue()\"\n>\n <ng-content />\n</div>\n<div\n #trailingSlot\n class=\"\n gds-display-flex\n gds-flex-column-reverse\n gds-position-absolute\n gds-right-2xs\n slot-trailing\n \"\n [ngClass]=\"{ 'gds-display-none': !trailingSlot.children.length }\"\n>\n <ng-content select=\"[trailing-visual]\" />\n</div>\n", styles: [":host{--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{background-color:var(--background-color);border:.5px solid var(--border-color);color:var(--text-color);cursor:var(--cursor)!important}:host ::ng-deep input:focus,:host ::ng-deep textarea:focus{outline:none}:host:focus-within,:host.is-controlled{isolation:isolate;position:relative}:host:focus-within:before,:host.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--active-color);border-radius:var(--gds-borderRadius-xs)}:host{min-height:var(--gds-size-md-rem)}:is(body[isMobile=true]) :host{min-height:var(--gds-size-lg-rem)}:host:hover{background-color:var(--hover-color)}:host[disabled]::ng-deep svg-icon,:host:has(*:disabled,*[disabled=true])::ng-deep svg-icon{color:var(--disabled-text-color)}:host[invalid][touched]:not(:focus-within,.is-controlled)::ng-deep svg-icon,:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled)::ng-deep svg-icon{color:var(--invalid-color)}:host ::ng-deep *::placeholder{color:var(--placeholder-color)}:host .container{max-height:calc(var(--max-rows) * var(--gds-lineHeight-input) + var(--gds-spacing-3xs) * 2);overflow:auto;overflow-wrap:anywhere}:is(body[isMobile=true]) :host .container{max-height:calc(var(--max-rows) * var(--gds-lineHeight-input) + var(--gds-spacing-2xs) * 2)}:host .container:after{content:attr(data-replicated-value) \" \";white-space:pre-wrap;visibility:hidden}:host .slot-leading{top:7px}:is(body[isMobile=true]) :host .slot-leading{top:11px}:host .slot-trailing{bottom:7px}:is(body[isMobile=true]) :host .slot-trailing{bottom:11px}:host ::ng-deep textarea,:host .container:after{grid-area:1/1/2/2}\n"] }]
6170
+ }, imports: [NgClass], template: "<div\n #leadingSlot\n class=\"\n gds-display-flex\n gds-left-2xs\n gds-position-absolute\n slot-leading\n \"\n [ngClass]=\"{ 'gds-display-none': !leadingSlot.children.length }\"\n>\n <ng-content select=\"[leading-visual]\" />\n</div>\n<div\n class=\"\n container\n gds-display-grid\n gds-flex-1\n gds-height-100-parent\n gds-mobile-padding-block-2xs\n gds-padding-block-3xs\n gds-padding-inline-xs\n \"\n [ngClass]=\"{\n 'gds-padding-inline-start-md': leadingSlot.children.length,\n 'gds-padding-inline-end-md': trailingSlot.children.length\n }\"\n [attr.data-replicated-value]=\"dataReplicatedValue()\"\n>\n <ng-content />\n</div>\n<div\n #trailingSlot\n class=\"\n gds-display-flex\n gds-flex-column-reverse\n gds-position-absolute\n gds-right-2xs\n slot-trailing\n \"\n [ngClass]=\"{ 'gds-display-none': !trailingSlot.children.length }\"\n>\n <ng-content select=\"[trailing-visual]\" />\n</div>\n", styles: ["@layer design-system{:host{--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{background-color:var(--background-color);border:.5px solid var(--border-color);color:var(--text-color);cursor:var(--cursor)!important}:host ::ng-deep input:focus,:host ::ng-deep textarea:focus{outline:none}:host:focus-within,:host.is-controlled{isolation:isolate;position:relative}:host:focus-within:before,:host.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--active-color);border-radius:var(--gds-borderRadius-xs)}:host{min-height:var(--gds-size-md-rem)}:is(body[isMobile=true]) :host{min-height:var(--gds-size-lg-rem)}:host:hover{background-color:var(--hover-color)}:host[disabled]::ng-deep svg-icon,:host:has(*:disabled,*[disabled=true])::ng-deep svg-icon{color:var(--disabled-text-color)}:host[invalid][touched]:not(:focus-within,.is-controlled)::ng-deep svg-icon,:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled)::ng-deep svg-icon{color:var(--invalid-color)}:host ::ng-deep *::placeholder{color:var(--placeholder-color)}:host .container{max-height:calc(var(--max-rows) * var(--gds-lineHeight-input) + var(--gds-spacing-3xs) * 2);overflow:auto;overflow-wrap:anywhere}:is(body[isMobile=true]) :host .container{max-height:calc(var(--max-rows) * var(--gds-lineHeight-input) + var(--gds-spacing-2xs) * 2)}:host .container:after{content:attr(data-replicated-value) \" \";white-space:pre-wrap;visibility:hidden}:host .slot-leading{top:7px}:is(body[isMobile=true]) :host .slot-leading{top:11px}:host .slot-trailing{bottom:7px}:is(body[isMobile=true]) :host .slot-trailing{bottom:11px}:host ::ng-deep textarea,:host .container:after{grid-area:1/1/2/2}}\n"] }]
6107
6171
  }] });
6108
6172
 
6109
6173
  // i guess this is fine?
@@ -6119,11 +6183,11 @@ class GdsIconDoctypeComponent {
6119
6183
  getExt = (ext) => this._doctypeSvc.getIconKeyForExt(ext);
6120
6184
  iconSizeClass = computed(() => `gds-icon-size-${this.size}`, ...(ngDevMode ? [{ debugName: "iconSizeClass" }] : /* istanbul ignore next */ []));
6121
6185
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsIconDoctypeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6122
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: GdsIconDoctypeComponent, isStandalone: true, selector: "gds-icon-doctype", inputs: { ext: "ext", size: "size" }, ngImport: i0, template: "<gds-icon\n [key]=\"iconName\"\n [class]=\"iconSizeClass()\"\n/>\n", styles: [":host{justify-content:center;display:inline-flex;align-items:center}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6186
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: GdsIconDoctypeComponent, isStandalone: true, selector: "gds-icon-doctype", inputs: { ext: "ext", size: "size" }, ngImport: i0, template: "<gds-icon\n [key]=\"iconName\"\n [class]=\"iconSizeClass()\"\n/>\n", styles: ["@layer design-system{:host{justify-content:center;display:inline-flex;align-items:center}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6123
6187
  }
6124
6188
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsIconDoctypeComponent, decorators: [{
6125
6189
  type: Component,
6126
- args: [{ selector: 'gds-icon-doctype', imports: [GdsIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<gds-icon\n [key]=\"iconName\"\n [class]=\"iconSizeClass()\"\n/>\n", styles: [":host{justify-content:center;display:inline-flex;align-items:center}\n"] }]
6190
+ args: [{ selector: 'gds-icon-doctype', imports: [GdsIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<gds-icon\n [key]=\"iconName\"\n [class]=\"iconSizeClass()\"\n/>\n", styles: ["@layer design-system{:host{justify-content:center;display:inline-flex;align-items:center}}\n"] }]
6127
6191
  }], propDecorators: { ext: [{
6128
6192
  type: Input
6129
6193
  }], size: [{
@@ -6195,16 +6259,43 @@ class GdsCollapsibleAsideOverlayComponent extends GdsDialogBaseDirective {
6195
6259
  this.dialog().show();
6196
6260
  }
6197
6261
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsCollapsibleAsideOverlayComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
6198
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsCollapsibleAsideOverlayComponent, isStandalone: true, selector: "gds-collapsible-aside-layout-dialog", host: { properties: { "attr.alignment": "alignment()" }, classAttribute: "gds-display-flex gds-justify-content-center gds-align-items-center" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<gds-dialog-overlay />\n<dialog\n gds-dialog\n class=\"dialog\"\n type=\"slide-left\"\n>\n <ng-template #layoutTmpl>\n <ng-template #container />\n </ng-template>\n</dialog>\n", styles: [":host{position:fixed;inset:0}:host .overlay{opacity:.25}:host .dialog{max-width:unset;width:unset;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "component", type: GdsDialogComponent, selector: "dialog[gds-dialog]", inputs: ["type", "background", "headerLabelAlignment", "showFooterBorder", "closeOnBackdropClick", "suppressDismissBtn"], outputs: ["closed", "canceled"] }, { kind: "component", type: GdsDialogOverlayComponent, selector: "gds-dialog-overlay", outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6262
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsCollapsibleAsideOverlayComponent, isStandalone: true, selector: "gds-collapsible-aside-layout-dialog", host: { properties: { "attr.alignment": "alignment()" }, classAttribute: "gds-display-flex gds-justify-content-center gds-align-items-center" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<gds-dialog-overlay />\n<dialog\n gds-dialog\n class=\"dialog\"\n type=\"slide-left\"\n>\n <ng-template #layoutTmpl>\n <ng-template #container />\n </ng-template>\n</dialog>\n", styles: ["@layer design-system{:host{position:fixed;inset:0}:host .overlay{opacity:.25}:host .dialog{max-width:unset;width:unset;display:flex;flex-direction:column}}\n"], dependencies: [{ kind: "component", type: GdsDialogComponent, selector: "dialog[gds-dialog]", inputs: ["type", "background", "headerLabelAlignment", "showFooterBorder", "closeOnBackdropClick", "suppressDismissBtn"], outputs: ["closed", "canceled"] }, { kind: "component", type: GdsDialogOverlayComponent, selector: "gds-dialog-overlay", outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6199
6263
  }
6200
6264
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsCollapsibleAsideOverlayComponent, decorators: [{
6201
6265
  type: Component,
6202
6266
  args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'gds-collapsible-aside-layout-dialog', imports: [GdsDialogComponent, GdsDialogOverlayComponent], host: {
6203
6267
  class: 'gds-display-flex gds-justify-content-center gds-align-items-center',
6204
6268
  '[attr.alignment]': 'alignment()'
6205
- }, template: "<gds-dialog-overlay />\n<dialog\n gds-dialog\n class=\"dialog\"\n type=\"slide-left\"\n>\n <ng-template #layoutTmpl>\n <ng-template #container />\n </ng-template>\n</dialog>\n", styles: [":host{position:fixed;inset:0}:host .overlay{opacity:.25}:host .dialog{max-width:unset;width:unset;display:flex;flex-direction:column}\n"] }]
6269
+ }, template: "<gds-dialog-overlay />\n<dialog\n gds-dialog\n class=\"dialog\"\n type=\"slide-left\"\n>\n <ng-template #layoutTmpl>\n <ng-template #container />\n </ng-template>\n</dialog>\n", styles: ["@layer design-system{:host{position:fixed;inset:0}:host .overlay{opacity:.25}:host .dialog{max-width:unset;width:unset;display:flex;flex-direction:column}}\n"] }]
6206
6270
  }], propDecorators: { container: [{ type: i0.ViewChild, args: ['container', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
6207
6271
 
6272
+ const computedPrevious = (s) => {
6273
+ let current = null;
6274
+ let previous = untracked(() => s()); // initial value is the current value
6275
+ return computed(() => {
6276
+ current = s();
6277
+ const result = previous;
6278
+ previous = current;
6279
+ return result;
6280
+ });
6281
+ };
6282
+
6283
+ // NOTE: Duplicated from libs/utils/src/types/app.constants.ts (SCREEN_SIZE_BREAKPOINTS only) — keep in sync.
6284
+ // sizes from libs/gds/public/assets/scss/_mixins.scss:65-72
6285
+ const SCREEN_SIZE_BREAKPOINTS = {
6286
+ XS: 0,
6287
+ SM: 600,
6288
+ MD: 900,
6289
+ LG: 1200,
6290
+ XL: 1440
6291
+ };
6292
+
6293
+ // NOTE: Duplicated from libs/utils/src/functions/screen-breakpoints.ts — keep in sync.
6294
+ const getScreenSize$ = (breakpoint) => inject(BreakpointObserver)
6295
+ .observe(`(max-width: ${SCREEN_SIZE_BREAKPOINTS[breakpoint]}px)`)
6296
+ .pipe(map((result) => result.matches));
6297
+ const getScreenSizeSignal = (breakpoint) => toSignal(getScreenSize$(breakpoint), { initialValue: false });
6298
+
6208
6299
  class GdsCollapsibleAsideLayoutComponent {
6209
6300
  #dialogSvc = inject(GdsDialogService);
6210
6301
  collapsed = input(undefined, { ...(ngDevMode ? { debugName: "collapsed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -6248,7 +6339,7 @@ class GdsCollapsibleAsideLayoutComponent {
6248
6339
  this.animationComplete.emit();
6249
6340
  };
6250
6341
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsCollapsibleAsideLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6251
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsCollapsibleAsideLayoutComponent, isStandalone: true, selector: "gds-collapsible-aside-layout", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, collapsedWidth: { classPropertyName: "collapsedWidth", publicName: "collapsedWidth", isSignal: true, isRequired: false, transformFunction: null }, collapsedMaxWidth: { classPropertyName: "collapsedMaxWidth", publicName: "collapsedMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, expandedWidth: { classPropertyName: "expandedWidth", publicName: "expandedWidth", isSignal: true, isRequired: false, transformFunction: null }, expandedMaxWidth: { classPropertyName: "expandedMaxWidth", publicName: "expandedMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, asideRight: { classPropertyName: "asideRight", publicName: "asideRight", isSignal: true, isRequired: false, transformFunction: null }, responsiveFullWidthAside: { classPropertyName: "responsiveFullWidthAside", publicName: "responsiveFullWidthAside", isSignal: true, isRequired: false, transformFunction: null }, responsiveOverlayAside: { classPropertyName: "responsiveOverlayAside", publicName: "responsiveOverlayAside", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { animationComplete: "animationComplete" }, host: { properties: { "attr.asideRight": "asideRight() ? \"\" : undefined", "style.--collapsed-width": "collapsedWidth()", "style.--collapsed-max-width": "collapsedMaxWidth()", "style.--expanded-width": "expandedWidth()", "style.--expanded-max-width": "expandedMaxWidth()", "attr.responsiveFullWidthAside": "responsiveFullWidthAside() ? \"\" : undefined", "attr.responsiveOverlayAside": "responsiveOverlayAside() ? \"\" : undefined", "attr.collapsed": "collapsed() ? \"\" : undefined" } }, queries: [{ propertyName: "collapsedTmpl", first: true, predicate: ["collapsedTmpl"], descendants: true, isSignal: true }, { propertyName: "asideTmpl", first: true, predicate: ["asideTmpl"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "overlayAsideDialog", first: true, predicate: ["overlayAsideDialog"], descendants: true, isSignal: true }, { propertyName: "asideContent", first: true, predicate: ["asideContent"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"collapsible-aside-layout_aside\"\n [ngClass]=\"{ collapsed: collapsed() }\"\n (transitionend)=\"captureDoneEvent()\"\n>\n <div\n class=\"\n aside-content\n gds-height-100-parent\n \"\n [ngClass]=\"{ 'gds-display-none': !collapsed() || isMoving() }\"\n >\n <ng-container *ngTemplateOutlet=\"collapsedTmpl()\" />\n </div>\n <div\n class=\"\n aside-content\n gds-height-100-parent\n \"\n [ngClass]=\"{ 'gds-display-none': collapsed() || isMoving() }\"\n #asideContent\n >\n <ng-container *ngTemplateOutlet=\"asideTmpl()\" />\n </div>\n</div>\n\n<div class=\"collapsible-aside-layout_main\">\n <ng-content />\n</div>\n", styles: [":host{height:100%;width:100%;display:flex}:host[asideRight]{flex-direction:row-reverse}@media(max-width:900px){:host[responsiveFullWidthAside]:not([collapsed])>.collapsible-aside-layout_aside{width:100%;min-width:0;max-width:100%}:host[responsiveFullWidthAside]:not([collapsed])>.collapsible-aside-layout_main{display:none}:host[responsiveFullWidthAside][collapsed]>.collapsible-aside-layout_aside{width:0;display:none}:host[responsiveFullWidthAside][collapsed]>.collapsible-aside-layout_main{width:100%}:host[responsiveOverlayAside] .collapsible-aside-layout_aside{display:none}}:host .collapsible-aside-layout_main{display:flex;min-width:0;width:100%}:host .collapsible-aside-layout_aside{width:var(--expanded-width);min-width:min(var(--expanded-width),var(--expanded-max-width, var(--expanded-width)));max-width:var(--expanded-max-width, var(--expanded-width));transition-property:width,max-width,min-width;transition-duration:.25s}:host .collapsible-aside-layout_aside.collapsed{transition-duration:.25s;width:var(--collapsed-width);min-width:min(var(--collapsed-width),var(--collapsed-max-width, var(--collapsed-width)));max-width:var(--collapsed-max-width, var(--collapsed-width))}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6342
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsCollapsibleAsideLayoutComponent, isStandalone: true, selector: "gds-collapsible-aside-layout", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, collapsedWidth: { classPropertyName: "collapsedWidth", publicName: "collapsedWidth", isSignal: true, isRequired: false, transformFunction: null }, collapsedMaxWidth: { classPropertyName: "collapsedMaxWidth", publicName: "collapsedMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, expandedWidth: { classPropertyName: "expandedWidth", publicName: "expandedWidth", isSignal: true, isRequired: false, transformFunction: null }, expandedMaxWidth: { classPropertyName: "expandedMaxWidth", publicName: "expandedMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, asideRight: { classPropertyName: "asideRight", publicName: "asideRight", isSignal: true, isRequired: false, transformFunction: null }, responsiveFullWidthAside: { classPropertyName: "responsiveFullWidthAside", publicName: "responsiveFullWidthAside", isSignal: true, isRequired: false, transformFunction: null }, responsiveOverlayAside: { classPropertyName: "responsiveOverlayAside", publicName: "responsiveOverlayAside", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { animationComplete: "animationComplete" }, host: { properties: { "attr.asideRight": "asideRight() ? \"\" : undefined", "style.--collapsed-width": "collapsedWidth()", "style.--collapsed-max-width": "collapsedMaxWidth()", "style.--expanded-width": "expandedWidth()", "style.--expanded-max-width": "expandedMaxWidth()", "attr.responsiveFullWidthAside": "responsiveFullWidthAside() ? \"\" : undefined", "attr.responsiveOverlayAside": "responsiveOverlayAside() ? \"\" : undefined", "attr.collapsed": "collapsed() ? \"\" : undefined" } }, queries: [{ propertyName: "collapsedTmpl", first: true, predicate: ["collapsedTmpl"], descendants: true, isSignal: true }, { propertyName: "asideTmpl", first: true, predicate: ["asideTmpl"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "overlayAsideDialog", first: true, predicate: ["overlayAsideDialog"], descendants: true, isSignal: true }, { propertyName: "asideContent", first: true, predicate: ["asideContent"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"collapsible-aside-layout_aside\"\n [ngClass]=\"{ collapsed: collapsed() }\"\n (transitionend)=\"captureDoneEvent()\"\n>\n <div\n class=\"\n aside-content\n gds-height-100-parent\n \"\n [ngClass]=\"{ 'gds-display-none': !collapsed() || isMoving() }\"\n >\n <ng-container *ngTemplateOutlet=\"collapsedTmpl()\" />\n </div>\n <div\n class=\"\n aside-content\n gds-height-100-parent\n \"\n [ngClass]=\"{ 'gds-display-none': collapsed() || isMoving() }\"\n #asideContent\n >\n <ng-container *ngTemplateOutlet=\"asideTmpl()\" />\n </div>\n</div>\n\n<div class=\"collapsible-aside-layout_main\">\n <ng-content />\n</div>\n", styles: ["@layer design-system{:host{height:100%;width:100%;display:flex}:host[asideRight]{flex-direction:row-reverse}@media(max-width:900px){:host[responsiveFullWidthAside]:not([collapsed])>.collapsible-aside-layout_aside{width:100%;min-width:0;max-width:100%}:host[responsiveFullWidthAside]:not([collapsed])>.collapsible-aside-layout_main{display:none}:host[responsiveFullWidthAside][collapsed]>.collapsible-aside-layout_aside{width:0;display:none}:host[responsiveFullWidthAside][collapsed]>.collapsible-aside-layout_main{width:100%}:host[responsiveOverlayAside] .collapsible-aside-layout_aside{display:none}}:host .collapsible-aside-layout_main{display:flex;min-width:0;width:100%}:host .collapsible-aside-layout_aside{width:var(--expanded-width);min-width:min(var(--expanded-width),var(--expanded-max-width, var(--expanded-width)));max-width:var(--expanded-max-width, var(--expanded-width));transition-property:width,max-width,min-width;transition-duration:.25s}:host .collapsible-aside-layout_aside.collapsed{transition-duration:.25s;width:var(--collapsed-width);min-width:min(var(--collapsed-width),var(--collapsed-max-width, var(--collapsed-width)));max-width:var(--collapsed-max-width, var(--collapsed-width))}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6252
6343
  }
6253
6344
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsCollapsibleAsideLayoutComponent, decorators: [{
6254
6345
  type: Component,
@@ -6261,7 +6352,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
6261
6352
  '[attr.responsiveFullWidthAside]': 'responsiveFullWidthAside() ? "" : undefined',
6262
6353
  '[attr.responsiveOverlayAside]': 'responsiveOverlayAside() ? "" : undefined',
6263
6354
  '[attr.collapsed]': 'collapsed() ? "" : undefined'
6264
- }, template: "<div\n class=\"collapsible-aside-layout_aside\"\n [ngClass]=\"{ collapsed: collapsed() }\"\n (transitionend)=\"captureDoneEvent()\"\n>\n <div\n class=\"\n aside-content\n gds-height-100-parent\n \"\n [ngClass]=\"{ 'gds-display-none': !collapsed() || isMoving() }\"\n >\n <ng-container *ngTemplateOutlet=\"collapsedTmpl()\" />\n </div>\n <div\n class=\"\n aside-content\n gds-height-100-parent\n \"\n [ngClass]=\"{ 'gds-display-none': collapsed() || isMoving() }\"\n #asideContent\n >\n <ng-container *ngTemplateOutlet=\"asideTmpl()\" />\n </div>\n</div>\n\n<div class=\"collapsible-aside-layout_main\">\n <ng-content />\n</div>\n", styles: [":host{height:100%;width:100%;display:flex}:host[asideRight]{flex-direction:row-reverse}@media(max-width:900px){:host[responsiveFullWidthAside]:not([collapsed])>.collapsible-aside-layout_aside{width:100%;min-width:0;max-width:100%}:host[responsiveFullWidthAside]:not([collapsed])>.collapsible-aside-layout_main{display:none}:host[responsiveFullWidthAside][collapsed]>.collapsible-aside-layout_aside{width:0;display:none}:host[responsiveFullWidthAside][collapsed]>.collapsible-aside-layout_main{width:100%}:host[responsiveOverlayAside] .collapsible-aside-layout_aside{display:none}}:host .collapsible-aside-layout_main{display:flex;min-width:0;width:100%}:host .collapsible-aside-layout_aside{width:var(--expanded-width);min-width:min(var(--expanded-width),var(--expanded-max-width, var(--expanded-width)));max-width:var(--expanded-max-width, var(--expanded-width));transition-property:width,max-width,min-width;transition-duration:.25s}:host .collapsible-aside-layout_aside.collapsed{transition-duration:.25s;width:var(--collapsed-width);min-width:min(var(--collapsed-width),var(--collapsed-max-width, var(--collapsed-width)));max-width:var(--collapsed-max-width, var(--collapsed-width))}\n"] }]
6355
+ }, template: "<div\n class=\"collapsible-aside-layout_aside\"\n [ngClass]=\"{ collapsed: collapsed() }\"\n (transitionend)=\"captureDoneEvent()\"\n>\n <div\n class=\"\n aside-content\n gds-height-100-parent\n \"\n [ngClass]=\"{ 'gds-display-none': !collapsed() || isMoving() }\"\n >\n <ng-container *ngTemplateOutlet=\"collapsedTmpl()\" />\n </div>\n <div\n class=\"\n aside-content\n gds-height-100-parent\n \"\n [ngClass]=\"{ 'gds-display-none': collapsed() || isMoving() }\"\n #asideContent\n >\n <ng-container *ngTemplateOutlet=\"asideTmpl()\" />\n </div>\n</div>\n\n<div class=\"collapsible-aside-layout_main\">\n <ng-content />\n</div>\n", styles: ["@layer design-system{:host{height:100%;width:100%;display:flex}:host[asideRight]{flex-direction:row-reverse}@media(max-width:900px){:host[responsiveFullWidthAside]:not([collapsed])>.collapsible-aside-layout_aside{width:100%;min-width:0;max-width:100%}:host[responsiveFullWidthAside]:not([collapsed])>.collapsible-aside-layout_main{display:none}:host[responsiveFullWidthAside][collapsed]>.collapsible-aside-layout_aside{width:0;display:none}:host[responsiveFullWidthAside][collapsed]>.collapsible-aside-layout_main{width:100%}:host[responsiveOverlayAside] .collapsible-aside-layout_aside{display:none}}:host .collapsible-aside-layout_main{display:flex;min-width:0;width:100%}:host .collapsible-aside-layout_aside{width:var(--expanded-width);min-width:min(var(--expanded-width),var(--expanded-max-width, var(--expanded-width)));max-width:var(--expanded-max-width, var(--expanded-width));transition-property:width,max-width,min-width;transition-duration:.25s}:host .collapsible-aside-layout_aside.collapsed{transition-duration:.25s;width:var(--collapsed-width);min-width:min(var(--collapsed-width),var(--collapsed-max-width, var(--collapsed-width)));max-width:var(--collapsed-max-width, var(--collapsed-width))}}\n"] }]
6265
6356
  }], propDecorators: { collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], collapsedWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedWidth", required: false }] }], collapsedMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedMaxWidth", required: false }] }], expandedWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedWidth", required: false }] }], expandedMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedMaxWidth", required: false }] }], asideRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "asideRight", required: false }] }], responsiveFullWidthAside: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsiveFullWidthAside", required: false }] }], responsiveOverlayAside: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsiveOverlayAside", required: false }] }], animationComplete: [{ type: i0.Output, args: ["animationComplete"] }], collapsedTmpl: [{ type: i0.ContentChild, args: ['collapsedTmpl', { isSignal: true }] }], asideTmpl: [{ type: i0.ContentChild, args: ['asideTmpl', { isSignal: true }] }], overlayAsideDialog: [{ type: i0.ViewChild, args: ['overlayAsideDialog', { isSignal: true }] }], asideContent: [{ type: i0.ViewChild, args: ['asideContent', { isSignal: true }] }] } });
6266
6357
 
6267
6358
  const DEFAULT_LABELS = [
@@ -6295,13 +6386,13 @@ class GdsLoadingCarouselComponent {
6295
6386
  }
6296
6387
  clearInterval = () => clearInterval(this.#interval);
6297
6388
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsLoadingCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6298
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: GdsLoadingCarouselComponent, isStandalone: true, selector: "gds-loading-carousel", inputs: { labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, repeat: { classPropertyName: "repeat", publicName: "repeat", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.gds-text-shimmer": "true" } }, ngImport: i0, template: "{{ prefix() }}{{ currentLabel() }}{{ suffix() }}\n", styles: [":host{font:var(--gds-text-body-shorthand);-webkit-user-select:none;user-select:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6389
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: GdsLoadingCarouselComponent, isStandalone: true, selector: "gds-loading-carousel", inputs: { labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, repeat: { classPropertyName: "repeat", publicName: "repeat", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.gds-text-shimmer": "true" } }, ngImport: i0, template: "{{ prefix() }}{{ currentLabel() }}{{ suffix() }}\n", styles: ["@layer design-system{:host{font:var(--gds-text-body-shorthand);-webkit-user-select:none;user-select:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6299
6390
  }
6300
6391
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsLoadingCarouselComponent, decorators: [{
6301
6392
  type: Component,
6302
6393
  args: [{ standalone: true, selector: 'gds-loading-carousel', host: {
6303
6394
  '[class.gds-text-shimmer]': 'true'
6304
- }, changeDetection: ChangeDetectionStrategy.OnPush, template: "{{ prefix() }}{{ currentLabel() }}{{ suffix() }}\n", styles: [":host{font:var(--gds-text-body-shorthand);-webkit-user-select:none;user-select:none}\n"] }]
6395
+ }, changeDetection: ChangeDetectionStrategy.OnPush, template: "{{ prefix() }}{{ currentLabel() }}{{ suffix() }}\n", styles: ["@layer design-system{:host{font:var(--gds-text-body-shorthand);-webkit-user-select:none;user-select:none}}\n"] }]
6305
6396
  }], propDecorators: { labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], repeat: [{ type: i0.Input, args: [{ isSignal: true, alias: "repeat", required: false }] }] } });
6306
6397
 
6307
6398
  class GdsNavAsideItemComponent {
@@ -6312,7 +6403,7 @@ class GdsNavAsideItemComponent {
6312
6403
  this.clicked.emit(event);
6313
6404
  }
6314
6405
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsNavAsideItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6315
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: GdsNavAsideItemComponent, isStandalone: true, selector: "gds-nav-aside-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { listeners: { "click": "handleClicked($event)" }, properties: { "attr.isActive": "isActive()" }, classAttribute: "gds-radius-sm" }, ngImport: i0, template: "<span class=\"gds-nav-item_icon\">\n <gds-icon\n [key]=\"icon()\"\n class=\"gds-icon-size-sm\"\n />\n</span>\n<span class=\"gds-nav-item_label\"><ng-content /></span>\n", styles: [":host{--background-color: transparent;--text-color: var(--gds-palette-text-default-secondary);--icon-color: var(--gds-palette-icon-primary)}:host:hover,:host[isActive=true]{--background-color: var(--gds-palette-background-hover);--text-color: var(--gds-palette-text-primary-primary);--icon-color: var(--gds-palette-icon-primary);cursor:pointer}:host:hover:after,:host[isActive=true]:after{content:\"\";position:absolute;width:3px;height:61%;top:50%;left:calc(var(--wrapper-margin, 0px) - 1px);transform:translateY(-50%);background:var(--gds-palette-border-selected);padding:0;height:100%;left:0;border-radius:3px 0 0 3px}:host{position:relative;width:68px;padding:var(--gds-spacing-2xs) var(--gds-spacing-sm);background-color:var(--background-color);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--gds-spacing-3xs)}:host .gds-nav-item_icon{color:var(--icon-color)}:host .gds-nav-item_label{color:var(--text-color);font:var(--gds-text-caption-shorthand)}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6406
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: GdsNavAsideItemComponent, isStandalone: true, selector: "gds-nav-aside-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { listeners: { "click": "handleClicked($event)" }, properties: { "attr.isActive": "isActive()" }, classAttribute: "gds-radius-sm" }, ngImport: i0, template: "<span class=\"gds-nav-item_icon\">\n <gds-icon\n [key]=\"icon()\"\n class=\"gds-icon-size-sm\"\n />\n</span>\n<span class=\"gds-nav-item_label\"><ng-content /></span>\n", styles: ["@layer design-system{:host{--background-color: transparent;--text-color: var(--gds-palette-text-default-secondary);--icon-color: var(--gds-palette-icon-primary)}:host:hover,:host[isActive=true]{--background-color: var(--gds-palette-background-hover);--text-color: var(--gds-palette-text-primary-primary);--icon-color: var(--gds-palette-icon-primary);cursor:pointer}:host:hover:after,:host[isActive=true]:after{content:\"\";position:absolute;width:3px;height:61%;top:50%;left:calc(var(--wrapper-margin, 0px) - 1px);transform:translateY(-50%);background:var(--gds-palette-border-selected);padding:0;height:100%;left:0;border-radius:3px 0 0 3px}:host{position:relative;width:68px;padding:var(--gds-spacing-2xs) var(--gds-spacing-sm);background-color:var(--background-color);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--gds-spacing-3xs)}:host .gds-nav-item_icon{color:var(--icon-color)}:host .gds-nav-item_label{color:var(--text-color);font:var(--gds-text-caption-shorthand)}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6316
6407
  }
6317
6408
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsNavAsideItemComponent, decorators: [{
6318
6409
  type: Component,
@@ -6320,20 +6411,119 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
6320
6411
  class: 'gds-radius-sm',
6321
6412
  '[attr.isActive]': 'isActive()',
6322
6413
  '(click)': 'handleClicked($event)'
6323
- }, template: "<span class=\"gds-nav-item_icon\">\n <gds-icon\n [key]=\"icon()\"\n class=\"gds-icon-size-sm\"\n />\n</span>\n<span class=\"gds-nav-item_label\"><ng-content /></span>\n", styles: [":host{--background-color: transparent;--text-color: var(--gds-palette-text-default-secondary);--icon-color: var(--gds-palette-icon-primary)}:host:hover,:host[isActive=true]{--background-color: var(--gds-palette-background-hover);--text-color: var(--gds-palette-text-primary-primary);--icon-color: var(--gds-palette-icon-primary);cursor:pointer}:host:hover:after,:host[isActive=true]:after{content:\"\";position:absolute;width:3px;height:61%;top:50%;left:calc(var(--wrapper-margin, 0px) - 1px);transform:translateY(-50%);background:var(--gds-palette-border-selected);padding:0;height:100%;left:0;border-radius:3px 0 0 3px}:host{position:relative;width:68px;padding:var(--gds-spacing-2xs) var(--gds-spacing-sm);background-color:var(--background-color);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--gds-spacing-3xs)}:host .gds-nav-item_icon{color:var(--icon-color)}:host .gds-nav-item_label{color:var(--text-color);font:var(--gds-text-caption-shorthand)}\n"] }]
6414
+ }, template: "<span class=\"gds-nav-item_icon\">\n <gds-icon\n [key]=\"icon()\"\n class=\"gds-icon-size-sm\"\n />\n</span>\n<span class=\"gds-nav-item_label\"><ng-content /></span>\n", styles: ["@layer design-system{:host{--background-color: transparent;--text-color: var(--gds-palette-text-default-secondary);--icon-color: var(--gds-palette-icon-primary)}:host:hover,:host[isActive=true]{--background-color: var(--gds-palette-background-hover);--text-color: var(--gds-palette-text-primary-primary);--icon-color: var(--gds-palette-icon-primary);cursor:pointer}:host:hover:after,:host[isActive=true]:after{content:\"\";position:absolute;width:3px;height:61%;top:50%;left:calc(var(--wrapper-margin, 0px) - 1px);transform:translateY(-50%);background:var(--gds-palette-border-selected);padding:0;height:100%;left:0;border-radius:3px 0 0 3px}:host{position:relative;width:68px;padding:var(--gds-spacing-2xs) var(--gds-spacing-sm);background-color:var(--background-color);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--gds-spacing-3xs)}:host .gds-nav-item_icon{color:var(--icon-color)}:host .gds-nav-item_label{color:var(--text-color);font:var(--gds-text-caption-shorthand)}}\n"] }]
6324
6415
  }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], isActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isActive", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
6325
6416
 
6326
6417
  class GdsNavAsideComponent {
6327
6418
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsNavAsideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6328
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: GdsNavAsideComponent, isStandalone: true, selector: "gds-nav-aside", host: { classAttribute: "gds-display-flex gds-flex-column gds-radius-top-left-lg gds-radius-bottom-left-lg gds-height-100-parent gds-width-fit-content gds-padding-block-xs gds-padding-inline-0 gds-background-white" }, ngImport: i0, template: "<ul class=\"\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n gds-margin-0\n gds-padding-0\n\">\n <ng-content />\n</ul>\n<ul class=\"\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n gds-margin-0\n gds-margin-block-start-auto\n gds-padding-0\n\">\n <ng-content select=\"[menu-bottom]\" />\n</ul>\n", styles: [":host{box-shadow:-3px 0 4px #00000012 inset;border-right:.5px solid var(--gds-palette-border-default)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6419
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: GdsNavAsideComponent, isStandalone: true, selector: "gds-nav-aside", host: { classAttribute: "gds-display-flex gds-flex-column gds-radius-top-left-lg gds-radius-bottom-left-lg gds-height-100-parent gds-width-fit-content gds-padding-block-xs gds-padding-inline-0 gds-background-white" }, ngImport: i0, template: "<ul class=\"\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n gds-margin-0\n gds-padding-0\n\">\n <ng-content />\n</ul>\n<ul class=\"\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n gds-margin-0\n gds-margin-block-start-auto\n gds-padding-0\n\">\n <ng-content select=\"[menu-bottom]\" />\n</ul>\n", styles: ["@layer design-system{:host{box-shadow:-3px 0 4px #00000012 inset;border-right:.5px solid var(--gds-palette-border-default)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6329
6420
  }
6330
6421
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsNavAsideComponent, decorators: [{
6331
6422
  type: Component,
6332
6423
  args: [{ selector: 'gds-nav-aside', changeDetection: ChangeDetectionStrategy.OnPush, host: {
6333
6424
  class: 'gds-display-flex gds-flex-column gds-radius-top-left-lg gds-radius-bottom-left-lg gds-height-100-parent gds-width-fit-content gds-padding-block-xs gds-padding-inline-0 gds-background-white'
6334
- }, template: "<ul class=\"\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n gds-margin-0\n gds-padding-0\n\">\n <ng-content />\n</ul>\n<ul class=\"\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n gds-margin-0\n gds-margin-block-start-auto\n gds-padding-0\n\">\n <ng-content select=\"[menu-bottom]\" />\n</ul>\n", styles: [":host{box-shadow:-3px 0 4px #00000012 inset;border-right:.5px solid var(--gds-palette-border-default)}\n"] }]
6425
+ }, template: "<ul class=\"\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n gds-margin-0\n gds-padding-0\n\">\n <ng-content />\n</ul>\n<ul class=\"\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n gds-margin-0\n gds-margin-block-start-auto\n gds-padding-0\n\">\n <ng-content select=\"[menu-bottom]\" />\n</ul>\n", styles: ["@layer design-system{:host{box-shadow:-3px 0 4px #00000012 inset;border-right:.5px solid var(--gds-palette-border-default)}}\n"] }]
6335
6426
  }] });
6336
6427
 
6428
+ const CDK_MENU_CONNECTED_POSITIONS = [
6429
+ {
6430
+ originX: 'center',
6431
+ originY: 'bottom',
6432
+ overlayX: 'center',
6433
+ overlayY: 'top',
6434
+ offsetY: 4
6435
+ },
6436
+ {
6437
+ originX: 'center',
6438
+ originY: 'top',
6439
+ overlayX: 'center',
6440
+ overlayY: 'bottom',
6441
+ offsetY: -4
6442
+ },
6443
+ {
6444
+ originX: 'end',
6445
+ originY: 'bottom',
6446
+ overlayX: 'end',
6447
+ overlayY: 'top',
6448
+ offsetY: 4
6449
+ },
6450
+ {
6451
+ originX: 'end',
6452
+ originY: 'top',
6453
+ overlayX: 'end',
6454
+ overlayY: 'bottom',
6455
+ offsetY: -4
6456
+ }
6457
+ ];
6458
+ const CDK_MENU_CONNECTED_POSITIONS_TOP = [
6459
+ {
6460
+ originX: 'center',
6461
+ originY: 'top',
6462
+ overlayX: 'center',
6463
+ overlayY: 'bottom',
6464
+ offsetY: -4
6465
+ },
6466
+ {
6467
+ originX: 'center',
6468
+ originY: 'bottom',
6469
+ overlayX: 'center',
6470
+ overlayY: 'top',
6471
+ offsetY: 4
6472
+ },
6473
+ {
6474
+ originX: 'end',
6475
+ originY: 'bottom',
6476
+ overlayX: 'end',
6477
+ overlayY: 'top',
6478
+ offsetY: 4
6479
+ },
6480
+ {
6481
+ originX: 'end',
6482
+ originY: 'top',
6483
+ overlayX: 'end',
6484
+ overlayY: 'bottom',
6485
+ offsetY: -4
6486
+ }
6487
+ ];
6488
+ /** for use when the context menu is close to the right side of the container
6489
+ * so that it doesn't go over the edge, per UX
6490
+ */
6491
+ const CDK_MENU_CONNECTED_POSITIONS_CONTAINER_RIGHT = [
6492
+ {
6493
+ originX: 'end',
6494
+ originY: 'bottom',
6495
+ overlayX: 'end',
6496
+ overlayY: 'top',
6497
+ offsetY: 4
6498
+ },
6499
+ {
6500
+ originX: 'end',
6501
+ originY: 'top',
6502
+ overlayX: 'end',
6503
+ overlayY: 'bottom',
6504
+ offsetY: -4
6505
+ }
6506
+ ];
6507
+ /** for use when the context menu is close to the left side of the container
6508
+ * so that it doesn't go over the edge, per UX
6509
+ */
6510
+ const CDK_MENU_CONNECTED_POSITIONS_CONTAINER_LEFT = [
6511
+ {
6512
+ originX: 'start',
6513
+ originY: 'bottom',
6514
+ overlayX: 'start',
6515
+ overlayY: 'top',
6516
+ offsetY: 4
6517
+ },
6518
+ {
6519
+ originX: 'start',
6520
+ originY: 'top',
6521
+ overlayX: 'start',
6522
+ overlayY: 'bottom',
6523
+ offsetY: -4
6524
+ }
6525
+ ];
6526
+
6337
6527
  class GdsNestedSelectComponent extends GdsSignalFormContainer {
6338
6528
  #injector = inject(Injector);
6339
6529
  #directive = inject(CdkMenuTrigger);
@@ -6474,7 +6664,7 @@ class GdsNestedSelectComponent extends GdsSignalFormContainer {
6474
6664
  }
6475
6665
  };
6476
6666
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsNestedSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6477
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsNestedSelectComponent, isStandalone: true, selector: "gds-nested-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: true, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: true, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, maxMenuHeight: { classPropertyName: "maxMenuHeight", publicName: "maxMenuHeight", isSignal: true, isRequired: false, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, menuPosition: { classPropertyName: "menuPosition", publicName: "menuPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "button" }, listeners: { "keydown.escape": "onEscape()" }, properties: { "class.is-controlled": "isOpen()" }, classAttribute: "\n gds-align-items-center\n gds-display-flex\n gds-gap-2xs\n gds-justify-content-between\n gds-mobile-padding-block-0\n gds-mobile-text-input-mobile\n gds-padding-block-3xs\n gds-padding-inline-xs\n gds-radius-sm\n gds-text-input\n " }, queries: [{ propertyName: "input", first: true, predicate: GdsNativeInputDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1$1.CdkMenuTrigger }], ngImport: i0, template: "<div class=\"\n content\n gds-position-absolute\n\">\n <ng-content />\n</div>\n\n<div\n class=\"\n gds-flex-1\n gds-min-width-0\n gds-truncate\n label\n \"\n [ngClass]=\"{ placeholder: !label() }\"\n>\n {{ label() ? label() : inputPlaceholder() }}\n</div>\n\n@if (clearable() && label() && !inputDisabled()) {\n <button\n gds-icon-button\n class=\"\n gds-background-none\n gds-min-height-0\n \"\n [disabled]=\"inputDisabled()\"\n (click)=\"onClear($event)\"\n (keydown.enter)=\"onClear($event)\"\n [attr.aria-label]=\"clearAriaLabel() | translate\"\n >\n <gds-icon\n key=\"line-dismiss\"\n class=\"\n gds-icon-primary\n gds-icon-size-3xs\n icon\n \"\n />\n </button>\n} @else {\n <gds-icon\n class=\"\n gds-icon-primary\n gds-icon-size-2xs\n icon\n \"\n [key]=\"isOpen() ? 'line-chevron-up-stroke' : 'line-chevron-down-stroke'\"\n />\n}\n\n<ng-template #menu>\n <gds-dropdown\n cdkTargetMenuAim\n preventMobileStyling\n allowDefaultTabBehavior\n [style.minWidth]=\"dropdownWidth() + 'px'\"\n >\n <div\n [style.maxHeight]=\"maxMenuHeight()\"\n class=\"gds-scrollable-vertically\"\n >\n <div class=\"\n gds-display-flex\n gds-flex-column\n \">\n @for (option of options(); track $index) {\n @if (!option.children?.length) {\n <span\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-flex-1\n gds-justify-content-between\n gds-padding-inline-sm\n gds-position-relative\n gds-radius-sm\n gds-text-body\n gds-text-primary\n item\n \"\n role=\"button\"\n [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n cdkMenuItem\n (cdkMenuItemTriggered)=\"onItemClick(option)\"\n >{{ option[bindLabel()] }}</span\n >\n } @else {\n <span\n [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-flex-1\n gds-justify-content-between\n gds-padding-inline-sm\n gds-position-relative\n gds-radius-sm\n gds-text-body\n gds-text-primary\n item\n \"\n role=\"button\"\n cdkMenuItem\n [cdkMenuTriggerFor]=\"subMenu\"\n [cdkMenuTriggerData]=\"{ $implicit: option.children }\"\n >\n {{ option[bindLabel()] }}\n <gds-icon\n key=\"line-chevron-right-stroke\"\n class=\"gds-icon-size-2xs\"\n />\n </span>\n }\n }\n </div>\n </div>\n </gds-dropdown>\n</ng-template>\n\n<ng-template\n #subMenu\n let-data\n>\n <gds-dropdown\n cdkTargetMenuAim\n preventMobileStyling\n >\n <div\n [style.maxHeight]=\"maxMenuHeight()\"\n class=\"gds-scrollable-vertically\"\n >\n <div class=\"\n gds-display-flex\n gds-flex-column\n \">\n @for (option of data; track $index) {\n @if (!option.children?.length) {\n <span\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-flex-1\n gds-justify-content-between\n gds-padding-inline-sm\n gds-position-relative\n gds-radius-sm\n gds-text-body\n gds-text-primary\n item\n \"\n role=\"button\"\n [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n cdkMenuItem\n (cdkMenuItemTriggered)=\"onItemClick(option)\"\n >{{ option[bindLabel()] }}</span\n >\n } @else {\n <span\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-flex-1\n gds-justify-content-between\n gds-padding-inline-sm\n gds-position-relative\n gds-radius-sm\n gds-text-body\n gds-text-primary\n gds-text-primary\n item\n \"\n [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n cdkMenuItem\n role=\"button\"\n [cdkMenuTriggerFor]=\"subMenu\"\n [cdkMenuTriggerData]=\"{ $implicit: option.children }\"\n >\n {{ option[bindLabel()] }}\n <gds-icon\n key=\"line-chevron-right-stroke\"\n class=\"gds-icon-size-2xs\"\n />\n </span>\n }\n }\n </div>\n </div>\n </gds-dropdown>\n</ng-template>\n", styles: [":host{outline:none;--gds-form-control-cursor: pointer;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{background-color:var(--background-color);border:.5px solid var(--border-color);color:var(--text-color);cursor:var(--cursor)!important}:host ::ng-deep input:focus,:host ::ng-deep textarea:focus{outline:none}:host:focus-within,:host.is-controlled{isolation:isolate;position:relative}:host:focus-within:before,:host.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--active-color);border-radius:var(--gds-borderRadius-xs)}:host{min-height:var(--gds-size-md-rem)}:is(body[isMobile=true]) :host{min-height:var(--gds-size-lg-rem)}:host:hover{background-color:var(--hover-color)}:host[disabled]::ng-deep svg-icon,:host:has(*:disabled,*[disabled=true])::ng-deep svg-icon{color:var(--disabled-text-color)}:host[invalid][touched]:not(:focus-within,.is-controlled)::ng-deep svg-icon,:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled)::ng-deep svg-icon{color:var(--invalid-color)}:host ::ng-deep *::placeholder{color:var(--placeholder-color)}:host .label{color:var(--text-color)}:host .placeholder{color:var(--placeholder-color);-webkit-user-select:none;user-select:none}:host .chevron{outline:none}:host .content{opacity:0;z-index:-1}.item{padding-block:11px;cursor:pointer;--wrapper-margin-inline: 0px;--wrapper-margin-block: 2px}.item:hover:before,.item.active:before,.item[aria-expanded=true]:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}.item:focus-visible:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}.item:focus-visible{outline:none}\n"], dependencies: [{ kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: GdsDropdownComponent, selector: "gds-dropdown", inputs: ["triggerElement", "horizontal", "preventMobileStyling", "allowDefaultTabBehavior"] }, { kind: "directive", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "directive", type: CdkTargetMenuAim, selector: "[cdkTargetMenuAim]", exportAs: ["cdkTargetMenuAim"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6667
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsNestedSelectComponent, isStandalone: true, selector: "gds-nested-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: true, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: true, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, maxMenuHeight: { classPropertyName: "maxMenuHeight", publicName: "maxMenuHeight", isSignal: true, isRequired: false, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, menuPosition: { classPropertyName: "menuPosition", publicName: "menuPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "button" }, listeners: { "keydown.escape": "onEscape()" }, properties: { "class.is-controlled": "isOpen()" }, classAttribute: "\n gds-align-items-center\n gds-display-flex\n gds-gap-2xs\n gds-justify-content-between\n gds-mobile-padding-block-0\n gds-mobile-text-input-mobile\n gds-padding-block-3xs\n gds-padding-inline-xs\n gds-radius-sm\n gds-text-input\n " }, queries: [{ propertyName: "input", first: true, predicate: GdsNativeInputDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1$1.CdkMenuTrigger }], ngImport: i0, template: "<div class=\"\n content\n gds-position-absolute\n\">\n <ng-content />\n</div>\n\n<div\n class=\"\n gds-flex-1\n gds-min-width-0\n gds-truncate\n label\n \"\n [ngClass]=\"{ placeholder: !label() }\"\n>\n {{ label() ? label() : inputPlaceholder() }}\n</div>\n\n@if (clearable() && label() && !inputDisabled()) {\n <button\n gds-icon-button\n class=\"\n gds-background-none\n gds-min-height-0\n \"\n [disabled]=\"inputDisabled()\"\n (click)=\"onClear($event)\"\n (keydown.enter)=\"onClear($event)\"\n [attr.aria-label]=\"clearAriaLabel() | translate\"\n >\n <gds-icon\n key=\"line-dismiss\"\n class=\"\n gds-icon-primary\n gds-icon-size-3xs\n icon\n \"\n />\n </button>\n} @else {\n <gds-icon\n class=\"\n gds-icon-primary\n gds-icon-size-2xs\n icon\n \"\n [key]=\"isOpen() ? 'line-chevron-up-stroke' : 'line-chevron-down-stroke'\"\n />\n}\n\n<ng-template #menu>\n <gds-dropdown\n cdkTargetMenuAim\n preventMobileStyling\n allowDefaultTabBehavior\n [style.minWidth]=\"dropdownWidth() + 'px'\"\n >\n <div\n [style.maxHeight]=\"maxMenuHeight()\"\n class=\"gds-scrollable-vertically\"\n >\n <div class=\"\n gds-display-flex\n gds-flex-column\n \">\n @for (option of options(); track $index) {\n @if (!option.children?.length) {\n <span\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-flex-1\n gds-justify-content-between\n gds-padding-inline-sm\n gds-position-relative\n gds-radius-sm\n gds-text-body\n gds-text-primary\n item\n \"\n role=\"button\"\n [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n cdkMenuItem\n (cdkMenuItemTriggered)=\"onItemClick(option)\"\n >{{ option[bindLabel()] }}</span\n >\n } @else {\n <span\n [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-flex-1\n gds-justify-content-between\n gds-padding-inline-sm\n gds-position-relative\n gds-radius-sm\n gds-text-body\n gds-text-primary\n item\n \"\n role=\"button\"\n cdkMenuItem\n [cdkMenuTriggerFor]=\"subMenu\"\n [cdkMenuTriggerData]=\"{ $implicit: option.children }\"\n >\n {{ option[bindLabel()] }}\n <gds-icon\n key=\"line-chevron-right-stroke\"\n class=\"gds-icon-size-2xs\"\n />\n </span>\n }\n }\n </div>\n </div>\n </gds-dropdown>\n</ng-template>\n\n<ng-template\n #subMenu\n let-data\n>\n <gds-dropdown\n cdkTargetMenuAim\n preventMobileStyling\n >\n <div\n [style.maxHeight]=\"maxMenuHeight()\"\n class=\"gds-scrollable-vertically\"\n >\n <div class=\"\n gds-display-flex\n gds-flex-column\n \">\n @for (option of data; track $index) {\n @if (!option.children?.length) {\n <span\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-flex-1\n gds-justify-content-between\n gds-padding-inline-sm\n gds-position-relative\n gds-radius-sm\n gds-text-body\n gds-text-primary\n item\n \"\n role=\"button\"\n [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n cdkMenuItem\n (cdkMenuItemTriggered)=\"onItemClick(option)\"\n >{{ option[bindLabel()] }}</span\n >\n } @else {\n <span\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-flex-1\n gds-justify-content-between\n gds-padding-inline-sm\n gds-position-relative\n gds-radius-sm\n gds-text-body\n gds-text-primary\n gds-text-primary\n item\n \"\n [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n cdkMenuItem\n role=\"button\"\n [cdkMenuTriggerFor]=\"subMenu\"\n [cdkMenuTriggerData]=\"{ $implicit: option.children }\"\n >\n {{ option[bindLabel()] }}\n <gds-icon\n key=\"line-chevron-right-stroke\"\n class=\"gds-icon-size-2xs\"\n />\n </span>\n }\n }\n </div>\n </div>\n </gds-dropdown>\n</ng-template>\n", styles: ["@layer design-system{:host{outline:none;--gds-form-control-cursor: pointer;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{background-color:var(--background-color);border:.5px solid var(--border-color);color:var(--text-color);cursor:var(--cursor)!important}:host ::ng-deep input:focus,:host ::ng-deep textarea:focus{outline:none}:host:focus-within,:host.is-controlled{isolation:isolate;position:relative}:host:focus-within:before,:host.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--active-color);border-radius:var(--gds-borderRadius-xs)}:host{min-height:var(--gds-size-md-rem)}:is(body[isMobile=true]) :host{min-height:var(--gds-size-lg-rem)}:host:hover{background-color:var(--hover-color)}:host[disabled]::ng-deep svg-icon,:host:has(*:disabled,*[disabled=true])::ng-deep svg-icon{color:var(--disabled-text-color)}:host[invalid][touched]:not(:focus-within,.is-controlled)::ng-deep svg-icon,:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled)::ng-deep svg-icon{color:var(--invalid-color)}:host ::ng-deep *::placeholder{color:var(--placeholder-color)}:host .label{color:var(--text-color)}:host .placeholder{color:var(--placeholder-color);-webkit-user-select:none;user-select:none}:host .chevron{outline:none}:host .content{opacity:0;z-index:-1}.item{padding-block:11px;cursor:pointer;--wrapper-margin-inline: 0px;--wrapper-margin-block: 2px}.item:hover:before,.item.active:before,.item[aria-expanded=true]:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}.item:focus-visible:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}.item:focus-visible{outline:none}}\n"], dependencies: [{ kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: GdsDropdownComponent, selector: "gds-dropdown", inputs: ["triggerElement", "horizontal", "preventMobileStyling", "allowDefaultTabBehavior"] }, { kind: "directive", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "directive", type: CdkTargetMenuAim, selector: "[cdkTargetMenuAim]", exportAs: ["cdkTargetMenuAim"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6478
6668
  }
6479
6669
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsNestedSelectComponent, decorators: [{
6480
6670
  type: Component,
@@ -6504,7 +6694,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
6504
6694
  `,
6505
6695
  '[class.is-controlled]': 'isOpen()',
6506
6696
  '(keydown.escape)': 'onEscape()'
6507
- }, hostDirectives: [CdkMenuTrigger], template: "<div class=\"\n content\n gds-position-absolute\n\">\n <ng-content />\n</div>\n\n<div\n class=\"\n gds-flex-1\n gds-min-width-0\n gds-truncate\n label\n \"\n [ngClass]=\"{ placeholder: !label() }\"\n>\n {{ label() ? label() : inputPlaceholder() }}\n</div>\n\n@if (clearable() && label() && !inputDisabled()) {\n <button\n gds-icon-button\n class=\"\n gds-background-none\n gds-min-height-0\n \"\n [disabled]=\"inputDisabled()\"\n (click)=\"onClear($event)\"\n (keydown.enter)=\"onClear($event)\"\n [attr.aria-label]=\"clearAriaLabel() | translate\"\n >\n <gds-icon\n key=\"line-dismiss\"\n class=\"\n gds-icon-primary\n gds-icon-size-3xs\n icon\n \"\n />\n </button>\n} @else {\n <gds-icon\n class=\"\n gds-icon-primary\n gds-icon-size-2xs\n icon\n \"\n [key]=\"isOpen() ? 'line-chevron-up-stroke' : 'line-chevron-down-stroke'\"\n />\n}\n\n<ng-template #menu>\n <gds-dropdown\n cdkTargetMenuAim\n preventMobileStyling\n allowDefaultTabBehavior\n [style.minWidth]=\"dropdownWidth() + 'px'\"\n >\n <div\n [style.maxHeight]=\"maxMenuHeight()\"\n class=\"gds-scrollable-vertically\"\n >\n <div class=\"\n gds-display-flex\n gds-flex-column\n \">\n @for (option of options(); track $index) {\n @if (!option.children?.length) {\n <span\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-flex-1\n gds-justify-content-between\n gds-padding-inline-sm\n gds-position-relative\n gds-radius-sm\n gds-text-body\n gds-text-primary\n item\n \"\n role=\"button\"\n [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n cdkMenuItem\n (cdkMenuItemTriggered)=\"onItemClick(option)\"\n >{{ option[bindLabel()] }}</span\n >\n } @else {\n <span\n [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-flex-1\n gds-justify-content-between\n gds-padding-inline-sm\n gds-position-relative\n gds-radius-sm\n gds-text-body\n gds-text-primary\n item\n \"\n role=\"button\"\n cdkMenuItem\n [cdkMenuTriggerFor]=\"subMenu\"\n [cdkMenuTriggerData]=\"{ $implicit: option.children }\"\n >\n {{ option[bindLabel()] }}\n <gds-icon\n key=\"line-chevron-right-stroke\"\n class=\"gds-icon-size-2xs\"\n />\n </span>\n }\n }\n </div>\n </div>\n </gds-dropdown>\n</ng-template>\n\n<ng-template\n #subMenu\n let-data\n>\n <gds-dropdown\n cdkTargetMenuAim\n preventMobileStyling\n >\n <div\n [style.maxHeight]=\"maxMenuHeight()\"\n class=\"gds-scrollable-vertically\"\n >\n <div class=\"\n gds-display-flex\n gds-flex-column\n \">\n @for (option of data; track $index) {\n @if (!option.children?.length) {\n <span\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-flex-1\n gds-justify-content-between\n gds-padding-inline-sm\n gds-position-relative\n gds-radius-sm\n gds-text-body\n gds-text-primary\n item\n \"\n role=\"button\"\n [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n cdkMenuItem\n (cdkMenuItemTriggered)=\"onItemClick(option)\"\n >{{ option[bindLabel()] }}</span\n >\n } @else {\n <span\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-flex-1\n gds-justify-content-between\n gds-padding-inline-sm\n gds-position-relative\n gds-radius-sm\n gds-text-body\n gds-text-primary\n gds-text-primary\n item\n \"\n [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n cdkMenuItem\n role=\"button\"\n [cdkMenuTriggerFor]=\"subMenu\"\n [cdkMenuTriggerData]=\"{ $implicit: option.children }\"\n >\n {{ option[bindLabel()] }}\n <gds-icon\n key=\"line-chevron-right-stroke\"\n class=\"gds-icon-size-2xs\"\n />\n </span>\n }\n }\n </div>\n </div>\n </gds-dropdown>\n</ng-template>\n", styles: [":host{outline:none;--gds-form-control-cursor: pointer;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{background-color:var(--background-color);border:.5px solid var(--border-color);color:var(--text-color);cursor:var(--cursor)!important}:host ::ng-deep input:focus,:host ::ng-deep textarea:focus{outline:none}:host:focus-within,:host.is-controlled{isolation:isolate;position:relative}:host:focus-within:before,:host.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--active-color);border-radius:var(--gds-borderRadius-xs)}:host{min-height:var(--gds-size-md-rem)}:is(body[isMobile=true]) :host{min-height:var(--gds-size-lg-rem)}:host:hover{background-color:var(--hover-color)}:host[disabled]::ng-deep svg-icon,:host:has(*:disabled,*[disabled=true])::ng-deep svg-icon{color:var(--disabled-text-color)}:host[invalid][touched]:not(:focus-within,.is-controlled)::ng-deep svg-icon,:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled)::ng-deep svg-icon{color:var(--invalid-color)}:host ::ng-deep *::placeholder{color:var(--placeholder-color)}:host .label{color:var(--text-color)}:host .placeholder{color:var(--placeholder-color);-webkit-user-select:none;user-select:none}:host .chevron{outline:none}:host .content{opacity:0;z-index:-1}.item{padding-block:11px;cursor:pointer;--wrapper-margin-inline: 0px;--wrapper-margin-block: 2px}.item:hover:before,.item.active:before,.item[aria-expanded=true]:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}.item:focus-visible:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}.item:focus-visible{outline:none}\n"] }]
6697
+ }, hostDirectives: [CdkMenuTrigger], template: "<div class=\"\n content\n gds-position-absolute\n\">\n <ng-content />\n</div>\n\n<div\n class=\"\n gds-flex-1\n gds-min-width-0\n gds-truncate\n label\n \"\n [ngClass]=\"{ placeholder: !label() }\"\n>\n {{ label() ? label() : inputPlaceholder() }}\n</div>\n\n@if (clearable() && label() && !inputDisabled()) {\n <button\n gds-icon-button\n class=\"\n gds-background-none\n gds-min-height-0\n \"\n [disabled]=\"inputDisabled()\"\n (click)=\"onClear($event)\"\n (keydown.enter)=\"onClear($event)\"\n [attr.aria-label]=\"clearAriaLabel() | translate\"\n >\n <gds-icon\n key=\"line-dismiss\"\n class=\"\n gds-icon-primary\n gds-icon-size-3xs\n icon\n \"\n />\n </button>\n} @else {\n <gds-icon\n class=\"\n gds-icon-primary\n gds-icon-size-2xs\n icon\n \"\n [key]=\"isOpen() ? 'line-chevron-up-stroke' : 'line-chevron-down-stroke'\"\n />\n}\n\n<ng-template #menu>\n <gds-dropdown\n cdkTargetMenuAim\n preventMobileStyling\n allowDefaultTabBehavior\n [style.minWidth]=\"dropdownWidth() + 'px'\"\n >\n <div\n [style.maxHeight]=\"maxMenuHeight()\"\n class=\"gds-scrollable-vertically\"\n >\n <div class=\"\n gds-display-flex\n gds-flex-column\n \">\n @for (option of options(); track $index) {\n @if (!option.children?.length) {\n <span\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-flex-1\n gds-justify-content-between\n gds-padding-inline-sm\n gds-position-relative\n gds-radius-sm\n gds-text-body\n gds-text-primary\n item\n \"\n role=\"button\"\n [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n cdkMenuItem\n (cdkMenuItemTriggered)=\"onItemClick(option)\"\n >{{ option[bindLabel()] }}</span\n >\n } @else {\n <span\n [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-flex-1\n gds-justify-content-between\n gds-padding-inline-sm\n gds-position-relative\n gds-radius-sm\n gds-text-body\n gds-text-primary\n item\n \"\n role=\"button\"\n cdkMenuItem\n [cdkMenuTriggerFor]=\"subMenu\"\n [cdkMenuTriggerData]=\"{ $implicit: option.children }\"\n >\n {{ option[bindLabel()] }}\n <gds-icon\n key=\"line-chevron-right-stroke\"\n class=\"gds-icon-size-2xs\"\n />\n </span>\n }\n }\n </div>\n </div>\n </gds-dropdown>\n</ng-template>\n\n<ng-template\n #subMenu\n let-data\n>\n <gds-dropdown\n cdkTargetMenuAim\n preventMobileStyling\n >\n <div\n [style.maxHeight]=\"maxMenuHeight()\"\n class=\"gds-scrollable-vertically\"\n >\n <div class=\"\n gds-display-flex\n gds-flex-column\n \">\n @for (option of data; track $index) {\n @if (!option.children?.length) {\n <span\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-flex-1\n gds-justify-content-between\n gds-padding-inline-sm\n gds-position-relative\n gds-radius-sm\n gds-text-body\n gds-text-primary\n item\n \"\n role=\"button\"\n [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n cdkMenuItem\n (cdkMenuItemTriggered)=\"onItemClick(option)\"\n >{{ option[bindLabel()] }}</span\n >\n } @else {\n <span\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-flex-1\n gds-justify-content-between\n gds-padding-inline-sm\n gds-position-relative\n gds-radius-sm\n gds-text-body\n gds-text-primary\n gds-text-primary\n item\n \"\n [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n cdkMenuItem\n role=\"button\"\n [cdkMenuTriggerFor]=\"subMenu\"\n [cdkMenuTriggerData]=\"{ $implicit: option.children }\"\n >\n {{ option[bindLabel()] }}\n <gds-icon\n key=\"line-chevron-right-stroke\"\n class=\"gds-icon-size-2xs\"\n />\n </span>\n }\n }\n </div>\n </div>\n </gds-dropdown>\n</ng-template>\n", styles: ["@layer design-system{:host{outline:none;--gds-form-control-cursor: pointer;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{background-color:var(--background-color);border:.5px solid var(--border-color);color:var(--text-color);cursor:var(--cursor)!important}:host ::ng-deep input:focus,:host ::ng-deep textarea:focus{outline:none}:host:focus-within,:host.is-controlled{isolation:isolate;position:relative}:host:focus-within:before,:host.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--active-color);border-radius:var(--gds-borderRadius-xs)}:host{min-height:var(--gds-size-md-rem)}:is(body[isMobile=true]) :host{min-height:var(--gds-size-lg-rem)}:host:hover{background-color:var(--hover-color)}:host[disabled]::ng-deep svg-icon,:host:has(*:disabled,*[disabled=true])::ng-deep svg-icon{color:var(--disabled-text-color)}:host[invalid][touched]:not(:focus-within,.is-controlled)::ng-deep svg-icon,:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled)::ng-deep svg-icon{color:var(--invalid-color)}:host ::ng-deep *::placeholder{color:var(--placeholder-color)}:host .label{color:var(--text-color)}:host .placeholder{color:var(--placeholder-color);-webkit-user-select:none;user-select:none}:host .chevron{outline:none}:host .content{opacity:0;z-index:-1}.item{padding-block:11px;cursor:pointer;--wrapper-margin-inline: 0px;--wrapper-margin-block: 2px}.item:hover:before,.item.active:before,.item[aria-expanded=true]:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}.item:focus-visible:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}.item:focus-visible{outline:none}}\n"] }]
6508
6698
  }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: true }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: true }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], maxMenuHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxMenuHeight", required: false }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], menuPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuPosition", required: false }] }], input: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GdsNativeInputDirective), { isSignal: true }] }], menu: [{ type: i0.ViewChild, args: ['menu', { isSignal: true }] }] } });
6509
6699
 
6510
6700
  class GdsProgressBarComponent {
@@ -6513,11 +6703,11 @@ class GdsProgressBarComponent {
6513
6703
  }
6514
6704
  progress = input(0, { ...(ngDevMode ? { debugName: "progress" } : /* istanbul ignore next */ {}), transform: (value) => Math.max(Math.min(typeof value === 'string' ? Number.parseInt(value) : value, 100), 0) });
6515
6705
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6516
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: GdsProgressBarComponent, isStandalone: true, selector: "gds-progress-bar", inputs: { progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--percent-complete": "this.percentComplete" } }, ngImport: i0, template: "<div class=\"\n gds-progress-bar_rail\n gds-radius-pill\n\"></div>\n<div class=\"\n gds-progress-bar_track\n gds-radius-pill\n\"></div>\n", styles: [":host{--percent-complete: 0;--color: var(--gds-palette-icon-primary);display:block;height:var(--gds-spacing-2xs);position:relative}:host .gds-progress-bar_track{background-color:var(--color);width:calc(var(--percent-complete) * 1%);position:absolute;height:3px;top:50%;transform:translateY(-50%)}:host .gds-progress-bar_rail{background-color:var(--gds-palette-border-default);position:absolute;height:1.5px;top:50%;transform:translateY(-50%);width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6706
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: GdsProgressBarComponent, isStandalone: true, selector: "gds-progress-bar", inputs: { progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--percent-complete": "this.percentComplete" } }, ngImport: i0, template: "<div class=\"\n gds-progress-bar_rail\n gds-radius-pill\n\"></div>\n<div class=\"\n gds-progress-bar_track\n gds-radius-pill\n\"></div>\n", styles: ["@layer design-system{:host{--percent-complete: 0;--color: var(--gds-palette-icon-primary);display:block;height:var(--gds-spacing-2xs);position:relative}:host .gds-progress-bar_track{background-color:var(--color);width:calc(var(--percent-complete) * 1%);position:absolute;height:3px;top:50%;transform:translateY(-50%)}:host .gds-progress-bar_rail{background-color:var(--gds-palette-border-default);position:absolute;height:1.5px;top:50%;transform:translateY(-50%);width:100%}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6517
6707
  }
6518
6708
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsProgressBarComponent, decorators: [{
6519
6709
  type: Component,
6520
- args: [{ standalone: true, selector: 'gds-progress-bar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"\n gds-progress-bar_rail\n gds-radius-pill\n\"></div>\n<div class=\"\n gds-progress-bar_track\n gds-radius-pill\n\"></div>\n", styles: [":host{--percent-complete: 0;--color: var(--gds-palette-icon-primary);display:block;height:var(--gds-spacing-2xs);position:relative}:host .gds-progress-bar_track{background-color:var(--color);width:calc(var(--percent-complete) * 1%);position:absolute;height:3px;top:50%;transform:translateY(-50%)}:host .gds-progress-bar_rail{background-color:var(--gds-palette-border-default);position:absolute;height:1.5px;top:50%;transform:translateY(-50%);width:100%}\n"] }]
6710
+ args: [{ standalone: true, selector: 'gds-progress-bar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"\n gds-progress-bar_rail\n gds-radius-pill\n\"></div>\n<div class=\"\n gds-progress-bar_track\n gds-radius-pill\n\"></div>\n", styles: ["@layer design-system{:host{--percent-complete: 0;--color: var(--gds-palette-icon-primary);display:block;height:var(--gds-spacing-2xs);position:relative}:host .gds-progress-bar_track{background-color:var(--color);width:calc(var(--percent-complete) * 1%);position:absolute;height:3px;top:50%;transform:translateY(-50%)}:host .gds-progress-bar_rail{background-color:var(--gds-palette-border-default);position:absolute;height:1.5px;top:50%;transform:translateY(-50%);width:100%}}\n"] }]
6521
6711
  }], propDecorators: { percentComplete: [{
6522
6712
  type: HostBinding,
6523
6713
  args: ['style.--percent-complete']
@@ -6532,11 +6722,11 @@ class GdsSpinnerComponent {
6532
6722
  return `0 0 ${val} ${val}`;
6533
6723
  }, ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
6534
6724
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6535
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: GdsSpinnerComponent, isStandalone: true, selector: "gds-spinner", inputs: { trackWidth: { classPropertyName: "trackWidth", publicName: "trackWidth", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--track-width": "trackWidth()", "style.--size": "size()" } }, ngImport: i0, template: "<svg\n class=\"gds-spinner\"\n role=\"progressbar\"\n aria-label=\"loading\"\n [attr.viewBox]=\"viewBox()\"\n width=\"100%\"\n height=\"100%\"\n preserveAspectRatio=\"xMinYMin meet\"\n>\n <circle class=\"gds-spinner_track\" />\n <circle class=\"gds-spinner_indicator\" />\n</svg>\n", styles: [":host{display:inline-flex;font-size:var(--size, inherit);width:1em;height:1em;color:var(--gds-palette-background-bright)}:host .gds-spinner_track,:host .gds-spinner_indicator{fill:none;stroke-width:var(--track-width);r:calc(.5em - var(--track-width) / 2);cx:.5em;cy:.5em;transform-origin:50% 50%}:host .gds-spinner_track{stroke:transparent;transform-origin:0% 0%}:host .gds-spinner_indicator{stroke:currentColor;stroke-linecap:round;stroke-dasharray:150% 75%;animation:spin 3s linear infinite}@keyframes spin{0%{transform:rotate(0);stroke-dasharray:.05em,3em}50%{transform:rotate(450deg);stroke-dasharray:1.375em,1.375em}to{transform:rotate(1080deg);stroke-dasharray:.05em,3em}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6725
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: GdsSpinnerComponent, isStandalone: true, selector: "gds-spinner", inputs: { trackWidth: { classPropertyName: "trackWidth", publicName: "trackWidth", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--track-width": "trackWidth()", "style.--size": "size()" } }, ngImport: i0, template: "<svg\n class=\"gds-spinner\"\n role=\"progressbar\"\n aria-label=\"loading\"\n [attr.viewBox]=\"viewBox()\"\n width=\"100%\"\n height=\"100%\"\n preserveAspectRatio=\"xMinYMin meet\"\n>\n <circle class=\"gds-spinner_track\" />\n <circle class=\"gds-spinner_indicator\" />\n</svg>\n", styles: ["@layer design-system{:host{display:inline-flex;font-size:var(--size, inherit);width:1em;height:1em;color:var(--gds-palette-background-bright)}:host .gds-spinner_track,:host .gds-spinner_indicator{fill:none;stroke-width:var(--track-width);r:calc(.5em - var(--track-width) / 2);cx:.5em;cy:.5em;transform-origin:50% 50%}:host .gds-spinner_track{stroke:transparent;transform-origin:0% 0%}:host .gds-spinner_indicator{stroke:currentColor;stroke-linecap:round;stroke-dasharray:150% 75%;animation:spin 3s linear infinite}@keyframes spin{0%{transform:rotate(0);stroke-dasharray:.05em,3em}50%{transform:rotate(450deg);stroke-dasharray:1.375em,1.375em}to{transform:rotate(1080deg);stroke-dasharray:.05em,3em}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6536
6726
  }
6537
6727
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsSpinnerComponent, decorators: [{
6538
6728
  type: Component,
6539
- args: [{ standalone: true, selector: 'gds-spinner', host: { '[style.--track-width]': 'trackWidth()', '[style.--size]': 'size()' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg\n class=\"gds-spinner\"\n role=\"progressbar\"\n aria-label=\"loading\"\n [attr.viewBox]=\"viewBox()\"\n width=\"100%\"\n height=\"100%\"\n preserveAspectRatio=\"xMinYMin meet\"\n>\n <circle class=\"gds-spinner_track\" />\n <circle class=\"gds-spinner_indicator\" />\n</svg>\n", styles: [":host{display:inline-flex;font-size:var(--size, inherit);width:1em;height:1em;color:var(--gds-palette-background-bright)}:host .gds-spinner_track,:host .gds-spinner_indicator{fill:none;stroke-width:var(--track-width);r:calc(.5em - var(--track-width) / 2);cx:.5em;cy:.5em;transform-origin:50% 50%}:host .gds-spinner_track{stroke:transparent;transform-origin:0% 0%}:host .gds-spinner_indicator{stroke:currentColor;stroke-linecap:round;stroke-dasharray:150% 75%;animation:spin 3s linear infinite}@keyframes spin{0%{transform:rotate(0);stroke-dasharray:.05em,3em}50%{transform:rotate(450deg);stroke-dasharray:1.375em,1.375em}to{transform:rotate(1080deg);stroke-dasharray:.05em,3em}}\n"] }]
6729
+ args: [{ standalone: true, selector: 'gds-spinner', host: { '[style.--track-width]': 'trackWidth()', '[style.--size]': 'size()' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg\n class=\"gds-spinner\"\n role=\"progressbar\"\n aria-label=\"loading\"\n [attr.viewBox]=\"viewBox()\"\n width=\"100%\"\n height=\"100%\"\n preserveAspectRatio=\"xMinYMin meet\"\n>\n <circle class=\"gds-spinner_track\" />\n <circle class=\"gds-spinner_indicator\" />\n</svg>\n", styles: ["@layer design-system{:host{display:inline-flex;font-size:var(--size, inherit);width:1em;height:1em;color:var(--gds-palette-background-bright)}:host .gds-spinner_track,:host .gds-spinner_indicator{fill:none;stroke-width:var(--track-width);r:calc(.5em - var(--track-width) / 2);cx:.5em;cy:.5em;transform-origin:50% 50%}:host .gds-spinner_track{stroke:transparent;transform-origin:0% 0%}:host .gds-spinner_indicator{stroke:currentColor;stroke-linecap:round;stroke-dasharray:150% 75%;animation:spin 3s linear infinite}@keyframes spin{0%{transform:rotate(0);stroke-dasharray:.05em,3em}50%{transform:rotate(450deg);stroke-dasharray:1.375em,1.375em}to{transform:rotate(1080deg);stroke-dasharray:.05em,3em}}}\n"] }]
6540
6730
  }], propDecorators: { trackWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackWidth", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
6541
6731
 
6542
6732
  class GdsSearchBarComponent {
@@ -6718,7 +6908,7 @@ class GdsSearchBarComponent {
6718
6908
  this.#renderer.setStyle(this.dropdownPanelScroll.nativeElement.parentElement, 'visibility', 'visible');
6719
6909
  };
6720
6910
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsSearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6721
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsSearchBarComponent, isStandalone: true, selector: "gds-search-bar", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: true, transformFunction: null }, leadingIcon: { classPropertyName: "leadingIcon", publicName: "leadingIcon", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, suppressClearOnClose: { classPropertyName: "suppressClearOnClose", publicName: "suppressClearOnClose", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, isOpenOverride: { classPropertyName: "isOpenOverride", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, searchFunction: { classPropertyName: "searchFunction", publicName: "searchFunction", isSignal: true, isRequired: false, transformFunction: null }, showAllItems: { classPropertyName: "showAllItems", publicName: "showAllItems", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "dropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isDisabled: "isDisabledChange", focused: "focused", blurred: "blurred", dropdownStateChanged: "dropdownStateChanged", searched: "searched", changed: "changed", value: "valueChange" }, host: { listeners: { "keydown": "setMarkedItemIndex()", "window:resize": "close()" }, properties: { "attr.disabled": "isDisabled() ? \"\" : undefined" } }, queries: [{ propertyName: "groupItemTmpl", first: true, predicate: ["groupItemTmpl"], descendants: true, isSignal: true }, { propertyName: "dropdownItemTmpl", first: true, predicate: ["itemTmpl"], descendants: true, isSignal: true }, { propertyName: "emptyTmpl", first: true, predicate: ["emptyTmpl"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-select\n #select\n class=\"\n gds-radius-sm\n gds-search-bar_input\n \"\n [placeholder]=\"!value() ? placeholder() : ''\"\n [isOpen]=\"isOpen()\"\n [disabled]=\"isDisabled()\"\n [ngModel]=\"value()\"\n (ngModelChange)=\"setValue($event)\"\n [items]=\"items()\"\n [bindValue]=\"bindValue()\"\n [bindLabel]=\"bindLabel()\"\n [loading]=\"loading()\"\n [markFirst]=\"false\"\n [groupBy]=\"groupBy()\"\n [dropdownPosition]=\"dropdownPosition()\"\n [searchFn]=\"showAllItems() ? showAllItemsSearchFunction : searchFunction()\"\n [ariaLabel]=\"ariaLabel() ?? 'Core.Accessibility.Searchbar' | translate\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\"\n (click)=\"handleClick($event)\"\n (search)=\"handleSearch($event.term)\"\n (open)=\"handleOpened()\"\n (close)=\"handleClosed()\"\n (change)=\"handleChange($event)\"\n (clear)=\"handleClear()\"\n>\n <ng-template\n ng-optgroup-tmp\n let-item=\"item\"\n let-index=\"index\"\n >\n <div class=\"\n gds-display-flex\n gds-padding-block-3xs\n gds-padding-inline-0\n gds-text-body\n gds-text-primary\n \">\n <ng-container *ngTemplateOutlet=\"groupItemTmpl(); context: { item, marked: markedIndex() === index }\" />\n </div>\n </ng-template>\n <ng-template\n ng-option-tmp\n let-item=\"item\"\n let-index=\"index\"\n >\n <div class=\"\n gds-display-flex\n gds-padding-block-3xs\n gds-padding-inline-0\n gds-text-body\n gds-text-primary\n \">\n <ng-container *ngTemplateOutlet=\"dropdownItemTmpl(); context: { item, marked: markedIndex() === index }\" />\n </div>\n </ng-template>\n <ng-template\n ng-notfound-tmp\n let-searchTerm=\"searchTerm\"\n >\n <ng-container *ngTemplateOutlet=\"emptyTmpl(); context: { searchTerm }\" />\n </ng-template>\n <ng-template ng-loadingtext-tmp>\n <div class=\"\n gds-display-flex\n gds-justify-content-center\n gds-padding-sm\n gds-text-body\n gds-text-primary\n \">\n <gds-spinner />\n </div>\n </ng-template>\n <ng-template ng-loadingspinner-tmp />\n <ng-template ng-clearbutton-tmp>\n <button\n gds-icon-button\n class=\"\n gds-background-none\n gds-min-height-0\n ng-clear-wrapper\n \"\n (click)=\"select.handleClearClick()\"\n (mousedown)=\"onClearMouseDown($event)\"\n (keydown.enter)=\"onKeydownClear($event)\"\n >\n <gds-icon\n class=\"\n gds-icon-primary\n gds-icon-size-3xs\n \"\n key=\"line-dismiss\"\n />\n </button>\n </ng-template>\n</ng-select>\n", styles: ["gds-search-bar{display:flex;max-width:var(--search-bar-max-width, 560px);min-width:230px;width:100%;position:relative;--background-color: var(--gds-palette-background-white);--text-color: var(--gds-palette-text-default-primary);--icon-color: var(--gds-palette-icon-primary);--cursor: text}gds-search-bar[disabled]{--background-color: var(--gds-palette-background-disabled);--text-color: var(--gds-palette-text-default-disabled);--icon-color: var(--gds-palette-icon-disabled);--cursor: not-allowed}gds-search-bar .gds-search-bar_icon{min-width:var(--gds-spacing-sm);color:var(--icon-color)}gds-search-bar .gds-search-bar_input{background-color:var(--background-color);border:.5px solid var(--gds-palette-border-default);color:var(--text-color);box-sizing:border-box;text-overflow:ellipsis;width:100%;font:var(--gds-text-body-shorthand)}:is(body[isMobile=true]) gds-search-bar .gds-search-bar_input{font:var(--gds-text-inputMobile-shorthand)}gds-search-bar .gds-search-bar_input::placeholder{color:var(--gds-palette-text-default-secondary);width:100%}gds-search-bar .gds-search-bar_input:focus-visible{outline:none}gds-search-bar .gds-search-bar_end-content{display:flex;align-items:center;gap:var(--gds-spacing-2xs)}gds-search-bar .gds-search-bar_clear-button{cursor:pointer}gds-search-bar ng-select.ng-select .leading-icon{height:var(--gds-iconSize-2xs);width:var(--gds-iconSize-2xs);color:var(--icon-color);margin-right:var(--gds-size-3xs-rem)}gds-search-bar ng-select.ng-select .ng-select-container{padding:6px var(--gds-spacing-xs);cursor:var(--cursor)}:is(body[isMobile=true]) gds-search-bar ng-select.ng-select .ng-select-container{padding-block:11px}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container{display:flex;justify-content:var(--search-bar-placeholder-justify, \"center\");align-items:center}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container:focus-within{justify-content:unset}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container .ng-input{padding:0 calc(12px + var(--gds-iconSize-xs))}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container .ng-input>input{vertical-align:baseline;cursor:var(--cursor)}gds-search-bar ng-select.ng-select .ng-dropdown-panel{padding:var(--gds-spacing-3xs) 2px;visibility:hidden}gds-search-bar ng-select.ng-select .ng-dropdown-panel .ng-option{overflow:unset!important}gds-search-bar ng-select.ng-select .ng-dropdown-panel .scroll-host{padding:0 2px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i2.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "directive", type: i2.NgOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { kind: "directive", type: i2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i2.NgNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { kind: "directive", type: i2.NgLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]" }, { kind: "directive", type: i2.NgLoadingSpinnerTemplateDirective, selector: "[ng-loadingspinner-tmp]" }, { kind: "directive", type: i2.NgClearButtonTemplateDirective, selector: "[ng-clearbutton-tmp]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GdsSpinnerComponent, selector: "gds-spinner", inputs: ["trackWidth", "size"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
6911
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsSearchBarComponent, isStandalone: true, selector: "gds-search-bar", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: true, transformFunction: null }, leadingIcon: { classPropertyName: "leadingIcon", publicName: "leadingIcon", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, suppressClearOnClose: { classPropertyName: "suppressClearOnClose", publicName: "suppressClearOnClose", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, isOpenOverride: { classPropertyName: "isOpenOverride", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, searchFunction: { classPropertyName: "searchFunction", publicName: "searchFunction", isSignal: true, isRequired: false, transformFunction: null }, showAllItems: { classPropertyName: "showAllItems", publicName: "showAllItems", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "dropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isDisabled: "isDisabledChange", focused: "focused", blurred: "blurred", dropdownStateChanged: "dropdownStateChanged", searched: "searched", changed: "changed", value: "valueChange" }, host: { listeners: { "keydown": "setMarkedItemIndex()", "window:resize": "close()" }, properties: { "attr.disabled": "isDisabled() ? \"\" : undefined" } }, queries: [{ propertyName: "groupItemTmpl", first: true, predicate: ["groupItemTmpl"], descendants: true, isSignal: true }, { propertyName: "dropdownItemTmpl", first: true, predicate: ["itemTmpl"], descendants: true, isSignal: true }, { propertyName: "emptyTmpl", first: true, predicate: ["emptyTmpl"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-select\n #select\n class=\"\n gds-radius-sm\n gds-search-bar_input\n \"\n [placeholder]=\"!value() ? placeholder() : ''\"\n [isOpen]=\"isOpen()\"\n [disabled]=\"isDisabled()\"\n [ngModel]=\"value()\"\n (ngModelChange)=\"setValue($event)\"\n [items]=\"items()\"\n [bindValue]=\"bindValue()\"\n [bindLabel]=\"bindLabel()\"\n [loading]=\"loading()\"\n [markFirst]=\"false\"\n [groupBy]=\"groupBy()\"\n [dropdownPosition]=\"dropdownPosition()\"\n [searchFn]=\"showAllItems() ? showAllItemsSearchFunction : searchFunction()\"\n [ariaLabel]=\"ariaLabel() ?? 'Core.Accessibility.Searchbar' | translate\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\"\n (click)=\"handleClick($event)\"\n (search)=\"handleSearch($event.term)\"\n (open)=\"handleOpened()\"\n (close)=\"handleClosed()\"\n (change)=\"handleChange($event)\"\n (clear)=\"handleClear()\"\n>\n <ng-template\n ng-optgroup-tmp\n let-item=\"item\"\n let-index=\"index\"\n >\n <div class=\"\n gds-display-flex\n gds-padding-block-3xs\n gds-padding-inline-0\n gds-text-body\n gds-text-primary\n \">\n <ng-container *ngTemplateOutlet=\"groupItemTmpl(); context: { item, marked: markedIndex() === index }\" />\n </div>\n </ng-template>\n <ng-template\n ng-option-tmp\n let-item=\"item\"\n let-index=\"index\"\n >\n <div class=\"\n gds-display-flex\n gds-padding-block-3xs\n gds-padding-inline-0\n gds-text-body\n gds-text-primary\n \">\n <ng-container *ngTemplateOutlet=\"dropdownItemTmpl(); context: { item, marked: markedIndex() === index }\" />\n </div>\n </ng-template>\n <ng-template\n ng-notfound-tmp\n let-searchTerm=\"searchTerm\"\n >\n <ng-container *ngTemplateOutlet=\"emptyTmpl(); context: { searchTerm }\" />\n </ng-template>\n <ng-template ng-loadingtext-tmp>\n <div class=\"\n gds-display-flex\n gds-justify-content-center\n gds-padding-sm\n gds-text-body\n gds-text-primary\n \">\n <gds-spinner />\n </div>\n </ng-template>\n <ng-template ng-loadingspinner-tmp />\n <ng-template ng-clearbutton-tmp>\n <button\n gds-icon-button\n class=\"\n gds-background-none\n gds-min-height-0\n ng-clear-wrapper\n \"\n (click)=\"select.handleClearClick()\"\n (mousedown)=\"onClearMouseDown($event)\"\n (keydown.enter)=\"onKeydownClear($event)\"\n >\n <gds-icon\n class=\"\n gds-icon-primary\n gds-icon-size-3xs\n gds-mobile-icon-size-2xs\n \"\n key=\"line-dismiss\"\n />\n </button>\n </ng-template>\n</ng-select>\n", styles: ["@layer design-system{gds-search-bar{display:flex;max-width:var(--search-bar-max-width, 560px);min-width:230px;width:100%;position:relative;--background-color: var(--gds-palette-background-white);--text-color: var(--gds-palette-text-default-primary);--icon-color: var(--gds-palette-icon-primary);--cursor: text}gds-search-bar[disabled]{--background-color: var(--gds-palette-background-disabled);--text-color: var(--gds-palette-text-default-disabled);--icon-color: var(--gds-palette-icon-disabled);--cursor: not-allowed}gds-search-bar .gds-search-bar_icon{min-width:var(--gds-spacing-sm);color:var(--icon-color)}gds-search-bar .gds-search-bar_input{background-color:var(--background-color);border:.5px solid var(--gds-palette-border-default);color:var(--text-color);box-sizing:border-box;text-overflow:ellipsis;width:100%;font:var(--gds-text-body-shorthand)}:is(body[isMobile=true]) gds-search-bar .gds-search-bar_input{font:var(--gds-text-inputMobile-shorthand)}gds-search-bar .gds-search-bar_input::placeholder{color:var(--gds-palette-text-default-secondary);width:100%}gds-search-bar .gds-search-bar_input:focus-visible{outline:none}gds-search-bar .gds-search-bar_end-content{display:flex;align-items:center;gap:var(--gds-spacing-2xs)}gds-search-bar .gds-search-bar_clear-button{cursor:pointer}gds-search-bar ng-select.ng-select .leading-icon{height:var(--gds-iconSize-2xs);width:var(--gds-iconSize-2xs);color:var(--icon-color);margin-right:var(--gds-size-3xs-rem)}gds-search-bar ng-select.ng-select .ng-select-container{padding:6px var(--gds-spacing-xs);cursor:var(--cursor)}:is(body[isMobile=true]) gds-search-bar ng-select.ng-select .ng-select-container{padding-block:11px}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container{display:flex;justify-content:var(--search-bar-placeholder-justify, \"center\");align-items:center}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container:focus-within{justify-content:unset}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container .ng-input{padding:0 calc(12px + var(--gds-iconSize-xs))}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container .ng-input>input{vertical-align:baseline;cursor:var(--cursor)}gds-search-bar ng-select.ng-select .ng-select-container .ng-clear-wrapper[gds-icon-button]{--gds-mobile-button-size: var(--gds-iconSize-2xs)}gds-search-bar ng-select.ng-select .ng-dropdown-panel{padding:var(--gds-spacing-3xs) 2px;visibility:hidden}gds-search-bar ng-select.ng-select .ng-dropdown-panel .ng-option{overflow:unset!important}gds-search-bar ng-select.ng-select .ng-dropdown-panel .scroll-host{padding:0 2px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i2.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "directive", type: i2.NgOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { kind: "directive", type: i2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i2.NgNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { kind: "directive", type: i2.NgLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]" }, { kind: "directive", type: i2.NgLoadingSpinnerTemplateDirective, selector: "[ng-loadingspinner-tmp]" }, { kind: "directive", type: i2.NgClearButtonTemplateDirective, selector: "[ng-clearbutton-tmp]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GdsSpinnerComponent, selector: "gds-spinner", inputs: ["trackWidth", "size"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
6722
6912
  }
6723
6913
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsSearchBarComponent, decorators: [{
6724
6914
  type: Component,
@@ -6734,14 +6924,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
6734
6924
  '[attr.disabled]': 'isDisabled() ? "" : undefined',
6735
6925
  '(keydown)': 'setMarkedItemIndex()',
6736
6926
  '(window:resize)': 'close()'
6737
- }, template: "<ng-select\n #select\n class=\"\n gds-radius-sm\n gds-search-bar_input\n \"\n [placeholder]=\"!value() ? placeholder() : ''\"\n [isOpen]=\"isOpen()\"\n [disabled]=\"isDisabled()\"\n [ngModel]=\"value()\"\n (ngModelChange)=\"setValue($event)\"\n [items]=\"items()\"\n [bindValue]=\"bindValue()\"\n [bindLabel]=\"bindLabel()\"\n [loading]=\"loading()\"\n [markFirst]=\"false\"\n [groupBy]=\"groupBy()\"\n [dropdownPosition]=\"dropdownPosition()\"\n [searchFn]=\"showAllItems() ? showAllItemsSearchFunction : searchFunction()\"\n [ariaLabel]=\"ariaLabel() ?? 'Core.Accessibility.Searchbar' | translate\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\"\n (click)=\"handleClick($event)\"\n (search)=\"handleSearch($event.term)\"\n (open)=\"handleOpened()\"\n (close)=\"handleClosed()\"\n (change)=\"handleChange($event)\"\n (clear)=\"handleClear()\"\n>\n <ng-template\n ng-optgroup-tmp\n let-item=\"item\"\n let-index=\"index\"\n >\n <div class=\"\n gds-display-flex\n gds-padding-block-3xs\n gds-padding-inline-0\n gds-text-body\n gds-text-primary\n \">\n <ng-container *ngTemplateOutlet=\"groupItemTmpl(); context: { item, marked: markedIndex() === index }\" />\n </div>\n </ng-template>\n <ng-template\n ng-option-tmp\n let-item=\"item\"\n let-index=\"index\"\n >\n <div class=\"\n gds-display-flex\n gds-padding-block-3xs\n gds-padding-inline-0\n gds-text-body\n gds-text-primary\n \">\n <ng-container *ngTemplateOutlet=\"dropdownItemTmpl(); context: { item, marked: markedIndex() === index }\" />\n </div>\n </ng-template>\n <ng-template\n ng-notfound-tmp\n let-searchTerm=\"searchTerm\"\n >\n <ng-container *ngTemplateOutlet=\"emptyTmpl(); context: { searchTerm }\" />\n </ng-template>\n <ng-template ng-loadingtext-tmp>\n <div class=\"\n gds-display-flex\n gds-justify-content-center\n gds-padding-sm\n gds-text-body\n gds-text-primary\n \">\n <gds-spinner />\n </div>\n </ng-template>\n <ng-template ng-loadingspinner-tmp />\n <ng-template ng-clearbutton-tmp>\n <button\n gds-icon-button\n class=\"\n gds-background-none\n gds-min-height-0\n ng-clear-wrapper\n \"\n (click)=\"select.handleClearClick()\"\n (mousedown)=\"onClearMouseDown($event)\"\n (keydown.enter)=\"onKeydownClear($event)\"\n >\n <gds-icon\n class=\"\n gds-icon-primary\n gds-icon-size-3xs\n \"\n key=\"line-dismiss\"\n />\n </button>\n </ng-template>\n</ng-select>\n", styles: ["gds-search-bar{display:flex;max-width:var(--search-bar-max-width, 560px);min-width:230px;width:100%;position:relative;--background-color: var(--gds-palette-background-white);--text-color: var(--gds-palette-text-default-primary);--icon-color: var(--gds-palette-icon-primary);--cursor: text}gds-search-bar[disabled]{--background-color: var(--gds-palette-background-disabled);--text-color: var(--gds-palette-text-default-disabled);--icon-color: var(--gds-palette-icon-disabled);--cursor: not-allowed}gds-search-bar .gds-search-bar_icon{min-width:var(--gds-spacing-sm);color:var(--icon-color)}gds-search-bar .gds-search-bar_input{background-color:var(--background-color);border:.5px solid var(--gds-palette-border-default);color:var(--text-color);box-sizing:border-box;text-overflow:ellipsis;width:100%;font:var(--gds-text-body-shorthand)}:is(body[isMobile=true]) gds-search-bar .gds-search-bar_input{font:var(--gds-text-inputMobile-shorthand)}gds-search-bar .gds-search-bar_input::placeholder{color:var(--gds-palette-text-default-secondary);width:100%}gds-search-bar .gds-search-bar_input:focus-visible{outline:none}gds-search-bar .gds-search-bar_end-content{display:flex;align-items:center;gap:var(--gds-spacing-2xs)}gds-search-bar .gds-search-bar_clear-button{cursor:pointer}gds-search-bar ng-select.ng-select .leading-icon{height:var(--gds-iconSize-2xs);width:var(--gds-iconSize-2xs);color:var(--icon-color);margin-right:var(--gds-size-3xs-rem)}gds-search-bar ng-select.ng-select .ng-select-container{padding:6px var(--gds-spacing-xs);cursor:var(--cursor)}:is(body[isMobile=true]) gds-search-bar ng-select.ng-select .ng-select-container{padding-block:11px}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container{display:flex;justify-content:var(--search-bar-placeholder-justify, \"center\");align-items:center}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container:focus-within{justify-content:unset}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container .ng-input{padding:0 calc(12px + var(--gds-iconSize-xs))}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container .ng-input>input{vertical-align:baseline;cursor:var(--cursor)}gds-search-bar ng-select.ng-select .ng-dropdown-panel{padding:var(--gds-spacing-3xs) 2px;visibility:hidden}gds-search-bar ng-select.ng-select .ng-dropdown-panel .ng-option{overflow:unset!important}gds-search-bar ng-select.ng-select .ng-dropdown-panel .scroll-host{padding:0 2px}\n"] }]
6927
+ }, template: "<ng-select\n #select\n class=\"\n gds-radius-sm\n gds-search-bar_input\n \"\n [placeholder]=\"!value() ? placeholder() : ''\"\n [isOpen]=\"isOpen()\"\n [disabled]=\"isDisabled()\"\n [ngModel]=\"value()\"\n (ngModelChange)=\"setValue($event)\"\n [items]=\"items()\"\n [bindValue]=\"bindValue()\"\n [bindLabel]=\"bindLabel()\"\n [loading]=\"loading()\"\n [markFirst]=\"false\"\n [groupBy]=\"groupBy()\"\n [dropdownPosition]=\"dropdownPosition()\"\n [searchFn]=\"showAllItems() ? showAllItemsSearchFunction : searchFunction()\"\n [ariaLabel]=\"ariaLabel() ?? 'Core.Accessibility.Searchbar' | translate\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\"\n (click)=\"handleClick($event)\"\n (search)=\"handleSearch($event.term)\"\n (open)=\"handleOpened()\"\n (close)=\"handleClosed()\"\n (change)=\"handleChange($event)\"\n (clear)=\"handleClear()\"\n>\n <ng-template\n ng-optgroup-tmp\n let-item=\"item\"\n let-index=\"index\"\n >\n <div class=\"\n gds-display-flex\n gds-padding-block-3xs\n gds-padding-inline-0\n gds-text-body\n gds-text-primary\n \">\n <ng-container *ngTemplateOutlet=\"groupItemTmpl(); context: { item, marked: markedIndex() === index }\" />\n </div>\n </ng-template>\n <ng-template\n ng-option-tmp\n let-item=\"item\"\n let-index=\"index\"\n >\n <div class=\"\n gds-display-flex\n gds-padding-block-3xs\n gds-padding-inline-0\n gds-text-body\n gds-text-primary\n \">\n <ng-container *ngTemplateOutlet=\"dropdownItemTmpl(); context: { item, marked: markedIndex() === index }\" />\n </div>\n </ng-template>\n <ng-template\n ng-notfound-tmp\n let-searchTerm=\"searchTerm\"\n >\n <ng-container *ngTemplateOutlet=\"emptyTmpl(); context: { searchTerm }\" />\n </ng-template>\n <ng-template ng-loadingtext-tmp>\n <div class=\"\n gds-display-flex\n gds-justify-content-center\n gds-padding-sm\n gds-text-body\n gds-text-primary\n \">\n <gds-spinner />\n </div>\n </ng-template>\n <ng-template ng-loadingspinner-tmp />\n <ng-template ng-clearbutton-tmp>\n <button\n gds-icon-button\n class=\"\n gds-background-none\n gds-min-height-0\n ng-clear-wrapper\n \"\n (click)=\"select.handleClearClick()\"\n (mousedown)=\"onClearMouseDown($event)\"\n (keydown.enter)=\"onKeydownClear($event)\"\n >\n <gds-icon\n class=\"\n gds-icon-primary\n gds-icon-size-3xs\n gds-mobile-icon-size-2xs\n \"\n key=\"line-dismiss\"\n />\n </button>\n </ng-template>\n</ng-select>\n", styles: ["@layer design-system{gds-search-bar{display:flex;max-width:var(--search-bar-max-width, 560px);min-width:230px;width:100%;position:relative;--background-color: var(--gds-palette-background-white);--text-color: var(--gds-palette-text-default-primary);--icon-color: var(--gds-palette-icon-primary);--cursor: text}gds-search-bar[disabled]{--background-color: var(--gds-palette-background-disabled);--text-color: var(--gds-palette-text-default-disabled);--icon-color: var(--gds-palette-icon-disabled);--cursor: not-allowed}gds-search-bar .gds-search-bar_icon{min-width:var(--gds-spacing-sm);color:var(--icon-color)}gds-search-bar .gds-search-bar_input{background-color:var(--background-color);border:.5px solid var(--gds-palette-border-default);color:var(--text-color);box-sizing:border-box;text-overflow:ellipsis;width:100%;font:var(--gds-text-body-shorthand)}:is(body[isMobile=true]) gds-search-bar .gds-search-bar_input{font:var(--gds-text-inputMobile-shorthand)}gds-search-bar .gds-search-bar_input::placeholder{color:var(--gds-palette-text-default-secondary);width:100%}gds-search-bar .gds-search-bar_input:focus-visible{outline:none}gds-search-bar .gds-search-bar_end-content{display:flex;align-items:center;gap:var(--gds-spacing-2xs)}gds-search-bar .gds-search-bar_clear-button{cursor:pointer}gds-search-bar ng-select.ng-select .leading-icon{height:var(--gds-iconSize-2xs);width:var(--gds-iconSize-2xs);color:var(--icon-color);margin-right:var(--gds-size-3xs-rem)}gds-search-bar ng-select.ng-select .ng-select-container{padding:6px var(--gds-spacing-xs);cursor:var(--cursor)}:is(body[isMobile=true]) gds-search-bar ng-select.ng-select .ng-select-container{padding-block:11px}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container{display:flex;justify-content:var(--search-bar-placeholder-justify, \"center\");align-items:center}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container:focus-within{justify-content:unset}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container .ng-input{padding:0 calc(12px + var(--gds-iconSize-xs))}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container .ng-input>input{vertical-align:baseline;cursor:var(--cursor)}gds-search-bar ng-select.ng-select .ng-select-container .ng-clear-wrapper[gds-icon-button]{--gds-mobile-button-size: var(--gds-iconSize-2xs)}gds-search-bar ng-select.ng-select .ng-dropdown-panel{padding:var(--gds-spacing-3xs) 2px;visibility:hidden}gds-search-bar ng-select.ng-select .ng-dropdown-panel .ng-option{overflow:unset!important}gds-search-bar ng-select.ng-select .ng-dropdown-panel .scroll-host{padding:0 2px}}\n"] }]
6738
6928
  }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: true }] }], leadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingIcon", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }, { type: i0.Output, args: ["isDisabledChange"] }], suppressClearOnClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "suppressClearOnClose", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], isOpenOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], searchFunction: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFunction", required: false }] }], showAllItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAllItems", required: false }] }], dropdownPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownPosition", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], groupItemTmpl: [{ type: i0.ContentChild, args: ['groupItemTmpl', { isSignal: true }] }], dropdownItemTmpl: [{ type: i0.ContentChild, args: ['itemTmpl', { isSignal: true }] }], emptyTmpl: [{ type: i0.ContentChild, args: ['emptyTmpl', { isSignal: true }] }], focused: [{ type: i0.Output, args: ["focused"] }], blurred: [{ type: i0.Output, args: ["blurred"] }], dropdownStateChanged: [{ type: i0.Output, args: ["dropdownStateChanged"] }], searched: [{ type: i0.Output, args: ["searched"] }], changed: [{ type: i0.Output, args: ["changed"] }], select: [{ type: i0.ViewChild, args: ['select', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
6739
6929
 
6740
6930
  class GdsSidebarItemComponent {
6741
6931
  selected = input(false, { ...(ngDevMode ? { debugName: "selected" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
6742
6932
  keepTrailingActionVisible = input(false, { ...(ngDevMode ? { debugName: "keepTrailingActionVisible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
6743
6933
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsSidebarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6744
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: GdsSidebarItemComponent, isStandalone: true, selector: "li[gds-sidebar-item]", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, keepTrailingActionVisible: { classPropertyName: "keepTrailingActionVisible", publicName: "keepTrailingActionVisible", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-selected": "selected() ? \"\" : undefined", "attr.data-keep-trailing-action-visible": "keepTrailingActionVisible() ? '' : undefined" }, classAttribute: "gds-display-flex gds-padding-inline-end-xs gds-position-relative gds-radius-sm gds-align-items-center" }, ngImport: i0, template: "<ng-content select=\"[gds-sidebar-item-body]\" />\n<ng-content select=\"[trailing-action]\" />\n", styles: [":host{--icon-color: var(--gds-palette-icon-primary);--primary-marker-color: var(--gds-palette-border-selected);--action-opacity: 0}:host[data-keep-trailing-action-visible]{--force-action-visible: 1}:host:hover:has([gds-sidebar-item-body]:not([aria-disabled])):before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}:host[data-selected]:has([gds-sidebar-item-body]):before,:host:focus-within:has([gds-sidebar-item-body]):before,:host:focus-visible:has([gds-sidebar-item-body]):before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}:host[data-selected]:after{content:\"\";position:absolute;border-radius:3px;width:3px;height:61%;top:50%;left:calc(var(--wrapper-margin, 0px) - 1px);transform:translateY(-50%);background:var(--primary-marker-color);padding:0}:host:has([gds-sidebar-item-body][aria-disabled]){--icon-color: var(--gds-palette-icon-disabled);--primary-marker-color: var(--gds-palette-icon-disabled);--action-opacity: 0;cursor:not-allowed}:host[data-selected],:host:focus-visible,:host:has([gds-sidebar-item-body]:focus-visible),:host:has([trailing-action]:focus-visible),:host:hover{--action-opacity: 1}:host ::ng-deep>:first-child{margin-left:var(--gds-spacing-xs)}:host ::ng-deep>[trailing-action]{opacity:var(--force-action-visible, var(--action-opacity))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6934
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: GdsSidebarItemComponent, isStandalone: true, selector: "li[gds-sidebar-item]", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, keepTrailingActionVisible: { classPropertyName: "keepTrailingActionVisible", publicName: "keepTrailingActionVisible", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-selected": "selected() ? \"\" : undefined", "attr.data-keep-trailing-action-visible": "keepTrailingActionVisible() ? '' : undefined" }, classAttribute: "gds-display-flex gds-padding-inline-end-xs gds-position-relative gds-radius-sm gds-align-items-center" }, ngImport: i0, template: "<ng-content select=\"[gds-sidebar-item-body]\" />\n<ng-content select=\"[trailing-action]\" />\n", styles: ["@layer design-system{:host{--icon-color: var(--gds-palette-icon-primary);--primary-marker-color: var(--gds-palette-border-selected);--action-opacity: 0}:host[data-keep-trailing-action-visible]{--force-action-visible: 1}:host:hover:has([gds-sidebar-item-body]:not([aria-disabled])):before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}:host[data-selected]:has([gds-sidebar-item-body]):before,:host:focus-within:has([gds-sidebar-item-body]):before,:host:focus-visible:has([gds-sidebar-item-body]):before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}:host[data-selected]:after{content:\"\";position:absolute;border-radius:3px;width:3px;height:61%;top:50%;left:calc(var(--wrapper-margin, 0px) - 1px);transform:translateY(-50%);background:var(--primary-marker-color);padding:0}:host:has([gds-sidebar-item-body][aria-disabled]){--icon-color: var(--gds-palette-icon-disabled);--primary-marker-color: var(--gds-palette-icon-disabled);--action-opacity: 0;cursor:not-allowed}:host[data-selected],:host:focus-visible,:host:has([gds-sidebar-item-body]:focus-visible),:host:has([trailing-action]:focus-visible),:host:hover{--action-opacity: 1}:host ::ng-deep>:first-child{margin-left:var(--gds-spacing-xs)}:host ::ng-deep>[trailing-action]{opacity:var(--force-action-visible, var(--action-opacity))}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6745
6935
  }
6746
6936
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsSidebarItemComponent, decorators: [{
6747
6937
  type: Component,
@@ -6749,7 +6939,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
6749
6939
  class: 'gds-display-flex gds-padding-inline-end-xs gds-position-relative gds-radius-sm gds-align-items-center',
6750
6940
  '[attr.data-selected]': 'selected() ? "" : undefined',
6751
6941
  '[attr.data-keep-trailing-action-visible]': "keepTrailingActionVisible() ? '' : undefined"
6752
- }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"[gds-sidebar-item-body]\" />\n<ng-content select=\"[trailing-action]\" />\n", styles: [":host{--icon-color: var(--gds-palette-icon-primary);--primary-marker-color: var(--gds-palette-border-selected);--action-opacity: 0}:host[data-keep-trailing-action-visible]{--force-action-visible: 1}:host:hover:has([gds-sidebar-item-body]:not([aria-disabled])):before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}:host[data-selected]:has([gds-sidebar-item-body]):before,:host:focus-within:has([gds-sidebar-item-body]):before,:host:focus-visible:has([gds-sidebar-item-body]):before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}:host[data-selected]:after{content:\"\";position:absolute;border-radius:3px;width:3px;height:61%;top:50%;left:calc(var(--wrapper-margin, 0px) - 1px);transform:translateY(-50%);background:var(--primary-marker-color);padding:0}:host:has([gds-sidebar-item-body][aria-disabled]){--icon-color: var(--gds-palette-icon-disabled);--primary-marker-color: var(--gds-palette-icon-disabled);--action-opacity: 0;cursor:not-allowed}:host[data-selected],:host:focus-visible,:host:has([gds-sidebar-item-body]:focus-visible),:host:has([trailing-action]:focus-visible),:host:hover{--action-opacity: 1}:host ::ng-deep>:first-child{margin-left:var(--gds-spacing-xs)}:host ::ng-deep>[trailing-action]{opacity:var(--force-action-visible, var(--action-opacity))}\n"] }]
6942
+ }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"[gds-sidebar-item-body]\" />\n<ng-content select=\"[trailing-action]\" />\n", styles: ["@layer design-system{:host{--icon-color: var(--gds-palette-icon-primary);--primary-marker-color: var(--gds-palette-border-selected);--action-opacity: 0}:host[data-keep-trailing-action-visible]{--force-action-visible: 1}:host:hover:has([gds-sidebar-item-body]:not([aria-disabled])):before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}:host[data-selected]:has([gds-sidebar-item-body]):before,:host:focus-within:has([gds-sidebar-item-body]):before,:host:focus-visible:has([gds-sidebar-item-body]):before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}:host[data-selected]:after{content:\"\";position:absolute;border-radius:3px;width:3px;height:61%;top:50%;left:calc(var(--wrapper-margin, 0px) - 1px);transform:translateY(-50%);background:var(--primary-marker-color);padding:0}:host:has([gds-sidebar-item-body][aria-disabled]){--icon-color: var(--gds-palette-icon-disabled);--primary-marker-color: var(--gds-palette-icon-disabled);--action-opacity: 0;cursor:not-allowed}:host[data-selected],:host:focus-visible,:host:has([gds-sidebar-item-body]:focus-visible),:host:has([trailing-action]:focus-visible),:host:hover{--action-opacity: 1}:host ::ng-deep>:first-child{margin-left:var(--gds-spacing-xs)}:host ::ng-deep>[trailing-action]{opacity:var(--force-action-visible, var(--action-opacity))}}\n"] }]
6753
6943
  }], propDecorators: { selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], keepTrailingActionVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepTrailingActionVisible", required: false }] }] } });
6754
6944
 
6755
6945
  class GdsSidebarItemBodyComponent {
@@ -6762,7 +6952,7 @@ class GdsSidebarItemBodyComponent {
6762
6952
  this.clicked.emit();
6763
6953
  };
6764
6954
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsSidebarItemBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6765
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsSidebarItemBodyComponent, isStandalone: true, selector: "button[gds-sidebar-item-body]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { listeners: { "click": "onClick()" }, properties: { "attr.aria-disabled": "disabled() ? \"\" : undefined" }, classAttribute: "gds-layout-row-with-leading gds-flex-1 gds-min-width-0 gds-padding-block-3xs gds-text-start gds-text-primary-primary" }, ngImport: i0, template: "@if (icon(); as icon) {\n <gds-icon\n [key]=\"icon\"\n leading-visual\n class=\"\n gds-icon-size-xs\n gds-sidebar-item-body_icon\n \"\n color=\"inherit\"\n />\n}\n<ng-content select=\"div\">\n <div class=\"\n gds-text-body\n gds-truncate\n \">\n <ng-content />\n </div>\n</ng-content>\n", styles: [":host{box-sizing:border-box;margin:0;padding:0;background-color:transparent;border-width:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;color:inherit;user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none;outline:none}:host[aria-disabled]{color:var(--gds-palette-text-default-disabled)!important;cursor:not-allowed}:host .gds-sidebar-item-body_icon{color:var(--icon-color)!important}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6955
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsSidebarItemBodyComponent, isStandalone: true, selector: "button[gds-sidebar-item-body]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { listeners: { "click": "onClick()" }, properties: { "attr.aria-disabled": "disabled() ? \"\" : undefined" }, classAttribute: "gds-layout-row-with-leading gds-flex-1 gds-min-width-0 gds-padding-block-3xs gds-text-start gds-text-primary-primary" }, ngImport: i0, template: "@if (icon(); as icon) {\n <gds-icon\n [key]=\"icon\"\n leading-visual\n class=\"\n gds-icon-size-xs\n gds-sidebar-item-body_icon\n \"\n color=\"inherit\"\n />\n}\n<ng-content select=\"div\">\n <div class=\"\n gds-text-body\n gds-truncate\n \">\n <ng-content />\n </div>\n</ng-content>\n", styles: ["@layer design-system{:host{box-sizing:border-box;margin:0;padding:0;background-color:transparent;border-width:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;color:inherit;user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none;outline:none}:host[aria-disabled]{color:var(--gds-palette-text-default-disabled)!important;cursor:not-allowed}:host .gds-sidebar-item-body_icon{color:var(--icon-color)!important}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6766
6956
  }
6767
6957
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsSidebarItemBodyComponent, decorators: [{
6768
6958
  type: Component,
@@ -6770,16 +6960,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
6770
6960
  class: 'gds-layout-row-with-leading gds-flex-1 gds-min-width-0 gds-padding-block-3xs gds-text-start gds-text-primary-primary',
6771
6961
  '[attr.aria-disabled]': 'disabled() ? "" : undefined',
6772
6962
  '(click)': 'onClick()'
6773
- }, imports: [GdsIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (icon(); as icon) {\n <gds-icon\n [key]=\"icon\"\n leading-visual\n class=\"\n gds-icon-size-xs\n gds-sidebar-item-body_icon\n \"\n color=\"inherit\"\n />\n}\n<ng-content select=\"div\">\n <div class=\"\n gds-text-body\n gds-truncate\n \">\n <ng-content />\n </div>\n</ng-content>\n", styles: [":host{box-sizing:border-box;margin:0;padding:0;background-color:transparent;border-width:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;color:inherit;user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none;outline:none}:host[aria-disabled]{color:var(--gds-palette-text-default-disabled)!important;cursor:not-allowed}:host .gds-sidebar-item-body_icon{color:var(--icon-color)!important}\n"] }]
6963
+ }, imports: [GdsIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (icon(); as icon) {\n <gds-icon\n [key]=\"icon\"\n leading-visual\n class=\"\n gds-icon-size-xs\n gds-sidebar-item-body_icon\n \"\n color=\"inherit\"\n />\n}\n<ng-content select=\"div\">\n <div class=\"\n gds-text-body\n gds-truncate\n \">\n <ng-content />\n </div>\n</ng-content>\n", styles: ["@layer design-system{:host{box-sizing:border-box;margin:0;padding:0;background-color:transparent;border-width:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;color:inherit;user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none;outline:none}:host[aria-disabled]{color:var(--gds-palette-text-default-disabled)!important;cursor:not-allowed}:host .gds-sidebar-item-body_icon{color:var(--icon-color)!important}}\n"] }]
6774
6964
  }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
6775
6965
 
6776
6966
  class GdsSkeletonLoadingComponent {
6777
6967
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsSkeletonLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6778
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: GdsSkeletonLoadingComponent, isStandalone: true, selector: "gds-skeleton-loading", ngImport: i0, template: '', isInline: true, styles: [":host{display:block;width:var(--gds-skeleton-width, 100%);height:var(--gds-skeleton-height, 100%);border-radius:var(--gds-skeleton-border-radius);background-image:linear-gradient(90deg,var(--gds-neutral-50) 40%,var(--gds-neutral-100) 50%,var(--gds-neutral-50) 60%);background-size:400% 400%;-webkit-animation:gradient 2s ease infinite;-moz-animation:gradient 2s ease infinite;animation:gradient 2s ease infinite;animation-direction:reverse}@-webkit-keyframes gradient{0%{background-position:0% 50%}to{background-position:100% 50%}}@-moz-keyframes gradient{0%{background-position:0% 50%}to{background-position:100% 50%}}@keyframes gradient{0%{background-position:0% 50%}to{background-position:100% 50%}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6968
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: GdsSkeletonLoadingComponent, isStandalone: true, selector: "gds-skeleton-loading", ngImport: i0, template: '', isInline: true, styles: ["@layer design-system{:host{display:block;width:var(--gds-skeleton-width, 100%);height:var(--gds-skeleton-height, 100%);border-radius:var(--gds-skeleton-border-radius);background-image:linear-gradient(90deg,var(--gds-neutral-50) 40%,var(--gds-neutral-100) 50%,var(--gds-neutral-50) 60%);background-size:400% 400%;-webkit-animation:gradient 2s ease infinite;-moz-animation:gradient 2s ease infinite;animation:gradient 2s ease infinite;animation-direction:reverse}@-webkit-keyframes gradient{0%{background-position:0% 50%}to{background-position:100% 50%}}@-moz-keyframes gradient{0%{background-position:0% 50%}to{background-position:100% 50%}}@keyframes gradient{0%{background-position:0% 50%}to{background-position:100% 50%}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6779
6969
  }
6780
6970
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsSkeletonLoadingComponent, decorators: [{
6781
6971
  type: Component,
6782
- args: [{ standalone: true, selector: 'gds-skeleton-loading', template: '', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:var(--gds-skeleton-width, 100%);height:var(--gds-skeleton-height, 100%);border-radius:var(--gds-skeleton-border-radius);background-image:linear-gradient(90deg,var(--gds-neutral-50) 40%,var(--gds-neutral-100) 50%,var(--gds-neutral-50) 60%);background-size:400% 400%;-webkit-animation:gradient 2s ease infinite;-moz-animation:gradient 2s ease infinite;animation:gradient 2s ease infinite;animation-direction:reverse}@-webkit-keyframes gradient{0%{background-position:0% 50%}to{background-position:100% 50%}}@-moz-keyframes gradient{0%{background-position:0% 50%}to{background-position:100% 50%}}@keyframes gradient{0%{background-position:0% 50%}to{background-position:100% 50%}}\n"] }]
6972
+ args: [{ standalone: true, selector: 'gds-skeleton-loading', template: '', changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer design-system{:host{display:block;width:var(--gds-skeleton-width, 100%);height:var(--gds-skeleton-height, 100%);border-radius:var(--gds-skeleton-border-radius);background-image:linear-gradient(90deg,var(--gds-neutral-50) 40%,var(--gds-neutral-100) 50%,var(--gds-neutral-50) 60%);background-size:400% 400%;-webkit-animation:gradient 2s ease infinite;-moz-animation:gradient 2s ease infinite;animation:gradient 2s ease infinite;animation-direction:reverse}@-webkit-keyframes gradient{0%{background-position:0% 50%}to{background-position:100% 50%}}@-moz-keyframes gradient{0%{background-position:0% 50%}to{background-position:100% 50%}}@keyframes gradient{0%{background-position:0% 50%}to{background-position:100% 50%}}}\n"] }]
6783
6973
  }] });
6784
6974
 
6785
6975
  class GdsSplitButtonComponent extends ButtonBaseDirective {
@@ -6809,7 +6999,7 @@ class GdsSplitButtonComponent extends ButtonBaseDirective {
6809
6999
  });
6810
7000
  }
6811
7001
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsSplitButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
6812
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsSplitButtonComponent, isStandalone: true, selector: "gds-split-button", inputs: { trailingDropdown: { classPropertyName: "trailingDropdown", publicName: "trailingDropdown", isSignal: true, isRequired: true, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: true, isRequired: false, transformFunction: null }, leadingAriaLabel: { classPropertyName: "leadingAriaLabel", publicName: "leadingAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, trailingAriaLabel: { classPropertyName: "trailingAriaLabel", publicName: "trailingAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, menuPosition: { classPropertyName: "menuPosition", publicName: "menuPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0" }, listeners: { "keydown.enter": "onEnter()", "keydown.arrowDown": "onArrowDown()" }, classAttribute: "gds-display-flex gds-radius-sm" }, viewQueries: [{ propertyName: "leadingBtn", first: true, predicate: ["leadingBtn"], descendants: true, isSignal: true }, { propertyName: "trailingBtn", first: true, predicate: ["trailingBtn"], descendants: true, isSignal: true }, { propertyName: "menuTrigger", first: true, predicate: CdkMenuTrigger, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button\n #leadingBtn\n gds-button\n class=\"\n gds-radius-bottom-right-0\n gds-radius-top-right-0\n gds-split-button_button\n gds-split-button_leading\n \"\n tabindex=\"-1\"\n [size]=\"size()\"\n [busy]=\"busy()\"\n [variant]=\"variant()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"leadingAriaLabel()\"\n (click)=\"clicked.emit($event)\"\n>\n <ng-content />\n</button>\n\n<button\n #trailingBtn\n gds-button\n class=\"\n gds-radius-bottom-left-0\n gds-radius-top-left-0\n gds-split-button_button\n gds-split-button_trailing\n \"\n tabindex=\"-1\"\n [size]=\"size()\"\n [variant]=\"variant()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"trailingAriaLabel()\"\n [cdkMenuTriggerFor]=\"!disabled() ? trailingDropdown() : undefined\"\n [cdkMenuPosition]=\"menuPosition()\"\n (cdkMenuClosed)=\"onMenuClosed()\"\n>\n <gds-icon\n [key]=\"trailingIcon()\"\n class=\"gds-icon-size-2xs\"\n />\n</button>\n", styles: [":host{--border-separator-width: .5px;--border-separator: var(--border-separator-width) solid var(--gds-palette-border-default)}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:is(body[isMobile=true]) :host{--border-separator-width: 1px}:host .gds-split-button_leading{border-right:none;padding-inline:var(--gds-spacing-xs)}:host .gds-split-button_trailing,:host .gds-split-button_trailing:not(:disabled):hover{border-left:var(--border-separator);padding-inline:var(--gds-spacing-3xs)}:is(body[isMobile=true]) :host .gds-split-button_trailing,:is(body[isMobile=true]) :host .gds-split-button_trailing:not(:disabled):hover{padding-inline:10px}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsButtonComponent, selector: "button[gds-button]" }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
7002
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsSplitButtonComponent, isStandalone: true, selector: "gds-split-button", inputs: { trailingDropdown: { classPropertyName: "trailingDropdown", publicName: "trailingDropdown", isSignal: true, isRequired: true, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: true, isRequired: false, transformFunction: null }, leadingAriaLabel: { classPropertyName: "leadingAriaLabel", publicName: "leadingAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, trailingAriaLabel: { classPropertyName: "trailingAriaLabel", publicName: "trailingAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, menuPosition: { classPropertyName: "menuPosition", publicName: "menuPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0" }, listeners: { "keydown.enter": "onEnter()", "keydown.arrowDown": "onArrowDown()" }, classAttribute: "gds-display-flex gds-radius-sm" }, viewQueries: [{ propertyName: "leadingBtn", first: true, predicate: ["leadingBtn"], descendants: true, isSignal: true }, { propertyName: "trailingBtn", first: true, predicate: ["trailingBtn"], descendants: true, isSignal: true }, { propertyName: "menuTrigger", first: true, predicate: CdkMenuTrigger, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button\n #leadingBtn\n gds-button\n class=\"\n gds-radius-bottom-right-0\n gds-radius-top-right-0\n gds-split-button_button\n gds-split-button_leading\n \"\n tabindex=\"-1\"\n [size]=\"size()\"\n [busy]=\"busy()\"\n [variant]=\"variant()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"leadingAriaLabel()\"\n (click)=\"clicked.emit($event)\"\n>\n <ng-content />\n</button>\n\n<button\n #trailingBtn\n gds-button\n class=\"\n gds-radius-bottom-left-0\n gds-radius-top-left-0\n gds-split-button_button\n gds-split-button_trailing\n \"\n tabindex=\"-1\"\n [size]=\"size()\"\n [variant]=\"variant()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"trailingAriaLabel()\"\n [cdkMenuTriggerFor]=\"!disabled() ? trailingDropdown() : undefined\"\n [cdkMenuPosition]=\"menuPosition()\"\n (cdkMenuClosed)=\"onMenuClosed()\"\n>\n <gds-icon\n [key]=\"trailingIcon()\"\n class=\"gds-icon-size-2xs\"\n />\n</button>\n", styles: ["@layer design-system{:host{--border-separator-width: .5px;--border-separator: var(--border-separator-width) solid var(--gds-palette-border-default)}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:is(body[isMobile=true]) :host{--border-separator-width: 1px}:host .gds-split-button_leading{border-right:none;padding-inline:var(--gds-spacing-xs)}:host .gds-split-button_trailing,:host .gds-split-button_trailing:not(:disabled):hover{border-left:var(--border-separator);padding-inline:var(--gds-spacing-3xs)}:is(body[isMobile=true]) :host .gds-split-button_trailing,:is(body[isMobile=true]) :host .gds-split-button_trailing:not(:disabled):hover{padding-inline:10px}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsButtonComponent, selector: "button[gds-button]" }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6813
7003
  }
6814
7004
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsSplitButtonComponent, decorators: [{
6815
7005
  type: Component,
@@ -6818,7 +7008,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
6818
7008
  tabindex: '0',
6819
7009
  '(keydown.enter)': 'onEnter()',
6820
7010
  '(keydown.arrowDown)': 'onArrowDown()'
6821
- }, template: "<button\n #leadingBtn\n gds-button\n class=\"\n gds-radius-bottom-right-0\n gds-radius-top-right-0\n gds-split-button_button\n gds-split-button_leading\n \"\n tabindex=\"-1\"\n [size]=\"size()\"\n [busy]=\"busy()\"\n [variant]=\"variant()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"leadingAriaLabel()\"\n (click)=\"clicked.emit($event)\"\n>\n <ng-content />\n</button>\n\n<button\n #trailingBtn\n gds-button\n class=\"\n gds-radius-bottom-left-0\n gds-radius-top-left-0\n gds-split-button_button\n gds-split-button_trailing\n \"\n tabindex=\"-1\"\n [size]=\"size()\"\n [variant]=\"variant()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"trailingAriaLabel()\"\n [cdkMenuTriggerFor]=\"!disabled() ? trailingDropdown() : undefined\"\n [cdkMenuPosition]=\"menuPosition()\"\n (cdkMenuClosed)=\"onMenuClosed()\"\n>\n <gds-icon\n [key]=\"trailingIcon()\"\n class=\"gds-icon-size-2xs\"\n />\n</button>\n", styles: [":host{--border-separator-width: .5px;--border-separator: var(--border-separator-width) solid var(--gds-palette-border-default)}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:is(body[isMobile=true]) :host{--border-separator-width: 1px}:host .gds-split-button_leading{border-right:none;padding-inline:var(--gds-spacing-xs)}:host .gds-split-button_trailing,:host .gds-split-button_trailing:not(:disabled):hover{border-left:var(--border-separator);padding-inline:var(--gds-spacing-3xs)}:is(body[isMobile=true]) :host .gds-split-button_trailing,:is(body[isMobile=true]) :host .gds-split-button_trailing:not(:disabled):hover{padding-inline:10px}\n"] }]
7011
+ }, template: "<button\n #leadingBtn\n gds-button\n class=\"\n gds-radius-bottom-right-0\n gds-radius-top-right-0\n gds-split-button_button\n gds-split-button_leading\n \"\n tabindex=\"-1\"\n [size]=\"size()\"\n [busy]=\"busy()\"\n [variant]=\"variant()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"leadingAriaLabel()\"\n (click)=\"clicked.emit($event)\"\n>\n <ng-content />\n</button>\n\n<button\n #trailingBtn\n gds-button\n class=\"\n gds-radius-bottom-left-0\n gds-radius-top-left-0\n gds-split-button_button\n gds-split-button_trailing\n \"\n tabindex=\"-1\"\n [size]=\"size()\"\n [variant]=\"variant()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"trailingAriaLabel()\"\n [cdkMenuTriggerFor]=\"!disabled() ? trailingDropdown() : undefined\"\n [cdkMenuPosition]=\"menuPosition()\"\n (cdkMenuClosed)=\"onMenuClosed()\"\n>\n <gds-icon\n [key]=\"trailingIcon()\"\n class=\"gds-icon-size-2xs\"\n />\n</button>\n", styles: ["@layer design-system{:host{--border-separator-width: .5px;--border-separator: var(--border-separator-width) solid var(--gds-palette-border-default)}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:is(body[isMobile=true]) :host{--border-separator-width: 1px}:host .gds-split-button_leading{border-right:none;padding-inline:var(--gds-spacing-xs)}:host .gds-split-button_trailing,:host .gds-split-button_trailing:not(:disabled):hover{border-left:var(--border-separator);padding-inline:var(--gds-spacing-3xs)}:is(body[isMobile=true]) :host .gds-split-button_trailing,:is(body[isMobile=true]) :host .gds-split-button_trailing:not(:disabled):hover{padding-inline:10px}}\n"] }]
6822
7012
  }], propDecorators: { trailingDropdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingDropdown", required: true }] }], trailingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingIcon", required: false }] }], leadingAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingAriaLabel", required: false }] }], trailingAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingAriaLabel", required: false }] }], menuPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuPosition", required: false }] }], leadingBtn: [{ type: i0.ViewChild, args: ['leadingBtn', { isSignal: true }] }], trailingBtn: [{ type: i0.ViewChild, args: ['trailingBtn', { isSignal: true }] }], menuTrigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkMenuTrigger), { isSignal: true }] }] } });
6823
7013
 
6824
7014
  class GdsTimelineItemComponent {
@@ -6826,14 +7016,14 @@ class GdsTimelineItemComponent {
6826
7016
  start = input(false, { ...(ngDevMode ? { debugName: "start" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
6827
7017
  connectorType = input('tag', ...(ngDevMode ? [{ debugName: "connectorType" }] : /* istanbul ignore next */ []));
6828
7018
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsTimelineItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6829
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsTimelineItemComponent, isStandalone: true, selector: "li[gds-timeline-item]", inputs: { end: { classPropertyName: "end", publicName: "end", isSignal: true, isRequired: false, transformFunction: null }, start: { classPropertyName: "start", publicName: "start", isSignal: true, isRequired: false, transformFunction: null }, connectorType: { classPropertyName: "connectorType", publicName: "connectorType", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.connectorType": "connectorType()" }, classAttribute: "gds-display-flex gds-margin-inline-start-xs gds-padding-inline-start-3xs gds-gap-sm gds-radius-sm" }, ngImport: i0, template: "<div class=\"\n gds-display-flex\n gds-flex-column\n timeline\n\">\n <div class=\"\n end\n gds-display-flex\n gds-height-2xs\n gds-justify-content-center\n \">\n @if (!end()) {\n <span class=\"gds-timeline_edge\"></span>\n }\n </div>\n <ng-content select=\"[tag]\" />\n <div class=\"\n gds-display-flex\n gds-flex-grow-1\n gds-justify-content-center\n start\n \">\n @if (!start() || connectorType() === 'content') {\n <span class=\"\n gds-timeline_edge\n start\n \"></span>\n }\n </div>\n</div>\n<div class=\"\n content\n gds-flex-grow-1\n gds-padding-block-2xs\n\">\n <ng-content />\n</div>\n", styles: [":host[connectorType=content] .gds-timeline_edge{margin-block:var(--gds-spacing-2xs)}:host:hover{background-color:var(--gds-palette-background-hover)}:host .gds-timeline_edge{width:1px;background-color:var(--gds-palette-border-default)}:host .content{overflow:hidden}:host .timeline{width:40px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
7019
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsTimelineItemComponent, isStandalone: true, selector: "li[gds-timeline-item]", inputs: { end: { classPropertyName: "end", publicName: "end", isSignal: true, isRequired: false, transformFunction: null }, start: { classPropertyName: "start", publicName: "start", isSignal: true, isRequired: false, transformFunction: null }, connectorType: { classPropertyName: "connectorType", publicName: "connectorType", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.connectorType": "connectorType()" }, classAttribute: "gds-display-flex gds-margin-inline-start-xs gds-padding-inline-start-3xs gds-gap-sm gds-radius-sm" }, ngImport: i0, template: "<div class=\"\n gds-display-flex\n gds-flex-column\n timeline\n\">\n <div class=\"\n end\n gds-display-flex\n gds-height-2xs\n gds-justify-content-center\n \">\n @if (!end()) {\n <span class=\"gds-timeline_edge\"></span>\n }\n </div>\n <ng-content select=\"[tag]\" />\n <div class=\"\n gds-display-flex\n gds-flex-grow-1\n gds-justify-content-center\n start\n \">\n @if (!start() || connectorType() === 'content') {\n <span class=\"\n gds-timeline_edge\n start\n \"></span>\n }\n </div>\n</div>\n<div class=\"\n content\n gds-flex-grow-1\n gds-padding-block-2xs\n\">\n <ng-content />\n</div>\n", styles: ["@layer design-system{:host[connectorType=content] .gds-timeline_edge{margin-block:var(--gds-spacing-2xs)}:host:hover{background-color:var(--gds-palette-background-hover)}:host .gds-timeline_edge{width:1px;background-color:var(--gds-palette-border-default)}:host .content{overflow:hidden}:host .timeline{width:40px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6830
7020
  }
6831
7021
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsTimelineItemComponent, decorators: [{
6832
7022
  type: Component,
6833
7023
  args: [{ standalone: true, selector: 'li[gds-timeline-item]', host: {
6834
7024
  class: 'gds-display-flex gds-margin-inline-start-xs gds-padding-inline-start-3xs gds-gap-sm gds-radius-sm',
6835
7025
  '[attr.connectorType]': 'connectorType()'
6836
- }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"\n gds-display-flex\n gds-flex-column\n timeline\n\">\n <div class=\"\n end\n gds-display-flex\n gds-height-2xs\n gds-justify-content-center\n \">\n @if (!end()) {\n <span class=\"gds-timeline_edge\"></span>\n }\n </div>\n <ng-content select=\"[tag]\" />\n <div class=\"\n gds-display-flex\n gds-flex-grow-1\n gds-justify-content-center\n start\n \">\n @if (!start() || connectorType() === 'content') {\n <span class=\"\n gds-timeline_edge\n start\n \"></span>\n }\n </div>\n</div>\n<div class=\"\n content\n gds-flex-grow-1\n gds-padding-block-2xs\n\">\n <ng-content />\n</div>\n", styles: [":host[connectorType=content] .gds-timeline_edge{margin-block:var(--gds-spacing-2xs)}:host:hover{background-color:var(--gds-palette-background-hover)}:host .gds-timeline_edge{width:1px;background-color:var(--gds-palette-border-default)}:host .content{overflow:hidden}:host .timeline{width:40px}\n"] }]
7026
+ }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"\n gds-display-flex\n gds-flex-column\n timeline\n\">\n <div class=\"\n end\n gds-display-flex\n gds-height-2xs\n gds-justify-content-center\n \">\n @if (!end()) {\n <span class=\"gds-timeline_edge\"></span>\n }\n </div>\n <ng-content select=\"[tag]\" />\n <div class=\"\n gds-display-flex\n gds-flex-grow-1\n gds-justify-content-center\n start\n \">\n @if (!start() || connectorType() === 'content') {\n <span class=\"\n gds-timeline_edge\n start\n \"></span>\n }\n </div>\n</div>\n<div class=\"\n content\n gds-flex-grow-1\n gds-padding-block-2xs\n\">\n <ng-content />\n</div>\n", styles: ["@layer design-system{:host[connectorType=content] .gds-timeline_edge{margin-block:var(--gds-spacing-2xs)}:host:hover{background-color:var(--gds-palette-background-hover)}:host .gds-timeline_edge{width:1px;background-color:var(--gds-palette-border-default)}:host .content{overflow:hidden}:host .timeline{width:40px}}\n"] }]
6837
7027
  }], propDecorators: { end: [{ type: i0.Input, args: [{ isSignal: true, alias: "end", required: false }] }], start: [{ type: i0.Input, args: [{ isSignal: true, alias: "start", required: false }] }], connectorType: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectorType", required: false }] }] } });
6838
7028
 
6839
7029
  // eslint-disable-next-line @typescript-eslint/consistent-type-imports
@@ -6872,7 +7062,7 @@ class GdsToastComponent extends ToastNoAnimation {
6872
7062
  return false;
6873
7063
  };
6874
7064
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsToastComponent, deps: [{ token: i1$6.ToastrService }, { token: i1$6.ToastPackage }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Component });
6875
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsToastComponent, isStandalone: true, selector: "gds-toast", host: { attributes: { "animate.enter": "gds-scale-in gds-fade-in", "animate.leave": "gds-scale-out gds-fade-out" }, properties: { "attr.type": "status", "class.gds-responsive-sm-width-100-parent": "true" } }, usesInheritance: true, ngImport: i0, template: "<div\n class=\"\n gds-border\n gds-display-flex\n gds-gap-sm\n gds-padding-block-2xs\n gds-padding-inline-sm\n gds-radius-sm\n gds-responsive-sm-padding-3xs\n gds-toaster--container\n \"\n>\n <div class=\"\n gds-align-items-center\n gds-display-flex\n gds-height-md\n gds-justify-content-center\n \">\n <gds-icon\n key=\"filled-info\"\n class=\"\n gds-icon-size-xs\n gds-toaster--icon\n \"\n />\n </div>\n <div class=\"\n gds-align-items-center\n gds-column-gap-sm\n gds-display-flex\n gds-flex-1\n gds-flex-wrap\n gds-row-gap-2xs\n \">\n @if (title) {\n <div class=\"\n gds-height-fit-content\n gds-text-body-strong\n gds-text-primary\n gds-width-fit-content\n \">\n {{ title | translate }}\n </div>\n }\n @if (message) {\n <div\n class=\"\n gds-height-fit-content\n gds-text-body\n gds-text-primary\n gds-width-fit-content\n \"\n [innerHtml]=\"message | translate\"\n ></div>\n }\n @if (actionLabel) {\n <button\n gds-button\n class=\"\n gds-border-none\n gds-toaster--action-btn\n \"\n [attr.aria-label]=\"actionAriaLabel | translate\"\n (clicked)=\"action($event)\"\n >\n {{ actionLabel | translate }}\n </button>\n }\n </div>\n <div class=\"\n gds-align-items-center\n gds-display-flex\n gds-height-md\n gds-justify-content-center\n \">\n <button\n gds-icon-button\n class=\"gds-background-none\"\n variant=\"primary\"\n [attr.aria-label]=\"dismissAriaLabel | translate\"\n (clicked)=\"remove()\"\n >\n <gds-icon\n key=\"line-dismiss\"\n class=\"gds-icon-size-3xs\"\n />\n </button>\n </div>\n</div>\n", styles: [":host{pointer-events:auto;--background-color: var(--gds-pattern-toast-default-backgroundColor-rest);--icon-color: var(--gds-pattern-toast-default-iconColor-rest);--action-btn-backgroundColor: var(--gds-pattern-toast-default-btnColor-rest);--action-btn-backgroundColor-hover: var(--gds-pattern-toast-default-btnColor-hover);--action-btn-color: var(--gds-palette-text-default-contrast)}:host[type=success]{--background-color: var(--gds-palette-helper-success-default);--icon-color: var(--gds-palette-helper-success-inverse);--action-btn-backgroundColor: var(--gds-pattern-toast-success-btnColor-rest);--action-btn-backgroundColor-hover: var(--gds-pattern-toast-success-btnColor-hover)}:host[type=warning]{--background-color: var(--gds-palette-helper-warning-default);--icon-color: var(--gds-palette-helper-warning-inverse);--action-btn-backgroundColor: var(--gds-pattern-toast-warning-btnColor-rest);--action-btn-backgroundColor-hover: var(--gds-pattern-toast-warning-btnColor-hover)}:host[type=danger]{--background-color: var(--gds-palette-helper-error-default);--icon-color: var(--gds-palette-helper-error-inverse);--action-btn-backgroundColor: var(--gds-pattern-toast-error-btnColor-rest);--action-btn-backgroundColor-hover: var(--gds-pattern-toast-error-btnColor-hover)}:host .gds-toaster--container{background-color:var(--background-color)}:host .gds-toaster--icon{color:var(--icon-color)}:host .gds-toaster--action-btn{--gds-button-backgroundColor: var(--action-btn-backgroundColor);--gds-button-backgroundColor-hover: var(--action-btn-backgroundColor-hover);--gds-button-color: var(--action-btn-color)}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "component", type: GdsButtonComponent, selector: "button[gds-button]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
7065
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsToastComponent, isStandalone: true, selector: "gds-toast", host: { attributes: { "animate.enter": "gds-scale-in gds-fade-in", "animate.leave": "gds-scale-out gds-fade-out" }, properties: { "attr.type": "status", "class.gds-responsive-sm-width-100-parent": "true" } }, usesInheritance: true, ngImport: i0, template: "<div\n class=\"\n gds-border\n gds-display-flex\n gds-gap-sm\n gds-padding-block-2xs\n gds-padding-inline-sm\n gds-radius-sm\n gds-responsive-sm-padding-3xs\n gds-toaster--container\n \"\n>\n <div class=\"\n gds-align-items-center\n gds-display-flex\n gds-height-md\n gds-justify-content-center\n \">\n <gds-icon\n key=\"filled-info\"\n class=\"\n gds-icon-size-xs\n gds-toaster--icon\n \"\n />\n </div>\n <div class=\"\n gds-align-items-center\n gds-column-gap-sm\n gds-display-flex\n gds-flex-1\n gds-flex-wrap\n gds-row-gap-2xs\n \">\n @if (title) {\n <div class=\"\n gds-height-fit-content\n gds-text-body-strong\n gds-text-primary\n gds-width-fit-content\n \">\n {{ title | translate }}\n </div>\n }\n @if (message) {\n <div\n class=\"\n gds-height-fit-content\n gds-text-body\n gds-text-primary\n gds-width-fit-content\n \"\n [innerHtml]=\"message | translate\"\n ></div>\n }\n @if (actionLabel) {\n <button\n gds-button\n class=\"\n gds-border-none\n gds-toaster--action-btn\n \"\n [attr.aria-label]=\"actionAriaLabel | translate\"\n (clicked)=\"action($event)\"\n >\n {{ actionLabel | translate }}\n </button>\n }\n </div>\n <div class=\"\n gds-align-items-center\n gds-display-flex\n gds-height-md\n gds-justify-content-center\n \">\n <button\n gds-icon-button\n class=\"gds-background-none\"\n variant=\"primary\"\n [attr.aria-label]=\"dismissAriaLabel | translate\"\n (clicked)=\"remove()\"\n >\n <gds-icon\n key=\"line-dismiss\"\n class=\"gds-icon-size-3xs\"\n />\n </button>\n </div>\n</div>\n", styles: ["@layer design-system{:host{pointer-events:auto;--background-color: var(--gds-pattern-toast-default-backgroundColor-rest);--icon-color: var(--gds-pattern-toast-default-iconColor-rest);--action-btn-backgroundColor: var(--gds-pattern-toast-default-btnColor-rest);--action-btn-backgroundColor-hover: var(--gds-pattern-toast-default-btnColor-hover);--action-btn-color: var(--gds-palette-text-default-contrast)}:host[type=success]{--background-color: var(--gds-palette-helper-success-default);--icon-color: var(--gds-palette-helper-success-inverse);--action-btn-backgroundColor: var(--gds-pattern-toast-success-btnColor-rest);--action-btn-backgroundColor-hover: var(--gds-pattern-toast-success-btnColor-hover)}:host[type=warning]{--background-color: var(--gds-palette-helper-warning-default);--icon-color: var(--gds-palette-helper-warning-inverse);--action-btn-backgroundColor: var(--gds-pattern-toast-warning-btnColor-rest);--action-btn-backgroundColor-hover: var(--gds-pattern-toast-warning-btnColor-hover)}:host[type=danger]{--background-color: var(--gds-palette-helper-error-default);--icon-color: var(--gds-palette-helper-error-inverse);--action-btn-backgroundColor: var(--gds-pattern-toast-error-btnColor-rest);--action-btn-backgroundColor-hover: var(--gds-pattern-toast-error-btnColor-hover)}:host .gds-toaster--container{background-color:var(--background-color)}:host .gds-toaster--icon{color:var(--icon-color)}:host .gds-toaster--action-btn{--gds-button-backgroundColor: var(--action-btn-backgroundColor);--gds-button-backgroundColor-hover: var(--action-btn-backgroundColor-hover);--gds-button-color: var(--action-btn-color)}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "component", type: GdsButtonComponent, selector: "button[gds-button]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6876
7066
  }
6877
7067
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsToastComponent, decorators: [{
6878
7068
  type: Component,
@@ -6881,7 +7071,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
6881
7071
  '[class.gds-responsive-sm-width-100-parent]': 'true',
6882
7072
  'animate.enter': 'gds-scale-in gds-fade-in',
6883
7073
  'animate.leave': 'gds-scale-out gds-fade-out'
6884
- }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"\n gds-border\n gds-display-flex\n gds-gap-sm\n gds-padding-block-2xs\n gds-padding-inline-sm\n gds-radius-sm\n gds-responsive-sm-padding-3xs\n gds-toaster--container\n \"\n>\n <div class=\"\n gds-align-items-center\n gds-display-flex\n gds-height-md\n gds-justify-content-center\n \">\n <gds-icon\n key=\"filled-info\"\n class=\"\n gds-icon-size-xs\n gds-toaster--icon\n \"\n />\n </div>\n <div class=\"\n gds-align-items-center\n gds-column-gap-sm\n gds-display-flex\n gds-flex-1\n gds-flex-wrap\n gds-row-gap-2xs\n \">\n @if (title) {\n <div class=\"\n gds-height-fit-content\n gds-text-body-strong\n gds-text-primary\n gds-width-fit-content\n \">\n {{ title | translate }}\n </div>\n }\n @if (message) {\n <div\n class=\"\n gds-height-fit-content\n gds-text-body\n gds-text-primary\n gds-width-fit-content\n \"\n [innerHtml]=\"message | translate\"\n ></div>\n }\n @if (actionLabel) {\n <button\n gds-button\n class=\"\n gds-border-none\n gds-toaster--action-btn\n \"\n [attr.aria-label]=\"actionAriaLabel | translate\"\n (clicked)=\"action($event)\"\n >\n {{ actionLabel | translate }}\n </button>\n }\n </div>\n <div class=\"\n gds-align-items-center\n gds-display-flex\n gds-height-md\n gds-justify-content-center\n \">\n <button\n gds-icon-button\n class=\"gds-background-none\"\n variant=\"primary\"\n [attr.aria-label]=\"dismissAriaLabel | translate\"\n (clicked)=\"remove()\"\n >\n <gds-icon\n key=\"line-dismiss\"\n class=\"gds-icon-size-3xs\"\n />\n </button>\n </div>\n</div>\n", styles: [":host{pointer-events:auto;--background-color: var(--gds-pattern-toast-default-backgroundColor-rest);--icon-color: var(--gds-pattern-toast-default-iconColor-rest);--action-btn-backgroundColor: var(--gds-pattern-toast-default-btnColor-rest);--action-btn-backgroundColor-hover: var(--gds-pattern-toast-default-btnColor-hover);--action-btn-color: var(--gds-palette-text-default-contrast)}:host[type=success]{--background-color: var(--gds-palette-helper-success-default);--icon-color: var(--gds-palette-helper-success-inverse);--action-btn-backgroundColor: var(--gds-pattern-toast-success-btnColor-rest);--action-btn-backgroundColor-hover: var(--gds-pattern-toast-success-btnColor-hover)}:host[type=warning]{--background-color: var(--gds-palette-helper-warning-default);--icon-color: var(--gds-palette-helper-warning-inverse);--action-btn-backgroundColor: var(--gds-pattern-toast-warning-btnColor-rest);--action-btn-backgroundColor-hover: var(--gds-pattern-toast-warning-btnColor-hover)}:host[type=danger]{--background-color: var(--gds-palette-helper-error-default);--icon-color: var(--gds-palette-helper-error-inverse);--action-btn-backgroundColor: var(--gds-pattern-toast-error-btnColor-rest);--action-btn-backgroundColor-hover: var(--gds-pattern-toast-error-btnColor-hover)}:host .gds-toaster--container{background-color:var(--background-color)}:host .gds-toaster--icon{color:var(--icon-color)}:host .gds-toaster--action-btn{--gds-button-backgroundColor: var(--action-btn-backgroundColor);--gds-button-backgroundColor-hover: var(--action-btn-backgroundColor-hover);--gds-button-color: var(--action-btn-color)}\n"] }]
7074
+ }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"\n gds-border\n gds-display-flex\n gds-gap-sm\n gds-padding-block-2xs\n gds-padding-inline-sm\n gds-radius-sm\n gds-responsive-sm-padding-3xs\n gds-toaster--container\n \"\n>\n <div class=\"\n gds-align-items-center\n gds-display-flex\n gds-height-md\n gds-justify-content-center\n \">\n <gds-icon\n key=\"filled-info\"\n class=\"\n gds-icon-size-xs\n gds-toaster--icon\n \"\n />\n </div>\n <div class=\"\n gds-align-items-center\n gds-column-gap-sm\n gds-display-flex\n gds-flex-1\n gds-flex-wrap\n gds-row-gap-2xs\n \">\n @if (title) {\n <div class=\"\n gds-height-fit-content\n gds-text-body-strong\n gds-text-primary\n gds-width-fit-content\n \">\n {{ title | translate }}\n </div>\n }\n @if (message) {\n <div\n class=\"\n gds-height-fit-content\n gds-text-body\n gds-text-primary\n gds-width-fit-content\n \"\n [innerHtml]=\"message | translate\"\n ></div>\n }\n @if (actionLabel) {\n <button\n gds-button\n class=\"\n gds-border-none\n gds-toaster--action-btn\n \"\n [attr.aria-label]=\"actionAriaLabel | translate\"\n (clicked)=\"action($event)\"\n >\n {{ actionLabel | translate }}\n </button>\n }\n </div>\n <div class=\"\n gds-align-items-center\n gds-display-flex\n gds-height-md\n gds-justify-content-center\n \">\n <button\n gds-icon-button\n class=\"gds-background-none\"\n variant=\"primary\"\n [attr.aria-label]=\"dismissAriaLabel | translate\"\n (clicked)=\"remove()\"\n >\n <gds-icon\n key=\"line-dismiss\"\n class=\"gds-icon-size-3xs\"\n />\n </button>\n </div>\n</div>\n", styles: ["@layer design-system{:host{pointer-events:auto;--background-color: var(--gds-pattern-toast-default-backgroundColor-rest);--icon-color: var(--gds-pattern-toast-default-iconColor-rest);--action-btn-backgroundColor: var(--gds-pattern-toast-default-btnColor-rest);--action-btn-backgroundColor-hover: var(--gds-pattern-toast-default-btnColor-hover);--action-btn-color: var(--gds-palette-text-default-contrast)}:host[type=success]{--background-color: var(--gds-palette-helper-success-default);--icon-color: var(--gds-palette-helper-success-inverse);--action-btn-backgroundColor: var(--gds-pattern-toast-success-btnColor-rest);--action-btn-backgroundColor-hover: var(--gds-pattern-toast-success-btnColor-hover)}:host[type=warning]{--background-color: var(--gds-palette-helper-warning-default);--icon-color: var(--gds-palette-helper-warning-inverse);--action-btn-backgroundColor: var(--gds-pattern-toast-warning-btnColor-rest);--action-btn-backgroundColor-hover: var(--gds-pattern-toast-warning-btnColor-hover)}:host[type=danger]{--background-color: var(--gds-palette-helper-error-default);--icon-color: var(--gds-palette-helper-error-inverse);--action-btn-backgroundColor: var(--gds-pattern-toast-error-btnColor-rest);--action-btn-backgroundColor-hover: var(--gds-pattern-toast-error-btnColor-hover)}:host .gds-toaster--container{background-color:var(--background-color)}:host .gds-toaster--icon{color:var(--icon-color)}:host .gds-toaster--action-btn{--gds-button-backgroundColor: var(--action-btn-backgroundColor);--gds-button-backgroundColor-hover: var(--action-btn-backgroundColor-hover);--gds-button-color: var(--action-btn-color)}}\n"] }]
6885
7075
  }], ctorParameters: () => [{ type: i1$6.ToastrService }, { type: i1$6.ToastPackage }, { type: i0.ApplicationRef }] });
6886
7076
 
6887
7077
  class GdsListboxBaseDirective {
@@ -7277,14 +7467,14 @@ class GdsTreeViewListItemComponent {
7277
7467
  }
7278
7468
  }
7279
7469
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsTreeViewListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
7280
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsTreeViewListItemComponent, isStandalone: true, selector: "gds-tree-view-list-item", inputs: { tier: { classPropertyName: "tier", publicName: "tier", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, nowrap: { classPropertyName: "nowrap", publicName: "nowrap", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, hasChildren: { classPropertyName: "hasChildren", publicName: "hasChildren", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", doubleClicked: "doubleClicked", toggleExpanded: "toggleExpanded" }, host: { properties: { "style.--tier": "tier()" }, classAttribute: "gds-display-contents" }, queries: [{ propertyName: "checkbox", first: true, predicate: GdsCheckboxComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "item", first: true, predicate: ["item"], descendants: true, isSignal: true }], hostDirectives: [{ directive: GdsListboxOptionDirective }], ngImport: i0, template: "<div\n #item\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-gap-2xs\n gds-min-width-0\n gds-position-relative\n gds-width-100-parent\n root\n \"\n [ngClass]=\"{\n selected: activeOverride(),\n disabled: disabled(),\n dropdown: expanded(),\n 'has-checkbox': hasCheckbox()\n }\"\n role=\"treeitem\"\n [attr.aria-selected]=\"activeOverride()\"\n [attr.aria-label]=\"ariaLabel()\"\n [tabindex]=\"-1\"\n (click)=\"onHandleClick($event)\"\n (keydown.space)=\"onHandleClick($event)\"\n (dblclick)=\"onHandleDoubleClick($event)\"\n (keydown.arrowRight)=\"handleToggleExpanded($event, true)\"\n (keydown.arrowLeft)=\"handleToggleExpanded($event, false)\"\n>\n <ng-content select=\"[checkbox]\" />\n @if (displayChevron()) {\n <button\n class=\"\n chevron-btn\n gds-background-none\n gds-min-height-0\n gds-mobile-margin-inline-end-sm\n \"\n gds-icon-button\n variant=\"primary\"\n [tabindex]=\"-1\"\n (clicked)=\"handleToggleExpanded($event)\"\n >\n <gds-icon\n class=\"\n chevron\n gds-icon-size-2xs\n gds-mobile-icon-size-sm\n \"\n key=\"line-chevron-right-stroke\"\n />\n </button>\n } @else {\n <span class=\"gds-width-sm\"></span>\n }\n\n @if (icon(); as icon) {\n <gds-icon\n class=\"\n gds-icon-size-xs\n gds-mobile-icon-size-sm\n icon\n \"\n [key]=\"icon\"\n />\n }\n <div class=\"\n gds-flex-1\n gds-min-width-0\n gds-text-body\n label\n \">\n <ng-content />\n </div>\n <div class=\"\n end-content\n gds-padding-block-end-2xs\n gds-text-caption\n \">\n <ng-content select=\"[end-content]\" />\n </div>\n</div>\n\n<div [ngClass]=\"{ 'gds-display-none': !expanded() }\">\n <ng-content select=\"[expanded-content]\" />\n</div>\n", styles: [":host{--tier: 0;--wrapper-margin: 1px;--wrapper-margin-block: 2px;--cursor: pointer;--label-text-color: var(--gds-palette-text-default-primary);--end-content-text-color: var(--gds-palette-text-default-secondary);--icon-color: var(--gds-palette-icon-primary)}:host .disabled{--cursor: not-allowed;--label-text-color: var(--gds-palette-text-default-disabled);--end-content-text-color: var(--gds-palette-text-default-disabled);--icon-color: var(--gds-palette-icon-disabled)}:host:focus-visible{outline:none}:host:focus>.root:before,:host:focus-visible>.root:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}:host .root{padding-left:calc(var(--gds-spacing-sm) + var(--gds-spacing-md) * (var(--tier) - 1));cursor:var(--cursor);padding-block:6px;outline:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .root:focus-within:before,:host .root:hover:not(.disabled):before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}:host .label{color:var(--label-text-color)}:host .end-content{color:var(--end-content-text-color)}:host .selected:not(.disabled):before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}:host .selected:not(.disabled):not(.has-checkbox):after{content:\"\";position:absolute;border-radius:3px;width:3px;height:61%;top:50%;left:calc(var(--wrapper-margin, 0px) - 1px);transform:translateY(-50%);background:var(--gds-palette-border-selected);padding:0}:host .dropdown .chevron{transition:rotate .2s ease;rotate:90deg}:host .chevron{z-index:1;transition:rotate .2s ease;rotate:0deg}:host .label{z-index:1}:host .end-content{z-index:1}:host .icon{z-index:1;color:var(--icon-color)}:is(body[isMobile=true]) :host .root{padding-block:2px}:is(body[isMobile=true]) :host .chevron-btn{order:1}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
7470
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsTreeViewListItemComponent, isStandalone: true, selector: "gds-tree-view-list-item", inputs: { tier: { classPropertyName: "tier", publicName: "tier", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, nowrap: { classPropertyName: "nowrap", publicName: "nowrap", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, hasChildren: { classPropertyName: "hasChildren", publicName: "hasChildren", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", doubleClicked: "doubleClicked", toggleExpanded: "toggleExpanded" }, host: { properties: { "style.--tier": "tier()" }, classAttribute: "gds-display-contents" }, queries: [{ propertyName: "checkbox", first: true, predicate: GdsCheckboxComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "item", first: true, predicate: ["item"], descendants: true, isSignal: true }], hostDirectives: [{ directive: GdsListboxOptionDirective }], ngImport: i0, template: "<div\n #item\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-gap-2xs\n gds-min-width-0\n gds-position-relative\n gds-width-100-parent\n root\n \"\n [ngClass]=\"{\n selected: activeOverride(),\n disabled: disabled(),\n dropdown: expanded(),\n 'has-checkbox': hasCheckbox()\n }\"\n role=\"treeitem\"\n [attr.aria-selected]=\"activeOverride()\"\n [attr.aria-label]=\"ariaLabel()\"\n [tabindex]=\"-1\"\n (click)=\"onHandleClick($event)\"\n (keydown.space)=\"onHandleClick($event)\"\n (dblclick)=\"onHandleDoubleClick($event)\"\n (keydown.arrowRight)=\"handleToggleExpanded($event, true)\"\n (keydown.arrowLeft)=\"handleToggleExpanded($event, false)\"\n>\n <ng-content select=\"[checkbox]\" />\n @if (displayChevron()) {\n <button\n class=\"\n chevron-btn\n gds-background-none\n gds-min-height-0\n gds-mobile-margin-inline-end-sm\n \"\n gds-icon-button\n variant=\"primary\"\n [tabindex]=\"-1\"\n (clicked)=\"handleToggleExpanded($event)\"\n >\n <gds-icon\n class=\"\n chevron\n gds-icon-size-2xs\n gds-mobile-icon-size-sm\n \"\n key=\"line-chevron-right-stroke\"\n />\n </button>\n } @else {\n <span class=\"gds-width-sm\"></span>\n }\n\n @if (icon(); as icon) {\n <gds-icon\n class=\"\n gds-icon-size-xs\n gds-mobile-icon-size-sm\n icon\n \"\n [key]=\"icon\"\n />\n }\n <div class=\"\n gds-flex-1\n gds-min-width-0\n gds-text-body\n label\n \">\n <ng-content />\n </div>\n <div class=\"\n end-content\n gds-padding-block-end-2xs\n gds-text-caption\n \">\n <ng-content select=\"[end-content]\" />\n </div>\n</div>\n\n<div [ngClass]=\"{ 'gds-display-none': !expanded() }\">\n <ng-content select=\"[expanded-content]\" />\n</div>\n", styles: ["@layer design-system{:host{--tier: 0;--wrapper-margin: 1px;--wrapper-margin-block: 2px;--cursor: pointer;--label-text-color: var(--gds-palette-text-default-primary);--end-content-text-color: var(--gds-palette-text-default-secondary);--icon-color: var(--gds-palette-icon-primary)}:host .disabled{--cursor: not-allowed;--label-text-color: var(--gds-palette-text-default-disabled);--end-content-text-color: var(--gds-palette-text-default-disabled);--icon-color: var(--gds-palette-icon-disabled)}:host:focus-visible{outline:none}:host:focus>.root:before,:host:focus-visible>.root:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}:host .root{padding-left:calc(var(--gds-spacing-sm) + var(--gds-spacing-md) * (var(--tier) - 1));cursor:var(--cursor);padding-block:6px;outline:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .root:focus-within:before,:host .root:hover:not(.disabled):before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}:host .label{color:var(--label-text-color)}:host .end-content{color:var(--end-content-text-color)}:host .selected:not(.disabled):before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}:host .selected:not(.disabled):not(.has-checkbox):after{content:\"\";position:absolute;border-radius:3px;width:3px;height:61%;top:50%;left:calc(var(--wrapper-margin, 0px) - 1px);transform:translateY(-50%);background:var(--gds-palette-border-selected);padding:0}:host .dropdown .chevron{transition:rotate .2s ease;rotate:90deg}:host .chevron{z-index:1;transition:rotate .2s ease;rotate:0deg}:host .label{z-index:1}:host .end-content{z-index:1}:host .icon{z-index:1;color:var(--icon-color)}:is(body[isMobile=true]) :host .root{padding-block:2px}:is(body[isMobile=true]) :host .chevron-btn{order:1}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
7281
7471
  }
7282
7472
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsTreeViewListItemComponent, decorators: [{
7283
7473
  type: Component,
7284
7474
  args: [{ selector: 'gds-tree-view-list-item', imports: [NgClass, GdsIconComponent, GdsIconButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
7285
7475
  '[style.--tier]': 'tier()',
7286
7476
  class: 'gds-display-contents'
7287
- }, hostDirectives: [GdsListboxOptionDirective], template: "<div\n #item\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-gap-2xs\n gds-min-width-0\n gds-position-relative\n gds-width-100-parent\n root\n \"\n [ngClass]=\"{\n selected: activeOverride(),\n disabled: disabled(),\n dropdown: expanded(),\n 'has-checkbox': hasCheckbox()\n }\"\n role=\"treeitem\"\n [attr.aria-selected]=\"activeOverride()\"\n [attr.aria-label]=\"ariaLabel()\"\n [tabindex]=\"-1\"\n (click)=\"onHandleClick($event)\"\n (keydown.space)=\"onHandleClick($event)\"\n (dblclick)=\"onHandleDoubleClick($event)\"\n (keydown.arrowRight)=\"handleToggleExpanded($event, true)\"\n (keydown.arrowLeft)=\"handleToggleExpanded($event, false)\"\n>\n <ng-content select=\"[checkbox]\" />\n @if (displayChevron()) {\n <button\n class=\"\n chevron-btn\n gds-background-none\n gds-min-height-0\n gds-mobile-margin-inline-end-sm\n \"\n gds-icon-button\n variant=\"primary\"\n [tabindex]=\"-1\"\n (clicked)=\"handleToggleExpanded($event)\"\n >\n <gds-icon\n class=\"\n chevron\n gds-icon-size-2xs\n gds-mobile-icon-size-sm\n \"\n key=\"line-chevron-right-stroke\"\n />\n </button>\n } @else {\n <span class=\"gds-width-sm\"></span>\n }\n\n @if (icon(); as icon) {\n <gds-icon\n class=\"\n gds-icon-size-xs\n gds-mobile-icon-size-sm\n icon\n \"\n [key]=\"icon\"\n />\n }\n <div class=\"\n gds-flex-1\n gds-min-width-0\n gds-text-body\n label\n \">\n <ng-content />\n </div>\n <div class=\"\n end-content\n gds-padding-block-end-2xs\n gds-text-caption\n \">\n <ng-content select=\"[end-content]\" />\n </div>\n</div>\n\n<div [ngClass]=\"{ 'gds-display-none': !expanded() }\">\n <ng-content select=\"[expanded-content]\" />\n</div>\n", styles: [":host{--tier: 0;--wrapper-margin: 1px;--wrapper-margin-block: 2px;--cursor: pointer;--label-text-color: var(--gds-palette-text-default-primary);--end-content-text-color: var(--gds-palette-text-default-secondary);--icon-color: var(--gds-palette-icon-primary)}:host .disabled{--cursor: not-allowed;--label-text-color: var(--gds-palette-text-default-disabled);--end-content-text-color: var(--gds-palette-text-default-disabled);--icon-color: var(--gds-palette-icon-disabled)}:host:focus-visible{outline:none}:host:focus>.root:before,:host:focus-visible>.root:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}:host .root{padding-left:calc(var(--gds-spacing-sm) + var(--gds-spacing-md) * (var(--tier) - 1));cursor:var(--cursor);padding-block:6px;outline:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .root:focus-within:before,:host .root:hover:not(.disabled):before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}:host .label{color:var(--label-text-color)}:host .end-content{color:var(--end-content-text-color)}:host .selected:not(.disabled):before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}:host .selected:not(.disabled):not(.has-checkbox):after{content:\"\";position:absolute;border-radius:3px;width:3px;height:61%;top:50%;left:calc(var(--wrapper-margin, 0px) - 1px);transform:translateY(-50%);background:var(--gds-palette-border-selected);padding:0}:host .dropdown .chevron{transition:rotate .2s ease;rotate:90deg}:host .chevron{z-index:1;transition:rotate .2s ease;rotate:0deg}:host .label{z-index:1}:host .end-content{z-index:1}:host .icon{z-index:1;color:var(--icon-color)}:is(body[isMobile=true]) :host .root{padding-block:2px}:is(body[isMobile=true]) :host .chevron-btn{order:1}\n"] }]
7477
+ }, hostDirectives: [GdsListboxOptionDirective], template: "<div\n #item\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-gap-2xs\n gds-min-width-0\n gds-position-relative\n gds-width-100-parent\n root\n \"\n [ngClass]=\"{\n selected: activeOverride(),\n disabled: disabled(),\n dropdown: expanded(),\n 'has-checkbox': hasCheckbox()\n }\"\n role=\"treeitem\"\n [attr.aria-selected]=\"activeOverride()\"\n [attr.aria-label]=\"ariaLabel()\"\n [tabindex]=\"-1\"\n (click)=\"onHandleClick($event)\"\n (keydown.space)=\"onHandleClick($event)\"\n (dblclick)=\"onHandleDoubleClick($event)\"\n (keydown.arrowRight)=\"handleToggleExpanded($event, true)\"\n (keydown.arrowLeft)=\"handleToggleExpanded($event, false)\"\n>\n <ng-content select=\"[checkbox]\" />\n @if (displayChevron()) {\n <button\n class=\"\n chevron-btn\n gds-background-none\n gds-min-height-0\n gds-mobile-margin-inline-end-sm\n \"\n gds-icon-button\n variant=\"primary\"\n [tabindex]=\"-1\"\n (clicked)=\"handleToggleExpanded($event)\"\n >\n <gds-icon\n class=\"\n chevron\n gds-icon-size-2xs\n gds-mobile-icon-size-sm\n \"\n key=\"line-chevron-right-stroke\"\n />\n </button>\n } @else {\n <span class=\"gds-width-sm\"></span>\n }\n\n @if (icon(); as icon) {\n <gds-icon\n class=\"\n gds-icon-size-xs\n gds-mobile-icon-size-sm\n icon\n \"\n [key]=\"icon\"\n />\n }\n <div class=\"\n gds-flex-1\n gds-min-width-0\n gds-text-body\n label\n \">\n <ng-content />\n </div>\n <div class=\"\n end-content\n gds-padding-block-end-2xs\n gds-text-caption\n \">\n <ng-content select=\"[end-content]\" />\n </div>\n</div>\n\n<div [ngClass]=\"{ 'gds-display-none': !expanded() }\">\n <ng-content select=\"[expanded-content]\" />\n</div>\n", styles: ["@layer design-system{:host{--tier: 0;--wrapper-margin: 1px;--wrapper-margin-block: 2px;--cursor: pointer;--label-text-color: var(--gds-palette-text-default-primary);--end-content-text-color: var(--gds-palette-text-default-secondary);--icon-color: var(--gds-palette-icon-primary)}:host .disabled{--cursor: not-allowed;--label-text-color: var(--gds-palette-text-default-disabled);--end-content-text-color: var(--gds-palette-text-default-disabled);--icon-color: var(--gds-palette-icon-disabled)}:host:focus-visible{outline:none}:host:focus>.root:before,:host:focus-visible>.root:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}:host .root{padding-left:calc(var(--gds-spacing-sm) + var(--gds-spacing-md) * (var(--tier) - 1));cursor:var(--cursor);padding-block:6px;outline:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .root:focus-within:before,:host .root:hover:not(.disabled):before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}:host .label{color:var(--label-text-color)}:host .end-content{color:var(--end-content-text-color)}:host .selected:not(.disabled):before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}:host .selected:not(.disabled):not(.has-checkbox):after{content:\"\";position:absolute;border-radius:3px;width:3px;height:61%;top:50%;left:calc(var(--wrapper-margin, 0px) - 1px);transform:translateY(-50%);background:var(--gds-palette-border-selected);padding:0}:host .dropdown .chevron{transition:rotate .2s ease;rotate:90deg}:host .chevron{z-index:1;transition:rotate .2s ease;rotate:0deg}:host .label{z-index:1}:host .end-content{z-index:1}:host .icon{z-index:1;color:var(--icon-color)}:is(body[isMobile=true]) :host .root{padding-block:2px}:is(body[isMobile=true]) :host .chevron-btn{order:1}}\n"] }]
7288
7478
  }], propDecorators: { checkbox: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GdsCheckboxComponent), { isSignal: true }] }], item: [{ type: i0.ViewChild, args: ['item', { isSignal: true }] }], tier: [{ type: i0.Input, args: [{ isSignal: true, alias: "tier", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], nowrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "nowrap", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], hasChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasChildren", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], doubleClicked: [{ type: i0.Output, args: ["doubleClicked"] }], toggleExpanded: [{ type: i0.Output, args: ["toggleExpanded"] }] } });
7289
7479
 
7290
7480
  class TreeViewListItemDirective {
@@ -7318,11 +7508,11 @@ class GdsUserPromptComponent extends GdsDialogBaseDirective {
7318
7508
  return this.config.data?.secondaryTextVariant ?? 'default';
7319
7509
  }
7320
7510
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsUserPromptComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
7321
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsUserPromptComponent, isStandalone: true, selector: "gds-user-prompt-dialog", viewQueries: [{ propertyName: "defaultDescTmpl", first: true, predicate: ["defaultDescriptionTmpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<dialog\n gds-dialog\n class=\"\n dialog\n gds-height-fit-content\n gds-width-fit-content\n \"\n [closeOnBackdropClick]=\"config.data?.closeOnBackdropClick\"\n (canceled)=\"close()\"\n (closed)=\"close()\"\n [suppressDismissBtn]=\"config.data?.suppressDismissBtn\"\n>\n <span header-label>{{ config.data?.title ?? '' | translate }}</span>\n <ng-container *ngTemplateOutlet=\"descTemplate\" />\n <div\n footer-actions-primary\n class=\"\n gds-display-flex\n gds-gap-2xs\n gds-mobile-flex-row-reverse\n gds-mobile-padding-block-start-2xs\n \"\n >\n <button\n gds-button\n class=\"\n gds-mobile-padding-inline-2xs\n gds-mobile-text-primary-primary\n \"\n [variant]=\"isMobile() ? 'invisible' : 'primary'\"\n (clicked)=\"confirm()\"\n >\n {{ config.data?.primaryLabel ?? '' | translate }}\n </button>\n @if (config.data?.secondaryLabel) {\n <button\n gds-button\n class=\"\n gds-mobile-padding-inline-2xs\n secondary-button\n \"\n [attr.secondary-text-variant]=\"secondaryTextVariant\"\n footer-actions-primary\n [variant]=\"isMobile() ? 'invisible' : 'default'\"\n (clicked)=\"close()\"\n >\n {{ config.data?.secondaryLabel ?? '' | translate }}\n </button>\n }\n </div>\n</dialog>\n\n<ng-template #defaultDescriptionTmpl>\n <span>{{ desc | translate }}</span>\n</ng-template>\n", styles: [":host[isActive=true]{outline:2px solid}:is(body[isMobile=true]) :host .dialog{--gds-dialog-base-gap: var(--gds-spacing-2xs)}@media(max-width:484px){:host .dialog{max-width:calc(100% - 2 * var(--gds-spacing-sm))}}:host .secondary-button{--color: var(--gds-palette-text-primary-primary)}:host .secondary-button[secondary-text-variant=error]{--color: var(--gds-palette-helper-error-inverse)}:host .secondary-button{color:var(--color)}\n"], dependencies: [{ kind: "component", type: GdsDialogComponent, selector: "dialog[gds-dialog]", inputs: ["type", "background", "headerLabelAlignment", "showFooterBorder", "closeOnBackdropClick", "suppressDismissBtn"], outputs: ["closed", "canceled"] }, { kind: "component", type: GdsButtonComponent, selector: "button[gds-button]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
7511
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsUserPromptComponent, isStandalone: true, selector: "gds-user-prompt-dialog", viewQueries: [{ propertyName: "defaultDescTmpl", first: true, predicate: ["defaultDescriptionTmpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<dialog\n gds-dialog\n class=\"\n dialog\n gds-height-fit-content\n gds-width-fit-content\n \"\n [closeOnBackdropClick]=\"config.data?.closeOnBackdropClick\"\n (canceled)=\"close()\"\n (closed)=\"close()\"\n [suppressDismissBtn]=\"config.data?.suppressDismissBtn\"\n>\n <span header-label>{{ config.data?.title ?? '' | translate }}</span>\n <ng-container *ngTemplateOutlet=\"descTemplate\" />\n <div\n footer-actions-primary\n class=\"\n gds-display-flex\n gds-gap-2xs\n gds-mobile-flex-row-reverse\n gds-mobile-padding-block-start-2xs\n \"\n >\n <button\n gds-button\n class=\"\n gds-mobile-padding-inline-2xs\n gds-mobile-text-primary-primary\n \"\n [variant]=\"isMobile() ? 'invisible' : 'primary'\"\n (clicked)=\"confirm()\"\n >\n {{ config.data?.primaryLabel ?? '' | translate }}\n </button>\n @if (config.data?.secondaryLabel) {\n <button\n gds-button\n class=\"\n gds-mobile-padding-inline-2xs\n secondary-button\n \"\n [attr.secondary-text-variant]=\"secondaryTextVariant\"\n footer-actions-primary\n [variant]=\"isMobile() ? 'invisible' : 'default'\"\n (clicked)=\"close()\"\n >\n {{ config.data?.secondaryLabel ?? '' | translate }}\n </button>\n }\n </div>\n</dialog>\n\n<ng-template #defaultDescriptionTmpl>\n <span>{{ desc | translate }}</span>\n</ng-template>\n", styles: ["@layer design-system{:host[isActive=true]{outline:2px solid}:is(body[isMobile=true]) :host .dialog{--gds-dialog-base-gap: var(--gds-spacing-2xs)}@media(max-width:484px){:host .dialog{max-width:calc(100% - 2 * var(--gds-spacing-sm))}}:host .secondary-button{--color: var(--gds-palette-text-primary-primary)}:host .secondary-button[secondary-text-variant=error]{--color: var(--gds-palette-helper-error-inverse)}:host .secondary-button{color:var(--color)}}\n"], dependencies: [{ kind: "component", type: GdsDialogComponent, selector: "dialog[gds-dialog]", inputs: ["type", "background", "headerLabelAlignment", "showFooterBorder", "closeOnBackdropClick", "suppressDismissBtn"], outputs: ["closed", "canceled"] }, { kind: "component", type: GdsButtonComponent, selector: "button[gds-button]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
7322
7512
  }
7323
7513
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsUserPromptComponent, decorators: [{
7324
7514
  type: Component,
7325
- args: [{ selector: 'gds-user-prompt-dialog', imports: [GdsDialogComponent, GdsButtonComponent, TranslatePipe, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<dialog\n gds-dialog\n class=\"\n dialog\n gds-height-fit-content\n gds-width-fit-content\n \"\n [closeOnBackdropClick]=\"config.data?.closeOnBackdropClick\"\n (canceled)=\"close()\"\n (closed)=\"close()\"\n [suppressDismissBtn]=\"config.data?.suppressDismissBtn\"\n>\n <span header-label>{{ config.data?.title ?? '' | translate }}</span>\n <ng-container *ngTemplateOutlet=\"descTemplate\" />\n <div\n footer-actions-primary\n class=\"\n gds-display-flex\n gds-gap-2xs\n gds-mobile-flex-row-reverse\n gds-mobile-padding-block-start-2xs\n \"\n >\n <button\n gds-button\n class=\"\n gds-mobile-padding-inline-2xs\n gds-mobile-text-primary-primary\n \"\n [variant]=\"isMobile() ? 'invisible' : 'primary'\"\n (clicked)=\"confirm()\"\n >\n {{ config.data?.primaryLabel ?? '' | translate }}\n </button>\n @if (config.data?.secondaryLabel) {\n <button\n gds-button\n class=\"\n gds-mobile-padding-inline-2xs\n secondary-button\n \"\n [attr.secondary-text-variant]=\"secondaryTextVariant\"\n footer-actions-primary\n [variant]=\"isMobile() ? 'invisible' : 'default'\"\n (clicked)=\"close()\"\n >\n {{ config.data?.secondaryLabel ?? '' | translate }}\n </button>\n }\n </div>\n</dialog>\n\n<ng-template #defaultDescriptionTmpl>\n <span>{{ desc | translate }}</span>\n</ng-template>\n", styles: [":host[isActive=true]{outline:2px solid}:is(body[isMobile=true]) :host .dialog{--gds-dialog-base-gap: var(--gds-spacing-2xs)}@media(max-width:484px){:host .dialog{max-width:calc(100% - 2 * var(--gds-spacing-sm))}}:host .secondary-button{--color: var(--gds-palette-text-primary-primary)}:host .secondary-button[secondary-text-variant=error]{--color: var(--gds-palette-helper-error-inverse)}:host .secondary-button{color:var(--color)}\n"] }]
7515
+ args: [{ selector: 'gds-user-prompt-dialog', imports: [GdsDialogComponent, GdsButtonComponent, TranslatePipe, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<dialog\n gds-dialog\n class=\"\n dialog\n gds-height-fit-content\n gds-width-fit-content\n \"\n [closeOnBackdropClick]=\"config.data?.closeOnBackdropClick\"\n (canceled)=\"close()\"\n (closed)=\"close()\"\n [suppressDismissBtn]=\"config.data?.suppressDismissBtn\"\n>\n <span header-label>{{ config.data?.title ?? '' | translate }}</span>\n <ng-container *ngTemplateOutlet=\"descTemplate\" />\n <div\n footer-actions-primary\n class=\"\n gds-display-flex\n gds-gap-2xs\n gds-mobile-flex-row-reverse\n gds-mobile-padding-block-start-2xs\n \"\n >\n <button\n gds-button\n class=\"\n gds-mobile-padding-inline-2xs\n gds-mobile-text-primary-primary\n \"\n [variant]=\"isMobile() ? 'invisible' : 'primary'\"\n (clicked)=\"confirm()\"\n >\n {{ config.data?.primaryLabel ?? '' | translate }}\n </button>\n @if (config.data?.secondaryLabel) {\n <button\n gds-button\n class=\"\n gds-mobile-padding-inline-2xs\n secondary-button\n \"\n [attr.secondary-text-variant]=\"secondaryTextVariant\"\n footer-actions-primary\n [variant]=\"isMobile() ? 'invisible' : 'default'\"\n (clicked)=\"close()\"\n >\n {{ config.data?.secondaryLabel ?? '' | translate }}\n </button>\n }\n </div>\n</dialog>\n\n<ng-template #defaultDescriptionTmpl>\n <span>{{ desc | translate }}</span>\n</ng-template>\n", styles: ["@layer design-system{:host[isActive=true]{outline:2px solid}:is(body[isMobile=true]) :host .dialog{--gds-dialog-base-gap: var(--gds-spacing-2xs)}@media(max-width:484px){:host .dialog{max-width:calc(100% - 2 * var(--gds-spacing-sm))}}:host .secondary-button{--color: var(--gds-palette-text-primary-primary)}:host .secondary-button[secondary-text-variant=error]{--color: var(--gds-palette-helper-error-inverse)}:host .secondary-button{color:var(--color)}}\n"] }]
7326
7516
  }], propDecorators: { defaultDescTmpl: [{ type: i0.ViewChild, args: ['defaultDescriptionTmpl', { isSignal: true }] }] } });
7327
7517
 
7328
7518
  class GdsUserPromptService {
@@ -7377,7 +7567,7 @@ class GdsHistoryComponent {
7377
7567
  menuTmpl = contentChild('menuTmpl', ...(ngDevMode ? [{ debugName: "menuTmpl" }] : /* istanbul ignore next */ []));
7378
7568
  menuPosition = CDK_MENU_CONNECTED_POSITIONS;
7379
7569
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsHistoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
7380
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsHistoryComponent, isStandalone: true, selector: "gds-history", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, connectorType: { classPropertyName: "connectorType", publicName: "connectorType", isSignal: true, isRequired: false, transformFunction: null }, suppressCloseBtn: { classPropertyName: "suppressCloseBtn", publicName: "suppressCloseBtn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", itemHovered: "itemHovered" }, queries: [{ propertyName: "contentTmpl", first: true, predicate: ["contentTmpl"], descendants: true, isSignal: true }, { propertyName: "menuTmpl", first: true, predicate: ["menuTmpl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"\n gds-align-items-center\n gds-display-flex\n gds-padding-sm\n\">\n <span class=\"\n gds-flex-grow-1\n gds-text-primary-primary\n gds-text-subtitle\n \">{{ title() }}</span>\n @if (!suppressCloseBtn()) {\n <button\n gds-icon-button\n variant=\"primary\"\n class=\"gds-background-none\"\n (clicked)=\"closed.emit()\"\n [attr.aria-label]=\"'Dismiss'\"\n >\n <gds-icon\n key=\"line-dismiss\"\n class=\"gds-icon-size-3xs\"\n />\n </button>\n }\n</div>\n@if (loading()) {\n <gds-spinner class=\"\n gds-margin-block-auto\n gds-margin-inline-auto\n \" />\n} @else {\n <div class=\"gds-scrollable-vertically\">\n <ol\n role=\"list\"\n class=\"gds-list-unstyled\"\n >\n @for (item of reversed(); track $index) {\n <li\n gds-timeline-item\n [connectorType]=\"connectorType()\"\n [start]=\"$last\"\n [end]=\"$first\"\n (mouseenter)=\"itemHovered.emit(item)\"\n (mouseleave)=\"itemHovered.emit(null)\"\n >\n <div\n tag\n class=\"\n gds-display-flex\n gds-justify-content-center\n \"\n >\n @if (item.badgeType === 'icon') {\n <gds-icon\n class=\"\n badge-icon\n gds-background-base\n gds-icon-primary\n gds-icon-size-3xs\n gds-padding-3xs\n gds-radius-2xl\n \"\n [key]=\"item.badgeData | gdsSvgicon\"\n />\n } @else {\n <span\n gds-badge\n [ngClass]=\"{\n 'gds-background-dark-strong gds-text-default-contrast': $first,\n 'gds-background-white': !$first\n }\"\n >{{ item.badgeData }}</span\n >\n }\n </div>\n <div class=\"\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n \">\n <div class=\"\n gds-align-items-start\n gds-display-flex\n gds-gap-3xs\n gds-margin-inline-end-3xs\n \">\n <div class=\"\n gds-display-flex\n gds-flex-column\n gds-flex-grow-1\n gds-gap-2xs\n item-content\n \">\n <gds-tooltip\n class=\"\n gds-flex-grow-1\n gds-text-body\n gds-text-primary\n \"\n [tooltip]=\"item.title\"\n onlyTextOverflow\n >\n {{ item.title }}\n </gds-tooltip>\n @for (label of item.labels; track $index) {\n <gds-tooltip\n class=\"\n gds-text-caption\n gds-text-secondary\n \"\n onlyTextOverflow\n [tooltip]=\"label\"\n >\n {{ label }}\n </gds-tooltip>\n }\n <ng-container *ngTemplateOutlet=\"contentTmpl() ?? null; context: { $implicit: item }\" />\n </div>\n @if (menuTmpl() && !$first) {\n <button\n gds-icon-button\n variant=\"primary\"\n class=\"\n gds-background-none\n gds-min-height-0\n \"\n [attr.ariaLabel]=\"'Menu'\"\n [cdkMenuTriggerFor]=\"menu\"\n [cdkMenuPosition]=\"menuPosition\"\n #trigger=\"cdkMenuTriggerFor\"\n >\n <gds-icon\n key=\"filled-menu-more\"\n class=\"gds-icon-size-2xs\"\n />\n </button>\n <ng-template #menu>\n <gds-dropdown (click)=\"trigger.close()\">\n <ng-container *ngTemplateOutlet=\"menuTmpl() ?? null; context: { $implicit: item }\" />\n </gds-dropdown>\n </ng-template>\n }\n </div>\n </div>\n </li>\n }\n </ol>\n </div>\n}\n", styles: [":host{display:flex;flex-direction:column;height:100%;background:var(--gds-palette-background-hover);overflow:hidden}:host .item-content{overflow:hidden}\n"], dependencies: [{ kind: "component", type: GdsBadgeComponent, selector: "span[gds-badge]", inputs: ["icon", "tooltip", "tooltipInteractive"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsTimelineItemComponent, selector: "li[gds-timeline-item]", inputs: ["end", "start", "connectorType"] }, { kind: "component", type: GdsSpinnerComponent, selector: "gds-spinner", inputs: ["trackWidth", "size"] }, { kind: "component", type: GdsTooltipComponent, selector: "gds-tooltip", inputs: ["tooltip", "onlyTextOverflow", "disabled", "tooltipPlacement", "tooltipInteractive", "useHostWidth", "open", "maxWidth", "appendTo"] }, { kind: "component", type: GdsDropdownComponent, selector: "gds-dropdown", inputs: ["triggerElement", "horizontal", "preventMobileStyling", "allowDefaultTabBehavior"] }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: GdsSvgIconPipe, name: "gdsSvgicon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
7570
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsHistoryComponent, isStandalone: true, selector: "gds-history", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, connectorType: { classPropertyName: "connectorType", publicName: "connectorType", isSignal: true, isRequired: false, transformFunction: null }, suppressCloseBtn: { classPropertyName: "suppressCloseBtn", publicName: "suppressCloseBtn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", itemHovered: "itemHovered" }, queries: [{ propertyName: "contentTmpl", first: true, predicate: ["contentTmpl"], descendants: true, isSignal: true }, { propertyName: "menuTmpl", first: true, predicate: ["menuTmpl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"\n gds-align-items-center\n gds-display-flex\n gds-padding-sm\n\">\n <span class=\"\n gds-flex-grow-1\n gds-text-primary-primary\n gds-text-subtitle\n \">{{ title() }}</span>\n @if (!suppressCloseBtn()) {\n <button\n gds-icon-button\n variant=\"primary\"\n class=\"gds-background-none\"\n (clicked)=\"closed.emit()\"\n [attr.aria-label]=\"'Dismiss'\"\n >\n <gds-icon\n key=\"line-dismiss\"\n class=\"gds-icon-size-3xs\"\n />\n </button>\n }\n</div>\n@if (loading()) {\n <gds-spinner class=\"\n gds-margin-block-auto\n gds-margin-inline-auto\n \" />\n} @else {\n <div class=\"gds-scrollable-vertically\">\n <ol\n role=\"list\"\n class=\"gds-list-unstyled\"\n >\n @for (item of reversed(); track $index) {\n <li\n gds-timeline-item\n [connectorType]=\"connectorType()\"\n [start]=\"$last\"\n [end]=\"$first\"\n (mouseenter)=\"itemHovered.emit(item)\"\n (mouseleave)=\"itemHovered.emit(null)\"\n >\n <div\n tag\n class=\"\n gds-display-flex\n gds-justify-content-center\n \"\n >\n @if (item.badgeType === 'icon') {\n <gds-icon\n class=\"\n badge-icon\n gds-background-base\n gds-icon-primary\n gds-icon-size-3xs\n gds-padding-3xs\n gds-radius-2xl\n \"\n [key]=\"item.badgeData | gdsSvgicon\"\n />\n } @else {\n <span\n gds-badge\n [ngClass]=\"{\n 'gds-background-dark-strong gds-text-default-contrast': $first,\n 'gds-background-white': !$first\n }\"\n >{{ item.badgeData }}</span\n >\n }\n </div>\n <div class=\"\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n \">\n <div class=\"\n gds-align-items-start\n gds-display-flex\n gds-gap-3xs\n gds-margin-inline-end-3xs\n \">\n <div class=\"\n gds-display-flex\n gds-flex-column\n gds-flex-grow-1\n gds-gap-2xs\n item-content\n \">\n <gds-tooltip\n class=\"\n gds-flex-grow-1\n gds-text-body\n gds-text-primary\n \"\n [tooltip]=\"item.title\"\n onlyTextOverflow\n >\n {{ item.title }}\n </gds-tooltip>\n @for (label of item.labels; track $index) {\n <gds-tooltip\n class=\"\n gds-text-caption\n gds-text-secondary\n \"\n onlyTextOverflow\n [tooltip]=\"label\"\n >\n {{ label }}\n </gds-tooltip>\n }\n <ng-container *ngTemplateOutlet=\"contentTmpl() ?? null; context: { $implicit: item }\" />\n </div>\n @if (menuTmpl() && !$first) {\n <button\n gds-icon-button\n variant=\"primary\"\n class=\"\n gds-background-none\n gds-min-height-0\n \"\n [attr.ariaLabel]=\"'Menu'\"\n [cdkMenuTriggerFor]=\"menu\"\n [cdkMenuPosition]=\"menuPosition\"\n #trigger=\"cdkMenuTriggerFor\"\n >\n <gds-icon\n key=\"filled-menu-more\"\n class=\"gds-icon-size-2xs\"\n />\n </button>\n <ng-template #menu>\n <gds-dropdown (click)=\"trigger.close()\">\n <ng-container *ngTemplateOutlet=\"menuTmpl() ?? null; context: { $implicit: item }\" />\n </gds-dropdown>\n </ng-template>\n }\n </div>\n </div>\n </li>\n }\n </ol>\n </div>\n}\n", styles: ["@layer design-system{:host{display:flex;flex-direction:column;height:100%;background:var(--gds-palette-background-hover);overflow:hidden}:host .item-content{overflow:hidden}}\n"], dependencies: [{ kind: "component", type: GdsBadgeComponent, selector: "span[gds-badge]", inputs: ["icon", "tooltip", "tooltipInteractive"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsTimelineItemComponent, selector: "li[gds-timeline-item]", inputs: ["end", "start", "connectorType"] }, { kind: "component", type: GdsSpinnerComponent, selector: "gds-spinner", inputs: ["trackWidth", "size"] }, { kind: "component", type: GdsTooltipComponent, selector: "gds-tooltip", inputs: ["tooltip", "onlyTextOverflow", "disabled", "tooltipPlacement", "tooltipInteractive", "useHostWidth", "open", "maxWidth", "appendTo"] }, { kind: "component", type: GdsDropdownComponent, selector: "gds-dropdown", inputs: ["triggerElement", "horizontal", "preventMobileStyling", "allowDefaultTabBehavior"] }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: GdsSvgIconPipe, name: "gdsSvgicon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
7381
7571
  }
7382
7572
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsHistoryComponent, decorators: [{
7383
7573
  type: Component,
@@ -7394,7 +7584,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
7394
7584
  NgTemplateOutlet,
7395
7585
  NgClass,
7396
7586
  GdsSvgIconPipe
7397
- ], template: "<div class=\"\n gds-align-items-center\n gds-display-flex\n gds-padding-sm\n\">\n <span class=\"\n gds-flex-grow-1\n gds-text-primary-primary\n gds-text-subtitle\n \">{{ title() }}</span>\n @if (!suppressCloseBtn()) {\n <button\n gds-icon-button\n variant=\"primary\"\n class=\"gds-background-none\"\n (clicked)=\"closed.emit()\"\n [attr.aria-label]=\"'Dismiss'\"\n >\n <gds-icon\n key=\"line-dismiss\"\n class=\"gds-icon-size-3xs\"\n />\n </button>\n }\n</div>\n@if (loading()) {\n <gds-spinner class=\"\n gds-margin-block-auto\n gds-margin-inline-auto\n \" />\n} @else {\n <div class=\"gds-scrollable-vertically\">\n <ol\n role=\"list\"\n class=\"gds-list-unstyled\"\n >\n @for (item of reversed(); track $index) {\n <li\n gds-timeline-item\n [connectorType]=\"connectorType()\"\n [start]=\"$last\"\n [end]=\"$first\"\n (mouseenter)=\"itemHovered.emit(item)\"\n (mouseleave)=\"itemHovered.emit(null)\"\n >\n <div\n tag\n class=\"\n gds-display-flex\n gds-justify-content-center\n \"\n >\n @if (item.badgeType === 'icon') {\n <gds-icon\n class=\"\n badge-icon\n gds-background-base\n gds-icon-primary\n gds-icon-size-3xs\n gds-padding-3xs\n gds-radius-2xl\n \"\n [key]=\"item.badgeData | gdsSvgicon\"\n />\n } @else {\n <span\n gds-badge\n [ngClass]=\"{\n 'gds-background-dark-strong gds-text-default-contrast': $first,\n 'gds-background-white': !$first\n }\"\n >{{ item.badgeData }}</span\n >\n }\n </div>\n <div class=\"\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n \">\n <div class=\"\n gds-align-items-start\n gds-display-flex\n gds-gap-3xs\n gds-margin-inline-end-3xs\n \">\n <div class=\"\n gds-display-flex\n gds-flex-column\n gds-flex-grow-1\n gds-gap-2xs\n item-content\n \">\n <gds-tooltip\n class=\"\n gds-flex-grow-1\n gds-text-body\n gds-text-primary\n \"\n [tooltip]=\"item.title\"\n onlyTextOverflow\n >\n {{ item.title }}\n </gds-tooltip>\n @for (label of item.labels; track $index) {\n <gds-tooltip\n class=\"\n gds-text-caption\n gds-text-secondary\n \"\n onlyTextOverflow\n [tooltip]=\"label\"\n >\n {{ label }}\n </gds-tooltip>\n }\n <ng-container *ngTemplateOutlet=\"contentTmpl() ?? null; context: { $implicit: item }\" />\n </div>\n @if (menuTmpl() && !$first) {\n <button\n gds-icon-button\n variant=\"primary\"\n class=\"\n gds-background-none\n gds-min-height-0\n \"\n [attr.ariaLabel]=\"'Menu'\"\n [cdkMenuTriggerFor]=\"menu\"\n [cdkMenuPosition]=\"menuPosition\"\n #trigger=\"cdkMenuTriggerFor\"\n >\n <gds-icon\n key=\"filled-menu-more\"\n class=\"gds-icon-size-2xs\"\n />\n </button>\n <ng-template #menu>\n <gds-dropdown (click)=\"trigger.close()\">\n <ng-container *ngTemplateOutlet=\"menuTmpl() ?? null; context: { $implicit: item }\" />\n </gds-dropdown>\n </ng-template>\n }\n </div>\n </div>\n </li>\n }\n </ol>\n </div>\n}\n", styles: [":host{display:flex;flex-direction:column;height:100%;background:var(--gds-palette-background-hover);overflow:hidden}:host .item-content{overflow:hidden}\n"] }]
7587
+ ], template: "<div class=\"\n gds-align-items-center\n gds-display-flex\n gds-padding-sm\n\">\n <span class=\"\n gds-flex-grow-1\n gds-text-primary-primary\n gds-text-subtitle\n \">{{ title() }}</span>\n @if (!suppressCloseBtn()) {\n <button\n gds-icon-button\n variant=\"primary\"\n class=\"gds-background-none\"\n (clicked)=\"closed.emit()\"\n [attr.aria-label]=\"'Dismiss'\"\n >\n <gds-icon\n key=\"line-dismiss\"\n class=\"gds-icon-size-3xs\"\n />\n </button>\n }\n</div>\n@if (loading()) {\n <gds-spinner class=\"\n gds-margin-block-auto\n gds-margin-inline-auto\n \" />\n} @else {\n <div class=\"gds-scrollable-vertically\">\n <ol\n role=\"list\"\n class=\"gds-list-unstyled\"\n >\n @for (item of reversed(); track $index) {\n <li\n gds-timeline-item\n [connectorType]=\"connectorType()\"\n [start]=\"$last\"\n [end]=\"$first\"\n (mouseenter)=\"itemHovered.emit(item)\"\n (mouseleave)=\"itemHovered.emit(null)\"\n >\n <div\n tag\n class=\"\n gds-display-flex\n gds-justify-content-center\n \"\n >\n @if (item.badgeType === 'icon') {\n <gds-icon\n class=\"\n badge-icon\n gds-background-base\n gds-icon-primary\n gds-icon-size-3xs\n gds-padding-3xs\n gds-radius-2xl\n \"\n [key]=\"item.badgeData | gdsSvgicon\"\n />\n } @else {\n <span\n gds-badge\n [ngClass]=\"{\n 'gds-background-dark-strong gds-text-default-contrast': $first,\n 'gds-background-white': !$first\n }\"\n >{{ item.badgeData }}</span\n >\n }\n </div>\n <div class=\"\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n \">\n <div class=\"\n gds-align-items-start\n gds-display-flex\n gds-gap-3xs\n gds-margin-inline-end-3xs\n \">\n <div class=\"\n gds-display-flex\n gds-flex-column\n gds-flex-grow-1\n gds-gap-2xs\n item-content\n \">\n <gds-tooltip\n class=\"\n gds-flex-grow-1\n gds-text-body\n gds-text-primary\n \"\n [tooltip]=\"item.title\"\n onlyTextOverflow\n >\n {{ item.title }}\n </gds-tooltip>\n @for (label of item.labels; track $index) {\n <gds-tooltip\n class=\"\n gds-text-caption\n gds-text-secondary\n \"\n onlyTextOverflow\n [tooltip]=\"label\"\n >\n {{ label }}\n </gds-tooltip>\n }\n <ng-container *ngTemplateOutlet=\"contentTmpl() ?? null; context: { $implicit: item }\" />\n </div>\n @if (menuTmpl() && !$first) {\n <button\n gds-icon-button\n variant=\"primary\"\n class=\"\n gds-background-none\n gds-min-height-0\n \"\n [attr.ariaLabel]=\"'Menu'\"\n [cdkMenuTriggerFor]=\"menu\"\n [cdkMenuPosition]=\"menuPosition\"\n #trigger=\"cdkMenuTriggerFor\"\n >\n <gds-icon\n key=\"filled-menu-more\"\n class=\"gds-icon-size-2xs\"\n />\n </button>\n <ng-template #menu>\n <gds-dropdown (click)=\"trigger.close()\">\n <ng-container *ngTemplateOutlet=\"menuTmpl() ?? null; context: { $implicit: item }\" />\n </gds-dropdown>\n </ng-template>\n }\n </div>\n </div>\n </li>\n }\n </ol>\n </div>\n}\n", styles: ["@layer design-system{:host{display:flex;flex-direction:column;height:100%;background:var(--gds-palette-background-hover);overflow:hidden}:host .item-content{overflow:hidden}}\n"] }]
7398
7588
  }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], connectorType: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectorType", required: false }] }], suppressCloseBtn: [{ type: i0.Input, args: [{ isSignal: true, alias: "suppressCloseBtn", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], itemHovered: [{ type: i0.Output, args: ["itemHovered"] }], contentTmpl: [{ type: i0.ContentChild, args: ['contentTmpl', { isSignal: true }] }], menuTmpl: [{ type: i0.ContentChild, args: ['menuTmpl', { isSignal: true }] }] } });
7399
7589
 
7400
7590
  class StylableButtonComponent {
@@ -7403,11 +7593,11 @@ class StylableButtonComponent {
7403
7593
  this.btn().nativeElement.focus();
7404
7594
  };
7405
7595
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StylableButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
7406
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: StylableButtonComponent, isStandalone: true, selector: "gds-stylable-button", viewQueries: [{ propertyName: "btn", first: true, predicate: ["btn"], descendants: true, isSignal: true }], ngImport: i0, template: "<button #btn>\n <ng-content />\n</button>\n", styles: ["@property --border{syntax: \"<width> <style> <color>\"; initial-value: none; inherits: false;}:host{--padding: var(--stylable-button-padding, 0);--padding-y: var(--stylable-button-padding-y, var(--padding));--padding-x: var(--stylable-button-padding-x, var(--padding));--border-width: var(--stylable-button-border-width, 0);--border-color: var(--stylable-button-border-color, transparent);--border: var(--border-width) solid var(--border-color)}:host button{display:inline-block;align-items:center;justify-content:center;appearance:none;cursor:pointer;text-align:start;font:inherit;font-size:var(--stylable-button-font-size);color:var(--stylable-button-color, inherit);width:var(--stylable-button-width, max-content);margin:0;padding-top:var(--padding-y);padding-bottom:var(--padding-y);padding-left:var(--padding-x);padding-right:var(--padding-x);background:var(--stylable-button-background, none);border:var(--stylable-button-border, var(--border));border-radius:var(--stylable-button-border-radius, 0)}:host button:focus-visible{outline:-webkit-focus-ring-color auto 1px}:host button:hover{background:var(--stylable-button-hover-background, var(--stylable-button-background, none))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
7596
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: StylableButtonComponent, isStandalone: true, selector: "gds-stylable-button", viewQueries: [{ propertyName: "btn", first: true, predicate: ["btn"], descendants: true, isSignal: true }], ngImport: i0, template: "<button #btn>\n <ng-content />\n</button>\n", styles: ["@layer design-system{@property --border{syntax: \"<width> <style> <color>\"; initial-value: none; inherits: false;}:host{--padding: var(--stylable-button-padding, 0);--padding-y: var(--stylable-button-padding-y, var(--padding));--padding-x: var(--stylable-button-padding-x, var(--padding));--border-width: var(--stylable-button-border-width, 0);--border-color: var(--stylable-button-border-color, transparent);--border: var(--border-width) solid var(--border-color)}:host button{display:inline-block;align-items:center;justify-content:center;appearance:none;cursor:pointer;text-align:start;font:inherit;font-size:var(--stylable-button-font-size);color:var(--stylable-button-color, inherit);width:var(--stylable-button-width, max-content);margin:0;padding-top:var(--padding-y);padding-bottom:var(--padding-y);padding-left:var(--padding-x);padding-right:var(--padding-x);background:var(--stylable-button-background, none);border:var(--stylable-button-border, var(--border));border-radius:var(--stylable-button-border-radius, 0)}:host button:focus-visible{outline:-webkit-focus-ring-color auto 1px}:host button:hover{background:var(--stylable-button-hover-background, var(--stylable-button-background, none))}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
7407
7597
  }
7408
7598
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StylableButtonComponent, decorators: [{
7409
7599
  type: Component,
7410
- args: [{ selector: 'gds-stylable-button', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button #btn>\n <ng-content />\n</button>\n", styles: ["@property --border{syntax: \"<width> <style> <color>\"; initial-value: none; inherits: false;}:host{--padding: var(--stylable-button-padding, 0);--padding-y: var(--stylable-button-padding-y, var(--padding));--padding-x: var(--stylable-button-padding-x, var(--padding));--border-width: var(--stylable-button-border-width, 0);--border-color: var(--stylable-button-border-color, transparent);--border: var(--border-width) solid var(--border-color)}:host button{display:inline-block;align-items:center;justify-content:center;appearance:none;cursor:pointer;text-align:start;font:inherit;font-size:var(--stylable-button-font-size);color:var(--stylable-button-color, inherit);width:var(--stylable-button-width, max-content);margin:0;padding-top:var(--padding-y);padding-bottom:var(--padding-y);padding-left:var(--padding-x);padding-right:var(--padding-x);background:var(--stylable-button-background, none);border:var(--stylable-button-border, var(--border));border-radius:var(--stylable-button-border-radius, 0)}:host button:focus-visible{outline:-webkit-focus-ring-color auto 1px}:host button:hover{background:var(--stylable-button-hover-background, var(--stylable-button-background, none))}\n"] }]
7600
+ args: [{ selector: 'gds-stylable-button', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button #btn>\n <ng-content />\n</button>\n", styles: ["@layer design-system{@property --border{syntax: \"<width> <style> <color>\"; initial-value: none; inherits: false;}:host{--padding: var(--stylable-button-padding, 0);--padding-y: var(--stylable-button-padding-y, var(--padding));--padding-x: var(--stylable-button-padding-x, var(--padding));--border-width: var(--stylable-button-border-width, 0);--border-color: var(--stylable-button-border-color, transparent);--border: var(--border-width) solid var(--border-color)}:host button{display:inline-block;align-items:center;justify-content:center;appearance:none;cursor:pointer;text-align:start;font:inherit;font-size:var(--stylable-button-font-size);color:var(--stylable-button-color, inherit);width:var(--stylable-button-width, max-content);margin:0;padding-top:var(--padding-y);padding-bottom:var(--padding-y);padding-left:var(--padding-x);padding-right:var(--padding-x);background:var(--stylable-button-background, none);border:var(--stylable-button-border, var(--border));border-radius:var(--stylable-button-border-radius, 0)}:host button:focus-visible{outline:-webkit-focus-ring-color auto 1px}:host button:hover{background:var(--stylable-button-hover-background, var(--stylable-button-background, none))}}\n"] }]
7411
7601
  }], propDecorators: { btn: [{ type: i0.ViewChild, args: ['btn', { isSignal: true }] }] } });
7412
7602
 
7413
7603
  class GdsChatExpandableListComponent {
@@ -7428,11 +7618,11 @@ class GdsChatExpandableListComponent {
7428
7618
  this.expanded.set(true);
7429
7619
  }
7430
7620
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsChatExpandableListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
7431
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsChatExpandableListComponent, isStandalone: true, selector: "dl[gds-chat-expandable-list]", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, displayLimit: { classPropertyName: "displayLimit", publicName: "displayLimit", isSignal: true, isRequired: false, transformFunction: null }, onlyEmitExpandedEvent: { classPropertyName: "onlyEmitExpandedEvent", publicName: "onlyEmitExpandedEvent", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandClicked: "expandClicked", expanded: "expandedChange" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"dt\">\n <dt class=\"gds-display-none\"></dt>\n</ng-content>\n@for (item of displayItems(); track $index) {\n <dd class=\"gds-expandable-list_item\">\n <ng-container *ngTemplateOutlet=\"itemTemplate(); context: { $implicit: item, index: $index }\" />\n @if ($last && showExpandAction()) {\n <gds-stylable-button\n (click)=\"expand()\"\n class=\"gds-expandable-list_action\"\n >\n <span\n gds-badge\n [attr.aria-label]=\"'Gds.ChatExpandableList.Expand.Aria.Label' | translate: { count: hiddenCount() }\"\n >\n +{{ hiddenCount() }}\n </span>\n </gds-stylable-button>\n }\n </dd>\n}\n<ng-content select=\"[trailing]\" />\n", styles: [":host{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gds-spacing-2xs)}:host .gds-expandable-list_item{display:flex;align-items:center;min-width:0}:host .gds-expandable-list_action{margin-inline-start:var(--gds-spacing-2xs)}\n"], dependencies: [{ kind: "component", type: GdsBadgeComponent, selector: "span[gds-badge]", inputs: ["icon", "tooltip", "tooltipInteractive"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StylableButtonComponent, selector: "gds-stylable-button" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
7621
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsChatExpandableListComponent, isStandalone: true, selector: "dl[gds-chat-expandable-list]", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, displayLimit: { classPropertyName: "displayLimit", publicName: "displayLimit", isSignal: true, isRequired: false, transformFunction: null }, onlyEmitExpandedEvent: { classPropertyName: "onlyEmitExpandedEvent", publicName: "onlyEmitExpandedEvent", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandClicked: "expandClicked", expanded: "expandedChange" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"dt\">\n <dt class=\"gds-display-none\"></dt>\n</ng-content>\n@for (item of displayItems(); track $index) {\n <dd class=\"gds-expandable-list_item\">\n <ng-container *ngTemplateOutlet=\"itemTemplate(); context: { $implicit: item, index: $index }\" />\n @if ($last && showExpandAction()) {\n <gds-stylable-button\n (click)=\"expand()\"\n class=\"gds-expandable-list_action\"\n >\n <span\n gds-badge\n [attr.aria-label]=\"'Gds.ChatExpandableList.Expand.Aria.Label' | translate: { count: hiddenCount() }\"\n >\n +{{ hiddenCount() }}\n </span>\n </gds-stylable-button>\n }\n </dd>\n}\n<ng-content select=\"[trailing]\" />\n", styles: ["@layer design-system{:host{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gds-spacing-2xs)}:host .gds-expandable-list_item{display:flex;align-items:center;min-width:0}:host .gds-expandable-list_action{margin-inline-start:var(--gds-spacing-2xs)}}\n"], dependencies: [{ kind: "component", type: GdsBadgeComponent, selector: "span[gds-badge]", inputs: ["icon", "tooltip", "tooltipInteractive"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StylableButtonComponent, selector: "gds-stylable-button" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
7432
7622
  }
7433
7623
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsChatExpandableListComponent, decorators: [{
7434
7624
  type: Component,
7435
- args: [{ selector: 'dl[gds-chat-expandable-list]', imports: [GdsBadgeComponent, NgTemplateOutlet, StylableButtonComponent, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"dt\">\n <dt class=\"gds-display-none\"></dt>\n</ng-content>\n@for (item of displayItems(); track $index) {\n <dd class=\"gds-expandable-list_item\">\n <ng-container *ngTemplateOutlet=\"itemTemplate(); context: { $implicit: item, index: $index }\" />\n @if ($last && showExpandAction()) {\n <gds-stylable-button\n (click)=\"expand()\"\n class=\"gds-expandable-list_action\"\n >\n <span\n gds-badge\n [attr.aria-label]=\"'Gds.ChatExpandableList.Expand.Aria.Label' | translate: { count: hiddenCount() }\"\n >\n +{{ hiddenCount() }}\n </span>\n </gds-stylable-button>\n }\n </dd>\n}\n<ng-content select=\"[trailing]\" />\n", styles: [":host{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gds-spacing-2xs)}:host .gds-expandable-list_item{display:flex;align-items:center;min-width:0}:host .gds-expandable-list_action{margin-inline-start:var(--gds-spacing-2xs)}\n"] }]
7625
+ args: [{ selector: 'dl[gds-chat-expandable-list]', imports: [GdsBadgeComponent, NgTemplateOutlet, StylableButtonComponent, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"dt\">\n <dt class=\"gds-display-none\"></dt>\n</ng-content>\n@for (item of displayItems(); track $index) {\n <dd class=\"gds-expandable-list_item\">\n <ng-container *ngTemplateOutlet=\"itemTemplate(); context: { $implicit: item, index: $index }\" />\n @if ($last && showExpandAction()) {\n <gds-stylable-button\n (click)=\"expand()\"\n class=\"gds-expandable-list_action\"\n >\n <span\n gds-badge\n [attr.aria-label]=\"'Gds.ChatExpandableList.Expand.Aria.Label' | translate: { count: hiddenCount() }\"\n >\n +{{ hiddenCount() }}\n </span>\n </gds-stylable-button>\n }\n </dd>\n}\n<ng-content select=\"[trailing]\" />\n", styles: ["@layer design-system{:host{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gds-spacing-2xs)}:host .gds-expandable-list_item{display:flex;align-items:center;min-width:0}:host .gds-expandable-list_action{margin-inline-start:var(--gds-spacing-2xs)}}\n"] }]
7436
7626
  }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], displayLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayLimit", required: false }] }], onlyEmitExpandedEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlyEmitExpandedEvent", required: false }] }], expandClicked: [{ type: i0.Output, args: ["expandClicked"] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
7437
7627
 
7438
7628
  class GdsMessageInputComponent {
@@ -7503,7 +7693,7 @@ class GdsMessageInputComponent {
7503
7693
  this.textarea().nativeElement.focus();
7504
7694
  }
7505
7695
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsMessageInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
7506
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsMessageInputComponent, isStandalone: true, selector: "gds-message-input", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, suppressClearOnSubmit: { classPropertyName: "suppressClearOnSubmit", publicName: "suppressClearOnSubmit", isSignal: true, isRequired: false, transformFunction: null }, enableIcon: { classPropertyName: "enableIcon", publicName: "enableIcon", isSignal: true, isRequired: false, transformFunction: null }, textareaAriaLabel: { classPropertyName: "textareaAriaLabel", publicName: "textareaAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, sendButtonAriaLabel: { classPropertyName: "sendButtonAriaLabel", publicName: "sendButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonAriaLabel: { classPropertyName: "cancelButtonAriaLabel", publicName: "cancelButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sent: "sent", canceled: "canceled", changed: "changed", value: "valueChange" }, host: { properties: { "attr.aria-disabled": "disabled()", "class.gds-background-disabled": "disabled()", "class.gds-padding-block-end-2xs": "hasChildren()" }, classAttribute: "\n gds-display-flex\n gds-align-items-center\n gds-border\n gds-border-color-default\n gds-radius-lg\n gds-padding-xs\n gds-padding-inline-2xs\n gds-background-white\n gds-position-relative\n gds-overflow-hidden\n\n gds-mobile-radius-sm\n gds-mobile-padding-0\n " }, viewQueries: [{ propertyName: "textarea", first: true, predicate: GdsNativeTextareaDirective, descendants: true, isSignal: true }, { propertyName: "slot", first: true, predicate: ["slot"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"\n gds-display-flex\n gds-flex-column\n gds-gap-xs\n gds-width-100-parent\n\">\n <gds-auto-growing-text-area\n class=\"\n gds-mobile-padding-block-2xs\n gds-mobile-text-input-mobile\n gds-padding-block-3xs\n gds-padding-inline-2xs\n gds-text-input\n gds-text-primary\n textarea\n \"\n [ngClass]=\"{ 'gds-padding-inline-end-md': !hasChildren() }\"\n [maxRows]=\"8\"\n >\n <textarea\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n rows=\"1\"\n (input)=\"handleChange($event)\"\n (keydown.enter)=\"handleSubmit($event)\"\n [attr.aria-label]=\"textareaAriaLabel() | translate\"\n >{{ value() }}</textarea\n >\n </gds-auto-growing-text-area>\n <div\n #slot\n class=\"gds-display-contents\"\n [ngClass]=\"{ 'gds-display-none': !hasChildren() }\"\n >\n <ng-content />\n </div>\n</div>\n<button\n gds-icon-button\n class=\"\n gds-align-self-end\n gds-background-none\n gds-margin-block-end-0\n gds-mobile-right-0\n gds-padding-0\n gds-right-2xs\n trailing-icon\n \"\n variant=\"primary\"\n [disabled]=\"disabled() && !enableIcon()\"\n (clicked)=\"handleSubmit()\"\n (mouseenter)=\"iconHoveringChanged($event)\"\n (mouseleave)=\"iconHoveringChanged($event)\"\n [attr.aria-label]=\"iconAriaLabel() | translate\"\n>\n <gds-icon\n [key]=\"icon()\"\n class=\"\n gds-icon-size-xs\n gds-mobile-icon-size-2xs\n \"\n />\n</button>\n", styles: [":host ::ng-deep input:focus,:host ::ng-deep textarea:focus{outline:none}:host:focus-within,:host.is-controlled{isolation:isolate;position:relative}:host:focus-within:before,:host.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--gds-palette-border-selected);border-radius:var(--gds-borderRadius-xs)}:is(body[isMobile=true]) :host .textarea{--placeholder-color: var(--gds-palette-text-default-placeholder)}:is(body[isMobile=true]) :host .trailing-icon:focus-visible{outline-offset:calc(var(--gds-spacing-3xs) * -1)}:host[aria-disabled=true]{cursor:not-allowed}:host .trailing-icon{border-color:transparent;box-sizing:content-box}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "component", type: GdsAutoGrowingTextareaComponent, selector: "gds-auto-growing-text-area", inputs: ["maxRows"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: GdsNativeTextareaDirective, selector: "textarea" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
7696
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsMessageInputComponent, isStandalone: true, selector: "gds-message-input", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, suppressClearOnSubmit: { classPropertyName: "suppressClearOnSubmit", publicName: "suppressClearOnSubmit", isSignal: true, isRequired: false, transformFunction: null }, enableIcon: { classPropertyName: "enableIcon", publicName: "enableIcon", isSignal: true, isRequired: false, transformFunction: null }, textareaAriaLabel: { classPropertyName: "textareaAriaLabel", publicName: "textareaAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, sendButtonAriaLabel: { classPropertyName: "sendButtonAriaLabel", publicName: "sendButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonAriaLabel: { classPropertyName: "cancelButtonAriaLabel", publicName: "cancelButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sent: "sent", canceled: "canceled", changed: "changed", value: "valueChange" }, host: { properties: { "attr.aria-disabled": "disabled()", "class.gds-background-disabled": "disabled()", "class.gds-padding-block-end-2xs": "hasChildren()" }, classAttribute: "\n gds-display-flex\n gds-align-items-center\n gds-border\n gds-border-color-default\n gds-radius-lg\n gds-padding-xs\n gds-padding-inline-2xs\n gds-background-white\n gds-position-relative\n gds-overflow-hidden\n\n gds-mobile-radius-sm\n gds-mobile-padding-0\n " }, viewQueries: [{ propertyName: "textarea", first: true, predicate: GdsNativeTextareaDirective, descendants: true, isSignal: true }, { propertyName: "slot", first: true, predicate: ["slot"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"\n gds-display-flex\n gds-flex-column\n gds-gap-xs\n gds-width-100-parent\n\">\n <gds-auto-growing-text-area\n class=\"\n gds-mobile-padding-block-2xs\n gds-mobile-text-input-mobile\n gds-padding-block-3xs\n gds-padding-inline-2xs\n gds-text-input\n gds-text-primary\n textarea\n \"\n [ngClass]=\"{ 'gds-padding-inline-end-md': !hasChildren() }\"\n [maxRows]=\"8\"\n >\n <textarea\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n rows=\"1\"\n (input)=\"handleChange($event)\"\n (keydown.enter)=\"handleSubmit($event)\"\n [attr.aria-label]=\"textareaAriaLabel() | translate\"\n >{{ value() }}</textarea\n >\n </gds-auto-growing-text-area>\n <div\n #slot\n class=\"gds-display-contents\"\n [ngClass]=\"{ 'gds-display-none': !hasChildren() }\"\n >\n <ng-content />\n </div>\n</div>\n<button\n gds-icon-button\n class=\"\n gds-align-self-end\n gds-background-none\n gds-margin-block-end-0\n gds-mobile-right-0\n gds-padding-0\n gds-right-2xs\n trailing-icon\n \"\n variant=\"primary\"\n [disabled]=\"disabled() && !enableIcon()\"\n (clicked)=\"handleSubmit()\"\n (mouseenter)=\"iconHoveringChanged($event)\"\n (mouseleave)=\"iconHoveringChanged($event)\"\n [attr.aria-label]=\"iconAriaLabel() | translate\"\n>\n <gds-icon\n [key]=\"icon()\"\n class=\"\n gds-icon-size-xs\n gds-mobile-icon-size-2xs\n \"\n />\n</button>\n", styles: ["@layer design-system{:host ::ng-deep input:focus,:host ::ng-deep textarea:focus{outline:none}:host:focus-within,:host.is-controlled{isolation:isolate;position:relative}:host:focus-within:before,:host.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--gds-palette-border-selected);border-radius:var(--gds-borderRadius-xs)}:is(body[isMobile=true]) :host .textarea{--placeholder-color: var(--gds-palette-text-default-placeholder)}:is(body[isMobile=true]) :host .trailing-icon:focus-visible{outline-offset:calc(var(--gds-spacing-3xs) * -1)}:host[aria-disabled=true]{cursor:not-allowed}:host .trailing-icon{border-color:transparent;box-sizing:content-box}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "component", type: GdsAutoGrowingTextareaComponent, selector: "gds-auto-growing-text-area", inputs: ["maxRows"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: GdsNativeTextareaDirective, selector: "textarea" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
7507
7697
  }
7508
7698
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsMessageInputComponent, decorators: [{
7509
7699
  type: Component,
@@ -7533,13 +7723,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
7533
7723
  `,
7534
7724
  '[class.gds-background-disabled]': 'disabled()',
7535
7725
  '[class.gds-padding-block-end-2xs]': 'hasChildren()'
7536
- }, template: "<div class=\"\n gds-display-flex\n gds-flex-column\n gds-gap-xs\n gds-width-100-parent\n\">\n <gds-auto-growing-text-area\n class=\"\n gds-mobile-padding-block-2xs\n gds-mobile-text-input-mobile\n gds-padding-block-3xs\n gds-padding-inline-2xs\n gds-text-input\n gds-text-primary\n textarea\n \"\n [ngClass]=\"{ 'gds-padding-inline-end-md': !hasChildren() }\"\n [maxRows]=\"8\"\n >\n <textarea\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n rows=\"1\"\n (input)=\"handleChange($event)\"\n (keydown.enter)=\"handleSubmit($event)\"\n [attr.aria-label]=\"textareaAriaLabel() | translate\"\n >{{ value() }}</textarea\n >\n </gds-auto-growing-text-area>\n <div\n #slot\n class=\"gds-display-contents\"\n [ngClass]=\"{ 'gds-display-none': !hasChildren() }\"\n >\n <ng-content />\n </div>\n</div>\n<button\n gds-icon-button\n class=\"\n gds-align-self-end\n gds-background-none\n gds-margin-block-end-0\n gds-mobile-right-0\n gds-padding-0\n gds-right-2xs\n trailing-icon\n \"\n variant=\"primary\"\n [disabled]=\"disabled() && !enableIcon()\"\n (clicked)=\"handleSubmit()\"\n (mouseenter)=\"iconHoveringChanged($event)\"\n (mouseleave)=\"iconHoveringChanged($event)\"\n [attr.aria-label]=\"iconAriaLabel() | translate\"\n>\n <gds-icon\n [key]=\"icon()\"\n class=\"\n gds-icon-size-xs\n gds-mobile-icon-size-2xs\n \"\n />\n</button>\n", styles: [":host ::ng-deep input:focus,:host ::ng-deep textarea:focus{outline:none}:host:focus-within,:host.is-controlled{isolation:isolate;position:relative}:host:focus-within:before,:host.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--gds-palette-border-selected);border-radius:var(--gds-borderRadius-xs)}:is(body[isMobile=true]) :host .textarea{--placeholder-color: var(--gds-palette-text-default-placeholder)}:is(body[isMobile=true]) :host .trailing-icon:focus-visible{outline-offset:calc(var(--gds-spacing-3xs) * -1)}:host[aria-disabled=true]{cursor:not-allowed}:host .trailing-icon{border-color:transparent;box-sizing:content-box}\n"] }]
7726
+ }, template: "<div class=\"\n gds-display-flex\n gds-flex-column\n gds-gap-xs\n gds-width-100-parent\n\">\n <gds-auto-growing-text-area\n class=\"\n gds-mobile-padding-block-2xs\n gds-mobile-text-input-mobile\n gds-padding-block-3xs\n gds-padding-inline-2xs\n gds-text-input\n gds-text-primary\n textarea\n \"\n [ngClass]=\"{ 'gds-padding-inline-end-md': !hasChildren() }\"\n [maxRows]=\"8\"\n >\n <textarea\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n rows=\"1\"\n (input)=\"handleChange($event)\"\n (keydown.enter)=\"handleSubmit($event)\"\n [attr.aria-label]=\"textareaAriaLabel() | translate\"\n >{{ value() }}</textarea\n >\n </gds-auto-growing-text-area>\n <div\n #slot\n class=\"gds-display-contents\"\n [ngClass]=\"{ 'gds-display-none': !hasChildren() }\"\n >\n <ng-content />\n </div>\n</div>\n<button\n gds-icon-button\n class=\"\n gds-align-self-end\n gds-background-none\n gds-margin-block-end-0\n gds-mobile-right-0\n gds-padding-0\n gds-right-2xs\n trailing-icon\n \"\n variant=\"primary\"\n [disabled]=\"disabled() && !enableIcon()\"\n (clicked)=\"handleSubmit()\"\n (mouseenter)=\"iconHoveringChanged($event)\"\n (mouseleave)=\"iconHoveringChanged($event)\"\n [attr.aria-label]=\"iconAriaLabel() | translate\"\n>\n <gds-icon\n [key]=\"icon()\"\n class=\"\n gds-icon-size-xs\n gds-mobile-icon-size-2xs\n \"\n />\n</button>\n", styles: ["@layer design-system{:host ::ng-deep input:focus,:host ::ng-deep textarea:focus{outline:none}:host:focus-within,:host.is-controlled{isolation:isolate;position:relative}:host:focus-within:before,:host.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--gds-palette-border-selected);border-radius:var(--gds-borderRadius-xs)}:is(body[isMobile=true]) :host .textarea{--placeholder-color: var(--gds-palette-text-default-placeholder)}:is(body[isMobile=true]) :host .trailing-icon:focus-visible{outline-offset:calc(var(--gds-spacing-3xs) * -1)}:host[aria-disabled=true]{cursor:not-allowed}:host .trailing-icon{border-color:transparent;box-sizing:content-box}}\n"] }]
7537
7727
  }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], suppressClearOnSubmit: [{ type: i0.Input, args: [{ isSignal: true, alias: "suppressClearOnSubmit", required: false }] }], enableIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableIcon", required: false }] }], textareaAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "textareaAriaLabel", required: false }] }], sendButtonAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sendButtonAriaLabel", required: false }] }], cancelButtonAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButtonAriaLabel", required: false }] }], sent: [{ type: i0.Output, args: ["sent"] }], canceled: [{ type: i0.Output, args: ["canceled"] }], changed: [{ type: i0.Output, args: ["changed"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], textarea: [{ type: i0.ViewChild, args: [i0.forwardRef(() => GdsNativeTextareaDirective), { isSignal: true }] }], slot: [{ type: i0.ViewChild, args: ['slot', { isSignal: true }] }] } });
7538
7728
 
7539
7729
  class GdsChatPromptComponent {
7540
7730
  label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
7541
7731
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsChatPromptComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
7542
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: GdsChatPromptComponent, isStandalone: true, selector: "gds-chat-prompt", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "\n gds-display-block\n gds-line-height-lg\n gds-mobile-padding-sm\n gds-padding-xs\n gds-radius-bottom-right-0\n gds-radius-lg\n gds-text-primary\n gds-width-fit-content\n " }, ngImport: i0, template: "{{ label() }}\n", styles: [":host{font:var(--gds-text-body-shorthand);font-size:.938rem;white-space:pre-wrap;word-wrap:break-word;background:var(--gds-palette-background-chat);-webkit-user-select:text;user-select:text}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
7732
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: GdsChatPromptComponent, isStandalone: true, selector: "gds-chat-prompt", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "\n gds-display-block\n gds-line-height-lg\n gds-mobile-padding-sm\n gds-padding-xs\n gds-radius-bottom-right-0\n gds-radius-lg\n gds-text-primary\n gds-width-fit-content\n " }, ngImport: i0, template: "{{ label() }}\n", styles: ["@layer design-system{:host{font:var(--gds-text-body-shorthand);font-size:.938rem;white-space:pre-wrap;word-wrap:break-word;background:var(--gds-palette-background-chat);-webkit-user-select:text;user-select:text}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
7543
7733
  }
7544
7734
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsChatPromptComponent, decorators: [{
7545
7735
  type: Component,
@@ -7554,18 +7744,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
7554
7744
  gds-text-primary
7555
7745
  gds-width-fit-content
7556
7746
  `
7557
- }, template: "{{ label() }}\n", styles: [":host{font:var(--gds-text-body-shorthand);font-size:.938rem;white-space:pre-wrap;word-wrap:break-word;background:var(--gds-palette-background-chat);-webkit-user-select:text;user-select:text}\n"] }]
7747
+ }, template: "{{ label() }}\n", styles: ["@layer design-system{:host{font:var(--gds-text-body-shorthand);font-size:.938rem;white-space:pre-wrap;word-wrap:break-word;background:var(--gds-palette-background-chat);-webkit-user-select:text;user-select:text}}\n"] }]
7558
7748
  }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }] } });
7559
7749
 
7560
7750
  class GdsReferenceComponent {
7561
7751
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsReferenceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
7562
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: GdsReferenceComponent, isStandalone: true, selector: "gds-reference", host: { classAttribute: "gds-radius-sm gds-display-inline-flex gds-text-primary" }, ngImport: i0, template: "<ng-content select=\"[gds-reference-link]\">\n <div class=\"gds-reference_body\">\n <ng-content />\n </div>\n</ng-content>\n<ng-content select=\"[trailing-action]\" />\n", styles: [":host{--gds-reference-background-color: var(--gds-palette-background-white)}:is(body[isMobile=true]) :host{--gds-reference-background-color: var(--gds-palette-background-secondary-offWhite)}:host:has([gds-reference-link]:focus-visible){outline:2px solid black;outline-offset:2px}:host:has([gds-reference-link][aria-disabled=false][readonly=false]){cursor:pointer}:host:has([gds-reference-link][aria-disabled=false][readonly=false]):hover{background-color:var(--gds-palette-background-hover)}:host:has([gds-reference-link][aria-disabled=true]){background-color:var(--gds-palette-background-disabled);cursor:not-allowed;color:var(--gds-palette-text-default-disabled)}:host:has([trailing-action]){padding-inline-end:var(--gds-spacing-2xs)}:host{align-items:center;justify-content:space-between;border:var(--gds-border-default-shorthand);background-color:var(--gds-reference-background-color);font:var(--gds-text-caption-shorthand);outline:none;cursor:default}:host::-moz-focus-inner{border:0}:host .gds-reference_body{flex-grow:1;display:inline-grid;grid-template-columns:min-content minmax(0px,1fr);grid-template-areas:\"leading-visual body\";align-items:center}:host .gds-reference_body ::ng-deep>*{grid-area:body}:host .gds-reference_body ::ng-deep>[leading-visual]{grid-area:leading-visual}:host .gds-reference_body:has([leading-visual]){gap:var(--gap, var(--gds-spacing-2xs))}:host .gds-reference_body{padding:var(--gds-spacing-2xs);word-break:break-word}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
7752
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: GdsReferenceComponent, isStandalone: true, selector: "gds-reference", host: { classAttribute: "gds-radius-sm gds-display-inline-flex gds-text-primary" }, ngImport: i0, template: "<ng-content select=\"[gds-reference-link]\">\n <div class=\"gds-reference_body\">\n <ng-content />\n </div>\n</ng-content>\n<ng-content select=\"[trailing-action]\" />\n", styles: ["@layer design-system{:host{--gds-reference-background-color: var(--gds-palette-background-white)}:is(body[isMobile=true]) :host{--gds-reference-background-color: var(--gds-palette-background-secondary-offWhite)}:host:has([gds-reference-link]:focus-visible){outline:2px solid black;outline-offset:2px}:host:has([gds-reference-link][aria-disabled=false][readonly=false]){cursor:pointer}:host:has([gds-reference-link][aria-disabled=false][readonly=false]):hover{background-color:var(--gds-palette-background-hover)}:host:has([gds-reference-link][aria-disabled=true]){background-color:var(--gds-palette-background-disabled);cursor:not-allowed;color:var(--gds-palette-text-default-disabled)}:host:has([trailing-action]){padding-inline-end:var(--gds-spacing-2xs)}:host{align-items:center;justify-content:space-between;border:var(--gds-border-default-shorthand);background-color:var(--gds-reference-background-color);font:var(--gds-text-caption-shorthand);outline:none;cursor:default}:host::-moz-focus-inner{border:0}:host .gds-reference_body{flex-grow:1;display:inline-grid;grid-template-columns:min-content minmax(0px,1fr);grid-template-areas:\"leading-visual body\";align-items:center}:host .gds-reference_body ::ng-deep>*{grid-area:body}:host .gds-reference_body ::ng-deep>[leading-visual]{grid-area:leading-visual}:host .gds-reference_body:has([leading-visual]){gap:var(--gap, var(--gds-spacing-2xs))}:host .gds-reference_body{padding:var(--gds-spacing-2xs);word-break:break-word}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
7563
7753
  }
7564
7754
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsReferenceComponent, decorators: [{
7565
7755
  type: Component,
7566
7756
  args: [{ standalone: true, selector: 'gds-reference', changeDetection: ChangeDetectionStrategy.OnPush, host: {
7567
7757
  class: 'gds-radius-sm gds-display-inline-flex gds-text-primary'
7568
- }, template: "<ng-content select=\"[gds-reference-link]\">\n <div class=\"gds-reference_body\">\n <ng-content />\n </div>\n</ng-content>\n<ng-content select=\"[trailing-action]\" />\n", styles: [":host{--gds-reference-background-color: var(--gds-palette-background-white)}:is(body[isMobile=true]) :host{--gds-reference-background-color: var(--gds-palette-background-secondary-offWhite)}:host:has([gds-reference-link]:focus-visible){outline:2px solid black;outline-offset:2px}:host:has([gds-reference-link][aria-disabled=false][readonly=false]){cursor:pointer}:host:has([gds-reference-link][aria-disabled=false][readonly=false]):hover{background-color:var(--gds-palette-background-hover)}:host:has([gds-reference-link][aria-disabled=true]){background-color:var(--gds-palette-background-disabled);cursor:not-allowed;color:var(--gds-palette-text-default-disabled)}:host:has([trailing-action]){padding-inline-end:var(--gds-spacing-2xs)}:host{align-items:center;justify-content:space-between;border:var(--gds-border-default-shorthand);background-color:var(--gds-reference-background-color);font:var(--gds-text-caption-shorthand);outline:none;cursor:default}:host::-moz-focus-inner{border:0}:host .gds-reference_body{flex-grow:1;display:inline-grid;grid-template-columns:min-content minmax(0px,1fr);grid-template-areas:\"leading-visual body\";align-items:center}:host .gds-reference_body ::ng-deep>*{grid-area:body}:host .gds-reference_body ::ng-deep>[leading-visual]{grid-area:leading-visual}:host .gds-reference_body:has([leading-visual]){gap:var(--gap, var(--gds-spacing-2xs))}:host .gds-reference_body{padding:var(--gds-spacing-2xs);word-break:break-word}\n"] }]
7758
+ }, template: "<ng-content select=\"[gds-reference-link]\">\n <div class=\"gds-reference_body\">\n <ng-content />\n </div>\n</ng-content>\n<ng-content select=\"[trailing-action]\" />\n", styles: ["@layer design-system{:host{--gds-reference-background-color: var(--gds-palette-background-white)}:is(body[isMobile=true]) :host{--gds-reference-background-color: var(--gds-palette-background-secondary-offWhite)}:host:has([gds-reference-link]:focus-visible){outline:2px solid black;outline-offset:2px}:host:has([gds-reference-link][aria-disabled=false][readonly=false]){cursor:pointer}:host:has([gds-reference-link][aria-disabled=false][readonly=false]):hover{background-color:var(--gds-palette-background-hover)}:host:has([gds-reference-link][aria-disabled=true]){background-color:var(--gds-palette-background-disabled);cursor:not-allowed;color:var(--gds-palette-text-default-disabled)}:host:has([trailing-action]){padding-inline-end:var(--gds-spacing-2xs)}:host{align-items:center;justify-content:space-between;border:var(--gds-border-default-shorthand);background-color:var(--gds-reference-background-color);font:var(--gds-text-caption-shorthand);outline:none;cursor:default}:host::-moz-focus-inner{border:0}:host .gds-reference_body{flex-grow:1;display:inline-grid;grid-template-columns:min-content minmax(0px,1fr);grid-template-areas:\"leading-visual body\";align-items:center}:host .gds-reference_body ::ng-deep>*{grid-area:body}:host .gds-reference_body ::ng-deep>[leading-visual]{grid-area:leading-visual}:host .gds-reference_body:has([leading-visual]){gap:var(--gap, var(--gds-spacing-2xs))}:host .gds-reference_body{padding:var(--gds-spacing-2xs);word-break:break-word}}\n"] }]
7569
7759
  }] });
7570
7760
 
7571
7761
  class GdsReferenceLinkComponent {
@@ -7589,7 +7779,7 @@ class GdsReferenceLinkComponent {
7589
7779
  this.rightClicked.emit(event);
7590
7780
  }
7591
7781
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsReferenceLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
7592
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: GdsReferenceLinkComponent, isStandalone: true, selector: "a[gds-reference-link]", inputs: { wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", rightClicked: "rightClicked" }, host: { attributes: { "role": "link", "tabindex": "0" }, listeners: { "click": "onClick($event)", "keydown.enter": "onClick($event)", "contextmenu": "onRightClick($event)" }, properties: { "attr.aria-disabled": "disabled()", "attr.readonly": "readonly()" }, classAttribute: "gds-align-content-center gds-radius-top-left-sm gds-radius-bottom-left-sm" }, ngImport: i0, template: "<ng-content select=\"[leading-visual]\" />\n<div\n [class.gds-truncate]=\"!wrap()\"\n tp\n tpUseTextContent\n tpVariation=\"light\"\n tpAppendTo=\"parent\"\n [tpOnlyTextOverflow]=\"true\"\n>\n <ng-content />\n</div>\n", styles: [":host{--padding: var(--gds-spacing-2xs);flex-grow:1;display:inline-grid;grid-template-columns:min-content minmax(0px,1fr);grid-template-areas:\"leading-visual body\";align-items:center}:host ::ng-deep>*{grid-area:body}:host ::ng-deep>[leading-visual]{grid-area:leading-visual}:host:has([leading-visual]){gap:var(--gap, var(--gds-spacing-2xs))}:host{padding:var(--padding);outline:none;text-decoration:none}:host:hover{text-decoration:none}:host{-webkit-user-select:none;user-select:none;color:inherit;cursor:inherit}\n"], dependencies: [{ kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
7782
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: GdsReferenceLinkComponent, isStandalone: true, selector: "a[gds-reference-link]", inputs: { wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", rightClicked: "rightClicked" }, host: { attributes: { "role": "link", "tabindex": "0" }, listeners: { "click": "onClick($event)", "keydown.enter": "onClick($event)", "contextmenu": "onRightClick($event)" }, properties: { "attr.aria-disabled": "disabled()", "attr.readonly": "readonly()" }, classAttribute: "gds-align-content-center gds-radius-top-left-sm gds-radius-bottom-left-sm" }, ngImport: i0, template: "<ng-content select=\"[leading-visual]\" />\n<div\n [class.gds-truncate]=\"!wrap()\"\n tp\n tpUseTextContent\n tpVariation=\"light\"\n tpAppendTo=\"parent\"\n [tpOnlyTextOverflow]=\"true\"\n>\n <ng-content />\n</div>\n", styles: ["@layer design-system{:host{--padding: var(--gds-spacing-2xs);flex-grow:1;display:inline-grid;grid-template-columns:min-content minmax(0px,1fr);grid-template-areas:\"leading-visual body\";align-items:center}:host ::ng-deep>*{grid-area:body}:host ::ng-deep>[leading-visual]{grid-area:leading-visual}:host:has([leading-visual]){gap:var(--gap, var(--gds-spacing-2xs))}:host{padding:var(--padding);outline:none;text-decoration:none}:host:hover{text-decoration:none}:host{-webkit-user-select:none;user-select:none;color:inherit;cursor:inherit}}\n"], dependencies: [{ kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
7593
7783
  }
7594
7784
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsReferenceLinkComponent, decorators: [{
7595
7785
  type: Component,
@@ -7606,18 +7796,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
7606
7796
  '(keydown.enter)': 'onClick($event)',
7607
7797
  '(contextmenu)': 'onRightClick($event)',
7608
7798
  class: 'gds-align-content-center gds-radius-top-left-sm gds-radius-bottom-left-sm'
7609
- }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"[leading-visual]\" />\n<div\n [class.gds-truncate]=\"!wrap()\"\n tp\n tpUseTextContent\n tpVariation=\"light\"\n tpAppendTo=\"parent\"\n [tpOnlyTextOverflow]=\"true\"\n>\n <ng-content />\n</div>\n", styles: [":host{--padding: var(--gds-spacing-2xs);flex-grow:1;display:inline-grid;grid-template-columns:min-content minmax(0px,1fr);grid-template-areas:\"leading-visual body\";align-items:center}:host ::ng-deep>*{grid-area:body}:host ::ng-deep>[leading-visual]{grid-area:leading-visual}:host:has([leading-visual]){gap:var(--gap, var(--gds-spacing-2xs))}:host{padding:var(--padding);outline:none;text-decoration:none}:host:hover{text-decoration:none}:host{-webkit-user-select:none;user-select:none;color:inherit;cursor:inherit}\n"] }]
7799
+ }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"[leading-visual]\" />\n<div\n [class.gds-truncate]=\"!wrap()\"\n tp\n tpUseTextContent\n tpVariation=\"light\"\n tpAppendTo=\"parent\"\n [tpOnlyTextOverflow]=\"true\"\n>\n <ng-content />\n</div>\n", styles: ["@layer design-system{:host{--padding: var(--gds-spacing-2xs);flex-grow:1;display:inline-grid;grid-template-columns:min-content minmax(0px,1fr);grid-template-areas:\"leading-visual body\";align-items:center}:host ::ng-deep>*{grid-area:body}:host ::ng-deep>[leading-visual]{grid-area:leading-visual}:host:has([leading-visual]){gap:var(--gap, var(--gds-spacing-2xs))}:host{padding:var(--padding);outline:none;text-decoration:none}:host:hover{text-decoration:none}:host{-webkit-user-select:none;user-select:none;color:inherit;cursor:inherit}}\n"] }]
7610
7800
  }], propDecorators: { wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], rightClicked: [{ type: i0.Output, args: ["rightClicked"] }] } });
7611
7801
 
7612
7802
  class GdsResponseComponent {
7613
7803
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsResponseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
7614
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: GdsResponseComponent, isStandalone: true, selector: "gds-response", host: { classAttribute: "gds-display-flex gds-gap-sm gds-padding-block-sm gds-width-100-parent gds-align-items-baseline gds-text-input gds-text-primary" }, ngImport: i0, template: "<div class=\"\n gds-position-relative\n icon-container\n\">\n <gds-icon\n class=\"\n gds-border\n gds-height-fit-content\n gds-icon-primary\n gds-icon-size-sm\n gds-left-50\n gds-position-absolute\n gds-radius-pill\n gds-top-50\n gds-translate-middle\n \"\n key=\"line-sparkle\"\n />\n</div>\n\n<ng-content />\n", styles: [":host .icon-container{min-height:15px;min-width:26px}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
7804
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: GdsResponseComponent, isStandalone: true, selector: "gds-response", host: { classAttribute: "gds-display-flex gds-gap-sm gds-padding-block-sm gds-width-100-parent gds-align-items-baseline gds-text-input gds-text-primary" }, ngImport: i0, template: "<div class=\"\n gds-position-relative\n icon-container\n\">\n <gds-icon\n class=\"\n gds-border\n gds-height-fit-content\n gds-icon-primary\n gds-icon-size-sm\n gds-left-50\n gds-position-absolute\n gds-radius-pill\n gds-top-50\n gds-translate-middle\n \"\n key=\"line-sparkle\"\n />\n</div>\n\n<ng-content />\n", styles: ["@layer design-system{:host .icon-container{min-height:15px;min-width:26px}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
7615
7805
  }
7616
7806
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsResponseComponent, decorators: [{
7617
7807
  type: Component,
7618
7808
  args: [{ selector: 'gds-response', changeDetection: ChangeDetectionStrategy.OnPush, imports: [GdsIconComponent], host: {
7619
7809
  class: 'gds-display-flex gds-gap-sm gds-padding-block-sm gds-width-100-parent gds-align-items-baseline gds-text-input gds-text-primary'
7620
- }, template: "<div class=\"\n gds-position-relative\n icon-container\n\">\n <gds-icon\n class=\"\n gds-border\n gds-height-fit-content\n gds-icon-primary\n gds-icon-size-sm\n gds-left-50\n gds-position-absolute\n gds-radius-pill\n gds-top-50\n gds-translate-middle\n \"\n key=\"line-sparkle\"\n />\n</div>\n\n<ng-content />\n", styles: [":host .icon-container{min-height:15px;min-width:26px}\n"] }]
7810
+ }, template: "<div class=\"\n gds-position-relative\n icon-container\n\">\n <gds-icon\n class=\"\n gds-border\n gds-height-fit-content\n gds-icon-primary\n gds-icon-size-sm\n gds-left-50\n gds-position-absolute\n gds-radius-pill\n gds-top-50\n gds-translate-middle\n \"\n key=\"line-sparkle\"\n />\n</div>\n\n<ng-content />\n", styles: ["@layer design-system{:host .icon-container{min-height:15px;min-width:26px}}\n"] }]
7621
7811
  }] });
7622
7812
 
7623
7813
  class GdsChatSuggestionComponent {
@@ -7629,7 +7819,7 @@ class GdsChatSuggestionComponent {
7629
7819
  this.clicked.emit();
7630
7820
  }
7631
7821
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsChatSuggestionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
7632
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: GdsChatSuggestionComponent, isStandalone: true, selector: "button[gds-chat-suggestion]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { attributes: { "type": "button" }, listeners: { "click": "handleClick($event)" }, properties: { "attr.disabled": "disabled() ? \"\" : undefined" }, classAttribute: "gds-radius-sm gds-mobile-radius-md" }, ngImport: i0, template: "<ng-content />\n", styles: [":host{padding:var(--gds-spacing-2xs);font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-primary-primary);text-align:start;-webkit-user-select:none;user-select:none;border-width:1px;border-style:solid;border-color:var(--gds-palette-border-primary);background-color:var(--gds-palette-background-white)}:is(body[isMobile=true]) :host{padding:var(--gds-spacing-sm);box-shadow:var(--gds-shadow-element);color:var(--gds-palette-text-default-primary)}:host:disabled{color:var(--gds-palette-text-default-disabled);border-color:var(--gds-neutral-100);background-color:var(--gds-palette-background-disabled);cursor:not-allowed}:host:not(:disabled):hover{background-color:var(--gds-palette-background-hover)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
7822
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: GdsChatSuggestionComponent, isStandalone: true, selector: "button[gds-chat-suggestion]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { attributes: { "type": "button" }, listeners: { "click": "handleClick($event)" }, properties: { "attr.disabled": "disabled() ? \"\" : undefined" }, classAttribute: "gds-radius-sm gds-mobile-radius-md" }, ngImport: i0, template: "<ng-content />\n", styles: ["@layer design-system{:host{padding:var(--gds-spacing-2xs);font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-primary-primary);text-align:start;-webkit-user-select:none;user-select:none;border-width:1px;border-style:solid;border-color:var(--gds-palette-border-primary);background-color:var(--gds-palette-background-white)}:is(body[isMobile=true]) :host{padding:var(--gds-spacing-sm);box-shadow:var(--gds-shadow-element);color:var(--gds-palette-text-default-primary)}:host:disabled{color:var(--gds-palette-text-default-disabled);border-color:var(--gds-neutral-100);background-color:var(--gds-palette-background-disabled);cursor:not-allowed}:host:not(:disabled):hover{background-color:var(--gds-palette-background-hover)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
7633
7823
  }
7634
7824
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsChatSuggestionComponent, decorators: [{
7635
7825
  type: Component,
@@ -7641,7 +7831,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
7641
7831
  type: 'button',
7642
7832
  '[attr.disabled]': 'disabled() ? "" : undefined',
7643
7833
  '(click)': 'handleClick($event)'
7644
- }, template: "<ng-content />\n", styles: [":host{padding:var(--gds-spacing-2xs);font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-primary-primary);text-align:start;-webkit-user-select:none;user-select:none;border-width:1px;border-style:solid;border-color:var(--gds-palette-border-primary);background-color:var(--gds-palette-background-white)}:is(body[isMobile=true]) :host{padding:var(--gds-spacing-sm);box-shadow:var(--gds-shadow-element);color:var(--gds-palette-text-default-primary)}:host:disabled{color:var(--gds-palette-text-default-disabled);border-color:var(--gds-neutral-100);background-color:var(--gds-palette-background-disabled);cursor:not-allowed}:host:not(:disabled):hover{background-color:var(--gds-palette-background-hover)}\n"] }]
7834
+ }, template: "<ng-content />\n", styles: ["@layer design-system{:host{padding:var(--gds-spacing-2xs);font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-primary-primary);text-align:start;-webkit-user-select:none;user-select:none;border-width:1px;border-style:solid;border-color:var(--gds-palette-border-primary);background-color:var(--gds-palette-background-white)}:is(body[isMobile=true]) :host{padding:var(--gds-spacing-sm);box-shadow:var(--gds-shadow-element);color:var(--gds-palette-text-default-primary)}:host:disabled{color:var(--gds-palette-text-default-disabled);border-color:var(--gds-neutral-100);background-color:var(--gds-palette-background-disabled);cursor:not-allowed}:host:not(:disabled):hover{background-color:var(--gds-palette-background-hover)}}\n"] }]
7645
7835
  }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
7646
7836
 
7647
7837
  class GdsAutoRoundCurrencyDirective {
@@ -7846,9 +8036,61 @@ const provideToaster = (customOptions = {}) => {
7846
8036
  return provideToastr({ ...defaultOptions, ...customOptions });
7847
8037
  };
7848
8038
 
8039
+ const OPERATING_SYSTEM = {
8040
+ windows: 'windows',
8041
+ mac: 'mac',
8042
+ other: 'other'
8043
+ };
8044
+ const BROWSER = {
8045
+ chrome: 'chrome',
8046
+ firefox: 'firefox',
8047
+ safari: 'safari',
8048
+ edge: 'edge',
8049
+ opera: 'opera',
8050
+ // applewebkit is utilized by Mac Word add-ins
8051
+ applewebkit: 'applewebkit',
8052
+ other: 'other'
8053
+ };
8054
+
8055
+ // NOTE: Duplicated from libs/utils/src/functions/navigator-detection.functions.ts — keep in sync.
8056
+ const getOperatingSystem = () => {
8057
+ const userAgent = navigator.userAgent;
8058
+ if (userAgent.includes('Win')) {
8059
+ return OPERATING_SYSTEM.windows;
8060
+ }
8061
+ else if (userAgent.includes('Mac')) {
8062
+ return OPERATING_SYSTEM.mac;
8063
+ }
8064
+ return OPERATING_SYSTEM.other;
8065
+ };
8066
+ const getBrowser = () => {
8067
+ const userAgent = navigator.userAgent;
8068
+ // The order of these are essential because certain browsers such as Edge use the
8069
+ // chrome browser engine and include both "Chrome" and "Edg/" in the userAgent.
8070
+ if (userAgent.includes('Edg/')) {
8071
+ return BROWSER.edge;
8072
+ }
8073
+ else if (userAgent.includes('Opera') || userAgent.includes('OPR')) {
8074
+ return BROWSER.opera;
8075
+ }
8076
+ else if (userAgent.includes('Chrome')) {
8077
+ return BROWSER.chrome;
8078
+ }
8079
+ else if (userAgent.includes('Firefox')) {
8080
+ return BROWSER.firefox;
8081
+ }
8082
+ else if (userAgent.includes('Safari')) {
8083
+ return BROWSER.safari;
8084
+ }
8085
+ else if (userAgent.includes('AppleWebKit')) {
8086
+ return BROWSER.applewebkit;
8087
+ }
8088
+ return BROWSER.other;
8089
+ };
8090
+
7849
8091
  class GdsModule {
7850
8092
  static forRoot({ brand, env }) {
7851
- document.body.setAttribute('brand', `${brand ?? BrandEnum.Corto}`);
8093
+ document.body.setAttribute('brand', brand ?? GDS_BRANDS.Corto);
7852
8094
  document.body.setAttribute('operating-system', getOperatingSystem());
7853
8095
  document.body.setAttribute('browser', getBrowser());
7854
8096
  let cdnUrl = 'https://cdn.cortoaws.com';
@@ -7952,5 +8194,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
7952
8194
  * Generated bundle index. Do not edit.
7953
8195
  */
7954
8196
 
7955
- export { CDN_URL, CONTACT_INITIALS_REGEX, GDS_EMPTY_STATE_VARIANTS, GdsAccountingService, GdsAutoRoundCurrencyDirective, GdsAutofocusDirective, GdsAvatarComponent, GdsBadgeColorType, GdsBadgeComponent, GdsBadgeVariantType, GdsBannerComponent, GdsBreadcrumbsComponent, GdsBuildOptionConfigPipe, GdsButtonComponent, GdsButtonRadioOptionComponent, GdsChatExpandableListComponent, GdsChatPromptComponent, GdsChatSuggestionComponent, GdsCheckboxComponent, GdsChipColorsMap, GdsChipComponent, GdsCollapsibleAsideLayoutComponent, GdsCompositeOptionPrimaryDirective, GdsCompositeOptionSecondaryDirective, GdsContextMenuHeadingComponent, GdsContextMenuItemComponent, GdsContextMenuSwitchComponent, GdsDateInputComponent, GdsDatePipe, GdsDialogBaseDirective, GdsDialogComponent, GdsDialogOverlayComponent, GdsDialogService, GdsDoctypeService, GdsDoctypeToIconPipe, GdsDocumentItemComponent, GdsDropdownComponent, GdsEmptyStateComponent, GdsFeatureBlockComponent, GdsFeedbackButtonComponent, GdsFileUploadComponent, GdsFilenameToIconPipe, GdsFilterChipComponent, GdsFocusOnInitDirective, GdsFormControlComponent, GdsHistoryComponent, GdsIconButtonComponent, GdsIconComponent, GdsIconDoctypeComponent, GdsIconService, GdsInputAutocompleteDirective, GdsItemDisplayComponent, GdsKeyboardNavigationHost, GdsKeyboardNavigationItem, GdsListboxCompositeOptionDirective, GdsListboxDirective, GdsListboxOptionDirective, GdsLoadingCarouselComponent, GdsMapArrayToRadioOptionsPipe, GdsMathFloorPipe, GdsMathMaxPipe, GdsMathMinPipe, GdsMessageInputComponent, GdsModule, GdsNativeInputDirective, GdsNativeTextareaDirective, GdsNavAsideComponent, GdsNavAsideItemComponent, GdsNestedSelectComponent, GdsProgressBarComponent, GdsRadioComponent, GdsRadioOptionDirective, GdsReferenceComponent, GdsReferenceLinkComponent, GdsRegexFilterDirective, GdsResizedDirective, GdsResizedEvent, GdsResponseComponent, GdsScrollOutOfViewDirective, GdsScrollOutOfViewScrollStatus, GdsScrollOutOfViewService, GdsScrollToBottomDirective, GdsScrollToFirstInvalidDirective, GdsSearchBarComponent, GdsSelectComponent, GdsSelectOnFocusDirective, GdsSidebarItemBodyComponent, GdsSidebarItemComponent, GdsSkeletonLoadingComponent, GdsSliderComponent, GdsSpinnerComponent, GdsSplitButtonComponent, GdsSvgIconPipe, GdsSwitchComponent, GdsTextInputComponent, GdsTextareaComponent, GdsTimelineItemComponent, GdsToastComponent, GdsTooltipComponent, GdsTreeViewListItemComponent, GdsUserPromptService, GdsVirtualScrollListboxDirective, MapperPipe, OnBrandChanged, RoundMode, TreeViewListItemDirective, chipColor, chipSize, chipTypes, chipWidth, formatToISO, gdsButtonSizes, gdsButtonVariants, gdsDropdownPositionsX, gdsDropdownPositionsY, gdsSelectWidths, gdsServices, gdsUserPromptSecondaryTextVariants, getIconsByPrefix, ngSelectDropdownPositions, parseLocalizedDate, provideToaster, shortDate, shortDateTime, transformDateFormat, transformDurationToSeconds, transformSecondsToDuration };
8197
+ export { BrandEnum, CDN_URL, CONTACT_INITIALS_REGEX, GDS_BRANDS, GDS_EMPTY_STATE_VARIANTS, GdsAccountingService, GdsAutoRoundCurrencyDirective, GdsAutofocusDirective, GdsAvatarComponent, GdsBadgeColorType, GdsBadgeComponent, GdsBadgeVariantType, GdsBannerComponent, GdsBreadcrumbsComponent, GdsBuildOptionConfigPipe, GdsButtonComponent, GdsButtonRadioOptionComponent, GdsChatExpandableListComponent, GdsChatPromptComponent, GdsChatSuggestionComponent, GdsCheckboxComponent, GdsChipColorsMap, GdsChipComponent, GdsCollapsibleAsideLayoutComponent, GdsCompositeOptionPrimaryDirective, GdsCompositeOptionSecondaryDirective, GdsContextMenuHeadingComponent, GdsContextMenuItemComponent, GdsContextMenuItemVariantEnum, GdsContextMenuSwitchComponent, GdsDateInputComponent, GdsDatePipe, GdsDialogBaseDirective, GdsDialogComponent, GdsDialogOverlayComponent, GdsDialogService, GdsDoctypeService, GdsDoctypeToIconPipe, GdsDocumentItemComponent, GdsDropdownComponent, GdsEmptyStateComponent, GdsFeatureBlockComponent, GdsFeedbackButtonComponent, GdsFileUploadComponent, GdsFilenameToIconPipe, GdsFilterChipComponent, GdsFocusOnInitDirective, GdsFormControlComponent, GdsHistoryComponent, GdsIconButtonComponent, GdsIconComponent, GdsIconDoctypeComponent, GdsIconService, GdsInputAutocompleteDirective, GdsItemDisplayComponent, GdsKeyboardNavigationHost, GdsKeyboardNavigationItem, GdsListboxCompositeOptionDirective, GdsListboxDirective, GdsListboxOptionDirective, GdsLoadingCarouselComponent, GdsMapArrayToRadioOptionsPipe, GdsMathFloorPipe, GdsMathMaxPipe, GdsMathMinPipe, GdsMessageInputComponent, GdsModule, GdsNativeInputDirective, GdsNativeTextareaDirective, GdsNavAsideComponent, GdsNavAsideItemComponent, GdsNestedSelectComponent, GdsProgressBarComponent, GdsRadioComponent, GdsRadioOptionDirective, GdsReferenceComponent, GdsReferenceLinkComponent, GdsRegexFilterDirective, GdsResizedDirective, GdsResizedEvent, GdsResponseComponent, GdsScrollOutOfViewDirective, GdsScrollOutOfViewScrollStatus, GdsScrollOutOfViewService, GdsScrollToBottomDirective, GdsScrollToFirstInvalidDirective, GdsSearchBarComponent, GdsSelectComponent, GdsSelectOnFocusDirective, GdsSidebarItemBodyComponent, GdsSidebarItemComponent, GdsSkeletonLoadingComponent, GdsSliderComponent, GdsSpinnerComponent, GdsSplitButtonComponent, GdsSvgIconPipe, GdsSwitchComponent, GdsTextInputComponent, GdsTextareaComponent, GdsTimelineItemComponent, GdsToastComponent, GdsTooltipComponent, GdsTreeViewListItemComponent, GdsUserPromptService, GdsVirtualScrollListboxDirective, MapperPipe, OnBrandChanged, RoundMode, TreeViewListItemDirective, chipColor, chipSize, chipTypes, chipWidth, formatToISO, gdsButtonSizes, gdsButtonVariants, gdsDropdownPositionsX, gdsDropdownPositionsY, gdsSelectWidths, gdsServices, gdsUserPromptSecondaryTextVariants, getIconsByPrefix, isGdsBrand, ngSelectDropdownPositions, parseLocalizedDate, provideToaster, shortDate, shortDateTime, transformDateFormat, transformDurationToSeconds, transformSecondsToDuration };
7956
8198
  //# sourceMappingURL=corto-ai-gds-angular.mjs.map