@sebgroup/green-angular 1.0.0-beta.15 → 1.0.0-beta.19

package/fesm2015/sebgroup-green-angular.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input, NgModule, EventEmitter, Output, ViewChild, HostBinding } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, NgModule, Directive, EventEmitter, Output, ViewChild, ContentChild, HostBinding } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/router';
@@ -59,6 +59,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
                 }]
         }] });
 
+class NggDropdownOptionDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+NggDropdownOptionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDropdownOptionDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+NggDropdownOptionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.3", type: NggDropdownOptionDirective, selector: "[nggDropdownOption]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDropdownOptionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nggDropdownOption]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
 class NggDropdownComponent {
     constructor(cd) {
         var _a, _b, _c;
@@ -67,6 +81,7 @@ class NggDropdownComponent {
         this._multiSelect = false;
         this.options = [];
         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;
@@ -107,12 +122,7 @@ class NggDropdownComponent {
                         selectedOption = dropdown.selectValue
                             ? data[dropdown.selectValue]
                             : data;
-                        setTimeout(() => {
-                            this._value = selectedOption;
-                            this.valueChange.emit(selectedOption);
-                            this.onChangeFn && this.onChangeFn(selectedOption);
-                            this.onTouchedFn && this.onTouchedFn();
-                        }, 0);
+                        this.updateValue(selectedOption);
                     }
                 }
                 else {
@@ -124,12 +134,7 @@ class NggDropdownComponent {
                         this._value !== [] &&
                         selectedOption &&
                         JSON.stringify(this._value) !== JSON.stringify(selectedOption)) {
-                        setTimeout(() => {
-                            this._value = selectedOption;
-                            this.valueChange.emit(selectedOption);
-                            this.onChangeFn && this.onChangeFn(selectedOption);
-                            this.onTouchedFn && this.onTouchedFn();
-                        }, 0);
+                        this.updateValue(selectedOption);
                     }
                 }
                 this.cd.detectChanges();
@@ -167,8 +172,20 @@ class NggDropdownComponent {
             loop: this.loop,
             value: this.value,
             multiSelect: this.multiSelect,
+            onTouched: () => {
+                var _a;
+                (_a = this.onTouchedFn) === null || _a === void 0 ? void 0 : _a.call(this);
+                this.touched.emit(true);
+                this.cd.markForCheck();
+            },
         };
     }
+    updateValue(option) {
+        var _a;
+        this._value = option;
+        this.valueChange.emit(option);
+        (_a = this.onChangeFn) === null || _a === void 0 ? void 0 : _a.call(this, option);
+    }
     setSelectionByValue(value) {
         var _a, _b, _c, _d, _e;
         if (!((_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.isMultiSelect)) {
@@ -183,13 +200,13 @@ class NggDropdownComponent {
     }
 }
 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" }, 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", selectValue: "selectValue", useValue: "useValue", multiSelect: "multiSelect", label: "label", options: "options", valid: "valid", invalid: "invalid", value: "value" }, outputs: { valueChange: "valueChange", touched: "touched" }, 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 }, { propertyName: "fieldsetRef", first: true, predicate: ["fieldsetRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    ], 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"
@@ -249,7 +266,11 @@ NggDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         </button>
         <ul role="listbox" *ngIf="!dropdown?.isMultiSelect">
           <li
-            *ngFor="let option of dropdown?.options; trackBy: trackByKey"
+            *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']"
@@ -257,7 +278,14 @@ NggDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             [class]="option.classes"
             (click)="handler?.select(option)"
           >
-            {{ option[dropdown!.display] }}
+            <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">
@@ -277,21 +305,37 @@ NggDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
               [id]="option.attributes.id"
               [attr.aria-selected]="option.attributes['aria-selected']"
               [class]="option.classes"
-              *ngFor="let option of dropdown?.options; trackBy: trackByKey"
+              *ngFor="
+                let option of dropdown?.options;
+                let index = index;
+                trackBy: trackByKey
+              "
             >
               <input
                 type="checkbox"
                 (change)="handler?.select(option, false)"
                 [checked]="option.selected"
+                tabIndex="-1"
               />
-              <span>{{ option[dropdown!.display] }}</span>
+              <ng-container
+                *ngTemplateOutlet="
+                  customOption?.templateRef
+                    ? customOption!.templateRef
+                    : defaultOption;
+                  context: { option: option, index: index }
+                "
+              ></ng-container>
               <i></i>
             </label>
           </fieldset>
         </div>
       </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 });
+
+    <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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDropdownComponent, decorators: [{
             type: Component,
             args: [{
@@ -356,7 +400,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
         </button>
         <ul role="listbox" *ngIf="!dropdown?.isMultiSelect">
           <li
-            *ngFor="let option of dropdown?.options; trackBy: trackByKey"
+            *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']"
@@ -364,7 +412,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
             [class]="option.classes"
             (click)="handler?.select(option)"
           >
-            {{ option[dropdown!.display] }}
+            <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">
@@ -384,20 +439,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
               [id]="option.attributes.id"
               [attr.aria-selected]="option.attributes['aria-selected']"
               [class]="option.classes"
-              *ngFor="let option of dropdown?.options; trackBy: trackByKey"
+              *ngFor="
+                let option of dropdown?.options;
+                let index = index;
+                trackBy: trackByKey
+              "
             >
               <input
                 type="checkbox"
                 (change)="handler?.select(option, false)"
                 [checked]="option.selected"
+                tabIndex="-1"
               />
-              <span>{{ option[dropdown!.display] }}</span>
+              <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: [
                         {
@@ -434,6 +505,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
                 type: Input
             }], valueChange: [{
                 type: Output
+            }], touched: [{
+                type: Output
             }], togglerRef: [{
                 type: ViewChild,
                 args: ['togglerRef']
@@ -443,19 +516,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
             }], fieldsetRef: [{
                 type: ViewChild,
                 args: ['fieldsetRef']
+            }], customOption: [{
+                type: ContentChild,
+                args: [NggDropdownOptionDirective]
             }] } });
 
 class NggDropdownModule {
 }
 NggDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NggDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDropdownModule, declarations: [NggDropdownComponent], imports: [CommonModule], exports: [NggDropdownComponent] });
+NggDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDropdownModule, declarations: [NggDropdownComponent, NggDropdownOptionDirective], imports: [CommonModule], exports: [NggDropdownComponent, NggDropdownOptionDirective] });
 NggDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDropdownModule, imports: [[CommonModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDropdownModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [NggDropdownComponent],
+                    declarations: [NggDropdownComponent, NggDropdownOptionDirective],
                     imports: [CommonModule],
-                    exports: [NggDropdownComponent],
+                    exports: [NggDropdownComponent, NggDropdownOptionDirective],
                 }]
         }] });
 
@@ -571,7 +647,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"] }], 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        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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDatepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngg-datepicker', providers: [
@@ -668,9 +744,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
         }] });
 
 class NggBadgeComponent {
-    constructor(viewContainerRef) {
-        this.viewContainerRef = viewContainerRef;
-    }
+    //eslint-disable-next-line
+    constructor() {
+        /** The color of the component */
+        this.badgeType = '';
+        /** Callback when component is dismissed */
+        this.handleClose = new EventEmitter();
+    }
+    /** Flag whether the component can be dismissed */
     set isCloseable(value) {
         this._isCloseable = value;
     }
@@ -680,16 +761,21 @@ class NggBadgeComponent {
     get class() {
         return ['badge', this.badgeType].join(' ');
     }
-    close() {
-        this.viewContainerRef.element.nativeElement.remove();
+    ngOnInit() {
+        if (!!this.customColor || !!this.customBackgroundColor) {
+            this.badgeType = '';
+        }
+    }
+    close(e) {
+        this.handleClose.emit(e);
     }
 }
-NggBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggBadgeComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-NggBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: NggBadgeComponent, selector: "[ngg-badge]", inputs: { isCloseable: "isCloseable", badgeType: "badgeType", closeText: "closeText" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: `
+NggBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NggBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: NggBadgeComponent, selector: "[ngg-badge]", inputs: { badgeType: "badgeType", isCloseable: "isCloseable", closeText: "closeText", customColor: "customColor", customBackgroundColor: "customBackgroundColor" }, outputs: { handleClose: "handleClose" }, host: { properties: { "style.color": "this.customColor", "style.background-color": "this.customBackgroundColor", "class": "this.class" } }, ngImport: i0, template: `
     <strong>
       <ng-content></ng-content>
     </strong>
-    <button *ngIf="isCloseable" class="close" (click)="close()">
+    <button *ngIf="isCloseable" class="close" (click)="close($event)">
       {{ closeText }}
     </button>
   `, isInline: true, directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -703,21 +789,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
     <strong>
       <ng-content></ng-content>
     </strong>
-    <button *ngIf="isCloseable" class="close" (click)="close()">
+    <button *ngIf="isCloseable" class="close" (click)="close($event)">
       {{ closeText }}
     </button>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { isCloseable: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { badgeType: [{
                 type: Input
-            }], badgeType: [{
+            }], isCloseable: [{
                 type: Input
             }], closeText: [{
                 type: Input
+            }], customColor: [{
+                type: HostBinding,
+                args: ['style.color']
+            }, {
+                type: Input
+            }], customBackgroundColor: [{
+                type: HostBinding,
+                args: ['style.background-color']
+            }, {
+                type: Input
             }], class: [{
                 type: HostBinding,
                 args: ['class']
+            }], handleClose: [{
+                type: Output
             }] } });
 
 class NggBadgeModule {
@@ -738,5 +836,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NggBadgeComponent, NggBadgeModule, NggDatepickerComponent, NggDatepickerModule, NggDropdownComponent, NggDropdownModule, NggModule, NggSegmentedControlComponent, NggSegmentedControlModule, dateValidator };
+export { NggBadgeComponent, NggBadgeModule, NggDatepickerComponent, NggDatepickerModule, NggDropdownComponent, NggDropdownModule, NggDropdownOptionDirective, NggModule, NggSegmentedControlComponent, NggSegmentedControlModule, dateValidator };
 //# sourceMappingURL=sebgroup-green-angular.mjs.map