cax-design-system 2.0.0 → 2.2.0

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

@@ -232,117 +232,19 @@ class Editor {
     initQuillElements() {
         if (!this.quillElements) {
             this.quillElements = {
-                editorElement: DomHandler.findSingle(this.el.nativeElement, 'div.p-editor-content'),
-                toolbarElement: DomHandler.findSingle(this.el.nativeElement, 'div.p-editor-toolbar')
+                editorElement: DomHandler.findSingle(this.el.nativeElement, 'div.cax-editor-content'),
+                toolbarElement: DomHandler.findSingle(this.el.nativeElement, 'div.cax-editor-toolbar')
             };
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: Editor, deps: [{ token: i0.ElementRef }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: Editor, selector: "p-editor", inputs: { style: "style", styleClass: "styleClass", placeholder: "placeholder", formats: "formats", modules: "modules", bounds: "bounds", scrollingContainer: "scrollingContainer", debug: "debug", readonly: "readonly" }, outputs: { onInit: "onInit", onTextChange: "onTextChange", onSelectionChange: "onSelectionChange" }, host: { classAttribute: "cax-element" }, providers: [EDITOR_VALUE_ACCESSOR], queries: [{ propertyName: "toolbar", first: true, predicate: Header, descendants: true }, { propertyName: "templates", predicate: CaxTemplate }], ngImport: i0, template: `
-        <div [ngClass]="'p-editor-container'" [class]="styleClass">
-            <div class="p-editor-toolbar" *ngIf="toolbar || headerTemplate">
-                <ng-content select="cax-header"></ng-content>
-                <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
-            </div>
-            <div class="p-editor-toolbar" *ngIf="!modules && !toolbar && !headerTemplate">
-                <span class="ql-formats">
-                    <select class="ql-header">
-                        <option value="1">Heading</option>
-                        <option value="2">Subheading</option>
-                        <option selected>Normal</option>
-                    </select>
-                    <select class="ql-font">
-                        <option selected>Sans Serif</option>
-                        <option value="serif">Serif</option>
-                        <option value="monospace">Monospace</option>
-                    </select>
-                </span>
-                <span class="ql-formats">
-                    <button class="ql-bold" aria-label="Bold" type="button"></button>
-                    <button class="ql-italic" aria-label="Italic" type="button"></button>
-                    <button class="ql-underline" aria-label="Underline" type="button"></button>
-                </span>
-                <span class="ql-formats">
-                    <select class="ql-color"></select>
-                    <select class="ql-background"></select>
-                </span>
-                <span class="ql-formats">
-                    <button class="ql-list" value="ordered" aria-label="Ordered List" type="button"></button>
-                    <button class="ql-list" value="bullet" aria-label="Unordered List" type="button"></button>
-                    <select class="ql-align">
-                        <option selected></option>
-                        <option value="center">center</option>
-                        <option value="right">right</option>
-                        <option value="justify">justify</option>
-                    </select>
-                </span>
-                <span class="ql-formats">
-                    <button class="ql-link" aria-label="Insert Link" type="button"></button>
-                    <button class="ql-image" aria-label="Insert Image" type="button"></button>
-                    <button class="ql-code-block" aria-label="Insert Code Block" type="button"></button>
-                </span>
-                <span class="ql-formats">
-                    <button class="ql-clean" aria-label="Remove Styles" type="button"></button>
-                </span>
-            </div>
-            <div class="p-editor-content" [ngStyle]="style"></div>
-        </div>
-    `, isInline: true, styles: [".p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item{width:auto;height:auto}\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: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: Editor, selector: "cax-editor", inputs: { style: "style", styleClass: "styleClass", placeholder: "placeholder", formats: "formats", modules: "modules", bounds: "bounds", scrollingContainer: "scrollingContainer", debug: "debug", readonly: "readonly" }, outputs: { onInit: "onInit", onTextChange: "onTextChange", onSelectionChange: "onSelectionChange" }, host: { classAttribute: "cax-element" }, providers: [EDITOR_VALUE_ACCESSOR], queries: [{ propertyName: "toolbar", first: true, predicate: Header, descendants: true }, { propertyName: "templates", predicate: CaxTemplate }], ngImport: i0, template: "<div [ngClass]=\"'cax-editor-container'\" [class]=\"styleClass\">\r\n    <div class=\"cax-editor-toolbar\" *ngIf=\"toolbar || headerTemplate\">\r\n        <ng-content select=\"cax-header\"></ng-content>\r\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"cax-editor-toolbar\" *ngIf=\"!modules && !toolbar && !headerTemplate\">\r\n        <span class=\"ql-formats\">\r\n            <select class=\"ql-header\">\r\n                <option value=\"1\">Heading</option>\r\n                <option value=\"2\">Subheading</option>\r\n                <option selected>Normal</option>\r\n            </select>\r\n            <select class=\"ql-font\">\r\n                <option selected>Sans Serif</option>\r\n                <option value=\"serif\">Serif</option>\r\n                <option value=\"monospace\">Monospace</option>\r\n            </select>\r\n        </span>\r\n        <span class=\"ql-formats\">\r\n            <button class=\"ql-bold\" aria-label=\"Bold\" type=\"button\"></button>\r\n            <button class=\"ql-italic\" aria-label=\"Italic\" type=\"button\"></button>\r\n            <button class=\"ql-underline\" aria-label=\"Underline\" type=\"button\"></button>\r\n        </span>\r\n        <span class=\"ql-formats\">\r\n            <select class=\"ql-color\"></select>\r\n            <select class=\"ql-background\"></select>\r\n        </span>\r\n        <span class=\"ql-formats\">\r\n            <button class=\"ql-list\" value=\"ordered\" aria-label=\"Ordered List\" type=\"button\"></button>\r\n            <button class=\"ql-list\" value=\"bullet\" aria-label=\"Unordered List\" type=\"button\"></button>\r\n            <select class=\"ql-align\">\r\n                <option selected></option>\r\n                <option value=\"center\">center</option>\r\n                <option value=\"right\">right</option>\r\n                <option value=\"justify\">justify</option>\r\n            </select>\r\n        </span>\r\n        <span class=\"ql-formats\">\r\n            <button class=\"ql-link\" aria-label=\"Insert Link\" type=\"button\"></button>\r\n            <button class=\"ql-image\" aria-label=\"Insert Image\" type=\"button\"></button>\r\n            <button class=\"ql-code-block\" aria-label=\"Insert Code Block\" type=\"button\"></button>\r\n        </span>\r\n        <span class=\"ql-formats\">\r\n            <button class=\"ql-clean\" aria-label=\"Remove Styles\" type=\"button\"></button>\r\n        </span>\r\n    </div>\r\n    <div class=\"cax-editor-content\" [ngStyle]=\"style\"></div>\r\n</div>", styles: [".cax-editor-container .cax-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item{width:auto;height:auto}\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: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: Editor, decorators: [{
             type: Component,
-            args: [{ selector: 'p-editor', template: `
-        <div [ngClass]="'p-editor-container'" [class]="styleClass">
-            <div class="p-editor-toolbar" *ngIf="toolbar || headerTemplate">
-                <ng-content select="cax-header"></ng-content>
-                <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
-            </div>
-            <div class="p-editor-toolbar" *ngIf="!modules && !toolbar && !headerTemplate">
-                <span class="ql-formats">
-                    <select class="ql-header">
-                        <option value="1">Heading</option>
-                        <option value="2">Subheading</option>
-                        <option selected>Normal</option>
-                    </select>
-                    <select class="ql-font">
-                        <option selected>Sans Serif</option>
-                        <option value="serif">Serif</option>
-                        <option value="monospace">Monospace</option>
-                    </select>
-                </span>
-                <span class="ql-formats">
-                    <button class="ql-bold" aria-label="Bold" type="button"></button>
-                    <button class="ql-italic" aria-label="Italic" type="button"></button>
-                    <button class="ql-underline" aria-label="Underline" type="button"></button>
-                </span>
-                <span class="ql-formats">
-                    <select class="ql-color"></select>
-                    <select class="ql-background"></select>
-                </span>
-                <span class="ql-formats">
-                    <button class="ql-list" value="ordered" aria-label="Ordered List" type="button"></button>
-                    <button class="ql-list" value="bullet" aria-label="Unordered List" type="button"></button>
-                    <select class="ql-align">
-                        <option selected></option>
-                        <option value="center">center</option>
-                        <option value="right">right</option>
-                        <option value="justify">justify</option>
-                    </select>
-                </span>
-                <span class="ql-formats">
-                    <button class="ql-link" aria-label="Insert Link" type="button"></button>
-                    <button class="ql-image" aria-label="Insert Image" type="button"></button>
-                    <button class="ql-code-block" aria-label="Insert Code Block" type="button"></button>
-                </span>
-                <span class="ql-formats">
-                    <button class="ql-clean" aria-label="Remove Styles" type="button"></button>
-                </span>
-            </div>
-            <div class="p-editor-content" [ngStyle]="style"></div>
-        </div>
-    `, providers: [EDITOR_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: 'cax-editor', providers: [EDITOR_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'cax-element'
-                    }, styles: [".p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item{width:auto;height:auto}\n"] }]
+                    }, template: "<div [ngClass]=\"'cax-editor-container'\" [class]=\"styleClass\">\r\n    <div class=\"cax-editor-toolbar\" *ngIf=\"toolbar || headerTemplate\">\r\n        <ng-content select=\"cax-header\"></ng-content>\r\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"cax-editor-toolbar\" *ngIf=\"!modules && !toolbar && !headerTemplate\">\r\n        <span class=\"ql-formats\">\r\n            <select class=\"ql-header\">\r\n                <option value=\"1\">Heading</option>\r\n                <option value=\"2\">Subheading</option>\r\n                <option selected>Normal</option>\r\n            </select>\r\n            <select class=\"ql-font\">\r\n                <option selected>Sans Serif</option>\r\n                <option value=\"serif\">Serif</option>\r\n                <option value=\"monospace\">Monospace</option>\r\n            </select>\r\n        </span>\r\n        <span class=\"ql-formats\">\r\n            <button class=\"ql-bold\" aria-label=\"Bold\" type=\"button\"></button>\r\n            <button class=\"ql-italic\" aria-label=\"Italic\" type=\"button\"></button>\r\n            <button class=\"ql-underline\" aria-label=\"Underline\" type=\"button\"></button>\r\n        </span>\r\n        <span class=\"ql-formats\">\r\n            <select class=\"ql-color\"></select>\r\n            <select class=\"ql-background\"></select>\r\n        </span>\r\n        <span class=\"ql-formats\">\r\n            <button class=\"ql-list\" value=\"ordered\" aria-label=\"Ordered List\" type=\"button\"></button>\r\n            <button class=\"ql-list\" value=\"bullet\" aria-label=\"Unordered List\" type=\"button\"></button>\r\n            <select class=\"ql-align\">\r\n                <option selected></option>\r\n                <option value=\"center\">center</option>\r\n                <option value=\"right\">right</option>\r\n                <option value=\"justify\">justify</option>\r\n            </select>\r\n        </span>\r\n        <span class=\"ql-formats\">\r\n            <button class=\"ql-link\" aria-label=\"Insert Link\" type=\"button\"></button>\r\n            <button class=\"ql-image\" aria-label=\"Insert Image\" type=\"button\"></button>\r\n            <button class=\"ql-code-block\" aria-label=\"Insert Code Block\" type=\"button\"></button>\r\n        </span>\r\n        <span class=\"ql-formats\">\r\n            <button class=\"ql-clean\" aria-label=\"Remove Styles\" type=\"button\"></button>\r\n        </span>\r\n    </div>\r\n    <div class=\"cax-editor-content\" [ngStyle]=\"style\"></div>\r\n</div>", styles: [".cax-editor-container .cax-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item{width:auto;height:auto}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -377,15 +279,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                 type: ContentChild,
                 args: [Header]
             }] } });
+
 class EditorModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: EditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: EditorModule, declarations: [Editor], imports: [CommonModule], exports: [Editor, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: EditorModule, imports: [CommonModule, SharedModule] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: EditorModule, declarations: [Editor], imports: [CommonModule, SharedModule], exports: [Editor, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: EditorModule, imports: [CommonModule, SharedModule, SharedModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: EditorModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule],
+                    imports: [CommonModule, SharedModule],
                     exports: [Editor, SharedModule],
                     declarations: [Editor]
                 }]

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

@@ -1 +1 @@
-{"version":3,"file":"cax-design-system-editor.mjs","sources":["../../src/app/components/editor/editor.ts","../../src/app/components/editor/cax-design-system-editor.ts"],"sourcesContent":["import { CommonModule, isPlatformServer } from '@angular/common';\nimport {\n    AfterContentInit,\n    ChangeDetectionStrategy,\n    Component,\n    ContentChild,\n    ContentChildren,\n    ElementRef,\n    EventEmitter,\n    Inject,\n    Input,\n    NgModule,\n    Output,\n    PLATFORM_ID,\n    QueryList,\n    TemplateRef,\n    ViewEncapsulation,\n    afterNextRender,\n    forwardRef\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { Header, CaxTemplate, SharedModule } from 'cax-design-system/api';\nimport { DomHandler } from 'cax-design-system/dom';\nimport { Nullable } from 'cax-design-system/ts-helpers';\nimport { EditorInitEvent, EditorSelectionChangeEvent, EditorTextChangeEvent } from './editor.interface';\n\nexport const EDITOR_VALUE_ACCESSOR: any = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => Editor),\n    multi: true\n};\n/**\n * Editor groups a collection of contents in tabs.\n * @group Components\n */\n@Component({\n    selector: 'p-editor',\n    template: `\n        <div [ngClass]=\"'p-editor-container'\" [class]=\"styleClass\">\n            <div class=\"p-editor-toolbar\" *ngIf=\"toolbar || headerTemplate\">\n                <ng-content select=\"cax-header\"></ng-content>\n                <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n            </div>\n            <div class=\"p-editor-toolbar\" *ngIf=\"!modules && !toolbar && !headerTemplate\">\n                <span class=\"ql-formats\">\n                    <select class=\"ql-header\">\n                        <option value=\"1\">Heading</option>\n                        <option value=\"2\">Subheading</option>\n                        <option selected>Normal</option>\n                    </select>\n                    <select class=\"ql-font\">\n                        <option selected>Sans Serif</option>\n                        <option value=\"serif\">Serif</option>\n                        <option value=\"monospace\">Monospace</option>\n                    </select>\n                </span>\n                <span class=\"ql-formats\">\n                    <button class=\"ql-bold\" aria-label=\"Bold\" type=\"button\"></button>\n                    <button class=\"ql-italic\" aria-label=\"Italic\" type=\"button\"></button>\n                    <button class=\"ql-underline\" aria-label=\"Underline\" type=\"button\"></button>\n                </span>\n                <span class=\"ql-formats\">\n                    <select class=\"ql-color\"></select>\n                    <select class=\"ql-background\"></select>\n                </span>\n                <span class=\"ql-formats\">\n                    <button class=\"ql-list\" value=\"ordered\" aria-label=\"Ordered List\" type=\"button\"></button>\n                    <button class=\"ql-list\" value=\"bullet\" aria-label=\"Unordered List\" type=\"button\"></button>\n                    <select class=\"ql-align\">\n                        <option selected></option>\n                        <option value=\"center\">center</option>\n                        <option value=\"right\">right</option>\n                        <option value=\"justify\">justify</option>\n                    </select>\n                </span>\n                <span class=\"ql-formats\">\n                    <button class=\"ql-link\" aria-label=\"Insert Link\" type=\"button\"></button>\n                    <button class=\"ql-image\" aria-label=\"Insert Image\" type=\"button\"></button>\n                    <button class=\"ql-code-block\" aria-label=\"Insert Code Block\" type=\"button\"></button>\n                </span>\n                <span class=\"ql-formats\">\n                    <button class=\"ql-clean\" aria-label=\"Remove Styles\" type=\"button\"></button>\n                </span>\n            </div>\n            <div class=\"p-editor-content\" [ngStyle]=\"style\"></div>\n        </div>\n    `,\n    providers: [EDITOR_VALUE_ACCESSOR],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    styleUrls: ['./editor.css'],\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        class: 'cax-element'\n    }\n})\nexport class Editor implements AfterContentInit, ControlValueAccessor {\n    /**\n     * Inline style of the container.\n     * @group Props\n     */\n    @Input() style: { [klass: string]: any } | null | undefined;\n    /**\n     * Style class of the container.\n     * @group Props\n     */\n    @Input() styleClass: string | undefined;\n    /**\n     * Placeholder text to show when editor is empty.\n     * @group Props\n     */\n    @Input() placeholder: string | undefined;\n    /**\n     * Whitelist of formats to display, see here for available options.\n     * @group Props\n     */\n    @Input() formats: string[] | undefined;\n    /**\n     * Modules configuration of Editor, see here for available options.\n     * @group Props\n     */\n    @Input() modules: object | undefined;\n    /**\n     * DOM Element or a CSS selector for a DOM Element, within which the editor’s p elements (i.e. tooltips, etc.) should be confined. Currently, it only considers left and right boundaries.\n     * @group Props\n     */\n    @Input() bounds: HTMLElement | string | undefined;\n    /**\n     * DOM Element or a CSS selector for a DOM Element, specifying which container has the scrollbars (i.e. overflow-y: auto), if is has been changed from the default ql-editor with custom CSS. Necessary to fix scroll jumping bugs when Quill is set to auto grow its height, and another ancestor container is responsible from the scrolling..\n     * @group Props\n     */\n    @Input() scrollingContainer: HTMLElement | string | undefined;\n    /**\n     * Shortcut for debug. Note debug is a static method and will affect other instances of Quill editors on the page. Only warning and error messages are enabled by default.\n     * @group Props\n     */\n    @Input() debug: string | undefined;\n    /**\n     * Whether to instantiate the editor to read-only mode.\n     * @group Props\n     */\n    @Input() get readonly(): boolean {\n        return this._readonly;\n    }\n    set readonly(val: boolean) {\n        this._readonly = val;\n\n        if (this.quill) {\n            if (this._readonly) this.quill.disable();\n            else this.quill.enable();\n        }\n    }\n    /**\n     * Callback to invoke when the quill modules are loaded.\n     * @param {EditorInitEvent} event - custom event.\n     * @group Emits\n     */\n    @Output() onInit: EventEmitter<EditorInitEvent> = new EventEmitter<EditorInitEvent>();\n    /**\n     * Callback to invoke when text of editor changes.\n     * @param {EditorTextChangeEvent} event - custom event.\n     * @group Emits\n     */\n    @Output() onTextChange: EventEmitter<EditorTextChangeEvent> = new EventEmitter<EditorTextChangeEvent>();\n    /**\n     * Callback to invoke when selection of the text changes.\n     * @param {EditorSelectionChangeEvent} event - custom event.\n     * @group Emits\n     */\n    @Output() onSelectionChange: EventEmitter<EditorSelectionChangeEvent> = new EventEmitter<EditorSelectionChangeEvent>();\n\n    @ContentChildren(CaxTemplate) templates!: QueryList<CaxTemplate>;\n\n    @ContentChild(Header) toolbar: any;\n\n    value: Nullable<string>;\n\n    delayedCommand: Function | null = null;\n\n    _readonly: boolean = false;\n\n    onModelChange: Function = () => {};\n\n    onModelTouched: Function = () => {};\n\n    quill: any;\n\n    dynamicQuill: any;\n\n    headerTemplate: Nullable<TemplateRef<any>>;\n\n    private get isAttachedQuillEditorToDOM(): boolean | undefined {\n        return this.quillElements?.editorElement?.isConnected;\n    }\n\n    private quillElements!: { editorElement: HTMLElement; toolbarElement: HTMLElement };\n\n    constructor(\n        public el: ElementRef,\n        @Inject(PLATFORM_ID) private platformId: object\n    ) {\n        /**\n         * Read or write the DOM once, when initializing non-Angular (Quill) library.\n         */\n        afterNextRender(() => {\n            this.initQuillElements();\n            this.initQuillEditor();\n        });\n    }\n\n    ngAfterContentInit() {\n        this.templates.forEach((item) => {\n            switch (item.getType()) {\n                case 'header':\n                    this.headerTemplate = item.template;\n                    break;\n            }\n        });\n    }\n\n    writeValue(value: any): void {\n        this.value = value;\n\n        if (this.quill) {\n            if (value) {\n                const command = (): void => {\n                    this.quill.setContents(this.quill.clipboard.convert(this.dynamicQuill.version.startsWith('2') ? { html: this.value } : this.value));\n                };\n\n                if (this.isAttachedQuillEditorToDOM) {\n                    command();\n                } else {\n                    this.delayedCommand = command;\n                }\n            } else {\n                const command = (): void => {\n                    this.quill.setText('');\n                };\n\n                if (this.isAttachedQuillEditorToDOM) {\n                    command();\n                } else {\n                    this.delayedCommand = command;\n                }\n            }\n        }\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    getQuill() {\n        return this.quill;\n    }\n\n    private initQuillEditor(): void {\n        if (isPlatformServer(this.platformId)) {\n            return;\n        }\n\n        /**\n         * Importing Quill at top level, throws `document is undefined` error during when\n         * building for SSR, so this dynamically loads quill when it's in browser module.\n         */\n        if (!this.dynamicQuill) {\n            import('quill')\n                .then((quillModule: any) => {\n                    this.dynamicQuill = quillModule.default;\n                    this.createQuillEditor();\n                })\n                .catch((e) => console.error(e.message));\n        } else {\n            this.createQuillEditor();\n        }\n    }\n\n    private createQuillEditor(): void {\n        this.initQuillElements();\n\n        const { toolbarElement, editorElement } = this.quillElements;\n        let defaultModule = { toolbar: toolbarElement };\n        let modules = this.modules ? { ...defaultModule, ...this.modules } : defaultModule;\n        this.quill = new this.dynamicQuill(editorElement, {\n            modules: modules,\n            placeholder: this.placeholder,\n            readOnly: this.readonly,\n            theme: 'snow',\n            formats: this.formats,\n            bounds: this.bounds,\n            debug: this.debug,\n            scrollingContainer: this.scrollingContainer\n        });\n\n        const isQuill2 = this.dynamicQuill.version.startsWith('2');\n\n        if (this.value) {\n            this.quill.setContents(this.quill.clipboard.convert(isQuill2 ? { html: this.value } : this.value));\n        }\n\n        this.quill.on('text-change', (delta: any, oldContents: any, source: any) => {\n            if (source === 'user') {\n                let html = isQuill2 ? this.quill.getSemanticHTML() : DomHandler.findSingle(editorElement, '.ql-editor').innerHTML;\n                let text = this.quill.getText().trim();\n                if (html === '<p><br></p>') {\n                    html = null;\n                }\n\n                this.onTextChange.emit({\n                    htmlValue: html,\n                    textValue: text,\n                    delta: delta,\n                    source: source\n                });\n\n                this.onModelChange(html);\n                this.onModelTouched();\n            }\n        });\n\n        this.quill.on('selection-change', (range: string, oldRange: string, source: string) => {\n            this.onSelectionChange.emit({\n                range: range,\n                oldRange: oldRange,\n                source: source\n            });\n        });\n\n        this.onInit.emit({\n            editor: this.quill\n        });\n    }\n\n    private initQuillElements(): void {\n        if (!this.quillElements) {\n            this.quillElements = {\n                editorElement: DomHandler.findSingle(this.el.nativeElement, 'div.p-editor-content'),\n                toolbarElement: DomHandler.findSingle(this.el.nativeElement, 'div.p-editor-toolbar')\n            };\n        }\n    }\n}\n\n@NgModule({\n    imports: [CommonModule],\n    exports: [Editor, SharedModule],\n    declarations: [Editor]\n})\nexport class EditorModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"cax-design-system-editor.mjs","sources":["../../src/app/components/editor/editor.ts","../../src/app/components/editor/editor.html","../../src/app/components/editor/editor.module.ts","../../src/app/components/editor/cax-design-system-editor.ts"],"sourcesContent":["import { CommonModule, isPlatformServer } from '@angular/common';\nimport {\n    AfterContentInit,\n    ChangeDetectionStrategy,\n    Component,\n    ContentChild,\n    ContentChildren,\n    ElementRef,\n    EventEmitter,\n    Inject,\n    Input,\n    NgModule,\n    Output,\n    PLATFORM_ID,\n    QueryList,\n    TemplateRef,\n    ViewEncapsulation,\n    afterNextRender,\n    forwardRef\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { Header, CaxTemplate, SharedModule } from 'cax-design-system/api';\nimport { DomHandler } from 'cax-design-system/dom';\nimport { Nullable } from 'cax-design-system/ts-helpers';\nimport { EditorInitEvent, EditorSelectionChangeEvent, EditorTextChangeEvent } from './editor.interface';\n\nexport const EDITOR_VALUE_ACCESSOR: any = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => Editor),\n    multi: true\n};\n/**\n * Editor groups a collection of contents in tabs.\n * @group Components\n */\n@Component({\n    selector: 'cax-editor',\n    templateUrl: `./editor.html`,\n    providers: [EDITOR_VALUE_ACCESSOR],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    styleUrls: ['./editor.scss'],\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        class: 'cax-element'\n    }\n})\nexport class Editor implements AfterContentInit, ControlValueAccessor {\n    /**\n     * Inline style of the container.\n     * @group Props\n     */\n    @Input() style: { [klass: string]: any } | null | undefined;\n    /**\n     * Style class of the container.\n     * @group Props\n     */\n    @Input() styleClass: string | undefined;\n    /**\n     * Placeholder text to show when editor is empty.\n     * @group Props\n     */\n    @Input() placeholder: string | undefined;\n    /**\n     * Whitelist of formats to display, see here for available options.\n     * @group Props\n     */\n    @Input() formats: string[] | undefined;\n    /**\n     * Modules configuration of Editor, see here for available options.\n     * @group Props\n     */\n    @Input() modules: object | undefined;\n    /**\n     * DOM Element or a CSS selector for a DOM Element, within which the editor’s p elements (i.e. tooltips, etc.) should be confined. Currently, it only considers left and right boundaries.\n     * @group Props\n     */\n    @Input() bounds: HTMLElement | string | undefined;\n    /**\n     * DOM Element or a CSS selector for a DOM Element, specifying which container has the scrollbars (i.e. overflow-y: auto), if is has been changed from the default ql-editor with custom CSS. Necessary to fix scroll jumping bugs when Quill is set to auto grow its height, and another ancestor container is responsible from the scrolling..\n     * @group Props\n     */\n    @Input() scrollingContainer: HTMLElement | string | undefined;\n    /**\n     * Shortcut for debug. Note debug is a static method and will affect other instances of Quill editors on the page. Only warning and error messages are enabled by default.\n     * @group Props\n     */\n    @Input() debug: string | undefined;\n    /**\n     * Whether to instantiate the editor to read-only mode.\n     * @group Props\n     */\n    @Input() get readonly(): boolean {\n        return this._readonly;\n    }\n    set readonly(val: boolean) {\n        this._readonly = val;\n\n        if (this.quill) {\n            if (this._readonly) this.quill.disable();\n            else this.quill.enable();\n        }\n    }\n    /**\n     * Callback to invoke when the quill modules are loaded.\n     * @param {EditorInitEvent} event - custom event.\n     * @group Emits\n     */\n    @Output() onInit: EventEmitter<EditorInitEvent> = new EventEmitter<EditorInitEvent>();\n    /**\n     * Callback to invoke when text of editor changes.\n     * @param {EditorTextChangeEvent} event - custom event.\n     * @group Emits\n     */\n    @Output() onTextChange: EventEmitter<EditorTextChangeEvent> = new EventEmitter<EditorTextChangeEvent>();\n    /**\n     * Callback to invoke when selection of the text changes.\n     * @param {EditorSelectionChangeEvent} event - custom event.\n     * @group Emits\n     */\n    @Output() onSelectionChange: EventEmitter<EditorSelectionChangeEvent> = new EventEmitter<EditorSelectionChangeEvent>();\n\n    @ContentChildren(CaxTemplate) templates!: QueryList<CaxTemplate>;\n\n    @ContentChild(Header) toolbar: any;\n\n    value: Nullable<string>;\n\n    delayedCommand: Function | null = null;\n\n    _readonly: boolean = false;\n\n    onModelChange: Function = () => {};\n\n    onModelTouched: Function = () => {};\n\n    quill: any;\n\n    dynamicQuill: any;\n\n    headerTemplate: Nullable<TemplateRef<any>>;\n\n    private get isAttachedQuillEditorToDOM(): boolean | undefined {\n        return this.quillElements?.editorElement?.isConnected;\n    }\n\n    private quillElements!: { editorElement: HTMLElement; toolbarElement: HTMLElement };\n\n    constructor(\n        public el: ElementRef,\n        @Inject(PLATFORM_ID) private platformId: object\n    ) {\n        /**\n         * Read or write the DOM once, when initializing non-Angular (Quill) library.\n         */\n        afterNextRender(() => {\n            this.initQuillElements();\n            this.initQuillEditor();\n        });\n    }\n\n    ngAfterContentInit() {\n        this.templates.forEach((item) => {\n            switch (item.getType()) {\n                case 'header':\n                    this.headerTemplate = item.template;\n                    break;\n            }\n        });\n    }\n\n    writeValue(value: any): void {\n        this.value = value;\n\n        if (this.quill) {\n            if (value) {\n                const command = (): void => {\n                    this.quill.setContents(this.quill.clipboard.convert(this.dynamicQuill.version.startsWith('2') ? { html: this.value } : this.value));\n                };\n\n                if (this.isAttachedQuillEditorToDOM) {\n                    command();\n                } else {\n                    this.delayedCommand = command;\n                }\n            } else {\n                const command = (): void => {\n                    this.quill.setText('');\n                };\n\n                if (this.isAttachedQuillEditorToDOM) {\n                    command();\n                } else {\n                    this.delayedCommand = command;\n                }\n            }\n        }\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    getQuill() {\n        return this.quill;\n    }\n\n    private initQuillEditor(): void {\n        if (isPlatformServer(this.platformId)) {\n            return;\n        }\n\n        /**\n         * Importing Quill at top level, throws `document is undefined` error during when\n         * building for SSR, so this dynamically loads quill when it's in browser module.\n         */\n        if (!this.dynamicQuill) {\n            import('quill')\n                .then((quillModule: any) => {\n                    this.dynamicQuill = quillModule.default;\n                    this.createQuillEditor();\n                })\n                .catch((e) => console.error(e.message));\n        } else {\n            this.createQuillEditor();\n        }\n    }\n\n    private createQuillEditor(): void {\n        this.initQuillElements();\n\n        const { toolbarElement, editorElement } = this.quillElements;\n        let defaultModule = { toolbar: toolbarElement };\n        let modules = this.modules ? { ...defaultModule, ...this.modules } : defaultModule;\n        this.quill = new this.dynamicQuill(editorElement, {\n            modules: modules,\n            placeholder: this.placeholder,\n            readOnly: this.readonly,\n            theme: 'snow',\n            formats: this.formats,\n            bounds: this.bounds,\n            debug: this.debug,\n            scrollingContainer: this.scrollingContainer\n        });\n\n        const isQuill2 = this.dynamicQuill.version.startsWith('2');\n\n        if (this.value) {\n            this.quill.setContents(this.quill.clipboard.convert(isQuill2 ? { html: this.value } : this.value));\n        }\n\n        this.quill.on('text-change', (delta: any, oldContents: any, source: any) => {\n            if (source === 'user') {\n                let html = isQuill2 ? this.quill.getSemanticHTML() : DomHandler.findSingle(editorElement, '.ql-editor').innerHTML;\n                let text = this.quill.getText().trim();\n                if (html === '<p><br></p>') {\n                    html = null;\n                }\n\n                this.onTextChange.emit({\n                    htmlValue: html,\n                    textValue: text,\n                    delta: delta,\n                    source: source\n                });\n\n                this.onModelChange(html);\n                this.onModelTouched();\n            }\n        });\n\n        this.quill.on('selection-change', (range: string, oldRange: string, source: string) => {\n            this.onSelectionChange.emit({\n                range: range,\n                oldRange: oldRange,\n                source: source\n            });\n        });\n\n        this.onInit.emit({\n            editor: this.quill\n        });\n    }\n\n    private initQuillElements(): void {\n        if (!this.quillElements) {\n            this.quillElements = {\n                editorElement: DomHandler.findSingle(this.el.nativeElement, 'div.cax-editor-content'),\n                toolbarElement: DomHandler.findSingle(this.el.nativeElement, 'div.cax-editor-toolbar')\n            };\n        }\n    }\n}\n","<div [ngClass]=\"'cax-editor-container'\" [class]=\"styleClass\">\r\n    <div class=\"cax-editor-toolbar\" *ngIf=\"toolbar || headerTemplate\">\r\n        <ng-content select=\"cax-header\"></ng-content>\r\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"cax-editor-toolbar\" *ngIf=\"!modules && !toolbar && !headerTemplate\">\r\n        <span class=\"ql-formats\">\r\n            <select class=\"ql-header\">\r\n                <option value=\"1\">Heading</option>\r\n                <option value=\"2\">Subheading</option>\r\n                <option selected>Normal</option>\r\n            </select>\r\n            <select class=\"ql-font\">\r\n                <option selected>Sans Serif</option>\r\n                <option value=\"serif\">Serif</option>\r\n                <option value=\"monospace\">Monospace</option>\r\n            </select>\r\n        </span>\r\n        <span class=\"ql-formats\">\r\n            <button class=\"ql-bold\" aria-label=\"Bold\" type=\"button\"></button>\r\n            <button class=\"ql-italic\" aria-label=\"Italic\" type=\"button\"></button>\r\n            <button class=\"ql-underline\" aria-label=\"Underline\" type=\"button\"></button>\r\n        </span>\r\n        <span class=\"ql-formats\">\r\n            <select class=\"ql-color\"></select>\r\n            <select class=\"ql-background\"></select>\r\n        </span>\r\n        <span class=\"ql-formats\">\r\n            <button class=\"ql-list\" value=\"ordered\" aria-label=\"Ordered List\" type=\"button\"></button>\r\n            <button class=\"ql-list\" value=\"bullet\" aria-label=\"Unordered List\" type=\"button\"></button>\r\n            <select class=\"ql-align\">\r\n                <option selected></option>\r\n                <option value=\"center\">center</option>\r\n                <option value=\"right\">right</option>\r\n                <option value=\"justify\">justify</option>\r\n            </select>\r\n        </span>\r\n        <span class=\"ql-formats\">\r\n            <button class=\"ql-link\" aria-label=\"Insert Link\" type=\"button\"></button>\r\n            <button class=\"ql-image\" aria-label=\"Insert Image\" type=\"button\"></button>\r\n            <button class=\"ql-code-block\" aria-label=\"Insert Code Block\" type=\"button\"></button>\r\n        </span>\r\n        <span class=\"ql-formats\">\r\n            <button class=\"ql-clean\" aria-label=\"Remove Styles\" type=\"button\"></button>\r\n        </span>\r\n    </div>\r\n    <div class=\"cax-editor-content\" [ngStyle]=\"style\"></div>\r\n</div>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { Editor } from './editor';\nimport { SharedModule } from 'cax-design-system/api';\n\n@NgModule({\n    imports: [CommonModule, SharedModule],\n    exports: [Editor, SharedModule],\n    declarations: [Editor]\n})\nexport class EditorModule {}\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-inputmask.mjs

@@ -5,10 +5,10 @@ import { forwardRef, EventEmitter, PLATFORM_ID, booleanAttribute, numberAttribut
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1 from 'cax-design-system/api';
 import { CaxTemplate, SharedModule } from 'cax-design-system/api';
-import { AutoFocusModule } from 'cax-design-system/autofocus';
 import { DomHandler } from 'cax-design-system/dom';
+import * as i3 from 'cax-design-system/icons/times';
 import { TimesIcon } from 'cax-design-system/icons/times';
-import * as i3 from 'cax-design-system/inputtext';
+import { AutoFocusModule } from 'cax-design-system/autofocus';
 import { InputTextModule } from 'cax-design-system/inputtext';
 
 /*
@@ -257,9 +257,19 @@ class InputMask {
     androidChrome = true;
     focused;
     _variant = 'outlined';
+    label;
+    leftIcon = false;
+    rightIcon = false;
+    clearIcon = false;
+    leftIconClass = '';
+    rightIconClass = '';
+    invalid = false;
+    errorText;
+    successText;
+    heightsize = 'md';
     get inputClass() {
         return {
-            'p-inputmask': true
+            'cax-inputmask': true
         };
     }
     constructor(document, platformId, el, cd, config) {
@@ -718,96 +728,16 @@ class InputMask {
         this.onClear.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: InputMask, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.caxConfig }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: InputMask, selector: "p-inputMask", inputs: { type: "type", slotChar: "slotChar", autoClear: ["autoClear", "autoClear", booleanAttribute], showClear: ["showClear", "showClear", booleanAttribute], style: "style", inputId: "inputId", styleClass: "styleClass", placeholder: "placeholder", size: ["size", "size", numberAttribute], maxlength: ["maxlength", "maxlength", numberAttribute], tabindex: "tabindex", title: "title", variant: "variant", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaRequired: ["ariaRequired", "ariaRequired", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], unmask: ["unmask", "unmask", booleanAttribute], name: "name", required: ["required", "required", booleanAttribute], characterPattern: "characterPattern", autofocus: ["autofocus", "autofocus", booleanAttribute], autoFocus: ["autoFocus", "autoFocus", booleanAttribute], autocomplete: "autocomplete", keepBuffer: ["keepBuffer", "keepBuffer", booleanAttribute], mask: "mask" }, outputs: { onComplete: "onComplete", onFocus: "onFocus", onBlur: "onBlur", onInput: "onInput", onKeydown: "onKeydown", onClear: "onClear" }, host: { properties: { "class.p-inputwrapper-filled": "filled", "class.p-inputwrapper-focus": "focused", "class.p-inputmask-clearable": "showClear && !disabled" }, classAttribute: "cax-element" }, providers: [INPUTMASK_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "inputViewChild", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: `
-        <input
-            #input
-            caxInputText
-            [class]="styleClass"
-            [ngClass]="inputClass"
-            [attr.id]="inputId"
-            [attr.type]="type"
-            [attr.name]="name"
-            [ngStyle]="style"
-            [attr.placeholder]="placeholder"
-            [attr.title]="title"
-            [attr.size]="size"
-            [attr.autocomplete]="autocomplete"
-            [attr.maxlength]="maxlength"
-            [attr.tabindex]="tabindex"
-            [attr.aria-label]="ariaLabel"
-            [attr.aria-labelledBy]="ariaLabelledBy"
-            [attr.aria-required]="ariaRequired"
-            [disabled]="disabled"
-            [readonly]="readonly"
-            [attr.required]="required"
-            (focus)="onInputFocus($event)"
-            (blur)="onInputBlur($event)"
-            (keydown)="onInputKeydown($event)"
-            (keypress)="onKeyPress($event)"
-            pAutoFocus
-            [variant]="variant"
-            [autofocus]="autofocus"
-            (input)="onInputChange($event)"
-            (paste)="handleInputChange($event)"
-            [attr.data-pc-name]="'inputmask'"
-            [attr.data-pc-section]="'root'"
-        />
-        <ng-container *ngIf="value != null && filled && showClear && !disabled">
-            <TimesIcon *ngIf="!clearIconTemplate" [styleClass]="'p-inputmask-clear-icon'" (click)="clear()" [attr.data-pc-section]="'clearIcon'" />
-            <span *ngIf="clearIconTemplate" class="p-inputmask-clear-icon" (click)="clear()" [attr.data-pc-section]="'clearIcon'">
-                <ng-template *ngTemplateOutlet="clearIconTemplate"></ng-template>
-            </span>
-        </ng-container>
-    `, isInline: true, styles: ["@layer cax{.p-inputmask-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer}.p-inputmask-clearable{position:relative}}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i2.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => i3.InputtextDirective), selector: "[caxInputText]", inputs: ["placeholder", "disabled", "variant"], outputs: ["valueChange"] }, { kind: "component", type: i0.forwardRef(() => TimesIcon), selector: "TimesIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: InputMask, selector: "cax-inputMask", inputs: { type: "type", slotChar: "slotChar", autoClear: ["autoClear", "autoClear", booleanAttribute], showClear: ["showClear", "showClear", booleanAttribute], style: "style", inputId: "inputId", styleClass: "styleClass", placeholder: "placeholder", size: ["size", "size", numberAttribute], maxlength: ["maxlength", "maxlength", numberAttribute], tabindex: "tabindex", title: "title", variant: "variant", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaRequired: ["ariaRequired", "ariaRequired", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], unmask: ["unmask", "unmask", booleanAttribute], name: "name", required: ["required", "required", booleanAttribute], characterPattern: "characterPattern", autofocus: ["autofocus", "autofocus", booleanAttribute], autoFocus: ["autoFocus", "autoFocus", booleanAttribute], autocomplete: "autocomplete", keepBuffer: ["keepBuffer", "keepBuffer", booleanAttribute], mask: "mask", label: "label", leftIcon: "leftIcon", rightIcon: "rightIcon", clearIcon: "clearIcon", leftIconClass: "leftIconClass", rightIconClass: "rightIconClass", invalid: "invalid", errorText: "errorText", successText: "successText", heightsize: "heightsize" }, outputs: { onComplete: "onComplete", onFocus: "onFocus", onBlur: "onBlur", onInput: "onInput", onKeydown: "onKeydown", onClear: "onClear" }, host: { properties: { "class.cax-inputwrapper-filled": "filled", "class.cax-inputwrapper-focus": "focused", "class.cax-inputmask-clearable": "showClear && !disabled" }, classAttribute: "cax-element" }, providers: [INPUTMASK_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "inputViewChild", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"cax-input-container\"\r\n     [class]=\"styleClass\"\r\n     [ngClass]=\"'cax-input-size-' + heightsize\"\r\n     [ngStyle]=\"style\">\r\n    <label *ngIf=\"label\" class=\"cax-label\" [ngClass]=\"{'disabled-opacity': disabled}\">{{ label }}</label>\r\n\r\n    <div class=\"cax-input-wrapper\"\r\n        [ngClass]=\"{\r\n            'with-left-icon': leftIcon,\r\n            'with-right-icon': rightIcon,\r\n            'with-clear-icon': clearIcon && value,\r\n            'input-disabled': disabled\r\n        }\"\r\n    >\r\n        <!-- Left Icon -->\r\n        <span *ngIf=\"leftIcon\"\r\n              class=\"cax-icon-container cax-icon-left\">\r\n            <i [ngClass]=\"leftIconClass\"></i>\r\n        </span>\r\n\r\n      <input\r\n          #input\r\n          [class]=\"styleClass\"\r\n          [ngClass]=\"{\r\n              'cax-inputtext': true,\r\n              'cax-inputmask': true,\r\n              'cax-input-invalid': invalid,\r\n              'input-disabled': disabled,\r\n              'with-left-icon': leftIcon,\r\n              'with-right-icon': rightIcon || (clearIcon && value)\r\n          }\"\r\n          [attr.id]=\"inputId\"\r\n          [attr.type]=\"type\"\r\n          [attr.name]=\"name\"\r\n          [ngStyle]=\"style\"\r\n          [attr.placeholder]=\"placeholder\"\r\n          [attr.size]=\"size\"\r\n          [attr.autocomplete]=\"autocomplete\"\r\n          [attr.maxlength]=\"maxlength\"\r\n          [attr.tabindex]=\"tabindex\"\r\n          [attr.aria-label]=\"ariaLabel\"\r\n          [attr.aria-labelledBy]=\"ariaLabelledBy\"\r\n          [attr.aria-required]=\"ariaRequired\"\r\n          [disabled]=\"disabled\"\r\n          [readonly]=\"readonly\"\r\n          [attr.required]=\"required\"\r\n          (focus)=\"onInputFocus($event)\"\r\n          (blur)=\"onInputBlur($event)\"\r\n          (keydown)=\"onInputKeydown($event)\"\r\n          (keypress)=\"onKeyPress($event)\"\r\n          (input)=\"onInputChange($event)\"\r\n          (paste)=\"handleInputChange($event)\"\r\n          [attr.data-pc-name]=\"'inputmask'\"\r\n          [attr.data-pc-section]=\"'root'\"\r\n          [attr.aria-describedby]=\"successText || invalid ? 'helper-text' : null\"\r\n      />\r\n\r\n    <!-- Clear Icon (before right icon) -->\r\n    <span *ngIf=\"clearIcon && value\"\r\n    class=\"cax-icon-container cax-clear-icon clickable-icon\"\r\n    [ngClass]=\"{'no-right-icon': !rightIcon}\"\r\n    (click)=\"clear()\">\r\n  <i class=\"cax cax-close-circle\"></i>\r\n</span>\r\n\r\n<!-- Right Icon -->\r\n<span *ngIf=\"rightIcon\"\r\n    class=\"cax-icon-container cax-icon-right\">\r\n  <i [ngClass]=\"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 disabled-opacity\" [ngClass]=\"{'disabled-opacity': disabled}\"> {{ errorText }} </small>\r\n\r\n<!-- Helper Text with conditional opacity -->\r\n<small *ngIf=\"successText && !invalid\" id=\"helper-text\" class=\"cax-helper-text\" [ngClass]=\"{'disabled-opacity': disabled}\"> {{ successText }} </small>\r\n</div>\r\n\r\n<ng-container *ngIf=\"value != null && filled && showClear && !disabled\">\r\n  <TimesIcon *ngIf=\"!clearIconTemplate\" [styleClass]=\"'cax-inputmask-clear-icon'\" (click)=\"clear()\" [attr.data-pc-section]=\"'clearIcon'\" />\r\n  <span *ngIf=\"clearIconTemplate\" class=\"p-inputmask-clear-icon\" (click)=\"clear()\" [attr.data-pc-section]=\"'clearIcon'\">\r\n      <ng-template *ngTemplateOutlet=\"clearIconTemplate\"></ng-template>\r\n  </span>\r\n</ng-container>\r\n", styles: ["@layer cax{.cax-inputmask-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer}.cax-inputmask-clearable{position:relative}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.TimesIcon, selector: "TimesIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: InputMask, decorators: [{
             type: Component,
-            args: [{ selector: 'p-inputMask', template: `
-        <input
-            #input
-            caxInputText
-            [class]="styleClass"
-            [ngClass]="inputClass"
-            [attr.id]="inputId"
-            [attr.type]="type"
-            [attr.name]="name"
-            [ngStyle]="style"
-            [attr.placeholder]="placeholder"
-            [attr.title]="title"
-            [attr.size]="size"
-            [attr.autocomplete]="autocomplete"
-            [attr.maxlength]="maxlength"
-            [attr.tabindex]="tabindex"
-            [attr.aria-label]="ariaLabel"
-            [attr.aria-labelledBy]="ariaLabelledBy"
-            [attr.aria-required]="ariaRequired"
-            [disabled]="disabled"
-            [readonly]="readonly"
-            [attr.required]="required"
-            (focus)="onInputFocus($event)"
-            (blur)="onInputBlur($event)"
-            (keydown)="onInputKeydown($event)"
-            (keypress)="onKeyPress($event)"
-            pAutoFocus
-            [variant]="variant"
-            [autofocus]="autofocus"
-            (input)="onInputChange($event)"
-            (paste)="handleInputChange($event)"
-            [attr.data-pc-name]="'inputmask'"
-            [attr.data-pc-section]="'root'"
-        />
-        <ng-container *ngIf="value != null && filled && showClear && !disabled">
-            <TimesIcon *ngIf="!clearIconTemplate" [styleClass]="'p-inputmask-clear-icon'" (click)="clear()" [attr.data-pc-section]="'clearIcon'" />
-            <span *ngIf="clearIconTemplate" class="p-inputmask-clear-icon" (click)="clear()" [attr.data-pc-section]="'clearIcon'">
-                <ng-template *ngTemplateOutlet="clearIconTemplate"></ng-template>
-            </span>
-        </ng-container>
-    `, host: {
+            args: [{ selector: 'cax-inputMask', host: {
                         class: 'cax-element',
-                        '[class.p-inputwrapper-filled]': 'filled',
-                        '[class.p-inputwrapper-focus]': 'focused',
-                        '[class.p-inputmask-clearable]': 'showClear && !disabled'
-                    }, providers: [INPUTMASK_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["@layer cax{.p-inputmask-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer}.p-inputmask-clearable{position:relative}}\n"] }]
+                        '[class.cax-inputwrapper-filled]': 'filled',
+                        '[class.cax-inputwrapper-focus]': 'focused',
+                        '[class.cax-inputmask-clearable]': 'showClear && !disabled'
+                    }, providers: [INPUTMASK_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"cax-input-container\"\r\n     [class]=\"styleClass\"\r\n     [ngClass]=\"'cax-input-size-' + heightsize\"\r\n     [ngStyle]=\"style\">\r\n    <label *ngIf=\"label\" class=\"cax-label\" [ngClass]=\"{'disabled-opacity': disabled}\">{{ label }}</label>\r\n\r\n    <div class=\"cax-input-wrapper\"\r\n        [ngClass]=\"{\r\n            'with-left-icon': leftIcon,\r\n            'with-right-icon': rightIcon,\r\n            'with-clear-icon': clearIcon && value,\r\n            'input-disabled': disabled\r\n        }\"\r\n    >\r\n        <!-- Left Icon -->\r\n        <span *ngIf=\"leftIcon\"\r\n              class=\"cax-icon-container cax-icon-left\">\r\n            <i [ngClass]=\"leftIconClass\"></i>\r\n        </span>\r\n\r\n      <input\r\n          #input\r\n          [class]=\"styleClass\"\r\n          [ngClass]=\"{\r\n              'cax-inputtext': true,\r\n              'cax-inputmask': true,\r\n              'cax-input-invalid': invalid,\r\n              'input-disabled': disabled,\r\n              'with-left-icon': leftIcon,\r\n              'with-right-icon': rightIcon || (clearIcon && value)\r\n          }\"\r\n          [attr.id]=\"inputId\"\r\n          [attr.type]=\"type\"\r\n          [attr.name]=\"name\"\r\n          [ngStyle]=\"style\"\r\n          [attr.placeholder]=\"placeholder\"\r\n          [attr.size]=\"size\"\r\n          [attr.autocomplete]=\"autocomplete\"\r\n          [attr.maxlength]=\"maxlength\"\r\n          [attr.tabindex]=\"tabindex\"\r\n          [attr.aria-label]=\"ariaLabel\"\r\n          [attr.aria-labelledBy]=\"ariaLabelledBy\"\r\n          [attr.aria-required]=\"ariaRequired\"\r\n          [disabled]=\"disabled\"\r\n          [readonly]=\"readonly\"\r\n          [attr.required]=\"required\"\r\n          (focus)=\"onInputFocus($event)\"\r\n          (blur)=\"onInputBlur($event)\"\r\n          (keydown)=\"onInputKeydown($event)\"\r\n          (keypress)=\"onKeyPress($event)\"\r\n          (input)=\"onInputChange($event)\"\r\n          (paste)=\"handleInputChange($event)\"\r\n          [attr.data-pc-name]=\"'inputmask'\"\r\n          [attr.data-pc-section]=\"'root'\"\r\n          [attr.aria-describedby]=\"successText || invalid ? 'helper-text' : null\"\r\n      />\r\n\r\n    <!-- Clear Icon (before right icon) -->\r\n    <span *ngIf=\"clearIcon && value\"\r\n    class=\"cax-icon-container cax-clear-icon clickable-icon\"\r\n    [ngClass]=\"{'no-right-icon': !rightIcon}\"\r\n    (click)=\"clear()\">\r\n  <i class=\"cax cax-close-circle\"></i>\r\n</span>\r\n\r\n<!-- Right Icon -->\r\n<span *ngIf=\"rightIcon\"\r\n    class=\"cax-icon-container cax-icon-right\">\r\n  <i [ngClass]=\"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 disabled-opacity\" [ngClass]=\"{'disabled-opacity': disabled}\"> {{ errorText }} </small>\r\n\r\n<!-- Helper Text with conditional opacity -->\r\n<small *ngIf=\"successText && !invalid\" id=\"helper-text\" class=\"cax-helper-text\" [ngClass]=\"{'disabled-opacity': disabled}\"> {{ successText }} </small>\r\n</div>\r\n\r\n<ng-container *ngIf=\"value != null && filled && showClear && !disabled\">\r\n  <TimesIcon *ngIf=\"!clearIconTemplate\" [styleClass]=\"'cax-inputmask-clear-icon'\" (click)=\"clear()\" [attr.data-pc-section]=\"'clearIcon'\" />\r\n  <span *ngIf=\"clearIconTemplate\" class=\"p-inputmask-clear-icon\" (click)=\"clear()\" [attr.data-pc-section]=\"'clearIcon'\">\r\n      <ng-template *ngTemplateOutlet=\"clearIconTemplate\"></ng-template>\r\n  </span>\r\n</ng-container>\r\n", styles: ["@layer cax{.cax-inputmask-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer}.cax-inputmask-clearable{position:relative}}\n"] }]
         }], ctorParameters: () => [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -898,7 +828,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             }], templates: [{
                 type: ContentChildren,
                 args: [CaxTemplate]
+            }], label: [{
+                type: Input
+            }], leftIcon: [{
+                type: Input
+            }], rightIcon: [{
+                type: Input
+            }], clearIcon: [{
+                type: Input
+            }], leftIconClass: [{
+                type: Input
+            }], rightIconClass: [{
+                type: Input
+            }], invalid: [{
+                type: Input
+            }], errorText: [{
+                type: Input
+            }], successText: [{
+                type: Input
+            }], heightsize: [{
+                type: Input
             }] } });
+
 class InputMaskModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: InputMaskModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: InputMaskModule, declarations: [InputMask], imports: [CommonModule, InputTextModule, AutoFocusModule, TimesIcon], exports: [InputMask, SharedModule] });