@sebgroup/green-angular 5.0.0 → 5.1.1

package/fesm2022/sebgroup-green-angular.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, ContentChildren, NgModule, ChangeDetectionStrategy, HostBinding, Directive, QueryList, ViewChildren, ViewChild, CUSTOM_ELEMENTS_SCHEMA, Injector, Inject, ContentChild, InjectionToken, inject, Renderer2, ViewContainerRef, ChangeDetectorRef, TemplateRef } from '@angular/core';
+import { EventEmitter, Component, Input, Output, ContentChildren, NgModule, ChangeDetectionStrategy, HostBinding, Directive, QueryList, ViewChildren, ViewChild, CUSTOM_ELEMENTS_SCHEMA, Injector, Inject, ContentChild, InjectionToken, Injectable, inject, Renderer2, ViewContainerRef, ChangeDetectorRef, TemplateRef, forwardRef } from '@angular/core';
 import { randomId, calculateDegrees, sliderColors, getSliderTrackBackground, PaginationI18n } from '@sebgroup/extract';
 import * as i1$1 from '@angular/platform-browser';
 import '@sebgroup/green-core/components/context-menu/index.js';
@@ -9,7 +9,7 @@ import * as ContextMenuTransStyles from '@sebgroup/green-core/components/context
 import * as i2 from '@sebgroup/green-angular/src/lib/shared';
 import { NggCoreWrapperModule as NggCoreWrapperModule$1 } from '@sebgroup/green-angular/src/lib/shared';
 import * as i2$1 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, NgControl, FormsModule } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, NgControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { startOfDay, endOfDay } from 'date-fns';
 import '@sebgroup/green-core/components/datepicker/index.js';
 import * as DatepickerTransStyles from '@sebgroup/green-core/components/datepicker/datepicker.trans.styles.js';
