mis-crystal-design-system 4.0.51 → 17.0.0

package/fesm2022/mis-crystal-design-system-input.mjs

@@ -0,0 +1,146 @@
+import * as i0 from '@angular/core';
+import { Directive, Self, Optional, Component, Input, ContentChild, NgModule } from '@angular/core';
+import { ReplaySubject, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i1$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+class MisInputDirective {
+    constructor(el, control) {
+        this.el = el;
+        this.control = control;
+        this.validityChange = new ReplaySubject(1);
+        this.validity = this.validityChange.asObservable();
+        this.endObs = new Subject();
+        this.focus = false;
+        this.hasValue = false;
+    }
+    ngOnInit() {
+        this.control?.control?.valueChanges.pipe(takeUntil(this.endObs)).subscribe(() => {
+            this.validityChange.next(!this.control.control?.invalid);
+        });
+        this.el.nativeElement.placeholder += " ";
+    }
+    ngOnDestroy() {
+        this.endObs.next();
+        this.endObs.complete();
+    }
+    static { this.ɵfac = function MisInputDirective_Factory(t) { return new (t || MisInputDirective)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1.NgControl, 10)); }; }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: MisInputDirective, selectors: [["input", "misInput", ""]] }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MisInputDirective, [{
+        type: Directive,
+        args: [{
+                // tslint:disable-next-line
+                selector: "input[misInput]"
+            }]
+    }], () => [{ type: i0.ElementRef }, { type: i1.NgControl, decorators: [{
+                type: Self
+            }, {
+                type: Optional
+            }] }], null); })();
+
+const _c0 = [[["", "mis-input-icon", ""]], [["input"]], [["", "mis-input-act", ""]], [["", "mis-input-hint", ""]], [["", "mis-input-error", ""]]];
+const _c1 = ["[mis-input-icon]", "input", "[mis-input-act]", "[mis-input-hint]", "[mis-input-error]"];
+const _c2 = (a0, a1, a2, a3, a4) => ({ rounded: a0, floating: a1, "has-error": a2, "no-hint": a3, "mis-disabled": a4 });
+function MisInputComponent_span_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 5);
+    i0.ɵɵtext(1, "*");
+    i0.ɵɵelementEnd();
+} }
+class MisInputComponent {
+    set formInput(input) {
+        if (!this.placeholder) {
+            this.placeholder = input?.el.nativeElement.placeholder || "";
+        }
+        this.inputCtrl = input.control?.control;
+        this.inputSubscription?.unsubscribe();
+        this.inputSubscription = input?.validity.subscribe(res => (this.inputValidity = res));
+        this.placeholder += " ";
+    }
+    constructor() {
+        this.type = "floating";
+        this.size = "sm";
+        this.noHints = false;
+        this.hasError = false; // show input in error state
+        this.isMandatory = false; // show input as mandatory
+        this.inputValidity = true;
+    }
+    ngOnInit() { }
+    ngOnDestroy() {
+        this.inputSubscription?.unsubscribe();
+    }
+    static { this.ɵfac = function MisInputComponent_Factory(t) { return new (t || MisInputComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MisInputComponent, selectors: [["mis-input"]], contentQueries: function MisInputComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
+            i0.ɵɵcontentQuery(dirIndex, MisInputDirective, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.formInput = _t.first);
+        } }, inputs: { type: "type", size: "size", placeholder: "placeholder", noHints: "noHints", hasError: "hasError", isMandatory: "isMandatory" }, ngContentSelectors: _c1, decls: 11, vars: 11, consts: [[3, "ngClass"], [1, "input-wrapper"], [1, "mis-input"], [1, "mis-placeholder"], ["style", "color: red;", 4, "ngIf"], [2, "color", "red"]], template: function MisInputComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef(_c0);
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
+            i0.ɵɵprojection(2);
+            i0.ɵɵelementStart(3, "div", 2);
+            i0.ɵɵprojection(4, 1);
+            i0.ɵɵelementStart(5, "span", 3);
+            i0.ɵɵtext(6);
+            i0.ɵɵtemplate(7, MisInputComponent_span_7_Template, 2, 0, "span", 4);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵprojection(8, 2);
+            i0.ɵɵelementEnd();
+            i0.ɵɵprojection(9, 3);
+            i0.ɵɵprojection(10, 4);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵclassMap("input-container " + ctx.size);
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction5(5, _c2, ctx.type === "rounded", ctx.type === "floating", !ctx.inputValidity || ctx.hasError, ctx.noHints, ctx.inputCtrl == null ? null : ctx.inputCtrl.disabled));
+            i0.ɵɵadvance(6);
+            i0.ɵɵtextInterpolate(ctx.placeholder);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.isMandatory);
+        } }, dependencies: [i1$1.NgClass, i1$1.NgIf], styles: ["[_ngcontent-%COMP%]:root{--pmry-200: #99BAF7;--pmry-100: #CBDDFB;--pmry-500: #0937B2;--pmry-400: #3C68D0;--pmry-600: #062A99;--pmry-700: #041F80;--pmry-300: #638FE7;--pmry-800: #021567;--pmry-900: #010F55;--sec-d-purple: #40447F;--sec-maroon: #6B034E;--sec-mud-red: #B23600;--sec-orange: #ED711C;--sec-purple: #815FD5;--sec-teal: #10ADAE;--sec-yellow: #D4900C;--sec-green: #547F40;--sec-bright-green: #27D22E;--sec-dark-teal: #035F6B;--sec-chocolate: #7C2F33;--sec-rube-pink: #C13D6D;--sec-cerulean: #0087B2;--sem-error: #B00020;--sem-info: #0091FF;--sem-warning: #FF9D00;--sem-success: #38AF49;--grey-bg-1: #FAFAFA;--grey-bg: #F5F5F5;--grey-seperators: #E0E0E0;--grey-disabled: #C8CDD3;--grey-hover: #F5F7FC;--grey-pressed: #E6EBF7;--grey-row: #F5F7FC;--dec-light-yellow: #F4E7C3;--dec-light-purple: #DACFF9;--dec-light-green: #E4F5E9;--dec-light-green2: #F1FFF3;--dec-light-pink: #FAE1EA;--dec-: #F4CBC1;--dec-lt-orange: #FAEFED;--dec-light-blue: #CFECF9;--dec-row-selection: #F1FDF8;--dec-row-selection2: #F2FBFF;--dec-row-lines: #D3E1E9;--text-white: #FFFFFF;--text-disabled: #929DAB;--text-muted: #6A737D;--text-black: #181F33;--MR-solid-blue2:#C8D5F6;--MR-solid-purple:#C9C3FB;--MR-solid-orange:#EEAC9F;--MR-solid-green:#ACDADA;--MR-solid-brown:#E8C8AF;--MR-solid-yellow:#FFEFC7;--MR-solid-blue:#BBE6FF;--MR-solid-pink:#FFC6F2;--tr-hover:#F0F3FA;--tr-pressed:#DAE1F3}.input-container[_ngcontent-%COMP%]{position:relative;padding-bottom:24px}.input-container.mis-disabled[_ngcontent-%COMP%]   .input-wrapper[_ngcontent-%COMP%]{pointer-events:none!important}.input-container[_ngcontent-%COMP%]   .input-wrapper[_ngcontent-%COMP%]{box-sizing:border-box;display:flex;align-items:center;flex-direction:row;flex-wrap:nowrap;transition:all ease-in 60ms;background-color:#fff;padding:3px 16px;gap:16px}.input-container[_ngcontent-%COMP%]   .input-wrapper[_ngcontent-%COMP%]   .mis-input[_ngcontent-%COMP%]{flex:1 1 auto;z-index:0;position:relative;display:flex;align-items:center}.input-container[_ngcontent-%COMP%]   .input-wrapper[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]{flex:1 1 auto;border:none;outline:none;height:100%;padding:0;font-family:Lato;font-style:normal;font-weight:400;font-size:16px;height:24px;color:#181f33;background-color:transparent;width:100%;vertical-align:middle}.input-container[_ngcontent-%COMP%]   .input-wrapper[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]::placeholder{transition:all ease-in .1s;opacity:0;transform-origin:left center;color:transparent}.input-container[_ngcontent-%COMP%]   .input-wrapper[_ngcontent-%COMP%]   .mis-placeholder[_ngcontent-%COMP%]{position:absolute;font-family:Lato;font-style:normal;font-weight:400;font-size:16px;line-height:24px;color:#6a737d;z-index:-1;transition:all ease-in .15s}.input-container[_ngcontent-%COMP%]   .input-wrapper[_ngcontent-%COMP%]:focus-within{background-color:#f5f5f5}.input-container[_ngcontent-%COMP%]   .input-wrapper[_ngcontent-%COMP%]:focus-within{border:1px solid #0937B2}.input-container[_ngcontent-%COMP%]   .input-wrapper[_ngcontent-%COMP%]   [mis-input-act][_ngcontent-%COMP%], .input-container[_ngcontent-%COMP%]   .input-wrapper[_ngcontent-%COMP%]   [mis-input-icon][_ngcontent-%COMP%]{width:18px;height:18px;color:#6a737d;font-size:24px;line-height:18px}.input-container[_ngcontent-%COMP%]   .input-wrapper[_ngcontent-%COMP%]   [mis-input-act][_ngcontent-%COMP%]{cursor:pointer}.input-container.no-hint[_ngcontent-%COMP%]{padding-bottom:0}.input-container.rounded[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]{box-sizing:initial}.input-container.rounded.sm[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]{padding:3px 16px}.input-container.rounded.md[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]{padding:9px 16px}.input-container.rounded.lg[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]{padding:15px 16px}.input-container.rounded[_ngcontent-%COMP%]   .input-wrapper[_ngcontent-%COMP%]{border-radius:4px;border:1px solid #e0e0e0;padding:0}.input-container.rounded[_ngcontent-%COMP%]   .input-wrapper[_ngcontent-%COMP%]:hover{background-color:#f5f5f5}.input-container.rounded[_ngcontent-%COMP%]   .input-wrapper[_ngcontent-%COMP%]:focus-within{border:1px solid #0937b2}.input-container.rounded[_ngcontent-%COMP%]   .input-wrapper[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:not(:placeholder-shown) + .mis-placeholder[_ngcontent-%COMP%]{color:transparent!important}.input-container.rounded[_ngcontent-%COMP%]   .input-wrapper[_ngcontent-%COMP%]   .mis-placeholder[_ngcontent-%COMP%]{margin-left:16px;transition-duration:50ms}.input-container.rounded.has-error[_ngcontent-%COMP%]   .input-wrapper[_ngcontent-%COMP%]{border:1px solid #b00020!important}.input-container.floating[_ngcontent-%COMP%]   .input-wrapper[_ngcontent-%COMP%]{padding-top:24px;padding-bottom:7px;border-bottom:1px solid #e0e0e0}.input-container.floating[_ngcontent-%COMP%]   .input-wrapper[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus + .mis-placeholder[_ngcontent-%COMP%]{color:#0937b2!important}.input-container.floating[_ngcontent-%COMP%]   .input-wrapper[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:not(:placeholder-shown) + .mis-placeholder[_ngcontent-%COMP%], .input-container.floating[_ngcontent-%COMP%]   .input-wrapper[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus + .mis-placeholder[_ngcontent-%COMP%]{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating[_ngcontent-%COMP%]   .input-wrapper[_ngcontent-%COMP%]:focus-within{border:none;border-bottom:1px solid #0937b2}.input-container.floating[_ngcontent-%COMP%]   .input-wrapper[_ngcontent-%COMP%]:focus-within   input[_ngcontent-%COMP%]::placeholder{color:#6a737d;opacity:1;font-size:16px}.input-container.floating.has-error[_ngcontent-%COMP%]   .input-wrapper[_ngcontent-%COMP%]{border-bottom:1px solid #b00020!important}.input-container.floating.has-error[_ngcontent-%COMP%]   .input-wrapper[_ngcontent-%COMP%]   .mis-placeholder[_ngcontent-%COMP%]{color:#b00020!important}.input-container[_ngcontent-%COMP%]   [mis-input-hint][_ngcontent-%COMP%], .input-container[_ngcontent-%COMP%]   [mis-input-error][_ngcontent-%COMP%]{position:absolute;left:0;right:0;bottom:0;line-height:24px;height:24px;font-size:12px;color:#6a737d;letter-spacing:.2px}.input-container[_ngcontent-%COMP%]   [mis-input-error][_ngcontent-%COMP%]{color:#b00020}"] }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MisInputComponent, [{
+        type: Component,
+        args: [{ selector: "mis-input", template: "<div\n  [class]=\"'input-container ' + size\"\n  [ngClass]=\"{\n    rounded: type === 'rounded',\n    floating: type === 'floating',\n    'has-error': !inputValidity || hasError,\n    'no-hint': noHints,\n    'mis-disabled': inputCtrl?.disabled\n  }\"\n>\n  <div class=\"input-wrapper\">\n    <ng-content select=\"[mis-input-icon]\"></ng-content>\n    <div class=\"mis-input\">\n      <ng-content select=\"input\"></ng-content>\n      <span class=\"mis-placeholder\">{{ placeholder }}<span *ngIf=\"isMandatory\" style=\"color: red;\">*</span></span>\n    </div>\n    <ng-content select=\"[mis-input-act]\"></ng-content>\n  </div>\n  <ng-content select=\"[mis-input-hint]\"></ng-content>\n  <ng-content select=\"[mis-input-error]\"></ng-content>\n</div>\n", styles: [":root{--pmry-200: #99BAF7;--pmry-100: #CBDDFB;--pmry-500: #0937B2;--pmry-400: #3C68D0;--pmry-600: #062A99;--pmry-700: #041F80;--pmry-300: #638FE7;--pmry-800: #021567;--pmry-900: #010F55;--sec-d-purple: #40447F;--sec-maroon: #6B034E;--sec-mud-red: #B23600;--sec-orange: #ED711C;--sec-purple: #815FD5;--sec-teal: #10ADAE;--sec-yellow: #D4900C;--sec-green: #547F40;--sec-bright-green: #27D22E;--sec-dark-teal: #035F6B;--sec-chocolate: #7C2F33;--sec-rube-pink: #C13D6D;--sec-cerulean: #0087B2;--sem-error: #B00020;--sem-info: #0091FF;--sem-warning: #FF9D00;--sem-success: #38AF49;--grey-bg-1: #FAFAFA;--grey-bg: #F5F5F5;--grey-seperators: #E0E0E0;--grey-disabled: #C8CDD3;--grey-hover: #F5F7FC;--grey-pressed: #E6EBF7;--grey-row: #F5F7FC;--dec-light-yellow: #F4E7C3;--dec-light-purple: #DACFF9;--dec-light-green: #E4F5E9;--dec-light-green2: #F1FFF3;--dec-light-pink: #FAE1EA;--dec-: #F4CBC1;--dec-lt-orange: #FAEFED;--dec-light-blue: #CFECF9;--dec-row-selection: #F1FDF8;--dec-row-selection2: #F2FBFF;--dec-row-lines: #D3E1E9;--text-white: #FFFFFF;--text-disabled: #929DAB;--text-muted: #6A737D;--text-black: #181F33;--MR-solid-blue2:#C8D5F6;--MR-solid-purple:#C9C3FB;--MR-solid-orange:#EEAC9F;--MR-solid-green:#ACDADA;--MR-solid-brown:#E8C8AF;--MR-solid-yellow:#FFEFC7;--MR-solid-blue:#BBE6FF;--MR-solid-pink:#FFC6F2;--tr-hover:#F0F3FA;--tr-pressed:#DAE1F3}.input-container{position:relative;padding-bottom:24px}.input-container.mis-disabled .input-wrapper{pointer-events:none!important}.input-container .input-wrapper{box-sizing:border-box;display:flex;align-items:center;flex-direction:row;flex-wrap:nowrap;transition:all ease-in 60ms;background-color:#fff;padding:3px 16px;gap:16px}.input-container .input-wrapper .mis-input{flex:1 1 auto;z-index:0;position:relative;display:flex;align-items:center}.input-container .input-wrapper input{flex:1 1 auto;border:none;outline:none;height:100%;padding:0;font-family:Lato;font-style:normal;font-weight:400;font-size:16px;height:24px;color:#181f33;background-color:transparent;width:100%;vertical-align:middle}.input-container .input-wrapper input::placeholder{transition:all ease-in .1s;opacity:0;transform-origin:left center;color:transparent}.input-container .input-wrapper .mis-placeholder{position:absolute;font-family:Lato;font-style:normal;font-weight:400;font-size:16px;line-height:24px;color:#6a737d;z-index:-1;transition:all ease-in .15s}.input-container .input-wrapper:focus-within{background-color:#f5f5f5}.input-container .input-wrapper:focus-within{border:1px solid #0937B2}.input-container .input-wrapper [mis-input-act],.input-container .input-wrapper [mis-input-icon]{width:18px;height:18px;color:#6a737d;font-size:24px;line-height:18px}.input-container .input-wrapper [mis-input-act]{cursor:pointer}.input-container.no-hint{padding-bottom:0}.input-container.rounded input{box-sizing:initial}.input-container.rounded.sm input{padding:3px 16px}.input-container.rounded.md input{padding:9px 16px}.input-container.rounded.lg input{padding:15px 16px}.input-container.rounded .input-wrapper{border-radius:4px;border:1px solid #e0e0e0;padding:0}.input-container.rounded .input-wrapper:hover{background-color:#f5f5f5}.input-container.rounded .input-wrapper:focus-within{border:1px solid #0937b2}.input-container.rounded .input-wrapper input:not(:placeholder-shown)+.mis-placeholder{color:transparent!important}.input-container.rounded .input-wrapper .mis-placeholder{margin-left:16px;transition-duration:50ms}.input-container.rounded.has-error .input-wrapper{border:1px solid #b00020!important}.input-container.floating .input-wrapper{padding-top:24px;padding-bottom:7px;border-bottom:1px solid #e0e0e0}.input-container.floating .input-wrapper input:focus+.mis-placeholder{color:#0937b2!important}.input-container.floating .input-wrapper input:not(:placeholder-shown)+.mis-placeholder,.input-container.floating .input-wrapper input:focus+.mis-placeholder{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating .input-wrapper:focus-within{border:none;border-bottom:1px solid #0937b2}.input-container.floating .input-wrapper:focus-within input::placeholder{color:#6a737d;opacity:1;font-size:16px}.input-container.floating.has-error .input-wrapper{border-bottom:1px solid #b00020!important}.input-container.floating.has-error .input-wrapper .mis-placeholder{color:#b00020!important}.input-container [mis-input-hint],.input-container [mis-input-error]{position:absolute;left:0;right:0;bottom:0;line-height:24px;height:24px;font-size:12px;color:#6a737d;letter-spacing:.2px}.input-container [mis-input-error]{color:#b00020}\n"] }]
+    }], () => [], { type: [{
+            type: Input
+        }], size: [{
+            type: Input
+        }], placeholder: [{
+            type: Input
+        }], noHints: [{
+            type: Input
+        }], hasError: [{
+            type: Input
+        }], isMandatory: [{
+            type: Input
+        }], formInput: [{
+            type: ContentChild,
+            args: [MisInputDirective]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MisInputComponent, { className: "MisInputComponent" }); })();
+
+class MisInputModule {
+    static { this.ɵfac = function MisInputModule_Factory(t) { return new (t || MisInputModule)(); }; }
+    static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: MisInputModule }); }
+    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule, FormsModule] }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MisInputModule, [{
+        type: NgModule,
+        args: [{
+                declarations: [MisInputComponent, MisInputDirective],
+                imports: [CommonModule, FormsModule],
+                exports: [MisInputComponent, MisInputDirective]
+            }]
+    }], null, null); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MisInputModule, { declarations: [MisInputComponent, MisInputDirective], imports: [CommonModule, FormsModule], exports: [MisInputComponent, MisInputDirective] }); })();
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MisInputComponent, MisInputDirective, MisInputModule };
+//# sourceMappingURL=mis-crystal-design-system-input.mjs.map

