@kris701/ez-ui 1.3.7 → 1.3.9

package/fesm2022/kris701-ez-ui.mjs

@@ -16,11 +16,12 @@ import * as i3 from '@taiga-ui/core/components/textfield';
 import * as i4 from '@taiga-ui/core/portals/dropdown';
 import * as i6 from '@taiga-ui/core/components/calendar';
 import * as i4$2 from '@taiga-ui/layout';
-import { TuiHeader, TuiElasticContainer, TuiBlockStatus, TuiNavigation, TuiAsideGroupComponent } from '@taiga-ui/layout';
+import { TuiHeader, TuiBlockStatus, TuiElasticContainer, TuiNavigation, TuiAsideGroupComponent } from '@taiga-ui/layout';
 import { marked } from 'marked';
 import Compressor from 'compressorjs';
 import { TuiAutoFocus } from '@taiga-ui/cdk';
 import * as i5 from '@taiga-ui/cdk/directives/item';
+import { moveItemInArray, CdkDropList, CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
 import * as i3$2 from '@taiga-ui/addon-table';
 import { TuiTablePagination, TuiTable } from '@taiga-ui/addon-table';
 import { v4 } from 'uuid';
@@ -3590,13 +3591,14 @@ class EzUIPopoutMenu {
     label = '';
     size = 'm';
     appearance = 'flat';
+    onMenuOpen = new EventEmitter();
     ngOnChanges(changes) {
         if (changes['items'] && changes['items'].currentValue != changes['items'].previousValue) {
             this.items = changes['items'].currentValue;
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIPopoutMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: EzUIPopoutMenu, isStandalone: true, selector: "ezui-popoutmenu", inputs: { items: "items", icon: "icon", label: "label", size: "size", appearance: "appearance" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ["itemTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: EzUIPopoutMenu, isStandalone: true, selector: "ezui-popoutmenu", inputs: { items: "items", icon: "icon", label: "label", size: "size", appearance: "appearance" }, outputs: { onMenuOpen: "onMenuOpen" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ["itemTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
 		<button
 			[iconStart]="icon"
 			tuiButton
@@ -3606,6 +3608,7 @@ class EzUIPopoutMenu {
 			[tuiAppearanceState]="dropdownOpen() ? 'active' : null"
 			[tuiDropdown]="dropdownContent"
 			[(tuiDropdownOpen)]="dropdownOpen"
+			(click)="onMenuOpen.emit(dropdownOpen())"
 		>
 			{{label}}
 			<ng-template #dropdownContent>
@@ -3638,6 +3641,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 			[tuiAppearanceState]="dropdownOpen() ? 'active' : null"
 			[tuiDropdown]="dropdownContent"
 			[(tuiDropdownOpen)]="dropdownOpen"
+			(click)="onMenuOpen.emit(dropdownOpen())"
 		>
 			{{label}}
 			<ng-template #dropdownContent>
@@ -3664,6 +3668,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 type: Input
             }], appearance: [{
                 type: Input
+            }], onMenuOpen: [{
+                type: Output
             }] } });
 
 class EzUIPasswordInput {
@@ -3723,6 +3729,157 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 type: Input
             }] } });
 
+class EzUIOrderList {
+    itemTemplate;
+    disabled = false;
+    values = [];
+    valuesChange = new EventEmitter();
+    optionLabel = "";
+    showButtons = false;
+    getOptionLabel(item) {
+        if (!item)
+            return "";
+        if (this.optionLabel == undefined || this.optionLabel == '')
+            return item;
+        return item[this.optionLabel];
+    }
+    moveUp(index) {
+        moveItemInArray(this.values, this.clampIndex(index), this.clampIndex(index - 1));
+        this.valuesChange.emit(this.values);
+    }
+    moveDown(index) {
+        moveItemInArray(this.values, this.clampIndex(index), this.clampIndex(index + 1));
+        this.valuesChange.emit(this.values);
+    }
+    drop(event) {
+        moveItemInArray(this.values, event.previousIndex, event.currentIndex);
+        this.valuesChange.emit(this.values);
+    }
+    clampIndex(index) {
+        if (index < 0)
+            index = 0;
+        if (index >= this.values.length)
+            index = this.values.length - 1;
+        return index;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIOrderList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUIOrderList, isStandalone: true, selector: "ezui-orderlist", inputs: { disabled: "disabled", values: "values", optionLabel: "optionLabel", showButtons: "showButtons" }, outputs: { valuesChange: "valuesChange" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ["itemTemplate"], descendants: true }], ngImport: i0, template: `
+		<div class="orderlist-container">
+			@if(values.length == 0){
+				<tui-block-status>
+					<tui-icon tuiSlot="top" icon="list" />
+
+					<h3>No Data</h3>
+
+					No data to display.
+				</tui-block-status>
+			}
+			@else {
+				<div cdkDropList (cdkDropListDropped)="drop($event)">
+					@for (value of values; track $index) {
+						<div
+							cdkDrag
+							cdkDragBoundary=".orderlist-container"
+ 							cdkDragLockAxis="y"
+							class="tile"
+							cdkDragPreviewContainer="parent"
+							[cdkDragDisabled]="disabled"
+						>
+							<tui-icon
+								cdkDragHandle
+								class="handle"
+								icon="@tui.grip-vertical"
+							/>
+							@if(showButtons){
+								<div class="button-container">
+									<button tuiButton appearance="flat" size="s" iconStart="chevron-up" (click)="moveUp($index)" [disabled]="$index == 0"></button>
+									<button tuiButton appearance="flat" size="s" iconStart="chevron-down" (click)="moveDown($index)" [disabled]="$index == values.length - 1"></button>
+								</div>
+							}
+							@if(itemTemplate){
+								<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: value  }"></ng-container>
+							}
+							@else {
+								<div class="content">{{ getOptionLabel(value) }}</div>
+							}
+						</div>
+					}
+				</div>
+			}
+		</div>
+    `, isInline: true, styles: [".orderlist-container{background-color:var(--tui-background-base-alt);border:2px solid var(--tui-border-normal);border-radius:var(--tui-radius-l);padding:5px}.tile{background:var(--tui-background-base);border-radius:var(--tui-radius-l);border:1px solid var(--tui-border-normal);display:flex;flex-direction:row;gap:5px;padding:5px}.tile .handle{align-self:center;cursor:grab}.tile .content,.tile .button-container{align-self:center}.cdk-drag-disabled{opacity:.7;-webkit-user-select:none;user-select:none}.cdk-drag-disabled .handle{align-self:center;cursor:not-allowed}.cdk-drag-preview{display:flex;background:var(--tui-background-base);border-radius:var(--tui-radius-l);border:1px solid var(--tui-border-normal)}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$2.TuiBlockStatusComponent, selector: "tui-block-status", inputs: ["card", "size"] }, { kind: "directive", type: i4$2.TuiBlockStatusDirective, selector: "[tuiSlot]", inputs: ["tuiSlot"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIOrderList, decorators: [{
+            type: Component,
+            args: [{ selector: 'ezui-orderlist', imports: [
+                        FormsModule,
+                        CommonModule,
+                        TuiBlockStatus,
+                        TuiIcon,
+                        CdkDropList,
+                        CdkDrag,
+                        CdkDragHandle,
+                        TuiButton
+                    ], template: `
+		<div class="orderlist-container">
+			@if(values.length == 0){
+				<tui-block-status>
+					<tui-icon tuiSlot="top" icon="list" />
+
+					<h3>No Data</h3>
+
+					No data to display.
+				</tui-block-status>
+			}
+			@else {
+				<div cdkDropList (cdkDropListDropped)="drop($event)">
+					@for (value of values; track $index) {
+						<div
+							cdkDrag
+							cdkDragBoundary=".orderlist-container"
+ 							cdkDragLockAxis="y"
+							class="tile"
+							cdkDragPreviewContainer="parent"
+							[cdkDragDisabled]="disabled"
+						>
+							<tui-icon
+								cdkDragHandle
+								class="handle"
+								icon="@tui.grip-vertical"
+							/>
+							@if(showButtons){
+								<div class="button-container">
+									<button tuiButton appearance="flat" size="s" iconStart="chevron-up" (click)="moveUp($index)" [disabled]="$index == 0"></button>
+									<button tuiButton appearance="flat" size="s" iconStart="chevron-down" (click)="moveDown($index)" [disabled]="$index == values.length - 1"></button>
+								</div>
+							}
+							@if(itemTemplate){
+								<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: value  }"></ng-container>
+							}
+							@else {
+								<div class="content">{{ getOptionLabel(value) }}</div>
+							}
+						</div>
+					}
+				</div>
+			}
+		</div>
+    `, styles: [".orderlist-container{background-color:var(--tui-background-base-alt);border:2px solid var(--tui-border-normal);border-radius:var(--tui-radius-l);padding:5px}.tile{background:var(--tui-background-base);border-radius:var(--tui-radius-l);border:1px solid var(--tui-border-normal);display:flex;flex-direction:row;gap:5px;padding:5px}.tile .handle{align-self:center;cursor:grab}.tile .content,.tile .button-container{align-self:center}.cdk-drag-disabled{opacity:.7;-webkit-user-select:none;user-select:none}.cdk-drag-disabled .handle{align-self:center;cursor:not-allowed}.cdk-drag-preview{display:flex;background:var(--tui-background-base);border-radius:var(--tui-radius-l);border:1px solid var(--tui-border-normal)}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+        }], propDecorators: { itemTemplate: [{
+                type: ContentChild,
+                args: ['itemTemplate', { static: false }]
+            }], disabled: [{
+                type: Input
+            }], values: [{
+                type: Input
+            }], valuesChange: [{
+                type: Output
+            }], optionLabel: [{
+                type: Input
+            }], showButtons: [{
+                type: Input
+            }] } });
+
 class EzUISelect {
     selectedTemplate;
     itemTemplate;
@@ -7036,5 +7193,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BaseCRUDInterface, BaseListInterface, EzUIBooleanInput, EzUIDateInput, EzUIDateTimeInput, EzUIDialog, EzUIFileInput, EzUIFilterHelpers, EzUIIconSelector, EzUILayout, EzUILayoutService, EzUIMarkdownEditor, EzUIMenuBar, EzUIMenuBarSubDataList, EzUIMultiSelect, EzUINumberInput, EzUIPasswordInput, EzUIPopoutMenu, EzUIPopoutMenuSubDataList, EzUISelect, EzUIShowMoreText, EzUITTableSortableColumn, EzUITable, EzUITableBooleanFilter, EzUITableDateFilter, EzUITableDateTimeFilter, EzUITableFilterService, EzUITableNumberFilter, EzUITableSelectFilter, EzUITableTextFilter, EzUITextInput, EzUITreeMultiSelect, EzUITreeSelect, compressImage };
+export { BaseCRUDInterface, BaseListInterface, EzUIBooleanInput, EzUIDateInput, EzUIDateTimeInput, EzUIDialog, EzUIFileInput, EzUIFilterHelpers, EzUIIconSelector, EzUILayout, EzUILayoutService, EzUIMarkdownEditor, EzUIMenuBar, EzUIMenuBarSubDataList, EzUIMultiSelect, EzUINumberInput, EzUIOrderList, EzUIPasswordInput, EzUIPopoutMenu, EzUIPopoutMenuSubDataList, EzUISelect, EzUIShowMoreText, EzUITTableSortableColumn, EzUITable, EzUITableBooleanFilter, EzUITableDateFilter, EzUITableDateTimeFilter, EzUITableFilterService, EzUITableNumberFilter, EzUITableSelectFilter, EzUITableTextFilter, EzUITextInput, EzUITreeMultiSelect, EzUITreeSelect, compressImage };
 //# sourceMappingURL=kris701-ez-ui.mjs.map