matcha-components 18.0.30 → 18.0.31

package/fesm2022/matcha-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, Input, ElementRef, Renderer2, Inject, HostListener, NgModule, Directive } from '@angular/core';
+import { Component, Input, EventEmitter, Output, ElementRef, Renderer2, Inject, HostListener, NgModule, Directive } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 
@@ -51,70 +51,110 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
                 type: Input
             }] } });
 
-class MatchaHeadlineComponent {
+class MatchaDividerComponent {
     constructor() {
-        this.bulletColor = 'accent';
-        this.loading = false;
+        this.gap = null;
+        this.gapSm = null;
+        this.gapMd = null;
+        this.gapLg = null;
+        this.gapXl = null;
     }
     get classes() {
-        const bullet = this.bulletColor ? `background-${this.bulletColor} min-h-24 h-24 max-h-24 max-w-8 w-8 min-w-8 d-inline-block position-relative mr-8 radius-8` : '';
-        const activeClasses = `${bullet} ${this.loading ? 'loading' : ''}`;
+        const gap = this.gap ? `my-${this.gap}` : '';
+        const gapSm = this.gapSm ? `my-sm-${this.gapSm}` : '';
+        const gapMd = this.gapMd ? `my-md-${this.gapMd}` : '';
+        const gapLg = this.gapLg ? `my-lg-${this.gapLg}` : '';
+        const gapXl = this.gapXl ? `my-xl-${this.gapXl}` : '';
+        let activeClasses = 'flex-column w-100-p bt-2 border-color-disabled';
+        activeClasses += gap ? ` ${gap}` : '';
+        activeClasses += gapSm ? ` ${gapSm}` : '';
+        activeClasses += gapMd ? ` ${gapMd}` : '';
+        activeClasses += gapLg ? ` ${gapLg}` : '';
+        activeClasses += gapXl ? ` ${gapXl}` : '';
         return activeClasses;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaHeadlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: MatchaHeadlineComponent, selector: "matcha-headline", inputs: { bulletColor: "bulletColor", loading: "loading" }, ngImport: i0, template: "<h4 class=\"lh-16 d-flex flex-align-center m-0 fw-900\"><span [class]=\"classes\"></span><ng-content></ng-content></h4>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: MatchaDividerComponent, selector: "matcha-divider", inputs: { gap: "gap", gapSm: ["gap-sm", "gapSm"], gapMd: ["gap-md", "gapMd"], gapLg: ["gap-lg", "gapLg"], gapXl: ["gap-xl", "gapXl"] }, ngImport: i0, template: "<div [class]=\"classes\"></div>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaHeadlineComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaDividerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-headline', template: "<h4 class=\"lh-16 d-flex flex-align-center m-0 fw-900\"><span [class]=\"classes\"></span><ng-content></ng-content></h4>\n" }]
-        }], propDecorators: { bulletColor: [{
-                type: Input
-            }], loading: [{
-                type: Input
+            args: [{ selector: 'matcha-divider', template: "<div [class]=\"classes\"></div>\n" }]
+        }], propDecorators: { gap: [{
+                type: Input,
+                args: ['gap']
+            }], gapSm: [{
+                type: Input,
+                args: ['gap-sm']
+            }], gapMd: [{
+                type: Input,
+                args: ['gap-md']
+            }], gapLg: [{
+                type: Input,
+                args: ['gap-lg']
+            }], gapXl: [{
+                type: Input,
+                args: ['gap-xl']
             }] } });
 
