matcha-components 20.232.0 → 20.234.0

package/fesm2022/matcha-components.mjs

@@ -8342,19 +8342,22 @@ class MatchaTabItemComponent {
         this.title = '';
         this.icon = '';
         this._active = false;
+        this._hasBeenActivated = false;
     }
     set active(value) {
         this._active = value === '' || value === true || value === 'true';
+        if (this._active) {
+            this._hasBeenActivated = true;
+        }
     }
-    get active() {
-        return this._active;
-    }
+    get active() { return this._active; }
+    get hasBeenActivated() { return this._hasBeenActivated; }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaTabItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: MatchaTabItemComponent, isStandalone: false, selector: "matcha-tab", inputs: { title: "title", icon: "icon", active: "active" }, ngImport: i0, template: "<ng-content *ngIf=\"active\"></ng-content>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: MatchaTabItemComponent, isStandalone: false, selector: "matcha-tab", inputs: { title: "title", icon: "icon", active: "active" }, ngImport: i0, template: "<div *ngIf=\"hasBeenActivated\" [hidden]=\"!active\">\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaTabItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-tab', standalone: false, template: "<ng-content *ngIf=\"active\"></ng-content>\n" }]
+            args: [{ selector: 'matcha-tab', standalone: false, template: "<div *ngIf=\"hasBeenActivated\" [hidden]=\"!active\">\n  <ng-content></ng-content>\n</div>\n" }]
         }], propDecorators: { title: [{
                 type: Input
             }], icon: [{
@@ -14562,30 +14565,165 @@ const DEFAULT_CONFIG = {
     showLink: true,
     showImage: true,
     showVideo: true,
+    showMarkdown: false,
     showFullScreen: true,
     showCodeView: true,
     videoX: 560,
     videoY: 315,
     imageSize: '350px',
 };
+function buildButtonList(options) {
+    const groups = [['undo', 'redo']];
+    const formats = [
+        options.showFont && 'font',
+        options.showFormats && 'formatBlock',
+    ].filter(Boolean);
+    if (formats.length)
+        groups.push(formats);
+    const inline = [
+        options.showBold && 'bold',
+        options.showItalic && 'italic',
+        options.showUnderline && 'underline',
+        options.showStrike && 'strike',
+    ].filter(Boolean);
+    if (inline.length)
+        groups.push(inline);
+    const colors = [
+        options.showFontColor && 'fontColor',
+        options.showHiliteColor && 'backgroundColor',
+    ].filter(Boolean);
+    if (colors.length)
+        groups.push(colors);
+    const para = [
+        options.showInOutDent && 'outdent',
+        options.showInOutDent && 'indent',
+        options.showAlign && 'align',
+        options.showList && 'list',
+        options.showLine && 'line',
+    ].filter(Boolean);
+    if (para.length)
+        groups.push(para);
+    const insert = [
+        options.showTable && 'table',
+        options.showLink && 'link',
+        options.showImage && 'image',
+        options.showVideo && 'video',
+    ].filter(Boolean);
+    if (insert.length)
+        groups.push(insert);
+    if (options.showMarkdown)
+        groups.push(['markdown']);
+    const view = [
+        options.showFullScreen && 'fullScreen',
+        options.showCodeView && 'codeView',
+    ].filter(Boolean);
+    if (view.length)
+        groups.push(view);
+    return groups;
+}
+
+class MatchaSkeletonComponent {
+    constructor() {
+        this.amount = 3;
+        this.grid = 3;
+        this.height = 100;
+        this.model = 'empty';
+        this.gap = 16;
+    }
+    // Getters privados para conversão sem modificar os inputs
+    get amountNumber() {
+        return typeof this.amount === 'string' ? parseInt(this.amount, 10) : this.amount;
+    }
+    get gridNumber() {
+        return typeof this.grid === 'string' ? parseInt(this.grid, 10) : this.grid;
+    }
+    get classes() {
+        // Usa os valores convertidos sem modificar os inputs
+        const amountValue = this.amountNumber;
+        const gridValue = this.gridNumber;
+        let classes = `gap-${this.gap} `;
+        amountValue > 1 ? classes += `grid-sm-${gridValue - 1} ` : classes;
+        amountValue > 2 ? classes += `grid-md-${gridValue} ` : classes;
+        return classes;
+    }
+    get _isCssHeight() {
+        return typeof this.height === 'string' && /[a-z%]/i.test(this.height);
+    }
+    get heightStyle() {
+        return this._isCssHeight ? String(this.height) : null;
+    }
+    get heightClass() {
+        return this._isCssHeight ? 'flex-column--force p-16' : `h-${this.height} flex-column--force p-16`;
+    }
+    get amountArray() {
+        const amountValue = this.amountNumber;
+        return Array(amountValue).fill(0).map((_, index) => index);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: MatchaSkeletonComponent, isStandalone: false, selector: "matcha-skeleton", inputs: { amount: "amount", grid: "grid", height: "height", model: "model", gap: "gap" }, host: { properties: { "attr.amount": "this.amount", "attr.grid": "this.grid", "attr.height": "this.height", "attr.model": "this.model", "attr.gap": "this.gap" } }, ngImport: i0, template: "<ng-content></ng-content>\n<!-- CARD SKELETON -->\n<div [class]=\"classes\" *ngIf=\"model !== 'table'\">\n    <div class=\"skeleton-animated-background flex-column--force p-0 radius-8 user-select-none overflow-hidden\" *ngFor=\"let i of amountArray\">\n\n        <ng-container *ngIf=\"model === 'profile'\"><span class=\"h8 title p-16 m-0\"> <span class=\"radius-full background-surface-alpha h-48 w-48\"></span>&nbsp;</span></ng-container>\n\n        <div [class]=\"heightClass\" [style.height]=\"heightStyle\"></div>\n\n        <ng-container *ngIf=\"model === 'profile'\">\n            <div class=\"flex-column--force\">\n                <div class=\"flex-column--force p-16 gap-16\">\n                    <div class=\"w-100-p h-16 background-surface-alpha radius-full\"></div>\n                    <div class=\"w-100-p h-16 background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n        </ng-container>\n\n    </div>\n</div>\n<!-- CARD SKELETON -->\n\n<!-- TABLE SKELETON -->\n<div class=\"skeleton-animated-background w-100-p mr-16 flex-column--force p-0 radius-8 user-select-none\" *ngIf=\"model === 'table'\">\n\n    <div class=\"flex-column--force h-64 background-surface-alpha\">\n        <ng-container>&nbsp;</ng-container>\n    </div>\n\n    <ng-container *ngFor=\"let i of amountArray\">\n        <div class=\"grid-4 h-80 px-16 gap-16 flex-align-center--force\">\n            <div class=\"w-100-p flex-row--force gap-16\">\n                <div class=\"min-h-48 min-w-48 h-48 w-48 background-surface-alpha radius-full\"></div>\n                <div class=\"w-100-p flex-column--force flex-center--force gap-16\">\n                    <div class=\"h-16 w-60-p background-surface-alpha radius-full\"></div>\n                    <div class=\"h-16 w-100-p background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n            <div class=\"h-16 w-100-p flex-column--force background-surface-alpha radius-full\"></div>\n            <div class=\"w-100-p flex-row--force gap-16\">\n                <div class=\"w-100-p flex-column--force flex-center--force gap-16\">\n                    <div class=\"h-16 w-60-p background-surface-alpha radius-full\"></div>\n                    <div class=\"h-16 w-100-p background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n            <div class=\"h-16 w-100-p flex-column--force background-surface-alpha radius-full\"></div>\n        </div>\n\n        <div class=\"grid-4 h-80 px-16 gap-16 flex-align-center--force background-bg-alpha\">\n            <div class=\"w-100-p flex-row--force gap-16\">\n                <div class=\"min-h-48 min-w-48 h-48 w-48 background-surface-alpha radius-full\"></div>\n                <div class=\"w-100-p flex-column--force flex-center--force gap-16\">\n                    <div class=\"h-16 w-100-p background-surface-alpha radius-full\"></div>\n                    <div class=\"h-16 w-30-p background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n            <div class=\"h-16 w-100-p flex-column--force background-surface-alpha radius-full\"></div>\n            <div class=\"w-100-p flex-row--force gap-16\">\n                <div class=\"w-100-p flex-column--force flex-center--force gap-16\">\n                    <div class=\"h-16 w-60-p background-surface-alpha radius-full\"></div>\n                    <div class=\"h-16 w-100-p background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n            <div class=\"h-16 w-100-p flex-column--force background-surface-alpha radius-full\"></div>\n        </div>\n\n    </ng-container>\n\n</div>\n<!-- TABLE SKELETON -->\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaSkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'matcha-skeleton', standalone: false, template: "<ng-content></ng-content>\n<!-- CARD SKELETON -->\n<div [class]=\"classes\" *ngIf=\"model !== 'table'\">\n    <div class=\"skeleton-animated-background flex-column--force p-0 radius-8 user-select-none overflow-hidden\" *ngFor=\"let i of amountArray\">\n\n        <ng-container *ngIf=\"model === 'profile'\"><span class=\"h8 title p-16 m-0\"> <span class=\"radius-full background-surface-alpha h-48 w-48\"></span>&nbsp;</span></ng-container>\n\n        <div [class]=\"heightClass\" [style.height]=\"heightStyle\"></div>\n\n        <ng-container *ngIf=\"model === 'profile'\">\n            <div class=\"flex-column--force\">\n                <div class=\"flex-column--force p-16 gap-16\">\n                    <div class=\"w-100-p h-16 background-surface-alpha radius-full\"></div>\n                    <div class=\"w-100-p h-16 background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n        </ng-container>\n\n    </div>\n</div>\n<!-- CARD SKELETON -->\n\n<!-- TABLE SKELETON -->\n<div class=\"skeleton-animated-background w-100-p mr-16 flex-column--force p-0 radius-8 user-select-none\" *ngIf=\"model === 'table'\">\n\n    <div class=\"flex-column--force h-64 background-surface-alpha\">\n        <ng-container>&nbsp;</ng-container>\n    </div>\n\n    <ng-container *ngFor=\"let i of amountArray\">\n        <div class=\"grid-4 h-80 px-16 gap-16 flex-align-center--force\">\n            <div class=\"w-100-p flex-row--force gap-16\">\n                <div class=\"min-h-48 min-w-48 h-48 w-48 background-surface-alpha radius-full\"></div>\n                <div class=\"w-100-p flex-column--force flex-center--force gap-16\">\n                    <div class=\"h-16 w-60-p background-surface-alpha radius-full\"></div>\n                    <div class=\"h-16 w-100-p background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n            <div class=\"h-16 w-100-p flex-column--force background-surface-alpha radius-full\"></div>\n            <div class=\"w-100-p flex-row--force gap-16\">\n                <div class=\"w-100-p flex-column--force flex-center--force gap-16\">\n                    <div class=\"h-16 w-60-p background-surface-alpha radius-full\"></div>\n                    <div class=\"h-16 w-100-p background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n            <div class=\"h-16 w-100-p flex-column--force background-surface-alpha radius-full\"></div>\n        </div>\n\n        <div class=\"grid-4 h-80 px-16 gap-16 flex-align-center--force background-bg-alpha\">\n            <div class=\"w-100-p flex-row--force gap-16\">\n                <div class=\"min-h-48 min-w-48 h-48 w-48 background-surface-alpha radius-full\"></div>\n                <div class=\"w-100-p flex-column--force flex-center--force gap-16\">\n                    <div class=\"h-16 w-100-p background-surface-alpha radius-full\"></div>\n                    <div class=\"h-16 w-30-p background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n            <div class=\"h-16 w-100-p flex-column--force background-surface-alpha radius-full\"></div>\n            <div class=\"w-100-p flex-row--force gap-16\">\n                <div class=\"w-100-p flex-column--force flex-center--force gap-16\">\n                    <div class=\"h-16 w-60-p background-surface-alpha radius-full\"></div>\n                    <div class=\"h-16 w-100-p background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n            <div class=\"h-16 w-100-p flex-column--force background-surface-alpha radius-full\"></div>\n        </div>\n\n    </ng-container>\n\n</div>\n<!-- TABLE SKELETON -->\n" }]
+        }], propDecorators: { amount: [{
+                type: Input,
+                args: ['amount']
+            }, {
+                type: HostBinding,
+                args: ['attr.amount']
+            }], grid: [{
+                type: Input,
+                args: ['grid']
+            }, {
+                type: HostBinding,
+                args: ['attr.grid']
+            }], height: [{
+                type: Input,
+                args: ['height']
+            }, {
+                type: HostBinding,
+                args: ['attr.height']
+            }], model: [{
+                type: Input,
+                args: ['model']
+            }, {
+                type: HostBinding,
+                args: ['attr.model']
+            }], gap: [{
+                type: Input,
+                args: ['gap']
+            }, {
+                type: HostBinding,
+                args: ['attr.gap']
+            }] } });
 
 const CDN_BASE = 'https://unpkg.com/matcha-components/assets/text-editor';
 class MatchaTextEditorComponent {
+    get skeletonHeight() {
+        return this._config?.height || '400px';
+    }
     set value(v) { this.writeValue(v); }
+    set config(v) {
+        this._config = v;
+        if (this._editor) {
+            this._reloadEditor();
+        }
+    }
     get disabledAttr() {
         return this._disabled ? '' : null;
     }
-    constructor(_ngZone) {
+    constructor(_ngZone, _cdr, _el) {
         this._ngZone = _ngZone;
+        this._cdr = _cdr;
+        this._el = _el;
         this.editorId = `matcha-text-editor-${Math.random().toString(36).substring(2, 11)}`;
         this.isLoading = true;
-        this.config = { ...DEFAULT_CONFIG };
+        this._config = { ...DEFAULT_CONFIG };
         this.contentChange = new EventEmitter();
         this._editor = null;
         this._pendingValue = '';
         this._isSettingValue = false;
         this._disabled = false;
-        this._observer = null;
         this._onChange = () => { };
         this._onTouched = () => { };
     }
@@ -14601,10 +14739,7 @@ class MatchaTextEditorComponent {
         });
     }
     ngOnDestroy() {
-        this._observer?.disconnect();
-        if (this._editor) {
-            this._editor.destroy();
-        }
+        this._editor = null;
     }
     // ControlValueAccessor
     writeValue(value) {
@@ -14627,7 +14762,7 @@ class MatchaTextEditorComponent {
     setDisabledState(isDisabled) {
         this._disabled = isDisabled;
         if (this._editor) {
-            isDisabled ? this._editor.disabled() : this._editor.enabled();
+            isDisabled ? this._editor.disable() : this._editor.enable();
         }
     }
     // Private
@@ -14671,58 +14806,78 @@ class MatchaTextEditorComponent {
         await this._injectStyle('suneditor-css', `${CDN_BASE}/css/suneditor.min.css`);
         await this._injectScript('suneditor-js', `${CDN_BASE}/js/suneditor.min.js`);
     }
+    _reloadEditor() {
+        this._el.nativeElement.querySelectorAll('.sun-editor').forEach((el) => el.remove());
+        const content = this._editor?.getValue() ?? '';
+        this._editor = null;
+        this._pendingValue = content;
+        this.isLoading = true;
+        this._cdr.detectChanges();
+        this._ngZone.runOutsideAngular(() => {
+            this._initEditor();
+        });
+    }
     _initEditor() {
         const SUNEDITOR = window.SUNEDITOR;
         if (!SUNEDITOR) {
             console.error('[TextEditor] SUNEDITOR global não encontrado após injeção!');
             return;
         }
-        const mergedConfig = { ...DEFAULT_CONFIG, ...this.config };
-        this._editor = SUNEDITOR.create(this.editorId, mergedConfig);
-        if (this._pendingValue) {
-            this._editor.setContent(this._pendingValue);
-            this._pendingValue = '';
+        if (!document.getElementById(this.editorId)) {
+            requestAnimationFrame(() => this._ngZone.runOutsideAngular(() => this._initEditor()));
+            return;
         }
+        const mergedConfig = { ...DEFAULT_CONFIG, ...this._config };
+        this._editor = SUNEDITOR.create(this.editorId, {
+            plugins: SUNEDITOR.plugins,
+            buttonList: buildButtonList(mergedConfig),
+            height: mergedConfig.height || '400px',
+            width: mergedConfig.width,
+            imageWidth: mergedConfig.imageSize,
+            videoWidth: mergedConfig.videoX,
+            videoHeight: mergedConfig.videoY,
+        });
         if (this._disabled) {
-            this._editor.disabled();
+            this._editor.disable();
         }
-        setTimeout(() => {
-            this._attachObserver();
-            this._ngZone.run(() => { this.isLoading = false; });
-        }, 100);
-    }
-    _attachObserver() {
-        const container = document.getElementById(this.editorId)?.parentElement;
-        const iframe = container?.querySelector('iframe.input_editor');
-        const iframeBody = iframe?.contentWindow?.document?.body;
-        if (!iframeBody)
-            return;
-        this._observer = new MutationObserver(() => {
+        // Hide immediately so the skeleton doesn't overlap the editor during initialization
+        const sunEditorEl = this._el.nativeElement.querySelector('.sun-editor');
+        if (sunEditorEl)
+            sunEditorEl.style.display = 'none';
+        this._editor.on('onChange', (content) => {
             if (this._isSettingValue)
                 return;
             this._ngZone.run(() => {
-                const content = this._editor.getContent();
                 this._onChange(content);
                 this.contentChange.emit(content);
             });
         });
-        this._observer.observe(iframeBody, {
-            childList: true,
-            subtree: true,
-            characterData: true,
-        });
-        iframeBody.addEventListener('blur', () => {
+        this._editor.on('onBlur', () => {
             this._ngZone.run(() => this._onTouched());
         });
+        setTimeout(() => {
+            if (this._pendingValue) {
+                this._isSettingValue = true;
+                this._editor.setContent(this._pendingValue);
+                this._pendingValue = '';
+                setTimeout(() => { this._isSettingValue = false; }, 0);
+            }
+            if (sunEditorEl)
+                sunEditorEl.style.display = '';
+            this._ngZone.run(() => {
+                this.isLoading = false;
+                this._cdr.detectChanges();
+            });
+        }, 100);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaTextEditorComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaTextEditorComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: MatchaTextEditorComponent, isStandalone: false, selector: "matcha-text-editor", inputs: { value: "value", config: "config" }, outputs: { contentChange: "contentChange" }, host: { properties: { "attr.disabled": "this.disabledAttr" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MatchaTextEditorComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<matcha-spinner *ngIf=\"isLoading\"></matcha-spinner>\n<textarea [id]=\"editorId\" style=\"display:none; width:100%;\"></textarea>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatchaSpinnerComponent, selector: "matcha-spinner", inputs: ["progress", "color", "size", "size-xs", "size-sm", "size-md", "size-lg", "size-xl"] }] }); }
+        ], ngImport: i0, template: "<matcha-skeleton *ngIf=\"isLoading\" [height]=\"skeletonHeight\" [amount]=\"1\" model=\"empty\"></matcha-skeleton>\n<textarea [id]=\"editorId\" style=\"display:none; width:100%;\"></textarea>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatchaSkeletonComponent, selector: "matcha-skeleton", inputs: ["amount", "grid", "height", "model", "gap"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaTextEditorComponent, decorators: [{
             type: Component,
@@ -14732,8 +14887,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                             useExisting: forwardRef(() => MatchaTextEditorComponent),
                             multi: true,
                         },
-                    ], template: "<matcha-spinner *ngIf=\"isLoading\"></matcha-spinner>\n<textarea [id]=\"editorId\" style=\"display:none; width:100%;\"></textarea>\n" }]
-        }], ctorParameters: () => [{ type: i0.NgZone }], propDecorators: { value: [{
+                    ], template: "<matcha-skeleton *ngIf=\"isLoading\" [height]=\"skeletonHeight\" [amount]=\"1\" model=\"empty\"></matcha-skeleton>\n<textarea [id]=\"editorId\" style=\"display:none; width:100%;\"></textarea>\n" }]
+        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { value: [{
                 type: Input
             }], config: [{
                 type: Input
@@ -14744,16 +14899,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                 args: ['attr.disabled']
             }] } });
 
+class MatchaSkeletonModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaSkeletonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: MatchaSkeletonModule, declarations: [MatchaSkeletonComponent], imports: [CommonModule], exports: [MatchaSkeletonComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaSkeletonModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaSkeletonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [MatchaSkeletonComponent],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [MatchaSkeletonComponent],
+                }]
+        }] });
+
 class MatchaTextEditorModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaTextEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: MatchaTextEditorModule, declarations: [MatchaTextEditorComponent], imports: [CommonModule, ReactiveFormsModule, MatchaSpinnerModule], exports: [MatchaTextEditorComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaTextEditorModule, imports: [CommonModule, ReactiveFormsModule, MatchaSpinnerModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: MatchaTextEditorModule, declarations: [MatchaTextEditorComponent], imports: [CommonModule, ReactiveFormsModule, MatchaSkeletonModule], exports: [MatchaTextEditorComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaTextEditorModule, imports: [CommonModule, ReactiveFormsModule, MatchaSkeletonModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaTextEditorModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaTextEditorComponent],
-                    imports: [CommonModule, ReactiveFormsModule, MatchaSpinnerModule],
+                    imports: [CommonModule, ReactiveFormsModule, MatchaSkeletonModule],
                     exports: [MatchaTextEditorComponent],
                 }]
         }] });
