@onemrvapublic/design-system 18.2.1-alpha.2 → 18.2.1-alpha.3
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.
|
@@ -109,11 +109,11 @@ export class OnemrvaMatSkeletonComponent {
|
|
|
109
109
|
this.items.length = this.count;
|
|
110
110
|
}
|
|
111
111
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: OnemrvaMatSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
112
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: OnemrvaMatSkeletonComponent, selector: "onemrva-mat-skeleton", inputs: { count: "count", animation: "animation", type: "type", size: "size", theme: "theme", ariaLabel: "ariaLabel", role: "role", loadingText: "loadingText", id: "id" }, host: { properties: { "attr.aria-label": "this.ariaLabel", "attr.role": "this.role", "attr.valuetext": "this.loadingText", "attr.id": "this.id", "class.progress": "this._isProgress", "class.pulse": "this._isPulse", "class.h1": "this.isH1", "class.h2": "this.isH2", "class.h3": "this.isH3", "class.h4": "this.isH4", "class.h5": "this.isH5", "class.h6": "this.isH6", "class.line": "this._isLine", "class.button": "this._isButton", "class.circle": "this._isCircle", "class.square": "this._isSquare", "class.custom": "this._isCustom", "class.extrasmall": "this._isXSmallSize", "class.small": "this._isSmallSize", "class.medium": "this._isMediumSize", "class.large": "this._isLargeSize", "class.extralarge": "this._isXLargeSize" } }, usesOnChanges: true, ngImport: i0, template: "<div\n *ngFor=\"let item of items\"\n class=\"skeleton-loader\"\n aria-busy=\"true\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n role=\"progressbar\"\n aria-label=\"loading\"\n [ngStyle]=\"theme\"\n>\n <ng-container *ngIf=\"type === 'custom'\">\n <ng-content></ng-content>\n </ng-container>\n</div>\n", styles: ["onemrva-mat-skeleton.circle,onemrva-mat-skeleton.square{--size: 56px;--resize: 12px}onemrva-mat-skeleton.circle.extrasmall,onemrva-mat-skeleton.square.extrasmall{--size: 32px;--font-size: 12px;--resize: 4px}onemrva-mat-skeleton.circle.small,onemrva-mat-skeleton.square.small{--size: 40px;--font-size: 16px;--resize: 8px}onemrva-mat-skeleton.circle.large,onemrva-mat-skeleton.square.large{--size: 72px;--font-size: 32px;--resize: 16px}onemrva-mat-skeleton.circle.extralarge,onemrva-mat-skeleton.square.extralarge{--resize: 22px;--size: 124px;--font-size: 60px}onemrva-mat-skeleton.circle .skeleton-loader,onemrva-mat-skeleton.square .skeleton-loader{width:var(--size);height:var(--size);margin-top:var(--resize);margin-left:var(--resize)}onemrva-mat-skeleton.circle .skeleton-loader{border-radius:50%}onemrva-mat-skeleton.h1 .skeleton-loader{height:51px}onemrva-mat-skeleton.h2 .skeleton-loader{height:46px}onemrva-mat-skeleton.h3 .skeleton-loader{height:40px}onemrva-mat-skeleton.h4 .skeleton-loader{height:35px}onemrva-mat-skeleton.button .skeleton-loader{height:36px;width:120px;border-radius:500px}onemrva-mat-skeleton.progress .skeleton-loader:
|
|
112
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: OnemrvaMatSkeletonComponent, selector: "onemrva-mat-skeleton", inputs: { count: "count", animation: "animation", type: "type", size: "size", theme: "theme", ariaLabel: "ariaLabel", role: "role", loadingText: "loadingText", id: "id" }, host: { properties: { "attr.aria-label": "this.ariaLabel", "attr.role": "this.role", "attr.valuetext": "this.loadingText", "attr.id": "this.id", "class.progress": "this._isProgress", "class.pulse": "this._isPulse", "class.h1": "this.isH1", "class.h2": "this.isH2", "class.h3": "this.isH3", "class.h4": "this.isH4", "class.h5": "this.isH5", "class.h6": "this.isH6", "class.line": "this._isLine", "class.button": "this._isButton", "class.circle": "this._isCircle", "class.square": "this._isSquare", "class.custom": "this._isCustom", "class.extrasmall": "this._isXSmallSize", "class.small": "this._isSmallSize", "class.medium": "this._isMediumSize", "class.large": "this._isLargeSize", "class.extralarge": "this._isXLargeSize" } }, usesOnChanges: true, ngImport: i0, template: "<div\n *ngFor=\"let item of items\"\n class=\"skeleton-loader\"\n aria-busy=\"true\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n role=\"progressbar\"\n aria-label=\"loading\"\n [ngStyle]=\"theme\"\n>\n <ng-container *ngIf=\"type === 'custom'\">\n <ng-content></ng-content>\n </ng-container>\n</div>\n", styles: ["onemrva-mat-skeleton.circle,onemrva-mat-skeleton.square{--size: 56px;--resize: 12px}onemrva-mat-skeleton.circle.extrasmall,onemrva-mat-skeleton.square.extrasmall{--size: 32px;--font-size: 12px;--resize: 4px}onemrva-mat-skeleton.circle.small,onemrva-mat-skeleton.square.small{--size: 40px;--font-size: 16px;--resize: 8px}onemrva-mat-skeleton.circle.large,onemrva-mat-skeleton.square.large{--size: 72px;--font-size: 32px;--resize: 16px}onemrva-mat-skeleton.circle.extralarge,onemrva-mat-skeleton.square.extralarge{--resize: 22px;--size: 124px;--font-size: 60px}onemrva-mat-skeleton.circle .skeleton-loader,onemrva-mat-skeleton.square .skeleton-loader{width:var(--size);height:var(--size);margin-top:var(--resize);margin-left:var(--resize)}onemrva-mat-skeleton.circle .skeleton-loader{border-radius:50%}onemrva-mat-skeleton.h1 .skeleton-loader{height:51px}onemrva-mat-skeleton.h2 .skeleton-loader{height:46px}onemrva-mat-skeleton.h3 .skeleton-loader{height:40px}onemrva-mat-skeleton.h4 .skeleton-loader{height:35px}onemrva-mat-skeleton.button .skeleton-loader{height:36px;width:120px;border-radius:500px}onemrva-mat-skeleton.progress .skeleton-loader{transform:translateZ(0)}onemrva-mat-skeleton.progress .skeleton-loader:after,onemrva-mat-skeleton.progress .skeleton-loader:before{box-sizing:border-box}onemrva-mat-skeleton.progress .skeleton-loader:before{animation:progress 2s ease-in-out infinite;background-size:200px 100%;position:absolute;z-index:1;top:0;left:0;width:200px;height:100%;content:\"\"}onemrva-mat-skeleton.progress .skeleton-loader:before{background-image:linear-gradient(90deg,#fff0,#fff9,#fff0)}onemrva-mat-skeleton.pulse .skeleton-loader{animation:pulse 1.5s cubic-bezier(.4,0,.2,1) infinite;animation-delay:.5s}onemrva-mat-skeleton.custom .skeleton-loader{height:100%;background:none}@media (prefers-reduced-motion: reduce){onemrva-mat-skeleton.pulse,onemrva-mat-skeleton.progress-dark,onemrva-mat-skeleton.custom,onemrva-mat-skeleton.progress{animation:none}onemrva-mat-skeleton.progress,onemrva-mat-skeleton.progress-dark,onemrva-mat-skeleton.custom{background-image:none}}onemrva-mat-skeleton .skeleton-loader{box-sizing:border-box;overflow:hidden;position:relative;background:#eff1f6 no-repeat;border-radius:4px;width:100%;height:20px;display:inline-block;margin-bottom:10px;will-change:transform}onemrva-mat-skeleton .skeleton-loader:after,onemrva-mat-skeleton .skeleton-loader:before{box-sizing:border-box}@keyframes progress{0%{transform:translate3d(-200px,0,0)}to{transform:translate3d(calc(200px + 100vw),0,0)}}@keyframes pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
113
113
|
}
|
|
114
114
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: OnemrvaMatSkeletonComponent, decorators: [{
|
|
115
115
|
type: Component,
|
|
116
|
-
args: [{ selector: 'onemrva-mat-skeleton', template: "<div\n *ngFor=\"let item of items\"\n class=\"skeleton-loader\"\n aria-busy=\"true\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n role=\"progressbar\"\n aria-label=\"loading\"\n [ngStyle]=\"theme\"\n>\n <ng-container *ngIf=\"type === 'custom'\">\n <ng-content></ng-content>\n </ng-container>\n</div>\n", styles: ["onemrva-mat-skeleton.circle,onemrva-mat-skeleton.square{--size: 56px;--resize: 12px}onemrva-mat-skeleton.circle.extrasmall,onemrva-mat-skeleton.square.extrasmall{--size: 32px;--font-size: 12px;--resize: 4px}onemrva-mat-skeleton.circle.small,onemrva-mat-skeleton.square.small{--size: 40px;--font-size: 16px;--resize: 8px}onemrva-mat-skeleton.circle.large,onemrva-mat-skeleton.square.large{--size: 72px;--font-size: 32px;--resize: 16px}onemrva-mat-skeleton.circle.extralarge,onemrva-mat-skeleton.square.extralarge{--resize: 22px;--size: 124px;--font-size: 60px}onemrva-mat-skeleton.circle .skeleton-loader,onemrva-mat-skeleton.square .skeleton-loader{width:var(--size);height:var(--size);margin-top:var(--resize);margin-left:var(--resize)}onemrva-mat-skeleton.circle .skeleton-loader{border-radius:50%}onemrva-mat-skeleton.h1 .skeleton-loader{height:51px}onemrva-mat-skeleton.h2 .skeleton-loader{height:46px}onemrva-mat-skeleton.h3 .skeleton-loader{height:40px}onemrva-mat-skeleton.h4 .skeleton-loader{height:35px}onemrva-mat-skeleton.button .skeleton-loader{height:36px;width:120px;border-radius:500px}onemrva-mat-skeleton.progress .skeleton-loader:
|
|
116
|
+
args: [{ selector: 'onemrva-mat-skeleton', template: "<div\n *ngFor=\"let item of items\"\n class=\"skeleton-loader\"\n aria-busy=\"true\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n role=\"progressbar\"\n aria-label=\"loading\"\n [ngStyle]=\"theme\"\n>\n <ng-container *ngIf=\"type === 'custom'\">\n <ng-content></ng-content>\n </ng-container>\n</div>\n", styles: ["onemrva-mat-skeleton.circle,onemrva-mat-skeleton.square{--size: 56px;--resize: 12px}onemrva-mat-skeleton.circle.extrasmall,onemrva-mat-skeleton.square.extrasmall{--size: 32px;--font-size: 12px;--resize: 4px}onemrva-mat-skeleton.circle.small,onemrva-mat-skeleton.square.small{--size: 40px;--font-size: 16px;--resize: 8px}onemrva-mat-skeleton.circle.large,onemrva-mat-skeleton.square.large{--size: 72px;--font-size: 32px;--resize: 16px}onemrva-mat-skeleton.circle.extralarge,onemrva-mat-skeleton.square.extralarge{--resize: 22px;--size: 124px;--font-size: 60px}onemrva-mat-skeleton.circle .skeleton-loader,onemrva-mat-skeleton.square .skeleton-loader{width:var(--size);height:var(--size);margin-top:var(--resize);margin-left:var(--resize)}onemrva-mat-skeleton.circle .skeleton-loader{border-radius:50%}onemrva-mat-skeleton.h1 .skeleton-loader{height:51px}onemrva-mat-skeleton.h2 .skeleton-loader{height:46px}onemrva-mat-skeleton.h3 .skeleton-loader{height:40px}onemrva-mat-skeleton.h4 .skeleton-loader{height:35px}onemrva-mat-skeleton.button .skeleton-loader{height:36px;width:120px;border-radius:500px}onemrva-mat-skeleton.progress .skeleton-loader{transform:translateZ(0)}onemrva-mat-skeleton.progress .skeleton-loader:after,onemrva-mat-skeleton.progress .skeleton-loader:before{box-sizing:border-box}onemrva-mat-skeleton.progress .skeleton-loader:before{animation:progress 2s ease-in-out infinite;background-size:200px 100%;position:absolute;z-index:1;top:0;left:0;width:200px;height:100%;content:\"\"}onemrva-mat-skeleton.progress .skeleton-loader:before{background-image:linear-gradient(90deg,#fff0,#fff9,#fff0)}onemrva-mat-skeleton.pulse .skeleton-loader{animation:pulse 1.5s cubic-bezier(.4,0,.2,1) infinite;animation-delay:.5s}onemrva-mat-skeleton.custom .skeleton-loader{height:100%;background:none}@media (prefers-reduced-motion: reduce){onemrva-mat-skeleton.pulse,onemrva-mat-skeleton.progress-dark,onemrva-mat-skeleton.custom,onemrva-mat-skeleton.progress{animation:none}onemrva-mat-skeleton.progress,onemrva-mat-skeleton.progress-dark,onemrva-mat-skeleton.custom{background-image:none}}onemrva-mat-skeleton .skeleton-loader{box-sizing:border-box;overflow:hidden;position:relative;background:#eff1f6 no-repeat;border-radius:4px;width:100%;height:20px;display:inline-block;margin-bottom:10px;will-change:transform}onemrva-mat-skeleton .skeleton-loader:after,onemrva-mat-skeleton .skeleton-loader:before{box-sizing:border-box}@keyframes progress{0%{transform:translate3d(-200px,0,0)}to{transform:translate3d(calc(200px + 100vw),0,0)}}@keyframes pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}\n"] }]
|
|
117
117
|
}], ctorParameters: () => [], propDecorators: { count: [{
|
|
118
118
|
type: Input
|
|
119
119
|
}], animation: [{
|
|
@@ -129,11 +129,11 @@ class OnemrvaMatSkeletonComponent {
|
|
|
129
129
|
this.items.length = this.count;
|
|
130
130
|
}
|
|
131
131
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: OnemrvaMatSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
132
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: OnemrvaMatSkeletonComponent, selector: "onemrva-mat-skeleton", inputs: { count: "count", animation: "animation", type: "type", size: "size", theme: "theme", ariaLabel: "ariaLabel", role: "role", loadingText: "loadingText", id: "id" }, host: { properties: { "attr.aria-label": "this.ariaLabel", "attr.role": "this.role", "attr.valuetext": "this.loadingText", "attr.id": "this.id", "class.progress": "this._isProgress", "class.pulse": "this._isPulse", "class.h1": "this.isH1", "class.h2": "this.isH2", "class.h3": "this.isH3", "class.h4": "this.isH4", "class.h5": "this.isH5", "class.h6": "this.isH6", "class.line": "this._isLine", "class.button": "this._isButton", "class.circle": "this._isCircle", "class.square": "this._isSquare", "class.custom": "this._isCustom", "class.extrasmall": "this._isXSmallSize", "class.small": "this._isSmallSize", "class.medium": "this._isMediumSize", "class.large": "this._isLargeSize", "class.extralarge": "this._isXLargeSize" } }, usesOnChanges: true, ngImport: i0, template: "<div\n *ngFor=\"let item of items\"\n class=\"skeleton-loader\"\n aria-busy=\"true\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n role=\"progressbar\"\n aria-label=\"loading\"\n [ngStyle]=\"theme\"\n>\n <ng-container *ngIf=\"type === 'custom'\">\n <ng-content></ng-content>\n </ng-container>\n</div>\n", styles: ["onemrva-mat-skeleton.circle,onemrva-mat-skeleton.square{--size: 56px;--resize: 12px}onemrva-mat-skeleton.circle.extrasmall,onemrva-mat-skeleton.square.extrasmall{--size: 32px;--font-size: 12px;--resize: 4px}onemrva-mat-skeleton.circle.small,onemrva-mat-skeleton.square.small{--size: 40px;--font-size: 16px;--resize: 8px}onemrva-mat-skeleton.circle.large,onemrva-mat-skeleton.square.large{--size: 72px;--font-size: 32px;--resize: 16px}onemrva-mat-skeleton.circle.extralarge,onemrva-mat-skeleton.square.extralarge{--resize: 22px;--size: 124px;--font-size: 60px}onemrva-mat-skeleton.circle .skeleton-loader,onemrva-mat-skeleton.square .skeleton-loader{width:var(--size);height:var(--size);margin-top:var(--resize);margin-left:var(--resize)}onemrva-mat-skeleton.circle .skeleton-loader{border-radius:50%}onemrva-mat-skeleton.h1 .skeleton-loader{height:51px}onemrva-mat-skeleton.h2 .skeleton-loader{height:46px}onemrva-mat-skeleton.h3 .skeleton-loader{height:40px}onemrva-mat-skeleton.h4 .skeleton-loader{height:35px}onemrva-mat-skeleton.button .skeleton-loader{height:36px;width:120px;border-radius:500px}onemrva-mat-skeleton.progress .skeleton-loader:
|
|
132
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: OnemrvaMatSkeletonComponent, selector: "onemrva-mat-skeleton", inputs: { count: "count", animation: "animation", type: "type", size: "size", theme: "theme", ariaLabel: "ariaLabel", role: "role", loadingText: "loadingText", id: "id" }, host: { properties: { "attr.aria-label": "this.ariaLabel", "attr.role": "this.role", "attr.valuetext": "this.loadingText", "attr.id": "this.id", "class.progress": "this._isProgress", "class.pulse": "this._isPulse", "class.h1": "this.isH1", "class.h2": "this.isH2", "class.h3": "this.isH3", "class.h4": "this.isH4", "class.h5": "this.isH5", "class.h6": "this.isH6", "class.line": "this._isLine", "class.button": "this._isButton", "class.circle": "this._isCircle", "class.square": "this._isSquare", "class.custom": "this._isCustom", "class.extrasmall": "this._isXSmallSize", "class.small": "this._isSmallSize", "class.medium": "this._isMediumSize", "class.large": "this._isLargeSize", "class.extralarge": "this._isXLargeSize" } }, usesOnChanges: true, ngImport: i0, template: "<div\n *ngFor=\"let item of items\"\n class=\"skeleton-loader\"\n aria-busy=\"true\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n role=\"progressbar\"\n aria-label=\"loading\"\n [ngStyle]=\"theme\"\n>\n <ng-container *ngIf=\"type === 'custom'\">\n <ng-content></ng-content>\n </ng-container>\n</div>\n", styles: ["onemrva-mat-skeleton.circle,onemrva-mat-skeleton.square{--size: 56px;--resize: 12px}onemrva-mat-skeleton.circle.extrasmall,onemrva-mat-skeleton.square.extrasmall{--size: 32px;--font-size: 12px;--resize: 4px}onemrva-mat-skeleton.circle.small,onemrva-mat-skeleton.square.small{--size: 40px;--font-size: 16px;--resize: 8px}onemrva-mat-skeleton.circle.large,onemrva-mat-skeleton.square.large{--size: 72px;--font-size: 32px;--resize: 16px}onemrva-mat-skeleton.circle.extralarge,onemrva-mat-skeleton.square.extralarge{--resize: 22px;--size: 124px;--font-size: 60px}onemrva-mat-skeleton.circle .skeleton-loader,onemrva-mat-skeleton.square .skeleton-loader{width:var(--size);height:var(--size);margin-top:var(--resize);margin-left:var(--resize)}onemrva-mat-skeleton.circle .skeleton-loader{border-radius:50%}onemrva-mat-skeleton.h1 .skeleton-loader{height:51px}onemrva-mat-skeleton.h2 .skeleton-loader{height:46px}onemrva-mat-skeleton.h3 .skeleton-loader{height:40px}onemrva-mat-skeleton.h4 .skeleton-loader{height:35px}onemrva-mat-skeleton.button .skeleton-loader{height:36px;width:120px;border-radius:500px}onemrva-mat-skeleton.progress .skeleton-loader{transform:translateZ(0)}onemrva-mat-skeleton.progress .skeleton-loader:after,onemrva-mat-skeleton.progress .skeleton-loader:before{box-sizing:border-box}onemrva-mat-skeleton.progress .skeleton-loader:before{animation:progress 2s ease-in-out infinite;background-size:200px 100%;position:absolute;z-index:1;top:0;left:0;width:200px;height:100%;content:\"\"}onemrva-mat-skeleton.progress .skeleton-loader:before{background-image:linear-gradient(90deg,#fff0,#fff9,#fff0)}onemrva-mat-skeleton.pulse .skeleton-loader{animation:pulse 1.5s cubic-bezier(.4,0,.2,1) infinite;animation-delay:.5s}onemrva-mat-skeleton.custom .skeleton-loader{height:100%;background:none}@media (prefers-reduced-motion: reduce){onemrva-mat-skeleton.pulse,onemrva-mat-skeleton.progress-dark,onemrva-mat-skeleton.custom,onemrva-mat-skeleton.progress{animation:none}onemrva-mat-skeleton.progress,onemrva-mat-skeleton.progress-dark,onemrva-mat-skeleton.custom{background-image:none}}onemrva-mat-skeleton .skeleton-loader{box-sizing:border-box;overflow:hidden;position:relative;background:#eff1f6 no-repeat;border-radius:4px;width:100%;height:20px;display:inline-block;margin-bottom:10px;will-change:transform}onemrva-mat-skeleton .skeleton-loader:after,onemrva-mat-skeleton .skeleton-loader:before{box-sizing:border-box}@keyframes progress{0%{transform:translate3d(-200px,0,0)}to{transform:translate3d(calc(200px + 100vw),0,0)}}@keyframes pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
133
133
|
}
|
|
134
134
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: OnemrvaMatSkeletonComponent, decorators: [{
|
|
135
135
|
type: Component,
|
|
136
|
-
args: [{ selector: 'onemrva-mat-skeleton', template: "<div\n *ngFor=\"let item of items\"\n class=\"skeleton-loader\"\n aria-busy=\"true\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n role=\"progressbar\"\n aria-label=\"loading\"\n [ngStyle]=\"theme\"\n>\n <ng-container *ngIf=\"type === 'custom'\">\n <ng-content></ng-content>\n </ng-container>\n</div>\n", styles: ["onemrva-mat-skeleton.circle,onemrva-mat-skeleton.square{--size: 56px;--resize: 12px}onemrva-mat-skeleton.circle.extrasmall,onemrva-mat-skeleton.square.extrasmall{--size: 32px;--font-size: 12px;--resize: 4px}onemrva-mat-skeleton.circle.small,onemrva-mat-skeleton.square.small{--size: 40px;--font-size: 16px;--resize: 8px}onemrva-mat-skeleton.circle.large,onemrva-mat-skeleton.square.large{--size: 72px;--font-size: 32px;--resize: 16px}onemrva-mat-skeleton.circle.extralarge,onemrva-mat-skeleton.square.extralarge{--resize: 22px;--size: 124px;--font-size: 60px}onemrva-mat-skeleton.circle .skeleton-loader,onemrva-mat-skeleton.square .skeleton-loader{width:var(--size);height:var(--size);margin-top:var(--resize);margin-left:var(--resize)}onemrva-mat-skeleton.circle .skeleton-loader{border-radius:50%}onemrva-mat-skeleton.h1 .skeleton-loader{height:51px}onemrva-mat-skeleton.h2 .skeleton-loader{height:46px}onemrva-mat-skeleton.h3 .skeleton-loader{height:40px}onemrva-mat-skeleton.h4 .skeleton-loader{height:35px}onemrva-mat-skeleton.button .skeleton-loader{height:36px;width:120px;border-radius:500px}onemrva-mat-skeleton.progress .skeleton-loader:
|
|
136
|
+
args: [{ selector: 'onemrva-mat-skeleton', template: "<div\n *ngFor=\"let item of items\"\n class=\"skeleton-loader\"\n aria-busy=\"true\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n role=\"progressbar\"\n aria-label=\"loading\"\n [ngStyle]=\"theme\"\n>\n <ng-container *ngIf=\"type === 'custom'\">\n <ng-content></ng-content>\n </ng-container>\n</div>\n", styles: ["onemrva-mat-skeleton.circle,onemrva-mat-skeleton.square{--size: 56px;--resize: 12px}onemrva-mat-skeleton.circle.extrasmall,onemrva-mat-skeleton.square.extrasmall{--size: 32px;--font-size: 12px;--resize: 4px}onemrva-mat-skeleton.circle.small,onemrva-mat-skeleton.square.small{--size: 40px;--font-size: 16px;--resize: 8px}onemrva-mat-skeleton.circle.large,onemrva-mat-skeleton.square.large{--size: 72px;--font-size: 32px;--resize: 16px}onemrva-mat-skeleton.circle.extralarge,onemrva-mat-skeleton.square.extralarge{--resize: 22px;--size: 124px;--font-size: 60px}onemrva-mat-skeleton.circle .skeleton-loader,onemrva-mat-skeleton.square .skeleton-loader{width:var(--size);height:var(--size);margin-top:var(--resize);margin-left:var(--resize)}onemrva-mat-skeleton.circle .skeleton-loader{border-radius:50%}onemrva-mat-skeleton.h1 .skeleton-loader{height:51px}onemrva-mat-skeleton.h2 .skeleton-loader{height:46px}onemrva-mat-skeleton.h3 .skeleton-loader{height:40px}onemrva-mat-skeleton.h4 .skeleton-loader{height:35px}onemrva-mat-skeleton.button .skeleton-loader{height:36px;width:120px;border-radius:500px}onemrva-mat-skeleton.progress .skeleton-loader{transform:translateZ(0)}onemrva-mat-skeleton.progress .skeleton-loader:after,onemrva-mat-skeleton.progress .skeleton-loader:before{box-sizing:border-box}onemrva-mat-skeleton.progress .skeleton-loader:before{animation:progress 2s ease-in-out infinite;background-size:200px 100%;position:absolute;z-index:1;top:0;left:0;width:200px;height:100%;content:\"\"}onemrva-mat-skeleton.progress .skeleton-loader:before{background-image:linear-gradient(90deg,#fff0,#fff9,#fff0)}onemrva-mat-skeleton.pulse .skeleton-loader{animation:pulse 1.5s cubic-bezier(.4,0,.2,1) infinite;animation-delay:.5s}onemrva-mat-skeleton.custom .skeleton-loader{height:100%;background:none}@media (prefers-reduced-motion: reduce){onemrva-mat-skeleton.pulse,onemrva-mat-skeleton.progress-dark,onemrva-mat-skeleton.custom,onemrva-mat-skeleton.progress{animation:none}onemrva-mat-skeleton.progress,onemrva-mat-skeleton.progress-dark,onemrva-mat-skeleton.custom{background-image:none}}onemrva-mat-skeleton .skeleton-loader{box-sizing:border-box;overflow:hidden;position:relative;background:#eff1f6 no-repeat;border-radius:4px;width:100%;height:20px;display:inline-block;margin-bottom:10px;will-change:transform}onemrva-mat-skeleton .skeleton-loader:after,onemrva-mat-skeleton .skeleton-loader:before{box-sizing:border-box}@keyframes progress{0%{transform:translate3d(-200px,0,0)}to{transform:translate3d(calc(200px + 100vw),0,0)}}@keyframes pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}\n"] }]
|
|
137
137
|
}], ctorParameters: () => [], propDecorators: { count: [{
|
|
138
138
|
type: Input
|
|
139
139
|
}], animation: [{
|
|
@@ -81,17 +81,15 @@ onemrva-mat-skeleton {
|
|
|
81
81
|
*/
|
|
82
82
|
&.progress {
|
|
83
83
|
.skeleton-loader {
|
|
84
|
+
// position: relative;
|
|
85
|
+
// this adds GPU acceleration
|
|
86
|
+
transform: translate3d(0, 0, 0);
|
|
87
|
+
|
|
84
88
|
&:after,
|
|
85
89
|
&:before {
|
|
86
90
|
box-sizing: border-box;
|
|
87
91
|
}
|
|
88
92
|
|
|
89
|
-
// position: relative;
|
|
90
|
-
// this adds GPU acceleration
|
|
91
|
-
& {
|
|
92
|
-
transform: translate3d(0, 0, 0);
|
|
93
|
-
}
|
|
94
|
-
|
|
95
93
|
&:before {
|
|
96
94
|
animation: progress 2s ease-in-out infinite;
|
|
97
95
|
background-size: 200px 100%;
|