@netgrif/components
Version:
Netgrif Application Engine frontend Angular components
38 lines • 10 kB
JavaScript
import { Component, Inject, Optional } from '@angular/core';
import { AbstractHtmlTextareaFieldComponent, DATA_FIELD_PORTAL_DATA, } from '@netgrif/components-core';
import * as i0 from "@angular/core";
import * as i1 from "@ngx-translate/core";
import * as i2 from "@angular/platform-browser";
import * as i3 from "@angular/common";
import * as i4 from "@ngbracket/ngx-layout/extended";
import * as i5 from "@angular/material/form-field";
import * as i6 from "@angular/forms";
import * as i7 from "ngx-quill";
export class HtmlTextareaFieldComponent extends AbstractHtmlTextareaFieldComponent {
_translate;
_sanitizer;
constructor(_translate, _sanitizer, dataFieldPortalData) {
super(_translate, _sanitizer, dataFieldPortalData);
this._translate = _translate;
this._sanitizer = _sanitizer;
}
ngAfterViewInit() {
setTimeout(() => {
if (!this.dataField?.placeholder) {
this.dataField.placeholder = this._translate.instant('dataField.textarea.insertText');
}
});
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HtmlTextareaFieldComponent, deps: [{ token: i1.TranslateService }, { token: i2.DomSanitizer }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: HtmlTextareaFieldComponent, selector: "nc-html-textarea-field", usesInheritance: true, ngImport: i0, template: "<div class=\"height-100\" #quillContainer [ngClass]=\"{'padding-bottom-custom': !formControlRef.disabled}\">\n <quill-editor theme=\"snow\" *ngIf=\"!formControlRef.disabled\" [(ngModel)]=\"dataField.value\"\n [modules]=\"quillModules\" [bounds]=\"quillContainer\" placeholder=\"{{ dataField.placeholder |translate}}\"></quill-editor>\n <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n <input type=\"hidden\" [formControl]=\"formControlRef\">\n <div *ngIf=\"formControlRef.disabled\" class=\"ql-snow user-select-auto\" [ngClass]=\"{'border' : dataField.materialAppearance === 'outline'}\">\n <div [ngClass]=\"{'ql-editor' : dataField.materialAppearance === 'outline'}\" [innerHTML]=\"disabledDisplay\"></div>\n </div>\n</div>\n", styles: [".height-100{height:100%}.border{border:1px solid #CBD5E1;border-radius:6px;padding:10px;z-index:1;word-wrap:break-word}.user-select-auto{-webkit-user-select:auto;user-select:auto}.padding-bottom-custom{padding-bottom:8px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i7.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HtmlTextareaFieldComponent, decorators: [{
type: Component,
args: [{ selector: 'nc-html-textarea-field', template: "<div class=\"height-100\" #quillContainer [ngClass]=\"{'padding-bottom-custom': !formControlRef.disabled}\">\n <quill-editor theme=\"snow\" *ngIf=\"!formControlRef.disabled\" [(ngModel)]=\"dataField.value\"\n [modules]=\"quillModules\" [bounds]=\"quillContainer\" placeholder=\"{{ dataField.placeholder |translate}}\"></quill-editor>\n <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n <input type=\"hidden\" [formControl]=\"formControlRef\">\n <div *ngIf=\"formControlRef.disabled\" class=\"ql-snow user-select-auto\" [ngClass]=\"{'border' : dataField.materialAppearance === 'outline'}\">\n <div [ngClass]=\"{'ql-editor' : dataField.materialAppearance === 'outline'}\" [innerHTML]=\"disabledDisplay\"></div>\n </div>\n</div>\n", styles: [".height-100{height:100%}.border{border:1px solid #CBD5E1;border-radius:6px;padding:10px;z-index:1;word-wrap:break-word}.user-select-auto{-webkit-user-select:auto;user-select:auto}.padding-bottom-custom{padding-bottom:8px}\n"] }]
}], ctorParameters: () => [{ type: i1.TranslateService }, { type: i2.DomSanitizer }, { type: undefined, decorators: [{
type: Optional
}, {
type: Inject,
args: [DATA_FIELD_PORTAL_DATA]
}] }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaHRtbC10ZXh0YXJlYS1maWVsZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZXRncmlmLWNvbXBvbmVudHMvc3JjL2xpYi9kYXRhLWZpZWxkcy90ZXh0LWZpZWxkL2h0bWwtdGV4dGFyZWEtZmllbGQvaHRtbC10ZXh0YXJlYS1maWVsZC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZXRncmlmLWNvbXBvbmVudHMvc3JjL2xpYi9kYXRhLWZpZWxkcy90ZXh0LWZpZWxkL2h0bWwtdGV4dGFyZWEtZmllbGQvaHRtbC10ZXh0YXJlYS1maWVsZC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQWdCLFNBQVMsRUFBRSxNQUFNLEVBQUUsUUFBUSxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQ3pFLE9BQU8sRUFDSCxrQ0FBa0MsRUFDbEMsc0JBQXNCLEdBR3pCLE1BQU0sMEJBQTBCLENBQUM7Ozs7Ozs7OztBQVNsQyxNQUFNLE9BQU8sMEJBQTJCLFNBQVEsa0NBQWtDO0lBQ3hEO0lBQXdDO0lBQTlELFlBQXNCLFVBQTRCLEVBQVksVUFBd0IsRUFDOUIsbUJBQXVEO1FBQzNHLEtBQUssQ0FBQyxVQUFVLEVBQUUsVUFBVSxFQUFFLG1CQUFtQixDQUFDLENBQUM7UUFGakMsZUFBVSxHQUFWLFVBQVUsQ0FBa0I7UUFBWSxlQUFVLEdBQVYsVUFBVSxDQUFjO0lBR3RGLENBQUM7SUFFRCxlQUFlO1FBQ1gsVUFBVSxDQUFDLEdBQUcsRUFBRTtZQUNaLElBQUksQ0FBQyxJQUFJLENBQUMsU0FBUyxFQUFFLFdBQVcsRUFBRTtnQkFDOUIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQyxPQUFPLENBQUMsK0JBQStCLENBQUMsQ0FBQzthQUN6RjtRQUNMLENBQUMsQ0FBQyxDQUFBO0lBQ04sQ0FBQzt3R0FaUSwwQkFBMEIsOEVBRUgsc0JBQXNCOzRGQUY3QywwQkFBMEIscUZDZnZDLDJ5QkFTQTs7NEZETWEsMEJBQTBCO2tCQUx0QyxTQUFTOytCQUNJLHdCQUF3Qjs7MEJBTXJCLFFBQVE7OzBCQUFJLE1BQU07MkJBQUMsc0JBQXNCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtBZnRlclZpZXdJbml0LCBDb21wb25lbnQsIEluamVjdCwgT3B0aW9uYWx9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtcbiAgICBBYnN0cmFjdEh0bWxUZXh0YXJlYUZpZWxkQ29tcG9uZW50LFxuICAgIERBVEFfRklFTERfUE9SVEFMX0RBVEEsXG4gICAgRGF0YUZpZWxkUG9ydGFsRGF0YSxcbiAgICBUZXh0QXJlYUZpZWxkLFxufSBmcm9tICdAbmV0Z3JpZi9jb21wb25lbnRzLWNvcmUnO1xuaW1wb3J0IHtUcmFuc2xhdGVTZXJ2aWNlfSBmcm9tICdAbmd4LXRyYW5zbGF0ZS9jb3JlJztcbmltcG9ydCB7RG9tU2FuaXRpemVyfSBmcm9tICdAYW5ndWxhci9wbGF0Zm9ybS1icm93c2VyJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICduYy1odG1sLXRleHRhcmVhLWZpZWxkJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vaHRtbC10ZXh0YXJlYS1maWVsZC5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vaHRtbC10ZXh0YXJlYS1maWVsZC5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIEh0bWxUZXh0YXJlYUZpZWxkQ29tcG9uZW50IGV4dGVuZHMgQWJzdHJhY3RIdG1sVGV4dGFyZWFGaWVsZENvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQge1xuICAgIGNvbnN0cnVjdG9yKHByb3RlY3RlZCBfdHJhbnNsYXRlOiBUcmFuc2xhdGVTZXJ2aWNlLCBwcm90ZWN0ZWQgX3Nhbml0aXplcjogRG9tU2FuaXRpemVyLFxuICAgICAgICAgICAgICAgIEBPcHRpb25hbCgpIEBJbmplY3QoREFUQV9GSUVMRF9QT1JUQUxfREFUQSkgZGF0YUZpZWxkUG9ydGFsRGF0YTogRGF0YUZpZWxkUG9ydGFsRGF0YTxUZXh0QXJlYUZpZWxkPikge1xuICAgICAgICBzdXBlcihfdHJhbnNsYXRlLCBfc2FuaXRpemVyLCBkYXRhRmllbGRQb3J0YWxEYXRhKTtcbiAgICB9XG5cbiAgICBuZ0FmdGVyVmlld0luaXQoKTogdm9pZCB7XG4gICAgICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgICAgICAgaWYgKCF0aGlzLmRhdGFGaWVsZD8ucGxhY2Vob2xkZXIpIHtcbiAgICAgICAgICAgICAgICB0aGlzLmRhdGFGaWVsZC5wbGFjZWhvbGRlciA9IHRoaXMuX3RyYW5zbGF0ZS5pbnN0YW50KCdkYXRhRmllbGQudGV4dGFyZWEuaW5zZXJ0VGV4dCcpO1xuICAgICAgICAgICAgfVxuICAgICAgICB9KVxuICAgIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJoZWlnaHQtMTAwXCIgI3F1aWxsQ29udGFpbmVyIFtuZ0NsYXNzXT1cInsncGFkZGluZy1ib3R0b20tY3VzdG9tJzogIWZvcm1Db250cm9sUmVmLmRpc2FibGVkfVwiPlxuICAgIDxxdWlsbC1lZGl0b3IgdGhlbWU9XCJzbm93XCIgKm5nSWY9XCIhZm9ybUNvbnRyb2xSZWYuZGlzYWJsZWRcIiBbKG5nTW9kZWwpXT1cImRhdGFGaWVsZC52YWx1ZVwiXG4gICAgICAgICAgICAgICAgICBbbW9kdWxlc109XCJxdWlsbE1vZHVsZXNcIiBbYm91bmRzXT1cInF1aWxsQ29udGFpbmVyXCIgcGxhY2Vob2xkZXI9XCJ7eyBkYXRhRmllbGQucGxhY2Vob2xkZXIgfHRyYW5zbGF0ZX19XCI+PC9xdWlsbC1lZGl0b3I+XG4gICAgPG1hdC1lcnJvciAqbmdJZj1cImRhdGFGaWVsZC5pc0ludmFsaWQoZm9ybUNvbnRyb2xSZWYpXCI+e3tnZXRFcnJvck1lc3NhZ2UoKX19PC9tYXQtZXJyb3I+XG4gICAgPGlucHV0IHR5cGU9XCJoaWRkZW5cIiBbZm9ybUNvbnRyb2xdPVwiZm9ybUNvbnRyb2xSZWZcIj5cbiAgICA8ZGl2ICpuZ0lmPVwiZm9ybUNvbnRyb2xSZWYuZGlzYWJsZWRcIiBjbGFzcz1cInFsLXNub3cgdXNlci1zZWxlY3QtYXV0b1wiIFtuZ0NsYXNzXT1cInsnYm9yZGVyJyA6IGRhdGFGaWVsZC5tYXRlcmlhbEFwcGVhcmFuY2UgPT09ICdvdXRsaW5lJ31cIj5cbiAgICAgICAgPGRpdiBbbmdDbGFzc109XCJ7J3FsLWVkaXRvcicgOiBkYXRhRmllbGQubWF0ZXJpYWxBcHBlYXJhbmNlID09PSAnb3V0bGluZSd9XCIgW2lubmVySFRNTF09XCJkaXNhYmxlZERpc3BsYXlcIj48L2Rpdj5cbiAgICA8L2Rpdj5cbjwvZGl2PlxuIl19