package/fesm2022/mis-crystal-design-system-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mis-crystal-design-system-input.mjs","sources":["../../../projects/mis-components/input/directives/input/input.directive.ts","../../../projects/mis-components/input/mis-input.component.html","../../../projects/mis-components/input/mis-input.component.ts","../../../projects/mis-components/input/mis-input.module.ts","../../../projects/mis-components/input/mis-crystal-design-system-input.ts"],"sourcesContent":["import { Directive, ElementRef, OnDestroy, OnInit, Optional, Self } from \"@angular/core\";\nimport { NgControl } from \"@angular/forms\";\nimport { ReplaySubject, Subject, Subscription } from \"rxjs\";\nimport { takeUntil } from \"rxjs/operators\";\n\n@Directive({\n  // tslint:disable-next-line\n  selector: \"input[misInput]\"\n})\nexport class MisInputDirective implements OnInit, OnDestroy {\n  constructor(public el: ElementRef, @Self() @Optional() public control: NgControl) {}\n  private validityChange: ReplaySubject<boolean> = new ReplaySubject(1);\n  validity = this.validityChange.asObservable();\n  endObs: Subject<void> = new Subject();\n  focus = false;\n  hasValue = false;\n\n  ngOnInit(): void {\n    this.control?.control?.valueChanges.pipe(takeUntil(this.endObs)).subscribe(() => {\n      this.validityChange.next(!this.control.control?.invalid);\n    });\n    this.el.nativeElement.placeholder += \" \";\n  }\n  ngOnDestroy(): void {\n    this.endObs.next();\n    this.endObs.complete();\n  }\n}\n","<div\n  [class]=\"'input-container ' + size\"\n  [ngClass]=\"{\n    rounded: type === 'rounded',\n    floating: type === 'floating',\n    'has-error': !inputValidity || hasError,\n    'no-hint': noHints,\n    'mis-disabled': inputCtrl?.disabled\n  }\"\n>\n  <div class=\"input-wrapper\">\n    <ng-content select=\"[mis-input-icon]\"></ng-content>\n    <div class=\"mis-input\">\n      <ng-content select=\"input\"></ng-content>\n      <span class=\"mis-placeholder\">{{ placeholder }}<span *ngIf=\"isMandatory\" style=\"color: red;\">*</span></span>\n    </div>\n    <ng-content select=\"[mis-input-act]\"></ng-content>\n  </div>\n  <ng-content select=\"[mis-input-hint]\"></ng-content>\n  <ng-content select=\"[mis-input-error]\"></ng-content>\n</div>\n","import { Component, ContentChild, Input, OnDestroy, OnInit, ViewEncapsulation } from \"@angular/core\";\nimport { AbstractControl } from \"@angular/forms\";\nimport { Subscription } from \"rxjs\";\nimport { MisInputDirective } from \"./directives/input/input.directive\";\n\n@Component({\n  selector: \"mis-input\",\n  templateUrl: \"./mis-input.component.html\",\n  styleUrls: [\"./mis-input.component.scss\"]\n})\nexport class MisInputComponent implements OnInit, OnDestroy {\n  @Input() type: \"rounded\" | \"floating\" = \"floating\";\n  @Input() size: \"sm\" | \"md\" | \"lg\" = \"sm\";\n  @Input() placeholder: string; // floating placeholder text\n  @Input() noHints = false;\n  @Input() hasError = false; // show input in error state\n  @Input() isMandatory:boolean = false; // show input as mandatory\n  @ContentChild(MisInputDirective) set formInput(input: MisInputDirective) {\n    if (!this.placeholder) {\n      this.placeholder = input?.el.nativeElement.placeholder || \"\";\n    }\n    this.inputCtrl = input.control?.control;\n    this.inputSubscription?.unsubscribe();\n    this.inputSubscription = input?.validity.subscribe(res => (this.inputValidity = res));\n    this.placeholder += \" \";\n  }\n  inputCtrl: AbstractControl;\n  inputSubscription: Subscription | undefined;\n  inputValidity: boolean = true;\n  constructor() {}\n\n  ngOnInit(): void {}\n  ngOnDestroy(): void {\n    this.inputSubscription?.unsubscribe();\n  }\n}\n","import { CommonModule } from \"@angular/common\";\nimport { NgModule } from \"@angular/core\";\nimport { FormsModule } from \"@angular/forms\";\nimport { MisInputDirective } from \"./directives/input/input.directive\";\nimport { MisInputComponent } from \"./mis-input.component\";\n\n@NgModule({\n  declarations: [MisInputComponent, MisInputDirective],\n  imports: [CommonModule, FormsModule],\n  exports: [MisInputComponent, MisInputDirective]\n})\nexport class MisInputModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/mis-crystal-design-system-loader.mjs

