@sebgroup/green-angular 2.0.1 → 2.0.3

package/fesm2020/sebgroup-green-angular.mjs

@@ -407,10 +407,10 @@ class NggContextMenuComponent {
     }
 }
 NggContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggContextMenuComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: ON_SCROLL_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-NggContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NggContextMenuComponent, selector: "ngg-context-menu", inputs: { direction: "direction", menuItems: "menuItems", menuItemTemplate: "menuItemTemplate", menuAnchorTemplate: "menuAnchorTemplate", closeOnScroll: "closeOnScroll" }, outputs: { contextMenuItemClicked: "contextMenuItemClicked" }, host: { listeners: { "document:click": "onDocumentClick($event.target)" } }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["contextMenuPopover"], descendants: true }, { propertyName: "anchor", first: true, predicate: ["contextMenuAnchor"], descendants: true }], ngImport: i0, template: "<button\n  #contextMenuAnchor\n  class=\"ghost small px-3\"\n  [class.active]=\"isActive\"\n  (click)=\"open()\"\n>\n  <ng-container\n    [ngTemplateOutlet]=\"menuAnchorTemplate ?? defaultButtonTemplate\"\n  >\n  </ng-container>\n</button>\n\n<div class=\"context-menu-overlay\">\n  <div\n    class=\"popover popover-context-menu\"\n    [class.active]=\"isActive\"\n    [style.top]=\"top\"\n    [style.left]=\"left\"\n    #contextMenuPopover\n  >\n    <ul role=\"listbox\">\n      <li\n        *ngFor=\"let menuItem of menuItems\"\n        (click)=\"onItemClick(menuItem)\"\n        tabindex=\"0\"\n        (keydown)=\"onMenuItemKeyDown($event, menuItem)\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"menuItemTemplate ?? defaultMenuItemTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"\n        >\n        </ng-container>\n      </li>\n    </ul>\n  </div>\n</div>\n\n<ng-template #defaultMenuItemTemplate let-menuItem>\n  <span>{{ menuItem.label }}</span>\n</ng-template>\n\n<ng-template #defaultButtonTemplate>\n  <i class=\"sg-icon sg-icon-ellipsis\">Open context menu</i>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+NggContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NggContextMenuComponent, selector: "ngg-context-menu", inputs: { direction: "direction", menuItems: "menuItems", menuItemTemplate: "menuItemTemplate", menuAnchorTemplate: "menuAnchorTemplate", closeOnScroll: "closeOnScroll" }, outputs: { contextMenuItemClicked: "contextMenuItemClicked" }, host: { listeners: { "document:click": "onDocumentClick($event.target)" } }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["contextMenuPopover"], descendants: true }, { propertyName: "anchor", first: true, predicate: ["contextMenuAnchor"], descendants: true }], ngImport: i0, template: "<button\n  #contextMenuAnchor\n  class=\"ghost small px-3 border-0\"\n  [class.active]=\"isActive\"\n  (click)=\"open()\"\n>\n  <ng-container\n    [ngTemplateOutlet]=\"menuAnchorTemplate ?? defaultButtonTemplate\"\n  >\n  </ng-container>\n</button>\n\n<div class=\"context-menu-overlay\">\n  <div\n    class=\"popover popover-context-menu\"\n    [class.active]=\"isActive\"\n    [style.top]=\"top\"\n    [style.left]=\"left\"\n    #contextMenuPopover\n  >\n    <ul role=\"listbox\">\n      <li\n        *ngFor=\"let menuItem of menuItems\"\n        (click)=\"onItemClick(menuItem)\"\n        tabindex=\"0\"\n        (keydown)=\"onMenuItemKeyDown($event, menuItem)\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"menuItemTemplate ?? defaultMenuItemTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"\n        >\n        </ng-container>\n      </li>\n    </ul>\n  </div>\n</div>\n\n<ng-template #defaultMenuItemTemplate let-menuItem>\n  <span>{{ menuItem.label }}</span>\n</ng-template>\n\n<ng-template #defaultButtonTemplate>\n  <i class=\"sg-icon sg-icon-ellipsis\">Open context menu</i>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggContextMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngg-context-menu', template: "<button\n  #contextMenuAnchor\n  class=\"ghost small px-3\"\n  [class.active]=\"isActive\"\n  (click)=\"open()\"\n>\n  <ng-container\n    [ngTemplateOutlet]=\"menuAnchorTemplate ?? defaultButtonTemplate\"\n  >\n  </ng-container>\n</button>\n\n<div class=\"context-menu-overlay\">\n  <div\n    class=\"popover popover-context-menu\"\n    [class.active]=\"isActive\"\n    [style.top]=\"top\"\n    [style.left]=\"left\"\n    #contextMenuPopover\n  >\n    <ul role=\"listbox\">\n      <li\n        *ngFor=\"let menuItem of menuItems\"\n        (click)=\"onItemClick(menuItem)\"\n        tabindex=\"0\"\n        (keydown)=\"onMenuItemKeyDown($event, menuItem)\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"menuItemTemplate ?? defaultMenuItemTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"\n        >\n        </ng-container>\n      </li>\n    </ul>\n  </div>\n</div>\n\n<ng-template #defaultMenuItemTemplate let-menuItem>\n  <span>{{ menuItem.label }}</span>\n</ng-template>\n\n<ng-template #defaultButtonTemplate>\n  <i class=\"sg-icon sg-icon-ellipsis\">Open context menu</i>\n</ng-template>\n" }]
