mis-crystal-design-system 2.3.11 → 2.3.14
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.
- package/bundles/mis-crystal-design-system-input.umd.js +4 -2
- package/bundles/mis-crystal-design-system-input.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-input.umd.min.js +1 -1
- package/bundles/mis-crystal-design-system-input.umd.min.js.map +1 -1
- package/esm2015/input/directives/input/input.directive.js +5 -3
- package/fesm2015/mis-crystal-design-system-input.js +4 -2
- package/fesm2015/mis-crystal-design-system-input.js.map +1 -1
- package/input/mis-input.component.scss +147 -0
- package/package.json +1 -1
|
@@ -18,8 +18,10 @@
|
|
|
18
18
|
var _this = this;
|
|
19
19
|
var _a, _b;
|
|
20
20
|
(_b = (_a = this.control) === null || _a === void 0 ? void 0 : _a.control) === null || _b === void 0 ? void 0 : _b.statusChanges.pipe(operators.takeUntil(this.endObs)).subscribe(function () {
|
|
21
|
-
var _a;
|
|
22
|
-
|
|
21
|
+
var _a, _b;
|
|
22
|
+
if (!((_a = _this.control.control) === null || _a === void 0 ? void 0 : _a.disabled)) {
|
|
23
|
+
_this.validityChange.next(!((_b = _this.control.control) === null || _b === void 0 ? void 0 : _b.invalid));
|
|
24
|
+
}
|
|
23
25
|
});
|
|
24
26
|
this.el.nativeElement.placeholder += ' ';
|
|
25
27
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mis-crystal-design-system-input.umd.js","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","../../../projects/mis-components/input/mis-crystal-design-system-input.ts"],"sourcesContent":["import {\n Directive,\n ElementRef,\n OnDestroy,\n OnInit,\n Optional,\n Self,\n} 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(\n public el: ElementRef,\n @Self() @Optional() private control: NgControl\n ) {}\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?.statusChanges\n .pipe(takeUntil(this.endObs))\n .subscribe(() => {\n this.validityChange.next(this.control.control?.
|
|
1
|
+
{"version":3,"file":"mis-crystal-design-system-input.umd.js","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","../../../projects/mis-components/input/mis-crystal-design-system-input.ts"],"sourcesContent":["import {\n Directive,\n ElementRef,\n OnDestroy,\n OnInit,\n Optional,\n Self,\n} 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(\n public el: ElementRef,\n @Self() @Optional() private control: NgControl\n ) {}\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?.statusChanges\n .pipe(takeUntil(this.endObs))\n .subscribe(() => {\n if(!this.control.control?.disabled){\n this.validityChange.next(!this.control.control?.invalid);\n }\n });\n this.el.nativeElement.placeholder += ' ';\n }\n ngOnDestroy(): void {\n this.endObs.next();\n this.endObs.complete();\n }\n}\n","import {\n Component,\n ContentChild,\n Input,\n OnDestroy,\n OnInit,\n ViewEncapsulation,\n} from '@angular/core';\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() 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.inputSubscription?.unsubscribe();\n this.inputSubscription = input?.validity.subscribe(\n (res) => (this.inputValidity = res)\n );\n this.placeholder += ' ';\n }\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":["ReplaySubject","Subject","takeUntil","Directive","ElementRef","NgControl","Self","Optional","Component","Input","ContentChild","NgModule","CommonModule","FormsModule"],"mappings":";;;;;;;QAiBE,2BACS,EAAc,EACO,OAAkB;YADvC,OAAE,GAAF,EAAE,CAAY;YACO,YAAO,GAAP,OAAO,CAAW;YAExC,mBAAc,GAA2B,IAAIA,kBAAa,CAAC,CAAC,CAAC,CAAC;YACtE,aAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,YAAY,EAAE,CAAC;YAC9C,WAAM,GAAkB,IAAIC,YAAO,EAAE,CAAC;YACtC,UAAK,GAAG,KAAK,CAAC;YACd,aAAQ,GAAG,KAAK,CAAC;SALb;QAOJ,oCAAQ,GAAR;YAAA,iBASC;;YARC,YAAA,IAAI,CAAC,OAAO,0CAAE,OAAO,0CAAE,aAAa,CACjC,IAAI,CAACC,mBAAS,CAAC,IAAI,CAAC,MAAM,CAAC,EAC3B,SAAS,CAAC;;gBACT,IAAG,QAAC,KAAI,CAAC,OAAO,CAAC,OAAO,0CAAE,QAAQ,CAAA,EAAC;oBACjC,KAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAC,KAAI,CAAC,OAAO,CAAC,OAAO,0CAAE,OAAO,CAAA,CAAC,CAAC;iBAC1D;aACF,EAAE;YACL,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,WAAW,IAAI,GAAG,CAAC;SAC1C;QACD,uCAAW,GAAX;YACE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;YACnB,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;SACxB;;;;gBA5BFC,cAAS,SAAC;;oBAET,QAAQ,EAAE,iBAAiB;iBAC5B;;;gBAbCC,eAAU;gBAMHC,eAAS,uBAWbC,SAAI,YAAIC,aAAQ;;;;QCcnB;YAhBS,SAAI,GAA2B,UAAU,CAAC;YAE1C,YAAO,GAAG,KAAK,CAAC;YAChB,aAAQ,GAAG,KAAK,CAAC;YAY1B,kBAAa,GAAY,IAAI,CAAC;SACd;QAZhB,sBAAqC,wCAAS;iBAA9C,UAA+C,KAAwB;gBAAvE,iBASC;;gBARC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;oBACrB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,EAAE,CAAC,aAAa,CAAC,WAAW,CAAC;iBACvD;gBACD,MAAA,IAAI,CAAC,iBAAiB,0CAAE,WAAW,GAAG;gBACtC,IAAI,CAAC,iBAAiB,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,CAAC,SAAS,CAChD,UAAC,GAAG,IAAK,QAAC,KAAI,CAAC,aAAa,GAAG,GAAG,IAAC,CACpC,CAAC;gBACF,IAAI,CAAC,WAAW,IAAI,GAAG,CAAC;aACzB;;;WAAA;QAKD,oCAAQ,GAAR,eAAmB;QACnB,uCAAW,GAAX;;YACE,MAAA,IAAI,CAAC,iBAAiB,0CAAE,WAAW,GAAG;SACvC;;;;gBA3BFC,cAAS,SAAC;oBACT,QAAQ,EAAE,WAAW;oBACrB,6mBAAyC;;iBAE1C;;;;uBAEEC,UAAK;8BACLA,UAAK;0BACLA,UAAK;2BACLA,UAAK;4BACLC,iBAAY,SAAC,iBAAiB;;;;QCVjC;;;;;gBALCC,aAAQ,SAAC;oBACR,YAAY,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,CAAC;oBACpD,OAAO,EAAE,CAACC,mBAAY,EAAEC,iBAAW,CAAC;oBACpC,OAAO,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,CAAC;iBAChD;;;ICVD;;;;;;;;;;;;;;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
!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.statusChanges.pipe(o.takeUntil(this.endObs)).subscribe((function(){var n;i.validityChange.next(null===(
|
|
1
|
+
!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.statusChanges.pipe(o.takeUntil(this.endObs)).subscribe((function(){var n,t;(null===(n=i.control.control)||void 0===n?void 0:n.disabled)||i.validityChange.next(!(null===(t=i.control.control)||void 0===t?void 0:t.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.noHints=!1,this.hasError=!1,this.inputValidity=!0}return Object.defineProperty(n.prototype,"formInput",{set:function(n){var t,i=this;this.placeholder||(this.placeholder=n.el.nativeElement.placeholder),null===(t=this.inputSubscription)||void 0===t||t.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 class="input-container" [ngClass]="{\'rounded\': type === \'rounded\', \'floating\': type === \'floating\', \'has-error\': !inputValidity || hasError, \'no-hint\': noHints}">\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>',styles:[".input-container{position:relative;padding-bottom:24px}.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}.input-container .input-wrapper>:not(:last-child){margin-right: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-wrapper{border-radius:4px;border:1px solid #e0e0e0}.input-container.rounded .input-wrapper:focus-within,.input-container.rounded .input-wrapper:hover{background-color:#f5f5f5}.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{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}],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})}));
|
|
2
2
|
//# sourceMappingURL=mis-crystal-design-system-input.umd.min.js.map
|
|
@@ -1 +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","statusChanges","pipe","takeUntil","subscribe","next","
|
|
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","statusChanges","pipe","takeUntil","subscribe","disabled","next","invalid","nativeElement","placeholder","ngOnDestroy","complete","Directive","args","selector","ElementRef","NgControl","decorators","type","Self","Optional","MisInputComponent","noHints","hasError","inputValidity","Object","defineProperty","input","inputSubscription","unsubscribe","res","Component","template","Input","ContentChild","NgModule","declarations","imports","CommonModule","FormsModule","exports"],"mappings":"uoBAiBE,SAAAA,EACSC,EACqBC,GADrBC,KAAAF,GAAAA,EACqBE,KAAAD,QAAAA,EAEtBC,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,cACpBC,KAAKC,EAAAA,UAAUhB,KAAKK,SACpBY,WAAU,oBACe,QAArBJ,EAACF,EAAKZ,QAAQA,eAAO,IAAAc,OAAA,EAAAA,EAAEK,WACxBP,EAAKV,eAAekB,OAA0B,QAArBP,EAACD,EAAKZ,QAAQA,eAAO,IAAAa,OAAA,EAAAA,EAAEQ,aAGtDpB,KAAKF,GAAGuB,cAAcC,aAAe,KAEvCzB,EAAAY,UAAAc,YAAA,WACEvB,KAAKK,OAAOc,OACZnB,KAAKK,OAAOmB,qCA3BfC,EAAAA,UAASC,KAAA,CAAC,CAETC,SAAU,+DAZVC,EAAAA,kBAMOC,EAAAA,UAASC,WAAA,CAAA,CAAAC,KAWbC,EAAAA,MAAI,CAAAD,KAAIE,EAAAA,+BCcX,SAAAC,IAhBSlC,KAAA+B,KAA+B,WAE/B/B,KAAAmC,SAAU,EACVnC,KAAAoC,UAAW,EAYpBpC,KAAAqC,eAAyB,SAXzBC,OAAAC,eAAqCL,EAAAzB,UAAA,YAAS,KAA9C,SAA+C+B,GAA/C,MAAA7B,EAAAX,KACOA,KAAKsB,cACRtB,KAAKsB,YAAckB,EAAM1C,GAAGuB,cAAcC,aAEtB,QAAtBT,EAAAb,KAAKyC,yBAAiB,IAAA5B,GAAAA,EAAE6B,cACxB1C,KAAKyC,kBAAoBD,MAAAA,OAAK,EAALA,EAAOrC,SAASc,WACvC,SAAC0B,GAAQ,OAAChC,EAAK0B,cAAgBM,KAEjC3C,KAAKsB,aAAe,qCAMtBY,EAAAzB,UAAAC,SAAA,aACAwB,EAAAzB,UAAAc,YAAA,iBACwB,QAAtBV,EAAAb,KAAKyC,yBAAiB,IAAA5B,GAAAA,EAAE6B,wCA1B3BE,EAAAA,UAASlB,KAAA,CAAC,CACTC,SAAU,YACVkB,SAAA,8zJAICC,EAAAA,2BACAA,EAAAA,uBACAA,EAAAA,wBACAA,EAAAA,yBACAC,EAAAA,aAAYrB,KAAA,CAAC7B,YCVhB,iCALCmD,EAAAA,SAAQtB,KAAA,CAAC,CACRuB,aAAc,CAACf,EAAmBrC,GAClCqD,QAAS,CAACC,EAAAA,aAAcC,EAAAA,aACxBC,QAAS,CAACnB,EAAmBrC","sourcesContent":["import {\n Directive,\n ElementRef,\n OnDestroy,\n OnInit,\n Optional,\n Self,\n} 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(\n public el: ElementRef,\n @Self() @Optional() private control: NgControl\n ) {}\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?.statusChanges\n .pipe(takeUntil(this.endObs))\n .subscribe(() => {\n if(!this.control.control?.disabled){\n this.validityChange.next(!this.control.control?.invalid);\n }\n });\n this.el.nativeElement.placeholder += ' ';\n }\n ngOnDestroy(): void {\n this.endObs.next();\n this.endObs.complete();\n }\n}\n","import {\n Component,\n ContentChild,\n Input,\n OnDestroy,\n OnInit,\n ViewEncapsulation,\n} from '@angular/core';\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() 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.inputSubscription?.unsubscribe();\n this.inputSubscription = input?.validity.subscribe(\n (res) => (this.inputValidity = res)\n );\n this.placeholder += ' ';\n }\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"]}
|
|
@@ -15,8 +15,10 @@ export class MisInputDirective {
|
|
|
15
15
|
ngOnInit() {
|
|
16
16
|
var _a, _b;
|
|
17
17
|
(_b = (_a = this.control) === null || _a === void 0 ? void 0 : _a.control) === null || _b === void 0 ? void 0 : _b.statusChanges.pipe(takeUntil(this.endObs)).subscribe(() => {
|
|
18
|
-
var _a;
|
|
19
|
-
|
|
18
|
+
var _a, _b;
|
|
19
|
+
if (!((_a = this.control.control) === null || _a === void 0 ? void 0 : _a.disabled)) {
|
|
20
|
+
this.validityChange.next(!((_b = this.control.control) === null || _b === void 0 ? void 0 : _b.invalid));
|
|
21
|
+
}
|
|
20
22
|
});
|
|
21
23
|
this.el.nativeElement.placeholder += ' ';
|
|
22
24
|
}
|
|
@@ -35,4 +37,4 @@ MisInputDirective.ctorParameters = () => [
|
|
|
35
37
|
{ type: ElementRef },
|
|
36
38
|
{ type: NgControl, decorators: [{ type: Self }, { type: Optional }] }
|
|
37
39
|
];
|
|
38
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
40
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbWlzLWNvbXBvbmVudHMvaW5wdXQvZGlyZWN0aXZlcy9pbnB1dC9pbnB1dC5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLFNBQVMsRUFDVCxVQUFVLEVBR1YsUUFBUSxFQUNSLElBQUksR0FDTCxNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDM0MsT0FBTyxFQUFFLGFBQWEsRUFBRSxPQUFPLEVBQWdCLE1BQU0sTUFBTSxDQUFDO0FBQzVELE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQU0zQyxNQUFNLE9BQU8saUJBQWlCO0lBQzVCLFlBQ1MsRUFBYyxFQUNPLE9BQWtCO1FBRHZDLE9BQUUsR0FBRixFQUFFLENBQVk7UUFDTyxZQUFPLEdBQVAsT0FBTyxDQUFXO1FBRXhDLG1CQUFjLEdBQTJCLElBQUksYUFBYSxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQ3RFLGFBQVEsR0FBRyxJQUFJLENBQUMsY0FBYyxDQUFDLFlBQVksRUFBRSxDQUFDO1FBQzlDLFdBQU0sR0FBa0IsSUFBSSxPQUFPLEVBQUUsQ0FBQztRQUN0QyxVQUFLLEdBQUcsS0FBSyxDQUFDO1FBQ2QsYUFBUSxHQUFHLEtBQUssQ0FBQztJQUxkLENBQUM7SUFPSixRQUFROztRQUNOLFlBQUEsSUFBSSxDQUFDLE9BQU8sMENBQUUsT0FBTywwQ0FBRSxhQUFhLENBQ2pDLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxFQUMzQixTQUFTLENBQUMsR0FBRyxFQUFFOztZQUNkLElBQUcsUUFBQyxJQUFJLENBQUMsT0FBTyxDQUFDLE9BQU8sMENBQUUsUUFBUSxDQUFBLEVBQUM7Z0JBQ2pDLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLFFBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxPQUFPLDBDQUFFLE9BQU8sQ0FBQSxDQUFDLENBQUM7YUFDMUQ7UUFDSCxDQUFDLEVBQUU7UUFDTCxJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsQ0FBQyxXQUFXLElBQUksR0FBRyxDQUFDO0lBQzNDLENBQUM7SUFDRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUNuQixJQUFJLENBQUMsTUFBTSxDQUFDLFFBQVEsRUFBRSxDQUFDO0lBQ3pCLENBQUM7OztZQTVCRixTQUFTLFNBQUM7Z0JBQ1QsMkJBQTJCO2dCQUMzQixRQUFRLEVBQUUsaUJBQWlCO2FBQzVCOzs7WUFiQyxVQUFVO1lBTUgsU0FBUyx1QkFXYixJQUFJLFlBQUksUUFBUSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIERpcmVjdGl2ZSxcbiAgRWxlbWVudFJlZixcbiAgT25EZXN0cm95LFxuICBPbkluaXQsXG4gIE9wdGlvbmFsLFxuICBTZWxmLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE5nQ29udHJvbCB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7IFJlcGxheVN1YmplY3QsIFN1YmplY3QsIFN1YnNjcmlwdGlvbiB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgdGFrZVVudGlsIH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xuXG5ARGlyZWN0aXZlKHtcbiAgLy8gdHNsaW50OmRpc2FibGUtbmV4dC1saW5lXG4gIHNlbGVjdG9yOiAnaW5wdXRbbWlzSW5wdXRdJyxcbn0pXG5leHBvcnQgY2xhc3MgTWlzSW5wdXREaXJlY3RpdmUgaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSB7XG4gIGNvbnN0cnVjdG9yKFxuICAgIHB1YmxpYyBlbDogRWxlbWVudFJlZixcbiAgICBAU2VsZigpIEBPcHRpb25hbCgpIHByaXZhdGUgY29udHJvbDogTmdDb250cm9sXG4gICkge31cbiAgcHJpdmF0ZSB2YWxpZGl0eUNoYW5nZTogUmVwbGF5U3ViamVjdDxib29sZWFuPiA9IG5ldyBSZXBsYXlTdWJqZWN0KDEpO1xuICB2YWxpZGl0eSA9IHRoaXMudmFsaWRpdHlDaGFuZ2UuYXNPYnNlcnZhYmxlKCk7XG4gIGVuZE9iczogU3ViamVjdDx2b2lkPiA9IG5ldyBTdWJqZWN0KCk7XG4gIGZvY3VzID0gZmFsc2U7XG4gIGhhc1ZhbHVlID0gZmFsc2U7XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgdGhpcy5jb250cm9sPy5jb250cm9sPy5zdGF0dXNDaGFuZ2VzXG4gICAgICAucGlwZSh0YWtlVW50aWwodGhpcy5lbmRPYnMpKVxuICAgICAgLnN1YnNjcmliZSgoKSA9PiB7XG4gICAgICAgIGlmKCF0aGlzLmNvbnRyb2wuY29udHJvbD8uZGlzYWJsZWQpe1xuICAgICAgICAgIHRoaXMudmFsaWRpdHlDaGFuZ2UubmV4dCghdGhpcy5jb250cm9sLmNvbnRyb2w/LmludmFsaWQpO1xuICAgICAgICB9XG4gICAgICB9KTtcbiAgICB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQucGxhY2Vob2xkZXIgKz0gJyAnO1xuICB9XG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIHRoaXMuZW5kT2JzLm5leHQoKTtcbiAgICB0aGlzLmVuZE9icy5jb21wbGV0ZSgpO1xuICB9XG59XG4iXX0=
|
|
@@ -17,8 +17,10 @@ class MisInputDirective {
|
|
|
17
17
|
ngOnInit() {
|
|
18
18
|
var _a, _b;
|
|
19
19
|
(_b = (_a = this.control) === null || _a === void 0 ? void 0 : _a.control) === null || _b === void 0 ? void 0 : _b.statusChanges.pipe(takeUntil(this.endObs)).subscribe(() => {
|
|
20
|
-
var _a;
|
|
21
|
-
|
|
20
|
+
var _a, _b;
|
|
21
|
+
if (!((_a = this.control.control) === null || _a === void 0 ? void 0 : _a.disabled)) {
|
|
22
|
+
this.validityChange.next(!((_b = this.control.control) === null || _b === void 0 ? void 0 : _b.invalid));
|
|
23
|
+
}
|
|
22
24
|
});
|
|
23
25
|
this.el.nativeElement.placeholder += ' ';
|
|
24
26
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mis-crystal-design-system-input.js","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","../../../projects/mis-components/input/mis-crystal-design-system-input.ts"],"sourcesContent":["import {\n Directive,\n ElementRef,\n OnDestroy,\n OnInit,\n Optional,\n Self,\n} 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(\n public el: ElementRef,\n @Self() @Optional() private control: NgControl\n ) {}\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?.statusChanges\n .pipe(takeUntil(this.endObs))\n .subscribe(() => {\n this.validityChange.next(this.control.control?.
|
|
1
|
+
{"version":3,"file":"mis-crystal-design-system-input.js","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","../../../projects/mis-components/input/mis-crystal-design-system-input.ts"],"sourcesContent":["import {\n Directive,\n ElementRef,\n OnDestroy,\n OnInit,\n Optional,\n Self,\n} 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(\n public el: ElementRef,\n @Self() @Optional() private control: NgControl\n ) {}\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?.statusChanges\n .pipe(takeUntil(this.endObs))\n .subscribe(() => {\n if(!this.control.control?.disabled){\n this.validityChange.next(!this.control.control?.invalid);\n }\n });\n this.el.nativeElement.placeholder += ' ';\n }\n ngOnDestroy(): void {\n this.endObs.next();\n this.endObs.complete();\n }\n}\n","import {\n Component,\n ContentChild,\n Input,\n OnDestroy,\n OnInit,\n ViewEncapsulation,\n} from '@angular/core';\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() 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.inputSubscription?.unsubscribe();\n this.inputSubscription = input?.validity.subscribe(\n (res) => (this.inputValidity = res)\n );\n this.placeholder += ' ';\n }\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":";;;;;;MAgBa,iBAAiB;IAC5B,YACS,EAAc,EACO,OAAkB;QADvC,OAAE,GAAF,EAAE,CAAY;QACO,YAAO,GAAP,OAAO,CAAW;QAExC,mBAAc,GAA2B,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC;QACtE,aAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,YAAY,EAAE,CAAC;QAC9C,WAAM,GAAkB,IAAI,OAAO,EAAE,CAAC;QACtC,UAAK,GAAG,KAAK,CAAC;QACd,aAAQ,GAAG,KAAK,CAAC;KALb;IAOJ,QAAQ;;QACN,YAAA,IAAI,CAAC,OAAO,0CAAE,OAAO,0CAAE,aAAa,CACjC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,EAC3B,SAAS,CAAC;;YACT,IAAG,QAAC,IAAI,CAAC,OAAO,CAAC,OAAO,0CAAE,QAAQ,CAAA,EAAC;gBACjC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAC,IAAI,CAAC,OAAO,CAAC,OAAO,0CAAE,OAAO,CAAA,CAAC,CAAC;aAC1D;SACF,EAAE;QACL,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,WAAW,IAAI,GAAG,CAAC;KAC1C;IACD,WAAW;QACT,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;QACnB,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;KACxB;;;YA5BF,SAAS,SAAC;;gBAET,QAAQ,EAAE,iBAAiB;aAC5B;;;YAbC,UAAU;YAMH,SAAS,uBAWb,IAAI,YAAI,QAAQ;;;MCHR,iBAAiB;IAiB5B;QAhBS,SAAI,GAA2B,UAAU,CAAC;QAE1C,YAAO,GAAG,KAAK,CAAC;QAChB,aAAQ,GAAG,KAAK,CAAC;QAY1B,kBAAa,GAAY,IAAI,CAAC;KACd;IAZhB,IAAqC,SAAS,CAAC,KAAwB;;QACrE,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,EAAE,CAAC,aAAa,CAAC,WAAW,CAAC;SACvD;QACD,MAAA,IAAI,CAAC,iBAAiB,0CAAE,WAAW,GAAG;QACtC,IAAI,CAAC,iBAAiB,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,CAAC,SAAS,CAChD,CAAC,GAAG,MAAM,IAAI,CAAC,aAAa,GAAG,GAAG,CAAC,CACpC,CAAC;QACF,IAAI,CAAC,WAAW,IAAI,GAAG,CAAC;KACzB;IAKD,QAAQ,MAAW;IACnB,WAAW;;QACT,MAAA,IAAI,CAAC,iBAAiB,0CAAE,WAAW,GAAG;KACvC;;;YA3BF,SAAS,SAAC;gBACT,QAAQ,EAAE,WAAW;gBACrB,6mBAAyC;;aAE1C;;;;mBAEE,KAAK;0BACL,KAAK;sBACL,KAAK;uBACL,KAAK;wBACL,YAAY,SAAC,iBAAiB;;;MCVpB,cAAc;;;YAL1B,QAAQ,SAAC;gBACR,YAAY,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,CAAC;gBACpD,OAAO,EAAE,CAAC,YAAY,EAAE,WAAW,CAAC;gBACpC,OAAO,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,CAAC;aAChD;;;ACVD;;;;;;"}
|
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
.input-container {
|
|
2
|
+
position: relative;
|
|
3
|
+
padding-bottom: 24px;
|
|
4
|
+
.input-wrapper {
|
|
5
|
+
box-sizing: border-box;
|
|
6
|
+
display: flex;
|
|
7
|
+
align-items: center;
|
|
8
|
+
flex-direction: row;
|
|
9
|
+
flex-wrap: nowrap;
|
|
10
|
+
transition: all ease-in 60ms;
|
|
11
|
+
background-color: #ffffff;
|
|
12
|
+
padding: 3px 16px; // DONE CHANGE
|
|
13
|
+
& > :not(:last-child) {
|
|
14
|
+
margin-right: 16px;
|
|
15
|
+
}
|
|
16
|
+
.mis-input {
|
|
17
|
+
flex: 1 1 auto;
|
|
18
|
+
z-index: 0;
|
|
19
|
+
position: relative;
|
|
20
|
+
display: flex;
|
|
21
|
+
align-items: center;
|
|
22
|
+
}
|
|
23
|
+
input {
|
|
24
|
+
flex: 1 1 auto;
|
|
25
|
+
border: none;
|
|
26
|
+
outline: none;
|
|
27
|
+
height: 100%;
|
|
28
|
+
padding: 0;
|
|
29
|
+
font-family: Lato;
|
|
30
|
+
font-style: normal;
|
|
31
|
+
font-weight: normal;
|
|
32
|
+
font-size: 16px;
|
|
33
|
+
height: 24px;
|
|
34
|
+
color: #181f33;
|
|
35
|
+
background-color: transparent;
|
|
36
|
+
width: 100%;
|
|
37
|
+
vertical-align: middle;
|
|
38
|
+
&::placeholder {
|
|
39
|
+
transition: all ease-in 100ms;
|
|
40
|
+
opacity: 0;
|
|
41
|
+
transform-origin: left center;
|
|
42
|
+
color: transparent;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
.mis-placeholder {
|
|
46
|
+
position: absolute;
|
|
47
|
+
font-family: Lato;
|
|
48
|
+
font-style: normal;
|
|
49
|
+
font-weight: normal;
|
|
50
|
+
font-size: 16px;
|
|
51
|
+
line-height: 24px;
|
|
52
|
+
color: #6a737d;
|
|
53
|
+
z-index: -1;
|
|
54
|
+
transition: all ease-in 150ms;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
&:focus-within {
|
|
58
|
+
background-color: #f5f5f5;
|
|
59
|
+
}
|
|
60
|
+
&:focus-within {
|
|
61
|
+
border: 1px solid #0937b2;
|
|
62
|
+
}
|
|
63
|
+
[mis-input-act],
|
|
64
|
+
[mis-input-icon] {
|
|
65
|
+
width: 18px;
|
|
66
|
+
height: 18px;
|
|
67
|
+
color: #6a737d;
|
|
68
|
+
font-size: 24px;
|
|
69
|
+
line-height: 18px;
|
|
70
|
+
}
|
|
71
|
+
[mis-input-act] {
|
|
72
|
+
cursor: pointer;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
&.no-hint {
|
|
76
|
+
padding-bottom: 0px;
|
|
77
|
+
}
|
|
78
|
+
&.rounded {
|
|
79
|
+
.input-wrapper {
|
|
80
|
+
border-radius: 4px;
|
|
81
|
+
border: 1px solid #e0e0e0;
|
|
82
|
+
&:hover,
|
|
83
|
+
&:focus-within {
|
|
84
|
+
background-color: #f5f5f5;
|
|
85
|
+
}
|
|
86
|
+
input:not(:placeholder-shown) + .mis-placeholder {
|
|
87
|
+
color: transparent !important;
|
|
88
|
+
}
|
|
89
|
+
.mis-placeholder {
|
|
90
|
+
transition-duration: 50ms;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
&.has-error {
|
|
94
|
+
.input-wrapper {
|
|
95
|
+
border: 1px solid #b00020 !important;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
&.floating {
|
|
100
|
+
.input-wrapper {
|
|
101
|
+
padding-top: 24px;
|
|
102
|
+
padding-bottom: 7px; // DONE CHANGE
|
|
103
|
+
border-bottom: 1px solid #e0e0e0;
|
|
104
|
+
input:focus + .mis-placeholder {
|
|
105
|
+
color: #0937b2 !important;
|
|
106
|
+
}
|
|
107
|
+
input:not(:placeholder-shown) + .mis-placeholder,
|
|
108
|
+
input:focus + .mis-placeholder {
|
|
109
|
+
transform: translateY(calc(-100% + 6px)) !important;
|
|
110
|
+
font-size: 12px !important;
|
|
111
|
+
letter-spacing: 0.2px !important;
|
|
112
|
+
}
|
|
113
|
+
&:focus-within {
|
|
114
|
+
border: none;
|
|
115
|
+
border-bottom: 1px solid #0937b2;
|
|
116
|
+
input::placeholder {
|
|
117
|
+
color: #6a737d;
|
|
118
|
+
opacity: 1;
|
|
119
|
+
font-size: 16px;
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
&.has-error {
|
|
124
|
+
.input-wrapper {
|
|
125
|
+
border-bottom: 1px solid #b00020 !important;
|
|
126
|
+
.mis-placeholder {
|
|
127
|
+
color: #b00020 !important;
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
[mis-input-hint],
|
|
133
|
+
[mis-input-error] {
|
|
134
|
+
position: absolute;
|
|
135
|
+
left: 0;
|
|
136
|
+
right: 0px;
|
|
137
|
+
bottom: 0px;
|
|
138
|
+
line-height: 24px;
|
|
139
|
+
height: 24px;
|
|
140
|
+
font-size: 12px;
|
|
141
|
+
color: #6a737d;
|
|
142
|
+
letter-spacing: 0.2px;
|
|
143
|
+
}
|
|
144
|
+
[mis-input-error] {
|
|
145
|
+
color: #b00020;
|
|
146
|
+
}
|
|
147
|
+
}
|