@trudb/tru-common-lib 0.2.550 → 0.2.551
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.
|
@@ -3260,47 +3260,73 @@ class TruToolbarDropdown {
|
|
|
3260
3260
|
select;
|
|
3261
3261
|
filteredOptions = [];
|
|
3262
3262
|
selectedOptions = [];
|
|
3263
|
-
|
|
3263
|
+
selectAllState = 'unchecked';
|
|
3264
3264
|
selectAllLabel = 'Select All';
|
|
3265
|
+
visibleOptions = new Set();
|
|
3265
3266
|
constructor() {
|
|
3266
3267
|
}
|
|
3267
3268
|
ngOnInit() {
|
|
3268
3269
|
}
|
|
3269
3270
|
ngAfterViewInit() {
|
|
3271
|
+
if (this.multiple)
|
|
3272
|
+
this.updateSelectAllState(this.select.value);
|
|
3270
3273
|
}
|
|
3271
3274
|
ngOnChanges(changes) {
|
|
3272
|
-
this.
|
|
3275
|
+
this.setFilteredOptions(this.options ?? []);
|
|
3276
|
+
if (this.select && this.multiple)
|
|
3277
|
+
this.updateSelectAllState(this.select.value);
|
|
3273
3278
|
}
|
|
3274
3279
|
toggleSelectAll = () => {
|
|
3275
|
-
|
|
3276
|
-
|
|
3277
|
-
this.
|
|
3278
|
-
|
|
3279
|
-
|
|
3280
|
-
|
|
3281
|
-
|
|
3280
|
+
const shouldSelect = this.selectAllState !== 'checked';
|
|
3281
|
+
this.select.options.forEach((item) => {
|
|
3282
|
+
if (!this.visibleOptions.has(item.value))
|
|
3283
|
+
return;
|
|
3284
|
+
if (shouldSelect && !item.selected)
|
|
3285
|
+
item.select();
|
|
3286
|
+
if (!shouldSelect && item.selected)
|
|
3287
|
+
item.deselect();
|
|
3288
|
+
});
|
|
3289
|
+
this.updateSelectAllState(this.select.value);
|
|
3282
3290
|
};
|
|
3283
3291
|
onSelectionChange = (event) => {
|
|
3284
3292
|
this.selectedOptionChange.emit(event.source.value);
|
|
3285
3293
|
this.selectionChange.emit(event.value);
|
|
3286
|
-
if (
|
|
3287
|
-
this.
|
|
3288
|
-
this.selectAllLabel = 'Deselect All';
|
|
3289
|
-
}
|
|
3290
|
-
else {
|
|
3291
|
-
this.selectAll = false;
|
|
3292
|
-
this.selectAllLabel = 'Select All';
|
|
3293
|
-
}
|
|
3294
|
+
if (this.multiple)
|
|
3295
|
+
this.updateSelectAllState(event.value);
|
|
3294
3296
|
};
|
|
3295
3297
|
onFilterChange = (event) => {
|
|
3296
3298
|
const searchInput = event.target.value.toLowerCase();
|
|
3297
|
-
|
|
3299
|
+
const filteredOptions = (this.options ?? []).filter((option) => {
|
|
3298
3300
|
const label = option.label.toLowerCase();
|
|
3299
3301
|
return label.includes(searchInput);
|
|
3300
3302
|
});
|
|
3303
|
+
this.setFilteredOptions(filteredOptions);
|
|
3304
|
+
this.updateSelectAllState(this.select.value);
|
|
3305
|
+
};
|
|
3306
|
+
isOptionVisible = (option) => {
|
|
3307
|
+
return this.visibleOptions.has(option);
|
|
3308
|
+
};
|
|
3309
|
+
setFilteredOptions = (options) => {
|
|
3310
|
+
this.filteredOptions = options;
|
|
3311
|
+
this.visibleOptions = new Set(options);
|
|
3312
|
+
};
|
|
3313
|
+
updateSelectAllState = (value) => {
|
|
3314
|
+
const selectedOptions = Array.isArray(value) ? value : [];
|
|
3315
|
+
const visibleOptions = this.filteredOptions ?? [];
|
|
3316
|
+
const selectedVisibleCount = visibleOptions.filter(option => selectedOptions.includes(option)).length;
|
|
3317
|
+
if (!selectedVisibleCount) {
|
|
3318
|
+
this.selectAllState = 'unchecked';
|
|
3319
|
+
}
|
|
3320
|
+
else if (selectedVisibleCount === visibleOptions.length) {
|
|
3321
|
+
this.selectAllState = 'checked';
|
|
3322
|
+
}
|
|
3323
|
+
else {
|
|
3324
|
+
this.selectAllState = 'indeterminate';
|
|
3325
|
+
}
|
|
3326
|
+
this.selectAllLabel = this.selectAllState === 'checked' ? 'Deselect All' : 'Select All';
|
|
3301
3327
|
};
|
|
3302
3328
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TruToolbarDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3303
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: TruToolbarDropdown, isStandalone: true, selector: "tru-toolbar-dropdown", inputs: { config: "config", options: "options", tooltip: "tooltip", multiple: "multiple", filterable: "filterable", filterTooltip: "filterTooltip", width: "width", selectedOption: "selectedOption", disabled: "disabled" }, outputs: { selectedOptionChange: "selectedOptionChange", selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-form-field>\r\n @if (multiple) {\r\n <mat-select #select\r\n [(ngModel)]=\"selectedOption\"\r\n [disabled]=\"disabled\"\r\n [placeholder]=\"tooltip\"\r\n (selectionChange)=\"onSelectionChange($event)\"\r\n [style.width.px]=\"width\"\r\n tru-mat-select-panel\r\n multiple>\r\n <input matInput\r\n *ngIf=\"filterable\"\r\n [placeholder]=\"filterTooltip\"\r\n (input)=\"onFilterChange($event)\"\r\n type=\"text\"\r\n autocomplete=\"off\" />\r\n <div class=\"select-all-pseudo-checkbox-container\">\r\n <mat-pseudo-checkbox [
|
|
3329
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: TruToolbarDropdown, isStandalone: true, selector: "tru-toolbar-dropdown", inputs: { config: "config", options: "options", tooltip: "tooltip", multiple: "multiple", filterable: "filterable", filterTooltip: "filterTooltip", width: "width", selectedOption: "selectedOption", disabled: "disabled" }, outputs: { selectedOptionChange: "selectedOptionChange", selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-form-field>\r\n @if (multiple) {\r\n <mat-select #select\r\n [(ngModel)]=\"selectedOption\"\r\n [disabled]=\"disabled\"\r\n [placeholder]=\"tooltip\"\r\n (selectionChange)=\"onSelectionChange($event)\"\r\n [style.width.px]=\"width\"\r\n tru-mat-select-panel\r\n multiple>\r\n <input matInput\r\n *ngIf=\"filterable\"\r\n [placeholder]=\"filterTooltip\"\r\n (input)=\"onFilterChange($event)\"\r\n type=\"text\"\r\n autocomplete=\"off\" />\r\n <div class=\"select-all-pseudo-checkbox-container\">\r\n <mat-pseudo-checkbox [state]=\"selectAllState\" (click)=\"toggleSelectAll()\"></mat-pseudo-checkbox>\r\n <span>{{selectAllLabel}}</span>\r\n </div>\r\n <mat-option *ngFor=\"let option of options\"\r\n [value]=\"option\"\r\n [disabled]=\"!isOptionVisible(option)\"\r\n [style.display]=\"isOptionVisible(option) ? null : 'none'\">\r\n {{option.label}}\r\n </mat-option>\r\n </mat-select>\r\n } @else {\r\n <mat-select [(ngModel)]=\"selectedOption\"\r\n [disabled]=\"disabled\"\r\n [placeholder]=\"tooltip\"\r\n (selectionChange)=\"onSelectionChange($event)\"\r\n [style.width.px]=\"width\"\r\n [hideSingleSelectionIndicator]=\"true\"\r\n tru-mat-select-panel>\r\n <input matInput\r\n *ngIf=\"filterable\"\r\n [placeholder]=\"filterTooltip\"\r\n (input)=\"onFilterChange($event)\"\r\n type=\"text\"\r\n autocomplete=\"off\" />\r\n <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option\">\r\n {{option.label}}\r\n </mat-option>\r\n </mat-select>\r\n }\r\n</mat-form-field>\r\n\r\n", styles: [".toolbar{height:25px}.toolbar p{font-size:12px}.toolbar .toolbar-btn{height:26px}.toolbar .mat-mdc-form-field{display:block;height:25px;width:auto}.toolbar .mat-mdc-text-field-wrapper{margin-top:1px;height:23px}.toolbar .mat-mdc-form-field-infix{padding:0;border-top:0;width:auto;height:25px}.mat-mdc-option{height:25px;font-size:14px}.toolbar .mdc-text-field--no-label:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) .mat-mdc-form-field-infix .toolbar .mat-mdc-select-arrow-wrapper{padding:0!important}.toolbar .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-form-field-infix{padding:0!important}.toolbar .mat-mdc-select-arrow{padding-left:5px}.toolbar .mat-mdc-select-value-text{font-size:12px}.toolbar-group,.toolbar-group-vertical{position:relative;display:flex;vertical-align:middle;height:25px}.toolbar-group>.toolbar-btn,.toolbar-group-vertical>.toolbar-btn{position:relative;float:left}.toolbar-group>.toolbar-btn:hover,.toolbar-group-vertical>.toolbar-btn:hover,.toolbar-group>.toolbar-btn:focus,.toolbar-group-vertical>.toolbar-btn:focus,.toolbar-group>.toolbar-btn:active,.toolbar-group-vertical>.toolbar-btn:active,.toolbar-group>.toolbar-btn.active,.toolbar-group-vertical>.toolbar-btn.active{z-index:2}.toolbar-group .toolbar-btn+.toolbar-btn,.toolbar-group .toolbar-btn+.toolbar-group,.toolbar-group .toolbar-group+.toolbar-btn,.toolbar-group .toolbar-group+.toolbar-group{margin-left:-1px}.toolbar-group>.toolbar-btn:not(:first-child):not(:last-child){border-radius:0}.toolbar-group>.toolbar-btn:first-child{margin-left:0}.toolbar-group>.toolbar-btn:first-child:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.toolbar-group>.toolbar-btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.toolbar-group>.toolbar-btn{padding:1px 5px;font-size:12px;line-height:1;border-radius:0}.toolbar-group .btn_iconOnly{padding:0;margin:0}.toolbar-group .btn_iconOnly i{vertical-align:15%}.toolbar-group div{padding:0;margin:0}.toolbar-group button{padding:0!important}.toolbar-group span,.toolbar-group i{padding:0;margin:0}.toolbar-group button{vertical-align:top}::ng-deep .toolbar .mat-mdc-option{min-height:unset;height:35px}::ng-deep .toolbar input::placeholder{font-size:12px;opacity:.75}::ng-deep .toolbar .mat-mdc-select-placeholder{font-size:12px;opacity:.75}\n", ".toolbar .mat-mdc-select{width:auto;min-width:90px;padding-top:0!important;font-family:Calibri,Helvetica,Arial,sans-serif!important;background-color:#ebebeb;height:24px;margin-left:2px;margin-right:2px;padding-left:8px;padding-right:3px}.toolbar .mdc-line-ripple{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: TruMatSelectPanel, selector: "[tru-mat-select-panel]" }, { kind: "component", type: MatPseudoCheckbox, selector: "mat-pseudo-checkbox", inputs: ["state", "disabled", "appearance"] }, { kind: "component", type: MatFormField$1, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
3304
3330
|
}
|
|
3305
3331
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TruToolbarDropdown, decorators: [{
|
|
3306
3332
|
type: Component,
|
|
@@ -3313,7 +3339,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
|
|
|
3313
3339
|
MatPseudoCheckbox,
|
|
3314
3340
|
MatFormField$1,
|
|
3315
3341
|
MatOption$1
|
|
3316
|
-
], encapsulation: ViewEncapsulation.None, template: "<mat-form-field>\r\n @if (multiple) {\r\n <mat-select #select\r\n [(ngModel)]=\"selectedOption\"\r\n [disabled]=\"disabled\"\r\n [placeholder]=\"tooltip\"\r\n (selectionChange)=\"onSelectionChange($event)\"\r\n [style.width.px]=\"width\"\r\n tru-mat-select-panel\r\n multiple>\r\n <input matInput\r\n *ngIf=\"filterable\"\r\n [placeholder]=\"filterTooltip\"\r\n (input)=\"onFilterChange($event)\"\r\n type=\"text\"\r\n autocomplete=\"off\" />\r\n <div class=\"select-all-pseudo-checkbox-container\">\r\n <mat-pseudo-checkbox [
|
|
3342
|
+
], encapsulation: ViewEncapsulation.None, template: "<mat-form-field>\r\n @if (multiple) {\r\n <mat-select #select\r\n [(ngModel)]=\"selectedOption\"\r\n [disabled]=\"disabled\"\r\n [placeholder]=\"tooltip\"\r\n (selectionChange)=\"onSelectionChange($event)\"\r\n [style.width.px]=\"width\"\r\n tru-mat-select-panel\r\n multiple>\r\n <input matInput\r\n *ngIf=\"filterable\"\r\n [placeholder]=\"filterTooltip\"\r\n (input)=\"onFilterChange($event)\"\r\n type=\"text\"\r\n autocomplete=\"off\" />\r\n <div class=\"select-all-pseudo-checkbox-container\">\r\n <mat-pseudo-checkbox [state]=\"selectAllState\" (click)=\"toggleSelectAll()\"></mat-pseudo-checkbox>\r\n <span>{{selectAllLabel}}</span>\r\n </div>\r\n <mat-option *ngFor=\"let option of options\"\r\n [value]=\"option\"\r\n [disabled]=\"!isOptionVisible(option)\"\r\n [style.display]=\"isOptionVisible(option) ? null : 'none'\">\r\n {{option.label}}\r\n </mat-option>\r\n </mat-select>\r\n } @else {\r\n <mat-select [(ngModel)]=\"selectedOption\"\r\n [disabled]=\"disabled\"\r\n [placeholder]=\"tooltip\"\r\n (selectionChange)=\"onSelectionChange($event)\"\r\n [style.width.px]=\"width\"\r\n [hideSingleSelectionIndicator]=\"true\"\r\n tru-mat-select-panel>\r\n <input matInput\r\n *ngIf=\"filterable\"\r\n [placeholder]=\"filterTooltip\"\r\n (input)=\"onFilterChange($event)\"\r\n type=\"text\"\r\n autocomplete=\"off\" />\r\n <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option\">\r\n {{option.label}}\r\n </mat-option>\r\n </mat-select>\r\n }\r\n</mat-form-field>\r\n\r\n", styles: [".toolbar{height:25px}.toolbar p{font-size:12px}.toolbar .toolbar-btn{height:26px}.toolbar .mat-mdc-form-field{display:block;height:25px;width:auto}.toolbar .mat-mdc-text-field-wrapper{margin-top:1px;height:23px}.toolbar .mat-mdc-form-field-infix{padding:0;border-top:0;width:auto;height:25px}.mat-mdc-option{height:25px;font-size:14px}.toolbar .mdc-text-field--no-label:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) .mat-mdc-form-field-infix .toolbar .mat-mdc-select-arrow-wrapper{padding:0!important}.toolbar .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-form-field-infix{padding:0!important}.toolbar .mat-mdc-select-arrow{padding-left:5px}.toolbar .mat-mdc-select-value-text{font-size:12px}.toolbar-group,.toolbar-group-vertical{position:relative;display:flex;vertical-align:middle;height:25px}.toolbar-group>.toolbar-btn,.toolbar-group-vertical>.toolbar-btn{position:relative;float:left}.toolbar-group>.toolbar-btn:hover,.toolbar-group-vertical>.toolbar-btn:hover,.toolbar-group>.toolbar-btn:focus,.toolbar-group-vertical>.toolbar-btn:focus,.toolbar-group>.toolbar-btn:active,.toolbar-group-vertical>.toolbar-btn:active,.toolbar-group>.toolbar-btn.active,.toolbar-group-vertical>.toolbar-btn.active{z-index:2}.toolbar-group .toolbar-btn+.toolbar-btn,.toolbar-group .toolbar-btn+.toolbar-group,.toolbar-group .toolbar-group+.toolbar-btn,.toolbar-group .toolbar-group+.toolbar-group{margin-left:-1px}.toolbar-group>.toolbar-btn:not(:first-child):not(:last-child){border-radius:0}.toolbar-group>.toolbar-btn:first-child{margin-left:0}.toolbar-group>.toolbar-btn:first-child:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.toolbar-group>.toolbar-btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.toolbar-group>.toolbar-btn{padding:1px 5px;font-size:12px;line-height:1;border-radius:0}.toolbar-group .btn_iconOnly{padding:0;margin:0}.toolbar-group .btn_iconOnly i{vertical-align:15%}.toolbar-group div{padding:0;margin:0}.toolbar-group button{padding:0!important}.toolbar-group span,.toolbar-group i{padding:0;margin:0}.toolbar-group button{vertical-align:top}::ng-deep .toolbar .mat-mdc-option{min-height:unset;height:35px}::ng-deep .toolbar input::placeholder{font-size:12px;opacity:.75}::ng-deep .toolbar .mat-mdc-select-placeholder{font-size:12px;opacity:.75}\n", ".toolbar .mat-mdc-select{width:auto;min-width:90px;padding-top:0!important;font-family:Calibri,Helvetica,Arial,sans-serif!important;background-color:#ebebeb;height:24px;margin-left:2px;margin-right:2px;padding-left:8px;padding-right:3px}.toolbar .mdc-line-ripple{display:none}\n"] }]
|
|
3317
3343
|
}], ctorParameters: () => [], propDecorators: { config: [{
|
|
3318
3344
|
type: Input
|
|
3319
3345
|
}], options: [{
|