@saydar/table-builder 1.0.11 → 1.0.13

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.
@@ -1734,9 +1734,6 @@ class TableStore extends ComponentStore {
1734
1734
  if (!filter.filterId) {
1735
1735
  filter.filterId = v4();
1736
1736
  }
1737
- if (filter.filterType === FilterType.In) {
1738
- filter.filterValue = splitCommaValue(filter.filterValue);
1739
- }
1740
1737
  filtersObj[filter.filterId] = filter;
1741
1738
  return filtersObj;
1742
1739
  }, {});
@@ -4052,6 +4049,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
4052
4049
  }]
4053
4050
  }], ctorParameters: () => [{ type: TableStore }, { type: i2.DatePipe }] });
4054
4051
 
4052
+ class AsFilterPillsPipe {
4053
+ transform(value) {
4054
+ if (Array.isArray(value)) {
4055
+ return value.length > 1 ? value : null;
4056
+ }
4057
+ const split = splitCommaValue(value);
4058
+ return Array.isArray(split) && split.length > 1 ? split : null;
4059
+ }
4060
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: AsFilterPillsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
4061
+ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.2", ngImport: i0, type: AsFilterPillsPipe, isStandalone: false, name: "asFilterPills" }); }
4062
+ }
4063
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: AsFilterPillsPipe, decorators: [{
4064
+ type: Pipe,
4065
+ args: [{
4066
+ name: 'asFilterPills',
4067
+ standalone: false
4068
+ }]
4069
+ }] });
4070
+
4055
4071
  class FormatFilterTypePipe {
4056
4072
  transform(filterType, value) {
4057
4073
  if (filterType === FilterType.IsNull) {
@@ -4090,11 +4106,11 @@ class FilterChipsComponent {
4090
4106
  this.filterStore.clearAll();
4091
4107
  }
4092
4108
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: FilterChipsComponent, deps: [{ token: TableStore }, { token: WrapperFilterStore }], target: i0.ɵɵFactoryTarget.Component }); }
4093
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: FilterChipsComponent, isStandalone: false, selector: "lib-filter-list", ngImport: i0, template: "<div style=\"display: flex; flex-direction: row;justify-content: flex-end;\" *ngrxLet=\"currentFilters$ as currentFilters\" >\n\n <button class=\"cancel-button\" *ngIf=\"currentFilters.length\" mat-icon-button (click)=\"clearAll()\"\n matTooltip=\"Close all Filters Cards\">\n <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\n </button>\n\n\n <div *ngIf=\"currentFilters.length\" class=\"float\">\n <div class=\"filter\" *ngFor=\"let filter of (currentFilters$ | async); index as i;\">\n <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex(i)\" > </tb-filter>\n </div>\n </div>\n\n <mat-chip-set *ngrxLet=\"filters$ as filters\">\n <mat-chip *ngFor=\"let filter of filters\" (dblclick)=\"addFilter(filter)\" (removed)=\"tableState.removeFilter(filter.filterId!)\">\n {{ filter.key | keyDisplay | async }} {{filter.filterType | formatFilterType : filter.filterValue}}\n @if (isArray(filter.filterValue)) {\n @for (v of filter.filterValue; track $index) {\n <span class=\"filter-value-pill\">{{ v }}</span>\n }\n } @else {\n {{ filter.filterValue | formatFilterValue: filter.key : filter.filterType | async }}\n }\n <mat-icon matChipRemove>cancel</mat-icon>\n </mat-chip>\n <mat-chip *ngIf=\"filters.length >= 2\" (removed)=\"tableState.clearFilters()\">\n Clear All\n <mat-icon matChipRemove>cancel</mat-icon>\n </mat-chip>\n </mat-chip-set>\n\n</div>\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.filter-value-pill{display:inline-block;background:#3f51b526;padding:1px 8px;border-radius:10px;margin:0 2px;font-size:.85em;line-height:1.4;font-weight:500}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7$3.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i7$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i7$3.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "directive", type: i8.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "component", type: FilterComponent, selector: "tb-filter", inputs: ["filter"], outputs: ["close"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: KeyDisplayPipe, name: "keyDisplay" }, { kind: "pipe", type: FormatFilterValuePipe, name: "formatFilterValue" }, { kind: "pipe", type: FormatFilterTypePipe, name: "formatFilterType" }] }); }
4109
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: FilterChipsComponent, isStandalone: false, selector: "lib-filter-list", ngImport: i0, template: "<div style=\"display: flex; flex-direction: row;justify-content: flex-end;\" *ngrxLet=\"currentFilters$ as currentFilters\" >\n\n <button class=\"cancel-button\" *ngIf=\"currentFilters.length\" mat-icon-button (click)=\"clearAll()\"\n matTooltip=\"Close all Filters Cards\">\n <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\n </button>\n\n\n <div *ngIf=\"currentFilters.length\" class=\"float\">\n <div class=\"filter\" *ngFor=\"let filter of (currentFilters$ | async); index as i;\">\n <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex(i)\" > </tb-filter>\n </div>\n </div>\n\n <mat-chip-set *ngrxLet=\"filters$ as filters\">\n <mat-chip *ngFor=\"let filter of filters\" (dblclick)=\"addFilter(filter)\" (removed)=\"tableState.removeFilter(filter.filterId!)\">\n {{ filter.key | keyDisplay | async }} {{filter.filterType | formatFilterType : filter.filterValue}}\n @if (filter.filterValue | asFilterPills; as pills) {\n @for (v of pills; track $index) {\n <span class=\"filter-value-pill\">{{ v }}</span>\n }\n } @else {\n {{ filter.filterValue | formatFilterValue: filter.key : filter.filterType | async }}\n }\n <mat-icon matChipRemove>cancel</mat-icon>\n </mat-chip>\n <mat-chip *ngIf=\"filters.length >= 2\" (removed)=\"tableState.clearFilters()\">\n Clear All\n <mat-icon matChipRemove>cancel</mat-icon>\n </mat-chip>\n </mat-chip-set>\n\n</div>\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.filter-value-pill{display:inline-block;background:#3f51b526;padding:1px 8px;border-radius:10px;margin:0 2px;font-size:.85em;line-height:1.4;font-weight:500}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7$3.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i7$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i7$3.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "directive", type: i8.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "component", type: FilterComponent, selector: "tb-filter", inputs: ["filter"], outputs: ["close"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: KeyDisplayPipe, name: "keyDisplay" }, { kind: "pipe", type: FormatFilterValuePipe, name: "formatFilterValue" }, { kind: "pipe", type: AsFilterPillsPipe, name: "asFilterPills" }, { kind: "pipe", type: FormatFilterTypePipe, name: "formatFilterType" }] }); }
4094
4110
  }
