@sebgroup/green-angular 1.5.0 → 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();
@@ -1122,12 +1233,14 @@ class NggInPageWizardStepCardComponent {
     }
 }
 NggInPageWizardStepCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggInPageWizardStepCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NggInPageWizardStepCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NggInPageWizardStepCardComponent, selector: "ngg-in-page-wizard-step-card", inputs: { stepText: "stepText", title: "title", editBtnText: "editBtnText", nextBtnText: "nextBtnText", isCompleted: "isCompleted", disableNext: "disableNext", isActive: "isActive" }, outputs: { handleNextClick: "handleNextClick" }, ngImport: i0, template: "<section\n  class=\"gds-in-page-wizard-step-card card\"\n  data-testid=\"in-page-wizard-step-card-root\"\n  [class.active]=\"!!isActive\"\n  [class.completed]=\"!!isCompleted\"\n>\n  <header class=\"gds-in-page-wizard-step-card__header\">\n    <div class=\"gds-in-page-wizard-step-card__header__icon\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n        <!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->\n        <path\n          d=\"M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z\"\n        />\n      </svg>\n    </div>\n    <div\n      class=\"gds-in-page-wizard-step-card__header__progress\"\n      data-testid=\"in-page-wizard-step-card-step-text\"\n    >\n      {{ stepText }}\n    </div>\n    <div\n      class=\"gds-in-page-wizard-step-card__header__title\"\n      data-testid=\"in-page-wizard-step-card-title\"\n    >\n      <h2 class=\"h4\">{{ title }}</h2>\n    </div>\n\n    <div\n      class=\"gds-in-page-wizard-step-card__header__edit\"\n      *ngIf=\"!!isCompleted && !isActive\"\n    >\n      <button\n        class=\"secondary small\"\n        (click)=\"handleOnEditBtnClick($event)\"\n        data-testid=\"in-page-wizard-step-card-edit-btn\"\n      >\n        {{ editBtnText }}\n      </button>\n    </div>\n  </header>\n\n  <div\n    class=\"gds-in-page-wizard-step-card__content\"\n    *ngIf=\"!!isActive || !!isCompleted\"\n    data-testid=\"in-page-wizard-step-card-content\"\n  >\n    <ng-content></ng-content>\n  </div>\n  <footer class=\"gds-in-page-wizard-step-card__footer\" *ngIf=\"isActive\">\n    <button\n      class=\"primary\"\n      [disabled]=\"disableNext\"\n      (click)=\"handleOnNextBtnClick($event)\"\n      data-testid=\"in-page-wizard-step-card-next-btn\"\n    >\n      {{ nextBtnText }}\n    </button>\n  </footer>\n</section>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+NggInPageWizardStepCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NggInPageWizardStepCardComponent, selector: "ngg-in-page-wizard-step-card", inputs: { stepText: "stepText", title: "title", editBtnText: "editBtnText", nextBtnText: "nextBtnText", isCompleted: "isCompleted", disableNext: "disableNext", isActive: "isActive" }, outputs: { handleNextClick: "handleNextClick", handleEditClick: "handleEditClick" }, ngImport: i0, template: "<section\n  class=\"gds-in-page-wizard-step-card card\"\n  data-testid=\"in-page-wizard-step-card-root\"\n  [class.active]=\"!!isActive\"\n  [class.completed]=\"!!isCompleted\"\n>\n  <header class=\"gds-in-page-wizard-step-card__header\">\n    <div class=\"gds-in-page-wizard-step-card__header__icon\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n        <!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->\n        <path\n          d=\"M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z\"\n        />\n      </svg>\n    </div>\n    <div\n      class=\"gds-in-page-wizard-step-card__header__progress\"\n      data-testid=\"in-page-wizard-step-card-step-text\"\n    >\n      {{ stepText }}\n    </div>\n    <div\n      class=\"gds-in-page-wizard-step-card__header__title\"\n      data-testid=\"in-page-wizard-step-card-title\"\n    >\n      <h2 class=\"h4\">{{ title }}</h2>\n    </div>\n\n    <div\n      class=\"gds-in-page-wizard-step-card__header__edit\"\n      *ngIf=\"!!isCompleted && !isActive\"\n    >\n      <button\n        class=\"secondary small\"\n        (click)=\"handleOnEditBtnClick($event)\"\n        data-testid=\"in-page-wizard-step-card-edit-btn\"\n      >\n        {{ editBtnText }}\n      </button>\n    </div>\n  </header>\n\n  <div\n    class=\"gds-in-page-wizard-step-card__content\"\n    *ngIf=\"!!isActive || !!isCompleted\"\n    data-testid=\"in-page-wizard-step-card-content\"\n  >\n    <ng-content></ng-content>\n  </div>\n  <footer class=\"gds-in-page-wizard-step-card__footer\" *ngIf=\"isActive\">\n    <button\n      class=\"primary\"\n      [disabled]=\"disableNext\"\n      (click)=\"handleOnNextBtnClick($event)\"\n      data-testid=\"in-page-wizard-step-card-next-btn\"\n    >\n      {{ nextBtnText }}\n    </button>\n  </footer>\n</section>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggInPageWizardStepCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngg-in-page-wizard-step-card', template: "<section\n  class=\"gds-in-page-wizard-step-card card\"\n  data-testid=\"in-page-wizard-step-card-root\"\n  [class.active]=\"!!isActive\"\n  [class.completed]=\"!!isCompleted\"\n>\n  <header class=\"gds-in-page-wizard-step-card__header\">\n    <div class=\"gds-in-page-wizard-step-card__header__icon\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n        <!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->\n        <path\n          d=\"M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z\"\n        />\n      </svg>\n    </div>\n    <div\n      class=\"gds-in-page-wizard-step-card__header__progress\"\n      data-testid=\"in-page-wizard-step-card-step-text\"\n    >\n      {{ stepText }}\n    </div>\n    <div\n      class=\"gds-in-page-wizard-step-card__header__title\"\n      data-testid=\"in-page-wizard-step-card-title\"\n    >\n      <h2 class=\"h4\">{{ title }}</h2>\n    </div>\n\n    <div\n      class=\"gds-in-page-wizard-step-card__header__edit\"\n      *ngIf=\"!!isCompleted && !isActive\"\n    >\n      <button\n        class=\"secondary small\"\n        (click)=\"handleOnEditBtnClick($event)\"\n        data-testid=\"in-page-wizard-step-card-edit-btn\"\n      >\n        {{ editBtnText }}\n      </button>\n    </div>\n  </header>\n\n  <div\n    class=\"gds-in-page-wizard-step-card__content\"\n    *ngIf=\"!!isActive || !!isCompleted\"\n    data-testid=\"in-page-wizard-step-card-content\"\n  >\n    <ng-content></ng-content>\n  </div>\n  <footer class=\"gds-in-page-wizard-step-card__footer\" *ngIf=\"isActive\">\n    <button\n      class=\"primary\"\n      [disabled]=\"disableNext\"\n      (click)=\"handleOnNextBtnClick($event)\"\n      data-testid=\"in-page-wizard-step-card-next-btn\"\n    >\n      {{ nextBtnText }}\n    </button>\n  </footer>\n</section>\n" }]
         }], propDecorators: { handleNextClick: [{
                 type: Output
+            }], handleEditClick: [{
+                type: Output
             }], stepText: [{
                 type: Input
             }], title: [{
@@ -1170,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,
@@ -1180,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,
@@ -1196,6 +1311,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         NggProgressCircleModule,
                         NggSegmentedControlModule,
                         NggSliderModule,
+                        NggContextMenuModule,
                         NggInPageWizardModule,
                     ],
                 }]
@@ -1390,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