@sebgroup/green-angular 1.0.0-beta.20 → 1.0.0-beta.23

package/fesm2015/sebgroup-green-angular.mjs

@@ -4,7 +4,6 @@ import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import { __rest } from 'tslib';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { dropdownValues, createDropdown, randomId, months, years, createDatepicker } from '@sebgroup/extract';
 import { startOfDay, endOfDay } from 'date-fns';
@@ -78,66 +77,48 @@ class NggDropdownComponent {
         var _a, _b, _c;
         this.cd = cd;
         this.loop = false;
-        this._multiSelect = false;
         this.options = [];
+        this._multiSelect = false;
+        this._searchable = false;
         this.valueChange = new EventEmitter();
         this.touched = new EventEmitter();
         this.toggler = (_a = dropdownValues.elements) === null || _a === void 0 ? void 0 : _a.toggler;
         this.listbox = (_b = dropdownValues.elements) === null || _b === void 0 ? void 0 : _b.listbox;
         this.fieldset = (_c = dropdownValues.elements) === null || _c === void 0 ? void 0 : _c.fieldset;
         this.trackByKey = (index, option) => {
-            return option[''] || option.key;
+            var _a;
+            return (_a = option.attributes.id) !== null && _a !== void 0 ? _a : '';
         };
     }
     set multiSelect(value) {
-        this._multiSelect =
-            value === '' || value === 'true' || value.toString() === 'true' || false;
+        this._multiSelect = this.convertToBoolean(value);
     }
     get multiSelect() {
         return this._multiSelect;
     }
