matcha-components 19.27.0 → 19.29.0

package/fesm2022/matcha-components.mjs

@@ -916,29 +916,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
 
 class MatchaCardComponent {
     constructor() {
-        this.elevation = 0;
         this.blockquote = 'none';
         this.color = 'surface';
         this.blockquoteColor = null;
         this.class = '';
         this.alpha = false;
+        this.tint = false;
         this.loading = false;
     }
-    hasBlockquotePosition() {
-        return this.blockquote === 'left' || this.blockquote === 'right';
-    }
     get classes() {
-        const elevation = `elevation-z-${this.elevation}`;
         let backgroundColor = '';
         let blockquoteColor = '';
         let blockquotePosition = null;
         if (this.color === 'bg' || this.color === 'surface') {
-            if (this.alpha) {
-                backgroundColor = `background-${this.color}-alpha`;
-            }
-            else {
-                backgroundColor = `background-${this.color}`;
-            }
             if (this.hasBlockquotePosition()) {
                 blockquotePosition = `matcha-card-border-${this.blockquote}`;
                 blockquoteColor = this.blockquoteColor ? `border-color-${this.blockquoteColor}` : '';
@@ -949,12 +939,6 @@ class MatchaCardComponent {
             }
         }
         else {
-            if (this.alpha) {
-                backgroundColor = `background-${this.color}-alpha`;
-            }
-            else {
-                backgroundColor = `${this.color}`;
-            }
             if (this.hasBlockquotePosition()) {
                 blockquotePosition = `matcha-card-border-${this.blockquote}`;
                 blockquoteColor = this.color ? `border-color-${this.blockquoteColor}` : '';
@@ -964,18 +948,19 @@ class MatchaCardComponent {
                 blockquoteColor = '';
             }
         }
-        const activeClasses = `matcha-card ${elevation} ${blockquotePosition} ${blockquoteColor} ${backgroundColor} ${this.loading ? 'loading' : ''} ${this.class}`;
+        const activeClasses = `matcha-card ${blockquotePosition} ${blockquoteColor} ${backgroundColor} ${this.loading ? 'loading' : ''} ${this.class}`;
         return activeClasses;
     }
+    hasBlockquotePosition() {
+        return this.blockquote === 'left' || this.blockquote === 'right';
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: MatchaCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: MatchaCardComponent, isStandalone: false, selector: "matcha-card", inputs: { elevation: "elevation", blockquote: "blockquote", color: "color", blockquoteColor: "blockquoteColor", class: "class", alpha: "alpha", loading: "loading" }, ngImport: i0, template: "<div [class]=\"classes\">\n    <ng-content></ng-content>\n</div>\n", styles: [""] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: MatchaCardComponent, isStandalone: false, selector: "matcha-card", inputs: { blockquote: "blockquote", color: "color", blockquoteColor: "blockquoteColor", class: "class", alpha: "alpha", tint: "tint", loading: "loading" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: MatchaCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-card', standalone: false, template: "<div [class]=\"classes\">\n    <ng-content></ng-content>\n</div>\n" }]
-        }], propDecorators: { elevation: [{
-                type: Input
-            }], blockquote: [{
+            args: [{ selector: 'matcha-card', standalone: false, template: "<ng-content></ng-content>\n" }]
+        }], propDecorators: { blockquote: [{
                 type: Input
             }], color: [{
                 type: Input
@@ -985,8 +970,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                 type: Input
             }], alpha: [{
                 type: Input
+            }], tint: [{
+                type: Input
             }], loading: [{
                 type: Input
+            }], classes: [{
+                type: HostBinding,
+                args: ['class']
             }] } });
 
 class MatchaDividerComponent {
@@ -1552,11 +1542,11 @@ class MatchaFormFieldComponent {
         this.color = 'grey';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: MatchaFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", 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 p-8 gap-8\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n    <ng-content select=\"matcha-error\"></ng-content>\n</div>\n", styles: [""] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", 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 p-8 gap-8 w-100-p\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n    <ng-content select=\"matcha-error\"></ng-content>\n</div>\n", styles: [""] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: MatchaFormFieldComponent, decorators: [{
             type: Component,
-            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 p-8 gap-8\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n    <ng-content select=\"matcha-error\"></ng-content>\n</div>\n" }]
+            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 p-8 gap-8 w-100-p\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n    <ng-content select=\"matcha-error\"></ng-content>\n</div>\n" }]
         }], propDecorators: { color: [{
                 type: Input
             }] } });
@@ -2026,14 +2016,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
 
 class MatchaCardModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: MatchaCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: MatchaCardModule, declarations: [MatchaCardComponent], imports: [CommonModule], exports: [MatchaCardComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: MatchaCardModule, imports: [CommonModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: MatchaCardModule, declarations: [MatchaCardComponent], imports: [CommonModule,
+            MatchaElevationModule,
+            MatchaIconModule,
+            MatchaTitleModule,
+            MatchaDividerModule,
+            MatchaTooltipModule], exports: [MatchaCardComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: MatchaCardModule, imports: [CommonModule,
+            MatchaElevationModule,
+            MatchaIconModule,
+            MatchaTitleModule,
+            MatchaDividerModule,
+            MatchaTooltipModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: MatchaCardModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaCardComponent],
-                    imports: [CommonModule],
+                    imports: [
+                        CommonModule,
+                        MatchaElevationModule,
+                        MatchaIconModule,
+                        MatchaTitleModule,
+                        MatchaDividerModule,
+                        MatchaTooltipModule,
+                    ],
                     exports: [MatchaCardComponent],
                 }]
         }] });