mis-crystal-design-system 4.0.24 → 4.0.26-test

package/esm2015/slider/slider.component.js

@@ -0,0 +1,38 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormBuilder } from '@angular/forms';
+export class SliderComponent {
+    constructor(formBuilder) {
+        this.formBuilder = formBuilder;
+        this.min = 0;
+        this.max = 100;
+        this.value = 0;
+        this.valueChange = new EventEmitter();
+    }
+    ngOnInit() {
+        this.sliderForm = this.formBuilder.group({
+            sliderFormControl: [this.value]
+        });
+    }
+    onInputChange(value) {
+        this.value = value;
+        this.sliderForm.patchValue({ sliderFormControl: value });
+        this.valueChange.emit(this.value);
+    }
+}
+SliderComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'mis-slider',
+                template: "<form [formGroup]=\"sliderForm\">\n    <div class=\"slider\">\n      <input type=\"range\" [min]=\"min\" [max]=\"max\" formControlName=\"sliderFormControl\" (input)=\"onInputChange($event.target.value)\" />\n    </div>\n  </form>\n  \n\n  ",
+                styles: [".slider{width:100%;display:flex;align-items:center;input[type=range]{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:8px;background:#cbddfb;outline:none;border-radius:5px;&::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;background:#0937b2;cursor:pointer;border-radius:50%}&::-moz-range-thumb{width:15px;height:15px;background:#0937b2;cursor:pointer;border-radius:50%}}span{margin-left:10px}}"]
+            },] }
+];
+SliderComponent.ctorParameters = () => [
+    { type: FormBuilder }
+];
+SliderComponent.propDecorators = {
+    min: [{ type: Input }],
+    max: [{ type: Input }],
+    value: [{ type: Input }],
+    valueChange: [{ type: Output }]
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2xpZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL21pcy1jb21wb25lbnRzL3NsaWRlci9zbGlkZXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBVSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDL0UsT0FBTyxFQUFFLFdBQVcsRUFBYSxNQUFNLGdCQUFnQixDQUFDO0FBT3hELE1BQU0sT0FBTyxlQUFlO0lBUzFCLFlBQW9CLFdBQXdCO1FBQXhCLGdCQUFXLEdBQVgsV0FBVyxDQUFhO1FBUG5DLFFBQUcsR0FBVyxDQUFDLENBQUM7UUFDaEIsUUFBRyxHQUFXLEdBQUcsQ0FBQztRQUNsQixVQUFLLEdBQVcsQ0FBQyxDQUFDO1FBQ2pCLGdCQUFXLEdBQUcsSUFBSSxZQUFZLEVBQVUsQ0FBQTtJQUlGLENBQUM7SUFFakQsUUFBUTtRQUNOLElBQUksQ0FBQyxVQUFVLEdBQUcsSUFBSSxDQUFDLFdBQVcsQ0FBQyxLQUFLLENBQUM7WUFDdkMsaUJBQWlCLEVBQUUsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDO1NBQ2hDLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFRCxhQUFhLENBQUMsS0FBYTtRQUN6QixJQUFJLENBQUMsS0FBSyxHQUFHLEtBQUssQ0FBQztRQUNuQixJQUFJLENBQUMsVUFBVSxDQUFDLFVBQVUsQ0FBQyxFQUFDLGlCQUFpQixFQUFFLEtBQUssRUFBQyxDQUFDLENBQUE7UUFDdEQsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ3BDLENBQUM7OztZQTFCRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLFlBQVk7Z0JBQ3RCLDJQQUFzQzs7YUFFdkM7OztZQU5RLFdBQVc7OztrQkFTakIsS0FBSztrQkFDTCxLQUFLO29CQUNMLEtBQUs7MEJBQ0wsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25Jbml0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEZvcm1CdWlsZGVyLCBGb3JtR3JvdXAgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ21pcy1zbGlkZXInLFxuICB0ZW1wbGF0ZVVybDogJy4vc2xpZGVyLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vc2xpZGVyLmNvbXBvbmVudC5jc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBTbGlkZXJDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuXG4gIEBJbnB1dCgpIG1pbj86bnVtYmVyID0gMDtcbiAgQElucHV0KCkgbWF4PzpudW1iZXIgPSAxMDA7XG4gIEBJbnB1dCgpIHZhbHVlOiBudW1iZXIgPSAwO1xuICBAT3V0cHV0KCkgdmFsdWVDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPG51bWJlcj4oKVxuXG4gIHNsaWRlckZvcm06IEZvcm1Hcm91cDtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGZvcm1CdWlsZGVyOiBGb3JtQnVpbGRlcikgeyB9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgdGhpcy5zbGlkZXJGb3JtID0gdGhpcy5mb3JtQnVpbGRlci5ncm91cCh7XG4gICAgICBzbGlkZXJGb3JtQ29udHJvbDogW3RoaXMudmFsdWVdXG4gICAgfSk7XG4gIH1cblxuICBvbklucHV0Q2hhbmdlKHZhbHVlOiBudW1iZXIpIHtcbiAgICB0aGlzLnZhbHVlID0gdmFsdWU7XG4gICAgdGhpcy5zbGlkZXJGb3JtLnBhdGNoVmFsdWUoe3NsaWRlckZvcm1Db250cm9sOiB2YWx1ZX0pXG4gICAgdGhpcy52YWx1ZUNoYW5nZS5lbWl0KHRoaXMudmFsdWUpO1xuICB9XG5cbn1cbiJdfQ==

package/esm2015/slider/slider.module.js

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SliderComponent } from './slider.component';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+export class SliderModule {
+}
+SliderModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    SliderComponent
+                ],
+                imports: [
+                    CommonModule,
+                    FormsModule,
+                    ReactiveFormsModule
+                ],
+                exports: [SliderComponent]
+            },] }
+];
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2xpZGVyLm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL21pcy1jb21wb25lbnRzL3NsaWRlci9zbGlkZXIubW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekMsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQUNyRCxPQUFPLEVBQUUsV0FBVyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFlbEUsTUFBTSxPQUFPLFlBQVk7OztZQVh4QixRQUFRLFNBQUM7Z0JBQ1IsWUFBWSxFQUFFO29CQUNaLGVBQWU7aUJBQ2hCO2dCQUNELE9BQU8sRUFBRTtvQkFDUCxZQUFZO29CQUNaLFdBQVc7b0JBQ1gsbUJBQW1CO2lCQUNwQjtnQkFDRCxPQUFPLEVBQUUsQ0FBQyxlQUFlLENBQUM7YUFDM0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IFNsaWRlckNvbXBvbmVudCB9IGZyb20gJy4vc2xpZGVyLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBGb3Jtc01vZHVsZSwgUmVhY3RpdmVGb3Jtc01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcblxuXG5cbkBOZ01vZHVsZSh7XG4gIGRlY2xhcmF0aW9uczogW1xuICAgIFNsaWRlckNvbXBvbmVudFxuICBdLFxuICBpbXBvcnRzOiBbXG4gICAgQ29tbW9uTW9kdWxlLFxuICAgIEZvcm1zTW9kdWxlLFxuICAgIFJlYWN0aXZlRm9ybXNNb2R1bGVcbiAgXSxcbiAgZXhwb3J0czogW1NsaWRlckNvbXBvbmVudF1cbn0pXG5leHBvcnQgY2xhc3MgU2xpZGVyTW9kdWxlIHsgfVxuIl19

package/esm2015/snackbar/index.js

@@ -0,0 +1,2 @@
+export * from "./public_api";
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9taXMtY29tcG9uZW50cy9zbmFja2Jhci9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxjQUFjLGNBQWMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gXCIuL3B1YmxpY19hcGlcIjsiXX0=

package/esm2015/snackbar/mis-crystal-design-system-snackbar.js

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWlzLWNyeXN0YWwtZGVzaWduLXN5c3RlbS1zbmFja2Jhci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL21pcy1jb21wb25lbnRzL3NuYWNrYmFyL21pcy1jcnlzdGFsLWRlc2lnbi1zeXN0ZW0tc25hY2tiYXIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLFNBQVMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9pbmRleCc7XG4iXX0=

package/esm2015/snackbar/public_api.js

@@ -0,0 +1,4 @@
+export * from "./snackbar.service";
+export * from "./snackbar.module";
+export * from "./snackbar/snackbar.component";
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljX2FwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL21pcy1jb21wb25lbnRzL3NuYWNrYmFyL3B1YmxpY19hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxvQkFBb0IsQ0FBQztBQUNuQyxjQUFjLG1CQUFtQixDQUFDO0FBQ2xDLGNBQWMsK0JBQStCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tIFwiLi9zbmFja2Jhci5zZXJ2aWNlXCI7XG5leHBvcnQgKiBmcm9tIFwiLi9zbmFja2Jhci5tb2R1bGVcIjtcbmV4cG9ydCAqIGZyb20gXCIuL3NuYWNrYmFyL3NuYWNrYmFyLmNvbXBvbmVudFwiO1xuIl19

package/esm2015/snackbar/snackbar/snackbar.component.js

@@ -0,0 +1,26 @@
+// snackbar.component.ts
+import { Component, EventEmitter, Output } from '@angular/core';
+import { SnackbarService } from '../snackbar.service';
+export class SnackbarComponent {
+    constructor(input) {
+        this.input = input;
+        this.triggerAction = new EventEmitter();
+    }
+    triggerActionFunction() {
+        this.triggerAction.emit(true);
+    }
+}
+SnackbarComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'mis-snackbar',
+                template: "<div class=\"snackbar-container\">\n  <div class=\"messages\" *ngIf=\"!input.config.hasComponent\">\n\n    <span class=\"message\">\n      <img *ngIf=\"input.config.iconUrl\" [src]=\"input.config.iconUrl\" alt=\"\">\n      {{ input.config.message }}\n    </span>\n    <div class=\"snackbar-action\" *ngIf=\"input.config.actionString\">\n      <button (click)=\"triggerActionFunction()\">{{ input.config.actionString }}</button>\n    </div>\n  </div>\n  <div class=\"component-container\" *ngIf=\"input.config.hasComponent\">\n    <ng-content></ng-content>\n  </div>\n</div>\n",
+                styles: [".snackbar-container{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background-color:#181f33;color:#fff;border-radius:8px;padding:8px 12px;max-width:400px;width:90%;z-index:1000;box-shadow:0 4px 8px rgba(0,0,0,.2)}.messages{display:flex;align-items:center;justify-content:space-between}.message{flex:1;padding-right:10px;font-size:16px;font-weight:700}.snackbar-action button{background-color:#181f33;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:16px!important;transition:background-color .3s ease}.snackbar-action button:hover{background-color:#0056b3}.component-container{margin-top:10px}@media (max-width:768px){.snackbar-container{left:10px;right:10px;transform:none;width:auto;max-width:none}}"]
+            },] }
+];
+SnackbarComponent.ctorParameters = () => [
+    { type: SnackbarService }
+];
+SnackbarComponent.propDecorators = {
+    triggerAction: [{ type: Output }]
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic25hY2tiYXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbWlzLWNvbXBvbmVudHMvc25hY2tiYXIvc25hY2tiYXIvc25hY2tiYXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLHdCQUF3QjtBQUN4QixPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBUyxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDdkUsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHFCQUFxQixDQUFDO0FBT3RELE1BQU0sT0FBTyxpQkFBaUI7SUFFNUIsWUFBbUIsS0FBc0I7UUFBdEIsVUFBSyxHQUFMLEtBQUssQ0FBaUI7UUFEL0Isa0JBQWEsR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO0lBQ1AsQ0FBQztJQUM1QyxxQkFBcUI7UUFDbkIsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUE7SUFDL0IsQ0FBQzs7O1lBVkYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxjQUFjO2dCQUN4Qiwya0JBQXdDOzthQUV6Qzs7O1lBTlEsZUFBZTs7OzRCQVFyQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiLy8gc25hY2tiYXIuY29tcG9uZW50LnRzXG5pbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgU25hY2tiYXJTZXJ2aWNlIH0gZnJvbSAnLi4vc25hY2tiYXIuc2VydmljZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ21pcy1zbmFja2JhcicsXG4gIHRlbXBsYXRlVXJsOiBcIi4vc25hY2tiYXIuY29tcG9uZW50Lmh0bWxcIixcbiAgc3R5bGVVcmxzOiBbXCIuL3NuYWNrYmFyLmNvbXBvbmVudC5jc3NcIl0sXG59KVxuZXhwb3J0IGNsYXNzIFNuYWNrYmFyQ29tcG9uZW50IHtcbiAgQE91dHB1dCgpIHRyaWdnZXJBY3Rpb24gPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcbiAgY29uc3RydWN0b3IocHVibGljIGlucHV0OiBTbmFja2JhclNlcnZpY2Upe31cbiAgdHJpZ2dlckFjdGlvbkZ1bmN0aW9uKCl7XG4gICAgdGhpcy50cmlnZ2VyQWN0aW9uLmVtaXQodHJ1ZSlcbiAgfVxufVxuIl19

package/esm2015/snackbar/snackbar.module.js

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SnackbarComponent } from './snackbar/snackbar.component';
+import { SnackbarService } from './snackbar.service';
+export class SnackbarModule {
+}
+SnackbarModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    SnackbarComponent
+                ],
+                imports: [
+                    CommonModule
+                ],
+                exports: [SnackbarComponent],
+                entryComponents: [SnackbarComponent],
+                providers: [SnackbarService]
+            },] }
+];
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic25hY2tiYXIubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbWlzLWNvbXBvbmVudHMvc25hY2tiYXIvc25hY2tiYXIubW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekMsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLCtCQUErQixDQUFDO0FBQ2xFLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQWVyRCxNQUFNLE9BQU8sY0FBYzs7O1lBWDFCLFFBQVEsU0FBQztnQkFDUixZQUFZLEVBQUU7b0JBQ1osaUJBQWlCO2lCQUNsQjtnQkFDRCxPQUFPLEVBQUU7b0JBQ1AsWUFBWTtpQkFDYjtnQkFDRCxPQUFPLEVBQUUsQ0FBQyxpQkFBaUIsQ0FBQztnQkFDNUIsZUFBZSxFQUFFLENBQUMsaUJBQWlCLENBQUM7Z0JBQ3BDLFNBQVMsRUFBRSxDQUFDLGVBQWUsQ0FBQzthQUM3QiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgU25hY2tiYXJDb21wb25lbnQgfSBmcm9tICcuL3NuYWNrYmFyL3NuYWNrYmFyLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBTbmFja2JhclNlcnZpY2UgfSBmcm9tICcuL3NuYWNrYmFyLnNlcnZpY2UnO1xuXG5cblxuQE5nTW9kdWxlKHtcbiAgZGVjbGFyYXRpb25zOiBbXG4gICAgU25hY2tiYXJDb21wb25lbnRcbiAgXSxcbiAgaW1wb3J0czogW1xuICAgIENvbW1vbk1vZHVsZVxuICBdLFxuICBleHBvcnRzOiBbU25hY2tiYXJDb21wb25lbnRdLFxuICBlbnRyeUNvbXBvbmVudHM6IFtTbmFja2JhckNvbXBvbmVudF0sXG4gIHByb3ZpZGVyczogW1NuYWNrYmFyU2VydmljZV1cbn0pXG5leHBvcnQgY2xhc3MgU25hY2tiYXJNb2R1bGUgeyB9XG4iXX0=

