@sebgroup/green-angular 0.0.0-v-angular-20250113082841

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

@@ -0,0 +1,227 @@
+import * as i0 from '@angular/core';
+import { Pipe, InjectionToken, PLATFORM_ID, Directive, Optional, Self, Inject, Input, HostListener, NgModule } from '@angular/core';
+import _Inputmask from 'inputmask';
+import { isPlatformServer } from '@angular/common';
+import * as i1 from '@angular/forms';
+
+const InputmaskStatic = _Inputmask.default ||
+    _Inputmask;
+class InputMaskFormatPipe {
+    transform(value, options) {
+        if (!value)
+            return value;
+        return InputmaskStatic.format(value, options);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputMaskFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: InputMaskFormatPipe, name: "nggvInputMaskFormat" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputMaskFormatPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'nggvInputMaskFormat',
+                }]
+        }] });
+
+class InputMaskConfig {
+    constructor() {
+        this.isAsync = false;
+        this.inputSelector = 'input';
+    }
+}
+const INPUT_MASK_CONFIG = new InjectionToken('InputMaskConfig');
+
+const InputmaskConstructor = _Inputmask.default ||
+    _Inputmask;
+class NggvInputMaskDirective {
+    constructor(ngControl, config, platformId, elementRef, renderer, ngZone) {
+        this.ngControl = ngControl;
+        this.platformId = platformId;
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        this.ngZone = ngZone;
+        /** Input settings of directive */
+        this.nggvInputMask = {};
+        this.defaultInputMaskConfig = new InputMaskConfig();
+        this.onInput = (_) => {
+            // Empty method
+        };
+        this.onTouched = (_) => {
+            // Empty method
+        };
+        this.validate = (control) => !control.value || !this.inputMaskPlugin || this.inputMaskPlugin.isValid()
+            ? null
+            : { invalidformat: true };
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+        this.setNativeInputElement(config);
+    }
+    onKeyUp(event) {
+        // Trigger "onInput" when pressing delete or backspace, when input is focused
+        if (['Delete', 'Backspace'].includes(event.key)) {
+            this.elementRef.nativeElement.dispatchEvent(new Event('input', {
+                bubbles: true,
+                cancelable: true,
+            }));
+        }
+    }
+    ngOnInit() {
+        if (this.control) {
+            this.control.setValidators(this.control.validator
+                ? [this.control.validator, this.validate]
+                : [this.validate]);
+            this.control.updateValueAndValidity();
+        }
+    }
+    ngOnDestroy() {
+        this.inputMaskPlugin?.remove();
+        this.mutationObserver?.disconnect();
+    }
+    initInputMask() {
+        if (isPlatformServer(this.platformId) ||
+            !this.nativeInputElement ||
+            !Object.keys(this.nggvInputMask ?? {}).length) {
+            return;
+        }
+        this.inputMaskPlugin = this.ngZone.runOutsideAngular(() => new InputmaskConstructor(this.inputMaskOptions).mask(this.nativeInputElement));
+        if (this.control) {
+            setTimeout(() => {
+                this.control.updateValueAndValidity();
+            });
+        }
+    }
+    ngAfterViewInit() {
+        this.initInputMask();
+    }
+    get inputMaskOptions() {
+        const { parser, ...options } = this.nggvInputMask;
+        return options;
+    }
+    writeValue(value) {
+        if (this.nativeInputElement) {
+            this.renderer.setProperty(this.nativeInputElement, 'value', value ?? '');
+        }
+    }
+    registerOnChange(fn) {
+        // Use injected parser from settings to modify value
+        // of users desire
+        this.onInput = (value) => {
+            const parser = this.nggvInputMask?.parser;
+            const newValue = parser && value ? parser(value) : value;
+            fn(newValue);
+        };
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        if (this.nativeInputElement) {
+            this.renderer.setProperty(this.nativeInputElement, 'disabled', disabled);
+        }
+    }
+    get control() {
+        return this.ngControl?.control;
+    }
+    setNativeInputElement(config) {
+        if (this.elementRef.nativeElement.tagName === 'INPUT') {
+            this.nativeInputElement = this.elementRef.nativeElement;
+        }
+        else {
+            this.defaultInputMaskConfig = {
+                ...this.defaultInputMaskConfig,
+                ...config,
+            };
+            if (this.defaultInputMaskConfig.isAsync) {
+                // Create an observer instance linked to the callback function
+                this.mutationObserver = new MutationObserver((mutationsList) => {
+                    for (const mutation of mutationsList) {
+                        if (mutation.type === 'childList') {
+                            const nativeInputElement = this.elementRef.nativeElement.querySelector(this.defaultInputMaskConfig.inputSelector);
+                            if (nativeInputElement) {
+                                this.nativeInputElement = nativeInputElement;
+                                this.mutationObserver?.disconnect();
+                                this.initInputMask();
+                            }
+                        }
+                    }
+                });
+                // Start observing the target node for configured mutations
+                this.mutationObserver.observe(this.elementRef.nativeElement, {
+                    childList: true,
+                    subtree: true,
+                });
+            }
+            else {
+                this.nativeInputElement = this.elementRef.nativeElement.querySelector(this.defaultInputMaskConfig.inputSelector);
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvInputMaskDirective, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: INPUT_MASK_CONFIG }, { token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: NggvInputMaskDirective, selector: "[nggvInputMask]", inputs: { nggvInputMask: "nggvInputMask" }, host: { listeners: { "input": "onInput($event.target.value)", "blur": "onTouched($event.target.value)", "keyup": "onKeyUp($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvInputMaskDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nggvInputMask]',
+                }]
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }, { type: InputMaskConfig, decorators: [{
+                    type: Inject,
+                    args: [INPUT_MASK_CONFIG]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }], propDecorators: { nggvInputMask: [{
+                type: Input
+            }], onInput: [{
+                type: HostListener,
+                args: ['input', ['$event.target.value']]
+            }], onTouched: [{
+                type: HostListener,
+                args: ['blur', ['$event.target.value']]
+            }], onKeyUp: [{
+                type: HostListener,
+                args: ['keyup', ['$event']]
+            }] } });
+
+class NggvInputMaskModule {
+    static forRoot(config) {
+        return {
+            ngModule: NggvInputMaskModule,
+            providers: [{ provide: INPUT_MASK_CONFIG, useValue: config }],
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvInputMaskModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: NggvInputMaskModule, declarations: [NggvInputMaskDirective, InputMaskFormatPipe], exports: [NggvInputMaskDirective, InputMaskFormatPipe] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvInputMaskModule, providers: [
+            {
+                provide: INPUT_MASK_CONFIG,
+                useClass: InputMaskConfig,
+            },
+        ] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvInputMaskModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NggvInputMaskDirective, InputMaskFormatPipe],
+                    exports: [NggvInputMaskDirective, InputMaskFormatPipe],
+                    providers: [
+                        {
+                            provide: INPUT_MASK_CONFIG,
+                            useClass: InputMaskConfig,
+                        },
+                    ],
+                }]
+        }] });
+
+const createMask = (options) => typeof options === 'string' ? { mask: options } : options;
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { InputMaskFormatPipe, NggvInputMaskDirective, NggvInputMaskModule, createMask };
+//# sourceMappingURL=sebgroup-green-angular-src-v-angular-input-mask.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sebgroup-green-angular-src-v-angular-input-mask.mjs","sources":["../../../../libs/angular/src/v-angular/input-mask/input-mask-format.pipe.ts","../../../../libs/angular/src/v-angular/input-mask/config.ts","../../../../libs/angular/src/v-angular/input-mask/input-mask.directive.ts","../../../../libs/angular/src/v-angular/input-mask/input-mask.module.ts","../../../../libs/angular/src/v-angular/input-mask/constants.ts","../../../../libs/angular/src/v-angular/input-mask/sebgroup-green-angular-src-v-angular-input-mask.ts"],"sourcesContent":["import { Pipe, PipeTransform } from '@angular/core'\nimport _Inputmask from 'inputmask'\n\nimport type Inputmask from 'inputmask'\n\nimport type { InputmaskOptions } from './input-mask.types'\n\nconst InputmaskStatic =\n  (_Inputmask as unknown as { default?: Inputmask.Static }).default ||\n  _Inputmask\n\n@Pipe({\n  name: 'nggvInputMaskFormat',\n})\nexport class InputMaskFormatPipe implements PipeTransform {\n  transform<T = any>(value: any, options: InputmaskOptions<T>): any {\n    if (!value) return value\n    return InputmaskStatic.format(value, options)\n  }\n}\n","import { InjectionToken } from '@angular/core'\n\nexport class InputMaskConfig {\n  isAsync = false\n  inputSelector = 'input'\n}\n\nexport const INPUT_MASK_CONFIG = new InjectionToken<InputMaskConfig>(\n  'InputMaskConfig',\n)\n","import { isPlatformServer } from '@angular/common'\nimport {\n  AfterViewInit,\n  Directive,\n  ElementRef,\n  HostListener,\n  Inject,\n  Input,\n  NgZone,\n  OnDestroy,\n  OnInit,\n  Optional,\n  PLATFORM_ID,\n  Renderer2,\n  Self,\n} from '@angular/core'\nimport {\n  AbstractControl,\n  ControlValueAccessor,\n  NgControl,\n  Validator,\n} from '@angular/forms'\nimport _Inputmask from 'inputmask'\n\nimport type Inputmask from 'inputmask'\n\nimport { INPUT_MASK_CONFIG, InputMaskConfig } from './config'\n\nimport type { InputmaskOptions } from './input-mask.types'\n\nconst InputmaskConstructor =\n  (_Inputmask as unknown as { default?: Inputmask.Static }).default ||\n  _Inputmask\n\n@Directive({\n  selector: '[nggvInputMask]',\n})\nexport class NggvInputMaskDirective<T = any>\n  implements OnInit, AfterViewInit, OnDestroy, ControlValueAccessor, Validator\n{\n  /** Input settings of directive */\n  @Input() nggvInputMask: InputmaskOptions<T> = {}\n\n  inputMaskPlugin: Inputmask.Instance | undefined\n  nativeInputElement: HTMLInputElement | undefined\n  defaultInputMaskConfig = new InputMaskConfig()\n\n  private mutationObserver: MutationObserver | undefined\n\n  constructor(\n    @Optional() @Self() public ngControl: NgControl,\n    @Inject(INPUT_MASK_CONFIG) config: InputMaskConfig,\n    @Inject(PLATFORM_ID) private platformId: string,\n    private elementRef: ElementRef<HTMLInputElement | any>,\n    private renderer: Renderer2,\n    private ngZone: NgZone,\n  ) {\n    if (this.ngControl) {\n      this.ngControl.valueAccessor = this\n    }\n    this.setNativeInputElement(config)\n  }\n\n  @HostListener('input', ['$event.target.value'])\n  onInput = (_: any) => {\n    // Empty method\n  }\n\n  @HostListener('blur', ['$event.target.value'])\n  onTouched = (_: any) => {\n    // Empty method\n  }\n\n  @HostListener('keyup', ['$event'])\n  onKeyUp(event: KeyboardEvent) {\n    // Trigger \"onInput\" when pressing delete or backspace, when input is focused\n    if (['Delete', 'Backspace'].includes(event.key)) {\n      this.elementRef.nativeElement.dispatchEvent(\n        new Event('input', {\n          bubbles: true,\n          cancelable: true,\n        }),\n      )\n    }\n  }\n\n  ngOnInit() {\n    if (this.control) {\n      this.control.setValidators(\n        this.control.validator\n          ? [this.control.validator, this.validate]\n          : [this.validate],\n      )\n\n      this.control.updateValueAndValidity()\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.inputMaskPlugin?.remove()\n    this.mutationObserver?.disconnect()\n  }\n\n  initInputMask() {\n    if (\n      isPlatformServer(this.platformId) ||\n      !this.nativeInputElement ||\n      !Object.keys(this.nggvInputMask ?? {}).length\n    ) {\n      return\n    }\n\n    this.inputMaskPlugin = this.ngZone.runOutsideAngular(() =>\n      new InputmaskConstructor(this.inputMaskOptions).mask(\n        this.nativeInputElement as HTMLInputElement,\n      ),\n    )\n\n    if (this.control) {\n      setTimeout(() => {\n        this.control!.updateValueAndValidity()\n      })\n    }\n  }\n\n  ngAfterViewInit() {\n    this.initInputMask()\n  }\n\n  get inputMaskOptions(): Inputmask.Options {\n    const { parser, ...options } = this.nggvInputMask\n    return options\n  }\n\n  writeValue(value: string): void {\n    if (this.nativeInputElement) {\n      this.renderer.setProperty(this.nativeInputElement, 'value', value ?? '')\n    }\n  }\n\n  registerOnChange(fn: (_: T | null) => void): void {\n    // Use injected parser from settings to modify value\n    // of users desire\n    this.onInput = (value) => {\n      const parser = this.nggvInputMask?.parser\n      const newValue = parser && value ? parser(value) : value\n      fn(newValue)\n    }\n  }\n\n  registerOnTouched(fn: any): void {\n    this.onTouched = fn\n  }\n\n  validate = (control: AbstractControl): { [key: string]: any } | null =>\n    !control.value || !this.inputMaskPlugin || this.inputMaskPlugin.isValid()\n      ? null\n      : { invalidformat: true }\n\n  setDisabledState(disabled: boolean): void {\n    if (this.nativeInputElement) {\n      this.renderer.setProperty(this.nativeInputElement, 'disabled', disabled)\n    }\n  }\n\n  private get control(): AbstractControl | null | undefined {\n    return this.ngControl?.control\n  }\n\n  private setNativeInputElement(config: InputMaskConfig) {\n    if (this.elementRef.nativeElement.tagName === 'INPUT') {\n      this.nativeInputElement = this.elementRef.nativeElement\n    } else {\n      this.defaultInputMaskConfig = {\n        ...this.defaultInputMaskConfig,\n        ...config,\n      }\n      if (this.defaultInputMaskConfig.isAsync) {\n        // Create an observer instance linked to the callback function\n        this.mutationObserver = new MutationObserver((mutationsList) => {\n          for (const mutation of mutationsList) {\n            if (mutation.type === 'childList') {\n              const nativeInputElement =\n                this.elementRef.nativeElement.querySelector(\n                  this.defaultInputMaskConfig.inputSelector,\n                )\n              if (nativeInputElement) {\n                this.nativeInputElement = nativeInputElement\n                this.mutationObserver?.disconnect()\n                this.initInputMask()\n              }\n            }\n          }\n        })\n\n        // Start observing the target node for configured mutations\n        this.mutationObserver.observe(this.elementRef.nativeElement, {\n          childList: true,\n          subtree: true,\n        })\n      } else {\n        this.nativeInputElement = this.elementRef.nativeElement.querySelector(\n          this.defaultInputMaskConfig.inputSelector,\n        )\n      }\n    }\n  }\n}\n","import { ModuleWithProviders, NgModule } from '@angular/core'\n\nimport { INPUT_MASK_CONFIG, InputMaskConfig } from './config'\nimport { InputMaskFormatPipe } from './input-mask-format.pipe'\nimport { NggvInputMaskDirective } from './input-mask.directive'\n\n@NgModule({\n  declarations: [NggvInputMaskDirective, InputMaskFormatPipe],\n  exports: [NggvInputMaskDirective, InputMaskFormatPipe],\n  providers: [\n    {\n      provide: INPUT_MASK_CONFIG,\n      useClass: InputMaskConfig,\n    },\n  ],\n})\nexport class NggvInputMaskModule {\n  static forRoot(\n    config?: Partial<InputMaskConfig>,\n  ): ModuleWithProviders<NggvInputMaskModule> {\n    return {\n      ngModule: NggvInputMaskModule,\n      providers: [{ provide: INPUT_MASK_CONFIG, useValue: config }],\n    }\n  }\n}\n","import { InputmaskOptions } from './input-mask.types'\n\nexport const createMask = <T>(\n  options: string | InputmaskOptions<T>,\n): InputmaskOptions<T> =>\n  typeof options === 'string' ? { mask: options } : options\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

