cax-design-system 1.0.0

package/fesm2022/cax-design-system-inputotp.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cax-design-system-inputotp.mjs","sources":["../../src/app/components/inputotp/inputotp.ts","../../src/app/components/inputotp/cax-design-system-inputotp.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, EventEmitter, Input, NgModule, Output, QueryList, TemplateRef, ViewEncapsulation, booleanAttribute, forwardRef } from '@angular/core';\nimport { CaxTemplate, SharedModule } from 'cax-design-system/api';\nimport { InputTextModule } from 'cax-design-system/inputtext';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { Nullable } from 'cax-design-system/ts-helpers';\nimport { AutoFocusModule } from 'cax-design-system/autofocus';\nimport { InputOtpChangeEvent } from './inputotp.interface';\n\nexport const INPUT_OTP_VALUE_ACCESSOR: any = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => InputOtp),\n    multi: true\n};\n/**\n * Input Otp is used to enter one time passwords.\n * @group Components\n */\n@Component({\n    selector: 'p-inputOtp',\n    template: `\n        <ng-container *ngFor=\"let i of getRange(length); trackBy: trackByFn\">\n            <ng-container *ngIf=\"!inputTemplate\">\n                <input\n                    type=\"text\"\n                    pInputText\n                    [value]=\"getModelValue(i)\"\n                    [maxLength]=\"1\"\n                    [type]=\"inputType\"\n                    class=\"p-inputotp-input\"\n                    [inputmode]=\"inputMode\"\n                    [variant]=\"variant\"\n                    [readonly]=\"readonly\"\n                    [disabled]=\"disabled\"\n                    [invalid]=\"invalid\"\n                    [tabindex]=\"tabindex\"\n                    [unstyled]=\"unstyled\"\n                    (input)=\"onInput($event, i - 1)\"\n                    (focus)=\"onInputFocus($event)\"\n                    (blur)=\"onInputBlur($event)\"\n                    (paste)=\"onPaste($event)\"\n                    (keydown)=\"onKeyDown($event)\"\n                    pAutoFocus\n                    [autofocus]=\"getAutofocus(i)\"\n                />\n            </ng-container>\n            <ng-container *ngIf=\"inputTemplate\">\n                <ng-container *ngTemplateOutlet=\"inputTemplate; context: { $implicit: getToken(i - 1), events: getTemplateEvents(i - 1), index: i }\"> </ng-container>\n            </ng-container>\n        </ng-container>\n    `,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        class: 'p-inputotp p-component'\n    },\n    providers: [INPUT_OTP_VALUE_ACCESSOR]\n})\nexport class InputOtp implements AfterContentInit {\n    /**\n     * When present, it specifies that the component should have invalid state style.\n     * @group Props\n     */\n    @Input() invalid: boolean = false;\n    /**\n     * When present, it specifies that the component should be disabled.\n     * @group Props\n     */\n\n    @Input() disabled: boolean = false;\n    /**\n     * When present, it specifies that an input field is read-only.\n     * @group Props\n     */\n    @Input() readonly: boolean = false;\n    /**\n     * Specifies the input variant of the component.\n     * @group Props\n     */\n    @Input() variant: 'filled' | 'outlined' = 'outlined';\n    /**\n     * Index of the element in tabbing order.\n     * @group Props\n     */\n    @Input() tabindex: number | null = null;\n    /**\n     * Number of characters to initiate.\n     * @group Props\n     */\n    @Input() length: number = 4;\n    /**\n     * Mask pattern.\n     * @group Props\n     */\n    @Input() mask: boolean = false;\n    /**\n     * When present, it specifies that an input field is integer-only.\n     * @group Props\n     */\n    @Input() integerOnly: boolean = false;\n    /**\n     * When present, it specifies that the component should automatically get focus on load.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) autofocus: boolean | undefined;\n    /**\n     * Callback to invoke on value change.\n     * @group Emits\n     */\n    @Output() onChange: EventEmitter<InputOtpChangeEvent> = new EventEmitter<InputOtpChangeEvent>();\n    /**\n     * Callback to invoke when the component receives focus.\n     * @param {Event} event - Browser event.\n     * @group Emits\n     */\n    @Output() onFocus: EventEmitter<Event> = new EventEmitter();\n    /**\n     * Callback to invoke when the component loses focus.\n     * @param {Event} event - Browser event.\n     * @group Emits\n     */\n    @Output() onBlur: EventEmitter<Event> = new EventEmitter();\n\n    @ContentChildren(CaxTemplate) templates: Nullable<QueryList<CaxTemplate>>;\n\n    inputTemplate: Nullable<TemplateRef<any>>;\n\n    tokens: any = [];\n\n    onModelChange: Function = () => {};\n\n    onModelTouched: Function = () => {};\n\n    value: any;\n\n    get inputMode(): string {\n        return this.integerOnly ? 'numeric' : 'text';\n    }\n\n    get inputType(): string {\n        return this.mask ? 'password' : 'text';\n    }\n\n    constructor(public cd: ChangeDetectorRef) {}\n\n    ngAfterContentInit() {\n        (this.templates as QueryList<CaxTemplate>).forEach((item) => {\n            switch (item.getType()) {\n                case 'input':\n                    this.inputTemplate = item.template;\n                    break;\n                default:\n                    this.inputTemplate = item.template;\n                    break;\n            }\n        });\n    }\n\n    getToken(index) {\n        return this.tokens[index];\n    }\n\n    getTemplateEvents(index) {\n        return {\n            input: (event) => this.onInput(event, index),\n            keydown: (event) => this.onKeyDown(event),\n            focus: (event) => this.onFocus.emit(event),\n            blur: (event) => this.onBlur.emit(event),\n            paste: (event) => this.onPaste(event)\n        };\n    }\n\n    onInput(event, index) {\n        this.tokens[index] = event.target.value;\n        this.updateModel(event);\n\n        if (event.inputType === 'deleteContentBackward') {\n            this.moveToPrev(event);\n        } else if (event.inputType === 'insertText' || event.inputType === 'deleteContentForward') {\n            this.moveToNext(event);\n        }\n    }\n\n    updateModel(event: any) {\n        const newValue = this.tokens.join('');\n        this.onModelChange(newValue);\n\n        this.onChange.emit({\n            originalEvent: event,\n            value: newValue\n        });\n    }\n\n    writeValue(value: any): void {\n        if (value) {\n            if (Array.isArray(value) && value.length > 0) {\n                this.value = value.slice(0, this.length);\n            } else {\n                this.value = value.toString().split('').slice(0, this.length);\n            }\n        } else {\n            this.value = value;\n        }\n        this.updateTokens();\n        this.cd.markForCheck();\n    }\n\n    updateTokens() {\n        if (this.value !== null && this.value !== undefined) {\n            if (Array.isArray(this.value)) {\n                this.tokens = [...this.value];\n            } else {\n                this.tokens = this.value.toString().split('');\n            }\n        } else {\n            this.tokens = [];\n        }\n    }\n\n    getModelValue(i: number) {\n        return this.tokens[i - 1] || '';\n    }\n\n    getAutofocus(i: number): boolean {\n        if (i === 1) {\n            return this.autofocus;\n        }\n        return false;\n    }\n\n    registerOnChange(fn: Function): void {\n        this.onModelChange = fn;\n    }\n\n    registerOnTouched(fn: Function): void {\n        this.onModelTouched = fn;\n    }\n\n    moveToPrev(event) {\n        let prevInput = this.findPrevInput(event.target);\n\n        if (prevInput) {\n            prevInput.focus();\n            prevInput.select();\n        }\n    }\n\n    moveToNext(event) {\n        let nextInput = this.findNextInput(event.target);\n\n        if (nextInput) {\n            nextInput.focus();\n            nextInput.select();\n        }\n    }\n\n    findNextInput(element) {\n        let nextElement = element.nextElementSibling;\n\n        if (!nextElement) return;\n\n        return nextElement.nodeName === 'INPUT' ? nextElement : this.findNextInput(nextElement);\n    }\n\n    findPrevInput(element) {\n        let prevElement = element.previousElementSibling;\n\n        if (!prevElement) return;\n\n        return prevElement.nodeName === 'INPUT' ? prevElement : this.findPrevInput(prevElement);\n    }\n\n    onInputFocus(event) {\n        event.target.select();\n        this.onFocus.emit(event);\n    }\n\n    onInputBlur(event) {\n        this.onBlur.emit(event);\n    }\n\n    onKeyDown(event) {\n        if (event.altKey || event.ctrlKey || event.metaKey) {\n            return;\n        }\n\n        switch (event.key) {\n            case 'ArrowLeft':\n                this.moveToPrev(event);\n                event.preventDefault();\n\n                break;\n\n            case 'ArrowUp':\n            case 'ArrowDown':\n                event.preventDefault();\n\n                break;\n\n            case 'Backspace':\n                if (event.target.value.length === 0) {\n                    this.moveToPrev(event);\n                    event.preventDefault();\n                }\n\n                break;\n\n            case 'ArrowRight':\n                this.moveToNext(event);\n                event.preventDefault();\n\n                break;\n\n            default:\n                if ((this.integerOnly && !((event.code.startsWith('Digit') || event.code.startsWith('Numpad')) && Number(event.key) >= 0 && Number(event.key) <= 9)) || (this.tokens.join('').length >= this.length && event.code !== 'Delete')) {\n                    event.preventDefault();\n                }\n\n                break;\n        }\n    }\n\n    onPaste(event) {\n        if (!this.disabled && !this.readonly) {\n            let paste = event.clipboardData.getData('text');\n\n            if (paste.length) {\n                let pastedCode = paste.substring(0, this.length + 1);\n\n                if (!this.integerOnly || !isNaN(pastedCode)) {\n                    this.tokens = pastedCode.split('');\n                    this.updateModel(event);\n                }\n            }\n\n            event.preventDefault();\n        }\n    }\n\n    getRange(n: number): number[] {\n        return Array.from({ length: n }, (_, index) => index + 1);\n    }\n\n    trackByFn(index: number) {\n        return index;\n    }\n}\n\n@NgModule({\n    imports: [CommonModule, SharedModule, InputTextModule, AutoFocusModule],\n    exports: [InputOtp, SharedModule],\n    declarations: [InputOtp]\n})\nexport class InputOtpModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/cax-design-system-inputswitch.mjs

