@sebgroup/green-angular 2.1.2 → 3.0.0

package/fesm2020/sebgroup-green-angular.mjs

@@ -2,11 +2,11 @@ import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
 import { EventEmitter, Component, Input, Output, ContentChildren, NgModule, ChangeDetectionStrategy, HostBinding, inject, Renderer2, ViewContainerRef, ChangeDetectorRef, TemplateRef, Directive, ViewChild, CUSTOM_ELEMENTS_SCHEMA, Injector, Inject, ContentChild, InjectionToken } from '@angular/core';
-import { randomId, months, years, createDatepicker, calculateDegrees, sliderColors, getSliderTrackBackground, PaginationI18n } from '@sebgroup/extract';
+import { randomId, calculateDegrees, sliderColors, getSliderTrackBackground, PaginationI18n } from '@sebgroup/extract';
 import { getScopedTagName } from '@sebgroup/green-core';
 import { registerTransitionalStyles } from '@sebgroup/green-core/transitional-styles';
 import * as i2 from '@angular/forms';
-import { NgControl, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, NgControl, FormsModule } from '@angular/forms';
 import { startOfDay, endOfDay } from 'date-fns';
 import * as i1$1 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
@@ -403,6 +403,123 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 }]
         }] });
 
+class NggDatepickerComponent {
+    constructor(_cdr) {
+        this._cdr = _cdr;
+        this.id = randomId();
+        this.isValid = null;
+        this.valueChange = new EventEmitter();
+        registerTransitionalStyles();
+    }
+    get options() {
+        return this._options;
+    }
+    set options(value) {
+        this._options = value;
+    }
+    get showWeekNumbers() {
+        return this.options?.showWeeks ?? false;
+    }
+    get value() {
+        return this._value;
+    }
+    set value(newValue) {
+        if (newValue !== this._value) {
+            this._value = newValue || undefined;
+        }
+        console.log('value', this._value);
+    }
+    get min() {
+        const minDate = this.options?.minDate;
+        return minDate ? minDate : new Date(new Date().getFullYear() - 10, 0, 1);
+    }
+    get max() {
+        const maxDate = this.options?.maxDate;
+        return maxDate ? maxDate : new Date(new Date().getFullYear() + 10, 0, 1);
+    }
+    writeValue(value) {
+        console.log('writeValue', value);
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedFn = fn;
+    }
+    onDateChange(evt) {
+        const e = evt;
+        this.value = e.detail.value;
+        this.valueChange.emit(e.detail.value);
+        this.onChangeFn && this.onChangeFn(e.detail.value);
+    }
+    ngAfterViewInit() {
+        this._cdr.detectChanges();
+    }
+}
+NggDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDatepickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+NggDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NggDatepickerComponent, selector: "ngg-datepicker", inputs: { options: "options", value: "value", id: "id", label: "label", isValid: "isValid" }, outputs: { valueChange: "valueChange" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: NggDatepickerComponent,
+            multi: true,
+        },
+    ], ngImport: i0, template: "<div class=\"form-group\">\n  <gds-datepicker\n    *nggCoreElement\n    [attr.id]=\"id\"\n    [label]=\"label\"\n    [value]=\"value\"\n    (change)=\"onDateChange($event)\"\n    [invalid]=\"isValid === false\"\n    [min]=\"min\"\n    [max]=\"max\"\n    [showWeekNumbers]=\"showWeekNumbers\"\n  >\n    <span slot=\"message\">\n      <ng-content select=\"[data-form-info]\"></ng-content>\n    </span>\n  </gds-datepicker>\n</div>\n", dependencies: [{ kind: "directive", type: NggCoreElementDirective, selector: "[nggCoreElement]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDatepickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngg-datepicker', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: NggDatepickerComponent,
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-group\">\n  <gds-datepicker\n    *nggCoreElement\n    [attr.id]=\"id\"\n    [label]=\"label\"\n    [value]=\"value\"\n    (change)=\"onDateChange($event)\"\n    [invalid]=\"isValid === false\"\n    [min]=\"min\"\n    [max]=\"max\"\n    [showWeekNumbers]=\"showWeekNumbers\"\n  >\n    <span slot=\"message\">\n      <ng-content select=\"[data-form-info]\"></ng-content>\n    </span>\n  </gds-datepicker>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { options: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], isValid: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+function dateValidator(dates) {
+    return (control) => {
+        const value = control.value;
+        if (!value) {
+            return null;
+        }
+        const newDate = new Date(value);
+        const isValidDate = !isNaN(newDate.getTime());
+        if (!isValidDate) {
+            return { validDate: true };
+        }
+        const validMinDate = dates?.min ? newDate >= startOfDay(dates.min) : true;
+        const validMaxDate = dates?.max ? newDate <= endOfDay(dates.max) : true;
+        if (!validMinDate && dates?.min) {
+            return {
+                validDate: {
+                    minDate: startOfDay(dates.min),
+                    actualDate: newDate,
+                },
+            };
+        }
+        if (!validMaxDate && dates?.max) {
+            return {
+                validDate: {
+                    maxDate: endOfDay(dates.max),
+                    actualDate: newDate,
+                },
+            };
+        }
+        return null;
+    };
+}
+
 class NggDropdownOptionDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
@@ -551,13 +668,13 @@ class NggDropdownComponent {
     }
 }
 NggDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDropdownComponent, deps: [{ token: Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-NggDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NggDropdownComponent, selector: "ngg-dropdown", inputs: { id: "id", texts: "texts", loop: "loop", display: "display", useValue: "useValue", label: "label", options: "options", valid: "valid", invalid: "invalid", compareWith: "compareWith", searchFilter: "searchFilter", fixedPlacement: "fixedPlacement", multiSelect: "multiSelect", searchable: "searchable", value: "value" }, outputs: { valueChange: "valueChange", touched: "touched" }, providers: [
+NggDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NggDropdownComponent, selector: "ngg-dropdown", inputs: { id: "id", texts: "texts", loop: "loop", display: "display", useValue: "useValue", label: "label", options: "options", valid: "valid", invalid: "invalid", compareWith: "compareWith", searchFilter: "searchFilter", syncPopoverWidth: "syncPopoverWidth", fixedPlacement: "fixedPlacement", multiSelect: "multiSelect", searchable: "searchable", value: "value" }, outputs: { valueChange: "valueChange", touched: "touched" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: NggDropdownComponent,
             multi: true,
         },
-    ], queries: [{ propertyName: "customOption", first: true, predicate: NggDropdownOptionDirective, descendants: true }, { propertyName: "customButton", first: true, predicate: NggDropdownButtonDirective, descendants: true }], viewQueries: [{ propertyName: "gdsDropdown", first: true, predicate: ["gdsDropdown"], descendants: true }], ngImport: i0, template: "<div class=\"form-group\">\n  <gds-dropdown\n    *nggCoreElement\n    #gdsDropdown\n    [value]=\"value\"\n    [searchable]=\"searchable\"\n    [label]=\"label\"\n    (change)=\"onValueChange($event)\"\n    [multiple]=\"multiSelect\"\n    [invalid]=\"invalid\"\n    [compareWith]=\"compareWithAdapter\"\n    [searchFilter]=\"searchFilterAdapter\"\n  >\n    <span slot=\"message\" #formInfo\n      ><ng-content select=\"[data-form-info]\"></ng-content\n    ></span>\n\n    <span slot=\"trigger\"\n      ><ng-container\n        *ngTemplateOutlet=\"\n          customButton?.templateRef && selectedOption\n            ? customButton!.templateRef\n            : defaultButton;\n          context: { option: selectedOption }\n        \"\n      ></ng-container\n    ></span>\n\n    <ng-container *ngFor=\"let option of options; let index = index\">\n      <gds-option *nggCoreElement [value]=\"option[useValue]\"\n        ><ng-container\n          *ngTemplateOutlet=\"\n            customOption?.templateRef\n              ? customOption!.templateRef\n              : defaultOption;\n            context: { option: option, index: index }\n          \"\n        ></ng-container\n      ></gds-option>\n    </ng-container>\n  </gds-dropdown>\n</div>\n\n<ng-template #defaultButton let-selected=\"option\">\n  <span class=\"trigger\">{{ texts?.select }}</span>\n</ng-template>\n\n<ng-template #defaultOption let-option=\"option\">\n  {{ display ? option[display] : option.name }}\n</ng-template>\n", styles: [".trigger{display:block;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NggCoreElementDirective, selector: "[nggCoreElement]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], queries: [{ propertyName: "customOption", first: true, predicate: NggDropdownOptionDirective, descendants: true }, { propertyName: "customButton", first: true, predicate: NggDropdownButtonDirective, descendants: true }], viewQueries: [{ propertyName: "gdsDropdown", first: true, predicate: ["gdsDropdown"], descendants: true }], ngImport: i0, template: "<div class=\"form-group\">\n  <gds-dropdown\n    *nggCoreElement\n    #gdsDropdown\n    [value]=\"value\"\n    [searchable]=\"searchable\"\n    [label]=\"label\"\n    (change)=\"onValueChange($event)\"\n    [multiple]=\"multiSelect\"\n    [invalid]=\"invalid\"\n    [compareWith]=\"compareWithAdapter\"\n    [searchFilter]=\"searchFilterAdapter\"\n    [syncPopoverWidth]=\"syncPopoverWidth\"\n  >\n    <span slot=\"message\" #formInfo\n      ><ng-content select=\"[data-form-info]\"></ng-content\n    ></span>\n\n    <span slot=\"trigger\"\n      ><ng-container\n        *ngTemplateOutlet=\"\n          customButton?.templateRef && selectedOption\n            ? customButton!.templateRef\n            : defaultButton;\n          context: { option: selectedOption }\n        \"\n      ></ng-container\n    ></span>\n\n    <ng-container *ngFor=\"let option of options; let index = index\">\n      <gds-option *nggCoreElement [value]=\"option[useValue]\"\n        ><ng-container\n          *ngTemplateOutlet=\"\n            customOption?.templateRef\n              ? customOption!.templateRef\n              : defaultOption;\n            context: { option: option, index: index }\n          \"\n        ></ng-container\n      ></gds-option>\n    </ng-container>\n  </gds-dropdown>\n</div>\n\n<ng-template #defaultButton let-selected=\"option\">\n  <span class=\"trigger\">{{ texts?.select }}</span>\n</ng-template>\n\n<ng-template #defaultOption let-option=\"option\">\n  {{ display ? option[display] : option.name }}\n</ng-template>\n", styles: [".trigger{display:block;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NggCoreElementDirective, selector: "[nggCoreElement]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngg-dropdown', providers: [
@@ -566,7 +683,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                             useExisting: NggDropdownComponent,
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-group\">\n  <gds-dropdown\n    *nggCoreElement\n    #gdsDropdown\n    [value]=\"value\"\n    [searchable]=\"searchable\"\n    [label]=\"label\"\n    (change)=\"onValueChange($event)\"\n    [multiple]=\"multiSelect\"\n    [invalid]=\"invalid\"\n    [compareWith]=\"compareWithAdapter\"\n    [searchFilter]=\"searchFilterAdapter\"\n  >\n    <span slot=\"message\" #formInfo\n      ><ng-content select=\"[data-form-info]\"></ng-content\n    ></span>\n\n    <span slot=\"trigger\"\n      ><ng-container\n        *ngTemplateOutlet=\"\n          customButton?.templateRef && selectedOption\n            ? customButton!.templateRef\n            : defaultButton;\n          context: { option: selectedOption }\n        \"\n      ></ng-container\n    ></span>\n\n    <ng-container *ngFor=\"let option of options; let index = index\">\n      <gds-option *nggCoreElement [value]=\"option[useValue]\"\n        ><ng-container\n          *ngTemplateOutlet=\"\n            customOption?.templateRef\n              ? customOption!.templateRef\n              : defaultOption;\n            context: { option: option, index: index }\n          \"\n        ></ng-container\n      ></gds-option>\n    </ng-container>\n  </gds-dropdown>\n</div>\n\n<ng-template #defaultButton let-selected=\"option\">\n  <span class=\"trigger\">{{ texts?.select }}</span>\n</ng-template>\n\n<ng-template #defaultOption let-option=\"option\">\n  {{ display ? option[display] : option.name }}\n</ng-template>\n", styles: [".trigger{display:block;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-group\">\n  <gds-dropdown\n    *nggCoreElement\n    #gdsDropdown\n    [value]=\"value\"\n    [searchable]=\"searchable\"\n    [label]=\"label\"\n    (change)=\"onValueChange($event)\"\n    [multiple]=\"multiSelect\"\n    [invalid]=\"invalid\"\n    [compareWith]=\"compareWithAdapter\"\n    [searchFilter]=\"searchFilterAdapter\"\n    [syncPopoverWidth]=\"syncPopoverWidth\"\n  >\n    <span slot=\"message\" #formInfo\n      ><ng-content select=\"[data-form-info]\"></ng-content\n    ></span>\n\n    <span slot=\"trigger\"\n      ><ng-container\n        *ngTemplateOutlet=\"\n          customButton?.templateRef && selectedOption\n            ? customButton!.templateRef\n            : defaultButton;\n          context: { option: selectedOption }\n        \"\n      ></ng-container\n    ></span>\n\n    <ng-container *ngFor=\"let option of options; let index = index\">\n      <gds-option *nggCoreElement [value]=\"option[useValue]\"\n        ><ng-container\n          *ngTemplateOutlet=\"\n            customOption?.templateRef\n              ? customOption!.templateRef\n              : defaultOption;\n            context: { option: option, index: index }\n          \"\n        ></ng-container\n      ></gds-option>\n    </ng-container>\n  </gds-dropdown>\n</div>\n\n<ng-template #defaultButton let-selected=\"option\">\n  <span class=\"trigger\">{{ texts?.select }}</span>\n</ng-template>\n\n<ng-template #defaultOption let-option=\"option\">\n  {{ display ? option[display] : option.name }}\n</ng-template>\n", styles: [".trigger{display:block;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector, decorators: [{
                     type: Inject,
                     args: [Injector]
@@ -592,6 +709,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Input
             }], searchFilter: [{
                 type: Input
+            }], syncPopoverWidth: [{
+                type: Input
             }], fixedPlacement: [{
                 type: Input
             }], multiSelect: [{
@@ -615,197 +734,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 args: ['gdsDropdown', { static: false }]
             }] } });
 
