mis-crystal-design-system 2.8.6 → 2.8.8

package/bundles/mis-crystal-design-system-input.umd.js

@@ -74,7 +74,7 @@
         { type: core.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>\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: [".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 60ms ease-in;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::-moz-placeholder{-moz-transition:all .1s ease-in;transition:all .1s ease-in;opacity:0;transform-origin:left center;color:transparent}.input-container .input-wrapper input:-ms-input-placeholder{-ms-transition:all .1s ease-in;transition:all .1s ease-in;opacity:0;transform-origin:left center;color:transparent}.input-container .input-wrapper input::placeholder{transition:all .1s ease-in;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 .15s ease-in}.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(:-moz-placeholder-shown)+.mis-placeholder{color:transparent!important}.input-container.rounded .input-wrapper input:not(:-ms-input-placeholder)+.mis-placeholder{color:transparent!important}.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(:-moz-placeholder-shown)+.mis-placeholder{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating .input-wrapper input:not(:-ms-input-placeholder)+.mis-placeholder{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating .input-wrapper input:focus+.mis-placeholder,.input-container.floating .input-wrapper input:not(:placeholder-shown)+.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::-moz-placeholder{color:#6a737d;opacity:1;font-size:16px}.input-container.floating .input-wrapper:focus-within input:-ms-input-placeholder{color:#6a737d;opacity:1;font-size:16px}.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-error],.input-container [mis-input-hint]{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}"]
+                    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:#fff;--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 60ms ease-in;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::-moz-placeholder{-moz-transition:all .1s ease-in;transition:all .1s ease-in;opacity:0;transform-origin:left center;color:transparent}.input-container .input-wrapper input:-ms-input-placeholder{-ms-transition:all .1s ease-in;transition:all .1s ease-in;opacity:0;transform-origin:left center;color:transparent}.input-container .input-wrapper input::placeholder{transition:all .1s ease-in;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 .15s ease-in}.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(:-moz-placeholder-shown)+.mis-placeholder{color:transparent!important}.input-container.rounded .input-wrapper input:not(:-ms-input-placeholder)+.mis-placeholder{color:transparent!important}.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(:-moz-placeholder-shown)+.mis-placeholder{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating .input-wrapper input:not(:-ms-input-placeholder)+.mis-placeholder{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating .input-wrapper input:focus+.mis-placeholder,.input-container.floating .input-wrapper input:not(:placeholder-shown)+.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::-moz-placeholder{color:#6a737d;opacity:1;font-size:16px}.input-container.floating .input-wrapper:focus-within input:-ms-input-placeholder{color:#6a737d;opacity:1;font-size:16px}.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-error],.input-container [mis-input-hint]{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}"]
                 },] }
     ];
     MisInputComponent.ctorParameters = function () { return []; };

package/bundles/mis-crystal-design-system-input.umd.min.js

