coer-elements 2.0.75 → 2.0.78
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-datebox/coer-datebox.component.d.ts +5 -7
- package/components/lib/coer-modal/coer-modal.component.d.ts +1 -1
- package/fesm2022/coer-elements-components.mjs +57 -32
- package/fesm2022/coer-elements-components.mjs.map +1 -1
- package/fesm2022/coer-elements-pages.mjs +2 -2
- package/fesm2022/coer-elements-pages.mjs.map +1 -1
- package/fesm2022/coer-elements-tools.mjs +148 -39
- package/fesm2022/coer-elements-tools.mjs.map +1 -1
- package/package.json +1 -2
- package/tools/lib/date-time.tools.d.ts +44 -14
|
@@ -2,10 +2,9 @@ import { AfterViewInit, EffectRef, OnDestroy } from '@angular/core';
|
|
|
2
2
|
import { ControlValue } from 'coer-elements/tools';
|
|
3
3
|
import { MatDatepicker } from '@angular/material/datepicker';
|
|
4
4
|
import { IBoxButton } from 'coer-elements/interfaces';
|
|
5
|
-
import moment from 'moment';
|
|
6
5
|
import * as i0 from "@angular/core";
|
|
7
6
|
export declare class CoerDateBox extends ControlValue implements AfterViewInit, OnDestroy {
|
|
8
|
-
_value: string | Date |
|
|
7
|
+
_value: string | Date | null;
|
|
9
8
|
protected readonly _id: string;
|
|
10
9
|
protected readonly _datepicker: import("@angular/core").Signal<MatDatepicker<Date> | undefined>;
|
|
11
10
|
protected readonly _isLoading: import("@angular/core").WritableSignal<boolean>;
|
|
@@ -20,7 +19,7 @@ export declare class CoerDateBox extends ControlValue implements AfterViewInit,
|
|
|
20
19
|
protected _pickerButton: HTMLElement | null;
|
|
21
20
|
protected _input: HTMLElement | null;
|
|
22
21
|
id: import("@angular/core").InputSignal<string>;
|
|
23
|
-
value: import("@angular/core").InputSignal<string | null | undefined>;
|
|
22
|
+
value: import("@angular/core").InputSignal<string | Date | null | undefined>;
|
|
24
23
|
label: import("@angular/core").InputSignal<string>;
|
|
25
24
|
placeholder: import("@angular/core").InputSignal<string>;
|
|
26
25
|
textPosition: import("@angular/core").InputSignal<"left" | "right" | "center">;
|
|
@@ -41,7 +40,7 @@ export declare class CoerDateBox extends ControlValue implements AfterViewInit,
|
|
|
41
40
|
marginLeft: import("@angular/core").InputSignal<string>;
|
|
42
41
|
onOpen: import("@angular/core").OutputEmitterRef<void>;
|
|
43
42
|
onClose: import("@angular/core").OutputEmitterRef<void>;
|
|
44
|
-
onChangeValue: import("@angular/core").OutputEmitterRef<string | null>;
|
|
43
|
+
onChangeValue: import("@angular/core").OutputEmitterRef<string | Date | null>;
|
|
45
44
|
onClickExternalButton: import("@angular/core").OutputEmitterRef<void>;
|
|
46
45
|
constructor();
|
|
47
46
|
ngAfterViewInit(): void;
|
|
@@ -53,9 +52,8 @@ export declare class CoerDateBox extends ControlValue implements AfterViewInit,
|
|
|
53
52
|
protected get _showexternalButtonRight(): boolean;
|
|
54
53
|
protected get _externalButtonIcon(): string;
|
|
55
54
|
protected get _isDisabledExternalButton(): boolean;
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
writeValue(value: any): void;
|
|
55
|
+
protected get _valueDate(): Date | null;
|
|
56
|
+
SetValue(value: string | Date | null | undefined): void;
|
|
59
57
|
/** */
|
|
60
58
|
protected Focus(open?: boolean, delay?: number): void;
|
|
61
59
|
/** */
|
|
@@ -13,7 +13,7 @@ export declare class CoerModal implements AfterViewInit {
|
|
|
13
13
|
title: import("@angular/core").InputSignal<string>;
|
|
14
14
|
icon: import("@angular/core").InputSignal<string>;
|
|
15
15
|
showCloseButton: import("@angular/core").InputSignal<boolean>;
|
|
16
|
-
width: import("@angular/core").InputSignal<"auto" | "
|
|
16
|
+
width: import("@angular/core").InputSignal<"auto" | "small" | "full">;
|
|
17
17
|
height: import("@angular/core").InputSignal<string>;
|
|
18
18
|
maxHeight: import("@angular/core").InputSignal<string>;
|
|
19
19
|
verticalPosition: import("@angular/core").InputSignal<"top" | "bottom" | "middle">;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { viewChild, input, output, Component, computed, effect, signal, contentChildren, inject, Input, viewChildren, NgModule } from '@angular/core';
|
|
2
|
+
import { viewChild, input, output, Component, computed, effect, Injectable, signal, contentChildren, inject, Input, viewChildren, NgModule } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i2$1 from '@angular/router';
|
|
@@ -28,7 +28,7 @@ import * as i3$3 from '@angular/material/input';
|
|
|
28
28
|
import { MatInputModule } from '@angular/material/input';
|
|
29
29
|
import * as i2$7 from '@angular/material/list';
|
|
30
30
|
import { MatListModule } from '@angular/material/list';
|
|
31
|
-
import { provideNativeDateAdapter, MatNativeDateModule } from '@angular/material/core';
|
|
31
|
+
import { NativeDateAdapter, provideNativeDateAdapter, DateAdapter, MAT_DATE_FORMATS, MatNativeDateModule } from '@angular/material/core';
|
|
32
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';
|
|
@@ -38,7 +38,7 @@ import * as i3$5 from '@angular/material/toolbar';
|
|
|
38
38
|
import { MatToolbarModule } from '@angular/material/toolbar';
|
|
39
39
|
import * as i3$1 from '@angular/material/tooltip';
|
|
40
40
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
41
|
-
import { Tools, Strings, ControlValue, CONTROL_VALUE,
|
|
41
|
+
import { Tools, Strings, ControlValue, CONTROL_VALUE, Dates, HTMLElements, Screen, CoerAlert, Files, Collections, Numbers, Source, Menu, Breadcrumbs } from 'coer-elements/tools';
|
|
42
42
|
import { breakpointSIGNAL, isModalOpenSIGNAL, colorsSIGNAL, menuSelectedSIGNAL, isMenuOpenSIGNAL, isLoadingSIGNAL, navigationSIGNAL } from 'coer-elements/signals';
|
|
43
43
|
import { Modal } from 'bootstrap';
|
|
44
44
|
|
|
@@ -413,6 +413,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
|
|
|
413
413
|
args: [{ selector: 'coer-checkbox', providers: [CONTROL_VALUE(CoerCheckbox)], standalone: false, 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"] }]
|
|
414
414
|
}], ctorParameters: () => [] });
|
|
415
415
|
|
|
416
|
+
class DATE_ADAPTER extends NativeDateAdapter {
|
|
417
|
+
format(date) {
|
|
418
|
+
return Dates.GetFormatDate(date);
|
|
419
|
+
}
|
|
420
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: DATE_ADAPTER, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
421
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: DATE_ADAPTER }); }
|
|
422
|
+
}
|
|
423
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: DATE_ADAPTER, decorators: [{
|
|
424
|
+
type: Injectable
|
|
425
|
+
}] });
|
|
416
426
|
class CoerDateBox extends ControlValue {
|
|
417
427
|
//Constructor
|
|
418
428
|
constructor() {
|
|
@@ -568,32 +578,17 @@ class CoerDateBox extends ControlValue {
|
|
|
568
578
|
return Tools.IsNotNull(this._externalButton()?.isDisabled)
|
|
569
579
|
? this._externalButton().isDisabled : false;
|
|
570
580
|
}
|
|
581
|
+
//getter
|
|
582
|
+
get _valueDate() {
|
|
583
|
+
return typeof this._value === 'string' ? new Date(this._value) : this._value;
|
|
584
|
+
}
|
|
571
585
|
//ControlValueAccessor
|
|
572
586
|
SetValue(value) {
|
|
573
|
-
|
|
574
|
-
value
|
|
575
|
-
if (Tools.IsNotNull(this._value) && Tools.IsNull(value)) {
|
|
576
|
-
this.onChangeValue.emit(null);
|
|
577
|
-
}
|
|
578
|
-
if (Tools.IsNotOnlyWhiteSpace(value)) {
|
|
579
|
-
if (Dates.IsValidDate(value)) {
|
|
580
|
-
value = Dates.GetFormatDB(value);
|
|
581
|
-
this._value = new Date(value);
|
|
582
|
-
this.onChangeValue.emit(Dates.GetFormatDB(this._value));
|
|
583
|
-
}
|
|
584
|
-
else
|
|
585
|
-
this._value = null;
|
|
586
|
-
}
|
|
587
|
-
else
|
|
588
|
-
this._value = null;
|
|
587
|
+
this._value = Tools.IsNotOnlyWhiteSpace(value) && Dates.IsValidDate(value)
|
|
588
|
+
? Dates.GetFormatDB(value) : null;
|
|
589
589
|
if (typeof this._UpdateValue === 'function') {
|
|
590
590
|
this._UpdateValue(this._value);
|
|
591
|
-
|
|
592
|
-
}
|
|
593
|
-
/** */
|
|
594
|
-
writeValue(value) {
|
|
595
|
-
if (Tools.IsNotOnlyWhiteSpace(value)) {
|
|
596
|
-
this.SetValue(value);
|
|
591
|
+
this.onChangeValue.emit(this._value);
|
|
597
592
|
}
|
|
598
593
|
}
|
|
599
594
|
/** */
|
|
@@ -664,16 +659,46 @@ class CoerDateBox extends ControlValue {
|
|
|
664
659
|
}
|
|
665
660
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerDateBox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
666
661
|
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: [
|
|
667
|
-
provideNativeDateAdapter(),
|
|
668
662
|
CONTROL_VALUE(CoerDateBox),
|
|
669
|
-
|
|
663
|
+
provideNativeDateAdapter(),
|
|
664
|
+
{ provide: DateAdapter, useClass: DATE_ADAPTER },
|
|
665
|
+
{
|
|
666
|
+
provide: MAT_DATE_FORMATS,
|
|
667
|
+
useValue: {
|
|
668
|
+
parse: {
|
|
669
|
+
dateInput: 'dd-MM-yyyy',
|
|
670
|
+
},
|
|
671
|
+
display: {
|
|
672
|
+
dateInput: 'dd-MM-yyyy',
|
|
673
|
+
monthYearLabel: 'MMMM yyyy',
|
|
674
|
+
dateA11yLabel: 'dd-MM-yyyy',
|
|
675
|
+
monthYearA11yLabel: 'MMMM yyyy',
|
|
676
|
+
},
|
|
677
|
+
}
|
|
678
|
+
},
|
|
679
|
+
], 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]=\"_valueDate\"\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 'width-100': true,\r\n 'border-radius-top-left-5px': true,\r\n 'border-radius-top-right-5px': true,\r\n 'loading' : isLoading(),\r\n 'invisible' : isInvisible() \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"] }] }); }
|
|
670
680
|
}
|
|
671
681
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerDateBox, decorators: [{
|
|
672
682
|
type: Component,
|
|
673
|
-
args: [{ selector: 'coer-datebox', providers: [
|
|
674
|
-
provideNativeDateAdapter(),
|
|
683
|
+
args: [{ selector: 'coer-datebox', standalone: false, providers: [
|
|
675
684
|
CONTROL_VALUE(CoerDateBox),
|
|
676
|
-
|
|
685
|
+
provideNativeDateAdapter(),
|
|
686
|
+
{ provide: DateAdapter, useClass: DATE_ADAPTER },
|
|
687
|
+
{
|
|
688
|
+
provide: MAT_DATE_FORMATS,
|
|
689
|
+
useValue: {
|
|
690
|
+
parse: {
|
|
691
|
+
dateInput: 'dd-MM-yyyy',
|
|
692
|
+
},
|
|
693
|
+
display: {
|
|
694
|
+
dateInput: 'dd-MM-yyyy',
|
|
695
|
+
monthYearLabel: 'MMMM yyyy',
|
|
696
|
+
dateA11yLabel: 'dd-MM-yyyy',
|
|
697
|
+
monthYearA11yLabel: 'MMMM yyyy',
|
|
698
|
+
},
|
|
699
|
+
}
|
|
700
|
+
},
|
|
701
|
+
], 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]=\"_valueDate\"\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 'width-100': true,\r\n 'border-radius-top-left-5px': true,\r\n 'border-radius-top-right-5px': true,\r\n 'loading' : isLoading(),\r\n 'invisible' : isInvisible() \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> " }]
|
|
677
702
|
}], ctorParameters: () => [] });
|
|
678
703
|
|
|
679
704
|
class CoerModal {
|
|
@@ -2513,7 +2538,7 @@ class CoerGridCell {
|
|
|
2513
2538
|
property: this.header()?.config?.property,
|
|
2514
2539
|
row: { ...this.row() },
|
|
2515
2540
|
value: this.row()[Strings.FirstCharToLower(this.header().property)]
|
|
2516
|
-
}) ? Dates.
|
|
2541
|
+
}) ? Dates.GetFormatDateTime(response) : response;
|
|
2517
2542
|
}
|
|
2518
2543
|
if (Tools.IsNotNull(this.header().config?.typeDate)) {
|
|
2519
2544
|
response = (typeof this.header()?.config?.typeDate === 'boolean' && this.header()?.config?.typeDate === true) ||
|
|
@@ -2522,7 +2547,7 @@ class CoerGridCell {
|
|
|
2522
2547
|
property: this.header()?.config?.property,
|
|
2523
2548
|
row: { ...this.row() },
|
|
2524
2549
|
value: this.row()[Strings.FirstCharToLower(this.header().property)]
|
|
2525
|
-
}) ? Dates.
|
|
2550
|
+
}) ? Dates.GetFormatDate(response) : response;
|
|
2526
2551
|
}
|
|
2527
2552
|
return response;
|
|
2528
2553
|
}
|