{"__symbolic":"module","version":4,"metadata":{"TextboxModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":7,"character":14},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":7,"character":28}],"declarations":[{"__symbolic":"reference","name":"TextboxComponent"},{"__symbolic":"reference","name":"TextboxSafeHtmlPipe"}],"exports":[{"__symbolic":"reference","name":"TextboxComponent"}]}]}],"members":{}},"TextboxComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":25,"character":1},"arguments":[{"selector":"sebng-textbox","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":29,"character":19},"member":"None"},"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":17,"character":13},"useExisting":{"__symbolic":"reference","name":"TextboxComponent"},"multi":true}],"template":"<div class=\"ac input-box-group\" [ngClass]=\"className\">\n    <label class=\"custom-label\" [attr.for]=\"internalId\" *ngIf=\"label\">\n        {{ label }}\n    </label>\n    <div class=\"input-group\" [ngClass]=\"{ success: success, 'has-error': error, disabled: disabled }\">\n        <div class=\"input-box-group-wrapper\">\n            <div\n                class=\"input-group-prepend\"\n                [class.clickable]=\"onLeftClick.observers.length\"\n                [attr.role]=\"onLeftClick.observers.length ? 'button' : ''\"\n                (click)=\"handleLeftIconClick($event)\"\n                *ngIf=\"leftIcon || leftText\"\n            >\n                <ng-container *ngIf=\"leftText\">\n                    <span class=\"input-group-text\" [attr.title]=\"leftTitle\">\n                        {{ leftText }}\n                    </span>\n                </ng-container>\n                <ng-container *ngIf=\"leftIcon && !leftText\">\n                    <span class=\"input-group-text\" [innerHTML]=\"leftIcon | safeHtml\"></span>\n                </ng-container>\n            </div>\n            <input\n                [attr.id]=\"internalId\"\n                [attr.name]=\"name\"\n                [attr.type]=\"type || 'text'\"\n                [attr.pattern]=\"pattern\"\n                [required]=\"required\"\n                [attr.minLength]=\"minLength\"\n                [attr.maxLength]=\"maxLength\"\n                [(ngModel)]=\"value\"\n                [attr.placeholder]=\"placeholder\"\n                class=\"form-control\"\n                [autofocus]=\"focus\"\n                [attr.autocomplete]=\"autocomplete\"\n                [readOnly]=\"readonly\"\n                [disabled]=\"disabled\"\n                (keydown)=\"handleKeyDown($event)\"\n                (keyup)=\"handleKeyUp($event)\"\n                (keypress)=\"handleKeyPress($event)\"\n                (focus)=\"handleFocus($event)\"\n                (blur)=\"handleBlur($event)\"\n                (search)=\"handleSearch($event)\"\n            />\n\n            <div\n                class=\"input-group-append\"\n                [class.clickable]=\"onRightClick.observers.length\"\n                (click)=\"handleRightIconClick($event)\"\n                [attr.role]=\"onRightClick.observers.length ? 'button' : ''\"\n                *ngIf=\"rightIcon || rightText\"\n            >\n                <span class=\"input-group-text\" *ngIf=\"rightText\" [attr.title]=\"rightTitle\">\n                    {{ rightText }}\n                </span>\n\n                <span class=\"input-group-text\" *ngIf=\"rightIcon && !rightText\" [innerHTML]=\"rightIcon | safeHtml\"></span>\n            </div>\n        </div>\n\n        <div class=\"alert alert-danger\" *ngIf=\"error && !success\">{{ error }}</div>\n    </div>\n</div>\n","styles":[".ac.input-box-group{position:relative}.ac.input-box-group>.input-group{position:relative}.ac.input-box-group>.input-group>.input-box-group-wrapper{color:#cecece;transition:border .1s;position:relative;width:100%;height:42px;border:1px solid #adadad;border-radius:4px;overflow:hidden;display:flex;align-items:center}.ac.input-box-group>.input-group>.input-box-group-wrapper:hover{border-color:#41b0ee;background-color:#fff}.ac.input-box-group>.input-group>.input-box-group-wrapper:focus-within{border-color:#007ac7;box-shadow:none;background-color:#fff}.ac.input-box-group>.input-group>.input-box-group-wrapper:focus-within:active{border-color:#007ac7;box-shadow:none;background-color:#fff}.ac.input-box-group>.input-group>.input-box-group-wrapper>.input-group-prepend,.ac.input-box-group>.input-group>.input-box-group-wrapper>.input-group-append{position:relative;display:inline-flex;align-items:center;height:42px;background-color:#fff;vertical-align:top;margin:0}.ac.input-box-group>.input-group>.input-box-group-wrapper>.input-group-prepend>.input-group-text,.ac.input-box-group>.input-group>.input-box-group-wrapper>.input-group-append>.input-group-text{position:relative;border:0;background:none;padding:0 1rem;margin:0 auto;width:100%;height:100%;justify-content:center}.ac.input-box-group>.input-group>.input-box-group-wrapper>.input-group-prepend>.input-group-text svg,.ac.input-box-group>.input-group>.input-box-group-wrapper>.input-group-append>.input-group-text svg{width:16px;height:16px;fill:#000}.ac.input-box-group>.input-group>.input-box-group-wrapper>.input-group-prepend.clickable,.ac.input-box-group>.input-group>.input-box-group-wrapper>.input-group-append.clickable{cursor:pointer}.ac.input-box-group>.input-group>.input-box-group-wrapper>.input-group-prepend.clickable>.input-group-text,.ac.input-box-group>.input-group>.input-box-group-wrapper>.input-group-append.clickable>.input-group-text{color:#41b0ee}.ac.input-box-group>.input-group>.input-box-group-wrapper>.input-group-prepend.clickable>.input-group-text svg,.ac.input-box-group>.input-group>.input-box-group-wrapper>.input-group-append.clickable>.input-group-text svg{fill:#41b0ee}.ac.input-box-group>.input-group>.input-box-group-wrapper>.input-group-prepend.clickable>.input-group-text:hover,.ac.input-box-group>.input-group>.input-box-group-wrapper>.input-group-append.clickable>.input-group-text:hover{color:#0092e1}.ac.input-box-group>.input-group>.input-box-group-wrapper>.input-group-prepend+input.form-control{padding-left:0}.ac.input-box-group>.input-group>.input-box-group-wrapper>input.form-control{display:inline-flex;z-index:1;border:none;border-radius:0;height:42px}.ac.input-box-group>.input-group>.input-box-group-wrapper>input.form-control:focus{box-shadow:none}.ac.input-box-group>.input-group>.input-box-group-wrapper>input.form-control::-webkit-inner-spin-button,.ac.input-box-group>.input-group>.input-box-group-wrapper>input.form-control::-webkit-textfield-decoration-container{-webkit-appearance:none;-moz-appearance:none;appearance:none}.ac.input-box-group>.input-group>.input-box-group-wrapper>input.form-control:nth-child(2):not(:last-child),.ac.input-box-group>.input-group>.input-box-group-wrapper>input.form-control:first-child:not(:last-child){padding-right:0}.ac.input-box-group>.input-group.has-error>.input-box-group-wrapper{border-bottom:2px solid #F03529}.ac.input-box-group>.input-group.has-error>.alert{opacity:1;padding-top:2px;max-height:100px}.ac.input-box-group>.input-group.success>.input-box-group-wrapper{border-bottom:2px solid #60cd18}.ac.input-box-group>.input-group.disabled .input-box-group-wrapper{background-color:#f8f8f8;border-color:#adadad}.ac.input-box-group>.input-group.disabled .input-box-group-wrapper .input-group-prepend,.ac.input-box-group>.input-group.disabled .input-box-group-wrapper .input-group-append,.ac.input-box-group>.input-group.disabled .input-box-group-wrapper .form-control{color:#adadad;background-color:#f8f8f8}.ac.input-box-group>.input-group.disabled .input-box-group-wrapper .input-group-prepend .input-group-text,.ac.input-box-group>.input-group.disabled .input-box-group-wrapper .form-control,.ac.input-box-group>.input-group.disabled .input-box-group-wrapper .input-group-append .input-group-text{color:#adadad}.ac.input-box-group>.input-group.disabled .input-box-group-wrapper .input-group-prepend .input-group-text svg,.ac.input-box-group>.input-group.disabled .input-box-group-wrapper .form-control svg,.ac.input-box-group>.input-group.disabled .input-box-group-wrapper .input-group-append .input-group-text svg{fill:#adadad}.ac.input-box-group>.input-group>.alert{opacity:0;margin:0;padding:0;background:transparent;max-height:0;border:none;border-radius:0;overflow:hidden;width:100%;transition:opacity .2s,padding .2s,max-height .4s}.ac.input-box-group>.input-group>.alert.alert-danger{color:#f03529}\n"]}]}],"members":{"autocomplete":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":5}}]}],"className":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"error":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":5}}]}],"focus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":5}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":5}}]}],"leftIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":5}}]}],"leftText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":5}}]}],"leftTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":5}}]}],"maxLength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":5}}]}],"minLength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":5}}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":5}}]}],"pattern":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":60,"character":5}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":62,"character":5}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":64,"character":5}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":66,"character":5}}]}],"rightIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":5}}]}],"rightText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":70,"character":5}}]}],"rightTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":72,"character":5}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":74,"character":5}}]}],"success":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":76,"character":5}}]}],"showErrorMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":5}}]}],"onBlur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":81,"character":5}}]}],"onChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":83,"character":5}}]}],"onFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":85,"character":5}}]}],"onKeyDown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":87,"character":5}}]}],"onKeyPress":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":89,"character":5}}]}],"onKeyUp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":91,"character":5}}]}],"onLeftClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":93,"character":5}}]}],"onRightClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":95,"character":5}}]}],"onSearch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":97,"character":5}}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":118,"character":5}}]}],"handleBlur":[{"__symbolic":"method"}],"handleKeyUp":[{"__symbolic":"method"}],"handleKeyDown":[{"__symbolic":"method"}],"handleFocus":[{"__symbolic":"method"}],"handleKeyPress":[{"__symbolic":"method"}],"handleLeftIconClick":[{"__symbolic":"method"}],"handleRightIconClick":[{"__symbolic":"method"}],"handleSearch":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}]}},"TextboxSafeHtmlPipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":3,"character":1},"arguments":[{"name":"safeHtml"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"DomSanitizer","line":5,"character":35}]}],"transform":[{"__symbolic":"method"}]}}},"origins":{"TextboxModule":"./textbox.module","TextboxComponent":"./textbox.component","TextboxSafeHtmlPipe":"./textboxSafeHtml.pipe"},"importAs":"@sebgroup/ng-components/lib/textbox"}