npm - @sebgroup/green-angular - Versions diffs - 4.6.0 → 4.6.1 - Mend

@sebgroup/green-angular 4.6.0 → 4.6.1

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

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

@@ -47,11 +47,11 @@ class NgvCheckboxComponent extends NgvBaseControlValueAccessorComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvCheckboxComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NgvCheckboxComponent, selector: "ngv-checkbox", inputs: { thook: "thook", optionalLabel: "optionalLabel" }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.data-thook": "this.thook" } }, usesInheritance: true, ngImport: i0, template: "<!-- LOCKED INPUT -->\n<div *ngIf=\"locked && state\" class=\"sdv-field-checkbox-wrap\">\n  <div\n    [id]=\"id + '-checkbox'\"\n    class=\"ngv-field--locked\"\n    [attr.name]=\"name\"\n    [attr.value]=\"value\"\n  >\n    <ng-container *ngIf=\"!labelContentTpl\">\n      {{ label }}\n    </ng-container>\n    <ng-template\n      *ngTemplateOutlet=\"labelContentTpl ?? null; context: { $implicit: value }\"\n    ></ng-template>\n  </div>\n</div>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n  <div class=\"sdv-field-checkbox-wrap\">\n    <!-- CHECKBOX FIELD -->\n    <label\n      [id]=\"id + '-label'\"\n      [attr.for]=\"id + '-checkbox'\"\n      class=\"form-control\"\n      *transloco=\"let t; read: scope\"\n    >\n      <input\n        #input\n        type=\"checkbox\"\n        [id]=\"id + '-checkbox'\"\n        [attr.name]=\"name\"\n        [attr.value]=\"value\"\n        [attr.required]=\"required\"\n        [disabled]=\"disabled\"\n        [autofocus]=\"autofocus\"\n        [attr.aria-label]=\"description\"\n        [checked]=\"state\"\n        (click)=\"$event.stopPropagation()\"\n        (change)=\"onInputChange($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n      <!-- LABEL -->\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          <span\n            *ngIf=\"\n              optional === true || (required !== true && optional !== false)\n            \"\n            class=\"sdv-field-label--optional\"\n          >\n            ({{ t('label.optional') }})\n          </span>\n          <span>{{ label }}</span>\n        </ng-container>\n      </ng-template>\n      <i></i>\n    </label>\n  </div>\n\n  <!-- ERRORS -->\n  <ng-container *transloco=\"let t; read: scope\">\n    <label\n      class=\"sdv-field-notice sdv-field-notice--error\"\n      [attr.for]=\"id + '-checkbox'\"\n      *ngIf=\"invalid && (error || ngControl?.invalid)\"\n    >\n      <span *ngIf=\"error; else errorsRef\">{{ error }}</span>\n      <ng-template #errorsRef>\n        <span *ngIf=\"firstError as error\">\n          {{ t('error.field' + error?.code, error?.params) }}\n        </span>\n      </ng-template>\n    </label>\n  </ng-container>\n\n  <!-- CHILDREN -->\n  <ng-content></ng-content>\n</ng-container>\n", styles: [":host{--gds-comp-checkbox-container-height: 1rem;--gds-comp-checkbox-container-width: 1rem;--gds-comp-checkbox-container-color: var(--gds-sys-color-surface);--gds-comp-checkbox-container-color-disabled: var(--gds-ref-pallet-base200);--gds-comp-checkbox-border-color: var(--gds-sys-color-base);--gds-comp-checkbox-border-radius: var(--gds-sys-shape-corner-small);--gds-comp-checkbox-hover-border-color: var(--gds-ref-pallet-base600);--gds-comp-checkbox-container-color-selected: var(--gds-sys-color-base);--gds-comp-checkbox-border-color-selected: var(--gds-sys-color-surface);--gds-comp-checkbox-border-color-focus: var(--gds-sys-color-blue-dark-2)}:host label.form-control input[type=checkbox]{cursor:pointer;height:0;opacity:0;position:absolute;width:0;z-index:-1}:host label.form-control{align-items:flex-start}:host label.form-control:has(input[type=checkbox]){padding:.6875rem 1rem .5625rem}:host label.form-control:has(input[type=checkbox]:focus-visible):focus:not(:focus-visible){box-shadow:none;outline:0}:host label.form-control:has(input[type=checkbox]:focus-visible):focus,:host label.form-control:has(input[type=checkbox]:focus-visible):focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host label.form-control input[type=checkbox]~i{margin-right:.75rem;margin-top:.0625rem;flex-shrink:0;box-shadow:inset 0 0 0 1px var(--gds-comp-checkbox-border-color);position:relative;border-radius:var(--gds-comp-checkbox-border-radius);background-color:var(--gds-comp-checkbox-container-color);flex:0 0 auto;height:var(--gds-comp-checkbox-container-width, 1rem);width:var(--gds-comp-checkbox-container-width, 1rem);transition:color .3s ease-in-out,all .3s ease-in-out}:host label.form-control input[type=checkbox]~i:after{transition:color .3s ease-in-out,all .3s ease-in-out}:host label.form-control input[type=checkbox]:not(:checked):focus-visible~i{box-shadow:inset 0 0 0 1px var(--gds-comp-checkbox-border-color-focus)}:host label.form-control:hover input[type=checkbox]:not(.disabled,:disabled,:checked,:indeterminate)~i{border-color:var(--gds-comp-checkbox-hover-border-color);box-shadow:inset 0 0 0 1px var(--gds-comp-checkbox-hover-border-color)}:host label.form-control:hover input[type=checkbox]:not(:checked,:indeterminate,:disabled,.disabled)~i:after{border-color:var(--gds-comp-checkbox-hover-border-color);opacity:1}:host label.form-control input[type=checkbox]:checked~i{background-color:var(--gds-comp-checkbox-container-color-selected)}:host label.form-control:hover input[type=checkbox]:checked~i{background-color:var(--gds-comp-checkbox-hover-border-color);box-shadow:inset 0 0 0 1px var(--gds-comp-checkbox-hover-border-color)}:host label.form-control input[type=checkbox]:indeterminate~i{background-color:var(--gds-comp-checkbox-container-color-selected)}:host label.form-control input[type=checkbox]:indeterminate~i:after{border-bottom:2px solid var(--gds-comp-checkbox-border-color-selected, #fff);border-left:none;transform:scale(1) rotate(0);opacity:1}:host label.form-control:has(input[type=checkbox].is-invalid){border:.0625rem solid var(--intent-danger-background);margin-bottom:.5rem}:host .is-invalid label.form-control:has(input[type=checkbox].is-invalid){border:none;margin:0}@supports (-moz-appearance: none){:host label.form-control.is-invalid{border:.0625rem solid var(--intent-danger-background);margin-bottom:.5rem}:host .is-invalid label.form-control.is-invalid{border:none;margin:0}}:host label.form-control input[type=checkbox]:disabled~i,:host label.form-control input[type=checkbox].disabled~i{background:var(--sg-form-control-bg-disabled)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled~i::placeholder,:host label.form-control input[type=checkbox].disabled~i::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i,:host label.form-control input[type=checkbox].disabled:checked~i{background:var(--sg-form-control-bg-disabled)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i::placeholder,:host label.form-control input[type=checkbox].disabled:checked~i::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i:after,:host label.form-control input[type=checkbox].disabled:checked~i:after{border-color:var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled~span,:host label.form-control input[type=checkbox].disabled~span{color:var(--text-disabled-color)!important;cursor:not-allowed}:host label.form-control input[type=checkbox]:disabled~span::placeholder,:host label.form-control input[type=checkbox].disabled~span::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]~i:after{content:\"\";opacity:0;position:absolute}:host label.form-control input[type=checkbox]~i:after{border-bottom:3px solid var(--gds-comp-checkbox-border-color-selected, #fff);border-left:3px solid var(--gds-comp-checkbox-border-color-selected, #fff);height:.5rem;width:1rem;left:0;top:.1875rem;transform:scale(.601) rotate(-45deg);transform-origin:center}:host label.form-control input[type=checkbox]:checked~i:after{opacity:1}:host .form-control{padding:.75rem 1rem;border:1px solid transparent;border-radius:var(--gds-sys-shape-corner-medium);align-items:center;cursor:pointer;display:flex;flex-direction:row-reverse;font:inherit;justify-content:flex-end;position:relative;user-select:none;-webkit-user-select:none}:host .form-control:has(input:disabled){cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NgvCheckboxComponent, selector: "nggv-checkbox", inputs: { thook: "thook", optionalLabel: "optionalLabel" }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.data-thook": "this.thook" } }, usesInheritance: true, ngImport: i0, template: "<!-- LOCKED INPUT -->\n<div *ngIf=\"locked && state\" class=\"sdv-field-checkbox-wrap\">\n  <div\n    [id]=\"id + '-checkbox'\"\n    class=\"nggv-field--locked\"\n    [attr.name]=\"name\"\n    [attr.value]=\"value\"\n  >\n    <ng-container *ngIf=\"!labelContentTpl\">\n      {{ label }}\n    </ng-container>\n    <ng-template\n      *ngTemplateOutlet=\"labelContentTpl ?? null; context: { $implicit: value }\"\n    ></ng-template>\n  </div>\n</div>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n  <div class=\"sdv-field-checkbox-wrap\">\n    <!-- CHECKBOX FIELD -->\n    <label\n      [id]=\"id + '-label'\"\n      [attr.for]=\"id + '-checkbox'\"\n      class=\"form-control\"\n      *transloco=\"let t; read: scope\"\n    >\n      <input\n        #input\n        type=\"checkbox\"\n        [id]=\"id + '-checkbox'\"\n        [attr.name]=\"name\"\n        [attr.value]=\"value\"\n        [attr.required]=\"required\"\n        [disabled]=\"disabled\"\n        [autofocus]=\"autofocus\"\n        [attr.aria-label]=\"description\"\n        [checked]=\"state\"\n        (click)=\"$event.stopPropagation()\"\n        (change)=\"onInputChange($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n      <!-- LABEL -->\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          <span\n            *ngIf=\"\n              optional === true || (required !== true && optional !== false)\n            \"\n            class=\"sdv-field-label--optional\"\n          >\n            ({{ t('label.optional') }})\n          </span>\n          <span>{{ label }}</span>\n        </ng-container>\n      </ng-template>\n      <i></i>\n    </label>\n  </div>\n\n  <!-- ERRORS -->\n  <ng-container *transloco=\"let t; read: scope\">\n    <label\n      class=\"sdv-field-notice sdv-field-notice--error\"\n      [attr.for]=\"id + '-checkbox'\"\n      *ngIf=\"invalid && (error || ngControl?.invalid)\"\n    >\n      <span *ngIf=\"error; else errorsRef\">{{ error }}</span>\n      <ng-template #errorsRef>\n        <span *ngIf=\"firstError as error\">\n          {{ t('error.field' + error?.code, error?.params) }}\n        </span>\n      </ng-template>\n    </label>\n  </ng-container>\n\n  <!-- CHILDREN -->\n  <ng-content></ng-content>\n</ng-container>\n", styles: [":host{--gds-comp-checkbox-container-height: 1rem;--gds-comp-checkbox-container-width: 1rem;--gds-comp-checkbox-container-color: var(--gds-sys-color-surface);--gds-comp-checkbox-container-color-disabled: var(--gds-ref-pallet-base200);--gds-comp-checkbox-border-color: var(--gds-sys-color-base);--gds-comp-checkbox-border-radius: var(--gds-sys-shape-corner-small);--gds-comp-checkbox-hover-border-color: var(--gds-ref-pallet-base600);--gds-comp-checkbox-container-color-selected: var(--gds-sys-color-base);--gds-comp-checkbox-border-color-selected: var(--gds-sys-color-surface);--gds-comp-checkbox-border-color-focus: var(--gds-sys-color-blue-dark-2)}:host label.form-control input[type=checkbox]{cursor:pointer;height:0;opacity:0;position:absolute;width:0;z-index:-1}:host label.form-control{align-items:flex-start}:host label.form-control:has(input[type=checkbox]){padding:.6875rem 1rem .5625rem}:host label.form-control:has(input[type=checkbox]:focus-visible):focus:not(:focus-visible){box-shadow:none;outline:0}:host label.form-control:has(input[type=checkbox]:focus-visible):focus,:host label.form-control:has(input[type=checkbox]:focus-visible):focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host label.form-control input[type=checkbox]~i{margin-right:.75rem;margin-top:.0625rem;flex-shrink:0;box-shadow:inset 0 0 0 1px var(--gds-comp-checkbox-border-color);position:relative;border-radius:var(--gds-comp-checkbox-border-radius);background-color:var(--gds-comp-checkbox-container-color);flex:0 0 auto;height:var(--gds-comp-checkbox-container-width, 1rem);width:var(--gds-comp-checkbox-container-width, 1rem);transition:color .3s ease-in-out,all .3s ease-in-out}:host label.form-control input[type=checkbox]~i:after{transition:color .3s ease-in-out,all .3s ease-in-out}:host label.form-control input[type=checkbox]:not(:checked):focus-visible~i{box-shadow:inset 0 0 0 1px var(--gds-comp-checkbox-border-color-focus)}:host label.form-control:hover input[type=checkbox]:not(.disabled,:disabled,:checked,:indeterminate)~i{border-color:var(--gds-comp-checkbox-hover-border-color);box-shadow:inset 0 0 0 1px var(--gds-comp-checkbox-hover-border-color)}:host label.form-control:hover input[type=checkbox]:not(:checked,:indeterminate,:disabled,.disabled)~i:after{border-color:var(--gds-comp-checkbox-hover-border-color);opacity:1}:host label.form-control input[type=checkbox]:checked~i{background-color:var(--gds-comp-checkbox-container-color-selected)}:host label.form-control:hover input[type=checkbox]:checked~i{background-color:var(--gds-comp-checkbox-hover-border-color);box-shadow:inset 0 0 0 1px var(--gds-comp-checkbox-hover-border-color)}:host label.form-control input[type=checkbox]:indeterminate~i{background-color:var(--gds-comp-checkbox-container-color-selected)}:host label.form-control input[type=checkbox]:indeterminate~i:after{border-bottom:2px solid var(--gds-comp-checkbox-border-color-selected, #fff);border-left:none;transform:scale(1) rotate(0);opacity:1}:host label.form-control:has(input[type=checkbox].is-invalid){border:.0625rem solid var(--intent-danger-background);margin-bottom:.5rem}:host .is-invalid label.form-control:has(input[type=checkbox].is-invalid){border:none;margin:0}@supports (-moz-appearance: none){:host label.form-control.is-invalid{border:.0625rem solid var(--intent-danger-background);margin-bottom:.5rem}:host .is-invalid label.form-control.is-invalid{border:none;margin:0}}:host label.form-control input[type=checkbox]:disabled~i,:host label.form-control input[type=checkbox].disabled~i{background:var(--sg-form-control-bg-disabled)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled~i::placeholder,:host label.form-control input[type=checkbox].disabled~i::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i,:host label.form-control input[type=checkbox].disabled:checked~i{background:var(--sg-form-control-bg-disabled)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i::placeholder,:host label.form-control input[type=checkbox].disabled:checked~i::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i:after,:host label.form-control input[type=checkbox].disabled:checked~i:after{border-color:var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled~span,:host label.form-control input[type=checkbox].disabled~span{color:var(--text-disabled-color)!important;cursor:not-allowed}:host label.form-control input[type=checkbox]:disabled~span::placeholder,:host label.form-control input[type=checkbox].disabled~span::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]~i:after{content:\"\";opacity:0;position:absolute}:host label.form-control input[type=checkbox]~i:after{border-bottom:3px solid var(--gds-comp-checkbox-border-color-selected, #fff);border-left:3px solid var(--gds-comp-checkbox-border-color-selected, #fff);height:.5rem;width:1rem;left:0;top:.1875rem;transform:scale(.601) rotate(-45deg);transform-origin:center}:host label.form-control input[type=checkbox]:checked~i:after{opacity:1}:host .form-control{padding:.75rem 1rem;border:1px solid transparent;border-radius:var(--gds-sys-shape-corner-medium);align-items:center;cursor:pointer;display:flex;flex-direction:row-reverse;font:inherit;justify-content:flex-end;position:relative;user-select:none;-webkit-user-select:none}:host .form-control:has(input:disabled){cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvCheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngv-checkbox', template: "<!-- LOCKED INPUT -->\n<div *ngIf=\"locked && state\" class=\"sdv-field-checkbox-wrap\">\n  <div\n    [id]=\"id + '-checkbox'\"\n    class=\"ngv-field--locked\"\n    [attr.name]=\"name\"\n    [attr.value]=\"value\"\n  >\n    <ng-container *ngIf=\"!labelContentTpl\">\n      {{ label }}\n    </ng-container>\n    <ng-template\n      *ngTemplateOutlet=\"labelContentTpl ?? null; context: { $implicit: value }\"\n    ></ng-template>\n  </div>\n</div>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n  <div class=\"sdv-field-checkbox-wrap\">\n    <!-- CHECKBOX FIELD -->\n    <label\n      [id]=\"id + '-label'\"\n      [attr.for]=\"id + '-checkbox'\"\n      class=\"form-control\"\n      *transloco=\"let t; read: scope\"\n    >\n      <input\n        #input\n        type=\"checkbox\"\n        [id]=\"id + '-checkbox'\"\n        [attr.name]=\"name\"\n        [attr.value]=\"value\"\n        [attr.required]=\"required\"\n        [disabled]=\"disabled\"\n        [autofocus]=\"autofocus\"\n        [attr.aria-label]=\"description\"\n        [checked]=\"state\"\n        (click)=\"$event.stopPropagation()\"\n        (change)=\"onInputChange($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n      <!-- LABEL -->\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          <span\n            *ngIf=\"\n              optional === true || (required !== true && optional !== false)\n            \"\n            class=\"sdv-field-label--optional\"\n          >\n            ({{ t('label.optional') }})\n          </span>\n          <span>{{ label }}</span>\n        </ng-container>\n      </ng-template>\n      <i></i>\n    </label>\n  </div>\n\n  <!-- ERRORS -->\n  <ng-container *transloco=\"let t; read: scope\">\n    <label\n      class=\"sdv-field-notice sdv-field-notice--error\"\n      [attr.for]=\"id + '-checkbox'\"\n      *ngIf=\"invalid && (error || ngControl?.invalid)\"\n    >\n      <span *ngIf=\"error; else errorsRef\">{{ error }}</span>\n      <ng-template #errorsRef>\n        <span *ngIf=\"firstError as error\">\n          {{ t('error.field' + error?.code, error?.params) }}\n        </span>\n      </ng-template>\n    </label>\n  </ng-container>\n\n  <!-- CHILDREN -->\n  <ng-content></ng-content>\n</ng-container>\n", styles: [":host{--gds-comp-checkbox-container-height: 1rem;--gds-comp-checkbox-container-width: 1rem;--gds-comp-checkbox-container-color: var(--gds-sys-color-surface);--gds-comp-checkbox-container-color-disabled: var(--gds-ref-pallet-base200);--gds-comp-checkbox-border-color: var(--gds-sys-color-base);--gds-comp-checkbox-border-radius: var(--gds-sys-shape-corner-small);--gds-comp-checkbox-hover-border-color: var(--gds-ref-pallet-base600);--gds-comp-checkbox-container-color-selected: var(--gds-sys-color-base);--gds-comp-checkbox-border-color-selected: var(--gds-sys-color-surface);--gds-comp-checkbox-border-color-focus: var(--gds-sys-color-blue-dark-2)}:host label.form-control input[type=checkbox]{cursor:pointer;height:0;opacity:0;position:absolute;width:0;z-index:-1}:host label.form-control{align-items:flex-start}:host label.form-control:has(input[type=checkbox]){padding:.6875rem 1rem .5625rem}:host label.form-control:has(input[type=checkbox]:focus-visible):focus:not(:focus-visible){box-shadow:none;outline:0}:host label.form-control:has(input[type=checkbox]:focus-visible):focus,:host label.form-control:has(input[type=checkbox]:focus-visible):focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host label.form-control input[type=checkbox]~i{margin-right:.75rem;margin-top:.0625rem;flex-shrink:0;box-shadow:inset 0 0 0 1px var(--gds-comp-checkbox-border-color);position:relative;border-radius:var(--gds-comp-checkbox-border-radius);background-color:var(--gds-comp-checkbox-container-color);flex:0 0 auto;height:var(--gds-comp-checkbox-container-width, 1rem);width:var(--gds-comp-checkbox-container-width, 1rem);transition:color .3s ease-in-out,all .3s ease-in-out}:host label.form-control input[type=checkbox]~i:after{transition:color .3s ease-in-out,all .3s ease-in-out}:host label.form-control input[type=checkbox]:not(:checked):focus-visible~i{box-shadow:inset 0 0 0 1px var(--gds-comp-checkbox-border-color-focus)}:host label.form-control:hover input[type=checkbox]:not(.disabled,:disabled,:checked,:indeterminate)~i{border-color:var(--gds-comp-checkbox-hover-border-color);box-shadow:inset 0 0 0 1px var(--gds-comp-checkbox-hover-border-color)}:host label.form-control:hover input[type=checkbox]:not(:checked,:indeterminate,:disabled,.disabled)~i:after{border-color:var(--gds-comp-checkbox-hover-border-color);opacity:1}:host label.form-control input[type=checkbox]:checked~i{background-color:var(--gds-comp-checkbox-container-color-selected)}:host label.form-control:hover input[type=checkbox]:checked~i{background-color:var(--gds-comp-checkbox-hover-border-color);box-shadow:inset 0 0 0 1px var(--gds-comp-checkbox-hover-border-color)}:host label.form-control input[type=checkbox]:indeterminate~i{background-color:var(--gds-comp-checkbox-container-color-selected)}:host label.form-control input[type=checkbox]:indeterminate~i:after{border-bottom:2px solid var(--gds-comp-checkbox-border-color-selected, #fff);border-left:none;transform:scale(1) rotate(0);opacity:1}:host label.form-control:has(input[type=checkbox].is-invalid){border:.0625rem solid var(--intent-danger-background);margin-bottom:.5rem}:host .is-invalid label.form-control:has(input[type=checkbox].is-invalid){border:none;margin:0}@supports (-moz-appearance: none){:host label.form-control.is-invalid{border:.0625rem solid var(--intent-danger-background);margin-bottom:.5rem}:host .is-invalid label.form-control.is-invalid{border:none;margin:0}}:host label.form-control input[type=checkbox]:disabled~i,:host label.form-control input[type=checkbox].disabled~i{background:var(--sg-form-control-bg-disabled)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled~i::placeholder,:host label.form-control input[type=checkbox].disabled~i::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i,:host label.form-control input[type=checkbox].disabled:checked~i{background:var(--sg-form-control-bg-disabled)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i::placeholder,:host label.form-control input[type=checkbox].disabled:checked~i::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i:after,:host label.form-control input[type=checkbox].disabled:checked~i:after{border-color:var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled~span,:host label.form-control input[type=checkbox].disabled~span{color:var(--text-disabled-color)!important;cursor:not-allowed}:host label.form-control input[type=checkbox]:disabled~span::placeholder,:host label.form-control input[type=checkbox].disabled~span::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]~i:after{content:\"\";opacity:0;position:absolute}:host label.form-control input[type=checkbox]~i:after{border-bottom:3px solid var(--gds-comp-checkbox-border-color-selected, #fff);border-left:3px solid var(--gds-comp-checkbox-border-color-selected, #fff);height:.5rem;width:1rem;left:0;top:.1875rem;transform:scale(.601) rotate(-45deg);transform-origin:center}:host label.form-control input[type=checkbox]:checked~i:after{opacity:1}:host .form-control{padding:.75rem 1rem;border:1px solid transparent;border-radius:var(--gds-sys-shape-corner-medium);align-items:center;cursor:pointer;display:flex;flex-direction:row-reverse;font:inherit;justify-content:flex-end;position:relative;user-select:none;-webkit-user-select:none}:host .form-control:has(input:disabled){cursor:not-allowed}\n"] }]
+            args: [{ selector: 'nggv-checkbox', template: "<!-- LOCKED INPUT -->\n<div *ngIf=\"locked && state\" class=\"sdv-field-checkbox-wrap\">\n  <div\n    [id]=\"id + '-checkbox'\"\n    class=\"nggv-field--locked\"\n    [attr.name]=\"name\"\n    [attr.value]=\"value\"\n  >\n    <ng-container *ngIf=\"!labelContentTpl\">\n      {{ label }}\n    </ng-container>\n    <ng-template\n      *ngTemplateOutlet=\"labelContentTpl ?? null; context: { $implicit: value }\"\n    ></ng-template>\n  </div>\n</div>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n  <div class=\"sdv-field-checkbox-wrap\">\n    <!-- CHECKBOX FIELD -->\n    <label\n      [id]=\"id + '-label'\"\n      [attr.for]=\"id + '-checkbox'\"\n      class=\"form-control\"\n      *transloco=\"let t; read: scope\"\n    >\n      <input\n        #input\n        type=\"checkbox\"\n        [id]=\"id + '-checkbox'\"\n        [attr.name]=\"name\"\n        [attr.value]=\"value\"\n        [attr.required]=\"required\"\n        [disabled]=\"disabled\"\n        [autofocus]=\"autofocus\"\n        [attr.aria-label]=\"description\"\n        [checked]=\"state\"\n        (click)=\"$event.stopPropagation()\"\n        (change)=\"onInputChange($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n      <!-- LABEL -->\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          <span\n            *ngIf=\"\n              optional === true || (required !== true && optional !== false)\n            \"\n            class=\"sdv-field-label--optional\"\n          >\n            ({{ t('label.optional') }})\n          </span>\n          <span>{{ label }}</span>\n        </ng-container>\n      </ng-template>\n      <i></i>\n    </label>\n  </div>\n\n  <!-- ERRORS -->\n  <ng-container *transloco=\"let t; read: scope\">\n    <label\n      class=\"sdv-field-notice sdv-field-notice--error\"\n      [attr.for]=\"id + '-checkbox'\"\n      *ngIf=\"invalid && (error || ngControl?.invalid)\"\n    >\n      <span *ngIf=\"error; else errorsRef\">{{ error }}</span>\n      <ng-template #errorsRef>\n        <span *ngIf=\"firstError as error\">\n          {{ t('error.field' + error?.code, error?.params) }}\n        </span>\n      </ng-template>\n    </label>\n  </ng-container>\n\n  <!-- CHILDREN -->\n  <ng-content></ng-content>\n</ng-container>\n", styles: [":host{--gds-comp-checkbox-container-height: 1rem;--gds-comp-checkbox-container-width: 1rem;--gds-comp-checkbox-container-color: var(--gds-sys-color-surface);--gds-comp-checkbox-container-color-disabled: var(--gds-ref-pallet-base200);--gds-comp-checkbox-border-color: var(--gds-sys-color-base);--gds-comp-checkbox-border-radius: var(--gds-sys-shape-corner-small);--gds-comp-checkbox-hover-border-color: var(--gds-ref-pallet-base600);--gds-comp-checkbox-container-color-selected: var(--gds-sys-color-base);--gds-comp-checkbox-border-color-selected: var(--gds-sys-color-surface);--gds-comp-checkbox-border-color-focus: var(--gds-sys-color-blue-dark-2)}:host label.form-control input[type=checkbox]{cursor:pointer;height:0;opacity:0;position:absolute;width:0;z-index:-1}:host label.form-control{align-items:flex-start}:host label.form-control:has(input[type=checkbox]){padding:.6875rem 1rem .5625rem}:host label.form-control:has(input[type=checkbox]:focus-visible):focus:not(:focus-visible){box-shadow:none;outline:0}:host label.form-control:has(input[type=checkbox]:focus-visible):focus,:host label.form-control:has(input[type=checkbox]:focus-visible):focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host label.form-control input[type=checkbox]~i{margin-right:.75rem;margin-top:.0625rem;flex-shrink:0;box-shadow:inset 0 0 0 1px var(--gds-comp-checkbox-border-color);position:relative;border-radius:var(--gds-comp-checkbox-border-radius);background-color:var(--gds-comp-checkbox-container-color);flex:0 0 auto;height:var(--gds-comp-checkbox-container-width, 1rem);width:var(--gds-comp-checkbox-container-width, 1rem);transition:color .3s ease-in-out,all .3s ease-in-out}:host label.form-control input[type=checkbox]~i:after{transition:color .3s ease-in-out,all .3s ease-in-out}:host label.form-control input[type=checkbox]:not(:checked):focus-visible~i{box-shadow:inset 0 0 0 1px var(--gds-comp-checkbox-border-color-focus)}:host label.form-control:hover input[type=checkbox]:not(.disabled,:disabled,:checked,:indeterminate)~i{border-color:var(--gds-comp-checkbox-hover-border-color);box-shadow:inset 0 0 0 1px var(--gds-comp-checkbox-hover-border-color)}:host label.form-control:hover input[type=checkbox]:not(:checked,:indeterminate,:disabled,.disabled)~i:after{border-color:var(--gds-comp-checkbox-hover-border-color);opacity:1}:host label.form-control input[type=checkbox]:checked~i{background-color:var(--gds-comp-checkbox-container-color-selected)}:host label.form-control:hover input[type=checkbox]:checked~i{background-color:var(--gds-comp-checkbox-hover-border-color);box-shadow:inset 0 0 0 1px var(--gds-comp-checkbox-hover-border-color)}:host label.form-control input[type=checkbox]:indeterminate~i{background-color:var(--gds-comp-checkbox-container-color-selected)}:host label.form-control input[type=checkbox]:indeterminate~i:after{border-bottom:2px solid var(--gds-comp-checkbox-border-color-selected, #fff);border-left:none;transform:scale(1) rotate(0);opacity:1}:host label.form-control:has(input[type=checkbox].is-invalid){border:.0625rem solid var(--intent-danger-background);margin-bottom:.5rem}:host .is-invalid label.form-control:has(input[type=checkbox].is-invalid){border:none;margin:0}@supports (-moz-appearance: none){:host label.form-control.is-invalid{border:.0625rem solid var(--intent-danger-background);margin-bottom:.5rem}:host .is-invalid label.form-control.is-invalid{border:none;margin:0}}:host label.form-control input[type=checkbox]:disabled~i,:host label.form-control input[type=checkbox].disabled~i{background:var(--sg-form-control-bg-disabled)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled~i::placeholder,:host label.form-control input[type=checkbox].disabled~i::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i,:host label.form-control input[type=checkbox].disabled:checked~i{background:var(--sg-form-control-bg-disabled)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i::placeholder,:host label.form-control input[type=checkbox].disabled:checked~i::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i:after,:host label.form-control input[type=checkbox].disabled:checked~i:after{border-color:var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled~span,:host label.form-control input[type=checkbox].disabled~span{color:var(--text-disabled-color)!important;cursor:not-allowed}:host label.form-control input[type=checkbox]:disabled~span::placeholder,:host label.form-control input[type=checkbox].disabled~span::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]~i:after{content:\"\";opacity:0;position:absolute}:host label.form-control input[type=checkbox]~i:after{border-bottom:3px solid var(--gds-comp-checkbox-border-color-selected, #fff);border-left:3px solid var(--gds-comp-checkbox-border-color-selected, #fff);height:.5rem;width:1rem;left:0;top:.1875rem;transform:scale(.601) rotate(-45deg);transform-origin:center}:host label.form-control input[type=checkbox]:checked~i:after{opacity:1}:host .form-control{padding:.75rem 1rem;border:1px solid transparent;border-radius:var(--gds-sys-shape-corner-medium);align-items:center;cursor:pointer;display:flex;flex-direction:row-reverse;font:inherit;justify-content:flex-end;position:relative;user-select:none;-webkit-user-select:none}:host .form-control:has(input:disabled){cursor:not-allowed}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
                     type: Self
                 }, {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"sebgroup-green-angular-src-v-angular-checkbox.mjs","sources":["../../../../libs/angular/src/v-angular/checkbox/checkbox.component.ts","../../../../libs/angular/src/v-angular/checkbox/checkbox.component.html","../../../../libs/angular/src/v-angular/checkbox/checkbox.module.ts","../../../../libs/angular/src/v-angular/checkbox/sebgroup-green-angular-src-v-angular-checkbox.ts"],"sourcesContent":["import {\n ChangeDetectorRef,\n Component,\n EventEmitter,\n HostBinding,\n Inject,\n Input,\n Optional,\n Output,\n Self,\n OnChanges,\n SimpleChanges,\n} from '@angular/core'\nimport { NgControl } from '@angular/forms'\nimport { TRANSLOCO_SCOPE, TranslocoScope } from '@ngneat/transloco'\nimport { NgvBaseControlValueAccessorComponent } from '@sebgroup/green-angular/src/v-angular/base-control-value-accessor'\n\n/*\n Checkboxes allow a user to toggle an option on or off, or make multiple choices in a set of available options.\n * https://designlibrary.sebgroup.com/components/component-checkbox\n /\n@Component({\n ~~// eslint-disable-next-line @angular-eslint/component-~~selector~~\n selector~~: '~~ngv~~-checkbox',\n templateUrl: './checkbox.component.html',\n styleUrls: ['./checkbox.component.scss'],\n})\nexport class NgvCheckboxComponent extends NgvBaseControlValueAccessorComponent {\n /* Special property used for selecting DOM elements during automated UI testing. /\n @HostBinding('attr.data-thook') @Input() thook = 'checkbox'\n @Input() optionalLabel = 'Optional'\n\n @Output() readonly valueChange: EventEmitter<string> =\n new EventEmitter<string>()\n\n constructor(\n @Self()\n @Optional()\n public ngControl: NgControl,\n @Optional()\n @Inject(TRANSLOCO_SCOPE)\n protected translocoScope: TranslocoScope,\n protected cdr: ChangeDetectorRef,\n ) {\n super(ngControl, translocoScope, cdr)\n }\n\n /* @internal /\n onInputChange(event: Event) {\n event.stopPropagation()\n if (this.disabled) return\n this.state = !this.state\n this.onTouched()\n this.onChange(this.state)\n }\n\n /* Writes a new value of true or false based on if argument matches this components value property. /\n writeValue(value: any): void {\n // Phantom null value on first load https://github.com/angular/angular/pull/38140\n super.writeValue(value === this.value)\n }\n\n /* Registers a callback function that is called when the child input element's value changes. /\n registerOnChange(fn: (checked: any) => any) {\n // Override default to update registry\n this.onChange = (checked) => {\n const output = checked ? this.value : null\n fn(output)\n this.valueChange.emit(output)\n }\n }\n}\n","<!-- LOCKED INPUT -->\n<div ngIf=\"locked && state\" class=\"sdv-field-checkbox-wrap\">\n <div\n [id]=\"id + '-checkbox'\"\n class=\"~~ngv~~-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n >\n <ng-container ngIf=\"!labelContentTpl\">\n {{ label }}\n </ng-container>\n <ng-template\n ngTemplateOutlet=\"labelContentTpl ?? null; context: { $implicit: value }\"\n ></ng-template>\n </div>\n</div>\n\n<!-- INPUT WRAPPER -->\n<ng-container ngIf=\"!locked\">\n <div class=\"sdv-field-checkbox-wrap\">\n <!-- CHECKBOX FIELD -->\n <label\n [id]=\"id + '-label'\"\n [attr.for]=\"id + '-checkbox'\"\n class=\"form-control\"\n transloco=\"let t; read: scope\"\n >\n <input\n #input\n type=\"checkbox\"\n [id]=\"id + '-checkbox'\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [attr.required]=\"required\"\n [disabled]=\"disabled\"\n [autofocus]=\"autofocus\"\n [attr.aria-label]=\"description\"\n [checked]=\"state\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"onInputChange($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n <!-- LABEL -->\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 <span\n ngIf=\"\n optional === true \|\| (required !== true && optional !== false)\n \"\n class=\"sdv-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n <span>{{ label }}</span>\n </ng-container>\n </ng-template>\n <i></i>\n </label>\n </div>\n\n <!-- ERRORS -->\n <ng-container transloco=\"let t; read: scope\">\n <label\n class=\"sdv-field-notice sdv-field-notice--error\"\n [attr.for]=\"id + '-checkbox'\"\n ngIf=\"invalid && (error \|\| ngControl?.invalid)\"\n >\n <span ngIf=\"error; else errorsRef\">{{ error }}</span>\n <ng-template #errorsRef>\n <span ngIf=\"firstError as error\">\n {{ t('error.field' + error?.code, error?.params) }}\n </span>\n </ng-template>\n </label>\n </ng-container>\n\n <!-- CHILDREN -->\n <ng-content></ng-content>\n</ng-container>\n","import { NgModule } from '@angular/core'\nimport { CommonModule } from '@angular/common'\n\nimport { NgvCheckboxComponent } from './checkbox.component'\nimport { NgvI18nModule } from '@sebgroup/green-angular/src/v-angular/i18n'\n\n@NgModule({\n declarations: [NgvCheckboxComponent],\n imports: [CommonModule, NgvI18nModule],\n exports: [NgvCheckboxComponent],\n})\nexport class NgvCheckboxModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;;;;;;AAiBA;;;AAGG;~~AAOG~~,MAAO,oBAAqB,SAAQ,oCAAoC,CAAA;AAQ5E,IAAA,WAAA,CAGS,SAAoB,EAGjB,cAA8B,EAC9B,GAAsB,EAAA;AAEhC,QAAA,KAAK,CAAC,SAAS,EAAE,cAAc,EAAE,GAAG,CAAC,CAAA;QAN9B,IAAS,CAAA,SAAA,GAAT,SAAS,CAAW;QAGjB,IAAc,CAAA,cAAA,GAAd,cAAc,CAAgB;QAC9B,IAAG,CAAA,GAAA,GAAH,GAAG,CAAmB;;QAbO,IAAK,CAAA,KAAA,GAAG,UAAU,CAAA;QAClD,IAAa,CAAA,aAAA,GAAG,UAAU,CAAA;AAEhB,QAAA,IAAA,CAAA,WAAW,GAC5B,IAAI,YAAY,EAAU,CAAA;KAY3B;;AAGD,IAAA,aAAa,CAAC,KAAY,EAAA;QACxB,KAAK,CAAC,eAAe,EAAE,CAAA;QACvB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAM;AACzB,QAAA,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,KAAK,CAAA;QACxB,IAAI,CAAC,SAAS,EAAE,CAAA;AAChB,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;KAC1B;;AAGD,IAAA,UAAU,CAAC,KAAU,EAAA;;QAEnB,KAAK,CAAC,UAAU,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAA;KACvC;;AAGD,IAAA,gBAAgB,CAAC,EAAyB,EAAA;;AAExC,QAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,OAAO,KAAI;AAC1B,YAAA,MAAM,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;YAC1C,EAAE,CAAC,MAAM,CAAC,CAAA;AACV,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;AAC/B,SAAC,CAAA;KACF;AA3CU,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,oBAAoB,uEAarB,eAAe,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAbd,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,oBAAoB,~~2OC3BjC~~,~~g8EAoFA~~,EAAA,MAAA,EAAA,CAAA,utLAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,eAAA,EAAA,qBAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;~~4FDzDa~~,oBAAoB,EAAA,UAAA,EAAA,CAAA;~~kBANhC~~,SAAS;+~~BAEE~~,~~cAAc~~,EAAA,QAAA,EAAA,~~g8EAAA~~,EAAA,MAAA,EAAA,CAAA,utLAAA,CAAA,EAAA,CAAA;;~~0BAarB~~,IAAI;;0BACJ,QAAQ;;0BAER,QAAQ;;0BACR,MAAM;2BAAC,eAAe,CAAA;4EAXgB,KAAK,EAAA,CAAA;sBAA7C,WAAW;uBAAC,iBAAiB,CAAA;;sBAAG,KAAK;gBAC7B,aAAa,EAAA,CAAA;sBAArB,KAAK;gBAEa,WAAW,EAAA,CAAA;sBAA7B,MAAM;;;~~MErBI~~,iBAAiB,CAAA;+GAAjB,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA,EAAA;AAAjB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,iBAAiB,iBAJb,oBAAoB,CAAA,EAAA,OAAA,EAAA,CACzB,YAAY,EAAE,aAAa,aAC3B,oBAAoB,CAAA,EAAA,CAAA,CAAA,EAAA;gHAEnB,iBAAiB,EAAA,OAAA,EAAA,CAHlB,YAAY,EAAE,aAAa,CAAA,EAAA,CAAA,CAAA,EAAA;;4FAG1B,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAL7B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,YAAY,EAAE,CAAC,oBAAoB,CAAC;AACpC,oBAAA,OAAO,EAAE,CAAC,YAAY,EAAE,aAAa,CAAC;oBACtC,OAAO,EAAE,CAAC,oBAAoB,CAAC;AAChC,iBAAA,CAAA;;;ACVD;;AAEG;;;;"}
1	+ {"version":3,"file":"sebgroup-green-angular-src-v-angular-checkbox.mjs","sources":["../../../../libs/angular/src/v-angular/checkbox/checkbox.component.ts","../../../../libs/angular/src/v-angular/checkbox/checkbox.component.html","../../../../libs/angular/src/v-angular/checkbox/checkbox.module.ts","../../../../libs/angular/src/v-angular/checkbox/sebgroup-green-angular-src-v-angular-checkbox.ts"],"sourcesContent":["import {\n ChangeDetectorRef,\n Component,\n EventEmitter,\n HostBinding,\n Inject,\n Input,\n Optional,\n Output,\n Self,\n OnChanges,\n SimpleChanges,\n} from '@angular/core'\nimport { NgControl } from '@angular/forms'\nimport { TRANSLOCO_SCOPE, TranslocoScope } from '@ngneat/transloco'\nimport { NgvBaseControlValueAccessorComponent } from '@sebgroup/green-angular/src/v-angular/base-control-value-accessor'\n\n/*\n Checkboxes allow a user to toggle an option on or off, or make multiple choices in a set of available options.\n * https://designlibrary.sebgroup.com/components/component-checkbox\n /\n@Component({\n selector: 'nggv-checkbox',\n templateUrl: './checkbox.component.html',\n styleUrls: ['./checkbox.component.scss'],\n})\nexport class NgvCheckboxComponent extends NgvBaseControlValueAccessorComponent {\n /* Special property used for selecting DOM elements during automated UI testing. /\n @HostBinding('attr.data-thook') @Input() thook = 'checkbox'\n @Input() optionalLabel = 'Optional'\n\n @Output() readonly valueChange: EventEmitter<string> =\n new EventEmitter<string>()\n\n constructor(\n @Self()\n @Optional()\n public ngControl: NgControl,\n @Optional()\n @Inject(TRANSLOCO_SCOPE)\n protected translocoScope: TranslocoScope,\n protected cdr: ChangeDetectorRef,\n ) {\n super(ngControl, translocoScope, cdr)\n }\n\n /* @internal /\n onInputChange(event: Event) {\n event.stopPropagation()\n if (this.disabled) return\n this.state = !this.state\n this.onTouched()\n this.onChange(this.state)\n }\n\n /* Writes a new value of true or false based on if argument matches this components value property. /\n writeValue(value: any): void {\n // Phantom null value on first load https://github.com/angular/angular/pull/38140\n super.writeValue(value === this.value)\n }\n\n /* Registers a callback function that is called when the child input element's value changes. /\n registerOnChange(fn: (checked: any) => any) {\n // Override default to update registry\n this.onChange = (checked) => {\n const output = checked ? this.value : null\n fn(output)\n this.valueChange.emit(output)\n }\n }\n}\n","<!-- LOCKED INPUT -->\n<div ngIf=\"locked && state\" class=\"sdv-field-checkbox-wrap\">\n <div\n [id]=\"id + '-checkbox'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n >\n <ng-container ngIf=\"!labelContentTpl\">\n {{ label }}\n </ng-container>\n <ng-template\n ngTemplateOutlet=\"labelContentTpl ?? null; context: { $implicit: value }\"\n ></ng-template>\n </div>\n</div>\n\n<!-- INPUT WRAPPER -->\n<ng-container ngIf=\"!locked\">\n <div class=\"sdv-field-checkbox-wrap\">\n <!-- CHECKBOX FIELD -->\n <label\n [id]=\"id + '-label'\"\n [attr.for]=\"id + '-checkbox'\"\n class=\"form-control\"\n transloco=\"let t; read: scope\"\n >\n <input\n #input\n type=\"checkbox\"\n [id]=\"id + '-checkbox'\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [attr.required]=\"required\"\n [disabled]=\"disabled\"\n [autofocus]=\"autofocus\"\n [attr.aria-label]=\"description\"\n [checked]=\"state\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"onInputChange($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n <!-- LABEL -->\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 <span\n ngIf=\"\n optional === true \|\| (required !== true && optional !== false)\n \"\n class=\"sdv-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n <span>{{ label }}</span>\n </ng-container>\n </ng-template>\n <i></i>\n </label>\n </div>\n\n <!-- ERRORS -->\n <ng-container transloco=\"let t; read: scope\">\n <label\n class=\"sdv-field-notice sdv-field-notice--error\"\n [attr.for]=\"id + '-checkbox'\"\n ngIf=\"invalid && (error \|\| ngControl?.invalid)\"\n >\n <span ngIf=\"error; else errorsRef\">{{ error }}</span>\n <ng-template #errorsRef>\n <span ngIf=\"firstError as error\">\n {{ t('error.field' + error?.code, error?.params) }}\n </span>\n </ng-template>\n </label>\n </ng-container>\n\n <!-- CHILDREN -->\n <ng-content></ng-content>\n</ng-container>\n","import { NgModule } from '@angular/core'\nimport { CommonModule } from '@angular/common'\n\nimport { NgvCheckboxComponent } from './checkbox.component'\nimport { NgvI18nModule } from '@sebgroup/green-angular/src/v-angular/i18n'\n\n@NgModule({\n declarations: [NgvCheckboxComponent],\n imports: [CommonModule, NgvI18nModule],\n exports: [NgvCheckboxComponent],\n})\nexport class NgvCheckboxModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;;;;;;AAiBA;;;AAGG;AAMG,MAAO,oBAAqB,SAAQ,oCAAoC,CAAA;AAQ5E,IAAA,WAAA,CAGS,SAAoB,EAGjB,cAA8B,EAC9B,GAAsB,EAAA;AAEhC,QAAA,KAAK,CAAC,SAAS,EAAE,cAAc,EAAE,GAAG,CAAC,CAAA;QAN9B,IAAS,CAAA,SAAA,GAAT,SAAS,CAAW;QAGjB,IAAc,CAAA,cAAA,GAAd,cAAc,CAAgB;QAC9B,IAAG,CAAA,GAAA,GAAH,GAAG,CAAmB;;QAbO,IAAK,CAAA,KAAA,GAAG,UAAU,CAAA;QAClD,IAAa,CAAA,aAAA,GAAG,UAAU,CAAA;AAEhB,QAAA,IAAA,CAAA,WAAW,GAC5B,IAAI,YAAY,EAAU,CAAA;KAY3B;;AAGD,IAAA,aAAa,CAAC,KAAY,EAAA;QACxB,KAAK,CAAC,eAAe,EAAE,CAAA;QACvB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAM;AACzB,QAAA,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,KAAK,CAAA;QACxB,IAAI,CAAC,SAAS,EAAE,CAAA;AAChB,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;KAC1B;;AAGD,IAAA,UAAU,CAAC,KAAU,EAAA;;QAEnB,KAAK,CAAC,UAAU,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAA;KACvC;;AAGD,IAAA,gBAAgB,CAAC,EAAyB,EAAA;;AAExC,QAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,OAAO,KAAI;AAC1B,YAAA,MAAM,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;YAC1C,EAAE,CAAC,MAAM,CAAC,CAAA;AACV,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;AAC/B,SAAC,CAAA;KACF;AA3CU,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,oBAAoB,uEAarB,eAAe,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAbd,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,oBAAoB,4OC1BjC,i8EAoFA,EAAA,MAAA,EAAA,CAAA,utLAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,eAAA,EAAA,qBAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;4FD1Da,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBALhC,SAAS;+BACE,eAAe,EAAA,QAAA,EAAA,i8EAAA,EAAA,MAAA,EAAA,CAAA,utLAAA,CAAA,EAAA,CAAA;;0BAatB,IAAI;;0BACJ,QAAQ;;0BAER,QAAQ;;0BACR,MAAM;2BAAC,eAAe,CAAA;4EAXgB,KAAK,EAAA,CAAA;sBAA7C,WAAW;uBAAC,iBAAiB,CAAA;;sBAAG,KAAK;gBAC7B,aAAa,EAAA,CAAA;sBAArB,KAAK;gBAEa,WAAW,EAAA,CAAA;sBAA7B,MAAM;;;MEpBI,iBAAiB,CAAA;+GAAjB,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA,EAAA;AAAjB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,iBAAiB,iBAJb,oBAAoB,CAAA,EAAA,OAAA,EAAA,CACzB,YAAY,EAAE,aAAa,aAC3B,oBAAoB,CAAA,EAAA,CAAA,CAAA,EAAA;gHAEnB,iBAAiB,EAAA,OAAA,EAAA,CAHlB,YAAY,EAAE,aAAa,CAAA,EAAA,CAAA,CAAA,EAAA;;4FAG1B,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAL7B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,YAAY,EAAE,CAAC,oBAAoB,CAAC;AACpC,oBAAA,OAAO,EAAE,CAAC,YAAY,EAAE,aAAa,CAAC;oBACtC,OAAO,EAAE,CAAC,oBAAoB,CAAC;AAChC,iBAAA,CAAA;;;ACVD;;AAEG;;;;"}

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

@@ -1,6 +1,7 @@
 import * as i0 from '@angular/core';
 import { Injectable } from '@angular/core';
+;
 (() => {
     // Make sure there is an incremental ID each component can use
     if (typeof window !== 'undefined' && !window.ngv) {
@@ -11,7 +12,9 @@ import { Injectable } from '@angular/core';
                 if (typeof this.ids[namespace] === 'number')
                     id++;
                 this.ids[namespace] = id;
-                return namespace === 'default' ? `ngv-${id}` : `ngv-${namespace}-${id}`;
+                return namespace === 'default'
+                    ? `nggv-${id}`
+                    : `nggv-${namespace}-${id}`;
             },
         };
     }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"sebgroup-green-angular-src-v-angular-core.mjs","sources":["../../../../libs/angular/src/v-angular/core/core.globals.ts","../../../../libs/angular/src/v-angular/core/core.utils.ts","../../../../libs/angular/src/v-angular/core/sebgroup-green-angular-src-v-angular-core.ts"],"sourcesContent":["// We must force tsc to interpret this file as a module, resolves\n// \"Augmentations for the global scope can only be directly nested in external modules or ambient module declarations.\"\nexport {};\n\ndeclare global {\n interface Window {\n /** Counter for unique identifiers /\n ngv: {\n ids: { [namespace: string]: number; default: number };\n nextId: (namespace?: string) => string;\n };\n }\n}\n\n(() => {\n // Make sure there is an incremental ID each component can use\n if (typeof window !== 'undefined' && !window.ngv) {\n window.ngv = {\n ids: { default: -1 },\n nextId(namespace = 'default'): string {\n let id = this.ids[namespace] \|\| 0;\n if (typeof this.ids[namespace] === 'number') id~~++;\~~n this.ids[namespace] = id;\n return namespace === 'default' ? `~~ngv~~-${id}` : `~~ngv~~-${namespace}-${id}~~`;\~~n },\n };\n }\n})();\n","import { Injectable } from '@angular/core';\n\nexport interface Option<K, V> {\n key: K;\n label: V;\n disabled?: boolean;\n}\n\nexport interface OptionGroup<T extends Option<any, any>> {\n label: string;\n options: T[];\n disabled?: boolean;\n}\n\nexport type OptionBase<T extends Option<any, any>> = T \| OptionGroup<T>;\n\n@Injectable()\nexport class DropdownUtils<K = string \| null, V = string, T extends Option<K, V> = Option<K, V>> {\n public flattenOptions(options: OptionBase<T>[] \| undefined, mustHaveLabel: boolean): T[] {\n if (!options) return [] as T[];\n return options.reduce((acc, current) => {\n if (this.isGroup(current)) return acc.concat(this.flattenOptions(current.options, mustHaveLabel));\n if (!current.disabled && !(mustHaveLabel && !current.label)) acc.push(current); // skip disabled\n return acc;\n }, [] as T[]);\n }\n\n /\n Returns true if argument is an {@link OptionGroup}.\n * @param option the object to check.\n /\n public isGroup(\n option: OptionBase<T>,\n ): option is OptionGroup<T> {\n return 'options' in option;\n }\n}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;AAcA,CAAC,MAAK;;~~IAEJ~~,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE;QAChD,MAAM,CAAC,GAAG,GAAG;AACX,YAAA,GAAG,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE;YACpB,MAAM,CAAC,SAAS,GAAG,SAAS,EAAA;gBAC1B,IAAI,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC,~~CAAC~~;~~gBAClC~~,IAAI,OAAO,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,KAAK,QAAQ;AAAE,oBAAA,EAAE,EAAE,~~CAAC~~;~~AAClD~~,gBAAA,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,EAAE,~~CAAC~~;~~AACzB~~,~~gBAAA,~~OAAO,SAAS,KAAK,SAAS,~~GAAG~~,~~CAAO~~,~~IAAA,~~EAAA,EAAE,CAAE,CAAA,~~GAAG~~,~~CAAA~~,~~IAAA~~,~~EAAO~~,SAAS,CAAI,CAAA,EAAA,EAAE,EAAE,~~CAAC~~;~~aACzE~~;SACF,~~CAAC~~;~~AACH~~,KAAA;AACH,CAAC,GAAG;;~~MCVS~~,aAAa,CAAA;IACjB,cAAc,CAAC,OAAoC,EAAE,aAAsB,EAAA;AAChF,QAAA,IAAI,CAAC,OAAO;AAAE,YAAA,OAAO,EAAS,CAAC;QAC/B,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,OAAO,KAAI;AACrC,YAAA,IAAI,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC;AAAE,gBAAA,OAAO,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC;AAClG,YAAA,IAAI,CAAC,OAAO,CAAC,QAAQ,IAAI,EAAE,aAAa,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;AAAE,gBAAA,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;AAC/E,YAAA,OAAO,GAAG,CAAC;SACZ,EAAE,EAAS,CAAC,CAAC;KACf;AAED;;;AAGG;AACI,IAAA,OAAO,CACZ,MAAqB,EAAA;QAErB,OAAO,SAAS,IAAI,MAAM,CAAC;KAC5B;+GAlBU,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA,EAAA;mHAAb,aAAa,EAAA,CAAA,CAAA,EAAA;;4FAAb,aAAa,EAAA,UAAA,EAAA,CAAA;kBADzB,UAAU;;;AChBX;;AAEG;;;;"}
1	+ {"version":3,"file":"sebgroup-green-angular-src-v-angular-core.mjs","sources":["../../../../libs/angular/src/v-angular/core/core.globals.ts","../../../../libs/angular/src/v-angular/core/core.utils.ts","../../../../libs/angular/src/v-angular/core/sebgroup-green-angular-src-v-angular-core.ts"],"sourcesContent":["// We must force tsc to interpret this file as a module, resolves\n// \"Augmentations for the global scope can only be directly nested in external modules or ambient module declarations.\"\nexport {}\n\ndeclare global {\n interface Window {\n /** Counter for unique identifiers /\n ngv: {\n ids: { [namespace: string]: number; default: number }\n nextId: (namespace?: string) => string\n }\n }\n}\n\n;(() => {\n // Make sure there is an incremental ID each component can use\n if (typeof window !== 'undefined' && !window.ngv) {\n window.ngv = {\n ids: { default: -1 },\n nextId(namespace = 'default'): string {\n let id = this.ids[namespace] \|\| 0\n if (typeof this.ids[namespace] === 'number') id++\n this.ids[namespace] = id\n return namespace === 'default'\n ? `nggv-${id}`\n : `nggv-${namespace}-${id}`\n },\n }\n }\n})()\n","import { Injectable } from '@angular/core';\n\nexport interface Option<K, V> {\n key: K;\n label: V;\n disabled?: boolean;\n}\n\nexport interface OptionGroup<T extends Option<any, any>> {\n label: string;\n options: T[];\n disabled?: boolean;\n}\n\nexport type OptionBase<T extends Option<any, any>> = T \| OptionGroup<T>;\n\n@Injectable()\nexport class DropdownUtils<K = string \| null, V = string, T extends Option<K, V> = Option<K, V>> {\n public flattenOptions(options: OptionBase<T>[] \| undefined, mustHaveLabel: boolean): T[] {\n if (!options) return [] as T[];\n return options.reduce((acc, current) => {\n if (this.isGroup(current)) return acc.concat(this.flattenOptions(current.options, mustHaveLabel));\n if (!current.disabled && !(mustHaveLabel && !current.label)) acc.push(current); // skip disabled\n return acc;\n }, [] as T[]);\n }\n\n /\n Returns true if argument is an {@link OptionGroup}.\n * @param option the object to check.\n /\n public isGroup(\n option: OptionBase<T>,\n ): option is OptionGroup<T> {\n return 'options' in option;\n }\n}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;AAcA,CAAC;AAAA,CAAC,MAAK;;IAEL,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE;QAChD,MAAM,CAAC,GAAG,GAAG;AACX,YAAA,GAAG,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE;YACpB,MAAM,CAAC,SAAS,GAAG,SAAS,EAAA;gBAC1B,IAAI,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;gBACjC,IAAI,OAAO,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,KAAK,QAAQ;AAAE,oBAAA,EAAE,EAAE,CAAA;AACjD,gBAAA,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,EAAE,CAAA;gBACxB,OAAO,SAAS,KAAK,SAAS;sBAC1B,CAAQ,KAAA,EAAA,EAAE,CAAE,CAAA;AACd,sBAAE,CAAQ,KAAA,EAAA,SAAS,CAAI,CAAA,EAAA,EAAE,EAAE,CAAA;aAC9B;SACF,CAAA;AACF,KAAA;AACH,CAAC,GAAG;;MCZS,aAAa,CAAA;IACjB,cAAc,CAAC,OAAoC,EAAE,aAAsB,EAAA;AAChF,QAAA,IAAI,CAAC,OAAO;AAAE,YAAA,OAAO,EAAS,CAAC;QAC/B,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,OAAO,KAAI;AACrC,YAAA,IAAI,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC;AAAE,gBAAA,OAAO,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC;AAClG,YAAA,IAAI,CAAC,OAAO,CAAC,QAAQ,IAAI,EAAE,aAAa,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;AAAE,gBAAA,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;AAC/E,YAAA,OAAO,GAAG,CAAC;SACZ,EAAE,EAAS,CAAC,CAAC;KACf;AAED;;;AAGG;AACI,IAAA,OAAO,CACZ,MAAqB,EAAA;QAErB,OAAO,SAAS,IAAI,MAAM,CAAC;KAC5B;+GAlBU,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA,EAAA;mHAAb,aAAa,EAAA,CAAA,CAAA,EAAA;;4FAAb,aAAa,EAAA,UAAA,EAAA,CAAA;kBADzB,UAAU;;;AChBX;;AAEG;;;;"}

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

@@ -86,11 +86,11 @@ class NgvTypeaheadHighlightComponent {
         return { start, end };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvTypeaheadHighlightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NgvTypeaheadHighlightComponent, selector: "ngv-typeahead-highlight", inputs: { textContent: "textContent", textToHighlight: "textToHighlight" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!this.match\">{{ textContent }}</ng-container>\n<!-- Note that this is sensitive to line breaks producing extra spacing between the different parts -->\n<ng-container *ngIf=\"!!this.match\">\n    {{ prefix || '' }}<span class=\"match\">{{ match }}</span>{{ suffix ||''}}\n</ng-container>", styles: [":host .match{font-weight:500}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NgvTypeaheadHighlightComponent, selector: "nggv-typeahead-highlight", inputs: { textContent: "textContent", textToHighlight: "textToHighlight" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!this.match\">{{ textContent }}</ng-container>\n<!-- Note that this is sensitive to line breaks producing extra spacing between the different parts -->\n<ng-container *ngIf=\"!!this.match\">\n    {{ prefix || '' }}<span class=\"match\">{{ match }}</span>{{ suffix ||''}}\n</ng-container>", styles: [":host .match{font-weight:500}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvTypeaheadHighlightComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngv-typeahead-highlight', template: "<ng-container *ngIf=\"!this.match\">{{ textContent }}</ng-container>\n<!-- Note that this is sensitive to line breaks producing extra spacing between the different parts -->\n<ng-container *ngIf=\"!!this.match\">\n    {{ prefix || '' }}<span class=\"match\">{{ match }}</span>{{ suffix ||''}}\n</ng-container>", styles: [":host .match{font-weight:500}\n"] }]
+            args: [{ selector: 'nggv-typeahead-highlight', template: "<ng-container *ngIf=\"!this.match\">{{ textContent }}</ng-container>\n<!-- Note that this is sensitive to line breaks producing extra spacing between the different parts -->\n<ng-container *ngIf=\"!!this.match\">\n    {{ prefix || '' }}<span class=\"match\">{{ match }}</span>{{ suffix ||''}}\n</ng-container>", styles: [":host .match{font-weight:500}\n"] }]
         }], propDecorators: { textContent: [{
                 type: Input
             }], textToHighlight: [{
@@ -296,11 +296,11 @@ class NgvDropdownListComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvDropdownListComponent, deps: [{ token: TRANSLOCO_SCOPE, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NgvDropdownListComponent, selector: "ngv-dropdown-list", inputs: { expanded: "expanded", state: "state", scrollOffset: "scrollOffset", optionContentTpl: "optionContentTpl", id: "id", thook: "thook", options: "options", textToHighlight: "textToHighlight" }, outputs: { selectedValueChanged: "selectedValueChanged", closed: "closed" }, host: { listeners: { "document:keydown": "onKeyDown($event)", "document:keyup": "onKeyUp($event)" }, properties: { "attr.id": "this.id", "attr.data-thook": "this.thook" } }, viewQueries: [{ propertyName: "optionRefs", predicate: ["optionRefs"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *transloco=\"let t; read: scope\">\n  <ul\n    class=\"gds-dropdown__options card options gds-reset\"\n    [class.gds-dropdown__options-expanded]=\"expanded\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.data-thook]=\"thook + '-options'\"\n    [attr.aria-labelledby]=\"id + '-label'\"\n    [attr.aria-activedescendant]=\"\n      state ? id + '-option-' + state?.key : undefined\n    \"\n  >\n    <ng-container *ngFor=\"let item of options\">\n      <!-- OPTION -->\n      <ng-container *ngIf=\"!isGroup(item)\">\n        <ng-template\n          *ngTemplateOutlet=\"listItemTemplate; context: { $implicit: item }\"\n        ></ng-template>\n      </ng-container>\n\n      <!-- OPTION GROUP -->\n      <li\n        class=\"gds-dropdown__options__label group\"\n        [attr.data-thook]=\"thook + '-option-group'\"\n        *ngIf=\"isGroup(item)\"\n      >\n        <div class=\"sdv-list__label\">{{ t(item.label) }}</div>\n        <ul [attr.aria-disabled]=\"item.disabled\">\n          <ng-container *ngFor=\"let option of castGroup(item).options\">\n            <ng-template\n              *ngTemplateOutlet=\"\n                listItemTemplate;\n                context: { $implicit: option }\n              \"\n            ></ng-template>\n          </ng-container>\n        </ul>\n      </li>\n    </ng-container>\n  </ul>\n\n  <!-- TEMPLATE -->\n  <ng-template #listItemTemplate let-option>\n    <li\n      #optionRefs\n      *ngIf=\"!optionContentTpl\"\n      tabindex=\"-1\"\n      [id]=\"id + '-option-' + option.key\"\n      class=\"gds-dropdown__options__label option\"\n      role=\"option\"\n      #liElem\n      [attr.data-thook]=\"thook + '-option-' + option.key\"\n      [attr.aria-disabled]=\"option.disabled\"\n      [attr.aria-selected]=\"\n        option.key === selectedValue?.key && !!selectedValue?.key\n      \"\n      [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n      [ngvTooltip]=\"isOverflow(liElem) ? t(option.label) : undefined\"\n      (click)=\"updateState(option, $event)\"\n    >\n      <ng-template\n        *ngTemplateOutlet=\"\n          basicOptionContentTpl;\n          context: { $implicit: option }\n        \"\n      >\n      </ng-template>\n    </li>\n    <!-- Checking overflow on custom templates do not work skip adding ngvToolTip if custom template is provided -->\n    <li\n      #optionRefs\n      *ngIf=\"!!optionContentTpl\"\n      tabindex=\"-1\"\n      [id]=\"id + '-option-' + option.key\"\n      class=\"gds-dropdown__options__label option\"\n      role=\"option\"\n      #liElem\n      [attr.data-thook]=\"thook + '-option-' + option.key\"\n      [attr.aria-disabled]=\"option.disabled\"\n      [attr.aria-selected]=\"\n        option.key === selectedValue?.key && !!selectedValue?.key\n      \"\n      [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n      (click)=\"updateState(option, $event)\"\n    >\n      <ng-template\n        *ngTemplateOutlet=\"optionContentTpl; context: { $implicit: option }\"\n      >\n      </ng-template>\n    </li>\n  </ng-template>\n\n  <ng-template #basicOptionContentTpl let-option>\n    <ngv-typeahead-highlight\n      *ngIf=\"!!textToHighlight\"\n      [textToHighlight]=\"textToHighlight\"\n      [textContent]=\"t(option.label)\"\n    >\n    </ngv-typeahead-highlight>\n    <ng-container *ngIf=\"!textToHighlight\">\n      {{ t(option.label) }}\n    </ng-container>\n  </ng-template>\n</ng-container>\n", styles: [":host{position:absolute;bottom:0;transform:translateY(calc(100% + .5rem));--z-index: var(--sg-z-index-dropdown)}:host .hidden{visibility:hidden;display:none}:host ul[role=menu] [role=menuitem]{padding:.75rem;cursor:pointer}:host ul[role=menu] [role=menuitem]:hover,:host ul[role=menu] [role=menuitem]:focus-visible{background-color:var(--gds-ref-pallet-base200)}:host ul[role=menu] [role=menuitem]:active{background-color:var(--gds-ref-pallet-base300)}:host ul[role=menu] [role=menuitem]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox]{--z-index: var(--sg-z-index-popover);background-color:var(--sg-popover-background);flex-direction:column;justify-content:flex-end;inset:auto;z-index:var(--z-index);box-shadow:var(--sg-popover-box-shadow);color:var(--text-primary-color);padding:0;border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--text-primary-color);--sg-border-color: var(--text-primary-color);border-radius:var(--sg-border-radius)}:host ul[role=listbox] [role=option]{padding:.75rem 1rem;line-height:1.25;cursor:pointer}:host ul[role=listbox] [role=option]:hover,:host ul[role=listbox] [role=option]:focus-visible{background-color:var(--grey-400)}:host ul[role=listbox] [role=option]:active{background-color:var(--grey-400)}:host ul[role=listbox] [role=option]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox] [role=option].active.sg-highlighted,:host ul[role=listbox] [role=option][aria-selected=true]{background:var(--grey-1000);color:#fff}:host .sg-fieldset-container{overflow-y:auto}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option]{display:flex;width:100%}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option].active.sg-highlighted input[type=checkbox]~i{border-color:#007ac7!important;box-shadow:0 0 .25em .0625em #41b0ee;outline-color:transparent;outline-style:solid}:host .gds-dropdown__options{padding-left:0;margin-bottom:0;margin-top:0;display:flex;flex-direction:column;list-style:none;display:none}:host .gds-dropdown__options>li{padding-bottom:.5rem;padding-top:.5rem;border:0;display:block;position:relative}:host .gds-dropdown__options>li:before{font-weight:500;display:inline-block;left:0;position:absolute;text-align:center}:host .gds-dropdown__options-expanded{display:block}:host .gds-dropdown__options__label:hover,:host .gds-dropdown__options__label:focus-visible{background-color:var(--grey-400)}:host .gds-dropdown__options__label:active{background-color:var(--grey-500)}:host .gds-dropdown__options__label:focus-visible{outline-color:#000;outline-offset:-.25rem}:host .gds-dropdown__options__label[aria-hidden=true]{display:none}:host .gds-dropdown__options__label[highlighted]{color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgvTypeaheadHighlightComponent, selector: "ngv-typeahead-highlight", inputs: ["textContent", "textToHighlight"] }, { kind: "directive", type: i3.NgvTooltipDirective, selector: "[ngvTooltip]", inputs: ["ngvTooltip", "thook", "placement", "shown", "offset", "resizeThrottle", "maxWidth"], outputs: ["ngvShow", "ngvHide"] }, { kind: "directive", type: i4.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NgvDropdownListComponent, selector: "nggv-dropdown-list", inputs: { expanded: "expanded", state: "state", scrollOffset: "scrollOffset", optionContentTpl: "optionContentTpl", id: "id", thook: "thook", options: "options", textToHighlight: "textToHighlight" }, outputs: { selectedValueChanged: "selectedValueChanged", closed: "closed" }, host: { listeners: { "document:keydown": "onKeyDown($event)", "document:keyup": "onKeyUp($event)" }, properties: { "attr.id": "this.id", "attr.data-thook": "this.thook" } }, viewQueries: [{ propertyName: "optionRefs", predicate: ["optionRefs"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *transloco=\"let t; read: scope\">\n  <ul\n    class=\"gds-dropdown__options card options gds-reset\"\n    [class.gds-dropdown__options-expanded]=\"expanded\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.data-thook]=\"thook + '-options'\"\n    [attr.aria-labelledby]=\"id + '-label'\"\n    [attr.aria-activedescendant]=\"\n      state ? id + '-option-' + state?.key : undefined\n    \"\n  >\n    <ng-container *ngFor=\"let item of options\">\n      <!-- OPTION -->\n      <ng-container *ngIf=\"!isGroup(item)\">\n        <ng-template\n          *ngTemplateOutlet=\"listItemTemplate; context: { $implicit: item }\"\n        ></ng-template>\n      </ng-container>\n\n      <!-- OPTION GROUP -->\n      <li\n        class=\"gds-dropdown__options__label group\"\n        [attr.data-thook]=\"thook + '-option-group'\"\n        *ngIf=\"isGroup(item)\"\n      >\n        <div class=\"sdv-list__label\">{{ t(item.label) }}</div>\n        <ul [attr.aria-disabled]=\"item.disabled\">\n          <ng-container *ngFor=\"let option of castGroup(item).options\">\n            <ng-template\n              *ngTemplateOutlet=\"\n                listItemTemplate;\n                context: { $implicit: option }\n              \"\n            ></ng-template>\n          </ng-container>\n        </ul>\n      </li>\n    </ng-container>\n  </ul>\n\n  <!-- TEMPLATE -->\n  <ng-template #listItemTemplate let-option>\n    <li\n      #optionRefs\n      *ngIf=\"!optionContentTpl\"\n      tabindex=\"-1\"\n      [id]=\"id + '-option-' + option.key\"\n      class=\"gds-dropdown__options__label option\"\n      role=\"option\"\n      #liElem\n      [attr.data-thook]=\"thook + '-option-' + option.key\"\n      [attr.aria-disabled]=\"option.disabled\"\n      [attr.aria-selected]=\"\n        option.key === selectedValue?.key && !!selectedValue?.key\n      \"\n      [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n      [ngvTooltip]=\"isOverflow(liElem) ? t(option.label) : undefined\"\n      (click)=\"updateState(option, $event)\"\n    >\n      <ng-template\n        *ngTemplateOutlet=\"\n          basicOptionContentTpl;\n          context: { $implicit: option }\n        \"\n      >\n      </ng-template>\n    </li>\n    <!-- Checking overflow on custom templates do not work skip adding ngvToolTip if custom template is provided -->\n    <li\n      #optionRefs\n      *ngIf=\"!!optionContentTpl\"\n      tabindex=\"-1\"\n      [id]=\"id + '-option-' + option.key\"\n      class=\"gds-dropdown__options__label option\"\n      role=\"option\"\n      #liElem\n      [attr.data-thook]=\"thook + '-option-' + option.key\"\n      [attr.aria-disabled]=\"option.disabled\"\n      [attr.aria-selected]=\"\n        option.key === selectedValue?.key && !!selectedValue?.key\n      \"\n      [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n      (click)=\"updateState(option, $event)\"\n    >\n      <ng-template\n        *ngTemplateOutlet=\"optionContentTpl; context: { $implicit: option }\"\n      >\n      </ng-template>\n    </li>\n  </ng-template>\n\n  <ng-template #basicOptionContentTpl let-option>\n    <nggv-typeahead-highlight\n      *ngIf=\"!!textToHighlight\"\n      [textToHighlight]=\"textToHighlight\"\n      [textContent]=\"t(option.label)\"\n    >\n    </nggv-typeahead-highlight>\n    <ng-container *ngIf=\"!textToHighlight\">\n      {{ t(option.label) }}\n    </ng-container>\n  </ng-template>\n</ng-container>\n", styles: [":host{position:absolute;bottom:0;transform:translateY(calc(100% + .5rem));--z-index: var(--sg-z-index-dropdown)}:host .hidden{visibility:hidden;display:none}:host ul[role=menu] [role=menuitem]{padding:.75rem;cursor:pointer}:host ul[role=menu] [role=menuitem]:hover,:host ul[role=menu] [role=menuitem]:focus-visible{background-color:var(--gds-ref-pallet-base200)}:host ul[role=menu] [role=menuitem]:active{background-color:var(--gds-ref-pallet-base300)}:host ul[role=menu] [role=menuitem]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox]{--z-index: var(--sg-z-index-popover);background-color:var(--sg-popover-background);flex-direction:column;justify-content:flex-end;inset:auto;z-index:var(--z-index);box-shadow:var(--sg-popover-box-shadow);color:var(--text-primary-color);padding:0;border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--text-primary-color);--sg-border-color: var(--text-primary-color);border-radius:var(--sg-border-radius)}:host ul[role=listbox] [role=option]{padding:.75rem 1rem;line-height:1.25;cursor:pointer}:host ul[role=listbox] [role=option]:hover,:host ul[role=listbox] [role=option]:focus-visible{background-color:var(--grey-400)}:host ul[role=listbox] [role=option]:active{background-color:var(--grey-400)}:host ul[role=listbox] [role=option]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox] [role=option].active.sg-highlighted,:host ul[role=listbox] [role=option][aria-selected=true]{background:var(--grey-1000);color:#fff}:host .sg-fieldset-container{overflow-y:auto}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option]{display:flex;width:100%}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option].active.sg-highlighted input[type=checkbox]~i{border-color:#007ac7!important;box-shadow:0 0 .25em .0625em #41b0ee;outline-color:transparent;outline-style:solid}:host .gds-dropdown__options{padding-left:0;margin-bottom:0;margin-top:0;display:flex;flex-direction:column;list-style:none;display:none}:host .gds-dropdown__options>li{padding-bottom:.5rem;padding-top:.5rem;border:0;display:block;position:relative}:host .gds-dropdown__options>li:before{font-weight:500;display:inline-block;left:0;position:absolute;text-align:center}:host .gds-dropdown__options-expanded{display:block}:host .gds-dropdown__options__label:hover,:host .gds-dropdown__options__label:focus-visible{background-color:var(--grey-400)}:host .gds-dropdown__options__label:active{background-color:var(--grey-500)}:host .gds-dropdown__options__label:focus-visible{outline-color:#000;outline-offset:-.25rem}:host .gds-dropdown__options__label[aria-hidden=true]{display:none}:host .gds-dropdown__options__label[highlighted]{color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgvTypeaheadHighlightComponent, selector: "nggv-typeahead-highlight", inputs: ["textContent", "textToHighlight"] }, { kind: "directive", type: i3.NgvTooltipDirective, selector: "[ngvTooltip]", inputs: ["ngvTooltip", "thook", "placement", "shown", "offset", "resizeThrottle", "maxWidth"], outputs: ["ngvShow", "ngvHide"] }, { kind: "directive", type: i4.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvDropdownListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngv-dropdown-list', template: "<ng-container *transloco=\"let t; read: scope\">\n  <ul\n    class=\"gds-dropdown__options card options gds-reset\"\n    [class.gds-dropdown__options-expanded]=\"expanded\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.data-thook]=\"thook + '-options'\"\n    [attr.aria-labelledby]=\"id + '-label'\"\n    [attr.aria-activedescendant]=\"\n      state ? id + '-option-' + state?.key : undefined\n    \"\n  >\n    <ng-container *ngFor=\"let item of options\">\n      <!-- OPTION -->\n      <ng-container *ngIf=\"!isGroup(item)\">\n        <ng-template\n          *ngTemplateOutlet=\"listItemTemplate; context: { $implicit: item }\"\n        ></ng-template>\n      </ng-container>\n\n      <!-- OPTION GROUP -->\n      <li\n        class=\"gds-dropdown__options__label group\"\n        [attr.data-thook]=\"thook + '-option-group'\"\n        *ngIf=\"isGroup(item)\"\n      >\n        <div class=\"sdv-list__label\">{{ t(item.label) }}</div>\n        <ul [attr.aria-disabled]=\"item.disabled\">\n          <ng-container *ngFor=\"let option of castGroup(item).options\">\n            <ng-template\n              *ngTemplateOutlet=\"\n                listItemTemplate;\n                context: { $implicit: option }\n              \"\n            ></ng-template>\n          </ng-container>\n        </ul>\n      </li>\n    </ng-container>\n  </ul>\n\n  <!-- TEMPLATE -->\n  <ng-template #listItemTemplate let-option>\n    <li\n      #optionRefs\n      *ngIf=\"!optionContentTpl\"\n      tabindex=\"-1\"\n      [id]=\"id + '-option-' + option.key\"\n      class=\"gds-dropdown__options__label option\"\n      role=\"option\"\n      #liElem\n      [attr.data-thook]=\"thook + '-option-' + option.key\"\n      [attr.aria-disabled]=\"option.disabled\"\n      [attr.aria-selected]=\"\n        option.key === selectedValue?.key && !!selectedValue?.key\n      \"\n      [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n      [ngvTooltip]=\"isOverflow(liElem) ? t(option.label) : undefined\"\n      (click)=\"updateState(option, $event)\"\n    >\n      <ng-template\n        *ngTemplateOutlet=\"\n          basicOptionContentTpl;\n          context: { $implicit: option }\n        \"\n      >\n      </ng-template>\n    </li>\n    <!-- Checking overflow on custom templates do not work skip adding ngvToolTip if custom template is provided -->\n    <li\n      #optionRefs\n      *ngIf=\"!!optionContentTpl\"\n      tabindex=\"-1\"\n      [id]=\"id + '-option-' + option.key\"\n      class=\"gds-dropdown__options__label option\"\n      role=\"option\"\n      #liElem\n      [attr.data-thook]=\"thook + '-option-' + option.key\"\n      [attr.aria-disabled]=\"option.disabled\"\n      [attr.aria-selected]=\"\n        option.key === selectedValue?.key && !!selectedValue?.key\n      \"\n      [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n      (click)=\"updateState(option, $event)\"\n    >\n      <ng-template\n        *ngTemplateOutlet=\"optionContentTpl; context: { $implicit: option }\"\n      >\n      </ng-template>\n    </li>\n  </ng-template>\n\n  <ng-template #basicOptionContentTpl let-option>\n    <ngv-typeahead-highlight\n      *ngIf=\"!!textToHighlight\"\n      [textToHighlight]=\"textToHighlight\"\n      [textContent]=\"t(option.label)\"\n    >\n    </ngv-typeahead-highlight>\n    <ng-container *ngIf=\"!textToHighlight\">\n      {{ t(option.label) }}\n    </ng-container>\n  </ng-template>\n</ng-container>\n", styles: [":host{position:absolute;bottom:0;transform:translateY(calc(100% + .5rem));--z-index: var(--sg-z-index-dropdown)}:host .hidden{visibility:hidden;display:none}:host ul[role=menu] [role=menuitem]{padding:.75rem;cursor:pointer}:host ul[role=menu] [role=menuitem]:hover,:host ul[role=menu] [role=menuitem]:focus-visible{background-color:var(--gds-ref-pallet-base200)}:host ul[role=menu] [role=menuitem]:active{background-color:var(--gds-ref-pallet-base300)}:host ul[role=menu] [role=menuitem]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox]{--z-index: var(--sg-z-index-popover);background-color:var(--sg-popover-background);flex-direction:column;justify-content:flex-end;inset:auto;z-index:var(--z-index);box-shadow:var(--sg-popover-box-shadow);color:var(--text-primary-color);padding:0;border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--text-primary-color);--sg-border-color: var(--text-primary-color);border-radius:var(--sg-border-radius)}:host ul[role=listbox] [role=option]{padding:.75rem 1rem;line-height:1.25;cursor:pointer}:host ul[role=listbox] [role=option]:hover,:host ul[role=listbox] [role=option]:focus-visible{background-color:var(--grey-400)}:host ul[role=listbox] [role=option]:active{background-color:var(--grey-400)}:host ul[role=listbox] [role=option]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox] [role=option].active.sg-highlighted,:host ul[role=listbox] [role=option][aria-selected=true]{background:var(--grey-1000);color:#fff}:host .sg-fieldset-container{overflow-y:auto}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option]{display:flex;width:100%}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option].active.sg-highlighted input[type=checkbox]~i{border-color:#007ac7!important;box-shadow:0 0 .25em .0625em #41b0ee;outline-color:transparent;outline-style:solid}:host .gds-dropdown__options{padding-left:0;margin-bottom:0;margin-top:0;display:flex;flex-direction:column;list-style:none;display:none}:host .gds-dropdown__options>li{padding-bottom:.5rem;padding-top:.5rem;border:0;display:block;position:relative}:host .gds-dropdown__options>li:before{font-weight:500;display:inline-block;left:0;position:absolute;text-align:center}:host .gds-dropdown__options-expanded{display:block}:host .gds-dropdown__options__label:hover,:host .gds-dropdown__options__label:focus-visible{background-color:var(--grey-400)}:host .gds-dropdown__options__label:active{background-color:var(--grey-500)}:host .gds-dropdown__options__label:focus-visible{outline-color:#000;outline-offset:-.25rem}:host .gds-dropdown__options__label[aria-hidden=true]{display:none}:host .gds-dropdown__options__label[highlighted]{color:#fff}\n"] }]
+            args: [{ selector: 'nggv-dropdown-list', template: "<ng-container *transloco=\"let t; read: scope\">\n  <ul\n    class=\"gds-dropdown__options card options gds-reset\"\n    [class.gds-dropdown__options-expanded]=\"expanded\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.data-thook]=\"thook + '-options'\"\n    [attr.aria-labelledby]=\"id + '-label'\"\n    [attr.aria-activedescendant]=\"\n      state ? id + '-option-' + state?.key : undefined\n    \"\n  >\n    <ng-container *ngFor=\"let item of options\">\n      <!-- OPTION -->\n      <ng-container *ngIf=\"!isGroup(item)\">\n        <ng-template\n          *ngTemplateOutlet=\"listItemTemplate; context: { $implicit: item }\"\n        ></ng-template>\n      </ng-container>\n\n      <!-- OPTION GROUP -->\n      <li\n        class=\"gds-dropdown__options__label group\"\n        [attr.data-thook]=\"thook + '-option-group'\"\n        *ngIf=\"isGroup(item)\"\n      >\n        <div class=\"sdv-list__label\">{{ t(item.label) }}</div>\n        <ul [attr.aria-disabled]=\"item.disabled\">\n          <ng-container *ngFor=\"let option of castGroup(item).options\">\n            <ng-template\n              *ngTemplateOutlet=\"\n                listItemTemplate;\n                context: { $implicit: option }\n              \"\n            ></ng-template>\n          </ng-container>\n        </ul>\n      </li>\n    </ng-container>\n  </ul>\n\n  <!-- TEMPLATE -->\n  <ng-template #listItemTemplate let-option>\n    <li\n      #optionRefs\n      *ngIf=\"!optionContentTpl\"\n      tabindex=\"-1\"\n      [id]=\"id + '-option-' + option.key\"\n      class=\"gds-dropdown__options__label option\"\n      role=\"option\"\n      #liElem\n      [attr.data-thook]=\"thook + '-option-' + option.key\"\n      [attr.aria-disabled]=\"option.disabled\"\n      [attr.aria-selected]=\"\n        option.key === selectedValue?.key && !!selectedValue?.key\n      \"\n      [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n      [ngvTooltip]=\"isOverflow(liElem) ? t(option.label) : undefined\"\n      (click)=\"updateState(option, $event)\"\n    >\n      <ng-template\n        *ngTemplateOutlet=\"\n          basicOptionContentTpl;\n          context: { $implicit: option }\n        \"\n      >\n      </ng-template>\n    </li>\n    <!-- Checking overflow on custom templates do not work skip adding ngvToolTip if custom template is provided -->\n    <li\n      #optionRefs\n      *ngIf=\"!!optionContentTpl\"\n      tabindex=\"-1\"\n      [id]=\"id + '-option-' + option.key\"\n      class=\"gds-dropdown__options__label option\"\n      role=\"option\"\n      #liElem\n      [attr.data-thook]=\"thook + '-option-' + option.key\"\n      [attr.aria-disabled]=\"option.disabled\"\n      [attr.aria-selected]=\"\n        option.key === selectedValue?.key && !!selectedValue?.key\n      \"\n      [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n      (click)=\"updateState(option, $event)\"\n    >\n      <ng-template\n        *ngTemplateOutlet=\"optionContentTpl; context: { $implicit: option }\"\n      >\n      </ng-template>\n    </li>\n  </ng-template>\n\n  <ng-template #basicOptionContentTpl let-option>\n    <nggv-typeahead-highlight\n      *ngIf=\"!!textToHighlight\"\n      [textToHighlight]=\"textToHighlight\"\n      [textContent]=\"t(option.label)\"\n    >\n    </nggv-typeahead-highlight>\n    <ng-container *ngIf=\"!textToHighlight\">\n      {{ t(option.label) }}\n    </ng-container>\n  </ng-template>\n</ng-container>\n", styles: [":host{position:absolute;bottom:0;transform:translateY(calc(100% + .5rem));--z-index: var(--sg-z-index-dropdown)}:host .hidden{visibility:hidden;display:none}:host ul[role=menu] [role=menuitem]{padding:.75rem;cursor:pointer}:host ul[role=menu] [role=menuitem]:hover,:host ul[role=menu] [role=menuitem]:focus-visible{background-color:var(--gds-ref-pallet-base200)}:host ul[role=menu] [role=menuitem]:active{background-color:var(--gds-ref-pallet-base300)}:host ul[role=menu] [role=menuitem]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox]{--z-index: var(--sg-z-index-popover);background-color:var(--sg-popover-background);flex-direction:column;justify-content:flex-end;inset:auto;z-index:var(--z-index);box-shadow:var(--sg-popover-box-shadow);color:var(--text-primary-color);padding:0;border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--text-primary-color);--sg-border-color: var(--text-primary-color);border-radius:var(--sg-border-radius)}:host ul[role=listbox] [role=option]{padding:.75rem 1rem;line-height:1.25;cursor:pointer}:host ul[role=listbox] [role=option]:hover,:host ul[role=listbox] [role=option]:focus-visible{background-color:var(--grey-400)}:host ul[role=listbox] [role=option]:active{background-color:var(--grey-400)}:host ul[role=listbox] [role=option]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox] [role=option].active.sg-highlighted,:host ul[role=listbox] [role=option][aria-selected=true]{background:var(--grey-1000);color:#fff}:host .sg-fieldset-container{overflow-y:auto}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option]{display:flex;width:100%}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option].active.sg-highlighted input[type=checkbox]~i{border-color:#007ac7!important;box-shadow:0 0 .25em .0625em #41b0ee;outline-color:transparent;outline-style:solid}:host .gds-dropdown__options{padding-left:0;margin-bottom:0;margin-top:0;display:flex;flex-direction:column;list-style:none;display:none}:host .gds-dropdown__options>li{padding-bottom:.5rem;padding-top:.5rem;border:0;display:block;position:relative}:host .gds-dropdown__options>li:before{font-weight:500;display:inline-block;left:0;position:absolute;text-align:center}:host .gds-dropdown__options-expanded{display:block}:host .gds-dropdown__options__label:hover,:host .gds-dropdown__options__label:focus-visible{background-color:var(--grey-400)}:host .gds-dropdown__options__label:active{background-color:var(--grey-500)}:host .gds-dropdown__options__label:focus-visible{outline-color:#000;outline-offset:-.25rem}:host .gds-dropdown__options__label[aria-hidden=true]{display:none}:host .gds-dropdown__options__label[highlighted]{color:#fff}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -526,11 +526,11 @@ class NgvDropdownComponent extends NgvBaseControlValueAccessorComponent {
         return !('options' in option);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvDropdownComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i0.ChangeDetectorRef }, { token: i2.DropdownUtils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NgvDropdownComponent, selector: "ngv-dropdown", inputs: { thook: "thook", placeholder: "placeholder", options: "options", scrollOffset: "scrollOffset", allowControlNullishOption: "allowControlNullishOption", textToHighlight: "textToHighlight", selectOnSingleOption: "selectOnSingleOption" }, outputs: { expandedChange: "expandedChange" }, host: { listeners: { "keyup": "onKeyUp($event)" }, properties: { "attr.data-thook": "this.thook" } }, queries: [{ propertyName: "selectedContentTpl", first: true, predicate: ["selectedTpl"], descendants: true, read: TemplateRef }, { propertyName: "optionContentTpl", first: true, predicate: ["optionTpl"], descendants: true, read: TemplateRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- LABEL -->\n<ng-container *transloco=\"let t; read: scope\">\n  <label [id]=\"id + '-label'\" class=\"hide-if-empty\" [attr.for]=\"id + '-toggle'\">\n    <ng-template\n      *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n    ></ng-template>\n    <ng-template #basicLabelContentTpl>\n      <!-- to trigger css:empty if no label was added -->\n      <ng-container *ngIf=\"label\">\n        {{ label }}\n        <span\n          *ngIf=\"optional === true || (required !== true && optional !== false)\"\n          class=\"sdv-field-label--optional\"\n        >\n          ({{ t('label.optional') }})\n        </span>\n      </ng-container>\n    </ng-template>\n  </label>\n\n  <!-- DESCRIPTION -->\n  <div class=\"description\">{{ description }}</div>\n\n  <!-- LOCKED INPUT -->\n  <ng-container *ngIf=\"locked\">\n    <div\n      [id]=\"id + '-input'\"\n      class=\"ngv-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-container>\n\n  <!-- INPUT -->\n  <ng-container *ngIf=\"!locked\">\n    <div #input [id]=\"id + '-input'\" class=\"dropdown\">\n      <button\n        [id]=\"id + '-toggle'\"\n        [disabled]=\"disabled\"\n        type=\"button\"\n        class=\"ngv-field-dropdown__label toggle\"\n        [class.ngv-field--error]=\"invalid\"\n        aria-haspopup=\"listbox\"\n        [attr.data-thook]=\"thook + '-toggle'\"\n        [attr.aria-expanded]=\"expanded\"\n        [attr.aria-labelledby]=\"id + '-label ' + id + '-toggle'\"\n        (click)=\"toggleDropdown()\"\n      >\n        <ng-template\n          *ngTemplateOutlet=\"\n            selectedContentTpl || defaultSelectedContentTpl;\n            context: { $implicit: state }\n          \"\n        >\n        </ng-template>\n      </button>\n\n      <ngv-dropdown-list\n        #dropDownList\n        [options]=\"options\"\n        [scrollOffset]=\"scrollOffset\"\n        [state]=\"state\"\n        [expanded]=\"expanded\"\n        [optionContentTpl]=\"optionContentTpl\"\n        [textToHighlight]=\"textToHighlight\"\n        (selectedValueChanged)=\"onSelectChange($event)\"\n      >\n      </ngv-dropdown-list>\n    </div>\n    <!-- ERRORS -->\n    <label\n      class=\"sdv-field-notice sdv-field-notice--error\"\n      [attr.for]=\"id + '-input'\"\n      *ngIf=\"invalid && (error || ngControl?.invalid)\"\n    >\n      <span *ngIf=\"error; else errorsRef\">{{ error }}</span>\n      <ng-template #errorsRef>\n        <span *ngIf=\"firstError as error\">\n          {{ t('error.field' + error?.code, error?.params) }}\n        </span>\n      </ng-template>\n    </label>\n\n    <!-- CHILDREN -->\n    <ng-content></ng-content>\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 label{display:block;font-weight:500;line-height:1.25rem;margin-bottom:.5rem;width:100%}:host .description{margin-bottom:.5rem;line-height:1.25rem;width:100%}:host button{font-weight:500;display:inline-flex;justify-content:center;transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;background:transparent;border-color:#007ac7;color:#007ac7;--color: rgb(0, 122, 199);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-800);--sg-border-color: var(--grey-800);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:inherit;font-weight:400;line-height:1.125;margin-bottom:.5rem;margin-top:.5rem;width:100%}@media screen and (-ms-high-contrast: active){:host button{border:2px solid currentcolor}}:host button.small{min-height:2rem;padding:.4375rem .75rem;line-height:1rem}:host button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host button:focus:not(:focus-visible){box-shadow:none;outline:0}:host button:focus,:host button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host button:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: #199be3;--color: rgb(255, 255, 255);border-color:#199be3}:host button[aria-selected=true],:host button:active,:host button.active,:host button.active:hover,:host button:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host button:disabled,:host button.disabled,:host button[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 button:disabled::placeholder,:host button.disabled::placeholder,:host button[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}: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:not(:disabled,.disabled,[aria-disabled]):hover{--background: var(--grey-400);--color: var(--grey-1000);background-color:var(--grey-400);color:var(--grey-1000);border-color:var(--grey-1000)}: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.small{font-size:.875rem}:host button:hover{background:var(--grey-400)}:host .dropdown{position:relative}\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.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: NgvDropdownListComponent, selector: "ngv-dropdown-list", inputs: ["expanded", "state", "scrollOffset", "optionContentTpl", "id", "thook", "options", "textToHighlight"], outputs: ["selectedValueChanged", "closed"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NgvDropdownComponent, selector: "nggv-dropdown", inputs: { thook: "thook", placeholder: "placeholder", options: "options", scrollOffset: "scrollOffset", allowControlNullishOption: "allowControlNullishOption", textToHighlight: "textToHighlight", selectOnSingleOption: "selectOnSingleOption" }, outputs: { expandedChange: "expandedChange" }, host: { listeners: { "keyup": "onKeyUp($event)" }, properties: { "attr.data-thook": "this.thook" } }, queries: [{ propertyName: "selectedContentTpl", first: true, predicate: ["selectedTpl"], descendants: true, read: TemplateRef }, { propertyName: "optionContentTpl", first: true, predicate: ["optionTpl"], descendants: true, read: TemplateRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- LABEL -->\n<ng-container *transloco=\"let t; read: scope\">\n  <label [id]=\"id + '-label'\" class=\"hide-if-empty\" [attr.for]=\"id + '-toggle'\">\n    <ng-template\n      *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n    ></ng-template>\n    <ng-template #basicLabelContentTpl>\n      <!-- to trigger css:empty if no label was added -->\n      <ng-container *ngIf=\"label\">\n        {{ label }}\n        <span\n          *ngIf=\"optional === true || (required !== true && optional !== false)\"\n          class=\"sdv-field-label--optional\"\n        >\n          ({{ t('label.optional') }})\n        </span>\n      </ng-container>\n    </ng-template>\n  </label>\n\n  <!-- DESCRIPTION -->\n  <div class=\"description\">{{ description }}</div>\n\n  <!-- LOCKED INPUT -->\n  <ng-container *ngIf=\"locked\">\n    <div\n      [id]=\"id + '-input'\"\n      class=\"nggv-field--locked\"\n      [attr.name]=\"name\"\n      [attr.value]=\"state\"\n      [attr.role]=\"role\"\n      [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-container>\n\n  <!-- INPUT -->\n  <ng-container *ngIf=\"!locked\">\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        aria-haspopup=\"listbox\"\n        [attr.data-thook]=\"thook + '-toggle'\"\n        [attr.aria-expanded]=\"expanded\"\n        [attr.aria-labelledby]=\"id + '-label ' + id + '-toggle'\"\n        (click)=\"toggleDropdown()\"\n      >\n        <ng-template\n          *ngTemplateOutlet=\"\n            selectedContentTpl || defaultSelectedContentTpl;\n            context: { $implicit: state }\n          \"\n        >\n        </ng-template>\n      </button>\n\n      <nggv-dropdown-list\n        #dropDownList\n        [options]=\"options\"\n        [scrollOffset]=\"scrollOffset\"\n        [state]=\"state\"\n        [expanded]=\"expanded\"\n        [optionContentTpl]=\"optionContentTpl\"\n        [textToHighlight]=\"textToHighlight\"\n        (selectedValueChanged)=\"onSelectChange($event)\"\n      >\n      </nggv-dropdown-list>\n    </div>\n    <!-- ERRORS -->\n    <label\n      class=\"sdv-field-notice sdv-field-notice--error\"\n      [attr.for]=\"id + '-input'\"\n      *ngIf=\"invalid && (error || ngControl?.invalid)\"\n    >\n      <span *ngIf=\"error; else errorsRef\">{{ error }}</span>\n      <ng-template #errorsRef>\n        <span *ngIf=\"firstError as error\">\n          {{ t('error.field' + error?.code, error?.params) }}\n        </span>\n      </ng-template>\n    </label>\n\n    <!-- CHILDREN -->\n    <ng-content></ng-content>\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 label{display:block;font-weight:500;line-height:1.25rem;margin-bottom:.5rem;width:100%}:host .description{margin-bottom:.5rem;line-height:1.25rem;width:100%}:host button{font-weight:500;display:inline-flex;justify-content:center;transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;background:transparent;border-color:#007ac7;color:#007ac7;--color: rgb(0, 122, 199);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-800);--sg-border-color: var(--grey-800);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:inherit;font-weight:400;line-height:1.125;margin-bottom:.5rem;margin-top:.5rem;width:100%}@media screen and (-ms-high-contrast: active){:host button{border:2px solid currentcolor}}:host button.small{min-height:2rem;padding:.4375rem .75rem;line-height:1rem}:host button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host button:focus:not(:focus-visible){box-shadow:none;outline:0}:host button:focus,:host button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host button:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: #199be3;--color: rgb(255, 255, 255);border-color:#199be3}:host button[aria-selected=true],:host button:active,:host button.active,:host button.active:hover,:host button:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host button:disabled,:host button.disabled,:host button[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 button:disabled::placeholder,:host button.disabled::placeholder,:host button[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}: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:not(:disabled,.disabled,[aria-disabled]):hover{--background: var(--grey-400);--color: var(--grey-1000);background-color:var(--grey-400);color:var(--grey-1000);border-color:var(--grey-1000)}: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.small{font-size:.875rem}:host button:hover{background:var(--grey-400)}:host .dropdown{position:relative}\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.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: NgvDropdownListComponent, selector: "nggv-dropdown-list", inputs: ["expanded", "state", "scrollOffset", "optionContentTpl", "id", "thook", "options", "textToHighlight"], outputs: ["selectedValueChanged", "closed"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngv-dropdown', template: "<!-- LABEL -->\n<ng-container *transloco=\"let t; read: scope\">\n  <label [id]=\"id + '-label'\" class=\"hide-if-empty\" [attr.for]=\"id + '-toggle'\">\n    <ng-template\n      *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n    ></ng-template>\n    <ng-template #basicLabelContentTpl>\n      <!-- to trigger css:empty if no label was added -->\n      <ng-container *ngIf=\"label\">\n        {{ label }}\n        <span\n          *ngIf=\"optional === true || (required !== true && optional !== false)\"\n          class=\"sdv-field-label--optional\"\n        >\n          ({{ t('label.optional') }})\n        </span>\n      </ng-container>\n    </ng-template>\n  </label>\n\n  <!-- DESCRIPTION -->\n  <div class=\"description\">{{ description }}</div>\n\n  <!-- LOCKED INPUT -->\n  <ng-container *ngIf=\"locked\">\n    <div\n      [id]=\"id + '-input'\"\n      class=\"ngv-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-container>\n\n  <!-- INPUT -->\n  <ng-container *ngIf=\"!locked\">\n    <div #input [id]=\"id + '-input'\" class=\"dropdown\">\n      <button\n        [id]=\"id + '-toggle'\"\n        [disabled]=\"disabled\"\n        type=\"button\"\n        class=\"ngv-field-dropdown__label toggle\"\n        [class.ngv-field--error]=\"invalid\"\n        aria-haspopup=\"listbox\"\n        [attr.data-thook]=\"thook + '-toggle'\"\n        [attr.aria-expanded]=\"expanded\"\n        [attr.aria-labelledby]=\"id + '-label ' + id + '-toggle'\"\n        (click)=\"toggleDropdown()\"\n      >\n        <ng-template\n          *ngTemplateOutlet=\"\n            selectedContentTpl || defaultSelectedContentTpl;\n            context: { $implicit: state }\n          \"\n        >\n        </ng-template>\n      </button>\n\n      <ngv-dropdown-list\n        #dropDownList\n        [options]=\"options\"\n        [scrollOffset]=\"scrollOffset\"\n        [state]=\"state\"\n        [expanded]=\"expanded\"\n        [optionContentTpl]=\"optionContentTpl\"\n        [textToHighlight]=\"textToHighlight\"\n        (selectedValueChanged)=\"onSelectChange($event)\"\n      >\n      </ngv-dropdown-list>\n    </div>\n    <!-- ERRORS -->\n    <label\n      class=\"sdv-field-notice sdv-field-notice--error\"\n      [attr.for]=\"id + '-input'\"\n      *ngIf=\"invalid && (error || ngControl?.invalid)\"\n    >\n      <span *ngIf=\"error; else errorsRef\">{{ error }}</span>\n      <ng-template #errorsRef>\n        <span *ngIf=\"firstError as error\">\n          {{ t('error.field' + error?.code, error?.params) }}\n        </span>\n      </ng-template>\n    </label>\n\n    <!-- CHILDREN -->\n    <ng-content></ng-content>\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 label{display:block;font-weight:500;line-height:1.25rem;margin-bottom:.5rem;width:100%}:host .description{margin-bottom:.5rem;line-height:1.25rem;width:100%}:host button{font-weight:500;display:inline-flex;justify-content:center;transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;background:transparent;border-color:#007ac7;color:#007ac7;--color: rgb(0, 122, 199);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-800);--sg-border-color: var(--grey-800);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:inherit;font-weight:400;line-height:1.125;margin-bottom:.5rem;margin-top:.5rem;width:100%}@media screen and (-ms-high-contrast: active){:host button{border:2px solid currentcolor}}:host button.small{min-height:2rem;padding:.4375rem .75rem;line-height:1rem}:host button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host button:focus:not(:focus-visible){box-shadow:none;outline:0}:host button:focus,:host button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host button:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: #199be3;--color: rgb(255, 255, 255);border-color:#199be3}:host button[aria-selected=true],:host button:active,:host button.active,:host button.active:hover,:host button:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host button:disabled,:host button.disabled,:host button[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 button:disabled::placeholder,:host button.disabled::placeholder,:host button[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}: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:not(:disabled,.disabled,[aria-disabled]):hover{--background: var(--grey-400);--color: var(--grey-1000);background-color:var(--grey-400);color:var(--grey-1000);border-color:var(--grey-1000)}: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.small{font-size:.875rem}:host button:hover{background:var(--grey-400)}:host .dropdown{position:relative}\n"] }]
+            args: [{ selector: 'nggv-dropdown', template: "<!-- LABEL -->\n<ng-container *transloco=\"let t; read: scope\">\n  <label [id]=\"id + '-label'\" class=\"hide-if-empty\" [attr.for]=\"id + '-toggle'\">\n    <ng-template\n      *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n    ></ng-template>\n    <ng-template #basicLabelContentTpl>\n      <!-- to trigger css:empty if no label was added -->\n      <ng-container *ngIf=\"label\">\n        {{ label }}\n        <span\n          *ngIf=\"optional === true || (required !== true && optional !== false)\"\n          class=\"sdv-field-label--optional\"\n        >\n          ({{ t('label.optional') }})\n        </span>\n      </ng-container>\n    </ng-template>\n  </label>\n\n  <!-- DESCRIPTION -->\n  <div class=\"description\">{{ description }}</div>\n\n  <!-- LOCKED INPUT -->\n  <ng-container *ngIf=\"locked\">\n    <div\n      [id]=\"id + '-input'\"\n      class=\"nggv-field--locked\"\n      [attr.name]=\"name\"\n      [attr.value]=\"state\"\n      [attr.role]=\"role\"\n      [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-container>\n\n  <!-- INPUT -->\n  <ng-container *ngIf=\"!locked\">\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        aria-haspopup=\"listbox\"\n        [attr.data-thook]=\"thook + '-toggle'\"\n        [attr.aria-expanded]=\"expanded\"\n        [attr.aria-labelledby]=\"id + '-label ' + id + '-toggle'\"\n        (click)=\"toggleDropdown()\"\n      >\n        <ng-template\n          *ngTemplateOutlet=\"\n            selectedContentTpl || defaultSelectedContentTpl;\n            context: { $implicit: state }\n          \"\n        >\n        </ng-template>\n      </button>\n\n      <nggv-dropdown-list\n        #dropDownList\n        [options]=\"options\"\n        [scrollOffset]=\"scrollOffset\"\n        [state]=\"state\"\n        [expanded]=\"expanded\"\n        [optionContentTpl]=\"optionContentTpl\"\n        [textToHighlight]=\"textToHighlight\"\n        (selectedValueChanged)=\"onSelectChange($event)\"\n      >\n      </nggv-dropdown-list>\n    </div>\n    <!-- ERRORS -->\n    <label\n      class=\"sdv-field-notice sdv-field-notice--error\"\n      [attr.for]=\"id + '-input'\"\n      *ngIf=\"invalid && (error || ngControl?.invalid)\"\n    >\n      <span *ngIf=\"error; else errorsRef\">{{ error }}</span>\n      <ng-template #errorsRef>\n        <span *ngIf=\"firstError as error\">\n          {{ t('error.field' + error?.code, error?.params) }}\n        </span>\n      </ng-template>\n    </label>\n\n    <!-- CHILDREN -->\n    <ng-content></ng-content>\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 label{display:block;font-weight:500;line-height:1.25rem;margin-bottom:.5rem;width:100%}:host .description{margin-bottom:.5rem;line-height:1.25rem;width:100%}:host button{font-weight:500;display:inline-flex;justify-content:center;transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;background:transparent;border-color:#007ac7;color:#007ac7;--color: rgb(0, 122, 199);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-800);--sg-border-color: var(--grey-800);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:inherit;font-weight:400;line-height:1.125;margin-bottom:.5rem;margin-top:.5rem;width:100%}@media screen and (-ms-high-contrast: active){:host button{border:2px solid currentcolor}}:host button.small{min-height:2rem;padding:.4375rem .75rem;line-height:1rem}:host button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host button:focus:not(:focus-visible){box-shadow:none;outline:0}:host button:focus,:host button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host button:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: #199be3;--color: rgb(255, 255, 255);border-color:#199be3}:host button[aria-selected=true],:host button:active,:host button.active,:host button.active:hover,:host button:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host button:disabled,:host button.disabled,:host button[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 button:disabled::placeholder,:host button.disabled::placeholder,:host button[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}: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:not(:disabled,.disabled,[aria-disabled]):hover{--background: var(--grey-400);--color: var(--grey-1000);background-color:var(--grey-400);color:var(--grey-1000);border-color:var(--grey-1000)}: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.small{font-size:.875rem}:host button:hover{background:var(--grey-400)}:host .dropdown{position:relative}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -668,11 +668,11 @@ class NgvTypeaheadInputComponent extends NgvInputComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvTypeaheadInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { 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: "16.2.12", type: NgvTypeaheadInputComponent, selector: "ngv-typeahead-input", inputs: { hostComponent: "hostComponent", resultFormatter: "resultFormatter", selectedFormatter: "selectedFormatter" }, host: { listeners: { "document:keyup": "onKeyUp($event)" } }, usesInheritance: true, ngImport: i0, template: "<ng-container>\n    <div class=\"input-wrapper\"\n        [ngClass]=\"{ 'expanded': expanded, 'collapsed': !expanded }\"\n        [ngStyle]=\"{ 'height.px': buttonHeight }\"\n        (click)=\"$event.stopPropagation();\">\n        <!-- INPUT FIELD -->\n        <div class=\"input-group\">\n            <input #input\n                [id]=\"id + '-input'\"\n                class=\"sdv-field\"\n                [attr.type]=\"type\"\n                [attr.name]=\"name\"\n                [attr.required]=\"required\"\n                [attr.email]=\"email\"\n                [min]=\"min\"\n                [max]=\"max\"\n                [step]=\"step\"\n                [attr.maxlength]=\"maxlength\"\n                [attr.minlength]=\"minlength\"\n                [pattern]=\"pattern\"\n                [disabled]=\"disabled\"\n                [autocomplete]=\"autocomplete\"\n                [autofocus]=\"autofocus\"\n                [readOnly]=\"readonly\"\n                [attr.role]=\"role\"\n                [attr.placeholder]=\"placeholder\"\n                [attr.aria-label]=\"description\"\n                [value]=\"state\"\n                (input)=\"onInput($event)\"\n                (focus)=\"onFocus($event)\"\n                (blur)=\"onBlur($event)\" />\n        </div>\n    </div>\n</ng-container>", styles: [":host{position:absolute;top:0;left:0;width:calc(100% - 2.625em)}:host .input-wrapper{border:none;box-shadow:none}:host .input-wrapper.expanded{display:flex}:host .input-wrapper.expanded .input-group input.sdv-field{height:100%;width:100%;min-height:unset;margin-left:1px;border:none;box-shadow:none}:host .input-wrapper.collapsed{display:none}:host .input-wrapper .input-group{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NgvTypeaheadInputComponent, selector: "nggv-typeahead-input", inputs: { hostComponent: "hostComponent", resultFormatter: "resultFormatter", selectedFormatter: "selectedFormatter" }, host: { listeners: { "document:keyup": "onKeyUp($event)" } }, usesInheritance: true, ngImport: i0, template: "<ng-container>\n    <div class=\"input-wrapper\"\n        [ngClass]=\"{ 'expanded': expanded, 'collapsed': !expanded }\"\n        [ngStyle]=\"{ 'height.px': buttonHeight }\"\n        (click)=\"$event.stopPropagation();\">\n        <!-- INPUT FIELD -->\n        <div class=\"input-group\">\n            <input #input\n                [id]=\"id + '-input'\"\n                class=\"sdv-field\"\n                [attr.type]=\"type\"\n                [attr.name]=\"name\"\n                [attr.required]=\"required\"\n                [attr.email]=\"email\"\n                [min]=\"min\"\n                [max]=\"max\"\n                [step]=\"step\"\n                [attr.maxlength]=\"maxlength\"\n                [attr.minlength]=\"minlength\"\n                [pattern]=\"pattern\"\n                [disabled]=\"disabled\"\n                [autocomplete]=\"autocomplete\"\n                [autofocus]=\"autofocus\"\n                [readOnly]=\"readonly\"\n                [attr.role]=\"role\"\n                [attr.placeholder]=\"placeholder\"\n                [attr.aria-label]=\"description\"\n                [value]=\"state\"\n                (input)=\"onInput($event)\"\n                (focus)=\"onFocus($event)\"\n                (blur)=\"onBlur($event)\" />\n        </div>\n    </div>\n</ng-container>", styles: [":host{position:absolute;top:0;left:0;width:calc(100% - 2.625em)}:host .input-wrapper{border:none;box-shadow:none}:host .input-wrapper.expanded{display:flex}:host .input-wrapper.expanded .input-group input.sdv-field{height:100%;width:100%;min-height:unset;margin-left:1px;border:none;box-shadow:none}:host .input-wrapper.collapsed{display:none}:host .input-wrapper .input-group{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvTypeaheadInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngv-typeahead-input', template: "<ng-container>\n    <div class=\"input-wrapper\"\n        [ngClass]=\"{ 'expanded': expanded, 'collapsed': !expanded }\"\n        [ngStyle]=\"{ 'height.px': buttonHeight }\"\n        (click)=\"$event.stopPropagation();\">\n        <!-- INPUT FIELD -->\n        <div class=\"input-group\">\n            <input #input\n                [id]=\"id + '-input'\"\n                class=\"sdv-field\"\n                [attr.type]=\"type\"\n                [attr.name]=\"name\"\n                [attr.required]=\"required\"\n                [attr.email]=\"email\"\n                [min]=\"min\"\n                [max]=\"max\"\n                [step]=\"step\"\n                [attr.maxlength]=\"maxlength\"\n                [attr.minlength]=\"minlength\"\n                [pattern]=\"pattern\"\n                [disabled]=\"disabled\"\n                [autocomplete]=\"autocomplete\"\n                [autofocus]=\"autofocus\"\n                [readOnly]=\"readonly\"\n                [attr.role]=\"role\"\n                [attr.placeholder]=\"placeholder\"\n                [attr.aria-label]=\"description\"\n                [value]=\"state\"\n                (input)=\"onInput($event)\"\n                (focus)=\"onFocus($event)\"\n                (blur)=\"onBlur($event)\" />\n        </div>\n    </div>\n</ng-container>", styles: [":host{position:absolute;top:0;left:0;width:calc(100% - 2.625em)}:host .input-wrapper{border:none;box-shadow:none}:host .input-wrapper.expanded{display:flex}:host .input-wrapper.expanded .input-group input.sdv-field{height:100%;width:100%;min-height:unset;margin-left:1px;border:none;box-shadow:none}:host .input-wrapper.collapsed{display:none}:host .input-wrapper .input-group{width:100%}\n"] }]
+            args: [{ selector: 'nggv-typeahead-input', template: "<ng-container>\n    <div class=\"input-wrapper\"\n        [ngClass]=\"{ 'expanded': expanded, 'collapsed': !expanded }\"\n        [ngStyle]=\"{ 'height.px': buttonHeight }\"\n        (click)=\"$event.stopPropagation();\">\n        <!-- INPUT FIELD -->\n        <div class=\"input-group\">\n            <input #input\n                [id]=\"id + '-input'\"\n                class=\"sdv-field\"\n                [attr.type]=\"type\"\n                [attr.name]=\"name\"\n                [attr.required]=\"required\"\n                [attr.email]=\"email\"\n                [min]=\"min\"\n                [max]=\"max\"\n                [step]=\"step\"\n                [attr.maxlength]=\"maxlength\"\n                [attr.minlength]=\"minlength\"\n                [pattern]=\"pattern\"\n                [disabled]=\"disabled\"\n                [autocomplete]=\"autocomplete\"\n                [autofocus]=\"autofocus\"\n                [readOnly]=\"readonly\"\n                [attr.role]=\"role\"\n                [attr.placeholder]=\"placeholder\"\n                [attr.aria-label]=\"description\"\n                [value]=\"state\"\n                (input)=\"onInput($event)\"\n                (focus)=\"onFocus($event)\"\n                (blur)=\"onBlur($event)\" />\n        </div>\n    </div>\n</ng-container>", styles: [":host{position:absolute;top:0;left:0;width:calc(100% - 2.625em)}:host .input-wrapper{border:none;box-shadow:none}:host .input-wrapper.expanded{display:flex}:host .input-wrapper.expanded .input-group input.sdv-field{height:100%;width:100%;min-height:unset;margin-left:1px;border:none;box-shadow:none}:host .input-wrapper.collapsed{display:none}:host .input-wrapper .input-group{width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$1.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -762,11 +762,11 @@ class NgvTypeaheadDropdownListComponent extends NgvDropdownListComponent {
         return this.selectedFormatter(value) ?? '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvTypeaheadDropdownListComponent, deps: [{ token: TRANSLOCO_SCOPE, optional: true, skipSelf: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NgvTypeaheadDropdownListComponent, selector: "ngv-typeahead-dropdown-list", inputs: { hostComponent: "hostComponent", resultFormatter: "resultFormatter", selectedFormatter: "selectedFormatter" }, usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t; read: scope\">\n  <ul\n    class=\"gds-dropdown__options card options gds-reset\"\n    [class.gds-dropdown__options-expanded]=\"expanded\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.data-thook]=\"thook + '-options'\"\n    [attr.aria-labelledby]=\"id + '-label'\"\n    [attr.aria-activedescendant]=\"\n      state ? id + '-option-' + state?.key : undefined\n    \"\n  >\n    <ng-container *ngFor=\"let item of options\">\n      <!-- OPTION -->\n      <ng-container *ngIf=\"!isGroup(item)\">\n        <ng-template\n          *ngTemplateOutlet=\"listItemTemplate; context: { $implicit: item }\"\n        ></ng-template>\n      </ng-container>\n\n      <!-- OPTION GROUP -->\n      <li\n        class=\"gds-dropdown__options__label group\"\n        [attr.data-thook]=\"thook + '-option-group'\"\n        *ngIf=\"isGroup(item)\"\n      >\n        <div class=\"sdv-list__label\">{{ t(item.label) }}</div>\n        <ul [attr.aria-disabled]=\"item.disabled\">\n          <ng-container *ngFor=\"let option of castGroup(item).options\">\n            <ng-template\n              *ngTemplateOutlet=\"\n                listItemTemplate;\n                context: { $implicit: option }\n              \"\n            ></ng-template>\n          </ng-container>\n        </ul>\n      </li>\n    </ng-container>\n  </ul>\n\n  <!-- TEMPLATE -->\n  <ng-template #listItemTemplate let-option>\n    <li\n      #optionRefs\n      *ngIf=\"!optionContentTpl\"\n      tabindex=\"-1\"\n      [id]=\"id + '-option-' + option.key\"\n      class=\"gds-dropdown__options__label option\"\n      role=\"option\"\n      #liElem\n      [attr.data-thook]=\"thook + '-option-' + option.key\"\n      [attr.aria-disabled]=\"option.disabled\"\n      [attr.aria-selected]=\"\n        option.key === selectedValue?.key && !!selectedValue?.key\n      \"\n      [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n      [ngvTooltip]=\"isOverflow(liElem) ? t(option.label) : undefined\"\n      (click)=\"updateState(option, $event)\"\n    >\n      <ng-template\n        *ngTemplateOutlet=\"\n          basicOptionContentTpl;\n          context: { $implicit: option }\n        \"\n      >\n      </ng-template>\n    </li>\n    <!-- Checking overflow on custom templates do not work skip adding ngvToolTip if custom template is provided -->\n    <li\n      #optionRefs\n      *ngIf=\"!!optionContentTpl\"\n      tabindex=\"-1\"\n      [id]=\"id + '-option-' + option.key\"\n      class=\"gds-dropdown__options__label option\"\n      role=\"option\"\n      #liElem\n      [attr.data-thook]=\"thook + '-option-' + option.key\"\n      [attr.aria-disabled]=\"option.disabled\"\n      [attr.aria-selected]=\"\n        option.key === selectedValue?.key && !!selectedValue?.key\n      \"\n      [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n      (click)=\"updateState(option, $event)\"\n    >\n      <ng-template\n        *ngTemplateOutlet=\"optionContentTpl; context: { $implicit: option }\"\n      >\n      </ng-template>\n    </li>\n  </ng-template>\n\n  <ng-template #basicOptionContentTpl let-option>\n    <ngv-typeahead-highlight\n      *ngIf=\"!!textToHighlight\"\n      [textToHighlight]=\"textToHighlight\"\n      [textContent]=\"t(option.label)\"\n    >\n    </ngv-typeahead-highlight>\n    <ng-container *ngIf=\"!textToHighlight\">\n      {{ t(option.label) }}\n    </ng-container>\n  </ng-template>\n</ng-container>\n", styles: [":host{display:flex;width:100%;position:relative}\n", ":host{position:absolute;bottom:0;transform:translateY(calc(100% + .5rem));--z-index: var(--sg-z-index-dropdown)}:host .hidden{visibility:hidden;display:none}:host ul[role=menu] [role=menuitem]{padding:.75rem;cursor:pointer}:host ul[role=menu] [role=menuitem]:hover,:host ul[role=menu] [role=menuitem]:focus-visible{background-color:var(--gds-ref-pallet-base200)}:host ul[role=menu] [role=menuitem]:active{background-color:var(--gds-ref-pallet-base300)}:host ul[role=menu] [role=menuitem]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox]{--z-index: var(--sg-z-index-popover);background-color:var(--sg-popover-background);flex-direction:column;justify-content:flex-end;inset:auto;z-index:var(--z-index);box-shadow:var(--sg-popover-box-shadow);color:var(--text-primary-color);padding:0;border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--text-primary-color);--sg-border-color: var(--text-primary-color);border-radius:var(--sg-border-radius)}:host ul[role=listbox] [role=option]{padding:.75rem 1rem;line-height:1.25;cursor:pointer}:host ul[role=listbox] [role=option]:hover,:host ul[role=listbox] [role=option]:focus-visible{background-color:var(--grey-400)}:host ul[role=listbox] [role=option]:active{background-color:var(--grey-400)}:host ul[role=listbox] [role=option]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox] [role=option].active.sg-highlighted,:host ul[role=listbox] [role=option][aria-selected=true]{background:var(--grey-1000);color:#fff}:host .sg-fieldset-container{overflow-y:auto}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option]{display:flex;width:100%}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option].active.sg-highlighted input[type=checkbox]~i{border-color:#007ac7!important;box-shadow:0 0 .25em .0625em #41b0ee;outline-color:transparent;outline-style:solid}:host .gds-dropdown__options{padding-left:0;margin-bottom:0;margin-top:0;display:flex;flex-direction:column;list-style:none;display:none}:host .gds-dropdown__options>li{padding-bottom:.5rem;padding-top:.5rem;border:0;display:block;position:relative}:host .gds-dropdown__options>li:before{font-weight:500;display:inline-block;left:0;position:absolute;text-align:center}:host .gds-dropdown__options-expanded{display:block}:host .gds-dropdown__options__label:hover,:host .gds-dropdown__options__label:focus-visible{background-color:var(--grey-400)}:host .gds-dropdown__options__label:active{background-color:var(--grey-500)}:host .gds-dropdown__options__label:focus-visible{outline-color:#000;outline-offset:-.25rem}:host .gds-dropdown__options__label[aria-hidden=true]{display:none}:host .gds-dropdown__options__label[highlighted]{color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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.NgvTooltipDirective, selector: "[ngvTooltip]", inputs: ["ngvTooltip", "thook", "placement", "shown", "offset", "resizeThrottle", "maxWidth"], outputs: ["ngvShow", "ngvHide"] }, { kind: "component", type: NgvTypeaheadHighlightComponent, selector: "ngv-typeahead-highlight", inputs: ["textContent", "textToHighlight"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NgvTypeaheadDropdownListComponent, selector: "nggv-typeahead-dropdown-list", inputs: { hostComponent: "hostComponent", resultFormatter: "resultFormatter", selectedFormatter: "selectedFormatter" }, usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t; read: scope\">\n  <ul\n    class=\"gds-dropdown__options card options gds-reset\"\n    [class.gds-dropdown__options-expanded]=\"expanded\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.data-thook]=\"thook + '-options'\"\n    [attr.aria-labelledby]=\"id + '-label'\"\n    [attr.aria-activedescendant]=\"\n      state ? id + '-option-' + state?.key : undefined\n    \"\n  >\n    <ng-container *ngFor=\"let item of options\">\n      <!-- OPTION -->\n      <ng-container *ngIf=\"!isGroup(item)\">\n        <ng-template\n          *ngTemplateOutlet=\"listItemTemplate; context: { $implicit: item }\"\n        ></ng-template>\n      </ng-container>\n\n      <!-- OPTION GROUP -->\n      <li\n        class=\"gds-dropdown__options__label group\"\n        [attr.data-thook]=\"thook + '-option-group'\"\n        *ngIf=\"isGroup(item)\"\n      >\n        <div class=\"sdv-list__label\">{{ t(item.label) }}</div>\n        <ul [attr.aria-disabled]=\"item.disabled\">\n          <ng-container *ngFor=\"let option of castGroup(item).options\">\n            <ng-template\n              *ngTemplateOutlet=\"\n                listItemTemplate;\n                context: { $implicit: option }\n              \"\n            ></ng-template>\n          </ng-container>\n        </ul>\n      </li>\n    </ng-container>\n  </ul>\n\n  <!-- TEMPLATE -->\n  <ng-template #listItemTemplate let-option>\n    <li\n      #optionRefs\n      *ngIf=\"!optionContentTpl\"\n      tabindex=\"-1\"\n      [id]=\"id + '-option-' + option.key\"\n      class=\"gds-dropdown__options__label option\"\n      role=\"option\"\n      #liElem\n      [attr.data-thook]=\"thook + '-option-' + option.key\"\n      [attr.aria-disabled]=\"option.disabled\"\n      [attr.aria-selected]=\"\n        option.key === selectedValue?.key && !!selectedValue?.key\n      \"\n      [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n      [ngvTooltip]=\"isOverflow(liElem) ? t(option.label) : undefined\"\n      (click)=\"updateState(option, $event)\"\n    >\n      <ng-template\n        *ngTemplateOutlet=\"\n          basicOptionContentTpl;\n          context: { $implicit: option }\n        \"\n      >\n      </ng-template>\n    </li>\n    <!-- Checking overflow on custom templates do not work skip adding ngvToolTip if custom template is provided -->\n    <li\n      #optionRefs\n      *ngIf=\"!!optionContentTpl\"\n      tabindex=\"-1\"\n      [id]=\"id + '-option-' + option.key\"\n      class=\"gds-dropdown__options__label option\"\n      role=\"option\"\n      #liElem\n      [attr.data-thook]=\"thook + '-option-' + option.key\"\n      [attr.aria-disabled]=\"option.disabled\"\n      [attr.aria-selected]=\"\n        option.key === selectedValue?.key && !!selectedValue?.key\n      \"\n      [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n      (click)=\"updateState(option, $event)\"\n    >\n      <ng-template\n        *ngTemplateOutlet=\"optionContentTpl; context: { $implicit: option }\"\n      >\n      </ng-template>\n    </li>\n  </ng-template>\n\n  <ng-template #basicOptionContentTpl let-option>\n    <nggv-typeahead-highlight\n      *ngIf=\"!!textToHighlight\"\n      [textToHighlight]=\"textToHighlight\"\n      [textContent]=\"t(option.label)\"\n    >\n    </nggv-typeahead-highlight>\n    <ng-container *ngIf=\"!textToHighlight\">\n      {{ t(option.label) }}\n    </ng-container>\n  </ng-template>\n</ng-container>\n", styles: [":host{display:flex;width:100%;position:relative}\n", ":host{position:absolute;bottom:0;transform:translateY(calc(100% + .5rem));--z-index: var(--sg-z-index-dropdown)}:host .hidden{visibility:hidden;display:none}:host ul[role=menu] [role=menuitem]{padding:.75rem;cursor:pointer}:host ul[role=menu] [role=menuitem]:hover,:host ul[role=menu] [role=menuitem]:focus-visible{background-color:var(--gds-ref-pallet-base200)}:host ul[role=menu] [role=menuitem]:active{background-color:var(--gds-ref-pallet-base300)}:host ul[role=menu] [role=menuitem]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox]{--z-index: var(--sg-z-index-popover);background-color:var(--sg-popover-background);flex-direction:column;justify-content:flex-end;inset:auto;z-index:var(--z-index);box-shadow:var(--sg-popover-box-shadow);color:var(--text-primary-color);padding:0;border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--text-primary-color);--sg-border-color: var(--text-primary-color);border-radius:var(--sg-border-radius)}:host ul[role=listbox] [role=option]{padding:.75rem 1rem;line-height:1.25;cursor:pointer}:host ul[role=listbox] [role=option]:hover,:host ul[role=listbox] [role=option]:focus-visible{background-color:var(--grey-400)}:host ul[role=listbox] [role=option]:active{background-color:var(--grey-400)}:host ul[role=listbox] [role=option]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox] [role=option].active.sg-highlighted,:host ul[role=listbox] [role=option][aria-selected=true]{background:var(--grey-1000);color:#fff}:host .sg-fieldset-container{overflow-y:auto}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option]{display:flex;width:100%}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option].active.sg-highlighted input[type=checkbox]~i{border-color:#007ac7!important;box-shadow:0 0 .25em .0625em #41b0ee;outline-color:transparent;outline-style:solid}:host .gds-dropdown__options{padding-left:0;margin-bottom:0;margin-top:0;display:flex;flex-direction:column;list-style:none;display:none}:host .gds-dropdown__options>li{padding-bottom:.5rem;padding-top:.5rem;border:0;display:block;position:relative}:host .gds-dropdown__options>li:before{font-weight:500;display:inline-block;left:0;position:absolute;text-align:center}:host .gds-dropdown__options-expanded{display:block}:host .gds-dropdown__options__label:hover,:host .gds-dropdown__options__label:focus-visible{background-color:var(--grey-400)}:host .gds-dropdown__options__label:active{background-color:var(--grey-500)}:host .gds-dropdown__options__label:focus-visible{outline-color:#000;outline-offset:-.25rem}:host .gds-dropdown__options__label[aria-hidden=true]{display:none}:host .gds-dropdown__options__label[highlighted]{color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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.NgvTooltipDirective, selector: "[ngvTooltip]", inputs: ["ngvTooltip", "thook", "placement", "shown", "offset", "resizeThrottle", "maxWidth"], outputs: ["ngvShow", "ngvHide"] }, { kind: "component", type: NgvTypeaheadHighlightComponent, selector: "nggv-typeahead-highlight", inputs: ["textContent", "textToHighlight"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvTypeaheadDropdownListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngv-typeahead-dropdown-list', template: "<ng-container *transloco=\"let t; read: scope\">\n  <ul\n    class=\"gds-dropdown__options card options gds-reset\"\n    [class.gds-dropdown__options-expanded]=\"expanded\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.data-thook]=\"thook + '-options'\"\n    [attr.aria-labelledby]=\"id + '-label'\"\n    [attr.aria-activedescendant]=\"\n      state ? id + '-option-' + state?.key : undefined\n    \"\n  >\n    <ng-container *ngFor=\"let item of options\">\n      <!-- OPTION -->\n      <ng-container *ngIf=\"!isGroup(item)\">\n        <ng-template\n          *ngTemplateOutlet=\"listItemTemplate; context: { $implicit: item }\"\n        ></ng-template>\n      </ng-container>\n\n      <!-- OPTION GROUP -->\n      <li\n        class=\"gds-dropdown__options__label group\"\n        [attr.data-thook]=\"thook + '-option-group'\"\n        *ngIf=\"isGroup(item)\"\n      >\n        <div class=\"sdv-list__label\">{{ t(item.label) }}</div>\n        <ul [attr.aria-disabled]=\"item.disabled\">\n          <ng-container *ngFor=\"let option of castGroup(item).options\">\n            <ng-template\n              *ngTemplateOutlet=\"\n                listItemTemplate;\n                context: { $implicit: option }\n              \"\n            ></ng-template>\n          </ng-container>\n        </ul>\n      </li>\n    </ng-container>\n  </ul>\n\n  <!-- TEMPLATE -->\n  <ng-template #listItemTemplate let-option>\n    <li\n      #optionRefs\n      *ngIf=\"!optionContentTpl\"\n      tabindex=\"-1\"\n      [id]=\"id + '-option-' + option.key\"\n      class=\"gds-dropdown__options__label option\"\n      role=\"option\"\n      #liElem\n      [attr.data-thook]=\"thook + '-option-' + option.key\"\n      [attr.aria-disabled]=\"option.disabled\"\n      [attr.aria-selected]=\"\n        option.key === selectedValue?.key && !!selectedValue?.key\n      \"\n      [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n      [ngvTooltip]=\"isOverflow(liElem) ? t(option.label) : undefined\"\n      (click)=\"updateState(option, $event)\"\n    >\n      <ng-template\n        *ngTemplateOutlet=\"\n          basicOptionContentTpl;\n          context: { $implicit: option }\n        \"\n      >\n      </ng-template>\n    </li>\n    <!-- Checking overflow on custom templates do not work skip adding ngvToolTip if custom template is provided -->\n    <li\n      #optionRefs\n      *ngIf=\"!!optionContentTpl\"\n      tabindex=\"-1\"\n      [id]=\"id + '-option-' + option.key\"\n      class=\"gds-dropdown__options__label option\"\n      role=\"option\"\n      #liElem\n      [attr.data-thook]=\"thook + '-option-' + option.key\"\n      [attr.aria-disabled]=\"option.disabled\"\n      [attr.aria-selected]=\"\n        option.key === selectedValue?.key && !!selectedValue?.key\n      \"\n      [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n      (click)=\"updateState(option, $event)\"\n    >\n      <ng-template\n        *ngTemplateOutlet=\"optionContentTpl; context: { $implicit: option }\"\n      >\n      </ng-template>\n    </li>\n  </ng-template>\n\n  <ng-template #basicOptionContentTpl let-option>\n    <ngv-typeahead-highlight\n      *ngIf=\"!!textToHighlight\"\n      [textToHighlight]=\"textToHighlight\"\n      [textContent]=\"t(option.label)\"\n    >\n    </ngv-typeahead-highlight>\n    <ng-container *ngIf=\"!textToHighlight\">\n      {{ t(option.label) }}\n    </ng-container>\n  </ng-template>\n</ng-container>\n", styles: [":host{display:flex;width:100%;position:relative}\n", ":host{position:absolute;bottom:0;transform:translateY(calc(100% + .5rem));--z-index: var(--sg-z-index-dropdown)}:host .hidden{visibility:hidden;display:none}:host ul[role=menu] [role=menuitem]{padding:.75rem;cursor:pointer}:host ul[role=menu] [role=menuitem]:hover,:host ul[role=menu] [role=menuitem]:focus-visible{background-color:var(--gds-ref-pallet-base200)}:host ul[role=menu] [role=menuitem]:active{background-color:var(--gds-ref-pallet-base300)}:host ul[role=menu] [role=menuitem]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox]{--z-index: var(--sg-z-index-popover);background-color:var(--sg-popover-background);flex-direction:column;justify-content:flex-end;inset:auto;z-index:var(--z-index);box-shadow:var(--sg-popover-box-shadow);color:var(--text-primary-color);padding:0;border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--text-primary-color);--sg-border-color: var(--text-primary-color);border-radius:var(--sg-border-radius)}:host ul[role=listbox] [role=option]{padding:.75rem 1rem;line-height:1.25;cursor:pointer}:host ul[role=listbox] [role=option]:hover,:host ul[role=listbox] [role=option]:focus-visible{background-color:var(--grey-400)}:host ul[role=listbox] [role=option]:active{background-color:var(--grey-400)}:host ul[role=listbox] [role=option]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox] [role=option].active.sg-highlighted,:host ul[role=listbox] [role=option][aria-selected=true]{background:var(--grey-1000);color:#fff}:host .sg-fieldset-container{overflow-y:auto}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option]{display:flex;width:100%}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option].active.sg-highlighted input[type=checkbox]~i{border-color:#007ac7!important;box-shadow:0 0 .25em .0625em #41b0ee;outline-color:transparent;outline-style:solid}:host .gds-dropdown__options{padding-left:0;margin-bottom:0;margin-top:0;display:flex;flex-direction:column;list-style:none;display:none}:host .gds-dropdown__options>li{padding-bottom:.5rem;padding-top:.5rem;border:0;display:block;position:relative}:host .gds-dropdown__options>li:before{font-weight:500;display:inline-block;left:0;position:absolute;text-align:center}:host .gds-dropdown__options-expanded{display:block}:host .gds-dropdown__options__label:hover,:host .gds-dropdown__options__label:focus-visible{background-color:var(--grey-400)}:host .gds-dropdown__options__label:active{background-color:var(--grey-500)}:host .gds-dropdown__options__label:focus-visible{outline-color:#000;outline-offset:-.25rem}:host .gds-dropdown__options__label[aria-hidden=true]{display:none}:host .gds-dropdown__options__label[highlighted]{color:#fff}\n"] }]
+            args: [{ selector: 'nggv-typeahead-dropdown-list', template: "<ng-container *transloco=\"let t; read: scope\">\n  <ul\n    class=\"gds-dropdown__options card options gds-reset\"\n    [class.gds-dropdown__options-expanded]=\"expanded\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.data-thook]=\"thook + '-options'\"\n    [attr.aria-labelledby]=\"id + '-label'\"\n    [attr.aria-activedescendant]=\"\n      state ? id + '-option-' + state?.key : undefined\n    \"\n  >\n    <ng-container *ngFor=\"let item of options\">\n      <!-- OPTION -->\n      <ng-container *ngIf=\"!isGroup(item)\">\n        <ng-template\n          *ngTemplateOutlet=\"listItemTemplate; context: { $implicit: item }\"\n        ></ng-template>\n      </ng-container>\n\n      <!-- OPTION GROUP -->\n      <li\n        class=\"gds-dropdown__options__label group\"\n        [attr.data-thook]=\"thook + '-option-group'\"\n        *ngIf=\"isGroup(item)\"\n      >\n        <div class=\"sdv-list__label\">{{ t(item.label) }}</div>\n        <ul [attr.aria-disabled]=\"item.disabled\">\n          <ng-container *ngFor=\"let option of castGroup(item).options\">\n            <ng-template\n              *ngTemplateOutlet=\"\n                listItemTemplate;\n                context: { $implicit: option }\n              \"\n            ></ng-template>\n          </ng-container>\n        </ul>\n      </li>\n    </ng-container>\n  </ul>\n\n  <!-- TEMPLATE -->\n  <ng-template #listItemTemplate let-option>\n    <li\n      #optionRefs\n      *ngIf=\"!optionContentTpl\"\n      tabindex=\"-1\"\n      [id]=\"id + '-option-' + option.key\"\n      class=\"gds-dropdown__options__label option\"\n      role=\"option\"\n      #liElem\n      [attr.data-thook]=\"thook + '-option-' + option.key\"\n      [attr.aria-disabled]=\"option.disabled\"\n      [attr.aria-selected]=\"\n        option.key === selectedValue?.key && !!selectedValue?.key\n      \"\n      [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n      [ngvTooltip]=\"isOverflow(liElem) ? t(option.label) : undefined\"\n      (click)=\"updateState(option, $event)\"\n    >\n      <ng-template\n        *ngTemplateOutlet=\"\n          basicOptionContentTpl;\n          context: { $implicit: option }\n        \"\n      >\n      </ng-template>\n    </li>\n    <!-- Checking overflow on custom templates do not work skip adding ngvToolTip if custom template is provided -->\n    <li\n      #optionRefs\n      *ngIf=\"!!optionContentTpl\"\n      tabindex=\"-1\"\n      [id]=\"id + '-option-' + option.key\"\n      class=\"gds-dropdown__options__label option\"\n      role=\"option\"\n      #liElem\n      [attr.data-thook]=\"thook + '-option-' + option.key\"\n      [attr.aria-disabled]=\"option.disabled\"\n      [attr.aria-selected]=\"\n        option.key === selectedValue?.key && !!selectedValue?.key\n      \"\n      [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n      (click)=\"updateState(option, $event)\"\n    >\n      <ng-template\n        *ngTemplateOutlet=\"optionContentTpl; context: { $implicit: option }\"\n      >\n      </ng-template>\n    </li>\n  </ng-template>\n\n  <ng-template #basicOptionContentTpl let-option>\n    <nggv-typeahead-highlight\n      *ngIf=\"!!textToHighlight\"\n      [textToHighlight]=\"textToHighlight\"\n      [textContent]=\"t(option.label)\"\n    >\n    </nggv-typeahead-highlight>\n    <ng-container *ngIf=\"!textToHighlight\">\n      {{ t(option.label) }}\n    </ng-container>\n  </ng-template>\n</ng-container>\n", styles: [":host{display:flex;width:100%;position:relative}\n", ":host{position:absolute;bottom:0;transform:translateY(calc(100% + .5rem));--z-index: var(--sg-z-index-dropdown)}:host .hidden{visibility:hidden;display:none}:host ul[role=menu] [role=menuitem]{padding:.75rem;cursor:pointer}:host ul[role=menu] [role=menuitem]:hover,:host ul[role=menu] [role=menuitem]:focus-visible{background-color:var(--gds-ref-pallet-base200)}:host ul[role=menu] [role=menuitem]:active{background-color:var(--gds-ref-pallet-base300)}:host ul[role=menu] [role=menuitem]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox]{--z-index: var(--sg-z-index-popover);background-color:var(--sg-popover-background);flex-direction:column;justify-content:flex-end;inset:auto;z-index:var(--z-index);box-shadow:var(--sg-popover-box-shadow);color:var(--text-primary-color);padding:0;border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--text-primary-color);--sg-border-color: var(--text-primary-color);border-radius:var(--sg-border-radius)}:host ul[role=listbox] [role=option]{padding:.75rem 1rem;line-height:1.25;cursor:pointer}:host ul[role=listbox] [role=option]:hover,:host ul[role=listbox] [role=option]:focus-visible{background-color:var(--grey-400)}:host ul[role=listbox] [role=option]:active{background-color:var(--grey-400)}:host ul[role=listbox] [role=option]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox] [role=option].active.sg-highlighted,:host ul[role=listbox] [role=option][aria-selected=true]{background:var(--grey-1000);color:#fff}:host .sg-fieldset-container{overflow-y:auto}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option]{display:flex;width:100%}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option].active.sg-highlighted input[type=checkbox]~i{border-color:#007ac7!important;box-shadow:0 0 .25em .0625em #41b0ee;outline-color:transparent;outline-style:solid}:host .gds-dropdown__options{padding-left:0;margin-bottom:0;margin-top:0;display:flex;flex-direction:column;list-style:none;display:none}:host .gds-dropdown__options>li{padding-bottom:.5rem;padding-top:.5rem;border:0;display:block;position:relative}:host .gds-dropdown__options>li:before{font-weight:500;display:inline-block;left:0;position:absolute;text-align:center}:host .gds-dropdown__options-expanded{display:block}:host .gds-dropdown__options__label:hover,:host .gds-dropdown__options__label:focus-visible{background-color:var(--grey-400)}:host .gds-dropdown__options__label:active{background-color:var(--grey-500)}:host .gds-dropdown__options__label:focus-visible{outline-color:#000;outline-offset:-.25rem}:host .gds-dropdown__options__label[aria-hidden=true]{display:none}:host .gds-dropdown__options__label[highlighted]{color:#fff}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: SkipSelf
                 }, {