package/esm2015/snackbar/snackbar.service.js

@@ -0,0 +1,48 @@
+import { Overlay, OverlayConfig } from "@angular/cdk/overlay";
+import { ComponentPortal } from "@angular/cdk/portal";
+import { Injectable } from "@angular/core"; // Assuming you have defined ISnackBarConfig interface
+import { SnackbarComponent } from "./snackbar/snackbar.component";
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/cdk/overlay";
+export class SnackbarService {
+    constructor(overlay) {
+        this.overlay = overlay;
+    }
+    openSnackbar(config) {
+        this.config = config;
+        const overlayConfig = new OverlayConfig({
+            hasBackdrop: false,
+            positionStrategy: this.overlay.position().global().centerHorizontally().bottom("48px")
+        });
+        this.snackbarRef = this.overlay.create(overlayConfig);
+        const snackbarPortal = new ComponentPortal(SnackbarComponent);
+        const componentRef = this.snackbarRef.attach(snackbarPortal);
+        //   componentRef.instance.config = config;
+        config.duration = config.duration || 3000;
+        setTimeout(() => {
+            this.closeSnackbar();
+        }, config.duration);
+        componentRef.instance.triggerAction.subscribe(() => {
+            if (config.onActionClick) {
+                config.onActionClick();
+            }
+            this.closeSnackbar();
+        });
+    }
+    closeSnackbar() {
+        if (this.snackbarRef) {
+            this.snackbarRef.dispose();
+            this.snackbarRef = null;
+        }
+    }
+}
+SnackbarService.ɵprov = i0.ɵɵdefineInjectable({ factory: function SnackbarService_Factory() { return new SnackbarService(i0.ɵɵinject(i1.Overlay)); }, token: SnackbarService, providedIn: "root" });
+SnackbarService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: "root"
+            },] }
+];
+SnackbarService.ctorParameters = () => [
+    { type: Overlay }
+];
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic25hY2tiYXIuc2VydmljZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL21pcy1jb21wb25lbnRzL3NuYWNrYmFyL3NuYWNrYmFyLnNlcnZpY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBU0EsT0FBTyxFQUFFLE9BQU8sRUFBRSxhQUFhLEVBQWMsTUFBTSxzQkFBc0IsQ0FBQztBQUMxRSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFDdEQsT0FBTyxFQUFnQixVQUFVLEVBQUUsTUFBTSxlQUFlLENBQUMsQ0FBQyxzREFBc0Q7QUFDaEgsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sK0JBQStCLENBQUM7OztBQUtsRSxNQUFNLE9BQU8sZUFBZTtJQUkxQixZQUFvQixPQUFnQjtRQUFoQixZQUFPLEdBQVAsT0FBTyxDQUFTO0lBQUcsQ0FBQztJQUV4QyxZQUFZLENBQUMsTUFBdUI7UUFDbEMsSUFBSSxDQUFDLE1BQU0sR0FBRyxNQUFNLENBQUM7UUFDckIsTUFBTSxhQUFhLEdBQUcsSUFBSSxhQUFhLENBQUM7WUFDdEMsV0FBVyxFQUFFLEtBQUs7WUFDbEIsZ0JBQWdCLEVBQUUsSUFBSSxDQUFDLE9BQU8sQ0FBQyxRQUFRLEVBQUUsQ0FBQyxNQUFNLEVBQUUsQ0FBQyxrQkFBa0IsRUFBRSxDQUFDLE1BQU0sQ0FBQyxNQUFNLENBQUM7U0FDdkYsQ0FBQyxDQUFDO1FBRUgsSUFBSSxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDLE1BQU0sQ0FBQyxhQUFhLENBQUMsQ0FBQztRQUV0RCxNQUFNLGNBQWMsR0FBRyxJQUFJLGVBQWUsQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDO1FBQzlELE1BQU0sWUFBWSxHQUFHLElBQUksQ0FBQyxXQUFXLENBQUMsTUFBTSxDQUFDLGNBQWMsQ0FBQyxDQUFDO1FBRTdELDJDQUEyQztRQUUzQyxNQUFNLENBQUMsUUFBUSxHQUFHLE1BQU0sQ0FBQyxRQUFRLElBQUksSUFBSSxDQUFDO1FBQzFDLFVBQVUsQ0FBQyxHQUFHLEVBQUU7WUFDZCxJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7UUFDdkIsQ0FBQyxFQUFFLE1BQU0sQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUVwQixZQUFZLENBQUMsUUFBUSxDQUFDLGFBQWEsQ0FBQyxTQUFTLENBQUMsR0FBRyxFQUFFO1lBQ2pELElBQUksTUFBTSxDQUFDLGFBQWEsRUFBRTtnQkFDeEIsTUFBTSxDQUFDLGFBQWEsRUFBRSxDQUFDO2FBQ3hCO1lBQ0QsSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDO1FBQ3ZCLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVELGFBQWE7UUFDWCxJQUFJLElBQUksQ0FBQyxXQUFXLEVBQUU7WUFDcEIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxPQUFPLEVBQUUsQ0FBQztZQUMzQixJQUFJLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQztTQUN6QjtJQUNILENBQUM7Ozs7WUF6Q0YsVUFBVSxTQUFDO2dCQUNWLFVBQVUsRUFBRSxNQUFNO2FBQ25COzs7WUFQUSxPQUFPIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGludGVyZmFjZSBJU25hY2tCYXJDb25maWcge1xuICBtZXNzYWdlOiBzdHJpbmc7XG4gIGFjdGlvblN0cmluZzogc3RyaW5nO1xuICBoYXNDb21wb25lbnQ6IGJvb2xlYW47XG4gIGljb25Vcmw/OiBzdHJpbmc7XG4gIGNvbXBvbmVudD86IENvbXBvbmVudFJlZjxhbnk+O1xuICBkdXJhdGlvbj86IG51bWJlcjtcbiAgb25BY3Rpb25DbGljaz86ICgpID0+IHZvaWQ7XG59XG5pbXBvcnQgeyBPdmVybGF5LCBPdmVybGF5Q29uZmlnLCBPdmVybGF5UmVmIH0gZnJvbSBcIkBhbmd1bGFyL2Nkay9vdmVybGF5XCI7XG5pbXBvcnQgeyBDb21wb25lbnRQb3J0YWwgfSBmcm9tIFwiQGFuZ3VsYXIvY2RrL3BvcnRhbFwiO1xuaW1wb3J0IHsgQ29tcG9uZW50UmVmLCBJbmplY3RhYmxlIH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjsgLy8gQXNzdW1pbmcgeW91IGhhdmUgZGVmaW5lZCBJU25hY2tCYXJDb25maWcgaW50ZXJmYWNlXG5pbXBvcnQgeyBTbmFja2JhckNvbXBvbmVudCB9IGZyb20gXCIuL3NuYWNrYmFyL3NuYWNrYmFyLmNvbXBvbmVudFwiO1xuXG5ASW5qZWN0YWJsZSh7XG4gIHByb3ZpZGVkSW46IFwicm9vdFwiXG59KVxuZXhwb3J0IGNsYXNzIFNuYWNrYmFyU2VydmljZSB7XG4gIGNvbmZpZzogSVNuYWNrQmFyQ29uZmlnO1xuICBwcml2YXRlIHNuYWNrYmFyUmVmOiBPdmVybGF5UmVmO1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgb3ZlcmxheTogT3ZlcmxheSkge31cblxuICBvcGVuU25hY2tiYXIoY29uZmlnOiBJU25hY2tCYXJDb25maWcpOiB2b2lkIHtcbiAgICB0aGlzLmNvbmZpZyA9IGNvbmZpZztcbiAgICBjb25zdCBvdmVybGF5Q29uZmlnID0gbmV3IE92ZXJsYXlDb25maWcoe1xuICAgICAgaGFzQmFja2Ryb3A6IGZhbHNlLFxuICAgICAgcG9zaXRpb25TdHJhdGVneTogdGhpcy5vdmVybGF5LnBvc2l0aW9uKCkuZ2xvYmFsKCkuY2VudGVySG9yaXpvbnRhbGx5KCkuYm90dG9tKFwiNDhweFwiKVxuICAgIH0pO1xuXG4gICAgdGhpcy5zbmFja2JhclJlZiA9IHRoaXMub3ZlcmxheS5jcmVhdGUob3ZlcmxheUNvbmZpZyk7XG5cbiAgICBjb25zdCBzbmFja2JhclBvcnRhbCA9IG5ldyBDb21wb25lbnRQb3J0YWwoU25hY2tiYXJDb21wb25lbnQpO1xuICAgIGNvbnN0IGNvbXBvbmVudFJlZiA9IHRoaXMuc25hY2tiYXJSZWYuYXR0YWNoKHNuYWNrYmFyUG9ydGFsKTtcblxuICAgIC8vICAgY29tcG9uZW50UmVmLmluc3RhbmNlLmNvbmZpZyA9IGNvbmZpZztcblxuICAgIGNvbmZpZy5kdXJhdGlvbiA9IGNvbmZpZy5kdXJhdGlvbiB8fCAzMDAwO1xuICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgdGhpcy5jbG9zZVNuYWNrYmFyKCk7XG4gICAgfSwgY29uZmlnLmR1cmF0aW9uKTtcblxuICAgIGNvbXBvbmVudFJlZi5pbnN0YW5jZS50cmlnZ2VyQWN0aW9uLnN1YnNjcmliZSgoKSA9PiB7XG4gICAgICBpZiAoY29uZmlnLm9uQWN0aW9uQ2xpY2spIHtcbiAgICAgICAgY29uZmlnLm9uQWN0aW9uQ2xpY2soKTtcbiAgICAgIH1cbiAgICAgIHRoaXMuY2xvc2VTbmFja2JhcigpO1xuICAgIH0pO1xuICB9XG5cbiAgY2xvc2VTbmFja2JhcigpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5zbmFja2JhclJlZikge1xuICAgICAgdGhpcy5zbmFja2JhclJlZi5kaXNwb3NlKCk7XG4gICAgICB0aGlzLnNuYWNrYmFyUmVmID0gbnVsbDtcbiAgICB9XG4gIH1cbn1cbiJdfQ==

package/fesm2015/mis-crystal-design-system-dynamic-form.js

