mmhglobal-dynamicform 1.1.35 → 1.1.38
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/README.md +11 -1
- package/bundles/mmhglobal-dynamicform.umd.js +88 -36
- package/bundles/mmhglobal-dynamicform.umd.js.map +1 -1
- package/bundles/mmhglobal-dynamicform.umd.min.js +2 -2
- package/bundles/mmhglobal-dynamicform.umd.min.js.map +1 -1
- package/esm2015/lib/zcheckbox/zcheckbox.component.js +24 -10
- package/esm2015/lib/zgrid/zgrid.binding.directive.js +13 -10
- package/esm2015/lib/zselectmultiple/zselectmultiple.component.js +23 -9
- package/esm2015/lib/ztext/ztext.component.js +23 -9
- package/esm2015/lib/zupload/zupload.component.js +11 -4
- package/fesm2015/mmhglobal-dynamicform.js +88 -36
- package/fesm2015/mmhglobal-dynamicform.js.map +1 -1
- package/lib/zcheckbox/zcheckbox.component.d.ts +4 -2
- package/lib/zscheduler/zscheduler.component.d.ts +1 -1
- package/lib/zselectmultiple/zselectmultiple.component.d.ts +4 -2
- package/lib/ztext/ztext.component.d.ts +4 -2
- package/lib/zupload/zupload.component.d.ts +3 -1
- package/mmhglobal-dynamicform.metadata.json +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,7 +2,17 @@
|
|
|
2
2
|
|
|
3
3
|
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.13.
|
|
4
4
|
|
|
5
|
-
## Changelog
|
|
5
|
+
## Changelog
|
|
6
|
+
`1.38`<br/>
|
|
7
|
+
[zupload] default file size restriction.<br/>
|
|
8
|
+
[zupload] added clearFiles function.<br/>
|
|
9
|
+
|
|
10
|
+
`1.37`<br/>
|
|
11
|
+
[tooltipsinfo] support for setTooltipsDisplayText, setTooltipsInfoIcon.
|
|
12
|
+
|
|
13
|
+
`1.36`<br/>
|
|
14
|
+
Disable zgrid session storage.
|
|
15
|
+
|
|
6
16
|
`1.35`<br/>
|
|
7
17
|
Temp disable get grid setting from cookiestore when load.
|
|
8
18
|
Fix and enable back grid session storage.
|
|
@@ -2127,15 +2127,18 @@
|
|
|
2127
2127
|
_this.getGrantType();
|
|
2128
2128
|
_this.setHiddenColumn(gridSetting);
|
|
2129
2129
|
_this.params.referId = _this.getFieldReferenceId() || _this.grp.referenceId || null;
|
|
2130
|
-
|
|
2131
|
-
//
|
|
2132
|
-
|
|
2133
|
-
|
|
2134
|
-
//
|
|
2135
|
-
|
|
2136
|
-
|
|
2137
|
-
//
|
|
2138
|
-
|
|
2130
|
+
//}),
|
|
2131
|
+
//switchMap(() => {
|
|
2132
|
+
// //Get Session
|
|
2133
|
+
// return this.getGridSessionFilter(this.grp, this);
|
|
2134
|
+
//}),
|
|
2135
|
+
//switchMap(() => {
|
|
2136
|
+
// //Before get grid data
|
|
2137
|
+
// return this.beforeGridGetData(this.grp, this);
|
|
2138
|
+
//}),
|
|
2139
|
+
//switchMap(() => {
|
|
2140
|
+
// //Set grid data
|
|
2141
|
+
// return this.setGridSessionFilter(this.grp, this);
|
|
2139
2142
|
}))
|
|
2140
2143
|
.subscribe(function () {
|
|
2141
2144
|
_this.getDataBinding();
|
|
@@ -4401,6 +4404,7 @@
|
|
|
4401
4404
|
this.showTooltipsInfoIcon = false;
|
|
4402
4405
|
this.showTooltipsInfoBySide = false;
|
|
4403
4406
|
this.tooltipsInfo = null;
|
|
4407
|
+
this.tooltipsDisplayText = null;
|
|
4404
4408
|
this.useKendoSwitch = false;
|
|
4405
4409
|
this.setEnable = function (status) {
|
|
4406
4410
|
var fc = _this.group.form.controls[_this.data.Value];
|
|
@@ -4423,10 +4427,12 @@
|
|
|
4423
4427
|
if (this.tooltipsInfo) {
|
|
4424
4428
|
if ((this.tooltipsInfo['Icon'] != null || this.tooltipsInfo['Icon'] != undefined) && !this.isMobileScreen()) {
|
|
4425
4429
|
this.showTooltipsInfoIcon = true;
|
|
4430
|
+
this.setTooltipsInfoIcon();
|
|
4426
4431
|
}
|
|
4427
4432
|
if (this.tooltipsInfo['SideBySide']) {
|
|
4428
4433
|
this.showTooltipsInfoBySide = true;
|
|
4429
4434
|
}
|
|
4435
|
+
this.setTooltipsDisplayText();
|
|
4430
4436
|
}
|
|
4431
4437
|
this.useKendoSwitch = this.data.UseKendoSwitch ? this.data.UseKendoSwitch : false;
|
|
4432
4438
|
};
|
|
@@ -4489,22 +4495,33 @@
|
|
|
4489
4495
|
}
|
|
4490
4496
|
return "#acacac"; // default grey
|
|
4491
4497
|
};
|
|
4492
|
-
ZcheckboxComponent.prototype.setTooltipsInfoIcon = function () {
|
|
4498
|
+
ZcheckboxComponent.prototype.setTooltipsInfoIcon = function (displayIcon) {
|
|
4493
4499
|
if (this.showTooltipsInfoIcon) {
|
|
4494
|
-
if (this.tooltipsInfo
|
|
4495
|
-
|
|
4500
|
+
if (this.tooltipsInfo.Icon != '') {
|
|
4501
|
+
if (displayIcon) {
|
|
4502
|
+
this.tooltipsDisplayIcon = displayIcon;
|
|
4503
|
+
}
|
|
4504
|
+
else {
|
|
4505
|
+
this.tooltipsDisplayIcon = this.tooltipsInfo.Icon;
|
|
4506
|
+
}
|
|
4496
4507
|
}
|
|
4497
4508
|
else {
|
|
4498
|
-
|
|
4509
|
+
this.tooltipsDisplayIcon = 'question-circle';
|
|
4499
4510
|
}
|
|
4500
|
-
return false;
|
|
4501
4511
|
}
|
|
4502
4512
|
};
|
|
4503
|
-
ZcheckboxComponent.prototype.setTooltipsDisplayText = function () {
|
|
4513
|
+
ZcheckboxComponent.prototype.setTooltipsDisplayText = function (displayText) {
|
|
4504
4514
|
if (this.tooltipsInfo) {
|
|
4505
|
-
|
|
4515
|
+
if (displayText) {
|
|
4516
|
+
this.tooltipsDisplayText = displayText;
|
|
4517
|
+
}
|
|
4518
|
+
else {
|
|
4519
|
+
this.tooltipsDisplayText = this.tooltipsInfo.DisplayText;
|
|
4520
|
+
}
|
|
4521
|
+
}
|
|
4522
|
+
else {
|
|
4523
|
+
this.tooltipsDisplayText = '<Display text error>';
|
|
4506
4524
|
}
|
|
4507
|
-
return '<Display text error>';
|
|
4508
4525
|
};
|
|
4509
4526
|
ZcheckboxComponent.prototype.setTooltipsInfoSideBySide = function () {
|
|
4510
4527
|
if (this.tooltipsInfo) {
|
|
@@ -4522,7 +4539,7 @@
|
|
|
4522
4539
|
ZcheckboxComponent.decorators = [
|
|
4523
4540
|
{ type: i0.Component, args: [{
|
|
4524
4541
|
selector: "app-zcheckbox",
|
|
4525
|
-
template: "<ion-item [ngClass]=\"getClass(form, data)\" [formGroup]=\"form\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n <ion-label *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\"\r\n [attr.for]=\"data.Value\"\r\n [position]=\"data.LabelPosition ? data.LabelPosition : 'stacked'\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n [ngClass]=\"data.LabelDivClass\">\r\n {{data.Label}}\r\n <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n color=\"danger\">\r\n *\r\n </ion-text>\r\n <span kendoTooltip\r\n *ngIf=\"!isMobileScreen() && tooltipsInfo && showTooltipsInfoIcon\"\r\n [title]=\"
|
|
4542
|
+
template: "<ion-item [ngClass]=\"getClass(form, data)\" [formGroup]=\"form\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n <ion-label *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\"\r\n [attr.for]=\"data.Value\"\r\n [position]=\"data.LabelPosition ? data.LabelPosition : 'stacked'\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n [ngClass]=\"data.LabelDivClass\">\r\n {{data.Label}}\r\n <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n color=\"danger\">\r\n *\r\n </ion-text>\r\n <span kendoTooltip\r\n *ngIf=\"!isMobileScreen() && tooltipsInfo && showTooltipsInfoIcon\"\r\n [title]=\"tooltipsDisplayText\">\r\n <fa-icon [icon]=\"tooltipsDisplayIcon\"\r\n class=\"tooltipsinfo-icon\">\r\n </fa-icon>\r\n </span>\r\n </ion-label>\r\n <div class=\"ion-row divcheckbox\" [ngClass]=\"getCheckboxClass()\">\r\n <div *ngIf=\"useKendoSwitch\">\r\n <span>\r\n <kendo-switch [id]=\"data.Value\"\r\n [formControlName]=\"data.Value\"\r\n [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n (valueChange)=\"onSwitchChange($event)\"\r\n style=\"margin: 7px 0 0 0; width: 100%\"></kendo-switch>\r\n </span>\r\n </div>\r\n <div *ngIf=\"!useKendoSwitch\" [class]=\"setTooltipsInfoSideBySide()\">\r\n <!--<input kendoCheckBox\r\n type=\"checkbox\"\r\n [id]=\"data.Value\"\r\n [formControlName]=\"data.Value\"\r\n [disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n (valueChange)=\"onChange($event)\" />-->\r\n <ion-checkbox style=\"margin: 8px 0;\"\r\n [id]=\"data.Value\"\r\n [formControlName]=\"data.Value\"\r\n color=\"primary\"\r\n [attr.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n (ionChange)=\"onChange($event)\"></ion-checkbox>\r\n <kendo-label *ngIf=\"tooltipsInfo && !showTooltipsInfoIcon\"\r\n [text]=\"tooltipsDisplayText\"\r\n class=\"tooltipsinfo-text\"\r\n [style.color]=\"setTooltipsInfoColor()\">\r\n </kendo-label>\r\n <app-uivalidationmessage [group]=\"group\" [data]=\"data\" [form]=\"form\"></app-uivalidationmessage>\r\n </div>\r\n </div>\r\n</ion-item>\r\n",
|
|
4526
4543
|
styles: [".ionItem{display:flex;flex-flow:row wrap}.gridInlineEdit{--background:transparent}.item.sc-ion-label-md-h,.item .sc-ion-label-md-h{font-weight:var(--z-label-weight);color:var(--z-label-color);text-shadow:var(--z-label-shadow)}:host ::ng-deep ion-item .k-checkbox{margin:6px 0 0 1.5px;height:22px;width:22px}:host ::ng-deep ion-item .k-checkbox.k-checked,:host ::ng-deep ion-item .k-checkbox:checked{margin:6px 0 0 1.5px;height:22px;width:22px;background-color:#3880ff;border:0;outline:0}:host ::ng-deep ion-item .divcheckbox{justify-content:space-between;order:1}:host ::ng-deep ion-item .notooltipsinfo-adjustment{display:grid;grid-template-columns:.1fr;grid-gap:0;padding-top:1px}:host ::ng-deep ion-item .tooltipsinfo-text{text-align:justify;text-justify:inter-word;word-wrap:break-word;font-size:10px;margin:6px 0;float:right}:host ::ng-deep ion-item .tooltipsinfo-right{display:grid;grid-template-columns:.1fr .9fr;grid-gap:5px}:host ::ng-deep ion-item .tooltipsinfo-icon{padding-left:10px;color:#3880ff}"]
|
|
4527
4544
|
},] }
|
|
4528
4545
|
];
|
|
@@ -8577,6 +8594,7 @@
|
|
|
8577
8594
|
this.showTooltipsInfoIcon = false;
|
|
8578
8595
|
this.showTooltipsInfoBySide = false;
|
|
8579
8596
|
this.tooltipsInfo = null;
|
|
8597
|
+
this.tooltipsDisplayText = null;
|
|
8580
8598
|
this.items = [];
|
|
8581
8599
|
this.infinitezData = [];
|
|
8582
8600
|
this.infiniteSearchText = null;
|
|
@@ -8633,10 +8651,12 @@
|
|
|
8633
8651
|
if (this.tooltipsInfo) {
|
|
8634
8652
|
if ((this.tooltipsInfo.Icon != null || this.tooltipsInfo.Icon != undefined) && !this.isMobileScreen()) {
|
|
8635
8653
|
this.showTooltipsInfoIcon = true;
|
|
8654
|
+
this.setTooltipsInfoIcon();
|
|
8636
8655
|
}
|
|
8637
8656
|
if (this.tooltipsInfo.SideBySide) {
|
|
8638
8657
|
this.showTooltipsInfoBySide = true;
|
|
8639
8658
|
}
|
|
8659
|
+
this.setTooltipsDisplayText();
|
|
8640
8660
|
}
|
|
8641
8661
|
// [Dropdownlist Multiple] - auto close menu when lose focus.
|
|
8642
8662
|
if (this.data.AutoClose === false)
|
|
@@ -9049,22 +9069,33 @@
|
|
|
9049
9069
|
}
|
|
9050
9070
|
return "#acacac"; // default grey
|
|
9051
9071
|
};
|
|
9052
|
-
ZselectmultipleComponent.prototype.setTooltipsInfoIcon = function () {
|
|
9072
|
+
ZselectmultipleComponent.prototype.setTooltipsInfoIcon = function (displayIcon) {
|
|
9053
9073
|
if (this.showTooltipsInfoIcon) {
|
|
9054
9074
|
if (this.tooltipsInfo.Icon != '') {
|
|
9055
|
-
|
|
9075
|
+
if (displayIcon) {
|
|
9076
|
+
this.tooltipsDisplayIcon = displayIcon;
|
|
9077
|
+
}
|
|
9078
|
+
else {
|
|
9079
|
+
this.tooltipsDisplayIcon = this.tooltipsInfo.Icon;
|
|
9080
|
+
}
|
|
9056
9081
|
}
|
|
9057
9082
|
else {
|
|
9058
|
-
|
|
9083
|
+
this.tooltipsDisplayIcon = 'question-circle';
|
|
9059
9084
|
}
|
|
9060
9085
|
}
|
|
9061
|
-
return false;
|
|
9062
9086
|
};
|
|
9063
|
-
ZselectmultipleComponent.prototype.setTooltipsDisplayText = function () {
|
|
9087
|
+
ZselectmultipleComponent.prototype.setTooltipsDisplayText = function (displayText) {
|
|
9064
9088
|
if (this.tooltipsInfo) {
|
|
9065
|
-
|
|
9089
|
+
if (displayText) {
|
|
9090
|
+
this.tooltipsDisplayText = displayText;
|
|
9091
|
+
}
|
|
9092
|
+
else {
|
|
9093
|
+
this.tooltipsDisplayText = this.tooltipsInfo.DisplayText;
|
|
9094
|
+
}
|
|
9095
|
+
}
|
|
9096
|
+
else {
|
|
9097
|
+
this.tooltipsDisplayText = '<Display text error>';
|
|
9066
9098
|
}
|
|
9067
|
-
return '<Display text error>';
|
|
9068
9099
|
};
|
|
9069
9100
|
ZselectmultipleComponent.prototype.setTooltipsInfoSideBySide = function () {
|
|
9070
9101
|
if (this.tooltipsInfo) {
|
|
@@ -9079,7 +9110,7 @@
|
|
|
9079
9110
|
ZselectmultipleComponent.decorators = [
|
|
9080
9111
|
{ type: i0.Component, args: [{
|
|
9081
9112
|
selector: "app-zselectmultiple",
|
|
9082
|
-
template: "<ion-item [ngClass]=\"getClass(form, data)\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && isMobileScreen()\">\r\n\r\n <ion-label *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\" position=\"stacked\">\r\n {{data.Label}}\r\n <ion-text *ngIf=\"componentProperties.isRequired\" color=\"danger\">*</ion-text>\r\n </ion-label>\r\n\r\n <kendo-label *ngIf=\"data.TooltipsInfo && !showTooltipsInfoIcon && !showTooltipsInfoBySide\"\r\n [text]=\"setTooltipsDisplayText()\"\r\n [class]=\"setTooltipsInfoClass()\"\r\n [style.color]=\"setTooltipsInfoColor()\"></kendo-label>\r\n <div [class]=\"setTooltipsInfoSideBySide()\" *ngIf=\"!isLoading\">\r\n <div style=\"flex-grow: 1;\">\r\n <ionic-selectable #selectComponent item-content\r\n searchFailText=\"Nothing found :(\"\r\n headerColor=\"primary\"\r\n clearButtonText=\"Clear\"\r\n [(ngModel)]=\"group.zModel[data.Value]\"\r\n [id]=\"data.Value\"\r\n [items]=\"getItemsData()\"\r\n [itemValueField]=\"itemValueField\"\r\n [itemTextField]=\"itemTextField\"\r\n [canAddItem]=\"!!data.OnAddItem\"\r\n [canClear]=\"true\"\r\n [placeholder]=\"data.PlaceHolder\"\r\n [canSearch]=\"!data['disable-search']\"\r\n [shouldFocusSearchbar]=\"!data['disable-search']\"\r\n [hasInfiniteScroll]=\"!!data.HasInfiniteScroll\"\r\n [isMultiple]=\"data.Multiple\"\r\n [isEnabled]=\"!(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n [shouldStoreItemValue]=\"true\"\r\n (onSearch)=\"onSearch($event)\"\r\n (onInfiniteScroll)=\"getInfiniteData($event)\"\r\n (onAddItem)=\"onAddItem($event)\"\r\n (onChange)=\"onChange($event)\">\r\n\r\n <ng-template ionicSelectableItemIconTemplate\r\n let-item=\"item\"\r\n let-isItemSelected=\"isItemSelected\">\r\n <fa-icon slot=\"start\"\r\n class=\"isItemSelected\"\r\n size=\"sm\"\r\n [icon]=\"['far', isItemSelected ? 'check-circle': 'circle']\"\r\n [styles]=\"{'color': isItemSelected ? 'dodgerBlue' : 'lightGray'}\"></fa-icon>\r\n </ng-template>\r\n\r\n <ng-template ionicSelectableCloseButtonTemplate>\r\n <!-- <ion-icon name=\"close-circle\"></ion-icon> -->\r\n <fa-icon [icon]=\"'times-circle'\" size=\"md\"></fa-icon>\r\n </ng-template>\r\n\r\n <ng-template ionicSelectableTitleTemplate>\r\n {{data.Label}}\r\n <ion-text *ngIf=\"getIsRequiredValue()\" color=\"danger\">*</ion-text>\r\n </ng-template>\r\n\r\n <ng-template ionicSelectableItemTemplate let-item=\"item\">\r\n {{ getItemTemplate(item, data, group, itemValueField, itemTextField) }}\r\n <!-- <ng-template zselectitemelement [item]=\"item\"></ng-template> -->\r\n </ng-template>\r\n\r\n <!--<ng-template ionicSelectableFooterTemplate>\r\n <ion-toolbar>\r\n <ion-row>\r\n <ion-col>\r\n <ion-button expand=\"full\" ng-reflect-disabled=\"false\" ng-reflect-expand=\"full\" class=\"button button-full button-solid ion-activatable ion-focusable hydrated\" (click)=\"clearItems()\">\r\n Clear\r\n </ion-button>\r\n </ion-col>\r\n <ion-col>\r\n <ion-button expand=\"full\" ng-reflect-disabled=\"false\" ng-reflect-expand=\"full\" class=\"button button-full button-solid ion-activatable ion-focusable hydrated\" (click)=\"confirmItems()\">\r\n OK\r\n </ion-button>\r\n </ion-col>\r\n </ion-row>\r\n </ion-toolbar>\r\n </ng-template>-->\r\n </ionic-selectable>\r\n </div>\r\n <app-uivalidationmessage [group]=\"group\" [data]=\"data\" [form]=\"form\"></app-uivalidationmessage>\r\n <!-- side by side and desktop tooltipsinfo -->\r\n <kendo-label *ngIf=\"tooltipsInfo && !showTooltipsInfoIcon && showTooltipsInfoBySide\"\r\n [text]=\"setTooltipsDisplayText()\"\r\n [class]=\"setTooltipsInfoClass()\"\r\n [style.color]=\"setTooltipsInfoColor()\"></kendo-label>\r\n </div>\r\n</ion-item>\r\n\r\n\r\n\r\n<ion-item [ngClass]=\"getClass(form, data)\" [formGroup]=\"form\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && !isMobileScreen()\" [ngClass]=\"getIon_InvalidClass(form, data)\">\r\n <ion-label [attr.for]=\"data.Value\" *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\" position=\"stacked\">\r\n {{data.Label}}\r\n <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\" color=\"danger\">*</ion-text>\r\n <span kendoTooltip\r\n *ngIf=\"data.TooltipsInfo && showTooltipsInfoIcon\"\r\n [title]=\"setTooltipsDisplayText()\">\r\n <fa-icon [icon]=\"setTooltipsInfoIcon()\"\r\n class=\"tooltipsinfo-icon\">\r\n </fa-icon>\r\n </span>\r\n </ion-label>\r\n <!-- mobile tooltipsinfo below label-->\r\n <div [class]=\"setTooltipsInfoSideBySide()\">\r\n <div style=\"flex: 1;\">\r\n <kendo-combobox *ngIf=\"!data.Multiple\"\r\n #comboboxComponent\r\n [data]=\"getItemsData()\"\r\n [valueField]=\"itemValueField\"\r\n [textField]=\"itemTextField\"\r\n [formControlName]=\"data.Value\"\r\n [valuePrimitive]=\"true\"\r\n [placeholder]=\"data.PlaceHolder\"\r\n [allowCustom]=\"allowCustomValue\"\r\n [suggest]=\"true\"\r\n [filterable]=\"!!data.HasInfiniteScroll\"\r\n [openOnFocus]=\"disableOpenOnFocus(comboboxComponent)\"\r\n [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n [ngClass]=\"{'disabled' : (!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)}\"\r\n [loading]=\"isLoading\"\r\n (valueChange)=\"onValueChange($event)\"\r\n (filterChange)=\"handleFilter($event)\"\r\n [virtual]=\"virtual\"\r\n (open)=\"handleOpen()\"\r\n (close)=\"handleClose()\"\r\n (blur)=\"handleBlur()\"\r\n style=\"margin-top: 7px; width: 100%;\">\r\n <ng-template kendoComboBoxItemTemplate let-dataItem>\r\n {{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}\r\n <!-- <span class=\"template\">{{ dataItem.value }}</span> {{ dataItem.text }} -->\r\n </ng-template>\r\n <ng-template kendoTextBoxSuffixTemplate>\r\n\r\n <!-- For Validation feature -->\r\n <app-uivalidationmessage [group]=\"group\"\r\n [data]=\"data\"\r\n [form]=\"form\"\r\n class=\"validation-icon\"></app-uivalidationmessage>\r\n </ng-template>\r\n </kendo-combobox>\r\n <kendo-multiselect *ngIf=\"data.Multiple\"\r\n [data]=\"getItemsData()\"\r\n [valueField]=\"itemValueField\"\r\n [textField]=\"itemTextField\"\r\n [formControlName]=\"data.Value\"\r\n [valuePrimitive]=\"true\"\r\n [placeholder]=\"data.PlaceHolder\"\r\n [allowCustom]=\"allowCustomValue\"\r\n [filterable]=\"!!data.HasInfiniteScroll\"\r\n [checkboxes]=\"data.EnableCheckbox\"\r\n [loading]=\"isLoading\"\r\n [autoClose]=\"autoClose\"\r\n [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n [ngClass]=\"{'disabled' : (!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)}\"\r\n (valueChange)=\"onValueChange($event)\"\r\n (filterChange)=\"handleFilter($event)\"\r\n (open)=\"handleOpen()\"\r\n (close)=\"handleClose()\"\r\n (blur)=\"handleBlur()\"\r\n style=\"margin-top: 7px; width: 100%;\">\r\n <ng-template kendoMultiSelectItemTemplate let-dataItem>\r\n {{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}\r\n <!-- <span class=\"template\">{{ dataItem.value }}</span> {{ dataItem.text }} -->\r\n </ng-template>\r\n </kendo-multiselect>\r\n </div>\r\n\r\n <div *ngFor=\"let item of iconList\">\r\n <div kendoTooltip style=\"text-align: center; padding-top: 10px;\"\r\n showOn=\"hover\"\r\n [tooltipWidth]=\"item.Width\"\r\n [position]=\"item.Position\">\r\n <span *ngIf=\"!!item && item.Color\"\r\n (click)=\"onIconClick(item.Click)\"\r\n [title]=\"item.Tooltip\"\r\n style=\"margin-top: 10px;\">\r\n <fa-icon [icon]=\"item.Icon\"\r\n [ngStyle]=\"{'padding': '4px 6px', 'color': (item.Color ? item.Color : 'black')}\"></fa-icon>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <app-uivalidationmessage [group]=\"group\"\r\n [data]=\"data\"\r\n [form]=\"form\"></app-uivalidationmessage>\r\n\r\n <!-- side by side and desktop tooltipsinfo -->\r\n <kendo-label *ngIf=\"tooltipsInfo && !showTooltipsInfoIcon && ((showTooltipsInfoBySide && isMobileScreen()) || !isMobileScreen())\"\r\n [text]=\"setTooltipsDisplayText()\"\r\n [class]=\"setTooltipsInfoClass()\"\r\n [style.color]=\"setTooltipsInfoColor()\"></kendo-label>\r\n\r\n </div>\r\n</ion-item>\r\n",
|
|
9113
|
+
template: "<ion-item [ngClass]=\"getClass(form, data)\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && isMobileScreen()\">\r\n\r\n <ion-label *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\" position=\"stacked\">\r\n {{data.Label}}\r\n <ion-text *ngIf=\"componentProperties.isRequired\" color=\"danger\">*</ion-text>\r\n </ion-label>\r\n\r\n <kendo-label *ngIf=\"data.TooltipsInfo && !showTooltipsInfoIcon && !showTooltipsInfoBySide\"\r\n [text]=\"tooltipsDisplayText\"\r\n [class]=\"setTooltipsInfoClass()\"\r\n [style.color]=\"setTooltipsInfoColor()\"></kendo-label>\r\n <div [class]=\"setTooltipsInfoSideBySide()\" *ngIf=\"!isLoading\">\r\n <div style=\"flex-grow: 1;\">\r\n <ionic-selectable #selectComponent item-content\r\n searchFailText=\"Nothing found :(\"\r\n headerColor=\"primary\"\r\n clearButtonText=\"Clear\"\r\n [(ngModel)]=\"group.zModel[data.Value]\"\r\n [id]=\"data.Value\"\r\n [items]=\"getItemsData()\"\r\n [itemValueField]=\"itemValueField\"\r\n [itemTextField]=\"itemTextField\"\r\n [canAddItem]=\"!!data.OnAddItem\"\r\n [canClear]=\"true\"\r\n [placeholder]=\"data.PlaceHolder\"\r\n [canSearch]=\"!data['disable-search']\"\r\n [shouldFocusSearchbar]=\"!data['disable-search']\"\r\n [hasInfiniteScroll]=\"!!data.HasInfiniteScroll\"\r\n [isMultiple]=\"data.Multiple\"\r\n [isEnabled]=\"!(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n [shouldStoreItemValue]=\"true\"\r\n (onSearch)=\"onSearch($event)\"\r\n (onInfiniteScroll)=\"getInfiniteData($event)\"\r\n (onAddItem)=\"onAddItem($event)\"\r\n (onChange)=\"onChange($event)\">\r\n\r\n <ng-template ionicSelectableItemIconTemplate\r\n let-item=\"item\"\r\n let-isItemSelected=\"isItemSelected\">\r\n <fa-icon slot=\"start\"\r\n class=\"isItemSelected\"\r\n size=\"sm\"\r\n [icon]=\"['far', isItemSelected ? 'check-circle': 'circle']\"\r\n [styles]=\"{'color': isItemSelected ? 'dodgerBlue' : 'lightGray'}\"></fa-icon>\r\n </ng-template>\r\n\r\n <ng-template ionicSelectableCloseButtonTemplate>\r\n <!-- <ion-icon name=\"close-circle\"></ion-icon> -->\r\n <fa-icon [icon]=\"'times-circle'\" size=\"md\"></fa-icon>\r\n </ng-template>\r\n\r\n <ng-template ionicSelectableTitleTemplate>\r\n {{data.Label}}\r\n <ion-text *ngIf=\"getIsRequiredValue()\" color=\"danger\">*</ion-text>\r\n </ng-template>\r\n\r\n <ng-template ionicSelectableItemTemplate let-item=\"item\">\r\n {{ getItemTemplate(item, data, group, itemValueField, itemTextField) }}\r\n <!-- <ng-template zselectitemelement [item]=\"item\"></ng-template> -->\r\n </ng-template>\r\n\r\n <!--<ng-template ionicSelectableFooterTemplate>\r\n <ion-toolbar>\r\n <ion-row>\r\n <ion-col>\r\n <ion-button expand=\"full\" ng-reflect-disabled=\"false\" ng-reflect-expand=\"full\" class=\"button button-full button-solid ion-activatable ion-focusable hydrated\" (click)=\"clearItems()\">\r\n Clear\r\n </ion-button>\r\n </ion-col>\r\n <ion-col>\r\n <ion-button expand=\"full\" ng-reflect-disabled=\"false\" ng-reflect-expand=\"full\" class=\"button button-full button-solid ion-activatable ion-focusable hydrated\" (click)=\"confirmItems()\">\r\n OK\r\n </ion-button>\r\n </ion-col>\r\n </ion-row>\r\n </ion-toolbar>\r\n </ng-template>-->\r\n </ionic-selectable>\r\n </div>\r\n <app-uivalidationmessage [group]=\"group\" [data]=\"data\" [form]=\"form\"></app-uivalidationmessage>\r\n <!-- side by side and desktop tooltipsinfo -->\r\n <kendo-label *ngIf=\"tooltipsInfo && !showTooltipsInfoIcon && showTooltipsInfoBySide\"\r\n [text]=\"tooltipsDisplayText\"\r\n [class]=\"setTooltipsInfoClass()\"\r\n [style.color]=\"setTooltipsInfoColor()\"></kendo-label>\r\n </div>\r\n</ion-item>\r\n\r\n\r\n\r\n<ion-item [ngClass]=\"getClass(form, data)\" [formGroup]=\"form\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && !isMobileScreen()\" [ngClass]=\"getIon_InvalidClass(form, data)\">\r\n <ion-label [attr.for]=\"data.Value\" *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\" position=\"stacked\">\r\n {{data.Label}}\r\n <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\" color=\"danger\">*</ion-text>\r\n <span kendoTooltip\r\n *ngIf=\"data.TooltipsInfo && showTooltipsInfoIcon\"\r\n [title]=\"tooltipsDisplayText\">\r\n <fa-icon [icon]=\"tooltipsDisplayIcon\"\r\n class=\"tooltipsinfo-icon\">\r\n </fa-icon>\r\n </span>\r\n </ion-label>\r\n <!-- mobile tooltipsinfo below label-->\r\n <div [class]=\"setTooltipsInfoSideBySide()\">\r\n <div style=\"flex: 1;\">\r\n <kendo-combobox *ngIf=\"!data.Multiple\"\r\n #comboboxComponent\r\n [data]=\"getItemsData()\"\r\n [valueField]=\"itemValueField\"\r\n [textField]=\"itemTextField\"\r\n [formControlName]=\"data.Value\"\r\n [valuePrimitive]=\"true\"\r\n [placeholder]=\"data.PlaceHolder\"\r\n [allowCustom]=\"allowCustomValue\"\r\n [suggest]=\"true\"\r\n [filterable]=\"!!data.HasInfiniteScroll\"\r\n [openOnFocus]=\"disableOpenOnFocus(comboboxComponent)\"\r\n [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n [ngClass]=\"{'disabled' : (!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)}\"\r\n [loading]=\"isLoading\"\r\n (valueChange)=\"onValueChange($event)\"\r\n (filterChange)=\"handleFilter($event)\"\r\n [virtual]=\"virtual\"\r\n (open)=\"handleOpen()\"\r\n (close)=\"handleClose()\"\r\n (blur)=\"handleBlur()\"\r\n style=\"margin-top: 7px; width: 100%;\">\r\n <ng-template kendoComboBoxItemTemplate let-dataItem>\r\n {{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}\r\n <!-- <span class=\"template\">{{ dataItem.value }}</span> {{ dataItem.text }} -->\r\n </ng-template>\r\n <ng-template kendoTextBoxSuffixTemplate>\r\n\r\n <!-- For Validation feature -->\r\n <app-uivalidationmessage [group]=\"group\"\r\n [data]=\"data\"\r\n [form]=\"form\"\r\n class=\"validation-icon\"></app-uivalidationmessage>\r\n </ng-template>\r\n </kendo-combobox>\r\n <kendo-multiselect *ngIf=\"data.Multiple\"\r\n [data]=\"getItemsData()\"\r\n [valueField]=\"itemValueField\"\r\n [textField]=\"itemTextField\"\r\n [formControlName]=\"data.Value\"\r\n [valuePrimitive]=\"true\"\r\n [placeholder]=\"data.PlaceHolder\"\r\n [allowCustom]=\"allowCustomValue\"\r\n [filterable]=\"!!data.HasInfiniteScroll\"\r\n [checkboxes]=\"data.EnableCheckbox\"\r\n [loading]=\"isLoading\"\r\n [autoClose]=\"autoClose\"\r\n [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n [ngClass]=\"{'disabled' : (!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)}\"\r\n (valueChange)=\"onValueChange($event)\"\r\n (filterChange)=\"handleFilter($event)\"\r\n (open)=\"handleOpen()\"\r\n (close)=\"handleClose()\"\r\n (blur)=\"handleBlur()\"\r\n style=\"margin-top: 7px; width: 100%;\">\r\n <ng-template kendoMultiSelectItemTemplate let-dataItem>\r\n {{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}\r\n <!-- <span class=\"template\">{{ dataItem.value }}</span> {{ dataItem.text }} -->\r\n </ng-template>\r\n </kendo-multiselect>\r\n </div>\r\n\r\n <div *ngFor=\"let item of iconList\">\r\n <div kendoTooltip style=\"text-align: center; padding-top: 10px;\"\r\n showOn=\"hover\"\r\n [tooltipWidth]=\"item.Width\"\r\n [position]=\"item.Position\">\r\n <span *ngIf=\"!!item && item.Color\"\r\n (click)=\"onIconClick(item.Click)\"\r\n [title]=\"item.Tooltip\"\r\n style=\"margin-top: 10px;\">\r\n <fa-icon [icon]=\"item.Icon\"\r\n [ngStyle]=\"{'padding': '4px 6px', 'color': (item.Color ? item.Color : 'black')}\"></fa-icon>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <app-uivalidationmessage [group]=\"group\"\r\n [data]=\"data\"\r\n [form]=\"form\"></app-uivalidationmessage>\r\n\r\n <!-- side by side and desktop tooltipsinfo -->\r\n <kendo-label *ngIf=\"tooltipsInfo && !showTooltipsInfoIcon && ((showTooltipsInfoBySide && isMobileScreen()) || !isMobileScreen())\"\r\n [text]=\"tooltipsDisplayText\"\r\n [class]=\"setTooltipsInfoClass()\"\r\n [style.color]=\"setTooltipsInfoColor()\"></kendo-label>\r\n\r\n </div>\r\n</ion-item>\r\n",
|
|
9083
9114
|
styles: ["fa-icon.isItemSelected{display:inline-block;width:1em;height:1em;contain:strict;fill:currentcolor;box-sizing:initial!important;font-size:20px;margin-top:10px;margin-bottom:14px;margin-right:unset;margin-inline-end:20px}.gridInlineEdit{--background:transparent}.item.sc-ion-label-md-h,.item .sc-ion-label-md-h{font-weight:var(--z-label-weight);color:var(--z-label-color);text-shadow:var(--z-label-shadow)}.divselectmultiple{justify-content:space-between;width:100%;color:#000}.tooltipsinfo-text{margin-left:5px}.tooltipsinfo-text,.tooltipsinfo-text-wide{text-align:justify;text-justify:inter-word;word-wrap:break-word;font-size:10px;margin-top:6px}.tooltipsinfo-text-wide{width:100%;padding-bottom:5px}.tooltipsinfo-right{display:grid;grid-template-columns:1.2fr .05fr 1fr;grid-gap:0}.tooltipsinfo-icon{padding-left:10px;color:#3880ff}"]
|
|
9084
9115
|
},] }
|
|
9085
9116
|
];
|
|
@@ -9297,6 +9328,7 @@
|
|
|
9297
9328
|
this.showTooltipsInfoIcon = false;
|
|
9298
9329
|
this.showTooltipsInfoBySide = false;
|
|
9299
9330
|
this.tooltipsInfo = null;
|
|
9331
|
+
this.tooltipsDisplayText = null;
|
|
9300
9332
|
this.clearButtonIcon = "time-circle";
|
|
9301
9333
|
this.setEnable = function (status) {
|
|
9302
9334
|
var fc = _this.group.form.controls[_this.data.Value];
|
|
@@ -9329,10 +9361,12 @@
|
|
|
9329
9361
|
if (this.tooltipsInfo) {
|
|
9330
9362
|
if ((this.tooltipsInfo.Icon != null || this.tooltipsInfo.Icon != undefined) && !this.isMobileScreen()) {
|
|
9331
9363
|
this.showTooltipsInfoIcon = true;
|
|
9364
|
+
this.setTooltipsInfoIcon();
|
|
9332
9365
|
}
|
|
9333
9366
|
if (this.tooltipsInfo.SideBySide) {
|
|
9334
9367
|
this.showTooltipsInfoBySide = true;
|
|
9335
9368
|
}
|
|
9369
|
+
this.setTooltipsDisplayText();
|
|
9336
9370
|
}
|
|
9337
9371
|
// Handle Clickable Icons
|
|
9338
9372
|
this.iconList = this.data.ClickableIcons;
|
|
@@ -9515,22 +9549,33 @@
|
|
|
9515
9549
|
}
|
|
9516
9550
|
return "#acacac"; // default grey
|
|
9517
9551
|
};
|
|
9518
|
-
ZtextComponent.prototype.setTooltipsInfoIcon = function () {
|
|
9552
|
+
ZtextComponent.prototype.setTooltipsInfoIcon = function (displayIcon) {
|
|
9519
9553
|
if (this.showTooltipsInfoIcon) {
|
|
9520
9554
|
if (this.tooltipsInfo.Icon != '') {
|
|
9521
|
-
|
|
9555
|
+
if (displayIcon) {
|
|
9556
|
+
this.tooltipsDisplayIcon = displayIcon;
|
|
9557
|
+
}
|
|
9558
|
+
else {
|
|
9559
|
+
this.tooltipsDisplayIcon = this.tooltipsInfo.Icon;
|
|
9560
|
+
}
|
|
9522
9561
|
}
|
|
9523
9562
|
else {
|
|
9524
|
-
|
|
9563
|
+
this.tooltipsDisplayIcon = 'question-circle';
|
|
9525
9564
|
}
|
|
9526
9565
|
}
|
|
9527
|
-
return false;
|
|
9528
9566
|
};
|
|
9529
|
-
ZtextComponent.prototype.setTooltipsDisplayText = function () {
|
|
9567
|
+
ZtextComponent.prototype.setTooltipsDisplayText = function (displayText) {
|
|
9530
9568
|
if (this.tooltipsInfo) {
|
|
9531
|
-
|
|
9569
|
+
if (displayText) {
|
|
9570
|
+
this.tooltipsDisplayText = displayText;
|
|
9571
|
+
}
|
|
9572
|
+
else {
|
|
9573
|
+
this.tooltipsDisplayText = this.tooltipsInfo.DisplayText;
|
|
9574
|
+
}
|
|
9575
|
+
}
|
|
9576
|
+
else {
|
|
9577
|
+
this.tooltipsDisplayText = '<Display text error>';
|
|
9532
9578
|
}
|
|
9533
|
-
return '<Display text error>';
|
|
9534
9579
|
};
|
|
9535
9580
|
ZtextComponent.prototype.setTooltipsInfoSideBySide = function () {
|
|
9536
9581
|
if (this.tooltipsInfo) {
|
|
@@ -9545,7 +9590,7 @@
|
|
|
9545
9590
|
ZtextComponent.decorators = [
|
|
9546
9591
|
{ type: i0.Component, args: [{
|
|
9547
9592
|
selector: "app-ztext",
|
|
9548
|
-
template: "<ion-item [formGroup]=\"form\"\r\n *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n [ngClass]=\"getIon_InvalidClass(form, data)\">\r\n <ion-label [attr.for]=\"data.Value\"\r\n *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\"\r\n [position]=\"data.LabelPosition ? data.LabelPosition : 'stacked'\">\r\n {{data.Label}}\r\n <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\" color=\"danger\">*</ion-text>\r\n <!-- add icon for tooltips -->\r\n <span kendoTooltip\r\n *ngIf=\"data.TooltipsInfo && showTooltipsInfoIcon\"\r\n [title]=\"
|
|
9593
|
+
template: "<ion-item [formGroup]=\"form\"\r\n *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n [ngClass]=\"getIon_InvalidClass(form, data)\">\r\n <ion-label [attr.for]=\"data.Value\"\r\n *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\"\r\n [position]=\"data.LabelPosition ? data.LabelPosition : 'stacked'\">\r\n {{data.Label}}\r\n <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\" color=\"danger\">*</ion-text>\r\n <!-- add icon for tooltips -->\r\n <span kendoTooltip\r\n *ngIf=\"data.TooltipsInfo && showTooltipsInfoIcon\"\r\n [title]=\"tooltipsDisplayText\">\r\n <fa-icon [icon]=\"tooltipsDisplayIcon\"\r\n class=\"tooltipsinfo-icon\">\r\n </fa-icon>\r\n </span>\r\n </ion-label>\r\n <!-- mobile tooltipsinfo below label-->\r\n <kendo-label *ngIf=\"data.TooltipsInfo && !showTooltipsInfoIcon && !showTooltipsInfoBySide && isMobileScreen()\"\r\n [text]=\"tooltipsDisplayText\"\r\n [class]=\"setTooltipsInfoClass()\"\r\n [style.color]=\"setTooltipsInfoColor()\"></kendo-label>\r\n <!-- <ion-input [name]=\"data.Name\" [required]=\"data.IsRequired\" [placeholder]=\"data.PlaceHolder\" [type]=\"mapInputType(data.Type)\"\r\n [(ngModel)]=\"group.zModel[data.Value]\" [minlength]=\"data.MinLength\" [maxlength]=\"data.MaxLength\"\r\n [readonly]=\"data.ReadOnly\" [inputmode]=\"mapInputMode(data.Type)\"></ion-input> -->\r\n <div [class]=\"setTooltipsInfoSideBySide()\">\r\n <div style=\"flex: 1;\">\r\n <ion-input *ngIf=\"isMobileScreen()\"\r\n [id]=\"data.Value\"\r\n [formControlName]=\"data.Value\"\r\n [type]=\"mapInputType(data.Type)\"\r\n [placeholder]=\"data.PlaceHolder\"\r\n clearOnEdit\r\n [minlength]=\"data.MinLength\"\r\n [maxlength]=\"data.MaxLength\"\r\n [attr.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n [ngStyle]=\"{'text-align': getStyle(data.RightAlign ? true : false)}\"\r\n [inputmode]=\"mapInputMode(data.Type)\"\r\n (click)='textboxOnClick()'\r\n (ionChange)=\"onChange($event)\">\r\n </ion-input>\r\n <kendo-textbox *ngIf=\"!isMobileScreen()\"\r\n [id]=\"data.Value\"\r\n [formControlName]=\"data.Value\"\r\n [type]=\"mapInputType(data.Type)\"\r\n [placeholder]=\"data.PlaceHolder\"\r\n [clearButton]=\"showClearButton\"\r\n [minlength]=\"data.MinLength\"\r\n [maxlength]=\"data.MaxLength\"\r\n [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n [ngClass]=\"{'disabled' : (!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)}\"\r\n [ngStyle]=\"{'text-align': getStyle(data.RightAlign ? true : false)}\"\r\n (input)=\"onChange($event)\"\r\n (click)=\"textboxOnClick()\"\r\n [class]=\"setTextboxClass()\">\r\n\r\n <ng-template kendoTextBoxSuffixTemplate\r\n *ngIf=\"adornmentList\">\r\n <!-- For Validation feature -->\r\n <!--<app-uivalidationmessage [group]=\"group\"\r\n [data]=\"data\"\r\n [form]=\"form\"\r\n class=\"validation-icon\"></app-uivalidationmessage>-->\r\n <button kendoButton\r\n *ngIf=\"data.OnClick\"\r\n look=\"clear\"\r\n icon=\"close-circle\"\r\n class=\"textbox-clearbutton\"\r\n (click)=\"readOnlyOnClear()\"></button>\r\n <!-- For Adornments feature -->\r\n <div *ngFor=\"let adornment of adornmentList\">\r\n <kendo-textbox-separator *ngIf=\"!adornment.HideSeperator\"\r\n class=\"textbox-separator\"></kendo-textbox-separator>\r\n <button kendoButton\r\n [look]=\"adornmentLook(adornment)\"\r\n [icon]=\"adornment.Icon\"\r\n (click)=\"onAdornmentClick(adornment)\"\r\n [style.background-color]=\"getAdornmentBackgroundColor(adornment)\"></button>\r\n </div>\r\n </ng-template>\r\n </kendo-textbox>\r\n </div>\r\n <!-- For Validation feature pending change to inner textbox -->\r\n <app-uivalidationmessage *ngIf=\"!isMobileScreen()\"\r\n [group]=\"group\"\r\n [data]=\"data\"\r\n [form]=\"form\" ></app-uivalidationmessage>\r\n\r\n <!-- For Mobile Validation feature -->\r\n <app-uivalidationmessage *ngIf=\"isMobileScreen()\"\r\n [group]=\"group\"\r\n [data]=\"data\"\r\n [form]=\"form\"\r\n class=\"validation-icon-mobile\"></app-uivalidationmessage>\r\n\r\n <!-- mobile section for Adornments feature -->\r\n <div *ngFor=\"let adornment of adornmentList\">\r\n <button kendoButton\r\n *ngIf=\"isMobileScreen()\"\r\n [look]=\"adornmentLook(adornment)\"\r\n [icon]=\"adornment.Icon\"\r\n (click)=\"onAdornmentClick(adornment)\"\r\n [style.background-color]=\"getAdornmentBackgroundColor(adornment)\"\r\n class=\"adornments-icon-mobile\"></button>\r\n </div>\r\n\r\n <!-- Icon button feature -->\r\n <div *ngFor=\"let item of iconList\">\r\n <div kendoTooltip\r\n class=\"icon-button\"\r\n showOn=\"hover\"\r\n [tooltipWidth]=\"item.Width\"\r\n [position]=\"item.Position\">\r\n\r\n <span *ngIf=\"!!item \"\r\n (click)=\"onIconClick(item.Click)\"\r\n [title]=\"item.Tooltip\"\r\n style=\"margin-top: 10px;\">\r\n\r\n <fa-icon [icon]=\"item.Icon\"\r\n [ngStyle]=\"{'padding': '4px 6px', 'color': (item.Color ? item.Color : 'black')}\"></fa-icon>\r\n </span>\r\n </div>\r\n </div>\r\n <!-- side by side and desktop tooltipsinfo -->\r\n <kendo-label *ngIf=\"tooltipsInfo && !showTooltipsInfoIcon && ((showTooltipsInfoBySide && isMobileScreen()) || !isMobileScreen())\"\r\n [text]=\"tooltipsDisplayText\"\r\n [class]=\"setTooltipsInfoClass()\"\r\n [style.color]=\"setTooltipsInfoColor()\"></kendo-label>\r\n </div>\r\n</ion-item>\r\n",
|
|
9549
9594
|
styles: [".item.sc-ion-label-md-h,.item .sc-ion-label-md-h{font-weight:var(--z-label-weight);color:var(--z-label-color);text-shadow:var(--z-label-shadow)}.divtextbox{justify-content:space-between;width:100%}.k-textbox{color:var(--z-text-color)}.notmobile-textbox{margin:7px 0 0;width:100%}.notmobile-textbox-onfocus{margin:7px 0 0;width:100%;color:var(--z-text-color)!important;background-color:#fff!important}.validation-icon{margin-top:0;margin-right:5px}.validation-icon-mobile{margin-top:5px;margin-right:5px}.textbox-separator{margin-top:0}.textbox-clearbutton{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;outline:0;cursor:pointer;opacity:.5}.textbox-clearbutton:hover{opacity:1!important}.icon-button{text-align:center;padding-top:10px}.adornments-icon-mobile{margin-bottom:0;margin-left:5px;width:28px;height:28px}.tooltipsinfo-text{margin-left:5px;width:50%}.tooltipsinfo-text,.tooltipsinfo-text-wide{text-align:justify;text-justify:inter-word;word-wrap:break-word;font-size:10px;margin-top:6px}.tooltipsinfo-text-wide{width:100%;padding-bottom:5px}.tooltipsinfo-right{display:grid;grid-template-columns:3fr 1fr 2fr;grid-gap:0}.tooltipsinfo-icon{padding-left:10px;color:#3880ff}"]
|
|
9550
9595
|
},] }
|
|
9551
9596
|
];
|
|
@@ -10700,6 +10745,8 @@
|
|
|
10700
10745
|
this.showFileList = true;
|
|
10701
10746
|
this.fileList = [];
|
|
10702
10747
|
this.restrictions = {
|
|
10748
|
+
minFileSize: 1,
|
|
10749
|
+
maxFileSize: 4194304,
|
|
10703
10750
|
allowedExtensions: [
|
|
10704
10751
|
"jpg",
|
|
10705
10752
|
"jpeg",
|
|
@@ -10986,12 +11033,16 @@
|
|
|
10986
11033
|
}
|
|
10987
11034
|
}
|
|
10988
11035
|
};
|
|
11036
|
+
ZuploadComponent.prototype.clearFiles = function () {
|
|
11037
|
+
this.uploadComponent.clearFiles();
|
|
11038
|
+
this.group['zupload_' + this.data.Value] = this.fileList;
|
|
11039
|
+
};
|
|
10989
11040
|
return ZuploadComponent;
|
|
10990
11041
|
}());
|
|
10991
11042
|
ZuploadComponent.decorators = [
|
|
10992
11043
|
{ type: i0.Component, args: [{
|
|
10993
11044
|
selector: "app-zupload",
|
|
10994
|
-
template: "<ion-item [formGroup]=\"form\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" [ngClass]=\"getIon_InvalidClass(form, data)\" style=\"margin-left: -15px;\">\r\n <ion-label [attr.for]=\"data.Value\" *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\" position=\"stacked\" style=\"margin-bottom: 10px;\">\r\n {{data.Label}} <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\" color=\"danger\">*</ion-text>\r\n </ion-label>\r\n <div class=\"ion-row\" style=\"justify-content: space-between; width: 100%\">\r\n <span style=\"flex: 1;\">\r\n <kendo-upload *ngIf=\"!data.SelectFileOnly\"\r\n [autoUpload]=\"isAutoUpload\"\r\n [saveUrl]=\"uploadSaveUrl\"\r\n [removeUrl]=\"uploadRemoveUrl\"\r\n [restrictions]=\"restrictions\"\r\n [formControlName]=\"data.Value\"\r\n [multiple]=\"isMultiple\"\r\n [chunkable]=\"chunkSettings\"\r\n [showFileList]=\"showFileList\"\r\n (select)=\"selectEventHandler($event)\"\r\n (remove)=\"onRemove($event)\"\r\n (success)=\"onSuccess($event)\"\r\n (upload)=\"uploadEventHandler($event)\">\r\n </kendo-upload>\r\n\r\n <kendo-fileselect *ngIf=\"data.SelectFileOnly\"\r\n (select)=\"selectEventHandler($event)\"\r\n (remove)=\"onRemove($event)\"\r\n (valueChange)=\"onChange($event)\"\r\n [restrictions]=\"restrictions\" >\r\n </kendo-fileselect>\r\n </span>\r\n </div>\r\n</ion-item>\r\n<br />\r\n<!--<div class=\"wrap\" *ngIf=\"data.EnableCompression\">\r\n <ion-label>Enable Compression: </ion-label>\r\n <ion-checkbox style=\"margin: -5px 0;\" color=\"primary\" (ionChange)=\"toogleEnableCompression($event)\"></ion-checkbox>\r\n</div>-->\r\n<ion-label *ngIf=\"imagePreviews.length\" position=\"stacked\">\r\n Image Preview:\r\n</ion-label>\r\n<div *ngIf=\"imagePreviews.length\" >\r\n <img *ngFor=\"let image of imagePreviews\"\r\n [src]=\"image.src\"\r\n alt=\"image preview\"\r\n height=\"100\"\r\n style=\"margin: 5px; border: 1px solid gray;\"/>\r\n</div>\r\n",
|
|
11045
|
+
template: "<ion-item [formGroup]=\"form\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" [ngClass]=\"getIon_InvalidClass(form, data)\" style=\"margin-left: -15px;\">\r\n <ion-label [attr.for]=\"data.Value\" *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\" position=\"stacked\" style=\"margin-bottom: 10px;\">\r\n {{data.Label}} <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\" color=\"danger\">*</ion-text>\r\n </ion-label>\r\n <div class=\"ion-row\" style=\"justify-content: space-between; width: 100%\">\r\n <span style=\"flex: 1;\">\r\n <kendo-upload #uploadComponent\r\n *ngIf=\"!data.SelectFileOnly\"\r\n [id]=\"data.Value\"\r\n [autoUpload]=\"isAutoUpload\"\r\n [saveUrl]=\"uploadSaveUrl\"\r\n [removeUrl]=\"uploadRemoveUrl\"\r\n [restrictions]=\"restrictions\"\r\n [formControlName]=\"data.Value\"\r\n [multiple]=\"isMultiple\"\r\n [chunkable]=\"chunkSettings\"\r\n [showFileList]=\"showFileList\"\r\n (select)=\"selectEventHandler($event)\"\r\n (remove)=\"onRemove($event)\" \r\n (success)=\"onSuccess($event)\"\r\n (upload)=\"uploadEventHandler($event)\">\r\n </kendo-upload>\r\n\r\n <kendo-fileselect #uploadComponent\r\n *ngIf=\"data.SelectFileOnly\"\r\n [id]=\"data.Value\"\r\n (select)=\"selectEventHandler($event)\"\r\n (remove)=\"onRemove($event)\" \r\n (valueChange)=\"onChange($event)\"\r\n [restrictions]=\"restrictions\" >\r\n </kendo-fileselect>\r\n </span>\r\n </div>\r\n</ion-item>\r\n<br />\r\n<!--<div class=\"wrap\" *ngIf=\"data.EnableCompression\">\r\n <ion-label>Enable Compression: </ion-label>\r\n <ion-checkbox style=\"margin: -5px 0;\" color=\"primary\" (ionChange)=\"toogleEnableCompression($event)\"></ion-checkbox>\r\n</div>-->\r\n<ion-label *ngIf=\"imagePreviews.length\" position=\"stacked\">\r\n Image Preview:\r\n</ion-label>\r\n<div *ngIf=\"imagePreviews.length\" >\r\n <img *ngFor=\"let image of imagePreviews\"\r\n [src]=\"image.src\"\r\n alt=\"image preview\"\r\n height=\"100\"\r\n style=\"margin: 5px; border: 1px solid gray;\"/>\r\n</div>\r\n",
|
|
10995
11046
|
styles: [""]
|
|
10996
11047
|
},] }
|
|
10997
11048
|
];
|
|
@@ -11004,7 +11055,8 @@
|
|
|
11004
11055
|
ZuploadComponent.propDecorators = {
|
|
11005
11056
|
data: [{ type: i0.Input }],
|
|
11006
11057
|
group: [{ type: i0.Input }],
|
|
11007
|
-
form: [{ type: i0.Input }]
|
|
11058
|
+
form: [{ type: i0.Input }],
|
|
11059
|
+
uploadComponent: [{ type: i0.ViewChild, args: ["uploadComponent",] }]
|
|
11008
11060
|
};
|
|
11009
11061
|
|
|
11010
11062
|
/********** Angular **********/
|