@sebgroup/green-angular 4.6.6 → 4.6.7

package/fesm2022/sebgroup-green-angular-src-v-angular-i18n.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"sebgroup-green-angular-src-v-angular-i18n.mjs","sources":["../../../../libs/angular/src/v-angular/i18n/i18n.module.ts","../../../../libs/angular/src/v-angular/i18n/i18n.test.module.ts","../../../../libs/angular/src/v-angular/i18n/sebgroup-green-angular-src-v-angular-i18n.ts"],"sourcesContent":["import { Inject, Injectable, isDevMode, NgModule } from '@angular/core'\nimport {\n  HashMap,\n  provideTransloco,\n  provideTranslocoMissingHandler,\n  TRANSLOCO_TRANSPILER,\n  TranslocoLoader,\n  TranslocoMissingHandler,\n  TranslocoMissingHandlerData,\n  TranslocoModule,\n  TranslocoTranspiler,\n} from '@ngneat/transloco'\nimport { delay, lastValueFrom, of } from 'rxjs'\n\nimport defaultLang from './i18n.json'\n\n@Injectable()\nexport class NgvMissingHandler implements TranslocoMissingHandler {\n  constructor(\n    @Inject(TRANSLOCO_TRANSPILER) private transpiler: TranslocoTranspiler,\n  ) {}\n  handle(key: string, _: TranslocoMissingHandlerData, params: HashMap) {\n    const keyWithoutLocale = key.charAt(2) === '.' ? key.substring(3) : key\n    const withoutScope = keyWithoutLocale.replace(\n      /^((?:\\w+)(?<!label|heading|button|alt|link|title|href|fieldhelp|error|text|image|list)(?:\\.))/,\n      '',\n    )\n    const transpiledKey = this.transpiler.transpile(\n      defaultLang[keyWithoutLocale as keyof typeof defaultLang],\n      params,\n      {},\n      keyWithoutLocale,\n    )\n    return transpiledKey || withoutScope\n  }\n}\n\nconst en = {\n  'error.fieldinputmask': 'Invalid value pattern',\n  'error.fieldrequired': 'Field must have content',\n  'error.fieldmaxlength':\n    'Field content should not be longer than {{requiredLength}} characters',\n  'label.defaultlabel': 'Label',\n  'label.maxlength': 'characters left',\n  'label.optional': 'Optional',\n}\n\nconst sv = {\n  'error.fieldinputmask': 'Icke giltigt tecken mönster',\n  'error.fieldrequired': 'Fältet får inte lämnas tomt',\n  'error.fieldmaxlength':\n    'Fältinnehållet måste vara längre än {{requiredLength}} tecken',\n  'label.maxlength': 'tecken kvar',\n}\nclass TranslocoInlineLoader implements TranslocoLoader {\n  getTranslation(lang: string) {\n    if (lang === 'sv') {\n      return lastValueFrom(of(sv).pipe(delay(1500)))\n    }\n    return lastValueFrom(of(en).pipe(delay(500)))\n  }\n}\n\n@NgModule({\n  providers: [\n    provideTransloco({\n      config: {\n        availableLangs: ['en', 'sv'],\n        defaultLang: 'en',\n        // Remove this option if your application doesn't support changing language in runtime.\n        reRenderOnLangChange: true,\n        prodMode: !isDevMode(),\n      },\n      loader: TranslocoInlineLoader,\n    }),\n    provideTranslocoMissingHandler(NgvMissingHandler),\n  ],\n  exports: [TranslocoModule],\n})\nexport class NgvI18nModule {}\n","import { CommonModule } from '@angular/common'\nimport { NgModule, Pipe, PipeTransform } from '@angular/core'\nimport {\n  HashMap,\n  Translation,\n  TRANSLOCO_FALLBACK_STRATEGY,\n  TRANSLOCO_INTERCEPTOR,\n  TRANSLOCO_MISSING_HANDLER,\n  TRANSLOCO_TRANSPILER,\n  TranslocoConfig,\n  TranslocoFallbackStrategy,\n  TranslocoInterceptor,\n  TranslocoMissingHandler,\n  TranslocoTranspilerFunction,\n} from '@ngneat/transloco'\n\n@Pipe({ name: 'transloco' })\nexport class TranslocoMockPipe implements PipeTransform {\n  transform = (value: number): number => value\n}\n\nexport class TranslocoMockTranspiler implements TranslocoTranspilerFunction {\n  transpile = (..._args: string[]) => ''\n}\n\nexport class TranslocoMockMissingHandler implements TranslocoMissingHandler {\n  handle = (key: string, _: TranslocoConfig, _params: HashMap) => key\n}\n\nexport class TranslocoMockStrategy implements TranslocoFallbackStrategy {\n  getNextLangs = (_failedLang: string): any => ''\n}\n\nexport class TranslocoMockInterceptor implements TranslocoInterceptor {\n  preSaveTranslation(translation: Translation, _lang: string): Translation {\n    return translation\n  }\n\n  preSaveTranslationKey(_key: string, value: string, _lang: string): string {\n    return value\n  }\n}\n\n@NgModule({\n  imports: [CommonModule],\n  declarations: [TranslocoMockPipe],\n  exports: [TranslocoMockPipe],\n  providers: [\n    {\n      provide: TRANSLOCO_TRANSPILER,\n      useClass: TranslocoMockTranspiler,\n    },\n    {\n      provide: TRANSLOCO_INTERCEPTOR,\n      useClass: TranslocoMockInterceptor,\n    },\n    {\n      provide: TRANSLOCO_FALLBACK_STRATEGY,\n      useClass: TranslocoMockStrategy,\n    },\n    {\n      provide: TRANSLOCO_MISSING_HANDLER,\n      useClass: TranslocoMockMissingHandler,\n      deps: [TRANSLOCO_TRANSPILER],\n    },\n  ],\n})\nexport class NgvI18nTestModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"sebgroup-green-angular-src-v-angular-i18n.mjs","sources":["../../../../libs/angular/src/v-angular/i18n/i18n.module.ts","../../../../libs/angular/src/v-angular/i18n/i18n.test.module.ts","../../../../libs/angular/src/v-angular/i18n/sebgroup-green-angular-src-v-angular-i18n.ts"],"sourcesContent":["import { Inject, Injectable, isDevMode, NgModule } from '@angular/core'\nimport {\n  HashMap,\n  provideTransloco,\n  provideTranslocoMissingHandler,\n  TRANSLOCO_TRANSPILER,\n  TranslocoLoader,\n  TranslocoMissingHandler,\n  TranslocoMissingHandlerData,\n  TranslocoModule,\n  TranslocoTranspiler,\n} from '@jsverse/transloco';\nimport { delay, lastValueFrom, of } from 'rxjs'\n\nimport defaultLang from './i18n.json'\n\n@Injectable()\nexport class NgvMissingHandler implements TranslocoMissingHandler {\n  constructor(\n    @Inject(TRANSLOCO_TRANSPILER) private transpiler: TranslocoTranspiler,\n  ) {}\n  handle(key: string, _: TranslocoMissingHandlerData, params: HashMap) {\n    const keyWithoutLocale = key.charAt(2) === '.' ? key.substring(3) : key\n    const withoutScope = keyWithoutLocale.replace(\n      /^((?:\\w+)(?<!label|heading|button|alt|link|title|href|fieldhelp|error|text|image|list)(?:\\.))/,\n      '',\n    )\n    const transpileParams = {\n      value: defaultLang[keyWithoutLocale as keyof typeof defaultLang],\n      params,\n      translation: {},\n      key: keyWithoutLocale,\n    };\n    const transpiledKey = this.transpiler.transpile(transpileParams);\n    return transpiledKey || withoutScope\n  }\n}\n\nconst en = {\n  'error.fieldinputmask': 'Invalid value pattern',\n  'error.fieldrequired': 'Field must have content',\n  'error.fieldmaxlength':\n    'Field content should not be longer than {{requiredLength}} characters',\n  'label.defaultlabel': 'Label',\n  'label.maxlength': 'characters left',\n  'label.optional': 'Optional',\n}\n\nconst sv = {\n  'error.fieldinputmask': 'Icke giltigt tecken mönster',\n  'error.fieldrequired': 'Fältet får inte lämnas tomt',\n  'error.fieldmaxlength':\n    'Fältinnehållet måste vara längre än {{requiredLength}} tecken',\n  'label.maxlength': 'tecken kvar',\n}\nclass TranslocoInlineLoader implements TranslocoLoader {\n  getTranslation(lang: string) {\n    if (lang === 'sv') {\n      return lastValueFrom(of(sv).pipe(delay(1500)))\n    }\n    return lastValueFrom(of(en).pipe(delay(500)))\n  }\n}\n\n@NgModule({\n  providers: [\n    provideTransloco({\n      config: {\n        availableLangs: ['en', 'sv'],\n        defaultLang: 'en',\n        // Remove this option if your application doesn't support changing language in runtime.\n        reRenderOnLangChange: true,\n        prodMode: !isDevMode(),\n      },\n      loader: TranslocoInlineLoader,\n    }),\n    provideTranslocoMissingHandler(NgvMissingHandler),\n  ],\n  exports: [TranslocoModule],\n})\nexport class NgvI18nModule {}\n","import { CommonModule } from '@angular/common'\nimport { NgModule, Pipe, PipeTransform } from '@angular/core'\nimport {\n  HashMap,\n  Translation,\n  TRANSLOCO_FALLBACK_STRATEGY,\n  TRANSLOCO_INTERCEPTOR,\n  TRANSLOCO_MISSING_HANDLER,\n  TRANSLOCO_TRANSPILER,\n  TranslocoConfig,\n  TranslocoFallbackStrategy,\n  TranslocoInterceptor,\n  TranslocoMissingHandler,\n  TranslocoTranspilerFunction,\n} from '@jsverse/transloco'\n\n@Pipe({ name: 'transloco' })\nexport class TranslocoMockPipe implements PipeTransform {\n  transform = (value: number): number => value\n}\n\nexport class TranslocoMockTranspiler implements TranslocoTranspilerFunction {\n  transpile = (..._args: string[]) => ''\n}\n\nexport class TranslocoMockMissingHandler implements TranslocoMissingHandler {\n  handle = (key: string, _: TranslocoConfig, _params: HashMap) => key\n}\n\nexport class TranslocoMockStrategy implements TranslocoFallbackStrategy {\n  getNextLangs = (_failedLang: string): any => ''\n}\n\nexport class TranslocoMockInterceptor implements TranslocoInterceptor {\n  preSaveTranslation(translation: Translation, _lang: string): Translation {\n    return translation\n  }\n\n  preSaveTranslationKey(_key: string, value: string, _lang: string): string {\n    return value\n  }\n}\n\n@NgModule({\n  imports: [CommonModule],\n  declarations: [TranslocoMockPipe],\n  exports: [TranslocoMockPipe],\n  providers: [\n    {\n      provide: TRANSLOCO_TRANSPILER,\n      useClass: TranslocoMockTranspiler,\n    },\n    {\n      provide: TRANSLOCO_INTERCEPTOR,\n      useClass: TranslocoMockInterceptor,\n    },\n    {\n      provide: TRANSLOCO_FALLBACK_STRATEGY,\n      useClass: TranslocoMockStrategy,\n    },\n    {\n      provide: TRANSLOCO_MISSING_HANDLER,\n      useClass: TranslocoMockMissingHandler,\n      deps: [TRANSLOCO_TRANSPILER],\n    },\n  ],\n})\nexport class NgvI18nTestModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/sebgroup-green-angular-src-v-angular-input.mjs

@@ -2,8 +2,8 @@ import * as i0 from '@angular/core';
 import { EventEmitter, Component, Self, Optional, Inject, HostBinding, Input, Output, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
-import * as i3 from '@ngneat/transloco';
-import { TRANSLOCO_SCOPE } from '@ngneat/transloco';
+import * as i3 from '@jsverse/transloco';
+import { TRANSLOCO_SCOPE } from '@jsverse/transloco';
 import { Subject } from 'rxjs';
 import { takeUntil, debounceTime } from 'rxjs/operators';
 import { NgvBaseControlValueAccessorComponent } from '@sebgroup/green-angular/src/v-angular/base-control-value-accessor';
@@ -165,7 +165,7 @@ class NgvInputComponent extends NgvBaseControlValueAccessorComponent {
         this.inputChange$.next(this.state);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvInputComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NgvInputComponent, selector: "nggv-input", inputs: { 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", badgeText: "badgeText", inputMask: "inputMask" }, outputs: { nggvInput: "nggvInput" }, host: { properties: { "class": "this.class", "attr.data-thook": "this.thook" } }, usesInheritance: true, ngImport: i0, template: "<!-- LABEL -->\n<label\n  [id]=\"id + '-label'\"\n  class=\"sdv-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=\"sdv-field-label--optional\"\n      >\n        ({{ t('label.optional') }})\n      </span>\n    </ng-container>\n  </ng-template>\n</label>\n\n<!-- DESCRIPTION -->\n<div class=\"form-info description hide-if-empty\">\n  {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container *ngIf=\"locked\">\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-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=\"sdv-field\"\n        [attr.type]=\"type\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required\"\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        [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=\"sdv-field\"\n        autocomplete=\"off\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required\"\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        [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=\"form-info form-info--error\"\n      [attr.id]=\"id + '-message'\"\n      *ngIf=\"invalid && (error || ngControl?.invalid)\"\n    >\n      <span *ngIf=\"error; else errorsRef\">{{ error }}</span>\n      <ng-template #errorsRef>\n        <span *ngIf=\"firstError as error\">\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=\"form-info\"\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-form-item{display:flex;flex-direction:column;max-width:100%;position:relative;width:100%;z-index:0}:host.gds-form-item:not(:last-child){margin-bottom:1.5rem}:host.gds-form-item .gds-form-item__header{display:flex}:host.gds-form-item .gds-form-item__header .form-info{font-weight:400}:host.gds-form-item .gds-form-item__header button.icon.small{margin-top:-.5rem;margin-right:-.5rem}:host.gds-form-item .gds-form-item__labels{flex:1;margin-bottom:.5rem}:host.gds-form-item .gds-form-item__labels .form-info{margin-bottom:0}:host.gds-form-item .gds-form-item__labels .form-info a:link:not(.button,[aria-disabled]){color:#0062bc}:host.gds-form-item .gds-form-item__labels>*{width:100%;display:block}:host.gds-form-item .gds-form-item__expandable-info{overflow:hidden;font-size:.875rem;line-height:1.25rem;transition:height .3s cubic-bezier(.23,1,.32,1)}:host.gds-form-item .gds-form-item__expandable-info>div{padding-bottom:.5rem}:host.gds-form-item .gds-form-item__backdrop{position:absolute;inset:0;background:var(--gds-ref-pallet-base100);border-radius:2px;z-index:-1;margin:-1rem;opacity:0;transition:all .3s cubic-bezier(.23,1,.32,1);border:1px solid transparent}@media (prefers-reduced-motion: reduce){:host.gds-form-item .gds-form-item__backdrop{transition:none}}:host.gds-form-item:has([aria-expanded=true]) .gds-form-item__backdrop{opacity:1;border-radius:.25rem;border-color:var(--gds-ref-pallet-base600)}:host.gds-form-item .gds-form-item__footer:not(:empty){margin-top:.5rem;display:flex;column-gap:1rem}:host.gds-form-item .gds-form-item__footer:not(:empty)>span{font-weight:500}:host .hide-if-empty:empty{display:none}:host input:not([type]),:host input[type=date],:host input[type=datetime],:host input[type=datetime-local],:host input[type=email],:host input[type=month],:host input[type=number],:host input[type=password],:host input[type=search],:host input[type=tel],:host input[type=text],:host input[type=time],:host input[type=url],:host input[type=week]{padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);background-color:var(--sg-form-control-bg);color:var(--sg-text-primary);min-height:2.75rem;display:flex;align-items:center;justify-content:center}:host input:not([type]):focus:not(:focus-visible),:host input[type=date]:focus:not(:focus-visible),:host input[type=datetime]:focus:not(:focus-visible),:host input[type=datetime-local]:focus:not(:focus-visible),:host input[type=email]:focus:not(:focus-visible),:host input[type=month]:focus:not(:focus-visible),:host input[type=number]:focus:not(:focus-visible),:host input[type=password]:focus:not(:focus-visible),:host input[type=search]:focus:not(:focus-visible),:host input[type=tel]:focus:not(:focus-visible),:host input[type=text]:focus:not(:focus-visible),:host input[type=time]:focus:not(:focus-visible),:host input[type=url]:focus:not(:focus-visible),:host input[type=week]:focus:not(:focus-visible){box-shadow:none;outline:0}:host input:not([type]):focus,:host input:not([type]):focus-visible,:host input[type=date]:focus,:host input[type=date]:focus-visible,:host input[type=datetime]:focus,:host input[type=datetime]:focus-visible,:host input[type=datetime-local]:focus,:host input[type=datetime-local]:focus-visible,:host input[type=email]:focus,:host input[type=email]:focus-visible,:host input[type=month]:focus,:host input[type=month]:focus-visible,:host input[type=number]:focus,:host input[type=number]:focus-visible,:host input[type=password]:focus,:host input[type=password]:focus-visible,:host input[type=search]:focus,:host input[type=search]:focus-visible,:host input[type=tel]:focus,:host input[type=tel]:focus-visible,:host input[type=text]:focus,:host input[type=text]:focus-visible,:host input[type=time]:focus,:host input[type=time]:focus-visible,:host input[type=url]:focus,:host input[type=url]:focus-visible,:host input[type=week]:focus,:host input[type=week]:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host input:not([type]).small,:host input[type=date].small,:host input[type=datetime].small,:host input[type=datetime-local].small,:host input[type=email].small,:host input[type=month].small,:host input[type=number].small,:host input[type=password].small,:host input[type=search].small,:host input[type=tel].small,:host input[type=text].small,:host input[type=time].small,:host input[type=url].small,:host input[type=week].small{min-height:2rem;padding:.25rem .75rem;line-height:1rem}@media screen and (-ms-high-contrast: active){:host input:not([type]),:host input[type=date],:host input[type=datetime],:host input[type=datetime-local],:host input[type=email],:host input[type=month],:host input[type=number],:host input[type=password],:host input[type=search],:host input[type=tel],:host input[type=text],:host input[type=time],:host input[type=url],:host input[type=week]{border:2px solid currentcolor}}:host input:not([type]):disabled,:host input:not([type]).disabled,:host input:not([type])[aria-disabled=true],:host input[type=date]:disabled,:host input[type=date].disabled,:host input[type=date][aria-disabled=true],:host input[type=datetime]:disabled,:host input[type=datetime].disabled,:host input[type=datetime][aria-disabled=true],:host input[type=datetime-local]:disabled,:host input[type=datetime-local].disabled,:host input[type=datetime-local][aria-disabled=true],:host input[type=email]:disabled,:host input[type=email].disabled,:host input[type=email][aria-disabled=true],:host input[type=month]:disabled,:host input[type=month].disabled,:host input[type=month][aria-disabled=true],:host input[type=number]:disabled,:host input[type=number].disabled,:host input[type=number][aria-disabled=true],:host input[type=password]:disabled,:host input[type=password].disabled,:host input[type=password][aria-disabled=true],:host input[type=search]:disabled,:host input[type=search].disabled,:host input[type=search][aria-disabled=true],:host input[type=tel]:disabled,:host input[type=tel].disabled,:host input[type=tel][aria-disabled=true],:host input[type=text]:disabled,:host input[type=text].disabled,:host input[type=text][aria-disabled=true],:host input[type=time]:disabled,:host input[type=time].disabled,:host input[type=time][aria-disabled=true],:host input[type=url]:disabled,:host input[type=url].disabled,:host input[type=url][aria-disabled=true],:host input[type=week]:disabled,:host input[type=week].disabled,:host input[type=week][aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host input:not([type]):disabled::placeholder,:host input:not([type]).disabled::placeholder,:host input:not([type])[aria-disabled=true]::placeholder,:host input[type=date]:disabled::placeholder,:host input[type=date].disabled::placeholder,:host input[type=date][aria-disabled=true]::placeholder,:host input[type=datetime]:disabled::placeholder,:host input[type=datetime].disabled::placeholder,:host input[type=datetime][aria-disabled=true]::placeholder,:host input[type=datetime-local]:disabled::placeholder,:host input[type=datetime-local].disabled::placeholder,:host input[type=datetime-local][aria-disabled=true]::placeholder,:host input[type=email]:disabled::placeholder,:host input[type=email].disabled::placeholder,:host input[type=email][aria-disabled=true]::placeholder,:host input[type=month]:disabled::placeholder,:host input[type=month].disabled::placeholder,:host input[type=month][aria-disabled=true]::placeholder,:host input[type=number]:disabled::placeholder,:host input[type=number].disabled::placeholder,:host input[type=number][aria-disabled=true]::placeholder,:host input[type=password]:disabled::placeholder,:host input[type=password].disabled::placeholder,:host input[type=password][aria-disabled=true]::placeholder,:host input[type=search]:disabled::placeholder,:host input[type=search].disabled::placeholder,:host input[type=search][aria-disabled=true]::placeholder,:host input[type=tel]:disabled::placeholder,:host input[type=tel].disabled::placeholder,:host input[type=tel][aria-disabled=true]::placeholder,:host input[type=text]:disabled::placeholder,:host input[type=text].disabled::placeholder,:host input[type=text][aria-disabled=true]::placeholder,:host input[type=time]:disabled::placeholder,:host input[type=time].disabled::placeholder,:host input[type=time][aria-disabled=true]::placeholder,:host input[type=url]:disabled::placeholder,:host input[type=url].disabled::placeholder,:host input[type=url][aria-disabled=true]::placeholder,:host input[type=week]:disabled::placeholder,:host input[type=week].disabled::placeholder,:host input[type=week][aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host input:not([type]):hover,:host input[type=date]:hover,:host input[type=datetime]:hover,:host input[type=datetime-local]:hover,:host input[type=email]:hover,:host input[type=month]:hover,:host input[type=number]:hover,:host input[type=password]:hover,:host input[type=search]:hover,:host input[type=tel]:hover,:host input[type=text]:hover,:host input[type=time]:hover,:host input[type=url]:hover,:host input[type=week]:hover{background-color:var(--gds-ref-pallet-base100)}:host input[type=number]{-moz-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%}:host .gds-input-wrapper{display:flex;flex-direction:column;position:relative;transition:all .2s ease-in-out,outline-offset 0s,outline-width 0s}: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:var(--intent-danger-background);opacity:1}.is-invalid :host .gds-input-wrapper:before{background:var(--intent-danger-background);clip-path:inset(1px 0 0 0)}:host label:is(label),:host .label:is(label),:host legend:is(label){margin-bottom:0}:host label.form-control,:host .label.form-control,:host legend.form-control{width:-moz-fit-content;width:fit-content}@supports (-moz-appearance: none){:host label.form-control:focus:not(:focus-visible),:host .label.form-control:focus:not(:focus-visible),:host legend.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host label.form-control:focus,:host label.form-control:focus-within,:host .label.form-control:focus,:host .label.form-control:focus-within,:host legend.form-control:focus,:host legend.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host label:not(.form-control),:host .label:not(.form-control),:host legend:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host label+input,:host label+textarea,fieldset :host label+div,:host label+button,:host label+.group-stepper,:host label+.stepper-wrapper,:host label+.group,:host .label+input,:host .label+textarea,fieldset :host .label+div,:host .label+button,:host .label+.group-stepper,:host .label+.stepper-wrapper,:host .label+.group,:host legend+input,:host legend+textarea,fieldset :host legend+div,:host legend+button,:host legend+.group-stepper,:host legend+.stepper-wrapper,:host legend+.group{margin-top:.5rem}:host label+.form-info,:host .label+.form-info,:host legend+.form-info{margin-bottom:.5rem}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%}:host .gds-form-item__footer .form-info{font-weight:500}:host .gds-form-item__footer .form-info--error{color:var(--intent-danger-background, #9f000a)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i4.NgvInputMaskDirective, selector: "[nggvInputMask]", inputs: ["nggvInputMask"] }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.CharacterCountdownDirective, selector: "[nggvCharacterCountdown]", inputs: ["nggvCharacterCountdown", "nggvCharacterCountdownCurrentLength"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.InputMaskFormatPipe, name: "nggvInputMaskFormat" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NgvInputComponent, selector: "nggv-input", inputs: { 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", badgeText: "badgeText", inputMask: "inputMask" }, outputs: { nggvInput: "nggvInput" }, host: { properties: { "class": "this.class", "attr.data-thook": "this.thook" } }, usesInheritance: true, ngImport: i0, template: "<!-- LABEL -->\n<label\n  [id]=\"id + '-label'\"\n  class=\"sdv-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=\"sdv-field-label--optional\"\n      >\n        ({{ t('label.optional') }})\n      </span>\n    </ng-container>\n  </ng-template>\n</label>\n\n<!-- DESCRIPTION -->\n<div class=\"form-info description hide-if-empty\">\n  {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container *ngIf=\"locked\">\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-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=\"sdv-field\"\n        [attr.type]=\"type\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required\"\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        [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=\"sdv-field\"\n        autocomplete=\"off\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required\"\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        [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=\"form-info form-info--error\"\n      [attr.id]=\"id + '-message'\"\n      *ngIf=\"invalid && (error || ngControl?.invalid)\"\n    >\n      <span *ngIf=\"error; else errorsRef\">{{ error }}</span>\n      <ng-template #errorsRef>\n        <span *ngIf=\"firstError as error\">\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=\"form-info\"\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-form-item{display:flex;flex-direction:column;max-width:100%;position:relative;width:100%;z-index:0}:host.gds-form-item:not(:last-child){margin-bottom:1.5rem}:host.gds-form-item .gds-form-item__header{display:flex}:host.gds-form-item .gds-form-item__header .form-info{font-weight:400}:host.gds-form-item .gds-form-item__header button.icon.small{margin-top:-.5rem;margin-right:-.5rem}:host.gds-form-item .gds-form-item__labels{flex:1;margin-bottom:.5rem}:host.gds-form-item .gds-form-item__labels .form-info{margin-bottom:0}:host.gds-form-item .gds-form-item__labels .form-info a:link:not(.button,[aria-disabled]){color:#0062bc}:host.gds-form-item .gds-form-item__labels>*{width:100%;display:block}:host.gds-form-item .gds-form-item__expandable-info{overflow:hidden;font-size:.875rem;line-height:1.25rem;transition:height .3s cubic-bezier(.23,1,.32,1)}:host.gds-form-item .gds-form-item__expandable-info>div{padding-bottom:.5rem}:host.gds-form-item .gds-form-item__backdrop{position:absolute;inset:0;background:var(--gds-ref-pallet-base100);border-radius:2px;z-index:-1;margin:-1rem;opacity:0;transition:all .3s cubic-bezier(.23,1,.32,1);border:1px solid transparent}@media (prefers-reduced-motion: reduce){:host.gds-form-item .gds-form-item__backdrop{transition:none}}:host.gds-form-item:has([aria-expanded=true]) .gds-form-item__backdrop{opacity:1;border-radius:.25rem;border-color:var(--gds-ref-pallet-base600)}:host.gds-form-item .gds-form-item__footer:not(:empty){margin-top:.5rem;display:flex;column-gap:1rem}:host.gds-form-item .gds-form-item__footer:not(:empty)>span{font-weight:500}:host .hide-if-empty:empty{display:none}:host input:not([type]),:host input[type=date],:host input[type=datetime],:host input[type=datetime-local],:host input[type=email],:host input[type=month],:host input[type=number],:host input[type=password],:host input[type=search],:host input[type=tel],:host input[type=text],:host input[type=time],:host input[type=url],:host input[type=week]{padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);background-color:var(--sg-form-control-bg);color:var(--sg-text-primary);min-height:2.75rem;display:flex;align-items:center;justify-content:center}:host input:not([type]):focus:not(:focus-visible),:host input[type=date]:focus:not(:focus-visible),:host input[type=datetime]:focus:not(:focus-visible),:host input[type=datetime-local]:focus:not(:focus-visible),:host input[type=email]:focus:not(:focus-visible),:host input[type=month]:focus:not(:focus-visible),:host input[type=number]:focus:not(:focus-visible),:host input[type=password]:focus:not(:focus-visible),:host input[type=search]:focus:not(:focus-visible),:host input[type=tel]:focus:not(:focus-visible),:host input[type=text]:focus:not(:focus-visible),:host input[type=time]:focus:not(:focus-visible),:host input[type=url]:focus:not(:focus-visible),:host input[type=week]:focus:not(:focus-visible){box-shadow:none;outline:0}:host input:not([type]):focus,:host input:not([type]):focus-visible,:host input[type=date]:focus,:host input[type=date]:focus-visible,:host input[type=datetime]:focus,:host input[type=datetime]:focus-visible,:host input[type=datetime-local]:focus,:host input[type=datetime-local]:focus-visible,:host input[type=email]:focus,:host input[type=email]:focus-visible,:host input[type=month]:focus,:host input[type=month]:focus-visible,:host input[type=number]:focus,:host input[type=number]:focus-visible,:host input[type=password]:focus,:host input[type=password]:focus-visible,:host input[type=search]:focus,:host input[type=search]:focus-visible,:host input[type=tel]:focus,:host input[type=tel]:focus-visible,:host input[type=text]:focus,:host input[type=text]:focus-visible,:host input[type=time]:focus,:host input[type=time]:focus-visible,:host input[type=url]:focus,:host input[type=url]:focus-visible,:host input[type=week]:focus,:host input[type=week]:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host input:not([type]).small,:host input[type=date].small,:host input[type=datetime].small,:host input[type=datetime-local].small,:host input[type=email].small,:host input[type=month].small,:host input[type=number].small,:host input[type=password].small,:host input[type=search].small,:host input[type=tel].small,:host input[type=text].small,:host input[type=time].small,:host input[type=url].small,:host input[type=week].small{min-height:2rem;padding:.25rem .75rem;line-height:1rem}@media screen and (-ms-high-contrast: active){:host input:not([type]),:host input[type=date],:host input[type=datetime],:host input[type=datetime-local],:host input[type=email],:host input[type=month],:host input[type=number],:host input[type=password],:host input[type=search],:host input[type=tel],:host input[type=text],:host input[type=time],:host input[type=url],:host input[type=week]{border:2px solid currentcolor}}:host input:not([type]):disabled,:host input:not([type]).disabled,:host input:not([type])[aria-disabled=true],:host input[type=date]:disabled,:host input[type=date].disabled,:host input[type=date][aria-disabled=true],:host input[type=datetime]:disabled,:host input[type=datetime].disabled,:host input[type=datetime][aria-disabled=true],:host input[type=datetime-local]:disabled,:host input[type=datetime-local].disabled,:host input[type=datetime-local][aria-disabled=true],:host input[type=email]:disabled,:host input[type=email].disabled,:host input[type=email][aria-disabled=true],:host input[type=month]:disabled,:host input[type=month].disabled,:host input[type=month][aria-disabled=true],:host input[type=number]:disabled,:host input[type=number].disabled,:host input[type=number][aria-disabled=true],:host input[type=password]:disabled,:host input[type=password].disabled,:host input[type=password][aria-disabled=true],:host input[type=search]:disabled,:host input[type=search].disabled,:host input[type=search][aria-disabled=true],:host input[type=tel]:disabled,:host input[type=tel].disabled,:host input[type=tel][aria-disabled=true],:host input[type=text]:disabled,:host input[type=text].disabled,:host input[type=text][aria-disabled=true],:host input[type=time]:disabled,:host input[type=time].disabled,:host input[type=time][aria-disabled=true],:host input[type=url]:disabled,:host input[type=url].disabled,:host input[type=url][aria-disabled=true],:host input[type=week]:disabled,:host input[type=week].disabled,:host input[type=week][aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host input:not([type]):disabled::placeholder,:host input:not([type]).disabled::placeholder,:host input:not([type])[aria-disabled=true]::placeholder,:host input[type=date]:disabled::placeholder,:host input[type=date].disabled::placeholder,:host input[type=date][aria-disabled=true]::placeholder,:host input[type=datetime]:disabled::placeholder,:host input[type=datetime].disabled::placeholder,:host input[type=datetime][aria-disabled=true]::placeholder,:host input[type=datetime-local]:disabled::placeholder,:host input[type=datetime-local].disabled::placeholder,:host input[type=datetime-local][aria-disabled=true]::placeholder,:host input[type=email]:disabled::placeholder,:host input[type=email].disabled::placeholder,:host input[type=email][aria-disabled=true]::placeholder,:host input[type=month]:disabled::placeholder,:host input[type=month].disabled::placeholder,:host input[type=month][aria-disabled=true]::placeholder,:host input[type=number]:disabled::placeholder,:host input[type=number].disabled::placeholder,:host input[type=number][aria-disabled=true]::placeholder,:host input[type=password]:disabled::placeholder,:host input[type=password].disabled::placeholder,:host input[type=password][aria-disabled=true]::placeholder,:host input[type=search]:disabled::placeholder,:host input[type=search].disabled::placeholder,:host input[type=search][aria-disabled=true]::placeholder,:host input[type=tel]:disabled::placeholder,:host input[type=tel].disabled::placeholder,:host input[type=tel][aria-disabled=true]::placeholder,:host input[type=text]:disabled::placeholder,:host input[type=text].disabled::placeholder,:host input[type=text][aria-disabled=true]::placeholder,:host input[type=time]:disabled::placeholder,:host input[type=time].disabled::placeholder,:host input[type=time][aria-disabled=true]::placeholder,:host input[type=url]:disabled::placeholder,:host input[type=url].disabled::placeholder,:host input[type=url][aria-disabled=true]::placeholder,:host input[type=week]:disabled::placeholder,:host input[type=week].disabled::placeholder,:host input[type=week][aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host input:not([type]):hover,:host input[type=date]:hover,:host input[type=datetime]:hover,:host input[type=datetime-local]:hover,:host input[type=email]:hover,:host input[type=month]:hover,:host input[type=number]:hover,:host input[type=password]:hover,:host input[type=search]:hover,:host input[type=tel]:hover,:host input[type=text]:hover,:host input[type=time]:hover,:host input[type=url]:hover,:host input[type=week]:hover{background-color:var(--gds-ref-pallet-base100)}:host input[type=number]{-moz-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%}:host .gds-input-wrapper{display:flex;flex-direction:column;position:relative;transition:all .2s ease-in-out,outline-offset 0s,outline-width 0s}: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:var(--intent-danger-background);opacity:1}.is-invalid :host .gds-input-wrapper:before{background:var(--intent-danger-background);clip-path:inset(1px 0 0 0)}:host label:is(label),:host .label:is(label),:host legend:is(label){margin-bottom:0}:host label.form-control,:host .label.form-control,:host legend.form-control{width:-moz-fit-content;width:fit-content}@supports (-moz-appearance: none){:host label.form-control:focus:not(:focus-visible),:host .label.form-control:focus:not(:focus-visible),:host legend.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host label.form-control:focus,:host label.form-control:focus-within,:host .label.form-control:focus,:host .label.form-control:focus-within,:host legend.form-control:focus,:host legend.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host label:not(.form-control),:host .label:not(.form-control),:host legend:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host label+input,:host label+textarea,fieldset :host label+div,:host label+button,:host label+.group-stepper,:host label+.stepper-wrapper,:host label+.group,:host .label+input,:host .label+textarea,fieldset :host .label+div,:host .label+button,:host .label+.group-stepper,:host .label+.stepper-wrapper,:host .label+.group,:host legend+input,:host legend+textarea,fieldset :host legend+div,:host legend+button,:host legend+.group-stepper,:host legend+.stepper-wrapper,:host legend+.group{margin-top:.5rem}:host label+.form-info,:host .label+.form-info,:host legend+.form-info{margin-bottom:.5rem}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%}:host .gds-form-item__footer .form-info{font-weight:500}:host .gds-form-item__footer .form-info--error{color:var(--intent-danger-background, #9f000a)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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.NgvInputMaskDirective, selector: "[nggvInputMask]", inputs: ["nggvInputMask"] }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.CharacterCountdownDirective, selector: "[nggvCharacterCountdown]", inputs: ["nggvCharacterCountdown", "nggvCharacterCountdownCurrentLength"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.InputMaskFormatPipe, name: "nggvInputMaskFormat" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvInputComponent, decorators: [{
             type: Component,

package/fesm2022/sebgroup-green-angular-src-v-angular-input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"sebgroup-green-angular-src-v-angular-input.mjs","sources":["../../../../libs/angular/src/v-angular/input/input.component.ts","../../../../libs/angular/src/v-angular/input/input.component.html","../../../../libs/angular/src/v-angular/input/input.module.ts","../../../../libs/angular/src/v-angular/input/sebgroup-green-angular-src-v-angular-input.ts"],"sourcesContent":["import {\n  ChangeDetectorRef,\n  Component,\n  EventEmitter,\n  HostBinding,\n  Inject,\n  Input,\n  OnDestroy,\n  OnInit,\n  Optional,\n  Output,\n  Self,\n} from '@angular/core'\nimport { NgControl, UntypedFormControl } from '@angular/forms'\nimport { TRANSLOCO_SCOPE, TranslocoScope } from '@ngneat/transloco'\nimport { Subject } from 'rxjs'\nimport { debounceTime, takeUntil } from 'rxjs/operators'\n\nimport type { InputmaskOptions } from '@sebgroup/green-angular/src/v-angular/input-mask'\n\nimport { NgvBaseControlValueAccessorComponent } from '@sebgroup/green-angular/src/v-angular/base-control-value-accessor'\n\n/**\n * Input fields allow users to add and edit text.\n * https://designlibrary.sebgroup.com/components/component-input\n */\n@Component({\n  selector: 'nggv-input',\n  templateUrl: './input.component.html',\n  styleUrls: ['./input.component.scss'],\n})\nexport class NgvInputComponent\n  extends NgvBaseControlValueAccessorComponent\n  implements OnInit, OnDestroy\n{\n  /** Adding .gds-form-item as a class to host element */\n  @HostBinding('class') class = 'gds-form-item'\n  /** Special property used for selecting DOM elements during automated UI testing. */\n  @HostBinding('attr.data-thook') @Input() thook = 'input'\n  /** Type of input field. Should avoid types that modify field too much such as range. */\n  @Input() type = 'text'\n  /** Text shown before input has a written value. */\n  @Input() placeholder?: string\n  /** If set to \"on\", hint for form autofill feature. */\n  @Input() autocomplete = 'on'\n  /** If set to true, the value will not be editable. */\n  @Input() readonly = false\n  /** If set to true, enables the Angular template-driven email validator. */\n  @Input() email = false\n  /** Minimum value required for numeric input types. */\n  @Input() min = 0\n  /** Maximum value required for numeric input types. */\n  @Input() max = Number.MAX_SAFE_INTEGER\n  /** Incremental values that are valid for numeric input types. */\n  @Input() step = 1\n  /** Minimum length (number of characters) of value. */\n  @Input() set minLength(length: number) {\n    this._minlength = length\n  }\n  /**\n   * Minimum length (number of characters) of value.\n   * @deprecated minlength triggers angular-template-validation. Use @Input() minLength instead.\n   */\n  @Input() set minlength(length: number) {\n    this._minlength = length\n  }\n  get minlength(): number {\n    return this._minlength\n  }\n  /** Maximum length (number of characters) of value. */\n  @Input() set maxLength(length: number) {\n    this._maxlength = length\n    this.writeValue(this.state)\n  }\n  get maxlength(): number {\n    return this._maxlength\n  }\n  /**\n   * Maximum length (number of characters) of value.\n   * @deprecated maxlength triggers angular-template-validation. Use @Input() maxLength instead.\n   */\n  @Input() set maxlength(length: number) {\n    this._maxlength = length\n    this.writeValue(this.state)\n  }\n  private _maxlength = Number.MAX_SAFE_INTEGER\n\n  private _minlength = 0\n\n  /** Wether to show label that tells how many characters are still left to be entered. Will only be set if maxLength is also set */\n  private _showCharacterCountDown = true\n  @Input() set showCharacterCountdown(option: boolean) {\n    this._showCharacterCountDown = option\n  }\n  get showCharacterCountdown(): boolean {\n    return this._showCharacterCountDown && this.hasMaxLength\n  }\n\n  /** Pattern the value must match to be valid. */\n  @Input() pattern = ''\n  /** Amount of time to wait until emitting (nggvINput) event */\n  @Input() debounceTime = 500\n  /**\n   * @deprecated\n   * Text to put in badge\n   */\n  @Input() badgeText = ''\n\n  /** Settings for input mask if requested */\n  private _inputMask!: InputmaskOptions<any>\n  @Input() set inputMask(newInputMask: InputmaskOptions<any>) {\n    // Hide input field\n    this.hideInput$.next(true)\n    this.cdr.detectChanges()\n    this._inputMask = newInputMask\n\n    // Show input field to reload input-mask settings upon update\n    setTimeout(() => {\n      this.hideInput$.next(false)\n      this.cdr.detectChanges()\n    }, 200)\n  }\n  get inputMask(): InputmaskOptions<any> {\n    return this._inputMask\n  }\n\n  /** Emits every time the value of the inner input field changes, independantly of updates on the formcontroller */\n  @Output() nggvInput = new EventEmitter<any>()\n\n  private _formControl = new UntypedFormControl()\n  get control(): UntypedFormControl {\n    return (this.ngControl?.control as UntypedFormControl) ?? this._formControl\n  }\n  /** Returns if maxlength is used */\n  get hasMaxLength(): boolean {\n    return !!this.maxlength && this.maxlength !== Number.MAX_SAFE_INTEGER\n  }\n\n  /** Toggler for showing or hiding the input field */\n  hideInput$ = new Subject<boolean>()\n\n  protected inputChange$ = new Subject<any>()\n  protected _destroy$ = new Subject<boolean>()\n\n  constructor(\n    @Self() @Optional() public ngControl: NgControl,\n    @Optional()\n    @Inject(TRANSLOCO_SCOPE)\n    protected translocoScope: TranslocoScope,\n    protected cdr: ChangeDetectorRef,\n  ) {\n    super(ngControl, translocoScope, cdr)\n  }\n\n  ngOnInit() {\n    super.ngOnInit()\n    this.inputChange$\n      .pipe(takeUntil(this._destroy$), debounceTime(this.debounceTime))\n      .subscribe((inputValue) => {\n        this.nggvInput.emit(inputValue)\n      })\n  }\n\n  ngOnDestroy(): void {\n    this._destroy$.next(true)\n    this._destroy$.complete()\n  }\n\n  writeValue(value: any) {\n    // maxLength will only work with string values\n    if (value?.length && value.length > this.maxlength) {\n      // cut value to match max length\n      this.state = this.cutTextAfterMaxLength(value)\n      if (value.length !== this.state.length) {\n        this.onChange(this.state)\n      }\n      // emit value\n    } else {\n      // update state\n      this.state = value\n    }\n    this.cdr.detectChanges()\n  }\n\n  cutTextAfterMaxLength(value: any): any {\n    if (typeof value === 'string') {\n      return value.substring(0, this.maxlength)\n    }\n    return value\n  }\n\n  /** @internal */\n  onInput(event: Event) {\n    event.stopPropagation()\n    if (this.disabled) return\n    this.state = (event.target as HTMLInputElement).value\n    this.onChange(this.state)\n    this.inputChange$.next(this.state)\n  }\n}\n","<!-- LABEL -->\n<label\n  [id]=\"id + '-label'\"\n  class=\"sdv-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=\"sdv-field-label--optional\"\n      >\n        ({{ t('label.optional') }})\n      </span>\n    </ng-container>\n  </ng-template>\n</label>\n\n<!-- DESCRIPTION -->\n<div class=\"form-info description hide-if-empty\">\n  {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container *ngIf=\"locked\">\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-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=\"sdv-field\"\n        [attr.type]=\"type\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required\"\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        [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=\"sdv-field\"\n        autocomplete=\"off\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required\"\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        [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=\"form-info form-info--error\"\n      [attr.id]=\"id + '-message'\"\n      *ngIf=\"invalid && (error || ngControl?.invalid)\"\n    >\n      <span *ngIf=\"error; else errorsRef\">{{ error }}</span>\n      <ng-template #errorsRef>\n        <span *ngIf=\"firstError as error\">\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=\"form-info\"\n        style=\"text-align: right\"\n      >\n        {{ charactersLeft }} {{ t('label.maxlength') }}\n      </span>\n    </ng-container>\n  </div>\n</ng-container>\n","import { CommonModule } from '@angular/common'\nimport { NgModule } from '@angular/core'\nimport { ReactiveFormsModule } from '@angular/forms'\n\nimport { NgvI18nModule } from '@sebgroup/green-angular/src/v-angular/i18n'\nimport { NgvInputMaskModule } from '@sebgroup/green-angular/src/v-angular/input-mask'\nimport { NggCharacterCountdownDirectiveModule } from '@sebgroup/green-angular/src/v-angular/character-countdown';\nimport { NgvInputComponent } from './input.component'\n\n@NgModule({\n  declarations: [NgvInputComponent],\n  imports: [\n    CommonModule,\n    NgvI18nModule,\n    NgvInputMaskModule,\n    ReactiveFormsModule,\n    NggCharacterCountdownDirectiveModule,\n  ],\n  exports: [NgvInputComponent],\n})\nexport class NgvInputModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"sebgroup-green-angular-src-v-angular-input.mjs","sources":["../../../../libs/angular/src/v-angular/input/input.component.ts","../../../../libs/angular/src/v-angular/input/input.component.html","../../../../libs/angular/src/v-angular/input/input.module.ts","../../../../libs/angular/src/v-angular/input/sebgroup-green-angular-src-v-angular-input.ts"],"sourcesContent":["import {\n  ChangeDetectorRef,\n  Component,\n  EventEmitter,\n  HostBinding,\n  Inject,\n  Input,\n  OnDestroy,\n  OnInit,\n  Optional,\n  Output,\n  Self,\n} from '@angular/core'\nimport { NgControl, UntypedFormControl } from '@angular/forms'\nimport { TRANSLOCO_SCOPE, TranslocoScope } from '@jsverse/transloco'\nimport { Subject } from 'rxjs'\nimport { debounceTime, takeUntil } from 'rxjs/operators'\n\nimport type { InputmaskOptions } from '@sebgroup/green-angular/src/v-angular/input-mask'\n\nimport { NgvBaseControlValueAccessorComponent } from '@sebgroup/green-angular/src/v-angular/base-control-value-accessor'\n\n/**\n * Input fields allow users to add and edit text.\n * https://designlibrary.sebgroup.com/components/component-input\n */\n@Component({\n  selector: 'nggv-input',\n  templateUrl: './input.component.html',\n  styleUrls: ['./input.component.scss'],\n})\nexport class NgvInputComponent\n  extends NgvBaseControlValueAccessorComponent\n  implements OnInit, OnDestroy\n{\n  /** Adding .gds-form-item as a class to host element */\n  @HostBinding('class') class = 'gds-form-item'\n  /** Special property used for selecting DOM elements during automated UI testing. */\n  @HostBinding('attr.data-thook') @Input() thook = 'input'\n  /** Type of input field. Should avoid types that modify field too much such as range. */\n  @Input() type = 'text'\n  /** Text shown before input has a written value. */\n  @Input() placeholder?: string\n  /** If set to \"on\", hint for form autofill feature. */\n  @Input() autocomplete = 'on'\n  /** If set to true, the value will not be editable. */\n  @Input() readonly = false\n  /** If set to true, enables the Angular template-driven email validator. */\n  @Input() email = false\n  /** Minimum value required for numeric input types. */\n  @Input() min = 0\n  /** Maximum value required for numeric input types. */\n  @Input() max = Number.MAX_SAFE_INTEGER\n  /** Incremental values that are valid for numeric input types. */\n  @Input() step = 1\n  /** Minimum length (number of characters) of value. */\n  @Input() set minLength(length: number) {\n    this._minlength = length\n  }\n  /**\n   * Minimum length (number of characters) of value.\n   * @deprecated minlength triggers angular-template-validation. Use @Input() minLength instead.\n   */\n  @Input() set minlength(length: number) {\n    this._minlength = length\n  }\n  get minlength(): number {\n    return this._minlength\n  }\n  /** Maximum length (number of characters) of value. */\n  @Input() set maxLength(length: number) {\n    this._maxlength = length\n    this.writeValue(this.state)\n  }\n  get maxlength(): number {\n    return this._maxlength\n  }\n  /**\n   * Maximum length (number of characters) of value.\n   * @deprecated maxlength triggers angular-template-validation. Use @Input() maxLength instead.\n   */\n  @Input() set maxlength(length: number) {\n    this._maxlength = length\n    this.writeValue(this.state)\n  }\n  private _maxlength = Number.MAX_SAFE_INTEGER\n\n  private _minlength = 0\n\n  /** Wether to show label that tells how many characters are still left to be entered. Will only be set if maxLength is also set */\n  private _showCharacterCountDown = true\n  @Input() set showCharacterCountdown(option: boolean) {\n    this._showCharacterCountDown = option\n  }\n  get showCharacterCountdown(): boolean {\n    return this._showCharacterCountDown && this.hasMaxLength\n  }\n\n  /** Pattern the value must match to be valid. */\n  @Input() pattern = ''\n  /** Amount of time to wait until emitting (nggvINput) event */\n  @Input() debounceTime = 500\n  /**\n   * @deprecated\n   * Text to put in badge\n   */\n  @Input() badgeText = ''\n\n  /** Settings for input mask if requested */\n  private _inputMask!: InputmaskOptions<any>\n  @Input() set inputMask(newInputMask: InputmaskOptions<any>) {\n    // Hide input field\n    this.hideInput$.next(true)\n    this.cdr.detectChanges()\n    this._inputMask = newInputMask\n\n    // Show input field to reload input-mask settings upon update\n    setTimeout(() => {\n      this.hideInput$.next(false)\n      this.cdr.detectChanges()\n    }, 200)\n  }\n  get inputMask(): InputmaskOptions<any> {\n    return this._inputMask\n  }\n\n  /** Emits every time the value of the inner input field changes, independantly of updates on the formcontroller */\n  @Output() nggvInput = new EventEmitter<any>()\n\n  private _formControl = new UntypedFormControl()\n  get control(): UntypedFormControl {\n    return (this.ngControl?.control as UntypedFormControl) ?? this._formControl\n  }\n  /** Returns if maxlength is used */\n  get hasMaxLength(): boolean {\n    return !!this.maxlength && this.maxlength !== Number.MAX_SAFE_INTEGER\n  }\n\n  /** Toggler for showing or hiding the input field */\n  hideInput$ = new Subject<boolean>()\n\n  protected inputChange$ = new Subject<any>()\n  protected _destroy$ = new Subject<boolean>()\n\n  constructor(\n    @Self() @Optional() public ngControl: NgControl,\n    @Optional()\n    @Inject(TRANSLOCO_SCOPE)\n    protected translocoScope: TranslocoScope,\n    protected cdr: ChangeDetectorRef,\n  ) {\n    super(ngControl, translocoScope, cdr)\n  }\n\n  ngOnInit() {\n    super.ngOnInit()\n    this.inputChange$\n      .pipe(takeUntil(this._destroy$), debounceTime(this.debounceTime))\n      .subscribe((inputValue) => {\n        this.nggvInput.emit(inputValue)\n      })\n  }\n\n  ngOnDestroy(): void {\n    this._destroy$.next(true)\n    this._destroy$.complete()\n  }\n\n  writeValue(value: any) {\n    // maxLength will only work with string values\n    if (value?.length && value.length > this.maxlength) {\n      // cut value to match max length\n      this.state = this.cutTextAfterMaxLength(value)\n      if (value.length !== this.state.length) {\n        this.onChange(this.state)\n      }\n      // emit value\n    } else {\n      // update state\n      this.state = value\n    }\n    this.cdr.detectChanges()\n  }\n\n  cutTextAfterMaxLength(value: any): any {\n    if (typeof value === 'string') {\n      return value.substring(0, this.maxlength)\n    }\n    return value\n  }\n\n  /** @internal */\n  onInput(event: Event) {\n    event.stopPropagation()\n    if (this.disabled) return\n    this.state = (event.target as HTMLInputElement).value\n    this.onChange(this.state)\n    this.inputChange$.next(this.state)\n  }\n}\n","<!-- LABEL -->\n<label\n  [id]=\"id + '-label'\"\n  class=\"sdv-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=\"sdv-field-label--optional\"\n      >\n        ({{ t('label.optional') }})\n      </span>\n    </ng-container>\n  </ng-template>\n</label>\n\n<!-- DESCRIPTION -->\n<div class=\"form-info description hide-if-empty\">\n  {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container *ngIf=\"locked\">\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-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=\"sdv-field\"\n        [attr.type]=\"type\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required\"\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        [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=\"sdv-field\"\n        autocomplete=\"off\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required\"\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        [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=\"form-info form-info--error\"\n      [attr.id]=\"id + '-message'\"\n      *ngIf=\"invalid && (error || ngControl?.invalid)\"\n    >\n      <span *ngIf=\"error; else errorsRef\">{{ error }}</span>\n      <ng-template #errorsRef>\n        <span *ngIf=\"firstError as error\">\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=\"form-info\"\n        style=\"text-align: right\"\n      >\n        {{ charactersLeft }} {{ t('label.maxlength') }}\n      </span>\n    </ng-container>\n  </div>\n</ng-container>\n","import { CommonModule } from '@angular/common'\nimport { NgModule } from '@angular/core'\nimport { ReactiveFormsModule } from '@angular/forms'\n\nimport { NgvI18nModule } from '@sebgroup/green-angular/src/v-angular/i18n'\nimport { NgvInputMaskModule } from '@sebgroup/green-angular/src/v-angular/input-mask'\nimport { NggCharacterCountdownDirectiveModule } from '@sebgroup/green-angular/src/v-angular/character-countdown';\nimport { NgvInputComponent } from './input.component'\n\n@NgModule({\n  declarations: [NgvInputComponent],\n  imports: [\n    CommonModule,\n    NgvI18nModule,\n    NgvInputMaskModule,\n    ReactiveFormsModule,\n    NggCharacterCountdownDirectiveModule,\n  ],\n  exports: [NgvInputComponent],\n})\nexport class NgvInputModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/sebgroup-green-angular-src-v-angular-modal.mjs

@@ -150,11 +150,11 @@ class NgvDialogComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NgvDialogComponent, selector: "nggv-dialog", inputs: { thook: "thook", shown: "shown", initiallyShown: "initiallyShown", heading: "heading", title: "title", content: "content", autoClose: "autoClose", payload: "payload", dialogTitleId: "dialogTitleId", dialogBodyId: "dialogBodyId", closeModalOnEscape: "closeModalOnEscape", 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)" }, properties: { "attr.data-thook": "this.thook", "class.sdv-modal-dialog": "this.baseClass", "class.-active": "this.shown", "attr.aria-hidden": "this.ariaHidden" } }, viewQueries: [{ propertyName: "dialogRef", first: true, predicate: ["dialog"], descendants: true }], exportAs: ["dialog"], ngImport: i0, template: "<div\n  class=\"sdv-modal-dialog__container\"\n  *transloco=\"let t\"\n  #dialog\n  role=\"dialog\"\n  aria-dialog=\"true\"\n  [attr.aria-labelledby]=\"dialogTitleId\"\n  [attr.aria-describedby]=\"dialogBodyId\"\n>\n  <header class=\"sdv-modal-dialog__heading\">\n    <h3 [attr.id]=\"dialogTitleId\">{{ t(heading || title || '') }}</h3>\n    <button\n      type=\"button\"\n      data-thook=\"dialog-close\"\n      (click)=\"onAction($event, 'close')\"\n      (keydown.enter)=\"onAction($event, 'close')\"\n      class=\"close\"\n    >\n      <gds-icon-cross-small\n        *nggCoreElement\n        width=\"24\"\n        height=\"24\"\n      ></gds-icon-cross-small>\n    </button>\n  </header>\n  <section class=\"sdv-modal-dialog__body\" [attr.id]=\"dialogBodyId\">\n    <div [innerHtml]=\"content\"></div>\n    <ng-content></ng-content>\n  </section>\n  <footer class=\"sdv-modal-dialog__actions\">\n    <button\n      class=\"sdv-button sdv-button-delete\"\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    <button\n      class=\"sdv-button sdv-button-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    <button\n      class=\"sdv-button\"\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 class=\"sdv-modal-backdrop\"></div>\n", styles: [":host{inset:0;position:fixed;display:grid;place-content:center;z-index:calc(var(--sg-z-index-modal-backdrop) + 1)}:host .sdv-modal-dialog__container{background:var(--sg-modal-background);display:flex;flex-direction:column;box-shadow:var(--sg-modal-box-shadow);position:absolute;width:100%;z-index:var(--sg-z-index-modal);position:initial;width:375px;max-width:95vw}:host .sdv-modal-dialog__container>.header,:host .sdv-modal-dialog__container>header{padding:1rem;border-bottom:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);display:inline-flex;justify-content:space-between;align-items:center;width:100%}:host .sdv-modal-dialog__container>.header h3,:host .sdv-modal-dialog__container>.header .h3,:host .sdv-modal-dialog__container>header h3,:host .sdv-modal-dialog__container>header .h3{margin-bottom:0;margin-top:0}:host .sdv-modal-dialog__container>.header h3+.close,:host .sdv-modal-dialog__container>.header .h3+.close,:host .sdv-modal-dialog__container>header h3+.close,:host .sdv-modal-dialog__container>header .h3+.close{margin:-7px}:host .sdv-modal-dialog__container>.body{padding:1rem;overflow:auto;width:100%}:host .sdv-modal-dialog__container>.body p{margin-bottom:0;margin-top:0}:host .sdv-modal-dialog__container>.footer,:host .sdv-modal-dialog__container>footer{padding:1rem;width:100%}@media (min-width: 36em){:host .sdv-modal-dialog__container>.footer,:host .sdv-modal-dialog__container>footer{display:flex;justify-content:flex-end}}@media (max-width: 35.98em){:host .sdv-modal-dialog__container>.footer button+button,:host .sdv-modal-dialog__container>.footer button+.button,:host .sdv-modal-dialog__container>.footer .button+button,:host .sdv-modal-dialog__container>.footer .button+.button,:host .sdv-modal-dialog__container>footer button+button,:host .sdv-modal-dialog__container>footer button+.button,:host .sdv-modal-dialog__container>footer .button+button,:host .sdv-modal-dialog__container>footer .button+.button{margin-top:.75rem}}@media (min-width: 36em){:host .sdv-modal-dialog__container>.footer button+button,:host .sdv-modal-dialog__container>.footer button+.button,:host .sdv-modal-dialog__container>.footer .button+button,:host .sdv-modal-dialog__container>.footer .button+.button,:host .sdv-modal-dialog__container>footer button+button,:host .sdv-modal-dialog__container>footer button+.button,:host .sdv-modal-dialog__container>footer .button+button,:host .sdv-modal-dialog__container>footer .button+.button{margin-left:.75rem}}:host .sdv-modal-dialog__container.medium{width:512px}:host .sdv-modal-dialog__container.large{width:720px}:host .sdv-modal-dialog__heading{padding:1rem;border-bottom:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);display:inline-flex;justify-content:space-between;align-items:center;width:100%}:host .sdv-modal-dialog__heading h3,:host .sdv-modal-dialog__heading .h3{margin-bottom:0;margin-top:0}:host .sdv-modal-dialog__heading h3+.close,:host .sdv-modal-dialog__heading .h3+.close{margin:-7px}:host .sdv-modal-dialog__heading button{display:grid;place-content:center}:host .sdv-modal-dialog__body{padding:1rem;overflow:auto;width:100%}:host .sdv-modal-dialog__body p{margin-bottom:0;margin-top:0}:host .sdv-modal-backdrop{background:#00000059;inset:0;position:fixed;z-index:999;display:block;transition:opacity .5s cubic-bezier(.33,1,.68,1)}:host .sdv-modal-backdrop--transparent{opacity:0}:host .sdv-modal-backdrop--transparent.entered,:host .sdv-modal-backdrop--transparent.is-entering{opacity:1}:host .sdv-modal-backdrop--transparent.is-exiting{opacity:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NgvDialogComponent, selector: "nggv-dialog", inputs: { thook: "thook", shown: "shown", initiallyShown: "initiallyShown", heading: "heading", title: "title", content: "content", autoClose: "autoClose", payload: "payload", dialogTitleId: "dialogTitleId", dialogBodyId: "dialogBodyId", closeModalOnEscape: "closeModalOnEscape", 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)" }, properties: { "attr.data-thook": "this.thook", "class.sdv-modal-dialog": "this.baseClass", "class.-active": "this.shown", "attr.aria-hidden": "this.ariaHidden" } }, viewQueries: [{ propertyName: "dialogRef", first: true, predicate: ["dialog"], descendants: true }], exportAs: ["dialog"], ngImport: i0, template: "<div\n  class=\"sdv-modal-dialog__container\"\n  *transloco=\"let t\"\n  #dialog\n  role=\"dialog\"\n  aria-dialog=\"true\"\n  [attr.aria-labelledby]=\"dialogTitleId\"\n  [attr.aria-describedby]=\"dialogBodyId\"\n>\n  <header class=\"sdv-modal-dialog__heading\">\n    <h3 [attr.id]=\"dialogTitleId\">{{ t(heading || title || '') }}</h3>\n    <button\n      type=\"button\"\n      data-thook=\"dialog-close\"\n      (click)=\"onAction($event, 'close')\"\n      (keydown.enter)=\"onAction($event, 'close')\"\n      class=\"close\"\n    >\n      <gds-icon-cross-small\n        *nggCoreElement\n        width=\"24\"\n        height=\"24\"\n      ></gds-icon-cross-small>\n    </button>\n  </header>\n  <section class=\"sdv-modal-dialog__body\" [attr.id]=\"dialogBodyId\">\n    <div [innerHtml]=\"content\"></div>\n    <ng-content></ng-content>\n  </section>\n  <footer class=\"sdv-modal-dialog__actions\">\n    <button\n      class=\"sdv-button sdv-button-delete\"\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    <button\n      class=\"sdv-button sdv-button-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    <button\n      class=\"sdv-button\"\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 class=\"sdv-modal-backdrop\"></div>\n", styles: [":host{inset:0;position:fixed;display:grid;place-content:center;z-index:calc(var(--sg-z-index-modal-backdrop) + 1)}:host .sdv-modal-dialog__container{background:var(--sg-modal-background);display:flex;flex-direction:column;box-shadow:var(--sg-modal-box-shadow);position:absolute;width:100%;z-index:var(--sg-z-index-modal);position:initial;width:375px;max-width:95vw}:host .sdv-modal-dialog__container>.header,:host .sdv-modal-dialog__container>header{padding:1rem;border-bottom:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);display:inline-flex;justify-content:space-between;align-items:center;width:100%}:host .sdv-modal-dialog__container>.header h3,:host .sdv-modal-dialog__container>.header .h3,:host .sdv-modal-dialog__container>header h3,:host .sdv-modal-dialog__container>header .h3{margin-bottom:0;margin-top:0}:host .sdv-modal-dialog__container>.header h3+.close,:host .sdv-modal-dialog__container>.header .h3+.close,:host .sdv-modal-dialog__container>header h3+.close,:host .sdv-modal-dialog__container>header .h3+.close{margin:-7px;min-width:2rem}:host .sdv-modal-dialog__container>.body{padding:1rem;overflow:auto;width:100%}:host .sdv-modal-dialog__container>.body p{margin-bottom:0;margin-top:0}:host .sdv-modal-dialog__container>.footer,:host .sdv-modal-dialog__container>footer{padding:1rem;width:100%}@media (min-width: 36em){:host .sdv-modal-dialog__container>.footer,:host .sdv-modal-dialog__container>footer{display:flex;justify-content:flex-end}}@media (max-width: 35.98em){:host .sdv-modal-dialog__container>.footer button+button,:host .sdv-modal-dialog__container>.footer button+.button,:host .sdv-modal-dialog__container>.footer .button+button,:host .sdv-modal-dialog__container>.footer .button+.button,:host .sdv-modal-dialog__container>footer button+button,:host .sdv-modal-dialog__container>footer button+.button,:host .sdv-modal-dialog__container>footer .button+button,:host .sdv-modal-dialog__container>footer .button+.button{margin-top:.75rem}}@media (min-width: 36em){:host .sdv-modal-dialog__container>.footer button+button,:host .sdv-modal-dialog__container>.footer button+.button,:host .sdv-modal-dialog__container>.footer .button+button,:host .sdv-modal-dialog__container>.footer .button+.button,:host .sdv-modal-dialog__container>footer button+button,:host .sdv-modal-dialog__container>footer button+.button,:host .sdv-modal-dialog__container>footer .button+button,:host .sdv-modal-dialog__container>footer .button+.button{margin-left:.75rem}}:host .sdv-modal-dialog__container.medium{width:512px}:host .sdv-modal-dialog__container.large{width:720px}:host .sdv-modal-dialog__heading{padding:1rem;border-bottom:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);display:inline-flex;justify-content:space-between;align-items:center;width:100%}:host .sdv-modal-dialog__heading h3,:host .sdv-modal-dialog__heading .h3{margin-bottom:0;margin-top:0}:host .sdv-modal-dialog__heading h3+.close,:host .sdv-modal-dialog__heading .h3+.close{margin:-7px;min-width:2rem}:host .sdv-modal-dialog__heading button{display:grid;place-content:center}:host .sdv-modal-dialog__body{padding:1rem;overflow:auto;width:100%}:host .sdv-modal-dialog__body p{margin-bottom:0;margin-top:0}:host .sdv-modal-backdrop{background:#00000059;inset:0;position:fixed;z-index:999;display:block;transition:opacity .5s cubic-bezier(.33,1,.68,1)}:host .sdv-modal-backdrop--transparent{opacity:0}:host .sdv-modal-backdrop--transparent.entered,:host .sdv-modal-backdrop--transparent.is-entering{opacity:1}:host .sdv-modal-backdrop--transparent.is-exiting{opacity:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nggv-dialog', exportAs: 'dialog', template: "<div\n  class=\"sdv-modal-dialog__container\"\n  *transloco=\"let t\"\n  #dialog\n  role=\"dialog\"\n  aria-dialog=\"true\"\n  [attr.aria-labelledby]=\"dialogTitleId\"\n  [attr.aria-describedby]=\"dialogBodyId\"\n>\n  <header class=\"sdv-modal-dialog__heading\">\n    <h3 [attr.id]=\"dialogTitleId\">{{ t(heading || title || '') }}</h3>\n    <button\n      type=\"button\"\n      data-thook=\"dialog-close\"\n      (click)=\"onAction($event, 'close')\"\n      (keydown.enter)=\"onAction($event, 'close')\"\n      class=\"close\"\n    >\n      <gds-icon-cross-small\n        *nggCoreElement\n        width=\"24\"\n        height=\"24\"\n      ></gds-icon-cross-small>\n    </button>\n  </header>\n  <section class=\"sdv-modal-dialog__body\" [attr.id]=\"dialogBodyId\">\n    <div [innerHtml]=\"content\"></div>\n    <ng-content></ng-content>\n  </section>\n  <footer class=\"sdv-modal-dialog__actions\">\n    <button\n      class=\"sdv-button sdv-button-delete\"\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    <button\n      class=\"sdv-button sdv-button-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    <button\n      class=\"sdv-button\"\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 class=\"sdv-modal-backdrop\"></div>\n", styles: [":host{inset:0;position:fixed;display:grid;place-content:center;z-index:calc(var(--sg-z-index-modal-backdrop) + 1)}:host .sdv-modal-dialog__container{background:var(--sg-modal-background);display:flex;flex-direction:column;box-shadow:var(--sg-modal-box-shadow);position:absolute;width:100%;z-index:var(--sg-z-index-modal);position:initial;width:375px;max-width:95vw}:host .sdv-modal-dialog__container>.header,:host .sdv-modal-dialog__container>header{padding:1rem;border-bottom:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);display:inline-flex;justify-content:space-between;align-items:center;width:100%}:host .sdv-modal-dialog__container>.header h3,:host .sdv-modal-dialog__container>.header .h3,:host .sdv-modal-dialog__container>header h3,:host .sdv-modal-dialog__container>header .h3{margin-bottom:0;margin-top:0}:host .sdv-modal-dialog__container>.header h3+.close,:host .sdv-modal-dialog__container>.header .h3+.close,:host .sdv-modal-dialog__container>header h3+.close,:host .sdv-modal-dialog__container>header .h3+.close{margin:-7px}:host .sdv-modal-dialog__container>.body{padding:1rem;overflow:auto;width:100%}:host .sdv-modal-dialog__container>.body p{margin-bottom:0;margin-top:0}:host .sdv-modal-dialog__container>.footer,:host .sdv-modal-dialog__container>footer{padding:1rem;width:100%}@media (min-width: 36em){:host .sdv-modal-dialog__container>.footer,:host .sdv-modal-dialog__container>footer{display:flex;justify-content:flex-end}}@media (max-width: 35.98em){:host .sdv-modal-dialog__container>.footer button+button,:host .sdv-modal-dialog__container>.footer button+.button,:host .sdv-modal-dialog__container>.footer .button+button,:host .sdv-modal-dialog__container>.footer .button+.button,:host .sdv-modal-dialog__container>footer button+button,:host .sdv-modal-dialog__container>footer button+.button,:host .sdv-modal-dialog__container>footer .button+button,:host .sdv-modal-dialog__container>footer .button+.button{margin-top:.75rem}}@media (min-width: 36em){:host .sdv-modal-dialog__container>.footer button+button,:host .sdv-modal-dialog__container>.footer button+.button,:host .sdv-modal-dialog__container>.footer .button+button,:host .sdv-modal-dialog__container>.footer .button+.button,:host .sdv-modal-dialog__container>footer button+button,:host .sdv-modal-dialog__container>footer button+.button,:host .sdv-modal-dialog__container>footer .button+button,:host .sdv-modal-dialog__container>footer .button+.button{margin-left:.75rem}}:host .sdv-modal-dialog__container.medium{width:512px}:host .sdv-modal-dialog__container.large{width:720px}:host .sdv-modal-dialog__heading{padding:1rem;border-bottom:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);display:inline-flex;justify-content:space-between;align-items:center;width:100%}:host .sdv-modal-dialog__heading h3,:host .sdv-modal-dialog__heading .h3{margin-bottom:0;margin-top:0}:host .sdv-modal-dialog__heading h3+.close,:host .sdv-modal-dialog__heading .h3+.close{margin:-7px}:host .sdv-modal-dialog__heading button{display:grid;place-content:center}:host .sdv-modal-dialog__body{padding:1rem;overflow:auto;width:100%}:host .sdv-modal-dialog__body p{margin-bottom:0;margin-top:0}:host .sdv-modal-backdrop{background:#00000059;inset:0;position:fixed;z-index:999;display:block;transition:opacity .5s cubic-bezier(.33,1,.68,1)}:host .sdv-modal-backdrop--transparent{opacity:0}:host .sdv-modal-backdrop--transparent.entered,:host .sdv-modal-backdrop--transparent.is-entering{opacity:1}:host .sdv-modal-backdrop--transparent.is-exiting{opacity:0}\n"] }]
+            args: [{ selector: 'nggv-dialog', exportAs: 'dialog', template: "<div\n  class=\"sdv-modal-dialog__container\"\n  *transloco=\"let t\"\n  #dialog\n  role=\"dialog\"\n  aria-dialog=\"true\"\n  [attr.aria-labelledby]=\"dialogTitleId\"\n  [attr.aria-describedby]=\"dialogBodyId\"\n>\n  <header class=\"sdv-modal-dialog__heading\">\n    <h3 [attr.id]=\"dialogTitleId\">{{ t(heading || title || '') }}</h3>\n    <button\n      type=\"button\"\n      data-thook=\"dialog-close\"\n      (click)=\"onAction($event, 'close')\"\n      (keydown.enter)=\"onAction($event, 'close')\"\n      class=\"close\"\n    >\n      <gds-icon-cross-small\n        *nggCoreElement\n        width=\"24\"\n        height=\"24\"\n      ></gds-icon-cross-small>\n    </button>\n  </header>\n  <section class=\"sdv-modal-dialog__body\" [attr.id]=\"dialogBodyId\">\n    <div [innerHtml]=\"content\"></div>\n    <ng-content></ng-content>\n  </section>\n  <footer class=\"sdv-modal-dialog__actions\">\n    <button\n      class=\"sdv-button sdv-button-delete\"\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    <button\n      class=\"sdv-button sdv-button-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    <button\n      class=\"sdv-button\"\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 class=\"sdv-modal-backdrop\"></div>\n", styles: [":host{inset:0;position:fixed;display:grid;place-content:center;z-index:calc(var(--sg-z-index-modal-backdrop) + 1)}:host .sdv-modal-dialog__container{background:var(--sg-modal-background);display:flex;flex-direction:column;box-shadow:var(--sg-modal-box-shadow);position:absolute;width:100%;z-index:var(--sg-z-index-modal);position:initial;width:375px;max-width:95vw}:host .sdv-modal-dialog__container>.header,:host .sdv-modal-dialog__container>header{padding:1rem;border-bottom:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);display:inline-flex;justify-content:space-between;align-items:center;width:100%}:host .sdv-modal-dialog__container>.header h3,:host .sdv-modal-dialog__container>.header .h3,:host .sdv-modal-dialog__container>header h3,:host .sdv-modal-dialog__container>header .h3{margin-bottom:0;margin-top:0}:host .sdv-modal-dialog__container>.header h3+.close,:host .sdv-modal-dialog__container>.header .h3+.close,:host .sdv-modal-dialog__container>header h3+.close,:host .sdv-modal-dialog__container>header .h3+.close{margin:-7px;min-width:2rem}:host .sdv-modal-dialog__container>.body{padding:1rem;overflow:auto;width:100%}:host .sdv-modal-dialog__container>.body p{margin-bottom:0;margin-top:0}:host .sdv-modal-dialog__container>.footer,:host .sdv-modal-dialog__container>footer{padding:1rem;width:100%}@media (min-width: 36em){:host .sdv-modal-dialog__container>.footer,:host .sdv-modal-dialog__container>footer{display:flex;justify-content:flex-end}}@media (max-width: 35.98em){:host .sdv-modal-dialog__container>.footer button+button,:host .sdv-modal-dialog__container>.footer button+.button,:host .sdv-modal-dialog__container>.footer .button+button,:host .sdv-modal-dialog__container>.footer .button+.button,:host .sdv-modal-dialog__container>footer button+button,:host .sdv-modal-dialog__container>footer button+.button,:host .sdv-modal-dialog__container>footer .button+button,:host .sdv-modal-dialog__container>footer .button+.button{margin-top:.75rem}}@media (min-width: 36em){:host .sdv-modal-dialog__container>.footer button+button,:host .sdv-modal-dialog__container>.footer button+.button,:host .sdv-modal-dialog__container>.footer .button+button,:host .sdv-modal-dialog__container>.footer .button+.button,:host .sdv-modal-dialog__container>footer button+button,:host .sdv-modal-dialog__container>footer button+.button,:host .sdv-modal-dialog__container>footer .button+button,:host .sdv-modal-dialog__container>footer .button+.button{margin-left:.75rem}}:host .sdv-modal-dialog__container.medium{width:512px}:host .sdv-modal-dialog__container.large{width:720px}:host .sdv-modal-dialog__heading{padding:1rem;border-bottom:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);display:inline-flex;justify-content:space-between;align-items:center;width:100%}:host .sdv-modal-dialog__heading h3,:host .sdv-modal-dialog__heading .h3{margin-bottom:0;margin-top:0}:host .sdv-modal-dialog__heading h3+.close,:host .sdv-modal-dialog__heading .h3+.close{margin:-7px;min-width:2rem}:host .sdv-modal-dialog__heading button{display:grid;place-content:center}:host .sdv-modal-dialog__body{padding:1rem;overflow:auto;width:100%}:host .sdv-modal-dialog__body p{margin-bottom:0;margin-top:0}:host .sdv-modal-backdrop{background:#00000059;inset:0;position:fixed;z-index:999;display:block;transition:opacity .5s cubic-bezier(.33,1,.68,1)}:host .sdv-modal-backdrop--transparent{opacity:0}:host .sdv-modal-backdrop--transparent.entered,:host .sdv-modal-backdrop--transparent.is-entering{opacity:1}:host .sdv-modal-backdrop--transparent.is-exiting{opacity:0}\n"] }]
         }], propDecorators: { dialogRef: [{
                 type: ViewChild,
                 args: ['dialog']
@@ -411,7 +411,7 @@ class NgvSlideOutComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvSlideOutComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NgvSlideOutComponent, selector: "nggv-slideout-modal", inputs: { side: "side", shown: "shown", initiallyShown: "initiallyShown", heading: "heading", title: "title", content: "content", closable: "closable", autoWidth: "autoWidth", thook: "thook", 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=\"sdv-modal-title\"\n      aria-describedby=\"sdv-modal-body\"\n    >\n      <header class=\"gds-slide-out__header\">\n        <h3 class=\"gds-slide-out__heading\" id=\"sdv-modal-title\">\n          {{ heading || title || '' }}\n        </h3>\n        <button\n          data-testid=\"modal-close-button\"\n          class=\"close\"\n          (click)=\"this.close()\"\n        >\n          <span className=\"sr-only\">Close</span>\n          <i></i>\n        </button>\n      </header>\n\n      <section id=\"sdv-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=\"sdv-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          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=\"gds-backdrop\"\n      data-thook=\"slideout-backdrop\"\n      (click)=\"close()\"\n    ></div>\n  </div>\n</ng-container>\n", styles: [":host .gds-slide-out{background:var(--sg-modal-background);display:flex;flex-direction:column;box-shadow:var(--sg-modal-box-shadow);position:absolute;width:100%;z-index:var(--sg-z-index-modal);position:fixed;height:100dvh;max-width:512px;min-height:-webkit-fill-available;min-height:-moz-available;min-height:stretch;right:0;top:0;transition:transform .35s cubic-bezier(.33,1,.68,1);transform:translate(100%);z-index:1050}:host .gds-slide-out>.header,:host .gds-slide-out>header{padding:1rem;border-bottom:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);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}: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.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.auto-width{width:auto;max-width:initial}:host .hide-if-empty:empty{display:none}:host .gds-backdrop{background:#00000059;inset:0;position:fixed;z-index:1040;display:block;transition:opacity .5s cubic-bezier(.33,1,.68,1)}:host .gds-backdrop--transparent{opacity:0}:host .gds-backdrop--transparent.entered,:host .gds-backdrop--transparent.is-entering{opacity:1}:host .gds-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 #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"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NgvSlideOutComponent, selector: "nggv-slideout-modal", inputs: { side: "side", shown: "shown", initiallyShown: "initiallyShown", heading: "heading", title: "title", content: "content", closable: "closable", autoWidth: "autoWidth", thook: "thook", 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=\"sdv-modal-title\"\n      aria-describedby=\"sdv-modal-body\"\n    >\n      <header class=\"gds-slide-out__header\">\n        <h3 class=\"gds-slide-out__heading\" id=\"sdv-modal-title\">\n          {{ heading || title || '' }}\n        </h3>\n        <button\n          data-testid=\"modal-close-button\"\n          class=\"close\"\n          (click)=\"this.close()\"\n        >\n          <span className=\"sr-only\">Close</span>\n          <i></i>\n        </button>\n      </header>\n\n      <section id=\"sdv-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=\"sdv-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          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=\"gds-backdrop\"\n      data-thook=\"slideout-backdrop\"\n      (click)=\"close()\"\n    ></div>\n  </div>\n</ng-container>\n", styles: [":host .gds-slide-out{background:var(--sg-modal-background);display:flex;flex-direction:column;box-shadow:var(--sg-modal-box-shadow);position:absolute;width:100%;z-index:var(--sg-z-index-modal);position:fixed;height:100dvh;max-width:512px;min-height:-webkit-fill-available;min-height:-moz-available;min-height:stretch;right:0;top:0;transition:transform .35s cubic-bezier(.33,1,.68,1);transform:translate(100%);z-index:1050}:host .gds-slide-out>.header,:host .gds-slide-out>header{padding:1rem;border-bottom:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);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.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.auto-width{width:auto;max-width:initial}:host .hide-if-empty:empty{display:none}:host .gds-backdrop{background:#00000059;inset:0;position:fixed;z-index:1040;display:block;transition:opacity .5s cubic-bezier(.33,1,.68,1)}:host .gds-backdrop--transparent{opacity:0}:host .gds-backdrop--transparent.entered,:host .gds-backdrop--transparent.is-entering{opacity:1}:host .gds-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 #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"] }], animations: [
             trigger('modalAnimation', [
                 transition(':enter', [
                     query('.gds-slide-out', style({ transform: 'translateX(100%)' }), {
@@ -463,7 +463,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                                 ]),
                             ]),
                         ]),
-                    ], 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=\"sdv-modal-title\"\n      aria-describedby=\"sdv-modal-body\"\n    >\n      <header class=\"gds-slide-out__header\">\n        <h3 class=\"gds-slide-out__heading\" id=\"sdv-modal-title\">\n          {{ heading || title || '' }}\n        </h3>\n        <button\n          data-testid=\"modal-close-button\"\n          class=\"close\"\n          (click)=\"this.close()\"\n        >\n          <span className=\"sr-only\">Close</span>\n          <i></i>\n        </button>\n      </header>\n\n      <section id=\"sdv-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=\"sdv-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          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=\"gds-backdrop\"\n      data-thook=\"slideout-backdrop\"\n      (click)=\"close()\"\n    ></div>\n  </div>\n</ng-container>\n", styles: [":host .gds-slide-out{background:var(--sg-modal-background);display:flex;flex-direction:column;box-shadow:var(--sg-modal-box-shadow);position:absolute;width:100%;z-index:var(--sg-z-index-modal);position:fixed;height:100dvh;max-width:512px;min-height:-webkit-fill-available;min-height:-moz-available;min-height:stretch;right:0;top:0;transition:transform .35s cubic-bezier(.33,1,.68,1);transform:translate(100%);z-index:1050}:host .gds-slide-out>.header,:host .gds-slide-out>header{padding:1rem;border-bottom:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);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}: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.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.auto-width{width:auto;max-width:initial}:host .hide-if-empty:empty{display:none}:host .gds-backdrop{background:#00000059;inset:0;position:fixed;z-index:1040;display:block;transition:opacity .5s cubic-bezier(.33,1,.68,1)}:host .gds-backdrop--transparent{opacity:0}:host .gds-backdrop--transparent.entered,:host .gds-backdrop--transparent.is-entering{opacity:1}:host .gds-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 #sdv-modal-body{flex:1}\n"] }]
+                    ], 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=\"sdv-modal-title\"\n      aria-describedby=\"sdv-modal-body\"\n    >\n      <header class=\"gds-slide-out__header\">\n        <h3 class=\"gds-slide-out__heading\" id=\"sdv-modal-title\">\n          {{ heading || title || '' }}\n        </h3>\n        <button\n          data-testid=\"modal-close-button\"\n          class=\"close\"\n          (click)=\"this.close()\"\n        >\n          <span className=\"sr-only\">Close</span>\n          <i></i>\n        </button>\n      </header>\n\n      <section id=\"sdv-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=\"sdv-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          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=\"gds-backdrop\"\n      data-thook=\"slideout-backdrop\"\n      (click)=\"close()\"\n    ></div>\n  </div>\n</ng-container>\n", styles: [":host .gds-slide-out{background:var(--sg-modal-background);display:flex;flex-direction:column;box-shadow:var(--sg-modal-box-shadow);position:absolute;width:100%;z-index:var(--sg-z-index-modal);position:fixed;height:100dvh;max-width:512px;min-height:-webkit-fill-available;min-height:-moz-available;min-height:stretch;right:0;top:0;transition:transform .35s cubic-bezier(.33,1,.68,1);transform:translate(100%);z-index:1050}:host .gds-slide-out>.header,:host .gds-slide-out>header{padding:1rem;border-bottom:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);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.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.auto-width{width:auto;max-width:initial}:host .hide-if-empty:empty{display:none}:host .gds-backdrop{background:#00000059;inset:0;position:fixed;z-index:1040;display:block;transition:opacity .5s cubic-bezier(.33,1,.68,1)}:host .gds-backdrop--transparent{opacity:0}:host .gds-backdrop--transparent.entered,:host .gds-backdrop--transparent.is-entering{opacity:1}:host .gds-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 #sdv-modal-body{flex:1}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { slideOutRef: [{
                 type: ViewChild,
                 args: ['slideOut']