npm - mmhglobal-dynamicform - Versions diffs - 2.28.3 → 2.28.4 - Mend

mmhglobal-dynamicform 2.28.3 → 2.28.4

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.

Files changed (102) hide show

package/README.md CHANGED Viewed

@@ -3,6 +3,11 @@
 This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.13.
 ## Changelog
+`2.28.4`<br/>
+[zgrid] - use the ExportDataResourceURL value set in the field element when Export data.
+[zgrid] - implemented onExcelExport for formatting the cell in the excel when Export data.
+[zbutton, workflowbutton] - regenerate new eventId upon clicked.
 `2.28.3`<br/>
 [zselectmultiple] - fine tune the selectionmultiple for the lazy loading. added on focus to also load the data. reset the pageno if resetInfiniteData is called.
@@ -84,6 +89,9 @@ kendo-popup {
 ```
 <br/>
+`2.23.4`<br/>
+[zgrid]- use the ExportDataResourceURL value set in the field element when Export data.
 `2.23.3`<br/>
 [textarea]- Fix bug readonly textarea not scrollable #3481.<br/>
 [textarea]- Character counter allow to ignore white space. #2934<br/>

package/esm2020/lib/components/buttonfieldbase.component.mjs CHANGED Viewed

@@ -60,9 +60,9 @@ export class ButtonFieldBase extends FieldBase {
         }
     }
 }
-ButtonFieldBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ButtonFieldBase, deps: [{ token: i1.ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-ButtonFieldBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ButtonFieldBase, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ButtonFieldBase, decorators: [{
+ButtonFieldBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ButtonFieldBase, deps: [{ token: i1.ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
+ButtonFieldBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ButtonFieldBase, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ButtonFieldBase, decorators: [{
             type: Component,
             args: [{
                     template: ``,

package/esm2020/lib/components/containerfieldbase.component.mjs CHANGED Viewed

@@ -39,9 +39,9 @@ export class ContainerFieldBase extends FieldBase {
         this.triggerEvent("container-OnCollapse", this.data.OnCollapse, event, fieldValue);
     }
 }
-ContainerFieldBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ContainerFieldBase, deps: [{ token: i1.ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-ContainerFieldBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ContainerFieldBase, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ContainerFieldBase, decorators: [{
+ContainerFieldBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ContainerFieldBase, deps: [{ token: i1.ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
+ContainerFieldBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ContainerFieldBase, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ContainerFieldBase, decorators: [{
             type: Component,
             args: [{
                     template: ``,

package/esm2020/lib/components/datalistingfieldbase.component.mjs CHANGED Viewed

@@ -149,9 +149,9 @@ export class DataListingFieldBase extends FieldBase {
         }
     }
 }
-DataListingFieldBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DataListingFieldBase, deps: [{ token: i1.ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-DataListingFieldBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DataListingFieldBase, selector: "ng-component", outputs: { showFormPage: "showFormPage" }, viewQueries: [{ propertyName: "popovercontainer", first: true, predicate: ["popovercontainer"], descendants: true }, { propertyName: "dataItemContextMenu", first: true, predicate: ["dataitemcontextmenu"], descendants: true }], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DataListingFieldBase, decorators: [{
+DataListingFieldBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: DataListingFieldBase, deps: [{ token: i1.ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
+DataListingFieldBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: DataListingFieldBase, selector: "ng-component", outputs: { showFormPage: "showFormPage" }, viewQueries: [{ propertyName: "popovercontainer", first: true, predicate: ["popovercontainer"], descendants: true }, { propertyName: "dataItemContextMenu", first: true, predicate: ["dataitemcontextmenu"], descendants: true }], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: DataListingFieldBase, decorators: [{
             type: Component,
             args: [{
                     template: ``,

package/esm2020/lib/components/fieldbase.component.mjs CHANGED Viewed

@@ -154,9 +154,9 @@ export class FieldBase {
         return fieldValue;
     }
 }
-FieldBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FieldBase, deps: [{ token: i1.ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-FieldBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FieldBase, selector: "ng-component", inputs: { data: "data", group: "group", form: "form", containerField: "containerField", componentProperties: "componentProperties" }, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FieldBase, decorators: [{
+FieldBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: FieldBase, deps: [{ token: i1.ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
+FieldBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: FieldBase, selector: "ng-component", inputs: { data: "data", group: "group", form: "form", containerField: "containerField", componentProperties: "componentProperties" }, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: FieldBase, decorators: [{
             type: Component,
             args: [{
                     template: ``,

package/esm2020/lib/components/inputfieldbase.component.mjs CHANGED Viewed

@@ -188,9 +188,9 @@ export class InputFieldBase extends FieldBase {
         }
     }
 }
-InputFieldBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputFieldBase, deps: [{ token: i1.ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-InputFieldBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: InputFieldBase, selector: "ng-component", outputs: { triggerContainerEvent: "triggerContainerEvent" }, usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputFieldBase, decorators: [{
+InputFieldBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: InputFieldBase, deps: [{ token: i1.ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
+InputFieldBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: InputFieldBase, selector: "ng-component", outputs: { triggerContainerEvent: "triggerContainerEvent" }, usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: InputFieldBase, decorators: [{
             type: Component,
             args: [{
                     template: ``,

package/esm2020/lib/directives/elementcontainer.directive.mjs CHANGED Viewed

@@ -5,9 +5,9 @@ export class ElementContainerDirective {
         this.viewContainerRef = viewContainerRef;
     }
 }
-ElementContainerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ElementContainerDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-ElementContainerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", type: ElementContainerDirective, selector: "[elementcontainer]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ElementContainerDirective, decorators: [{
+ElementContainerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ElementContainerDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+ElementContainerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.3", type: ElementContainerDirective, selector: "[elementcontainer]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ElementContainerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[elementcontainer]'

package/esm2020/lib/directives/fieldelement.directive.mjs CHANGED Viewed

@@ -5,9 +5,9 @@ export class FieldElementDirective {
         this.viewContainerRef = viewContainerRef;
     }
 }
-FieldElementDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FieldElementDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-FieldElementDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", type: FieldElementDirective, selector: "[fieldelement]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FieldElementDirective, decorators: [{
+FieldElementDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: FieldElementDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+FieldElementDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.3", type: FieldElementDirective, selector: "[fieldelement]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: FieldElementDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fieldelement]'

package/esm2020/lib/directives/scrollbar.theme.directive.mjs CHANGED Viewed

@@ -34,9 +34,9 @@ export class ScrollbarThemeDirective {
         // }
     }
 }
-ScrollbarThemeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ScrollbarThemeDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-ScrollbarThemeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", type: ScrollbarThemeDirective, selector: "[appScrollbarTheme]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ScrollbarThemeDirective, decorators: [{
+ScrollbarThemeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ScrollbarThemeDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+ScrollbarThemeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.3", type: ScrollbarThemeDirective, selector: "[appScrollbarTheme]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ScrollbarThemeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appScrollbarTheme]'

package/esm2020/lib/embed-components/context-menu/context-menu.component.mjs CHANGED Viewed

@@ -97,9 +97,9 @@ export class ContextMenuComponent extends FieldBase {
         }
     }
 }
-ContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ContextMenuComponent, deps: [{ token: i1.ZComponentService }, { token: i2.FontAweSomeService }, { token: i2.TranslationService }, { token: i2.UISignalService }], target: i0.ɵɵFactoryTarget.Component });
-ContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ContextMenuComponent, selector: "app-context-menu", inputs: { target: "target", selectedData: "selectedData" }, viewQueries: [{ propertyName: "contextMenuList", predicate: ["contextMenu"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"context-menu-container\" *ngIf=\"target && !isLoading\">\r\n  <kendo-contextmenu\r\n    #contextMenu\r\n    class=\"context-menu-item\"\r\n    *ngFor=\"let targetContextMenuSetting of contextMenuSettings\"\r\n    [target]=\"target\"\r\n    [size]=\"targetContextMenuSetting.Size ?? 'medium'\"\r\n    [kendoMenuHierarchyBinding]=\"targetContextMenuSetting.ContextMenuItems\"\r\n    childrenField=\"Value\"\r\n    separatorField=\"IsSeparator\"\r\n    (select)=\"onSelect($event, targetContextMenuSetting)\"\r\n    [filter]=\"targetContextMenuSetting.CSSSelectorFilter\"\r\n    (popupOpen)=\"popUpOpened(contextMenu)\">\r\n    <ng-template kendoMenuItemTemplate let-item=\"item\">\r\n      <div class=\"context-menu-item-container\" [class.has-icon]=\"item.data.Icon\" [ngClass]=\"item.data.Class\"\r\n        *ngIf=\"!item.data.IsSeparator\">\r\n        <fa-icon class=\"context-menu-item-icon\" [icon]=\"getFontAwesome(item.data.Icon, fontAweSomeService)\"\r\n          *ngIf=\"item.data.Icon\"></fa-icon>\r\n        <div class=\"context-menu-item-text\" *ngIf=\"item.data.Text\">{{ item.data.TranslatedText ?? item.data.Text }}\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </kendo-contextmenu>\r\n</div>\r\n\r\n<!-- Manual trigger from zgrid, ztree -->\r\n<div class=\"context-menu-container-manual-trigger-mode\" *ngIf=\"!target && !isLoading\">\r\n  <kendo-contextmenu\r\n    #contextMenu\r\n    class=\"context-menu-item\"\r\n    *ngFor=\"let targetContextMenuSetting of contextMenuSettings\"\r\n    [size]=\"targetContextMenuSetting.Size ?? 'medium'\"\r\n    [kendoMenuHierarchyBinding]=\"targetContextMenuSetting.ContextMenuItems\"\r\n    childrenField=\"Value\"\r\n    separatorField=\"IsSeparator\"\r\n    (select)=\"onSelect($event, targetContextMenuSetting)\"\r\n    [filter]=\"targetContextMenuSetting.CSSSelectorFilter\">\r\n    <ng-template kendoMenuItemTemplate let-item=\"item\">\r\n      <div class=\"context-menu-item-container\" [class.has-icon]=\"item.data.Icon\" [ngClass]=\"item.data.Class\"\r\n        *ngIf=\"!item.data.IsSeparator\">\r\n        <fa-icon class=\"context-menu-item-icon\" [icon]=\"getFontAwesome(item.data.Icon, fontAweSomeService)\"\r\n          *ngIf=\"item.data.Icon\"></fa-icon>\r\n        <div class=\"context-menu-item-text\" *ngIf=\"item.data.Text\">{{ item.data.TranslatedText ?? item.data.Text }}\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </kendo-contextmenu>\r\n</div>\r\n", styles: [".context-menu-item-container.has-icon{display:grid;grid-template-columns:20px auto}.context-menu-item-container.has-icon .context-menu-item-icon{padding-right:5px}\n"], components: [{ type: i3.ContextMenuComponent, selector: "kendo-contextmenu", inputs: ["showOn", "target", "filter", "alignToAnchor", "vertical", "popupAnimate", "popupAlign", "anchorAlign", "collision", "appendTo", "ariaLabel"], outputs: ["popupOpen", "popupClose", "select", "open", "close"], exportAs: ["kendoContextMenu"] }, { 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: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.HierarchyBindingDirective, selector: "[kendoMenuHierarchyBinding]", inputs: ["kendoMenuHierarchyBinding", "textField", "urlField", "iconField", "svgIconField", "disabledField", "cssClassField", "cssStyleField", "separatorField", "childrenField"], exportAs: ["kendoMenuHierarchyBinding"] }, { type: i3.ItemTemplateDirective, selector: "[kendoMenuItemTemplate]" }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ContextMenuComponent, decorators: [{
+ContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ContextMenuComponent, deps: [{ token: i1.ZComponentService }, { token: i2.FontAweSomeService }, { token: i2.TranslationService }, { token: i2.UISignalService }], target: i0.ɵɵFactoryTarget.Component });
+ContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ContextMenuComponent, selector: "app-context-menu", inputs: { target: "target", selectedData: "selectedData" }, viewQueries: [{ propertyName: "contextMenuList", predicate: ["contextMenu"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"context-menu-container\" *ngIf=\"target && !isLoading\">\r\n  <kendo-contextmenu\r\n    #contextMenu\r\n    class=\"context-menu-item\"\r\n    *ngFor=\"let targetContextMenuSetting of contextMenuSettings\"\r\n    [target]=\"target\"\r\n    [size]=\"targetContextMenuSetting.Size ?? 'medium'\"\r\n    [kendoMenuHierarchyBinding]=\"targetContextMenuSetting.ContextMenuItems\"\r\n    childrenField=\"Value\"\r\n    separatorField=\"IsSeparator\"\r\n    (select)=\"onSelect($event, targetContextMenuSetting)\"\r\n    [filter]=\"targetContextMenuSetting.CSSSelectorFilter\"\r\n    (popupOpen)=\"popUpOpened(contextMenu)\">\r\n    <ng-template kendoMenuItemTemplate let-item=\"item\">\r\n      <div class=\"context-menu-item-container\" [class.has-icon]=\"item.data.Icon\" [ngClass]=\"item.data.Class\"\r\n        *ngIf=\"!item.data.IsSeparator\">\r\n        <fa-icon class=\"context-menu-item-icon\" [icon]=\"getFontAwesome(item.data.Icon, fontAweSomeService)\"\r\n          *ngIf=\"item.data.Icon\"></fa-icon>\r\n        <div class=\"context-menu-item-text\" *ngIf=\"item.data.Text\">{{ item.data.TranslatedText ?? item.data.Text }}\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </kendo-contextmenu>\r\n</div>\r\n\r\n<!-- Manual trigger from zgrid, ztree -->\r\n<div class=\"context-menu-container-manual-trigger-mode\" *ngIf=\"!target && !isLoading\">\r\n  <kendo-contextmenu\r\n    #contextMenu\r\n    class=\"context-menu-item\"\r\n    *ngFor=\"let targetContextMenuSetting of contextMenuSettings\"\r\n    [size]=\"targetContextMenuSetting.Size ?? 'medium'\"\r\n    [kendoMenuHierarchyBinding]=\"targetContextMenuSetting.ContextMenuItems\"\r\n    childrenField=\"Value\"\r\n    separatorField=\"IsSeparator\"\r\n    (select)=\"onSelect($event, targetContextMenuSetting)\"\r\n    [filter]=\"targetContextMenuSetting.CSSSelectorFilter\">\r\n    <ng-template kendoMenuItemTemplate let-item=\"item\">\r\n      <div class=\"context-menu-item-container\" [class.has-icon]=\"item.data.Icon\" [ngClass]=\"item.data.Class\"\r\n        *ngIf=\"!item.data.IsSeparator\">\r\n        <fa-icon class=\"context-menu-item-icon\" [icon]=\"getFontAwesome(item.data.Icon, fontAweSomeService)\"\r\n          *ngIf=\"item.data.Icon\"></fa-icon>\r\n        <div class=\"context-menu-item-text\" *ngIf=\"item.data.Text\">{{ item.data.TranslatedText ?? item.data.Text }}\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </kendo-contextmenu>\r\n</div>\r\n", styles: [".context-menu-item-container.has-icon{display:grid;grid-template-columns:20px auto}.context-menu-item-container.has-icon .context-menu-item-icon{padding-right:5px}\n"], components: [{ type: i3.ContextMenuComponent, selector: "kendo-contextmenu", inputs: ["showOn", "target", "filter", "alignToAnchor", "vertical", "popupAnimate", "popupAlign", "anchorAlign", "collision", "appendTo", "ariaLabel"], outputs: ["popupOpen", "popupClose", "select", "open", "close"], exportAs: ["kendoContextMenu"] }, { 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: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.HierarchyBindingDirective, selector: "[kendoMenuHierarchyBinding]", inputs: ["kendoMenuHierarchyBinding", "textField", "urlField", "iconField", "svgIconField", "disabledField", "cssClassField", "cssStyleField", "separatorField", "childrenField"], exportAs: ["kendoMenuHierarchyBinding"] }, { type: i3.ItemTemplateDirective, selector: "[kendoMenuItemTemplate]" }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ContextMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-context-menu", template: "<div class=\"context-menu-container\" *ngIf=\"target && !isLoading\">\r\n  <kendo-contextmenu\r\n    #contextMenu\r\n    class=\"context-menu-item\"\r\n    *ngFor=\"let targetContextMenuSetting of contextMenuSettings\"\r\n    [target]=\"target\"\r\n    [size]=\"targetContextMenuSetting.Size ?? 'medium'\"\r\n    [kendoMenuHierarchyBinding]=\"targetContextMenuSetting.ContextMenuItems\"\r\n    childrenField=\"Value\"\r\n    separatorField=\"IsSeparator\"\r\n    (select)=\"onSelect($event, targetContextMenuSetting)\"\r\n    [filter]=\"targetContextMenuSetting.CSSSelectorFilter\"\r\n    (popupOpen)=\"popUpOpened(contextMenu)\">\r\n    <ng-template kendoMenuItemTemplate let-item=\"item\">\r\n      <div class=\"context-menu-item-container\" [class.has-icon]=\"item.data.Icon\" [ngClass]=\"item.data.Class\"\r\n        *ngIf=\"!item.data.IsSeparator\">\r\n        <fa-icon class=\"context-menu-item-icon\" [icon]=\"getFontAwesome(item.data.Icon, fontAweSomeService)\"\r\n          *ngIf=\"item.data.Icon\"></fa-icon>\r\n        <div class=\"context-menu-item-text\" *ngIf=\"item.data.Text\">{{ item.data.TranslatedText ?? item.data.Text }}\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </kendo-contextmenu>\r\n</div>\r\n\r\n<!-- Manual trigger from zgrid, ztree -->\r\n<div class=\"context-menu-container-manual-trigger-mode\" *ngIf=\"!target && !isLoading\">\r\n  <kendo-contextmenu\r\n    #contextMenu\r\n    class=\"context-menu-item\"\r\n    *ngFor=\"let targetContextMenuSetting of contextMenuSettings\"\r\n    [size]=\"targetContextMenuSetting.Size ?? 'medium'\"\r\n    [kendoMenuHierarchyBinding]=\"targetContextMenuSetting.ContextMenuItems\"\r\n    childrenField=\"Value\"\r\n    separatorField=\"IsSeparator\"\r\n    (select)=\"onSelect($event, targetContextMenuSetting)\"\r\n    [filter]=\"targetContextMenuSetting.CSSSelectorFilter\">\r\n    <ng-template kendoMenuItemTemplate let-item=\"item\">\r\n      <div class=\"context-menu-item-container\" [class.has-icon]=\"item.data.Icon\" [ngClass]=\"item.data.Class\"\r\n        *ngIf=\"!item.data.IsSeparator\">\r\n        <fa-icon class=\"context-menu-item-icon\" [icon]=\"getFontAwesome(item.data.Icon, fontAweSomeService)\"\r\n          *ngIf=\"item.data.Icon\"></fa-icon>\r\n        <div class=\"context-menu-item-text\" *ngIf=\"item.data.Text\">{{ item.data.TranslatedText ?? item.data.Text }}\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </kendo-contextmenu>\r\n</div>\r\n", styles: [".context-menu-item-container.has-icon{display:grid;grid-template-columns:20px auto}.context-menu-item-container.has-icon .context-menu-item-icon{padding-right:5px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.ZComponentService }, { type: i2.FontAweSomeService }, { type: i2.TranslationService }, { type: i2.UISignalService }]; }, propDecorators: { target: [{

package/esm2020/lib/embed-components/input-field-addons/input-field-addons.component.mjs CHANGED Viewed

@@ -80,9 +80,9 @@ export class InputFieldAddOnsComponent extends InputFieldBase {
         }
     }
 }
-InputFieldAddOnsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputFieldAddOnsComponent, deps: [{ token: i1.ZComponentService }, { token: i2.FontAweSomeService }, { token: i2.TranslationService }], target: i0.ɵɵFactoryTarget.Component });
-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 && addOn.IconList.length > 0\">\r\n    <div *ngFor=\"let item of addOn.IconList\">\r\n      <div kendoTooltip class=\"icon-button\" showOn=\"hover\" [tooltipWidth]=\"item.Width\" [position]=\"item.Position\">\r\n        <span (click)=\"onIconClick(item.Click)\" [title]=\"item.ToolTipText\" [style]=\"item.Style\" [class.clickable]=\"!!item.Click\">\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 && addOn.TextList.length > 0\">\r\n    <div *ngFor=\"let item of addOn.TextList\">\r\n      <div kendoTooltip class=\"icon-button\" showOn=\"hover\" [tooltipWidth]=\"item.Width\" [position]=\"item.Position\">\r\n        <span (click)=\"onIconClick(item.Click)\" [title]=\"item.ToolTipText\" [style]=\"item.Style\" [class.clickable]=\"!!item.Click\">\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 && addOn.ButtonList.length > 0\">\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-container span.clickable{cursor:pointer}.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: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i4.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: i6.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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputFieldAddOnsComponent, decorators: [{
+InputFieldAddOnsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: InputFieldAddOnsComponent, deps: [{ token: i1.ZComponentService }, { token: i2.FontAweSomeService }, { token: i2.TranslationService }], target: i0.ɵɵFactoryTarget.Component });
+InputFieldAddOnsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", 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 && addOn.IconList.length > 0\">\r\n    <div *ngFor=\"let item of addOn.IconList\">\r\n      <div kendoTooltip class=\"icon-button\" showOn=\"hover\" [tooltipWidth]=\"item.Width\" [position]=\"item.Position\">\r\n        <span (click)=\"onIconClick(item.Click)\" [title]=\"item.ToolTipText\" [style]=\"item.Style\" [class.clickable]=\"!!item.Click\">\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 && addOn.TextList.length > 0\">\r\n    <div *ngFor=\"let item of addOn.TextList\">\r\n      <div kendoTooltip class=\"icon-button\" showOn=\"hover\" [tooltipWidth]=\"item.Width\" [position]=\"item.Position\">\r\n        <span (click)=\"onIconClick(item.Click)\" [title]=\"item.ToolTipText\" [style]=\"item.Style\" [class.clickable]=\"!!item.Click\">\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 && addOn.ButtonList.length > 0\">\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-container span.clickable{cursor:pointer}.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: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i4.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "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: i6.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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: InputFieldAddOnsComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-input-field-addons", template: "<div [class]=\"'addons-container ' + position\" *ngIf=\"addOn\">\r\n  <div class=\"addons-icon\" *ngIf=\"addOn.IconList && addOn.IconList.length > 0\">\r\n    <div *ngFor=\"let item of addOn.IconList\">\r\n      <div kendoTooltip class=\"icon-button\" showOn=\"hover\" [tooltipWidth]=\"item.Width\" [position]=\"item.Position\">\r\n        <span (click)=\"onIconClick(item.Click)\" [title]=\"item.ToolTipText\" [style]=\"item.Style\" [class.clickable]=\"!!item.Click\">\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 && addOn.TextList.length > 0\">\r\n    <div *ngFor=\"let item of addOn.TextList\">\r\n      <div kendoTooltip class=\"icon-button\" showOn=\"hover\" [tooltipWidth]=\"item.Width\" [position]=\"item.Position\">\r\n        <span (click)=\"onIconClick(item.Click)\" [title]=\"item.ToolTipText\" [style]=\"item.Style\" [class.clickable]=\"!!item.Click\">\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 && addOn.ButtonList.length > 0\">\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-container span.clickable{cursor:pointer}.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"] }]
         }], ctorParameters: function () { return [{ type: i1.ZComponentService }, { type: i2.FontAweSomeService }, { type: i2.TranslationService }]; }, propDecorators: { position: [{

package/esm2020/lib/embed-components/page-loader/page-loader.component.mjs CHANGED Viewed

@@ -5,9 +5,9 @@ export class PageLoaderComponent {
     ngOnInit() {
     }
 }
-PageLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: PageLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PageLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: PageLoaderComponent, selector: "app-page-loader", ngImport: i0, template: "<div class=\"loader\"></div>\r\n", styles: [".loader{animation:rotate 1s infinite;height:50px;width:50px;margin:auto;margin-top:10vh}.loader:before,.loader:after{border-radius:50%;content:\"\";display:block;height:20px;width:20px}.loader:before{animation:ball1 1s infinite;background-color:#38c22e;box-shadow:30px 0 #f37932;margin-bottom:10px}.loader:after{animation:ball2 1s infinite;background-color:#f26a1b;box-shadow:30px 0 #3db93d}@keyframes rotate{0%{-webkit-transform:rotate(0deg) scale(.8);-moz-transform:rotate(0deg) scale(.8)}50%{-webkit-transform:rotate(360deg) scale(1.2);-moz-transform:rotate(360deg) scale(1.2)}to{-webkit-transform:rotate(720deg) scale(.8);-moz-transform:rotate(720deg) scale(.8)}}@keyframes ball1{0%{box-shadow:30px 0 #f37932}50%{box-shadow:0 0 #f37932;margin-bottom:0;-webkit-transform:translate(15px,15px);-moz-transform:translate(15px,15px)}to{box-shadow:30px 0 #f37932;margin-bottom:10px}}@keyframes ball2{0%{box-shadow:30px 0 #3db93d}50%{box-shadow:0 0 #3db93d;margin-top:-20px;-webkit-transform:translate(15px,15px);-moz-transform:translate(15px,15px)}to{box-shadow:30px 0 #3db93d;margin-top:0}}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: PageLoaderComponent, decorators: [{
+PageLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: PageLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PageLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: PageLoaderComponent, selector: "app-page-loader", ngImport: i0, template: "<div class=\"loader\"></div>\r\n", styles: [".loader{animation:rotate 1s infinite;height:50px;width:50px;margin:auto;margin-top:10vh}.loader:before,.loader:after{border-radius:50%;content:\"\";display:block;height:20px;width:20px}.loader:before{animation:ball1 1s infinite;background-color:#38c22e;box-shadow:30px 0 #f37932;margin-bottom:10px}.loader:after{animation:ball2 1s infinite;background-color:#f26a1b;box-shadow:30px 0 #3db93d}@keyframes rotate{0%{-webkit-transform:rotate(0deg) scale(.8);-moz-transform:rotate(0deg) scale(.8)}50%{-webkit-transform:rotate(360deg) scale(1.2);-moz-transform:rotate(360deg) scale(1.2)}to{-webkit-transform:rotate(720deg) scale(.8);-moz-transform:rotate(720deg) scale(.8)}}@keyframes ball1{0%{box-shadow:30px 0 #f37932}50%{box-shadow:0 0 #f37932;margin-bottom:0;-webkit-transform:translate(15px,15px);-moz-transform:translate(15px,15px)}to{box-shadow:30px 0 #f37932;margin-bottom:10px}}@keyframes ball2{0%{box-shadow:30px 0 #3db93d}50%{box-shadow:0 0 #3db93d;margin-top:-20px;-webkit-transform:translate(15px,15px);-moz-transform:translate(15px,15px)}to{box-shadow:30px 0 #3db93d;margin-top:0}}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: PageLoaderComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-page-loader", template: "<div class=\"loader\"></div>\r\n", styles: [".loader{animation:rotate 1s infinite;height:50px;width:50px;margin:auto;margin-top:10vh}.loader:before,.loader:after{border-radius:50%;content:\"\";display:block;height:20px;width:20px}.loader:before{animation:ball1 1s infinite;background-color:#38c22e;box-shadow:30px 0 #f37932;margin-bottom:10px}.loader:after{animation:ball2 1s infinite;background-color:#f26a1b;box-shadow:30px 0 #3db93d}@keyframes rotate{0%{-webkit-transform:rotate(0deg) scale(.8);-moz-transform:rotate(0deg) scale(.8)}50%{-webkit-transform:rotate(360deg) scale(1.2);-moz-transform:rotate(360deg) scale(1.2)}to{-webkit-transform:rotate(720deg) scale(.8);-moz-transform:rotate(720deg) scale(.8)}}@keyframes ball1{0%{box-shadow:30px 0 #f37932}50%{box-shadow:0 0 #f37932;margin-bottom:0;-webkit-transform:translate(15px,15px);-moz-transform:translate(15px,15px)}to{box-shadow:30px 0 #f37932;margin-bottom:10px}}@keyframes ball2{0%{box-shadow:30px 0 #3db93d}50%{box-shadow:0 0 #3db93d;margin-top:-20px;-webkit-transform:translate(15px,15px);-moz-transform:translate(15px,15px)}to{box-shadow:30px 0 #3db93d;margin-top:0}}\n"] }]
         }], ctorParameters: function () { return []; } });

package/esm2020/lib/embed-components/processing-record-loader/processing-record-loader.component.mjs CHANGED Viewed

@@ -5,9 +5,9 @@ export class ProcessingRecordLoaderComponent {
     ngOnInit() {
     }
 }
-ProcessingRecordLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ProcessingRecordLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ProcessingRecordLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ProcessingRecordLoaderComponent, selector: "processing-record-loader", ngImport: i0, template: "<div class=\"loader-container\">\r\n  <div class=\"ring\">Processing\r\n    <span></span>\r\n  </div>\r\n</div>\r\n", styles: [".loader-container{position:absolute;z-index:11;width:100vw;height:100vh;background:rgba(0,0,0,.7)}body{margin:0;padding:0;background:#262626}.ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:200px;height:200px;background:transparent;border:3px solid #3c3c3c;border-radius:50%;text-align:center;line-height:190px;font-family:sans-serif;font-size:20px;color:#cfbbff;letter-spacing:4px;text-transform:uppercase;text-shadow:0 0 10px rgb(207,187,255);box-shadow:0 0 20px #00000080}.ring:before{content:\"\";position:absolute;top:-3px;left:-3px;width:100%;height:100%;border:3px solid transparent;border-top:3px solid rgb(207,187,255);border-right:3px solid rgb(207,187,255);border-radius:50%;animation:animateC 2s linear infinite}span{display:block;position:absolute;top:calc(50% - 2px);left:50%;width:50%;height:4px;background:transparent;transform-origin:left;animation:animate 2s linear infinite}span:before{content:\"\";position:absolute;width:16px;height:16px;border-radius:50%;background:rgb(207,187,255);top:-6px;right:-8px;box-shadow:0 0 20px #cfbbff}@keyframes animateC{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes animate{0%{transform:rotate(45deg)}to{transform:rotate(405deg)}}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ProcessingRecordLoaderComponent, decorators: [{
+ProcessingRecordLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ProcessingRecordLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ProcessingRecordLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ProcessingRecordLoaderComponent, selector: "processing-record-loader", ngImport: i0, template: "<div class=\"loader-container\">\r\n  <div class=\"ring\">Processing\r\n    <span></span>\r\n  </div>\r\n</div>\r\n", styles: [".loader-container{position:absolute;z-index:11;width:100vw;height:100vh;background:rgba(0,0,0,.7)}body{margin:0;padding:0;background:#262626}.ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:200px;height:200px;background:transparent;border:3px solid #3c3c3c;border-radius:50%;text-align:center;line-height:190px;font-family:sans-serif;font-size:20px;color:#cfbbff;letter-spacing:4px;text-transform:uppercase;text-shadow:0 0 10px rgb(207,187,255);box-shadow:0 0 20px #00000080}.ring:before{content:\"\";position:absolute;top:-3px;left:-3px;width:100%;height:100%;border:3px solid transparent;border-top:3px solid rgb(207,187,255);border-right:3px solid rgb(207,187,255);border-radius:50%;animation:animateC 2s linear infinite}span{display:block;position:absolute;top:calc(50% - 2px);left:50%;width:50%;height:4px;background:transparent;transform-origin:left;animation:animate 2s linear infinite}span:before{content:\"\";position:absolute;width:16px;height:16px;border-radius:50%;background:rgb(207,187,255);top:-6px;right:-8px;box-shadow:0 0 20px #cfbbff}@keyframes animateC{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes animate{0%{transform:rotate(45deg)}to{transform:rotate(405deg)}}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ProcessingRecordLoaderComponent, decorators: [{
             type: Component,
             args: [{ selector: "processing-record-loader", template: "<div class=\"loader-container\">\r\n  <div class=\"ring\">Processing\r\n    <span></span>\r\n  </div>\r\n</div>\r\n", styles: [".loader-container{position:absolute;z-index:11;width:100vw;height:100vh;background:rgba(0,0,0,.7)}body{margin:0;padding:0;background:#262626}.ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:200px;height:200px;background:transparent;border:3px solid #3c3c3c;border-radius:50%;text-align:center;line-height:190px;font-family:sans-serif;font-size:20px;color:#cfbbff;letter-spacing:4px;text-transform:uppercase;text-shadow:0 0 10px rgb(207,187,255);box-shadow:0 0 20px #00000080}.ring:before{content:\"\";position:absolute;top:-3px;left:-3px;width:100%;height:100%;border:3px solid transparent;border-top:3px solid rgb(207,187,255);border-right:3px solid rgb(207,187,255);border-radius:50%;animation:animateC 2s linear infinite}span{display:block;position:absolute;top:calc(50% - 2px);left:50%;width:50%;height:4px;background:transparent;transform-origin:left;animation:animate 2s linear infinite}span:before{content:\"\";position:absolute;width:16px;height:16px;border-radius:50%;background:rgb(207,187,255);top:-6px;right:-8px;box-shadow:0 0 20px #cfbbff}@keyframes animateC{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes animate{0%{transform:rotate(45deg)}to{transform:rotate(405deg)}}\n"] }]
         }], ctorParameters: function () { return []; } });

package/esm2020/lib/embed-components/spinner/spinner.component.mjs CHANGED Viewed

@@ -18,9 +18,9 @@ export class SpinnerComponent extends FieldBase {
         this.componentService.decrementComponentCounterForField(this.data);
     }
 }
-SpinnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SpinnerComponent, deps: [{ token: i1.ZComponentService }, { token: i2.FontAweSomeService }], target: i0.ɵɵFactoryTarget.Component });
-SpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SpinnerComponent, selector: "app-spinner", usesInheritance: true, ngImport: i0, template: "<div\r\n  *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n  class=\"loader e1tag-style\" [style]=\"componentProperties.style.style\" [ngClass]=\"data.Class\"></div>\r\n", styles: [".loader{animation:rotate 1s infinite;height:50px;width:50px;margin:auto;margin-top:10vh}.loader:before,.loader:after{border-radius:50%;content:\"\";display:block;height:20px;width:20px}.loader:before{animation:ball1 1s infinite;background-color:#38c22e;box-shadow:30px 0 #f37932;margin-bottom:10px}.loader:after{animation:ball2 1s infinite;background-color:#f26a1b;box-shadow:30px 0 #3db93d}@keyframes rotate{0%{-webkit-transform:rotate(0deg) scale(.8);-moz-transform:rotate(0deg) scale(.8)}50%{-webkit-transform:rotate(360deg) scale(1.2);-moz-transform:rotate(360deg) scale(1.2)}to{-webkit-transform:rotate(720deg) scale(.8);-moz-transform:rotate(720deg) scale(.8)}}@keyframes ball1{0%{box-shadow:30px 0 #f37932}50%{box-shadow:0 0 #f37932;margin-bottom:0;-webkit-transform:translate(15px,15px);-moz-transform:translate(15px,15px)}to{box-shadow:30px 0 #f37932;margin-bottom:10px}}@keyframes ball2{0%{box-shadow:30px 0 #3db93d}50%{box-shadow:0 0 #3db93d;margin-top:-20px;-webkit-transform:translate(15px,15px);-moz-transform:translate(15px,15px)}to{box-shadow:30px 0 #3db93d;margin-top:0}}\n", ".loader{margin-top:0}\n"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SpinnerComponent, decorators: [{
+SpinnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: SpinnerComponent, deps: [{ token: i1.ZComponentService }, { token: i2.FontAweSomeService }], target: i0.ɵɵFactoryTarget.Component });
+SpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: SpinnerComponent, selector: "app-spinner", usesInheritance: true, ngImport: i0, template: "<div\r\n  *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n  class=\"loader e1tag-style\" [style]=\"componentProperties.style.style\" [ngClass]=\"data.Class\"></div>\r\n", styles: [".loader{animation:rotate 1s infinite;height:50px;width:50px;margin:auto;margin-top:10vh}.loader:before,.loader:after{border-radius:50%;content:\"\";display:block;height:20px;width:20px}.loader:before{animation:ball1 1s infinite;background-color:#38c22e;box-shadow:30px 0 #f37932;margin-bottom:10px}.loader:after{animation:ball2 1s infinite;background-color:#f26a1b;box-shadow:30px 0 #3db93d}@keyframes rotate{0%{-webkit-transform:rotate(0deg) scale(.8);-moz-transform:rotate(0deg) scale(.8)}50%{-webkit-transform:rotate(360deg) scale(1.2);-moz-transform:rotate(360deg) scale(1.2)}to{-webkit-transform:rotate(720deg) scale(.8);-moz-transform:rotate(720deg) scale(.8)}}@keyframes ball1{0%{box-shadow:30px 0 #f37932}50%{box-shadow:0 0 #f37932;margin-bottom:0;-webkit-transform:translate(15px,15px);-moz-transform:translate(15px,15px)}to{box-shadow:30px 0 #f37932;margin-bottom:10px}}@keyframes ball2{0%{box-shadow:30px 0 #3db93d}50%{box-shadow:0 0 #3db93d;margin-top:-20px;-webkit-transform:translate(15px,15px);-moz-transform:translate(15px,15px)}to{box-shadow:30px 0 #3db93d;margin-top:0}}\n", ".loader{margin-top:0}\n"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: SpinnerComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-spinner", template: "<div\r\n  *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n  class=\"loader e1tag-style\" [style]=\"componentProperties.style.style\" [ngClass]=\"data.Class\"></div>\r\n", styles: [".loader{animation:rotate 1s infinite;height:50px;width:50px;margin:auto;margin-top:10vh}.loader:before,.loader:after{border-radius:50%;content:\"\";display:block;height:20px;width:20px}.loader:before{animation:ball1 1s infinite;background-color:#38c22e;box-shadow:30px 0 #f37932;margin-bottom:10px}.loader:after{animation:ball2 1s infinite;background-color:#f26a1b;box-shadow:30px 0 #3db93d}@keyframes rotate{0%{-webkit-transform:rotate(0deg) scale(.8);-moz-transform:rotate(0deg) scale(.8)}50%{-webkit-transform:rotate(360deg) scale(1.2);-moz-transform:rotate(360deg) scale(1.2)}to{-webkit-transform:rotate(720deg) scale(.8);-moz-transform:rotate(720deg) scale(.8)}}@keyframes ball1{0%{box-shadow:30px 0 #f37932}50%{box-shadow:0 0 #f37932;margin-bottom:0;-webkit-transform:translate(15px,15px);-moz-transform:translate(15px,15px)}to{box-shadow:30px 0 #f37932;margin-bottom:10px}}@keyframes ball2{0%{box-shadow:30px 0 #3db93d}50%{box-shadow:0 0 #3db93d;margin-top:-20px;-webkit-transform:translate(15px,15px);-moz-transform:translate(15px,15px)}to{box-shadow:30px 0 #3db93d;margin-top:0}}\n", ".loader{margin-top:0}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.ZComponentService }, { type: i2.FontAweSomeService }]; } });

package/esm2020/lib/ficon/ficon.component.mjs CHANGED Viewed

@@ -38,9 +38,9 @@ export class FiconComponent {
         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: i1.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: i2.FloatingLabelComponent, selector: "kendo-floatinglabel", inputs: ["labelCssStyle", "labelCssClass", "id", "text", "optional"], outputs: ["positionChange"], exportAs: ["kendoFloatingLabel"] }, { type: i3.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FiconComponent, decorators: [{
+FiconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: FiconComponent, deps: [{ token: i1.FontAweSomeService }], target: i0.ɵɵFactoryTarget.Component });
+FiconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", 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: i2.FloatingLabelComponent, selector: "kendo-floatinglabel", inputs: ["labelCssStyle", "labelCssClass", "id", "text", "optional"], outputs: ["positionChange"], exportAs: ["kendoFloatingLabel"] }, { type: i3.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", 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: i1.FontAweSomeService }]; }, propDecorators: { data: [{

package/esm2020/lib/input-error-message/input-error-message.component.mjs CHANGED Viewed

@@ -44,9 +44,9 @@ export class InputErrorMessageComponent extends FieldBase {
         return isShow;
     }
 }
-InputErrorMessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputErrorMessageComponent, deps: [{ token: i1.ZComponentService }, { token: i2.FontAweSomeService }, { token: i2.ComponentErrorHandlerService }, { token: i2.TranslationService }], target: i0.ɵɵFactoryTarget.Component });
-InputErrorMessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: InputErrorMessageComponent, selector: "app-error", usesInheritance: true, ngImport: i0, template: "<div class=\"inputfield-error-msg\" *ngIf=\"IsShow()\">\r\n  <div *ngFor=\"let errMsg of errMsgList\">\r\n    <span #warning class=\"k-icon k-i-warning validation_icon\"></span>\r\n    <ion-label>{{errMsg}}</ion-label>\r\n  </div>\r\n</div>\r\n", styles: [".inputfield-error-msg{margin-top:5px;font-size:calc(var(--content-font-size) - 1px);color:var(--ion-color-danger)}.inputfield-error-msg span{margin:0 4px 0 2px;font-size:calc(var(--content-font-size) + 1px);top:-1px}\n"], components: [{ type: i3.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputErrorMessageComponent, decorators: [{
+InputErrorMessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: InputErrorMessageComponent, deps: [{ token: i1.ZComponentService }, { token: i2.FontAweSomeService }, { token: i2.ComponentErrorHandlerService }, { token: i2.TranslationService }], target: i0.ɵɵFactoryTarget.Component });
+InputErrorMessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: InputErrorMessageComponent, selector: "app-error", usesInheritance: true, ngImport: i0, template: "<div class=\"inputfield-error-msg\" *ngIf=\"IsShow()\">\r\n  <div *ngFor=\"let errMsg of errMsgList\">\r\n    <span #warning class=\"k-icon k-i-warning validation_icon\"></span>\r\n    <ion-label>{{errMsg}}</ion-label>\r\n  </div>\r\n</div>\r\n", styles: [".inputfield-error-msg{margin-top:5px;font-size:calc(var(--content-font-size) - 1px);color:var(--ion-color-danger)}.inputfield-error-msg span{margin:0 4px 0 2px;font-size:calc(var(--content-font-size) + 1px);top:-1px}\n"], components: [{ type: i3.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: InputErrorMessageComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-error", template: "<div class=\"inputfield-error-msg\" *ngIf=\"IsShow()\">\r\n  <div *ngFor=\"let errMsg of errMsgList\">\r\n    <span #warning class=\"k-icon k-i-warning validation_icon\"></span>\r\n    <ion-label>{{errMsg}}</ion-label>\r\n  </div>\r\n</div>\r\n", styles: [".inputfield-error-msg{margin-top:5px;font-size:calc(var(--content-font-size) - 1px);color:var(--ion-color-danger)}.inputfield-error-msg span{margin:0 4px 0 2px;font-size:calc(var(--content-font-size) + 1px);top:-1px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.ZComponentService }, { type: i2.FontAweSomeService }, { type: i2.ComponentErrorHandlerService }, { type: i2.TranslationService }]; } });

package/esm2020/lib/kcard/kcard.component.mjs CHANGED Viewed

@@ -81,9 +81,9 @@ export class KcardComponent extends ContainerFieldBase {
         });
     }
 }
-KcardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: KcardComponent, deps: [{ token: i1.ZComponentService }, { token: i2.MainService }, { token: i3.FontAweSomeService }], target: i0.ɵɵFactoryTarget.Component });
-KcardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: KcardComponent, selector: "app-kcard", usesInheritance: true, ngImport: i0, template: "<div class=\"kcard-container e1tag-container-style\"\r\n     *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     [ngClass]=\"data.Class\" [style]=\"componentProperties.containerStyle.style\" [class]=\"data.ComponentStyleType\">\r\n  <kendo-card [ngClass]=\"getClass(null, data)\" [style]=\"componentProperties.containerStyle.style1\"\r\n              [class]=\"data.ComponentStyleType\" class=\"e1tag-container-style1\">\r\n    <kendo-card-header class=\"k-hstack card-header e1tag-container-style2\" *ngIf=\"data.Icon || data.Title\"\r\n                       [style]=\"componentProperties.containerStyle.style2\">\r\n      <div kendoCardTitle class=\"card-header-content e1tag-container-style3\" [style]=\"componentProperties.containerStyle.style3\">\r\n        <div class=\"left-panel e1tag-container-style4\" [style]=\"componentProperties.containerStyle.style4\">\r\n          <fa-icon *ngIf=\"componentProperties.icon\" class=\"card-icon e1tag-container-style6\"\r\n                   [icon]=\"getFontAwesome(componentProperties.icon.toString(), fontAweSomeService)\"\r\n                   [style]=\"componentProperties.containerStyle.style6\"></fa-icon>\r\n          <ion-label *ngIf=\"componentProperties.title\" class=\"card-title e1tag-container-style7\"\r\n                     [style]=\"componentProperties.containerStyle.style7\">{{componentProperties.title}}</ion-label>\r\n        </div>\r\n        <div class=\"right-panel e1tag-container-style5\" *ngIf=\"data.EditButtonVisible\" [style]=\"componentProperties.containerStyle.style5\">\r\n          <div class=\"read-mode-btns\" *ngIf=\"!data['_EditMode'].value\">\r\n            <ion-button fill=\"outline\" size=\"default\" strong=\"true\" (click)=\"toggleEditMode()\">\r\n              <fa-icon icon=\"edit\"></fa-icon>\r\n              <span class=\"btn-label ion-text-capitalize\">{{getToolBarItemLabelName('Edit')}}</span>\r\n            </ion-button>\r\n          </div>\r\n          <div class=\"edit-mode-btns\" *ngIf=\"data['_EditMode'].value\">\r\n            <ion-button fill=\"solid\" size=\"default\" strong=\"true\" (click)=\"saveData()\">\r\n              <fa-icon icon=\"check\"></fa-icon>\r\n              <span class=\"btn-label ion-text-capitalize\">{{getToolBarItemLabelName('Save')}}</span>\r\n            </ion-button>\r\n            <ion-button fill=\"clear\" size=\"small\" strong=\"false\" (click)=\"cancelEdit()\">\r\n              <span class=\"btn-label ion-text-capitalize\">{{getToolBarItemLabelName('Cancel')}}</span>\r\n            </ion-button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </kendo-card-header>\r\n    <kendo-card-body>\r\n      <app-zdiv class=\"e1tag-container-style8\" [style]=\"componentProperties.containerStyle.style8\" [data]=\"data\"\r\n                [form]=\"myFormGroup ? myFormGroup : form\" [group]=\"group\">\r\n      </app-zdiv>\r\n\r\n      <!-- <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass :\r\n        ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n        *ngFor=\"let field of data.Value | divzlayout: data.zlayout\" [field]=\"field\" [group]=\"group\" [form]=\"form\"\r\n        id=\"{{field.Type}}-{{field.Name}}\">\r\n      </app-zformcontrol> -->\r\n    </kendo-card-body>\r\n  </kendo-card>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-card{width:100%!important;margin:auto auto 10px;border-radius:var(--ion-container-border-radius);margin-top:var(--container-margin-top)}:host ::ng-deep kendo-card.left-border-primary{border-left:5px solid var(--ion-color-primary)}:host ::ng-deep kendo-card>.card-header{color:var(--ion-color-primary-shade);padding:0;padding-top:--container-title-padding-top-and-bottom;padding-bottom:--container-title-padding-top-and-bottom}:host ::ng-deep kendo-card>.card-header>.card-header-content{display:flex;width:100%;font-size:var(--content-title-font-size)}:host ::ng-deep kendo-card>.card-header>.card-header-content>.left-panel{padding:12px 16px;flex-grow:1}:host ::ng-deep kendo-card>.card-header>.card-header-content>.left-panel>.card-icon{margin-right:15px}:host ::ng-deep kendo-card>.card-header>.card-header-content>.left-panel>.card-title{font-weight:600}:host ::ng-deep kendo-card>.card-header>.card-header-content>.right-panel{margin:auto 5px}:host ::ng-deep kendo-card>.card-header>.card-header-content>.right-panel ion-button{height:30px}:host ::ng-deep kendo-card>.card-header>.card-header-content>.right-panel ion-button .btn-label{padding-left:5px}:host ::ng-deep kendo-card .k-card-body{padding:5px 10px var(--container-padding-bottom) 5px}:host ::ng-deep kendo-card.body-padding-0 .k-card-body{padding:0}:host ::ng-deep kendo-card.small-header>.card-header>.card-header-content>.left-panel,:host ::ng-deep kendo-card.small-header>.card-header>.card-header-content>.right-panel{padding:2px 10px}:host ::ng-deep kendo-card.small-header>.card-header>.card-header-content>.left-panel>.card-title,:host ::ng-deep kendo-card.small-header>.card-header>.card-header-content>.right-panel>.card-title{font-size:.8em}.kcard-container{margin-left:5px}\n"], components: [{ type: i4.CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { type: i4.CardHeaderComponent, selector: "kendo-card-header" }, { type: i5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i6.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i6.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i4.CardBodyComponent, selector: "kendo-card-body" }, { type: i7.ZdivComponent, selector: "app-zdiv" }], directives: [{ type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.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"] }, { type: i4.CardTitleDirective, selector: "[kendoCardTitle]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: KcardComponent, decorators: [{
+KcardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: KcardComponent, deps: [{ token: i1.ZComponentService }, { token: i2.MainService }, { token: i3.FontAweSomeService }], target: i0.ɵɵFactoryTarget.Component });
+KcardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: KcardComponent, selector: "app-kcard", usesInheritance: true, ngImport: i0, template: "<div class=\"kcard-container e1tag-container-style\"\r\n     *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     [ngClass]=\"data.Class\" [style]=\"componentProperties.containerStyle.style\" [class]=\"data.ComponentStyleType\">\r\n  <kendo-card [ngClass]=\"getClass(null, data)\" [style]=\"componentProperties.containerStyle.style1\"\r\n              [class]=\"data.ComponentStyleType\" class=\"e1tag-container-style1\">\r\n    <kendo-card-header class=\"k-hstack card-header e1tag-container-style2\" *ngIf=\"data.Icon || data.Title\"\r\n                       [style]=\"componentProperties.containerStyle.style2\">\r\n      <div kendoCardTitle class=\"card-header-content e1tag-container-style3\" [style]=\"componentProperties.containerStyle.style3\">\r\n        <div class=\"left-panel e1tag-container-style4\" [style]=\"componentProperties.containerStyle.style4\">\r\n          <fa-icon *ngIf=\"componentProperties.icon\" class=\"card-icon e1tag-container-style6\"\r\n                   [icon]=\"getFontAwesome(componentProperties.icon.toString(), fontAweSomeService)\"\r\n                   [style]=\"componentProperties.containerStyle.style6\"></fa-icon>\r\n          <ion-label *ngIf=\"componentProperties.title\" class=\"card-title e1tag-container-style7\"\r\n                     [style]=\"componentProperties.containerStyle.style7\">{{componentProperties.title}}</ion-label>\r\n        </div>\r\n        <div class=\"right-panel e1tag-container-style5\" *ngIf=\"data.EditButtonVisible\" [style]=\"componentProperties.containerStyle.style5\">\r\n          <div class=\"read-mode-btns\" *ngIf=\"!data['_EditMode'].value\">\r\n            <ion-button fill=\"outline\" size=\"default\" strong=\"true\" (click)=\"toggleEditMode()\">\r\n              <fa-icon icon=\"edit\"></fa-icon>\r\n              <span class=\"btn-label ion-text-capitalize\">{{getToolBarItemLabelName('Edit')}}</span>\r\n            </ion-button>\r\n          </div>\r\n          <div class=\"edit-mode-btns\" *ngIf=\"data['_EditMode'].value\">\r\n            <ion-button fill=\"solid\" size=\"default\" strong=\"true\" (click)=\"saveData()\">\r\n              <fa-icon icon=\"check\"></fa-icon>\r\n              <span class=\"btn-label ion-text-capitalize\">{{getToolBarItemLabelName('Save')}}</span>\r\n            </ion-button>\r\n            <ion-button fill=\"clear\" size=\"small\" strong=\"false\" (click)=\"cancelEdit()\">\r\n              <span class=\"btn-label ion-text-capitalize\">{{getToolBarItemLabelName('Cancel')}}</span>\r\n            </ion-button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </kendo-card-header>\r\n    <kendo-card-body>\r\n      <app-zdiv class=\"e1tag-container-style8\" [style]=\"componentProperties.containerStyle.style8\" [data]=\"data\"\r\n                [form]=\"myFormGroup ? myFormGroup : form\" [group]=\"group\">\r\n      </app-zdiv>\r\n\r\n      <!-- <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass :\r\n        ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n        *ngFor=\"let field of data.Value | divzlayout: data.zlayout\" [field]=\"field\" [group]=\"group\" [form]=\"form\"\r\n        id=\"{{field.Type}}-{{field.Name}}\">\r\n      </app-zformcontrol> -->\r\n    </kendo-card-body>\r\n  </kendo-card>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-card{width:100%!important;margin:auto auto 10px;border-radius:var(--ion-container-border-radius);margin-top:var(--container-margin-top)}:host ::ng-deep kendo-card.left-border-primary{border-left:5px solid var(--ion-color-primary)}:host ::ng-deep kendo-card>.card-header{color:var(--ion-color-primary-shade);padding:0;padding-top:--container-title-padding-top-and-bottom;padding-bottom:--container-title-padding-top-and-bottom}:host ::ng-deep kendo-card>.card-header>.card-header-content{display:flex;width:100%;font-size:var(--content-title-font-size)}:host ::ng-deep kendo-card>.card-header>.card-header-content>.left-panel{padding:12px 16px;flex-grow:1}:host ::ng-deep kendo-card>.card-header>.card-header-content>.left-panel>.card-icon{margin-right:15px}:host ::ng-deep kendo-card>.card-header>.card-header-content>.left-panel>.card-title{font-weight:600}:host ::ng-deep kendo-card>.card-header>.card-header-content>.right-panel{margin:auto 5px}:host ::ng-deep kendo-card>.card-header>.card-header-content>.right-panel ion-button{height:30px}:host ::ng-deep kendo-card>.card-header>.card-header-content>.right-panel ion-button .btn-label{padding-left:5px}:host ::ng-deep kendo-card .k-card-body{padding:5px 10px var(--container-padding-bottom) 5px}:host ::ng-deep kendo-card.body-padding-0 .k-card-body{padding:0}:host ::ng-deep kendo-card.small-header>.card-header>.card-header-content>.left-panel,:host ::ng-deep kendo-card.small-header>.card-header>.card-header-content>.right-panel{padding:2px 10px}:host ::ng-deep kendo-card.small-header>.card-header>.card-header-content>.left-panel>.card-title,:host ::ng-deep kendo-card.small-header>.card-header>.card-header-content>.right-panel>.card-title{font-size:.8em}.kcard-container{margin-left:5px}\n"], components: [{ type: i4.CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { type: i4.CardHeaderComponent, selector: "kendo-card-header" }, { type: i5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i6.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i6.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i4.CardBodyComponent, selector: "kendo-card-body" }, { type: i7.ZdivComponent, selector: "app-zdiv" }], directives: [{ type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.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"] }, { type: i4.CardTitleDirective, selector: "[kendoCardTitle]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: KcardComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-kcard", template: "<div class=\"kcard-container e1tag-container-style\"\r\n     *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     [ngClass]=\"data.Class\" [style]=\"componentProperties.containerStyle.style\" [class]=\"data.ComponentStyleType\">\r\n  <kendo-card [ngClass]=\"getClass(null, data)\" [style]=\"componentProperties.containerStyle.style1\"\r\n              [class]=\"data.ComponentStyleType\" class=\"e1tag-container-style1\">\r\n    <kendo-card-header class=\"k-hstack card-header e1tag-container-style2\" *ngIf=\"data.Icon || data.Title\"\r\n                       [style]=\"componentProperties.containerStyle.style2\">\r\n      <div kendoCardTitle class=\"card-header-content e1tag-container-style3\" [style]=\"componentProperties.containerStyle.style3\">\r\n        <div class=\"left-panel e1tag-container-style4\" [style]=\"componentProperties.containerStyle.style4\">\r\n          <fa-icon *ngIf=\"componentProperties.icon\" class=\"card-icon e1tag-container-style6\"\r\n                   [icon]=\"getFontAwesome(componentProperties.icon.toString(), fontAweSomeService)\"\r\n                   [style]=\"componentProperties.containerStyle.style6\"></fa-icon>\r\n          <ion-label *ngIf=\"componentProperties.title\" class=\"card-title e1tag-container-style7\"\r\n                     [style]=\"componentProperties.containerStyle.style7\">{{componentProperties.title}}</ion-label>\r\n        </div>\r\n        <div class=\"right-panel e1tag-container-style5\" *ngIf=\"data.EditButtonVisible\" [style]=\"componentProperties.containerStyle.style5\">\r\n          <div class=\"read-mode-btns\" *ngIf=\"!data['_EditMode'].value\">\r\n            <ion-button fill=\"outline\" size=\"default\" strong=\"true\" (click)=\"toggleEditMode()\">\r\n              <fa-icon icon=\"edit\"></fa-icon>\r\n              <span class=\"btn-label ion-text-capitalize\">{{getToolBarItemLabelName('Edit')}}</span>\r\n            </ion-button>\r\n          </div>\r\n          <div class=\"edit-mode-btns\" *ngIf=\"data['_EditMode'].value\">\r\n            <ion-button fill=\"solid\" size=\"default\" strong=\"true\" (click)=\"saveData()\">\r\n              <fa-icon icon=\"check\"></fa-icon>\r\n              <span class=\"btn-label ion-text-capitalize\">{{getToolBarItemLabelName('Save')}}</span>\r\n            </ion-button>\r\n            <ion-button fill=\"clear\" size=\"small\" strong=\"false\" (click)=\"cancelEdit()\">\r\n              <span class=\"btn-label ion-text-capitalize\">{{getToolBarItemLabelName('Cancel')}}</span>\r\n            </ion-button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </kendo-card-header>\r\n    <kendo-card-body>\r\n      <app-zdiv class=\"e1tag-container-style8\" [style]=\"componentProperties.containerStyle.style8\" [data]=\"data\"\r\n                [form]=\"myFormGroup ? myFormGroup : form\" [group]=\"group\">\r\n      </app-zdiv>\r\n\r\n      <!-- <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass :\r\n        ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n        *ngFor=\"let field of data.Value | divzlayout: data.zlayout\" [field]=\"field\" [group]=\"group\" [form]=\"form\"\r\n        id=\"{{field.Type}}-{{field.Name}}\">\r\n      </app-zformcontrol> -->\r\n    </kendo-card-body>\r\n  </kendo-card>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-card{width:100%!important;margin:auto auto 10px;border-radius:var(--ion-container-border-radius);margin-top:var(--container-margin-top)}:host ::ng-deep kendo-card.left-border-primary{border-left:5px solid var(--ion-color-primary)}:host ::ng-deep kendo-card>.card-header{color:var(--ion-color-primary-shade);padding:0;padding-top:--container-title-padding-top-and-bottom;padding-bottom:--container-title-padding-top-and-bottom}:host ::ng-deep kendo-card>.card-header>.card-header-content{display:flex;width:100%;font-size:var(--content-title-font-size)}:host ::ng-deep kendo-card>.card-header>.card-header-content>.left-panel{padding:12px 16px;flex-grow:1}:host ::ng-deep kendo-card>.card-header>.card-header-content>.left-panel>.card-icon{margin-right:15px}:host ::ng-deep kendo-card>.card-header>.card-header-content>.left-panel>.card-title{font-weight:600}:host ::ng-deep kendo-card>.card-header>.card-header-content>.right-panel{margin:auto 5px}:host ::ng-deep kendo-card>.card-header>.card-header-content>.right-panel ion-button{height:30px}:host ::ng-deep kendo-card>.card-header>.card-header-content>.right-panel ion-button .btn-label{padding-left:5px}:host ::ng-deep kendo-card .k-card-body{padding:5px 10px var(--container-padding-bottom) 5px}:host ::ng-deep kendo-card.body-padding-0 .k-card-body{padding:0}:host ::ng-deep kendo-card.small-header>.card-header>.card-header-content>.left-panel,:host ::ng-deep kendo-card.small-header>.card-header>.card-header-content>.right-panel{padding:2px 10px}:host ::ng-deep kendo-card.small-header>.card-header>.card-header-content>.left-panel>.card-title,:host ::ng-deep kendo-card.small-header>.card-header>.card-header-content>.right-panel>.card-title{font-size:.8em}.kcard-container{margin-left:5px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.ZComponentService }, { type: i2.MainService }, { type: i3.FontAweSomeService }]; } });

package/esm2020/lib/kmenu/kmenu.component.mjs CHANGED Viewed

@@ -37,9 +37,9 @@ export class KmenuComponent extends ContainerFieldBase {
         }
     }
 }
-KmenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: KmenuComponent, deps: [{ token: i1.ZComponentService }, { token: i2.FontAweSomeService }], target: i0.ɵɵFactoryTarget.Component });
-KmenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: KmenuComponent, selector: "app-kmenu", usesInheritance: true, ngImport: i0, template: "<div class=\"kmenu-container e1tag-container-style\"\r\n  *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n  [ngClass]=\"data.Class\" [style]=\"componentProperties.containerStyle.style\" [class]=\"data.ComponentStyleType\">\r\n  <kendo-menu [items]=\"menuItems\" class=\"menu-item-container e1tag-container-style1\"\r\n    [style]=\"componentProperties.containerStyle.style1\" (select)=\"onItemClick($event)\"\r\n    [vertical]=\"data['IsVertical'] ?? false\">\r\n    <ng-template kendoMenuItemTemplate let-item=\"item\">\r\n      <div class=\"menu-item-content e1tag-container-style2\"\r\n        [style]=\"componentProperties.containerStyle.style2 + ' ' + item.style2\">\r\n        <fa-icon *ngIf=\"!!item.faIcon\" [icon]=\"getFontAwesome(item.faIcon, fontAweSomeService)\"\r\n          [style]=\"componentProperties.containerStyle.style3 + ' ' + item.style3\"\r\n          class=\"e1tag-container-style3\"></fa-icon>\r\n        <span class=\"menu-item-label e1tag-container-style4\"\r\n          [style]=\"componentProperties.containerStyle.style4 + ' ' + item.style4\">{{item.label}}</span>\r\n        <ion-badge class=\"menu-item-counter e1tag-container-style5\" color=\"danger\" *ngIf=\"!!item.counter\"\r\n          [style]=\"componentProperties.containerStyle.style5 + ' ' + item.style5\">{{item.counter}}</ion-badge>\r\n      </div>\r\n    </ng-template>\r\n  </kendo-menu>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-menu .menu-item-content{gap:8px;display:flex}:host ::ng-deep kendo-menu .k-menu{font-size:16px}:host ::ng-deep kendo-menu .k-menu:not(.k-context-menu)>.k-item{color:var(--ion-color-primary)}\n"], components: [{ type: i3.MenuComponent, selector: "kendo-menu", inputs: ["menuItemTemplate", "ariaRole", "menuItemLinkTemplate"], outputs: ["select", "open", "close"], exportAs: ["kendoMenu"] }, { 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: i5.IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.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"] }, { type: i3.ItemTemplateDirective, selector: "[kendoMenuItemTemplate]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: KmenuComponent, decorators: [{
+KmenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: KmenuComponent, deps: [{ token: i1.ZComponentService }, { token: i2.FontAweSomeService }], target: i0.ɵɵFactoryTarget.Component });
+KmenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: KmenuComponent, selector: "app-kmenu", usesInheritance: true, ngImport: i0, template: "<div class=\"kmenu-container e1tag-container-style\"\r\n  *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n  [ngClass]=\"data.Class\" [style]=\"componentProperties.containerStyle.style\" [class]=\"data.ComponentStyleType\">\r\n  <kendo-menu [items]=\"menuItems\" class=\"menu-item-container e1tag-container-style1\"\r\n    [style]=\"componentProperties.containerStyle.style1\" (select)=\"onItemClick($event)\"\r\n    [vertical]=\"data['IsVertical'] ?? false\">\r\n    <ng-template kendoMenuItemTemplate let-item=\"item\">\r\n      <div class=\"menu-item-content e1tag-container-style2\"\r\n        [style]=\"componentProperties.containerStyle.style2 + ' ' + item.style2\">\r\n        <fa-icon *ngIf=\"!!item.faIcon\" [icon]=\"getFontAwesome(item.faIcon, fontAweSomeService)\"\r\n          [style]=\"componentProperties.containerStyle.style3 + ' ' + item.style3\"\r\n          class=\"e1tag-container-style3\"></fa-icon>\r\n        <span class=\"menu-item-label e1tag-container-style4\"\r\n          [style]=\"componentProperties.containerStyle.style4 + ' ' + item.style4\">{{item.label}}</span>\r\n        <ion-badge class=\"menu-item-counter e1tag-container-style5\" color=\"danger\" *ngIf=\"!!item.counter\"\r\n          [style]=\"componentProperties.containerStyle.style5 + ' ' + item.style5\">{{item.counter}}</ion-badge>\r\n      </div>\r\n    </ng-template>\r\n  </kendo-menu>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-menu .menu-item-content{gap:8px;display:flex}:host ::ng-deep kendo-menu .k-menu{font-size:16px}:host ::ng-deep kendo-menu .k-menu:not(.k-context-menu)>.k-item{color:var(--ion-color-primary)}\n"], components: [{ type: i3.MenuComponent, selector: "kendo-menu", inputs: ["menuItemTemplate", "ariaRole", "menuItemLinkTemplate"], outputs: ["select", "open", "close"], exportAs: ["kendoMenu"] }, { 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: i5.IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.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"] }, { type: i3.ItemTemplateDirective, selector: "[kendoMenuItemTemplate]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: KmenuComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-kmenu", template: "<div class=\"kmenu-container e1tag-container-style\"\r\n  *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n  [ngClass]=\"data.Class\" [style]=\"componentProperties.containerStyle.style\" [class]=\"data.ComponentStyleType\">\r\n  <kendo-menu [items]=\"menuItems\" class=\"menu-item-container e1tag-container-style1\"\r\n    [style]=\"componentProperties.containerStyle.style1\" (select)=\"onItemClick($event)\"\r\n    [vertical]=\"data['IsVertical'] ?? false\">\r\n    <ng-template kendoMenuItemTemplate let-item=\"item\">\r\n      <div class=\"menu-item-content e1tag-container-style2\"\r\n        [style]=\"componentProperties.containerStyle.style2 + ' ' + item.style2\">\r\n        <fa-icon *ngIf=\"!!item.faIcon\" [icon]=\"getFontAwesome(item.faIcon, fontAweSomeService)\"\r\n          [style]=\"componentProperties.containerStyle.style3 + ' ' + item.style3\"\r\n          class=\"e1tag-container-style3\"></fa-icon>\r\n        <span class=\"menu-item-label e1tag-container-style4\"\r\n          [style]=\"componentProperties.containerStyle.style4 + ' ' + item.style4\">{{item.label}}</span>\r\n        <ion-badge class=\"menu-item-counter e1tag-container-style5\" color=\"danger\" *ngIf=\"!!item.counter\"\r\n          [style]=\"componentProperties.containerStyle.style5 + ' ' + item.style5\">{{item.counter}}</ion-badge>\r\n      </div>\r\n    </ng-template>\r\n  </kendo-menu>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-menu .menu-item-content{gap:8px;display:flex}:host ::ng-deep kendo-menu .k-menu{font-size:16px}:host ::ng-deep kendo-menu .k-menu:not(.k-context-menu)>.k-item{color:var(--ion-color-primary)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.ZComponentService }, { type: i2.FontAweSomeService }]; } });

package/esm2020/lib/kscrollview/kscrollview.component.mjs CHANGED Viewed

@@ -68,9 +68,9 @@ export class KScrollViewComponent extends ContainerFieldBase {
         }
     }
 }
-KScrollViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: KScrollViewComponent, deps: [{ token: i1.ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-KScrollViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: KScrollViewComponent, selector: "app-kscrollview", usesInheritance: true, ngImport: i0, 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"], components: [{ type: i2.ScrollViewComponent, selector: "kendo-scrollview", inputs: ["data", "activeIndex", "width", "height", "endless", "pagerOverlay", "animate", "pageable", "arrows"], outputs: ["itemChanged", "activeIndexChange"], exportAs: ["kendoScrollView"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: KScrollViewComponent, decorators: [{
+KScrollViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: KScrollViewComponent, deps: [{ token: i1.ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
+KScrollViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: KScrollViewComponent, selector: "app-kscrollview", usesInheritance: true, ngImport: i0, 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"], components: [{ type: i2.ScrollViewComponent, selector: "kendo-scrollview", inputs: ["data", "activeIndex", "width", "height", "endless", "pagerOverlay", "animate", "pageable", "arrows"], outputs: ["itemChanged", "activeIndexChange"], exportAs: ["kendoScrollView"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: KScrollViewComponent, decorators: [{
             type: Component,
             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: i1.ZComponentService }]; } });

package/esm2020/lib/ksplitter/ksplitter.component.mjs CHANGED Viewed

@@ -37,9 +37,9 @@ export class KsplitterComponent extends ContainerFieldBase {
         }
     }
 }
-KsplitterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: KsplitterComponent, deps: [{ token: i1.ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-KsplitterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: KsplitterComponent, selector: "app-ksplitter", viewQueries: [{ propertyName: "splitter", first: true, predicate: SplitterComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ksplitter-container e1tag-container-style\"\r\n  *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n  [ngClass]=\"data.Class\" [style]=\"componentProperties.containerStyle.style\" [class]=\"data.ComponentStyleType\">\r\n  <kendo-splitter #splitter [orientation]=\"data.Orientation || 'horizontal'\" class=\"e1tag-container-style1\"\r\n    [style]=\"componentProperties.containerStyle.style1\">\r\n    <kendo-splitter-pane  *ngFor=\"let item of data.PanelItems; let i = index\"\r\n      [resizable]=\"item.Resizable != undefined ? item.Resizable : true\"\r\n      [collapsible]=\"item.AllowCollapse != undefined ? item.AllowCollapse : true\" [size]=\"item.Size\"\r\n      class=\"e1tag-container-style2\" [style]=\"componentProperties.containerStyle.style2 + item.Style\"\r\n      [min]=\"item.MinWidth\" [max]=\"item.MaxWidth\"\r\n      (collapsedChange)=\"OnCollapse($event, item)\">\r\n      <app-zdiv [style]=\"componentProperties.containerStyle.style3\" class=\"e1tag-container-style3\"\r\n        [data]=\"data | panelAreaFilter: i + ''\" [form]=\"form\" [group]=\"group\" [containerField]=\"containerField\">\r\n      </app-zdiv>\r\n    </kendo-splitter-pane>\r\n  </kendo-splitter>\r\n</div>\r\n", styles: [""], components: [{ type: i2.SplitterComponent, selector: "kendo-splitter", inputs: ["orientation", "resizeStep"], outputs: ["layoutChange"], exportAs: ["kendoSplitter"] }, { type: i2.SplitterPaneComponent, selector: "kendo-splitter-pane", inputs: ["order", "size", "separatorLabel", "min", "max", "resizable", "collapsible", "scrollable", "collapsed", "orientation", "containsSplitter", "overlayContent"], outputs: ["sizeChange", "collapsedChange"], exportAs: ["kendoSplitterPane"] }, { type: i3.ZdivComponent, selector: "app-zdiv" }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.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"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "panelAreaFilter": i6.PanelAreaFilter } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: KsplitterComponent, decorators: [{
+KsplitterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: KsplitterComponent, deps: [{ token: i1.ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
+KsplitterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: KsplitterComponent, selector: "app-ksplitter", viewQueries: [{ propertyName: "splitter", first: true, predicate: SplitterComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ksplitter-container e1tag-container-style\"\r\n  *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n  [ngClass]=\"data.Class\" [style]=\"componentProperties.containerStyle.style\" [class]=\"data.ComponentStyleType\">\r\n  <kendo-splitter #splitter [orientation]=\"data.Orientation || 'horizontal'\" class=\"e1tag-container-style1\"\r\n    [style]=\"componentProperties.containerStyle.style1\">\r\n    <kendo-splitter-pane  *ngFor=\"let item of data.PanelItems; let i = index\"\r\n      [resizable]=\"item.Resizable != undefined ? item.Resizable : true\"\r\n      [collapsible]=\"item.AllowCollapse != undefined ? item.AllowCollapse : true\" [size]=\"item.Size\"\r\n      class=\"e1tag-container-style2\" [style]=\"componentProperties.containerStyle.style2 + item.Style\"\r\n      [min]=\"item.MinWidth\" [max]=\"item.MaxWidth\"\r\n      (collapsedChange)=\"OnCollapse($event, item)\">\r\n      <app-zdiv [style]=\"componentProperties.containerStyle.style3\" class=\"e1tag-container-style3\"\r\n        [data]=\"data | panelAreaFilter: i + ''\" [form]=\"form\" [group]=\"group\" [containerField]=\"containerField\">\r\n      </app-zdiv>\r\n    </kendo-splitter-pane>\r\n  </kendo-splitter>\r\n</div>\r\n", styles: [""], components: [{ type: i2.SplitterComponent, selector: "kendo-splitter", inputs: ["orientation"], outputs: ["layoutChange"], exportAs: ["kendoSplitter"] }, { type: i2.SplitterPaneComponent, selector: "kendo-splitter-pane", inputs: ["order", "size", "min", "max", "resizable", "collapsible", "scrollable", "collapsed", "orientation", "containsSplitter", "overlayContent"], outputs: ["sizeChange", "collapsedChange"], exportAs: ["kendoSplitterPane"] }, { type: i3.ZdivComponent, selector: "app-zdiv" }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.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"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "panelAreaFilter": i6.PanelAreaFilter } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: KsplitterComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-ksplitter", template: "<div class=\"ksplitter-container e1tag-container-style\"\r\n  *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n  [ngClass]=\"data.Class\" [style]=\"componentProperties.containerStyle.style\" [class]=\"data.ComponentStyleType\">\r\n  <kendo-splitter #splitter [orientation]=\"data.Orientation || 'horizontal'\" class=\"e1tag-container-style1\"\r\n    [style]=\"componentProperties.containerStyle.style1\">\r\n    <kendo-splitter-pane  *ngFor=\"let item of data.PanelItems; let i = index\"\r\n      [resizable]=\"item.Resizable != undefined ? item.Resizable : true\"\r\n      [collapsible]=\"item.AllowCollapse != undefined ? item.AllowCollapse : true\" [size]=\"item.Size\"\r\n      class=\"e1tag-container-style2\" [style]=\"componentProperties.containerStyle.style2 + item.Style\"\r\n      [min]=\"item.MinWidth\" [max]=\"item.MaxWidth\"\r\n      (collapsedChange)=\"OnCollapse($event, item)\">\r\n      <app-zdiv [style]=\"componentProperties.containerStyle.style3\" class=\"e1tag-container-style3\"\r\n        [data]=\"data | panelAreaFilter: i + ''\" [form]=\"form\" [group]=\"group\" [containerField]=\"containerField\">\r\n      </app-zdiv>\r\n    </kendo-splitter-pane>\r\n  </kendo-splitter>\r\n</div>\r\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i1.ZComponentService }]; }, propDecorators: { splitter: [{