@ngrdt/gov 0.0.98 → 0.0.99

package/fesm2022/ngrdt-gov.mjs

@@ -1,23 +1,24 @@
 import * as i0 from '@angular/core';
-import { inject, Injector, signal, input, linkedSignal, viewChild, effect, afterNextRender, untracked, HostBinding, Component, forwardRef, Injectable, ViewEncapsulation, ChangeDetectionStrategy, computed, InjectionToken, Renderer2, CUSTOM_ELEMENTS_SCHEMA, Directive, ViewContainerRef, viewChildren, booleanAttribute, importProvidersFrom, LOCALE_ID, numberAttribute } from '@angular/core';
+import { inject, Injector, signal, input, linkedSignal, viewChild, effect, afterNextRender, untracked, HostBinding, Component, forwardRef, Injectable, computed, ViewContainerRef, Renderer2, ElementRef, Directive, ViewEncapsulation, ChangeDetectionStrategy, InjectionToken, CUSTOM_ELEMENTS_SCHEMA, viewChildren, booleanAttribute, importProvidersFrom, LOCALE_ID, numberAttribute } from '@angular/core';
 import { provideDateFnsAdapter } from '@angular/material-date-fns-adapter';
 import { MAT_DATE_LOCALE, DateAdapter } from '@angular/material/core';
-import * as i1$3 from '@angular/material/datepicker';
+import * as i1$4 from '@angular/material/datepicker';
 import { MatDatepickerIntl, MatDatepickerModule } from '@angular/material/datepicker';
 import * as i1 from '@gov-design-system-ce/angular';
 import { GovButton, GovDesignSystemModule, GovFormCheckbox } from '@gov-design-system-ce/angular';
 import { RdtButtonBase, RDT_BUTTON_BASE_PROVIDER } from '@ngrdt/button';
 import { RdtTranslateService, RdtAutoFocusOnInitDirective, RdtTranslatePipe, RDT_NOTIFICATION_SERVICE_PROVIDER, RDT_DIALOG_SERVICE_PROVIDER } from '@ngrdt/core';
 import { RdtCheckboxComponent, RdtFormErrorPipe, RdtNumericInputComponent, RdtBaseFormInputComponent, RdtSelectOfflineDatasourceProviderDirective, RdtBaseSelectCommonComponent, RdtSelectOptionDirective, RdtSelectStore, RdtSingleSelectComponent, RDT_CHECKBOX_BASE_PROVIDER, RDT_NUMERIC_INPUT_BASE_PROVIDER, RDT_SELECT_BASE_PROVIDER, defaultRdtFormErrorCodes, RDT_FORM_ERROR_CODES_PROVIDER, RdtDateComponent, RdtTextInputComponent } from '@ngrdt/forms';
-import { RdtIconOutletDirective, RdtIcon, RdtIconComponent, RDT_ICON_BASE_PROVIDER, RDT_ICON_REGISTRY_PROVIDER } from '@ngrdt/icon';
+import { RdtIconOutletDirective, RdtIconComponent, RdtIcon, RDT_ICON_BASE_PROVIDER, RDT_ICON_REGISTRY_PROVIDER } from '@ngrdt/icon';
 import { RdtSpinnerComponent, RDT_SPINNER_BASE_PROVIDER } from '@ngrdt/loading';
-import * as i1$1 from '@angular/common';
+import * as i1$2 from '@angular/common';
 import { NgTemplateOutlet, CommonModule } from '@angular/common';
 import { RouterLink } from '@angular/router';
-import * as i1$2 from '@angular/forms';
+import * as i1$3 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { ReplaySubject, Subject, map, fromEvent, filter, throttleTime, animationFrameScheduler } from 'rxjs';
-import { CdkDrag } from '@angular/cdk/drag-drop';
+import * as i1$1 from '@angular/cdk/drag-drop';
+import { CdkDragHandle, CdkDrag } from '@angular/cdk/drag-drop';
 import { Overlay } from '@angular/cdk/overlay';
 import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
@@ -33,27 +34,19 @@ const DEFAULT_GOV_BUTTON_SIZE = 'xs';
 
 class RdtGovButtonComponent extends RdtButtonBase {
     injector = inject(Injector);
-    focusElement = signal(null);
-    ariaElement = signal(null);
-    anchorElement = signal(null);
-    appearanceInput = input(DEFAULT_GOV_BUTTON_TYPE, {
-        alias: 'appearance',
-    });
-    appearance = linkedSignal(() => this.appearanceInput());
-    colorInput = input(DEFAULT_GOV_BUTTON_COLOR, {
-        alias: 'color',
-    });
-    color = linkedSignal(() => this.colorInput());
-    size = input(DEFAULT_GOV_BUTTON_SIZE);
-    iconStartInput = input(null, {
-        alias: 'iconStart',
-    });
-    expandedInput = input(false, {
-        alias: 'expanded',
-    });
-    expanded = linkedSignal(() => this.expandedInput());
-    iconStart = linkedSignal(() => this.iconStartInput());
-    govButton = viewChild(GovButton);
+    focusElement = signal(null, ...(ngDevMode ? [{ debugName: "focusElement" }] : []));
+    ariaElement = signal(null, ...(ngDevMode ? [{ debugName: "ariaElement" }] : []));
+    anchorElement = signal(null, ...(ngDevMode ? [{ debugName: "anchorElement" }] : []));
+    appearanceInput = input(DEFAULT_GOV_BUTTON_TYPE, { ...(ngDevMode ? { debugName: "appearanceInput" } : {}), alias: 'appearance' });
+    appearance = linkedSignal(() => this.appearanceInput(), ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+    colorInput = input(DEFAULT_GOV_BUTTON_COLOR, { ...(ngDevMode ? { debugName: "colorInput" } : {}), alias: 'color' });
+    color = linkedSignal(() => this.colorInput(), ...(ngDevMode ? [{ debugName: "color" }] : []));
+    size = input(DEFAULT_GOV_BUTTON_SIZE, ...(ngDevMode ? [{ debugName: "size" }] : []));
+    iconStartInput = input(null, { ...(ngDevMode ? { debugName: "iconStartInput" } : {}), alias: 'iconStart' });
+    expandedInput = input(false, { ...(ngDevMode ? { debugName: "expandedInput" } : {}), alias: 'expanded' });
+    expanded = linkedSignal(() => this.expandedInput(), ...(ngDevMode ? [{ debugName: "expanded" }] : []));
+    iconStart = linkedSignal(() => this.iconStartInput(), ...(ngDevMode ? [{ debugName: "iconStart" }] : []));
+    govButton = viewChild(GovButton, ...(ngDevMode ? [{ debugName: "govButton" }] : []));
     get hostWidth() {
         return this.expanded() ? null : 'fit-content';
     }
@@ -64,7 +57,7 @@ class RdtGovButtonComponent extends RdtButtonBase {
             this.focusElement.set(button);
             this.ariaElement.set(button);
         }
-    });
+    }, ...(ngDevMode ? [{ debugName: "buttonEffect" }] : []));
     constructor() {
         super();
         afterNextRender(() => {
@@ -86,15 +79,15 @@ class RdtGovButtonComponent extends RdtButtonBase {
             }, 1);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: RdtGovButtonComponent, isStandalone: true, selector: "rdt-gov-button", inputs: { appearanceInput: { classPropertyName: "appearanceInput", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, colorInput: { classPropertyName: "colorInput", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconStartInput: { classPropertyName: "iconStartInput", publicName: "iconStart", isSignal: true, isRequired: false, transformFunction: null }, expandedInput: { classPropertyName: "expandedInput", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.width": "this.hostWidth" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtGovButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: RdtGovButtonComponent, isStandalone: true, selector: "rdt-gov-button", inputs: { appearanceInput: { classPropertyName: "appearanceInput", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, colorInput: { classPropertyName: "colorInput", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconStartInput: { classPropertyName: "iconStartInput", publicName: "iconStart", isSignal: true, isRequired: false, transformFunction: null }, expandedInput: { classPropertyName: "expandedInput", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.width": "this.hostWidth" } }, providers: [
             {
                 provide: RdtButtonBase,
                 useExisting: RdtGovButtonComponent,
             },
         ], viewQueries: [{ propertyName: "govButton", first: true, predicate: GovButton, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #buttonContent>\n  <gov-button\n    [class.pointer-events-none]=\"!!ngHref()\"\n    [color]=\"color()\"\n    [type]=\"appearance()\"\n    [nativeType]=\"type()\"\n    [size]=\"size()\"\n    [name]=\"id()\"\n    [disabled]=\"disabled()\"\n    [loading]=\"loading()\"\n    [identifier]=\"id()\"\n    [href]=\"href()\"\n    [download]=\"download()\"\n    [target]=\"target()\"\n    [expanded]=\"expanded()\"\n    (gov-click)=\"onClicked($any($event.detail).originalEvent)\"\n    (gov-focus)=\"onFocus()\"\n    (gov-blur)=\"onBlur()\"\n  >\n    @let lI = iconStart(); @let rI = icon(); @if (lI) {\n    <span slot=\"icon-start\">\n      <ng-container rdtIconOutlet [inputs]=\"{ name: lI }\"></ng-container\n    ></span>\n    }\n\n    {{ label() }}\n\n    @if (rI) {\n    <span slot=\"icon-end\">\n      <ng-container rdtIconOutlet [inputs]=\"{ name: rI }\"></ng-container\n    ></span>\n    }\n  </gov-button>\n</ng-template>\n\n@let ngHrefValue = ngHref(); @if (ngHrefValue) {\n<a\n  [routerLink]=\"ngHrefValue\"\n  [state]=\"stateParams() ?? undefined\"\n  [queryParams]=\"queryParams() ?? undefined\"\n  [target]=\"target()\"\n  [replaceUrl]=\"replaceUrl()\"\n  [class.disabled-link]=\"disabled()\"\n>\n  <ng-container *ngTemplateOutlet=\"buttonContent\" />\n</a>\n} @else {\n<ng-container *ngTemplateOutlet=\"buttonContent\" />\n}\n", dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i1.GovButton, selector: "gov-button", inputs: ["color", "disabled", "download", "expanded", "expandedMobile", "focusable", "href", "hreflang", "identifier", "loading", "name", "nativeType", "referrerpolicy", "rel", "size", "target", "type"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RdtIconOutletDirective, selector: "[rdtIconOutlet]", exportAs: ["rdtIconOutlet"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtGovButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rdt-gov-button', standalone: true, imports: [
                         GovDesignSystemModule,
@@ -107,7 +100,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                             useExisting: RdtGovButtonComponent,
                         },
                     ], template: "<ng-template #buttonContent>\n  <gov-button\n    [class.pointer-events-none]=\"!!ngHref()\"\n    [color]=\"color()\"\n    [type]=\"appearance()\"\n    [nativeType]=\"type()\"\n    [size]=\"size()\"\n    [name]=\"id()\"\n    [disabled]=\"disabled()\"\n    [loading]=\"loading()\"\n    [identifier]=\"id()\"\n    [href]=\"href()\"\n    [download]=\"download()\"\n    [target]=\"target()\"\n    [expanded]=\"expanded()\"\n    (gov-click)=\"onClicked($any($event.detail).originalEvent)\"\n    (gov-focus)=\"onFocus()\"\n    (gov-blur)=\"onBlur()\"\n  >\n    @let lI = iconStart(); @let rI = icon(); @if (lI) {\n    <span slot=\"icon-start\">\n      <ng-container rdtIconOutlet [inputs]=\"{ name: lI }\"></ng-container\n    ></span>\n    }\n\n    {{ label() }}\n\n    @if (rI) {\n    <span slot=\"icon-end\">\n      <ng-container rdtIconOutlet [inputs]=\"{ name: rI }\"></ng-container\n    ></span>\n    }\n  </gov-button>\n</ng-template>\n\n@let ngHrefValue = ngHref(); @if (ngHrefValue) {\n<a\n  [routerLink]=\"ngHrefValue\"\n  [state]=\"stateParams() ?? undefined\"\n  [queryParams]=\"queryParams() ?? undefined\"\n  [target]=\"target()\"\n  [replaceUrl]=\"replaceUrl()\"\n  [class.disabled-link]=\"disabled()\"\n>\n  <ng-container *ngTemplateOutlet=\"buttonContent\" />\n</a>\n} @else {\n<ng-container *ngTemplateOutlet=\"buttonContent\" />\n}\n" }]
-        }], ctorParameters: () => [], propDecorators: { hostWidth: [{
+        }], ctorParameters: () => [], propDecorators: { appearanceInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], colorInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], iconStartInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStart", required: false }] }], expandedInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], govButton: [{ type: i0.ViewChild, args: [i0.forwardRef(() => GovButton), { isSignal: true }] }], hostWidth: [{
                 type: HostBinding,
                 args: ['style.width']
             }] } });
@@ -125,15 +118,11 @@ function forceFocus(input) {
 }
 
 class RdtGovCheckboxComponent extends RdtCheckboxComponent {
-    govCheckbox = viewChild(GovFormCheckbox);
-    labelPosition = linkedSignal(() => this.labelPositionInput());
-    labelPositionInput = input('top', {
-        alias: 'labelPosition',
-    });
-    size = linkedSignal(() => this.sizeInput());
-    sizeInput = input('m', {
-        alias: 'size',
-    });
+    govCheckbox = viewChild(GovFormCheckbox, ...(ngDevMode ? [{ debugName: "govCheckbox" }] : []));
+    labelPosition = linkedSignal(() => this.labelPositionInput(), ...(ngDevMode ? [{ debugName: "labelPosition" }] : []));
+    labelPositionInput = input('top', { ...(ngDevMode ? { debugName: "labelPositionInput" } : {}), alias: 'labelPosition' });
+    size = linkedSignal(() => this.sizeInput(), ...(ngDevMode ? [{ debugName: "size" }] : []));
+    sizeInput = input('m', { ...(ngDevMode ? { debugName: "sizeInput" } : {}), alias: 'size' });
     async focus() {
         const govInput = await this.govCheckbox();
         const el = await govInput?.getRef();
@@ -148,8 +137,8 @@ class RdtGovCheckboxComponent extends RdtCheckboxComponent {
             }, 1);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: RdtGovCheckboxComponent, isStandalone: true, selector: "rdt-gov-checkbox", inputs: { labelPositionInput: { classPropertyName: "labelPositionInput", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, sizeInput: { classPropertyName: "sizeInput", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtGovCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: RdtGovCheckboxComponent, isStandalone: true, selector: "rdt-gov-checkbox", inputs: { labelPositionInput: { classPropertyName: "labelPositionInput", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, sizeInput: { classPropertyName: "sizeInput", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => RdtGovCheckboxComponent),
@@ -157,7 +146,7 @@ class RdtGovCheckboxComponent extends RdtCheckboxComponent {
             },
         ], viewQueries: [{ propertyName: "govCheckbox", first: true, predicate: GovFormCheckbox, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@let lPos = labelPosition();\n<div [class.center]=\"lPos !== 'top'\">\n  @if(lPos === 'top' && label().length>0){\n  <gov-form-label\n    slot=\"left\"\n    size=\"m\"\n    [class.warning-color-gov-label]=\"hasError\"\n    >{{ label() }} @if (required()) {\n    <span class=\"warning-color-text\">*</span>\n    }</gov-form-label\n  >\n  } @if(lPos === 'left') {\n  <p\n    class=\"gov-form-label__label s_label spaced\"\n    [class.warning-color-text]=\"hasError\"\n  >\n    {{ label() }} @if (required()) {\n    <span class=\"warning-color-text\">*</span>\n    }\n  </p>\n  }\n  <gov-form-checkbox\n    class=\"rdt-gov-checkbox\"\n    [size]=\"size()\"\n    [ariaLabel]=\"lPos === 'left' ? label() : ''\"\n    [required]=\"required()\"\n    [checked]=\"internalValue()\"\n    [invalid]=\"invalid()\"\n    [disabled]=\"disabled()\"\n    [identifier]=\"id()\"\n    [noLabel]=\"true\"\n    (gov-change)=\"onInternalValueChange($event.detail.checked)\"\n  ></gov-form-checkbox>\n  @if(lPos === 'right') {\n  <p\n    class=\"gov-form-label__label s_label\"\n    [class.warning-color-text]=\"hasError\"\n  >\n    {{ label() }} @if (required()) {\n    <span class=\"warning-color-text\">*</span>\n    }\n  </p>\n  } @let hasError = visibleErrors() | rdtFormError; @if(hasError){\n  <gov-form-message slot=\"bottom\" color=\"error\" [attr.size]=\"size()\">\n    <gov-icon\n      type=\"components\"\n      name=\"exclamation-triangle-fill\"\n      slot=\"validation-icon\"\n    ></gov-icon>\n    {{ hasError }}\n  </gov-form-message>\n  }\n</div>\n", styles: ["gov-form-checkbox{min-height:0px!important;padding:0!important}.center{display:flex;align-items:center}.spaced{margin-right:var(--spacing-xs-nudge)}\n"], dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i1.GovFormCheckbox, selector: "gov-form-checkbox", inputs: ["checked", "disabled", "identifier", "indeterminate", "invalid", "name", "noLabel", "required", "size", "value"] }, { kind: "component", type: i1.GovFormLabel, selector: "gov-form-label", inputs: ["identifier", "legend", "required", "size"] }, { kind: "component", type: i1.GovFormMessage, selector: "gov-form-message", inputs: ["color", "size"] }, { kind: "component", type: i1.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "directive", type: i1.BooleanValueAccessor, selector: "gov-form-checkbox,gov-form-switch" }, { kind: "pipe", type: RdtFormErrorPipe, name: "rdtFormError" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovCheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtGovCheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rdt-gov-checkbox', imports: [GovDesignSystemModule, RdtFormErrorPipe], providers: [
                         {
@@ -166,7 +155,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                             multi: true,
                         },
                     ], template: "@let lPos = labelPosition();\n<div [class.center]=\"lPos !== 'top'\">\n  @if(lPos === 'top' && label().length>0){\n  <gov-form-label\n    slot=\"left\"\n    size=\"m\"\n    [class.warning-color-gov-label]=\"hasError\"\n    >{{ label() }} @if (required()) {\n    <span class=\"warning-color-text\">*</span>\n    }</gov-form-label\n  >\n  } @if(lPos === 'left') {\n  <p\n    class=\"gov-form-label__label s_label spaced\"\n    [class.warning-color-text]=\"hasError\"\n  >\n    {{ label() }} @if (required()) {\n    <span class=\"warning-color-text\">*</span>\n    }\n  </p>\n  }\n  <gov-form-checkbox\n    class=\"rdt-gov-checkbox\"\n    [size]=\"size()\"\n    [ariaLabel]=\"lPos === 'left' ? label() : ''\"\n    [required]=\"required()\"\n    [checked]=\"internalValue()\"\n    [invalid]=\"invalid()\"\n    [disabled]=\"disabled()\"\n    [identifier]=\"id()\"\n    [noLabel]=\"true\"\n    (gov-change)=\"onInternalValueChange($event.detail.checked)\"\n  ></gov-form-checkbox>\n  @if(lPos === 'right') {\n  <p\n    class=\"gov-form-label__label s_label\"\n    [class.warning-color-text]=\"hasError\"\n  >\n    {{ label() }} @if (required()) {\n    <span class=\"warning-color-text\">*</span>\n    }\n  </p>\n  } @let hasError = visibleErrors() | rdtFormError; @if(hasError){\n  <gov-form-message slot=\"bottom\" color=\"error\" [attr.size]=\"size()\">\n    <gov-icon\n      type=\"components\"\n      name=\"exclamation-triangle-fill\"\n      slot=\"validation-icon\"\n    ></gov-icon>\n    {{ hasError }}\n  </gov-form-message>\n  }\n</div>\n", styles: ["gov-form-checkbox{min-height:0px!important;padding:0!important}.center{display:flex;align-items:center}.spaced{margin-right:var(--spacing-xs-nudge)}\n"] }]
-        }] });
+        }], propDecorators: { govCheckbox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => GovFormCheckbox), { isSignal: true }] }], labelPositionInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], sizeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 class RdtDatepickerIntl extends MatDatepickerIntl {
     translateService = inject(RdtTranslateService);
@@ -176,7 +165,7 @@ class RdtDatepickerIntl extends MatDatepickerIntl {
     }
     setLabelsEffect = effect(() => {
         this.setLabels();
-    });
+    }, ...(ngDevMode ? [{ debugName: "setLabelsEffect" }] : []));
     setLabels() {
         this.calendarLabel = this.translateService.instant('RDT_GOV_DATE_CALENDAR_LABEL');
         this.openCalendarLabel = this.translateService.instant('RDT_GOV_DATE_OPEN_CALENDAR');
@@ -185,18 +174,18 @@ class RdtDatepickerIntl extends MatDatepickerIntl {
         this.prevYearLabel = this.translateService.instant('RDT_GOV_DATE_PREV_YEAR');
         this.nextYearLabel = this.translateService.instant('RDT_GOV_DATE_NEXT_YEAR');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtDatepickerIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtDatepickerIntl });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtDatepickerIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtDatepickerIntl });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtDatepickerIntl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtDatepickerIntl, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
 class RdtGovDialogContentComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovDialogContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: RdtGovDialogContentComponent, isStandalone: true, selector: "rdt-gov-dialog-content", ngImport: i0, template: "<div class=\"gov-dialog__content\">\n  <ng-content></ng-content>\n</div>\n" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtGovDialogContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: RdtGovDialogContentComponent, isStandalone: true, selector: "rdt-gov-dialog-content", ngImport: i0, template: "<div class=\"gov-dialog__content\">\n  <ng-content></ng-content>\n</div>\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovDialogContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtGovDialogContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rdt-gov-dialog-content', imports: [], template: "<div class=\"gov-dialog__content\">\n  <ng-content></ng-content>\n</div>\n" }]
         }] });
@@ -211,6 +200,7 @@ class RdtGovDialogRef {
     size;
     hasBackdrop;
     isDraggable;
+    dragIcon;
     isResizable;
     _close$ = new ReplaySubject(1);
     _open$ = new Subject();
@@ -228,13 +218,14 @@ class RdtGovDialogRef {
         this.minWidth = config.minWidth;
         this.maxWidth = config.maxWidth;
         this.size = config.size;
-        this.isLoading = signal(config.initialLoading);
+        this.isLoading = signal(config.initialLoading, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
         this.hasBackdrop = config.hasBackdrop;
         this.isDraggable = config.isDraggable;
+        this.dragIcon = config.dragIcon;
         this.isResizable = config.isResizable;
-        this.inputData = signal(config.inputData);
-        this.header = signal(config.header ?? null);
-        this.headerIcons = signal(config.headerIcons ?? null);
+        this.inputData = signal(config.inputData, ...(ngDevMode ? [{ debugName: "inputData" }] : []));
+        this.header = signal(config.header ?? null, ...(ngDevMode ? [{ debugName: "header" }] : []));
+        this.headerIcons = signal(config.headerIcons ?? null, ...(ngDevMode ? [{ debugName: "headerIcons" }] : []));
     }
     ready() {
         this._open$.next();
@@ -248,14 +239,154 @@ class RdtGovDialogRef {
 
 class RdtGovDialogFooterComponent {
     dialogRef = inject(RdtGovDialogRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovDialogFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: RdtGovDialogFooterComponent, isStandalone: true, selector: "rdt-gov-dialog-footer", ngImport: i0, template: "<div class=\"gov-dialog__footer\">\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtGovDialogFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: RdtGovDialogFooterComponent, isStandalone: true, selector: "rdt-gov-dialog-footer", ngImport: i0, template: "<div class=\"gov-dialog__footer\">\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovDialogFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtGovDialogFooterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rdt-gov-dialog-footer', imports: [GovDesignSystemModule], template: "<div class=\"gov-dialog__footer\">\n  <ng-content></ng-content>\n</div>\n" }]
         }] });
 