@@ -0,0 +1,251 @@
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { forwardRef, EventEmitter, numberAttribute, booleanAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ViewChild, NgModule } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { AutoFocusModule } from 'cax-design-system/autofocus';
+
+const INPUTSWITCH_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => InputSwitch),
+    multi: true
+};
+/**
+ * InputSwitch is used to select a boolean value.
+ * @group Components
+ */
+class InputSwitch {
+    cd;
+    /**
+     * Inline style of the component.
+     * @group Props
+     */
+    style;
+    /**
+     * Style class of the component.
+     * @group Props
+     */
+    styleClass;
+    /**
+     * Index of the element in tabbing order.
+     * @group Props
+     */
+    tabindex;
+    /**
+     * Identifier of the input element.
+     * @group Props
+     */
+    inputId;
+    /**
+     * Name of the input element.
+     * @group Props
+     */
+    name;
+    /**
+     * When present, it specifies that the element should be disabled.
+     * @group Props
+     */
+    disabled;
+    /**
+     * When present, it specifies that the component cannot be edited.
+     * @group Props
+     */
+    readonly;
+    /**
+     * Value in checked state.
+     * @group Props
+     */
+    trueValue = true;
+    /**
+     * Value in unchecked state.
+     * @group Props
+     */
+    falseValue = false;
+    /**
+     * Used to define a string that autocomplete attribute the current element.
+     * @group Props
+     */
+    ariaLabel;
+    /**
+     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     * @group Props
+     */
+    ariaLabelledBy;
+    /**
+     * When present, it specifies that the component should automatically get focus on load.
+     * @group Props
+     */
+    autofocus;
+    /**
+     * Callback to invoke when the on value change.
+     * @param {InputSwitchChangeEvent} event - Custom change event.
+     * @group Emits
+     */
+    onChange = new EventEmitter();
+    input;
+    modelValue = false;
+    focused = false;
+    onModelChange = () => { };
+    onModelTouched = () => { };
+    constructor(cd) {
+        this.cd = cd;
+    }
+    onClick(event) {
+        if (!this.disabled && !this.readonly) {
+            this.modelValue = this.checked() ? this.falseValue : this.trueValue;
+            this.onModelChange(this.modelValue);
+            this.onChange.emit({
+                originalEvent: event,
+                checked: this.modelValue
+            });
+            this.input.nativeElement.focus();
+        }
+    }
+    onFocus() {
+        this.focused = true;
+    }
+    onBlur() {
+        this.focused = false;
+        this.onModelTouched();
+    }
+    writeValue(value) {
+        this.modelValue = value;
+        this.cd.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onModelChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onModelTouched = fn;
+    }
+    setDisabledState(val) {
+        this.disabled = val;
+        this.cd.markForCheck();
+    }
+    checked() {
+        return this.modelValue === this.trueValue;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: InputSwitch, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: InputSwitch, selector: "p-inputSwitch", inputs: { style: "style", styleClass: "styleClass", tabindex: ["tabindex", "tabindex", numberAttribute], inputId: "inputId", name: "name", disabled: ["disabled", "disabled", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], trueValue: "trueValue", falseValue: "falseValue", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", autofocus: ["autofocus", "autofocus", booleanAttribute] }, outputs: { onChange: "onChange" }, host: { classAttribute: "cax-element" }, providers: [INPUTSWITCH_VALUE_ACCESSOR], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: `
+        <div
+            [ngClass]="{ 'p-inputswitch p-component': true, 'p-inputswitch-checked': checked(), 'p-disabled': disabled, 'p-focus': focused }"
+            [ngStyle]="style"
+            [class]="styleClass"
+            (click)="onClick($event)"
+            [attr.data-pc-name]="'inputswitch'"
+            [attr.data-pc-section]="'root'"
+        >
+            <div class="p-hidden-accessible" [attr.data-pc-section]="'hiddenInputWrapper'" [attr.data-p-hidden-accessible]="true">
+                <input
+                    #input
+                    [attr.id]="inputId"
+                    type="checkbox"
+                    role="switch"
+                    [checked]="checked()"
+                    [disabled]="disabled"
+                    [attr.aria-checked]="checked()"
+                    [attr.aria-labelledby]="ariaLabelledBy"
+                    [attr.aria-label]="ariaLabel"
+                    [attr.name]="name"
+                    [attr.tabindex]="tabindex"
+                    (focus)="onFocus()"
+                    (blur)="onBlur()"
+                    [attr.data-pc-section]="'hiddenInput'"
+                    pAutoFocus
+                    [autofocus]="autofocus"
+                />
+            </div>
+            <span class="p-inputswitch-slider" [attr.data-pc-section]="'slider'"></span>
+        </div>
+    `, isInline: true, styles: ["@layer cax{.p-inputswitch{position:relative;display:inline-block;-webkit-user-select:none;user-select:none}.p-inputswitch-slider{position:absolute;cursor:pointer;inset:0;border:1px solid transparent}.p-inputswitch-slider:before{position:absolute;content:\"\";top:50%}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: InputSwitch, decorators: [{
+            type: Component,
+            args: [{ selector: 'p-inputSwitch', template: `
+        <div
+            [ngClass]="{ 'p-inputswitch p-component': true, 'p-inputswitch-checked': checked(), 'p-disabled': disabled, 'p-focus': focused }"
+            [ngStyle]="style"
+            [class]="styleClass"
+            (click)="onClick($event)"
+            [attr.data-pc-name]="'inputswitch'"
+            [attr.data-pc-section]="'root'"
+        >
+            <div class="p-hidden-accessible" [attr.data-pc-section]="'hiddenInputWrapper'" [attr.data-p-hidden-accessible]="true">
+                <input
+                    #input
+                    [attr.id]="inputId"
+                    type="checkbox"
+                    role="switch"
+                    [checked]="checked()"
+                    [disabled]="disabled"
+                    [attr.aria-checked]="checked()"
+                    [attr.aria-labelledby]="ariaLabelledBy"
+                    [attr.aria-label]="ariaLabel"
+                    [attr.name]="name"
+                    [attr.tabindex]="tabindex"
+                    (focus)="onFocus()"
+                    (blur)="onBlur()"
+                    [attr.data-pc-section]="'hiddenInput'"
+                    pAutoFocus
+                    [autofocus]="autofocus"
+                />
+            </div>
+            <span class="p-inputswitch-slider" [attr.data-pc-section]="'slider'"></span>
+        </div>
+    `, providers: [INPUTSWITCH_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'cax-element'
+                    }, styles: ["@layer cax{.p-inputswitch{position:relative;display:inline-block;-webkit-user-select:none;user-select:none}.p-inputswitch-slider{position:absolute;cursor:pointer;inset:0;border:1px solid transparent}.p-inputswitch-slider:before{position:absolute;content:\"\";top:50%}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { style: [{
+                type: Input
+            }], styleClass: [{
+                type: Input
+            }], tabindex: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], inputId: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], readonly: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], trueValue: [{
+                type: Input
+            }], falseValue: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], ariaLabelledBy: [{
+                type: Input
+            }], autofocus: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], onChange: [{
+                type: Output
+            }], input: [{
+                type: ViewChild,
+                args: ['input']
+            }] } });
+class InputSwitchModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: InputSwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: InputSwitchModule, declarations: [InputSwitch], imports: [CommonModule, AutoFocusModule], exports: [InputSwitch] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: InputSwitchModule, imports: [CommonModule, AutoFocusModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: InputSwitchModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, AutoFocusModule],
+                    exports: [InputSwitch],
+                    declarations: [InputSwitch]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { INPUTSWITCH_VALUE_ACCESSOR, InputSwitch, InputSwitchModule };
+//# sourceMappingURL=cax-design-system-inputswitch.mjs.map

package/fesm2022/cax-design-system-inputswitch.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cax-design-system-inputswitch.mjs","sources":["../../src/app/components/inputswitch/inputswitch.ts","../../src/app/components/inputswitch/cax-design-system-inputswitch.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, NgModule, Output, ViewChild, ViewEncapsulation, booleanAttribute, forwardRef, numberAttribute } from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { AutoFocusModule } from 'cax-design-system/autofocus';\nimport { InputSwitchChangeEvent } from './inputswitch.interface';\n\nexport const INPUTSWITCH_VALUE_ACCESSOR: any = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => InputSwitch),\n    multi: true\n};\n/**\n * InputSwitch is used to select a boolean value.\n * @group Components\n */\n@Component({\n    selector: 'p-inputSwitch',\n    template: `\n        <div\n            [ngClass]=\"{ 'p-inputswitch p-component': true, 'p-inputswitch-checked': checked(), 'p-disabled': disabled, 'p-focus': focused }\"\n            [ngStyle]=\"style\"\n            [class]=\"styleClass\"\n            (click)=\"onClick($event)\"\n            [attr.data-pc-name]=\"'inputswitch'\"\n            [attr.data-pc-section]=\"'root'\"\n        >\n            <div class=\"p-hidden-accessible\" [attr.data-pc-section]=\"'hiddenInputWrapper'\" [attr.data-p-hidden-accessible]=\"true\">\n                <input\n                    #input\n                    [attr.id]=\"inputId\"\n                    type=\"checkbox\"\n                    role=\"switch\"\n                    [checked]=\"checked()\"\n                    [disabled]=\"disabled\"\n                    [attr.aria-checked]=\"checked()\"\n                    [attr.aria-labelledby]=\"ariaLabelledBy\"\n                    [attr.aria-label]=\"ariaLabel\"\n                    [attr.name]=\"name\"\n                    [attr.tabindex]=\"tabindex\"\n                    (focus)=\"onFocus()\"\n                    (blur)=\"onBlur()\"\n                    [attr.data-pc-section]=\"'hiddenInput'\"\n                    pAutoFocus\n                    [autofocus]=\"autofocus\"\n                />\n            </div>\n            <span class=\"p-inputswitch-slider\" [attr.data-pc-section]=\"'slider'\"></span>\n        </div>\n    `,\n    providers: [INPUTSWITCH_VALUE_ACCESSOR],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    styleUrls: ['./inputswitch.css'],\n    host: {\n        class: 'cax-element'\n    }\n})\nexport class InputSwitch {\n    /**\n     * Inline style of the component.\n     * @group Props\n     */\n    @Input() style: { [klass: string]: any } | null | undefined;\n    /**\n     * Style class of the component.\n     * @group Props\n     */\n    @Input() styleClass: string | undefined;\n    /**\n     * Index of the element in tabbing order.\n     * @group Props\n     */\n    @Input({ transform: numberAttribute }) tabindex: number | undefined;\n    /**\n     * Identifier of the input element.\n     * @group Props\n     */\n    @Input() inputId: string | undefined;\n    /**\n     * Name of the input element.\n     * @group Props\n     */\n    @Input() name: string | undefined;\n    /**\n     * When present, it specifies that the element should be disabled.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) disabled: boolean | undefined;\n    /**\n     * When present, it specifies that the component cannot be edited.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) readonly: boolean | undefined;\n    /**\n     * Value in checked state.\n     * @group Props\n     */\n    @Input() trueValue: any = true;\n    /**\n     * Value in unchecked state.\n     * @group Props\n     */\n    @Input() falseValue: any = false;\n    /**\n     * Used to define a string that autocomplete attribute the current element.\n     * @group Props\n     */\n    @Input() ariaLabel: string | undefined;\n    /**\n     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.\n     * @group Props\n     */\n    @Input() ariaLabelledBy: string | undefined;\n    /**\n     * When present, it specifies that the component should automatically get focus on load.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) autofocus: boolean | undefined;\n    /**\n     * Callback to invoke when the on value change.\n     * @param {InputSwitchChangeEvent} event - Custom change event.\n     * @group Emits\n     */\n    @Output() onChange: EventEmitter<InputSwitchChangeEvent> = new EventEmitter<InputSwitchChangeEvent>();\n\n    @ViewChild('input') input!: ElementRef;\n\n    modelValue: any = false;\n\n    focused: boolean = false;\n\n    onModelChange: Function = () => {};\n\n    onModelTouched: Function = () => {};\n\n    constructor(private cd: ChangeDetectorRef) {}\n\n    onClick(event: Event) {\n        if (!this.disabled && !this.readonly) {\n            this.modelValue = this.checked() ? this.falseValue : this.trueValue;\n\n            this.onModelChange(this.modelValue);\n            this.onChange.emit({\n                originalEvent: event,\n                checked: this.modelValue\n            });\n\n            this.input.nativeElement.focus();\n        }\n    }\n\n    onFocus() {\n        this.focused = true;\n    }\n\n    onBlur() {\n        this.focused = false;\n        this.onModelTouched();\n    }\n\n    writeValue(value: any): void {\n        this.modelValue = value;\n        this.cd.markForCheck();\n    }\n\n    registerOnChange(fn: Function): void {\n        this.onModelChange = fn;\n    }\n\n    registerOnTouched(fn: Function): void {\n        this.onModelTouched = fn;\n    }\n\n    setDisabledState(val: boolean): void {\n        this.disabled = val;\n        this.cd.markForCheck();\n    }\n\n    checked() {\n        return this.modelValue === this.trueValue;\n    }\n}\n\n@NgModule({\n    imports: [CommonModule, AutoFocusModule],\n    exports: [InputSwitch],\n    declarations: [InputSwitch]\n})\nexport class InputSwitchModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/cax-design-system-inputtext.mjs

@@ -0,0 +1,145 @@
+import * as i0 from '@angular/core';
+import { Directive, Optional, Input, HostListener, Component, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i2$1 from 'cax-design-system/api';
+
+class Inputtext {
+    el;
+    ngModel;
+    cd;
+    config;
+    filled;
+    variant = 'outlined';
+    constructor(el, ngModel, cd, config) {
+        this.el = el;
+        this.ngModel = ngModel;
+        this.cd = cd;
+        this.config = config;
+    }
+    ngAfterViewInit() {
+        this.updateFilledState();
+        this.cd.detectChanges();
+    }
+    ngDoCheck() {
+        this.updateFilledState();
+    }
+    onInput() {
+        this.updateFilledState();
+    }
+    updateFilledState() {
+        this.filled = (this.el.nativeElement.value && this.el.nativeElement.value.length) || (this.ngModel && this.ngModel.model);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: Inputtext, deps: [{ token: i0.ElementRef }, { token: i2.NgModel, optional: true }, { token: i0.ChangeDetectorRef }, { token: i2$1.caxConfig }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.9", type: Inputtext, selector: "[caxInputText]", inputs: { variant: "variant" }, host: { listeners: { "input": "onInput($event)" }, properties: { "class.cax-filled": "filled", "class.cax-variant-filled": "variant === \"filled\" || config.inputStyle() === \"filled\"" }, classAttribute: "cax-inputtext cax-component cax-element" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: Inputtext, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[caxInputText]',
+                    host: {
+                        class: 'cax-inputtext cax-component cax-element',
+                        '[class.cax-filled]': 'filled',
+                        '[class.cax-variant-filled]': 'variant === "filled" || config.inputStyle() === "filled"'
+                    }
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i2.NgModel, decorators: [{
+                    type: Optional
+                }] }, { type: i0.ChangeDetectorRef }, { type: i2$1.caxConfig }], propDecorators: { variant: [{
+                type: Input
+            }], onInput: [{
+                type: HostListener,
+                args: ['input', ['$event']]
+            }] } });
+
+class InputTextComponent {
+    value = '';
+    placeholder = '';
+    disabled = false;
+    maxlength;
+    successText;
+    errorText;
+    showLabel = true;
+    leftIcon = false;
+    rightIcon = false;
+    label;
+    iconPath;
+    disabledIcon = false;
+    showIcon = false;
+    iconClass = '';
+    leftIconClass = '';
+    rightIconClass = 'cax cax-close-circle';
+    invalid = false;
+    useChips = false;
+    clearInput() {
+        this.value = '';
+    }
+    onInputChange(event) {
+        this.value = event;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: InputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: InputTextComponent, selector: "cax-inputtext", inputs: { value: "value", placeholder: "placeholder", disabled: "disabled", maxlength: "maxlength", successText: "successText", errorText: "errorText", showLabel: "showLabel", leftIcon: "leftIcon", rightIcon: "rightIcon", label: "label", iconPath: "iconPath", disabledIcon: "disabledIcon", showIcon: "showIcon", iconClass: "iconClass", leftIconClass: "leftIconClass", rightIconClass: "rightIconClass", invalid: "invalid", useChips: "useChips" }, ngImport: i0, template: "<div class=\"field\">\r\n  <!-- Label with conditional opacity class -->\r\n  <label *ngIf=\"label\" class=\"block\" [ngClass]=\"{'disabled-opacity': disabled}\">\r\n    {{ label }}\r\n  </label>\r\n\r\n  <div\r\n    class=\"input-container\"\r\n    [ngClass]=\"{\r\n      'with-left-icon': leftIcon,\r\n      'with-right-icon': rightIcon,\r\n      'input-disabled': disabled\r\n    }\"\r\n  >\r\n\r\n    <!-- Left Icon (If provided) -->\r\n    <span *ngIf=\"leftIcon\" class=\"cax-input-icon-left\">\r\n      <i [ngClass]=\"leftIconClass\"></i>\r\n    </span>\r\n\r\n    <!-- Main Input Field -->\r\n    <input\r\n      type=\"text\"\r\n      caxInputText\r\n      [(ngModel)]=\"value\"\r\n      [maxlength]=\"maxlength\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled\"\r\n\r\n      required\r\n      [ngClass]=\"{\r\n        'input-invalid': invalid,\r\n        'input-disabled': disabled,\r\n        'with-left-icon': leftIcon,\r\n        'with-right-icon': rightIcon,\r\n        'border-red': invalid\r\n      }\"\r\n      [attr.aria-describedby]=\"successText || invalid ? 'helper-text' : null\"\r\n    />\r\n\r\n    <!-- Right Icon with Conditional Click Event and Cursor Style -->\r\n    <span\r\n      *ngIf=\"rightIcon\"\r\n      class=\"cax-input-icon-right\"\r\n      (click)=\"!disabled && clearInput()\"\r\n      [ngClass]=\"{'clickable-icon': !disabled, 'non-clickable-icon': disabled}\">\r\n      <i [ngClass]=\"rightIcon ? 'cax cax-close-circle' : rightIconClass\"></i>\r\n    </span>\r\n  </div>\r\n\r\n  <!-- Error Message with conditional opacity -->\r\n  <small *ngIf=\"invalid\" id=\"helper-text\" class=\"cax-error block mt-1 disabled-opacity\" [ngClass]=\"{'disabled-opacity': disabled}\">\r\n    {{ errorText }}\r\n  </small>\r\n\r\n  <!-- Helper Text with conditional opacity -->\r\n  <small *ngIf=\"successText && !invalid\" id=\"helper-text\" class=\"cax-helper-text block mt-1\" [ngClass]=\"{'disabled-opacity': disabled}\">\r\n    {{ successText }}\r\n  </small>\r\n</div>\r\n", styles: ["@layer cax{.cax-inputtext{margin:0}.cax-fluid .cax-inputtext{width:100%}.cax-inputgroup{display:flex;align-items:stretch}.cax-inputgroup-addon{display:flex;align-items:center;justify-content:center}.cax-inputgroup .cax-float-label{display:flex;align-items:stretch;width:100%}.cax-inputgroup .cax-inputtext,.cax-fluid .cax-inputgroup .cax-inputtext,.cax-inputgroup .cax-inputwrapper,.cax-inputgroup .cax-inputwrapper>.cax-component{flex:1 1 auto;width:1%}.cax-float-label{display:block;position:relative}.cax-float-label label{position:absolute;pointer-events:none;top:50%;margin-top:-.5rem;transition-property:all;transition-timing-function:ease;line-height:1}.cax-float-label textarea~label{top:1rem}.cax-float-label input:focus~label,.cax-float-label input.cax-filled~label,.cax-float-label textarea:focus~label,.cax-float-label textarea.cax-filled~label,.cax-float-label .cax-inputwrapper-focus~label,.cax-float-label .cax-inputwrapper-filled~label{top:-.75rem;font-size:12px}.cax-float-label .input:-webkit-autofill~label{top:-20px;font-size:12px}.cax-float-label .cax-placeholder,.cax-float-label input::placeholder,.cax-float-label .cax-inputtext::placeholder{opacity:0;transition-property:all;transition-timing-function:ease}.cax-float-label .cax-focus .cax-placeholder,.cax-float-label input:focus::placeholder,.cax-float-label .cax-inputtext:focus::placeholder{opacity:1;transition-property:all;transition-timing-function:ease}.cax-input-icon-left,.cax-input-icon-right{position:relative;display:inline-block;margin-bottom:.3rem}.cax-input-icon-left>i,.cax-input-icon-left>.cax-icon-wrapper,.cax-input-icon-right>i,.cax-input-icon-right>.cax-icon-wrapper{position:absolute;top:50%;margin-top:-.5rem}.cax-fluid .cax-input-icon-left,.cax-fluid .cax-input-icon-right{display:block;width:100%}.input-disabled,.disabled-opacity{opacity:.5}.cax-inputtext.with-left-icon{padding-left:35px}.cax-inputtext.with-right-icon{padding-right:35px}.cax-inputtext.with-left-icon.with-right-icon{padding-left:35px;padding-right:35px}.cax-float-label input:focus~label,.cax-float-label input.cax-filled~label{top:-.75rem;font-size:12px}input:enabled:focus{outline:none}input.input-invalid:enabled:focus{border-color:var(--red-base)}input.input-invalid{border:1px solid var(--red-base)!important}.clickable-icon{cursor:pointer}.non-clickable-icon{cursor:default}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: Inputtext, selector: "[caxInputText]", inputs: ["variant"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: InputTextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cax-inputtext', template: "<div class=\"field\">\r\n  <!-- Label with conditional opacity class -->\r\n  <label *ngIf=\"label\" class=\"block\" [ngClass]=\"{'disabled-opacity': disabled}\">\r\n    {{ label }}\r\n  </label>\r\n\r\n  <div\r\n    class=\"input-container\"\r\n    [ngClass]=\"{\r\n      'with-left-icon': leftIcon,\r\n      'with-right-icon': rightIcon,\r\n      'input-disabled': disabled\r\n    }\"\r\n  >\r\n\r\n    <!-- Left Icon (If provided) -->\r\n    <span *ngIf=\"leftIcon\" class=\"cax-input-icon-left\">\r\n      <i [ngClass]=\"leftIconClass\"></i>\r\n    </span>\r\n\r\n    <!-- Main Input Field -->\r\n    <input\r\n      type=\"text\"\r\n      caxInputText\r\n      [(ngModel)]=\"value\"\r\n      [maxlength]=\"maxlength\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled\"\r\n\r\n      required\r\n      [ngClass]=\"{\r\n        'input-invalid': invalid,\r\n        'input-disabled': disabled,\r\n        'with-left-icon': leftIcon,\r\n        'with-right-icon': rightIcon,\r\n        'border-red': invalid\r\n      }\"\r\n      [attr.aria-describedby]=\"successText || invalid ? 'helper-text' : null\"\r\n    />\r\n\r\n    <!-- Right Icon with Conditional Click Event and Cursor Style -->\r\n    <span\r\n      *ngIf=\"rightIcon\"\r\n      class=\"cax-input-icon-right\"\r\n      (click)=\"!disabled && clearInput()\"\r\n      [ngClass]=\"{'clickable-icon': !disabled, 'non-clickable-icon': disabled}\">\r\n      <i [ngClass]=\"rightIcon ? 'cax cax-close-circle' : rightIconClass\"></i>\r\n    </span>\r\n  </div>\r\n\r\n  <!-- Error Message with conditional opacity -->\r\n  <small *ngIf=\"invalid\" id=\"helper-text\" class=\"cax-error block mt-1 disabled-opacity\" [ngClass]=\"{'disabled-opacity': disabled}\">\r\n    {{ errorText }}\r\n  </small>\r\n\r\n  <!-- Helper Text with conditional opacity -->\r\n  <small *ngIf=\"successText && !invalid\" id=\"helper-text\" class=\"cax-helper-text block mt-1\" [ngClass]=\"{'disabled-opacity': disabled}\">\r\n    {{ successText }}\r\n  </small>\r\n</div>\r\n", styles: ["@layer cax{.cax-inputtext{margin:0}.cax-fluid .cax-inputtext{width:100%}.cax-inputgroup{display:flex;align-items:stretch}.cax-inputgroup-addon{display:flex;align-items:center;justify-content:center}.cax-inputgroup .cax-float-label{display:flex;align-items:stretch;width:100%}.cax-inputgroup .cax-inputtext,.cax-fluid .cax-inputgroup .cax-inputtext,.cax-inputgroup .cax-inputwrapper,.cax-inputgroup .cax-inputwrapper>.cax-component{flex:1 1 auto;width:1%}.cax-float-label{display:block;position:relative}.cax-float-label label{position:absolute;pointer-events:none;top:50%;margin-top:-.5rem;transition-property:all;transition-timing-function:ease;line-height:1}.cax-float-label textarea~label{top:1rem}.cax-float-label input:focus~label,.cax-float-label input.cax-filled~label,.cax-float-label textarea:focus~label,.cax-float-label textarea.cax-filled~label,.cax-float-label .cax-inputwrapper-focus~label,.cax-float-label .cax-inputwrapper-filled~label{top:-.75rem;font-size:12px}.cax-float-label .input:-webkit-autofill~label{top:-20px;font-size:12px}.cax-float-label .cax-placeholder,.cax-float-label input::placeholder,.cax-float-label .cax-inputtext::placeholder{opacity:0;transition-property:all;transition-timing-function:ease}.cax-float-label .cax-focus .cax-placeholder,.cax-float-label input:focus::placeholder,.cax-float-label .cax-inputtext:focus::placeholder{opacity:1;transition-property:all;transition-timing-function:ease}.cax-input-icon-left,.cax-input-icon-right{position:relative;display:inline-block;margin-bottom:.3rem}.cax-input-icon-left>i,.cax-input-icon-left>.cax-icon-wrapper,.cax-input-icon-right>i,.cax-input-icon-right>.cax-icon-wrapper{position:absolute;top:50%;margin-top:-.5rem}.cax-fluid .cax-input-icon-left,.cax-fluid .cax-input-icon-right{display:block;width:100%}.input-disabled,.disabled-opacity{opacity:.5}.cax-inputtext.with-left-icon{padding-left:35px}.cax-inputtext.with-right-icon{padding-right:35px}.cax-inputtext.with-left-icon.with-right-icon{padding-left:35px;padding-right:35px}.cax-float-label input:focus~label,.cax-float-label input.cax-filled~label{top:-.75rem;font-size:12px}input:enabled:focus{outline:none}input.input-invalid:enabled:focus{border-color:var(--red-base)}input.input-invalid{border:1px solid var(--red-base)!important}.clickable-icon{cursor:pointer}.non-clickable-icon{cursor:default}}\n"] }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], maxlength: [{
+                type: Input
+            }], successText: [{
+                type: Input
+            }], errorText: [{
+                type: Input
+            }], showLabel: [{
+                type: Input
+            }], leftIcon: [{
+                type: Input
+            }], rightIcon: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], iconPath: [{
+                type: Input
+            }], disabledIcon: [{
+                type: Input
+            }], showIcon: [{
+                type: Input
+            }], iconClass: [{
+                type: Input
+            }], leftIconClass: [{
+                type: Input
+            }], rightIconClass: [{
+                type: Input
+            }], invalid: [{
+                type: Input
+            }], useChips: [{
+                type: Input
+            }] } });
+
+class InputTextModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: InputTextModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: InputTextModule, declarations: [InputTextComponent, Inputtext], imports: [CommonModule, FormsModule], exports: [InputTextComponent, Inputtext] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: InputTextModule, imports: [CommonModule, FormsModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: InputTextModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, FormsModule],
+                    declarations: [InputTextComponent, Inputtext],
+                    exports: [InputTextComponent, Inputtext]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { InputTextComponent, InputTextModule, Inputtext };
+//# sourceMappingURL=cax-design-system-inputtext.mjs.map

