coer-elements 2.0.40 → 2.0.42
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 +1 -1
- package/components/lib/coer-modal/coer-modal.component.d.ts +1 -1
- package/components/lib/coer-numberbox/coer-numberbox.component.d.ts +1 -1
- package/components/lib/coer-secretbox/coer-secretbox.component.d.ts +1 -1
- package/components/lib/coer-selectbox/coer-selectbox.component.d.ts +0 -1
- package/components/lib/coer-textarea/coer-textarea.component.d.ts +10 -9
- package/components/lib/coer-textbox/coer-textbox.component.d.ts +1 -1
- package/fesm2022/coer-elements-components.mjs +60 -55
- package/fesm2022/coer-elements-components.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -17,7 +17,7 @@ export declare class CoerDateBox extends ControlValue implements AfterViewInit,
|
|
|
17
17
|
value: import("@angular/core").InputSignal<string | null | undefined>;
|
|
18
18
|
label: import("@angular/core").InputSignal<string>;
|
|
19
19
|
placeholder: import("@angular/core").InputSignal<string>;
|
|
20
|
-
textPosition: import("@angular/core").InputSignal<"
|
|
20
|
+
textPosition: import("@angular/core").InputSignal<"left" | "right" | "center">;
|
|
21
21
|
isInvalid: import("@angular/core").InputSignal<boolean>;
|
|
22
22
|
isValid: import("@angular/core").InputSignal<boolean>;
|
|
23
23
|
isLoading: import("@angular/core").InputSignal<boolean>;
|
|
@@ -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<"
|
|
16
|
+
width: import("@angular/core").InputSignal<"small" | "full" | "auto">;
|
|
17
17
|
height: import("@angular/core").InputSignal<string>;
|
|
18
18
|
maxHeight: import("@angular/core").InputSignal<string>;
|
|
19
19
|
onOpen: import("@angular/core").OutputEmitterRef<void>;
|
|
@@ -17,7 +17,7 @@ export declare class CoerNumberBox extends ControlValue implements AfterViewInit
|
|
|
17
17
|
value: import("@angular/core").InputSignal<string | number | null | undefined>;
|
|
18
18
|
label: import("@angular/core").InputSignal<string>;
|
|
19
19
|
placeholder: import("@angular/core").InputSignal<string>;
|
|
20
|
-
textPosition: import("@angular/core").InputSignal<"
|
|
20
|
+
textPosition: import("@angular/core").InputSignal<"left" | "right" | "center">;
|
|
21
21
|
min: import("@angular/core").InputSignal<number>;
|
|
22
22
|
max: import("@angular/core").InputSignal<number>;
|
|
23
23
|
isInvalid: import("@angular/core").InputSignal<boolean>;
|
|
@@ -14,7 +14,7 @@ export declare class CoerSecretBox extends ControlValue implements AfterViewInit
|
|
|
14
14
|
value: import("@angular/core").InputSignal<string | number | null | undefined>;
|
|
15
15
|
label: import("@angular/core").InputSignal<string>;
|
|
16
16
|
placeholder: import("@angular/core").InputSignal<string>;
|
|
17
|
-
textPosition: import("@angular/core").InputSignal<"
|
|
17
|
+
textPosition: import("@angular/core").InputSignal<"left" | "right" | "center">;
|
|
18
18
|
minLength: import("@angular/core").InputSignal<string | number>;
|
|
19
19
|
maxLength: import("@angular/core").InputSignal<string | number>;
|
|
20
20
|
isInvalid: import("@angular/core").InputSignal<boolean>;
|
|
@@ -16,7 +16,6 @@ export declare class CoerSelectbox<T> extends ControlValue implements AfterViewI
|
|
|
16
16
|
protected readonly _effect: EffectRef;
|
|
17
17
|
protected _textbox: HTMLInputElement;
|
|
18
18
|
protected _dropDownMenu: HTMLElement;
|
|
19
|
-
protected _container: HTMLElement;
|
|
20
19
|
id: import("@angular/core").InputSignal<string>;
|
|
21
20
|
value: import("@angular/core").InputSignal<T | null | undefined>;
|
|
22
21
|
label: import("@angular/core").InputSignal<string>;
|
|
@@ -1,16 +1,18 @@
|
|
|
1
|
-
import { ElementRef, AfterViewInit } from '@angular/core';
|
|
1
|
+
import { ElementRef, AfterViewInit, EffectRef, OnDestroy } from '@angular/core';
|
|
2
2
|
import { ControlValue } from 'coer-elements/tools';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
|
-
export declare class CoerTextarea extends ControlValue implements AfterViewInit {
|
|
4
|
+
export declare class CoerTextarea extends ControlValue implements AfterViewInit, OnDestroy {
|
|
5
5
|
protected _coerTextBox: import("@angular/core").Signal<ElementRef<any>>;
|
|
6
6
|
protected _value: string | number;
|
|
7
|
-
protected
|
|
8
|
-
protected
|
|
7
|
+
protected readonly _effect: EffectRef;
|
|
8
|
+
protected readonly _id: string;
|
|
9
|
+
protected readonly _isLoadingEvent: import("@angular/core").WritableSignal<boolean>;
|
|
9
10
|
protected _htmlElement: HTMLInputElement;
|
|
10
11
|
id: import("@angular/core").InputSignal<string>;
|
|
12
|
+
value: import("@angular/core").InputSignal<string | number | null | undefined>;
|
|
11
13
|
label: import("@angular/core").InputSignal<string>;
|
|
12
14
|
placeholder: import("@angular/core").InputSignal<string>;
|
|
13
|
-
textPosition: import("@angular/core").InputSignal<"
|
|
15
|
+
textPosition: import("@angular/core").InputSignal<"left" | "right" | "center">;
|
|
14
16
|
minLength: import("@angular/core").InputSignal<string | number>;
|
|
15
17
|
maxLength: import("@angular/core").InputSignal<string | number>;
|
|
16
18
|
isInvalid: import("@angular/core").InputSignal<boolean>;
|
|
@@ -29,21 +31,20 @@ export declare class CoerTextarea extends ControlValue implements AfterViewInit
|
|
|
29
31
|
marginRight: import("@angular/core").InputSignal<string>;
|
|
30
32
|
marginBottom: import("@angular/core").InputSignal<string>;
|
|
31
33
|
marginLeft: import("@angular/core").InputSignal<string>;
|
|
32
|
-
set value(value: string | number | null | undefined);
|
|
33
34
|
onInput: import("@angular/core").OutputEmitterRef<string>;
|
|
35
|
+
constructor();
|
|
34
36
|
ngAfterViewInit(): void;
|
|
37
|
+
ngOnDestroy(): void;
|
|
35
38
|
protected get footer(): string;
|
|
36
39
|
protected _isEnable: import("@angular/core").Signal<boolean>;
|
|
37
40
|
protected _floatLabel: import("@angular/core").Signal<"auto" | "always">;
|
|
38
41
|
protected _paddingRight: import("@angular/core").Signal<"0px" | "18px">;
|
|
39
42
|
/** */
|
|
40
|
-
private _SetEvents;
|
|
41
|
-
/** */
|
|
42
43
|
Focus(select?: boolean, delay?: number): void;
|
|
43
44
|
/** */
|
|
44
45
|
Blur(): void;
|
|
45
46
|
/** */
|
|
46
47
|
Clear(delay?: number): void;
|
|
47
48
|
static ɵfac: i0.ɵɵFactoryDeclaration<CoerTextarea, never>;
|
|
48
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<CoerTextarea, "coer-textarea", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "textPosition": { "alias": "textPosition"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "isInvalid": { "alias": "isInvalid"; "required": false; "isSignal": true; }; "isValid": { "alias": "isValid"; "required": false; "isSignal": true; }; "resize": { "alias": "resize"; "required": false; "isSignal": true; }; "showFooter": { "alias": "showFooter"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "isDisabled": { "alias": "isDisabled"; "required": false; "isSignal": true; }; "isReadonly": { "alias": "isReadonly"; "required": false; "isSignal": true; }; "isInvisible": { "alias": "isInvisible"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "marginTop": { "alias": "marginTop"; "required": false; "isSignal": true; }; "marginRight": { "alias": "marginRight"; "required": false; "isSignal": true; }; "marginBottom": { "alias": "marginBottom"; "required": false; "isSignal": true; }; "marginLeft": { "alias": "marginLeft"; "required": false; "isSignal": true; };
|
|
49
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<CoerTextarea, "coer-textarea", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "textPosition": { "alias": "textPosition"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "isInvalid": { "alias": "isInvalid"; "required": false; "isSignal": true; }; "isValid": { "alias": "isValid"; "required": false; "isSignal": true; }; "resize": { "alias": "resize"; "required": false; "isSignal": true; }; "showFooter": { "alias": "showFooter"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "isDisabled": { "alias": "isDisabled"; "required": false; "isSignal": true; }; "isReadonly": { "alias": "isReadonly"; "required": false; "isSignal": true; }; "isInvisible": { "alias": "isInvisible"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "marginTop": { "alias": "marginTop"; "required": false; "isSignal": true; }; "marginRight": { "alias": "marginRight"; "required": false; "isSignal": true; }; "marginBottom": { "alias": "marginBottom"; "required": false; "isSignal": true; }; "marginLeft": { "alias": "marginLeft"; "required": false; "isSignal": true; }; }, { "onInput": "onInput"; }, never, never, false, never>;
|
|
49
50
|
}
|
|
@@ -16,7 +16,7 @@ export declare class CoerTextBox extends ControlValue implements AfterViewInit,
|
|
|
16
16
|
value: import("@angular/core").InputSignal<string | number | null | undefined>;
|
|
17
17
|
label: import("@angular/core").InputSignal<string>;
|
|
18
18
|
placeholder: import("@angular/core").InputSignal<string>;
|
|
19
|
-
textPosition: import("@angular/core").InputSignal<"
|
|
19
|
+
textPosition: import("@angular/core").InputSignal<"left" | "right" | "center">;
|
|
20
20
|
minLength: import("@angular/core").InputSignal<string | number>;
|
|
21
21
|
maxLength: import("@angular/core").InputSignal<string | number>;
|
|
22
22
|
isInvalid: import("@angular/core").InputSignal<boolean>;
|
|
@@ -271,15 +271,20 @@ class CoerButton {
|
|
|
271
271
|
Focus(timeout = 0) {
|
|
272
272
|
Tools.Sleep(timeout).then(() => {
|
|
273
273
|
if (this._isEnable()) {
|
|
274
|
-
this.
|
|
274
|
+
if (this._showButton()) {
|
|
275
|
+
this._innerButton?.focus();
|
|
276
|
+
}
|
|
277
|
+
else if (this._showButtonIcon()) {
|
|
278
|
+
this._innerButtonIcon?.focus();
|
|
279
|
+
}
|
|
275
280
|
}
|
|
276
281
|
});
|
|
277
282
|
}
|
|
278
283
|
/** */
|
|
279
284
|
Blur(timeout = 0) {
|
|
280
285
|
Tools.Sleep(timeout).then(() => {
|
|
281
|
-
this._innerButton
|
|
282
|
-
this._innerButtonIcon
|
|
286
|
+
this._innerButton?.blur();
|
|
287
|
+
this._innerButtonIcon?.blur();
|
|
283
288
|
});
|
|
284
289
|
}
|
|
285
290
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
@@ -640,7 +645,7 @@ class CoerModal {
|
|
|
640
645
|
}
|
|
641
646
|
/** */
|
|
642
647
|
Open() {
|
|
643
|
-
this._modal
|
|
648
|
+
this._modal?.show();
|
|
644
649
|
if (!this._isOpen) {
|
|
645
650
|
this._isOpen = true;
|
|
646
651
|
this._isModalOpen.set(true);
|
|
@@ -649,7 +654,7 @@ class CoerModal {
|
|
|
649
654
|
}
|
|
650
655
|
/** */
|
|
651
656
|
Close() {
|
|
652
|
-
this._modal
|
|
657
|
+
this._modal?.hide();
|
|
653
658
|
if (this._isOpen) {
|
|
654
659
|
HTMLElements.GetElement(`#${this._id}-button-close`)?.blur();
|
|
655
660
|
this._isOpen = false;
|
|
@@ -1289,30 +1294,30 @@ class CoerSelectbox extends ControlValue {
|
|
|
1289
1294
|
ngAfterViewInit() {
|
|
1290
1295
|
Tools.Sleep().then(_ => {
|
|
1291
1296
|
//Container
|
|
1292
|
-
|
|
1293
|
-
|
|
1297
|
+
const container = document.getElementById(`${this._id}-container`);
|
|
1298
|
+
container?.addEventListener('mouseenter', () => {
|
|
1294
1299
|
this._isOverMenu.set(true);
|
|
1295
1300
|
});
|
|
1296
|
-
|
|
1301
|
+
container?.addEventListener('mouseleave', () => {
|
|
1297
1302
|
this._isOverMenu.set(false);
|
|
1298
1303
|
});
|
|
1299
1304
|
//DropDown
|
|
1300
1305
|
this._dropDownMenu = document.getElementById(`${this._id}-dropdown-menu`);
|
|
1301
|
-
this._dropDownMenu
|
|
1306
|
+
this._dropDownMenu?.addEventListener('mouseenter', () => {
|
|
1302
1307
|
this._isOverMenu.set(true);
|
|
1303
1308
|
});
|
|
1304
|
-
this._dropDownMenu
|
|
1309
|
+
this._dropDownMenu?.addEventListener('mouseleave', () => {
|
|
1305
1310
|
this._isOverMenu.set(false);
|
|
1306
1311
|
});
|
|
1307
1312
|
//TextBox
|
|
1308
1313
|
this._textbox = document.getElementById(this._id);
|
|
1309
|
-
this._textbox
|
|
1314
|
+
this._textbox?.addEventListener('focus', () => {
|
|
1310
1315
|
if (this._isEnable())
|
|
1311
1316
|
this.Focus();
|
|
1312
1317
|
else
|
|
1313
1318
|
this.Blur();
|
|
1314
1319
|
});
|
|
1315
|
-
this._textbox
|
|
1320
|
+
this._textbox?.addEventListener('keyup', (event) => {
|
|
1316
1321
|
const { key } = event;
|
|
1317
1322
|
if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) {
|
|
1318
1323
|
if (key === 'ArrowUp') {
|
|
@@ -1323,7 +1328,7 @@ class CoerSelectbox extends ControlValue {
|
|
|
1323
1328
|
this._scroll.update(scroll => scroll -= this._scrollByRow);
|
|
1324
1329
|
else
|
|
1325
1330
|
this._scroll.set(0);
|
|
1326
|
-
this._dropDownMenu
|
|
1331
|
+
this._dropDownMenu?.scrollTo(0, this._scroll());
|
|
1327
1332
|
}
|
|
1328
1333
|
else {
|
|
1329
1334
|
this._scroll.set(0);
|
|
@@ -1331,7 +1336,7 @@ class CoerSelectbox extends ControlValue {
|
|
|
1331
1336
|
this._textbox.focus();
|
|
1332
1337
|
this._textbox.select();
|
|
1333
1338
|
}
|
|
1334
|
-
this._dropDownMenu
|
|
1339
|
+
this._dropDownMenu?.scrollTo(0, this._scroll());
|
|
1335
1340
|
}
|
|
1336
1341
|
else if (key === 'ArrowDown') {
|
|
1337
1342
|
const lastIndex = (this._dataSource().length - 1);
|
|
@@ -1340,12 +1345,12 @@ class CoerSelectbox extends ControlValue {
|
|
|
1340
1345
|
if (this._index() >= 3)
|
|
1341
1346
|
this._scroll.update(scroll => scroll += this._scrollByRow);
|
|
1342
1347
|
}
|
|
1343
|
-
this._dropDownMenu
|
|
1348
|
+
this._dropDownMenu?.scrollTo(0, this._scroll());
|
|
1344
1349
|
}
|
|
1345
1350
|
else if (['ArrowLeft', 'ArrowRight'].includes(key)) {
|
|
1346
1351
|
if (Tools.IsNotNull(this._value) && !this._isDirty()) {
|
|
1347
1352
|
this._scroll.set(0);
|
|
1348
|
-
this._dropDownMenu
|
|
1353
|
+
this._dropDownMenu?.scrollTo(0, this._scroll());
|
|
1349
1354
|
this._Search(this._displayed);
|
|
1350
1355
|
}
|
|
1351
1356
|
this._isDirty.set(true);
|
|
@@ -1496,7 +1501,7 @@ class CoerSelectbox extends ControlValue {
|
|
|
1496
1501
|
this._isDirty.set(false);
|
|
1497
1502
|
this._index.set(-1);
|
|
1498
1503
|
this._scroll.set(0);
|
|
1499
|
-
this._dropDownMenu
|
|
1504
|
+
this._dropDownMenu?.scrollTo(0, this._scroll());
|
|
1500
1505
|
this._search.set(this._displayed);
|
|
1501
1506
|
Tools.Sleep().then(_ => {
|
|
1502
1507
|
this._textbox.blur();
|
|
@@ -1511,15 +1516,15 @@ class CoerSelectbox extends ControlValue {
|
|
|
1511
1516
|
}
|
|
1512
1517
|
/** */
|
|
1513
1518
|
_Open() {
|
|
1514
|
-
if (!this._dropDownMenu
|
|
1515
|
-
this._dropDownMenu
|
|
1519
|
+
if (!this._dropDownMenu?.classList.contains('show')) {
|
|
1520
|
+
this._dropDownMenu?.classList.add('show');
|
|
1516
1521
|
}
|
|
1517
1522
|
this._isOpen.set(true);
|
|
1518
1523
|
}
|
|
1519
1524
|
/** */
|
|
1520
1525
|
_Close() {
|
|
1521
|
-
if (this._dropDownMenu
|
|
1522
|
-
this._dropDownMenu
|
|
1526
|
+
if (this._dropDownMenu?.classList.contains('show')) {
|
|
1527
|
+
this._dropDownMenu?.classList.remove('show');
|
|
1523
1528
|
}
|
|
1524
1529
|
this._isOpen.set(false);
|
|
1525
1530
|
}
|
|
@@ -1536,7 +1541,7 @@ class CoerSelectbox extends ControlValue {
|
|
|
1536
1541
|
else {
|
|
1537
1542
|
this._scroll.set(0);
|
|
1538
1543
|
}
|
|
1539
|
-
this._dropDownMenu
|
|
1544
|
+
this._dropDownMenu?.scrollTo(0, this._scroll());
|
|
1540
1545
|
}
|
|
1541
1546
|
});
|
|
1542
1547
|
}
|
|
@@ -3695,20 +3700,22 @@ class CoerDropdown extends ControlValue {
|
|
|
3695
3700
|
Tools.Sleep().then(() => {
|
|
3696
3701
|
//Container
|
|
3697
3702
|
this._container = document.getElementById(`${this._id}-container`);
|
|
3698
|
-
this._container
|
|
3699
|
-
this.
|
|
3700
|
-
|
|
3701
|
-
|
|
3702
|
-
this.
|
|
3703
|
-
|
|
3704
|
-
|
|
3705
|
-
|
|
3706
|
-
|
|
3707
|
-
this.
|
|
3708
|
-
|
|
3709
|
-
|
|
3710
|
-
this.
|
|
3711
|
-
|
|
3703
|
+
if (this._container) {
|
|
3704
|
+
this._container.addEventListener('mouseenter', () => {
|
|
3705
|
+
this._isOverMenu.set(true);
|
|
3706
|
+
});
|
|
3707
|
+
this._container.addEventListener('mouseleave', () => {
|
|
3708
|
+
this._isOverMenu.set(false);
|
|
3709
|
+
});
|
|
3710
|
+
//DropDown
|
|
3711
|
+
this._dropDownMenu = document.getElementById(`${this._id}-dropdown-menu`);
|
|
3712
|
+
this._dropDownMenu.addEventListener('mouseenter', () => {
|
|
3713
|
+
this._isOverMenu.set(true);
|
|
3714
|
+
});
|
|
3715
|
+
this._dropDownMenu.addEventListener('mouseleave', () => {
|
|
3716
|
+
this._isOverMenu.set(false);
|
|
3717
|
+
});
|
|
3718
|
+
}
|
|
3712
3719
|
//Document
|
|
3713
3720
|
document.addEventListener('click', () => {
|
|
3714
3721
|
if (!this._isOverMenu())
|
|
@@ -3906,8 +3913,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
|
|
|
3906
3913
|
}], ctorParameters: () => [] });
|
|
3907
3914
|
|
|
3908
3915
|
class CoerTextarea extends ControlValue {
|
|
3916
|
+
//Constructor
|
|
3909
3917
|
constructor() {
|
|
3910
|
-
super(
|
|
3918
|
+
super();
|
|
3911
3919
|
//Elements
|
|
3912
3920
|
this._coerTextBox = viewChild.required('coerTextArea');
|
|
3913
3921
|
//Variables
|
|
@@ -3916,6 +3924,7 @@ class CoerTextarea extends ControlValue {
|
|
|
3916
3924
|
this._isLoadingEvent = signal(false);
|
|
3917
3925
|
//Inputs
|
|
3918
3926
|
this.id = input('');
|
|
3927
|
+
this.value = input(null);
|
|
3919
3928
|
this.label = input('');
|
|
3920
3929
|
this.placeholder = input('');
|
|
3921
3930
|
this.textPosition = input('left');
|
|
@@ -3952,22 +3961,12 @@ class CoerTextarea extends ControlValue {
|
|
|
3952
3961
|
return this.isInvalid() || this.isValid()
|
|
3953
3962
|
? '18px' : '0px';
|
|
3954
3963
|
});
|
|
3955
|
-
|
|
3956
|
-
|
|
3957
|
-
|
|
3958
|
-
value = '';
|
|
3959
|
-
this.SetValue(value);
|
|
3964
|
+
this._effect = effect(() => {
|
|
3965
|
+
this.SetValue(Tools.IsNotNull(this.value()) ? this.value() : '');
|
|
3966
|
+
});
|
|
3960
3967
|
}
|
|
3961
3968
|
//AfterViewInit
|
|
3962
3969
|
ngAfterViewInit() {
|
|
3963
|
-
this._SetEvents();
|
|
3964
|
-
}
|
|
3965
|
-
//getter
|
|
3966
|
-
get footer() {
|
|
3967
|
-
return `${Tools.IsNotNull(this._value) ? String(this._value).length : '0'} / ${this.maxLength()}`;
|
|
3968
|
-
}
|
|
3969
|
-
/** */
|
|
3970
|
-
_SetEvents() {
|
|
3971
3970
|
Tools.Sleep().then(() => {
|
|
3972
3971
|
this._htmlElement = document.getElementById(this._id);
|
|
3973
3972
|
if (this._htmlElement) {
|
|
@@ -3991,6 +3990,14 @@ class CoerTextarea extends ControlValue {
|
|
|
3991
3990
|
}
|
|
3992
3991
|
});
|
|
3993
3992
|
}
|
|
3993
|
+
//OnDestroy
|
|
3994
|
+
ngOnDestroy() {
|
|
3995
|
+
this._effect?.destroy();
|
|
3996
|
+
}
|
|
3997
|
+
//getter
|
|
3998
|
+
get footer() {
|
|
3999
|
+
return `${Tools.IsNotNull(this._value) ? String(this._value).length : '0'} / ${this.maxLength()}`;
|
|
4000
|
+
}
|
|
3994
4001
|
/** */
|
|
3995
4002
|
Focus(select = false, delay = 0) {
|
|
3996
4003
|
if (this._isLoadingEvent())
|
|
@@ -4029,15 +4036,13 @@ class CoerTextarea extends ControlValue {
|
|
|
4029
4036
|
this.SetValue('');
|
|
4030
4037
|
this.Focus(false, delay);
|
|
4031
4038
|
}
|
|
4032
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerTextarea, deps:
|
|
4033
|
-
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 }, 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 }
|
|
4039
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerTextarea, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4040
|
+
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-textarea\">\r\n <mat-form-field\r\n [id]=\"_id + '-container'\"\r\n [floatLabel]=\"_floatLabel()\"\r\n [ngClass]=\"{\r\n 'readonly': isReadonly() && !isLoading()\r\n }\"\r\n [style]=\"{\r\n 'width': width(),\r\n 'min-width': minWidth(),\r\n 'max-width': maxWidth(),\r\n 'margin-top': marginTop(),\r\n 'margin-right': marginRight(),\r\n 'margin-bottom': marginBottom(),\r\n 'margin-left': marginLeft()\r\n }\">\r\n <mat-label>{{ label() }}</mat-label>\r\n\r\n <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 'cursor' : isLoading() ? 'wait' : 'default',\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 @if(isLoading()) {\r\n <div class=\"placeholder-glow\">\r\n <span class=\"placeholder\"></span>\r\n </div>\r\n }\r\n\r\n <span ngClass=\"icon-container\">\r\n @if(isInvalid() && !isDisabled() && !isLoading()) {\r\n <i class=\"fa-solid fa-circle-exclamation\"></i>\r\n }\r\n\r\n @else if(isValid() && !isDisabled() && !isLoading()) {\r\n <i class=\"fa-solid fa-circle-check text-green\"></i>\r\n }\r\n </span>\r\n </mat-form-field>\r\n\r\n @if(showFooter()) {\r\n <footer> {{ footer }} </footer>\r\n }\r\n</div>", styles: ["div.coer-textarea mat-form-field{position:relative!important}div.coer-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix{width:100%!important;padding:0!important}div.coer-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix label{overflow:visible!important;position:absolute!important;top:20px!important}div.coer-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix label.mdc-floating-label--float-above mat-label{color:var(--primary-inner);font-weight:700;position:relative;left:-10px;top:2px}div.coer-textarea 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{font-weight:400!important;font-size:17px!important;color:var(--black)!important;min-height:80px}div.coer-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active,div.coer-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:before,div.coer-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:after{border-bottom-color:var(--primary-inner)!important}div.coer-textarea mat-form-field div.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align{height:0px!important}div.coer-textarea mat-form-field span.icon-container{position:absolute!important;top:1px!important;right:-14px!important;z-index:5!important;width:30px;height:40px;display:flex;align-items:center;justify-content:center}div.coer-textarea mat-form-field span.icon-container i{font-size:20px!important}div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-xmark,div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass{color:#caced1!important;cursor:pointer!important}div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-xmark:hover,div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass:hover{color:#6c757d!important}div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-circle-check{color:var(--green)!important}div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-circle-exclamation{color:var(--red)!important}div.coer-textarea mat-form-field span.placeholder{width:calc(100% + 32px)!important;height:100%!important;position:absolute!important;z-index:1!important;top:0!important;left:-16px!important;cursor:wait!important}div.coer-textarea mat-form-field .placeholder,div.coer-textarea mat-form-field .placeholder *,div.coer-textarea mat-form-field .placeholder-glow,div.coer-textarea mat-form-field .placeholder-glow *{cursor:wait!important}div.coer-textarea footer{padding-top:2px;text-align:right;font-size:10px;color:var(--gray)}div.coer-textarea mat-form-field.readonly div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:#bbbbbb83!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }] }); }
|
|
4034
4041
|
}
|
|
4035
4042
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerTextarea, decorators: [{
|
|
4036
4043
|
type: Component,
|
|
4037
4044
|
args: [{ selector: 'coer-textarea', providers: [CONTROL_VALUE(CoerTextarea)], standalone: false, template: "<div class=\"coer-textarea\">\r\n <mat-form-field\r\n [id]=\"_id + '-container'\"\r\n [floatLabel]=\"_floatLabel()\"\r\n [ngClass]=\"{\r\n 'readonly': isReadonly() && !isLoading()\r\n }\"\r\n [style]=\"{\r\n 'width': width(),\r\n 'min-width': minWidth(),\r\n 'max-width': maxWidth(),\r\n 'margin-top': marginTop(),\r\n 'margin-right': marginRight(),\r\n 'margin-bottom': marginBottom(),\r\n 'margin-left': marginLeft()\r\n }\">\r\n <mat-label>{{ label() }}</mat-label>\r\n\r\n <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 'cursor' : isLoading() ? 'wait' : 'default',\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 @if(isLoading()) {\r\n <div class=\"placeholder-glow\">\r\n <span class=\"placeholder\"></span>\r\n </div>\r\n }\r\n\r\n <span ngClass=\"icon-container\">\r\n @if(isInvalid() && !isDisabled() && !isLoading()) {\r\n <i class=\"fa-solid fa-circle-exclamation\"></i>\r\n }\r\n\r\n @else if(isValid() && !isDisabled() && !isLoading()) {\r\n <i class=\"fa-solid fa-circle-check text-green\"></i>\r\n }\r\n </span>\r\n </mat-form-field>\r\n\r\n @if(showFooter()) {\r\n <footer> {{ footer }} </footer>\r\n }\r\n</div>", styles: ["div.coer-textarea mat-form-field{position:relative!important}div.coer-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix{width:100%!important;padding:0!important}div.coer-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix label{overflow:visible!important;position:absolute!important;top:20px!important}div.coer-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix label.mdc-floating-label--float-above mat-label{color:var(--primary-inner);font-weight:700;position:relative;left:-10px;top:2px}div.coer-textarea 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{font-weight:400!important;font-size:17px!important;color:var(--black)!important;min-height:80px}div.coer-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active,div.coer-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:before,div.coer-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:after{border-bottom-color:var(--primary-inner)!important}div.coer-textarea mat-form-field div.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align{height:0px!important}div.coer-textarea mat-form-field span.icon-container{position:absolute!important;top:1px!important;right:-14px!important;z-index:5!important;width:30px;height:40px;display:flex;align-items:center;justify-content:center}div.coer-textarea mat-form-field span.icon-container i{font-size:20px!important}div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-xmark,div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass{color:#caced1!important;cursor:pointer!important}div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-xmark:hover,div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass:hover{color:#6c757d!important}div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-circle-check{color:var(--green)!important}div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-circle-exclamation{color:var(--red)!important}div.coer-textarea mat-form-field span.placeholder{width:calc(100% + 32px)!important;height:100%!important;position:absolute!important;z-index:1!important;top:0!important;left:-16px!important;cursor:wait!important}div.coer-textarea mat-form-field .placeholder,div.coer-textarea mat-form-field .placeholder *,div.coer-textarea mat-form-field .placeholder-glow,div.coer-textarea mat-form-field .placeholder-glow *{cursor:wait!important}div.coer-textarea footer{padding-top:2px;text-align:right;font-size:10px;color:var(--gray)}div.coer-textarea mat-form-field.readonly div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:#bbbbbb83!important}\n"] }]
|
|
4038
|
-
}],
|
|
4039
|
-
type: Input
|
|
4040
|
-
}] } });
|
|
4045
|
+
}], ctorParameters: () => [] });
|
|
4041
4046
|
|
|
4042
4047
|
class CoerToolbar {
|
|
4043
4048
|
constructor() {
|