@@ -0,0 +1,51 @@
+import * as i0 from '@angular/core';
+import { Component, Input, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+const _c0 = a0 => ({ mobile: a0 });
+class LoaderComponent {
+    constructor() {
+        /** Controls loader size */
+        this.mobileView = false;
+    }
+    ngOnInit() { }
+    static { this.ɵfac = function LoaderComponent_Factory(t) { return new (t || LoaderComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LoaderComponent, selectors: [["mis-loader"]], inputs: { mobileView: "mobileView" }, decls: 1, vars: 3, consts: [["id", "spinner", 3, "ngClass"]], template: function LoaderComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelement(0, "div", 0);
+        } if (rf & 2) {
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(1, _c0, ctx.mobileView));
+        } }, dependencies: [i1.NgClass], styles: ["#spinner[_ngcontent-%COMP%]{-webkit-animation:_ngcontent-%COMP%_frames 1s infinite linear;animation:_ngcontent-%COMP%_frames 1s infinite linear;background:transparent;border:4px solid #e0e0e0;border-radius:100%;border-top-color:#6200ee;width:40px;height:40px;padding:0;position:absolute}@keyframes _ngcontent-%COMP%_frames{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.mobile[_ngcontent-%COMP%]{height:20px!important;width:20px!important;border:2px solid #e0e0e0!important;border-top-color:#6200ee!important}"] }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LoaderComponent, [{
+        type: Component,
+        args: [{ selector: "mis-loader", template: "<div\n  id=\"spinner\"\n  [ngClass]=\"{\n    mobile: mobileView\n  }\"\n></div>\n", styles: ["#spinner{-webkit-animation:frames 1s infinite linear;animation:frames 1s infinite linear;background:transparent;border:4px solid #e0e0e0;border-radius:100%;border-top-color:#6200ee;width:40px;height:40px;padding:0;position:absolute}@keyframes frames{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.mobile{height:20px!important;width:20px!important;border:2px solid #e0e0e0!important;border-top-color:#6200ee!important}\n"] }]
+    }], () => [], { mobileView: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LoaderComponent, { className: "LoaderComponent" }); })();
+
+class LoaderModule {
+    static forRoot() {
+        return { ngModule: LoaderModule, providers: [] };
+    }
+    static { this.ɵfac = function LoaderModule_Factory(t) { return new (t || LoaderModule)(); }; }
+    static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: LoaderModule }); }
+    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule] }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LoaderModule, [{
+        type: NgModule,
+        args: [{
+                declarations: [LoaderComponent],
+                imports: [CommonModule],
+                exports: [LoaderComponent]
+            }]
+    }], null, null); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(LoaderModule, { declarations: [LoaderComponent], imports: [CommonModule], exports: [LoaderComponent] }); })();
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LoaderComponent, LoaderModule };
+//# sourceMappingURL=mis-crystal-design-system-loader.mjs.map