-class MatchaSubheadComponent {
+// matcha-title <matcha-title color="fg" level="1" loading="false" type="pill" icon="icon" (iconClick)="emitIconAction($event)"></matcha-title>
+class MatchaTitleComponent {
     constructor() {
-        this.bulletColor = 'accent';
+        this.color = null;
+        this.level = 1;
         this.loading = false;
+        this.type = 'pill';
+        this.icon = '';
+        this.iconClick = new EventEmitter();
+        this.levelClasses = {
+            1: 'fw-900 fs-12 lh-12 text-uppercase',
+            2: 'fw-900 fs-14 lh-16',
+            3: 'fw-900 fs-16 lh-18',
+            4: 'fw-900 fs-20 lh-22',
+            5: 'fw-900 fs-20 lh-22',
+            6: 'fw-900 fs-32 lh-32',
+            7: 'fw-900 fs-40 lh-40',
+        };
     }
-    get classes() {
-        const bullet = this.bulletColor ? `background-${this.bulletColor} min-h-20 h-20 max-h-20 max-w-8 w-8 min-w-8 d-inline-block position-relative mr-8 radius-8` : '';
-        const activeClasses = `${bullet} ${this.loading ? 'loading' : ''}`;
-        return activeClasses;
+    getTypes() {
+        const bullet = this.color ? `background-${this.color} ` : 'background-fg';
+        const icon = this.icon ? `i-matcha-${this.icon}` : '';
+        return this.type === 'pill' ? `min-h-24 h-24 max-h-24 max-w-8 w-8 min-w-8 position-relative mr-8 radius-8 ${bullet}` :
+            this.type === 'bullet' ? `min-h-8 h-8 max-h-8 max-w-8 w-8 min-w-8 position-relative mr-8 radius-8 ${this.color ? `background-${this.color}` : 'background-fg'}` :
+                this.type === 'icon' ? `position-relative mr-8 radius-8 ${icon} ${this.color ? `color-${this.color}` : 'color-placeholder'}` :
+                    this.type === 'none' ? `d-none--force` : '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaSubheadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: MatchaSubheadComponent, selector: "matcha-subhead", inputs: { bulletColor: "bulletColor", loading: "loading" }, ngImport: i0, template: "<h5 class=\"lh-16 d-flex flex-align-center m-0 fw-900\"><span [class]=\"classes\"></span><ng-content></ng-content></h5>\n", styles: [""] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaSubheadComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'matcha-subhead', template: "<h5 class=\"lh-16 d-flex flex-align-center m-0 fw-900\"><span [class]=\"classes\"></span><ng-content></ng-content></h5>\n" }]
-        }], propDecorators: { bulletColor: [{
-                type: Input
-            }], loading: [{
-                type: Input
-            }] } });
-
-class MatchaTitleComponent {
-    constructor() {
-        this.bulletColor = 'accent';
-        this.loading = false;
+    get signClasses() {
+        const activeClasses = `d-flex ${this.getTypes()} ${this.loading ? 'loading' : ''}`;
+        return activeClasses;
     }
-    get classes() {
-        const bullet = this.bulletColor ? `background-${this.bulletColor} min-h-16 h-16 max-h-16 max-w-8 w-8 min-w-8 d-inline-block position-relative mr-8 radius-8` : '';
-        const activeClasses = `${bullet} ${this.loading ? 'loading' : ''}`;
+    get textClasses() {
+        const classes = `d-inline-block position-relative mr-8 radius-8`;
+        const level = this.levelClasses[this.level] ? this.levelClasses[this.level] : '';
+        const activeClasses = `${classes}  ${level} ${this.loading ? 'loading' : ''}`;
         return activeClasses;
     }
+    emitIconAction() {
+        const data = { icon: this.icon };
+        this.iconClick.emit(data);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: MatchaTitleComponent, selector: "matcha-title", inputs: { bulletColor: "bulletColor", loading: "loading" }, ngImport: i0, template: "<h6 class=\"lh-24 d-flex flex-align-center m-0 text-uppercase fw-900\"><span [class]=\"classes\"></span><ng-content></ng-content>\n</h6>\n", styles: [""] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: MatchaTitleComponent, selector: "matcha-title", inputs: { color: "color", level: "level", loading: "loading", type: "type", icon: "icon" }, outputs: { iconClick: "iconClick" }, ngImport: i0, template: "<!-- <matcha-title level=\"1\" type=\"bullet\"></matcha-title> -->\n\n<div class=\"d-flex flex-align-center m-0\">\n    <span [class]=\"signClasses\" (click)=\"emitIconAction()\"></span>\n    <span [class]=\"textClasses\">\n        <ng-content></ng-content>\n    </span>\n</div>\n", styles: [""] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaTitleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-title', template: "<h6 class=\"lh-24 d-flex flex-align-center m-0 text-uppercase fw-900\"><span [class]=\"classes\"></span><ng-content></ng-content>\n</h6>\n" }]
-        }], propDecorators: { bulletColor: [{
+            args: [{ selector: 'matcha-title', template: "<!-- <matcha-title level=\"1\" type=\"bullet\"></matcha-title> -->\n\n<div class=\"d-flex flex-align-center m-0\">\n    <span [class]=\"signClasses\" (click)=\"emitIconAction()\"></span>\n    <span [class]=\"textClasses\">\n        <ng-content></ng-content>\n    </span>\n</div>\n" }]
+        }], propDecorators: { color: [{
+                type: Input
+            }], level: [{
                 type: Input
             }], loading: [{
                 type: Input
+            }], type: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], iconClick: [{
+                type: Output
             }] } });
 
 class MatchaIconComponent {
@@ -150,8 +190,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
             }], loading: [{
                 type: Input
             }] } });
-class MatchaCardFooter {
-}
 
 class MatchaGridComponent {
     getStringSplited(inputValue) {
@@ -336,6 +374,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
                 args: ['gap-xl']
             }] } });
 
