@smartbit4all/ng-client 4.0.136 → 4.0.137
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.
- package/esm2022/lib/smart-form/widgets/smartformwidget/sortable-widget/sortable-widget.component.mjs +19 -13
- package/fesm2022/smartbit4all-ng-client.mjs +13 -9
- package/fesm2022/smartbit4all-ng-client.mjs.map +1 -1
- package/lib/smart-form/widgets/smartformwidget/sortable-widget/sortable-widget.component.d.ts +8 -5
- package/package.json +1 -1
- package/smartbit4all-ng-client-4.0.137.tgz +0 -0
- package/smartbit4all-ng-client-4.0.136.tgz +0 -0
package/esm2022/lib/smart-form/widgets/smartformwidget/sortable-widget/sortable-widget.component.mjs
CHANGED
|
@@ -1,20 +1,23 @@
|
|
|
1
|
-
import { moveItemInArray } from
|
|
2
|
-
import { Component, Input, forwardRef
|
|
3
|
-
import { NG_VALUE_ACCESSOR } from
|
|
1
|
+
import { moveItemInArray } from '@angular/cdk/drag-drop';
|
|
2
|
+
import { Component, Inject, Input, forwardRef } from '@angular/core';
|
|
3
|
+
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
4
|
+
import { COMPONENT_LIBRARY, ComponentLibrary, } from '../../../../view-context/utility/componentLibrary';
|
|
4
5
|
import * as i0 from "@angular/core";
|
|
5
6
|
import * as i1 from "@angular/common";
|
|
6
7
|
import * as i2 from "../../../../smart-icon/smart-icon/smart-icon.component";
|
|
7
8
|
import * as i3 from "@angular/cdk/drag-drop";
|
|
9
|
+
import * as i4 from "../../../../view-context/utility/componentLibrary";
|
|
8
10
|
export class SortableWidgetComponent {
|
|
9
|
-
constructor() {
|
|
11
|
+
constructor(compLib) {
|
|
12
|
+
this.compLib = compLib;
|
|
10
13
|
// ControlValueAccessor interface methods
|
|
11
14
|
this.onChange = () => { };
|
|
12
15
|
this.onTouched = () => { };
|
|
16
|
+
this.componentLibrary = ComponentLibrary;
|
|
13
17
|
this.isDisabled = false;
|
|
14
18
|
}
|
|
15
19
|
ngOnChanges(changes) {
|
|
16
|
-
if (changes[
|
|
17
|
-
!changes["widgetInstance"].isFirstChange()) {
|
|
20
|
+
if (changes['widgetInstance'] && !changes['widgetInstance'].isFirstChange()) {
|
|
18
21
|
this.onChange(this.widgetInstance.valueList);
|
|
19
22
|
}
|
|
20
23
|
}
|
|
@@ -35,25 +38,28 @@ export class SortableWidgetComponent {
|
|
|
35
38
|
setDisabledState(isDisabled) {
|
|
36
39
|
this.isDisabled = isDisabled;
|
|
37
40
|
}
|
|
38
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SortableWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
39
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
41
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SortableWidgetComponent, deps: [{ token: COMPONENT_LIBRARY }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
42
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: SortableWidgetComponent, selector: "lib-sortable-widget", inputs: { widgetInstance: "widgetInstance" }, providers: [
|
|
40
43
|
{
|
|
41
44
|
provide: NG_VALUE_ACCESSOR,
|
|
42
45
|
useExisting: forwardRef(() => SortableWidgetComponent),
|
|
43
46
|
multi: true,
|
|
44
47
|
},
|
|
45
|
-
], usesOnChanges: true, ngImport: i0, template: "<div cdkDropList (cdkDropListDropped)=\"onDrop($event)\" class=\"dropList\">\r\n <div\r\n cdkDrag\r\n [cdkDragDisabled]=\"isDisabled\"\r\n *ngFor=\"let item of widgetInstance.valueList!; let i = index\"\r\n class=\"draggableItem\"\r\n >\r\n <smart-icon\r\n class=\"cdkDragHandle\"\r\n cdkDragHandle\r\n color=\"drag-indicator\"\r\n icon=\"drag_indicator\"\r\n ></smart-icon>\r\n <div class=\"indexCircle\">\r\n {{ i + 1 }}\r\n </div>\r\n <span class=\"valueLabel\"> {{ item }} </span>\r\n </div>\r\n</div>\r\n", styles: [".dropList{display:flex;flex-direction:column;gap:.25rem}.draggableItem{display:flex;flex-direction:row;gap:.5rem;background-color:#f1f1f1;border-radius:.5rem;padding:.75rem 1rem}.draggableItem .indexCircle{margin:auto 0;padding:.25rem .5rem;border-radius:100%;background-color:#3b3b3b;color:#f1f1f1}.draggableItem .valueLabel{margin:auto 0}.cdkDragHandle{cursor:move}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2.SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] }); }
|
|
48
|
+
], usesOnChanges: true, ngImport: i0, template: "<div cdkDropList (cdkDropListDropped)=\"onDrop($event)\" class=\"dropList\">\r\n <div\r\n cdkDrag\r\n [cdkDragDisabled]=\"isDisabled\"\r\n *ngFor=\"let item of widgetInstance.valueList!; let i = index\"\r\n class=\"draggableItem\"\r\n >\r\n @if(compLib === componentLibrary.PRIMENG){\r\n <smart-icon\r\n class=\"cdkDragHandle\"\r\n cdkDragHandle\r\n color=\"drag-indicator\"\r\n icon=\"arrows-alt\"\r\n ></smart-icon>\r\n }@else {\r\n <smart-icon\r\n class=\"cdkDragHandle\"\r\n cdkDragHandle\r\n color=\"drag-indicator\"\r\n icon=\"drag_indicator\"\r\n ></smart-icon>\r\n\r\n }\r\n <div class=\"indexCircle\">\r\n {{ i + 1 }}\r\n </div>\r\n <span class=\"valueLabel\"> {{ item }} </span>\r\n </div>\r\n</div>\r\n", styles: [".dropList{display:flex;flex-direction:column;gap:.25rem}.draggableItem{display:flex;flex-direction:row;gap:.5rem;background-color:#f1f1f1;border-radius:.5rem;padding:.75rem 1rem}.draggableItem .indexCircle{margin:auto 0;padding:.25rem .5rem;border-radius:100%;background-color:#3b3b3b;color:#f1f1f1}.draggableItem .valueLabel{margin:auto 0}.cdkDragHandle{cursor:move}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2.SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] }); }
|
|
46
49
|
}
|
|
47
50
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SortableWidgetComponent, decorators: [{
|
|
48
51
|
type: Component,
|
|
49
|
-
args: [{ selector:
|
|
52
|
+
args: [{ selector: 'lib-sortable-widget', providers: [
|
|
50
53
|
{
|
|
51
54
|
provide: NG_VALUE_ACCESSOR,
|
|
52
55
|
useExisting: forwardRef(() => SortableWidgetComponent),
|
|
53
56
|
multi: true,
|
|
54
57
|
},
|
|
55
|
-
], template: "<div cdkDropList (cdkDropListDropped)=\"onDrop($event)\" class=\"dropList\">\r\n <div\r\n cdkDrag\r\n [cdkDragDisabled]=\"isDisabled\"\r\n *ngFor=\"let item of widgetInstance.valueList!; let i = index\"\r\n class=\"draggableItem\"\r\n >\r\n <smart-icon\r\n class=\"cdkDragHandle\"\r\n cdkDragHandle\r\n color=\"drag-indicator\"\r\n icon=\"drag_indicator\"\r\n ></smart-icon>\r\n <div class=\"indexCircle\">\r\n {{ i + 1 }}\r\n </div>\r\n <span class=\"valueLabel\"> {{ item }} </span>\r\n </div>\r\n</div>\r\n", styles: [".dropList{display:flex;flex-direction:column;gap:.25rem}.draggableItem{display:flex;flex-direction:row;gap:.5rem;background-color:#f1f1f1;border-radius:.5rem;padding:.75rem 1rem}.draggableItem .indexCircle{margin:auto 0;padding:.25rem .5rem;border-radius:100%;background-color:#3b3b3b;color:#f1f1f1}.draggableItem .valueLabel{margin:auto 0}.cdkDragHandle{cursor:move}\n"] }]
|
|
56
|
-
}], ctorParameters: () => [
|
|
58
|
+
], template: "<div cdkDropList (cdkDropListDropped)=\"onDrop($event)\" class=\"dropList\">\r\n <div\r\n cdkDrag\r\n [cdkDragDisabled]=\"isDisabled\"\r\n *ngFor=\"let item of widgetInstance.valueList!; let i = index\"\r\n class=\"draggableItem\"\r\n >\r\n @if(compLib === componentLibrary.PRIMENG){\r\n <smart-icon\r\n class=\"cdkDragHandle\"\r\n cdkDragHandle\r\n color=\"drag-indicator\"\r\n icon=\"arrows-alt\"\r\n ></smart-icon>\r\n }@else {\r\n <smart-icon\r\n class=\"cdkDragHandle\"\r\n cdkDragHandle\r\n color=\"drag-indicator\"\r\n icon=\"drag_indicator\"\r\n ></smart-icon>\r\n\r\n }\r\n <div class=\"indexCircle\">\r\n {{ i + 1 }}\r\n </div>\r\n <span class=\"valueLabel\"> {{ item }} </span>\r\n </div>\r\n</div>\r\n", styles: [".dropList{display:flex;flex-direction:column;gap:.25rem}.draggableItem{display:flex;flex-direction:row;gap:.5rem;background-color:#f1f1f1;border-radius:.5rem;padding:.75rem 1rem}.draggableItem .indexCircle{margin:auto 0;padding:.25rem .5rem;border-radius:100%;background-color:#3b3b3b;color:#f1f1f1}.draggableItem .valueLabel{margin:auto 0}.cdkDragHandle{cursor:move}\n"] }]
|
|
59
|
+
}], ctorParameters: () => [{ type: i4.ComponentLibrary, decorators: [{
|
|
60
|
+
type: Inject,
|
|
61
|
+
args: [COMPONENT_LIBRARY]
|
|
62
|
+
}] }], propDecorators: { widgetInstance: [{
|
|
57
63
|
type: Input
|
|
58
64
|
}] } });
|
|
59
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
65
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic29ydGFibGUtd2lkZ2V0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3NtYXJ0LW5nLWNsaWVudC9zcmMvbGliL3NtYXJ0LWZvcm0vd2lkZ2V0cy9zbWFydGZvcm13aWRnZXQvc29ydGFibGUtd2lkZ2V0L3NvcnRhYmxlLXdpZGdldC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zbWFydC1uZy1jbGllbnQvc3JjL2xpYi9zbWFydC1mb3JtL3dpZGdldHMvc21hcnRmb3Jtd2lkZ2V0L3NvcnRhYmxlLXdpZGdldC9zb3J0YWJsZS13aWRnZXQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFlLGVBQWUsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ3RFLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBNEIsVUFBVSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQy9GLE9BQU8sRUFBd0IsaUJBQWlCLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUV6RSxPQUFPLEVBQ0wsaUJBQWlCLEVBQ2pCLGdCQUFnQixHQUNqQixNQUFNLG1EQUFtRCxDQUFDOzs7Ozs7QUFjM0QsTUFBTSxPQUFPLHVCQUF1QjtJQVNsQyxZQUE4QyxPQUF5QjtRQUF6QixZQUFPLEdBQVAsT0FBTyxDQUFrQjtRQU52RSx5Q0FBeUM7UUFDakMsYUFBUSxHQUEyQixHQUFHLEVBQUUsR0FBRSxDQUFDLENBQUM7UUFDNUMsY0FBUyxHQUFlLEdBQUcsRUFBRSxHQUFFLENBQUMsQ0FBQztRQUN6QyxxQkFBZ0IsR0FBRyxnQkFBZ0IsQ0FBQztRQUNwQyxlQUFVLEdBQVksS0FBSyxDQUFDO0lBRThDLENBQUM7SUFDM0UsV0FBVyxDQUFDLE9BQXNCO1FBQ2hDLElBQUksT0FBTyxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsZ0JBQWdCLENBQUMsQ0FBQyxhQUFhLEVBQUUsRUFBRSxDQUFDO1lBQzVFLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLGNBQWMsQ0FBQyxTQUFVLENBQUMsQ0FBQztRQUNoRCxDQUFDO0lBQ0gsQ0FBQztJQUVELE1BQU0sQ0FBQyxLQUE0QjtRQUNqQyxlQUFlLENBQUMsSUFBSSxDQUFDLGNBQWMsQ0FBQyxTQUFVLEVBQUUsS0FBSyxDQUFDLGFBQWEsRUFBRSxLQUFLLENBQUMsWUFBWSxDQUFDLENBQUM7UUFDekYsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsY0FBYyxDQUFDLFNBQVUsQ0FBQyxDQUFDO0lBQ2hELENBQUM7SUFFRCwrQkFBK0I7SUFDL0IsVUFBVSxDQUFDLEtBQVk7UUFDckIsSUFBSSxDQUFDLGNBQWMsQ0FBQyxTQUFTLEdBQUcsS0FBSyxJQUFJLEVBQUUsQ0FBQztJQUM5QyxDQUFDO0lBRUQsZ0JBQWdCLENBQUMsRUFBNkI7UUFDNUMsSUFBSSxDQUFDLFFBQVEsR0FBRyxFQUFFLENBQUM7SUFDckIsQ0FBQztJQUVELGlCQUFpQixDQUFDLEVBQWM7UUFDOUIsSUFBSSxDQUFDLFNBQVMsR0FBRyxFQUFFLENBQUM7SUFDdEIsQ0FBQztJQUVELGdCQUFnQixDQUFFLFVBQW1CO1FBQ25DLElBQUksQ0FBQyxVQUFVLEdBQUcsVUFBVSxDQUFDO0lBQy9CLENBQUM7K0dBcENVLHVCQUF1QixrQkFTZCxpQkFBaUI7bUdBVDFCLHVCQUF1Qiw0RkFSdkI7WUFDVDtnQkFDRSxPQUFPLEVBQUUsaUJBQWlCO2dCQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLHVCQUF1QixDQUFDO2dCQUN0RCxLQUFLLEVBQUUsSUFBSTthQUNaO1NBQ0YsK0NDbkJILHF5QkE2QkE7OzRGRFJhLHVCQUF1QjtrQkFabkMsU0FBUzsrQkFDRSxxQkFBcUIsYUFHcEI7d0JBQ1Q7NEJBQ0UsT0FBTyxFQUFFLGlCQUFpQjs0QkFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsd0JBQXdCLENBQUM7NEJBQ3RELEtBQUssRUFBRSxJQUFJO3lCQUNaO3FCQUNGOzswQkFXWSxNQUFNOzJCQUFDLGlCQUFpQjt5Q0FSNUIsY0FBYztzQkFBdEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENka0RyYWdEcm9wLCBtb3ZlSXRlbUluQXJyYXkgfSBmcm9tICdAYW5ndWxhci9jZGsvZHJhZy1kcm9wJztcclxuaW1wb3J0IHsgQ29tcG9uZW50LCBJbmplY3QsIElucHV0LCBPbkNoYW5nZXMsIFNpbXBsZUNoYW5nZXMsIGZvcndhcmRSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgQ29udHJvbFZhbHVlQWNjZXNzb3IsIE5HX1ZBTFVFX0FDQ0VTU09SIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xyXG5pbXBvcnQgeyBTbWFydFNvcnRhYmxlIH0gZnJvbSAnLi4vLi4vLi4vc21hcnRmb3JtLmZvcm0tbW9kZWwnO1xyXG5pbXBvcnQge1xyXG4gIENPTVBPTkVOVF9MSUJSQVJZLFxyXG4gIENvbXBvbmVudExpYnJhcnksXHJcbn0gZnJvbSAnLi4vLi4vLi4vLi4vdmlldy1jb250ZXh0L3V0aWxpdHkvY29tcG9uZW50TGlicmFyeSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2xpYi1zb3J0YWJsZS13aWRnZXQnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9zb3J0YWJsZS13aWRnZXQuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL3NvcnRhYmxlLXdpZGdldC5jb21wb25lbnQuY3NzJ10sXHJcbiAgcHJvdmlkZXJzOiBbXHJcbiAgICB7XHJcbiAgICAgIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxyXG4gICAgICB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBTb3J0YWJsZVdpZGdldENvbXBvbmVudCksXHJcbiAgICAgIG11bHRpOiB0cnVlLFxyXG4gICAgfSxcclxuICBdLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgU29ydGFibGVXaWRnZXRDb21wb25lbnQgaW1wbGVtZW50cyBDb250cm9sVmFsdWVBY2Nlc3NvciwgT25DaGFuZ2VzIHtcclxuICBASW5wdXQoKSB3aWRnZXRJbnN0YW5jZSE6IFNtYXJ0U29ydGFibGU8YW55PjtcclxuXHJcbiAgLy8gQ29udHJvbFZhbHVlQWNjZXNzb3IgaW50ZXJmYWNlIG1ldGhvZHNcclxuICBwcml2YXRlIG9uQ2hhbmdlOiAodmFsdWU6IGFueVtdKSA9PiB2b2lkID0gKCkgPT4ge307XHJcbiAgcHJpdmF0ZSBvblRvdWNoZWQ6ICgpID0+IHZvaWQgPSAoKSA9PiB7fTtcclxuICBjb21wb25lbnRMaWJyYXJ5ID0gQ29tcG9uZW50TGlicmFyeTtcclxuICBpc0Rpc2FibGVkOiBib29sZWFuID0gZmFsc2U7XHJcblxyXG4gIGNvbnN0cnVjdG9yKEBJbmplY3QoQ09NUE9ORU5UX0xJQlJBUlkpIHB1YmxpYyBjb21wTGliOiBDb21wb25lbnRMaWJyYXJ5KSB7fVxyXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpIHtcclxuICAgIGlmIChjaGFuZ2VzWyd3aWRnZXRJbnN0YW5jZSddICYmICFjaGFuZ2VzWyd3aWRnZXRJbnN0YW5jZSddLmlzRmlyc3RDaGFuZ2UoKSkge1xyXG4gICAgICB0aGlzLm9uQ2hhbmdlKHRoaXMud2lkZ2V0SW5zdGFuY2UudmFsdWVMaXN0ISk7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBvbkRyb3AoZXZlbnQ6IENka0RyYWdEcm9wPHN0cmluZ1tdPikge1xyXG4gICAgbW92ZUl0ZW1JbkFycmF5KHRoaXMud2lkZ2V0SW5zdGFuY2UudmFsdWVMaXN0ISwgZXZlbnQucHJldmlvdXNJbmRleCwgZXZlbnQuY3VycmVudEluZGV4KTtcclxuICAgIHRoaXMub25DaGFuZ2UodGhpcy53aWRnZXRJbnN0YW5jZS52YWx1ZUxpc3QhKTtcclxuICB9XHJcblxyXG4gIC8vIENvbnRyb2xWYWx1ZUFjY2Vzc29yIG1ldGhvZHNcclxuICB3cml0ZVZhbHVlKHZhbHVlOiBhbnlbXSk6IHZvaWQge1xyXG4gICAgdGhpcy53aWRnZXRJbnN0YW5jZS52YWx1ZUxpc3QgPSB2YWx1ZSB8fCBbXTtcclxuICB9XHJcblxyXG4gIHJlZ2lzdGVyT25DaGFuZ2UoZm46ICh2YWx1ZTogc3RyaW5nW10pID0+IHZvaWQpOiB2b2lkIHtcclxuICAgIHRoaXMub25DaGFuZ2UgPSBmbjtcclxuICB9XHJcblxyXG4gIHJlZ2lzdGVyT25Ub3VjaGVkKGZuOiAoKSA9PiB2b2lkKTogdm9pZCB7XHJcbiAgICB0aGlzLm9uVG91Y2hlZCA9IGZuO1xyXG4gIH1cclxuXHJcbiAgc2V0RGlzYWJsZWRTdGF0ZT8oaXNEaXNhYmxlZDogYm9vbGVhbik6IHZvaWQge1xyXG4gICAgdGhpcy5pc0Rpc2FibGVkID0gaXNEaXNhYmxlZDtcclxuICB9XHJcbn1cclxuIiwiPGRpdiBjZGtEcm9wTGlzdCAoY2RrRHJvcExpc3REcm9wcGVkKT1cIm9uRHJvcCgkZXZlbnQpXCIgY2xhc3M9XCJkcm9wTGlzdFwiPlxyXG4gIDxkaXZcclxuICAgIGNka0RyYWdcclxuICAgIFtjZGtEcmFnRGlzYWJsZWRdPVwiaXNEaXNhYmxlZFwiXHJcbiAgICAqbmdGb3I9XCJsZXQgaXRlbSBvZiB3aWRnZXRJbnN0YW5jZS52YWx1ZUxpc3QhOyBsZXQgaSA9IGluZGV4XCJcclxuICAgIGNsYXNzPVwiZHJhZ2dhYmxlSXRlbVwiXHJcbiAgPlxyXG4gICAgQGlmKGNvbXBMaWIgPT09IGNvbXBvbmVudExpYnJhcnkuUFJJTUVORyl7XHJcbiAgICA8c21hcnQtaWNvblxyXG4gICAgICBjbGFzcz1cImNka0RyYWdIYW5kbGVcIlxyXG4gICAgICBjZGtEcmFnSGFuZGxlXHJcbiAgICAgIGNvbG9yPVwiZHJhZy1pbmRpY2F0b3JcIlxyXG4gICAgICBpY29uPVwiYXJyb3dzLWFsdFwiXHJcbiAgICA+PC9zbWFydC1pY29uPlxyXG4gICAgfUBlbHNlIHtcclxuICAgIDxzbWFydC1pY29uXHJcbiAgICAgIGNsYXNzPVwiY2RrRHJhZ0hhbmRsZVwiXHJcbiAgICAgIGNka0RyYWdIYW5kbGVcclxuICAgICAgY29sb3I9XCJkcmFnLWluZGljYXRvclwiXHJcbiAgICAgIGljb249XCJkcmFnX2luZGljYXRvclwiXHJcbiAgICA+PC9zbWFydC1pY29uPlxyXG5cclxuICAgIH1cclxuICAgIDxkaXYgY2xhc3M9XCJpbmRleENpcmNsZVwiPlxyXG4gICAgICB7eyBpICsgMSB9fVxyXG4gICAgPC9kaXY+XHJcbiAgICA8c3BhbiBjbGFzcz1cInZhbHVlTGFiZWxcIj4ge3sgaXRlbSB9fSA8L3NwYW4+XHJcbiAgPC9kaXY+XHJcbjwvZGl2PlxyXG4iXX0=
|
|
@@ -5767,15 +5767,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
|
|
|
5767
5767
|
}] } });
|
|
5768
5768
|
|
|
5769
5769
|
class SortableWidgetComponent {
|
|
5770
|
-
constructor() {
|
|
5770
|
+
constructor(compLib) {
|
|
5771
|
+
this.compLib = compLib;
|
|
5771
5772
|
// ControlValueAccessor interface methods
|
|
5772
5773
|
this.onChange = () => { };
|
|
5773
5774
|
this.onTouched = () => { };
|
|
5775
|
+
this.componentLibrary = ComponentLibrary;
|
|
5774
5776
|
this.isDisabled = false;
|
|
5775
5777
|
}
|
|
5776
5778
|
ngOnChanges(changes) {
|
|
5777
|
-
if (changes[
|
|
5778
|
-
!changes["widgetInstance"].isFirstChange()) {
|
|
5779
|
+
if (changes['widgetInstance'] && !changes['widgetInstance'].isFirstChange()) {
|
|
5779
5780
|
this.onChange(this.widgetInstance.valueList);
|
|
5780
5781
|
}
|
|
5781
5782
|
}
|
|
@@ -5796,25 +5797,28 @@ class SortableWidgetComponent {
|
|
|
5796
5797
|
setDisabledState(isDisabled) {
|
|
5797
5798
|
this.isDisabled = isDisabled;
|
|
5798
5799
|
}
|
|
5799
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SortableWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5800
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
5800
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SortableWidgetComponent, deps: [{ token: COMPONENT_LIBRARY }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5801
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: SortableWidgetComponent, selector: "lib-sortable-widget", inputs: { widgetInstance: "widgetInstance" }, providers: [
|
|
5801
5802
|
{
|
|
5802
5803
|
provide: NG_VALUE_ACCESSOR,
|
|
5803
5804
|
useExisting: forwardRef(() => SortableWidgetComponent),
|
|
5804
5805
|
multi: true,
|
|
5805
5806
|
},
|
|
5806
|
-
], usesOnChanges: true, ngImport: i0, template: "<div cdkDropList (cdkDropListDropped)=\"onDrop($event)\" class=\"dropList\">\r\n <div\r\n cdkDrag\r\n [cdkDragDisabled]=\"isDisabled\"\r\n *ngFor=\"let item of widgetInstance.valueList!; let i = index\"\r\n class=\"draggableItem\"\r\n >\r\n <smart-icon\r\n class=\"cdkDragHandle\"\r\n cdkDragHandle\r\n color=\"drag-indicator\"\r\n icon=\"drag_indicator\"\r\n ></smart-icon>\r\n <div class=\"indexCircle\">\r\n {{ i + 1 }}\r\n </div>\r\n <span class=\"valueLabel\"> {{ item }} </span>\r\n </div>\r\n</div>\r\n", styles: [".dropList{display:flex;flex-direction:column;gap:.25rem}.draggableItem{display:flex;flex-direction:row;gap:.5rem;background-color:#f1f1f1;border-radius:.5rem;padding:.75rem 1rem}.draggableItem .indexCircle{margin:auto 0;padding:.25rem .5rem;border-radius:100%;background-color:#3b3b3b;color:#f1f1f1}.draggableItem .valueLabel{margin:auto 0}.cdkDragHandle{cursor:move}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }, { kind: "directive", type: i3$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] }); }
|
|
5807
|
+
], usesOnChanges: true, ngImport: i0, template: "<div cdkDropList (cdkDropListDropped)=\"onDrop($event)\" class=\"dropList\">\r\n <div\r\n cdkDrag\r\n [cdkDragDisabled]=\"isDisabled\"\r\n *ngFor=\"let item of widgetInstance.valueList!; let i = index\"\r\n class=\"draggableItem\"\r\n >\r\n @if(compLib === componentLibrary.PRIMENG){\r\n <smart-icon\r\n class=\"cdkDragHandle\"\r\n cdkDragHandle\r\n color=\"drag-indicator\"\r\n icon=\"arrows-alt\"\r\n ></smart-icon>\r\n }@else {\r\n <smart-icon\r\n class=\"cdkDragHandle\"\r\n cdkDragHandle\r\n color=\"drag-indicator\"\r\n icon=\"drag_indicator\"\r\n ></smart-icon>\r\n\r\n }\r\n <div class=\"indexCircle\">\r\n {{ i + 1 }}\r\n </div>\r\n <span class=\"valueLabel\"> {{ item }} </span>\r\n </div>\r\n</div>\r\n", styles: [".dropList{display:flex;flex-direction:column;gap:.25rem}.draggableItem{display:flex;flex-direction:row;gap:.5rem;background-color:#f1f1f1;border-radius:.5rem;padding:.75rem 1rem}.draggableItem .indexCircle{margin:auto 0;padding:.25rem .5rem;border-radius:100%;background-color:#3b3b3b;color:#f1f1f1}.draggableItem .valueLabel{margin:auto 0}.cdkDragHandle{cursor:move}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }, { kind: "directive", type: i3$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] }); }
|
|
5807
5808
|
}
|
|
5808
5809
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SortableWidgetComponent, decorators: [{
|
|
5809
5810
|
type: Component,
|
|
5810
|
-
args: [{ selector:
|
|
5811
|
+
args: [{ selector: 'lib-sortable-widget', providers: [
|
|
5811
5812
|
{
|
|
5812
5813
|
provide: NG_VALUE_ACCESSOR,
|
|
5813
5814
|
useExisting: forwardRef(() => SortableWidgetComponent),
|
|
5814
5815
|
multi: true,
|
|
5815
5816
|
},
|
|
5816
|
-
], template: "<div cdkDropList (cdkDropListDropped)=\"onDrop($event)\" class=\"dropList\">\r\n <div\r\n cdkDrag\r\n [cdkDragDisabled]=\"isDisabled\"\r\n *ngFor=\"let item of widgetInstance.valueList!; let i = index\"\r\n class=\"draggableItem\"\r\n >\r\n <smart-icon\r\n class=\"cdkDragHandle\"\r\n cdkDragHandle\r\n color=\"drag-indicator\"\r\n icon=\"drag_indicator\"\r\n ></smart-icon>\r\n <div class=\"indexCircle\">\r\n {{ i + 1 }}\r\n </div>\r\n <span class=\"valueLabel\"> {{ item }} </span>\r\n </div>\r\n</div>\r\n", styles: [".dropList{display:flex;flex-direction:column;gap:.25rem}.draggableItem{display:flex;flex-direction:row;gap:.5rem;background-color:#f1f1f1;border-radius:.5rem;padding:.75rem 1rem}.draggableItem .indexCircle{margin:auto 0;padding:.25rem .5rem;border-radius:100%;background-color:#3b3b3b;color:#f1f1f1}.draggableItem .valueLabel{margin:auto 0}.cdkDragHandle{cursor:move}\n"] }]
|
|
5817
|
-
}], ctorParameters: () => [
|
|
5817
|
+
], template: "<div cdkDropList (cdkDropListDropped)=\"onDrop($event)\" class=\"dropList\">\r\n <div\r\n cdkDrag\r\n [cdkDragDisabled]=\"isDisabled\"\r\n *ngFor=\"let item of widgetInstance.valueList!; let i = index\"\r\n class=\"draggableItem\"\r\n >\r\n @if(compLib === componentLibrary.PRIMENG){\r\n <smart-icon\r\n class=\"cdkDragHandle\"\r\n cdkDragHandle\r\n color=\"drag-indicator\"\r\n icon=\"arrows-alt\"\r\n ></smart-icon>\r\n }@else {\r\n <smart-icon\r\n class=\"cdkDragHandle\"\r\n cdkDragHandle\r\n color=\"drag-indicator\"\r\n icon=\"drag_indicator\"\r\n ></smart-icon>\r\n\r\n }\r\n <div class=\"indexCircle\">\r\n {{ i + 1 }}\r\n </div>\r\n <span class=\"valueLabel\"> {{ item }} </span>\r\n </div>\r\n</div>\r\n", styles: [".dropList{display:flex;flex-direction:column;gap:.25rem}.draggableItem{display:flex;flex-direction:row;gap:.5rem;background-color:#f1f1f1;border-radius:.5rem;padding:.75rem 1rem}.draggableItem .indexCircle{margin:auto 0;padding:.25rem .5rem;border-radius:100%;background-color:#3b3b3b;color:#f1f1f1}.draggableItem .valueLabel{margin:auto 0}.cdkDragHandle{cursor:move}\n"] }]
|
|
5818
|
+
}], ctorParameters: () => [{ type: ComponentLibrary, decorators: [{
|
|
5819
|
+
type: Inject,
|
|
5820
|
+
args: [COMPONENT_LIBRARY]
|
|
5821
|
+
}] }], propDecorators: { widgetInstance: [{
|
|
5818
5822
|
type: Input
|
|
5819
5823
|
}] } });
|
|
5820
5824
|
|