cax-design-system 2.8.4 → 3.0.0

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

@@ -33,6 +33,10 @@ class Editor {
      * @group Props
      */
     placeholder;
+    set disabled(value) {
+        this._disabled = value;
+        this.updateQuillState();
+    }
     /**
      * Whitelist of formats to display, see here for available options.
      * @group Props
@@ -67,12 +71,7 @@ class Editor {
     }
     set readonly(val) {
         this._readonly = val;
-        if (this.quill) {
-            if (this._readonly)
-                this.quill.disable();
-            else
-                this.quill.enable();
-        }
+        this.updateQuillState();
     }
     /**
      * Callback to invoke when the quill modules are loaded.
@@ -105,6 +104,7 @@ class Editor {
     get isAttachedQuillEditorToDOM() {
         return this.quillElements?.editorElement?.isConnected;
     }
+    _disabled = false;
     quillElements;
     constructor(el, platformId) {
         this.el = el;
@@ -153,6 +153,9 @@ class Editor {
             }
         }
     }
+    get disabled() {
+        return this._disabled;
+    }
     registerOnChange(fn) {
         this.onModelChange = fn;
     }
@@ -190,13 +193,18 @@ class Editor {
         this.quill = new this.dynamicQuill(editorElement, {
             modules: modules,
             placeholder: this.placeholder,
-            readOnly: this.readonly,
+            readOnly: this.readonly || this.disabled,
             theme: 'snow',
             formats: this.formats,
             bounds: this.bounds,
             debug: this.debug,
             scrollingContainer: this.scrollingContainer
         });
+        this.updateQuillState();
+        const toolbar = this.quill.getModule('toolbar');
+        if (toolbar) {
+            toolbar.addHandler('image', this.imageHandler.bind(this));
+        }
         const isQuill2 = this.dynamicQuill.version.startsWith('2');
         if (this.value) {
             this.quill.setContents(this.quill.clipboard.convert(isQuill2 ? { html: this.value } : this.value));
@@ -229,6 +237,31 @@ class Editor {
             editor: this.quill
         });
     }
+    imageHandler() {
+        if (isPlatformServer(this.platformId)) {
+            return;
+        }
+        const input = document.createElement('input');
+        input.setAttribute('type', 'file');
+        input.setAttribute('accept', 'image/*');
+        input.onchange = () => {
+            const file = input.files ? input.files[0] : null;
+            if (file) {
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    const range = this.quill.getSelection(true);
+                    const index = range.index;
+                    // Force new lines before and after
+                    this.quill.insertText(index, '\n', 'user');
+                    this.quill.insertEmbed(index + 1, 'image', e.target.result, 'user');
+                    this.quill.insertText(index + 2, '\n', 'user');
+                    this.quill.setSelection(index + 3, 0, 'user');
+                };
+                reader.readAsDataURL(file);
+            }
+        };
+        input.click();
+    }
     initQuillElements() {
         if (!this.quillElements) {
             this.quillElements = {
@@ -237,14 +270,19 @@ class Editor {
             };
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Editor, deps: [{ token: i0.ElementRef }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.16", type: Editor, isStandalone: false, 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 });
+    updateQuillState() {
+        if (this.quill) {
+            this.quill.enable(!this.readonly && !this.disabled);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: Editor, deps: [{ token: i0.ElementRef }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: Editor, isStandalone: false, selector: "cax-editor", inputs: { style: "style", styleClass: "styleClass", placeholder: "placeholder", disabled: "disabled", 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\" [class.cax-editor-disabled]=\"disabled\">\n    <div class=\"cax-editor-toolbar ql-toolbar ql-snow\" *ngIf=\"toolbar || headerTemplate\">\n        <ng-content select=\"cax-header\"></ng-content>\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n    </div>\n    <div class=\"cax-editor-toolbar ql-toolbar ql-snow\" *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        </span>\n        <span class=\"ql-formats\">\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\n        <span class=\"ql-formats\">\n            <button class=\"ql-bold\" aria-label=\"Bold\" type=\"button\"></button>\n        </span>\n        <span class=\"ql-formats\">\n            <button class=\"ql-italic\" aria-label=\"Italic\" type=\"button\"></button>\n        </span>\n        <span class=\"ql-formats\">\n            <button class=\"ql-underline\" aria-label=\"Underline\" type=\"button\"></button>\n        </span>\n\n        <span class=\"ql-formats\">\n            <select class=\"ql-color\"></select>\n        </span>\n        <span class=\"ql-formats\">\n            <select class=\"ql-background\"></select>\n        </span>\n        <span class=\"ql-formats\"> <button class=\"ql-list\" value=\"ordered\" aria-label=\"Ordered List\" type=\"button\"></button> </span>\n        <span class=\"ql-formats\"> <button class=\"ql-list\" value=\"bullet\" aria-label=\"Unordered List\" type=\"button\"></button> </span>\n        <span class=\"ql-formats\">\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\n        <span class=\"ql-formats\">\n            <button class=\"ql-link\" aria-label=\"Insert Link\" type=\"button\"></button>\n        </span>\n        <span class=\"ql-formats\">\n            <button class=\"ql-image\" aria-label=\"Insert Image\" type=\"button\"></button>\n        </span>\n        <span class=\"ql-formats\">\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=\"cax-editor-content ql-container ql-snow\" [ngStyle]=\"style\"></div>\n</div>\n", styles: [".cax-editor-disabled{pointer-events:none;opacity:1}.ql-snow .ql-tooltip{border-radius:8px}.ql-snow .ql-tooltip input{border-radius:4px}.cax-editor-toolbar .ql-bold{font-family:caxicons!important}.cax-editor-toolbar .ql-bold svg{display:none!important}.cax-editor-toolbar .ql-bold:before{content:\"\\ec2f\"!important;font-size:16px}.cax-editor-toolbar .ql-italic{font-family:caxicons!important}.cax-editor-toolbar .ql-italic svg{display:none!important}.cax-editor-toolbar .ql-italic:before{content:\"\\ec39\"!important;font-size:16px}.cax-editor-toolbar .ql-underline{font-family:caxicons!important}.cax-editor-toolbar .ql-underline svg{display:none!important}.cax-editor-toolbar .ql-underline:before{content:\"\\ec41\"!important;font-size:16px}.cax-editor-toolbar .ql-list[value=bullet]{font-family:caxicons!important}.cax-editor-toolbar .ql-list[value=bullet] svg{display:none!important}.cax-editor-toolbar .ql-list[value=bullet]:before{content:\"\\e9b3\"!important;font-size:16px}.cax-editor-toolbar .ql-link{font-family:caxicons!important}.cax-editor-toolbar .ql-link svg{display:none!important}.cax-editor-toolbar .ql-link:before{content:\"\\eab0\"!important;font-size:16px}.cax-editor-toolbar .ql-image{font-family:caxicons!important}.cax-editor-toolbar .ql-image svg{display:none!important}.cax-editor-toolbar .ql-image:before{content:\"\\ea50\"!important;font-size:16px}.cax-editor-toolbar .ql-code-block{font-family:caxicons!important}.cax-editor-toolbar .ql-code-block svg{display:none!important}.cax-editor-toolbar .ql-code-block:before{content:\"\\e9d1\"!important;font-size:16px}\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: "19.2.16", ngImport: i0, type: Editor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: Editor, decorators: [{
             type: Component,
             args: [{ selector: 'cax-editor', providers: [EDITOR_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, host: {
                         class: 'cax-element'
-                    }, 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"] }]
+                    }, template: "<div [ngClass]=\"'cax-editor-container'\" [class]=\"styleClass\" [class.cax-editor-disabled]=\"disabled\">\n    <div class=\"cax-editor-toolbar ql-toolbar ql-snow\" *ngIf=\"toolbar || headerTemplate\">\n        <ng-content select=\"cax-header\"></ng-content>\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n    </div>\n    <div class=\"cax-editor-toolbar ql-toolbar ql-snow\" *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        </span>\n        <span class=\"ql-formats\">\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\n        <span class=\"ql-formats\">\n            <button class=\"ql-bold\" aria-label=\"Bold\" type=\"button\"></button>\n        </span>\n        <span class=\"ql-formats\">\n            <button class=\"ql-italic\" aria-label=\"Italic\" type=\"button\"></button>\n        </span>\n        <span class=\"ql-formats\">\n            <button class=\"ql-underline\" aria-label=\"Underline\" type=\"button\"></button>\n        </span>\n\n        <span class=\"ql-formats\">\n            <select class=\"ql-color\"></select>\n        </span>\n        <span class=\"ql-formats\">\n            <select class=\"ql-background\"></select>\n        </span>\n        <span class=\"ql-formats\"> <button class=\"ql-list\" value=\"ordered\" aria-label=\"Ordered List\" type=\"button\"></button> </span>\n        <span class=\"ql-formats\"> <button class=\"ql-list\" value=\"bullet\" aria-label=\"Unordered List\" type=\"button\"></button> </span>\n        <span class=\"ql-formats\">\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\n        <span class=\"ql-formats\">\n            <button class=\"ql-link\" aria-label=\"Insert Link\" type=\"button\"></button>\n        </span>\n        <span class=\"ql-formats\">\n            <button class=\"ql-image\" aria-label=\"Insert Image\" type=\"button\"></button>\n        </span>\n        <span class=\"ql-formats\">\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=\"cax-editor-content ql-container ql-snow\" [ngStyle]=\"style\"></div>\n</div>\n", styles: [".cax-editor-disabled{pointer-events:none;opacity:1}.ql-snow .ql-tooltip{border-radius:8px}.ql-snow .ql-tooltip input{border-radius:4px}.cax-editor-toolbar .ql-bold{font-family:caxicons!important}.cax-editor-toolbar .ql-bold svg{display:none!important}.cax-editor-toolbar .ql-bold:before{content:\"\\ec2f\"!important;font-size:16px}.cax-editor-toolbar .ql-italic{font-family:caxicons!important}.cax-editor-toolbar .ql-italic svg{display:none!important}.cax-editor-toolbar .ql-italic:before{content:\"\\ec39\"!important;font-size:16px}.cax-editor-toolbar .ql-underline{font-family:caxicons!important}.cax-editor-toolbar .ql-underline svg{display:none!important}.cax-editor-toolbar .ql-underline:before{content:\"\\ec41\"!important;font-size:16px}.cax-editor-toolbar .ql-list[value=bullet]{font-family:caxicons!important}.cax-editor-toolbar .ql-list[value=bullet] svg{display:none!important}.cax-editor-toolbar .ql-list[value=bullet]:before{content:\"\\e9b3\"!important;font-size:16px}.cax-editor-toolbar .ql-link{font-family:caxicons!important}.cax-editor-toolbar .ql-link svg{display:none!important}.cax-editor-toolbar .ql-link:before{content:\"\\eab0\"!important;font-size:16px}.cax-editor-toolbar .ql-image{font-family:caxicons!important}.cax-editor-toolbar .ql-image svg{display:none!important}.cax-editor-toolbar .ql-image:before{content:\"\\ea50\"!important;font-size:16px}.cax-editor-toolbar .ql-code-block{font-family:caxicons!important}.cax-editor-toolbar .ql-code-block svg{display:none!important}.cax-editor-toolbar .ql-code-block:before{content:\"\\e9d1\"!important;font-size:16px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -254,6 +292,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
                 type: Input
             }], placeholder: [{
                 type: Input
+            }], disabled: [{
+                type: Input
             }], formats: [{
                 type: Input
             }], modules: [{
@@ -281,11 +321,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
             }] } });
 
 class EditorModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: EditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.16", ngImport: i0, type: EditorModule, declarations: [Editor], imports: [CommonModule, SharedModule], exports: [Editor, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: EditorModule, imports: [CommonModule, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: EditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: EditorModule, declarations: [Editor], imports: [CommonModule, SharedModule], exports: [Editor, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: EditorModule, imports: [CommonModule, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: EditorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: EditorModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, SharedModule],

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/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    standalone: false,\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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"}
+{"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    standalone: false,\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    @Input()\n    set disabled(value: boolean) {\n        this._disabled = value;\n        this.updateQuillState();\n    }\n\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        this.updateQuillState();\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 _disabled = false;\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    get disabled(): boolean {\n        return this._disabled;\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 || this.disabled,\n            theme: 'snow',\n            formats: this.formats,\n            bounds: this.bounds,\n            debug: this.debug,\n            scrollingContainer: this.scrollingContainer\n        });\n\n        this.updateQuillState();\n        const toolbar = this.quill.getModule('toolbar');\n        if (toolbar) {\n            toolbar.addHandler('image', this.imageHandler.bind(this));\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 imageHandler() {\n        if (isPlatformServer(this.platformId)) {\n            return;\n        }\n\n        const input = document.createElement('input');\n        input.setAttribute('type', 'file');\n        input.setAttribute('accept', 'image/*');\n\n        input.onchange = () => {\n            const file = input.files ? input.files[0] : null;\n            if (file) {\n                const reader = new FileReader();\n                reader.onload = (e: any) => {\n                    const range = this.quill.getSelection(true);\n                    const index = range.index;\n\n                    // Force new lines before and after\n                    this.quill.insertText(index, '\\n', 'user');\n                    this.quill.insertEmbed(index + 1, 'image', e.target.result, 'user');\n                    this.quill.insertText(index + 2, '\\n', 'user');\n                    this.quill.setSelection(index + 3, 0, 'user');\n                };\n                reader.readAsDataURL(file);\n            }\n        };\n\n        input.click();\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    private updateQuillState() {\n        if (this.quill) {\n            this.quill.enable(!this.readonly && !this.disabled);\n        }\n    }\n}\n","<div [ngClass]=\"'cax-editor-container'\" [class]=\"styleClass\" [class.cax-editor-disabled]=\"disabled\">\n    <div class=\"cax-editor-toolbar ql-toolbar ql-snow\" *ngIf=\"toolbar || headerTemplate\">\n        <ng-content select=\"cax-header\"></ng-content>\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n    </div>\n    <div class=\"cax-editor-toolbar ql-toolbar ql-snow\" *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        </span>\n        <span class=\"ql-formats\">\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\n        <span class=\"ql-formats\">\n            <button class=\"ql-bold\" aria-label=\"Bold\" type=\"button\"></button>\n        </span>\n        <span class=\"ql-formats\">\n            <button class=\"ql-italic\" aria-label=\"Italic\" type=\"button\"></button>\n        </span>\n        <span class=\"ql-formats\">\n            <button class=\"ql-underline\" aria-label=\"Underline\" type=\"button\"></button>\n        </span>\n\n        <span class=\"ql-formats\">\n            <select class=\"ql-color\"></select>\n        </span>\n        <span class=\"ql-formats\">\n            <select class=\"ql-background\"></select>\n        </span>\n        <span class=\"ql-formats\"> <button class=\"ql-list\" value=\"ordered\" aria-label=\"Ordered List\" type=\"button\"></button> </span>\n        <span class=\"ql-formats\"> <button class=\"ql-list\" value=\"bullet\" aria-label=\"Unordered List\" type=\"button\"></button> </span>\n        <span class=\"ql-formats\">\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\n        <span class=\"ql-formats\">\n            <button class=\"ql-link\" aria-label=\"Insert Link\" type=\"button\"></button>\n        </span>\n        <span class=\"ql-formats\">\n            <button class=\"ql-image\" aria-label=\"Insert Image\" type=\"button\"></button>\n        </span>\n        <span class=\"ql-formats\">\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=\"cax-editor-content ql-container ql-snow\" [ngStyle]=\"style\"></div>\n</div>\n","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-fieldset.mjs

@@ -1,4 +1,4 @@
-import { trigger, state, transition, style, animate } from '@angular/animations';
+import { trigger, state, style, transition, animate } from '@angular/animations';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
@@ -130,8 +130,8 @@ class Fieldset {
     onToggleDone() {
         this.animating = false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Fieldset, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.16", type: Fieldset, isStandalone: false, selector: "p-fieldset", inputs: { legend: "legend", toggleable: ["toggleable", "toggleable", booleanAttribute], collapsed: ["collapsed", "collapsed", booleanAttribute], style: "style", styleClass: "styleClass", transitionOptions: "transitionOptions" }, outputs: { collapsedChange: "collapsedChange", onBeforeToggle: "onBeforeToggle", onAfterToggle: "onAfterToggle" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "templates", predicate: CaxTemplate }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: Fieldset, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.21", type: Fieldset, isStandalone: false, selector: "p-fieldset", inputs: { legend: "legend", toggleable: ["toggleable", "toggleable", booleanAttribute], collapsed: ["collapsed", "collapsed", booleanAttribute], style: "style", styleClass: "styleClass", transitionOptions: "transitionOptions" }, outputs: { collapsedChange: "collapsedChange", onBeforeToggle: "onBeforeToggle", onAfterToggle: "onAfterToggle" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "templates", predicate: CaxTemplate }], ngImport: i0, template: `
         <fieldset
             [attr.id]="id"
             [ngClass]="{ 'p-fieldset p-component': true, 'p-fieldset-toggleable': toggleable, 'p-fieldset-expanded': !collapsed && toggleable }"
@@ -193,7 +193,7 @@ class Fieldset {
             ])
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Fieldset, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: Fieldset, decorators: [{
             type: Component,
             args: [{ selector: 'p-fieldset', template: `
         <fieldset
@@ -283,11 +283,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
                 args: [CaxTemplate]
             }] } });
 class FieldsetModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: FieldsetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.16", ngImport: i0, type: FieldsetModule, declarations: [Fieldset], imports: [CommonModule, RippleModule, MinusIcon, PlusIcon], exports: [Fieldset, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: FieldsetModule, imports: [CommonModule, RippleModule, MinusIcon, PlusIcon, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FieldsetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: FieldsetModule, declarations: [Fieldset], imports: [CommonModule, RippleModule, MinusIcon, PlusIcon], exports: [Fieldset, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FieldsetModule, imports: [CommonModule, RippleModule, MinusIcon, PlusIcon, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: FieldsetModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FieldsetModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, RippleModule, MinusIcon, PlusIcon],

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

@@ -1 +1 @@
-{"version":3,"file":"cax-design-system-fieldset.mjs","sources":["../../src/app/components/fieldset/fieldset.ts","../../src/app/components/fieldset/cax-design-system-fieldset.ts"],"sourcesContent":["import { animate, state, style, transition, trigger } from '@angular/animations';\nimport { CommonModule } from '@angular/common';\nimport { AfterContentInit, ChangeDetectionStrategy, Component, ContentChildren, ElementRef, EventEmitter, Input, NgModule, Output, QueryList, TemplateRef, ViewEncapsulation, booleanAttribute } from '@angular/core';\nimport { BlockableUI, CaxTemplate, SharedModule } from 'cax-design-system/api';\nimport { MinusIcon } from 'cax-design-system/icons/minus';\nimport { PlusIcon } from 'cax-design-system/icons/plus';\nimport { RippleModule } from 'cax-design-system/ripple';\nimport { Nullable } from 'cax-design-system/ts-helpers';\nimport { UniqueComponentId } from 'cax-design-system/utils';\nimport { FieldsetAfterToggleEvent, FieldsetBeforeToggleEvent } from './fieldset.interface';\n\n/**\n * Fieldset is a grouping component with the optional content toggle feature.\n * @group Components\n */\n@Component({\n    selector: 'p-fieldset',\n    template: `\n        <fieldset\n            [attr.id]=\"id\"\n            [ngClass]=\"{ 'p-fieldset p-component': true, 'p-fieldset-toggleable': toggleable, 'p-fieldset-expanded': !collapsed && toggleable }\"\n            [ngStyle]=\"style\"\n            [class]=\"styleClass\"\n            [attr.data-pc-name]=\"'fieldset'\"\n            [attr.data-pc-section]=\"'root'\"\n        >\n            <legend class=\"p-fieldset-legend\" [attr.data-pc-section]=\"'legend'\">\n                <ng-container *ngIf=\"toggleable; else legendContent\">\n                    <a [attr.id]=\"id + '_header'\" pRipple tabindex=\"0\" role=\"button\" [attr.aria-controls]=\"id + '_content'\" [attr.aria-expanded]=\"!collapsed\" [attr.aria-label]=\"buttonAriaLabel\" (click)=\"toggle($event)\" (keydown)=\"onKeyDown($event)\">\n                        <ng-container *ngIf=\"collapsed\">\n                            <PlusIcon *ngIf=\"!expandIconTemplate\" [styleClass]=\"'p-fieldset-toggler'\" [attr.data-pc-section]=\"'togglericon'\" />\n                            <span *ngIf=\"expandIconTemplate\" class=\"p-fieldset-toggler\" [attr.data-pc-section]=\"'togglericon'\">\n                                <ng-container *ngTemplateOutlet=\"expandIconTemplate\"></ng-container>\n                            </span>\n                        </ng-container>\n                        <ng-container *ngIf=\"!collapsed\">\n                            <MinusIcon *ngIf=\"!collapseIconTemplate\" [styleClass]=\"'p-fieldset-toggler'\" [attr.aria-hidden]=\"true\" [attr.data-pc-section]=\"'togglericon'\" />\n                            <span *ngIf=\"collapseIconTemplate\" class=\"p-fieldset-toggler\" [attr.data-pc-section]=\"'togglericon'\">\n                                <ng-container *ngTemplateOutlet=\"collapseIconTemplate\"></ng-container>\n                            </span>\n                        </ng-container>\n                        <ng-container *ngTemplateOutlet=\"legendContent\"></ng-container>\n                    </a>\n                </ng-container>\n                <ng-template #legendContent>\n                    <span class=\"p-fieldset-legend-text\" [attr.data-pc-section]=\"'legendtitle'\">{{ legend }}</span>\n                    <ng-content select=\"cax-header\"></ng-content>\n                    <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n                </ng-template>\n            </legend>\n            <div\n                [attr.id]=\"id + '_content'\"\n                role=\"region\"\n                class=\"p-toggleable-content\"\n                [@fieldsetContent]=\"collapsed ? { value: 'hidden', params: { transitionParams: transitionOptions, height: '0' } } : { value: 'visible', params: { transitionParams: animating ? transitionOptions : '0ms', height: '*' } }\"\n                [attr.aria-labelledby]=\"id + '_header'\"\n                [attr.aria-hidden]=\"collapsed\"\n                [attr.data-pc-section]=\"'toggleablecontent'\"\n                (@fieldsetContent.done)=\"onToggleDone()\"\n            >\n                <div class=\"p-fieldset-content\" [attr.data-pc-section]=\"'content'\">\n                    <ng-content></ng-content>\n                    <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n                </div>\n            </div>\n        </fieldset>\n    `,\n    animations: [\n        trigger('fieldsetContent', [\n            state(\n                'hidden',\n                style({\n                    height: '0'\n                })\n            ),\n            state(\n                'visible',\n                style({\n                    height: '*'\n                })\n            ),\n            transition('visible <=> hidden', [animate('{{transitionParams}}')]),\n            transition('void => *', animate(0))\n        ])\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    styleUrls: ['./fieldset.css'],\n    standalone: false,\n    host: {\n        class: 'cax-element'\n    }\n})\nexport class Fieldset implements AfterContentInit, BlockableUI {\n    /**\n     * Header text of the fieldset.\n     * @group Props\n     */\n    @Input() legend: string | undefined;\n    /**\n     * When specified, content can toggled by clicking the legend.\n     * @group Props\n     * @defaultValue false\n     */\n    @Input({ transform: booleanAttribute }) toggleable: boolean | undefined;\n    /**\n     * Defines the default visibility state of the content.\n     * * @group Props\n     */\n    @Input({ transform: booleanAttribute }) collapsed: boolean | undefined = false;\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     * Transition options of the panel animation.\n     * @group Props\n     */\n    @Input() transitionOptions: string = '400ms cubic-bezier(0.86, 0, 0.07, 1)';\n    /**\n     * Emits when the collapsed state changes.\n     * @param {boolean} value - New value.\n     * @group Emits\n     */\n    @Output() collapsedChange: EventEmitter<boolean> = new EventEmitter<boolean>();\n    /**\n     * Callback to invoke before panel toggle.\n     * @param {PanelBeforeToggleEvent} event - Custom toggle event\n     * @group Emits\n     */\n    @Output() onBeforeToggle: EventEmitter<FieldsetBeforeToggleEvent> = new EventEmitter<FieldsetBeforeToggleEvent>();\n    /**\n     * Callback to invoke after panel toggle.\n     * @param {PanelAfterToggleEvent} event - Custom toggle event\n     * @group Emits\n     */\n    @Output() onAfterToggle: EventEmitter<FieldsetAfterToggleEvent> = new EventEmitter<FieldsetAfterToggleEvent>();\n\n    @ContentChildren(CaxTemplate) templates!: QueryList<CaxTemplate>;\n\n    get id() {\n        return UniqueComponentId();\n    }\n\n    get buttonAriaLabel() {\n        return this.legend;\n    }\n\n    public animating: Nullable<boolean>;\n\n    headerTemplate: Nullable<TemplateRef<any>>;\n\n    contentTemplate: Nullable<TemplateRef<any>>;\n\n    collapseIconTemplate: Nullable<TemplateRef<any>>;\n\n    expandIconTemplate: Nullable<TemplateRef<any>>;\n\n    constructor(private el: ElementRef) {}\n\n    ngAfterContentInit() {\n        this.templates.forEach((item) => {\n            switch (item.getType()) {\n                case 'header':\n                    this.headerTemplate = item.template;\n                    break;\n\n                case 'expandicon':\n                    this.expandIconTemplate = item.template;\n                    break;\n\n                case 'collapseicon':\n                    this.collapseIconTemplate = item.template;\n                    break;\n\n                case 'content':\n                    this.contentTemplate = item.template;\n                    break;\n            }\n        });\n    }\n\n    toggle(event: MouseEvent) {\n        if (this.animating) {\n            return false;\n        }\n\n        this.animating = true;\n        this.onBeforeToggle.emit({ originalEvent: event, collapsed: this.collapsed });\n\n        if (this.collapsed) this.expand();\n        else this.collapse();\n\n        this.onAfterToggle.emit({ originalEvent: event, collapsed: this.collapsed });\n        event.preventDefault();\n    }\n\n    onKeyDown(event) {\n        if (event.code === 'Enter' || event.code === 'Space') {\n            this.toggle(event);\n            event.preventDefault();\n        }\n    }\n\n    expand() {\n        this.collapsed = false;\n        this.collapsedChange.emit(this.collapsed);\n    }\n\n    collapse() {\n        this.collapsed = true;\n        this.collapsedChange.emit(this.collapsed);\n    }\n\n    getBlockableElement(): HTMLElement {\n        return this.el.nativeElement.children[0];\n    }\n\n    onToggleDone() {\n        this.animating = false;\n    }\n}\n\n@NgModule({\n    imports: [CommonModule, RippleModule, MinusIcon, PlusIcon],\n    exports: [Fieldset, SharedModule],\n    declarations: [Fieldset]\n})\nexport class FieldsetModule {}\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-fieldset.mjs","sources":["../../src/app/components/fieldset/fieldset.ts","../../src/app/components/fieldset/cax-design-system-fieldset.ts"],"sourcesContent":["import { animate, state, style, transition, trigger } from '@angular/animations';\nimport { CommonModule } from '@angular/common';\nimport { AfterContentInit, ChangeDetectionStrategy, Component, ContentChildren, ElementRef, EventEmitter, Input, NgModule, Output, QueryList, TemplateRef, ViewEncapsulation, booleanAttribute } from '@angular/core';\nimport { BlockableUI, CaxTemplate, SharedModule } from 'cax-design-system/api';\nimport { MinusIcon } from 'cax-design-system/icons/minus';\nimport { PlusIcon } from 'cax-design-system/icons/plus';\nimport { RippleModule } from 'cax-design-system/ripple';\nimport { Nullable } from 'cax-design-system/ts-helpers';\nimport { UniqueComponentId } from 'cax-design-system/utils';\nimport { FieldsetAfterToggleEvent, FieldsetBeforeToggleEvent } from './fieldset.interface';\n\n/**\n * Fieldset is a grouping component with the optional content toggle feature.\n * @group Components\n */\n@Component({\n    selector: 'p-fieldset',\n    template: `\n        <fieldset\n            [attr.id]=\"id\"\n            [ngClass]=\"{ 'p-fieldset p-component': true, 'p-fieldset-toggleable': toggleable, 'p-fieldset-expanded': !collapsed && toggleable }\"\n            [ngStyle]=\"style\"\n            [class]=\"styleClass\"\n            [attr.data-pc-name]=\"'fieldset'\"\n            [attr.data-pc-section]=\"'root'\"\n        >\n            <legend class=\"p-fieldset-legend\" [attr.data-pc-section]=\"'legend'\">\n                <ng-container *ngIf=\"toggleable; else legendContent\">\n                    <a [attr.id]=\"id + '_header'\" pRipple tabindex=\"0\" role=\"button\" [attr.aria-controls]=\"id + '_content'\" [attr.aria-expanded]=\"!collapsed\" [attr.aria-label]=\"buttonAriaLabel\" (click)=\"toggle($event)\" (keydown)=\"onKeyDown($event)\">\n                        <ng-container *ngIf=\"collapsed\">\n                            <PlusIcon *ngIf=\"!expandIconTemplate\" [styleClass]=\"'p-fieldset-toggler'\" [attr.data-pc-section]=\"'togglericon'\" />\n                            <span *ngIf=\"expandIconTemplate\" class=\"p-fieldset-toggler\" [attr.data-pc-section]=\"'togglericon'\">\n                                <ng-container *ngTemplateOutlet=\"expandIconTemplate\"></ng-container>\n                            </span>\n                        </ng-container>\n                        <ng-container *ngIf=\"!collapsed\">\n                            <MinusIcon *ngIf=\"!collapseIconTemplate\" [styleClass]=\"'p-fieldset-toggler'\" [attr.aria-hidden]=\"true\" [attr.data-pc-section]=\"'togglericon'\" />\n                            <span *ngIf=\"collapseIconTemplate\" class=\"p-fieldset-toggler\" [attr.data-pc-section]=\"'togglericon'\">\n                                <ng-container *ngTemplateOutlet=\"collapseIconTemplate\"></ng-container>\n                            </span>\n                        </ng-container>\n                        <ng-container *ngTemplateOutlet=\"legendContent\"></ng-container>\n                    </a>\n                </ng-container>\n                <ng-template #legendContent>\n                    <span class=\"p-fieldset-legend-text\" [attr.data-pc-section]=\"'legendtitle'\">{{ legend }}</span>\n                    <ng-content select=\"cax-header\"></ng-content>\n                    <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n                </ng-template>\n            </legend>\n            <div\n                [attr.id]=\"id + '_content'\"\n                role=\"region\"\n                class=\"p-toggleable-content\"\n                [@fieldsetContent]=\"collapsed ? { value: 'hidden', params: { transitionParams: transitionOptions, height: '0' } } : { value: 'visible', params: { transitionParams: animating ? transitionOptions : '0ms', height: '*' } }\"\n                [attr.aria-labelledby]=\"id + '_header'\"\n                [attr.aria-hidden]=\"collapsed\"\n                [attr.data-pc-section]=\"'toggleablecontent'\"\n                (@fieldsetContent.done)=\"onToggleDone()\"\n            >\n                <div class=\"p-fieldset-content\" [attr.data-pc-section]=\"'content'\">\n                    <ng-content></ng-content>\n                    <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n                </div>\n            </div>\n        </fieldset>\n    `,\n    animations: [\n        trigger('fieldsetContent', [\n            state(\n                'hidden',\n                style({\n                    height: '0'\n                })\n            ),\n            state(\n                'visible',\n                style({\n                    height: '*'\n                })\n            ),\n            transition('visible <=> hidden', [animate('{{transitionParams}}')]),\n            transition('void => *', animate(0))\n        ])\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    styleUrls: ['./fieldset.css'],\n    standalone: false,\n    host: {\n        class: 'cax-element'\n    }\n})\nexport class Fieldset implements AfterContentInit, BlockableUI {\n    /**\n     * Header text of the fieldset.\n     * @group Props\n     */\n    @Input() legend: string | undefined;\n    /**\n     * When specified, content can toggled by clicking the legend.\n     * @group Props\n     * @defaultValue false\n     */\n    @Input({ transform: booleanAttribute }) toggleable: boolean | undefined;\n    /**\n     * Defines the default visibility state of the content.\n     * * @group Props\n     */\n    @Input({ transform: booleanAttribute }) collapsed: boolean | undefined = false;\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     * Transition options of the panel animation.\n     * @group Props\n     */\n    @Input() transitionOptions: string = '400ms cubic-bezier(0.86, 0, 0.07, 1)';\n    /**\n     * Emits when the collapsed state changes.\n     * @param {boolean} value - New value.\n     * @group Emits\n     */\n    @Output() collapsedChange: EventEmitter<boolean> = new EventEmitter<boolean>();\n    /**\n     * Callback to invoke before panel toggle.\n     * @param {PanelBeforeToggleEvent} event - Custom toggle event\n     * @group Emits\n     */\n    @Output() onBeforeToggle: EventEmitter<FieldsetBeforeToggleEvent> = new EventEmitter<FieldsetBeforeToggleEvent>();\n    /**\n     * Callback to invoke after panel toggle.\n     * @param {PanelAfterToggleEvent} event - Custom toggle event\n     * @group Emits\n     */\n    @Output() onAfterToggle: EventEmitter<FieldsetAfterToggleEvent> = new EventEmitter<FieldsetAfterToggleEvent>();\n\n    @ContentChildren(CaxTemplate) templates!: QueryList<CaxTemplate>;\n\n    get id() {\n        return UniqueComponentId();\n    }\n\n    get buttonAriaLabel() {\n        return this.legend;\n    }\n\n    public animating: Nullable<boolean>;\n\n    headerTemplate: Nullable<TemplateRef<any>>;\n\n    contentTemplate: Nullable<TemplateRef<any>>;\n\n    collapseIconTemplate: Nullable<TemplateRef<any>>;\n\n    expandIconTemplate: Nullable<TemplateRef<any>>;\n\n    constructor(private el: ElementRef) {}\n\n    ngAfterContentInit() {\n        this.templates.forEach((item) => {\n            switch (item.getType()) {\n                case 'header':\n                    this.headerTemplate = item.template;\n                    break;\n\n                case 'expandicon':\n                    this.expandIconTemplate = item.template;\n                    break;\n\n                case 'collapseicon':\n                    this.collapseIconTemplate = item.template;\n                    break;\n\n                case 'content':\n                    this.contentTemplate = item.template;\n                    break;\n            }\n        });\n    }\n\n    toggle(event: MouseEvent) {\n        if (this.animating) {\n            return false;\n        }\n\n        this.animating = true;\n        this.onBeforeToggle.emit({ originalEvent: event, collapsed: this.collapsed });\n\n        if (this.collapsed) this.expand();\n        else this.collapse();\n\n        this.onAfterToggle.emit({ originalEvent: event, collapsed: this.collapsed });\n        event.preventDefault();\n    }\n\n    onKeyDown(event) {\n        if (event.code === 'Enter' || event.code === 'Space') {\n            this.toggle(event);\n            event.preventDefault();\n        }\n    }\n\n    expand() {\n        this.collapsed = false;\n        this.collapsedChange.emit(this.collapsed);\n    }\n\n    collapse() {\n        this.collapsed = true;\n        this.collapsedChange.emit(this.collapsed);\n    }\n\n    getBlockableElement(): HTMLElement {\n        return this.el.nativeElement.children[0];\n    }\n\n    onToggleDone() {\n        this.animating = false;\n    }\n}\n\n@NgModule({\n    imports: [CommonModule, RippleModule, MinusIcon, PlusIcon],\n    exports: [Fieldset, SharedModule],\n    declarations: [Fieldset]\n})\nexport class FieldsetModule {}\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-fileupload.mjs

@@ -724,8 +724,8 @@ class FileUpload {
             this.translationSubscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: FileUpload, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.DomSanitizer }, { token: i0.NgZone }, { token: i2.HttpClient }, { token: i0.ChangeDetectorRef }, { token: i3.caxConfig }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.16", type: FileUpload, isStandalone: false, selector: "p-fileUpload", inputs: { name: "name", url: "url", method: "method", multiple: ["multiple", "multiple", booleanAttribute], accept: "accept", disabled: ["disabled", "disabled", booleanAttribute], auto: ["auto", "auto", booleanAttribute], withCredentials: ["withCredentials", "withCredentials", booleanAttribute], maxFileSize: ["maxFileSize", "maxFileSize", numberAttribute], invalidFileSizeMessageSummary: "invalidFileSizeMessageSummary", invalidFileSizeMessageDetail: "invalidFileSizeMessageDetail", invalidFileTypeMessageSummary: "invalidFileTypeMessageSummary", invalidFileTypeMessageDetail: "invalidFileTypeMessageDetail", invalidFileLimitMessageDetail: "invalidFileLimitMessageDetail", invalidFileLimitMessageSummary: "invalidFileLimitMessageSummary", style: "style", styleClass: "styleClass", previewWidth: ["previewWidth", "previewWidth", numberAttribute], chooseLabel: "chooseLabel", uploadLabel: "uploadLabel", cancelLabel: "cancelLabel", chooseIcon: "chooseIcon", uploadIcon: "uploadIcon", cancelIcon: "cancelIcon", showUploadButton: ["showUploadButton", "showUploadButton", booleanAttribute], showCancelButton: ["showCancelButton", "showCancelButton", booleanAttribute], mode: "mode", headers: "headers", customUpload: ["customUpload", "customUpload", booleanAttribute], fileLimit: ["fileLimit", "fileLimit", (value) => numberAttribute(value, null)], uploadStyleClass: "uploadStyleClass", cancelStyleClass: "cancelStyleClass", removeStyleClass: "removeStyleClass", chooseStyleClass: "chooseStyleClass", files: "files" }, outputs: { onBeforeUpload: "onBeforeUpload", onSend: "onSend", onUpload: "onUpload", onError: "onError", onClear: "onClear", onRemove: "onRemove", onSelect: "onSelect", onProgress: "onProgress", uploadHandler: "uploadHandler", onImageError: "onImageError", onRemoveUploadedFile: "onRemoveUploadedFile" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "advancedFileInput", first: true, predicate: ["advancedfileinput"], descendants: true }, { propertyName: "basicFileInput", first: true, predicate: ["basicfileinput"], descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FileUpload, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.DomSanitizer }, { token: i0.NgZone }, { token: i2.HttpClient }, { token: i0.ChangeDetectorRef }, { token: i3.caxConfig }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.21", type: FileUpload, isStandalone: false, selector: "p-fileUpload", inputs: { name: "name", url: "url", method: "method", multiple: ["multiple", "multiple", booleanAttribute], accept: "accept", disabled: ["disabled", "disabled", booleanAttribute], auto: ["auto", "auto", booleanAttribute], withCredentials: ["withCredentials", "withCredentials", booleanAttribute], maxFileSize: ["maxFileSize", "maxFileSize", numberAttribute], invalidFileSizeMessageSummary: "invalidFileSizeMessageSummary", invalidFileSizeMessageDetail: "invalidFileSizeMessageDetail", invalidFileTypeMessageSummary: "invalidFileTypeMessageSummary", invalidFileTypeMessageDetail: "invalidFileTypeMessageDetail", invalidFileLimitMessageDetail: "invalidFileLimitMessageDetail", invalidFileLimitMessageSummary: "invalidFileLimitMessageSummary", style: "style", styleClass: "styleClass", previewWidth: ["previewWidth", "previewWidth", numberAttribute], chooseLabel: "chooseLabel", uploadLabel: "uploadLabel", cancelLabel: "cancelLabel", chooseIcon: "chooseIcon", uploadIcon: "uploadIcon", cancelIcon: "cancelIcon", showUploadButton: ["showUploadButton", "showUploadButton", booleanAttribute], showCancelButton: ["showCancelButton", "showCancelButton", booleanAttribute], mode: "mode", headers: "headers", customUpload: ["customUpload", "customUpload", booleanAttribute], fileLimit: ["fileLimit", "fileLimit", (value) => numberAttribute(value, null)], uploadStyleClass: "uploadStyleClass", cancelStyleClass: "cancelStyleClass", removeStyleClass: "removeStyleClass", chooseStyleClass: "chooseStyleClass", files: "files" }, outputs: { onBeforeUpload: "onBeforeUpload", onSend: "onSend", onUpload: "onUpload", onError: "onError", onClear: "onClear", onRemove: "onRemove", onSelect: "onSelect", onProgress: "onProgress", uploadHandler: "uploadHandler", onImageError: "onImageError", onRemoveUploadedFile: "onRemoveUploadedFile" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "advancedFileInput", first: true, predicate: ["advancedfileinput"], descendants: true }, { propertyName: "basicFileInput", first: true, predicate: ["basicfileinput"], descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: `
         <div [ngClass]="'p-fileupload p-fileupload-advanced p-component'" [ngStyle]="style" [class]="styleClass" *ngIf="mode === 'advanced'" [attr.data-pc-name]="'fileupload'" [attr.data-pc-section]="'root'">
             <input
                 [attr.aria-label]="browseFilesLabel"
@@ -887,7 +887,7 @@ class FileUpload {
         </div>
     `, isInline: true, styles: ["@layer cax{.p-fileupload-content{position:relative}.p-fileupload-row{display:flex;align-items:center}.p-fileupload-row>div{flex:1 1 auto;width:25%}.p-fileupload-row>div:last-child{text-align:right}.p-fileupload-content .p-progressbar{width:100%;position:absolute;top:0;left:0}.p-button.p-fileupload-choose{position:relative;overflow:hidden}.p-button.p-fileupload-choose input[type=file],.p-fileupload-choose.p-fileupload-choose-selected input[type=file]{display:none}.p-fluid .p-fileupload .p-button{width:auto}.p-fileupload-filename{word-break:break-all}}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i4.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i4.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i4.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i4.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i4.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(() => PlusIcon), selector: "PlusIcon" }, { kind: "component", type: i0.forwardRef(() => UploadIcon), selector: "UploadIcon" }, { kind: "component", type: i0.forwardRef(() => TimesIcon), selector: "TimesIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: FileUpload, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FileUpload, decorators: [{
             type: Component,
             args: [{ selector: 'p-fileUpload', template: `
         <div [ngClass]="'p-fileupload p-fileupload-advanced p-component'" [ngStyle]="style" [class]="styleClass" *ngIf="mode === 'advanced'" [attr.data-pc-name]="'fileupload'" [attr.data-pc-section]="'root'">
@@ -1174,11 +1174,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
                 type: Input
             }] } });
 class FileUploadModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: FileUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.16", ngImport: i0, type: FileUploadModule, declarations: [FileUpload], imports: [CommonModule, SharedModule, ButtonModule, ProgressBarModule, MessagesModule, RippleModule, PlusIcon, UploadIcon, TimesIcon], exports: [FileUpload, SharedModule, ButtonModule, ProgressBarModule, MessagesModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: FileUploadModule, imports: [CommonModule, SharedModule, ButtonModule, ProgressBarModule, MessagesModule, RippleModule, PlusIcon, UploadIcon, TimesIcon, SharedModule, ButtonModule, ProgressBarModule, MessagesModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FileUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: FileUploadModule, declarations: [FileUpload], imports: [CommonModule, SharedModule, ButtonModule, ProgressBarModule, MessagesModule, RippleModule, PlusIcon, UploadIcon, TimesIcon], exports: [FileUpload, SharedModule, ButtonModule, ProgressBarModule, MessagesModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FileUploadModule, imports: [CommonModule, SharedModule, ButtonModule, ProgressBarModule, MessagesModule, RippleModule, PlusIcon, UploadIcon, TimesIcon, SharedModule, ButtonModule, ProgressBarModule, MessagesModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: FileUploadModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FileUploadModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, SharedModule, ButtonModule, ProgressBarModule, MessagesModule, RippleModule, PlusIcon, UploadIcon, TimesIcon],