+class MatchaModalContentComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaModalContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: MatchaModalContentComponent, selector: "matcha-modal-content", ngImport: i0, template: "\n<div class=\"py-24 pt-0 overflow-auto\">\n    <div class=\"matcha-card-flat matcha-background-transparent p-0 d-flex-column mb-24\">\n        <div class=\"d-flex-column matcha-card-flat matcha-background-transparent px-24 py-0\">\n            <ng-content></ng-content>\n            <!-- <h4 class=\"fw-700 my-24\">{{channel?.name}}</h4>\n            <div *ngIf=\"channel?.image\" class=\"container\">\n                <div\n                    class=\"w-100-p aspect-ratio-16x9 d-flex-column d-flex-space-between overflow-hidden position-relative matcha-background-disabled border-radius-8\">\n                    <div class=\"front-image d-flex-column h-100-p p-24\">\n                        <div\n                            class=\"position-absolute align-top align-left w-100-p aspect-ratio-16x9 d-flex-center-center\">\n                            <div class=\"position-absolute align-top align-left w-100-p aspect-ratio-16x9\" [ngStyle]=\"{\n                                    background: 'url(' + channel?.image + ') no-repeat center center / cover',\n                                    filter: 'blur(100px)'\n                                }\"></div>\n                            <div class=\"position-absolute align-top align-left w-100-p aspect-ratio-16x9\" [ngStyle]=\"{\n                                    background: 'url(' + channel?.image + ') no-repeat center center / cover'\n                                }\"></div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div *ngIf=\"!channel?.image\" class=\"container min-h-220 d-flex\">\n                <div class=\"w-100-p min-h-220 matcha-background-disabled border-radius-8\">\n                    <div class=\"front-image h-100-p p-24 d-flex-center-center\">\n                        <span class=\"i-matcha-gallery i-size-lg fs-72 lh-72 w-72 h-72 matcha-color-placeholder\"></span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"py-24\">\n                <span class=\"par-m matcha-color-placeholder\">\n                    <span [innerHTML]=\"channel.description ? getFormattedText(channel.description) : 'N\u00E3o dispon\u00EDvel'\"></span>\n                </span>\n            </div>\n            <collapsible-section class=\"flatten\" color=\"primary\" nameRef=\"advancedOptions\" title=\"Dados extras\"\n                [labelMore]=\"'ACTION.SEE_MORE' | translate\" [labelLess]=\"'ACTION.SEE_LESS' | translate\">\n                <div class=\"d-flex-column gap-16\">\n                    <span>&bull; Configura\u00E7\u00F5es do canal</span>\n                    <div class=\"matcha-card\">\n                        <div class=\"d-flex-space-between\">\n                            <span>Permitir o usu\u00E1rio compartilhar canal?</span>\n                            <span>{{channel.can_share ? 'Sim' : 'N\u00E3o'}}</span>\n                        </div>\n                    </div>\n\n                    <div class=\"matcha-card mb-24\">\n                        <div class=\"d-flex-space-between\">\n                            <span>Est\u00E1 ao vivo agora?</span>\n                            <span>{{ channel.is_live ? ('ACTION.YES' | translate) : ('ACTION.NO' | translate)}}</span>\n                        </div>\n                    </div>\n                </div>\n            </collapsible-section> -->\n        </div>\n    </div>\n</div>\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaModalContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'matcha-modal-content', template: "\n<div class=\"py-24 pt-0 overflow-auto\">\n    <div class=\"matcha-card-flat matcha-background-transparent p-0 d-flex-column mb-24\">\n        <div class=\"d-flex-column matcha-card-flat matcha-background-transparent px-24 py-0\">\n            <ng-content></ng-content>\n            <!-- <h4 class=\"fw-700 my-24\">{{channel?.name}}</h4>\n            <div *ngIf=\"channel?.image\" class=\"container\">\n                <div\n                    class=\"w-100-p aspect-ratio-16x9 d-flex-column d-flex-space-between overflow-hidden position-relative matcha-background-disabled border-radius-8\">\n                    <div class=\"front-image d-flex-column h-100-p p-24\">\n                        <div\n                            class=\"position-absolute align-top align-left w-100-p aspect-ratio-16x9 d-flex-center-center\">\n                            <div class=\"position-absolute align-top align-left w-100-p aspect-ratio-16x9\" [ngStyle]=\"{\n                                    background: 'url(' + channel?.image + ') no-repeat center center / cover',\n                                    filter: 'blur(100px)'\n                                }\"></div>\n                            <div class=\"position-absolute align-top align-left w-100-p aspect-ratio-16x9\" [ngStyle]=\"{\n                                    background: 'url(' + channel?.image + ') no-repeat center center / cover'\n                                }\"></div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div *ngIf=\"!channel?.image\" class=\"container min-h-220 d-flex\">\n                <div class=\"w-100-p min-h-220 matcha-background-disabled border-radius-8\">\n                    <div class=\"front-image h-100-p p-24 d-flex-center-center\">\n                        <span class=\"i-matcha-gallery i-size-lg fs-72 lh-72 w-72 h-72 matcha-color-placeholder\"></span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"py-24\">\n                <span class=\"par-m matcha-color-placeholder\">\n                    <span [innerHTML]=\"channel.description ? getFormattedText(channel.description) : 'N\u00E3o dispon\u00EDvel'\"></span>\n                </span>\n            </div>\n            <collapsible-section class=\"flatten\" color=\"primary\" nameRef=\"advancedOptions\" title=\"Dados extras\"\n                [labelMore]=\"'ACTION.SEE_MORE' | translate\" [labelLess]=\"'ACTION.SEE_LESS' | translate\">\n                <div class=\"d-flex-column gap-16\">\n                    <span>&bull; Configura\u00E7\u00F5es do canal</span>\n                    <div class=\"matcha-card\">\n                        <div class=\"d-flex-space-between\">\n                            <span>Permitir o usu\u00E1rio compartilhar canal?</span>\n                            <span>{{channel.can_share ? 'Sim' : 'N\u00E3o'}}</span>\n                        </div>\n                    </div>\n\n                    <div class=\"matcha-card mb-24\">\n                        <div class=\"d-flex-space-between\">\n                            <span>Est\u00E1 ao vivo agora?</span>\n                            <span>{{ channel.is_live ? ('ACTION.YES' | translate) : ('ACTION.NO' | translate)}}</span>\n                        </div>\n                    </div>\n                </div>\n            </collapsible-section> -->\n        </div>\n    </div>\n</div>\n" }]
+        }] });
+
+class MatchaModalHeaderComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: MatchaModalHeaderComponent, selector: "matcha-modal-header", ngImport: i0, template: "<!-- [@animate]=\"{ value: '*', params: { delay: '100ms' } }\" -->\n<!-- MATCHA CHECK -->\n<div class=\"matcha-section\">\n    <div class=\"d-flex flex-wrap flex-space-between mb-16 mb-sm-24\">\n        <div class=\"flex-space-between flex-align-center\">\n            <ng-content></ng-content>\n        </div>\n        <div class=\"flex-row flex-end gap-8\">\n            <ng-content select=\"matcha-modal-options\"></ng-content>\n        </div>\n    </div>\n    <matcha-divider></matcha-divider>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatchaDividerComponent, selector: "matcha-divider", inputs: ["gap", "gap-sm", "gap-md", "gap-lg", "gap-xl"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaModalHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'matcha-modal-header', template: "<!-- [@animate]=\"{ value: '*', params: { delay: '100ms' } }\" -->\n<!-- MATCHA CHECK -->\n<div class=\"matcha-section\">\n    <div class=\"d-flex flex-wrap flex-space-between mb-16 mb-sm-24\">\n        <div class=\"flex-space-between flex-align-center\">\n            <ng-content></ng-content>\n        </div>\n        <div class=\"flex-row flex-end gap-8\">\n            <ng-content select=\"matcha-modal-options\"></ng-content>\n        </div>\n    </div>\n    <matcha-divider></matcha-divider>\n</div>\n" }]
+        }] });
+
+class MatchaModalFooterComponent {
+    ngAfterViewInit() {
+        const modalFooter = document.querySelectorAll('matcha-modal-footer');
+        const buttons = modalFooter[0].querySelectorAll('.matcha-button');
+        buttons.forEach(button => {
+            button.classList.add('max-w-md-256');
+            button.classList.add('w-100-p');
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: MatchaModalFooterComponent, selector: "matcha-modal-footer", ngImport: i0, template: "<matcha-divider></matcha-divider>\n<div class=\"flex-column flex-sm-row w-100-p flex-space-between pt-16 pt-md-24 gap-16\">\n    <ng-content></ng-content>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatchaDividerComponent, selector: "matcha-divider", inputs: ["gap", "gap-sm", "gap-md", "gap-lg", "gap-xl"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaModalFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'matcha-modal-footer', template: "<matcha-divider></matcha-divider>\n<div class=\"flex-column flex-sm-row w-100-p flex-space-between pt-16 pt-md-24 gap-16\">\n    <ng-content></ng-content>\n</div>\n" }]
+        }] });
+
+class MatchaModalOptionsComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaModalOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: MatchaModalOptionsComponent, selector: "matcha-modal-options", ngImport: i0, template: "<div class=\"flex-row gap-8\">\n    <ng-content></ng-content>\n</div>\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaModalOptionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'matcha-modal-options', template: "<div class=\"flex-row gap-8\">\n    <ng-content></ng-content>\n</div>\n" }]
+        }] });
+
+class MatchaModalComponent {
+    constructor() {
+        this.elevation = 0;
+        this.class = '';
+        this.icon = '';
+        this.iconClick = new EventEmitter();
+    }
+    get classes() {
+        const elevation = `elevation-z-${this.elevation}`;
+        const activeClasses = `background-surface radius-8 p-16 p-md-24 ${elevation} ${this.class}`;
+        return activeClasses;
+    }
+    emitIconAction() {
+        const data = { icon: this.icon };
+        this.iconClick.emit(data);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: MatchaModalComponent, selector: "matcha-modal", inputs: { elevation: "elevation", class: "class", icon: "icon" }, outputs: { iconClick: "iconClick" }, ngImport: i0, template: "<!-- HOW TO USE:\n<page-header [title]=\"TITULO-AQU\" icon=\"ICONE-AQUI\" (iconClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-NO-ICONE-AQUI\">\n    <search-form (searchText)=\"searchText($event)\"></search-form>\n    <button-toggle-view>\n        BOT\u00C3O DE TOOGLE VIEW AQUI\n    </button-toggle-view>\n    <button-new>\n        BOT\u00C3O DE NOVO AQUI\n    </button-new>\n    QUALQUER OUTRA FUNCIONALIDADE AQUI\n</page-header>\n-->\n<!-- CONTENT HEADER -->\n<div [class]=\"classes\">\n    <ng-content></ng-content>\n</div>\n<!-- / CONTENT HEADER -->\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'matcha-modal', template: "<!-- HOW TO USE:\n<page-header [title]=\"TITULO-AQU\" icon=\"ICONE-AQUI\" (iconClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-NO-ICONE-AQUI\">\n    <search-form (searchText)=\"searchText($event)\"></search-form>\n    <button-toggle-view>\n        BOT\u00C3O DE TOOGLE VIEW AQUI\n    </button-toggle-view>\n    <button-new>\n        BOT\u00C3O DE NOVO AQUI\n    </button-new>\n    QUALQUER OUTRA FUNCIONALIDADE AQUI\n</page-header>\n-->\n<!-- CONTENT HEADER -->\n<div [class]=\"classes\">\n    <ng-content></ng-content>\n</div>\n<!-- / CONTENT HEADER -->\n" }]
+        }], propDecorators: { elevation: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], iconClick: [{
+                type: Output
+            }] } });
+
 class MatchaMenuComponent {
     constructor(_elementRef, _renderer) {
         this._elementRef = _elementRef;
@@ -387,6 +501,116 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
                 args: ['mouseleave', ['$event']]
             }] } });
 