+            args: [{ selector: 'ngg-context-menu', template: "<button\n  #contextMenuAnchor\n  class=\"ghost small px-3 border-0\"\n  [class.active]=\"isActive\"\n  (click)=\"open()\"\n>\n  <ng-container\n    [ngTemplateOutlet]=\"menuAnchorTemplate ?? defaultButtonTemplate\"\n  >\n  </ng-container>\n</button>\n\n<div class=\"context-menu-overlay\">\n  <div\n    class=\"popover popover-context-menu\"\n    [class.active]=\"isActive\"\n    [style.top]=\"top\"\n    [style.left]=\"left\"\n    #contextMenuPopover\n  >\n    <ul role=\"listbox\">\n      <li\n        *ngFor=\"let menuItem of menuItems\"\n        (click)=\"onItemClick(menuItem)\"\n        tabindex=\"0\"\n        (keydown)=\"onMenuItemKeyDown($event, menuItem)\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"menuItemTemplate ?? defaultMenuItemTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"\n        >\n        </ng-container>\n      </li>\n    </ul>\n  </div>\n</div>\n\n<ng-template #defaultMenuItemTemplate let-menuItem>\n  <span>{{ menuItem.label }}</span>\n</ng-template>\n\n<ng-template #defaultButtonTemplate>\n  <i class=\"sg-icon sg-icon-ellipsis\">Open context menu</i>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i2.Subject, decorators: [{
                     type: Optional
                 }, {
@@ -511,8 +511,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
         }] });
 
 class NggDropdownComponent {
-    constructor(injector) {
+    constructor(injector, _cdr) {
         this.injector = injector;
+        this._cdr = _cdr;
         this.loop = false;
         this.display = 'label';
         this.useValue = 'value';
@@ -526,10 +527,11 @@ class NggDropdownComponent {
             this._value = target.value;
             this.texts = {
                 ...this.texts,
-                select: this.getDisplayText(this._value),
+                select: this.displayTextByValue(this._value),
             };
             this.onChangeFn?.(this.value);
             this.valueChange.emit(this.value);
+            this._cdr.detectChanges();
         };
         // These adapter functions are used to maintain backwards compatibility with the old interface
         this.compareWithAdapter = (o1, o2) => {
@@ -545,7 +547,7 @@ class NggDropdownComponent {
         this.optionByValue = (value) => {
             return this.options?.find((o) => o[this.useValue] === value);
         };
-        this.getDisplayText = (value) => {
+        this.displayTextByValue = (value) => {
             if (!Array.isArray(value))
                 return (this.optionByValue(value)?.[this.display] ||
                     (this.texts?.placeholder ?? 'Select'));
@@ -577,7 +579,7 @@ class NggDropdownComponent {
         this._value = newValue;
         this.texts = {
             ...this.texts,
-            select: this.getDisplayText(this._value),
+            select: this.displayTextByValue(this._value),
         };
     }
     get value() {
@@ -592,7 +594,7 @@ class NggDropdownComponent {
     get control() {
         return this.injector.get(NgControl);
     }
-    ngAfterViewInit() {
+    ngOnInit() {
         if (!this._value) {
             if (this.multiSelect)
                 this._value = this.options
@@ -600,6 +602,10 @@ class NggDropdownComponent {
                     ?.map((o) => o[this.useValue]);
             else
                 this._value = this.options?.find((o) => o.selected === true)?.[this.useValue];
+            this.texts = {
+                ...this.texts,
+                select: this.displayTextByValue(this._value),
+            };
         }
         this.texts = {
             close: this.texts?.close ?? 'Close',
@@ -607,7 +613,7 @@ class NggDropdownComponent {
             placeholder: this.texts?.placeholder ?? 'Select',
             searchPlaceholder: this.texts?.searchPlaceholder ?? 'Search',
             selected: this.texts?.selected ?? 'selected',
-            select: this.getDisplayText(this._value),
+            select: this.displayTextByValue(this._value),
         };
     }
     writeValue(value) {
@@ -623,7 +629,7 @@ class NggDropdownComponent {
         return (value === '' || value === 'true' || value.toString() === 'true' || false);
     }
 }
-NggDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDropdownComponent, deps: [{ token: Injector }], target: i0.ɵɵFactoryTarget.Component });
+NggDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDropdownComponent, deps: [{ token: Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 NggDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NggDropdownComponent, selector: "ngg-dropdown", inputs: { id: "id", texts: "texts", loop: "loop", display: "display", useValue: "useValue", label: "label", options: "options", valid: "valid", invalid: "invalid", compareWith: "compareWith", searchFilter: "searchFilter", fixedPlacement: "fixedPlacement", multiSelect: "multiSelect", searchable: "searchable", value: "value" }, outputs: { valueChange: "valueChange", touched: "touched" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
@@ -643,7 +649,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
         }], ctorParameters: function () { return [{ type: i0.Injector, decorators: [{
                     type: Inject,
                     args: [Injector]
-                }] }]; }, propDecorators: { id: [{
+                }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { id: [{
                 type: Input
             }], texts: [{
                 type: Input