-    get value() {
-        return this._value;
+    set searchable(value) {
+        this._searchable = this.convertToBoolean(value);
+    }
+    get searchable() {
+        return this._searchable;
     }
     set value(newValue) {
         this.setSelectionByValue(newValue);
     }
+    get value() {
+        return this._value;
+    }
     ngAfterViewInit() {
         var _a, _b, _c;
         if (((_a = this.togglerRef) === null || _a === void 0 ? void 0 : _a.nativeElement) && ((_b = this.listboxRef) === null || _b === void 0 ? void 0 : _b.nativeElement)) {
             this.handler = createDropdown(this.props, this.togglerRef.nativeElement, this.listboxRef.nativeElement, (_c = this.fieldsetRef) === null || _c === void 0 ? void 0 : _c.nativeElement, (dropdown) => {
-                var _a, _b;
                 this.dropdown = dropdown;
                 this.toggler = dropdown.elements.toggler;
                 this.listbox = dropdown.elements.listbox;
                 this.fieldset = dropdown.elements.fieldset;
-                // TODO: refactor state handling to only emit value changes when value changes (not on state change), perhaps using rxjs?
-                if (!dropdown.isMultiSelect) {
-                    let selectedOption = (_a = this.dropdown.options) === null || _a === void 0 ? void 0 : _a.find((option) => option.selected);
-                    if ((selectedOption && !this._value) ||
-                        (selectedOption &&
-                            selectedOption[dropdown.useValue] !==
-                                this._value[dropdown.useValue])) {
-                        const { attributes, classes, active, selected } = selectedOption, data = __rest(selectedOption, ["attributes", "classes", "active", "selected"]);
-                        selectedOption = dropdown.selectValue
-                            ? data[dropdown.selectValue]
-                            : data;
-                        this.updateValue(selectedOption);
-                    }
-                }
-                else {
-                    const selectedOption = (_b = this.dropdown.options) === null || _b === void 0 ? void 0 : _b.filter((option) => option.selected).map((option) => {
-                        const { attributes, classes, active, selected } = option, data = __rest(option, ["attributes", "classes", "active", "selected"]);
-                        return dropdown.selectValue ? data[dropdown.selectValue] : data;
-                    });
-                    if ((this._value !== undefined || (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.length) > 0) &&
-                        this._value !== [] &&
-                        selectedOption &&
-                        JSON.stringify(this._value) !== JSON.stringify(selectedOption)) {
-                        this.updateValue(selectedOption);
-                    }
-                }
                 this.cd.detectChanges();
+            }, (value) => {
+                this.updateValue(value);
             });
         }
     }
@@ -160,6 +141,10 @@ class NggDropdownComponent {
     registerOnTouched(fn) {
         this.onTouchedFn = fn;
     }
+    search($event) {
+        var _a;
+        (_a = this.handler) === null || _a === void 0 ? void 0 : _a.search($event.target.value);
+    }
     get props() {
         var _a;
         return {
@@ -167,11 +152,13 @@ class NggDropdownComponent {
             texts: this.texts,
             useValue: this.useValue,
             display: this.display,
-            selectValue: this.selectValue,
             options: this.options,
             loop: this.loop,
             value: this.value,
             multiSelect: this.multiSelect,
+            searchable: this.searchable,
+            searchFilter: this.searchFilter,
+            compareWith: this.compareWith,
             onTouched: () => {
                 var _a;
                 (_a = this.onTouchedFn) === null || _a === void 0 ? void 0 : _a.call(this);
@@ -192,293 +179,33 @@ class NggDropdownComponent {
             if (this._value !== value && value !== undefined) {
                 this._value = value;
                 const valueKey = (_b = this.handler) === null || _b === void 0 ? void 0 : _b.dropdown.useValue;
-                const selected = (_d = (_c = this.handler) === null || _c === void 0 ? void 0 : _c.dropdown) === null || _d === void 0 ? void 0 : _d.options.find((option) => option[valueKey] === value[valueKey] || option[valueKey] === value);
+                const selected = (_d = (_c = this.handler) === null || _c === void 0 ? void 0 : _c.dropdown) === null || _d === void 0 ? void 0 : _d.options.find((option) => { var _a; return (_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.compareWith(option[valueKey], value); });
                 if (selected)
                     (_e = this.handler) === null || _e === void 0 ? void 0 : _e.select(selected);
             }
         }
     }
+    convertToBoolean(value) {
+        return (value === '' || value === 'true' || value.toString() === 'true' || false);
+    }
 }
 NggDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-NggDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: NggDropdownComponent, selector: "ngg-dropdown", inputs: { id: "id", texts: "texts", loop: "loop", display: "display", selectValue: "selectValue", useValue: "useValue", multiSelect: "multiSelect", label: "label", options: "options", valid: "valid", invalid: "invalid", value: "value" }, outputs: { valueChange: "valueChange", touched: "touched" }, providers: [
+NggDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: NggDropdownComponent, selector: "ngg-dropdown", inputs: { id: "id", texts: "texts", loop: "loop", display: "display", useValue: "useValue", label: "label", options: "options", valid: "valid", invalid: "invalid", compareWith: "compareWith", searchFilter: "searchFilter", multiSelect: "multiSelect", searchable: "searchable", value: "value" }, outputs: { valueChange: "valueChange", touched: "touched" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: NggDropdownComponent,
             multi: true,
         },
-    ], queries: [{ propertyName: "customOption", first: true, predicate: NggDropdownOptionDirective, descendants: true }], viewQueries: [{ propertyName: "togglerRef", first: true, predicate: ["togglerRef"], descendants: true }, { propertyName: "listboxRef", first: true, predicate: ["listboxRef"], descendants: true }, { propertyName: "fieldsetRef", first: true, predicate: ["fieldsetRef"], 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?.textContent && (formInfo?.textContent?.length ?? 0 > 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?.texts?.select || dropdown?.texts?.placeholder
-        }}</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">{{ dropdown?.texts?.close }}</span>
-        </button>
-        <ul role="listbox" *ngIf="!dropdown?.isMultiSelect">
-          <li
-            *ngFor="
-              let option of dropdown?.options;
-              let index = index;
-              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)"
-          >
-            <ng-container
-              *ngTemplateOutlet="
-                customOption?.templateRef
-                  ? customOption!.templateRef
-                  : defaultOption;
-                context: { option: option, index: index }
-              "
-            ></ng-container>
-          </li>
-        </ul>
-        <div *ngIf="dropdown?.isMultiSelect" class="sg-fieldset-container">
-          <fieldset
-            #fieldsetRef
-            [attr.aria-describedby]="fieldset?.attributes?.id"
-            role="listbox"
-            tabIndex="-1"
-            aria-multiselectable="true"
-          >
-            <legend class="sr-only" [id]="fieldset?.attributes?.id">
-              Options
-            </legend>
-            <label
-              class="form-control"
-              [attr.role]="option.attributes.role"
-              [id]="option.attributes.id"
-              [attr.aria-selected]="option.attributes['aria-selected']"
-              [class]="option.classes"
-              *ngFor="
-                let option of dropdown?.options;
-                let index = index;
-                trackBy: trackByKey
-              "
-            >
-              <input
-                type="checkbox"
-                (change)="handler?.select(option, false)"
-                [checked]="option.selected"
-                tabIndex="-1"
-              />
-              <ng-container
-                *ngTemplateOutlet="
-                  customOption?.templateRef
-                    ? customOption!.templateRef
-                    : defaultOption;
-                  context: { option: option, index: index }
-                "
-              ></ng-container>
-              <i></i>
-            </label>
-          </fieldset>
-        </div>
-      </div>
-    </div>
-
-    <ng-template #defaultOption let-option="option">
-      {{ option[dropdown!.display] }}
-    </ng-template>
-  `, isInline: true, directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], queries: [{ propertyName: "customOption", first: true, predicate: NggDropdownOptionDirective, descendants: true }], viewQueries: [{ propertyName: "togglerRef", first: true, predicate: ["togglerRef"], descendants: true }, { propertyName: "listboxRef", first: true, predicate: ["listboxRef"], descendants: true }, { propertyName: "fieldsetRef", first: true, predicate: ["fieldsetRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div>\n  <span class=\"label\" *ngIf=\"label\" [id]=\"toggler?.attributes?.id + '_label'\">{{\n    label\n  }}</span>\n  <button\n    [attr.aria-labelledby]=\"label ? toggler?.attributes?.id + '_label' : null\"\n    [attr.aria-describedby]=\"\n      formInfo?.textContent && (formInfo?.textContent?.length ?? 0 > 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?.texts?.select || dropdown?.texts?.placeholder }}</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\">{{ dropdown?.texts?.close }}</span>\n    </button>\n    <ul role=\"listbox\" *ngIf=\"!dropdown?.isMultiSelect\">\n      <ng-container *ngTemplateOutlet=\"searchInput\"></ng-container>\n      <li\n        *ngFor=\"\n          let option of dropdown?.options;\n          let index = index;\n          trackBy: trackByKey\n        \"\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        <ng-container\n          *ngTemplateOutlet=\"\n            customOption?.templateRef\n              ? customOption!.templateRef\n              : defaultOption;\n            context: { option: option, index: index }\n          \"\n        ></ng-container>\n      </li>\n    </ul>\n    <div *ngIf=\"dropdown?.isMultiSelect\" class=\"sg-fieldset-container\">\n      <ng-container *ngTemplateOutlet=\"searchInput\"></ng-container>\n      <fieldset\n        #fieldsetRef\n        [attr.aria-describedby]=\"fieldset?.attributes?.id\"\n        role=\"listbox\"\n        tabIndex=\"-1\"\n        aria-multiselectable=\"true\"\n      >\n        <legend class=\"sr-only\" [id]=\"fieldset?.attributes?.id\">Options</legend>\n        <label\n          class=\"form-control\"\n          [attr.role]=\"option.attributes.role\"\n          [id]=\"option.attributes.id\"\n          [attr.aria-selected]=\"option.attributes['aria-selected']\"\n          [class]=\"option.classes\"\n          *ngFor=\"\n            let option of dropdown?.options;\n            let index = index;\n            trackBy: trackByKey\n          \"\n        >\n          <input\n            type=\"checkbox\"\n            (change)=\"handler?.select(option, false)\"\n            [checked]=\"option.selected\"\n            tabIndex=\"-1\"\n          />\n          <ng-container\n            *ngTemplateOutlet=\"\n              customOption?.templateRef\n                ? customOption!.templateRef\n                : defaultOption;\n              context: { option: option, index: index }\n            \"\n          ></ng-container>\n          <i></i>\n        </label>\n      </fieldset>\n    </div>\n  </div>\n</div>\n\n<ng-template #defaultOption let-option=\"option\">\n  {{ option[dropdown!.display] }}\n</ng-template>\n\n<ng-template #searchInput>\n  <input\n    *ngIf=\"dropdown?.isSearchable\"\n    type=\"search\"\n    (input)=\"search($event)\"\n    placeholder=\"{{ dropdown?.texts?.searchPlaceholder }}\"\n    class=\"rounded-0 rounded-top border-0 border-bottom border-info\"\n  />\n</ng-template>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", 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?.textContent && (formInfo?.textContent?.length ?? 0 > 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?.texts?.select || dropdown?.texts?.placeholder
-        }}</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">{{ dropdown?.texts?.close }}</span>
-        </button>
-        <ul role="listbox" *ngIf="!dropdown?.isMultiSelect">
-          <li
-            *ngFor="
-              let option of dropdown?.options;
-              let index = index;
-              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)"
-          >
-            <ng-container
-              *ngTemplateOutlet="
-                customOption?.templateRef
-                  ? customOption!.templateRef
-                  : defaultOption;
-                context: { option: option, index: index }
-              "
-            ></ng-container>
-          </li>
-        </ul>
-        <div *ngIf="dropdown?.isMultiSelect" class="sg-fieldset-container">
-          <fieldset
-            #fieldsetRef
-            [attr.aria-describedby]="fieldset?.attributes?.id"
-            role="listbox"
-            tabIndex="-1"
-            aria-multiselectable="true"
-          >
-            <legend class="sr-only" [id]="fieldset?.attributes?.id">
-              Options
-            </legend>
-            <label
-              class="form-control"
-              [attr.role]="option.attributes.role"
-              [id]="option.attributes.id"
-              [attr.aria-selected]="option.attributes['aria-selected']"
-              [class]="option.classes"
-              *ngFor="
-                let option of dropdown?.options;
-                let index = index;
-                trackBy: trackByKey
-              "
-            >
-              <input
-                type="checkbox"
-                (change)="handler?.select(option, false)"
-                [checked]="option.selected"
-                tabIndex="-1"
-              />
-              <ng-container
-                *ngTemplateOutlet="
-                  customOption?.templateRef
-                    ? customOption!.templateRef
-                    : defaultOption;
-                  context: { option: option, index: index }
-                "
-              ></ng-container>
-              <i></i>
-            </label>
-          </fieldset>
-        </div>
-      </div>
-    </div>
-
-    <ng-template #defaultOption let-option="option">
-      {{ option[dropdown!.display] }}
-    </ng-template>
-  `,
-                    providers: [
+            args: [{ selector: 'ngg-dropdown', providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: NggDropdownComponent,
                             multi: true,
                         },
-                    ],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\n  <span class=\"label\" *ngIf=\"label\" [id]=\"toggler?.attributes?.id + '_label'\">{{\n    label\n  }}</span>\n  <button\n    [attr.aria-labelledby]=\"label ? toggler?.attributes?.id + '_label' : null\"\n    [attr.aria-describedby]=\"\n      formInfo?.textContent && (formInfo?.textContent?.length ?? 0 > 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?.texts?.select || dropdown?.texts?.placeholder }}</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\">{{ dropdown?.texts?.close }}</span>\n    </button>\n    <ul role=\"listbox\" *ngIf=\"!dropdown?.isMultiSelect\">\n      <ng-container *ngTemplateOutlet=\"searchInput\"></ng-container>\n      <li\n        *ngFor=\"\n          let option of dropdown?.options;\n          let index = index;\n          trackBy: trackByKey\n        \"\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        <ng-container\n          *ngTemplateOutlet=\"\n            customOption?.templateRef\n              ? customOption!.templateRef\n              : defaultOption;\n            context: { option: option, index: index }\n          \"\n        ></ng-container>\n      </li>\n    </ul>\n    <div *ngIf=\"dropdown?.isMultiSelect\" class=\"sg-fieldset-container\">\n      <ng-container *ngTemplateOutlet=\"searchInput\"></ng-container>\n      <fieldset\n        #fieldsetRef\n        [attr.aria-describedby]=\"fieldset?.attributes?.id\"\n        role=\"listbox\"\n        tabIndex=\"-1\"\n        aria-multiselectable=\"true\"\n      >\n        <legend class=\"sr-only\" [id]=\"fieldset?.attributes?.id\">Options</legend>\n        <label\n          class=\"form-control\"\n          [attr.role]=\"option.attributes.role\"\n          [id]=\"option.attributes.id\"\n          [attr.aria-selected]=\"option.attributes['aria-selected']\"\n          [class]=\"option.classes\"\n          *ngFor=\"\n            let option of dropdown?.options;\n            let index = index;\n            trackBy: trackByKey\n          \"\n        >\n          <input\n            type=\"checkbox\"\n            (change)=\"handler?.select(option, false)\"\n            [checked]=\"option.selected\"\n            tabIndex=\"-1\"\n          />\n          <ng-container\n            *ngTemplateOutlet=\"\n              customOption?.templateRef\n                ? customOption!.templateRef\n                : defaultOption;\n              context: { option: option, index: index }\n            \"\n          ></ng-container>\n          <i></i>\n        </label>\n      </fieldset>\n    </div>\n  </div>\n</div>\n\n<ng-template #defaultOption let-option=\"option\">\n  {{ option[dropdown!.display] }}\n</ng-template>\n\n<ng-template #searchInput>\n  <input\n    *ngIf=\"dropdown?.isSearchable\"\n    type=\"search\"\n    (input)=\"search($event)\"\n    placeholder=\"{{ dropdown?.texts?.searchPlaceholder }}\"\n    class=\"rounded-0 rounded-top border-0 border-bottom border-info\"\n  />\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { id: [{
                 type: Input
             }], texts: [{
@@ -487,12 +214,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
                 type: Input
             }], display: [{
                 type: Input
-            }], selectValue: [{
-                type: Input
             }], useValue: [{
                 type: Input
-            }], multiSelect: [{
-                type: Input
             }], label: [{
                 type: Input
             }], options: [{
@@ -501,6 +224,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
                 type: Input
             }], invalid: [{
                 type: Input
+            }], compareWith: [{
+                type: Input
+            }], searchFilter: [{
+                type: Input
+            }], multiSelect: [{
+                type: Input
+            }], searchable: [{
+                type: Input
             }], value: [{
                 type: Input
             }], valueChange: [{
@@ -647,7 +378,7 @@ NggDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             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]=\"isValid\"\n    [class.is-invalid]=\"isValid === false\"\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)=\"onDateChange(dateInputElRef.value)\"\n    />\n    <button\n      #datepickerTriggerElRef\n      (click)=\"dp?.toggle()\"\n      type=\"button\"\n      class=\"primary\"\n    >\n      <i class=\"sg-icon sg-icon-calendar\">Select date</i>\n    </button>\n  </div>\n  <span class=\"form-info\" #formInfo [attr.id]=\"id + '_info'\"\n    ><ng-content select=\"[data-form-info]\"></ng-content\n  ></span>\n</div>\n<!-- TODO: get or set attributes from within datepicker instance (dp) -->\n<div\n  #datepickerDialogElRef\n  class=\"popover popover-datepicker\"\n  [class.active]=\"dp?.state?.isActive\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  aria-label=\"Choose Date\"\n>\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        selectValue=\"value\"\n        (valueChange)=\"dp?.setMonth($event)\"\n      ></ngg-dropdown>\n      <ngg-dropdown\n        *ngIf=\"years\"\n        [options]=\"years\"\n        text=\"Select\"\n        [value]=\"data?.year\"\n        selectValue=\"value\"\n        (valueChange)=\"dp?.setYear($event)\"\n      ></ngg-dropdown>\n      <button type=\"button\" class=\"link\" (click)=\"dp?.add(1, 'months')\">\n        <i class=\"sg-icon sg-icon-next\">Next month</i>\n      </button>\n    </header>\n    <main>\n      <table role=\"grid\">\n        <thead>\n          <tr>\n            <th\n              scope=\"col\"\n              *ngFor=\"let header of data?.calendar?.headers\"\n              [abbr]=\"header.abbr\"\n              [class.sg-week-header]=\"header.type === 'week'\"\n              [class.sg-day-header]=\"header.type === 'day'\"\n            >\n              {{ header.displayText }}\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr\n            *ngFor=\"\n              let week of data?.calendar?.calendarGrid;\n              trackBy: trackWeek;\n              let i = index\n            \"\n          >\n            <th\n              *ngIf=\"data?.calendar?.weekNumbers as weekNumbers\"\n              class=\"sg-week-number\"\n            >\n              {{ weekNumbers[i] }}\n            </th>\n            <td\n              *ngFor=\"let day of week\"\n              [attr.data-date]=\"day.formattedDate\"\n              [attr.role]=\"day.selected ? 'gridcell' : null\"\n              [attr.aria-selected]=\"\n                day.selected && !data?.highlightedDate ? true : null\n              \"\n              [class.disabled]=\"day.disabled\"\n              [class.sg-date-today]=\"day.today\"\n              [title]=\"day.today ? 'Today' : ''\"\n              [tabIndex]=\"\n                day.highlighted ||\n                (day.selected && !data?.highlightedDate) ||\n                (day.today && !data?.highlightedDate && !data?.selectedDate)\n                  ? 0\n                  : -1\n              \"\n              (click)=\"day.currentMonth && dp?.select(day.date)\"\n            >\n              {{ day.day }}\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </main>\n  </div>\n</div>\n", components: [{ type: NggDropdownComponent, selector: "ngg-dropdown", inputs: ["id", "texts", "loop", "display", "selectValue", "useValue", "multiSelect", "label", "options", "valid", "invalid", "value"], outputs: ["valueChange", "touched"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], 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]=\"isValid\"\n    [class.is-invalid]=\"isValid === false\"\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)=\"onDateChange(dateInputElRef.value)\"\n    />\n    <button\n      #datepickerTriggerElRef\n      (click)=\"dp?.toggle()\"\n      type=\"button\"\n      class=\"primary\"\n    >\n      <i class=\"sg-icon sg-icon-calendar\">Select date</i>\n    </button>\n  </div>\n  <span class=\"form-info\" #formInfo [attr.id]=\"id + '_info'\"\n    ><ng-content select=\"[data-form-info]\"></ng-content\n  ></span>\n</div>\n<!-- TODO: get or set attributes from within datepicker instance (dp) -->\n<div\n  #datepickerDialogElRef\n  class=\"popover popover-datepicker\"\n  [class.active]=\"dp?.state?.isActive\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  aria-label=\"Choose Date\"\n>\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        display=\"key\"\n        text=\"Select\"\n        [value]=\"data?.month\"\n        (valueChange)=\"dp?.setMonth($event)\"\n      ></ngg-dropdown>\n      <ngg-dropdown\n        *ngIf=\"years\"\n        [options]=\"years\"\n        display=\"key\"\n        text=\"Select\"\n        [value]=\"data?.year\"\n        (valueChange)=\"dp?.setYear($event)\"\n      ></ngg-dropdown>\n      <button type=\"button\" class=\"link\" (click)=\"dp?.add(1, 'months')\">\n        <i class=\"sg-icon sg-icon-next\">Next month</i>\n      </button>\n    </header>\n    <main>\n      <table role=\"grid\">\n        <thead>\n          <tr>\n            <th\n              scope=\"col\"\n              *ngFor=\"let header of data?.calendar?.headers\"\n              [abbr]=\"header.abbr\"\n              [class.sg-week-header]=\"header.type === 'week'\"\n              [class.sg-day-header]=\"header.type === 'day'\"\n            >\n              {{ header.displayText }}\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr\n            *ngFor=\"\n              let week of data?.calendar?.calendarGrid;\n              trackBy: trackWeek;\n              let i = index\n            \"\n          >\n            <th\n              *ngIf=\"data?.calendar?.weekNumbers as weekNumbers\"\n              class=\"sg-week-number\"\n            >\n              {{ weekNumbers[i] }}\n            </th>\n            <td\n              *ngFor=\"let day of week\"\n              [attr.data-date]=\"day.formattedDate\"\n              [attr.role]=\"day.selected ? 'gridcell' : null\"\n              [attr.aria-selected]=\"\n                day.selected && !data?.highlightedDate ? true : null\n              \"\n              [class.disabled]=\"day.disabled\"\n              [class.sg-date-today]=\"day.today\"\n              [title]=\"day.today ? 'Today' : ''\"\n              [tabIndex]=\"\n                day.highlighted ||\n                (day.selected && !data?.highlightedDate) ||\n                (day.today && !data?.highlightedDate && !data?.selectedDate)\n                  ? 0\n                  : -1\n              \"\n              (click)=\"day.currentMonth && dp?.select(day.date)\"\n            >\n              {{ day.day }}\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </main>\n  </div>\n</div>\n", components: [{ type: NggDropdownComponent, selector: "ngg-dropdown", inputs: ["id", "texts", "loop", "display", "useValue", "label", "options", "valid", "invalid", "compareWith", "searchFilter", "multiSelect", "searchable", "value"], outputs: ["valueChange", "touched"] }], 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.3.3", ngImport: i0, type: NggDatepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngg-datepicker', providers: [
@@ -656,7 +387,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
                             useExisting: NggDatepickerComponent,
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-group\">\n  <label *ngIf=\"label\" [for]=\"id\">{{ label }}</label>\n  <div\n    class=\"group\"\n    #datepickerElRef\n    [class.is-valid]=\"isValid\"\n    [class.is-invalid]=\"isValid === false\"\n  >\n    <input\n      [attr.id]=\"id\"\n      [attr.aria-describedby]=\"\n        formInfo?.innerText && formInfo.innerText.length > 0\n          ? id + '_info'\n          : null\n      \"\n      type=\"text\"\n      placeholder=\"yyyy-mm-dd\"\n      #dateInputElRef\n      [value]=\"data?.formattedSelectedDate || ''\"\n      (change)=\"onDateChange(dateInputElRef.value)\"\n    />\n    <button\n      #datepickerTriggerElRef\n      (click)=\"dp?.toggle()\"\n      type=\"button\"\n      class=\"primary\"\n    >\n      <i class=\"sg-icon sg-icon-calendar\">Select date</i>\n    </button>\n  </div>\n  <span class=\"form-info\" #formInfo [attr.id]=\"id + '_info'\"\n    ><ng-content select=\"[data-form-info]\"></ng-content\n  ></span>\n</div>\n<!-- TODO: get or set attributes from within datepicker instance (dp) -->\n<div\n  #datepickerDialogElRef\n  class=\"popover popover-datepicker\"\n  [class.active]=\"dp?.state?.isActive\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  aria-label=\"Choose Date\"\n>\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        selectValue=\"value\"\n        (valueChange)=\"dp?.setMonth($event)\"\n      ></ngg-dropdown>\n      <ngg-dropdown\n        *ngIf=\"years\"\n        [options]=\"years\"\n        text=\"Select\"\n        [value]=\"data?.year\"\n        selectValue=\"value\"\n        (valueChange)=\"dp?.setYear($event)\"\n      ></ngg-dropdown>\n      <button type=\"button\" class=\"link\" (click)=\"dp?.add(1, 'months')\">\n        <i class=\"sg-icon sg-icon-next\">Next month</i>\n      </button>\n    </header>\n    <main>\n      <table role=\"grid\">\n        <thead>\n          <tr>\n            <th\n              scope=\"col\"\n              *ngFor=\"let header of data?.calendar?.headers\"\n              [abbr]=\"header.abbr\"\n              [class.sg-week-header]=\"header.type === 'week'\"\n              [class.sg-day-header]=\"header.type === 'day'\"\n            >\n              {{ header.displayText }}\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr\n            *ngFor=\"\n              let week of data?.calendar?.calendarGrid;\n              trackBy: trackWeek;\n              let i = index\n            \"\n          >\n            <th\n              *ngIf=\"data?.calendar?.weekNumbers as weekNumbers\"\n              class=\"sg-week-number\"\n            >\n              {{ weekNumbers[i] }}\n            </th>\n            <td\n              *ngFor=\"let day of week\"\n              [attr.data-date]=\"day.formattedDate\"\n              [attr.role]=\"day.selected ? 'gridcell' : null\"\n              [attr.aria-selected]=\"\n                day.selected && !data?.highlightedDate ? true : null\n              \"\n              [class.disabled]=\"day.disabled\"\n              [class.sg-date-today]=\"day.today\"\n              [title]=\"day.today ? 'Today' : ''\"\n              [tabIndex]=\"\n                day.highlighted ||\n                (day.selected && !data?.highlightedDate) ||\n                (day.today && !data?.highlightedDate && !data?.selectedDate)\n                  ? 0\n                  : -1\n              \"\n              (click)=\"day.currentMonth && dp?.select(day.date)\"\n            >\n              {{ day.day }}\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </main>\n  </div>\n</div>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-group\">\n  <label *ngIf=\"label\" [for]=\"id\">{{ label }}</label>\n  <div\n    class=\"group\"\n    #datepickerElRef\n    [class.is-valid]=\"isValid\"\n    [class.is-invalid]=\"isValid === false\"\n  >\n    <input\n      [attr.id]=\"id\"\n      [attr.aria-describedby]=\"\n        formInfo?.innerText && formInfo.innerText.length > 0\n          ? id + '_info'\n          : null\n      \"\n      type=\"text\"\n      placeholder=\"yyyy-mm-dd\"\n      #dateInputElRef\n      [value]=\"data?.formattedSelectedDate || ''\"\n      (change)=\"onDateChange(dateInputElRef.value)\"\n    />\n    <button\n      #datepickerTriggerElRef\n      (click)=\"dp?.toggle()\"\n      type=\"button\"\n      class=\"primary\"\n    >\n      <i class=\"sg-icon sg-icon-calendar\">Select date</i>\n    </button>\n  </div>\n  <span class=\"form-info\" #formInfo [attr.id]=\"id + '_info'\"\n    ><ng-content select=\"[data-form-info]\"></ng-content\n  ></span>\n</div>\n<!-- TODO: get or set attributes from within datepicker instance (dp) -->\n<div\n  #datepickerDialogElRef\n  class=\"popover popover-datepicker\"\n  [class.active]=\"dp?.state?.isActive\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  aria-label=\"Choose Date\"\n>\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        display=\"key\"\n        text=\"Select\"\n        [value]=\"data?.month\"\n        (valueChange)=\"dp?.setMonth($event)\"\n      ></ngg-dropdown>\n      <ngg-dropdown\n        *ngIf=\"years\"\n        [options]=\"years\"\n        display=\"key\"\n        text=\"Select\"\n        [value]=\"data?.year\"\n        (valueChange)=\"dp?.setYear($event)\"\n      ></ngg-dropdown>\n      <button type=\"button\" class=\"link\" (click)=\"dp?.add(1, 'months')\">\n        <i class=\"sg-icon sg-icon-next\">Next month</i>\n      </button>\n    </header>\n    <main>\n      <table role=\"grid\">\n        <thead>\n          <tr>\n            <th\n              scope=\"col\"\n              *ngFor=\"let header of data?.calendar?.headers\"\n              [abbr]=\"header.abbr\"\n              [class.sg-week-header]=\"header.type === 'week'\"\n              [class.sg-day-header]=\"header.type === 'day'\"\n            >\n              {{ header.displayText }}\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr\n            *ngFor=\"\n              let week of data?.calendar?.calendarGrid;\n              trackBy: trackWeek;\n              let i = index\n            \"\n          >\n            <th\n              *ngIf=\"data?.calendar?.weekNumbers as weekNumbers\"\n              class=\"sg-week-number\"\n            >\n              {{ weekNumbers[i] }}\n            </th>\n            <td\n              *ngFor=\"let day of week\"\n              [attr.data-date]=\"day.formattedDate\"\n              [attr.role]=\"day.selected ? 'gridcell' : null\"\n              [attr.aria-selected]=\"\n                day.selected && !data?.highlightedDate ? true : null\n              \"\n              [class.disabled]=\"day.disabled\"\n              [class.sg-date-today]=\"day.today\"\n              [title]=\"day.today ? 'Today' : ''\"\n              [tabIndex]=\"\n                day.highlighted ||\n                (day.selected && !data?.highlightedDate) ||\n                (day.today && !data?.highlightedDate && !data?.selectedDate)\n                  ? 0\n                  : -1\n              \"\n              (click)=\"day.currentMonth && dp?.select(day.date)\"\n            >\n              {{ day.day }}\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </main>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { options: [{
                 type: Input
             }], value: [{