mis-crystal-design-system 4.0.51 → 17.0.0

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

@@ -1,346 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { FormArray, FormGroup, Validators, FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
-import { OverlayModule } from '@angular/cdk/overlay';
-import { ScrollingModule } from '@angular/cdk-experimental/scrolling';
-import { DropdownModule } from 'mis-crystal-design-system/dropdown';
-import * as moment from 'moment';
-import { tz } from 'moment';
-import 'moment-timezone';
-import { SwitchModule } from 'mis-crystal-design-system/switch';
-import { MultiSelectDropdownModule } from 'mis-crystal-design-system/multi-select-dropdown';
-import { DatepickerModuleV2 } from 'mis-crystal-design-system/datepicker_v2';
-
-class DynamicFormComponent {
-    constructor() {
-        /**
-         * formFields:  Dynamic fields recieved from the API metadata to build a dynamic form
-         * formValues:  Holds the value of the dynamic form with "key" being dynamic field "title"
-         *              and value being the user input.
-         */
-        this.formFields = [];
-        this.formValues = {};
-        // Need to deprecate these inputs and use constants.
-        this.activeBtnIconUrl = "";
-        this.calendarIconUrl = "";
-        /**
-         * formUpdated: Emits formValues Object whenever there is a change in the dynamic form.
-         */
-        this.formUpdated = new EventEmitter();
-        /**
-         * formValid: Emits boolean depending on validity of the form
-         */
-        this.formValid = new EventEmitter();
-        /**
-         * formInitialized: Emits dynamic form API on form initilization
-         */
-        this.formInitialized = new EventEmitter();
-    }
-    ngOnInit() {
-        // Building the form
-        this.dynamicForm = this.generateDynamicForm(this.formFields, this.formValues);
-        // Subscribing to form changes and emiting values.
-        this.valueChangesSubscription$ = this.dynamicForm.valueChanges.subscribe(formValue => {
-            this.onFormValueChanges();
-        });
-        //api to expose functions
-        this.dynamicFormAPI = {
-            defaultFormValues: () => {
-                return this.generateDynamicFieldsValueObject(this.dynamicForm.value.dynamicFields);
-            }
-        };
-        this.formInitialized.emit(this.dynamicFormAPI);
-        this.formValid.emit(this.dynamicForm.valid);
-    }
-    ngOnDestroy() {
-        var _a;
-        (_a = this.valueChangesSubscription$) === null || _a === void 0 ? void 0 : _a.unsubscribe();
-    }
-    onFormValueChanges() {
-        let formValues = this.generateDynamicFieldsValueObject(this.dynamicForm.value.dynamicFields);
-        this.formValid.emit(this.dynamicForm.valid);
-        this.formUpdated.emit(formValues);
-        console.log(formValues);
-    }
-    generateDynamicFieldsValueObject(formValues) {
-        let dynamicFieldsValue = {};
-        formValues.forEach((fieldValue, index) => {
-            var _a;
-            let formattedValue = this.mapFormFieldToFormValue(this.formFields[index], fieldValue.value);
-            if (((_a = fieldValue.subFields) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-                let formattedSubFieldsValues = {};
-                fieldValue.subFields.forEach((subFieldValue, subIndex) => {
-                    let subFormField = this.formFields[index].subFields[subIndex];
-                    formattedSubFieldsValues[subFormField.configName] = this.mapFormFieldToFormValue(subFormField, subFieldValue);
-                });
-                dynamicFieldsValue[this.formFields[index].configName] = {
-                    value: formattedValue,
-                    subFields: formattedSubFieldsValues
-                };
-            }
-            else {
-                dynamicFieldsValue[this.formFields[index].configName] = formattedValue;
-            }
-        });
-        return dynamicFieldsValue;
-    }
-    generateDynamicForm(formFields, formValues) {
-        var _a;
-        let formArray = new FormArray([]);
-        for (let field of formFields) {
-            let fieldValue = ((_a = formValues[field.configName]) === null || _a === void 0 ? void 0 : _a.value) ? formValues[field.configName].value : formValues[field.configName];
-            let fieldControl = this.mapFormValueToFormField(field, fieldValue);
-            let subFieldsControls = this.generateSubDynamicFields(formValues, field, fieldControl.value);
-            formArray.push(new FormGroup({
-                value: fieldControl,
-                subFields: subFieldsControls
-            }));
-        }
-        return new FormGroup({
-            dynamicFields: formArray
-        });
-    }
-    getDynamicFieldsControls() {
-        return this.dynamicForm.get("dynamicFields");
-    }
-    updateSubDynamicFields(field, formGroup, value) {
-        var _a;
-        if (((_a = field.subFields) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-            let subFieldsControls = this.generateSubDynamicFields(this.formValues, field, value);
-            formGroup.removeControl('subFields');
-            formGroup.addControl('subFields', subFieldsControls);
-        }
-    }
-    updateSelectedValueForSingleSelect(field, control, formGroup, value) {
-        var _a;
-        if (((_a = control.value) === null || _a === void 0 ? void 0 : _a.value) !== value.value) {
-            control.setValue(value);
-        }
-        else
-            control.setValue('');
-        this.updateSubDynamicFields(field, formGroup, value);
-        control.markAsTouched();
-    }
-    updateSelectedValueForMultiSelect(field, control, formGroup, values) {
-        let selectedValues = control.value;
-        for (let value of values) {
-            let itemIndex = selectedValues.findIndex(item => item.label === value.label);
-            if (itemIndex > -1) {
-                selectedValues.splice(itemIndex, 1);
-            }
-            else {
-                selectedValues.push(Object.assign({}, value));
-            }
-        }
-        control.setValue(selectedValues);
-        this.updateSubDynamicFields(field, formGroup, values);
-        control.markAsTouched();
-    }
-    isCheckBoxSelected(value, selectedValues) {
-        return selectedValues.findIndex(item => item.label === value) > -1;
-    }
-    findSelectedIndex(subfields, value) {
-        const selectedIndex = subfields.findIndex(item => item.parentConfigValue === value);
-        return selectedIndex !== -1 ? selectedIndex : 0;
-    }
-    matchParentConfig(subfields, value) {
-        if (!subfields || subfields.length === 0) {
-            return false;
-        }
-        return subfields.some(item => item.parentConfigValue === value);
-    }
-    generateSubDynamicFields(formValues, parentField, parentValue) {
-        var _a;
-        let controls = new FormArray([]);
-        let subFields = parentField.subFields;
-        let subFieldsValues = ((_a = formValues[parentField.configName]) === null || _a === void 0 ? void 0 : _a.subFields) ? formValues[parentField.configName].subFields : {};
-        if (!subFields)
-            return controls;
-        if (parentField.fieldType === 'singleSelect') {
-            subFields = subFields.filter((subField) => { var _a; return subField.parentConfigValue === ((_a = parentValue) === null || _a === void 0 ? void 0 : _a.value); });
-        }
-        else if (parentField.fieldType === 'multiSelect') {
-            let parentValues = new Set(parentValue.map((value) => value.value));
-            subFields = subFields.filter((subField) => parentValues.has(subField.parentConfigValue));
-        }
-        if ((subFields === null || subFields === void 0 ? void 0 : subFields.length) > 0) {
-            for (let subField of subFields) {
-                controls.push(this.mapFormValueToFormField(subField, subFieldsValues[subField.configName]));
-            }
-        }
-        return controls;
-    }
-    mapFormValueToFormField(formField, formValue) {
-        let validators = formField.validators ? [dynamicFieldValidator(formField.validators)] : [];
-        let control = new FormControl(null, validators);
-        if (formField.fieldType === "input") {
-            if (formField.fieldInputType === "text" || formField.fieldInputType === "textarea")
-                control.setValue(formValue ? formValue : "");
-            else if (formField.fieldInputType === "number")
-                control.setValue(formValue ? formValue : 0);
-            else if (formField.fieldInputType === "date") {
-                if (formValue && typeof formValue === "number") {
-                    control.setValue(moment(formValue).tz(formField.fieldConfig.timezone).format(formField.fieldConfig.format));
-                }
-                else {
-                    control.setValue(moment().tz(formField.fieldConfig.timezone).format(formField.fieldConfig.format));
-                }
-            }
-        }
-        else if (formField.fieldType === "singleSelect") {
-            const findSelectedValue = () => {
-                let index = formField.itemsList.findIndex(item => item.value === formValue);
-                return index >= 0 ? formField.itemsList[index] : "";
-            };
-            if (formField.fieldInputType === "dropdown") {
-                if (!formValue)
-                    control.setValue(formField.itemsList[0]);
-                else
-                    control.setValue(findSelectedValue());
-            }
-            else if (formField.fieldInputType === "radio") {
-                control.setValue(findSelectedValue());
-            }
-        }
-        else if (formField.fieldType === "multiSelect") {
-            if (formValue && Array.isArray(formValue)) {
-                let selectedValues = [];
-                for (let value of formValue) {
-                    let index = formField.itemsList.findIndex(item => item.value === value);
-                    if (index > -1)
-                        selectedValues.push(Object.assign({}, formField.itemsList[index]));
-                }
-                control.setValue(selectedValues);
-            }
-            else {
-                control.setValue([]);
-            }
-        }
-        else if (formField.fieldType === "boolean") {
-            control.setValue(!!formValue);
-        }
-        else
-            control.setValue(null);
-        return control;
-    }
-    mapFormFieldToFormValue(formField, formValue) {
-        var _a;
-        if (formField.fieldType === "input") {
-            if (formField.fieldInputType === "text" || formField.fieldInputType === "textarea")
-                return formValue;
-            else if (formField.fieldInputType === "number")
-                return +formValue;
-            else if (formField.fieldInputType === "date") {
-                return tz(formValue, formField.fieldConfig.format, formField.fieldConfig.timezone).valueOf();
-            }
-        }
-        else if (formField.fieldType === "singleSelect") {
-            return (_a = formValue === null || formValue === void 0 ? void 0 : formValue.value) !== null && _a !== void 0 ? _a : '';
-        }
-        else if (formField.fieldType === "multiSelect") {
-            return formValue === null || formValue === void 0 ? void 0 : formValue.map(item => item.value);
-        }
-        else if (formField.fieldType === "boolean") {
-            return formValue;
-        }
-        else
-            return formValue;
-    }
-}
-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      </ng-container>\n      <div class=\"sub-dynamic-form\" *ngIf=\"fieldControl.value && (!!formFields[i]?.subFields && formFields[i]?.subFields?.length > 0 && matchParentConfig(formFields[i]?.subFields, fieldControl.controls.value.value.value))\">\n        <ng-container *ngFor=\"let subFieldControl of fieldControl.controls.subFields.controls;\">\n          <ng-container\n            [ngTemplateOutlet]=\"dynamicField\"\n            [ngTemplateOutletContext]=\"{\n              $implicit: formFields[i].subFields[findSelectedIndex(formFields[i]?.subFields, fieldControl.controls.value.value.value)],\n              control: subFieldControl\n            }\">\n          </ng-container>\n        </ng-container>\n      </div>\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>",
-                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)}"]
-            },] }
-];
-DynamicFormComponent.ctorParameters = () => [];
-DynamicFormComponent.propDecorators = {
-    formFields: [{ type: Input }],
-    formValues: [{ type: Input }],
-    activeBtnIconUrl: [{ type: Input }],
-    calendarIconUrl: [{ type: Input }],
-    formUpdated: [{ type: Output }],
-    formValid: [{ type: Output }],
-    formInitialized: [{ type: Output }]
-};
-const dynamicFieldValidator = (validators) => {
-    return (control) => {
-        let value = control.value;
-        if (Array.isArray(value)) {
-            return null;
-        }
-        else if (typeof value === 'object') {
-            value = (value === null || value === void 0 ? void 0 : value.value) ? value.value : '';
-        }
-        let errors = null;
-        validators.forEach((validator) => {
-            let error = null;
-            let message = validator.message;
-            switch (validator.type) {
-                case "Required":
-                    error = Validators.required(control);
-                    if (error)
-                        error = { Required: message };
-                    break;
-                case "MinLength":
-                    error = Validators.minLength(+validator.value)(control);
-                    message = message.replace('${0}', error === null || error === void 0 ? void 0 : error.minlength.requiredLength);
-                    if (error)
-                        error = { MinLength: message };
-                    break;
-                case "MaxLength":
-                    error = Validators.maxLength(+validator.value)(control);
-                    message = message.replace('${0}', error === null || error === void 0 ? void 0 : error.actualLength);
-                    if (error)
-                        error = { MaxLength: message };
-                    break;
-                case "Email":
-                    error = Validators.email(control);
-                    if (error)
-                        error = { Email: message };
-                    break;
-                case "Custom":
-                    error = Validators.pattern(`${validator.value}`)(control);
-                    if (error)
-                        error = { Custom: message };
-                    break;
-                default:
-                    break;
-            }
-            if (error)
-                errors = Object.assign(Object.assign({}, errors), error);
-        });
-        return errors;
-    };
-};
-
-class DynamicFormModule {
-    static forRoot() {
-        return { ngModule: DynamicFormModule, providers: [] };
-    }
-}
-DynamicFormModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [DynamicFormComponent],
-                imports: [
-                    CommonModule,
-                    ReactiveFormsModule,
-                    FormsModule,
-                    OverlayModule,
-                    ScrollingModule,
-                    DropdownModule,
-                    SwitchModule,
-                    MultiSelectDropdownModule,
-                    DatepickerModuleV2
-                ],
-                exports: [DynamicFormComponent]
-            },] }
-];
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { DynamicFormComponent, DynamicFormModule };
-//# sourceMappingURL=mis-crystal-design-system-dynamic-form.js.map

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