+class MatchaIconModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MatchaIconModule, declarations: [MatchaIconComponent], imports: [CommonModule], exports: [MatchaIconComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaIconModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaIconModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [MatchaIconComponent],
+                    imports: [CommonModule],
+                    exports: [MatchaIconComponent],
+                }]
+        }] });
+
+class MatchaTitleDirective {
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+    }
+    ngOnInit() {
+        // Adiciona a classe cursor-pointer ao elemento se o output iconClick estiver presente
+        this.renderer.addClass(this.el.nativeElement, 'cursor-pointer');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaTitleDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: MatchaTitleDirective, selector: "[iconClick]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaTitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[iconClick]'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
+
+class MatchaTitleModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaTitleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MatchaTitleModule, declarations: [MatchaTitleComponent, MatchaTitleDirective], imports: [CommonModule], exports: [MatchaTitleComponent, MatchaTitleDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaTitleModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaTitleModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [MatchaTitleComponent, MatchaTitleDirective],
+                    imports: [CommonModule],
+                    exports: [MatchaTitleComponent, MatchaTitleDirective],
+                }]
+        }] });
+
+class MatchaDividerModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaDividerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MatchaDividerModule, declarations: [MatchaDividerComponent], imports: [CommonModule], exports: [MatchaDividerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaDividerModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaDividerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        MatchaDividerComponent
+                    ],
+                    imports: [CommonModule],
+                    exports: [
+                        MatchaDividerComponent
+                    ],
+                }]
+        }] });
+
+class MatchaModalModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MatchaModalModule, declarations: [MatchaModalHeaderComponent,
+            MatchaModalContentComponent,
+            MatchaModalFooterComponent,
+            MatchaModalOptionsComponent,
+            MatchaModalComponent], imports: [CommonModule,
+            MatchaIconModule,
+            MatchaTitleModule,
+            MatchaDividerModule], exports: [MatchaModalHeaderComponent,
+            MatchaModalContentComponent,
+            MatchaModalFooterComponent,
+            MatchaModalOptionsComponent,
+            MatchaModalComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaModalModule, imports: [CommonModule,
+            MatchaIconModule,
+            MatchaTitleModule,
+            MatchaDividerModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaModalModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        MatchaModalHeaderComponent,
+                        MatchaModalContentComponent,
+                        MatchaModalFooterComponent,
+                        MatchaModalOptionsComponent,
+                        MatchaModalComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        MatchaIconModule,
+                        MatchaTitleModule,
+                        MatchaDividerModule
+                    ],
+                    exports: [
+                        MatchaModalHeaderComponent,
+                        MatchaModalContentComponent,
+                        MatchaModalFooterComponent,
+                        MatchaModalOptionsComponent,
+                        MatchaModalComponent
+                    ]
+                }]
+        }] });
+
 class MatchaCardModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MatchaCardModule, declarations: [MatchaCardComponent], imports: [CommonModule], exports: [MatchaCardComponent] }); }
