@solcre-org/core-ui 2.12.13 → 2.12.15

package/assets/css/inc/components/skeleton.css

@@ -0,0 +1,105 @@
+/* ******************************************** */
+/** COMPONENT: SKELETON
+/* ******************************************** */
+
+/* ******************************************** */
+/** COMPONENTS : SKELETON  
+/* ******************************************** */
+
+
+/* SKELETON */
+
+.c-skeleton,
+.c-skeleton-image{
+    --_sk-input-h: 4.6rem;
+    --_sk-input-bg: var(--color-neutral-300);
+    --_sk-text-h: .4rem;
+
+    --_sk-btn-h: 3.6rem;
+    --_sk-btn-w: 15rem;
+}
+
+.c-skeleton > *,
+.c-skeleton-image{
+    position: relative;
+    overflow: hidden;
+    background-color: var(--sk-input-bg,var(--_sk-input-bg));
+}
+
+.c-skeleton > *:not(:first-child) {
+    margin-top: 2.5rem;
+}
+
+.c-skeleton > *:not(.c-skeleton__check):before,
+.c-skeleton-check__text::before,
+.c-skeleton-image::before{
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    transform: translate3d(-100%,0,0);
+    background: linear-gradient(70deg, transparent 30%, hsl(var(--color-neutral-100-hsl)/80%), transparent 70%);
+    animation: skeletonAnimation 3s infinite;
+    z-index: 1;
+}
+
+.c-skeleton__input{
+    width: 100%;
+    height: var(--_sk-input-h);
+    min-width: 25rem;
+    border-radius: var(--_entry-input-br);
+}
+
+.c-skeleton__textarea{
+    height: calc(var(--_sk-input-h)*3);
+    border-radius: var(--_entry-textarea-br, var(--_entry-input-br));
+}
+
+
+.c-skeleton__btn{
+    width: var(--_sk-btn-w);
+    height: var(--_sk-btn-h);
+    border-radius: var(--app-main-br, 8px);
+}
+
+.c-skeleton__check{
+    display: grid;
+    grid-template-columns: auto 1fr;
+    background-color: transparent;
+    align-items: center;
+    gap: 2rem;
+}
+
+.c-skeleton-check__check{
+    width: calc(var(--_sk-input-h)*.5);
+    aspect-ratio: 1;
+    background-color: var(--_sk-input-bg);
+    border-radius: 0.4em;
+}
+
+.c-skeleton__text,
+.c-skeleton-check__text{
+    width: 100%;
+    height: var(--_sk-text-h);
+    background-color: var(--_sk-input-bg);
+}
+
+.c-skeleton-image{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+
+
+@keyframes skeletonAnimation {
+    100% {
+        transform: translate3d(100%,0,0);
+    }
+}
+

package/assets/css/main.css

@@ -68,6 +68,7 @@
 /* ⭐️ */ @import url(inc/components/calendar.css);
 /* ⭐️ */ @import url(inc/components/progressbar.css);
 /* ✅ */ @import url(inc/components/image-carousel.css); /* !(new) */
+/* ✅ */ @import url(inc/components/skeleton.css); /* !(new) */
 
 
 /* Utilities */

package/fesm2022/solcre-org-core-ui.mjs

@@ -955,6 +955,352 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                 }]
         }] });
 
