npm - @sebgroup/green-angular - Versions diffs - 6.0.4 → 6.0.5 - Mend

@sebgroup/green-angular 6.0.4 → 6.0.5

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 (15) hide show

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

@@ -189,11 +189,11 @@ class NggvInputComponent extends NggvBaseControlValueAccessorComponent {
         this.inputChange$.next(this.state);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NggvInputComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NggvInputComponent, selector: "nggv-input", inputs: { size: "size", thook: "thook", type: "type", placeholder: "placeholder", autocomplete: "autocomplete", readonly: "readonly", email: "email", min: "min", max: "max", step: "step", minLength: "minLength", minlength: "minlength", maxLength: "maxLength", maxlength: "maxlength", showCharacterCountdown: "showCharacterCountdown", pattern: "pattern", debounceTime: "debounceTime", inputMask: "inputMask" }, outputs: { nggvInput: "nggvInput" }, host: { properties: { "class": "this.size", "attr.data-thook": "this.thook" } }, usesInheritance: true, ngImport: i0, template: "<!-- LABEL -->\n<label\n  [id]=\"id + '-label'\"\n  class=\"gds-field-label hide-if-empty\"\n  [attr.for]=\"id + '-input'\"\n  *transloco=\"let t; read: scope\"\n>\n  <ng-template\n    *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n  ></ng-template>\n  <ng-template #basicLabelContentTpl>\n    <!-- to trigger css:empty if no label was added -->\n    <ng-container *ngIf=\"label\">\n      {{ label }}\n      <span\n        *ngIf=\"optional === true || (required !== true && optional !== false)\"\n        class=\"gds-field-label--optional\"\n      >\n        ({{ t('label.optional') }})\n      </span>\n    </ng-container>\n  </ng-template>\n</label>\n\n<!-- DESCRIPTION -->\n<div\n  class=\"form-info description hide-if-empty\"\n  *ngIf=\"description && descriptionIsVisible\"\n>\n  {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container *ngIf=\"locked\">\n  <ng-template\n    *ngTemplateOutlet=\"\n      lockedTpl || defaultLockedTpl;\n      context: { $implicit: state }\n    \"\n  ></ng-template>\n  <ng-template #defaultLockedTpl>\n    <div\n      [id]=\"id + '-input'\"\n      class=\"nggv-field--locked\"\n      [attr.name]=\"name\"\n      [attr.value]=\"state\"\n      [attr.role]=\"role\"\n    >\n      <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n      <ng-container *ngIf=\"state\">\n        <ng-container *ngIf=\"!inputMask\">\n          {{ state }}\n        </ng-container>\n        <ng-container *ngIf=\"!!inputMask\">\n          {{ state | nggvInputMaskFormat: inputMask }}\n        </ng-container>\n      </ng-container>\n    </div>\n  </ng-template>\n</ng-container>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n  <div class=\"gds-input-wrapper\" [class.nggv-field--error]=\"invalid\">\n    <div class=\"input-group-prefix hide-if-empty\">\n      <ng-content select=\"[slot='prefix']\"></ng-content>\n    </div>\n\n    <!-- INPUT FIELD -->\n    <div class=\"input-group\" *ngIf=\"!inputMask\">\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"gds-field\"\n        [attr.type]=\"type\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required || null\"\n        [attr.email]=\"email\"\n        [attr.aria-describedby]=\"id + '-message'\"\n        [min]=\"min\"\n        [max]=\"max\"\n        [step]=\"step\"\n        [attr.maxlength]=\"maxlength\"\n        [attr.minlength]=\"minlength\"\n        [pattern]=\"pattern\"\n        title=\"\"\n        [disabled]=\"disabled\"\n        [autocomplete]=\"autocomplete\"\n        [autofocus]=\"autofocus\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [value]=\"state\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n    </div>\n\n    <!-- INPUT FIELD WITH MASK -->\n    <div\n      class=\"input-group\"\n      *ngIf=\"!!inputMask && (hideInput$ | async) === false\"\n    >\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"gds-field\"\n        autocomplete=\"off\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required || null\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [attr.aria-describedby]=\"id + '-message'\"\n        [nggvInputMask]=\"inputMask\"\n        title=\"\"\n        [formControl]=\"control\"\n      />\n    </div>\n\n    <div class=\"input-group-suffix hide-if-empty\">\n      <ng-content select=\"[slot='suffix']\"></ng-content>\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  <!-- ERRORS -->\n  <div\n    class=\"gds-form-item__footer error-wrapper\"\n    *transloco=\"let t; read: scope\"\n  >\n    <span\n      class=\"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 form-info--countdown\"\n        style=\"text-align: right\"\n      >\n        {{ charactersLeft }} {{ t('label.maxlength') }}\n      </span>\n    </ng-container>\n  </div>\n</ng-container>\n", styles: [":host{--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;display:flex;flex-direction:column;max-width:100%;position:relative;width:100%;z-index:0}:host:not(:last-child){margin-bottom:1.5rem}:host .gds-form-item__header{display:flex}:host .gds-form-item__header .form-info{font-weight:400}:host .gds-form-item__header button.icon.small{margin-top:-.5rem;margin-right:-.5rem}:host .gds-form-item__labels{flex:1;margin-bottom:.5rem}:host .gds-form-item__labels .form-info{margin-bottom:0}:host .gds-form-item__labels .form-info a:link:not(.button,[aria-disabled]){color:#0062bc}:host .gds-form-item__labels>*{width:100%;display:block}:host .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__expandable-info>div{padding-bottom:.5rem}:host .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__backdrop{transition:none}}:host:has([aria-expanded=true]) .gds-form-item__backdrop{opacity:1;border-radius:.25rem;border-color:var(--gds-ref-pallet-base600)}:host .gds-form-item__footer:not(:empty){margin-top:.5rem;display:flex;column-gap:.5rem}:host .gds-form-item__footer:not(:empty)>span,:host .gds-form-item__footer:not(:empty)>.form-info{font-weight:500;line-height:1.125}:host *{box-sizing:border-box}:host .gds-form-item__footer .form-info{font-weight:500}:host .gds-form-item__footer .form-info.form-info--countdown{font-weight:400}: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{align-items:center}: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-sys-color-base-200)}: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;display:flex;flex-direction:row}: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.nggv-field--error{border-bottom:.125rem solid #9f000a!important;height:100%}: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.small label{font-size:.875rem}:host.small label+.form-info{margin-bottom:.25rem}:host.small label+.gds-input-wrapper{margin-top:.25rem}:host.small .gds-input-wrapper{min-height:2rem}:host.small .gds-input-wrapper .input-group input{padding:.38rem .5rem;line-height:1rem;height:2rem;min-height:2rem;font-size:.875rem}:host.small .gds-input-wrapper .input-group-suffix,:host.small .gds-input-wrapper .input-group-prefix{height:2rem;min-height:2rem;min-width:initial}:host.small .gds-form-item__footer:not(:empty){margin-top:.25rem}:host label:is(label),:host .label:is(label),:host legend:is(label){margin-bottom:0}:host label.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 label+.gds-input-wrapper,:host label+.nggv-field--locked{margin-top:.5rem}:host .gds-field-label--optional{font-weight:400}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%}\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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NggvInputComponent, selector: "nggv-input", inputs: { size: "size", thook: "thook", type: "type", placeholder: "placeholder", autocomplete: "autocomplete", readonly: "readonly", email: "email", min: "min", max: "max", step: "step", minLength: "minLength", minlength: "minlength", maxLength: "maxLength", maxlength: "maxlength", showCharacterCountdown: "showCharacterCountdown", pattern: "pattern", debounceTime: "debounceTime", inputMask: "inputMask" }, outputs: { nggvInput: "nggvInput" }, host: { properties: { "class": "this.size", "attr.data-thook": "this.thook" } }, usesInheritance: true, ngImport: i0, template: "<!-- LABEL -->\n<label\n  [id]=\"id + '-label'\"\n  class=\"gds-field-label hide-if-empty\"\n  [attr.for]=\"id + '-input'\"\n  *transloco=\"let t; read: scope\"\n>\n  <ng-template\n    *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n  ></ng-template>\n  <ng-template #basicLabelContentTpl>\n    <!-- to trigger css:empty if no label was added -->\n    <ng-container *ngIf=\"label\">\n      {{ label }}\n      <span\n        *ngIf=\"optional === true || (required !== true && optional !== false)\"\n        class=\"gds-field-label--optional\"\n      >\n        ({{ t('label.optional') }})\n      </span>\n    </ng-container>\n  </ng-template>\n</label>\n\n<!-- DESCRIPTION -->\n<div\n  class=\"form-info description hide-if-empty\"\n  *ngIf=\"description && descriptionIsVisible\"\n>\n  {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container *ngIf=\"locked\">\n  <ng-template\n    *ngTemplateOutlet=\"\n      lockedTpl || defaultLockedTpl;\n      context: { $implicit: state }\n    \"\n  ></ng-template>\n  <ng-template #defaultLockedTpl>\n    <div\n      [id]=\"id + '-input'\"\n      class=\"nggv-field--locked\"\n      [attr.name]=\"name\"\n      [attr.value]=\"state\"\n      [attr.role]=\"role\"\n    >\n      <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n      <ng-container *ngIf=\"state\">\n        <ng-container *ngIf=\"!inputMask\">\n          {{ state }}\n        </ng-container>\n        <ng-container *ngIf=\"!!inputMask\">\n          {{ state | nggvInputMaskFormat: inputMask }}\n        </ng-container>\n      </ng-container>\n    </div>\n  </ng-template>\n</ng-container>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n  <div class=\"gds-input-wrapper\" [class.nggv-field--error]=\"invalid\">\n    <div class=\"input-group-prefix hide-if-empty\">\n      <ng-content select=\"[slot='prefix']\"></ng-content>\n    </div>\n\n    <!-- INPUT FIELD -->\n    <div class=\"input-group\" *ngIf=\"!inputMask\">\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"gds-field\"\n        [attr.type]=\"type\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required || null\"\n        [attr.email]=\"email\"\n        [attr.aria-describedby]=\"id + '-message'\"\n        [min]=\"min\"\n        [max]=\"max\"\n        [step]=\"step\"\n        [attr.maxlength]=\"maxlength\"\n        [attr.minlength]=\"minlength\"\n        [pattern]=\"pattern\"\n        title=\"\"\n        [disabled]=\"disabled\"\n        [autocomplete]=\"autocomplete\"\n        [autofocus]=\"autofocus\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [value]=\"state\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n    </div>\n\n    <!-- INPUT FIELD WITH MASK -->\n    <div\n      class=\"input-group\"\n      *ngIf=\"!!inputMask && (hideInput$ | async) === false\"\n    >\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"gds-field\"\n        autocomplete=\"off\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required || null\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [attr.aria-describedby]=\"id + '-message'\"\n        [nggvInputMask]=\"inputMask\"\n        title=\"\"\n        [formControl]=\"control\"\n      />\n    </div>\n\n    <div class=\"input-group-suffix hide-if-empty\">\n      <ng-content select=\"[slot='suffix']\"></ng-content>\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  <!-- ERRORS -->\n  <div\n    class=\"gds-form-item__footer error-wrapper\"\n    *transloco=\"let t; read: scope\"\n  >\n    <span\n      class=\"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 form-info--countdown\"\n        style=\"text-align: right\"\n      >\n        {{ charactersLeft }} {{ t('label.maxlength') }}\n      </span>\n    </ng-container>\n  </div>\n</ng-container>\n", styles: [":host{--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;display:flex;flex-direction:column;max-width:100%;position:relative;width:100%;z-index:0}:host:not(:last-child){margin-bottom:1.5rem}:host .gds-form-item__header{display:flex}:host .gds-form-item__header .form-info{font-weight:400}:host .gds-form-item__header button.icon.small{margin-top:-.5rem;margin-right:-.5rem}:host .gds-form-item__labels{flex:1;margin-bottom:.5rem}:host .gds-form-item__labels .form-info{margin-bottom:0}:host .gds-form-item__labels .form-info a:link:not(.button,[aria-disabled]){color:#0062bc}:host .gds-form-item__labels>*{width:100%;display:block}:host .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__expandable-info>div{padding-bottom:.5rem}:host .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__backdrop{transition:none}}:host:has([aria-expanded=true]) .gds-form-item__backdrop{opacity:1;border-radius:.25rem;border-color:var(--gds-ref-pallet-base600)}:host .gds-form-item__footer:not(:empty){margin-top:.5rem;display:flex;column-gap:.5rem}:host .gds-form-item__footer:not(:empty)>span,:host .gds-form-item__footer:not(:empty)>.form-info{font-weight:500;line-height:1.125}:host *{box-sizing:border-box}:host .gds-form-item__footer .form-info{font-weight:500}:host .gds-form-item__footer .form-info.form-info--countdown{font-weight:400}: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{align-items:center}: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-sys-color-base-200)}: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;display:flex;flex-direction:row}: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.nggv-field--error{border-bottom:.125rem solid #9f000a!important;height:100%}: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.small label:not(.form-control){line-height:1rem;font-size:.875rem}:host.small label+.form-info{margin-bottom:.25rem}:host.small label+.gds-input-wrapper{margin-top:.25rem}:host.small .gds-input-wrapper{min-height:2rem}:host.small .gds-input-wrapper .input-group input{padding:.38rem .5rem;line-height:1rem;height:1.875rem;min-height:1.75rem;font-size:.875rem}:host.small .gds-input-wrapper .input-group-suffix,:host.small .gds-input-wrapper .input-group-prefix{height:1.875rem;min-height:1.75rem;min-width:initial}:host.small .gds-form-item__footer:not(:empty){margin-top:.25rem}:host label:is(label),:host .label:is(label),:host legend:is(label){margin-bottom:0}:host label.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 label+.gds-input-wrapper,:host label+.nggv-field--locked{margin-top:.5rem}:host .gds-field-label--optional{font-weight:400}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%}\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: "18.2.13", ngImport: i0, type: NggvInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nggv-input', template: "<!-- LABEL -->\n<label\n  [id]=\"id + '-label'\"\n  class=\"gds-field-label hide-if-empty\"\n  [attr.for]=\"id + '-input'\"\n  *transloco=\"let t; read: scope\"\n>\n  <ng-template\n    *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n  ></ng-template>\n  <ng-template #basicLabelContentTpl>\n    <!-- to trigger css:empty if no label was added -->\n    <ng-container *ngIf=\"label\">\n      {{ label }}\n      <span\n        *ngIf=\"optional === true || (required !== true && optional !== false)\"\n        class=\"gds-field-label--optional\"\n      >\n        ({{ t('label.optional') }})\n      </span>\n    </ng-container>\n  </ng-template>\n</label>\n\n<!-- DESCRIPTION -->\n<div\n  class=\"form-info description hide-if-empty\"\n  *ngIf=\"description && descriptionIsVisible\"\n>\n  {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container *ngIf=\"locked\">\n  <ng-template\n    *ngTemplateOutlet=\"\n      lockedTpl || defaultLockedTpl;\n      context: { $implicit: state }\n    \"\n  ></ng-template>\n  <ng-template #defaultLockedTpl>\n    <div\n      [id]=\"id + '-input'\"\n      class=\"nggv-field--locked\"\n      [attr.name]=\"name\"\n      [attr.value]=\"state\"\n      [attr.role]=\"role\"\n    >\n      <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n      <ng-container *ngIf=\"state\">\n        <ng-container *ngIf=\"!inputMask\">\n          {{ state }}\n        </ng-container>\n        <ng-container *ngIf=\"!!inputMask\">\n          {{ state | nggvInputMaskFormat: inputMask }}\n        </ng-container>\n      </ng-container>\n    </div>\n  </ng-template>\n</ng-container>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n  <div class=\"gds-input-wrapper\" [class.nggv-field--error]=\"invalid\">\n    <div class=\"input-group-prefix hide-if-empty\">\n      <ng-content select=\"[slot='prefix']\"></ng-content>\n    </div>\n\n    <!-- INPUT FIELD -->\n    <div class=\"input-group\" *ngIf=\"!inputMask\">\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"gds-field\"\n        [attr.type]=\"type\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required || null\"\n        [attr.email]=\"email\"\n        [attr.aria-describedby]=\"id + '-message'\"\n        [min]=\"min\"\n        [max]=\"max\"\n        [step]=\"step\"\n        [attr.maxlength]=\"maxlength\"\n        [attr.minlength]=\"minlength\"\n        [pattern]=\"pattern\"\n        title=\"\"\n        [disabled]=\"disabled\"\n        [autocomplete]=\"autocomplete\"\n        [autofocus]=\"autofocus\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [value]=\"state\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n    </div>\n\n    <!-- INPUT FIELD WITH MASK -->\n    <div\n      class=\"input-group\"\n      *ngIf=\"!!inputMask && (hideInput$ | async) === false\"\n    >\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"gds-field\"\n        autocomplete=\"off\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required || null\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [attr.aria-describedby]=\"id + '-message'\"\n        [nggvInputMask]=\"inputMask\"\n        title=\"\"\n        [formControl]=\"control\"\n      />\n    </div>\n\n    <div class=\"input-group-suffix hide-if-empty\">\n      <ng-content select=\"[slot='suffix']\"></ng-content>\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  <!-- ERRORS -->\n  <div\n    class=\"gds-form-item__footer error-wrapper\"\n    *transloco=\"let t; read: scope\"\n  >\n    <span\n      class=\"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 form-info--countdown\"\n        style=\"text-align: right\"\n      >\n        {{ charactersLeft }} {{ t('label.maxlength') }}\n      </span>\n    </ng-container>\n  </div>\n</ng-container>\n", styles: [":host{--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;display:flex;flex-direction:column;max-width:100%;position:relative;width:100%;z-index:0}:host:not(:last-child){margin-bottom:1.5rem}:host .gds-form-item__header{display:flex}:host .gds-form-item__header .form-info{font-weight:400}:host .gds-form-item__header button.icon.small{margin-top:-.5rem;margin-right:-.5rem}:host .gds-form-item__labels{flex:1;margin-bottom:.5rem}:host .gds-form-item__labels .form-info{margin-bottom:0}:host .gds-form-item__labels .form-info a:link:not(.button,[aria-disabled]){color:#0062bc}:host .gds-form-item__labels>*{width:100%;display:block}:host .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__expandable-info>div{padding-bottom:.5rem}:host .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__backdrop{transition:none}}:host:has([aria-expanded=true]) .gds-form-item__backdrop{opacity:1;border-radius:.25rem;border-color:var(--gds-ref-pallet-base600)}:host .gds-form-item__footer:not(:empty){margin-top:.5rem;display:flex;column-gap:.5rem}:host .gds-form-item__footer:not(:empty)>span,:host .gds-form-item__footer:not(:empty)>.form-info{font-weight:500;line-height:1.125}:host *{box-sizing:border-box}:host .gds-form-item__footer .form-info{font-weight:500}:host .gds-form-item__footer .form-info.form-info--countdown{font-weight:400}: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{align-items:center}: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-sys-color-base-200)}: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;display:flex;flex-direction:row}: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.nggv-field--error{border-bottom:.125rem solid #9f000a!important;height:100%}: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.small label{font-size:.875rem}:host.small label+.form-info{margin-bottom:.25rem}:host.small label+.gds-input-wrapper{margin-top:.25rem}:host.small .gds-input-wrapper{min-height:2rem}:host.small .gds-input-wrapper .input-group input{padding:.38rem .5rem;line-height:1rem;height:2rem;min-height:2rem;font-size:.875rem}:host.small .gds-input-wrapper .input-group-suffix,:host.small .gds-input-wrapper .input-group-prefix{height:2rem;min-height:2rem;min-width:initial}:host.small .gds-form-item__footer:not(:empty){margin-top:.25rem}:host label:is(label),:host .label:is(label),:host legend:is(label){margin-bottom:0}:host label.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 label+.gds-input-wrapper,:host label+.nggv-field--locked{margin-top:.5rem}:host .gds-field-label--optional{font-weight:400}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%}\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\n  class=\"form-info description hide-if-empty\"\n  *ngIf=\"description && descriptionIsVisible\"\n>\n  {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container *ngIf=\"locked\">\n  <ng-template\n    *ngTemplateOutlet=\"\n      lockedTpl || defaultLockedTpl;\n      context: { $implicit: state }\n    \"\n  ></ng-template>\n  <ng-template #defaultLockedTpl>\n    <div\n      [id]=\"id + '-input'\"\n      class=\"nggv-field--locked\"\n      [attr.name]=\"name\"\n      [attr.value]=\"state\"\n      [attr.role]=\"role\"\n    >\n      <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n      <ng-container *ngIf=\"state\">\n        <ng-container *ngIf=\"!inputMask\">\n          {{ state }}\n        </ng-container>\n        <ng-container *ngIf=\"!!inputMask\">\n          {{ state | nggvInputMaskFormat: inputMask }}\n        </ng-container>\n      </ng-container>\n    </div>\n  </ng-template>\n</ng-container>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n  <div class=\"gds-input-wrapper\" [class.nggv-field--error]=\"invalid\">\n    <div class=\"input-group-prefix hide-if-empty\">\n      <ng-content select=\"[slot='prefix']\"></ng-content>\n    </div>\n\n    <!-- INPUT FIELD -->\n    <div class=\"input-group\" *ngIf=\"!inputMask\">\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"gds-field\"\n        [attr.type]=\"type\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required || null\"\n        [attr.email]=\"email\"\n        [attr.aria-describedby]=\"id + '-message'\"\n        [min]=\"min\"\n        [max]=\"max\"\n        [step]=\"step\"\n        [attr.maxlength]=\"maxlength\"\n        [attr.minlength]=\"minlength\"\n        [pattern]=\"pattern\"\n        title=\"\"\n        [disabled]=\"disabled\"\n        [autocomplete]=\"autocomplete\"\n        [autofocus]=\"autofocus\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [value]=\"state\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n    </div>\n\n    <!-- INPUT FIELD WITH MASK -->\n    <div\n      class=\"input-group\"\n      *ngIf=\"!!inputMask && (hideInput$ | async) === false\"\n    >\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"gds-field\"\n        autocomplete=\"off\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required || null\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [attr.aria-describedby]=\"id + '-message'\"\n        [nggvInputMask]=\"inputMask\"\n        title=\"\"\n        [formControl]=\"control\"\n      />\n    </div>\n\n    <div class=\"input-group-suffix hide-if-empty\">\n      <ng-content select=\"[slot='suffix']\"></ng-content>\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  <!-- ERRORS -->\n  <div\n    class=\"gds-form-item__footer error-wrapper\"\n    *transloco=\"let t; read: scope\"\n  >\n    <span\n      class=\"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 form-info--countdown\"\n        style=\"text-align: right\"\n      >\n        {{ charactersLeft }} {{ t('label.maxlength') }}\n      </span>\n    </ng-container>\n  </div>\n</ng-container>\n", styles: [":host{--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;display:flex;flex-direction:column;max-width:100%;position:relative;width:100%;z-index:0}:host:not(:last-child){margin-bottom:1.5rem}:host .gds-form-item__header{display:flex}:host .gds-form-item__header .form-info{font-weight:400}:host .gds-form-item__header button.icon.small{margin-top:-.5rem;margin-right:-.5rem}:host .gds-form-item__labels{flex:1;margin-bottom:.5rem}:host .gds-form-item__labels .form-info{margin-bottom:0}:host .gds-form-item__labels .form-info a:link:not(.button,[aria-disabled]){color:#0062bc}:host .gds-form-item__labels>*{width:100%;display:block}:host .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__expandable-info>div{padding-bottom:.5rem}:host .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__backdrop{transition:none}}:host:has([aria-expanded=true]) .gds-form-item__backdrop{opacity:1;border-radius:.25rem;border-color:var(--gds-ref-pallet-base600)}:host .gds-form-item__footer:not(:empty){margin-top:.5rem;display:flex;column-gap:.5rem}:host .gds-form-item__footer:not(:empty)>span,:host .gds-form-item__footer:not(:empty)>.form-info{font-weight:500;line-height:1.125}:host *{box-sizing:border-box}:host .gds-form-item__footer .form-info{font-weight:500}:host .gds-form-item__footer .form-info.form-info--countdown{font-weight:400}: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{align-items:center}: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-sys-color-base-200)}: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;display:flex;flex-direction:row}: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.nggv-field--error{border-bottom:.125rem solid #9f000a!important;height:100%}: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.small label:not(.form-control){line-height:1rem;font-size:.875rem}:host.small label+.form-info{margin-bottom:.25rem}:host.small label+.gds-input-wrapper{margin-top:.25rem}:host.small .gds-input-wrapper{min-height:2rem}:host.small .gds-input-wrapper .input-group input{padding:.38rem .5rem;line-height:1rem;height:1.875rem;min-height:1.75rem;font-size:.875rem}:host.small .gds-input-wrapper .input-group-suffix,:host.small .gds-input-wrapper .input-group-prefix{height:1.875rem;min-height:1.75rem;min-width:initial}:host.small .gds-form-item__footer:not(:empty){margin-top:.25rem}:host label:is(label),:host .label:is(label),:host legend:is(label){margin-bottom:0}:host label.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 label+.gds-input-wrapper,:host label+.nggv-field--locked{margin-top:.5rem}:host .gds-field-label--optional{font-weight:400}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Self
                 }, {

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 ElementRef,\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 /\n Adding .gds-form-item as a class to host element\n /\n @HostBinding('class') class = 'gds-form-item'\n /\n Adding .gds-form-item--small class based on size input for styling\n /\n @HostBinding('class') @Input() size: 'small' \| 'large' = 'large'\n /\n Special property used for selecting DOM elements during automated UI testing.\n /\n @HostBinding('attr.data-thook') @Input() thook: string \| null \| undefined =\n 'input'\n /\n Type of input field. Should avoid types that modify field too much such as range.\n /\n @Input() type = 'text'\n /\n Text shown before input has a written value.\n /\n @Input() placeholder?: string\n /\n If set to \"on\", hint for form autofill feature.\n /\n @Input() autocomplete = 'on'\n /\n If set to true, the value will not be editable.\n /\n @Input() readonly = false\n /\n If set to true, enables the Angular template-driven email validator.\n /\n @Input() email = false\n /\n Minimum value required for numeric input types.\n /\n @Input() min = 0\n /\n Maximum value required for numeric input types.\n /\n @Input() max = Number.MAX_SAFE_INTEGER\n /\n Incremental values that are valid for numeric input types.\n /\n @Input() step = 1\n /\n Minimum length (number of characters) of value.\n /\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 public element: ElementRef,\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\n class=\"form-info description hide-if-empty\"\n ngIf=\"description && descriptionIsVisible\"\n>\n {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container ngIf=\"locked\">\n <ng-template\n ngTemplateOutlet=\"\n lockedTpl \|\| defaultLockedTpl;\n context: { $implicit: state }\n \"\n ></ng-template>\n <ng-template #defaultLockedTpl>\n <div\n [id]=\"id + '-input'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"state\"\n [attr.role]=\"role\"\n >\n <span ngIf=\"!state\" class=\"unset-state\">-</span>\n <ng-container ngIf=\"state\">\n <ng-container ngIf=\"!inputMask\">\n {{ state }}\n </ng-container>\n <ng-container ngIf=\"!!inputMask\">\n {{ state \| nggvInputMaskFormat: inputMask }}\n </ng-container>\n </ng-container>\n </div>\n </ng-template>\n</ng-container>\n\n<!-- INPUT WRAPPER -->\n<ng-container ngIf=\"!locked\">\n <div class=\"gds-input-wrapper\" [class.nggv-field--error]=\"invalid\">\n <div class=\"input-group-prefix hide-if-empty\">\n <ng-content select=\"[slot='prefix']\"></ng-content>\n </div>\n\n <!-- INPUT FIELD -->\n <div class=\"input-group\" ngIf=\"!inputMask\">\n <input\n #input\n [id]=\"id + '-input'\"\n class=\"gds-field\"\n [attr.type]=\"type\"\n [attr.name]=\"name\"\n [attr.required]=\"required \|\| null\"\n [attr.email]=\"email\"\n [attr.aria-describedby]=\"id + '-message'\"\n [min]=\"min\"\n [max]=\"max\"\n [step]=\"step\"\n [attr.maxlength]=\"maxlength\"\n [attr.minlength]=\"minlength\"\n [pattern]=\"pattern\"\n title=\"\"\n [disabled]=\"disabled\"\n [autocomplete]=\"autocomplete\"\n [autofocus]=\"autofocus\"\n [readOnly]=\"readonly\"\n [attr.role]=\"role\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [value]=\"state\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n </div>\n\n <!-- INPUT FIELD WITH MASK -->\n <div\n class=\"input-group\"\n ngIf=\"!!inputMask && (hideInput$ \| async) === false\"\n >\n <input\n #input\n [id]=\"id + '-input'\"\n class=\"gds-field\"\n autocomplete=\"off\"\n [attr.name]=\"name\"\n [attr.required]=\"required \|\| null\"\n [readOnly]=\"readonly\"\n [attr.role]=\"role\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [attr.aria-describedby]=\"id + '-message'\"\n [nggvInputMask]=\"inputMask\"\n title=\"\"\n [formControl]=\"control\"\n />\n </div>\n\n <div class=\"input-group-suffix hide-if-empty\">\n <ng-content select=\"[slot='suffix']\"></ng-content>\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- ERRORS -->\n <div\n class=\"gds-form-item__footer error-wrapper\"\n transloco=\"let t; read: scope\"\n >\n <span\n class=\"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 form-info--countdown\"\n style=\"text-align: right\"\n >\n {{ charactersLeft }} {{ t('label.maxlength') }}\n </span>\n </ng-container>\n </div>\n</ng-container>\n","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":";;;;;;;;;;;;;;;;;;;AAuBA;;;AAGG;AAMG,MAAO,kBACX,SAAQ,qCAAqC,CAAA;AAgD7C;;AAEG;IACH,IAAa,SAAS,CAAC,MAAc,EAAA;AACnC,QAAA,IAAI,CAAC,UAAU,GAAG,MAAM,CAAA;KACzB;AACD;;;AAGG;IACH,IAAa,SAAS,CAAC,MAAc,EAAA;AACnC,QAAA,IAAI,CAAC,UAAU,GAAG,MAAM,CAAA;KACzB;AACD,IAAA,IAAI,SAAS,GAAA;QACX,OAAO,IAAI,CAAC,UAAU,CAAA;KACvB;;IAED,IAAa,SAAS,CAAC,MAAc,EAAA;AACnC,QAAA,IAAI,CAAC,UAAU,GAAG,MAAM,CAAA;AACxB,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;KAC5B;AACD,IAAA,IAAI,SAAS,GAAA;QACX,OAAO,IAAI,CAAC,UAAU,CAAA;KACvB;AACD;;;AAGG;IACH,IAAa,SAAS,CAAC,MAAc,EAAA;AACnC,QAAA,IAAI,CAAC,UAAU,GAAG,MAAM,CAAA;AACxB,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;KAC5B;IAOD,IAAa,sBAAsB,CAAC,MAAe,EAAA;AACjD,QAAA,IAAI,CAAC,uBAAuB,GAAG,MAAM,CAAA;KACtC;AACD,IAAA,IAAI,sBAAsB,GAAA;AACxB,QAAA,OAAO,IAAI,CAAC,uBAAuB,IAAI,IAAI,CAAC,YAAY,CAAA;KACzD;IASD,IAAa,SAAS,CAAC,YAAmC,EAAA;;AAExD,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;AAC1B,QAAA,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,CAAA;AACxB,QAAA,IAAI,CAAC,UAAU,GAAG,YAAY,CAAA;;QAG9B,UAAU,CAAC,MAAK;AACd,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;AAC3B,YAAA,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,CAAA;SACzB,EAAE,GAAG,CAAC,CAAA;KACR;AACD,IAAA,IAAI,SAAS,GAAA;QACX,OAAO,IAAI,CAAC,UAAU,CAAA;KACvB;AAMD,IAAA,IAAI,OAAO,GAAA;QACT,OAAQ,IAAI,CAAC,SAAS,EAAE,OAA8B,IAAI,IAAI,CAAC,YAAY,CAAA;KAC5E;;AAED,IAAA,IAAI,YAAY,GAAA;AACd,QAAA,OAAO,CAAC,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,KAAK,MAAM,CAAC,gBAAgB,CAAA;KACtE;AAQD,IAAA,WAAA,CAC6B,SAAoB,EAGrC,cAA8B,EAC9B,GAAsB,EACzB,OAAmB,EAAA;AAE1B,QAAA,KAAK,CAAC,SAAS,EAAE,cAAc,EAAE,GAAG,CAAC,CAAA;QAPV,IAAS,CAAA,SAAA,GAAT,SAAS,CAAW;QAGrC,IAAc,CAAA,cAAA,GAAd,cAAc,CAAgB;QAC9B,IAAG,CAAA,GAAA,GAAH,GAAG,CAAmB;QACzB,IAAO,CAAA,OAAA,GAAP,OAAO,CAAY;AAzI5B;;AAEG;QACmB,IAAK,CAAA,KAAA,GAAG,eAAe,CAAA;AAC7C;;AAEG;QAC4B,IAAI,CAAA,IAAA,GAAsB,OAAO,CAAA;AAChE;;AAEG;QACsC,IAAK,CAAA,KAAA,GAC5C,OAAO,CAAA;AACT;;AAEG;QACM,IAAI,CAAA,IAAA,GAAG,MAAM,CAAA;AAKtB;;AAEG;QACM,IAAY,CAAA,YAAA,GAAG,IAAI,CAAA;AAC5B;;AAEG;QACM,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAA;AACzB;;AAEG;QACM,IAAK,CAAA,KAAA,GAAG,KAAK,CAAA;AACtB;;AAEG;QACM,IAAG,CAAA,GAAA,GAAG,CAAC,CAAA;AAChB;;AAEG;AACM,QAAA,IAAA,CAAA,GAAG,GAAG,MAAM,CAAC,gBAAgB,CAAA;AACtC;;AAEG;QACM,IAAI,CAAA,IAAA,GAAG,CAAC,CAAA;AAiCT,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,gBAAgB,CAAA;QAEpC,IAAU,CAAA,UAAA,GAAG,CAAC,CAAA;;QAGd,IAAuB,CAAA,uBAAA,GAAG,IAAI,CAAA;;QAS7B,IAAO,CAAA,OAAA,GAAG,EAAE,CAAA;;QAEZ,IAAY,CAAA,YAAA,GAAG,GAAG,CAAA;;AAqBjB,QAAA,IAAA,CAAA,SAAS,GAAG,IAAI,YAAY,EAAO,CAAA;AAErC,QAAA,IAAA,CAAA,YAAY,GAAG,IAAI,kBAAkB,EAAE,CAAA;;AAU/C,QAAA,IAAA,CAAA,UAAU,GAAG,IAAI,OAAO,EAAW,CAAA;AAEzB,QAAA,IAAA,CAAA,YAAY,GAAG,IAAI,OAAO,EAAO,CAAA;AACjC,QAAA,IAAA,CAAA,SAAS,GAAG,IAAI,OAAO,EAAW,CAAA;KAW3C;IAED,QAAQ,GAAA;QACN,KAAK,CAAC,QAAQ,EAAE,CAAA;AAChB,QAAA,IAAI,CAAC,YAAY;AACd,aAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;AAChE,aAAA,SAAS,CAAC,CAAC,UAAU,KAAI;AACxB,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;AACjC,SAAC,CAAC,CAAA;KACL;IAED,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;AACzB,QAAA,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAA;KAC1B;AAED,IAAA,UAAU,CAAC,KAAU,EAAA;;QAEnB,IACE,KAAK,EAAE,MAAM;AACb,YAAA,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS;AAC7B,YAAA,IAAI,CAAC,OAAO,CAAC,OAAO,EACpB;;YAEA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAA;YAC9C,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;AACtC,gBAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;aAC1B;;SAEF;aAAM;;AAEL,YAAA,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;SACnB;AACD,QAAA,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,CAAA;KACzB;AAED,IAAA,qBAAqB,CAAC,KAAU,EAAA;AAC9B,QAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;YAC7B,OAAO,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC,CAAA;SAC1C;AACD,QAAA,OAAO,KAAK,CAAA;KACb;;AAGD,IAAA,OAAO,CAAC,KAAY,EAAA;QAClB,KAAK,CAAC,eAAe,EAAE,CAAA;QACvB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAM;QACzB,IAAI,CAAC,KAAK,GAAI,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAA;AACrD,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACzB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;KACnC;AAlMU,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,uEA0InB,eAAe,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AA1Id,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,kBAAkB,ylBChC/B,8gKAkLA,EAAA,MAAA,EAAA,CAAA,smeAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,qBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,sBAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,8MAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,UAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,2BAAA,EAAA,QAAA,EAAA,0BAAA,EAAA,MAAA,EAAA,CAAA,wBAAA,EAAA,qCAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,uBAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,OAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,mBAAA,EAAA,IAAA,EAAA,qBAAA,EAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;4FDlJa,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAL9B,SAAS;+BACE,YAAY,EAAA,QAAA,EAAA,8gKAAA,EAAA,MAAA,EAAA,CAAA,smeAAA,CAAA,EAAA,CAAA;;0BA4InB,IAAI;;0BAAI,QAAQ;;0BAChB,QAAQ;;0BACR,MAAM;2BAAC,eAAe,CAAA;kGAnIH,KAAK,EAAA,CAAA;sBAA1B,WAAW;uBAAC,OAAO,CAAA;gBAIW,IAAI,EAAA,CAAA;sBAAlC,WAAW;uBAAC,OAAO,CAAA;;sBAAG,KAAK;gBAIa,KAAK,EAAA,CAAA;sBAA7C,WAAW;uBAAC,iBAAiB,CAAA;;sBAAG,KAAK;gBAK7B,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBAIG,WAAW,EAAA,CAAA;sBAAnB,KAAK;gBAIG,YAAY,EAAA,CAAA;sBAApB,KAAK;gBAIG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBAIG,KAAK,EAAA,CAAA;sBAAb,KAAK;gBAIG,GAAG,EAAA,CAAA;sBAAX,KAAK;gBAIG,GAAG,EAAA,CAAA;sBAAX,KAAK;gBAIG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBAIO,SAAS,EAAA,CAAA;sBAArB,KAAK;gBAOO,SAAS,EAAA,CAAA;sBAArB,KAAK;gBAOO,SAAS,EAAA,CAAA;sBAArB,KAAK;gBAWO,SAAS,EAAA,CAAA;sBAArB,KAAK;gBAUO,sBAAsB,EAAA,CAAA;sBAAlC,KAAK;gBAQG,OAAO,EAAA,CAAA;sBAAf,KAAK;gBAEG,YAAY,EAAA,CAAA;sBAApB,KAAK;gBAIO,SAAS,EAAA,CAAA;sBAArB,KAAK;gBAiBI,SAAS,EAAA,CAAA;sBAAlB,MAAM;;;ME/HI,eAAe,CAAA;+GAAf,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA,EAAA;gHAAf,eAAe,EAAA,YAAA,EAAA,CAZX,kBAAkB,CAAA,EAAA,OAAA,EAAA,CAE/B,YAAY;YACZ,cAAc;YACd,mBAAmB;YACnB,mBAAmB;YACnB,qCAAqC;AACrC,YAAA,oBAAoB,aAEZ,kBAAkB,CAAA,EAAA,CAAA,CAAA,EAAA;AAGjB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,eAAe,YAVxB,YAAY;YACZ,cAAc;YACd,mBAAmB;YACnB,mBAAmB;YACnB,qCAAqC;YACrC,oBAAoB,CAAA,EAAA,CAAA,CAAA,EAAA;;4FAKX,eAAe,EAAA,UAAA,EAAA,CAAA;kBAb3B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,YAAY,EAAE,CAAC,kBAAkB,CAAC;AAClC,oBAAA,OAAO,EAAE;wBACP,YAAY;wBACZ,cAAc;wBACd,mBAAmB;wBACnB,mBAAmB;wBACnB,qCAAqC;wBACrC,oBAAoB;AACrB,qBAAA;oBACD,OAAO,EAAE,CAAC,kBAAkB,CAAC;oBAC7B,OAAO,EAAE,CAAC,sBAAsB,CAAC;AAClC,iBAAA,CAAA;;;ACtBD;;AAEG;;;;"}
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 ElementRef,\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 /\n Adding .gds-form-item as a class to host element\n /\n @HostBinding('class') class = 'gds-form-item'\n /\n Adding .gds-form-item--small class based on size input for styling\n /\n @HostBinding('class') @Input() size: 'small' \| 'large' = 'large'\n /\n Special property used for selecting DOM elements during automated UI testing.\n /\n @HostBinding('attr.data-thook') @Input() thook: string \| null \| undefined =\n 'input'\n /\n Type of input field. Should avoid types that modify field too much such as range.\n /\n @Input() type = 'text'\n /\n Text shown before input has a written value.\n /\n @Input() placeholder?: string\n /\n If set to \"on\", hint for form autofill feature.\n /\n @Input() autocomplete = 'on'\n /\n If set to true, the value will not be editable.\n /\n @Input() readonly = false\n /\n If set to true, enables the Angular template-driven email validator.\n /\n @Input() email = false\n /\n Minimum value required for numeric input types.\n /\n @Input() min = 0\n /\n Maximum value required for numeric input types.\n /\n @Input() max = Number.MAX_SAFE_INTEGER\n /\n Incremental values that are valid for numeric input types.\n /\n @Input() step = 1\n /\n Minimum length (number of characters) of value.\n /\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 public element: ElementRef,\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\n class=\"form-info description hide-if-empty\"\n ngIf=\"description && descriptionIsVisible\"\n>\n {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container ngIf=\"locked\">\n <ng-template\n ngTemplateOutlet=\"\n lockedTpl \|\| defaultLockedTpl;\n context: { $implicit: state }\n \"\n ></ng-template>\n <ng-template #defaultLockedTpl>\n <div\n [id]=\"id + '-input'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"state\"\n [attr.role]=\"role\"\n >\n <span ngIf=\"!state\" class=\"unset-state\">-</span>\n <ng-container ngIf=\"state\">\n <ng-container ngIf=\"!inputMask\">\n {{ state }}\n </ng-container>\n <ng-container ngIf=\"!!inputMask\">\n {{ state \| nggvInputMaskFormat: inputMask }}\n </ng-container>\n </ng-container>\n </div>\n </ng-template>\n</ng-container>\n\n<!-- INPUT WRAPPER -->\n<ng-container ngIf=\"!locked\">\n <div class=\"gds-input-wrapper\" [class.nggv-field--error]=\"invalid\">\n <div class=\"input-group-prefix hide-if-empty\">\n <ng-content select=\"[slot='prefix']\"></ng-content>\n </div>\n\n <!-- INPUT FIELD -->\n <div class=\"input-group\" ngIf=\"!inputMask\">\n <input\n #input\n [id]=\"id + '-input'\"\n class=\"gds-field\"\n [attr.type]=\"type\"\n [attr.name]=\"name\"\n [attr.required]=\"required \|\| null\"\n [attr.email]=\"email\"\n [attr.aria-describedby]=\"id + '-message'\"\n [min]=\"min\"\n [max]=\"max\"\n [step]=\"step\"\n [attr.maxlength]=\"maxlength\"\n [attr.minlength]=\"minlength\"\n [pattern]=\"pattern\"\n title=\"\"\n [disabled]=\"disabled\"\n [autocomplete]=\"autocomplete\"\n [autofocus]=\"autofocus\"\n [readOnly]=\"readonly\"\n [attr.role]=\"role\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [value]=\"state\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n </div>\n\n <!-- INPUT FIELD WITH MASK -->\n <div\n class=\"input-group\"\n ngIf=\"!!inputMask && (hideInput$ \| async) === false\"\n >\n <input\n #input\n [id]=\"id + '-input'\"\n class=\"gds-field\"\n autocomplete=\"off\"\n [attr.name]=\"name\"\n [attr.required]=\"required \|\| null\"\n [readOnly]=\"readonly\"\n [attr.role]=\"role\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [attr.aria-describedby]=\"id + '-message'\"\n [nggvInputMask]=\"inputMask\"\n title=\"\"\n [formControl]=\"control\"\n />\n </div>\n\n <div class=\"input-group-suffix hide-if-empty\">\n <ng-content select=\"[slot='suffix']\"></ng-content>\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- ERRORS -->\n <div\n class=\"gds-form-item__footer error-wrapper\"\n transloco=\"let t; read: scope\"\n >\n <span\n class=\"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 form-info--countdown\"\n style=\"text-align: right\"\n >\n {{ charactersLeft }} {{ t('label.maxlength') }}\n </span>\n </ng-container>\n </div>\n</ng-container>\n","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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"}

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

@@ -88,11 +88,11 @@ class NggvTextareaComponent extends NggvBaseControlValueAccessorComponent {
         this.onChange(this.state);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NggvTextareaComponent, 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: "18.2.13", type: NggvTextareaComponent, selector: "nggv-textarea", inputs: { thook: "thook", placeholder: "placeholder", readonly: "readonly", minLength: "minLength", minlength: "minlength", maxLength: "maxLength", maxlength: "maxlength", rows: "rows", size: "size" }, host: { properties: { "attr.data-thook": "this.thook", "class.small": "this.isSmall", "class.large": "this.isLarge" } }, usesInheritance: true, ngImport: i0, template: "<!-- LABEL -->\n<label\n  [id]=\"id + '-label'\"\n  class=\"gds-field-label hide-if-empty\"\n  [attr.for]=\"id + '-textarea'\"\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=\"description && descriptionIsVisible\">\n  {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container *ngIf=\"locked\">\n  <ng-template\n    *ngTemplateOutlet=\"\n      lockedTpl || defaultLockedTpl;\n      context: { $implicit: state }\n    \"\n  ></ng-template>\n  <ng-template #defaultLockedTpl>\n    <div\n      [id]=\"id + '-textarea'\"\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        {{ state }}\n      </ng-container>\n    </div>\n  </ng-template>\n</ng-container>\n\n<!-- INPUT FIELD -->\n<ng-container *ngIf=\"!locked\">\n  <textarea\n    #input\n    [id]=\"id + '-textarea'\"\n    class=\"gds-field\"\n    [ngClass]=\"{ 'no-resize': !!rows }\"\n    [class.nggv-field--error]=\"invalid\"\n    [attr.name]=\"name\"\n    [attr.required]=\"required || null\"\n    [disabled]=\"disabled\"\n    [autofocus]=\"autofocus\"\n    [readOnly]=\"readonly\"\n    [attr.maxlength]=\"maxlength\"\n    [attr.minlength]=\"minlength\"\n    [attr.role]=\"role\"\n    [attr.rows]=\"rows\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.aria-label]=\"description\"\n    [value]=\"state\"\n    title=\"\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus($event)\"\n    (blur)=\"onBlur($event)\"\n  ></textarea>\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 + '-textarea'\"\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=\"hasMaxLength\">\n      <span\n        *nggvCharacterCountdown=\"\n          maxlength;\n          currentLength: (inputRef?.nativeElement?.value ?? '').length;\n          charactersLeft as charactersLeft\n        \"\n        class=\"form-info form-info--countdown\"\n        style=\"text-align: right\"\n      >\n        {{ charactersLeft }} {{ t('label.maxlength') }}\n      </span>\n    </ng-container>\n  </div>\n\n  <!-- CHILDREN -->\n  <ng-content></ng-content>\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 textarea{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);align-items:center;background-color:var(--sg-form-control-bg);color:var(--text-primary-color);display:flex;justify-content:center;resize:vertical}:host textarea:focus:not(:focus-visible){box-shadow:none;outline:0}:host textarea:focus,:host textarea:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media screen and (-ms-high-contrast: active){:host textarea{border:2px solid currentcolor}}:host textarea:hover{background-color:var(--gds-ref-pallet-base100)}:host textarea:disabled,:host textarea.disabled,:host textarea[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 textarea:disabled::placeholder,:host textarea.disabled::placeholder,:host textarea[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host label:not(.gds-field-notice):is(label){margin-bottom:0}:host label:not(.gds-field-notice).form-control{width:fit-content}@supports (-moz-appearance: none){:host label:not(.gds-field-notice).form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host label:not(.gds-field-notice).form-control:focus,:host label:not(.gds-field-notice).form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host label:not(.gds-field-notice):not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host label:not(.gds-field-notice)+input,:host label:not(.gds-field-notice)+textarea,fieldset :host label:not(.gds-field-notice)+div,:host label:not(.gds-field-notice)+button,:host label:not(.gds-field-notice)+.group-stepper,:host label:not(.gds-field-notice)+.stepper-wrapper,:host label:not(.gds-field-notice)+.group{margin-top:.5rem}:host label:not(.gds-field-notice)+.form-info{margin-bottom:.5rem}:host label+.gds-field,:host label+.nggv-field--locked{margin-top:.5rem}:host .hide-if-empty:empty{display:none}:host .unset-state{padding-left:.5rem}:host .gds-field-label--optional{font-weight:400}:host textarea{width:100%;max-width:100%;box-sizing:border-box;font-family:inherit;font-size:1rem}:host textarea.nggv-field--error{border-bottom:.125rem solid #9f000a!important}:host .description{margin-bottom:.5rem}:host .error-wrapper{margin-top:.5rem;display:flex}: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}:host .gds-form-item__footer>.form-info--countdown{font-weight:400}:host .no-resize{resize:none}:host .no-resize::-webkit-scrollbar{-webkit-appearance:none}:host .no-resize::-webkit-scrollbar-thumb{border-radius:.5rem}:host.small label:not(.gds-field-notice):not(.form-control){font-size:.875rem;line-height:1rem}:host.small label+textarea{margin-top:.25rem}:host.small textarea{padding:.38rem .5rem;font-size:.875rem}:host.small .error-wrapper,:host.small .form-info{margin-top:.25rem;font-size:.875rem;line-height:1rem}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.CharacterCountdownDirective, selector: "[nggvCharacterCountdown]", inputs: ["nggvCharacterCountdown", "nggvCharacterCountdownCurrentLength"] }, { kind: "directive", type: i5.NggCoreElementDirective, selector: "[nggCoreElement]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NggvTextareaComponent, selector: "nggv-textarea", inputs: { thook: "thook", placeholder: "placeholder", readonly: "readonly", minLength: "minLength", minlength: "minlength", maxLength: "maxLength", maxlength: "maxlength", rows: "rows", size: "size" }, host: { properties: { "attr.data-thook": "this.thook", "class.small": "this.isSmall", "class.large": "this.isLarge" } }, usesInheritance: true, ngImport: i0, template: "<!-- LABEL -->\n<label\n  [id]=\"id + '-label'\"\n  class=\"gds-field-label hide-if-empty\"\n  [attr.for]=\"id + '-textarea'\"\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=\"description && descriptionIsVisible\">\n  {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container *ngIf=\"locked\">\n  <ng-template\n    *ngTemplateOutlet=\"\n      lockedTpl || defaultLockedTpl;\n      context: { $implicit: state }\n    \"\n  ></ng-template>\n  <ng-template #defaultLockedTpl>\n    <div\n      [id]=\"id + '-textarea'\"\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        {{ state }}\n      </ng-container>\n    </div>\n  </ng-template>\n</ng-container>\n\n<!-- INPUT FIELD -->\n<ng-container *ngIf=\"!locked\">\n  <textarea\n    #input\n    [id]=\"id + '-textarea'\"\n    class=\"gds-field\"\n    [ngClass]=\"{ 'no-resize': !!rows }\"\n    [class.nggv-field--error]=\"invalid\"\n    [attr.name]=\"name\"\n    [attr.required]=\"required || null\"\n    [disabled]=\"disabled\"\n    [autofocus]=\"autofocus\"\n    [readOnly]=\"readonly\"\n    [attr.maxlength]=\"maxlength\"\n    [attr.minlength]=\"minlength\"\n    [attr.role]=\"role\"\n    [attr.rows]=\"rows\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.aria-label]=\"description\"\n    [value]=\"state\"\n    title=\"\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus($event)\"\n    (blur)=\"onBlur($event)\"\n  ></textarea>\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 + '-textarea'\"\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=\"hasMaxLength\">\n      <span\n        *nggvCharacterCountdown=\"\n          maxlength;\n          currentLength: (inputRef?.nativeElement?.value ?? '').length;\n          charactersLeft as charactersLeft\n        \"\n        class=\"form-info form-info--countdown\"\n        style=\"text-align: right\"\n      >\n        {{ charactersLeft }} {{ t('label.maxlength') }}\n      </span>\n    </ng-container>\n  </div>\n\n  <!-- CHILDREN -->\n  <ng-content></ng-content>\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 textarea{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);align-items:center;background-color:var(--sg-form-control-bg);color:var(--text-primary-color);display:flex;justify-content:center;resize:vertical}:host textarea:focus:not(:focus-visible){box-shadow:none;outline:0}:host textarea:focus,:host textarea:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media screen and (-ms-high-contrast: active){:host textarea{border:2px solid currentcolor}}:host textarea:hover{background-color:var(--gds-ref-pallet-base100)}:host textarea:disabled,:host textarea.disabled,:host textarea[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 textarea:disabled::placeholder,:host textarea.disabled::placeholder,:host textarea[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host label:not(.gds-field-notice):is(label){margin-bottom:0}:host label:not(.gds-field-notice).form-control{width:fit-content}@supports (-moz-appearance: none){:host label:not(.gds-field-notice).form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host label:not(.gds-field-notice).form-control:focus,:host label:not(.gds-field-notice).form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host label:not(.gds-field-notice):not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host label:not(.gds-field-notice)+input,:host label:not(.gds-field-notice)+textarea,fieldset :host label:not(.gds-field-notice)+div,:host label:not(.gds-field-notice)+button,:host label:not(.gds-field-notice)+.group-stepper,:host label:not(.gds-field-notice)+.stepper-wrapper,:host label:not(.gds-field-notice)+.group{margin-top:.5rem}:host label:not(.gds-field-notice)+.form-info{margin-bottom:.5rem}:host label+.gds-field,:host label+.nggv-field--locked{margin-top:.5rem}:host .hide-if-empty:empty{display:none}:host .unset-state{padding-left:.5rem}:host .gds-field-label--optional{font-weight:400}:host textarea{width:100%;max-width:100%;box-sizing:border-box;font-family:inherit;font-size:1rem}:host textarea.nggv-field--error{border-bottom:.125rem solid #9f000a!important}:host .description{margin-bottom:.5rem}:host .error-wrapper{margin-top:.5rem;display:flex}: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}:host .gds-form-item__footer>.form-info--countdown{font-weight:400}:host .no-resize{resize:none}:host .no-resize::-webkit-scrollbar{-webkit-appearance:none}:host .no-resize::-webkit-scrollbar-thumb{border-radius:.5rem}:host.small label:not(.gds-field-notice):not(.form-control){font-size:.875rem;line-height:1rem}:host.small label+textarea{margin-top:.25rem}:host.small textarea{padding:.38rem .5rem;font-size:.875rem}:host.small .error-wrapper,:host.small .form-info{margin-top:.25rem;font-size:.875rem;line-height:1rem}:host.small .gds-form-item__footer:not(:empty){margin-top:0rem}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.CharacterCountdownDirective, selector: "[nggvCharacterCountdown]", inputs: ["nggvCharacterCountdown", "nggvCharacterCountdownCurrentLength"] }, { kind: "directive", type: i5.NggCoreElementDirective, selector: "[nggCoreElement]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NggvTextareaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nggv-textarea', template: "<!-- LABEL -->\n<label\n  [id]=\"id + '-label'\"\n  class=\"gds-field-label hide-if-empty\"\n  [attr.for]=\"id + '-textarea'\"\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=\"description && descriptionIsVisible\">\n  {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container *ngIf=\"locked\">\n  <ng-template\n    *ngTemplateOutlet=\"\n      lockedTpl || defaultLockedTpl;\n      context: { $implicit: state }\n    \"\n  ></ng-template>\n  <ng-template #defaultLockedTpl>\n    <div\n      [id]=\"id + '-textarea'\"\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        {{ state }}\n      </ng-container>\n    </div>\n  </ng-template>\n</ng-container>\n\n<!-- INPUT FIELD -->\n<ng-container *ngIf=\"!locked\">\n  <textarea\n    #input\n    [id]=\"id + '-textarea'\"\n    class=\"gds-field\"\n    [ngClass]=\"{ 'no-resize': !!rows }\"\n    [class.nggv-field--error]=\"invalid\"\n    [attr.name]=\"name\"\n    [attr.required]=\"required || null\"\n    [disabled]=\"disabled\"\n    [autofocus]=\"autofocus\"\n    [readOnly]=\"readonly\"\n    [attr.maxlength]=\"maxlength\"\n    [attr.minlength]=\"minlength\"\n    [attr.role]=\"role\"\n    [attr.rows]=\"rows\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.aria-label]=\"description\"\n    [value]=\"state\"\n    title=\"\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus($event)\"\n    (blur)=\"onBlur($event)\"\n  ></textarea>\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 + '-textarea'\"\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=\"hasMaxLength\">\n      <span\n        *nggvCharacterCountdown=\"\n          maxlength;\n          currentLength: (inputRef?.nativeElement?.value ?? '').length;\n          charactersLeft as charactersLeft\n        \"\n        class=\"form-info form-info--countdown\"\n        style=\"text-align: right\"\n      >\n        {{ charactersLeft }} {{ t('label.maxlength') }}\n      </span>\n    </ng-container>\n  </div>\n\n  <!-- CHILDREN -->\n  <ng-content></ng-content>\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 textarea{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);align-items:center;background-color:var(--sg-form-control-bg);color:var(--text-primary-color);display:flex;justify-content:center;resize:vertical}:host textarea:focus:not(:focus-visible){box-shadow:none;outline:0}:host textarea:focus,:host textarea:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media screen and (-ms-high-contrast: active){:host textarea{border:2px solid currentcolor}}:host textarea:hover{background-color:var(--gds-ref-pallet-base100)}:host textarea:disabled,:host textarea.disabled,:host textarea[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 textarea:disabled::placeholder,:host textarea.disabled::placeholder,:host textarea[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host label:not(.gds-field-notice):is(label){margin-bottom:0}:host label:not(.gds-field-notice).form-control{width:fit-content}@supports (-moz-appearance: none){:host label:not(.gds-field-notice).form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host label:not(.gds-field-notice).form-control:focus,:host label:not(.gds-field-notice).form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host label:not(.gds-field-notice):not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host label:not(.gds-field-notice)+input,:host label:not(.gds-field-notice)+textarea,fieldset :host label:not(.gds-field-notice)+div,:host label:not(.gds-field-notice)+button,:host label:not(.gds-field-notice)+.group-stepper,:host label:not(.gds-field-notice)+.stepper-wrapper,:host label:not(.gds-field-notice)+.group{margin-top:.5rem}:host label:not(.gds-field-notice)+.form-info{margin-bottom:.5rem}:host label+.gds-field,:host label+.nggv-field--locked{margin-top:.5rem}:host .hide-if-empty:empty{display:none}:host .unset-state{padding-left:.5rem}:host .gds-field-label--optional{font-weight:400}:host textarea{width:100%;max-width:100%;box-sizing:border-box;font-family:inherit;font-size:1rem}:host textarea.nggv-field--error{border-bottom:.125rem solid #9f000a!important}:host .description{margin-bottom:.5rem}:host .error-wrapper{margin-top:.5rem;display:flex}: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}:host .gds-form-item__footer>.form-info--countdown{font-weight:400}:host .no-resize{resize:none}:host .no-resize::-webkit-scrollbar{-webkit-appearance:none}:host .no-resize::-webkit-scrollbar-thumb{border-radius:.5rem}:host.small label:not(.gds-field-notice):not(.form-control){font-size:.875rem;line-height:1rem}:host.small label+textarea{margin-top:.25rem}:host.small textarea{padding:.38rem .5rem;font-size:.875rem}:host.small .error-wrapper,:host.small .form-info{margin-top:.25rem;font-size:.875rem;line-height:1rem}\n"] }]
+            args: [{ selector: 'nggv-textarea', template: "<!-- LABEL -->\n<label\n  [id]=\"id + '-label'\"\n  class=\"gds-field-label hide-if-empty\"\n  [attr.for]=\"id + '-textarea'\"\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=\"description && descriptionIsVisible\">\n  {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container *ngIf=\"locked\">\n  <ng-template\n    *ngTemplateOutlet=\"\n      lockedTpl || defaultLockedTpl;\n      context: { $implicit: state }\n    \"\n  ></ng-template>\n  <ng-template #defaultLockedTpl>\n    <div\n      [id]=\"id + '-textarea'\"\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        {{ state }}\n      </ng-container>\n    </div>\n  </ng-template>\n</ng-container>\n\n<!-- INPUT FIELD -->\n<ng-container *ngIf=\"!locked\">\n  <textarea\n    #input\n    [id]=\"id + '-textarea'\"\n    class=\"gds-field\"\n    [ngClass]=\"{ 'no-resize': !!rows }\"\n    [class.nggv-field--error]=\"invalid\"\n    [attr.name]=\"name\"\n    [attr.required]=\"required || null\"\n    [disabled]=\"disabled\"\n    [autofocus]=\"autofocus\"\n    [readOnly]=\"readonly\"\n    [attr.maxlength]=\"maxlength\"\n    [attr.minlength]=\"minlength\"\n    [attr.role]=\"role\"\n    [attr.rows]=\"rows\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.aria-label]=\"description\"\n    [value]=\"state\"\n    title=\"\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus($event)\"\n    (blur)=\"onBlur($event)\"\n  ></textarea>\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 + '-textarea'\"\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=\"hasMaxLength\">\n      <span\n        *nggvCharacterCountdown=\"\n          maxlength;\n          currentLength: (inputRef?.nativeElement?.value ?? '').length;\n          charactersLeft as charactersLeft\n        \"\n        class=\"form-info form-info--countdown\"\n        style=\"text-align: right\"\n      >\n        {{ charactersLeft }} {{ t('label.maxlength') }}\n      </span>\n    </ng-container>\n  </div>\n\n  <!-- CHILDREN -->\n  <ng-content></ng-content>\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 textarea{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);align-items:center;background-color:var(--sg-form-control-bg);color:var(--text-primary-color);display:flex;justify-content:center;resize:vertical}:host textarea:focus:not(:focus-visible){box-shadow:none;outline:0}:host textarea:focus,:host textarea:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media screen and (-ms-high-contrast: active){:host textarea{border:2px solid currentcolor}}:host textarea:hover{background-color:var(--gds-ref-pallet-base100)}:host textarea:disabled,:host textarea.disabled,:host textarea[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 textarea:disabled::placeholder,:host textarea.disabled::placeholder,:host textarea[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host label:not(.gds-field-notice):is(label){margin-bottom:0}:host label:not(.gds-field-notice).form-control{width:fit-content}@supports (-moz-appearance: none){:host label:not(.gds-field-notice).form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host label:not(.gds-field-notice).form-control:focus,:host label:not(.gds-field-notice).form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host label:not(.gds-field-notice):not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host label:not(.gds-field-notice)+input,:host label:not(.gds-field-notice)+textarea,fieldset :host label:not(.gds-field-notice)+div,:host label:not(.gds-field-notice)+button,:host label:not(.gds-field-notice)+.group-stepper,:host label:not(.gds-field-notice)+.stepper-wrapper,:host label:not(.gds-field-notice)+.group{margin-top:.5rem}:host label:not(.gds-field-notice)+.form-info{margin-bottom:.5rem}:host label+.gds-field,:host label+.nggv-field--locked{margin-top:.5rem}:host .hide-if-empty:empty{display:none}:host .unset-state{padding-left:.5rem}:host .gds-field-label--optional{font-weight:400}:host textarea{width:100%;max-width:100%;box-sizing:border-box;font-family:inherit;font-size:1rem}:host textarea.nggv-field--error{border-bottom:.125rem solid #9f000a!important}:host .description{margin-bottom:.5rem}:host .error-wrapper{margin-top:.5rem;display:flex}: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}:host .gds-form-item__footer>.form-info--countdown{font-weight:400}:host .no-resize{resize:none}:host .no-resize::-webkit-scrollbar{-webkit-appearance:none}:host .no-resize::-webkit-scrollbar-thumb{border-radius:.5rem}:host.small label:not(.gds-field-notice):not(.form-control){font-size:.875rem;line-height:1rem}:host.small label+textarea{margin-top:.25rem}:host.small textarea{padding:.38rem .5rem;font-size:.875rem}:host.small .error-wrapper,:host.small .form-info{margin-top:.25rem;font-size:.875rem;line-height:1rem}:host.small .gds-form-item__footer:not(:empty){margin-top:0rem}\n"] }]
         }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Self
                 }, {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"sebgroup-green-angular-src-v-angular-textarea.mjs","sources":["../../../../libs/angular/src/v-angular/textarea/textarea.component.ts","../../../../libs/angular/src/v-angular/textarea/textarea.component.html","../../../../libs/angular/src/v-angular/textarea/textarea.module.ts","../../../../libs/angular/src/v-angular/textarea/sebgroup-green-angular-src-v-angular-textarea.ts"],"sourcesContent":["import '@sebgroup/green-core/components/icon/icons/triangle-exclamation.js'\n\nimport {\n ChangeDetectorRef,\n Component,\n HostBinding,\n Inject,\n Input,\n Optional,\n Self,\n} from '@angular/core'\nimport { NgControl } from '@angular/forms'\nimport { TRANSLOCO_SCOPE, TranslocoScope } from '@jsverse/transloco'\n\nimport { NggvBaseControlValueAccessorComponent } from '@sebgroup/green-angular/src/v-angular/base-control-value-accessor'\n\n/** Textarea fields allow users to add and edit longer or multiple line text. /\n@Component({\n selector: 'nggv-textarea',\n templateUrl: './textarea.component.html',\n styleUrls: ['./textarea.component.scss'],\n})\nexport class NggvTextareaComponent extends NggvBaseControlValueAccessorComponent {\n /* Special property used for selecting DOM elements during automated UI testing. /\n @HostBinding('attr.data-thook') @Input() thook: string \| null \| undefined =\n 'textarea'\n\n /\n Sets the small class based on the size input.\n /\n @HostBinding('class.small') get isSmall(): boolean {\n return this.size === 'small'\n }\n\n /\n Sets the large class based on the size input.\n /\n @HostBinding('class.large') get isLarge(): boolean {\n return this.size === 'large'\n }\n\n /* Text shown before input has a written value. /\n @Input() placeholder?: string\n /* If set to true, the value will not be editable. /\n @Input() readonly = false\n /* Minimum length (number of characters) of value. /\n @Input() set minLength(length: number) {\n this._minlength = length\n this.cdr.detectChanges()\n }\n get minlength(): number {\n return this._minlength\n }\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 this.cdr.detectChanges()\n }\n /* Maximum length (number of characters) of value. /\n @Input() set maxLength(length: number) {\n this._maxlength = length\n this.cdr.detectChanges()\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.cdr.detectChanges()\n }\n\n /* Returns if maxlength is used /\n get hasMaxLength(): boolean {\n return !!this.maxlength && this.maxlength !== Number.MAX_SAFE_INTEGER\n }\n\n private _maxlength = Number.MAX_SAFE_INTEGER\n\n private _minlength = 0\n\n /* Sets the height of the textarea and disables resize. A scrollbar will appear if necessary. /\n @Input() rows?: number\n\n /\n Sets the displayed size of the textarea.\n /\n @Input() size: 'small' \| 'large' = 'large'\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 /* @internal /\n onInput(event: Event) {\n event.stopPropagation()\n if (this.disabled) return\n this.state = (event.target as HTMLTextAreaElement).value\n this.onChange(this.state)\n }\n}\n","<!-- LABEL -->\n<label\n [id]=\"id + '-label'\"\n class=\"gds-field-label hide-if-empty\"\n [attr.for]=\"id + '-textarea'\"\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=\"description && descriptionIsVisible\">\n {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container ngIf=\"locked\">\n <ng-template\n ngTemplateOutlet=\"\n lockedTpl \|\| defaultLockedTpl;\n context: { $implicit: state }\n \"\n ></ng-template>\n <ng-template #defaultLockedTpl>\n <div\n [id]=\"id + '-textarea'\"\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 {{ state }}\n </ng-container>\n </div>\n </ng-template>\n</ng-container>\n\n<!-- INPUT FIELD -->\n<ng-container ngIf=\"!locked\">\n <textarea\n #input\n [id]=\"id + '-textarea'\"\n class=\"gds-field\"\n [ngClass]=\"{ 'no-resize': !!rows }\"\n [class.nggv-field--error]=\"invalid\"\n [attr.name]=\"name\"\n [attr.required]=\"required \|\| null\"\n [disabled]=\"disabled\"\n [autofocus]=\"autofocus\"\n [readOnly]=\"readonly\"\n [attr.maxlength]=\"maxlength\"\n [attr.minlength]=\"minlength\"\n [attr.role]=\"role\"\n [attr.rows]=\"rows\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [value]=\"state\"\n title=\"\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n ></textarea>\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 + '-textarea'\"\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=\"hasMaxLength\">\n <span\n nggvCharacterCountdown=\"\n maxlength;\n currentLength: (inputRef?.nativeElement?.value ?? '').length;\n charactersLeft as charactersLeft\n \"\n class=\"form-info form-info--countdown\"\n style=\"text-align: right\"\n >\n {{ charactersLeft }} {{ t('label.maxlength') }}\n </span>\n </ng-container>\n </div>\n\n <!-- CHILDREN -->\n <ng-content></ng-content>\n</ng-container>\n","import '@sebgroup/green-core/components/icon/icons/triangle-exclamation.js'\n\nimport { CommonModule } from '@angular/common'\nimport { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'\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 { NggvTextareaComponent } from './textarea.component'\n\n@NgModule({\n declarations: [NggvTextareaComponent],\n imports: [\n CommonModule,\n NggvI18nModule,\n NggvCharacterCountdownDirectiveModule,\n NggCoreWrapperModule,\n ],\n exports: [NggvTextareaComponent],\n schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class NggvTextareaModule {}\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-textarea.mjs","sources":["../../../../libs/angular/src/v-angular/textarea/textarea.component.ts","../../../../libs/angular/src/v-angular/textarea/textarea.component.html","../../../../libs/angular/src/v-angular/textarea/textarea.module.ts","../../../../libs/angular/src/v-angular/textarea/sebgroup-green-angular-src-v-angular-textarea.ts"],"sourcesContent":["import '@sebgroup/green-core/components/icon/icons/triangle-exclamation.js'\n\nimport {\n ChangeDetectorRef,\n Component,\n HostBinding,\n Inject,\n Input,\n Optional,\n Self,\n} from '@angular/core'\nimport { NgControl } from '@angular/forms'\nimport { TRANSLOCO_SCOPE, TranslocoScope } from '@jsverse/transloco'\n\nimport { NggvBaseControlValueAccessorComponent } from '@sebgroup/green-angular/src/v-angular/base-control-value-accessor'\n\n/** Textarea fields allow users to add and edit longer or multiple line text. /\n@Component({\n selector: 'nggv-textarea',\n templateUrl: './textarea.component.html',\n styleUrls: ['./textarea.component.scss'],\n})\nexport class NggvTextareaComponent extends NggvBaseControlValueAccessorComponent {\n /* Special property used for selecting DOM elements during automated UI testing. /\n @HostBinding('attr.data-thook') @Input() thook: string \| null \| undefined =\n 'textarea'\n\n /\n Sets the small class based on the size input.\n /\n @HostBinding('class.small') get isSmall(): boolean {\n return this.size === 'small'\n }\n\n /\n Sets the large class based on the size input.\n /\n @HostBinding('class.large') get isLarge(): boolean {\n return this.size === 'large'\n }\n\n /* Text shown before input has a written value. /\n @Input() placeholder?: string\n /* If set to true, the value will not be editable. /\n @Input() readonly = false\n /* Minimum length (number of characters) of value. /\n @Input() set minLength(length: number) {\n this._minlength = length\n this.cdr.detectChanges()\n }\n get minlength(): number {\n return this._minlength\n }\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 this.cdr.detectChanges()\n }\n /* Maximum length (number of characters) of value. /\n @Input() set maxLength(length: number) {\n this._maxlength = length\n this.cdr.detectChanges()\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.cdr.detectChanges()\n }\n\n /* Returns if maxlength is used /\n get hasMaxLength(): boolean {\n return !!this.maxlength && this.maxlength !== Number.MAX_SAFE_INTEGER\n }\n\n private _maxlength = Number.MAX_SAFE_INTEGER\n\n private _minlength = 0\n\n /* Sets the height of the textarea and disables resize. A scrollbar will appear if necessary. /\n @Input() rows?: number\n\n /\n Sets the displayed size of the textarea.\n /\n @Input() size: 'small' \| 'large' = 'large'\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 /* @internal /\n onInput(event: Event) {\n event.stopPropagation()\n if (this.disabled) return\n this.state = (event.target as HTMLTextAreaElement).value\n this.onChange(this.state)\n }\n}\n","<!-- LABEL -->\n<label\n [id]=\"id + '-label'\"\n class=\"gds-field-label hide-if-empty\"\n [attr.for]=\"id + '-textarea'\"\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=\"description && descriptionIsVisible\">\n {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container ngIf=\"locked\">\n <ng-template\n ngTemplateOutlet=\"\n lockedTpl \|\| defaultLockedTpl;\n context: { $implicit: state }\n \"\n ></ng-template>\n <ng-template #defaultLockedTpl>\n <div\n [id]=\"id + '-textarea'\"\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 {{ state }}\n </ng-container>\n </div>\n </ng-template>\n</ng-container>\n\n<!-- INPUT FIELD -->\n<ng-container ngIf=\"!locked\">\n <textarea\n #input\n [id]=\"id + '-textarea'\"\n class=\"gds-field\"\n [ngClass]=\"{ 'no-resize': !!rows }\"\n [class.nggv-field--error]=\"invalid\"\n [attr.name]=\"name\"\n [attr.required]=\"required \|\| null\"\n [disabled]=\"disabled\"\n [autofocus]=\"autofocus\"\n [readOnly]=\"readonly\"\n [attr.maxlength]=\"maxlength\"\n [attr.minlength]=\"minlength\"\n [attr.role]=\"role\"\n [attr.rows]=\"rows\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [value]=\"state\"\n title=\"\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n ></textarea>\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 + '-textarea'\"\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=\"hasMaxLength\">\n <span\n nggvCharacterCountdown=\"\n maxlength;\n currentLength: (inputRef?.nativeElement?.value ?? '').length;\n charactersLeft as charactersLeft\n \"\n class=\"form-info form-info--countdown\"\n style=\"text-align: right\"\n >\n {{ charactersLeft }} {{ t('label.maxlength') }}\n </span>\n </ng-container>\n </div>\n\n <!-- CHILDREN -->\n <ng-content></ng-content>\n</ng-container>\n","import '@sebgroup/green-core/components/icon/icons/triangle-exclamation.js'\n\nimport { CommonModule } from '@angular/common'\nimport { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'\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 { NggvTextareaComponent } from './textarea.component'\n\n@NgModule({\n declarations: [NggvTextareaComponent],\n imports: [\n CommonModule,\n NggvI18nModule,\n NggvCharacterCountdownDirectiveModule,\n NggCoreWrapperModule,\n ],\n exports: [NggvTextareaComponent],\n schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class NggvTextareaModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}