package/fesm2022/mis-crystal-design-system-loader.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mis-crystal-design-system-loader.mjs","sources":["../../../projects/mis-components/loader/loader.component.ts","../../../projects/mis-components/loader/loader.component.html","../../../projects/mis-components/loader/loader.module.ts","../../../projects/mis-components/loader/mis-crystal-design-system-loader.ts"],"sourcesContent":["import { Component, Input, OnInit } from \"@angular/core\";\n\n@Component({\n  selector: \"mis-loader\",\n  templateUrl: \"./loader.component.html\",\n  styleUrls: [\"./loader.component.scss\"]\n})\nexport class LoaderComponent implements OnInit {\n  /** Controls loader size */\n  @Input() mobileView: boolean = false;\n\n  constructor() {}\n  ngOnInit() {}\n}\n","<div\n  id=\"spinner\"\n  [ngClass]=\"{\n    mobile: mobileView\n  }\"\n></div>\n","import { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\n\nimport { LoaderComponent } from \"./loader.component\";\n\n@NgModule({\n  declarations: [LoaderComponent],\n  imports: [CommonModule],\n  exports: [LoaderComponent]\n})\nexport class LoaderModule {\n  static forRoot(): ModuleWithProviders<LoaderModule> {\n    return { ngModule: LoaderModule, providers: [] };\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;MAOa,eAAe,CAAA;AAI1B,IAAA,WAAA,GAAA;;QAFS,IAAU,CAAA,UAAA,GAAY,KAAK,CAAC;KAErB;AAChB,IAAA,QAAQ,MAAK;gFALF,eAAe,GAAA,CAAA,EAAA,CAAA,EAAA;oEAAf,eAAe,EAAA,SAAA,EAAA,CAAA,CAAA,YAAA,CAAA,CAAA,EAAA,MAAA,EAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,KAAA,EAAA,CAAA,EAAA,IAAA,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,CAAA,IAAA,EAAA,SAAA,EAAA,CAAA,EAAA,SAAA,CAAA,CAAA,EAAA,QAAA,EAAA,SAAA,wBAAA,CAAA,EAAA,EAAA,GAAA,EAAA,EAAA,IAAA,EAAA,GAAA,CAAA,EAAA;YCP5B,EAKO,CAAA,SAAA,CAAA,CAAA,EAAA,KAAA,EAAA,CAAA,CAAA,CAAA;;YAHL,EAEE,CAAA,UAAA,CAAA,SAAA,EAAA,EAAA,CAAA,eAAA,CAAA,CAAA,EAAA,GAAA,EAAA,GAAA,CAAA,UAAA,CAAA,CAAA,CAAA;;;iFDGS,eAAe,EAAA,CAAA;cAL3B,SAAS;2BACE,YAAY,EAAA,QAAA,EAAA,mFAAA,EAAA,MAAA,EAAA,CAAA,2eAAA,CAAA,EAAA,CAAA;oBAMb,UAAU,EAAA,CAAA;kBAAlB,KAAK;;kFAFK,eAAe,EAAA,EAAA,SAAA,EAAA,iBAAA,EAAA,CAAA,CAAA,EAAA,GAAA;;MEGf,YAAY,CAAA;AACvB,IAAA,OAAO,OAAO,GAAA;QACZ,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC;KAClD;6EAHU,YAAY,GAAA,CAAA,EAAA,CAAA,EAAA;mEAAZ,YAAY,EAAA,CAAA,CAAA,EAAA;uEAHb,YAAY,CAAA,EAAA,CAAA,CAAA,EAAA;;iFAGX,YAAY,EAAA,CAAA;cALxB,QAAQ;AAAC,QAAA,IAAA,EAAA,CAAA;gBACR,YAAY,EAAE,CAAC,eAAe,CAAC;gBAC/B,OAAO,EAAE,CAAC,YAAY,CAAC;gBACvB,OAAO,EAAE,CAAC,eAAe,CAAC;AAC3B,aAAA,CAAA;;AACY,CAAA,YAAA,EAAA,CAAA,OAAA,SAAA,KAAA,WAAA,IAAA,SAAA,KAAA,EAAA,CAAA,kBAAA,CAAA,YAAY,EAJR,EAAA,YAAA,EAAA,CAAA,eAAe,CACpB,EAAA,OAAA,EAAA,CAAA,YAAY,aACZ,eAAe,CAAA,EAAA,CAAA,CAAA,EAAA,GAAA;;ACR3B;;AAEG;;;;"}