package/fesm2022/cax-design-system-inputtext.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cax-design-system-inputtext.mjs","sources":["../../src/app/components/inputtext/inputtext.directive.ts","../../src/app/components/inputtext/inputtext.component.ts","../../src/app/components/inputtext/inputtext.html","../../src/app/components/inputtext/inputtext.module.ts","../../src/app/components/inputtext/cax-design-system-inputtext.ts"],"sourcesContent":["import { NgModule, Directive, ElementRef, HostListener, DoCheck, Optional, ChangeDetectorRef, AfterViewInit, Input } from '@angular/core';\nimport { NgModel } from '@angular/forms';\nimport { caxConfig } from 'cax-design-system/api';\nimport { Nullable } from 'cax-design-system/ts-helpers';\n\n@Directive({\n    selector: '[caxInputText]',\n    host: {\n        class: 'cax-inputtext cax-component cax-element',\n        '[class.cax-filled]': 'filled',\n        '[class.cax-variant-filled]': 'variant === \"filled\" || config.inputStyle() === \"filled\"'\n    }\n})\nexport class Inputtext implements DoCheck, AfterViewInit {\n    filled: Nullable<boolean>;\n\n    @Input() variant: 'filled' | 'outlined' = 'outlined';\n    constructor(\n        public el: ElementRef,\n        @Optional() public ngModel: NgModel,\n        private cd: ChangeDetectorRef,\n        public config: caxConfig\n    ) {}\n\n    ngAfterViewInit() {\n        this.updateFilledState();\n        this.cd.detectChanges();\n    }\n\n    ngDoCheck() {\n        this.updateFilledState();\n    }\n\n    @HostListener('input', ['$event'])\n    onInput() {\n        this.updateFilledState();\n    }\n\n    updateFilledState() {\n        this.filled = (this.el.nativeElement.value && this.el.nativeElement.value.length) || (this.ngModel && this.ngModel.model);\n    }\n}\n","import { Component, Input } from '@angular/core';\n\n@Component({\n    selector: 'cax-inputtext',\n    templateUrl: './inputtext.html',\n    styleUrls: ['./inputtext.scss']\n})\nexport class InputTextComponent {\n    @Input() value: string = '';\n    @Input() placeholder: string = '';\n    @Input() disabled: boolean = false;\n    @Input() maxlength?: number;\n    @Input() successText?: string;\n    @Input() errorText?: string;\n    @Input() showLabel?: boolean = true;\n    @Input() leftIcon?: boolean = false;\n    @Input() rightIcon?: boolean = false;\n    @Input() label?: string;\n    @Input() iconPath?: string;\n    @Input() disabledIcon: boolean = false;\n    @Input() showIcon?: boolean = false;\n    @Input() iconClass: string = '';\n    @Input() leftIconClass: string = '';\n    @Input() rightIconClass: string = 'cax cax-close-circle';\n    @Input() invalid: boolean = false;\n    @Input() useChips: boolean = false;\n\n    clearInput(): void {\n        this.value = '';\n    }\n    onInputChange(event: string): void {\n        this.value = event;\n    }\n}\n","<div class=\"field\">\r\n  <!-- Label with conditional opacity class -->\r\n  <label *ngIf=\"label\" class=\"block\" [ngClass]=\"{'disabled-opacity': disabled}\">\r\n    {{ label }}\r\n  </label>\r\n\r\n  <div\r\n    class=\"input-container\"\r\n    [ngClass]=\"{\r\n      'with-left-icon': leftIcon,\r\n      'with-right-icon': rightIcon,\r\n      'input-disabled': disabled\r\n    }\"\r\n  >\r\n\r\n    <!-- Left Icon (If provided) -->\r\n    <span *ngIf=\"leftIcon\" class=\"cax-input-icon-left\">\r\n      <i [ngClass]=\"leftIconClass\"></i>\r\n    </span>\r\n\r\n    <!-- Main Input Field -->\r\n    <input\r\n      type=\"text\"\r\n      caxInputText\r\n      [(ngModel)]=\"value\"\r\n      [maxlength]=\"maxlength\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled\"\r\n\r\n      required\r\n      [ngClass]=\"{\r\n        'input-invalid': invalid,\r\n        'input-disabled': disabled,\r\n        'with-left-icon': leftIcon,\r\n        'with-right-icon': rightIcon,\r\n        'border-red': invalid\r\n      }\"\r\n      [attr.aria-describedby]=\"successText || invalid ? 'helper-text' : null\"\r\n    />\r\n\r\n    <!-- Right Icon with Conditional Click Event and Cursor Style -->\r\n    <span\r\n      *ngIf=\"rightIcon\"\r\n      class=\"cax-input-icon-right\"\r\n      (click)=\"!disabled && clearInput()\"\r\n      [ngClass]=\"{'clickable-icon': !disabled, 'non-clickable-icon': disabled}\">\r\n      <i [ngClass]=\"rightIcon ? 'cax cax-close-circle' : rightIconClass\"></i>\r\n    </span>\r\n  </div>\r\n\r\n  <!-- Error Message with conditional opacity -->\r\n  <small *ngIf=\"invalid\" id=\"helper-text\" class=\"cax-error block mt-1 disabled-opacity\" [ngClass]=\"{'disabled-opacity': disabled}\">\r\n    {{ errorText }}\r\n  </small>\r\n\r\n  <!-- Helper Text with conditional opacity -->\r\n  <small *ngIf=\"successText && !invalid\" id=\"helper-text\" class=\"cax-helper-text block mt-1\" [ngClass]=\"{'disabled-opacity': disabled}\">\r\n    {{ successText }}\r\n  </small>\r\n</div>\r\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { Inputtext } from './inputtext.directive';\nimport { InputTextComponent } from './inputtext.component';\nimport { FormsModule } from '@angular/forms';\n\n@NgModule({\n    imports: [CommonModule, FormsModule],\n    declarations: [InputTextComponent, Inputtext],\n    exports: [InputTextComponent, Inputtext]\n})\nexport class InputTextModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i1","i2","i3.Inputtext"],"mappings":"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"}