@ipi-soft/ng-components/fesm2022/ipi-soft-ng-components-textarea.mjs

Custom Angular Components

import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output } from '@angular/core';
import { NgClass } from '@angular/common';
import * as i1 from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { IpiImageComponent } from '@ipi-soft/ng-components/image';

class IpiTextAreaComponent {
    constructor(changeDetectorRef) {
        this.changeDetectorRef = changeDetectorRef;
        this.textAreaChange = new EventEmitter();
        this.controlInvalid = false;
        this.changeDetectorRef.detach();
    }
    ngOnInit() {
        this.setControl();
        this.changeDetectorRef.detectChanges();
    }
    ngOnDestroy() {
        if (this.controlSubscription) {
            this.controlSubscription.unsubscribe();
        }
    }
    onInput(event) {
        const target = event.target;
        this.textAreaChange.emit(target.value);
        this.changeDetectorRef.detectChanges();
    }
    setControl() {
        if (!this.options.formGroup || !this.options.formControlName) {
            return;
        }
        this.control = this.options.formGroup.controls[this.options.formControlName];
        this.control.markAsTouched();
        this.controlSubscription = this.control.statusChanges.subscribe(() => {
            this.setControlInvalid(this.control);
            this.getErrors();
            this.changeDetectorRef.detectChanges();
        });
    }
    setControlInvalid(control) {
        this.controlInvalid = control.touched && control.invalid;
    }
    getErrors() {
        const options = this.options;
        const formGroup = options.formGroup;
        const formControlName = options.formControlName;
        if (formGroup && formControlName && options.errors && this.controlInvalid) {
            for (const error in options.errors) {
                if (formGroup.controls[formControlName].hasError(error)) {
                    this.controlError = options.errors[error];
                    return;
                }
            }
        }
        this.controlError = '';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: IpiTextAreaComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: IpiTextAreaComponent, isStandalone: true, selector: "ipi-textarea", inputs: { options: "options" }, outputs: { textAreaChange: "textAreaChange" }, ngImport: i0, template: "@if (options) {\n    @if (options.label !== '') {\n        <div class=\"header\">\n            <label> {{ options.label }}</label>\n        </div>\n    }\n\n    @if (!options.formGroup) {\n        <div class=\"textArea\">\n            <div class=\"container\">\n                @if (options.icon) {\n                    <ipi-img class=\"icon\" [src]=\"'assets/img/' + options.icon\" [ariaLabel]=\"'textarea icon'\"></ipi-img>\n                }\n\n                <textarea [placeholder]=\"options.placeholder ? options.placeholder : ''\" autocomplete=\"off\" (input)=\"onInput($event)\"></textarea>\n            </div>\n        </div>\n    }\n\n    @if (options.formGroup && options.formControlName) {\n        <div class=\"textArea\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'invalid': controlInvalid, 'disabled': control.disabled }\">\n            <div class=\"container\">\n                @if (options.icon) {\n                    <ipi-img class=\"icon\" [src]=\"'assets/img/' + options.icon\" [ariaLabel]=\"'textarea icon'\"></ipi-img>\n                }\n\n                <textarea autocomplete=\"off\" [placeholder]=\"options.placeholder ? options.placeholder : ''\" [formControlName]=\"options.formControlName\"></textarea>\n            </div>\n        </div>\n\n        <div class=\"footer\">\n            {{ controlError }}\n        </div>\n    }\n}\n", styles: [":host{display:block;touch-action:manipulation}:host(.fluid) .textArea{width:100%}.header{width:100%;min-height:20px;display:flex;align-items:center;justify-content:space-between;column-gap:4px;color:var(--ipi-textarea-header-color, #0B1222);text-wrap:nowrap;margin-bottom:2px}label{font-size:14px;font-weight:600;text-wrap:wrap;margin-right:4px}.label-wrapper{display:flex;align-items:center}.textArea{width:264px;height:100px;display:inline-block;box-sizing:border-box;background-color:var(--ipi-textarea-background-color, transparent);border:var(--ipi-textarea-border, 1px solid #E9E9E9);border-radius:var(--ipi-textarea-border-radius, 4px);transition:border 1s;padding:12px}.textArea.disabled{opacity:.8;cursor:not-allowed;border:var(--ipi-textarea-border-disabled, 1px dashed #F2F2F2)}.textArea .container{height:100%;display:flex;position:relative;box-sizing:border-box}.container ipi-img{width:16px;height:16px;display:flex;justify-content:center;align-items:center;transition:all .2s;z-index:2;margin-right:12px}.container ipi-img svg path{fill:var(--ipi-textarea-icon-fill, #C6C6C6)}.textArea textarea{width:100%;height:100%;position:relative;resize:none;border:none;outline:none;background-color:var(--ipi-textarea-background-color, transparent);color:var(--ipi-textarea-text-color, #0B1222);font-size:14px;padding:0}textarea::placeholder{color:var(--ipi-textarea-text-placeholder-color, #C6C6C6)}.textArea.disabled{cursor:not-allowed}.textArea.invalid{border:var(--ipi-textarea-border-invalid, 1px solid #F96138)}.textArea.invalid+.footer,.textArea.disabled+.footer{color:var(--ipi-textarea-footer-color, #F96138)}textarea::-webkit-scrollbar{width:8px;padding:8px}textarea::-webkit-scrollbar-thumb{background-color:var(--ipi-textarea-scrollbar-color, #E2E2E2bb);border-radius:25px}textarea::-webkit-scrollbar-thumb:hover{background-color:var(--ipi-textarea-scrollbar-hover-color, #e2e2e2)}textarea::-webkit-scrollbar-button{display:none}.footer{height:14px;font-size:12px;margin-top:2px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: IpiImageComponent, selector: "ipi-img", inputs: ["src", "ariaLabel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: IpiTextAreaComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ipi-textarea', imports: [
                        NgClass,
                        FormsModule,
                        IpiImageComponent,
                        ReactiveFormsModule,
                    ], template: "@if (options) {\n    @if (options.label !== '') {\n        <div class=\"header\">\n            <label> {{ options.label }}</label>\n        </div>\n    }\n\n    @if (!options.formGroup) {\n        <div class=\"textArea\">\n            <div class=\"container\">\n                @if (options.icon) {\n                    <ipi-img class=\"icon\" [src]=\"'assets/img/' + options.icon\" [ariaLabel]=\"'textarea icon'\"></ipi-img>\n                }\n\n                <textarea [placeholder]=\"options.placeholder ? options.placeholder : ''\" autocomplete=\"off\" (input)=\"onInput($event)\"></textarea>\n            </div>\n        </div>\n    }\n\n    @if (options.formGroup && options.formControlName) {\n        <div class=\"textArea\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'invalid': controlInvalid, 'disabled': control.disabled }\">\n            <div class=\"container\">\n                @if (options.icon) {\n                    <ipi-img class=\"icon\" [src]=\"'assets/img/' + options.icon\" [ariaLabel]=\"'textarea icon'\"></ipi-img>\n                }\n\n                <textarea autocomplete=\"off\" [placeholder]=\"options.placeholder ? options.placeholder : ''\" [formControlName]=\"options.formControlName\"></textarea>\n            </div>\n        </div>\n\n        <div class=\"footer\">\n            {{ controlError }}\n        </div>\n    }\n}\n", styles: [":host{display:block;touch-action:manipulation}:host(.fluid) .textArea{width:100%}.header{width:100%;min-height:20px;display:flex;align-items:center;justify-content:space-between;column-gap:4px;color:var(--ipi-textarea-header-color, #0B1222);text-wrap:nowrap;margin-bottom:2px}label{font-size:14px;font-weight:600;text-wrap:wrap;margin-right:4px}.label-wrapper{display:flex;align-items:center}.textArea{width:264px;height:100px;display:inline-block;box-sizing:border-box;background-color:var(--ipi-textarea-background-color, transparent);border:var(--ipi-textarea-border, 1px solid #E9E9E9);border-radius:var(--ipi-textarea-border-radius, 4px);transition:border 1s;padding:12px}.textArea.disabled{opacity:.8;cursor:not-allowed;border:var(--ipi-textarea-border-disabled, 1px dashed #F2F2F2)}.textArea .container{height:100%;display:flex;position:relative;box-sizing:border-box}.container ipi-img{width:16px;height:16px;display:flex;justify-content:center;align-items:center;transition:all .2s;z-index:2;margin-right:12px}.container ipi-img svg path{fill:var(--ipi-textarea-icon-fill, #C6C6C6)}.textArea textarea{width:100%;height:100%;position:relative;resize:none;border:none;outline:none;background-color:var(--ipi-textarea-background-color, transparent);color:var(--ipi-textarea-text-color, #0B1222);font-size:14px;padding:0}textarea::placeholder{color:var(--ipi-textarea-text-placeholder-color, #C6C6C6)}.textArea.disabled{cursor:not-allowed}.textArea.invalid{border:var(--ipi-textarea-border-invalid, 1px solid #F96138)}.textArea.invalid+.footer,.textArea.disabled+.footer{color:var(--ipi-textarea-footer-color, #F96138)}textarea::-webkit-scrollbar{width:8px;padding:8px}textarea::-webkit-scrollbar-thumb{background-color:var(--ipi-textarea-scrollbar-color, #E2E2E2bb);border-radius:25px}textarea::-webkit-scrollbar-thumb:hover{background-color:var(--ipi-textarea-scrollbar-hover-color, #e2e2e2)}textarea::-webkit-scrollbar-button{display:none}.footer{height:14px;font-size:12px;margin-top:2px}\n"] }]
        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { options: [{
                type: Input
            }], textAreaChange: [{
                type: Output
            }] } });

/**
 * Generated bundle index. Do not edit.
 */

export { IpiTextAreaComponent };
//# sourceMappingURL=ipi-soft-ng-components-textarea.mjs.map