@sebgroup/green-angular 1.6.0 → 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/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/fesm2015/sebgroup-green-angular.mjs +39 -6
- package/fesm2015/sebgroup-green-angular.mjs.map +1 -1
- package/fesm2020/sebgroup-green-angular.mjs +38 -6
- package/fesm2020/sebgroup-green-angular.mjs.map +1 -1
- 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/package.json +1 -1
|
@@ -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
|
|
|
@@ -1506,5 +1538,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
1506
1538
|
* Generated bundle index. Do not edit.
|
|
1507
1539
|
*/
|
|
1508
1540
|
|
|
1509
|
-
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 };
|
|
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 };
|
|
1510
1542
|
//# sourceMappingURL=sebgroup-green-angular.mjs.map
|