@kris701/ez-ui 1.1.21 → 1.2.0

package/fesm2022/kris701-ez-ui.mjs

@@ -5,7 +5,7 @@ import { EventEmitter, Output, Input, Component, signal, ViewChild, ContentChild
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i3$1 from '@taiga-ui/core';
-import { TuiIcon, TuiInput, TuiButton, TuiDropdown, TuiOption, TuiGroup, TuiScrollbar, TuiSelectLike, TuiDataList, TuiTextfield, TuiHint, TuiLoader, TuiCheckbox, TUI_DARK_MODE, TuiRoot } from '@taiga-ui/core';
+import { TuiIcon, TuiInput, TuiButton, TuiDropdown, TuiOption, TuiGroup, TuiScrollbar, TuiSelectLike, TuiDataList, TuiTextfield, TuiLink, TuiHint, TuiLoader, TuiCheckbox, TUI_DARK_MODE, TuiRoot } from '@taiga-ui/core';
 import * as i4$1 from '@taiga-ui/kit';
 import { TuiBlock, TuiSwitch, TuiInputDate, TuiInputDateTime, TuiFiles, TuiChevron, TuiTextarea, TuiMultiSelect, TuiInputNumber, TuiInputChip, TuiPassword, TuiSelect, TuiBadge, TuiStatus, TuiDataListWrapper, TuiBadgeNotification, TuiBadgedContent, TuiButtonSelect, TuiStringifyContentPipe, TUI_CONFIRM } from '@taiga-ui/kit';
 import * as i3$3 from '@taiga-ui/addon-mobile';
@@ -18,10 +18,10 @@ import * as i6 from '@taiga-ui/core/components/calendar';
 import { marked } from 'marked';
 import Compressor from 'compressorjs';
 import * as i7 from '@taiga-ui/cdk/directives/item';
+import * as i4$2 from '@taiga-ui/layout';
+import { TuiElasticContainer, TuiBlockStatus, TuiNavigation, TuiAsideGroupComponent } from '@taiga-ui/layout';
 import * as i3$2 from '@taiga-ui/addon-table';
 import { TuiTablePagination, TuiTable } from '@taiga-ui/addon-table';
-import * as i4$2 from '@taiga-ui/layout';
-import { TuiBlockStatus, TuiNavigation, TuiAsideGroupComponent } from '@taiga-ui/layout';
 import { v4 } from 'uuid';
 import { firstValueFrom, switchMap } from 'rxjs';
 import * as i1$1 from '@angular/common/http';
@@ -3152,6 +3152,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 type: Output
             }] } });
 
+class EzUIShowMoreText {
+    value = "";
+    valueSmall = "";
+    maxCharacters = 256;
+    current = signal(this.valueSmall, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+    toggle() {
+        this.current.set(this.current() === this.valueSmall ? this.value : this.valueSmall);
+    }
+    ngOnChanges(changes) {
+        if (changes['value'] && changes['value'].currentValue != changes['value'].previousValue) {
+            this.value = changes['value'].currentValue;
+            this.valueSmall = this.value.substring(0, this.maxCharacters) + "...";
+            this.current.set(this.valueSmall);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIShowMoreText, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: EzUIShowMoreText, isStandalone: true, selector: "ezui-showmoretext", inputs: { value: "value", maxCharacters: "maxCharacters" }, usesOnChanges: true, ngImport: i0, template: `
+		<tui-elastic-container>
+			{{ current() }}
+			<button
+				tuiLink
+				type="button"
+				(click)="toggle()"
+			>
+				Show {{ current() === value ? 'less' : 'more' }}
+			</button>
+		</tui-elastic-container>
+    `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: TuiElasticContainer, selector: "tui-elastic-container" }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIShowMoreText, decorators: [{
+            type: Component,
+            args: [{ selector: 'ezui-showmoretext', imports: [
+                        FormsModule,
+                        CommonModule,
+                        TuiElasticContainer,
+                        TuiLink
+                    ], template: `
+		<tui-elastic-container>
+			{{ current() }}
+			<button
+				tuiLink
+				type="button"
+				(click)="toggle()"
+			>
+				Show {{ current() === value ? 'less' : 'more' }}
+			</button>
+		</tui-elastic-container>
+    ` }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], maxCharacters: [{
+                type: Input
+            }] } });
+
 class EzUITablePresets {
     table;
     storageKey = null;
@@ -3464,6 +3519,32 @@ class EzUITableFilterService {
             action: 'true',
             filter: (values, column, value) => EzUIFilterHelpers.genericFilter(values, (i) => i === value, column)
         },
+        // Number filters
+        {
+            key: 'num',
+            action: 'gr',
+            filter: (values, column, value) => EzUIFilterHelpers.genericFilter(values, (i) => i > value, column)
+        },
+        {
+            key: 'num',
+            action: 'greq',
+            filter: (values, column, value) => EzUIFilterHelpers.genericFilter(values, (i) => i >= value, column)
+        },
+        {
+            key: 'num',
+            action: 'eq',
+            filter: (values, column, value) => EzUIFilterHelpers.genericFilter(values, (i) => i == value, column)
+        },
+        {
+            key: 'num',
+            action: 'ls',
+            filter: (values, column, value) => EzUIFilterHelpers.genericFilter(values, (i) => i < value, column)
+        },
+        {
+            key: 'num',
+            action: 'lseq',
+            filter: (values, column, value) => EzUIFilterHelpers.genericFilter(values, (i) => i <= value, column)
+        },
     ];
     sort(values, sort) {
         const target = this.sortMethods.find(x => x.state == sort.state);
@@ -4224,6 +4305,222 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 type: Input
             }] } });
 
