matcha-components 20.264.0 → 20.267.0

package/fesm2022/matcha-components.mjs

@@ -3611,6 +3611,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
         }] });
 
 class MatchaCheckboxComponent {
+    get colorAttr() {
+        return this._color;
+    }
+    get color() {
+        return this._color;
+    }
+    set color(value) {
+        this._color = value || 'accent';
+    }
     get indeterminate() {
         return this._indeterminate;
     }
@@ -3623,6 +3632,9 @@ class MatchaCheckboxComponent {
             this.cdr.markForCheck();
         }
     }
+    get disabledAttr() {
+        return this._disabled ? '' : null;
+    }
     get disabled() {
         return this._disabled;
     }
@@ -3661,7 +3673,7 @@ class MatchaCheckboxComponent {
     }
     constructor(cdr) {
         this.cdr = cdr;
-        this.color = 'accent';
+        this._color = 'accent';
         this._indeterminate = false;
         this._disabled = false;
         this._checked = false;
@@ -3689,7 +3701,7 @@ class MatchaCheckboxComponent {
         this.cdr.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaCheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: MatchaCheckboxComponent, isStandalone: false, selector: "matcha-checkbox", inputs: { color: "color", indeterminate: "indeterminate", disabled: "disabled", checked: "checked" }, outputs: { checkedChange: "checkedChange", change: "change" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: MatchaCheckboxComponent, isStandalone: false, selector: "matcha-checkbox", inputs: { color: "color", indeterminate: "indeterminate", disabled: "disabled", checked: "checked" }, outputs: { checkedChange: "checkedChange", change: "change" }, host: { properties: { "attr.color": "this.colorAttr", "attr.disabled": "this.disabledAttr" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MatchaCheckboxComponent),
@@ -3709,10 +3721,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { inputElement: [{
                 type: ViewChild,
                 args: ['input', { static: true }]
+            }], colorAttr: [{
+                type: HostBinding,
+                args: ['attr.color']
             }], color: [{
                 type: Input
             }], indeterminate: [{
                 type: Input
+            }], disabledAttr: [{
+                type: HostBinding,
+                args: ['attr.disabled']
             }], disabled: [{
                 type: Input
             }], checked: [{
@@ -15595,6 +15613,570 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                 }]
         }] });
 
+class MatchaPageBuilderComponent {
+    set text(value) {
+        this._text = value;
+        if (this.isEditorInitialized && this.editor && value) {
+            this.editor.setComponents(value);
+        }
+    }
+    constructor(ngZone) {
+        this.ngZone = ngZone;
+        this.showControls = true;
+        this.onSave = new EventEmitter();
+        this.containerId = 'gjs-' + Math.random().toString(36).substring(2, 9);
+        this.isLoading = true;
+        this._text = '';
+        this.isEditorInitialized = false;
+    }
+    ngOnInit() { }
+    async ngAfterViewInit() {
+        // Roda fora da zona do Angular para evitar conflito do Zone.js com callbacks internos do GrapesJS
+        this.ngZone.runOutsideAngular(async () => {
+            try {
+                console.log('[PageBuilder] ▶ Iniciando carregamento...', { containerId: this.containerId });
+                // Helper para injetar scripts via URL
+                const injectScript = (id, url) => {
+                    return new Promise((resolve) => {
+                        const existingScript = document.getElementById(id);
+                        if (existingScript) {
+                            if (existingScript.hasAttribute('data-loaded')) {
+                                resolve();
+                                return;
+                            }
+                            existingScript.addEventListener('load', () => resolve());
+                            existingScript.addEventListener('error', () => resolve()); // Continua mesmo com erro
+                            return;
+                        }
+                        const script = document.createElement('script');
+                        script.type = 'text/javascript';
+                        script.id = id;
+                        script.src = url;
+                        script.onload = () => {
+                            script.setAttribute('data-loaded', 'true');
+                            resolve();
+                        };
+                        script.onerror = () => {
+                            console.warn(`[PageBuilder] ⚠ Falha ao carregar script opcional: ${id}`);
+                            resolve(); // NÃO rejeita, apenas avisa
+                        };
+                        document.head.appendChild(script);
+                    });
+                };
+                // Helper para injetar CSS via URL
+                const injectStyle = (id, url) => {
+                    return new Promise((resolve) => {
+                        if (document.getElementById(id)) {
+                            resolve();
+                            return;
+                        }
+                        const link = document.createElement('link');
+                        link.id = id;
+                        link.rel = 'stylesheet';
+                        link.href = url;
+                        link.onload = () => resolve();
+                        link.onerror = () => resolve(); // CSS não bloqueia mesmo se falhar
+                        document.head.appendChild(link);
+                    });
+                };
+                // Sem @latest — unpkg usa a última versão publicada por padrão
+                const CDN_BASE = 'https://unpkg.com/matcha-components/assets/page-builder';
+                const ASSETS_JS_PATH = `${CDN_BASE}/js`;
+                const ASSETS_CSS_PATH = `${CDN_BASE}/css`;
+                // 0. Carrega o CSS
+                await injectStyle('grapesjs-css', `${ASSETS_CSS_PATH}/grapes.min.css`);
+                await injectStyle('grapick-css', `${ASSETS_CSS_PATH}/grapick.min.css`);
+                // 1. Carrega o Core do GrapesJS
+                await injectScript('grapesjs-core', `${ASSETS_JS_PATH}/grapes.min.js`);
+                const grapesjs = window.grapesjs;
+                console.log('[PageBuilder] 🔍 window.grapesjs after load:', typeof grapesjs, !!grapesjs?.init);
+                if (!grapesjs || !grapesjs.init) {
+                    console.error('[PageBuilder] ❌ GrapesJS global não encontrado após injeção!');
+                    return;
+                }
+                // 2. Carrega todos os plugins (usando os nomes dos arquivos no CDN)
+                const pluginFiles = [
+                    'gjs-blocks-basic',
+                    'grapesjs-plugin-forms',
+                    'grapesjs-component-countdown',
+                    'grapesjs-plugin-export',
+                    'grapesjs-tabs',
+                    'grapesjs-custom-code',
+                    'grapesjs-touch',
+                    'grapesjs-parser-postcss',
+                    'grapesjs-tooltip',
+                    'grapesjs-tui-image-editor',
+                    'grapesjs-typed',
+                    'grapesjs-style-bg',
+                    'grapesjs-preset-webpage'
+                ];
+                for (const file of pluginFiles) {
+                    await injectScript(file, `${ASSETS_JS_PATH}/${file}.js`);
+                }
+                // 3. IDs dos plugins registrados internamente (conforme o demo funcional)
+                const pluginIds = [
+                    'gjs-blocks-basic',
+                    'grapesjs-plugin-forms',
+                    'grapesjs-component-countdown',
+                    'grapesjs-plugin-export',
+                    'grapesjs-tabs',
+                    'grapesjs-custom-code',
+                    'grapesjs-touch',
+                    'grapesjs-parser-postcss',
+                    'grapesjs-tooltip',
+                    'grapesjs-tui-image-editor',
+                    'grapesjs-typed',
+                    'grapesjs-style-bg',
+                    'grapesjs-preset-webpage'
+                ];
+                console.log('[PageBuilder] ✅ Scripts carregados. Inicializando GrapesJS...');
+                // 3. Inicializa o editor
+                this.editor = grapesjs.init({
+                    height: '100%',
+                    container: `#${this.containerId}`,
+                    fromElement: true, // Changed from false to true
+                    showOffsets: true,
+                    assetManager: {
+                        embedAsBase64: true,
+                    },
+                    selectorManager: { componentFirst: true },
+                    styleManager: {
+                        sectors: [
+                            {
+                                name: 'General',
+                                properties: [
+                                    {
+                                        extend: 'float',
+                                        type: 'radio',
+                                        default: 'none',
+                                        options: [
+                                            { value: 'none', className: 'fa fa-times' },
+                                            { value: 'left', className: 'fa fa-align-left' },
+                                            { value: 'right', className: 'fa fa-align-right' }
+                                        ],
+                                    },
+                                    'display',
+                                    { extend: 'position', type: 'select' },
+                                    'top',
+                                    'right',
+                                    'left',
+                                    'bottom',
+                                ],
+                            }, {
+                                name: 'Dimension',
+                                open: false,
+                                properties: [
+                                    'width',
+                                    {
+                                        id: 'flex-width',
+                                        type: 'integer',
+                                        name: 'Width',
+                                        units: ['px', '%'],
+                                        property: 'flex-basis',
+                                        toRequire: 1,
+                                    },
+                                    'height',
+                                    'max-width',
+                                    'min-height',
+                                    'margin',
+                                    'padding'
+                                ],
+                            }, {
+                                name: 'Typography',
+                                open: false,
+                                properties: [
+                                    'font-family',
+                                    'font-size',
+                                    'font-weight',
+                                    'letter-spacing',
+                                    'color',
+                                    'line-height',
+                                    {
+                                        extend: 'text-align',
+                                        options: [
+                                            { id: 'left', label: 'Left', className: 'fa fa-align-left' },
+                                            { id: 'center', label: 'Center', className: 'fa fa-align-center' },
+                                            { id: 'right', label: 'Right', className: 'fa fa-align-right' },
+                                            { id: 'justify', label: 'Justify', className: 'fa fa-align-justify' }
+                                        ],
+                                    },
+                                    {
+                                        property: 'text-decoration',
+                                        type: 'radio',
+                                        default: 'none',
+                                        options: [
+                                            { id: 'none', label: 'None', className: 'fa fa-times' },
+                                            { id: 'underline', label: 'underline', className: 'fa fa-underline' },
+                                            { id: 'line-through', label: 'Line-through', className: 'fa fa-strikethrough' }
+                                        ],
+                                    },
+                                    'text-shadow'
+                                ],
+                            }, {
+                                name: 'Decorations',
+                                open: false,
+                                properties: [
+                                    'opacity',
+                                    'border-radius',
+                                    'border',
+                                    'box-shadow',
+                                    'background', // { id: 'background-bg', property: 'background', type: 'bg' }
+                                ],
+                            }, {
+                                name: 'Extra',
+                                open: false,
+                                buildProps: [
+                                    'transition',
+                                    'perspective',
+                                    'transform'
+                                ],
+                            }, {
+                                name: 'Flex',
+                                open: false,
+                                properties: [{
+                                        name: 'Flex Container',
+                                        property: 'display',
+                                        type: 'select',
+                                        defaults: 'block',
+                                        list: [
+                                            { value: 'block', name: 'Disable' },
+                                            { value: 'flex', name: 'Enable' }
+                                        ],
+                                    }, {
+                                        name: 'Flex Parent',
+                                        property: 'label-parent-flex',
+                                        type: 'integer',
+                                    }, {
+                                        name: 'Direction',
+                                        property: 'flex-direction',
+                                        type: 'radio',
+                                        defaults: 'row',
+                                        list: [{
+                                                value: 'row',
+                                                name: 'Row',
+                                                className: 'icons-flex icon-dir-row',
+                                                title: 'Row',
+                                            }, {
+                                                value: 'row-reverse',
+                                                name: 'Row reverse',
+                                                className: 'icons-flex icon-dir-row-rev',
+                                                title: 'Row reverse',
+                                            }, {
+                                                value: 'column',
+                                                name: 'Column',
+                                                title: 'Column',
+                                                className: 'icons-flex icon-dir-col',
+                                            }, {
+                                                value: 'column-reverse',
+                                                name: 'Column reverse',
+                                                title: 'Column reverse',
+                                                className: 'icons-flex icon-dir-col-rev',
+                                            }],
+                                    }, {
+                                        name: 'Justify',
+                                        property: 'justify-content',
+                                        type: 'radio',
+                                        defaults: 'flex-start',
+                                        list: [{
+                                                value: 'flex-start',
+                                                className: 'icons-flex icon-just-start',
+                                                title: 'Start',
+                                            }, {
+                                                value: 'flex-end',
+                                                title: 'End',
+                                                className: 'icons-flex icon-just-end',
+                                            }, {
+                                                value: 'space-between',
+                                                title: 'Space between',
+                                                className: 'icons-flex icon-just-sp-bet',
+                                            }, {
+                                                value: 'space-around',
+                                                title: 'Space around',
+                                                className: 'icons-flex icon-just-sp-ar',
+                                            }, {
+                                                value: 'center',
+                                                title: 'Center',
+                                                className: 'icons-flex icon-just-sp-cent',
+                                            }],
+                                    }, {
+                                        name: 'Align',
+                                        property: 'align-items',
+                                        type: 'radio',
+                                        defaults: 'center',
+                                        list: [{
+                                                value: 'flex-start',
+                                                title: 'Start',
+                                                className: 'icons-flex icon-al-start',
+                                            }, {
+                                                value: 'flex-end',
+                                                title: 'End',
+                                                className: 'icons-flex icon-al-end',
+                                            }, {
+                                                value: 'stretch',
+                                                title: 'Stretch',
+                                                className: 'icons-flex icon-al-str',
+                                            }, {
+                                                value: 'center',
+                                                title: 'Center',
+                                                className: 'icons-flex icon-al-center',
+                                            }],
+                                    }, {
+                                        name: 'Flex Children',
+                                        property: 'label-parent-flex',
+                                        type: 'integer',
+                                    }, {
+                                        name: 'Order',
+                                        property: 'order',
+                                        type: 'integer',
+                                        defaults: 0,
+                                        min: 0
+                                    }, {
+                                        name: 'Flex',
+                                        property: 'flex',
+                                        type: 'composite',
+                                        properties: [{
+                                                name: 'Grow',
+                                                property: 'flex-grow',
+                                                type: 'integer',
+                                                defaults: 0,
+                                                min: 0
+                                            }, {
+                                                name: 'Shrink',
+                                                property: 'flex-shrink',
+                                                type: 'integer',
+                                                defaults: 0,
+                                                min: 0
+                                            }, {
+                                                name: 'Basis',
+                                                property: 'flex-basis',
+                                                type: 'integer',
+                                                units: ['px', '%', ''],
+                                                unit: '',
+                                                defaults: 'auto',
+                                            }],
+                                    }, {
+                                        name: 'Align',
+                                        property: 'align-self',
+                                        type: 'radio',
+                                        defaults: 'auto',
+                                        list: [{
+                                                value: 'auto',
+                                                name: 'Auto',
+                                            }, {
+                                                value: 'flex-start',
+                                                title: 'Start',
+                                                className: 'icons-flex icon-al-start',
+                                            }, {
+                                                value: 'flex-end',
+                                                title: 'End',
+                                                className: 'icons-flex icon-al-end',
+                                            }, {
+                                                value: 'stretch',
+                                                title: 'Stretch',
+                                                className: 'icons-flex icon-al-str',
+                                            }, {
+                                                value: 'center',
+                                                title: 'Center',
+                                                className: 'icons-flex icon-al-center',
+                                            }],
+                                    }]
+                            }
+                        ],
+                    },
+                    plugins: pluginIds,
+                    pluginsOpts: {
+                        'gjs-blocks-basic': { flexGrid: true },
+                        'grapesjs-tui-image-editor': {
+                            script: [
+                                // 'https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.7/fabric.min.js',
+                                'https://uicdn.toast.com/tui.code-snippet/v1.5.2/tui-code-snippet.min.js',
+                                'https://uicdn.toast.com/tui-color-picker/v2.2.7/tui-color-picker.min.js',
+                                'https://uicdn.toast.com/tui-image-editor/v3.15.2/tui-image-editor.min.js'
+                            ],
+                            style: [
+                                'https://uicdn.toast.com/tui-color-picker/v2.2.7/tui-color-picker.min.css',
+                                'https://uicdn.toast.com/tui-image-editor/v3.15.2/tui-image-editor.min.css',
+                            ],
+                        },
+                        'grapesjs-tabs': {
+                            tabsBlock: { category: 'Extra' }
+                        },
+                        'grapesjs-typed': {
+                            block: {
+                                category: 'Extra',
+                                content: {
+                                    type: 'typed',
+                                    'type-speed': 40,
+                                    strings: [
+                                        'Text row one',
+                                        'Text row two',
+                                        'Text row three',
+                                    ],
+                                }
+                            }
+                        },
+                        'grapesjs-preset-webpage': {
+                            showStylesOnChange: 0,
+                            modalImportTitle: 'Import Template',
+                            modalImportLabel: '<div style="margin-bottom: 10px; font-size: 13px;">Paste here your HTML/CSS and click Import</div>',
+                            modalImportContent: function (editor) {
+                                return editor.getHtml() + '<style>' + editor.getCss() + '</style>';
+                            },
+                        },
+                    },
+                });
+                const editor = this.editor;
+                editor.I18n.addMessages({
+                    en: {
+                        styleManager: {
+                            properties: {
+                                'background-repeat': 'Repeat',
+                                'background-position': 'Position',
+                                'background-attachment': 'Attachment',
+                                'background-size': 'Size',
+                            }
+                        },
+                    }
+                });
+                var pn = editor.Panels;
+                var modal = editor.Modal;
+                var cmdm = editor.Commands;
+                // Update canvas-clear command
+                cmdm.add('canvas-clear', function () {
+                    if (confirm('Are you sure to clean the canvas?')) {
+                        editor.runCommand('core:canvas-clear');
+                        setTimeout(function () { localStorage.clear(); }, 0);
+                    }
+                });
+                // Removemos os comandos referenciando infoContainer que não existe
+                // Add and beautify tooltips
+                [['sw-visibility', 'Show Borders'], ['preview', 'Preview'], ['fullscreen', 'Fullscreen'],
+                    ['export-template', 'Export'], ['undo', 'Undo'], ['redo', 'Redo'],
+                    ['gjs-open-import-webpage', 'Import'], ['canvas-clear', 'Clear canvas']]
+                    .forEach(function (item) {
+                    const btn = pn.getButton('options', item[0]);
+                    if (btn)
+                        btn.set('attributes', { title: item[1], 'data-tooltip-pos': 'bottom' });
+                });
+                [['open-sm', 'Style Manager'], ['open-layers', 'Layers'], ['open-blocks', 'Blocks']]
+                    .forEach(function (item) {
+                    const btn = pn.getButton('views', item[0]);
+                    if (btn)
+                        btn.set('attributes', { title: item[1], 'data-tooltip-pos': 'bottom' });
+                });
+                // Do stuff on load
+                editor.on('load', () => {
+                    var $ = grapesjs.$;
+                    // Show borders by default
+                    pn.getButton('options', 'sw-visibility').set('active', 1);
+                    // Show logo with the version
+                    // Load and show settings and style manager
+                    var openTmBtn = pn.getButton('views', 'open-tm');
+                    openTmBtn && openTmBtn.set('active', 1);
+                    var openSm = pn.getButton('views', 'open-sm');
+                    openSm && openSm.set('active', 1);
+                    // Remove trait view
+                    pn.removeButton('views', 'open-tm');
+                    // Add Settings Sector
+                    const traitsSectorEl = document.createElement('div');
+                    traitsSectorEl.className = 'gjs-sm-sector no-select';
+                    traitsSectorEl.innerHTML =
+                        '<div class="gjs-sm-sector-title"><span class="icon-settings fa fa-cog"></span> <span class="gjs-sm-sector-label">Settings</span></div>' +
+                            '<div class="gjs-sm-properties" style="display: none;"></div>';
+                    const traitsProps = traitsSectorEl.querySelector('.gjs-sm-properties');
+                    const gjsTrtTraits = document.querySelector('.gjs-trt-traits');
+                    if (gjsTrtTraits && traitsProps) {
+                        traitsProps.appendChild(gjsTrtTraits);
+                    }
+                    const smSectors = document.querySelector('.gjs-sm-sectors');
+                    if (smSectors) {
+                        smSectors.parentNode?.insertBefore(traitsSectorEl, smSectors);
+                    }
+                    const sectorTitle = traitsSectorEl.querySelector('.gjs-sm-sector-title');
+                    if (sectorTitle && traitsProps) {
+                        sectorTitle.addEventListener('click', function () {
+                            const hidden = traitsProps.style.display === 'none';
+                            traitsProps.style.display = hidden ? 'block' : 'none';
+                        });
+                    }
+                    // Open block manager
+                    var openBlocksBtn = editor.Panels.getButton('views', 'open-blocks');
+                    openBlocksBtn && openBlocksBtn.set('active', 1);
+                    editor.on('component:selected', (a) => {
+                        const btnOpenCode = editor.Panels.getButton('views', 'code-editor');
+                        if (!btnOpenCode.active) {
+                            const openSmBtn = editor.Panels.getButton('views', 'open-sm');
+                            openSmBtn.set('active', true);
+                        }
+                    });
+                    this.isEditorInitialized = true;
+                    if (this._text) {
+                        this.editor.setComponents(this._text);
+                    }
+                    this.ngZone.run(() => { this.isLoading = false; });
+                });
+                // Se o evento 'load' demorar, podemos tentar setar os componentes se já estiver inicializado
+                if (this.editor && !this.isEditorInitialized && this._text) {
+                    this.editor.setComponents(this._text);
+                }
+            }
+            catch (error) {
+                console.error('[PageBuilder] ❌ Erro ao inicializar o GrapesJS:', error);
+            }
+        }); // fim runOutsideAngular
+    }
+    save() {
+        if (!this.editor)
+            return;
+        const html = this.editor.getHtml();
+        const css = this.editor.getCss();
+        const combinedOutput = `<style>${css}</style>${html}`;
+        this.onSave.emit(combinedOutput);
+    }
+    ngOnDestroy() {
+        if (this.editor) {
+            this.editor.destroy();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaPageBuilderComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: MatchaPageBuilderComponent, isStandalone: false, selector: "matcha-page-builder", inputs: { showControls: "showControls", text: "text" }, outputs: { onSave: "onSave" }, viewQueries: [{ propertyName: "gjsContainer", first: true, predicate: ["gjsContainer"], descendants: true }], ngImport: i0, template: "<div class=\"matcha-page-builder\">\n    <matcha-spinner *ngIf=\"isLoading\"></matcha-spinner>\n    <div class=\"editor-shell\" [style.display]=\"isLoading ? 'none' : 'block'\">\n        <div [id]=\"containerId\"></div>\n    </div>\n    <div class=\"editor-controls\" *ngIf=\"showControls && !isLoading\">\n        <button matcha-button (click)=\"save()\">Salvar</button>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatchaButtonComponent, selector: "[matcha-button]", inputs: ["size", "size-xs", "size-sm", "size-md", "size-lg", "size-xl", "gap", "color", "basic", "outline", "alpha", "pill", "link", "icon", "badge"] }, { kind: "component", type: MatchaSpinnerComponent, selector: "matcha-spinner", inputs: ["progress", "color", "size", "size-xs", "size-sm", "size-md", "size-lg", "size-xl"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaPageBuilderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'matcha-page-builder', encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"matcha-page-builder\">\n    <matcha-spinner *ngIf=\"isLoading\"></matcha-spinner>\n    <div class=\"editor-shell\" [style.display]=\"isLoading ? 'none' : 'block'\">\n        <div [id]=\"containerId\"></div>\n    </div>\n    <div class=\"editor-controls\" *ngIf=\"showControls && !isLoading\">\n        <button matcha-button (click)=\"save()\">Salvar</button>\n    </div>\n</div>" }]
+        }], ctorParameters: () => [{ type: i0.NgZone }], propDecorators: { gjsContainer: [{
+                type: ViewChild,
+                args: ['gjsContainer', { static: false }]
+            }], showControls: [{
+                type: Input
+            }], onSave: [{
+                type: Output
+            }], text: [{
+                type: Input
+            }] } });
+
+class MatchaPageBuilderModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaPageBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: MatchaPageBuilderModule, declarations: [MatchaPageBuilderComponent], imports: [CommonModule,
+            MatchaButtonModule,
+            MatchaSpinnerModule], exports: [MatchaPageBuilderComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaPageBuilderModule, imports: [CommonModule,
+            MatchaButtonModule,
+            MatchaSpinnerModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaPageBuilderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [MatchaPageBuilderComponent],
+                    imports: [
+                        CommonModule,
+                        MatchaButtonModule,
+                        MatchaSpinnerModule,
+                    ],
+                    exports: [MatchaPageBuilderComponent]
+                }]
+        }] });
+
 class StepContentDirective {
     constructor(template) {
         this.template = template;
@@ -15967,5 +16549,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CopyButtonComponent, 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, MatchaDropListService, MatchaDropZoneDirective, 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, buildSunEditorConfig, compatibleOptions, initialConfig, timeMasks, withoutValidation };
+export { CopyButtonComponent, 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, MatchaDropListService, MatchaDropZoneDirective, 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, MatchaPageBuilderComponent, MatchaPageBuilderModule, 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, buildSunEditorConfig, compatibleOptions, initialConfig, timeMasks, withoutValidation };
 //# sourceMappingURL=matcha-components.mjs.map