@@ -240,7 +240,7 @@ class DynamicFormComponent {
 DynamicFormComponent.decorators = [
     { type: Component, args: [{
                 selector: "mis-dynamic-form",
-                template: "<form [formGroup]=\"dynamicForm\">\n  <ng-container formArrayName=\"dynamicFields\">\n    <ng-container [formGroupName]=\"i\" *ngFor=\"let fieldControl of getDynamicFieldsControls().controls; let i = index\">\n      <ng-container\n        [ngTemplateOutlet]=\"dynamicField\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: formFields[i],\n          formGroup: fieldControl,\n          control: fieldControl.controls.value\n        }\"\n      >\n        <div class=\"sub-dynamic-form\" *ngIf=\"fieldControl.value && formFields[i]?.subFields?.length > 0\">\n          <ng-container *ngFor=\"let subFieldControl of fieldControl.controls.subFields.controls; let j = index\">\n            <ng-container\n              [ngTemplateOutlet]=\"dynamicField\"\n              [ngTemplateOutletContext]=\"{\n                $implicit: formFields[i].subFields[j],\n                control: subFieldControl\n              }\">\n            </ng-container>\n          </ng-container>\n        </div>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</form>\n\n\n<ng-template #dynamicField let-field let-control=\"control\" let-formgroup=\"formGroup\">\n\n  <!-- fieldType: 'input' fieldInputType: 'text' | 'number' -->\n  <div class=\"dynamic-field multi-line-field-container\"\n    *ngIf=\"field.fieldType === 'input' && (field.fieldInputType === 'text' || field.fieldInputType === 'number')\">\n    <p class=\"h7 field-title-sm\">\n      {{ field.title }}\n    </p>\n    <div style=\"flex-basis: 100%\"></div>\n    <input class=\"input-field ip-text\" [type]=\"field.fieldInputType\" [formControl]=\"control\"\n      (ngModelChange)=\"updateSubDynamicFields(field, formgroup, $event)\" \n      [ngStyle]=\"{'border': control.touched && control.errors ? '1px solid #B00020': ''}\"\n      [placeholder]=\"field.placeholderText ? field.placeholderText : 'Input Text'\" \n      [min]=\"field.fieldInputType === 'number' ? 0 : '' \"/>\n    <ng-container *ngIf=\"control.touched && control.errors\"\n      [ngTemplateOutlet]=\"dynamicFieldErrors\" \n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\"\n    >\n    </ng-container>\n  </div>\n\n  <!-- fieldType: 'input' fieldInputType: 'textarea' -->\n  <div class=\"dynamic-field multi-line-field-container\"\n    *ngIf=\"field.fieldType === 'input' && field.fieldInputType === 'textarea'\">\n    <p class=\"h7 field-title-sm\">\n      {{ field.title }}\n    </p>\n    <div style=\"flex-basis: 100%\"></div>\n    <textarea class=\"input-field ip-textarea\" type=\"text\"\n      [ngStyle]=\"{'border': control.touched && control.errors ? '1px solid #B00020': ''}\"\n      [placeholder]=\"field.placeholderText ? field.placeholderText : 'Input Text'\" [formControl]=\"control\" (ngModelChange)=\"updateSubDynamicFields(field, formgroup, $event)\"></textarea>\n      <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n        [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n      </ng-container>\n  </div>\n\n  <!-- fieldType: 'input' fieldInputType: 'date' -->\n  <div class=\"dynamic-field single-line-field-container\"\n    *ngIf=\"field.fieldType === 'input' && field.fieldInputType === 'date'\">\n    <p class=\"h6\">\n      {{ field.title }}\n    </p>\n    <div class=\"date-picker-container\">\n      <input class=\"date-picker\" readonly misTzDp [dpConfig]=\"field.fieldConfig\"\n        (dateChange)=\"control.setValue($event)\" [selectedDate]=\"control.value\" [offsetY]=\"0\"\n        [value]=\"control.value\" #dp />\n      <img alt=\"data-picker\" *ngIf=\"calendarIconUrl\" class=\"date-picker-icon\" [src]=\"calendarIconUrl\"\n        (click)=\"dp.click()\" />\n    </div>\n    <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n    </ng-container>\n  </div>\n\n  <!-- fieldType: 'boolean' fieldInputType: 'toggle' -->\n  <div class=\"dynamic-field single-line-field-container\"\n    *ngIf=\"field.fieldType === 'boolean' && field.fieldInputType === 'toggle'\">\n    <p class=\"h6\">\n      {{ field.title }}\n    </p>\n    <mis-switch [control]=\"control\" (valueChanged)=\"updateSubDynamicFields(field, formgroup, $event)\"></mis-switch>\n    <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n    </ng-container>\n  </div>\n\n  <!-- fieldType: 'singleSelect' fieldInputType: 'dropdown' -->\n  <div class=\"dynamic-field single-line-field-container\"\n    *ngIf=\"field.fieldType === 'singleSelect' && field.fieldInputType === 'dropdown'\">\n    <p class=\"h6\">\n      {{ field.title }}\n    </p>\n    <mis-dropdown [searchEnabled]=\"false\" [width]=\"'140px'\" [data]=\"field.itemsList\" [selectedItem]=\"control.value\"\n      (onChange)=\"updateSelectedValueForSingleSelect(field, control, formgroup, $event);\">\n    </mis-dropdown>\n    <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n    </ng-container>\n  </div>\n\n  <!-- fieldType: 'singleSelect' fieldInputType: 'radio' -->\n  <div class=\"dynamic-field multi-line-field-container\"\n    *ngIf=\"field.fieldType === 'singleSelect' && field.fieldInputType === 'radio'\">\n    <p class=\"h7 field-title-sm\">\n      {{ field.title }}\n    </p>\n    <div style=\"flex-basis: 100%\"></div>\n    <div id=\"checkboxes-container\">\n      <div class=\"radio-checkbox-common\" *ngFor=\"let item of field.itemsList\"\n        [ngClass]=\"{ 'checkbox-active': item.label === control.value?.label }\"\n        (click)=\"updateSelectedValueForSingleSelect(field, control, formgroup, item);\">\n        <img *ngIf=\"(item.label === control.value?.label) && activeBtnIconUrl\" [src]=\"activeBtnIconUrl\" alt=\"\" />\n        <p class=\"h6\">{{ item.label }}</p>\n      </div>\n    </div>\n    <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n    </ng-container>\n  </div>\n\n  <!-- fieldType: 'multiSelect' fieldInputType: 'checkbox' -->\n  <div class=\"dynamic-field multi-line-field-container\"\n    *ngIf=\"field.fieldType === 'multiSelect' && field.fieldInputType === 'checkbox'\">\n    <p class=\"h7 field-title-sm\">\n      {{ field.title }}\n    </p>\n    <div style=\"flex-basis: 100%\"></div>\n    <div id=\"checkboxes-container\">\n      <div class=\"radio-checkbox-common\" *ngFor=\"let item of field.itemsList\"\n        [ngClass]=\"{ 'checkbox-active': isCheckBoxSelected(item.label, control.value) }\"\n        (click)=\"updateSelectedValueForMultiSelect(field, control, formgroup, [item])\">\n        <img *ngIf=\"isCheckBoxSelected(item.label, control.value) && activeBtnIconUrl\" [src]=\"activeBtnIconUrl\"\n          alt=\"\" />\n        <p class=\"h6\">{{ item.label }}</p>\n      </div>\n    </div>\n    <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n    </ng-container>\n  </div>\n\n  <!-- fieldType: 'multiSelect' fieldInputType: 'dropdown' -->\n  <div class=\"dynamic-field single-line-field-container\"\n    *ngIf=\"field.fieldType === 'multiSelect' && field.fieldInputType === 'dropdown'\">\n    <p class=\"h6\">\n      {{ field.title }}\n    </p>\n    <mis-multi-select-dropdown [width]=\"'140px'\" [showSelectedCount]=\"true\" [dropdownListWidth]=\"'256px'\"\n      [searchEnabled]=\"false\" [hideApplyButton]=\"true\" [data]=\"field.itemsList\"\n      [selectedItems]=\"control.value\" (onChange)=\"updateSelectedValueForMultiSelect(field, control, formgroup, $event);\"></mis-multi-select-dropdown>\n    <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n    </ng-container>\n  </div>\n\n</ng-template>\n\n<ng-template #dynamicFieldErrors let-errors>\n  <div id=\"error-messages-container\">\n    <ng-container *ngFor=\"let error of errors | keyvalue\">\n      <p class=\"h8\">\n        {{\" \u2022 &nbsp;\" + error.value}}\n      </p>\n      <div style=\"flex-basis: 100%; height: 0\"></div>\n    </ng-container>\n  </div>\n</ng-template>",
+                template: "<ng-template #dynamicField let-field let-control=\"control\" let-formgroup=\"formGroup\">\n\n  <!-- fieldType: 'input' fieldInputType: 'text' | 'number' -->\n  <div class=\"dynamic-field multi-line-field-container\"\n    *ngIf=\"field.fieldType === 'input' && (field.fieldInputType === 'text' || field.fieldInputType === 'number')\">\n    <p class=\"h7 field-title-sm\">\n      {{ field.title }}\n    </p>\n    <div style=\"flex-basis: 100%\"></div>\n    <input class=\"input-field ip-text\" [type]=\"field.fieldInputType\" [formControl]=\"control\"\n      (ngModelChange)=\"updateSubDynamicFields(field, formgroup, $event)\" \n      [ngStyle]=\"{'border': control.touched && control.errors ? '1px solid #B00020': ''}\"\n      [placeholder]=\"field.placeholderText ? field.placeholderText : 'Input Text'\" \n      [min]=\"field.fieldInputType === 'number' ? 0 : '' \"/>\n    <ng-container *ngIf=\"control.touched && control.errors\"\n      [ngTemplateOutlet]=\"dynamicFieldErrors\" \n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\"\n    >\n    </ng-container>\n  </div>\n\n  <!-- fieldType: 'input' fieldInputType: 'textarea' -->\n  <div class=\"dynamic-field multi-line-field-container\"\n    *ngIf=\"field.fieldType === 'input' && field.fieldInputType === 'textarea'\">\n    <p class=\"h7 field-title-sm\">\n      {{ field.title }}\n    </p>\n    <div style=\"flex-basis: 100%\"></div>\n    <textarea class=\"input-field ip-textarea\" type=\"text\"\n      [ngStyle]=\"{'border': control.touched && control.errors ? '1px solid #B00020': ''}\"\n      [placeholder]=\"field.placeholderText ? field.placeholderText : 'Input Text'\" [formControl]=\"control\" (ngModelChange)=\"updateSubDynamicFields(field, formgroup, $event)\"></textarea>\n      <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n        [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n      </ng-container>\n  </div>\n\n  <!-- fieldType: 'input' fieldInputType: 'date' -->\n  <div class=\"dynamic-field single-line-field-container\"\n    *ngIf=\"field.fieldType === 'input' && field.fieldInputType === 'date'\">\n    <p class=\"h6\">\n      {{ field.title }}\n    </p>\n    <div class=\"date-picker-container\">\n      <input class=\"date-picker\" readonly misTzDp [dpConfig]=\"field.fieldConfig\"\n        (dateChange)=\"control.setValue($event)\" [selectedDate]=\"control.value\" [offsetY]=\"0\"\n        [value]=\"control.value\" #dp />\n      <img alt=\"data-picker\" *ngIf=\"calendarIconUrl\" class=\"date-picker-icon\" [src]=\"calendarIconUrl\"\n        (click)=\"dp.click()\" />\n    </div>\n    <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n    </ng-container>\n  </div>\n\n  <!-- fieldType: 'boolean' fieldInputType: 'toggle' -->\n  <div class=\"dynamic-field single-line-field-container\"\n    *ngIf=\"field.fieldType === 'boolean' && field.fieldInputType === 'toggle'\">\n    <p class=\"h6\">\n      {{ field.title }}\n    </p>\n    <mis-switch [control]=\"control\" (valueChanged)=\"updateSubDynamicFields(field, formgroup, $event)\"></mis-switch>\n    <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n    </ng-container>\n  </div>\n\n  <!-- fieldType: 'singleSelect' fieldInputType: 'dropdown' -->\n  <div class=\"dynamic-field single-line-field-container\"\n    *ngIf=\"field.fieldType === 'singleSelect' && field.fieldInputType === 'dropdown'\">\n    <p class=\"h6\">\n      {{ field.title }}\n    </p>\n    <mis-dropdown [searchEnabled]=\"false\" [width]=\"'140px'\" [data]=\"field.itemsList\" [selectedItem]=\"control.value\"\n      (onChange)=\"updateSelectedValueForSingleSelect(field, control, formgroup, $event);\">\n    </mis-dropdown>\n    <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n    </ng-container>\n  </div>\n\n  <!-- fieldType: 'singleSelect' fieldInputType: 'radio' -->\n  <div class=\"dynamic-field multi-line-field-container\"\n    *ngIf=\"field.fieldType === 'singleSelect' && field.fieldInputType === 'radio'\">\n    <p class=\"h7 field-title-sm\">\n      {{ field.title }}\n    </p>\n    <div style=\"flex-basis: 100%\"></div>\n    <div id=\"checkboxes-container\">\n      <div class=\"radio-checkbox-common\" *ngFor=\"let item of field.itemsList\"\n        [ngClass]=\"{ 'checkbox-active': item.label === control.value?.label }\"\n        (click)=\"updateSelectedValueForSingleSelect(field, control, formgroup, item);\">\n        <img *ngIf=\"(item.label === control.value?.label) && activeBtnIconUrl\" [src]=\"activeBtnIconUrl\" alt=\"\" />\n        <p class=\"h6\">{{ item.label }}</p>\n      </div>\n    </div>\n    <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n    </ng-container>\n  </div>\n\n  <!-- fieldType: 'multiSelect' fieldInputType: 'checkbox' -->\n  <div class=\"dynamic-field multi-line-field-container\"\n    *ngIf=\"field.fieldType === 'multiSelect' && field.fieldInputType === 'checkbox'\">\n    <p class=\"h7 field-title-sm\">\n      {{ field.title }}\n    </p>\n    <div style=\"flex-basis: 100%\"></div>\n    <div id=\"checkboxes-container\">\n      <div class=\"radio-checkbox-common\" *ngFor=\"let item of field.itemsList\"\n        [ngClass]=\"{ 'checkbox-active': isCheckBoxSelected(item.label, control.value) }\"\n        (click)=\"updateSelectedValueForMultiSelect(field, control, formgroup, [item])\">\n        <img *ngIf=\"isCheckBoxSelected(item.label, control.value) && activeBtnIconUrl\" [src]=\"activeBtnIconUrl\"\n          alt=\"\" />\n        <p class=\"h6\">{{ item.label }}</p>\n      </div>\n    </div>\n    <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n    </ng-container>\n  </div>\n\n  <!-- fieldType: 'multiSelect' fieldInputType: 'dropdown' -->\n  <div class=\"dynamic-field single-line-field-container\"\n    *ngIf=\"field.fieldType === 'multiSelect' && field.fieldInputType === 'dropdown'\">\n    <p class=\"h6\">\n      {{ field.title }}\n    </p>\n    <mis-multi-select-dropdown [width]=\"'140px'\" [showSelectedCount]=\"true\" [dropdownListWidth]=\"'256px'\"\n      [searchEnabled]=\"false\" [hideApplyButton]=\"true\" [data]=\"field.itemsList\"\n      [selectedItems]=\"control.value\" (onChange)=\"updateSelectedValueForMultiSelect(field, control, formgroup, $event);\"></mis-multi-select-dropdown>\n    <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n    </ng-container>\n  </div>\n\n</ng-template>\n\n<ng-template #dynamicFieldErrors let-errors>\n  <div id=\"error-messages-container\">\n    <ng-container *ngFor=\"let error of errors | keyvalue\">\n      <p class=\"h8\">\n        {{\" \u2022 &nbsp;\" + error.value}}\n      </p>\n      <div style=\"flex-basis: 100%; height: 0\"></div>\n    </ng-container>\n  </div>\n</ng-template>\n\n<form [formGroup]=\"dynamicForm\">\n  <ng-container formArrayName=\"dynamicFields\">\n    <ng-container [formGroupName]=\"i\" *ngFor=\"let fieldControl of getDynamicFieldsControls().controls; let i = index\">\n      <ng-container\n        [ngTemplateOutlet]=\"dynamicField\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: formFields[i],\n          formGroup: fieldControl,\n          control: fieldControl.controls.value\n        }\"\n      >\n        <div class=\"sub-dynamic-form\" *ngIf=\"fieldControl.value && formFields[i]?.subFields?.length > 0\">\n          <ng-container *ngFor=\"let subFieldControl of fieldControl.controls.subFields.controls; let j = index\">\n            <ng-container\n              [ngTemplateOutlet]=\"dynamicField\"\n              [ngTemplateOutletContext]=\"{\n                $implicit: formFields[i].subFields[j],\n                control: subFieldControl\n              }\">\n            </ng-container>\n          </ng-container>\n        </div>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</form>",
                 styles: ["p{margin:0;cursor:default}::ng-deep .main-container{margin:0;max-width:100%}.sub-dynamic-form{padding-left:24px}.dynamic-field ::ng-deep .container{height:32px!important}.single-line-field-container{justify-content:space-between;align-items:center}.multi-line-field-container,.single-line-field-container{display:flex;padding:28px 16px;border-bottom:1px solid var(--grey-seperators)}.multi-line-field-container{justify-content:flex-start;align-items:flex-start;flex-wrap:wrap}.field-title-sm{margin-bottom:8px;cursor:default}.input-field{width:100%;background-color:var(--grey-bg-1);border:1px solid var(--grey-seperators);border-radius:6px}.ip-text{height:44px;padding:8px 12px}.ip-textarea{max-height:94px;padding:8px}input:focus{outline:none}input::-moz-placeholder{color:var(--grey-seperators)}input:-ms-input-placeholder{color:var(--grey-seperators)}input::placeholder{color:var(--grey-seperators)}textarea:focus{outline:none}.date-picker-container{position:relative;width:140px}.date-picker-container .date-picker{cursor:pointer;height:32px;width:100%;font-size:14px;border-radius:6px;padding:0 12px;border:1px solid var(--grey-seperators);inset:10px auto auto 80px;background-color:var(--text-white)}.date-picker-container .date-picker:hover{background-color:var(--grey-hover)}.date-picker-container .date-picker-icon{position:absolute;top:50%;right:12px;transform:translateY(-50%);cursor:pointer}form .dynamic-field:last-child{border-bottom:none!important}#checkboxes-container{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}.radio-checkbox-common{display:flex;justify-content:center;align-items:center;cursor:pointer;margin-right:8px;margin-bottom:8px;background-color:var(--text-white);padding:12px 16px;border:1px solid var(--text-muted);border-radius:8px}.radio-checkbox-common p{color:var(--text-muted);cursor:pointer}.radio-checkbox-common img{margin-right:8px}.checkbox-active{background-color:var(--pmry-500)}.checkbox-active p{color:var(--text-white)}#error-messages-container{margin-top:4px;width:100%;display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}#error-messages-container p{color:var(--sem-error)}"]
             },] }
 ];

package/fesm2015/mis-crystal-design-system-dynamic-form.js.map

@@ -1 +1 @@
-{"version":3,"file":"mis-crystal-design-system-dynamic-form.js","sources":["../../../projects/mis-components/dynamic-form/dynamic-form.component.ts","../../../projects/mis-components/dynamic-form/dynamic-form.module.ts","../../../projects/mis-components/dynamic-form/mis-crystal-design-system-dynamic-form.ts"],"sourcesContent":["import { Component, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output } from \"@angular/core\";\nimport { NsDynamicForm } from \"./dynamic-form.namespace\";\nimport { AbstractControl, FormArray, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators } from \"@angular/forms\";\n\nimport * as moment from \"moment\";\nimport \"moment-timezone\";\nimport { Subscription } from \"rxjs\";\n\n@Component({\n  selector: \"mis-dynamic-form\",\n  templateUrl: \"./dynamic-form.component.html\",\n  styleUrls: [\"./dynamic-form.component.scss\"]\n})\nexport class DynamicFormComponent implements OnInit, OnDestroy {\n  /**\n   * formFields:  Dynamic fields recieved from the API metadata to build a dynamic form\n   * formValues:  Holds the value of the dynamic form with \"key\" being dynamic field \"title\"\n   *              and value being the user input.\n   */\n  @Input() formFields: Array<NsDynamicForm.IDynamicField> = [];\n  @Input() formValues: { [key: string]: any } = {};\n  // Need to deprecate these inputs and use constants.\n  @Input() activeBtnIconUrl = \"\";\n  @Input() calendarIconUrl = \"\";\n  /**\n   * dynamicForm: Constructed using formFields and formValues(in case of edit)\n   */\n  dynamicForm: FormGroup;\n\n  /**\n   * formUpdated: Emits formValues Object whenever there is a change in the dynamic form.\n   */\n  @Output() formUpdated = new EventEmitter<{ [key: string]: any }>();\n  /**\n   * formValid: Emits boolean depending on validity of the form\n   */\n  @Output() formValid = new EventEmitter<boolean>();\n  /**\n   * formInitialized: Emits dynamic form API on form initilization\n   */\n  @Output() formInitialized = new EventEmitter<any>();\n\n  dynamicFormAPI: NsDynamicForm.IDynamicFormAPI;\n  valueChangesSubscription$: Subscription;\n\n  constructor() {}\n\n  ngOnInit(): void {\n    // Building the form\n    this.dynamicForm = this.generateDynamicForm(this.formFields, this.formValues);\n\n    // Subscribing to form changes and emiting values.\n    this.valueChangesSubscription$ = this.dynamicForm.valueChanges.subscribe(formValue => {\n      this.onFormValueChanges();\n    });\n\n    //api to expose functions\n    this.dynamicFormAPI = {\n      defaultFormValues: () => {\n        return this.generateDynamicFieldsValueObject(this.dynamicForm.value.dynamicFields);\n      }\n    };\n    this.formInitialized.emit(this.dynamicFormAPI);\n    this.formValid.emit(this.dynamicForm.valid);\n  }\n  ngOnDestroy(): void {\n    this.valueChangesSubscription$?.unsubscribe();\n  }\n  onFormValueChanges(): void {\n    let formValues = this.generateDynamicFieldsValueObject(this.dynamicForm.value.dynamicFields);\n    this.formValid.emit(this.dynamicForm.valid);\n    this.formUpdated.emit(formValues);\n    console.log(formValues)\n  }\n  generateDynamicFieldsValueObject(formValues: Array<any>): { [key: string]: any } {\n    let dynamicFieldsValue = {};\n    formValues.forEach((fieldValue, index) => {\n      let formattedValue = this.mapFormFieldToFormValue(this.formFields[index], fieldValue.value);\n      if (fieldValue.subFields?.length > 0) {\n        let formattedSubFieldsValues = {}\n        fieldValue.subFields.forEach((subFieldValue, subIndex) => {\n          let subFormField = this.formFields[index].subFields[subIndex]\n          formattedSubFieldsValues[subFormField.configName] = this.mapFormFieldToFormValue(subFormField, subFieldValue)\n        })\n        dynamicFieldsValue[this.formFields[index].configName] = {\n          value: formattedValue,\n          subFields: formattedSubFieldsValues\n        }\n      }\n      else {\n        dynamicFieldsValue[this.formFields[index].configName] = formattedValue;\n      }\n    });\n    return dynamicFieldsValue;\n  }\n  generateDynamicForm(\n    formFields: Array<NsDynamicForm.IDynamicField>,\n    formValues: { [key: string]: any }\n  ): FormGroup {\n    let formArray = new FormArray([])\n\n    for (let field of formFields) {\n      let fieldValue = formValues[field.configName]?.value ? formValues[field.configName].value : formValues[field.configName]\n      let fieldControl = this.mapFormValueToFormField(field, fieldValue);\n      let subFieldsControls = this.generateSubDynamicFields(formValues, field, fieldControl.value);\n      formArray.push(new FormGroup({\n        value: fieldControl,\n        subFields: subFieldsControls\n      }))\n    }  \n    return new FormGroup({\n      dynamicFields: formArray\n    })\n  }\n  getDynamicFieldsControls(): FormArray {\n    return this.dynamicForm.get(\"dynamicFields\") as FormArray;\n  }\n  updateSubDynamicFields(\n    field: NsDynamicForm.IDynamicField,\n    formGroup: FormGroup,\n    value: any\n  ): void {\n    if (field.subFields?.length > 0) {\n      let subFieldsControls = this.generateSubDynamicFields(this.formValues, field, value);\n      formGroup.removeControl('subFields')\n      formGroup.addControl('subFields', subFieldsControls)\n    }\n  }\n  updateSelectedValueForSingleSelect(\n    field: NsDynamicForm.IDynamicField,\n    control: FormControl,\n    formGroup: FormGroup,\n    value: any\n  ): void {\n    if (control.value?.value !== value.value) {\n      control.setValue(value);\n    }\n    else control.setValue('');\n    this.updateSubDynamicFields(field, formGroup, value);\n    control.markAsTouched();\n  }\n  updateSelectedValueForMultiSelect(\n    field: NsDynamicForm.IDynamicField,\n    control: FormControl,\n    formGroup: FormGroup,\n    values: Array<any>\n  ): void {\n    let selectedValues: Array<{ label: string; value: any }> = control.value;\n    for (let value of values) {\n      let itemIndex = selectedValues.findIndex(item => item.label === value.label);\n      if (itemIndex > -1) {\n        selectedValues.splice(itemIndex, 1);\n      } else {\n        selectedValues.push({ ...value });\n      }\n    }\n    control.setValue(selectedValues);\n    this.updateSubDynamicFields(field, formGroup, values);\n    control.markAsTouched();\n  }\n  isCheckBoxSelected(value: string, selectedValues: Array<{ label: string; value: string }>): boolean {\n    return selectedValues.findIndex(item => item.label === value) > -1;\n  }\n  generateSubDynamicFields(\n    formValues: any,\n    parentField: NsDynamicForm.IDynamicField,\n    parentValue: Array<{ label: string, value: string | number }> | {label: string, value: string } | string | number | boolean\n  ): FormArray {\n    let controls = new FormArray([])\n    let subFields = parentField.subFields\n    let subFieldsValues = formValues[parentField.configName]?.subFields ? formValues[parentField.configName].subFields : {}\n    if(!subFields) return controls;\n    if (parentField.fieldType === 'singleSelect') {\n      subFields = subFields.filter((subField) => subField.parentConfigValue === (<{label: string, value: string }>parentValue)?.value);\n    }\n    else if (parentField.fieldType === 'multiSelect') {\n      let parentValues = new Set((<Array<{ label: string, value: string | number }>>parentValue).map((value) => value.value));\n      subFields = subFields.filter((subField) => parentValues.has(subField.parentConfigValue));\n    }\n\n    if (subFields?.length > 0) {\n        for (let subField of subFields) {\n          controls.push(this.mapFormValueToFormField(subField, subFieldsValues[subField.configName]))\n        }\n      }\n    return controls;\n  }\n  mapFormValueToFormField(formField: NsDynamicForm.IDynamicField, formValue: any): any {\n    let validators = formField.validators ? [dynamicFieldValidator(formField.validators)]: []\n    let control = new FormControl(null, validators);\n\n    if (formField.fieldType === \"input\") {\n      if (formField.fieldInputType === \"text\" || formField.fieldInputType === \"textarea\") control.setValue(formValue ? formValue : \"\");\n      else if (formField.fieldInputType === \"number\") control.setValue(formValue ? formValue : 0);\n      else if (formField.fieldInputType === \"date\") {\n        if (formValue && typeof formValue === \"number\") {\n          control.setValue(moment(formValue).tz(formField.fieldConfig.timezone).format(formField.fieldConfig.format));\n        } else {\n          control.setValue(moment().tz(formField.fieldConfig.timezone).format(formField.fieldConfig.format));\n        }\n      }\n    } else if (formField.fieldType === \"singleSelect\") {\n      const findSelectedValue = () => {\n        let index = formField.itemsList.findIndex(item => item.value === formValue)\n        return index >= 0 ? formField.itemsList[index]: \"\";\n      }\n      if (formField.fieldInputType === \"dropdown\") {\n        if (!formValue) control.setValue(formField.itemsList[0]);\n        else control.setValue(findSelectedValue())\n      }\n      else if (formField.fieldInputType === \"radio\") {\n        control.setValue(findSelectedValue())\n      }\n    } else if (formField.fieldType === \"multiSelect\") {\n      if (formValue && Array.isArray(formValue)) {\n        let selectedValues = [];\n        for (let value of formValue) {\n          let index = formField.itemsList.findIndex(item => item.value === value);\n          if (index > -1) selectedValues.push({ ...formField.itemsList[index] });\n        }\n        control.setValue(selectedValues);\n      } else {\n        control.setValue([]);\n      }\n    } else if (formField.fieldType === \"boolean\") {\n      control.setValue(!!formValue);\n    } else control.setValue(null);\n    return control;\n  }\n  mapFormFieldToFormValue(formField: NsDynamicForm.IDynamicField, formValue: any): any {\n    if (formField.fieldType === \"input\") {\n      if (formField.fieldInputType === \"text\" || formField.fieldInputType === \"textarea\") return formValue;\n      else if (formField.fieldInputType === \"number\") return +formValue;\n      else if (formField.fieldInputType === \"date\") {\n        return moment.tz(formValue, formField.fieldConfig.format, formField.fieldConfig.timezone).valueOf();\n      }\n    } else if (formField.fieldType === \"singleSelect\") {\n      return formValue?.value ?? '';\n    } else if (formField.fieldType === \"multiSelect\") {\n      return formValue?.map(item => item.value);\n    } else if (formField.fieldType === \"boolean\") {\n      return formValue;\n    } else return formValue;\n  }\n}\n\nexport const dynamicFieldValidator = (validators: Array<NsDynamicForm.IDynamicFieldValidator>): ValidatorFn => {\n  return (control: AbstractControl): ValidationErrors | null => {\n    let value = control.value\n    if (Array.isArray(value)) {\n      return null;\n    }\n    else if (typeof value === 'object') {\n      value = value?.value ? value.value : ''\n    }\n    let errors = null\n\n    validators.forEach((validator) => {\n      let error = null\n      let message = validator.message\n      switch (validator.type) {\n        case \"Required\":\n          error = Validators.required(control)\n          if(error) error = {Required: message}\n          break;\n        case \"MinLength\":\n          error = Validators.minLength(+validator.value)(control)\n          message = message.replace('${0}', error?.minlength.requiredLength)\n          if(error) error = { MinLength: message }\n          break;\n        case \"MaxLength\":\n          error = Validators.maxLength(+validator.value)(control)\n          message = message.replace('${0}', error?.actualLength)\n          if(error) error = { MaxLength: message }\n          break;\n        case \"Email\":\n          error = Validators.email(control)\n          if(error) error = {Email: message}\n          break;\n        case \"Custom\":\n          error = Validators.pattern(`${validator.value}`)(control)\n          if(error) error = {Custom: message}\n          break;\n        default:\n          break;\n      }\n      if (error) errors = { ...errors, ...error }\n    })\n    return errors\n  }\n}","import { CommonModule } from \"@angular/common\";\nimport { FormsModule } from \"@angular/forms\";\nimport { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { OverlayModule } from \"@angular/cdk/overlay\";\nimport { ScrollingModule } from \"@angular/cdk-experimental/scrolling\";\nimport { DropdownModule } from \"mis-crystal-design-system/dropdown\";\nimport { ReactiveFormsModule } from \"@angular/forms\";\nimport { DynamicFormComponent } from \"./dynamic-form.component\";\nimport { SwitchModule } from \"mis-crystal-design-system/switch\";\nimport { MultiSelectDropdownModule } from \"mis-crystal-design-system/multi-select-dropdown\";\nimport { DatepickerModuleV2 } from \"mis-crystal-design-system/datepicker_v2\";\n\n@NgModule({\n  declarations: [DynamicFormComponent],\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    FormsModule,\n    OverlayModule,\n    ScrollingModule,\n    DropdownModule,\n    SwitchModule,\n    MultiSelectDropdownModule,\n    DatepickerModuleV2\n  ],\n  exports: [DynamicFormComponent]\n})\nexport class DynamicFormModule {\n  static forRoot(): ModuleWithProviders<DynamicFormModule> {\n    return { ngModule: DynamicFormModule, providers: [] };\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["moment.tz"],"mappings":";;;;;;;;;;;;;MAaa,oBAAoB;IAgC/B;;;;;;QA1BS,eAAU,GAAuC,EAAE,CAAC;QACpD,eAAU,GAA2B,EAAE,CAAC;;QAExC,qBAAgB,GAAG,EAAE,CAAC;QACtB,oBAAe,GAAG,EAAE,CAAC;;;;QASpB,gBAAW,GAAG,IAAI,YAAY,EAA0B,CAAC;;;;QAIzD,cAAS,GAAG,IAAI,YAAY,EAAW,CAAC;;;;QAIxC,oBAAe,GAAG,IAAI,YAAY,EAAO,CAAC;KAKpC;IAEhB,QAAQ;;QAEN,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;;QAG9E,IAAI,CAAC,yBAAyB,GAAG,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,SAAS,CAAC,SAAS;YAChF,IAAI,CAAC,kBAAkB,EAAE,CAAC;SAC3B,CAAC,CAAC;;QAGH,IAAI,CAAC,cAAc,GAAG;YACpB,iBAAiB,EAAE;gBACjB,OAAO,IAAI,CAAC,gCAAgC,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;aACpF;SACF,CAAC;QACF,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAC/C,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;KAC7C;IACD,WAAW;;QACT,MAAA,IAAI,CAAC,yBAAyB,0CAAE,WAAW,GAAG;KAC/C;IACD,kBAAkB;QAChB,IAAI,UAAU,GAAG,IAAI,CAAC,gCAAgC,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;QAC7F,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAC5C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAClC,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,CAAA;KACxB;IACD,gCAAgC,CAAC,UAAsB;QACrD,IAAI,kBAAkB,GAAG,EAAE,CAAC;QAC5B,UAAU,CAAC,OAAO,CAAC,CAAC,UAAU,EAAE,KAAK;;YACnC,IAAI,cAAc,GAAG,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;YAC5F,IAAI,OAAA,UAAU,CAAC,SAAS,0CAAE,MAAM,IAAG,CAAC,EAAE;gBACpC,IAAI,wBAAwB,GAAG,EAAE,CAAA;gBACjC,UAAU,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,aAAa,EAAE,QAAQ;oBACnD,IAAI,YAAY,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAA;oBAC7D,wBAAwB,CAAC,YAAY,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,uBAAuB,CAAC,YAAY,EAAE,aAAa,CAAC,CAAA;iBAC9G,CAAC,CAAA;gBACF,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,GAAG;oBACtD,KAAK,EAAE,cAAc;oBACrB,SAAS,EAAE,wBAAwB;iBACpC,CAAA;aACF;iBACI;gBACH,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,GAAG,cAAc,CAAC;aACxE;SACF,CAAC,CAAC;QACH,OAAO,kBAAkB,CAAC;KAC3B;IACD,mBAAmB,CACjB,UAA8C,EAC9C,UAAkC;;QAElC,IAAI,SAAS,GAAG,IAAI,SAAS,CAAC,EAAE,CAAC,CAAA;QAEjC,KAAK,IAAI,KAAK,IAAI,UAAU,EAAE;YAC5B,IAAI,UAAU,GAAG,OAAA,UAAU,CAAC,KAAK,CAAC,UAAU,CAAC,0CAAE,KAAK,IAAG,UAAU,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC,UAAU,CAAC,CAAA;YACxH,IAAI,YAAY,GAAG,IAAI,CAAC,uBAAuB,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;YACnE,IAAI,iBAAiB,GAAG,IAAI,CAAC,wBAAwB,CAAC,UAAU,EAAE,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC;YAC7F,SAAS,CAAC,IAAI,CAAC,IAAI,SAAS,CAAC;gBAC3B,KAAK,EAAE,YAAY;gBACnB,SAAS,EAAE,iBAAiB;aAC7B,CAAC,CAAC,CAAA;SACJ;QACD,OAAO,IAAI,SAAS,CAAC;YACnB,aAAa,EAAE,SAAS;SACzB,CAAC,CAAA;KACH;IACD,wBAAwB;QACtB,OAAO,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,eAAe,CAAc,CAAC;KAC3D;IACD,sBAAsB,CACpB,KAAkC,EAClC,SAAoB,EACpB,KAAU;;QAEV,IAAI,OAAA,KAAK,CAAC,SAAS,0CAAE,MAAM,IAAG,CAAC,EAAE;YAC/B,IAAI,iBAAiB,GAAG,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;YACrF,SAAS,CAAC,aAAa,CAAC,WAAW,CAAC,CAAA;YACpC,SAAS,CAAC,UAAU,CAAC,WAAW,EAAE,iBAAiB,CAAC,CAAA;SACrD;KACF;IACD,kCAAkC,CAChC,KAAkC,EAClC,OAAoB,EACpB,SAAoB,EACpB,KAAU;;QAEV,IAAI,OAAA,OAAO,CAAC,KAAK,0CAAE,KAAK,MAAK,KAAK,CAAC,KAAK,EAAE;YACxC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;SACzB;;YACI,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;QAC1B,IAAI,CAAC,sBAAsB,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC;QACrD,OAAO,CAAC,aAAa,EAAE,CAAC;KACzB;IACD,iCAAiC,CAC/B,KAAkC,EAClC,OAAoB,EACpB,SAAoB,EACpB,MAAkB;QAElB,IAAI,cAAc,GAAyC,OAAO,CAAC,KAAK,CAAC;QACzE,KAAK,IAAI,KAAK,IAAI,MAAM,EAAE;YACxB,IAAI,SAAS,GAAG,cAAc,CAAC,SAAS,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAC,CAAC;YAC7E,IAAI,SAAS,GAAG,CAAC,CAAC,EAAE;gBAClB,cAAc,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;aACrC;iBAAM;gBACL,cAAc,CAAC,IAAI,mBAAM,KAAK,EAAG,CAAC;aACnC;SACF;QACD,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;QACjC,IAAI,CAAC,sBAAsB,CAAC,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC;QACtD,OAAO,CAAC,aAAa,EAAE,CAAC;KACzB;IACD,kBAAkB,CAAC,KAAa,EAAE,cAAuD;QACvF,OAAO,cAAc,CAAC,SAAS,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;KACpE;IACD,wBAAwB,CACtB,UAAe,EACf,WAAwC,EACxC,WAA2H;;QAE3H,IAAI,QAAQ,GAAG,IAAI,SAAS,CAAC,EAAE,CAAC,CAAA;QAChC,IAAI,SAAS,GAAG,WAAW,CAAC,SAAS,CAAA;QACrC,IAAI,eAAe,GAAG,OAAA,UAAU,CAAC,WAAW,CAAC,UAAU,CAAC,0CAAE,SAAS,IAAG,UAAU,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,SAAS,GAAG,EAAE,CAAA;QACvH,IAAG,CAAC,SAAS;YAAE,OAAO,QAAQ,CAAC;QAC/B,IAAI,WAAW,CAAC,SAAS,KAAK,cAAc,EAAE;YAC5C,SAAS,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC,QAAQ,eAAK,OAAA,QAAQ,CAAC,iBAAiB,YAAuC,WAAY,0CAAE,KAAK,CAAA,CAAA,EAAA,CAAC,CAAC;SAClI;aACI,IAAI,WAAW,CAAC,SAAS,KAAK,aAAa,EAAE;YAChD,IAAI,YAAY,GAAG,IAAI,GAAG,CAAoD,WAAY,CAAC,GAAG,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;YACxH,SAAS,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC,QAAQ,KAAK,YAAY,CAAC,GAAG,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAC,CAAC;SAC1F;QAED,IAAI,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,MAAM,IAAG,CAAC,EAAE;YACvB,KAAK,IAAI,QAAQ,IAAI,SAAS,EAAE;gBAC9B,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,uBAAuB,CAAC,QAAQ,EAAE,eAAe,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,CAAA;aAC5F;SACF;QACH,OAAO,QAAQ,CAAC;KACjB;IACD,uBAAuB,CAAC,SAAsC,EAAE,SAAc;QAC5E,IAAI,UAAU,GAAG,SAAS,CAAC,UAAU,GAAG,CAAC,qBAAqB,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,GAAE,EAAE,CAAA;QACzF,IAAI,OAAO,GAAG,IAAI,WAAW,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;QAEhD,IAAI,SAAS,CAAC,SAAS,KAAK,OAAO,EAAE;YACnC,IAAI,SAAS,CAAC,cAAc,KAAK,MAAM,IAAI,SAAS,CAAC,cAAc,KAAK,UAAU;gBAAE,OAAO,CAAC,QAAQ,CAAC,SAAS,GAAG,SAAS,GAAG,EAAE,CAAC,CAAC;iBAC5H,IAAI,SAAS,CAAC,cAAc,KAAK,QAAQ;gBAAE,OAAO,CAAC,QAAQ,CAAC,SAAS,GAAG,SAAS,GAAG,CAAC,CAAC,CAAC;iBACvF,IAAI,SAAS,CAAC,cAAc,KAAK,MAAM,EAAE;gBAC5C,IAAI,SAAS,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE;oBAC9C,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC;iBAC7G;qBAAM;oBACL,OAAO,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,CAAC,SAAS,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC;iBACpG;aACF;SACF;aAAM,IAAI,SAAS,CAAC,SAAS,KAAK,cAAc,EAAE;YACjD,MAAM,iBAAiB,GAAG;gBACxB,IAAI,KAAK,GAAG,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAA;gBAC3E,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,GAAE,EAAE,CAAC;aACpD,CAAA;YACD,IAAI,SAAS,CAAC,cAAc,KAAK,UAAU,EAAE;gBAC3C,IAAI,CAAC,SAAS;oBAAE,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;;oBACpD,OAAO,CAAC,QAAQ,CAAC,iBAAiB,EAAE,CAAC,CAAA;aAC3C;iBACI,IAAI,SAAS,CAAC,cAAc,KAAK,OAAO,EAAE;gBAC7C,OAAO,CAAC,QAAQ,CAAC,iBAAiB,EAAE,CAAC,CAAA;aACtC;SACF;aAAM,IAAI,SAAS,CAAC,SAAS,KAAK,aAAa,EAAE;YAChD,IAAI,SAAS,IAAI,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE;gBACzC,IAAI,cAAc,GAAG,EAAE,CAAC;gBACxB,KAAK,IAAI,KAAK,IAAI,SAAS,EAAE;oBAC3B,IAAI,KAAK,GAAG,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;oBACxE,IAAI,KAAK,GAAG,CAAC,CAAC;wBAAE,cAAc,CAAC,IAAI,mBAAM,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,EAAG,CAAC;iBACxE;gBACD,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;aAClC;iBAAM;gBACL,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;aACtB;SACF;aAAM,IAAI,SAAS,CAAC,SAAS,KAAK,SAAS,EAAE;YAC5C,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;SAC/B;;YAAM,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QAC9B,OAAO,OAAO,CAAC;KAChB;IACD,uBAAuB,CAAC,SAAsC,EAAE,SAAc;;QAC5E,IAAI,SAAS,CAAC,SAAS,KAAK,OAAO,EAAE;YACnC,IAAI,SAAS,CAAC,cAAc,KAAK,MAAM,IAAI,SAAS,CAAC,cAAc,KAAK,UAAU;gBAAE,OAAO,SAAS,CAAC;iBAChG,IAAI,SAAS,CAAC,cAAc,KAAK,QAAQ;gBAAE,OAAO,CAAC,SAAS,CAAC;iBAC7D,IAAI,SAAS,CAAC,cAAc,KAAK,MAAM,EAAE;gBAC5C,OAAOA,EAAS,CAAC,SAAS,EAAE,SAAS,CAAC,WAAW,CAAC,MAAM,EAAE,SAAS,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,OAAO,EAAE,CAAC;aACrG;SACF;aAAM,IAAI,SAAS,CAAC,SAAS,KAAK,cAAc,EAAE;YACjD,aAAO,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,KAAK,mCAAI,EAAE,CAAC;SAC/B;aAAM,IAAI,SAAS,CAAC,SAAS,KAAK,aAAa,EAAE;YAChD,OAAO,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE;SAC3C;aAAM,IAAI,SAAS,CAAC,SAAS,KAAK,SAAS,EAAE;YAC5C,OAAO,SAAS,CAAC;SAClB;;YAAM,OAAO,SAAS,CAAC;KACzB;;;YA3OF,SAAS,SAAC;gBACT,QAAQ,EAAE,kBAAkB;gBAC5B,6yQAA4C;;aAE7C;;;;yBAOE,KAAK;yBACL,KAAK;+BAEL,KAAK;8BACL,KAAK;0BASL,MAAM;wBAIN,MAAM;8BAIN,MAAM;;AA8MF,MAAM,qBAAqB,GAAG,CAAC,UAAuD;IAC3F,OAAO,CAAC,OAAwB;QAC9B,IAAI,KAAK,GAAG,OAAO,CAAC,KAAK,CAAA;QACzB,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YACxB,OAAO,IAAI,CAAC;SACb;aACI,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;YAClC,KAAK,GAAG,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,IAAG,KAAK,CAAC,KAAK,GAAG,EAAE,CAAA;SACxC;QACD,IAAI,MAAM,GAAG,IAAI,CAAA;QAEjB,UAAU,CAAC,OAAO,CAAC,CAAC,SAAS;YAC3B,IAAI,KAAK,GAAG,IAAI,CAAA;YAChB,IAAI,OAAO,GAAG,SAAS,CAAC,OAAO,CAAA;YAC/B,QAAQ,SAAS,CAAC,IAAI;gBACpB,KAAK,UAAU;oBACb,KAAK,GAAG,UAAU,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAA;oBACpC,IAAG,KAAK;wBAAE,KAAK,GAAG,EAAC,QAAQ,EAAE,OAAO,EAAC,CAAA;oBACrC,MAAM;gBACR,KAAK,WAAW;oBACd,KAAK,GAAG,UAAU,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAA;oBACvD,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,SAAS,CAAC,cAAc,CAAC,CAAA;oBAClE,IAAG,KAAK;wBAAE,KAAK,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,CAAA;oBACxC,MAAM;gBACR,KAAK,WAAW;oBACd,KAAK,GAAG,UAAU,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAA;oBACvD,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,YAAY,CAAC,CAAA;oBACtD,IAAG,KAAK;wBAAE,KAAK,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,CAAA;oBACxC,MAAM;gBACR,KAAK,OAAO;oBACV,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;oBACjC,IAAG,KAAK;wBAAE,KAAK,GAAG,EAAC,KAAK,EAAE,OAAO,EAAC,CAAA;oBAClC,MAAM;gBACR,KAAK,QAAQ;oBACX,KAAK,GAAG,UAAU,CAAC,OAAO,CAAC,GAAG,SAAS,CAAC,KAAK,EAAE,CAAC,CAAC,OAAO,CAAC,CAAA;oBACzD,IAAG,KAAK;wBAAE,KAAK,GAAG,EAAC,MAAM,EAAE,OAAO,EAAC,CAAA;oBACnC,MAAM;gBACR;oBACE,MAAM;aACT;YACD,IAAI,KAAK;gBAAE,MAAM,mCAAQ,MAAM,GAAK,KAAK,CAAE,CAAA;SAC5C,CAAC,CAAA;QACF,OAAO,MAAM,CAAA;KACd,CAAA;AACH,CAAC;;MCvQY,iBAAiB;IAC5B,OAAO,OAAO;QACZ,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC;KACvD;;;YAlBF,QAAQ,SAAC;gBACR,YAAY,EAAE,CAAC,oBAAoB,CAAC;gBACpC,OAAO,EAAE;oBACP,YAAY;oBACZ,mBAAmB;oBACnB,WAAW;oBACX,aAAa;oBACb,eAAe;oBACf,cAAc;oBACd,YAAY;oBACZ,yBAAyB;oBACzB,kBAAkB;iBACnB;gBACD,OAAO,EAAE,CAAC,oBAAoB,CAAC;aAChC;;;AC1BD;;;;;;"}
+{"version":3,"file":"mis-crystal-design-system-dynamic-form.js","sources":["../../../projects/mis-components/dynamic-form/dynamic-form.component.ts","../../../projects/mis-components/dynamic-form/dynamic-form.module.ts","../../../projects/mis-components/dynamic-form/mis-crystal-design-system-dynamic-form.ts"],"sourcesContent":["import { Component, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output } from \"@angular/core\";\nimport { NsDynamicForm } from \"./dynamic-form.namespace\";\nimport { AbstractControl, FormArray, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators } from \"@angular/forms\";\n\nimport * as moment from \"moment\";\nimport \"moment-timezone\";\nimport { Subscription } from \"rxjs\";\n\n@Component({\n  selector: \"mis-dynamic-form\",\n  templateUrl: \"./dynamic-form.component.html\",\n  styleUrls: [\"./dynamic-form.component.scss\"]\n})\nexport class DynamicFormComponent implements OnInit, OnDestroy {\n  /**\n   * formFields:  Dynamic fields recieved from the API metadata to build a dynamic form\n   * formValues:  Holds the value of the dynamic form with \"key\" being dynamic field \"title\"\n   *              and value being the user input.\n   */\n  @Input() formFields: Array<NsDynamicForm.IDynamicField> = [];\n  @Input() formValues: { [key: string]: any } = {};\n  // Need to deprecate these inputs and use constants.\n  @Input() activeBtnIconUrl = \"\";\n  @Input() calendarIconUrl = \"\";\n  /**\n   * dynamicForm: Constructed using formFields and formValues(in case of edit)\n   */\n  dynamicForm: FormGroup;\n\n  /**\n   * formUpdated: Emits formValues Object whenever there is a change in the dynamic form.\n   */\n  @Output() formUpdated = new EventEmitter<{ [key: string]: any }>();\n  /**\n   * formValid: Emits boolean depending on validity of the form\n   */\n  @Output() formValid = new EventEmitter<boolean>();\n  /**\n   * formInitialized: Emits dynamic form API on form initilization\n   */\n  @Output() formInitialized = new EventEmitter<any>();\n\n  dynamicFormAPI: NsDynamicForm.IDynamicFormAPI;\n  valueChangesSubscription$: Subscription;\n\n  constructor() {}\n\n  ngOnInit(): void {\n    // Building the form\n    this.dynamicForm = this.generateDynamicForm(this.formFields, this.formValues);\n\n    // Subscribing to form changes and emiting values.\n    this.valueChangesSubscription$ = this.dynamicForm.valueChanges.subscribe(formValue => {\n      this.onFormValueChanges();\n    });\n\n    //api to expose functions\n    this.dynamicFormAPI = {\n      defaultFormValues: () => {\n        return this.generateDynamicFieldsValueObject(this.dynamicForm.value.dynamicFields);\n      }\n    };\n    this.formInitialized.emit(this.dynamicFormAPI);\n    this.formValid.emit(this.dynamicForm.valid);\n  }\n  ngOnDestroy(): void {\n    this.valueChangesSubscription$?.unsubscribe();\n  }\n  onFormValueChanges(): void {\n    let formValues = this.generateDynamicFieldsValueObject(this.dynamicForm.value.dynamicFields);\n    this.formValid.emit(this.dynamicForm.valid);\n    this.formUpdated.emit(formValues);\n    console.log(formValues)\n  }\n  generateDynamicFieldsValueObject(formValues: Array<any>): { [key: string]: any } {\n    let dynamicFieldsValue = {};\n    formValues.forEach((fieldValue, index) => {\n      let formattedValue = this.mapFormFieldToFormValue(this.formFields[index], fieldValue.value);\n      if (fieldValue.subFields?.length > 0) {\n        let formattedSubFieldsValues = {}\n        fieldValue.subFields.forEach((subFieldValue, subIndex) => {\n          let subFormField = this.formFields[index].subFields[subIndex]\n          formattedSubFieldsValues[subFormField.configName] = this.mapFormFieldToFormValue(subFormField, subFieldValue)\n        })\n        dynamicFieldsValue[this.formFields[index].configName] = {\n          value: formattedValue,\n          subFields: formattedSubFieldsValues\n        }\n      }\n      else {\n        dynamicFieldsValue[this.formFields[index].configName] = formattedValue;\n      }\n    });\n    return dynamicFieldsValue;\n  }\n  generateDynamicForm(\n    formFields: Array<NsDynamicForm.IDynamicField>,\n    formValues: { [key: string]: any }\n  ): FormGroup {\n    let formArray = new FormArray([])\n\n    for (let field of formFields) {\n      let fieldValue = formValues[field.configName]?.value ? formValues[field.configName].value : formValues[field.configName]\n      let fieldControl = this.mapFormValueToFormField(field, fieldValue);\n      let subFieldsControls = this.generateSubDynamicFields(formValues, field, fieldControl.value);\n      formArray.push(new FormGroup({\n        value: fieldControl,\n        subFields: subFieldsControls\n      }))\n    }  \n    return new FormGroup({\n      dynamicFields: formArray\n    })\n  }\n  getDynamicFieldsControls(): FormArray {\n    return this.dynamicForm.get(\"dynamicFields\") as FormArray;\n  }\n  updateSubDynamicFields(\n    field: NsDynamicForm.IDynamicField,\n    formGroup: FormGroup,\n    value: any\n  ): void {\n    if (field.subFields?.length > 0) {\n      let subFieldsControls = this.generateSubDynamicFields(this.formValues, field, value);\n      formGroup.removeControl('subFields')\n      formGroup.addControl('subFields', subFieldsControls)\n    }\n  }\n  updateSelectedValueForSingleSelect(\n    field: NsDynamicForm.IDynamicField,\n    control: FormControl,\n    formGroup: FormGroup,\n    value: any\n  ): void {\n    if (control.value?.value !== value.value) {\n      control.setValue(value);\n    }\n    else control.setValue('');\n    this.updateSubDynamicFields(field, formGroup, value);\n    control.markAsTouched();\n  }\n  updateSelectedValueForMultiSelect(\n    field: NsDynamicForm.IDynamicField,\n    control: FormControl,\n    formGroup: FormGroup,\n    values: Array<any>\n  ): void {\n    let selectedValues: Array<{ label: string; value: any }> = control.value;\n    for (let value of values) {\n      let itemIndex = selectedValues.findIndex(item => item.label === value.label);\n      if (itemIndex > -1) {\n        selectedValues.splice(itemIndex, 1);\n      } else {\n        selectedValues.push({ ...value });\n      }\n    }\n    control.setValue(selectedValues);\n    this.updateSubDynamicFields(field, formGroup, values);\n    control.markAsTouched();\n  }\n  isCheckBoxSelected(value: string, selectedValues: Array<{ label: string; value: string }>): boolean {\n    return selectedValues.findIndex(item => item.label === value) > -1;\n  }\n  generateSubDynamicFields(\n    formValues: any,\n    parentField: NsDynamicForm.IDynamicField,\n    parentValue: Array<{ label: string, value: string | number }> | {label: string, value: string } | string | number | boolean\n  ): FormArray {\n    let controls = new FormArray([])\n    let subFields = parentField.subFields\n    let subFieldsValues = formValues[parentField.configName]?.subFields ? formValues[parentField.configName].subFields : {}\n    if(!subFields) return controls;\n    if (parentField.fieldType === 'singleSelect') {\n      subFields = subFields.filter((subField) => subField.parentConfigValue === (<{label: string, value: string }>parentValue)?.value);\n    }\n    else if (parentField.fieldType === 'multiSelect') {\n      let parentValues = new Set((<Array<{ label: string, value: string | number }>>parentValue).map((value) => value.value));\n      subFields = subFields.filter((subField) => parentValues.has(subField.parentConfigValue));\n    }\n\n    if (subFields?.length > 0) {\n        for (let subField of subFields) {\n          controls.push(this.mapFormValueToFormField(subField, subFieldsValues[subField.configName]))\n        }\n      }\n    return controls;\n  }\n  mapFormValueToFormField(formField: NsDynamicForm.IDynamicField, formValue: any): any {\n    let validators = formField.validators ? [dynamicFieldValidator(formField.validators)]: []\n    let control = new FormControl(null, validators);\n\n    if (formField.fieldType === \"input\") {\n      if (formField.fieldInputType === \"text\" || formField.fieldInputType === \"textarea\") control.setValue(formValue ? formValue : \"\");\n      else if (formField.fieldInputType === \"number\") control.setValue(formValue ? formValue : 0);\n      else if (formField.fieldInputType === \"date\") {\n        if (formValue && typeof formValue === \"number\") {\n          control.setValue(moment(formValue).tz(formField.fieldConfig.timezone).format(formField.fieldConfig.format));\n        } else {\n          control.setValue(moment().tz(formField.fieldConfig.timezone).format(formField.fieldConfig.format));\n        }\n      }\n    } else if (formField.fieldType === \"singleSelect\") {\n      const findSelectedValue = () => {\n        let index = formField.itemsList.findIndex(item => item.value === formValue)\n        return index >= 0 ? formField.itemsList[index]: \"\";\n      }\n      if (formField.fieldInputType === \"dropdown\") {\n        if (!formValue) control.setValue(formField.itemsList[0]);\n        else control.setValue(findSelectedValue())\n      }\n      else if (formField.fieldInputType === \"radio\") {\n        control.setValue(findSelectedValue())\n      }\n    } else if (formField.fieldType === \"multiSelect\") {\n      if (formValue && Array.isArray(formValue)) {\n        let selectedValues = [];\n        for (let value of formValue) {\n          let index = formField.itemsList.findIndex(item => item.value === value);\n          if (index > -1) selectedValues.push({ ...formField.itemsList[index] });\n        }\n        control.setValue(selectedValues);\n      } else {\n        control.setValue([]);\n      }\n    } else if (formField.fieldType === \"boolean\") {\n      control.setValue(!!formValue);\n    } else control.setValue(null);\n    return control;\n  }\n  mapFormFieldToFormValue(formField: NsDynamicForm.IDynamicField, formValue: any): any {\n    if (formField.fieldType === \"input\") {\n      if (formField.fieldInputType === \"text\" || formField.fieldInputType === \"textarea\") return formValue;\n      else if (formField.fieldInputType === \"number\") return +formValue;\n      else if (formField.fieldInputType === \"date\") {\n        return moment.tz(formValue, formField.fieldConfig.format, formField.fieldConfig.timezone).valueOf();\n      }\n    } else if (formField.fieldType === \"singleSelect\") {\n      return formValue?.value ?? '';\n    } else if (formField.fieldType === \"multiSelect\") {\n      return formValue?.map(item => item.value);\n    } else if (formField.fieldType === \"boolean\") {\n      return formValue;\n    } else return formValue;\n  }\n}\n\nexport const dynamicFieldValidator = (validators: Array<NsDynamicForm.IDynamicFieldValidator>): ValidatorFn => {\n  return (control: AbstractControl): ValidationErrors | null => {\n    let value = control.value\n    if (Array.isArray(value)) {\n      return null;\n    }\n    else if (typeof value === 'object') {\n      value = value?.value ? value.value : ''\n    }\n    let errors = null\n\n    validators.forEach((validator) => {\n      let error = null\n      let message = validator.message\n      switch (validator.type) {\n        case \"Required\":\n          error = Validators.required(control)\n          if(error) error = {Required: message}\n          break;\n        case \"MinLength\":\n          error = Validators.minLength(+validator.value)(control)\n          message = message.replace('${0}', error?.minlength.requiredLength)\n          if(error) error = { MinLength: message }\n          break;\n        case \"MaxLength\":\n          error = Validators.maxLength(+validator.value)(control)\n          message = message.replace('${0}', error?.actualLength)\n          if(error) error = { MaxLength: message }\n          break;\n        case \"Email\":\n          error = Validators.email(control)\n          if(error) error = {Email: message}\n          break;\n        case \"Custom\":\n          error = Validators.pattern(`${validator.value}`)(control)\n          if(error) error = {Custom: message}\n          break;\n        default:\n          break;\n      }\n      if (error) errors = { ...errors, ...error }\n    })\n    return errors\n  }\n}","import { CommonModule } from \"@angular/common\";\nimport { FormsModule } from \"@angular/forms\";\nimport { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { OverlayModule } from \"@angular/cdk/overlay\";\nimport { ScrollingModule } from \"@angular/cdk-experimental/scrolling\";\nimport { DropdownModule } from \"mis-crystal-design-system/dropdown\";\nimport { ReactiveFormsModule } from \"@angular/forms\";\nimport { DynamicFormComponent } from \"./dynamic-form.component\";\nimport { SwitchModule } from \"mis-crystal-design-system/switch\";\nimport { MultiSelectDropdownModule } from \"mis-crystal-design-system/multi-select-dropdown\";\nimport { DatepickerModuleV2 } from \"mis-crystal-design-system/datepicker_v2\";\n\n@NgModule({\n  declarations: [DynamicFormComponent],\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    FormsModule,\n    OverlayModule,\n    ScrollingModule,\n    DropdownModule,\n    SwitchModule,\n    MultiSelectDropdownModule,\n    DatepickerModuleV2\n  ],\n  exports: [DynamicFormComponent]\n})\nexport class DynamicFormModule {\n  static forRoot(): ModuleWithProviders<DynamicFormModule> {\n    return { ngModule: DynamicFormModule, providers: [] };\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["moment.tz"],"mappings":"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"}

package/fesm2015/mis-crystal-design-system-input-stepper.js

@@ -0,0 +1,71 @@
+import { EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+class InputStepperComponent {
+    constructor() {
+        this.value = 1;
+        this.width = '200px';
+        this.minLimit = 0;
+        this.maxLimit = 2;
+        this.valueChange = new EventEmitter();
+    }
+    increment() {
+        this.value++;
+        this.emitValueChange();
+    }
+    decrement() {
+        if (this.value > 0) {
+            this.value--;
+            this.emitValueChange();
+        }
+    }
+    onInputChange(newValue) {
+        const parsedValue = parseInt(newValue, 10);
+        if (!isNaN(parsedValue)) {
+            this.value = parsedValue;
+            this.emitValueChange();
+        }
+    }
+    emitValueChange() {
+        console.log("value change", this.value);
+        this.valueChange.emit(this.value);
+    }
+}
+InputStepperComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'mis-input-stepper',
+                template: "<div class=\"nudger\" [ngStyle]=\"{'max-width': width }\">\n    <button (click)=\"decrement()\" [ngClass]=\"{'disabled': value === minLimit}\">-</button>\n    <input type=\"text\" [value]=\"value\" (input)=\"onInputChange($event.target.value)\">\n    <button (click)=\"increment()\" [ngClass]=\"{'disabled': value === maxLimit}\">+</button>\n</div>\n  ",
+                styles: [".nudger{display:flex;align-items:center;justify-content:center;width:100%;border:1px solid #0937b2;border-radius:4px}button{padding:.5em 1em;cursor:pointer;border:none;transition:background-color .3s;color:#0937b2}button,button:hover{background-color:#fff}input{width:40%;text-align:center;padding:.5em 1em;color:#0937b2;border:none}@media screen and (max-width:600px){.nudger{max-width:150px}}.disabled{opacity:.6;cursor:not-allowed}"]
+            },] }
+];
+InputStepperComponent.ctorParameters = () => [];
+InputStepperComponent.propDecorators = {
+    value: [{ type: Input }],
+    width: [{ type: Input }],
+    minLimit: [{ type: Input }],
+    maxLimit: [{ type: Input }],
+    valueChange: [{ type: Output }]
+};
+
+class InputStepperModule {
+}
+InputStepperModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    InputStepperComponent
+                ],
+                imports: [
+                    CommonModule
+                ],
+                exports: [
+                    InputStepperComponent
+                ]
+            },] }
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { InputStepperComponent, InputStepperModule };
+//# sourceMappingURL=mis-crystal-design-system-input-stepper.js.map

