matcha-components 19.55.0 → 19.57.0

package/fesm2022/matcha-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, Component, ContentChildren, ElementRef, Renderer2, Inject, HostBinding, HostListener, ContentChild, Directive, forwardRef, NgModule } from '@angular/core';
+import { EventEmitter, Output, Input, Component, ContentChildren, ElementRef, Renderer2, HostBinding, Inject, HostListener, ContentChild, Directive, forwardRef, NgModule, createComponent, Injectable } from '@angular/core';
 import { animation, style, animate, trigger, transition, useAnimation, state, query, stagger, animateChild, sequence, group } from '@angular/animations';
 import { Subscription, Subject } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
@@ -639,6 +639,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
             }] } });
 
 class MatchaButtonComponent {
+    get colorAttr() {
+        return this.color;
+    }
     get basic() { return this._basic; }
     set basic(v) { this._basic = v === 'false' ? false : !!v; }
     get outline() { return this._outline; }
@@ -789,7 +792,7 @@ class MatchaButtonComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaButtonComponent, deps: [{ token: ElementRef }, { token: Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatchaButtonComponent, isStandalone: false, selector: "[matcha-button]", inputs: { size: "size", sizeXs: ["size-xs", "sizeXs"], sizeSm: ["size-sm", "sizeSm"], sizeMd: ["size-md", "sizeMd"], sizeLg: ["size-lg", "sizeLg"], sizeXl: ["size-xl", "sizeXl"], color: "color", basic: "basic", outline: "outline", alpha: "alpha", pill: "pill", link: "link", icon: "icon" }, usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatchaButtonComponent, isStandalone: false, selector: "[matcha-button]", inputs: { size: "size", sizeXs: ["size-xs", "sizeXs"], sizeSm: ["size-sm", "sizeSm"], sizeMd: ["size-md", "sizeMd"], sizeLg: ["size-lg", "sizeLg"], sizeXl: ["size-xl", "sizeXl"], color: "color", basic: "basic", outline: "outline", alpha: "alpha", pill: "pill", link: "link", icon: "icon" }, host: { properties: { "attr.color": "this.colorAttr" } }, usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaButtonComponent, decorators: [{
             type: Component,
@@ -821,6 +824,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
             }], color: [{
                 type: Input,
                 args: ['color']
+            }], colorAttr: [{
+                type: HostBinding,
+                args: ['attr.color']
             }], basic: [{
                 type: Input
             }], outline: [{
@@ -1247,11 +1253,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
 
 class MatchaModalContentComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaModalContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatchaModalContentComponent, isStandalone: false, selector: "matcha-modal-content", ngImport: i0, template: "\n<div class=\"py-24 pt-0 overflow-auto\" style=\"max-height: calc(100vh - 300px);\n\">\n    <div class=\"matcha-card-flat matcha-background-transparent p-0 flex-column--force\">\n        <div class=\"flex-col matcha-card-flat matcha-background-transparent px-24 py-0\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>\n", styles: [""] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatchaModalContentComponent, isStandalone: false, selector: "matcha-modal-content", ngImport: i0, template: "\n<div class=\"py-24 pt-0 overflow-auto\" style=\"max-height: calc(100vh - 300px);\n\">\n    <div class=\"matcha-card-flat matcha-background-transparent p-0 flex-column--force\">\n        <div class=\"flex-column matcha-card-flat matcha-background-transparent px-24 py-0\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>\n", styles: [""] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaModalContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-modal-content', standalone: false, template: "\n<div class=\"py-24 pt-0 overflow-auto\" style=\"max-height: calc(100vh - 300px);\n\">\n    <div class=\"matcha-card-flat matcha-background-transparent p-0 flex-column--force\">\n        <div class=\"flex-col matcha-card-flat matcha-background-transparent px-24 py-0\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>\n" }]
+            args: [{ selector: 'matcha-modal-content', standalone: false, template: "\n<div class=\"py-24 pt-0 overflow-auto\" style=\"max-height: calc(100vh - 300px);\n\">\n    <div class=\"matcha-card-flat matcha-background-transparent p-0 flex-column--force\">\n        <div class=\"flex-column matcha-card-flat matcha-background-transparent px-24 py-0\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>\n" }]
         }] });
 
 class MatchaModalHeaderComponent {
@@ -1285,11 +1291,11 @@ class MatchaModalFooterComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatchaModalFooterComponent, isStandalone: false, selector: "matcha-modal-footer", inputs: { buttonType: ["", "buttonType"] }, ngImport: i0, template: "<div class=\"matcha-section pb-16 px-16 pb-md-24 px-md-24\">\n    <matcha-divider></matcha-divider>\n    <div class=\"flex-column flex-sm-row w-100-p flex-space-between mt-16 mt-md-24 gap-16\">\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatchaDividerComponent, selector: "matcha-divider", inputs: ["gap", "gap-sm", "gap-md", "gap-lg", "gap-xl", "vertical"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatchaModalFooterComponent, isStandalone: false, selector: "matcha-modal-footer", inputs: { buttonType: ["", "buttonType"] }, ngImport: i0, template: "<div class=\"matcha-section pb-16 px-16 pb-md-24 px-md-24\">\n    <matcha-divider></matcha-divider>\n    <div class=\"flex-column flex-sm-row w-100-p flex-space-between gap-16\">\n        <div class=\"flex-column flex-sm-row w-100-p flex-space-between mt-16 mt-md-24 gap-16\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatchaDividerComponent, selector: "matcha-divider", inputs: ["gap", "gap-sm", "gap-md", "gap-lg", "gap-xl", "vertical"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaModalFooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-modal-footer', standalone: false, template: "<div class=\"matcha-section pb-16 px-16 pb-md-24 px-md-24\">\n    <matcha-divider></matcha-divider>\n    <div class=\"flex-column flex-sm-row w-100-p flex-space-between mt-16 mt-md-24 gap-16\">\n        <ng-content></ng-content>\n    </div>\n</div>\n" }]
+            args: [{ selector: 'matcha-modal-footer', standalone: false, template: "<div class=\"matcha-section pb-16 px-16 pb-md-24 px-md-24\">\n    <matcha-divider></matcha-divider>\n    <div class=\"flex-column flex-sm-row w-100-p flex-space-between gap-16\">\n        <div class=\"flex-column flex-sm-row w-100-p flex-space-between mt-16 mt-md-24 gap-16\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>\n" }]
         }], propDecorators: { buttonType: [{
                 type: Input,
                 args: ['']
@@ -1305,21 +1311,87 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
         }] });
 
 class MatchaModalComponent {
-    constructor() {
-        this.class = '';
+    get sizeAttr() {
+        return this.size;
+    }
+    get sizeAttrXs() {
+        return this.sizeXs;
+    }
+    get sizeAttrSm() {
+        return this.sizeSm;
+    }
+    get sizeAttrMd() {
+        return this.sizeMd;
+    }
+    get sizeAttrLg() {
+        return this.sizeLg;
+    }
+    get sizeAttrXl() {
+        return this.sizeXl;
     }
     get classes() {
-        const activeClasses = `background-surface radius-8 flex-column ${this.class}`;
+        const activeClasses = `matcha-modal flex-column elevation-8 ${this.class}`;
         return activeClasses;
     }
+    constructor() {
+        this.size = null;
+        this.sizeXs = null;
+        this.sizeSm = null;
+        this.sizeMd = null;
+        this.sizeLg = null;
+        this.sizeXl = null;
+        this.class = '';
+        this.hasBackdrop = true;
+        this.backdropClass = '';
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatchaModalComponent, isStandalone: false, selector: "matcha-modal", inputs: { class: "class" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<div [class]=\"classes\">\n    <ng-content></ng-content>\n</div>\n", styles: [""] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatchaModalComponent, isStandalone: false, selector: "matcha-modal", inputs: { size: "size", sizeXs: ["size-xs", "sizeXs"], sizeSm: ["size-sm", "sizeSm"], sizeMd: ["size-md", "sizeMd"], sizeLg: ["size-lg", "sizeLg"], sizeXl: ["size-xl", "sizeXl"], class: "class", hasBackdrop: "hasBackdrop", backdropClass: "backdropClass" }, host: { properties: { "attr.size": "this.sizeAttr", "attr.size-xs": "this.sizeAttrXs", "arrt.size-sm": "this.sizeAttrSm", "attr.size-md": "this.sizeAttrMd", "attr.size-lg": "this.sizeAttrLg", "attr.size-xl": "this.sizeAttrXl", "class": "this.classes" } }, ngImport: i0, template: "<div class=\"background-surface elevation-z-4 flex-column matcha-modal radius-8\">\n    <ng-content></ng-content>\n</div>", styles: [""] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-modal', standalone: false, template: "<div [class]=\"classes\">\n    <ng-content></ng-content>\n</div>\n" }]
-        }], propDecorators: { class: [{
+            args: [{ selector: 'matcha-modal', standalone: false, template: "<div class=\"background-surface elevation-z-4 flex-column matcha-modal radius-8\">\n    <ng-content></ng-content>\n</div>" }]
+        }], ctorParameters: () => [], propDecorators: { size: [{
+                type: Input,
+                args: ['size']
+            }], sizeXs: [{
+                type: Input,
+                args: ['size-xs']
+            }], sizeSm: [{
+                type: Input,
+                args: ['size-sm']
+            }], sizeMd: [{
+                type: Input,
+                args: ['size-md']
+            }], sizeLg: [{
+                type: Input,
+                args: ['size-lg']
+            }], sizeXl: [{
+                type: Input,
+                args: ['size-xl']
+            }], class: [{
+                type: Input
+            }], hasBackdrop: [{
+                type: Input
+            }], backdropClass: [{
                 type: Input
+            }], sizeAttr: [{
+                type: HostBinding,
+                args: ['attr.size']
+            }], sizeAttrXs: [{
+                type: HostBinding,
+                args: ['attr.size-xs']
+            }], sizeAttrSm: [{
+                type: HostBinding,
+                args: ['arrt.size-sm']
+            }], sizeAttrMd: [{
+                type: HostBinding,
+                args: ['attr.size-md']
+            }], sizeAttrLg: [{
+                type: HostBinding,
+                args: ['attr.size-lg']
+            }], sizeAttrXl: [{
+                type: HostBinding,
+                args: ['attr.size-xl']
             }], classes: [{
                 type: HostBinding,
                 args: ['class']
@@ -2367,6 +2439,174 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 }]
         }] });
 
