ng-materialgrammi
Version:
An Angular framework which follows
102 lines • 12.2 kB
JavaScript
import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { FormControl } from '@angular/forms';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class TextInputComponent {
constructor() {
this.theme = "primary";
this.form = "control";
this.dark = false;
this.value = "";
this.control = new FormControl('');
this.filled = false;
this.data = new EventEmitter();
this.isFocused = new EventEmitter();
this.keyup = new EventEmitter();
this.info = {
type: "success",
msg: ""
};
this.active = false;
this.focused = false;
}
ngOnInit() {
}
onFocusIn() {
this.active = true;
this.focused = true;
this.isFocused.emit(this.active);
}
onFocusOut() {
this.focused = false;
if (!(this.value.length > 0)) {
this.active = false;
}
this.isFocused.emit(this.active);
}
onKeyUp(event) {
this.value = event.target.value;
this.control.setValue(event.target.value);
this.keyup.emit(this.value);
this.data.emit(this.control);
}
mainClasses() {
let classes = ``;
classes += ` ${this.active ? 'active' : ''}`;
classes += this.dark ? " on-dark" : " on-lite";
classes += this.form === "control" ? (this.filled ? " filled" : " outline") : "";
return classes;
}
labelClick() {
this.inputElem.nativeElement.focus();
}
infoClasses() {
let classes = "";
if (this.info.type === "error") {
classes += "text-red";
}
else if (this.info.type === "success") {
classes += "text-green";
}
else if (this.info.type === "info") {
classes += "text-blue";
}
else if (this.info.type === "lite") {
classes += "text-grey2";
}
else if (this.info.type === "dark") {
classes += "text-grey8";
}
return classes;
}
}
TextInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
TextInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: TextInputComponent, selector: "mg-text", inputs: { theme: "theme", form: "form", dark: "dark", value: "value", control: "control", filled: "filled", info: "info" }, outputs: { data: "data", isFocused: "isFocused", keyup: "keyup" }, viewQueries: [{ propertyName: "inputElem", first: true, predicate: ["inputElementText"], descendants: true }], ngImport: i0, template: "<div class=\"form-{{form}} {{theme}}\" [ngClass]=\"mainClasses()\">\n <label (click)=\"labelClick()\"><ng-content></ng-content></label>\n <textarea #inputElementText (focus)=\"onFocusIn()\" (focusout)=\"onFocusOut()\" (keyup)=\"onKeyUp($event)\" [innerHtml]=\"value\"></textarea>\n <ng-container *ngIf=\"info && info.msg && info.msg.length > 0\">\n <p [innerHtml]=\"info.msg\" [ngClass]=\"infoClasses()\"></p>\n </ng-container>\n</div>\n", styles: [""], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TextInputComponent, decorators: [{
type: Component,
args: [{ selector: 'mg-text', template: "<div class=\"form-{{form}} {{theme}}\" [ngClass]=\"mainClasses()\">\n <label (click)=\"labelClick()\"><ng-content></ng-content></label>\n <textarea #inputElementText (focus)=\"onFocusIn()\" (focusout)=\"onFocusOut()\" (keyup)=\"onKeyUp($event)\" [innerHtml]=\"value\"></textarea>\n <ng-container *ngIf=\"info && info.msg && info.msg.length > 0\">\n <p [innerHtml]=\"info.msg\" [ngClass]=\"infoClasses()\"></p>\n </ng-container>\n</div>\n", styles: [""] }]
}], ctorParameters: function () { return []; }, propDecorators: { theme: [{
type: Input
}], form: [{
type: Input
}], dark: [{
type: Input
}], value: [{
type: Input
}], control: [{
type: Input
}], filled: [{
type: Input
}], data: [{
type: Output
}], isFocused: [{
type: Output
}], keyup: [{
type: Output
}], info: [{
type: Input
}], inputElem: [{
type: ViewChild,
args: ['inputElementText']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGV4dC1pbnB1dC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXRlcmlhbGdyYW1taS9zcmMvbGliL2NvbXBvbmVudHMvdGV4dC1pbnB1dC90ZXh0LWlucHV0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL21hdGVyaWFsZ3JhbW1pL3NyYy9saWIvY29tcG9uZW50cy90ZXh0LWlucHV0L3RleHQtaW5wdXQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBYyxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDdEcsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7QUFRN0MsTUFBTSxPQUFPLGtCQUFrQjtJQWlCN0I7UUFoQlMsVUFBSyxHQUFHLFNBQVMsQ0FBQztRQUNsQixTQUFJLEdBQWUsU0FBUyxDQUFDO1FBQzdCLFNBQUksR0FBRyxLQUFLLENBQUM7UUFDYixVQUFLLEdBQUcsRUFBRSxDQUFDO1FBQ1gsWUFBTyxHQUFnQixJQUFJLFdBQVcsQ0FBQyxFQUFFLENBQUMsQ0FBQztRQUMzQyxXQUFNLEdBQUcsS0FBSyxDQUFDO1FBQ2QsU0FBSSxHQUFHLElBQUksWUFBWSxFQUFlLENBQUM7UUFDdkMsY0FBUyxHQUFHLElBQUksWUFBWSxFQUFXLENBQUM7UUFDeEMsVUFBSyxHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7UUFDcEMsU0FBSSxHQUFHO1lBQ2QsSUFBSSxFQUFFLFNBQVM7WUFDZixHQUFHLEVBQUUsRUFBRTtTQUNSLENBQUM7UUFFRixXQUFNLEdBQUcsS0FBSyxDQUFDO1FBQ2YsWUFBTyxHQUFHLEtBQUssQ0FBQztJQUNBLENBQUM7SUFFakIsUUFBUTtJQUNSLENBQUM7SUFDRCxTQUFTO1FBQ1AsSUFBSSxD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O2dCQUNHLFNBQVM7c0JBQWxCLE1BQU07Z0JBQ0csS0FBSztzQkFBZCxNQUFNO2dCQUNFLElBQUk7c0JBQVosS0FBSztnQkFJaUMsU0FBUztzQkFBL0MsU0FBUzt1QkFBQyxrQkFBa0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEVsZW1lbnRSZWYsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uSW5pdCwgT3V0cHV0LCBWaWV3Q2hpbGQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEZvcm1Db250cm9sIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgSW5wdXRTdHlsZSB9IGZyb20gJy4uLy4uL3R5cGVzJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbWctdGV4dCcsXG4gIHRlbXBsYXRlVXJsOiAnLi90ZXh0LWlucHV0LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vdGV4dC1pbnB1dC5jb21wb25lbnQuY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgVGV4dElucHV0Q29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgQElucHV0KCkgdGhlbWUgPSBcInByaW1hcnlcIjtcbiAgQElucHV0KCkgZm9ybTogSW5wdXRTdHlsZSA9IFwiY29udHJvbFwiO1xuICBASW5wdXQoKSBkYXJrID0gZmFsc2U7XG4gIEBJbnB1dCgpIHZhbHVlID0gXCJcIjtcbiAgQElucHV0KCkgY29udHJvbDogRm9ybUNvbnRyb2wgPSBuZXcgRm9ybUNvbnRyb2woJycpO1xuICBASW5wdXQoKSBmaWxsZWQgPSBmYWxzZTtcbiAgQE91dHB1dCgpIGRhdGEgPSBuZXcgRXZlbnRFbWl0dGVyPEZvcm1Db250cm9sPigpO1xuICBAT3V0cHV0KCkgaXNGb2N1c2VkID0gbmV3IEV2ZW50RW1pdHRlcjxib29sZWFuPigpO1xuICBAT3V0cHV0KCkga2V5dXAgPSBuZXcgRXZlbnRFbWl0dGVyPHN0cmluZz4oKTtcbiAgQElucHV0KCkgaW5mbyA9IHtcbiAgICB0eXBlOiBcInN1Y2Nlc3NcIixcbiAgICBtc2c6IFwiXCJcbiAgfTtcbiAgQFZpZXdDaGlsZCgnaW5wdXRFbGVtZW50VGV4dCcpIHByaXZhdGUgaW5wdXRFbGVtITogRWxlbWVudFJlZjtcbiAgYWN0aXZlID0gZmFsc2U7XG4gIGZvY3VzZWQgPSBmYWxzZTtcbiAgY29uc3RydWN0b3IoKSB7IH1cblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgfVxuICBvbkZvY3VzSW4oKSB7XG4gICAgdGhpcy5hY3RpdmUgPSB0cnVlO1xuICAgIHRoaXMuZm9jdXNlZCA9IHRydWU7XG4gICAgdGhpcy5pc0ZvY3VzZWQuZW1pdCh0aGlzLmFjdGl2ZSk7XG4gIH1cblxuICBvbkZvY3VzT3V0KCkge1xuICAgIHRoaXMuZm9jdXNlZCA9IGZhbHNlO1xuICAgIGlmICghKHRoaXMudmFsdWUubGVuZ3RoID4gMCkpIHtcbiAgICAgIHRoaXMuYWN0aXZlID0gZmFsc2U7XG4gICAgfVxuICAgIHRoaXMuaXNGb2N1c2VkLmVtaXQodGhpcy5hY3RpdmUpO1xuICB9XG5cbiAgb25LZXlVcChldmVudDogYW55KSB7XG4gICAgdGhpcy52YWx1ZSA9IGV2ZW50LnRhcmdldC52YWx1ZTtcbiAgICB0aGlzLmNvbnRyb2wuc2V0VmFsdWUoZXZlbnQudGFyZ2V0LnZhbHVlKTtcbiAgICB0aGlzLmtleXVwLmVtaXQodGhpcy52YWx1ZSk7XG4gICAgdGhpcy5kYXRhLmVtaXQodGhpcy5jb250cm9sKTtcbiAgfVxuXG4gIG1haW5DbGFzc2VzKCkge1xuICAgIGxldCBjbGFzc2VzID0gYGA7XG4gICAgY2xhc3NlcyArPSBgICR7dGhpcy5hY3RpdmUgPyAnYWN0aXZlJyA6ICcnfWA7XG4gICAgY2xhc3NlcyArPSB0aGlzLmRhcmsgPyBcIiBvbi1kYXJrXCIgOiBcIiBvbi1saXRlXCI7XG4gICAgY2xhc3NlcyArPSB0aGlzLmZvcm0gPT09IFwiY29udHJvbFwiID8gKHRoaXMuZmlsbGVkID8gXCIgZmlsbGVkXCIgOiBcIiBvdXRsaW5lXCIpIDogXCJcIjtcbiAgICByZXR1cm4gY2xhc3NlcztcbiAgfVxuXG4gIGxhYmVsQ2xpY2soKXtcbiAgICB0aGlzLmlucHV0RWxlbS5uYXRpdmVFbGVtZW50LmZvY3VzKCk7XG4gIH1cblxuICBpbmZvQ2xhc3Nlcygpe1xuICAgIGxldCBjbGFzc2VzID0gXCJcIjtcbiAgICBpZih0aGlzLmluZm8udHlwZSA9PT0gXCJlcnJvclwiKXtcbiAgICAgIGNsYXNzZXMgKz0gXCJ0ZXh0LXJlZFwiO1xuICAgIH1lbHNlIGlmKHRoaXMuaW5mby50eXBlID09PSBcInN1Y2Nlc3NcIil7XG4gICAgICBjbGFzc2VzICs9IFwidGV4dC1ncmVlblwiO1xuICAgIH1lbHNlIGlmKHRoaXMuaW5mby50eXBlID09PSBcImluZm9cIil7XG4gICAgICBjbGFzc2VzICs9IFwidGV4dC1ibHVlXCI7XG4gICAgfWVsc2UgaWYodGhpcy5pbmZvLnR5cGUgPT09IFwibGl0ZVwiKXtcbiAgICAgIGNsYXNzZXMgKz0gXCJ0ZXh0LWdyZXkyXCI7XG4gICAgfWVsc2UgaWYodGhpcy5pbmZvLnR5cGUgPT09IFwiZGFya1wiKXtcbiAgICAgIGNsYXNzZXMgKz0gXCJ0ZXh0LWdyZXk4XCI7XG4gICAgfVxuICAgIHJldHVybiBjbGFzc2VzO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiZm9ybS17e2Zvcm19fSB7e3RoZW1lfX1cIiBbbmdDbGFzc109XCJtYWluQ2xhc3NlcygpXCI+XG4gIDxsYWJlbCAoY2xpY2spPVwibGFiZWxDbGljaygpXCI+PG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PjwvbGFiZWw+XG4gIDx0ZXh0YXJlYSAjaW5wdXRFbGVtZW50VGV4dCAoZm9jdXMpPVwib25Gb2N1c0luKClcIiAoZm9jdXNvdXQpPVwib25Gb2N1c091dCgpXCIgKGtleXVwKT1cIm9uS2V5VXAoJGV2ZW50KVwiIFtpbm5lckh0bWxdPVwidmFsdWVcIj48L3RleHRhcmVhPlxuICA8bmctY29udGFpbmVyICpuZ0lmPVwiaW5mbyAmJiBpbmZvLm1zZyAmJiBpbmZvLm1zZy5sZW5ndGggPiAwXCI+XG4gICAgPHAgW2lubmVySHRtbF09XCJpbmZvLm1zZ1wiIFtuZ0NsYXNzXT1cImluZm9DbGFzc2VzKClcIj48L3A+XG4gIDwvbmctY29udGFpbmVyPlxuPC9kaXY+XG4iXX0=