-class NggDatepickerComponent {
-    constructor(_cdr) {
-        this._cdr = _cdr;
-        this.id = randomId();
-        this.isValid = null;
-        this.valueChange = new EventEmitter();
-        this._months = months({});
-        this.listener = (data, state) => {
-            if (this.dp && state) {
-                this.dp.state = { ...state };
-                this.years = years({
-                    from: this.dp.state?.minDate?.getFullYear(),
-                    to: this.dp.state?.maxDate?.getFullYear(),
-                });
-            }
-            if (data) {
-                // only emit change event if date has changed
-                if (this.data?.selectedDate !== data.selectedDate) {
-                    this.valueChange.emit(data.selectedDate);
-                    this.onChangeFn && this.onChangeFn(data.selectedDate);
-                }
-                this.data = data;
-            }
-            this._cdr.detectChanges();
-        };
-    }
-    get months() {
-        return this._months;
-    }
-    set months(value) {
-        this._months = value;
-    }
-    get options() {
-        return this._options;
-    }
-    set options(value) {
-        this._options = value;
-        if (value.locale) {
-            this.months = months({ locale: this.options?.locale });
-        }
-    }
-    get value() {
-        return this._value;
-    }
-    set value(newValue) {
-        if (newValue !== this._value) {
-            this._value = newValue || '';
-            if (this._value !== undefined && this.dp) {
-                this.dp.select(this._value);
-            }
-        }
-    }
-    writeValue(value) {
-        this.value = value;
-    }
-    registerOnChange(fn) {
-        this.onChangeFn = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouchedFn = fn;
-    }
-    get data() {
-        return this._data;
-    }
-    set data(value) {
-        this._data = value;
-    }
-    onDateChange(value) {
-        const newDate = new Date(value);
-        // Only pass valid date to date picker
-        if (!isNaN(newDate.getTime())) {
-            this.dp?.select(value);
-        }
-        else {
-            this.valueChange.emit(value);
-            this.onChangeFn && this.onChangeFn(value);
-        }
-    }
-    trackWeek(index, week) {
-        return week;
-    }
-    ngOnChanges(changes) {
-        //ignore changes until datepicker has been initialised in ngAfterViewInit
-        if (!this.dp)
-            return;
-        if (changes.options) {
-            this._createDatepicker();
-        }
-    }
-    ngAfterViewInit() {
-        this._createDatepicker();
-        this._cdr.detectChanges();
-    }
-    _createDatepicker() {
-        if (this.datepickerElRef &&
-            this.datepickerDialogElRef &&
-            this.dateInputElRef &&
-            this.datepickerTriggerElRef) {
-            this.dp = createDatepicker(this.listener, {
-                ...this.options,
-                selectedDate: this.value,
-            }, this.datepickerElRef.nativeElement, this.datepickerDialogElRef.nativeElement, this.dateInputElRef.nativeElement, this.datepickerTriggerElRef.nativeElement);
-        }
-        else {
-            throw 'Missing one or more elements...';
-        }
-    }
-    blurInput() {
-        this.onTouchedFn && this.onTouchedFn();
-    }
-    focusoutDialog(event) {
-        if (!this.datepickerDialogElRef?.nativeElement.contains(event.relatedTarget)) {
-            this.onTouchedFn && this.onTouchedFn();
-        }
-    }
-}
-NggDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDatepickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-NggDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NggDatepickerComponent, selector: "ngg-datepicker", inputs: { options: "options", value: "value", id: "id", label: "label", isValid: "isValid" }, outputs: { valueChange: "valueChange" }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: NggDatepickerComponent,
-            multi: true,
-        },
-    ], viewQueries: [{ propertyName: "datepickerDialogElRef", first: true, predicate: ["datepickerDialogElRef"], descendants: true }, { propertyName: "dateInputElRef", first: true, predicate: ["dateInputElRef"], descendants: true }, { propertyName: "datepickerElRef", first: true, predicate: ["datepickerElRef"], descendants: true }, { propertyName: "datepickerTriggerElRef", first: true, predicate: ["datepickerTriggerElRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"form-group\">\n  <label *ngIf=\"label\" [for]=\"id\">{{ label }}</label>\n  <div\n    class=\"group\"\n    #datepickerElRef\n    [class.is-valid]=\"isValid\"\n    [class.is-invalid]=\"isValid === false\"\n  >\n    <input\n      (blur)=\"blurInput()\"\n      [attr.id]=\"id\"\n      [attr.aria-describedby]=\"\n        formInfo?.innerText && formInfo.innerText.length > 0\n          ? id + '_info'\n          : null\n      \"\n      type=\"text\"\n      placeholder=\"yyyy-mm-dd\"\n      #dateInputElRef\n      [value]=\"data?.formattedSelectedDate || ''\"\n      (change)=\"onDateChange(dateInputElRef.value)\"\n    />\n    <button\n      #datepickerTriggerElRef\n      (click)=\"dp?.toggle()\"\n      type=\"button\"\n      class=\"primary\"\n    >\n      <i class=\"sg-icon sg-icon-calendar\">Select date</i>\n    </button>\n  </div>\n  <span class=\"form-info\" #formInfo [attr.id]=\"id + '_info'\"\n    ><ng-content select=\"[data-form-info]\"></ng-content\n  ></span>\n</div>\n<!-- TODO: get or set attributes from within datepicker instance (dp) -->\n<div\n  #datepickerDialogElRef\n  class=\"popover popover-datepicker\"\n  [class.active]=\"dp?.state?.isActive\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  aria-label=\"Choose Date\"\n  (focusout)=\"focusoutDialog($event)\"\n>\n  <button type=\"button\" class=\"close\" (click)=\"dp?.close()\">\n    <i></i>Close\n  </button>\n  <div class=\"sg-date\">\n    <header>\n      <button type=\"button\" class=\"link\" (click)=\"dp?.sub(1, 'months')\">\n        <i class=\"sg-icon sg-icon-previous\">Previous month</i>\n      </button>\n      <ngg-dropdown\n        [options]=\"months\"\n        display=\"key\"\n        text=\"Select\"\n        [value]=\"data?.month\"\n        (valueChange)=\"dp?.setMonth($event)\"\n      ></ngg-dropdown>\n      <ngg-dropdown\n        *ngIf=\"years\"\n        [options]=\"years\"\n        display=\"key\"\n        text=\"Select\"\n        [value]=\"data?.year\"\n        (valueChange)=\"dp?.setYear($event)\"\n      ></ngg-dropdown>\n      <button type=\"button\" class=\"link\" (click)=\"dp?.add(1, 'months')\">\n        <i class=\"sg-icon sg-icon-next\">Next month</i>\n      </button>\n    </header>\n    <main>\n      <table role=\"grid\">\n        <thead>\n          <tr>\n            <th\n              scope=\"col\"\n              *ngFor=\"let header of data?.calendar?.headers\"\n              [abbr]=\"header.abbr\"\n              [class.sg-week-header]=\"header.type === 'week'\"\n              [class.sg-day-header]=\"header.type === 'day'\"\n            >\n              {{ header.displayText }}\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr\n            *ngFor=\"\n              let week of data?.calendar?.calendarGrid;\n              trackBy: trackWeek;\n              let i = index\n            \"\n          >\n            <th\n              *ngIf=\"data?.calendar?.weekNumbers as weekNumbers\"\n              class=\"sg-week-number\"\n            >\n              {{ weekNumbers[i] }}\n            </th>\n            <td\n              *ngFor=\"let day of week\"\n              [attr.data-date]=\"day.formattedDate\"\n              [attr.role]=\"day.selected ? 'gridcell' : null\"\n              [attr.aria-selected]=\"\n                day.selected && !data?.highlightedDate ? true : null\n              \"\n              [class.disabled]=\"day.disabled\"\n              [class.sg-date-today]=\"day.today\"\n              [title]=\"day.today ? 'Today' : ''\"\n              [tabIndex]=\"\n                day.highlighted ||\n                (day.selected && !data?.highlightedDate) ||\n                (day.today && !data?.highlightedDate && !data?.selectedDate)\n                  ? 0\n                  : -1\n              \"\n              (click)=\"day.currentMonth && dp?.select(day.date)\"\n            >\n              {{ day.day }}\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </main>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NggDropdownComponent, selector: "ngg-dropdown", inputs: ["id", "texts", "loop", "display", "useValue", "label", "options", "valid", "invalid", "compareWith", "searchFilter", "fixedPlacement", "multiSelect", "searchable", "value"], outputs: ["valueChange", "touched"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDatepickerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngg-datepicker', providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: NggDatepickerComponent,
-                            multi: true,
-                        },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-group\">\n  <label *ngIf=\"label\" [for]=\"id\">{{ label }}</label>\n  <div\n    class=\"group\"\n    #datepickerElRef\n    [class.is-valid]=\"isValid\"\n    [class.is-invalid]=\"isValid === false\"\n  >\n    <input\n      (blur)=\"blurInput()\"\n      [attr.id]=\"id\"\n      [attr.aria-describedby]=\"\n        formInfo?.innerText && formInfo.innerText.length > 0\n          ? id + '_info'\n          : null\n      \"\n      type=\"text\"\n      placeholder=\"yyyy-mm-dd\"\n      #dateInputElRef\n      [value]=\"data?.formattedSelectedDate || ''\"\n      (change)=\"onDateChange(dateInputElRef.value)\"\n    />\n    <button\n      #datepickerTriggerElRef\n      (click)=\"dp?.toggle()\"\n      type=\"button\"\n      class=\"primary\"\n    >\n      <i class=\"sg-icon sg-icon-calendar\">Select date</i>\n    </button>\n  </div>\n  <span class=\"form-info\" #formInfo [attr.id]=\"id + '_info'\"\n    ><ng-content select=\"[data-form-info]\"></ng-content\n  ></span>\n</div>\n<!-- TODO: get or set attributes from within datepicker instance (dp) -->\n<div\n  #datepickerDialogElRef\n  class=\"popover popover-datepicker\"\n  [class.active]=\"dp?.state?.isActive\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  aria-label=\"Choose Date\"\n  (focusout)=\"focusoutDialog($event)\"\n>\n  <button type=\"button\" class=\"close\" (click)=\"dp?.close()\">\n    <i></i>Close\n  </button>\n  <div class=\"sg-date\">\n    <header>\n      <button type=\"button\" class=\"link\" (click)=\"dp?.sub(1, 'months')\">\n        <i class=\"sg-icon sg-icon-previous\">Previous month</i>\n      </button>\n      <ngg-dropdown\n        [options]=\"months\"\n        display=\"key\"\n        text=\"Select\"\n        [value]=\"data?.month\"\n        (valueChange)=\"dp?.setMonth($event)\"\n      ></ngg-dropdown>\n      <ngg-dropdown\n        *ngIf=\"years\"\n        [options]=\"years\"\n        display=\"key\"\n        text=\"Select\"\n        [value]=\"data?.year\"\n        (valueChange)=\"dp?.setYear($event)\"\n      ></ngg-dropdown>\n      <button type=\"button\" class=\"link\" (click)=\"dp?.add(1, 'months')\">\n        <i class=\"sg-icon sg-icon-next\">Next month</i>\n      </button>\n    </header>\n    <main>\n      <table role=\"grid\">\n        <thead>\n          <tr>\n            <th\n              scope=\"col\"\n              *ngFor=\"let header of data?.calendar?.headers\"\n              [abbr]=\"header.abbr\"\n              [class.sg-week-header]=\"header.type === 'week'\"\n              [class.sg-day-header]=\"header.type === 'day'\"\n            >\n              {{ header.displayText }}\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr\n            *ngFor=\"\n              let week of data?.calendar?.calendarGrid;\n              trackBy: trackWeek;\n              let i = index\n            \"\n          >\n            <th\n              *ngIf=\"data?.calendar?.weekNumbers as weekNumbers\"\n              class=\"sg-week-number\"\n            >\n              {{ weekNumbers[i] }}\n            </th>\n            <td\n              *ngFor=\"let day of week\"\n              [attr.data-date]=\"day.formattedDate\"\n              [attr.role]=\"day.selected ? 'gridcell' : null\"\n              [attr.aria-selected]=\"\n                day.selected && !data?.highlightedDate ? true : null\n              \"\n              [class.disabled]=\"day.disabled\"\n              [class.sg-date-today]=\"day.today\"\n              [title]=\"day.today ? 'Today' : ''\"\n              [tabIndex]=\"\n                day.highlighted ||\n                (day.selected && !data?.highlightedDate) ||\n                (day.today && !data?.highlightedDate && !data?.selectedDate)\n                  ? 0\n                  : -1\n              \"\n              (click)=\"day.currentMonth && dp?.select(day.date)\"\n            >\n              {{ day.day }}\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </main>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { options: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], id: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], isValid: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }], datepickerDialogElRef: [{
-                type: ViewChild,
-                args: ['datepickerDialogElRef']
-            }], dateInputElRef: [{
-                type: ViewChild,
-                args: ['dateInputElRef']
-            }], datepickerElRef: [{
-                type: ViewChild,
-                args: ['datepickerElRef']
-            }], datepickerTriggerElRef: [{
-                type: ViewChild,
-                args: ['datepickerTriggerElRef']
-            }] } });
-function dateValidator(dates) {
-    return (control) => {
-        const value = control.value;
-        if (!value) {
-            return null;
-        }
-        const newDate = new Date(value);
-        const isValidDate = !isNaN(newDate.getTime());
-        if (!isValidDate) {
-            return { validDate: true };
-        }
-        const validMinDate = dates?.min ? newDate >= startOfDay(dates.min) : true;
-        const validMaxDate = dates?.max ? newDate <= endOfDay(dates.max) : true;
-        if (!validMinDate && dates?.min) {
-            return {
-                validDate: {
-                    minDate: startOfDay(dates.min),
-                    actualDate: newDate,
-                },
-            };
-        }
-        if (!validMaxDate && dates?.max) {
-            return {
-                validDate: {
-                    maxDate: endOfDay(dates.max),
-                    actualDate: newDate,
-                },
-            };
-        }
-        return null;
-    };
-}
-
 class NggDropdownModule {
 }
 NggDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -836,14 +764,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
 class NggDatepickerModule {
 }
 NggDatepickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NggDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NggDatepickerModule, declarations: [NggDatepickerComponent], imports: [CommonModule, NggDropdownModule], exports: [NggDatepickerComponent] });
-NggDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDatepickerModule, imports: [CommonModule, NggDropdownModule] });
+NggDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NggDatepickerModule, declarations: [NggDatepickerComponent], imports: [CommonModule, NggDropdownModule, NggCoreWrapperModule], exports: [NggDatepickerComponent] });
+NggDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDatepickerModule, imports: [CommonModule, NggDropdownModule, NggCoreWrapperModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDatepickerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NggDatepickerComponent],
-                    imports: [CommonModule, NggDropdownModule],
+                    imports: [CommonModule, NggDropdownModule, NggCoreWrapperModule],
                     exports: [NggDatepickerComponent],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
         }] });
 
@@ -1649,10 +1578,10 @@ class NggPaginationComponent {
     }
 }
 NggPaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NggPaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NggPaginationComponent, selector: "ngg-pagination", inputs: { i18n: "i18n", size: "size", displayPages: "displayPages", length: "length", pageSize: "pageSize", pageIndex: "pageIndex" }, outputs: { page: "page" }, usesOnChanges: true, ngImport: i0, template: "<nav\n  [class]=\"'pagination ' + size\"\n  role=\"navigation\"\n  [attr.aria-label]=\"i18n.paginationLabel\"\n  *ngIf=\"totalPages > 1\"\n>\n  <ul class=\"gds-reset\">\n    <li *ngIf=\"hasPrevious()\">\n      <a\n        class=\"gds-reset\"\n        tabindex=\"0\"\n        (click)=\"gotoPrevious()\"\n        [attr.aria-label]=\"i18n.previousPageLabel\"\n        role=\"button\"\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n          <path\n            d=\"M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z\"\n          />\n        </svg>\n      </a>\n    </li>\n\n    <li>\n      <a\n        class=\"gds-reset\"\n        tabindex=\"0\"\n        (click)=\"gotoFirst()\"\n        [attr.aria-current]=\"pageIndex === 0 ? 'page' : null\"\n        [attr.aria-label]=\"i18n.firstPageLabel\"\n        role=\"button\"\n      >\n        1\n      </a>\n    </li>\n    <li *ngIf=\"pageIndicies[0] > 1\" aria-hidden=\"true\">...</li>\n\n    <li *ngFor=\"let index of pageIndicies\">\n      <a\n        class=\"gds-reset\"\n        tabindex=\"0\"\n        (click)=\"goto(index)\"\n        [attr.aria-current]=\"pageIndex === index ? 'page' : null\"\n        [attr.aria-label]=\"i18n.getPageLabel(index)\"\n        role=\"button\"\n      >\n        {{ index + 1 }}\n      </a>\n    </li>\n\n    <li\n      *ngIf=\"pageIndicies[pageIndicies.length - 1] < totalPages - 2\"\n      aria-hidden=\"true\"\n    >\n      ...\n    </li>\n\n    <li>\n      <a\n        class=\"gds-reset\"\n        tabindex=\"0\"\n        (click)=\"gotoLast()\"\n        [attr.aria-current]=\"pageIndex === totalPages - 1 ? 'page' : null\"\n        [attr.aria-label]=\"i18n.lastPageLabel\"\n        role=\"button\"\n      >\n        {{ totalPages }}\n      </a>\n    </li>\n    <li *ngIf=\"hasNext()\">\n      <a\n        class=\"gds-reset\"\n        tabindex=\"0\"\n        (click)=\"gotoNext()\"\n        [attr.aria-label]=\"i18n.nextPageLabel\"\n        role=\"button\"\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n          <path\n            d=\"M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\n          />\n        </svg>\n      </a>\n    </li>\n  </ul>\n</nav>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NggPaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NggPaginationComponent, selector: "ngg-pagination", inputs: { i18n: "i18n", size: "size", displayPages: "displayPages", length: "length", pageSize: "pageSize", pageIndex: "pageIndex" }, outputs: { page: "page" }, usesOnChanges: true, ngImport: i0, template: "<nav\n  [class]=\"'pagination ' + size\"\n  role=\"navigation\"\n  [attr.aria-label]=\"i18n.paginationLabel\"\n  *ngIf=\"totalPages > 1\"\n>\n  <ul class=\"gds-reset\">\n    <li *ngIf=\"hasPrevious()\">\n      <a\n        class=\"gds-reset\"\n        tabindex=\"0\"\n        (click)=\"gotoPrevious()\"\n        (keydown.enter)=\"gotoPrevious()\"\n        [attr.aria-label]=\"i18n.previousPageLabel\"\n        role=\"button\"\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n          <path\n            d=\"M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z\"\n          />\n        </svg>\n      </a>\n    </li>\n\n    <li>\n      <a\n        class=\"gds-reset\"\n        tabindex=\"0\"\n        (click)=\"gotoFirst()\"\n        (keydown.enter)=\"gotoFirst()\"\n        [attr.aria-current]=\"pageIndex === 0 ? 'page' : null\"\n        [attr.aria-label]=\"i18n.firstPageLabel\"\n        role=\"button\"\n      >\n        1\n      </a>\n    </li>\n    <li *ngIf=\"pageIndicies[0] > 1\" aria-hidden=\"true\">...</li>\n\n    <li *ngFor=\"let index of pageIndicies\">\n      <a\n        class=\"gds-reset\"\n        tabindex=\"0\"\n        (click)=\"goto(index)\"\n        (keydown.enter)=\"goto(index)\"\n        [attr.aria-current]=\"pageIndex === index ? 'page' : null\"\n        [attr.aria-label]=\"i18n.getPageLabel(index)\"\n        role=\"button\"\n      >\n        {{ index + 1 }}\n      </a>\n    </li>\n\n    <li\n      *ngIf=\"pageIndicies[pageIndicies.length - 1] < totalPages - 2\"\n      aria-hidden=\"true\"\n    >\n      ...\n    </li>\n\n    <li>\n      <a\n        class=\"gds-reset\"\n        tabindex=\"0\"\n        (click)=\"gotoLast()\"\n        (keydown.enter)=\"gotoLast()\"\n        [attr.aria-current]=\"pageIndex === totalPages - 1 ? 'page' : null\"\n        [attr.aria-label]=\"i18n.lastPageLabel\"\n        role=\"button\"\n      >\n        {{ totalPages }}\n      </a>\n    </li>\n    <li *ngIf=\"hasNext()\">\n      <a\n        class=\"gds-reset\"\n        tabindex=\"0\"\n        (click)=\"gotoNext()\"\n        (keydown.enter)=\"gotoNext()\"\n        [attr.aria-label]=\"i18n.nextPageLabel\"\n        role=\"button\"\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n          <path\n            d=\"M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\n          />\n        </svg>\n      </a>\n    </li>\n  </ul>\n</nav>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggPaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngg-pagination', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav\n  [class]=\"'pagination ' + size\"\n  role=\"navigation\"\n  [attr.aria-label]=\"i18n.paginationLabel\"\n  *ngIf=\"totalPages > 1\"\n>\n  <ul class=\"gds-reset\">\n    <li *ngIf=\"hasPrevious()\">\n      <a\n        class=\"gds-reset\"\n        tabindex=\"0\"\n        (click)=\"gotoPrevious()\"\n        [attr.aria-label]=\"i18n.previousPageLabel\"\n        role=\"button\"\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n          <path\n            d=\"M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z\"\n          />\n        </svg>\n      </a>\n    </li>\n\n    <li>\n      <a\n        class=\"gds-reset\"\n        tabindex=\"0\"\n        (click)=\"gotoFirst()\"\n        [attr.aria-current]=\"pageIndex === 0 ? 'page' : null\"\n        [attr.aria-label]=\"i18n.firstPageLabel\"\n        role=\"button\"\n      >\n        1\n      </a>\n    </li>\n    <li *ngIf=\"pageIndicies[0] > 1\" aria-hidden=\"true\">...</li>\n\n    <li *ngFor=\"let index of pageIndicies\">\n      <a\n        class=\"gds-reset\"\n        tabindex=\"0\"\n        (click)=\"goto(index)\"\n        [attr.aria-current]=\"pageIndex === index ? 'page' : null\"\n        [attr.aria-label]=\"i18n.getPageLabel(index)\"\n        role=\"button\"\n      >\n        {{ index + 1 }}\n      </a>\n    </li>\n\n    <li\n      *ngIf=\"pageIndicies[pageIndicies.length - 1] < totalPages - 2\"\n      aria-hidden=\"true\"\n    >\n      ...\n    </li>\n\n    <li>\n      <a\n        class=\"gds-reset\"\n        tabindex=\"0\"\n        (click)=\"gotoLast()\"\n        [attr.aria-current]=\"pageIndex === totalPages - 1 ? 'page' : null\"\n        [attr.aria-label]=\"i18n.lastPageLabel\"\n        role=\"button\"\n      >\n        {{ totalPages }}\n      </a>\n    </li>\n    <li *ngIf=\"hasNext()\">\n      <a\n        class=\"gds-reset\"\n        tabindex=\"0\"\n        (click)=\"gotoNext()\"\n        [attr.aria-label]=\"i18n.nextPageLabel\"\n        role=\"button\"\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n          <path\n            d=\"M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\n          />\n        </svg>\n      </a>\n    </li>\n  </ul>\n</nav>\n" }]
