@hxui/angular
Version:
An Angular library based on the [HXUI design system](https://hxui.io).
52 lines • 5.59 kB
JavaScript
import { Directive, HostListener, ElementRef, HostBinding } from '@angular/core';
import * as i0 from "@angular/core";
export class TextInputDirective {
constructor(el) {
this.el = el;
this.styleLabel();
}
onFocus() {
this.styleLabelAsFloating();
}
onBlur() {
this.styleLabel();
}
styleLabel(floatingLabel) {
// If the element is empty, style the label like a placeholder otherwise float the label above the input
if (!floatingLabel && this.el.nativeElement.value.trim().length === 0 && this.el.nativeElement.placeholder.trim().length === 0) {
this.styleLabelAsPlaceholder();
}
else {
this.styleLabelAsFloating();
}
}
styleLabelAsPlaceholder() {
this.isPlaceholder = true;
this.isLabel = false;
}
styleLabelAsFloating() {
this.isPlaceholder = false;
this.isLabel = true;
}
}
TextInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TextInputDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
TextInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: TextInputDirective, selector: "[hxaTextInput]", host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class.has-label-placeholder": "this.isPlaceholder", "class.has-label-floating": "this.isLabel" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TextInputDirective, decorators: [{
type: Directive,
args: [{
selector: '[hxaTextInput]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { isPlaceholder: [{
type: HostBinding,
args: ['class.has-label-placeholder']
}], isLabel: [{
type: HostBinding,
args: ['class.has-label-floating']
}], onFocus: [{
type: HostListener,
args: ['focus']
}], onBlur: [{
type: HostListener,
args: ['blur']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGV4dC1pbnB1dC5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9oeC11aS9zcmMvbGliL3RleHQtaW5wdXQvdGV4dC1pbnB1dC5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBRSxZQUFZLEVBQUUsVUFBVSxFQUFFLFdBQVcsRUFBQyxNQUFNLGVBQWUsQ0FBQzs7QUFLL0UsTUFBTSxPQUFPLGtCQUFrQjtJQUs3QixZQUFvQixFQUFjO1FBQWQsT0FBRSxHQUFGLEVBQUUsQ0FBWTtRQUNoQyxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7SUFDcEIsQ0FBQztJQUdELE9BQU87UUFDTCxJQUFJLENBQUMsb0JBQW9CLEVBQUUsQ0FBQztJQUM5QixDQUFDO0lBR0QsTUFBTTtRQUNKLElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FBQztJQUNwQixDQUFDO0lBRUQsVUFBVSxDQUFDLGFBQXVCO1FBQ2hDLHdHQUF3RztRQUN4RyxJQUFJLENBQUMsYUFBYSxJQUFJLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxJQUFJLEVBQUUsQ0FBQyxNQUFNLEtBQUssQ0FBQyxJQUFJLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxDQUFDLFdBQVcsQ0FBQyxJQUFJLEVBQUUsQ0FBQyxNQUFNLEtBQUssQ0FBQyxFQUFJO1lBQ2hJLElBQUksQ0FBQyx1QkFBdUIsRUFBRSxDQUFDO1NBQ2hDO2FBQU07WUFDTCxJQUFJLENBQUMsb0JBQW9CLEVBQUUsQ0FBQztTQUM3QjtJQUNILENBQUM7SUFFRCx1QkFBdUI7UUFDckIsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUM7UUFDMUIsSUFBSSxDQUFDLE9BQU8sR0FBRyxLQUFLLENBQUM7SUFDdkIsQ0FBQztJQUVELG9CQUFvQjtRQUNsQixJQUFJLENBQUMsYUFBYSxHQUFHLEtBQUssQ0FBQztRQUMzQixJQUFJLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQztJQUN0QixDQUFDOztnSEFwQ1Usa0JBQWtCO29HQUFsQixrQkFBa0I7NEZBQWxCLGtCQUFrQjtrQkFIOUIsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsZ0JBQWdCO2lCQUMzQjtpR0FHNkMsYUFBYTtzQkFBeEQsV0FBVzt1QkFBQyw2QkFBNkI7Z0JBQ0QsT0FBTztzQkFBL0MsV0FBVzt1QkFBQywwQkFBMEI7Z0JBT3ZDLE9BQU87c0JBRE4sWUFBWTt1QkFBQyxPQUFPO2dCQU1yQixNQUFNO3NCQURMLFlBQVk7dUJBQUMsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7RGlyZWN0aXZlLCBIb3N0TGlzdGVuZXIsIEVsZW1lbnRSZWYsIEhvc3RCaW5kaW5nfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuXHJcbkBEaXJlY3RpdmUoe1xyXG4gIHNlbGVjdG9yOiAnW2h4YVRleHRJbnB1dF0nXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBUZXh0SW5wdXREaXJlY3RpdmUge1xyXG5cclxuICBASG9zdEJpbmRpbmcoJ2NsYXNzLmhhcy1sYWJlbC1wbGFjZWhvbGRlcicpIGlzUGxhY2Vob2xkZXI6IGJvb2xlYW47XHJcbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5oYXMtbGFiZWwtZmxvYXRpbmcnKSBpc0xhYmVsOiBib29sZWFuO1xyXG5cclxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGVsOiBFbGVtZW50UmVmKSB7XHJcbiAgICB0aGlzLnN0eWxlTGFiZWwoKTtcclxuICB9XHJcblxyXG4gIEBIb3N0TGlzdGVuZXIoJ2ZvY3VzJylcclxuICBvbkZvY3VzKCkge1xyXG4gICAgdGhpcy5zdHlsZUxhYmVsQXNGbG9hdGluZygpO1xyXG4gIH1cclxuXHJcbiAgQEhvc3RMaXN0ZW5lcignYmx1cicpXHJcbiAgb25CbHVyKCkge1xyXG4gICAgdGhpcy5zdHlsZUxhYmVsKCk7XHJcbiAgfVxyXG5cclxuICBzdHlsZUxhYmVsKGZsb2F0aW5nTGFiZWw/OiBib29sZWFuKSB7XHJcbiAgICAvLyBJZiB0aGUgZWxlbWVudCBpcyBlbXB0eSwgc3R5bGUgdGhlIGxhYmVsIGxpa2UgYSBwbGFjZWhvbGRlciBvdGhlcndpc2UgZmxvYXQgdGhlIGxhYmVsIGFib3ZlIHRoZSBpbnB1dFxyXG4gICAgaWYgKCFmbG9hdGluZ0xhYmVsICYmIHRoaXMuZWwubmF0aXZlRWxlbWVudC52YWx1ZS50cmltKCkubGVuZ3RoID09PSAwICYmIHRoaXMuZWwubmF0aXZlRWxlbWVudC5wbGFjZWhvbGRlci50cmltKCkubGVuZ3RoID09PSAwICkgIHtcclxuICAgICAgdGhpcy5zdHlsZUxhYmVsQXNQbGFjZWhvbGRlcigpO1xyXG4gICAgfSBlbHNlIHtcclxuICAgICAgdGhpcy5zdHlsZUxhYmVsQXNGbG9hdGluZygpO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgc3R5bGVMYWJlbEFzUGxhY2Vob2xkZXIoKSB7XHJcbiAgICB0aGlzLmlzUGxhY2Vob2xkZXIgPSB0cnVlO1xyXG4gICAgdGhpcy5pc0xhYmVsID0gZmFsc2U7XHJcbiAgfVxyXG5cclxuICBzdHlsZUxhYmVsQXNGbG9hdGluZygpIHtcclxuICAgIHRoaXMuaXNQbGFjZWhvbGRlciA9IGZhbHNlO1xyXG4gICAgdGhpcy5pc0xhYmVsID0gdHJ1ZTtcclxuICB9XHJcblxyXG59XHJcbiJdfQ==