@@ -1,2 +1,2 @@
-!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/forms"),require("rxjs"),require("rxjs/operators"),require("@angular/common")):"function"==typeof define&&define.amd?define("mis-crystal-design-system/input",["exports","@angular/core","@angular/forms","rxjs","rxjs/operators","@angular/common"],t):t(((n="undefined"!=typeof globalThis?globalThis:n||self)["mis-crystal-design-system"]=n["mis-crystal-design-system"]||{},n["mis-crystal-design-system"].input={}),n.ng.core,n.ng.forms,n.rxjs,n.rxjs.operators,n.ng.common)}(this,(function(n,t,i,e,o,r){"use strict";var p=function(){function n(n,t){this.el=n,this.control=t,this.validityChange=new e.ReplaySubject(1),this.validity=this.validityChange.asObservable(),this.endObs=new e.Subject,this.focus=!1,this.hasValue=!1}return n.prototype.ngOnInit=function(){var n,t,i=this;null===(t=null===(n=this.control)||void 0===n?void 0:n.control)||void 0===t||t.valueChanges.pipe(o.takeUntil(this.endObs)).subscribe((function(){var n;i.validityChange.next(!(null===(n=i.control.control)||void 0===n?void 0:n.invalid))})),this.el.nativeElement.placeholder+=" "},n.prototype.ngOnDestroy=function(){this.endObs.next(),this.endObs.complete()},n}();p.decorators=[{type:t.Directive,args:[{selector:"input[misInput]"}]}],p.ctorParameters=function(){return[{type:t.ElementRef},{type:i.NgControl,decorators:[{type:t.Self},{type:t.Optional}]}]};var a=function(){function n(){this.type="floating",this.size="sm",this.noHints=!1,this.hasError=!1,this.inputValidity=!0}return Object.defineProperty(n.prototype,"formInput",{set:function(n){var t,i,e=this;this.placeholder||(this.placeholder=(null==n?void 0:n.el.nativeElement.placeholder)||""),this.inputCtrl=null===(t=n.control)||void 0===t?void 0:t.control,null===(i=this.inputSubscription)||void 0===i||i.unsubscribe(),this.inputSubscription=null==n?void 0:n.validity.subscribe((function(n){return e.inputValidity=n})),this.placeholder+=" "},enumerable:!1,configurable:!0}),n.prototype.ngOnInit=function(){},n.prototype.ngOnDestroy=function(){var n;null===(n=this.inputSubscription)||void 0===n||n.unsubscribe()},n}();a.decorators=[{type:t.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>\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:[".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 60ms ease-in;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::-moz-placeholder{-moz-transition:all .1s ease-in;transition:all .1s ease-in;opacity:0;transform-origin:left center;color:transparent}.input-container .input-wrapper input:-ms-input-placeholder{-ms-transition:all .1s ease-in;transition:all .1s ease-in;opacity:0;transform-origin:left center;color:transparent}.input-container .input-wrapper input::placeholder{transition:all .1s ease-in;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 .15s ease-in}.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(:-moz-placeholder-shown)+.mis-placeholder{color:transparent!important}.input-container.rounded .input-wrapper input:not(:-ms-input-placeholder)+.mis-placeholder{color:transparent!important}.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(:-moz-placeholder-shown)+.mis-placeholder{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating .input-wrapper input:not(:-ms-input-placeholder)+.mis-placeholder{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating .input-wrapper input:focus+.mis-placeholder,.input-container.floating .input-wrapper input:not(:placeholder-shown)+.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::-moz-placeholder{color:#6a737d;opacity:1;font-size:16px}.input-container.floating .input-wrapper:focus-within input:-ms-input-placeholder{color:#6a737d;opacity:1;font-size:16px}.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-error],.input-container [mis-input-hint]{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}"]}]}],a.ctorParameters=function(){return[]},a.propDecorators={type:[{type:t.Input}],size:[{type:t.Input}],placeholder:[{type:t.Input}],noHints:[{type:t.Input}],hasError:[{type:t.Input}],formInput:[{type:t.ContentChild,args:[p]}]};var s=function(){};s.decorators=[{type:t.NgModule,args:[{declarations:[a,p],imports:[r.CommonModule,i.FormsModule],exports:[a,p]}]}],n.MisInputComponent=a,n.MisInputDirective=p,n.MisInputModule=s,Object.defineProperty(n,"__esModule",{value:!0})}));
+!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/forms"),require("rxjs"),require("rxjs/operators"),require("@angular/common")):"function"==typeof define&&define.amd?define("mis-crystal-design-system/input",["exports","@angular/core","@angular/forms","rxjs","rxjs/operators","@angular/common"],t):t(((n="undefined"!=typeof globalThis?globalThis:n||self)["mis-crystal-design-system"]=n["mis-crystal-design-system"]||{},n["mis-crystal-design-system"].input={}),n.ng.core,n.ng.forms,n.rxjs,n.rxjs.operators,n.ng.common)}(this,(function(n,t,e,i,r,o){"use strict";var p=function(){function n(n,t){this.el=n,this.control=t,this.validityChange=new i.ReplaySubject(1),this.validity=this.validityChange.asObservable(),this.endObs=new i.Subject,this.focus=!1,this.hasValue=!1}return n.prototype.ngOnInit=function(){var n,t,e=this;null===(t=null===(n=this.control)||void 0===n?void 0:n.control)||void 0===t||t.valueChanges.pipe(r.takeUntil(this.endObs)).subscribe((function(){var n;e.validityChange.next(!(null===(n=e.control.control)||void 0===n?void 0:n.invalid))})),this.el.nativeElement.placeholder+=" "},n.prototype.ngOnDestroy=function(){this.endObs.next(),this.endObs.complete()},n}();p.decorators=[{type:t.Directive,args:[{selector:"input[misInput]"}]}],p.ctorParameters=function(){return[{type:t.ElementRef},{type:e.NgControl,decorators:[{type:t.Self},{type:t.Optional}]}]};var a=function(){function n(){this.type="floating",this.size="sm",this.noHints=!1,this.hasError=!1,this.inputValidity=!0}return Object.defineProperty(n.prototype,"formInput",{set:function(n){var t,e,i=this;this.placeholder||(this.placeholder=(null==n?void 0:n.el.nativeElement.placeholder)||""),this.inputCtrl=null===(t=n.control)||void 0===t?void 0:t.control,null===(e=this.inputSubscription)||void 0===e||e.unsubscribe(),this.inputSubscription=null==n?void 0:n.validity.subscribe((function(n){return i.inputValidity=n})),this.placeholder+=" "},enumerable:!1,configurable:!0}),n.prototype.ngOnInit=function(){},n.prototype.ngOnDestroy=function(){var n;null===(n=this.inputSubscription)||void 0===n||n.unsubscribe()},n}();a.decorators=[{type:t.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>\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:#fff;--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 60ms ease-in;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::-moz-placeholder{-moz-transition:all .1s ease-in;transition:all .1s ease-in;opacity:0;transform-origin:left center;color:transparent}.input-container .input-wrapper input:-ms-input-placeholder{-ms-transition:all .1s ease-in;transition:all .1s ease-in;opacity:0;transform-origin:left center;color:transparent}.input-container .input-wrapper input::placeholder{transition:all .1s ease-in;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 .15s ease-in}.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(:-moz-placeholder-shown)+.mis-placeholder{color:transparent!important}.input-container.rounded .input-wrapper input:not(:-ms-input-placeholder)+.mis-placeholder{color:transparent!important}.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(:-moz-placeholder-shown)+.mis-placeholder{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating .input-wrapper input:not(:-ms-input-placeholder)+.mis-placeholder{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating .input-wrapper input:focus+.mis-placeholder,.input-container.floating .input-wrapper input:not(:placeholder-shown)+.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::-moz-placeholder{color:#6a737d;opacity:1;font-size:16px}.input-container.floating .input-wrapper:focus-within input:-ms-input-placeholder{color:#6a737d;opacity:1;font-size:16px}.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-error],.input-container [mis-input-hint]{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}"]}]}],a.ctorParameters=function(){return[]},a.propDecorators={type:[{type:t.Input}],size:[{type:t.Input}],placeholder:[{type:t.Input}],noHints:[{type:t.Input}],hasError:[{type:t.Input}],formInput:[{type:t.ContentChild,args:[p]}]};var s=function(){};s.decorators=[{type:t.NgModule,args:[{declarations:[a,p],imports:[o.CommonModule,e.FormsModule],exports:[a,p]}]}],n.MisInputComponent=a,n.MisInputDirective=p,n.MisInputModule=s,Object.defineProperty(n,"__esModule",{value:!0})}));
 //# sourceMappingURL=mis-crystal-design-system-input.umd.min.js.map