@@ -415,20 +639,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
                 }]
         }] });
 
-class MatchaHeadersModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaHeadersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MatchaHeadersModule, declarations: [MatchaTitleComponent, MatchaHeadlineComponent, MatchaSubheadComponent], imports: [CommonModule], exports: [MatchaTitleComponent, MatchaHeadlineComponent, MatchaSubheadComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaHeadersModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaHeadersModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [MatchaTitleComponent, MatchaHeadlineComponent, MatchaSubheadComponent],
-                    imports: [CommonModule],
-                    exports: [MatchaTitleComponent, MatchaHeadlineComponent, MatchaSubheadComponent],
-                }]
-        }] });
-
 class MatchaAutocompleteDirective {
     constructor(_elementRef, _renderer) {
         this._elementRef = _elementRef;
@@ -628,7 +838,7 @@ class MatchaButtonDirective {
     }
     ngOnInit() {
         this._renderer.addClass(this._elementRef.nativeElement, `matcha-button`);
-        this._setConfig();
+        this.setConfig();
         // Adicione o evento de clique apenas a elementos com a classe "matcha-button"
         const buttons = document.querySelectorAll('.matcha-button');
         buttons.forEach(button => {
@@ -637,9 +847,9 @@ class MatchaButtonDirective {
         });
     }
     ngOnChanges() {
-        this._setConfig();
+        this.setConfig();
     }
-    _setConfig() {
+    clearConfig() {
         // BG colors and FG contrast
         this._renderer.removeClass(this._elementRef.nativeElement, `${this._config.color}`);
         // FG colors only
@@ -654,29 +864,38 @@ class MatchaButtonDirective {
         this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-pill`);
         //icon
         this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-basic`);
-        // Adicione a classe correspondente ao novo tamanho (se houver)
-        if (this.size) {
-            this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-${this.size}`);
-            this._config.size = this.size;
-        }
-        if (this.color) {
-            this._renderer.addClass(this._elementRef.nativeElement, `${this.color}`);
-            this._config.color = this.color;
-        }
-        if (this.outline === true || this.outline === 'true') {
-            this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-outline`);
-            this._renderer.addClass(this._elementRef.nativeElement, `color-${this.color}`);
-        }
-        if (this.pill === true || this.pill === 'true') {
-            this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-pill`);
-        }
-        if (this.basic === true || this.basic === 'true') {
-            this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-basic`);
-            this._renderer.addClass(this._elementRef.nativeElement, `color-${this.color}`);
-        }
-        if (this.icon === true || this.icon === 'true') {
-            this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-icon`);
-        }
+    }
+    setConfig() {
+        this.clearConfig();
+        this.size ? this.setSize() : null;
+        this.color ? this.setColor() : null;
+        (this.outline === true || this.outline === 'true') ? this.setOutline() : null;
+        (this.pill === true || this.pill === 'true') ? this.setPill() : null;
+        (this.basic === true || this.basic === 'true') ? this.setBasic() : null;
+        (this.icon === true || this.icon === 'true') ? this.setIcon() : null;
+    }
+    setSize() {
+        this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-${this.size}`);
+        this._config.size = this.size;
+    }
+    setColor() {
+        this._renderer.addClass(this._elementRef.nativeElement, `${this.color}`);
+        this._config.color = this.color;
+    }
+    setOutline() {
+        this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-outline`);
+        this._renderer.addClass(this._elementRef.nativeElement, `color-${this.color}`);
+    }
+    setPill() {
+        this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-pill`);
+    }
+    setBasic() {
+        this._renderer.removeClass(this._elementRef.nativeElement, `${this._config.color}`);
+        this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-basic`);
+        this._renderer.addClass(this._elementRef.nativeElement, `color-${this.color}`);
+    }
+    setIcon() {
+        this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-icon`);
     }
     addRippleEffect(e) {
         var target = e.target;
@@ -711,8 +930,7 @@ class MatchaButtonDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaButtonDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[matcha-button]',
-                    standalone: false,
+                    selector: '[matcha-button]'
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef, decorators: [{
                     type: Inject,
@@ -884,37 +1102,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
                 }]
         }] });
 
-class MatchaDividerDirective {
-    constructor(_elementRef, _renderer) {
-        this._elementRef = _elementRef;
-        this._renderer = _renderer;
-        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
-        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-dialog');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaDividerDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: MatchaDividerDirective, selector: "[matchaDivider]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaDividerDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[matchaDivider]'
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
-
-class MatchaDividerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaDividerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MatchaDividerModule, declarations: [MatchaDividerDirective], imports: [CommonModule], exports: [MatchaDividerDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaDividerModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaDividerModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [MatchaDividerDirective],
-                    imports: [CommonModule],
-                    exports: [MatchaDividerDirective],
-                }]
-        }] });
-
 class MatchaElevationDirective {
     constructor(_elementRef, _renderer) {
         this._elementRef = _elementRef;
@@ -1023,20 +1210,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
                 }]
         }] });
 
-class MatchaIconModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MatchaIconModule, declarations: [MatchaIconComponent], imports: [CommonModule], exports: [MatchaIconComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaIconModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaIconModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [MatchaIconComponent],
-                    imports: [CommonModule],
-                    exports: [MatchaIconComponent],
-                }]
-        }] });
-
 class MatchaInputDirective {
     constructor(_elementRef, _renderer) {
         this._elementRef = _elementRef;
@@ -1497,6 +1670,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
                 }]
         }] });
 