+            args: [{ selector: 'ngg-pagination', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav\n  [class]=\"'pagination ' + size\"\n  role=\"navigation\"\n  [attr.aria-label]=\"i18n.paginationLabel\"\n  *ngIf=\"totalPages > 1\"\n>\n  <ul class=\"gds-reset\">\n    <li *ngIf=\"hasPrevious()\">\n      <a\n        class=\"gds-reset\"\n        tabindex=\"0\"\n        (click)=\"gotoPrevious()\"\n        (keydown.enter)=\"gotoPrevious()\"\n        [attr.aria-label]=\"i18n.previousPageLabel\"\n        role=\"button\"\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n          <path\n            d=\"M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z\"\n          />\n        </svg>\n      </a>\n    </li>\n\n    <li>\n      <a\n        class=\"gds-reset\"\n        tabindex=\"0\"\n        (click)=\"gotoFirst()\"\n        (keydown.enter)=\"gotoFirst()\"\n        [attr.aria-current]=\"pageIndex === 0 ? 'page' : null\"\n        [attr.aria-label]=\"i18n.firstPageLabel\"\n        role=\"button\"\n      >\n        1\n      </a>\n    </li>\n    <li *ngIf=\"pageIndicies[0] > 1\" aria-hidden=\"true\">...</li>\n\n    <li *ngFor=\"let index of pageIndicies\">\n      <a\n        class=\"gds-reset\"\n        tabindex=\"0\"\n        (click)=\"goto(index)\"\n        (keydown.enter)=\"goto(index)\"\n        [attr.aria-current]=\"pageIndex === index ? 'page' : null\"\n        [attr.aria-label]=\"i18n.getPageLabel(index)\"\n        role=\"button\"\n      >\n        {{ index + 1 }}\n      </a>\n    </li>\n\n    <li\n      *ngIf=\"pageIndicies[pageIndicies.length - 1] < totalPages - 2\"\n      aria-hidden=\"true\"\n    >\n      ...\n    </li>\n\n    <li>\n      <a\n        class=\"gds-reset\"\n        tabindex=\"0\"\n        (click)=\"gotoLast()\"\n        (keydown.enter)=\"gotoLast()\"\n        [attr.aria-current]=\"pageIndex === totalPages - 1 ? 'page' : null\"\n        [attr.aria-label]=\"i18n.lastPageLabel\"\n        role=\"button\"\n      >\n        {{ totalPages }}\n      </a>\n    </li>\n    <li *ngIf=\"hasNext()\">\n      <a\n        class=\"gds-reset\"\n        tabindex=\"0\"\n        (click)=\"gotoNext()\"\n        (keydown.enter)=\"gotoNext()\"\n        [attr.aria-label]=\"i18n.nextPageLabel\"\n        role=\"button\"\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n          <path\n            d=\"M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\n          />\n        </svg>\n      </a>\n    </li>\n  </ul>\n</nav>\n" }]
         }], propDecorators: { i18n: [{
                 type: Input
             }], size: [{