4095
4111
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: FilterChipsComponent, decorators: [{
4096
4112
  type: Component,
4097
- args: [{ selector: 'lib-filter-list', standalone: false, template: "<div style=\"display: flex; flex-direction: row;justify-content: flex-end;\" *ngrxLet=\"currentFilters$ as currentFilters\" >\n\n <button class=\"cancel-button\" *ngIf=\"currentFilters.length\" mat-icon-button (click)=\"clearAll()\"\n matTooltip=\"Close all Filters Cards\">\n <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\n </button>\n\n\n <div *ngIf=\"currentFilters.length\" class=\"float\">\n <div class=\"filter\" *ngFor=\"let filter of (currentFilters$ | async); index as i;\">\n <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex(i)\" > </tb-filter>\n </div>\n </div>\n\n <mat-chip-set *ngrxLet=\"filters$ as filters\">\n <mat-chip *ngFor=\"let filter of filters\" (dblclick)=\"addFilter(filter)\" (removed)=\"tableState.removeFilter(filter.filterId!)\">\n {{ filter.key | keyDisplay | async }} {{filter.filterType | formatFilterType : filter.filterValue}}\n @if (isArray(filter.filterValue)) {\n @for (v of filter.filterValue; track $index) {\n <span class=\"filter-value-pill\">{{ v }}</span>\n }\n } @else {\n {{ filter.filterValue | formatFilterValue: filter.key : filter.filterType | async }}\n }\n <mat-icon matChipRemove>cancel</mat-icon>\n </mat-chip>\n <mat-chip *ngIf=\"filters.length >= 2\" (removed)=\"tableState.clearFilters()\">\n Clear All\n <mat-icon matChipRemove>cancel</mat-icon>\n </mat-chip>\n </mat-chip-set>\n\n</div>\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.filter-value-pill{display:inline-block;background:#3f51b526;padding:1px 8px;border-radius:10px;margin:0 2px;font-size:.85em;line-height:1.4;font-weight:500}\n"] }]
4113
+ args: [{ selector: 'lib-filter-list', standalone: false, template: "<div style=\"display: flex; flex-direction: row;justify-content: flex-end;\" *ngrxLet=\"currentFilters$ as currentFilters\" >\n\n <button class=\"cancel-button\" *ngIf=\"currentFilters.length\" mat-icon-button (click)=\"clearAll()\"\n matTooltip=\"Close all Filters Cards\">\n <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\n </button>\n\n\n <div *ngIf=\"currentFilters.length\" class=\"float\">\n <div class=\"filter\" *ngFor=\"let filter of (currentFilters$ | async); index as i;\">\n <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex(i)\" > </tb-filter>\n </div>\n </div>\n\n <mat-chip-set *ngrxLet=\"filters$ as filters\">\n <mat-chip *ngFor=\"let filter of filters\" (dblclick)=\"addFilter(filter)\" (removed)=\"tableState.removeFilter(filter.filterId!)\">\n {{ filter.key | keyDisplay | async }} {{filter.filterType | formatFilterType : filter.filterValue}}\n @if (filter.filterValue | asFilterPills; as pills) {\n @for (v of pills; track $index) {\n <span class=\"filter-value-pill\">{{ v }}</span>\n }\n } @else {\n {{ filter.filterValue | formatFilterValue: filter.key : filter.filterType | async }}\n }\n <mat-icon matChipRemove>cancel</mat-icon>\n </mat-chip>\n <mat-chip *ngIf=\"filters.length >= 2\" (removed)=\"tableState.clearFilters()\">\n Clear All\n <mat-icon matChipRemove>cancel</mat-icon>\n </mat-chip>\n </mat-chip-set>\n\n</div>\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.filter-value-pill{display:inline-block;background:#3f51b526;padding:1px 8px;border-radius:10px;margin:0 2px;font-size:.85em;line-height:1.4;font-weight:500}\n"] }]
4098
4114
  }], ctorParameters: () => [{ type: TableStore }, { type: WrapperFilterStore }] });
4099
4115
 
4100
4116
  class GroupByListComponent {
@@ -4518,6 +4534,7 @@ class TableBuilderModule {
4518
4534
  HeaderMenuComponent,
4519
4535
  KeyDisplayPipe,
4520
4536
  FormatFilterValuePipe,
4537
+ AsFilterPillsPipe,
4521
4538
  FormatFilterTypePipe,
4522
4539
  ResizeColumnDirective,
4523
4540
  InFilterComponent,
@@ -4632,6 +4649,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
4632
4649
  HeaderMenuComponent,
4633
4650
  KeyDisplayPipe,
4634
4651
  FormatFilterValuePipe,
4652
+ AsFilterPillsPipe,
4635
4653
  FormatFilterTypePipe,
4636
4654
  ResizeColumnDirective,
4637
4655
  InFilterComponent,