@kris701/ez-ui 1.2.14 → 1.2.16

package/fesm2022/kris701-ez-ui.mjs

@@ -3421,8 +3421,7 @@ class EzUITablePresets {
         const current = this.currentPreset();
         if (current?.id == id) {
             if (presets.length > 0) {
-                this.currentPreset.set(presets[0]);
-                this.onPresetChange.emit(presets[0]);
+                this.selectPreset(presets[0].id);
             }
             else {
                 this.currentPreset.set(null);
@@ -3430,6 +3429,8 @@ class EzUITablePresets {
             }
         }
         this.savePresets();
+        if (presets.length == 0)
+            this.table.clearFilters();
     }
     savePresets() {
         if (this.storageKey) {
@@ -3449,71 +3450,67 @@ class EzUITablePresets {
         this.table.applyFilter();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUITablePresets, deps: [{ token: EzUITable }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUITablePresets, isStandalone: true, selector: "ezui-table-presets", inputs: { storageKey: "storageKey" }, outputs: { onPresetChange: "onPresetChange" }, host: { styleAttribute: "display:flex;flex-direction: row;gap:10px;width:100%" }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUITablePresets, isStandalone: true, selector: "ezui-table-presets", inputs: { storageKey: "storageKey" }, outputs: { onPresetChange: "onPresetChange" }, host: { styleAttribute: "display:flex;flex-direction: row;gap:10px;width:100%;flex-wrap:wrap;" }, usesOnChanges: true, ngImport: i0, template: `
 		<button tuiButton iconStart="plus" size="s" appearance="secondary" (click)="createPreset()" tuiHint="Create new preset from current filters"></button>
 
-		<tui-scrollbar>
-			@let current = currentPreset();
-			@for(preset of presets(); track preset.id){
-				<div tuiGroup [collapsed]="true" [rounded]="true">
-					@let isActive = current?.id == preset.id;
-					@if(isActive){
-						@if(preset.edit){
-							<tui-textfield style="width:10rem" tuiTextfieldSize="s" (keydown.enter)="preset.edit = false;saveCurrentPreset()">
-								<input tuiInput [(ngModel)]="preset.name"/>
-							</tui-textfield>
-							<button style="flex: 0 0 auto;" tuiButton iconStart="save" size="s" appearance="info" (click)="preset.edit = false;saveCurrentPreset()" tuiHint="Save"></button>
-						}
-						@else {
-							<div style="height:100%" appearance="positive" tuiBadge tuiStatus>
-								{{preset.name}}
-							</div>
-							<button style="flex: 0 0 auto;" tuiButton iconStart="square-pen" size="s" appearance="info" (click)="preset.edit = true" tuiHint="Edit"></button>
-						}
-					<button style="flex: 0 0 auto;" tuiButton iconStart="x" size="s" appearance="negative" (click)="removePreset(preset.id)" tuiHint="Delete"></button>
+		@let current = currentPreset();
+		@for(preset of presets(); track preset.id){
+			<div tuiGroup class="preset-group" [collapsed]="true" [rounded]="true">
+				@let isActive = current?.id == preset.id;
+				@if(isActive){
+					@if(preset.edit){
+						<tui-textfield style="width:10rem" tuiTextfieldSize="s" (keydown.enter)="preset.edit = false;saveCurrentPreset()">
+							<input tuiInput [(ngModel)]="preset.name"/>
+						</tui-textfield>
+						<button style="flex: 0 0 auto;" tuiButton iconStart="save" size="s" appearance="info" (click)="preset.edit = false;saveCurrentPreset()" tuiHint="Save"></button>
 					}
 					@else {
-						<button style="flex: 0 0 auto;" tuiButton appearance="secondary" size="s"  (click)="selectPreset(preset.id)">{{preset.name}}</button>
+						<button style="flex: 0 0 auto;" tuiButton iconStart="square-pen" size="s" appearance="info" (click)="preset.edit = true" tuiHint="Edit"></button>
+						<div class="preset-name" appearance="positive" tuiBadge tuiStatus>
+							{{preset.name}}
+						</div>
+						<button style="flex: 0 0 auto;" tuiButton iconStart="x" size="s" appearance="negative" (click)="removePreset(preset.id)" tuiHint="Delete"></button>
 					}
-				</div>
-			}
-		</tui-scrollbar>
-    `, isInline: true, styles: ["tui-scrollbar{width:100%!important}tui-scrollbar ::ng-deep>.t-content{display:flex;gap:10px;width:0px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: TuiScrollbar, selector: "tui-scrollbar" }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiGroup, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "collapsed", "rounded", "size"] }, { kind: "directive", type: TuiBadge, selector: "[tuiBadge],tui-icon[tuiBadge]", inputs: ["size"] }, { kind: "directive", type: TuiStatus, selector: "[tuiStatus]", inputs: ["tuiStatus"] }, { kind: "component", type: i3.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler", "invalid", "tuiAppearanceFocus", "tuiAppearanceState"] }, { kind: "directive", type: i3.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i3$1.TuiInputDirective, selector: "input[tuiInput]", inputs: ["readOnly", "readonly", "invalid", "focused", "state"] }, { kind: "directive", type: i3$1.TuiHintDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"], outputs: ["tuiHintVisible"] }] });
+				}
+				@else {
+					<button style="flex: 0 0 auto;" class="preset-name" tuiButton appearance="secondary" size="s"  (click)="selectPreset(preset.id)">{{preset.name}}</button>
+				}
+			</div>
+		}
+    `, isInline: true, styles: [".preset-group{max-width:25vw}.preset-group .preset-name{height:100%;display:inline;text-overflow:ellipsis;align-content:center}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiGroup, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "collapsed", "rounded", "size"] }, { kind: "directive", type: TuiBadge, selector: "[tuiBadge],tui-icon[tuiBadge]", inputs: ["size"] }, { kind: "directive", type: TuiStatus, selector: "[tuiStatus]", inputs: ["tuiStatus"] }, { kind: "component", type: i3.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler", "invalid", "tuiAppearanceFocus", "tuiAppearanceState"] }, { kind: "directive", type: i3.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i3$1.TuiInputDirective, selector: "input[tuiInput]", inputs: ["readOnly", "readonly", "invalid", "focused", "state"] }, { kind: "directive", type: i3$1.TuiHintDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"], outputs: ["tuiHintVisible"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUITablePresets, decorators: [{
             type: Component,
-            args: [{ selector: 'ezui-table-presets', imports: [FormsModule, CommonModule, TuiScrollbar, TuiButton, TuiGroup, TuiBadge, TuiStatus, TuiInput, TuiHint], template: `
+            args: [{ selector: 'ezui-table-presets', imports: [FormsModule, CommonModule, TuiButton, TuiGroup, TuiBadge, TuiStatus, TuiInput, TuiHint], template: `
 		<button tuiButton iconStart="plus" size="s" appearance="secondary" (click)="createPreset()" tuiHint="Create new preset from current filters"></button>
 
-		<tui-scrollbar>
-			@let current = currentPreset();
-			@for(preset of presets(); track preset.id){
-				<div tuiGroup [collapsed]="true" [rounded]="true">
-					@let isActive = current?.id == preset.id;
-					@if(isActive){
-						@if(preset.edit){
-							<tui-textfield style="width:10rem" tuiTextfieldSize="s" (keydown.enter)="preset.edit = false;saveCurrentPreset()">
-								<input tuiInput [(ngModel)]="preset.name"/>
-							</tui-textfield>
-							<button style="flex: 0 0 auto;" tuiButton iconStart="save" size="s" appearance="info" (click)="preset.edit = false;saveCurrentPreset()" tuiHint="Save"></button>
-						}
-						@else {
-							<div style="height:100%" appearance="positive" tuiBadge tuiStatus>
-								{{preset.name}}
-							</div>
-							<button style="flex: 0 0 auto;" tuiButton iconStart="square-pen" size="s" appearance="info" (click)="preset.edit = true" tuiHint="Edit"></button>
-						}
-					<button style="flex: 0 0 auto;" tuiButton iconStart="x" size="s" appearance="negative" (click)="removePreset(preset.id)" tuiHint="Delete"></button>
+		@let current = currentPreset();
+		@for(preset of presets(); track preset.id){
+			<div tuiGroup class="preset-group" [collapsed]="true" [rounded]="true">
+				@let isActive = current?.id == preset.id;
+				@if(isActive){
+					@if(preset.edit){
+						<tui-textfield style="width:10rem" tuiTextfieldSize="s" (keydown.enter)="preset.edit = false;saveCurrentPreset()">
+							<input tuiInput [(ngModel)]="preset.name"/>
+						</tui-textfield>
+						<button style="flex: 0 0 auto;" tuiButton iconStart="save" size="s" appearance="info" (click)="preset.edit = false;saveCurrentPreset()" tuiHint="Save"></button>
 					}
 					@else {
-						<button style="flex: 0 0 auto;" tuiButton appearance="secondary" size="s"  (click)="selectPreset(preset.id)">{{preset.name}}</button>
+						<button style="flex: 0 0 auto;" tuiButton iconStart="square-pen" size="s" appearance="info" (click)="preset.edit = true" tuiHint="Edit"></button>
+						<div class="preset-name" appearance="positive" tuiBadge tuiStatus>
+							{{preset.name}}
+						</div>
+						<button style="flex: 0 0 auto;" tuiButton iconStart="x" size="s" appearance="negative" (click)="removePreset(preset.id)" tuiHint="Delete"></button>
 					}
-				</div>
-			}
-		</tui-scrollbar>
+				}
+				@else {
+					<button style="flex: 0 0 auto;" class="preset-name" tuiButton appearance="secondary" size="s"  (click)="selectPreset(preset.id)">{{preset.name}}</button>
+				}
+			</div>
+		}
     `, host: {
-                        style: 'display:flex;flex-direction: row;gap:10px;width:100%'
-                    }, styles: ["tui-scrollbar{width:100%!important}tui-scrollbar ::ng-deep>.t-content{display:flex;gap:10px;width:0px}\n"] }]
+                        style: 'display:flex;flex-direction: row;gap:10px;width:100%;flex-wrap:wrap;'
+                    }, styles: [".preset-group{max-width:25vw}.preset-group .preset-name{height:100%;display:inline;text-overflow:ellipsis;align-content:center}\n"] }]
         }], ctorParameters: () => [{ type: EzUITable }], propDecorators: { storageKey: [{
                 type: Input
             }], onPresetChange: [{
@@ -4311,8 +4308,8 @@ class EzUITableDateFilter {
             }
             this.filterType.set(type);
             let forceReapply = false;
-            if (typeof filter.value[0] == 'string') {
-                this.value = TuiDay.jsonParse(filter.value[0]);
+            if (typeof filter.value == 'string') {
+                this.value = TuiDay.jsonParse(filter.value);
                 forceReapply = true;
             }
             else {