package/bundles/mis-crystal-design-system-input.umd.min.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../projects/mis-components/input/directives/input/input.directive.ts","../../../projects/mis-components/input/mis-input.component.ts","../../../projects/mis-components/input/mis-input.module.ts"],"names":["MisInputDirective","el","control","this","validityChange","ReplaySubject","validity","asObservable","endObs","Subject","focus","hasValue","prototype","ngOnInit","_this","_b","_a","valueChanges","pipe","takeUntil","subscribe","next","invalid","nativeElement","placeholder","ngOnDestroy","complete","Directive","args","selector","ElementRef","NgControl","decorators","type","Self","Optional","MisInputComponent","size","noHints","hasError","inputValidity","Object","defineProperty","input","inputCtrl","inputSubscription","unsubscribe","res","Component","template","Input","ContentChild","NgModule","declarations","imports","CommonModule","FormsModule","exports"],"mappings":"uoBAUE,SAAAA,EAAmBC,EAA2CC,GAA3CC,KAAAF,GAAAA,EAA2CE,KAAAD,QAAAA,EACtDC,KAAAC,eAAyC,IAAIC,EAAAA,cAAc,GACnEF,KAAAG,SAAWH,KAAKC,eAAeG,eAC/BJ,KAAAK,OAAwB,IAAIC,EAAAA,QAC5BN,KAAAO,OAAQ,EACRP,KAAAQ,UAAW,SAEXX,EAAAY,UAAAC,SAAA,WAAA,QAAAC,EAAAX,KACuB,QAArBY,EAAY,QAAZC,EAAAb,KAAKD,eAAO,IAAAc,OAAA,EAAAA,EAAEd,eAAO,IAAAa,GAAAA,EAAEE,aAAaC,KAAKC,EAAAA,UAAUhB,KAAKK,SAASY,WAAU,iBACzEN,EAAKV,eAAeiB,OAA0B,QAArBL,EAACF,EAAKZ,QAAQA,eAAO,IAAAc,OAAA,EAAAA,EAAEM,aAElDnB,KAAKF,GAAGsB,cAAcC,aAAe,KAEvCxB,EAAAY,UAAAa,YAAA,WACEtB,KAAKK,OAAOa,OACZlB,KAAKK,OAAOkB,qCApBfC,EAAAA,UAASC,KAAA,CAAC,CAETC,SAAU,+DAPQC,EAAAA,kBACXC,EAAAA,UAASC,WAAA,CAAA,CAAAC,KASoBC,EAAAA,MAAI,CAAAD,KAAIE,EAAAA,+BCkB5C,SAAAC,IAjBSjC,KAAA8B,KAA+B,WAC/B9B,KAAAkC,KAA2B,KAE3BlC,KAAAmC,SAAU,EACVnC,KAAAoC,UAAW,EAYpBpC,KAAAqC,eAAyB,SAXzBC,OAAAC,eAAqCN,EAAAxB,UAAA,YAAS,KAA9C,SAA+C+B,GAA/C,QAAA7B,EAAAX,KACOA,KAAKqB,cACRrB,KAAKqB,aAAcmB,MAAAA,OAAK,EAALA,EAAO1C,GAAGsB,cAAcC,cAAe,IAE5DrB,KAAKyC,UAAyB,QAAhB5B,EAAG2B,EAAMzC,eAAO,IAAAc,OAAA,EAAAA,EAAEd,QACV,QAAtBa,EAAAZ,KAAK0C,yBAAiB,IAAA9B,GAAAA,EAAE+B,cACxB3C,KAAK0C,kBAAoBF,MAAAA,OAAK,EAALA,EAAOrC,SAASc,WAAU,SAAA2B,GAAO,OAACjC,EAAK0B,cAAgBO,KAChF5C,KAAKqB,aAAe,qCAOtBY,EAAAxB,UAAAC,SAAA,aACAuB,EAAAxB,UAAAa,YAAA,iBACwB,QAAtBT,EAAAb,KAAK0C,yBAAiB,IAAA7B,GAAAA,EAAE8B,wCA3B3BE,EAAAA,UAASpB,KAAA,CAAC,CACTC,SAAU,YACVoB,SAAA,qqKAICC,EAAAA,oBACAA,EAAAA,2BACAA,EAAAA,uBACAA,EAAAA,wBACAA,EAAAA,yBACAC,EAAAA,aAAYvB,KAAA,CAAC5B,YCLhB,iCALCoD,EAAAA,SAAQxB,KAAA,CAAC,CACRyB,aAAc,CAACjB,EAAmBpC,GAClCsD,QAAS,CAACC,EAAAA,aAAcC,EAAAA,aACxBC,QAAS,CAACrB,EAAmBpC","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","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  @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"]}
+{"version":3,"sources":["../../../projects/mis-components/input/directives/input/input.directive.ts","../../../projects/mis-components/input/mis-input.component.ts","../../../projects/mis-components/input/mis-input.module.ts"],"names":["MisInputDirective","el","control","this","validityChange","ReplaySubject","validity","asObservable","endObs","Subject","focus","hasValue","prototype","ngOnInit","_this","_b","_a","valueChanges","pipe","takeUntil","subscribe","next","invalid","nativeElement","placeholder","ngOnDestroy","complete","Directive","args","selector","ElementRef","NgControl","decorators","type","Self","Optional","MisInputComponent","size","noHints","hasError","inputValidity","Object","defineProperty","input","inputCtrl","inputSubscription","unsubscribe","res","Component","template","Input","ContentChild","NgModule","declarations","imports","CommonModule","FormsModule","exports"],"mappings":"uoBAUE,SAAAA,EAAmBC,EAA2CC,GAA3CC,KAAAF,GAAAA,EAA2CE,KAAAD,QAAAA,EACtDC,KAAAC,eAAyC,IAAIC,EAAAA,cAAc,GACnEF,KAAAG,SAAWH,KAAKC,eAAeG,eAC/BJ,KAAAK,OAAwB,IAAIC,EAAAA,QAC5BN,KAAAO,OAAQ,EACRP,KAAAQ,UAAW,SAEXX,EAAAY,UAAAC,SAAA,WAAA,QAAAC,EAAAX,KACuB,QAArBY,EAAY,QAAZC,EAAAb,KAAKD,eAAO,IAAAc,OAAA,EAAAA,EAAEd,eAAO,IAAAa,GAAAA,EAAEE,aAAaC,KAAKC,EAAAA,UAAUhB,KAAKK,SAASY,WAAU,iBACzEN,EAAKV,eAAeiB,OAA0B,QAArBL,EAACF,EAAKZ,QAAQA,eAAO,IAAAc,OAAA,EAAAA,EAAEM,aAElDnB,KAAKF,GAAGsB,cAAcC,aAAe,KAEvCxB,EAAAY,UAAAa,YAAA,WACEtB,KAAKK,OAAOa,OACZlB,KAAKK,OAAOkB,qCApBfC,EAAAA,UAASC,KAAA,CAAC,CAETC,SAAU,+DAPQC,EAAAA,kBACXC,EAAAA,UAASC,WAAA,CAAA,CAAAC,KASoBC,EAAAA,MAAI,CAAAD,KAAIE,EAAAA,+BCkB5C,SAAAC,IAjBSjC,KAAA8B,KAA+B,WAC/B9B,KAAAkC,KAA2B,KAE3BlC,KAAAmC,SAAU,EACVnC,KAAAoC,UAAW,EAYpBpC,KAAAqC,eAAyB,SAXzBC,OAAAC,eAAqCN,EAAAxB,UAAA,YAAS,KAA9C,SAA+C+B,GAA/C,QAAA7B,EAAAX,KACOA,KAAKqB,cACRrB,KAAKqB,aAAcmB,MAAAA,OAAK,EAALA,EAAO1C,GAAGsB,cAAcC,cAAe,IAE5DrB,KAAKyC,UAAyB,QAAhB5B,EAAG2B,EAAMzC,eAAO,IAAAc,OAAA,EAAAA,EAAEd,QACV,QAAtBa,EAAAZ,KAAK0C,yBAAiB,IAAA9B,GAAAA,EAAE+B,cACxB3C,KAAK0C,kBAAoBF,MAAAA,OAAK,EAALA,EAAOrC,SAASc,WAAU,SAAA2B,GAAO,OAACjC,EAAK0B,cAAgBO,KAChF5C,KAAKqB,aAAe,qCAOtBY,EAAAxB,UAAAC,SAAA,aACAuB,EAAAxB,UAAAa,YAAA,iBACwB,QAAtBT,EAAAb,KAAK0C,yBAAiB,IAAA7B,GAAAA,EAAE8B,wCA3B3BE,EAAAA,UAASpB,KAAA,CAAC,CACTC,SAAU,YACVoB,SAAA,47MAICC,EAAAA,oBACAA,EAAAA,2BACAA,EAAAA,uBACAA,EAAAA,wBACAA,EAAAA,yBACAC,EAAAA,aAAYvB,KAAA,CAAC5B,YCLhB,iCALCoD,EAAAA,SAAQxB,KAAA,CAAC,CACRyB,aAAc,CAACjB,EAAmBpC,GAClCsD,QAAS,CAACC,EAAAA,aAAcC,EAAAA,aACxBC,QAAS,CAACrB,EAAmBpC","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","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  @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"]}

