mmhglobal-dynamicform 1.1.36 → 1.1.37
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 +3 -0
- package/bundles/mmhglobal-dynamicform.umd.js +67 -25
- 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/zselectmultiple/zselectmultiple.component.js +23 -9
- package/esm2015/lib/ztext/ztext.component.js +23 -9
- package/fesm2015/mmhglobal-dynamicform.js +67 -25
- 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/mmhglobal-dynamicform.metadata.json +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4404,6 +4404,7 @@
|
|
|
4404
4404
|
this.showTooltipsInfoIcon = false;
|
|
4405
4405
|
this.showTooltipsInfoBySide = false;
|
|
4406
4406
|
this.tooltipsInfo = null;
|
|
4407
|
+
this.tooltipsDisplayText = null;
|
|
4407
4408
|
this.useKendoSwitch = false;
|
|
4408
4409
|
this.setEnable = function (status) {
|
|
4409
4410
|
var fc = _this.group.form.controls[_this.data.Value];
|
|
@@ -4426,10 +4427,12 @@
|
|
|
4426
4427
|
if (this.tooltipsInfo) {
|
|
4427
4428
|
if ((this.tooltipsInfo['Icon'] != null || this.tooltipsInfo['Icon'] != undefined) && !this.isMobileScreen()) {
|
|
4428
4429
|
this.showTooltipsInfoIcon = true;
|
|
4430
|
+
this.setTooltipsInfoIcon();
|
|
4429
4431
|
}
|
|
4430
4432
|
if (this.tooltipsInfo['SideBySide']) {
|
|
4431
4433
|
this.showTooltipsInfoBySide = true;
|
|
4432
4434
|
}
|
|
4435
|
+
this.setTooltipsDisplayText();
|
|
4433
4436
|
}
|
|
4434
4437
|
this.useKendoSwitch = this.data.UseKendoSwitch ? this.data.UseKendoSwitch : false;
|
|
4435
4438
|
};
|
|
@@ -4492,22 +4495,33 @@
|
|
|
4492
4495
|
}
|
|
4493
4496
|
return "#acacac"; // default grey
|
|
4494
4497
|
};
|
|
4495
|
-
ZcheckboxComponent.prototype.setTooltipsInfoIcon = function () {
|
|
4498
|
+
ZcheckboxComponent.prototype.setTooltipsInfoIcon = function (displayIcon) {
|
|
4496
4499
|
if (this.showTooltipsInfoIcon) {
|
|
4497
|
-
if (this.tooltipsInfo
|
|
4498
|
-
|
|
4500
|
+
if (this.tooltipsInfo.Icon != '') {
|
|
4501
|
+
if (displayIcon) {
|
|
4502
|
+
this.tooltipsDisplayIcon = displayIcon;
|
|
4503
|
+
}
|
|
4504
|
+
else {
|
|
4505
|
+
this.tooltipsDisplayIcon = this.tooltipsInfo.Icon;
|
|
4506
|
+
}
|
|
4499
4507
|
}
|
|
4500
4508
|
else {
|
|
4501
|
-
|
|
4509
|
+
this.tooltipsDisplayIcon = 'question-circle';
|
|
4502
4510
|
}
|
|
4503
|
-
return false;
|
|
4504
4511
|
}
|
|
4505
4512
|
};
|
|
4506
|
-
ZcheckboxComponent.prototype.setTooltipsDisplayText = function () {
|
|
4513
|
+
ZcheckboxComponent.prototype.setTooltipsDisplayText = function (displayText) {
|
|
4507
4514
|
if (this.tooltipsInfo) {
|
|
4508
|
-
|
|
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>';
|
|
4509
4524
|
}
|
|
4510
|
-
return '<Display text error>';
|
|
4511
4525
|
};
|
|
4512
4526
|
ZcheckboxComponent.prototype.setTooltipsInfoSideBySide = function () {
|
|
4513
4527
|
if (this.tooltipsInfo) {
|
|
@@ -4525,7 +4539,7 @@
|
|
|
4525
4539
|
ZcheckboxComponent.decorators = [
|
|
4526
4540
|
{ type: i0.Component, args: [{
|
|
4527
4541
|
selector: "app-zcheckbox",
|
|
4528
|
-
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",
|
|
4529
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}"]
|
|
4530
4544
|
},] }
|
|
4531
4545
|
];
|
|
@@ -8580,6 +8594,7 @@
|
|
|
8580
8594
|
this.showTooltipsInfoIcon = false;
|
|
8581
8595
|
this.showTooltipsInfoBySide = false;
|
|
8582
8596
|
this.tooltipsInfo = null;
|
|
8597
|
+
this.tooltipsDisplayText = null;
|
|
8583
8598
|
this.items = [];
|
|
8584
8599
|
this.infinitezData = [];
|
|
8585
8600
|
this.infiniteSearchText = null;
|
|
@@ -8636,10 +8651,12 @@
|
|
|
8636
8651
|
if (this.tooltipsInfo) {
|
|
8637
8652
|
if ((this.tooltipsInfo.Icon != null || this.tooltipsInfo.Icon != undefined) && !this.isMobileScreen()) {
|
|
8638
8653
|
this.showTooltipsInfoIcon = true;
|
|
8654
|
+
this.setTooltipsInfoIcon();
|
|
8639
8655
|
}
|
|
8640
8656
|
if (this.tooltipsInfo.SideBySide) {
|
|
8641
8657
|
this.showTooltipsInfoBySide = true;
|
|
8642
8658
|
}
|
|
8659
|
+
this.setTooltipsDisplayText();
|
|
8643
8660
|
}
|
|
8644
8661
|
// [Dropdownlist Multiple] - auto close menu when lose focus.
|
|
8645
8662
|
if (this.data.AutoClose === false)
|
|
@@ -9052,22 +9069,33 @@
|
|
|
9052
9069
|
}
|
|
9053
9070
|
return "#acacac"; // default grey
|
|
9054
9071
|
};
|
|
9055
|
-
ZselectmultipleComponent.prototype.setTooltipsInfoIcon = function () {
|
|
9072
|
+
ZselectmultipleComponent.prototype.setTooltipsInfoIcon = function (displayIcon) {
|
|
9056
9073
|
if (this.showTooltipsInfoIcon) {
|
|
9057
9074
|
if (this.tooltipsInfo.Icon != '') {
|
|
9058
|
-
|
|
9075
|
+
if (displayIcon) {
|
|
9076
|
+
this.tooltipsDisplayIcon = displayIcon;
|
|
9077
|
+
}
|
|
9078
|
+
else {
|
|
9079
|
+
this.tooltipsDisplayIcon = this.tooltipsInfo.Icon;
|
|
9080
|
+
}
|
|
9059
9081
|
}
|
|
9060
9082
|
else {
|
|
9061
|
-
|
|
9083
|
+
this.tooltipsDisplayIcon = 'question-circle';
|
|
9062
9084
|
}
|
|
9063
9085
|
}
|
|
9064
|
-
return false;
|
|
9065
9086
|
};
|
|
9066
|
-
ZselectmultipleComponent.prototype.setTooltipsDisplayText = function () {
|
|
9087
|
+
ZselectmultipleComponent.prototype.setTooltipsDisplayText = function (displayText) {
|
|
9067
9088
|
if (this.tooltipsInfo) {
|
|
9068
|
-
|
|
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>';
|
|
9069
9098
|
}
|
|
9070
|
-
return '<Display text error>';
|
|
9071
9099
|
};
|
|
9072
9100
|
ZselectmultipleComponent.prototype.setTooltipsInfoSideBySide = function () {
|
|
9073
9101
|
if (this.tooltipsInfo) {
|
|
@@ -9082,7 +9110,7 @@
|
|
|
9082
9110
|
ZselectmultipleComponent.decorators = [
|
|
9083
9111
|
{ type: i0.Component, args: [{
|
|
9084
9112
|
selector: "app-zselectmultiple",
|
|
9085
|
-
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",
|
|
9086
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}"]
|
|
9087
9115
|
},] }
|
|
9088
9116
|
];
|
|
@@ -9300,6 +9328,7 @@
|
|
|
9300
9328
|
this.showTooltipsInfoIcon = false;
|
|
9301
9329
|
this.showTooltipsInfoBySide = false;
|
|
9302
9330
|
this.tooltipsInfo = null;
|
|
9331
|
+
this.tooltipsDisplayText = null;
|
|
9303
9332
|
this.clearButtonIcon = "time-circle";
|
|
9304
9333
|
this.setEnable = function (status) {
|
|
9305
9334
|
var fc = _this.group.form.controls[_this.data.Value];
|
|
@@ -9332,10 +9361,12 @@
|
|
|
9332
9361
|
if (this.tooltipsInfo) {
|
|
9333
9362
|
if ((this.tooltipsInfo.Icon != null || this.tooltipsInfo.Icon != undefined) && !this.isMobileScreen()) {
|
|
9334
9363
|
this.showTooltipsInfoIcon = true;
|
|
9364
|
+
this.setTooltipsInfoIcon();
|
|
9335
9365
|
}
|
|
9336
9366
|
if (this.tooltipsInfo.SideBySide) {
|
|
9337
9367
|
this.showTooltipsInfoBySide = true;
|
|
9338
9368
|
}
|
|
9369
|
+
this.setTooltipsDisplayText();
|
|
9339
9370
|
}
|
|
9340
9371
|
// Handle Clickable Icons
|
|
9341
9372
|
this.iconList = this.data.ClickableIcons;
|
|
@@ -9518,22 +9549,33 @@
|
|
|
9518
9549
|
}
|
|
9519
9550
|
return "#acacac"; // default grey
|
|
9520
9551
|
};
|
|
9521
|
-
ZtextComponent.prototype.setTooltipsInfoIcon = function () {
|
|
9552
|
+
ZtextComponent.prototype.setTooltipsInfoIcon = function (displayIcon) {
|
|
9522
9553
|
if (this.showTooltipsInfoIcon) {
|
|
9523
9554
|
if (this.tooltipsInfo.Icon != '') {
|
|
9524
|
-
|
|
9555
|
+
if (displayIcon) {
|
|
9556
|
+
this.tooltipsDisplayIcon = displayIcon;
|
|
9557
|
+
}
|
|
9558
|
+
else {
|
|
9559
|
+
this.tooltipsDisplayIcon = this.tooltipsInfo.Icon;
|
|
9560
|
+
}
|
|
9525
9561
|
}
|
|
9526
9562
|
else {
|
|
9527
|
-
|
|
9563
|
+
this.tooltipsDisplayIcon = 'question-circle';
|
|
9528
9564
|
}
|
|
9529
9565
|
}
|
|
9530
|
-
return false;
|
|
9531
9566
|
};
|
|
9532
|
-
ZtextComponent.prototype.setTooltipsDisplayText = function () {
|
|
9567
|
+
ZtextComponent.prototype.setTooltipsDisplayText = function (displayText) {
|
|
9533
9568
|
if (this.tooltipsInfo) {
|
|
9534
|
-
|
|
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>';
|
|
9535
9578
|
}
|
|
9536
|
-
return '<Display text error>';
|
|
9537
9579
|
};
|
|
9538
9580
|
ZtextComponent.prototype.setTooltipsInfoSideBySide = function () {
|
|
9539
9581
|
if (this.tooltipsInfo) {
|
|
@@ -9548,7 +9590,7 @@
|
|
|
9548
9590
|
ZtextComponent.decorators = [
|
|
9549
9591
|
{ type: i0.Component, args: [{
|
|
9550
9592
|
selector: "app-ztext",
|
|
9551
|
-
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",
|
|
9552
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}"]
|
|
9553
9595
|
},] }
|
|
9554
9596
|
];
|