{"__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"}]}],"members":{}},"LyPlaceholder":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":50,"character":1},"arguments":[{"selector":"ly-placeholder"}]}],"members":{}},"LyDefault":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":55,"character":1},"arguments":[{"selector":"ly-default"}]}],"members":{}},"LyLabel":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":60,"character":1},"arguments":[{"selector":"ly-label"}]}],"members":{}},"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\")"},"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","name":"LyFieldDirective"}]}]}],"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","name":"LyInputContents"},{"__symbolic":"reference","name":"LyFieldDirective"},{"__symbolic":"reference","name":"LyInputCommon"},{"__symbolic":"reference","name":"LyDefault"},{"__symbolic":"reference","name":"LyLabel"},{"__symbolic":"reference","name":"LyPlaceholder"}],"declarations":[{"__symbolic":"reference","name":"LyInput"},{"__symbolic":"reference","name":"LyInputContents"},{"__symbolic":"reference","name":"LyFieldDirective"},{"__symbolic":"reference","name":"LyInputCommon"},{"__symbolic":"reference","name":"LyDefault"},{"__symbolic":"reference","name":"LyLabel"},{"__symbolic":"reference","name":"LyPlaceholder"}]}]}],"members":{}},"LyInputContents":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":1,"character":1},"arguments":[{"selector":"ly-before-input, ly-after-input"}]}],"members":{}},"LyFieldDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":17,"character":1},"arguments":[{"selector":"ly-input input, ly-textarea textarea"}]}],"members":{"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"focus":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":27,"character":3},"arguments":["focus",["true"]]}]}],"_blur":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":30,"character":3},"arguments":["blur",["false"]]}]}],"_noop":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":33,"character":3},"arguments":["input"]}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":44,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self","line":44,"character":17}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":45,"character":5}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":46,"character":5}}],null],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":43,"character":23},{"__symbolic":"reference","module":"@angular/forms","name":"NgControl","line":44,"character":43},{"__symbolic":"reference","module":"@angular/forms","name":"NgForm","line":45,"character":37},{"__symbolic":"reference","module":"@angular/forms","name":"FormGroupDirective","line":46,"character":42},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":47,"character":16}]}],"markForCheck":[{"__symbolic":"method"}],"_parent":[{"__symbolic":"method"}],"_updateErrorState":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}},"origins":{"LyInputCommon":"./input","LyPlaceholder":"./input","LyDefault":"./input","LyLabel":"./input","LyInput":"./input","LyInputModule":"./input","LyInputContents":"./input-contents","LyFieldDirective":"./ly-field.directive"},"importAs":"alyle-ui/input"}