+class RdtGovIconComponent extends RdtIconComponent {
+    size = input('s', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
+    parsed = computed(() => {
+        const value = this.name() || '';
+        const [type, name] = value.split('/');
+        return { type: type || '', name: name || '' };
+    }, ...(ngDevMode ? [{ debugName: "parsed" }] : []));
+    isBootstrapIcon = computed(() => {
+        return this.parsed().type === 'bs';
+    }, ...(ngDevMode ? [{ debugName: "isBootstrapIcon" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtGovIconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: RdtGovIconComponent, isStandalone: true, selector: "rdt-gov-icon", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.size": "size()" }, classAttribute: "gov-icon" }, usesInheritance: true, ngImport: i0, template: "@let p = parsed(); @if (isBootstrapIcon()) {\n<i\n  class=\"bi bi-{{ p.name }} gov-icon\"\n  [attr.size]=\"size()\"\n  [attr.color]=\"color()\"\n></i>\n} @else {\n<gov-icon\n  [type]=\"p.type\"\n  [name]=\"p.name\"\n  [size]=\"size()\"\n  [color]=\"color()\"\n></gov-icon>\n}\n", styles: [":host{vertical-align:middle}gov-icon{color:var(--icon-color, currentColor)}i.bi:before{vertical-align:.125em;font-size:var(--icon-size, 1rem);color:var(--icon-color, currentColor)}i.bi[size=xs]:before{font-size:var(--icon-size, var(--icon-size-xs))}i.bi[size=s]:before{font-size:var(--icon-size, var(--icon-size-s))}i.bi[size=m]:before{font-size:var(--icon-size, var(--icon-size-m))}i.bi[size=l]:before{font-size:var(--icon-size, var(--icon-size-l))}i.bi[size=xl]:before{font-size:var(--icon-size, var(--icon-size-xl))}i.bi[color=primary]:before{color:var(--primary, var(--icon-on-subtle))}i.bi[color=secondary]:before{color:var(--secondary, var(--icon-secondary))}i.bi[color=success]:before{color:var(--success, var(--icon-success))}i.bi[color=warning]:before{color:var(--warning, var(--icon-warning))}i.bi[color=error]:before{color:var(--error, var(--icon-error))}\n"], dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i1.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtGovIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rdt-gov-icon', imports: [GovDesignSystemModule, CommonModule], host: {
+                        class: 'gov-icon',
+                        '[attr.size]': 'size()',
+                    }, template: "@let p = parsed(); @if (isBootstrapIcon()) {\n<i\n  class=\"bi bi-{{ p.name }} gov-icon\"\n  [attr.size]=\"size()\"\n  [attr.color]=\"color()\"\n></i>\n} @else {\n<gov-icon\n  [type]=\"p.type\"\n  [name]=\"p.name\"\n  [size]=\"size()\"\n  [color]=\"color()\"\n></gov-icon>\n}\n", styles: [":host{vertical-align:middle}gov-icon{color:var(--icon-color, currentColor)}i.bi:before{vertical-align:.125em;font-size:var(--icon-size, 1rem);color:var(--icon-color, currentColor)}i.bi[size=xs]:before{font-size:var(--icon-size, var(--icon-size-xs))}i.bi[size=s]:before{font-size:var(--icon-size, var(--icon-size-s))}i.bi[size=m]:before{font-size:var(--icon-size, var(--icon-size-m))}i.bi[size=l]:before{font-size:var(--icon-size, var(--icon-size-l))}i.bi[size=xl]:before{font-size:var(--icon-size, var(--icon-size-xl))}i.bi[color=primary]:before{color:var(--primary, var(--icon-on-subtle))}i.bi[color=secondary]:before{color:var(--secondary, var(--icon-secondary))}i.bi[color=success]:before{color:var(--success, var(--icon-success))}i.bi[color=warning]:before{color:var(--warning, var(--icon-warning))}i.bi[color=error]:before{color:var(--error, var(--icon-error))}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
+
+class RdtGovDragHandleComponent {
+    icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtGovDragHandleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: RdtGovDragHandleComponent, isStandalone: true, selector: "rdt-gov-drag-handle", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    <span class="rdt-gov-drag-handle" cdkDragHandle>
+      <rdt-gov-icon [name]="icon()" size="s"></rdt-gov-icon>
+    </span>
+  `, isInline: true, styles: [":host{display:inline-flex;align-items:center}.rdt-gov-drag-handle{display:inline-flex;align-items:center;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.rdt-gov-drag-handle:active{cursor:grabbing}\n"], dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: RdtGovIconComponent, selector: "rdt-gov-icon", inputs: ["size", "color"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtGovDragHandleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rdt-gov-drag-handle', standalone: true, imports: [GovDesignSystemModule, RdtGovIconComponent, CdkDragHandle], template: `
+    <span class="rdt-gov-drag-handle" cdkDragHandle>
+      <rdt-gov-icon [name]="icon()" size="s"></rdt-gov-icon>
+    </span>
+  `, styles: [":host{display:inline-flex;align-items:center}.rdt-gov-drag-handle{display:inline-flex;align-items:center;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.rdt-gov-drag-handle:active{cursor:grabbing}\n"] }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }] } });
+
+const DEFAULT_DRAG_ICON = 'bs/grip-vertical';
+const VOID_ELEMENTS = new Set([
+    'AREA',
+    'BASE',
+    'BR',
+    'COL',
+    'EMBED',
+    'HR',
+    'IMG',
+    'INPUT',
+    'LINK',
+    'META',
+    'PARAM',
+    'SOURCE',
+    'TRACK',
+    'WBR',
+]);
+class RdtGovDragDirective {
+    viewContainerRef = inject(ViewContainerRef);
+    renderer = inject(Renderer2);
+    hostRef = inject(ElementRef);
+    handleRef;
+    icon = input(DEFAULT_DRAG_ICON, { ...(ngDevMode ? { debugName: "icon" } : {}), alias: 'rdtGovDragIcon' });
+    iconEffect = effect(() => {
+        const icon = this.icon();
+        if (!icon) {
+            this.destroyHandle();
+            return;
+        }
+        if (this.ensureHandle()) {
+            this.handleRef?.setInput('icon', icon);
+        }
+    }, ...(ngDevMode ? [{ debugName: "iconEffect" }] : []));
+    ngOnDestroy() {
+        this.destroyHandle();
+    }
+    ensureHandle() {
+        if (this.handleRef) {
+            return true;
+        }
+        const hostEl = this.hostRef.nativeElement;
+        if (VOID_ELEMENTS.has(hostEl.tagName)) {
+            console.warn(`Drag handle cannot be auto-inserted into <${hostEl.tagName.toLowerCase()}> element.`);
+            return false;
+        }
+        this.handleRef = this.viewContainerRef.createComponent(RdtGovDragHandleComponent);
+        const handleEl = this.handleRef.location.nativeElement;
+        const firstChild = hostEl.firstChild;
+        if (firstChild) {
+            this.renderer.insertBefore(hostEl, handleEl, firstChild);
+        }
+        else {
+            this.renderer.appendChild(hostEl, handleEl);
+        }
+        return true;
+    }
+    destroyHandle() {
+        if (!this.handleRef) {
+            return;
+        }
+        this.handleRef.destroy();
+        this.handleRef = undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtGovDragDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.2", type: RdtGovDragDirective, isStandalone: true, selector: "[rdtGovDrag]", inputs: { icon: { classPropertyName: "icon", publicName: "rdtGovDragIcon", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1$1.CdkDrag, inputs: ["cdkDragDisabled", "cdkDragDisabled", "cdkDragBoundary", "cdkDragBoundary", "cdkDragLockAxis", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragRootElement", "cdkDragStartDelay", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragFreeDragPosition", "cdkDragConstrainPosition", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewClass", "cdkDragScale", "cdkDragScale", "cdkDragData", "cdkDragData"], outputs: ["cdkDragStarted", "cdkDragStarted", "cdkDragReleased", "cdkDragReleased", "cdkDragEnded", "cdkDragEnded", "cdkDragEntered", "cdkDragEntered", "cdkDragExited", "cdkDragExited", "cdkDragDropped", "cdkDragDropped", "cdkDragMoved", "cdkDragMoved"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtGovDragDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdtGovDrag]',
+                    standalone: true,
+                    hostDirectives: [
+                        {
+                            directive: CdkDrag,
+                            inputs: [
+                                'cdkDragDisabled',
+                                'cdkDragBoundary',
+                                'cdkDragLockAxis',
+                                'cdkDragRootElement',
+                                'cdkDragStartDelay',
+                                'cdkDragFreeDragPosition',
+                                'cdkDragConstrainPosition',
+                                'cdkDragPreviewClass',
+                                'cdkDragScale',
+                                'cdkDragData',
+                            ],
+                            outputs: [
+                                'cdkDragStarted',
+                                'cdkDragReleased',
+                                'cdkDragEnded',
+                                'cdkDragEntered',
+                                'cdkDragExited',
+                                'cdkDragDropped',
+                                'cdkDragMoved',
+                            ],
+                        },
+                    ],
+                }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "rdtGovDragIcon", required: false }] }] } });
+
 class RdtGovDialogHeaderComponent {
     dialogRef = inject(RdtGovDialogRef);
     govIcon = RdtIcon.Close;
@@ -267,55 +398,46 @@ class RdtGovDialogHeaderComponent {
             return undefined;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovDialogHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: RdtGovDialogHeaderComponent, isStandalone: true, selector: "rdt-gov-dialog-header", ngImport: i0, template: "<div class=\"gov-dialog__header\">\n  <div class=\"gov-dialog__header-left\">\n    @let icons = dialogRef.headerIcons(); @let iL = icons?.iconStart; @if(iL){\n    <span [style]=\"getIconColorDeclaration(icons?.iconStartColor)\">\n      <ng-container rdtIconOutlet [inputs]=\"{ name: iL }\"></ng-container>\n    </span>\n    }\n    <h2 class=\"gov-dialog__title\">\n      {{ dialogRef.header() }}\n    </h2>\n    @let rI = icons?.icon; @if(rI){\n    <span [style]=\"getIconColorDeclaration(icons?.iconColor)\">\n      <ng-container rdtIconOutlet [inputs]=\"{ name: rI }\"> </ng-container>\n    </span>\n    }\n  </div>\n  <rdt-gov-button\n    appearance=\"base\"\n    size=\"l\"\n    [expanded]=\"true\"\n    [iconStart]=\"govIcon\"\n    (click)=\"dialogRef.close()\"\n  ></rdt-gov-button>\n</div>\n", dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: RdtGovButtonComponent, selector: "rdt-gov-button", inputs: ["appearance", "color", "size", "iconStart", "expanded"] }, { kind: "directive", type: RdtIconOutletDirective, selector: "[rdtIconOutlet]", exportAs: ["rdtIconOutlet"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtGovDialogHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: RdtGovDialogHeaderComponent, isStandalone: true, selector: "rdt-gov-dialog-header", ngImport: i0, template: "<div class=\"gov-dialog__header\">\n  @if (dialogRef.isDraggable) {\n  <div\n    class=\"gov-dialog__header-left\"\n    rdtGovDrag\n    [rdtGovDragIcon]=\"dialogRef.dragIcon ?? null\"\n    cdkDragRootElement=\".gov-modal__dialog\"\n  >\n    @let icons = dialogRef.headerIcons(); @let iL = icons?.iconStart; @if(iL){\n    <span [style]=\"getIconColorDeclaration(icons?.iconStartColor)\">\n      <ng-container rdtIconOutlet [inputs]=\"{ name: iL }\"></ng-container>\n    </span>\n    }\n    <h2 class=\"gov-dialog__title\">\n      {{ dialogRef.header() }}\n    </h2>\n    @let rI = icons?.icon; @if(rI){\n    <span [style]=\"getIconColorDeclaration(icons?.iconColor)\">\n      <ng-container rdtIconOutlet [inputs]=\"{ name: rI }\"> </ng-container>\n    </span>\n    }\n  </div>\n  } @else {\n  <div class=\"gov-dialog__header-left\">\n    @let icons = dialogRef.headerIcons(); @let iL = icons?.iconStart; @if(iL){\n    <span [style]=\"getIconColorDeclaration(icons?.iconStartColor)\">\n      <ng-container rdtIconOutlet [inputs]=\"{ name: iL }\"></ng-container>\n    </span>\n    }\n    <h2 class=\"gov-dialog__title\">\n      {{ dialogRef.header() }}\n    </h2>\n    @let rI = icons?.icon; @if(rI){\n    <span [style]=\"getIconColorDeclaration(icons?.iconColor)\">\n      <ng-container rdtIconOutlet [inputs]=\"{ name: rI }\"> </ng-container>\n    </span>\n    }\n  </div>\n  }\n  <rdt-gov-button\n    appearance=\"base\"\n    size=\"l\"\n    [expanded]=\"true\"\n    [iconStart]=\"govIcon\"\n    (click)=\"dialogRef.close()\"\n  ></rdt-gov-button>\n</div>\n", dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: RdtGovButtonComponent, selector: "rdt-gov-button", inputs: ["appearance", "color", "size", "iconStart", "expanded"] }, { kind: "directive", type: RdtIconOutletDirective, selector: "[rdtIconOutlet]", exportAs: ["rdtIconOutlet"] }, { kind: "directive", type: RdtGovDragDirective, selector: "[rdtGovDrag]", inputs: ["rdtGovDragIcon"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovDialogHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtGovDialogHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rdt-gov-dialog-header', imports: [
                         GovDesignSystemModule,
                         RdtGovButtonComponent,
                         RdtIconOutletDirective,
-                    ], template: "<div class=\"gov-dialog__header\">\n  <div class=\"gov-dialog__header-left\">\n    @let icons = dialogRef.headerIcons(); @let iL = icons?.iconStart; @if(iL){\n    <span [style]=\"getIconColorDeclaration(icons?.iconStartColor)\">\n      <ng-container rdtIconOutlet [inputs]=\"{ name: iL }\"></ng-container>\n    </span>\n    }\n    <h2 class=\"gov-dialog__title\">\n      {{ dialogRef.header() }}\n    </h2>\n    @let rI = icons?.icon; @if(rI){\n    <span [style]=\"getIconColorDeclaration(icons?.iconColor)\">\n      <ng-container rdtIconOutlet [inputs]=\"{ name: rI }\"> </ng-container>\n    </span>\n    }\n  </div>\n  <rdt-gov-button\n    appearance=\"base\"\n    size=\"l\"\n    [expanded]=\"true\"\n    [iconStart]=\"govIcon\"\n    (click)=\"dialogRef.close()\"\n  ></rdt-gov-button>\n</div>\n" }]
+                        RdtGovDragDirective,
+                    ], template: "<div class=\"gov-dialog__header\">\n  @if (dialogRef.isDraggable) {\n  <div\n    class=\"gov-dialog__header-left\"\n    rdtGovDrag\n    [rdtGovDragIcon]=\"dialogRef.dragIcon ?? null\"\n    cdkDragRootElement=\".gov-modal__dialog\"\n  >\n    @let icons = dialogRef.headerIcons(); @let iL = icons?.iconStart; @if(iL){\n    <span [style]=\"getIconColorDeclaration(icons?.iconStartColor)\">\n      <ng-container rdtIconOutlet [inputs]=\"{ name: iL }\"></ng-container>\n    </span>\n    }\n    <h2 class=\"gov-dialog__title\">\n      {{ dialogRef.header() }}\n    </h2>\n    @let rI = icons?.icon; @if(rI){\n    <span [style]=\"getIconColorDeclaration(icons?.iconColor)\">\n      <ng-container rdtIconOutlet [inputs]=\"{ name: rI }\"> </ng-container>\n    </span>\n    }\n  </div>\n  } @else {\n  <div class=\"gov-dialog__header-left\">\n    @let icons = dialogRef.headerIcons(); @let iL = icons?.iconStart; @if(iL){\n    <span [style]=\"getIconColorDeclaration(icons?.iconStartColor)\">\n      <ng-container rdtIconOutlet [inputs]=\"{ name: iL }\"></ng-container>\n    </span>\n    }\n    <h2 class=\"gov-dialog__title\">\n      {{ dialogRef.header() }}\n    </h2>\n    @let rI = icons?.icon; @if(rI){\n    <span [style]=\"getIconColorDeclaration(icons?.iconColor)\">\n      <ng-container rdtIconOutlet [inputs]=\"{ name: rI }\"> </ng-container>\n    </span>\n    }\n  </div>\n  }\n  <rdt-gov-button\n    appearance=\"base\"\n    size=\"l\"\n    [expanded]=\"true\"\n    [iconStart]=\"govIcon\"\n    (click)=\"dialogRef.close()\"\n  ></rdt-gov-button>\n</div>\n" }]
         }] });
 
 class RdtGovSpinnerComponent extends RdtSpinnerComponent {
-    message = linkedSignal(() => this.messageInput());
-    messageInput = input('Loading...', {
-        alias: 'message',
-    });
-    size = linkedSignal(() => this.sizeInput());
-    sizeInput = input('m', {
-        alias: 'size',
-    });
-    mode = linkedSignal(() => this.modeInput());
-    modeInput = input('local', {
-        alias: 'mode',
-    });
-    messagePositionInput = input('below', {
-        alias: 'messagePosition',
-    });
-    messagePosition = linkedSignal(() => this.messagePositionInput());
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovSpinnerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.0", type: RdtGovSpinnerComponent, isStandalone: true, selector: "rdt-gov-spinner", inputs: { messageInput: { classPropertyName: "messageInput", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, sizeInput: { classPropertyName: "sizeInput", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, modeInput: { classPropertyName: "modeInput", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, messagePositionInput: { classPropertyName: "messagePositionInput", publicName: "messagePosition", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<gov-loading\n  [size]=\"size()\"\n  [class]=\"\n    'rdt-spinner-' + mode() + ' ' + 'rdt-spinner-pos-' + messagePosition()\n  \"\n  >{{ message() }}</gov-loading\n>\n", styles: ["gov-loading svg{animation:spin 2s linear infinite;transform-box:fill-box;transform-origin:center}.rdt-spinner-local{width:fit-content}.rdt-spinner-local .gov-loading__content{background-color:transparent;position:unset;z-index:1;transform:none;padding:0!important;width:fit-content;min-width:fit-content!important}.rdt-spinner-local gov-backdrop{display:none}.rdt-spinner-pos-left .gov-loading__content{flex-direction:row-reverse}.rdt-spinner-pos-right .gov-loading__content{flex-direction:row}.rdt-spinner-pos-above .gov-loading__content{flex-direction:column-reverse}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i1.GovLoading, selector: "gov-loading", inputs: ["size"] }], encapsulation: i0.ViewEncapsulation.None });
+    message = linkedSignal(() => this.messageInput(), ...(ngDevMode ? [{ debugName: "message" }] : []));
+    messageInput = input('Loading...', { ...(ngDevMode ? { debugName: "messageInput" } : {}), alias: 'message' });
+    size = linkedSignal(() => this.sizeInput(), ...(ngDevMode ? [{ debugName: "size" }] : []));
+    sizeInput = input('m', { ...(ngDevMode ? { debugName: "sizeInput" } : {}), alias: 'size' });
+    mode = linkedSignal(() => this.modeInput(), ...(ngDevMode ? [{ debugName: "mode" }] : []));
+    modeInput = input('local', { ...(ngDevMode ? { debugName: "modeInput" } : {}), alias: 'mode' });
+    messagePositionInput = input('below', { ...(ngDevMode ? { debugName: "messagePositionInput" } : {}), alias: 'messagePosition' });
+    messagePosition = linkedSignal(() => this.messagePositionInput(), ...(ngDevMode ? [{ debugName: "messagePosition" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtGovSpinnerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: RdtGovSpinnerComponent, isStandalone: true, selector: "rdt-gov-spinner", inputs: { messageInput: { classPropertyName: "messageInput", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, sizeInput: { classPropertyName: "sizeInput", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, modeInput: { classPropertyName: "modeInput", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, messagePositionInput: { classPropertyName: "messagePositionInput", publicName: "messagePosition", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<gov-loading\n  [size]=\"size()\"\n  [class]=\"\n    'rdt-spinner-' + mode() + ' ' + 'rdt-spinner-pos-' + messagePosition()\n  \"\n  >{{ message() }}</gov-loading\n>\n", styles: ["gov-loading svg{animation:spin 2s linear infinite;transform-box:fill-box;transform-origin:center}.rdt-spinner-local{width:fit-content}.rdt-spinner-local .gov-loading__content{background-color:transparent;position:unset;z-index:1;transform:none;padding:0!important;width:fit-content;min-width:fit-content!important}.rdt-spinner-local gov-backdrop{display:none}.rdt-spinner-pos-left .gov-loading__content{flex-direction:row-reverse}.rdt-spinner-pos-right .gov-loading__content{flex-direction:row}.rdt-spinner-pos-above .gov-loading__content{flex-direction:column-reverse}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i1.GovLoading, selector: "gov-loading", inputs: ["size"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovSpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtGovSpinnerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rdt-gov-spinner', imports: [GovDesignSystemModule], encapsulation: ViewEncapsulation.None, template: "<gov-loading\n  [size]=\"size()\"\n  [class]=\"\n    'rdt-spinner-' + mode() + ' ' + 'rdt-spinner-pos-' + messagePosition()\n  \"\n  >{{ message() }}</gov-loading\n>\n", styles: ["gov-loading svg{animation:spin 2s linear infinite;transform-box:fill-box;transform-origin:center}.rdt-spinner-local{width:fit-content}.rdt-spinner-local .gov-loading__content{background-color:transparent;position:unset;z-index:1;transform:none;padding:0!important;width:fit-content;min-width:fit-content!important}.rdt-spinner-local gov-backdrop{display:none}.rdt-spinner-pos-left .gov-loading__content{flex-direction:row-reverse}.rdt-spinner-pos-right .gov-loading__content{flex-direction:row}.rdt-spinner-pos-above .gov-loading__content{flex-direction:column-reverse}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
-        }] });
+        }], propDecorators: { messageInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], sizeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], modeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], messagePositionInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "messagePosition", required: false }] }] } });
 
 class RdtGovDialogLoadingComponent {
-    messageInput = input(null, {
-        alias: 'message',
-    });
-    message = linkedSignal(() => this.messageInput());
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovDialogLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.0", type: RdtGovDialogLoadingComponent, isStandalone: true, selector: "rdt-gov-dialog-loading", inputs: { messageInput: { classPropertyName: "messageInput", publicName: "message", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"gov-dialog__loading\">\n  <rdt-gov-spinner\n    [size]=\"'m'\"\n    [messagePosition]=\"'below'\"\n    [message]=\"message() ?? 'Loading...'\"\n  ></rdt-gov-spinner>\n  <div></div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: RdtGovSpinnerComponent, selector: "rdt-gov-spinner", inputs: ["message", "size", "mode", "messagePosition"] }] });
+    messageInput = input(null, { ...(ngDevMode ? { debugName: "messageInput" } : {}), alias: 'message' });
+    message = linkedSignal(() => this.messageInput(), ...(ngDevMode ? [{ debugName: "message" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtGovDialogLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: RdtGovDialogLoadingComponent, isStandalone: true, selector: "rdt-gov-dialog-loading", inputs: { messageInput: { classPropertyName: "messageInput", publicName: "message", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"gov-dialog__loading\">\n  <rdt-gov-spinner\n    [size]=\"'m'\"\n    [messagePosition]=\"'below'\"\n    [message]=\"message() ?? 'Loading...'\"\n  ></rdt-gov-spinner>\n  <div></div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: RdtGovSpinnerComponent, selector: "rdt-gov-spinner", inputs: ["message", "size", "mode", "messagePosition"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovDialogLoadingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtGovDialogLoadingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rdt-gov-dialog-loading', imports: [GovDesignSystemModule, RdtGovSpinnerComponent], template: "<div class=\"gov-dialog__loading\">\n  <rdt-gov-spinner\n    [size]=\"'m'\"\n    [messagePosition]=\"'below'\"\n    [message]=\"message() ?? 'Loading...'\"\n  ></rdt-gov-spinner>\n  <div></div>\n</div>\n" }]
-        }] });
+        }], propDecorators: { messageInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }] } });
 
 class RdtGovDialogComponent {
     dialogRef = inject(RdtGovDialogRef);
@@ -323,19 +445,19 @@ class RdtGovDialogComponent {
         providers: [{ provide: RdtGovDialogRef, useValue: this.dialogRef }],
         parent: this.dialogRef.injector,
     });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: RdtGovDialogComponent, isStandalone: true, selector: "rdt-gov-dialog", host: { properties: { "class.fullscreen-modal": "dialogRef.size === 'fullscreen'", "style.width": "dialogRef.size", "style.--dialog-min-height": "dialogRef.minHeight", "style.--dialog-max-height": "dialogRef.maxHeight", "style.--dialog-min-width": "dialogRef.minWidth", "style.--dialog-max-width": "dialogRef.maxWidth" } }, ngImport: i0, template: "<div\n  class=\"gov-modal__dialog rdt-gov-dialog\"\n  cdkDrag\n  [cdkDragDisabled]=\"!dialogRef.isDraggable\"\n>\n  <ng-container\n    *ngComponentOutlet=\"dialogRef.component; injector: dialogRefInjector\"\n  ></ng-container>\n</div>\n", styles: [":root{--dialog-min-height: 400px;--dialog-min-width: 400px;--dialog-max-height: 100%;--dialog-max-width: 100%}.fullscreen-modal{width:100vw;height:100vh}.fullscreen-modal .rdt-gov-dialog{padding:1.25rem;height:100%}.gov-dialog__content{flex:1;display:flex;flex-direction:column}.gov-modal__dialog>*{min-width:var(--dialog-min-width);min-height:var(--dialog-min-height);position:relative;display:flex;flex-direction:column;width:100%;height:100%;max-height:var(--dialog-max-height);max-width:var(--dialog-max-width);border-radius:var(--border-radius, var(--corner-radius-s));background:var(--background, var(--background-block-primary));overflow:hidden;pointer-events:auto;box-shadow:0 .5rem 2rem #0000004d}.gov-modal__dialog>* rdt-gov-dialog-content{flex:1;position:relative}.gov-dialog__header{margin-top:0;margin-bottom:0;display:flex;padding:var(--spacing-m) var(--spacing-l);line-height:var(--height-line-l);border-bottom:var(--border-width, .0625rem) solid var(--border-color, var(--border-subtlest));justify-content:space-between;align-items:center}.gov-dialog__header h2{font-size:var(--font-size-body-l);line-height:150%;font-weight:400}.gov-dialog__header-left{display:flex;gap:var(--spacing-m)}.gov-dialog__header-left .warning{color:var(--warning, var(--icon-warning))}.gov-dialog__header-left .error{color:var(--error, var(--icon-error))}.gov-dialog__header-left .success{color:var(--success, var(--icon-success))}.gov-dialog__header-left .neutral{color:var(--neutral, var(--icon-neutral))}.gov-dialog__header-left .primary{color:var(--primary, var(--icon-on-subtle))}.gov-dialog__header-left .secondary{color:var(--secondary, var(--icon-secondary))}rdt-gov-dialog-loading{min-height:calc(var(--dialog-min-height) - 210px);flex:1;display:grid;place-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtGovDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: RdtGovDialogComponent, isStandalone: true, selector: "rdt-gov-dialog", host: { properties: { "class.fullscreen-modal": "dialogRef.size === 'fullscreen'", "style.width": "dialogRef.size", "style.--dialog-min-height": "dialogRef.minHeight", "style.--dialog-max-height": "dialogRef.maxHeight", "style.--dialog-min-width": "dialogRef.minWidth", "style.--dialog-max-width": "dialogRef.maxWidth" } }, ngImport: i0, template: "<div class=\"gov-modal__dialog rdt-gov-dialog\">\n  <ng-container\n    *ngComponentOutlet=\"dialogRef.component; injector: dialogRefInjector\"\n  ></ng-container>\n</div>\n", styles: [":root{--dialog-min-height: 400px;--dialog-min-width: 400px;--dialog-max-height: 100%;--dialog-max-width: 100%}@keyframes rdt-gov-dialog-fade-in{0%{opacity:0}}@keyframes rdt-gov-dialog-fade-out{to{opacity:0}}@keyframes rdt-gov-dialog-slide-from-bottom{0%{transform:translateY(50px)}}@keyframes rdt-gov-dialog-scale-down{to{transform:scale(.9)}}@media(prefers-reduced-motion:no-preference){::view-transition-old(root),::view-transition-new(root){animation:none}::view-transition-new(dialog-backdrop){animation:.1s ease-out .1s both rdt-gov-dialog-fade-in}::view-transition-old(dialog-backdrop){animation:.1s ease-in both rdt-gov-dialog-fade-out}::view-transition-new(dialog){animation:.1s ease-out .1s both rdt-gov-dialog-fade-in,.4s ease both rdt-gov-dialog-slide-from-bottom}::view-transition-old(dialog){animation:.1s ease-in both rdt-gov-dialog-fade-out,.4s ease both rdt-gov-dialog-scale-down}.rdt-gov-dialog.rdt-gov-dialog--enter{animation:.1s ease-out .1s both rdt-gov-dialog-fade-in,.4s ease both rdt-gov-dialog-slide-from-bottom}.rdt-gov-dialog.rdt-gov-dialog--leave{animation:.1s ease-in both rdt-gov-dialog-fade-out,.4s ease both rdt-gov-dialog-scale-down}.cdk-overlay-backdrop.rdt-gov-dialog-backdrop--enter{animation:.1s ease-out .1s both rdt-gov-dialog-fade-in}.cdk-overlay-backdrop.rdt-gov-dialog-backdrop--leave{animation:.1s ease-in both rdt-gov-dialog-fade-out}}.fullscreen-modal{width:100vw;height:100vh}.fullscreen-modal .rdt-gov-dialog{padding:1.25rem;height:100%}.gov-dialog__content{flex:1;display:flex;flex-direction:column}.gov-modal__dialog>* rdt-gov-dialog-content{flex:1;position:relative}.gov-modal__dialog>*{min-width:var(--dialog-min-width);min-height:var(--dialog-min-height);position:relative;display:flex;flex-direction:column;width:100%;height:100%;max-height:var(--dialog-max-height);max-width:var(--dialog-max-width);border-radius:var(--border-radius, var(--corner-radius-s));background:var(--background, var(--background-block-primary));overflow:hidden;pointer-events:auto;box-shadow:0 .5rem 2rem #0000004d}.gov-dialog__header{margin-top:0;margin-bottom:0;display:flex;padding:var(--spacing-m) var(--spacing-l);line-height:var(--height-line-l);border-bottom:var(--border-width, .0625rem) solid var(--border-color, var(--border-subtlest));justify-content:space-between;align-items:center}.gov-dialog__header h2{font-size:var(--font-size-body-l);line-height:150%;font-weight:400}.gov-dialog__header-left{display:flex;gap:var(--spacing-m)}.gov-dialog__header-left .warning{color:var(--warning, var(--icon-warning))}.gov-dialog__header-left .error{color:var(--error, var(--icon-error))}.gov-dialog__header-left .success{color:var(--success, var(--icon-success))}.gov-dialog__header-left .neutral{color:var(--neutral, var(--icon-neutral))}.gov-dialog__header-left .primary{color:var(--primary, var(--icon-on-subtle))}.gov-dialog__header-left .secondary{color:var(--secondary, var(--icon-secondary))}rdt-gov-dialog-loading{min-height:calc(var(--dialog-min-height) - 210px);flex:1;display:grid;place-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtGovDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rdt-gov-dialog', standalone: true, imports: [CommonModule, CdkDrag], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: 'rdt-gov-dialog', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         '[class.fullscreen-modal]': "dialogRef.size === 'fullscreen'",
                         '[style.width]': 'dialogRef.size',
                         '[style.--dialog-min-height]': 'dialogRef.minHeight',
                         '[style.--dialog-max-height]': 'dialogRef.maxHeight',
                         '[style.--dialog-min-width]': 'dialogRef.minWidth',
                         '[style.--dialog-max-width]': 'dialogRef.maxWidth',
-                    }, template: "<div\n  class=\"gov-modal__dialog rdt-gov-dialog\"\n  cdkDrag\n  [cdkDragDisabled]=\"!dialogRef.isDraggable\"\n>\n  <ng-container\n    *ngComponentOutlet=\"dialogRef.component; injector: dialogRefInjector\"\n  ></ng-container>\n</div>\n", styles: [":root{--dialog-min-height: 400px;--dialog-min-width: 400px;--dialog-max-height: 100%;--dialog-max-width: 100%}.fullscreen-modal{width:100vw;height:100vh}.fullscreen-modal .rdt-gov-dialog{padding:1.25rem;height:100%}.gov-dialog__content{flex:1;display:flex;flex-direction:column}.gov-modal__dialog>*{min-width:var(--dialog-min-width);min-height:var(--dialog-min-height);position:relative;display:flex;flex-direction:column;width:100%;height:100%;max-height:var(--dialog-max-height);max-width:var(--dialog-max-width);border-radius:var(--border-radius, var(--corner-radius-s));background:var(--background, var(--background-block-primary));overflow:hidden;pointer-events:auto;box-shadow:0 .5rem 2rem #0000004d}.gov-modal__dialog>* rdt-gov-dialog-content{flex:1;position:relative}.gov-dialog__header{margin-top:0;margin-bottom:0;display:flex;padding:var(--spacing-m) var(--spacing-l);line-height:var(--height-line-l);border-bottom:var(--border-width, .0625rem) solid var(--border-color, var(--border-subtlest));justify-content:space-between;align-items:center}.gov-dialog__header h2{font-size:var(--font-size-body-l);line-height:150%;font-weight:400}.gov-dialog__header-left{display:flex;gap:var(--spacing-m)}.gov-dialog__header-left .warning{color:var(--warning, var(--icon-warning))}.gov-dialog__header-left .error{color:var(--error, var(--icon-error))}.gov-dialog__header-left .success{color:var(--success, var(--icon-success))}.gov-dialog__header-left .neutral{color:var(--neutral, var(--icon-neutral))}.gov-dialog__header-left .primary{color:var(--primary, var(--icon-on-subtle))}.gov-dialog__header-left .secondary{color:var(--secondary, var(--icon-secondary))}rdt-gov-dialog-loading{min-height:calc(var(--dialog-min-height) - 210px);flex:1;display:grid;place-items:center}\n"] }]
+                    }, template: "<div class=\"gov-modal__dialog rdt-gov-dialog\">\n  <ng-container\n    *ngComponentOutlet=\"dialogRef.component; injector: dialogRefInjector\"\n  ></ng-container>\n</div>\n", styles: [":root{--dialog-min-height: 400px;--dialog-min-width: 400px;--dialog-max-height: 100%;--dialog-max-width: 100%}@keyframes rdt-gov-dialog-fade-in{0%{opacity:0}}@keyframes rdt-gov-dialog-fade-out{to{opacity:0}}@keyframes rdt-gov-dialog-slide-from-bottom{0%{transform:translateY(50px)}}@keyframes rdt-gov-dialog-scale-down{to{transform:scale(.9)}}@media(prefers-reduced-motion:no-preference){::view-transition-old(root),::view-transition-new(root){animation:none}::view-transition-new(dialog-backdrop){animation:.1s ease-out .1s both rdt-gov-dialog-fade-in}::view-transition-old(dialog-backdrop){animation:.1s ease-in both rdt-gov-dialog-fade-out}::view-transition-new(dialog){animation:.1s ease-out .1s both rdt-gov-dialog-fade-in,.4s ease both rdt-gov-dialog-slide-from-bottom}::view-transition-old(dialog){animation:.1s ease-in both rdt-gov-dialog-fade-out,.4s ease both rdt-gov-dialog-scale-down}.rdt-gov-dialog.rdt-gov-dialog--enter{animation:.1s ease-out .1s both rdt-gov-dialog-fade-in,.4s ease both rdt-gov-dialog-slide-from-bottom}.rdt-gov-dialog.rdt-gov-dialog--leave{animation:.1s ease-in both rdt-gov-dialog-fade-out,.4s ease both rdt-gov-dialog-scale-down}.cdk-overlay-backdrop.rdt-gov-dialog-backdrop--enter{animation:.1s ease-out .1s both rdt-gov-dialog-fade-in}.cdk-overlay-backdrop.rdt-gov-dialog-backdrop--leave{animation:.1s ease-in both rdt-gov-dialog-fade-out}}.fullscreen-modal{width:100vw;height:100vh}.fullscreen-modal .rdt-gov-dialog{padding:1.25rem;height:100%}.gov-dialog__content{flex:1;display:flex;flex-direction:column}.gov-modal__dialog>* rdt-gov-dialog-content{flex:1;position:relative}.gov-modal__dialog>*{min-width:var(--dialog-min-width);min-height:var(--dialog-min-height);position:relative;display:flex;flex-direction:column;width:100%;height:100%;max-height:var(--dialog-max-height);max-width:var(--dialog-max-width);border-radius:var(--border-radius, var(--corner-radius-s));background:var(--background, var(--background-block-primary));overflow:hidden;pointer-events:auto;box-shadow:0 .5rem 2rem #0000004d}.gov-dialog__header{margin-top:0;margin-bottom:0;display:flex;padding:var(--spacing-m) var(--spacing-l);line-height:var(--height-line-l);border-bottom:var(--border-width, .0625rem) solid var(--border-color, var(--border-subtlest));justify-content:space-between;align-items:center}.gov-dialog__header h2{font-size:var(--font-size-body-l);line-height:150%;font-weight:400}.gov-dialog__header-left{display:flex;gap:var(--spacing-m)}.gov-dialog__header-left .warning{color:var(--warning, var(--icon-warning))}.gov-dialog__header-left .error{color:var(--error, var(--icon-error))}.gov-dialog__header-left .success{color:var(--success, var(--icon-success))}.gov-dialog__header-left .neutral{color:var(--neutral, var(--icon-neutral))}.gov-dialog__header-left .primary{color:var(--primary, var(--icon-on-subtle))}.gov-dialog__header-left .secondary{color:var(--secondary, var(--icon-secondary))}rdt-gov-dialog-loading{min-height:calc(var(--dialog-min-height) - 210px);flex:1;display:grid;place-items:center}\n"] }]
         }] });
 
 class RdtGovDialogBase {
@@ -352,12 +474,12 @@ class RdtGovDialogBase {
 }
 
 class RdtGovStandardDialogComponent extends RdtGovDialogBase {
-    message = computed(() => this.dialogRef.inputData().message);
-    buttons = computed(() => this.dialogRef.inputData().buttons);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovStandardDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: RdtGovStandardDialogComponent, isStandalone: true, selector: "rdt-gov-standard-dialog", usesInheritance: true, ngImport: i0, template: "<rdt-gov-dialog-header />\n<rdt-gov-dialog-content>\n  <p>{{ message() }}</p>\n</rdt-gov-dialog-content>\n<rdt-gov-dialog-footer>\n  @for (button of buttons(); track button.label) {\n  <rdt-gov-button\n    [appearance]=\"button.appearance\"\n    [label]=\"button.label\"\n    [size]=\"button.size\"\n    [color]=\"button.color\"\n    [icon]=\"button.icon\"\n    [iconStart]=\"button.iconStart\"\n    [autofocus]=\"button.isAutofocused\"\n    (click)=\"close(button.value)\"\n  />\n  }\n</rdt-gov-dialog-footer>\n", dependencies: [{ kind: "component", type: RdtGovDialogHeaderComponent, selector: "rdt-gov-dialog-header" }, { kind: "component", type: RdtGovDialogFooterComponent, selector: "rdt-gov-dialog-footer" }, { kind: "component", type: RdtGovDialogContentComponent, selector: "rdt-gov-dialog-content" }, { kind: "component", type: RdtGovButtonComponent, selector: "rdt-gov-button", inputs: ["appearance", "color", "size", "iconStart", "expanded"] }] });
+    message = computed(() => this.dialogRef.inputData().message, ...(ngDevMode ? [{ debugName: "message" }] : []));
+    buttons = computed(() => this.dialogRef.inputData().buttons, ...(ngDevMode ? [{ debugName: "buttons" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtGovStandardDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: RdtGovStandardDialogComponent, isStandalone: true, selector: "rdt-gov-standard-dialog", usesInheritance: true, ngImport: i0, template: "<rdt-gov-dialog-header />\n<rdt-gov-dialog-content>\n  <p>{{ message() }}</p>\n</rdt-gov-dialog-content>\n<rdt-gov-dialog-footer>\n  @for (button of buttons(); track button.label) {\n  <rdt-gov-button\n    [appearance]=\"button.appearance\"\n    [label]=\"button.label\"\n    [size]=\"button.size\"\n    [color]=\"button.color\"\n    [icon]=\"button.icon\"\n    [iconStart]=\"button.iconStart\"\n    [autofocus]=\"button.isAutofocused\"\n    (click)=\"close(button.value)\"\n  />\n  }\n</rdt-gov-dialog-footer>\n", dependencies: [{ kind: "component", type: RdtGovDialogHeaderComponent, selector: "rdt-gov-dialog-header" }, { kind: "component", type: RdtGovDialogFooterComponent, selector: "rdt-gov-dialog-footer" }, { kind: "component", type: RdtGovDialogContentComponent, selector: "rdt-gov-dialog-content" }, { kind: "component", type: RdtGovButtonComponent, selector: "rdt-gov-button", inputs: ["appearance", "color", "size", "iconStart", "expanded"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovStandardDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtGovStandardDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rdt-gov-standard-dialog', imports: [
                         RdtGovDialogHeaderComponent,
@@ -371,6 +493,138 @@ const RDT_GOV_BASE_DIALOG_CONFIG_PROVIDER = new InjectionToken('RDT_GOV_BASE_DIA
 const RDT_GOV_ALERT_DIALOG_CONFIG_PROVIDER = new InjectionToken('RDT_GOV_ALERT_DIALOG_CONFIG_PROVIDER');
 const RDT_GOV_CONFIRM_DIALOG_CONFIG_PROVIDER = new InjectionToken('RDT_GOV_CONFIRM_DIALOG_CONFIG_PROVIDER');
 
+const DEFAULT_OPTIONS = {
+    viewTransitionName: 'dialog',
+    backdropViewTransitionName: 'dialog-backdrop',
+    fallbackCloseAnimationMs: 400,
+};
+function attachOverlayWithOptionalDialogAnimation(overlayRef, portal, options) {
+    const mergedOptions = { ...DEFAULT_OPTIONS, ...options };
+    const startViewTransition = document?.startViewTransition;
+    if (prefersReducedMotion() || !startViewTransition) {
+        overlayRef.attach(portal);
+        const dialogEl = getDialogElement(overlayRef);
+        const backdropEl = getBackdropElement(overlayRef);
+        playFallbackOpenAnimation(dialogEl);
+        playFallbackBackdropOpenAnimation(backdropEl);
+        return;
+    }
+    clearViewTransitionNames();
+    const transition = startViewTransition.call(document, () => {
+        overlayRef.attach(portal);
+        const dialogEl = getDialogElement(overlayRef);
+        const backdropEl = getBackdropElement(overlayRef);
+        setViewTransitionName(dialogEl, mergedOptions.viewTransitionName);
+        setViewTransitionName(backdropEl, mergedOptions.backdropViewTransitionName);
+    });
+    transition?.finished?.finally(() => {
+        const dialogEl = getDialogElement(overlayRef);
+        const backdropEl = getBackdropElement(overlayRef);
+        dialogEl?.style.removeProperty('view-transition-name');
+        backdropEl?.style.removeProperty('view-transition-name');
+    });
+}
+function disposeOverlayWithOptionalDialogAnimation(overlayRef, options) {
+    const mergedOptions = { ...DEFAULT_OPTIONS, ...options };
+    const startViewTransition = document?.startViewTransition;
+    if (prefersReducedMotion() || !startViewTransition) {
+        const dialogEl = getDialogElement(overlayRef);
+        const backdropEl = getBackdropElement(overlayRef);
+        if (!dialogEl) {
+            overlayRef.dispose();
+            return;
+        }
+        playFallbackBackdropCloseAnimation(backdropEl);
+        playFallbackCloseAnimation(dialogEl, () => overlayRef.dispose(), {
+            fallbackCloseAnimationMs: mergedOptions.fallbackCloseAnimationMs,
+        });
+        return;
+    }
+    const dialogEl = getDialogElement(overlayRef);
+    const backdropEl = getBackdropElement(overlayRef);
+    clearViewTransitionNames();
+    setViewTransitionName(dialogEl, mergedOptions.viewTransitionName);
+    setViewTransitionName(backdropEl, mergedOptions.backdropViewTransitionName);
+    startViewTransition.call(document, () => overlayRef.dispose());
+}
+function getDialogElement(overlayRef) {
+    return overlayRef.overlayElement.querySelector('.rdt-gov-dialog');
+}
+function getBackdropElement(overlayRef) {
+    return overlayRef?.backdropElement ?? null;
+}
+function setViewTransitionName(element, transitionName) {
+    element?.style.setProperty('view-transition-name', transitionName);
+}
+function clearViewTransitionNames() {
+    if (typeof document === 'undefined')
+        return;
+    const styledElements = document.querySelectorAll('[style*="view-transition-name"]');
+    for (let i = 0; i < styledElements.length; i++) {
+        styledElements[i].style.removeProperty('view-transition-name');
+    }
+}
+function playFallbackOpenAnimation(dialogEl) {
+    if (!dialogEl)
+        return;
+    dialogEl.classList.remove('rdt-gov-dialog--enter');
+    // Force a reflow so re-opening the same overlay replays the animation.
+    void dialogEl.offsetWidth;
+    dialogEl.classList.add('rdt-gov-dialog--enter');
+    const cleanup = (event) => {
+        if (event.target !== dialogEl)
+            return;
+        dialogEl.classList.remove('rdt-gov-dialog--enter');
+    };
+    dialogEl.addEventListener('animationend', cleanup, { once: true });
+}
+function playFallbackCloseAnimation(dialogEl, dispose, opts) {
+    let disposed = false;
+    const safeDispose = () => {
+        if (disposed)
+            return;
+        disposed = true;
+        dispose();
+    };
+    dialogEl.classList.remove('rdt-gov-dialog--leave');
+    void dialogEl.offsetWidth;
+    dialogEl.classList.add('rdt-gov-dialog--leave');
+    const onEnd = (event) => {
+        if (event.target !== dialogEl)
+            return;
+        safeDispose();
+    };
+    dialogEl.addEventListener('animationend', onEnd, { once: true });
+    setTimeout(safeDispose, opts.fallbackCloseAnimationMs + 50);
+}
+function playFallbackBackdropOpenAnimation(backdropEl) {
+    if (!backdropEl)
+        return;
+    backdropEl.classList.remove('rdt-gov-dialog-backdrop--enter');
+    void backdropEl.offsetWidth;
+    backdropEl.classList.add('rdt-gov-dialog-backdrop--enter');
+    const cleanup = (event) => {
+        if (event.target !== backdropEl)
+            return;
+        backdropEl.classList.remove('rdt-gov-dialog-backdrop--enter');
+    };
+    backdropEl.addEventListener('animationend', cleanup, { once: true });
+}
+function playFallbackBackdropCloseAnimation(backdropEl) {
+    if (!backdropEl)
+        return;
+    backdropEl.classList.remove('rdt-gov-dialog-backdrop--leave');
+    void backdropEl.offsetWidth;
+    backdropEl.classList.add('rdt-gov-dialog-backdrop--leave');
+}
+function prefersReducedMotion() {
+    if (typeof window === 'undefined' ||
+        typeof window.matchMedia !== 'function') {
+        return false;
+    }
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+
 const RDT_GOV_DIALOG_DEFAULT_DATA = {
     size: 'content',
     initialLoading: false,
@@ -383,6 +637,7 @@ const RDT_GOV_DIALOG_DEFAULT_DATA = {
     maxHeight: undefined,
     header: undefined,
     headerIcons: undefined,
+    dragIcon: undefined,
     injector: undefined,
     inputData: undefined,
 };
@@ -430,8 +685,8 @@ class RdtGovDialogService {
         const dialogRef = new RdtGovDialogRef(dialogData);
         const overlayRef = this.createOverlayRef(dialogRef);
         const portal = this.createComponentPortal(dialogRef);
-        overlayRef.attach(portal);
-        dialogRef.close$.subscribe(() => overlayRef.dispose());
+        attachOverlayWithOptionalDialogAnimation(overlayRef, portal);
+        dialogRef.close$.subscribe(() => disposeOverlayWithOptionalDialogAnimation(overlayRef));
         return dialogRef;
     }
     openStandard(config) {
@@ -559,36 +814,14 @@ class RdtGovDialogService {
         };
         return this.overlay.create(overlayConfig);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovDialogService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtGovDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtGovDialogService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovDialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtGovDialogService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
 
-class RdtGovIconComponent extends RdtIconComponent {
-    size = input('s');
-    color = input();
-    parsed = computed(() => {
-        const value = this.name() || '';
-        const [type, name] = value.split('/');
-        return { type: type || '', name: name || '' };
-    });
-    isBootstrapIcon = computed(() => {
-        return this.parsed().type === 'bs';
-    });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovIconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: RdtGovIconComponent, isStandalone: true, selector: "rdt-gov-icon", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.size": "size()" }, classAttribute: "gov-icon" }, usesInheritance: true, ngImport: i0, template: "@let p = parsed(); @if (isBootstrapIcon()) {\n<i\n  class=\"bi bi-{{ p.name }} gov-icon\"\n  [attr.size]=\"size()\"\n  [attr.color]=\"color()\"\n></i>\n} @else {\n<gov-icon\n  [type]=\"p.type\"\n  [name]=\"p.name\"\n  [size]=\"size()\"\n  [color]=\"color()\"\n></gov-icon>\n}\n", styles: [":host{vertical-align:middle}gov-icon{color:var(--icon-color, currentColor)}i.bi:before{vertical-align:.125em;font-size:var(--icon-size, 1rem);color:var(--icon-color, currentColor)}i.bi[size=xs]:before{font-size:var(--icon-size, var(--icon-size-xs))}i.bi[size=s]:before{font-size:var(--icon-size, var(--icon-size-s))}i.bi[size=m]:before{font-size:var(--icon-size, var(--icon-size-m))}i.bi[size=l]:before{font-size:var(--icon-size, var(--icon-size-l))}i.bi[size=xl]:before{font-size:var(--icon-size, var(--icon-size-xl))}i.bi[color=primary]:before{color:var(--primary, var(--icon-on-subtle))}i.bi[color=secondary]:before{color:var(--secondary, var(--icon-secondary))}i.bi[color=success]:before{color:var(--success, var(--icon-success))}i.bi[color=warning]:before{color:var(--warning, var(--icon-warning))}i.bi[color=error]:before{color:var(--error, var(--icon-error))}\n"], dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i1.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "ngmodule", type: CommonModule }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovIconComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rdt-gov-icon', imports: [GovDesignSystemModule, CommonModule], host: {
-                        class: 'gov-icon',
-                        '[attr.size]': 'size()',
-                    }, template: "@let p = parsed(); @if (isBootstrapIcon()) {\n<i\n  class=\"bi bi-{{ p.name }} gov-icon\"\n  [attr.size]=\"size()\"\n  [attr.color]=\"color()\"\n></i>\n} @else {\n<gov-icon\n  [type]=\"p.type\"\n  [name]=\"p.name\"\n  [size]=\"size()\"\n  [color]=\"color()\"\n></gov-icon>\n}\n", styles: [":host{vertical-align:middle}gov-icon{color:var(--icon-color, currentColor)}i.bi:before{vertical-align:.125em;font-size:var(--icon-size, 1rem);color:var(--icon-color, currentColor)}i.bi[size=xs]:before{font-size:var(--icon-size, var(--icon-size-xs))}i.bi[size=s]:before{font-size:var(--icon-size, var(--icon-size-s))}i.bi[size=m]:before{font-size:var(--icon-size, var(--icon-size-m))}i.bi[size=l]:before{font-size:var(--icon-size, var(--icon-size-l))}i.bi[size=xl]:before{font-size:var(--icon-size, var(--icon-size-xl))}i.bi[color=primary]:before{color:var(--primary, var(--icon-on-subtle))}i.bi[color=secondary]:before{color:var(--secondary, var(--icon-secondary))}i.bi[color=success]:before{color:var(--success, var(--icon-success))}i.bi[color=warning]:before{color:var(--warning, var(--icon-warning))}i.bi[color=error]:before{color:var(--error, var(--icon-error))}\n"] }]
-        }] });
-
 const RDT_GOV_NOTIFICATION_DEFAULT_CONFIG = {
     duration: 3000,
     positionVert: 'top',
@@ -613,10 +846,10 @@ const RDT_GOV_NOTIFICATION_DATA_PROVIDER = new InjectionToken('RDT_GOV_NOTIFICAT
  */
 class RdtGovNotificationPopupComponent {
     data = inject(RDT_GOV_NOTIFICATION_DATA_PROVIDER);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovNotificationPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: RdtGovNotificationPopupComponent, isStandalone: true, selector: "rdt-gov-notification-popup", ngImport: i0, template: "@if(data){\n<gov-toast\n  [color]=\"data.color\"\n  [gravity]=\"data.positionVert\"\n  [position]=\"data.positionHoriz\"\n  [type]=\"data.type\"\n  [closeLabel]=\"data.closeLabel\"\n>\n  <div class=\"toast-wrapper\">\n    @if (data.icon) {\n    <span class=\"toast-icon\">\n      <ng-container rdtIconOutlet [inputs]=\"{ name: data.icon }\"></ng-container>\n    </span>\n    }\n    <div>\n      @if(data.header) {\n      <span class=\"toast-header\">{{ data.header }}</span>\n      }\n      <span>{{ data.message }}</span>\n    </div>\n  </div>\n</gov-toast>\n}\n", styles: [".toast-wrapper{display:flex;gap:var(--spacing-s-nudge);align-items:center}.toast-header{font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i1.GovToast, selector: "gov-toast", inputs: ["accessibleCloseLabel", "closeLabel", "color", "gravity", "position", "time", "type"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RdtIconOutletDirective, selector: "[rdtIconOutlet]", exportAs: ["rdtIconOutlet"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtGovNotificationPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: RdtGovNotificationPopupComponent, isStandalone: true, selector: "rdt-gov-notification-popup", ngImport: i0, template: "@if(data){\n<gov-toast\n  [color]=\"data.color\"\n  [gravity]=\"data.positionVert\"\n  [position]=\"data.positionHoriz\"\n  [type]=\"data.type\"\n  [closeLabel]=\"data.closeLabel\"\n>\n  <div class=\"toast-wrapper\">\n    @if (data.icon) {\n    <span class=\"toast-icon\">\n      <ng-container rdtIconOutlet [inputs]=\"{ name: data.icon }\"></ng-container>\n    </span>\n    }\n    <div>\n      @if(data.header) {\n      <span class=\"toast-header\">{{ data.header }}</span>\n      }\n      <span>{{ data.message }}</span>\n    </div>\n  </div>\n</gov-toast>\n}\n", styles: [".toast-wrapper{display:flex;gap:var(--spacing-s-nudge);align-items:center}.toast-header{font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i1.GovToast, selector: "gov-toast", inputs: ["accessibleCloseLabel", "closeLabel", "color", "gravity", "position", "time", "type"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RdtIconOutletDirective, selector: "[rdtIconOutlet]", exportAs: ["rdtIconOutlet"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovNotificationPopupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtGovNotificationPopupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rdt-gov-notification-popup', imports: [GovDesignSystemModule, CommonModule, RdtIconOutletDirective], template: "@if(data){\n<gov-toast\n  [color]=\"data.color\"\n  [gravity]=\"data.positionVert\"\n  [position]=\"data.positionHoriz\"\n  [type]=\"data.type\"\n  [closeLabel]=\"data.closeLabel\"\n>\n  <div class=\"toast-wrapper\">\n    @if (data.icon) {\n    <span class=\"toast-icon\">\n      <ng-container rdtIconOutlet [inputs]=\"{ name: data.icon }\"></ng-container>\n    </span>\n    }\n    <div>\n      @if(data.header) {\n      <span class=\"toast-header\">{{ data.header }}</span>\n      }\n      <span>{{ data.message }}</span>\n    </div>\n  </div>\n</gov-toast>\n}\n", styles: [".toast-wrapper{display:flex;gap:var(--spacing-s-nudge);align-items:center}.toast-header{font-weight:500}\n"] }]
         }] });
@@ -685,25 +918,23 @@ class RdtGovNotificationService {
     close(overlayRef) {
         overlayRef?.dispose();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovNotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovNotificationService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtGovNotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtGovNotificationService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovNotificationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtGovNotificationService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
 
 class RdtGovNumberInputComponent extends RdtNumericInputComponent {
     renderer = inject(Renderer2);
-    govInput = viewChild('govInput');
-    size = input('s');
-    icon = input(null);
-    iconStart = input(null);
-    labelPositionInput = input('top', {
-        alias: 'labelPosition',
-    });
-    labelPosition = linkedSignal(() => this.labelPositionInput());
-    inputElement = signal(null);
+    govInput = viewChild('govInput', ...(ngDevMode ? [{ debugName: "govInput" }] : []));
+    size = input('s', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : []));
+    iconStart = input(null, ...(ngDevMode ? [{ debugName: "iconStart" }] : []));
+    labelPositionInput = input('top', { ...(ngDevMode ? { debugName: "labelPositionInput" } : {}), alias: 'labelPosition' });
+    labelPosition = linkedSignal(() => this.labelPositionInput(), ...(ngDevMode ? [{ debugName: "labelPosition" }] : []));
+    inputElement = signal(null, ...(ngDevMode ? [{ debugName: "inputElement" }] : []));
     hasErrors = false;
     isEmpty(value) {
         return value == null;
@@ -734,14 +965,14 @@ class RdtGovNumberInputComponent extends RdtNumericInputComponent {
                 this.renderer.removeAttribute(input, 'readonly');
             }
         }
-    });
+    }, ...(ngDevMode ? [{ debugName: "readonlyEffect" }] : []));
     inputElementEffect = effect(async () => {
         const govInput = this.govInput()?.nativeElement;
         if (govInput) {
             const input = await govInput.getRef();
             this.inputElement.set(input);
         }
-    });
+    }, ...(ngDevMode ? [{ debugName: "inputElementEffect" }] : []));
     errorFixEffect = effect(() => {
         const inputElement = this.inputElement();
         const visibleErrors = this.visibleErrors();
@@ -753,7 +984,7 @@ class RdtGovNumberInputComponent extends RdtNumericInputComponent {
                 forceFocus(inputElement);
             }
         }
-    });
+    }, ...(ngDevMode ? [{ debugName: "errorFixEffect" }] : []));
     async focus() {
         const govInput = await this.govInput()?.nativeElement;
         const el = await govInput?.getRef();
@@ -767,8 +998,8 @@ class RdtGovNumberInputComponent extends RdtNumericInputComponent {
             }, 1); // wait 1ms
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovNumberInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: RdtGovNumberInputComponent, isStandalone: true, selector: "rdt-gov-number-input", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconStart: { classPropertyName: "iconStart", publicName: "iconStart", isSignal: true, isRequired: false, transformFunction: null }, labelPositionInput: { classPropertyName: "labelPositionInput", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtGovNumberInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: RdtGovNumberInputComponent, isStandalone: true, selector: "rdt-gov-number-input", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconStart: { classPropertyName: "iconStart", publicName: "iconStart", isSignal: true, isRequired: false, transformFunction: null }, labelPositionInput: { classPropertyName: "labelPositionInput", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: RdtGovNumberInputComponent,
@@ -778,9 +1009,9 @@ class RdtGovNumberInputComponent extends RdtNumericInputComponent {
                 provide: RdtBaseFormInputComponent,
                 useExisting: RdtGovNumberInputComponent,
             },
-        ], viewQueries: [{ propertyName: "govInput", first: true, predicate: ["govInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@let lPos = labelPosition(); @if(lPos === 'top' && label().length>0){\n<gov-form-label slot=\"left\" size=\"m\" [class.warning-color-gov-label]=\"hasError\"\n  >{{ label() }} @if (required()) {\n  <span class=\"warning-color-text\">*</span>\n  }</gov-form-label\n>\n}\n<gov-form-input\n  #govInput\n  input-type=\"number\"\n  [size]=\"size()\"\n  [value]=\"internalValue()\"\n  [placeholder]=\"placeholder()\"\n  [autocomplete]=\"autocomplete()\"\n  [min]=\"min()\"\n  [max]=\"max()\"\n  [step]=\"step()\"\n  [invalid]=\"invalid() && touched()\"\n  [attr.invalid]=\"invalid() && touched()\"\n  [required]=\"required()\"\n  [disabled]=\"disabled()\"\n  [attr.disabled]=\"disabled()\"\n  [name]=\"id()\"\n  [identifier]=\"id()\"\n  (gov-input)=\"onInput($event.detail.value)\"\n  (gov-focus)=\"onFocus()\"\n  (gov-blur)=\"onBlur()\"\n>\n  @let lI = iconStart(); @let rI = icon(); @if(lPos === 'left') {\n  <p\n    class=\"gov-form-label__label s_label\"\n    slot=\"prefix\"\n    [class.warning-color-text]=\"hasError\"\n  >\n    {{ label() }} @if (required()) {\n    <span class=\"warning-color-text\">*</span>\n    }\n  </p>\n  } @if(lPos === 'right') {\n  <p\n    class=\"gov-form-label__label s_label\"\n    slot=\"sufix\"\n    [class.warning-color-text]=\"hasError\"\n  >\n    {{ label() }} @if (required()) {\n    <span class=\"warning-color-text\">*</span>\n    }\n  </p>\n  } @if (lI) {\n  <span slot=\"icon-start\" style=\"width: auto\">\n    <ng-container rdtIconOutlet [inputs]=\"{ name: lI }\"></ng-container>\n  </span>\n  } @if (rI) {\n  <span slot=\"icon-end\" style=\"width: auto\">\n    <ng-container rdtIconOutlet [inputs]=\"{ name: rI }\"></ng-container>\n  </span>\n  }\n</gov-form-input>\n@let hasError = visibleErrors() | rdtFormError; @if(hasError){\n<gov-form-message slot=\"bottom\" color=\"error\" [attr.size]=\"size()\">\n  <gov-icon\n    type=\"components\"\n    name=\"exclamation-triangle-fill\"\n    slot=\"validation-icon\"\n  ></gov-icon>\n  {{ hasError }}\n</gov-form-message>\n}\n", styles: [".warning-color-icon{color:var(--icon-error)!important}.warning-color-text{color:var(--text-status-error)!important}.warning-color-gov-label .gov-form-label__label{color:var(--form-state-label-error, var(--text-status-error))!important}.s_label{font-size:var(--font-size-body-s);line-height:150%;font-weight:400}gov-form-message{font-size:var(--font-size-body-s)}rdt-gov-number-input,rdt-gov-text-input,rdt-gov-select{min-width:60px}\n"], dependencies: [{ kind: "pipe", type: RdtFormErrorPipe, name: "rdtFormError" }, { kind: "directive", type: RdtIconOutletDirective, selector: "[rdtIconOutlet]", exportAs: ["rdtIconOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "govInput", first: true, predicate: ["govInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@let lPos = labelPosition(); @if(lPos === 'top' && label().length>0){\n<gov-form-label slot=\"left\" size=\"m\" [class.warning-color-gov-label]=\"hasError\"\n  >{{ label() }} @if (required()) {\n  <span class=\"warning-color-text\">*</span>\n  }</gov-form-label\n>\n}\n<gov-form-input\n  #govInput\n  input-type=\"number\"\n  [size]=\"size()\"\n  [value]=\"internalValue()\"\n  [placeholder]=\"placeholder()\"\n  [autocomplete]=\"autocomplete()\"\n  [min]=\"min()\"\n  [max]=\"max()\"\n  [step]=\"step()\"\n  [invalid]=\"invalid() && touched()\"\n  [attr.invalid]=\"invalid() && touched()\"\n  [required]=\"required()\"\n  [disabled]=\"disabled()\"\n  [attr.disabled]=\"disabled()\"\n  [name]=\"id()\"\n  [identifier]=\"id()\"\n  (gov-input)=\"onInput($event.detail.value)\"\n  (gov-focus)=\"onFocus()\"\n  (gov-blur)=\"onBlur()\"\n>\n  @let lI = iconStart(); @let rI = icon(); @if(lPos === 'left') {\n  <p\n    class=\"gov-form-label__label s_label\"\n    slot=\"prefix\"\n    [class.warning-color-text]=\"hasError\"\n  >\n    {{ label() }} @if (required()) {\n    <span class=\"warning-color-text\">*</span>\n    }\n  </p>\n  } @if(lPos === 'right') {\n  <p\n    class=\"gov-form-label__label s_label\"\n    slot=\"sufix\"\n    [class.warning-color-text]=\"hasError\"\n  >\n    {{ label() }} @if (required()) {\n    <span class=\"warning-color-text\">*</span>\n    }\n  </p>\n  } @if (lI) {\n  <span slot=\"icon-start\" style=\"width: auto\">\n    <ng-container rdtIconOutlet [inputs]=\"{ name: lI }\"></ng-container>\n  </span>\n  } @if (rI) {\n  <span slot=\"icon-end\" style=\"width: auto\">\n    <ng-container rdtIconOutlet [inputs]=\"{ name: rI }\"></ng-container>\n  </span>\n  }\n</gov-form-input>\n@let hasError = visibleErrors() | rdtFormError; @if(hasError){\n<gov-form-message slot=\"bottom\" color=\"error\" [attr.size]=\"size()\">\n  <gov-icon\n    type=\"components\"\n    name=\"exclamation-triangle-fill\"\n    slot=\"validation-icon\"\n  ></gov-icon>\n  {{ hasError }}\n</gov-form-message>\n}\n", styles: [".warning-color-icon{color:var(--icon-error)!important}.warning-color-text{color:var(--text-status-error)!important}.warning-color-gov-label .gov-form-label__label{color:var(--form-state-label-error, var(--text-status-error))!important}.s_label{font-size:var(--font-size-body-s);line-height:150%;font-weight:400}gov-form-message{font-size:var(--font-size-body-s)}rdt-gov-number-input,rdt-gov-text-input,rdt-gov-select{min-width:60px}\n"], dependencies: [{ kind: "directive", type: RdtIconOutletDirective, selector: "[rdtIconOutlet]", exportAs: ["rdtIconOutlet"] }, { kind: "pipe", type: RdtFormErrorPipe, name: "rdtFormError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovNumberInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtGovNumberInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rdt-gov-number-input', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [RdtFormErrorPipe, RdtIconOutletDirective], providers: [
                         {
@@ -793,13 +1024,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                             useExisting: RdtGovNumberInputComponent,
                         },
                     ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@let lPos = labelPosition(); @if(lPos === 'top' && label().length>0){\n<gov-form-label slot=\"left\" size=\"m\" [class.warning-color-gov-label]=\"hasError\"\n  >{{ label() }} @if (required()) {\n  <span class=\"warning-color-text\">*</span>\n  }</gov-form-label\n>\n}\n<gov-form-input\n  #govInput\n  input-type=\"number\"\n  [size]=\"size()\"\n  [value]=\"internalValue()\"\n  [placeholder]=\"placeholder()\"\n  [autocomplete]=\"autocomplete()\"\n  [min]=\"min()\"\n  [max]=\"max()\"\n  [step]=\"step()\"\n  [invalid]=\"invalid() && touched()\"\n  [attr.invalid]=\"invalid() && touched()\"\n  [required]=\"required()\"\n  [disabled]=\"disabled()\"\n  [attr.disabled]=\"disabled()\"\n  [name]=\"id()\"\n  [identifier]=\"id()\"\n  (gov-input)=\"onInput($event.detail.value)\"\n  (gov-focus)=\"onFocus()\"\n  (gov-blur)=\"onBlur()\"\n>\n  @let lI = iconStart(); @let rI = icon(); @if(lPos === 'left') {\n  <p\n    class=\"gov-form-label__label s_label\"\n    slot=\"prefix\"\n    [class.warning-color-text]=\"hasError\"\n  >\n    {{ label() }} @if (required()) {\n    <span class=\"warning-color-text\">*</span>\n    }\n  </p>\n  } @if(lPos === 'right') {\n  <p\n    class=\"gov-form-label__label s_label\"\n    slot=\"sufix\"\n    [class.warning-color-text]=\"hasError\"\n  >\n    {{ label() }} @if (required()) {\n    <span class=\"warning-color-text\">*</span>\n    }\n  </p>\n  } @if (lI) {\n  <span slot=\"icon-start\" style=\"width: auto\">\n    <ng-container rdtIconOutlet [inputs]=\"{ name: lI }\"></ng-container>\n  </span>\n  } @if (rI) {\n  <span slot=\"icon-end\" style=\"width: auto\">\n    <ng-container rdtIconOutlet [inputs]=\"{ name: rI }\"></ng-container>\n  </span>\n  }\n</gov-form-input>\n@let hasError = visibleErrors() | rdtFormError; @if(hasError){\n<gov-form-message slot=\"bottom\" color=\"error\" [attr.size]=\"size()\">\n  <gov-icon\n    type=\"components\"\n    name=\"exclamation-triangle-fill\"\n    slot=\"validation-icon\"\n  ></gov-icon>\n  {{ hasError }}\n</gov-form-message>\n}\n", styles: [".warning-color-icon{color:var(--icon-error)!important}.warning-color-text{color:var(--text-status-error)!important}.warning-color-gov-label .gov-form-label__label{color:var(--form-state-label-error, var(--text-status-error))!important}.s_label{font-size:var(--font-size-body-s);line-height:150%;font-weight:400}gov-form-message{font-size:var(--font-size-body-s)}rdt-gov-number-input,rdt-gov-text-input,rdt-gov-select{min-width:60px}\n"] }]
-        }] });
+        }], propDecorators: { govInput: [{ type: i0.ViewChild, args: ['govInput', { isSignal: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStart", required: false }] }], labelPositionInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }] } });
 
 class RdtGovSelectOfflineProviderDirective extends RdtSelectOfflineDatasourceProviderDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovSelectOfflineProviderDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0", type: RdtGovSelectOfflineProviderDirective, isStandalone: true, selector: "rdt-gov-select[options]", usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtGovSelectOfflineProviderDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.2", type: RdtGovSelectOfflineProviderDirective, isStandalone: true, selector: "rdt-gov-select[options]", usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovSelectOfflineProviderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtGovSelectOfflineProviderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'rdt-gov-select[options]',
@@ -809,23 +1040,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
 class RdtGovSelectComponent extends RdtBaseSelectCommonComponent {
     overlay = inject(Overlay);
     viewContainerRef = inject(ViewContainerRef);
-    scrollContainer = viewChild('scrollContainer');
-    selectButton = viewChild('selectButton');
-    overlayTemplate = viewChild('overlayContainer');
-    optionEls = viewChildren((RdtSelectOptionDirective));
-    hideErrors = input(false, { transform: booleanAttribute });
-    multi = input(false, { transform: booleanAttribute });
-    size = input('s');
-    showClear = input(true, { transform: booleanAttribute });
-    showSearchInput = input(false, {
-        transform: booleanAttribute,
-        alias: 'showSearch',
-    });
-    showSearch = linkedSignal(() => this.showSearchInput());
-    labelPositionInput = input('top', {
-        alias: 'labelPosition',
-    });
-    labelPosition = linkedSignal(() => this.labelPositionInput());
+    scrollContainer = viewChild('scrollContainer', ...(ngDevMode ? [{ debugName: "scrollContainer" }] : []));
+    selectButton = viewChild('selectButton', ...(ngDevMode ? [{ debugName: "selectButton" }] : []));
+    overlayTemplate = viewChild('overlayContainer', ...(ngDevMode ? [{ debugName: "overlayTemplate" }] : []));
+    optionEls = viewChildren((RdtSelectOptionDirective), ...(ngDevMode ? [{ debugName: "optionEls" }] : []));
+    hideErrors = input(false, { ...(ngDevMode ? { debugName: "hideErrors" } : {}), transform: booleanAttribute });
+    multi = input(false, { ...(ngDevMode ? { debugName: "multi" } : {}), transform: booleanAttribute });
+    size = input('s', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    showClear = input(true, { ...(ngDevMode ? { debugName: "showClear" } : {}), transform: booleanAttribute });
+    showSearchInput = input(false, { ...(ngDevMode ? { debugName: "showSearchInput" } : {}), transform: booleanAttribute,
+        alias: 'showSearch' });
+    showSearch = linkedSignal(() => this.showSearchInput(), ...(ngDevMode ? [{ debugName: "showSearch" }] : []));
+    labelPositionInput = input('top', { ...(ngDevMode ? { debugName: "labelPositionInput" } : {}), alias: 'labelPosition' });
+    labelPosition = linkedSignal(() => this.labelPositionInput(), ...(ngDevMode ? [{ debugName: "labelPosition" }] : []));
     keyManager = this.getKeyManager();
     /** Sets up a key manager to listen to keyboard events on the overlay panel. */
     getKeyManager() {
@@ -841,7 +1068,7 @@ class RdtGovSelectComponent extends RdtBaseSelectCommonComponent {
             this.overlayRef.hasAttached()) {
             setTimeout(() => this.keyManager.setActiveItem(0));
         }
-    });
+    }, ...(ngDevMode ? [{ debugName: "visibleOptionsEffect" }] : []));
     resizeEffect = effect(() => {
         const btn = this.selectButton()?.nativeElement;
         const observer = new ResizeObserver((entries) => {
@@ -856,7 +1083,7 @@ class RdtGovSelectComponent extends RdtBaseSelectCommonComponent {
             observer.observe(btn);
         }
         return () => observer.disconnect();
-    });
+    }, ...(ngDevMode ? [{ debugName: "resizeEffect" }] : []));
     overlayRef = null;
     isEmpty(value) {
         return value === null || (Array.isArray(value) && value.length === 0);
@@ -864,7 +1091,7 @@ class RdtGovSelectComponent extends RdtBaseSelectCommonComponent {
     selectedLabel = computed(() => this.store
         .selectedItems()
         .map((i) => i.label)
-        .join(', ') || null);
+        .join(', ') || null, ...(ngDevMode ? [{ debugName: "selectedLabel" }] : []));
     onClearClick(event) {
         this.store.unselectAll();
     }
@@ -1004,7 +1231,7 @@ class RdtGovSelectComponent extends RdtBaseSelectCommonComponent {
             const positionStrategy = this.getPositionStrategy(selectButton);
             overlay.updatePositionStrategy(positionStrategy);
         }
-    });
+    }, ...(ngDevMode ? [{ debugName: "selectButtonEffect" }] : []));
     getPositionStrategy(element) {
         return this.overlay
             .position()
@@ -1050,7 +1277,7 @@ class RdtGovSelectComponent extends RdtBaseSelectCommonComponent {
             }
         });
         onCleanup(() => sub.unsubscribe());
-    });
+    }, ...(ngDevMode ? [{ debugName: "scrollEffect" }] : []));
     scrollDistToBottom(container) {
         return (container.scrollHeight - (container.scrollTop + container.clientHeight));
     }
@@ -1065,8 +1292,8 @@ class RdtGovSelectComponent extends RdtBaseSelectCommonComponent {
         this.overlayRef?.dispose();
         this.keyManager.destroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: RdtGovSelectComponent, isStandalone: true, selector: "rdt-gov-select", inputs: { hideErrors: { classPropertyName: "hideErrors", publicName: "hideErrors", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, showSearchInput: { classPropertyName: "showSearchInput", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, labelPositionInput: { classPropertyName: "labelPositionInput", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtGovSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: RdtGovSelectComponent, isStandalone: true, selector: "rdt-gov-select", inputs: { hideErrors: { classPropertyName: "hideErrors", publicName: "hideErrors", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, showSearchInput: { classPropertyName: "showSearchInput", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, labelPositionInput: { classPropertyName: "labelPositionInput", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             RdtSelectStore,
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -1085,9 +1312,9 @@ class RdtGovSelectComponent extends RdtBaseSelectCommonComponent {
                 provide: RdtBaseFormInputComponent,
                 useExisting: RdtGovSelectComponent,
             },
-        ], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }, { propertyName: "selectButton", first: true, predicate: ["selectButton"], descendants: true, isSignal: true }, { propertyName: "overlayTemplate", first: true, predicate: ["overlayContainer"], descendants: true, isSignal: true }, { propertyName: "optionEls", predicate: (RdtSelectOptionDirective), descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@let sel = selectedLabel(); @let lPos = labelPosition(); @let hasError =\nhideErrors() ? '' : visibleErrors() | rdtFormError; @if(lPos === 'top' &&\nlabel().length>0){\n<gov-form-label slot=\"left\" [class.warning-color-gov-label]=\"hasError\" size=\"s\"\n  >{{ label() }}\n  @if (required()) {\n  <span class=\"warning-color-text\">*</span>\n  }</gov-form-label\n>\n}\n<div\n  class=\"gov-form-select gov-form-input\"\n  [class.has-clear]=\"showClear() && !!sel\"\n  [attr.size]=\"size()\"\n  [attr.invalid]=\"invalid() && touched()\"\n  [attr.disabled]=\"disabled()\"\n>\n  @if (lPos === 'left') {\n  <p\n    class=\"gov-form-label__label s_label\"\n    slot=\"prefix\"\n    [class.warning-color-text]=\"hasError\"\n  >\n    {{ label() }}\n    @if (required()) {\n    <span class=\"warning-color-text\">*</span>\n    }\n  </p>\n  }\n  <div class=\"element\">\n    <button\n      #selectButton\n      [attr.size]=\"size()\"\n      (click)=\"openOverlay()\"\n      (keydown)=\"handleButtonKeydown($event)\"\n      [disabled]=\"disabled()\"\n      class=\"select\"\n      type=\"button\"\n      (blur)=\"handleButtonBlur()\"\n      (focus)=\"onFocus()\"\n    >\n      <div class=\"scroll-content\" [class.warning-color-text]=\"hasError\">\n        @if (sel) {\n        {{ sel }}\n        } @else if (!disabled() && !readonlyInput()) {\n        {{ placeholder() || '&nbsp;' }}\n        }\n      </div>\n      @if (showClear() && sel) {\n      <gov-button\n        class=\"clear-button\"\n        iconStart=\"basic/x\"\n        (click)=\"onClearClick($event)\"\n        propagate=\"false\"\n        buttonType=\"base\"\n        color=\"error\"\n        [rdtDisabled]=\"disabled()\"\n      ></gov-button>\n      } @if (loading()) {\n      <rdt-spinner />\n      } @else { @if(hasError){\n      <gov-icon\n        name=\"exclamation-lg\"\n        class=\"icon-warning\"\n        [ngClass]=\"'icon-' + size()\"\n      ></gov-icon>\n      }\n      <gov-icon\n        name=\"chevron-down\"\n        class=\"icon-arrow\"\n        [class.warning-color-icon]=\"hasError\"\n      ></gov-icon>\n      }\n    </button>\n  </div>\n  @if (lPos === 'right') {\n  <p\n    class=\"gov-form-label__label s_label\"\n    slot=\"sufix\"\n    [class.warning-color-text]=\"hasError\"\n  >\n    {{ label() }}\n    @if (required()) {\n    <span class=\"warning-color-text\">*</span>\n    }\n  </p>\n  }\n</div>\n<ng-template #overlayContainer>\n  <div class=\"rdt-gov-select-container\" [attr.data-size]=\"size()\">\n    @if (showSearch()) {\n    <div class=\"search-container\" [class.loading]=\"loading()\">\n      <input\n        class=\"gov-form-input\"\n        size=\"s\"\n        type=\"search\"\n        rdtAutofocusOnInit\n        [formControl]=\"inputCtrl\"\n        (keydown)=\"handleInputKeydown($event)\"\n        [placeholder]=\"'RDT_SELECT_ENTER_SEARCH' | rdtTranslate\"\n      />\n      @if (loading()) {\n      <rdt-spinner />\n      }\n    </div>\n    }\n    <ul role=\"listbox\" aria-hidden=\"false\" #scrollContainer>\n      @for (option of visibleOptions(); track option.id) {\n      <li role=\"option\" [attr.aria-selected]=\"option.selected\">\n        <button\n          tabindex=\"-1\"\n          [rdtSelectOption]=\"option.id\"\n          (click)=\"selectOption(option.id)\"\n          class=\"option\"\n          type=\"button\"\n        >\n          <gov-icon\n            name=\"check-lg\"\n            [class.invisible]=\"!option.selected\"\n            class=\"mr-1 w-4 picked\"\n          />\n          {{ $any(option.label) | rdtTranslate }}\n        </button>\n      </li>\n      } @empty { @if (loading()) {\n      <li class=\"pointer-events-none\">\n        <div class=\"option\">\n          {{ 'RDT_GOV_SELECT_LOADING_VALUES' | rdtTranslate }}\n        </div>\n      </li>\n      } @else if (store.query()) {\n      <li class=\"pointer-events-none\">\n        <div class=\"option\">\n          {{ 'RDT_GOV_SELECT_NO_VALUES_FOUND' | rdtTranslate }}\n        </div>\n      </li>\n      } @else if (!store.datasource()?.queryRequired) {\n      <li class=\"pointer-events-none\">\n        <div class=\"option\">\n          {{ 'RDT_GOV_SELECT_NO_VALUES_AVAILABLE' | rdtTranslate }}\n        </div>\n      </li>\n      } }\n    </ul>\n  </div>\n</ng-template>\n@if(hasError){\n<gov-form-message slot=\"bottom\" color=\"error\" [attr.size]=\"size()\">\n  <gov-icon\n    type=\"components\"\n    name=\"exclamation-triangle-fill\"\n    slot=\"validation-icon\"\n  ></gov-icon>\n  {{ hasError }}\n</gov-form-message>\n}\n", styles: [".rdt-option-selected{background:var(--gov-autocomplete-item-hover, var(--color-neutral-600))!important;--text-primary: var(--color-primary-50) !important}.icon-warning{width:var(--icon-size)!important;height:var(--icon-size)!important}.icon-xs{--icon-size: 12px}.icon-s{--icon-size: 14px}.icon-m{--icon-size: 16px}.icon-l{--icon-size: 18px}.icon-xl{--icon-size: 20px}rdt-gov-select{display:inline-block;width:100%;max-width:100%}rdt-gov-select .gov-form-select{width:100%}rdt-gov-select .gov-form-select.has-clear .select{padding-right:calc(1.5rem + var(--spacing-s))!important}rdt-gov-select .gov-form-input{border:none!important;background-color:transparent!important}rdt-gov-select .select{display:flex}rdt-gov-select .select rdt-spinner{position:absolute;right:.5rem;width:1rem;height:1rem}rdt-gov-select [size=xs].gov-form-select .select{min-height:var(--height-component-xs);font-size:var(--font-size-body-xs)}rdt-gov-select [size=xs].gov-form-select .select:hover{background-color:var(--button-outlined-primary-hover)}rdt-gov-select [size=s].gov-form-select .select{min-height:var(--height-component-s);font-size:var(--font-size-body-s)}rdt-gov-select [size=s].gov-form-select .select:hover{background-color:var(--button-outlined-primary-hover)}rdt-gov-select [size=m].gov-form-select .select{min-height:var(--height-component-m);font-size:var(--font-size-body-m)}rdt-gov-select [size=m].gov-form-select .select:hover{background-color:var(--button-outlined-primary-hover)}rdt-gov-select [size=l].gov-form-select .select{min-height:var(--height-component-l);font-size:var(--font-size-body-l)}rdt-gov-select [size=l].gov-form-select .select:hover{background-color:var(--button-outlined-primary-hover)}rdt-gov-select [size=xl].gov-form-select .select{min-height:var(--height-component-xl);font-size:var(--font-size-body-xl)}rdt-gov-select [size=xl].gov-form-select .select:hover{background-color:var(--button-outlined-primary-hover)}rdt-gov-select [size=xs].gov-form-select .select{padding:var(--spacing-multiline-vertical-padding-xs) var(--spacing-xs-nudge)}rdt-gov-select [size=s].gov-form-select .select{padding:var(--spacing-multiline-vertical-padding-s) var(--spacing-s)}rdt-gov-select [size=m].gov-form-select .select{padding:var(--spacing-multiline-vertical-padding-m) var(--spacing-s-nudge)}rdt-gov-select [size=l].gov-form-select .select{padding:var(--spacing-multiline-vertical-padding-l) var(--spacing-m)}rdt-gov-select [size=xl].gov-form-select .select{padding:var(--spacing-multiline-vertical-padding-xl) var(--spacing-m-nudge)}rdt-gov-select .gov-form-select .select{position:relative;border:none;width:100%;border-radius:var(--corner-radius-s);background-color:var(--background-block-primary);font-family:var(--font-family);text-align:left}rdt-gov-select [invalid=true].gov-form-input .select{border-color:var(--background-status-error);color:var(--background-status-error)}rdt-gov-select .icon-arrow{color:var(--text-primary);position:absolute;top:50%;display:flex;justify-content:center;transform:translateY(-50%);pointer-events:none;right:.75rem;width:.75rem;height:.75rem}rdt-gov-select .icon-warning{color:var(--icon-error);position:absolute;top:50%;display:flex;justify-content:center;transform:translateY(-50%);pointer-events:none;right:1.85rem;width:.75rem;height:.75rem}rdt-gov-select .scroll-content{display:flex;align-items:center;color:var(--text-primary);width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}rdt-gov-select .clear-button{display:flex;position:absolute;right:2rem;top:50%;transform:translateY(-50%)}rdt-gov-select .clear-button button{padding:0!important;min-height:auto!important;--icon-size-xs: 1rem}rdt-gov-select .clear-button gov-icon[slot=left-icon]{left:0!important;position:inherit!important;top:0!important;display:inline!important;transform:none!important}rdt-gov-select .element{max-width:100%}.rdt-gov-select-container{width:100%;margin-top:.5rem;margin-bottom:.5rem;overflow:hidden;border:1px solid var(--color-neutral-600);border-radius:0;background-color:var(--background-block-primary)}.rdt-gov-select-container ul{padding-left:0;margin-top:0;margin-bottom:0;list-style:none;max-height:14.0625rem;overflow-x:hidden;overflow-y:auto;overscroll-behavior:none}.rdt-gov-select-container ul .option{font-family:var(--font-family);color:var(--text-primary);border:none;display:flex;align-items:center;padding:.75rem .5rem;width:100%;margin:0;background:none;text-align:left}.rdt-gov-select-container ul .option gov-icon{padding-right:var(--spacing-s)}.rdt-gov-select-container ul .option gov-icon.invisible{display:none}.rdt-gov-select-container ul .option:hover{--text-primary: var(--color-primary-50);background:var(--color-neutral-600)}.rdt-gov-select-container li{margin-bottom:0}.rdt-gov-select-container .picked{color:var(--text-primary)}.rdt-gov-select-container .search-spinner{--spinner-size: 1.2rem;position:absolute;right:1rem;top:100%;transform:translateY(calc(var(--spinner-size) / -2))}.rdt-gov-select-container .search-spinner .sis-icon-32-fix{height:var(--spinner-size)}.rdt-gov-select-container .search-container{width:100%;position:relative}.rdt-gov-select-container .search-container input{font-family:var(--font-family);border-radius:0;border-top:1px;border-left:1px;border-right:1px;padding:.75rem .5rem;width:100%;background-color:var(--background-block-primary);color:var(--text-primary)}.rdt-gov-select-container .search-container input:focus-visible{outline:var(.125rem) solid var(--status-focus);outline-offset:0}.rdt-gov-select-container .search-container.loading input::-webkit-search-cancel-button{position:relative;right:1rem}[data-size=xs].rdt-gov-select-container ul li button{font-size:var(--font-size-body-xs)!important;line-height:var(--height-line-xs);padding:var(--spacing-multiline-vertical-padding-xs)}[data-size=xs].rdt-gov-select-container input{font-size:var(--font-size-body-xs)!important;padding:var(--spacing-multiline-vertical-padding-xs)}[data-size=s].rdt-gov-select-container ul li button{font-size:var(--font-size-body-s)!important;line-height:var(--height-line-s);padding:var(--spacing-multiline-vertical-padding-s)}[data-size=s].rdt-gov-select-container input{font-size:var(--font-size-body-s)!important;padding:var(--spacing-multiline-vertical-padding-s)}[data-size=m].rdt-gov-select-container ul li button{font-size:var(--font-size-body-m)!important;line-height:var(--height-line-m);padding:var(--spacing-multiline-vertical-padding-m)}[data-size=m].rdt-gov-select-container input{font-size:var(--font-size-body-m)!important;padding:var(--spacing-multiline-vertical-padding-m)}[data-size=l].rdt-gov-select-container ul li button{font-size:var(--font-size-body-l)!important;line-height:var(--height-line-l);padding:var(--spacing-multiline-vertical-padding-l)}[data-size=l].rdt-gov-select-container input{font-size:var(--font-size-body-l)!important;padding:var(--spacing-multiline-vertical-padding-l)}[data-size=xl].rdt-gov-select-container ul li button{font-size:var(--font-size-body-xl)!important;line-height:var(--height-line-xl);padding:var(--spacing-multiline-vertical-padding-xl)}[data-size=xl].rdt-gov-select-container input{font-size:var(--font-size-body-xl)!important;padding:var(--spacing-multiline-vertical-padding-xl)}.rdt-gov-select-overlay-panel-top .rdt-gov-select-container{display:flex;flex-direction:column-reverse}\n", ".warning-color-icon{color:var(--icon-error)!important}.warning-color-text{color:var(--text-status-error)!important}.warning-color-gov-label .gov-form-label__label{color:var(--form-state-label-error, var(--text-status-error))!important}.s_label{font-size:var(--font-size-body-s);line-height:150%;font-weight:400}gov-form-message{font-size:var(--font-size-body-s)}rdt-gov-number-input,rdt-gov-text-input,rdt-gov-select{min-width:60px}\n"], dependencies: [{ kind: "directive", type: RdtSelectOptionDirective, selector: "[rdtSelectOption]", inputs: ["rdtSelectOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: RdtAutoFocusOnInitDirective, selector: "[rdtAutofocusOnInit]" }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i1.GovButton, selector: "gov-button", inputs: ["color", "disabled", "download", "expanded", "expandedMobile", "focusable", "href", "hreflang", "identifier", "loading", "name", "nativeType", "referrerpolicy", "rel", "size", "target", "type"] }, { kind: "component", type: i1.GovFormLabel, selector: "gov-form-label", inputs: ["identifier", "legend", "required", "size"] }, { kind: "component", type: i1.GovFormMessage, selector: "gov-form-message", inputs: ["color", "size"] }, { kind: "component", type: i1.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "pipe", type: RdtFormErrorPipe, name: "rdtFormError" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: RdtTranslatePipe, name: "rdtTranslate" }], encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }, { propertyName: "selectButton", first: true, predicate: ["selectButton"], descendants: true, isSignal: true }, { propertyName: "overlayTemplate", first: true, predicate: ["overlayContainer"], descendants: true, isSignal: true }, { propertyName: "optionEls", predicate: (RdtSelectOptionDirective), descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@let sel = selectedLabel(); @let lPos = labelPosition(); @let hasError =\nhideErrors() ? '' : visibleErrors() | rdtFormError; @if(lPos === 'top' &&\nlabel().length>0){\n<gov-form-label slot=\"left\" [class.warning-color-gov-label]=\"hasError\" size=\"s\"\n  >{{ label() }}\n  @if (required()) {\n  <span class=\"warning-color-text\">*</span>\n  }</gov-form-label\n>\n}\n<div\n  class=\"gov-form-select gov-form-input\"\n  [class.has-clear]=\"showClear() && !!sel\"\n  [attr.size]=\"size()\"\n  [attr.invalid]=\"invalid() && touched()\"\n  [attr.disabled]=\"disabled()\"\n>\n  @if (lPos === 'left') {\n  <p\n    class=\"gov-form-label__label s_label\"\n    slot=\"prefix\"\n    [class.warning-color-text]=\"hasError\"\n  >\n    {{ label() }}\n    @if (required()) {\n    <span class=\"warning-color-text\">*</span>\n    }\n  </p>\n  }\n  <div class=\"element\">\n    <button\n      #selectButton\n      [attr.size]=\"size()\"\n      (click)=\"openOverlay()\"\n      (keydown)=\"handleButtonKeydown($event)\"\n      [disabled]=\"disabled()\"\n      class=\"select\"\n      type=\"button\"\n      (blur)=\"handleButtonBlur()\"\n      (focus)=\"onFocus()\"\n    >\n      <div class=\"scroll-content\" [class.warning-color-text]=\"hasError\">\n        @if (sel) {\n        {{ sel }}\n        } @else if (!disabled() && !readonlyInput()) {\n        {{ placeholder() || '&nbsp;' }}\n        }\n      </div>\n      @if (showClear() && sel) {\n      <gov-button\n        class=\"clear-button\"\n        iconStart=\"basic/x\"\n        (click)=\"onClearClick($event)\"\n        propagate=\"false\"\n        buttonType=\"base\"\n        color=\"error\"\n        [rdtDisabled]=\"disabled()\"\n      ></gov-button>\n      } @if (loading()) {\n      <rdt-spinner />\n      } @else { @if(hasError){\n      <gov-icon\n        name=\"exclamation-lg\"\n        class=\"icon-warning\"\n        [ngClass]=\"'icon-' + size()\"\n      ></gov-icon>\n      }\n      <gov-icon\n        name=\"chevron-down\"\n        class=\"icon-arrow\"\n        [class.warning-color-icon]=\"hasError\"\n      ></gov-icon>\n      }\n    </button>\n  </div>\n  @if (lPos === 'right') {\n  <p\n    class=\"gov-form-label__label s_label\"\n    slot=\"sufix\"\n    [class.warning-color-text]=\"hasError\"\n  >\n    {{ label() }}\n    @if (required()) {\n    <span class=\"warning-color-text\">*</span>\n    }\n  </p>\n  }\n</div>\n<ng-template #overlayContainer>\n  <div class=\"rdt-gov-select-container\" [attr.data-size]=\"size()\">\n    @if (showSearch()) {\n    <div class=\"search-container\" [class.loading]=\"loading()\">\n      <input\n        class=\"gov-form-input\"\n        size=\"s\"\n        type=\"search\"\n        rdtAutofocusOnInit\n        [formControl]=\"inputCtrl\"\n        (keydown)=\"handleInputKeydown($event)\"\n        [placeholder]=\"'RDT_SELECT_ENTER_SEARCH' | rdtTranslate\"\n      />\n      @if (loading()) {\n      <rdt-spinner />\n      }\n    </div>\n    }\n    <ul role=\"listbox\" aria-hidden=\"false\" #scrollContainer>\n      @for (option of visibleOptions(); track option.id) {\n      <li role=\"option\" [attr.aria-selected]=\"option.selected\">\n        <button\n          tabindex=\"-1\"\n          [rdtSelectOption]=\"option.id\"\n          (click)=\"selectOption(option.id)\"\n          class=\"option\"\n          type=\"button\"\n        >\n          <gov-icon\n            name=\"check-lg\"\n            [class.invisible]=\"!option.selected\"\n            class=\"mr-1 w-4 picked\"\n          />\n          {{ $any(option.label) | rdtTranslate }}\n        </button>\n      </li>\n      } @empty { @if (loading()) {\n      <li class=\"pointer-events-none\">\n        <div class=\"option\">\n          {{ 'RDT_GOV_SELECT_LOADING_VALUES' | rdtTranslate }}\n        </div>\n      </li>\n      } @else if (store.query()) {\n      <li class=\"pointer-events-none\">\n        <div class=\"option\">\n          {{ 'RDT_GOV_SELECT_NO_VALUES_FOUND' | rdtTranslate }}\n        </div>\n      </li>\n      } @else if (!store.datasource()?.queryRequired) {\n      <li class=\"pointer-events-none\">\n        <div class=\"option\">\n          {{ 'RDT_GOV_SELECT_NO_VALUES_AVAILABLE' | rdtTranslate }}\n        </div>\n      </li>\n      } }\n    </ul>\n  </div>\n</ng-template>\n@if(hasError){\n<gov-form-message slot=\"bottom\" color=\"error\" [attr.size]=\"size()\">\n  <gov-icon\n    type=\"components\"\n    name=\"exclamation-triangle-fill\"\n    slot=\"validation-icon\"\n  ></gov-icon>\n  {{ hasError }}\n</gov-form-message>\n}\n", styles: [".rdt-option-selected{background:var(--gov-autocomplete-item-hover, var(--color-neutral-600))!important;--text-primary: var(--color-primary-50) !important}.icon-warning{width:var(--icon-size)!important;height:var(--icon-size)!important}.icon-xs{--icon-size: 12px}.icon-s{--icon-size: 14px}.icon-m{--icon-size: 16px}.icon-l{--icon-size: 18px}.icon-xl{--icon-size: 20px}rdt-gov-select{display:inline-block;width:100%;max-width:100%}rdt-gov-select .gov-form-select{width:100%}rdt-gov-select .gov-form-select.has-clear .select{padding-right:calc(1.5rem + var(--spacing-s))!important}rdt-gov-select .gov-form-input{border:none!important;background-color:transparent!important}rdt-gov-select .select{display:flex}rdt-gov-select .select rdt-spinner{position:absolute;right:.5rem;width:1rem;height:1rem}rdt-gov-select [size=xs].gov-form-select .select{min-height:var(--height-component-xs);font-size:var(--font-size-body-xs)}rdt-gov-select [size=xs].gov-form-select .select:hover{background-color:var(--button-outlined-primary-hover)}rdt-gov-select [size=s].gov-form-select .select{min-height:var(--height-component-s);font-size:var(--font-size-body-s)}rdt-gov-select [size=s].gov-form-select .select:hover{background-color:var(--button-outlined-primary-hover)}rdt-gov-select [size=m].gov-form-select .select{min-height:var(--height-component-m);font-size:var(--font-size-body-m)}rdt-gov-select [size=m].gov-form-select .select:hover{background-color:var(--button-outlined-primary-hover)}rdt-gov-select [size=l].gov-form-select .select{min-height:var(--height-component-l);font-size:var(--font-size-body-l)}rdt-gov-select [size=l].gov-form-select .select:hover{background-color:var(--button-outlined-primary-hover)}rdt-gov-select [size=xl].gov-form-select .select{min-height:var(--height-component-xl);font-size:var(--font-size-body-xl)}rdt-gov-select [size=xl].gov-form-select .select:hover{background-color:var(--button-outlined-primary-hover)}rdt-gov-select [size=xs].gov-form-select .select{padding:var(--spacing-multiline-vertical-padding-xs) var(--spacing-xs-nudge)}rdt-gov-select [size=s].gov-form-select .select{padding:var(--spacing-multiline-vertical-padding-s) var(--spacing-s)}rdt-gov-select [size=m].gov-form-select .select{padding:var(--spacing-multiline-vertical-padding-m) var(--spacing-s-nudge)}rdt-gov-select [size=l].gov-form-select .select{padding:var(--spacing-multiline-vertical-padding-l) var(--spacing-m)}rdt-gov-select [size=xl].gov-form-select .select{padding:var(--spacing-multiline-vertical-padding-xl) var(--spacing-m-nudge)}rdt-gov-select .gov-form-select .select{position:relative;border:none;width:100%;border-radius:var(--corner-radius-s);background-color:var(--background-block-primary);font-family:var(--font-family);text-align:left}rdt-gov-select [invalid=true].gov-form-input .select{border-color:var(--background-status-error);color:var(--background-status-error)}rdt-gov-select .icon-arrow{color:var(--text-primary);position:absolute;top:50%;display:flex;justify-content:center;transform:translateY(-50%);pointer-events:none;right:.75rem;width:.75rem;height:.75rem}rdt-gov-select .icon-warning{color:var(--icon-error);position:absolute;top:50%;display:flex;justify-content:center;transform:translateY(-50%);pointer-events:none;right:1.85rem;width:.75rem;height:.75rem}rdt-gov-select .scroll-content{display:flex;align-items:center;color:var(--text-primary);width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}rdt-gov-select .clear-button{display:flex;position:absolute;right:2rem;top:50%;transform:translateY(-50%)}rdt-gov-select .clear-button button{padding:0!important;min-height:auto!important;--icon-size-xs: 1rem}rdt-gov-select .clear-button gov-icon[slot=left-icon]{left:0!important;position:inherit!important;top:0!important;display:inline!important;transform:none!important}rdt-gov-select .element{max-width:100%}.rdt-gov-select-container{width:100%;margin-top:.5rem;margin-bottom:.5rem;overflow:hidden;border:1px solid var(--color-neutral-600);border-radius:0;background-color:var(--background-block-primary)}.rdt-gov-select-container ul{padding-left:0;margin-top:0;margin-bottom:0;list-style:none;max-height:14.0625rem;overflow-x:hidden;overflow-y:auto;overscroll-behavior:none}.rdt-gov-select-container ul .option{font-family:var(--font-family);color:var(--text-primary);border:none;display:flex;align-items:center;padding:.75rem .5rem;width:100%;margin:0;background:none;text-align:left}.rdt-gov-select-container ul .option gov-icon{padding-right:var(--spacing-s)}.rdt-gov-select-container ul .option gov-icon.invisible{display:none}.rdt-gov-select-container ul .option:hover{--text-primary: var(--color-primary-50);background:var(--color-neutral-600)}.rdt-gov-select-container li{margin-bottom:0}.rdt-gov-select-container .picked{color:var(--text-primary)}.rdt-gov-select-container .search-spinner{--spinner-size: 1.2rem;position:absolute;right:1rem;top:100%;transform:translateY(calc(var(--spinner-size) / -2))}.rdt-gov-select-container .search-spinner .sis-icon-32-fix{height:var(--spinner-size)}.rdt-gov-select-container .search-container{width:100%;position:relative}.rdt-gov-select-container .search-container input{font-family:var(--font-family);border-radius:0;border-top:1px;border-left:1px;border-right:1px;padding:.75rem .5rem;width:100%;background-color:var(--background-block-primary);color:var(--text-primary)}.rdt-gov-select-container .search-container input:focus-visible{outline:var(.125rem) solid var(--status-focus);outline-offset:0}.rdt-gov-select-container .search-container.loading input::-webkit-search-cancel-button{position:relative;right:1rem}[data-size=xs].rdt-gov-select-container ul li button{font-size:var(--font-size-body-xs)!important;line-height:var(--height-line-xs);padding:var(--spacing-multiline-vertical-padding-xs)}[data-size=xs].rdt-gov-select-container input{font-size:var(--font-size-body-xs)!important;padding:var(--spacing-multiline-vertical-padding-xs)}[data-size=s].rdt-gov-select-container ul li button{font-size:var(--font-size-body-s)!important;line-height:var(--height-line-s);padding:var(--spacing-multiline-vertical-padding-s)}[data-size=s].rdt-gov-select-container input{font-size:var(--font-size-body-s)!important;padding:var(--spacing-multiline-vertical-padding-s)}[data-size=m].rdt-gov-select-container ul li button{font-size:var(--font-size-body-m)!important;line-height:var(--height-line-m);padding:var(--spacing-multiline-vertical-padding-m)}[data-size=m].rdt-gov-select-container input{font-size:var(--font-size-body-m)!important;padding:var(--spacing-multiline-vertical-padding-m)}[data-size=l].rdt-gov-select-container ul li button{font-size:var(--font-size-body-l)!important;line-height:var(--height-line-l);padding:var(--spacing-multiline-vertical-padding-l)}[data-size=l].rdt-gov-select-container input{font-size:var(--font-size-body-l)!important;padding:var(--spacing-multiline-vertical-padding-l)}[data-size=xl].rdt-gov-select-container ul li button{font-size:var(--font-size-body-xl)!important;line-height:var(--height-line-xl);padding:var(--spacing-multiline-vertical-padding-xl)}[data-size=xl].rdt-gov-select-container input{font-size:var(--font-size-body-xl)!important;padding:var(--spacing-multiline-vertical-padding-xl)}.rdt-gov-select-overlay-panel-top .rdt-gov-select-container{display:flex;flex-direction:column-reverse}\n", ".warning-color-icon{color:var(--icon-error)!important}.warning-color-text{color:var(--text-status-error)!important}.warning-color-gov-label .gov-form-label__label{color:var(--form-state-label-error, var(--text-status-error))!important}.s_label{font-size:var(--font-size-body-s);line-height:150%;font-weight:400}gov-form-message{font-size:var(--font-size-body-s)}rdt-gov-number-input,rdt-gov-text-input,rdt-gov-select{min-width:60px}\n"], dependencies: [{ kind: "directive", type: RdtSelectOptionDirective, selector: "[rdtSelectOption]", inputs: ["rdtSelectOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: RdtAutoFocusOnInitDirective, selector: "[rdtAutofocusOnInit]" }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i1.GovButton, selector: "gov-button", inputs: ["color", "disabled", "download", "expanded", "expandedMobile", "focusable", "href", "hreflang", "identifier", "loading", "name", "nativeType", "referrerpolicy", "rel", "size", "target", "type"] }, { kind: "component", type: i1.GovFormLabel, selector: "gov-form-label", inputs: ["identifier", "legend", "required", "size"] }, { kind: "component", type: i1.GovFormMessage, selector: "gov-form-message", inputs: ["color", "size"] }, { kind: "component", type: i1.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: RdtFormErrorPipe, name: "rdtFormError" }, { kind: "pipe", type: RdtTranslatePipe, name: "rdtTranslate" }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtGovSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rdt-gov-select', imports: [
                         RdtSelectOptionDirective,
@@ -1117,7 +1344,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                             useExisting: RdtGovSelectComponent,
                         },
                     ], schemas: [CUSTOM_ELEMENTS_SCHEMA], encapsulation: ViewEncapsulation.None, template: "@let sel = selectedLabel(); @let lPos = labelPosition(); @let hasError =\nhideErrors() ? '' : visibleErrors() | rdtFormError; @if(lPos === 'top' &&\nlabel().length>0){\n<gov-form-label slot=\"left\" [class.warning-color-gov-label]=\"hasError\" size=\"s\"\n  >{{ label() }}\n  @if (required()) {\n  <span class=\"warning-color-text\">*</span>\n  }</gov-form-label\n>\n}\n<div\n  class=\"gov-form-select gov-form-input\"\n  [class.has-clear]=\"showClear() && !!sel\"\n  [attr.size]=\"size()\"\n  [attr.invalid]=\"invalid() && touched()\"\n  [attr.disabled]=\"disabled()\"\n>\n  @if (lPos === 'left') {\n  <p\n    class=\"gov-form-label__label s_label\"\n    slot=\"prefix\"\n    [class.warning-color-text]=\"hasError\"\n  >\n    {{ label() }}\n    @if (required()) {\n    <span class=\"warning-color-text\">*</span>\n    }\n  </p>\n  }\n  <div class=\"element\">\n    <button\n      #selectButton\n      [attr.size]=\"size()\"\n      (click)=\"openOverlay()\"\n      (keydown)=\"handleButtonKeydown($event)\"\n      [disabled]=\"disabled()\"\n      class=\"select\"\n      type=\"button\"\n      (blur)=\"handleButtonBlur()\"\n      (focus)=\"onFocus()\"\n    >\n      <div class=\"scroll-content\" [class.warning-color-text]=\"hasError\">\n        @if (sel) {\n        {{ sel }}\n        } @else if (!disabled() && !readonlyInput()) {\n        {{ placeholder() || '&nbsp;' }}\n        }\n      </div>\n      @if (showClear() && sel) {\n      <gov-button\n        class=\"clear-button\"\n        iconStart=\"basic/x\"\n        (click)=\"onClearClick($event)\"\n        propagate=\"false\"\n        buttonType=\"base\"\n        color=\"error\"\n        [rdtDisabled]=\"disabled()\"\n      ></gov-button>\n      } @if (loading()) {\n      <rdt-spinner />\n      } @else { @if(hasError){\n      <gov-icon\n        name=\"exclamation-lg\"\n        class=\"icon-warning\"\n        [ngClass]=\"'icon-' + size()\"\n      ></gov-icon>\n      }\n      <gov-icon\n        name=\"chevron-down\"\n        class=\"icon-arrow\"\n        [class.warning-color-icon]=\"hasError\"\n      ></gov-icon>\n      }\n    </button>\n  </div>\n  @if (lPos === 'right') {\n  <p\n    class=\"gov-form-label__label s_label\"\n    slot=\"sufix\"\n    [class.warning-color-text]=\"hasError\"\n  >\n    {{ label() }}\n    @if (required()) {\n    <span class=\"warning-color-text\">*</span>\n    }\n  </p>\n  }\n</div>\n<ng-template #overlayContainer>\n  <div class=\"rdt-gov-select-container\" [attr.data-size]=\"size()\">\n    @if (showSearch()) {\n    <div class=\"search-container\" [class.loading]=\"loading()\">\n      <input\n        class=\"gov-form-input\"\n        size=\"s\"\n        type=\"search\"\n        rdtAutofocusOnInit\n        [formControl]=\"inputCtrl\"\n        (keydown)=\"handleInputKeydown($event)\"\n        [placeholder]=\"'RDT_SELECT_ENTER_SEARCH' | rdtTranslate\"\n      />\n      @if (loading()) {\n      <rdt-spinner />\n      }\n    </div>\n    }\n    <ul role=\"listbox\" aria-hidden=\"false\" #scrollContainer>\n      @for (option of visibleOptions(); track option.id) {\n      <li role=\"option\" [attr.aria-selected]=\"option.selected\">\n        <button\n          tabindex=\"-1\"\n          [rdtSelectOption]=\"option.id\"\n          (click)=\"selectOption(option.id)\"\n          class=\"option\"\n          type=\"button\"\n        >\n          <gov-icon\n            name=\"check-lg\"\n            [class.invisible]=\"!option.selected\"\n            class=\"mr-1 w-4 picked\"\n          />\n          {{ $any(option.label) | rdtTranslate }}\n        </button>\n      </li>\n      } @empty { @if (loading()) {\n      <li class=\"pointer-events-none\">\n        <div class=\"option\">\n          {{ 'RDT_GOV_SELECT_LOADING_VALUES' | rdtTranslate }}\n        </div>\n      </li>\n      } @else if (store.query()) {\n      <li class=\"pointer-events-none\">\n        <div class=\"option\">\n          {{ 'RDT_GOV_SELECT_NO_VALUES_FOUND' | rdtTranslate }}\n        </div>\n      </li>\n      } @else if (!store.datasource()?.queryRequired) {\n      <li class=\"pointer-events-none\">\n        <div class=\"option\">\n          {{ 'RDT_GOV_SELECT_NO_VALUES_AVAILABLE' | rdtTranslate }}\n        </div>\n      </li>\n      } }\n    </ul>\n  </div>\n</ng-template>\n@if(hasError){\n<gov-form-message slot=\"bottom\" color=\"error\" [attr.size]=\"size()\">\n  <gov-icon\n    type=\"components\"\n    name=\"exclamation-triangle-fill\"\n    slot=\"validation-icon\"\n  ></gov-icon>\n  {{ hasError }}\n</gov-form-message>\n}\n", styles: [".rdt-option-selected{background:var(--gov-autocomplete-item-hover, var(--color-neutral-600))!important;--text-primary: var(--color-primary-50) !important}.icon-warning{width:var(--icon-size)!important;height:var(--icon-size)!important}.icon-xs{--icon-size: 12px}.icon-s{--icon-size: 14px}.icon-m{--icon-size: 16px}.icon-l{--icon-size: 18px}.icon-xl{--icon-size: 20px}rdt-gov-select{display:inline-block;width:100%;max-width:100%}rdt-gov-select .gov-form-select{width:100%}rdt-gov-select .gov-form-select.has-clear .select{padding-right:calc(1.5rem + var(--spacing-s))!important}rdt-gov-select .gov-form-input{border:none!important;background-color:transparent!important}rdt-gov-select .select{display:flex}rdt-gov-select .select rdt-spinner{position:absolute;right:.5rem;width:1rem;height:1rem}rdt-gov-select [size=xs].gov-form-select .select{min-height:var(--height-component-xs);font-size:var(--font-size-body-xs)}rdt-gov-select [size=xs].gov-form-select .select:hover{background-color:var(--button-outlined-primary-hover)}rdt-gov-select [size=s].gov-form-select .select{min-height:var(--height-component-s);font-size:var(--font-size-body-s)}rdt-gov-select [size=s].gov-form-select .select:hover{background-color:var(--button-outlined-primary-hover)}rdt-gov-select [size=m].gov-form-select .select{min-height:var(--height-component-m);font-size:var(--font-size-body-m)}rdt-gov-select [size=m].gov-form-select .select:hover{background-color:var(--button-outlined-primary-hover)}rdt-gov-select [size=l].gov-form-select .select{min-height:var(--height-component-l);font-size:var(--font-size-body-l)}rdt-gov-select [size=l].gov-form-select .select:hover{background-color:var(--button-outlined-primary-hover)}rdt-gov-select [size=xl].gov-form-select .select{min-height:var(--height-component-xl);font-size:var(--font-size-body-xl)}rdt-gov-select [size=xl].gov-form-select .select:hover{background-color:var(--button-outlined-primary-hover)}rdt-gov-select [size=xs].gov-form-select .select{padding:var(--spacing-multiline-vertical-padding-xs) var(--spacing-xs-nudge)}rdt-gov-select [size=s].gov-form-select .select{padding:var(--spacing-multiline-vertical-padding-s) var(--spacing-s)}rdt-gov-select [size=m].gov-form-select .select{padding:var(--spacing-multiline-vertical-padding-m) var(--spacing-s-nudge)}rdt-gov-select [size=l].gov-form-select .select{padding:var(--spacing-multiline-vertical-padding-l) var(--spacing-m)}rdt-gov-select [size=xl].gov-form-select .select{padding:var(--spacing-multiline-vertical-padding-xl) var(--spacing-m-nudge)}rdt-gov-select .gov-form-select .select{position:relative;border:none;width:100%;border-radius:var(--corner-radius-s);background-color:var(--background-block-primary);font-family:var(--font-family);text-align:left}rdt-gov-select [invalid=true].gov-form-input .select{border-color:var(--background-status-error);color:var(--background-status-error)}rdt-gov-select .icon-arrow{color:var(--text-primary);position:absolute;top:50%;display:flex;justify-content:center;transform:translateY(-50%);pointer-events:none;right:.75rem;width:.75rem;height:.75rem}rdt-gov-select .icon-warning{color:var(--icon-error);position:absolute;top:50%;display:flex;justify-content:center;transform:translateY(-50%);pointer-events:none;right:1.85rem;width:.75rem;height:.75rem}rdt-gov-select .scroll-content{display:flex;align-items:center;color:var(--text-primary);width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}rdt-gov-select .clear-button{display:flex;position:absolute;right:2rem;top:50%;transform:translateY(-50%)}rdt-gov-select .clear-button button{padding:0!important;min-height:auto!important;--icon-size-xs: 1rem}rdt-gov-select .clear-button gov-icon[slot=left-icon]{left:0!important;position:inherit!important;top:0!important;display:inline!important;transform:none!important}rdt-gov-select .element{max-width:100%}.rdt-gov-select-container{width:100%;margin-top:.5rem;margin-bottom:.5rem;overflow:hidden;border:1px solid var(--color-neutral-600);border-radius:0;background-color:var(--background-block-primary)}.rdt-gov-select-container ul{padding-left:0;margin-top:0;margin-bottom:0;list-style:none;max-height:14.0625rem;overflow-x:hidden;overflow-y:auto;overscroll-behavior:none}.rdt-gov-select-container ul .option{font-family:var(--font-family);color:var(--text-primary);border:none;display:flex;align-items:center;padding:.75rem .5rem;width:100%;margin:0;background:none;text-align:left}.rdt-gov-select-container ul .option gov-icon{padding-right:var(--spacing-s)}.rdt-gov-select-container ul .option gov-icon.invisible{display:none}.rdt-gov-select-container ul .option:hover{--text-primary: var(--color-primary-50);background:var(--color-neutral-600)}.rdt-gov-select-container li{margin-bottom:0}.rdt-gov-select-container .picked{color:var(--text-primary)}.rdt-gov-select-container .search-spinner{--spinner-size: 1.2rem;position:absolute;right:1rem;top:100%;transform:translateY(calc(var(--spinner-size) / -2))}.rdt-gov-select-container .search-spinner .sis-icon-32-fix{height:var(--spinner-size)}.rdt-gov-select-container .search-container{width:100%;position:relative}.rdt-gov-select-container .search-container input{font-family:var(--font-family);border-radius:0;border-top:1px;border-left:1px;border-right:1px;padding:.75rem .5rem;width:100%;background-color:var(--background-block-primary);color:var(--text-primary)}.rdt-gov-select-container .search-container input:focus-visible{outline:var(.125rem) solid var(--status-focus);outline-offset:0}.rdt-gov-select-container .search-container.loading input::-webkit-search-cancel-button{position:relative;right:1rem}[data-size=xs].rdt-gov-select-container ul li button{font-size:var(--font-size-body-xs)!important;line-height:var(--height-line-xs);padding:var(--spacing-multiline-vertical-padding-xs)}[data-size=xs].rdt-gov-select-container input{font-size:var(--font-size-body-xs)!important;padding:var(--spacing-multiline-vertical-padding-xs)}[data-size=s].rdt-gov-select-container ul li button{font-size:var(--font-size-body-s)!important;line-height:var(--height-line-s);padding:var(--spacing-multiline-vertical-padding-s)}[data-size=s].rdt-gov-select-container input{font-size:var(--font-size-body-s)!important;padding:var(--spacing-multiline-vertical-padding-s)}[data-size=m].rdt-gov-select-container ul li button{font-size:var(--font-size-body-m)!important;line-height:var(--height-line-m);padding:var(--spacing-multiline-vertical-padding-m)}[data-size=m].rdt-gov-select-container input{font-size:var(--font-size-body-m)!important;padding:var(--spacing-multiline-vertical-padding-m)}[data-size=l].rdt-gov-select-container ul li button{font-size:var(--font-size-body-l)!important;line-height:var(--height-line-l);padding:var(--spacing-multiline-vertical-padding-l)}[data-size=l].rdt-gov-select-container input{font-size:var(--font-size-body-l)!important;padding:var(--spacing-multiline-vertical-padding-l)}[data-size=xl].rdt-gov-select-container ul li button{font-size:var(--font-size-body-xl)!important;line-height:var(--height-line-xl);padding:var(--spacing-multiline-vertical-padding-xl)}[data-size=xl].rdt-gov-select-container input{font-size:var(--font-size-body-xl)!important;padding:var(--spacing-multiline-vertical-padding-xl)}.rdt-gov-select-overlay-panel-top .rdt-gov-select-container{display:flex;flex-direction:column-reverse}\n", ".warning-color-icon{color:var(--icon-error)!important}.warning-color-text{color:var(--text-status-error)!important}.warning-color-gov-label .gov-form-label__label{color:var(--form-state-label-error, var(--text-status-error))!important}.s_label{font-size:var(--font-size-body-s);line-height:150%;font-weight:400}gov-form-message{font-size:var(--font-size-body-s)}rdt-gov-number-input,rdt-gov-text-input,rdt-gov-select{min-width:60px}\n"] }]
-        }] });
+        }], propDecorators: { scrollContainer: [{ type: i0.ViewChild, args: ['scrollContainer', { isSignal: true }] }], selectButton: [{ type: i0.ViewChild, args: ['selectButton', { isSignal: true }] }], overlayTemplate: [{ type: i0.ViewChild, args: ['overlayContainer', { isSignal: true }] }], optionEls: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => RdtSelectOptionDirective), { isSignal: true }] }], hideErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideErrors", required: false }] }], multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], showSearchInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], labelPositionInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }] } });
 
 function provideNgrdtGov(options = {}) {
     return [
@@ -1217,31 +1444,27 @@ function initRdtGov(config = {}) {
 class RdtGovDateComponent extends RdtDateComponent {
     translateService = inject(RdtTranslateService);
     dateAdapter = inject(DateAdapter);
-    dateInput = viewChild('dateInput');
-    timeInput = viewChild('timeInput');
-    size = input('s');
-    labelPositionInput = input('top', {
-        alias: 'labelPosition',
-    });
-    labelPosition = linkedSignal(() => this.labelPositionInput());
-    showSeconds = input(false, { transform: booleanAttribute });
-    stepInput = input(undefined, {
-        alias: 'step',
-        transform: numberAttribute,
-    });
+    dateInput = viewChild('dateInput', ...(ngDevMode ? [{ debugName: "dateInput" }] : []));
+    timeInput = viewChild('timeInput', ...(ngDevMode ? [{ debugName: "timeInput" }] : []));
+    size = input('s', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    labelPositionInput = input('top', { ...(ngDevMode ? { debugName: "labelPositionInput" } : {}), alias: 'labelPosition' });
+    labelPosition = linkedSignal(() => this.labelPositionInput(), ...(ngDevMode ? [{ debugName: "labelPosition" }] : []));
+    showSeconds = input(false, { ...(ngDevMode ? { debugName: "showSeconds" } : {}), transform: booleanAttribute });
+    stepInput = input(undefined, { ...(ngDevMode ? { debugName: "stepInput" } : {}), alias: 'step',
+        transform: numberAttribute });
     step = linkedSignal(() => {
         return this.stepInput() ?? (this.showSeconds() ? 1 : undefined);
-    });
+    }, ...(ngDevMode ? [{ debugName: "step" }] : []));
     dateInputFocused = false;
     // Current value of physical date input field
-    dateInputValue = signal(null);
+    dateInputValue = signal(null, ...(ngDevMode ? [{ debugName: "dateInputValue" }] : []));
     // Current value of physical time input field
-    timeInputValue = signal('');
-    internalTimeFormat = computed(() => this.showSeconds() ? 'HH:mm:ss' : 'HH:mm');
-    defaultTime = computed(() => this.showSeconds() ? '00:00:00' : '00:00');
-    localeUsed = computed(() => this.translateService.currentFormat().dateFnsLocale);
-    hasDate = computed(() => this.type() !== 'time');
-    hasTime = computed(() => this.type() !== 'date');
+    timeInputValue = signal('', ...(ngDevMode ? [{ debugName: "timeInputValue" }] : []));
+    internalTimeFormat = computed(() => this.showSeconds() ? 'HH:mm:ss' : 'HH:mm', ...(ngDevMode ? [{ debugName: "internalTimeFormat" }] : []));
+    defaultTime = computed(() => this.showSeconds() ? '00:00:00' : '00:00', ...(ngDevMode ? [{ debugName: "defaultTime" }] : []));
+    localeUsed = computed(() => this.translateService.currentFormat().dateFnsLocale, ...(ngDevMode ? [{ debugName: "localeUsed" }] : []));
+    hasDate = computed(() => this.type() !== 'time', ...(ngDevMode ? [{ debugName: "hasDate" }] : []));
+    hasTime = computed(() => this.type() !== 'date', ...(ngDevMode ? [{ debugName: "hasTime" }] : []));
     internalTimeValue = computed(() => {
         const value = this.internalValue();
         if (!value) {
@@ -1256,14 +1479,14 @@ class RdtGovDateComponent extends RdtDateComponent {
             return this.timeInputValue();
         }
         return time;
-    });
+    }, ...(ngDevMode ? [{ debugName: "internalTimeValue" }] : []));
     isEmpty(value) {
         return value === null;
     }
     // Update DateAdapter locale when current locale changes
     dateFnsLocaleEffect = effect(() => {
         this.dateAdapter.setLocale(this.localeUsed());
-    });
+    }, ...(ngDevMode ? [{ debugName: "dateFnsLocaleEffect" }] : []));
     toExternalValue(internalValue) {
         if (!internalValue) {
             return null;
@@ -1443,8 +1666,8 @@ class RdtGovDateComponent extends RdtDateComponent {
             }, 1);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovDateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: RdtGovDateComponent, isStandalone: true, selector: "rdt-gov-date", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, labelPositionInput: { classPropertyName: "labelPositionInput", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, stepInput: { classPropertyName: "stepInput", publicName: "step", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtGovDateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: RdtGovDateComponent, isStandalone: true, selector: "rdt-gov-date", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, labelPositionInput: { classPropertyName: "labelPositionInput", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, stepInput: { classPropertyName: "stepInput", publicName: "step", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: RdtGovDateComponent,
@@ -1458,9 +1681,9 @@ class RdtGovDateComponent extends RdtDateComponent {
                 provide: RdtDateComponent,
                 useExisting: RdtGovDateComponent,
             },
-        ], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true, isSignal: true }, { propertyName: "timeInput", first: true, predicate: ["timeInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@let lPos = labelPosition();\n<div class=\"rdt-date-wrapper\" [class]=\"lPos\">\n  @if(lPos) {\n  <p\n    class=\"gov-form-label__label s_label\"\n    [class.warning-color-text]=\"hasError\"\n  >\n    {{ label() }} @if (required()) {\n    <span class=\"warning-color-text\">*</span>\n    }\n  </p>\n  }\n  <div\n    class=\"rdt-date-field-wrapper gov-form-input\"\n    [attr.size]=\"size()\"\n    [attr.disabled]=\"disabled() ? true : undefined\"\n  >\n    @if(type() === 'date' || type() === 'datetime-local'){\n    <div class=\"rdt-date-field-position date\">\n      <input\n        class=\"rdt-date-field\"\n        #dateInput\n        matInput\n        [attr.invalid]=\"invalid() && touched()\"\n        [attr.readonly]=\"readonlyInput() ? true : null\"\n        [attr.size]=\"size()\"\n        [name]=\"name()\"\n        [value]=\"internalValue()\"\n        [disabled]=\"disabled()\"\n        [required]=\"required()\"\n        [matDatepicker]=\"picker\"\n        (focus)=\"onDateInputFocus()\"\n        (blur)=\"onDateInputBlur()\"\n        (dateInput)=\"onDateInput($event)\"\n        (dateChange)=\"onDateInput($event)\"\n      />\n      <div class=\"gov-form-input__icons\">\n        <gov-icon\n          class=\"validation-icon gov-icon\"\n          name=\"exclamation-lg\"\n          type=\"components\"\n          [attr.size]=\"size()\"\n        >\n        </gov-icon>\n      </div>\n      <mat-datepicker-toggle\n        [attr.size]=\"size()\"\n        matIconSuffix\n        [for]=\"picker\"\n        [disableRipple]=\"true\"\n      >\n        <!-- <mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon> //moznost vlastni ikonky-->\n      </mat-datepicker-toggle>\n      <mat-datepicker #picker></mat-datepicker>\n    </div>\n    } @if(type() === 'datetime-local' || type() === 'time'){\n    <div class=\"rdt-date-field-position time\">\n      <input\n        class=\"rdt-date-field\"\n        type=\"time\"\n        #timeInput\n        (input)=\"onTimeChange($event)\"\n        matInput\n        [attr.invalid]=\"invalid() && touched()\"\n        [step]=\"step()\"\n        [attr.readonly]=\"readonlyInput() ? true : undefined\"\n        [attr.size]=\"size()\"\n        [name]=\"name()\"\n        [value]=\"internalTimeValue()\"\n        [disabled]=\"disabled()\"\n        [required]=\"required()\"\n        (focus)=\"onTimeInputFocus()\"\n        (blur)=\"onTimeInputBlur()\"\n      />\n      <div class=\"gov-form-input__icons\">\n        <gov-icon\n          class=\"validation-icon gov-icon\"\n          name=\"exclamation-lg\"\n          type=\"components\"\n          [attr.size]=\"size()\"\n        >\n        </gov-icon>\n      </div>\n    </div>\n    }\n  </div>\n</div>\n@let hasError = visibleErrors() | rdtFormError; @if(hasError){\n<gov-form-message slot=\"bottom\" color=\"error\" [attr.size]=\"size()\">\n  <gov-icon\n    type=\"components\"\n    name=\"exclamation-triangle-fill\"\n    slot=\"validation-icon\"\n  ></gov-icon>\n  {{ hasError }}\n</gov-form-message>\n}\n", styles: [".warning-color-icon{color:var(--icon-error)!important}.warning-color-text{color:var(--text-status-error)!important}.warning-color-gov-label .gov-form-label__label{color:var(--form-state-label-error, var(--text-status-error))!important}.s_label{font-size:var(--font-size-body-s);line-height:150%;font-weight:400}gov-form-message{font-size:var(--font-size-body-s)}rdt-gov-number-input,rdt-gov-text-input,rdt-gov-select{min-width:60px}\n", ".rdt-date-wrapper{width:100%}.rdt-date-wrapper mat-datepicker-toggle,.rdt-date-wrapper mat-timepicker-toggle{position:absolute}.rdt-date-wrapper.right{display:flex;align-items:center;flex-direction:row-reverse;gap:var(--gap, var(--spacing-s))}.rdt-date-wrapper.left{display:flex;align-items:center;flex-direction:row;gap:var(--gap, var(--spacing-s))}.rdt-date-wrapper.top{display:flex;flex-direction:column;gap:var(--gap, var(--spacing-xs))}.rdt-date-wrapper .gov-form-input__icons{display:var(--exclamation-mark-display, none)}.rdt-date-wrapper mat-datepicker-toggle,.rdt-date-wrapper mat-timepicker-toggle{--mat-icon-button-touch-target-size: calc( var(--padding-horizontal) + var(--icon-size) + var(--gap) );--mat-icon-button-state-layer-size: var( --mat-icon-button-touch-target-size );right:calc(var(--exclamation-mark-width, 0px) + var(--exclamation-mark-offset, 0px))}.rdt-date-wrapper mat-datepicker-toggle button,.rdt-date-wrapper mat-timepicker-toggle button{display:flex;justify-content:center;align-items:center;height:var(--mat-icon-button-state-layer-size)}.rdt-date-wrapper mat-datepicker-toggle button svg,.rdt-date-wrapper mat-timepicker-toggle button svg{width:var(--icon-size);height:var(--icon-size)}.rdt-date-wrapper mat-datepicker-toggle[size=xl],.rdt-date-wrapper mat-timepicker-toggle[size=xl]{--padding-horizontal: var(--spacing-m-nudge);--icon-size: var(--icon-size-xl);--gap: var(--spacing-m)}.rdt-date-wrapper mat-datepicker-toggle[size=l],.rdt-date-wrapper mat-timepicker-toggle[size=l]{--padding-horizontal: var(--spacing-s-nudge);--icon-size: var(--icon-size-l);--gap: var(--spacing-m)}.rdt-date-wrapper mat-datepicker-toggle[size=m],.rdt-date-wrapper mat-timepicker-toggle[size=m]{--padding-horizontal: var(--spacing-s-nudge);--icon-size: var(--icon-size-m);--gap: var(--spacing-s)}.rdt-date-wrapper mat-datepicker-toggle[size=s],.rdt-date-wrapper mat-timepicker-toggle[size=s]{--padding-horizontal: var(--spacing-xs-nudge);--icon-size: var(--icon-size-s);--gap: var(--spacing-s)}.rdt-date-wrapper mat-datepicker-toggle[size=xs],.rdt-date-wrapper mat-timepicker-toggle[size=xs]{--padding-horizontal: var(--spacing-xs-nudge);--icon-size: var(--icon-size-xs);--gap: var(--spacing-xs)}.rdt-date-field{background-color:transparent;border:none;border-radius:var(--border-radius, var(--corner-radius-s));color:var(--form-value-color, var(--text-primary));font-family:var(--font-family-primary, var(--font-family));width:100%;line-height:150%;font-weight:400}.rdt-date-field-position{width:100%;position:relative;display:flex;align-items:center}.rdt-date-field-wrapper{width:100%;flex:1;border-radius:var(--border-radius, var(--corner-radius-s));border:var(--border-width, .0625rem) solid var(--form-border-color, var(--border-subtle));background-color:var(--form-bg-color, var(--background-block-primary));display:flex;align-items:center;gap:0!important}.rdt-date-field-wrapper:focus-within{border-radius:var(--outline-border-radius, var(--corner-radius-xs-nudge));outline:var(--outline-width, .125rem) solid var(--status-focus);outline-offset:var(--outline-offset, .125rem)}.rdt-date-field-wrapper:hover{background-color:var(--form-hover-color, var(--button-outlined-primary-hover))!important}.rdt-date-field-wrapper>*:after{content:\"\";display:block;position:absolute;width:var(--border-width, .0625rem);height:calc(100% + var(--border-width, .0625rem) * 2);left:calc(100% + var(--border-width, .0625rem) / 2);top:calc(-1 * var(--border-width, .0625rem));background-color:var(--border-subtle)}.rdt-date-field-wrapper>*:last-child:after{display:none}.rdt-date-field-wrapper[size=xl] .time{gap:var(--spacing-m)}.rdt-date-field-wrapper[size=xl] .time input{padding-right:var(--padding-horizontal, var(--spacing-m-nudge))!important}.rdt-date-field-wrapper[size=l] .time{gap:var(--spacing-s-nudge)}.rdt-date-field-wrapper[size=l] .time input{padding-right:var(--padding-horizontal, var(--spacing-m))!important}.rdt-date-field-wrapper[size=m] .time{gap:var(--spacing-s)}.rdt-date-field-wrapper[size=m] .time input{padding-right:var(--padding-horizontal, var(--spacing-s-nudge))!important}.rdt-date-field-wrapper[size=s] .time{gap:var(--spacing-xs-nudge)}.rdt-date-field-wrapper[size=s] .time input{padding-right:var(--padding-horizontal, var(--spacing-s))!important;--mat-icon-button-icon-size: 10px}.rdt-date-field-wrapper[size=xs] .time{gap:var(--spacing-xs)}.rdt-date-field-wrapper[size=xs] .time input{padding-right:var(--padding-horizontal, var(--spacing-xs-nudge))!important;--mat-icon-button-icon-size: 10px}.rdt-date-field:focus{outline:none}rdt-gov-date,mat-datepicker-content{--mat-icon-button-icon-size: 24px;--mat-button-text-label-text-font: var(--font-family);--mat-button-text-label-text-size: var(--font-size-body-s);--mat-button-text-label-text-weight: 600;--mat-button-text-label-text-color: var(--text-secondary);--mat-datepicker-calendar-body-label-text-size: var(--font-size-body-s);--mat-datepicker-calendar-body-label-text-weight: 600;--mat-datepicker-calendar-body-label-text-color: var(--text-primary);--mat-datepicker-calendar-text-size: var(--font-size-body-m);--mat-datepicker-calendar-text-font: var(--font-family);--mat-datepicker-calendar-container-background-color: var( --background-neutral-subtle );--mat-datepicker-calendar-container-text-color: var(--text-primary);--mat-datepicker-calendar-container-shape: 8px;--mat-datepicker-calendar-date-text-color: var(--text-primary);--mat-datepicker-calendar-date-selected-state-text-color: var( --color-neutral-0 );--mat-datepicker-calendar-date-today-selected-state-outline-color: var( --color-primary-400 );--mat-datepicker-calendar-container-elevation-shadow: 0px 0px 0px 1px var(--border-subtle);--mat-datepicker-calendar-date-today-outline-color: var( --button-solid-primary );--mat-datepicker-calendar-date-selected-state-background-color: var( --button-solid-primary );--mat-datepicker-calendar-period-button-icon-color: var(--text-primary);--mat-datepicker-calendar-date-hover-state-background-color: var( --background-neutral-subtlest );--mat-datepicker-calendar-header-text-color: var(--text-secondary);--mat-datepicker-calendar-header-text-size: var(--font-size-body-m);--mat-datepicker-calendar-header-text-weight: 600;--mat-tooltip-container-color: var(--color-neutral-950);--mat-tooltip-supporting-text-color: var(--color-neutral-0);--mat-tooltip-container-shape: 8px;--mat-button-text-container-shape: 8px;--mat-sys-on-surface-variant: var(--text-secondary);--mat-sys-primary: var(--button-solid-primary-hover);--mat-sys-dragged-state-layer-opacity: .16;--mat-sys-focus-state-layer-opacity: .12;--mat-sys-hover-state-layer-opacity: .08;--mat-sys-pressed-state-layer-opacity: .12;--mat-timepicker-container-background-color: var(--background-neutral-subtle);--mat-timepicker-container-shape: 8px;--mat-timepicker-container-elevation-shadow: 0px 0px 0px 1px var(--border-subtle);--mat-option-selected-state-layer-color: var(--button-solid-primary-hover);--mat-option-selected-state-label-text-color: var(--color-neutral-0);--mat-datepicker-toggle-active-state-icon-color: var( --mat-datepicker-toggle-icon-color )}rdt-gov-date.ng-invalid.ng-touched,mat-datepicker-content.ng-invalid.ng-touched{--border-subtle: var(--status-error);--mat-datepicker-toggle-icon-color: var(--status-error);--form-value-color: var(--form-state-value-color, var(--text-status-error));--exclamation-mark-display: flex}rdt-gov-date.ng-invalid.ng-touched input::-webkit-calendar-picker-indicator,mat-datepicker-content.ng-invalid.ng-touched input::-webkit-calendar-picker-indicator{filter:brightness(0) saturate(100%) invert(22%) sepia(89%) saturate(1847%) hue-rotate(345deg) brightness(98%) contrast(97%);cursor:pointer}rdt-gov-date.ng-invalid.ng-touched [size=xl],mat-datepicker-content.ng-invalid.ng-touched [size=xl]{--exclamation-mark-width: var(--icon-size-xl);--exclamation-mark-offset: var(--spacing-m-nudge)}rdt-gov-date.ng-invalid.ng-touched [size=l],mat-datepicker-content.ng-invalid.ng-touched [size=l]{--exclamation-mark-width: var(--icon-size-l);--exclamation-mark-offset: var(--spacing-m)}rdt-gov-date.ng-invalid.ng-touched [size=m],mat-datepicker-content.ng-invalid.ng-touched [size=m]{--exclamation-mark-width: var(--icon-size-m);--exclamation-mark-offset: var(--spacing-s-nudge)}rdt-gov-date.ng-invalid.ng-touched [size=s],mat-datepicker-content.ng-invalid.ng-touched [size=s]{--exclamation-mark-width: var(--icon-size-s);--exclamation-mark-offset: var(--spacing-s)}rdt-gov-date.ng-invalid.ng-touched [size=xs],mat-datepicker-content.ng-invalid.ng-touched [size=xs]{--exclamation-mark-width: var(--icon-size-xs);--exclamation-mark-offset: var(--spacing-xs-nudge)}rdt-gov-date.ng-invalid.ng-touched .time input,mat-datepicker-content.ng-invalid.ng-touched .time input{padding-right:0!important}\n"], dependencies: [{ kind: "pipe", type: RdtFormErrorPipe, name: "rdtFormError" }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i1$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true, isSignal: true }, { propertyName: "timeInput", first: true, predicate: ["timeInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@let lPos = labelPosition();\n<div class=\"rdt-date-wrapper\" [class]=\"lPos\">\n  @if(lPos) {\n  <p\n    class=\"gov-form-label__label s_label\"\n    [class.warning-color-text]=\"hasError\"\n  >\n    {{ label() }} @if (required()) {\n    <span class=\"warning-color-text\">*</span>\n    }\n  </p>\n  }\n  <div\n    class=\"rdt-date-field-wrapper gov-form-input\"\n    [attr.size]=\"size()\"\n    [attr.disabled]=\"disabled() ? true : undefined\"\n  >\n    @if(type() === 'date' || type() === 'datetime-local'){\n    <div class=\"rdt-date-field-position date\">\n      <input\n        class=\"rdt-date-field\"\n        #dateInput\n        matInput\n        [attr.invalid]=\"invalid() && touched()\"\n        [attr.readonly]=\"readonlyInput() ? true : null\"\n        [attr.size]=\"size()\"\n        [name]=\"name()\"\n        [value]=\"internalValue()\"\n        [disabled]=\"disabled()\"\n        [required]=\"required()\"\n        [matDatepicker]=\"picker\"\n        (focus)=\"onDateInputFocus()\"\n        (blur)=\"onDateInputBlur()\"\n        (dateInput)=\"onDateInput($event)\"\n        (dateChange)=\"onDateInput($event)\"\n      />\n      <div class=\"gov-form-input__icons\">\n        <gov-icon\n          class=\"validation-icon gov-icon\"\n          name=\"exclamation-lg\"\n          type=\"components\"\n          [attr.size]=\"size()\"\n        >\n        </gov-icon>\n      </div>\n      <mat-datepicker-toggle\n        [attr.size]=\"size()\"\n        matIconSuffix\n        [for]=\"picker\"\n        [disableRipple]=\"true\"\n      >\n        <!-- <mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon> //moznost vlastni ikonky-->\n      </mat-datepicker-toggle>\n      <mat-datepicker #picker></mat-datepicker>\n    </div>\n    } @if(type() === 'datetime-local' || type() === 'time'){\n    <div class=\"rdt-date-field-position time\">\n      <input\n        class=\"rdt-date-field\"\n        type=\"time\"\n        #timeInput\n        (input)=\"onTimeChange($event)\"\n        matInput\n        [attr.invalid]=\"invalid() && touched()\"\n        [step]=\"step()\"\n        [attr.readonly]=\"readonlyInput() ? true : undefined\"\n        [attr.size]=\"size()\"\n        [name]=\"name()\"\n        [value]=\"internalTimeValue()\"\n        [disabled]=\"disabled()\"\n        [required]=\"required()\"\n        (focus)=\"onTimeInputFocus()\"\n        (blur)=\"onTimeInputBlur()\"\n      />\n      <div class=\"gov-form-input__icons\">\n        <gov-icon\n          class=\"validation-icon gov-icon\"\n          name=\"exclamation-lg\"\n          type=\"components\"\n          [attr.size]=\"size()\"\n        >\n        </gov-icon>\n      </div>\n    </div>\n    }\n  </div>\n</div>\n@let hasError = visibleErrors() | rdtFormError; @if(hasError){\n<gov-form-message slot=\"bottom\" color=\"error\" [attr.size]=\"size()\">\n  <gov-icon\n    type=\"components\"\n    name=\"exclamation-triangle-fill\"\n    slot=\"validation-icon\"\n  ></gov-icon>\n  {{ hasError }}\n</gov-form-message>\n}\n", styles: [".warning-color-icon{color:var(--icon-error)!important}.warning-color-text{color:var(--text-status-error)!important}.warning-color-gov-label .gov-form-label__label{color:var(--form-state-label-error, var(--text-status-error))!important}.s_label{font-size:var(--font-size-body-s);line-height:150%;font-weight:400}gov-form-message{font-size:var(--font-size-body-s)}rdt-gov-number-input,rdt-gov-text-input,rdt-gov-select{min-width:60px}\n", ".rdt-date-wrapper{width:100%}.rdt-date-wrapper mat-datepicker-toggle,.rdt-date-wrapper mat-timepicker-toggle{position:absolute}.rdt-date-wrapper.right{display:flex;align-items:center;flex-direction:row-reverse;gap:var(--gap, var(--spacing-s))}.rdt-date-wrapper.left{display:flex;align-items:center;flex-direction:row;gap:var(--gap, var(--spacing-s))}.rdt-date-wrapper.top{display:flex;flex-direction:column;gap:var(--gap, var(--spacing-xs))}.rdt-date-wrapper .gov-form-input__icons{display:var(--exclamation-mark-display, none)}.rdt-date-wrapper mat-datepicker-toggle,.rdt-date-wrapper mat-timepicker-toggle{--mat-icon-button-touch-target-size: calc( var(--padding-horizontal) + var(--icon-size) + var(--gap) );--mat-icon-button-state-layer-size: var( --mat-icon-button-touch-target-size );right:calc(var(--exclamation-mark-width, 0px) + var(--exclamation-mark-offset, 0px))}.rdt-date-wrapper mat-datepicker-toggle button,.rdt-date-wrapper mat-timepicker-toggle button{display:flex;justify-content:center;align-items:center;height:var(--mat-icon-button-state-layer-size)}.rdt-date-wrapper mat-datepicker-toggle button svg,.rdt-date-wrapper mat-timepicker-toggle button svg{width:var(--icon-size);height:var(--icon-size)}.rdt-date-wrapper mat-datepicker-toggle[size=xl],.rdt-date-wrapper mat-timepicker-toggle[size=xl]{--padding-horizontal: var(--spacing-m-nudge);--icon-size: var(--icon-size-xl);--gap: var(--spacing-m)}.rdt-date-wrapper mat-datepicker-toggle[size=l],.rdt-date-wrapper mat-timepicker-toggle[size=l]{--padding-horizontal: var(--spacing-s-nudge);--icon-size: var(--icon-size-l);--gap: var(--spacing-m)}.rdt-date-wrapper mat-datepicker-toggle[size=m],.rdt-date-wrapper mat-timepicker-toggle[size=m]{--padding-horizontal: var(--spacing-s-nudge);--icon-size: var(--icon-size-m);--gap: var(--spacing-s)}.rdt-date-wrapper mat-datepicker-toggle[size=s],.rdt-date-wrapper mat-timepicker-toggle[size=s]{--padding-horizontal: var(--spacing-xs-nudge);--icon-size: var(--icon-size-s);--gap: var(--spacing-s)}.rdt-date-wrapper mat-datepicker-toggle[size=xs],.rdt-date-wrapper mat-timepicker-toggle[size=xs]{--padding-horizontal: var(--spacing-xs-nudge);--icon-size: var(--icon-size-xs);--gap: var(--spacing-xs)}.rdt-date-field{background-color:transparent;border:none;border-radius:var(--border-radius, var(--corner-radius-s));color:var(--form-value-color, var(--text-primary));font-family:var(--font-family-primary, var(--font-family));width:100%;line-height:150%;font-weight:400}.rdt-date-field-position{width:100%;position:relative;display:flex;align-items:center}.rdt-date-field-wrapper{width:100%;flex:1;border-radius:var(--border-radius, var(--corner-radius-s));border:var(--border-width, .0625rem) solid var(--form-border-color, var(--border-subtle));background-color:var(--form-bg-color, var(--background-block-primary));display:flex;align-items:center;gap:0!important}.rdt-date-field-wrapper:focus-within{border-radius:var(--outline-border-radius, var(--corner-radius-xs-nudge));outline:var(--outline-width, .125rem) solid var(--status-focus);outline-offset:var(--outline-offset, .125rem)}.rdt-date-field-wrapper:hover{background-color:var(--form-hover-color, var(--button-outlined-primary-hover))!important}.rdt-date-field-wrapper>*:after{content:\"\";display:block;position:absolute;width:var(--border-width, .0625rem);height:calc(100% + var(--border-width, .0625rem) * 2);left:calc(100% + var(--border-width, .0625rem) / 2);top:calc(-1 * var(--border-width, .0625rem));background-color:var(--border-subtle)}.rdt-date-field-wrapper>*:last-child:after{display:none}.rdt-date-field-wrapper[size=xl] .time{gap:var(--spacing-m)}.rdt-date-field-wrapper[size=xl] .time input{padding-right:var(--padding-horizontal, var(--spacing-m-nudge))!important}.rdt-date-field-wrapper[size=l] .time{gap:var(--spacing-s-nudge)}.rdt-date-field-wrapper[size=l] .time input{padding-right:var(--padding-horizontal, var(--spacing-m))!important}.rdt-date-field-wrapper[size=m] .time{gap:var(--spacing-s)}.rdt-date-field-wrapper[size=m] .time input{padding-right:var(--padding-horizontal, var(--spacing-s-nudge))!important}.rdt-date-field-wrapper[size=s] .time{gap:var(--spacing-xs-nudge)}.rdt-date-field-wrapper[size=s] .time input{padding-right:var(--padding-horizontal, var(--spacing-s))!important;--mat-icon-button-icon-size: 10px}.rdt-date-field-wrapper[size=xs] .time{gap:var(--spacing-xs)}.rdt-date-field-wrapper[size=xs] .time input{padding-right:var(--padding-horizontal, var(--spacing-xs-nudge))!important;--mat-icon-button-icon-size: 10px}.rdt-date-field:focus{outline:none}rdt-gov-date,mat-datepicker-content{--mat-icon-button-icon-size: 24px;--mat-button-text-label-text-font: var(--font-family);--mat-button-text-label-text-size: var(--font-size-body-s);--mat-button-text-label-text-weight: 600;--mat-button-text-label-text-color: var(--text-secondary);--mat-datepicker-calendar-body-label-text-size: var(--font-size-body-s);--mat-datepicker-calendar-body-label-text-weight: 600;--mat-datepicker-calendar-body-label-text-color: var(--text-primary);--mat-datepicker-calendar-text-size: var(--font-size-body-m);--mat-datepicker-calendar-text-font: var(--font-family);--mat-datepicker-calendar-container-background-color: var( --background-neutral-subtle );--mat-datepicker-calendar-container-text-color: var(--text-primary);--mat-datepicker-calendar-container-shape: 8px;--mat-datepicker-calendar-date-text-color: var(--text-primary);--mat-datepicker-calendar-date-selected-state-text-color: var( --color-neutral-0 );--mat-datepicker-calendar-date-today-selected-state-outline-color: var( --color-primary-400 );--mat-datepicker-calendar-container-elevation-shadow: 0px 0px 0px 1px var(--border-subtle);--mat-datepicker-calendar-date-today-outline-color: var( --button-solid-primary );--mat-datepicker-calendar-date-selected-state-background-color: var( --button-solid-primary );--mat-datepicker-calendar-period-button-icon-color: var(--text-primary);--mat-datepicker-calendar-date-hover-state-background-color: var( --background-neutral-subtlest );--mat-datepicker-calendar-header-text-color: var(--text-secondary);--mat-datepicker-calendar-header-text-size: var(--font-size-body-m);--mat-datepicker-calendar-header-text-weight: 600;--mat-tooltip-container-color: var(--color-neutral-950);--mat-tooltip-supporting-text-color: var(--color-neutral-0);--mat-tooltip-container-shape: 8px;--mat-button-text-container-shape: 8px;--mat-sys-on-surface-variant: var(--text-secondary);--mat-sys-primary: var(--button-solid-primary-hover);--mat-sys-dragged-state-layer-opacity: .16;--mat-sys-focus-state-layer-opacity: .12;--mat-sys-hover-state-layer-opacity: .08;--mat-sys-pressed-state-layer-opacity: .12;--mat-timepicker-container-background-color: var(--background-neutral-subtle);--mat-timepicker-container-shape: 8px;--mat-timepicker-container-elevation-shadow: 0px 0px 0px 1px var(--border-subtle);--mat-option-selected-state-layer-color: var(--button-solid-primary-hover);--mat-option-selected-state-label-text-color: var(--color-neutral-0);--mat-datepicker-toggle-active-state-icon-color: var( --mat-datepicker-toggle-icon-color )}rdt-gov-date.ng-invalid.ng-touched,mat-datepicker-content.ng-invalid.ng-touched{--border-subtle: var(--status-error);--mat-datepicker-toggle-icon-color: var(--status-error);--form-value-color: var(--form-state-value-color, var(--text-status-error))}rdt-gov-date.ng-invalid.ng-touched input::-webkit-calendar-picker-indicator,mat-datepicker-content.ng-invalid.ng-touched input::-webkit-calendar-picker-indicator{filter:brightness(0) saturate(100%) invert(22%) sepia(89%) saturate(1847%) hue-rotate(345deg) brightness(98%) contrast(97%);cursor:pointer}rdt-gov-date.ng-invalid.ng-touched,mat-datepicker-content.ng-invalid.ng-touched{--exclamation-mark-display: flex}rdt-gov-date.ng-invalid.ng-touched [size=xl],mat-datepicker-content.ng-invalid.ng-touched [size=xl]{--exclamation-mark-width: var(--icon-size-xl);--exclamation-mark-offset: var(--spacing-m-nudge)}rdt-gov-date.ng-invalid.ng-touched [size=l],mat-datepicker-content.ng-invalid.ng-touched [size=l]{--exclamation-mark-width: var(--icon-size-l);--exclamation-mark-offset: var(--spacing-m)}rdt-gov-date.ng-invalid.ng-touched [size=m],mat-datepicker-content.ng-invalid.ng-touched [size=m]{--exclamation-mark-width: var(--icon-size-m);--exclamation-mark-offset: var(--spacing-s-nudge)}rdt-gov-date.ng-invalid.ng-touched [size=s],mat-datepicker-content.ng-invalid.ng-touched [size=s]{--exclamation-mark-width: var(--icon-size-s);--exclamation-mark-offset: var(--spacing-s)}rdt-gov-date.ng-invalid.ng-touched [size=xs],mat-datepicker-content.ng-invalid.ng-touched [size=xs]{--exclamation-mark-width: var(--icon-size-xs);--exclamation-mark-offset: var(--spacing-xs-nudge)}rdt-gov-date.ng-invalid.ng-touched .time input,mat-datepicker-content.ng-invalid.ng-touched .time input{padding-right:0!important}\n"], dependencies: [{ kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i1$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: RdtFormErrorPipe, name: "rdtFormError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovDateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtGovDateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rdt-gov-date', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [
                         RdtFormErrorPipe,
@@ -1482,20 +1705,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                             provide: RdtDateComponent,
                             useExisting: RdtGovDateComponent,
                         },
-                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@let lPos = labelPosition();\n<div class=\"rdt-date-wrapper\" [class]=\"lPos\">\n  @if(lPos) {\n  <p\n    class=\"gov-form-label__label s_label\"\n    [class.warning-color-text]=\"hasError\"\n  >\n    {{ label() }} @if (required()) {\n    <span class=\"warning-color-text\">*</span>\n    }\n  </p>\n  }\n  <div\n    class=\"rdt-date-field-wrapper gov-form-input\"\n    [attr.size]=\"size()\"\n    [attr.disabled]=\"disabled() ? true : undefined\"\n  >\n    @if(type() === 'date' || type() === 'datetime-local'){\n    <div class=\"rdt-date-field-position date\">\n      <input\n        class=\"rdt-date-field\"\n        #dateInput\n        matInput\n        [attr.invalid]=\"invalid() && touched()\"\n        [attr.readonly]=\"readonlyInput() ? true : null\"\n        [attr.size]=\"size()\"\n        [name]=\"name()\"\n        [value]=\"internalValue()\"\n        [disabled]=\"disabled()\"\n        [required]=\"required()\"\n        [matDatepicker]=\"picker\"\n        (focus)=\"onDateInputFocus()\"\n        (blur)=\"onDateInputBlur()\"\n        (dateInput)=\"onDateInput($event)\"\n        (dateChange)=\"onDateInput($event)\"\n      />\n      <div class=\"gov-form-input__icons\">\n        <gov-icon\n          class=\"validation-icon gov-icon\"\n          name=\"exclamation-lg\"\n          type=\"components\"\n          [attr.size]=\"size()\"\n        >\n        </gov-icon>\n      </div>\n      <mat-datepicker-toggle\n        [attr.size]=\"size()\"\n        matIconSuffix\n        [for]=\"picker\"\n        [disableRipple]=\"true\"\n      >\n        <!-- <mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon> //moznost vlastni ikonky-->\n      </mat-datepicker-toggle>\n      <mat-datepicker #picker></mat-datepicker>\n    </div>\n    } @if(type() === 'datetime-local' || type() === 'time'){\n    <div class=\"rdt-date-field-position time\">\n      <input\n        class=\"rdt-date-field\"\n        type=\"time\"\n        #timeInput\n        (input)=\"onTimeChange($event)\"\n        matInput\n        [attr.invalid]=\"invalid() && touched()\"\n        [step]=\"step()\"\n        [attr.readonly]=\"readonlyInput() ? true : undefined\"\n        [attr.size]=\"size()\"\n        [name]=\"name()\"\n        [value]=\"internalTimeValue()\"\n        [disabled]=\"disabled()\"\n        [required]=\"required()\"\n        (focus)=\"onTimeInputFocus()\"\n        (blur)=\"onTimeInputBlur()\"\n      />\n      <div class=\"gov-form-input__icons\">\n        <gov-icon\n          class=\"validation-icon gov-icon\"\n          name=\"exclamation-lg\"\n          type=\"components\"\n          [attr.size]=\"size()\"\n        >\n        </gov-icon>\n      </div>\n    </div>\n    }\n  </div>\n</div>\n@let hasError = visibleErrors() | rdtFormError; @if(hasError){\n<gov-form-message slot=\"bottom\" color=\"error\" [attr.size]=\"size()\">\n  <gov-icon\n    type=\"components\"\n    name=\"exclamation-triangle-fill\"\n    slot=\"validation-icon\"\n  ></gov-icon>\n  {{ hasError }}\n</gov-form-message>\n}\n", styles: [".warning-color-icon{color:var(--icon-error)!important}.warning-color-text{color:var(--text-status-error)!important}.warning-color-gov-label .gov-form-label__label{color:var(--form-state-label-error, var(--text-status-error))!important}.s_label{font-size:var(--font-size-body-s);line-height:150%;font-weight:400}gov-form-message{font-size:var(--font-size-body-s)}rdt-gov-number-input,rdt-gov-text-input,rdt-gov-select{min-width:60px}\n", ".rdt-date-wrapper{width:100%}.rdt-date-wrapper mat-datepicker-toggle,.rdt-date-wrapper mat-timepicker-toggle{position:absolute}.rdt-date-wrapper.right{display:flex;align-items:center;flex-direction:row-reverse;gap:var(--gap, var(--spacing-s))}.rdt-date-wrapper.left{display:flex;align-items:center;flex-direction:row;gap:var(--gap, var(--spacing-s))}.rdt-date-wrapper.top{display:flex;flex-direction:column;gap:var(--gap, var(--spacing-xs))}.rdt-date-wrapper .gov-form-input__icons{display:var(--exclamation-mark-display, none)}.rdt-date-wrapper mat-datepicker-toggle,.rdt-date-wrapper mat-timepicker-toggle{--mat-icon-button-touch-target-size: calc( var(--padding-horizontal) + var(--icon-size) + var(--gap) );--mat-icon-button-state-layer-size: var( --mat-icon-button-touch-target-size );right:calc(var(--exclamation-mark-width, 0px) + var(--exclamation-mark-offset, 0px))}.rdt-date-wrapper mat-datepicker-toggle button,.rdt-date-wrapper mat-timepicker-toggle button{display:flex;justify-content:center;align-items:center;height:var(--mat-icon-button-state-layer-size)}.rdt-date-wrapper mat-datepicker-toggle button svg,.rdt-date-wrapper mat-timepicker-toggle button svg{width:var(--icon-size);height:var(--icon-size)}.rdt-date-wrapper mat-datepicker-toggle[size=xl],.rdt-date-wrapper mat-timepicker-toggle[size=xl]{--padding-horizontal: var(--spacing-m-nudge);--icon-size: var(--icon-size-xl);--gap: var(--spacing-m)}.rdt-date-wrapper mat-datepicker-toggle[size=l],.rdt-date-wrapper mat-timepicker-toggle[size=l]{--padding-horizontal: var(--spacing-s-nudge);--icon-size: var(--icon-size-l);--gap: var(--spacing-m)}.rdt-date-wrapper mat-datepicker-toggle[size=m],.rdt-date-wrapper mat-timepicker-toggle[size=m]{--padding-horizontal: var(--spacing-s-nudge);--icon-size: var(--icon-size-m);--gap: var(--spacing-s)}.rdt-date-wrapper mat-datepicker-toggle[size=s],.rdt-date-wrapper mat-timepicker-toggle[size=s]{--padding-horizontal: var(--spacing-xs-nudge);--icon-size: var(--icon-size-s);--gap: var(--spacing-s)}.rdt-date-wrapper mat-datepicker-toggle[size=xs],.rdt-date-wrapper mat-timepicker-toggle[size=xs]{--padding-horizontal: var(--spacing-xs-nudge);--icon-size: var(--icon-size-xs);--gap: var(--spacing-xs)}.rdt-date-field{background-color:transparent;border:none;border-radius:var(--border-radius, var(--corner-radius-s));color:var(--form-value-color, var(--text-primary));font-family:var(--font-family-primary, var(--font-family));width:100%;line-height:150%;font-weight:400}.rdt-date-field-position{width:100%;position:relative;display:flex;align-items:center}.rdt-date-field-wrapper{width:100%;flex:1;border-radius:var(--border-radius, var(--corner-radius-s));border:var(--border-width, .0625rem) solid var(--form-border-color, var(--border-subtle));background-color:var(--form-bg-color, var(--background-block-primary));display:flex;align-items:center;gap:0!important}.rdt-date-field-wrapper:focus-within{border-radius:var(--outline-border-radius, var(--corner-radius-xs-nudge));outline:var(--outline-width, .125rem) solid var(--status-focus);outline-offset:var(--outline-offset, .125rem)}.rdt-date-field-wrapper:hover{background-color:var(--form-hover-color, var(--button-outlined-primary-hover))!important}.rdt-date-field-wrapper>*:after{content:\"\";display:block;position:absolute;width:var(--border-width, .0625rem);height:calc(100% + var(--border-width, .0625rem) * 2);left:calc(100% + var(--border-width, .0625rem) / 2);top:calc(-1 * var(--border-width, .0625rem));background-color:var(--border-subtle)}.rdt-date-field-wrapper>*:last-child:after{display:none}.rdt-date-field-wrapper[size=xl] .time{gap:var(--spacing-m)}.rdt-date-field-wrapper[size=xl] .time input{padding-right:var(--padding-horizontal, var(--spacing-m-nudge))!important}.rdt-date-field-wrapper[size=l] .time{gap:var(--spacing-s-nudge)}.rdt-date-field-wrapper[size=l] .time input{padding-right:var(--padding-horizontal, var(--spacing-m))!important}.rdt-date-field-wrapper[size=m] .time{gap:var(--spacing-s)}.rdt-date-field-wrapper[size=m] .time input{padding-right:var(--padding-horizontal, var(--spacing-s-nudge))!important}.rdt-date-field-wrapper[size=s] .time{gap:var(--spacing-xs-nudge)}.rdt-date-field-wrapper[size=s] .time input{padding-right:var(--padding-horizontal, var(--spacing-s))!important;--mat-icon-button-icon-size: 10px}.rdt-date-field-wrapper[size=xs] .time{gap:var(--spacing-xs)}.rdt-date-field-wrapper[size=xs] .time input{padding-right:var(--padding-horizontal, var(--spacing-xs-nudge))!important;--mat-icon-button-icon-size: 10px}.rdt-date-field:focus{outline:none}rdt-gov-date,mat-datepicker-content{--mat-icon-button-icon-size: 24px;--mat-button-text-label-text-font: var(--font-family);--mat-button-text-label-text-size: var(--font-size-body-s);--mat-button-text-label-text-weight: 600;--mat-button-text-label-text-color: var(--text-secondary);--mat-datepicker-calendar-body-label-text-size: var(--font-size-body-s);--mat-datepicker-calendar-body-label-text-weight: 600;--mat-datepicker-calendar-body-label-text-color: var(--text-primary);--mat-datepicker-calendar-text-size: var(--font-size-body-m);--mat-datepicker-calendar-text-font: var(--font-family);--mat-datepicker-calendar-container-background-color: var( --background-neutral-subtle );--mat-datepicker-calendar-container-text-color: var(--text-primary);--mat-datepicker-calendar-container-shape: 8px;--mat-datepicker-calendar-date-text-color: var(--text-primary);--mat-datepicker-calendar-date-selected-state-text-color: var( --color-neutral-0 );--mat-datepicker-calendar-date-today-selected-state-outline-color: var( --color-primary-400 );--mat-datepicker-calendar-container-elevation-shadow: 0px 0px 0px 1px var(--border-subtle);--mat-datepicker-calendar-date-today-outline-color: var( --button-solid-primary );--mat-datepicker-calendar-date-selected-state-background-color: var( --button-solid-primary );--mat-datepicker-calendar-period-button-icon-color: var(--text-primary);--mat-datepicker-calendar-date-hover-state-background-color: var( --background-neutral-subtlest );--mat-datepicker-calendar-header-text-color: var(--text-secondary);--mat-datepicker-calendar-header-text-size: var(--font-size-body-m);--mat-datepicker-calendar-header-text-weight: 600;--mat-tooltip-container-color: var(--color-neutral-950);--mat-tooltip-supporting-text-color: var(--color-neutral-0);--mat-tooltip-container-shape: 8px;--mat-button-text-container-shape: 8px;--mat-sys-on-surface-variant: var(--text-secondary);--mat-sys-primary: var(--button-solid-primary-hover);--mat-sys-dragged-state-layer-opacity: .16;--mat-sys-focus-state-layer-opacity: .12;--mat-sys-hover-state-layer-opacity: .08;--mat-sys-pressed-state-layer-opacity: .12;--mat-timepicker-container-background-color: var(--background-neutral-subtle);--mat-timepicker-container-shape: 8px;--mat-timepicker-container-elevation-shadow: 0px 0px 0px 1px var(--border-subtle);--mat-option-selected-state-layer-color: var(--button-solid-primary-hover);--mat-option-selected-state-label-text-color: var(--color-neutral-0);--mat-datepicker-toggle-active-state-icon-color: var( --mat-datepicker-toggle-icon-color )}rdt-gov-date.ng-invalid.ng-touched,mat-datepicker-content.ng-invalid.ng-touched{--border-subtle: var(--status-error);--mat-datepicker-toggle-icon-color: var(--status-error);--form-value-color: var(--form-state-value-color, var(--text-status-error));--exclamation-mark-display: flex}rdt-gov-date.ng-invalid.ng-touched input::-webkit-calendar-picker-indicator,mat-datepicker-content.ng-invalid.ng-touched input::-webkit-calendar-picker-indicator{filter:brightness(0) saturate(100%) invert(22%) sepia(89%) saturate(1847%) hue-rotate(345deg) brightness(98%) contrast(97%);cursor:pointer}rdt-gov-date.ng-invalid.ng-touched [size=xl],mat-datepicker-content.ng-invalid.ng-touched [size=xl]{--exclamation-mark-width: var(--icon-size-xl);--exclamation-mark-offset: var(--spacing-m-nudge)}rdt-gov-date.ng-invalid.ng-touched [size=l],mat-datepicker-content.ng-invalid.ng-touched [size=l]{--exclamation-mark-width: var(--icon-size-l);--exclamation-mark-offset: var(--spacing-m)}rdt-gov-date.ng-invalid.ng-touched [size=m],mat-datepicker-content.ng-invalid.ng-touched [size=m]{--exclamation-mark-width: var(--icon-size-m);--exclamation-mark-offset: var(--spacing-s-nudge)}rdt-gov-date.ng-invalid.ng-touched [size=s],mat-datepicker-content.ng-invalid.ng-touched [size=s]{--exclamation-mark-width: var(--icon-size-s);--exclamation-mark-offset: var(--spacing-s)}rdt-gov-date.ng-invalid.ng-touched [size=xs],mat-datepicker-content.ng-invalid.ng-touched [size=xs]{--exclamation-mark-width: var(--icon-size-xs);--exclamation-mark-offset: var(--spacing-xs-nudge)}rdt-gov-date.ng-invalid.ng-touched .time input,mat-datepicker-content.ng-invalid.ng-touched .time input{padding-right:0!important}\n"] }]
-        }] });
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@let lPos = labelPosition();\n<div class=\"rdt-date-wrapper\" [class]=\"lPos\">\n  @if(lPos) {\n  <p\n    class=\"gov-form-label__label s_label\"\n    [class.warning-color-text]=\"hasError\"\n  >\n    {{ label() }} @if (required()) {\n    <span class=\"warning-color-text\">*</span>\n    }\n  </p>\n  }\n  <div\n    class=\"rdt-date-field-wrapper gov-form-input\"\n    [attr.size]=\"size()\"\n    [attr.disabled]=\"disabled() ? true : undefined\"\n  >\n    @if(type() === 'date' || type() === 'datetime-local'){\n    <div class=\"rdt-date-field-position date\">\n      <input\n        class=\"rdt-date-field\"\n        #dateInput\n        matInput\n        [attr.invalid]=\"invalid() && touched()\"\n        [attr.readonly]=\"readonlyInput() ? true : null\"\n        [attr.size]=\"size()\"\n        [name]=\"name()\"\n        [value]=\"internalValue()\"\n        [disabled]=\"disabled()\"\n        [required]=\"required()\"\n        [matDatepicker]=\"picker\"\n        (focus)=\"onDateInputFocus()\"\n        (blur)=\"onDateInputBlur()\"\n        (dateInput)=\"onDateInput($event)\"\n        (dateChange)=\"onDateInput($event)\"\n      />\n      <div class=\"gov-form-input__icons\">\n        <gov-icon\n          class=\"validation-icon gov-icon\"\n          name=\"exclamation-lg\"\n          type=\"components\"\n          [attr.size]=\"size()\"\n        >\n        </gov-icon>\n      </div>\n      <mat-datepicker-toggle\n        [attr.size]=\"size()\"\n        matIconSuffix\n        [for]=\"picker\"\n        [disableRipple]=\"true\"\n      >\n        <!-- <mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon> //moznost vlastni ikonky-->\n      </mat-datepicker-toggle>\n      <mat-datepicker #picker></mat-datepicker>\n    </div>\n    } @if(type() === 'datetime-local' || type() === 'time'){\n    <div class=\"rdt-date-field-position time\">\n      <input\n        class=\"rdt-date-field\"\n        type=\"time\"\n        #timeInput\n        (input)=\"onTimeChange($event)\"\n        matInput\n        [attr.invalid]=\"invalid() && touched()\"\n        [step]=\"step()\"\n        [attr.readonly]=\"readonlyInput() ? true : undefined\"\n        [attr.size]=\"size()\"\n        [name]=\"name()\"\n        [value]=\"internalTimeValue()\"\n        [disabled]=\"disabled()\"\n        [required]=\"required()\"\n        (focus)=\"onTimeInputFocus()\"\n        (blur)=\"onTimeInputBlur()\"\n      />\n      <div class=\"gov-form-input__icons\">\n        <gov-icon\n          class=\"validation-icon gov-icon\"\n          name=\"exclamation-lg\"\n          type=\"components\"\n          [attr.size]=\"size()\"\n        >\n        </gov-icon>\n      </div>\n    </div>\n    }\n  </div>\n</div>\n@let hasError = visibleErrors() | rdtFormError; @if(hasError){\n<gov-form-message slot=\"bottom\" color=\"error\" [attr.size]=\"size()\">\n  <gov-icon\n    type=\"components\"\n    name=\"exclamation-triangle-fill\"\n    slot=\"validation-icon\"\n  ></gov-icon>\n  {{ hasError }}\n</gov-form-message>\n}\n", styles: [".warning-color-icon{color:var(--icon-error)!important}.warning-color-text{color:var(--text-status-error)!important}.warning-color-gov-label .gov-form-label__label{color:var(--form-state-label-error, var(--text-status-error))!important}.s_label{font-size:var(--font-size-body-s);line-height:150%;font-weight:400}gov-form-message{font-size:var(--font-size-body-s)}rdt-gov-number-input,rdt-gov-text-input,rdt-gov-select{min-width:60px}\n", ".rdt-date-wrapper{width:100%}.rdt-date-wrapper mat-datepicker-toggle,.rdt-date-wrapper mat-timepicker-toggle{position:absolute}.rdt-date-wrapper.right{display:flex;align-items:center;flex-direction:row-reverse;gap:var(--gap, var(--spacing-s))}.rdt-date-wrapper.left{display:flex;align-items:center;flex-direction:row;gap:var(--gap, var(--spacing-s))}.rdt-date-wrapper.top{display:flex;flex-direction:column;gap:var(--gap, var(--spacing-xs))}.rdt-date-wrapper .gov-form-input__icons{display:var(--exclamation-mark-display, none)}.rdt-date-wrapper mat-datepicker-toggle,.rdt-date-wrapper mat-timepicker-toggle{--mat-icon-button-touch-target-size: calc( var(--padding-horizontal) + var(--icon-size) + var(--gap) );--mat-icon-button-state-layer-size: var( --mat-icon-button-touch-target-size );right:calc(var(--exclamation-mark-width, 0px) + var(--exclamation-mark-offset, 0px))}.rdt-date-wrapper mat-datepicker-toggle button,.rdt-date-wrapper mat-timepicker-toggle button{display:flex;justify-content:center;align-items:center;height:var(--mat-icon-button-state-layer-size)}.rdt-date-wrapper mat-datepicker-toggle button svg,.rdt-date-wrapper mat-timepicker-toggle button svg{width:var(--icon-size);height:var(--icon-size)}.rdt-date-wrapper mat-datepicker-toggle[size=xl],.rdt-date-wrapper mat-timepicker-toggle[size=xl]{--padding-horizontal: var(--spacing-m-nudge);--icon-size: var(--icon-size-xl);--gap: var(--spacing-m)}.rdt-date-wrapper mat-datepicker-toggle[size=l],.rdt-date-wrapper mat-timepicker-toggle[size=l]{--padding-horizontal: var(--spacing-s-nudge);--icon-size: var(--icon-size-l);--gap: var(--spacing-m)}.rdt-date-wrapper mat-datepicker-toggle[size=m],.rdt-date-wrapper mat-timepicker-toggle[size=m]{--padding-horizontal: var(--spacing-s-nudge);--icon-size: var(--icon-size-m);--gap: var(--spacing-s)}.rdt-date-wrapper mat-datepicker-toggle[size=s],.rdt-date-wrapper mat-timepicker-toggle[size=s]{--padding-horizontal: var(--spacing-xs-nudge);--icon-size: var(--icon-size-s);--gap: var(--spacing-s)}.rdt-date-wrapper mat-datepicker-toggle[size=xs],.rdt-date-wrapper mat-timepicker-toggle[size=xs]{--padding-horizontal: var(--spacing-xs-nudge);--icon-size: var(--icon-size-xs);--gap: var(--spacing-xs)}.rdt-date-field{background-color:transparent;border:none;border-radius:var(--border-radius, var(--corner-radius-s));color:var(--form-value-color, var(--text-primary));font-family:var(--font-family-primary, var(--font-family));width:100%;line-height:150%;font-weight:400}.rdt-date-field-position{width:100%;position:relative;display:flex;align-items:center}.rdt-date-field-wrapper{width:100%;flex:1;border-radius:var(--border-radius, var(--corner-radius-s));border:var(--border-width, .0625rem) solid var(--form-border-color, var(--border-subtle));background-color:var(--form-bg-color, var(--background-block-primary));display:flex;align-items:center;gap:0!important}.rdt-date-field-wrapper:focus-within{border-radius:var(--outline-border-radius, var(--corner-radius-xs-nudge));outline:var(--outline-width, .125rem) solid var(--status-focus);outline-offset:var(--outline-offset, .125rem)}.rdt-date-field-wrapper:hover{background-color:var(--form-hover-color, var(--button-outlined-primary-hover))!important}.rdt-date-field-wrapper>*:after{content:\"\";display:block;position:absolute;width:var(--border-width, .0625rem);height:calc(100% + var(--border-width, .0625rem) * 2);left:calc(100% + var(--border-width, .0625rem) / 2);top:calc(-1 * var(--border-width, .0625rem));background-color:var(--border-subtle)}.rdt-date-field-wrapper>*:last-child:after{display:none}.rdt-date-field-wrapper[size=xl] .time{gap:var(--spacing-m)}.rdt-date-field-wrapper[size=xl] .time input{padding-right:var(--padding-horizontal, var(--spacing-m-nudge))!important}.rdt-date-field-wrapper[size=l] .time{gap:var(--spacing-s-nudge)}.rdt-date-field-wrapper[size=l] .time input{padding-right:var(--padding-horizontal, var(--spacing-m))!important}.rdt-date-field-wrapper[size=m] .time{gap:var(--spacing-s)}.rdt-date-field-wrapper[size=m] .time input{padding-right:var(--padding-horizontal, var(--spacing-s-nudge))!important}.rdt-date-field-wrapper[size=s] .time{gap:var(--spacing-xs-nudge)}.rdt-date-field-wrapper[size=s] .time input{padding-right:var(--padding-horizontal, var(--spacing-s))!important;--mat-icon-button-icon-size: 10px}.rdt-date-field-wrapper[size=xs] .time{gap:var(--spacing-xs)}.rdt-date-field-wrapper[size=xs] .time input{padding-right:var(--padding-horizontal, var(--spacing-xs-nudge))!important;--mat-icon-button-icon-size: 10px}.rdt-date-field:focus{outline:none}rdt-gov-date,mat-datepicker-content{--mat-icon-button-icon-size: 24px;--mat-button-text-label-text-font: var(--font-family);--mat-button-text-label-text-size: var(--font-size-body-s);--mat-button-text-label-text-weight: 600;--mat-button-text-label-text-color: var(--text-secondary);--mat-datepicker-calendar-body-label-text-size: var(--font-size-body-s);--mat-datepicker-calendar-body-label-text-weight: 600;--mat-datepicker-calendar-body-label-text-color: var(--text-primary);--mat-datepicker-calendar-text-size: var(--font-size-body-m);--mat-datepicker-calendar-text-font: var(--font-family);--mat-datepicker-calendar-container-background-color: var( --background-neutral-subtle );--mat-datepicker-calendar-container-text-color: var(--text-primary);--mat-datepicker-calendar-container-shape: 8px;--mat-datepicker-calendar-date-text-color: var(--text-primary);--mat-datepicker-calendar-date-selected-state-text-color: var( --color-neutral-0 );--mat-datepicker-calendar-date-today-selected-state-outline-color: var( --color-primary-400 );--mat-datepicker-calendar-container-elevation-shadow: 0px 0px 0px 1px var(--border-subtle);--mat-datepicker-calendar-date-today-outline-color: var( --button-solid-primary );--mat-datepicker-calendar-date-selected-state-background-color: var( --button-solid-primary );--mat-datepicker-calendar-period-button-icon-color: var(--text-primary);--mat-datepicker-calendar-date-hover-state-background-color: var( --background-neutral-subtlest );--mat-datepicker-calendar-header-text-color: var(--text-secondary);--mat-datepicker-calendar-header-text-size: var(--font-size-body-m);--mat-datepicker-calendar-header-text-weight: 600;--mat-tooltip-container-color: var(--color-neutral-950);--mat-tooltip-supporting-text-color: var(--color-neutral-0);--mat-tooltip-container-shape: 8px;--mat-button-text-container-shape: 8px;--mat-sys-on-surface-variant: var(--text-secondary);--mat-sys-primary: var(--button-solid-primary-hover);--mat-sys-dragged-state-layer-opacity: .16;--mat-sys-focus-state-layer-opacity: .12;--mat-sys-hover-state-layer-opacity: .08;--mat-sys-pressed-state-layer-opacity: .12;--mat-timepicker-container-background-color: var(--background-neutral-subtle);--mat-timepicker-container-shape: 8px;--mat-timepicker-container-elevation-shadow: 0px 0px 0px 1px var(--border-subtle);--mat-option-selected-state-layer-color: var(--button-solid-primary-hover);--mat-option-selected-state-label-text-color: var(--color-neutral-0);--mat-datepicker-toggle-active-state-icon-color: var( --mat-datepicker-toggle-icon-color )}rdt-gov-date.ng-invalid.ng-touched,mat-datepicker-content.ng-invalid.ng-touched{--border-subtle: var(--status-error);--mat-datepicker-toggle-icon-color: var(--status-error);--form-value-color: var(--form-state-value-color, var(--text-status-error))}rdt-gov-date.ng-invalid.ng-touched input::-webkit-calendar-picker-indicator,mat-datepicker-content.ng-invalid.ng-touched input::-webkit-calendar-picker-indicator{filter:brightness(0) saturate(100%) invert(22%) sepia(89%) saturate(1847%) hue-rotate(345deg) brightness(98%) contrast(97%);cursor:pointer}rdt-gov-date.ng-invalid.ng-touched,mat-datepicker-content.ng-invalid.ng-touched{--exclamation-mark-display: flex}rdt-gov-date.ng-invalid.ng-touched [size=xl],mat-datepicker-content.ng-invalid.ng-touched [size=xl]{--exclamation-mark-width: var(--icon-size-xl);--exclamation-mark-offset: var(--spacing-m-nudge)}rdt-gov-date.ng-invalid.ng-touched [size=l],mat-datepicker-content.ng-invalid.ng-touched [size=l]{--exclamation-mark-width: var(--icon-size-l);--exclamation-mark-offset: var(--spacing-m)}rdt-gov-date.ng-invalid.ng-touched [size=m],mat-datepicker-content.ng-invalid.ng-touched [size=m]{--exclamation-mark-width: var(--icon-size-m);--exclamation-mark-offset: var(--spacing-s-nudge)}rdt-gov-date.ng-invalid.ng-touched [size=s],mat-datepicker-content.ng-invalid.ng-touched [size=s]{--exclamation-mark-width: var(--icon-size-s);--exclamation-mark-offset: var(--spacing-s)}rdt-gov-date.ng-invalid.ng-touched [size=xs],mat-datepicker-content.ng-invalid.ng-touched [size=xs]{--exclamation-mark-width: var(--icon-size-xs);--exclamation-mark-offset: var(--spacing-xs-nudge)}rdt-gov-date.ng-invalid.ng-touched .time input,mat-datepicker-content.ng-invalid.ng-touched .time input{padding-right:0!important}\n"] }]
+        }], propDecorators: { dateInput: [{ type: i0.ViewChild, args: ['dateInput', { isSignal: true }] }], timeInput: [{ type: i0.ViewChild, args: ['timeInput', { isSignal: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], labelPositionInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], stepInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }] } });
+
+const CODE_ICON_MAP = {
+    401: 'components/exclamation-lg',
+    403: 'components/exclamation-lg',
+    404: 'bs/search',
+    500: 'components/exclamation-triangle-fill',
+};
+const CODE_COLOR_MAP = {
+    401: 'warning',
+    403: 'warning',
+    404: 'neutral',
+    500: 'error',
+};
+class RdtGovStateComponent {
+    header = input('', ...(ngDevMode ? [{ debugName: "header" }] : []));
+    message = input('', ...(ngDevMode ? [{ debugName: "message" }] : []));
+    code = input(null, ...(ngDevMode ? [{ debugName: "code" }] : []));
+    align = input('center', ...(ngDevMode ? [{ debugName: "align" }] : []));
+    size = input('m', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : []));
+    color = input(null, ...(ngDevMode ? [{ debugName: "color" }] : []));
+    static ICON_SIZE_MAP = {
+        s: 'l',
+        m: 'xl',
+        l: '2xl',
+    };
+    resolvedIcon = computed(() => {
+        const c = this.code();
+        return this.icon() ?? (c != null ? CODE_ICON_MAP[c] ?? null : null);
+    }, ...(ngDevMode ? [{ debugName: "resolvedIcon" }] : []));
+    resolvedColor = computed(() => {
+        const c = this.code();
+        return (this.color() ?? (c != null ? CODE_COLOR_MAP[c] ?? 'primary' : 'primary'));
+    }, ...(ngDevMode ? [{ debugName: "resolvedColor" }] : []));
+    resolvedIconSize = computed(() => {
+        const sz = this.size();
+        return RdtGovStateComponent.ICON_SIZE_MAP[sz] || 'xl';
+    }, ...(ngDevMode ? [{ debugName: "resolvedIconSize" }] : []));
+    get hostClass() {
+        return `rdt-gov-state rdt-gov-state--align-${this.align()}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtGovStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: RdtGovStateComponent, isStandalone: true, selector: "rdt-gov-state", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, code: { classPropertyName: "code", publicName: "code", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<div class=\"rdt-gov-state__inner\">\n  @let ico = resolvedIcon(); @let iconSize = resolvedIconSize(); @if (ico) {\n  <div class=\"rdt-gov-state__icon rdt-gov-state__icon--{{ iconSize }}\">\n    <rdt-gov-icon [name]=\"ico\" [size]=\"iconSize\" [color]=\"resolvedColor()\" />\n  </div>\n  } @if (header()) {\n  <div class=\"rdt-gov-state__header\">{{ header() }}</div>\n  } @if (message()) {\n  <div class=\"rdt-gov-state__message\">{{ message() }}</div>\n  } @let c = code(); @if (c != null) {\n  <div class=\"rdt-gov-state__code\">\n    <code>{{ c }}</code>\n  </div>\n  }\n</div>\n", styles: [":host{display:block}:host.rdt-gov-state--align-left .rdt-gov-state__inner{align-items:flex-start;text-align:left}:host.rdt-gov-state--align-center .rdt-gov-state__inner{align-items:center;text-align:center}:host.rdt-gov-state--align-right .rdt-gov-state__inner{align-items:flex-end;text-align:right}.rdt-gov-state__inner{display:flex;flex-direction:column;gap:.75rem}.rdt-gov-state__icon{display:flex;line-height:1}.rdt-gov-state__icon rdt-gov-icon{font-size:64px}.rdt-gov-state__icon.rdt-gov-state__icon--s rdt-gov-icon{font-size:48px}.rdt-gov-state__icon.rdt-gov-state__icon--m rdt-gov-icon{font-size:64px}.rdt-gov-state__icon.rdt-gov-state__icon--l rdt-gov-icon{font-size:96px}.rdt-gov-state__header{font-size:1.25rem;font-weight:600;margin:0}.rdt-gov-state__message{margin:0}.rdt-gov-state__code code{display:inline-block;background-color:var(--gov-color-neutral-100, #f3f4f5);padding:.125rem .5rem;border-radius:4px;font-size:.875rem}\n"], dependencies: [{ kind: "component", type: RdtGovIconComponent, selector: "rdt-gov-icon", inputs: ["size", "color"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtGovStateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rdt-gov-state', standalone: true, imports: [RdtGovIconComponent], template: "<div class=\"rdt-gov-state__inner\">\n  @let ico = resolvedIcon(); @let iconSize = resolvedIconSize(); @if (ico) {\n  <div class=\"rdt-gov-state__icon rdt-gov-state__icon--{{ iconSize }}\">\n    <rdt-gov-icon [name]=\"ico\" [size]=\"iconSize\" [color]=\"resolvedColor()\" />\n  </div>\n  } @if (header()) {\n  <div class=\"rdt-gov-state__header\">{{ header() }}</div>\n  } @if (message()) {\n  <div class=\"rdt-gov-state__message\">{{ message() }}</div>\n  } @let c = code(); @if (c != null) {\n  <div class=\"rdt-gov-state__code\">\n    <code>{{ c }}</code>\n  </div>\n  }\n</div>\n", styles: [":host{display:block}:host.rdt-gov-state--align-left .rdt-gov-state__inner{align-items:flex-start;text-align:left}:host.rdt-gov-state--align-center .rdt-gov-state__inner{align-items:center;text-align:center}:host.rdt-gov-state--align-right .rdt-gov-state__inner{align-items:flex-end;text-align:right}.rdt-gov-state__inner{display:flex;flex-direction:column;gap:.75rem}.rdt-gov-state__icon{display:flex;line-height:1}.rdt-gov-state__icon rdt-gov-icon{font-size:64px}.rdt-gov-state__icon.rdt-gov-state__icon--s rdt-gov-icon{font-size:48px}.rdt-gov-state__icon.rdt-gov-state__icon--m rdt-gov-icon{font-size:64px}.rdt-gov-state__icon.rdt-gov-state__icon--l rdt-gov-icon{font-size:96px}.rdt-gov-state__header{font-size:1.25rem;font-weight:600;margin:0}.rdt-gov-state__message{margin:0}.rdt-gov-state__code code{display:inline-block;background-color:var(--gov-color-neutral-100, #f3f4f5);padding:.125rem .5rem;border-radius:4px;font-size:.875rem}\n"] }]
+        }], propDecorators: { header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], code: [{ type: i0.Input, args: [{ isSignal: true, alias: "code", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
 class RdtGovTextInputComponent extends RdtTextInputComponent {
     renderer = inject(Renderer2);
-    govInput = viewChild('govInput');
-    size = input('s');
-    icon = input(null);
-    iconStart = input(null);
-    labelPositionInput = input('top', {
-        alias: 'labelPosition',
-    });
-    labelPosition = linkedSignal(() => this.labelPositionInput());
-    inputElement = signal(null);
+    govInput = viewChild('govInput', ...(ngDevMode ? [{ debugName: "govInput" }] : []));
+    size = input('s', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : []));
+    iconStart = input(null, ...(ngDevMode ? [{ debugName: "iconStart" }] : []));
+    labelPositionInput = input('top', { ...(ngDevMode ? { debugName: "labelPositionInput" } : {}), alias: 'labelPosition' });
+    labelPosition = linkedSignal(() => this.labelPositionInput(), ...(ngDevMode ? [{ debugName: "labelPosition" }] : []));
+    inputElement = signal(null, ...(ngDevMode ? [{ debugName: "inputElement" }] : []));
     hasErrors = false;
     isEmpty(value) {
         return value == null || value === '';
@@ -1512,14 +1784,14 @@ class RdtGovTextInputComponent extends RdtTextInputComponent {
                 this.renderer.removeAttribute(input, 'readonly');
             }
         }
-    });
+    }, ...(ngDevMode ? [{ debugName: "readonlyEffect" }] : []));
     inputElementEffect = effect(async () => {
         const govInput = this.govInput()?.nativeElement;
         if (govInput) {
             const input = await govInput.getRef();
             this.inputElement.set(input);
         }
-    });
+    }, ...(ngDevMode ? [{ debugName: "inputElementEffect" }] : []));
     errorFixEffect = effect(() => {
         const inputElement = this.inputElement();
         const visibleErrors = this.visibleErrors();
@@ -1531,7 +1803,7 @@ class RdtGovTextInputComponent extends RdtTextInputComponent {
                 forceFocus(inputElement);
             }
         }
-    });
+    }, ...(ngDevMode ? [{ debugName: "errorFixEffect" }] : []));
     async focus() {
         const govInput = await this.govInput()?.nativeElement;
         const el = await govInput?.getRef();
@@ -1545,8 +1817,8 @@ class RdtGovTextInputComponent extends RdtTextInputComponent {
             }, 1);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovTextInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: RdtGovTextInputComponent, isStandalone: true, selector: "rdt-gov-text-input", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconStart: { classPropertyName: "iconStart", publicName: "iconStart", isSignal: true, isRequired: false, transformFunction: null }, labelPositionInput: { classPropertyName: "labelPositionInput", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtGovTextInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: RdtGovTextInputComponent, isStandalone: true, selector: "rdt-gov-text-input", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconStart: { classPropertyName: "iconStart", publicName: "iconStart", isSignal: true, isRequired: false, transformFunction: null }, labelPositionInput: { classPropertyName: "labelPositionInput", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: RdtGovTextInputComponent,
@@ -1556,9 +1828,9 @@ class RdtGovTextInputComponent extends RdtTextInputComponent {
                 provide: RdtBaseFormInputComponent,
                 useExisting: RdtGovTextInputComponent,
             },
-        ], viewQueries: [{ propertyName: "govInput", first: true, predicate: ["govInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@let lPos = labelPosition(); @if(lPos === 'top'){\n<gov-form-label slot=\"left\" size=\"m\" [class.warning-color-gov-label]=\"hasError\"\n  >{{ label() }} @if (required()) {\n  <span class=\"warning-color-text\">*</span>\n  }</gov-form-label\n>\n}\n<gov-form-input\n  #govInput\n  [inputType]=\"type()\"\n  [size]=\"size()\"\n  [value]=\"internalValue()\"\n  [placeholder]=\"placeholder()\"\n  [autocomplete]=\"autocomplete()\"\n  [minlength]=\"minlength()\"\n  [maxlength]=\"maxlength()\"\n  [invalid]=\"invalid() && touched()\"\n  [attr.invalid]=\"invalid() && touched()\"\n  [required]=\"required()\"\n  [disabled]=\"disabled()\"\n  [attr.disabled]=\"disabled()\"\n  [name]=\"id()\"\n  [identifier]=\"id()\"\n  (gov-input)=\"onInternalValueChange($event.detail.value)\"\n  (gov-focus)=\"onFocus()\"\n  (gov-blur)=\"onBlur()\"\n>\n  @let lI = iconStart(); @let rI = icon(); @if(lPos === 'left') {\n  <p\n    class=\"gov-form-label__label s_label\"\n    slot=\"prefix\"\n    [class.warning-color-text]=\"hasError\"\n  >\n    {{ label() }} @if (required()) {\n    <span class=\"warning-color-text\">*</span>\n    }\n  </p>\n  } @if(lPos === 'right') {\n  <p\n    class=\"gov-form-label__label s_label\"\n    slot=\"sufix\"\n    [class.warning-color-text]=\"hasError\"\n  >\n    {{ label() }} @if (required()) {\n    <span class=\"warning-color-text\">*</span>\n    }\n  </p>\n  } @if (lI) {\n  <span slot=\"icon-start\" style=\"width: auto\">\n    <ng-container rdtIconOutlet [inputs]=\"{ name: lI }\"></ng-container>\n  </span>\n  } @if (rI) {\n  <span slot=\"icon-end\" style=\"width: auto\">\n    <ng-container rdtIconOutlet [inputs]=\"{ name: rI }\"></ng-container>\n  </span>\n  }\n</gov-form-input>\n@let hasError = visibleErrors() | rdtFormError; @if(hasError){\n<gov-form-message slot=\"bottom\" color=\"error\" [attr.size]=\"size()\">\n  <gov-icon\n    type=\"components\"\n    name=\"exclamation-triangle-fill\"\n    slot=\"validation-icon\"\n  ></gov-icon>\n  {{ hasError }}\n</gov-form-message>\n}\n", styles: [".warning-color-icon{color:var(--icon-error)!important}.warning-color-text{color:var(--text-status-error)!important}.warning-color-gov-label .gov-form-label__label{color:var(--form-state-label-error, var(--text-status-error))!important}.s_label{font-size:var(--font-size-body-s);line-height:150%;font-weight:400}gov-form-message{font-size:var(--font-size-body-s)}rdt-gov-number-input,rdt-gov-text-input,rdt-gov-select{min-width:60px}\n"], dependencies: [{ kind: "pipe", type: RdtFormErrorPipe, name: "rdtFormError" }, { kind: "directive", type: RdtIconOutletDirective, selector: "[rdtIconOutlet]", exportAs: ["rdtIconOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "govInput", first: true, predicate: ["govInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@let lPos = labelPosition(); @if(lPos === 'top'){\n<gov-form-label slot=\"left\" size=\"m\" [class.warning-color-gov-label]=\"hasError\"\n  >{{ label() }} @if (required()) {\n  <span class=\"warning-color-text\">*</span>\n  }</gov-form-label\n>\n}\n<gov-form-input\n  #govInput\n  [inputType]=\"type()\"\n  [size]=\"size()\"\n  [value]=\"internalValue()\"\n  [placeholder]=\"placeholder()\"\n  [autocomplete]=\"autocomplete()\"\n  [minlength]=\"minlength()\"\n  [maxlength]=\"maxlength()\"\n  [invalid]=\"invalid() && touched()\"\n  [attr.invalid]=\"invalid() && touched()\"\n  [required]=\"required()\"\n  [disabled]=\"disabled()\"\n  [attr.disabled]=\"disabled()\"\n  [name]=\"id()\"\n  [identifier]=\"id()\"\n  (gov-input)=\"onInternalValueChange($event.detail.value)\"\n  (gov-focus)=\"onFocus()\"\n  (gov-blur)=\"onBlur()\"\n>\n  @let lI = iconStart(); @let rI = icon(); @if(lPos === 'left') {\n  <p\n    class=\"gov-form-label__label s_label\"\n    slot=\"prefix\"\n    [class.warning-color-text]=\"hasError\"\n  >\n    {{ label() }} @if (required()) {\n    <span class=\"warning-color-text\">*</span>\n    }\n  </p>\n  } @if(lPos === 'right') {\n  <p\n    class=\"gov-form-label__label s_label\"\n    slot=\"sufix\"\n    [class.warning-color-text]=\"hasError\"\n  >\n    {{ label() }} @if (required()) {\n    <span class=\"warning-color-text\">*</span>\n    }\n  </p>\n  } @if (lI) {\n  <span slot=\"icon-start\" style=\"width: auto\">\n    <ng-container rdtIconOutlet [inputs]=\"{ name: lI }\"></ng-container>\n  </span>\n  } @if (rI) {\n  <span slot=\"icon-end\" style=\"width: auto\">\n    <ng-container rdtIconOutlet [inputs]=\"{ name: rI }\"></ng-container>\n  </span>\n  }\n</gov-form-input>\n@let hasError = visibleErrors() | rdtFormError; @if(hasError){\n<gov-form-message slot=\"bottom\" color=\"error\" [attr.size]=\"size()\">\n  <gov-icon\n    type=\"components\"\n    name=\"exclamation-triangle-fill\"\n    slot=\"validation-icon\"\n  ></gov-icon>\n  {{ hasError }}\n</gov-form-message>\n}\n", styles: [".warning-color-icon{color:var(--icon-error)!important}.warning-color-text{color:var(--text-status-error)!important}.warning-color-gov-label .gov-form-label__label{color:var(--form-state-label-error, var(--text-status-error))!important}.s_label{font-size:var(--font-size-body-s);line-height:150%;font-weight:400}gov-form-message{font-size:var(--font-size-body-s)}rdt-gov-number-input,rdt-gov-text-input,rdt-gov-select{min-width:60px}\n"], dependencies: [{ kind: "directive", type: RdtIconOutletDirective, selector: "[rdtIconOutlet]", exportAs: ["rdtIconOutlet"] }, { kind: "pipe", type: RdtFormErrorPipe, name: "rdtFormError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovTextInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtGovTextInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rdt-gov-text-input', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [RdtFormErrorPipe, RdtIconOutletDirective], providers: [
                         {
@@ -1571,7 +1843,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                             useExisting: RdtGovTextInputComponent,
                         },
                     ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@let lPos = labelPosition(); @if(lPos === 'top'){\n<gov-form-label slot=\"left\" size=\"m\" [class.warning-color-gov-label]=\"hasError\"\n  >{{ label() }} @if (required()) {\n  <span class=\"warning-color-text\">*</span>\n  }</gov-form-label\n>\n}\n<gov-form-input\n  #govInput\n  [inputType]=\"type()\"\n  [size]=\"size()\"\n  [value]=\"internalValue()\"\n  [placeholder]=\"placeholder()\"\n  [autocomplete]=\"autocomplete()\"\n  [minlength]=\"minlength()\"\n  [maxlength]=\"maxlength()\"\n  [invalid]=\"invalid() && touched()\"\n  [attr.invalid]=\"invalid() && touched()\"\n  [required]=\"required()\"\n  [disabled]=\"disabled()\"\n  [attr.disabled]=\"disabled()\"\n  [name]=\"id()\"\n  [identifier]=\"id()\"\n  (gov-input)=\"onInternalValueChange($event.detail.value)\"\n  (gov-focus)=\"onFocus()\"\n  (gov-blur)=\"onBlur()\"\n>\n  @let lI = iconStart(); @let rI = icon(); @if(lPos === 'left') {\n  <p\n    class=\"gov-form-label__label s_label\"\n    slot=\"prefix\"\n    [class.warning-color-text]=\"hasError\"\n  >\n    {{ label() }} @if (required()) {\n    <span class=\"warning-color-text\">*</span>\n    }\n  </p>\n  } @if(lPos === 'right') {\n  <p\n    class=\"gov-form-label__label s_label\"\n    slot=\"sufix\"\n    [class.warning-color-text]=\"hasError\"\n  >\n    {{ label() }} @if (required()) {\n    <span class=\"warning-color-text\">*</span>\n    }\n  </p>\n  } @if (lI) {\n  <span slot=\"icon-start\" style=\"width: auto\">\n    <ng-container rdtIconOutlet [inputs]=\"{ name: lI }\"></ng-container>\n  </span>\n  } @if (rI) {\n  <span slot=\"icon-end\" style=\"width: auto\">\n    <ng-container rdtIconOutlet [inputs]=\"{ name: rI }\"></ng-container>\n  </span>\n  }\n</gov-form-input>\n@let hasError = visibleErrors() | rdtFormError; @if(hasError){\n<gov-form-message slot=\"bottom\" color=\"error\" [attr.size]=\"size()\">\n  <gov-icon\n    type=\"components\"\n    name=\"exclamation-triangle-fill\"\n    slot=\"validation-icon\"\n  ></gov-icon>\n  {{ hasError }}\n</gov-form-message>\n}\n", styles: [".warning-color-icon{color:var(--icon-error)!important}.warning-color-text{color:var(--text-status-error)!important}.warning-color-gov-label .gov-form-label__label{color:var(--form-state-label-error, var(--text-status-error))!important}.s_label{font-size:var(--font-size-body-s);line-height:150%;font-weight:400}gov-form-message{font-size:var(--font-size-body-s)}rdt-gov-number-input,rdt-gov-text-input,rdt-gov-select{min-width:60px}\n"] }]
-        }] });
+        }], propDecorators: { govInput: [{ type: i0.ViewChild, args: ['govInput', { isSignal: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStart", required: false }] }], labelPositionInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }] } });
 
 class RdtGovThemeService {
     attribute = 'data-theme';
@@ -1596,10 +1868,10 @@ class RdtGovThemeService {
     getTheme() {
         return document.documentElement.getAttribute(this.attribute);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovThemeService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtGovThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtGovThemeService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtGovThemeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RdtGovThemeService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -1608,5 +1880,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DEFAULT_GOV_BUTTON_COLOR, DEFAULT_GOV_BUTTON_SIZE, DEFAULT_GOV_BUTTON_TYPE, RDT_GOV_ALERT_DIALOG_CONFIG_PROVIDER, RDT_GOV_BASE_DIALOG_CONFIG_PROVIDER, RDT_GOV_CONFIRM_DIALOG_CONFIG_PROVIDER, RDT_GOV_NOTIFICATION_CONFIG_PROVIDER, RDT_GOV_NOTIFICATION_DEFAULT_CONFIG, RdtGovButtonComponent, RdtGovCheckboxComponent, RdtGovDateComponent, RdtGovDialogBase, RdtGovDialogComponent, RdtGovDialogContentComponent, RdtGovDialogFooterComponent, RdtGovDialogHeaderComponent, RdtGovDialogLoadingComponent, RdtGovDialogRef, RdtGovDialogService, RdtGovIconComponent, RdtGovNotificationService, RdtGovNumberInputComponent, RdtGovSelectComponent, RdtGovSelectOfflineProviderDirective, RdtGovSpinnerComponent, RdtGovStandardDialogComponent, RdtGovTextInputComponent, RdtGovThemeService, forceFocus, initRdtGov, provideNgrdtGov };
+export { DEFAULT_GOV_BUTTON_COLOR, DEFAULT_GOV_BUTTON_SIZE, DEFAULT_GOV_BUTTON_TYPE, RDT_GOV_ALERT_DIALOG_CONFIG_PROVIDER, RDT_GOV_BASE_DIALOG_CONFIG_PROVIDER, RDT_GOV_CONFIRM_DIALOG_CONFIG_PROVIDER, RDT_GOV_NOTIFICATION_CONFIG_PROVIDER, RDT_GOV_NOTIFICATION_DEFAULT_CONFIG, RdtGovButtonComponent, RdtGovCheckboxComponent, RdtGovDateComponent, RdtGovDialogBase, RdtGovDialogComponent, RdtGovDialogContentComponent, RdtGovDialogFooterComponent, RdtGovDialogHeaderComponent, RdtGovDialogLoadingComponent, RdtGovDialogRef, RdtGovDialogService, RdtGovDragDirective, RdtGovIconComponent, RdtGovNotificationService, RdtGovNumberInputComponent, RdtGovSelectComponent, RdtGovSelectOfflineProviderDirective, RdtGovSpinnerComponent, RdtGovStandardDialogComponent, RdtGovStateComponent, RdtGovTextInputComponent, RdtGovThemeService, forceFocus, initRdtGov, provideNgrdtGov };
 //# sourceMappingURL=ngrdt-gov.mjs.map