mmhglobal-dynamicform 2.23.2 → 2.23.3
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 +5 -0
- package/esm2020/lib/components/fieldbase.component.mjs +4 -3
- package/esm2020/lib/embed-components/input-field-addons/input-field-addons.component.mjs +3 -3
- package/esm2020/lib/uicontainer/uicontainer.component.mjs +9 -3
- package/esm2020/lib/ztextarea/ztextarea.component.mjs +10 -4
- package/fesm2015/mmhglobal-dynamicform.mjs +22 -9
- package/fesm2015/mmhglobal-dynamicform.mjs.map +1 -1
- package/fesm2020/mmhglobal-dynamicform.mjs +22 -9
- package/fesm2020/mmhglobal-dynamicform.mjs.map +1 -1
- package/lib/uicontainer/uicontainer.component.d.ts +3 -1
- package/package.json +1 -1
|
@@ -7,7 +7,7 @@ import { NavigationStart, NavigationEnd, NavigationError, RouterModule } from '@
|
|
|
7
7
|
import { BehaviorSubject, forkJoin, of, tap as tap$1, map as map$1, first, isObservable, switchMap as switchMap$1, interval, takeWhile, from, Subject, delay as delay$1, filter, auditTime } from 'rxjs';
|
|
8
8
|
import { tap, switchMap, map, take, delay, concatMap, ignoreElements } from 'rxjs/operators';
|
|
9
9
|
import * as i2 from 'mmhglobal-zcore';
|
|
10
|
-
import { ZGroup, FormType, ZComponentHelper, MESSAGETYPE, ActionType, DefaultMessage, DefaultDialogTitle, Delimiter, ZSelectPostApiParams,
|
|
10
|
+
import { ZGroup, FormType, ZComponentHelper, MESSAGETYPE, ActionType, DefaultMessage, DefaultDialogTitle, Delimiter, ZSelectPostApiParams, ComponentType as ComponentType$1, ZComponentProperties, SignalType, InternalComponentType_DropDown, UploadMetaData, AttachmentConfig, DefaultPageSettingParams, ZCoreModule } from 'mmhglobal-zcore';
|
|
11
11
|
import * as i2$1 from '@ionic/angular';
|
|
12
12
|
import { IonicModule } from '@ionic/angular';
|
|
13
13
|
import * as i3 from 'mmhglobal-zmodal';
|
|
@@ -4234,7 +4234,8 @@ class FieldBase {
|
|
|
4234
4234
|
this.setEnable = (status) => {
|
|
4235
4235
|
var _a, _b;
|
|
4236
4236
|
const fc = (_b = (_a = this.group) === null || _a === void 0 ? void 0 : _a.form) === null || _b === void 0 ? void 0 : _b.controls[this.data.Value];
|
|
4237
|
-
|
|
4237
|
+
const componentTypeNotToDisable = [ComponentType$1.textarea.toString()];
|
|
4238
|
+
if (fc && !componentTypeNotToDisable.includes(this.data.Type)) {
|
|
4238
4239
|
status ? fc.enable() : fc.disable();
|
|
4239
4240
|
}
|
|
4240
4241
|
this.componentProperties.isReadOnly = !status;
|
|
@@ -5063,6 +5064,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
5063
5064
|
class UicontainerComponent {
|
|
5064
5065
|
constructor(uiSignalService) {
|
|
5065
5066
|
this.uiSignalService = uiSignalService;
|
|
5067
|
+
this.scrollX = true;
|
|
5068
|
+
this.scrollY = true;
|
|
5066
5069
|
this.isEmbeddedPage = false;
|
|
5067
5070
|
}
|
|
5068
5071
|
ngOnInit() {
|
|
@@ -5074,12 +5077,16 @@ class UicontainerComponent {
|
|
|
5074
5077
|
}
|
|
5075
5078
|
}
|
|
5076
5079
|
UicontainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: UicontainerComponent, deps: [{ token: i2.UISignalService }], target: i0.ɵɵFactoryTarget.Component });
|
|
5077
|
-
UicontainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: UicontainerComponent, selector: "app-uicontainer", inputs: { group: "group" }, ngImport: i0, template: "<ng-template #mainPage>\r\n <div id=\"mainPage\">\r\n <div class=\"loadingPage\" *ngIf=\"group.isTriggered\">\r\n <processing-record-loader></processing-record-loader>\r\n </div>\r\n <div class=\"recordpage\">\r\n <app-uiheader [group]=\"group\"></app-uiheader>\r\n\r\n <ion-content class=\"app-contain\" id=\"ion-content-main-page\" [scrollEvents]=\"true\"\r\n (ionScrollStart)=\"handleScrollStart($event)\">\r\n <app-uicontent [group]=\"group\"></app-uicontent>\r\n </ion-content>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #embeddedPage>\r\n <app-uicontent id=\"ion-content-form-page\" [group]=\"group\"></app-uicontent>\r\n</ng-template>\r\n\r\n<ng-container *ngTemplateOutlet=\"isEmbeddedPage ? embeddedPage : mainPage\"></ng-container>\r\n", styles: ["#ion-content-main-page{height:calc(100vh - var(--ion-header-height))}\n"], components: [{ type: ProcessingRecordLoaderComponent, selector: "processing-record-loader" }, { type: UiheaderComponent, selector: "app-uiheader", inputs: ["group", "topFormHeader"] }, { type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { type: UicontentComponent, selector: "app-uicontent", inputs: ["group", "cssClass"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
|
|
5080
|
+
UicontainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: UicontainerComponent, selector: "app-uicontainer", inputs: { group: "group", scrollX: "scrollX", scrollY: "scrollY" }, ngImport: i0, template: "<ng-template #mainPage>\r\n <div id=\"mainPage\">\r\n <div class=\"loadingPage\" *ngIf=\"group.isTriggered\">\r\n <processing-record-loader></processing-record-loader>\r\n </div>\r\n <div class=\"recordpage\">\r\n <app-uiheader [group]=\"group\"></app-uiheader>\r\n\r\n <ion-content class=\"app-contain\" id=\"ion-content-main-page\" [scrollEvents]=\"true\"\r\n (ionScrollStart)=\"handleScrollStart($event)\" [scrollX]=\"scrollX\" [scrollY]=\"scrollY\">\r\n <app-uicontent [group]=\"group\"></app-uicontent>\r\n </ion-content>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #embeddedPage>\r\n <app-uicontent id=\"ion-content-form-page\" [group]=\"group\"></app-uicontent>\r\n</ng-template>\r\n\r\n<ng-container *ngTemplateOutlet=\"isEmbeddedPage ? embeddedPage : mainPage\"></ng-container>\r\n", styles: ["#ion-content-main-page{height:calc(100vh - var(--ion-header-height))}\n"], components: [{ type: ProcessingRecordLoaderComponent, selector: "processing-record-loader" }, { type: UiheaderComponent, selector: "app-uiheader", inputs: ["group", "topFormHeader"] }, { type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { type: UicontentComponent, selector: "app-uicontent", inputs: ["group", "cssClass"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
|
|
5078
5081
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: UicontainerComponent, decorators: [{
|
|
5079
5082
|
type: Component,
|
|
5080
|
-
args: [{ selector: 'app-uicontainer', template: "<ng-template #mainPage>\r\n <div id=\"mainPage\">\r\n <div class=\"loadingPage\" *ngIf=\"group.isTriggered\">\r\n <processing-record-loader></processing-record-loader>\r\n </div>\r\n <div class=\"recordpage\">\r\n <app-uiheader [group]=\"group\"></app-uiheader>\r\n\r\n <ion-content class=\"app-contain\" id=\"ion-content-main-page\" [scrollEvents]=\"true\"\r\n (ionScrollStart)=\"handleScrollStart($event)\">\r\n <app-uicontent [group]=\"group\"></app-uicontent>\r\n </ion-content>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #embeddedPage>\r\n <app-uicontent id=\"ion-content-form-page\" [group]=\"group\"></app-uicontent>\r\n</ng-template>\r\n\r\n<ng-container *ngTemplateOutlet=\"isEmbeddedPage ? embeddedPage : mainPage\"></ng-container>\r\n", styles: ["#ion-content-main-page{height:calc(100vh - var(--ion-header-height))}\n"] }]
|
|
5083
|
+
args: [{ selector: 'app-uicontainer', template: "<ng-template #mainPage>\r\n <div id=\"mainPage\">\r\n <div class=\"loadingPage\" *ngIf=\"group.isTriggered\">\r\n <processing-record-loader></processing-record-loader>\r\n </div>\r\n <div class=\"recordpage\">\r\n <app-uiheader [group]=\"group\"></app-uiheader>\r\n\r\n <ion-content class=\"app-contain\" id=\"ion-content-main-page\" [scrollEvents]=\"true\"\r\n (ionScrollStart)=\"handleScrollStart($event)\" [scrollX]=\"scrollX\" [scrollY]=\"scrollY\">\r\n <app-uicontent [group]=\"group\"></app-uicontent>\r\n </ion-content>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #embeddedPage>\r\n <app-uicontent id=\"ion-content-form-page\" [group]=\"group\"></app-uicontent>\r\n</ng-template>\r\n\r\n<ng-container *ngTemplateOutlet=\"isEmbeddedPage ? embeddedPage : mainPage\"></ng-container>\r\n", styles: ["#ion-content-main-page{height:calc(100vh - var(--ion-header-height))}\n"] }]
|
|
5081
5084
|
}], ctorParameters: function () { return [{ type: i2.UISignalService }]; }, propDecorators: { group: [{
|
|
5082
5085
|
type: Input
|
|
5086
|
+
}], scrollX: [{
|
|
5087
|
+
type: Input
|
|
5088
|
+
}], scrollY: [{
|
|
5089
|
+
type: Input
|
|
5083
5090
|
}] } });
|
|
5084
5091
|
|
|
5085
5092
|
/********** Angular **********/
|
|
@@ -8150,7 +8157,13 @@ class ZtextareaComponent extends InputFieldBase {
|
|
|
8150
8157
|
this.componentService.decrementComponentCounterForField(this.data);
|
|
8151
8158
|
}
|
|
8152
8159
|
setCharCounterDisplayStr() {
|
|
8153
|
-
|
|
8160
|
+
let characterCount = 0;
|
|
8161
|
+
if (!!this.data.MinLengthIgnoreSpace) {
|
|
8162
|
+
characterCount = ZComponentHelper.getValueWithoutSpaces(this.group.zModel[this.data.Value]).length;
|
|
8163
|
+
}
|
|
8164
|
+
else {
|
|
8165
|
+
characterCount = ZComponentHelper.getValueWithoutContinuousSpaces(this.group.zModel[this.data.Value]).length;
|
|
8166
|
+
}
|
|
8154
8167
|
this.charCounterDisplayStr = `${characterCount} ${this.data.MaxLength ? (' / ' + this.data.MaxLength) : ''}`;
|
|
8155
8168
|
}
|
|
8156
8169
|
onChange(event, fieldValue) {
|
|
@@ -8166,10 +8179,10 @@ class ZtextareaComponent extends InputFieldBase {
|
|
|
8166
8179
|
}
|
|
8167
8180
|
}
|
|
8168
8181
|
ZtextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZtextareaComponent, deps: [{ token: ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
|
|
8169
|
-
ZtextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZtextareaComponent, selector: "app-ztextarea", viewQueries: [{ propertyName: "textarea", first: true, predicate: ["textarea"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"ztextarea-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n <!-- Ion Textarea for Mobile Screen -->\r\n <ion-textarea *ngIf=\"isMobileScreen()\"\r\n class=\"e1tag-style1\"\r\n [attr.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n [formControlName]=\"data.Value\"\r\n [id]=\"data.Value\"\r\n [maxlength]=\"data.MaxLength\"\r\n [minlength]=\"data.MinLength\"\r\n [placeholder]=\"data.PlaceHolder\"\r\n [rows]=\"data.textAreaRows\"\r\n [style]=\"componentProperties.style.style1\">\r\n </ion-textarea>\r\n\r\n <!-- Kendo Textarea for Non-Mobile Screen -->\r\n <kendo-textarea *ngIf=\"!isMobileScreen()\"\r\n #textarea\r\n class=\"input-field e1tag-style1\"\r\n [autoSize]=\"!data.textAreaRows\"\r\n [formControlName]=\"data.Value\"\r\n [id]=\"data.Value\"\r\n [maxlength]=\"data.MaxLength\"\r\n [minlength]=\"data.MinLength\"\r\n [placeholder]=\"data.PlaceHolder\"\r\n [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n [resizable]=\"data.Resizable || 'none'\"\r\n [rows]=\"data.textAreaRows\"\r\n [style.height]=\"data.Height ? data.Height : 'auto'\"\r\n [style]=\"componentProperties.style.style1\"\r\n (click)=\"onItemClick($event)\"\r\n (valueChange)=\"onChange($event, $event)\">\r\n\r\n <kendo-textarea-suffix *ngIf=\"data.IsShowCharacterCount\"\r\n class=\"character-counter-container e1tag-style2\"\r\n [style]=\"componentProperties.style.style2\">\r\n <span class=\"character-counter e1tag-style3\"\r\n [style]=\"componentProperties.style.style3\">{{charCounterDisplayStr}}</span>\r\n </kendo-textarea-suffix>\r\n </kendo-textarea>\r\n</div>\r\n", styles: [".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)}.character-counter-container{display:flex;justify-content:flex-end;padding:2px 5px;border-top-width:1px;border-top-style:solid;border-color:inherit;font-size:calc(var(--content-font-size) - 1px);color:var(--z-placeholder-color);background:#f0f0f0}\n"], components: [{ type: i2$1.IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "debounce", "disabled", "enterkeyhint", "inputmode", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "spellcheck", "value", "wrap"] }, { type: i3$5.TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "rows", "cols", "maxlength", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { type: i3$5.TextAreaSuffixComponent, selector: "kendo-textarea-suffix", exportAs: ["kendoTextAreaSuffix"] }], directives: [{ type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i4$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }] });
|
|
8182
|
+
ZtextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZtextareaComponent, selector: "app-ztextarea", viewQueries: [{ propertyName: "textarea", first: true, predicate: ["textarea"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"ztextarea-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n <!-- Ion Textarea for Mobile Screen -->\r\n <ion-textarea *ngIf=\"isMobileScreen()\"\r\n class=\"e1tag-style1\"\r\n [attr.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n [formControlName]=\"data.Value\"\r\n [id]=\"data.Value\"\r\n [maxlength]=\"data.MaxLength\"\r\n [minlength]=\"data.MinLength\"\r\n [placeholder]=\"data.PlaceHolder\"\r\n [rows]=\"data.textAreaRows\"\r\n [style]=\"componentProperties.style.style1\">\r\n </ion-textarea>\r\n\r\n <!-- Kendo Textarea for Non-Mobile Screen -->\r\n <kendo-textarea *ngIf=\"!isMobileScreen()\"\r\n #textarea\r\n class=\"input-field e1tag-style1\"\r\n [autoSize]=\"!data.textAreaRows\"\r\n [formControlName]=\"data.Value\"\r\n [id]=\"data.Value\"\r\n [maxlength]=\"data.MaxLength\"\r\n [minlength]=\"data.MinLength\"\r\n [placeholder]=\"data.PlaceHolder\"\r\n [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n [class.textarea-readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n [resizable]=\"data.Resizable || 'none'\"\r\n [rows]=\"data.textAreaRows\"\r\n [style.height]=\"data.Height ? data.Height : 'auto'\"\r\n [style]=\"componentProperties.style.style1\"\r\n (click)=\"onItemClick($event)\"\r\n (valueChange)=\"onChange($event, $event)\">\r\n\r\n <kendo-textarea-suffix *ngIf=\"data.IsShowCharacterCount\"\r\n class=\"character-counter-container e1tag-style2\"\r\n [style]=\"componentProperties.style.style2\">\r\n <span class=\"character-counter e1tag-style3\"\r\n [style]=\"componentProperties.style.style3\">{{charCounterDisplayStr}}</span>\r\n </kendo-textarea-suffix>\r\n </kendo-textarea>\r\n</div>\r\n", styles: [".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)}.character-counter-container{display:flex;justify-content:flex-end;padding:2px 5px;border-top-width:1px;border-top-style:solid;border-color:inherit;font-size:calc(var(--content-font-size) - 1px);color:var(--z-placeholder-color);background:#f0f0f0}kendo-textarea.textarea-readonly{background-color:#f2f2f2!important;color:#666!important}\n"], components: [{ type: i2$1.IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "debounce", "disabled", "enterkeyhint", "inputmode", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "spellcheck", "value", "wrap"] }, { type: i3$5.TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "rows", "cols", "maxlength", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { type: i3$5.TextAreaSuffixComponent, selector: "kendo-textarea-suffix", exportAs: ["kendoTextAreaSuffix"] }], directives: [{ type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i4$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }] });
|
|
8170
8183
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZtextareaComponent, decorators: [{
|
|
8171
8184
|
type: Component,
|
|
8172
|
-
args: [{ selector: 'app-ztextarea', template: "<div [formGroup]=\"form\" class=\"ztextarea-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n <!-- Ion Textarea for Mobile Screen -->\r\n <ion-textarea *ngIf=\"isMobileScreen()\"\r\n class=\"e1tag-style1\"\r\n [attr.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n [formControlName]=\"data.Value\"\r\n [id]=\"data.Value\"\r\n [maxlength]=\"data.MaxLength\"\r\n [minlength]=\"data.MinLength\"\r\n [placeholder]=\"data.PlaceHolder\"\r\n [rows]=\"data.textAreaRows\"\r\n [style]=\"componentProperties.style.style1\">\r\n </ion-textarea>\r\n\r\n <!-- Kendo Textarea for Non-Mobile Screen -->\r\n <kendo-textarea *ngIf=\"!isMobileScreen()\"\r\n #textarea\r\n class=\"input-field e1tag-style1\"\r\n [autoSize]=\"!data.textAreaRows\"\r\n [formControlName]=\"data.Value\"\r\n [id]=\"data.Value\"\r\n [maxlength]=\"data.MaxLength\"\r\n [minlength]=\"data.MinLength\"\r\n [placeholder]=\"data.PlaceHolder\"\r\n [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n [resizable]=\"data.Resizable || 'none'\"\r\n [rows]=\"data.textAreaRows\"\r\n [style.height]=\"data.Height ? data.Height : 'auto'\"\r\n [style]=\"componentProperties.style.style1\"\r\n (click)=\"onItemClick($event)\"\r\n (valueChange)=\"onChange($event, $event)\">\r\n\r\n <kendo-textarea-suffix *ngIf=\"data.IsShowCharacterCount\"\r\n class=\"character-counter-container e1tag-style2\"\r\n [style]=\"componentProperties.style.style2\">\r\n <span class=\"character-counter e1tag-style3\"\r\n [style]=\"componentProperties.style.style3\">{{charCounterDisplayStr}}</span>\r\n </kendo-textarea-suffix>\r\n </kendo-textarea>\r\n</div>\r\n", styles: [".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)}.character-counter-container{display:flex;justify-content:flex-end;padding:2px 5px;border-top-width:1px;border-top-style:solid;border-color:inherit;font-size:calc(var(--content-font-size) - 1px);color:var(--z-placeholder-color);background:#f0f0f0}\n"] }]
|
|
8185
|
+
args: [{ selector: 'app-ztextarea', template: "<div [formGroup]=\"form\" class=\"ztextarea-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n <!-- Ion Textarea for Mobile Screen -->\r\n <ion-textarea *ngIf=\"isMobileScreen()\"\r\n class=\"e1tag-style1\"\r\n [attr.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n [formControlName]=\"data.Value\"\r\n [id]=\"data.Value\"\r\n [maxlength]=\"data.MaxLength\"\r\n [minlength]=\"data.MinLength\"\r\n [placeholder]=\"data.PlaceHolder\"\r\n [rows]=\"data.textAreaRows\"\r\n [style]=\"componentProperties.style.style1\">\r\n </ion-textarea>\r\n\r\n <!-- Kendo Textarea for Non-Mobile Screen -->\r\n <kendo-textarea *ngIf=\"!isMobileScreen()\"\r\n #textarea\r\n class=\"input-field e1tag-style1\"\r\n [autoSize]=\"!data.textAreaRows\"\r\n [formControlName]=\"data.Value\"\r\n [id]=\"data.Value\"\r\n [maxlength]=\"data.MaxLength\"\r\n [minlength]=\"data.MinLength\"\r\n [placeholder]=\"data.PlaceHolder\"\r\n [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n [class.textarea-readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n [resizable]=\"data.Resizable || 'none'\"\r\n [rows]=\"data.textAreaRows\"\r\n [style.height]=\"data.Height ? data.Height : 'auto'\"\r\n [style]=\"componentProperties.style.style1\"\r\n (click)=\"onItemClick($event)\"\r\n (valueChange)=\"onChange($event, $event)\">\r\n\r\n <kendo-textarea-suffix *ngIf=\"data.IsShowCharacterCount\"\r\n class=\"character-counter-container e1tag-style2\"\r\n [style]=\"componentProperties.style.style2\">\r\n <span class=\"character-counter e1tag-style3\"\r\n [style]=\"componentProperties.style.style3\">{{charCounterDisplayStr}}</span>\r\n </kendo-textarea-suffix>\r\n </kendo-textarea>\r\n</div>\r\n", styles: [".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)}.character-counter-container{display:flex;justify-content:flex-end;padding:2px 5px;border-top-width:1px;border-top-style:solid;border-color:inherit;font-size:calc(var(--content-font-size) - 1px);color:var(--z-placeholder-color);background:#f0f0f0}kendo-textarea.textarea-readonly{background-color:#f2f2f2!important;color:#666!important}\n"] }]
|
|
8173
8186
|
}], ctorParameters: function () { return [{ type: ZComponentService }]; }, propDecorators: { textarea: [{
|
|
8174
8187
|
type: ViewChild,
|
|
8175
8188
|
args: ["textarea"]
|
|
@@ -8795,10 +8808,10 @@ class InputFieldAddOnsComponent extends InputFieldBase {
|
|
|
8795
8808
|
}
|
|
8796
8809
|
}
|
|
8797
8810
|
InputFieldAddOnsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputFieldAddOnsComponent, deps: [{ token: ZComponentService }, { token: i2.FontAweSomeService }, { token: i2.TranslationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
8798
|
-
InputFieldAddOnsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: InputFieldAddOnsComponent, selector: "app-input-field-addons", inputs: { position: "position", addOn: "addOn" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"'addons-container ' + position\" *ngIf=\"addOn\">\r\n <div class=\"addons-icon\" *ngIf=\"addOn.IconList\">\r\n <div *ngFor=\"let item of addOn.IconList\">\r\n <div kendoTooltip class=\"icon-button\" showOn=\"hover\" [
|
|
8811
|
+
InputFieldAddOnsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: InputFieldAddOnsComponent, selector: "app-input-field-addons", inputs: { position: "position", addOn: "addOn" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"'addons-container ' + position\" *ngIf=\"addOn\">\r\n <div class=\"addons-icon\" *ngIf=\"addOn.IconList\">\r\n <div *ngFor=\"let item of addOn.IconList\">\r\n <div kendoTooltip class=\"icon-button\" showOn=\"hover\" [position]=\"item.ToolTipPosition ?? 'top'\">\r\n <span (click)=\"onIconClick(item.Click)\" [title]=\"item.ToolTipText\" [style]=\"item.Style\">\r\n <fa-icon [icon]=\"item.Icon\">\r\n </fa-icon>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"addons-text\" *ngIf=\"addOn.TextList\">\r\n <div *ngFor=\"let item of addOn.TextList\">\r\n <div kendoTooltip class=\"icon-button\" showOn=\"hover\" [position]=\"item.ToolTipPosition ?? 'top'\">\r\n <span (click)=\"onIconClick(item.Click)\" [title]=\"item.ToolTipText\" [style]=\"item.Style\">\r\n {{item.Text}}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"addons-buttons\" *ngIf=\"addOn.ButtonList\">\r\n <ion-button *ngFor=\"let button of addOn.ButtonList; let i = button\" [fill]=\"button.fill\" [ngClass]=\"button.class\"\r\n [color]=\"button.color\" [size]=\"button.Size || 'small'\" strong=\"false\" (click)=\"onIconClick(button.Click)\"\r\n [hidden]=\"!button.Visible\" [disabled]=\"group.isTriggered || button.Disabled\" [style]=\"button.Style\">\r\n <fa-icon *ngIf=\"button.Icon\" [icon]=\"getFontAwesome(button.Icon, fontAweSomeService)\"\r\n [style.padding-right]=\"button.Text ? '5px' : '0px'\"></fa-icon>\r\n <span class=\"ion-text-capitalize\">{{ button.Text }}</span>\r\n </ion-button>\r\n </div>\r\n</div>\r\n", styles: [".addons-container{display:flex}.addons-container .addons-icon{display:flex;flex-direction:row}.addons-container .addons-icon fa-icon{padding:4px 6px;font-size:calc(var(--content-font-size) - 2px)}.addons-container .addons-buttons>ion-button{margin:0 0 0 5px;font-size:calc(var(--content-font-size) - 2px)}.addons-container .addons-text{padding-left:6px;padding-top:3px;font-size:calc(var(--content-font-size) - 2px)}.addons-container.top .addons-buttons>ion-button{top:-3px;position:relative}.addons-container.left .addons-buttons>ion-button{margin:0 5px 0 0}.addons-buttons ion-button{font-size:var(--button-font-size);margin-left:10px;--border-radius: var(--button-border-radius);--box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, .25)}.addons-buttons ion-button.useCustomClass{--background-hover-opacity: 1;--border-width: 2px;--border-style: solid;--background: #fff;--background-hover: rgba(var(--ion-color-primary-rgb), .05);--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}.addons-buttons ion-button.primary-light{--background: rgba(var(--ion-color-primary-rgb), .05);--background-hover: #fff;--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}.addons-buttons ion-button.primary{--background: var(--ion-color-primary);--background-hover: var(--ion-color-primary-tint);--color: var(--ion-color-primary-contrast);--border-color: var(--ion-color-primary-shade)}.addons-buttons ion-button.success{--background: var(--ion-color-success);--background-hover: var(--ion-color-success-tint);--color: var(--ion-color-success-contrast);--border-color: var(--ion-color-success-shade)}.addons-buttons ion-button.danger{--background: var(--ion-color-danger);--background-hover: var(--ion-color-danger-tint2);--color: var(--ion-color-danger-contrast);--border-color: var(--ion-color-danger-shade)}.addons-buttons ion-button.warning{--background: var(--ion-color-warning);--background-hover: var(--ion-color-warning-tint);--color: #000;--border-color: var(--ion-color-warning-shade)}.addons-buttons ion-button.no-shadow{--box-shadow: none}\n"], components: [{ type: i4.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7$2.TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "titleTemplate", "showOn", "showAfter", "callout", "closable", "offset", "tooltipWidth", "tooltipHeight", "tooltipClass", "collision", "closeTitle", "tooltipTemplate"], exportAs: ["kendoTooltip"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
|
|
8799
8812
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputFieldAddOnsComponent, decorators: [{
|
|
8800
8813
|
type: Component,
|
|
8801
|
-
args: [{ selector: "app-input-field-addons", template: "<div [class]=\"'addons-container ' + position\" *ngIf=\"addOn\">\r\n <div class=\"addons-icon\" *ngIf=\"addOn.IconList\">\r\n <div *ngFor=\"let item of addOn.IconList\">\r\n <div kendoTooltip class=\"icon-button\" showOn=\"hover\" [
|
|
8814
|
+
args: [{ selector: "app-input-field-addons", template: "<div [class]=\"'addons-container ' + position\" *ngIf=\"addOn\">\r\n <div class=\"addons-icon\" *ngIf=\"addOn.IconList\">\r\n <div *ngFor=\"let item of addOn.IconList\">\r\n <div kendoTooltip class=\"icon-button\" showOn=\"hover\" [position]=\"item.ToolTipPosition ?? 'top'\">\r\n <span (click)=\"onIconClick(item.Click)\" [title]=\"item.ToolTipText\" [style]=\"item.Style\">\r\n <fa-icon [icon]=\"item.Icon\">\r\n </fa-icon>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"addons-text\" *ngIf=\"addOn.TextList\">\r\n <div *ngFor=\"let item of addOn.TextList\">\r\n <div kendoTooltip class=\"icon-button\" showOn=\"hover\" [position]=\"item.ToolTipPosition ?? 'top'\">\r\n <span (click)=\"onIconClick(item.Click)\" [title]=\"item.ToolTipText\" [style]=\"item.Style\">\r\n {{item.Text}}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"addons-buttons\" *ngIf=\"addOn.ButtonList\">\r\n <ion-button *ngFor=\"let button of addOn.ButtonList; let i = button\" [fill]=\"button.fill\" [ngClass]=\"button.class\"\r\n [color]=\"button.color\" [size]=\"button.Size || 'small'\" strong=\"false\" (click)=\"onIconClick(button.Click)\"\r\n [hidden]=\"!button.Visible\" [disabled]=\"group.isTriggered || button.Disabled\" [style]=\"button.Style\">\r\n <fa-icon *ngIf=\"button.Icon\" [icon]=\"getFontAwesome(button.Icon, fontAweSomeService)\"\r\n [style.padding-right]=\"button.Text ? '5px' : '0px'\"></fa-icon>\r\n <span class=\"ion-text-capitalize\">{{ button.Text }}</span>\r\n </ion-button>\r\n </div>\r\n</div>\r\n", styles: [".addons-container{display:flex}.addons-container .addons-icon{display:flex;flex-direction:row}.addons-container .addons-icon fa-icon{padding:4px 6px;font-size:calc(var(--content-font-size) - 2px)}.addons-container .addons-buttons>ion-button{margin:0 0 0 5px;font-size:calc(var(--content-font-size) - 2px)}.addons-container .addons-text{padding-left:6px;padding-top:3px;font-size:calc(var(--content-font-size) - 2px)}.addons-container.top .addons-buttons>ion-button{top:-3px;position:relative}.addons-container.left .addons-buttons>ion-button{margin:0 5px 0 0}.addons-buttons ion-button{font-size:var(--button-font-size);margin-left:10px;--border-radius: var(--button-border-radius);--box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, .25)}.addons-buttons ion-button.useCustomClass{--background-hover-opacity: 1;--border-width: 2px;--border-style: solid;--background: #fff;--background-hover: rgba(var(--ion-color-primary-rgb), .05);--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}.addons-buttons ion-button.primary-light{--background: rgba(var(--ion-color-primary-rgb), .05);--background-hover: #fff;--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}.addons-buttons ion-button.primary{--background: var(--ion-color-primary);--background-hover: var(--ion-color-primary-tint);--color: var(--ion-color-primary-contrast);--border-color: var(--ion-color-primary-shade)}.addons-buttons ion-button.success{--background: var(--ion-color-success);--background-hover: var(--ion-color-success-tint);--color: var(--ion-color-success-contrast);--border-color: var(--ion-color-success-shade)}.addons-buttons ion-button.danger{--background: var(--ion-color-danger);--background-hover: var(--ion-color-danger-tint2);--color: var(--ion-color-danger-contrast);--border-color: var(--ion-color-danger-shade)}.addons-buttons ion-button.warning{--background: var(--ion-color-warning);--background-hover: var(--ion-color-warning-tint);--color: #000;--border-color: var(--ion-color-warning-shade)}.addons-buttons ion-button.no-shadow{--box-shadow: none}\n"] }]
|
|
8802
8815
|
}], ctorParameters: function () { return [{ type: ZComponentService }, { type: i2.FontAweSomeService }, { type: i2.TranslationService }]; }, propDecorators: { position: [{
|
|
8803
8816
|
type: Input
|
|
8804
8817
|
}], addOn: [{
|