npm - @sebgroup/green-angular - Versions diffs - 10.0.0 → 10.0.2 - Mend

@sebgroup/green-angular 10.0.0 → 10.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/fesm2022/sebgroup-green-angular-v-angular.mjs CHANGED Viewed

@@ -30,7 +30,6 @@ import '@sebgroup/green-core/components/icon/icons/cross-small.js';
 import '@sebgroup/green-core/components/icon/icons/checkmark.js';
 import * as i2$2 from '@sebgroup/green-angular/src/v-angular/core';
 import { DropdownUtils as DropdownUtils$1 } from '@sebgroup/green-angular/src/v-angular/core';
-import scrollIntoView from 'scroll-into-view-if-needed';
 import * as i3$1 from '@sebgroup/green-angular/src/v-angular/tooltip';
 import { NggvTooltipModule as NggvTooltipModule$1 } from '@sebgroup/green-angular/src/v-angular/tooltip';
 import * as i2$3 from '@sebgroup/green-angular/src/v-angular/input';
@@ -3768,14 +3767,14 @@ class NggvDropdownListComponent {
     scrollToResult(option, focusElement) {
         if (!this.optionRefs || !option)
             return;
-        const optionRef = this.optionRefs.find((li) => li.nativeElement.id === this.id + '-option-' + (option.id ?? option.key));
+        const optionRef = this.optionRefs.find((li) => li.nativeElement.id ===
+            this.id + '-option-' + (option.id ?? option.key));
         const offset = this.scrollOffset;
         if (optionRef) {
             let delta = window.scrollY || document.documentElement.scrollTop;
             // The list seems not to be visible at the time of scrolling, but this setTimeout "hack" makes it work...
             setTimeout(() => {
-                scrollIntoView(optionRef.nativeElement, {
-                    scrollMode: 'if-needed',
+                optionRef.nativeElement.scrollIntoView({
                     block: 'nearest',
                 });
                 delta -= window.scrollY || document.documentElement.scrollTop;
@@ -5080,11 +5079,11 @@ class NggvInputComponent extends NggvBaseControlValueAccessorComponent$1 {
         this.inputChange$.next(this.state);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: NggvInputComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: NggvInputComponent, isStandalone: false, selector: "nggv-input", inputs: { size: "size", thook: "thook", type: "type", placeholder: "placeholder", autocomplete: "autocomplete", readonly: "readonly", email: "email", min: "min", max: "max", step: "step", minLength: "minLength", minlength: "minlength", maxLength: "maxLength", maxlength: "maxlength", showCharacterCountdown: "showCharacterCountdown", pattern: "pattern", debounceTime: "debounceTime", inputMask: "inputMask" }, outputs: { nggvInput: "nggvInput" }, host: { properties: { "class": "this.size", "attr.data-thook": "this.thook" } }, usesInheritance: true, ngImport: i0, template: "<!-- LABEL -->\n<label\n  [id]=\"id + '-label'\"\n  class=\"gds-field-label hide-if-empty\"\n  [attr.for]=\"id + '-input'\"\n  *transloco=\"let t; read: scope\"\n>\n  <ng-template\n    *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n  ></ng-template>\n  <ng-template #basicLabelContentTpl>\n    <!-- to trigger css:empty if no label was added -->\n    <ng-container *ngIf=\"label\">\n      {{ label }}\n      <span\n        *ngIf=\"optional === true || (required !== true && optional !== false)\"\n        class=\"gds-field-label--optional\"\n      >\n        ({{ t('label.optional') }})\n      </span>\n    </ng-container>\n  </ng-template>\n</label>\n\n<!-- DESCRIPTION -->\n<div\n  class=\"gds-form-info description hide-if-empty\"\n  *ngIf=\"description && descriptionIsVisible\"\n>\n  {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container *ngIf=\"locked\">\n  <ng-template\n    *ngTemplateOutlet=\"\n      lockedTpl || defaultLockedTpl;\n      context: { $implicit: state }\n    \"\n  ></ng-template>\n  <ng-template #defaultLockedTpl>\n    <div\n      [id]=\"id + '-input'\"\n      class=\"nggv-field--locked\"\n      [attr.name]=\"name\"\n      [attr.value]=\"state\"\n      [attr.role]=\"role\"\n    >\n      <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n      <ng-container *ngIf=\"state\">\n        <ng-container *ngIf=\"!inputMask\">\n          {{ state }}\n        </ng-container>\n        <ng-container *ngIf=\"!!inputMask\">\n          {{ state | nggvInputMaskFormat: inputMask }}\n        </ng-container>\n      </ng-container>\n    </div>\n  </ng-template>\n</ng-container>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n  <div class=\"gds-input-wrapper\" [class.nggv-field--error]=\"invalid\">\n    <div class=\"input-group-prefix hide-if-empty\">\n      <ng-content select=\"[slot='prefix']\"></ng-content>\n    </div>\n\n    <!-- INPUT FIELD -->\n    <div class=\"input-group\" *ngIf=\"!inputMask\">\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"gds-field\"\n        [attr.type]=\"type\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required || null\"\n        [attr.email]=\"email\"\n        [attr.aria-describedby]=\"id + '-message'\"\n        [min]=\"min\"\n        [max]=\"max\"\n        [step]=\"step\"\n        [attr.maxlength]=\"maxlength\"\n        [attr.minlength]=\"minlength\"\n        [pattern]=\"pattern\"\n        title=\"\"\n        [disabled]=\"disabled\"\n        [autocomplete]=\"autocomplete\"\n        [autofocus]=\"autofocus\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [value]=\"state\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n    </div>\n\n    <!-- INPUT FIELD WITH MASK -->\n    <div\n      class=\"input-group\"\n      *ngIf=\"!!inputMask && (hideInput$ | async) === false\"\n    >\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"gds-field\"\n        autocomplete=\"off\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required || null\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [attr.aria-describedby]=\"id + '-message'\"\n        [nggvInputMask]=\"inputMask\"\n        title=\"\"\n        [formControl]=\"control\"\n      />\n    </div>\n\n    <div class=\"input-group-suffix hide-if-empty\">\n      <ng-content select=\"[slot='suffix']\"></ng-content>\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  <!-- ERRORS -->\n  <div\n    class=\"gds-form-item__footer error-wrapper\"\n    *transloco=\"let t; read: scope\"\n  >\n    <span\n      class=\"gds-form-info gds-form-info--error\"\n      [attr.for]=\"id + '-input'\"\n      *ngIf=\"invalid && (error || ngControl?.invalid)\"\n    >\n      <span class=\"error-icon\">\n        <gds-icon-triangle-exclamation\n          width=\"16\"\n          height=\"16\"\n          solid=\"true\"\n          *nggCoreElement\n        ></gds-icon-triangle-exclamation>\n      </span>\n\n      <span\n        *ngIf=\"error; else errorsRef\"\n        [attr.data-thook]=\"thook + '-errorlabel'\"\n        >{{ error }}</span\n      >\n      <ng-template #errorsRef>\n        <span\n          *ngIf=\"firstError as error\"\n          [attr.data-thook]=\"thook + '-errorlabel'\"\n        >\n          {{ t('error.field' + error?.code, error?.params) }}\n        </span>\n      </ng-template>\n    </span>\n\n    <ng-container *ngIf=\"!inputMask && hasMaxLength && showCharacterCountdown\">\n      <span\n        *nggvCharacterCountdown=\"\n          maxlength;\n          currentLength: (inputRef?.nativeElement?.value ?? '').length;\n          charactersLeft as charactersLeft\n        \"\n        class=\"gds-form-info gds-form-info--countdown\"\n        style=\"text-align: right\"\n      >\n        {{ charactersLeft }} {{ t('label.maxlength') }}\n      </span>\n    </ng-container>\n  </div>\n</ng-container>\n", styles: [":host{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2)}:host *{box-sizing:border-box}:host .gds-form-item__footer .gds-form-info{font-weight:500}:host .gds-form-item__footer .gds-form-info.form-info--countdown{font-weight:400}:host .gds-form-item__footer .gds-form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .gds-form-item__footer .gds-form-info--error .error-icon{align-items:center}:host .gds-form-item__footer .gds-form-info--error .error-icon .error-icon{align-items:center}:host .gds-form-item__footer .gds-form-info--error>.gds-form-info--countdown{font-weight:400}:host .hide-if-empty:empty{display:none}:host input{padding:.75rem 1rem;border-radius:.25rem;border:solid 1px var(--gds-sys-color-base-600);--border-color: var(--gds-sys-color-base-600)}:host input:focus:not(:focus-visible){box-shadow:none;outline:0}:host input:focus,:host input:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host input{background-color:var(--gds-sys-color-background-primary);color:var(--gds-sys-color-text-primary);min-height:2.75rem;display:flex;align-items:center;justify-content:center}:host input.small{min-height:2rem;padding:.25rem .75rem;line-height:1rem}@media screen and (-ms-high-contrast:active){:host input{border:2px solid currentcolor}}:host input:disabled,:host input.disabled,:host input[aria-disabled=true]{background:var(--gds-sys-color-base-300)!important;color:var(--gds-sys-color-text-disabled)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host input:disabled::placeholder,:host input.disabled::placeholder,:host input[aria-disabled=true]::placeholder{color:var(--gds-sys-color-text-disabled)}:host input:hover{background-color:var(--gds-sys-color-base-100)}:host input[type=number]{appearance:textfield}:host input[type=number]::-webkit-outer-spin-button,:host input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host input{width:100%;line-height:18px;font-size:1rem;font-family:inherit}:host .gds-input-wrapper{position:relative}:host .gds-input-wrapper:before{background:transparent;border-radius:0 0 4px 4px;clip-path:inset(4px 0 0 0);content:\"\";display:block;height:4px;position:absolute;transition:.3s ease-in-out;width:100%}:host .gds-input-wrapper:before{bottom:0}.is-invalid :host .gds-input-wrapper{color:#9f000a;opacity:1}.is-invalid :host .gds-input-wrapper:before{background:#9f000a;clip-path:inset(1px 0 0 0)}:host .gds-input-wrapper.nggv-field--error{border-bottom:.125rem solid #9f000a!important;height:100%}:host .gds-input-wrapper{border:1px solid #868686;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit}:host .gds-input-wrapper *,:host .gds-input-wrapper *:before,:host .gds-input-wrapper *:after{box-sizing:border-box}:host .gds-input-wrapper{display:flex;flex-direction:row}:host .gds-input-wrapper .input-group-prefix{min-height:2.5rem;border:none;border-radius:3px;height:2.625rem;min-width:2.625rem;border-top-right-radius:0!important;border-bottom-right-radius:0!important;display:flex;align-items:center;justify-content:center}:host .gds-input-wrapper .input-group-prefix[disabled]{background-color:#f8f8f8!important;color:#adadad}@media(max-width:35.98em){:host .gds-input-wrapper .input-group-prefix{min-width:initial}}:host .gds-input-wrapper .input-group-prefix:empty{display:none}:host .gds-input-wrapper .input-group-suffix{min-height:2.5rem;border:none;border-radius:3px;height:2.625rem;min-width:2.625rem;border-top-left-radius:0!important;border-bottom-left-radius:0!important;display:flex;align-items:center;justify-content:center}:host .gds-input-wrapper .input-group-suffix[disabled]{background-color:#f8f8f8!important;color:#adadad}@media(max-width:35.98em){:host .gds-input-wrapper .input-group-suffix{min-width:initial}}:host .gds-input-wrapper .input-group-suffix:empty{display:none}:host .gds-input-wrapper .input-group{width:100%}:host .gds-input-wrapper .input-group input{outline:none;min-height:2.5rem;height:2.625rem;line-height:1.5;font-size:1rem;font-family:inherit}:host .gds-input-wrapper .input-group input *,:host .gds-input-wrapper .input-group input *:before,:host .gds-input-wrapper .input-group input *:after{box-sizing:border-box}:host .gds-input-wrapper .input-group input:hover{border-color:#41b0ee}:host .gds-input-wrapper .input-group input:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .gds-input-wrapper .input-group input:active{border-color:#cecece}:host .gds-input-wrapper .input-group input[disabled]{background-color:#f8f8f8;border-color:#cecece}:host .gds-input-wrapper .input-group input[disabled]::placeholder{color:#cecece}:host .gds-input-wrapper .input-group input{border:none;min-height:2.375rem;width:100%}:host .gds-input-wrapper .input-group input:not(:focus){border-right:none;padding-right:0}:host .gds-input-wrapper .input-group input:focus{padding-right:0}:host .gds-input-wrapper:has(.input-group-prefix:not(:empty)) .input-group input{border-bottom-left-radius:0;border-top-left-radius:0}:host .gds-input-wrapper:has(.input-group-suffix:not(:empty)) .input-group input{border-bottom-right-radius:0;border-top-right-radius:0}:host.small label:not(.form-control){line-height:1rem;font-size:.875rem}:host.small label+.form-info{margin-bottom:.25rem}:host.small label+.gds-input-wrapper{margin-top:.25rem}:host.small .gds-input-wrapper{min-height:2rem}:host.small .gds-input-wrapper .input-group input{padding:.38rem .5rem;line-height:1rem;height:1.875rem;min-height:1.75rem;font-size:.875rem}:host.small .gds-input-wrapper .input-group-suffix,:host.small .gds-input-wrapper .input-group-prefix{height:1.875rem;min-height:1.75rem;min-width:initial}:host.small .gds-form-item__footer:not(:empty){margin-top:.25rem}:host label:is(label),:host .label:is(label),:host legend:is(label){margin-bottom:0}:host label.gds-form-control,:host .label.gds-form-control,:host legend.gds-form-control{width:fit-content}@supports (-moz-appearance: none){:host label.gds-form-control:focus:not(:focus-visible),:host .label.gds-form-control:focus:not(:focus-visible),:host legend.gds-form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host label.gds-form-control:focus,:host label.gds-form-control:focus-within,:host .label.gds-form-control:focus,:host .label.gds-form-control:focus-within,:host legend.gds-form-control:focus,:host legend.gds-form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host label:not(.gds-form-control),:host .label:not(.gds-form-control),:host legend:not(.gds-form-control){font-weight:500;width:100%;line-height:1.25rem}:host label+input,:host label+textarea,fieldset :host label+div,:host label+.gds-button,:host label+.gds-group-stepper,:host label+.gds-stepper-wrapper,:host label+.gds-group,:host .label+input,:host .label+textarea,fieldset :host .label+div,:host .label+.gds-button,:host .label+.gds-group-stepper,:host .label+.gds-stepper-wrapper,:host .label+.gds-group,:host legend+input,:host legend+textarea,fieldset :host legend+div,:host legend+.gds-button,:host legend+.gds-group-stepper,:host legend+.gds-stepper-wrapper,:host legend+.gds-group{margin-top:.5rem}:host label+.gds-form-info,:host .label+.gds-form-info,:host legend+.gds-form-info{margin-bottom:.5rem}:host label+.gds-input-wrapper,:host label+.nggv-field--locked{margin-top:.5rem}:host .gds-field-label--optional{font-weight:400}:host .gds-form-info{font-size:.875rem;line-height:1.25rem;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i4$1.NggvInputMaskDirective, selector: "[nggvInputMask]", inputs: ["nggvInputMask"] }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.CharacterCountdownDirective, selector: "[nggvCharacterCountdown]", inputs: ["nggvCharacterCountdown", "nggvCharacterCountdownCurrentLength"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.InputMaskFormatPipe, name: "nggvInputMaskFormat" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: NggvInputComponent, isStandalone: false, selector: "nggv-input", inputs: { size: "size", thook: "thook", type: "type", placeholder: "placeholder", autocomplete: "autocomplete", readonly: "readonly", email: "email", min: "min", max: "max", step: "step", minLength: "minLength", minlength: "minlength", maxLength: "maxLength", maxlength: "maxlength", showCharacterCountdown: "showCharacterCountdown", pattern: "pattern", debounceTime: "debounceTime", inputMask: "inputMask" }, outputs: { nggvInput: "nggvInput" }, host: { properties: { "class": "this.size", "attr.data-thook": "this.thook" } }, usesInheritance: true, ngImport: i0, template: "<!-- LABEL -->\n<label\n  [id]=\"id + '-label'\"\n  class=\"gds-field-label hide-if-empty\"\n  [attr.for]=\"id + '-input'\"\n  *transloco=\"let t; read: scope\"\n>\n  <ng-template\n    *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n  ></ng-template>\n  <ng-template #basicLabelContentTpl>\n    <!-- to trigger css:empty if no label was added -->\n    <ng-container *ngIf=\"label\">\n      {{ label }}\n      <span\n        *ngIf=\"optional === true || (required !== true && optional !== false)\"\n        class=\"gds-field-label--optional\"\n      >\n        ({{ t('label.optional') }})\n      </span>\n    </ng-container>\n  </ng-template>\n</label>\n\n<!-- DESCRIPTION -->\n<div\n  class=\"gds-form-info description hide-if-empty\"\n  *ngIf=\"description && descriptionIsVisible\"\n>\n  {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container *ngIf=\"locked\">\n  <ng-template\n    *ngTemplateOutlet=\"\n      lockedTpl || defaultLockedTpl;\n      context: { $implicit: state }\n    \"\n  ></ng-template>\n  <ng-template #defaultLockedTpl>\n    <div\n      [id]=\"id + '-input'\"\n      class=\"nggv-field--locked\"\n      [attr.name]=\"name\"\n      [attr.value]=\"state\"\n      [attr.role]=\"role\"\n    >\n      <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n      <ng-container *ngIf=\"state\">\n        <ng-container *ngIf=\"!inputMask\">\n          {{ state }}\n        </ng-container>\n        <ng-container *ngIf=\"!!inputMask\">\n          {{ state | nggvInputMaskFormat: inputMask }}\n        </ng-container>\n      </ng-container>\n    </div>\n  </ng-template>\n</ng-container>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n  <div class=\"gds-input-wrapper\" [class.nggv-field--error]=\"invalid\">\n    <div class=\"input-group-prefix hide-if-empty\">\n      <ng-content select=\"[slot='prefix']\"></ng-content>\n    </div>\n\n    <!-- INPUT FIELD -->\n    <div class=\"input-group\" *ngIf=\"!inputMask\">\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"gds-field\"\n        [attr.type]=\"type\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required || null\"\n        [attr.email]=\"email\"\n        [attr.aria-describedby]=\"id + '-message'\"\n        [min]=\"min\"\n        [max]=\"max\"\n        [step]=\"step\"\n        [attr.maxlength]=\"maxlength\"\n        [attr.minlength]=\"minlength\"\n        [pattern]=\"pattern\"\n        title=\"\"\n        [disabled]=\"disabled\"\n        [autocomplete]=\"autocomplete\"\n        [autofocus]=\"autofocus\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [value]=\"state\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n    </div>\n\n    <!-- INPUT FIELD WITH MASK -->\n    <div\n      class=\"input-group\"\n      *ngIf=\"!!inputMask && (hideInput$ | async) === false\"\n    >\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"gds-field\"\n        autocomplete=\"off\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required || null\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [attr.aria-describedby]=\"id + '-message'\"\n        [nggvInputMask]=\"inputMask\"\n        title=\"\"\n        [formControl]=\"control\"\n      />\n    </div>\n\n    <div class=\"input-group-suffix hide-if-empty\">\n      <ng-content select=\"[slot='suffix']\"></ng-content>\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  <!-- ERRORS -->\n  <div\n    class=\"gds-form-item__footer error-wrapper\"\n    *transloco=\"let t; read: scope\"\n  >\n    <span\n      class=\"gds-form-info gds-form-info--error\"\n      [attr.for]=\"id + '-input'\"\n      *ngIf=\"invalid && (error || ngControl?.invalid)\"\n    >\n      <span class=\"error-icon\">\n        <gds-icon-triangle-exclamation\n          width=\"16\"\n          height=\"16\"\n          solid=\"true\"\n          *nggCoreElement\n        ></gds-icon-triangle-exclamation>\n      </span>\n\n      <span\n        *ngIf=\"error; else errorsRef\"\n        [attr.data-thook]=\"thook + '-errorlabel'\"\n        >{{ error }}</span\n      >\n      <ng-template #errorsRef>\n        <span\n          *ngIf=\"firstError as error\"\n          [attr.data-thook]=\"thook + '-errorlabel'\"\n        >\n          {{ t('error.field' + error?.code, error?.params) }}\n        </span>\n      </ng-template>\n    </span>\n\n    <ng-container *ngIf=\"!inputMask && hasMaxLength && showCharacterCountdown\">\n      <span\n        *nggvCharacterCountdown=\"\n          maxlength;\n          currentLength: (inputRef?.nativeElement?.value ?? '').length;\n          charactersLeft as charactersLeft\n        \"\n        class=\"gds-form-info gds-form-info--countdown\"\n        style=\"text-align: right\"\n      >\n        {{ charactersLeft }} {{ t('label.maxlength') }}\n      </span>\n    </ng-container>\n  </div>\n</ng-container>\n", styles: [":host{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2)}:host *{box-sizing:border-box}:host .gds-form-item__footer{display:flex;margin-top:8px}:host .gds-form-item__footer .gds-form-info{font-weight:500}:host .gds-form-item__footer .gds-form-info.form-info--countdown{font-weight:400}:host .gds-form-item__footer .gds-form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .gds-form-item__footer .gds-form-info--error .error-icon{align-items:center}:host .gds-form-item__footer .gds-form-info--error .error-icon .error-icon{align-items:center}:host .gds-form-item__footer .gds-form-info--error>.gds-form-info--countdown{font-weight:400}:host .hide-if-empty:empty{display:none}:host input{padding:.75rem 1rem;border-radius:.25rem;border:solid 1px var(--gds-sys-color-base-600);--border-color: var(--gds-sys-color-base-600)}:host input:focus:not(:focus-visible){box-shadow:none;outline:0}:host input:focus,:host input:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host input{background-color:var(--gds-sys-color-background-primary);color:var(--gds-sys-color-text-primary);min-height:2.75rem;display:flex;align-items:center;justify-content:center}:host input.small{min-height:2rem;padding:.25rem .75rem;line-height:1rem}@media screen and (-ms-high-contrast:active){:host input{border:2px solid currentcolor}}:host input:disabled,:host input.disabled,:host input[aria-disabled=true]{background:var(--gds-sys-color-base-300)!important;color:var(--gds-sys-color-text-disabled)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host input:disabled::placeholder,:host input.disabled::placeholder,:host input[aria-disabled=true]::placeholder{color:var(--gds-sys-color-text-disabled)}:host input:hover{background-color:var(--gds-sys-color-base-100)}:host input[type=number]{appearance:textfield}:host input[type=number]::-webkit-outer-spin-button,:host input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host input{width:100%;line-height:18px;font-size:1rem;font-family:inherit}:host .gds-input-wrapper{position:relative}:host .gds-input-wrapper:before{background:transparent;border-radius:0 0 4px 4px;clip-path:inset(4px 0 0 0);content:\"\";display:block;height:4px;position:absolute;transition:.3s ease-in-out;width:100%}:host .gds-input-wrapper:before{bottom:0}.is-invalid :host .gds-input-wrapper{color:#9f000a;opacity:1}.is-invalid :host .gds-input-wrapper:before{background:#9f000a;clip-path:inset(1px 0 0 0)}:host .gds-input-wrapper.nggv-field--error{border-bottom:.125rem solid #9f000a!important}:host .gds-input-wrapper{border:1px solid #868686;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit}:host .gds-input-wrapper *,:host .gds-input-wrapper *:before,:host .gds-input-wrapper *:after{box-sizing:border-box}:host .gds-input-wrapper{display:flex;flex-direction:row}:host .gds-input-wrapper .input-group-prefix{min-height:2.5rem;border:none;border-radius:3px;height:2.625rem;min-width:2.625rem;border-top-right-radius:0!important;border-bottom-right-radius:0!important;display:flex;align-items:center;justify-content:center}:host .gds-input-wrapper .input-group-prefix[disabled]{background-color:#f8f8f8!important;color:#adadad}@media(max-width:35.98em){:host .gds-input-wrapper .input-group-prefix{min-width:initial}}:host .gds-input-wrapper .input-group-prefix:empty{display:none}:host .gds-input-wrapper .input-group-suffix{min-height:2.5rem;border:none;border-radius:3px;height:2.625rem;min-width:2.625rem;border-top-left-radius:0!important;border-bottom-left-radius:0!important;display:flex;align-items:center;justify-content:center}:host .gds-input-wrapper .input-group-suffix[disabled]{background-color:#f8f8f8!important;color:#adadad}@media(max-width:35.98em){:host .gds-input-wrapper .input-group-suffix{min-width:initial}}:host .gds-input-wrapper .input-group-suffix:empty{display:none}:host .gds-input-wrapper .input-group{width:100%}:host .gds-input-wrapper .input-group input{outline:none;min-height:2.5rem;height:2.625rem;line-height:1.5;font-size:1rem;font-family:inherit}:host .gds-input-wrapper .input-group input *,:host .gds-input-wrapper .input-group input *:before,:host .gds-input-wrapper .input-group input *:after{box-sizing:border-box}:host .gds-input-wrapper .input-group input:hover{border-color:#41b0ee}:host .gds-input-wrapper .input-group input:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .gds-input-wrapper .input-group input:active{border-color:#cecece}:host .gds-input-wrapper .input-group input[disabled]{background-color:#f8f8f8;border-color:#cecece}:host .gds-input-wrapper .input-group input[disabled]::placeholder{color:#cecece}:host .gds-input-wrapper .input-group input{border:none;min-height:2.375rem;width:100%}:host .gds-input-wrapper .input-group input:not(:focus){border-right:none;padding-right:0}:host .gds-input-wrapper .input-group input:focus{padding-right:0}:host .gds-input-wrapper:has(.input-group-prefix:not(:empty)) .input-group input{border-bottom-left-radius:0;border-top-left-radius:0}:host .gds-input-wrapper:has(.input-group-suffix:not(:empty)) .input-group input{border-bottom-right-radius:0;border-top-right-radius:0}:host.small label:not(.form-control){line-height:1rem;font-size:.875rem}:host.small label+.form-info{margin-bottom:.25rem}:host.small label+.gds-input-wrapper{margin-top:.25rem}:host.small .gds-input-wrapper{min-height:2rem}:host.small .gds-input-wrapper .input-group input{padding:.38rem .5rem;line-height:1rem;height:1.875rem;min-height:1.75rem;font-size:.875rem}:host.small .gds-input-wrapper .input-group-suffix,:host.small .gds-input-wrapper .input-group-prefix{height:1.875rem;min-height:1.75rem;min-width:initial}:host.small .gds-form-item__footer:not(:empty){margin-top:.25rem}:host label:is(label),:host .label:is(label),:host legend:is(label){margin-bottom:0}:host label.gds-form-control,:host .label.gds-form-control,:host legend.gds-form-control{width:fit-content}@supports (-moz-appearance: none){:host label.gds-form-control:focus:not(:focus-visible),:host .label.gds-form-control:focus:not(:focus-visible),:host legend.gds-form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host label.gds-form-control:focus,:host label.gds-form-control:focus-within,:host .label.gds-form-control:focus,:host .label.gds-form-control:focus-within,:host legend.gds-form-control:focus,:host legend.gds-form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host label:not(.gds-form-control),:host .label:not(.gds-form-control),:host legend:not(.gds-form-control){font-weight:500;width:100%;line-height:1.25rem}:host label+input,:host label+textarea,fieldset :host label+div,:host label+.gds-button,:host label+.gds-group-stepper,:host label+.gds-stepper-wrapper,:host label+.gds-group,:host .label+input,:host .label+textarea,fieldset :host .label+div,:host .label+.gds-button,:host .label+.gds-group-stepper,:host .label+.gds-stepper-wrapper,:host .label+.gds-group,:host legend+input,:host legend+textarea,fieldset :host legend+div,:host legend+.gds-button,:host legend+.gds-group-stepper,:host legend+.gds-stepper-wrapper,:host legend+.gds-group{margin-top:.5rem}:host label+.gds-form-info,:host .label+.gds-form-info,:host legend+.gds-form-info{margin-bottom:.5rem}:host label+.gds-input-wrapper,:host label+.nggv-field--locked{margin-top:.5rem}:host .gds-field-label--optional{font-weight:400}:host .gds-form-info{font-size:.875rem;line-height:1.25rem;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i4$1.NggvInputMaskDirective, selector: "[nggvInputMask]", inputs: ["nggvInputMask"] }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.CharacterCountdownDirective, selector: "[nggvCharacterCountdown]", inputs: ["nggvCharacterCountdown", "nggvCharacterCountdownCurrentLength"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.InputMaskFormatPipe, name: "nggvInputMaskFormat" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: NggvInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nggv-input', standalone: false, template: "<!-- LABEL -->\n<label\n  [id]=\"id + '-label'\"\n  class=\"gds-field-label hide-if-empty\"\n  [attr.for]=\"id + '-input'\"\n  *transloco=\"let t; read: scope\"\n>\n  <ng-template\n    *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n  ></ng-template>\n  <ng-template #basicLabelContentTpl>\n    <!-- to trigger css:empty if no label was added -->\n    <ng-container *ngIf=\"label\">\n      {{ label }}\n      <span\n        *ngIf=\"optional === true || (required !== true && optional !== false)\"\n        class=\"gds-field-label--optional\"\n      >\n        ({{ t('label.optional') }})\n      </span>\n    </ng-container>\n  </ng-template>\n</label>\n\n<!-- DESCRIPTION -->\n<div\n  class=\"gds-form-info description hide-if-empty\"\n  *ngIf=\"description && descriptionIsVisible\"\n>\n  {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container *ngIf=\"locked\">\n  <ng-template\n    *ngTemplateOutlet=\"\n      lockedTpl || defaultLockedTpl;\n      context: { $implicit: state }\n    \"\n  ></ng-template>\n  <ng-template #defaultLockedTpl>\n    <div\n      [id]=\"id + '-input'\"\n      class=\"nggv-field--locked\"\n      [attr.name]=\"name\"\n      [attr.value]=\"state\"\n      [attr.role]=\"role\"\n    >\n      <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n      <ng-container *ngIf=\"state\">\n        <ng-container *ngIf=\"!inputMask\">\n          {{ state }}\n        </ng-container>\n        <ng-container *ngIf=\"!!inputMask\">\n          {{ state | nggvInputMaskFormat: inputMask }}\n        </ng-container>\n      </ng-container>\n    </div>\n  </ng-template>\n</ng-container>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n  <div class=\"gds-input-wrapper\" [class.nggv-field--error]=\"invalid\">\n    <div class=\"input-group-prefix hide-if-empty\">\n      <ng-content select=\"[slot='prefix']\"></ng-content>\n    </div>\n\n    <!-- INPUT FIELD -->\n    <div class=\"input-group\" *ngIf=\"!inputMask\">\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"gds-field\"\n        [attr.type]=\"type\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required || null\"\n        [attr.email]=\"email\"\n        [attr.aria-describedby]=\"id + '-message'\"\n        [min]=\"min\"\n        [max]=\"max\"\n        [step]=\"step\"\n        [attr.maxlength]=\"maxlength\"\n        [attr.minlength]=\"minlength\"\n        [pattern]=\"pattern\"\n        title=\"\"\n        [disabled]=\"disabled\"\n        [autocomplete]=\"autocomplete\"\n        [autofocus]=\"autofocus\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [value]=\"state\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n    </div>\n\n    <!-- INPUT FIELD WITH MASK -->\n    <div\n      class=\"input-group\"\n      *ngIf=\"!!inputMask && (hideInput$ | async) === false\"\n    >\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"gds-field\"\n        autocomplete=\"off\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required || null\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [attr.aria-describedby]=\"id + '-message'\"\n        [nggvInputMask]=\"inputMask\"\n        title=\"\"\n        [formControl]=\"control\"\n      />\n    </div>\n\n    <div class=\"input-group-suffix hide-if-empty\">\n      <ng-content select=\"[slot='suffix']\"></ng-content>\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  <!-- ERRORS -->\n  <div\n    class=\"gds-form-item__footer error-wrapper\"\n    *transloco=\"let t; read: scope\"\n  >\n    <span\n      class=\"gds-form-info gds-form-info--error\"\n      [attr.for]=\"id + '-input'\"\n      *ngIf=\"invalid && (error || ngControl?.invalid)\"\n    >\n      <span class=\"error-icon\">\n        <gds-icon-triangle-exclamation\n          width=\"16\"\n          height=\"16\"\n          solid=\"true\"\n          *nggCoreElement\n        ></gds-icon-triangle-exclamation>\n      </span>\n\n      <span\n        *ngIf=\"error; else errorsRef\"\n        [attr.data-thook]=\"thook + '-errorlabel'\"\n        >{{ error }}</span\n      >\n      <ng-template #errorsRef>\n        <span\n          *ngIf=\"firstError as error\"\n          [attr.data-thook]=\"thook + '-errorlabel'\"\n        >\n          {{ t('error.field' + error?.code, error?.params) }}\n        </span>\n      </ng-template>\n    </span>\n\n    <ng-container *ngIf=\"!inputMask && hasMaxLength && showCharacterCountdown\">\n      <span\n        *nggvCharacterCountdown=\"\n          maxlength;\n          currentLength: (inputRef?.nativeElement?.value ?? '').length;\n          charactersLeft as charactersLeft\n        \"\n        class=\"gds-form-info gds-form-info--countdown\"\n        style=\"text-align: right\"\n      >\n        {{ charactersLeft }} {{ t('label.maxlength') }}\n      </span>\n    </ng-container>\n  </div>\n</ng-container>\n", styles: [":host{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2)}:host *{box-sizing:border-box}:host .gds-form-item__footer .gds-form-info{font-weight:500}:host .gds-form-item__footer .gds-form-info.form-info--countdown{font-weight:400}:host .gds-form-item__footer .gds-form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .gds-form-item__footer .gds-form-info--error .error-icon{align-items:center}:host .gds-form-item__footer .gds-form-info--error .error-icon .error-icon{align-items:center}:host .gds-form-item__footer .gds-form-info--error>.gds-form-info--countdown{font-weight:400}:host .hide-if-empty:empty{display:none}:host input{padding:.75rem 1rem;border-radius:.25rem;border:solid 1px var(--gds-sys-color-base-600);--border-color: var(--gds-sys-color-base-600)}:host input:focus:not(:focus-visible){box-shadow:none;outline:0}:host input:focus,:host input:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host input{background-color:var(--gds-sys-color-background-primary);color:var(--gds-sys-color-text-primary);min-height:2.75rem;display:flex;align-items:center;justify-content:center}:host input.small{min-height:2rem;padding:.25rem .75rem;line-height:1rem}@media screen and (-ms-high-contrast:active){:host input{border:2px solid currentcolor}}:host input:disabled,:host input.disabled,:host input[aria-disabled=true]{background:var(--gds-sys-color-base-300)!important;color:var(--gds-sys-color-text-disabled)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host input:disabled::placeholder,:host input.disabled::placeholder,:host input[aria-disabled=true]::placeholder{color:var(--gds-sys-color-text-disabled)}:host input:hover{background-color:var(--gds-sys-color-base-100)}:host input[type=number]{appearance:textfield}:host input[type=number]::-webkit-outer-spin-button,:host input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host input{width:100%;line-height:18px;font-size:1rem;font-family:inherit}:host .gds-input-wrapper{position:relative}:host .gds-input-wrapper:before{background:transparent;border-radius:0 0 4px 4px;clip-path:inset(4px 0 0 0);content:\"\";display:block;height:4px;position:absolute;transition:.3s ease-in-out;width:100%}:host .gds-input-wrapper:before{bottom:0}.is-invalid :host .gds-input-wrapper{color:#9f000a;opacity:1}.is-invalid :host .gds-input-wrapper:before{background:#9f000a;clip-path:inset(1px 0 0 0)}:host .gds-input-wrapper.nggv-field--error{border-bottom:.125rem solid #9f000a!important;height:100%}:host .gds-input-wrapper{border:1px solid #868686;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit}:host .gds-input-wrapper *,:host .gds-input-wrapper *:before,:host .gds-input-wrapper *:after{box-sizing:border-box}:host .gds-input-wrapper{display:flex;flex-direction:row}:host .gds-input-wrapper .input-group-prefix{min-height:2.5rem;border:none;border-radius:3px;height:2.625rem;min-width:2.625rem;border-top-right-radius:0!important;border-bottom-right-radius:0!important;display:flex;align-items:center;justify-content:center}:host .gds-input-wrapper .input-group-prefix[disabled]{background-color:#f8f8f8!important;color:#adadad}@media(max-width:35.98em){:host .gds-input-wrapper .input-group-prefix{min-width:initial}}:host .gds-input-wrapper .input-group-prefix:empty{display:none}:host .gds-input-wrapper .input-group-suffix{min-height:2.5rem;border:none;border-radius:3px;height:2.625rem;min-width:2.625rem;border-top-left-radius:0!important;border-bottom-left-radius:0!important;display:flex;align-items:center;justify-content:center}:host .gds-input-wrapper .input-group-suffix[disabled]{background-color:#f8f8f8!important;color:#adadad}@media(max-width:35.98em){:host .gds-input-wrapper .input-group-suffix{min-width:initial}}:host .gds-input-wrapper .input-group-suffix:empty{display:none}:host .gds-input-wrapper .input-group{width:100%}:host .gds-input-wrapper .input-group input{outline:none;min-height:2.5rem;height:2.625rem;line-height:1.5;font-size:1rem;font-family:inherit}:host .gds-input-wrapper .input-group input *,:host .gds-input-wrapper .input-group input *:before,:host .gds-input-wrapper .input-group input *:after{box-sizing:border-box}:host .gds-input-wrapper .input-group input:hover{border-color:#41b0ee}:host .gds-input-wrapper .input-group input:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .gds-input-wrapper .input-group input:active{border-color:#cecece}:host .gds-input-wrapper .input-group input[disabled]{background-color:#f8f8f8;border-color:#cecece}:host .gds-input-wrapper .input-group input[disabled]::placeholder{color:#cecece}:host .gds-input-wrapper .input-group input{border:none;min-height:2.375rem;width:100%}:host .gds-input-wrapper .input-group input:not(:focus){border-right:none;padding-right:0}:host .gds-input-wrapper .input-group input:focus{padding-right:0}:host .gds-input-wrapper:has(.input-group-prefix:not(:empty)) .input-group input{border-bottom-left-radius:0;border-top-left-radius:0}:host .gds-input-wrapper:has(.input-group-suffix:not(:empty)) .input-group input{border-bottom-right-radius:0;border-top-right-radius:0}:host.small label:not(.form-control){line-height:1rem;font-size:.875rem}:host.small label+.form-info{margin-bottom:.25rem}:host.small label+.gds-input-wrapper{margin-top:.25rem}:host.small .gds-input-wrapper{min-height:2rem}:host.small .gds-input-wrapper .input-group input{padding:.38rem .5rem;line-height:1rem;height:1.875rem;min-height:1.75rem;font-size:.875rem}:host.small .gds-input-wrapper .input-group-suffix,:host.small .gds-input-wrapper .input-group-prefix{height:1.875rem;min-height:1.75rem;min-width:initial}:host.small .gds-form-item__footer:not(:empty){margin-top:.25rem}:host label:is(label),:host .label:is(label),:host legend:is(label){margin-bottom:0}:host label.gds-form-control,:host .label.gds-form-control,:host legend.gds-form-control{width:fit-content}@supports (-moz-appearance: none){:host label.gds-form-control:focus:not(:focus-visible),:host .label.gds-form-control:focus:not(:focus-visible),:host legend.gds-form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host label.gds-form-control:focus,:host label.gds-form-control:focus-within,:host .label.gds-form-control:focus,:host .label.gds-form-control:focus-within,:host legend.gds-form-control:focus,:host legend.gds-form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host label:not(.gds-form-control),:host .label:not(.gds-form-control),:host legend:not(.gds-form-control){font-weight:500;width:100%;line-height:1.25rem}:host label+input,:host label+textarea,fieldset :host label+div,:host label+.gds-button,:host label+.gds-group-stepper,:host label+.gds-stepper-wrapper,:host label+.gds-group,:host .label+input,:host .label+textarea,fieldset :host .label+div,:host .label+.gds-button,:host .label+.gds-group-stepper,:host .label+.gds-stepper-wrapper,:host .label+.gds-group,:host legend+input,:host legend+textarea,fieldset :host legend+div,:host legend+.gds-button,:host legend+.gds-group-stepper,:host legend+.gds-stepper-wrapper,:host legend+.gds-group{margin-top:.5rem}:host label+.gds-form-info,:host .label+.gds-form-info,:host legend+.gds-form-info{margin-bottom:.5rem}:host label+.gds-input-wrapper,:host label+.nggv-field--locked{margin-top:.5rem}:host .gds-field-label--optional{font-weight:400}:host .gds-form-info{font-size:.875rem;line-height:1.25rem;width:100%}\n"] }]
+            args: [{ selector: 'nggv-input', standalone: false, template: "<!-- LABEL -->\n<label\n  [id]=\"id + '-label'\"\n  class=\"gds-field-label hide-if-empty\"\n  [attr.for]=\"id + '-input'\"\n  *transloco=\"let t; read: scope\"\n>\n  <ng-template\n    *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n  ></ng-template>\n  <ng-template #basicLabelContentTpl>\n    <!-- to trigger css:empty if no label was added -->\n    <ng-container *ngIf=\"label\">\n      {{ label }}\n      <span\n        *ngIf=\"optional === true || (required !== true && optional !== false)\"\n        class=\"gds-field-label--optional\"\n      >\n        ({{ t('label.optional') }})\n      </span>\n    </ng-container>\n  </ng-template>\n</label>\n\n<!-- DESCRIPTION -->\n<div\n  class=\"gds-form-info description hide-if-empty\"\n  *ngIf=\"description && descriptionIsVisible\"\n>\n  {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container *ngIf=\"locked\">\n  <ng-template\n    *ngTemplateOutlet=\"\n      lockedTpl || defaultLockedTpl;\n      context: { $implicit: state }\n    \"\n  ></ng-template>\n  <ng-template #defaultLockedTpl>\n    <div\n      [id]=\"id + '-input'\"\n      class=\"nggv-field--locked\"\n      [attr.name]=\"name\"\n      [attr.value]=\"state\"\n      [attr.role]=\"role\"\n    >\n      <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n      <ng-container *ngIf=\"state\">\n        <ng-container *ngIf=\"!inputMask\">\n          {{ state }}\n        </ng-container>\n        <ng-container *ngIf=\"!!inputMask\">\n          {{ state | nggvInputMaskFormat: inputMask }}\n        </ng-container>\n      </ng-container>\n    </div>\n  </ng-template>\n</ng-container>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n  <div class=\"gds-input-wrapper\" [class.nggv-field--error]=\"invalid\">\n    <div class=\"input-group-prefix hide-if-empty\">\n      <ng-content select=\"[slot='prefix']\"></ng-content>\n    </div>\n\n    <!-- INPUT FIELD -->\n    <div class=\"input-group\" *ngIf=\"!inputMask\">\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"gds-field\"\n        [attr.type]=\"type\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required || null\"\n        [attr.email]=\"email\"\n        [attr.aria-describedby]=\"id + '-message'\"\n        [min]=\"min\"\n        [max]=\"max\"\n        [step]=\"step\"\n        [attr.maxlength]=\"maxlength\"\n        [attr.minlength]=\"minlength\"\n        [pattern]=\"pattern\"\n        title=\"\"\n        [disabled]=\"disabled\"\n        [autocomplete]=\"autocomplete\"\n        [autofocus]=\"autofocus\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [value]=\"state\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n    </div>\n\n    <!-- INPUT FIELD WITH MASK -->\n    <div\n      class=\"input-group\"\n      *ngIf=\"!!inputMask && (hideInput$ | async) === false\"\n    >\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"gds-field\"\n        autocomplete=\"off\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required || null\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [attr.aria-describedby]=\"id + '-message'\"\n        [nggvInputMask]=\"inputMask\"\n        title=\"\"\n        [formControl]=\"control\"\n      />\n    </div>\n\n    <div class=\"input-group-suffix hide-if-empty\">\n      <ng-content select=\"[slot='suffix']\"></ng-content>\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  <!-- ERRORS -->\n  <div\n    class=\"gds-form-item__footer error-wrapper\"\n    *transloco=\"let t; read: scope\"\n  >\n    <span\n      class=\"gds-form-info gds-form-info--error\"\n      [attr.for]=\"id + '-input'\"\n      *ngIf=\"invalid && (error || ngControl?.invalid)\"\n    >\n      <span class=\"error-icon\">\n        <gds-icon-triangle-exclamation\n          width=\"16\"\n          height=\"16\"\n          solid=\"true\"\n          *nggCoreElement\n        ></gds-icon-triangle-exclamation>\n      </span>\n\n      <span\n        *ngIf=\"error; else errorsRef\"\n        [attr.data-thook]=\"thook + '-errorlabel'\"\n        >{{ error }}</span\n      >\n      <ng-template #errorsRef>\n        <span\n          *ngIf=\"firstError as error\"\n          [attr.data-thook]=\"thook + '-errorlabel'\"\n        >\n          {{ t('error.field' + error?.code, error?.params) }}\n        </span>\n      </ng-template>\n    </span>\n\n    <ng-container *ngIf=\"!inputMask && hasMaxLength && showCharacterCountdown\">\n      <span\n        *nggvCharacterCountdown=\"\n          maxlength;\n          currentLength: (inputRef?.nativeElement?.value ?? '').length;\n          charactersLeft as charactersLeft\n        \"\n        class=\"gds-form-info gds-form-info--countdown\"\n        style=\"text-align: right\"\n      >\n        {{ charactersLeft }} {{ t('label.maxlength') }}\n      </span>\n    </ng-container>\n  </div>\n</ng-container>\n", styles: [":host{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2)}:host *{box-sizing:border-box}:host .gds-form-item__footer{display:flex;margin-top:8px}:host .gds-form-item__footer .gds-form-info{font-weight:500}:host .gds-form-item__footer .gds-form-info.form-info--countdown{font-weight:400}:host .gds-form-item__footer .gds-form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .gds-form-item__footer .gds-form-info--error .error-icon{align-items:center}:host .gds-form-item__footer .gds-form-info--error .error-icon .error-icon{align-items:center}:host .gds-form-item__footer .gds-form-info--error>.gds-form-info--countdown{font-weight:400}:host .hide-if-empty:empty{display:none}:host input{padding:.75rem 1rem;border-radius:.25rem;border:solid 1px var(--gds-sys-color-base-600);--border-color: var(--gds-sys-color-base-600)}:host input:focus:not(:focus-visible){box-shadow:none;outline:0}:host input:focus,:host input:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host input{background-color:var(--gds-sys-color-background-primary);color:var(--gds-sys-color-text-primary);min-height:2.75rem;display:flex;align-items:center;justify-content:center}:host input.small{min-height:2rem;padding:.25rem .75rem;line-height:1rem}@media screen and (-ms-high-contrast:active){:host input{border:2px solid currentcolor}}:host input:disabled,:host input.disabled,:host input[aria-disabled=true]{background:var(--gds-sys-color-base-300)!important;color:var(--gds-sys-color-text-disabled)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host input:disabled::placeholder,:host input.disabled::placeholder,:host input[aria-disabled=true]::placeholder{color:var(--gds-sys-color-text-disabled)}:host input:hover{background-color:var(--gds-sys-color-base-100)}:host input[type=number]{appearance:textfield}:host input[type=number]::-webkit-outer-spin-button,:host input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host input{width:100%;line-height:18px;font-size:1rem;font-family:inherit}:host .gds-input-wrapper{position:relative}:host .gds-input-wrapper:before{background:transparent;border-radius:0 0 4px 4px;clip-path:inset(4px 0 0 0);content:\"\";display:block;height:4px;position:absolute;transition:.3s ease-in-out;width:100%}:host .gds-input-wrapper:before{bottom:0}.is-invalid :host .gds-input-wrapper{color:#9f000a;opacity:1}.is-invalid :host .gds-input-wrapper:before{background:#9f000a;clip-path:inset(1px 0 0 0)}:host .gds-input-wrapper.nggv-field--error{border-bottom:.125rem solid #9f000a!important}:host .gds-input-wrapper{border:1px solid #868686;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit}:host .gds-input-wrapper *,:host .gds-input-wrapper *:before,:host .gds-input-wrapper *:after{box-sizing:border-box}:host .gds-input-wrapper{display:flex;flex-direction:row}:host .gds-input-wrapper .input-group-prefix{min-height:2.5rem;border:none;border-radius:3px;height:2.625rem;min-width:2.625rem;border-top-right-radius:0!important;border-bottom-right-radius:0!important;display:flex;align-items:center;justify-content:center}:host .gds-input-wrapper .input-group-prefix[disabled]{background-color:#f8f8f8!important;color:#adadad}@media(max-width:35.98em){:host .gds-input-wrapper .input-group-prefix{min-width:initial}}:host .gds-input-wrapper .input-group-prefix:empty{display:none}:host .gds-input-wrapper .input-group-suffix{min-height:2.5rem;border:none;border-radius:3px;height:2.625rem;min-width:2.625rem;border-top-left-radius:0!important;border-bottom-left-radius:0!important;display:flex;align-items:center;justify-content:center}:host .gds-input-wrapper .input-group-suffix[disabled]{background-color:#f8f8f8!important;color:#adadad}@media(max-width:35.98em){:host .gds-input-wrapper .input-group-suffix{min-width:initial}}:host .gds-input-wrapper .input-group-suffix:empty{display:none}:host .gds-input-wrapper .input-group{width:100%}:host .gds-input-wrapper .input-group input{outline:none;min-height:2.5rem;height:2.625rem;line-height:1.5;font-size:1rem;font-family:inherit}:host .gds-input-wrapper .input-group input *,:host .gds-input-wrapper .input-group input *:before,:host .gds-input-wrapper .input-group input *:after{box-sizing:border-box}:host .gds-input-wrapper .input-group input:hover{border-color:#41b0ee}:host .gds-input-wrapper .input-group input:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .gds-input-wrapper .input-group input:active{border-color:#cecece}:host .gds-input-wrapper .input-group input[disabled]{background-color:#f8f8f8;border-color:#cecece}:host .gds-input-wrapper .input-group input[disabled]::placeholder{color:#cecece}:host .gds-input-wrapper .input-group input{border:none;min-height:2.375rem;width:100%}:host .gds-input-wrapper .input-group input:not(:focus){border-right:none;padding-right:0}:host .gds-input-wrapper .input-group input:focus{padding-right:0}:host .gds-input-wrapper:has(.input-group-prefix:not(:empty)) .input-group input{border-bottom-left-radius:0;border-top-left-radius:0}:host .gds-input-wrapper:has(.input-group-suffix:not(:empty)) .input-group input{border-bottom-right-radius:0;border-top-right-radius:0}:host.small label:not(.form-control){line-height:1rem;font-size:.875rem}:host.small label+.form-info{margin-bottom:.25rem}:host.small label+.gds-input-wrapper{margin-top:.25rem}:host.small .gds-input-wrapper{min-height:2rem}:host.small .gds-input-wrapper .input-group input{padding:.38rem .5rem;line-height:1rem;height:1.875rem;min-height:1.75rem;font-size:.875rem}:host.small .gds-input-wrapper .input-group-suffix,:host.small .gds-input-wrapper .input-group-prefix{height:1.875rem;min-height:1.75rem;min-width:initial}:host.small .gds-form-item__footer:not(:empty){margin-top:.25rem}:host label:is(label),:host .label:is(label),:host legend:is(label){margin-bottom:0}:host label.gds-form-control,:host .label.gds-form-control,:host legend.gds-form-control{width:fit-content}@supports (-moz-appearance: none){:host label.gds-form-control:focus:not(:focus-visible),:host .label.gds-form-control:focus:not(:focus-visible),:host legend.gds-form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host label.gds-form-control:focus,:host label.gds-form-control:focus-within,:host .label.gds-form-control:focus,:host .label.gds-form-control:focus-within,:host legend.gds-form-control:focus,:host legend.gds-form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host label:not(.gds-form-control),:host .label:not(.gds-form-control),:host legend:not(.gds-form-control){font-weight:500;width:100%;line-height:1.25rem}:host label+input,:host label+textarea,fieldset :host label+div,:host label+.gds-button,:host label+.gds-group-stepper,:host label+.gds-stepper-wrapper,:host label+.gds-group,:host .label+input,:host .label+textarea,fieldset :host .label+div,:host .label+.gds-button,:host .label+.gds-group-stepper,:host .label+.gds-stepper-wrapper,:host .label+.gds-group,:host legend+input,:host legend+textarea,fieldset :host legend+div,:host legend+.gds-button,:host legend+.gds-group-stepper,:host legend+.gds-stepper-wrapper,:host legend+.gds-group{margin-top:.5rem}:host label+.gds-form-info,:host .label+.gds-form-info,:host legend+.gds-form-info{margin-bottom:.5rem}:host label+.gds-input-wrapper,:host label+.nggv-field--locked{margin-top:.5rem}:host .gds-field-label--optional{font-weight:400}:host .gds-form-info{font-size:.875rem;line-height:1.25rem;width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -5995,7 +5994,7 @@ class NggvSlideOutComponent {
         this.renderer.removeStyle(document.body, 'overflow');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: NggvSlideOutComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: NggvSlideOutComponent, isStandalone: false, selector: "nggv-slideout-modal", inputs: { side: "side", shown: "shown", initiallyShown: "initiallyShown", heading: "heading", title: "title", content: "content", closable: "closable", closableOutside: "closableOutside", autoWidth: "autoWidth", thook: "thook", closeButtonAriaLabel: "closeButtonAriaLabel", buttons: "buttons" }, outputs: { nggvCloseEvent: "nggvCloseEvent", nggvPositiveEvent: "nggvPositiveEvent", nggvNeutralEvent: "nggvNeutralEvent", nggvNegativeEvent: "nggvNegativeEvent" }, host: { listeners: { "click": "close($event,\"host\")", "document:keydown.escape": "close($event)", "keydown": "focusTrap($event)" } }, viewQueries: [{ propertyName: "slideOutRef", first: true, predicate: ["slideOut"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"shown\">\n  <div\n    [ngClass]=\"{\n      'gds-slide-out--left': fromLeft,\n      'gds-slide-out--right': !fromLeft,\n    }\"\n    *transloco=\"let t\"\n    [class.-active]=\"shown\"\n    [attr.data-thook]=\"thook\"\n    [attr.aria-hidden]=\"!shown\"\n    [@modalAnimation]\n  >\n    <div\n      #slideOut\n      class=\"gds-slide-out\"\n      [class.auto-width]=\"autoWidth\"\n      [class.entered]=\"shown\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"gds-modal-title\"\n      aria-describedby=\"gds-modal-body\"\n    >\n      <header class=\"gds-slide-out__header\">\n        <h3 id=\"gds-modal-title\">\n          {{ heading || title || '' }}\n        </h3>\n        <button\n          data-testid=\"modal-close-button\"\n          class=\"nggv-modal-slideout__close\"\n          (click)=\"close($event, 'action')\"\n          [attr.aria-label]=\"closeButtonAriaLabel\"\n        >\n          <i></i>\n        </button>\n      </header>\n\n      <section id=\"modal-body\">\n        <div class=\"gds-slide-out__content hide-if-empty\">\n          <div *ngIf=\"content\" [innerHtml]=\"content\"></div>\n          <ng-content></ng-content>\n        </div>\n        <ng-content select=\"[slot='outside-content']\"></ng-content>\n      </section>\n\n      <footer class=\"modal-dialog__actions\">\n        <button\n          class=\"danger\"\n          type=\"reset\"\n          [attr.data-thook]=\"'dialog-' + (_buttons?.negative || 'negative')\"\n          (click)=\"onAction($event, 'negative')\"\n          (keydown.enter)=\"onAction($event, 'negative')\"\n          *ngIf=\"_buttons && _buttons.negative\"\n        >\n          {{ t(_buttons.negative) }}\n        </button>\n\n        <button\n          class=\"secondary\"\n          type=\"button\"\n          [attr.data-thook]=\"'dialog-' + (_buttons?.neutral || 'neutral')\"\n          (click)=\"onAction($event, 'neutral')\"\n          (keydown.enter)=\"onAction($event, 'neutral')\"\n          *ngIf=\"_buttons && _buttons.neutral\"\n        >\n          {{ t(_buttons.neutral) }}\n        </button>\n\n        <button\n          class=\"primary\"\n          type=\"submit\"\n          [attr.data-thook]=\"'dialog-' + (_buttons?.positive || 'positive')\"\n          (click)=\"onAction($event, 'positive')\"\n          (keydown.enter)=\"onAction($event, 'positive')\"\n          *ngIf=\"_buttons && _buttons.positive\"\n        >\n          {{ t(_buttons.positive) }}\n        </button>\n      </footer>\n    </div>\n\n    <div\n      class=\"nggv-backdrop\"\n      data-thook=\"slideout-backdrop\"\n      (click)=\"close()\"\n    ></div>\n  </div>\n</ng-container>\n", styles: [":host{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2);--gds-z-index-deep: -9999;--gds-z-index-dropdown-backdrop: 990;--gds-z-index-datepicker: 995;--gds-z-index-dropdown: 995;--gds-z-index-sticky: 1020;--gds-z-index-fixed: 1030;--gds-z-index-modal-backdrop: 1040;--gds-z-index-modal: 1050;--gds-z-index-popover: 1060;--gds-z-index-tooltip: 1070;--gds-z-index-top: 9999;--gds-sys-shape-corner-none: 0;--gds-sys-shape-corner-small: .125rem;--gds-sys-shape-corner-medium: .25rem;--gds-sys-shape-corner-round: 50%}:host .gds-slide-out{background:var(--gds-sys-color-background-primary);display:flex;flex-direction:column;box-shadow:var(--gds-sys-color-background-primary);position:absolute;width:100%;z-index:var(--gds-z-index-modal)}:host .gds-slide-out>.header,:host .gds-slide-out>header{padding:1rem;border-bottom:solid 1px var(--gds-sys-color-base-600);--border-color: var(--gds-sys-color-base-600);display:inline-flex;justify-content:space-between;align-items:center;width:100%}:host .gds-slide-out>.header h3,:host .gds-slide-out>.header .h3,:host .gds-slide-out>header h3,:host .gds-slide-out>header .h3{margin-bottom:0;margin-top:0}:host .gds-slide-out>.header h3+.close,:host .gds-slide-out>.header .h3+.close,:host .gds-slide-out>header h3+.close,:host .gds-slide-out>header .h3+.close{margin:-7px;min-width:2rem}:host .gds-slide-out>.body{padding:1rem;overflow:auto;width:100%}:host .gds-slide-out>.body p{margin-bottom:0;margin-top:0}:host .gds-slide-out>.footer,:host .gds-slide-out>footer{padding:1rem;width:100%}@media(min-width:36em){:host .gds-slide-out>.footer,:host .gds-slide-out>footer{display:flex;justify-content:flex-end}}@media(max-width:35.98em){:host .gds-slide-out>.footer button+button,:host .gds-slide-out>.footer button+.button,:host .gds-slide-out>.footer .button+button,:host .gds-slide-out>.footer .button+.button,:host .gds-slide-out>footer button+button,:host .gds-slide-out>footer button+.button,:host .gds-slide-out>footer .button+button,:host .gds-slide-out>footer .button+.button{margin-top:.75rem}}@media(min-width:36em){:host .gds-slide-out>.footer button+button,:host .gds-slide-out>.footer button+.button,:host .gds-slide-out>.footer .button+button,:host .gds-slide-out>.footer .button+.button,:host .gds-slide-out>footer button+button,:host .gds-slide-out>footer button+.button,:host .gds-slide-out>footer .button+button,:host .gds-slide-out>footer .button+.button{margin-left:.75rem}}:host .gds-slide-out{position:fixed;height:100dvh;max-width:512px;min-height:-webkit-fill-available;min-height:stretch;right:0;top:0;transition:transform .35s cubic-bezier(.33,1,.68,1);transform:translate(100%)}:host .gds-slide-out.is-entering,:host .gds-slide-out.entered{transform:translate(0)}:host .gds-slide-out.is-exiting{transform:translate(100%)}:host .gds-slide-out.large{max-width:720px}:host .gds-slide-out>.body{flex:1 0}:host .gds-slide-out.left{left:0}:host .gds-slide-out.gds-slide-out--768{max-width:48rem}:host .gds-slide-out.gds-slide-out--960{max-width:60rem}:host .gds-slide-out.gds-slide-out--768 header,:host .gds-slide-out.gds-slide-out--960 header{padding:1.5rem 2rem 1rem}:host .gds-slide-out.gds-slide-out--768 .body,:host .gds-slide-out.gds-slide-out--960 .body{padding:2rem 2rem 1rem}:host .gds-slide-out.gds-slide-out--768 footer,:host .gds-slide-out.gds-slide-out--960 footer{padding:1rem 2rem 2rem}:host .gds-slide-out{z-index:1050;overflow-y:auto}:host .gds-slide-out.auto-width{width:auto;max-width:initial}:host .hide-if-empty:empty{display:none}:host .nggv-backdrop{background:#00000080;inset:0;position:fixed;z-index:var(--gds-z-index-modal-backdrop);display:block;transition:opacity .5s cubic-bezier(.33,1,.68,1)}:host .nggv-backdrop--transparent{opacity:0}:host .nggv-backdrop--transparent.entered,:host .nggv-backdrop--transparent.is-entering{opacity:1}:host .nggv-backdrop--transparent.is-exiting{opacity:0}:host .gds-slide-out__content{padding:1rem;overflow:auto;width:100%}:host .gds-slide-out__content p{margin-bottom:0;margin-top:0}:host .gds-slide-out__content{overflow:unset}:host .modal-dialog__actions,:host .gds-slide-out__header,:host .modal-body,:host .gds-slide-out__content{box-sizing:border-box}:host .modal-slide-out__heading{padding:1rem;border-bottom:solid 1px var(--gds-sys-color-base-600);--border-color: var(--gds-sys-color-base-600);display:inline-flex;justify-content:space-between;align-items:center;width:100%}:host .modal-slide-out__heading h3,:host .modal-slide-out__heading .h3{margin-bottom:0;margin-top:0}:host .modal-slide-out__heading h3+.close,:host .modal-slide-out__heading .h3+.close{margin:-7px;min-width:2rem}:host .gds-close{background-color:transparent;font-size:0;background:transparent;border:0;border-radius:50%;content:\"\";cursor:pointer;display:flex;font-family:inherit;height:2rem;position:relative;width:2rem;padding:0}@media(hover:none)and (pointer:coarse){:host .gds-close:not(:disabled):not(.disabled){padding:.375rem;height:2.75rem;width:2.75rem}:host .gds-close:not(:disabled):not(.disabled)>i{background:var(--gds-sys-color-base-200);height:2rem;width:2rem;border-radius:50%;position:relative;--color: var(--gds-sys-color-text-primary)}:host .gds-close:not(:disabled):not(.disabled)>div:after,:host .gds-close:not(:disabled):not(.disabled)>div:before{height:.789375rem;width:.130625rem;top:.625rem}}:host .gds-close:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-close:focus,:host .gds-close:focus-visible i{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .gds-close>i{border-radius:var(--gds-sys-shape-corner-round);display:block;width:100%;height:100%}:host .gds-close>i:after,:host .gds-close>i:before{background:var(--gds-sys-color-text-primary);content:\"\";display:block;height:.789375rem;width:.130625rem;border-radius:.5px;left:calc(50% - .0625rem);position:absolute;top:.625rem}:host .gds-close>i:after{transform:rotate(45deg)}:host .gds-close>i:before{transform:rotate(-45deg)}:host .gds-close>svg path{fill:var(--gds-sys-color-text-primary)}@media(min-width:48em){:host .gds-close:not(:disabled,.disabled):hover>i{background:color-mix(in srgb,var(--gds-sys-color-text-primary) 10%,transparent)}:host .gds-close:not(:disabled,.disabled):hover:active>i{background:color-mix(in srgb,var(--gds-sys-color-text-primary) 20%,transparent)}}:host .modal-dialog__actions button{background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:.25rem;border:solid 1px var(--gds-sys-color-base-600);font-weight:500}:host .modal-dialog__actions button:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions button:focus,:host .modal-dialog__actions button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .modal-dialog__actions button{min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center}@media(max-width:35.98em){:host .modal-dialog__actions button{min-width:100%}}@media screen and (-ms-high-contrast:active){:host .modal-dialog__actions button{border:2px solid currentcolor}}:host .modal-dialog__actions button.small{min-height:2rem;height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host .modal-dialog__actions button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .modal-dialog__actions button{font-size:1rem;font-family:inherit}:host .modal-dialog__actions .primary{transition:border var(--gds-sys-transition)}:host .modal-dialog__actions .primary:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-dark-blue-1);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-dark-blue-1);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-dark-blue-1)}:host .modal-dialog__actions .primary[aria-selected=true],:host .modal-dialog__actions .primary:active,:host .modal-dialog__actions .primary.active,:host .modal-dialog__actions .primary.active:hover,:host .modal-dialog__actions .primary:active:hover{background:var(--gds-sys-color-dark-blue-2);color:var(--gds-sys-color-text-white);--background: $bg;--color: $color;border-color:var(--gds-sys-color-dark-blue-2)}:host .modal-dialog__actions .primary{background:var(--gds-sys-color-dark-blue-2);border-color:var(--gds-sys-color-dark-blue-2);color:var(--gds-sys-color-text-white);--color: var(--gds-sys-color-text-white)}:host .modal-dialog__actions .primary:disabled,:host .modal-dialog__actions .primary.disabled,:host .modal-dialog__actions .primary[aria-disabled=true]{background:var(--gds-sys-color-base-300)!important;color:var(--gds-sys-color-text-disabled)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host .modal-dialog__actions .primary:disabled::placeholder,:host .modal-dialog__actions .primary.disabled::placeholder,:host .modal-dialog__actions .primary[aria-disabled=true]::placeholder{color:var(--gds-sys-color-text-disabled)}:host .modal-dialog__actions .secondary:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions .secondary:focus,:host .modal-dialog__actions .secondary:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .modal-dialog__actions .secondary{transition:border var(--gds-sys-transition)}:host .modal-dialog__actions .secondary:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-dark-blue-1);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-dark-blue-1);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-dark-blue-1)}:host .modal-dialog__actions .secondary[aria-selected=true],:host .modal-dialog__actions .secondary:active,:host .modal-dialog__actions .secondary.active,:host .modal-dialog__actions .secondary.active:hover,:host .modal-dialog__actions .secondary:active:hover{background:var(--gds-sys-color-dark-blue-2);color:var(--gds-sys-color-text-white);--background: $bg;--color: $color;border-color:var(--gds-sys-color-dark-blue-2)}:host .modal-dialog__actions .secondary{background:transparent;border-color:var(--gds-sys-color-dark-blue-2);color:var(--gds-sys-color-dark-blue-2);--color: var(--gds-sys-color-dark-blue-2)}:host .modal-dialog__actions .secondary:disabled,:host .modal-dialog__actions .secondary.disabled,:host .modal-dialog__actions .secondary[aria-disabled=true]{background:var(--gds-sys-color-base-300)!important;color:var(--gds-sys-color-text-disabled)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host .modal-dialog__actions .secondary:disabled::placeholder,:host .modal-dialog__actions .secondary.disabled::placeholder,:host .modal-dialog__actions .secondary[aria-disabled=true]::placeholder{color:var(--gds-sys-color-text-disabled)}:host .modal-dialog__actions .danger{color:var(--gds-sys-color-dark-red-1);--color: var(--gds-sys-color-dark-red-1);border-color:transparent;transition:border var(--gds-sys-transition)}:host .modal-dialog__actions .danger:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-dark-red-1);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-dark-red-1);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-dark-red-1)}:host .modal-dialog__actions .danger[aria-selected=true],:host .modal-dialog__actions .danger:active,:host .modal-dialog__actions .danger.active,:host .modal-dialog__actions .danger.active:hover,:host .modal-dialog__actions .danger:active:hover{background:var(--gds-sys-color-dark-red-1);color:var(--gds-sys-color-text-white);--background: $bg;--color: $color;border-color:var(--gds-sys-color-dark-red-1)}:host .modal-dialog__actions .danger[aria-selected]:hover,:host .modal-dialog__actions .danger.active:hover,:host .modal-dialog__actions .danger:active:hover{opacity:.9}:host .modal-dialog__actions .danger:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions .danger:focus,:host .modal-dialog__actions .danger:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host #sdv-modal-body{flex:1}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: NggvSlideOutComponent, isStandalone: false, selector: "nggv-slideout-modal", inputs: { side: "side", shown: "shown", initiallyShown: "initiallyShown", heading: "heading", title: "title", content: "content", closable: "closable", closableOutside: "closableOutside", autoWidth: "autoWidth", thook: "thook", closeButtonAriaLabel: "closeButtonAriaLabel", buttons: "buttons" }, outputs: { nggvCloseEvent: "nggvCloseEvent", nggvPositiveEvent: "nggvPositiveEvent", nggvNeutralEvent: "nggvNeutralEvent", nggvNegativeEvent: "nggvNegativeEvent" }, host: { listeners: { "click": "close($event,\"host\")", "document:keydown.escape": "close($event)", "keydown": "focusTrap($event)" } }, viewQueries: [{ propertyName: "slideOutRef", first: true, predicate: ["slideOut"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"shown\">\n  <div\n    [ngClass]=\"{\n      'gds-slide-out--left': fromLeft,\n      'gds-slide-out--right': !fromLeft,\n    }\"\n    *transloco=\"let t\"\n    [class.-active]=\"shown\"\n    [attr.data-thook]=\"thook\"\n    [attr.aria-hidden]=\"!shown\"\n    [@modalAnimation]\n  >\n    <div\n      #slideOut\n      class=\"gds-slide-out\"\n      [class.auto-width]=\"autoWidth\"\n      [class.entered]=\"shown\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"gds-modal-title\"\n      aria-describedby=\"gds-modal-body\"\n    >\n      <header class=\"gds-slide-out__header\">\n        <h3 id=\"gds-modal-title\">\n          {{ heading || title || '' }}\n        </h3>\n        <button\n          data-testid=\"modal-close-button\"\n          class=\"gds-close nggv-modal-slideout__close\"\n          (click)=\"close($event, 'action')\"\n          [attr.aria-label]=\"closeButtonAriaLabel\"\n        >\n          <i></i>\n        </button>\n      </header>\n\n      <section id=\"modal-body\">\n        <div class=\"gds-slide-out__content hide-if-empty\">\n          <div *ngIf=\"content\" [innerHtml]=\"content\"></div>\n          <ng-content></ng-content>\n        </div>\n        <ng-content select=\"[slot='outside-content']\"></ng-content>\n      </section>\n\n      <footer class=\"modal-dialog__actions\">\n        <button\n          class=\"danger\"\n          type=\"reset\"\n          [attr.data-thook]=\"'dialog-' + (_buttons?.negative || 'negative')\"\n          (click)=\"onAction($event, 'negative')\"\n          (keydown.enter)=\"onAction($event, 'negative')\"\n          *ngIf=\"_buttons && _buttons.negative\"\n        >\n          {{ t(_buttons.negative) }}\n        </button>\n\n        <button\n          class=\"secondary\"\n          type=\"button\"\n          [attr.data-thook]=\"'dialog-' + (_buttons?.neutral || 'neutral')\"\n          (click)=\"onAction($event, 'neutral')\"\n          (keydown.enter)=\"onAction($event, 'neutral')\"\n          *ngIf=\"_buttons && _buttons.neutral\"\n        >\n          {{ t(_buttons.neutral) }}\n        </button>\n\n        <button\n          class=\"primary\"\n          type=\"submit\"\n          [attr.data-thook]=\"'dialog-' + (_buttons?.positive || 'positive')\"\n          (click)=\"onAction($event, 'positive')\"\n          (keydown.enter)=\"onAction($event, 'positive')\"\n          *ngIf=\"_buttons && _buttons.positive\"\n        >\n          {{ t(_buttons.positive) }}\n        </button>\n      </footer>\n    </div>\n\n    <div\n      class=\"nggv-backdrop\"\n      data-thook=\"slideout-backdrop\"\n      (click)=\"close()\"\n    ></div>\n  </div>\n</ng-container>\n", styles: [":host{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2);--gds-z-index-deep: -9999;--gds-z-index-dropdown-backdrop: 990;--gds-z-index-datepicker: 995;--gds-z-index-dropdown: 995;--gds-z-index-sticky: 1020;--gds-z-index-fixed: 1030;--gds-z-index-modal-backdrop: 1040;--gds-z-index-modal: 1050;--gds-z-index-popover: 1060;--gds-z-index-tooltip: 1070;--gds-z-index-top: 9999;--gds-sys-shape-corner-none: 0;--gds-sys-shape-corner-small: .125rem;--gds-sys-shape-corner-medium: .25rem;--gds-sys-shape-corner-round: 50%}:host .gds-slide-out{background:var(--gds-sys-color-background-primary);display:flex;flex-direction:column;box-shadow:var(--gds-sys-color-background-primary);position:absolute;width:100%;z-index:var(--gds-z-index-modal)}:host .gds-slide-out>.header,:host .gds-slide-out>header{padding:1rem;border-bottom:solid 1px var(--gds-sys-color-base-600);--border-color: var(--gds-sys-color-base-600);display:inline-flex;justify-content:space-between;align-items:center;width:100%}:host .gds-slide-out>.header h3,:host .gds-slide-out>.header .h3,:host .gds-slide-out>header h3,:host .gds-slide-out>header .h3{margin-bottom:0;margin-top:0}:host .gds-slide-out>.header h3+.close,:host .gds-slide-out>.header .h3+.close,:host .gds-slide-out>header h3+.close,:host .gds-slide-out>header .h3+.close{margin:-7px;min-width:2rem}:host .gds-slide-out>.body{padding:1rem;overflow:auto;width:100%}:host .gds-slide-out>.body p{margin-bottom:0;margin-top:0}:host .gds-slide-out>.footer,:host .gds-slide-out>footer{padding:1rem;width:100%}@media(min-width:36em){:host .gds-slide-out>.footer,:host .gds-slide-out>footer{display:flex;justify-content:flex-end}}@media(max-width:35.98em){:host .gds-slide-out>.footer button+button,:host .gds-slide-out>.footer button+.button,:host .gds-slide-out>.footer .button+button,:host .gds-slide-out>.footer .button+.button,:host .gds-slide-out>footer button+button,:host .gds-slide-out>footer button+.button,:host .gds-slide-out>footer .button+button,:host .gds-slide-out>footer .button+.button{margin-top:.75rem}}@media(min-width:36em){:host .gds-slide-out>.footer button+button,:host .gds-slide-out>.footer button+.button,:host .gds-slide-out>.footer .button+button,:host .gds-slide-out>.footer .button+.button,:host .gds-slide-out>footer button+button,:host .gds-slide-out>footer button+.button,:host .gds-slide-out>footer .button+button,:host .gds-slide-out>footer .button+.button{margin-left:.75rem}}:host .gds-slide-out{position:fixed;height:100dvh;max-width:512px;min-height:-webkit-fill-available;min-height:stretch;right:0;top:0;transition:transform .35s cubic-bezier(.33,1,.68,1);transform:translate(100%)}:host .gds-slide-out.is-entering,:host .gds-slide-out.entered{transform:translate(0)}:host .gds-slide-out.is-exiting{transform:translate(100%)}:host .gds-slide-out.large{max-width:720px}:host .gds-slide-out>.body{flex:1 0}:host .gds-slide-out.left{left:0}:host .gds-slide-out.gds-slide-out--768{max-width:48rem}:host .gds-slide-out.gds-slide-out--960{max-width:60rem}:host .gds-slide-out.gds-slide-out--768 header,:host .gds-slide-out.gds-slide-out--960 header{padding:1.5rem 2rem 1rem}:host .gds-slide-out.gds-slide-out--768 .body,:host .gds-slide-out.gds-slide-out--960 .body{padding:2rem 2rem 1rem}:host .gds-slide-out.gds-slide-out--768 footer,:host .gds-slide-out.gds-slide-out--960 footer{padding:1rem 2rem 2rem}:host .gds-slide-out{z-index:1050;overflow-y:auto}:host .gds-slide-out.auto-width{width:auto;max-width:initial}:host .hide-if-empty:empty{display:none}:host .nggv-backdrop{background:#00000080;inset:0;position:fixed;z-index:var(--gds-z-index-modal-backdrop);display:block;transition:opacity .5s cubic-bezier(.33,1,.68,1)}:host .nggv-backdrop--transparent{opacity:0}:host .nggv-backdrop--transparent.entered,:host .nggv-backdrop--transparent.is-entering{opacity:1}:host .nggv-backdrop--transparent.is-exiting{opacity:0}:host .gds-slide-out__content{padding:1rem;overflow:auto;width:100%}:host .gds-slide-out__content p{margin-bottom:0;margin-top:0}:host .gds-slide-out__content{overflow:unset}:host .modal-dialog__actions,:host .gds-slide-out__header,:host .modal-body,:host .gds-slide-out__content{box-sizing:border-box}:host .modal-slide-out__heading{padding:1rem;border-bottom:solid 1px var(--gds-sys-color-base-600);--border-color: var(--gds-sys-color-base-600);display:inline-flex;justify-content:space-between;align-items:center;width:100%}:host .modal-slide-out__heading h3,:host .modal-slide-out__heading .h3{margin-bottom:0;margin-top:0}:host .modal-slide-out__heading h3+.close,:host .modal-slide-out__heading .h3+.close{margin:-7px;min-width:2rem}:host .gds-close{background-color:transparent;font-size:0;background:transparent;border:0;border-radius:50%;content:\"\";cursor:pointer;display:flex;font-family:inherit;height:2rem;position:relative;width:2rem;padding:0}@media(hover:none)and (pointer:coarse){:host .gds-close:not(:disabled):not(.disabled){padding:.375rem;height:2.75rem;width:2.75rem}:host .gds-close:not(:disabled):not(.disabled)>i{background:var(--gds-sys-color-base-200);height:2rem;width:2rem;border-radius:50%;position:relative;--color: var(--gds-sys-color-text-primary)}:host .gds-close:not(:disabled):not(.disabled)>div:after,:host .gds-close:not(:disabled):not(.disabled)>div:before{height:.789375rem;width:.130625rem;top:.625rem}}:host .gds-close:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-close:focus,:host .gds-close:focus-visible i{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .gds-close>i{border-radius:var(--gds-sys-shape-corner-round);display:block;width:100%;height:100%}:host .gds-close>i:after,:host .gds-close>i:before{background:var(--gds-sys-color-text-primary);content:\"\";display:block;height:.789375rem;width:.130625rem;border-radius:.5px;left:calc(50% - .0625rem);position:absolute;top:.625rem}:host .gds-close>i:after{transform:rotate(45deg)}:host .gds-close>i:before{transform:rotate(-45deg)}:host .gds-close>svg path{fill:var(--gds-sys-color-text-primary)}@media(min-width:48em){:host .gds-close:not(:disabled,.disabled):hover>i{background:color-mix(in srgb,var(--gds-sys-color-text-primary) 10%,transparent)}:host .gds-close:not(:disabled,.disabled):hover:active>i{background:color-mix(in srgb,var(--gds-sys-color-text-primary) 20%,transparent)}}:host .modal-dialog__actions button{background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:.25rem;border:solid 1px var(--gds-sys-color-base-600);font-weight:500}:host .modal-dialog__actions button:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions button:focus,:host .modal-dialog__actions button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .modal-dialog__actions button{min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center}@media(max-width:35.98em){:host .modal-dialog__actions button{min-width:100%}}@media screen and (-ms-high-contrast:active){:host .modal-dialog__actions button{border:2px solid currentcolor}}:host .modal-dialog__actions button.small{min-height:2rem;height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host .modal-dialog__actions button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .modal-dialog__actions button{font-size:1rem;font-family:inherit}:host .modal-dialog__actions .primary{transition:border var(--gds-sys-transition)}:host .modal-dialog__actions .primary:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-dark-blue-1);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-dark-blue-1);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-dark-blue-1)}:host .modal-dialog__actions .primary[aria-selected=true],:host .modal-dialog__actions .primary:active,:host .modal-dialog__actions .primary.active,:host .modal-dialog__actions .primary.active:hover,:host .modal-dialog__actions .primary:active:hover{background:var(--gds-sys-color-dark-blue-2);color:var(--gds-sys-color-text-white);--background: $bg;--color: $color;border-color:var(--gds-sys-color-dark-blue-2)}:host .modal-dialog__actions .primary{background:var(--gds-sys-color-dark-blue-2);border-color:var(--gds-sys-color-dark-blue-2);color:var(--gds-sys-color-text-white);--color: var(--gds-sys-color-text-white)}:host .modal-dialog__actions .primary:disabled,:host .modal-dialog__actions .primary.disabled,:host .modal-dialog__actions .primary[aria-disabled=true]{background:var(--gds-sys-color-base-300)!important;color:var(--gds-sys-color-text-disabled)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host .modal-dialog__actions .primary:disabled::placeholder,:host .modal-dialog__actions .primary.disabled::placeholder,:host .modal-dialog__actions .primary[aria-disabled=true]::placeholder{color:var(--gds-sys-color-text-disabled)}:host .modal-dialog__actions .secondary:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions .secondary:focus,:host .modal-dialog__actions .secondary:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .modal-dialog__actions .secondary{transition:border var(--gds-sys-transition)}:host .modal-dialog__actions .secondary:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-dark-blue-1);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-dark-blue-1);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-dark-blue-1)}:host .modal-dialog__actions .secondary[aria-selected=true],:host .modal-dialog__actions .secondary:active,:host .modal-dialog__actions .secondary.active,:host .modal-dialog__actions .secondary.active:hover,:host .modal-dialog__actions .secondary:active:hover{background:var(--gds-sys-color-dark-blue-2);color:var(--gds-sys-color-text-white);--background: $bg;--color: $color;border-color:var(--gds-sys-color-dark-blue-2)}:host .modal-dialog__actions .secondary{background:transparent;border-color:var(--gds-sys-color-dark-blue-2);color:var(--gds-sys-color-dark-blue-2);--color: var(--gds-sys-color-dark-blue-2)}:host .modal-dialog__actions .secondary:disabled,:host .modal-dialog__actions .secondary.disabled,:host .modal-dialog__actions .secondary[aria-disabled=true]{background:var(--gds-sys-color-base-300)!important;color:var(--gds-sys-color-text-disabled)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host .modal-dialog__actions .secondary:disabled::placeholder,:host .modal-dialog__actions .secondary.disabled::placeholder,:host .modal-dialog__actions .secondary[aria-disabled=true]::placeholder{color:var(--gds-sys-color-text-disabled)}:host .modal-dialog__actions .danger{color:var(--gds-sys-color-dark-red-1);--color: var(--gds-sys-color-dark-red-1);border-color:transparent;transition:border var(--gds-sys-transition)}:host .modal-dialog__actions .danger:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-dark-red-1);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-dark-red-1);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-dark-red-1)}:host .modal-dialog__actions .danger[aria-selected=true],:host .modal-dialog__actions .danger:active,:host .modal-dialog__actions .danger.active,:host .modal-dialog__actions .danger.active:hover,:host .modal-dialog__actions .danger:active:hover{background:var(--gds-sys-color-dark-red-1);color:var(--gds-sys-color-text-white);--background: $bg;--color: $color;border-color:var(--gds-sys-color-dark-red-1)}:host .modal-dialog__actions .danger[aria-selected]:hover,:host .modal-dialog__actions .danger.active:hover,:host .modal-dialog__actions .danger:active:hover{opacity:.9}:host .modal-dialog__actions .danger:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions .danger:focus,:host .modal-dialog__actions .danger:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host #sdv-modal-body{flex:1}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], animations: [
             trigger('modalAnimation', [
                 transition(':enter', [
                     query('.gds-slide-out', style({ transform: 'translateX(100%)' }), {
@@ -6047,7 +6046,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
                                 ]),
                             ]),
                         ]),
-                    ], standalone: false, template: "<ng-container *ngIf=\"shown\">\n  <div\n    [ngClass]=\"{\n      'gds-slide-out--left': fromLeft,\n      'gds-slide-out--right': !fromLeft,\n    }\"\n    *transloco=\"let t\"\n    [class.-active]=\"shown\"\n    [attr.data-thook]=\"thook\"\n    [attr.aria-hidden]=\"!shown\"\n    [@modalAnimation]\n  >\n    <div\n      #slideOut\n      class=\"gds-slide-out\"\n      [class.auto-width]=\"autoWidth\"\n      [class.entered]=\"shown\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"gds-modal-title\"\n      aria-describedby=\"gds-modal-body\"\n    >\n      <header class=\"gds-slide-out__header\">\n        <h3 id=\"gds-modal-title\">\n          {{ heading || title || '' }}\n        </h3>\n        <button\n          data-testid=\"modal-close-button\"\n          class=\"nggv-modal-slideout__close\"\n          (click)=\"close($event, 'action')\"\n          [attr.aria-label]=\"closeButtonAriaLabel\"\n        >\n          <i></i>\n        </button>\n      </header>\n\n      <section id=\"modal-body\">\n        <div class=\"gds-slide-out__content hide-if-empty\">\n          <div *ngIf=\"content\" [innerHtml]=\"content\"></div>\n          <ng-content></ng-content>\n        </div>\n        <ng-content select=\"[slot='outside-content']\"></ng-content>\n      </section>\n\n      <footer class=\"modal-dialog__actions\">\n        <button\n          class=\"danger\"\n          type=\"reset\"\n          [attr.data-thook]=\"'dialog-' + (_buttons?.negative || 'negative')\"\n          (click)=\"onAction($event, 'negative')\"\n          (keydown.enter)=\"onAction($event, 'negative')\"\n          *ngIf=\"_buttons && _buttons.negative\"\n        >\n          {{ t(_buttons.negative) }}\n        </button>\n\n        <button\n          class=\"secondary\"\n          type=\"button\"\n          [attr.data-thook]=\"'dialog-' + (_buttons?.neutral || 'neutral')\"\n          (click)=\"onAction($event, 'neutral')\"\n          (keydown.enter)=\"onAction($event, 'neutral')\"\n          *ngIf=\"_buttons && _buttons.neutral\"\n        >\n          {{ t(_buttons.neutral) }}\n        </button>\n\n        <button\n          class=\"primary\"\n          type=\"submit\"\n          [attr.data-thook]=\"'dialog-' + (_buttons?.positive || 'positive')\"\n          (click)=\"onAction($event, 'positive')\"\n          (keydown.enter)=\"onAction($event, 'positive')\"\n          *ngIf=\"_buttons && _buttons.positive\"\n        >\n          {{ t(_buttons.positive) }}\n        </button>\n      </footer>\n    </div>\n\n    <div\n      class=\"nggv-backdrop\"\n      data-thook=\"slideout-backdrop\"\n      (click)=\"close()\"\n    ></div>\n  </div>\n</ng-container>\n", styles: [":host{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2);--gds-z-index-deep: -9999;--gds-z-index-dropdown-backdrop: 990;--gds-z-index-datepicker: 995;--gds-z-index-dropdown: 995;--gds-z-index-sticky: 1020;--gds-z-index-fixed: 1030;--gds-z-index-modal-backdrop: 1040;--gds-z-index-modal: 1050;--gds-z-index-popover: 1060;--gds-z-index-tooltip: 1070;--gds-z-index-top: 9999;--gds-sys-shape-corner-none: 0;--gds-sys-shape-corner-small: .125rem;--gds-sys-shape-corner-medium: .25rem;--gds-sys-shape-corner-round: 50%}:host .gds-slide-out{background:var(--gds-sys-color-background-primary);display:flex;flex-direction:column;box-shadow:var(--gds-sys-color-background-primary);position:absolute;width:100%;z-index:var(--gds-z-index-modal)}:host .gds-slide-out>.header,:host .gds-slide-out>header{padding:1rem;border-bottom:solid 1px var(--gds-sys-color-base-600);--border-color: var(--gds-sys-color-base-600);display:inline-flex;justify-content:space-between;align-items:center;width:100%}:host .gds-slide-out>.header h3,:host .gds-slide-out>.header .h3,:host .gds-slide-out>header h3,:host .gds-slide-out>header .h3{margin-bottom:0;margin-top:0}:host .gds-slide-out>.header h3+.close,:host .gds-slide-out>.header .h3+.close,:host .gds-slide-out>header h3+.close,:host .gds-slide-out>header .h3+.close{margin:-7px;min-width:2rem}:host .gds-slide-out>.body{padding:1rem;overflow:auto;width:100%}:host .gds-slide-out>.body p{margin-bottom:0;margin-top:0}:host .gds-slide-out>.footer,:host .gds-slide-out>footer{padding:1rem;width:100%}@media(min-width:36em){:host .gds-slide-out>.footer,:host .gds-slide-out>footer{display:flex;justify-content:flex-end}}@media(max-width:35.98em){:host .gds-slide-out>.footer button+button,:host .gds-slide-out>.footer button+.button,:host .gds-slide-out>.footer .button+button,:host .gds-slide-out>.footer .button+.button,:host .gds-slide-out>footer button+button,:host .gds-slide-out>footer button+.button,:host .gds-slide-out>footer .button+button,:host .gds-slide-out>footer .button+.button{margin-top:.75rem}}@media(min-width:36em){:host .gds-slide-out>.footer button+button,:host .gds-slide-out>.footer button+.button,:host .gds-slide-out>.footer .button+button,:host .gds-slide-out>.footer .button+.button,:host .gds-slide-out>footer button+button,:host .gds-slide-out>footer button+.button,:host .gds-slide-out>footer .button+button,:host .gds-slide-out>footer .button+.button{margin-left:.75rem}}:host .gds-slide-out{position:fixed;height:100dvh;max-width:512px;min-height:-webkit-fill-available;min-height:stretch;right:0;top:0;transition:transform .35s cubic-bezier(.33,1,.68,1);transform:translate(100%)}:host .gds-slide-out.is-entering,:host .gds-slide-out.entered{transform:translate(0)}:host .gds-slide-out.is-exiting{transform:translate(100%)}:host .gds-slide-out.large{max-width:720px}:host .gds-slide-out>.body{flex:1 0}:host .gds-slide-out.left{left:0}:host .gds-slide-out.gds-slide-out--768{max-width:48rem}:host .gds-slide-out.gds-slide-out--960{max-width:60rem}:host .gds-slide-out.gds-slide-out--768 header,:host .gds-slide-out.gds-slide-out--960 header{padding:1.5rem 2rem 1rem}:host .gds-slide-out.gds-slide-out--768 .body,:host .gds-slide-out.gds-slide-out--960 .body{padding:2rem 2rem 1rem}:host .gds-slide-out.gds-slide-out--768 footer,:host .gds-slide-out.gds-slide-out--960 footer{padding:1rem 2rem 2rem}:host .gds-slide-out{z-index:1050;overflow-y:auto}:host .gds-slide-out.auto-width{width:auto;max-width:initial}:host .hide-if-empty:empty{display:none}:host .nggv-backdrop{background:#00000080;inset:0;position:fixed;z-index:var(--gds-z-index-modal-backdrop);display:block;transition:opacity .5s cubic-bezier(.33,1,.68,1)}:host .nggv-backdrop--transparent{opacity:0}:host .nggv-backdrop--transparent.entered,:host .nggv-backdrop--transparent.is-entering{opacity:1}:host .nggv-backdrop--transparent.is-exiting{opacity:0}:host .gds-slide-out__content{padding:1rem;overflow:auto;width:100%}:host .gds-slide-out__content p{margin-bottom:0;margin-top:0}:host .gds-slide-out__content{overflow:unset}:host .modal-dialog__actions,:host .gds-slide-out__header,:host .modal-body,:host .gds-slide-out__content{box-sizing:border-box}:host .modal-slide-out__heading{padding:1rem;border-bottom:solid 1px var(--gds-sys-color-base-600);--border-color: var(--gds-sys-color-base-600);display:inline-flex;justify-content:space-between;align-items:center;width:100%}:host .modal-slide-out__heading h3,:host .modal-slide-out__heading .h3{margin-bottom:0;margin-top:0}:host .modal-slide-out__heading h3+.close,:host .modal-slide-out__heading .h3+.close{margin:-7px;min-width:2rem}:host .gds-close{background-color:transparent;font-size:0;background:transparent;border:0;border-radius:50%;content:\"\";cursor:pointer;display:flex;font-family:inherit;height:2rem;position:relative;width:2rem;padding:0}@media(hover:none)and (pointer:coarse){:host .gds-close:not(:disabled):not(.disabled){padding:.375rem;height:2.75rem;width:2.75rem}:host .gds-close:not(:disabled):not(.disabled)>i{background:var(--gds-sys-color-base-200);height:2rem;width:2rem;border-radius:50%;position:relative;--color: var(--gds-sys-color-text-primary)}:host .gds-close:not(:disabled):not(.disabled)>div:after,:host .gds-close:not(:disabled):not(.disabled)>div:before{height:.789375rem;width:.130625rem;top:.625rem}}:host .gds-close:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-close:focus,:host .gds-close:focus-visible i{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .gds-close>i{border-radius:var(--gds-sys-shape-corner-round);display:block;width:100%;height:100%}:host .gds-close>i:after,:host .gds-close>i:before{background:var(--gds-sys-color-text-primary);content:\"\";display:block;height:.789375rem;width:.130625rem;border-radius:.5px;left:calc(50% - .0625rem);position:absolute;top:.625rem}:host .gds-close>i:after{transform:rotate(45deg)}:host .gds-close>i:before{transform:rotate(-45deg)}:host .gds-close>svg path{fill:var(--gds-sys-color-text-primary)}@media(min-width:48em){:host .gds-close:not(:disabled,.disabled):hover>i{background:color-mix(in srgb,var(--gds-sys-color-text-primary) 10%,transparent)}:host .gds-close:not(:disabled,.disabled):hover:active>i{background:color-mix(in srgb,var(--gds-sys-color-text-primary) 20%,transparent)}}:host .modal-dialog__actions button{background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:.25rem;border:solid 1px var(--gds-sys-color-base-600);font-weight:500}:host .modal-dialog__actions button:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions button:focus,:host .modal-dialog__actions button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .modal-dialog__actions button{min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center}@media(max-width:35.98em){:host .modal-dialog__actions button{min-width:100%}}@media screen and (-ms-high-contrast:active){:host .modal-dialog__actions button{border:2px solid currentcolor}}:host .modal-dialog__actions button.small{min-height:2rem;height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host .modal-dialog__actions button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .modal-dialog__actions button{font-size:1rem;font-family:inherit}:host .modal-dialog__actions .primary{transition:border var(--gds-sys-transition)}:host .modal-dialog__actions .primary:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-dark-blue-1);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-dark-blue-1);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-dark-blue-1)}:host .modal-dialog__actions .primary[aria-selected=true],:host .modal-dialog__actions .primary:active,:host .modal-dialog__actions .primary.active,:host .modal-dialog__actions .primary.active:hover,:host .modal-dialog__actions .primary:active:hover{background:var(--gds-sys-color-dark-blue-2);color:var(--gds-sys-color-text-white);--background: $bg;--color: $color;border-color:var(--gds-sys-color-dark-blue-2)}:host .modal-dialog__actions .primary{background:var(--gds-sys-color-dark-blue-2);border-color:var(--gds-sys-color-dark-blue-2);color:var(--gds-sys-color-text-white);--color: var(--gds-sys-color-text-white)}:host .modal-dialog__actions .primary:disabled,:host .modal-dialog__actions .primary.disabled,:host .modal-dialog__actions .primary[aria-disabled=true]{background:var(--gds-sys-color-base-300)!important;color:var(--gds-sys-color-text-disabled)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host .modal-dialog__actions .primary:disabled::placeholder,:host .modal-dialog__actions .primary.disabled::placeholder,:host .modal-dialog__actions .primary[aria-disabled=true]::placeholder{color:var(--gds-sys-color-text-disabled)}:host .modal-dialog__actions .secondary:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions .secondary:focus,:host .modal-dialog__actions .secondary:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .modal-dialog__actions .secondary{transition:border var(--gds-sys-transition)}:host .modal-dialog__actions .secondary:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-dark-blue-1);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-dark-blue-1);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-dark-blue-1)}:host .modal-dialog__actions .secondary[aria-selected=true],:host .modal-dialog__actions .secondary:active,:host .modal-dialog__actions .secondary.active,:host .modal-dialog__actions .secondary.active:hover,:host .modal-dialog__actions .secondary:active:hover{background:var(--gds-sys-color-dark-blue-2);color:var(--gds-sys-color-text-white);--background: $bg;--color: $color;border-color:var(--gds-sys-color-dark-blue-2)}:host .modal-dialog__actions .secondary{background:transparent;border-color:var(--gds-sys-color-dark-blue-2);color:var(--gds-sys-color-dark-blue-2);--color: var(--gds-sys-color-dark-blue-2)}:host .modal-dialog__actions .secondary:disabled,:host .modal-dialog__actions .secondary.disabled,:host .modal-dialog__actions .secondary[aria-disabled=true]{background:var(--gds-sys-color-base-300)!important;color:var(--gds-sys-color-text-disabled)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host .modal-dialog__actions .secondary:disabled::placeholder,:host .modal-dialog__actions .secondary.disabled::placeholder,:host .modal-dialog__actions .secondary[aria-disabled=true]::placeholder{color:var(--gds-sys-color-text-disabled)}:host .modal-dialog__actions .danger{color:var(--gds-sys-color-dark-red-1);--color: var(--gds-sys-color-dark-red-1);border-color:transparent;transition:border var(--gds-sys-transition)}:host .modal-dialog__actions .danger:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-dark-red-1);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-dark-red-1);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-dark-red-1)}:host .modal-dialog__actions .danger[aria-selected=true],:host .modal-dialog__actions .danger:active,:host .modal-dialog__actions .danger.active,:host .modal-dialog__actions .danger.active:hover,:host .modal-dialog__actions .danger:active:hover{background:var(--gds-sys-color-dark-red-1);color:var(--gds-sys-color-text-white);--background: $bg;--color: $color;border-color:var(--gds-sys-color-dark-red-1)}:host .modal-dialog__actions .danger[aria-selected]:hover,:host .modal-dialog__actions .danger.active:hover,:host .modal-dialog__actions .danger:active:hover{opacity:.9}:host .modal-dialog__actions .danger:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions .danger:focus,:host .modal-dialog__actions .danger:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host #sdv-modal-body{flex:1}\n"] }]
+                    ], standalone: false, template: "<ng-container *ngIf=\"shown\">\n  <div\n    [ngClass]=\"{\n      'gds-slide-out--left': fromLeft,\n      'gds-slide-out--right': !fromLeft,\n    }\"\n    *transloco=\"let t\"\n    [class.-active]=\"shown\"\n    [attr.data-thook]=\"thook\"\n    [attr.aria-hidden]=\"!shown\"\n    [@modalAnimation]\n  >\n    <div\n      #slideOut\n      class=\"gds-slide-out\"\n      [class.auto-width]=\"autoWidth\"\n      [class.entered]=\"shown\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"gds-modal-title\"\n      aria-describedby=\"gds-modal-body\"\n    >\n      <header class=\"gds-slide-out__header\">\n        <h3 id=\"gds-modal-title\">\n          {{ heading || title || '' }}\n        </h3>\n        <button\n          data-testid=\"modal-close-button\"\n          class=\"gds-close nggv-modal-slideout__close\"\n          (click)=\"close($event, 'action')\"\n          [attr.aria-label]=\"closeButtonAriaLabel\"\n        >\n          <i></i>\n        </button>\n      </header>\n\n      <section id=\"modal-body\">\n        <div class=\"gds-slide-out__content hide-if-empty\">\n          <div *ngIf=\"content\" [innerHtml]=\"content\"></div>\n          <ng-content></ng-content>\n        </div>\n        <ng-content select=\"[slot='outside-content']\"></ng-content>\n      </section>\n\n      <footer class=\"modal-dialog__actions\">\n        <button\n          class=\"danger\"\n          type=\"reset\"\n          [attr.data-thook]=\"'dialog-' + (_buttons?.negative || 'negative')\"\n          (click)=\"onAction($event, 'negative')\"\n          (keydown.enter)=\"onAction($event, 'negative')\"\n          *ngIf=\"_buttons && _buttons.negative\"\n        >\n          {{ t(_buttons.negative) }}\n        </button>\n\n        <button\n          class=\"secondary\"\n          type=\"button\"\n          [attr.data-thook]=\"'dialog-' + (_buttons?.neutral || 'neutral')\"\n          (click)=\"onAction($event, 'neutral')\"\n          (keydown.enter)=\"onAction($event, 'neutral')\"\n          *ngIf=\"_buttons && _buttons.neutral\"\n        >\n          {{ t(_buttons.neutral) }}\n        </button>\n\n        <button\n          class=\"primary\"\n          type=\"submit\"\n          [attr.data-thook]=\"'dialog-' + (_buttons?.positive || 'positive')\"\n          (click)=\"onAction($event, 'positive')\"\n          (keydown.enter)=\"onAction($event, 'positive')\"\n          *ngIf=\"_buttons && _buttons.positive\"\n        >\n          {{ t(_buttons.positive) }}\n        </button>\n      </footer>\n    </div>\n\n    <div\n      class=\"nggv-backdrop\"\n      data-thook=\"slideout-backdrop\"\n      (click)=\"close()\"\n    ></div>\n  </div>\n</ng-container>\n", styles: [":host{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2);--gds-z-index-deep: -9999;--gds-z-index-dropdown-backdrop: 990;--gds-z-index-datepicker: 995;--gds-z-index-dropdown: 995;--gds-z-index-sticky: 1020;--gds-z-index-fixed: 1030;--gds-z-index-modal-backdrop: 1040;--gds-z-index-modal: 1050;--gds-z-index-popover: 1060;--gds-z-index-tooltip: 1070;--gds-z-index-top: 9999;--gds-sys-shape-corner-none: 0;--gds-sys-shape-corner-small: .125rem;--gds-sys-shape-corner-medium: .25rem;--gds-sys-shape-corner-round: 50%}:host .gds-slide-out{background:var(--gds-sys-color-background-primary);display:flex;flex-direction:column;box-shadow:var(--gds-sys-color-background-primary);position:absolute;width:100%;z-index:var(--gds-z-index-modal)}:host .gds-slide-out>.header,:host .gds-slide-out>header{padding:1rem;border-bottom:solid 1px var(--gds-sys-color-base-600);--border-color: var(--gds-sys-color-base-600);display:inline-flex;justify-content:space-between;align-items:center;width:100%}:host .gds-slide-out>.header h3,:host .gds-slide-out>.header .h3,:host .gds-slide-out>header h3,:host .gds-slide-out>header .h3{margin-bottom:0;margin-top:0}:host .gds-slide-out>.header h3+.close,:host .gds-slide-out>.header .h3+.close,:host .gds-slide-out>header h3+.close,:host .gds-slide-out>header .h3+.close{margin:-7px;min-width:2rem}:host .gds-slide-out>.body{padding:1rem;overflow:auto;width:100%}:host .gds-slide-out>.body p{margin-bottom:0;margin-top:0}:host .gds-slide-out>.footer,:host .gds-slide-out>footer{padding:1rem;width:100%}@media(min-width:36em){:host .gds-slide-out>.footer,:host .gds-slide-out>footer{display:flex;justify-content:flex-end}}@media(max-width:35.98em){:host .gds-slide-out>.footer button+button,:host .gds-slide-out>.footer button+.button,:host .gds-slide-out>.footer .button+button,:host .gds-slide-out>.footer .button+.button,:host .gds-slide-out>footer button+button,:host .gds-slide-out>footer button+.button,:host .gds-slide-out>footer .button+button,:host .gds-slide-out>footer .button+.button{margin-top:.75rem}}@media(min-width:36em){:host .gds-slide-out>.footer button+button,:host .gds-slide-out>.footer button+.button,:host .gds-slide-out>.footer .button+button,:host .gds-slide-out>.footer .button+.button,:host .gds-slide-out>footer button+button,:host .gds-slide-out>footer button+.button,:host .gds-slide-out>footer .button+button,:host .gds-slide-out>footer .button+.button{margin-left:.75rem}}:host .gds-slide-out{position:fixed;height:100dvh;max-width:512px;min-height:-webkit-fill-available;min-height:stretch;right:0;top:0;transition:transform .35s cubic-bezier(.33,1,.68,1);transform:translate(100%)}:host .gds-slide-out.is-entering,:host .gds-slide-out.entered{transform:translate(0)}:host .gds-slide-out.is-exiting{transform:translate(100%)}:host .gds-slide-out.large{max-width:720px}:host .gds-slide-out>.body{flex:1 0}:host .gds-slide-out.left{left:0}:host .gds-slide-out.gds-slide-out--768{max-width:48rem}:host .gds-slide-out.gds-slide-out--960{max-width:60rem}:host .gds-slide-out.gds-slide-out--768 header,:host .gds-slide-out.gds-slide-out--960 header{padding:1.5rem 2rem 1rem}:host .gds-slide-out.gds-slide-out--768 .body,:host .gds-slide-out.gds-slide-out--960 .body{padding:2rem 2rem 1rem}:host .gds-slide-out.gds-slide-out--768 footer,:host .gds-slide-out.gds-slide-out--960 footer{padding:1rem 2rem 2rem}:host .gds-slide-out{z-index:1050;overflow-y:auto}:host .gds-slide-out.auto-width{width:auto;max-width:initial}:host .hide-if-empty:empty{display:none}:host .nggv-backdrop{background:#00000080;inset:0;position:fixed;z-index:var(--gds-z-index-modal-backdrop);display:block;transition:opacity .5s cubic-bezier(.33,1,.68,1)}:host .nggv-backdrop--transparent{opacity:0}:host .nggv-backdrop--transparent.entered,:host .nggv-backdrop--transparent.is-entering{opacity:1}:host .nggv-backdrop--transparent.is-exiting{opacity:0}:host .gds-slide-out__content{padding:1rem;overflow:auto;width:100%}:host .gds-slide-out__content p{margin-bottom:0;margin-top:0}:host .gds-slide-out__content{overflow:unset}:host .modal-dialog__actions,:host .gds-slide-out__header,:host .modal-body,:host .gds-slide-out__content{box-sizing:border-box}:host .modal-slide-out__heading{padding:1rem;border-bottom:solid 1px var(--gds-sys-color-base-600);--border-color: var(--gds-sys-color-base-600);display:inline-flex;justify-content:space-between;align-items:center;width:100%}:host .modal-slide-out__heading h3,:host .modal-slide-out__heading .h3{margin-bottom:0;margin-top:0}:host .modal-slide-out__heading h3+.close,:host .modal-slide-out__heading .h3+.close{margin:-7px;min-width:2rem}:host .gds-close{background-color:transparent;font-size:0;background:transparent;border:0;border-radius:50%;content:\"\";cursor:pointer;display:flex;font-family:inherit;height:2rem;position:relative;width:2rem;padding:0}@media(hover:none)and (pointer:coarse){:host .gds-close:not(:disabled):not(.disabled){padding:.375rem;height:2.75rem;width:2.75rem}:host .gds-close:not(:disabled):not(.disabled)>i{background:var(--gds-sys-color-base-200);height:2rem;width:2rem;border-radius:50%;position:relative;--color: var(--gds-sys-color-text-primary)}:host .gds-close:not(:disabled):not(.disabled)>div:after,:host .gds-close:not(:disabled):not(.disabled)>div:before{height:.789375rem;width:.130625rem;top:.625rem}}:host .gds-close:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-close:focus,:host .gds-close:focus-visible i{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .gds-close>i{border-radius:var(--gds-sys-shape-corner-round);display:block;width:100%;height:100%}:host .gds-close>i:after,:host .gds-close>i:before{background:var(--gds-sys-color-text-primary);content:\"\";display:block;height:.789375rem;width:.130625rem;border-radius:.5px;left:calc(50% - .0625rem);position:absolute;top:.625rem}:host .gds-close>i:after{transform:rotate(45deg)}:host .gds-close>i:before{transform:rotate(-45deg)}:host .gds-close>svg path{fill:var(--gds-sys-color-text-primary)}@media(min-width:48em){:host .gds-close:not(:disabled,.disabled):hover>i{background:color-mix(in srgb,var(--gds-sys-color-text-primary) 10%,transparent)}:host .gds-close:not(:disabled,.disabled):hover:active>i{background:color-mix(in srgb,var(--gds-sys-color-text-primary) 20%,transparent)}}:host .modal-dialog__actions button{background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:.25rem;border:solid 1px var(--gds-sys-color-base-600);font-weight:500}:host .modal-dialog__actions button:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions button:focus,:host .modal-dialog__actions button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .modal-dialog__actions button{min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center}@media(max-width:35.98em){:host .modal-dialog__actions button{min-width:100%}}@media screen and (-ms-high-contrast:active){:host .modal-dialog__actions button{border:2px solid currentcolor}}:host .modal-dialog__actions button.small{min-height:2rem;height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host .modal-dialog__actions button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .modal-dialog__actions button{font-size:1rem;font-family:inherit}:host .modal-dialog__actions .primary{transition:border var(--gds-sys-transition)}:host .modal-dialog__actions .primary:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-dark-blue-1);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-dark-blue-1);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-dark-blue-1)}:host .modal-dialog__actions .primary[aria-selected=true],:host .modal-dialog__actions .primary:active,:host .modal-dialog__actions .primary.active,:host .modal-dialog__actions .primary.active:hover,:host .modal-dialog__actions .primary:active:hover{background:var(--gds-sys-color-dark-blue-2);color:var(--gds-sys-color-text-white);--background: $bg;--color: $color;border-color:var(--gds-sys-color-dark-blue-2)}:host .modal-dialog__actions .primary{background:var(--gds-sys-color-dark-blue-2);border-color:var(--gds-sys-color-dark-blue-2);color:var(--gds-sys-color-text-white);--color: var(--gds-sys-color-text-white)}:host .modal-dialog__actions .primary:disabled,:host .modal-dialog__actions .primary.disabled,:host .modal-dialog__actions .primary[aria-disabled=true]{background:var(--gds-sys-color-base-300)!important;color:var(--gds-sys-color-text-disabled)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host .modal-dialog__actions .primary:disabled::placeholder,:host .modal-dialog__actions .primary.disabled::placeholder,:host .modal-dialog__actions .primary[aria-disabled=true]::placeholder{color:var(--gds-sys-color-text-disabled)}:host .modal-dialog__actions .secondary:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions .secondary:focus,:host .modal-dialog__actions .secondary:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .modal-dialog__actions .secondary{transition:border var(--gds-sys-transition)}:host .modal-dialog__actions .secondary:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-dark-blue-1);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-dark-blue-1);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-dark-blue-1)}:host .modal-dialog__actions .secondary[aria-selected=true],:host .modal-dialog__actions .secondary:active,:host .modal-dialog__actions .secondary.active,:host .modal-dialog__actions .secondary.active:hover,:host .modal-dialog__actions .secondary:active:hover{background:var(--gds-sys-color-dark-blue-2);color:var(--gds-sys-color-text-white);--background: $bg;--color: $color;border-color:var(--gds-sys-color-dark-blue-2)}:host .modal-dialog__actions .secondary{background:transparent;border-color:var(--gds-sys-color-dark-blue-2);color:var(--gds-sys-color-dark-blue-2);--color: var(--gds-sys-color-dark-blue-2)}:host .modal-dialog__actions .secondary:disabled,:host .modal-dialog__actions .secondary.disabled,:host .modal-dialog__actions .secondary[aria-disabled=true]{background:var(--gds-sys-color-base-300)!important;color:var(--gds-sys-color-text-disabled)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host .modal-dialog__actions .secondary:disabled::placeholder,:host .modal-dialog__actions .secondary.disabled::placeholder,:host .modal-dialog__actions .secondary[aria-disabled=true]::placeholder{color:var(--gds-sys-color-text-disabled)}:host .modal-dialog__actions .danger{color:var(--gds-sys-color-dark-red-1);--color: var(--gds-sys-color-dark-red-1);border-color:transparent;transition:border var(--gds-sys-transition)}:host .modal-dialog__actions .danger:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-dark-red-1);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-dark-red-1);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-dark-red-1)}:host .modal-dialog__actions .danger[aria-selected=true],:host .modal-dialog__actions .danger:active,:host .modal-dialog__actions .danger.active,:host .modal-dialog__actions .danger.active:hover,:host .modal-dialog__actions .danger:active:hover{background:var(--gds-sys-color-dark-red-1);color:var(--gds-sys-color-text-white);--background: $bg;--color: $color;border-color:var(--gds-sys-color-dark-red-1)}:host .modal-dialog__actions .danger[aria-selected]:hover,:host .modal-dialog__actions .danger.active:hover,:host .modal-dialog__actions .danger:active:hover{opacity:.9}:host .modal-dialog__actions .danger:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions .danger:focus,:host .modal-dialog__actions .danger:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host #sdv-modal-body{flex:1}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { slideOutRef: [{
                 type: ViewChild,
                 args: ['slideOut']