@sebgroup/green-angular 1.5.1 → 1.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/index.mjs +2 -1
- package/esm2020/lib/context-menu/context-menu.component.mjs +100 -0
- package/esm2020/lib/context-menu/context-menu.module.mjs +18 -0
- package/esm2020/lib/context-menu/index.mjs +3 -0
- package/esm2020/lib/dropdown/dropdown-button.directive.mjs +16 -0
- package/esm2020/lib/dropdown/dropdown.component.mjs +10 -3
- package/esm2020/lib/dropdown/dropdown.module.mjs +17 -4
- package/esm2020/lib/dropdown/index.mjs +2 -1
- package/esm2020/lib/green-angular.module.mjs +5 -1
- package/fesm2015/sebgroup-green-angular.mjs +156 -7
- package/fesm2015/sebgroup-green-angular.mjs.map +1 -1
- package/fesm2020/sebgroup-green-angular.mjs +153 -7
- package/fesm2020/sebgroup-green-angular.mjs.map +1 -1
- package/index.d.ts +1 -0
- package/lib/context-menu/context-menu.component.d.ts +26 -0
- package/lib/context-menu/context-menu.module.d.ts +8 -0
- package/lib/context-menu/index.d.ts +2 -0
- package/lib/dropdown/dropdown-button.directive.d.ts +8 -0
- package/lib/dropdown/dropdown.component.d.ts +4 -1
- package/lib/dropdown/dropdown.module.d.ts +3 -2
- package/lib/dropdown/index.d.ts +1 -0
- package/lib/green-angular.module.d.ts +3 -2
- package/package.json +2 -2
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { EventEmitter, Component, Input, Output, ContentChildren, NgModule, ChangeDetectionStrategy, HostBinding, Directive, Injector, Inject, ViewChild, ContentChild } from '@angular/core';
|
|
2
|
+
import { EventEmitter, Component, Input, Output, ContentChildren, NgModule, ChangeDetectionStrategy, HostBinding, Directive, Injector, Inject, ViewChild, ContentChild, HostListener } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import { randomId, dropdownValues, createDropdown, months, years, createDatepicker, calculateDegrees, sliderColors, getSliderTrackBackground, PaginationI18n } from '@sebgroup/extract';
|
|
@@ -281,6 +281,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
281
281
|
}]
|
|
282
282
|
}], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
|
|
283
283
|
|
|
284
|
+
class NggDropdownButtonDirective {
|
|
285
|
+
constructor(templateRef) {
|
|
286
|
+
this.templateRef = templateRef;
|
|
287
|
+
}
|
|
288
|
+
}
|
|
289
|
+
NggDropdownButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggDropdownButtonDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
290
|
+
NggDropdownButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: NggDropdownButtonDirective, selector: "[nggDropdownButton]", ngImport: i0 });
|
|
291
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggDropdownButtonDirective, decorators: [{
|
|
292
|
+
type: Directive,
|
|
293
|
+
args: [{
|
|
294
|
+
selector: '[nggDropdownButton]',
|
|
295
|
+
}]
|
|
296
|
+
}], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
|
|
297
|
+
|
|
284
298
|
class NggDropdownComponent {
|
|
285
299
|
constructor(cd, injector) {
|
|
286
300
|
this.cd = cd;
|
|
@@ -317,6 +331,9 @@ class NggDropdownComponent {
|
|
|
317
331
|
get value() {
|
|
318
332
|
return this._value;
|
|
319
333
|
}
|
|
334
|
+
get selectedOption() {
|
|
335
|
+
return this.handler?.dropdown.options.find((o) => o.selected);
|
|
336
|
+
}
|
|
320
337
|
get control() {
|
|
321
338
|
return this.injector.get(NgControl);
|
|
322
339
|
}
|
|
@@ -390,7 +407,7 @@ NggDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
|
|
|
390
407
|
useExisting: NggDropdownComponent,
|
|
391
408
|
multi: true,
|
|
392
409
|
},
|
|
393
|
-
], 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 class=\"form-group\">\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 <
|
|
410
|
+
], queries: [{ propertyName: "customOption", first: true, predicate: NggDropdownOptionDirective, descendants: true }, { propertyName: "customButton", first: true, predicate: NggDropdownButtonDirective, 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 class=\"form-group\">\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 role=\"combobox\"\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 <ng-container\n *ngTemplateOutlet=\"\n customButton?.templateRef && !multiSelect && selectedOption\n ? customButton!.templateRef\n : defaultButton;\n context: { option: selectedOption }\n \"\n ></ng-container>\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 <div class=\"d-flex d-sm-none align-items-center\">\n <span class=\"flex-grow-1 ps-4 fs-2 fw-bolder\">{{ label }}</span>\n <button\n type=\"button\"\n class=\"close m-4 m-sm-2 d-block d-sm-none\"\n [attr.aria-label]=\"dropdown?.texts?.close\"\n (click)=\"handler?.close()\"\n >\n <i></i>\n </button>\n </div>\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 <!--TODO: Improve checkboxes in dropdown angular-->\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 #defaultButton let-selected=\"selected\">\n <span>{{ dropdown?.texts?.select }}</span>\n</ng-template>\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 [id]=\"toggler?.attributes?.id + '_search-input'\"\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", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
394
411
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggDropdownComponent, decorators: [{
|
|
395
412
|
type: Component,
|
|
396
413
|
args: [{ selector: 'ngg-dropdown', providers: [
|
|
@@ -399,7 +416,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
399
416
|
useExisting: NggDropdownComponent,
|
|
400
417
|
multi: true,
|
|
401
418
|
},
|
|
402
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-group\">\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 <
|
|
419
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-group\">\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 role=\"combobox\"\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 <ng-container\n *ngTemplateOutlet=\"\n customButton?.templateRef && !multiSelect && selectedOption\n ? customButton!.templateRef\n : defaultButton;\n context: { option: selectedOption }\n \"\n ></ng-container>\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 <div class=\"d-flex d-sm-none align-items-center\">\n <span class=\"flex-grow-1 ps-4 fs-2 fw-bolder\">{{ label }}</span>\n <button\n type=\"button\"\n class=\"close m-4 m-sm-2 d-block d-sm-none\"\n [attr.aria-label]=\"dropdown?.texts?.close\"\n (click)=\"handler?.close()\"\n >\n <i></i>\n </button>\n </div>\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 <!--TODO: Improve checkboxes in dropdown angular-->\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 #defaultButton let-selected=\"selected\">\n <span>{{ dropdown?.texts?.select }}</span>\n</ng-template>\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 [id]=\"toggler?.attributes?.id + '_search-input'\"\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" }]
|
|
403
420
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.Injector, decorators: [{
|
|
404
421
|
type: Inject,
|
|
405
422
|
args: [Injector]
|
|
@@ -447,6 +464,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
447
464
|
}], customOption: [{
|
|
448
465
|
type: ContentChild,
|
|
449
466
|
args: [NggDropdownOptionDirective]
|
|
467
|
+
}], customButton: [{
|
|
468
|
+
type: ContentChild,
|
|
469
|
+
args: [NggDropdownButtonDirective]
|
|
450
470
|
}] } });
|
|
451
471
|
|
|
452
472
|
class NggDatepickerComponent {
|
|
@@ -643,14 +663,26 @@ function dateValidator(dates) {
|
|
|
643
663
|
class NggDropdownModule {
|
|
644
664
|
}
|
|
645
665
|
NggDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
646
|
-
NggDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: NggDropdownModule, declarations: [NggDropdownComponent,
|
|
666
|
+
NggDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: NggDropdownModule, declarations: [NggDropdownComponent,
|
|
667
|
+
NggDropdownOptionDirective,
|
|
668
|
+
NggDropdownButtonDirective], imports: [CommonModule], exports: [NggDropdownComponent,
|
|
669
|
+
NggDropdownOptionDirective,
|
|
670
|
+
NggDropdownButtonDirective] });
|
|
647
671
|
NggDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggDropdownModule, imports: [CommonModule] });
|
|
648
672
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggDropdownModule, decorators: [{
|
|
649
673
|
type: NgModule,
|
|
650
674
|
args: [{
|
|
651
|
-
declarations: [
|
|
675
|
+
declarations: [
|
|
676
|
+
NggDropdownComponent,
|
|
677
|
+
NggDropdownOptionDirective,
|
|
678
|
+
NggDropdownButtonDirective,
|
|
679
|
+
],
|
|
652
680
|
imports: [CommonModule],
|
|
653
|
-
exports: [
|
|
681
|
+
exports: [
|
|
682
|
+
NggDropdownComponent,
|
|
683
|
+
NggDropdownOptionDirective,
|
|
684
|
+
NggDropdownButtonDirective,
|
|
685
|
+
],
|
|
654
686
|
}]
|
|
655
687
|
}] });
|
|
656
688
|
|
|
@@ -1099,6 +1131,117 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
1099
1131
|
}]
|
|
1100
1132
|
}] });
|
|
1101
1133
|
|
|
1134
|
+
class NggContextMenuComponent {
|
|
1135
|
+
constructor(elementRef) {
|
|
1136
|
+
this.elementRef = elementRef;
|
|
1137
|
+
this.direction = 'ltr';
|
|
1138
|
+
this.menuItems = [];
|
|
1139
|
+
this.menuItemTemplate = null;
|
|
1140
|
+
this.menuAnchorTemplate = null;
|
|
1141
|
+
this.contextMenuItemClicked = new EventEmitter();
|
|
1142
|
+
this.isActive = false;
|
|
1143
|
+
this.top = '0px';
|
|
1144
|
+
this.left = '0px';
|
|
1145
|
+
}
|
|
1146
|
+
onDocumentClick(target) {
|
|
1147
|
+
if (!this.isActive) {
|
|
1148
|
+
return;
|
|
1149
|
+
}
|
|
1150
|
+
const contextMenuElement = this.elementRef.nativeElement;
|
|
1151
|
+
if (!contextMenuElement.contains(target)) {
|
|
1152
|
+
this.close();
|
|
1153
|
+
}
|
|
1154
|
+
}
|
|
1155
|
+
open() {
|
|
1156
|
+
if (this.isActive) {
|
|
1157
|
+
this.close();
|
|
1158
|
+
return;
|
|
1159
|
+
}
|
|
1160
|
+
const anchor = this.anchor?.nativeElement;
|
|
1161
|
+
const buttonRect = anchor.getBoundingClientRect();
|
|
1162
|
+
const left = this.calculateLeft(this.direction, buttonRect);
|
|
1163
|
+
const top = this.calculateTop(buttonRect.bottom);
|
|
1164
|
+
this.left = `${left}px`;
|
|
1165
|
+
this.top = `${top}px`;
|
|
1166
|
+
this.isActive = true;
|
|
1167
|
+
}
|
|
1168
|
+
close() {
|
|
1169
|
+
this.isActive = false;
|
|
1170
|
+
}
|
|
1171
|
+
onItemClick(item) {
|
|
1172
|
+
this.contextMenuItemClicked.emit(item);
|
|
1173
|
+
this.close();
|
|
1174
|
+
}
|
|
1175
|
+
onMenuItemKeyDown(event, menuItem) {
|
|
1176
|
+
switch (event.key) {
|
|
1177
|
+
case 'Enter':
|
|
1178
|
+
case ' ':
|
|
1179
|
+
event.preventDefault();
|
|
1180
|
+
this.onItemClick(menuItem);
|
|
1181
|
+
break;
|
|
1182
|
+
default:
|
|
1183
|
+
break;
|
|
1184
|
+
}
|
|
1185
|
+
}
|
|
1186
|
+
calculateTop(buttonRectBottom) {
|
|
1187
|
+
return buttonRectBottom + window.pageYOffset;
|
|
1188
|
+
}
|
|
1189
|
+
calculateLeft(direction, buttonRect) {
|
|
1190
|
+
const popover = this.popover?.nativeElement;
|
|
1191
|
+
const popoverWidth = popover?.offsetWidth || 0;
|
|
1192
|
+
switch (direction) {
|
|
1193
|
+
case 'rtl':
|
|
1194
|
+
return popoverWidth <= buttonRect.left
|
|
1195
|
+
? buttonRect.right - popoverWidth
|
|
1196
|
+
: buttonRect.left;
|
|
1197
|
+
case 'ltr':
|
|
1198
|
+
default:
|
|
1199
|
+
return buttonRect.right + popoverWidth <= window.innerWidth
|
|
1200
|
+
? buttonRect.left
|
|
1201
|
+
: buttonRect.right - popoverWidth;
|
|
1202
|
+
}
|
|
1203
|
+
}
|
|
1204
|
+
}
|
|
1205
|
+
NggContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggContextMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1206
|
+
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"] }] });
|
|
1207
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggContextMenuComponent, decorators: [{
|
|
1208
|
+
type: Component,
|
|
1209
|
+
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" }]
|
|
1210
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { direction: [{
|
|
1211
|
+
type: Input
|
|
1212
|
+
}], menuItems: [{
|
|
1213
|
+
type: Input
|
|
1214
|
+
}], menuItemTemplate: [{
|
|
1215
|
+
type: Input
|
|
1216
|
+
}], menuAnchorTemplate: [{
|
|
1217
|
+
type: Input
|
|
1218
|
+
}], contextMenuItemClicked: [{
|
|
1219
|
+
type: Output
|
|
1220
|
+
}], popover: [{
|
|
1221
|
+
type: ViewChild,
|
|
1222
|
+
args: ['contextMenuPopover']
|
|
1223
|
+
}], anchor: [{
|
|
1224
|
+
type: ViewChild,
|
|
1225
|
+
args: ['contextMenuAnchor']
|
|
1226
|
+
}], onDocumentClick: [{
|
|
1227
|
+
type: HostListener,
|
|
1228
|
+
args: ['document:click', ['$event.target']]
|
|
1229
|
+
}] } });
|
|
1230
|
+
|
|
1231
|
+
class NggContextMenuModule {
|
|
1232
|
+
}
|
|
1233
|
+
NggContextMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggContextMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1234
|
+
NggContextMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: NggContextMenuModule, declarations: [NggContextMenuComponent], imports: [CommonModule], exports: [NggContextMenuComponent] });
|
|
1235
|
+
NggContextMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggContextMenuModule, imports: [CommonModule] });
|
|
1236
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggContextMenuModule, decorators: [{
|
|
1237
|
+
type: NgModule,
|
|
1238
|
+
args: [{
|
|
1239
|
+
declarations: [NggContextMenuComponent],
|
|
1240
|
+
imports: [CommonModule],
|
|
1241
|
+
exports: [NggContextMenuComponent],
|
|
1242
|
+
}]
|
|
1243
|
+
}] });
|
|
1244
|
+
|
|
1102
1245
|
class NggInPageWizardStepCardComponent {
|
|
1103
1246
|
constructor() {
|
|
1104
1247
|
this.handleNextClick = new EventEmitter();
|
|
@@ -1172,6 +1315,7 @@ NggModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
|
|
|
1172
1315
|
NggProgressCircleModule,
|
|
1173
1316
|
NggSegmentedControlModule,
|
|
1174
1317
|
NggSliderModule,
|
|
1318
|
+
NggContextMenuModule,
|
|
1175
1319
|
NggInPageWizardModule] });
|
|
1176
1320
|
NggModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggModule, imports: [CommonModule, NggAccordionModule,
|
|
1177
1321
|
NggBadgeModule,
|
|
@@ -1182,6 +1326,7 @@ NggModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.
|
|
|
1182
1326
|
NggProgressCircleModule,
|
|
1183
1327
|
NggSegmentedControlModule,
|
|
1184
1328
|
NggSliderModule,
|
|
1329
|
+
NggContextMenuModule,
|
|
1185
1330
|
NggInPageWizardModule] });
|
|
1186
1331
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggModule, decorators: [{
|
|
1187
1332
|
type: NgModule,
|
|
@@ -1198,6 +1343,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
1198
1343
|
NggProgressCircleModule,
|
|
1199
1344
|
NggSegmentedControlModule,
|
|
1200
1345
|
NggSliderModule,
|
|
1346
|
+
NggContextMenuModule,
|
|
1201
1347
|
NggInPageWizardModule,
|
|
1202
1348
|
],
|
|
1203
1349
|
}]
|
|
@@ -1392,5 +1538,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
1392
1538
|
* Generated bundle index. Do not edit.
|
|
1393
1539
|
*/
|
|
1394
1540
|
|
|
1395
|
-
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 };
|
|
1541
|
+
export { NggAccordionComponent, NggAccordionListItemComponent, NggAccordionModule, NggBadgeComponent, NggBadgeModule, NggButtonComponent, NggButtonModule, NggContextMenuComponent, NggContextMenuModule, NggDatepickerComponent, NggDatepickerModule, NggDropdownButtonDirective, NggDropdownComponent, NggDropdownModule, NggDropdownOptionDirective, NggInPageWizardModule, NggInPageWizardStepCardComponent, NggModalBodyComponent, NggModalComponent, NggModalFooterComponent, NggModalHeaderComponent, NggModalModule, NggModule, NggPaginationComponent, NggPaginationModule, NggProgressCircleComponent, NggProgressCircleModule, NggSegmentedControlComponent, NggSegmentedControlModule, NggSliderComponent, NggSliderModule, dateValidator };
|
|
1396
1542
|
//# sourceMappingURL=sebgroup-green-angular.mjs.map
|