package/fesm2022/mis-crystal-design-system-menu.mjs

@@ -0,0 +1,124 @@
+import * as i1 from '@angular/cdk/overlay';
+import { ConnectionPositionPair, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
+import { TemplatePortal, PortalModule } from '@angular/cdk/portal';
+import * as i0 from '@angular/core';
+import { Directive, Input, HostListener, NgModule } from '@angular/core';
+import { take } from 'rxjs/operators';
+import { CommonModule } from '@angular/common';
+
+/** @format */
+class MenuDirective {
+    constructor(overlay, element, viewContainerRef) {
+        this.overlay = overlay;
+        this.element = element;
+        this.viewContainerRef = viewContainerRef;
+        this.positionX = "start";
+        this.positionY = "bottom";
+        this.offsetX = 0;
+        this.offsetY = 0;
+    }
+    onClick(event) {
+        this.menuShow();
+    }
+    menuShow() {
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(this.element)
+            .withPositions([
+            new ConnectionPositionPair({ originX: this.positionX, originY: this.positionY }, { overlayX: this.positionX, overlayY: this.positionY === "bottom" ? "top" : "bottom" }, this.offsetX, this.offsetY),
+            new ConnectionPositionPair({ originX: "start", originY: "bottom" }, { overlayX: "start", overlayY: "top" }, this.offsetX, this.offsetY),
+            new ConnectionPositionPair({ originX: "end", originY: "top" }, { overlayX: "end", overlayY: "bottom" }, this.offsetX, this.offsetY)
+        ])
+            .withPush(true);
+        const config = new OverlayConfig({
+            hasBackdrop: true,
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            backdropClass: "cdk-overlay-transparent-backdrop"
+        });
+        this.overlayRef = this.overlay.create(config);
+        const tempRef = new TemplatePortal(this.menu, this.viewContainerRef);
+        this.overlayRef.attach(tempRef);
+        this.overlayRef
+            .backdropClick()
+            .pipe(take(1))
+            .subscribe(res => {
+            this.close();
+        });
+    }
+    close() {
+        this.overlayRef?.detach();
+        this.overlayRef?.dispose();
+    }
+    static { this.ɵfac = function MenuDirective_Factory(t) { return new (t || MenuDirective)(i0.ɵɵdirectiveInject(i1.Overlay), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.ViewContainerRef)); }; }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: MenuDirective, selectors: [["", "misMenu", ""]], hostBindings: function MenuDirective_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("click", function MenuDirective_click_HostBindingHandler($event) { return ctx.onClick($event); });
+        } }, inputs: { menu: [i0.ɵɵInputFlags.None, "misMenu", "menu"], positionX: "positionX", positionY: "positionY", offsetX: "offsetX", offsetY: "offsetY" }, exportAs: ["misMenu"] }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuDirective, [{
+        type: Directive,
+        args: [{
+                selector: "[misMenu]",
+                exportAs: "misMenu"
+            }]
+    }], () => [{ type: i1.Overlay }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }], { menu: [{
+            type: Input,
+            args: ["misMenu"]
+        }], positionX: [{
+            type: Input
+        }], positionY: [{
+            type: Input
+        }], offsetX: [{
+            type: Input
+        }], offsetY: [{
+            type: Input
+        }], onClick: [{
+            type: HostListener,
+            args: ["click", ["$event"]]
+        }] }); })();
+
+class MenuCloseDirective {
+    constructor() { }
+    closeMenu() {
+        this.menu.close();
+    }
+    static { this.ɵfac = function MenuCloseDirective_Factory(t) { return new (t || MenuCloseDirective)(); }; }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: MenuCloseDirective, selectors: [["", "misMenuClose", ""]], hostBindings: function MenuCloseDirective_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("click", function MenuCloseDirective_click_HostBindingHandler() { return ctx.closeMenu(); });
+        } }, inputs: { menu: [i0.ɵɵInputFlags.None, "misMenuClose", "menu"] } }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuCloseDirective, [{
+        type: Directive,
+        args: [{
+                selector: "[misMenuClose]"
+            }]
+    }], () => [], { menu: [{
+            type: Input,
+            args: ["misMenuClose"]
+        }], closeMenu: [{
+            type: HostListener,
+            args: ["click", []]
+        }] }); })();
+
+/** @format */
+class MisMenuModule {
+    static { this.ɵfac = function MisMenuModule_Factory(t) { return new (t || MisMenuModule)(); }; }
+    static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: MisMenuModule }); }
+    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule, OverlayModule, PortalModule] }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MisMenuModule, [{
+        type: NgModule,
+        args: [{
+                declarations: [MenuDirective, MenuCloseDirective],
+                imports: [CommonModule, OverlayModule, PortalModule],
+                exports: [MenuDirective, MenuCloseDirective]
+            }]
+    }], null, null); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MisMenuModule, { declarations: [MenuDirective, MenuCloseDirective], imports: [CommonModule, OverlayModule, PortalModule], exports: [MenuDirective, MenuCloseDirective] }); })();
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MenuCloseDirective, MenuDirective, MisMenuModule };
+//# sourceMappingURL=mis-crystal-design-system-menu.mjs.map

