npm - @sebgroup/green-angular - Versions diffs - 5.1.2 → 5.2.0 - Mend

@sebgroup/green-angular 5.1.2 → 5.2.0

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

Files changed (434) hide show

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

@@ -1,25 +1,27 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Self, Optional, Inject, HostBinding, Input, Output, NgModule } 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 { NgvBaseControlValueAccessorComponent } from '@sebgroup/green-angular/src/v-angular/base-control-value-accessor';
+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 { NgvInputMaskModule } 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 { NggCharacterCountdownDirectiveModule } from '@sebgroup/green-angular/src/v-angular/character-countdown';
-import { NgvI18nModule } from '@sebgroup/green-angular/src/v-angular/i18n';
+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 NgvInputComponent extends NgvBaseControlValueAccessorComponent {
+class NggvInputComponent extends NggvBaseControlValueAccessorComponent {
     /** Minimum length (number of characters) of value. */
     set minLength(length) {
         this._minlength = length;
@@ -108,11 +110,6 @@ class NgvInputComponent extends NgvBaseControlValueAccessorComponent {
         this.pattern = '';
         /** Amount of time to wait until emitting (nggvINput) event */
         this.debounceTime = 500;
-        /**
-         * @deprecated
-         * Text to put in badge
-         */
-        this.badgeText = '';
         /** 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();
@@ -135,7 +132,9 @@ class NgvInputComponent extends NgvBaseControlValueAccessorComponent {
     }
     writeValue(value) {
         // maxLength will only work with string values
-        if (value?.length && value.length > this.maxlength) {
+        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) {
@@ -164,12 +163,12 @@ class NgvInputComponent extends NgvBaseControlValueAccessorComponent {
         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: 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: "17.3.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: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" }] }); }
+    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;font-family:inherit}:host .gds-input-wrapper{position:relative;transition:all .2s ease-in-out,outline-offset 0s,outline-width 0s;border:1px solid #868686;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit;height:2.625rem;display:flex}: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 .gds-input-wrapper *,:host .gds-input-wrapper *:before,:host .gds-input-wrapper *:after{box-sizing:border-box}:host .gds-input-wrapper .input-group-prefix{min-height:2.5rem;border:none;border-radius:3px;height:2.625rem;min-width:2.625rem;border-top-right-radius:0!important;border-bottom-right-radius:0!important;display:flex;align-items:center;justify-content:center}:host .gds-input-wrapper .input-group-prefix[disabled]{background-color:#f8f8f8!important;color:#adadad}@media (max-width: 35.98em){:host .gds-input-wrapper .input-group-prefix{min-width:initial}}:host .gds-input-wrapper .input-group-prefix:empty{display:none}:host .gds-input-wrapper .input-group-suffix{min-height:2.5rem;border:none;border-radius:3px;height:2.625rem;min-width:2.625rem;border-top-left-radius:0!important;border-bottom-left-radius:0!important;display:flex;align-items:center;justify-content:center}:host .gds-input-wrapper .input-group-suffix[disabled]{background-color:#f8f8f8!important;color:#adadad}@media (max-width: 35.98em){:host .gds-input-wrapper .input-group-suffix{min-width:initial}}:host .gds-input-wrapper .input-group-suffix:empty{display:none}:host .gds-input-wrapper .input-group{width:100%}:host .gds-input-wrapper .input-group input{outline:none;min-height:2.5rem;height:2.625rem;line-height:1.5;font-size:1rem;font-family:inherit;border:none;min-height:2.375rem;width:100%}:host .gds-input-wrapper .input-group input *,:host .gds-input-wrapper .input-group input *:before,:host .gds-input-wrapper .input-group input *:after{box-sizing:border-box}:host .gds-input-wrapper .input-group input:hover{border-color:#41b0ee}:host .gds-input-wrapper .input-group input:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .gds-input-wrapper .input-group input:active{border-color:#cecece}:host .gds-input-wrapper .input-group input[disabled]{background-color:#f8f8f8;border-color:#cecece}:host .gds-input-wrapper .input-group input[disabled]::placeholder{color:#cecece}:host .gds-input-wrapper .input-group input:not(:focus){border-right:none;padding-right:0}:host .gds-input-wrapper .input-group input:focus{padding-right:0}:host .gds-input-wrapper:has(.input-group-prefix:not(:empty)) .input-group input{border-bottom-left-radius:0;border-top-left-radius:0}:host .gds-input-wrapper:has(.input-group-suffix:not(:empty)) .input-group input{border-bottom-right-radius:0;border-top-right-radius:0}:host 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 .gds-field-label--optional{font-weight:400}: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: NgvInputComponent, decorators: [{
+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=\"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: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"] }]
+            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;font-family:inherit}:host .gds-input-wrapper{position:relative;transition:all .2s ease-in-out,outline-offset 0s,outline-width 0s;border:1px solid #868686;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit;height:2.625rem;display:flex}: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 .gds-input-wrapper *,:host .gds-input-wrapper *:before,:host .gds-input-wrapper *:after{box-sizing:border-box}:host .gds-input-wrapper .input-group-prefix{min-height:2.5rem;border:none;border-radius:3px;height:2.625rem;min-width:2.625rem;border-top-right-radius:0!important;border-bottom-right-radius:0!important;display:flex;align-items:center;justify-content:center}:host .gds-input-wrapper .input-group-prefix[disabled]{background-color:#f8f8f8!important;color:#adadad}@media (max-width: 35.98em){:host .gds-input-wrapper .input-group-prefix{min-width:initial}}:host .gds-input-wrapper .input-group-prefix:empty{display:none}:host .gds-input-wrapper .input-group-suffix{min-height:2.5rem;border:none;border-radius:3px;height:2.625rem;min-width:2.625rem;border-top-left-radius:0!important;border-bottom-left-radius:0!important;display:flex;align-items:center;justify-content:center}:host .gds-input-wrapper .input-group-suffix[disabled]{background-color:#f8f8f8!important;color:#adadad}@media (max-width: 35.98em){:host .gds-input-wrapper .input-group-suffix{min-width:initial}}:host .gds-input-wrapper .input-group-suffix:empty{display:none}:host .gds-input-wrapper .input-group{width:100%}:host .gds-input-wrapper .input-group input{outline:none;min-height:2.5rem;height:2.625rem;line-height:1.5;font-size:1rem;font-family:inherit;border:none;min-height:2.375rem;width:100%}:host .gds-input-wrapper .input-group input *,:host .gds-input-wrapper .input-group input *:before,:host .gds-input-wrapper .input-group input *:after{box-sizing:border-box}:host .gds-input-wrapper .input-group input:hover{border-color:#41b0ee}:host .gds-input-wrapper .input-group input:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .gds-input-wrapper .input-group input:active{border-color:#cecece}:host .gds-input-wrapper .input-group input[disabled]{background-color:#f8f8f8;border-color:#cecece}:host .gds-input-wrapper .input-group input[disabled]::placeholder{color:#cecece}:host .gds-input-wrapper .input-group input:not(:focus){border-right:none;padding-right:0}:host .gds-input-wrapper .input-group input:focus{padding-right:0}:host .gds-input-wrapper:has(.input-group-prefix:not(:empty)) .input-group input{border-bottom-left-radius:0;border-top-left-radius:0}:host .gds-input-wrapper:has(.input-group-suffix:not(:empty)) .input-group input{border-bottom-right-radius:0;border-top-right-radius:0}:host 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 .gds-field-label--optional{font-weight:400}: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
                 }, {
@@ -217,39 +216,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], debounceTime: [{
                 type: Input
-            }], badgeText: [{
-                type: Input
             }], inputMask: [{
                 type: Input
             }], nggvInput: [{
                 type: Output
             }] } });
-class NgvInputModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgvInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: NgvInputModule, declarations: [NgvInputComponent], imports: [CommonModule,
-            NgvI18nModule,
-            NgvInputMaskModule,
+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,
-            NggCharacterCountdownDirectiveModule], exports: [NgvInputComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgvInputModule, imports: [CommonModule,
-            NgvI18nModule,
-            NgvInputMaskModule,
+            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,
-            NggCharacterCountdownDirectiveModule] }); }
+            NggvCharacterCountdownDirectiveModule,
+            NggCoreWrapperModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgvInputModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvInputModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [NgvInputComponent],
+                    declarations: [NggvInputComponent],
                     imports: [
                         CommonModule,
-                        NgvI18nModule,
-                        NgvInputMaskModule,
+                        NggvI18nModule,
+                        NggvInputMaskModule,
                         ReactiveFormsModule,
-                        NggCharacterCountdownDirectiveModule,
+                        NggvCharacterCountdownDirectiveModule,
+                        NggCoreWrapperModule,
                     ],
-                    exports: [NgvInputComponent],
+                    exports: [NggvInputComponent],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
         }] });
@@ -257,5 +258,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
-export { NgvInputComponent, NgvInputModule };
+export { NggvInputComponent, NggvInputModule };
 //# sourceMappingURL=sebgroup-green-angular-src-v-angular-input.mjs.map

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

	@@ -1 +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 '@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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"}
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 '@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 { NggvBaseControlValueAccessorComponent } 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 NggvInputComponent\n extends NggvBaseControlValueAccessorComponent\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: string \| null \| undefined =\n '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 /* 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 (\n value?.length &&\n value.length > this.maxlength &&\n this.control.touched\n ) {\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=\"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","import { CommonModule } from '@angular/common'\nimport { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'\nimport { ReactiveFormsModule } from '@angular/forms'\n\nimport { NggCoreWrapperModule } from '@sebgroup/green-angular/src/lib/shared'\nimport { NggvCharacterCountdownDirectiveModule } from '@sebgroup/green-angular/src/v-angular/character-countdown'\nimport { NggvI18nModule } from '@sebgroup/green-angular/src/v-angular/i18n'\nimport { NggvInputMaskModule } from '@sebgroup/green-angular/src/v-angular/input-mask'\nimport { NggvInputComponent } from './input.component'\n\n@NgModule({\n declarations: [NggvInputComponent],\n imports: [\n CommonModule,\n NggvI18nModule,\n NggvInputMaskModule,\n ReactiveFormsModule,\n NggvCharacterCountdownDirectiveModule,\n NggCoreWrapperModule,\n ],\n exports: [NggvInputComponent],\n schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class NggvInputModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}