matcha-components 20.265.0 → 20.267.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/matcha-components.mjs +565 -1
- package/fesm2022/matcha-components.mjs.map +1 -1
- package/index.d.ts +28 -2
- package/package.json +1 -1
|
@@ -15613,6 +15613,570 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
|
|
|
15613
15613
|
}]
|
|
15614
15614
|
}] });
|
|
15615
15615
|
|
|
15616
|
+
class MatchaPageBuilderComponent {
|
|
15617
|
+
set text(value) {
|
|
15618
|
+
this._text = value;
|
|
15619
|
+
if (this.isEditorInitialized && this.editor && value) {
|
|
15620
|
+
this.editor.setComponents(value);
|
|
15621
|
+
}
|
|
15622
|
+
}
|
|
15623
|
+
constructor(ngZone) {
|
|
15624
|
+
this.ngZone = ngZone;
|
|
15625
|
+
this.showControls = true;
|
|
15626
|
+
this.onSave = new EventEmitter();
|
|
15627
|
+
this.containerId = 'gjs-' + Math.random().toString(36).substring(2, 9);
|
|
15628
|
+
this.isLoading = true;
|
|
15629
|
+
this._text = '';
|
|
15630
|
+
this.isEditorInitialized = false;
|
|
15631
|
+
}
|
|
15632
|
+
ngOnInit() { }
|
|
15633
|
+
async ngAfterViewInit() {
|
|
15634
|
+
// Roda fora da zona do Angular para evitar conflito do Zone.js com callbacks internos do GrapesJS
|
|
15635
|
+
this.ngZone.runOutsideAngular(async () => {
|
|
15636
|
+
try {
|
|
15637
|
+
console.log('[PageBuilder] ▶ Iniciando carregamento...', { containerId: this.containerId });
|
|
15638
|
+
// Helper para injetar scripts via URL
|
|
15639
|
+
const injectScript = (id, url) => {
|
|
15640
|
+
return new Promise((resolve) => {
|
|
15641
|
+
const existingScript = document.getElementById(id);
|
|
15642
|
+
if (existingScript) {
|
|
15643
|
+
if (existingScript.hasAttribute('data-loaded')) {
|
|
15644
|
+
resolve();
|
|
15645
|
+
return;
|
|
15646
|
+
}
|
|
15647
|
+
existingScript.addEventListener('load', () => resolve());
|
|
15648
|
+
existingScript.addEventListener('error', () => resolve()); // Continua mesmo com erro
|
|
15649
|
+
return;
|
|
15650
|
+
}
|
|
15651
|
+
const script = document.createElement('script');
|
|
15652
|
+
script.type = 'text/javascript';
|
|
15653
|
+
script.id = id;
|
|
15654
|
+
script.src = url;
|
|
15655
|
+
script.onload = () => {
|
|
15656
|
+
script.setAttribute('data-loaded', 'true');
|
|
15657
|
+
resolve();
|
|
15658
|
+
};
|
|
15659
|
+
script.onerror = () => {
|
|
15660
|
+
console.warn(`[PageBuilder] ⚠ Falha ao carregar script opcional: ${id}`);
|
|
15661
|
+
resolve(); // NÃO rejeita, apenas avisa
|
|
15662
|
+
};
|
|
15663
|
+
document.head.appendChild(script);
|
|
15664
|
+
});
|
|
15665
|
+
};
|
|
15666
|
+
// Helper para injetar CSS via URL
|
|
15667
|
+
const injectStyle = (id, url) => {
|
|
15668
|
+
return new Promise((resolve) => {
|
|
15669
|
+
if (document.getElementById(id)) {
|
|
15670
|
+
resolve();
|
|
15671
|
+
return;
|
|
15672
|
+
}
|
|
15673
|
+
const link = document.createElement('link');
|
|
15674
|
+
link.id = id;
|
|
15675
|
+
link.rel = 'stylesheet';
|
|
15676
|
+
link.href = url;
|
|
15677
|
+
link.onload = () => resolve();
|
|
15678
|
+
link.onerror = () => resolve(); // CSS não bloqueia mesmo se falhar
|
|
15679
|
+
document.head.appendChild(link);
|
|
15680
|
+
});
|
|
15681
|
+
};
|
|
15682
|
+
// Sem @latest — unpkg usa a última versão publicada por padrão
|
|
15683
|
+
const CDN_BASE = 'https://unpkg.com/matcha-components/assets/page-builder';
|
|
15684
|
+
const ASSETS_JS_PATH = `${CDN_BASE}/js`;
|
|
15685
|
+
const ASSETS_CSS_PATH = `${CDN_BASE}/css`;
|
|
15686
|
+
// 0. Carrega o CSS
|
|
15687
|
+
await injectStyle('grapesjs-css', `${ASSETS_CSS_PATH}/grapes.min.css`);
|
|
15688
|
+
await injectStyle('grapick-css', `${ASSETS_CSS_PATH}/grapick.min.css`);
|
|
15689
|
+
// 1. Carrega o Core do GrapesJS
|
|
15690
|
+
await injectScript('grapesjs-core', `${ASSETS_JS_PATH}/grapes.min.js`);
|
|
15691
|
+
const grapesjs = window.grapesjs;
|
|
15692
|
+
console.log('[PageBuilder] 🔍 window.grapesjs after load:', typeof grapesjs, !!grapesjs?.init);
|
|
15693
|
+
if (!grapesjs || !grapesjs.init) {
|
|
15694
|
+
console.error('[PageBuilder] ❌ GrapesJS global não encontrado após injeção!');
|
|
15695
|
+
return;
|
|
15696
|
+
}
|
|
15697
|
+
// 2. Carrega todos os plugins (usando os nomes dos arquivos no CDN)
|
|
15698
|
+
const pluginFiles = [
|
|
15699
|
+
'gjs-blocks-basic',
|
|
15700
|
+
'grapesjs-plugin-forms',
|
|
15701
|
+
'grapesjs-component-countdown',
|
|
15702
|
+
'grapesjs-plugin-export',
|
|
15703
|
+
'grapesjs-tabs',
|
|
15704
|
+
'grapesjs-custom-code',
|
|
15705
|
+
'grapesjs-touch',
|
|
15706
|
+
'grapesjs-parser-postcss',
|
|
15707
|
+
'grapesjs-tooltip',
|
|
15708
|
+
'grapesjs-tui-image-editor',
|
|
15709
|
+
'grapesjs-typed',
|
|
15710
|
+
'grapesjs-style-bg',
|
|
15711
|
+
'grapesjs-preset-webpage'
|
|
15712
|
+
];
|
|
15713
|
+
for (const file of pluginFiles) {
|
|
15714
|
+
await injectScript(file, `${ASSETS_JS_PATH}/${file}.js`);
|
|
15715
|
+
}
|
|
15716
|
+
// 3. IDs dos plugins registrados internamente (conforme o demo funcional)
|
|
15717
|
+
const pluginIds = [
|
|
15718
|
+
'gjs-blocks-basic',
|
|
15719
|
+
'grapesjs-plugin-forms',
|
|
15720
|
+
'grapesjs-component-countdown',
|
|
15721
|
+
'grapesjs-plugin-export',
|
|
15722
|
+
'grapesjs-tabs',
|
|
15723
|
+
'grapesjs-custom-code',
|
|
15724
|
+
'grapesjs-touch',
|
|
15725
|
+
'grapesjs-parser-postcss',
|
|
15726
|
+
'grapesjs-tooltip',
|
|
15727
|
+
'grapesjs-tui-image-editor',
|
|
15728
|
+
'grapesjs-typed',
|
|
15729
|
+
'grapesjs-style-bg',
|
|
15730
|
+
'grapesjs-preset-webpage'
|
|
15731
|
+
];
|
|
15732
|
+
console.log('[PageBuilder] ✅ Scripts carregados. Inicializando GrapesJS...');
|
|
15733
|
+
// 3. Inicializa o editor
|
|
15734
|
+
this.editor = grapesjs.init({
|
|
15735
|
+
height: '100%',
|
|
15736
|
+
container: `#${this.containerId}`,
|
|
15737
|
+
fromElement: true, // Changed from false to true
|
|
15738
|
+
showOffsets: true,
|
|
15739
|
+
assetManager: {
|
|
15740
|
+
embedAsBase64: true,
|
|
15741
|
+
},
|
|
15742
|
+
selectorManager: { componentFirst: true },
|
|
15743
|
+
styleManager: {
|
|
15744
|
+
sectors: [
|
|
15745
|
+
{
|
|
15746
|
+
name: 'General',
|
|
15747
|
+
properties: [
|
|
15748
|
+
{
|
|
15749
|
+
extend: 'float',
|
|
15750
|
+
type: 'radio',
|
|
15751
|
+
default: 'none',
|
|
15752
|
+
options: [
|
|
15753
|
+
{ value: 'none', className: 'fa fa-times' },
|
|
15754
|
+
{ value: 'left', className: 'fa fa-align-left' },
|
|
15755
|
+
{ value: 'right', className: 'fa fa-align-right' }
|
|
15756
|
+
],
|
|
15757
|
+
},
|
|
15758
|
+
'display',
|
|
15759
|
+
{ extend: 'position', type: 'select' },
|
|
15760
|
+
'top',
|
|
15761
|
+
'right',
|
|
15762
|
+
'left',
|
|
15763
|
+
'bottom',
|
|
15764
|
+
],
|
|
15765
|
+
}, {
|
|
15766
|
+
name: 'Dimension',
|
|
15767
|
+
open: false,
|
|
15768
|
+
properties: [
|
|
15769
|
+
'width',
|
|
15770
|
+
{
|
|
15771
|
+
id: 'flex-width',
|
|
15772
|
+
type: 'integer',
|
|
15773
|
+
name: 'Width',
|
|
15774
|
+
units: ['px', '%'],
|
|
15775
|
+
property: 'flex-basis',
|
|
15776
|
+
toRequire: 1,
|
|
15777
|
+
},
|
|
15778
|
+
'height',
|
|
15779
|
+
'max-width',
|
|
15780
|
+
'min-height',
|
|
15781
|
+
'margin',
|
|
15782
|
+
'padding'
|
|
15783
|
+
],
|
|
15784
|
+
}, {
|
|
15785
|
+
name: 'Typography',
|
|
15786
|
+
open: false,
|
|
15787
|
+
properties: [
|
|
15788
|
+
'font-family',
|
|
15789
|
+
'font-size',
|
|
15790
|
+
'font-weight',
|
|
15791
|
+
'letter-spacing',
|
|
15792
|
+
'color',
|
|
15793
|
+
'line-height',
|
|
15794
|
+
{
|
|
15795
|
+
extend: 'text-align',
|
|
15796
|
+
options: [
|
|
15797
|
+
{ id: 'left', label: 'Left', className: 'fa fa-align-left' },
|
|
15798
|
+
{ id: 'center', label: 'Center', className: 'fa fa-align-center' },
|
|
15799
|
+
{ id: 'right', label: 'Right', className: 'fa fa-align-right' },
|
|
15800
|
+
{ id: 'justify', label: 'Justify', className: 'fa fa-align-justify' }
|
|
15801
|
+
],
|
|
15802
|
+
},
|
|
15803
|
+
{
|
|
15804
|
+
property: 'text-decoration',
|
|
15805
|
+
type: 'radio',
|
|
15806
|
+
default: 'none',
|
|
15807
|
+
options: [
|
|
15808
|
+
{ id: 'none', label: 'None', className: 'fa fa-times' },
|
|
15809
|
+
{ id: 'underline', label: 'underline', className: 'fa fa-underline' },
|
|
15810
|
+
{ id: 'line-through', label: 'Line-through', className: 'fa fa-strikethrough' }
|
|
15811
|
+
],
|
|
15812
|
+
},
|
|
15813
|
+
'text-shadow'
|
|
15814
|
+
],
|
|
15815
|
+
}, {
|
|
15816
|
+
name: 'Decorations',
|
|
15817
|
+
open: false,
|
|
15818
|
+
properties: [
|
|
15819
|
+
'opacity',
|
|
15820
|
+
'border-radius',
|
|
15821
|
+
'border',
|
|
15822
|
+
'box-shadow',
|
|
15823
|
+
'background', // { id: 'background-bg', property: 'background', type: 'bg' }
|
|
15824
|
+
],
|
|
15825
|
+
}, {
|
|
15826
|
+
name: 'Extra',
|
|
15827
|
+
open: false,
|
|
15828
|
+
buildProps: [
|
|
15829
|
+
'transition',
|
|
15830
|
+
'perspective',
|
|
15831
|
+
'transform'
|
|
15832
|
+
],
|
|
15833
|
+
}, {
|
|
15834
|
+
name: 'Flex',
|
|
15835
|
+
open: false,
|
|
15836
|
+
properties: [{
|
|
15837
|
+
name: 'Flex Container',
|
|
15838
|
+
property: 'display',
|
|
15839
|
+
type: 'select',
|
|
15840
|
+
defaults: 'block',
|
|
15841
|
+
list: [
|
|
15842
|
+
{ value: 'block', name: 'Disable' },
|
|
15843
|
+
{ value: 'flex', name: 'Enable' }
|
|
15844
|
+
],
|
|
15845
|
+
}, {
|
|
15846
|
+
name: 'Flex Parent',
|
|
15847
|
+
property: 'label-parent-flex',
|
|
15848
|
+
type: 'integer',
|
|
15849
|
+
}, {
|
|
15850
|
+
name: 'Direction',
|
|
15851
|
+
property: 'flex-direction',
|
|
15852
|
+
type: 'radio',
|
|
15853
|
+
defaults: 'row',
|
|
15854
|
+
list: [{
|
|
15855
|
+
value: 'row',
|
|
15856
|
+
name: 'Row',
|
|
15857
|
+
className: 'icons-flex icon-dir-row',
|
|
15858
|
+
title: 'Row',
|
|
15859
|
+
}, {
|
|
15860
|
+
value: 'row-reverse',
|
|
15861
|
+
name: 'Row reverse',
|
|
15862
|
+
className: 'icons-flex icon-dir-row-rev',
|
|
15863
|
+
title: 'Row reverse',
|
|
15864
|
+
}, {
|
|
15865
|
+
value: 'column',
|
|
15866
|
+
name: 'Column',
|
|
15867
|
+
title: 'Column',
|
|
15868
|
+
className: 'icons-flex icon-dir-col',
|
|
15869
|
+
}, {
|
|
15870
|
+
value: 'column-reverse',
|
|
15871
|
+
name: 'Column reverse',
|
|
15872
|
+
title: 'Column reverse',
|
|
15873
|
+
className: 'icons-flex icon-dir-col-rev',
|
|
15874
|
+
}],
|
|
15875
|
+
}, {
|
|
15876
|
+
name: 'Justify',
|
|
15877
|
+
property: 'justify-content',
|
|
15878
|
+
type: 'radio',
|
|
15879
|
+
defaults: 'flex-start',
|
|
15880
|
+
list: [{
|
|
15881
|
+
value: 'flex-start',
|
|
15882
|
+
className: 'icons-flex icon-just-start',
|
|
15883
|
+
title: 'Start',
|
|
15884
|
+
}, {
|
|
15885
|
+
value: 'flex-end',
|
|
15886
|
+
title: 'End',
|
|
15887
|
+
className: 'icons-flex icon-just-end',
|
|
15888
|
+
}, {
|
|
15889
|
+
value: 'space-between',
|
|
15890
|
+
title: 'Space between',
|
|
15891
|
+
className: 'icons-flex icon-just-sp-bet',
|
|
15892
|
+
}, {
|
|
15893
|
+
value: 'space-around',
|
|
15894
|
+
title: 'Space around',
|
|
15895
|
+
className: 'icons-flex icon-just-sp-ar',
|
|
15896
|
+
}, {
|
|
15897
|
+
value: 'center',
|
|
15898
|
+
title: 'Center',
|
|
15899
|
+
className: 'icons-flex icon-just-sp-cent',
|
|
15900
|
+
}],
|
|
15901
|
+
}, {
|
|
15902
|
+
name: 'Align',
|
|
15903
|
+
property: 'align-items',
|
|
15904
|
+
type: 'radio',
|
|
15905
|
+
defaults: 'center',
|
|
15906
|
+
list: [{
|
|
15907
|
+
value: 'flex-start',
|
|
15908
|
+
title: 'Start',
|
|
15909
|
+
className: 'icons-flex icon-al-start',
|
|
15910
|
+
}, {
|
|
15911
|
+
value: 'flex-end',
|
|
15912
|
+
title: 'End',
|
|
15913
|
+
className: 'icons-flex icon-al-end',
|
|
15914
|
+
}, {
|
|
15915
|
+
value: 'stretch',
|
|
15916
|
+
title: 'Stretch',
|
|
15917
|
+
className: 'icons-flex icon-al-str',
|
|
15918
|
+
}, {
|
|
15919
|
+
value: 'center',
|
|
15920
|
+
title: 'Center',
|
|
15921
|
+
className: 'icons-flex icon-al-center',
|
|
15922
|
+
}],
|
|
15923
|
+
}, {
|
|
15924
|
+
name: 'Flex Children',
|
|
15925
|
+
property: 'label-parent-flex',
|
|
15926
|
+
type: 'integer',
|
|
15927
|
+
}, {
|
|
15928
|
+
name: 'Order',
|
|
15929
|
+
property: 'order',
|
|
15930
|
+
type: 'integer',
|
|
15931
|
+
defaults: 0,
|
|
15932
|
+
min: 0
|
|
15933
|
+
}, {
|
|
15934
|
+
name: 'Flex',
|
|
15935
|
+
property: 'flex',
|
|
15936
|
+
type: 'composite',
|
|
15937
|
+
properties: [{
|
|
15938
|
+
name: 'Grow',
|
|
15939
|
+
property: 'flex-grow',
|
|
15940
|
+
type: 'integer',
|
|
15941
|
+
defaults: 0,
|
|
15942
|
+
min: 0
|
|
15943
|
+
}, {
|
|
15944
|
+
name: 'Shrink',
|
|
15945
|
+
property: 'flex-shrink',
|
|
15946
|
+
type: 'integer',
|
|
15947
|
+
defaults: 0,
|
|
15948
|
+
min: 0
|
|
15949
|
+
}, {
|
|
15950
|
+
name: 'Basis',
|
|
15951
|
+
property: 'flex-basis',
|
|
15952
|
+
type: 'integer',
|
|
15953
|
+
units: ['px', '%', ''],
|
|
15954
|
+
unit: '',
|
|
15955
|
+
defaults: 'auto',
|
|
15956
|
+
}],
|
|
15957
|
+
}, {
|
|
15958
|
+
name: 'Align',
|
|
15959
|
+
property: 'align-self',
|
|
15960
|
+
type: 'radio',
|
|
15961
|
+
defaults: 'auto',
|
|
15962
|
+
list: [{
|
|
15963
|
+
value: 'auto',
|
|
15964
|
+
name: 'Auto',
|
|
15965
|
+
}, {
|
|
15966
|
+
value: 'flex-start',
|
|
15967
|
+
title: 'Start',
|
|
15968
|
+
className: 'icons-flex icon-al-start',
|
|
15969
|
+
}, {
|
|
15970
|
+
value: 'flex-end',
|
|
15971
|
+
title: 'End',
|
|
15972
|
+
className: 'icons-flex icon-al-end',
|
|
15973
|
+
}, {
|
|
15974
|
+
value: 'stretch',
|
|
15975
|
+
title: 'Stretch',
|
|
15976
|
+
className: 'icons-flex icon-al-str',
|
|
15977
|
+
}, {
|
|
15978
|
+
value: 'center',
|
|
15979
|
+
title: 'Center',
|
|
15980
|
+
className: 'icons-flex icon-al-center',
|
|
15981
|
+
}],
|
|
15982
|
+
}]
|
|
15983
|
+
}
|
|
15984
|
+
],
|
|
15985
|
+
},
|
|
15986
|
+
plugins: pluginIds,
|
|
15987
|
+
pluginsOpts: {
|
|
15988
|
+
'gjs-blocks-basic': { flexGrid: true },
|
|
15989
|
+
'grapesjs-tui-image-editor': {
|
|
15990
|
+
script: [
|
|
15991
|
+
// 'https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.7/fabric.min.js',
|
|
15992
|
+
'https://uicdn.toast.com/tui.code-snippet/v1.5.2/tui-code-snippet.min.js',
|
|
15993
|
+
'https://uicdn.toast.com/tui-color-picker/v2.2.7/tui-color-picker.min.js',
|
|
15994
|
+
'https://uicdn.toast.com/tui-image-editor/v3.15.2/tui-image-editor.min.js'
|
|
15995
|
+
],
|
|
15996
|
+
style: [
|
|
15997
|
+
'https://uicdn.toast.com/tui-color-picker/v2.2.7/tui-color-picker.min.css',
|
|
15998
|
+
'https://uicdn.toast.com/tui-image-editor/v3.15.2/tui-image-editor.min.css',
|
|
15999
|
+
],
|
|
16000
|
+
},
|
|
16001
|
+
'grapesjs-tabs': {
|
|
16002
|
+
tabsBlock: { category: 'Extra' }
|
|
16003
|
+
},
|
|
16004
|
+
'grapesjs-typed': {
|
|
16005
|
+
block: {
|
|
16006
|
+
category: 'Extra',
|
|
16007
|
+
content: {
|
|
16008
|
+
type: 'typed',
|
|
16009
|
+
'type-speed': 40,
|
|
16010
|
+
strings: [
|
|
16011
|
+
'Text row one',
|
|
16012
|
+
'Text row two',
|
|
16013
|
+
'Text row three',
|
|
16014
|
+
],
|
|
16015
|
+
}
|
|
16016
|
+
}
|
|
16017
|
+
},
|
|
16018
|
+
'grapesjs-preset-webpage': {
|
|
16019
|
+
showStylesOnChange: 0,
|
|
16020
|
+
modalImportTitle: 'Import Template',
|
|
16021
|
+
modalImportLabel: '<div style="margin-bottom: 10px; font-size: 13px;">Paste here your HTML/CSS and click Import</div>',
|
|
16022
|
+
modalImportContent: function (editor) {
|
|
16023
|
+
return editor.getHtml() + '<style>' + editor.getCss() + '</style>';
|
|
16024
|
+
},
|
|
16025
|
+
},
|
|
16026
|
+
},
|
|
16027
|
+
});
|
|
16028
|
+
const editor = this.editor;
|
|
16029
|
+
editor.I18n.addMessages({
|
|
16030
|
+
en: {
|
|
16031
|
+
styleManager: {
|
|
16032
|
+
properties: {
|
|
16033
|
+
'background-repeat': 'Repeat',
|
|
16034
|
+
'background-position': 'Position',
|
|
16035
|
+
'background-attachment': 'Attachment',
|
|
16036
|
+
'background-size': 'Size',
|
|
16037
|
+
}
|
|
16038
|
+
},
|
|
16039
|
+
}
|
|
16040
|
+
});
|
|
16041
|
+
var pn = editor.Panels;
|
|
16042
|
+
var modal = editor.Modal;
|
|
16043
|
+
var cmdm = editor.Commands;
|
|
16044
|
+
// Update canvas-clear command
|
|
16045
|
+
cmdm.add('canvas-clear', function () {
|
|
16046
|
+
if (confirm('Are you sure to clean the canvas?')) {
|
|
16047
|
+
editor.runCommand('core:canvas-clear');
|
|
16048
|
+
setTimeout(function () { localStorage.clear(); }, 0);
|
|
16049
|
+
}
|
|
16050
|
+
});
|
|
16051
|
+
// Removemos os comandos referenciando infoContainer que não existe
|
|
16052
|
+
// Add and beautify tooltips
|
|
16053
|
+
[['sw-visibility', 'Show Borders'], ['preview', 'Preview'], ['fullscreen', 'Fullscreen'],
|
|
16054
|
+
['export-template', 'Export'], ['undo', 'Undo'], ['redo', 'Redo'],
|
|
16055
|
+
['gjs-open-import-webpage', 'Import'], ['canvas-clear', 'Clear canvas']]
|
|
16056
|
+
.forEach(function (item) {
|
|
16057
|
+
const btn = pn.getButton('options', item[0]);
|
|
16058
|
+
if (btn)
|
|
16059
|
+
btn.set('attributes', { title: item[1], 'data-tooltip-pos': 'bottom' });
|
|
16060
|
+
});
|
|
16061
|
+
[['open-sm', 'Style Manager'], ['open-layers', 'Layers'], ['open-blocks', 'Blocks']]
|
|
16062
|
+
.forEach(function (item) {
|
|
16063
|
+
const btn = pn.getButton('views', item[0]);
|
|
16064
|
+
if (btn)
|
|
16065
|
+
btn.set('attributes', { title: item[1], 'data-tooltip-pos': 'bottom' });
|
|
16066
|
+
});
|
|
16067
|
+
// Do stuff on load
|
|
16068
|
+
editor.on('load', () => {
|
|
16069
|
+
var $ = grapesjs.$;
|
|
16070
|
+
// Show borders by default
|
|
16071
|
+
pn.getButton('options', 'sw-visibility').set('active', 1);
|
|
16072
|
+
// Show logo with the version
|
|
16073
|
+
// Load and show settings and style manager
|
|
16074
|
+
var openTmBtn = pn.getButton('views', 'open-tm');
|
|
16075
|
+
openTmBtn && openTmBtn.set('active', 1);
|
|
16076
|
+
var openSm = pn.getButton('views', 'open-sm');
|
|
16077
|
+
openSm && openSm.set('active', 1);
|
|
16078
|
+
// Remove trait view
|
|
16079
|
+
pn.removeButton('views', 'open-tm');
|
|
16080
|
+
// Add Settings Sector
|
|
16081
|
+
const traitsSectorEl = document.createElement('div');
|
|
16082
|
+
traitsSectorEl.className = 'gjs-sm-sector no-select';
|
|
16083
|
+
traitsSectorEl.innerHTML =
|
|
16084
|
+
'<div class="gjs-sm-sector-title"><span class="icon-settings fa fa-cog"></span> <span class="gjs-sm-sector-label">Settings</span></div>' +
|
|
16085
|
+
'<div class="gjs-sm-properties" style="display: none;"></div>';
|
|
16086
|
+
const traitsProps = traitsSectorEl.querySelector('.gjs-sm-properties');
|
|
16087
|
+
const gjsTrtTraits = document.querySelector('.gjs-trt-traits');
|
|
16088
|
+
if (gjsTrtTraits && traitsProps) {
|
|
16089
|
+
traitsProps.appendChild(gjsTrtTraits);
|
|
16090
|
+
}
|
|
16091
|
+
const smSectors = document.querySelector('.gjs-sm-sectors');
|
|
16092
|
+
if (smSectors) {
|
|
16093
|
+
smSectors.parentNode?.insertBefore(traitsSectorEl, smSectors);
|
|
16094
|
+
}
|
|
16095
|
+
const sectorTitle = traitsSectorEl.querySelector('.gjs-sm-sector-title');
|
|
16096
|
+
if (sectorTitle && traitsProps) {
|
|
16097
|
+
sectorTitle.addEventListener('click', function () {
|
|
16098
|
+
const hidden = traitsProps.style.display === 'none';
|
|
16099
|
+
traitsProps.style.display = hidden ? 'block' : 'none';
|
|
16100
|
+
});
|
|
16101
|
+
}
|
|
16102
|
+
// Open block manager
|
|
16103
|
+
var openBlocksBtn = editor.Panels.getButton('views', 'open-blocks');
|
|
16104
|
+
openBlocksBtn && openBlocksBtn.set('active', 1);
|
|
16105
|
+
editor.on('component:selected', (a) => {
|
|
16106
|
+
const btnOpenCode = editor.Panels.getButton('views', 'code-editor');
|
|
16107
|
+
if (!btnOpenCode.active) {
|
|
16108
|
+
const openSmBtn = editor.Panels.getButton('views', 'open-sm');
|
|
16109
|
+
openSmBtn.set('active', true);
|
|
16110
|
+
}
|
|
16111
|
+
});
|
|
16112
|
+
this.isEditorInitialized = true;
|
|
16113
|
+
if (this._text) {
|
|
16114
|
+
this.editor.setComponents(this._text);
|
|
16115
|
+
}
|
|
16116
|
+
this.ngZone.run(() => { this.isLoading = false; });
|
|
16117
|
+
});
|
|
16118
|
+
// Se o evento 'load' demorar, podemos tentar setar os componentes se já estiver inicializado
|
|
16119
|
+
if (this.editor && !this.isEditorInitialized && this._text) {
|
|
16120
|
+
this.editor.setComponents(this._text);
|
|
16121
|
+
}
|
|
16122
|
+
}
|
|
16123
|
+
catch (error) {
|
|
16124
|
+
console.error('[PageBuilder] ❌ Erro ao inicializar o GrapesJS:', error);
|
|
16125
|
+
}
|
|
16126
|
+
}); // fim runOutsideAngular
|
|
16127
|
+
}
|
|
16128
|
+
save() {
|
|
16129
|
+
if (!this.editor)
|
|
16130
|
+
return;
|
|
16131
|
+
const html = this.editor.getHtml();
|
|
16132
|
+
const css = this.editor.getCss();
|
|
16133
|
+
const combinedOutput = `<style>${css}</style>${html}`;
|
|
16134
|
+
this.onSave.emit(combinedOutput);
|
|
16135
|
+
}
|
|
16136
|
+
ngOnDestroy() {
|
|
16137
|
+
if (this.editor) {
|
|
16138
|
+
this.editor.destroy();
|
|
16139
|
+
}
|
|
16140
|
+
}
|
|
16141
|
+
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 }); }
|
|
16142
|
+
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 }); }
|
|
16143
|
+
}
|
|
16144
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaPageBuilderComponent, decorators: [{
|
|
16145
|
+
type: Component,
|
|
16146
|
+
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>" }]
|
|
16147
|
+
}], ctorParameters: () => [{ type: i0.NgZone }], propDecorators: { gjsContainer: [{
|
|
16148
|
+
type: ViewChild,
|
|
16149
|
+
args: ['gjsContainer', { static: false }]
|
|
16150
|
+
}], showControls: [{
|
|
16151
|
+
type: Input
|
|
16152
|
+
}], onSave: [{
|
|
16153
|
+
type: Output
|
|
16154
|
+
}], text: [{
|
|
16155
|
+
type: Input
|
|
16156
|
+
}] } });
|
|
16157
|
+
|
|
16158
|
+
class MatchaPageBuilderModule {
|
|
16159
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaPageBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
16160
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: MatchaPageBuilderModule, declarations: [MatchaPageBuilderComponent], imports: [CommonModule,
|
|
16161
|
+
MatchaButtonModule,
|
|
16162
|
+
MatchaSpinnerModule], exports: [MatchaPageBuilderComponent] }); }
|
|
16163
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaPageBuilderModule, imports: [CommonModule,
|
|
16164
|
+
MatchaButtonModule,
|
|
16165
|
+
MatchaSpinnerModule] }); }
|
|
16166
|
+
}
|
|
16167
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaPageBuilderModule, decorators: [{
|
|
16168
|
+
type: NgModule,
|
|
16169
|
+
args: [{
|
|
16170
|
+
declarations: [MatchaPageBuilderComponent],
|
|
16171
|
+
imports: [
|
|
16172
|
+
CommonModule,
|
|
16173
|
+
MatchaButtonModule,
|
|
16174
|
+
MatchaSpinnerModule,
|
|
16175
|
+
],
|
|
16176
|
+
exports: [MatchaPageBuilderComponent]
|
|
16177
|
+
}]
|
|
16178
|
+
}] });
|
|
16179
|
+
|
|
15616
16180
|
class StepContentDirective {
|
|
15617
16181
|
constructor(template) {
|
|
15618
16182
|
this.template = template;
|
|
@@ -15985,5 +16549,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
|
|
|
15985
16549
|
* Generated bundle index. Do not edit.
|
|
15986
16550
|
*/
|
|
15987
16551
|
|
|
15988
|
-
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 };
|
|
16552
|
+
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 };
|
|
15989
16553
|
//# sourceMappingURL=matcha-components.mjs.map
|