@@ -1 +0,0 @@
-{"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  \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\n  findSelectedIndex(subfields, value) {\n    const selectedIndex = subfields.findIndex(item => item.parentConfigValue === value);\n    return selectedIndex !== -1 ? selectedIndex : 0;\n  }\n\n  matchParentConfig(subfields, value) {\n    if (!subfields || subfields.length === 0) {\n      return false;\n    }\n    return subfields.some(item => item.parentConfigValue === value);\n  }\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-fab.js

@@ -1,84 +0,0 @@
-import { Component, ElementRef, Input, HostListener, NgModule } from '@angular/core';
-import { trigger, transition, style, animate, state } from '@angular/animations';
-import { CommonModule } from '@angular/common';
-
-/** @format */
-class FabComponent {
-    constructor(eRef) {
-        this.eRef = eRef;
-        this.show = false;
-        this.options = {};
-        this.items = [];
-        this.isOpen = false;
-    }
-    clickout(event) {
-        if (!this.eRef.nativeElement.contains(event.target)) {
-            this.closeFab();
-        }
-    }
-    ngOnInit() {
-        this.options = Object.assign({ size: 56, backgroundColorClosed: "#0937B2", backgroundColorOpened: "#3a5fc1" }, this.options);
-    }
-    ngOnDestroy() { }
-    clickItem(item) {
-        this.closeFab();
-        item.click();
-    }
-    closeFab() {
-        this.isOpen = false;
-    }
-    toogleFab() {
-        this.isOpen = !this.isOpen;
-    }
-}
-FabComponent.decorators = [
-    { type: Component, args: [{
-                selector: "mis-fab",
-                template: "<div class=\"fab-wrapper\" *ngIf=\"show\">\n  <div class=\"fab-items\" *ngIf=\"isOpen\" @slideUpFab>\n    <div class=\"fab-item\" *ngFor=\"let item of items.reverse(); let i = index\" (click)=\"clickItem(item)\">\n      <div *ngIf=\"item.label\" class=\"fab-tooltip\">\n        {{ item.label }}\n      </div>\n      <div\n        class=\"fab-button\"\n        [ngStyle]=\"{\n          backgroundColor: item.backgroundColor || '#0937B2'\n        }\"\n      >\n        <img [src]=\"item.icon\" class=\"add-img\" />\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"fab-container\"\n    [ngStyle]=\"{\n      backgroundColor: isOpen ? options.backgroundColorOpened : options.backgroundColorClosed\n    }\"\n    (click)=\"toogleFab()\"\n  >\n    <svg\n      [@rotateButton]=\"isOpen ? 'rotated' : 'default'\"\n      class=\"add-img\"\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=\"M13.1424 5.15607C13.1424 4.51759 12.6313 4 12.0009 4C11.3704 4 10.8594 4.51759 10.8594 5.15607V10.8421H5.14149C4.51106 10.8421 4 11.3597 4 11.9982C4 12.6367 4.51106 13.1543 5.14149 13.1543H10.8594V18.8439C10.8594 19.4824 11.3704 20 12.0009 20C12.6313 20 13.1424 19.4824 13.1424 18.8439V13.1543H18.8585C19.4889 13.1543 20 12.6367 20 11.9982C20 11.3597 19.4889 10.8421 18.8585 10.8421H13.1424V5.15607Z\"\n        fill=\"white\"\n      />\n    </svg>\n  </div>\n</div>\n",
-                animations: [
-                    trigger("slideUpFab", [
-                        transition(":enter", [
-                            style({ transform: "translateY(50px)", opacity: 0 }),
-                            animate("300ms ease-out", style({ transform: "translateY(0px)", opacity: 1 }))
-                        ]),
-                        transition(":leave", [animate("200ms ease-out", style({ transform: "translateY(70px)", opacity: 0 }))])
-                    ]),
-                    trigger("rotateButton", [
-                        state("default", style({ transform: "rotate(0)" })),
-                        state("rotated", style({ transform: "rotate(45deg)" })),
-                        transition("rotated => default", animate("300ms ease-out")),
-                        transition("default => rotated", animate("200ms ease-in"))
-                    ])
-                ],
-                styles: [".fab-wrapper{position:fixed;right:24px;bottom:24px;z-index:1000}.fab-wrapper .fab-item{position:relative;padding:0 0 16px 8px}.fab-wrapper .fab-item .fab-tooltip{position:absolute;background-color:#181f33;border-radius:4px;color:#fff;padding:8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;right:100%;top:calc(50% - 8px);transform:translateY(-50%)}.fab-wrapper .fab-item .fab-button{width:40px;height:40px}.fab-wrapper .fab-container,.fab-wrapper .fab-item .fab-button{cursor:pointer;border-radius:50%;display:flex;justify-content:center;align-items:center}.fab-wrapper .fab-container{width:56px;height:56px}.add-img{height:24px;width:24px}"]
-            },] }
-];
-FabComponent.ctorParameters = () => [
-    { type: ElementRef }
-];
-FabComponent.propDecorators = {
-    show: [{ type: Input }],
-    options: [{ type: Input }],
-    items: [{ type: Input }],
-    clickout: [{ type: HostListener, args: ["document:click", ["$event"],] }]
-};
-
-class FabModule {
-    static forRoot() {
-        return { ngModule: FabModule, providers: [] };
-    }
-}
-FabModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [FabComponent],
-                imports: [CommonModule],
-                exports: [FabComponent]
-            },] }
-];
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { FabComponent, FabModule };
-//# sourceMappingURL=mis-crystal-design-system-fab.js.map

