matcha-components 20.185.0 → 20.187.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.
Files changed (8) hide show
  1. package/assets/page-builder/css/grapes.min.css +3928 -1
  2. package/assets/page-builder/css/grapick.min.css +75 -1
  3. package/assets/page-builder/index-cdn.html +13 -13
  4. package/fesm2022/matcha-components.mjs +17 -5
  5. package/fesm2022/matcha-components.mjs.map +1 -1
  6. package/index.d.ts +5 -1
  7. package/package.json +1 -1
  8. /package/assets/page-builder/js/{grapesjs-blocks-basic.js → gjs-blocks-basic.js} +0 -0
package/assets/page-builder/css/grapick.min.css CHANGED
@@ -1 +1,75 @@
1
- .grp-wrapper{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==")}.grp-preview{position:absolute;top:0;left:0;width:100%;height:100%;cursor:crosshair}.grp-handler{width:4px;margin-left:-2px;user-select:none;-webkit-user-select:none;-moz-user-select:none;height:100%}.grp-handler-close{color:rgba(0,0,0,0.4);border-radius:100%;box-shadow:0 2px 10px rgba(0,0,0,0.25);background-color:#fff;text-align:center;width:15px;height:15px;margin-left:-5px;line-height:10px;font-size:21px;cursor:pointer}.grp-handler-close-c{position:absolute;top:-17px}.grp-handler-drag{background-color:rgba(0,0,0,0.5);cursor:col-resize;width:100%;height:100%}.grp-handler-selected .grp-handler-drag{background-color:rgba(255,255,255,0.5)}.grp-handler-cp-c{display:none}.grp-handler-selected .grp-handler-cp-c{display:block}.grp-handler-cp-wrap{width:15px;height:15px;margin-left:-8px;border:3px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,0.25);overflow:hidden;border-radius:100%;cursor:pointer}.grp-handler-cp-wrap input[type=color]{opacity:0;cursor:pointer}
1
+ .grp-wrapper {
2
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==")
3
+ }
4
+
5
+ .grp-preview {
6
+ position: absolute;
7
+ top: 0;
8
+ left: 0;
9
+ width: 100%;
10
+ height: 100%;
11
+ cursor: crosshair
12
+ }
13
+
14
+ .grp-handler {
15
+ width: 4px;
16
+ margin-left: -2px;
17
+ user-select: none;
18
+ -webkit-user-select: none;
19
+ -moz-user-select: none;
20
+ height: 100%
21
+ }
22
+
23
+ .grp-handler-close {
24
+ color: rgba(0, 0, 0, 0.4);
25
+ border-radius: 100%;
26
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
27
+ background-color: #fff;
28
+ text-align: center;
29
+ width: 15px;
30
+ height: 15px;
31
+ margin-left: -5px;
32
+ line-height: 10px;
33
+ font-size: 21px;
34
+ cursor: pointer
35
+ }
36
+
37
+ .grp-handler-close-c {
38
+ position: absolute;
39
+ top: -17px
40
+ }
41
+
42
+ .grp-handler-drag {
43
+ background-color: rgba(0, 0, 0, 0.5);
44
+ cursor: col-resize;
45
+ width: 100%;
46
+ height: 100%
47
+ }
48
+
49
+ .grp-handler-selected .grp-handler-drag {
50
+ background-color: rgba(255, 255, 255, 0.5)
51
+ }
52
+
53
+ .grp-handler-cp-c {
54
+ display: none
55
+ }
56
+
57
+ .grp-handler-selected .grp-handler-cp-c {
58
+ display: block
59
+ }
60
+
61
+ .grp-handler-cp-wrap {
62
+ width: 15px;
63
+ height: 15px;
64
+ margin-left: -8px;
65
+ border: 3px solid #fff;
66
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
67
+ overflow: hidden;
68
+ border-radius: 100%;
69
+ cursor: pointer
70
+ }
71
+
72
+ .grp-handler-cp-wrap input[type=color] {
73
+ opacity: 0;
74
+ cursor: pointer
75
+ }
package/assets/page-builder/index-cdn.html CHANGED
@@ -5,21 +5,21 @@
5
5
  <meta charset="utf-8">
6
6
  <title>GrapesJS</title>
7
7
 
8
- <link rel="stylesheet" href="css/grapes.min.css">
9
- <link rel="stylesheet" href="css/grapick.min.css">
8
+ <link rel="stylesheet" href="https://unpkg.com/matcha-components/assets/page-builder/css/grapes.min.css">
9
+ <link rel="stylesheet" href="https://unpkg.com/matcha-components/assets/page-builder/css/grapick.min.css">
10
10
 
11
11
  <script src="https://unpkg.com/matcha-components/assets/page-builder/js/grapes.min.js"></script>
12
- <script src="js/grapesjs-blocks-basic.js"></script>
13
- <script src="js/grapesjs-component-countdown.js"></script>
14
- <script src="js/grapesjs-custom-code.js"></script>
15
- <script src="js/grapesjs-parser-postcss.js"></script>
16
- <script src="js/grapesjs-plugin-export.js"></script>
17
- <script src="js/grapesjs-plugin-forms.js"></script>
18
- <script src="js/grapesjs-preset-webpage.js"></script>
19
- <script src="js/grapesjs-style-bg.js"></script>
20
- <script src="js/grapesjs-tabs.js"></script>
21
- <script src="js/grapesjs-tooltip.js"></script>
22
- <script src="js/grapesjs-touch.js"></script>
12
+ <script src="https://unpkg.com/matcha-components/assets/page-builder/js/grapesjs-blocks-basic.js"></script>
13
+ <script src="https://unpkg.com/matcha-components/assets/page-builder/js/grapesjs-component-countdown.js"></script>
14
+ <script src="https://unpkg.com/matcha-components/assets/page-builder/js/grapesjs-custom-code.js"></script>
15
+ <script src="https://unpkg.com/matcha-components/assets/page-builder/js/grapesjs-parser-postcss.js"></script>
16
+ <script src="https://unpkg.com/matcha-components/assets/page-builder/js/grapesjs-plugin-export.js"></script>
17
+ <script src="https://unpkg.com/matcha-components/assets/page-builder/js/grapesjs-plugin-forms.js"></script>
18
+ <script src="https://unpkg.com/matcha-components/assets/page-builder/js/grapesjs-preset-webpage.js"></script>
19
+ <script src="https://unpkg.com/matcha-components/assets/page-builder/js/grapesjs-style-bg.js"></script>
20
+ <script src="https://unpkg.com/matcha-components/assets/page-builder/js/grapesjs-tabs.js"></script>
21
+ <script src="https://unpkg.com/matcha-components/assets/page-builder/js/grapesjs-tooltip.js"></script>
22
+ <script src="https://unpkg.com/matcha-components/assets/page-builder/js/grapesjs-touch.js"></script>
23
23
  </head>
24
24
 
25
25
  <body>
package/fesm2022/matcha-components.mjs CHANGED
@@ -903,6 +903,8 @@ class MatchaButtonComponent {
903
903
  set link(v) { this._link = v === 'false' ? false : !!v; }
904
904
  get icon() { return this._icon; }
905
905
  set icon(v) { this._icon = v === 'false' ? false : !!v; }
906
+ get badge() { return this._badge; }
907
+ set badge(v) { this._badge = v === 'false' ? false : !!v; }
906
908
  constructor(_elementRef, _renderer) {
907
909
  this._elementRef = _elementRef;
908
910
  this._renderer = _renderer;
@@ -920,6 +922,7 @@ class MatchaButtonComponent {
920
922
  this._pill = false;
921
923
  this._link = false;
922
924
  this._icon = false;
925
+ this._badge = false;
923
926
  this._config = {
924
927
  sizeXs: 'tiny',
925
928
  sizeSm: 'small',
@@ -932,7 +935,8 @@ class MatchaButtonComponent {
932
935
  outline: false,
933
936
  pill: false,
934
937
  icon: false,
935
- link: false
938
+ link: false,
939
+ badge: false
936
940
  };
937
941
  }
938
942
  ngOnInit() {
@@ -973,6 +977,8 @@ class MatchaButtonComponent {
973
977
  this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-basic`);
974
978
  //link
975
979
  this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-link`);
980
+ //badge
981
+ this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-badge`);
976
982
  }
977
983
  setConfig() {
978
984
  this.clearConfig();
@@ -983,6 +989,7 @@ class MatchaButtonComponent {
983
989
  (this.link === true || this.link === 'true') ? this.setLink() : null;
984
990
  (this.basic === true || this.basic === 'true') ? this.setBasic() : null;
985
991
  (this.icon === true || this.icon === 'true') ? this.setIcon() : null;
992
+ (this.badge === true || this.badge === 'true') ? this.setBadge() : null;
986
993
  }
987
994
  setSize() {
988
995
  this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-${this.size}`);
@@ -1029,6 +1036,9 @@ class MatchaButtonComponent {
1029
1036
  setIcon() {
1030
1037
  this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-icon`);
1031
1038
  }
1039
+ setBadge() {
1040
+ this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-badge`);
1041
+ }
1032
1042
  updateDividerStyles() {
1033
1043
  // Busca todos os matcha-divider dentro do botão
1034
1044
  const dividers = this._elementRef.nativeElement.querySelectorAll('matcha-divider');
@@ -1074,7 +1084,7 @@ class MatchaButtonComponent {
1074
1084
  });
1075
1085
  }
1076
1086
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaButtonComponent, deps: [{ token: ElementRef }, { token: Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
1077
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", 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"], gap: "gap", 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: [""] }); }
1087
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", 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"], gap: "gap", color: "color", basic: "basic", outline: "outline", alpha: "alpha", pill: "pill", link: "link", icon: "icon", badge: "badge" }, host: { properties: { "attr.color": "this.colorAttr" } }, usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] }); }
1078
1088
  }
