@sebgroup/green-angular 1.0.0-beta.1 → 1.0.0-beta.10

package/fesm2020/sebgroup-green-angular.mjs

@@ -0,0 +1,511 @@
+import * as i0 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 { dropdownValues, createDropdown, randomId, months, years, createDatepicker } from '@sebgroup/extract';
+
+class NggSegmentedControlComponent {
+}
+NggSegmentedControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NggSegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NggSegmentedControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: NggSegmentedControlComponent, selector: "ngg-segmented-control", inputs: { $controls: "$controls" }, ngImport: i0, template: `
+    <div class="group">
+      <a
+        *ngFor="let control of $controls | async"
+        [routerLink]="control.url"
+        routerLinkActive="active"
+        class="button"
+        >{{ control.text }}</a
+      >
+    </div>
+  `, isInline: true, directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], pipes: { "async": i1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NggSegmentedControlComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngg-segmented-control',
+                    template: `
+    <div class="group">
+      <a
+        *ngFor="let control of $controls | async"
+        [routerLink]="control.url"
+        routerLinkActive="active"
+        class="button"
+        >{{ control.text }}</a
+      >
+    </div>
+  `,
+                    styles: [],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { $controls: [{
+                type: Input
+            }] } });
+
+class NggSegmentedControlModule {
+}
+NggSegmentedControlModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NggSegmentedControlModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NggSegmentedControlModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NggSegmentedControlModule, declarations: [NggSegmentedControlComponent], imports: [RouterModule, CommonModule], exports: [NggSegmentedControlComponent] });
+NggSegmentedControlModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NggSegmentedControlModule, imports: [[RouterModule, CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NggSegmentedControlModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NggSegmentedControlComponent],
+                    imports: [RouterModule, CommonModule],
+                    exports: [NggSegmentedControlComponent],
+                }]
+        }] });
+
+class NggDropdownComponent {
+    constructor(cd) {
+        this.cd = cd;
+        this.loop = false;
+        this.options = [];
+        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();
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.handler?.destroy();
+    }
+    ngOnChanges(changes) {
+        if (this.handler &&
+            (changes.id || changes.text || changes.loop || changes.options)) {
+            this.handler.update(this.props);
+        }
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedFn = fn;
+    }
+    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 || this.dropdown?.id,
+            text: this.text,
+            options: this.options,
+            loop: this.loop,
+            value: this.value,
+        };
+    }
+    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", label: "label", options: "options", valid: "valid", invalid: "invalid", value: "value" }, outputs: { valueChange: "valueChange" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: NggDropdownComponent,
+            multi: true,
+        },
+    ], 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']"
+        [attr.aria-expanded]="toggler?.attributes?.['aria-expanded']"
+        [attr.aria-owns]="toggler?.attributes?.['aria-owns']"
+        [tabindex]="toggler?.attributes?.tabIndex"
+        [style]="toggler?.attributes?.style"
+        [class]="toggler?.classes"
+        (click)="handler?.toggle()"
+        [class.is-valid]="valid"
+        [class.is-invalid]="invalid"
+      >
+        <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"
+        [attr.role]="listbox?.attributes?.role"
+        [attr.aria-activedescendant]="
+          listbox?.attributes?.['aria-activedescendant']
+        "
+        [tabindex]="listbox?.attributes?.tabIndex"
+        [style]="listbox?.attributes?.style"
+        [class]="listbox?.classes"
+      >
+        <button
+          type="button"
+          class="close m-4 m-sm-2 d-block d-sm-none"
+          (click)="handler?.close()"
+        >
+          <span class="sr-only">Close</span>
+        </button>
+        <ul role="listbox">
+          <li
+            *ngFor="let option of dropdown?.options; trackBy: trackByKey"
+            [id]="option.attributes.id"
+            [attr.role]="option.attributes.role"
+            [attr.aria-selected]="option.attributes['aria-selected']"
+            [style]="option.attributes.style"
+            [class]="option.classes"
+            (click)="handler?.select(option)"
+          >
+            {{ option.key }}
+          </li>
+        </ul>
+      </div>
+    </div>
+  `, 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']"
+        [attr.aria-expanded]="toggler?.attributes?.['aria-expanded']"
+        [attr.aria-owns]="toggler?.attributes?.['aria-owns']"
+        [tabindex]="toggler?.attributes?.tabIndex"
+        [style]="toggler?.attributes?.style"
+        [class]="toggler?.classes"
+        (click)="handler?.toggle()"
+        [class.is-valid]="valid"
+        [class.is-invalid]="invalid"
+      >
+        <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"
+        [attr.role]="listbox?.attributes?.role"
+        [attr.aria-activedescendant]="
+          listbox?.attributes?.['aria-activedescendant']
+        "
+        [tabindex]="listbox?.attributes?.tabIndex"
+        [style]="listbox?.attributes?.style"
+        [class]="listbox?.classes"
+      >
+        <button
+          type="button"
+          class="close m-4 m-sm-2 d-block d-sm-none"
+          (click)="handler?.close()"
+        >
+          <span class="sr-only">Close</span>
+        </button>
+        <ul role="listbox">
+          <li
+            *ngFor="let option of dropdown?.options; trackBy: trackByKey"
+            [id]="option.attributes.id"
+            [attr.role]="option.attributes.role"
+            [attr.aria-selected]="option.attributes['aria-selected']"
+            [style]="option.attributes.style"
+            [class]="option.classes"
+            (click)="handler?.select(option)"
+          >
+            {{ option.key }}
+          </li>
+        </ul>
+      </div>
+    </div>
+  `,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: NggDropdownComponent,
+                            multi: true,
+                        },
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { id: [{
+                type: Input
+            }], text: [{
+                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']
+            }], listboxRef: [{
+                type: ViewChild,
+                args: ['listboxRef']
+            }] } });
+
+class NggDropdownModule {
+}
+NggDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NggDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NggDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NggDropdownModule, declarations: [NggDropdownComponent], imports: [CommonModule], exports: [NggDropdownComponent] });
+NggDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NggDropdownModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NggDropdownModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NggDropdownComponent],
+                    imports: [CommonModule],
+                    exports: [NggDropdownComponent],
+                }]
+        }] });
+
+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;
+            }
+            if (data || state) {
+                this._cdr.markForCheck();
+            }
+        };
+    }
+    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.datepickerTriggerElRef &&
+            !this.dp) {
+            this.dp = createDatepicker(this.listener, {
+                ...this.options,
+                selectedDate: this.value,
+            }, this.datepickerElRef.nativeElement, this.datepickerDialogElRef.nativeElement, this.dateInputElRef.nativeElement, this.datepickerTriggerElRef.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 }, { propertyName: "datepickerTriggerElRef", first: true, predicate: ["datepickerTriggerElRef"], 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=\"popover popover-datepicker\"\n  [class.active]=\"dp?.state?.isActive\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  aria-label=\"Choose Date\"\n>\n  <button type=\"button\" class=\"close\" (click)=\"dp?.close()\">Close</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        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]=\"\n                day.selected && !data?.highlightedDate ? true : null\n              \"\n              [class.disabled]=\"!day.currentMonth\"\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", 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=\"popover popover-datepicker\"\n  [class.active]=\"dp?.state?.isActive\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  aria-label=\"Choose Date\"\n>\n  <button type=\"button\" class=\"close\" (click)=\"dp?.close()\">Close</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        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]=\"\n                day.selected && !data?.highlightedDate ? true : null\n              \"\n              [class.disabled]=\"!day.currentMonth\"\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
+            }], valid: [{
+                type: Input
+            }], invalid: [{
+                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']
+            }] } });
+
+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, 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, NggDatepickerModule],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NggDatepickerComponent, NggDatepickerModule, NggDropdownComponent, NggDropdownModule, NggModule, NggSegmentedControlComponent, NggSegmentedControlModule };
+//# sourceMappingURL=sebgroup-green-angular.mjs.map

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