package/fesm2015/mis-crystal-design-system-input-stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mis-crystal-design-system-input-stepper.js","sources":["../../../projects/mis-components/input-stepper/input-stepper/input-stepper.component.ts","../../../projects/mis-components/input-stepper/input-stepper.module.ts","../../../projects/mis-components/input-stepper/mis-crystal-design-system-input-stepper.ts"],"sourcesContent":["import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\n\n@Component({\n  selector: 'mis-input-stepper',\n  templateUrl: './input-stepper.component.html',\n  styleUrls: ['./input-stepper.component.css']\n})\nexport class InputStepperComponent {\n  @Input() value: number = 1;\n  @Input() width?: string = '200px';\n  @Input() minLimit : number = 0;\n  @Input() maxLimit: number = 2;\n  @Output() valueChange: EventEmitter<number> = new EventEmitter<number>();\n\n  constructor() { }\n\n  increment() {\n    this.value++;\n    this.emitValueChange();\n  }\n\n  decrement() {\n    if (this.value > 0) {\n      this.value--;\n      this.emitValueChange();\n    }\n  }\n\n  onInputChange(newValue: string) {\n    const parsedValue = parseInt(newValue, 10);\n    if (!isNaN(parsedValue)) {\n      this.value = parsedValue;\n      this.emitValueChange();\n    }\n  }\n\n  private emitValueChange() {\n    console.log(\"value change\", this.value);\n    this.valueChange.emit(this.value);\n  }\n\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { InputStepperComponent } from './input-stepper/input-stepper.component';\n\n\n\n@NgModule({\n  declarations: [\n    InputStepperComponent\n  ],\n  imports: [\n    CommonModule\n  ],\n  exports: [\n    InputStepperComponent\n  ]\n})\nexport class InputStepperModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAOa,qBAAqB;IAOhC;QANS,UAAK,GAAW,CAAC,CAAC;QAClB,UAAK,GAAY,OAAO,CAAC;QACzB,aAAQ,GAAY,CAAC,CAAC;QACtB,aAAQ,GAAW,CAAC,CAAC;QACpB,gBAAW,GAAyB,IAAI,YAAY,EAAU,CAAC;KAExD;IAEjB,SAAS;QACP,IAAI,CAAC,KAAK,EAAE,CAAC;QACb,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,SAAS;QACP,IAAI,IAAI,CAAC,KAAK,GAAG,CAAC,EAAE;YAClB,IAAI,CAAC,KAAK,EAAE,CAAC;YACb,IAAI,CAAC,eAAe,EAAE,CAAC;SACxB;KACF;IAED,aAAa,CAAC,QAAgB;QAC5B,MAAM,WAAW,GAAG,QAAQ,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;QAC3C,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,EAAE;YACvB,IAAI,CAAC,KAAK,GAAG,WAAW,CAAC;YACzB,IAAI,CAAC,eAAe,EAAE,CAAC;SACxB;KACF;IAEO,eAAe;QACrB,OAAO,CAAC,GAAG,CAAC,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QACxC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACnC;;;YArCF,SAAS,SAAC;gBACT,QAAQ,EAAE,mBAAmB;gBAC7B,4WAA6C;;aAE9C;;;;oBAEE,KAAK;oBACL,KAAK;uBACL,KAAK;uBACL,KAAK;0BACL,MAAM;;;MCKI,kBAAkB;;;YAX9B,QAAQ,SAAC;gBACR,YAAY,EAAE;oBACZ,qBAAqB;iBACtB;gBACD,OAAO,EAAE;oBACP,YAAY;iBACb;gBACD,OAAO,EAAE;oBACP,qBAAqB;iBACtB;aACF;;;AChBD;;;;;;"}

package/fesm2015/mis-crystal-design-system-multi-select-dropdown.js

@@ -241,7 +241,7 @@ class MultiSelectDropdownComponent {
 MultiSelectDropdownComponent.decorators = [
     { type: Component, args: [{
                 selector: "mis-multi-select-dropdown",
-                template: "<div\n  class=\"container\"\n  [ngStyle]=\"{\n    height: height.length > 0 ? height : '',\n    width: width.length > 0 ? width : ''\n  }\"\n>\n  <div\n    class=\"dropdown\"\n    #select\n    tabindex=\"0\"\n    (keyup.enter)=\"toggleDropdown()\"\n    (click)=\"toggleDropdown()\"\n    [ngStyle]=\"{ background: isOpen ? '#E6EBF7' : '' }\"\n  >\n    <div class=\"label\">\n      <p class=\"text\">{{ label }}</p>\n      <p *ngIf=\"showSelectedCount && localSelectedItems?.length > 0\" class=\"count\">\n        {{ localSelectedItems?.length }}\n      </p>\n    </div>\n    <svg\n      class=\"handle\"\n      [ngStyle]=\"{ transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)' }\"\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M13.825 7.15845L10 10.9751L6.175 7.15845L5 8.33345L10 13.3334L15 8.33345L13.825 7.15845Z\"\n        fill=\"#181F33\"\n      />\n    </svg>\n  </div>\n</div>\n<ng-template #popupContainer>\n  <div\n    class=\"popup-container\"\n    [ngStyle]=\"{\n      height: dropdownListHeight,\n      width: dropdownListWidth\n    }\"\n    [ngClass]=\"{\n      'position-left': dropdownListPosition === 'Left',\n      'position-right': dropdownListPosition === 'Right'\n    }\"\n  >\n    <div *ngIf=\"searchEnabled\" class=\"search-container\">\n      <svg\n        *ngIf=\"!isSearchInputFocused\"\n        class=\"search-icon\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M4.21508 11.1456C4.21508 7.3179 7.33722 4.21165 11.1926 4.21165C15.048 4.21165 18.1702 7.3179 18.1702 11.1456C18.1702 12.6931 17.6599 14.1226 16.7972 15.2767L15.3685 16.7013C14.2044 17.5668 12.759 18.0796 11.1926 18.0796C7.33722 18.0796 4.21508 14.9734 4.21508 11.1456ZM15.9421 17.7835C14.6021 18.7329 12.9627 19.2913 11.1926 19.2913C6.66977 19.2913 3 15.6461 3 11.1456C3 6.64512 6.66977 3 11.1926 3C15.7155 3 19.3852 6.64512 19.3852 11.1456C19.3852 12.9371 18.8037 14.5931 17.8184 15.9375L19.8361 17.4048C20.6705 17.912 21.7554 18.6543 20.2454 20.215C18.7353 21.7756 18.0099 20.6663 17.4991 19.8364L15.9421 17.7835Z\"\n          fill=\"#6A737D\"\n        />\n      </svg>\n      <input\n        [ngModel]=\"searchInput\"\n        [ngStyle]=\"{\n          paddingLeft: isSearchInputFocused ? '12px' : '45px',\n          border: isSearchInputFocused ? '1px solid #0937B2' : '1px solid #e0e0e0',\n          paddingRight: isSearchInputFocused ? '45px' : '10px'\n        }\"\n        (ngModelChange)=\"searchInputOnChange($event)\"\n        [placeholder]=\"isSearchInputFocused ? '' : 'Search Keyword'\"\n        (focus)=\"searchInputFocused(true)\"\n        class=\"search-input\"\n      />\n      <svg\n        *ngIf=\"isSearchInputFocused\"\n        class=\"cancel-icon\"\n        (click)=\"searchInputCanceled($event)\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M8.87446 7.32144C8.44588 6.89285 7.751 6.89285 7.32242 7.32144C6.89383 7.75002 6.89383 8.4449 7.32242 8.87349L10.4488 11.9999L7.32357 15.1252C6.89498 15.5538 6.89498 16.2486 7.32357 16.6772C7.75215 17.1058 8.44703 17.1058 8.87561 16.6772L12.0009 13.552L15.1261 16.6772C15.5547 17.1058 16.2496 17.1058 16.6781 16.6772C17.1067 16.2486 17.1067 15.5537 16.6781 15.1251L13.5529 11.9999L16.6793 8.87354C17.1079 8.44496 17.1079 7.75008 16.6793 7.3215C16.2507 6.89291 15.5558 6.89291 15.1273 7.3215L12.0009 10.4479L8.87446 7.32144Z\"\n          fill=\"#6A737D\"\n        />\n      </svg>\n    </div>\n    <div class=\"items\">\n      <div\n        class=\"item\"\n        tabindex=\"0\"\n        (keyup.enter)=\"toggleSelectedItems($event, item)\"\n        (click)=\"toggleSelectedItems($event, item)\"\n        *ngFor=\"let item of searchInput ? searchData : localData\"\n      >\n        <div class=\"checkbox-container-wrapper\">\n          <div class=\"checkbox-container\">\n            <mis-checkbox [checked]=\"item.checked\" tabindex=\"-1\"></mis-checkbox>\n          </div>\n          <p class=\"label\">\n            {{ item.label }}\n          </p>\n        </div>\n        <div class=\"icon-container\" *ngIf=\"item.icon\">\n          <img class=\"icon\" [src]=\"item.icon\" alt=\"no img\" />\n        </div>\n      </div>\n      <div class=\"noData\" *ngIf=\"(searchInput ? searchData : localData).length === 0\">\n        {{ searchInput === \"\" ? noDataMessage : \"No results\" }}\n      </div>\n    </div>\n    <div *ngIf=\"localData.length !== 0 && !hideApplyButton\" class=\"actions-container\">\n      <div style=\"width: calc(50% - 4px)\">\n        <mis-button [name]=\"'Reset'\" [type]=\"'Text'\" [width]=\"'100%'\" (click)=\"onReset()\"></mis-button>\n      </div>\n      <div style=\"width: calc(50% - 4px)\">\n        <mis-button [name]=\"'Apply'\" [type]=\"'Solid'\" [width]=\"'100%'\" (click)=\"applyFilters()\"></mis-button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n",
+                template: "<div\n  class=\"container\"\n  [ngStyle]=\"{\n    height: height.length > 0 ? height : '',\n    width: width.length > 0 ? width : ''\n  }\"\n>\n  <div\n    class=\"dropdown\"\n    #select\n    tabindex=\"0\"\n    (keyup.enter)=\"toggleDropdown()\"\n    (click)=\"toggleDropdown()\"\n    [ngStyle]=\"{ background: isOpen ? '#E6EBF7' : '' }\"\n  >\n    <div class=\"label\">\n      <ng-container *ngIf=\"!customLabelTemplate\">\n      <p class=\"text\">{{ label }}</p>\n      <p *ngIf=\"showSelectedCount && localSelectedItems?.length > 0\" class=\"count\">\n        {{ localSelectedItems?.length }}\n      </p>\n    </ng-container>\n    <ng-container *ngIf=\"customLabelTemplate\">\n      <ng-container *ngTemplateOutlet=\"customLabelTemplate\">\n      </ng-container>\n    </ng-container>\n    </div>\n    <svg\n      class=\"handle\"\n      [ngStyle]=\"{ transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)' }\"\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M13.825 7.15845L10 10.9751L6.175 7.15845L5 8.33345L10 13.3334L15 8.33345L13.825 7.15845Z\"\n        fill=\"#181F33\"\n      />\n    </svg>\n  </div>\n</div>\n<ng-template #popupContainer>\n  <div\n    class=\"popup-container\"\n    [ngStyle]=\"{\n      height: dropdownListHeight,\n      width: dropdownListWidth\n    }\"\n    [ngClass]=\"{\n      'position-left': dropdownListPosition === 'Left',\n      'position-right': dropdownListPosition === 'Right'\n    }\"\n  >\n    <div *ngIf=\"searchEnabled\" class=\"search-container\">\n      <svg\n        *ngIf=\"!isSearchInputFocused\"\n        class=\"search-icon\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M4.21508 11.1456C4.21508 7.3179 7.33722 4.21165 11.1926 4.21165C15.048 4.21165 18.1702 7.3179 18.1702 11.1456C18.1702 12.6931 17.6599 14.1226 16.7972 15.2767L15.3685 16.7013C14.2044 17.5668 12.759 18.0796 11.1926 18.0796C7.33722 18.0796 4.21508 14.9734 4.21508 11.1456ZM15.9421 17.7835C14.6021 18.7329 12.9627 19.2913 11.1926 19.2913C6.66977 19.2913 3 15.6461 3 11.1456C3 6.64512 6.66977 3 11.1926 3C15.7155 3 19.3852 6.64512 19.3852 11.1456C19.3852 12.9371 18.8037 14.5931 17.8184 15.9375L19.8361 17.4048C20.6705 17.912 21.7554 18.6543 20.2454 20.215C18.7353 21.7756 18.0099 20.6663 17.4991 19.8364L15.9421 17.7835Z\"\n          fill=\"#6A737D\"\n        />\n      </svg>\n      <input\n        [ngModel]=\"searchInput\"\n        [ngStyle]=\"{\n          paddingLeft: isSearchInputFocused ? '12px' : '45px',\n          border: isSearchInputFocused ? '1px solid #0937B2' : '1px solid #e0e0e0',\n          paddingRight: isSearchInputFocused ? '45px' : '10px'\n        }\"\n        (ngModelChange)=\"searchInputOnChange($event)\"\n        [placeholder]=\"isSearchInputFocused ? '' : 'Search Keyword'\"\n        (focus)=\"searchInputFocused(true)\"\n        class=\"search-input\"\n      />\n      <svg\n        *ngIf=\"isSearchInputFocused\"\n        class=\"cancel-icon\"\n        (click)=\"searchInputCanceled($event)\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M8.87446 7.32144C8.44588 6.89285 7.751 6.89285 7.32242 7.32144C6.89383 7.75002 6.89383 8.4449 7.32242 8.87349L10.4488 11.9999L7.32357 15.1252C6.89498 15.5538 6.89498 16.2486 7.32357 16.6772C7.75215 17.1058 8.44703 17.1058 8.87561 16.6772L12.0009 13.552L15.1261 16.6772C15.5547 17.1058 16.2496 17.1058 16.6781 16.6772C17.1067 16.2486 17.1067 15.5537 16.6781 15.1251L13.5529 11.9999L16.6793 8.87354C17.1079 8.44496 17.1079 7.75008 16.6793 7.3215C16.2507 6.89291 15.5558 6.89291 15.1273 7.3215L12.0009 10.4479L8.87446 7.32144Z\"\n          fill=\"#6A737D\"\n        />\n      </svg>\n    </div>\n    <div class=\"items\">\n      <div\n        class=\"item\"\n        tabindex=\"0\"\n        (keyup.enter)=\"toggleSelectedItems($event, item)\"\n        (click)=\"toggleSelectedItems($event, item)\"\n        *ngFor=\"let item of searchInput ? searchData : localData\"\n      >\n        <div class=\"checkbox-container-wrapper\">\n          <div class=\"checkbox-container\">\n            <mis-checkbox [checked]=\"item.checked\" tabindex=\"-1\"></mis-checkbox>\n          </div>\n          <p class=\"label\">\n            {{ item.label }}\n          </p>\n        </div>\n        <div class=\"icon-container\" *ngIf=\"item.icon\">\n          <img class=\"icon\" [src]=\"item.icon\" alt=\"no img\" />\n        </div>\n      </div>\n      <div class=\"noData\" *ngIf=\"(searchInput ? searchData : localData).length === 0\">\n        {{ searchInput === \"\" ? noDataMessage : \"No results\" }}\n      </div>\n    </div>\n    <div *ngIf=\"localData.length !== 0 && !hideApplyButton\" class=\"actions-container\">\n      <div style=\"width: calc(50% - 4px)\">\n        <mis-button [name]=\"'Reset'\" [type]=\"'Text'\" [width]=\"'100%'\" (click)=\"onReset()\"></mis-button>\n      </div>\n      <div style=\"width: calc(50% - 4px)\">\n        <mis-button [name]=\"'Apply'\" [type]=\"'Solid'\" [width]=\"'100%'\" (click)=\"applyFilters()\"></mis-button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n",
                 styles: [".container{position:relative;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;height:32px;width:256px;font-family:Lato,sans-serif!important}.container .dropdown{height:inherit;border:1px solid #e0e0e0;border-radius:6px;background-color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:100%;padding:0 12px;overflow:hidden}.container .dropdown:focus-visible,.container .dropdown:hover{background-color:#f5f7fc;outline:none}.container .dropdown .label{display:flex;justify-content:flex-start;align-items:center;width:calc(100% - 32px)}.container .dropdown .label,.container .dropdown .label .text{font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.container .dropdown .label .text{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.container .dropdown .label .count{background-color:#e0e0e0;border-radius:50%;padding:2px 7px;margin:0 0 0 8px;font-style:normal;font-weight:400;font-size:14px;line-height:20px;text-align:center;letter-spacing:.2px;color:#181f33}.container .dropdown .handle{width:24px;height:24px;transition:.3s;position:absolute;right:12px;border-radius:50%;overflow:hidden}.popup-container{width:100%;max-height:340px;padding-bottom:0;border:1px solid #e0e0e0;border-radius:8px;background-color:#fff;box-shadow:0 12px 24px 0 rgba(0,0,0,.12);display:flex;flex-direction:column;overflow:hidden;justify-content:space-between}.popup-container::-webkit-scrollbar{width:0;height:0}.popup-container .search-container{position:relative;box-sizing:border-box;padding:8px}.popup-container .search-container .search-icon{position:absolute;width:24px;height:24px;top:50%;transform:translateY(-50%);left:18px;z-index:1}.popup-container .search-container .search-input{height:40px;width:100%;padding:12px;border:1px solid #e0e0e0;box-sizing:border-box;border-radius:8px;outline:none;caret-color:#0937b2;font-style:normal;font-weight:400;font-size:12px;line-height:18px;display:flex;align-items:center;letter-spacing:.2px;color:#181f33}.popup-container .search-container .cancel-icon{position:absolute;cursor:pointer;width:24px;height:24px;top:50%;transform:translateY(-50%);right:18px;z-index:1}.popup-container .items{padding:8px 0 8px 8px;overflow-y:scroll}.popup-container .items::-webkit-scrollbar{width:5px;height:0}.popup-container .items::-webkit-scrollbar-thumb{background:#9aa7b4;border-radius:10px}.popup-container .items .noData{display:flex;justify-content:center;align-items:center;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.popup-container .items .item{cursor:pointer;display:flex;justify-content:flex-start;align-items:center;padding:8px 12px;border-radius:6px;height:auto}.popup-container .items .item:focus-visible,.popup-container .items .item:hover{background-color:#f5f7fc;outline:none}.popup-container .items .item .checkbox-container-wrapper{display:flex;justify-content:flex-start;align-items:center;width:90%}.popup-container .items .item .checkbox-container-wrapper .checkbox-container{display:block;position:relative;cursor:pointer;font-size:22px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.popup-container .items .item .checkbox-container-wrapper .checkbox-container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.popup-container .items .item .checkbox-container-wrapper .checkbox-container input:checked~.checkmark:after{display:block}.popup-container .items .item .checkbox-container-wrapper .checkbox-container .checkmark{position:absolute;top:-8px;left:0;height:15px;width:15px;border-radius:4px;background-color:#0079f1;border:1px solid #6a737d}.popup-container .items .item .checkbox-container-wrapper .checkbox-container .checkmark:after{content:\"\";position:absolute;display:none;left:5px;top:2px;width:3px;height:6px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.popup-container .items .item .checkbox-container-wrapper .label{margin:0 0 0 8px;line-height:20px;font-size:14px;font-style:normal;font-weight:400;letter-spacing:.2;text-overflow:ellipsis;overflow:hidden}.popup-container .items .item .icon-container{width:10%;display:flex;justify-content:flex-end}.popup-container .items .item .icon-container .icon{width:20px;height:20px}.popup-container .actions-container{display:flex;justify-content:space-between;bottom:0;align-items:center;position:-webkit-sticky;position:sticky;padding:16px;background-color:#fff;border-top:1px solid #e0e0e0}.popup-container .actions-container .cancel{cursor:pointer;padding:10px 32px;text-align:center;font-size:16px;line-height:24px;border-radius:8px}.popup-container .actions-container .cancel:hover{background:rgba(9,55,178,.04)}.popup-container .actions-container .apply{cursor:pointer;padding:10px 32px;text-align:center;color:#fff;font-size:16px;line-height:24px;background:#0937b2;border-radius:8px}"]
             },] }
 ];
@@ -266,6 +266,7 @@ MultiSelectDropdownComponent.propDecorators = {
     options: [{ type: Input }],
     selectedItems: [{ type: Input }],
     hideApplyButton: [{ type: Input }],
+    customLabelTemplate: [{ type: Input }],
     onChange: [{ type: Output }],
     selectElement: [{ type: ViewChild, args: ["select", { static: false },] }],
     popupContainer: [{ type: ViewChild, args: ["popupContainer", { static: false },] }]