mmhglobal-dynamicform 2.25.0 → 2.26.0

package/fesm2015/mmhglobal-dynamicform.mjs

@@ -1780,9 +1780,6 @@ class MainService {
                 this.signalrService.joinGroup(firstProjectCode);
             }
         }
-        else {
-            console.warn('signalR not enabled.');
-        }
     }
     handleSignalRModificationAlert(formId) {
         if (this.signalrService.signalREnabled() && this.environment.enableFormPageModificationAlert) {
@@ -4457,7 +4454,7 @@ class ButtonFieldBase extends FieldBase {
         return isVisible;
     }
     getButtonLabel(button) {
-        let labelResult = button.Label || '';
+        let labelResult = button.Label || button.Name || '';
         let labelExpr = labelResult.match(/^{{.*}}$/gi);
         if (labelExpr) {
             labelExpr = labelExpr[0].slice(2, -2);
@@ -8827,7 +8824,7 @@ class InputFieldAddOnsComponent extends InputFieldBase {
         if (this.addOn.IconList) {
             this.addOn.IconList = this.addOn.IconList.filter(x => x);
             this.addOn.IconList.forEach((i) => {
-                if (i.ToolTipText == undefined || i.ToolTipText == null) {
+                if (!i.ToolTipText) {
                     i.ToolTipText = "";
                 }
                 else if (i.ToolTipText.indexOf("group.") !== -1) {
@@ -8859,7 +8856,7 @@ class InputFieldAddOnsComponent extends InputFieldBase {
         if (this.addOn.TextList) {
             this.addOn.TextList = this.addOn.TextList.filter(x => x);
             this.addOn.TextList.forEach((i) => {
-                if (i.ToolTipText == undefined || i.ToolTipText == null) {
+                if (!i.ToolTipText) {
                     i.ToolTipText = "";
                 }
                 else if (i.ToolTipText.indexOf("group.") !== -1) {
@@ -10068,9 +10065,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
 
 /********** Angular **********/
 class ZmfbComponent extends ButtonFieldBase {
-    constructor(componentService, fieldService, resourceApiService, workflowService) {
+    constructor(componentService, fontAweSomeService, fieldService, resourceApiService, workflowService) {
         super(componentService);
         this.componentService = componentService;
+        this.fontAweSomeService = fontAweSomeService;
         this.fieldService = fieldService;
         this.resourceApiService = resourceApiService;
         this.workflowService = workflowService;
@@ -10254,12 +10252,12 @@ class ZmfbComponent extends ButtonFieldBase {
         }
     }
 }
-ZmfbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZmfbComponent, deps: [{ token: ZComponentService }, { token: i2.FieldService }, { token: i2.ResourceApiService }, { token: i2.WorkflowService }], target: i0.ɵɵFactoryTarget.Component });
-ZmfbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZmfbComponent, selector: "app-zmfb", usesInheritance: true, ngImport: i0, template: "<div class=\"zmfb-wrap e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <div class=\"k-overlay e1tag-style1\"\r\n       *ngIf=\"dialOpen\"\r\n       [style]=\"componentProperties.style.style1\">\r\n  </div>\r\n  <kendo-floatingactionbutton buttonClass=\"custom-floating-button\"\r\n                              class=\"e1tag-style2\"\r\n                              dialClass=\"custom-floating-dial\"\r\n                              [positionMode]=\"positionMode\"\r\n                              [align]=\"align\"\r\n                              [dialItems]=\"items\"\r\n                              (blur)=\"onBlur()\"\r\n                              (focus)=\"onFocus()\"\r\n                              (open)=\"onOpen($event)\"\r\n                              (close)=\"onClose($event)\"\r\n                              (click)=\"buttonClick(data)\"\r\n                              (dialItemClick)=\"onDialItemClick($event)\"\r\n                              [style]=\"componentProperties.style.style2\">\r\n    <ng-template kendoFloatingActionButtonTemplate>\r\n      <fa-icon [icon]=\"data.Icon ? data.Icon : 'plus'\"\r\n               class=\"e1tag-style3\"\r\n               [style]=\"componentProperties.style.style3\">\r\n      </fa-icon>\r\n    </ng-template>\r\n    <ng-template kendoDialItemTemplate\r\n                 let-item\r\n                 let-isFocused=\"isFocused\">\r\n      <span class=\"k-fab-item-text e1tag-style4\"\r\n            [style]=\"componentProperties.style.style4\">\r\n        <span>{{ item.label }}</span>\r\n      </span>\r\n      <kendo-avatar shape=\"circle\"\r\n                    [themeColor]=\"buttonColor\"\r\n                    class=\"e1tag-style5\"\r\n                    [style]=\"componentProperties.style.style5\">\r\n        <span class=\"k-icon k-i-{{ item.icon }}\"></span>\r\n      </kendo-avatar>\r\n    </ng-template>\r\n  </kendo-floatingactionbutton>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-floatingactionbutton .custom-floating-button{background:var(--ion-color-primary);border:none!important;outline:none;height:55px;width:55px;z-index:999}:host ::ng-deep kendo-floatingactionbutton .custom-floating-button:hover{background:var(--ion-color-primary-tint)}.button-item{padding:8px 10px;width:100%;display:flex;align-items:center;background-color:#fff}.button-details{margin-left:8px;display:flex;flex-direction:column;align-items:flex-start}.custom-focused-class{box-shadow:inset 0 0 8px #0003}.zmfb-wrap{display:flex;justify-content:center;margin-top:60px}@media only screen and (max-device-width: 768px){.k-bottom-end,.k-pos-bottom-end{padding-bottom:16vh}}.k-top-end,.k-pos-top-end{padding-top:6.5vh;padding-right:1vw}\n"], components: [{ type: i3$3.FloatingActionButtonComponent, selector: "kendo-floatingactionbutton", inputs: ["themeColor", "size", "rounded", "disabled", "align", "offset", "positionMode", "icon", "iconClass", "buttonClass", "dialClass", "text", "dialItemAnimation", "tabIndex", "dialItems"], outputs: ["blur", "focus", "dialItemClick", "open", "close"] }, { 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$5.AvatarComponent, selector: "kendo-avatar", inputs: ["shape", "size", "rounded", "themeColor", "fillMode", "fill", "border", "iconClass", "width", "height", "cssStyle", "initials", "icon", "imageSrc"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$3.FloatingActionButtonTemplateDirective, selector: "[kendoFloatingActionButtonTemplate]" }, { type: i3$3.DialItemTemplateDirective, selector: "[kendoDialItemTemplate]" }] });
+ZmfbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZmfbComponent, deps: [{ token: ZComponentService }, { token: i2.FontAweSomeService }, { token: i2.FieldService }, { token: i2.ResourceApiService }, { token: i2.WorkflowService }], target: i0.ɵɵFactoryTarget.Component });
+ZmfbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZmfbComponent, selector: "app-zmfb", usesInheritance: true, ngImport: i0, template: "<div class=\"zmfb-wrap e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <div class=\"k-overlay e1tag-style1\"\r\n       *ngIf=\"dialOpen\"\r\n       [style]=\"componentProperties.style.style1\">\r\n  </div>\r\n  <kendo-floatingactionbutton buttonClass=\"custom-floating-button\"\r\n                              class=\"e1tag-style2\"\r\n                              dialClass=\"custom-floating-dial\"\r\n                              [positionMode]=\"positionMode\"\r\n                              [align]=\"align\"\r\n                              [dialItems]=\"items\"\r\n                              (blur)=\"onBlur()\"\r\n                              (focus)=\"onFocus()\"\r\n                              (open)=\"onOpen($event)\"\r\n                              (close)=\"onClose($event)\"\r\n                              (click)=\"buttonClick(data)\"\r\n                              (dialItemClick)=\"onDialItemClick($event)\"\r\n                              [style]=\"componentProperties.style.style2\">\r\n    <ng-template kendoFloatingActionButtonTemplate>\r\n      <fa-icon [icon]=\"data.Icon ? data.Icon : 'plus'\"\r\n                size=\"2x\"\r\n               class=\"e1tag-style3\"\r\n               [style]=\"componentProperties.style.style3\">\r\n      </fa-icon>\r\n    </ng-template>\r\n    <ng-template kendoDialItemTemplate\r\n                 let-item\r\n                 let-isFocused=\"isFocused\">\r\n      <span class=\"k-fab-item-text e1tag-style4\"\r\n            [style]=\"componentProperties.style.style4\">\r\n        <span>{{ item.label }}</span>\r\n      </span>\r\n      <kendo-avatar shape=\"circle\"\r\n                    [themeColor]=\"buttonColor\"\r\n                    class=\"e1tag-style5\"\r\n                    [style]=\"componentProperties.style.style5\">\r\n        <fa-icon [icon]=\"getFontAwesome(item.icon, fontAweSomeService)\" size=\"1x\"></fa-icon>\r\n      </kendo-avatar>\r\n    </ng-template>\r\n  </kendo-floatingactionbutton>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-floatingactionbutton .custom-floating-button{background:var(--ion-color-primary);border:none!important;outline:none;height:55px;width:55px;z-index:999}:host ::ng-deep kendo-floatingactionbutton .custom-floating-button:hover{background:var(--ion-color-primary-tint)}.button-item{padding:8px 10px;width:100%;display:flex;align-items:center;background-color:#fff}.button-details{margin-left:8px;display:flex;flex-direction:column;align-items:flex-start}.custom-focused-class{box-shadow:inset 0 0 8px #0003}.zmfb-wrap{display:flex;justify-content:center;margin-top:60px}@media only screen and (max-device-width: 768px){.k-bottom-end,.k-pos-bottom-end{padding-bottom:16vh}}.k-top-end,.k-pos-top-end{padding-top:6.5vh;padding-right:1vw}\n"], components: [{ type: i3$3.FloatingActionButtonComponent, selector: "kendo-floatingactionbutton", inputs: ["themeColor", "size", "rounded", "disabled", "align", "offset", "positionMode", "icon", "iconClass", "buttonClass", "dialClass", "text", "dialItemAnimation", "tabIndex", "dialItems"], outputs: ["blur", "focus", "dialItemClick", "open", "close"] }, { 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$5.AvatarComponent, selector: "kendo-avatar", inputs: ["shape", "size", "rounded", "themeColor", "fillMode", "fill", "border", "iconClass", "width", "height", "cssStyle", "initials", "icon", "imageSrc"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$3.FloatingActionButtonTemplateDirective, selector: "[kendoFloatingActionButtonTemplate]" }, { type: i3$3.DialItemTemplateDirective, selector: "[kendoDialItemTemplate]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZmfbComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-zmfb', template: "<div class=\"zmfb-wrap e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <div class=\"k-overlay e1tag-style1\"\r\n       *ngIf=\"dialOpen\"\r\n       [style]=\"componentProperties.style.style1\">\r\n  </div>\r\n  <kendo-floatingactionbutton buttonClass=\"custom-floating-button\"\r\n                              class=\"e1tag-style2\"\r\n                              dialClass=\"custom-floating-dial\"\r\n                              [positionMode]=\"positionMode\"\r\n                              [align]=\"align\"\r\n                              [dialItems]=\"items\"\r\n                              (blur)=\"onBlur()\"\r\n                              (focus)=\"onFocus()\"\r\n                              (open)=\"onOpen($event)\"\r\n                              (close)=\"onClose($event)\"\r\n                              (click)=\"buttonClick(data)\"\r\n                              (dialItemClick)=\"onDialItemClick($event)\"\r\n                              [style]=\"componentProperties.style.style2\">\r\n    <ng-template kendoFloatingActionButtonTemplate>\r\n      <fa-icon [icon]=\"data.Icon ? data.Icon : 'plus'\"\r\n               class=\"e1tag-style3\"\r\n               [style]=\"componentProperties.style.style3\">\r\n      </fa-icon>\r\n    </ng-template>\r\n    <ng-template kendoDialItemTemplate\r\n                 let-item\r\n                 let-isFocused=\"isFocused\">\r\n      <span class=\"k-fab-item-text e1tag-style4\"\r\n            [style]=\"componentProperties.style.style4\">\r\n        <span>{{ item.label }}</span>\r\n      </span>\r\n      <kendo-avatar shape=\"circle\"\r\n                    [themeColor]=\"buttonColor\"\r\n                    class=\"e1tag-style5\"\r\n                    [style]=\"componentProperties.style.style5\">\r\n        <span class=\"k-icon k-i-{{ item.icon }}\"></span>\r\n      </kendo-avatar>\r\n    </ng-template>\r\n  </kendo-floatingactionbutton>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-floatingactionbutton .custom-floating-button{background:var(--ion-color-primary);border:none!important;outline:none;height:55px;width:55px;z-index:999}:host ::ng-deep kendo-floatingactionbutton .custom-floating-button:hover{background:var(--ion-color-primary-tint)}.button-item{padding:8px 10px;width:100%;display:flex;align-items:center;background-color:#fff}.button-details{margin-left:8px;display:flex;flex-direction:column;align-items:flex-start}.custom-focused-class{box-shadow:inset 0 0 8px #0003}.zmfb-wrap{display:flex;justify-content:center;margin-top:60px}@media only screen and (max-device-width: 768px){.k-bottom-end,.k-pos-bottom-end{padding-bottom:16vh}}.k-top-end,.k-pos-top-end{padding-top:6.5vh;padding-right:1vw}\n"] }]
-        }], ctorParameters: function () { return [{ type: ZComponentService }, { type: i2.FieldService }, { type: i2.ResourceApiService }, { type: i2.WorkflowService }]; } });
+            args: [{ selector: 'app-zmfb', template: "<div class=\"zmfb-wrap e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <div class=\"k-overlay e1tag-style1\"\r\n       *ngIf=\"dialOpen\"\r\n       [style]=\"componentProperties.style.style1\">\r\n  </div>\r\n  <kendo-floatingactionbutton buttonClass=\"custom-floating-button\"\r\n                              class=\"e1tag-style2\"\r\n                              dialClass=\"custom-floating-dial\"\r\n                              [positionMode]=\"positionMode\"\r\n                              [align]=\"align\"\r\n                              [dialItems]=\"items\"\r\n                              (blur)=\"onBlur()\"\r\n                              (focus)=\"onFocus()\"\r\n                              (open)=\"onOpen($event)\"\r\n                              (close)=\"onClose($event)\"\r\n                              (click)=\"buttonClick(data)\"\r\n                              (dialItemClick)=\"onDialItemClick($event)\"\r\n                              [style]=\"componentProperties.style.style2\">\r\n    <ng-template kendoFloatingActionButtonTemplate>\r\n      <fa-icon [icon]=\"data.Icon ? data.Icon : 'plus'\"\r\n                size=\"2x\"\r\n               class=\"e1tag-style3\"\r\n               [style]=\"componentProperties.style.style3\">\r\n      </fa-icon>\r\n    </ng-template>\r\n    <ng-template kendoDialItemTemplate\r\n                 let-item\r\n                 let-isFocused=\"isFocused\">\r\n      <span class=\"k-fab-item-text e1tag-style4\"\r\n            [style]=\"componentProperties.style.style4\">\r\n        <span>{{ item.label }}</span>\r\n      </span>\r\n      <kendo-avatar shape=\"circle\"\r\n                    [themeColor]=\"buttonColor\"\r\n                    class=\"e1tag-style5\"\r\n                    [style]=\"componentProperties.style.style5\">\r\n        <fa-icon [icon]=\"getFontAwesome(item.icon, fontAweSomeService)\" size=\"1x\"></fa-icon>\r\n      </kendo-avatar>\r\n    </ng-template>\r\n  </kendo-floatingactionbutton>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-floatingactionbutton .custom-floating-button{background:var(--ion-color-primary);border:none!important;outline:none;height:55px;width:55px;z-index:999}:host ::ng-deep kendo-floatingactionbutton .custom-floating-button:hover{background:var(--ion-color-primary-tint)}.button-item{padding:8px 10px;width:100%;display:flex;align-items:center;background-color:#fff}.button-details{margin-left:8px;display:flex;flex-direction:column;align-items:flex-start}.custom-focused-class{box-shadow:inset 0 0 8px #0003}.zmfb-wrap{display:flex;justify-content:center;margin-top:60px}@media only screen and (max-device-width: 768px){.k-bottom-end,.k-pos-bottom-end{padding-bottom:16vh}}.k-top-end,.k-pos-top-end{padding-top:6.5vh;padding-right:1vw}\n"] }]
+        }], ctorParameters: function () { return [{ type: ZComponentService }, { type: i2.FontAweSomeService }, { type: i2.FieldService }, { type: i2.ResourceApiService }, { type: i2.WorkflowService }]; } });
 
 /********** Angular **********/
 class ZmodalComponent extends DialogContentBase {
@@ -12329,11 +12327,13 @@ class ZudfComponent extends ContainerFieldBase {
         if (this.data.Value == undefined && this.data.FieldElementCode) {
             const fieldName = ZComponentHelper.getGroupValue(this.data.FieldElementCode, this.group);
             const fieldFormType = ZComponentHelper.getGroupValue(this.data.FieldElementFormType, this.group);
-            if (fieldFormType && fieldFormType == FormType.listField) {
-                obs = this.fieldService.getListFieldByFieldElementName(fieldName);
-            }
-            else {
-                obs = this.fieldService.getFormFieldCode(fieldName, 'FormField', this, 'fields');
+            if (fieldName) {
+                if (fieldFormType && fieldFormType == FormType.listField) {
+                    obs = this.fieldService.getListFieldByFieldElementName(fieldName);
+                }
+                else {
+                    obs = this.fieldService.getFormFieldCode(fieldName, 'FormField', this, 'fields');
+                }
             }
         }
         super.initComponent().pipe(switchMap(() => obs), switchMap((field) => {
@@ -14339,6 +14339,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
             args: [{ selector: "app-kscrollview", template: "<div class=\"kscrollview-container\" [style]=\"componentProperties.containerStyle.style\" class=\"e1tag-container-style\"\r\n  *ngIf=\"!isLoading\">\r\n  <kendo-scrollview [style]=\"componentProperties.containerStyle.style1\" class=\"e1tag-container-style1 scrollview\"\r\n    [ngClass]=\"data.Class\" [data]=\"panelItems\" [arrows]=\"options.arrows\" [pageable]=\"options.pageAble\"\r\n    [endless]=\"options.endless\">\r\n    <ng-template let-item=\"item\">\r\n      <div [style]=\"componentProperties.containerStyle.style2\" class=\"e1tag-container-style2\" (click)=\"onItemClick($event, item)\">\r\n        <div [style]=\"componentProperties.containerStyle.style3\" class=\"e1tag-container-style3 kscrollview-title\">\r\n          {{item.Label}}\r\n        </div>\r\n        <img [src]='item.SourceUrl' [alt]='item.Label' [style]=\"componentProperties.containerStyle.style4\"\r\n          class=\"e1tag-container-style4\" draggable=\"true\" />\r\n      </div>\r\n    </ng-template>\r\n  </kendo-scrollview>\r\n</div>\r\n", styles: [".k-scrollview-wrap{margin:0 auto}.kscrollview-title{position:absolute;top:0;left:0;right:0;margin:0;padding:8px 8px 10px;color:#fff;background:linear-gradient(rgba(0,0,0,.8),rgba(202,202,202,.4705882353));text-align:center;font-size:16px}.scrollview{height:400px}.title-bottom .kscrollview-title{top:unset;bottom:0;background:linear-gradient(rgba(202,202,202,.4705882353),rgba(0,0,0,.8));padding-bottom:15px;padding-top:10px}.show-title-when-hover .kscrollview-title{opacity:0;transition:opacity .5s}.show-title-when-hover:hover .kscrollview-title{opacity:1;transition:opacity .5s}\n"] }]
         }], ctorParameters: function () { return [{ type: ZComponentService }]; } });
 
+class FiconComponent {
+    constructor(fontAweSomeService) {
+        this.fontAweSomeService = fontAweSomeService;
+        this.size = "large";
+        this.rounded = "medium";
+        this.fillMode = "solid";
+        this.icons = [];
+        this.filteredIcons = [];
+        this.searchTerm = '';
+    }
+    ngOnInit() {
+        this.icons = this.fontAweSomeService.getAllIcons().map(icon => (Object.assign(Object.assign({}, icon), { formattedName: this.toCamelCase(`${icon.name}`) })));
+        this.filteredIcons = [...this.icons];
+        ZComponentHelper.setComponentProperties(this);
+        ZComponentHelper.registerComponent(this);
+    }
+    toCamelCase(str) {
+        return str
+            .split('-')
+            .map((word, index) => index === 0 ? word : word.charAt(0).toUpperCase() + word.slice(1))
+            .join('');
+    }
+    filterIcon(searchTerm) {
+        this.searchTerm = searchTerm;
+        this.filteredIcons = this.icons.filter(icon => icon.name.toLowerCase().includes(searchTerm.toLowerCase()));
+    }
+}
+FiconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FiconComponent, deps: [{ token: i2.FontAweSomeService }], target: i0.ɵɵFactoryTarget.Component });
+FiconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FiconComponent, selector: "app-ficon", inputs: { data: "data", group: "group", form: "form" }, ngImport: i0, template: "<div>  \r\n  <div class=\"search-box\">\r\n    <kendo-floatinglabel [labelCssClass]=\"'custom-label-class'\"\r\n                         text=\"Search icons\">\r\n      <kendo-textbox [(ngModel)]=\"searchTerm\"\r\n                     (ngModelChange)=\"filterIcon(searchTerm)\"\r\n                     placeholder=\"Search icons\"\r\n                     [clearButton]=\"true\"\r\n                     [rounded]=\"rounded\"\r\n                     [style.width.px]=\"480\">\r\n      </kendo-textbox>\r\n    </kendo-floatinglabel> \r\n  </div>\r\n\r\n  <ul class=\"icons-wrapper\">\r\n    <li *ngFor=\"let icon of filteredIcons\" class=\"icon-item\">\r\n      <fa-icon [icon]=\"icon.definition\" size=\"3x\"></fa-icon>\r\n      <div class=\"icon-name\" style=\"text-align:center\">{{ icon.formattedName }}</div>\r\n    </li>\r\n  </ul>\r\n</div>\r\n", styles: [".icons-wrapper{display:flex;flex-wrap:wrap;justify-content:center;list-style:none;padding:1em;margin:1em}.icon-item{display:flex;flex-direction:column;align-items:center;margin:0 8px 16px 0;width:150px;height:100px;text-align:center;font-size:12px;box-shadow:0 4px 8px #0000001a;border-radius:8px;padding:12px;background-color:#f5f5f5}.icon-item kendo-svgicon{margin-bottom:8px}.icon-name{word-spacing:100px;white-space:initial;max-width:150px;padding-top:1em}.k-icon{display:block;clear:both;margin:0 auto 10px;color:#656565;font-size:32px}.custom-label-class{margin-left:30px}.search-box{display:flex;justify-content:center;margin-top:30px;margin-bottom:20px}\n"], components: [{ type: i15.FloatingLabelComponent, selector: "kendo-floatinglabel", inputs: ["labelCssStyle", "labelCssClass", "id", "text", "optional"], outputs: ["positionChange"], exportAs: ["kendoFloatingLabel"] }, { type: i3$5.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "errorIcon", "clearButtonIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { type: i4.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FiconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-ficon', template: "<div>  \r\n  <div class=\"search-box\">\r\n    <kendo-floatinglabel [labelCssClass]=\"'custom-label-class'\"\r\n                         text=\"Search icons\">\r\n      <kendo-textbox [(ngModel)]=\"searchTerm\"\r\n                     (ngModelChange)=\"filterIcon(searchTerm)\"\r\n                     placeholder=\"Search icons\"\r\n                     [clearButton]=\"true\"\r\n                     [rounded]=\"rounded\"\r\n                     [style.width.px]=\"480\">\r\n      </kendo-textbox>\r\n    </kendo-floatinglabel> \r\n  </div>\r\n\r\n  <ul class=\"icons-wrapper\">\r\n    <li *ngFor=\"let icon of filteredIcons\" class=\"icon-item\">\r\n      <fa-icon [icon]=\"icon.definition\" size=\"3x\"></fa-icon>\r\n      <div class=\"icon-name\" style=\"text-align:center\">{{ icon.formattedName }}</div>\r\n    </li>\r\n  </ul>\r\n</div>\r\n", styles: [".icons-wrapper{display:flex;flex-wrap:wrap;justify-content:center;list-style:none;padding:1em;margin:1em}.icon-item{display:flex;flex-direction:column;align-items:center;margin:0 8px 16px 0;width:150px;height:100px;text-align:center;font-size:12px;box-shadow:0 4px 8px #0000001a;border-radius:8px;padding:12px;background-color:#f5f5f5}.icon-item kendo-svgicon{margin-bottom:8px}.icon-name{word-spacing:100px;white-space:initial;max-width:150px;padding-top:1em}.k-icon{display:block;clear:both;margin:0 auto 10px;color:#656565;font-size:32px}.custom-label-class{margin-left:30px}.search-box{display:flex;justify-content:center;margin-top:30px;margin-bottom:20px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i2.FontAweSomeService }]; }, propDecorators: { data: [{
+                type: Input
+            }], group: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }] } });
+
 /********** Angular **********/
 class MmhglobalDynamicformModule {
 }
