@kris701/ez-ui 1.3.8 → 1.3.9
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.
|
@@ -16,11 +16,12 @@ import * as i3 from '@taiga-ui/core/components/textfield';
|
|
|
16
16
|
import * as i4 from '@taiga-ui/core/portals/dropdown';
|
|
17
17
|
import * as i6 from '@taiga-ui/core/components/calendar';
|
|
18
18
|
import * as i4$2 from '@taiga-ui/layout';
|
|
19
|
-
import { TuiHeader,
|
|
19
|
+
import { TuiHeader, TuiBlockStatus, TuiElasticContainer, TuiNavigation, TuiAsideGroupComponent } from '@taiga-ui/layout';
|
|
20
20
|
import { marked } from 'marked';
|
|
21
21
|
import Compressor from 'compressorjs';
|
|
22
22
|
import { TuiAutoFocus } from '@taiga-ui/cdk';
|
|
23
23
|
import * as i5 from '@taiga-ui/cdk/directives/item';
|
|
24
|
+
import { moveItemInArray, CdkDropList, CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
|
|
24
25
|
import * as i3$2 from '@taiga-ui/addon-table';
|
|
25
26
|
import { TuiTablePagination, TuiTable } from '@taiga-ui/addon-table';
|
|
26
27
|
import { v4 } from 'uuid';
|
|
@@ -3728,6 +3729,157 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
3728
3729
|
type: Input
|
|
3729
3730
|
}] } });
|
|
3730
3731
|
|
|
3732
|
+
class EzUIOrderList {
|
|
3733
|
+
itemTemplate;
|
|
3734
|
+
disabled = false;
|
|
3735
|
+
values = [];
|
|
3736
|
+
valuesChange = new EventEmitter();
|
|
3737
|
+
optionLabel = "";
|
|
3738
|
+
showButtons = false;
|
|
3739
|
+
getOptionLabel(item) {
|
|
3740
|
+
if (!item)
|
|
3741
|
+
return "";
|
|
3742
|
+
if (this.optionLabel == undefined || this.optionLabel == '')
|
|
3743
|
+
return item;
|
|
3744
|
+
return item[this.optionLabel];
|
|
3745
|
+
}
|
|
3746
|
+
moveUp(index) {
|
|
3747
|
+
moveItemInArray(this.values, this.clampIndex(index), this.clampIndex(index - 1));
|
|
3748
|
+
this.valuesChange.emit(this.values);
|
|
3749
|
+
}
|
|
3750
|
+
moveDown(index) {
|
|
3751
|
+
moveItemInArray(this.values, this.clampIndex(index), this.clampIndex(index + 1));
|
|
3752
|
+
this.valuesChange.emit(this.values);
|
|
3753
|
+
}
|
|
3754
|
+
drop(event) {
|
|
3755
|
+
moveItemInArray(this.values, event.previousIndex, event.currentIndex);
|
|
3756
|
+
this.valuesChange.emit(this.values);
|
|
3757
|
+
}
|
|
3758
|
+
clampIndex(index) {
|
|
3759
|
+
if (index < 0)
|
|
3760
|
+
index = 0;
|
|
3761
|
+
if (index >= this.values.length)
|
|
3762
|
+
index = this.values.length - 1;
|
|
3763
|
+
return index;
|
|
3764
|
+
}
|
|
3765
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIOrderList, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3766
|
+
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: `
|
|
3767
|
+
<div class="orderlist-container">
|
|
3768
|
+
@if(values.length == 0){
|
|
3769
|
+
<tui-block-status>
|
|
3770
|
+
<tui-icon tuiSlot="top" icon="list" />
|
|
3771
|
+
|
|
3772
|
+
<h3>No Data</h3>
|
|
3773
|
+
|
|
3774
|
+
No data to display.
|
|
3775
|
+
</tui-block-status>
|
|
3776
|
+
}
|
|
3777
|
+
@else {
|
|
3778
|
+
<div cdkDropList (cdkDropListDropped)="drop($event)">
|
|
3779
|
+
@for (value of values; track $index) {
|
|
3780
|
+
<div
|
|
3781
|
+
cdkDrag
|
|
3782
|
+
cdkDragBoundary=".orderlist-container"
|
|
3783
|
+
cdkDragLockAxis="y"
|
|
3784
|
+
class="tile"
|
|
3785
|
+
cdkDragPreviewContainer="parent"
|
|
3786
|
+
[cdkDragDisabled]="disabled"
|
|
3787
|
+
>
|
|
3788
|
+
<tui-icon
|
|
3789
|
+
cdkDragHandle
|
|
3790
|
+
class="handle"
|
|
3791
|
+
icon="@tui.grip-vertical"
|
|
3792
|
+
/>
|
|
3793
|
+
@if(showButtons){
|
|
3794
|
+
<div class="button-container">
|
|
3795
|
+
<button tuiButton appearance="flat" size="s" iconStart="chevron-up" (click)="moveUp($index)" [disabled]="$index == 0"></button>
|
|
3796
|
+
<button tuiButton appearance="flat" size="s" iconStart="chevron-down" (click)="moveDown($index)" [disabled]="$index == values.length - 1"></button>
|
|
3797
|
+
</div>
|
|
3798
|
+
}
|
|
3799
|
+
@if(itemTemplate){
|
|
3800
|
+
<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: value }"></ng-container>
|
|
3801
|
+
}
|
|
3802
|
+
@else {
|
|
3803
|
+
<div class="content">{{ getOptionLabel(value) }}</div>
|
|
3804
|
+
}
|
|
3805
|
+
</div>
|
|
3806
|
+
}
|
|
3807
|
+
</div>
|
|
3808
|
+
}
|
|
3809
|
+
</div>
|
|
3810
|
+
`, 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"] }] });
|
|
3811
|
+
}
|
|
3812
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIOrderList, decorators: [{
|
|
3813
|
+
type: Component,
|
|
3814
|
+
args: [{ selector: 'ezui-orderlist', imports: [
|
|
3815
|
+
FormsModule,
|
|
3816
|
+
CommonModule,
|
|
3817
|
+
TuiBlockStatus,
|
|
3818
|
+
TuiIcon,
|
|
3819
|
+
CdkDropList,
|
|
3820
|
+
CdkDrag,
|
|
3821
|
+
CdkDragHandle,
|
|
3822
|
+
TuiButton
|
|
3823
|
+
], template: `
|
|
3824
|
+
<div class="orderlist-container">
|
|
3825
|
+
@if(values.length == 0){
|
|
3826
|
+
<tui-block-status>
|
|
3827
|
+
<tui-icon tuiSlot="top" icon="list" />
|
|
3828
|
+
|
|
3829
|
+
<h3>No Data</h3>
|
|
3830
|
+
|
|
3831
|
+
No data to display.
|
|
3832
|
+
</tui-block-status>
|
|
3833
|
+
}
|
|
3834
|
+
@else {
|
|
3835
|
+
<div cdkDropList (cdkDropListDropped)="drop($event)">
|
|
3836
|
+
@for (value of values; track $index) {
|
|
3837
|
+
<div
|
|
3838
|
+
cdkDrag
|
|
3839
|
+
cdkDragBoundary=".orderlist-container"
|
|
3840
|
+
cdkDragLockAxis="y"
|
|
3841
|
+
class="tile"
|
|
3842
|
+
cdkDragPreviewContainer="parent"
|
|
3843
|
+
[cdkDragDisabled]="disabled"
|
|
3844
|
+
>
|
|
3845
|
+
<tui-icon
|
|
3846
|
+
cdkDragHandle
|
|
3847
|
+
class="handle"
|
|
3848
|
+
icon="@tui.grip-vertical"
|
|
3849
|
+
/>
|
|
3850
|
+
@if(showButtons){
|
|
3851
|
+
<div class="button-container">
|
|
3852
|
+
<button tuiButton appearance="flat" size="s" iconStart="chevron-up" (click)="moveUp($index)" [disabled]="$index == 0"></button>
|
|
3853
|
+
<button tuiButton appearance="flat" size="s" iconStart="chevron-down" (click)="moveDown($index)" [disabled]="$index == values.length - 1"></button>
|
|
3854
|
+
</div>
|
|
3855
|
+
}
|
|
3856
|
+
@if(itemTemplate){
|
|
3857
|
+
<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: value }"></ng-container>
|
|
3858
|
+
}
|
|
3859
|
+
@else {
|
|
3860
|
+
<div class="content">{{ getOptionLabel(value) }}</div>
|
|
3861
|
+
}
|
|
3862
|
+
</div>
|
|
3863
|
+
}
|
|
3864
|
+
</div>
|
|
3865
|
+
}
|
|
3866
|
+
</div>
|
|
3867
|
+
`, 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"] }]
|
|
3868
|
+
}], propDecorators: { itemTemplate: [{
|
|
3869
|
+
type: ContentChild,
|
|
3870
|
+
args: ['itemTemplate', { static: false }]
|
|
3871
|
+
}], disabled: [{
|
|
3872
|
+
type: Input
|
|
3873
|
+
}], values: [{
|
|
3874
|
+
type: Input
|
|
3875
|
+
}], valuesChange: [{
|
|
3876
|
+
type: Output
|
|
3877
|
+
}], optionLabel: [{
|
|
3878
|
+
type: Input
|
|
3879
|
+
}], showButtons: [{
|
|
3880
|
+
type: Input
|
|
3881
|
+
}] } });
|
|
3882
|
+
|
|
3731
3883
|
class EzUISelect {
|
|
3732
3884
|
selectedTemplate;
|
|
3733
3885
|
itemTemplate;
|
|
@@ -7041,5 +7193,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
7041
7193
|
* Generated bundle index. Do not edit.
|
|
7042
7194
|
*/
|
|
7043
7195
|
|
|
7044
|
-
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 };
|
|
7196
|
+
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 };
|
|
7045
7197
|
//# sourceMappingURL=kris701-ez-ui.mjs.map
|