matcha-components 19.50.0 → 19.52.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 +60 -26
- package/fesm2022/matcha-components.mjs.map +1 -1
- package/lib/matcha-button-group/button-group/button-group.component.d.ts +1 -3
- package/lib/matcha-button-group/button-item/button-item.component.d.ts +1 -1
- package/lib/matcha-form-field/matcha-form-field/matcha-form-field.component.d.ts +11 -1
- package/package.json +1 -1
|
@@ -5,7 +5,7 @@ import { CommonModule } from '@angular/common';
|
|
|
5
5
|
import { animation, style, animate, trigger, transition, useAnimation, state, query, stagger, animateChild, sequence, group } from '@angular/animations';
|
|
6
6
|
import { Subscription, Subject } from 'rxjs';
|
|
7
7
|
import { debounceTime } from 'rxjs/operators';
|
|
8
|
-
import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
8
|
+
import { FormControlName, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
9
9
|
|
|
10
10
|
class MatchaButtonComponent {
|
|
11
11
|
constructor(_elementRef, _renderer) {
|
|
@@ -212,20 +212,27 @@ class MatchaButtonItemComponent {
|
|
|
212
212
|
onClick() {
|
|
213
213
|
this.selected.emit();
|
|
214
214
|
}
|
|
215
|
-
setActiveState(isActive,
|
|
215
|
+
setActiveState(isActive, inactiveColor, inactiveType) {
|
|
216
216
|
this.active = isActive;
|
|
217
|
-
const color = isActive ?
|
|
218
|
-
const type = isActive ?
|
|
219
|
-
// Aplica a cor correta ao botão interno
|
|
220
|
-
|
|
217
|
+
const color = isActive ? '' : inactiveColor;
|
|
218
|
+
const type = isActive ? '' : inactiveType;
|
|
219
|
+
// Aplica a cor correta ao botão interno
|
|
220
|
+
if (isActive) {
|
|
221
|
+
this.renderer.setAttribute(this.innerButton.nativeElement, 'active-item', 'true');
|
|
222
|
+
}
|
|
223
|
+
else {
|
|
224
|
+
this.renderer.removeAttribute(this.innerButton.nativeElement, 'active-item');
|
|
225
|
+
}
|
|
226
|
+
// inactiveType - pode ser 'basic', 'outline', 'alpha' ou 'pill'
|
|
227
|
+
// Se o tipo for 'basic', 'outline', 'alpha' ou 'pill', aplica o tipo correto
|
|
221
228
|
// Limpa todos os tipos anteriores
|
|
222
|
-
['basic', 'outline', 'alpha', 'pill'].forEach(attr => {
|
|
223
|
-
|
|
224
|
-
});
|
|
229
|
+
// ['basic', 'outline', 'alpha', 'pill'].forEach(attr => {
|
|
230
|
+
// this.renderer.setAttribute(this.innerButton.nativeElement, attr, 'false');
|
|
231
|
+
// });
|
|
225
232
|
// Aplica o tipo correto ao botão interno se houver algum
|
|
226
|
-
if (type) {
|
|
227
|
-
|
|
228
|
-
}
|
|
233
|
+
// if (type) {
|
|
234
|
+
// this.renderer.setAttribute(this.innerButton.nativeElement, type, 'true');
|
|
235
|
+
// }
|
|
229
236
|
}
|
|
230
237
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaButtonItemComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
231
238
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: MatchaButtonItemComponent, isStandalone: false, selector: "matcha-button-item", inputs: { active: "active" }, outputs: { selected: "selected" }, queries: [{ propertyName: "innerButton", first: true, predicate: MatchaButtonComponent, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] }); }
|
|
@@ -246,9 +253,7 @@ class MatchaButtonGroupComponent {
|
|
|
246
253
|
constructor() {
|
|
247
254
|
this._multiple = false;
|
|
248
255
|
this._disabled = false;
|
|
249
|
-
this.activeColor = 'blue';
|
|
250
256
|
this.inactiveColor = 'disabled';
|
|
251
|
-
this.activeType = '';
|
|
252
257
|
this.inactiveType = 'basic';
|
|
253
258
|
this._gap = 16;
|
|
254
259
|
}
|
|
@@ -278,22 +283,22 @@ class MatchaButtonGroupComponent {
|
|
|
278
283
|
this.buttonItems.forEach((item, index) => {
|
|
279
284
|
const isFirst = index === 0;
|
|
280
285
|
// Opcionalmente, primeiro botão pode iniciar ativo por padrão
|
|
281
|
-
item.setActiveState(isFirst, this.
|
|
286
|
+
item.setActiveState(isFirst, this.inactiveColor, this.inactiveType);
|
|
282
287
|
item.selected.subscribe(() => this.onItemSelected(item));
|
|
283
288
|
});
|
|
284
289
|
}
|
|
285
290
|
onItemSelected(selectedItem) {
|
|
286
291
|
if (this.multiple) {
|
|
287
|
-
selectedItem.setActiveState(!selectedItem.active, this.
|
|
292
|
+
selectedItem.setActiveState(!selectedItem.active, this.inactiveColor, this.inactiveType);
|
|
288
293
|
}
|
|
289
294
|
else {
|
|
290
295
|
this.buttonItems.forEach(item => {
|
|
291
|
-
item.setActiveState(item === selectedItem, this.
|
|
296
|
+
item.setActiveState(item === selectedItem, this.inactiveColor, this.inactiveType);
|
|
292
297
|
});
|
|
293
298
|
}
|
|
294
299
|
}
|
|
295
300
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
296
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: MatchaButtonGroupComponent, isStandalone: false, selector: "matcha-button-group", inputs: { multiple: "multiple", disabled: "disabled",
|
|
301
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: MatchaButtonGroupComponent, isStandalone: false, selector: "matcha-button-group", inputs: { multiple: "multiple", disabled: "disabled", inactiveColor: "inactiveColor", inactiveType: "inactiveType", gap: "gap" }, host: { properties: { "attr.disabled": "this.isDisabled" } }, queries: [{ propertyName: "buttonItems", predicate: MatchaButtonItemComponent }], ngImport: i0, template: "<div class=\"button-group d-flex flex-wrap\" [ngClass]=\"gapClass\" role=\"group\"><ng-content></ng-content></div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
297
302
|
}
|
|
298
303
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaButtonGroupComponent, decorators: [{
|
|
299
304
|
type: Component,
|
|
@@ -305,12 +310,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
|
|
|
305
310
|
}], isDisabled: [{
|
|
306
311
|
type: HostBinding,
|
|
307
312
|
args: ['attr.disabled']
|
|
308
|
-
}], activeColor: [{
|
|
309
|
-
type: Input
|
|
310
313
|
}], inactiveColor: [{
|
|
311
314
|
type: Input
|
|
312
|
-
}], activeType: [{
|
|
313
|
-
type: Input
|
|
314
315
|
}], inactiveType: [{
|
|
315
316
|
type: Input
|
|
316
317
|
}], gap: [{
|
|
@@ -1577,15 +1578,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
|
|
|
1577
1578
|
class MatchaFormFieldComponent {
|
|
1578
1579
|
constructor() {
|
|
1579
1580
|
this.color = 'grey';
|
|
1581
|
+
this.size = null;
|
|
1582
|
+
this.sizeXs = null;
|
|
1583
|
+
this.sizeSm = null;
|
|
1584
|
+
this.sizeMd = null;
|
|
1585
|
+
this.sizeLg = null;
|
|
1586
|
+
this.sizeXl = null;
|
|
1587
|
+
}
|
|
1588
|
+
get control() {
|
|
1589
|
+
return this.controlDir?.control;
|
|
1590
|
+
}
|
|
1591
|
+
get showError() {
|
|
1592
|
+
return !!this.control?.invalid && (this.control?.touched || this.control?.dirty);
|
|
1580
1593
|
}
|
|
1581
1594
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1582
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: MatchaFormFieldComponent, isStandalone: false, selector: "matcha-form-field", inputs: { color: "color" }, ngImport: i0, template: "<div class=\"flex-column gap-4\">\n <div class=\"matcha-form-field position-relative w-100-p min-h-40 flex-align-center\" #inputSelector>\n <div class=\"flex-row position-absolute w-100-p min-h-40 h-100-p\">\n <div class=\"bl-2 bt-2 bb-2 radius-left-8 min-w-8 border-color-{{color}}\"></div>\n <div class=\"bb-2 w-auto border-color-{{color}}\">\n <ng-content select=\"matcha-label\"></ng-content>\n </div>\n <div class=\"br-2 bt-2 bb-2 radius-right-8 w-100-p border-color-{{color}}\"></div>\n </div>\n <div class=\"flex-row position-relative
|
|
1595
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: MatchaFormFieldComponent, isStandalone: false, selector: "matcha-form-field", inputs: { color: "color", size: "size", sizeXs: ["size-xs", "sizeXs"], sizeSm: ["size-sm", "sizeSm"], sizeMd: ["size-md", "sizeMd"], sizeLg: ["size-lg", "sizeLg"], sizeXl: ["size-xl", "sizeXl"] }, queries: [{ propertyName: "controlDir", first: true, predicate: FormControlName, descendants: true }], ngImport: i0, template: "<div class=\"flex-column gap-4\">\n <div class=\"matcha-form-field position-relative w-100-p min-h-40 flex-align-center\" #inputSelector>\n <div class=\"flex-row position-absolute w-100-p min-h-40 h-100-p\">\n <div class=\"bl-2 bt-2 bb-2 radius-left-8 min-w-8 border-color-{{color}}\"></div>\n <div class=\"bb-2 w-auto border-color-{{color}}\">\n <ng-content select=\"matcha-label\"></ng-content>\n </div>\n <div class=\"br-2 bt-2 bb-2 radius-right-8 w-100-p border-color-{{color}}\"></div>\n </div>\n <div class=\"flex-row position-relative py-8 px-12 gap-8 w-100-p\">\n <ng-content></ng-content>\n </div>\n </div>\n <ng-container *ngIf=\"showError\">\n <ng-content select=\"matcha-error\"></ng-content>\n </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
1583
1596
|
}
|
|
1584
1597
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaFormFieldComponent, decorators: [{
|
|
1585
1598
|
type: Component,
|
|
1586
|
-
args: [{ selector: 'matcha-form-field', standalone: false, template: "<div class=\"flex-column gap-4\">\n <div class=\"matcha-form-field position-relative w-100-p min-h-40 flex-align-center\" #inputSelector>\n <div class=\"flex-row position-absolute w-100-p min-h-40 h-100-p\">\n <div class=\"bl-2 bt-2 bb-2 radius-left-8 min-w-8 border-color-{{color}}\"></div>\n <div class=\"bb-2 w-auto border-color-{{color}}\">\n <ng-content select=\"matcha-label\"></ng-content>\n </div>\n <div class=\"br-2 bt-2 bb-2 radius-right-8 w-100-p border-color-{{color}}\"></div>\n </div>\n <div class=\"flex-row position-relative
|
|
1599
|
+
args: [{ selector: 'matcha-form-field', standalone: false, template: "<div class=\"flex-column gap-4\">\n <div class=\"matcha-form-field position-relative w-100-p min-h-40 flex-align-center\" #inputSelector>\n <div class=\"flex-row position-absolute w-100-p min-h-40 h-100-p\">\n <div class=\"bl-2 bt-2 bb-2 radius-left-8 min-w-8 border-color-{{color}}\"></div>\n <div class=\"bb-2 w-auto border-color-{{color}}\">\n <ng-content select=\"matcha-label\"></ng-content>\n </div>\n <div class=\"br-2 bt-2 bb-2 radius-right-8 w-100-p border-color-{{color}}\"></div>\n </div>\n <div class=\"flex-row position-relative py-8 px-12 gap-8 w-100-p\">\n <ng-content></ng-content>\n </div>\n </div>\n <ng-container *ngIf=\"showError\">\n <ng-content select=\"matcha-error\"></ng-content>\n </ng-container>\n</div>\n" }]
|
|
1587
1600
|
}], propDecorators: { color: [{
|
|
1588
1601
|
type: Input
|
|
1602
|
+
}], size: [{
|
|
1603
|
+
type: Input,
|
|
1604
|
+
args: ['size']
|
|
1605
|
+
}], sizeXs: [{
|
|
1606
|
+
type: Input,
|
|
1607
|
+
args: ['size-xs']
|
|
1608
|
+
}], sizeSm: [{
|
|
1609
|
+
type: Input,
|
|
1610
|
+
args: ['size-sm']
|
|
1611
|
+
}], sizeMd: [{
|
|
1612
|
+
type: Input,
|
|
1613
|
+
args: ['size-md']
|
|
1614
|
+
}], sizeLg: [{
|
|
1615
|
+
type: Input,
|
|
1616
|
+
args: ['size-lg']
|
|
1617
|
+
}], sizeXl: [{
|
|
1618
|
+
type: Input,
|
|
1619
|
+
args: ['size-xl']
|
|
1620
|
+
}], controlDir: [{
|
|
1621
|
+
type: ContentChild,
|
|
1622
|
+
args: [FormControlName]
|
|
1589
1623
|
}] } });
|
|
1590
1624
|
|
|
1591
1625
|
class MatchaLabelComponent {
|
|
@@ -1593,11 +1627,11 @@ class MatchaLabelComponent {
|
|
|
1593
1627
|
this.color = 'blue-grey';
|
|
1594
1628
|
}
|
|
1595
1629
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1596
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: MatchaLabelComponent, isStandalone: false, selector: "matcha-label", inputs: { color: "color" }, ngImport: i0, template: "<label\n class=\"d-flex d-flex-align-center position-relative text-nowrap px-
|
|
1630
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: MatchaLabelComponent, isStandalone: false, selector: "matcha-label", inputs: { color: "color" }, ngImport: i0, template: "<label\n class=\"d-flex d-flex-align-center position-relative text-nowrap px-4 fs-12 lh-18 fw-700 color-{{color}}\"\n style=\"transform: translateY(-8px);\">\n <ng-content></ng-content>\n <!-- <span class=\"pl-4 fs-10 fw-400 lh-16 matcha-color-placeholder\">*</span>\n <span class=\"pl-4 fs-10 fw-400 lh-16 matcha-color-placeholder\">(Opcional)</span> -->\n</label>", styles: [""] }); }
|
|
1597
1631
|
}
|
|
1598
1632
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaLabelComponent, decorators: [{
|
|
1599
1633
|
type: Component,
|
|
1600
|
-
args: [{ selector: 'matcha-label', standalone: false, template: "<label\n class=\"d-flex d-flex-align-center position-relative text-nowrap px-
|
|
1634
|
+
args: [{ selector: 'matcha-label', standalone: false, template: "<label\n class=\"d-flex d-flex-align-center position-relative text-nowrap px-4 fs-12 lh-18 fw-700 color-{{color}}\"\n style=\"transform: translateY(-8px);\">\n <ng-content></ng-content>\n <!-- <span class=\"pl-4 fs-10 fw-400 lh-16 matcha-color-placeholder\">*</span>\n <span class=\"pl-4 fs-10 fw-400 lh-16 matcha-color-placeholder\">(Opcional)</span> -->\n</label>" }]
|
|
1601
1635
|
}], propDecorators: { color: [{
|
|
1602
1636
|
type: Input
|
|
1603
1637
|
}] } });
|