package/fesm2022/mis-crystal-design-system-menu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mis-crystal-design-system-menu.mjs","sources":["../../../projects/mis-components/menu/menu.directive.ts","../../../projects/mis-components/menu/menu-close.directive.ts","../../../projects/mis-components/menu/menu.module.ts","../../../projects/mis-components/menu/mis-crystal-design-system-menu.ts"],"sourcesContent":["/** @format */\n\nimport { ConnectionPositionPair, Overlay, OverlayConfig, OverlayRef } from \"@angular/cdk/overlay\";\nimport { TemplatePortal } from \"@angular/cdk/portal\";\nimport { Directive, ElementRef, HostListener, Input, TemplateRef, ViewContainerRef } from \"@angular/core\";\nimport { take } from \"rxjs/operators\";\n\n@Directive({\n  selector: \"[misMenu]\",\n  exportAs: \"misMenu\"\n})\nexport class MenuDirective {\n  @Input(\"misMenu\") menu: TemplateRef<ElementRef>;\n  @Input() positionX: \"start\" | \"end\" = \"start\";\n  @Input() positionY: \"top\" | \"bottom\" = \"bottom\";\n  @Input() offsetX = 0;\n  @Input() offsetY = 0;\n  private overlayRef: OverlayRef;\n\n  constructor(private overlay: Overlay, private element: ElementRef, private viewContainerRef: ViewContainerRef) {}\n  @HostListener(\"click\", [\"$event\"]) onClick(event) {\n    this.menuShow();\n  }\n  private menuShow() {\n    const positionStrategy = this.overlay\n      .position()\n      .flexibleConnectedTo(this.element)\n      .withPositions([\n        new ConnectionPositionPair(\n          { originX: this.positionX, originY: this.positionY },\n          { overlayX: this.positionX, overlayY: this.positionY === \"bottom\" ? \"top\" : \"bottom\" },\n          this.offsetX,\n          this.offsetY\n        ),\n        new ConnectionPositionPair({ originX: \"start\", originY: \"bottom\" }, { overlayX: \"start\", overlayY: \"top\" }, this.offsetX, this.offsetY),\n        new ConnectionPositionPair({ originX: \"end\", originY: \"top\" }, { overlayX: \"end\", overlayY: \"bottom\" }, this.offsetX, this.offsetY)\n      ])\n      .withPush(true);\n    const config = new OverlayConfig({\n      hasBackdrop: true,\n      positionStrategy,\n      scrollStrategy: this.overlay.scrollStrategies.reposition(),\n      backdropClass: \"cdk-overlay-transparent-backdrop\"\n    });\n    this.overlayRef = this.overlay.create(config);\n\n    const tempRef = new TemplatePortal(this.menu, this.viewContainerRef);\n    this.overlayRef.attach(tempRef);\n    this.overlayRef\n      .backdropClick()\n      .pipe(take(1))\n      .subscribe(res => {\n        this.close();\n      });\n  }\n\n  close(): void {\n    this.overlayRef?.detach();\n    this.overlayRef?.dispose();\n  }\n}\n","import { Directive, HostListener, Input } from \"@angular/core\";\nimport { MenuDirective } from \"./menu.directive\";\n\n@Directive({\n  selector: \"[misMenuClose]\"\n})\nexport class MenuCloseDirective {\n  @Input(\"misMenuClose\") menu: MenuDirective;\n  constructor() {}\n\n  @HostListener(\"click\", []) closeMenu() {\n    this.menu.close();\n  }\n}\n","/** @format */\n\nimport { NgModule } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\nimport { MenuDirective } from \"./menu.directive\";\nimport { OverlayModule } from \"@angular/cdk/overlay\";\nimport { PortalModule } from \"@angular/cdk/portal\";\nimport { MenuCloseDirective } from \"./menu-close.directive\";\n\n@NgModule({\n  declarations: [MenuDirective, MenuCloseDirective],\n  imports: [CommonModule, OverlayModule, PortalModule],\n  exports: [MenuDirective, MenuCloseDirective]\n})\nexport class MisMenuModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/mis-crystal-design-system-mobile-filter.mjs

