matcha-components 19.114.0 → 19.118.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.
|
@@ -1913,11 +1913,11 @@ class MatchaSkeletonComponent {
|
|
|
1913
1913
|
return `h-${this.height}`;
|
|
1914
1914
|
}
|
|
1915
1915
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MatchaSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1916
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MatchaSkeletonComponent, isStandalone: false, selector: "matcha-skeleton", inputs: { amount: "amount", grid: "grid", height: "height", model: "model", gap: "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\" *ngFor=\"let i of [].constructor(amount)\">\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> </span></ng-container>\n\n <div [class]=\"'h-'+ height + ' flex-column--force p-16 background-bg-alpha'\"></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 </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> </ng-container>\n </div>\n\n <ng-container *ngFor=\"let i of [].constructor(amount)\">\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 -->", 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"] }] }); }
|
|
1916
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MatchaSkeletonComponent, isStandalone: false, selector: "matcha-skeleton", inputs: { amount: "amount", grid: "grid", height: "height", model: "model", gap: "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 [].constructor(amount)\">\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> </span></ng-container>\n\n <div [class]=\"'h-'+ height + ' flex-column--force p-16 background-bg-alpha'\"></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 </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> </ng-container>\n </div>\n\n <ng-container *ngFor=\"let i of [].constructor(amount)\">\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 -->", 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"] }] }); }
|
|
1917
1917
|
}
|
|
1918
1918
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MatchaSkeletonComponent, decorators: [{
|
|
1919
1919
|
type: Component,
|
|
1920
|
-
args: [{ selector: 'matcha-skeleton', standalone: false, 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\" *ngFor=\"let i of [].constructor(amount)\">\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> </span></ng-container>\n\n <div [class]=\"'h-'+ height + ' flex-column--force p-16 background-bg-alpha'\"></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 </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> </ng-container>\n </div>\n\n <ng-container *ngFor=\"let i of [].constructor(amount)\">\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 -->" }]
|
|
1920
|
+
args: [{ selector: 'matcha-skeleton', standalone: false, 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 [].constructor(amount)\">\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> </span></ng-container>\n\n <div [class]=\"'h-'+ height + ' flex-column--force p-16 background-bg-alpha'\"></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 </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> </ng-container>\n </div>\n\n <ng-container *ngFor=\"let i of [].constructor(amount)\">\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 -->" }]
|
|
1921
1921
|
}], propDecorators: { amount: [{
|
|
1922
1922
|
type: Input
|
|
1923
1923
|
}], grid: [{
|