@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';
|
|
@@ -283,6 +283,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
283
283
|
}]
|
|
284
284
|
}], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
|
|
285
285
|
|
|
286
|
+
class NggDropdownButtonDirective {
|
|
287
|
+
constructor(templateRef) {
|
|
288
|
+
this.templateRef = templateRef;
|
|
289
|
+
}
|
|
290
|
+
}
|
|
291
|
+
NggDropdownButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggDropdownButtonDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
292
|
+
NggDropdownButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: NggDropdownButtonDirective, selector: "[nggDropdownButton]", ngImport: i0 });
|
|
293
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggDropdownButtonDirective, decorators: [{
|
|
294
|
+
type: Directive,
|
|
295
|
+
args: [{
|
|
296
|
+
selector: '[nggDropdownButton]',
|
|
297
|
+
}]
|
|
298
|
+
}], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
|
|
299
|
+
|
|
286
300
|
class NggDropdownComponent {
|
|
287
301
|
constructor(cd, injector) {
|
|
288
302
|
var _a, _b, _c;
|
|
@@ -322,6 +336,10 @@ class NggDropdownComponent {
|
|
|
322
336
|
get value() {
|
|
323
337
|
return this._value;
|
|
324
338
|
}
|
|
339
|
+
get selectedOption() {
|
|
340
|
+
var _a;
|
|
341
|
+
return (_a = this.handler) === null || _a === void 0 ? void 0 : _a.dropdown.options.find((o) => o.selected);
|
|
342
|
+
}
|
|
325
343
|
get control() {
|
|
326
344
|
return this.injector.get(NgControl);
|
|
327
345
|
}
|
|
@@ -401,7 +419,7 @@ NggDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
|
|
|
401
419
|
useExisting: NggDropdownComponent,
|
|
402
420
|
multi: true,
|
|
403
421
|
},
|
|
404
|
-
], 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 <
|
|
422
|
+
], 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 });
|
|
405
423
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggDropdownComponent, decorators: [{
|
|
406
424
|
type: Component,
|
|
407
425
|
args: [{ selector: 'ngg-dropdown', providers: [
|
|
@@ -410,7 +428,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
410
428
|
useExisting: NggDropdownComponent,
|
|
411
429
|
multi: true,
|
|
412
430
|
},
|
|
413
|
-
], 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 <
|
|
431
|
+
], 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" }]
|
|
414
432
|
}], ctorParameters: function () {
|
|
415
433
|
return [{ type: i0.ChangeDetectorRef }, { type: i0.Injector, decorators: [{
|
|
416
434
|
type: Inject,
|
|
@@ -460,6 +478,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
460
478
|
}], customOption: [{
|
|
461
479
|
type: ContentChild,
|
|
462
480
|
args: [NggDropdownOptionDirective]
|
|
481
|
+
}], customButton: [{
|
|
482
|
+
type: ContentChild,
|
|
483
|
+
args: [NggDropdownButtonDirective]
|
|
463
484
|
}] } });
|
|
464
485
|
|
|
465
486
|
class NggDatepickerComponent {
|
|
@@ -657,14 +678,26 @@ function dateValidator(dates) {
|
|
|
657
678
|
class NggDropdownModule {
|
|
658
679
|
}
|
|
659
680
|
NggDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
660
|
-
NggDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: NggDropdownModule, declarations: [NggDropdownComponent,
|
|
681
|
+
NggDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: NggDropdownModule, declarations: [NggDropdownComponent,
|
|
682
|
+
NggDropdownOptionDirective,
|
|
683
|
+
NggDropdownButtonDirective], imports: [CommonModule], exports: [NggDropdownComponent,
|
|
684
|
+
NggDropdownOptionDirective,
|
|
685
|
+
NggDropdownButtonDirective] });
|
|
661
686
|
NggDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggDropdownModule, imports: [CommonModule] });
|
|
662
687
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggDropdownModule, decorators: [{
|
|
663
688
|
type: NgModule,
|
|
664
689
|
args: [{
|
|
665
|
-
declarations: [
|
|
690
|
+
declarations: [
|
|
691
|
+
NggDropdownComponent,
|
|
692
|
+
NggDropdownOptionDirective,
|
|
693
|
+
NggDropdownButtonDirective,
|
|
694
|
+
],
|
|
666
695
|
imports: [CommonModule],
|
|
667
|
-
exports: [
|
|
696
|
+
exports: [
|
|
697
|
+
NggDropdownComponent,
|
|
698
|
+
NggDropdownOptionDirective,
|
|
699
|
+
NggDropdownButtonDirective,
|
|
700
|
+
],
|
|
668
701
|
}]
|
|
669
702
|
}] });
|
|
670
703
|
|
|
@@ -1116,6 +1149,119 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
1116
1149
|
}]
|
|
1117
1150
|
}] });
|
|
1118
1151
|
|
|
1152
|
+
class NggContextMenuComponent {
|
|
1153
|
+
constructor(elementRef) {
|
|
1154
|
+
this.elementRef = elementRef;
|
|
1155
|
+
this.direction = 'ltr';
|
|
1156
|
+
this.menuItems = [];
|
|
1157
|
+
this.menuItemTemplate = null;
|
|
1158
|
+
this.menuAnchorTemplate = null;
|
|
1159
|
+
this.contextMenuItemClicked = new EventEmitter();
|
|
1160
|
+
this.isActive = false;
|
|
1161
|
+
this.top = '0px';
|
|
1162
|
+
this.left = '0px';
|
|
1163
|
+
}
|
|
1164
|
+
onDocumentClick(target) {
|
|
1165
|
+
if (!this.isActive) {
|
|
1166
|
+
return;
|
|
1167
|
+
}
|
|
1168
|
+
const contextMenuElement = this.elementRef.nativeElement;
|
|
1169
|
+
if (!contextMenuElement.contains(target)) {
|
|
1170
|
+
this.close();
|
|
1171
|
+
}
|
|
1172
|
+
}
|
|
1173
|
+
open() {
|
|
1174
|
+
var _a;
|
|
1175
|
+
if (this.isActive) {
|
|
1176
|
+
this.close();
|
|
1177
|
+
return;
|
|
1178
|
+
}
|
|
1179
|
+
const anchor = (_a = this.anchor) === null || _a === void 0 ? void 0 : _a.nativeElement;
|
|
1180
|
+
const buttonRect = anchor.getBoundingClientRect();
|
|
1181
|
+
const left = this.calculateLeft(this.direction, buttonRect);
|
|
1182
|
+
const top = this.calculateTop(buttonRect.bottom);
|
|
1183
|
+
this.left = `${left}px`;
|
|
1184
|
+
this.top = `${top}px`;
|
|
1185
|
+
this.isActive = true;
|
|
1186
|
+
}
|
|
1187
|
+
close() {
|
|
1188
|
+
this.isActive = false;
|
|
1189
|
+
}
|
|
1190
|
+
onItemClick(item) {
|
|
1191
|
+
this.contextMenuItemClicked.emit(item);
|
|
1192
|
+
this.close();
|
|
1193
|
+
}
|
|
1194
|
+
onMenuItemKeyDown(event, menuItem) {
|
|
1195
|
+
switch (event.key) {
|
|
1196
|
+
case 'Enter':
|
|
1197
|
+
case ' ':
|
|
1198
|
+
event.preventDefault();
|
|
1199
|
+
this.onItemClick(menuItem);
|
|
1200
|
+
break;
|
|
1201
|
+
default:
|
|
1202
|
+
break;
|
|
1203
|
+
}
|
|
1204
|
+
}
|
|
1205
|
+
calculateTop(buttonRectBottom) {
|
|
1206
|
+
return buttonRectBottom + window.pageYOffset;
|
|
1207
|
+
}
|
|
1208
|
+
calculateLeft(direction, buttonRect) {
|
|
1209
|
+
var _a;
|
|
1210
|
+
const popover = (_a = this.popover) === null || _a === void 0 ? void 0 : _a.nativeElement;
|
|
1211
|
+
const popoverWidth = (popover === null || popover === void 0 ? void 0 : popover.offsetWidth) || 0;
|
|
1212
|
+
switch (direction) {
|
|
1213
|
+
case 'rtl':
|
|
1214
|
+
return popoverWidth <= buttonRect.left
|
|
1215
|
+
? buttonRect.right - popoverWidth
|
|
1216
|
+
: buttonRect.left;
|
|
1217
|
+
case 'ltr':
|
|
1218
|
+
default:
|
|
1219
|
+
return buttonRect.right + popoverWidth <= window.innerWidth
|
|
1220
|
+
? buttonRect.left
|
|
1221
|
+
: buttonRect.right - popoverWidth;
|
|
1222
|
+
}
|
|
1223
|
+
}
|
|
1224
|
+
}
|
|
1225
|
+
NggContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggContextMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1226
|
+
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"] }] });
|
|
1227
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggContextMenuComponent, decorators: [{
|
|
1228
|
+
type: Component,
|
|
1229
|
+
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" }]
|
|
1230
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { direction: [{
|
|
1231
|
+
type: Input
|
|
1232
|
+
}], menuItems: [{
|
|
1233
|
+
type: Input
|
|
1234
|
+
}], menuItemTemplate: [{
|
|
1235
|
+
type: Input
|
|
1236
|
+
}], menuAnchorTemplate: [{
|
|
1237
|
+
type: Input
|
|
1238
|
+
}], contextMenuItemClicked: [{
|
|
1239
|
+
type: Output
|
|
1240
|
+
}], popover: [{
|
|
1241
|
+
type: ViewChild,
|
|
1242
|
+
args: ['contextMenuPopover']
|
|
1243
|
+
}], anchor: [{
|
|
1244
|
+
type: ViewChild,
|
|
1245
|
+
args: ['contextMenuAnchor']
|
|
1246
|
+
}], onDocumentClick: [{
|
|
1247
|
+
type: HostListener,
|
|
1248
|
+
args: ['document:click', ['$event.target']]
|
|
1249
|
+
}] } });
|
|
1250
|
+
|
|
1251
|
+
class NggContextMenuModule {
|
|
1252
|
+
}
|
|
1253
|
+
NggContextMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggContextMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1254
|
+
NggContextMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: NggContextMenuModule, declarations: [NggContextMenuComponent], imports: [CommonModule], exports: [NggContextMenuComponent] });
|
|
1255
|
+
NggContextMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggContextMenuModule, imports: [CommonModule] });
|
|
1256
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggContextMenuModule, decorators: [{
|
|
1257
|
+
type: NgModule,
|
|
1258
|
+
args: [{
|
|
1259
|
+
declarations: [NggContextMenuComponent],
|
|
1260
|
+
imports: [CommonModule],
|
|
1261
|
+
exports: [NggContextMenuComponent],
|
|
1262
|
+
}]
|
|
1263
|
+
}] });
|
|
1264
|
+
|
|
1119
1265
|
class NggInPageWizardStepCardComponent {
|
|
1120
1266
|
constructor() {
|
|
1121
1267
|
this.handleNextClick = new EventEmitter();
|
|
@@ -1189,6 +1335,7 @@ NggModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
|
|
|
1189
1335
|
NggProgressCircleModule,
|
|
1190
1336
|
NggSegmentedControlModule,
|
|
1191
1337
|
NggSliderModule,
|
|
1338
|
+
NggContextMenuModule,
|
|
1192
1339
|
NggInPageWizardModule] });
|
|
1193
1340
|
NggModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggModule, imports: [CommonModule, NggAccordionModule,
|
|
1194
1341
|
NggBadgeModule,
|
|
@@ -1199,6 +1346,7 @@ NggModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.
|
|
|
1199
1346
|
NggProgressCircleModule,
|
|
1200
1347
|
NggSegmentedControlModule,
|
|
1201
1348
|
NggSliderModule,
|
|
1349
|
+
NggContextMenuModule,
|
|
1202
1350
|
NggInPageWizardModule] });
|
|
1203
1351
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggModule, decorators: [{
|
|
1204
1352
|
type: NgModule,
|
|
@@ -1215,6 +1363,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
1215
1363
|
NggProgressCircleModule,
|
|
1216
1364
|
NggSegmentedControlModule,
|
|
1217
1365
|
NggSliderModule,
|
|
1366
|
+
NggContextMenuModule,
|
|
1218
1367
|
NggInPageWizardModule,
|
|
1219
1368
|
],
|
|
1220
1369
|
}]
|
|
@@ -1409,5 +1558,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
1409
1558
|
* Generated bundle index. Do not edit.
|
|
1410
1559
|
*/
|
|
1411
1560
|
|
|
1412
|
-
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 };
|
|
1561
|
+
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 };
|
|
1413
1562
|
//# sourceMappingURL=sebgroup-green-angular.mjs.map
|