@sebgroup/green-angular 2.0.0 → 2.0.2
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.component.mjs +21 -13
- package/esm2020/lib/dropdown/dropdown.module.mjs +9 -3
- package/fesm2015/sebgroup-green-angular.mjs +24 -13
- package/fesm2015/sebgroup-green-angular.mjs.map +1 -1
- package/fesm2020/sebgroup-green-angular.mjs +27 -13
- package/fesm2020/sebgroup-green-angular.mjs.map +1 -1
- package/lib/dropdown/dropdown.component.d.ts +7 -6
- package/lib/dropdown/dropdown.module.d.ts +1 -1
- package/package.json +3 -3
|
@@ -511,8 +511,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
511
511
|
}] });
|
|
512
512
|
|
|
513
513
|
class NggDropdownComponent {
|
|
514
|
-
constructor(injector) {
|
|
514
|
+
constructor(injector, _cdr) {
|
|
515
515
|
this.injector = injector;
|
|
516
|
+
this._cdr = _cdr;
|
|
516
517
|
this.loop = false;
|
|
517
518
|
this.display = 'label';
|
|
518
519
|
this.useValue = 'value';
|
|
@@ -526,10 +527,11 @@ class NggDropdownComponent {
|
|
|
526
527
|
this._value = target.value;
|
|
527
528
|
this.texts = {
|
|
528
529
|
...this.texts,
|
|
529
|
-
select: this.
|
|
530
|
+
select: this.displayTextByValue(this._value),
|
|
530
531
|
};
|
|
531
532
|
this.onChangeFn?.(this.value);
|
|
532
533
|
this.valueChange.emit(this.value);
|
|
534
|
+
this._cdr.detectChanges();
|
|
533
535
|
};
|
|
534
536
|
// These adapter functions are used to maintain backwards compatibility with the old interface
|
|
535
537
|
this.compareWithAdapter = (o1, o2) => {
|
|
@@ -545,7 +547,7 @@ class NggDropdownComponent {
|
|
|
545
547
|
this.optionByValue = (value) => {
|
|
546
548
|
return this.options?.find((o) => o[this.useValue] === value);
|
|
547
549
|
};
|
|
548
|
-
this.
|
|
550
|
+
this.displayTextByValue = (value) => {
|
|
549
551
|
if (!Array.isArray(value))
|
|
550
552
|
return (this.optionByValue(value)?.[this.display] ||
|
|
551
553
|
(this.texts?.placeholder ?? 'Select'));
|
|
@@ -577,7 +579,7 @@ class NggDropdownComponent {
|
|
|
577
579
|
this._value = newValue;
|
|
578
580
|
this.texts = {
|
|
579
581
|
...this.texts,
|
|
580
|
-
select: this.
|
|
582
|
+
select: this.displayTextByValue(this._value),
|
|
581
583
|
};
|
|
582
584
|
}
|
|
583
585
|
get value() {
|
|
@@ -585,12 +587,14 @@ class NggDropdownComponent {
|
|
|
585
587
|
}
|
|
586
588
|
//
|
|
587
589
|
get selectedOption() {
|
|
588
|
-
return this.value
|
|
590
|
+
return Array.isArray(this.value)
|
|
591
|
+
? this.value.map((v) => this.optionByValue(v))
|
|
592
|
+
: this.optionByValue(this.value);
|
|
589
593
|
}
|
|
590
594
|
get control() {
|
|
591
595
|
return this.injector.get(NgControl);
|
|
592
596
|
}
|
|
593
|
-
|
|
597
|
+
ngOnInit() {
|
|
594
598
|
if (!this._value) {
|
|
595
599
|
if (this.multiSelect)
|
|
596
600
|
this._value = this.options
|
|
@@ -598,6 +602,10 @@ class NggDropdownComponent {
|
|
|
598
602
|
?.map((o) => o[this.useValue]);
|
|
599
603
|
else
|
|
600
604
|
this._value = this.options?.find((o) => o.selected === true)?.[this.useValue];
|
|
605
|
+
this.texts = {
|
|
606
|
+
...this.texts,
|
|
607
|
+
select: this.displayTextByValue(this._value),
|
|
608
|
+
};
|
|
601
609
|
}
|
|
602
610
|
this.texts = {
|
|
603
611
|
close: this.texts?.close ?? 'Close',
|
|
@@ -605,7 +613,7 @@ class NggDropdownComponent {
|
|
|
605
613
|
placeholder: this.texts?.placeholder ?? 'Select',
|
|
606
614
|
searchPlaceholder: this.texts?.searchPlaceholder ?? 'Search',
|
|
607
615
|
selected: this.texts?.selected ?? 'selected',
|
|
608
|
-
select: this.
|
|
616
|
+
select: this.displayTextByValue(this._value),
|
|
609
617
|
};
|
|
610
618
|
}
|
|
611
619
|
writeValue(value) {
|
|
@@ -621,14 +629,14 @@ class NggDropdownComponent {
|
|
|
621
629
|
return (value === '' || value === 'true' || value.toString() === 'true' || false);
|
|
622
630
|
}
|
|
623
631
|
}
|
|
624
|
-
NggDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDropdownComponent, deps: [{ token: Injector }], target: i0.ɵɵFactoryTarget.Component });
|
|
632
|
+
NggDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDropdownComponent, deps: [{ token: Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
625
633
|
NggDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NggDropdownComponent, selector: "ngg-dropdown", inputs: { id: "id", texts: "texts", loop: "loop", display: "display", useValue: "useValue", label: "label", options: "options", valid: "valid", invalid: "invalid", compareWith: "compareWith", searchFilter: "searchFilter", fixedPlacement: "fixedPlacement", multiSelect: "multiSelect", searchable: "searchable", value: "value" }, outputs: { valueChange: "valueChange", touched: "touched" }, providers: [
|
|
626
634
|
{
|
|
627
635
|
provide: NG_VALUE_ACCESSOR,
|
|
628
636
|
useExisting: NggDropdownComponent,
|
|
629
637
|
multi: true,
|
|
630
638
|
},
|
|
631
|
-
], queries: [{ propertyName: "customOption", first: true, predicate: NggDropdownOptionDirective, descendants: true }, { propertyName: "customButton", first: true, predicate: NggDropdownButtonDirective, descendants: true }], viewQueries: [{ propertyName: "gdsDropdown", first: true, predicate: ["gdsDropdown"], descendants: true }], ngImport: i0, template: "<div class=\"form-group\">\n <gds-dropdown\n *nggCoreElement\n #gdsDropdown\n [value]=\"
|
|
639
|
+
], queries: [{ propertyName: "customOption", first: true, predicate: NggDropdownOptionDirective, descendants: true }, { propertyName: "customButton", first: true, predicate: NggDropdownButtonDirective, descendants: true }], viewQueries: [{ propertyName: "gdsDropdown", first: true, predicate: ["gdsDropdown"], descendants: true }], ngImport: i0, template: "<div class=\"form-group\">\n <gds-dropdown\n *nggCoreElement\n #gdsDropdown\n [value]=\"value\"\n [searchable]=\"searchable\"\n [label]=\"label\"\n (change)=\"onValueChange($event)\"\n [multiple]=\"multiSelect\"\n [invalid]=\"invalid\"\n [compareWith]=\"compareWithAdapter\"\n [searchFilter]=\"searchFilterAdapter\"\n >\n <span slot=\"message\" #formInfo\n ><ng-content select=\"[data-form-info]\"></ng-content\n ></span>\n\n <span slot=\"trigger\"\n ><ng-container\n *ngTemplateOutlet=\"\n customButton?.templateRef && selectedOption\n ? customButton!.templateRef\n : defaultButton;\n context: { option: selectedOption }\n \"\n ></ng-container\n ></span>\n\n <ng-container *ngFor=\"let option of options; let index = index\">\n <gds-option *nggCoreElement [value]=\"option[useValue]\"\n ><ng-container\n *ngTemplateOutlet=\"\n customOption?.templateRef\n ? customOption!.templateRef\n : defaultOption;\n context: { option: option, index: index }\n \"\n ></ng-container\n ></gds-option>\n </ng-container>\n </gds-dropdown>\n</div>\n\n<ng-template #defaultButton let-selected=\"option\">\n <span>{{ texts?.select }}</span>\n</ng-template>\n\n<ng-template #defaultOption let-option=\"option\">\n {{ display ? option[display] : option.name }}\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"] }, { kind: "directive", type: NggCoreElementDirective, selector: "[nggCoreElement]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
632
640
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDropdownComponent, decorators: [{
|
|
633
641
|
type: Component,
|
|
634
642
|
args: [{ selector: 'ngg-dropdown', providers: [
|
|
@@ -637,11 +645,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
637
645
|
useExisting: NggDropdownComponent,
|
|
638
646
|
multi: true,
|
|
639
647
|
},
|
|
640
|
-
], template: "<div class=\"form-group\">\n <gds-dropdown\n *nggCoreElement\n #gdsDropdown\n [value]=\"
|
|
648
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-group\">\n <gds-dropdown\n *nggCoreElement\n #gdsDropdown\n [value]=\"value\"\n [searchable]=\"searchable\"\n [label]=\"label\"\n (change)=\"onValueChange($event)\"\n [multiple]=\"multiSelect\"\n [invalid]=\"invalid\"\n [compareWith]=\"compareWithAdapter\"\n [searchFilter]=\"searchFilterAdapter\"\n >\n <span slot=\"message\" #formInfo\n ><ng-content select=\"[data-form-info]\"></ng-content\n ></span>\n\n <span slot=\"trigger\"\n ><ng-container\n *ngTemplateOutlet=\"\n customButton?.templateRef && selectedOption\n ? customButton!.templateRef\n : defaultButton;\n context: { option: selectedOption }\n \"\n ></ng-container\n ></span>\n\n <ng-container *ngFor=\"let option of options; let index = index\">\n <gds-option *nggCoreElement [value]=\"option[useValue]\"\n ><ng-container\n *ngTemplateOutlet=\"\n customOption?.templateRef\n ? customOption!.templateRef\n : defaultOption;\n context: { option: option, index: index }\n \"\n ></ng-container\n ></gds-option>\n </ng-container>\n </gds-dropdown>\n</div>\n\n<ng-template #defaultButton let-selected=\"option\">\n <span>{{ texts?.select }}</span>\n</ng-template>\n\n<ng-template #defaultOption let-option=\"option\">\n {{ display ? option[display] : option.name }}\n</ng-template>\n" }]
|
|
641
649
|
}], ctorParameters: function () { return [{ type: i0.Injector, decorators: [{
|
|
642
650
|
type: Inject,
|
|
643
651
|
args: [Injector]
|
|
644
|
-
}] }]; }, propDecorators: { id: [{
|
|
652
|
+
}] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { id: [{
|
|
645
653
|
type: Input
|
|
646
654
|
}], texts: [{
|
|
647
655
|
type: Input
|
|
@@ -896,7 +904,9 @@ class NggDropdownModule {
|
|
|
896
904
|
NggDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
897
905
|
NggDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NggDropdownModule, declarations: [NggDropdownComponent,
|
|
898
906
|
NggDropdownOptionDirective,
|
|
899
|
-
NggDropdownButtonDirective], imports: [CommonModule, NggCoreWrapperModule], exports: [NggDropdownComponent,
|
|
907
|
+
NggDropdownButtonDirective], imports: [CommonModule, NggCoreWrapperModule], exports: [NggDropdownComponent,
|
|
908
|
+
NggDropdownOptionDirective,
|
|
909
|
+
NggDropdownButtonDirective] });
|
|
900
910
|
NggDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDropdownModule, imports: [CommonModule, NggCoreWrapperModule] });
|
|
901
911
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDropdownModule, decorators: [{
|
|
902
912
|
type: NgModule,
|
|
@@ -907,7 +917,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
907
917
|
NggDropdownButtonDirective,
|
|
908
918
|
],
|
|
909
919
|
imports: [CommonModule, NggCoreWrapperModule],
|
|
910
|
-
exports: [
|
|
920
|
+
exports: [
|
|
921
|
+
NggDropdownComponent,
|
|
922
|
+
NggDropdownOptionDirective,
|
|
923
|
+
NggDropdownButtonDirective,
|
|
924
|
+
],
|
|
911
925
|
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
|
912
926
|
}]
|
|
913
927
|
}] });
|