coer-elements 2.0.63 → 2.0.64
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.
|
@@ -26,10 +26,14 @@ export declare class CoerGridCell<T> {
|
|
|
26
26
|
/** */
|
|
27
27
|
protected _GetCellValue: import("@angular/core").Signal<string>;
|
|
28
28
|
/** */
|
|
29
|
-
protected
|
|
29
|
+
protected _GetTextAlignX: import("@angular/core").Signal<"center" | "flex-start" | "flex-end">;
|
|
30
|
+
/** */
|
|
31
|
+
protected _GetTextAlignY: import("@angular/core").Signal<"center" | "flex-start" | "flex-end">;
|
|
30
32
|
/** */
|
|
31
33
|
protected _GetTextBreak: import("@angular/core").Signal<"break-word" | "keep-all">;
|
|
32
34
|
/** */
|
|
35
|
+
protected _GetHeight: import("@angular/core").Signal<string>;
|
|
36
|
+
/** */
|
|
33
37
|
protected _GetTextColor: import("@angular/core").Signal<string>;
|
|
34
38
|
/** */
|
|
35
39
|
protected _switchAttributes: () => any;
|
|
@@ -2537,8 +2537,8 @@ class CoerGridCell {
|
|
|
2537
2537
|
return this.row()[Strings.FirstCharToLower(this.header().property)];
|
|
2538
2538
|
});
|
|
2539
2539
|
/** */
|
|
2540
|
-
this.
|
|
2541
|
-
switch (this.header()?.config?.
|
|
2540
|
+
this._GetTextAlignX = computed(() => {
|
|
2541
|
+
switch (this.header()?.config?.textAlignX) {
|
|
2542
2542
|
case 'left': return 'flex-start';
|
|
2543
2543
|
case 'center': return 'center';
|
|
2544
2544
|
case 'right': return 'flex-end';
|
|
@@ -2546,11 +2546,25 @@ class CoerGridCell {
|
|
|
2546
2546
|
}
|
|
2547
2547
|
});
|
|
2548
2548
|
/** */
|
|
2549
|
+
this._GetTextAlignY = computed(() => {
|
|
2550
|
+
switch (this.header()?.config?.textAlignY) {
|
|
2551
|
+
case 'top': return 'flex-start';
|
|
2552
|
+
case 'middle': return 'center';
|
|
2553
|
+
case 'bottom': return 'flex-end';
|
|
2554
|
+
default: return 'flex-start';
|
|
2555
|
+
}
|
|
2556
|
+
});
|
|
2557
|
+
/** */
|
|
2549
2558
|
this._GetTextBreak = computed(() => {
|
|
2550
2559
|
return Tools.IsNull(this.header().config?.textBreak) || this.header().config?.textBreak === false
|
|
2551
2560
|
? 'keep-all' : 'break-word';
|
|
2552
2561
|
});
|
|
2553
2562
|
/** */
|
|
2563
|
+
this._GetHeight = computed(() => {
|
|
2564
|
+
return Tools.IsNull(this.header().config?.height)
|
|
2565
|
+
? 'auto' : this.header().config?.height;
|
|
2566
|
+
});
|
|
2567
|
+
/** */
|
|
2554
2568
|
this._GetTextColor = computed(() => {
|
|
2555
2569
|
switch (['textBlue', 'textGreen', 'textYellow', 'textOrange', 'textRed'].find(color => Tools.IsNotNull(this.header()?.config) && ((Tools.IsBooleanTrue(this.header()?.config, color)) || (Tools.IsFunction(this.header()?.config, color) && (this.header()?.config)[color]({
|
|
2556
2570
|
indexRow: this.row().indexRow,
|
|
@@ -2681,11 +2695,11 @@ class CoerGridCell {
|
|
|
2681
2695
|
}
|
|
2682
2696
|
}
|
|
2683
2697
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerGridCell, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2684
|
-
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
|
|
2698
|
+
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 @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 min-height-20px padding-5px\" \r\n [ngStyle]=\"{ \r\n 'height' : _GetHeight(),\r\n 'align-items' : _GetTextAlignY(),\r\n 'justify-content': _GetTextAlignX(),\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\" class=\"display-flex\"></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" }] }); }
|
|
2685
2699
|
}
|
|
2686
2700
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerGridCell, decorators: [{
|
|
2687
2701
|
type: Component,
|
|
2688
|
-
args: [{ selector: 'coer-grid-cell', standalone: false, template: "@switch(input) {\r\n
|
|
2702
|
+
args: [{ selector: 'coer-grid-cell', standalone: false, template: "@switch(input) {\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 min-height-20px padding-5px\" \r\n [ngStyle]=\"{ \r\n 'height' : _GetHeight(),\r\n 'align-items' : _GetTextAlignY(),\r\n 'justify-content': _GetTextAlignX(),\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\" class=\"display-flex\"></div> \r\n </div>\r\n }\r\n}" }]
|
|
2689
2703
|
}] });
|
|
2690
2704
|
|
|
2691
2705
|
class CoerGridBody {
|