+var SkeletonType;
+(function (SkeletonType) {
+    SkeletonType["INPUT"] = "input";
+    SkeletonType["TEXTAREA"] = "textarea";
+    SkeletonType["BUTTON"] = "button";
+    SkeletonType["CHECKBOX"] = "checkbox";
+    SkeletonType["IMAGE"] = "image";
+    SkeletonType["TEXT"] = "text";
+    SkeletonType["CARD"] = "card";
+    SkeletonType["LIST"] = "list";
+    SkeletonType["AVATAR"] = "avatar";
+})(SkeletonType || (SkeletonType = {}));
+
+var SkeletonSize;
+(function (SkeletonSize) {
+    SkeletonSize["SMALL"] = "small";
+    SkeletonSize["MEDIUM"] = "medium";
+    SkeletonSize["LARGE"] = "large";
+    SkeletonSize["EXTRA_LARGE"] = "extra-large";
+})(SkeletonSize || (SkeletonSize = {}));
+
+var SkeletonAnimation;
+(function (SkeletonAnimation) {
+    SkeletonAnimation["PULSE"] = "pulse";
+    SkeletonAnimation["WAVE"] = "wave";
+    SkeletonAnimation["SHIMMER"] = "shimmer";
+    SkeletonAnimation["NONE"] = "none";
+})(SkeletonAnimation || (SkeletonAnimation = {}));
+
+class GenericSkeletonComponent {
+    config = input();
+    items = input();
+    type = input();
+    size = input();
+    width = input();
+    height = input();
+    animated = input(true);
+    animation = input(SkeletonAnimation.PULSE);
+    lines = input(1);
+    customClass = input('');
+    ariaLabel = input('Loading content');
+    SkeletonType = SkeletonType;
+    SkeletonSize = SkeletonSize;
+    SkeletonAnimation = SkeletonAnimation;
+    skeletonItems = computed(() => {
+        const config = this.config();
+        const items = this.items();
+        const type = this.type();
+        if (config?.items) {
+            return config.items;
+        }
+        if (items) {
+            return items;
+        }
+        if (type) {
+            return [{
+                    type,
+                    size: this.size(),
+                    width: this.width(),
+                    height: this.height(),
+                    animated: this.animated(),
+                    animation: this.animation(),
+                    lines: this.lines(),
+                    customClass: this.customClass(),
+                    ariaLabel: this.ariaLabel()
+                }];
+        }
+        return [{
+                type: SkeletonType.TEXT,
+                size: this.size() || SkeletonSize.MEDIUM,
+                animated: this.animated(),
+                animation: this.animation(),
+                lines: this.lines(),
+                customClass: this.customClass(),
+                ariaLabel: this.ariaLabel()
+            }];
+    });
+    containerClasses = computed(() => {
+        const config = this.config();
+        const baseClasses = ['c-skeleton'];
+        if (config?.containerClass) {
+            baseClasses.push(config.containerClass);
+        }
+        if (config?.animated !== false && this.animated()) {
+            const animation = config?.animation || this.animation();
+            baseClasses.push(`c-skeleton--${animation}`);
+        }
+        return baseClasses.join(' ');
+    });
+    getItemClasses(item) {
+        const classes = [];
+        switch (item.type) {
+            case SkeletonType.INPUT:
+                classes.push('c-skeleton__input');
+                break;
+            case SkeletonType.TEXTAREA:
+                classes.push('c-skeleton__textarea');
+                break;
+            case SkeletonType.BUTTON:
+                classes.push('c-skeleton__btn');
+                break;
+            case SkeletonType.CHECKBOX:
+                classes.push('c-skeleton__check', 'c-skeleton-check');
+                break;
+            case SkeletonType.IMAGE:
+                classes.push('c-skeleton-image');
+                break;
+            case SkeletonType.TEXT:
+                classes.push('c-skeleton__text');
+                break;
+            case SkeletonType.CARD:
+                classes.push('c-skeleton__card');
+                break;
+            case SkeletonType.LIST:
+                classes.push('c-skeleton__list');
+                break;
+            case SkeletonType.AVATAR:
+                classes.push('c-skeleton__avatar');
+                break;
+        }
+        if (item.size) {
+            classes.push(`c-skeleton--${item.size}`);
+        }
+        if (item.animated !== false) {
+            const animation = item.animation || this.animation();
+            classes.push(`c-skeleton--${animation}`);
+        }
+        if (item.customClass) {
+            classes.push(item.customClass);
+        }
+        return classes.join(' ');
+    }
+    getItemStyles(item) {
+        const styles = {};
+        if (item.width) {
+            styles['width'] = item.width;
+        }
+        if (item.height) {
+            styles['height'] = item.height;
+        }
+        const config = this.config();
+        if (config?.spacing) {
+            styles['margin-bottom'] = config.spacing;
+        }
+        return styles;
+    }
+    getTextLines(item) {
+        const lines = item.lines || this.lines() || 1;
+        return Array.from({ length: lines }, (_, i) => i);
+    }
+    getListItems(item) {
+        const items = item.listConfig?.items || 3;
+        return Array.from({ length: items }, (_, i) => i);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: GenericSkeletonComponent, isStandalone: true, selector: "core-generic-skeleton", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"containerClasses()\" [attr.aria-label]=\"ariaLabel()\">\n  <ng-container *ngFor=\"let item of skeletonItems()\">\n    \n    <!-- Skeleton Input -->\n    <div *ngIf=\"item.type === SkeletonType.INPUT\"\n         [class]=\"getItemClasses(item)\"\n         [ngStyle]=\"getItemStyles(item)\"\n         [attr.aria-label]=\"item.ariaLabel || 'Loading input field'\">\n    </div>\n    \n    <!-- Skeleton Textarea -->\n    <div *ngIf=\"item.type === SkeletonType.TEXTAREA\"\n         [class]=\"getItemClasses(item)\"\n         [ngStyle]=\"getItemStyles(item)\"\n         [attr.aria-label]=\"item.ariaLabel || 'Loading textarea field'\">\n    </div>\n    \n    <!-- Skeleton Button -->\n    <div *ngIf=\"item.type === SkeletonType.BUTTON\"\n         [class]=\"getItemClasses(item)\"\n         [ngStyle]=\"getItemStyles(item)\"\n         [attr.aria-label]=\"item.ariaLabel || 'Loading button'\">\n    </div>\n    \n    <!-- Skeleton Checkbox -->\n    <div *ngIf=\"item.type === SkeletonType.CHECKBOX\"\n         [class]=\"getItemClasses(item)\"\n         [ngStyle]=\"getItemStyles(item)\"\n         [attr.aria-label]=\"item.ariaLabel || 'Loading checkbox'\">\n      <div class=\"c-skeleton-check__check\"></div>\n      <div *ngIf=\"item.checkboxConfig?.showText !== false\" \n           class=\"c-skeleton-check__text\"\n           [style.width]=\"item.checkboxConfig?.textWidth || 'auto'\">\n      </div>\n    </div>\n    \n    <!-- Skeleton Image -->\n    <div *ngIf=\"item.type === SkeletonType.IMAGE\"\n         [class]=\"getItemClasses(item)\"\n         [ngStyle]=\"getItemStyles(item)\"\n         [attr.aria-label]=\"item.ariaLabel || 'Loading image'\">\n    </div>\n    \n    <!-- Skeleton Text -->\n    <div *ngIf=\"item.type === SkeletonType.TEXT\"\n         [ngStyle]=\"getItemStyles(item)\"\n         [attr.aria-label]=\"item.ariaLabel || 'Loading text'\">\n      <div *ngFor=\"let line of getTextLines(item)\"\n           [class]=\"getItemClasses(item)\"\n           [style.width]=\"line === getTextLines(item).length - 1 ? '75%' : '100%'\">\n      </div>\n    </div>\n    \n    <!-- Skeleton Avatar -->\n    <div *ngIf=\"item.type === SkeletonType.AVATAR\"\n         [class]=\"getItemClasses(item)\"\n         [ngStyle]=\"getItemStyles(item)\"\n         [attr.aria-label]=\"item.ariaLabel || 'Loading avatar'\">\n    </div>\n    \n    <!-- Skeleton Card -->\n    <div *ngIf=\"item.type === SkeletonType.CARD\"\n         [class]=\"getItemClasses(item)\"\n         [ngStyle]=\"getItemStyles(item)\"\n         [attr.aria-label]=\"item.ariaLabel || 'Loading card'\">\n      <div class=\"c-skeleton__card-header\"></div>\n      <div class=\"c-skeleton__card-body\">\n        <div class=\"c-skeleton__text\"></div>\n        <div class=\"c-skeleton__text\" style=\"width: 80%;\"></div>\n        <div class=\"c-skeleton__text\" style=\"width: 60%;\"></div>\n      </div>\n    </div>\n    \n    <!-- Skeleton List -->\n    <div *ngIf=\"item.type === SkeletonType.LIST\"\n         [class]=\"getItemClasses(item)\"\n         [ngStyle]=\"getItemStyles(item)\"\n         [attr.aria-label]=\"item.ariaLabel || 'Loading list'\">\n      <div *ngFor=\"let listItem of getListItems(item)\" class=\"c-skeleton__list-item\">\n        <div *ngIf=\"item.listConfig?.showAvatar\" class=\"c-skeleton__avatar c-skeleton__avatar--small\"></div>\n        <div class=\"c-skeleton__list-content\">\n          <div class=\"c-skeleton__text\"></div>\n          <div *ngIf=\"item.listConfig?.showSecondaryText\" \n               class=\"c-skeleton__text c-skeleton__text--secondary\" \n               style=\"width: 70%;\"></div>\n        </div>\n      </div>\n    </div>\n    \n  </ng-container>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericSkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'core-generic-skeleton', standalone: true, imports: [CommonModule], template: "<div [class]=\"containerClasses()\" [attr.aria-label]=\"ariaLabel()\">\n  <ng-container *ngFor=\"let item of skeletonItems()\">\n    \n    <!-- Skeleton Input -->\n    <div *ngIf=\"item.type === SkeletonType.INPUT\"\n         [class]=\"getItemClasses(item)\"\n         [ngStyle]=\"getItemStyles(item)\"\n         [attr.aria-label]=\"item.ariaLabel || 'Loading input field'\">\n    </div>\n    \n    <!-- Skeleton Textarea -->\n    <div *ngIf=\"item.type === SkeletonType.TEXTAREA\"\n         [class]=\"getItemClasses(item)\"\n         [ngStyle]=\"getItemStyles(item)\"\n         [attr.aria-label]=\"item.ariaLabel || 'Loading textarea field'\">\n    </div>\n    \n    <!-- Skeleton Button -->\n    <div *ngIf=\"item.type === SkeletonType.BUTTON\"\n         [class]=\"getItemClasses(item)\"\n         [ngStyle]=\"getItemStyles(item)\"\n         [attr.aria-label]=\"item.ariaLabel || 'Loading button'\">\n    </div>\n    \n    <!-- Skeleton Checkbox -->\n    <div *ngIf=\"item.type === SkeletonType.CHECKBOX\"\n         [class]=\"getItemClasses(item)\"\n         [ngStyle]=\"getItemStyles(item)\"\n         [attr.aria-label]=\"item.ariaLabel || 'Loading checkbox'\">\n      <div class=\"c-skeleton-check__check\"></div>\n      <div *ngIf=\"item.checkboxConfig?.showText !== false\" \n           class=\"c-skeleton-check__text\"\n           [style.width]=\"item.checkboxConfig?.textWidth || 'auto'\">\n      </div>\n    </div>\n    \n    <!-- Skeleton Image -->\n    <div *ngIf=\"item.type === SkeletonType.IMAGE\"\n         [class]=\"getItemClasses(item)\"\n         [ngStyle]=\"getItemStyles(item)\"\n         [attr.aria-label]=\"item.ariaLabel || 'Loading image'\">\n    </div>\n    \n    <!-- Skeleton Text -->\n    <div *ngIf=\"item.type === SkeletonType.TEXT\"\n         [ngStyle]=\"getItemStyles(item)\"\n         [attr.aria-label]=\"item.ariaLabel || 'Loading text'\">\n      <div *ngFor=\"let line of getTextLines(item)\"\n           [class]=\"getItemClasses(item)\"\n           [style.width]=\"line === getTextLines(item).length - 1 ? '75%' : '100%'\">\n      </div>\n    </div>\n    \n    <!-- Skeleton Avatar -->\n    <div *ngIf=\"item.type === SkeletonType.AVATAR\"\n         [class]=\"getItemClasses(item)\"\n         [ngStyle]=\"getItemStyles(item)\"\n         [attr.aria-label]=\"item.ariaLabel || 'Loading avatar'\">\n    </div>\n    \n    <!-- Skeleton Card -->\n    <div *ngIf=\"item.type === SkeletonType.CARD\"\n         [class]=\"getItemClasses(item)\"\n         [ngStyle]=\"getItemStyles(item)\"\n         [attr.aria-label]=\"item.ariaLabel || 'Loading card'\">\n      <div class=\"c-skeleton__card-header\"></div>\n      <div class=\"c-skeleton__card-body\">\n        <div class=\"c-skeleton__text\"></div>\n        <div class=\"c-skeleton__text\" style=\"width: 80%;\"></div>\n        <div class=\"c-skeleton__text\" style=\"width: 60%;\"></div>\n      </div>\n    </div>\n    \n    <!-- Skeleton List -->\n    <div *ngIf=\"item.type === SkeletonType.LIST\"\n         [class]=\"getItemClasses(item)\"\n         [ngStyle]=\"getItemStyles(item)\"\n         [attr.aria-label]=\"item.ariaLabel || 'Loading list'\">\n      <div *ngFor=\"let listItem of getListItems(item)\" class=\"c-skeleton__list-item\">\n        <div *ngIf=\"item.listConfig?.showAvatar\" class=\"c-skeleton__avatar c-skeleton__avatar--small\"></div>\n        <div class=\"c-skeleton__list-content\">\n          <div class=\"c-skeleton__text\"></div>\n          <div *ngIf=\"item.listConfig?.showSecondaryText\" \n               class=\"c-skeleton__text c-skeleton__text--secondary\" \n               style=\"width: 70%;\"></div>\n        </div>\n      </div>\n    </div>\n    \n  </ng-container>\n</div>" }]
+        }] });
+
+class SkeletonService {
+    presetConfigs = {
+        form: {
+            items: [
+                { type: SkeletonType.INPUT },
+                { type: SkeletonType.INPUT },
+                { type: SkeletonType.TEXTAREA },
+                { type: SkeletonType.CHECKBOX, checkboxConfig: { showText: true } },
+                { type: SkeletonType.BUTTON, width: '120px' }
+            ],
+            animated: true,
+            animation: SkeletonAnimation.PULSE
+        },
+        userCard: {
+            items: [
+                { type: SkeletonType.AVATAR, size: SkeletonSize.LARGE },
+                { type: SkeletonType.TEXT, lines: 2 },
+                { type: SkeletonType.TEXT, width: '60%' }
+            ],
+            animated: true,
+            animation: SkeletonAnimation.SHIMMER
+        },
+        articleList: {
+            items: [
+                {
+                    type: SkeletonType.LIST,
+                    listConfig: {
+                        items: 5,
+                        showAvatar: true,
+                        showSecondaryText: true
+                    }
+                }
+            ],
+            animated: true,
+            animation: SkeletonAnimation.WAVE
+        },
+        imageGallery: {
+            items: [
+                { type: SkeletonType.IMAGE, height: '200px' },
+                { type: SkeletonType.IMAGE, height: '200px' },
+                { type: SkeletonType.IMAGE, height: '200px' }
+            ],
+            containerClass: 'skeleton-gallery',
+            animated: true,
+            animation: SkeletonAnimation.PULSE
+        },
+        dataTable: {
+            items: [
+                { type: SkeletonType.TEXT, height: '40px', width: '100%' },
+                { type: SkeletonType.TEXT, height: '35px', width: '100%' },
+                { type: SkeletonType.TEXT, height: '35px', width: '100%' },
+                { type: SkeletonType.TEXT, height: '35px', width: '100%' },
+                { type: SkeletonType.TEXT, height: '35px', width: '100%' }
+            ],
+            animated: true,
+            animation: SkeletonAnimation.SHIMMER
+        },
+        dashboard: {
+            items: [
+                { type: SkeletonType.CARD, height: '150px' },
+                { type: SkeletonType.CARD, height: '150px' },
+                { type: SkeletonType.CARD, height: '300px' }
+            ],
+            animated: true,
+            animation: SkeletonAnimation.PULSE
+        }
+    };
+    getPresetConfig(preset) {
+        return { ...this.presetConfigs[preset] };
+    }
+    createFormSkeleton(fields = 3, includeButton = true) {
+        const items = [];
+        for (let i = 0; i < fields; i++) {
+            items.push({ type: SkeletonType.INPUT });
+        }
+        if (includeButton) {
+            items.push({ type: SkeletonType.BUTTON, width: '120px' });
+        }
+        return {
+            items,
+            animated: true,
+            animation: SkeletonAnimation.PULSE
+        };
+    }
+    createListSkeleton(itemCount = 5, showAvatar = false, showSecondaryText = false) {
+        return {
+            items: [{
+                    type: SkeletonType.LIST,
+                    listConfig: {
+                        items: itemCount,
+                        showAvatar,
+                        showSecondaryText
+                    }
+                }],
+            animated: true,
+            animation: SkeletonAnimation.WAVE
+        };
+    }
+    createTextSkeleton(lines = 3, width) {
+        return {
+            items: [{
+                    type: SkeletonType.TEXT,
+                    lines,
+                    width
+                }],
+            animated: true,
+            animation: SkeletonAnimation.PULSE
+        };
+    }
+    createImageSkeleton(width, height) {
+        return {
+            items: [{
+                    type: SkeletonType.IMAGE,
+                    width: width || '100%',
+                    height: height || '200px'
+                }],
+            animated: true,
+            animation: SkeletonAnimation.SHIMMER
+        };
+    }
+    createCardSkeleton(includeAvatar = false, textLines = 3) {
+        const items = [];
+        if (includeAvatar) {
+            items.push({ type: SkeletonType.AVATAR });
+        }
+        items.push({
+            type: SkeletonType.TEXT,
+            lines: textLines
+        });
+        return {
+            items,
+            animated: true,
+            animation: SkeletonAnimation.PULSE
+        };
+    }
+    combineConfigs(...configs) {
+        const combinedItems = [];
+        let finalAnimation = SkeletonAnimation.PULSE;
+        let finalAnimated = true;
+        let finalContainerClass = '';
+        configs.forEach(config => {
+            combinedItems.push(...config.items);
+            if (config.animation) {
+                finalAnimation = config.animation;
+            }
+            if (config.animated !== undefined) {
+                finalAnimated = config.animated;
+            }
+            if (config.containerClass) {
+                finalContainerClass += ` ${config.containerClass}`;
+            }
+        });
+        return {
+            items: combinedItems,
+            animated: finalAnimated,
+            animation: finalAnimation,
+            containerClass: finalContainerClass.trim() || undefined
+        };
+    }
+    createCustomSkeleton(type, options = {}) {
+        return {
+            items: [{
+                    type,
+                    animated: true,
+                    animation: SkeletonAnimation.PULSE,
+                    ...options
+                }],
+            animated: true,
+            animation: options.animation || SkeletonAnimation.PULSE
+        };
+    }
+    getAvailablePresets() {
+        return Object.keys(this.presetConfigs);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SkeletonService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SkeletonService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SkeletonService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 class ImagePreviewComponent {
     imageModalService = inject(ImageModalService);
     src = input.required();
@@ -967,19 +1313,39 @@ class ImagePreviewComponent {
     cursor = input('pointer');
     loading = input('lazy');
     isRelative = input(false);
+    showSkeleton = input(true);
+    skeletonAnimation = input(SkeletonAnimation.SHIMMER);
+    isImageLoading = signal(true);
+    hasImageError = signal(false);
+    SkeletonType = SkeletonType;
+    onImageLoad() {
+        this.isImageLoading.set(false);
+        this.hasImageError.set(false);
+    }
+    onImageError() {
+        this.isImageLoading.set(false);
+        this.hasImageError.set(true);
+    }
     onImageClick() {
-        this.imageModalService.openImageModal({
-            src: this.src(),
-            alt: this.alt(),
-            title: this.title()
-        });
+        if (!this.isImageLoading() && !this.hasImageError()) {
+            this.imageModalService.openImageModal({
+                src: this.src(),
+                alt: this.alt(),
+                title: this.title()
+            });
+        }
+    }
+    onSkeletonClick() {
+        if (!this.isImageLoading()) {
+            this.onImageClick();
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ImagePreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: ImagePreviewComponent, isStandalone: true, selector: "core-image-preview", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: true, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, objectFit: { classPropertyName: "objectFit", publicName: "objectFit", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, cursor: { classPropertyName: "cursor", publicName: "cursor", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, isRelative: { classPropertyName: "isRelative", publicName: "isRelative", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"c-img-preview\" \n     (click)=\"onImageClick()\">\n  <img \n    [src]=\"src()\" \n    [alt]=\"alt()\"\n    [title]=\"title()\"\n    [loading]=\"loading()\"\n    [style.object-fit]=\"objectFit()\"\n    [style.border-radius]=\"borderRadius()\"\n    [style.cursor]=\"cursor()\">\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: ImagePreviewComponent, isStandalone: true, selector: "core-image-preview", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: true, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, objectFit: { classPropertyName: "objectFit", publicName: "objectFit", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, cursor: { classPropertyName: "cursor", publicName: "cursor", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, isRelative: { classPropertyName: "isRelative", publicName: "isRelative", isSignal: true, isRequired: false, transformFunction: null }, showSkeleton: { classPropertyName: "showSkeleton", publicName: "showSkeleton", isSignal: true, isRequired: false, transformFunction: null }, skeletonAnimation: { classPropertyName: "skeletonAnimation", publicName: "skeletonAnimation", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"c-img-preview\" \n     [class.c-img-preview--loading]=\"isImageLoading() && showSkeleton()\"\n     [class.c-img-preview--error]=\"hasImageError()\"\n     [style.width]=\"width()\"\n     [style.height]=\"height()\"\n     [style.border-radius]=\"borderRadius()\"\n     [style.position]=\"isRelative() ? 'relative' : 'static'\">\n  \n  @if (isImageLoading() && showSkeleton()) {\n    <div class=\"c-img-preview__skeleton\"\n         (click)=\"onSkeletonClick()\">\n      <core-generic-skeleton \n        [type]=\"SkeletonType.IMAGE\"\n        [width]=\"width() || '100%'\"\n        [height]=\"height() || '200px'\"\n        [animation]=\"skeletonAnimation()\"\n        [ariaLabel]=\"'Loading image: ' + (alt() || 'Image')\">\n      </core-generic-skeleton>\n    </div>\n  }\n  \n  @if (!isImageLoading() && !hasImageError()) {\n    <img \n      [src]=\"src()\" \n      [alt]=\"alt()\"\n      [title]=\"title()\"\n      [loading]=\"loading()\"\n      [style.object-fit]=\"objectFit()\"\n      [style.border-radius]=\"borderRadius()\"\n      [style.cursor]=\"cursor()\"\n      (click)=\"onImageClick()\">\n  }\n  \n  @if (isImageLoading()) {\n    <img \n      [src]=\"src()\"\n      [alt]=\"alt()\"\n      style=\"display: none;\"\n      (load)=\"onImageLoad()\"\n      (error)=\"onImageError()\">\n  }\n  \n  @if (hasImageError()) {\n    <div class=\"c-img-preview__error\"\n         [style.width]=\"width() || '100%'\"\n         [style.height]=\"height() || '200px'\"\n         [style.border-radius]=\"borderRadius()\">\n      <div class=\"c-img-preview__error-content\">\n        <span class=\"c-img-preview__error-icon\">\uD83D\uDCF7</span>\n        <span class=\"c-img-preview__error-text\">Error al cargar imagen</span>\n      </div>\n    </div>\n  }\n  \n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: GenericSkeletonComponent, selector: "core-generic-skeleton", inputs: ["config", "items", "type", "size", "width", "height", "animated", "animation", "lines", "customClass", "ariaLabel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ImagePreviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'core-image-preview', standalone: true, imports: [CommonModule], template: "<div class=\"c-img-preview\" \n     (click)=\"onImageClick()\">\n  <img \n    [src]=\"src()\" \n    [alt]=\"alt()\"\n    [title]=\"title()\"\n    [loading]=\"loading()\"\n    [style.object-fit]=\"objectFit()\"\n    [style.border-radius]=\"borderRadius()\"\n    [style.cursor]=\"cursor()\">\n</div>" }]
+            args: [{ selector: 'core-image-preview', standalone: true, imports: [CommonModule, GenericSkeletonComponent], template: "<div class=\"c-img-preview\" \n     [class.c-img-preview--loading]=\"isImageLoading() && showSkeleton()\"\n     [class.c-img-preview--error]=\"hasImageError()\"\n     [style.width]=\"width()\"\n     [style.height]=\"height()\"\n     [style.border-radius]=\"borderRadius()\"\n     [style.position]=\"isRelative() ? 'relative' : 'static'\">\n  \n  @if (isImageLoading() && showSkeleton()) {\n    <div class=\"c-img-preview__skeleton\"\n         (click)=\"onSkeletonClick()\">\n      <core-generic-skeleton \n        [type]=\"SkeletonType.IMAGE\"\n        [width]=\"width() || '100%'\"\n        [height]=\"height() || '200px'\"\n        [animation]=\"skeletonAnimation()\"\n        [ariaLabel]=\"'Loading image: ' + (alt() || 'Image')\">\n      </core-generic-skeleton>\n    </div>\n  }\n  \n  @if (!isImageLoading() && !hasImageError()) {\n    <img \n      [src]=\"src()\" \n      [alt]=\"alt()\"\n      [title]=\"title()\"\n      [loading]=\"loading()\"\n      [style.object-fit]=\"objectFit()\"\n      [style.border-radius]=\"borderRadius()\"\n      [style.cursor]=\"cursor()\"\n      (click)=\"onImageClick()\">\n  }\n  \n  @if (isImageLoading()) {\n    <img \n      [src]=\"src()\"\n      [alt]=\"alt()\"\n      style=\"display: none;\"\n      (load)=\"onImageLoad()\"\n      (error)=\"onImageError()\">\n  }\n  \n  @if (hasImageError()) {\n    <div class=\"c-img-preview__error\"\n         [style.width]=\"width() || '100%'\"\n         [style.height]=\"height() || '200px'\"\n         [style.border-radius]=\"borderRadius()\">\n      <div class=\"c-img-preview__error-content\">\n        <span class=\"c-img-preview__error-icon\">\uD83D\uDCF7</span>\n        <span class=\"c-img-preview__error-text\">Error al cargar imagen</span>\n      </div>\n    </div>\n  }\n  \n</div>" }]
         }] });
 
 class FileFieldComponent extends BaseFieldComponent {
@@ -1467,7 +1833,7 @@ class FileFieldComponent extends BaseFieldComponent {
         this.onBlur();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FileFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: FileFieldComponent, isStandalone: true, selector: "core-file-field", usesInheritance: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<label class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n  @if (field().label) {\n    <span class=\"c-entry-text\">\n      {{ field().label | translate }}\n      @if (hasRequiredValidators()) {\n        <span class=\"c-required\">*</span>\n      }\n    </span>\n  }\n  <div class=\"c-entry-file\" [class.has-error]=\"hasError()\">\n    @if(fieldConfig().multiple || isEditMode() || allFiles().length === 0) {\n      <label class=\"c-entry-file__label\">\n        <span class=\"icon-upload c-entry-file__icon\"></span>\n        <input\n          type=\"file\"\n          class=\"c-entry-file__input\"\n          (change)=\"onFileSelected($event)\"\n          [accept]=\"fieldConfig().accept\"\n          [multiple]=\"fieldConfig().multiple\"\n          (blur)=\"onBlurInput()\"\n          [readonly]=\"isReadonly()\"\n        >\n        {{ fieldConfig().placeholder ?? fieldConfig().label | translate }}\n        @if(fieldConfig().acceptString) {\n          <br>\n          <span class=\"c-entry-file__filename\" id=\"file-name\">{{ fieldConfig().acceptString }}</span>\n        }\n      </label>\n    }\n\n    @if (allFiles().length > 0) {\n      <div class=\"c-attachments\">\n        <p class=\"c-entry-text\">{{ 'files.attachedFiles' | translate }}</p>\n        \n        <ul class=\"c-attachments__list\">\n          @for (file of allFiles(); track $index; let i = $index) {\n            <li class=\"c-attachments__item\">\n              <div class=\"c-bulleted-text\">\n                @if(!isServerFile(file)) {\n                  <time>{{ getCurrentDate() }}</time>\n                  <span>{{ getCurrentUser() }}</span>\n                }\n              </div>\n              \n              <div class=\"c-attachments__holder\">\n                  @if(!isServerFile(file) && file.type.startsWith('image/') && fieldConfig().showPreview !== false) {\n                    <div class=\"c-attachments__content\">\n                      <div class=\"c-attachments__pic\">\n                        @if(isPreviewFile(file) && getOriginalUrl(file)) {\n                          <core-image-preview\n                            [src]=\"getOriginalUrl(file)!\"\n                            [alt]=\"file.name\"\n                          ></core-image-preview>\n                        } @else if(getPreviewUrl(file)) {\n                          <core-image-preview\n                            [src]=\"getPreviewUrl(file)!\"\n                            [alt]=\"file.name\"\n                          ></core-image-preview>\n                        }\n                      </div>\n                      <div class=\"c-attachments__text\">\n                        <span class=\"c-attachments__name-file\">{{ file.name }}</span>\n                        <span class=\"c-attachments__file-size\">({{ formatFileSize(file.size) }})</span>\n                      </div>\n                    </div>\n                  } @else {\n                    <a class=\"c-attachments__content\">\n                      @if(isServerFile(file)) {\n                        <span class=\"icon-file\"></span>\n                        {{ file.filename }}\n                      } @else {\n                        <span [class]=\"getFileIcon(file)\"></span>\n                        <div class=\"c-attachments__text\">\n                          <span class=\"c-attachments__name-file\">{{ file.name }}</span>\n                          <span class=\"c-attachments__file-size\">({{ formatFileSize(file.size) }})</span>\n                        </div>\n                      }\n                    </a>\n                  }\n\n                  <div class=\"c-attachments__actions u-flex u-flex--wrap\">\n                    <button \n                      type=\"button\" \n                      class=\"c-link context:error\" \n                      (click)=\"removeFile(i)\"\n                      [title]=\"'files.remove' | translate\"\n                    >\n                      <span class=\"icon-delete\"></span>\n                      {{ 'files.remove' | translate }}\n                    </button>\n\n                    @if(fieldConfig().customActions) {\n                      @for(action of fieldConfig().customActions; track action.id) {\n                        <button \n                          type=\"button\"\n                          class=\"c-link c-link--underlined\" \n                          (click)=\"action.action(file)\"\n                          [title]=\"action.label | translate\"\n                        >\n                          {{ action.label | translate }}\n                          <span [ngClass]=\"action.icon | coreIconCompat\"></span>\n                        </button>\n                      }\n                    }\n                  </div>\n              </div>\n            </li>\n          }\n        </ul>\n      </div>\n    }\n  </div>\n  <core-field-errors [errors]=\"errors()\" />\n  @if(displayErrorMessage()) {\n    <span class=\"c-entry-error\">{{ displayErrorMessage()!.key | translate:displayErrorMessage()!.params }}</span>\n  }\n</label>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FieldErrorsComponent, selector: "core-field-errors", inputs: ["errors"] }, { kind: "pipe", type: IconCompatPipe, name: "coreIconCompat" }, { kind: "component", type: ImagePreviewComponent, selector: "core-image-preview", inputs: ["src", "alt", "title", "width", "height", "objectFit", "borderRadius", "cursor", "loading", "isRelative"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: FileFieldComponent, isStandalone: true, selector: "core-file-field", usesInheritance: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<label class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n  @if (field().label) {\n    <span class=\"c-entry-text\">\n      {{ field().label | translate }}\n      @if (hasRequiredValidators()) {\n        <span class=\"c-required\">*</span>\n      }\n    </span>\n  }\n  <div class=\"c-entry-file\" [class.has-error]=\"hasError()\">\n    @if(fieldConfig().multiple || isEditMode() || allFiles().length === 0) {\n      <label class=\"c-entry-file__label\">\n        <span class=\"icon-upload c-entry-file__icon\"></span>\n        <input\n          type=\"file\"\n          class=\"c-entry-file__input\"\n          (change)=\"onFileSelected($event)\"\n          [accept]=\"fieldConfig().accept\"\n          [multiple]=\"fieldConfig().multiple\"\n          (blur)=\"onBlurInput()\"\n          [readonly]=\"isReadonly()\"\n        >\n        {{ fieldConfig().placeholder ?? fieldConfig().label | translate }}\n        @if(fieldConfig().acceptString) {\n          <br>\n          <span class=\"c-entry-file__filename\" id=\"file-name\">{{ fieldConfig().acceptString }}</span>\n        }\n      </label>\n    }\n\n    @if (allFiles().length > 0) {\n      <div class=\"c-attachments\">\n        <p class=\"c-entry-text\">{{ 'files.attachedFiles' | translate }}</p>\n        \n        <ul class=\"c-attachments__list\">\n          @for (file of allFiles(); track $index; let i = $index) {\n            <li class=\"c-attachments__item\">\n              <div class=\"c-bulleted-text\">\n                @if(!isServerFile(file)) {\n                  <time>{{ getCurrentDate() }}</time>\n                  <span>{{ getCurrentUser() }}</span>\n                }\n              </div>\n              \n              <div class=\"c-attachments__holder\">\n                  @if(!isServerFile(file) && file.type.startsWith('image/') && fieldConfig().showPreview !== false) {\n                    <div class=\"c-attachments__content\">\n                      <div class=\"c-attachments__pic\">\n                        @if(isPreviewFile(file) && getOriginalUrl(file)) {\n                          <core-image-preview\n                            [src]=\"getOriginalUrl(file)!\"\n                            [alt]=\"file.name\"\n                          ></core-image-preview>\n                        } @else if(getPreviewUrl(file)) {\n                          <core-image-preview\n                            [src]=\"getPreviewUrl(file)!\"\n                            [alt]=\"file.name\"\n                          ></core-image-preview>\n                        }\n                      </div>\n                      <div class=\"c-attachments__text\">\n                        <span class=\"c-attachments__name-file\">{{ file.name }}</span>\n                        <span class=\"c-attachments__file-size\">({{ formatFileSize(file.size) }})</span>\n                      </div>\n                    </div>\n                  } @else {\n                    <a class=\"c-attachments__content\">\n                      @if(isServerFile(file)) {\n                        <span class=\"icon-file\"></span>\n                        {{ file.filename }}\n                      } @else {\n                        <span [class]=\"getFileIcon(file)\"></span>\n                        <div class=\"c-attachments__text\">\n                          <span class=\"c-attachments__name-file\">{{ file.name }}</span>\n                          <span class=\"c-attachments__file-size\">({{ formatFileSize(file.size) }})</span>\n                        </div>\n                      }\n                    </a>\n                  }\n\n                  <div class=\"c-attachments__actions u-flex u-flex--wrap\">\n                    <button \n                      type=\"button\" \n                      class=\"c-link context:error\" \n                      (click)=\"removeFile(i)\"\n                      [title]=\"'files.remove' | translate\"\n                    >\n                      <span class=\"icon-delete\"></span>\n                      {{ 'files.remove' | translate }}\n                    </button>\n\n                    @if(fieldConfig().customActions) {\n                      @for(action of fieldConfig().customActions; track action.id) {\n                        <button \n                          type=\"button\"\n                          class=\"c-link c-link--underlined\" \n                          (click)=\"action.action(file)\"\n                          [title]=\"action.label | translate\"\n                        >\n                          {{ action.label | translate }}\n                          <span [ngClass]=\"action.icon | coreIconCompat\"></span>\n                        </button>\n                      }\n                    }\n                  </div>\n              </div>\n            </li>\n          }\n        </ul>\n      </div>\n    }\n  </div>\n  <core-field-errors [errors]=\"errors()\" />\n  @if(displayErrorMessage()) {\n    <span class=\"c-entry-error\">{{ displayErrorMessage()!.key | translate:displayErrorMessage()!.params }}</span>\n  }\n</label>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FieldErrorsComponent, selector: "core-field-errors", inputs: ["errors"] }, { kind: "pipe", type: IconCompatPipe, name: "coreIconCompat" }, { kind: "component", type: ImagePreviewComponent, selector: "core-image-preview", inputs: ["src", "alt", "title", "width", "height", "objectFit", "borderRadius", "cursor", "loading", "isRelative", "showSkeleton", "skeletonAnimation"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FileFieldComponent, decorators: [{
             type: Component,
@@ -11619,11 +11985,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
 // Este archivo es generado automáticamente por scripts/update-version.js
 // No edites manualmente este archivo
 const VERSION = {
-    full: '2.12.13',
+    full: '2.12.15',
     major: 2,
     minor: 12,
-    patch: 13,
-    timestamp: '2025-09-08T15:36:53.831Z',
+    patch: 15,
+    timestamp: '2025-09-08T19:48:26.568Z',
     buildDate: '8/9/2025'
 };
 
@@ -13201,7 +13567,7 @@ class CarouselComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: CarouselComponent, isStandalone: true, selector: "core-carousel", inputs: { images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize()", "keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "carouselHolder", first: true, predicate: ["carouselHolder"], descendants: true, isSignal: true }, { propertyName: "carouselViewport", first: true, predicate: ["carouselViewport"], descendants: true, isSignal: true }], ngImport: i0, template: "<div \n  [ngClass]=\"carouselClasses()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  tabindex=\"0\"\n  #carouselViewport\n  [class.is-multiple]=\"perView() > 1\">\n  \n  <div class=\"c-img-carousel__viewport\">\n    <div class=\"c-img-carousel__holder js-img-carousel-holder\" #carouselHolder>\n      <div \n        *ngFor=\"let image of images(); let i = index\"\n        class=\"c-img-carousel__slide js-img-carousel-slide\">\n        <div class=\"c-img-carousel__slide-inner\">\n          <core-image-preview\n            [src]=\"image.url\"\n            [alt]=\"image.alt || 'Image ' + (i + 1)\"\n            [title]=\"image.title || image.alt || 'Image ' + (i + 1)\">\n          </core-image-preview>\n        </div>\n      </div>\n    </div>\n    \n    @if (!config().arrowsOutside) {\n      <button \n        *ngIf=\"showArrows()\"\n        class=\"c-img-carousel__btn c-img-carousel__btn--prev icon-arrow-left\"\n        type=\"button\"\n        (click)=\"goToPrevSlide()\"\n        [attr.aria-label]=\"'Anterior'\"\n        data-control=\"prevBtn\">\n      </button>\n      \n      <button \n        *ngIf=\"showArrows()\"\n        class=\"c-img-carousel__btn c-img-carousel__btn--next icon-arrow-right\"\n        type=\"button\"\n        (click)=\"goToNextSlide()\"\n        [attr.aria-label]=\"'Siguiente'\"\n        data-control=\"nextBtn\">\n      </button>\n    }\n    \n    <div \n      *ngIf=\"showDots()\"\n      class=\"c-img-carousel__dots js-img-carousel-nav\"\n      aria-label=\"Navegaci\u00F3n\">\n      <button\n        *ngFor=\"let page of dots(); let i = index\"\n        class=\"c-img-carousel__dot js-img-carousel-dot\"\n        type=\"button\"\n        (click)=\"goToPage(i)\"\n        [class.c-img-carousel__dot--active]=\"currentPage() === i\"\n        [attr.aria-label]=\"'Ir a p\u00E1gina ' + (i + 1)\"\n        [attr.aria-current]=\"currentPage() === i ? 'true' : 'false'\">\n      </button>\n    </div>\n  </div>\n  @if(config().arrowsOutside) {\n    <button \n      *ngIf=\"showArrows()\"\n      class=\"c-img-carousel__btn c-img-carousel__btn--prev icon-arrow-left\"\n      type=\"button\"\n      (click)=\"goToPrevSlide()\"\n      [attr.aria-label]=\"'Anterior'\"\n      data-control=\"prevBtn\">\n    </button>\n    \n    <button \n      *ngIf=\"showArrows()\"\n      class=\"c-img-carousel__btn c-img-carousel__btn--next icon-arrow-right\"\n      type=\"button\"\n      (click)=\"goToNextSlide()\"\n      [attr.aria-label]=\"'Siguiente'\"\n      data-control=\"nextBtn\">\n    </button>\n  }\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ImagePreviewComponent, selector: "core-image-preview", inputs: ["src", "alt", "title", "width", "height", "objectFit", "borderRadius", "cursor", "loading", "isRelative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: CarouselComponent, isStandalone: true, selector: "core-carousel", inputs: { images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize()", "keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "carouselHolder", first: true, predicate: ["carouselHolder"], descendants: true, isSignal: true }, { propertyName: "carouselViewport", first: true, predicate: ["carouselViewport"], descendants: true, isSignal: true }], ngImport: i0, template: "<div \n  [ngClass]=\"carouselClasses()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  tabindex=\"0\"\n  #carouselViewport\n  [class.is-multiple]=\"perView() > 1\">\n  \n  <div class=\"c-img-carousel__viewport\">\n    <div class=\"c-img-carousel__holder js-img-carousel-holder\" #carouselHolder>\n      <div \n        *ngFor=\"let image of images(); let i = index\"\n        class=\"c-img-carousel__slide js-img-carousel-slide\">\n        <div class=\"c-img-carousel__slide-inner\">\n          <core-image-preview\n            [src]=\"image.url\"\n            [alt]=\"image.alt || 'Image ' + (i + 1)\"\n            [title]=\"image.title || image.alt || 'Image ' + (i + 1)\">\n          </core-image-preview>\n        </div>\n      </div>\n    </div>\n    \n    @if (!config().arrowsOutside) {\n      <button \n        *ngIf=\"showArrows()\"\n        class=\"c-img-carousel__btn c-img-carousel__btn--prev icon-arrow-left\"\n        type=\"button\"\n        (click)=\"goToPrevSlide()\"\n        [attr.aria-label]=\"'Anterior'\"\n        data-control=\"prevBtn\">\n      </button>\n      \n      <button \n        *ngIf=\"showArrows()\"\n        class=\"c-img-carousel__btn c-img-carousel__btn--next icon-arrow-right\"\n        type=\"button\"\n        (click)=\"goToNextSlide()\"\n        [attr.aria-label]=\"'Siguiente'\"\n        data-control=\"nextBtn\">\n      </button>\n    }\n    \n    <div \n      *ngIf=\"showDots()\"\n      class=\"c-img-carousel__dots js-img-carousel-nav\"\n      aria-label=\"Navegaci\u00F3n\">\n      <button\n        *ngFor=\"let page of dots(); let i = index\"\n        class=\"c-img-carousel__dot js-img-carousel-dot\"\n        type=\"button\"\n        (click)=\"goToPage(i)\"\n        [class.c-img-carousel__dot--active]=\"currentPage() === i\"\n        [attr.aria-label]=\"'Ir a p\u00E1gina ' + (i + 1)\"\n        [attr.aria-current]=\"currentPage() === i ? 'true' : 'false'\">\n      </button>\n    </div>\n  </div>\n  @if(config().arrowsOutside) {\n    <button \n      *ngIf=\"showArrows()\"\n      class=\"c-img-carousel__btn c-img-carousel__btn--prev icon-arrow-left\"\n      type=\"button\"\n      (click)=\"goToPrevSlide()\"\n      [attr.aria-label]=\"'Anterior'\"\n      data-control=\"prevBtn\">\n    </button>\n    \n    <button \n      *ngIf=\"showArrows()\"\n      class=\"c-img-carousel__btn c-img-carousel__btn--next icon-arrow-right\"\n      type=\"button\"\n      (click)=\"goToNextSlide()\"\n      [attr.aria-label]=\"'Siguiente'\"\n      data-control=\"nextBtn\">\n    </button>\n  }\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ImagePreviewComponent, selector: "core-image-preview", inputs: ["src", "alt", "title", "width", "height", "objectFit", "borderRadius", "cursor", "loading", "isRelative", "showSkeleton", "skeletonAnimation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CarouselComponent, decorators: [{
             type: Component,
@@ -13541,5 +13907,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActiveFiltersComponent, AlertComponent, AlertContainerComponent, AlertService, AlertType, ApiConfigurationProvider, BaseFieldComponent, ButtonContext, ButtonSize, ButtonType, CacheBustingInterceptor, CardComponent, CarouselComponent, CheckboxFieldComponent, ConfigurationModel, ConfirmationDialogComponent, ConfirmationDialogService, CoreHostDirective, CoreUiHttpLoaderFactory, CoreUiTranslateLoader, CoreUiTranslateService, DataListComponent, DataListItemComponent, DateFieldComponent, DateUtility, DatetimeFieldComponent, DialogActions, DocumentAction, DocumentDisplayMode, DropdownComponent, DropdownDirection, DropdownService, DynamicFieldDirective, DynamicFieldsHelper, FieldErrorsComponent, FieldType, FileFieldComponent, FileModel, FileTemplateModel, FileTemplateType, FileType, FileTypeModel, FileUploadService, FilterModalComponent, FilterService, FilterType, GenericButtonComponent, GenericDocumentationComponent, GenericModalComponent, GenericPaginationComponent, GenericRatingComponent, GenericSidebarComponent, GenericStepsComponent, GenericTableComponent, GenericTabsComponent, GenericTimelineComponent, GlobalApiConfigService, HeaderComponent, HeaderConfigurationService, HeaderElementType, HeaderService, HttpLoaderFactory, ImageModalComponent, ImageModalService, ImagePreviewComponent, LayoutAuth, LayoutBreakpoint, LayoutComponent, LayoutService, LayoutStateService, LayoutType, LoaderComponent, LoaderService, MainNavComponent, MainNavService, ModalMode, ModelApiService, MultiEntryFieldComponent, MultiEntryOutputFormat, NumberFieldComponent, NumberFieldConfigType, NumberFieldType, NumberRange, PERMISSION_ACTIONS_PROVIDER, PERMISSION_PROVIDER, PERMISSION_RESOURCES_PROVIDER, PaginationService, PasswordFieldComponent, PermissionEnumsService, PermissionModel, PermissionService, PermissionWrapperService, PermissionsActions, PermissionsInterceptor, PermissionsResources, ProgressBarComponent, ProgressBarSize, RatingService, RatingSize, RatingType, ResetPasswordModel, RoleModel, SelectFieldComponent, ServerSelectFieldComponent, ServerSelectService, SidebarCustomModalComponent, SidebarCustomModalService, SidebarHeight, SidebarMobileModalService, SidebarMobileType, SidebarPosition, SidebarService, SidebarState, SidebarTemplateRegistryService, SidebarVisibility, SidebarWidth, SmartFieldComponent, SortDirection, SortMode, StepSize, StepStatus, StepType, StepsService, SwitchFieldComponent, TableAction, TableActionService, TableDataService, TableSortService, TextAreaFieldComponent, TextFieldComponent, TimeFieldComponent, TimeInterval, TimelineService, TimelineStatus, TimelineType, TranslationMergeService, UsersModel, VERSION, equalToValidator, isSameDate, provideCoreUiTranslateLoader, providePermissionActions, providePermissionEnums, providePermissionResources, providePermissionService, providePermissionServiceFactory, provideTranslateLoader };
+export { ActiveFiltersComponent, AlertComponent, AlertContainerComponent, AlertService, AlertType, ApiConfigurationProvider, BaseFieldComponent, ButtonContext, ButtonSize, ButtonType, CacheBustingInterceptor, CardComponent, CarouselComponent, CheckboxFieldComponent, ConfigurationModel, ConfirmationDialogComponent, ConfirmationDialogService, CoreHostDirective, CoreUiHttpLoaderFactory, CoreUiTranslateLoader, CoreUiTranslateService, DataListComponent, DataListItemComponent, DateFieldComponent, DateUtility, DatetimeFieldComponent, DialogActions, DocumentAction, DocumentDisplayMode, DropdownComponent, DropdownDirection, DropdownService, DynamicFieldDirective, DynamicFieldsHelper, FieldErrorsComponent, FieldType, FileFieldComponent, FileModel, FileTemplateModel, FileTemplateType, FileType, FileTypeModel, FileUploadService, FilterModalComponent, FilterService, FilterType, GenericButtonComponent, GenericDocumentationComponent, GenericModalComponent, GenericPaginationComponent, GenericRatingComponent, GenericSidebarComponent, GenericSkeletonComponent, GenericStepsComponent, GenericTableComponent, GenericTabsComponent, GenericTimelineComponent, GlobalApiConfigService, HeaderComponent, HeaderConfigurationService, HeaderElementType, HeaderService, HttpLoaderFactory, ImageModalComponent, ImageModalService, ImagePreviewComponent, LayoutAuth, LayoutBreakpoint, LayoutComponent, LayoutService, LayoutStateService, LayoutType, LoaderComponent, LoaderService, MainNavComponent, MainNavService, ModalMode, ModelApiService, MultiEntryFieldComponent, MultiEntryOutputFormat, NumberFieldComponent, NumberFieldConfigType, NumberFieldType, NumberRange, PERMISSION_ACTIONS_PROVIDER, PERMISSION_PROVIDER, PERMISSION_RESOURCES_PROVIDER, PaginationService, PasswordFieldComponent, PermissionEnumsService, PermissionModel, PermissionService, PermissionWrapperService, PermissionsActions, PermissionsInterceptor, PermissionsResources, ProgressBarComponent, ProgressBarSize, RatingService, RatingSize, RatingType, ResetPasswordModel, RoleModel, SelectFieldComponent, ServerSelectFieldComponent, ServerSelectService, SidebarCustomModalComponent, SidebarCustomModalService, SidebarHeight, SidebarMobileModalService, SidebarMobileType, SidebarPosition, SidebarService, SidebarState, SidebarTemplateRegistryService, SidebarVisibility, SidebarWidth, SkeletonAnimation, SkeletonService, SkeletonSize, SkeletonType, SmartFieldComponent, SortDirection, SortMode, StepSize, StepStatus, StepType, StepsService, SwitchFieldComponent, TableAction, TableActionService, TableDataService, TableSortService, TextAreaFieldComponent, TextFieldComponent, TimeFieldComponent, TimeInterval, TimelineService, TimelineStatus, TimelineType, TranslationMergeService, UsersModel, VERSION, equalToValidator, isSameDate, provideCoreUiTranslateLoader, providePermissionActions, providePermissionEnums, providePermissionResources, providePermissionService, providePermissionServiceFactory, provideTranslateLoader };
 //# sourceMappingURL=solcre-org-core-ui.mjs.map