@sebgroup/green-angular 1.0.0-beta.6 → 1.0.0-beta.9

package/fesm2020/sebgroup-green-angular.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input, NgModule, ViewChild } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, NgModule, EventEmitter, Output, ViewChild } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { createDropdown } from '@sebgroup/extract';
+import { dropdownValues, createDropdown, randomId, months, years, createDatepicker } from '@sebgroup/extract';
 
 class NggSegmentedControlComponent {
 }
@@ -60,34 +60,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
 class NggDropdownComponent {
     constructor(cd) {
         this.cd = cd;
+        this.loop = false;
         this.options = [];
-        this.value = undefined;
+        this.valueChange = new EventEmitter();
+        this.toggler = dropdownValues.elements?.toggler;
+        this.listbox = dropdownValues.elements?.listbox;
         this.trackByKey = (index, option) => {
             return option.key;
         };
     }
+    get value() {
+        return this._value;
+    }
+    set value(newValue) {
+        this.setSelectionByValue(newValue);
+    }
     ngAfterViewInit() {
         if (this.togglerRef?.nativeElement && this.listboxRef?.nativeElement) {
             this.handler = createDropdown(this.props, this.togglerRef.nativeElement, this.listboxRef.nativeElement, (dropdown) => {
                 this.dropdown = dropdown;
                 this.toggler = dropdown.elements.toggler;
                 this.listbox = dropdown.elements.listbox;
+                const selected = this.dropdown.options?.find((option) => option.selected);
+                if (selected && this._value !== selected?.value) {
+                    setTimeout(() => {
+                        this._value = selected.value;
+                        this.valueChange.emit(selected.value);
+                        this.onChangeFn && this.onChangeFn(selected.value);
+                        this.onTouchedFn && this.onTouchedFn();
+                    }, 0);
+                }
                 this.cd.detectChanges();
             });
-            this.selectFromValue(this.value);
         }
     }
     ngOnDestroy() {
         this.handler?.destroy();
     }
-    ngOnChanges() {
-        if (this.handler && this.dropdown) {
+    ngOnChanges(changes) {
+        if (this.handler &&
+            (changes.id || changes.text || changes.loop || changes.options)) {
             this.handler.update(this.props);
         }
     }
-    writeValue(obj) {
-        this.value = obj;
-        this.selectFromValue(this.value);
+    writeValue(value) {
+        this.value = value;
     }
     registerOnChange(fn) {
         this.onChangeFn = fn;
@@ -97,27 +114,31 @@ class NggDropdownComponent {
     }
     select(option) {
         this.handler?.select(option);
+        this._value = option.value;
+        this.valueChange.emit(option.value);
         this.onChangeFn && this.onChangeFn(option.value);
         this.onTouchedFn && this.onTouchedFn();
     }
     get props() {
         return {
-            id: this.id,
+            id: this.id || this.dropdown?.id,
             text: this.text,
             options: this.options,
             loop: this.loop,
+            value: this.value,
         };
     }
-    selectFromValue(value) {
-        if (this.handler && value !== undefined) {
-            const option = this.handler.dropdown.options.find((option) => option.value === value);
-            if (option)
-                this.handler?.select(option);
+    setSelectionByValue(value) {
+        if (this._value !== value) {
+            this._value = value;
+            const selected = this.handler?.dropdown?.options.find((option) => option.value === value);
+            if (selected)
+                this.handler?.select(selected);
         }
     }
 }
 NggDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NggDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-NggDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: NggDropdownComponent, selector: "ngg-dropdown", inputs: { id: "id", text: "text", loop: "loop", options: "options" }, providers: [
+NggDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: NggDropdownComponent, selector: "ngg-dropdown", inputs: { id: "id", text: "text", loop: "loop", label: "label", options: "options", valid: "valid", invalid: "invalid", value: "value" }, outputs: { valueChange: "valueChange" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: NggDropdownComponent,
@@ -125,7 +146,22 @@ NggDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         },
     ], viewQueries: [{ propertyName: "togglerRef", first: true, predicate: ["togglerRef"], descendants: true }, { propertyName: "listboxRef", first: true, predicate: ["listboxRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <div>
+      <span
+        class="label"
+        *ngIf="label"
+        [id]="toggler?.attributes?.id + '_label'"
+        >{{ label }}</span
+      >
       <button
+        [attr.aria-labelledby]="
+          label ? toggler?.attributes?.id + '_label' : null
+        "
+        [attr.aria-describedby]="
+          formInfo?.innerText && formInfo.innerText.length > 0
+            ? toggler?.attributes?.id + '_info'
+            : null
+        "
+        type="button"
         #togglerRef
         [id]="toggler?.attributes?.id"
         [attr.aria-haspopup]="toggler?.attributes?.['aria-haspopup']"
@@ -135,9 +171,17 @@ NggDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         [style]="toggler?.attributes?.style"
         [class]="toggler?.classes"
         (click)="handler?.toggle()"
+        [class.is-valid]="valid"
+        [class.is-invalid]="invalid"
       >
-        {{ dropdown?.text }}
+        <span>{{ dropdown?.text }}</span>
       </button>
+      <span
+        class="form-info"
+        #formInfo
+        [attr.id]="toggler?.attributes?.id + '_info'"
+        ><ng-content select="[data-form-info]"></ng-content
+      ></span>
       <div
         #listboxRef
         [id]="listbox?.attributes?.id"
@@ -150,6 +194,7 @@ NggDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         [class]="listbox?.classes"
       >
         <button
+          type="button"
           class="close m-4 m-sm-2 d-block d-sm-none"
           (click)="handler?.close()"
         >
@@ -163,21 +208,36 @@ NggDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             [attr.aria-selected]="option.attributes['aria-selected']"
             [style]="option.attributes.style"
             [class]="option.classes"
-            (click)="select(option)"
+            (click)="handler?.select(option)"
           >
             {{ option.key }}
           </li>
         </ul>
       </div>
     </div>
-  `, isInline: true, directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NggDropdownComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngg-dropdown',
                     template: `
     <div>
+      <span
+        class="label"
+        *ngIf="label"
+        [id]="toggler?.attributes?.id + '_label'"
+        >{{ label }}</span
+      >
       <button
+        [attr.aria-labelledby]="
+          label ? toggler?.attributes?.id + '_label' : null
+        "
+        [attr.aria-describedby]="
+          formInfo?.innerText && formInfo.innerText.length > 0
+            ? toggler?.attributes?.id + '_info'
+            : null
+        "
+        type="button"
         #togglerRef
         [id]="toggler?.attributes?.id"
         [attr.aria-haspopup]="toggler?.attributes?.['aria-haspopup']"
@@ -187,9 +247,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
         [style]="toggler?.attributes?.style"
         [class]="toggler?.classes"
         (click)="handler?.toggle()"
+        [class.is-valid]="valid"
+        [class.is-invalid]="invalid"
       >
-        {{ dropdown?.text }}
+        <span>{{ dropdown?.text }}</span>
       </button>
+      <span
+        class="form-info"
+        #formInfo
+        [attr.id]="toggler?.attributes?.id + '_info'"
+        ><ng-content select="[data-form-info]"></ng-content
+      ></span>
       <div
         #listboxRef
         [id]="listbox?.attributes?.id"
@@ -202,6 +270,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
         [class]="listbox?.classes"
       >
         <button
+          type="button"
           class="close m-4 m-sm-2 d-block d-sm-none"
           (click)="handler?.close()"
         >
@@ -215,7 +284,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
             [attr.aria-selected]="option.attributes['aria-selected']"
             [style]="option.attributes.style"
             [class]="option.classes"
-            (click)="select(option)"
+            (click)="handler?.select(option)"
           >
             {{ option.key }}
           </li>
@@ -238,8 +307,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
                 type: Input
             }], loop: [{
                 type: Input
+            }], label: [{
+                type: Input
             }], options: [{
                 type: Input
+            }], valid: [{
+                type: Input
+            }], invalid: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
             }], togglerRef: [{
                 type: ViewChild,
                 args: ['togglerRef']
@@ -262,17 +341,158 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
                 }]
         }] });
 
+class NggDatepickerComponent {
+    constructor(_cdr) {
+        this._cdr = _cdr;
+        this.id = randomId();
+        this.valueChange = new EventEmitter();
+        this._months = months({});
+        this.years = years({});
+        this.trackByKey = (index, option) => {
+            return option.key;
+        };
+        this.listener = (data, state) => {
+            if (this.dp && state) {
+                this.dp.state = { ...state };
+            }
+            this.onTouchedFn && this.onTouchedFn();
+            if (data) {
+                this.valueChange.emit(data.selectedDate);
+                this.onChangeFn && this.onChangeFn(data.selectedDate);
+                this.data = data;
+            }
+        };
+    }
+    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;
+        }
+    }
+    writeValue(value) {
+        this.value = value;
+        // When binding using ngModel we need to set initial select date
+        // once we get initial value as it's not available when component is created
+        if (value && this.dp && !this.data?.selectedDate) {
+            this.dp.select(value);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedFn = fn;
+    }
+    get data() {
+        return this._data;
+    }
+    set data(value) {
+        this._data = value;
+    }
+    trackWeek(index, week) {
+        return week;
+    }
+    ngAfterViewInit() {
+        // initialize datepicker
+        if (this.datepickerElRef &&
+            this.datepickerDialogElRef &&
+            this.dateInputElRef &&
+            !this.dp) {
+            this.dp = createDatepicker(this.listener, {
+                ...this.options,
+                selectedDate: this.value,
+            }, this.datepickerElRef.nativeElement, this.datepickerDialogElRef.nativeElement, this.dateInputElRef.nativeElement);
+            this._cdr.detectChanges();
+        }
+        else {
+            throw 'Missing one or more elements...';
+        }
+    }
+}
+NggDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NggDatepickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+NggDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: NggDatepickerComponent, selector: "ngg-datepicker", inputs: { options: "options", value: "value", id: "id", label: "label", valid: "valid", invalid: "invalid" }, 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 }], 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]=\"valid\"\n    [class.is-invalid]=\"invalid\"\n  >\n    <input\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)=\"dp?.select(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=\"sg-date\"\n  [class.active]=\"dp?.state?.isActive\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  aria-label=\"Choose Date\"\n>\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      text=\"Select\"\n      [value]=\"data?.month\"\n      (valueChange)=\"dp?.setMonth($event)\"\n    ></ngg-dropdown>\n    <ngg-dropdown\n      [options]=\"years\"\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]=\"day.selected ? true : null\"\n            [class.disabled]=\"!day.currentMonth\"\n            [class.sg-date-today]=\"day.today\"\n            [title]=\"day.today ? 'Today' : ''\"\n            tabindex=\"-1\"\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", components: [{ type: NggDropdownComponent, selector: "ngg-dropdown", inputs: ["id", "text", "loop", "label", "options", "valid", "invalid", "value"], outputs: ["valueChange"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", 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]=\"valid\"\n    [class.is-invalid]=\"invalid\"\n  >\n    <input\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)=\"dp?.select(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=\"sg-date\"\n  [class.active]=\"dp?.state?.isActive\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  aria-label=\"Choose Date\"\n>\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      text=\"Select\"\n      [value]=\"data?.month\"\n      (valueChange)=\"dp?.setMonth($event)\"\n    ></ngg-dropdown>\n    <ngg-dropdown\n      [options]=\"years\"\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]=\"day.selected ? true : null\"\n            [class.disabled]=\"!day.currentMonth\"\n            [class.sg-date-today]=\"day.today\"\n            [title]=\"day.today ? 'Today' : ''\"\n            tabindex=\"-1\"\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" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { options: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], valid: [{
+                type: Input
+            }], invalid: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], datepickerDialogElRef: [{
+                type: ViewChild,
+                args: ['datepickerDialogElRef']
+            }], dateInputElRef: [{
+                type: ViewChild,
+                args: ['dateInputElRef']
+            }], datepickerElRef: [{
+                type: ViewChild,
+                args: ['datepickerElRef']
+            }] } });
+
+class NggDatepickerModule {
+}
+NggDatepickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NggDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NggDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NggDatepickerModule, declarations: [NggDatepickerComponent], imports: [CommonModule, NggDropdownModule], exports: [NggDatepickerComponent] });
+NggDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NggDatepickerModule, imports: [[CommonModule, NggDropdownModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NggDatepickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NggDatepickerComponent],
+                    imports: [CommonModule, NggDropdownModule],
+                    exports: [NggDatepickerComponent],
+                }]
+        }] });
+
 class NggModule {
 }
 NggModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NggModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NggModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NggModule, imports: [CommonModule], exports: [NggSegmentedControlModule, NggDropdownModule] });
-NggModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NggModule, imports: [[CommonModule], NggSegmentedControlModule, NggDropdownModule] });
+NggModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NggModule, imports: [CommonModule], exports: [NggSegmentedControlModule, NggDropdownModule, NggDatepickerModule] });
+NggModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NggModule, imports: [[CommonModule], NggSegmentedControlModule, NggDropdownModule, NggDatepickerModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NggModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],
                     imports: [CommonModule],
-                    exports: [NggSegmentedControlModule, NggDropdownModule],
+                    exports: [NggSegmentedControlModule, NggDropdownModule, NggDatepickerModule],
                 }]
         }] });
 
@@ -280,5 +500,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NggDropdownComponent, NggDropdownModule, NggModule, NggSegmentedControlComponent, NggSegmentedControlModule };
+export { NggDatepickerComponent, NggDatepickerModule, NggDropdownComponent, NggDropdownModule, NggModule, NggSegmentedControlComponent, NggSegmentedControlModule };
 //# sourceMappingURL=sebgroup-green-angular.mjs.map

package/fesm2020/sebgroup-green-angular.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"sebgroup-green-angular.mjs","sources":["../../../../libs/angular/src/lib/segmented-control/segmented-control.component.ts","../../../../libs/angular/src/lib/segmented-control/segmented-control.module.ts","../../../../libs/angular/src/lib/dropdown/dropdown.component.ts","../../../../libs/angular/src/lib/dropdown/dropdown.module.ts","../../../../libs/angular/src/lib/green-angular.module.ts","../../../../libs/angular/src/sebgroup-green-angular.ts"],"sourcesContent":["import { Component, ChangeDetectionStrategy, Input } from '@angular/core'\nimport { Observable } from 'rxjs'\nexport interface SegmentedControl {\n  url: string\n  text: Observable<string> | string\n}\n@Component({\n  selector: 'ngg-segmented-control',\n  template: `\n    <div class=\"group\">\n      <a\n        *ngFor=\"let control of $controls | async\"\n        [routerLink]=\"control.url\"\n        routerLinkActive=\"active\"\n        class=\"button\"\n        >{{ control.text }}</a\n      >\n    </div>\n  `,\n  styles: [],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NggSegmentedControlComponent {\n  @Input() $controls: Observable<Array<SegmentedControl>> | undefined\n}\n","import { NgModule } from '@angular/core'\nimport { CommonModule } from '@angular/common'\nimport { NggSegmentedControlComponent } from './segmented-control.component'\nimport { RouterModule } from '@angular/router'\n\n@NgModule({\n  declarations: [NggSegmentedControlComponent],\n  imports: [RouterModule, CommonModule],\n  exports: [NggSegmentedControlComponent],\n})\nexport class NggSegmentedControlModule {}\n","import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  Input,\n  OnChanges,\n  OnDestroy,\n  ViewChild,\n} from '@angular/core'\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'\nimport {\n  createDropdown,\n  AbstractDropdown,\n  DropdownHandler,\n  DropdownOption,\n  ExtendedDropdownOption,\n  ElementProps,\n  DropdownArgs,\n} from '@sebgroup/extract'\n\n@Component({\n  selector: 'ngg-dropdown',\n  template: `\n    <div>\n      <button\n        #togglerRef\n        [id]=\"toggler?.attributes?.id\"\n        [attr.aria-haspopup]=\"toggler?.attributes?.['aria-haspopup']\"\n        [attr.aria-expanded]=\"toggler?.attributes?.['aria-expanded']\"\n        [attr.aria-owns]=\"toggler?.attributes?.['aria-owns']\"\n        [tabindex]=\"toggler?.attributes?.tabIndex\"\n        [style]=\"toggler?.attributes?.style\"\n        [class]=\"toggler?.classes\"\n        (click)=\"handler?.toggle()\"\n      >\n        {{ dropdown?.text }}\n      </button>\n      <div\n        #listboxRef\n        [id]=\"listbox?.attributes?.id\"\n        [attr.role]=\"listbox?.attributes?.role\"\n        [attr.aria-activedescendant]=\"\n          listbox?.attributes?.['aria-activedescendant']\n        \"\n        [tabindex]=\"listbox?.attributes?.tabIndex\"\n        [style]=\"listbox?.attributes?.style\"\n        [class]=\"listbox?.classes\"\n      >\n        <button\n          class=\"close m-4 m-sm-2 d-block d-sm-none\"\n          (click)=\"handler?.close()\"\n        >\n          <span class=\"sr-only\">Close</span>\n        </button>\n        <ul role=\"listbox\">\n          <li\n            *ngFor=\"let option of dropdown?.options; trackBy: trackByKey\"\n            [id]=\"option.attributes.id\"\n            [attr.role]=\"option.attributes.role\"\n            [attr.aria-selected]=\"option.attributes['aria-selected']\"\n            [style]=\"option.attributes.style\"\n            [class]=\"option.classes\"\n            (click)=\"select(option)\"\n          >\n            {{ option.key }}\n          </li>\n        </ul>\n      </div>\n    </div>\n  `,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: NggDropdownComponent,\n      multi: true,\n    },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NggDropdownComponent\n  implements ControlValueAccessor, AfterViewInit, OnDestroy, OnChanges\n{\n  @Input() id?: string\n  @Input() text?: string\n  @Input() loop?: boolean\n  @Input() options: DropdownOption[] = []\n\n  @ViewChild('togglerRef') public togglerRef:\n    | ElementRef<HTMLElement>\n    | undefined\n\n  @ViewChild('listboxRef') public listboxRef:\n    | ElementRef<HTMLElement>\n    | undefined\n\n  value: any = undefined\n  onChangeFn?: any\n  onTouchedFn?: any\n\n  dropdown?: AbstractDropdown\n  handler?: DropdownHandler\n  toggler?: Partial<ElementProps>\n  listbox?: Partial<ElementProps>\n\n  constructor(private cd: ChangeDetectorRef) {}\n\n  ngAfterViewInit(): void {\n    if (this.togglerRef?.nativeElement && this.listboxRef?.nativeElement) {\n      this.handler = createDropdown(\n        this.props,\n        this.togglerRef.nativeElement,\n        this.listboxRef.nativeElement,\n        (dropdown) => {\n          this.dropdown = dropdown\n          this.toggler = dropdown.elements.toggler\n          this.listbox = dropdown.elements.listbox\n          this.cd.detectChanges()\n        }\n      )\n\n      this.selectFromValue(this.value)\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.handler?.destroy()\n  }\n\n  ngOnChanges(): void {\n    if (this.handler && this.dropdown) {\n      this.handler.update(this.props)\n    }\n  }\n\n  writeValue(obj: any): void {\n    this.value = obj\n    this.selectFromValue(this.value)\n  }\n\n  registerOnChange(fn: any): void {\n    this.onChangeFn = fn\n  }\n\n  registerOnTouched(fn: any): void {\n    this.onTouchedFn = fn\n  }\n\n  select(option: ExtendedDropdownOption) {\n    this.handler?.select(option)\n    this.onChangeFn && this.onChangeFn(option.value)\n    this.onTouchedFn && this.onTouchedFn()\n  }\n\n  trackByKey = (index: number, option: ExtendedDropdownOption): string => {\n    return option.key\n  }\n\n  private get props(): DropdownArgs {\n    return {\n      id: this.id,\n      text: this.text,\n      options: this.options,\n      loop: this.loop,\n    }\n  }\n\n  private selectFromValue(value: any) {\n    if (this.handler && value !== undefined) {\n      const option = this.handler.dropdown.options.find(\n        (option) => option.value === value\n      )\n      if (option) this.handler?.select(option)\n    }\n  }\n}\n","import { NgModule } from '@angular/core'\nimport { CommonModule } from '@angular/common'\nimport { NggDropdownComponent } from './dropdown.component'\n\n@NgModule({\n  declarations: [NggDropdownComponent],\n  imports: [CommonModule],\n  exports: [NggDropdownComponent],\n})\nexport class NggDropdownModule {}\n","import { NgModule } from '@angular/core'\nimport { CommonModule } from '@angular/common'\nimport { NggSegmentedControlModule } from './segmented-control/segmented-control.module'\nimport { NggDropdownModule } from './dropdown/dropdown.module'\n\n@NgModule({\n  declarations: [],\n  imports: [CommonModule],\n  exports: [NggSegmentedControlModule, NggDropdownModule],\n})\nexport class NggModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"sebgroup-green-angular.mjs","sources":["../../../../libs/angular/src/lib/segmented-control/segmented-control.component.ts","../../../../libs/angular/src/lib/segmented-control/segmented-control.module.ts","../../../../libs/angular/src/lib/dropdown/dropdown.component.ts","../../../../libs/angular/src/lib/dropdown/dropdown.module.ts","../../../../libs/angular/src/lib/datepicker/datepicker.component.ts","../../../../libs/angular/src/lib/datepicker/datepicker.component.html","../../../../libs/angular/src/lib/datepicker/datepicker.module.ts","../../../../libs/angular/src/lib/green-angular.module.ts","../../../../libs/angular/src/sebgroup-green-angular.ts"],"sourcesContent":["import { Component, ChangeDetectionStrategy, Input } from '@angular/core'\nimport { Observable } from 'rxjs'\nexport interface SegmentedControl {\n  url: string\n  text: Observable<string> | string\n}\n@Component({\n  selector: 'ngg-segmented-control',\n  template: `\n    <div class=\"group\">\n      <a\n        *ngFor=\"let control of $controls | async\"\n        [routerLink]=\"control.url\"\n        routerLinkActive=\"active\"\n        class=\"button\"\n        >{{ control.text }}</a\n      >\n    </div>\n  `,\n  styles: [],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NggSegmentedControlComponent {\n  @Input() $controls: Observable<Array<SegmentedControl>> | undefined\n}\n","import { NgModule } from '@angular/core'\nimport { CommonModule } from '@angular/common'\nimport { NggSegmentedControlComponent } from './segmented-control.component'\nimport { RouterModule } from '@angular/router'\n\n@NgModule({\n  declarations: [NggSegmentedControlComponent],\n  imports: [RouterModule, CommonModule],\n  exports: [NggSegmentedControlComponent],\n})\nexport class NggSegmentedControlModule {}\n","import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  Input,\n  OnChanges,\n  OnDestroy,\n  Output,\n  ViewChild,\n  EventEmitter,\n  SimpleChanges,\n} from '@angular/core'\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'\nimport {\n  createDropdown,\n  AbstractDropdown,\n  DropdownHandler,\n  DropdownOption,\n  ExtendedDropdownOption,\n  ElementProps,\n  DropdownArgs,\n  dropdownValues,\n} from '@sebgroup/extract'\n\n@Component({\n  selector: 'ngg-dropdown',\n  template: `\n    <div>\n      <span\n        class=\"label\"\n        *ngIf=\"label\"\n        [id]=\"toggler?.attributes?.id + '_label'\"\n        >{{ label }}</span\n      >\n      <button\n        [attr.aria-labelledby]=\"\n          label ? toggler?.attributes?.id + '_label' : null\n        \"\n        [attr.aria-describedby]=\"\n          formInfo?.innerText && formInfo.innerText.length > 0\n            ? toggler?.attributes?.id + '_info'\n            : null\n        \"\n        type=\"button\"\n        #togglerRef\n        [id]=\"toggler?.attributes?.id\"\n        [attr.aria-haspopup]=\"toggler?.attributes?.['aria-haspopup']\"\n        [attr.aria-expanded]=\"toggler?.attributes?.['aria-expanded']\"\n        [attr.aria-owns]=\"toggler?.attributes?.['aria-owns']\"\n        [tabindex]=\"toggler?.attributes?.tabIndex\"\n        [style]=\"toggler?.attributes?.style\"\n        [class]=\"toggler?.classes\"\n        (click)=\"handler?.toggle()\"\n        [class.is-valid]=\"valid\"\n        [class.is-invalid]=\"invalid\"\n      >\n        <span>{{ dropdown?.text }}</span>\n      </button>\n      <span\n        class=\"form-info\"\n        #formInfo\n        [attr.id]=\"toggler?.attributes?.id + '_info'\"\n        ><ng-content select=\"[data-form-info]\"></ng-content\n      ></span>\n      <div\n        #listboxRef\n        [id]=\"listbox?.attributes?.id\"\n        [attr.role]=\"listbox?.attributes?.role\"\n        [attr.aria-activedescendant]=\"\n          listbox?.attributes?.['aria-activedescendant']\n        \"\n        [tabindex]=\"listbox?.attributes?.tabIndex\"\n        [style]=\"listbox?.attributes?.style\"\n        [class]=\"listbox?.classes\"\n      >\n        <button\n          type=\"button\"\n          class=\"close m-4 m-sm-2 d-block d-sm-none\"\n          (click)=\"handler?.close()\"\n        >\n          <span class=\"sr-only\">Close</span>\n        </button>\n        <ul role=\"listbox\">\n          <li\n            *ngFor=\"let option of dropdown?.options; trackBy: trackByKey\"\n            [id]=\"option.attributes.id\"\n            [attr.role]=\"option.attributes.role\"\n            [attr.aria-selected]=\"option.attributes['aria-selected']\"\n            [style]=\"option.attributes.style\"\n            [class]=\"option.classes\"\n            (click)=\"handler?.select(option)\"\n          >\n            {{ option.key }}\n          </li>\n        </ul>\n      </div>\n    </div>\n  `,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: NggDropdownComponent,\n      multi: true,\n    },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NggDropdownComponent\n  implements ControlValueAccessor, AfterViewInit, OnDestroy, OnChanges\n{\n  @Input() id?: string\n  @Input() text?: string\n  @Input() loop?: boolean = false\n  @Input() label?: string\n  @Input() options: DropdownOption[] = []\n  @Input() valid?: boolean\n  @Input() invalid?: boolean\n\n  @Input()\n  get value(): any {\n    return this._value\n  }\n  set value(newValue: any) {\n    this.setSelectionByValue(newValue)\n  }\n  private _value: any\n\n  @Output() readonly valueChange: EventEmitter<any> = new EventEmitter<any>()\n\n  @ViewChild('togglerRef') public togglerRef:\n    | ElementRef<HTMLElement>\n    | undefined\n\n  @ViewChild('listboxRef') public listboxRef:\n    | ElementRef<HTMLElement>\n    | undefined\n\n  onChangeFn?: (value: any) => void\n  onTouchedFn?: any\n\n  dropdown?: AbstractDropdown\n  handler?: DropdownHandler\n  toggler?: Partial<ElementProps> = dropdownValues.elements?.toggler\n  listbox?: Partial<ElementProps> = dropdownValues.elements?.listbox\n\n  constructor(private cd: ChangeDetectorRef) {}\n\n  ngAfterViewInit(): void {\n    if (this.togglerRef?.nativeElement && this.listboxRef?.nativeElement) {\n      this.handler = createDropdown(\n        this.props,\n        this.togglerRef.nativeElement,\n        this.listboxRef.nativeElement,\n        (dropdown) => {\n          this.dropdown = dropdown\n          this.toggler = dropdown.elements.toggler\n          this.listbox = dropdown.elements.listbox\n\n          const selected = this.dropdown.options?.find(\n            (option) => option.selected\n          )\n          if (selected && this._value !== selected?.value) {\n            setTimeout(() => {\n              this._value = selected.value\n              this.valueChange.emit(selected.value)\n              this.onChangeFn && this.onChangeFn(selected.value)\n              this.onTouchedFn && this.onTouchedFn()\n            }, 0)\n          }\n          this.cd.detectChanges()\n        }\n      )\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.handler?.destroy()\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (\n      this.handler &&\n      (changes.id || changes.text || changes.loop || changes.options)\n    ) {\n      this.handler.update(this.props)\n    }\n  }\n\n  writeValue(value: any): void {\n    this.value = value\n  }\n\n  registerOnChange(fn: any): void {\n    this.onChangeFn = fn\n  }\n\n  registerOnTouched(fn: any): void {\n    this.onTouchedFn = fn\n  }\n\n  select(option: ExtendedDropdownOption) {\n    this.handler?.select(option)\n    this._value = option.value\n    this.valueChange.emit(option.value)\n    this.onChangeFn && this.onChangeFn(option.value)\n    this.onTouchedFn && this.onTouchedFn()\n  }\n\n  trackByKey = (index: number, option: ExtendedDropdownOption): string => {\n    return option.key\n  }\n\n  private get props(): DropdownArgs {\n    return {\n      id: this.id || this.dropdown?.id,\n      text: this.text,\n      options: this.options,\n      loop: this.loop,\n      value: this.value,\n    }\n  }\n\n  private setSelectionByValue(value: any) {\n    if (this._value !== value) {\n      this._value = value\n\n      const selected = this.handler?.dropdown?.options.find(\n        (option) => option.value === value\n      )\n      if (selected) this.handler?.select(selected)\n    }\n  }\n}\n","import { NgModule } from '@angular/core'\nimport { CommonModule } from '@angular/common'\nimport { NggDropdownComponent } from './dropdown.component'\n\n@NgModule({\n  declarations: [NggDropdownComponent],\n  imports: [CommonModule],\n  exports: [NggDropdownComponent],\n})\nexport class NggDropdownModule {}\n","import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  Input,\n  Output,\n  ViewChild,\n  EventEmitter,\n  ChangeDetectorRef,\n} from '@angular/core'\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'\nimport {\n  AbstractDropdown,\n  DropdownHandler,\n  ExtendedDropdownOption,\n  ElementProps,\n  DatepickerData,\n  Datepicker,\n  createDatepicker,\n  DatepickerState,\n  DropdownOption,\n  months,\n  years,\n  randomId,\n  DatepickerOptions,\n} from '@sebgroup/extract'\n\n@Component({\n  selector: 'ngg-datepicker',\n  templateUrl: 'datepicker.component.html',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: NggDatepickerComponent,\n      multi: true,\n    },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NggDatepickerComponent\n  implements ControlValueAccessor, AfterViewInit\n{\n  get months(): Array<DropdownOption> {\n    return this._months\n  }\n\n  set months(value: Array<DropdownOption>) {\n    this._months = value\n  }\n  @Input()\n  get options(): DatepickerOptions {\n    return <DatepickerOptions>this._options\n  }\n  set options(value: DatepickerOptions) {\n    this._options = value\n    if (value.locale) {\n      this.months = months({ locale: this.options?.locale })\n    }\n  }\n  @Input()\n  get value(): string | Date | undefined {\n    return this._value\n  }\n  set value(newValue: string | Date | undefined) {\n    if (newValue !== this._value) {\n      this._value = newValue\n    }\n  }\n  @Input() id?: string = randomId()\n  @Input() label?: string\n  @Input() valid?: boolean\n  @Input() invalid?: boolean\n  @Output() readonly valueChange: EventEmitter<any> = new EventEmitter<any>()\n  @ViewChild('datepickerDialogElRef') public datepickerDialogElRef:\n    | ElementRef<HTMLElement>\n    | undefined\n  @ViewChild('dateInputElRef') public dateInputElRef:\n    | ElementRef<HTMLInputElement>\n    | undefined\n  @ViewChild('datepickerElRef') public datepickerElRef:\n    | ElementRef<HTMLElement>\n    | undefined\n\n  onChangeFn?: (value: any) => void\n  onTouchedFn?: any\n\n  dropdown?: AbstractDropdown\n  handler?: DropdownHandler\n  toggler?: Partial<ElementProps>\n  listbox?: Partial<ElementProps>\n  _value: string | Date | undefined\n  private _months: Array<DropdownOption> = months({})\n  years: Array<DropdownOption> = years({})\n  private _options?: DatepickerOptions\n\n  dp: Datepicker | undefined\n  private _data: DatepickerData | undefined\n\n  constructor(private _cdr: ChangeDetectorRef) {}\n\n  writeValue(value: any): void {\n    this.value = value\n\n    // When binding using ngModel we need to set initial select date\n    // once we get initial value as it's not available when component is created\n    if (value && this.dp && !this.data?.selectedDate) {\n      this.dp.select(value)\n    }\n  }\n\n  registerOnChange(fn: any): void {\n    this.onChangeFn = fn\n  }\n\n  registerOnTouched(fn: any): void {\n    this.onTouchedFn = fn\n  }\n\n  trackByKey = (index: number, option: ExtendedDropdownOption): string => {\n    return option.key\n  }\n\n  get data(): DatepickerData | undefined {\n    return this._data\n  }\n\n  set data(value: DatepickerData | undefined) {\n    this._data = value\n  }\n\n  listener = (\n    data: DatepickerData | undefined,\n    state: DatepickerState | undefined\n  ) => {\n    if (this.dp && state) {\n      this.dp.state = { ...state }\n    }\n\n    this.onTouchedFn && this.onTouchedFn()\n\n    if (data) {\n      this.valueChange.emit(data.selectedDate)\n      this.onChangeFn && this.onChangeFn(data.selectedDate)\n      this.data = data\n    }\n  }\n  trackWeek(index: any, week: any) {\n    return week\n  }\n\n  ngAfterViewInit(): void {\n    // initialize datepicker\n    if (\n      this.datepickerElRef &&\n      this.datepickerDialogElRef &&\n      this.dateInputElRef &&\n      !this.dp\n    ) {\n      this.dp = createDatepicker(\n        this.listener,\n        {\n          ...this.options,\n          selectedDate: this.value,\n        },\n        this.datepickerElRef.nativeElement,\n        this.datepickerDialogElRef.nativeElement,\n        this.dateInputElRef.nativeElement\n      )\n      this._cdr.detectChanges()\n    } else {\n      throw 'Missing one or more elements...'\n    }\n  }\n}\n","<div class=\"form-group\">\n  <label *ngIf=\"label\" [for]=\"id\">{{ label }}</label>\n  <div\n    class=\"group\"\n    #datepickerElRef\n    [class.is-valid]=\"valid\"\n    [class.is-invalid]=\"invalid\"\n  >\n    <input\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)=\"dp?.select(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=\"sg-date\"\n  [class.active]=\"dp?.state?.isActive\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  aria-label=\"Choose Date\"\n>\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      text=\"Select\"\n      [value]=\"data?.month\"\n      (valueChange)=\"dp?.setMonth($event)\"\n    ></ngg-dropdown>\n    <ngg-dropdown\n      [options]=\"years\"\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]=\"day.selected ? true : null\"\n            [class.disabled]=\"!day.currentMonth\"\n            [class.sg-date-today]=\"day.today\"\n            [title]=\"day.today ? 'Today' : ''\"\n            tabindex=\"-1\"\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","import { NgModule } from '@angular/core'\nimport { CommonModule } from '@angular/common'\nimport { NggDatepickerComponent } from './datepicker.component'\nimport { NggDropdownModule } from '../dropdown/dropdown.module'\n\n@NgModule({\n  declarations: [NggDatepickerComponent],\n  imports: [CommonModule, NggDropdownModule],\n  exports: [NggDatepickerComponent],\n})\nexport class NggDatepickerModule {}\n","import { NgModule } from '@angular/core'\nimport { CommonModule } from '@angular/common'\nimport { NggSegmentedControlModule } from './segmented-control/segmented-control.module'\nimport { NggDropdownModule } from './dropdown/dropdown.module'\nimport { NggDatepickerModule } from './datepicker/datepicker.module'\n\n@NgModule({\n  declarations: [],\n  imports: [CommonModule],\n  exports: [NggSegmentedControlModule, NggDropdownModule, NggDatepickerModule],\n})\nexport class NggModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/index.d.ts

@@ -1,5 +1,7 @@
 export * from './lib/green-angular.module';
 export * from './lib/dropdown/dropdown.module';
 export * from './lib/dropdown/dropdown.component';
+export * from './lib/datepicker/datepicker.module';
+export * from './lib/datepicker/datepicker.component';
 export * from './lib/segmented-control/segmented-control.module';
 export * from './lib/segmented-control/segmented-control.component';

package/lib/datepicker/datepicker.component.d.ts

@@ -0,0 +1,45 @@
+import { AfterViewInit, ElementRef, EventEmitter, ChangeDetectorRef } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { AbstractDropdown, DropdownHandler, ExtendedDropdownOption, ElementProps, DatepickerData, Datepicker, DatepickerState, DropdownOption, DatepickerOptions } from '@sebgroup/extract';
+import * as i0 from "@angular/core";
+export declare class NggDatepickerComponent implements ControlValueAccessor, AfterViewInit {
+    private _cdr;
+    get months(): Array<DropdownOption>;
+    set months(value: Array<DropdownOption>);
+    get options(): DatepickerOptions;
+    set options(value: DatepickerOptions);
+    get value(): string | Date | undefined;
+    set value(newValue: string | Date | undefined);
+    id?: string;
+    label?: string;
+    valid?: boolean;
+    invalid?: boolean;
+    readonly valueChange: EventEmitter<any>;
+    datepickerDialogElRef: ElementRef<HTMLElement> | undefined;
+    dateInputElRef: ElementRef<HTMLInputElement> | undefined;
+    datepickerElRef: ElementRef<HTMLElement> | undefined;
+    onChangeFn?: (value: any) => void;
+    onTouchedFn?: any;
+    dropdown?: AbstractDropdown;
+    handler?: DropdownHandler;
+    toggler?: Partial<ElementProps>;
+    listbox?: Partial<ElementProps>;
+    _value: string | Date | undefined;
+    private _months;
+    years: Array<DropdownOption>;
+    private _options?;
+    dp: Datepicker | undefined;
+    private _data;
+    constructor(_cdr: ChangeDetectorRef);
+    writeValue(value: any): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    trackByKey: (index: number, option: ExtendedDropdownOption) => string;
+    get data(): DatepickerData | undefined;
+    set data(value: DatepickerData | undefined);
+    listener: (data: DatepickerData | undefined, state: DatepickerState | undefined) => void;
+    trackWeek(index: any, week: any): any;
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NggDatepickerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NggDatepickerComponent, "ngg-datepicker", never, { "options": "options"; "value": "value"; "id": "id"; "label": "label"; "valid": "valid"; "invalid": "invalid"; }, { "valueChange": "valueChange"; }, never, ["[data-form-info]"]>;
+}

package/lib/datepicker/datepicker.module.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./datepicker.component";
+import * as i2 from "@angular/common";
+import * as i3 from "../dropdown/dropdown.module";
+export declare class NggDatepickerModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<NggDatepickerModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NggDatepickerModule, [typeof i1.NggDatepickerComponent], [typeof i2.CommonModule, typeof i3.NggDropdownModule], [typeof i1.NggDatepickerComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<NggDatepickerModule>;
+}

package/lib/dropdown/dropdown.component.d.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, ChangeDetectorRef, ElementRef, OnChanges, OnDestroy } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, ElementRef, OnChanges, OnDestroy, EventEmitter, SimpleChanges } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { AbstractDropdown, DropdownHandler, DropdownOption, ExtendedDropdownOption, ElementProps } from '@sebgroup/extract';
 import * as i0 from "@angular/core";
@@ -7,11 +7,17 @@ export declare class NggDropdownComponent implements ControlValueAccessor, After
     id?: string;
     text?: string;
     loop?: boolean;
+    label?: string;
     options: DropdownOption[];
+    valid?: boolean;
+    invalid?: boolean;
+    get value(): any;
+    set value(newValue: any);
+    private _value;
+    readonly valueChange: EventEmitter<any>;
     togglerRef: ElementRef<HTMLElement> | undefined;
     listboxRef: ElementRef<HTMLElement> | undefined;
-    value: any;
-    onChangeFn?: any;
+    onChangeFn?: (value: any) => void;
     onTouchedFn?: any;
     dropdown?: AbstractDropdown;
     handler?: DropdownHandler;
@@ -20,14 +26,14 @@ export declare class NggDropdownComponent implements ControlValueAccessor, After
     constructor(cd: ChangeDetectorRef);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
-    ngOnChanges(): void;
-    writeValue(obj: any): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    writeValue(value: any): void;
     registerOnChange(fn: any): void;
     registerOnTouched(fn: any): void;
     select(option: ExtendedDropdownOption): void;
     trackByKey: (index: number, option: ExtendedDropdownOption) => string;
     private get props();
-    private selectFromValue;
+    private setSelectionByValue;
     static ɵfac: i0.ɵɵFactoryDeclaration<NggDropdownComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NggDropdownComponent, "ngg-dropdown", never, { "id": "id"; "text": "text"; "loop": "loop"; "options": "options"; }, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NggDropdownComponent, "ngg-dropdown", never, { "id": "id"; "text": "text"; "loop": "loop"; "label": "label"; "options": "options"; "valid": "valid"; "invalid": "invalid"; "value": "value"; }, { "valueChange": "valueChange"; }, never, ["[data-form-info]"]>;
 }