@@ -0,0 +1,262 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, Self, Optional, Inject, HostBinding, Input, Output, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
+import * as i3 from '@jsverse/transloco';
+import { TRANSLOCO_SCOPE } from '@jsverse/transloco';
+import { Subject } from 'rxjs';
+import { takeUntil, debounceTime } from 'rxjs/operators';
+import { NggvBaseControlValueAccessorComponent } from '@sebgroup/green-angular/src/v-angular/base-control-value-accessor';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i4 from '@sebgroup/green-angular/src/v-angular/input-mask';
+import { NggvInputMaskModule } from '@sebgroup/green-angular/src/v-angular/input-mask';
+import * as i5 from '@sebgroup/green-angular/src/v-angular/character-countdown';
+import { NggvCharacterCountdownDirectiveModule } from '@sebgroup/green-angular/src/v-angular/character-countdown';
+import * as i6 from '@sebgroup/green-angular/src/lib/shared';
+import { NggCoreWrapperModule } from '@sebgroup/green-angular/src/lib/shared';
+import { NggvI18nModule } from '@sebgroup/green-angular/src/v-angular/i18n';
+
+/**
+ * Input fields allow users to add and edit text.
+ * https://designlibrary.sebgroup.com/components/component-input
+ */
+class NggvInputComponent extends NggvBaseControlValueAccessorComponent {
+    /** Minimum length (number of characters) of value. */
+    set minLength(length) {
+        this._minlength = length;
+    }
+    /**
+     * Minimum length (number of characters) of value.
+     * @deprecated minlength triggers angular-template-validation. Use @Input() minLength instead.
+     */
+    set minlength(length) {
+        this._minlength = length;
+    }
+    get minlength() {
+        return this._minlength;
+    }
+    /** Maximum length (number of characters) of value. */
+    set maxLength(length) {
+        this._maxlength = length;
+        this.writeValue(this.state);
+    }
+    get maxlength() {
+        return this._maxlength;
+    }
+    /**
+     * Maximum length (number of characters) of value.
+     * @deprecated maxlength triggers angular-template-validation. Use @Input() maxLength instead.
+     */
+    set maxlength(length) {
+        this._maxlength = length;
+        this.writeValue(this.state);
+    }
+    set showCharacterCountdown(option) {
+        this._showCharacterCountDown = option;
+    }
+    get showCharacterCountdown() {
+        return this._showCharacterCountDown && this.hasMaxLength;
+    }
+    set inputMask(newInputMask) {
+        // Hide input field
+        this.hideInput$.next(true);
+        this.cdr.detectChanges();
+        this._inputMask = newInputMask;
+        // Show input field to reload input-mask settings upon update
+        setTimeout(() => {
+            this.hideInput$.next(false);
+            this.cdr.detectChanges();
+        }, 200);
+    }
+    get inputMask() {
+        return this._inputMask;
+    }
+    get control() {
+        return this.ngControl?.control ?? this._formControl;
+    }
+    /** Returns if maxlength is used */
+    get hasMaxLength() {
+        return !!this.maxlength && this.maxlength !== Number.MAX_SAFE_INTEGER;
+    }
+    constructor(ngControl, translocoScope, cdr) {
+        super(ngControl, translocoScope, cdr);
+        this.ngControl = ngControl;
+        this.translocoScope = translocoScope;
+        this.cdr = cdr;
+        /** Adding .gds-form-item as a class to host element */
+        this.class = 'gds-form-item';
+        /** Special property used for selecting DOM elements during automated UI testing. */
+        this.thook = 'input';
+        /** Type of input field. Should avoid types that modify field too much such as range. */
+        this.type = 'text';
+        /** If set to "on", hint for form autofill feature. */
+        this.autocomplete = 'on';
+        /** If set to true, the value will not be editable. */
+        this.readonly = false;
+        /** If set to true, enables the Angular template-driven email validator. */
+        this.email = false;
+        /** Minimum value required for numeric input types. */
+        this.min = 0;
+        /** Maximum value required for numeric input types. */
+        this.max = Number.MAX_SAFE_INTEGER;
+        /** Incremental values that are valid for numeric input types. */
+        this.step = 1;
+        this._maxlength = Number.MAX_SAFE_INTEGER;
+        this._minlength = 0;
+        /** Wether to show label that tells how many characters are still left to be entered. Will only be set if maxLength is also set */
+        this._showCharacterCountDown = true;
+        /** Pattern the value must match to be valid. */
+        this.pattern = '';
+        /** Amount of time to wait until emitting (nggvINput) event */
+        this.debounceTime = 500;
+        /** Emits every time the value of the inner input field changes, independantly of updates on the formcontroller */
+        this.nggvInput = new EventEmitter();
+        this._formControl = new UntypedFormControl();
+        /** Toggler for showing or hiding the input field */
+        this.hideInput$ = new Subject();
+        this.inputChange$ = new Subject();
+        this._destroy$ = new Subject();
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.inputChange$
+            .pipe(takeUntil(this._destroy$), debounceTime(this.debounceTime))
+            .subscribe((inputValue) => {
+            this.nggvInput.emit(inputValue);
+        });
+    }
+    ngOnDestroy() {
+        this._destroy$.next(true);
+        this._destroy$.complete();
+    }
+    writeValue(value) {
+        // maxLength will only work with string values
+        if (value?.length &&
+            value.length > this.maxlength &&
+            this.control.touched) {
+            // cut value to match max length
+            this.state = this.cutTextAfterMaxLength(value);
+            if (value.length !== this.state.length) {
+                this.onChange(this.state);
+            }
+            // emit value
+        }
+        else {
+            // update state
+            this.state = value;
+        }
+        this.cdr.detectChanges();
+    }
+    cutTextAfterMaxLength(value) {
+        if (typeof value === 'string') {
+            return value.substring(0, this.maxlength);
+        }
+        return value;
+    }
+    /** @internal */
+    onInput(event) {
+        event.stopPropagation();
+        if (this.disabled)
+            return;
+        this.state = event.target.value;
+        this.onChange(this.state);
+        this.inputChange$.next(this.state);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvInputComponent, 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: "17.3.12", type: NggvInputComponent, 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", 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=\"gds-field-label hide-if-empty\"\n  [attr.for]=\"id + '-input'\"\n  *transloco=\"let t; read: scope\"\n>\n  <ng-template\n    *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n  ></ng-template>\n  <ng-template #basicLabelContentTpl>\n    <!-- to trigger css:empty if no label was added -->\n    <ng-container *ngIf=\"label\">\n      {{ label }}\n      <span\n        *ngIf=\"optional === true || (required !== true && optional !== false)\"\n        class=\"gds-field-label--optional\"\n      >\n        ({{ t('label.optional') }})\n      </span>\n    </ng-container>\n  </ng-template>\n</label>\n\n<!-- DESCRIPTION -->\n<div class=\"form-info description hide-if-empty\" *ngIf=\"descriptionIsVisible\">\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=\"gds-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        title=\"\"\n        [disabled]=\"disabled\"\n        [autocomplete]=\"autocomplete\"\n        [autofocus]=\"autofocus\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [value]=\"state\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n    </div>\n\n    <!-- INPUT FIELD WITH MASK -->\n    <div\n      class=\"input-group\"\n      *ngIf=\"!!inputMask && (hideInput$ | async) === false\"\n    >\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"gds-field\"\n        autocomplete=\"off\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [attr.aria-describedby]=\"id + '-message'\"\n        [nggvInputMask]=\"inputMask\"\n        title=\"\"\n        [formControl]=\"control\"\n      />\n    </div>\n\n    <div class=\"input-group-suffix hide-if-empty\">\n      <ng-content select=\"[slot='suffix']\"></ng-content>\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  <!-- ERRORS -->\n  <div\n    class=\"gds-form-item__footer error-wrapper\"\n    *transloco=\"let t; read: scope\"\n  >\n    <span\n      class=\"form-info form-info--error\"\n      [attr.for]=\"id + '-input'\"\n      *ngIf=\"invalid && (error || ngControl?.invalid)\"\n    >\n      <span class=\"error-icon\">\n        <gds-icon-triangle-exclamation\n          width=\"16\"\n          height=\"16\"\n          solid=\"true\"\n          *nggCoreElement\n        ></gds-icon-triangle-exclamation>\n      </span>\n\n      <span\n        *ngIf=\"error; else errorsRef\"\n        [attr.data-thook]=\"thook + '-errorlabel'\"\n        >{{ error }}</span\n      >\n      <ng-template #errorsRef>\n        <span\n          *ngIf=\"firstError as error\"\n          [attr.data-thook]=\"thook + '-errorlabel'\"\n        >\n          {{ t('error.field' + error?.code, error?.params) }}\n        </span>\n      </ng-template>\n    </span>\n\n    <ng-container *ngIf=\"!inputMask && hasMaxLength && showCharacterCountdown\">\n      <span\n        *nggvCharacterCountdown=\"\n          maxlength;\n          currentLength: (inputRef?.nativeElement?.value ?? '').length;\n          charactersLeft as charactersLeft\n        \"\n        class=\"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{--sg-text-primary: #333;--sg-form-control-bg: #fff;--gds-ref-pallet-base100: hsl(0, 0%, 97%);--sg-border-radius: 4px;--sg-border-width: 1px;--sg-border-color: #868686}:host *{box-sizing:border-box}: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%;line-height:18px;font-size:1rem}: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: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{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .gds-form-item__footer .form-info--error .error-icon{margin-top:.128rem;align-items:center}\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.NggvInputMaskDirective, 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: "directive", type: i6.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.InputMaskFormatPipe, name: "nggvInputMaskFormat" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nggv-input', template: "<!-- LABEL -->\n<label\n  [id]=\"id + '-label'\"\n  class=\"gds-field-label hide-if-empty\"\n  [attr.for]=\"id + '-input'\"\n  *transloco=\"let t; read: scope\"\n>\n  <ng-template\n    *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n  ></ng-template>\n  <ng-template #basicLabelContentTpl>\n    <!-- to trigger css:empty if no label was added -->\n    <ng-container *ngIf=\"label\">\n      {{ label }}\n      <span\n        *ngIf=\"optional === true || (required !== true && optional !== false)\"\n        class=\"gds-field-label--optional\"\n      >\n        ({{ t('label.optional') }})\n      </span>\n    </ng-container>\n  </ng-template>\n</label>\n\n<!-- DESCRIPTION -->\n<div class=\"form-info description hide-if-empty\" *ngIf=\"descriptionIsVisible\">\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=\"gds-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        title=\"\"\n        [disabled]=\"disabled\"\n        [autocomplete]=\"autocomplete\"\n        [autofocus]=\"autofocus\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [value]=\"state\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n    </div>\n\n    <!-- INPUT FIELD WITH MASK -->\n    <div\n      class=\"input-group\"\n      *ngIf=\"!!inputMask && (hideInput$ | async) === false\"\n    >\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"gds-field\"\n        autocomplete=\"off\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [attr.aria-describedby]=\"id + '-message'\"\n        [nggvInputMask]=\"inputMask\"\n        title=\"\"\n        [formControl]=\"control\"\n      />\n    </div>\n\n    <div class=\"input-group-suffix hide-if-empty\">\n      <ng-content select=\"[slot='suffix']\"></ng-content>\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  <!-- ERRORS -->\n  <div\n    class=\"gds-form-item__footer error-wrapper\"\n    *transloco=\"let t; read: scope\"\n  >\n    <span\n      class=\"form-info form-info--error\"\n      [attr.for]=\"id + '-input'\"\n      *ngIf=\"invalid && (error || ngControl?.invalid)\"\n    >\n      <span class=\"error-icon\">\n        <gds-icon-triangle-exclamation\n          width=\"16\"\n          height=\"16\"\n          solid=\"true\"\n          *nggCoreElement\n        ></gds-icon-triangle-exclamation>\n      </span>\n\n      <span\n        *ngIf=\"error; else errorsRef\"\n        [attr.data-thook]=\"thook + '-errorlabel'\"\n        >{{ error }}</span\n      >\n      <ng-template #errorsRef>\n        <span\n          *ngIf=\"firstError as error\"\n          [attr.data-thook]=\"thook + '-errorlabel'\"\n        >\n          {{ t('error.field' + error?.code, error?.params) }}\n        </span>\n      </ng-template>\n    </span>\n\n    <ng-container *ngIf=\"!inputMask && hasMaxLength && showCharacterCountdown\">\n      <span\n        *nggvCharacterCountdown=\"\n          maxlength;\n          currentLength: (inputRef?.nativeElement?.value ?? '').length;\n          charactersLeft as charactersLeft\n        \"\n        class=\"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{--sg-text-primary: #333;--sg-form-control-bg: #fff;--gds-ref-pallet-base100: hsl(0, 0%, 97%);--sg-border-radius: 4px;--sg-border-width: 1px;--sg-border-color: #868686}:host *{box-sizing:border-box}: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%;line-height:18px;font-size:1rem}: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: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{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .gds-form-item__footer .form-info--error .error-icon{margin-top:.128rem;align-items:center}\n"] }]
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
+                    type: Self
+                }, {
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [TRANSLOCO_SCOPE]
+                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class']
+            }], thook: [{
+                type: HostBinding,
+                args: ['attr.data-thook']
+            }, {
+                type: Input
+            }], type: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], autocomplete: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], email: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }], minLength: [{
+                type: Input
+            }], minlength: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
+            }], maxlength: [{
+                type: Input
+            }], showCharacterCountdown: [{
+                type: Input
+            }], pattern: [{
+                type: Input
+            }], debounceTime: [{
+                type: Input
+            }], inputMask: [{
+                type: Input
+            }], nggvInput: [{
+                type: Output
+            }] } });
+
+class NggvInputModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: NggvInputModule, declarations: [NggvInputComponent], imports: [CommonModule,
+            NggvI18nModule,
+            NggvInputMaskModule,
+            ReactiveFormsModule,
+            NggvCharacterCountdownDirectiveModule,
+            NggCoreWrapperModule], exports: [NggvInputComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvInputModule, imports: [CommonModule,
+            NggvI18nModule,
+            NggvInputMaskModule,
+            ReactiveFormsModule,
+            NggvCharacterCountdownDirectiveModule,
+            NggCoreWrapperModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvInputModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NggvInputComponent],
+                    imports: [
+                        CommonModule,
+                        NggvI18nModule,
+                        NggvInputMaskModule,
+                        ReactiveFormsModule,
+                        NggvCharacterCountdownDirectiveModule,
+                        NggCoreWrapperModule,
+                    ],
+                    exports: [NggvInputComponent],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NggvInputComponent, NggvInputModule };
+//# sourceMappingURL=sebgroup-green-angular-src-v-angular-input.mjs.map