package/esm2015/input/mis-input.component.js

@@ -28,7 +28,7 @@ MisInputComponent.decorators = [
     { 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>\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: [".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 60ms ease-in;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::-moz-placeholder{-moz-transition:all .1s ease-in;transition:all .1s ease-in;opacity:0;transform-origin:left center;color:transparent}.input-container .input-wrapper input:-ms-input-placeholder{-ms-transition:all .1s ease-in;transition:all .1s ease-in;opacity:0;transform-origin:left center;color:transparent}.input-container .input-wrapper input::placeholder{transition:all .1s ease-in;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 .15s ease-in}.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(:-moz-placeholder-shown)+.mis-placeholder{color:transparent!important}.input-container.rounded .input-wrapper input:not(:-ms-input-placeholder)+.mis-placeholder{color:transparent!important}.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(:-moz-placeholder-shown)+.mis-placeholder{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating .input-wrapper input:not(:-ms-input-placeholder)+.mis-placeholder{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating .input-wrapper input:focus+.mis-placeholder,.input-container.floating .input-wrapper input:not(:placeholder-shown)+.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::-moz-placeholder{color:#6a737d;opacity:1;font-size:16px}.input-container.floating .input-wrapper:focus-within input:-ms-input-placeholder{color:#6a737d;opacity:1;font-size:16px}.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-error],.input-container [mis-input-hint]{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}"]
+                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:#fff;--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 60ms ease-in;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::-moz-placeholder{-moz-transition:all .1s ease-in;transition:all .1s ease-in;opacity:0;transform-origin:left center;color:transparent}.input-container .input-wrapper input:-ms-input-placeholder{-ms-transition:all .1s ease-in;transition:all .1s ease-in;opacity:0;transform-origin:left center;color:transparent}.input-container .input-wrapper input::placeholder{transition:all .1s ease-in;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 .15s ease-in}.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(:-moz-placeholder-shown)+.mis-placeholder{color:transparent!important}.input-container.rounded .input-wrapper input:not(:-ms-input-placeholder)+.mis-placeholder{color:transparent!important}.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(:-moz-placeholder-shown)+.mis-placeholder{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating .input-wrapper input:not(:-ms-input-placeholder)+.mis-placeholder{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating .input-wrapper input:focus+.mis-placeholder,.input-container.floating .input-wrapper input:not(:placeholder-shown)+.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::-moz-placeholder{color:#6a737d;opacity:1;font-size:16px}.input-container.floating .input-wrapper:focus-within input:-ms-input-placeholder{color:#6a737d;opacity:1;font-size:16px}.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-error],.input-container [mis-input-hint]{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}"]
             },] }
 ];
 MisInputComponent.ctorParameters = () => [];

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