@@ -692,7 +692,7 @@ class NggDatepickerComponent {
                 useExisting: NggDatepickerComponent,
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"form-group\">\n  <gds-datepicker\n    *nggCoreElement\n    [attr.id]=\"id\"\n    [label]=\"label\"\n    [value]=\"value\"\n    (change)=\"onDateChange($event)\"\n    [invalid]=\"isValid === false\"\n    [min]=\"min\"\n    [max]=\"max\"\n    [showWeekNumbers]=\"showWeekNumbers\"\n    [dateformat]=\"dateFormat\"\n    [size]=\"size\"\n    [hideLabel]=\"hideLabel\"\n    [disabledWeekends]=\"disabledWeekends\"\n    [disabledDates]=\"disabledDates\"\n  >\n    <span slot=\"message\">\n      <ng-content select=\"[data-form-info]\"></ng-content>\n    </span>\n  </gds-datepicker>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NggCoreElementDirective, selector: "[nggCoreElement]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<div class=\"form-group\">\n  <gds-datepicker\n    *nggCoreElement\n    [attr.id]=\"id\"\n    [label]=\"label\"\n    [value]=\"value\"\n    (change)=\"onDateChange($event)\"\n    [invalid]=\"isValid === false\"\n    [min]=\"min\"\n    [max]=\"max\"\n    [showWeekNumbers]=\"showWeekNumbers\"\n    [dateformat]=\"dateFormat\"\n    [size]=\"size === 'small' ? 'small' : 'large'\"\n    [hideLabel]=\"hideLabel\"\n    [disabledWeekends]=\"disabledWeekends\"\n    [disabledDates]=\"disabledDates\"\n  >\n    <span slot=\"message\">\n      <ng-content select=\"[data-form-info]\"></ng-content>\n    </span>\n  </gds-datepicker>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NggCoreElementDirective, selector: "[nggCoreElement]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggDatepickerComponent, decorators: [{
             type: Component,
@@ -702,7 +702,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                             useExisting: NggDatepickerComponent,
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-group\">\n  <gds-datepicker\n    *nggCoreElement\n    [attr.id]=\"id\"\n    [label]=\"label\"\n    [value]=\"value\"\n    (change)=\"onDateChange($event)\"\n    [invalid]=\"isValid === false\"\n    [min]=\"min\"\n    [max]=\"max\"\n    [showWeekNumbers]=\"showWeekNumbers\"\n    [dateformat]=\"dateFormat\"\n    [size]=\"size\"\n    [hideLabel]=\"hideLabel\"\n    [disabledWeekends]=\"disabledWeekends\"\n    [disabledDates]=\"disabledDates\"\n  >\n    <span slot=\"message\">\n      <ng-content select=\"[data-form-info]\"></ng-content>\n    </span>\n  </gds-datepicker>\n</div>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-group\">\n  <gds-datepicker\n    *nggCoreElement\n    [attr.id]=\"id\"\n    [label]=\"label\"\n    [value]=\"value\"\n    (change)=\"onDateChange($event)\"\n    [invalid]=\"isValid === false\"\n    [min]=\"min\"\n    [max]=\"max\"\n    [showWeekNumbers]=\"showWeekNumbers\"\n    [dateformat]=\"dateFormat\"\n    [size]=\"size === 'small' ? 'small' : 'large'\"\n    [hideLabel]=\"hideLabel\"\n    [disabledWeekends]=\"disabledWeekends\"\n    [disabledDates]=\"disabledDates\"\n  >\n    <span slot=\"message\">\n      <ng-content select=\"[data-form-info]\"></ng-content>\n    </span>\n  </gds-datepicker>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { size: [{
                 type: Input
             }], hideLabel: [{
@@ -1069,11 +1069,11 @@ class NggInPageWizardStepCardComponent {
         this.handleNextClick.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggInPageWizardStepCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggInPageWizardStepCardComponent, selector: "ngg-in-page-wizard-step-card", inputs: { stepIsValid: "stepIsValid", stepText: "stepText", title: "title", editBtnText: "editBtnText", nextBtnText: "nextBtnText", showNextBtnIcon: "showNextBtnIcon", isCompleted: "isCompleted", disableNext: "disableNext", isActive: "isActive" }, outputs: { handleNextClick: "handleNextClick", handleEditClick: "handleEditClick" }, ngImport: i0, template: "<section\n  class=\"gds-in-page-wizard-step-card card\"\n  data-testid=\"in-page-wizard-step-card-root\"\n  [class.active]=\"!!isActive\"\n  [class.completed]=\"!!isCompleted\"\n>\n  <header class=\"gds-in-page-wizard-step-card__header\">\n    <div class=\"gds-in-page-wizard-step-card__header__icon\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n        <!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->\n        <path\n          d=\"M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z\"\n        />\n      </svg>\n    </div>\n    <div\n      class=\"gds-in-page-wizard-step-card__header__progress\"\n      data-testid=\"in-page-wizard-step-card-step-text\"\n    >\n      {{ stepText }}\n    </div>\n    <div\n      class=\"gds-in-page-wizard-step-card__header__title\"\n      data-testid=\"in-page-wizard-step-card-title\"\n    >\n      <h2 class=\"h4\">{{ title }}</h2>\n    </div>\n\n    <div\n      class=\"gds-in-page-wizard-step-card__header__edit\"\n      *ngIf=\"isCompleted && !isActive\"\n    >\n      <button\n        class=\"secondary small\"\n        (click)=\"handleOnEditBtnClick($event)\"\n        data-testid=\"in-page-wizard-step-card-edit-btn\"\n      >\n        <ng-template *ngTemplateOutlet=\"editIcon\"> </ng-template>\n        {{ editBtnText }}\n      </button>\n    </div>\n  </header>\n\n  <div\n    class=\"gds-in-page-wizard-step-card__content\"\n    *ngIf=\"!!isActive || !!isCompleted\"\n    data-testid=\"in-page-wizard-step-card-content\"\n  >\n    <ng-content></ng-content>\n  </div>\n  <footer\n    class=\"gds-in-page-wizard-step-card__footer gds-in-page-wizard-step-card__footer--edit\"\n    *ngIf=\"isCompleted && !isActive\"\n  >\n    <button\n      class=\"secondary\"\n      (click)=\"handleOnEditBtnClick($event)\"\n      data-testid=\"in-page-wizard-step-card-footer-edit-btn\"\n    >\n      <ng-template *ngTemplateOutlet=\"editIcon\"> </ng-template>\n      {{ editBtnText }}\n    </button>\n  </footer>\n\n  <footer\n    class=\"gds-in-page-wizard-step-card__footer gds-in-page-wizard-step-card__footer--next\"\n    *ngIf=\"isActive\"\n  >\n    <button\n      class=\"primary\"\n      [disabled]=\"disableNext\"\n      (click)=\"handleOnNextBtnClick($event)\"\n      data-testid=\"in-page-wizard-step-card-next-btn\"\n    >\n      {{ nextBtnText }}\n      <ng-container *ngIf=\"showNextBtnIcon\">\n        <ng-template *ngTemplateOutlet=\"nextIcon\"> </ng-template>\n      </ng-container>\n    </button>\n  </footer>\n</section>\n\n<ng-template #editIcon>\n  <svg\n    viewBox=\"0 0 576 512\"\n    class=\"edit-icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    focusable=\"false\"\n  >\n    <path\n      fill=\"var(--color)\"\n      d=\"M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z\"\n    ></path>\n  </svg>\n</ng-template>\n\n<ng-template #nextIcon>\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"1\"\n    class=\"next-icon\"\n    data-testid=\"in-page-wizard-step-card-next-icon\"\n  >\n    <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n    <path d=\"M12 5l0 14\" />\n    <path d=\"M18 13l-6 6\" />\n    <path d=\"M6 13l6 6\" />\n  </svg>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggInPageWizardStepCardComponent, selector: "ngg-in-page-wizard-step-card", inputs: { stepIsValid: "stepIsValid", stepText: "stepText", title: "title", editBtnText: "editBtnText", nextBtnText: "nextBtnText", showNextBtnIcon: "showNextBtnIcon", isCompleted: "isCompleted", disableNext: "disableNext", isActive: "isActive" }, outputs: { handleNextClick: "handleNextClick", handleEditClick: "handleEditClick" }, ngImport: i0, template: "<section\n  class=\"gds-in-page-wizard-step-card card\"\n  data-testid=\"in-page-wizard-step-card-root\"\n  [class.active]=\"!!isActive\"\n  [class.completed]=\"!!isCompleted\"\n>\n  <header class=\"gds-in-page-wizard-step-card__header\">\n    <div class=\"gds-in-page-wizard-step-card__header__icon\">\n      <svg\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        focusable=\"false\"\n      >\n        <path\n          d=\"M17.6203 6.60836L9.40014 14.8285L6.37976 11.8081C6.23332 11.6617 5.99588 11.6617 5.84942 11.8081L4.96554 12.692C4.8191 12.8384 4.8191 13.0759 4.96554 13.2223L9.13495 17.3917C9.28138 17.5382 9.51882 17.5382 9.66529 17.3917L19.0344 8.02258C19.1809 7.87614 19.1809 7.63871 19.0344 7.49224L18.1506 6.60836C18.0041 6.46193 17.7667 6.46193 17.6203 6.60836Z\"\n          fill=\"white\"\n        ></path>\n      </svg>\n    </div>\n    <div\n      class=\"gds-in-page-wizard-step-card__header__progress\"\n      data-testid=\"in-page-wizard-step-card-step-text\"\n    >\n      {{ stepText }}\n    </div>\n    <div\n      class=\"gds-in-page-wizard-step-card__header__title\"\n      data-testid=\"in-page-wizard-step-card-title\"\n    >\n      <h2 class=\"h4\">{{ title }}</h2>\n    </div>\n\n    <div\n      class=\"gds-in-page-wizard-step-card__header__edit\"\n      *ngIf=\"isCompleted && !isActive\"\n    >\n      <button\n        class=\"secondary small\"\n        (click)=\"handleOnEditBtnClick($event)\"\n        data-testid=\"in-page-wizard-step-card-edit-btn\"\n      >\n        <ng-template *ngTemplateOutlet=\"editIcon\"> </ng-template>\n        {{ editBtnText }}\n      </button>\n    </div>\n  </header>\n\n  <div\n    class=\"gds-in-page-wizard-step-card__content\"\n    *ngIf=\"!!isActive || !!isCompleted\"\n    data-testid=\"in-page-wizard-step-card-content\"\n  >\n    <ng-content></ng-content>\n  </div>\n  <footer\n    class=\"gds-in-page-wizard-step-card__footer gds-in-page-wizard-step-card__footer--edit\"\n    *ngIf=\"isCompleted && !isActive\"\n  >\n    <button\n      class=\"secondary\"\n      (click)=\"handleOnEditBtnClick($event)\"\n      data-testid=\"in-page-wizard-step-card-footer-edit-btn\"\n    >\n      <ng-template *ngTemplateOutlet=\"editIcon\"> </ng-template>\n      {{ editBtnText }}\n    </button>\n  </footer>\n\n  <footer\n    class=\"gds-in-page-wizard-step-card__footer gds-in-page-wizard-step-card__footer--next\"\n    *ngIf=\"isActive\"\n  >\n    <button\n      class=\"primary\"\n      [disabled]=\"disableNext\"\n      (click)=\"handleOnNextBtnClick($event)\"\n      data-testid=\"in-page-wizard-step-card-next-btn\"\n    >\n      {{ nextBtnText }}\n      <ng-container *ngIf=\"showNextBtnIcon\">\n        <ng-template *ngTemplateOutlet=\"nextIcon\"> </ng-template>\n      </ng-container>\n    </button>\n  </footer>\n</section>\n\n<ng-template #editIcon>\n  <svg\n    viewBox=\"0 0 576 512\"\n    class=\"edit-icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    focusable=\"false\"\n  >\n    <path\n      fill=\"var(--color)\"\n      d=\"M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z\"\n    ></path>\n  </svg>\n</ng-template>\n\n<ng-template #nextIcon>\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"1\"\n    class=\"next-icon\"\n    data-testid=\"in-page-wizard-step-card-next-icon\"\n  >\n    <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n    <path d=\"M12 5l0 14\" />\n    <path d=\"M18 13l-6 6\" />\n    <path d=\"M6 13l6 6\" />\n  </svg>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggInPageWizardStepCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngg-in-page-wizard-step-card', template: "<section\n  class=\"gds-in-page-wizard-step-card card\"\n  data-testid=\"in-page-wizard-step-card-root\"\n  [class.active]=\"!!isActive\"\n  [class.completed]=\"!!isCompleted\"\n>\n  <header class=\"gds-in-page-wizard-step-card__header\">\n    <div class=\"gds-in-page-wizard-step-card__header__icon\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n        <!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->\n        <path\n          d=\"M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z\"\n        />\n      </svg>\n    </div>\n    <div\n      class=\"gds-in-page-wizard-step-card__header__progress\"\n      data-testid=\"in-page-wizard-step-card-step-text\"\n    >\n      {{ stepText }}\n    </div>\n    <div\n      class=\"gds-in-page-wizard-step-card__header__title\"\n      data-testid=\"in-page-wizard-step-card-title\"\n    >\n      <h2 class=\"h4\">{{ title }}</h2>\n    </div>\n\n    <div\n      class=\"gds-in-page-wizard-step-card__header__edit\"\n      *ngIf=\"isCompleted && !isActive\"\n    >\n      <button\n        class=\"secondary small\"\n        (click)=\"handleOnEditBtnClick($event)\"\n        data-testid=\"in-page-wizard-step-card-edit-btn\"\n      >\n        <ng-template *ngTemplateOutlet=\"editIcon\"> </ng-template>\n        {{ editBtnText }}\n      </button>\n    </div>\n  </header>\n\n  <div\n    class=\"gds-in-page-wizard-step-card__content\"\n    *ngIf=\"!!isActive || !!isCompleted\"\n    data-testid=\"in-page-wizard-step-card-content\"\n  >\n    <ng-content></ng-content>\n  </div>\n  <footer\n    class=\"gds-in-page-wizard-step-card__footer gds-in-page-wizard-step-card__footer--edit\"\n    *ngIf=\"isCompleted && !isActive\"\n  >\n    <button\n      class=\"secondary\"\n      (click)=\"handleOnEditBtnClick($event)\"\n      data-testid=\"in-page-wizard-step-card-footer-edit-btn\"\n    >\n      <ng-template *ngTemplateOutlet=\"editIcon\"> </ng-template>\n      {{ editBtnText }}\n    </button>\n  </footer>\n\n  <footer\n    class=\"gds-in-page-wizard-step-card__footer gds-in-page-wizard-step-card__footer--next\"\n    *ngIf=\"isActive\"\n  >\n    <button\n      class=\"primary\"\n      [disabled]=\"disableNext\"\n      (click)=\"handleOnNextBtnClick($event)\"\n      data-testid=\"in-page-wizard-step-card-next-btn\"\n    >\n      {{ nextBtnText }}\n      <ng-container *ngIf=\"showNextBtnIcon\">\n        <ng-template *ngTemplateOutlet=\"nextIcon\"> </ng-template>\n      </ng-container>\n    </button>\n  </footer>\n</section>\n\n<ng-template #editIcon>\n  <svg\n    viewBox=\"0 0 576 512\"\n    class=\"edit-icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    focusable=\"false\"\n  >\n    <path\n      fill=\"var(--color)\"\n      d=\"M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z\"\n    ></path>\n  </svg>\n</ng-template>\n\n<ng-template #nextIcon>\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"1\"\n    class=\"next-icon\"\n    data-testid=\"in-page-wizard-step-card-next-icon\"\n  >\n    <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n    <path d=\"M12 5l0 14\" />\n    <path d=\"M18 13l-6 6\" />\n    <path d=\"M6 13l6 6\" />\n  </svg>\n</ng-template>\n" }]
+            args: [{ selector: 'ngg-in-page-wizard-step-card', template: "<section\n  class=\"gds-in-page-wizard-step-card card\"\n  data-testid=\"in-page-wizard-step-card-root\"\n  [class.active]=\"!!isActive\"\n  [class.completed]=\"!!isCompleted\"\n>\n  <header class=\"gds-in-page-wizard-step-card__header\">\n    <div class=\"gds-in-page-wizard-step-card__header__icon\">\n      <svg\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        focusable=\"false\"\n      >\n        <path\n          d=\"M17.6203 6.60836L9.40014 14.8285L6.37976 11.8081C6.23332 11.6617 5.99588 11.6617 5.84942 11.8081L4.96554 12.692C4.8191 12.8384 4.8191 13.0759 4.96554 13.2223L9.13495 17.3917C9.28138 17.5382 9.51882 17.5382 9.66529 17.3917L19.0344 8.02258C19.1809 7.87614 19.1809 7.63871 19.0344 7.49224L18.1506 6.60836C18.0041 6.46193 17.7667 6.46193 17.6203 6.60836Z\"\n          fill=\"white\"\n        ></path>\n      </svg>\n    </div>\n    <div\n      class=\"gds-in-page-wizard-step-card__header__progress\"\n      data-testid=\"in-page-wizard-step-card-step-text\"\n    >\n      {{ stepText }}\n    </div>\n    <div\n      class=\"gds-in-page-wizard-step-card__header__title\"\n      data-testid=\"in-page-wizard-step-card-title\"\n    >\n      <h2 class=\"h4\">{{ title }}</h2>\n    </div>\n\n    <div\n      class=\"gds-in-page-wizard-step-card__header__edit\"\n      *ngIf=\"isCompleted && !isActive\"\n    >\n      <button\n        class=\"secondary small\"\n        (click)=\"handleOnEditBtnClick($event)\"\n        data-testid=\"in-page-wizard-step-card-edit-btn\"\n      >\n        <ng-template *ngTemplateOutlet=\"editIcon\"> </ng-template>\n        {{ editBtnText }}\n      </button>\n    </div>\n  </header>\n\n  <div\n    class=\"gds-in-page-wizard-step-card__content\"\n    *ngIf=\"!!isActive || !!isCompleted\"\n    data-testid=\"in-page-wizard-step-card-content\"\n  >\n    <ng-content></ng-content>\n  </div>\n  <footer\n    class=\"gds-in-page-wizard-step-card__footer gds-in-page-wizard-step-card__footer--edit\"\n    *ngIf=\"isCompleted && !isActive\"\n  >\n    <button\n      class=\"secondary\"\n      (click)=\"handleOnEditBtnClick($event)\"\n      data-testid=\"in-page-wizard-step-card-footer-edit-btn\"\n    >\n      <ng-template *ngTemplateOutlet=\"editIcon\"> </ng-template>\n      {{ editBtnText }}\n    </button>\n  </footer>\n\n  <footer\n    class=\"gds-in-page-wizard-step-card__footer gds-in-page-wizard-step-card__footer--next\"\n    *ngIf=\"isActive\"\n  >\n    <button\n      class=\"primary\"\n      [disabled]=\"disableNext\"\n      (click)=\"handleOnNextBtnClick($event)\"\n      data-testid=\"in-page-wizard-step-card-next-btn\"\n    >\n      {{ nextBtnText }}\n      <ng-container *ngIf=\"showNextBtnIcon\">\n        <ng-template *ngTemplateOutlet=\"nextIcon\"> </ng-template>\n      </ng-container>\n    </button>\n  </footer>\n</section>\n\n<ng-template #editIcon>\n  <svg\n    viewBox=\"0 0 576 512\"\n    class=\"edit-icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    focusable=\"false\"\n  >\n    <path\n      fill=\"var(--color)\"\n      d=\"M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z\"\n    ></path>\n  </svg>\n</ng-template>\n\n<ng-template #nextIcon>\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"1\"\n    class=\"next-icon\"\n    data-testid=\"in-page-wizard-step-card-next-icon\"\n  >\n    <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n    <path d=\"M12 5l0 14\" />\n    <path d=\"M18 13l-6 6\" />\n    <path d=\"M6 13l6 6\" />\n  </svg>\n</ng-template>\n" }]
         }], propDecorators: { handleNextClick: [{
                 type: Output
             }], handleEditClick: [{
@@ -1186,6 +1186,7 @@ class NggModalComponent {
     constructor(ref, configurableFocusTrapFactory) {
         this.ref = ref;
         this.configurableFocusTrapFactory = configurableFocusTrapFactory;
+        this.closeText = "Close Modal";
         this.disableBodyScroll = true;
         this.isOpenChange = new EventEmitter();
         this.closed = new EventEmitter();
@@ -1239,7 +1240,7 @@ class NggModalComponent {
         enableBodyScroll(this.ref.nativeElement);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggModalComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.ConfigurableFocusTrapFactory }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggModalComponent, selector: "ngg-modal", inputs: { modalType: "modalType", header: "header", confirmLabel: "confirmLabel", dismissLabel: "dismissLabel", size: "size", hideHeader: "hideHeader", hideFooter: "hideFooter", disableBodyScroll: "disableBodyScroll", trapFocus: "trapFocus", isOpen: "isOpen" }, outputs: { isOpenChange: "isOpenChange", closed: "closed", confirm: "confirm", dismiss: "dismiss" }, host: { properties: { "class.open": "this.open" } }, queries: [{ propertyName: "modalHeaderContent", first: true, predicate: NggModalHeaderDirective, descendants: true }, { propertyName: "modalFooterContent", first: true, predicate: NggModalFooterDirective, descendants: true }], viewQueries: [{ propertyName: "backdropRef", first: true, predicate: ["backdrop"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"isOpen\" [ngSwitch]=\"modalType\">\n  <div class=\"gds-dialog-wrapper\" [@modalAnimation]>\n    <aside\n      data-testid=\"modal\"\n      *ngSwitchCase=\"'slideout'\"\n      role=\"dialog\"\n      [attr.aria-modal]=\"trapFocus ? true : false\"\n      [attr.aria-describedby]=\"'modal-header-' + guid\"\n      [class.small]=\"size === 'sm'\"\n      [class.medium]=\"size === 'md'\"\n      [class.large]=\"size === 'lg'\"\n      [class.entered]=\"isOpen\"\n    >\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </aside>\n    <main\n      data-testid=\"modal\"\n      *ngSwitchCase=\"'takeover'\"\n      role=\"dialog\"\n      [attr.aria-modal]=\"trapFocus ? true : false\"\n      [attr.aria-describedby]=\"'modal-header-' + guid\"\n      [class.entered]=\"isOpen\"\n      [class.small]=\"size === 'sm'\"\n      [class.medium]=\"size === 'md'\"\n      [class.large]=\"size === 'lg'\"\n    >\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </main>\n    <section\n      data-testid=\"modal\"\n      *ngSwitchDefault\n      role=\"dialog\"\n      [attr.aria-modal]=\"trapFocus ? true : false\"\n      [attr.aria-describedby]=\"'modal-header-' + guid\"\n      [class.small]=\"size === 'sm'\"\n      [class.medium]=\"size === 'md'\"\n      [class.large]=\"size === 'lg'\"\n      [class.entered]=\"isOpen\"\n    >\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </section>\n    <ng-template #contentTemplate>\n      <ng-container *ngIf=\"!hideHeader\">\n        <header\n          *ngIf=\"!modalHeaderContent; else headerContentTemplate\"\n          ngg-modal-header\n          [attr.id]=\"'modal-header-' + guid\"\n          data-testid=\"modal-header\"\n          [header]=\"header\"\n          (closed)=\"this.handleCloseClick($event)\"\n        ></header>\n      </ng-container>\n      <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n        <ng-container *ngTemplateOutlet=\"bodyContentTemplate\"></ng-container>\n      </div>\n      <ng-container *ngIf=\"!hideFooter && (dismissLabel || confirmLabel)\">\n        <footer\n          *ngIf=\"!modalFooterContent; else footerContentTemplate\"\n          ngg-modal-footer\n          data-testid=\"modal-footer\"\n          [dismissLabel]=\"dismissLabel\"\n          [confirmLabel]=\"confirmLabel\"\n          (dismiss)=\"this.handleDismiss($event)\"\n          (confirm)=\"this.handleConfirm($event)\"\n        ></footer>\n      </ng-container>\n    </ng-template>\n    <ng-template #headerContentTemplate>\n      <header data-testid=\"modal-header\" [attr.id]=\"'modal-header-' + guid\">\n        <ng-content select=\"[nggModalHeader]\"></ng-content>\n      </header>\n    </ng-template>\n    <ng-template #bodyContentTemplate>\n      <ng-content></ng-content>\n    </ng-template>\n    <ng-template #footerContentTemplate>\n      <footer data-testid=\"modal-footer\">\n        <ng-content select=\"[nggModalFooter]\"></ng-content>\n      </footer>\n    </ng-template>\n    <div\n      #backdrop\n      data-testid=\"modal-backdrop\"\n      class=\"backdrop entered\"\n      (click)=\"this.handleBackdropClick($event)\"\n      [attr.aria-hidden]=\"true\"\n    ></div>\n  </div>\n</ng-container>\n", styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgSwitch), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgSwitchCase), selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgSwitchDefault), selector: "[ngSwitchDefault]" }, { kind: "component", type: i0.forwardRef(() => NggModalHeaderComponent), selector: "[ngg-modal-header]", inputs: ["header"], outputs: ["closed"] }, { kind: "component", type: i0.forwardRef(() => NggModalBodyComponent), selector: "[ngg-modal-body]" }, { kind: "component", type: i0.forwardRef(() => NggModalFooterComponent), selector: "[ngg-modal-footer]", inputs: ["dismissLabel", "confirmLabel"], outputs: ["dismiss", "confirm"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggModalComponent, selector: "ngg-modal", inputs: { modalType: "modalType", header: "header", closeText: "closeText", confirmLabel: "confirmLabel", dismissLabel: "dismissLabel", size: "size", hideHeader: "hideHeader", hideFooter: "hideFooter", disableBodyScroll: "disableBodyScroll", trapFocus: "trapFocus", isOpen: "isOpen" }, outputs: { isOpenChange: "isOpenChange", closed: "closed", confirm: "confirm", dismiss: "dismiss" }, host: { properties: { "class.open": "this.open" } }, queries: [{ propertyName: "modalHeaderContent", first: true, predicate: NggModalHeaderDirective, descendants: true }, { propertyName: "modalFooterContent", first: true, predicate: NggModalFooterDirective, descendants: true }], viewQueries: [{ propertyName: "backdropRef", first: true, predicate: ["backdrop"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"isOpen\" [ngSwitch]=\"modalType\">\n  <div class=\"gds-dialog-wrapper\" [@modalAnimation]>\n    <aside\n      data-testid=\"modal\"\n      *ngSwitchCase=\"'slideout'\"\n      role=\"dialog\"\n      [attr.aria-modal]=\"trapFocus ? true : false\"\n      [attr.aria-describedby]=\"'modal-header-' + guid\"\n      [class.small]=\"size === 'sm'\"\n      [class.medium]=\"size === 'md'\"\n      [class.large]=\"size === 'lg'\"\n      [class.entered]=\"isOpen\"\n    >\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </aside>\n    <main\n      data-testid=\"modal\"\n      *ngSwitchCase=\"'takeover'\"\n      role=\"dialog\"\n      [attr.aria-modal]=\"trapFocus ? true : false\"\n      [attr.aria-describedby]=\"'modal-header-' + guid\"\n      [class.entered]=\"isOpen\"\n      [class.small]=\"size === 'sm'\"\n      [class.medium]=\"size === 'md'\"\n      [class.large]=\"size === 'lg'\"\n    >\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </main>\n    <section\n      data-testid=\"modal\"\n      *ngSwitchDefault\n      role=\"dialog\"\n      [attr.aria-modal]=\"trapFocus ? true : false\"\n      [attr.aria-describedby]=\"'modal-header-' + guid\"\n      [class.small]=\"size === 'sm'\"\n      [class.medium]=\"size === 'md'\"\n      [class.large]=\"size === 'lg'\"\n      [class.entered]=\"isOpen\"\n    >\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </section>\n    <ng-template #contentTemplate>\n      <ng-container *ngIf=\"!hideHeader\">\n        <header\n          *ngIf=\"!modalHeaderContent; else headerContentTemplate\"\n          ngg-modal-header\n          [attr.id]=\"'modal-header-' + guid\"\n          data-testid=\"modal-header\"\n          [header]=\"header\"\n          [closeText]=\"closeText\"\n          (closed)=\"this.handleCloseClick($event)\"\n        ></header>\n      </ng-container>\n      <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n        <ng-container *ngTemplateOutlet=\"bodyContentTemplate\"></ng-container>\n      </div>\n      <ng-container *ngIf=\"!hideFooter && (dismissLabel || confirmLabel)\">\n        <footer\n          *ngIf=\"!modalFooterContent; else footerContentTemplate\"\n          ngg-modal-footer\n          data-testid=\"modal-footer\"\n          [dismissLabel]=\"dismissLabel\"\n          [confirmLabel]=\"confirmLabel\"\n          (dismiss)=\"this.handleDismiss($event)\"\n          (confirm)=\"this.handleConfirm($event)\"\n        ></footer>\n      </ng-container>\n    </ng-template>\n    <ng-template #headerContentTemplate>\n      <header data-testid=\"modal-header\" [attr.id]=\"'modal-header-' + guid\">\n        <ng-content select=\"[nggModalHeader]\"></ng-content>\n      </header>\n    </ng-template>\n    <ng-template #bodyContentTemplate>\n      <ng-content></ng-content>\n    </ng-template>\n    <ng-template #footerContentTemplate>\n      <footer data-testid=\"modal-footer\">\n        <ng-content select=\"[nggModalFooter]\"></ng-content>\n      </footer>\n    </ng-template>\n    <div\n      #backdrop\n      data-testid=\"modal-backdrop\"\n      class=\"backdrop entered\"\n      (click)=\"this.handleBackdropClick($event)\"\n      [attr.aria-hidden]=\"true\"\n    ></div>\n  </div>\n</ng-container>\n", styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgSwitch), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgSwitchCase), selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgSwitchDefault), selector: "[ngSwitchDefault]" }, { kind: "component", type: i0.forwardRef(() => NggModalHeaderComponent), selector: "[ngg-modal-header]", inputs: ["header", "closeText"], outputs: ["closed"] }, { kind: "component", type: i0.forwardRef(() => NggModalBodyComponent), selector: "[ngg-modal-body]" }, { kind: "component", type: i0.forwardRef(() => NggModalFooterComponent), selector: "[ngg-modal-footer]", inputs: ["dismissLabel", "confirmLabel"], outputs: ["dismiss", "confirm"] }], animations: [
             trigger('modalAnimation', [
                 transition(':enter', [
                     query('aside', style({ transform: 'translateX(100%)' }), {
@@ -1291,11 +1292,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                                 ]),
                             ]),
                         ]),
-                    ], template: "<ng-container *ngIf=\"isOpen\" [ngSwitch]=\"modalType\">\n  <div class=\"gds-dialog-wrapper\" [@modalAnimation]>\n    <aside\n      data-testid=\"modal\"\n      *ngSwitchCase=\"'slideout'\"\n      role=\"dialog\"\n      [attr.aria-modal]=\"trapFocus ? true : false\"\n      [attr.aria-describedby]=\"'modal-header-' + guid\"\n      [class.small]=\"size === 'sm'\"\n      [class.medium]=\"size === 'md'\"\n      [class.large]=\"size === 'lg'\"\n      [class.entered]=\"isOpen\"\n    >\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </aside>\n    <main\n      data-testid=\"modal\"\n      *ngSwitchCase=\"'takeover'\"\n      role=\"dialog\"\n      [attr.aria-modal]=\"trapFocus ? true : false\"\n      [attr.aria-describedby]=\"'modal-header-' + guid\"\n      [class.entered]=\"isOpen\"\n      [class.small]=\"size === 'sm'\"\n      [class.medium]=\"size === 'md'\"\n      [class.large]=\"size === 'lg'\"\n    >\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </main>\n    <section\n      data-testid=\"modal\"\n      *ngSwitchDefault\n      role=\"dialog\"\n      [attr.aria-modal]=\"trapFocus ? true : false\"\n      [attr.aria-describedby]=\"'modal-header-' + guid\"\n      [class.small]=\"size === 'sm'\"\n      [class.medium]=\"size === 'md'\"\n      [class.large]=\"size === 'lg'\"\n      [class.entered]=\"isOpen\"\n    >\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </section>\n    <ng-template #contentTemplate>\n      <ng-container *ngIf=\"!hideHeader\">\n        <header\n          *ngIf=\"!modalHeaderContent; else headerContentTemplate\"\n          ngg-modal-header\n          [attr.id]=\"'modal-header-' + guid\"\n          data-testid=\"modal-header\"\n          [header]=\"header\"\n          (closed)=\"this.handleCloseClick($event)\"\n        ></header>\n      </ng-container>\n      <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n        <ng-container *ngTemplateOutlet=\"bodyContentTemplate\"></ng-container>\n      </div>\n      <ng-container *ngIf=\"!hideFooter && (dismissLabel || confirmLabel)\">\n        <footer\n          *ngIf=\"!modalFooterContent; else footerContentTemplate\"\n          ngg-modal-footer\n          data-testid=\"modal-footer\"\n          [dismissLabel]=\"dismissLabel\"\n          [confirmLabel]=\"confirmLabel\"\n          (dismiss)=\"this.handleDismiss($event)\"\n          (confirm)=\"this.handleConfirm($event)\"\n        ></footer>\n      </ng-container>\n    </ng-template>\n    <ng-template #headerContentTemplate>\n      <header data-testid=\"modal-header\" [attr.id]=\"'modal-header-' + guid\">\n        <ng-content select=\"[nggModalHeader]\"></ng-content>\n      </header>\n    </ng-template>\n    <ng-template #bodyContentTemplate>\n      <ng-content></ng-content>\n    </ng-template>\n    <ng-template #footerContentTemplate>\n      <footer data-testid=\"modal-footer\">\n        <ng-content select=\"[nggModalFooter]\"></ng-content>\n      </footer>\n    </ng-template>\n    <div\n      #backdrop\n      data-testid=\"modal-backdrop\"\n      class=\"backdrop entered\"\n      (click)=\"this.handleBackdropClick($event)\"\n      [attr.aria-hidden]=\"true\"\n    ></div>\n  </div>\n</ng-container>\n", styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"] }]
+                    ], template: "<ng-container *ngIf=\"isOpen\" [ngSwitch]=\"modalType\">\n  <div class=\"gds-dialog-wrapper\" [@modalAnimation]>\n    <aside\n      data-testid=\"modal\"\n      *ngSwitchCase=\"'slideout'\"\n      role=\"dialog\"\n      [attr.aria-modal]=\"trapFocus ? true : false\"\n      [attr.aria-describedby]=\"'modal-header-' + guid\"\n      [class.small]=\"size === 'sm'\"\n      [class.medium]=\"size === 'md'\"\n      [class.large]=\"size === 'lg'\"\n      [class.entered]=\"isOpen\"\n    >\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </aside>\n    <main\n      data-testid=\"modal\"\n      *ngSwitchCase=\"'takeover'\"\n      role=\"dialog\"\n      [attr.aria-modal]=\"trapFocus ? true : false\"\n      [attr.aria-describedby]=\"'modal-header-' + guid\"\n      [class.entered]=\"isOpen\"\n      [class.small]=\"size === 'sm'\"\n      [class.medium]=\"size === 'md'\"\n      [class.large]=\"size === 'lg'\"\n    >\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </main>\n    <section\n      data-testid=\"modal\"\n      *ngSwitchDefault\n      role=\"dialog\"\n      [attr.aria-modal]=\"trapFocus ? true : false\"\n      [attr.aria-describedby]=\"'modal-header-' + guid\"\n      [class.small]=\"size === 'sm'\"\n      [class.medium]=\"size === 'md'\"\n      [class.large]=\"size === 'lg'\"\n      [class.entered]=\"isOpen\"\n    >\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </section>\n    <ng-template #contentTemplate>\n      <ng-container *ngIf=\"!hideHeader\">\n        <header\n          *ngIf=\"!modalHeaderContent; else headerContentTemplate\"\n          ngg-modal-header\n          [attr.id]=\"'modal-header-' + guid\"\n          data-testid=\"modal-header\"\n          [header]=\"header\"\n          [closeText]=\"closeText\"\n          (closed)=\"this.handleCloseClick($event)\"\n        ></header>\n      </ng-container>\n      <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n        <ng-container *ngTemplateOutlet=\"bodyContentTemplate\"></ng-container>\n      </div>\n      <ng-container *ngIf=\"!hideFooter && (dismissLabel || confirmLabel)\">\n        <footer\n          *ngIf=\"!modalFooterContent; else footerContentTemplate\"\n          ngg-modal-footer\n          data-testid=\"modal-footer\"\n          [dismissLabel]=\"dismissLabel\"\n          [confirmLabel]=\"confirmLabel\"\n          (dismiss)=\"this.handleDismiss($event)\"\n          (confirm)=\"this.handleConfirm($event)\"\n        ></footer>\n      </ng-container>\n    </ng-template>\n    <ng-template #headerContentTemplate>\n      <header data-testid=\"modal-header\" [attr.id]=\"'modal-header-' + guid\">\n        <ng-content select=\"[nggModalHeader]\"></ng-content>\n      </header>\n    </ng-template>\n    <ng-template #bodyContentTemplate>\n      <ng-content></ng-content>\n    </ng-template>\n    <ng-template #footerContentTemplate>\n      <footer data-testid=\"modal-footer\">\n        <ng-content select=\"[nggModalFooter]\"></ng-content>\n      </footer>\n    </ng-template>\n    <div\n      #backdrop\n      data-testid=\"modal-backdrop\"\n      class=\"backdrop entered\"\n      (click)=\"this.handleBackdropClick($event)\"\n      [attr.aria-hidden]=\"true\"\n    ></div>\n  </div>\n</ng-container>\n", styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$2.ConfigurableFocusTrapFactory }], propDecorators: { modalType: [{
                 type: Input
             }], header: [{
                 type: Input
+            }], closeText: [{
+                type: Input
             }], confirmLabel: [{
                 type: Input
             }], dismissLabel: [{
@@ -1341,14 +1344,14 @@ class NggModalHeaderComponent {
         this.closed.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggModalHeaderComponent, selector: "[ngg-modal-header]", inputs: { header: "header" }, outputs: { closed: "closed" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggModalHeaderComponent, selector: "[ngg-modal-header]", inputs: { header: "header", closeText: "closeText" }, outputs: { closed: "closed" }, ngImport: i0, template: `
     <h3 data-testid="modal-header-text">{{ header }}</h3>
     <button
       data-testid="modal-close-button"
       class="close"
+      [attr.aria-label]="closeText"
       (click)="this.handleClose($event)"
     >
-      <span className="sr-only">Close</span>
       <i></i>
     </button>
   `, isInline: true, styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"] }); }
@@ -1360,14 +1363,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
     <button
       data-testid="modal-close-button"
       class="close"
+      [attr.aria-label]="closeText"
       (click)="this.handleClose($event)"
     >
-      <span className="sr-only">Close</span>
       <i></i>
     </button>
   `, styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"] }]
         }], propDecorators: { header: [{
                 type: Input
+            }], closeText: [{
+                type: Input
             }], closed: [{
                 type: Output
             }] } });
@@ -2178,6 +2183,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }]
         }] });
 
+class NggCoreRenderer {
+    constructor(delegate) {
+        this.delegate = delegate;
+        this.destroyNode = (node) => this.delegate.destroyNode && this.delegate.destroyNode(node);
+    }
+    createElement(name, namespace) {
+        const scopedName = name.startsWith('gds-') ? getScopedTagName(name) : name;
+        return this.delegate.createElement(scopedName, namespace);
+    }
+    // Delegate all other methods to the original renderer
+    addClass(el, name) {
+        return this.delegate.addClass(el, name);
+    }
+    get data() {
+        return this.delegate.data;
+    }
+    destroy() {
+        return this.delegate.destroy();
+    }
+    createComment(value) {
+        return this.delegate.createComment(value);
+    }
+    createText(value) {
+        return this.delegate.createText(value);
+    }
+    appendChild(parent, newChild) {
+        return this.delegate.appendChild(parent, newChild);
+    }
+    insertBefore(parent, newChild, refChild, isMove) {
+        return this.delegate.insertBefore(parent, newChild, refChild, isMove);
+    }
+    removeChild(parent, oldChild, isHostElement) {
+        return this.delegate.removeChild(parent, oldChild, isHostElement);
+    }
+    selectRootElement(selectorOrNode, preserveContent) {
+        return this.delegate.selectRootElement(selectorOrNode, preserveContent);
+    }
+    parentNode(node) {
+        return this.delegate.parentNode(node);
+    }
+    nextSibling(node) {
+        return this.delegate.nextSibling(node);
+    }
+    setAttribute(el, name, value, namespace) {
+        return this.delegate.setAttribute(el, name, value, namespace);
+    }
+    removeAttribute(el, name, namespace) {
+        return this.delegate.removeAttribute(el, name, namespace);
+    }
+    removeClass(el, name) {
+        return this.delegate.removeClass(el, name);
+    }
+    setStyle(el, style, value, flags) {
+        return this.delegate.setStyle(el, style, value, flags);
+    }
+    removeStyle(el, style, flags) {
+        return this.delegate.removeStyle(el, style, flags);
+    }
+    setProperty(el, name, value) {
+        return this.delegate.setProperty(el, name, value);
+    }
+    setValue(node, value) {
+        return this.delegate.setValue(node, value);
+    }
+    listen(target, eventName, callback) {
+        return this.delegate.listen(target, eventName, callback);
+    }
+}
+class NggCoreRendererFactory {
+    constructor(delegate) {
+        this.delegate = delegate;
+    }
+    createRenderer(element, type) {
+        const renderer = this.delegate.createRenderer(element, type);
+        return new NggCoreRenderer(renderer);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggCoreRendererFactory, deps: [{ token: i1$1.ɵDomRendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggCoreRendererFactory }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggCoreRendererFactory, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i1$1.ɵDomRendererFactory2 }] });
+
 class NggCoreElementDirective {
     constructor() {
         this.viewRef = null;
@@ -2188,14 +2276,17 @@ class NggCoreElementDirective {
         this.template = inject((TemplateRef));
     }
     ngOnInit() {
-        this.vcr.clear();
-        const originalCreateElement = this.renderer.createElement;
-        this.renderer.createElement = (name, _namespace) => {
-            return this.document.createElement(getScopedTagName(name));
-        };
-        this.viewRef = this.vcr.createEmbeddedView(this.template);
-        this.renderer.createElement = originalCreateElement;
-        this.cdr.markForCheck();
+        if (!(this.renderer instanceof NggCoreRenderer)) {
+            this.vcr.clear();
+            const originalCreateElement = this.renderer.createElement;
+            this.renderer.createElement = (name, _namespace) => {
+                console.log('createElement', getScopedTagName(name));
+                return this.document.createElement(getScopedTagName(name));
+            };
+            this.cdr.markForCheck();
+            this.viewRef = this.vcr.createEmbeddedView(this.template);
+            this.renderer.createElement = originalCreateElement;
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggCoreElementDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: NggCoreElementDirective, selector: "[nggCoreElement]", ngImport: i0 }); }
@@ -2221,9 +2312,93 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }]
         }] });
 
+class NggCoreControlDirective {
+    constructor(el, renderer, injector, cdr) {
+        this.el = el;
+        this.renderer = renderer;
+        this.injector = injector;
+        this.cdr = cdr;
+    }
+    ngAfterViewInit() {
+        this.control = this.injector.get(NgControl);
+        this.control.statusChanges?.subscribe(() => {
+            this.updateControlState();
+        });
+        this.control.valueChanges?.subscribe(() => {
+            this.updateControlState();
+        });
+        // Update on submit
+        const form = this.el.nativeElement.form;
+        if (form) {
+            form.addEventListener('submit', () => {
+                this.control?.control?.markAsTouched();
+                this.updateControlState();
+            });
+        }
+        this.updateControlState();
+    }
+    updateControlState() {
+        const control = this.control?.control;
+        if (control) {
+            this.renderer.setProperty(this.el.nativeElement, 'invalid', control.touched && control.invalid);
+        }
+    }
+    // ControlValueAccessor implementation
+    writeValue(value) {
+        this.renderer.setProperty(this.el.nativeElement, 'value', value);
+    }
+    registerOnChange(fn) {
+        this.el.nativeElement.addEventListener('input', (event) => {
+            fn(event.target.value);
+            this.cdr.markForCheck();
+        });
+    }
+    registerOnTouched(fn) {
+        this.el.nativeElement.addEventListener('blur', fn);
+    }
+    setDisabledState(isDisabled) {
+        this.renderer.setProperty(this.el.nativeElement, 'disabled', isDisabled);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggCoreControlDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: NggCoreControlDirective, selector: "gds-input, gds-textarea, gds-dropdown, gds-datepicker, [nggCoreControl]", providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => NggCoreControlDirective),
+                multi: true,
+            },
+        ], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggCoreControlDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'gds-input, gds-textarea, gds-dropdown, gds-datepicker, [nggCoreControl]',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => NggCoreControlDirective),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }] });
+
+class NggCoreFormsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggCoreFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: NggCoreFormsModule, declarations: [NggCoreControlDirective], imports: [CommonModule, ReactiveFormsModule], exports: [NggCoreControlDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggCoreFormsModule, imports: [CommonModule, ReactiveFormsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggCoreFormsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NggCoreControlDirective],
+                    imports: [CommonModule, ReactiveFormsModule],
+                    exports: [NggCoreControlDirective],
+                }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NggAccordionComponent, NggAccordionListItemComponent, NggAccordionModule, NggBadgeComponent, NggBadgeModule, NggButtonComponent, NggButtonModule, NggCellTableComponent, NggCellTableModule, NggContextMenuComponent, NggContextMenuModule, NggCoreElementDirective, NggCoreWrapperModule, NggDatepickerComponent, NggDatepickerModule, NggDropdownButtonDirective, NggDropdownComponent, NggDropdownModule, NggDropdownOptionDirective, NggInPageWizardModule, NggInPageWizardStepCardComponent, NggModalBodyComponent, NggModalComponent, NggModalFooterComponent, NggModalFooterDirective, NggModalHeaderComponent, NggModalHeaderDirective, NggModalModule, NggModule, NggOnScrollDirective, NggPaginationComponent, NggPaginationModule, NggProgressCircleComponent, NggProgressCircleModule, NggSegmentedControlComponent, NggSegmentedControlModule, NggSharedModule, NggSliderComponent, NggSliderModule, NggSortableListComponent, NggSortableListModule, ON_SCROLL_TOKEN, dateValidator };
+export { NggAccordionComponent, NggAccordionListItemComponent, NggAccordionModule, NggBadgeComponent, NggBadgeModule, NggButtonComponent, NggButtonModule, NggCellTableComponent, NggCellTableModule, NggContextMenuComponent, NggContextMenuModule, NggCoreControlDirective, NggCoreElementDirective, NggCoreFormsModule, NggCoreRenderer, NggCoreRendererFactory, NggCoreWrapperModule, NggDatepickerComponent, NggDatepickerModule, NggDropdownButtonDirective, NggDropdownComponent, NggDropdownModule, NggDropdownOptionDirective, NggInPageWizardModule, NggInPageWizardStepCardComponent, NggModalBodyComponent, NggModalComponent, NggModalFooterComponent, NggModalFooterDirective, NggModalHeaderComponent, NggModalHeaderDirective, NggModalModule, NggModule, NggOnScrollDirective, NggPaginationComponent, NggPaginationModule, NggProgressCircleComponent, NggProgressCircleModule, NggSegmentedControlComponent, NggSegmentedControlModule, NggSharedModule, NggSliderComponent, NggSliderModule, NggSortableListComponent, NggSortableListModule, ON_SCROLL_TOKEN, dateValidator };
 //# sourceMappingURL=sebgroup-green-angular.mjs.map