@@ -15203,91 +15374,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                 }]
         }] });
 
-class MatchaSkeletonComponent {
-    constructor() {
-        this.amount = 3;
-        this.grid = 3;
-        this.height = 100;
-        this.model = 'empty';
-        this.gap = 16;
-    }
-    // Getters privados para conversão sem modificar os inputs
-    get amountNumber() {
-        return typeof this.amount === 'string' ? parseInt(this.amount, 10) : this.amount;
-    }
-    get gridNumber() {
-        return typeof this.grid === 'string' ? parseInt(this.grid, 10) : this.grid;
-    }
-    get classes() {
-        // Usa os valores convertidos sem modificar os inputs
-        const amountValue = this.amountNumber;
-        const gridValue = this.gridNumber;
-        let classes = `gap-${this.gap} `;
-        amountValue > 1 ? classes += `grid-sm-${gridValue - 1} ` : classes;
-        amountValue > 2 ? classes += `grid-md-${gridValue} ` : classes;
-        return classes;
-    }
-    get heightClass() {
-        return `h-${this.height}`;
-    }
-    get amountArray() {
-        const amountValue = this.amountNumber;
-        return Array(amountValue).fill(0).map((_, index) => index);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: MatchaSkeletonComponent, isStandalone: false, selector: "matcha-skeleton", inputs: { amount: "amount", grid: "grid", height: "height", model: "model", gap: "gap" }, host: { properties: { "attr.amount": "this.amount", "attr.grid": "this.grid", "attr.height": "this.height", "attr.model": "this.model", "attr.gap": "this.gap" } }, ngImport: i0, template: "<ng-content></ng-content>\n<!-- CARD SKELETON -->\n<div [class]=\"classes\" *ngIf=\"model !== 'table'\">\n    <div class=\"skeleton-animated-background flex-column--force p-0 radius-8 user-select-none overflow-hidden\" *ngFor=\"let i of amountArray\">\n\n        <ng-container *ngIf=\"model === 'profile'\"><span class=\"h8 title p-16 m-0\"> <span class=\"radius-full background-surface-alpha h-48 w-48\"></span>&nbsp;</span></ng-container>\n\n        <div [class]=\"'h-'+ height + ' flex-column--force p-16'\"></div>\n\n        <ng-container *ngIf=\"model === 'profile'\">\n            <div class=\"flex-column--force\">\n                <div class=\"flex-column--force p-16 gap-16\">\n                    <div class=\"w-100-p h-16 background-surface-alpha radius-full\"></div>\n                    <div class=\"w-100-p h-16 background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n        </ng-container>\n\n    </div>\n</div>\n<!-- CARD SKELETON -->\n\n<!-- TABLE SKELETON -->\n<div class=\"skeleton-animated-background w-100-p mr-16 flex-column--force p-0 radius-8 user-select-none\" *ngIf=\"model === 'table'\">\n\n    <div class=\"flex-column--force h-64 background-surface-alpha\">\n        <ng-container>&nbsp;</ng-container>\n    </div>\n\n    <ng-container *ngFor=\"let i of amountArray\">\n        <div class=\"grid-4 h-80 px-16 gap-16 flex-align-center--force\">\n            <div class=\"w-100-p flex-row--force gap-16\">\n                <div class=\"min-h-48 min-w-48 h-48 w-48 background-surface-alpha radius-full\"></div>\n                <div class=\"w-100-p flex-column--force flex-center--force gap-16\">\n                    <div class=\"h-16 w-60-p background-surface-alpha radius-full\"></div>\n                    <div class=\"h-16 w-100-p background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n            <div class=\"h-16 w-100-p flex-column--force background-surface-alpha radius-full\"></div>\n            <div class=\"w-100-p flex-row--force gap-16\">\n                <div class=\"w-100-p flex-column--force flex-center--force gap-16\">\n                    <div class=\"h-16 w-60-p background-surface-alpha radius-full\"></div>\n                    <div class=\"h-16 w-100-p background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n            <div class=\"h-16 w-100-p flex-column--force background-surface-alpha radius-full\"></div>\n        </div>\n\n        <div class=\"grid-4 h-80 px-16 gap-16 flex-align-center--force background-bg-alpha\">\n            <div class=\"w-100-p flex-row--force gap-16\">\n                <div class=\"min-h-48 min-w-48 h-48 w-48 background-surface-alpha radius-full\"></div>\n                <div class=\"w-100-p flex-column--force flex-center--force gap-16\">\n                    <div class=\"h-16 w-100-p background-surface-alpha radius-full\"></div>\n                    <div class=\"h-16 w-30-p background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n            <div class=\"h-16 w-100-p flex-column--force background-surface-alpha radius-full\"></div>\n            <div class=\"w-100-p flex-row--force gap-16\">\n                <div class=\"w-100-p flex-column--force flex-center--force gap-16\">\n                    <div class=\"h-16 w-60-p background-surface-alpha radius-full\"></div>\n                    <div class=\"h-16 w-100-p background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n            <div class=\"h-16 w-100-p flex-column--force background-surface-alpha radius-full\"></div>\n        </div>\n\n    </ng-container>\n\n</div>\n<!-- TABLE SKELETON -->\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaSkeletonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'matcha-skeleton', standalone: false, template: "<ng-content></ng-content>\n<!-- CARD SKELETON -->\n<div [class]=\"classes\" *ngIf=\"model !== 'table'\">\n    <div class=\"skeleton-animated-background flex-column--force p-0 radius-8 user-select-none overflow-hidden\" *ngFor=\"let i of amountArray\">\n\n        <ng-container *ngIf=\"model === 'profile'\"><span class=\"h8 title p-16 m-0\"> <span class=\"radius-full background-surface-alpha h-48 w-48\"></span>&nbsp;</span></ng-container>\n\n        <div [class]=\"'h-'+ height + ' flex-column--force p-16'\"></div>\n\n        <ng-container *ngIf=\"model === 'profile'\">\n            <div class=\"flex-column--force\">\n                <div class=\"flex-column--force p-16 gap-16\">\n                    <div class=\"w-100-p h-16 background-surface-alpha radius-full\"></div>\n                    <div class=\"w-100-p h-16 background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n        </ng-container>\n\n    </div>\n</div>\n<!-- CARD SKELETON -->\n\n<!-- TABLE SKELETON -->\n<div class=\"skeleton-animated-background w-100-p mr-16 flex-column--force p-0 radius-8 user-select-none\" *ngIf=\"model === 'table'\">\n\n    <div class=\"flex-column--force h-64 background-surface-alpha\">\n        <ng-container>&nbsp;</ng-container>\n    </div>\n\n    <ng-container *ngFor=\"let i of amountArray\">\n        <div class=\"grid-4 h-80 px-16 gap-16 flex-align-center--force\">\n            <div class=\"w-100-p flex-row--force gap-16\">\n                <div class=\"min-h-48 min-w-48 h-48 w-48 background-surface-alpha radius-full\"></div>\n                <div class=\"w-100-p flex-column--force flex-center--force gap-16\">\n                    <div class=\"h-16 w-60-p background-surface-alpha radius-full\"></div>\n                    <div class=\"h-16 w-100-p background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n            <div class=\"h-16 w-100-p flex-column--force background-surface-alpha radius-full\"></div>\n            <div class=\"w-100-p flex-row--force gap-16\">\n                <div class=\"w-100-p flex-column--force flex-center--force gap-16\">\n                    <div class=\"h-16 w-60-p background-surface-alpha radius-full\"></div>\n                    <div class=\"h-16 w-100-p background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n            <div class=\"h-16 w-100-p flex-column--force background-surface-alpha radius-full\"></div>\n        </div>\n\n        <div class=\"grid-4 h-80 px-16 gap-16 flex-align-center--force background-bg-alpha\">\n            <div class=\"w-100-p flex-row--force gap-16\">\n                <div class=\"min-h-48 min-w-48 h-48 w-48 background-surface-alpha radius-full\"></div>\n                <div class=\"w-100-p flex-column--force flex-center--force gap-16\">\n                    <div class=\"h-16 w-100-p background-surface-alpha radius-full\"></div>\n                    <div class=\"h-16 w-30-p background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n            <div class=\"h-16 w-100-p flex-column--force background-surface-alpha radius-full\"></div>\n            <div class=\"w-100-p flex-row--force gap-16\">\n                <div class=\"w-100-p flex-column--force flex-center--force gap-16\">\n                    <div class=\"h-16 w-60-p background-surface-alpha radius-full\"></div>\n                    <div class=\"h-16 w-100-p background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n            <div class=\"h-16 w-100-p flex-column--force background-surface-alpha radius-full\"></div>\n        </div>\n\n    </ng-container>\n\n</div>\n<!-- TABLE SKELETON -->\n" }]
-        }], propDecorators: { amount: [{
-                type: Input,
-                args: ['amount']
-            }, {
-                type: HostBinding,
-                args: ['attr.amount']
-            }], grid: [{
-                type: Input,
-                args: ['grid']
-            }, {
-                type: HostBinding,
-                args: ['attr.grid']
-            }], height: [{
-                type: Input,
-                args: ['height']
-            }, {
-                type: HostBinding,
-                args: ['attr.height']
-            }], model: [{
-                type: Input,
-                args: ['model']
-            }, {
-                type: HostBinding,
-                args: ['attr.model']
-            }], gap: [{
-                type: Input,
-                args: ['gap']
-            }, {
-                type: HostBinding,
-                args: ['attr.gap']
-            }] } });
-
-class MatchaSkeletonModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaSkeletonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: MatchaSkeletonModule, declarations: [MatchaSkeletonComponent], imports: [CommonModule], exports: [MatchaSkeletonComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaSkeletonModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaSkeletonModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [MatchaSkeletonComponent],
-                    imports: [
-                        CommonModule
-                    ],
-                    exports: [MatchaSkeletonComponent],
-                }]
-        }] });
-
 class StepContentDirective {
     constructor(template) {
         this.template = template;
@@ -15660,5 +15746,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CopyButtonComponent, DEFAULT_CONFIG, INITIAL_CONFIG, MATCHA_MASK_CONFIG, MATCHA_OPTION_PARENT, MatchaAccordionComponent, MatchaAccordionContentComponent, MatchaAccordionHeaderComponent, MatchaAccordionItemComponent, MatchaAccordionModule, MatchaAutocompleteComponent, MatchaAutocompleteModule, MatchaAutocompleteTriggerDirective, MatchaAvatarComponent, MatchaAvatarModule, MatchaBreakpointObservableModule, MatchaBreakpointObserver, MatchaButtonComponent, MatchaButtonModule, MatchaButtonToggleComponent, MatchaButtonToggleModule, MatchaCardComponent, MatchaCardModule, MatchaCheckboxComponent, MatchaCheckboxModule, MatchaChipComponent, MatchaChipListComponent, MatchaChipModule, MatchaComponentsModule, MatchaDateComponent, MatchaDateModule, MatchaDateRangeComponent, MatchaDateRangeModule, MatchaDividerComponent, MatchaDividerModule, MatchaDragDirective, MatchaDragHandleDirective, MatchaDrawerComponent, MatchaDrawerContainerComponent, MatchaDrawerContentComponent, MatchaDrawerModule, MatchaDropListComponent, MatchaDropListModule, MatchaElevationDirective, MatchaElevationModule, MatchaErrorComponent, MatchaFormFieldComponent, MatchaFormFieldModule, MatchaGridComponent, MatchaGridModule, MatchaHighlightComponent, MatchaHighlightModule, MatchaHintTextComponent, MatchaHintTextModule, MatchaIconComponent, MatchaIconModule, MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent, MatchaInfiniteScrollModule, MatchaInputPhoneComponent, MatchaInputPhoneModule, MatchaLabelComponent, MatchaLazyloadComponent, MatchaLazyloadDataComponent, MatchaLazyloadModule, MatchaListComponent, MatchaListItemComponent, MatchaListModule, MatchaMaskApplierService, MatchaMaskCompatibleDirective, MatchaMaskModule, MatchaMaskPipe, MatchaMaskService, MatchaMasonryComponent, MatchaMasonryModule, MatchaMenuComponent, MatchaMenuItemDirective, MatchaMenuModule, MatchaMenuTriggerDirective, MatchaModalComponent, MatchaModalContentComponent, MatchaModalFooterComponent, MatchaModalHeaderComponent, MatchaModalModule, MatchaModalOptionsComponent, MatchaModalService, MatchaMsgBoxActionsComponent, MatchaMsgBoxComponent, MatchaMsgBoxModule, MatchaOptionComponent, MatchaOptionModule, MatchaOverlayService, MatchaPageLayoutComponent, MatchaPageLayoutModule, MatchaPaginatorComponent, MatchaPaginatorIntl, MatchaPaginatorModule, MatchaPanelComponent, MatchaPanelModule, MatchaProgressBarComponent, MatchaProgressBarModule, MatchaRadioComponent, MatchaRadioGroupComponent, MatchaRadioModule, MatchaRippleDirective, MatchaRippleModule, MatchaSelectComponent, MatchaSelectModule, MatchaSelectTriggerDirective, MatchaSkeletonComponent, MatchaSkeletonModule, MatchaSlideToggleComponent, MatchaSlideToggleModule, MatchaSliderComponent, MatchaSliderModule, MatchaSnackBarComponent, MatchaSnackBarModule, MatchaSnackBarService, MatchaSpinComponent, MatchaSpinModule, MatchaSpinnerComponent, MatchaSpinnerModule, MatchaStepperComponent, MatchaStepperContentComponent, MatchaStepperControllerComponent, MatchaStepperModule, MatchaStepperStateService, MatchaSubmenuTriggerDirective, MatchaTabItemComponent, MatchaTableComponent, MatchaTableModule, MatchaTabsComponent, MatchaTabsModule, MatchaTextEditorComponent, MatchaTextEditorModule, MatchaTimeComponent, MatchaTimeModule, MatchaTimeRangeComponent, MatchaTimeRangeModule, MatchaTitleComponent, MatchaTitleModule, MatchaToolbarButtonComponent, MatchaToolbarComponent, MatchaToolbarContentComponent, MatchaToolbarCustomButtonComponent, MatchaToolbarMainButtonComponent, MatchaToolbarModule, MatchaTooltipDirective, MatchaTooltipModule, NEW_CONFIG, NextStepDirective, PrevStepDirective, StepComponent, StepContentDirective, compatibleOptions, initialConfig, timeMasks, withoutValidation };
+export { CopyButtonComponent, DEFAULT_CONFIG, INITIAL_CONFIG, MATCHA_MASK_CONFIG, MATCHA_OPTION_PARENT, MatchaAccordionComponent, MatchaAccordionContentComponent, MatchaAccordionHeaderComponent, MatchaAccordionItemComponent, MatchaAccordionModule, MatchaAutocompleteComponent, MatchaAutocompleteModule, MatchaAutocompleteTriggerDirective, MatchaAvatarComponent, MatchaAvatarModule, MatchaBreakpointObservableModule, MatchaBreakpointObserver, MatchaButtonComponent, MatchaButtonModule, MatchaButtonToggleComponent, MatchaButtonToggleModule, MatchaCardComponent, MatchaCardModule, MatchaCheckboxComponent, MatchaCheckboxModule, MatchaChipComponent, MatchaChipListComponent, MatchaChipModule, MatchaComponentsModule, MatchaDateComponent, MatchaDateModule, MatchaDateRangeComponent, MatchaDateRangeModule, MatchaDividerComponent, MatchaDividerModule, MatchaDragDirective, MatchaDragHandleDirective, MatchaDrawerComponent, MatchaDrawerContainerComponent, MatchaDrawerContentComponent, MatchaDrawerModule, MatchaDropListComponent, MatchaDropListModule, MatchaElevationDirective, MatchaElevationModule, MatchaErrorComponent, MatchaFormFieldComponent, MatchaFormFieldModule, MatchaGridComponent, MatchaGridModule, MatchaHighlightComponent, MatchaHighlightModule, MatchaHintTextComponent, MatchaHintTextModule, MatchaIconComponent, MatchaIconModule, MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent, MatchaInfiniteScrollModule, MatchaInputPhoneComponent, MatchaInputPhoneModule, MatchaLabelComponent, MatchaLazyloadComponent, MatchaLazyloadDataComponent, MatchaLazyloadModule, MatchaListComponent, MatchaListItemComponent, MatchaListModule, MatchaMaskApplierService, MatchaMaskCompatibleDirective, MatchaMaskModule, MatchaMaskPipe, MatchaMaskService, MatchaMasonryComponent, MatchaMasonryModule, MatchaMenuComponent, MatchaMenuItemDirective, MatchaMenuModule, MatchaMenuTriggerDirective, MatchaModalComponent, MatchaModalContentComponent, MatchaModalFooterComponent, MatchaModalHeaderComponent, MatchaModalModule, MatchaModalOptionsComponent, MatchaModalService, MatchaMsgBoxActionsComponent, MatchaMsgBoxComponent, MatchaMsgBoxModule, MatchaOptionComponent, MatchaOptionModule, MatchaOverlayService, MatchaPageLayoutComponent, MatchaPageLayoutModule, MatchaPaginatorComponent, MatchaPaginatorIntl, MatchaPaginatorModule, MatchaPanelComponent, MatchaPanelModule, MatchaProgressBarComponent, MatchaProgressBarModule, MatchaRadioComponent, MatchaRadioGroupComponent, MatchaRadioModule, MatchaRippleDirective, MatchaRippleModule, MatchaSelectComponent, MatchaSelectModule, MatchaSelectTriggerDirective, MatchaSkeletonComponent, MatchaSkeletonModule, MatchaSlideToggleComponent, MatchaSlideToggleModule, MatchaSliderComponent, MatchaSliderModule, MatchaSnackBarComponent, MatchaSnackBarModule, MatchaSnackBarService, MatchaSpinComponent, MatchaSpinModule, MatchaSpinnerComponent, MatchaSpinnerModule, MatchaStepperComponent, MatchaStepperContentComponent, MatchaStepperControllerComponent, MatchaStepperModule, MatchaStepperStateService, MatchaSubmenuTriggerDirective, MatchaTabItemComponent, MatchaTableComponent, MatchaTableModule, MatchaTabsComponent, MatchaTabsModule, MatchaTextEditorComponent, MatchaTextEditorModule, MatchaTimeComponent, MatchaTimeModule, MatchaTimeRangeComponent, MatchaTimeRangeModule, MatchaTitleComponent, MatchaTitleModule, MatchaToolbarButtonComponent, MatchaToolbarComponent, MatchaToolbarContentComponent, MatchaToolbarCustomButtonComponent, MatchaToolbarMainButtonComponent, MatchaToolbarModule, MatchaTooltipDirective, MatchaTooltipModule, NEW_CONFIG, NextStepDirective, PrevStepDirective, StepComponent, StepContentDirective, buildButtonList, compatibleOptions, initialConfig, timeMasks, withoutValidation };
 //# sourceMappingURL=matcha-components.mjs.map