coer-elements 2.0.27 → 2.0.29
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/components/lib/coer-button/coer-button.component.d.ts +3 -1
- package/components/lib/coer-datebox/coer-datebox.component.d.ts +1 -1
- package/components/lib/coer-numberbox/coer-numberbox.component.d.ts +1 -1
- package/components/lib/coer-page-title/coer-page-title.component.d.ts +4 -0
- package/components/lib/coer-secretbox/coer-secretbox.component.d.ts +1 -1
- package/components/lib/coer-sidenav/coer-toolbar/coer-toolbar.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/fesm2022/coer-elements-components.mjs +29 -15
- package/fesm2022/coer-elements-components.mjs.map +1 -1
- package/fesm2022/coer-elements-pages.mjs +28 -26
- package/fesm2022/coer-elements-pages.mjs.map +1 -1
- package/fesm2022/coer-elements-tools.mjs +3 -3
- package/fesm2022/coer-elements-tools.mjs.map +1 -1
- package/package.json +1 -1
- package/pages/lib/coer-system/login/login.component.d.ts +5 -7
- package/styles/coer-elements.css +1 -1
- package/styles/containers.scss +1 -1
- package/styles/index.scss +24 -21
|
@@ -33,7 +33,7 @@ import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
|
|
33
33
|
import * as i3$3 from '@angular/material/tabs';
|
|
34
34
|
import { MatTabsModule } from '@angular/material/tabs';
|
|
35
35
|
import { MatTimepickerModule } from '@angular/material/timepicker';
|
|
36
|
-
import * as
|
|
36
|
+
import * as i3$4 from '@angular/material/toolbar';
|
|
37
37
|
import { MatToolbarModule } from '@angular/material/toolbar';
|
|
38
38
|
import * as i4 from '@angular/material/tooltip';
|
|
39
39
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
@@ -224,6 +224,13 @@ class CoerButton {
|
|
|
224
224
|
this.Blur();
|
|
225
225
|
}
|
|
226
226
|
/** */
|
|
227
|
+
Click(timeout = 0) {
|
|
228
|
+
Tools.Sleep(timeout).then(() => {
|
|
229
|
+
if (this._isEnable())
|
|
230
|
+
this.onClick.emit();
|
|
231
|
+
});
|
|
232
|
+
}
|
|
233
|
+
/** */
|
|
227
234
|
Focus(timeout = 0) {
|
|
228
235
|
Tools.Sleep(timeout).then(() => {
|
|
229
236
|
if (this._isEnable())
|
|
@@ -610,11 +617,11 @@ class CoerModal {
|
|
|
610
617
|
}
|
|
611
618
|
}
|
|
612
619
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerModal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
613
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerModal, isStandalone: false, selector: "coer-modal", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOpen: "onOpen", onClose: "onClose" }, queries: [{ propertyName: "contentRef", predicate: CoerRefDirective }], ngImport: i0, template: "<aside title='' [id]=\"_id\" class=\"modal fade\" data-bs-backdrop=\"static\" tabindex=\"-1\">\r\n <div class=\"modal-dialog modal-dialog-centered modal-dialog-scrollable\" [ngStyle]=\"{ 'max-width': _width }\">\r\n <div class=\"modal-content\">\r\n @if(IsNull(_header()) || (IsNotNull(_header()) && _header()?.show())) {\r\n <header class=\"modal-header\">\r\n <h6 class=\"modal-title\">\r\n <i [class]=\"_icon()\"></i>\r\n <span [ngClass]=\"{ 'ms-1': _icon().length > 0 }\"> {{ _title() }} </span>\r\n </h6>\r\n\r\n @if(showCloseButton()) {\r\n <button [id]=\"_id + '-button-close'\" type=\"button\" class=\"btn-close\" (click)=\"Close()\"></button>\r\n }\r\n </header>\r\n }\r\n\r\n <section class=\"modal-body\" [ngStyle]=\"{\r\n 'height': height(),\r\n 'max-height': maxHeight(),\r\n 'overflow': maxHeight() === '' ? 'visible' : 'auto'\r\n }\">\r\n @if(IsNotNull(_body()) && _body()?.show()) {\r\n <ng-container [ngTemplateOutlet]=\"_body()!.template\"></ng-container>\r\n }\r\n\r\n @else {\r\n <ng-content></ng-content>\r\n }\r\n </section>\r\n\r\n @if(IsNotNull(_footer())) {\r\n <footer class=\"modal-footer\">\r\n @if(_footer()?.show()) {\r\n <ng-container [ngTemplateOutlet]=\"_footer()!.template\"></ng-container>\r\n }\r\n </footer>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n</aside>", styles: [".modal-dialog{margin:auto!important;height:100vh}.modal-header{padding:8px 16px!important}.modal-title{font-weight:700!important;font-size:17px!important}.modal-body{padding-top:16px!important;padding-bottom:0!important;min-width:60px!important}div.coer-filebox .modal-body{padding:0!important}.modal-footer{border:none!important;display:flex!important;align-items:flex-end!important;justify-content:flex-end!important;max-height:64px!important;min-height:64px!important;gap:10px!important}.btn-close:focus{box-shadow:none!important}div.modal-backdrop{z-index:0!important}aside.modal div.backdrop{width:100vw;height:100vh;position:fixed;top:0;left:0;background-color:#0000005b;z-index:1500}div.modal-content{z-index:1501;overflow:auto!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
620
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerModal, isStandalone: false, selector: "coer-modal", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOpen: "onOpen", onClose: "onClose" }, queries: [{ propertyName: "contentRef", predicate: CoerRefDirective }], ngImport: i0, template: "<aside title='' [id]=\"_id\" class=\"modal fade\" data-bs-backdrop=\"static\" tabindex=\"-1\">\r\n <div class=\"modal-dialog modal-dialog-centered modal-dialog-scrollable\" [ngStyle]=\"{ 'max-width': _width }\">\r\n <div class=\"modal-content\">\r\n @if(IsNull(_header()) || (IsNotNull(_header()) && _header()?.show())) {\r\n <header class=\"modal-header\">\r\n <h6 class=\"modal-title\">\r\n <i [class]=\"_icon()\"></i>\r\n <span [ngClass]=\"{ 'ms-1': _icon().length > 0 }\"> {{ _title() }} </span>\r\n </h6>\r\n\r\n @if(showCloseButton()) {\r\n <button [id]=\"_id + '-button-close'\" type=\"button\" class=\"btn-close\" (click)=\"Close()\"></button>\r\n }\r\n </header>\r\n }\r\n\r\n <section class=\"modal-body\" [ngStyle]=\"{\r\n 'height': height(),\r\n 'max-height': maxHeight(),\r\n 'overflow': maxHeight() === '' ? 'visible' : 'auto'\r\n }\">\r\n @if(IsNotNull(_body()) && _body()?.show()) {\r\n <ng-container [ngTemplateOutlet]=\"_body()!.template\"></ng-container>\r\n }\r\n\r\n @else {\r\n <ng-content></ng-content>\r\n }\r\n </section>\r\n\r\n @if(IsNotNull(_footer())) {\r\n <footer class=\"modal-footer\">\r\n @if(_footer()?.show()) {\r\n <ng-container [ngTemplateOutlet]=\"_footer()!.template\"></ng-container>\r\n }\r\n </footer>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n</aside>", styles: [".modal-dialog{margin:auto!important;height:100vh}.modal-header{padding:8px 16px!important}.modal-title{font-weight:700!important;font-size:17px!important}.modal-body{padding-top:16px!important;padding-bottom:0!important;min-width:60px!important}div.coer-filebox .modal-body{padding:0!important}.modal-footer{border:none!important;display:flex!important;align-items:flex-end!important;justify-content:flex-end!important;max-height:64px!important;min-height:64px!important;gap:10px!important}.btn-close:focus{box-shadow:none!important}div.modal-backdrop{z-index:0!important}aside.modal div.backdrop{width:100vw;height:100vh;position:fixed;top:0;left:0;background-color:#0000005b;z-index:1500}div.modal-content{z-index:1501;overflow:auto!important;margin:15px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
614
621
|
}
|
|
615
622
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerModal, decorators: [{
|
|
616
623
|
type: Component,
|
|
617
|
-
args: [{ selector: 'coer-modal', standalone: false, template: "<aside title='' [id]=\"_id\" class=\"modal fade\" data-bs-backdrop=\"static\" tabindex=\"-1\">\r\n <div class=\"modal-dialog modal-dialog-centered modal-dialog-scrollable\" [ngStyle]=\"{ 'max-width': _width }\">\r\n <div class=\"modal-content\">\r\n @if(IsNull(_header()) || (IsNotNull(_header()) && _header()?.show())) {\r\n <header class=\"modal-header\">\r\n <h6 class=\"modal-title\">\r\n <i [class]=\"_icon()\"></i>\r\n <span [ngClass]=\"{ 'ms-1': _icon().length > 0 }\"> {{ _title() }} </span>\r\n </h6>\r\n\r\n @if(showCloseButton()) {\r\n <button [id]=\"_id + '-button-close'\" type=\"button\" class=\"btn-close\" (click)=\"Close()\"></button>\r\n }\r\n </header>\r\n }\r\n\r\n <section class=\"modal-body\" [ngStyle]=\"{\r\n 'height': height(),\r\n 'max-height': maxHeight(),\r\n 'overflow': maxHeight() === '' ? 'visible' : 'auto'\r\n }\">\r\n @if(IsNotNull(_body()) && _body()?.show()) {\r\n <ng-container [ngTemplateOutlet]=\"_body()!.template\"></ng-container>\r\n }\r\n\r\n @else {\r\n <ng-content></ng-content>\r\n }\r\n </section>\r\n\r\n @if(IsNotNull(_footer())) {\r\n <footer class=\"modal-footer\">\r\n @if(_footer()?.show()) {\r\n <ng-container [ngTemplateOutlet]=\"_footer()!.template\"></ng-container>\r\n }\r\n </footer>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n</aside>", styles: [".modal-dialog{margin:auto!important;height:100vh}.modal-header{padding:8px 16px!important}.modal-title{font-weight:700!important;font-size:17px!important}.modal-body{padding-top:16px!important;padding-bottom:0!important;min-width:60px!important}div.coer-filebox .modal-body{padding:0!important}.modal-footer{border:none!important;display:flex!important;align-items:flex-end!important;justify-content:flex-end!important;max-height:64px!important;min-height:64px!important;gap:10px!important}.btn-close:focus{box-shadow:none!important}div.modal-backdrop{z-index:0!important}aside.modal div.backdrop{width:100vw;height:100vh;position:fixed;top:0;left:0;background-color:#0000005b;z-index:1500}div.modal-content{z-index:1501;overflow:auto!important}\n"] }]
|
|
624
|
+
args: [{ selector: 'coer-modal', standalone: false, template: "<aside title='' [id]=\"_id\" class=\"modal fade\" data-bs-backdrop=\"static\" tabindex=\"-1\">\r\n <div class=\"modal-dialog modal-dialog-centered modal-dialog-scrollable\" [ngStyle]=\"{ 'max-width': _width }\">\r\n <div class=\"modal-content\">\r\n @if(IsNull(_header()) || (IsNotNull(_header()) && _header()?.show())) {\r\n <header class=\"modal-header\">\r\n <h6 class=\"modal-title\">\r\n <i [class]=\"_icon()\"></i>\r\n <span [ngClass]=\"{ 'ms-1': _icon().length > 0 }\"> {{ _title() }} </span>\r\n </h6>\r\n\r\n @if(showCloseButton()) {\r\n <button [id]=\"_id + '-button-close'\" type=\"button\" class=\"btn-close\" (click)=\"Close()\"></button>\r\n }\r\n </header>\r\n }\r\n\r\n <section class=\"modal-body\" [ngStyle]=\"{\r\n 'height': height(),\r\n 'max-height': maxHeight(),\r\n 'overflow': maxHeight() === '' ? 'visible' : 'auto'\r\n }\">\r\n @if(IsNotNull(_body()) && _body()?.show()) {\r\n <ng-container [ngTemplateOutlet]=\"_body()!.template\"></ng-container>\r\n }\r\n\r\n @else {\r\n <ng-content></ng-content>\r\n }\r\n </section>\r\n\r\n @if(IsNotNull(_footer())) {\r\n <footer class=\"modal-footer\">\r\n @if(_footer()?.show()) {\r\n <ng-container [ngTemplateOutlet]=\"_footer()!.template\"></ng-container>\r\n }\r\n </footer>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n</aside>", styles: [".modal-dialog{margin:auto!important;height:100vh}.modal-header{padding:8px 16px!important}.modal-title{font-weight:700!important;font-size:17px!important}.modal-body{padding-top:16px!important;padding-bottom:0!important;min-width:60px!important}div.coer-filebox .modal-body{padding:0!important}.modal-footer{border:none!important;display:flex!important;align-items:flex-end!important;justify-content:flex-end!important;max-height:64px!important;min-height:64px!important;gap:10px!important}.btn-close:focus{box-shadow:none!important}div.modal-backdrop{z-index:0!important}aside.modal div.backdrop{width:100vw;height:100vh;position:fixed;top:0;left:0;background-color:#0000005b;z-index:1500}div.modal-content{z-index:1501;overflow:auto!important;margin:15px!important}\n"] }]
|
|
618
625
|
}], propDecorators: { contentRef: [{
|
|
619
626
|
type: ContentChildren,
|
|
620
627
|
args: [CoerRefDirective]
|
|
@@ -2793,11 +2800,11 @@ class CoerGrid extends CoerGridExtension {
|
|
|
2793
2800
|
}
|
|
2794
2801
|
}
|
|
2795
2802
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerGrid, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2796
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerGrid, isStandalone: false, selector: "coer-grid", providers: [CONTROL_VALUE(CoerGrid)], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-grid\" [ngStyle]=\"{ 'width': width(), 'min-Width': MinWidth(), 'max-Width': MaxWidth(), 'margin': margin() }\">\r\n <header [id]=\"_id + '-header'\" class=\"row\">\r\n <!-- Slot -->\r\n <ng-content></ng-content>\r\n\r\n <!-- Export Button -->\r\n @if(exportButton.show && gridLength().dataSource > 0) {\r\n <div class=\"col-auto\">\r\n <coer-button\r\n type=\"icon\"\r\n [color]=\"_ColorButton(exportButton)\"\r\n icon=\"excel\"\r\n [tooltip]=\"_isLoading() ? 'Loading' : (exportButton.tooltip || 'Export')\"\r\n [path]=\"(exportButton && exportButton.path) ? exportButton.path : []\"\r\n [isDisabled]=\"_isDisabled() || _isLoading() || (exportButton.isDisabled || false)\"\r\n [isLoading]=\"_isLoading()\" \r\n (onClick)=\"_Export(!exportButton.preventDefault)\"\r\n ></coer-button>\r\n </div>\r\n }\r\n\r\n <!-- Import Button -->\r\n @if(importButton.show && !isReadonly()) {\r\n <div class=\"col-auto\">\r\n <input type=\"file\" #inputFileRef [multiple]=\"false\" (change)=\"_Import($event)\">\r\n\r\n <coer-button\r\n type=\"icon\"\r\n color=\"primary\"\r\n [color]=\"_ColorButton(importButton)\"\r\n [tooltip]=\"importButton.tooltip || 'Import'\"\r\n [path]=\"(importButton && importButton.path) ? importButton.path : []\"\r\n [isDisabled]=\"importButton.isDisabled || false\" \r\n (onClick)=\"_Import()\"\r\n ></coer-button>\r\n </div>\r\n }\r\n\r\n <!-- Add Button -->\r\n @if(addButton.show && !isReadonly()) {\r\n <div class=\"col-auto\">\r\n <coer-button\r\n type=\"icon\"\r\n [color]=\"_ColorButton(addButton)\"\r\n icon=\"new\"\r\n [tooltip]=\"addButton.tooltip || 'New'\"\r\n [path]=\"(addButton && addButton.path) ? addButton.path : []\"\r\n [isDisabled]=\"addButton.isDisabled || false\" \r\n (onClick)=\"onClickAdd.emit()\"\r\n ></coer-button>\r\n </div>\r\n }\r\n\r\n <!-- Save Button -->\r\n @if(saveButton.show && !isReadonly()) {\r\n <div class=\"col-auto\">\r\n <coer-button\r\n type=\"icon\"\r\n [color]=\"_ColorButton(saveButton)\"\r\n icon=\"save\"\r\n [tooltip]=\"saveButton.tooltip || 'Save'\"\r\n [path]=\"(saveButton && saveButton.path) ? saveButton.path : []\"\r\n [isDisabled]=\"saveButton.isDisabled || false\" \r\n (onClick)=\"onClickSave.emit()\"\r\n ></coer-button>\r\n </div>\r\n }\r\n\r\n <!-- Search -->\r\n @if(search.show) {\r\n <div class=\"col-auto\">\r\n <coer-textbox\r\n #inputSearch\r\n [id]=\"_GetId(-1, -1, 'search')\"\r\n [ngModel]=\"_gridSearch()\"\r\n placeholder=\"Search\"\r\n [isDisabled]=\"_isDisabled() || _isLoading()\"\r\n [selectOnFocus]=\"true\"\r\n width=\"250px\"\r\n [showSearchIcon]=\"true\"\r\n [showClearIcon]=\"true\"\r\n (onInput)=\"_InputChange(-1, 'Search', $event, 'coer-textbox-search')\"\r\n (onClickClear)=\"_InputChange(-1, 'Search', '', 'coer-textbox-search')\"\r\n (onKeyupEnter)=\"_KeyupEnter(-1, { indexRow: -1 }, 'coer-textbox-search', $event);\"\r\n ></coer-textbox>\r\n </div>\r\n }\r\n </header>\r\n\r\n <section [ngClass]=\"{ 'grid-container': true, 'invisible': isInvisible() }\"> \r\n <div #innerContainer [ngStyle]=\"{ 'height': _height, 'min-height': minHeight(), 'max-height': maxHeight() }\"> \r\n @if(!_isDisabled() && gridLength().dataSource <= 0 && !isLoading()) {\r\n <div class=\"no-data\"> No Data </div>\r\n }\r\n \r\n @if(!isLoading()) {\r\n <table class=\"table table-sm table-responsive table-striped\">\r\n <thead>\r\n <tr>\r\n @if(checkbox.show && gridLength().dataSource > 0) {\r\n <!-- CheckBox Column -->\r\n <th scope=\"col\" class=\"check-box\">\r\n <div *ngIf=\"!_onlyOneCheck\" [ngClass]=\"{ 'invisible': _isLoadingMessage }\">\r\n <coer-checkbox\r\n [id]=\"_GetId(0, 0, 'checkboxAll')\"\r\n [ignoreDataBinding]=\"true\"\r\n [isDisabled]=\"_isDisabled() || _isLoading()\"\r\n (onChange)=\"_ClickCheck(_GetId(0, 0, 'checkboxAll'), $event, true)\"\r\n ></coer-checkbox>\r\n </div>\r\n </th>\r\n }\r\n \r\n <!-- Dynamic Grid Column -->\r\n @for(header of _gridColumns(); track header.indexColumn) {\r\n <th scope=\"col\" (dblclick)=\"Sort(header.columnName)\"\r\n [ngClass]=\"{\r\n 'no-selection': true,\r\n 'cursor-default': !enableSort() && !_isLoading(),\r\n 'cursor-pointer': enableSort() && !_isLoading(),\r\n 'cursor-wait': _isLoading()\r\n }\"\r\n [ngStyle]=\"{\r\n 'width': header.width,\r\n 'text-align': _GetAttribute(header.columnName, null, 'textAlign', 'defaul-cell')\r\n }\">\r\n <div class=\"no-selection d-flex align-items-center\">\r\n <span class=\"me-1\"> {{ _GetColumnName(header.columnName) }} </span>\r\n <i [class]=\"_GetShortIcon(header.columnName)\"></i> \r\n <i [class]=\"_GetSearchIcon(header.columnName)\"></i>\r\n </div>\r\n </th>\r\n }\r\n \r\n <!-- Delete Button Column -->\r\n @if(_ButtonByRow('showDeleteButton')) {\r\n <th scope=\"col\" class=\"action-button\"></th>\r\n }\r\n \r\n <!-- Edit Button Column -->\r\n @if(_ButtonByRow('showEditButton')) {\r\n <th scope=\"col\" class=\"action-button\"></th>\r\n }\r\n \r\n <!-- Edit Button Column -->\r\n @if(_ButtonByRow('showGoButton')) {\r\n <th scope=\"col\" class=\"action-button\"></th>\r\n }\r\n </tr>\r\n </thead>\r\n \r\n <!-- body -->\r\n @for(group of _gridDataSource(); track group.indexGroup) {\r\n <tbody>\r\n <!--<tr v-if=\"_isGrouped\">\r\n <td :colspan=\"_colspan\" class=\"group\">\r\n <MesAccordion\r\n :ref=\"`accordion${group.indexGroup}-${id}`\"\r\n :title=\"`${_CleanHeaderName(groupBy)} (${group.length}): ${group.groupBy}`\"\r\n :isLoading=\"_isLoading()\"\r\n @expanded=\"_ToogleAccordion(group.groupBy, true, group.indexGroup)\"\r\n @collapsed=\"_ToogleAccordion(group.groupBy, false, group.indexGroup)\"\r\n ></MesAccordion>\r\n </td>\r\n </tr>-->\r\n \r\n @for(row of group.rows; track row.indexRow) {\r\n <tr [id]=\"_GetId(row.indexRow, 0, 'row')\"\r\n [ngClass]=\"{ 'loading': isLoading(), 'd-none': _HideRow(group), 'row-focus': (row.indexRow == _indexFocus() && enableRowFocus()) }\"\r\n (click)=\"_indexFocus.set(row.indexRow)\">\r\n \r\n @if(checkbox.show) {\r\n <!-- CheckBox Column -->\r\n <td class=\"check-box\">\r\n <div [ngClass]=\"{ 'invisible': _isLoadingMessage }\">\r\n <coer-checkbox\r\n [id]=\"_GetId(row.indexRow, 0, 'checkbox')\"\r\n [ignoreDataBinding]=\"true\"\r\n [isDisabled]=\"_isDisabled() || _isLoading()\"\r\n (onChange)=\"_ClickCheck(_GetId(row.indexRow, 0, 'checkbox'), $event, false, row)\"\r\n ></coer-checkbox>\r\n </div>\r\n \r\n <div [ngClass]=\"{ 'invisible': !_isLoadingMessage, 'spinner-border-container': true }\">\r\n <i class=\"spinner-border\"></i>\r\n </div>\r\n </td>\r\n }\r\n \r\n <!-- Dynamic Column -->\r\n @for(header of _gridColumns(); track header.indexColumn) {\r\n @if(_IsCellType(header.columnName, row, 'template')) {\r\n <td class=\"template\"\r\n (click)=\"_isDisabled() ? null : onClickRow.emit(row)\"\r\n (dblclick)=\"_isDisabled() ? null : onDoubleClickRow.emit(row)\">\r\n <div [innerHTML]=\"_GetAttribute(header.columnName, row, 'template', 'defaul-cell') | html\" class=\"template\"></div>\r\n </td>\r\n }\r\n \r\n @else if(_IsCellType(header.columnName, row, 'coerTextbox')) {\r\n <!-- coer-textbox -->\r\n <td class=\"coer-textbox\">\r\n <coer-textbox\r\n [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n [(ngModel)]=\"row[header.columnName]\"\r\n [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerTextbox') || _isDisabled() || _isLoading()\"\r\n [isValid]=\"_GetAttribute(header.columnName, row, 'isValid', 'coerTextbox') || false\"\r\n [isInvalid]=\"_GetAttribute(header.columnName, row, 'isInvalid', 'coerTextbox') || false\"\r\n [selectOnFocus]=\"_GetAttribute(header.columnName, row, 'selectOnFocus', 'coerTextbox') || true\"\r\n [placeholder]=\"_GetAttribute(header.columnName, row, 'placeholder', 'coerTextbox') || ('Type ' + header.columnName + '...')\"\r\n [textPosition]=\"_GetAttribute(header.columnName, row, 'textPosition', 'coerTextbox') || 'left'\"\r\n [minLength]=\"_GetAttribute(header.columnName, row, 'minLength', 'coerTextbox') || 0\"\r\n [maxLength]=\"_GetAttribute(header.columnName, row, 'maxLength', 'coerTextbox') || 50\"\r\n (onInput)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-textbox')\"\r\n (onKeyupEnter)=\"_KeyupEnter(header.indexColumn, row, 'coer-textbox', $event)\"\r\n ></coer-textbox>\r\n </td>\r\n }\r\n \r\n \r\n @else if(_IsCellType(header.columnName, row, 'coerNumberbox')) {\r\n <!-- coer-numberbox -->\r\n <td class=\"coer-numberbox\">\r\n <coer-numberbox\r\n [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n [(ngModel)]=\"row[header.columnName]\"\r\n [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerNumberbox') || _isDisabled() || _isLoading()\"\r\n [isValid]=\"_GetAttribute(header.columnName, row, 'isValid', 'coerNumberbox') || false\"\r\n [isInvalid]=\"_GetAttribute(header.columnName, row, 'isInvalid', 'coerNumberbox') || false\"\r\n [selectOnFocus]=\"_GetAttribute(header.columnName, row, 'selectOnFocus', 'coerNumberbox') || true\"\r\n [placeholder]=\"_GetAttribute(header.columnName, row, 'placeholder', 'coerNumberbox') || ''\"\r\n [textPosition]=\"_GetAttribute(header.columnName, row, 'textPosition', 'coerNumberbox') || 'right'\"\r\n [min]=\"_GetAttribute(header.columnName, row, 'min', 'coerNumberbox') || 0\"\r\n [max]=\"_GetAttribute(header.columnName, row, 'max', 'coerNumberbox') || 2147483647\"\r\n [decimals]=\"_GetAttribute(header.columnName, row, 'decimals', 'coerNumberbox') || 0\"\r\n (onInput)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-numberbox')\"\r\n (onKeyupEnter)=\"_KeyupEnter(header.indexColumn, row, 'coer-numberbox', $event)\"\r\n ></coer-numberbox>\r\n </td>\r\n }\r\n \r\n \r\n @else if(_IsCellType(header.columnName, row, 'coerSelectbox')) {\r\n <!-- coer-numberbox -->\r\n <td class=\"coer-selectbox\">\r\n <coer-selectbox\r\n [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n [(ngModel)]=\"row[header.columnName]\"\r\n [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerSelectbox') || _isDisabled() || _isLoading()\"\r\n [isValid]=\"_GetAttribute(header.columnName, row, 'isValid', 'coerSelectbox') || false\"\r\n [isInvalid]=\"_GetAttribute(header.columnName, row, 'isInvalid', 'coerSelectbox') || false\"\r\n [dataSource]=\"_GetAttribute(header.columnName, row, 'dataSource', 'coerSelectbox') || []\"\r\n [placeholder]=\"_GetAttribute(header.columnName, row, 'placeholder', 'coerSelectbox') || '-- Select --'\"\r\n [displayProperty]=\"_GetAttribute(header.columnName, row, 'displayProperty', 'coerSelectbox') || 'name'\"\r\n (onSelected)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-selectbox'); _KeyupEnter(header.indexColumn, row, 'coer-selectbox', $event)\"\r\n ></coer-selectbox>\r\n </td>\r\n }\r\n \r\n \r\n @else if(_IsCellType(header.columnName, row, 'coerSwitch')) {\r\n <!-- coer-switch -->\r\n <td>\r\n <coer-switch\r\n [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n [(ngModel)]=\"row[header.columnName]\"\r\n [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerSwitch') || _isDisabled() || _isLoading()\"\r\n [tooltip]=\"_GetAttribute(header.columnName, row, 'tooltip', 'coerSwitch')\"\r\n [tooltipPosition]=\"_GetAttribute(header.columnName, row, 'tooltipPosition', 'coerSwitch') || 'left'\"\r\n [isInvisible]=\"_isDisabled()\"\r\n (onChange)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-switch')\"\r\n ></coer-switch>\r\n </td>\r\n }\r\n \r\n @else {\r\n <!-- Default Cell -->\r\n <td class=\"default-cell\"\r\n (click)=\"_ClickOnRow(row)\"\r\n (dblclick)=\"_isDisabled() ? null : onDoubleClickRow.emit(row)\"\r\n [ngStyle]=\"{\r\n 'text-align': _GetAttribute(header.columnName, row, 'textAlign', 'defaul-cell'),\r\n 'white-space': 'normal'\r\n }\">\r\n \r\n <div [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n [ngClass]=\"{\r\n 'text-blue-bold': _IsCellColor(header.columnName, row, 'colorBlue'),\r\n 'text-green-bold': _IsCellColor(header.columnName, row, 'colorGreen'),\r\n 'text-yellow-bold': _IsCellColor(header.columnName, row, 'colorYellow'),\r\n 'text-red-bold': _IsCellColor(header.columnName, row, 'colorRed'),\r\n 'text-right-bold': _IsCellType(header.columnName, row, 'number')\r\n }\">\r\n \r\n @if(_IsCellType(header.columnName, row, 'number')) {\r\n <span> {{ GetNumericFormat(row[header.columnName]) }} </span>\r\n }\r\n \r\n @else if(_IsCellType(header.columnName, row, 'date')) {\r\n <span> {{ _GetDateFormat(row[header.columnName], _IsCellType(header.columnName, row, 'toLocalZone')) }} </span>\r\n }\r\n \r\n @else if(_IsCellType(header.columnName, row, 'date-time')) {\r\n <span> {{ _GetDateTimeFormat(row[header.columnName], _IsCellType(header.columnName, row, 'toLocalZone')) }} </span>\r\n }\r\n \r\n @else {\r\n <span> {{ _GetCellValue(row, header.columnName) }} </span>\r\n }\r\n </div>\r\n </td>\r\n }\r\n }\r\n \r\n <!-- Delete Button -->\r\n @if(_ButtonByRow('showDeleteButton')) {\r\n <td class=\"action-button\">\r\n @if(_ButtonByRow('showDeleteButton', row)) {\r\n <coer-button\r\n type=\"icon-no-border\"\r\n [color]=\"_ColorButtonByRow('deleteButtonColor')\"\r\n icon=\"delete\"\r\n [tooltip]=\"_GetTooltip('Delete', row)\"\r\n [isInvisible]=\"_isDisabled()\"\r\n [isReadonly]=\"isReadonly()\"\r\n [isDisabled]=\"_isLoading()\"\r\n (onClick)=\"onClickDeleteRow.emit(row)\"\r\n ></coer-button>\r\n }\r\n </td>\r\n }\r\n \r\n <!-- Edit Button -->\r\n @if(_ButtonByRow('showEditButton')) {\r\n <td class=\"action-button\">\r\n @if(_ButtonByRow('showEditButton', row)) {\r\n <coer-button\r\n type=\"icon-no-border\"\r\n [color]=\"_ColorButtonByRow('editButtonColor')\"\r\n icon=\"edit\"\r\n [tooltip]=\"_GetTooltip('Edit', row)\"\r\n [isInvisible]=\"_isDisabled()\"\r\n [isDisabled]=\"_isLoading()\"\r\n (onClick)=\"onClickEditRow.emit(row)\"\r\n ></coer-button>\r\n }\r\n </td>\r\n }\r\n \r\n <!-- GO Button -->\r\n @if(_ButtonByRow('showGoButton')) {\r\n <td class=\"action-button\">\r\n @if(_ButtonByRow('showGoButton', row)) {\r\n <coer-button\r\n type=\"icon-no-border\"\r\n [color]=\"_ColorButtonByRow('goButtonColor')\"\r\n icon=\"go\"\r\n [tooltip]=\"_GetTooltip('Go to', row, 'detail')\"\r\n [isInvisible]=\"_isDisabled()\"\r\n [isDisabled]=\"_isLoading()\"\r\n (onClick)=\"onClickGoRow.emit(row)\"\r\n ></coer-button>\r\n }\r\n </td>\r\n }\r\n </tr>\r\n }\r\n </tbody>\r\n }\r\n </table>\r\n }\r\n\r\n @else {\r\n <!-- Grid Message -->\r\n <div class=\"loading\" [ngStyle]=\"{ \r\n 'width': '100%', \r\n 'height': '100%',\r\n 'bottom': showFooter() ? '35px' : '10px'\r\n }\">\r\n <i class=\"spinner-border\"></i>\r\n <span class=\"fa-fade\">Loading</span>\r\n </div> \r\n }\r\n </div>\r\n </section>\r\n\r\n @if(showFooter()) {\r\n <footer class=\"grid-footer\">\r\n <span>\r\n @if(_isLoadingMessage) {\r\n <span class=\"fa-fade\"> Loading </span>\r\n }\r\n\r\n @else if(gridLength().dataSourceSelected > 0) {\r\n <span>\r\n <i class=\"bi bi-check2-square ms-1\"></i>\r\n {{ gridLength().dataSourceSelected }}\r\n </span>\r\n }\r\n </span>\r\n\r\n <span class=\"me-1\"> {{ gridLength().dataSourceFiltered | numericFormat }} Rows </span>\r\n </footer>\r\n }\r\n</div>", styles: ["div.coer-grid header{align-items:flex-end;justify-content:flex-end;padding-right:8px;margin:0}div.coer-grid header>div{padding:0 0 10px 10px;display:flex;align-items:baseline}div.coer-grid header>div a{height:40px!important}div.coer-grid table{table-layout:auto;border-collapse:separate;border-spacing:1px 0px;margin:0;font-size:14px}div.coer-grid table thead tr th{position:sticky!important;z-index:100!important;top:0!important;background-color:var(--gray)!important;color:var(--smoke)!important;padding:5px!important;vertical-align:middle!important;overflow:hidden;text-overflow:ellipsis;word-wrap:break-word;min-width:50px!important;white-space:nowrap!important}div.coer-grid table tbody{border:0px!important}div.coer-grid table tbody tr:not(.row-focus):hover td{color:#000!important;background-color:#f1f6ff}div.coer-grid table tbody tr td{border:0px!important;padding:5px!important;vertical-align:middle!important;white-space:break-spaces;text-overflow:ellipsis;overflow:hidden;min-height:31px!important}div.coer-grid table tbody tr.row-focus td{background-color:#cde1ff}div.coer-grid table tbody tr td.coer-textbox,div.coer-grid table tbody tr td.coer-numberbox,div.coer-grid table tbody tr td.coer-selectbox{padding:0!important;overflow:visible!important}div.coer-grid table tbody tr td.default-cell{cursor:pointer!important}div.coer-grid table thead tr th.action-button,div.coer-grid table thead tr td.action-button,div.coer-grid table thead tr th.check-box,div.coer-grid table thead tr td.check-box,div.coer-grid table tbody tr th.action-button,div.coer-grid table tbody tr td.action-button,div.coer-grid table tbody tr th.check-box table tbody tr td.check-box{text-align:center!important;cursor:default!important;min-width:40px!important;max-width:40px!important;width:40px!important;padding:0!important}div.coer-grid footer.grid-footer{display:flex;align-items:center;justify-content:space-between;font-size:small;color:#999;padding-top:5px}div.coer-grid section.grid-container{position:relative;overflow:auto}div.coer-grid div.loading,div.coer-grid div.no-data{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:25px;color:gray}div.coer-grid div.loading{background-color:#bbbbbb83!important;flex-direction:column!important;gap:10px!important;z-index:1}div.coer-grid div.loading span.fa-fade{position:relative!important;top:50px!important}div.coer-grid tr.loading{background-color:#bbbbbb83!important}div.coer-grid div.loading i.spinner-border{color:var(--primary-inner)!important;width:70px!important;height:70px!important;font-size:20px!important;position:absolute!important}div.coer-grid td.check-box div.spinner-border-container{position:absolute;transform:translate(7px,-19px)}div.coer-grid td.check-box div.spinner-border-container i.spinner-border{width:15px!important;height:15px!important;color:var(--primary-inner)!important}div.coer-grid table thead tr th.check-box>div,div.coer-grid table tbody tr td.check-box>div{display:flex;align-items:center;justify-content:center;cursor:default!important}div.coer-grid input.form-check-input{box-shadow:none!important;margin:0}div.coer-grid input[type=checkbox]{cursor:pointer!important}div.coer-grid td.group{padding:0!important;margin:0!important}div.coer-grid td.group>*{border-top:1px solid var(--gray)!important;border-bottom:1px solid var(--gray)!important;padding:0!important;margin:0!important}div.coer-grid .template,div.coer-grid .template div{white-space:nowrap!important;display:flex!important;align-items:center!important;cursor:pointer!important;gap:5px!important;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }, { kind: "component", type: CoerCheckbox, selector: "coer-checkbox", inputs: ["id", "label", "labelPosition", "isLoading", "isDisabled", "isReadonly", "isInvisible", "ignoreDataBinding", "value"], outputs: ["onChange"] }, { kind: "component", type: CoerNumberBox, selector: "coer-numberbox", inputs: ["id", "value", "label", "placeholder", "textPosition", "min", "max", "isInvalid", "isValid", "externalButton", "selectOnFocus", "decimals", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onKeyupEnter", "onInput", "onClickExternalButton"] }, { kind: "component", type: CoerSelectbox, selector: "coer-selectbox", inputs: ["id", "value", "label", "placeholder", "isInvalid", "isValid", "dataSource", "displayProperty", "rowsByPage", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onSelected", "onUnselect"] }, { kind: "component", type: CoerSwitch, selector: "coer-switch", inputs: ["id", "value", "label", "labelPosition", "isLoading", "isDisabled", "isReadonly", "isInvisible", "tooltip", "tooltipPosition"], outputs: ["onChange"] }, { kind: "component", type: CoerTextBox, selector: "coer-textbox", inputs: ["id", "value", "label", "placeholder", "textPosition", "minLength", "maxLength", "isInvalid", "isValid", "externalButton", "selectOnFocus", "showClearIcon", "showSearchIcon", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onKeyupEnter", "onInput", "onClickClear", "onClickSearch", "onClickExternalButton"] }, { kind: "pipe", type: i9.HtmlPipe, name: "html" }, { kind: "pipe", type: i9.NumericFormatPipe, name: "numericFormat" }] }); }
|
|
2803
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerGrid, isStandalone: false, selector: "coer-grid", providers: [CONTROL_VALUE(CoerGrid)], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-grid\" [ngStyle]=\"{ 'width': width(), 'min-Width': MinWidth(), 'max-Width': MaxWidth(), 'margin': margin() }\">\r\n <header [id]=\"_id + '-header'\" class=\"row\">\r\n <!-- Slot -->\r\n <ng-content></ng-content>\r\n\r\n <!-- Export Button -->\r\n @if(exportButton.show && gridLength().dataSource > 0) {\r\n <div class=\"col-auto\">\r\n <coer-button\r\n type=\"icon\"\r\n [color]=\"_ColorButton(exportButton)\"\r\n icon=\"excel\"\r\n [tooltip]=\"_isLoading() ? 'Loading' : (exportButton.tooltip || 'Export')\"\r\n [path]=\"(exportButton && exportButton.path) ? exportButton.path : []\"\r\n [isDisabled]=\"_isDisabled() || _isLoading() || (exportButton.isDisabled || false)\"\r\n [isLoading]=\"_isLoading()\" \r\n (onClick)=\"_Export(!exportButton.preventDefault)\"\r\n ></coer-button>\r\n </div>\r\n }\r\n\r\n <!-- Import Button -->\r\n @if(importButton.show && !isReadonly()) {\r\n <div class=\"col-auto\">\r\n <input type=\"file\" #inputFileRef [multiple]=\"false\" (change)=\"_Import($event)\">\r\n\r\n <coer-button\r\n type=\"icon\"\r\n color=\"primary\"\r\n [color]=\"_ColorButton(importButton)\"\r\n [tooltip]=\"importButton.tooltip || 'Import'\"\r\n [path]=\"(importButton && importButton.path) ? importButton.path : []\"\r\n [isDisabled]=\"importButton.isDisabled || false\" \r\n (onClick)=\"_Import()\"\r\n ></coer-button>\r\n </div>\r\n }\r\n\r\n <!-- Add Button -->\r\n @if(addButton.show && !isReadonly()) {\r\n <div class=\"col-auto\">\r\n <coer-button\r\n type=\"icon\"\r\n [color]=\"_ColorButton(addButton)\"\r\n icon=\"new\"\r\n [tooltip]=\"addButton.tooltip || 'New'\"\r\n [path]=\"(addButton && addButton.path) ? addButton.path : []\"\r\n [isDisabled]=\"addButton.isDisabled || false\" \r\n (onClick)=\"onClickAdd.emit()\"\r\n ></coer-button>\r\n </div>\r\n }\r\n\r\n <!-- Save Button -->\r\n @if(saveButton.show && !isReadonly()) {\r\n <div class=\"col-auto\">\r\n <coer-button\r\n type=\"icon\"\r\n [color]=\"_ColorButton(saveButton)\"\r\n icon=\"save\"\r\n [tooltip]=\"saveButton.tooltip || 'Save'\"\r\n [path]=\"(saveButton && saveButton.path) ? saveButton.path : []\"\r\n [isDisabled]=\"saveButton.isDisabled || false\" \r\n (onClick)=\"onClickSave.emit()\"\r\n ></coer-button>\r\n </div>\r\n }\r\n\r\n <!-- Search -->\r\n @if(search.show) {\r\n <div class=\"col-auto\">\r\n <coer-textbox\r\n #inputSearch\r\n [id]=\"_GetId(-1, -1, 'search')\"\r\n [ngModel]=\"_gridSearch()\"\r\n placeholder=\"Search\"\r\n [isDisabled]=\"_isDisabled() || _isLoading()\"\r\n [selectOnFocus]=\"true\"\r\n width=\"250px\"\r\n [showSearchIcon]=\"true\"\r\n [showClearIcon]=\"true\"\r\n (onInput)=\"_InputChange(-1, 'Search', $event, 'coer-textbox-search')\"\r\n (onClickClear)=\"_InputChange(-1, 'Search', '', 'coer-textbox-search')\"\r\n (onKeyupEnter)=\"_KeyupEnter(-1, { indexRow: -1 }, 'coer-textbox-search', $event);\"\r\n ></coer-textbox>\r\n </div>\r\n }\r\n </header>\r\n\r\n <section [ngClass]=\"{ 'grid-container': true, 'invisible': isInvisible() }\"> \r\n <div #innerContainer [ngStyle]=\"{ 'height': _height, 'min-height': minHeight(), 'max-height': maxHeight() }\"> \r\n @if(!_isDisabled() && gridLength().dataSource <= 0 && !isLoading()) {\r\n <div class=\"no-data\"> No Data </div>\r\n }\r\n \r\n @if(!isLoading()) {\r\n <table class=\"table table-sm table-responsive table-striped\">\r\n <thead>\r\n <tr>\r\n @if(checkbox.show && gridLength().dataSource > 0) {\r\n <!-- CheckBox Column -->\r\n <th scope=\"col\" class=\"check-box\">\r\n <div *ngIf=\"!_onlyOneCheck\" [ngClass]=\"{ 'invisible': _isLoadingMessage }\">\r\n <coer-checkbox\r\n [id]=\"_GetId(0, 0, 'checkboxAll')\"\r\n [ignoreDataBinding]=\"true\"\r\n [isDisabled]=\"_isDisabled() || _isLoading()\"\r\n (onChange)=\"_ClickCheck(_GetId(0, 0, 'checkboxAll'), $event, true)\"\r\n ></coer-checkbox>\r\n </div>\r\n </th>\r\n }\r\n \r\n <!-- Dynamic Grid Column -->\r\n @for(header of _gridColumns(); track header.indexColumn) {\r\n <th scope=\"col\" (dblclick)=\"Sort(header.columnName)\"\r\n [ngClass]=\"{\r\n 'no-selection': true,\r\n 'cursor-default': !enableSort() && !_isLoading(),\r\n 'cursor-pointer': enableSort() && !_isLoading(),\r\n 'cursor-wait': _isLoading()\r\n }\"\r\n [ngStyle]=\"{\r\n 'width': header.width,\r\n 'text-align': _GetAttribute(header.columnName, null, 'textAlign', 'defaul-cell')\r\n }\">\r\n <div class=\"no-selection d-flex align-items-center\">\r\n <span class=\"me-1\"> {{ _GetColumnName(header.columnName) }} </span>\r\n <i [class]=\"_GetShortIcon(header.columnName)\"></i> \r\n <i [class]=\"_GetSearchIcon(header.columnName)\"></i>\r\n </div>\r\n </th>\r\n }\r\n \r\n <!-- Delete Button Column -->\r\n @if(_ButtonByRow('showDeleteButton')) {\r\n <th scope=\"col\" class=\"action-button\"></th>\r\n }\r\n \r\n <!-- Edit Button Column -->\r\n @if(_ButtonByRow('showEditButton')) {\r\n <th scope=\"col\" class=\"action-button\"></th>\r\n }\r\n \r\n <!-- Go Button Column -->\r\n @if(_ButtonByRow('showGoButton')) {\r\n <th scope=\"col\" class=\"action-button\"></th>\r\n }\r\n </tr>\r\n </thead>\r\n \r\n <!-- body -->\r\n @for(group of _gridDataSource(); track group.indexGroup) {\r\n <tbody>\r\n <!--<tr v-if=\"_isGrouped\">\r\n <td :colspan=\"_colspan\" class=\"group\">\r\n <MesAccordion\r\n :ref=\"`accordion${group.indexGroup}-${id}`\"\r\n :title=\"`${_CleanHeaderName(groupBy)} (${group.length}): ${group.groupBy}`\"\r\n :isLoading=\"_isLoading()\"\r\n @expanded=\"_ToogleAccordion(group.groupBy, true, group.indexGroup)\"\r\n @collapsed=\"_ToogleAccordion(group.groupBy, false, group.indexGroup)\"\r\n ></MesAccordion>\r\n </td>\r\n </tr>-->\r\n \r\n @for(row of group.rows; track row.indexRow) {\r\n <tr [id]=\"_GetId(row.indexRow, 0, 'row')\"\r\n [ngClass]=\"{ 'loading': isLoading(), 'd-none': _HideRow(group), 'row-focus': (row.indexRow == _indexFocus() && enableRowFocus()) }\"\r\n (click)=\"_indexFocus.set(row.indexRow)\">\r\n \r\n @if(checkbox.show) {\r\n <!-- CheckBox Column -->\r\n <td class=\"check-box\">\r\n <div [ngClass]=\"{ 'invisible': _isLoadingMessage }\">\r\n <coer-checkbox\r\n [id]=\"_GetId(row.indexRow, 0, 'checkbox')\"\r\n [ignoreDataBinding]=\"true\"\r\n [isDisabled]=\"_isDisabled() || _isLoading()\"\r\n (onChange)=\"_ClickCheck(_GetId(row.indexRow, 0, 'checkbox'), $event, false, row)\"\r\n ></coer-checkbox>\r\n </div>\r\n \r\n <div [ngClass]=\"{ 'invisible': !_isLoadingMessage, 'spinner-border-container': true }\">\r\n <i class=\"spinner-border\"></i>\r\n </div>\r\n </td>\r\n }\r\n \r\n <!-- Dynamic Column -->\r\n @for(header of _gridColumns(); track header.indexColumn) {\r\n @if(_IsCellType(header.columnName, row, 'template')) {\r\n <td class=\"template\"\r\n (click)=\"_isDisabled() ? null : onClickRow.emit(row)\"\r\n (dblclick)=\"_isDisabled() ? null : onDoubleClickRow.emit(row)\">\r\n <div [innerHTML]=\"_GetAttribute(header.columnName, row, 'template', 'defaul-cell') | html\" class=\"template\"></div>\r\n </td>\r\n }\r\n \r\n @else if(_IsCellType(header.columnName, row, 'coerTextbox')) {\r\n <!-- coer-textbox -->\r\n <td class=\"coer-textbox\">\r\n <coer-textbox\r\n [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n [(ngModel)]=\"row[header.columnName]\"\r\n [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerTextbox') || _isDisabled() || _isLoading()\"\r\n [isValid]=\"_GetAttribute(header.columnName, row, 'isValid', 'coerTextbox') || false\"\r\n [isInvalid]=\"_GetAttribute(header.columnName, row, 'isInvalid', 'coerTextbox') || false\"\r\n [selectOnFocus]=\"_GetAttribute(header.columnName, row, 'selectOnFocus', 'coerTextbox') || true\"\r\n [placeholder]=\"_GetAttribute(header.columnName, row, 'placeholder', 'coerTextbox') || ('Type ' + header.columnName + '...')\"\r\n [textPosition]=\"_GetAttribute(header.columnName, row, 'textPosition', 'coerTextbox') || 'left'\"\r\n [minLength]=\"_GetAttribute(header.columnName, row, 'minLength', 'coerTextbox') || 0\"\r\n [maxLength]=\"_GetAttribute(header.columnName, row, 'maxLength', 'coerTextbox') || 50\"\r\n (onInput)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-textbox')\"\r\n (onKeyupEnter)=\"_KeyupEnter(header.indexColumn, row, 'coer-textbox', $event)\"\r\n ></coer-textbox>\r\n </td>\r\n }\r\n \r\n \r\n @else if(_IsCellType(header.columnName, row, 'coerNumberbox')) {\r\n <!-- coer-numberbox -->\r\n <td class=\"coer-numberbox\">\r\n <coer-numberbox\r\n [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n [(ngModel)]=\"row[header.columnName]\"\r\n [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerNumberbox') || _isDisabled() || _isLoading()\"\r\n [isValid]=\"_GetAttribute(header.columnName, row, 'isValid', 'coerNumberbox') || false\"\r\n [isInvalid]=\"_GetAttribute(header.columnName, row, 'isInvalid', 'coerNumberbox') || false\"\r\n [selectOnFocus]=\"_GetAttribute(header.columnName, row, 'selectOnFocus', 'coerNumberbox') || true\"\r\n [placeholder]=\"_GetAttribute(header.columnName, row, 'placeholder', 'coerNumberbox') || ''\"\r\n [textPosition]=\"_GetAttribute(header.columnName, row, 'textPosition', 'coerNumberbox') || 'right'\"\r\n [min]=\"_GetAttribute(header.columnName, row, 'min', 'coerNumberbox') || 0\"\r\n [max]=\"_GetAttribute(header.columnName, row, 'max', 'coerNumberbox') || 2147483647\"\r\n [decimals]=\"_GetAttribute(header.columnName, row, 'decimals', 'coerNumberbox') || 0\"\r\n (onInput)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-numberbox')\"\r\n (onKeyupEnter)=\"_KeyupEnter(header.indexColumn, row, 'coer-numberbox', $event)\"\r\n ></coer-numberbox>\r\n </td>\r\n }\r\n \r\n \r\n @else if(_IsCellType(header.columnName, row, 'coerSelectbox')) {\r\n <!-- coer-numberbox -->\r\n <td class=\"coer-selectbox\">\r\n <coer-selectbox\r\n [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n [(ngModel)]=\"row[header.columnName]\"\r\n [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerSelectbox') || _isDisabled() || _isLoading()\"\r\n [isValid]=\"_GetAttribute(header.columnName, row, 'isValid', 'coerSelectbox') || false\"\r\n [isInvalid]=\"_GetAttribute(header.columnName, row, 'isInvalid', 'coerSelectbox') || false\"\r\n [dataSource]=\"_GetAttribute(header.columnName, row, 'dataSource', 'coerSelectbox') || []\"\r\n [placeholder]=\"_GetAttribute(header.columnName, row, 'placeholder', 'coerSelectbox') || '-- Select --'\"\r\n [displayProperty]=\"_GetAttribute(header.columnName, row, 'displayProperty', 'coerSelectbox') || 'name'\"\r\n (onSelected)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-selectbox'); _KeyupEnter(header.indexColumn, row, 'coer-selectbox', $event)\"\r\n ></coer-selectbox>\r\n </td>\r\n }\r\n \r\n \r\n @else if(_IsCellType(header.columnName, row, 'coerSwitch')) {\r\n <!-- coer-switch -->\r\n <td>\r\n <coer-switch\r\n [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n [(ngModel)]=\"row[header.columnName]\"\r\n [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerSwitch') || _isDisabled() || _isLoading()\"\r\n [tooltip]=\"_GetAttribute(header.columnName, row, 'tooltip', 'coerSwitch')\"\r\n [tooltipPosition]=\"_GetAttribute(header.columnName, row, 'tooltipPosition', 'coerSwitch') || 'left'\"\r\n [isInvisible]=\"_isDisabled()\"\r\n (onChange)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-switch')\"\r\n ></coer-switch>\r\n </td>\r\n }\r\n \r\n @else {\r\n <!-- Default Cell -->\r\n <td class=\"default-cell\"\r\n (click)=\"_ClickOnRow(row)\"\r\n (dblclick)=\"_isDisabled() ? null : onDoubleClickRow.emit(row)\"\r\n [ngStyle]=\"{\r\n 'text-align': _GetAttribute(header.columnName, row, 'textAlign', 'defaul-cell'),\r\n 'white-space': 'normal'\r\n }\">\r\n \r\n <div [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n [ngClass]=\"{\r\n 'text-blue-bold': _IsCellColor(header.columnName, row, 'colorBlue'),\r\n 'text-green-bold': _IsCellColor(header.columnName, row, 'colorGreen'),\r\n 'text-yellow-bold': _IsCellColor(header.columnName, row, 'colorYellow'),\r\n 'text-red-bold': _IsCellColor(header.columnName, row, 'colorRed'),\r\n 'text-right-bold': _IsCellType(header.columnName, row, 'number')\r\n }\">\r\n \r\n @if(_IsCellType(header.columnName, row, 'number')) {\r\n <span> {{ GetNumericFormat(row[header.columnName]) }} </span>\r\n }\r\n \r\n @else if(_IsCellType(header.columnName, row, 'date')) {\r\n <span> {{ _GetDateFormat(row[header.columnName], _IsCellType(header.columnName, row, 'toLocalZone')) }} </span>\r\n }\r\n \r\n @else if(_IsCellType(header.columnName, row, 'date-time')) {\r\n <span> {{ _GetDateTimeFormat(row[header.columnName], _IsCellType(header.columnName, row, 'toLocalZone')) }} </span>\r\n }\r\n \r\n @else {\r\n <span> {{ _GetCellValue(row, header.columnName) }} </span>\r\n }\r\n </div>\r\n </td>\r\n }\r\n }\r\n \r\n <!-- Delete Button -->\r\n @if(_ButtonByRow('showDeleteButton')) {\r\n <td class=\"action-button\">\r\n @if(_ButtonByRow('showDeleteButton', row)) {\r\n <coer-button\r\n type=\"icon-no-border\"\r\n [color]=\"_ColorButtonByRow('deleteButtonColor')\"\r\n icon=\"delete\"\r\n [tooltip]=\"_GetTooltip('Delete', row)\"\r\n [isInvisible]=\"_isDisabled()\"\r\n [isReadonly]=\"isReadonly()\"\r\n [isDisabled]=\"_isLoading()\"\r\n (onClick)=\"onClickDeleteRow.emit(row)\"\r\n ></coer-button>\r\n }\r\n </td>\r\n }\r\n \r\n <!-- Edit Button -->\r\n @if(_ButtonByRow('showEditButton')) {\r\n <td class=\"action-button\">\r\n @if(_ButtonByRow('showEditButton', row)) {\r\n <coer-button\r\n type=\"icon-no-border\"\r\n [color]=\"_ColorButtonByRow('editButtonColor')\"\r\n icon=\"edit\"\r\n [tooltip]=\"_GetTooltip('Edit', row)\"\r\n [isInvisible]=\"_isDisabled()\"\r\n [isDisabled]=\"_isLoading()\"\r\n (onClick)=\"onClickEditRow.emit(row)\"\r\n ></coer-button>\r\n }\r\n </td>\r\n }\r\n \r\n <!-- Go Button -->\r\n @if(_ButtonByRow('showGoButton')) {\r\n <td class=\"action-button\">\r\n @if(_ButtonByRow('showGoButton', row)) {\r\n <coer-button\r\n type=\"icon-no-border\"\r\n [color]=\"_ColorButtonByRow('goButtonColor')\"\r\n icon=\"go\"\r\n [tooltip]=\"_GetTooltip('Go to', row, 'detail')\"\r\n [isInvisible]=\"_isDisabled()\"\r\n [isDisabled]=\"_isLoading()\"\r\n (onClick)=\"onClickGoRow.emit(row)\"\r\n ></coer-button>\r\n }\r\n </td>\r\n }\r\n </tr>\r\n }\r\n </tbody>\r\n }\r\n </table>\r\n }\r\n\r\n @else {\r\n <!-- Grid Message -->\r\n <div class=\"loading\" [ngStyle]=\"{ \r\n 'width': '100%', \r\n 'height': '100%',\r\n 'bottom': showFooter() ? '35px' : '10px'\r\n }\">\r\n <i class=\"spinner-border\"></i>\r\n <span class=\"fa-fade\">Loading</span>\r\n </div> \r\n }\r\n </div>\r\n </section>\r\n\r\n @if(showFooter()) {\r\n <footer class=\"grid-footer\">\r\n <span>\r\n @if(_isLoadingMessage) {\r\n <span class=\"fa-fade\"> Loading </span>\r\n }\r\n\r\n @else if(gridLength().dataSourceSelected > 0) {\r\n <span>\r\n <i class=\"bi bi-check2-square ms-1\"></i>\r\n {{ gridLength().dataSourceSelected }}\r\n </span>\r\n }\r\n </span>\r\n\r\n <span class=\"me-1\"> {{ gridLength().dataSourceFiltered | numericFormat }} Rows </span>\r\n </footer>\r\n }\r\n</div>", styles: ["div.coer-grid header{align-items:flex-end;justify-content:flex-end;padding-right:8px;margin:0}div.coer-grid header>div{padding:0 0 10px 10px;display:flex;align-items:baseline}div.coer-grid header>div a{height:40px!important}div.coer-grid table{table-layout:auto;border-collapse:separate;border-spacing:1px 0px;margin:0;font-size:14px}div.coer-grid table thead tr th{position:sticky!important;z-index:100!important;top:0!important;background-color:var(--gray)!important;color:var(--smoke)!important;padding:5px!important;vertical-align:middle!important;overflow:hidden;text-overflow:ellipsis;word-wrap:break-word;min-width:50px!important;white-space:nowrap!important}div.coer-grid table tbody{border:0px!important}div.coer-grid table tbody tr:not(.row-focus):hover td{color:#000!important;background-color:#f1f6ff}div.coer-grid table tbody tr td{border:0px!important;padding:5px!important;vertical-align:middle!important;white-space:break-spaces;text-overflow:ellipsis;overflow:hidden;min-height:31px!important}div.coer-grid table tbody tr.row-focus td{background-color:#cde1ff}div.coer-grid table tbody tr td.coer-textbox,div.coer-grid table tbody tr td.coer-numberbox,div.coer-grid table tbody tr td.coer-selectbox{padding:0!important;overflow:visible!important}div.coer-grid table tbody tr td.default-cell{cursor:pointer!important}div.coer-grid table thead tr th.action-button,div.coer-grid table thead tr td.action-button,div.coer-grid table thead tr th.check-box,div.coer-grid table thead tr td.check-box,div.coer-grid table tbody tr th.action-button,div.coer-grid table tbody tr td.action-button,div.coer-grid table tbody tr th.check-box table tbody tr td.check-box{text-align:center!important;cursor:default!important;min-width:40px!important;max-width:40px!important;width:40px!important;padding:0!important}div.coer-grid footer.grid-footer{display:flex;align-items:center;justify-content:space-between;font-size:small;color:#999;padding-top:5px}div.coer-grid section.grid-container{position:relative;overflow:auto}div.coer-grid div.loading,div.coer-grid div.no-data{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:25px;color:gray}div.coer-grid div.loading{background-color:#bbbbbb83!important;flex-direction:column!important;gap:10px!important;z-index:1}div.coer-grid div.loading span.fa-fade{position:relative!important;top:50px!important}div.coer-grid tr.loading{background-color:#bbbbbb83!important}div.coer-grid div.loading i.spinner-border{color:var(--primary-inner)!important;width:70px!important;height:70px!important;font-size:20px!important;position:absolute!important}div.coer-grid td.check-box div.spinner-border-container{position:absolute;transform:translate(7px,-19px)}div.coer-grid td.check-box div.spinner-border-container i.spinner-border{width:15px!important;height:15px!important;color:var(--primary-inner)!important}div.coer-grid table thead tr th.check-box>div,div.coer-grid table tbody tr td.check-box>div{display:flex;align-items:center;justify-content:center;cursor:default!important}div.coer-grid input.form-check-input{box-shadow:none!important;margin:0}div.coer-grid input[type=checkbox]{cursor:pointer!important}div.coer-grid td.group{padding:0!important;margin:0!important}div.coer-grid td.group>*{border-top:1px solid var(--gray)!important;border-bottom:1px solid var(--gray)!important;padding:0!important;margin:0!important}div.coer-grid .template,div.coer-grid .template div{white-space:nowrap!important;display:flex!important;align-items:center!important;cursor:pointer!important;gap:5px!important;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }, { kind: "component", type: CoerCheckbox, selector: "coer-checkbox", inputs: ["id", "label", "labelPosition", "isLoading", "isDisabled", "isReadonly", "isInvisible", "ignoreDataBinding", "value"], outputs: ["onChange"] }, { kind: "component", type: CoerNumberBox, selector: "coer-numberbox", inputs: ["id", "value", "label", "placeholder", "textPosition", "min", "max", "isInvalid", "isValid", "externalButton", "selectOnFocus", "decimals", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onKeyupEnter", "onInput", "onClickExternalButton"] }, { kind: "component", type: CoerSelectbox, selector: "coer-selectbox", inputs: ["id", "value", "label", "placeholder", "isInvalid", "isValid", "dataSource", "displayProperty", "rowsByPage", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onSelected", "onUnselect"] }, { kind: "component", type: CoerSwitch, selector: "coer-switch", inputs: ["id", "value", "label", "labelPosition", "isLoading", "isDisabled", "isReadonly", "isInvisible", "tooltip", "tooltipPosition"], outputs: ["onChange"] }, { kind: "component", type: CoerTextBox, selector: "coer-textbox", inputs: ["id", "value", "label", "placeholder", "textPosition", "minLength", "maxLength", "isInvalid", "isValid", "externalButton", "selectOnFocus", "showClearIcon", "showSearchIcon", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onKeyupEnter", "onInput", "onClickClear", "onClickSearch", "onClickExternalButton"] }, { kind: "pipe", type: i9.HtmlPipe, name: "html" }, { kind: "pipe", type: i9.NumericFormatPipe, name: "numericFormat" }] }); }
|
|
2797
2804
|
}
|
|
2798
2805
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerGrid, decorators: [{
|
|
2799
2806
|
type: Component,
|
|
2800
|
-
args: [{ selector: 'coer-grid', providers: [CONTROL_VALUE(CoerGrid)], standalone: false, template: "<div class=\"coer-grid\" [ngStyle]=\"{ 'width': width(), 'min-Width': MinWidth(), 'max-Width': MaxWidth(), 'margin': margin() }\">\r\n <header [id]=\"_id + '-header'\" class=\"row\">\r\n <!-- Slot -->\r\n <ng-content></ng-content>\r\n\r\n <!-- Export Button -->\r\n @if(exportButton.show && gridLength().dataSource > 0) {\r\n <div class=\"col-auto\">\r\n <coer-button\r\n type=\"icon\"\r\n [color]=\"_ColorButton(exportButton)\"\r\n icon=\"excel\"\r\n [tooltip]=\"_isLoading() ? 'Loading' : (exportButton.tooltip || 'Export')\"\r\n [path]=\"(exportButton && exportButton.path) ? exportButton.path : []\"\r\n [isDisabled]=\"_isDisabled() || _isLoading() || (exportButton.isDisabled || false)\"\r\n [isLoading]=\"_isLoading()\" \r\n (onClick)=\"_Export(!exportButton.preventDefault)\"\r\n ></coer-button>\r\n </div>\r\n }\r\n\r\n <!-- Import Button -->\r\n @if(importButton.show && !isReadonly()) {\r\n <div class=\"col-auto\">\r\n <input type=\"file\" #inputFileRef [multiple]=\"false\" (change)=\"_Import($event)\">\r\n\r\n <coer-button\r\n type=\"icon\"\r\n color=\"primary\"\r\n [color]=\"_ColorButton(importButton)\"\r\n [tooltip]=\"importButton.tooltip || 'Import'\"\r\n [path]=\"(importButton && importButton.path) ? importButton.path : []\"\r\n [isDisabled]=\"importButton.isDisabled || false\" \r\n (onClick)=\"_Import()\"\r\n ></coer-button>\r\n </div>\r\n }\r\n\r\n <!-- Add Button -->\r\n @if(addButton.show && !isReadonly()) {\r\n <div class=\"col-auto\">\r\n <coer-button\r\n type=\"icon\"\r\n [color]=\"_ColorButton(addButton)\"\r\n icon=\"new\"\r\n [tooltip]=\"addButton.tooltip || 'New'\"\r\n [path]=\"(addButton && addButton.path) ? addButton.path : []\"\r\n [isDisabled]=\"addButton.isDisabled || false\" \r\n (onClick)=\"onClickAdd.emit()\"\r\n ></coer-button>\r\n </div>\r\n }\r\n\r\n <!-- Save Button -->\r\n @if(saveButton.show && !isReadonly()) {\r\n <div class=\"col-auto\">\r\n <coer-button\r\n type=\"icon\"\r\n [color]=\"_ColorButton(saveButton)\"\r\n icon=\"save\"\r\n [tooltip]=\"saveButton.tooltip || 'Save'\"\r\n [path]=\"(saveButton && saveButton.path) ? saveButton.path : []\"\r\n [isDisabled]=\"saveButton.isDisabled || false\" \r\n (onClick)=\"onClickSave.emit()\"\r\n ></coer-button>\r\n </div>\r\n }\r\n\r\n <!-- Search -->\r\n @if(search.show) {\r\n <div class=\"col-auto\">\r\n <coer-textbox\r\n #inputSearch\r\n [id]=\"_GetId(-1, -1, 'search')\"\r\n [ngModel]=\"_gridSearch()\"\r\n placeholder=\"Search\"\r\n [isDisabled]=\"_isDisabled() || _isLoading()\"\r\n [selectOnFocus]=\"true\"\r\n width=\"250px\"\r\n [showSearchIcon]=\"true\"\r\n [showClearIcon]=\"true\"\r\n (onInput)=\"_InputChange(-1, 'Search', $event, 'coer-textbox-search')\"\r\n (onClickClear)=\"_InputChange(-1, 'Search', '', 'coer-textbox-search')\"\r\n (onKeyupEnter)=\"_KeyupEnter(-1, { indexRow: -1 }, 'coer-textbox-search', $event);\"\r\n ></coer-textbox>\r\n </div>\r\n }\r\n </header>\r\n\r\n <section [ngClass]=\"{ 'grid-container': true, 'invisible': isInvisible() }\"> \r\n <div #innerContainer [ngStyle]=\"{ 'height': _height, 'min-height': minHeight(), 'max-height': maxHeight() }\"> \r\n @if(!_isDisabled() && gridLength().dataSource <= 0 && !isLoading()) {\r\n <div class=\"no-data\"> No Data </div>\r\n }\r\n \r\n @if(!isLoading()) {\r\n <table class=\"table table-sm table-responsive table-striped\">\r\n <thead>\r\n <tr>\r\n @if(checkbox.show && gridLength().dataSource > 0) {\r\n <!-- CheckBox Column -->\r\n <th scope=\"col\" class=\"check-box\">\r\n <div *ngIf=\"!_onlyOneCheck\" [ngClass]=\"{ 'invisible': _isLoadingMessage }\">\r\n <coer-checkbox\r\n [id]=\"_GetId(0, 0, 'checkboxAll')\"\r\n [ignoreDataBinding]=\"true\"\r\n [isDisabled]=\"_isDisabled() || _isLoading()\"\r\n (onChange)=\"_ClickCheck(_GetId(0, 0, 'checkboxAll'), $event, true)\"\r\n ></coer-checkbox>\r\n </div>\r\n </th>\r\n }\r\n \r\n <!-- Dynamic Grid Column -->\r\n @for(header of _gridColumns(); track header.indexColumn) {\r\n <th scope=\"col\" (dblclick)=\"Sort(header.columnName)\"\r\n [ngClass]=\"{\r\n 'no-selection': true,\r\n 'cursor-default': !enableSort() && !_isLoading(),\r\n 'cursor-pointer': enableSort() && !_isLoading(),\r\n 'cursor-wait': _isLoading()\r\n }\"\r\n [ngStyle]=\"{\r\n 'width': header.width,\r\n 'text-align': _GetAttribute(header.columnName, null, 'textAlign', 'defaul-cell')\r\n }\">\r\n <div class=\"no-selection d-flex align-items-center\">\r\n <span class=\"me-1\"> {{ _GetColumnName(header.columnName) }} </span>\r\n <i [class]=\"_GetShortIcon(header.columnName)\"></i> \r\n <i [class]=\"_GetSearchIcon(header.columnName)\"></i>\r\n </div>\r\n </th>\r\n }\r\n \r\n <!-- Delete Button Column -->\r\n @if(_ButtonByRow('showDeleteButton')) {\r\n <th scope=\"col\" class=\"action-button\"></th>\r\n }\r\n \r\n <!-- Edit Button Column -->\r\n @if(_ButtonByRow('showEditButton')) {\r\n <th scope=\"col\" class=\"action-button\"></th>\r\n }\r\n \r\n <!-- Edit Button Column -->\r\n @if(_ButtonByRow('showGoButton')) {\r\n <th scope=\"col\" class=\"action-button\"></th>\r\n }\r\n </tr>\r\n </thead>\r\n \r\n <!-- body -->\r\n @for(group of _gridDataSource(); track group.indexGroup) {\r\n <tbody>\r\n <!--<tr v-if=\"_isGrouped\">\r\n <td :colspan=\"_colspan\" class=\"group\">\r\n <MesAccordion\r\n :ref=\"`accordion${group.indexGroup}-${id}`\"\r\n :title=\"`${_CleanHeaderName(groupBy)} (${group.length}): ${group.groupBy}`\"\r\n :isLoading=\"_isLoading()\"\r\n @expanded=\"_ToogleAccordion(group.groupBy, true, group.indexGroup)\"\r\n @collapsed=\"_ToogleAccordion(group.groupBy, false, group.indexGroup)\"\r\n ></MesAccordion>\r\n </td>\r\n </tr>-->\r\n \r\n @for(row of group.rows; track row.indexRow) {\r\n <tr [id]=\"_GetId(row.indexRow, 0, 'row')\"\r\n [ngClass]=\"{ 'loading': isLoading(), 'd-none': _HideRow(group), 'row-focus': (row.indexRow == _indexFocus() && enableRowFocus()) }\"\r\n (click)=\"_indexFocus.set(row.indexRow)\">\r\n \r\n @if(checkbox.show) {\r\n <!-- CheckBox Column -->\r\n <td class=\"check-box\">\r\n <div [ngClass]=\"{ 'invisible': _isLoadingMessage }\">\r\n <coer-checkbox\r\n [id]=\"_GetId(row.indexRow, 0, 'checkbox')\"\r\n [ignoreDataBinding]=\"true\"\r\n [isDisabled]=\"_isDisabled() || _isLoading()\"\r\n (onChange)=\"_ClickCheck(_GetId(row.indexRow, 0, 'checkbox'), $event, false, row)\"\r\n ></coer-checkbox>\r\n </div>\r\n \r\n <div [ngClass]=\"{ 'invisible': !_isLoadingMessage, 'spinner-border-container': true }\">\r\n <i class=\"spinner-border\"></i>\r\n </div>\r\n </td>\r\n }\r\n \r\n <!-- Dynamic Column -->\r\n @for(header of _gridColumns(); track header.indexColumn) {\r\n @if(_IsCellType(header.columnName, row, 'template')) {\r\n <td class=\"template\"\r\n (click)=\"_isDisabled() ? null : onClickRow.emit(row)\"\r\n (dblclick)=\"_isDisabled() ? null : onDoubleClickRow.emit(row)\">\r\n <div [innerHTML]=\"_GetAttribute(header.columnName, row, 'template', 'defaul-cell') | html\" class=\"template\"></div>\r\n </td>\r\n }\r\n \r\n @else if(_IsCellType(header.columnName, row, 'coerTextbox')) {\r\n <!-- coer-textbox -->\r\n <td class=\"coer-textbox\">\r\n <coer-textbox\r\n [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n [(ngModel)]=\"row[header.columnName]\"\r\n [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerTextbox') || _isDisabled() || _isLoading()\"\r\n [isValid]=\"_GetAttribute(header.columnName, row, 'isValid', 'coerTextbox') || false\"\r\n [isInvalid]=\"_GetAttribute(header.columnName, row, 'isInvalid', 'coerTextbox') || false\"\r\n [selectOnFocus]=\"_GetAttribute(header.columnName, row, 'selectOnFocus', 'coerTextbox') || true\"\r\n [placeholder]=\"_GetAttribute(header.columnName, row, 'placeholder', 'coerTextbox') || ('Type ' + header.columnName + '...')\"\r\n [textPosition]=\"_GetAttribute(header.columnName, row, 'textPosition', 'coerTextbox') || 'left'\"\r\n [minLength]=\"_GetAttribute(header.columnName, row, 'minLength', 'coerTextbox') || 0\"\r\n [maxLength]=\"_GetAttribute(header.columnName, row, 'maxLength', 'coerTextbox') || 50\"\r\n (onInput)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-textbox')\"\r\n (onKeyupEnter)=\"_KeyupEnter(header.indexColumn, row, 'coer-textbox', $event)\"\r\n ></coer-textbox>\r\n </td>\r\n }\r\n \r\n \r\n @else if(_IsCellType(header.columnName, row, 'coerNumberbox')) {\r\n <!-- coer-numberbox -->\r\n <td class=\"coer-numberbox\">\r\n <coer-numberbox\r\n [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n [(ngModel)]=\"row[header.columnName]\"\r\n [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerNumberbox') || _isDisabled() || _isLoading()\"\r\n [isValid]=\"_GetAttribute(header.columnName, row, 'isValid', 'coerNumberbox') || false\"\r\n [isInvalid]=\"_GetAttribute(header.columnName, row, 'isInvalid', 'coerNumberbox') || false\"\r\n [selectOnFocus]=\"_GetAttribute(header.columnName, row, 'selectOnFocus', 'coerNumberbox') || true\"\r\n [placeholder]=\"_GetAttribute(header.columnName, row, 'placeholder', 'coerNumberbox') || ''\"\r\n [textPosition]=\"_GetAttribute(header.columnName, row, 'textPosition', 'coerNumberbox') || 'right'\"\r\n [min]=\"_GetAttribute(header.columnName, row, 'min', 'coerNumberbox') || 0\"\r\n [max]=\"_GetAttribute(header.columnName, row, 'max', 'coerNumberbox') || 2147483647\"\r\n [decimals]=\"_GetAttribute(header.columnName, row, 'decimals', 'coerNumberbox') || 0\"\r\n (onInput)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-numberbox')\"\r\n (onKeyupEnter)=\"_KeyupEnter(header.indexColumn, row, 'coer-numberbox', $event)\"\r\n ></coer-numberbox>\r\n </td>\r\n }\r\n \r\n \r\n @else if(_IsCellType(header.columnName, row, 'coerSelectbox')) {\r\n <!-- coer-numberbox -->\r\n <td class=\"coer-selectbox\">\r\n <coer-selectbox\r\n [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n [(ngModel)]=\"row[header.columnName]\"\r\n [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerSelectbox') || _isDisabled() || _isLoading()\"\r\n [isValid]=\"_GetAttribute(header.columnName, row, 'isValid', 'coerSelectbox') || false\"\r\n [isInvalid]=\"_GetAttribute(header.columnName, row, 'isInvalid', 'coerSelectbox') || false\"\r\n [dataSource]=\"_GetAttribute(header.columnName, row, 'dataSource', 'coerSelectbox') || []\"\r\n [placeholder]=\"_GetAttribute(header.columnName, row, 'placeholder', 'coerSelectbox') || '-- Select --'\"\r\n [displayProperty]=\"_GetAttribute(header.columnName, row, 'displayProperty', 'coerSelectbox') || 'name'\"\r\n (onSelected)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-selectbox'); _KeyupEnter(header.indexColumn, row, 'coer-selectbox', $event)\"\r\n ></coer-selectbox>\r\n </td>\r\n }\r\n \r\n \r\n @else if(_IsCellType(header.columnName, row, 'coerSwitch')) {\r\n <!-- coer-switch -->\r\n <td>\r\n <coer-switch\r\n [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n [(ngModel)]=\"row[header.columnName]\"\r\n [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerSwitch') || _isDisabled() || _isLoading()\"\r\n [tooltip]=\"_GetAttribute(header.columnName, row, 'tooltip', 'coerSwitch')\"\r\n [tooltipPosition]=\"_GetAttribute(header.columnName, row, 'tooltipPosition', 'coerSwitch') || 'left'\"\r\n [isInvisible]=\"_isDisabled()\"\r\n (onChange)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-switch')\"\r\n ></coer-switch>\r\n </td>\r\n }\r\n \r\n @else {\r\n <!-- Default Cell -->\r\n <td class=\"default-cell\"\r\n (click)=\"_ClickOnRow(row)\"\r\n (dblclick)=\"_isDisabled() ? null : onDoubleClickRow.emit(row)\"\r\n [ngStyle]=\"{\r\n 'text-align': _GetAttribute(header.columnName, row, 'textAlign', 'defaul-cell'),\r\n 'white-space': 'normal'\r\n }\">\r\n \r\n <div [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n [ngClass]=\"{\r\n 'text-blue-bold': _IsCellColor(header.columnName, row, 'colorBlue'),\r\n 'text-green-bold': _IsCellColor(header.columnName, row, 'colorGreen'),\r\n 'text-yellow-bold': _IsCellColor(header.columnName, row, 'colorYellow'),\r\n 'text-red-bold': _IsCellColor(header.columnName, row, 'colorRed'),\r\n 'text-right-bold': _IsCellType(header.columnName, row, 'number')\r\n }\">\r\n \r\n @if(_IsCellType(header.columnName, row, 'number')) {\r\n <span> {{ GetNumericFormat(row[header.columnName]) }} </span>\r\n }\r\n \r\n @else if(_IsCellType(header.columnName, row, 'date')) {\r\n <span> {{ _GetDateFormat(row[header.columnName], _IsCellType(header.columnName, row, 'toLocalZone')) }} </span>\r\n }\r\n \r\n @else if(_IsCellType(header.columnName, row, 'date-time')) {\r\n <span> {{ _GetDateTimeFormat(row[header.columnName], _IsCellType(header.columnName, row, 'toLocalZone')) }} </span>\r\n }\r\n \r\n @else {\r\n <span> {{ _GetCellValue(row, header.columnName) }} </span>\r\n }\r\n </div>\r\n </td>\r\n }\r\n }\r\n \r\n <!-- Delete Button -->\r\n @if(_ButtonByRow('showDeleteButton')) {\r\n <td class=\"action-button\">\r\n @if(_ButtonByRow('showDeleteButton', row)) {\r\n <coer-button\r\n type=\"icon-no-border\"\r\n [color]=\"_ColorButtonByRow('deleteButtonColor')\"\r\n icon=\"delete\"\r\n [tooltip]=\"_GetTooltip('Delete', row)\"\r\n [isInvisible]=\"_isDisabled()\"\r\n [isReadonly]=\"isReadonly()\"\r\n [isDisabled]=\"_isLoading()\"\r\n (onClick)=\"onClickDeleteRow.emit(row)\"\r\n ></coer-button>\r\n }\r\n </td>\r\n }\r\n \r\n <!-- Edit Button -->\r\n @if(_ButtonByRow('showEditButton')) {\r\n <td class=\"action-button\">\r\n @if(_ButtonByRow('showEditButton', row)) {\r\n <coer-button\r\n type=\"icon-no-border\"\r\n [color]=\"_ColorButtonByRow('editButtonColor')\"\r\n icon=\"edit\"\r\n [tooltip]=\"_GetTooltip('Edit', row)\"\r\n [isInvisible]=\"_isDisabled()\"\r\n [isDisabled]=\"_isLoading()\"\r\n (onClick)=\"onClickEditRow.emit(row)\"\r\n ></coer-button>\r\n }\r\n </td>\r\n }\r\n \r\n <!-- GO Button -->\r\n @if(_ButtonByRow('showGoButton')) {\r\n <td class=\"action-button\">\r\n @if(_ButtonByRow('showGoButton', row)) {\r\n <coer-button\r\n type=\"icon-no-border\"\r\n [color]=\"_ColorButtonByRow('goButtonColor')\"\r\n icon=\"go\"\r\n [tooltip]=\"_GetTooltip('Go to', row, 'detail')\"\r\n [isInvisible]=\"_isDisabled()\"\r\n [isDisabled]=\"_isLoading()\"\r\n (onClick)=\"onClickGoRow.emit(row)\"\r\n ></coer-button>\r\n }\r\n </td>\r\n }\r\n </tr>\r\n }\r\n </tbody>\r\n }\r\n </table>\r\n }\r\n\r\n @else {\r\n <!-- Grid Message -->\r\n <div class=\"loading\" [ngStyle]=\"{ \r\n 'width': '100%', \r\n 'height': '100%',\r\n 'bottom': showFooter() ? '35px' : '10px'\r\n }\">\r\n <i class=\"spinner-border\"></i>\r\n <span class=\"fa-fade\">Loading</span>\r\n </div> \r\n }\r\n </div>\r\n </section>\r\n\r\n @if(showFooter()) {\r\n <footer class=\"grid-footer\">\r\n <span>\r\n @if(_isLoadingMessage) {\r\n <span class=\"fa-fade\"> Loading </span>\r\n }\r\n\r\n @else if(gridLength().dataSourceSelected > 0) {\r\n <span>\r\n <i class=\"bi bi-check2-square ms-1\"></i>\r\n {{ gridLength().dataSourceSelected }}\r\n </span>\r\n }\r\n </span>\r\n\r\n <span class=\"me-1\"> {{ gridLength().dataSourceFiltered | numericFormat }} Rows </span>\r\n </footer>\r\n }\r\n</div>", styles: ["div.coer-grid header{align-items:flex-end;justify-content:flex-end;padding-right:8px;margin:0}div.coer-grid header>div{padding:0 0 10px 10px;display:flex;align-items:baseline}div.coer-grid header>div a{height:40px!important}div.coer-grid table{table-layout:auto;border-collapse:separate;border-spacing:1px 0px;margin:0;font-size:14px}div.coer-grid table thead tr th{position:sticky!important;z-index:100!important;top:0!important;background-color:var(--gray)!important;color:var(--smoke)!important;padding:5px!important;vertical-align:middle!important;overflow:hidden;text-overflow:ellipsis;word-wrap:break-word;min-width:50px!important;white-space:nowrap!important}div.coer-grid table tbody{border:0px!important}div.coer-grid table tbody tr:not(.row-focus):hover td{color:#000!important;background-color:#f1f6ff}div.coer-grid table tbody tr td{border:0px!important;padding:5px!important;vertical-align:middle!important;white-space:break-spaces;text-overflow:ellipsis;overflow:hidden;min-height:31px!important}div.coer-grid table tbody tr.row-focus td{background-color:#cde1ff}div.coer-grid table tbody tr td.coer-textbox,div.coer-grid table tbody tr td.coer-numberbox,div.coer-grid table tbody tr td.coer-selectbox{padding:0!important;overflow:visible!important}div.coer-grid table tbody tr td.default-cell{cursor:pointer!important}div.coer-grid table thead tr th.action-button,div.coer-grid table thead tr td.action-button,div.coer-grid table thead tr th.check-box,div.coer-grid table thead tr td.check-box,div.coer-grid table tbody tr th.action-button,div.coer-grid table tbody tr td.action-button,div.coer-grid table tbody tr th.check-box table tbody tr td.check-box{text-align:center!important;cursor:default!important;min-width:40px!important;max-width:40px!important;width:40px!important;padding:0!important}div.coer-grid footer.grid-footer{display:flex;align-items:center;justify-content:space-between;font-size:small;color:#999;padding-top:5px}div.coer-grid section.grid-container{position:relative;overflow:auto}div.coer-grid div.loading,div.coer-grid div.no-data{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:25px;color:gray}div.coer-grid div.loading{background-color:#bbbbbb83!important;flex-direction:column!important;gap:10px!important;z-index:1}div.coer-grid div.loading span.fa-fade{position:relative!important;top:50px!important}div.coer-grid tr.loading{background-color:#bbbbbb83!important}div.coer-grid div.loading i.spinner-border{color:var(--primary-inner)!important;width:70px!important;height:70px!important;font-size:20px!important;position:absolute!important}div.coer-grid td.check-box div.spinner-border-container{position:absolute;transform:translate(7px,-19px)}div.coer-grid td.check-box div.spinner-border-container i.spinner-border{width:15px!important;height:15px!important;color:var(--primary-inner)!important}div.coer-grid table thead tr th.check-box>div,div.coer-grid table tbody tr td.check-box>div{display:flex;align-items:center;justify-content:center;cursor:default!important}div.coer-grid input.form-check-input{box-shadow:none!important;margin:0}div.coer-grid input[type=checkbox]{cursor:pointer!important}div.coer-grid td.group{padding:0!important;margin:0!important}div.coer-grid td.group>*{border-top:1px solid var(--gray)!important;border-bottom:1px solid var(--gray)!important;padding:0!important;margin:0!important}div.coer-grid .template,div.coer-grid .template div{white-space:nowrap!important;display:flex!important;align-items:center!important;cursor:pointer!important;gap:5px!important;width:100%}\n"] }]
|
|
2807
|
+
args: [{ selector: 'coer-grid', providers: [CONTROL_VALUE(CoerGrid)], standalone: false, template: "<div class=\"coer-grid\" [ngStyle]=\"{ 'width': width(), 'min-Width': MinWidth(), 'max-Width': MaxWidth(), 'margin': margin() }\">\r\n <header [id]=\"_id + '-header'\" class=\"row\">\r\n <!-- Slot -->\r\n <ng-content></ng-content>\r\n\r\n <!-- Export Button -->\r\n @if(exportButton.show && gridLength().dataSource > 0) {\r\n <div class=\"col-auto\">\r\n <coer-button\r\n type=\"icon\"\r\n [color]=\"_ColorButton(exportButton)\"\r\n icon=\"excel\"\r\n [tooltip]=\"_isLoading() ? 'Loading' : (exportButton.tooltip || 'Export')\"\r\n [path]=\"(exportButton && exportButton.path) ? exportButton.path : []\"\r\n [isDisabled]=\"_isDisabled() || _isLoading() || (exportButton.isDisabled || false)\"\r\n [isLoading]=\"_isLoading()\" \r\n (onClick)=\"_Export(!exportButton.preventDefault)\"\r\n ></coer-button>\r\n </div>\r\n }\r\n\r\n <!-- Import Button -->\r\n @if(importButton.show && !isReadonly()) {\r\n <div class=\"col-auto\">\r\n <input type=\"file\" #inputFileRef [multiple]=\"false\" (change)=\"_Import($event)\">\r\n\r\n <coer-button\r\n type=\"icon\"\r\n color=\"primary\"\r\n [color]=\"_ColorButton(importButton)\"\r\n [tooltip]=\"importButton.tooltip || 'Import'\"\r\n [path]=\"(importButton && importButton.path) ? importButton.path : []\"\r\n [isDisabled]=\"importButton.isDisabled || false\" \r\n (onClick)=\"_Import()\"\r\n ></coer-button>\r\n </div>\r\n }\r\n\r\n <!-- Add Button -->\r\n @if(addButton.show && !isReadonly()) {\r\n <div class=\"col-auto\">\r\n <coer-button\r\n type=\"icon\"\r\n [color]=\"_ColorButton(addButton)\"\r\n icon=\"new\"\r\n [tooltip]=\"addButton.tooltip || 'New'\"\r\n [path]=\"(addButton && addButton.path) ? addButton.path : []\"\r\n [isDisabled]=\"addButton.isDisabled || false\" \r\n (onClick)=\"onClickAdd.emit()\"\r\n ></coer-button>\r\n </div>\r\n }\r\n\r\n <!-- Save Button -->\r\n @if(saveButton.show && !isReadonly()) {\r\n <div class=\"col-auto\">\r\n <coer-button\r\n type=\"icon\"\r\n [color]=\"_ColorButton(saveButton)\"\r\n icon=\"save\"\r\n [tooltip]=\"saveButton.tooltip || 'Save'\"\r\n [path]=\"(saveButton && saveButton.path) ? saveButton.path : []\"\r\n [isDisabled]=\"saveButton.isDisabled || false\" \r\n (onClick)=\"onClickSave.emit()\"\r\n ></coer-button>\r\n </div>\r\n }\r\n\r\n <!-- Search -->\r\n @if(search.show) {\r\n <div class=\"col-auto\">\r\n <coer-textbox\r\n #inputSearch\r\n [id]=\"_GetId(-1, -1, 'search')\"\r\n [ngModel]=\"_gridSearch()\"\r\n placeholder=\"Search\"\r\n [isDisabled]=\"_isDisabled() || _isLoading()\"\r\n [selectOnFocus]=\"true\"\r\n width=\"250px\"\r\n [showSearchIcon]=\"true\"\r\n [showClearIcon]=\"true\"\r\n (onInput)=\"_InputChange(-1, 'Search', $event, 'coer-textbox-search')\"\r\n (onClickClear)=\"_InputChange(-1, 'Search', '', 'coer-textbox-search')\"\r\n (onKeyupEnter)=\"_KeyupEnter(-1, { indexRow: -1 }, 'coer-textbox-search', $event);\"\r\n ></coer-textbox>\r\n </div>\r\n }\r\n </header>\r\n\r\n <section [ngClass]=\"{ 'grid-container': true, 'invisible': isInvisible() }\"> \r\n <div #innerContainer [ngStyle]=\"{ 'height': _height, 'min-height': minHeight(), 'max-height': maxHeight() }\"> \r\n @if(!_isDisabled() && gridLength().dataSource <= 0 && !isLoading()) {\r\n <div class=\"no-data\"> No Data </div>\r\n }\r\n \r\n @if(!isLoading()) {\r\n <table class=\"table table-sm table-responsive table-striped\">\r\n <thead>\r\n <tr>\r\n @if(checkbox.show && gridLength().dataSource > 0) {\r\n <!-- CheckBox Column -->\r\n <th scope=\"col\" class=\"check-box\">\r\n <div *ngIf=\"!_onlyOneCheck\" [ngClass]=\"{ 'invisible': _isLoadingMessage }\">\r\n <coer-checkbox\r\n [id]=\"_GetId(0, 0, 'checkboxAll')\"\r\n [ignoreDataBinding]=\"true\"\r\n [isDisabled]=\"_isDisabled() || _isLoading()\"\r\n (onChange)=\"_ClickCheck(_GetId(0, 0, 'checkboxAll'), $event, true)\"\r\n ></coer-checkbox>\r\n </div>\r\n </th>\r\n }\r\n \r\n <!-- Dynamic Grid Column -->\r\n @for(header of _gridColumns(); track header.indexColumn) {\r\n <th scope=\"col\" (dblclick)=\"Sort(header.columnName)\"\r\n [ngClass]=\"{\r\n 'no-selection': true,\r\n 'cursor-default': !enableSort() && !_isLoading(),\r\n 'cursor-pointer': enableSort() && !_isLoading(),\r\n 'cursor-wait': _isLoading()\r\n }\"\r\n [ngStyle]=\"{\r\n 'width': header.width,\r\n 'text-align': _GetAttribute(header.columnName, null, 'textAlign', 'defaul-cell')\r\n }\">\r\n <div class=\"no-selection d-flex align-items-center\">\r\n <span class=\"me-1\"> {{ _GetColumnName(header.columnName) }} </span>\r\n <i [class]=\"_GetShortIcon(header.columnName)\"></i> \r\n <i [class]=\"_GetSearchIcon(header.columnName)\"></i>\r\n </div>\r\n </th>\r\n }\r\n \r\n <!-- Delete Button Column -->\r\n @if(_ButtonByRow('showDeleteButton')) {\r\n <th scope=\"col\" class=\"action-button\"></th>\r\n }\r\n \r\n <!-- Edit Button Column -->\r\n @if(_ButtonByRow('showEditButton')) {\r\n <th scope=\"col\" class=\"action-button\"></th>\r\n }\r\n \r\n <!-- Go Button Column -->\r\n @if(_ButtonByRow('showGoButton')) {\r\n <th scope=\"col\" class=\"action-button\"></th>\r\n }\r\n </tr>\r\n </thead>\r\n \r\n <!-- body -->\r\n @for(group of _gridDataSource(); track group.indexGroup) {\r\n <tbody>\r\n <!--<tr v-if=\"_isGrouped\">\r\n <td :colspan=\"_colspan\" class=\"group\">\r\n <MesAccordion\r\n :ref=\"`accordion${group.indexGroup}-${id}`\"\r\n :title=\"`${_CleanHeaderName(groupBy)} (${group.length}): ${group.groupBy}`\"\r\n :isLoading=\"_isLoading()\"\r\n @expanded=\"_ToogleAccordion(group.groupBy, true, group.indexGroup)\"\r\n @collapsed=\"_ToogleAccordion(group.groupBy, false, group.indexGroup)\"\r\n ></MesAccordion>\r\n </td>\r\n </tr>-->\r\n \r\n @for(row of group.rows; track row.indexRow) {\r\n <tr [id]=\"_GetId(row.indexRow, 0, 'row')\"\r\n [ngClass]=\"{ 'loading': isLoading(), 'd-none': _HideRow(group), 'row-focus': (row.indexRow == _indexFocus() && enableRowFocus()) }\"\r\n (click)=\"_indexFocus.set(row.indexRow)\">\r\n \r\n @if(checkbox.show) {\r\n <!-- CheckBox Column -->\r\n <td class=\"check-box\">\r\n <div [ngClass]=\"{ 'invisible': _isLoadingMessage }\">\r\n <coer-checkbox\r\n [id]=\"_GetId(row.indexRow, 0, 'checkbox')\"\r\n [ignoreDataBinding]=\"true\"\r\n [isDisabled]=\"_isDisabled() || _isLoading()\"\r\n (onChange)=\"_ClickCheck(_GetId(row.indexRow, 0, 'checkbox'), $event, false, row)\"\r\n ></coer-checkbox>\r\n </div>\r\n \r\n <div [ngClass]=\"{ 'invisible': !_isLoadingMessage, 'spinner-border-container': true }\">\r\n <i class=\"spinner-border\"></i>\r\n </div>\r\n </td>\r\n }\r\n \r\n <!-- Dynamic Column -->\r\n @for(header of _gridColumns(); track header.indexColumn) {\r\n @if(_IsCellType(header.columnName, row, 'template')) {\r\n <td class=\"template\"\r\n (click)=\"_isDisabled() ? null : onClickRow.emit(row)\"\r\n (dblclick)=\"_isDisabled() ? null : onDoubleClickRow.emit(row)\">\r\n <div [innerHTML]=\"_GetAttribute(header.columnName, row, 'template', 'defaul-cell') | html\" class=\"template\"></div>\r\n </td>\r\n }\r\n \r\n @else if(_IsCellType(header.columnName, row, 'coerTextbox')) {\r\n <!-- coer-textbox -->\r\n <td class=\"coer-textbox\">\r\n <coer-textbox\r\n [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n [(ngModel)]=\"row[header.columnName]\"\r\n [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerTextbox') || _isDisabled() || _isLoading()\"\r\n [isValid]=\"_GetAttribute(header.columnName, row, 'isValid', 'coerTextbox') || false\"\r\n [isInvalid]=\"_GetAttribute(header.columnName, row, 'isInvalid', 'coerTextbox') || false\"\r\n [selectOnFocus]=\"_GetAttribute(header.columnName, row, 'selectOnFocus', 'coerTextbox') || true\"\r\n [placeholder]=\"_GetAttribute(header.columnName, row, 'placeholder', 'coerTextbox') || ('Type ' + header.columnName + '...')\"\r\n [textPosition]=\"_GetAttribute(header.columnName, row, 'textPosition', 'coerTextbox') || 'left'\"\r\n [minLength]=\"_GetAttribute(header.columnName, row, 'minLength', 'coerTextbox') || 0\"\r\n [maxLength]=\"_GetAttribute(header.columnName, row, 'maxLength', 'coerTextbox') || 50\"\r\n (onInput)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-textbox')\"\r\n (onKeyupEnter)=\"_KeyupEnter(header.indexColumn, row, 'coer-textbox', $event)\"\r\n ></coer-textbox>\r\n </td>\r\n }\r\n \r\n \r\n @else if(_IsCellType(header.columnName, row, 'coerNumberbox')) {\r\n <!-- coer-numberbox -->\r\n <td class=\"coer-numberbox\">\r\n <coer-numberbox\r\n [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n [(ngModel)]=\"row[header.columnName]\"\r\n [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerNumberbox') || _isDisabled() || _isLoading()\"\r\n [isValid]=\"_GetAttribute(header.columnName, row, 'isValid', 'coerNumberbox') || false\"\r\n [isInvalid]=\"_GetAttribute(header.columnName, row, 'isInvalid', 'coerNumberbox') || false\"\r\n [selectOnFocus]=\"_GetAttribute(header.columnName, row, 'selectOnFocus', 'coerNumberbox') || true\"\r\n [placeholder]=\"_GetAttribute(header.columnName, row, 'placeholder', 'coerNumberbox') || ''\"\r\n [textPosition]=\"_GetAttribute(header.columnName, row, 'textPosition', 'coerNumberbox') || 'right'\"\r\n [min]=\"_GetAttribute(header.columnName, row, 'min', 'coerNumberbox') || 0\"\r\n [max]=\"_GetAttribute(header.columnName, row, 'max', 'coerNumberbox') || 2147483647\"\r\n [decimals]=\"_GetAttribute(header.columnName, row, 'decimals', 'coerNumberbox') || 0\"\r\n (onInput)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-numberbox')\"\r\n (onKeyupEnter)=\"_KeyupEnter(header.indexColumn, row, 'coer-numberbox', $event)\"\r\n ></coer-numberbox>\r\n </td>\r\n }\r\n \r\n \r\n @else if(_IsCellType(header.columnName, row, 'coerSelectbox')) {\r\n <!-- coer-numberbox -->\r\n <td class=\"coer-selectbox\">\r\n <coer-selectbox\r\n [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n [(ngModel)]=\"row[header.columnName]\"\r\n [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerSelectbox') || _isDisabled() || _isLoading()\"\r\n [isValid]=\"_GetAttribute(header.columnName, row, 'isValid', 'coerSelectbox') || false\"\r\n [isInvalid]=\"_GetAttribute(header.columnName, row, 'isInvalid', 'coerSelectbox') || false\"\r\n [dataSource]=\"_GetAttribute(header.columnName, row, 'dataSource', 'coerSelectbox') || []\"\r\n [placeholder]=\"_GetAttribute(header.columnName, row, 'placeholder', 'coerSelectbox') || '-- Select --'\"\r\n [displayProperty]=\"_GetAttribute(header.columnName, row, 'displayProperty', 'coerSelectbox') || 'name'\"\r\n (onSelected)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-selectbox'); _KeyupEnter(header.indexColumn, row, 'coer-selectbox', $event)\"\r\n ></coer-selectbox>\r\n </td>\r\n }\r\n \r\n \r\n @else if(_IsCellType(header.columnName, row, 'coerSwitch')) {\r\n <!-- coer-switch -->\r\n <td>\r\n <coer-switch\r\n [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n [(ngModel)]=\"row[header.columnName]\"\r\n [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerSwitch') || _isDisabled() || _isLoading()\"\r\n [tooltip]=\"_GetAttribute(header.columnName, row, 'tooltip', 'coerSwitch')\"\r\n [tooltipPosition]=\"_GetAttribute(header.columnName, row, 'tooltipPosition', 'coerSwitch') || 'left'\"\r\n [isInvisible]=\"_isDisabled()\"\r\n (onChange)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-switch')\"\r\n ></coer-switch>\r\n </td>\r\n }\r\n \r\n @else {\r\n <!-- Default Cell -->\r\n <td class=\"default-cell\"\r\n (click)=\"_ClickOnRow(row)\"\r\n (dblclick)=\"_isDisabled() ? null : onDoubleClickRow.emit(row)\"\r\n [ngStyle]=\"{\r\n 'text-align': _GetAttribute(header.columnName, row, 'textAlign', 'defaul-cell'),\r\n 'white-space': 'normal'\r\n }\">\r\n \r\n <div [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n [ngClass]=\"{\r\n 'text-blue-bold': _IsCellColor(header.columnName, row, 'colorBlue'),\r\n 'text-green-bold': _IsCellColor(header.columnName, row, 'colorGreen'),\r\n 'text-yellow-bold': _IsCellColor(header.columnName, row, 'colorYellow'),\r\n 'text-red-bold': _IsCellColor(header.columnName, row, 'colorRed'),\r\n 'text-right-bold': _IsCellType(header.columnName, row, 'number')\r\n }\">\r\n \r\n @if(_IsCellType(header.columnName, row, 'number')) {\r\n <span> {{ GetNumericFormat(row[header.columnName]) }} </span>\r\n }\r\n \r\n @else if(_IsCellType(header.columnName, row, 'date')) {\r\n <span> {{ _GetDateFormat(row[header.columnName], _IsCellType(header.columnName, row, 'toLocalZone')) }} </span>\r\n }\r\n \r\n @else if(_IsCellType(header.columnName, row, 'date-time')) {\r\n <span> {{ _GetDateTimeFormat(row[header.columnName], _IsCellType(header.columnName, row, 'toLocalZone')) }} </span>\r\n }\r\n \r\n @else {\r\n <span> {{ _GetCellValue(row, header.columnName) }} </span>\r\n }\r\n </div>\r\n </td>\r\n }\r\n }\r\n \r\n <!-- Delete Button -->\r\n @if(_ButtonByRow('showDeleteButton')) {\r\n <td class=\"action-button\">\r\n @if(_ButtonByRow('showDeleteButton', row)) {\r\n <coer-button\r\n type=\"icon-no-border\"\r\n [color]=\"_ColorButtonByRow('deleteButtonColor')\"\r\n icon=\"delete\"\r\n [tooltip]=\"_GetTooltip('Delete', row)\"\r\n [isInvisible]=\"_isDisabled()\"\r\n [isReadonly]=\"isReadonly()\"\r\n [isDisabled]=\"_isLoading()\"\r\n (onClick)=\"onClickDeleteRow.emit(row)\"\r\n ></coer-button>\r\n }\r\n </td>\r\n }\r\n \r\n <!-- Edit Button -->\r\n @if(_ButtonByRow('showEditButton')) {\r\n <td class=\"action-button\">\r\n @if(_ButtonByRow('showEditButton', row)) {\r\n <coer-button\r\n type=\"icon-no-border\"\r\n [color]=\"_ColorButtonByRow('editButtonColor')\"\r\n icon=\"edit\"\r\n [tooltip]=\"_GetTooltip('Edit', row)\"\r\n [isInvisible]=\"_isDisabled()\"\r\n [isDisabled]=\"_isLoading()\"\r\n (onClick)=\"onClickEditRow.emit(row)\"\r\n ></coer-button>\r\n }\r\n </td>\r\n }\r\n \r\n <!-- Go Button -->\r\n @if(_ButtonByRow('showGoButton')) {\r\n <td class=\"action-button\">\r\n @if(_ButtonByRow('showGoButton', row)) {\r\n <coer-button\r\n type=\"icon-no-border\"\r\n [color]=\"_ColorButtonByRow('goButtonColor')\"\r\n icon=\"go\"\r\n [tooltip]=\"_GetTooltip('Go to', row, 'detail')\"\r\n [isInvisible]=\"_isDisabled()\"\r\n [isDisabled]=\"_isLoading()\"\r\n (onClick)=\"onClickGoRow.emit(row)\"\r\n ></coer-button>\r\n }\r\n </td>\r\n }\r\n </tr>\r\n }\r\n </tbody>\r\n }\r\n </table>\r\n }\r\n\r\n @else {\r\n <!-- Grid Message -->\r\n <div class=\"loading\" [ngStyle]=\"{ \r\n 'width': '100%', \r\n 'height': '100%',\r\n 'bottom': showFooter() ? '35px' : '10px'\r\n }\">\r\n <i class=\"spinner-border\"></i>\r\n <span class=\"fa-fade\">Loading</span>\r\n </div> \r\n }\r\n </div>\r\n </section>\r\n\r\n @if(showFooter()) {\r\n <footer class=\"grid-footer\">\r\n <span>\r\n @if(_isLoadingMessage) {\r\n <span class=\"fa-fade\"> Loading </span>\r\n }\r\n\r\n @else if(gridLength().dataSourceSelected > 0) {\r\n <span>\r\n <i class=\"bi bi-check2-square ms-1\"></i>\r\n {{ gridLength().dataSourceSelected }}\r\n </span>\r\n }\r\n </span>\r\n\r\n <span class=\"me-1\"> {{ gridLength().dataSourceFiltered | numericFormat }} Rows </span>\r\n </footer>\r\n }\r\n</div>", styles: ["div.coer-grid header{align-items:flex-end;justify-content:flex-end;padding-right:8px;margin:0}div.coer-grid header>div{padding:0 0 10px 10px;display:flex;align-items:baseline}div.coer-grid header>div a{height:40px!important}div.coer-grid table{table-layout:auto;border-collapse:separate;border-spacing:1px 0px;margin:0;font-size:14px}div.coer-grid table thead tr th{position:sticky!important;z-index:100!important;top:0!important;background-color:var(--gray)!important;color:var(--smoke)!important;padding:5px!important;vertical-align:middle!important;overflow:hidden;text-overflow:ellipsis;word-wrap:break-word;min-width:50px!important;white-space:nowrap!important}div.coer-grid table tbody{border:0px!important}div.coer-grid table tbody tr:not(.row-focus):hover td{color:#000!important;background-color:#f1f6ff}div.coer-grid table tbody tr td{border:0px!important;padding:5px!important;vertical-align:middle!important;white-space:break-spaces;text-overflow:ellipsis;overflow:hidden;min-height:31px!important}div.coer-grid table tbody tr.row-focus td{background-color:#cde1ff}div.coer-grid table tbody tr td.coer-textbox,div.coer-grid table tbody tr td.coer-numberbox,div.coer-grid table tbody tr td.coer-selectbox{padding:0!important;overflow:visible!important}div.coer-grid table tbody tr td.default-cell{cursor:pointer!important}div.coer-grid table thead tr th.action-button,div.coer-grid table thead tr td.action-button,div.coer-grid table thead tr th.check-box,div.coer-grid table thead tr td.check-box,div.coer-grid table tbody tr th.action-button,div.coer-grid table tbody tr td.action-button,div.coer-grid table tbody tr th.check-box table tbody tr td.check-box{text-align:center!important;cursor:default!important;min-width:40px!important;max-width:40px!important;width:40px!important;padding:0!important}div.coer-grid footer.grid-footer{display:flex;align-items:center;justify-content:space-between;font-size:small;color:#999;padding-top:5px}div.coer-grid section.grid-container{position:relative;overflow:auto}div.coer-grid div.loading,div.coer-grid div.no-data{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:25px;color:gray}div.coer-grid div.loading{background-color:#bbbbbb83!important;flex-direction:column!important;gap:10px!important;z-index:1}div.coer-grid div.loading span.fa-fade{position:relative!important;top:50px!important}div.coer-grid tr.loading{background-color:#bbbbbb83!important}div.coer-grid div.loading i.spinner-border{color:var(--primary-inner)!important;width:70px!important;height:70px!important;font-size:20px!important;position:absolute!important}div.coer-grid td.check-box div.spinner-border-container{position:absolute;transform:translate(7px,-19px)}div.coer-grid td.check-box div.spinner-border-container i.spinner-border{width:15px!important;height:15px!important;color:var(--primary-inner)!important}div.coer-grid table thead tr th.check-box>div,div.coer-grid table tbody tr td.check-box>div{display:flex;align-items:center;justify-content:center;cursor:default!important}div.coer-grid input.form-check-input{box-shadow:none!important;margin:0}div.coer-grid input[type=checkbox]{cursor:pointer!important}div.coer-grid td.group{padding:0!important;margin:0!important}div.coer-grid td.group>*{border-top:1px solid var(--gray)!important;border-bottom:1px solid var(--gray)!important;padding:0!important;margin:0!important}div.coer-grid .template,div.coer-grid .template div{white-space:nowrap!important;display:flex!important;align-items:center!important;cursor:pointer!important;gap:5px!important;width:100%}\n"] }]
|
|
2801
2808
|
}] });
|
|
2802
2809
|
|
|
2803
2810
|
class CoerList {
|
|
@@ -3164,16 +3171,18 @@ class CoerSecretBox extends ControlValue {
|
|
|
3164
3171
|
this.Focus(false, delay);
|
|
3165
3172
|
}
|
|
3166
3173
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSecretBox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3167
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerSecretBox, isStandalone: false, selector: "coer-secretbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, showSecret: { classPropertyName: "showSecret", publicName: "showSecret", isSignal: true, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", 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 }, 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: { onKeyupEnter: "onKeyupEnter", onInput: "onInput", onClickClear: "onClickClear", onClickExternalButton: "onClickExternalButton" }, providers: [CONTROL_VALUE(CoerSecretBox)], viewQueries: [{ propertyName: "matFormField", first: true, predicate: ["matFormField"], descendants: true, isSignal: true }, { propertyName: "coerTextBox", first: true, predicate: ["coerTextBox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-text-box\">\r\n <mat-form-field\r\n [id]=\"_id + '-container'\"\r\n [floatLabel]=\"_floatLabel()\"\r\n [ngClass]=\"{\r\n 'readonly': isReadonly() && !isLoading(),\r\n 'd-none': isInvisible()\r\n }\"\r\n [style]=\"{\r\n 'width': width(),\r\n 'min-width': minWidth(),\r\n 'max-width': maxWidth(),\r\n 'margin-top': marginTop(),\r\n 'margin-right': marginRight(),\r\n 'margin-bottom': marginBottom(),\r\n 'margin-left': marginLeft()\r\n }\">\r\n <mat-label>{{ label() }}</mat-label>\r\n \r\n <input #coerTextBox matInput\r\n [id]=\"_id\"\r\n [type]=\"_passwordType ? 'password': 'text'\"\r\n [placeholder]=\"placeholder()\"\r\n [minLength]=\"minLength()\"\r\n [maxLength]=\"maxLength()\"\r\n [disabled]=\"!_isEnable()\"\r\n [value]=\"_value\"\r\n (input)=\"SetValue(coerTextBox.value)\"\r\n (blur)=\"SetTouched(true)\"\r\n [style]=\"{\r\n 'cursor': isLoading() ? 'wait' : null,\r\n 'margin-top': (_floatLabel() == 'auto') ? '15px' : '9px',\r\n 'padding-right': _paddingRight(),\r\n 'text-align': textPosition()\r\n }\">\r\n\r\n @if(isLoading()) {\r\n <div class=\"placeholder-glow\">\r\n <span class=\"placeholder\"></span>\r\n </div>\r\n }\r\n\r\n <span class=\"icon-container\"> \r\n @if(isInvalid() && !isDisabled() && !isLoading()) {\r\n <i class=\"fa-solid fa-circle-exclamation\"></i>\r\n }\r\n\r\n @else if(isValid() && !isDisabled() && !isLoading()) {\r\n <i class=\"fa-solid fa-circle-check text-green\"></i>\r\n }\r\n\r\n @if(_showSecret) {\r\n <i [ngClass]=\"{\r\n 'fa-solid cursor-pointer': true, \r\n 'fa-eye-slash': passwordType,\r\n 'fa-eye': !passwordType\r\n }\" \r\n [ngStyle]=\"{\r\n 'margin-right': isInvalid() || isValid() ? '25px' : '0px'\r\n }\"\r\n (click)=\"passwordType = !passwordType\"></i> \r\n }\r\n </span>\r\n </mat-form-field> \r\n\r\n @if(isInvisible()) {\r\n <mat-form-field class=\"invisible\">\r\n <input matInput [disabled]=\"true\"> \r\n </mat-form-field> \r\n } \r\n</div> ", styles: ["div.coer-text-box{display:flex;align-items:center}div.coer-text-box mat-form-field{position:relative!important}div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:40px!important}div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix{width:100%!important;height:40px!important;padding:0!important}div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix label{overflow:visible!important;position:absolute!important;top:20px!important}div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix label.mdc-floating-label--float-above mat-label{color:var(--primary-inner);font-weight:700;position:relative;left:-10px;top:2px}div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix input{font-weight:400!important;font-size:17px!important;color:var(--black)!important}div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active,div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:before,div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:after{border-bottom-color:var(--primary-inner)!important}div.coer-text-box mat-form-field div.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align{height:0px!important}div.coer-text-box mat-form-field span.icon-container{position:absolute!important;top:1px!important;right:-14px!important;z-index:5!important;width:30px;height:40px;display:flex;align-items:center;justify-content:center;gap:5px}div.coer-text-box mat-form-field span.icon-container i{font-size:20px!important}div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-eye-slash,div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-eye{color:#caced1!important;cursor:pointer!important}div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-eye-slash:hover,div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-eye:hover{color:#6c757d!important}div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-circle-check{color:var(--green)!important}div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-circle-exclamation{color:var(--red)!important}div.coer-text-box mat-form-field span.placeholder{width:calc(100% + 32px)!important;height:40px!important;position:absolute!important;z-index:1!important;top:0!important;left:-16px!important;cursor:wait!important}div.coer-text-box mat-form-field .placeholder,div.coer-text-box mat-form-field .placeholder *,div.coer-text-box mat-form-field .placeholder-glow,div.coer-text-box mat-form-field .placeholder-glow *{cursor:wait!important}div.coer-text-box mat-form-field.readonly div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:#bbbbbb83!important}coer-grid table tbody tr td.coer-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:transparent!important;padding-left:9px!important;padding-right:9px!important}coer-grid table tbody tr td.coer-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple,coer-grid table tbody tr td.coer-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:before,coer-grid table tbody tr td.coer-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:after{border-bottom-color:transparent!important}coer-grid table tbody tr td.coer-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:28px!important}coer-grid table tbody tr td.coer-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix{height:28px!important}coer-grid table tbody tr td.coer-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix input{margin-top:3px!important;font-size:14px!important}coer-grid table tbody tr td.coer-textbox mat-form-field span.icon-container{transform:translate(-5px,-6px)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] }); }
|
|
3174
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerSecretBox, isStandalone: false, selector: "coer-secretbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, showSecret: { classPropertyName: "showSecret", publicName: "showSecret", isSignal: true, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", 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 }, 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: { onKeyupEnter: "onKeyupEnter", onInput: "onInput", onClickClear: "onClickClear", onClickExternalButton: "onClickExternalButton" }, providers: [CONTROL_VALUE(CoerSecretBox)], viewQueries: [{ propertyName: "matFormField", first: true, predicate: ["matFormField"], descendants: true, isSignal: true }, { propertyName: "coerTextBox", first: true, predicate: ["coerTextBox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-text-box\">\r\n <mat-form-field\r\n [id]=\"_id + '-container'\"\r\n [floatLabel]=\"_floatLabel()\"\r\n [ngClass]=\"{\r\n 'readonly': isReadonly() && !isLoading(),\r\n 'd-none': isInvisible()\r\n }\"\r\n [style]=\"{\r\n 'width': width(),\r\n 'min-width': minWidth(),\r\n 'max-width': maxWidth(),\r\n 'margin-top': marginTop(),\r\n 'margin-right': marginRight(),\r\n 'margin-bottom': marginBottom(),\r\n 'margin-left': marginLeft()\r\n }\">\r\n <mat-label>{{ label() }}</mat-label>\r\n \r\n <input #coerTextBox matInput\r\n [id]=\"_id\"\r\n [type]=\"_passwordType ? 'password': 'text'\"\r\n [placeholder]=\"placeholder()\"\r\n [minLength]=\"minLength()\"\r\n [maxLength]=\"maxLength()\"\r\n [disabled]=\"!_isEnable()\"\r\n [value]=\"_value\"\r\n (input)=\"SetValue(coerTextBox.value)\"\r\n (blur)=\"SetTouched(true)\"\r\n [style]=\"{\r\n 'cursor': isLoading() ? 'wait' : null,\r\n 'margin-top': (_floatLabel() == 'auto') ? '15px' : '9px',\r\n 'padding-right': _paddingRight(),\r\n 'text-align': textPosition()\r\n }\">\r\n\r\n @if(isLoading()) {\r\n <div class=\"placeholder-glow\">\r\n <span class=\"placeholder\"></span>\r\n </div>\r\n }\r\n\r\n <span class=\"icon-container\"> \r\n @if(isInvalid() && !isDisabled() && !isLoading()) {\r\n <i class=\"fa-solid fa-circle-exclamation\"></i>\r\n }\r\n\r\n @else if(isValid() && !isDisabled() && !isLoading()) {\r\n <i class=\"fa-solid fa-circle-check text-green\"></i>\r\n }\r\n\r\n @if(_showSecret) {\r\n <i [ngClass]=\"{\r\n 'fa-solid cursor-pointer': true, \r\n 'fa-eye-slash': passwordType,\r\n 'fa-eye': !passwordType\r\n }\" \r\n [ngStyle]=\"{\r\n 'margin-right': isInvalid() || isValid() ? '25px' : '0px'\r\n }\"\r\n (click)=\"passwordType = !passwordType\"></i> \r\n }\r\n </span>\r\n </mat-form-field> \r\n\r\n @if(isInvisible()) {\r\n <mat-form-field class=\"invisible\">\r\n <input matInput [disabled]=\"true\"> \r\n </mat-form-field> \r\n } \r\n</div> ", styles: ["div.coer-text-box{display:flex;align-items:center}div.coer-text-box mat-form-field{position:relative!important}div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:40px!important}div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix{width:100%!important;height:40px!important;padding:0!important}div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix label{overflow:visible!important;position:absolute!important;top:20px!important}div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix label.mdc-floating-label--float-above mat-label{color:var(--primary-inner);font-weight:700;position:relative;left:-10px;top:2px}div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix input{font-weight:400!important;font-size:17px!important;color:var(--black)!important}div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active,div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:before,div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:after{border-bottom-color:var(--primary-inner)!important}div.coer-text-box mat-form-field div.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align{height:0px!important}div.coer-text-box mat-form-field span.icon-container{position:absolute!important;top:1px!important;right:-14px!important;z-index:5!important;width:30px;height:40px;display:flex;align-items:center;justify-content:center;gap:5px}div.coer-text-box mat-form-field span.icon-container i{font-size:20px!important}div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-eye,div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-eye-slash{color:#caced1!important;cursor:pointer!important}div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-eye:hover,div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-eye-slash:hover{color:#6c757d!important}div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-circle-check{color:var(--green)!important}div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-circle-exclamation{color:var(--red)!important}div.coer-text-box mat-form-field span.placeholder{width:calc(100% + 32px)!important;height:40px!important;position:absolute!important;z-index:1!important;top:0!important;left:-16px!important;cursor:wait!important}div.coer-text-box mat-form-field .placeholder,div.coer-text-box mat-form-field .placeholder *,div.coer-text-box mat-form-field .placeholder-glow,div.coer-text-box mat-form-field .placeholder-glow *{cursor:wait!important}div.coer-text-box mat-form-field.readonly div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:#bbbbbb83!important}coer-grid table tbody tr td.coer-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:transparent!important;padding-left:9px!important;padding-right:9px!important}coer-grid table tbody tr td.coer-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple,coer-grid table tbody tr td.coer-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:before,coer-grid table tbody tr td.coer-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:after{border-bottom-color:transparent!important}coer-grid table tbody tr td.coer-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:28px!important}coer-grid table tbody tr td.coer-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix{height:28px!important}coer-grid table tbody tr td.coer-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix input{margin-top:3px!important;font-size:14px!important}coer-grid table tbody tr td.coer-textbox mat-form-field span.icon-container{transform:translate(-5px,-6px)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] }); }
|
|
3168
3175
|
}
|
|
3169
3176
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSecretBox, decorators: [{
|
|
3170
3177
|
type: Component,
|
|
3171
|
-
args: [{ selector: 'coer-secretbox', providers: [CONTROL_VALUE(CoerSecretBox)], standalone: false, template: "<div class=\"coer-text-box\">\r\n <mat-form-field\r\n [id]=\"_id + '-container'\"\r\n [floatLabel]=\"_floatLabel()\"\r\n [ngClass]=\"{\r\n 'readonly': isReadonly() && !isLoading(),\r\n 'd-none': isInvisible()\r\n }\"\r\n [style]=\"{\r\n 'width': width(),\r\n 'min-width': minWidth(),\r\n 'max-width': maxWidth(),\r\n 'margin-top': marginTop(),\r\n 'margin-right': marginRight(),\r\n 'margin-bottom': marginBottom(),\r\n 'margin-left': marginLeft()\r\n }\">\r\n <mat-label>{{ label() }}</mat-label>\r\n \r\n <input #coerTextBox matInput\r\n [id]=\"_id\"\r\n [type]=\"_passwordType ? 'password': 'text'\"\r\n [placeholder]=\"placeholder()\"\r\n [minLength]=\"minLength()\"\r\n [maxLength]=\"maxLength()\"\r\n [disabled]=\"!_isEnable()\"\r\n [value]=\"_value\"\r\n (input)=\"SetValue(coerTextBox.value)\"\r\n (blur)=\"SetTouched(true)\"\r\n [style]=\"{\r\n 'cursor': isLoading() ? 'wait' : null,\r\n 'margin-top': (_floatLabel() == 'auto') ? '15px' : '9px',\r\n 'padding-right': _paddingRight(),\r\n 'text-align': textPosition()\r\n }\">\r\n\r\n @if(isLoading()) {\r\n <div class=\"placeholder-glow\">\r\n <span class=\"placeholder\"></span>\r\n </div>\r\n }\r\n\r\n <span class=\"icon-container\"> \r\n @if(isInvalid() && !isDisabled() && !isLoading()) {\r\n <i class=\"fa-solid fa-circle-exclamation\"></i>\r\n }\r\n\r\n @else if(isValid() && !isDisabled() && !isLoading()) {\r\n <i class=\"fa-solid fa-circle-check text-green\"></i>\r\n }\r\n\r\n @if(_showSecret) {\r\n <i [ngClass]=\"{\r\n 'fa-solid cursor-pointer': true, \r\n 'fa-eye-slash': passwordType,\r\n 'fa-eye': !passwordType\r\n }\" \r\n [ngStyle]=\"{\r\n 'margin-right': isInvalid() || isValid() ? '25px' : '0px'\r\n }\"\r\n (click)=\"passwordType = !passwordType\"></i> \r\n }\r\n </span>\r\n </mat-form-field> \r\n\r\n @if(isInvisible()) {\r\n <mat-form-field class=\"invisible\">\r\n <input matInput [disabled]=\"true\"> \r\n </mat-form-field> \r\n } \r\n</div> ", styles: ["div.coer-text-box{display:flex;align-items:center}div.coer-text-box mat-form-field{position:relative!important}div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:40px!important}div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix{width:100%!important;height:40px!important;padding:0!important}div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix label{overflow:visible!important;position:absolute!important;top:20px!important}div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix label.mdc-floating-label--float-above mat-label{color:var(--primary-inner);font-weight:700;position:relative;left:-10px;top:2px}div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix input{font-weight:400!important;font-size:17px!important;color:var(--black)!important}div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active,div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:before,div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:after{border-bottom-color:var(--primary-inner)!important}div.coer-text-box mat-form-field div.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align{height:0px!important}div.coer-text-box mat-form-field span.icon-container{position:absolute!important;top:1px!important;right:-14px!important;z-index:5!important;width:30px;height:40px;display:flex;align-items:center;justify-content:center;gap:5px}div.coer-text-box mat-form-field span.icon-container i{font-size:20px!important}div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-eye
|
|
3178
|
+
args: [{ selector: 'coer-secretbox', providers: [CONTROL_VALUE(CoerSecretBox)], standalone: false, template: "<div class=\"coer-text-box\">\r\n <mat-form-field\r\n [id]=\"_id + '-container'\"\r\n [floatLabel]=\"_floatLabel()\"\r\n [ngClass]=\"{\r\n 'readonly': isReadonly() && !isLoading(),\r\n 'd-none': isInvisible()\r\n }\"\r\n [style]=\"{\r\n 'width': width(),\r\n 'min-width': minWidth(),\r\n 'max-width': maxWidth(),\r\n 'margin-top': marginTop(),\r\n 'margin-right': marginRight(),\r\n 'margin-bottom': marginBottom(),\r\n 'margin-left': marginLeft()\r\n }\">\r\n <mat-label>{{ label() }}</mat-label>\r\n \r\n <input #coerTextBox matInput\r\n [id]=\"_id\"\r\n [type]=\"_passwordType ? 'password': 'text'\"\r\n [placeholder]=\"placeholder()\"\r\n [minLength]=\"minLength()\"\r\n [maxLength]=\"maxLength()\"\r\n [disabled]=\"!_isEnable()\"\r\n [value]=\"_value\"\r\n (input)=\"SetValue(coerTextBox.value)\"\r\n (blur)=\"SetTouched(true)\"\r\n [style]=\"{\r\n 'cursor': isLoading() ? 'wait' : null,\r\n 'margin-top': (_floatLabel() == 'auto') ? '15px' : '9px',\r\n 'padding-right': _paddingRight(),\r\n 'text-align': textPosition()\r\n }\">\r\n\r\n @if(isLoading()) {\r\n <div class=\"placeholder-glow\">\r\n <span class=\"placeholder\"></span>\r\n </div>\r\n }\r\n\r\n <span class=\"icon-container\"> \r\n @if(isInvalid() && !isDisabled() && !isLoading()) {\r\n <i class=\"fa-solid fa-circle-exclamation\"></i>\r\n }\r\n\r\n @else if(isValid() && !isDisabled() && !isLoading()) {\r\n <i class=\"fa-solid fa-circle-check text-green\"></i>\r\n }\r\n\r\n @if(_showSecret) {\r\n <i [ngClass]=\"{\r\n 'fa-solid cursor-pointer': true, \r\n 'fa-eye-slash': passwordType,\r\n 'fa-eye': !passwordType\r\n }\" \r\n [ngStyle]=\"{\r\n 'margin-right': isInvalid() || isValid() ? '25px' : '0px'\r\n }\"\r\n (click)=\"passwordType = !passwordType\"></i> \r\n }\r\n </span>\r\n </mat-form-field> \r\n\r\n @if(isInvisible()) {\r\n <mat-form-field class=\"invisible\">\r\n <input matInput [disabled]=\"true\"> \r\n </mat-form-field> \r\n } \r\n</div> ", styles: ["div.coer-text-box{display:flex;align-items:center}div.coer-text-box mat-form-field{position:relative!important}div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:40px!important}div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix{width:100%!important;height:40px!important;padding:0!important}div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix label{overflow:visible!important;position:absolute!important;top:20px!important}div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix label.mdc-floating-label--float-above mat-label{color:var(--primary-inner);font-weight:700;position:relative;left:-10px;top:2px}div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix input{font-weight:400!important;font-size:17px!important;color:var(--black)!important}div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active,div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:before,div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:after{border-bottom-color:var(--primary-inner)!important}div.coer-text-box mat-form-field div.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align{height:0px!important}div.coer-text-box mat-form-field span.icon-container{position:absolute!important;top:1px!important;right:-14px!important;z-index:5!important;width:30px;height:40px;display:flex;align-items:center;justify-content:center;gap:5px}div.coer-text-box mat-form-field span.icon-container i{font-size:20px!important}div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-eye,div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-eye-slash{color:#caced1!important;cursor:pointer!important}div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-eye:hover,div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-eye-slash:hover{color:#6c757d!important}div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-circle-check{color:var(--green)!important}div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-circle-exclamation{color:var(--red)!important}div.coer-text-box mat-form-field span.placeholder{width:calc(100% + 32px)!important;height:40px!important;position:absolute!important;z-index:1!important;top:0!important;left:-16px!important;cursor:wait!important}div.coer-text-box mat-form-field .placeholder,div.coer-text-box mat-form-field .placeholder *,div.coer-text-box mat-form-field .placeholder-glow,div.coer-text-box mat-form-field .placeholder-glow *{cursor:wait!important}div.coer-text-box mat-form-field.readonly div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:#bbbbbb83!important}coer-grid table tbody tr td.coer-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:transparent!important;padding-left:9px!important;padding-right:9px!important}coer-grid table tbody tr td.coer-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple,coer-grid table tbody tr td.coer-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:before,coer-grid table tbody tr td.coer-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:after{border-bottom-color:transparent!important}coer-grid table tbody tr td.coer-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:28px!important}coer-grid table tbody tr td.coer-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix{height:28px!important}coer-grid table tbody tr td.coer-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix input{margin-top:3px!important;font-size:14px!important}coer-grid table tbody tr td.coer-textbox mat-form-field span.icon-container{transform:translate(-5px,-6px)!important}\n"] }]
|
|
3172
3179
|
}], ctorParameters: () => [] });
|
|
3173
3180
|
|
|
3174
3181
|
class CoerPageTitle {
|
|
3175
3182
|
//Constructor
|
|
3176
3183
|
constructor() {
|
|
3184
|
+
//Elements
|
|
3185
|
+
this._informationButton = viewChild.required('infoButton');
|
|
3177
3186
|
//Variables
|
|
3178
3187
|
this._iconRoot = 'icon-fill icon-house';
|
|
3179
3188
|
//Inputs
|
|
@@ -3197,12 +3206,17 @@ class CoerPageTitle {
|
|
|
3197
3206
|
}
|
|
3198
3207
|
}
|
|
3199
3208
|
}
|
|
3209
|
+
/** */
|
|
3210
|
+
_ClickInformation() {
|
|
3211
|
+
this._informationButton()._elementRef?.nativeElement?.blur();
|
|
3212
|
+
this.onClickInformation.emit();
|
|
3213
|
+
}
|
|
3200
3214
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerPageTitle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3201
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerPageTitle, isStandalone: false, selector: "coer-page-title", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showBreadcrumbs: { classPropertyName: "showBreadcrumbs", publicName: "showBreadcrumbs", isSignal: true, isRequired: false, transformFunction: null }, breadcrumbs: { classPropertyName: "breadcrumbs", publicName: "breadcrumbs", isSignal: true, isRequired: false, transformFunction: null }, goBack: { classPropertyName: "goBack", publicName: "goBack", isSignal: true, isRequired: false, transformFunction: null }, information: { classPropertyName: "information", publicName: "information", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClickInformation: "onClickInformation" }, ngImport: i0, template: "<header class=\"coer-page-title\" title=''>\r\n <h2>\r\n <span> {{ title() }} </span>\r\n\r\n <!-- Button Information -->\r\n @if(information().show) {\r\n <button mat-icon-button\r\n [matTooltip]=\"_tooltip()\"\r\n matTooltipPosition=\"before\"\r\n [matTooltipDisabled]=\"false\"\r\n [matTooltipHideDelay]=\"0\"\r\n type=\"button\"\r\n (click)=\"
|
|
3215
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerPageTitle, isStandalone: false, selector: "coer-page-title", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showBreadcrumbs: { classPropertyName: "showBreadcrumbs", publicName: "showBreadcrumbs", isSignal: true, isRequired: false, transformFunction: null }, breadcrumbs: { classPropertyName: "breadcrumbs", publicName: "breadcrumbs", isSignal: true, isRequired: false, transformFunction: null }, goBack: { classPropertyName: "goBack", publicName: "goBack", isSignal: true, isRequired: false, transformFunction: null }, information: { classPropertyName: "information", publicName: "information", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClickInformation: "onClickInformation" }, viewQueries: [{ propertyName: "_informationButton", first: true, predicate: ["infoButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<header class=\"coer-page-title\" title=''>\r\n <h2>\r\n <span> {{ title() }} </span>\r\n\r\n <!-- Button Information -->\r\n @if(information().show) {\r\n <button \r\n #infoButton\r\n mat-icon-button\r\n [matTooltip]=\"_tooltip()\"\r\n matTooltipPosition=\"before\"\r\n [matTooltipDisabled]=\"false\"\r\n [matTooltipHideDelay]=\"0\"\r\n type=\"button\"\r\n (click)=\"_ClickInformation()\">\r\n <i class=\"icon-circle-info\"></i>\r\n </button>\r\n }\r\n </h2>\r\n\r\n <!-- Navigation -->\r\n @if(showBreadcrumbs()) {\r\n <nav> \r\n <a class=\"breadcrumb-root\">\r\n <i [class]=\"_iconRoot\"></i>\r\n </a>\r\n \r\n <!-- Breadcrumbs -->\r\n <div class=\"breadcrumbs\"> \r\n <a *ngFor=\"let nav of breadcrumbs()\" [routerLink]='(nav.path && nav.path.length > 0) ? nav.path : null'\r\n [queryParams]='nav.queryParams'\r\n (click)=\"(nav.click) ? nav.click() : null\">\r\n {{ nav.page }}\r\n </a>\r\n </div>\r\n \r\n\r\n <!-- Go Back -->\r\n @if(goBack().show) {\r\n <a class=\"go-back\"\r\n [routerLink]=\"goBack().path\"\r\n [queryParams]='goBack().queryParams'\r\n (click)=\"(goBack().click) ? goBack().click!() : null\">\r\n Go back\r\n </a> \r\n }\r\n </nav>\r\n }\r\n</header> ", styles: ["header.coer-page-title{margin:15px 30px 0}header.coer-page-title h2{margin:0 0 10px;display:flex;align-items:center;justify-content:space-between;height:20px;font-size:20px}header.coer-page-title h2 span{font-size:20px!important}header.coer-page-title h2 button{font-size:17px!important;display:flex!important;align-items:center!important;justify-content:center!important;color:var(--breadcrumbs-inner)!important;background-color:transparent!important;padding:0!important;width:25px!important;height:25px!important;border:none!important}header.coer-page-title h2 button:focus{box-shadow:0 0 20px!important}header.coer-page-title nav{height:auto!important;min-height:25px!important;font-size:small!important;background-color:color-mix(in srgb,var(--gray),white 90%)!important;display:flex!important;align-items:center!important;justify-content:space-between!important}header.coer-page-title nav a{margin:0!important;display:flex!important;justify-content:center!important;padding:0 5px!important;text-decoration:none!important;color:var(--breadcrumbs-inner)!important;font-weight:400!important;font-size:14px!important;cursor:pointer!important}header.coer-page-title nav a.breadcrumb-root{padding-left:5px!important}header.coer-page-title nav div.breadcrumbs{display:flex!important;flex-wrap:wrap!important;align-items:center!important;flex-grow:1!important}header.coer-page-title nav div.breadcrumbs a:before{content:\"/\";width:10px}header.coer-page-title nav a.go-back{min-width:80px!important;justify-content:flex-end!important}header.coer-page-title ol::selection,header.coer-page-title a::selection{background-color:transparent!important}header.coer-page-title li{border:none}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
3202
3216
|
}
|
|
3203
3217
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerPageTitle, decorators: [{
|
|
3204
3218
|
type: Component,
|
|
3205
|
-
args: [{ selector: 'coer-page-title', standalone: false, template: "<header class=\"coer-page-title\" title=''>\r\n <h2>\r\n <span> {{ title() }} </span>\r\n\r\n <!-- Button Information -->\r\n @if(information().show) {\r\n <button mat-icon-button\r\n [matTooltip]=\"_tooltip()\"\r\n matTooltipPosition=\"before\"\r\n [matTooltipDisabled]=\"false\"\r\n [matTooltipHideDelay]=\"0\"\r\n type=\"button\"\r\n (click)=\"
|
|
3219
|
+
args: [{ selector: 'coer-page-title', standalone: false, template: "<header class=\"coer-page-title\" title=''>\r\n <h2>\r\n <span> {{ title() }} </span>\r\n\r\n <!-- Button Information -->\r\n @if(information().show) {\r\n <button \r\n #infoButton\r\n mat-icon-button\r\n [matTooltip]=\"_tooltip()\"\r\n matTooltipPosition=\"before\"\r\n [matTooltipDisabled]=\"false\"\r\n [matTooltipHideDelay]=\"0\"\r\n type=\"button\"\r\n (click)=\"_ClickInformation()\">\r\n <i class=\"icon-circle-info\"></i>\r\n </button>\r\n }\r\n </h2>\r\n\r\n <!-- Navigation -->\r\n @if(showBreadcrumbs()) {\r\n <nav> \r\n <a class=\"breadcrumb-root\">\r\n <i [class]=\"_iconRoot\"></i>\r\n </a>\r\n \r\n <!-- Breadcrumbs -->\r\n <div class=\"breadcrumbs\"> \r\n <a *ngFor=\"let nav of breadcrumbs()\" [routerLink]='(nav.path && nav.path.length > 0) ? nav.path : null'\r\n [queryParams]='nav.queryParams'\r\n (click)=\"(nav.click) ? nav.click() : null\">\r\n {{ nav.page }}\r\n </a>\r\n </div>\r\n \r\n\r\n <!-- Go Back -->\r\n @if(goBack().show) {\r\n <a class=\"go-back\"\r\n [routerLink]=\"goBack().path\"\r\n [queryParams]='goBack().queryParams'\r\n (click)=\"(goBack().click) ? goBack().click!() : null\">\r\n Go back\r\n </a> \r\n }\r\n </nav>\r\n }\r\n</header> ", styles: ["header.coer-page-title{margin:15px 30px 0}header.coer-page-title h2{margin:0 0 10px;display:flex;align-items:center;justify-content:space-between;height:20px;font-size:20px}header.coer-page-title h2 span{font-size:20px!important}header.coer-page-title h2 button{font-size:17px!important;display:flex!important;align-items:center!important;justify-content:center!important;color:var(--breadcrumbs-inner)!important;background-color:transparent!important;padding:0!important;width:25px!important;height:25px!important;border:none!important}header.coer-page-title h2 button:focus{box-shadow:0 0 20px!important}header.coer-page-title nav{height:auto!important;min-height:25px!important;font-size:small!important;background-color:color-mix(in srgb,var(--gray),white 90%)!important;display:flex!important;align-items:center!important;justify-content:space-between!important}header.coer-page-title nav a{margin:0!important;display:flex!important;justify-content:center!important;padding:0 5px!important;text-decoration:none!important;color:var(--breadcrumbs-inner)!important;font-weight:400!important;font-size:14px!important;cursor:pointer!important}header.coer-page-title nav a.breadcrumb-root{padding-left:5px!important}header.coer-page-title nav div.breadcrumbs{display:flex!important;flex-wrap:wrap!important;align-items:center!important;flex-grow:1!important}header.coer-page-title nav div.breadcrumbs a:before{content:\"/\";width:10px}header.coer-page-title nav a.go-back{min-width:80px!important;justify-content:flex-end!important}header.coer-page-title ol::selection,header.coer-page-title a::selection{background-color:transparent!important}header.coer-page-title li{border:none}\n"] }]
|
|
3206
3220
|
}], ctorParameters: () => [] });
|
|
3207
3221
|
|
|
3208
3222
|
class CoerTreeAccordion {
|
|
@@ -3977,11 +3991,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
|
|
|
3977
3991
|
|
|
3978
3992
|
class CoerToolbar {
|
|
3979
3993
|
constructor() {
|
|
3994
|
+
//Elements
|
|
3995
|
+
this._toogleButton = viewChild.required('toogleButton');
|
|
3980
3996
|
//variables
|
|
3997
|
+
this._isModalOpen = isModalOpenSIGNAL;
|
|
3981
3998
|
this._isReadyPage = false;
|
|
3982
|
-
this._isLoading = false;
|
|
3983
3999
|
this._awaitSignals = false;
|
|
3984
|
-
this._isModalOpen = isModalOpenSIGNAL;
|
|
3985
4000
|
//appSettings
|
|
3986
4001
|
this._appName = Tools.AvoidNull(appSettings?.appInfo?.name, 'string');
|
|
3987
4002
|
this._appLogoPath = Tools.AvoidNull(appSettings?.appInfo?.logoPath, 'string');
|
|
@@ -4041,10 +4056,9 @@ class CoerToolbar {
|
|
|
4041
4056
|
}
|
|
4042
4057
|
/** */
|
|
4043
4058
|
ToogleSideNave() {
|
|
4044
|
-
this._isLoading = true;
|
|
4045
4059
|
this.onClickMenu.emit();
|
|
4046
4060
|
isMenuOpenSIGNAL.set(!isMenuOpenSIGNAL());
|
|
4047
|
-
|
|
4061
|
+
this._toogleButton()._elementRef?.nativeElement?.blur();
|
|
4048
4062
|
}
|
|
4049
4063
|
//getter
|
|
4050
4064
|
get showLogo() {
|
|
@@ -4062,11 +4076,11 @@ class CoerToolbar {
|
|
|
4062
4076
|
? '5px' : '0px';
|
|
4063
4077
|
}
|
|
4064
4078
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerToolbar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4065
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerToolbar, isStandalone: false, selector: "coer-toolbar", inputs: { user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClickMenu: "onClickMenu", onClickOption: "onClickOption" }, ngImport: i0, template: "<div id=\"coer-tool-bar\" [ngClass]=\"{ 'position-relative': _isModalOpen() }\">\r\n <mat-toolbar> \r\n @if(showLogo) {\r\n <div class=\"logo-image-container\" (click)=\"ToogleSideNave()\" [ngStyle]=\"{ 'width': _appLogoWidth }\">\r\n <div class=\"logo-image\" [ngStyle]=\"{ 'background-image': 'url(' + (_appLogoPath | noImage:'IMAGE') + ')' }\"></div>\r\n </div>\r\n }\r\n\r\n @else {\r\n <div class=\"button-container\">\r\n <
|
|
4079
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerToolbar, isStandalone: false, selector: "coer-toolbar", inputs: { user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClickMenu: "onClickMenu", onClickOption: "onClickOption" }, viewQueries: [{ propertyName: "_toogleButton", first: true, predicate: ["toogleButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<div id=\"coer-tool-bar\" [ngClass]=\"{ 'position-relative': _isModalOpen() }\">\r\n <mat-toolbar> \r\n @if(showLogo) {\r\n <div class=\"logo-image-container\" (click)=\"ToogleSideNave()\" [ngStyle]=\"{ 'width': _appLogoWidth }\">\r\n <div class=\"logo-image\" [ngStyle]=\"{ 'background-image': 'url(' + (_appLogoPath | noImage:'IMAGE') + ')' }\"></div>\r\n </div>\r\n }\r\n\r\n @else {\r\n <div class=\"button-container\">\r\n <button\r\n #toogleButton \r\n mat-icon-button \r\n type=\"button\"\r\n (click)=\"ToogleSideNave()\">\r\n <i class=\"icon-bars\"></i>\r\n </button>\r\n </div>\r\n\r\n <span class=\"app-name\"> {{ _appName }} </span> \r\n } \r\n\r\n <span class=\"fill-space\"></span> \r\n \r\n <div class=\"user-container\" (click)=\"dropdown.Open()\" [ngStyle]=\"{ \r\n 'padding-right': GetPadding('user-container'),\r\n 'display': showUser ? 'flex' : 'none'\r\n }\">\r\n \r\n <coer-dropdown\r\n #dropdown\r\n [dataSource]=\"menu()\" \r\n propDisplay=\"label\" \r\n width=\"auto\"\r\n [minWidth]=\"GetElementWidth(toolbarUserIdentity)\"\r\n maxWidth=\"auto\"\r\n (onSelected)=\"onClickOption.emit($event); dropdown.Unselect()\"\r\n ></coer-dropdown>\r\n\r\n <div class=\"user-image\" [ngStyle]=\"{ 'background-image': 'url(' + (image() | noImage:'USER') + ')' }\"></div>\r\n <div #toolbarUserIdentity id=\"toolbar-user-identity\" class=\"user-identity\" [ngStyle]=\"{ 'padding-left': GetPadding('user-identity') }\">\r\n \r\n @if(userName().length > 0) {\r\n <p> {{ userName() }} </p>\r\n }\r\n \r\n @if(userTitle().length > 0) {\r\n <p> {{ userTitle() }} </p>\r\n }\r\n </div> \r\n </div> \r\n \r\n @if(!showUser) {\r\n <span class=\"me-2\">\r\n <span class=\"fw-bold fa-fade\"> \r\n Loading <i class=\"fa-solid fa-sync fa-spin\"></i> \r\n </span> \r\n </span>\r\n }\r\n </mat-toolbar>\r\n\r\n <div class=\"shadow\"></div>\r\n</div>\r\n", styles: ["div#coer-tool-bar{z-index:1}div#coer-tool-bar mat-toolbar{height:45px!important;position:relative!important;z-index:10!important;padding:0!important;background-color:var(--toolbar-inner)!important;color:var(--toolbar-text-inner)!important}div#coer-tool-bar mat-toolbar span.app-name{height:40px!important;display:contents!important;max-width:45%}div#coer-tool-bar mat-toolbar div.logo-image-container{height:45px!important;min-width:100px}div#coer-tool-bar mat-toolbar div.logo-image-container div.logo-image{background-size:contain!important;background-repeat:no-repeat!important;background-position-y:bottom;width:100%!important;height:100%!important;cursor:pointer!important}div#coer-tool-bar mat-toolbar div.button-container{display:flex;align-items:center;justify-content:center;width:40px}div#coer-tool-bar mat-toolbar div.button-container button{font-size:17px!important;display:flex!important;align-items:center!important;justify-content:center!important;color:var(--sidenav-active)!important;background-color:transparent!important;padding:0!important;width:25px!important;height:25px!important;border:none!important}div#coer-tool-bar mat-toolbar div.button-container button:focus{box-shadow:0 0 20px!important}div#coer-tool-bar mat-toolbar div.user-container{max-width:45%;display:flex;align-items:center;font-size:small!important;font-weight:700;height:0px!important;max-height:0px!important;padding-left:2px!important;margin-right:10px!important;border-radius:8px!important;cursor:pointer!important}div#coer-tool-bar mat-toolbar div.user-container div.user-image{min-width:35px!important;max-width:35px!important;min-height:35px!important;max-height:35px!important;border-radius:25px;background:transparent;background-size:cover;background-repeat:no-repeat;background-position:top}div#coer-tool-bar mat-toolbar div.user-container div.user-identity{height:40px!important;max-height:40px!important;min-width:70px!important;overflow:hidden!important;display:flex!important;flex-flow:column!important;justify-content:center!important}div#coer-tool-bar mat-toolbar div.user-container div.user-identity p{line-height:normal!important;overflow:hidden;text-overflow:ellipsis}div#coer-tool-bar mat-toolbar div.user-container div.user-identity p::selection{background-color:transparent!important}div#coer-tool-bar mat-toolbar div.user-container coer-dropdown{position:absolute;transform:translate(-3px)}div#coer-tool-bar mat-toolbar div.user-container coer-dropdown ul{right:0!important}div#coer-tool-bar mat-toolbar div.user-container:hover{transform:scale(1.03);box-shadow:0 0 15px -5px #000!important}div#coer-tool-bar div.shadow{box-shadow:1px -10px 20px #000!important;width:100vw;height:45px;position:absolute;top:0;z-index:8}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3$4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: CoerDropdown, selector: "coer-dropdown", inputs: ["id", "value", "label", "color", "type", "dataSource", "propDisplay", "rowsByPage", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onSelected", "onUnselect"] }, { kind: "pipe", type: i9.NoImagePipe, name: "noImage" }] }); }
|
|
4066
4080
|
}
|
|
4067
4081
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerToolbar, decorators: [{
|
|
4068
4082
|
type: Component,
|
|
4069
|
-
args: [{ selector: 'coer-toolbar', standalone: false, template: "<div id=\"coer-tool-bar\" [ngClass]=\"{ 'position-relative': _isModalOpen() }\">\r\n <mat-toolbar> \r\n @if(showLogo) {\r\n <div class=\"logo-image-container\" (click)=\"ToogleSideNave()\" [ngStyle]=\"{ 'width': _appLogoWidth }\">\r\n <div class=\"logo-image\" [ngStyle]=\"{ 'background-image': 'url(' + (_appLogoPath | noImage:'IMAGE') + ')' }\"></div>\r\n </div>\r\n }\r\n\r\n @else {\r\n <div class=\"button-container\">\r\n <
|
|
4083
|
+
args: [{ selector: 'coer-toolbar', standalone: false, template: "<div id=\"coer-tool-bar\" [ngClass]=\"{ 'position-relative': _isModalOpen() }\">\r\n <mat-toolbar> \r\n @if(showLogo) {\r\n <div class=\"logo-image-container\" (click)=\"ToogleSideNave()\" [ngStyle]=\"{ 'width': _appLogoWidth }\">\r\n <div class=\"logo-image\" [ngStyle]=\"{ 'background-image': 'url(' + (_appLogoPath | noImage:'IMAGE') + ')' }\"></div>\r\n </div>\r\n }\r\n\r\n @else {\r\n <div class=\"button-container\">\r\n <button\r\n #toogleButton \r\n mat-icon-button \r\n type=\"button\"\r\n (click)=\"ToogleSideNave()\">\r\n <i class=\"icon-bars\"></i>\r\n </button>\r\n </div>\r\n\r\n <span class=\"app-name\"> {{ _appName }} </span> \r\n } \r\n\r\n <span class=\"fill-space\"></span> \r\n \r\n <div class=\"user-container\" (click)=\"dropdown.Open()\" [ngStyle]=\"{ \r\n 'padding-right': GetPadding('user-container'),\r\n 'display': showUser ? 'flex' : 'none'\r\n }\">\r\n \r\n <coer-dropdown\r\n #dropdown\r\n [dataSource]=\"menu()\" \r\n propDisplay=\"label\" \r\n width=\"auto\"\r\n [minWidth]=\"GetElementWidth(toolbarUserIdentity)\"\r\n maxWidth=\"auto\"\r\n (onSelected)=\"onClickOption.emit($event); dropdown.Unselect()\"\r\n ></coer-dropdown>\r\n\r\n <div class=\"user-image\" [ngStyle]=\"{ 'background-image': 'url(' + (image() | noImage:'USER') + ')' }\"></div>\r\n <div #toolbarUserIdentity id=\"toolbar-user-identity\" class=\"user-identity\" [ngStyle]=\"{ 'padding-left': GetPadding('user-identity') }\">\r\n \r\n @if(userName().length > 0) {\r\n <p> {{ userName() }} </p>\r\n }\r\n \r\n @if(userTitle().length > 0) {\r\n <p> {{ userTitle() }} </p>\r\n }\r\n </div> \r\n </div> \r\n \r\n @if(!showUser) {\r\n <span class=\"me-2\">\r\n <span class=\"fw-bold fa-fade\"> \r\n Loading <i class=\"fa-solid fa-sync fa-spin\"></i> \r\n </span> \r\n </span>\r\n }\r\n </mat-toolbar>\r\n\r\n <div class=\"shadow\"></div>\r\n</div>\r\n", styles: ["div#coer-tool-bar{z-index:1}div#coer-tool-bar mat-toolbar{height:45px!important;position:relative!important;z-index:10!important;padding:0!important;background-color:var(--toolbar-inner)!important;color:var(--toolbar-text-inner)!important}div#coer-tool-bar mat-toolbar span.app-name{height:40px!important;display:contents!important;max-width:45%}div#coer-tool-bar mat-toolbar div.logo-image-container{height:45px!important;min-width:100px}div#coer-tool-bar mat-toolbar div.logo-image-container div.logo-image{background-size:contain!important;background-repeat:no-repeat!important;background-position-y:bottom;width:100%!important;height:100%!important;cursor:pointer!important}div#coer-tool-bar mat-toolbar div.button-container{display:flex;align-items:center;justify-content:center;width:40px}div#coer-tool-bar mat-toolbar div.button-container button{font-size:17px!important;display:flex!important;align-items:center!important;justify-content:center!important;color:var(--sidenav-active)!important;background-color:transparent!important;padding:0!important;width:25px!important;height:25px!important;border:none!important}div#coer-tool-bar mat-toolbar div.button-container button:focus{box-shadow:0 0 20px!important}div#coer-tool-bar mat-toolbar div.user-container{max-width:45%;display:flex;align-items:center;font-size:small!important;font-weight:700;height:0px!important;max-height:0px!important;padding-left:2px!important;margin-right:10px!important;border-radius:8px!important;cursor:pointer!important}div#coer-tool-bar mat-toolbar div.user-container div.user-image{min-width:35px!important;max-width:35px!important;min-height:35px!important;max-height:35px!important;border-radius:25px;background:transparent;background-size:cover;background-repeat:no-repeat;background-position:top}div#coer-tool-bar mat-toolbar div.user-container div.user-identity{height:40px!important;max-height:40px!important;min-width:70px!important;overflow:hidden!important;display:flex!important;flex-flow:column!important;justify-content:center!important}div#coer-tool-bar mat-toolbar div.user-container div.user-identity p{line-height:normal!important;overflow:hidden;text-overflow:ellipsis}div#coer-tool-bar mat-toolbar div.user-container div.user-identity p::selection{background-color:transparent!important}div#coer-tool-bar mat-toolbar div.user-container coer-dropdown{position:absolute;transform:translate(-3px)}div#coer-tool-bar mat-toolbar div.user-container coer-dropdown ul{right:0!important}div#coer-tool-bar mat-toolbar div.user-container:hover{transform:scale(1.03);box-shadow:0 0 15px -5px #000!important}div#coer-tool-bar div.shadow{box-shadow:1px -10px 20px #000!important;width:100vw;height:45px;position:absolute;top:0;z-index:8}\n"] }]
|
|
4070
4084
|
}] });
|
|
4071
4085
|
|
|
4072
4086
|
class ComponentsModule {
|