@leanix/components 0.4.271 → 0.4.272
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.
|
@@ -1,12 +1,18 @@
|
|
|
1
1
|
import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
export class SkeletonComponent {
|
|
4
|
+
constructor() {
|
|
5
|
+
/**
|
|
6
|
+
* Color of the skeleton element. 'dark' or 'light' are supported. Default is 'light'.
|
|
7
|
+
*/
|
|
8
|
+
this.color = 'light';
|
|
9
|
+
}
|
|
4
10
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: SkeletonComponent, isStandalone: true, selector: "lx-skeleton", inputs: { width: "width", height: "height", borderRadius: "borderRadius" }, host: { properties: { "style.width": "this.width", "style.height": "this.height", "style.border-radius": "this.borderRadius" } }, ngImport: i0, template: '', isInline: true, styles: [":host{display:block;position:relative;overflow:hidden;width:100%;height:18px;
|
|
11
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: SkeletonComponent, isStandalone: true, selector: "lx-skeleton", inputs: { width: "width", height: "height", borderRadius: "borderRadius", color: "color" }, host: { properties: { "style.width": "this.width", "style.height": "this.height", "style.border-radius": "this.borderRadius", "attr.color": "this.color" } }, ngImport: i0, template: '', isInline: true, styles: [":host{display:block;position:relative;overflow:hidden;width:100%;height:18px;border-radius:4px;animation:pulse 1.5s infinite;filter:drop-shadow(0px 0px 2px #fff)}:host[color=dark]{background-color:#e1e5eb}:host[color=light]{background-color:#eaedf1}:host:after{content:\"\";position:absolute;inset:0;transform:translate(-100%);background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(194,201,214,.2) 20%,rgba(194,201,214,.5) 60%,rgba(255,255,255,0));animation:shimmer 1.5s cubic-bezier(.4,0,.2,1) infinite}@keyframes shimmer{to{transform:translate(100%)}}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}@media (prefers-reduced-motion: reduce){:host:after{animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6
12
|
}
|
|
7
13
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkeletonComponent, decorators: [{
|
|
8
14
|
type: Component,
|
|
9
|
-
args: [{ selector: 'lx-skeleton', template: '', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, styles: [":host{display:block;position:relative;overflow:hidden;width:100%;height:18px;
|
|
15
|
+
args: [{ selector: 'lx-skeleton', template: '', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, styles: [":host{display:block;position:relative;overflow:hidden;width:100%;height:18px;border-radius:4px;animation:pulse 1.5s infinite;filter:drop-shadow(0px 0px 2px #fff)}:host[color=dark]{background-color:#e1e5eb}:host[color=light]{background-color:#eaedf1}:host:after{content:\"\";position:absolute;inset:0;transform:translate(-100%);background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(194,201,214,.2) 20%,rgba(194,201,214,.5) 60%,rgba(255,255,255,0));animation:shimmer 1.5s cubic-bezier(.4,0,.2,1) infinite}@keyframes shimmer{to{transform:translate(100%)}}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}@media (prefers-reduced-motion: reduce){:host:after{animation:none}}\n"] }]
|
|
10
16
|
}], propDecorators: { width: [{
|
|
11
17
|
type: HostBinding,
|
|
12
18
|
args: ['style.width']
|
|
@@ -22,5 +28,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
|
|
|
22
28
|
args: ['style.border-radius']
|
|
23
29
|
}, {
|
|
24
30
|
type: Input
|
|
31
|
+
}], color: [{
|
|
32
|
+
type: HostBinding,
|
|
33
|
+
args: ['attr.color']
|
|
34
|
+
}, {
|
|
35
|
+
type: Input
|
|
25
36
|
}] } });
|
|
26
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
37
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2tlbGV0b24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9jb21wb25lbnRzL3NyYy9saWIvY29yZS11aS9jb21wb25lbnRzL3NrZWxldG9uL3NrZWxldG9uLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLFdBQVcsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBU3ZGLE1BQU0sT0FBTyxpQkFBaUI7SUFQOUI7UUF1QkU7O1dBRUc7UUFDaUMsVUFBSyxHQUFxQixPQUFPLENBQUM7S0FDdkU7OEdBcEJZLGlCQUFpQjtrR0FBakIsaUJBQWlCLGlVQUxsQixFQUFFOzsyRkFLRCxpQkFBaUI7a0JBUDdCLFNBQVM7K0JBQ0UsYUFBYSxZQUNiLEVBQUUsbUJBRUssdUJBQXVCLENBQUMsTUFBTSxjQUNuQyxJQUFJOzhCQU1xQixLQUFLO3NCQUF6QyxXQUFXO3VCQUFDLGFBQWE7O3NCQUFHLEtBQUs7Z0JBS0ksTUFBTTtzQkFBM0MsV0FBVzt1QkFBQyxjQUFjOztzQkFBRyxLQUFLO2dCQUtVLFlBQVk7c0JBQXhELFdBQVc7dUJBQUMscUJBQXFCOztzQkFBRyxLQUFLO2dCQUtOLEtBQUs7c0JBQXhDLFdBQVc7dUJBQUMsWUFBWTs7c0JBQUcsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIEhvc3RCaW5kaW5nLCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdseC1za2VsZXRvbicsXG4gIHRlbXBsYXRlOiAnJyxcbiAgc3R5bGVVcmw6ICdza2VsZXRvbi5jb21wb25lbnQuc2NzcycsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBzdGFuZGFsb25lOiB0cnVlXG59KVxuZXhwb3J0IGNsYXNzIFNrZWxldG9uQ29tcG9uZW50IHtcbiAgLyoqXG4gICAqIFdpZHRoIG9mIHRoZSBza2VsZXRvbiBlbGVtZW50LiBWYWxpZCBDU1MgdmFsdWVzIGFyZSBzdXBwb3J0ZWQuIERlZmF1bHQgaXMgMTAwJSB3aWR0aCBvZiB0aGUgcGFyZW50LlxuICAgKi9cbiAgQEhvc3RCaW5kaW5nKCdzdHlsZS53aWR0aCcpIEBJbnB1dCgpIHdpZHRoPzogc3RyaW5nO1xuXG4gIC8qKlxuICAgKiBIZWlnaHQgb2YgdGhlIHNrZWxldG9uIGVsZW1lbnQuIFZhbGlkIENTUyB2YWx1ZXMgYXJlIHN1cHBvcnRlZC4gRGVmYXVsdCBpcyAxMDAlIGhlaWdodCBvZiB0aGUgcGFyZW50LlxuICAgKi9cbiAgQEhvc3RCaW5kaW5nKCdzdHlsZS5oZWlnaHQnKSBASW5wdXQoKSBoZWlnaHQ/OiBzdHJpbmc7XG5cbiAgLyoqXG4gICAqIEJvcmRlciByYWRpdXMgb2YgdGhlIHNrZWxldG9uIGVsZW1lbnQuIFZhbGlkIENTUyB2YWx1ZXMgYXJlIHN1cHBvcnRlZC4gRGVmYXVsdCBpcyA0cHguXG4gICAqL1xuICBASG9zdEJpbmRpbmcoJ3N0eWxlLmJvcmRlci1yYWRpdXMnKSBASW5wdXQoKSBib3JkZXJSYWRpdXM/OiBzdHJpbmc7XG5cbiAgLyoqXG4gICAqIENvbG9yIG9mIHRoZSBza2VsZXRvbiBlbGVtZW50LiAnZGFyaycgb3IgJ2xpZ2h0JyBhcmUgc3VwcG9ydGVkLiBEZWZhdWx0IGlzICdsaWdodCcuXG4gICAqL1xuICBASG9zdEJpbmRpbmcoJ2F0dHIuY29sb3InKSBASW5wdXQoKSBjb2xvcjogJ2RhcmsnIHwgJ2xpZ2h0JyA9ICdsaWdodCc7XG59XG4iXX0=
|
|
@@ -2244,12 +2244,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
|
|
|
2244
2244
|
}] });
|
|
2245
2245
|
|
|
2246
2246
|
class SkeletonComponent {
|
|
2247
|
+
constructor() {
|
|
2248
|
+
/**
|
|
2249
|
+
* Color of the skeleton element. 'dark' or 'light' are supported. Default is 'light'.
|
|
2250
|
+
*/
|
|
2251
|
+
this.color = 'light';
|
|
2252
|
+
}
|
|
2247
2253
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2248
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: SkeletonComponent, isStandalone: true, selector: "lx-skeleton", inputs: { width: "width", height: "height", borderRadius: "borderRadius" }, host: { properties: { "style.width": "this.width", "style.height": "this.height", "style.border-radius": "this.borderRadius" } }, ngImport: i0, template: '', isInline: true, styles: [":host{display:block;position:relative;overflow:hidden;width:100%;height:18px;
|
|
2254
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: SkeletonComponent, isStandalone: true, selector: "lx-skeleton", inputs: { width: "width", height: "height", borderRadius: "borderRadius", color: "color" }, host: { properties: { "style.width": "this.width", "style.height": "this.height", "style.border-radius": "this.borderRadius", "attr.color": "this.color" } }, ngImport: i0, template: '', isInline: true, styles: [":host{display:block;position:relative;overflow:hidden;width:100%;height:18px;border-radius:4px;animation:pulse 1.5s infinite;filter:drop-shadow(0px 0px 2px #fff)}:host[color=dark]{background-color:#e1e5eb}:host[color=light]{background-color:#eaedf1}:host:after{content:\"\";position:absolute;inset:0;transform:translate(-100%);background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(194,201,214,.2) 20%,rgba(194,201,214,.5) 60%,rgba(255,255,255,0));animation:shimmer 1.5s cubic-bezier(.4,0,.2,1) infinite}@keyframes shimmer{to{transform:translate(100%)}}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}@media (prefers-reduced-motion: reduce){:host:after{animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2249
2255
|
}
|
|
2250
2256
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkeletonComponent, decorators: [{
|
|
2251
2257
|
type: Component,
|
|
2252
|
-
args: [{ selector: 'lx-skeleton', template: '', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, styles: [":host{display:block;position:relative;overflow:hidden;width:100%;height:18px;
|
|
2258
|
+
args: [{ selector: 'lx-skeleton', template: '', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, styles: [":host{display:block;position:relative;overflow:hidden;width:100%;height:18px;border-radius:4px;animation:pulse 1.5s infinite;filter:drop-shadow(0px 0px 2px #fff)}:host[color=dark]{background-color:#e1e5eb}:host[color=light]{background-color:#eaedf1}:host:after{content:\"\";position:absolute;inset:0;transform:translate(-100%);background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(194,201,214,.2) 20%,rgba(194,201,214,.5) 60%,rgba(255,255,255,0));animation:shimmer 1.5s cubic-bezier(.4,0,.2,1) infinite}@keyframes shimmer{to{transform:translate(100%)}}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}@media (prefers-reduced-motion: reduce){:host:after{animation:none}}\n"] }]
|
|
2253
2259
|
}], propDecorators: { width: [{
|
|
2254
2260
|
type: HostBinding,
|
|
2255
2261
|
args: ['style.width']
|
|
@@ -2265,6 +2271,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
|
|
|
2265
2271
|
args: ['style.border-radius']
|
|
2266
2272
|
}, {
|
|
2267
2273
|
type: Input
|
|
2274
|
+
}], color: [{
|
|
2275
|
+
type: HostBinding,
|
|
2276
|
+
args: ['attr.color']
|
|
2277
|
+
}, {
|
|
2278
|
+
type: Input
|
|
2268
2279
|
}] } });
|
|
2269
2280
|
|
|
2270
2281
|
class TokenComponent {
|