1079
1089
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaButtonComponent, decorators: [{
1080
1090
  type: Component,
@@ -1124,6 +1134,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
1124
1134
  type: Input
1125
1135
  }], icon: [{
1126
1136
  type: Input
1137
+ }], badge: [{
1138
+ type: Input
1127
1139
  }] } });
1128
1140
 
1129
1141
  class MatchaCardComponent {
@@ -2165,7 +2177,7 @@ class MatchaToolbarButtonComponent {
2165
2177
  this.buttonClick.emit();
2166
2178
  }
2167
2179
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaToolbarButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2168
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaToolbarButtonComponent, isStandalone: false, selector: "matcha-toolbar-button", inputs: { icon: "icon" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<!-- HOW TO USE:\n<matcha-toolbar-button (buttonClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-AQUI\" toolbar-button-tooltip=\"TOOLTIP-AQUI\">\n TEXTO DO BOT\u00C3O AQUI\n</matcha-toolbar-button>\n-->\n<button matcha-button outline=\"true\" size=\"small\" color=\"grey\" icon=\"true\" (click)=\"emitButtonClick()\">\n <span [class]=\"classes\"></span>\n</button>\n", styles: [""], dependencies: [{ 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"] }] }); }
2180
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaToolbarButtonComponent, isStandalone: false, selector: "matcha-toolbar-button", inputs: { icon: "icon" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<!-- HOW TO USE:\n<matcha-toolbar-button (buttonClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-AQUI\" toolbar-button-tooltip=\"TOOLTIP-AQUI\">\n TEXTO DO BOT\u00C3O AQUI\n</matcha-toolbar-button>\n-->\n<button matcha-button outline=\"true\" size=\"small\" color=\"grey\" icon=\"true\" (click)=\"emitButtonClick()\">\n <span [class]=\"classes\"></span>\n</button>\n", styles: [""], dependencies: [{ 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"] }] }); }
2169
2181
  }
2170
2182
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaToolbarButtonComponent, decorators: [{
2171
2183
  type: Component,
@@ -2194,7 +2206,7 @@ class MatchaToolbarMainButtonComponent {
2194
2206
  this.buttonClick.emit();
2195
2207
  }
2196
2208
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaToolbarMainButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2197
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaToolbarMainButtonComponent, isStandalone: false, selector: "matcha-toolbar-main-button", outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<!-- HOW TO USE:\n<matcha-toolbar-main-button (buttonClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-AQUI\">\n TEXTO DO BOT\u00C3O AQUI\n</matcha-toolbar-main-button>\n-->\n<button matcha-button size=\"tiny\" size-md=\"small\" color=\"accent\" (click)=\"emitButtonClick()\">\n <span class=\"i-matcha-action_plus i-size-sm ml--4\"></span>\n <span class=\"ml-8 fs-14\">\n <ng-content></ng-content>\n </span>\n</button>\n", styles: [""], dependencies: [{ 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"] }] }); }
2209
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaToolbarMainButtonComponent, isStandalone: false, selector: "matcha-toolbar-main-button", outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<!-- HOW TO USE:\n<matcha-toolbar-main-button (buttonClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-AQUI\">\n TEXTO DO BOT\u00C3O AQUI\n</matcha-toolbar-main-button>\n-->\n<button matcha-button size=\"tiny\" size-md=\"small\" color=\"accent\" (click)=\"emitButtonClick()\">\n <span class=\"i-matcha-action_plus i-size-sm ml--4\"></span>\n <span class=\"ml-8 fs-14\">\n <ng-content></ng-content>\n </span>\n</button>\n", styles: [""], dependencies: [{ 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"] }] }); }
2198
2210
  }
2199
2211
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaToolbarMainButtonComponent, decorators: [{
2200
2212
  type: Component,
@@ -10177,7 +10189,7 @@ class CopyButtonComponent {
10177
10189
  this.isCopied = false;
10178
10190
  }
10179
10191
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: CopyButtonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
10180
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: CopyButtonComponent, isStandalone: false, selector: "matcha-copy-button", inputs: { type: "type", size: "size", icon: "icon", position: "position", customClass: "customClass" }, outputs: { copied: "copied" }, ngImport: i0, template: "<button\n matcha-button\n [size]=\"size\"\n pill=\"true\"\n icon=\"true\"\n [class]=\"getButtonClasses()\"\n (click)=\"copyToClipboard()\"\n [title]=\"'Copiar c\u00F3digo ' + type\">\n <matcha-icon [name]=\"currentIcon\" [size]=\"size === 'tiny' ? 'small' : size\"></matcha-icon>\n</button>\n\n\n", styles: [".position-absolute{position:absolute}.position-relative{position:relative}.top-8{top:8px}.right-8{right:8px}.m-8{margin:8px}.z-index-10{z-index:10}\n"], dependencies: [{ kind: "component", type: MatchaIconComponent, selector: "matcha-icon", inputs: ["name", "size", "color", "class", "loading"] }, { 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"] }] }); }
10192
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: CopyButtonComponent, isStandalone: false, selector: "matcha-copy-button", inputs: { type: "type", size: "size", icon: "icon", position: "position", customClass: "customClass" }, outputs: { copied: "copied" }, ngImport: i0, template: "<button\n matcha-button\n [size]=\"size\"\n pill=\"true\"\n icon=\"true\"\n [class]=\"getButtonClasses()\"\n (click)=\"copyToClipboard()\"\n [title]=\"'Copiar c\u00F3digo ' + type\">\n <matcha-icon [name]=\"currentIcon\" [size]=\"size === 'tiny' ? 'small' : size\"></matcha-icon>\n</button>\n\n\n", styles: [".position-absolute{position:absolute}.position-relative{position:relative}.top-8{top:8px}.right-8{right:8px}.m-8{margin:8px}.z-index-10{z-index:10}\n"], dependencies: [{ kind: "component", type: MatchaIconComponent, selector: "matcha-icon", inputs: ["name", "size", "color", "class", "loading"] }, { 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"] }] }); }
10181
10193
  }
10182
10194
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: CopyButtonComponent, decorators: [{
10183
10195
  type: Component,