package/fesm2015/mis-crystal-design-system-fab.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"mis-crystal-design-system-fab.js","sources":["../../../projects/mis-components/fab/fab.component.ts","../../../projects/mis-components/fab/fab.module.ts","../../../projects/mis-components/fab/mis-crystal-design-system-fab.ts"],"sourcesContent":["/** @format */\n\nimport { Component, ElementRef, HostListener, Input, OnDestroy, OnInit } from \"@angular/core\";\nimport { trigger, transition, style, animate, state } from \"@angular/animations\";\n\nexport type FabOptions = {\n  backgroundColorClosed?: string;\n  backgroundColorOpened?: string;\n  size?: number;\n};\n\nexport type FabItem = {\n  label?: string;\n  icon: string;\n  backgroundColor?: string;\n  id?: string;\n  click?: () => any;\n};\n\nexport type FabItems = FabItem[];\n\n@Component({\n  selector: \"mis-fab\",\n  templateUrl: \"./fab.component.html\",\n  styleUrls: [\"./fab.component.scss\"],\n  animations: [\n    trigger(\"slideUpFab\", [\n      transition(\":enter\", [\n        style({ transform: \"translateY(50px)\", opacity: 0 }),\n        animate(\"300ms ease-out\", style({ transform: \"translateY(0px)\", opacity: 1 }))\n      ]),\n      transition(\":leave\", [animate(\"200ms ease-out\", style({ transform: \"translateY(70px)\", opacity: 0 }))])\n    ]),\n    trigger(\"rotateButton\", [\n      state(\"default\", style({ transform: \"rotate(0)\" })),\n      state(\"rotated\", style({ transform: \"rotate(45deg)\" })),\n      transition(\"rotated => default\", animate(\"300ms ease-out\")),\n      transition(\"default => rotated\", animate(\"200ms ease-in\"))\n    ])\n  ]\n})\nexport class FabComponent implements OnInit, OnDestroy {\n  @Input() show: boolean = false;\n  @Input() options: FabOptions = {};\n  @Input() items: FabItems = [];\n\n  isOpen: boolean = false;\n\n  constructor(private eRef: ElementRef) {}\n\n  @HostListener(\"document:click\", [\"$event\"])\n  clickout(event) {\n    if (!this.eRef.nativeElement.contains(event.target)) {\n      this.closeFab();\n    }\n  }\n\n  ngOnInit(): void {\n    this.options = {\n      size: 56,\n      backgroundColorClosed: \"#0937B2\",\n      backgroundColorOpened: \"#3a5fc1\",\n      ...this.options\n    };\n  }\n\n  ngOnDestroy(): void {}\n\n  clickItem(item: FabItem) {\n    this.closeFab();\n    item.click();\n  }\n\n  closeFab() {\n    this.isOpen = false;\n  }\n\n  toogleFab() {\n    this.isOpen = !this.isOpen;\n  }\n}\n","import { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\nimport { FabComponent } from \"./fab.component\";\n\n@NgModule({\n  declarations: [FabComponent],\n  imports: [CommonModule],\n  exports: [FabComponent]\n})\nexport class FabModule {\n  static forRoot(): ModuleWithProviders<FabModule> {\n    return { ngModule: FabModule, providers: [] };\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAAA;MAyCa,YAAY;IAOvB,YAAoB,IAAgB;QAAhB,SAAI,GAAJ,IAAI,CAAY;QAN3B,SAAI,GAAY,KAAK,CAAC;QACtB,YAAO,GAAe,EAAE,CAAC;QACzB,UAAK,GAAa,EAAE,CAAC;QAE9B,WAAM,GAAY,KAAK,CAAC;KAEgB;IAGxC,QAAQ,CAAC,KAAK;QACZ,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;YACnD,IAAI,CAAC,QAAQ,EAAE,CAAC;SACjB;KACF;IAED,QAAQ;QACN,IAAI,CAAC,OAAO,mBACV,IAAI,EAAE,EAAE,EACR,qBAAqB,EAAE,SAAS,EAChC,qBAAqB,EAAE,SAAS,IAC7B,IAAI,CAAC,OAAO,CAChB,CAAC;KACH;IAED,WAAW,MAAW;IAEtB,SAAS,CAAC,IAAa;QACrB,IAAI,CAAC,QAAQ,EAAE,CAAC;QAChB,IAAI,CAAC,KAAK,EAAE,CAAC;KACd;IAED,QAAQ;QACN,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;KACrB;IAED,SAAS;QACP,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;KAC5B;;;YA1DF,SAAS,SAAC;gBACT,QAAQ,EAAE,SAAS;gBACnB,ygDAAmC;gBAEnC,UAAU,EAAE;oBACV,OAAO,CAAC,YAAY,EAAE;wBACpB,UAAU,CAAC,QAAQ,EAAE;4BACnB,KAAK,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;4BACpD,OAAO,CAAC,gBAAgB,EAAE,KAAK,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;yBAC/E,CAAC;wBACF,UAAU,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,gBAAgB,EAAE,KAAK,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;qBACxG,CAAC;oBACF,OAAO,CAAC,cAAc,EAAE;wBACtB,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC,CAAC;wBACnD,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC,CAAC;wBACvD,UAAU,CAAC,oBAAoB,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;wBAC3D,UAAU,CAAC,oBAAoB,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;qBAC3D,CAAC;iBACH;;aACF;;;YAtCmB,UAAU;;;mBAwC3B,KAAK;sBACL,KAAK;oBACL,KAAK;uBAML,YAAY,SAAC,gBAAgB,EAAE,CAAC,QAAQ,CAAC;;;MCzC/B,SAAS;IACpB,OAAO,OAAO;QACZ,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC;KAC/C;;;YARF,QAAQ,SAAC;gBACR,YAAY,EAAE,CAAC,YAAY,CAAC;gBAC5B,OAAO,EAAE,CAAC,YAAY,CAAC;gBACvB,OAAO,EAAE,CAAC,YAAY,CAAC;aACxB;;;ACRD;;;;;;"}

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

@@ -1,73 +0,0 @@
-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() {
-        if (this.value === this.maxLimit)
-            return;
-        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

@@ -1 +0,0 @@
-{"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    if(this.value === this.maxLimit) return;\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,IAAG,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,QAAQ;YAAE,OAAO;QACxC,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;;;YAtCF,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;;;;;;"}