+class MatchaStepperDirective {
+    constructor(_elementRef, _renderer) {
+        this._elementRef = _elementRef;
+        this._renderer = _renderer;
+        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
+        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-stepper');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaStepperDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: MatchaStepperDirective, selector: "[matchaStepper]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaStepperDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[matchaStepper]'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
+
+class MatchaStepperModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaStepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MatchaStepperModule, declarations: [MatchaStepperDirective], imports: [CommonModule], exports: [MatchaStepperDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaStepperModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaStepperModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [MatchaStepperDirective],
+                    imports: [CommonModule],
+                    exports: [MatchaStepperDirective],
+                }]
+        }] });
+
 class MatchaTableDirective {
     constructor(_elementRef, _renderer) {
         this._elementRef = _elementRef;
@@ -1644,8 +1848,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
 
 class MatchaComponentsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MatchaComponentsModule, declarations: [MatchaOverflowDraggableComponent], imports: [MatchaMasonryModule, MatchaCardModule, MatchaHeadersModule, MatchaAutocompleteModule, MatchaBadgeModule, MatchaTabsModule, MatchaBottomSheetModule, MatchaButtonToggleModule, MatchaButtonModule, MatchaCheckboxModule, MatchaChipsModule, MatchaDatepickerModule, MatchaDialogModule, MatchaDividerModule, MatchaElevationModule, MatchaExpansionModule, MatchaFormsModule, MatchaIconModule, MatchaInputModule, MatchaListModule, MatchaMenuModule, MatchaSidenavModule, MatchaPaginatorModule, MatchaProgressBarModule, MatchaProgressSpinnerModule, MatchaRadioButtonModule, MatchaSelectModule, MatchaSlideToggleModule, MatchaSliderModule, MatchaSnackBarModule, MatchaSortHeaderModule, MatchaTableModule, MatchaTabsModule, MatchaTooltipModule, MatchaTreeModule], exports: [MatchaMasonryModule, MatchaCardModule, MatchaHeadersModule, MatchaAutocompleteModule, MatchaBadgeModule, MatchaTabsModule, MatchaBottomSheetModule, MatchaButtonToggleModule, MatchaButtonModule, MatchaCheckboxModule, MatchaChipsModule, MatchaDatepickerModule, MatchaDialogModule, MatchaDividerModule, MatchaElevationModule, MatchaExpansionModule, MatchaFormsModule, MatchaIconModule, MatchaInputModule, MatchaListModule, MatchaMenuModule, MatchaSidenavModule, MatchaPaginatorModule, MatchaProgressBarModule, MatchaProgressSpinnerModule, MatchaRadioButtonModule, MatchaSelectModule, MatchaSlideToggleModule, MatchaSliderModule, MatchaSnackBarModule, MatchaSortHeaderModule, MatchaTableModule, MatchaTabsModule, MatchaTooltipModule, MatchaTreeModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaComponentsModule, imports: [MatchaMasonryModule, MatchaCardModule, MatchaHeadersModule, MatchaAutocompleteModule, MatchaBadgeModule, MatchaTabsModule, MatchaBottomSheetModule, MatchaButtonToggleModule, MatchaButtonModule, MatchaCheckboxModule, MatchaChipsModule, MatchaDatepickerModule, MatchaDialogModule, MatchaDividerModule, MatchaElevationModule, MatchaExpansionModule, MatchaFormsModule, MatchaIconModule, MatchaInputModule, MatchaListModule, MatchaMenuModule, MatchaSidenavModule, MatchaPaginatorModule, MatchaProgressBarModule, MatchaProgressSpinnerModule, MatchaRadioButtonModule, MatchaSelectModule, MatchaSlideToggleModule, MatchaSliderModule, MatchaSnackBarModule, MatchaSortHeaderModule, MatchaTableModule, MatchaTabsModule, MatchaTooltipModule, MatchaTreeModule, MatchaMasonryModule, MatchaCardModule, MatchaHeadersModule, MatchaAutocompleteModule, MatchaBadgeModule, MatchaTabsModule, MatchaBottomSheetModule, MatchaButtonToggleModule, MatchaButtonModule, MatchaCheckboxModule, MatchaChipsModule, MatchaDatepickerModule, MatchaDialogModule, MatchaDividerModule, MatchaElevationModule, MatchaExpansionModule, MatchaFormsModule, MatchaIconModule, MatchaInputModule, MatchaListModule, MatchaMenuModule, MatchaSidenavModule, MatchaPaginatorModule, MatchaProgressBarModule, MatchaProgressSpinnerModule, MatchaRadioButtonModule, MatchaSelectModule, MatchaSlideToggleModule, MatchaSliderModule, MatchaSnackBarModule, MatchaSortHeaderModule, MatchaTableModule, MatchaTabsModule, MatchaTooltipModule, MatchaTreeModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MatchaComponentsModule, declarations: [MatchaOverflowDraggableComponent], imports: [MatchaModalModule, MatchaMasonryModule, MatchaCardModule, MatchaTitleModule, MatchaAutocompleteModule, MatchaBadgeModule, MatchaTabsModule, MatchaBottomSheetModule, MatchaButtonToggleModule, MatchaButtonModule, MatchaCheckboxModule, MatchaChipsModule, MatchaDatepickerModule, MatchaDialogModule, MatchaDividerModule, MatchaElevationModule, MatchaExpansionModule, MatchaFormsModule, MatchaIconModule, MatchaInputModule, MatchaListModule, MatchaMenuModule, MatchaSidenavModule, MatchaPaginatorModule, MatchaProgressBarModule, MatchaProgressSpinnerModule, MatchaRadioButtonModule, MatchaSelectModule, MatchaSlideToggleModule, MatchaSliderModule, MatchaSnackBarModule, MatchaSortHeaderModule, MatchaStepperModule, MatchaTableModule, MatchaTabsModule, MatchaTooltipModule, MatchaTreeModule], exports: [MatchaModalModule, MatchaMasonryModule, MatchaCardModule, MatchaTitleModule, MatchaAutocompleteModule, MatchaBadgeModule, MatchaTabsModule, MatchaBottomSheetModule, MatchaButtonToggleModule, MatchaButtonModule, MatchaCheckboxModule, MatchaChipsModule, MatchaDatepickerModule, MatchaDialogModule, MatchaDividerModule, MatchaElevationModule, MatchaExpansionModule, MatchaFormsModule, MatchaIconModule, MatchaInputModule, MatchaListModule, MatchaMenuModule, MatchaSidenavModule, MatchaPaginatorModule, MatchaProgressBarModule, MatchaProgressSpinnerModule, MatchaRadioButtonModule, MatchaSelectModule, MatchaSlideToggleModule, MatchaSliderModule, MatchaSnackBarModule, MatchaSortHeaderModule, MatchaStepperModule, MatchaTableModule, MatchaTabsModule, MatchaTooltipModule, MatchaTreeModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaComponentsModule, imports: [MatchaModalModule, MatchaMasonryModule, MatchaCardModule, MatchaTitleModule, MatchaAutocompleteModule, MatchaBadgeModule, MatchaTabsModule, MatchaBottomSheetModule, MatchaButtonToggleModule, MatchaButtonModule, MatchaCheckboxModule, MatchaChipsModule, MatchaDatepickerModule, MatchaDialogModule, MatchaDividerModule, MatchaElevationModule, MatchaExpansionModule, MatchaFormsModule, MatchaIconModule, MatchaInputModule, MatchaListModule, MatchaMenuModule, MatchaSidenavModule, MatchaPaginatorModule, MatchaProgressBarModule, MatchaProgressSpinnerModule, MatchaRadioButtonModule, MatchaSelectModule, MatchaSlideToggleModule, MatchaSliderModule, MatchaSnackBarModule, MatchaSortHeaderModule, MatchaStepperModule, MatchaTableModule, MatchaTabsModule, MatchaTooltipModule, MatchaTreeModule, MatchaModalModule, MatchaMasonryModule, MatchaCardModule, MatchaTitleModule, MatchaAutocompleteModule, MatchaBadgeModule, MatchaTabsModule, MatchaBottomSheetModule, MatchaButtonToggleModule, MatchaButtonModule, MatchaCheckboxModule, MatchaChipsModule, MatchaDatepickerModule, MatchaDialogModule, MatchaDividerModule, MatchaElevationModule, MatchaExpansionModule, MatchaFormsModule, MatchaIconModule, MatchaInputModule, MatchaListModule, MatchaMenuModule, MatchaSidenavModule, MatchaPaginatorModule, MatchaProgressBarModule, MatchaProgressSpinnerModule, MatchaRadioButtonModule, MatchaSelectModule, MatchaSlideToggleModule, MatchaSliderModule, MatchaSnackBarModule, MatchaSortHeaderModule, MatchaStepperModule, MatchaTableModule, MatchaTabsModule, MatchaTooltipModule, MatchaTreeModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MatchaComponentsModule, decorators: [{
             type: NgModule,
@@ -1653,8 +1857,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
                     declarations: [
                         MatchaOverflowDraggableComponent
                     ],
-                    imports: [MatchaMasonryModule, MatchaCardModule, MatchaHeadersModule, MatchaAutocompleteModule, MatchaBadgeModule, MatchaTabsModule, MatchaBottomSheetModule, MatchaButtonToggleModule, MatchaButtonModule, MatchaCheckboxModule, MatchaChipsModule, MatchaDatepickerModule, MatchaDialogModule, MatchaDividerModule, MatchaElevationModule, MatchaExpansionModule, MatchaFormsModule, MatchaIconModule, MatchaInputModule, MatchaListModule, MatchaMenuModule, MatchaSidenavModule, MatchaPaginatorModule, MatchaProgressBarModule, MatchaProgressSpinnerModule, MatchaRadioButtonModule, MatchaSelectModule, MatchaSlideToggleModule, MatchaSliderModule, MatchaSnackBarModule, MatchaSortHeaderModule, MatchaTableModule, MatchaTabsModule, MatchaTooltipModule, MatchaTreeModule],
-                    exports: [MatchaMasonryModule, MatchaCardModule, MatchaHeadersModule, MatchaAutocompleteModule, MatchaBadgeModule, MatchaTabsModule, MatchaBottomSheetModule, MatchaButtonToggleModule, MatchaButtonModule, MatchaCheckboxModule, MatchaChipsModule, MatchaDatepickerModule, MatchaDialogModule, MatchaDividerModule, MatchaElevationModule, MatchaExpansionModule, MatchaFormsModule, MatchaIconModule, MatchaInputModule, MatchaListModule, MatchaMenuModule, MatchaSidenavModule, MatchaPaginatorModule, MatchaProgressBarModule, MatchaProgressSpinnerModule, MatchaRadioButtonModule, MatchaSelectModule, MatchaSlideToggleModule, MatchaSliderModule, MatchaSnackBarModule, MatchaSortHeaderModule, MatchaTableModule, MatchaTabsModule, MatchaTooltipModule, MatchaTreeModule],
+                    imports: [MatchaModalModule, MatchaMasonryModule, MatchaCardModule, MatchaTitleModule, MatchaAutocompleteModule, MatchaBadgeModule, MatchaTabsModule, MatchaBottomSheetModule, MatchaButtonToggleModule, MatchaButtonModule, MatchaCheckboxModule, MatchaChipsModule, MatchaDatepickerModule, MatchaDialogModule, MatchaDividerModule, MatchaElevationModule, MatchaExpansionModule, MatchaFormsModule, MatchaIconModule, MatchaInputModule, MatchaListModule, MatchaMenuModule, MatchaSidenavModule, MatchaPaginatorModule, MatchaProgressBarModule, MatchaProgressSpinnerModule, MatchaRadioButtonModule, MatchaSelectModule, MatchaSlideToggleModule, MatchaSliderModule, MatchaSnackBarModule, MatchaSortHeaderModule, MatchaStepperModule, MatchaTableModule, MatchaTabsModule, MatchaTooltipModule, MatchaTreeModule],
+                    exports: [MatchaModalModule, MatchaMasonryModule, MatchaCardModule, MatchaTitleModule, MatchaAutocompleteModule, MatchaBadgeModule, MatchaTabsModule, MatchaBottomSheetModule, MatchaButtonToggleModule, MatchaButtonModule, MatchaCheckboxModule, MatchaChipsModule, MatchaDatepickerModule, MatchaDialogModule, MatchaDividerModule, MatchaElevationModule, MatchaExpansionModule, MatchaFormsModule, MatchaIconModule, MatchaInputModule, MatchaListModule, MatchaMenuModule, MatchaSidenavModule, MatchaPaginatorModule, MatchaProgressBarModule, MatchaProgressSpinnerModule, MatchaRadioButtonModule, MatchaSelectModule, MatchaSlideToggleModule, MatchaSliderModule, MatchaSnackBarModule, MatchaSortHeaderModule, MatchaStepperModule, MatchaTableModule, MatchaTabsModule, MatchaTooltipModule, MatchaTreeModule],
                 }]
         }] });
 
@@ -1691,5 +1895,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { MatchaAutocompleteDirective, MatchaAutocompleteModule, MatchaAutocompleteOverviewDirective, MatchaBadgeDirective, MatchaBadgeModule, MatchaBottomSheetDirective, MatchaBottomSheetModule, MatchaButtonDirective, MatchaButtonModule, MatchaButtonToggleDirective, MatchaButtonToggleModule, MatchaCardComponent, MatchaCardFooter, MatchaCardModule, MatchaCheckboxDirective, MatchaCheckboxModule, MatchaChipsDirective, MatchaChipsModule, MatchaComponentsModule, MatchaDatepickerDirective, MatchaDatepickerModule, MatchaDialogDirective, MatchaDialogModule, MatchaDividerDirective, MatchaDividerModule, MatchaElevationDirective, MatchaElevationModule, MatchaExpansionDirective, MatchaExpansionModule, MatchaFormFieldDirective, MatchaFormsModule, MatchaGridComponent, MatchaGridModule, MatchaHeadersModule, MatchaHeadlineComponent, MatchaIconComponent, MatchaIconModule, MatchaInputDirective, MatchaInputModule, MatchaListDirective, MatchaListModule, MatchaMasonryComponent, MatchaMasonryModule, MatchaMenuComponent, MatchaMenuModule, MatchaMenuTriggerForDirective, MatchaPaginatorDirective, MatchaPaginatorModule, MatchaProgressBarDirective, MatchaProgressBarModule, MatchaProgressSpinnerDirective, MatchaProgressSpinnerModule, MatchaRadioButtonDirective, MatchaRadioButtonModule, MatchaSelectDirective, MatchaSelectModule, MatchaSidenavDirective, MatchaSidenavModule, MatchaSlideToggleDirective, MatchaSlideToggleModule, MatchaSliderDirective, MatchaSliderModule, MatchaSnackBarDirective, MatchaSnackBarModule, MatchaSortHeaderDirective, MatchaSortHeaderModule, MatchaSubheadComponent, MatchaTableDirective, MatchaTableModule, MatchaTabsDirective, MatchaTabsModule, MatchaTitleComponent, MatchaTooltipDirective, MatchaTooltipModule, MatchaTreeDirective, MatchaTreeModule };
+export { MatchaAutocompleteDirective, MatchaAutocompleteModule, MatchaAutocompleteOverviewDirective, MatchaBadgeDirective, MatchaBadgeModule, MatchaBottomSheetDirective, MatchaBottomSheetModule, MatchaButtonDirective, MatchaButtonModule, MatchaButtonToggleDirective, MatchaButtonToggleModule, MatchaCardComponent, MatchaCardModule, MatchaCheckboxDirective, MatchaCheckboxModule, MatchaChipsDirective, MatchaChipsModule, MatchaComponentsModule, MatchaDatepickerDirective, MatchaDatepickerModule, MatchaDialogDirective, MatchaDialogModule, MatchaDividerComponent, MatchaDividerModule, MatchaElevationDirective, MatchaElevationModule, MatchaExpansionDirective, MatchaExpansionModule, MatchaFormFieldDirective, MatchaFormsModule, MatchaGridComponent, MatchaGridModule, MatchaIconComponent, MatchaIconModule, MatchaInputDirective, MatchaInputModule, MatchaListDirective, MatchaListModule, MatchaMasonryComponent, MatchaMasonryModule, MatchaMenuComponent, MatchaMenuModule, MatchaMenuTriggerForDirective, MatchaModalComponent, MatchaModalContentComponent, MatchaModalFooterComponent, MatchaModalHeaderComponent, MatchaModalModule, MatchaModalOptionsComponent, MatchaPaginatorDirective, MatchaPaginatorModule, MatchaProgressBarDirective, MatchaProgressBarModule, MatchaProgressSpinnerDirective, MatchaProgressSpinnerModule, MatchaRadioButtonDirective, MatchaRadioButtonModule, MatchaSelectDirective, MatchaSelectModule, MatchaSidenavDirective, MatchaSidenavModule, MatchaSlideToggleDirective, MatchaSlideToggleModule, MatchaSliderDirective, MatchaSliderModule, MatchaSnackBarDirective, MatchaSnackBarModule, MatchaSortHeaderDirective, MatchaSortHeaderModule, MatchaStepperDirective, MatchaStepperModule, MatchaTableDirective, MatchaTableModule, MatchaTabsDirective, MatchaTabsModule, MatchaTitleComponent, MatchaTitleDirective, MatchaTitleModule, MatchaTooltipDirective, MatchaTooltipModule, MatchaTreeDirective, MatchaTreeModule };
 //# sourceMappingURL=matcha-components.mjs.map