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-v-angular.mjs CHANGED Viewed

@@ -3908,11 +3908,11 @@ class NggvDropdownComponent extends NggvBaseControlValueAccessorComponent$1 {
         return !('options' in option);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NggvDropdownComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i0.ChangeDetectorRef }, { token: i2$2.DropdownUtils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NggvDropdownComponent, selector: "nggv-dropdown", inputs: { thook: "thook", size: "size", placeholder: "placeholder", ariaLabel: "ariaLabel", options: "options", scrollOffset: "scrollOffset", allowControlNullishOption: "allowControlNullishOption", textToHighlight: "textToHighlight", selectOnSingleOption: "selectOnSingleOption", selectWithSpace: "selectWithSpace", onlyHandleDistinctChanges: "onlyHandleDistinctChanges" }, outputs: { expandedChange: "expandedChange" }, host: { listeners: { "keyup": "onKeyUp($event)" }, properties: { "attr.data-thook": "this.thook", "class.small": "this.isSmall", "class.large": "this.isLarge" } }, queries: [{ propertyName: "selectedContentTpl", first: true, predicate: ["selectedTpl"], descendants: true, read: TemplateRef }, { propertyName: "optionContentTpl", first: true, predicate: ["optionTpl"], descendants: true, read: TemplateRef }, { propertyName: "groupLabelTpl", first: true, predicate: ["groupLabelTpl"], descendants: true, read: TemplateRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- LABEL -->\n<ng-container *transloco=\"let t; read: scope\">\n  <label\n    [id]=\"id + '-label'\"\n    class=\"gds-field-label hide-if-empty\"\n    [attr.for]=\"id + '-toggle'\"\n    *ngIf=\"labelContentTpl || label\"\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=\"description\" *ngIf=\"description\">{{ description }}</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        [attr.aria-labelledby]=\"id + '-label ' + id + '-input'\"\n      >\n        <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n        <ng-container *ngIf=\"state\">\n          <ng-template\n            *ngTemplateOutlet=\"\n              selectedContentTpl || defaultSelectedContentTpl;\n              context: { $implicit: state }\n            \"\n          >\n          </ng-template>\n        </ng-container>\n      </div>\n    </ng-template>\n  </ng-container>\n\n  <!-- INPUT -->\n  <ng-container *ngIf=\"!locked\">\n    <div class=\"gds-input-wrapper\">\n      <div #input [id]=\"id + '-input'\" class=\"dropdown\">\n        <button\n          [id]=\"id + '-toggle'\"\n          [disabled]=\"disabled\"\n          type=\"button\"\n          class=\"nggv-field-dropdown__label toggle\"\n          [class.nggv-field--error]=\"invalid\"\n          role=\"combobox\"\n          aria-owns=\"listbox\"\n          aria-haspopup=\"listbox\"\n          aria-controls=\"listbox\"\n          [attr.data-thook]=\"thook + '-toggle'\"\n          [attr.aria-expanded]=\"expanded\"\n          [attr.aria-labelledby]=\"\n            ariaLabel ? null : id + '-label ' + id + '-toggle'\n          \"\n          [attr.aria-label]=\"ariaLabel || null\"\n          (click)=\"toggleDropdown()\"\n        >\n          <span>\n            <ng-template\n              *ngTemplateOutlet=\"\n                selectedContentTpl || defaultSelectedContentTpl;\n                context: { $implicit: state }\n              \"\n            >\n            </ng-template>\n          </span>\n        </button>\n        <nggv-dropdown-list\n          #dropDownList\n          [options]=\"options\"\n          [scrollOffset]=\"scrollOffset\"\n          [state]=\"state\"\n          [expanded]=\"expanded\"\n          [optionContentTpl]=\"optionContentTpl\"\n          [groupLabelTpl]=\"groupLabelTpl\"\n          [textToHighlight]=\"textToHighlight\"\n          [onlyEmitDistinctChanges]=\"onlyHandleDistinctChanges\"\n          [selectWithSpace]=\"selectWithSpace\"\n          (closed)=\"setExpanded(false)\"\n          (selectedValueChanged)=\"onSelectChange($event)\"\n        >\n        </nggv-dropdown-list>\n      </div>\n      <!-- ERRORS -->\n      <div class=\"gds-form-item__footer error-wrapper\">\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          <span\n            *ngIf=\"error; else errorsRef\"\n            [attr.data-thook]=\"thook + '-errorlabel'\"\n            >{{ error }}</span\n          >\n        </span>\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      </div>\n      <!-- CHILDREN -->\n      <ng-content></ng-content>\n    </div>\n  </ng-container>\n\n  <ng-template #defaultSelectedContentTpl let-state>\n    <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\n    {{ state?.key != null && state?.label ? t(state.label) : placeholder }}\n  </ng-template>\n</ng-container>\n", styles: [":host{--sg-border-radius: .25rem;--sg-border-width: 1px;--sg-border-color: #868686;--text-primary-color: #333;--sg-form-control-bg: #fff;--grey-000: hsl(0 0% 100%);--grey-100: hsl(0, 0%, 97%);--grey-200: hsl(0, 0%, 91%);--grey-300: hsl(0, 0%, 87%);--grey-400: hsl(0, 0%, 81%);--grey-500: hsl(0, 0%, 68%);--grey-600: hsl(0, 0%, 53%);--grey-700: hsl(0, 0%, 29%);--grey-800: hsl(0, 0%, 20%);--grey-900: hsl(0, 0%, 10%);--grey-1000: hsl(0 0% 0%);display:flex;flex-direction:column;max-width:100%;position:relative;width:100%;z-index:0;position:initial}:host label{display:block;font-weight:500;line-height:1.25rem;width:100%}:host label+.gds-input-wrapper,:host label+.nggv-field--locked{margin-top:.5rem}:host .description{font-size:.875rem;margin-bottom:.5rem;line-height:1.25rem;width:100%}: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:not(:last-child){margin-bottom:unset}:host .gds-field-label--optional{font-weight:400}:host button{background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--grey-600);--sg-border-color: var(--grey-600);background:var(--sg-form-control-bg);color:var(--text-primary-color);min-height:2.75rem;display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;max-width:100%;font-size:1rem;font-weight:400;line-height:1.125;text-align:left;width:100%}:host button:focus{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host button{min-width:100%}}:host button>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host button:after{margin-left:.5rem;margin-right:.5rem;border-bottom:solid 2px var(--text-primary-color);border-left:solid 2px var(--text-primary-color);content:\"\";display:block;height:.5rem;width:.5rem;position:relative;top:-.15rem;transform:translate(75%) rotate3d(0,0,1,-45deg) scaleZ(-1);transition:transform .3s ease-in;flex-shrink:0}:host button[aria-expanded=true]:after{transform:translate(75%,6px) rotate3d(0,0,1,-45deg) scale3d(-1,-1,1)}:host button:hover:after{border-color:currentColor}:host button:disabled{--background: var(--grey-500)}:host button span{width:100%;white-space:nowrap;display:block;text-overflow:ellipsis}:host button.small{font-size:.875rem}:host button:hover{background:#e7e7e7}:host button:active{background:inherit;color:inherit;border-color:inherit}:host button:disabled,:host button.disabled{--text-primary-color: var(--grey-600);background:var(--grey-300);color:var(--grey-600);cursor:not-allowed}:host button.nggv-field--error{border-bottom:2px solid #9f000a}:host .gds-form-item__footer .form-info{font-weight:500;font-size:.875rem}: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 .dropdown{width:100%;position:relative}:host .dropdown nggv-dropdown-list{width:100%}:host.small label{line-height:1rem;font-size:.875rem}:host.small label+.gds-input-wrapper,:host.small label+.nggv-field--locked{margin-top:.25rem}:host.small .description{font-size:.875rem;line-height:1rem;margin-bottom:.25rem}:host.small button{font-size:.875rem;line-height:1rem;padding:.38rem .5rem;min-height:2rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: NggvDropdownListComponent, selector: "nggv-dropdown-list", inputs: ["expanded", "state", "scrollOffset", "optionContentTpl", "groupLabelTpl", "id", "thook", "options", "textToHighlight", "onlyEmitDistinctChanges", "selectWithSpace"], outputs: ["selectedValueChanged", "closed"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NggvDropdownComponent, selector: "nggv-dropdown", inputs: { thook: "thook", size: "size", placeholder: "placeholder", ariaLabel: "ariaLabel", options: "options", scrollOffset: "scrollOffset", allowControlNullishOption: "allowControlNullishOption", textToHighlight: "textToHighlight", selectOnSingleOption: "selectOnSingleOption", selectWithSpace: "selectWithSpace", onlyHandleDistinctChanges: "onlyHandleDistinctChanges" }, outputs: { expandedChange: "expandedChange" }, host: { listeners: { "keyup": "onKeyUp($event)" }, properties: { "attr.data-thook": "this.thook", "class.small": "this.isSmall", "class.large": "this.isLarge" } }, queries: [{ propertyName: "selectedContentTpl", first: true, predicate: ["selectedTpl"], descendants: true, read: TemplateRef }, { propertyName: "optionContentTpl", first: true, predicate: ["optionTpl"], descendants: true, read: TemplateRef }, { propertyName: "groupLabelTpl", first: true, predicate: ["groupLabelTpl"], descendants: true, read: TemplateRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- LABEL -->\n<ng-container *transloco=\"let t; read: scope\">\n  <label\n    [id]=\"id + '-label'\"\n    class=\"gds-field-label hide-if-empty\"\n    [attr.for]=\"id + '-toggle'\"\n    *ngIf=\"labelContentTpl || label\"\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=\"description\" *ngIf=\"description\">{{ description }}</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        [attr.aria-labelledby]=\"id + '-label ' + id + '-input'\"\n      >\n        <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n        <ng-container *ngIf=\"state\">\n          <ng-template\n            *ngTemplateOutlet=\"\n              selectedContentTpl || defaultSelectedContentTpl;\n              context: { $implicit: state }\n            \"\n          >\n          </ng-template>\n        </ng-container>\n      </div>\n    </ng-template>\n  </ng-container>\n\n  <!-- INPUT -->\n  <ng-container *ngIf=\"!locked\">\n    <div class=\"gds-input-wrapper\">\n      <div #input [id]=\"id + '-input'\" class=\"dropdown\">\n        <button\n          [id]=\"id + '-toggle'\"\n          [disabled]=\"disabled\"\n          type=\"button\"\n          class=\"nggv-field-dropdown__label toggle\"\n          [class.nggv-field--error]=\"invalid\"\n          role=\"combobox\"\n          aria-owns=\"listbox\"\n          aria-haspopup=\"listbox\"\n          aria-controls=\"listbox\"\n          [attr.data-thook]=\"thook + '-toggle'\"\n          [attr.aria-expanded]=\"expanded\"\n          [attr.aria-labelledby]=\"\n            ariaLabel ? null : id + '-label ' + id + '-toggle'\n          \"\n          [attr.aria-label]=\"ariaLabel || null\"\n          (click)=\"toggleDropdown()\"\n        >\n          <span>\n            <ng-template\n              *ngTemplateOutlet=\"\n                selectedContentTpl || defaultSelectedContentTpl;\n                context: { $implicit: state }\n              \"\n            >\n            </ng-template>\n          </span>\n        </button>\n        <nggv-dropdown-list\n          #dropDownList\n          [options]=\"options\"\n          [scrollOffset]=\"scrollOffset\"\n          [state]=\"state\"\n          [expanded]=\"expanded\"\n          [optionContentTpl]=\"optionContentTpl\"\n          [groupLabelTpl]=\"groupLabelTpl\"\n          [textToHighlight]=\"textToHighlight\"\n          [onlyEmitDistinctChanges]=\"onlyHandleDistinctChanges\"\n          [selectWithSpace]=\"selectWithSpace\"\n          (closed)=\"setExpanded(false)\"\n          (selectedValueChanged)=\"onSelectChange($event)\"\n        >\n        </nggv-dropdown-list>\n      </div>\n      <!-- ERRORS -->\n      <div class=\"gds-form-item__footer error-wrapper\">\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          <span\n            *ngIf=\"error; else errorsRef\"\n            [attr.data-thook]=\"thook + '-errorlabel'\"\n            >{{ error }}</span\n          >\n        </span>\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      </div>\n      <!-- CHILDREN -->\n      <ng-content></ng-content>\n    </div>\n  </ng-container>\n\n  <ng-template #defaultSelectedContentTpl let-state>\n    <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\n    {{ state?.key != null && state?.label ? t(state.label) : placeholder }}\n  </ng-template>\n</ng-container>\n", styles: [":host{--sg-border-radius: .25rem;--sg-border-width: 1px;--sg-border-color: #868686;--text-primary-color: #333;--sg-form-control-bg: #fff;--grey-000: hsl(0 0% 100%);--grey-100: hsl(0, 0%, 97%);--grey-200: hsl(0, 0%, 91%);--grey-300: hsl(0, 0%, 87%);--grey-400: hsl(0, 0%, 81%);--grey-500: hsl(0, 0%, 68%);--grey-600: hsl(0, 0%, 53%);--grey-700: hsl(0, 0%, 29%);--grey-800: hsl(0, 0%, 20%);--grey-900: hsl(0, 0%, 10%);--grey-1000: hsl(0 0% 0%);display:flex;flex-direction:column;max-width:100%;position:relative;width:100%;z-index:0;position:initial}:host label{display:block;font-weight:500;line-height:1.25rem;width:100%}:host label+.gds-input-wrapper,:host label+.nggv-field--locked{margin-top:.5rem}:host .description{font-size:.875rem;margin-bottom:.5rem;line-height:1.25rem;width:100%}: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:not(:last-child){margin-bottom:unset}:host .gds-field-label--optional{font-weight:400}:host button{background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--grey-600);--sg-border-color: var(--grey-600);background:var(--sg-form-control-bg);color:var(--text-primary-color);min-height:2.75rem;display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;max-width:100%;font-size:1rem;font-weight:400;line-height:1.125;text-align:left;width:100%}:host button:focus{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host button{min-width:100%}}:host button>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host button:after{margin-left:.5rem;margin-right:.5rem;border-bottom:solid 2px var(--text-primary-color);border-left:solid 2px var(--text-primary-color);content:\"\";display:block;height:.5rem;width:.5rem;position:relative;top:-.15rem;transform:translate(75%) rotate3d(0,0,1,-45deg) scaleZ(-1);transition:transform .3s ease-in;flex-shrink:0}:host button[aria-expanded=true]:after{transform:translate(75%,6px) rotate3d(0,0,1,-45deg) scale3d(-1,-1,1)}:host button:hover:after{border-color:currentColor}:host button:disabled{--background: var(--grey-500)}:host button span{width:100%;white-space:nowrap;display:block;text-overflow:ellipsis}:host button.small{font-size:.875rem}:host button:hover{background:#e7e7e7}:host button:active{background:inherit;color:inherit;border-color:inherit}:host button:disabled,:host button.disabled{--text-primary-color: var(--grey-600);background:var(--grey-300);color:var(--grey-600);cursor:not-allowed}:host button.nggv-field--error{border-bottom:2px solid #9f000a}:host .gds-form-item__footer .form-info{font-weight:500;font-size:.875rem}: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 .dropdown{width:100%;position:relative}:host .dropdown nggv-dropdown-list{width:100%}:host.small label{line-height:1rem;font-size:.875rem}:host.small label+.gds-input-wrapper,:host.small label+.nggv-field--locked{margin-top:.25rem}:host.small .description{font-size:.875rem;line-height:1rem;margin-bottom:.25rem}:host.small button{font-size:.875rem;line-height:1rem;padding:.38rem .5rem;min-height:2rem}:host.small .gds-form-item__footer:not(:empty){margin-top:.25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: NggvDropdownListComponent, selector: "nggv-dropdown-list", inputs: ["expanded", "state", "scrollOffset", "optionContentTpl", "groupLabelTpl", "id", "thook", "options", "textToHighlight", "onlyEmitDistinctChanges", "selectWithSpace"], outputs: ["selectedValueChanged", "closed"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NggvDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nggv-dropdown', template: "<!-- LABEL -->\n<ng-container *transloco=\"let t; read: scope\">\n  <label\n    [id]=\"id + '-label'\"\n    class=\"gds-field-label hide-if-empty\"\n    [attr.for]=\"id + '-toggle'\"\n    *ngIf=\"labelContentTpl || label\"\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=\"description\" *ngIf=\"description\">{{ description }}</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        [attr.aria-labelledby]=\"id + '-label ' + id + '-input'\"\n      >\n        <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n        <ng-container *ngIf=\"state\">\n          <ng-template\n            *ngTemplateOutlet=\"\n              selectedContentTpl || defaultSelectedContentTpl;\n              context: { $implicit: state }\n            \"\n          >\n          </ng-template>\n        </ng-container>\n      </div>\n    </ng-template>\n  </ng-container>\n\n  <!-- INPUT -->\n  <ng-container *ngIf=\"!locked\">\n    <div class=\"gds-input-wrapper\">\n      <div #input [id]=\"id + '-input'\" class=\"dropdown\">\n        <button\n          [id]=\"id + '-toggle'\"\n          [disabled]=\"disabled\"\n          type=\"button\"\n          class=\"nggv-field-dropdown__label toggle\"\n          [class.nggv-field--error]=\"invalid\"\n          role=\"combobox\"\n          aria-owns=\"listbox\"\n          aria-haspopup=\"listbox\"\n          aria-controls=\"listbox\"\n          [attr.data-thook]=\"thook + '-toggle'\"\n          [attr.aria-expanded]=\"expanded\"\n          [attr.aria-labelledby]=\"\n            ariaLabel ? null : id + '-label ' + id + '-toggle'\n          \"\n          [attr.aria-label]=\"ariaLabel || null\"\n          (click)=\"toggleDropdown()\"\n        >\n          <span>\n            <ng-template\n              *ngTemplateOutlet=\"\n                selectedContentTpl || defaultSelectedContentTpl;\n                context: { $implicit: state }\n              \"\n            >\n            </ng-template>\n          </span>\n        </button>\n        <nggv-dropdown-list\n          #dropDownList\n          [options]=\"options\"\n          [scrollOffset]=\"scrollOffset\"\n          [state]=\"state\"\n          [expanded]=\"expanded\"\n          [optionContentTpl]=\"optionContentTpl\"\n          [groupLabelTpl]=\"groupLabelTpl\"\n          [textToHighlight]=\"textToHighlight\"\n          [onlyEmitDistinctChanges]=\"onlyHandleDistinctChanges\"\n          [selectWithSpace]=\"selectWithSpace\"\n          (closed)=\"setExpanded(false)\"\n          (selectedValueChanged)=\"onSelectChange($event)\"\n        >\n        </nggv-dropdown-list>\n      </div>\n      <!-- ERRORS -->\n      <div class=\"gds-form-item__footer error-wrapper\">\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          <span\n            *ngIf=\"error; else errorsRef\"\n            [attr.data-thook]=\"thook + '-errorlabel'\"\n            >{{ error }}</span\n          >\n        </span>\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      </div>\n      <!-- CHILDREN -->\n      <ng-content></ng-content>\n    </div>\n  </ng-container>\n\n  <ng-template #defaultSelectedContentTpl let-state>\n    <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\n    {{ state?.key != null && state?.label ? t(state.label) : placeholder }}\n  </ng-template>\n</ng-container>\n", styles: [":host{--sg-border-radius: .25rem;--sg-border-width: 1px;--sg-border-color: #868686;--text-primary-color: #333;--sg-form-control-bg: #fff;--grey-000: hsl(0 0% 100%);--grey-100: hsl(0, 0%, 97%);--grey-200: hsl(0, 0%, 91%);--grey-300: hsl(0, 0%, 87%);--grey-400: hsl(0, 0%, 81%);--grey-500: hsl(0, 0%, 68%);--grey-600: hsl(0, 0%, 53%);--grey-700: hsl(0, 0%, 29%);--grey-800: hsl(0, 0%, 20%);--grey-900: hsl(0, 0%, 10%);--grey-1000: hsl(0 0% 0%);display:flex;flex-direction:column;max-width:100%;position:relative;width:100%;z-index:0;position:initial}:host label{display:block;font-weight:500;line-height:1.25rem;width:100%}:host label+.gds-input-wrapper,:host label+.nggv-field--locked{margin-top:.5rem}:host .description{font-size:.875rem;margin-bottom:.5rem;line-height:1.25rem;width:100%}: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:not(:last-child){margin-bottom:unset}:host .gds-field-label--optional{font-weight:400}:host button{background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--grey-600);--sg-border-color: var(--grey-600);background:var(--sg-form-control-bg);color:var(--text-primary-color);min-height:2.75rem;display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;max-width:100%;font-size:1rem;font-weight:400;line-height:1.125;text-align:left;width:100%}:host button:focus{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host button{min-width:100%}}:host button>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host button:after{margin-left:.5rem;margin-right:.5rem;border-bottom:solid 2px var(--text-primary-color);border-left:solid 2px var(--text-primary-color);content:\"\";display:block;height:.5rem;width:.5rem;position:relative;top:-.15rem;transform:translate(75%) rotate3d(0,0,1,-45deg) scaleZ(-1);transition:transform .3s ease-in;flex-shrink:0}:host button[aria-expanded=true]:after{transform:translate(75%,6px) rotate3d(0,0,1,-45deg) scale3d(-1,-1,1)}:host button:hover:after{border-color:currentColor}:host button:disabled{--background: var(--grey-500)}:host button span{width:100%;white-space:nowrap;display:block;text-overflow:ellipsis}:host button.small{font-size:.875rem}:host button:hover{background:#e7e7e7}:host button:active{background:inherit;color:inherit;border-color:inherit}:host button:disabled,:host button.disabled{--text-primary-color: var(--grey-600);background:var(--grey-300);color:var(--grey-600);cursor:not-allowed}:host button.nggv-field--error{border-bottom:2px solid #9f000a}:host .gds-form-item__footer .form-info{font-weight:500;font-size:.875rem}: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 .dropdown{width:100%;position:relative}:host .dropdown nggv-dropdown-list{width:100%}:host.small label{line-height:1rem;font-size:.875rem}:host.small label+.gds-input-wrapper,:host.small label+.nggv-field--locked{margin-top:.25rem}:host.small .description{font-size:.875rem;line-height:1rem;margin-bottom:.25rem}:host.small button{font-size:.875rem;line-height:1rem;padding:.38rem .5rem;min-height:2rem}\n"] }]
+            args: [{ selector: 'nggv-dropdown', template: "<!-- LABEL -->\n<ng-container *transloco=\"let t; read: scope\">\n  <label\n    [id]=\"id + '-label'\"\n    class=\"gds-field-label hide-if-empty\"\n    [attr.for]=\"id + '-toggle'\"\n    *ngIf=\"labelContentTpl || label\"\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=\"description\" *ngIf=\"description\">{{ description }}</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        [attr.aria-labelledby]=\"id + '-label ' + id + '-input'\"\n      >\n        <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n        <ng-container *ngIf=\"state\">\n          <ng-template\n            *ngTemplateOutlet=\"\n              selectedContentTpl || defaultSelectedContentTpl;\n              context: { $implicit: state }\n            \"\n          >\n          </ng-template>\n        </ng-container>\n      </div>\n    </ng-template>\n  </ng-container>\n\n  <!-- INPUT -->\n  <ng-container *ngIf=\"!locked\">\n    <div class=\"gds-input-wrapper\">\n      <div #input [id]=\"id + '-input'\" class=\"dropdown\">\n        <button\n          [id]=\"id + '-toggle'\"\n          [disabled]=\"disabled\"\n          type=\"button\"\n          class=\"nggv-field-dropdown__label toggle\"\n          [class.nggv-field--error]=\"invalid\"\n          role=\"combobox\"\n          aria-owns=\"listbox\"\n          aria-haspopup=\"listbox\"\n          aria-controls=\"listbox\"\n          [attr.data-thook]=\"thook + '-toggle'\"\n          [attr.aria-expanded]=\"expanded\"\n          [attr.aria-labelledby]=\"\n            ariaLabel ? null : id + '-label ' + id + '-toggle'\n          \"\n          [attr.aria-label]=\"ariaLabel || null\"\n          (click)=\"toggleDropdown()\"\n        >\n          <span>\n            <ng-template\n              *ngTemplateOutlet=\"\n                selectedContentTpl || defaultSelectedContentTpl;\n                context: { $implicit: state }\n              \"\n            >\n            </ng-template>\n          </span>\n        </button>\n        <nggv-dropdown-list\n          #dropDownList\n          [options]=\"options\"\n          [scrollOffset]=\"scrollOffset\"\n          [state]=\"state\"\n          [expanded]=\"expanded\"\n          [optionContentTpl]=\"optionContentTpl\"\n          [groupLabelTpl]=\"groupLabelTpl\"\n          [textToHighlight]=\"textToHighlight\"\n          [onlyEmitDistinctChanges]=\"onlyHandleDistinctChanges\"\n          [selectWithSpace]=\"selectWithSpace\"\n          (closed)=\"setExpanded(false)\"\n          (selectedValueChanged)=\"onSelectChange($event)\"\n        >\n        </nggv-dropdown-list>\n      </div>\n      <!-- ERRORS -->\n      <div class=\"gds-form-item__footer error-wrapper\">\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          <span\n            *ngIf=\"error; else errorsRef\"\n            [attr.data-thook]=\"thook + '-errorlabel'\"\n            >{{ error }}</span\n          >\n        </span>\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      </div>\n      <!-- CHILDREN -->\n      <ng-content></ng-content>\n    </div>\n  </ng-container>\n\n  <ng-template #defaultSelectedContentTpl let-state>\n    <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\n    {{ state?.key != null && state?.label ? t(state.label) : placeholder }}\n  </ng-template>\n</ng-container>\n", styles: [":host{--sg-border-radius: .25rem;--sg-border-width: 1px;--sg-border-color: #868686;--text-primary-color: #333;--sg-form-control-bg: #fff;--grey-000: hsl(0 0% 100%);--grey-100: hsl(0, 0%, 97%);--grey-200: hsl(0, 0%, 91%);--grey-300: hsl(0, 0%, 87%);--grey-400: hsl(0, 0%, 81%);--grey-500: hsl(0, 0%, 68%);--grey-600: hsl(0, 0%, 53%);--grey-700: hsl(0, 0%, 29%);--grey-800: hsl(0, 0%, 20%);--grey-900: hsl(0, 0%, 10%);--grey-1000: hsl(0 0% 0%);display:flex;flex-direction:column;max-width:100%;position:relative;width:100%;z-index:0;position:initial}:host label{display:block;font-weight:500;line-height:1.25rem;width:100%}:host label+.gds-input-wrapper,:host label+.nggv-field--locked{margin-top:.5rem}:host .description{font-size:.875rem;margin-bottom:.5rem;line-height:1.25rem;width:100%}: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:not(:last-child){margin-bottom:unset}:host .gds-field-label--optional{font-weight:400}:host button{background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--grey-600);--sg-border-color: var(--grey-600);background:var(--sg-form-control-bg);color:var(--text-primary-color);min-height:2.75rem;display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;max-width:100%;font-size:1rem;font-weight:400;line-height:1.125;text-align:left;width:100%}:host button:focus{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host button{min-width:100%}}:host button>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host button:after{margin-left:.5rem;margin-right:.5rem;border-bottom:solid 2px var(--text-primary-color);border-left:solid 2px var(--text-primary-color);content:\"\";display:block;height:.5rem;width:.5rem;position:relative;top:-.15rem;transform:translate(75%) rotate3d(0,0,1,-45deg) scaleZ(-1);transition:transform .3s ease-in;flex-shrink:0}:host button[aria-expanded=true]:after{transform:translate(75%,6px) rotate3d(0,0,1,-45deg) scale3d(-1,-1,1)}:host button:hover:after{border-color:currentColor}:host button:disabled{--background: var(--grey-500)}:host button span{width:100%;white-space:nowrap;display:block;text-overflow:ellipsis}:host button.small{font-size:.875rem}:host button:hover{background:#e7e7e7}:host button:active{background:inherit;color:inherit;border-color:inherit}:host button:disabled,:host button.disabled{--text-primary-color: var(--grey-600);background:var(--grey-300);color:var(--grey-600);cursor:not-allowed}:host button.nggv-field--error{border-bottom:2px solid #9f000a}:host .gds-form-item__footer .form-info{font-weight:500;font-size:.875rem}: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 .dropdown{width:100%;position:relative}:host .dropdown nggv-dropdown-list{width:100%}:host.small label{line-height:1rem;font-size:.875rem}:host.small label+.gds-input-wrapper,:host.small label+.nggv-field--locked{margin-top:.25rem}:host.small .description{font-size:.875rem;line-height:1rem;margin-bottom:.25rem}:host.small button{font-size:.875rem;line-height:1rem;padding:.38rem .5rem;min-height:2rem}:host.small .gds-form-item__footer:not(:empty){margin-top:.25rem}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -4875,11 +4875,11 @@ class NggvInputComponent extends NggvBaseControlValueAccessorComponent$1 {
         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$1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i4$1.NggvInputMaskDirective, selector: "[nggvInputMask]", inputs: ["nggvInputMask"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.CharacterCountdownDirective, selector: "[nggvCharacterCountdown]", inputs: ["nggvCharacterCountdown", "nggvCharacterCountdownCurrentLength"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.InputMaskFormatPipe, name: "nggvInputMaskFormat" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i4$1.NggvInputMaskDirective, selector: "[nggvInputMask]", inputs: ["nggvInputMask"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.CharacterCountdownDirective, selector: "[nggvCharacterCountdown]", inputs: ["nggvCharacterCountdown", "nggvCharacterCountdownCurrentLength"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.InputMaskFormatPipe, name: "nggvInputMaskFormat" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "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$1.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -7272,11 +7272,11 @@ class NggvTextareaComponent extends NggvBaseControlValueAccessorComponent$1 {
         this.onChange(this.state);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NggvTextareaComponent, deps: [{ token: i1$1.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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i5.CharacterCountdownDirective, selector: "[nggvCharacterCountdown]", inputs: ["nggvCharacterCountdown", "nggvCharacterCountdownCurrentLength"] }, { kind: "directive", type: i4.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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i5.CharacterCountdownDirective, selector: "[nggvCharacterCountdown]", inputs: ["nggvCharacterCountdown", "nggvCharacterCountdownCurrentLength"] }, { kind: "directive", type: i4.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$1.NgControl, decorators: [{
                     type: Self
                 }, {