@@ -0,0 +1,203 @@
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
+import * as i2 from 'mis-crystal-design-system/button';
+import { ButtonModule } from 'mis-crystal-design-system/button';
+import * as i3 from 'mis-crystal-design-system/checkbox';
+import { CheckboxModule } from 'mis-crystal-design-system/checkbox';
+
+const _c0 = a0 => ({ "color": a0 });
+function MobileFilterComponent_ng_container_7_span_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 16);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const filter_r2 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r2.localFilterOptions[filter_r2.key]["noOfSelectedItems"]);
+} }
+function MobileFilterComponent_ng_container_7_div_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 17);
+} }
+function MobileFilterComponent_ng_container_7_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelementStart(1, "div", 12);
+    i0.ɵɵlistener("click", function MobileFilterComponent_ng_container_7_Template_div_click_1_listener() { const filter_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.currentSelectedItem = filter_r2.key); });
+    i0.ɵɵelementStart(2, "span", 13);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(4, MobileFilterComponent_ng_container_7_span_4_Template, 2, 1, "span", 14)(5, MobileFilterComponent_ng_container_7_div_5_Template, 1, 0, "div", 15);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const filter_r2 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(4, _c0, filter_r2.key === ctx_r2.currentSelectedItem ? "#0937B2" : "#181F33"));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r2.localFilterOptions[filter_r2.key] == null ? null : ctx_r2.localFilterOptions[filter_r2.key].name);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.localFilterOptions[filter_r2.key]["multiSelect"] && ctx_r2.localFilterOptions[filter_r2.key]["noOfSelectedItems"] > 0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", filter_r2.key === ctx_r2.currentSelectedItem);
+} }
+function MobileFilterComponent_ng_container_14_mis_checkbox_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mis-checkbox", 22);
+} if (rf & 2) {
+    const option_r5 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("checked", option_r5.selected);
+} }
+function MobileFilterComponent_ng_container_14_input_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "input", 23);
+} if (rf & 2) {
+    const option_r5 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("checked", option_r5.selected);
+} }
+function MobileFilterComponent_ng_container_14_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelementStart(1, "div", 18);
+    i0.ɵɵlistener("click", function MobileFilterComponent_ng_container_14_Template_div_click_1_listener() { const option_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleFilter(option_r5.value, option_r5.selected)); });
+    i0.ɵɵtemplate(2, MobileFilterComponent_ng_container_14_mis_checkbox_2_Template, 1, 1, "mis-checkbox", 19)(3, MobileFilterComponent_ng_container_14_input_3_Template, 1, 1, "input", 20);
+    i0.ɵɵelementStart(4, "span", 21);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const option_r5 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r2.localFilterOptions[ctx_r2.currentSelectedItem].multiSelect);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r2.localFilterOptions[ctx_r2.currentSelectedItem].multiSelect);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(4, _c0, option_r5.selected ? "#181F33" : "#6A737D"));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(option_r5.label);
+} }
+class MobileFilterComponent {
+    set filterOptions(options) {
+        this.localFilterOptions = options;
+    }
+    ;
+    constructor() {
+        this.currentSelectedItem = 'Sort';
+        this.backIcon = '';
+        this.headerName = 'Filters';
+        this.applyBtnName = 'Apply';
+        this.clearBtnName = 'Clear Filters';
+        this.closeFilters = new EventEmitter();
+        this.clearFilters = new EventEmitter();
+        this.applyFilters = new EventEmitter();
+    }
+    ngOnInit() {
+    }
+    originalOrder() {
+        return 0;
+    }
+    toggleFilter(data, isSelectedItem) {
+        const isMultiSelect = this.localFilterOptions[this.currentSelectedItem].multiSelect;
+        this.localFilterOptions[this.currentSelectedItem].noOfSelectedItems = 0;
+        this.localFilterOptions[this.currentSelectedItem].options = this.localFilterOptions[this.currentSelectedItem].options.map(option => {
+            const isSelectedValue = option.value === data;
+            (isMultiSelect && option.selected) && (this.localFilterOptions[this.currentSelectedItem].noOfSelectedItems += 1);
+            return {
+                ...option,
+                selected: isSelectedValue ? (isMultiSelect ? !option.selected : true) : (isMultiSelect ? option.selected : false)
+            };
+        });
+        // changing number of selected items for multiselect filters
+        const noOfSelectedItems = this.localFilterOptions[this.currentSelectedItem].noOfSelectedItems;
+        isMultiSelect ? this.localFilterOptions[this.currentSelectedItem].noOfSelectedItems = isSelectedItem ? noOfSelectedItems - 1 : noOfSelectedItems + 1 : null;
+    }
+    static { this.ɵfac = function MobileFilterComponent_Factory(t) { return new (t || MobileFilterComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MobileFilterComponent, selectors: [["mis-mobile-filter"]], inputs: { currentSelectedItem: "currentSelectedItem", filterOptions: "filterOptions", backIcon: "backIcon", headerName: "headerName", applyBtnName: "applyBtnName", clearBtnName: "clearBtnName" }, outputs: { closeFilters: "closeFilters", clearFilters: "clearFilters", applyFilters: "applyFilters" }, decls: 20, vars: 10, consts: [[1, "filters-container"], [1, "head", "display-flex"], ["alt", "", 3, "click", "src"], [1, "body", "display-flex"], [1, "filters"], [4, "ngFor", "ngForOf"], [1, "filter-options-container"], [1, "filter-options-title"], [1, "filter-options"], [1, "footer", "display-flex"], ["mis-button", "", "size", "md", "type", "text", 3, "click"], ["mis-button", "", "size", "md", "type", "primary", 3, "click"], [1, "filter", "display-flex", 3, "click"], [1, "filterName", 3, "ngStyle"], ["class", "selectedNumber", 4, "ngIf"], ["class", "highlightor", 4, "ngIf"], [1, "selectedNumber"], [1, "highlightor"], [1, "filter-option", "display-flex", 3, "click"], [3, "checked", 4, "ngIf"], ["type", "radio", 3, "checked", 4, "ngIf"], [3, "ngStyle"], [3, "checked"], ["type", "radio", 3, "checked"]], template: function MobileFilterComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "img", 2);
+            i0.ɵɵlistener("click", function MobileFilterComponent_Template_img_click_2_listener() { return ctx.closeFilters.emit(); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(3, "span");
+            i0.ɵɵtext(4);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(5, "div", 3)(6, "div", 4);
+            i0.ɵɵtemplate(7, MobileFilterComponent_ng_container_7_Template, 6, 6, "ng-container", 5);
+            i0.ɵɵpipe(8, "keyvalue");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(9, "div", 6)(10, "div", 7)(11, "span");
+            i0.ɵɵtext(12);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(13, "div", 8);
+            i0.ɵɵtemplate(14, MobileFilterComponent_ng_container_14_Template, 6, 6, "ng-container", 5);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(15, "div", 9)(16, "button", 10);
+            i0.ɵɵlistener("click", function MobileFilterComponent_Template_button_click_16_listener() { return ctx.clearFilters.emit(); });
+            i0.ɵɵtext(17);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(18, "button", 11);
+            i0.ɵɵlistener("click", function MobileFilterComponent_Template_button_click_18_listener() { return ctx.applyFilters.emit(ctx.localFilterOptions); });
+            i0.ɵɵtext(19);
+            i0.ɵɵelementEnd()()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("src", ctx.backIcon, i0.ɵɵsanitizeUrl);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate(ctx.headerName);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind2(8, 7, ctx.localFilterOptions, ctx.originalOrder));
+            i0.ɵɵadvance(5);
+            i0.ɵɵtextInterpolate(ctx.localFilterOptions[ctx.currentSelectedItem] == null ? null : ctx.localFilterOptions[ctx.currentSelectedItem].name);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngForOf", ctx.localFilterOptions[ctx.currentSelectedItem] == null ? null : ctx.localFilterOptions[ctx.currentSelectedItem].options);
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate1(" ", ctx.clearBtnName, " ");
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate1(" ", ctx.applyBtnName, " ");
+        } }, dependencies: [i1.NgForOf, i1.NgIf, i1.NgStyle, i2.ButtonDirective, i3.CheckboxComponent, i1.KeyValuePipe], styles: [".display-flex[_ngcontent-%COMP%]{display:flex}.filters-container[_ngcontent-%COMP%]{position:absolute;inset:0;background-color:#fff;cursor:default}.filters-container[_ngcontent-%COMP%]   *[_ngcontent-%COMP%]{font-family:Lato}.filters-container[_ngcontent-%COMP%]   .head[_ngcontent-%COMP%]{height:56px;border-bottom:1px solid #E0E0E0;justify-content:flex-start;align-items:center;padding:0 16px;gap:12px}.filters-container[_ngcontent-%COMP%]   .head[_ngcontent-%COMP%]   img[_ngcontent-%COMP%]{cursor:pointer}.filters-container[_ngcontent-%COMP%]   .head[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{font-weight:700;font-size:17px;line-height:24px;letter-spacing:.2px}.filters-container[_ngcontent-%COMP%]   .body[_ngcontent-%COMP%]{height:calc(100vh - 129px)}.filters-container[_ngcontent-%COMP%]   .body[_ngcontent-%COMP%]   .filters[_ngcontent-%COMP%]{width:120px;border-right:1px solid #E0E0E0;flex-shrink:0}.filters-container[_ngcontent-%COMP%]   .body[_ngcontent-%COMP%]   .filters[_ngcontent-%COMP%]   .filter[_ngcontent-%COMP%]{height:56px;padding:0 16px;border-bottom:1px solid #E0E0E0;align-items:center;font-size:15px;justify-content:space-between;position:relative}.filters-container[_ngcontent-%COMP%]   .body[_ngcontent-%COMP%]   .filters[_ngcontent-%COMP%]   .filter[_ngcontent-%COMP%]   .filterName[_ngcontent-%COMP%]{color:#6a737d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.filters-container[_ngcontent-%COMP%]   .body[_ngcontent-%COMP%]   .filters[_ngcontent-%COMP%]   .filter[_ngcontent-%COMP%]   .selectedNumber[_ngcontent-%COMP%]{background-color:#f5f5f5;height:24px;width:auto;font-size:14px;min-width:24px;border-radius:50%;text-align:center;line-height:24px;padding:0 8px}.filters-container[_ngcontent-%COMP%]   .body[_ngcontent-%COMP%]   .filters[_ngcontent-%COMP%]   .filter[_ngcontent-%COMP%]   .highlightor[_ngcontent-%COMP%]{position:absolute;left:0;height:100%;width:4px;background-color:#0937b2}.filters-container[_ngcontent-%COMP%]   .body[_ngcontent-%COMP%]   .filter-options-container[_ngcontent-%COMP%]{padding:16px 16px 0 12px;width:calc(100% - 56px);overflow-x:hidden}.filters-container[_ngcontent-%COMP%]   .body[_ngcontent-%COMP%]   .filter-options-container[_ngcontent-%COMP%]   *[_ngcontent-%COMP%]{color:#181f33}.filters-container[_ngcontent-%COMP%]   .body[_ngcontent-%COMP%]   .filter-options-container[_ngcontent-%COMP%]   .filter-options-title[_ngcontent-%COMP%]{text-transform:uppercase;font-size:12px;line-height:16px;letter-spacing:.25px}.filters-container[_ngcontent-%COMP%]   .body[_ngcontent-%COMP%]   .filter-options-container[_ngcontent-%COMP%]   .filter-options-title[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{color:#6a737d}.filters-container[_ngcontent-%COMP%]   .body[_ngcontent-%COMP%]   .filter-options-container[_ngcontent-%COMP%]   .filter-options[_ngcontent-%COMP%]{margin-top:16px;overflow-y:scroll;height:calc(100% - 32px)}.filters-container[_ngcontent-%COMP%]   .body[_ngcontent-%COMP%]   .filter-options-container[_ngcontent-%COMP%]   .filter-options[_ngcontent-%COMP%]   .filter-option[_ngcontent-%COMP%]{height:48px;border-bottom:1px solid #E0E0E0;align-items:center;padding-left:16px;gap:13px;font-size:15px}.filters-container[_ngcontent-%COMP%]   .body[_ngcontent-%COMP%]   .filter-options-container[_ngcontent-%COMP%]   .filter-options[_ngcontent-%COMP%]   .filter-option[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.filters-container[_ngcontent-%COMP%]   .body[_ngcontent-%COMP%]   .filter-options-container[_ngcontent-%COMP%]   .filter-options[_ngcontent-%COMP%]   .filter-option[_ngcontent-%COMP%]   input[type=radio][_ngcontent-%COMP%]{accent-color:#0937B2;width:20px;height:20px}.filters-container[_ngcontent-%COMP%]   .footer[_ngcontent-%COMP%]{height:73px;border-top:1px solid #E0E0E0;padding:0 16px;align-items:center;justify-content:space-between}.filters-container[_ngcontent-%COMP%]   .footer[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{width:160px}"] }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MobileFilterComponent, [{
+        type: Component,
+        args: [{ selector: 'mis-mobile-filter', template: "<div class=\"filters-container\">\n    <div class=\"head display-flex\">\n        <img (click)=\"closeFilters.emit();\" [src]=\"backIcon\" alt=\"\">\n        <span>{{headerName}}</span>\n    </div>\n    <div class=\"body display-flex\">\n        <div class=\"filters\">\n            <ng-container *ngFor=\"let filter of localFilterOptions | keyvalue : originalOrder\">\n                <div class=\"filter display-flex\" (click)=\"currentSelectedItem = filter.key\">\n                    <span class=\"filterName\" [ngStyle]=\"{'color': filter.key === currentSelectedItem ? '#0937B2' : '#181F33'}\">{{ localFilterOptions[filter.key]?.name }}</span>\n                    <span class=\"selectedNumber\" *ngIf=\"localFilterOptions[filter.key]['multiSelect'] && localFilterOptions[filter.key]['noOfSelectedItems'] > 0\">{{ localFilterOptions[filter.key]['noOfSelectedItems'] }}</span>\n                    <div class=\"highlightor\" *ngIf=\"filter.key === currentSelectedItem\"></div>\n                </div>\n            </ng-container>\n        </div>\n        <div class=\"filter-options-container\">\n            <div class=\"filter-options-title\">\n                <span>{{ localFilterOptions[currentSelectedItem]?.name }}</span>\n            </div>\n            <div class=\"filter-options\">\n                <ng-container *ngFor=\"let option of localFilterOptions[currentSelectedItem]?.options; let i = index\">\n                    <div class=\"filter-option display-flex\" (click)=\"toggleFilter(option.value, option.selected)\" >\n                        <mis-checkbox *ngIf=\"localFilterOptions[currentSelectedItem].multiSelect\" [checked]=\"option.selected\"></mis-checkbox>\n                        <input type=\"radio\" *ngIf=\"!localFilterOptions[currentSelectedItem].multiSelect\" [checked]=\"option.selected\">\n                        <span [ngStyle]=\"{'color': option.selected ? '#181F33' : '#6A737D'}\">{{ option.label }}</span>\n                    </div>\n                </ng-container>\n            </div>\n        </div>\n    </div>\n    <div class=\"footer display-flex\">\n        <button\n            mis-button\n            size=\"md\"\n            type=\"text\"\n            (click)=\"clearFilters.emit()\">\n            {{clearBtnName}}\n        </button>\n        <button\n            mis-button\n            size=\"md\"\n            type=\"primary\"\n            (click)=\"applyFilters.emit(localFilterOptions)\"\n            >\n            {{applyBtnName}}\n        </button>\n    </div>\n</div>\n", styles: [".display-flex{display:flex}.filters-container{position:absolute;inset:0;background-color:#fff;cursor:default}.filters-container *{font-family:Lato}.filters-container .head{height:56px;border-bottom:1px solid #E0E0E0;justify-content:flex-start;align-items:center;padding:0 16px;gap:12px}.filters-container .head img{cursor:pointer}.filters-container .head span{font-weight:700;font-size:17px;line-height:24px;letter-spacing:.2px}.filters-container .body{height:calc(100vh - 129px)}.filters-container .body .filters{width:120px;border-right:1px solid #E0E0E0;flex-shrink:0}.filters-container .body .filters .filter{height:56px;padding:0 16px;border-bottom:1px solid #E0E0E0;align-items:center;font-size:15px;justify-content:space-between;position:relative}.filters-container .body .filters .filter .filterName{color:#6a737d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.filters-container .body .filters .filter .selectedNumber{background-color:#f5f5f5;height:24px;width:auto;font-size:14px;min-width:24px;border-radius:50%;text-align:center;line-height:24px;padding:0 8px}.filters-container .body .filters .filter .highlightor{position:absolute;left:0;height:100%;width:4px;background-color:#0937b2}.filters-container .body .filter-options-container{padding:16px 16px 0 12px;width:calc(100% - 56px);overflow-x:hidden}.filters-container .body .filter-options-container *{color:#181f33}.filters-container .body .filter-options-container .filter-options-title{text-transform:uppercase;font-size:12px;line-height:16px;letter-spacing:.25px}.filters-container .body .filter-options-container .filter-options-title span{color:#6a737d}.filters-container .body .filter-options-container .filter-options{margin-top:16px;overflow-y:scroll;height:calc(100% - 32px)}.filters-container .body .filter-options-container .filter-options .filter-option{height:48px;border-bottom:1px solid #E0E0E0;align-items:center;padding-left:16px;gap:13px;font-size:15px}.filters-container .body .filter-options-container .filter-options .filter-option span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.filters-container .body .filter-options-container .filter-options .filter-option input[type=radio]{accent-color:#0937B2;width:20px;height:20px}.filters-container .footer{height:73px;border-top:1px solid #E0E0E0;padding:0 16px;align-items:center;justify-content:space-between}.filters-container .footer button{width:160px}\n"] }]
+    }], () => [], { currentSelectedItem: [{
+            type: Input
+        }], filterOptions: [{
+            type: Input
+        }], backIcon: [{
+            type: Input
+        }], headerName: [{
+            type: Input
+        }], applyBtnName: [{
+            type: Input
+        }], clearBtnName: [{
+            type: Input
+        }], closeFilters: [{
+            type: Output
+        }], clearFilters: [{
+            type: Output
+        }], applyFilters: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MobileFilterComponent, { className: "MobileFilterComponent" }); })();
+
+class MobileFilterModule {
+    static { this.ɵfac = function MobileFilterModule_Factory(t) { return new (t || MobileFilterModule)(); }; }
+    static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: MobileFilterModule }); }
+    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule, ButtonModule, CheckboxModule] }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MobileFilterModule, [{
+        type: NgModule,
+        args: [{
+                declarations: [MobileFilterComponent],
+                imports: [CommonModule, ButtonModule, CheckboxModule],
+                exports: [MobileFilterComponent]
+            }]
+    }], null, null); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MobileFilterModule, { declarations: [MobileFilterComponent], imports: [CommonModule, ButtonModule, CheckboxModule], exports: [MobileFilterComponent] }); })();
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MobileFilterComponent, MobileFilterModule };
+//# sourceMappingURL=mis-crystal-design-system-mobile-filter.mjs.map