@libs-ui/components-skeleton 0.2.10 → 0.2.11
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.
- package/esm2022/interfaces/skeleton-item.interface.mjs +1 -1
- package/esm2022/skeleton.component.mjs +22 -18
- package/fesm2022/libs-ui-components-skeleton.mjs +21 -17
- package/fesm2022/libs-ui-components-skeleton.mjs.map +1 -1
- package/interfaces/skeleton-item.interface.d.ts +1 -1
- package/package.json +1 -1
- package/skeleton.component.d.ts +3 -2
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export {};
|
|
2
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2tlbGV0b24taXRlbS5pbnRlcmZhY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvc2tlbGV0b24vc3JjL2ludGVyZmFjZXMvc2tlbGV0b24taXRlbS5pbnRlcmZhY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBpbnRlcmZhY2UgSVNrZWxldG9uQ29uZmlnIHtcbiAgcmVwZWF0PzogbnVtYmVyO1xuICBoZWlnaHRDb250YWluZXI/OiBudW1iZXI7XG4gIGNsYXNzUm93cz86IHN0cmluZztcbiAgc3R5bGVNYXJnaW5Cb3R0b20/
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2tlbGV0b24taXRlbS5pbnRlcmZhY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvc2tlbGV0b24vc3JjL2ludGVyZmFjZXMvc2tlbGV0b24taXRlbS5pbnRlcmZhY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBpbnRlcmZhY2UgSVNrZWxldG9uQ29uZmlnIHtcbiAgcmVwZWF0PzogbnVtYmVyO1xuICBoZWlnaHRDb250YWluZXI/OiBudW1iZXI7XG4gIGNsYXNzUm93cz86IHN0cmluZztcbiAgc3R5bGVNYXJnaW5Cb3R0b20/OiBudW1iZXI7XG4gIHJvd3M/OiBBcnJheTx7XG4gICAgcmVwZWF0PzogbnVtYmVyO1xuICAgIGNsYXNzUm93Pzogc3RyaW5nO1xuICAgIGNsYXNzUm93TGFzdD86IHN0cmluZztcbiAgICBpdGVtPzogSVNrZWxldG9uSXRlbTtcbiAgICBjbGFzc0NvbHM/OiBzdHJpbmc7XG4gICAgY2xhc3NDb2xzTGFzdD86IHN0cmluZztcbiAgICBjb2xzPzogQXJyYXk8e1xuICAgICAgcmVwZWF0PzogbnVtYmVyO1xuICAgICAgY2xhc3NDb2w/OiBzdHJpbmc7XG4gICAgICBjbGFzc0NvbExhc3Q/OiBzdHJpbmc7XG4gICAgICBpdGVtPzogSVNrZWxldG9uSXRlbTtcbiAgICB9PjtcbiAgfT47XG59XG5cbmludGVyZmFjZSBJU2tlbGV0b25JdGVtIHtcbiAgY2xhc3NJbmNsdWRlSXRlbT86IHN0cmluZztcbiAgY2xhc3NJbmNsdWRlPzogc3RyaW5nO1xuICBjbGFzcz86IHN0cmluZztcbiAgc3R5bGVEZWZhdWx0PzogYm9vbGVhbjtcbn0iXX0=
|
|
@@ -1,31 +1,35 @@
|
|
|
1
1
|
import { NgTemplateOutlet } from "@angular/common";
|
|
2
|
-
import { ChangeDetectionStrategy, Component,
|
|
2
|
+
import { ChangeDetectionStrategy, Component, input, signal, viewChild } from "@angular/core";
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
4
|
export class LibsUiComponentsSkeletonComponent {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
heightContainer: 150,
|
|
8
|
-
styleMarginBottom: 16,
|
|
9
|
-
rows: [{
|
|
10
|
-
item: {}
|
|
11
|
-
}]
|
|
12
|
-
});
|
|
5
|
+
configRender = signal({});
|
|
6
|
+
config = input({}, { transform: value => value || {} });
|
|
13
7
|
skeletonRef = viewChild.required('skeletonRef');
|
|
14
8
|
ngAfterViewInit() {
|
|
15
9
|
setTimeout(() => {
|
|
16
|
-
|
|
17
|
-
this.config
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
10
|
+
this.configRender.update(config => {
|
|
11
|
+
config = this.config();
|
|
12
|
+
let offsetHeight = this.skeletonRef().nativeElement.offsetHeight;
|
|
13
|
+
if (!config.rows?.length) {
|
|
14
|
+
config.rows = [{ item: {} }];
|
|
15
|
+
}
|
|
16
|
+
if (!config.heightContainer) {
|
|
17
|
+
config.heightContainer = offsetHeight - (config.styleMarginBottom || 0);
|
|
18
|
+
}
|
|
19
|
+
if (config.repeat) {
|
|
20
|
+
offsetHeight = offsetHeight || config.heightContainer || config.styleMarginBottom || 0;
|
|
21
|
+
config.heightContainer = (offsetHeight / config.repeat) - (config.styleMarginBottom || 0);
|
|
22
|
+
}
|
|
23
|
+
config.repeat = Math.ceil((offsetHeight / ((config.heightContainer || 0) + (config.styleMarginBottom || 0))));
|
|
24
|
+
return { ...config };
|
|
25
|
+
});
|
|
22
26
|
});
|
|
23
27
|
}
|
|
24
28
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
25
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsSkeletonComponent, isStandalone: true, selector: "libs_ui-components-skeleton", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } },
|
|
29
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsSkeletonComponent, isStandalone: true, selector: "libs_ui-components-skeleton", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "skeletonRef", first: true, predicate: ["skeletonRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #skeletonRef\n class=\"w-full h-full\">\n @if (configRender(); as config) {\n @for (configRepeat of [].constructor(config.repeat || 1);track $index;let lastItem = $last) {\n <div [style.marginBottom.px]=\"(config.styleMarginBottom && !lastItem) ? config.styleMarginBottom:0\"\n [style.height.px]=\"config.heightContainer\"\n [class]=\"(config.classRows || '')+' flex flex-col'\">\n @for (row of config.rows;track $index;) {\n @for (rowRepeat of [].constructor(row.repeat || 1);track $index;let firstRow = $first;let lastRow = $last) {\n <div\n [class]=\"((lastRow || (firstRow && lastRow) ? row.classRowLast : row.classRow) || '')+ ' flex flex-col w-full h-full'\">\n @if (row.item) {\n <ng-container *ngTemplateOutlet=\"templateSkeleton; context: { config :row.item }\" />\n }\n <div [class]=\"((lastRow || firstRow && lastRow ? row.classColsLast : row.classCols) || '')+'flex w-full'\">\n @for (col of row.cols;track $index;) {\n @for (colRepeat of [].constructor(col.repeat || 1);track $index;let firstCol = $first;let lastCol = $last) {\n <div\n [class]=\"((lastCol || firstCol && lastCol ? col.classColLast : col.classCol) || '')+ ' flex w-full'\">\n @if (col.item) {\n <ng-container *ngTemplateOutlet=\"templateSkeleton; context: { config :col.item }\" />\n }\n </div>\n }\n }\n </div>\n </div>\n }}\n </div>\n }\n }\n</div>\n\n<ng-template #templateSkeleton\n let-config=\"config\">\n <div [class]=\"config?.classInclude || 'w-full h-full' \">\n @for (_ of [].constructor(config.repeat || 1);track $index; let last = $last) {\n <div class=\"w-full h-full skeleton rounded-[8px] {{ config?.classIncludeItem || '' }}\"\n [class.mb-[16px]]=\"config?.styleDefault && !last\">\n </div>\n }\n </div>\n</ng-template>\n", styles: ["@keyframes mo-skeleton-loading{0%{background-position:100% 50%}to{background-position:0 50%}}.skeleton{animation:mo-skeleton-loading 1.4s ease infinite;background:linear-gradient(90deg,#bebebe33 25%,#8181813d 37%,#bebebe33 63%);background-size:400% 100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
26
30
|
}
|
|
27
31
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsSkeletonComponent, decorators: [{
|
|
28
32
|
type: Component,
|
|
29
|
-
args: [{ selector: 'libs_ui-components-skeleton', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #skeletonRef\n class=\"w-full h-full\">\n @if (
|
|
33
|
+
args: [{ selector: 'libs_ui-components-skeleton', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #skeletonRef\n class=\"w-full h-full\">\n @if (configRender(); as config) {\n @for (configRepeat of [].constructor(config.repeat || 1);track $index;let lastItem = $last) {\n <div [style.marginBottom.px]=\"(config.styleMarginBottom && !lastItem) ? config.styleMarginBottom:0\"\n [style.height.px]=\"config.heightContainer\"\n [class]=\"(config.classRows || '')+' flex flex-col'\">\n @for (row of config.rows;track $index;) {\n @for (rowRepeat of [].constructor(row.repeat || 1);track $index;let firstRow = $first;let lastRow = $last) {\n <div\n [class]=\"((lastRow || (firstRow && lastRow) ? row.classRowLast : row.classRow) || '')+ ' flex flex-col w-full h-full'\">\n @if (row.item) {\n <ng-container *ngTemplateOutlet=\"templateSkeleton; context: { config :row.item }\" />\n }\n <div [class]=\"((lastRow || firstRow && lastRow ? row.classColsLast : row.classCols) || '')+'flex w-full'\">\n @for (col of row.cols;track $index;) {\n @for (colRepeat of [].constructor(col.repeat || 1);track $index;let firstCol = $first;let lastCol = $last) {\n <div\n [class]=\"((lastCol || firstCol && lastCol ? col.classColLast : col.classCol) || '')+ ' flex w-full'\">\n @if (col.item) {\n <ng-container *ngTemplateOutlet=\"templateSkeleton; context: { config :col.item }\" />\n }\n </div>\n }\n }\n </div>\n </div>\n }}\n </div>\n }\n }\n</div>\n\n<ng-template #templateSkeleton\n let-config=\"config\">\n <div [class]=\"config?.classInclude || 'w-full h-full' \">\n @for (_ of [].constructor(config.repeat || 1);track $index; let last = $last) {\n <div class=\"w-full h-full skeleton rounded-[8px] {{ config?.classIncludeItem || '' }}\"\n [class.mb-[16px]]=\"config?.styleDefault && !last\">\n </div>\n }\n </div>\n</ng-template>\n", styles: ["@keyframes mo-skeleton-loading{0%{background-position:100% 50%}to{background-position:0 50%}}.skeleton{animation:mo-skeleton-loading 1.4s ease infinite;background:linear-gradient(90deg,#bebebe33 25%,#8181813d 37%,#bebebe33 63%);background-size:400% 100%}\n"] }]
|
|
30
34
|
}] });
|
|
31
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
35
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2tlbGV0b24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vbGlicy11aS9jb21wb25lbnRzL3NrZWxldG9uL3NyYy9za2VsZXRvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvc2tlbGV0b24vc3JjL3NrZWxldG9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQ25ELE9BQU8sRUFBaUIsdUJBQXVCLEVBQUUsU0FBUyxFQUFjLEtBQUssRUFBRSxNQUFNLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDOztBQVl4SCxNQUFNLE9BQU8saUNBQWlDO0lBQ2xDLFlBQVksR0FBRyxNQUFNLENBQWtCLEVBQUUsQ0FBQyxDQUFBO0lBRTNDLE1BQU0sR0FBRyxLQUFLLENBQStDLEVBQUUsRUFBRSxFQUFFLFNBQVMsRUFBRSxLQUFLLENBQUMsRUFBRSxDQUFDLEtBQUssSUFBSSxFQUFFLEVBQUUsQ0FBQyxDQUFDO0lBRXRHLFdBQVcsR0FBRyxTQUFTLENBQUMsUUFBUSxDQUFhLGFBQWEsQ0FBQyxDQUFDO0lBRXJFLGVBQWU7UUFDYixVQUFVLENBQUMsR0FBRyxFQUFFO1lBQ2QsSUFBSSxDQUFDLFlBQVksQ0FBQyxNQUFNLENBQUMsTUFBTSxDQUFDLEVBQUU7Z0JBQ2hDLE1BQU0sR0FBRyxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUM7Z0JBQ3ZCLElBQUksWUFBWSxHQUFHLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQyxhQUFhLENBQUMsWUFBWSxDQUFDO2dCQUNqRSxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztvQkFDekIsTUFBTSxDQUFDLElBQUksR0FBRyxDQUFDLEVBQUUsSUFBSSxFQUFFLEVBQUUsRUFBRSxDQUFDLENBQUM7Z0JBQy9CLENBQUM7Z0JBQ0QsSUFBSSxDQUFDLE1BQU0sQ0FBQyxlQUFlLEVBQUUsQ0FBQztvQkFDNUIsTUFBTSxDQUFDLGVBQWUsR0FBRyxZQUFZLEdBQUcsQ0FBQyxNQUFNLENBQUMsaUJBQWlCLElBQUksQ0FBQyxDQUFDLENBQUM7Z0JBQzFFLENBQUM7Z0JBQ0QsSUFBSSxNQUFNLENBQUMsTUFBTSxFQUFFLENBQUM7b0JBQ2xCLFlBQVksR0FBRyxZQUFZLElBQUksTUFBTSxDQUFDLGVBQWUsSUFBSSxNQUFNLENBQUMsaUJBQWlCLElBQUksQ0FBQyxDQUFDO29CQUN2RixNQUFNLENBQUMsZUFBZSxHQUFHLENBQUMsWUFBWSxHQUFHLE1BQU0sQ0FBQyxNQUFNLENBQUMsR0FBRyxDQUFDLE1BQU0sQ0FBQyxpQkFBaUIsSUFBSSxDQUFDLENBQUMsQ0FBQztnQkFDNUYsQ0FBQztnQkFDRCxNQUFNLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxZQUFZLEdBQUcsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxlQUFlLElBQUksQ0FBQyxDQUFDLEdBQUcsQ0FBQyxNQUFNLENBQUMsaUJBQWlCLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7Z0JBRTlHLE9BQU8sRUFBRSxHQUFHLE1BQU0sRUFBRSxDQUFDO1lBQ3ZCLENBQUMsQ0FBQyxDQUFDO1FBQ0wsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDO3dHQTNCVSxpQ0FBaUM7NEZBQWpDLGlDQUFpQywwVkNiOUMsbWpFQTJDQSwwVERqQ1ksZ0JBQWdCOzs0RkFHZixpQ0FBaUM7a0JBVDdDLFNBQVM7K0JBRUUsNkJBQTZCLGNBRzNCLElBQUksV0FDUCxDQUFDLGdCQUFnQixDQUFDLG1CQUNWLHVCQUF1QixDQUFDLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBOZ1RlbXBsYXRlT3V0bGV0IH0gZnJvbSBcIkBhbmd1bGFyL2NvbW1vblwiO1xuaW1wb3J0IHsgQWZ0ZXJWaWV3SW5pdCwgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgRWxlbWVudFJlZiwgaW5wdXQsIHNpZ25hbCwgdmlld0NoaWxkIH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IElTa2VsZXRvbkNvbmZpZyB9IGZyb20gXCIuL2ludGVyZmFjZXMvc2tlbGV0b24taXRlbS5pbnRlcmZhY2VcIjtcblxuQENvbXBvbmVudCh7XG4gIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAYW5ndWxhci1lc2xpbnQvY29tcG9uZW50LXNlbGVjdG9yXG4gIHNlbGVjdG9yOiAnbGlic191aS1jb21wb25lbnRzLXNrZWxldG9uJyxcbiAgdGVtcGxhdGVVcmw6ICdza2VsZXRvbi5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3NrZWxldG9uLmNvbXBvbmVudC5zY3NzJ10sXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtOZ1RlbXBsYXRlT3V0bGV0XSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2hcbn0pXG5leHBvcnQgY2xhc3MgTGlic1VpQ29tcG9uZW50c1NrZWxldG9uQ29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCB7XG4gIHByb3RlY3RlZCBjb25maWdSZW5kZXIgPSBzaWduYWw8SVNrZWxldG9uQ29uZmlnPih7fSlcblxuICByZWFkb25seSBjb25maWcgPSBpbnB1dDxJU2tlbGV0b25Db25maWcsIElTa2VsZXRvbkNvbmZpZyB8IHVuZGVmaW5lZD4oe30sIHsgdHJhbnNmb3JtOiB2YWx1ZSA9PiB2YWx1ZSB8fCB7fSB9KTtcblxuICByZWFkb25seSBza2VsZXRvblJlZiA9IHZpZXdDaGlsZC5yZXF1aXJlZDxFbGVtZW50UmVmPignc2tlbGV0b25SZWYnKTtcblxuICBuZ0FmdGVyVmlld0luaXQoKTogdm9pZCB7XG4gICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICB0aGlzLmNvbmZpZ1JlbmRlci51cGRhdGUoY29uZmlnID0+IHtcbiAgICAgICAgY29uZmlnID0gdGhpcy5jb25maWcoKTtcbiAgICAgICAgbGV0IG9mZnNldEhlaWdodCA9IHRoaXMuc2tlbGV0b25SZWYoKS5uYXRpdmVFbGVtZW50Lm9mZnNldEhlaWdodDtcbiAgICAgICAgaWYgKCFjb25maWcucm93cz8ubGVuZ3RoKSB7XG4gICAgICAgICAgY29uZmlnLnJvd3MgPSBbeyBpdGVtOiB7fSB9XTtcbiAgICAgICAgfVxuICAgICAgICBpZiAoIWNvbmZpZy5oZWlnaHRDb250YWluZXIpIHtcbiAgICAgICAgICBjb25maWcuaGVpZ2h0Q29udGFpbmVyID0gb2Zmc2V0SGVpZ2h0IC0gKGNvbmZpZy5zdHlsZU1hcmdpbkJvdHRvbSB8fCAwKTtcbiAgICAgICAgfVxuICAgICAgICBpZiAoY29uZmlnLnJlcGVhdCkge1xuICAgICAgICAgIG9mZnNldEhlaWdodCA9IG9mZnNldEhlaWdodCB8fCBjb25maWcuaGVpZ2h0Q29udGFpbmVyIHx8IGNvbmZpZy5zdHlsZU1hcmdpbkJvdHRvbSB8fCAwO1xuICAgICAgICAgIGNvbmZpZy5oZWlnaHRDb250YWluZXIgPSAob2Zmc2V0SGVpZ2h0IC8gY29uZmlnLnJlcGVhdCkgLSAoY29uZmlnLnN0eWxlTWFyZ2luQm90dG9tIHx8IDApO1xuICAgICAgICB9XG4gICAgICAgIGNvbmZpZy5yZXBlYXQgPSBNYXRoLmNlaWwoKG9mZnNldEhlaWdodCAvICgoY29uZmlnLmhlaWdodENvbnRhaW5lciB8fCAwKSArIChjb25maWcuc3R5bGVNYXJnaW5Cb3R0b20gfHwgMCkpKSk7XG5cbiAgICAgICAgcmV0dXJuIHsgLi4uY29uZmlnIH07XG4gICAgICB9KTtcbiAgICB9KTtcbiAgfVxufSIsIjxkaXYgI3NrZWxldG9uUmVmXG4gIGNsYXNzPVwidy1mdWxsIGgtZnVsbFwiPlxuICBAaWYgKGNvbmZpZ1JlbmRlcigpOyBhcyBjb25maWcpIHtcbiAgICBAZm9yIChjb25maWdSZXBlYXQgb2YgW10uY29uc3RydWN0b3IoY29uZmlnLnJlcGVhdCB8fCAxKTt0cmFjayAkaW5kZXg7bGV0IGxhc3RJdGVtID0gJGxhc3QpIHtcbiAgICAgIDxkaXYgW3N0eWxlLm1hcmdpbkJvdHRvbS5weF09XCIoY29uZmlnLnN0eWxlTWFyZ2luQm90dG9tICYmICFsYXN0SXRlbSkgPyBjb25maWcuc3R5bGVNYXJnaW5Cb3R0b206MFwiXG4gICAgICAgIFtzdHlsZS5oZWlnaHQucHhdPVwiY29uZmlnLmhlaWdodENvbnRhaW5lclwiXG4gICAgICAgIFtjbGFzc109XCIoY29uZmlnLmNsYXNzUm93cyB8fCAnJykrJyBmbGV4IGZsZXgtY29sJ1wiPlxuICAgICAgICBAZm9yIChyb3cgb2YgY29uZmlnLnJvd3M7dHJhY2sgJGluZGV4Oykge1xuICAgICAgICAgIEBmb3IgKHJvd1JlcGVhdCBvZiBbXS5jb25zdHJ1Y3Rvcihyb3cucmVwZWF0IHx8IDEpO3RyYWNrICRpbmRleDtsZXQgZmlyc3RSb3cgPSAkZmlyc3Q7bGV0IGxhc3RSb3cgPSAkbGFzdCkge1xuICAgICAgICAgICAgPGRpdlxuICAgICAgICAgICAgICBbY2xhc3NdPVwiKChsYXN0Um93IHx8IChmaXJzdFJvdyAmJiBsYXN0Um93KSA/IHJvdy5jbGFzc1Jvd0xhc3QgOiByb3cuY2xhc3NSb3cpIHx8ICcnKSsgJyBmbGV4IGZsZXgtY29sIHctZnVsbCBoLWZ1bGwnXCI+XG4gICAgICAgICAgICAgIEBpZiAocm93Lml0ZW0pIHtcbiAgICAgICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwidGVtcGxhdGVTa2VsZXRvbjsgY29udGV4dDogeyBjb25maWcgOnJvdy5pdGVtIH1cIiAvPlxuICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgIDxkaXYgW2NsYXNzXT1cIigobGFzdFJvdyB8fCBmaXJzdFJvdyAmJiBsYXN0Um93ID8gcm93LmNsYXNzQ29sc0xhc3QgOiByb3cuY2xhc3NDb2xzKSB8fCAnJykrJ2ZsZXggdy1mdWxsJ1wiPlxuICAgICAgICAgICAgICAgIEBmb3IgKGNvbCBvZiByb3cuY29sczt0cmFjayAkaW5kZXg7KSB7XG4gICAgICAgICAgICAgICAgICBAZm9yIChjb2xSZXBlYXQgb2YgW10uY29uc3RydWN0b3IoY29sLnJlcGVhdCB8fCAxKTt0cmFjayAkaW5kZXg7bGV0IGZpcnN0Q29sID0gJGZpcnN0O2xldCBsYXN0Q29sID0gJGxhc3QpIHtcbiAgICAgICAgICAgICAgICAgICAgPGRpdlxuICAgICAgICAgICAgICAgICAgICAgIFtjbGFzc109XCIoKGxhc3RDb2wgfHwgZmlyc3RDb2wgJiYgbGFzdENvbCA/IGNvbC5jbGFzc0NvbExhc3QgOiBjb2wuY2xhc3NDb2wpIHx8ICcnKSsgJyBmbGV4IHctZnVsbCdcIj5cbiAgICAgICAgICAgICAgICAgICAgICBAaWYgKGNvbC5pdGVtKSB7XG4gICAgICAgICAgICAgICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwidGVtcGxhdGVTa2VsZXRvbjsgY29udGV4dDogeyBjb25maWcgOmNvbC5pdGVtIH1cIiAvPlxuICAgICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgIH19XG4gICAgICA8L2Rpdj5cbiAgICB9XG4gIH1cbjwvZGl2PlxuXG48bmctdGVtcGxhdGUgI3RlbXBsYXRlU2tlbGV0b25cbiAgbGV0LWNvbmZpZz1cImNvbmZpZ1wiPlxuICA8ZGl2IFtjbGFzc109XCJjb25maWc/LmNsYXNzSW5jbHVkZSB8fCAndy1mdWxsIGgtZnVsbCcgXCI+XG4gICAgQGZvciAoXyBvZiBbXS5jb25zdHJ1Y3Rvcihjb25maWcucmVwZWF0IHx8IDEpO3RyYWNrICRpbmRleDsgbGV0IGxhc3QgPSAkbGFzdCkge1xuICAgICAgPGRpdiBjbGFzcz1cInctZnVsbCBoLWZ1bGwgc2tlbGV0b24gcm91bmRlZC1bOHB4XSB7eyBjb25maWc/LmNsYXNzSW5jbHVkZUl0ZW0gfHwgJycgfX1cIlxuICAgICAgICBbY2xhc3MubWItWzE2cHhdXT1cImNvbmZpZz8uc3R5bGVEZWZhdWx0ICYmICFsYXN0XCI+XG4gICAgICA8L2Rpdj5cbiAgICB9XG4gIDwvZGl2PlxuPC9uZy10ZW1wbGF0ZT5cbiJdfQ==
|
|
@@ -1,33 +1,37 @@
|
|
|
1
1
|
import { NgTemplateOutlet } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import {
|
|
3
|
+
import { signal, input, viewChild, Component, ChangeDetectionStrategy } from '@angular/core';
|
|
4
4
|
|
|
5
5
|
class LibsUiComponentsSkeletonComponent {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
heightContainer: 150,
|
|
9
|
-
styleMarginBottom: 16,
|
|
10
|
-
rows: [{
|
|
11
|
-
item: {}
|
|
12
|
-
}]
|
|
13
|
-
});
|
|
6
|
+
configRender = signal({});
|
|
7
|
+
config = input({}, { transform: value => value || {} });
|
|
14
8
|
skeletonRef = viewChild.required('skeletonRef');
|
|
15
9
|
ngAfterViewInit() {
|
|
16
10
|
setTimeout(() => {
|
|
17
|
-
|
|
18
|
-
this.config
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
11
|
+
this.configRender.update(config => {
|
|
12
|
+
config = this.config();
|
|
13
|
+
let offsetHeight = this.skeletonRef().nativeElement.offsetHeight;
|
|
14
|
+
if (!config.rows?.length) {
|
|
15
|
+
config.rows = [{ item: {} }];
|
|
16
|
+
}
|
|
17
|
+
if (!config.heightContainer) {
|
|
18
|
+
config.heightContainer = offsetHeight - (config.styleMarginBottom || 0);
|
|
19
|
+
}
|
|
20
|
+
if (config.repeat) {
|
|
21
|
+
offsetHeight = offsetHeight || config.heightContainer || config.styleMarginBottom || 0;
|
|
22
|
+
config.heightContainer = (offsetHeight / config.repeat) - (config.styleMarginBottom || 0);
|
|
23
|
+
}
|
|
24
|
+
config.repeat = Math.ceil((offsetHeight / ((config.heightContainer || 0) + (config.styleMarginBottom || 0))));
|
|
25
|
+
return { ...config };
|
|
26
|
+
});
|
|
23
27
|
});
|
|
24
28
|
}
|
|
25
29
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
26
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsSkeletonComponent, isStandalone: true, selector: "libs_ui-components-skeleton", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } },
|
|
30
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsSkeletonComponent, isStandalone: true, selector: "libs_ui-components-skeleton", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "skeletonRef", first: true, predicate: ["skeletonRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #skeletonRef\n class=\"w-full h-full\">\n @if (configRender(); as config) {\n @for (configRepeat of [].constructor(config.repeat || 1);track $index;let lastItem = $last) {\n <div [style.marginBottom.px]=\"(config.styleMarginBottom && !lastItem) ? config.styleMarginBottom:0\"\n [style.height.px]=\"config.heightContainer\"\n [class]=\"(config.classRows || '')+' flex flex-col'\">\n @for (row of config.rows;track $index;) {\n @for (rowRepeat of [].constructor(row.repeat || 1);track $index;let firstRow = $first;let lastRow = $last) {\n <div\n [class]=\"((lastRow || (firstRow && lastRow) ? row.classRowLast : row.classRow) || '')+ ' flex flex-col w-full h-full'\">\n @if (row.item) {\n <ng-container *ngTemplateOutlet=\"templateSkeleton; context: { config :row.item }\" />\n }\n <div [class]=\"((lastRow || firstRow && lastRow ? row.classColsLast : row.classCols) || '')+'flex w-full'\">\n @for (col of row.cols;track $index;) {\n @for (colRepeat of [].constructor(col.repeat || 1);track $index;let firstCol = $first;let lastCol = $last) {\n <div\n [class]=\"((lastCol || firstCol && lastCol ? col.classColLast : col.classCol) || '')+ ' flex w-full'\">\n @if (col.item) {\n <ng-container *ngTemplateOutlet=\"templateSkeleton; context: { config :col.item }\" />\n }\n </div>\n }\n }\n </div>\n </div>\n }}\n </div>\n }\n }\n</div>\n\n<ng-template #templateSkeleton\n let-config=\"config\">\n <div [class]=\"config?.classInclude || 'w-full h-full' \">\n @for (_ of [].constructor(config.repeat || 1);track $index; let last = $last) {\n <div class=\"w-full h-full skeleton rounded-[8px] {{ config?.classIncludeItem || '' }}\"\n [class.mb-[16px]]=\"config?.styleDefault && !last\">\n </div>\n }\n </div>\n</ng-template>\n", styles: ["@keyframes mo-skeleton-loading{0%{background-position:100% 50%}to{background-position:0 50%}}.skeleton{animation:mo-skeleton-loading 1.4s ease infinite;background:linear-gradient(90deg,#bebebe33 25%,#8181813d 37%,#bebebe33 63%);background-size:400% 100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
27
31
|
}
|
|
28
32
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsSkeletonComponent, decorators: [{
|
|
29
33
|
type: Component,
|
|
30
|
-
args: [{ selector: 'libs_ui-components-skeleton', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #skeletonRef\n class=\"w-full h-full\">\n @if (
|
|
34
|
+
args: [{ selector: 'libs_ui-components-skeleton', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #skeletonRef\n class=\"w-full h-full\">\n @if (configRender(); as config) {\n @for (configRepeat of [].constructor(config.repeat || 1);track $index;let lastItem = $last) {\n <div [style.marginBottom.px]=\"(config.styleMarginBottom && !lastItem) ? config.styleMarginBottom:0\"\n [style.height.px]=\"config.heightContainer\"\n [class]=\"(config.classRows || '')+' flex flex-col'\">\n @for (row of config.rows;track $index;) {\n @for (rowRepeat of [].constructor(row.repeat || 1);track $index;let firstRow = $first;let lastRow = $last) {\n <div\n [class]=\"((lastRow || (firstRow && lastRow) ? row.classRowLast : row.classRow) || '')+ ' flex flex-col w-full h-full'\">\n @if (row.item) {\n <ng-container *ngTemplateOutlet=\"templateSkeleton; context: { config :row.item }\" />\n }\n <div [class]=\"((lastRow || firstRow && lastRow ? row.classColsLast : row.classCols) || '')+'flex w-full'\">\n @for (col of row.cols;track $index;) {\n @for (colRepeat of [].constructor(col.repeat || 1);track $index;let firstCol = $first;let lastCol = $last) {\n <div\n [class]=\"((lastCol || firstCol && lastCol ? col.classColLast : col.classCol) || '')+ ' flex w-full'\">\n @if (col.item) {\n <ng-container *ngTemplateOutlet=\"templateSkeleton; context: { config :col.item }\" />\n }\n </div>\n }\n }\n </div>\n </div>\n }}\n </div>\n }\n }\n</div>\n\n<ng-template #templateSkeleton\n let-config=\"config\">\n <div [class]=\"config?.classInclude || 'w-full h-full' \">\n @for (_ of [].constructor(config.repeat || 1);track $index; let last = $last) {\n <div class=\"w-full h-full skeleton rounded-[8px] {{ config?.classIncludeItem || '' }}\"\n [class.mb-[16px]]=\"config?.styleDefault && !last\">\n </div>\n }\n </div>\n</ng-template>\n", styles: ["@keyframes mo-skeleton-loading{0%{background-position:100% 50%}to{background-position:0 50%}}.skeleton{animation:mo-skeleton-loading 1.4s ease infinite;background:linear-gradient(90deg,#bebebe33 25%,#8181813d 37%,#bebebe33 63%);background-size:400% 100%}\n"] }]
|
|
31
35
|
}] });
|
|
32
36
|
|
|
33
37
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"libs-ui-components-skeleton.mjs","sources":["../../../../../libs-ui/components/skeleton/src/skeleton.component.ts","../../../../../libs-ui/components/skeleton/src/skeleton.component.html","../../../../../libs-ui/components/skeleton/src/libs-ui-components-skeleton.ts"],"sourcesContent":["import { NgTemplateOutlet } from \"@angular/common\";\nimport { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef,
|
|
1
|
+
{"version":3,"file":"libs-ui-components-skeleton.mjs","sources":["../../../../../libs-ui/components/skeleton/src/skeleton.component.ts","../../../../../libs-ui/components/skeleton/src/skeleton.component.html","../../../../../libs-ui/components/skeleton/src/libs-ui-components-skeleton.ts"],"sourcesContent":["import { NgTemplateOutlet } from \"@angular/common\";\nimport { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, input, signal, viewChild } from \"@angular/core\";\nimport { ISkeletonConfig } from \"./interfaces/skeleton-item.interface\";\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'libs_ui-components-skeleton',\n templateUrl: 'skeleton.component.html',\n styleUrls: ['./skeleton.component.scss'],\n standalone: true,\n imports: [NgTemplateOutlet],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class LibsUiComponentsSkeletonComponent implements AfterViewInit {\n protected configRender = signal<ISkeletonConfig>({})\n\n readonly config = input<ISkeletonConfig, ISkeletonConfig | undefined>({}, { transform: value => value || {} });\n\n readonly skeletonRef = viewChild.required<ElementRef>('skeletonRef');\n\n ngAfterViewInit(): void {\n setTimeout(() => {\n this.configRender.update(config => {\n config = this.config();\n let offsetHeight = this.skeletonRef().nativeElement.offsetHeight;\n if (!config.rows?.length) {\n config.rows = [{ item: {} }];\n }\n if (!config.heightContainer) {\n config.heightContainer = offsetHeight - (config.styleMarginBottom || 0);\n }\n if (config.repeat) {\n offsetHeight = offsetHeight || config.heightContainer || config.styleMarginBottom || 0;\n config.heightContainer = (offsetHeight / config.repeat) - (config.styleMarginBottom || 0);\n }\n config.repeat = Math.ceil((offsetHeight / ((config.heightContainer || 0) + (config.styleMarginBottom || 0))));\n\n return { ...config };\n });\n });\n }\n}","<div #skeletonRef\n class=\"w-full h-full\">\n @if (configRender(); as config) {\n @for (configRepeat of [].constructor(config.repeat || 1);track $index;let lastItem = $last) {\n <div [style.marginBottom.px]=\"(config.styleMarginBottom && !lastItem) ? config.styleMarginBottom:0\"\n [style.height.px]=\"config.heightContainer\"\n [class]=\"(config.classRows || '')+' flex flex-col'\">\n @for (row of config.rows;track $index;) {\n @for (rowRepeat of [].constructor(row.repeat || 1);track $index;let firstRow = $first;let lastRow = $last) {\n <div\n [class]=\"((lastRow || (firstRow && lastRow) ? row.classRowLast : row.classRow) || '')+ ' flex flex-col w-full h-full'\">\n @if (row.item) {\n <ng-container *ngTemplateOutlet=\"templateSkeleton; context: { config :row.item }\" />\n }\n <div [class]=\"((lastRow || firstRow && lastRow ? row.classColsLast : row.classCols) || '')+'flex w-full'\">\n @for (col of row.cols;track $index;) {\n @for (colRepeat of [].constructor(col.repeat || 1);track $index;let firstCol = $first;let lastCol = $last) {\n <div\n [class]=\"((lastCol || firstCol && lastCol ? col.classColLast : col.classCol) || '')+ ' flex w-full'\">\n @if (col.item) {\n <ng-container *ngTemplateOutlet=\"templateSkeleton; context: { config :col.item }\" />\n }\n </div>\n }\n }\n </div>\n </div>\n }}\n </div>\n }\n }\n</div>\n\n<ng-template #templateSkeleton\n let-config=\"config\">\n <div [class]=\"config?.classInclude || 'w-full h-full' \">\n @for (_ of [].constructor(config.repeat || 1);track $index; let last = $last) {\n <div class=\"w-full h-full skeleton rounded-[8px] {{ config?.classIncludeItem || '' }}\"\n [class.mb-[16px]]=\"config?.styleDefault && !last\">\n </div>\n }\n </div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAaa,iCAAiC,CAAA;AAClC,IAAA,YAAY,GAAG,MAAM,CAAkB,EAAE,CAAC;AAE3C,IAAA,MAAM,GAAG,KAAK,CAA+C,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,IAAI,KAAK,IAAI,EAAE,EAAE,CAAC;AAErG,IAAA,WAAW,GAAG,SAAS,CAAC,QAAQ,CAAa,aAAa,CAAC;IAEpE,eAAe,GAAA;QACb,UAAU,CAAC,MAAK;AACd,YAAA,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,MAAM,IAAG;AAChC,gBAAA,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE;gBACtB,IAAI,YAAY,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC,aAAa,CAAC,YAAY;AAChE,gBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE;oBACxB,MAAM,CAAC,IAAI,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC;;AAE9B,gBAAA,IAAI,CAAC,MAAM,CAAC,eAAe,EAAE;AAC3B,oBAAA,MAAM,CAAC,eAAe,GAAG,YAAY,IAAI,MAAM,CAAC,iBAAiB,IAAI,CAAC,CAAC;;AAEzE,gBAAA,IAAI,MAAM,CAAC,MAAM,EAAE;AACjB,oBAAA,YAAY,GAAG,YAAY,IAAI,MAAM,CAAC,eAAe,IAAI,MAAM,CAAC,iBAAiB,IAAI,CAAC;AACtF,oBAAA,MAAM,CAAC,eAAe,GAAG,CAAC,YAAY,GAAG,MAAM,CAAC,MAAM,KAAK,MAAM,CAAC,iBAAiB,IAAI,CAAC,CAAC;;AAE3F,gBAAA,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,EAAE,YAAY,IAAI,CAAC,MAAM,CAAC,eAAe,IAAI,CAAC,KAAK,MAAM,CAAC,iBAAiB,IAAI,CAAC,CAAC,CAAC,EAAE;AAE7G,gBAAA,OAAO,EAAE,GAAG,MAAM,EAAE;AACtB,aAAC,CAAC;AACJ,SAAC,CAAC;;wGA1BO,iCAAiC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAjC,iCAAiC,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,6BAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,aAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,aAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECb9C,mjEA2CA,EAAA,MAAA,EAAA,CAAA,kQAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDjCY,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAGf,iCAAiC,EAAA,UAAA,EAAA,CAAA;kBAT7C,SAAS;+BAEE,6BAA6B,EAAA,UAAA,EAG3B,IAAI,EACP,OAAA,EAAA,CAAC,gBAAgB,CAAC,EAAA,eAAA,EACV,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,mjEAAA,EAAA,MAAA,EAAA,CAAA,kQAAA,CAAA,EAAA;;;AEXjD;;AAEG;;;;"}
|
package/package.json
CHANGED
package/skeleton.component.d.ts
CHANGED
|
@@ -2,9 +2,10 @@ import { AfterViewInit, ElementRef } from "@angular/core";
|
|
|
2
2
|
import { ISkeletonConfig } from "./interfaces/skeleton-item.interface";
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
4
|
export declare class LibsUiComponentsSkeletonComponent implements AfterViewInit {
|
|
5
|
-
|
|
5
|
+
protected configRender: import("@angular/core").WritableSignal<ISkeletonConfig>;
|
|
6
|
+
readonly config: import("@angular/core").InputSignalWithTransform<ISkeletonConfig, ISkeletonConfig | undefined>;
|
|
6
7
|
readonly skeletonRef: import("@angular/core").Signal<ElementRef<any>>;
|
|
7
8
|
ngAfterViewInit(): void;
|
|
8
9
|
static ɵfac: i0.ɵɵFactoryDeclaration<LibsUiComponentsSkeletonComponent, never>;
|
|
9
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<LibsUiComponentsSkeletonComponent, "libs_ui-components-skeleton", never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; }, {
|
|
10
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<LibsUiComponentsSkeletonComponent, "libs_ui-components-skeleton", never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
10
11
|
}
|