@@ -66,7 +66,7 @@ MisInputComponent.decorators = [
     { 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>\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: [".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 60ms ease-in;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::-moz-placeholder{-moz-transition:all .1s ease-in;transition:all .1s ease-in;opacity:0;transform-origin:left center;color:transparent}.input-container .input-wrapper input:-ms-input-placeholder{-ms-transition:all .1s ease-in;transition:all .1s ease-in;opacity:0;transform-origin:left center;color:transparent}.input-container .input-wrapper input::placeholder{transition:all .1s ease-in;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 .15s ease-in}.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(:-moz-placeholder-shown)+.mis-placeholder{color:transparent!important}.input-container.rounded .input-wrapper input:not(:-ms-input-placeholder)+.mis-placeholder{color:transparent!important}.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(:-moz-placeholder-shown)+.mis-placeholder{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating .input-wrapper input:not(:-ms-input-placeholder)+.mis-placeholder{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating .input-wrapper input:focus+.mis-placeholder,.input-container.floating .input-wrapper input:not(:placeholder-shown)+.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::-moz-placeholder{color:#6a737d;opacity:1;font-size:16px}.input-container.floating .input-wrapper:focus-within input:-ms-input-placeholder{color:#6a737d;opacity:1;font-size:16px}.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-error],.input-container [mis-input-hint]{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}"]
+                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:#fff;--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 60ms ease-in;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::-moz-placeholder{-moz-transition:all .1s ease-in;transition:all .1s ease-in;opacity:0;transform-origin:left center;color:transparent}.input-container .input-wrapper input:-ms-input-placeholder{-ms-transition:all .1s ease-in;transition:all .1s ease-in;opacity:0;transform-origin:left center;color:transparent}.input-container .input-wrapper input::placeholder{transition:all .1s ease-in;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 .15s ease-in}.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(:-moz-placeholder-shown)+.mis-placeholder{color:transparent!important}.input-container.rounded .input-wrapper input:not(:-ms-input-placeholder)+.mis-placeholder{color:transparent!important}.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(:-moz-placeholder-shown)+.mis-placeholder{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating .input-wrapper input:not(:-ms-input-placeholder)+.mis-placeholder{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating .input-wrapper input:focus+.mis-placeholder,.input-container.floating .input-wrapper input:not(:placeholder-shown)+.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::-moz-placeholder{color:#6a737d;opacity:1;font-size:16px}.input-container.floating .input-wrapper:focus-within input:-ms-input-placeholder{color:#6a737d;opacity:1;font-size:16px}.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-error],.input-container [mis-input-hint]{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}"]
             },] }
 ];
 MisInputComponent.ctorParameters = () => [];