@@ -14424,7 +14464,8 @@ MmhglobalDynamicformModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.
         ZcolorpickerComponent,
         KmenuComponent,
         KScrollViewComponent,
-        ContextMenuComponent], imports: [IonicModule,
+        ContextMenuComponent,
+        FiconComponent], imports: [IonicModule,
         IonicSelectableModule,
         CommonModule,
         RouterModule,
@@ -14551,7 +14592,8 @@ MmhglobalDynamicformModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.
         VirtualScrollComponent,
         ZcolorpickerComponent,
         KmenuComponent,
-        KScrollViewComponent] });
+        KScrollViewComponent,
+        FiconComponent] });
 MmhglobalDynamicformModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MmhglobalDynamicformModule, providers: [
         ModalService
     ], imports: [[
@@ -14690,7 +14732,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         ZcolorpickerComponent,
                         KmenuComponent,
                         KScrollViewComponent,
-                        ContextMenuComponent
+                        ContextMenuComponent,
+                        FiconComponent
                     ],
                     imports: [
                         IonicModule,
@@ -14824,6 +14867,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         ZcolorpickerComponent,
                         KmenuComponent,
                         KScrollViewComponent,
+                        FiconComponent
                     ],
                     providers: [
                         ModalService
@@ -14840,5 +14884,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonFieldBase, ContainerFieldBase, ContextMenuComponent, DataListingFieldBase, DateIonicFormatParser, DateIonicMinMaxParser, DateKendoFormatParser, DateParserFilter, DateRangeFilterCellComponent, DivzLayout, EditorFilter, ElementContainerDirective, FieldBase, FieldElementDirective, HtmlSanitizePipe, InputErrorMessageComponent, InputFieldAddOnsComponent, InputFieldBase, KScrollViewComponent, KcardComponent, KmenuComponent, KsplitterComponent, MainService, MmhglobalDynamicformModule, MyFileInfo, OpenOnFocusDirective, PageLoaderComponent, PanelAreaFilter, ProcessingRecordLoaderComponent, ScrollbarThemeDirective, SfquerybuilderComponent, SpinnerComponent, TabFilter, UiactionbuttonComponent, UiappmenucontentComponent, UibulletinComponent, UicontainerComponent, UicontentComponent, UiheaderComponent, UimenubuttonComponent, UimenucontentComponent, UipageComponent, UivalidationmessageComponent, VirtualScrollComponent, ZBulletComponent, ZChipComponent, ZComponentService, ZGridBindingDirective, ZGridPopupAnchorDirective, ZInputContainerComponent, ZInputParser, ZNumericParser, ZSchedulerToolBarComponent, ZSelectTranslationParser, ZTreeListOptions, ZbuttonsComponent, ZcardComponent, ZchartComponent, ZcheckboxComponent, ZcodeeditorComponent, ZcolorpickerComponent, ZdaterangeComponent, ZdatetimeComponent, ZdivComponent, ZformComponent, ZformcontrolComponent, ZgaugeComponent, ZgridComponent, ZgridContainerComponent, ZimgComponent, ZlabelComponent, ZloopComponent, ZmfbComponent, ZmodalComponent, ZmodalMobileComponent, ZnumericComponent, ZpostselectinputComponent, ZprogressbarComponent, ZreportComponent, ZschedulerComponent, ZselectmultipleComponent, ZtabComponent, ZtextComponent, ZtextareaComponent, ZtexteditorComponent, ZtreeComponent, ZtreelistComponent, ZtrendcardComponent, ZudfComponent, ZunknownComponent, ZuploadComponent, ZworkflowbuttonsComponent, refreshGrid };
+export { ButtonFieldBase, ContainerFieldBase, ContextMenuComponent, DataListingFieldBase, DateIonicFormatParser, DateIonicMinMaxParser, DateKendoFormatParser, DateParserFilter, DateRangeFilterCellComponent, DivzLayout, EditorFilter, ElementContainerDirective, FiconComponent, FieldBase, FieldElementDirective, HtmlSanitizePipe, InputErrorMessageComponent, InputFieldAddOnsComponent, InputFieldBase, KScrollViewComponent, KcardComponent, KmenuComponent, KsplitterComponent, MainService, MmhglobalDynamicformModule, MyFileInfo, OpenOnFocusDirective, PageLoaderComponent, PanelAreaFilter, ProcessingRecordLoaderComponent, ScrollbarThemeDirective, SfquerybuilderComponent, SpinnerComponent, TabFilter, UiactionbuttonComponent, UiappmenucontentComponent, UibulletinComponent, UicontainerComponent, UicontentComponent, UiheaderComponent, UimenubuttonComponent, UimenucontentComponent, UipageComponent, UivalidationmessageComponent, VirtualScrollComponent, ZBulletComponent, ZChipComponent, ZComponentService, ZGridBindingDirective, ZGridPopupAnchorDirective, ZInputContainerComponent, ZInputParser, ZNumericParser, ZSchedulerToolBarComponent, ZSelectTranslationParser, ZTreeListOptions, ZbuttonsComponent, ZcardComponent, ZchartComponent, ZcheckboxComponent, ZcodeeditorComponent, ZcolorpickerComponent, ZdaterangeComponent, ZdatetimeComponent, ZdivComponent, ZformComponent, ZformcontrolComponent, ZgaugeComponent, ZgridComponent, ZgridContainerComponent, ZimgComponent, ZlabelComponent, ZloopComponent, ZmfbComponent, ZmodalComponent, ZmodalMobileComponent, ZnumericComponent, ZpostselectinputComponent, ZprogressbarComponent, ZreportComponent, ZschedulerComponent, ZselectmultipleComponent, ZtabComponent, ZtextComponent, ZtextareaComponent, ZtexteditorComponent, ZtreeComponent, ZtreelistComponent, ZtrendcardComponent, ZudfComponent, ZunknownComponent, ZuploadComponent, ZworkflowbuttonsComponent, refreshGrid };
 //# sourceMappingURL=mmhglobal-dynamicform.mjs.map