+class EzUITableNumberFilter {
+    column;
+    filterApplied = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterApplied" }] : /* istanbul ignore next */ []));
+    filterVisible = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterVisible" }] : /* istanbul ignore next */ []));
+    table;
+    value = 0;
+    filterType;
+    filterTypes;
+    stringify = (item) => `${item.label}`;
+    constructor(table) {
+        this.table = table;
+        this.filterTypes = [
+            {
+                label: 'Less Than',
+                expression: 'num;ls'
+            },
+            {
+                label: 'Less Than or Equal',
+                expression: 'num;lseq'
+            },
+            {
+                label: 'Equal',
+                expression: 'num;eq'
+            },
+            {
+                label: 'Greater Than',
+                expression: 'num;gr'
+            },
+            {
+                label: 'Greater Than or Equal',
+                expression: 'num;greq'
+            }
+        ];
+        this.filterType = this.filterTypes[0];
+        this.table.onPresetChange.subscribe(x => {
+            if (!x) {
+                this.filterType = this.filterTypes[0];
+                this.value = 0;
+                this.filterApplied.set(false);
+                return;
+            }
+            const filter = x.filters.find(x => x.column == this.column);
+            if (!filter) {
+                this.filterType = this.filterTypes[0];
+                this.value = 0;
+                this.filterApplied.set(false);
+                return;
+            }
+            const type = this.filterTypes.find(x => x.expression == filter.expression);
+            if (!type) {
+                this.filterType = this.filterTypes[0];
+                this.value = 0;
+                this.filterApplied.set(false);
+                return;
+            }
+            this.filterType = type;
+            this.value = filter.value;
+            this.filterApplied.set(true);
+        });
+    }
+    applyFilter(expression) {
+        this.table.setFilter({
+            column: this.column,
+            value: this.value,
+            expression: expression,
+        });
+        this.filterVisible.set(false);
+        this.filterApplied.set(true);
+    }
+    clearFilter() {
+        this.table.clearFilter(this.column);
+        this.filterVisible.set(false);
+        this.filterApplied.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUITableNumberFilter, deps: [{ token: EzUITable }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUITableNumberFilter, isStandalone: true, selector: "ezui-table-numberfilter", inputs: { column: "column" }, ngImport: i0, template: `
+		@if(column){
+			<tui-badged-content>
+				@if(filterApplied()){
+					<tui-badge-notification
+						size="s"
+						tuiSlot="top"
+					>
+						1
+					</tui-badge-notification>
+				}
+				<button
+					tuiButton size="s"
+					iconStart="funnel"
+					appearance="flat-grayscale"
+					style="opacity:0.72"
+					[tuiDropdown]="filterPop"
+					[(tuiDropdownOpen)]="filterVisible"
+					(click)="filterVisible.set(true)"
+				></button>
+			</tui-badged-content>
+
+			<ng-template #filterPop>
+				<div class="filterPopContainer">
+					<button
+						appearance="outline-grayscale"
+						size="s"
+						tuiButton
+						tuiButtonSelect
+						[(ngModel)]="filterType"
+					>
+						{{ filterType.label }}
+						<tui-data-list-wrapper
+							*tuiDropdown
+							[itemContent]="stringify | tuiStringifyContent"
+							[items]="filterTypes"
+						/>
+					</button>
+
+					<tui-textfield tuiTextfieldSize="s" (keydown.enter)="applyFilter(filterType.expression)">
+						<input tuiInputNumber [(ngModel)]="value"/>
+					</tui-textfield>
+					<button
+						tuiButton size="s"
+						iconStart="funnel"
+						tuiButton
+						(click)="applyFilter(filterType.expression)"
+					>
+						Apply
+					</button>
+
+					@if(filterApplied()){
+						<button
+							tuiButton size="s"
+							iconStart="circle-x"
+							appearance="secondary"
+							tuiButton
+							(click)="clearFilter()"
+						>
+							Clear
+						</button>
+					}
+				</div>
+			</ng-template>
+		}
+    `, isInline: true, styles: [".filterPopContainer{display:flex;flex-direction:column;gap:10px;padding:10px;min-width:20rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "directive", type: i3$1.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i3$1.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownAuto],[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "directive", type: i3$1.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "component", type: i4$1.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiButtonSelect, selector: "button[tuiButtonSelect]" }, { kind: "component", type: TuiBadgeNotification, selector: "tui-badge-notification", inputs: ["size"] }, { kind: "directive", type: i4$1.TuiBadgedContentDirective, selector: "[tuiSlot]", inputs: ["tuiSlot"] }, { kind: "component", type: i4$1.TuiBadgedContentComponent, selector: "tui-badged-content" }, { kind: "directive", type: i4$1.TuiInputNumberDirective, selector: "input[tuiInputNumber]" }, { kind: "component", type: i3.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler"] }, { kind: "directive", type: i3.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "pipe", type: TuiStringifyContentPipe, name: "tuiStringifyContent" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUITableNumberFilter, decorators: [{
+            type: Component,
+            args: [{ selector: 'ezui-table-numberfilter', imports: [CommonModule, FormsModule, TuiDropdown, TuiDataListWrapper, TuiButton, TuiButtonSelect, TuiStringifyContentPipe, TuiBadgeNotification, TuiBadgedContent, TuiInputNumber], template: `
+		@if(column){
+			<tui-badged-content>
+				@if(filterApplied()){
+					<tui-badge-notification
+						size="s"
+						tuiSlot="top"
+					>
+						1
+					</tui-badge-notification>
+				}
+				<button
+					tuiButton size="s"
+					iconStart="funnel"
+					appearance="flat-grayscale"
+					style="opacity:0.72"
+					[tuiDropdown]="filterPop"
+					[(tuiDropdownOpen)]="filterVisible"
+					(click)="filterVisible.set(true)"
+				></button>
+			</tui-badged-content>
+
+			<ng-template #filterPop>
+				<div class="filterPopContainer">
+					<button
+						appearance="outline-grayscale"
+						size="s"
+						tuiButton
+						tuiButtonSelect
+						[(ngModel)]="filterType"
+					>
+						{{ filterType.label }}
+						<tui-data-list-wrapper
+							*tuiDropdown
+							[itemContent]="stringify | tuiStringifyContent"
+							[items]="filterTypes"
+						/>
+					</button>
+
+					<tui-textfield tuiTextfieldSize="s" (keydown.enter)="applyFilter(filterType.expression)">
+						<input tuiInputNumber [(ngModel)]="value"/>
+					</tui-textfield>
+					<button
+						tuiButton size="s"
+						iconStart="funnel"
+						tuiButton
+						(click)="applyFilter(filterType.expression)"
+					>
+						Apply
+					</button>
+
+					@if(filterApplied()){
+						<button
+							tuiButton size="s"
+							iconStart="circle-x"
+							appearance="secondary"
+							tuiButton
+							(click)="clearFilter()"
+						>
+							Clear
+						</button>
+					}
+				</div>
+			</ng-template>
+		}
+    `, styles: [".filterPopContainer{display:flex;flex-direction:column;gap:10px;padding:10px;min-width:20rem}\n"] }]
+        }], ctorParameters: () => [{ type: EzUITable }], propDecorators: { column: [{
+                type: Input
+            }] } });
+
 class EzUITableSelectFilter {
     column;
     filterApplied = signal(false, /* @ts-ignore */
@@ -5414,5 +5711,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BaseCRUDInterface, BaseListInterface, EzUIBooleanInput, EzUIDateInput, EzUIDateTimeInput, EzUIFileInput, EzUIFilterHelpers, EzUIIconSelector, EzUILayout, EzUILayoutService, EzUIMarkdownEditor, EzUIMenuBar, EzUIMenuBarSubDataList, EzUIMultiSelect, EzUINumberInput, EzUIPasswordInput, EzUISelect, EzUITTableSortableColumn, EzUITable, EzUITableBooleanFilter, EzUITableDateFilter, EzUITableFilterService, EzUITableSelectFilter, EzUITableTextFilter, EzUITextInput, compressImage };
+export { BaseCRUDInterface, BaseListInterface, EzUIBooleanInput, EzUIDateInput, EzUIDateTimeInput, EzUIFileInput, EzUIFilterHelpers, EzUIIconSelector, EzUILayout, EzUILayoutService, EzUIMarkdownEditor, EzUIMenuBar, EzUIMenuBarSubDataList, EzUIMultiSelect, EzUINumberInput, EzUIPasswordInput, EzUISelect, EzUIShowMoreText, EzUITTableSortableColumn, EzUITable, EzUITableBooleanFilter, EzUITableDateFilter, EzUITableFilterService, EzUITableNumberFilter, EzUITableSelectFilter, EzUITableTextFilter, EzUITextInput, compressImage };
 //# sourceMappingURL=kris701-ez-ui.mjs.map