package/input/mis-crystal-design-system-input.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"MisInputDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":5,"character":1},"arguments":[{"selector":"input[misInput]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self","line":10,"character":38}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":10,"character":46}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":10,"character":25},{"__symbolic":"reference","module":"@angular/forms","name":"NgControl","line":10,"character":73}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"MisInputComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"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>\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":[".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 60ms ease-in;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::-moz-placeholder{-moz-transition:all .1s ease-in;transition:all .1s ease-in;opacity:0;transform-origin:left center;color:transparent}.input-container .input-wrapper input:-ms-input-placeholder{-ms-transition:all .1s ease-in;transition:all .1s ease-in;opacity:0;transform-origin:left center;color:transparent}.input-container .input-wrapper input::placeholder{transition:all .1s ease-in;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 .15s ease-in}.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(:-moz-placeholder-shown)+.mis-placeholder{color:transparent!important}.input-container.rounded .input-wrapper input:not(:-ms-input-placeholder)+.mis-placeholder{color:transparent!important}.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(:-moz-placeholder-shown)+.mis-placeholder{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating .input-wrapper input:not(:-ms-input-placeholder)+.mis-placeholder{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating .input-wrapper input:focus+.mis-placeholder,.input-container.floating .input-wrapper input:not(:placeholder-shown)+.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::-moz-placeholder{color:#6a737d;opacity:1;font-size:16px}.input-container.floating .input-wrapper:focus-within input:-ms-input-placeholder{color:#6a737d;opacity:1;font-size:16px}.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-error],.input-container [mis-input-hint]{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}"]}]}],"members":{"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"noHints":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"hasError":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"formInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":16,"character":3},"arguments":[{"__symbolic":"reference","name":"MisInputDirective"}]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"MisInputModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"MisInputComponent"},{"__symbolic":"reference","name":"MisInputDirective"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":12},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":8,"character":26}],"exports":[{"__symbolic":"reference","name":"MisInputComponent"},{"__symbolic":"reference","name":"MisInputDirective"}]}]}],"members":{}}},"origins":{"MisInputDirective":"./directives/input/input.directive","MisInputComponent":"./mis-input.component","MisInputModule":"./mis-input.module"},"importAs":"mis-crystal-design-system/input"}
+{"__symbolic":"module","version":4,"metadata":{"MisInputDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":5,"character":1},"arguments":[{"selector":"input[misInput]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self","line":10,"character":38}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":10,"character":46}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":10,"character":25},{"__symbolic":"reference","module":"@angular/forms","name":"NgControl","line":10,"character":73}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"MisInputComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"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>\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:#fff;--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 60ms ease-in;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::-moz-placeholder{-moz-transition:all .1s ease-in;transition:all .1s ease-in;opacity:0;transform-origin:left center;color:transparent}.input-container .input-wrapper input:-ms-input-placeholder{-ms-transition:all .1s ease-in;transition:all .1s ease-in;opacity:0;transform-origin:left center;color:transparent}.input-container .input-wrapper input::placeholder{transition:all .1s ease-in;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 .15s ease-in}.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(:-moz-placeholder-shown)+.mis-placeholder{color:transparent!important}.input-container.rounded .input-wrapper input:not(:-ms-input-placeholder)+.mis-placeholder{color:transparent!important}.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(:-moz-placeholder-shown)+.mis-placeholder{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating .input-wrapper input:not(:-ms-input-placeholder)+.mis-placeholder{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating .input-wrapper input:focus+.mis-placeholder,.input-container.floating .input-wrapper input:not(:placeholder-shown)+.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::-moz-placeholder{color:#6a737d;opacity:1;font-size:16px}.input-container.floating .input-wrapper:focus-within input:-ms-input-placeholder{color:#6a737d;opacity:1;font-size:16px}.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-error],.input-container [mis-input-hint]{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}"]}]}],"members":{"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"noHints":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"hasError":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"formInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":16,"character":3},"arguments":[{"__symbolic":"reference","name":"MisInputDirective"}]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"MisInputModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"MisInputComponent"},{"__symbolic":"reference","name":"MisInputDirective"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":12},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":8,"character":26}],"exports":[{"__symbolic":"reference","name":"MisInputComponent"},{"__symbolic":"reference","name":"MisInputDirective"}]}]}],"members":{}}},"origins":{"MisInputDirective":"./directives/input/input.directive","MisInputComponent":"./mis-input.component","MisInputModule":"./mis-input.module"},"importAs":"mis-crystal-design-system/input"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mis-crystal-design-system",
-  "version": "2.8.6",
+  "version": "2.8.8",
   "peerDependencies": {
     "@angular/common": "*",
     "@angular/core": "*",

package/styles/mis-color-constants.scss

@@ -1,73 +1,149 @@
+//   PRIMARY_COLORS -----------------------
+$pmry_100: #CBDDFB;
+$pmry_200: #99BAF7;
+$pmry_500: #0937B2;
+$pmry_400: #3C68D0;
+$pmry_600: #062A99;
+$pmry_700: #041F80;
+$pmry_300: #638FE7;
+$pmry_800: #021567;
+$pmry_900: #010F55;
+
+//   SECONDARY_COLORS ---------------------
+$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;
+
+//SEMANTIC COLORS --------------------------
+$sem_error: #B00020;
+$sem_info: #0091FF;
+$sem_warning: #FF9D00;
+$sem_success: #38AF49;
+
+//grey -------------------------------------
+$grey_bg-1: #FAFAFA;
+$grey_bg: #F5F5F5;
+$grey_seperators: #E0E0E0;
+$grey_disabled: #C8CDD3;
+$grey_hover: #F5F7FC;
+$grey_pressed: #E6EBF7;
+$grey_row: #F5F7FC;
+
+//decor ------------------------------------
+$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 -------------------------------------
+$text_white: #FFFFFF;
+$text-disabled: #929DAB;
+$text_muted: #6A737D;
+$text_black: #181F33;
+
+//meeting-rooms ----------------------------
+$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;
+
+//transparency -----------------------------
+$tr_hover: #F0F3FA;
+$tr_pressed: #DAE1F3;
+
+:root{
   //   PRIMARY_COLORS -----------------------
-  $pmry_100: #CBDDFB;
-  $pmry_200: #99BAF7;
-  $pmry_500: #0937B2;
-  $pmry_400: #3C68D0;
-  $pmry_600: #062A99;
-  $pmry_700: #041F80;
-  $pmry_300: #638FE7;
-  $pmry_800: #021567;
-  $pmry_900: #010F55;
+  --pmry-200 : #{$pmry_200};
+  --pmry-100 : #{$pmry_100};
+  --pmry-500 : #{$pmry_500};
+  --pmry-400 : #{$pmry_400};
+  --pmry-600 : #{$pmry_600};
+  --pmry-700 : #{$pmry_700};
+  --pmry-300 : #{$pmry_300};
+  --pmry-800 : #{$pmry_800};
+  --pmry-900 : #{$pmry_900};
 
   //   SECONDARY_COLORS ---------------------
-  $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;
+  --sec-d-purple: #{$sec_d_purple};
+  --sec-maroon: #{$sec_maroon};
+  --sec-mud-red: #{$sec_mud_red};
+  --sec-orange: #{$sec_orange};
+  --sec-purple: #{$sec_purple};
+  --sec-teal: #{$sec_teal};
+  --sec-yellow: #{$sec_yellow};
+  --sec-green: #{$sec_green};
+  --sec-bright-green: #{$sec_bright_green};
+  --sec-dark-teal: #{$sec_dark_teal};
+  --sec-chocolate: #{$sec_chocolate};
+  --sec-rube-pink: #{$sec_rube_pink};
+  --sec-cerulean: #{$sec_cerulean};
 
   //SEMANTIC COLORS --------------------------
-  $sem_error: #B00020;
-  $sem_info: #0091FF;
-  $sem_warning: #FF9D00;
-  $sem_success: #38AF49;
+  --sem-error: #{$sem_error};
+  --sem-info: #{$sem_info};
+  --sem-warning: #{$sem_warning};
+  --sem-success: #{$sem_success};
 
   //grey -------------------------------------
-  $grey_bg-1: #FAFAFA;
-  $grey_bg: #F5F5F5;
-  $grey_seperators: #E0E0E0;
-  $grey_disabled: #C8CDD3;
-  $grey_hover: #F5F7FC;
-  $grey_pressed: #E6EBF7;
-  $grey_row: #F5F7FC;
+  --grey-bg-1: #{$grey_bg-1};
+  --grey-bg: #{$grey_bg};
+  --grey-seperators: #{$grey_seperators};
+  --grey-disabled: #{$grey_disabled};
+  --grey-hover: #{$grey_hover};
+  --grey-pressed: #{$grey_pressed};
+  --grey-row: #{$grey_row};
 
   //decor ------------------------------------
-  $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;
+  --dec-light-yellow : #{$dec_light-yellow};
+  --dec-light-purple: #{$dec_light-purple};
+  --dec-light-green: #{$dec_light-green};
+  --dec-light-green2: #{$dec_light-green2};
+  --dec-light-pink: #{$dec_light-pink};
+  --dec-: #{$dec_};
+  --dec-lt-orange: #{$dec_lt-orange};
+  --dec-light-blue: #{$dec_light-blue};
+  --dec-row-selection: #{$dec_row-selection};
+  --dec-row-selection2: #{$dec_row-selection2};
+  --dec-row-lines: #{$dec_row-lines};
 
   //Text -------------------------------------
-  $text_white: #FFFFFF;
-  $text-disabled: #929DAB;
-  $text_muted: #6A737D;
-  $text_black: #181F33;
+  --text-white: #{$text_white};
+  --text-disabled: #{$text-disabled};
+  --text-muted: #{$text_muted};
+  --text-black: #{$text_black};
 
   //meeting-rooms ----------------------------
-  $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;
+  --MR-solid-blue2 :#{$MR_solid_blue2};
+  --MR-solid-purple :#{$MR_solid_purple};
+  --MR-solid-orange :#{$MR_solid_orange};
+  --MR-solid-green :#{$MR_solid_green};
+  --MR-solid-brown :#{$MR_solid_brown};
+  --MR-solid-yellow :#{$MR_solid_yellow};
+  --MR-solid-blue :#{$MR_solid_blue};
+  --MR-solid-pink :#{$MR_solid_pink};
 
   //transparency -----------------------------
-  $tr_hover: #F0F3FA;
-  $tr_pressed: #DAE1F3;
+  --tr-hover :#{$tr_hover};
+  --tr-pressed :#{$tr_pressed};
+}