@inspark/inspark-components 19.0.41 → 19.0.43

package/full/fesm2022/inspark-inspark-components.mjs

@@ -10,14 +10,14 @@ export { SharedModule } from 'primeng/api';
 import * as i1$4 from 'primeng/dynamicdialog';
 import { DynamicDialogRef, DynamicDialogComponent } from 'primeng/dynamicdialog';
 import { Subject } from 'rxjs';
+import * as i1$2 from '@angular/common';
+import { CommonModule } from '@angular/common';
 import * as i2$1 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
 import * as i2$3 from 'ng-inline-svg-2';
 import { InlineSVGModule } from 'ng-inline-svg-2';
 import * as i2$2 from 'primeng/table';
 import { Table, TableService, TableModule } from 'primeng/table';
-import * as i1$2 from '@angular/common';
-import { CommonModule } from '@angular/common';
 import * as i5 from 'primeng/dropdown';
 import { DropdownModule } from 'primeng/dropdown';
 import * as i6 from 'primeng/multiselect';
@@ -28,24 +28,24 @@ export { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { CheckboxModule } from 'primeng/checkbox';
 import * as i1$3 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import * as i3$1 from 'primeng/menu';
+import * as i3$2 from 'primeng/menu';
 import { Menu, MenuModule } from 'primeng/menu';
 export { MenuModule } from 'primeng/menu';
 import { SliderModule } from 'primeng/slider';
 export { SliderModule } from 'primeng/slider';
 import * as i2$4 from 'primeng/treetable';
 import { TreeTableModule } from 'primeng/treetable';
-import * as i2$5 from 'primeng/radiobutton';
+import * as i3 from 'primeng/radiobutton';
 import { RadioButtonModule } from 'primeng/radiobutton';
 export { RadioButtonModule } from 'primeng/radiobutton';
-import * as i3 from 'primeng/autocomplete';
+import * as i3$1 from 'primeng/autocomplete';
 import { AutoCompleteModule } from 'primeng/autocomplete';
 import { HttpClientModule } from '@angular/common/http';
 import { BreadcrumbModule } from 'primeng/breadcrumb';
 export { BreadcrumbModule } from 'primeng/breadcrumb';
 import { TreeModule } from 'primeng/tree';
 export { TreeModule } from 'primeng/tree';
-import * as i3$2 from 'primeng/select';
+import * as i3$3 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
 
 class PropertyValuePipe {
@@ -2984,25 +2984,22 @@ function RadiobuttonComponent_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementContainerStart(0);
     i0.ɵɵelementStart(1, "p-radioButton", 1);
-    i0.ɵɵlistener("onClick", function RadiobuttonComponent_ng_container_0_Template_p_radioButton_onClick_1_listener() { const element_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onChangeEvent(element_r2)); });
-    i0.ɵɵtwoWayListener("ngModelChange", function RadiobuttonComponent_ng_container_0_Template_p_radioButton_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.item, $event) || (ctx_r2.item = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function RadiobuttonComponent_ng_container_0_Template_p_radioButton_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onModelChange($event)); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(2, "label", 2);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const element_r2 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext();
+    const element_r3 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵclassMapInterpolate1("u-margin-left-tiny u-vertical-align-middle field_", ctx_r2.name, "");
-    i0.ɵɵproperty("inputId", ctx_r2.name + "-" + element_r2.id);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.item);
-    i0.ɵɵproperty("name", ctx_r2.name)("value", element_r2.id)("disabled", ctx_r2.disabled);
+    i0.ɵɵclassMapInterpolate1("u-margin-left-tiny u-vertical-align-middle field_", ctx_r1.name, "");
+    i0.ɵɵproperty("inputId", ctx_r1.name + "-" + element_r3.id)("ngModel", ctx_r1.item)("name", ctx_r1.name)("value", element_r3.id)("disabled", ctx_r1.disabled);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("for", ctx_r2.name + "-" + element_r2.id);
+    i0.ɵɵproperty("for", ctx_r1.name + "-" + element_r3.id);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", element_r2[ctx_r2.keyLabel], " ");
+    i0.ɵɵtextInterpolate1(" ", element_r3[ctx_r1.keyLabel], " ");
 } }
 class RadiobuttonComponent {
     constructor() {
@@ -3014,19 +3011,24 @@ class RadiobuttonComponent {
         this.id = null;
         this.change = new EventEmitter();
     }
+    onModelChange(id) {
+        this.item = id;
+        const value = (this.values || []).find(element => element && String(element.id) === String(id));
+        this.onChangeEvent(value);
+    }
     onChangeEvent(value) {
         this.change.next({ name: this.name, value });
     }
     static { this.ɵfac = function RadiobuttonComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RadiobuttonComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RadiobuttonComponent, selectors: [["in-radiobutton"]], inputs: { name: "name", label: "label", required: "required", error: "error", placeholder: "placeholder", id: "id", disabled: "disabled", value: "value", values: "values", keyLabel: "keyLabel", item: "item" }, outputs: { change: "change" }, standalone: false, decls: 1, vars: 1, consts: [[4, "ngFor", "ngForOf"], [3, "onClick", "ngModelChange", "inputId", "ngModel", "name", "value", "disabled"], [1, "p-radiobutton-label", "u-vertical-align-middle", 3, "for"]], template: function RadiobuttonComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RadiobuttonComponent, selectors: [["in-radiobutton"]], inputs: { name: "name", label: "label", required: "required", error: "error", placeholder: "placeholder", id: "id", disabled: "disabled", value: "value", values: "values", keyLabel: "keyLabel", item: "item" }, outputs: { change: "change" }, standalone: false, decls: 1, vars: 1, consts: [[4, "ngFor", "ngForOf"], [3, "ngModelChange", "inputId", "ngModel", "name", "value", "disabled"], [1, "p-radiobutton-label", "u-vertical-align-middle", 3, "for"]], template: function RadiobuttonComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, RadiobuttonComponent_ng_container_0_Template, 4, 10, "ng-container", 0);
         } if (rf & 2) {
             i0.ɵɵproperty("ngForOf", ctx.values);
-        } }, dependencies: [i2$1.NgControlStatus, i2$1.NgModel, i2$5.RadioButton], encapsulation: 2, changeDetection: 0 }); }
+        } }, dependencies: [i1$2.NgForOf, i2$1.NgControlStatus, i2$1.NgModel, i3.RadioButton], encapsulation: 2, changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RadiobuttonComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'in-radiobutton', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngFor=\"let element of values\">\n  <p-radioButton\n    class=\"u-margin-left-tiny u-vertical-align-middle field_{{name}}\"\n    (onClick)=\"onChangeEvent(element)\"\n    [inputId]=\"name + '-' + element.id\"\n    [(ngModel)]=\"item\"\n    [name]=\"name\"\n    [value]=\"element.id\"\n    [disabled]=\"disabled\">\n  </p-radioButton>\n  <label\n    class=\"p-radiobutton-label u-vertical-align-middle\"\n    [for]=\"name + '-' + element.id\">\n    {{ element[keyLabel] }}\n  </label>\n</ng-container>\n" }]
+        args: [{ standalone: false, selector: 'in-radiobutton', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngFor=\"let element of values\">\n  <p-radioButton\n    class=\"u-margin-left-tiny u-vertical-align-middle field_{{name}}\"\n    [inputId]=\"name + '-' + element.id\"\n    [ngModel]=\"item\"\n    (ngModelChange)=\"onModelChange($event)\"\n    [name]=\"name\"\n    [value]=\"element.id\"\n    [disabled]=\"disabled\">\n  </p-radioButton>\n  <label\n    class=\"p-radiobutton-label u-vertical-align-middle\"\n    [for]=\"name + '-' + element.id\">\n    {{ element[keyLabel] }}\n  </label>\n</ng-container>\n" }]
     }], () => [], { name: [{
             type: Input
         }], label: [{
@@ -3592,7 +3594,7 @@ class SelectListComponent {
             i0.ɵɵadvance(2);
             i0.ɵɵpropertyInterpolate("label", i0.ɵɵpipeBind1(12, 10, "Apply"));
             i0.ɵɵproperty("title", i0.ɵɵpipeBind1(13, 12, "Select an action"));
-        } }, dependencies: [ButtonComponent, ComponentContainerComponent, i1.TranslatePipe], styles: [".buttons[_ngcontent-%COMP%]{text-align:right}.buttons[_ngcontent-%COMP%]   p-button[_ngcontent-%COMP%]{margin-left:8px}.container[_ngcontent-%COMP%]{padding:12px}[_nghost-%COMP%]     .c-select_block{position:relative;left:10px;width:30%}[_nghost-%COMP%]     .c-input_small{width:50%}[_nghost-%COMP%]     .my-tree{width:100%;display:inline-block;position:relative}[_nghost-%COMP%]     .my-tree .c-inputtext{width:500px}"] }); }
+        } }, dependencies: [i1$2.NgForOf, i1$2.NgIf, i1$2.NgTemplateOutlet, ButtonComponent, ComponentContainerComponent, i1.TranslatePipe], styles: [".buttons[_ngcontent-%COMP%]{text-align:right}.buttons[_ngcontent-%COMP%]   p-button[_ngcontent-%COMP%]{margin-left:8px}.container[_ngcontent-%COMP%]{padding:12px}[_nghost-%COMP%]     .c-select_block{position:relative;left:10px;width:30%}[_nghost-%COMP%]     .c-input_small{width:50%}[_nghost-%COMP%]     .my-tree{width:100%;display:inline-block;position:relative}[_nghost-%COMP%]     .my-tree .c-inputtext{width:500px}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SelectListComponent, [{
         type: Component,
@@ -3784,7 +3786,7 @@ class ModalInputTextComponent {
             i0.ɵɵadvance(2);
             i0.ɵɵpropertyInterpolate("label", i0.ɵɵpipeBind1(12, 14, "Apply"));
             i0.ɵɵproperty("name", "Apply")("disabled", ctx.checkSelected())("title", i0.ɵɵpipeBind1(13, 16, "Select an action"));
-        } }, dependencies: [i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.MaxLengthValidator, i2$1.NgModel, ButtonComponent, ComponentContainerComponent, i1.TranslatePipe], styles: [".buttons[_ngcontent-%COMP%]{text-align:right}.buttons[_ngcontent-%COMP%]   p-button[_ngcontent-%COMP%]{margin-left:8px}.container[_ngcontent-%COMP%]{padding:12px}[_nghost-%COMP%]     .c-select_block{position:relative;left:10px;width:30%}[_nghost-%COMP%]     .c-input_small{width:50%}[_nghost-%COMP%]     .my-tree{width:100%;display:inline-block;position:relative}[_nghost-%COMP%]     .my-tree .c-inputtext{width:500px}"] }); }
+        } }, dependencies: [i1$2.NgForOf, i1$2.NgIf, i1$2.NgTemplateOutlet, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.MaxLengthValidator, i2$1.NgModel, ButtonComponent, ComponentContainerComponent, i1.TranslatePipe], styles: [".buttons[_ngcontent-%COMP%]{text-align:right}.buttons[_ngcontent-%COMP%]   p-button[_ngcontent-%COMP%]{margin-left:8px}.container[_ngcontent-%COMP%]{padding:12px}[_nghost-%COMP%]     .c-select_block{position:relative;left:10px;width:30%}[_nghost-%COMP%]     .c-input_small{width:50%}[_nghost-%COMP%]     .my-tree{width:100%;display:inline-block;position:relative}[_nghost-%COMP%]     .my-tree .c-inputtext{width:500px}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ModalInputTextComponent, [{
         type: Component,
@@ -4205,7 +4207,7 @@ class AutoCompleteComponent {
             i0.ɵɵproperty("styleClass", ctx.styleClass);
             i0.ɵɵtwoWayProperty("ngModel", ctx.value);
             i0.ɵɵproperty("suggestions", ctx.suggestions)("placeholder", ctx.placeholder)("field", ctx.field)("dropdown", ctx.dropdown)("multiple", ctx.multiple)("forceSelection", ctx.forceSelection)("minLength", ctx.minLength)("delay", ctx.delay)("disabled", ctx.disabled)("appendTo", ctx.appendTo)("dropdownMode", ctx.dropdownMode)("virtualScroll", ctx.virtualScroll)("virtualScrollItemSize", ctx.virtualScrollItemSize)("emptyMessage", ctx.emptyMessage)("inputStyle", ctx.inputStyle)("inputStyleClass", ctx.inputStyleClass)("dropdownIcon", ctx.dropdownIcon);
-        } }, dependencies: [i1$2.NgIf, i2$1.NgControlStatus, i2$1.NgModel, i3.AutoComplete, i2.PrimeTemplate], styles: ["[_nghost-%COMP%]{display:block}"] }); }
+        } }, dependencies: [i1$2.NgIf, i2$1.NgControlStatus, i2$1.NgModel, i3$1.AutoComplete, i2.PrimeTemplate], styles: ["[_nghost-%COMP%]{display:block}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AutoCompleteComponent, [{
         type: Component,
@@ -4412,7 +4414,7 @@ class ObjectPieComponent {
             i0.ɵɵproperty("ngForOf", ctx.data);
             i0.ɵɵadvance(2);
             i0.ɵɵtextInterpolate(ctx.count);
-        } }, styles: [".pie-block[_ngcontent-%COMP%]{width:40px;height:40px;color:var(--text-color)}.pie-block[_ngcontent-%COMP%]   text[_ngcontent-%COMP%]{width:20px;height:20px;background:var(--colorBgLevel2);font-size:11px}.pie-block[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%]{width:40px;height:40px}"], changeDetection: 0 }); }
+        } }, dependencies: [i1$2.NgForOf], styles: [".pie-block[_ngcontent-%COMP%]{width:40px;height:40px;color:var(--text-color)}.pie-block[_ngcontent-%COMP%]   text[_ngcontent-%COMP%]{width:20px;height:20px;background:var(--colorBgLevel2);font-size:11px}.pie-block[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%]{width:40px;height:40px}"], changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ObjectPieComponent, [{
         type: Component,
@@ -6073,7 +6075,7 @@ class LinkComponent {
             i0.ɵɵproperty("ngIf", !ctx.link);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.menuItems.length);
-        } }, dependencies: [i1$2.NgClass, i1$2.NgIf, i1$2.NgTemplateOutlet, i1$3.RouterLink, i3$1.Menu, SvgComponent], styles: [".p-link[_ngcontent-%COMP%]{text-decoration:none;color:var(--colorLink);cursor:pointer}.p-link.p-link-secondary[_ngcontent-%COMP%]{color:var(--colorTextSecondary)}.p-link[_ngcontent-%COMP%]:hover{color:var(--colorLink)}.p-link[_ngcontent-%COMP%]:hover   .p-link-text[_ngcontent-%COMP%]{text-decoration:underline;color:var(--colorLink)}button[_ngcontent-%COMP%]{outline:none}.p-link-icon-only[_ngcontent-%COMP%]   .p-link-icon-left[_ngcontent-%COMP%]{margin-top:-9px}.p-link-text[_ngcontent-%COMP%]{vertical-align:middle}.p-link[_ngcontent-%COMP%]{margin-right:0;display:inline-flex;align-items:center;justify-content:center}.p-link-text-icon-left[_ngcontent-%COMP%]   .p-link-text[_ngcontent-%COMP%]{padding-left:.6em}.p-link-icon-only[_ngcontent-%COMP%]{font-size:18px;display:inline-flex;align-items:center;justify-content:center}.p-link-icon-only[_ngcontent-%COMP%]   .svg[_ngcontent-%COMP%]{display:inline-block;line-height:0}.p-link-transparency[_ngcontent-%COMP%]{background:none}.p-link.p-link-svg[_ngcontent-%COMP%]   .p-clickable[_ngcontent-%COMP%]{height:20px}.p-link.p-link-svg[_ngcontent-%COMP%]   .p-link-icon-left[_ngcontent-%COMP%]{left:6px;margin-top:-2px}.p-link.p-link-svg.p-link-icon-only[_ngcontent-%COMP%]   .p-link-icon-left[_ngcontent-%COMP%]{left:50%;width:auto;transform:translate(-50%,-50%);margin-left:0;margin-top:0}.p-link-material[_ngcontent-%COMP%]   .material-icons[_ngcontent-%COMP%]{font-size:16px}[_nghost-%COMP%]   .p-menu[_ngcontent-%COMP%]   .p-menuitem-link[_ngcontent-%COMP%]{font-size:16px}"] }); }
+        } }, dependencies: [i1$2.NgClass, i1$2.NgIf, i1$2.NgTemplateOutlet, i1$3.RouterLink, i3$2.Menu, SvgComponent], styles: [".p-link[_ngcontent-%COMP%]{text-decoration:none;color:var(--colorLink);cursor:pointer}.p-link.p-link-secondary[_ngcontent-%COMP%]{color:var(--colorTextSecondary)}.p-link[_ngcontent-%COMP%]:hover{color:var(--colorLink)}.p-link[_ngcontent-%COMP%]:hover   .p-link-text[_ngcontent-%COMP%]{text-decoration:underline;color:var(--colorLink)}button[_ngcontent-%COMP%]{outline:none}.p-link-icon-only[_ngcontent-%COMP%]   .p-link-icon-left[_ngcontent-%COMP%]{margin-top:-9px}.p-link-text[_ngcontent-%COMP%]{vertical-align:middle}.p-link[_ngcontent-%COMP%]{margin-right:0;display:inline-flex;align-items:center;justify-content:center}.p-link-text-icon-left[_ngcontent-%COMP%]   .p-link-text[_ngcontent-%COMP%]{padding-left:.6em}.p-link-icon-only[_ngcontent-%COMP%]{font-size:18px;display:inline-flex;align-items:center;justify-content:center}.p-link-icon-only[_ngcontent-%COMP%]   .svg[_ngcontent-%COMP%]{display:inline-block;line-height:0}.p-link-transparency[_ngcontent-%COMP%]{background:none}.p-link.p-link-svg[_ngcontent-%COMP%]   .p-clickable[_ngcontent-%COMP%]{height:20px}.p-link.p-link-svg[_ngcontent-%COMP%]   .p-link-icon-left[_ngcontent-%COMP%]{left:6px;margin-top:-2px}.p-link.p-link-svg.p-link-icon-only[_ngcontent-%COMP%]   .p-link-icon-left[_ngcontent-%COMP%]{left:50%;width:auto;transform:translate(-50%,-50%);margin-left:0;margin-top:0}.p-link-material[_ngcontent-%COMP%]   .material-icons[_ngcontent-%COMP%]{font-size:16px}[_nghost-%COMP%]   .p-menu[_ngcontent-%COMP%]   .p-menuitem-link[_ngcontent-%COMP%]{font-size:16px}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LinkComponent, [{
         type: Component,
@@ -6377,7 +6379,7 @@ class DropdownComponent {
         } if (rf & 2) {
             i0.ɵɵproperty("options", ctx.options)("placeholder", ctx.placeholder)("optionLabel", ctx.optionLabel)("optionValue", ctx.optionValue)("dataKey", ctx.dataKey)("filter", ctx.filter)("filterBy", ctx.effectiveFilterBy)("filterMatchMode", ctx.filterMatchMode)("showClear", ctx.showClear)("disabled", ctx.disabled)("appendTo", ctx.appendTo)("editable", ctx.editable)("virtualScroll", ctx.virtualScroll)("virtualScrollItemSize", ctx.virtualScrollItemSize)("loading", ctx.loading)("autoDisplayFirst", ctx.autoDisplayFirst)("emptyMessage", ctx.emptyMessage)("styleClass", ctx.styleClass);
             i0.ɵɵtwoWayProperty("ngModel", ctx.value);
-        } }, dependencies: [i1$2.NgIf, i1$2.NgTemplateOutlet, i2$1.NgControlStatus, i2$1.NgModel, i3$2.Select, i2.PrimeTemplate], styles: [".in-dropdown[_ngcontent-%COMP%]{width:100%;margin-bottom:0}"] }); }
+        } }, dependencies: [i1$2.NgIf, i1$2.NgTemplateOutlet, i2$1.NgControlStatus, i2$1.NgModel, i3$3.Select, i2.PrimeTemplate], styles: [".in-dropdown[_ngcontent-%COMP%]{width:100%;margin-bottom:0}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DropdownComponent, [{
         type: Component,
@@ -6472,7 +6474,8 @@ class DropdownComponentModule {
 class InsparkComponentsModule {
     static { this.ɵfac = function InsparkComponentsModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || InsparkComponentsModule)(); }; }
     static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: InsparkComponentsModule }); }
-    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [FormsModule,
+    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule,
+            FormsModule,
             ReactiveFormsModule,
             AutoCompleteComponentModule,
             FormsModule,
@@ -6530,6 +6533,7 @@ class InsparkComponentsModule {
         type: NgModule,
         args: [{
                 imports: [
+                    CommonModule,
                     FormsModule,
                     ReactiveFormsModule,
                     AutoCompleteComponentModule,
@@ -6620,7 +6624,8 @@ class InsparkComponentsModule {
         TooltipComponent,
         RadiobuttonComponent,
         ObjectTreeComponent,
-        ObjectPieComponent], imports: [FormsModule,
+        ObjectPieComponent], imports: [CommonModule,
+        FormsModule,
         ReactiveFormsModule,
         AutoCompleteComponentModule,
         FormsModule,