@@ -0,0 +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/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')\n  public datepickerDialogElRef?: ElementRef<HTMLElement>\n  @ViewChild('dateInputElRef')\n  public dateInputElRef?: ElementRef<HTMLInputElement>\n  @ViewChild('datepickerElRef') public datepickerElRef?: ElementRef<HTMLElement>\n  @ViewChild('datepickerTriggerElRef')\n  public datepickerTriggerElRef?: ElementRef<HTMLButtonElement>\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    if (data || state) {\n      this._cdr.markForCheck()\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.datepickerTriggerElRef &&\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        this.datepickerTriggerElRef.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=\"popover popover-datepicker\"\n  [class.active]=\"dp?.state?.isActive\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  aria-label=\"Choose Date\"\n>\n  <button type=\"button\" class=\"close\" (click)=\"dp?.close()\">Close</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        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]=\"\n                day.selected && !data?.highlightedDate ? true : null\n              \"\n              [class.disabled]=\"!day.currentMonth\"\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","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,9 +1,7 @@
 export * from './lib/green-angular.module';
 export * from './lib/dropdown/dropdown.module';
 export * from './lib/dropdown/dropdown.component';
-export * from './lib/dropdown/popover.directive';
-export * from './lib/dropdown/popover-element.directive';
-export * from './lib/dropdown/popover-option.directive';
-export * from './lib/dropdown/popover-trigger.directive';
+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,46 @@
+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>;
+    dateInputElRef?: ElementRef<HTMLInputElement>;
+    datepickerElRef?: ElementRef<HTMLElement>;
+    datepickerTriggerElRef?: ElementRef<HTMLButtonElement>;
+    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]"]>;
+}