matcha-components 19.50.0 → 19.51.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.
|
@@ -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) {
|
|
@@ -1577,15 +1577,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
|
|
|
1577
1577
|
class MatchaFormFieldComponent {
|
|
1578
1578
|
constructor() {
|
|
1579
1579
|
this.color = 'grey';
|
|
1580
|
+
this.size = null;
|
|
1581
|
+
this.sizeXs = null;
|
|
1582
|
+
this.sizeSm = null;
|
|
1583
|
+
this.sizeMd = null;
|
|
1584
|
+
this.sizeLg = null;
|
|
1585
|
+
this.sizeXl = null;
|
|
1586
|
+
}
|
|
1587
|
+
get control() {
|
|
1588
|
+
return this.controlDir?.control;
|
|
1589
|
+
}
|
|
1590
|
+
get showError() {
|
|
1591
|
+
return !!this.control?.invalid && (this.control?.touched || this.control?.dirty);
|
|
1580
1592
|
}
|
|
1581
1593
|
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
|
|
1594
|
+
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
1595
|
}
|
|
1584
1596
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaFormFieldComponent, decorators: [{
|
|
1585
1597
|
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
|
|
1598
|
+
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
1599
|
}], propDecorators: { color: [{
|
|
1588
1600
|
type: Input
|
|
1601
|
+
}], size: [{
|
|
1602
|
+
type: Input,
|
|
1603
|
+
args: ['size']
|
|
1604
|
+
}], sizeXs: [{
|
|
1605
|
+
type: Input,
|
|
1606
|
+
args: ['size-xs']
|
|
1607
|
+
}], sizeSm: [{
|
|
1608
|
+
type: Input,
|
|
1609
|
+
args: ['size-sm']
|
|
1610
|
+
}], sizeMd: [{
|
|
1611
|
+
type: Input,
|
|
1612
|
+
args: ['size-md']
|
|
1613
|
+
}], sizeLg: [{
|
|
1614
|
+
type: Input,
|
|
1615
|
+
args: ['size-lg']
|
|
1616
|
+
}], sizeXl: [{
|
|
1617
|
+
type: Input,
|
|
1618
|
+
args: ['size-xl']
|
|
1619
|
+
}], controlDir: [{
|
|
1620
|
+
type: ContentChild,
|
|
1621
|
+
args: [FormControlName]
|
|
1589
1622
|
}] } });
|
|
1590
1623
|
|
|
1591
1624
|
class MatchaLabelComponent {
|
|
@@ -1593,11 +1626,11 @@ class MatchaLabelComponent {
|
|
|
1593
1626
|
this.color = 'blue-grey';
|
|
1594
1627
|
}
|
|
1595
1628
|
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-
|
|
1629
|
+
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
1630
|
}
|
|
1598
1631
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MatchaLabelComponent, decorators: [{
|
|
1599
1632
|
type: Component,
|
|
1600
|
-
args: [{ selector: 'matcha-label', standalone: false, template: "<label\n class=\"d-flex d-flex-align-center position-relative text-nowrap px-
|
|
1633
|
+
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
1634
|
}], propDecorators: { color: [{
|
|
1602
1635
|
type: Input
|
|
1603
1636
|
}] } });
|