+/**
+ * Serviço responsável pela implementação técnica do overlay e backdrop dos modais.
+ *
+ * Este serviço lida com a criação e gerenciamento do container do overlay,
+ * criação do backdrop e manipulação do DOM. É um serviço de baixo nível
+ * utilizado internamente pelo MatchaModalService.
+ *
+ * @example
+ * ```typescript
+ * constructor(private overlayService: MatchaOverlayService) {}
+ *
+ * createOverlay() {
+ *   this.overlayService.open(MyComponent);
+ * }
+ * ```
+ */
+class MatchaOverlayService {
+    constructor(appRef, injector, rendererFactory) {
+        this.appRef = appRef;
+        this.injector = injector;
+        this.rendererFactory = rendererFactory;
+        this.overlayContainer = null;
+        this.activeModal = null;
+        this.backdrop = null;
+        this.renderer = this.rendererFactory.createRenderer(null, null);
+    }
+    /**
+     * Cria o container do overlay se ainda não existir.
+     * O container é um elemento div que será usado para hospedar os modais.
+     *
+     * @private
+     */
+    createOverlayContainer() {
+        if (!this.overlayContainer) {
+            this.overlayContainer = this.renderer.createElement('div');
+            this.renderer.addClass(this.overlayContainer, 'matcha-overlay-container');
+            this.renderer.appendChild(document.body, this.overlayContainer);
+        }
+    }
+    /**
+     * Remove o container do overlay do DOM.
+     *
+     * @private
+     */
+    removeOverlayContainer() {
+        if (this.overlayContainer) {
+            this.renderer.removeChild(document.body, this.overlayContainer);
+            this.overlayContainer = null;
+        }
+    }
+    /**
+     * Cria o backdrop do modal se ainda não existir.
+     * O backdrop é um elemento div que cria o efeito de escurecimento
+     * por trás do modal.
+     *
+     * @private
+     */
+    createBackdrop() {
+        if (!this.backdrop) {
+            this.backdrop = this.renderer.createElement('div');
+            this.renderer.addClass(this.backdrop, 'matcha-modal-backdrop');
+            this.renderer.appendChild(document.body, this.backdrop);
+        }
+    }
+    /**
+     * Remove o backdrop do modal do DOM.
+     *
+     * @private
+     */
+    removeBackdrop() {
+        if (this.backdrop) {
+            this.renderer.removeChild(document.body, this.backdrop);
+            this.backdrop = null;
+        }
+    }
+    /**
+     * Abre um componente dentro de um modal.
+     *
+     * @param component - O componente que será exibido dentro do modal
+     * @param config - Configurações opcionais para o modal
+     * @returns Uma referência ao componente criado
+     *
+     * @example
+     * ```typescript
+     * const componentRef = this.overlayService.open(MyComponent, {
+     *   data: { id: 1 }
+     * });
+     * ```
+     */
+    open(component, config = {}) {
+        this.createOverlayContainer();
+        this.createBackdrop();
+        const componentRef = createComponent(component, {
+            environmentInjector: this.appRef.injector,
+            elementInjector: this.injector
+        });
+        const componentElement = componentRef.hostView.rootNodes[0];
+        this.renderer.appendChild(this.overlayContainer, componentElement);
+        this.appRef.attachView(componentRef.hostView);
+        this.activeModal = componentRef;
+        return componentRef;
+    }
+    /**
+     * Fecha o modal atualmente aberto e remove o backdrop e o container.
+     *
+     * @example
+     * ```typescript
+     * this.overlayService.close();
+     * ```
+     */
+    close() {
+        if (this.activeModal) {
+            this.appRef.detachView(this.activeModal.hostView);
+            this.activeModal.destroy();
+            this.activeModal = null;
+            this.removeBackdrop();
+            this.removeOverlayContainer();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaOverlayService, deps: [{ token: i0.ApplicationRef }, { token: i0.Injector }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaOverlayService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaOverlayService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: i0.Injector }, { type: i0.RendererFactory2 }] });
+
+class MatchaModalService {
+    constructor(overlayService) {
+        this.overlayService = overlayService;
+        this.afterCloseSubject = new Subject();
+        this.currentData = {};
+    }
+    open(component, data = {}) {
+        this.currentData = data;
+        const componentRef = this.overlayService.open(component, data);
+        // Injeta os dados no componente
+        componentRef.instance.data = data;
+        if (componentRef.instance.afterClose) {
+            componentRef.instance.afterClose.subscribe((result) => {
+                this.afterCloseSubject.next(result);
+            });
+        }
+        return {
+            componentRef,
+            afterClose: this.afterCloseSubject.asObservable()
+        };
+    }
+    close(result) {
+        this.afterCloseSubject.next(result);
+        this.overlayService.close();
+        this.currentData = {};
+    }
+    getData() {
+        return this.currentData;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaModalService, deps: [{ token: MatchaOverlayService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaModalService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaModalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: MatchaOverlayService }] });
+
 class MatchaModalModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: MatchaModalModule, declarations: [MatchaModalHeaderComponent,
@@ -2383,7 +2623,10 @@ class MatchaModalModule {
             MatchaModalFooterComponent,
             MatchaModalOptionsComponent,
             MatchaModalComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaModalModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatchaModalModule, providers: [
+            MatchaModalService,
+            MatchaOverlayService
+        ], imports: [CommonModule,
             MatchaIconModule,
             MatchaTitleModule,
             MatchaDividerModule,
@@ -2414,6 +2657,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                         MatchaModalFooterComponent,
                         MatchaModalOptionsComponent,
                         MatchaModalComponent
+                    ],
+                    providers: [
+                        MatchaModalService,
+                        MatchaOverlayService
                     ]
                 }]
         }] });