coer-elements 0.0.40 → 0.0.42
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 +2 -2
- package/components/lib/coer-numberbox/coer-numberbox.component.d.ts +1 -1
- package/components/lib/coer-sidenav/coer-sidenav.component.d.ts +2 -3
- 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/esm2022/components/lib/coer-list/coer-list.component.mjs +5 -5
- package/esm2022/components/lib/coer-sidenav/coer-sidenav.component.mjs +1 -5
- package/esm2022/components/lib/coer-sidenav/coer-tree-accordion/coer-tree-accordion.component.mjs +4 -3
- package/esm2022/interfaces/lib/coer-menu/menu.interface.mjs +1 -1
- package/fesm2022/coer-elements-components.mjs +7 -10
- package/fesm2022/coer-elements-components.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/coer-elements.css +9 -0
|
@@ -2438,8 +2438,8 @@ class CoerList {
|
|
|
2438
2438
|
const PAGE_HEADER = 70;
|
|
2439
2439
|
const LIST_HEADER = document.getElementById(`${this._id}-header`);
|
|
2440
2440
|
const HEADER = (LIST_HEADER && LIST_HEADER.children.length > 0) ? 50 : 0;
|
|
2441
|
-
const MARGIN =
|
|
2442
|
-
const PADDING =
|
|
2441
|
+
const MARGIN = 50;
|
|
2442
|
+
const PADDING = 50;
|
|
2443
2443
|
height = (Screen.WINDOW_HEIGHT - TOOLBAR - PAGE_HEADER - MARGIN - HEADER - PADDING) + 'px';
|
|
2444
2444
|
}
|
|
2445
2445
|
return height;
|
|
@@ -2459,11 +2459,11 @@ class CoerList {
|
|
|
2459
2459
|
this.onDrop.emit(item);
|
|
2460
2460
|
}
|
|
2461
2461
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CoerList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
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 class=\"d-flex align-items-center gap-2\">\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>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" }] }); }
|
|
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" }] }); }
|
|
2463
2463
|
}
|
|
2464
2464
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CoerList, decorators: [{
|
|
2465
2465
|
type: Component,
|
|
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
|
|
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"] }]
|
|
2467
2467
|
}] });
|
|
2468
2468
|
|
|
2469
2469
|
class CoerMenuOption {
|
|
@@ -2622,6 +2622,7 @@ class CoerTreeAccordion {
|
|
|
2622
2622
|
this.IsMenu = (item) => item.hasOwnProperty('items') && Tools.IsNotOnlyWhiteSpace(item.items);
|
|
2623
2623
|
}
|
|
2624
2624
|
get _tree() {
|
|
2625
|
+
console.log(this.expansionPanel);
|
|
2625
2626
|
return [...this.tree].concat([{ ...this.item }]);
|
|
2626
2627
|
}
|
|
2627
2628
|
get _icon() {
|
|
@@ -2689,11 +2690,11 @@ class CoerTreeAccordion {
|
|
|
2689
2690
|
this.clickMenu.emit(menu);
|
|
2690
2691
|
}
|
|
2691
2692
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CoerTreeAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2692
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CoerTreeAccordion, selector: "coer-tree-accordion", inputs: { level: "level", item: "item", tree: "tree" }, outputs: { clickMenuOption: "clickMenuOption", clickMenu: "clickMenu" }, viewQueries: [{ propertyName: "expansionPanel", first: true, predicate: ["expansionPanel"], descendants: true }, { propertyName: "menuList", predicate: CoerTreeAccordion, descendants: true }], ngImport: i0, template: "<mat-accordion class=\"coer-tree-accordion\">\r\n <mat-expansion-panel #expansionPanel>\r\n\r\n <!-- Header -->\r\n <mat-expansion-panel-header (click)=\"Toggle()\"\r\n [class]=\"identityClass\"\r\n [ngClass]=\"{\r\n 'background-orange': (isExpanded && level == 1),\r\n 'text-orange': IsActive(iconContainer)\r\n }\">\r\n <mat-panel-description>\r\n <span #iconContainer\r\n [ngStyle]=\"{ 'margin-left': marginLeft }\"\r\n [class]=\"identityClass\"\r\n [ngClass]=\"{\r\n 'icon-container': true,\r\n 'text-orange': IsActive(iconContainer)\r\n }\"> <i [class]=\"_icon\"></i> </span>\r\n\r\n <span #labelContainer\r\n [class]=\"identityClass\"\r\n [ngClass]=\"{\r\n 'label-container': true,\r\n 'text-orange': IsActive(labelContainer)\r\n }\"> {{ item.label }} </span>\r\n </mat-panel-description>\r\n </mat-expansion-panel-header>\r\n\r\n\r\n <div *ngFor=\"let subItem of item.items\">\r\n <!-- Sub Menu -->\r\n <div *ngIf=\"IsMenu(subItem); else isOption\">\r\n <coer-tree-accordion\r\n [level]=\"level + 1\"\r\n [item]=\"subItem\"\r\n [tree]=\"_tree\"\r\n (clickMenuOption)=\"ClickMenuOption($event)\"\r\n (clickMenu)=\"ClickMenu($event)\"\r\n ></coer-tree-accordion>\r\n </div>\r\n\r\n <!-- Option Menu -->\r\n <ng-template #isOption>\r\n <coer-menu-option\r\n [label]=\"subItem.label\"\r\n [icon]=\"subItem?.icon\"\r\n [path]=\"subItem?.path\"\r\n [level]=\"level + 1\"\r\n [tree]=\"_tree\"\r\n (clickMenuOption)=\"ClickMenuOption($event)\"\r\n ></coer-menu-option>\r\n </ng-template>\r\n\r\n <div class=\"separator\"></div>\r\n </div>\r\n </mat-expansion-panel>\r\n</mat-accordion>", styles: ["mat-accordion.coer-tree-accordion div,mat-accordion.coer-tree-accordion span{font-size:16px!important;font-family:sans-serif!important;font-weight:700}mat-accordion.coer-tree-accordion mat-expansion-panel{background-color:var(--black)!important;box-shadow:none!important;border-radius:0!important}mat-accordion.coer-tree-accordion mat-expansion-panel div.mat-expansion-panel-body{padding:0!important}mat-accordion.coer-tree-accordion mat-expansion-panel div.separator{border:.5px solid rgba(245,245,245,.041)!important}mat-accordion.coer-tree-accordion mat-expansion-panel span::selection{background-color:transparent!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header{padding:0 10px;height:48px!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-expansion-indicator{width:10px!important;margin-left:15px!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-expansion-indicator:after{color:var(--white)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header mat-panel-description{margin-right:0!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header mat-panel-description span.icon-container{height:48px!important;min-width:20px!important;max-width:20px!important;display:flex!important;align-items:center!important;justify-content:center!important;color:var(--white)}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header mat-panel-description span.label-container{height:48px!important;margin-left:10px!important;display:flex!important;align-items:center!important;color:var(--white)}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.text-orange span.mat-expansion-indicator:after{color:var(--orange)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header:not(.background-orange):hover{background-color:#2f2f2f!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i2.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: CoerMenuOption, selector: "coer-menu-option", inputs: ["level", "label", "icon", "path", "tree"], outputs: ["clickMenuOption"] }, { kind: "component", type: CoerTreeAccordion, selector: "coer-tree-accordion", inputs: ["level", "item", "tree"], outputs: ["clickMenuOption", "clickMenu"] }] }); }
|
|
2693
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CoerTreeAccordion, selector: "coer-tree-accordion", inputs: { level: "level", item: "item", tree: "tree" }, outputs: { clickMenuOption: "clickMenuOption", clickMenu: "clickMenu" }, viewQueries: [{ propertyName: "expansionPanel", first: true, predicate: ["expansionPanel"], descendants: true }, { propertyName: "menuList", predicate: CoerTreeAccordion, descendants: true }], ngImport: i0, template: "<mat-accordion class=\"coer-tree-accordion\">\r\n <mat-expansion-panel #expansionPanel [class]=\"'coer-tree-accordion-' + identityClass\">\r\n\r\n <!-- Header -->\r\n <mat-expansion-panel-header (click)=\"Toggle()\"\r\n [class]=\"identityClass\"\r\n [ngClass]=\"{\r\n 'background-orange': (isExpanded && level == 1),\r\n 'text-orange': IsActive(iconContainer)\r\n }\">\r\n <mat-panel-description>\r\n <span #iconContainer\r\n [ngStyle]=\"{ 'margin-left': marginLeft }\"\r\n [class]=\"identityClass\"\r\n [ngClass]=\"{\r\n 'icon-container': true,\r\n 'text-orange': IsActive(iconContainer)\r\n }\"> <i [class]=\"_icon\"></i> </span>\r\n\r\n <span #labelContainer\r\n [class]=\"identityClass\"\r\n [ngClass]=\"{\r\n 'label-container': true,\r\n 'text-orange': IsActive(labelContainer)\r\n }\"> {{ item.label }} </span>\r\n </mat-panel-description>\r\n </mat-expansion-panel-header>\r\n\r\n\r\n <div *ngFor=\"let subItem of item.items\">\r\n <!-- Sub Menu -->\r\n <div *ngIf=\"IsMenu(subItem); else isOption\">\r\n <coer-tree-accordion\r\n [level]=\"level + 1\"\r\n [item]=\"subItem\"\r\n [tree]=\"_tree\"\r\n (clickMenuOption)=\"ClickMenuOption($event)\"\r\n (clickMenu)=\"ClickMenu($event)\"\r\n ></coer-tree-accordion>\r\n </div>\r\n\r\n <!-- Option Menu -->\r\n <ng-template #isOption>\r\n <coer-menu-option\r\n [label]=\"subItem.label\"\r\n [icon]=\"subItem?.icon\"\r\n [path]=\"subItem?.path\"\r\n [level]=\"level + 1\"\r\n [tree]=\"_tree\"\r\n (clickMenuOption)=\"ClickMenuOption($event)\"\r\n ></coer-menu-option>\r\n </ng-template>\r\n\r\n <div class=\"separator\"></div>\r\n </div>\r\n </mat-expansion-panel>\r\n</mat-accordion>", styles: ["mat-accordion.coer-tree-accordion div,mat-accordion.coer-tree-accordion span{font-size:16px!important;font-family:sans-serif!important;font-weight:700}mat-accordion.coer-tree-accordion mat-expansion-panel{background-color:var(--black)!important;box-shadow:none!important;border-radius:0!important}mat-accordion.coer-tree-accordion mat-expansion-panel div.mat-expansion-panel-body{padding:0!important}mat-accordion.coer-tree-accordion mat-expansion-panel div.separator{border:.5px solid rgba(245,245,245,.041)!important}mat-accordion.coer-tree-accordion mat-expansion-panel span::selection{background-color:transparent!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header{padding:0 10px;height:48px!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-expansion-indicator{width:10px!important;margin-left:15px!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-expansion-indicator:after{color:var(--white)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header mat-panel-description{margin-right:0!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header mat-panel-description span.icon-container{height:48px!important;min-width:20px!important;max-width:20px!important;display:flex!important;align-items:center!important;justify-content:center!important;color:var(--white)}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header mat-panel-description span.label-container{height:48px!important;margin-left:10px!important;display:flex!important;align-items:center!important;color:var(--white)}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.text-orange span.mat-expansion-indicator:after{color:var(--orange)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header:not(.background-orange):hover{background-color:#2f2f2f!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i2.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: CoerMenuOption, selector: "coer-menu-option", inputs: ["level", "label", "icon", "path", "tree"], outputs: ["clickMenuOption"] }, { kind: "component", type: CoerTreeAccordion, selector: "coer-tree-accordion", inputs: ["level", "item", "tree"], outputs: ["clickMenuOption", "clickMenu"] }] }); }
|
|
2693
2694
|
}
|
|
2694
2695
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CoerTreeAccordion, decorators: [{
|
|
2695
2696
|
type: Component,
|
|
2696
|
-
args: [{ selector: 'coer-tree-accordion', template: "<mat-accordion class=\"coer-tree-accordion\">\r\n <mat-expansion-panel #expansionPanel>\r\n\r\n <!-- Header -->\r\n <mat-expansion-panel-header (click)=\"Toggle()\"\r\n [class]=\"identityClass\"\r\n [ngClass]=\"{\r\n 'background-orange': (isExpanded && level == 1),\r\n 'text-orange': IsActive(iconContainer)\r\n }\">\r\n <mat-panel-description>\r\n <span #iconContainer\r\n [ngStyle]=\"{ 'margin-left': marginLeft }\"\r\n [class]=\"identityClass\"\r\n [ngClass]=\"{\r\n 'icon-container': true,\r\n 'text-orange': IsActive(iconContainer)\r\n }\"> <i [class]=\"_icon\"></i> </span>\r\n\r\n <span #labelContainer\r\n [class]=\"identityClass\"\r\n [ngClass]=\"{\r\n 'label-container': true,\r\n 'text-orange': IsActive(labelContainer)\r\n }\"> {{ item.label }} </span>\r\n </mat-panel-description>\r\n </mat-expansion-panel-header>\r\n\r\n\r\n <div *ngFor=\"let subItem of item.items\">\r\n <!-- Sub Menu -->\r\n <div *ngIf=\"IsMenu(subItem); else isOption\">\r\n <coer-tree-accordion\r\n [level]=\"level + 1\"\r\n [item]=\"subItem\"\r\n [tree]=\"_tree\"\r\n (clickMenuOption)=\"ClickMenuOption($event)\"\r\n (clickMenu)=\"ClickMenu($event)\"\r\n ></coer-tree-accordion>\r\n </div>\r\n\r\n <!-- Option Menu -->\r\n <ng-template #isOption>\r\n <coer-menu-option\r\n [label]=\"subItem.label\"\r\n [icon]=\"subItem?.icon\"\r\n [path]=\"subItem?.path\"\r\n [level]=\"level + 1\"\r\n [tree]=\"_tree\"\r\n (clickMenuOption)=\"ClickMenuOption($event)\"\r\n ></coer-menu-option>\r\n </ng-template>\r\n\r\n <div class=\"separator\"></div>\r\n </div>\r\n </mat-expansion-panel>\r\n</mat-accordion>", styles: ["mat-accordion.coer-tree-accordion div,mat-accordion.coer-tree-accordion span{font-size:16px!important;font-family:sans-serif!important;font-weight:700}mat-accordion.coer-tree-accordion mat-expansion-panel{background-color:var(--black)!important;box-shadow:none!important;border-radius:0!important}mat-accordion.coer-tree-accordion mat-expansion-panel div.mat-expansion-panel-body{padding:0!important}mat-accordion.coer-tree-accordion mat-expansion-panel div.separator{border:.5px solid rgba(245,245,245,.041)!important}mat-accordion.coer-tree-accordion mat-expansion-panel span::selection{background-color:transparent!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header{padding:0 10px;height:48px!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-expansion-indicator{width:10px!important;margin-left:15px!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-expansion-indicator:after{color:var(--white)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header mat-panel-description{margin-right:0!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header mat-panel-description span.icon-container{height:48px!important;min-width:20px!important;max-width:20px!important;display:flex!important;align-items:center!important;justify-content:center!important;color:var(--white)}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header mat-panel-description span.label-container{height:48px!important;margin-left:10px!important;display:flex!important;align-items:center!important;color:var(--white)}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.text-orange span.mat-expansion-indicator:after{color:var(--orange)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header:not(.background-orange):hover{background-color:#2f2f2f!important}\n"] }]
|
|
2697
|
+
args: [{ selector: 'coer-tree-accordion', template: "<mat-accordion class=\"coer-tree-accordion\">\r\n <mat-expansion-panel #expansionPanel [class]=\"'coer-tree-accordion-' + identityClass\">\r\n\r\n <!-- Header -->\r\n <mat-expansion-panel-header (click)=\"Toggle()\"\r\n [class]=\"identityClass\"\r\n [ngClass]=\"{\r\n 'background-orange': (isExpanded && level == 1),\r\n 'text-orange': IsActive(iconContainer)\r\n }\">\r\n <mat-panel-description>\r\n <span #iconContainer\r\n [ngStyle]=\"{ 'margin-left': marginLeft }\"\r\n [class]=\"identityClass\"\r\n [ngClass]=\"{\r\n 'icon-container': true,\r\n 'text-orange': IsActive(iconContainer)\r\n }\"> <i [class]=\"_icon\"></i> </span>\r\n\r\n <span #labelContainer\r\n [class]=\"identityClass\"\r\n [ngClass]=\"{\r\n 'label-container': true,\r\n 'text-orange': IsActive(labelContainer)\r\n }\"> {{ item.label }} </span>\r\n </mat-panel-description>\r\n </mat-expansion-panel-header>\r\n\r\n\r\n <div *ngFor=\"let subItem of item.items\">\r\n <!-- Sub Menu -->\r\n <div *ngIf=\"IsMenu(subItem); else isOption\">\r\n <coer-tree-accordion\r\n [level]=\"level + 1\"\r\n [item]=\"subItem\"\r\n [tree]=\"_tree\"\r\n (clickMenuOption)=\"ClickMenuOption($event)\"\r\n (clickMenu)=\"ClickMenu($event)\"\r\n ></coer-tree-accordion>\r\n </div>\r\n\r\n <!-- Option Menu -->\r\n <ng-template #isOption>\r\n <coer-menu-option\r\n [label]=\"subItem.label\"\r\n [icon]=\"subItem?.icon\"\r\n [path]=\"subItem?.path\"\r\n [level]=\"level + 1\"\r\n [tree]=\"_tree\"\r\n (clickMenuOption)=\"ClickMenuOption($event)\"\r\n ></coer-menu-option>\r\n </ng-template>\r\n\r\n <div class=\"separator\"></div>\r\n </div>\r\n </mat-expansion-panel>\r\n</mat-accordion>", styles: ["mat-accordion.coer-tree-accordion div,mat-accordion.coer-tree-accordion span{font-size:16px!important;font-family:sans-serif!important;font-weight:700}mat-accordion.coer-tree-accordion mat-expansion-panel{background-color:var(--black)!important;box-shadow:none!important;border-radius:0!important}mat-accordion.coer-tree-accordion mat-expansion-panel div.mat-expansion-panel-body{padding:0!important}mat-accordion.coer-tree-accordion mat-expansion-panel div.separator{border:.5px solid rgba(245,245,245,.041)!important}mat-accordion.coer-tree-accordion mat-expansion-panel span::selection{background-color:transparent!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header{padding:0 10px;height:48px!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-expansion-indicator{width:10px!important;margin-left:15px!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-expansion-indicator:after{color:var(--white)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header mat-panel-description{margin-right:0!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header mat-panel-description span.icon-container{height:48px!important;min-width:20px!important;max-width:20px!important;display:flex!important;align-items:center!important;justify-content:center!important;color:var(--white)}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header mat-panel-description span.label-container{height:48px!important;margin-left:10px!important;display:flex!important;align-items:center!important;color:var(--white)}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.text-orange span.mat-expansion-indicator:after{color:var(--orange)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header:not(.background-orange):hover{background-color:#2f2f2f!important}\n"] }]
|
|
2697
2698
|
}], propDecorators: { expansionPanel: [{
|
|
2698
2699
|
type: ViewChild,
|
|
2699
2700
|
args: ['expansionPanel']
|
|
@@ -2763,10 +2764,6 @@ class CoerSidenav {
|
|
|
2763
2764
|
}
|
|
2764
2765
|
});
|
|
2765
2766
|
}
|
|
2766
|
-
ngAfterViewInit() {
|
|
2767
|
-
Tools.Sleep().then(_ => {
|
|
2768
|
-
});
|
|
2769
|
-
}
|
|
2770
2767
|
/** */
|
|
2771
2768
|
NavigateTo(selectedOption) {
|
|
2772
2769
|
let url = `${selectedOption.path}`;
|