coer-elements 0.0.39 → 0.0.41
Sign up to get free protection for your applications and to get access to all the features.
- package/components/lib/coer-button/coer-button.component.d.ts +1 -1
- package/components/lib/coer-list/coer-list.component.d.ts +17 -1
- package/components/lib/coer-numberbox/coer-numberbox.component.d.ts +1 -1
- package/components/lib/coer-sidenav/coer-sidenav.component.d.ts +3 -2
- package/components/lib/coer-textarea/coer-textarea.component.d.ts +1 -1
- package/components/lib/coer-textbox/coer-textbox.component.d.ts +1 -1
- package/components/public-api.d.ts +1 -1
- package/esm2022/components/lib/coer-list/coer-list.component.mjs +39 -5
- package/esm2022/components/lib/coer-sidenav/coer-sidenav.component.mjs +5 -1
- package/esm2022/components/lib/components.module.mjs +1 -1
- package/esm2022/components/public-api.mjs +2 -2
- package/fesm2022/coer-elements-components.mjs +39 -2
- package/fesm2022/coer-elements-components.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/coer-elements.css +40 -1
|
@@ -2359,14 +2359,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
2359
2359
|
|
|
2360
2360
|
class CoerList {
|
|
2361
2361
|
constructor() {
|
|
2362
|
+
//Variables
|
|
2363
|
+
this._id = Tools.GetGuid('coer-List');
|
|
2362
2364
|
//Inputs
|
|
2363
2365
|
this.dataSource = input([]);
|
|
2364
2366
|
this.propDisplay = input('name');
|
|
2367
|
+
this.header = input('');
|
|
2368
|
+
this.headerIcon = input('');
|
|
2365
2369
|
this.showDeleteButton = input(false);
|
|
2366
2370
|
this.showGoButton = input(false);
|
|
2367
2371
|
this.isLoading = input(false);
|
|
2368
2372
|
this.isDraggable = input(false);
|
|
2373
|
+
this.showSearch = input(false);
|
|
2369
2374
|
this.template = input(null);
|
|
2375
|
+
this.width = input('100%');
|
|
2376
|
+
this.MinWidth = input('250px');
|
|
2377
|
+
this.MaxWidth = input('100%');
|
|
2378
|
+
this.height = input('350px');
|
|
2379
|
+
this.minHeight = input('140px');
|
|
2380
|
+
this.maxHeight = input('100vh');
|
|
2381
|
+
this.marginTop = input('0px');
|
|
2382
|
+
this.marginRight = input('0px');
|
|
2383
|
+
this.marginBottom = input('0px');
|
|
2384
|
+
this.marginLeft = input('0px');
|
|
2370
2385
|
//Outputs
|
|
2371
2386
|
this.onDrop = output();
|
|
2372
2387
|
this.onSort = output();
|
|
@@ -2388,6 +2403,10 @@ class CoerList {
|
|
|
2388
2403
|
this._hasTemplate = computed(() => {
|
|
2389
2404
|
return typeof this.template() == 'function';
|
|
2390
2405
|
});
|
|
2406
|
+
//computed
|
|
2407
|
+
this._showbuttons = computed(() => {
|
|
2408
|
+
return !this.isLoading();
|
|
2409
|
+
});
|
|
2391
2410
|
/** */
|
|
2392
2411
|
this.GetDisplay = (item) => {
|
|
2393
2412
|
return Tools.IsNotNull(item) ? item[this.propDisplay()] : '';
|
|
@@ -2411,6 +2430,20 @@ class CoerList {
|
|
|
2411
2430
|
: showButton(item, item.index) === true && !this.isLoading();
|
|
2412
2431
|
};
|
|
2413
2432
|
}
|
|
2433
|
+
//getter
|
|
2434
|
+
get _height() {
|
|
2435
|
+
let height = this.height();
|
|
2436
|
+
if (height == 'full') {
|
|
2437
|
+
const TOOLBAR = 45;
|
|
2438
|
+
const PAGE_HEADER = 70;
|
|
2439
|
+
const LIST_HEADER = document.getElementById(`${this._id}-header`);
|
|
2440
|
+
const HEADER = (LIST_HEADER && LIST_HEADER.children.length > 0) ? 50 : 0;
|
|
2441
|
+
const MARGIN = 30;
|
|
2442
|
+
const PADDING = 20;
|
|
2443
|
+
height = (Screen.WINDOW_HEIGHT - TOOLBAR - PAGE_HEADER - MARGIN - HEADER - PADDING) + 'px';
|
|
2444
|
+
}
|
|
2445
|
+
return height;
|
|
2446
|
+
}
|
|
2414
2447
|
/** */
|
|
2415
2448
|
GetTemplate(item) {
|
|
2416
2449
|
return this.template()(item, item.index);
|
|
@@ -2426,11 +2459,11 @@ class CoerList {
|
|
|
2426
2459
|
this.onDrop.emit(item);
|
|
2427
2460
|
}
|
|
2428
2461
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CoerList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2429
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CoerList, selector: "coer-list", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, propDisplay: { classPropertyName: "propDisplay", publicName: "propDisplay", isSignal: true, isRequired: false, transformFunction: null }, showDeleteButton: { classPropertyName: "showDeleteButton", publicName: "showDeleteButton", isSignal: true, isRequired: false, transformFunction: null }, showGoButton: { classPropertyName: "showGoButton", publicName: "showGoButton", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDraggable: { classPropertyName: "isDraggable", publicName: "isDraggable", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDrop: "onDrop", onSort: "onSort", onClick: "onClick", onDoubleClick: "onDoubleClick", onClickDelete: "onClickDelete", onClickGo: "onClickGo" }, ngImport: i0, template: "<div class=\"coer-list\">\r\n <ul cdkDropList (cdkDropListDropped)=\"Drop($event)\" class=\"list-group coer-list\">\r\n @for (item of _dataSource(); track GetIndexRow(item)) {\r\n <li cdkDrag \r\n class=\"list-group-item coer-list-box\" \r\n cdkDragBoundary=\"ul.coer-list\"\r\n (click)=\"onClick.emit(item)\" \r\n (dblclick)=\"onDoubleClick.emit(item)\">\r\n\r\n <div *cdkDragPlaceholder class=\"coer-list-placeholder cursor-grabbing\"></div>\r\n <div class=\"coer-list-content\"> \r\n @if(_hasTemplate()) {\r\n <div [innerHTML]=\"GetTemplate(item) | html\" class=\"template\"></div>\r\n }\r\n\r\n @else {\r\n <div> {{ GetDisplay(item) }} </div> \r\n }\r\n \r\n @if(true) {\r\n <div>\r\n @if(_showDeleteButton(item)) {\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"secondary\"\r\n icon=\"delete\" \r\n (onClick)=\"onClickDelete.emit(item)\"\r\n ></coer-button>\r\n } \r\n\r\n @if(_showGoButton(item)) {\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"secondary\"\r\n icon=\"go\" \r\n marginLeft=\"5px\" \r\n (onClick)=\"onClickGo.emit(item)\"\r\n ></coer-button>\r\n } \r\n \r\n <i cdkDragHandle [ngClass]=\"{ \r\n 'fa-solid fa-grip-vertical text-secondary ps-2': true,\r\n 'cursor-grab': true, \r\n 'cursor-grabbing': false, \r\n 'd-none': !_isDraggable()\r\n }\"\r\n ></i> \r\n </div>\r\n }\r\n </div> \r\n </li> \r\n } \r\n </ul>\r\n</div>", styles: ["div.coer-list ul.coer-list{width:100%;border:solid 1px #ccc;display:block;background:#fff;border-radius:4px;overflow:hidden}div.coer-list li.coer-list-box{padding:10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:#fff;font-size:14px}div.coer-list li.coer-list-box div.coer-list-content{width:100%;display:flex;align-items:center;justify-content:space-between}div.coer-list .cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}div.coer-list .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list .coer-list-box:last-child{border:none}div.coer-list .coer-list.cdk-drop-list-dragging .coer-list-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list div.coer-list-placeholder{background:#ccc;border:dotted 3px #999;min-height:40px;transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list div.cdk-drag-placeholder,div.coer-list ul.cdk-drop-list-dragging,div.coer-list ul.cdk-drop-list-dragging *{cursor:grabbing}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$5.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: i2$5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i2$5.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: i2$5.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: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "icon", "iconPosition", "animation", "isLoading", "isDisabled", "isInvisible", "width", "minWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "path", "tooltipPosition", "tooltip"], outputs: ["onClick"] }, { kind: "pipe", type: i9.HtmlPipe, name: "html" }] }); }
|
|
2462
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CoerList, selector: "coer-list", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, propDisplay: { classPropertyName: "propDisplay", publicName: "propDisplay", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, headerIcon: { classPropertyName: "headerIcon", publicName: "headerIcon", isSignal: true, isRequired: false, transformFunction: null }, showDeleteButton: { classPropertyName: "showDeleteButton", publicName: "showDeleteButton", isSignal: true, isRequired: false, transformFunction: null }, showGoButton: { classPropertyName: "showGoButton", publicName: "showGoButton", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDraggable: { classPropertyName: "isDraggable", publicName: "isDraggable", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, MinWidth: { classPropertyName: "MinWidth", publicName: "MinWidth", isSignal: true, isRequired: false, transformFunction: null }, MaxWidth: { classPropertyName: "MaxWidth", publicName: "MaxWidth", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDrop: "onDrop", onSort: "onSort", onClick: "onClick", onDoubleClick: "onDoubleClick", onClickDelete: "onClickDelete", onClickGo: "onClickGo" }, ngImport: i0, template: "<div [id]=\"_id\" class=\"coer-list\" [ngStyle]=\"{ \r\n 'margin-top': marginTop(), \r\n 'margin-right': marginRight(), \r\n 'margin-bottom': marginBottom(), \r\n 'margin-left': marginLeft(), \r\n }\">\r\n\r\n @if(isLoading()) {\r\n <!-- Grid Message -->\r\n <div class=\"loading\">\r\n <i class=\"spinner-border\"></i>\r\n <span class=\"fa-fade\">Loading</span>\r\n </div>\r\n }\r\n\r\n @else if(dataSource().length <= 0) {\r\n <div class=\"no-data\"> No Data </div>\r\n }\r\n\r\n <header [id]=\"_id + '-header'\" class=\"row\"> \r\n @if(header().length > 0 || headerIcon().length > 0) {\r\n <div class=\"col-auto\">\r\n <h6>\r\n @if(headerIcon().length > 0) {\r\n <i [class]=\"headerIcon()\"></i> \r\n }\r\n\r\n @if(header().length > 0) {\r\n <span>{{ header() }}</span> \r\n }\r\n </h6> \r\n </div>\r\n }\r\n \r\n <!-- Search -->\r\n @if(showSearch() && dataSource().length > 0) {\r\n <div class=\"ms-auto col-auto\">\r\n <coer-textbox\r\n #inputSearch \r\n placeholder=\"Search\"\r\n [isDisabled]=\"isLoading()\"\r\n [selectOnFocus]=\"true\"\r\n width=\"250px\"\r\n marginTop=\"5px\"\r\n marginBottom=\"5px\"\r\n [showSearchIcon]=\"true\"\r\n [showClearIcon]=\"true\"\r\n ></coer-textbox>\r\n </div>\r\n }\r\n </header>\r\n\r\n <div [ngStyle]=\"{ \r\n 'width': width(), \r\n 'min-Width': MinWidth(), \r\n 'max-Width': MaxWidth(), \r\n }\">\r\n <ul cdkDropList (cdkDropListDropped)=\"Drop($event)\" class='list-group coer-list'\r\n [ngStyle]=\"{ \r\n 'height': _height, \r\n 'min-height': minHeight(), \r\n 'max-height': maxHeight(), \r\n 'd-none': dataSource().length <= 0 \r\n }\">\r\n \r\n @for (item of _dataSource(); track GetIndexRow(item)) {\r\n <li cdkDrag \r\n class=\"list-group-item coer-list-box\" \r\n cdkDragBoundary=\"ul.coer-list\"\r\n (click)=\"onClick.emit(item)\" \r\n (dblclick)=\"onDoubleClick.emit(item)\">\r\n \r\n <div *cdkDragPlaceholder class=\"coer-list-placeholder cursor-grabbing\"></div>\r\n <div class=\"coer-list-content\"> \r\n @if(_hasTemplate()) {\r\n <div [innerHTML]=\"GetTemplate(item) | html\" class=\"template\"></div>\r\n }\r\n \r\n @else {\r\n <div> {{ GetDisplay(item) }} </div> \r\n } \r\n \r\n <div>\r\n @if(_showDeleteButton(item)) {\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"secondary\"\r\n icon=\"delete\" \r\n (onClick)=\"onClickDelete.emit(item)\"\r\n ></coer-button>\r\n } \r\n \r\n @if(_showGoButton(item)) {\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"secondary\"\r\n icon=\"go\" \r\n marginLeft=\"5px\" \r\n (onClick)=\"onClickGo.emit(item)\"\r\n ></coer-button>\r\n } \r\n \r\n <i cdkDragHandle [ngClass]=\"{ \r\n 'fa-solid fa-grip-vertical text-secondary ps-2': true,\r\n 'cursor-grab': true, \r\n 'cursor-grabbing': false, \r\n 'd-none': !_isDraggable()\r\n }\"></i> \r\n </div> \r\n </div> \r\n </li> \r\n } \r\n </ul>\r\n </div>\r\n</div>", styles: ["div.coer-list header{align-items:center;justify-content:space-between;padding-right:0px 8px;margin:0}div.coer-list header h6{display:flex;align-items:center;gap:10px;min-height:40px;max-height:40px;margin-top:5px;margin-bottom:5px}div.coer-list header>div{display:flex;align-items:baseline}div.coer-list ul.coer-list{width:100%;border:solid 1px #ccc;display:block;background:#fff;border-radius:4px;overflow:auto}div.coer-list li.coer-list-box{padding:10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:#fff;font-size:14px}div.coer-list li.coer-list-box div.coer-list-content{width:100%;display:flex;align-items:center;justify-content:space-between}div.coer-list .cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}div.coer-list .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list .coer-list-box:last-child{border:none}div.coer-list .coer-list.cdk-drop-list-dragging .coer-list-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list div.coer-list-placeholder{background:#ccc;border:dotted 3px #999;min-height:40px;transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list div.cdk-drag-placeholder,div.coer-list ul.cdk-drop-list-dragging,div.coer-list ul.cdk-drop-list-dragging *{cursor:grabbing}div.coer-list div.loading,div.coer-list div.no-data{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:25px;color:gray;z-index:1}div.coer-list div.loading{background-color:#bbbbbb83!important;flex-direction:column!important;gap:10px!important}div.coer-list div.loading span.fa-fade{position:relative!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$5.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: i2$5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i2$5.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: i2$5.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: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "icon", "iconPosition", "animation", "isLoading", "isDisabled", "isInvisible", "width", "minWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "path", "tooltipPosition", "tooltip"], outputs: ["onClick"] }, { kind: "component", type: CoerTextBox, selector: "coer-textbox", inputs: ["value", "id", "label", "placeholder", "minLength", "maxLength", "showSearchIcon", "showClearIcon", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft", "isInvalid", "isValid", "isDisabled", "isReadonly", "isLoading", "selectOnFocus", "textPosition"], outputs: ["onKeyupEnter", "onInput", "onClickClear"] }, { kind: "pipe", type: i9.HtmlPipe, name: "html" }] }); }
|
|
2430
2463
|
}
|
|
2431
2464
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CoerList, decorators: [{
|
|
2432
2465
|
type: Component,
|
|
2433
|
-
args: [{ selector: 'coer-list', template: "<div class=\"coer-list\">\r\n <ul cdkDropList (cdkDropListDropped)=\"Drop($event)\" class
|
|
2466
|
+
args: [{ selector: 'coer-list', template: "<div [id]=\"_id\" class=\"coer-list\" [ngStyle]=\"{ \r\n 'margin-top': marginTop(), \r\n 'margin-right': marginRight(), \r\n 'margin-bottom': marginBottom(), \r\n 'margin-left': marginLeft(), \r\n }\">\r\n\r\n @if(isLoading()) {\r\n <!-- Grid Message -->\r\n <div class=\"loading\">\r\n <i class=\"spinner-border\"></i>\r\n <span class=\"fa-fade\">Loading</span>\r\n </div>\r\n }\r\n\r\n @else if(dataSource().length <= 0) {\r\n <div class=\"no-data\"> No Data </div>\r\n }\r\n\r\n <header [id]=\"_id + '-header'\" class=\"row\"> \r\n @if(header().length > 0 || headerIcon().length > 0) {\r\n <div class=\"col-auto\">\r\n <h6>\r\n @if(headerIcon().length > 0) {\r\n <i [class]=\"headerIcon()\"></i> \r\n }\r\n\r\n @if(header().length > 0) {\r\n <span>{{ header() }}</span> \r\n }\r\n </h6> \r\n </div>\r\n }\r\n \r\n <!-- Search -->\r\n @if(showSearch() && dataSource().length > 0) {\r\n <div class=\"ms-auto col-auto\">\r\n <coer-textbox\r\n #inputSearch \r\n placeholder=\"Search\"\r\n [isDisabled]=\"isLoading()\"\r\n [selectOnFocus]=\"true\"\r\n width=\"250px\"\r\n marginTop=\"5px\"\r\n marginBottom=\"5px\"\r\n [showSearchIcon]=\"true\"\r\n [showClearIcon]=\"true\"\r\n ></coer-textbox>\r\n </div>\r\n }\r\n </header>\r\n\r\n <div [ngStyle]=\"{ \r\n 'width': width(), \r\n 'min-Width': MinWidth(), \r\n 'max-Width': MaxWidth(), \r\n }\">\r\n <ul cdkDropList (cdkDropListDropped)=\"Drop($event)\" class='list-group coer-list'\r\n [ngStyle]=\"{ \r\n 'height': _height, \r\n 'min-height': minHeight(), \r\n 'max-height': maxHeight(), \r\n 'd-none': dataSource().length <= 0 \r\n }\">\r\n \r\n @for (item of _dataSource(); track GetIndexRow(item)) {\r\n <li cdkDrag \r\n class=\"list-group-item coer-list-box\" \r\n cdkDragBoundary=\"ul.coer-list\"\r\n (click)=\"onClick.emit(item)\" \r\n (dblclick)=\"onDoubleClick.emit(item)\">\r\n \r\n <div *cdkDragPlaceholder class=\"coer-list-placeholder cursor-grabbing\"></div>\r\n <div class=\"coer-list-content\"> \r\n @if(_hasTemplate()) {\r\n <div [innerHTML]=\"GetTemplate(item) | html\" class=\"template\"></div>\r\n }\r\n \r\n @else {\r\n <div> {{ GetDisplay(item) }} </div> \r\n } \r\n \r\n <div>\r\n @if(_showDeleteButton(item)) {\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"secondary\"\r\n icon=\"delete\" \r\n (onClick)=\"onClickDelete.emit(item)\"\r\n ></coer-button>\r\n } \r\n \r\n @if(_showGoButton(item)) {\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"secondary\"\r\n icon=\"go\" \r\n marginLeft=\"5px\" \r\n (onClick)=\"onClickGo.emit(item)\"\r\n ></coer-button>\r\n } \r\n \r\n <i cdkDragHandle [ngClass]=\"{ \r\n 'fa-solid fa-grip-vertical text-secondary ps-2': true,\r\n 'cursor-grab': true, \r\n 'cursor-grabbing': false, \r\n 'd-none': !_isDraggable()\r\n }\"></i> \r\n </div> \r\n </div> \r\n </li> \r\n } \r\n </ul>\r\n </div>\r\n</div>", styles: ["div.coer-list header{align-items:center;justify-content:space-between;padding-right:0px 8px;margin:0}div.coer-list header h6{display:flex;align-items:center;gap:10px;min-height:40px;max-height:40px;margin-top:5px;margin-bottom:5px}div.coer-list header>div{display:flex;align-items:baseline}div.coer-list ul.coer-list{width:100%;border:solid 1px #ccc;display:block;background:#fff;border-radius:4px;overflow:auto}div.coer-list li.coer-list-box{padding:10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:#fff;font-size:14px}div.coer-list li.coer-list-box div.coer-list-content{width:100%;display:flex;align-items:center;justify-content:space-between}div.coer-list .cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}div.coer-list .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list .coer-list-box:last-child{border:none}div.coer-list .coer-list.cdk-drop-list-dragging .coer-list-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list div.coer-list-placeholder{background:#ccc;border:dotted 3px #999;min-height:40px;transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list div.cdk-drag-placeholder,div.coer-list ul.cdk-drop-list-dragging,div.coer-list ul.cdk-drop-list-dragging *{cursor:grabbing}div.coer-list div.loading,div.coer-list div.no-data{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:25px;color:gray;z-index:1}div.coer-list div.loading{background-color:#bbbbbb83!important;flex-direction:column!important;gap:10px!important}div.coer-list div.loading span.fa-fade{position:relative!important}\n"] }]
|
|
2434
2467
|
}] });
|
|
2435
2468
|
|
|
2436
2469
|
class CoerMenuOption {
|
|
@@ -2730,6 +2763,10 @@ class CoerSidenav {
|
|
|
2730
2763
|
}
|
|
2731
2764
|
});
|
|
2732
2765
|
}
|
|
2766
|
+
ngAfterViewInit() {
|
|
2767
|
+
Tools.Sleep().then(_ => {
|
|
2768
|
+
});
|
|
2769
|
+
}
|
|
2733
2770
|
/** */
|
|
2734
2771
|
NavigateTo(selectedOption) {
|
|
2735
2772
|
let url = `${selectedOption.path}`;
|