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

Custom Angular Components

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

class IpiInputComponent {
    constructor(changeDetectorRef) {
        this.changeDetectorRef = changeDetectorRef;
        this.inputChange = new EventEmitter();
        this.suffixImgChange = new EventEmitter();
        this.helperTextChange = new EventEmitter();
        this.controlInvalid = false;
        this.tooltipPosition = TooltipPosition;
        this.control = null;
        this.changeDetectorRef.detach();
    }
    ngOnInit() {
        this.setControl();
        this.changeDetectorRef.detectChanges();
    }
    ngOnDestroy() {
        if (this.controlSubscription) {
            this.controlSubscription.unsubscribe();
        }
    }
    onInput(event) {
        this.inputChange.emit(event.target.value);
        this.changeDetectorRef.detectChanges();
    }
    onSuffixImage() {
        this.suffixImgChange.emit();
        this.changeDetectorRef.detectChanges();
    }
    onHelperText() {
        this.helperTextChange.emit();
        this.changeDetectorRef.detectChanges();
    }
    onFocusOut() {
        this.initChange();
    }
    setControl() {
        if (!this.options) {
            return;
        }
        if (!this.options.placeholder) {
            this.options.placeholder = this.options.label;
        }
        if (!this.options.formGroup || !this.options.formControlName) {
            return;
        }
        this.control = this.options.formGroup.controls[this.options.formControlName];
        this.checkIfControlDisabled(this.control);
        this.control.markAsTouched();
        this.controlSubscription = this.control.statusChanges.subscribe(() => {
            this.initChange();
        });
    }
    initChange() {
        if (!this.control) {
            return;
        }
        this.checkIfControlInvalid(this.control);
        this.getLabel();
        this.changeDetectorRef.detectChanges();
    }
    checkIfControlInvalid(control) {
        this.controlInvalid = control.touched && control.invalid;
    }
    checkIfControlDisabled(control) {
        if (control.disabled || this.options.disabled) {
            control.disable();
            this.options.disabled = true;
        }
    }
    getLabel() {
        this.label = '';
        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.label = options.errors[error];
                    return;
                }
            }
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: IpiInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: IpiInputComponent, isStandalone: true, selector: "ipi-input", inputs: { options: "options" }, outputs: { inputChange: "inputChange", suffixImgChange: "suffixImgChange", helperTextChange: "helperTextChange" }, host: { listeners: { "focusout": "onFocusOut($event)" } }, ngImport: i0, template: "@if (options) {\n    @if (options.label !== '') {\n        <div class=\"header\">\n            <div class=\"label-wrapper\">\n                <label>{{ options.label }}</label>\n\n                @if (options.tooltip) {\n                    <svg class=\"tooltip-icon\" [ipiTooltip]=\"options.tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <g>\n                            <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                            <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                        </g>\n                    </svg>\n                }\n            </div>\n\n            @if (options.helperText) {\n                <div class=\"header-helper\" (click)=\"onHelperText()\" [routerLink]=\"options.helperRoute\">{{ options.helperText }}</div>\n            }\n        </div>\n    }\n\n    @if (!options.formGroup) {\n        <div class=\"input-field\" [ngClass]=\"{ 'disabled': options.disabled }\">\n            <ng-container [ngTemplateOutlet]=\"prefix\" [ngTemplateOutletContext]=\"{ prefixImg: options.prefixImg }\"></ng-container>\n\n            <input [disabled]=\"options.disabled\" class=\"input\" autocomplete=\"off\" [type]=\"options.type ? options.type : 'text'\" [placeholder]=\"options.placeholder\" (input)=\"onInput($event)\"/>\n\n            <ng-container [ngTemplateOutlet]=\"suffix\" [ngTemplateOutletContext]=\"{ suffixImg: options.suffixImg }\"></ng-container>\n        </div>\n    } @else {\n        <div class=\"input-field\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'error': controlInvalid, 'disabled': options.disabled }\">\n            <ng-container [ngTemplateOutlet]=\"prefix\" [ngTemplateOutletContext]=\"{ prefixImg: options.prefixImg }\"></ng-container>\n\n            @if (options.formControlName) {\n                <input class=\"input\" autocomplete=\"off\" [type]=\"options.type ? options.type : 'text'\" [placeholder]=\"options.placeholder\" [formControlName]=\"options.formControlName\"/>\n            }\n\n            <ng-container [ngTemplateOutlet]=\"suffix\" [ngTemplateOutletContext]=\"{ suffixImg: options.suffixImg }\"></ng-container>\n        </div>\n\n        <div class=\"footer\" [ngClass]=\"{ 'error': controlInvalid }\">\n            {{ label }}\n        </div>\n    }\n}\n\n<ng-template #prefix let-prefixImg=\"prefixImg\">\n    @if (prefixImg) {\n        <ipi-img class=\"icon left\" [src]=\"'assets/img/' + prefixImg\" [ariaLabel]=\"'Input prefix icon'\"></ipi-img>\n    }\n</ng-template>\n\n<ng-template #suffix let-suffixImg=\"suffixImg\">\n    @if (suffixImg) {\n        <ipi-img class=\"icon right\" [src]=\"'assets/img/' + suffixImg\" (click)=\"onSuffixImage()\" [ariaLabel]=\"'Input suffix icon'\"></ipi-img>\n    }\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;touch-action:manipulation}.header{width:100%;min-height:20px;display:flex;align-items:center;justify-content:space-between;column-gap:4px;color:var(--ipi-input-header-color, #0B1222);text-wrap:nowrap;margin-bottom:2px}.header-helper{font-size:12px;text-align:right;color:var(--ipi-input-helper-text-color, #5D6068);cursor:pointer}.header-helper:after{content:\"\";display:block;width:0;height:2px;background:var(--ipi-input-helper-text-color, #5D6068);transition:width .3s}.header-helper:hover:after{width:100%}input::placeholder{color:var(--ipi-input-placeholder-color, #C6C6C6)}.footer{height:14px;font-size:12px;margin-top:2px}.footer.error{color:var(--ipi-input-error-color, #F96138)}label{font-size:14px;font-weight:600;text-wrap:wrap;margin-right:4px}.label-wrapper{display:flex;align-items:center}.input-field{height:44px;display:flex;align-items:center;justify-content:space-around;border:solid var(--ipi-input-border-color, #E9E9E9);border-width:var(--ipi-input-border-width, 1px);border-radius:4px;transition:border 1s;padding:0 6px}.input-field.disabled{opacity:.7}.input{width:100%;height:20px;min-width:108px;font-weight:400;font-size:14px;color:var(--ipi-input-value-color, #0B1222);background-color:transparent;line-height:20px;border:none;outline:none}input[disabled],.input-field.disabled{cursor:not-allowed}input[type=password]{font-weight:700;letter-spacing:3px}input[type=password]::placeholder{font-weight:400;letter-spacing:normal}.icon{width:16px;height:16px}.icon.left{margin-right:6px;padding:6px}.icon.right{cursor:pointer;margin-left:6px;padding:6px}.tooltip-icon{overflow:visible}.tooltip-icon path{fill:var(--ipi-input-tooltip-icon-fill, transparent);stroke:var(--ipi-input-tooltip-icon-stroke, #C6C6C6)}ipi-img.left path{fill:var(--ipi-input-icon-left-fill, #C6C6C6);stroke:var(--ipi-input-icon-left-stroke, transparent)}ipi-img.right path{fill:var(--ipi-input-icon-right-fill, #C6C6C6);stroke:var(--ipi-input-icon-right-stroke, transparent)}.error{border-color:var(--ipi-input-border-error-color, #F96138);border-width:var(--ipi-input-border-error-width, 1px)}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-background-clip:text;-webkit-text-fill-color:var(--ipi-input-text-color, #0B1222);box-shadow:inset 0 0 20px 20px #23232300}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { 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"] }, { kind: "directive", type: IpiTooltipDirective, selector: "[ipiTooltip]", inputs: ["ipiTooltip", "tooltipPosition"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: IpiInputComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ipi-input', imports: [
                        NgClass,
                        NgTemplateOutlet,
                        RouterLink,
                        FormsModule,
                        IpiImageComponent,
                        ReactiveFormsModule,
                        IpiTooltipDirective,
                        IpiTooltipDirective
                    ], template: "@if (options) {\n    @if (options.label !== '') {\n        <div class=\"header\">\n            <div class=\"label-wrapper\">\n                <label>{{ options.label }}</label>\n\n                @if (options.tooltip) {\n                    <svg class=\"tooltip-icon\" [ipiTooltip]=\"options.tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <g>\n                            <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                            <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                        </g>\n                    </svg>\n                }\n            </div>\n\n            @if (options.helperText) {\n                <div class=\"header-helper\" (click)=\"onHelperText()\" [routerLink]=\"options.helperRoute\">{{ options.helperText }}</div>\n            }\n        </div>\n    }\n\n    @if (!options.formGroup) {\n        <div class=\"input-field\" [ngClass]=\"{ 'disabled': options.disabled }\">\n            <ng-container [ngTemplateOutlet]=\"prefix\" [ngTemplateOutletContext]=\"{ prefixImg: options.prefixImg }\"></ng-container>\n\n            <input [disabled]=\"options.disabled\" class=\"input\" autocomplete=\"off\" [type]=\"options.type ? options.type : 'text'\" [placeholder]=\"options.placeholder\" (input)=\"onInput($event)\"/>\n\n            <ng-container [ngTemplateOutlet]=\"suffix\" [ngTemplateOutletContext]=\"{ suffixImg: options.suffixImg }\"></ng-container>\n        </div>\n    } @else {\n        <div class=\"input-field\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'error': controlInvalid, 'disabled': options.disabled }\">\n            <ng-container [ngTemplateOutlet]=\"prefix\" [ngTemplateOutletContext]=\"{ prefixImg: options.prefixImg }\"></ng-container>\n\n            @if (options.formControlName) {\n                <input class=\"input\" autocomplete=\"off\" [type]=\"options.type ? options.type : 'text'\" [placeholder]=\"options.placeholder\" [formControlName]=\"options.formControlName\"/>\n            }\n\n            <ng-container [ngTemplateOutlet]=\"suffix\" [ngTemplateOutletContext]=\"{ suffixImg: options.suffixImg }\"></ng-container>\n        </div>\n\n        <div class=\"footer\" [ngClass]=\"{ 'error': controlInvalid }\">\n            {{ label }}\n        </div>\n    }\n}\n\n<ng-template #prefix let-prefixImg=\"prefixImg\">\n    @if (prefixImg) {\n        <ipi-img class=\"icon left\" [src]=\"'assets/img/' + prefixImg\" [ariaLabel]=\"'Input prefix icon'\"></ipi-img>\n    }\n</ng-template>\n\n<ng-template #suffix let-suffixImg=\"suffixImg\">\n    @if (suffixImg) {\n        <ipi-img class=\"icon right\" [src]=\"'assets/img/' + suffixImg\" (click)=\"onSuffixImage()\" [ariaLabel]=\"'Input suffix icon'\"></ipi-img>\n    }\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;touch-action:manipulation}.header{width:100%;min-height:20px;display:flex;align-items:center;justify-content:space-between;column-gap:4px;color:var(--ipi-input-header-color, #0B1222);text-wrap:nowrap;margin-bottom:2px}.header-helper{font-size:12px;text-align:right;color:var(--ipi-input-helper-text-color, #5D6068);cursor:pointer}.header-helper:after{content:\"\";display:block;width:0;height:2px;background:var(--ipi-input-helper-text-color, #5D6068);transition:width .3s}.header-helper:hover:after{width:100%}input::placeholder{color:var(--ipi-input-placeholder-color, #C6C6C6)}.footer{height:14px;font-size:12px;margin-top:2px}.footer.error{color:var(--ipi-input-error-color, #F96138)}label{font-size:14px;font-weight:600;text-wrap:wrap;margin-right:4px}.label-wrapper{display:flex;align-items:center}.input-field{height:44px;display:flex;align-items:center;justify-content:space-around;border:solid var(--ipi-input-border-color, #E9E9E9);border-width:var(--ipi-input-border-width, 1px);border-radius:4px;transition:border 1s;padding:0 6px}.input-field.disabled{opacity:.7}.input{width:100%;height:20px;min-width:108px;font-weight:400;font-size:14px;color:var(--ipi-input-value-color, #0B1222);background-color:transparent;line-height:20px;border:none;outline:none}input[disabled],.input-field.disabled{cursor:not-allowed}input[type=password]{font-weight:700;letter-spacing:3px}input[type=password]::placeholder{font-weight:400;letter-spacing:normal}.icon{width:16px;height:16px}.icon.left{margin-right:6px;padding:6px}.icon.right{cursor:pointer;margin-left:6px;padding:6px}.tooltip-icon{overflow:visible}.tooltip-icon path{fill:var(--ipi-input-tooltip-icon-fill, transparent);stroke:var(--ipi-input-tooltip-icon-stroke, #C6C6C6)}ipi-img.left path{fill:var(--ipi-input-icon-left-fill, #C6C6C6);stroke:var(--ipi-input-icon-left-stroke, transparent)}ipi-img.right path{fill:var(--ipi-input-icon-right-fill, #C6C6C6);stroke:var(--ipi-input-icon-right-stroke, transparent)}.error{border-color:var(--ipi-input-border-error-color, #F96138);border-width:var(--ipi-input-border-error-width, 1px)}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-background-clip:text;-webkit-text-fill-color:var(--ipi-input-text-color, #0B1222);box-shadow:inset 0 0 20px 20px #23232300}\n"] }]
        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { options: [{
                type: Input
            }], inputChange: [{
                type: Output
            }], suffixImgChange: [{
                type: Output
            }], helperTextChange: [{
                type: Output
            }], onFocusOut: [{
                type: HostListener,
                args: ['focusout', ['$event']]
            }] } });

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

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