matcha-components 20.117.0 → 20.120.0

package/README.md

@@ -158,11 +158,6 @@ Run the serve command:
 > Terminal: `ng s`
 
 
----
-
-### Storybook
-Run `ng run matcha-components:storybook` or `npm run storybook`to execute the storybook aplication and see the documentation of all components via [storybook](https://storybook.js.org/tutorials/intro-to-storybook/angular/en/get-started/).
-
 ---
 
 ### Scaffold
@@ -322,7 +317,6 @@ $matcha-default-theme: matcha.dark-theme($default-dark-primary, $default-dark-ac
 ## Further help
 
 To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
-To get more help on the Storybook [stories](https://github.com/geromegrignon/angular-material-storybook/blob/main/stories/components/progress-bar/progress-bar.stories.ts)
 
 ## Roadmap
 

package/fesm2022/matcha-components.mjs

@@ -2781,21 +2781,28 @@ class MatchaSkeletonComponent {
         this.model = 'empty';
         this.gap = 16;
     }
+    // Getters privados para conversão sem modificar os inputs
+    get amountNumber() {
+        return typeof this.amount === 'string' ? parseInt(this.amount, 10) : this.amount;
+    }
+    get gridNumber() {
+        return typeof this.grid === 'string' ? parseInt(this.grid, 10) : this.grid;
+    }
     get classes() {
-        // if string parse to int
-        this.amount = typeof this.amount === 'string' ? parseInt(this.amount) : this.amount;
-        this.grid = typeof this.grid === 'string' ? parseInt(this.grid) : this.grid;
+        // Usa os valores convertidos sem modificar os inputs
+        const amountValue = this.amountNumber;
+        const gridValue = this.gridNumber;
         let classes = `gap-${this.gap} `;
-        this.amount > 1 ? classes += `grid-sm-${this.grid - 1} ` : classes;
-        this.amount > 2 ? classes += `grid-md-${this.grid} ` : classes;
+        amountValue > 1 ? classes += `grid-sm-${gridValue - 1} ` : classes;
+        amountValue > 2 ? classes += `grid-md-${gridValue} ` : classes;
         return classes;
     }
     get heightClass() {
         return `h-${this.height}`;
     }
     get amountArray() {
-        const amountNumber = typeof this.amount === 'string' ? parseInt(this.amount) : this.amount;
-        return Array(amountNumber).fill(0).map((_, index) => index);
+        const amountValue = this.amountNumber;
+        return Array(amountValue).fill(0).map((_, index) => index);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaSkeletonComponent, isStandalone: false, selector: "matcha-skeleton", inputs: { amount: "amount", grid: "grid", height: "height", model: "model", gap: "gap" }, host: { properties: { "attr.amount": "this.amount", "attr.grid": "this.grid", "attr.height": "this.height", "attr.model": "this.model", "attr.gap": "this.gap" } }, ngImport: i0, template: "<ng-content></ng-content>\n<!-- CARD SKELETON -->\n<div [class]=\"classes\" *ngIf=\"model !== 'table'\">\n    <div class=\"skeleton-animated-background flex-column--force p-0 radius-8 user-select-none overflow-hidden\" *ngFor=\"let i of amountArray\">\n\n        <ng-container *ngIf=\"model === 'profile'\"><span class=\"h8 title p-16 m-0\"> <span class=\"radius-full background-surface-alpha h-48 w-48\"></span>&nbsp;</span></ng-container>\n\n        <div [class]=\"'h-'+ height + ' flex-column--force p-16'\"></div>\n\n        <ng-container *ngIf=\"model === 'profile'\">\n            <div class=\"flex-column--force\">\n                <div class=\"flex-column--force p-16 gap-16\">\n                    <div class=\"w-100-p h-16 background-surface-alpha radius-full\"></div>\n                    <div class=\"w-100-p h-16 background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n        </ng-container>\n\n    </div>\n</div>\n<!-- CARD SKELETON -->\n\n<!-- TABLE SKELETON -->\n<div class=\"skeleton-animated-background w-100-p mr-16 flex-column--force p-0 radius-8 user-select-none\" *ngIf=\"model === 'table'\">\n\n    <div class=\"flex-column--force h-64 background-surface-alpha\">\n        <ng-container>&nbsp;</ng-container>\n    </div>\n\n    <ng-container *ngFor=\"let i of amountArray\">\n        <div class=\"grid-4 h-80 px-16 gap-16 flex-align-center--force\">\n            <div class=\"w-100-p flex-row--force gap-16\">\n                <div class=\"min-h-48 min-w-48 h-48 w-48 background-surface-alpha radius-full\"></div>\n                <div class=\"w-100-p flex-column--force flex-center--force gap-16\">\n                    <div class=\"h-16 w-60-p background-surface-alpha radius-full\"></div>\n                    <div class=\"h-16 w-100-p background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n            <div class=\"h-16 w-100-p flex-column--force background-surface-alpha radius-full\"></div>\n            <div class=\"w-100-p flex-row--force gap-16\">\n                <div class=\"w-100-p flex-column--force flex-center--force gap-16\">\n                    <div class=\"h-16 w-60-p background-surface-alpha radius-full\"></div>\n                    <div class=\"h-16 w-100-p background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n            <div class=\"h-16 w-100-p flex-column--force background-surface-alpha radius-full\"></div>\n        </div>\n\n        <div class=\"grid-4 h-80 px-16 gap-16 flex-align-center--force background-bg-alpha\">\n            <div class=\"w-100-p flex-row--force gap-16\">\n                <div class=\"min-h-48 min-w-48 h-48 w-48 background-surface-alpha radius-full\"></div>\n                <div class=\"w-100-p flex-column--force flex-center--force gap-16\">\n                    <div class=\"h-16 w-100-p background-surface-alpha radius-full\"></div>\n                    <div class=\"h-16 w-30-p background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n            <div class=\"h-16 w-100-p flex-column--force background-surface-alpha radius-full\"></div>\n            <div class=\"w-100-p flex-row--force gap-16\">\n                <div class=\"w-100-p flex-column--force flex-center--force gap-16\">\n                    <div class=\"h-16 w-60-p background-surface-alpha radius-full\"></div>\n                    <div class=\"h-16 w-100-p background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n            <div class=\"h-16 w-100-p flex-column--force background-surface-alpha radius-full\"></div>\n        </div>\n\n    </ng-container>\n\n</div>\n<!-- TABLE SKELETON -->\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }