npm - mis-crystal-design-system - Versions diffs - 18.0.24 → 18.1.0-signal-test - Mend

mis-crystal-design-system 18.0.24 → 18.1.0-signal-test

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (163) hide show

package/fesm2022/mis-crystal-design-system-input-stepper.mjs CHANGED Viewed

@@ -1,93 +1,83 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
+import { input, signal, EventEmitter, computed, effect, Component, Output, NgModule } from '@angular/core';
 import * as i1 from '@angular/platform-browser';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 const _c0 = a0 => ({ "max-width": a0 });
-const _c1 = a0 => ({ "cursor": a0 });
-const _c2 = a0 => ({ "disabled": a0 });
+const _c1 = a0 => ({ "disabled": a0 });
+const _c2 = a0 => ({ cursor: a0 });
 class InputStepperComponent {
     constructor(sanitizer) {
         this.sanitizer = sanitizer;
-        this.value = 1;
-        this.width = '200px';
-        this.minLimit = 0;
-        this.maxLimit = 2;
+        // Input signals
+        this.value = input(1);
+        this.width = input('200px');
+        this.minLimit = input(0);
+        this.maxLimit = input(2);
+        // Internal state
+        this.currentValue = signal(0);
         this.valueChange = new EventEmitter();
+        // Computed states
+        this.canIncrement = computed(() => this.currentValue() < this.maxLimit());
+        this.canDecrement = computed(() => this.currentValue() > this.minLimit());
         this.svgMinusIcon = this.sanitizer.bypassSecurityTrustHtml(`
       <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path fill-rule="evenodd" clip-rule="evenodd" d="M3 9.11705C3 8.63819 3.3833 8.25 3.85612 8.25H14.1439C14.6167 8.25 15 8.63819 15 9.11705C15 9.59591 14.6167 9.9841 14.1439 9.9841H3.85612C3.3833 9.9841 3 9.59591 3 9.11705Z" fill="#0937B2"/>
       </svg>`);
         this.svgPlusIcon = this.sanitizer.bypassSecurityTrustHtml(`
-        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path fill-rule="evenodd" clip-rule="evenodd" d="M9.85677 3.86705C9.85677 3.38819 9.47347 3 9.00066 3C8.52784 3 8.14454 3.38819 8.14454 3.86705V8.13159H3.85612C3.3833 8.13159 3 8.51978 3 8.99864C3 9.4775 3.3833 9.8657 3.85612 9.8657H8.14454V14.1329C8.14454 14.6118 8.52784 15 9.00066 15C9.47347 15 9.85677 14.6118 9.85677 14.1329V9.8657H14.1439C14.6167 9.8657 15 9.4775 15 8.99864C15 8.51978 14.6167 8.13159 14.1439 8.13159H9.85677V3.86705Z" fill="#0937B2"/>
-        </svg>`);
+      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M9.85677 3.86705C9.85677 3.38819 9.47347 3 9.00066 3C8.52784 3 8.14454 3.38819 8.14454 3.86705V8.13159H3.85612C3.3833 8.13159 3 8.51978 3 8.99864C3 9.4775 3.3833 9.8657 3.85612 9.8657H8.14454V14.1329C8.14454 14.6118 8.52784 15 9.00066 15C9.47347 15 9.85677 14.6118 9.85677 14.1329V9.8657H14.1439C14.6167 9.8657 15 9.4775 15 8.99864C15 8.51978 14.6167 8.13159 14.1439 8.13159H9.85677V3.86705Z" fill="#0937B2"/>
+      </svg>`);
+        // Keep internal value in sync with input
+        effect(() => {
+            const inputVal = this.value();
+            if (inputVal !== undefined) {
+                this.currentValue.set(inputVal);
+            }
+        }, { allowSignalWrites: true });
     }
     increment() {
-        if (this.value === this.maxLimit) {
-            this.emitValueChange();
-            return;
+        if (this.canIncrement()) {
+            this.currentValue.update(v => v + 1);
+            this.valueChange.emit(this.currentValue());
         }
-        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();
+        if (this.canDecrement()) {
+            this.currentValue.update(v => v - 1);
+            this.valueChange.emit(this.currentValue());
         }
     }
-    emitValueChange() {
-        console.log("value change", this.value);
-        this.valueChange.emit(this.value);
-    }
     static { this.ɵfac = function InputStepperComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || InputStepperComponent)(i0.ɵɵdirectiveInject(i1.DomSanitizer)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: InputStepperComponent, selectors: [["mis-input-stepper"]], inputs: { value: "value", width: "width", minLimit: "minLimit", maxLimit: "maxLimit" }, outputs: { valueChange: "valueChange" }, decls: 6, vars: 18, consts: [[1, "nudger", 3, "ngStyle"], [3, "click", "ngStyle"], [3, "innerHtml", "ngClass"], ["type", "text", "readonly", "", 3, "input", "value"]], template: function InputStepperComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: InputStepperComponent, selectors: [["mis-input-stepper"]], inputs: { value: [1, "value"], width: [1, "width"], minLimit: [1, "minLimit"], maxLimit: [1, "maxLimit"] }, outputs: { valueChange: "valueChange" }, decls: 6, vars: 20, consts: [[1, "nudger", 3, "ngStyle"], [3, "click", "disabled", "ngClass", "ngStyle"], [3, "innerHtml"], ["type", "text", "readonly", "", 3, "value"]], template: function InputStepperComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "button", 1);
             i0.ɵɵlistener("click", function InputStepperComponent_Template_button_click_1_listener() { return ctx.decrement(); });
             i0.ɵɵelement(2, "span", 2);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(3, "input", 3);
-            i0.ɵɵlistener("input", function InputStepperComponent_Template_input_input_3_listener($event) { return ctx.onInputChange($event.target.value); });
-            i0.ɵɵelementEnd();
+            i0.ɵɵelement(3, "input", 3);
             i0.ɵɵelementStart(4, "button", 1);
             i0.ɵɵlistener("click", function InputStepperComponent_Template_button_click_4_listener() { return ctx.increment(); });
             i0.ɵɵelement(5, "span", 2);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(8, _c0, ctx.width));
+            i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(10, _c0, ctx.width()));
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(10, _c1, ctx.value === ctx.minLimit ? "not-allowed" : "pointer"));
+            i0.ɵɵproperty("disabled", !ctx.canDecrement())("ngClass", i0.ɵɵpureFunction1(12, _c1, !ctx.canDecrement()))("ngStyle", i0.ɵɵpureFunction1(14, _c2, ctx.canDecrement() ? "pointer" : "not-allowed"));
             i0.ɵɵadvance();
-            i0.ɵɵproperty("innerHtml", ctx.svgMinusIcon, i0.ɵɵsanitizeHtml)("ngClass", i0.ɵɵpureFunction1(12, _c2, ctx.value === ctx.minLimit));
+            i0.ɵɵproperty("innerHtml", ctx.svgMinusIcon, i0.ɵɵsanitizeHtml);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("value", ctx.value);
+            i0.ɵɵproperty("value", ctx.currentValue());
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(14, _c1, ctx.value === ctx.maxLimit ? "not-allowed" : "pointer"));
+            i0.ɵɵproperty("disabled", !ctx.canIncrement())("ngClass", i0.ɵɵpureFunction1(16, _c1, !ctx.canIncrement()))("ngStyle", i0.ɵɵpureFunction1(18, _c2, ctx.canIncrement() ? "pointer" : "not-allowed"));
             i0.ɵɵadvance();
-            i0.ɵɵproperty("innerHtml", ctx.svgPlusIcon, i0.ɵɵsanitizeHtml)("ngClass", i0.ɵɵpureFunction1(16, _c2, ctx.value === ctx.maxLimit));
+            i0.ɵɵproperty("innerHtml", ctx.svgPlusIcon, i0.ɵɵsanitizeHtml);
         } }, dependencies: [i2.NgClass, i2.NgStyle], styles: [".nudger[_ngcontent-%COMP%]{display:flex;align-items:center;justify-content:center;width:100%;border:1px solid #0937B2;border-radius:4px}button[_ngcontent-%COMP%]{cursor:pointer;border:none;background-color:#fff;transition:background-color .3s;color:#0937b2}button[_ngcontent-%COMP%]:hover{background-color:#fff}input[_ngcontent-%COMP%]{width:40%;text-align:center;padding:.5em 1em;color:#0937b2;border:none}@media screen and (max-width: 600px){.nudger[_ngcontent-%COMP%]{max-width:150px}}.disabled[_ngcontent-%COMP%]{opacity:.6;cursor:not-allowed}.nudger[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{display:inline-block;width:18px;height:18px}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InputStepperComponent, [{
         type: Component,
-        args: [{ selector: 'mis-input-stepper', template: "<div class=\"nudger\" [ngStyle]=\"{'max-width': width }\">\n    <button (click)=\"decrement()\" [ngStyle]=\"{'cursor': value === minLimit ? 'not-allowed' : 'pointer'}\">\n        <span [innerHtml]=\"svgMinusIcon\" [ngClass]=\"{'disabled': value === minLimit}\"></span>\n    </button>\n    <input type=\"text\" [value]=\"value\" (input)=\"onInputChange($event.target.value)\" readonly>\n    <button (click)=\"increment()\" [ngStyle]=\"{'cursor': value === maxLimit ? 'not-allowed' : 'pointer'}\">\n        <span [innerHtml]=\"svgPlusIcon\" [ngClass]=\"{'disabled': value === maxLimit}\"></span>\n    </button>\n</div>\n  ", styles: [".nudger{display:flex;align-items:center;justify-content:center;width:100%;border:1px solid #0937B2;border-radius:4px}button{cursor:pointer;border:none;background-color:#fff;transition:background-color .3s;color:#0937b2}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}.nudger span{display:inline-block;width:18px;height:18px}\n"] }]
-    }], () => [{ type: i1.DomSanitizer }], { value: [{
-            type: Input
-        }], width: [{
-            type: Input
-        }], minLimit: [{
-            type: Input
-        }], maxLimit: [{
-            type: Input
-        }], valueChange: [{
+        args: [{ selector: 'mis-input-stepper', template: "<div class=\"nudger\" [ngStyle]=\"{ 'max-width': width() }\">\n  <!-- Decrement Button -->\n  <button \n    (click)=\"decrement()\" \n    [disabled]=\"!canDecrement()\" \n    [ngClass]=\"{ 'disabled': !canDecrement() }\"\n    [ngStyle]=\"{ cursor: canDecrement() ? 'pointer' : 'not-allowed' }\"\n  >\n    <span [innerHtml]=\"svgMinusIcon\"></span>\n  </button>\n\n  <!-- Input Display -->\n  <input \n    type=\"text\" \n    [value]=\"currentValue()\" \n    readonly\n  >\n\n  <!-- Increment Button -->\n  <button \n    (click)=\"increment()\" \n    [disabled]=\"!canIncrement()\" \n    [ngClass]=\"{ 'disabled': !canIncrement() }\"\n    [ngStyle]=\"{ cursor: canIncrement() ? 'pointer' : 'not-allowed' }\"\n  >\n    <span [innerHtml]=\"svgPlusIcon\"></span>\n  </button>\n</div>", styles: [".nudger{display:flex;align-items:center;justify-content:center;width:100%;border:1px solid #0937B2;border-radius:4px}button{cursor:pointer;border:none;background-color:#fff;transition:background-color .3s;color:#0937b2}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}.nudger span{display:inline-block;width:18px;height:18px}\n"] }]
+    }], () => [{ type: i1.DomSanitizer }], { valueChange: [{
             type: Output
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InputStepperComponent, { className: "InputStepperComponent" }); })();

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

	@@ -1 +1 @@
1	- {"version":3,"file":"mis-crystal-design-system-input-stepper.mjs","sources":["../../../projects/mis-components/input-stepper/input-stepper/input-stepper.component.ts","../../../projects/mis-components/input-stepper/input-stepper/input-stepper.component.html","../../../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';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\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 svgMinusIcon: SafeHtml;\n svgPlusIcon: SafeHtml;\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(private sanitizer: DomSanitizer) {\n this.svgMinusIcon = this.sanitizer.bypassSecurityTrustHtml(`\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3 9.11705C3 8.63819 3.3833 8.25 3.85612 8.25H14.1439C14.6167 8.25 15 8.63819 15 9.11705C15 9.59591 14.6167 9.9841 14.1439 9.9841H3.85612C3.3833 9.9841 3 9.59591 3 9.11705Z\" fill=\"#0937B2\"/>\n </svg>`);\n this.svgPlusIcon = this.sanitizer.bypassSecurityTrustHtml(`\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9.85677 3.86705C9.85677 3.38819 9.47347 3 9.00066 3C8.52784 3 8.14454 3.38819 8.14454 3.86705V8.13159H3.85612C3.3833 8.13159 3 8.51978 3 8.99864C3 9.4775 3.3833 9.8657 3.85612 9.8657H8.14454V14.1329C8.14454 14.6118 8.52784 15 9.00066 15C9.47347 15 9.85677 14.6118 9.85677 14.1329V9.8657H14.1439C14.6167 9.8657 15 9.4775 15 8.99864C15 8.51978 14.6167 8.13159 14.1439 8.13159H9.85677V3.86705Z\" fill=\"#0937B2\"/>\n </svg>`);\n }\n\n ~~increment~~() {\n ~~if(~~this.value ~~===~~ ~~this.maxLimit~~){\n this.~~emitValueChange~~();\n ~~return;\n~~ }\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","<div class=\"nudger\" [ngStyle]=\"{'max-width': width }\">\n <button (click)=\"decrement()\" [~~ngStyle~~]=\"{'~~cursor~~': ~~value~~ ~~===~~ ~~minLimit~~ ? '~~not-allowed~~' : '~~pointer~~'}\">\n <span [innerHtml]=\"svgMinusIcon\" ~~[ngClass]=\"{'disabled': value === minLimit}\"~~></span>\n </button>\n <input type=\"text\" [value]=\"~~value\"~~ (~~input~~)~~=\"onInputChange($event.target.value)~~\" readonly>\n <button (click)=\"increment()\" [~~ngStyle~~]=\"{'~~cursor~~': ~~value~~ ~~===~~ ~~maxLimit~~ ? '~~not-allowed~~' : '~~pointer~~'}\">\n <span [innerHtml]=\"svgPlusIcon\" ~~[ngClass]=\"{'disabled': value === maxLimit}\"~~></span>\n </button>\n</div~~>\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":";;;;;;;;;MAQa,qBAAqB,CAAA;~~AAShC~~,IAAA,WAAA,CAAoB,SAAuB,EAAA;QAAvB,IAAS,CAAA,SAAA,GAAT,SAAS,CAAc~~;QANlC~~,~~IAAK~~,CAAA,~~KAAA~~,~~GAAW~~,CAAC,CAAC;~~QAClB~~,~~IAAK~~,CAAA,~~KAAA~~,~~GAAY~~,OAAO,CAAC;~~QACzB~~,~~IAAQ~~,CAAA,~~QAAA~~,~~GAAY~~,CAAC,CAAC;~~QACtB~~,~~IAAQ~~,CAAA,QAAA,~~GAAW~~,CAAC,CAAC;~~AACpB~~,QAAA,IAAA,CAAA,WAAW,~~GAAyB~~,IAAI,YAAY,EAAU,CAAC;~~QAGvE~~,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,uBAAuB,CAAC,CAAA;;;AAGlD,YAAA,CAAA,CAAC,CAAC;~~QACX~~,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,uBAAuB,CAAC,CAAA;;;~~AAG/C~~,~~cAAA~~,CAAA,CAAC,CAAC~~;KACb;IAEF~~,~~SAAS~~,~~GAAA~~;~~QACP~~,~~IAAG~~,IAAI,CAAC,KAAK,~~KAAK~~,IAAI,~~CAAC,~~QAAQ,~~EAAC~~;~~YAC9B~~,IAAI,CAAC,~~eAAe~~,~~EAAE~~,CAAC~~;YACvB~~,~~OAAO;SACR;QACD~~,~~IAAI~~,CAAC,~~KAAK~~,EAAE,~~CAAC;QACb~~,~~IAAI~~,~~CAAC~~,~~eAAe~~,EAAE,CAAC;~~KACxB~~;IAED,SAAS,GAAA;AACP,QAAA,IAAI,IAAI,CAAC,~~KAAK~~,~~GAAG~~,~~CAAC,~~EAAE;~~YAClB~~,IAAI,CAAC,~~KAAK~~,~~EAAE,~~CAAC~~;YACb~~,~~IAAI~~,CAAC,~~eAAe~~,~~EAAE~~,CAAC~~;SACxB;KACF;AAED~~,~~IAAA~~,~~aAAa~~,CAAC,~~QAAgB,EAAA~~;~~QAC5B~~,~~MAAM~~,WAAW,~~GAAG~~,~~QAAQ~~,CAAC,~~QAAQ~~,~~EAAE~~,EAAE,CAAC,CAAC;~~AAC3C~~,QAAA,IAAI,~~CAAC~~,~~KAAK,~~CAAC,~~WAAW~~,~~CAAC~~,EAAE;AACvB,YAAA,IAAI,CAAC,~~KAAK~~,~~GAAG,WAAW,~~CAAC~~;YACzB~~,~~IAAI~~,CAAC,~~eAAe,EAAE,~~CAAC~~;SACxB;KACF;IAEO~~,~~eAAe~~,~~GAAA;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~~;~~sHA/CU~~,qBAAqB,EAAA,EAAA,CAAA,iBAAA,CAAA,EAAA,CAAA,YAAA,CAAA,CAAA,CAAA,EAAA,CAAA,EAAA;oEAArB,qBAAqB,EAAA,SAAA,EAAA,CAAA,CAAA,mBAAA,CAAA,CAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,KAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,CAAA,CAAA,CAAA,EAAA,QAAA,EAAA,CAAA,EAAA,SAAA,CAAA,EAAA,CAAA,CAAA,EAAA,OAAA,EAAA,SAAA,CAAA,EAAA,CAAA,CAAA,EAAA,WAAA,~~EAAA,SAAA,~~CAAA,EAAA,CAAA,MAAA,EAAA,MAAA,EAAA,UAAA,EAAA,EAAA,EAAA,CAAA,EAAA,OAAA,~~EAAA,OAAA,~~CAAA,CAAA,EAAA,QAAA,EAAA,SAAA,8BAAA,CAAA,EAAA,EAAA,GAAA,EAAA,EAAA,IAAA,EAAA,GAAA,CAAA,EAAA;~~ACP9B~~,~~YADJ~~,~~8BAAsD~~,~~CACmD~~,CAAA,EAAA,QAAA,EAAA,CAAA,CAAA,CAAA;~~AAA7F~~,YAAA,EAAA,CAAA,UAAA,CAAA,OAAA,EAAA,SAAA,sDAAA,GAAA,EAAA,OAAS,eAAW,CAAC,EAAA,CAAA,CAAA;~~YACzB~~,~~EAAqF~~,CAAA,SAAA,CAAA,CAAA,EAAA,MAAA,EAAA,CAAA,CAAA,CAAA;~~YACzF~~,EAAS,CAAA,YAAA,EAAA,CAAA;~~YACT~~,~~EAAyF~~,CAAA,~~cAAA~~,CAAA,CAAA,EAAA,OAAA,EAAA,CAAA,CAAA,CAAA;~~AAAtD~~,~~YAAA~~,~~EAAA,~~CAAA,~~UAAA,CAAA,OAAA,EAAA,SAAA,qDAAA,CAAA,MAAA,EAAA,EAAA,OAAS,sCAAkC,CAAC,EAAA,CAAA,CAAA;YAA/E,EAAyF,CAAA,YAAA,EAAA,CAAA;YACzF,EAAqG,CAAA,~~cAAA,CAAA,CAAA,EAAA,QAAA,EAAA,CAAA,CAAA,CAAA;~~AAA7F~~,YAAA,EAAA,CAAA,UAAA,CAAA,OAAA,EAAA,SAAA,sDAAA,GAAA,EAAA,OAAS,eAAW,CAAC,EAAA,CAAA,CAAA;~~YACzB~~,~~EAAoF~~,CAAA,SAAA,CAAA,CAAA,EAAA,MAAA,EAAA,CAAA,CAAA,CAAA;~~AAE5F~~,~~YADI~~,iBAAS,~~EACP~~,CAAA;;~~YARc~~,~~EAAiC~~,CAAA,UAAA,CAAA,SAAA,EAAA,EAAA,CAAA,eAAA,CAAA,~~CAAA~~,EAAA,GAAA,EAAA,GAAA,CAAA,KAAA,CAAA,CAAA,CAAA;~~YACnB~~,~~EAAsE~~,CAAA,SAAA,EAAA,CAAA;~~YAAtE~~,~~EAAsE~~,CAAA,UAAA,CAAA,~~SAAA~~,EAAA,~~EAAA,~~CAAA,~~eAAA~~,CAAA,~~EAAA~~,EAAA,~~GAAA~~,EAAA,~~GAAA~~,CAAA,~~KAAA~~,~~KAAA,GAAA,~~CAAA,~~QAAA~~,~~GAAA~~,~~aAAA,~~GAAA,~~SAAA~~,CAAA,~~CAAA~~,CAAA~~;YAC1F~~,~~EAA0B~~,~~CAAA,SAAA,~~EAAA,CAAA~~;AAAC~~,~~YAA3B,+DAA0B~~,~~CAA6C~~,SAAA,EAAA,EAAA,CAAA,eAAA,CAAA,EAAA,EAAA,GAAA,EAAA,GAAA,CAAA,~~KAAA~~,~~KAAA~~,GAAA,~~CAAA~~,~~QAAA~~,CAAA,CAAA,CAAA;~~YAE9D~~,~~EAAe~~,CAAA,SAAA,EAAA,CAAA;~~YAAf~~,~~EAAe~~,CAAA,UAAA,CAAA,~~OAAA~~,EAAA,GAAA,CAAA,~~KAAA~~,CAAA,CAAA;~~YACJ~~,~~EAAsE~~,CAAA,SAAA,EAAA,CAAA;~~YAAtE~~,~~EAAsE~~,CAAA,UAAA,CAAA,~~SAAA~~,EAAA,EAAA,CAAA,~~eAAA~~,CAAA,~~EAAA~~,EAAA,~~GAAA~~,~~EAAA~~,~~GAAA~~,CAAA,~~KAAA~~,~~KAAA~~,GAAA,CAAA,~~QAAA~~,~~GAAA~~,~~aAAA~~,~~GAAA~~,SAAA,CAAA,CAAA,CAAA~~;YAC1F~~,~~EAAyB~~,CAAA,~~SAAA~~,EAAA,CAAA~~;AAAC~~,~~YAA1B~~,~~8DAAyB~~,~~CAA6C,~~SAAA,EAAA,EAAA,CAAA,eAAA,CAAA,EAAA,EAAA,GAAA,EAAA,GAAA,CAAA,~~KAAA~~,~~KAAA~~,GAAA,~~CAAA~~,~~QAAA~~,CAAA,CAAA,CAAA~~;;;iFDEvE~~,~~qBAAqB~~,EAAA,CAAA;~~cALjC~~,~~SAAS;2BACE~~,~~mBAAmB~~,~~EAAA~~,~~QAAA~~,EAAA,~~8mBAAA~~,~~EAAA~~,~~MAAA~~,EAAA,CAAA,~~8eAAA~~,CAAA,~~EAAA,~~CAAA~~;6CAOpB~~,~~KAAK~~,EAAA,CAAA;~~kBAAb~~,~~KAAK~~;~~YACG~~,~~KAAK~~,EAAA,~~CAAA;kBAAb~~,~~KAAK;YACG~~,~~QAAQ~~,EAAA,CAAA~~;kBAAhB~~,~~KAAK;YACG~~,~~QAAQ~~,EAAA,CAAA;~~kBAAhB~~,~~KAAK;YACI,~~WAAW,EAAA,CAAA;kBAApB,MAAM;;~~kFAPI~~,qBAAqB,EAAA,EAAA,SAAA,EAAA,uBAAA,EAAA,CAAA,CAAA,EAAA,GAAA;;MESrB,kBAAkB,CAAA;mHAAlB,kBAAkB,GAAA,CAAA,EAAA,CAAA,EAAA;mEAAlB,kBAAkB,EAAA,CAAA,CAAA,EAAA;uEAN3B,YAAY,CAAA,EAAA,CAAA,CAAA,EAAA;;iFAMH,kBAAkB,EAAA,CAAA;cAX9B,QAAQ;AAAC,QAAA,IAAA,EAAA,CAAA;AACR,gBAAA,YAAY,EAAE;oBACZ,qBAAqB;AACtB,iBAAA;AACD,gBAAA,OAAO,EAAE;oBACP,YAAY;AACb,iBAAA;AACD,gBAAA,OAAO,EAAE;oBACP,qBAAqB;AACtB,iBAAA;AACF,aAAA,CAAA;;AACY,CAAA,YAAA,EAAA,CAAA,OAAA,SAAA,KAAA,WAAA,IAAA,SAAA,KAAA,EAAA,CAAA,kBAAA,CAAA,kBAAkB,EAT3B,EAAA,YAAA,EAAA,CAAA,qBAAqB,CAGrB,EAAA,OAAA,EAAA,CAAA,YAAY,aAGZ,qBAAqB,CAAA,EAAA,CAAA,CAAA,EAAA,GAAA;;ACdzB;;AAEG;;;;"}
1	+ {"version":3,"file":"mis-crystal-design-system-input-stepper.mjs","sources":["../../../projects/mis-components/input-stepper/input-stepper/input-stepper.component.ts","../../../projects/mis-components/input-stepper/input-stepper/input-stepper.component.html","../../../projects/mis-components/input-stepper/input-stepper.module.ts","../../../projects/mis-components/input-stepper/mis-crystal-design-system-input-stepper.ts"],"sourcesContent":["import { Component, Output, EventEmitter, input, signal, computed, effect } from '@angular/core';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\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 // SVG icons\n svgMinusIcon: SafeHtml;\n svgPlusIcon: SafeHtml;\n\n // Input signals\n readonly value = input<number>(1);\n readonly width = input<string>('200px');\n readonly minLimit = input<number>(0);\n readonly maxLimit = input<number>(2);\n\n // Internal state\n protected currentValue = signal(0);\n\n @Output() valueChange = new EventEmitter<number>();\n\n // Computed states\n canIncrement = computed(() => this.currentValue() < this.maxLimit());\n canDecrement = computed(() => this.currentValue() > this.minLimit());\n\n constructor(private sanitizer: DomSanitizer) {\n this.svgMinusIcon = this.sanitizer.bypassSecurityTrustHtml(`\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3 9.11705C3 8.63819 3.3833 8.25 3.85612 8.25H14.1439C14.6167 8.25 15 8.63819 15 9.11705C15 9.59591 14.6167 9.9841 14.1439 9.9841H3.85612C3.3833 9.9841 3 9.59591 3 9.11705Z\" fill=\"#0937B2\"/>\n </svg>`);\n\n this.svgPlusIcon = this.sanitizer.bypassSecurityTrustHtml(`\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9.85677 3.86705C9.85677 3.38819 9.47347 3 9.00066 3C8.52784 3 8.14454 3.38819 8.14454 3.86705V8.13159H3.85612C3.3833 8.13159 3 8.51978 3 8.99864C3 9.4775 3.3833 9.8657 3.85612 9.8657H8.14454V14.1329C8.14454 14.6118 8.52784 15 9.00066 15C9.47347 15 9.85677 14.6118 9.85677 14.1329V9.8657H14.1439C14.6167 9.8657 15 9.4775 15 8.99864C15 8.51978 14.6167 8.13159 14.1439 8.13159H9.85677V3.86705Z\" fill=\"#0937B2\"/>\n </svg>`);\n\n // Keep internal value in sync with input\n effect(() => {\n const inputVal = this.value();\n if (inputVal !== undefined) {\n this.currentValue.set(inputVal);\n }\n }, { allowSignalWrites: true });\n }\n\n increment() {\n if (this.canIncrement()) {\n this.currentValue.update(v => v + 1);\n this.valueChange.emit(this.currentValue());\n }\n }\n\n decrement() {\n if (this.canDecrement()) {\n this.currentValue.update(v => v - 1);\n this.valueChange.emit(this.currentValue());\n }\n }\n}","<div class=\"nudger\" [ngStyle]=\"{ 'max-width': width() }\">\n <!-- Decrement Button -->\n <button \n (click)=\"decrement()\" \n [disabled]=\"!canDecrement()\" \n [ngClass]=\"{ 'disabled': !canDecrement() }\"\n [ngStyle]=\"{ cursor: canDecrement() ? 'pointer' : 'not-allowed' }\"\n >\n <span [innerHtml]=\"svgMinusIcon\"></span>\n </button>\n\n <!-- Input Display -->\n <input \n type=\"text\" \n [value]=\"currentValue()\" \n readonly\n >\n\n <!-- Increment Button -->\n <button \n (click)=\"increment()\" \n [disabled]=\"!canIncrement()\" \n [ngClass]=\"{ 'disabled': !canIncrement() }\"\n [ngStyle]=\"{ cursor: canIncrement() ? 'pointer' : 'not-allowed' }\"\n >\n <span [innerHtml]=\"svgPlusIcon\"></span>\n </button>\n</div>","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":"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"}

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

@@ -1,46 +1,41 @@
 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 { signal, inject, ElementRef, DestroyRef, Directive, input, contentChild, computed, effect, Component, NgModule } from '@angular/core';
+import { NgControl, FormsModule } from '@angular/forms';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i1 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;
+    constructor() {
+        // Public signal to expose directive state
+        this.validity = signal(true);
+        // Dependencies injected for use with signals
+        this.el = inject(ElementRef);
+        this.control = inject(NgControl, { optional: true, self: true });
+        this.destroyRef = inject(DestroyRef); // Provides a reference for automatic cleanup
+        if (this.control?.control) {
+            this.control.control.statusChanges
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => {
+                this.validity.set(!this.control.control.invalid);
+            });
+        }
     }
     ngOnInit() {
-        this.control?.control?.valueChanges.pipe(takeUntil(this.endObs)).subscribe(() => {
-            this.validityChange.next(!this.control.control?.invalid);
-        });
-        this.el.nativeElement.placeholder += " ";
+        // No need for explicit subscription in ngOnInit with the constructor logic
     }
     ngOnDestroy() {
-        this.endObs.next();
-        this.endObs.complete();
+        // `takeUntilDestroyed` handles cleanup automatically.
     }
-    static { this.ɵfac = function MisInputDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MisInputDirective)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1.NgControl, 10)); }; }
+    static { this.ɵfac = function MisInputDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MisInputDirective)(); }; }
     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); })();
+    }], () => [], 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]"];
@@ -51,34 +46,43 @@ function MisInputComponent_span_7_Template(rf, ctx) { if (rf & 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;
+        // Signal Inputs replacing @Input()
+        this.type = input("floating");
+        this.size = input("sm");
+        this.placeholder = input(undefined);
+        this.noHints = input(false);
+        this.hasError = input(false);
+        this.isMandatory = input(false);
+        // Content Child as a signal
+        this.formInput = contentChild(MisInputDirective);
+        // Use a computed signal to derive the input control from the content child.
+        // This will automatically update when the content child becomes available.
+        this.inputCtrl = computed(() => this.formInput()?.control?.control || null);
+        // Use a computed signal to derive the validity state.
+        // It reads the signal from the directive and updates whenever the directive's signal changes.
+        this.inputValidity = computed(() => this.formInput()?.validity() ?? true);
+        // Computed signal to determine the overall invalid state
+        this.isInvalid = computed(() => !this.inputValidity() || this.hasError());
+        // This effect is now only for a side-effect (modifying a DOM element)
+        // and no longer writes to signals.
+        effect(() => {
+            const input = this.formInput();
+            if (input && this.type() === 'floating') {
+                if (!this.placeholder() && input.el.nativeElement.placeholder) {
+                    input.el.nativeElement.placeholder = '';
+                }
+            }
+        });
     }
     ngOnInit() { }
-    ngOnDestroy() {
-        this.inputSubscription?.unsubscribe();
-    }
+    ngOnDestroy() { }
     static { this.ɵfac = function MisInputComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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);
+            i0.ɵɵcontentQuerySignal(dirIndex, ctx.formInput, 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.ɵɵqueryAdvance();
+        } }, inputs: { type: [1, "type"], size: [1, "size"], placeholder: [1, "placeholder"], noHints: [1, "noHints"], hasError: [1, "hasError"], isMandatory: [1, "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);
@@ -94,33 +98,20 @@ class MisInputComponent {
             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));
+            let tmp_1_0;
+            let tmp_2_0;
+            i0.ɵɵclassMap("input-container " + ctx.size());
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction5(5, _c2, ctx.type() === "rounded", ctx.type() === "floating", ctx.isInvalid(), ctx.noHints(), (tmp_1_0 = ctx.inputCtrl()) == null ? null : tmp_1_0.disabled));
             i0.ɵɵadvance(6);
