{"__symbolic":"module","version":4,"metadata":{"TsFormFieldModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":17,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":19,"character":4},{"__symbolic":"reference","module":"@angular/flex-layout","name":"FlexLayoutModule","line":20,"character":4},{"__symbolic":"reference","module":"@terminus/ui/validation-messages","name":"TsValidationMessagesModule","line":21,"character":4}],"declarations":[{"__symbolic":"reference","name":"TsFormFieldComponent"},{"__symbolic":"reference","name":"TsLabelDirective"},{"__symbolic":"reference","name":"TsPrefixDirective"},{"__symbolic":"reference","name":"TsSuffixDirective"}],"exports":[{"__symbolic":"reference","name":"TsFormFieldComponent"},{"__symbolic":"reference","name":"TsLabelDirective"},{"__symbolic":"reference","name":"TsPrefixDirective"},{"__symbolic":"reference","name":"TsSuffixDirective"}]}]}],"members":{}},"TsFormFieldComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":61,"character":1},"arguments":[{"selector":"ts-form-field","host":{"class":"ts-form-field","[class.ts-form-field--invalid]":"controlIsInErrorState","[class.ts-form-field--float]":"shouldLabelFloat()","[class.ts-form-field--disabled]":"control.isDisabled","[class.ts-form-field--focused]":"control.focused","[class.ts-form-field--accent]":"theme == \"accent\"","[class.ts-form-field--warn]":"theme == \"warn\"","[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","[class.ts-form-field--invalid]","[class.ts-form-field--float]","[class.ts-form-field--disabled]","[class.ts-form-field--focused]","[class.ts-form-field--accent]","[class.ts-form-field--warn]","[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"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":82,"character":17},"member":"None"},"exportAs":"tsFormField","template":"<div\n  class=\"ts-form-field__wrapper qa-form-field\"\n  [ngClass]=\"{'ts-form-field--with-validation': !noValidationOrHint}\"\n>\n  <div\n    class=\"ts-form-field__container qa-form-field-container\"\n    #containerElement\n    (click)=\"control.onContainerClick && control.onContainerClick($event)\"\n  >\n\n    <div class=\"ts-form-field__outline qa-form-field-outline\">\n      <div class=\"ts-form-field__outline-start js-outline-start\"></div>\n      <div class=\"ts-form-field__outline-gap js-outline-gap\"></div>\n      <div class=\"ts-form-field__outline-end\"></div>\n    </div>\n    <div class=\"ts-form-field__outline ts-form-field__outline--thick qa-form-field-outline\">\n      <div class=\"ts-form-field__outline-start js-outline-start\"></div>\n      <div class=\"ts-form-field__outline-gap  js-outline-gap\"></div>\n      <div class=\"ts-form-field__outline-end\"></div>\n    </div>\n\n\n    <div class=\"ts-form-field__prefix qa-form-field-prefix\" *ngIf=\"prefixChildren.length\">\n      <ng-content select=\"[tsPrefix]\"></ng-content>\n    </div>\n\n\n    <div class=\"ts-form-field__infix qa-form-field-control-container\">\n      <ng-content>\n      </ng-content>\n\n      <span class=\"ts-form-field__label-wrapper\">\n        <!-- We add aria-owns as a workaround for an issue in JAWS & NVDA where the label isn't\n             read if it comes before the control in the DOM. -->\n        <label\n          class=\"ts-form-field__label qa-form-field-label\"\n          [attr.for]=\"id\"\n          [attr.aria-owns]=\"id\"\n          [class.ts-form-field__label--empty]=\"control.empty && !shouldAlwaysFloat\"\n          [class.ts-accent]=\"theme == 'accent'\"\n          [class.ts-warn]=\"theme == 'warn'\"\n          #labelElement\n        >\n          <ng-content select=\"ts-label\"></ng-content>\n\n          <span\n            class=\"ts-form-field-required-marker qa-form-field-required-marker\"\n            aria-hidden=\"true\"\n            *ngIf=\"!hideRequiredMarker && control.isRequired && !control.isDisabled\"\n          >*</span>\n        </label>\n      </span>\n    </div>\n\n\n    <div class=\"ts-form-field__suffix qa-form-field-suffix\" *ngIf=\"suffixChildren.length\">\n      <ng-content select=\"[tsSuffix]\"></ng-content>\n    </div>\n\n  </div>\n\n  <div\n    class=\"ts-form-field__subscript-wrapper\"\n    fxLayout=\"row\"\n    fxLayoutAlign=\"space-between center\"\n    [fxLayoutGap]=\"flexGap\"\n    *ngIf=\"!noValidationOrHint\"\n  >\n    <div *ngIf=\"control && (control.ngControl || control.formControl)\">\n      <ts-validation-messages\n        class=\"qa-form-field-validation-messages\"\n        [control]=\"control.ngControl || control.formControl\"\n        [validateOnChange]=\"validateOnChange\"\n      ></ts-validation-messages>\n    </div>\n\n    <div\n      class=\"ts-form-field__hint-wrapper\"\n      *ngIf=\"hint\"\n    >\n      <div\n        class=\"c-input__hint qa-form-field-hint\"\n      >{{ hint }}</div>\n    </div>\n  </div>\n</div>\n","styles":[":root{--swift-ease-out-duration:var(--ts-animation-time-duration-400);--swift-ease-out-timing-function:cubic-bezier(.25, .8, .25, 1);--swift-ease-in-duration:var(--ts-animation-time-duration-300);--swift-ease-in-timing-function:cubic-bezier(.55, 0, .55, .2)}.ts-form-field{--formField-outlineColor-default:var(--ts-color-utility-500);--formField-outlineColor-default-hover:var(--ts-color-base-black);--formField-outlineColor-theme:var(--ts-color-primary-500);--formField-outlineColor-disabled:var(--ts-color-utility-300);--formField-color-disabled:var(--ts-color-utility-500);--formField-outline-borderRadius:5px;--formField-outline-width:1px;--formField-outline-width-thick:2px;--formField-outline-labelOverlap:.25em;--formField-outline-sidePadding:.45em;--formField-outline-fontScale-subscript:.75;--formField-outline-subscript-padding:var(--formField-outline-sidePadding)/var(--formField-outline-fontScale-subscript);--formfield-lineHeight:1.125;--formField-fontScale-subscript:.75;--formField-infix-padding:.4em;--formField-infix-marginTop:calc(1em * var(--formfield-lineHeight) * var(--formField-fontScale-subscript));--formField-infix-marginTop-negative:calc(-1 * var(--formField-infix-marginTop));--formField-marginTop-subscript:calc(.5em / var(--formField-fontScale-subscript));--formField-wrapper-paddingBottom:1.43em;--formField-outline-labelOffset:-.35em;display:block}.ts-form-field :not(.mat-form-field-label-wrapper){box-sizing:border-box}.ts-form-field h1,.ts-form-field h2,.ts-form-field h3,.ts-form-field h4,.ts-form-field h5,.ts-form-field p{margin:unset}.ts-form-field.ts-form-field--focused .ts-form-field__outline,.ts-form-field.ts-form-field--invalid .ts-form-field__outline{opacity:0;transition:opacity .1s var(--swift-ease-out-timing-function)}.ts-form-field.ts-form-field--focused .ts-form-field__outline--thick,.ts-form-field.ts-form-field--invalid .ts-form-field__outline--thick{opacity:1}.ts-form-field:not(.ts-form-field--disabled) .ts-form-field__container:hover .ts-form-field__outline{opacity:0;transition:opacity .6s var(--swift-ease-out-timing-function)}.ts-form-field:not(.ts-form-field--disabled) .ts-form-field__container:hover .ts-form-field__outline--thick{opacity:1}.ts-form-field.ts-form-field--float .ts-form-field__label{--translate:calc(var(--formField-infix-marginTop-negative) - (var(--formField-infix-padding) + var(--formField-outline-labelOffset)));transform:translateY(var(--translate)) scale(var(--formField-fontScale-subscript));width:100%/var(--formField-fontScale-subscript)}.ts-form-field.ts-form-field--float .ts-form-field__outline-gap{border-top-color:transparent}.ts-form-field.ts-form-field--focused .ts-form-field__outline--thick{color:var(--formField-outlineColor-theme)}.ts-form-field.ts-form-field--focused.ts-form-field--accent .ts-form-field__outline--thick{--formField-outlineColor-theme:var(--ts-color-accent-500)}.ts-form-field.ts-form-field--focused.ts-form-field--warn .ts-form-field__outline--thick,.ts-form-field.ts-form-field--invalid.ts-form-field--invalid .ts-form-field__outline--thick{--formField-outlineColor-theme:var(--ts-color-warn-500)}.ts-form-field.ts-form-field--disabled .ts-form-field__label{color:var(--formField-outlineColor-disabled)}.ts-form-field.ts-form-field--disabled .c-input__text,.ts-form-field.ts-form-field--disabled .ts-selection-list__input{color:var(--formField-color-disabled)}.ts-form-field.ts-form-field--disabled .ts-form-field__outline{color:var(--formField-outlineColor-disabled)}.ts-form-field.ts-form-field--disabled .ts-form-field__container{cursor:not-allowed}.ts-form-field .ts-form-field__outline{bottom:0;color:var(--formField-outlineColor-default);display:flex;left:0;pointer-events:none;position:absolute;right:0;top:var(--formField-outline-labelOverlap)}.ts-form-field .ts-form-field__outline-end,.ts-form-field .ts-form-field__outline-start{border:var(--formField-outline-width) solid currentColor;min-width:var(--formField-outline-borderRadius)}.ts-form-field .ts-form-field__outline-start{border-radius:var(--formField-outline-borderRadius) 0 0 var(--formField-outline-borderRadius);border-right-style:none}.ts-form-field .ts-form-field__outline-end{border-left-style:none;border-radius:0 var(--formField-outline-borderRadius) var(--formField-outline-borderRadius) 0;flex-grow:1}.ts-form-field .ts-form-field__outline-gap{border:var(--formField-outline-width) solid currentColor;border-left-style:none;border-radius:.000001px;border-right-style:none}.ts-form-field .ts-form-field__outline--thick{color:var(--formField-outlineColor-default-hover);opacity:0}.ts-form-field .ts-form-field__outline--thick .ts-form-field__outline-end,.ts-form-field .ts-form-field__outline--thick .ts-form-field__outline-gap,.ts-form-field .ts-form-field__outline--thick .ts-form-field__outline-start{--formField-outline-width:var(--formField-outline-width-thick);transition:border-color .3s var(--swift-ease-out-timing-function)}.ts-form-field .ts-form-field__container{align-items:baseline;box-sizing:border-box;display:inline-flex;margin-top:calc(var(--formField-outline-labelOverlap) * -1);padding:0 var(--formField-outline-sidePadding);position:relative;width:100%}.ts-input .ts-form-field .ts-form-field__container,.ts-select--autocomplete .ts-form-field .ts-form-field__container{cursor:text}.ts-form-field .ts-form-field__infix{border-top:var(--formField-infix-marginTop) solid transparent;display:block;flex:auto;line-height:19px;min-width:0;padding:calc(var(--formField-infix-padding)/ 2) 0 var(--formField-infix-padding);position:relative}@media screen and (-ms-high-contrast:active){.ts-form-field .ts-form-field__infix{-o-border-image:linear-gradient(transparent,transparent);border-image:linear-gradient(transparent,transparent)}}.ts-form-field .ts-form-field__prefix,.ts-form-field .ts-form-field__suffix{flex:none;position:relative;top:var(--formField-outline-labelOverlap);white-space:nowrap}.ts-form-field .ts-form-field__prefix{margin-right:.2em}.ts-form-field .ts-form-field__label-wrapper .ts-icon,.ts-form-field .ts-form-field__subscript-wrapper .ts-icon{font-size:inherit;height:1em;vertical-align:baseline;width:1em}.ts-form-field .ts-form-field__label-wrapper{box-sizing:content-box;height:100%;left:0;padding-top:var(--formField-infix-marginTop);pointer-events:none;position:absolute;top:var(--formField-infix-marginTop-negative);width:100%}.ts-form-field .ts-form-field__subscript-wrapper{box-sizing:border-box;overflow:hidden;padding:0 var(--formField-outline-subscript-padding);position:absolute;width:100%}.ts-form-field .ts-form-field__hint-wrapper{font-family:Roboto,Helvetica Neue,Helvetica,Arial,sans-serif;color:#999;font-size:75%;font-weight:400;letter-spacing:.01em;line-height:1.5;display:flex}.ts-form-field .ts-form-field__label{font:inherit;left:0;margin-top:var(--formField-outline-labelOffset);overflow:hidden;pointer-events:none;position:absolute;text-overflow:ellipsis;top:calc(var(--formField-infix-marginTop) + var(--formField-infix-padding));transform-origin:0 0;transition:color var(--swift-ease-out-duration) var(--swift-ease-out-timing-function),transform var(--swift-ease-out-duration) var(--swift-ease-out-timing-function),width var(--swift-ease-out-duration) var(--swift-ease-out-timing-function);white-space:nowrap;width:100%}.ts-form-field .ts-form-field__label:not(.ts-form-field__label--empty){transition:none}.ts-form-field .ts-form-field--float .ts-form-field__label,.ts-form-field .ts-form-field__label.ts-form-field__label--empty{display:block}.ts-form-field .ts-form-field__wrapper{margin:var(--formField-outline-labelOverlap) 0;position:relative;text-align:left}.ts-form-field .ts-form-field__wrapper.ts-form-field--with-validation{padding-bottom:var(--formField-wrapper-paddingBottom)}.ts-input--datepicker{--date-picker-width:200px;width:var(--date-picker-width)}"]}]}],"members":{"containerElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":140,"character":3},"arguments":["containerElement",{"static":true}]}]}],"labelElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":146,"character":3},"arguments":["labelElement",{"static":true}]}]}],"prefixChildren":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":152,"character":3},"arguments":[{"__symbolic":"reference","name":"TsPrefixDirective"}]}]}],"suffixChildren":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":158,"character":3},"arguments":[{"__symbolic":"reference","name":"TsSuffixDirective"}]}]}],"control":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":167,"character":3}}]}],"floatLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":176,"character":3}}]}],"hideRequiredMarker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":192,"character":3}}]}],"hint":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":200,"character":3}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":214,"character":3}}]}],"noValidationOrHint":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":226,"character":3}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":232,"character":3}}]}],"validateOnChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":238,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":243,"character":23},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":244,"character":31},{"__symbolic":"reference","module":"@terminus/ngx-tools/browser","name":"TsDocumentService","line":245,"character":29},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":246,"character":20}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngAfterContentChecked":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"confirmControlExists":[{"__symbolic":"method"}],"getConnectedOverlayOrigin":[{"__symbolic":"method"}],"shouldForward":[{"__symbolic":"method"}],"shouldLabelFloat":[{"__symbolic":"method"}],"animateAndLockLabel":[{"__symbolic":"method"}],"updateOutlineGap":[{"__symbolic":"method"}]}},"TsPrefixDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":6,"character":1},"arguments":[{"selector":"[tsPrefix]"}]}],"members":{}},"TsSuffixDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":6,"character":1},"arguments":[{"selector":"[tsSuffix]"}]}],"members":{}},"TsFormFieldControl":{"__symbolic":"class","arity":1,"members":{"onContainerClick":[{"__symbolic":"method"}]}},"TsLabelDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":8,"character":1},"arguments":[{"selector":"ts-label"}]}],"members":{}}},"origins":{"TsFormFieldModule":"./form-field.module","TsFormFieldComponent":"./form-field.component","TsPrefixDirective":"./prefix.directive","TsSuffixDirective":"./suffix.directive","TsFormFieldControl":"./form-field-control","TsLabelDirective":"./label.directive"},"importAs":"@terminus/ui/form-field"}