coer-elements 2.0.58 → 2.0.59
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-checkbox/coer-checkbox.component.d.ts +1 -1
- package/components/lib/coer-dropdown/coer-dropdown.component.d.ts +1 -1
- package/components/lib/coer-grid/coer-grid-body/coer-grid-body.component.d.ts +1 -0
- package/components/lib/coer-grid/coer-grid-footer/coer-grid-footer.component.d.ts +5 -1
- package/components/lib/coer-grid/coer-grid-header/coer-grid-header.component.d.ts +8 -2
- package/components/lib/coer-grid/coer-grid.extension.d.ts +4 -0
- package/components/lib/coer-switch/coer-switch.component.d.ts +1 -1
- package/components/lib/coer-textarea/coer-textarea.component.d.ts +1 -1
- package/fesm2022/coer-elements-components.mjs +133 -60
- package/fesm2022/coer-elements-components.mjs.map +1 -1
- package/fesm2022/coer-elements-tools.mjs +32 -0
- package/fesm2022/coer-elements-tools.mjs.map +1 -1
- package/package.json +1 -1
- package/tools/lib/html-elements.tools.d.ts +10 -0
|
@@ -4,32 +4,32 @@ import * as i1 from '@angular/common';
|
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i2$1 from '@angular/router';
|
|
6
6
|
import { Router, RouterModule } from '@angular/router';
|
|
7
|
-
import * as
|
|
7
|
+
import * as i2$2 from '@angular/forms';
|
|
8
8
|
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
9
9
|
import * as i4 from 'coer-elements/directives';
|
|
10
10
|
import { CoerRefDirective, DirectivesModule } from 'coer-elements/directives';
|
|
11
11
|
import * as i5 from 'coer-elements/pipes';
|
|
12
12
|
import { PipesModule } from 'coer-elements/pipes';
|
|
13
|
-
import * as i2$
|
|
13
|
+
import * as i2$6 from '@angular/cdk/drag-drop';
|
|
14
14
|
import { CdkDrag, CdkDragHandle, CdkDragPlaceholder, CdkDropList } from '@angular/cdk/drag-drop';
|
|
15
15
|
import * as i3 from '@angular/material/button';
|
|
16
16
|
import { MatButtonModule } from '@angular/material/button';
|
|
17
17
|
import * as i3$2 from '@angular/material/checkbox';
|
|
18
18
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
19
|
-
import * as i2$
|
|
19
|
+
import * as i2$3 from '@angular/material/datepicker';
|
|
20
20
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
21
|
-
import * as i2$
|
|
21
|
+
import * as i2$8 from '@angular/material/sidenav';
|
|
22
22
|
import { MatDrawerContainer, MatDrawerContent, MatDrawer } from '@angular/material/sidenav';
|
|
23
23
|
import * as i2 from '@angular/material/expansion';
|
|
24
24
|
import { MatExpansionModule } from '@angular/material/expansion';
|
|
25
|
-
import * as i2$
|
|
25
|
+
import * as i2$4 from '@angular/material/form-field';
|
|
26
26
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
27
27
|
import * as i3$3 from '@angular/material/input';
|
|
28
28
|
import { MatInputModule } from '@angular/material/input';
|
|
29
|
-
import * as i2$
|
|
29
|
+
import * as i2$7 from '@angular/material/list';
|
|
30
30
|
import { MatListModule } from '@angular/material/list';
|
|
31
31
|
import { provideNativeDateAdapter, MatNativeDateModule } from '@angular/material/core';
|
|
32
|
-
import * as i2$
|
|
32
|
+
import * as i2$5 from '@angular/material/slide-toggle';
|
|
33
33
|
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
|
34
34
|
import * as i3$4 from '@angular/material/tabs';
|
|
35
35
|
import { MatTabsModule } from '@angular/material/tabs';
|
|
@@ -357,8 +357,12 @@ class CoerCheckbox extends ControlValue {
|
|
|
357
357
|
this._isEnable = computed(() => {
|
|
358
358
|
return !this.isLoading() && !this.isDisabled() && !this.isInvisible() && !this.isReadonly();
|
|
359
359
|
});
|
|
360
|
-
this.
|
|
361
|
-
|
|
360
|
+
this._effectValue = effect(() => {
|
|
361
|
+
Tools.Sleep().then(() => {
|
|
362
|
+
if (Tools.IsNull(this._UpdateValue)) {
|
|
363
|
+
this.SetValue(Tools.IsNotNull(this.value()) ? this.value() : false);
|
|
364
|
+
}
|
|
365
|
+
});
|
|
362
366
|
});
|
|
363
367
|
}
|
|
364
368
|
//AfterViewInit
|
|
@@ -367,7 +371,7 @@ class CoerCheckbox extends ControlValue {
|
|
|
367
371
|
}
|
|
368
372
|
//OnDestroy
|
|
369
373
|
ngOnDestroy() {
|
|
370
|
-
this.
|
|
374
|
+
this._effectValue?.destroy();
|
|
371
375
|
}
|
|
372
376
|
//ControlValueAccessor
|
|
373
377
|
SetValue(value) {
|
|
@@ -403,7 +407,7 @@ class CoerCheckbox extends ControlValue {
|
|
|
403
407
|
}
|
|
404
408
|
}
|
|
405
409
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
406
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.1", type: CoerCheckbox, isStandalone: false, selector: "coer-checkbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", 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 }, ignoreDataBinding: { classPropertyName: "ignoreDataBinding", publicName: "ignoreDataBinding", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange" }, providers: [CONTROL_VALUE(CoerCheckbox)], usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"{ 'coer-checkbox': true, 'placeholder-glow': isLoading(), 'invisible': isInvisible() }\">\r\n <div [id]=\"_id\" [ngClass]=\"{ 'placeholder': isLoading() }\">\r\n <mat-checkbox\r\n [ngModel]=\"_value\"\r\n [indeterminate]=\"false\"\r\n [labelPosition]=\"labelPosition()\"\r\n [disabled]=\"!_isEnable()\"\r\n (change)=\"this.SetValue($event.checked)\"\r\n >{{ label() }}</mat-checkbox>\r\n </div>\r\n</div>", styles: ["div.coer-checkbox{display:inline-flex!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox{padding:10px!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__background{background-color:var(--smoke)!important;border-radius:5px!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__ripple{width:30px!important;height:30px!important;top:5px!important;left:5px!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mat-ripple.mat-mdc-checkbox-ripple.mat-mdc-focus-indicator *{display:none!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field label.mdc-label:empty{display:none!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field label.mdc-label{padding-top:3px!important;padding-left:0!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field label.mdc-label::selection{background-color:transparent!important}div.coer-checkbox mat-checkbox.mat-mdc-checkbox-checked div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__background{background-color:var(--primary-inner)!important;border-color:var(--primary-inner)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type:
|
|
410
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.1", type: CoerCheckbox, isStandalone: false, selector: "coer-checkbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", 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 }, ignoreDataBinding: { classPropertyName: "ignoreDataBinding", publicName: "ignoreDataBinding", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange" }, providers: [CONTROL_VALUE(CoerCheckbox)], usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"{ 'coer-checkbox': true, 'placeholder-glow': isLoading(), 'invisible': isInvisible() }\">\r\n <div [id]=\"_id\" [ngClass]=\"{ 'placeholder': isLoading() }\">\r\n <mat-checkbox\r\n [ngModel]=\"_value\"\r\n [indeterminate]=\"false\"\r\n [labelPosition]=\"labelPosition()\"\r\n [disabled]=\"!_isEnable()\"\r\n (change)=\"this.SetValue($event.checked)\"\r\n >{{ label() }}</mat-checkbox>\r\n </div>\r\n</div>", styles: ["div.coer-checkbox{display:inline-flex!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox{padding:10px!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__background{background-color:var(--smoke)!important;border-radius:5px!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__ripple{width:30px!important;height:30px!important;top:5px!important;left:5px!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mat-ripple.mat-mdc-checkbox-ripple.mat-mdc-focus-indicator *{display:none!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field label.mdc-label:empty{display:none!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field label.mdc-label{padding-top:3px!important;padding-left:0!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field label.mdc-label::selection{background-color:transparent!important}div.coer-checkbox mat-checkbox.mat-mdc-checkbox-checked div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__background{background-color:var(--primary-inner)!important;border-color:var(--primary-inner)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] }); }
|
|
407
411
|
}
|
|
408
412
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerCheckbox, decorators: [{
|
|
409
413
|
type: Component,
|
|
@@ -467,7 +471,11 @@ class CoerDateBox extends ControlValue {
|
|
|
467
471
|
return !this.isDisabled() && !this.isLoading() && !this.isReadonly() && !this.isInvisible();
|
|
468
472
|
});
|
|
469
473
|
this._effectValue = effect(() => {
|
|
470
|
-
|
|
474
|
+
Tools.Sleep().then(() => {
|
|
475
|
+
if (Tools.IsNull(this._UpdateValue)) {
|
|
476
|
+
this.SetValue(Tools.IsNotNull(this.value()) ? this.value() : '');
|
|
477
|
+
}
|
|
478
|
+
});
|
|
471
479
|
});
|
|
472
480
|
this._effectExternalButton = effect(() => {
|
|
473
481
|
this._externalButton.set(this.externalButton());
|
|
@@ -659,7 +667,7 @@ class CoerDateBox extends ControlValue {
|
|
|
659
667
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerDateBox, isStandalone: false, selector: "coer-datebox", 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 }, isWritable: { classPropertyName: "isWritable", publicName: "isWritable", 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 }, externalButton: { classPropertyName: "externalButton", publicName: "externalButton", 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: { onOpen: "onOpen", onClose: "onClose", onChangeValue: "onChangeValue", onClickExternalButton: "onClickExternalButton" }, providers: [
|
|
660
668
|
provideNativeDateAdapter(),
|
|
661
669
|
CONTROL_VALUE(CoerDateBox),
|
|
662
|
-
], viewQueries: [{ propertyName: "_datepicker", first: true, predicate: ["datepicker"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [id]=\"_id + '-coer-date-box'\" class=\"coer-form-field-component\"> \r\n <div class=\"coer-form-field-content\" [ngStyle]=\"{ \r\n width : width(), \r\n minWidth : minWidth(), \r\n maxWidth : maxWidth(),\r\n marginTop : marginTop(),\r\n marginRight : marginRight(),\r\n marginBottom: marginBottom(),\r\n marginLeft : marginLeft()\r\n }\">\r\n \r\n @if(_showexternalButtonLeft) {\r\n <div class=\"external-button-container-left\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_externalButtonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n }\r\n \r\n <mat-form-field \r\n [id]=\"_id + '-container'\"\r\n [floatLabel]=\"_floatLabel()\"\r\n [ngClass]=\"{\r\n 'width-100' : true,\r\n 'readonly' : isReadonly() && !isLoading(),\r\n 'display-none': isInvisible() || isLoading()\r\n }\"\r\n [style]=\"{ \r\n 'border-top-left-radius' : (_showexternalButtonLeft ? '0px': '4px'),\r\n 'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n }\">\r\n \r\n <mat-label> {{ label() }} </mat-label>\r\n \r\n <input #coerTextBox matInput \r\n [id]=\"_id\"\r\n [placeholder]=\"placeholder()\"\r\n [matDatepicker]=\"datepicker\" \r\n [disabled]=\"!_isEnable()\"\r\n [readonly]=\"!isWritable()\"\r\n [value]=\"_value\"\r\n (dateChange)=\"SetValue(coerTextBox.value)\"\r\n (dateInput)=\"_dateInput()\"\r\n [style]=\"{ \r\n 'margin-top' : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n 'padding-right': _paddingRight(),\r\n 'text-align' : textPosition()\r\n }\">\r\n \r\n <mat-datepicker #datepicker (closed)=\"_pickerButton?.click()\"></mat-datepicker>\r\n \r\n @if(!isLoading()) { \r\n <mat-datepicker-toggle matSuffix [for]=\"datepicker\" [disabled]=\"!_isEnable()\">\r\n <mat-icon matDatepickerToggleIcon>\r\n <i class=\"icon-calendar-days icon-fill\"></i> \r\n </mat-icon>\r\n </mat-datepicker-toggle>\r\n } \r\n \r\n @if(isInvalid() || isValid()) {\r\n <span ngClass=\"icon-container\">\r\n @if(isInvalid() && !isDisabled() && !isLoading()) {\r\n <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n }\r\n \r\n @else if(isValid() && !isDisabled() && !isLoading()) {\r\n <i class=\"icon-circle-check icon-fill\"></i>\r\n }\r\n </span>\r\n }\r\n </mat-form-field> \r\n \r\n <!-- Loading || Invisible -->\r\n @if(isLoading() || isInvisible()) {\r\n <div [ngClass]=\"{ \r\n 'loading' : isLoading(),\r\n 'invisible' : 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 'border-top-left-radius' : (_showexternalButtonLeft ? '0px': '4px'),\r\n 'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n }\"\r\n > {{ isInvisible() ? '' : _value }} </div>\r\n }\r\n \r\n @if(_showexternalButtonRight) {\r\n <div class=\"external-button-container-right\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_externalButtonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n }\r\n </div>\r\n</div> ", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$
|
|
670
|
+
], viewQueries: [{ propertyName: "_datepicker", first: true, predicate: ["datepicker"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [id]=\"_id + '-coer-date-box'\" class=\"coer-form-field-component\"> \r\n <div class=\"coer-form-field-content\" [ngStyle]=\"{ \r\n width : width(), \r\n minWidth : minWidth(), \r\n maxWidth : maxWidth(),\r\n marginTop : marginTop(),\r\n marginRight : marginRight(),\r\n marginBottom: marginBottom(),\r\n marginLeft : marginLeft()\r\n }\">\r\n \r\n @if(_showexternalButtonLeft) {\r\n <div class=\"external-button-container-left\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_externalButtonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n }\r\n \r\n <mat-form-field \r\n [id]=\"_id + '-container'\"\r\n [floatLabel]=\"_floatLabel()\"\r\n [ngClass]=\"{\r\n 'width-100' : true,\r\n 'readonly' : isReadonly() && !isLoading(),\r\n 'display-none': isInvisible() || isLoading()\r\n }\"\r\n [style]=\"{ \r\n 'border-top-left-radius' : (_showexternalButtonLeft ? '0px': '4px'),\r\n 'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n }\">\r\n \r\n <mat-label> {{ label() }} </mat-label>\r\n \r\n <input #coerTextBox matInput \r\n [id]=\"_id\"\r\n [placeholder]=\"placeholder()\"\r\n [matDatepicker]=\"datepicker\" \r\n [disabled]=\"!_isEnable()\"\r\n [readonly]=\"!isWritable()\"\r\n [value]=\"_value\"\r\n (dateChange)=\"SetValue(coerTextBox.value)\"\r\n (dateInput)=\"_dateInput()\"\r\n [style]=\"{ \r\n 'margin-top' : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n 'padding-right': _paddingRight(),\r\n 'text-align' : textPosition()\r\n }\">\r\n \r\n <mat-datepicker #datepicker (closed)=\"_pickerButton?.click()\"></mat-datepicker>\r\n \r\n @if(!isLoading()) { \r\n <mat-datepicker-toggle matSuffix [for]=\"datepicker\" [disabled]=\"!_isEnable()\">\r\n <mat-icon matDatepickerToggleIcon>\r\n <i class=\"icon-calendar-days icon-fill\"></i> \r\n </mat-icon>\r\n </mat-datepicker-toggle>\r\n } \r\n \r\n @if(isInvalid() || isValid()) {\r\n <span ngClass=\"icon-container\">\r\n @if(isInvalid() && !isDisabled() && !isLoading()) {\r\n <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n }\r\n \r\n @else if(isValid() && !isDisabled() && !isLoading()) {\r\n <i class=\"icon-circle-check icon-fill\"></i>\r\n }\r\n </span>\r\n }\r\n </mat-form-field> \r\n \r\n <!-- Loading || Invisible -->\r\n @if(isLoading() || isInvisible()) {\r\n <div [ngClass]=\"{ \r\n 'loading' : isLoading(),\r\n 'invisible' : 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 'border-top-left-radius' : (_showexternalButtonLeft ? '0px': '4px'),\r\n 'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n }\"\r\n > {{ isInvisible() ? '' : _value }} </div>\r\n }\r\n \r\n @if(_showexternalButtonRight) {\r\n <div class=\"external-button-container-right\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_externalButtonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n }\r\n </div>\r\n</div> ", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i2$3.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { 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: i2$4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$3.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"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "isHidde", "width", "widthBreakpoint", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }] }); }
|
|
663
671
|
}
|
|
664
672
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerDateBox, decorators: [{
|
|
665
673
|
type: Component,
|
|
@@ -1042,11 +1050,11 @@ class CoerForm {
|
|
|
1042
1050
|
}
|
|
1043
1051
|
}
|
|
1044
1052
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerForm, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1045
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.1", type: CoerForm, isStandalone: false, selector: "coer-form", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, 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 } }, ngImport: i0, template: "<form [formGroup]=\"formGroup()\" autocomplete=\"off\" class=\"coer-form\">\r\n <fieldset [disabled]=\"_isDisabled\">\r\n <ng-content></ng-content>\r\n </fieldset>\r\n</form>", styles: [""], dependencies: [{ kind: "directive", type:
|
|
1053
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.1", type: CoerForm, isStandalone: false, selector: "coer-form", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, 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 } }, ngImport: i0, template: "<form [formGroup]=\"formGroup()\" autocomplete=\"off\" class=\"coer-form\">\r\n <fieldset [disabled]=\"_isDisabled\">\r\n <ng-content></ng-content>\r\n </fieldset>\r\n</form> ", styles: [""], dependencies: [{ kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] }); }
|
|
1046
1054
|
}
|
|
1047
1055
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerForm, decorators: [{
|
|
1048
1056
|
type: Component,
|
|
1049
|
-
args: [{ selector: 'coer-form', standalone: false, template: "<form [formGroup]=\"formGroup()\" autocomplete=\"off\" class=\"coer-form\">\r\n <fieldset [disabled]=\"_isDisabled\">\r\n <ng-content></ng-content>\r\n </fieldset>\r\n</form>" }]
|
|
1057
|
+
args: [{ selector: 'coer-form', standalone: false, template: "<form [formGroup]=\"formGroup()\" autocomplete=\"off\" class=\"coer-form\">\r\n <fieldset [disabled]=\"_isDisabled\">\r\n <ng-content></ng-content>\r\n </fieldset>\r\n</form> " }]
|
|
1050
1058
|
}] });
|
|
1051
1059
|
|
|
1052
1060
|
class CoerGridExtension extends ControlValue {
|
|
@@ -1055,6 +1063,9 @@ class CoerGridExtension extends ControlValue {
|
|
|
1055
1063
|
//Elements
|
|
1056
1064
|
this._coerGridHeader = viewChild('coerGridHeader');
|
|
1057
1065
|
this._coerGridBody = viewChild('coerGridBody');
|
|
1066
|
+
this._coerGridFooter = viewChild('coerGridFooter');
|
|
1067
|
+
this._gridGrandFather = null;
|
|
1068
|
+
this._grid = null;
|
|
1058
1069
|
//Variables
|
|
1059
1070
|
this._value = [];
|
|
1060
1071
|
this._valueSignal = signal([]);
|
|
@@ -1200,7 +1211,11 @@ class CoerGridExtension extends ControlValue {
|
|
|
1200
1211
|
}
|
|
1201
1212
|
//AfterViewInit
|
|
1202
1213
|
ngAfterViewInit() {
|
|
1203
|
-
Tools.Sleep().then(_ =>
|
|
1214
|
+
Tools.Sleep().then(_ => {
|
|
1215
|
+
this._grid = HTMLElements.GetElement(`#${this._GetIdCalculated(-1, -1, 'coer-grid-inner')}`);
|
|
1216
|
+
this._gridGrandFather = HTMLElements.GetGrandfather(this._grid);
|
|
1217
|
+
this._isLoadingInner.set(false);
|
|
1218
|
+
});
|
|
1204
1219
|
}
|
|
1205
1220
|
//ControlValueAccessor
|
|
1206
1221
|
SetValue(value) {
|
|
@@ -1264,22 +1279,17 @@ class CoerGridExtension extends ControlValue {
|
|
|
1264
1279
|
}
|
|
1265
1280
|
//getter
|
|
1266
1281
|
get _height() {
|
|
1267
|
-
|
|
1268
|
-
|
|
1269
|
-
|
|
1270
|
-
|
|
1271
|
-
|
|
1272
|
-
|
|
1273
|
-
|
|
1274
|
-
|
|
1275
|
-
// const PADDING = 20;
|
|
1276
|
-
// const FOOTER = this.footer.show ? 24.5 : 0;
|
|
1277
|
-
// height = (Screen.WINDOW_HEIGHT - TOOLBAR - PAGE_HEADER - MARGIN - FORM - HEADER - PADDING - FOOTER) + 'px';
|
|
1278
|
-
// }
|
|
1279
|
-
return height;
|
|
1282
|
+
return (this.height() == 'full')
|
|
1283
|
+
? (Screen.WINDOW_HEIGHT - (45 //Toolbar
|
|
1284
|
+
+ (this._coerGridHeader()?.heigth || 0)
|
|
1285
|
+
+ (this._coerGridFooter()?.heigth || 0)
|
|
1286
|
+
+ HTMLElements.GetOffsetTop(this._grid)
|
|
1287
|
+
+ Number(HTMLElements.GetCssValue(this._gridGrandFather, 'padding-top').split('px')[0])
|
|
1288
|
+
+ Number(HTMLElements.GetCssValue(this._gridGrandFather, 'padding-bottom').split('px')[0]))) + 'px'
|
|
1289
|
+
: this.height();
|
|
1280
1290
|
}
|
|
1281
1291
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerGridExtension, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1282
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.1", type: CoerGridExtension, isStandalone: true, selector: "coer-grid-extension", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, cleanColumnName: { classPropertyName: "cleanColumnName", publicName: "cleanColumnName", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: false, isRequired: false, transformFunction: null }, exportButton: { classPropertyName: "exportButton", publicName: "exportButton", isSignal: false, isRequired: false, transformFunction: null }, importButton: { classPropertyName: "importButton", publicName: "importButton", isSignal: false, isRequired: false, transformFunction: null }, addButton: { classPropertyName: "addButton", publicName: "addButton", isSignal: false, isRequired: false, transformFunction: null }, saveButton: { classPropertyName: "saveButton", publicName: "saveButton", isSignal: false, isRequired: false, transformFunction: null }, checkbox: { classPropertyName: "checkbox", publicName: "checkbox", isSignal: false, isRequired: false, transformFunction: null }, buttonByRow: { classPropertyName: "buttonByRow", publicName: "buttonByRow", isSignal: false, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: false, 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 }, rowsByPage: { classPropertyName: "rowsByPage", publicName: "rowsByPage", isSignal: true, isRequired: false, transformFunction: null }, tooltipByRow: { classPropertyName: "tooltipByRow", publicName: "tooltipByRow", isSignal: true, isRequired: false, transformFunction: null }, enableSort: { classPropertyName: "enableSort", publicName: "enableSort", isSignal: true, isRequired: false, transformFunction: null }, enableFocusNext: { classPropertyName: "enableFocusNext", publicName: "enableFocusNext", isSignal: true, isRequired: false, transformFunction: null }, enableFocusRow: { classPropertyName: "enableFocusRow", publicName: "enableFocusRow", isSignal: true, isRequired: false, transformFunction: null }, enableHoverRow: { classPropertyName: "enableHoverRow", publicName: "enableHoverRow", isSignal: true, isRequired: false, transformFunction: null }, isStriped: { classPropertyName: "isStriped", publicName: "isStriped", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, MinWidth: { classPropertyName: "MinWidth", publicName: "MinWidth", isSignal: true, isRequired: false, transformFunction: null }, MaxWidth: { classPropertyName: "MaxWidth", publicName: "MaxWidth", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClickExport: "onClickExport", onClickImport: "onClickImport", onClickAdd: "onClickAdd", onClickSave: "onClickSave", onClickRow: "onClickRow", onDoubleClickRow: "onDoubleClickRow", onCheckboxChange: "onCheckboxChange", onClickDeleteRow: "onClickDeleteRow", onClickEditRow: "onClickEditRow", onClickGoRow: "onClickGoRow", onKeyupEnter: "onKeyupEnter", onKeyupEnterLast: "onKeyupEnterLast", onSwitchChange: "onSwitchChange", onTextboxChange: "onTextboxChange", onNumberboxChange: "onNumberboxChange", onSelectboxChange: "onSelectboxChange" }, viewQueries: [{ propertyName: "_coerGridHeader", first: true, predicate: ["coerGridHeader"], descendants: true, isSignal: true }, { propertyName: "_coerGridBody", first: true, predicate: ["coerGridBody"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
|
|
1292
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.1", type: CoerGridExtension, isStandalone: true, selector: "coer-grid-extension", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, cleanColumnName: { classPropertyName: "cleanColumnName", publicName: "cleanColumnName", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: false, isRequired: false, transformFunction: null }, exportButton: { classPropertyName: "exportButton", publicName: "exportButton", isSignal: false, isRequired: false, transformFunction: null }, importButton: { classPropertyName: "importButton", publicName: "importButton", isSignal: false, isRequired: false, transformFunction: null }, addButton: { classPropertyName: "addButton", publicName: "addButton", isSignal: false, isRequired: false, transformFunction: null }, saveButton: { classPropertyName: "saveButton", publicName: "saveButton", isSignal: false, isRequired: false, transformFunction: null }, checkbox: { classPropertyName: "checkbox", publicName: "checkbox", isSignal: false, isRequired: false, transformFunction: null }, buttonByRow: { classPropertyName: "buttonByRow", publicName: "buttonByRow", isSignal: false, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: false, 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 }, rowsByPage: { classPropertyName: "rowsByPage", publicName: "rowsByPage", isSignal: true, isRequired: false, transformFunction: null }, tooltipByRow: { classPropertyName: "tooltipByRow", publicName: "tooltipByRow", isSignal: true, isRequired: false, transformFunction: null }, enableSort: { classPropertyName: "enableSort", publicName: "enableSort", isSignal: true, isRequired: false, transformFunction: null }, enableFocusNext: { classPropertyName: "enableFocusNext", publicName: "enableFocusNext", isSignal: true, isRequired: false, transformFunction: null }, enableFocusRow: { classPropertyName: "enableFocusRow", publicName: "enableFocusRow", isSignal: true, isRequired: false, transformFunction: null }, enableHoverRow: { classPropertyName: "enableHoverRow", publicName: "enableHoverRow", isSignal: true, isRequired: false, transformFunction: null }, isStriped: { classPropertyName: "isStriped", publicName: "isStriped", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, MinWidth: { classPropertyName: "MinWidth", publicName: "MinWidth", isSignal: true, isRequired: false, transformFunction: null }, MaxWidth: { classPropertyName: "MaxWidth", publicName: "MaxWidth", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClickExport: "onClickExport", onClickImport: "onClickImport", onClickAdd: "onClickAdd", onClickSave: "onClickSave", onClickRow: "onClickRow", onDoubleClickRow: "onDoubleClickRow", onCheckboxChange: "onCheckboxChange", onClickDeleteRow: "onClickDeleteRow", onClickEditRow: "onClickEditRow", onClickGoRow: "onClickGoRow", onKeyupEnter: "onKeyupEnter", onKeyupEnterLast: "onKeyupEnterLast", onSwitchChange: "onSwitchChange", onTextboxChange: "onTextboxChange", onNumberboxChange: "onNumberboxChange", onSelectboxChange: "onSelectboxChange" }, viewQueries: [{ propertyName: "_coerGridHeader", first: true, predicate: ["coerGridHeader"], descendants: true, isSignal: true }, { propertyName: "_coerGridBody", first: true, predicate: ["coerGridBody"], descendants: true, isSignal: true }, { propertyName: "_coerGridFooter", first: true, predicate: ["coerGridFooter"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
|
|
1283
1293
|
}
|
|
1284
1294
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerGridExtension, decorators: [{
|
|
1285
1295
|
type: Component,
|
|
@@ -1362,7 +1372,11 @@ class CoerTextBox extends ControlValue {
|
|
|
1362
1372
|
? '18px' : '0px';
|
|
1363
1373
|
});
|
|
1364
1374
|
this._effectValue = effect(() => {
|
|
1365
|
-
|
|
1375
|
+
Tools.Sleep().then(() => {
|
|
1376
|
+
if (Tools.IsNull(this._UpdateValue)) {
|
|
1377
|
+
this.SetValue(Tools.IsNotNull(this.value()) ? this.value() : '');
|
|
1378
|
+
}
|
|
1379
|
+
});
|
|
1366
1380
|
});
|
|
1367
1381
|
this._effectExternalButton = effect(() => {
|
|
1368
1382
|
this._externalButton.set(this.externalButton());
|
|
@@ -1501,11 +1515,11 @@ class CoerTextBox extends ControlValue {
|
|
|
1501
1515
|
});
|
|
1502
1516
|
}
|
|
1503
1517
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerTextBox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1504
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerTextBox, isStandalone: false, selector: "coer-textbox", 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 }, externalButton: { classPropertyName: "externalButton", publicName: "externalButton", isSignal: true, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: true, isRequired: false, transformFunction: null }, showClearIcon: { classPropertyName: "showClearIcon", publicName: "showClearIcon", isSignal: true, isRequired: false, transformFunction: null }, showSearchIcon: { classPropertyName: "showSearchIcon", publicName: "showSearchIcon", 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", onClickSearch: "onClickSearch", onClickExternalButton: "onClickExternalButton" }, providers: [CONTROL_VALUE(CoerTextBox)], 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-form-field-component\">\r\n <div class=\"coer-form-field-content\" [ngStyle]=\"{ \r\n width : width(), \r\n minWidth : minWidth(), \r\n maxWidth : maxWidth(),\r\n marginTop : marginTop(),\r\n marginRight : marginRight(),\r\n marginBottom: marginBottom(),\r\n marginLeft : marginLeft() \r\n }\">\r\n\r\n @if(_showexternalButtonLeft) {\r\n <div class=\"external-button-container-left\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_externalButtonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n }\r\n \r\n <mat-form-field\r\n [id]=\"_id + '-container'\"\r\n [floatLabel]=\"_floatLabel()\"\r\n [ngClass]=\"{\r\n 'width-100' : true,\r\n 'readonly' : isReadonly() && !isLoading(),\r\n 'display-none': isInvisible() || isLoading()\r\n }\"\r\n [style]=\"{ \r\n 'border-top-left-radius' : (_showexternalButtonLeft ? '0px': '4px'),\r\n 'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n }\">\r\n <mat-label>{{ label() }}</mat-label>\r\n \r\n <input #coerTextBox matInput\r\n [id]=\"_id\"\r\n type=\"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 'margin-top' : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n 'padding-right': _paddingRight(),\r\n 'text-align' : textPosition()\r\n }\"> \r\n \r\n <span class=\"icon-container\">\r\n @if(_showSearchIcon) {\r\n <i class=\"icon-magnifying-glass cursor-pointer\" (click)=\"_ClickSearch()\"></i>\r\n }\r\n \r\n @else if(_showClearIcon) {\r\n <i class=\"icon-x cursor-pointer\" (click)=\"Clear(); this.onClickClear.emit();\"></i>\r\n }\r\n \r\n @else if(isInvalid() && _isEnable()) {\r\n <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n }\r\n \r\n @else if(isValid() && _isEnable()) {\r\n <i class=\"icon-circle-check icon-fill\"></i>\r\n }\r\n </span>\r\n </mat-form-field> \r\n \r\n <!-- Loading || Invisible -->\r\n @if(isLoading() || isInvisible()) {\r\n <div [ngClass]=\"{ \r\n 'loading' : isLoading(),\r\n 'invisible' : 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 'border-top-left-radius' : (_showexternalButtonLeft ? '0px': '4px'),\r\n 'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n }\"\r\n > {{ isInvisible() ? '' : _value }} </div>\r\n }\r\n \r\n @if(_showexternalButtonRight) {\r\n <div class=\"external-button-container-right\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_externalButtonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n }\r\n </div>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$
|
|
1518
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerTextBox, isStandalone: false, selector: "coer-textbox", 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 }, externalButton: { classPropertyName: "externalButton", publicName: "externalButton", isSignal: true, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: true, isRequired: false, transformFunction: null }, showClearIcon: { classPropertyName: "showClearIcon", publicName: "showClearIcon", isSignal: true, isRequired: false, transformFunction: null }, showSearchIcon: { classPropertyName: "showSearchIcon", publicName: "showSearchIcon", 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", onClickSearch: "onClickSearch", onClickExternalButton: "onClickExternalButton" }, providers: [CONTROL_VALUE(CoerTextBox)], 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-form-field-component\">\r\n <div class=\"coer-form-field-content\" [ngStyle]=\"{ \r\n width : width(), \r\n minWidth : minWidth(), \r\n maxWidth : maxWidth(),\r\n marginTop : marginTop(),\r\n marginRight : marginRight(),\r\n marginBottom: marginBottom(),\r\n marginLeft : marginLeft() \r\n }\">\r\n\r\n @if(_showexternalButtonLeft) {\r\n <div class=\"external-button-container-left\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_externalButtonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n }\r\n \r\n <mat-form-field\r\n [id]=\"_id + '-container'\"\r\n [floatLabel]=\"_floatLabel()\"\r\n [ngClass]=\"{\r\n 'width-100' : true,\r\n 'readonly' : isReadonly() && !isLoading(),\r\n 'display-none': isInvisible() || isLoading()\r\n }\"\r\n [style]=\"{ \r\n 'border-top-left-radius' : (_showexternalButtonLeft ? '0px': '4px'),\r\n 'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n }\">\r\n <mat-label>{{ label() }}</mat-label>\r\n \r\n <input #coerTextBox matInput\r\n [id]=\"_id\"\r\n type=\"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 'margin-top' : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n 'padding-right': _paddingRight(),\r\n 'text-align' : textPosition()\r\n }\"> \r\n \r\n <span class=\"icon-container\">\r\n @if(_showSearchIcon) {\r\n <i class=\"icon-magnifying-glass cursor-pointer\" (click)=\"_ClickSearch()\"></i>\r\n }\r\n \r\n @else if(_showClearIcon) {\r\n <i class=\"icon-x cursor-pointer\" (click)=\"Clear(); this.onClickClear.emit();\"></i>\r\n }\r\n \r\n @else if(isInvalid() && _isEnable()) {\r\n <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n }\r\n \r\n @else if(isValid() && _isEnable()) {\r\n <i class=\"icon-circle-check icon-fill\"></i>\r\n }\r\n </span>\r\n </mat-form-field> \r\n \r\n <!-- Loading || Invisible -->\r\n @if(isLoading() || isInvisible()) {\r\n <div [ngClass]=\"{ \r\n 'loading' : isLoading(),\r\n 'invisible' : 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 'border-top-left-radius' : (_showexternalButtonLeft ? '0px': '4px'),\r\n 'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n }\"\r\n > {{ isInvisible() ? '' : _value }} </div>\r\n }\r\n \r\n @if(_showexternalButtonRight) {\r\n <div class=\"external-button-container-right\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_externalButtonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n }\r\n </div>\r\n</div> ", 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$3.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"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "isHidde", "width", "widthBreakpoint", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }] }); }
|
|
1505
1519
|
}
|
|
1506
1520
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerTextBox, decorators: [{
|
|
1507
1521
|
type: Component,
|
|
1508
|
-
args: [{ selector: 'coer-textbox', providers: [CONTROL_VALUE(CoerTextBox)], standalone: false, template: "<div class=\"coer-form-field-component\">\r\n <div class=\"coer-form-field-content\" [ngStyle]=\"{ \r\n width : width(), \r\n minWidth : minWidth(), \r\n maxWidth : maxWidth(),\r\n marginTop : marginTop(),\r\n marginRight : marginRight(),\r\n marginBottom: marginBottom(),\r\n marginLeft : marginLeft() \r\n }\">\r\n\r\n @if(_showexternalButtonLeft) {\r\n <div class=\"external-button-container-left\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_externalButtonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n }\r\n \r\n <mat-form-field\r\n [id]=\"_id + '-container'\"\r\n [floatLabel]=\"_floatLabel()\"\r\n [ngClass]=\"{\r\n 'width-100' : true,\r\n 'readonly' : isReadonly() && !isLoading(),\r\n 'display-none': isInvisible() || isLoading()\r\n }\"\r\n [style]=\"{ \r\n 'border-top-left-radius' : (_showexternalButtonLeft ? '0px': '4px'),\r\n 'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n }\">\r\n <mat-label>{{ label() }}</mat-label>\r\n \r\n <input #coerTextBox matInput\r\n [id]=\"_id\"\r\n type=\"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 'margin-top' : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n 'padding-right': _paddingRight(),\r\n 'text-align' : textPosition()\r\n }\"> \r\n \r\n <span class=\"icon-container\">\r\n @if(_showSearchIcon) {\r\n <i class=\"icon-magnifying-glass cursor-pointer\" (click)=\"_ClickSearch()\"></i>\r\n }\r\n \r\n @else if(_showClearIcon) {\r\n <i class=\"icon-x cursor-pointer\" (click)=\"Clear(); this.onClickClear.emit();\"></i>\r\n }\r\n \r\n @else if(isInvalid() && _isEnable()) {\r\n <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n }\r\n \r\n @else if(isValid() && _isEnable()) {\r\n <i class=\"icon-circle-check icon-fill\"></i>\r\n }\r\n </span>\r\n </mat-form-field> \r\n \r\n <!-- Loading || Invisible -->\r\n @if(isLoading() || isInvisible()) {\r\n <div [ngClass]=\"{ \r\n 'loading' : isLoading(),\r\n 'invisible' : 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 'border-top-left-radius' : (_showexternalButtonLeft ? '0px': '4px'),\r\n 'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n }\"\r\n > {{ isInvisible() ? '' : _value }} </div>\r\n }\r\n \r\n @if(_showexternalButtonRight) {\r\n <div class=\"external-button-container-right\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_externalButtonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n }\r\n </div>\r\n</div>" }]
|
|
1522
|
+
args: [{ selector: 'coer-textbox', providers: [CONTROL_VALUE(CoerTextBox)], standalone: false, template: "<div class=\"coer-form-field-component\">\r\n <div class=\"coer-form-field-content\" [ngStyle]=\"{ \r\n width : width(), \r\n minWidth : minWidth(), \r\n maxWidth : maxWidth(),\r\n marginTop : marginTop(),\r\n marginRight : marginRight(),\r\n marginBottom: marginBottom(),\r\n marginLeft : marginLeft() \r\n }\">\r\n\r\n @if(_showexternalButtonLeft) {\r\n <div class=\"external-button-container-left\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_externalButtonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n }\r\n \r\n <mat-form-field\r\n [id]=\"_id + '-container'\"\r\n [floatLabel]=\"_floatLabel()\"\r\n [ngClass]=\"{\r\n 'width-100' : true,\r\n 'readonly' : isReadonly() && !isLoading(),\r\n 'display-none': isInvisible() || isLoading()\r\n }\"\r\n [style]=\"{ \r\n 'border-top-left-radius' : (_showexternalButtonLeft ? '0px': '4px'),\r\n 'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n }\">\r\n <mat-label>{{ label() }}</mat-label>\r\n \r\n <input #coerTextBox matInput\r\n [id]=\"_id\"\r\n type=\"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 'margin-top' : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n 'padding-right': _paddingRight(),\r\n 'text-align' : textPosition()\r\n }\"> \r\n \r\n <span class=\"icon-container\">\r\n @if(_showSearchIcon) {\r\n <i class=\"icon-magnifying-glass cursor-pointer\" (click)=\"_ClickSearch()\"></i>\r\n }\r\n \r\n @else if(_showClearIcon) {\r\n <i class=\"icon-x cursor-pointer\" (click)=\"Clear(); this.onClickClear.emit();\"></i>\r\n }\r\n \r\n @else if(isInvalid() && _isEnable()) {\r\n <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n }\r\n \r\n @else if(isValid() && _isEnable()) {\r\n <i class=\"icon-circle-check icon-fill\"></i>\r\n }\r\n </span>\r\n </mat-form-field> \r\n \r\n <!-- Loading || Invisible -->\r\n @if(isLoading() || isInvisible()) {\r\n <div [ngClass]=\"{ \r\n 'loading' : isLoading(),\r\n 'invisible' : 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 'border-top-left-radius' : (_showexternalButtonLeft ? '0px': '4px'),\r\n 'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n }\"\r\n > {{ isInvisible() ? '' : _value }} </div>\r\n }\r\n \r\n @if(_showexternalButtonRight) {\r\n <div class=\"external-button-container-right\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_externalButtonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n }\r\n </div>\r\n</div> " }]
|
|
1509
1523
|
}], ctorParameters: () => [] });
|
|
1510
1524
|
|
|
1511
1525
|
class CoerGridHeader {
|
|
@@ -1515,6 +1529,9 @@ class CoerGridHeader {
|
|
|
1515
1529
|
//Elements
|
|
1516
1530
|
this._inputFile = viewChild.required('inputFileRef');
|
|
1517
1531
|
this._inputSearch = viewChild.required('inputSearch');
|
|
1532
|
+
this._header = null;
|
|
1533
|
+
this._headerButtons = null;
|
|
1534
|
+
this._headerSlots = null;
|
|
1518
1535
|
//Variables
|
|
1519
1536
|
this._isLoadingInner = signal(false);
|
|
1520
1537
|
//Callback
|
|
@@ -1630,6 +1647,24 @@ class CoerGridHeader {
|
|
|
1630
1647
|
return this._IsDisabled(this.search()) || this._isLoadingInner() || this.isLoading() || this.isDisabled() || this.isInvisible();
|
|
1631
1648
|
};
|
|
1632
1649
|
}
|
|
1650
|
+
ngAfterViewInit() {
|
|
1651
|
+
Tools.Sleep().then(_ => {
|
|
1652
|
+
this._header = HTMLElements.GetElement(`#${this.GetIdCalculated()(-1, -1, 'header')}`);
|
|
1653
|
+
this._headerSlots = HTMLElements.GetElement(`#${this.GetIdCalculated()(-1, -1, 'header-slots')}`);
|
|
1654
|
+
this._headerButtons = HTMLElements.GetElement(`#${this.GetIdCalculated()(-1, -1, 'header-buttons')}`);
|
|
1655
|
+
});
|
|
1656
|
+
}
|
|
1657
|
+
//getter
|
|
1658
|
+
get heigth() {
|
|
1659
|
+
return Number(HTMLElements.GetElementHeight(this._header, this._marginBottom).split('px')[0]);
|
|
1660
|
+
}
|
|
1661
|
+
//getter
|
|
1662
|
+
get _marginBottom() {
|
|
1663
|
+
return this.search().show
|
|
1664
|
+
|| HTMLElements.HasChildren(this._headerButtons)
|
|
1665
|
+
|| HTMLElements.HasChildren(this._headerSlots)
|
|
1666
|
+
? 10 : 0;
|
|
1667
|
+
}
|
|
1633
1668
|
/** */
|
|
1634
1669
|
FocusSearch(select = false, delay = 0) {
|
|
1635
1670
|
if (Tools.IsNotNull(this._inputSearch())) {
|
|
@@ -1688,11 +1723,11 @@ class CoerGridHeader {
|
|
|
1688
1723
|
}
|
|
1689
1724
|
}
|
|
1690
1725
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerGridHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1691
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerGridHeader, isStandalone: false, selector: "coer-grid-header", inputs: { GetIdCalculated: { classPropertyName: "GetIdCalculated", publicName: "GetIdCalculated", isSignal: true, isRequired: true, transformFunction: null }, GetColumnName: { classPropertyName: "GetColumnName", publicName: "GetColumnName", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, dataSourceFiltered: { classPropertyName: "dataSourceFiltered", publicName: "dataSourceFiltered", isSignal: true, isRequired: false, transformFunction: null }, dataSourceSelected: { classPropertyName: "dataSourceSelected", publicName: "dataSourceSelected", isSignal: true, isRequired: false, transformFunction: null }, exportButton: { classPropertyName: "exportButton", publicName: "exportButton", isSignal: true, isRequired: false, transformFunction: null }, importButton: { classPropertyName: "importButton", publicName: "importButton", isSignal: true, isRequired: false, transformFunction: null }, addButton: { classPropertyName: "addButton", publicName: "addButton", isSignal: true, isRequired: false, transformFunction: null }, saveButton: { classPropertyName: "saveButton", publicName: "saveButton", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchInner: { classPropertyName: "searchInner", publicName: "searchInner", isSignal: true, isRequired: false, transformFunction: null }, isLoadingInner: { classPropertyName: "isLoadingInner", publicName: "isLoadingInner", 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 } }, outputs: { onClickExport: "onClickExport", onClickImport: "onClickImport", onClickAdd: "onClickAdd", onClickSave: "onClickSave", onInputSearch: "onInputSearch", onClickClearSearch: "onClickClearSearch", onKeyupEnterSearch: "onKeyupEnterSearch" }, viewQueries: [{ propertyName: "_inputFile", first: true, predicate: ["inputFileRef"], descendants: true, isSignal: true }, { propertyName: "_inputSearch", first: true, predicate: ["inputSearch"], descendants: true, isSignal: true }], ngImport: i0, template: "<header
|
|
1726
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerGridHeader, isStandalone: false, selector: "coer-grid-header", inputs: { GetIdCalculated: { classPropertyName: "GetIdCalculated", publicName: "GetIdCalculated", isSignal: true, isRequired: true, transformFunction: null }, GetColumnName: { classPropertyName: "GetColumnName", publicName: "GetColumnName", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, dataSourceFiltered: { classPropertyName: "dataSourceFiltered", publicName: "dataSourceFiltered", isSignal: true, isRequired: false, transformFunction: null }, dataSourceSelected: { classPropertyName: "dataSourceSelected", publicName: "dataSourceSelected", isSignal: true, isRequired: false, transformFunction: null }, exportButton: { classPropertyName: "exportButton", publicName: "exportButton", isSignal: true, isRequired: false, transformFunction: null }, importButton: { classPropertyName: "importButton", publicName: "importButton", isSignal: true, isRequired: false, transformFunction: null }, addButton: { classPropertyName: "addButton", publicName: "addButton", isSignal: true, isRequired: false, transformFunction: null }, saveButton: { classPropertyName: "saveButton", publicName: "saveButton", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchInner: { classPropertyName: "searchInner", publicName: "searchInner", isSignal: true, isRequired: false, transformFunction: null }, isLoadingInner: { classPropertyName: "isLoadingInner", publicName: "isLoadingInner", 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 } }, outputs: { onClickExport: "onClickExport", onClickImport: "onClickImport", onClickAdd: "onClickAdd", onClickSave: "onClickSave", onInputSearch: "onInputSearch", onClickClearSearch: "onClickClearSearch", onKeyupEnterSearch: "onKeyupEnterSearch" }, viewQueries: [{ propertyName: "_inputFile", first: true, predicate: ["inputFileRef"], descendants: true, isSignal: true }, { propertyName: "_inputSearch", first: true, predicate: ["inputSearch"], descendants: true, isSignal: true }], ngImport: i0, template: "<header [id]=\"GetIdCalculated()(-1, -1, 'header')\" class='flex-wrap-middle-right' [ngStyle]=\"{ 'margin-bottom': _marginBottom + 'px' }\"> \r\n \r\n <!-- Slot -->\r\n <div [id]=\"GetIdCalculated()(-1, -1, 'header-slots')\" class=\"flex-basis-fit-content margin-right-auto\">\r\n <ng-content></ng-content>\r\n </div> \r\n \r\n <div [id]=\"GetIdCalculated()(-1, -1, 'header-buttons')\" class=\"flex-basis-min-content display-flex gap-5px\">\r\n <!-- Export Button -->\r\n @if(_showExportButton()) {\r\n <div>\r\n <coer-button\r\n type=\"icon\" \r\n icon=\"excel\"\r\n [color]=\"_ColorButton(exportButton())\"\r\n [path]=\"_GetPath(exportButton())\"\r\n [isDisabled]=\"_IsDisabledExportButton()\" \r\n [isHidde]=\"isLoading()\"\r\n [tooltip]=\"_TooltipButton(exportButton(), 'Export')\"\r\n tooltipPosition=\"top\"\r\n (onClick)=\"_Export()\"\r\n ></coer-button>\r\n </div>\r\n }\r\n \r\n <!-- Import Button -->\r\n @if(importButton().show && !isReadonly()) {\r\n <div>\r\n <input type=\"file\" #inputFileRef [multiple]=\"false\" (change)=\"Import($event)\" (cancel)=\"_isLoadingInner.set(false)\">\r\n \r\n <coer-button\r\n type=\"icon\" \r\n icon=\"import\"\r\n [color]=\"_ColorButton(importButton())\"\r\n [path]=\"_GetPath(importButton())\"\r\n [isDisabled]=\"_IsDisabledImportButton()\" \r\n [tooltip]=\"_TooltipButton(importButton(), 'Import')\"\r\n tooltipPosition=\"top\"\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>\r\n <coer-button\r\n type=\"icon\"\r\n icon=\"new\"\r\n [color]=\"_ColorButton(addButton())\"\r\n [path]=\"_GetPath(addButton())\"\r\n [isDisabled]=\"_IsDisabledAddButton()\" \r\n [tooltip]=\"_TooltipButton(addButton(), 'Add')\"\r\n tooltipPosition=\"top\" \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>\r\n <coer-button\r\n type=\"icon\"\r\n icon=\"save\"\r\n [color]=\"_ColorButton(saveButton())\"\r\n [path]=\"_GetPath(saveButton())\"\r\n [isDisabled]=\"_IsDisabledSaveButton()\" \r\n [isHidde]=\"isLoading()\"\r\n [tooltip]=\"_TooltipButton(saveButton(), 'Save')\" \r\n tooltipPosition=\"top\" \r\n (onClick)=\"onClickSave.emit()\"\r\n ></coer-button>\r\n </div>\r\n } \r\n </div>\r\n \r\n <!-- Search -->\r\n @if(search().show) {\r\n <div [id]=\"GetIdCalculated()(-1, -1, 'header-search')\" class=\"mv-flex-basis-100 mv-flex-grow-1 xs-flex-basis-100 md-flex-basis-min-content\">\r\n <coer-textbox\r\n #inputSearch\r\n [id]=\"GetIdCalculated()(-1, -1, 'search')\"\r\n [ngModel]=\"searchInner()\"\r\n placeholder=\"Search\"\r\n [isDisabled]=\"_IsDisabledSearch()\"\r\n [isLoading]=\"isLoading()\"\r\n [selectOnFocus]=\"true\"\r\n [showSearchIcon]=\"true\"\r\n [showClearIcon]=\"true\"\r\n minWidth=\"250px\"\r\n (onInput)=\"onInputSearch.emit($event)\"\r\n (onClickClear)=\"onClickClearSearch.emit('')\"\r\n (onKeyupEnter)=\"onKeyupEnterSearch.emit({\r\n id: GetIdCalculated()(-1, -1, 'search'),\r\n input: 'coer-search', \r\n value: $event\r\n })\"\r\n ></coer-textbox>\r\n </div>\r\n } \r\n</header> ", dependencies: [{ 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", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "isHidde", "width", "widthBreakpoint", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }, { 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"] }] }); }
|
|
1692
1727
|
}
|
|
1693
1728
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerGridHeader, decorators: [{
|
|
1694
1729
|
type: Component,
|
|
1695
|
-
args: [{ selector: 'coer-grid-header', standalone: false, template: "<header
|
|
1730
|
+
args: [{ selector: 'coer-grid-header', standalone: false, template: "<header [id]=\"GetIdCalculated()(-1, -1, 'header')\" class='flex-wrap-middle-right' [ngStyle]=\"{ 'margin-bottom': _marginBottom + 'px' }\"> \r\n \r\n <!-- Slot -->\r\n <div [id]=\"GetIdCalculated()(-1, -1, 'header-slots')\" class=\"flex-basis-fit-content margin-right-auto\">\r\n <ng-content></ng-content>\r\n </div> \r\n \r\n <div [id]=\"GetIdCalculated()(-1, -1, 'header-buttons')\" class=\"flex-basis-min-content display-flex gap-5px\">\r\n <!-- Export Button -->\r\n @if(_showExportButton()) {\r\n <div>\r\n <coer-button\r\n type=\"icon\" \r\n icon=\"excel\"\r\n [color]=\"_ColorButton(exportButton())\"\r\n [path]=\"_GetPath(exportButton())\"\r\n [isDisabled]=\"_IsDisabledExportButton()\" \r\n [isHidde]=\"isLoading()\"\r\n [tooltip]=\"_TooltipButton(exportButton(), 'Export')\"\r\n tooltipPosition=\"top\"\r\n (onClick)=\"_Export()\"\r\n ></coer-button>\r\n </div>\r\n }\r\n \r\n <!-- Import Button -->\r\n @if(importButton().show && !isReadonly()) {\r\n <div>\r\n <input type=\"file\" #inputFileRef [multiple]=\"false\" (change)=\"Import($event)\" (cancel)=\"_isLoadingInner.set(false)\">\r\n \r\n <coer-button\r\n type=\"icon\" \r\n icon=\"import\"\r\n [color]=\"_ColorButton(importButton())\"\r\n [path]=\"_GetPath(importButton())\"\r\n [isDisabled]=\"_IsDisabledImportButton()\" \r\n [tooltip]=\"_TooltipButton(importButton(), 'Import')\"\r\n tooltipPosition=\"top\"\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>\r\n <coer-button\r\n type=\"icon\"\r\n icon=\"new\"\r\n [color]=\"_ColorButton(addButton())\"\r\n [path]=\"_GetPath(addButton())\"\r\n [isDisabled]=\"_IsDisabledAddButton()\" \r\n [tooltip]=\"_TooltipButton(addButton(), 'Add')\"\r\n tooltipPosition=\"top\" \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>\r\n <coer-button\r\n type=\"icon\"\r\n icon=\"save\"\r\n [color]=\"_ColorButton(saveButton())\"\r\n [path]=\"_GetPath(saveButton())\"\r\n [isDisabled]=\"_IsDisabledSaveButton()\" \r\n [isHidde]=\"isLoading()\"\r\n [tooltip]=\"_TooltipButton(saveButton(), 'Save')\" \r\n tooltipPosition=\"top\" \r\n (onClick)=\"onClickSave.emit()\"\r\n ></coer-button>\r\n </div>\r\n } \r\n </div>\r\n \r\n <!-- Search -->\r\n @if(search().show) {\r\n <div [id]=\"GetIdCalculated()(-1, -1, 'header-search')\" class=\"mv-flex-basis-100 mv-flex-grow-1 xs-flex-basis-100 md-flex-basis-min-content\">\r\n <coer-textbox\r\n #inputSearch\r\n [id]=\"GetIdCalculated()(-1, -1, 'search')\"\r\n [ngModel]=\"searchInner()\"\r\n placeholder=\"Search\"\r\n [isDisabled]=\"_IsDisabledSearch()\"\r\n [isLoading]=\"isLoading()\"\r\n [selectOnFocus]=\"true\"\r\n [showSearchIcon]=\"true\"\r\n [showClearIcon]=\"true\"\r\n minWidth=\"250px\"\r\n (onInput)=\"onInputSearch.emit($event)\"\r\n (onClickClear)=\"onClickClearSearch.emit('')\"\r\n (onKeyupEnter)=\"onKeyupEnterSearch.emit({\r\n id: GetIdCalculated()(-1, -1, 'search'),\r\n input: 'coer-search', \r\n value: $event\r\n })\"\r\n ></coer-textbox>\r\n </div>\r\n } \r\n</header> " }]
|
|
1696
1731
|
}] });
|
|
1697
1732
|
|
|
1698
1733
|
class CoerNumberBox extends ControlValue {
|
|
@@ -1749,7 +1784,11 @@ class CoerNumberBox extends ControlValue {
|
|
|
1749
1784
|
? '18px' : '0px';
|
|
1750
1785
|
});
|
|
1751
1786
|
this._effectValue = effect(() => {
|
|
1752
|
-
|
|
1787
|
+
Tools.Sleep().then(() => {
|
|
1788
|
+
if (Tools.IsNull(this._UpdateValue)) {
|
|
1789
|
+
this.SetValue(Tools.IsNotNull(this.value()) ? this.value() : 0);
|
|
1790
|
+
}
|
|
1791
|
+
});
|
|
1753
1792
|
});
|
|
1754
1793
|
this._effectExternalButton = effect(() => {
|
|
1755
1794
|
this._externalButton.set(this.externalButton());
|
|
@@ -1962,7 +2001,7 @@ class CoerNumberBox extends ControlValue {
|
|
|
1962
2001
|
});
|
|
1963
2002
|
}
|
|
1964
2003
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerNumberBox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1965
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerNumberBox, isStandalone: false, selector: "coer-numberbox", 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 }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", 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 }, externalButton: { classPropertyName: "externalButton", publicName: "externalButton", isSignal: true, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", 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", onClickExternalButton: "onClickExternalButton" }, providers: [CONTROL_VALUE(CoerNumberBox)], viewQueries: [{ propertyName: "_coerNumberbox", first: true, predicate: ["coerNumberbox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-form-field-component\">\r\n <div class=\"coer-form-field-content\" [ngStyle]=\"{ \r\n width : width(), \r\n minWidth : minWidth(), \r\n maxWidth : maxWidth(),\r\n marginTop : marginTop(),\r\n marginRight : marginRight(),\r\n marginBottom: marginBottom(),\r\n marginLeft : marginLeft() \r\n }\">\r\n @if(_showexternalButtonLeft) {\r\n <div class=\"external-button-container-left\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_externalButtonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n }\r\n \r\n <mat-form-field\r\n [id]=\"_id + '-container'\"\r\n [floatLabel]=\"_floatLabel()\"\r\n [ngClass]=\"{\r\n 'width-100' : true,\r\n 'readonly' : isReadonly() && !isLoading(),\r\n 'display-none': isInvisible() || isLoading()\r\n }\"\r\n [style]=\"{ \r\n 'border-top-left-radius' : (_showexternalButtonLeft ? '0px': '4px'),\r\n 'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n }\">\r\n <mat-label>{{ label() }}</mat-label>\r\n \r\n <input #coerNumberbox matInput\r\n [id]=\"_id\"\r\n type=\"text\"\r\n [placeholder]=\"placeholder()\"\r\n [disabled]=\"!_isEnable()\"\r\n [value]=\"_value\"\r\n (input)=\"SetValue(coerNumberbox.value)\"\r\n (blur)=\"SetTouched(true)\"\r\n [ngClass]=\"{ 'caret-none': _hideCaret() }\"\r\n [style]=\"{\r\n 'margin-top' : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n 'padding-right': _paddingRight(),\r\n 'text-align' : textPosition()\r\n }\"> \r\n \r\n <span ngClass=\"icon-container\">\r\n @if(isInvalid() && _isEnable()) {\r\n <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n }\r\n \r\n @else if(isValid() && _isEnable()) {\r\n <i class=\"icon-circle-check icon-fill\"></i>\r\n }\r\n </span>\r\n </mat-form-field>\r\n \r\n <!-- Loading || Invisible -->\r\n @if(isLoading() || isInvisible()) {\r\n <div [ngClass]=\"{ \r\n 'loading' : isLoading(),\r\n 'invisible' : 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 'border-top-left-radius' : (_showexternalButtonLeft ? '0px': '4px'),\r\n 'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n }\"\r\n > {{ isInvisible() ? '' : _value }} </div>\r\n }\r\n \r\n @if(_showexternalButtonRight) {\r\n <div class=\"external-button-container-right\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_externalButtonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n }\r\n </div>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$
|
|
2004
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerNumberBox, isStandalone: false, selector: "coer-numberbox", 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 }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", 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 }, externalButton: { classPropertyName: "externalButton", publicName: "externalButton", isSignal: true, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", 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", onClickExternalButton: "onClickExternalButton" }, providers: [CONTROL_VALUE(CoerNumberBox)], viewQueries: [{ propertyName: "_coerNumberbox", first: true, predicate: ["coerNumberbox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-form-field-component\">\r\n <div class=\"coer-form-field-content\" [ngStyle]=\"{ \r\n width : width(), \r\n minWidth : minWidth(), \r\n maxWidth : maxWidth(),\r\n marginTop : marginTop(),\r\n marginRight : marginRight(),\r\n marginBottom: marginBottom(),\r\n marginLeft : marginLeft() \r\n }\">\r\n @if(_showexternalButtonLeft) {\r\n <div class=\"external-button-container-left\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_externalButtonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n }\r\n \r\n <mat-form-field\r\n [id]=\"_id + '-container'\"\r\n [floatLabel]=\"_floatLabel()\"\r\n [ngClass]=\"{\r\n 'width-100' : true,\r\n 'readonly' : isReadonly() && !isLoading(),\r\n 'display-none': isInvisible() || isLoading()\r\n }\"\r\n [style]=\"{ \r\n 'border-top-left-radius' : (_showexternalButtonLeft ? '0px': '4px'),\r\n 'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n }\">\r\n <mat-label>{{ label() }}</mat-label>\r\n \r\n <input #coerNumberbox matInput\r\n [id]=\"_id\"\r\n type=\"text\"\r\n [placeholder]=\"placeholder()\"\r\n [disabled]=\"!_isEnable()\"\r\n [value]=\"_value\"\r\n (input)=\"SetValue(coerNumberbox.value)\"\r\n (blur)=\"SetTouched(true)\"\r\n [ngClass]=\"{ 'caret-none': _hideCaret() }\"\r\n [style]=\"{\r\n 'margin-top' : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n 'padding-right': _paddingRight(),\r\n 'text-align' : textPosition()\r\n }\"> \r\n \r\n <span ngClass=\"icon-container\">\r\n @if(isInvalid() && _isEnable()) {\r\n <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n }\r\n \r\n @else if(isValid() && _isEnable()) {\r\n <i class=\"icon-circle-check icon-fill\"></i>\r\n }\r\n </span>\r\n </mat-form-field>\r\n \r\n <!-- Loading || Invisible -->\r\n @if(isLoading() || isInvisible()) {\r\n <div [ngClass]=\"{ \r\n 'loading' : isLoading(),\r\n 'invisible' : 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 'border-top-left-radius' : (_showexternalButtonLeft ? '0px': '4px'),\r\n 'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n }\"\r\n > {{ isInvisible() ? '' : _value }} </div>\r\n }\r\n \r\n @if(_showexternalButtonRight) {\r\n <div class=\"external-button-container-right\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_externalButtonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n }\r\n </div>\r\n</div>", 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$3.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"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "isHidde", "width", "widthBreakpoint", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }] }); }
|
|
1966
2005
|
}
|
|
1967
2006
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerNumberBox, decorators: [{
|
|
1968
2007
|
type: Component,
|
|
@@ -2051,7 +2090,11 @@ class CoerSelectbox extends ControlValue {
|
|
|
2051
2090
|
return Tools.IsNotNull(item) ? item[this.displayProperty()] : '';
|
|
2052
2091
|
};
|
|
2053
2092
|
this._effectValue = effect(() => {
|
|
2054
|
-
|
|
2093
|
+
Tools.Sleep().then(() => {
|
|
2094
|
+
if (Tools.IsNull(this._UpdateValue)) {
|
|
2095
|
+
this.SetValue(Tools.IsNotNull(this.value()) ? this.value() : null);
|
|
2096
|
+
}
|
|
2097
|
+
});
|
|
2055
2098
|
});
|
|
2056
2099
|
this._effectExternalButton = effect(() => {
|
|
2057
2100
|
this._externalButton.set(this.externalButton());
|
|
@@ -2324,7 +2367,7 @@ class CoerSelectbox extends ControlValue {
|
|
|
2324
2367
|
});
|
|
2325
2368
|
}
|
|
2326
2369
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSelectbox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2327
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerSelectbox, isStandalone: false, selector: "coer-selectbox", 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 }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, externalButton: { classPropertyName: "externalButton", publicName: "externalButton", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, displayProperty: { classPropertyName: "displayProperty", publicName: "displayProperty", isSignal: true, isRequired: false, transformFunction: null }, rowsByPage: { classPropertyName: "rowsByPage", publicName: "rowsByPage", 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: { onSelected: "onSelected", onUnselect: "onUnselect", onClickExternalButton: "onClickExternalButton" }, providers: [CONTROL_VALUE(CoerSelectbox)], viewQueries: [{ propertyName: "_coerTextBox", first: true, predicate: ["coerTextBox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [id]=\"_id + '-coer-select-box'\" class=\"coer-form-field-component\">\r\n <div class=\"coer-form-field-content\" [ngStyle]=\"{ \r\n width : width(), \r\n minWidth : minWidth(), \r\n maxWidth : maxWidth(),\r\n marginTop : marginTop(),\r\n marginRight : marginRight(),\r\n marginBottom: marginBottom(),\r\n marginLeft : marginLeft(), \r\n }\">\r\n\r\n @if(_showexternalButtonLeft) {\r\n <div class=\"external-button-container-left\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_externalButtonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n }\r\n \r\n <mat-form-field\r\n [id]=\"_id + '-container'\" \r\n [floatLabel]=\"_floatLabel()\"\r\n [ngClass]=\"{\r\n 'width-100' : true,\r\n 'readonly' : isReadonly() && !isLoading(),\r\n 'display-none': isInvisible() || isLoading()\r\n }\"\r\n [style]=\"{ \r\n 'border-top-left-radius' : (_showexternalButtonLeft ? '0px': '4px'),\r\n 'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n }\">\r\n\r\n <mat-label>{{ label() }}</mat-label>\r\n \r\n <!-- Input -->\r\n <input #coerTextBox matInput\r\n [id]=\"_id\"\r\n type=\"text\"\r\n [value]=\"_search()\"\r\n [placeholder]=\"_placeholder\"\r\n [disabled]=\"!_isEnable()\"\r\n (input)=\"_Search(coerTextBox.value)\"\r\n (blur)=\"SetTouched(true)\"\r\n [style]=\"{\r\n 'margin-top': (_floatLabel() == 'auto') ? '15px' : '9px',\r\n 'padding-right': _paddingRight\r\n }\"> \r\n \r\n <!-- Icons Container -->\r\n <span class=\"icon-container\">\r\n @if(_showCancel && _isEnable()) { \r\n <i class=\"icon-x margin-right-45px\" (click)=\"Unselect()\"></i> \r\n }\r\n \r\n @else if(isInvalid() && _isEnable()) { \r\n <i class=\"icon-circle-exclamation icon-fill margin-right-45px\"></i> \r\n }\r\n \r\n @else if(isValid() && _isEnable()) { \r\n <i class=\"icon-circle-check icon-fill margin-right-45px\"></i> \r\n }\r\n \r\n @if(_isOpen() && _isEnable()) {\r\n <i class=\"icon-caret-up icon-fill cursor-pointer text-primary\" (click)=\"Blur()\"></i>\r\n }\r\n \r\n @else if(_isEnable()) {\r\n <i class=\"icon-caret-down icon-fill cursor-pointer text-secondary\"></i>\r\n }\r\n </span> \r\n </mat-form-field> \r\n \r\n <!-- Loading || Invisible -->\r\n @if(isLoading() || isInvisible()) {\r\n <div [ngClass]=\"{ \r\n 'loading' : isLoading(),\r\n 'invisible' : 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 'border-top-left-radius' : (_showexternalButtonLeft ? '0px': '4px'),\r\n 'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n }\"\r\n > {{ isInvisible() ? '' : _search() }} </div>\r\n }\r\n \r\n <!-- Options -->\r\n <div [id]=\"_id + '-dropdown-menu-container'\" class=\"dropdown-options display-none\">\r\n <ul [id]=\"_id + '-dropdown-menu'\">\r\n @if(_isEnable()) {\r\n @for(item of _dataSource(); track _GetIndexRow(item)) {\r\n <li [ngClass]=\"{ 'dropdown-item-focus': _index() == _GetIndexRow(item) }\" (click)=\"_SelectItem(item)\">\r\n <div [id]=\"_id + '-dropdown-option-' + _GetIndexRow(item)\">\r\n {{ _GetDisplay(item) }} \r\n </div> \r\n </li>\r\n }\r\n }\r\n </ul>\r\n </div>\r\n \r\n @if(_showexternalButtonRight) {\r\n <div class=\"external-button-container-right\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_externalButtonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n }\r\n </div>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$
|
|
2370
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerSelectbox, isStandalone: false, selector: "coer-selectbox", 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 }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, externalButton: { classPropertyName: "externalButton", publicName: "externalButton", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, displayProperty: { classPropertyName: "displayProperty", publicName: "displayProperty", isSignal: true, isRequired: false, transformFunction: null }, rowsByPage: { classPropertyName: "rowsByPage", publicName: "rowsByPage", 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: { onSelected: "onSelected", onUnselect: "onUnselect", onClickExternalButton: "onClickExternalButton" }, providers: [CONTROL_VALUE(CoerSelectbox)], viewQueries: [{ propertyName: "_coerTextBox", first: true, predicate: ["coerTextBox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [id]=\"_id + '-coer-select-box'\" class=\"coer-form-field-component\">\r\n <div class=\"coer-form-field-content\" [ngStyle]=\"{ \r\n width : width(), \r\n minWidth : minWidth(), \r\n maxWidth : maxWidth(),\r\n marginTop : marginTop(),\r\n marginRight : marginRight(),\r\n marginBottom: marginBottom(),\r\n marginLeft : marginLeft(), \r\n }\">\r\n\r\n @if(_showexternalButtonLeft) {\r\n <div class=\"external-button-container-left\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_externalButtonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n }\r\n \r\n <mat-form-field\r\n [id]=\"_id + '-container'\" \r\n [floatLabel]=\"_floatLabel()\"\r\n [ngClass]=\"{\r\n 'width-100' : true,\r\n 'readonly' : isReadonly() && !isLoading(),\r\n 'display-none': isInvisible() || isLoading()\r\n }\"\r\n [style]=\"{ \r\n 'border-top-left-radius' : (_showexternalButtonLeft ? '0px': '4px'),\r\n 'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n }\">\r\n\r\n <mat-label>{{ label() }}</mat-label>\r\n \r\n <!-- Input -->\r\n <input #coerTextBox matInput\r\n [id]=\"_id\"\r\n type=\"text\"\r\n [value]=\"_search()\"\r\n [placeholder]=\"_placeholder\"\r\n [disabled]=\"!_isEnable()\"\r\n (input)=\"_Search(coerTextBox.value)\"\r\n (blur)=\"SetTouched(true)\"\r\n [style]=\"{\r\n 'margin-top': (_floatLabel() == 'auto') ? '15px' : '9px',\r\n 'padding-right': _paddingRight\r\n }\"> \r\n \r\n <!-- Icons Container -->\r\n <span class=\"icon-container\">\r\n @if(_showCancel && _isEnable()) { \r\n <i class=\"icon-x margin-right-45px\" (click)=\"Unselect()\"></i> \r\n }\r\n \r\n @else if(isInvalid() && _isEnable()) { \r\n <i class=\"icon-circle-exclamation icon-fill margin-right-45px\"></i> \r\n }\r\n \r\n @else if(isValid() && _isEnable()) { \r\n <i class=\"icon-circle-check icon-fill margin-right-45px\"></i> \r\n }\r\n \r\n @if(_isOpen() && _isEnable()) {\r\n <i class=\"icon-caret-up icon-fill cursor-pointer text-primary\" (click)=\"Blur()\"></i>\r\n }\r\n \r\n @else if(_isEnable()) {\r\n <i class=\"icon-caret-down icon-fill cursor-pointer text-secondary\"></i>\r\n }\r\n </span> \r\n </mat-form-field> \r\n \r\n <!-- Loading || Invisible -->\r\n @if(isLoading() || isInvisible()) {\r\n <div [ngClass]=\"{ \r\n 'loading' : isLoading(),\r\n 'invisible' : 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 'border-top-left-radius' : (_showexternalButtonLeft ? '0px': '4px'),\r\n 'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n }\"\r\n > {{ isInvisible() ? '' : _search() }} </div>\r\n }\r\n \r\n <!-- Options -->\r\n <div [id]=\"_id + '-dropdown-menu-container'\" class=\"dropdown-options display-none\">\r\n <ul [id]=\"_id + '-dropdown-menu'\">\r\n @if(_isEnable()) {\r\n @for(item of _dataSource(); track _GetIndexRow(item)) {\r\n <li [ngClass]=\"{ 'dropdown-item-focus': _index() == _GetIndexRow(item) }\" (click)=\"_SelectItem(item)\">\r\n <div [id]=\"_id + '-dropdown-option-' + _GetIndexRow(item)\">\r\n {{ _GetDisplay(item) }} \r\n </div> \r\n </li>\r\n }\r\n }\r\n </ul>\r\n </div>\r\n \r\n @if(_showexternalButtonRight) {\r\n <div class=\"external-button-container-right\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_externalButtonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n }\r\n </div>\r\n</div>", 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$3.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"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "isHidde", "width", "widthBreakpoint", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }] }); }
|
|
2328
2371
|
}
|
|
2329
2372
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSelectbox, decorators: [{
|
|
2330
2373
|
type: Component,
|
|
@@ -2375,13 +2418,17 @@ class CoerSwitch extends ControlValue {
|
|
|
2375
2418
|
this._isEnable = computed(() => {
|
|
2376
2419
|
return !this.isLoading() && !this.isDisabled() && !this.isInvisible();
|
|
2377
2420
|
});
|
|
2378
|
-
this.
|
|
2379
|
-
|
|
2421
|
+
this._effectValue = effect(() => {
|
|
2422
|
+
Tools.Sleep().then(() => {
|
|
2423
|
+
if (Tools.IsNull(this._UpdateValue)) {
|
|
2424
|
+
this.SetValue(Tools.IsNotNull(this.value()) ? this.value() : false);
|
|
2425
|
+
}
|
|
2426
|
+
});
|
|
2380
2427
|
});
|
|
2381
2428
|
}
|
|
2382
2429
|
//OnDestroy
|
|
2383
2430
|
ngOnDestroy() {
|
|
2384
|
-
this.
|
|
2431
|
+
this._effectValue?.destroy();
|
|
2385
2432
|
}
|
|
2386
2433
|
/** */
|
|
2387
2434
|
Focus() {
|
|
@@ -2396,7 +2443,7 @@ class CoerSwitch extends ControlValue {
|
|
|
2396
2443
|
this.onChange.emit(value);
|
|
2397
2444
|
}
|
|
2398
2445
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSwitch, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2399
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.1", type: CoerSwitch, isStandalone: false, selector: "coer-switch", 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 }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", 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 }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", 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: { onChange: "onChange" }, providers: [CONTROL_VALUE(CoerSwitch)], viewQueries: [{ propertyName: "coerSwitch", first: true, predicate: ["coerSwitch"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"{ 'coer-switch': true, 'placeholder-glow': isLoading(), 'invisible': isInvisible() }\"\r\n [ngStyle]=\"{ \r\n 'margin-top' : marginTop(), \r\n 'margin-right' : marginRight(), \r\n 'margin-bottom': marginBottom(), \r\n 'margin-left' : marginLeft() \r\n }\">\r\n <div [id]=\"_id\" \r\n [matTooltip]=\"_tooltip()\"\r\n [matTooltipPosition]=\"_tooltipPosition()\"\r\n [matTooltipDisabled]=\"!_isEnable()\"\r\n [matTooltipHideDelay]=\"0\"\r\n [ngClass]=\"{ 'placeholder': isLoading() }\">\r\n \r\n <mat-slide-toggle\r\n #coerSwitch\r\n [checked]=\"_value\"\r\n [disabled]=\"!_isEnable()\"\r\n [labelPosition]=\"labelPosition()\"\r\n (change)=\"_Change($event.checked)\"\r\n >{{ label() }}</mat-slide-toggle>\r\n </div>\r\n</div>", styles: ["div.coer-switch{height:40px;display:flex!important;align-items:center!important;position:relative!important;width:fit-content!important}div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field button .mdc-switch__track:after{background-color:var(--primary-inner)!important;filter:opacity(.6)!important}div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field button .mdc-switch__handle-track .mdc-switch__ripple{width:30px!important;height:30px!important}div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field button.mdc-switch.mdc-switch--selected.mdc-switch--checked .mdc-switch__handle-track .mdc-switch__handle .mdc-switch__icons{background-color:var(--primary-inner)!important;border-radius:20px!important}div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field label,div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field label::selection{font-weight:400;background-color:transparent!important;font-size:17px!important}div.coer-switch .placeholder{display:flex!important;height:27px!important}div.coer-switch .placeholder,div.coer-switch .placeholder *,div.coer-switch .placeholder-glow,div.coer-switch .placeholder-glow *{cursor:wait!important}coer-grid div.coer-switch{height:20px!important;justify-content:center!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$
|
|
2446
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.1", type: CoerSwitch, isStandalone: false, selector: "coer-switch", 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 }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", 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 }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", 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: { onChange: "onChange" }, providers: [CONTROL_VALUE(CoerSwitch)], viewQueries: [{ propertyName: "coerSwitch", first: true, predicate: ["coerSwitch"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"{ 'coer-switch': true, 'placeholder-glow': isLoading(), 'invisible': isInvisible() }\"\r\n [ngStyle]=\"{ \r\n 'margin-top' : marginTop(), \r\n 'margin-right' : marginRight(), \r\n 'margin-bottom': marginBottom(), \r\n 'margin-left' : marginLeft() \r\n }\">\r\n <div [id]=\"_id\" \r\n [matTooltip]=\"_tooltip()\"\r\n [matTooltipPosition]=\"_tooltipPosition()\"\r\n [matTooltipDisabled]=\"!_isEnable()\"\r\n [matTooltipHideDelay]=\"0\"\r\n [ngClass]=\"{ 'placeholder': isLoading() }\">\r\n \r\n <mat-slide-toggle\r\n #coerSwitch\r\n [checked]=\"_value\"\r\n [disabled]=\"!_isEnable()\"\r\n [labelPosition]=\"labelPosition()\"\r\n (change)=\"_Change($event.checked)\"\r\n >{{ label() }}</mat-slide-toggle>\r\n </div>\r\n</div>", styles: ["div.coer-switch{height:40px;display:flex!important;align-items:center!important;position:relative!important;width:fit-content!important}div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field button .mdc-switch__track:after{background-color:var(--primary-inner)!important;filter:opacity(.6)!important}div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field button .mdc-switch__handle-track .mdc-switch__ripple{width:30px!important;height:30px!important}div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field button.mdc-switch.mdc-switch--selected.mdc-switch--checked .mdc-switch__handle-track .mdc-switch__handle .mdc-switch__icons{background-color:var(--primary-inner)!important;border-radius:20px!important}div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field label,div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field label::selection{font-weight:400;background-color:transparent!important;font-size:17px!important}div.coer-switch .placeholder{display:flex!important;height:27px!important}div.coer-switch .placeholder,div.coer-switch .placeholder *,div.coer-switch .placeholder-glow,div.coer-switch .placeholder-glow *{cursor:wait!important}coer-grid div.coer-switch{height:20px!important;justify-content:center!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$5.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
2400
2447
|
}
|
|
2401
2448
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSwitch, decorators: [{
|
|
2402
2449
|
type: Component,
|
|
@@ -2642,7 +2689,7 @@ class CoerGridCell {
|
|
|
2642
2689
|
}
|
|
2643
2690
|
}
|
|
2644
2691
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerGridCell, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2645
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerGridCell, isStandalone: false, selector: "coer-grid-cell", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, checkOnRow: { classPropertyName: "checkOnRow", publicName: "checkOnRow", isSignal: true, isRequired: true, transformFunction: null }, enableInputs: { classPropertyName: "enableInputs", publicName: "enableInputs", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onClickRow: "onClickRow", onDoubleClickRow: "onDoubleClickRow", onSwitchChange: "onSwitchChange", onTextboxChange: "onTextboxChange", onNumberboxChange: "onNumberboxChange", onSelectboxChange: "onSelectboxChange", onKeyupEnter: "onKeyupEnter" }, viewQueries: [{ propertyName: "coerSwitch", first: true, predicate: ["coerSwitch"], descendants: true, isSignal: true }, { propertyName: "coerTextbox", first: true, predicate: ["coerTextbox"], descendants: true, isSignal: true }, { propertyName: "coerNumberbox", first: true, predicate: ["coerNumberbox"], descendants: true, isSignal: true }, { propertyName: "coerSelectbox", first: true, predicate: ["coerSelectbox"], descendants: true, isSignal: true }, { propertyName: "coerDatebox", first: true, predicate: ["coerDatebox"], descendants: true, isSignal: true }], ngImport: i0, template: "@switch(input) {\r\n\r\n @case ('coer-switch') {\r\n <coer-switch\r\n #coerSwitch\r\n [id]=\"id()\"\r\n [ngModel]=\"row()[header().property]\"\r\n [isDisabled]=\"_switchAttributes()?.isDisabled || false\" \r\n [tooltip]=\"_switchAttributes()?.tooltip || ''\"\r\n [tooltipPosition]=\"_switchAttributes()?.tooltipPosition || 'left'\"\r\n marginLeft=\"auto\"\r\n marginRight=\"auto\"\r\n (onChange)=\"onSwitchChange.emit({ \r\n indexRow: row().indexRow, \r\n property: header().property, \r\n row: row(), \r\n value: $event \r\n })\"\r\n ></coer-switch> \r\n }\r\n\r\n @case ('coer-textbox') {\r\n <coer-textbox\r\n #coerTextbox\r\n [id]=\"id()\"\r\n [ngModel]=\"row()[header().property]\"\r\n [isDisabled]=\"_textboxAttributes()?.isDisabled || false\"\r\n [isValid]=\"_textboxAttributes()?.isValid || false\"\r\n [isInvalid]=\"_textboxAttributes()?.isInvalid || false\"\r\n [placeholder]=\"_textboxAttributes()?.placeholder || ('type ' + header().columnName.toLowerCase() + '...')\"\r\n [selectOnFocus]=\"_textboxAttributes()?.selectOnFocus || true\"\r\n [textPosition]=\"_textboxAttributes()?.textPosition || 'left'\"\r\n [minLength]=\"_textboxAttributes()?.minLength || 0\"\r\n [maxLength]=\"_textboxAttributes()?.maxLength || 50\"\r\n (onInput)=\"onTextboxChange.emit({ \r\n indexRow: row().indexRow, \r\n property: header().property, \r\n row: row(), \r\n value: $event \r\n })\"\r\n (onKeyupEnter)=\"onKeyupEnter.emit({ \r\n id: id(),\r\n input: input, \r\n row: row(), \r\n value: $event\r\n })\"\r\n ></coer-textbox> \r\n }\r\n\r\n @case ('coer-numberbox') {\r\n <coer-numberbox\r\n #coerNumberbox\r\n [id]=\"id()\"\r\n [ngModel]=\"row()[header().property]\"\r\n [isDisabled]=\"_numberboxAttributes()?.isDisabled || false\"\r\n [isValid]=\"_numberboxAttributes()?.isValid || false\"\r\n [isInvalid]=\"_numberboxAttributes()?.isInvalid || false\"\r\n [placeholder]=\"_numberboxAttributes()?.placeholder || '#'\"\r\n [selectOnFocus]=\"_numberboxAttributes()?.selectOnFocus || true\"\r\n [textPosition]=\"_numberboxAttributes()?.textPosition || 'right'\"\r\n [min]=\"_numberboxAttributes()?.min || 0\"\r\n [max]=\"_numberboxAttributes()?.max || 2147483647\" \r\n [decimals]=\"_numberboxAttributes()?.decimals || 0\"\r\n (onInput)=\"onTextboxChange.emit({ \r\n indexRow: row().indexRow, \r\n property: header().property, \r\n row: row(), \r\n value: $event \r\n })\"\r\n (onKeyupEnter)=\"onKeyupEnter.emit({ \r\n id: id(),\r\n input: input, \r\n row: row(), \r\n value: $event\r\n })\"\r\n ></coer-numberbox>\r\n }\r\n\r\n @case ('coer-selectbox') {\r\n <coer-selectbox\r\n #coerSelectbox\r\n [id]=\"id()\"\r\n [ngModel]=\"row()[header().property]\" \r\n [isDisabled]=\"_selectboxAttributes()?.isDisabled || false\"\r\n [isValid]=\"_selectboxAttributes()?.isValid || false\"\r\n [isInvalid]=\"_selectboxAttributes()?.isInvalid || false\"\r\n [dataSource]=\"_selectboxAttributes()?.dataSource || []\"\r\n [placeholder]=\"_selectboxAttributes()?.placeholder || '-- Select --'\"\r\n [displayProperty]=\"_selectboxAttributes()?.displayProperty || 'name'\" \r\n (onSelected)=\"onTextboxChange.emit({ \r\n indexRow: row().indexRow, \r\n property: header().property, \r\n row: row(), \r\n value: $event \r\n }); onKeyupEnter.emit({ \r\n id: id(),\r\n input: input, \r\n row: row(), \r\n value: $event\r\n })\"\r\n (onUnselect)=\"onTextboxChange.emit({ \r\n indexRow: row().indexRow, \r\n property: header().property, \r\n row: row(), \r\n value: $event \r\n })\" \r\n ></coer-selectbox>\r\n }\r\n\r\n\r\n @case ('coer-datebox') {\r\n <coer-datebox\r\n #coerDatebox\r\n [id]=\"id()\"\r\n [ngModel]=\"row()[header().property]\" \r\n ></coer-datebox>\r\n }\r\n\r\n @default {\r\n <div class=\"display-flex align-items-center min-height-20px padding-5px\" \r\n [ngStyle]=\"{ \r\n 'justify-content': _GetTextAlign(),\r\n 'color' : _GetTextColor(),\r\n 'word-break' : _GetTextBreak(),\r\n 'cursor' : checkOnRow() ? 'pointer' : 'default' \r\n }\"\r\n (click)=\"onClickRow.emit(row())\"\r\n (dblclick)=\"onDoubleClickRow.emit(row())\"> \r\n <div [innerHTML]=\"_GetCellValue() | html\"></div> \r\n </div>\r\n }\r\n}", dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type:
|
|
2692
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerGridCell, isStandalone: false, selector: "coer-grid-cell", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, checkOnRow: { classPropertyName: "checkOnRow", publicName: "checkOnRow", isSignal: true, isRequired: true, transformFunction: null }, enableInputs: { classPropertyName: "enableInputs", publicName: "enableInputs", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onClickRow: "onClickRow", onDoubleClickRow: "onDoubleClickRow", onSwitchChange: "onSwitchChange", onTextboxChange: "onTextboxChange", onNumberboxChange: "onNumberboxChange", onSelectboxChange: "onSelectboxChange", onKeyupEnter: "onKeyupEnter" }, viewQueries: [{ propertyName: "coerSwitch", first: true, predicate: ["coerSwitch"], descendants: true, isSignal: true }, { propertyName: "coerTextbox", first: true, predicate: ["coerTextbox"], descendants: true, isSignal: true }, { propertyName: "coerNumberbox", first: true, predicate: ["coerNumberbox"], descendants: true, isSignal: true }, { propertyName: "coerSelectbox", first: true, predicate: ["coerSelectbox"], descendants: true, isSignal: true }, { propertyName: "coerDatebox", first: true, predicate: ["coerDatebox"], descendants: true, isSignal: true }], ngImport: i0, template: "@switch(input) {\r\n\r\n @case ('coer-switch') {\r\n <coer-switch\r\n #coerSwitch\r\n [id]=\"id()\"\r\n [ngModel]=\"row()[header().property]\"\r\n [isDisabled]=\"_switchAttributes()?.isDisabled || false\" \r\n [tooltip]=\"_switchAttributes()?.tooltip || ''\"\r\n [tooltipPosition]=\"_switchAttributes()?.tooltipPosition || 'left'\"\r\n marginLeft=\"auto\"\r\n marginRight=\"auto\"\r\n (onChange)=\"onSwitchChange.emit({ \r\n indexRow: row().indexRow, \r\n property: header().property, \r\n row: row(), \r\n value: $event \r\n })\"\r\n ></coer-switch> \r\n }\r\n\r\n @case ('coer-textbox') {\r\n <coer-textbox\r\n #coerTextbox\r\n [id]=\"id()\"\r\n [ngModel]=\"row()[header().property]\"\r\n [isDisabled]=\"_textboxAttributes()?.isDisabled || false\"\r\n [isValid]=\"_textboxAttributes()?.isValid || false\"\r\n [isInvalid]=\"_textboxAttributes()?.isInvalid || false\"\r\n [placeholder]=\"_textboxAttributes()?.placeholder || ('type ' + header().columnName.toLowerCase() + '...')\"\r\n [selectOnFocus]=\"_textboxAttributes()?.selectOnFocus || true\"\r\n [textPosition]=\"_textboxAttributes()?.textPosition || 'left'\"\r\n [minLength]=\"_textboxAttributes()?.minLength || 0\"\r\n [maxLength]=\"_textboxAttributes()?.maxLength || 50\"\r\n (onInput)=\"onTextboxChange.emit({ \r\n indexRow: row().indexRow, \r\n property: header().property, \r\n row: row(), \r\n value: $event \r\n })\"\r\n (onKeyupEnter)=\"onKeyupEnter.emit({ \r\n id: id(),\r\n input: input, \r\n row: row(), \r\n value: $event\r\n })\"\r\n ></coer-textbox> \r\n }\r\n\r\n @case ('coer-numberbox') {\r\n <coer-numberbox\r\n #coerNumberbox\r\n [id]=\"id()\"\r\n [ngModel]=\"row()[header().property]\"\r\n [isDisabled]=\"_numberboxAttributes()?.isDisabled || false\"\r\n [isValid]=\"_numberboxAttributes()?.isValid || false\"\r\n [isInvalid]=\"_numberboxAttributes()?.isInvalid || false\"\r\n [placeholder]=\"_numberboxAttributes()?.placeholder || '#'\"\r\n [selectOnFocus]=\"_numberboxAttributes()?.selectOnFocus || true\"\r\n [textPosition]=\"_numberboxAttributes()?.textPosition || 'right'\"\r\n [min]=\"_numberboxAttributes()?.min || 0\"\r\n [max]=\"_numberboxAttributes()?.max || 2147483647\" \r\n [decimals]=\"_numberboxAttributes()?.decimals || 0\"\r\n (onInput)=\"onTextboxChange.emit({ \r\n indexRow: row().indexRow, \r\n property: header().property, \r\n row: row(), \r\n value: $event \r\n })\"\r\n (onKeyupEnter)=\"onKeyupEnter.emit({ \r\n id: id(),\r\n input: input, \r\n row: row(), \r\n value: $event\r\n })\"\r\n ></coer-numberbox>\r\n }\r\n\r\n @case ('coer-selectbox') {\r\n <coer-selectbox\r\n #coerSelectbox\r\n [id]=\"id()\"\r\n [ngModel]=\"row()[header().property]\" \r\n [isDisabled]=\"_selectboxAttributes()?.isDisabled || false\"\r\n [isValid]=\"_selectboxAttributes()?.isValid || false\"\r\n [isInvalid]=\"_selectboxAttributes()?.isInvalid || false\"\r\n [dataSource]=\"_selectboxAttributes()?.dataSource || []\"\r\n [placeholder]=\"_selectboxAttributes()?.placeholder || '-- Select --'\"\r\n [displayProperty]=\"_selectboxAttributes()?.displayProperty || 'name'\" \r\n (onSelected)=\"onTextboxChange.emit({ \r\n indexRow: row().indexRow, \r\n property: header().property, \r\n row: row(), \r\n value: $event \r\n }); onKeyupEnter.emit({ \r\n id: id(),\r\n input: input, \r\n row: row(), \r\n value: $event\r\n })\"\r\n (onUnselect)=\"onTextboxChange.emit({ \r\n indexRow: row().indexRow, \r\n property: header().property, \r\n row: row(), \r\n value: $event \r\n })\" \r\n ></coer-selectbox>\r\n }\r\n\r\n\r\n @case ('coer-datebox') {\r\n <coer-datebox\r\n #coerDatebox\r\n [id]=\"id()\"\r\n [ngModel]=\"row()[header().property]\" \r\n ></coer-datebox>\r\n }\r\n\r\n @default {\r\n <div class=\"display-flex align-items-center min-height-20px padding-5px\" \r\n [ngStyle]=\"{ \r\n 'justify-content': _GetTextAlign(),\r\n 'color' : _GetTextColor(),\r\n 'word-break' : _GetTextBreak(),\r\n 'cursor' : checkOnRow() ? 'pointer' : 'default' \r\n }\"\r\n (click)=\"onClickRow.emit(row())\"\r\n (dblclick)=\"onDoubleClickRow.emit(row())\"> \r\n <div [innerHTML]=\"_GetCellValue() | html\"></div> \r\n </div>\r\n }\r\n}", dependencies: [{ 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: CoerDateBox, selector: "coer-datebox", inputs: ["id", "value", "label", "placeholder", "textPosition", "isWritable", "isInvalid", "isValid", "externalButton", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onOpen", "onClose", "onChangeValue", "onClickExternalButton"] }, { 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", "externalButton", "dataSource", "displayProperty", "rowsByPage", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onSelected", "onUnselect", "onClickExternalButton"] }, { kind: "component", type: CoerSwitch, selector: "coer-switch", inputs: ["id", "value", "label", "labelPosition", "isLoading", "isDisabled", "isReadonly", "isInvisible", "tooltip", "tooltipPosition", "marginTop", "marginRight", "marginBottom", "marginLeft"], 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: i5.HtmlPipe, name: "html" }] }); }
|
|
2646
2693
|
}
|
|
2647
2694
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerGridCell, decorators: [{
|
|
2648
2695
|
type: Component,
|
|
@@ -2658,6 +2705,7 @@ class CoerGridBody {
|
|
|
2658
2705
|
//Elements
|
|
2659
2706
|
this._coerCheckboxList = viewChildren(CoerCheckbox);
|
|
2660
2707
|
this._coerGridCellList = viewChildren((CoerGridCell));
|
|
2708
|
+
this._body = null;
|
|
2661
2709
|
//Signals
|
|
2662
2710
|
this._sort = signal({ columnName: '', direction: 'none', icon: '' });
|
|
2663
2711
|
//Callback
|
|
@@ -3112,6 +3160,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
|
|
|
3112
3160
|
|
|
3113
3161
|
class CoerGridfooter {
|
|
3114
3162
|
constructor() {
|
|
3163
|
+
//Elements
|
|
3164
|
+
this._footer = null;
|
|
3165
|
+
//Callback
|
|
3166
|
+
this.GetIdCalculated = input.required();
|
|
3115
3167
|
//Inputs
|
|
3116
3168
|
this.footer = input({ show: true });
|
|
3117
3169
|
this.dataSource = input([]);
|
|
@@ -3119,12 +3171,21 @@ class CoerGridfooter {
|
|
|
3119
3171
|
this.dataSourceSelected = input([]);
|
|
3120
3172
|
this.isLoadingInner = input(true);
|
|
3121
3173
|
}
|
|
3174
|
+
ngAfterViewInit() {
|
|
3175
|
+
Tools.Sleep(500).then(_ => {
|
|
3176
|
+
this._footer = HTMLElements.GetElement(`#${this.GetIdCalculated()(-1, -1, 'footer')}`);
|
|
3177
|
+
});
|
|
3178
|
+
}
|
|
3179
|
+
//getter
|
|
3180
|
+
get heigth() {
|
|
3181
|
+
return Number(HTMLElements.GetElementHeight(this._footer).split('px')[0]);
|
|
3182
|
+
}
|
|
3122
3183
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerGridfooter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3123
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerGridfooter, isStandalone: false, selector: "coer-grid-footer", inputs: { footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, dataSourceFiltered: { classPropertyName: "dataSourceFiltered", publicName: "dataSourceFiltered", isSignal: true, isRequired: false, transformFunction: null }, dataSourceSelected: { classPropertyName: "dataSourceSelected", publicName: "dataSourceSelected", isSignal: true, isRequired: false, transformFunction: null }, isLoadingInner: { classPropertyName: "isLoadingInner", publicName: "isLoadingInner", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if(footer().show) {\r\n <footer class=\"flex-middle-between padding-top-5px\">\r\n <span>\r\n @if(isLoadingInner()) {\r\n <span class=\"animation-fade\"> Loading </span>\r\n }\r\n\r\n @else if(dataSourceSelected().length > 0) {\r\n <span class=\"margin-left-5px text-gray\">\r\n <i class=\"bi bi-check2-square\"></i>\r\n {{ dataSourceSelected().length | numericFormat }}\r\n </span>\r\n }\r\n </span>\r\n\r\n @if(dataSource().length > 0) {\r\n <span class=\"margin-right-5px text-gray\"> {{ dataSource().length | numericFormat }} Rows </span>\r\n } \r\n </footer>\r\n}", dependencies: [{ kind: "pipe", type: i5.NumericFormatPipe, name: "numericFormat" }] }); }
|
|
3184
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerGridfooter, isStandalone: false, selector: "coer-grid-footer", inputs: { GetIdCalculated: { classPropertyName: "GetIdCalculated", publicName: "GetIdCalculated", isSignal: true, isRequired: true, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, dataSourceFiltered: { classPropertyName: "dataSourceFiltered", publicName: "dataSourceFiltered", isSignal: true, isRequired: false, transformFunction: null }, dataSourceSelected: { classPropertyName: "dataSourceSelected", publicName: "dataSourceSelected", isSignal: true, isRequired: false, transformFunction: null }, isLoadingInner: { classPropertyName: "isLoadingInner", publicName: "isLoadingInner", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if(footer().show) {\r\n <footer [id]=\"GetIdCalculated()(-1, -1, 'footer')\" class=\"flex-middle-between padding-top-5px\">\r\n <span>\r\n @if(isLoadingInner()) {\r\n <span class=\"animation-fade\"> Loading </span>\r\n }\r\n\r\n @else if(dataSourceSelected().length > 0) {\r\n <span class=\"margin-left-5px text-gray\">\r\n <i class=\"bi bi-check2-square\"></i>\r\n {{ dataSourceSelected().length | numericFormat }}\r\n </span>\r\n }\r\n </span>\r\n\r\n @if(dataSource().length > 0) {\r\n <span class=\"margin-right-5px text-gray\"> {{ dataSource().length | numericFormat }} Rows </span>\r\n } \r\n </footer>\r\n}", dependencies: [{ kind: "pipe", type: i5.NumericFormatPipe, name: "numericFormat" }] }); }
|
|
3124
3185
|
}
|
|
3125
3186
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerGridfooter, decorators: [{
|
|
3126
3187
|
type: Component,
|
|
3127
|
-
args: [{ selector: 'coer-grid-footer', standalone: false, template: "@if(footer().show) {\r\n <footer class=\"flex-middle-between padding-top-5px\">\r\n <span>\r\n @if(isLoadingInner()) {\r\n <span class=\"animation-fade\"> Loading </span>\r\n }\r\n\r\n @else if(dataSourceSelected().length > 0) {\r\n <span class=\"margin-left-5px text-gray\">\r\n <i class=\"bi bi-check2-square\"></i>\r\n {{ dataSourceSelected().length | numericFormat }}\r\n </span>\r\n }\r\n </span>\r\n\r\n @if(dataSource().length > 0) {\r\n <span class=\"margin-right-5px text-gray\"> {{ dataSource().length | numericFormat }} Rows </span>\r\n } \r\n </footer>\r\n}" }]
|
|
3188
|
+
args: [{ selector: 'coer-grid-footer', standalone: false, template: "@if(footer().show) {\r\n <footer [id]=\"GetIdCalculated()(-1, -1, 'footer')\" class=\"flex-middle-between padding-top-5px\">\r\n <span>\r\n @if(isLoadingInner()) {\r\n <span class=\"animation-fade\"> Loading </span>\r\n }\r\n\r\n @else if(dataSourceSelected().length > 0) {\r\n <span class=\"margin-left-5px text-gray\">\r\n <i class=\"bi bi-check2-square\"></i>\r\n {{ dataSourceSelected().length | numericFormat }}\r\n </span>\r\n }\r\n </span>\r\n\r\n @if(dataSource().length > 0) {\r\n <span class=\"margin-right-5px text-gray\"> {{ dataSource().length | numericFormat }} Rows </span>\r\n } \r\n </footer>\r\n}" }]
|
|
3128
3189
|
}] });
|
|
3129
3190
|
|
|
3130
3191
|
class CoerGrid extends CoerGridExtension {
|
|
@@ -3271,11 +3332,11 @@ class CoerGrid extends CoerGridExtension {
|
|
|
3271
3332
|
return dataSource.shift();
|
|
3272
3333
|
}
|
|
3273
3334
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerGrid, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3274
|
-
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 -->\r\n <coer-grid-header\r\n #coerGridHeader \r\n [GetIdCalculated]=\"_GetIdCalculated\"\r\n [GetColumnName]=\"_GetColumnName\"\r\n [columns]=\"_columns()\"\r\n [dataSource]=\"_valueSignal()\"\r\n [dataSourceFiltered]=\"_dataSourceFiltered()\"\r\n [dataSourceSelected]=\"dataSourceSelected()\"\r\n [exportButton]=\"exportButton\"\r\n [importButton]=\"importButton\"\r\n [addButton]=\"addButton\"\r\n [saveButton]=\"saveButton\"\r\n [search]=\"search\"\r\n [searchInner]=\"_searchInner()\"\r\n [isLoadingInner]=\"_isLoadingInner()\"\r\n [isLoading]=\"isLoading()\"\r\n [isDisabled]=\"isDisabled()\"\r\n [isReadonly]=\"isReadonly()\"\r\n [isInvisible]=\"isInvisible()\" \r\n (onClickExport)=\"onClickExport.emit($event)\"\r\n (onClickImport)=\"_Import($event)\"\r\n (onClickAdd)=\"onClickAdd.emit()\"\r\n (onClickSave)=\"onClickSave.emit()\"\r\n (onInputSearch)=\"_UpdateSearchInner($event)\"\r\n (onClickClearSearch)=\"_UpdateSearchInner($event)\"\r\n (onKeyupEnterSearch)=\"onKeyupEnter.emit($event)\"> \r\n <ng-content></ng-content> \r\n </coer-grid-header>\r\n\r\n <section class=\"coer-grid-container\" [ngStyle]=\"{ 'overflow': !isLoading() ? 'auto' : 'hidden' }\"> \r\n <div [ngStyle]=\"{ 'height': _height, 'min-height': minHeight(), 'max-height': maxHeight() }\"> \r\n <!-- BODY --> \r\n <coer-grid-body\r\n #coerGridBody\r\n [GetIdCalculated]=\"_GetIdCalculated\"\r\n [value]=\"_valueSignal()\"\r\n [columns]=\"_columns()\"\r\n [dataSource]=\"_dataSource()\"\r\n [dataSourceSelected]=\"dataSourceSelected()\"\r\n [search]=\"search\"\r\n [searchInner]=\"_searchInner()\"\r\n [checkbox]=\"checkbox\"\r\n [buttonByRow]=\"buttonByRow\"\r\n [isLoadingInner]=\"_isLoadingInner()\"\r\n [isLoading]=\"isLoading()\"\r\n [isDisabled]=\"isDisabled()\"\r\n [isReadonly]=\"isReadonly()\"\r\n [isInvisible]=\"isInvisible()\"\r\n [isEnabled]=\"_isEnabled()\"\r\n [enableSort]=\"enableSort()\"\r\n [tooltipByRow]=\"tooltipByRow()\"\r\n [enableFocusNext]=\"enableFocusNext()\"\r\n [enableFocusRow]=\"enableFocusRow()\"\r\n [enableHoverRow]=\"enableHoverRow()\"\r\n [isStriped]=\"isStriped()\"\r\n (onValueChange)=\"SetValue($event)\"\r\n (onClickRow)=\"onClickRow.emit($event)\"\r\n (onDoubleClickRow)=\"onDoubleClickRow.emit($event)\"\r\n (onCheckboxChange)=\"onCheckboxChange.emit($event)\"\r\n (onInnerLoadingChange)=\"_isLoadingInner.set($event)\"\r\n (onClickDeleteRow)=\"onClickDeleteRow.emit($event)\"\r\n (onClickEditRow)=\"onClickEditRow.emit($event)\" \r\n (onClickGoRow)=\"onClickGoRow.emit($event)\" \r\n (onSwitchChange)=\"_SetValueInput($event, 'coer-switch')\"\r\n (onTextboxChange)=\"_SetValueInput($event, 'coer-textbox')\"\r\n (onNumberboxChange)=\"_SetValueInput($event, 'coer-numberbox')\"\r\n (onSelectboxChange)=\"_SetValueInput($event, 'coer-selectbox')\"\r\n (onKeyupEnter)=\"onKeyupEnter.emit($event)\"\r\n (onKeyupEnterLast)=\"onKeyupEnterLast.emit($event)\"\r\n ></coer-grid-body>\r\n\r\n <!-- Loading / Empty -->\r\n @if(isLoading()) {\r\n <div class=\"loading\">\r\n <div class=\"loading-content\">\r\n <i class=\"icon-circle-notch animation-spin text-primary\"></i>\r\n <span class=\"fa-fade\">Loading</span>\r\n </div>\r\n </div> \r\n } \r\n\r\n @else if(_isEnabled() && _valueSignal().length <= 0) {\r\n <div class=\"empty-data\">\r\n <div class=\"empty-data-content\"> No Data </div>\r\n </div>\r\n } \r\n </div>\r\n </section> \r\n\r\n <!-- FOOTER -->\r\n <coer-grid-footer\r\n #coerGridFooter\r\n [footer]=\"footer\"\r\n [dataSource]=\"_valueSignal()\"\r\n [dataSourceFiltered]=\"_dataSourceFiltered()\"\r\n [dataSourceSelected]=\"dataSourceSelected()\" \r\n [isLoadingInner]=\"_isLoadingInner()\"\r\n ></coer-grid-footer>\r\n</div>", styles: ["div.coer-grid section.coer-grid-container{position:relative!important}div.coer-grid section.coer-grid-container div.loading,div.coer-grid section.coer-grid-container div.empty-data{position:absolute!important;inset:0!important;z-index:100!important;display:flex!important;align-items:center!important;justify-content:center!important}div.coer-grid section.coer-grid-container div.loading div.loading-content,div.coer-grid section.coer-grid-container div.loading div.empty-data-content,div.coer-grid section.coer-grid-container div.empty-data div.loading-content,div.coer-grid section.coer-grid-container div.empty-data div.empty-data-content{flex-flow:column!important;display:inherit!important;justify-content:inherit!important;align-items:inherit!important;font-size:35px!important;color:var(--gray)!important}div.coer-grid section.coer-grid-container div.loading div.loading-content::selection,div.coer-grid section.coer-grid-container div.loading div.empty-data-content::selection,div.coer-grid section.coer-grid-container div.empty-data div.loading-content::selection,div.coer-grid section.coer-grid-container div.empty-data div.empty-data-content::selection{background-color:transparent!important}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CoerGridHeader, selector: "coer-grid-header", inputs: ["GetIdCalculated", "GetColumnName", "columns", "dataSource", "dataSourceFiltered", "dataSourceSelected", "exportButton", "importButton", "addButton", "saveButton", "search", "searchInner", "isLoadingInner", "isLoading", "isDisabled", "isReadonly", "isInvisible"], outputs: ["onClickExport", "onClickImport", "onClickAdd", "onClickSave", "onInputSearch", "onClickClearSearch", "onKeyupEnterSearch"] }, { kind: "component", type: CoerGridBody, selector: "coer-grid-body", inputs: ["GetIdCalculated", "value", "columns", "dataSource", "dataSourceSelected", "search", "searchInner", "checkbox", "buttonByRow", "isLoadingInner", "isLoading", "isDisabled", "isReadonly", "isInvisible", "isEnabled", "enableSort", "enableFocusNext", "enableFocusRow", "enableHoverRow", "isStriped", "tooltipByRow"], outputs: ["onValueChange", "onClickRow", "onDoubleClickRow", "onInnerLoadingChange", "onCheckboxChange", "onClickDeleteRow", "onClickEditRow", "onClickGoRow", "onSwitchChange", "onTextboxChange", "onNumberboxChange", "onSelectboxChange", "onKeyupEnter", "onKeyupEnterLast"] }, { kind: "component", type: CoerGridfooter, selector: "coer-grid-footer", inputs: ["footer", "dataSource", "dataSourceFiltered", "dataSourceSelected", "isLoadingInner"] }] }); }
|
|
3335
|
+
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 [id]=\"_GetIdCalculated(-1, -1, 'coer-grid-inner')\" class=\"coer-grid\" [ngStyle]=\"{ 'width': width(), 'min-Width': MinWidth(), 'max-Width': MaxWidth(), 'margin': margin() }\">\r\n <!-- HEADER -->\r\n <coer-grid-header \r\n #coerGridHeader \r\n [GetIdCalculated]=\"_GetIdCalculated\"\r\n [GetColumnName]=\"_GetColumnName\"\r\n [columns]=\"_columns()\"\r\n [dataSource]=\"_valueSignal()\"\r\n [dataSourceFiltered]=\"_dataSourceFiltered()\"\r\n [dataSourceSelected]=\"dataSourceSelected()\"\r\n [exportButton]=\"exportButton\"\r\n [importButton]=\"importButton\"\r\n [addButton]=\"addButton\"\r\n [saveButton]=\"saveButton\"\r\n [search]=\"search\"\r\n [searchInner]=\"_searchInner()\"\r\n [isLoadingInner]=\"_isLoadingInner()\"\r\n [isLoading]=\"isLoading()\"\r\n [isDisabled]=\"isDisabled()\"\r\n [isReadonly]=\"isReadonly()\"\r\n [isInvisible]=\"isInvisible()\" \r\n (onClickExport)=\"onClickExport.emit($event)\"\r\n (onClickImport)=\"_Import($event)\"\r\n (onClickAdd)=\"onClickAdd.emit()\"\r\n (onClickSave)=\"onClickSave.emit()\"\r\n (onInputSearch)=\"_UpdateSearchInner($event)\"\r\n (onClickClearSearch)=\"_UpdateSearchInner($event)\"\r\n (onKeyupEnterSearch)=\"onKeyupEnter.emit($event)\"> \r\n <ng-content></ng-content> \r\n </coer-grid-header>\r\n\r\n <section class=\"coer-grid-container\" [ngStyle]=\"{ 'overflow': !isLoading() ? 'auto' : 'hidden' }\"> \r\n <div [ngStyle]=\"{ 'height': _height, 'min-height': minHeight(), 'max-height': maxHeight() }\"> \r\n <!-- BODY --> \r\n <coer-grid-body\r\n #coerGridBody\r\n [GetIdCalculated]=\"_GetIdCalculated\"\r\n [value]=\"_valueSignal()\"\r\n [columns]=\"_columns()\"\r\n [dataSource]=\"_dataSource()\"\r\n [dataSourceSelected]=\"dataSourceSelected()\"\r\n [search]=\"search\"\r\n [searchInner]=\"_searchInner()\"\r\n [checkbox]=\"checkbox\"\r\n [buttonByRow]=\"buttonByRow\"\r\n [isLoadingInner]=\"_isLoadingInner()\"\r\n [isLoading]=\"isLoading()\"\r\n [isDisabled]=\"isDisabled()\"\r\n [isReadonly]=\"isReadonly()\"\r\n [isInvisible]=\"isInvisible()\"\r\n [isEnabled]=\"_isEnabled()\"\r\n [enableSort]=\"enableSort()\"\r\n [tooltipByRow]=\"tooltipByRow()\"\r\n [enableFocusNext]=\"enableFocusNext()\"\r\n [enableFocusRow]=\"enableFocusRow()\"\r\n [enableHoverRow]=\"enableHoverRow()\"\r\n [isStriped]=\"isStriped()\"\r\n (onValueChange)=\"SetValue($event)\"\r\n (onClickRow)=\"onClickRow.emit($event)\"\r\n (onDoubleClickRow)=\"onDoubleClickRow.emit($event)\"\r\n (onCheckboxChange)=\"onCheckboxChange.emit($event)\"\r\n (onInnerLoadingChange)=\"_isLoadingInner.set($event)\"\r\n (onClickDeleteRow)=\"onClickDeleteRow.emit($event)\"\r\n (onClickEditRow)=\"onClickEditRow.emit($event)\" \r\n (onClickGoRow)=\"onClickGoRow.emit($event)\" \r\n (onSwitchChange)=\"_SetValueInput($event, 'coer-switch')\"\r\n (onTextboxChange)=\"_SetValueInput($event, 'coer-textbox')\"\r\n (onNumberboxChange)=\"_SetValueInput($event, 'coer-numberbox')\"\r\n (onSelectboxChange)=\"_SetValueInput($event, 'coer-selectbox')\"\r\n (onKeyupEnter)=\"onKeyupEnter.emit($event)\"\r\n (onKeyupEnterLast)=\"onKeyupEnterLast.emit($event)\"\r\n ></coer-grid-body>\r\n\r\n <!-- Loading / Empty -->\r\n @if(isLoading()) {\r\n <div class=\"loading\">\r\n <div class=\"loading-content\">\r\n <i class=\"icon-circle-notch animation-spin text-primary\"></i>\r\n <span class=\"fa-fade\">Loading</span>\r\n </div>\r\n </div> \r\n } \r\n\r\n @else if(_isEnabled() && _valueSignal().length <= 0) {\r\n <div class=\"empty-data\">\r\n <div class=\"empty-data-content\"> No Data </div>\r\n </div>\r\n } \r\n </div>\r\n </section> \r\n\r\n <!-- FOOTER -->\r\n <coer-grid-footer\r\n #coerGridFooter\r\n [GetIdCalculated]=\"_GetIdCalculated\"\r\n [footer]=\"footer\"\r\n [dataSource]=\"_valueSignal()\"\r\n [dataSourceFiltered]=\"_dataSourceFiltered()\"\r\n [dataSourceSelected]=\"dataSourceSelected()\" \r\n [isLoadingInner]=\"_isLoadingInner()\"\r\n ></coer-grid-footer>\r\n</div>", styles: ["div.coer-grid section.coer-grid-container{position:relative!important}div.coer-grid section.coer-grid-container div.loading,div.coer-grid section.coer-grid-container div.empty-data{position:absolute!important;inset:0!important;z-index:100!important;display:flex!important;align-items:center!important;justify-content:center!important}div.coer-grid section.coer-grid-container div.loading div.loading-content,div.coer-grid section.coer-grid-container div.loading div.empty-data-content,div.coer-grid section.coer-grid-container div.empty-data div.loading-content,div.coer-grid section.coer-grid-container div.empty-data div.empty-data-content{flex-flow:column!important;display:inherit!important;justify-content:inherit!important;align-items:inherit!important;font-size:35px!important;color:var(--gray)!important}div.coer-grid section.coer-grid-container div.loading div.loading-content::selection,div.coer-grid section.coer-grid-container div.loading div.empty-data-content::selection,div.coer-grid section.coer-grid-container div.empty-data div.loading-content::selection,div.coer-grid section.coer-grid-container div.empty-data div.empty-data-content::selection{background-color:transparent!important}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CoerGridHeader, selector: "coer-grid-header", inputs: ["GetIdCalculated", "GetColumnName", "columns", "dataSource", "dataSourceFiltered", "dataSourceSelected", "exportButton", "importButton", "addButton", "saveButton", "search", "searchInner", "isLoadingInner", "isLoading", "isDisabled", "isReadonly", "isInvisible"], outputs: ["onClickExport", "onClickImport", "onClickAdd", "onClickSave", "onInputSearch", "onClickClearSearch", "onKeyupEnterSearch"] }, { kind: "component", type: CoerGridBody, selector: "coer-grid-body", inputs: ["GetIdCalculated", "value", "columns", "dataSource", "dataSourceSelected", "search", "searchInner", "checkbox", "buttonByRow", "isLoadingInner", "isLoading", "isDisabled", "isReadonly", "isInvisible", "isEnabled", "enableSort", "enableFocusNext", "enableFocusRow", "enableHoverRow", "isStriped", "tooltipByRow"], outputs: ["onValueChange", "onClickRow", "onDoubleClickRow", "onInnerLoadingChange", "onCheckboxChange", "onClickDeleteRow", "onClickEditRow", "onClickGoRow", "onSwitchChange", "onTextboxChange", "onNumberboxChange", "onSelectboxChange", "onKeyupEnter", "onKeyupEnterLast"] }, { kind: "component", type: CoerGridfooter, selector: "coer-grid-footer", inputs: ["GetIdCalculated", "footer", "dataSource", "dataSourceFiltered", "dataSourceSelected", "isLoadingInner"] }] }); }
|
|
3275
3336
|
}
|
|
3276
3337
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerGrid, decorators: [{
|
|
3277
3338
|
type: Component,
|
|
3278
|
-
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 -->\r\n <coer-grid-header\r\n #coerGridHeader \r\n [GetIdCalculated]=\"_GetIdCalculated\"\r\n [GetColumnName]=\"_GetColumnName\"\r\n [columns]=\"_columns()\"\r\n [dataSource]=\"_valueSignal()\"\r\n [dataSourceFiltered]=\"_dataSourceFiltered()\"\r\n [dataSourceSelected]=\"dataSourceSelected()\"\r\n [exportButton]=\"exportButton\"\r\n [importButton]=\"importButton\"\r\n [addButton]=\"addButton\"\r\n [saveButton]=\"saveButton\"\r\n [search]=\"search\"\r\n [searchInner]=\"_searchInner()\"\r\n [isLoadingInner]=\"_isLoadingInner()\"\r\n [isLoading]=\"isLoading()\"\r\n [isDisabled]=\"isDisabled()\"\r\n [isReadonly]=\"isReadonly()\"\r\n [isInvisible]=\"isInvisible()\" \r\n (onClickExport)=\"onClickExport.emit($event)\"\r\n (onClickImport)=\"_Import($event)\"\r\n (onClickAdd)=\"onClickAdd.emit()\"\r\n (onClickSave)=\"onClickSave.emit()\"\r\n (onInputSearch)=\"_UpdateSearchInner($event)\"\r\n (onClickClearSearch)=\"_UpdateSearchInner($event)\"\r\n (onKeyupEnterSearch)=\"onKeyupEnter.emit($event)\"> \r\n <ng-content></ng-content> \r\n </coer-grid-header>\r\n\r\n <section class=\"coer-grid-container\" [ngStyle]=\"{ 'overflow': !isLoading() ? 'auto' : 'hidden' }\"> \r\n <div [ngStyle]=\"{ 'height': _height, 'min-height': minHeight(), 'max-height': maxHeight() }\"> \r\n <!-- BODY --> \r\n <coer-grid-body\r\n #coerGridBody\r\n [GetIdCalculated]=\"_GetIdCalculated\"\r\n [value]=\"_valueSignal()\"\r\n [columns]=\"_columns()\"\r\n [dataSource]=\"_dataSource()\"\r\n [dataSourceSelected]=\"dataSourceSelected()\"\r\n [search]=\"search\"\r\n [searchInner]=\"_searchInner()\"\r\n [checkbox]=\"checkbox\"\r\n [buttonByRow]=\"buttonByRow\"\r\n [isLoadingInner]=\"_isLoadingInner()\"\r\n [isLoading]=\"isLoading()\"\r\n [isDisabled]=\"isDisabled()\"\r\n [isReadonly]=\"isReadonly()\"\r\n [isInvisible]=\"isInvisible()\"\r\n [isEnabled]=\"_isEnabled()\"\r\n [enableSort]=\"enableSort()\"\r\n [tooltipByRow]=\"tooltipByRow()\"\r\n [enableFocusNext]=\"enableFocusNext()\"\r\n [enableFocusRow]=\"enableFocusRow()\"\r\n [enableHoverRow]=\"enableHoverRow()\"\r\n [isStriped]=\"isStriped()\"\r\n (onValueChange)=\"SetValue($event)\"\r\n (onClickRow)=\"onClickRow.emit($event)\"\r\n (onDoubleClickRow)=\"onDoubleClickRow.emit($event)\"\r\n (onCheckboxChange)=\"onCheckboxChange.emit($event)\"\r\n (onInnerLoadingChange)=\"_isLoadingInner.set($event)\"\r\n (onClickDeleteRow)=\"onClickDeleteRow.emit($event)\"\r\n (onClickEditRow)=\"onClickEditRow.emit($event)\" \r\n (onClickGoRow)=\"onClickGoRow.emit($event)\" \r\n (onSwitchChange)=\"_SetValueInput($event, 'coer-switch')\"\r\n (onTextboxChange)=\"_SetValueInput($event, 'coer-textbox')\"\r\n (onNumberboxChange)=\"_SetValueInput($event, 'coer-numberbox')\"\r\n (onSelectboxChange)=\"_SetValueInput($event, 'coer-selectbox')\"\r\n (onKeyupEnter)=\"onKeyupEnter.emit($event)\"\r\n (onKeyupEnterLast)=\"onKeyupEnterLast.emit($event)\"\r\n ></coer-grid-body>\r\n\r\n <!-- Loading / Empty -->\r\n @if(isLoading()) {\r\n <div class=\"loading\">\r\n <div class=\"loading-content\">\r\n <i class=\"icon-circle-notch animation-spin text-primary\"></i>\r\n <span class=\"fa-fade\">Loading</span>\r\n </div>\r\n </div> \r\n } \r\n\r\n @else if(_isEnabled() && _valueSignal().length <= 0) {\r\n <div class=\"empty-data\">\r\n <div class=\"empty-data-content\"> No Data </div>\r\n </div>\r\n } \r\n </div>\r\n </section> \r\n\r\n <!-- FOOTER -->\r\n <coer-grid-footer\r\n #coerGridFooter\r\n [footer]=\"footer\"\r\n [dataSource]=\"_valueSignal()\"\r\n [dataSourceFiltered]=\"_dataSourceFiltered()\"\r\n [dataSourceSelected]=\"dataSourceSelected()\" \r\n [isLoadingInner]=\"_isLoadingInner()\"\r\n ></coer-grid-footer>\r\n</div>", styles: ["div.coer-grid section.coer-grid-container{position:relative!important}div.coer-grid section.coer-grid-container div.loading,div.coer-grid section.coer-grid-container div.empty-data{position:absolute!important;inset:0!important;z-index:100!important;display:flex!important;align-items:center!important;justify-content:center!important}div.coer-grid section.coer-grid-container div.loading div.loading-content,div.coer-grid section.coer-grid-container div.loading div.empty-data-content,div.coer-grid section.coer-grid-container div.empty-data div.loading-content,div.coer-grid section.coer-grid-container div.empty-data div.empty-data-content{flex-flow:column!important;display:inherit!important;justify-content:inherit!important;align-items:inherit!important;font-size:35px!important;color:var(--gray)!important}div.coer-grid section.coer-grid-container div.loading div.loading-content::selection,div.coer-grid section.coer-grid-container div.loading div.empty-data-content::selection,div.coer-grid section.coer-grid-container div.empty-data div.loading-content::selection,div.coer-grid section.coer-grid-container div.empty-data div.empty-data-content::selection{background-color:transparent!important}\n"] }]
|
|
3339
|
+
args: [{ selector: 'coer-grid', providers: [CONTROL_VALUE(CoerGrid)], standalone: false, template: "<div [id]=\"_GetIdCalculated(-1, -1, 'coer-grid-inner')\" class=\"coer-grid\" [ngStyle]=\"{ 'width': width(), 'min-Width': MinWidth(), 'max-Width': MaxWidth(), 'margin': margin() }\">\r\n <!-- HEADER -->\r\n <coer-grid-header \r\n #coerGridHeader \r\n [GetIdCalculated]=\"_GetIdCalculated\"\r\n [GetColumnName]=\"_GetColumnName\"\r\n [columns]=\"_columns()\"\r\n [dataSource]=\"_valueSignal()\"\r\n [dataSourceFiltered]=\"_dataSourceFiltered()\"\r\n [dataSourceSelected]=\"dataSourceSelected()\"\r\n [exportButton]=\"exportButton\"\r\n [importButton]=\"importButton\"\r\n [addButton]=\"addButton\"\r\n [saveButton]=\"saveButton\"\r\n [search]=\"search\"\r\n [searchInner]=\"_searchInner()\"\r\n [isLoadingInner]=\"_isLoadingInner()\"\r\n [isLoading]=\"isLoading()\"\r\n [isDisabled]=\"isDisabled()\"\r\n [isReadonly]=\"isReadonly()\"\r\n [isInvisible]=\"isInvisible()\" \r\n (onClickExport)=\"onClickExport.emit($event)\"\r\n (onClickImport)=\"_Import($event)\"\r\n (onClickAdd)=\"onClickAdd.emit()\"\r\n (onClickSave)=\"onClickSave.emit()\"\r\n (onInputSearch)=\"_UpdateSearchInner($event)\"\r\n (onClickClearSearch)=\"_UpdateSearchInner($event)\"\r\n (onKeyupEnterSearch)=\"onKeyupEnter.emit($event)\"> \r\n <ng-content></ng-content> \r\n </coer-grid-header>\r\n\r\n <section class=\"coer-grid-container\" [ngStyle]=\"{ 'overflow': !isLoading() ? 'auto' : 'hidden' }\"> \r\n <div [ngStyle]=\"{ 'height': _height, 'min-height': minHeight(), 'max-height': maxHeight() }\"> \r\n <!-- BODY --> \r\n <coer-grid-body\r\n #coerGridBody\r\n [GetIdCalculated]=\"_GetIdCalculated\"\r\n [value]=\"_valueSignal()\"\r\n [columns]=\"_columns()\"\r\n [dataSource]=\"_dataSource()\"\r\n [dataSourceSelected]=\"dataSourceSelected()\"\r\n [search]=\"search\"\r\n [searchInner]=\"_searchInner()\"\r\n [checkbox]=\"checkbox\"\r\n [buttonByRow]=\"buttonByRow\"\r\n [isLoadingInner]=\"_isLoadingInner()\"\r\n [isLoading]=\"isLoading()\"\r\n [isDisabled]=\"isDisabled()\"\r\n [isReadonly]=\"isReadonly()\"\r\n [isInvisible]=\"isInvisible()\"\r\n [isEnabled]=\"_isEnabled()\"\r\n [enableSort]=\"enableSort()\"\r\n [tooltipByRow]=\"tooltipByRow()\"\r\n [enableFocusNext]=\"enableFocusNext()\"\r\n [enableFocusRow]=\"enableFocusRow()\"\r\n [enableHoverRow]=\"enableHoverRow()\"\r\n [isStriped]=\"isStriped()\"\r\n (onValueChange)=\"SetValue($event)\"\r\n (onClickRow)=\"onClickRow.emit($event)\"\r\n (onDoubleClickRow)=\"onDoubleClickRow.emit($event)\"\r\n (onCheckboxChange)=\"onCheckboxChange.emit($event)\"\r\n (onInnerLoadingChange)=\"_isLoadingInner.set($event)\"\r\n (onClickDeleteRow)=\"onClickDeleteRow.emit($event)\"\r\n (onClickEditRow)=\"onClickEditRow.emit($event)\" \r\n (onClickGoRow)=\"onClickGoRow.emit($event)\" \r\n (onSwitchChange)=\"_SetValueInput($event, 'coer-switch')\"\r\n (onTextboxChange)=\"_SetValueInput($event, 'coer-textbox')\"\r\n (onNumberboxChange)=\"_SetValueInput($event, 'coer-numberbox')\"\r\n (onSelectboxChange)=\"_SetValueInput($event, 'coer-selectbox')\"\r\n (onKeyupEnter)=\"onKeyupEnter.emit($event)\"\r\n (onKeyupEnterLast)=\"onKeyupEnterLast.emit($event)\"\r\n ></coer-grid-body>\r\n\r\n <!-- Loading / Empty -->\r\n @if(isLoading()) {\r\n <div class=\"loading\">\r\n <div class=\"loading-content\">\r\n <i class=\"icon-circle-notch animation-spin text-primary\"></i>\r\n <span class=\"fa-fade\">Loading</span>\r\n </div>\r\n </div> \r\n } \r\n\r\n @else if(_isEnabled() && _valueSignal().length <= 0) {\r\n <div class=\"empty-data\">\r\n <div class=\"empty-data-content\"> No Data </div>\r\n </div>\r\n } \r\n </div>\r\n </section> \r\n\r\n <!-- FOOTER -->\r\n <coer-grid-footer\r\n #coerGridFooter\r\n [GetIdCalculated]=\"_GetIdCalculated\"\r\n [footer]=\"footer\"\r\n [dataSource]=\"_valueSignal()\"\r\n [dataSourceFiltered]=\"_dataSourceFiltered()\"\r\n [dataSourceSelected]=\"dataSourceSelected()\" \r\n [isLoadingInner]=\"_isLoadingInner()\"\r\n ></coer-grid-footer>\r\n</div>", styles: ["div.coer-grid section.coer-grid-container{position:relative!important}div.coer-grid section.coer-grid-container div.loading,div.coer-grid section.coer-grid-container div.empty-data{position:absolute!important;inset:0!important;z-index:100!important;display:flex!important;align-items:center!important;justify-content:center!important}div.coer-grid section.coer-grid-container div.loading div.loading-content,div.coer-grid section.coer-grid-container div.loading div.empty-data-content,div.coer-grid section.coer-grid-container div.empty-data div.loading-content,div.coer-grid section.coer-grid-container div.empty-data div.empty-data-content{flex-flow:column!important;display:inherit!important;justify-content:inherit!important;align-items:inherit!important;font-size:35px!important;color:var(--gray)!important}div.coer-grid section.coer-grid-container div.loading div.loading-content::selection,div.coer-grid section.coer-grid-container div.loading div.empty-data-content::selection,div.coer-grid section.coer-grid-container div.empty-data div.loading-content::selection,div.coer-grid section.coer-grid-container div.empty-data div.empty-data-content::selection{background-color:transparent!important}\n"] }]
|
|
3279
3340
|
}] });
|
|
3280
3341
|
|
|
3281
3342
|
class CoerList {
|
|
@@ -3387,7 +3448,7 @@ class CoerList {
|
|
|
3387
3448
|
this.onDrop.emit(item);
|
|
3388
3449
|
}
|
|
3389
3450
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3390
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerList, isStandalone: false, selector: "coer-list", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, propDisplay: { classPropertyName: "propDisplay", publicName: "propDisplay", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, headerIcon: { classPropertyName: "headerIcon", publicName: "headerIcon", isSignal: true, isRequired: false, transformFunction: null }, showDeleteButtonByRow: { classPropertyName: "showDeleteButtonByRow", publicName: "showDeleteButtonByRow", isSignal: true, isRequired: false, transformFunction: null }, showGoButtonByRow: { classPropertyName: "showGoButtonByRow", publicName: "showGoButtonByRow", isSignal: true, isRequired: false, transformFunction: null }, showBackButton: { classPropertyName: "showBackButton", publicName: "showBackButton", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDraggable: { classPropertyName: "isDraggable", publicName: "isDraggable", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, MinWidth: { classPropertyName: "MinWidth", publicName: "MinWidth", isSignal: true, isRequired: false, transformFunction: null }, MaxWidth: { classPropertyName: "MaxWidth", publicName: "MaxWidth", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDrop: "onDrop", onSort: "onSort", onClick: "onClick", onDoubleClick: "onDoubleClick", onClickDelete: "onClickDelete", onClickGo: "onClickGo", onClickBack: "onClickBack" }, ngImport: i0, template: "<div [id]=\"_id\" class=\"coer-list\" [ngStyle]=\"{ \r\n 'margin-top': marginTop(), \r\n 'margin-right': marginRight(), \r\n 'margin-bottom': marginBottom(), \r\n 'margin-left': marginLeft(), \r\n }\">\r\n\r\n @if(isLoading()) {\r\n <!-- Grid Message -->\r\n <div class=\"loading\">\r\n <i class=\"spinner-border\"></i>\r\n <span class=\"fa-fade\">Loading</span>\r\n </div>\r\n }\r\n\r\n @else if(dataSource().length <= 0) {\r\n <div class=\"no-data\"> No Data </div>\r\n }\r\n\r\n <header [id]=\"_id + '-header'\" class=\"row\"> \r\n @if(header().length > 0 || headerIcon().length > 0) {\r\n <div class=\"col-auto me-auto\">\r\n <h6>\r\n @if(headerIcon().length > 0) {\r\n <i [class]=\"headerIcon()\"></i> \r\n }\r\n\r\n @if(header().length > 0) {\r\n <span>{{ header() }}</span> \r\n }\r\n </h6> \r\n </div>\r\n }\r\n\r\n @if(_showBackButton()) {\r\n <div class=\"col-auto ps-2 pe-0\"> \r\n <coer-button\r\n type=\"icon-outline\"\r\n color=\"secondary\"\r\n icon=\"back\"\r\n tooltip=\"Back\" \r\n (onClick)=\"onClickBack.emit()\"\r\n ></coer-button> \r\n </div>\r\n }\r\n \r\n <!-- Search -->\r\n @if(showSearch() && dataSource().length > 0) {\r\n <div class=\"col-auto pe-0\">\r\n <coer-textbox\r\n #inputSearch \r\n placeholder=\"Search\"\r\n [isDisabled]=\"isLoading()\"\r\n [selectOnFocus]=\"true\"\r\n width=\"250px\"\r\n marginTop=\"5px\"\r\n marginBottom=\"5px\"\r\n [showSearchIcon]=\"true\"\r\n [showClearIcon]=\"true\"\r\n ></coer-textbox>\r\n </div>\r\n }\r\n </header>\r\n\r\n <div [ngStyle]=\"{ \r\n 'width': width(), \r\n 'min-Width': MinWidth(), \r\n 'max-Width': MaxWidth(), \r\n }\">\r\n <ul cdkDropList (cdkDropListDropped)=\"_Drop($event)\" class='list-group coer-list'\r\n [ngStyle]=\"{ \r\n 'height': _height, \r\n 'min-height': minHeight(), \r\n 'max-height': maxHeight(), \r\n 'd-none': dataSource().length <= 0 \r\n }\">\r\n \r\n @for (item of _dataSource(); track _GetIndexRow(item)) {\r\n <li cdkDrag \r\n class=\"list-group-item coer-list-box\" \r\n cdkDragBoundary=\"ul.coer-list\"\r\n (click)=\"onClick.emit(item)\" \r\n (dblclick)=\"onDoubleClick.emit(item)\">\r\n \r\n <div *cdkDragPlaceholder class=\"coer-list-placeholder cursor-grabbing\"></div>\r\n <div class=\"coer-list-content\"> \r\n @if(_hasTemplate()) {\r\n <div [innerHTML]=\"_GetTemplate(item) | html\" class=\"template\"></div>\r\n }\r\n \r\n @else {\r\n <div> {{ _GetDisplay(item) }} </div> \r\n } \r\n \r\n <div>\r\n @if(_showDeleteButtonByRow(item)) {\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"secondary\"\r\n icon=\"delete\" \r\n (onClick)=\"onClickDelete.emit(item)\"\r\n ></coer-button>\r\n } \r\n \r\n @if(_showGoButtonByRow(item)) {\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"secondary\"\r\n icon=\"go\" \r\n marginLeft=\"5px\" \r\n (onClick)=\"onClickGo.emit(item)\"\r\n ></coer-button>\r\n } \r\n \r\n <i cdkDragHandle [ngClass]=\"{ \r\n 'fa-solid fa-grip-vertical text-secondary ps-2': true,\r\n 'cursor-grab': true, \r\n 'cursor-grabbing': false, \r\n 'd-none': !_isDraggable()\r\n }\"></i> \r\n </div> \r\n </div> \r\n </li> \r\n } \r\n </ul>\r\n </div>\r\n</div>", styles: ["div.coer-list header{align-items:center;justify-content:flex-end;padding-right:10px;margin:0}div.coer-list header h6{display:flex;align-items:center;gap:10px;min-height:40px;max-height:40px;margin-top:5px;margin-bottom:5px}div.coer-list header>div{display:flex;align-items:baseline;position:relative;z-index:1}div.coer-list ul.coer-list{width:100%;border:solid 1px #ccc;display:block;background:var(--white);border-radius:4px;overflow:auto}div.coer-list li.coer-list-box{padding:10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:var(--white);font-size:14px}div.coer-list li.coer-list-box div.coer-list-content{width:100%;display:flex;align-items:center;justify-content:space-between}div.coer-list .cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}div.coer-list .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list .coer-list-box:last-child{border:none}div.coer-list .coer-list.cdk-drop-list-dragging .coer-list-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list div.coer-list-placeholder{background:#ccc;border:dotted 3px #999;min-height:40px;transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list div.cdk-drag-placeholder,div.coer-list ul.cdk-drop-list-dragging,div.coer-list ul.cdk-drop-list-dragging *{cursor:grabbing}div.coer-list div.loading,div.coer-list div.no-data{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:25px;color:var(--gray);z-index:1}div.coer-list div.loading{background-color:#bbbbbb83!important;flex-direction:column!important;gap:10px!important}div.coer-list div.loading span.fa-fade{position:relative!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i2$5.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: i2$5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "isHidde", "width", "widthBreakpoint", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }, { 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: i5.HtmlPipe, name: "html" }] }); }
|
|
3451
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerList, isStandalone: false, selector: "coer-list", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, propDisplay: { classPropertyName: "propDisplay", publicName: "propDisplay", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, headerIcon: { classPropertyName: "headerIcon", publicName: "headerIcon", isSignal: true, isRequired: false, transformFunction: null }, showDeleteButtonByRow: { classPropertyName: "showDeleteButtonByRow", publicName: "showDeleteButtonByRow", isSignal: true, isRequired: false, transformFunction: null }, showGoButtonByRow: { classPropertyName: "showGoButtonByRow", publicName: "showGoButtonByRow", isSignal: true, isRequired: false, transformFunction: null }, showBackButton: { classPropertyName: "showBackButton", publicName: "showBackButton", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDraggable: { classPropertyName: "isDraggable", publicName: "isDraggable", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, MinWidth: { classPropertyName: "MinWidth", publicName: "MinWidth", isSignal: true, isRequired: false, transformFunction: null }, MaxWidth: { classPropertyName: "MaxWidth", publicName: "MaxWidth", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDrop: "onDrop", onSort: "onSort", onClick: "onClick", onDoubleClick: "onDoubleClick", onClickDelete: "onClickDelete", onClickGo: "onClickGo", onClickBack: "onClickBack" }, ngImport: i0, template: "<div [id]=\"_id\" class=\"coer-list\" [ngStyle]=\"{ \r\n 'margin-top': marginTop(), \r\n 'margin-right': marginRight(), \r\n 'margin-bottom': marginBottom(), \r\n 'margin-left': marginLeft(), \r\n }\">\r\n\r\n @if(isLoading()) {\r\n <!-- Grid Message -->\r\n <div class=\"loading\">\r\n <i class=\"spinner-border\"></i>\r\n <span class=\"fa-fade\">Loading</span>\r\n </div>\r\n }\r\n\r\n @else if(dataSource().length <= 0) {\r\n <div class=\"no-data\"> No Data </div>\r\n }\r\n\r\n <header [id]=\"_id + '-header'\" class=\"row\"> \r\n @if(header().length > 0 || headerIcon().length > 0) {\r\n <div class=\"col-auto me-auto\">\r\n <h6>\r\n @if(headerIcon().length > 0) {\r\n <i [class]=\"headerIcon()\"></i> \r\n }\r\n\r\n @if(header().length > 0) {\r\n <span>{{ header() }}</span> \r\n }\r\n </h6> \r\n </div>\r\n }\r\n\r\n @if(_showBackButton()) {\r\n <div class=\"col-auto ps-2 pe-0\"> \r\n <coer-button\r\n type=\"icon-outline\"\r\n color=\"secondary\"\r\n icon=\"back\"\r\n tooltip=\"Back\" \r\n (onClick)=\"onClickBack.emit()\"\r\n ></coer-button> \r\n </div>\r\n }\r\n \r\n <!-- Search -->\r\n @if(showSearch() && dataSource().length > 0) {\r\n <div class=\"col-auto pe-0\">\r\n <coer-textbox\r\n #inputSearch \r\n placeholder=\"Search\"\r\n [isDisabled]=\"isLoading()\"\r\n [selectOnFocus]=\"true\"\r\n width=\"250px\"\r\n marginTop=\"5px\"\r\n marginBottom=\"5px\"\r\n [showSearchIcon]=\"true\"\r\n [showClearIcon]=\"true\"\r\n ></coer-textbox>\r\n </div>\r\n }\r\n </header>\r\n\r\n <div [ngStyle]=\"{ \r\n 'width': width(), \r\n 'min-Width': MinWidth(), \r\n 'max-Width': MaxWidth(), \r\n }\">\r\n <ul cdkDropList (cdkDropListDropped)=\"_Drop($event)\" class='list-group coer-list'\r\n [ngStyle]=\"{ \r\n 'height': _height, \r\n 'min-height': minHeight(), \r\n 'max-height': maxHeight(), \r\n 'd-none': dataSource().length <= 0 \r\n }\">\r\n \r\n @for (item of _dataSource(); track _GetIndexRow(item)) {\r\n <li cdkDrag \r\n class=\"list-group-item coer-list-box\" \r\n cdkDragBoundary=\"ul.coer-list\"\r\n (click)=\"onClick.emit(item)\" \r\n (dblclick)=\"onDoubleClick.emit(item)\">\r\n \r\n <div *cdkDragPlaceholder class=\"coer-list-placeholder cursor-grabbing\"></div>\r\n <div class=\"coer-list-content\"> \r\n @if(_hasTemplate()) {\r\n <div [innerHTML]=\"_GetTemplate(item) | html\" class=\"template\"></div>\r\n }\r\n \r\n @else {\r\n <div> {{ _GetDisplay(item) }} </div> \r\n } \r\n \r\n <div>\r\n @if(_showDeleteButtonByRow(item)) {\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"secondary\"\r\n icon=\"delete\" \r\n (onClick)=\"onClickDelete.emit(item)\"\r\n ></coer-button>\r\n } \r\n \r\n @if(_showGoButtonByRow(item)) {\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"secondary\"\r\n icon=\"go\" \r\n marginLeft=\"5px\" \r\n (onClick)=\"onClickGo.emit(item)\"\r\n ></coer-button>\r\n } \r\n \r\n <i cdkDragHandle [ngClass]=\"{ \r\n 'fa-solid fa-grip-vertical text-secondary ps-2': true,\r\n 'cursor-grab': true, \r\n 'cursor-grabbing': false, \r\n 'd-none': !_isDraggable()\r\n }\"></i> \r\n </div> \r\n </div> \r\n </li> \r\n } \r\n </ul>\r\n </div>\r\n</div>", styles: ["div.coer-list header{align-items:center;justify-content:flex-end;padding-right:10px;margin:0}div.coer-list header h6{display:flex;align-items:center;gap:10px;min-height:40px;max-height:40px;margin-top:5px;margin-bottom:5px}div.coer-list header>div{display:flex;align-items:baseline;position:relative;z-index:1}div.coer-list ul.coer-list{width:100%;border:solid 1px #ccc;display:block;background:var(--white);border-radius:4px;overflow:auto}div.coer-list li.coer-list-box{padding:10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:var(--white);font-size:14px}div.coer-list li.coer-list-box div.coer-list-content{width:100%;display:flex;align-items:center;justify-content:space-between}div.coer-list .cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}div.coer-list .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list .coer-list-box:last-child{border:none}div.coer-list .coer-list.cdk-drop-list-dragging .coer-list-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list div.coer-list-placeholder{background:#ccc;border:dotted 3px #999;min-height:40px;transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list div.cdk-drag-placeholder,div.coer-list ul.cdk-drop-list-dragging,div.coer-list ul.cdk-drop-list-dragging *{cursor:grabbing}div.coer-list div.loading,div.coer-list div.no-data{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:25px;color:var(--gray);z-index:1}div.coer-list div.loading{background-color:#bbbbbb83!important;flex-direction:column!important;gap:10px!important}div.coer-list div.loading span.fa-fade{position:relative!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$6.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$6.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i2$6.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: i2$6.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "isHidde", "width", "widthBreakpoint", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }, { 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: i5.HtmlPipe, name: "html" }] }); }
|
|
3391
3452
|
}
|
|
3392
3453
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerList, decorators: [{
|
|
3393
3454
|
type: Component,
|
|
@@ -3461,7 +3522,7 @@ class CoerMenuOption {
|
|
|
3461
3522
|
});
|
|
3462
3523
|
}
|
|
3463
3524
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerMenuOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3464
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.1", type: CoerMenuOption, isStandalone: false, selector: "coer-menu-option", inputs: { level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null }, tree: { classPropertyName: "tree", publicName: "tree", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClickMenuOption: "onClickMenuOption" }, ngImport: i0, template: "<mat-nav-list class=\"coer-menu-option\" (click)=\"_ClickMenuOption('', true)\">\r\n <mat-list-item>\r\n <span [class]=\"'icon-container ' + _identityClass()\" [ngStyle]=\"{ 'margin-left': _marginLeft() }\">\r\n <i [class]=\"_icon()\"></i>\r\n </span>\r\n\r\n <span [class]=\"'label-container ' + _identityClass()\">\r\n {{ label() }}\r\n </span>\r\n </mat-list-item>\r\n</mat-nav-list>", styles: ["mat-nav-list.coer-menu-option{padding:0!important;height:48px!important}mat-nav-list.coer-menu-option div,mat-nav-list.coer-menu-option span{font-size:16px!important;font-family:sans-serif!important;font-weight:700}mat-nav-list.coer-menu-option mat-list-item{padding:0 35px 0 10px!important;display:inline-flex!important;height:48px!important;color:var(--sidenav-text-inner)}mat-nav-list.coer-menu-option mat-list-item span.mat-mdc-list-item-unscoped-content{display:flex!important;align-items:center!important}mat-nav-list.coer-menu-option mat-list-item span.mat-mdc-list-item-unscoped-content span.icon-container{display:inline-flex!important;align-items:center!important;justify-content:center!important;height:48px!important;min-width:20px!important;max-width:20px!important;color:var(--sidenav-text-inner)}mat-nav-list.coer-menu-option mat-list-item span.mat-mdc-list-item-unscoped-content span.icon-container i{min-height:16px!important;position:absolute!important}mat-nav-list.coer-menu-option mat-list-item span.label-container{justify-content:flex-start!important;display:inline-flex!important;height:auto!important;margin-left:10px!important;color:var(--sidenav-text-inner)}mat-nav-list.coer-menu-option mat-list-item span.icon-container.active-link,mat-nav-list.coer-menu-option mat-list-item span.label-container.active-link{color:var(--sidenav-active-inner)!important}mat-nav-list.coer-menu-option mat-list-item:hover,mat-nav-list.coer-menu-option mat-list-item.mdc-list-item:hover:before{background-color:color-mix(in srgb,var(--sidenav-inner),white 5%)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$
|
|
3525
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.1", type: CoerMenuOption, isStandalone: false, selector: "coer-menu-option", inputs: { level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null }, tree: { classPropertyName: "tree", publicName: "tree", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClickMenuOption: "onClickMenuOption" }, ngImport: i0, template: "<mat-nav-list class=\"coer-menu-option\" (click)=\"_ClickMenuOption('', true)\">\r\n <mat-list-item>\r\n <span [class]=\"'icon-container ' + _identityClass()\" [ngStyle]=\"{ 'margin-left': _marginLeft() }\">\r\n <i [class]=\"_icon()\"></i>\r\n </span>\r\n\r\n <span [class]=\"'label-container ' + _identityClass()\">\r\n {{ label() }}\r\n </span>\r\n </mat-list-item>\r\n</mat-nav-list>", styles: ["mat-nav-list.coer-menu-option{padding:0!important;height:48px!important}mat-nav-list.coer-menu-option div,mat-nav-list.coer-menu-option span{font-size:16px!important;font-family:sans-serif!important;font-weight:700}mat-nav-list.coer-menu-option mat-list-item{padding:0 35px 0 10px!important;display:inline-flex!important;height:48px!important;color:var(--sidenav-text-inner)}mat-nav-list.coer-menu-option mat-list-item span.mat-mdc-list-item-unscoped-content{display:flex!important;align-items:center!important}mat-nav-list.coer-menu-option mat-list-item span.mat-mdc-list-item-unscoped-content span.icon-container{display:inline-flex!important;align-items:center!important;justify-content:center!important;height:48px!important;min-width:20px!important;max-width:20px!important;color:var(--sidenav-text-inner)}mat-nav-list.coer-menu-option mat-list-item span.mat-mdc-list-item-unscoped-content span.icon-container i{min-height:16px!important;position:absolute!important}mat-nav-list.coer-menu-option mat-list-item span.label-container{justify-content:flex-start!important;display:inline-flex!important;height:auto!important;margin-left:10px!important;color:var(--sidenav-text-inner)}mat-nav-list.coer-menu-option mat-list-item span.icon-container.active-link,mat-nav-list.coer-menu-option mat-list-item span.label-container.active-link{color:var(--sidenav-active-inner)!important}mat-nav-list.coer-menu-option mat-list-item:hover,mat-nav-list.coer-menu-option mat-list-item.mdc-list-item:hover:before{background-color:color-mix(in srgb,var(--sidenav-inner),white 5%)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$7.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i2$7.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }] }); }
|
|
3465
3526
|
}
|
|
3466
3527
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerMenuOption, decorators: [{
|
|
3467
3528
|
type: Component,
|
|
@@ -3544,7 +3605,11 @@ class CoerSecretBox extends ControlValue {
|
|
|
3544
3605
|
}
|
|
3545
3606
|
});
|
|
3546
3607
|
this._effectValue = effect(() => {
|
|
3547
|
-
|
|
3608
|
+
Tools.Sleep().then(() => {
|
|
3609
|
+
if (Tools.IsNull(this._UpdateValue)) {
|
|
3610
|
+
this.SetValue(Tools.IsNotNull(this.value()) ? this.value() : '');
|
|
3611
|
+
}
|
|
3612
|
+
});
|
|
3548
3613
|
});
|
|
3549
3614
|
this._effectExternalButton = effect(() => {
|
|
3550
3615
|
this._externalButton.set(this.externalButton());
|
|
@@ -3662,7 +3727,7 @@ class CoerSecretBox extends ControlValue {
|
|
|
3662
3727
|
this._passwordType.update(value => !value);
|
|
3663
3728
|
}
|
|
3664
3729
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSecretBox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3665
|
-
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 }, externalButton: { classPropertyName: "externalButton", publicName: "externalButton", 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-form-field-component\">\r\n <div class=\"coer-form-field-content\" [ngStyle]=\"{ \r\n width : width(), \r\n minWidth : minWidth(), \r\n maxWidth : maxWidth(),\r\n marginTop : marginTop(),\r\n marginRight : marginRight(),\r\n marginBottom: marginBottom(),\r\n marginLeft : marginLeft() \r\n }\">\r\n @if(_showexternalButtonLeft) {\r\n <div class=\"external-button-container-left\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_externalButtonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n }\r\n \r\n <mat-form-field\r\n [id]=\"_id + '-container'\"\r\n [floatLabel]=\"_floatLabel()\"\r\n [ngClass]=\"{\r\n 'width-100' : true,\r\n 'readonly' : isReadonly() && !isLoading(),\r\n 'display-none': isInvisible() || isLoading()\r\n }\"\r\n [style]=\"{ \r\n 'margin-top' : marginTop(),\r\n 'margin-right' : marginRight(),\r\n 'margin-bottom': marginBottom(),\r\n 'margin-left' : marginLeft(),\r\n 'border-top-left-radius' : (_showexternalButtonLeft ? '0px': '4px'),\r\n 'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n }\">\r\n <mat-label>{{ label() }}</mat-label>\r\n \r\n <input #coerTextBox matInput\r\n [id]=\"_id\"\r\n [type]=\"_inputType()\"\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 'margin-top' : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n 'padding-right': _paddingRight(),\r\n 'text-align' : textPosition()\r\n }\">\r\n \r\n <span class=\"icon-container\"> \r\n @if(isInvalid() && _isEnable()) {\r\n <span [ngStyle]=\"{ 'margin-right': (showSecret() ? '50px' : '0px') }\">\r\n <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n </span>\r\n }\r\n \r\n @else if(isValid() && _isEnable()) {\r\n <span [ngStyle]=\"{ 'margin-right': (showSecret() ? '50px' : '0px') }\">\r\n <i class=\"icon-circle-check icon-fill\"></i> \r\n </span>\r\n }\r\n \r\n @if(_showSecret()) {\r\n <i [ngClass]=\"{\r\n 'cursor-pointer icon-fill': true, \r\n 'icon-eye-slash': _passwordType(),\r\n 'icon-eye': !_passwordType()\r\n }\" \r\n (click)=\"_Toogle()\"></i> \r\n }\r\n </span>\r\n </mat-form-field> \r\n \r\n <!-- Loading || Invisible -->\r\n @if(isLoading() || isInvisible()) {\r\n <div [ngClass]=\"{ \r\n 'loading' : isLoading(),\r\n 'invisible' : 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 'border-top-left-radius' : (_showexternalButtonLeft ? '0px': '4px'),\r\n 'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n }\"\r\n > {{ isInvisible() ? '' : _asterisks }} </div>\r\n }\r\n \r\n @if(_showexternalButtonRight) {\r\n <div class=\"external-button-container-right\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_externalButtonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n } \r\n </div>\r\n</div> ", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$
|
|
3730
|
+
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 }, externalButton: { classPropertyName: "externalButton", publicName: "externalButton", 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-form-field-component\">\r\n <div class=\"coer-form-field-content\" [ngStyle]=\"{ \r\n width : width(), \r\n minWidth : minWidth(), \r\n maxWidth : maxWidth(),\r\n marginTop : marginTop(),\r\n marginRight : marginRight(),\r\n marginBottom: marginBottom(),\r\n marginLeft : marginLeft() \r\n }\">\r\n @if(_showexternalButtonLeft) {\r\n <div class=\"external-button-container-left\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_externalButtonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n }\r\n \r\n <mat-form-field\r\n [id]=\"_id + '-container'\"\r\n [floatLabel]=\"_floatLabel()\"\r\n [ngClass]=\"{\r\n 'width-100' : true,\r\n 'readonly' : isReadonly() && !isLoading(),\r\n 'display-none': isInvisible() || isLoading()\r\n }\"\r\n [style]=\"{ \r\n 'margin-top' : marginTop(),\r\n 'margin-right' : marginRight(),\r\n 'margin-bottom': marginBottom(),\r\n 'margin-left' : marginLeft(),\r\n 'border-top-left-radius' : (_showexternalButtonLeft ? '0px': '4px'),\r\n 'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n }\">\r\n <mat-label>{{ label() }}</mat-label>\r\n \r\n <input #coerTextBox matInput\r\n [id]=\"_id\"\r\n [type]=\"_inputType()\"\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 'margin-top' : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n 'padding-right': _paddingRight(),\r\n 'text-align' : textPosition()\r\n }\">\r\n \r\n <span class=\"icon-container\"> \r\n @if(isInvalid() && _isEnable()) {\r\n <span [ngStyle]=\"{ 'margin-right': (showSecret() ? '50px' : '0px') }\">\r\n <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n </span>\r\n }\r\n \r\n @else if(isValid() && _isEnable()) {\r\n <span [ngStyle]=\"{ 'margin-right': (showSecret() ? '50px' : '0px') }\">\r\n <i class=\"icon-circle-check icon-fill\"></i> \r\n </span>\r\n }\r\n \r\n @if(_showSecret()) {\r\n <i [ngClass]=\"{\r\n 'cursor-pointer icon-fill': true, \r\n 'icon-eye-slash': _passwordType(),\r\n 'icon-eye': !_passwordType()\r\n }\" \r\n (click)=\"_Toogle()\"></i> \r\n }\r\n </span>\r\n </mat-form-field> \r\n \r\n <!-- Loading || Invisible -->\r\n @if(isLoading() || isInvisible()) {\r\n <div [ngClass]=\"{ \r\n 'loading' : isLoading(),\r\n 'invisible' : 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 'border-top-left-radius' : (_showexternalButtonLeft ? '0px': '4px'),\r\n 'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n }\"\r\n > {{ isInvisible() ? '' : _asterisks }} </div>\r\n }\r\n \r\n @if(_showexternalButtonRight) {\r\n <div class=\"external-button-container-right\">\r\n <coer-button\r\n type=\"icon-no-border\"\r\n color=\"dark\"\r\n [icon]=\"_externalButtonIcon\" \r\n [isDisabled]=\"_isDisabledExternalButton\" \r\n (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n ></coer-button>\r\n </div>\r\n } \r\n </div>\r\n</div> ", 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$3.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"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "isHidde", "width", "widthBreakpoint", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }] }); }
|
|
3666
3731
|
}
|
|
3667
3732
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSecretBox, decorators: [{
|
|
3668
3733
|
type: Component,
|
|
@@ -4067,7 +4132,7 @@ class CoerSidenav {
|
|
|
4067
4132
|
});
|
|
4068
4133
|
}
|
|
4069
4134
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSidenav, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4070
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerSidenav, isStandalone: false, selector: "coer-sidenav", outputs: { onMenuSelected: "onMenuSelected" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["matSidenav"], descendants: true, isSignal: true }, { propertyName: "menuList", predicate: CoerTreeAccordion, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-drawer-container [hasBackdrop]=\"_backdrop()\">\r\n <mat-drawer \r\n #matSidenav\r\n [opened]=\"_isOpen()\"\r\n (opened)=\"_Open()\"\r\n (closed)=\"_Close()\"\r\n [mode]=\"_mode()\"\r\n [ngStyle]=\"{ 'z-index': _isModalOpen() ? '1' : '3' }\">\r\n\r\n @if(!_isLoading()) {\r\n @if(_navigation().length > 0) { \r\n @for(item of _navigation(); track item.id) {\r\n \r\n <!-- Menu --> \r\n @if(_IsMenu(item)) {\r\n @if(_IsGrid(item)) {\r\n <coer-menu-option\r\n [label]=\"item.label\"\r\n [icon]=\"_GetIcon(item)\"\r\n path=\"menu\"\r\n (onClickMenuOption)=\"_ShowGridMenu($event, item)\"\r\n ></coer-menu-option>\r\n }\r\n \r\n @else {\r\n <coer-tree-accordion\r\n [item]=\"item\"\r\n (showGridMenu)=\"_NavigateTo($event)\"\r\n (onClickMenuOption)=\"_NavigateTo($event)\"\r\n (clickMenu)=\"_MenuSelected($event)\"\r\n ></coer-tree-accordion>\r\n }\r\n }\r\n \r\n <!-- Option Menu -->\r\n @else {\r\n <coer-menu-option\r\n [label]=\"item.label\"\r\n [icon]=\"item?.icon\"\r\n [path]=\"item?.path\"\r\n (onClickMenuOption)=\"_NavigateTo($event)\"\r\n ></coer-menu-option>\r\n }\r\n \r\n \r\n <div class=\"separator\"></div> \r\n }\r\n }\r\n\r\n @else {\r\n <coer-menu-option label=\"Empty\"></coer-menu-option>\r\n }\r\n }\r\n\r\n @else {\r\n <coer-menu-option\r\n label=\"LOADING\"\r\n icon=\"icon-arrows-sync animation-spin\"\r\n ></coer-menu-option>\r\n }\r\n\r\n <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n </mat-drawer>\r\n\r\n <!-- Main Screen -->\r\n <mat-drawer-content [ngClass]=\"{ 'margin-left-40px': (!_isOpen() && _showAsideMenu()) }\">\r\n <aside [ngClass]=\"{ 'side-nav scrollbar-invisible': true, 'display-none': !_showAsideMenu() }\" (click)=\"Open($event)\">\r\n @if(_isLoading()) {\r\n <span class=\"icon-container\">\r\n <i class=\"icon-arrows-sync animation-spin\"></i>\r\n </span>\r\n }\r\n\r\n @else {\r\n @for (item of _navigation(); track item.id) {\r\n <div (click)=\"Open($event, item)\">\r\n <span [class]=\"'icon-container ' + _SetIdentityClass(item.label)\">\r\n <i [class]=\"_GetIcon(item)\"></i>\r\n </span>\r\n </div>\r\n } \r\n }\r\n\r\n <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n </aside> \r\n <ng-content></ng-content>\r\n </mat-drawer-content>\r\n</mat-drawer-container>", styles: ["mat-drawer-container{height:calc(100vh - 45px)!important}mat-drawer-container .margin-left-40px{margin-left:40px!important}mat-drawer-container mat-drawer{width:auto;min-width:200px;background-color:var(--sidenav-inner)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar{width:1px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb{background-color:var(--secondary-inner)!important;border-radius:5px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:hover{background-color:var(--secondary-inner)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:active{background-color:var(--background-inner)!important}mat-drawer-container mat-drawer i{font-size:16px!important}mat-drawer-container mat-drawer div.separator{border:.5px solid rgba(245,245,245,.041)!important}mat-drawer-container mat-drawer-content{margin-right:0!important;background-color:var(--background-inner)!important}mat-drawer-container mat-drawer-content aside.side-nav{background-color:var(--sidenav-inner)!important;width:40px!important;position:fixed!important;left:0!important;top:45px!important;bottom:0!important;overflow-y:auto!important;cursor:pointer!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container{width:100%!important;height:49.6px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:16px!important;border-bottom:1px solid rgba(245,245,245,.041)!important;color:var(--sidenav-text-inner)}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container:hover{background-color:color-mix(in srgb,var(--sidenav-inner),white 5%)!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container.active-link{color:var(--sidenav-active-inner)!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$
|
|
4135
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerSidenav, isStandalone: false, selector: "coer-sidenav", outputs: { onMenuSelected: "onMenuSelected" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["matSidenav"], descendants: true, isSignal: true }, { propertyName: "menuList", predicate: CoerTreeAccordion, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-drawer-container [hasBackdrop]=\"_backdrop()\">\r\n <mat-drawer \r\n #matSidenav\r\n [opened]=\"_isOpen()\"\r\n (opened)=\"_Open()\"\r\n (closed)=\"_Close()\"\r\n [mode]=\"_mode()\"\r\n [ngStyle]=\"{ 'z-index': _isModalOpen() ? '1' : '3' }\">\r\n\r\n @if(!_isLoading()) {\r\n @if(_navigation().length > 0) { \r\n @for(item of _navigation(); track item.id) {\r\n \r\n <!-- Menu --> \r\n @if(_IsMenu(item)) {\r\n @if(_IsGrid(item)) {\r\n <coer-menu-option\r\n [label]=\"item.label\"\r\n [icon]=\"_GetIcon(item)\"\r\n path=\"menu\"\r\n (onClickMenuOption)=\"_ShowGridMenu($event, item)\"\r\n ></coer-menu-option>\r\n }\r\n \r\n @else {\r\n <coer-tree-accordion\r\n [item]=\"item\"\r\n (showGridMenu)=\"_NavigateTo($event)\"\r\n (onClickMenuOption)=\"_NavigateTo($event)\"\r\n (clickMenu)=\"_MenuSelected($event)\"\r\n ></coer-tree-accordion>\r\n }\r\n }\r\n \r\n <!-- Option Menu -->\r\n @else {\r\n <coer-menu-option\r\n [label]=\"item.label\"\r\n [icon]=\"item?.icon\"\r\n [path]=\"item?.path\"\r\n (onClickMenuOption)=\"_NavigateTo($event)\"\r\n ></coer-menu-option>\r\n }\r\n \r\n \r\n <div class=\"separator\"></div> \r\n }\r\n }\r\n\r\n @else {\r\n <coer-menu-option label=\"Empty\"></coer-menu-option>\r\n }\r\n }\r\n\r\n @else {\r\n <coer-menu-option\r\n label=\"LOADING\"\r\n icon=\"icon-arrows-sync animation-spin\"\r\n ></coer-menu-option>\r\n }\r\n\r\n <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n </mat-drawer>\r\n\r\n <!-- Main Screen -->\r\n <mat-drawer-content [ngClass]=\"{ 'margin-left-40px': (!_isOpen() && _showAsideMenu()) }\">\r\n <aside [ngClass]=\"{ 'side-nav scrollbar-invisible': true, 'display-none': !_showAsideMenu() }\" (click)=\"Open($event)\">\r\n @if(_isLoading()) {\r\n <span class=\"icon-container\">\r\n <i class=\"icon-arrows-sync animation-spin\"></i>\r\n </span>\r\n }\r\n\r\n @else {\r\n @for (item of _navigation(); track item.id) {\r\n <div (click)=\"Open($event, item)\">\r\n <span [class]=\"'icon-container ' + _SetIdentityClass(item.label)\">\r\n <i [class]=\"_GetIcon(item)\"></i>\r\n </span>\r\n </div>\r\n } \r\n }\r\n\r\n <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n </aside> \r\n <ng-content></ng-content>\r\n </mat-drawer-content>\r\n</mat-drawer-container>", styles: ["mat-drawer-container{height:calc(100vh - 45px)!important}mat-drawer-container .margin-left-40px{margin-left:40px!important}mat-drawer-container mat-drawer{width:auto;min-width:200px;background-color:var(--sidenav-inner)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar{width:1px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb{background-color:var(--secondary-inner)!important;border-radius:5px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:hover{background-color:var(--secondary-inner)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:active{background-color:var(--background-inner)!important}mat-drawer-container mat-drawer i{font-size:16px!important}mat-drawer-container mat-drawer div.separator{border:.5px solid rgba(245,245,245,.041)!important}mat-drawer-container mat-drawer-content{margin-right:0!important;background-color:var(--background-inner)!important}mat-drawer-container mat-drawer-content aside.side-nav{background-color:var(--sidenav-inner)!important;width:40px!important;position:fixed!important;left:0!important;top:45px!important;bottom:0!important;overflow-y:auto!important;cursor:pointer!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container{width:100%!important;height:49.6px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:16px!important;border-bottom:1px solid rgba(245,245,245,.041)!important;color:var(--sidenav-text-inner)}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container:hover{background-color:color-mix(in srgb,var(--sidenav-inner),white 5%)!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container.active-link{color:var(--sidenav-active-inner)!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$8.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i2$8.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: i2$8.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: CoerMenuOption, selector: "coer-menu-option", inputs: ["level", "label", "icon", "path", "tree"], outputs: ["onClickMenuOption"] }, { kind: "component", type: CoerTreeAccordion, selector: "coer-tree-accordion", inputs: ["level", "item", "tree", "showTree"], outputs: ["showGridMenu", "onClickMenuOption", "clickMenu"] }] }); }
|
|
4071
4136
|
}
|
|
4072
4137
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSidenav, decorators: [{
|
|
4073
4138
|
type: Component,
|
|
@@ -4150,8 +4215,12 @@ class CoerDropdown extends ControlValue {
|
|
|
4150
4215
|
}
|
|
4151
4216
|
return null;
|
|
4152
4217
|
};
|
|
4153
|
-
this.
|
|
4154
|
-
|
|
4218
|
+
this._effectValue = effect(() => {
|
|
4219
|
+
Tools.Sleep().then(() => {
|
|
4220
|
+
if (Tools.IsNull(this._UpdateValue)) {
|
|
4221
|
+
this.SetValue(Tools.IsNotNull(this.value()) ? this.value() : null);
|
|
4222
|
+
}
|
|
4223
|
+
});
|
|
4155
4224
|
});
|
|
4156
4225
|
}
|
|
4157
4226
|
//AfterViewInit
|
|
@@ -4175,7 +4244,7 @@ class CoerDropdown extends ControlValue {
|
|
|
4175
4244
|
}
|
|
4176
4245
|
//OnDestroy
|
|
4177
4246
|
ngOnDestroy() {
|
|
4178
|
-
this.
|
|
4247
|
+
this._effectValue?.destroy();
|
|
4179
4248
|
}
|
|
4180
4249
|
//getter
|
|
4181
4250
|
get _label() {
|
|
@@ -4410,8 +4479,12 @@ class CoerTextarea extends ControlValue {
|
|
|
4410
4479
|
return this.isInvalid() || this.isValid()
|
|
4411
4480
|
? '18px' : '0px';
|
|
4412
4481
|
});
|
|
4413
|
-
this.
|
|
4414
|
-
|
|
4482
|
+
this._effectValue = effect(() => {
|
|
4483
|
+
Tools.Sleep().then(() => {
|
|
4484
|
+
if (Tools.IsNull(this._UpdateValue)) {
|
|
4485
|
+
this.SetValue(Tools.IsNotNull(this.value()) ? this.value() : '');
|
|
4486
|
+
}
|
|
4487
|
+
});
|
|
4415
4488
|
});
|
|
4416
4489
|
}
|
|
4417
4490
|
//AfterViewInit
|
|
@@ -4441,7 +4514,7 @@ class CoerTextarea extends ControlValue {
|
|
|
4441
4514
|
}
|
|
4442
4515
|
//OnDestroy
|
|
4443
4516
|
ngOnDestroy() {
|
|
4444
|
-
this.
|
|
4517
|
+
this._effectValue?.destroy();
|
|
4445
4518
|
}
|
|
4446
4519
|
//getter
|
|
4447
4520
|
get footer() {
|
|
@@ -4486,7 +4559,7 @@ class CoerTextarea extends ControlValue {
|
|
|
4486
4559
|
this.Focus(false, delay);
|
|
4487
4560
|
}
|
|
4488
4561
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerTextarea, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4489
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerTextarea, isStandalone: false, selector: "coer-textarea", 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 }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", 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 }, height: { classPropertyName: "height", publicName: "height", 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: { onInput: "onInput" }, providers: [CONTROL_VALUE(CoerTextarea)], viewQueries: [{ propertyName: "_coerTextBox", first: true, predicate: ["coerTextArea"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-form-field-component coer-textarea\">\r\n <div class=\"coer-form-field-content\" [ngStyle]=\"{ \r\n width : width(), \r\n minWidth : minWidth(), \r\n maxWidth : maxWidth(),\r\n marginTop : marginTop(),\r\n marginRight : marginRight(),\r\n marginBottom: marginBottom(),\r\n marginLeft : marginLeft() \r\n }\">\r\n <mat-form-field\r\n [id]=\"_id + '-container'\"\r\n [floatLabel]=\"_floatLabel()\"\r\n [ngClass]=\"{\r\n 'width-100' : true,\r\n 'readonly' : isReadonly() && !isLoading(),\r\n 'display-none': isInvisible() || isLoading()\r\n }\">\r\n \r\n <mat-label>{{ label() }}</mat-label>\r\n \r\n <textarea #coerTextArea matInput\r\n [id]=\"_id\"\r\n type=\"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(coerTextArea.value)\"\r\n (blur)=\"SetTouched(true)\"\r\n [style]=\"{\r\n 'min-height' : '80px', \r\n 'margin-top' : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n 'padding-right': _paddingRight(),\r\n 'text-align' : textPosition(),\r\n 'resize' : (!resize() || !_isEnable()) ? 'none' : '',\r\n 'height' : height()\r\n }\"></textarea> \r\n \r\n <span ngClass=\"icon-container\">\r\n @if(isInvalid() && _isEnable()) {\r\n <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n }\r\n \r\n @else if(isValid() && _isEnable()) {\r\n <i class=\"icon-circle-check icon-fill\"></i>\r\n }\r\n </span>\r\n </mat-form-field>\r\n \r\n <!-- Loading || Invisible -->\r\n @if(isLoading() || isInvisible()) {\r\n <div [ngClass]=\"{ \r\n 'loading' : isLoading(),\r\n 'invisible' : isInvisible() \r\n }\" \r\n [style]=\"{ \r\n 'min-height' : '89px',\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 > {{ isInvisible() ? '' : _value }} </div>\r\n }\r\n </div>\r\n\r\n @if(showFooter()) {\r\n <footer> {{ footer }} </footer>\r\n } \r\n</div>", styles: ["div.coer-textarea div.coer-form-field-content mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:auto!important;min-height:80px!important}div.coer-textarea div.coer-form-field-content 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:auto!important;min-height:80px!important}div.coer-textarea div.coer-form-field-content mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix textarea{min-height:80px!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$
|
|
4562
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerTextarea, isStandalone: false, selector: "coer-textarea", 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 }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", 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 }, height: { classPropertyName: "height", publicName: "height", 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: { onInput: "onInput" }, providers: [CONTROL_VALUE(CoerTextarea)], viewQueries: [{ propertyName: "_coerTextBox", first: true, predicate: ["coerTextArea"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-form-field-component coer-textarea\">\r\n <div class=\"coer-form-field-content\" [ngStyle]=\"{ \r\n width : width(), \r\n minWidth : minWidth(), \r\n maxWidth : maxWidth(),\r\n marginTop : marginTop(),\r\n marginRight : marginRight(),\r\n marginBottom: marginBottom(),\r\n marginLeft : marginLeft() \r\n }\">\r\n <mat-form-field\r\n [id]=\"_id + '-container'\"\r\n [floatLabel]=\"_floatLabel()\"\r\n [ngClass]=\"{\r\n 'width-100' : true,\r\n 'readonly' : isReadonly() && !isLoading(),\r\n 'display-none': isInvisible() || isLoading()\r\n }\">\r\n \r\n <mat-label>{{ label() }}</mat-label>\r\n \r\n <textarea #coerTextArea matInput\r\n [id]=\"_id\"\r\n type=\"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(coerTextArea.value)\"\r\n (blur)=\"SetTouched(true)\"\r\n [style]=\"{\r\n 'min-height' : '80px', \r\n 'margin-top' : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n 'padding-right': _paddingRight(),\r\n 'text-align' : textPosition(),\r\n 'resize' : (!resize() || !_isEnable()) ? 'none' : '',\r\n 'height' : height()\r\n }\"></textarea> \r\n \r\n <span ngClass=\"icon-container\">\r\n @if(isInvalid() && _isEnable()) {\r\n <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n }\r\n \r\n @else if(isValid() && _isEnable()) {\r\n <i class=\"icon-circle-check icon-fill\"></i>\r\n }\r\n </span>\r\n </mat-form-field>\r\n \r\n <!-- Loading || Invisible -->\r\n @if(isLoading() || isInvisible()) {\r\n <div [ngClass]=\"{ \r\n 'loading' : isLoading(),\r\n 'invisible' : isInvisible() \r\n }\" \r\n [style]=\"{ \r\n 'min-height' : '89px',\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 > {{ isInvisible() ? '' : _value }} </div>\r\n }\r\n </div>\r\n\r\n @if(showFooter()) {\r\n <footer> {{ footer }} </footer>\r\n } \r\n</div>", styles: ["div.coer-textarea div.coer-form-field-content mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:auto!important;min-height:80px!important}div.coer-textarea div.coer-form-field-content 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:auto!important;min-height:80px!important}div.coer-textarea div.coer-form-field-content mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix textarea{min-height:80px!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$3.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"] }] }); }
|
|
4490
4563
|
}
|
|
4491
4564
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerTextarea, decorators: [{
|
|
4492
4565
|
type: Component,
|