-            i0.ɵɵtextInterpolate(ctx.placeholder);
+            i0.ɵɵtextInterpolate(ctx.placeholder() || ((tmp_2_0 = ctx.formInput()) == null ? null : tmp_2_0.el.nativeElement.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}"] }); }
+            i0.ɵɵproperty("ngIf", ctx.isMandatory());
+        } }, dependencies: [i1.NgClass, i1.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]
-        }] }); })();
+        args: [{ selector: "mis-input", template: "<div\n  [class]=\"'input-container ' + size()\"\n  [ngClass]=\"{\n    rounded: type() === 'rounded',\n    floating: type() === 'floating',\n    'has-error': isInvalid(),\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() || formInput()?.el.nativeElement.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\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"] }]
+    }], () => [], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MisInputComponent, { className: "MisInputComponent" }); })();
 class MisInputModule {

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

	@@ -1 +1 @@
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":"~~;;;;;;;;;MASa~~,iBAAiB,CAAA;~~IAC5B~~,~~WAAmB~~,~~CAAA~~,~~EAAc~~,~~EAA6B~~,~~OAAkB~~,~~EAAA;QAA7D,IAAE,~~CAAA,~~EAAA~~,~~GAAF~~,~~EAAE~~,~~CAAY;QAA6B~~,~~IAAO~~,~~CAAA~~,~~OAAA~~,~~GAAP,OAAO,CAAW;AACxE,~~QAAA,IAAA,CAAA,~~cAAc~~,~~GAA2B~~,~~IAAI~~,~~aAAa,~~CAAC,~~CAAC~~,CAAC,CAAC;~~AACtE~~,QAAA,IAAA,CAAA,~~QAAQ~~,GAAG,~~IAAI~~,CAAC,~~cAAc~~,~~CAAC~~,~~YAAY,~~EAAE,~~CAAC;AAC9C~~,~~QAAA~~,~~IAAA~~,~~CAAA~~,~~MAAM~~,~~GAAkB~~,IAAI,~~OAAO,~~EAAE,CAAC;~~QACtC~~,~~IAAK~~,CAAA,~~KAAA~~,GAAG,~~KAAK~~,CAAC~~;QACd~~,~~IAAQ~~,~~CAAA~~,~~QAAA,GAAG,KAAK,~~CAAC;~~KALmE;IAOpF~~,~~QAAQ~~,~~GAAA;QACN~~,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,~~YAAY~~,~~CAAC,~~IAAI,CAAC,~~SAAS~~,CAAC,~~IAAI~~,CAAC,~~MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,MAAK~~;~~AAC9E~~,~~YAAA~~,IAAI,CAAC,~~cAAc~~,CAAC,IAAI,CAAC,~~CAAC~~,~~IAAI,~~CAAC,~~OAAO,~~CAAC,~~OAAO~~,~~EAAE,OAAO,~~CAAC,~~CAAC~~;~~AAC3D~~,~~SAAC~~,~~CAAC~~,CAAC~~;QACH~~,~~IAAI~~,CAAC,~~EAAE~~,CAAC,~~aAAa,~~CAAC,~~WAAW,~~IAAI,~~GAAG,~~CAAC~~;KAC1C;IACD~~,~~WAAW~~,~~GAAA;AACT~~,~~QAAA~~,~~IAAI,~~CAAC,~~MAAM~~,CAAC,~~IAAI,EAAE,~~CAAC;~~AACnB~~,~~QAAA~~,~~IAAI,~~CAAC,~~MAAM,~~CAAC,QAAQ,~~EAAE~~,~~CAAC~~;~~KACxB;kHAjBU~~,iBAAiB,~~EAAA~~,~~EAAA,~~CAAA,~~iBAAA,CAAA,~~EAAA,CAAA,~~UAAA,CAAA,~~EAAA~~,EAAA,CAAA,iBAAA,CAAA,EAAA,CAAA,SAAA,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,CAAA,EAAA~~;oEAAjB,iBAAiB,EAAA,SAAA,EAAA,CAAA,CAAA,OAAA,EAAA,UAAA,EAAA,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;iFAAjB,iBAAiB,EAAA,CAAA;~~cAJ7B~~,SAAS;AAAC,QAAA,IAAA,EAAA,CAAA~~;;AAET~~,gBAAA,QAAQ,EAAE,iBAAiB;AAC5B,aAAA,CAAA~~;;sBAEqC,IAAI;;sBAAI,QAAQ~~;;;;;;;~~ICID~~,~~EAA8C~~,CAAA,cAAA,CAAA,CAAA,EAAA,MAAA,EAAA,CAAA,CAAA,CAAA;IAAA,EAAC,CAAA,MAAA,CAAA,CAAA,EAAA,GAAA,CAAA,CAAA;IAAA,EAAO,CAAA,YAAA,EAAA,CAAA;;~~MCJ9F~~,iBAAiB,CAAA;~~IAO5B~~,~~IAAqC~~,~~SAAS~~,~~CAAC~~,~~KAAwB~~,~~EAAA;AACrE~~,~~QAAA~~,IAAI,~~CAAC~~,~~IAAI~~,CAAC,~~WAAW,EAAE~~;~~AACrB~~,~~YAAA~~,~~IAAI~~,~~CAAC~~,~~WAAW~~,GAAG,KAAK,~~EAAE~~,~~EAAE~~,CAAC,~~aAAa,~~CAAC,WAAW,~~IAAI~~,~~EAAE~~,CAAC;~~SAC9D;QACD~~,~~IAAI~~,~~CAAC~~,~~SAAS~~,GAAG,KAAK,~~CAAC~~,~~OAAO~~,~~EAAE~~,~~OAAO,~~CAAC;~~AACxC~~,QAAA,~~IAAI~~,~~CAAC~~,~~iBAAiB~~,~~EAAE~~,~~WAAW~~,~~EAAE~~,CAAC;~~QACtC~~,~~IAAI~~,~~CAAC~~,~~iBAAiB~~,GAAG,KAAK,~~EAAE~~,~~QAAQ~~,CAAC,SAAS,CAAC,GAAG,~~KAAK~~,IAAI,CAAC,~~aAAa~~,~~GAAG~~,~~GAAG~~,~~CAAC~~,CAAC,CAAC~~;AACtF~~,QAAA,~~IAAI~~,CAAC,~~WAAW~~,IAAI,~~GAAG,~~CAAC~~;KACzB;AAID~~,~~IAAA~~,~~WAAA~~,~~GAAA;QAlBS~~,IAAI,~~CAAA~~,IAAA,~~GAA2B~~,~~UAAU~~,CAAC~~;QAC1C~~,IAAI,~~CAAA~~,~~IAAA~~,~~GAAuB~~,IAAI,CAAC~~;QAEhC~~,~~IAAO~~,~~CAAA~~,~~OAAA~~,~~GAAG~~,~~KAAK~~,CAAC;~~AAChB~~,~~QAAA~~,~~IAAA~~,~~CAAA~~,~~QAAQ,~~GAAG,~~KAAK~~,CAAC;~~AACjB~~,~~QAAA~~,~~IAAA~~,~~CAAA~~,~~WAAW~~,~~GAAW~~,KAAK,~~CAAC~~;~~QAYrC~~,~~IAAa~~,~~CAAA~~,~~aAAA~~,~~GAAY~~,IAAI,CAAC~~;KACd;AAEhB~~,~~IAAA~~,~~QAAQ~~,~~MAAW;IACnB~~,WAAW,~~GAAA~~;~~AACT~~,~~QAAA~~,~~IAAI~~,CAAC,~~iBAAiB~~,~~EAAE~~,WAAW,EAAE,CAAC;~~KACvC~~;~~kHAxBU~~,iBAAiB,GAAA,CAAA,EAAA,CAAA,EAAA;oEAAjB,iBAAiB,EAAA,SAAA,EAAA,CAAA,CAAA,WAAA,CAAA,CAAA,EAAA,cAAA,EAAA,SAAA,gCAAA,CAAA,EAAA,EAAA,GAAA,EAAA,QAAA,EAAA,EAAA,IAAA,EAAA,GAAA,CAAA,EAAA;~~wCAOd~~,iBAAiB,EAAA,CAAA,CAAA,CAAA~~;;;;;;ADP/B~~,YAVF,8BASC,CAC4B,CAAA,EAAA,KAAA,EAAA,CAAA,CAAA,CAAA;YACzB,EAAmD,CAAA,YAAA,CAAA,CAAA,CAAA,CAAA;YACnD,EAAuB,CAAA,cAAA,CAAA,CAAA,EAAA,KAAA,EAAA,CAAA,CAAA,CAAA;YACrB,EAAwC,CAAA,YAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA;YACxC,EAA8B,CAAA,cAAA,CAAA,CAAA,EAAA,MAAA,EAAA,CAAA,CAAA,CAAA;YAAA,~~EAAiB~~,CAAA,MAAA,CAAA,CAAA,CAAA,CAAA;YAAA,~~EAA8C~~,CAAA,UAAA,CAAA,CAAA,EAAA,iCAAA,EAAA,CAAA,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,CAAA,CAAA;~~AAC/F~~,~~YADuG~~,iBAAO,~~EACxG~~,CAAA;YACN,EAAkD,CAAA,YAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA;YACpD,EAAM,CAAA,YAAA,EAAA,CAAA;YACN,EAAmD,CAAA,YAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA;YACnD,EAAoD,CAAA,YAAA,CAAA,EAAA,EAAA,CAAA,CAAA,CAAA;YACtD,EAAM,CAAA,YAAA,EAAA,CAAA;;YAnBJ,~~EAAmC~~,CAAA,UAAA,CAAA,kBAAA,GAAA,GAAA,CAAA,IAAA,CAAA,CAAA;~~YACnC~~,EAME,CAAA,UAAA,CAAA,SAAA,EAAA,EAAA,CAAA,eAAA,CAAA,CAAA,EAAA,GAAA,EAAA,GAAA,CAAA,IAAA,KAAA,SAAA,EAAA,GAAA,CAAA,IAAA,KAAA,UAAA,EAAA,~~CAAA,~~GAAA,CAAA,~~aAAA~~,~~IAAA~~,GAAA,CAAA,~~QAAA~~,EAAA,~~GAAA~~,CAAA,OAAA,~~EAAA~~,GAAA,CAAA,SAAA,~~IAAA~~,IAAA,GAAA,IAAA,GAAA,~~GAAA~~,CAAA,~~SAAA,CAAA,~~QAAA,CAAA,CAAA,CAAA;YAMgC,~~EAAiB~~,CAAA,SAAA,CAAA,CAAA,CAAA,CAAA;~~YAAjB~~,~~EAAiB~~,CAAA,iBAAA,CAAA,GAAA,CAAA,WAAA,~~CAAA~~,CAAA~~;YAAO~~,~~EAAiB~~,CAAA,SAAA,EAAA,~~CAAA;YAAjB~~,~~EAAiB~~,~~CAAA~~,~~UAAA~~,CAAA,~~MAAA,~~EAAA,~~GAAA~~,CAAA,WAAA,CAAA,CAAA~~;;;iFCJhE~~,~~iBAAiB,EAAA,~~CAAA;~~cAL7B~~,~~SAAS;2BACE~~,~~WAAW~~,~~EAAA~~,~~QAAA,~~EAAA,~~ovBAAA~~,~~EAAA~~,~~MAAA~~,~~EAAA~~,CAAA,~~yiJAAA~~,~~CAAA,~~EAAA,CAAA~~;oBAKZ~~,~~IAAI~~,EAAA,CAAA~~;kBAAZ~~,~~KAAK;YACG~~,~~IAAI~~,EAAA,CAAA;~~kBAAZ~~,~~KAAK~~;~~YACG~~,WAAW,EAAA,~~CAAA;kBAAnB~~,~~KAAK;YACG~~,~~OAAO~~,EAAA,~~CAAA;kBAAf~~,~~KAAK;YACG,QAAQ,~~EAAA,CAAA~~;kBAAhB~~,~~KAAK;YACG~~,~~WAAW,EAAA,~~CAAA~~;kBAAnB~~,~~KAAK;YAC+B,SAAS,~~EAAA,CAAA~~;kBAA7C,YAAY;mBAAC,iBAAiB,CAAA~~;;~~kFAPpB~~,iBAAiB,EAAA,EAAA,SAAA,EAAA,mBAAA,EAAA,CAAA,CAAA,EAAA,GAAA;;~~MCCjB~~,cAAc,CAAA;+GAAd,cAAc,GAAA,CAAA,EAAA,CAAA,EAAA;mEAAd,cAAc,EAAA,CAAA,CAAA,EAAA;AAHf,IAAA,SAAA,IAAA,CAAA,IAAA,iBAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAY,EAAE,WAAW,CAAA,EAAA,CAAA,CAAA,EAAA;;iFAGxB,cAAc,EAAA,CAAA;cAL1B,QAAQ;AAAC,QAAA,IAAA,EAAA,CAAA;AACR,gBAAA,YAAY,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,CAAC;AACpD,gBAAA,OAAO,EAAE,CAAC,YAAY,EAAE,WAAW,CAAC;AACpC,gBAAA,OAAO,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,CAAC;AAChD,aAAA,CAAA;;wFACY,cAAc,EAAA,EAAA,YAAA,EAAA,CAJV,iBAAiB,EAAE,iBAAiB,CAAA,EAAA,OAAA,EAAA,CACzC,YAAY,EAAE,WAAW,CAAA,EAAA,OAAA,EAAA,CACzB,iBAAiB,EAAE,iBAAiB,CAAA,EAAA,CAAA,CAAA,EAAA,GAAA;;ACThD;;AAEG;;;;"}
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, OnInit, Optional, Self, signal, effect, OnDestroy, inject, DestroyRef } from \"@angular/core\";\nimport { NgControl } from \"@angular/forms\";\nimport { takeUntilDestroyed } from \"@angular/core/rxjs-interop\";\n\n@Directive({\n selector: \"input[misInput]\"\n})\nexport class MisInputDirective implements OnInit, OnDestroy {\n // Public signal to expose directive state\n public validity = signal<boolean>(true);\n \n // Dependencies injected for use with signals\n public el = inject(ElementRef);\n public control = inject(NgControl, { optional: true, self: true });\n private destroyRef = inject(DestroyRef); // Provides a reference for automatic cleanup\n\n constructor() {\n if (this.control?.control) {\n this.control.control.statusChanges\n .pipe(takeUntilDestroyed(this.destroyRef))\n .subscribe(() => {\n this.validity.set(!this.control!.control!.invalid);\n });\n }\n }\n\n ngOnInit(): void {\n // No need for explicit subscription in ngOnInit with the constructor logic\n }\n \n ngOnDestroy(): void {\n // `takeUntilDestroyed` handles cleanup automatically.\n }\n}\n\n\n","<div\n [class]=\"'input-container ' + size()\"\n [ngClass]=\"{\n rounded: type() === 'rounded',\n floating: type() === 'floating',\n 'has-error': isInvalid(),\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() \|\| formInput()?.el.nativeElement.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\n","import { Component, OnInit, OnDestroy, ViewEncapsulation, computed, contentChild, input, effect, signal } from \"@angular/core\";\nimport { AbstractControl } from \"@angular/forms\";\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 // Signal Inputs replacing @Input()\n public type = input<\"rounded\" \| \"floating\">(\"floating\");\n public size = input<\"sm\" \| \"md\" \| \"lg\">(\"sm\");\n public placeholder = input<string \| undefined>(undefined);\n public noHints = input<boolean>(false);\n public hasError = input<boolean>(false);\n public isMandatory = input<boolean>(false);\n\n // Content Child as a signal\n public formInput = contentChild(MisInputDirective);\n\n // Use a computed signal to derive the input control from the content child.\n // This will automatically update when the content child becomes available.\n public inputCtrl = computed(() => this.formInput()?.control?.control \|\| null);\n\n // Use a computed signal to derive the validity state.\n // It reads the signal from the directive and updates whenever the directive's signal changes.\n public inputValidity = computed(() => this.formInput()?.validity() ?? true);\n\n constructor() {\n // This effect is now only for a side-effect (modifying a DOM element)\n // and no longer writes to signals.\n effect(() => {\n const input = this.formInput();\n if (input && this.type() === 'floating') {\n if (!this.placeholder() && input.el.nativeElement.placeholder) {\n input.el.nativeElement.placeholder = '';\n }\n }\n });\n }\n\n ngOnInit(): void {}\n ngOnDestroy(): void {}\n\n // Computed signal to determine the overall invalid state\n public isInvalid = computed(() => !this.inputValidity() \|\| this.hasError());\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 CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, Input, NgModule } from '@angular/core';
+import { input, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
@@ -7,22 +7,19 @@ const _c0 = a0 => ({ mobile: a0 });
 class LoaderComponent {
     constructor() {
         /** Controls loader size */
-        this.mobileView = false;
+        this.mobileView = input(false);
     }
-    ngOnInit() { }
     static { this.ɵfac = function LoaderComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LoaderComponent, selectors: [["mis-loader"]], inputs: { mobileView: [1, "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: ["[_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}#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:#0937b2;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:#0937b2!important}"] }); }
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(1, _c0, ctx.mobileView()));
+        } }, dependencies: [i1.NgClass], 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}#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:#0937b2;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:#0937b2!important}"], changeDetection: 0 }); }
 }
 (() => { (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: [":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}#spinner{-webkit-animation:frames 1s infinite linear;animation:frames 1s infinite linear;background:transparent;border:4px solid #e0e0e0;border-radius:100%;border-top-color:#0937b2;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:#0937b2!important}\n"] }]
-    }], () => [], { mobileView: [{
-            type: Input
-        }] }); })();
+        args: [{ selector: "mis-loader", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  id=\"spinner\"\n  [ngClass]=\"{\n    mobile: mobileView()\n  }\"\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}#spinner{-webkit-animation:frames 1s infinite linear;animation:frames 1s infinite linear;background:transparent;border:4px solid #e0e0e0;border-radius:100%;border-top-color:#0937b2;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:#0937b2!important}\n"] }]
+    }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LoaderComponent, { className: "LoaderComponent" }); })();
 class LoaderModule {

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

	@@ -1 +1 @@
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~~;~~gHALF~~,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,qzDAAA,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;6GAHU,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;;;;"}
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, ChangeDetectionStrategy } from \"@angular/core\";\n\n@Component({\n selector: \"mis-loader\",\n templateUrl: \"./loader.component.html\",\n styleUrls: [\"./loader.component.scss\"],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class LoaderComponent {\n /** Controls loader size /\n mobileView = input<boolean>(false);\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":";;;;;;MAQa,eAAe,CAAA;AAN5B,IAAA,WAAA,GAAA;;AAQE,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAU,KAAK,CAAC,CAAC;AACpC,KAAA;gHAHY,eAAe,GAAA,CAAA,EAAA,CAAA,EAAA;oEAAf,eAAe,EAAA,SAAA,EAAA,CAAA,CAAA,YAAA,CAAA,CAAA,EAAA,MAAA,EAAA,EAAA,UAAA,EAAA,CAAA,CAAA,EAAA,YAAA,CAAA,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;YCR5B,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,EAAA,CAAA,CAAA,CAAA;;;iFDIS,eAAe,EAAA,CAAA;cAN3B,SAAS;2BACE,YAAY,EAAA,eAAA,EAGL,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,qFAAA,EAAA,MAAA,EAAA,CAAA,qzDAAA,CAAA,EAAA,CAAA;;kFAEpC,eAAe,EAAA,EAAA,SAAA,EAAA,iBAAA,EAAA,CAAA,CAAA,EAAA,GAAA;;MEEf,YAAY,CAAA;AACvB,IAAA,OAAO,OAAO,GAAA;QACZ,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC;KAClD;6GAHU,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;;;;"}