npm - @sebgroup/green-angular - Versions diffs - 5.12.1 → 5.13.0 - Mend

@sebgroup/green-angular 5.12.1 → 5.13.0

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

Files changed (29) hide show

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

@@ -16,13 +16,25 @@ import { NggvI18nModule } from '@sebgroup/green-angular/src/v-angular/i18n';
  * https://designlibrary.sebgroup.com/components/component-checkbox
  */
 class NggvCheckboxComponent extends NggvBaseControlValueAccessorComponent {
+    get isSmall() {
+        return this.size === 'small';
+    }
+    get isLarge() {
+        return this.size === 'large';
+    }
     constructor(ngControl, translocoScope, cdr) {
         super(ngControl, translocoScope, cdr);
         this.ngControl = ngControl;
         this.translocoScope = translocoScope;
         this.cdr = cdr;
-        /** Special property used for selecting DOM elements during automated UI testing. */
+        /**
+         * Special property used for selecting DOM elements during automated UI testing.
+         */
         this.thook = 'checkbox';
+        /**
+         * Sets the displayed size of the checkbox
+         */
+        this.size = 'large';
         this.optionalLabel = 'Optional';
         this.valueChange = new EventEmitter();
     }
@@ -50,11 +62,11 @@ class NggvCheckboxComponent extends NggvBaseControlValueAccessorComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvCheckboxComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvCheckboxComponent, 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\">\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>\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=\"gds-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    <div\n      class=\"form-info form-info--error\"\n      [attr.for]=\"id + '-checkbox'\"\n      *ngIf=\"invalid && (error || ngControl?.invalid)\"\n    >\n      <span class=\"error-icon\">\n        <gds-icon-triangle-exclamation\n          width=\"16\"\n          height=\"16\"\n          [solid]=\"true\"\n          *nggCoreElement\n        ></gds-icon-triangle-exclamation>\n      </span>\n      <span\n        *ngIf=\"error; else errorsRef\"\n        [attr.data-thook]=\"thook + '-errorlabel'\"\n      >\n        {{ error }}\n      </span>\n      <ng-template #errorsRef>\n        <span\n          *ngIf=\"firstError as error\"\n          [attr.data-thook]=\"thook + '-errorlabel'\"\n        >\n          {{ t('error.field' + error?.code, error?.params) }}\n        </span>\n      </ng-template>\n    </div>\n  </ng-container>\n\n  <!-- CHILDREN -->\n  <ng-content></ng-content>\n</ng-container>\n", styles: [":host{--gds-sys-color-surface: #fff;--gds-ref-pallet-base200: #e8e8e8;--gds-sys-color-base: #333;--gds-sys-shape-corner-small: .125rem;--gds-ref-pallet-base600: hsl(0, 0%, 53%);--gds-sys-color-blue-dark-2: #007ac7;--gds-sys-shape-corner-medium: .25rem;--gds-comp-checkbox-container-height: 1rem;--gds-comp-checkbox-container-width: 1rem;--gds-comp-checkbox-container-color: var(--gds-sys-color-background-primary);--gds-comp-checkbox-container-color-disabled: var(--gds-ref-pallet-base300);--gds-comp-checkbox-border-color: var(--gds-ref-pallet-base900);--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-ref-pallet-base900);--gds-comp-checkbox-border-color-selected: var(--gds-sys-color-text-inverted);--gds-comp-checkbox-border-color-focus: var(--gds-sys-color-dark-blue-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-sys-color-text-primary);position:relative;border-radius:var(--gds-sys-shape-corner-small);background-color:transparent;flex:0 0 auto;height:1rem;width:1rem}:host label.form-control input[type=checkbox]:not(:checked):focus-visible~i{box-shadow:inset 0 0 0 1px var(--gds-sys-color-base-900)}:host label.form-control:hover input[type=checkbox]:not(.disabled,:disabled,:checked,:indeterminate)~i{background-color:var(--gds-sys-color-base-200)}:host label.form-control input[type=checkbox]:checked~i{background-color:var(--gds-sys-color-base-900)}:host label.form-control input[type=checkbox]:indeterminate~i{background-color:var(--gds-sys-color-base-900)}:host label.form-control input[type=checkbox]:indeterminate~i:after{border-bottom:2px solid var(--gds-sys-color-background-primary);border-left:none;transform:scale(1) rotate(0);opacity:1}:host label.form-control:has(input[type=checkbox].is-invalid){border:.0625rem solid var(--gds-sys-color-text-error);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(--gds-sys-color-text-error);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-sys-color-text-inverted);border-left:3px solid var(--gds-sys-color-text-inverted);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;line-height:1.125rem}:host .form-control:has(input:disabled){cursor:not-allowed}:host .form-info{font-weight:500;padding-left:1rem;margin-top:-.25rem}:host .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .form-info--error .error-icon{margin-top:.128rem;align-items:center}:host i:after{box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvCheckboxComponent, selector: "nggv-checkbox", inputs: { thook: "thook", size: "size", optionalLabel: "optionalLabel" }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.data-thook": "this.thook", "class.small": "this.isSmall", "class.large": "this.isLarge" } }, usesInheritance: true, ngImport: i0, template: "<!-- LOCKED INPUT -->\n<div *ngIf=\"locked && state\">\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>\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=\"gds-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    <div\n      class=\"form-info form-info--error\"\n      [attr.for]=\"id + '-checkbox'\"\n      *ngIf=\"invalid && (error || ngControl?.invalid)\"\n    >\n      <span class=\"error-icon\">\n        <gds-icon-triangle-exclamation\n          width=\"16\"\n          height=\"16\"\n          [solid]=\"true\"\n          *nggCoreElement\n        ></gds-icon-triangle-exclamation>\n      </span>\n      <span\n        *ngIf=\"error; else errorsRef\"\n        [attr.data-thook]=\"thook + '-errorlabel'\"\n      >\n        {{ error }}\n      </span>\n      <ng-template #errorsRef>\n        <span\n          *ngIf=\"firstError as error\"\n          [attr.data-thook]=\"thook + '-errorlabel'\"\n        >\n          {{ t('error.field' + error?.code, error?.params) }}\n        </span>\n      </ng-template>\n    </div>\n  </ng-container>\n\n  <!-- CHILDREN -->\n  <ng-content></ng-content>\n</ng-container>\n", styles: [":host{--gds-sys-color-surface: #fff;--gds-ref-pallet-base200: #e8e8e8;--gds-sys-color-base: #333;--gds-sys-shape-corner-small: .125rem;--gds-ref-pallet-base600: hsl(0, 0%, 53%);--gds-sys-color-blue-dark-2: #007ac7;--gds-sys-shape-corner-medium: .25rem;--gds-comp-checkbox-container-height: 1rem;--gds-comp-checkbox-container-width: 1rem;--gds-comp-checkbox-container-color: var(--gds-sys-color-background-primary);--gds-comp-checkbox-container-color-disabled: var(--gds-ref-pallet-base300);--gds-comp-checkbox-border-color: var(--gds-ref-pallet-base900);--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-ref-pallet-base900);--gds-comp-checkbox-border-color-selected: var(--gds-sys-color-text-inverted);--gds-comp-checkbox-border-color-focus: var(--gds-sys-color-dark-blue-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-sys-color-text-primary);position:relative;border-radius:var(--gds-sys-shape-corner-small);background-color:transparent;flex:0 0 auto;height:1rem;width:1rem}:host label.form-control input[type=checkbox]:not(:checked):focus-visible~i{box-shadow:inset 0 0 0 1px var(--gds-sys-color-base-900)}:host label.form-control:hover input[type=checkbox]:not(.disabled,:disabled,:checked,:indeterminate)~i{background-color:var(--gds-sys-color-base-200)}:host label.form-control input[type=checkbox]:checked~i{background-color:var(--gds-sys-color-base-900)}:host label.form-control input[type=checkbox]:indeterminate~i{background-color:var(--gds-sys-color-base-900)}:host label.form-control input[type=checkbox]:indeterminate~i:after{border-bottom:2px solid var(--gds-sys-color-background-primary);border-left:none;transform:scale(1) rotate(0);opacity:1}:host label.form-control:has(input[type=checkbox].is-invalid){border:.0625rem solid var(--gds-sys-color-text-error);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(--gds-sys-color-text-error);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-sys-color-text-inverted);border-left:3px solid var(--gds-sys-color-text-inverted);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;line-height:1.125rem}:host .form-control:has(input:disabled){cursor:not-allowed}:host .form-info{font-weight:500;padding-left:1rem;margin-top:-.25rem}:host .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .form-info--error .error-icon{margin-top:.128rem;align-items:center}:host i:after{box-sizing:border-box}:host.small label.form-control:has(input[type=checkbox]){line-height:1rem;font-size:.875rem;padding:.38rem .5rem}:host.small label.form-control:has(input[type=checkbox]) span{margin-top:.125rem}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvCheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nggv-checkbox', template: "<!-- LOCKED INPUT -->\n<div *ngIf=\"locked && state\">\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>\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=\"gds-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    <div\n      class=\"form-info form-info--error\"\n      [attr.for]=\"id + '-checkbox'\"\n      *ngIf=\"invalid && (error || ngControl?.invalid)\"\n    >\n      <span class=\"error-icon\">\n        <gds-icon-triangle-exclamation\n          width=\"16\"\n          height=\"16\"\n          [solid]=\"true\"\n          *nggCoreElement\n        ></gds-icon-triangle-exclamation>\n      </span>\n      <span\n        *ngIf=\"error; else errorsRef\"\n        [attr.data-thook]=\"thook + '-errorlabel'\"\n      >\n        {{ error }}\n      </span>\n      <ng-template #errorsRef>\n        <span\n          *ngIf=\"firstError as error\"\n          [attr.data-thook]=\"thook + '-errorlabel'\"\n        >\n          {{ t('error.field' + error?.code, error?.params) }}\n        </span>\n      </ng-template>\n    </div>\n  </ng-container>\n\n  <!-- CHILDREN -->\n  <ng-content></ng-content>\n</ng-container>\n", styles: [":host{--gds-sys-color-surface: #fff;--gds-ref-pallet-base200: #e8e8e8;--gds-sys-color-base: #333;--gds-sys-shape-corner-small: .125rem;--gds-ref-pallet-base600: hsl(0, 0%, 53%);--gds-sys-color-blue-dark-2: #007ac7;--gds-sys-shape-corner-medium: .25rem;--gds-comp-checkbox-container-height: 1rem;--gds-comp-checkbox-container-width: 1rem;--gds-comp-checkbox-container-color: var(--gds-sys-color-background-primary);--gds-comp-checkbox-container-color-disabled: var(--gds-ref-pallet-base300);--gds-comp-checkbox-border-color: var(--gds-ref-pallet-base900);--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-ref-pallet-base900);--gds-comp-checkbox-border-color-selected: var(--gds-sys-color-text-inverted);--gds-comp-checkbox-border-color-focus: var(--gds-sys-color-dark-blue-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-sys-color-text-primary);position:relative;border-radius:var(--gds-sys-shape-corner-small);background-color:transparent;flex:0 0 auto;height:1rem;width:1rem}:host label.form-control input[type=checkbox]:not(:checked):focus-visible~i{box-shadow:inset 0 0 0 1px var(--gds-sys-color-base-900)}:host label.form-control:hover input[type=checkbox]:not(.disabled,:disabled,:checked,:indeterminate)~i{background-color:var(--gds-sys-color-base-200)}:host label.form-control input[type=checkbox]:checked~i{background-color:var(--gds-sys-color-base-900)}:host label.form-control input[type=checkbox]:indeterminate~i{background-color:var(--gds-sys-color-base-900)}:host label.form-control input[type=checkbox]:indeterminate~i:after{border-bottom:2px solid var(--gds-sys-color-background-primary);border-left:none;transform:scale(1) rotate(0);opacity:1}:host label.form-control:has(input[type=checkbox].is-invalid){border:.0625rem solid var(--gds-sys-color-text-error);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(--gds-sys-color-text-error);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-sys-color-text-inverted);border-left:3px solid var(--gds-sys-color-text-inverted);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;line-height:1.125rem}:host .form-control:has(input:disabled){cursor:not-allowed}:host .form-info{font-weight:500;padding-left:1rem;margin-top:-.25rem}:host .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .form-info--error .error-icon{margin-top:.128rem;align-items:center}:host i:after{box-sizing:border-box}\n"] }]
+            args: [{ selector: 'nggv-checkbox', template: "<!-- LOCKED INPUT -->\n<div *ngIf=\"locked && state\">\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>\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=\"gds-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    <div\n      class=\"form-info form-info--error\"\n      [attr.for]=\"id + '-checkbox'\"\n      *ngIf=\"invalid && (error || ngControl?.invalid)\"\n    >\n      <span class=\"error-icon\">\n        <gds-icon-triangle-exclamation\n          width=\"16\"\n          height=\"16\"\n          [solid]=\"true\"\n          *nggCoreElement\n        ></gds-icon-triangle-exclamation>\n      </span>\n      <span\n        *ngIf=\"error; else errorsRef\"\n        [attr.data-thook]=\"thook + '-errorlabel'\"\n      >\n        {{ error }}\n      </span>\n      <ng-template #errorsRef>\n        <span\n          *ngIf=\"firstError as error\"\n          [attr.data-thook]=\"thook + '-errorlabel'\"\n        >\n          {{ t('error.field' + error?.code, error?.params) }}\n        </span>\n      </ng-template>\n    </div>\n  </ng-container>\n\n  <!-- CHILDREN -->\n  <ng-content></ng-content>\n</ng-container>\n", styles: [":host{--gds-sys-color-surface: #fff;--gds-ref-pallet-base200: #e8e8e8;--gds-sys-color-base: #333;--gds-sys-shape-corner-small: .125rem;--gds-ref-pallet-base600: hsl(0, 0%, 53%);--gds-sys-color-blue-dark-2: #007ac7;--gds-sys-shape-corner-medium: .25rem;--gds-comp-checkbox-container-height: 1rem;--gds-comp-checkbox-container-width: 1rem;--gds-comp-checkbox-container-color: var(--gds-sys-color-background-primary);--gds-comp-checkbox-container-color-disabled: var(--gds-ref-pallet-base300);--gds-comp-checkbox-border-color: var(--gds-ref-pallet-base900);--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-ref-pallet-base900);--gds-comp-checkbox-border-color-selected: var(--gds-sys-color-text-inverted);--gds-comp-checkbox-border-color-focus: var(--gds-sys-color-dark-blue-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-sys-color-text-primary);position:relative;border-radius:var(--gds-sys-shape-corner-small);background-color:transparent;flex:0 0 auto;height:1rem;width:1rem}:host label.form-control input[type=checkbox]:not(:checked):focus-visible~i{box-shadow:inset 0 0 0 1px var(--gds-sys-color-base-900)}:host label.form-control:hover input[type=checkbox]:not(.disabled,:disabled,:checked,:indeterminate)~i{background-color:var(--gds-sys-color-base-200)}:host label.form-control input[type=checkbox]:checked~i{background-color:var(--gds-sys-color-base-900)}:host label.form-control input[type=checkbox]:indeterminate~i{background-color:var(--gds-sys-color-base-900)}:host label.form-control input[type=checkbox]:indeterminate~i:after{border-bottom:2px solid var(--gds-sys-color-background-primary);border-left:none;transform:scale(1) rotate(0);opacity:1}:host label.form-control:has(input[type=checkbox].is-invalid){border:.0625rem solid var(--gds-sys-color-text-error);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(--gds-sys-color-text-error);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-sys-color-text-inverted);border-left:3px solid var(--gds-sys-color-text-inverted);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;line-height:1.125rem}:host .form-control:has(input:disabled){cursor:not-allowed}:host .form-info{font-weight:500;padding-left:1rem;margin-top:-.25rem}:host .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .form-info--error .error-icon{margin-top:.128rem;align-items:center}:host i:after{box-sizing:border-box}:host.small label.form-control:has(input[type=checkbox]){line-height:1rem;font-size:.875rem;padding:.38rem .5rem}:host.small label.form-control:has(input[type=checkbox]) span{margin-top:.125rem}\n"] }]
         }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -69,6 +81,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 args: ['attr.data-thook']
             }, {
                 type: Input
+            }], isSmall: [{
+                type: HostBinding,
+                args: ['class.small']
+            }], isLarge: [{
+                type: HostBinding,
+                args: ['class.large']
+            }], size: [{
+                type: Input
             }], optionalLabel: [{
                 type: Input
             }], valueChange: [{

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 '@sebgroup/green-core/components/icon/icons/triangle-exclamation.js'\n\nimport {\n ChangeDetectorRef,\n Component,\n EventEmitter,\n HostBinding,\n Inject,\n Input,\n Optional,\n Output,\n Self,\n} from '@angular/core'\nimport { NgControl } from '@angular/forms'\nimport { TRANSLOCO_SCOPE, TranslocoScope } from '@jsverse/transloco'\n\nimport { NggvBaseControlValueAccessorComponent } from '@sebgroup/green-angular/src/v-angular/base-control-value-accessor'\n\n/*\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 NggvCheckboxComponent extends NggvBaseControlValueAccessorComponent {\n /* Special property used for selecting DOM elements during automated UI testing. /\n @HostBinding('attr.data-thook') @Input() thook: string \| null \| undefined =\n '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\">\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>\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=\"gds-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 <div\n class=\"form-info form-info--error\"\n [attr.for]=\"id + '-checkbox'\"\n ngIf=\"invalid && (error \|\| ngControl?.invalid)\"\n >\n <span class=\"error-icon\">\n <gds-icon-triangle-exclamation\n width=\"16\"\n height=\"16\"\n [solid]=\"true\"\n nggCoreElement\n ></gds-icon-triangle-exclamation>\n </span>\n <span\n ngIf=\"error; else errorsRef\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ error }}\n </span>\n <ng-template #errorsRef>\n <span\n ngIf=\"firstError as error\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ t('error.field' + error?.code, error?.params) }}\n </span>\n </ng-template>\n </div>\n </ng-container>\n\n <!-- CHILDREN -->\n <ng-content></ng-content>\n</ng-container>\n","import { CommonModule } from '@angular/common'\nimport { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'\n\nimport { NggCoreWrapperModule } from '@sebgroup/green-angular/src/lib/shared'\nimport { NggvI18nModule } from '@sebgroup/green-angular/src/v-angular/i18n'\nimport { NggvCheckboxComponent } from './checkbox.component'\n\n@NgModule({\n declarations: [NggvCheckboxComponent],\n imports: [CommonModule, NggvI18nModule, NggCoreWrapperModule],\n exports: [NggvCheckboxComponent],\n schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class NggvCheckboxModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;AAkBA;;;AAGG;AAMG,MAAO,qBAAsB,SAAQ,qCAAqC,CAAA;~~AAS9E~~,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;;~~QAdO~~,IAAK,CAAA,KAAA,GAC5C,UAAU,CAAA;~~QACH~~,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;~~AA5CU~~,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,qBAAqB,~~uEActB~~,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;~~AAdd~~,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,qBAAqB,~~4OC3BlC~~,4vFAoGA,EAAA,MAAA,EAAA,CAAA,~~87KAAA~~,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,qBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,uBAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;4FDzEa,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBALjC,SAAS;+BACE,eAAe,EAAA,QAAA,EAAA,4vFAAA,EAAA,MAAA,EAAA,CAAA,~~87KAAA~~,CAAA,EAAA,CAAA;;~~0BActB~~,IAAI;;0BACJ,QAAQ;;0BAER,QAAQ;;0BACR,MAAM;2BAAC,eAAe,CAAA;~~yEAZgB~~,KAAK,EAAA,CAAA;sBAA7C,WAAW;uBAAC,iBAAiB,CAAA;;sBAAG,KAAK;~~gBAE7B~~,aAAa,EAAA,CAAA;sBAArB,KAAK;gBAEa,WAAW,EAAA,CAAA;sBAA7B,MAAM;;;~~MEpBI~~,kBAAkB,CAAA;+GAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA,EAAA;gHAAlB,kBAAkB,EAAA,YAAA,EAAA,CALd,qBAAqB,CAC1B,EAAA,OAAA,EAAA,CAAA,YAAY,EAAE,cAAc,EAAE,oBAAoB,CAAA,EAAA,OAAA,EAAA,CAClD,qBAAqB,CAAA,EAAA,CAAA,CAAA,EAAA;AAGpB,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,kBAAkB,EAJnB,OAAA,EAAA,CAAA,YAAY,EAAE,cAAc,EAAE,oBAAoB,CAAA,EAAA,CAAA,CAAA,EAAA;;4FAIjD,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAN9B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,YAAY,EAAE,CAAC,qBAAqB,CAAC;AACrC,oBAAA,OAAO,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,oBAAoB,CAAC;oBAC7D,OAAO,EAAE,CAAC,qBAAqB,CAAC;oBAChC,OAAO,EAAE,CAAC,sBAAsB,CAAC;AAClC,iBAAA,CAAA;;;ACZD;;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 '@sebgroup/green-core/components/icon/icons/triangle-exclamation.js'\n\nimport {\n ChangeDetectorRef,\n Component,\n EventEmitter,\n HostBinding,\n Inject,\n Input,\n Optional,\n Output,\n Self,\n} from '@angular/core'\nimport { NgControl } from '@angular/forms'\nimport { TRANSLOCO_SCOPE, TranslocoScope } from '@jsverse/transloco'\n\nimport { NggvBaseControlValueAccessorComponent } from '@sebgroup/green-angular/src/v-angular/base-control-value-accessor'\n\n/*\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 NggvCheckboxComponent extends NggvBaseControlValueAccessorComponent {\n /\n Special property used for selecting DOM elements during automated UI testing.\n /\n @HostBinding('attr.data-thook') @Input() thook: string \| null \| undefined =\n 'checkbox'\n\n @HostBinding('class.small') get isSmall(): boolean {\n return this.size === 'small'\n }\n\n @HostBinding('class.large') get isLarge(): boolean {\n return this.size === 'large'\n }\n\n /\n Sets the displayed size of the checkbox\n /\n @Input() size: 'small' \| 'large' = 'large'\n\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\">\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>\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=\"gds-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 <div\n class=\"form-info form-info--error\"\n [attr.for]=\"id + '-checkbox'\"\n ngIf=\"invalid && (error \|\| ngControl?.invalid)\"\n >\n <span class=\"error-icon\">\n <gds-icon-triangle-exclamation\n width=\"16\"\n height=\"16\"\n [solid]=\"true\"\n nggCoreElement\n ></gds-icon-triangle-exclamation>\n </span>\n <span\n ngIf=\"error; else errorsRef\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ error }}\n </span>\n <ng-template #errorsRef>\n <span\n ngIf=\"firstError as error\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ t('error.field' + error?.code, error?.params) }}\n </span>\n </ng-template>\n </div>\n </ng-container>\n\n <!-- CHILDREN -->\n <ng-content></ng-content>\n</ng-container>\n","import { CommonModule } from '@angular/common'\nimport { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'\n\nimport { NggCoreWrapperModule } from '@sebgroup/green-angular/src/lib/shared'\nimport { NggvI18nModule } from '@sebgroup/green-angular/src/v-angular/i18n'\nimport { NggvCheckboxComponent } from './checkbox.component'\n\n@NgModule({\n declarations: [NggvCheckboxComponent],\n imports: [CommonModule, NggvI18nModule, NggCoreWrapperModule],\n exports: [NggvCheckboxComponent],\n schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class NggvCheckboxModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;AAkBA;;;AAGG;AAMG,MAAO,qBAAsB,SAAQ,qCAAqC,CAAA;AAO9E,IAAA,IAAgC,OAAO,GAAA;AACrC,QAAA,OAAO,IAAI,CAAC,IAAI,KAAK,OAAO,CAAA;KAC7B;AAED,IAAA,IAAgC,OAAO,GAAA;AACrC,QAAA,OAAO,IAAI,CAAC,IAAI,KAAK,OAAO,CAAA;KAC7B;AAYD,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;AA/BlC;;AAEG;QACsC,IAAK,CAAA,KAAA,GAC5C,UAAU,CAAA;AAUZ;;AAEG;QACM,IAAI,CAAA,IAAA,GAAsB,OAAO,CAAA;QAEjC,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;AA5DU,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,qBAAqB,uEA8BtB,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;AA9Bd,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,qBAAqB,wTC3BlC,4vFAoGA,EAAA,MAAA,EAAA,CAAA,goLAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,qBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,uBAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;4FDzEa,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBALjC,SAAS;+BACE,eAAe,EAAA,QAAA,EAAA,4vFAAA,EAAA,MAAA,EAAA,CAAA,goLAAA,CAAA,EAAA,CAAA;;0BA8BtB,IAAI;;0BACJ,QAAQ;;0BAER,QAAQ;;0BACR,MAAM;2BAAC,eAAe,CAAA;yEA1BgB,KAAK,EAAA,CAAA;sBAA7C,WAAW;uBAAC,iBAAiB,CAAA;;sBAAG,KAAK;gBAGN,OAAO,EAAA,CAAA;sBAAtC,WAAW;uBAAC,aAAa,CAAA;gBAIM,OAAO,EAAA,CAAA;sBAAtC,WAAW;uBAAC,aAAa,CAAA;gBAOjB,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBAEG,aAAa,EAAA,CAAA;sBAArB,KAAK;gBAEa,WAAW,EAAA,CAAA;sBAA7B,MAAM;;;MEpCI,kBAAkB,CAAA;+GAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA,EAAA;gHAAlB,kBAAkB,EAAA,YAAA,EAAA,CALd,qBAAqB,CAC1B,EAAA,OAAA,EAAA,CAAA,YAAY,EAAE,cAAc,EAAE,oBAAoB,CAAA,EAAA,OAAA,EAAA,CAClD,qBAAqB,CAAA,EAAA,CAAA,CAAA,EAAA;AAGpB,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,kBAAkB,EAJnB,OAAA,EAAA,CAAA,YAAY,EAAE,cAAc,EAAE,oBAAoB,CAAA,EAAA,CAAA,CAAA,EAAA;;4FAIjD,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAN9B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,YAAY,EAAE,CAAC,qBAAqB,CAAC;AACrC,oBAAA,OAAO,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,oBAAoB,CAAC;oBAC7D,OAAO,EAAE,CAAC,qBAAqB,CAAC;oBAChC,OAAO,EAAE,CAAC,sBAAsB,CAAC;AAClC,iBAAA,CAAA;;;ACZD;;AAEG;;;;"}

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

@@ -1533,6 +1533,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * https://jsverse.github.io/transloco/docs/plugins/locale/#setup
  */
 class DateInputComponent extends DateControlValueAccessorComponent {
+    get isSmall() {
+        return this.size === 'small';
+    }
+    get isLarge() {
+        return this.size === 'large';
+    }
     constructor(ngControl, translocoScope, transloco, elementRef, cdr) {
         super(ngControl, translocoScope, elementRef, cdr, transloco);
         this.ngControl = ngControl;
@@ -1562,6 +1568,10 @@ class DateInputComponent extends DateControlValueAccessorComponent {
         this.firstDayOfWeek = WeekDay.Monday;
         /** If set to true, it will allow to close the calendar on escape button click. */
         this.closeCalendarOnEscape = true;
+        /**
+         * Sets the displayed size of the date input field.
+         */
+        this.size = 'large';
         /** @internal */
         // calendarIcon: IconDefinition = faCalendarDays;
         /** @internal */
@@ -1655,11 +1665,11 @@ class DateInputComponent extends DateControlValueAccessorComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateInputComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i2.TranslocoService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DateInputComponent, selector: "nggv-dateinput,nggv-input[type=date]", inputs: { thook: "thook", type: "type", readonly: "readonly", disableDates: "disableDates", disableWeekDays: "disableWeekDays", minRows: "minRows", firstValid: "firstValid", lastValid: "lastValid", closingTime: "closingTime", firstDayOfWeek: "firstDayOfWeek", closeCalendarOnEscape: "closeCalendarOnEscape" }, host: { listeners: { "keydown": "keyListener($event)" }, properties: { "attr.data-thook": "this.thook" } }, viewQueries: [{ propertyName: "toggleButtonRef", first: true, predicate: ["toggleCalendarButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- LABEL -->\n<ng-container *transloco=\"let t; read: scope\">\n  <label\n    [id]=\"id + '-label'\"\n    class=\"gds-field-label hide-if-empty\"\n    [attr.for]=\"id + '-input'\"\n  >\n    <ng-template\n      *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n    ></ng-template>\n    <ng-template #basicLabelContentTpl>\n      <!-- to trigger css:empty if no label was added -->\n      <ng-container *ngIf=\"label\">\n        {{ label }}\n        <span\n          *ngIf=\"optional === true || (required !== true && optional !== false)\"\n          class=\"gds-field-label--optional\"\n        >\n          ({{ t('label.optional') }})\n        </span>\n      </ng-container>\n    </ng-template>\n  </label>\n\n  <!-- DESCRIPTION -->\n  <div\n    class=\"gds-field-label--small description hide-if-empty\"\n    *ngIf=\"description\"\n  >\n    {{ description }}\n  </div>\n\n  <!-- LOCKED INPUT -->\n  <ng-container *ngIf=\"locked\">\n    <ng-template\n      *ngTemplateOutlet=\"\n        lockedTpl || defaultLockedTpl;\n        context: { $implicit: state }\n      \"\n    ></ng-template>\n    <ng-template #defaultLockedTpl>\n      <div\n        [id]=\"id + '-input'\"\n        class=\"nggv-field--locked\"\n        [attr.name]=\"name\"\n        [attr.value]=\"state\"\n        [attr.role]=\"role\"\n      >\n        <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n        <ng-container *ngIf=\"state\">\n          {{ state | nggvInputMaskFormat: dateInputMask }}\n        </ng-container>\n      </div>\n    </ng-template>\n  </ng-container>\n\n  <!-- INPUT WRAPPER -->\n  <ng-container *ngIf=\"!locked\">\n    <div\n      class=\"field-wrap\"\n      [class.nggv-field--error]=\"invalid\"\n      *ngIf=\"showInput$ | async\"\n    >\n      <!-- INPUT FIELD -->\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"nggv-field-date\"\n        type=\"text\"\n        autocomplete=\"off\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required\"\n        [disabled]=\"disabled\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [nggvInputMask]=\"dateInputMask\"\n        [value]=\"state\"\n        title=\"\"\n        (change)=\"onValueChange($event.target)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n\n      <button\n        aria-label=\"toggle calendar\"\n        #toggleCalendarButton\n        class=\"nggv-button-date\"\n        type=\"button\"\n        data-thook=\"toggle-calendar-button\"\n        (click)=\"toggleDatepicker()\"\n        [disabled]=\"disabled\"\n      >\n        <gds-icon-calendar\n          *nggCoreElement\n          width=\"20\"\n          height=\"20\"\n        ></gds-icon-calendar>\n      </button>\n    </div>\n\n    <!-- DATEPICKER -->\n    <div class=\"nggv-datepicker\" *ngIf=\"shown\">\n      <nggv-datepicker\n        #input\n        [type]=\"type\"\n        [disableDates]=\"disableDates\"\n        [disableWeekDays]=\"disableWeekDays\"\n        [selected]=\"state\"\n        [locale]=\"locale\"\n        [minCalendarRows]=\"minRows\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [firstValid]=\"firstValid\"\n        [lastValid]=\"lastValid\"\n        [closingTime]=\"closingTime\"\n        (ngvDateChange)=\"onDateChange($event)\"\n      >\n        <ng-content></ng-content>\n      </nggv-datepicker>\n    </div>\n\n    <!-- ERRORS -->\n    <ng-container\n      *ngIf=\"\n        invalid &&\n        (error || ngControl?.invalid) &&\n        (!errorList || !errorList.length)\n      \"\n    >\n      <label\n        class=\"gds-field-notice gds-field-notice--error\"\n        [attr.for]=\"id + '-input'\"\n      >\n        <span class=\"error-item\">\n          <span class=\"error-item--icon\">\n            <gds-icon-triangle-exclamation\n              *nggCoreElement\n              [solid]=\"true\"\n              width=\"16\"\n              height=\"16\"\n            ></gds-icon-triangle-exclamation>\n          </span>\n          <span\n            *ngIf=\"error; else errorsRef\"\n            class=\"error-item--text\"\n            [attr.data-thook]=\"thook + '-errorlabel'\"\n            >{{ error }}</span\n          >\n          <ng-template #errorsRef>\n            <span\n              *ngIf=\"firstError as error\"\n              class=\"error-item--text\"\n              [attr.data-thook]=\"thook + '-errorlabel'\"\n            >\n              {{ t('error.field' + error?.code, error?.params) }}\n            </span>\n          </ng-template>\n        </span>\n      </label>\n    </ng-container>\n\n    <ng-container *ngFor=\"let error of errorList ?? []\">\n      <label\n        class=\"gds-field-notice gds-field-notice--error\"\n        [attr.for]=\"id + '-input'\"\n        *ngIf=\"invalid && error\"\n      >\n        <span class=\"error-item\">\n          <span class=\"error-item--icon\">\n            <gds-icon-triangle-exclamation\n              *nggCoreElement\n              [solid]=\"true\"\n              width=\"16\"\n              height=\"16\"\n            ></gds-icon-triangle-exclamation>\n          </span>\n          <span\n            class=\"error-item--text\"\n            [attr.data-thook]=\"thook + '-errorlabel'\"\n            >{{ error }}</span\n          >\n        </span>\n      </label>\n    </ng-container>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:block;position:relative}@media (max-width: 47.98em){:host{min-width:100%}}:host .hide-if-empty:empty{display:none}:host .unset-state{padding-left:.5rem}:host .gds-field-label{display:block}:host .gds-field-label:is(label){margin-bottom:0}:host .gds-field-label.form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label.form-control:focus,:host .gds-field-label.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host .gds-field-label:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host .gds-field-label+input,:host .gds-field-label+textarea,fieldset :host .gds-field-label+div,:host .gds-field-label+button,:host .gds-field-label+.group-stepper,:host .gds-field-label+.stepper-wrapper,:host .gds-field-label+.group{margin-top:.5rem}:host .gds-field-label+.form-info{margin-bottom:.5rem}:host label+.field-wrap,:host label+.nggv-field--locked{margin-top:.5rem}:host .description{font-size:.875rem;margin-bottom:.5rem;line-height:1.25rem;width:100%}:host .gds-field-label--optional:is(label){margin-bottom:0}:host .gds-field-label--optional.form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label--optional.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label--optional.form-control:focus,:host .gds-field-label--optional.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host .gds-field-label--optional:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host .gds-field-label--optional+input,:host .gds-field-label--optional+textarea,fieldset :host .gds-field-label--optional+div,:host .gds-field-label--optional+button,:host .gds-field-label--optional+.group-stepper,:host .gds-field-label--optional+.stepper-wrapper,:host .gds-field-label--optional+.group{margin-top:.5rem}:host .gds-field-label--optional+.form-info{margin-bottom:.5rem}:host .nggv-datepicker{margin-top:.25rem;position:absolute}:host .nggv-field--error{border-bottom:.125rem solid #9f000a!important}:host .nggv-field--error:focus,:host .nggv-field--error:active,:host .nggv-field--error:hover{border-bottom:.125rem solid #9f000a!important}:host .error-item{display:flex;gap:.5rem;color:#9f000a}:host .gds-field-notice{margin-top:.5rem;display:block;font-size:.875rem;line-height:1;font-weight:500}:host .field-wrap{border:1px solid #868686;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit;height:2.625rem;display:flex}:host .field-wrap *,:host .field-wrap *:before,:host .field-wrap *:after{box-sizing:border-box}:host .field-wrap .nggv-button-date{--text-disabled-color: #adadad;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500;min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center;transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;border-color:#333;color:#333;--color: rgb(51, 51, 51);background-color:transparent;min-height:2.5rem;border:none;border-radius:3px;width:2.625rem;height:2.625rem;min-width:2.625rem;border-top-left-radius:0!important;border-bottom-left-radius:0!important;text-align:right}:host .field-wrap .nggv-button-date:focus:not(:focus-visible){box-shadow:none;outline:0}:host .field-wrap .nggv-button-date:focus,:host .field-wrap .nggv-button-date:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host .field-wrap .nggv-button-date{min-width:100%}}@media screen and (-ms-high-contrast: active){:host .field-wrap .nggv-button-date{border:2px solid currentcolor}}:host .field-wrap .nggv-button-date.small{min-height:2rem;padding:.4375rem .75rem;line-height:1rem}:host .field-wrap .nggv-button-date.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .field-wrap .nggv-button-date:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .field-wrap .nggv-button-date[aria-selected=true],:host .field-wrap .nggv-button-date:active,:host .field-wrap .nggv-button-date.active,:host .field-wrap .nggv-button-date.active:hover,:host .field-wrap .nggv-button-date:active:hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .field-wrap .nggv-button-date[aria-selected]:hover,:host .field-wrap .nggv-button-date.active:hover,:host .field-wrap .nggv-button-date:active:hover{opacity:.9}:host .field-wrap .nggv-button-date:focus-visible{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333!important}:host .field-wrap .nggv-button-date:disabled,:host .field-wrap .nggv-button-date.disabled,:host .field-wrap .nggv-button-date[aria-disabled=true]{color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .field-wrap .nggv-button-date:disabled::placeholder,:host .field-wrap .nggv-button-date.disabled::placeholder,:host .field-wrap .nggv-button-date[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}@media (max-width: 47.98em){:host .field-wrap .nggv-button-date{width:2.625rem;height:2.625rem}}:host .field-wrap .nggv-button-date:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-button-date[disabled]{background-color:#f8f8f8!important;color:#adadad}@media (max-width: 35.98em){:host .field-wrap .nggv-button-date{min-width:initial}}:host .field-wrap input[type=text]::-webkit-inner-spin-button,:host .field-wrap input[type=text]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none;font-size:1rem;font-family:inherit}:host .field-wrap .nggv-field-date{border:1px solid #cecece;border-radius:4px 0 0 4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit;border:none;min-height:2.375rem;width:100%;padding-left:1rem}:host .field-wrap .nggv-field-date *,:host .field-wrap .nggv-field-date *:before,:host .field-wrap .nggv-field-date *:after{box-sizing:border-box}:host .field-wrap .nggv-field-date:hover{border-color:#41b0ee}:host .field-wrap .nggv-field-date:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-field-date:active{border-color:#cecece}:host .field-wrap .nggv-field-date[disabled]{background-color:#f8f8f8;border-color:#cecece}:host .field-wrap .nggv-field-date[disabled]::placeholder{color:#cecece}:host .field-wrap .nggv-field-date:not(:focus){border-right:none;padding-right:0}:host .field-wrap .nggv-field-date:focus{padding-right:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i4.NggvInputMaskDirective, selector: "[nggvInputMask]", inputs: ["nggvInputMask"] }, { kind: "directive", type: i3.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "component", type: DatepickerComponent, selector: "nggv-datepicker", inputs: ["firstDayOfWeek", "disableDates", "disableWeekDays", "minCalendarRows", "selected", "locale", "type", "firstValid", "lastValid", "closingTime"], outputs: ["ngvDateChange"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.InputMaskFormatPipe, name: "nggvInputMaskFormat" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DateInputComponent, selector: "nggv-dateinput,nggv-input[type=date]", inputs: { thook: "thook", type: "type", readonly: "readonly", disableDates: "disableDates", disableWeekDays: "disableWeekDays", minRows: "minRows", firstValid: "firstValid", lastValid: "lastValid", closingTime: "closingTime", firstDayOfWeek: "firstDayOfWeek", closeCalendarOnEscape: "closeCalendarOnEscape", size: "size" }, host: { listeners: { "keydown": "keyListener($event)" }, properties: { "attr.data-thook": "this.thook", "class.small": "this.isSmall", "class.large": "this.isLarge" } }, viewQueries: [{ propertyName: "toggleButtonRef", first: true, predicate: ["toggleCalendarButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- LABEL -->\n<ng-container *transloco=\"let t; read: scope\">\n  <label\n    [id]=\"id + '-label'\"\n    class=\"gds-field-label hide-if-empty\"\n    [attr.for]=\"id + '-input'\"\n  >\n    <ng-template\n      *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n    ></ng-template>\n    <ng-template #basicLabelContentTpl>\n      <!-- to trigger css:empty if no label was added -->\n      <ng-container *ngIf=\"label\">\n        {{ label }}\n        <span\n          *ngIf=\"optional === true || (required !== true && optional !== false)\"\n          class=\"gds-field-label--optional\"\n        >\n          ({{ t('label.optional') }})\n        </span>\n      </ng-container>\n    </ng-template>\n  </label>\n\n  <!-- DESCRIPTION -->\n  <div\n    class=\"gds-field-label--small description hide-if-empty\"\n    *ngIf=\"description\"\n  >\n    {{ description }}\n  </div>\n\n  <!-- LOCKED INPUT -->\n  <ng-container *ngIf=\"locked\">\n    <ng-template\n      *ngTemplateOutlet=\"\n        lockedTpl || defaultLockedTpl;\n        context: { $implicit: state }\n      \"\n    ></ng-template>\n    <ng-template #defaultLockedTpl>\n      <div\n        [id]=\"id + '-input'\"\n        class=\"nggv-field--locked\"\n        [attr.name]=\"name\"\n        [attr.value]=\"state\"\n        [attr.role]=\"role\"\n      >\n        <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n        <ng-container *ngIf=\"state\">\n          {{ state | nggvInputMaskFormat: dateInputMask }}\n        </ng-container>\n      </div>\n    </ng-template>\n  </ng-container>\n\n  <!-- INPUT WRAPPER -->\n  <ng-container *ngIf=\"!locked\">\n    <div\n      class=\"field-wrap\"\n      [class.nggv-field--error]=\"invalid\"\n      *ngIf=\"showInput$ | async\"\n    >\n      <!-- INPUT FIELD -->\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"nggv-field-date\"\n        type=\"text\"\n        autocomplete=\"off\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required\"\n        [disabled]=\"disabled\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [nggvInputMask]=\"dateInputMask\"\n        [value]=\"state\"\n        title=\"\"\n        (change)=\"onValueChange($event.target)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n\n      <button\n        aria-label=\"toggle calendar\"\n        #toggleCalendarButton\n        class=\"nggv-button-date\"\n        type=\"button\"\n        data-thook=\"toggle-calendar-button\"\n        (click)=\"toggleDatepicker()\"\n        [disabled]=\"disabled\"\n      >\n        @if (size === 'small') {\n          <gds-icon-calendar *nggCoreElement size=\"16px\"></gds-icon-calendar>\n        }\n\n        @if (size === 'large') {\n          <gds-icon-calendar *nggCoreElement size=\"20px\"></gds-icon-calendar>\n        }\n      </button>\n    </div>\n\n    <!-- DATEPICKER -->\n    <div class=\"nggv-datepicker\" *ngIf=\"shown\">\n      <nggv-datepicker\n        #input\n        [type]=\"type\"\n        [disableDates]=\"disableDates\"\n        [disableWeekDays]=\"disableWeekDays\"\n        [selected]=\"state\"\n        [locale]=\"locale\"\n        [minCalendarRows]=\"minRows\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [firstValid]=\"firstValid\"\n        [lastValid]=\"lastValid\"\n        [closingTime]=\"closingTime\"\n        (ngvDateChange)=\"onDateChange($event)\"\n      >\n        <ng-content></ng-content>\n      </nggv-datepicker>\n    </div>\n\n    <!-- ERRORS -->\n    <ng-container\n      *ngIf=\"\n        invalid &&\n        (error || ngControl?.invalid) &&\n        (!errorList || !errorList.length)\n      \"\n    >\n      <label\n        class=\"gds-field-notice gds-field-notice--error\"\n        [attr.for]=\"id + '-input'\"\n      >\n        <span class=\"error-item\">\n          <span class=\"error-item--icon\">\n            <gds-icon-triangle-exclamation\n              *nggCoreElement\n              [solid]=\"true\"\n              size=\"16px\"\n            ></gds-icon-triangle-exclamation>\n          </span>\n          <span\n            *ngIf=\"error; else errorsRef\"\n            class=\"error-item--text\"\n            [attr.data-thook]=\"thook + '-errorlabel'\"\n            >{{ error }}</span\n          >\n          <ng-template #errorsRef>\n            <span\n              *ngIf=\"firstError as error\"\n              class=\"error-item--text\"\n              [attr.data-thook]=\"thook + '-errorlabel'\"\n            >\n              {{ t('error.field' + error?.code, error?.params) }}\n            </span>\n          </ng-template>\n        </span>\n      </label>\n    </ng-container>\n    <ng-container *ngFor=\"let error of errorList ?? []\">\n      <label\n        class=\"gds-field-notice gds-field-notice--error\"\n        [attr.for]=\"id + '-input'\"\n        *ngIf=\"invalid && error\"\n      >\n        <span class=\"error-item\">\n          <span class=\"error-item--icon\">\n            <gds-icon-triangle-exclamation\n              *nggCoreElement\n              [solid]=\"true\"\n              size=\"16px\"\n            ></gds-icon-triangle-exclamation>\n          </span>\n          <span\n            class=\"error-item--text\"\n            [attr.data-thook]=\"thook + '-errorlabel'\"\n            >{{ error }}</span\n          >\n        </span>\n      </label>\n    </ng-container>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:block;position:relative}@media (max-width: 47.98em){:host{min-width:100%}}:host .hide-if-empty:empty{display:none}:host .unset-state{padding-left:.5rem}:host .gds-field-label{display:block}:host .gds-field-label:is(label){margin-bottom:0}:host .gds-field-label.form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label.form-control:focus,:host .gds-field-label.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host .gds-field-label:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host .gds-field-label+input,:host .gds-field-label+textarea,fieldset :host .gds-field-label+div,:host .gds-field-label+button,:host .gds-field-label+.group-stepper,:host .gds-field-label+.stepper-wrapper,:host .gds-field-label+.group{margin-top:.5rem}:host .gds-field-label+.form-info{margin-bottom:.5rem}:host label+.field-wrap,:host label+.nggv-field--locked{margin-top:.5rem}:host .description{font-size:.875rem;margin-bottom:.5rem;line-height:1.25rem;width:100%}:host .gds-field-label--optional:is(label){margin-bottom:0}:host .gds-field-label--optional.form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label--optional.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label--optional.form-control:focus,:host .gds-field-label--optional.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host .gds-field-label--optional:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host .gds-field-label--optional+input,:host .gds-field-label--optional+textarea,fieldset :host .gds-field-label--optional+div,:host .gds-field-label--optional+button,:host .gds-field-label--optional+.group-stepper,:host .gds-field-label--optional+.stepper-wrapper,:host .gds-field-label--optional+.group{margin-top:.5rem}:host .gds-field-label--optional+.form-info{margin-bottom:.5rem}:host .nggv-datepicker{margin-top:.25rem;position:absolute}:host .nggv-field--error{border-bottom:.125rem solid #9f000a!important}:host .nggv-field--error:focus,:host .nggv-field--error:active,:host .nggv-field--error:hover{border-bottom:.125rem solid #9f000a!important}:host .error-item{display:flex;gap:.5rem;color:#9f000a}:host .gds-field-notice{margin-top:.5rem;display:block;font-size:.875rem;line-height:1;font-weight:500}:host .field-wrap{border:1px solid #868686;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit;height:2.625rem;display:flex}:host .field-wrap *,:host .field-wrap *:before,:host .field-wrap *:after{box-sizing:border-box}:host .field-wrap .nggv-button-date{--text-disabled-color: #adadad;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500;min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center;transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;border-color:#333;color:#333;--color: rgb(51, 51, 51);background-color:transparent;min-height:2.5rem;border:none;border-radius:3px;width:2.625rem;height:2.625rem;min-width:2.625rem;border-top-left-radius:0!important;border-bottom-left-radius:0!important;text-align:right}:host .field-wrap .nggv-button-date:focus:not(:focus-visible){box-shadow:none;outline:0}:host .field-wrap .nggv-button-date:focus,:host .field-wrap .nggv-button-date:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host .field-wrap .nggv-button-date{min-width:100%}}@media screen and (-ms-high-contrast: active){:host .field-wrap .nggv-button-date{border:2px solid currentcolor}}:host .field-wrap .nggv-button-date.small{min-height:2rem;padding:.4375rem .75rem;line-height:1rem}:host .field-wrap .nggv-button-date.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .field-wrap .nggv-button-date:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .field-wrap .nggv-button-date[aria-selected=true],:host .field-wrap .nggv-button-date:active,:host .field-wrap .nggv-button-date.active,:host .field-wrap .nggv-button-date.active:hover,:host .field-wrap .nggv-button-date:active:hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .field-wrap .nggv-button-date[aria-selected]:hover,:host .field-wrap .nggv-button-date.active:hover,:host .field-wrap .nggv-button-date:active:hover{opacity:.9}:host .field-wrap .nggv-button-date:focus-visible{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333!important}:host .field-wrap .nggv-button-date:disabled,:host .field-wrap .nggv-button-date.disabled,:host .field-wrap .nggv-button-date[aria-disabled=true]{color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .field-wrap .nggv-button-date:disabled::placeholder,:host .field-wrap .nggv-button-date.disabled::placeholder,:host .field-wrap .nggv-button-date[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}@media (max-width: 47.98em){:host .field-wrap .nggv-button-date{width:2.625rem;height:2.625rem}}:host .field-wrap .nggv-button-date:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-button-date[disabled]{background-color:#f8f8f8!important;color:#adadad}@media (max-width: 35.98em){:host .field-wrap .nggv-button-date{min-width:initial}}:host .field-wrap input[type=text]::-webkit-inner-spin-button,:host .field-wrap input[type=text]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none;font-size:1rem;font-family:inherit}:host .field-wrap .nggv-field-date{border:1px solid #cecece;border-radius:4px 0 0 4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit;border:none;min-height:2.375rem;width:100%;padding-left:1rem}:host .field-wrap .nggv-field-date *,:host .field-wrap .nggv-field-date *:before,:host .field-wrap .nggv-field-date *:after{box-sizing:border-box}:host .field-wrap .nggv-field-date:hover{border-color:#41b0ee}:host .field-wrap .nggv-field-date:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-field-date:active{border-color:#cecece}:host .field-wrap .nggv-field-date[disabled]{background-color:#f8f8f8;border-color:#cecece}:host .field-wrap .nggv-field-date[disabled]::placeholder{color:#cecece}:host .field-wrap .nggv-field-date:not(:focus){border-right:none;padding-right:0}:host .field-wrap .nggv-field-date:focus{padding-right:0}:host.small .gds-field-label{font-size:.875rem;line-height:1rem}:host.small label+.field-wrap{margin-top:.25rem}:host.small .field-wrap{height:calc(2rem + 2px);min-height:calc(2rem + 2px)}:host.small .field-wrap .nggv-field-date{padding:.38rem .5rem;line-height:1rem;min-height:2rem;font-size:.875rem}:host.small .field-wrap .nggv-button-date{min-height:2rem;min-width:2rem;width:2rem;height:2rem;padding:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i4.NggvInputMaskDirective, selector: "[nggvInputMask]", inputs: ["nggvInputMask"] }, { kind: "directive", type: i3.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "component", type: DatepickerComponent, selector: "nggv-datepicker", inputs: ["firstDayOfWeek", "disableDates", "disableWeekDays", "minCalendarRows", "selected", "locale", "type", "firstValid", "lastValid", "closingTime"], outputs: ["ngvDateChange"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.InputMaskFormatPipe, name: "nggvInputMaskFormat" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nggv-dateinput,nggv-input[type=date]', template: "<!-- LABEL -->\n<ng-container *transloco=\"let t; read: scope\">\n  <label\n    [id]=\"id + '-label'\"\n    class=\"gds-field-label hide-if-empty\"\n    [attr.for]=\"id + '-input'\"\n  >\n    <ng-template\n      *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n    ></ng-template>\n    <ng-template #basicLabelContentTpl>\n      <!-- to trigger css:empty if no label was added -->\n      <ng-container *ngIf=\"label\">\n        {{ label }}\n        <span\n          *ngIf=\"optional === true || (required !== true && optional !== false)\"\n          class=\"gds-field-label--optional\"\n        >\n          ({{ t('label.optional') }})\n        </span>\n      </ng-container>\n    </ng-template>\n  </label>\n\n  <!-- DESCRIPTION -->\n  <div\n    class=\"gds-field-label--small description hide-if-empty\"\n    *ngIf=\"description\"\n  >\n    {{ description }}\n  </div>\n\n  <!-- LOCKED INPUT -->\n  <ng-container *ngIf=\"locked\">\n    <ng-template\n      *ngTemplateOutlet=\"\n        lockedTpl || defaultLockedTpl;\n        context: { $implicit: state }\n      \"\n    ></ng-template>\n    <ng-template #defaultLockedTpl>\n      <div\n        [id]=\"id + '-input'\"\n        class=\"nggv-field--locked\"\n        [attr.name]=\"name\"\n        [attr.value]=\"state\"\n        [attr.role]=\"role\"\n      >\n        <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n        <ng-container *ngIf=\"state\">\n          {{ state | nggvInputMaskFormat: dateInputMask }}\n        </ng-container>\n      </div>\n    </ng-template>\n  </ng-container>\n\n  <!-- INPUT WRAPPER -->\n  <ng-container *ngIf=\"!locked\">\n    <div\n      class=\"field-wrap\"\n      [class.nggv-field--error]=\"invalid\"\n      *ngIf=\"showInput$ | async\"\n    >\n      <!-- INPUT FIELD -->\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"nggv-field-date\"\n        type=\"text\"\n        autocomplete=\"off\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required\"\n        [disabled]=\"disabled\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [nggvInputMask]=\"dateInputMask\"\n        [value]=\"state\"\n        title=\"\"\n        (change)=\"onValueChange($event.target)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n\n      <button\n        aria-label=\"toggle calendar\"\n        #toggleCalendarButton\n        class=\"nggv-button-date\"\n        type=\"button\"\n        data-thook=\"toggle-calendar-button\"\n        (click)=\"toggleDatepicker()\"\n        [disabled]=\"disabled\"\n      >\n        <gds-icon-calendar\n          *nggCoreElement\n          width=\"20\"\n          height=\"20\"\n        ></gds-icon-calendar>\n      </button>\n    </div>\n\n    <!-- DATEPICKER -->\n    <div class=\"nggv-datepicker\" *ngIf=\"shown\">\n      <nggv-datepicker\n        #input\n        [type]=\"type\"\n        [disableDates]=\"disableDates\"\n        [disableWeekDays]=\"disableWeekDays\"\n        [selected]=\"state\"\n        [locale]=\"locale\"\n        [minCalendarRows]=\"minRows\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [firstValid]=\"firstValid\"\n        [lastValid]=\"lastValid\"\n        [closingTime]=\"closingTime\"\n        (ngvDateChange)=\"onDateChange($event)\"\n      >\n        <ng-content></ng-content>\n      </nggv-datepicker>\n    </div>\n\n    <!-- ERRORS -->\n    <ng-container\n      *ngIf=\"\n        invalid &&\n        (error || ngControl?.invalid) &&\n        (!errorList || !errorList.length)\n      \"\n    >\n      <label\n        class=\"gds-field-notice gds-field-notice--error\"\n        [attr.for]=\"id + '-input'\"\n      >\n        <span class=\"error-item\">\n          <span class=\"error-item--icon\">\n            <gds-icon-triangle-exclamation\n              *nggCoreElement\n              [solid]=\"true\"\n              width=\"16\"\n              height=\"16\"\n            ></gds-icon-triangle-exclamation>\n          </span>\n          <span\n            *ngIf=\"error; else errorsRef\"\n            class=\"error-item--text\"\n            [attr.data-thook]=\"thook + '-errorlabel'\"\n            >{{ error }}</span\n          >\n          <ng-template #errorsRef>\n            <span\n              *ngIf=\"firstError as error\"\n              class=\"error-item--text\"\n              [attr.data-thook]=\"thook + '-errorlabel'\"\n            >\n              {{ t('error.field' + error?.code, error?.params) }}\n            </span>\n          </ng-template>\n        </span>\n      </label>\n    </ng-container>\n\n    <ng-container *ngFor=\"let error of errorList ?? []\">\n      <label\n        class=\"gds-field-notice gds-field-notice--error\"\n        [attr.for]=\"id + '-input'\"\n        *ngIf=\"invalid && error\"\n      >\n        <span class=\"error-item\">\n          <span class=\"error-item--icon\">\n            <gds-icon-triangle-exclamation\n              *nggCoreElement\n              [solid]=\"true\"\n              width=\"16\"\n              height=\"16\"\n            ></gds-icon-triangle-exclamation>\n          </span>\n          <span\n            class=\"error-item--text\"\n            [attr.data-thook]=\"thook + '-errorlabel'\"\n            >{{ error }}</span\n          >\n        </span>\n      </label>\n    </ng-container>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:block;position:relative}@media (max-width: 47.98em){:host{min-width:100%}}:host .hide-if-empty:empty{display:none}:host .unset-state{padding-left:.5rem}:host .gds-field-label{display:block}:host .gds-field-label:is(label){margin-bottom:0}:host .gds-field-label.form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label.form-control:focus,:host .gds-field-label.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host .gds-field-label:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host .gds-field-label+input,:host .gds-field-label+textarea,fieldset :host .gds-field-label+div,:host .gds-field-label+button,:host .gds-field-label+.group-stepper,:host .gds-field-label+.stepper-wrapper,:host .gds-field-label+.group{margin-top:.5rem}:host .gds-field-label+.form-info{margin-bottom:.5rem}:host label+.field-wrap,:host label+.nggv-field--locked{margin-top:.5rem}:host .description{font-size:.875rem;margin-bottom:.5rem;line-height:1.25rem;width:100%}:host .gds-field-label--optional:is(label){margin-bottom:0}:host .gds-field-label--optional.form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label--optional.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label--optional.form-control:focus,:host .gds-field-label--optional.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host .gds-field-label--optional:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host .gds-field-label--optional+input,:host .gds-field-label--optional+textarea,fieldset :host .gds-field-label--optional+div,:host .gds-field-label--optional+button,:host .gds-field-label--optional+.group-stepper,:host .gds-field-label--optional+.stepper-wrapper,:host .gds-field-label--optional+.group{margin-top:.5rem}:host .gds-field-label--optional+.form-info{margin-bottom:.5rem}:host .nggv-datepicker{margin-top:.25rem;position:absolute}:host .nggv-field--error{border-bottom:.125rem solid #9f000a!important}:host .nggv-field--error:focus,:host .nggv-field--error:active,:host .nggv-field--error:hover{border-bottom:.125rem solid #9f000a!important}:host .error-item{display:flex;gap:.5rem;color:#9f000a}:host .gds-field-notice{margin-top:.5rem;display:block;font-size:.875rem;line-height:1;font-weight:500}:host .field-wrap{border:1px solid #868686;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit;height:2.625rem;display:flex}:host .field-wrap *,:host .field-wrap *:before,:host .field-wrap *:after{box-sizing:border-box}:host .field-wrap .nggv-button-date{--text-disabled-color: #adadad;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500;min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center;transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;border-color:#333;color:#333;--color: rgb(51, 51, 51);background-color:transparent;min-height:2.5rem;border:none;border-radius:3px;width:2.625rem;height:2.625rem;min-width:2.625rem;border-top-left-radius:0!important;border-bottom-left-radius:0!important;text-align:right}:host .field-wrap .nggv-button-date:focus:not(:focus-visible){box-shadow:none;outline:0}:host .field-wrap .nggv-button-date:focus,:host .field-wrap .nggv-button-date:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host .field-wrap .nggv-button-date{min-width:100%}}@media screen and (-ms-high-contrast: active){:host .field-wrap .nggv-button-date{border:2px solid currentcolor}}:host .field-wrap .nggv-button-date.small{min-height:2rem;padding:.4375rem .75rem;line-height:1rem}:host .field-wrap .nggv-button-date.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .field-wrap .nggv-button-date:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .field-wrap .nggv-button-date[aria-selected=true],:host .field-wrap .nggv-button-date:active,:host .field-wrap .nggv-button-date.active,:host .field-wrap .nggv-button-date.active:hover,:host .field-wrap .nggv-button-date:active:hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .field-wrap .nggv-button-date[aria-selected]:hover,:host .field-wrap .nggv-button-date.active:hover,:host .field-wrap .nggv-button-date:active:hover{opacity:.9}:host .field-wrap .nggv-button-date:focus-visible{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333!important}:host .field-wrap .nggv-button-date:disabled,:host .field-wrap .nggv-button-date.disabled,:host .field-wrap .nggv-button-date[aria-disabled=true]{color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .field-wrap .nggv-button-date:disabled::placeholder,:host .field-wrap .nggv-button-date.disabled::placeholder,:host .field-wrap .nggv-button-date[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}@media (max-width: 47.98em){:host .field-wrap .nggv-button-date{width:2.625rem;height:2.625rem}}:host .field-wrap .nggv-button-date:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-button-date[disabled]{background-color:#f8f8f8!important;color:#adadad}@media (max-width: 35.98em){:host .field-wrap .nggv-button-date{min-width:initial}}:host .field-wrap input[type=text]::-webkit-inner-spin-button,:host .field-wrap input[type=text]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none;font-size:1rem;font-family:inherit}:host .field-wrap .nggv-field-date{border:1px solid #cecece;border-radius:4px 0 0 4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit;border:none;min-height:2.375rem;width:100%;padding-left:1rem}:host .field-wrap .nggv-field-date *,:host .field-wrap .nggv-field-date *:before,:host .field-wrap .nggv-field-date *:after{box-sizing:border-box}:host .field-wrap .nggv-field-date:hover{border-color:#41b0ee}:host .field-wrap .nggv-field-date:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-field-date:active{border-color:#cecece}:host .field-wrap .nggv-field-date[disabled]{background-color:#f8f8f8;border-color:#cecece}:host .field-wrap .nggv-field-date[disabled]::placeholder{color:#cecece}:host .field-wrap .nggv-field-date:not(:focus){border-right:none;padding-right:0}:host .field-wrap .nggv-field-date:focus{padding-right:0}\n"] }]
+            args: [{ selector: 'nggv-dateinput,nggv-input[type=date]', template: "<!-- LABEL -->\n<ng-container *transloco=\"let t; read: scope\">\n  <label\n    [id]=\"id + '-label'\"\n    class=\"gds-field-label hide-if-empty\"\n    [attr.for]=\"id + '-input'\"\n  >\n    <ng-template\n      *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n    ></ng-template>\n    <ng-template #basicLabelContentTpl>\n      <!-- to trigger css:empty if no label was added -->\n      <ng-container *ngIf=\"label\">\n        {{ label }}\n        <span\n          *ngIf=\"optional === true || (required !== true && optional !== false)\"\n          class=\"gds-field-label--optional\"\n        >\n          ({{ t('label.optional') }})\n        </span>\n      </ng-container>\n    </ng-template>\n  </label>\n\n  <!-- DESCRIPTION -->\n  <div\n    class=\"gds-field-label--small description hide-if-empty\"\n    *ngIf=\"description\"\n  >\n    {{ description }}\n  </div>\n\n  <!-- LOCKED INPUT -->\n  <ng-container *ngIf=\"locked\">\n    <ng-template\n      *ngTemplateOutlet=\"\n        lockedTpl || defaultLockedTpl;\n        context: { $implicit: state }\n      \"\n    ></ng-template>\n    <ng-template #defaultLockedTpl>\n      <div\n        [id]=\"id + '-input'\"\n        class=\"nggv-field--locked\"\n        [attr.name]=\"name\"\n        [attr.value]=\"state\"\n        [attr.role]=\"role\"\n      >\n        <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n        <ng-container *ngIf=\"state\">\n          {{ state | nggvInputMaskFormat: dateInputMask }}\n        </ng-container>\n      </div>\n    </ng-template>\n  </ng-container>\n\n  <!-- INPUT WRAPPER -->\n  <ng-container *ngIf=\"!locked\">\n    <div\n      class=\"field-wrap\"\n      [class.nggv-field--error]=\"invalid\"\n      *ngIf=\"showInput$ | async\"\n    >\n      <!-- INPUT FIELD -->\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"nggv-field-date\"\n        type=\"text\"\n        autocomplete=\"off\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required\"\n        [disabled]=\"disabled\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [nggvInputMask]=\"dateInputMask\"\n        [value]=\"state\"\n        title=\"\"\n        (change)=\"onValueChange($event.target)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n\n      <button\n        aria-label=\"toggle calendar\"\n        #toggleCalendarButton\n        class=\"nggv-button-date\"\n        type=\"button\"\n        data-thook=\"toggle-calendar-button\"\n        (click)=\"toggleDatepicker()\"\n        [disabled]=\"disabled\"\n      >\n        @if (size === 'small') {\n          <gds-icon-calendar *nggCoreElement size=\"16px\"></gds-icon-calendar>\n        }\n\n        @if (size === 'large') {\n          <gds-icon-calendar *nggCoreElement size=\"20px\"></gds-icon-calendar>\n        }\n      </button>\n    </div>\n\n    <!-- DATEPICKER -->\n    <div class=\"nggv-datepicker\" *ngIf=\"shown\">\n      <nggv-datepicker\n        #input\n        [type]=\"type\"\n        [disableDates]=\"disableDates\"\n        [disableWeekDays]=\"disableWeekDays\"\n        [selected]=\"state\"\n        [locale]=\"locale\"\n        [minCalendarRows]=\"minRows\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [firstValid]=\"firstValid\"\n        [lastValid]=\"lastValid\"\n        [closingTime]=\"closingTime\"\n        (ngvDateChange)=\"onDateChange($event)\"\n      >\n        <ng-content></ng-content>\n      </nggv-datepicker>\n    </div>\n\n    <!-- ERRORS -->\n    <ng-container\n      *ngIf=\"\n        invalid &&\n        (error || ngControl?.invalid) &&\n        (!errorList || !errorList.length)\n      \"\n    >\n      <label\n        class=\"gds-field-notice gds-field-notice--error\"\n        [attr.for]=\"id + '-input'\"\n      >\n        <span class=\"error-item\">\n          <span class=\"error-item--icon\">\n            <gds-icon-triangle-exclamation\n              *nggCoreElement\n              [solid]=\"true\"\n              size=\"16px\"\n            ></gds-icon-triangle-exclamation>\n          </span>\n          <span\n            *ngIf=\"error; else errorsRef\"\n            class=\"error-item--text\"\n            [attr.data-thook]=\"thook + '-errorlabel'\"\n            >{{ error }}</span\n          >\n          <ng-template #errorsRef>\n            <span\n              *ngIf=\"firstError as error\"\n              class=\"error-item--text\"\n              [attr.data-thook]=\"thook + '-errorlabel'\"\n            >\n              {{ t('error.field' + error?.code, error?.params) }}\n            </span>\n          </ng-template>\n        </span>\n      </label>\n    </ng-container>\n    <ng-container *ngFor=\"let error of errorList ?? []\">\n      <label\n        class=\"gds-field-notice gds-field-notice--error\"\n        [attr.for]=\"id + '-input'\"\n        *ngIf=\"invalid && error\"\n      >\n        <span class=\"error-item\">\n          <span class=\"error-item--icon\">\n            <gds-icon-triangle-exclamation\n              *nggCoreElement\n              [solid]=\"true\"\n              size=\"16px\"\n            ></gds-icon-triangle-exclamation>\n          </span>\n          <span\n            class=\"error-item--text\"\n            [attr.data-thook]=\"thook + '-errorlabel'\"\n            >{{ error }}</span\n          >\n        </span>\n      </label>\n    </ng-container>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:block;position:relative}@media (max-width: 47.98em){:host{min-width:100%}}:host .hide-if-empty:empty{display:none}:host .unset-state{padding-left:.5rem}:host .gds-field-label{display:block}:host .gds-field-label:is(label){margin-bottom:0}:host .gds-field-label.form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label.form-control:focus,:host .gds-field-label.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host .gds-field-label:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host .gds-field-label+input,:host .gds-field-label+textarea,fieldset :host .gds-field-label+div,:host .gds-field-label+button,:host .gds-field-label+.group-stepper,:host .gds-field-label+.stepper-wrapper,:host .gds-field-label+.group{margin-top:.5rem}:host .gds-field-label+.form-info{margin-bottom:.5rem}:host label+.field-wrap,:host label+.nggv-field--locked{margin-top:.5rem}:host .description{font-size:.875rem;margin-bottom:.5rem;line-height:1.25rem;width:100%}:host .gds-field-label--optional:is(label){margin-bottom:0}:host .gds-field-label--optional.form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label--optional.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label--optional.form-control:focus,:host .gds-field-label--optional.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host .gds-field-label--optional:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host .gds-field-label--optional+input,:host .gds-field-label--optional+textarea,fieldset :host .gds-field-label--optional+div,:host .gds-field-label--optional+button,:host .gds-field-label--optional+.group-stepper,:host .gds-field-label--optional+.stepper-wrapper,:host .gds-field-label--optional+.group{margin-top:.5rem}:host .gds-field-label--optional+.form-info{margin-bottom:.5rem}:host .nggv-datepicker{margin-top:.25rem;position:absolute}:host .nggv-field--error{border-bottom:.125rem solid #9f000a!important}:host .nggv-field--error:focus,:host .nggv-field--error:active,:host .nggv-field--error:hover{border-bottom:.125rem solid #9f000a!important}:host .error-item{display:flex;gap:.5rem;color:#9f000a}:host .gds-field-notice{margin-top:.5rem;display:block;font-size:.875rem;line-height:1;font-weight:500}:host .field-wrap{border:1px solid #868686;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit;height:2.625rem;display:flex}:host .field-wrap *,:host .field-wrap *:before,:host .field-wrap *:after{box-sizing:border-box}:host .field-wrap .nggv-button-date{--text-disabled-color: #adadad;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500;min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center;transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;border-color:#333;color:#333;--color: rgb(51, 51, 51);background-color:transparent;min-height:2.5rem;border:none;border-radius:3px;width:2.625rem;height:2.625rem;min-width:2.625rem;border-top-left-radius:0!important;border-bottom-left-radius:0!important;text-align:right}:host .field-wrap .nggv-button-date:focus:not(:focus-visible){box-shadow:none;outline:0}:host .field-wrap .nggv-button-date:focus,:host .field-wrap .nggv-button-date:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host .field-wrap .nggv-button-date{min-width:100%}}@media screen and (-ms-high-contrast: active){:host .field-wrap .nggv-button-date{border:2px solid currentcolor}}:host .field-wrap .nggv-button-date.small{min-height:2rem;padding:.4375rem .75rem;line-height:1rem}:host .field-wrap .nggv-button-date.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .field-wrap .nggv-button-date:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .field-wrap .nggv-button-date[aria-selected=true],:host .field-wrap .nggv-button-date:active,:host .field-wrap .nggv-button-date.active,:host .field-wrap .nggv-button-date.active:hover,:host .field-wrap .nggv-button-date:active:hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .field-wrap .nggv-button-date[aria-selected]:hover,:host .field-wrap .nggv-button-date.active:hover,:host .field-wrap .nggv-button-date:active:hover{opacity:.9}:host .field-wrap .nggv-button-date:focus-visible{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333!important}:host .field-wrap .nggv-button-date:disabled,:host .field-wrap .nggv-button-date.disabled,:host .field-wrap .nggv-button-date[aria-disabled=true]{color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .field-wrap .nggv-button-date:disabled::placeholder,:host .field-wrap .nggv-button-date.disabled::placeholder,:host .field-wrap .nggv-button-date[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}@media (max-width: 47.98em){:host .field-wrap .nggv-button-date{width:2.625rem;height:2.625rem}}:host .field-wrap .nggv-button-date:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-button-date[disabled]{background-color:#f8f8f8!important;color:#adadad}@media (max-width: 35.98em){:host .field-wrap .nggv-button-date{min-width:initial}}:host .field-wrap input[type=text]::-webkit-inner-spin-button,:host .field-wrap input[type=text]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none;font-size:1rem;font-family:inherit}:host .field-wrap .nggv-field-date{border:1px solid #cecece;border-radius:4px 0 0 4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit;border:none;min-height:2.375rem;width:100%;padding-left:1rem}:host .field-wrap .nggv-field-date *,:host .field-wrap .nggv-field-date *:before,:host .field-wrap .nggv-field-date *:after{box-sizing:border-box}:host .field-wrap .nggv-field-date:hover{border-color:#41b0ee}:host .field-wrap .nggv-field-date:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-field-date:active{border-color:#cecece}:host .field-wrap .nggv-field-date[disabled]{background-color:#f8f8f8;border-color:#cecece}:host .field-wrap .nggv-field-date[disabled]::placeholder{color:#cecece}:host .field-wrap .nggv-field-date:not(:focus){border-right:none;padding-right:0}:host .field-wrap .nggv-field-date:focus{padding-right:0}:host.small .gds-field-label{font-size:.875rem;line-height:1rem}:host.small label+.field-wrap{margin-top:.25rem}:host.small .field-wrap{height:calc(2rem + 2px);min-height:calc(2rem + 2px)}:host.small .field-wrap .nggv-field-date{padding:.38rem .5rem;line-height:1rem;min-height:2rem;font-size:.875rem}:host.small .field-wrap .nggv-button-date{min-height:2rem;min-width:2rem;width:2rem;height:2rem;padding:0}\n"] }]
         }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -1677,6 +1687,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 args: ['attr.data-thook']
             }, {
                 type: Input
+            }], isSmall: [{
+                type: HostBinding,
+                args: ['class.small']
+            }], isLarge: [{
+                type: HostBinding,
+                args: ['class.large']
             }], type: [{
                 type: Input
             }], readonly: [{
@@ -1697,6 +1713,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], closeCalendarOnEscape: [{
                 type: Input
+            }], size: [{
+                type: Input
             }], keyListener: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]