[{"__symbolic":"module","version":4,"metadata":{"LyInputCommon":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":45,"character":1},"arguments":[{"selector":"ly-default, ly-before, ly-after, ly-input ly-error, ly-input ly-hint"}]}]},"LyPlaceholder":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":50,"character":1},"arguments":[{"selector":"ly-placeholder"}]}]},"LyDefault":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":55,"character":1},"arguments":[{"selector":"ly-default"}]}]},"LyLabel":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":60,"character":1},"arguments":[{"selector":"ly-label"}]}]},"LyInput":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":66,"character":1},"arguments":[{"selector":"ly-text-field, ly-input, ly-textarea","styles":[":host { display: inline-block; position: relative; align-items: center; } :host /deep/ ly-before, :host /deep/ ly-after { display: inline-block; vertical-align: inherit; } :host /deep/ input, :host /deep/ textarea { border: none; outline: none; font-family: inherit; color: inherit; background: transparent; font-size: inherit; width: 100%; font-weight: 400; padding: 0; display: inline-flex; } :host.ly-hidden-input /deep/ .ly-input-container input, :host.ly-hidden-input /deep/ .ly-input-container textarea, :host.ly-default-off .ly-input-default { opacity: 0; } /** * Focus Input **/ :host.ly-focus-active .ly-input-underline:after { width: 100%; } :host.ly-focus-active .ly-input-top-label, :host.ly-focus-active /deep/ ly-top-label { font-size: 75%; top: 0; transform: translate(0, 0); } :host.ly-focus-active .ly-input-default { opacity: 0; } :host.ly-value-on .ly-input-placeholder { opacity: 0; } .ly-input-underline { position: absolute; bottom: 0.875em; height: 1px; right: 0; left: 0; } .ly-input-underline:after { content: ''; position: absolute; width: 0%; height: 2px; background: currentColor; left: 0; right: 0; margin: 0 auto; bottom: 0; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; } .ly-input-underline.ly-disabled { background: transparent; background-image: linear-gradient(to right, #b4b4b4 0%, #b4b4b4 33%, transparent 0%); background-size: 4px 1px; background-repeat: repeat-x; border-top: 0; background-position: 0; } .ly-input-underline.ly-disabled:after { width: 0%; } :host.ly-label-above .ly-input-float-label { font-size: 75%; top: 0; } /** * ly-label(placeholder) */ .ly-input-placeholder, .ly-input-default, .ly-input-float-label { pointer-events: none; position: absolute; bottom: 1.125em; top: 1.125em; margin: auto; font-size: 100%; transition: all 375ms cubic-bezier(0.23, 1, 0.32, 1); color: inherit; width: 100%; } .ly-input-content { width: 100%; position: relative; display: flex; } .ly-input-container { padding: 1.125em 0; position: relative; opacity: 1; display: inline-block; vertical-align: inherit; width: 100%; } .ly-input-container ::ng-deep input { text-align: inherit; } .bottom-field, .ly-error-container { position: absolute; bottom: 0; left: 0; width: 100%; pointer-events: none; font-size: 75%; transform: translate3d(0, calc(100% - 1.1em), 0); display: flex; } .bottom-field .bottom-field-space, .ly-error-container .bottom-field-space { flex: 1; } .ly-required { position: absolute; top: 1.125em; right: 0; pointer-events: none; transform: translate3d(0, 0, 0); opacity: 0.45; } :host.ly-input-invalid .ly-input-underline, :host.ly-input-invalid .ly-input-placeholder, :host.ly-input-invalid /deep/ ly-error, :host.ly-input-invalid .ly-input-float-label { color: #F44336 !important; } :host.ly-input-invalid .ly-input-underline:after { width: 100%; } .ly-input-content { color: currentColor; } "],"template":"<ng-content select=\"ly-before\"></ng-content> <div class=\"ly-input-underline\" [color]=\"inputColor\" bg=\"input:underline\"></div> <div class=\"ly-input-container\"> <ng-content select=\"input, textarea\"></ng-content> <!-- ly-placeholder --> <ng-container *ngIf=\"placeholder; then isPlaceholderTemplate; else placeholderContainer\"></ng-container> <ng-template #isPlaceholderTemplate> <div *ngIf=\"toBoolean(placeholder) !== undefined && placeholderState\" color=\"input:label\" class=\"ly-input-placeholder\">{{ placeholder }}</div> </ng-template> <ng-template #placeholderContainer> <div *ngIf=\"lyPlaceholder !== undefined && placeholderState\" color=\"input:label\" class=\"ly-input-placeholder\"> <ng-content select=\"ly-placeholder\"></ng-content> </div> </ng-template> <!-- ly-default --> <ng-container *ngIf=\"toBoolean(default); then isDefaultTemplate\"></ng-container> <ng-template #isDefaultTemplate> <div *ngIf=\"!(lyDefault !== undefined) && defaultOff\" color=\"input:label\" class=\"ly-input-default\">Default: {{ default }}</div> <div *ngIf=\"lyDefault !== undefined && defaultOff\" color=\"input:label\" class=\"ly-input-default\"> <ng-content select=\"ly-default\"></ng-content>{{ default }} </div> </ng-template> <!-- ly-label --> <ng-container *ngIf=\"toBoolean(label); then _isLabelTemplate; else labelContainer\"></ng-container> <ng-template #_isLabelTemplate> <div *ngIf=\"label !== undefined\" color=\"input:label\" class=\"ly-input-float-label\">{{ label }}</div> </ng-template> <ng-template #labelContainer> <div *ngIf=\"lyLabel\" color=\"input:label\" class=\"ly-input-float-label\"> <ng-content select=\"ly-label\"></ng-content> </div> </ng-template> </div> <div class=\"ly-icon-required\" *ngIf=\"required\"></div> <div class=\"bottom-field\" *ngIf=\"!_isErrorState()\"> <ng-content select=\"ly-hint[align=start], ly-hint:not(ly-hint[align])\"></ng-content> <span class=\"bottom-field-space\"></span> <ng-content select=\"ly-hint[align=end]\"></ng-content> </div> <div class=\"bottom-field\" *ngIf=\"_isErrorState()\"> <ng-content select=\"ly-error\"></ng-content> </div> <ng-content select=\"ly-after\"></ng-content> ","host":{"[class.ly-input-invalid]":"_isErrorState()","[class.ng-untouched]":"_shouldForward(\"untouched\")","[class.ng-touched]":"_shouldForward(\"touched\")","[class.ng-pristine]":"_shouldForward(\"pristine\")","[class.ng-dirty]":"_shouldForward(\"dirty\")","[class.ng-valid]":"_shouldForward(\"valid\")","[class.ng-invalid]":"_shouldForward(\"invalid\")","[class.ng-pending]":"_shouldForward(\"pending\")","$quoted$":["[class.ly-input-invalid]","[class.ng-untouched]","[class.ng-touched]","[class.ng-pristine]","[class.ng-dirty]","[class.ng-valid]","[class.ng-invalid]","[class.ng-pending]"]},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":81,"character":19},"member":"OnPush"},"preserveWhitespaces":false}]}],"members":{"_field":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":93,"character":3},"arguments":[{"__symbolic":"reference","module":"./ly-field.directive","name":"LyFieldDirective","line":93,"character":16}]}]}],"lyPlaceholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":94,"character":3},"arguments":[{"__symbolic":"reference","name":"LyPlaceholder"}]}]}],"lyDefault":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":95,"character":3},"arguments":[{"__symbolic":"reference","name":"LyDefault"}]}]}],"lyLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":96,"character":3},"arguments":[{"__symbolic":"reference","name":"LyLabel"}]}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":97,"character":3}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":98,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":99,"character":3}}]}],"labelAbove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":100,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"alyle-ui/core","name":"IsBoolean","line":100,"character":12}}]}],"default":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":101,"character":3}}]}],"isFloatingLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":107,"character":3},"arguments":["class.ly-label-above"]}]}],"inputColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":119,"character":3},"arguments":["inputColor"]}]}],"focusState":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":129,"character":3},"arguments":["class.ly-focus-active"]}]}],"defaultOff":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":130,"character":3},"arguments":["class.ly-hidden-input"]}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":135,"character":3}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":137,"character":3}}]}],"currentValueState":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":139,"character":3},"arguments":["class.ly-value-on"]}]}],"_valueBoolean":[{"__symbolic":"method"}],"_isErrorState":[{"__symbolic":"method"}],"updateError":[{"__symbolic":"method"}],"value":[{"__symbolic":"method"}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"alyle-ui/core","name":"LyTheme","line":162,"character":19},{"__symbolic":"reference","module":"alyle-ui/core","name":"LyStyleTheme","line":163,"character":24},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":164,"character":32}]}],"toBoolean":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"_shouldForward":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"LyInputModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":243,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":244,"character":12},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":244,"character":26},{"__symbolic":"reference","module":"alyle-ui/core","name":"ThemeModule","line":244,"character":39}],"exports":[{"__symbolic":"reference","name":"LyInput"},{"__symbolic":"reference","module":"./input-contents","name":"LyInputContents","line":245,"character":21},{"__symbolic":"reference","module":"./ly-field.directive","name":"LyFieldDirective","line":245,"character":38},{"__symbolic":"reference","name":"LyInputCommon"},{"__symbolic":"reference","name":"LyDefault"},{"__symbolic":"reference","name":"LyLabel"},{"__symbolic":"reference","name":"LyPlaceholder"}],"declarations":[{"__symbolic":"reference","name":"LyInput"},{"__symbolic":"reference","module":"./input-contents","name":"LyInputContents","line":246,"character":26},{"__symbolic":"reference","module":"./ly-field.directive","name":"LyFieldDirective","line":246,"character":43},{"__symbolic":"reference","name":"LyInputCommon"},{"__symbolic":"reference","name":"LyDefault"},{"__symbolic":"reference","name":"LyLabel"},{"__symbolic":"reference","name":"LyPlaceholder"}]}]}]}}}]