@sebgroup/green-angular 1.5.1 → 1.6.0

package/fesm2020/sebgroup-green-angular.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, ContentChildren, NgModule, ChangeDetectionStrategy, HostBinding, Directive, Injector, Inject, ViewChild, ContentChild } from '@angular/core';
+import { EventEmitter, Component, Input, Output, ContentChildren, NgModule, ChangeDetectionStrategy, HostBinding, Directive, Injector, Inject, ViewChild, ContentChild, HostListener } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { randomId, dropdownValues, createDropdown, months, years, createDatepicker, calculateDegrees, sliderColors, getSliderTrackBackground, PaginationI18n } from '@sebgroup/extract';
@@ -1099,6 +1099,117 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }]
         }] });
 
+class NggContextMenuComponent {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.direction = 'ltr';
+        this.menuItems = [];
+        this.menuItemTemplate = null;
+        this.menuAnchorTemplate = null;
+        this.contextMenuItemClicked = new EventEmitter();
+        this.isActive = false;
+        this.top = '0px';
+        this.left = '0px';
+    }
+    onDocumentClick(target) {
+        if (!this.isActive) {
+            return;
+        }
+        const contextMenuElement = this.elementRef.nativeElement;
+        if (!contextMenuElement.contains(target)) {
+            this.close();
+        }
+    }
+    open() {
+        if (this.isActive) {
+            this.close();
+            return;
+        }
+        const anchor = this.anchor?.nativeElement;
+        const buttonRect = anchor.getBoundingClientRect();
+        const left = this.calculateLeft(this.direction, buttonRect);
+        const top = this.calculateTop(buttonRect.bottom);
+        this.left = `${left}px`;
+        this.top = `${top}px`;
+        this.isActive = true;
+    }
+    close() {
+        this.isActive = false;
+    }
+    onItemClick(item) {
+        this.contextMenuItemClicked.emit(item);
+        this.close();
+    }
+    onMenuItemKeyDown(event, menuItem) {
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                this.onItemClick(menuItem);
+                break;
+            default:
+                break;
+        }
+    }
+    calculateTop(buttonRectBottom) {
+        return buttonRectBottom + window.pageYOffset;
+    }
+    calculateLeft(direction, buttonRect) {
+        const popover = this.popover?.nativeElement;
+        const popoverWidth = popover?.offsetWidth || 0;
+        switch (direction) {
+            case 'rtl':
+                return popoverWidth <= buttonRect.left
+                    ? buttonRect.right - popoverWidth
+                    : buttonRect.left;
+            case 'ltr':
+            default:
+                return buttonRect.right + popoverWidth <= window.innerWidth
+                    ? buttonRect.left
+                    : buttonRect.right - popoverWidth;
+        }
+    }
+}
+NggContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggContextMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+NggContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NggContextMenuComponent, selector: "ngg-context-menu", inputs: { direction: "direction", menuItems: "menuItems", menuItemTemplate: "menuItemTemplate", menuAnchorTemplate: "menuAnchorTemplate" }, 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 #contextMenuAnchor class=\"ghost small\" (click)=\"open()\">\n  <ng-container\n    [ngTemplateOutlet]=\"menuAnchorTemplate ?? defaultButtonTemplate\"\n  >\n  </ng-container>\n</button>\n\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\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: "14.3.0", ngImport: i0, type: NggContextMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngg-context-menu', template: "<button #contextMenuAnchor class=\"ghost small\" (click)=\"open()\">\n  <ng-container\n    [ngTemplateOutlet]=\"menuAnchorTemplate ?? defaultButtonTemplate\"\n  >\n  </ng-container>\n</button>\n\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\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.ElementRef }]; }, propDecorators: { direction: [{
+                type: Input
+            }], menuItems: [{
+                type: Input
+            }], menuItemTemplate: [{
+                type: Input
+            }], menuAnchorTemplate: [{
+                type: Input
+            }], contextMenuItemClicked: [{
+                type: Output
+            }], popover: [{
+                type: ViewChild,
+                args: ['contextMenuPopover']
+            }], anchor: [{
+                type: ViewChild,
+                args: ['contextMenuAnchor']
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event.target']]
+            }] } });
+
+class NggContextMenuModule {
+}
+NggContextMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggContextMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NggContextMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: NggContextMenuModule, declarations: [NggContextMenuComponent], imports: [CommonModule], exports: [NggContextMenuComponent] });
+NggContextMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggContextMenuModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggContextMenuModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NggContextMenuComponent],
+                    imports: [CommonModule],
+                    exports: [NggContextMenuComponent],
+                }]
+        }] });
+
 class NggInPageWizardStepCardComponent {
     constructor() {
         this.handleNextClick = new EventEmitter();
@@ -1172,6 +1283,7 @@ NggModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
         NggProgressCircleModule,
         NggSegmentedControlModule,
         NggSliderModule,
+        NggContextMenuModule,
         NggInPageWizardModule] });
 NggModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggModule, imports: [CommonModule, NggAccordionModule,
         NggBadgeModule,
@@ -1182,6 +1294,7 @@ NggModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.
         NggProgressCircleModule,
         NggSegmentedControlModule,
         NggSliderModule,
+        NggContextMenuModule,
         NggInPageWizardModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggModule, decorators: [{
             type: NgModule,
@@ -1198,6 +1311,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         NggProgressCircleModule,
                         NggSegmentedControlModule,
                         NggSliderModule,
+                        NggContextMenuModule,
                         NggInPageWizardModule,
                     ],
                 }]
@@ -1392,5 +1506,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NggAccordionComponent, NggAccordionListItemComponent, NggAccordionModule, NggBadgeComponent, NggBadgeModule, NggButtonComponent, NggButtonModule, NggDatepickerComponent, NggDatepickerModule, NggDropdownComponent, NggDropdownModule, NggDropdownOptionDirective, NggInPageWizardModule, NggInPageWizardStepCardComponent, NggModalBodyComponent, NggModalComponent, NggModalFooterComponent, NggModalHeaderComponent, NggModalModule, NggModule, NggPaginationComponent, NggPaginationModule, NggProgressCircleComponent, NggProgressCircleModule, NggSegmentedControlComponent, NggSegmentedControlModule, NggSliderComponent, NggSliderModule, dateValidator };
+export { NggAccordionComponent, NggAccordionListItemComponent, NggAccordionModule, NggBadgeComponent, NggBadgeModule, NggButtonComponent, NggButtonModule, NggContextMenuComponent, NggContextMenuModule, NggDatepickerComponent, NggDatepickerModule, NggDropdownComponent, NggDropdownModule, NggDropdownOptionDirective, NggInPageWizardModule, NggInPageWizardStepCardComponent, NggModalBodyComponent, NggModalComponent, NggModalFooterComponent, NggModalHeaderComponent, NggModalModule, NggModule, NggPaginationComponent, NggPaginationModule, NggProgressCircleComponent, NggProgressCircleModule, NggSegmentedControlComponent, NggSegmentedControlModule, NggSliderComponent, NggSliderModule, dateValidator };
 //# sourceMappingURL=sebgroup-green-angular.mjs.map