@sarasanalytics-com/design-system 0.0.164 → 0.0.165

package/fesm2022/sarasanalytics-com-design-system.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, EventEmitter, Input, Output, Injectable, inject, Inject, ChangeDetectionStrategy, ViewChild, HostListener, signal, computed, Optional, ElementRef, effect, forwardRef, Directive, HostBinding } from '@angular/core';
+import { Component, ViewEncapsulation, EventEmitter, Input, Output, Injectable, inject, Inject, ChangeDetectionStrategy, ViewChild, HostListener, signal, computed, Optional, ElementRef, effect, forwardRef, HostBinding, Directive } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule, NgIf, NgStyle, NgFor } from '@angular/common';
 import * as i1 from '@angular/material/tooltip';
@@ -3925,113 +3925,565 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                 args: [forwardRef(() => MenuDirective)]
             }] } });
 
-class SAMenuComponent {
-    constructor(overlay) {
-        this.overlay = overlay;
-        this.position = 'bottom'; // Default position
-        this.onEvent = new EventEmitter();
-        this.onKeyUpEvent = new EventEmitter();
-        this.closeEvent = new EventEmitter();
-        // @ViewChild('menu', {static: true}) menu;
-        this.isExpanded = false;
-        this.activeTabIndex = 0; // Track the active tab index
+class SkeletonBaseComponent {
+    constructor() {
+        this.width = '100%';
+        this.height = '1rem';
+        this.darkMode = false;
     }
-    ngOnChanges(changes) {
-        if (changes['menu'] && changes['menu'].currentValue) {
-            console.log('Menu component detected changes:', changes['menu'].currentValue);
-            // Reset active tab index if tabs have changed
-            if (this.menu?.tabs?.length && this.activeTabIndex >= this.menu.tabs.length) {
-                this.activeTabIndex = 0;
-            }
-            // Prevent the menu from closing by stopping propagation of any events
-            // that might trigger menu closing during this update cycle
-            setTimeout(() => {
-                // This ensures the menu stays open after the change detection cycle completes
-                console.log('Menu update complete, menu should remain open');
-            }, 0);
-        }
+    get isDark() { return this.darkMode; }
+    get getWidth() {
+        return this.width;
     }
-    ngAfterViewInit() {
-        this.isExpanded = true;
+    get getHeight() {
+        return this.height;
     }
-    setPosition() {
-        // const positions: { [key: string]: ConnectedPosition } = {
-        //   left: { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'top' },
-        //   right: { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'top' },
-        //   top: { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top' },
-        //   bottom: { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom' }
-        // };
-        // const overlayRef = this.overlay.create();
-        // const userProfilePortal = new ComponentPortal(CardComponent);
-        // const compRef = overlayRef.attach(userProfilePortal);
-        // compRef.instance.title = 'need nduk ra bhai'
-        // compRef.instance.body = 'sometime little bit this sometimes little bit that. Comming not comming'
-        // compRef.instance.avatar = '../assets/avatar.svg'
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkeletonBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SkeletonBaseComponent, isStandalone: true, selector: "sa-skeleton-base", inputs: { width: "width", height: "height", darkMode: "darkMode" }, host: { properties: { "class.sa-dark": "this.isDark", "style.width": "this.getWidth", "style.height": "this.getHeight" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{display:block;position:relative;overflow:hidden;background:var(--sa-skeleton-background, #e9ecef);border-radius:var(--sa-skeleton-radius, 4px)}:host.sa-dark{background:var(--sa-skeleton-background-dark, #344054)}:host:after{content:\"\";position:absolute;inset:0;transform:translate(-100%);background:linear-gradient(90deg,transparent,var(--sa-skeleton-shine, rgba(255, 255, 255, .3)),transparent);animation:shimmer var(--sa-skeleton-animation-duration, 1.5s) infinite}:host.sa-dark:after{background:linear-gradient(90deg,transparent,var(--sa-skeleton-shine-dark, #98A2B3),transparent)}@keyframes shimmer{to{transform:translate(100%)}}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkeletonBaseComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sa-skeleton-base', standalone: true, template: `<ng-content></ng-content>`, styles: [":host{display:block;position:relative;overflow:hidden;background:var(--sa-skeleton-background, #e9ecef);border-radius:var(--sa-skeleton-radius, 4px)}:host.sa-dark{background:var(--sa-skeleton-background-dark, #344054)}:host:after{content:\"\";position:absolute;inset:0;transform:translate(-100%);background:linear-gradient(90deg,transparent,var(--sa-skeleton-shine, rgba(255, 255, 255, .3)),transparent);animation:shimmer var(--sa-skeleton-animation-duration, 1.5s) infinite}:host.sa-dark:after{background:linear-gradient(90deg,transparent,var(--sa-skeleton-shine-dark, #98A2B3),transparent)}@keyframes shimmer{to{transform:translate(100%)}}\n"] }]
+        }], propDecorators: { width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], darkMode: [{
+                type: Input
+            }], isDark: [{
+                type: HostBinding,
+                args: ['class.sa-dark']
+            }], getWidth: [{
+                type: HostBinding,
+                args: ['style.width']
+            }], getHeight: [{
+                type: HostBinding,
+                args: ['style.height']
+            }] } });
+
+class SkeletonTextComponent {
+    constructor() {
+        this.width = '100%';
+        this.height = '1rem';
     }
-    itemClicked(event) {
-        this.onMenuItemClick(null, event.item);
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkeletonTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SkeletonTextComponent, isStandalone: true, selector: "sa-skeleton-text", inputs: { width: "width", height: "height", darkMode: "darkMode" }, ngImport: i0, template: `<sa-skeleton-base [width]="width" [height]="height" [darkMode]="darkMode"></sa-skeleton-base>`, isInline: true, dependencies: [{ kind: "component", type: SkeletonBaseComponent, selector: "sa-skeleton-base", inputs: ["width", "height", "darkMode"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkeletonTextComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sa-skeleton-text',
+                    standalone: true,
+                    imports: [SkeletonBaseComponent],
+                    template: `<sa-skeleton-base [width]="width" [height]="height" [darkMode]="darkMode"></sa-skeleton-base>`,
+                }]
+        }], propDecorators: { width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], darkMode: [{
+                type: Input
+            }] } });
+class SkeletonCircleComponent {
+    constructor() {
+        this.size = '3rem';
     }
-    onMenuItemClick(event, item) {
-        // item.isSelected = !item.isSelected;
-        this.onEvent.emit({ type: 'CLICK', item, menu: this.menu });
-        // Close the menu after the item is clicked, just like the close button
-        if (item.subMenu === null || item.subMenu === undefined) {
-            this.closeEvent.emit(event);
-        }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkeletonCircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SkeletonCircleComponent, isStandalone: true, selector: "sa-skeleton-circle", inputs: { size: "size", darkMode: "darkMode" }, ngImport: i0, template: `<sa-skeleton-base [width]="size" [height]="size" [darkMode]="darkMode" style="border-radius: 50%"></sa-skeleton-base>`, isInline: true, dependencies: [{ kind: "component", type: SkeletonBaseComponent, selector: "sa-skeleton-base", inputs: ["width", "height", "darkMode"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkeletonCircleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sa-skeleton-circle',
+                    standalone: true,
+                    imports: [SkeletonBaseComponent],
+                    template: `<sa-skeleton-base [width]="size" [height]="size" [darkMode]="darkMode" style="border-radius: 50%"></sa-skeleton-base>`,
+                }]
+        }], propDecorators: { size: [{
+                type: Input
+            }], darkMode: [{
+                type: Input
+            }] } });
+class SkeletonRectangleComponent {
+    constructor() {
+        this.width = '100%';
+        this.height = '100px';
     }
-    onSearch(event) {
-        this.onEvent.emit({ type: 'SEARCH', value: event.target.value });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkeletonRectangleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SkeletonRectangleComponent, isStandalone: true, selector: "sa-skeleton-rectangle", inputs: { width: "width", height: "height", darkMode: "darkMode" }, ngImport: i0, template: `<sa-skeleton-base [width]="width" [height]="height" [darkMode]="darkMode"></sa-skeleton-base>`, isInline: true, dependencies: [{ kind: "component", type: SkeletonBaseComponent, selector: "sa-skeleton-base", inputs: ["width", "height", "darkMode"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkeletonRectangleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sa-skeleton-rectangle',
+                    standalone: true,
+                    imports: [SkeletonBaseComponent],
+                    template: `<sa-skeleton-base [width]="width" [height]="height" [darkMode]="darkMode"></sa-skeleton-base>`,
+                }]
+        }], propDecorators: { width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], darkMode: [{
+                type: Input
+            }] } });
+class SkeletonEllipticalComponent {
+    constructor() {
+        this.width = '200px';
+        this.height = '48px';
     }
-    setActiveTab(index, tabname) {
-        this.activeTabIndex = index; // Update the active tab index
-        this.onEvent.emit({ type: 'TAB_CLICK', activeTab: tabname, menu: this.menu });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkeletonEllipticalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SkeletonEllipticalComponent, isStandalone: true, selector: "sa-skeleton-elliptical", inputs: { width: "width", height: "height", darkMode: "darkMode" }, ngImport: i0, template: `<sa-skeleton-base [width]="width" [height]="height" [darkMode]="darkMode" style="border-radius: 100px;"></sa-skeleton-base>`, isInline: true, dependencies: [{ kind: "component", type: SkeletonBaseComponent, selector: "sa-skeleton-base", inputs: ["width", "height", "darkMode"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkeletonEllipticalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sa-skeleton-elliptical',
+                    standalone: true,
+                    imports: [SkeletonBaseComponent],
+                    template: `<sa-skeleton-base [width]="width" [height]="height" [darkMode]="darkMode" style="border-radius: 100px;"></sa-skeleton-base>`,
+                }]
+        }], propDecorators: { width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], darkMode: [{
+                type: Input
+            }] } });
+
+class SkeletonContainerComponent {
+    constructor() {
+        this.direction = 'column';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SAMenuComponent, deps: [{ token: i1$4.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: SAMenuComponent, isStandalone: true, selector: "sa-menu", inputs: { position: "position", menu: "menu", hostEl: "hostEl" }, outputs: { onEvent: "onEvent", onKeyUpEvent: "onKeyUpEvent", closeEvent: "closeEvent" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "<div class=\"sa-menu\" [ngClass]=\"menu.showTray ? 'sa-menu-tray sa-round-border' : ''\"\r\n    [ngStyle]=\"{width: menu.width || 'max-content'}\">\r\n    @if(menu?.title){\r\n    <div class=\"sa-menu-title\">\r\n        <h1>{{menu?.title}}</h1>\r\n        <sa-icon [icon]=\"'closeOutlined'\" [size]=\"'20'\" color=\"var(--grey-200, #D0D5DD)\" class=\"sa-menu-close-icon\"\r\n            (click)=\"closeEvent.emit($event)\"></sa-icon>\r\n    </div>\r\n    }\r\n\r\n    <!-- @if(menu?.itemGroups && menu.itemGroups.length){\r\n        @for (groupItem of menu.itemGroups; track groupItem) {\r\n            <div class=\"sa-menu-group\">\r\n                <h2>{{groupItem.groupTitle}}</h2>\r\n        \r\n                @for (item of groupItem.items; track $index) {\r\n                <sa-menu-item [item]=\"item\" [showRound]=\"menu.showTray\" (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\r\n                }\r\n            </div>\r\n        }\r\n    } @else if(menu?.items && menu.items.length){\r\n        <div class=\"sa-menu-items\">\r\n            @for (item of menu.items; track item) {\r\n                <sa-menu-item [item]=\"item\" (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\r\n            }\r\n        </div>\r\n    } -->\r\n\r\n\r\n    <!-- Tab Content or Item Groups -->\r\n    <div class=\"sa-menu-content\">\r\n        <div class=\"sa-menu-content-inner {{menu?.showSearch ? 'sa-menu-content-with-search' : ''}}\">\r\n            @if(menu?.showSearch){\r\n                <div class=\"search-container\">\r\n                    <sa-icon icon=\"search\"></sa-icon>\r\n                    <input name=\"menu-search-bar\" class=\"search-input\" (keyup)=\"onSearch($event)\" type=\"text\" [placeholder]=\"menu.searchPlaceholder\"  \r\n                    />\r\n                    <button *ngIf=\"menu?.showAddIcon\"><i class=\"fas fa-plus\"></i></button>\r\n                </div>\r\n            }\r\n            \r\n            <!-- Tabs -->\r\n            @if(menu?.tabs){\r\n            <div class=\"sa-menu-tabs\">\r\n                <button *ngFor=\"let tab of menu.tabs; let i = index\" [class.active]=\"i === activeTabIndex\"\r\n                    (click)=\"setActiveTab(i,tab.label)\">\r\n                    {{ tab.label }}\r\n                    <!-- ({{ tab.itemGroups.length }}) -->\r\n                </button>\r\n            </div>\r\n            }\r\n            <!-- Tabs End -->\r\n\r\n            @if(menu?.tabs?.length){\r\n            @if(menu.tabs[activeTabIndex]?.itemGroups?.length){\r\n            <ng-container *ngFor=\"let groupItem of menu.tabs[activeTabIndex].itemGroups\">\r\n                <div class=\"sa-menu-group\">\r\n                    <h2>{{groupItem.groupTitle}}</h2>\r\n                    <ng-container *ngFor=\"let item of groupItem.items\">\r\n                        <sa-menu-item [item]=\"item\" [showRound]=\"menu.showTray\"\r\n                            (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n            }\r\n            } @else if(menu?.itemGroups?.length){\r\n            <ng-container *ngFor=\"let groupItem of menu.itemGroups\">\r\n                <div class=\"sa-menu-group\">\r\n                    <h2>{{groupItem.groupTitle}}</h2>\r\n                    <ng-container *ngFor=\"let item of groupItem.items\">\r\n                        <sa-menu-item [item]=\"item\" [showRound]=\"menu.showTray\"\r\n                            (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n            }\r\n        </div>\r\n    </div>\r\n\r\n    @if(menu?.items && menu?.items?.length){\r\n    <div *ngIf=\"menu?.user\" class=\"profile-badge\">\r\n        <div class=\"avatar\">\r\n            <sa-avatar [altText]=\"menu?.user?.altText\" [imagePath]=\"''\" [size]=\"'large'\"></sa-avatar>\r\n        </div>\r\n        <div class=\"profile-info\">\r\n            <p class=\"profile-name\">{{menu?.user?.name}}</p>\r\n            <p class=\"profile-email\">{{menu?.user?.email}}</p>\r\n        </div>\r\n    </div>\r\n    <div class=\"sa-menu-items\">\r\n        @for (item of menu.items; track item) {\r\n            <sa-menu-item [item]=\"item\" (onEvent)=\"itemClicked($event)\"> </sa-menu-item>\r\n        }\r\n    </div>\r\n    }\r\n\r\n</div>", styles: [".sa-menu{background-color:var(--primary-800);box-shadow:3px 4px 16px 4px #00000014;width:max-content;border-radius:5px;overflow-y:auto;max-height:100%}.sa-round-border{border-radius:8px}.sa-menu-tray{height:calc(100vh - 16px);margin-top:8px;border-top-left-radius:0;border-bottom-left-radius:0;background:var(--grey-700, #1D2939);padding:0 1rem 1rem;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}.sa-menu-tray::-webkit-scrollbar{width:6px}.sa-menu-tray::-webkit-scrollbar-track{background:transparent}.sa-menu-tray::-webkit-scrollbar-thumb{background-color:#ffffff4d;border-radius:3px}sa-menu-item{cursor:pointer;display:block;color:var(--grey-100, #EAECF0)}.sa-menu-title{display:flex;justify-content:space-between;align-items:center;position:fixed;padding:1rem 0 .5rem;height:64px;width:calc(100% - 2rem);border-bottom:1px solid var(--primary-50, #F4EBFF);background:var(--grey-700, #1D2939);z-index:1}.sa-menu-title h1{color:var(--grey-100, #EAECF0);font-family:var(--font-family, Roboto);font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px;margin-bottom:0;margin-top:0}.sa-menu-close-icon{cursor:pointer;margin-left:auto;height:20px}.search-container{position:relative;display:flex;align-items:center;margin-bottom:1rem;margin-top:4.75rem}.search-container input{flex:1;padding:.5rem .5rem .5rem 2rem;background-color:#4a5568;border-radius:.25rem;font-size:.875rem;border:none;outline:none;border-radius:4px;color:var(--grey-200, #D0D5DD);border:1px solid var(--grey-900, #0C111D);background:var(--grey-900, #0C111D);box-sizing:border-box}.search-container .search-icon{position:absolute;left:.5rem;font-size:1rem;color:#888;pointer-events:none}.search-container button{margin-left:.5rem;background-color:#6b46c1;padding:.5rem;border-radius:.25rem;border:none;cursor:pointer}.sa-menu-group{margin-bottom:1rem;padding-bottom:.8rem;border-bottom:1px solid var(--grey-400, #475467)}.sa-menu-group:last-child{border-bottom:none}.sa-menu-group h2{color:var(--grey-300, #D0D5DD);font-family:var(--font-family, Roboto);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;text-transform:uppercase;margin-bottom:.5rem}.MenuBar{width:max-content;margin-top:8px;background-color:var(--grey-400);border-top-left-radius:0;border-bottom-left-radius:0;background-color:#2d3748;padding:0}.sa-menu-tabs{display:flex;border-bottom:1px solid #ccc;margin-bottom:1rem}.sa-menu-tabs button{flex:1;padding:.5rem 1rem;background:none;border:none;cursor:pointer;font-size:12px;font-style:normal;font-weight:400;line-height:16px;color:#888;border-bottom:2px solid transparent;transition:all .5s ease}.sa-menu-tabs button.active{color:#f7f3f3;border-bottom:2px solid #f7f7f7;font-size:12px;font-style:normal;font-weight:600;line-height:16px;letter-spacing:.5px}.sa-menu-content{padding:0rem 0}.sa-menu-content-inner{padding-top:0}.sa-menu-content .sa-menu-content-with-search,.sa-menu-content-with-search.sa-menu-content-inner{padding:0}.features-tray-menu .sa-menu-content-inner{padding-top:5rem}.features-tray-menu .sa-menu-content-with-search.sa-menu-content-inner{padding-top:0}.sa-menu-group h2{margin-top:1rem}.sa-menu-group:first-child h2{margin-top:0}.sa-menu-group{margin-bottom:1rem}.profile-badge{display:flex;align-items:center;gap:8px;padding:12px;width:100%;border-bottom:1px solid var(--grey-400)}.avatar{display:flex;justify-content:center;align-items:center}.profile-info{display:flex;flex-direction:column;justify-content:center;font-weight:300}.profile-name{color:var(--structural-white);font-weight:500;font-size:12px;line-height:1.2;margin:0}.profile-email{color:var(--grey-200);font-size:11px;line-height:1.2;font-weight:400;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SAMenuItemComponent, selector: "sa-menu-item", inputs: ["item", "showRound"], outputs: ["onEvent"] }, { kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "imgWidth", "imgHeight", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "component", type: AvatarComponent, selector: "sa-avatar", inputs: ["id", "imagePath", "altText", "size"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }] }); }
+    get containerStyles() {
+        return {
+            gap: this.gap,
+            padding: this.padding,
+            flexDirection: this.direction
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkeletonContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SkeletonContainerComponent, isStandalone: true, selector: "sa-skeleton-container", inputs: { gap: "gap", padding: "padding", direction: "direction" }, ngImport: i0, template: `
+    <div class="skeleton-container" [ngStyle]="containerStyles">
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true, styles: [".skeleton-container{display:flex;flex-direction:column;gap:var(--sa-skeleton-gap, 1rem);padding:var(--sa-skeleton-padding, 1rem)}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SAMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkeletonContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sa-menu', standalone: true, imports: [
-                        CommonModule,
-                        SAMenuItemComponent,
-                        MatMenu,
-                        MatMenuItem,
-                        ChipsComponent,
-                        HttpClientModule,
-                        IconComponent,
-                        AvatarComponent,
-                    ], providers: [IconService], template: "<div class=\"sa-menu\" [ngClass]=\"menu.showTray ? 'sa-menu-tray sa-round-border' : ''\"\r\n    [ngStyle]=\"{width: menu.width || 'max-content'}\">\r\n    @if(menu?.title){\r\n    <div class=\"sa-menu-title\">\r\n        <h1>{{menu?.title}}</h1>\r\n        <sa-icon [icon]=\"'closeOutlined'\" [size]=\"'20'\" color=\"var(--grey-200, #D0D5DD)\" class=\"sa-menu-close-icon\"\r\n            (click)=\"closeEvent.emit($event)\"></sa-icon>\r\n    </div>\r\n    }\r\n\r\n    <!-- @if(menu?.itemGroups && menu.itemGroups.length){\r\n        @for (groupItem of menu.itemGroups; track groupItem) {\r\n            <div class=\"sa-menu-group\">\r\n                <h2>{{groupItem.groupTitle}}</h2>\r\n        \r\n                @for (item of groupItem.items; track $index) {\r\n                <sa-menu-item [item]=\"item\" [showRound]=\"menu.showTray\" (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\r\n                }\r\n            </div>\r\n        }\r\n    } @else if(menu?.items && menu.items.length){\r\n        <div class=\"sa-menu-items\">\r\n            @for (item of menu.items; track item) {\r\n                <sa-menu-item [item]=\"item\" (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\r\n            }\r\n        </div>\r\n    } -->\r\n\r\n\r\n    <!-- Tab Content or Item Groups -->\r\n    <div class=\"sa-menu-content\">\r\n        <div class=\"sa-menu-content-inner {{menu?.showSearch ? 'sa-menu-content-with-search' : ''}}\">\r\n            @if(menu?.showSearch){\r\n                <div class=\"search-container\">\r\n                    <sa-icon icon=\"search\"></sa-icon>\r\n                    <input name=\"menu-search-bar\" class=\"search-input\" (keyup)=\"onSearch($event)\" type=\"text\" [placeholder]=\"menu.searchPlaceholder\"  \r\n                    />\r\n                    <button *ngIf=\"menu?.showAddIcon\"><i class=\"fas fa-plus\"></i></button>\r\n                </div>\r\n            }\r\n            \r\n            <!-- Tabs -->\r\n            @if(menu?.tabs){\r\n            <div class=\"sa-menu-tabs\">\r\n                <button *ngFor=\"let tab of menu.tabs; let i = index\" [class.active]=\"i === activeTabIndex\"\r\n                    (click)=\"setActiveTab(i,tab.label)\">\r\n                    {{ tab.label }}\r\n                    <!-- ({{ tab.itemGroups.length }}) -->\r\n                </button>\r\n            </div>\r\n            }\r\n            <!-- Tabs End -->\r\n\r\n            @if(menu?.tabs?.length){\r\n            @if(menu.tabs[activeTabIndex]?.itemGroups?.length){\r\n            <ng-container *ngFor=\"let groupItem of menu.tabs[activeTabIndex].itemGroups\">\r\n                <div class=\"sa-menu-group\">\r\n                    <h2>{{groupItem.groupTitle}}</h2>\r\n                    <ng-container *ngFor=\"let item of groupItem.items\">\r\n                        <sa-menu-item [item]=\"item\" [showRound]=\"menu.showTray\"\r\n                            (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n            }\r\n            } @else if(menu?.itemGroups?.length){\r\n            <ng-container *ngFor=\"let groupItem of menu.itemGroups\">\r\n                <div class=\"sa-menu-group\">\r\n                    <h2>{{groupItem.groupTitle}}</h2>\r\n                    <ng-container *ngFor=\"let item of groupItem.items\">\r\n                        <sa-menu-item [item]=\"item\" [showRound]=\"menu.showTray\"\r\n                            (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n            }\r\n        </div>\r\n    </div>\r\n\r\n    @if(menu?.items && menu?.items?.length){\r\n    <div *ngIf=\"menu?.user\" class=\"profile-badge\">\r\n        <div class=\"avatar\">\r\n            <sa-avatar [altText]=\"menu?.user?.altText\" [imagePath]=\"''\" [size]=\"'large'\"></sa-avatar>\r\n        </div>\r\n        <div class=\"profile-info\">\r\n            <p class=\"profile-name\">{{menu?.user?.name}}</p>\r\n            <p class=\"profile-email\">{{menu?.user?.email}}</p>\r\n        </div>\r\n    </div>\r\n    <div class=\"sa-menu-items\">\r\n        @for (item of menu.items; track item) {\r\n            <sa-menu-item [item]=\"item\" (onEvent)=\"itemClicked($event)\"> </sa-menu-item>\r\n        }\r\n    </div>\r\n    }\r\n\r\n</div>", styles: [".sa-menu{background-color:var(--primary-800);box-shadow:3px 4px 16px 4px #00000014;width:max-content;border-radius:5px;overflow-y:auto;max-height:100%}.sa-round-border{border-radius:8px}.sa-menu-tray{height:calc(100vh - 16px);margin-top:8px;border-top-left-radius:0;border-bottom-left-radius:0;background:var(--grey-700, #1D2939);padding:0 1rem 1rem;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}.sa-menu-tray::-webkit-scrollbar{width:6px}.sa-menu-tray::-webkit-scrollbar-track{background:transparent}.sa-menu-tray::-webkit-scrollbar-thumb{background-color:#ffffff4d;border-radius:3px}sa-menu-item{cursor:pointer;display:block;color:var(--grey-100, #EAECF0)}.sa-menu-title{display:flex;justify-content:space-between;align-items:center;position:fixed;padding:1rem 0 .5rem;height:64px;width:calc(100% - 2rem);border-bottom:1px solid var(--primary-50, #F4EBFF);background:var(--grey-700, #1D2939);z-index:1}.sa-menu-title h1{color:var(--grey-100, #EAECF0);font-family:var(--font-family, Roboto);font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px;margin-bottom:0;margin-top:0}.sa-menu-close-icon{cursor:pointer;margin-left:auto;height:20px}.search-container{position:relative;display:flex;align-items:center;margin-bottom:1rem;margin-top:4.75rem}.search-container input{flex:1;padding:.5rem .5rem .5rem 2rem;background-color:#4a5568;border-radius:.25rem;font-size:.875rem;border:none;outline:none;border-radius:4px;color:var(--grey-200, #D0D5DD);border:1px solid var(--grey-900, #0C111D);background:var(--grey-900, #0C111D);box-sizing:border-box}.search-container .search-icon{position:absolute;left:.5rem;font-size:1rem;color:#888;pointer-events:none}.search-container button{margin-left:.5rem;background-color:#6b46c1;padding:.5rem;border-radius:.25rem;border:none;cursor:pointer}.sa-menu-group{margin-bottom:1rem;padding-bottom:.8rem;border-bottom:1px solid var(--grey-400, #475467)}.sa-menu-group:last-child{border-bottom:none}.sa-menu-group h2{color:var(--grey-300, #D0D5DD);font-family:var(--font-family, Roboto);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;text-transform:uppercase;margin-bottom:.5rem}.MenuBar{width:max-content;margin-top:8px;background-color:var(--grey-400);border-top-left-radius:0;border-bottom-left-radius:0;background-color:#2d3748;padding:0}.sa-menu-tabs{display:flex;border-bottom:1px solid #ccc;margin-bottom:1rem}.sa-menu-tabs button{flex:1;padding:.5rem 1rem;background:none;border:none;cursor:pointer;font-size:12px;font-style:normal;font-weight:400;line-height:16px;color:#888;border-bottom:2px solid transparent;transition:all .5s ease}.sa-menu-tabs button.active{color:#f7f3f3;border-bottom:2px solid #f7f7f7;font-size:12px;font-style:normal;font-weight:600;line-height:16px;letter-spacing:.5px}.sa-menu-content{padding:0rem 0}.sa-menu-content-inner{padding-top:0}.sa-menu-content .sa-menu-content-with-search,.sa-menu-content-with-search.sa-menu-content-inner{padding:0}.features-tray-menu .sa-menu-content-inner{padding-top:5rem}.features-tray-menu .sa-menu-content-with-search.sa-menu-content-inner{padding-top:0}.sa-menu-group h2{margin-top:1rem}.sa-menu-group:first-child h2{margin-top:0}.sa-menu-group{margin-bottom:1rem}.profile-badge{display:flex;align-items:center;gap:8px;padding:12px;width:100%;border-bottom:1px solid var(--grey-400)}.avatar{display:flex;justify-content:center;align-items:center}.profile-info{display:flex;flex-direction:column;justify-content:center;font-weight:300}.profile-name{color:var(--structural-white);font-weight:500;font-size:12px;line-height:1.2;margin:0}.profile-email{color:var(--grey-200);font-size:11px;line-height:1.2;font-weight:400;margin:0}\n"] }]
-        }], ctorParameters: () => [{ type: i1$4.Overlay }], propDecorators: { position: [{
+            args: [{ selector: 'sa-skeleton-container', standalone: true, imports: [NgStyle], template: `
+    <div class="skeleton-container" [ngStyle]="containerStyles">
+      <ng-content></ng-content>
+    </div>
+  `, styles: [".skeleton-container{display:flex;flex-direction:column;gap:var(--sa-skeleton-gap, 1rem);padding:var(--sa-skeleton-padding, 1rem)}\n"] }]
+        }], propDecorators: { gap: [{
                 type: Input
-            }], menu: [{
+            }], padding: [{
                 type: Input
-            }], hostEl: [{
+            }], direction: [{
                 type: Input
-            }], onEvent: [{
-                type: Output
-            }], onKeyUpEvent: [{
-                type: Output
-            }], closeEvent: [{
-                type: Output
             }] } });
 
-class MenuDirective {
-    get saMenu() {
-        return this._saMenu;
+const SKELETON_PRESETS = {
+    // Preset for a card with title, subtitle and content
+    card: {
+        items: [
+            { type: 'text', width: '60%', height: '1.5rem' },
+            { type: 'text', width: '40%', height: '1rem' },
+            { type: 'rectangle', height: '100px' }
+        ],
+        containerConfig: {
+            padding: '1rem',
+            gap: '0.75rem'
+        }
+    },
+    // Preset for a list item with avatar
+    listItem: {
+        items: [
+            { type: 'circle', size: '2.5rem' },
+            { type: 'text', width: '70%', height: '1rem' }
+        ],
+        containerConfig: {
+            direction: 'row',
+            gap: '1rem',
+            padding: '0.5rem'
+        }
+    },
+    // Preset for form fields
+    formField: {
+        items: [
+            { type: 'text', width: '30%', height: '1rem' },
+            { type: 'rectangle', height: '2.5rem' }
+        ],
+        containerConfig: {
+            gap: '0.5rem'
+        }
     }
-    set saMenu(value) {
-        this._saMenu = value;
-        // Emit the new configuration to the stream
-        this.menuConfig$.next(value);
+};
+
+class SkeletonLoaderComponent {
+    ngOnInit() {
+        this.updateConfig();
     }
-    get position() {
-        return this._position;
+    ngOnChanges(changes) {
+        this.updateConfig();
     }
-    set position(value) {
-        this._position = value;
+    updateConfig() {
+        if (this.preset && (!this.config || !this.config.items?.length)) {
+            this.config = SKELETON_PRESETS[this.preset];
+        }
     }
-    constructor(overlay, overlayContainer, elRef) {
-        this.overlay = overlay;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkeletonLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: SkeletonLoaderComponent, isStandalone: true, selector: "sa-skeleton-loader", inputs: { preset: "preset", config: "config", darkMode: "darkMode" }, usesOnChanges: true, ngImport: i0, template: `
+    <sa-skeleton-container
+      [gap]="config?.containerConfig?.gap"
+      [padding]="config?.containerConfig?.padding"
+      [direction]="config?.containerConfig?.direction || 'column'"
+    >
+      @for (item of config?.items; track $index) {
+        @switch (item.type) {
+          @case ('text') {
+            <sa-skeleton-text
+              [width]="item.width"
+              [height]="item.height"
+              [darkMode]="darkMode ?? config?.darkMode ?? item.darkMode"
+            ></sa-skeleton-text>
+          }
+          @case ('circle') {
+            <sa-skeleton-circle
+              [size]="item.size"
+              [darkMode]="darkMode ?? config?.darkMode ?? item.darkMode"
+            ></sa-skeleton-circle>
+          }
+          @case ('rectangle') {
+            <sa-skeleton-rectangle
+              [width]="item.width"
+              [height]="item.height"
+              [darkMode]="darkMode ?? config?.darkMode ?? item.darkMode"
+            ></sa-skeleton-rectangle>
+          }
+          @case ('elliptical') {
+            <sa-skeleton-elliptical
+              [width]="item.width"
+              [height]="item.height"
+              [darkMode]="darkMode ?? config?.darkMode ?? item.darkMode"
+            ></sa-skeleton-elliptical>
+          }
+          @case ('container') {
+            <sa-skeleton-container [direction]="item.direction" [gap]="item.gap">
+              @for (subItem of item.items; track $index) {
+                @switch (subItem.type) {
+                  @case ('text') {
+                    <sa-skeleton-text
+                      [width]="subItem.width"
+                      [height]="subItem.height"
+                      [darkMode]="darkMode ?? config?.darkMode ?? subItem.darkMode"
+                    ></sa-skeleton-text>
+                  }
+                  @case ('circle') {
+                    <sa-skeleton-circle
+                      [size]="subItem.size"
+                      [darkMode]="darkMode ?? config?.darkMode ?? subItem.darkMode"
+                    ></sa-skeleton-circle>
+                  }
+                  @case ('rectangle') {
+                    <sa-skeleton-rectangle
+                      [width]="subItem.width"
+                      [height]="subItem.height"
+                      [darkMode]="darkMode ?? config?.darkMode ?? subItem.darkMode"
+                    ></sa-skeleton-rectangle>
+                  }
+                  @case ('elliptical') {
+                    <sa-skeleton-elliptical
+                      [width]="subItem.width"
+                      [height]="subItem.height"
+                      [darkMode]="darkMode ?? config?.darkMode ?? subItem.darkMode"
+                    ></sa-skeleton-elliptical>
+                  }
+                  @case ('container') {
+                    <sa-skeleton-container [direction]="subItem.direction" [gap]="subItem.gap">
+                      @for (subSubItem of subItem.items; track $index) {
+                        @switch (subSubItem.type) {
+                          @case ('text') {
+                            <sa-skeleton-text
+                              [width]="subSubItem.width"
+                              [height]="subSubItem.height"
+                              [darkMode]="darkMode ?? config?.darkMode ?? subSubItem.darkMode"
+                            ></sa-skeleton-text>
+                          }
+                          @case ('circle') {
+                            <sa-skeleton-circle
+                              [size]="subSubItem.size"
+                              [darkMode]="darkMode ?? config?.darkMode ?? subSubItem.darkMode"
+                            ></sa-skeleton-circle>
+                          }
+                          @case ('rectangle') {
+                            <sa-skeleton-rectangle
+                              [width]="subSubItem.width"
+                              [height]="subSubItem.height"
+                              [darkMode]="darkMode ?? config?.darkMode ?? subSubItem.darkMode"
+                            ></sa-skeleton-rectangle>
+                          }
+                          @case ('elliptical') {
+                            <sa-skeleton-elliptical
+                              [width]="subSubItem.width"
+                              [height]="subSubItem.height"
+                              [darkMode]="darkMode ?? config?.darkMode ?? subSubItem.darkMode"
+                            ></sa-skeleton-elliptical>
+                          }
+                        }
+                      }
+                    </sa-skeleton-container>
+                  }
+                }
+              }
+            </sa-skeleton-container>
+          }
+        }
+      }
+    </sa-skeleton-container>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SkeletonTextComponent, selector: "sa-skeleton-text", inputs: ["width", "height", "darkMode"] }, { kind: "component", type: SkeletonCircleComponent, selector: "sa-skeleton-circle", inputs: ["size", "darkMode"] }, { kind: "component", type: SkeletonRectangleComponent, selector: "sa-skeleton-rectangle", inputs: ["width", "height", "darkMode"] }, { kind: "component", type: SkeletonEllipticalComponent, selector: "sa-skeleton-elliptical", inputs: ["width", "height", "darkMode"] }, { kind: "component", type: SkeletonContainerComponent, selector: "sa-skeleton-container", inputs: ["gap", "padding", "direction"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkeletonLoaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sa-skeleton-loader',
+                    standalone: true,
+                    imports: [
+                        CommonModule,
+                        SkeletonBaseComponent,
+                        SkeletonTextComponent,
+                        SkeletonCircleComponent,
+                        SkeletonRectangleComponent,
+                        SkeletonEllipticalComponent,
+                        SkeletonContainerComponent
+                    ],
+                    template: `
+    <sa-skeleton-container
+      [gap]="config?.containerConfig?.gap"
+      [padding]="config?.containerConfig?.padding"
+      [direction]="config?.containerConfig?.direction || 'column'"
+    >
+      @for (item of config?.items; track $index) {
+        @switch (item.type) {
+          @case ('text') {
+            <sa-skeleton-text
+              [width]="item.width"
+              [height]="item.height"
+              [darkMode]="darkMode ?? config?.darkMode ?? item.darkMode"
+            ></sa-skeleton-text>
+          }
+          @case ('circle') {
+            <sa-skeleton-circle
+              [size]="item.size"
+              [darkMode]="darkMode ?? config?.darkMode ?? item.darkMode"
+            ></sa-skeleton-circle>
+          }
+          @case ('rectangle') {
+            <sa-skeleton-rectangle
+              [width]="item.width"
+              [height]="item.height"
+              [darkMode]="darkMode ?? config?.darkMode ?? item.darkMode"
+            ></sa-skeleton-rectangle>
+          }
+          @case ('elliptical') {
+            <sa-skeleton-elliptical
+              [width]="item.width"
+              [height]="item.height"
+              [darkMode]="darkMode ?? config?.darkMode ?? item.darkMode"
+            ></sa-skeleton-elliptical>
+          }
+          @case ('container') {
+            <sa-skeleton-container [direction]="item.direction" [gap]="item.gap">
+              @for (subItem of item.items; track $index) {
+                @switch (subItem.type) {
+                  @case ('text') {
+                    <sa-skeleton-text
+                      [width]="subItem.width"
+                      [height]="subItem.height"
+                      [darkMode]="darkMode ?? config?.darkMode ?? subItem.darkMode"
+                    ></sa-skeleton-text>
+                  }
+                  @case ('circle') {
+                    <sa-skeleton-circle
+                      [size]="subItem.size"
+                      [darkMode]="darkMode ?? config?.darkMode ?? subItem.darkMode"
+                    ></sa-skeleton-circle>
+                  }
+                  @case ('rectangle') {
+                    <sa-skeleton-rectangle
+                      [width]="subItem.width"
+                      [height]="subItem.height"
+                      [darkMode]="darkMode ?? config?.darkMode ?? subItem.darkMode"
+                    ></sa-skeleton-rectangle>
+                  }
+                  @case ('elliptical') {
+                    <sa-skeleton-elliptical
+                      [width]="subItem.width"
+                      [height]="subItem.height"
+                      [darkMode]="darkMode ?? config?.darkMode ?? subItem.darkMode"
+                    ></sa-skeleton-elliptical>
+                  }
+                  @case ('container') {
+                    <sa-skeleton-container [direction]="subItem.direction" [gap]="subItem.gap">
+                      @for (subSubItem of subItem.items; track $index) {
+                        @switch (subSubItem.type) {
+                          @case ('text') {
+                            <sa-skeleton-text
+                              [width]="subSubItem.width"
+                              [height]="subSubItem.height"
+                              [darkMode]="darkMode ?? config?.darkMode ?? subSubItem.darkMode"
+                            ></sa-skeleton-text>
+                          }
+                          @case ('circle') {
+                            <sa-skeleton-circle
+                              [size]="subSubItem.size"
+                              [darkMode]="darkMode ?? config?.darkMode ?? subSubItem.darkMode"
+                            ></sa-skeleton-circle>
+                          }
+                          @case ('rectangle') {
+                            <sa-skeleton-rectangle
+                              [width]="subSubItem.width"
+                              [height]="subSubItem.height"
+                              [darkMode]="darkMode ?? config?.darkMode ?? subSubItem.darkMode"
+                            ></sa-skeleton-rectangle>
+                          }
+                          @case ('elliptical') {
+                            <sa-skeleton-elliptical
+                              [width]="subSubItem.width"
+                              [height]="subSubItem.height"
+                              [darkMode]="darkMode ?? config?.darkMode ?? subSubItem.darkMode"
+                            ></sa-skeleton-elliptical>
+                          }
+                        }
+                      }
+                    </sa-skeleton-container>
+                  }
+                }
+              }
+            </sa-skeleton-container>
+          }
+        }
+      }
+    </sa-skeleton-container>
+  `
+                }]
+        }], propDecorators: { preset: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], darkMode: [{
+                type: Input
+            }] } });
+
+class SAMenuComponent {
+    constructor(overlay) {
+        this.overlay = overlay;
+        this.position = 'bottom'; // Default position
+        this.onEvent = new EventEmitter();
+        this.onKeyUpEvent = new EventEmitter();
+        this.closeEvent = new EventEmitter();
+        // @ViewChild('menu', {static: true}) menu;
+        this.isExpanded = false;
+        this.activeTabIndex = 0; // Track the active tab index
+    }
+    ngOnChanges(changes) {
+        if (changes['menu'] && changes['menu'].currentValue) {
+            console.log('Menu component detected changes:', changes['menu'].currentValue);
+            // Reset active tab index if tabs have changed
+            if (this.menu?.tabs?.length && this.activeTabIndex >= this.menu.tabs.length) {
+                this.activeTabIndex = 0;
+            }
+            // Prevent the menu from closing by stopping propagation of any events
+            // that might trigger menu closing during this update cycle
+            setTimeout(() => {
+                // This ensures the menu stays open after the change detection cycle completes
+                console.log('Menu update complete, menu should remain open');
+            }, 0);
+        }
+    }
+    ngAfterViewInit() {
+        this.isExpanded = true;
+    }
+    setPosition() {
+        // const positions: { [key: string]: ConnectedPosition } = {
+        //   left: { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'top' },
+        //   right: { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'top' },
+        //   top: { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top' },
+        //   bottom: { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom' }
+        // };
+        // const overlayRef = this.overlay.create();
+        // const userProfilePortal = new ComponentPortal(CardComponent);
+        // const compRef = overlayRef.attach(userProfilePortal);
+        // compRef.instance.title = 'need nduk ra bhai'
+        // compRef.instance.body = 'sometime little bit this sometimes little bit that. Comming not comming'
+        // compRef.instance.avatar = '../assets/avatar.svg'
+    }
+    itemClicked(event) {
+        this.onMenuItemClick(null, event.item);
+    }
+    onMenuItemClick(event, item) {
+        // item.isSelected = !item.isSelected;
+        this.onEvent.emit({ type: 'CLICK', item, menu: this.menu });
+        // Close the menu after the item is clicked, just like the close button
+        if (item.subMenu === null || item.subMenu === undefined) {
+            this.closeEvent.emit(event);
+        }
+    }
+    onSearch(event) {
+        this.onEvent.emit({ type: 'SEARCH', value: event.target.value });
+    }
+    setActiveTab(index, tabname) {
+        this.activeTabIndex = index; // Update the active tab index
+        this.onEvent.emit({ type: 'TAB_CLICK', activeTab: tabname, menu: this.menu });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SAMenuComponent, deps: [{ token: i1$4.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: SAMenuComponent, isStandalone: true, selector: "sa-menu", inputs: { position: "position", menu: "menu", hostEl: "hostEl" }, outputs: { onEvent: "onEvent", onKeyUpEvent: "onKeyUpEvent", closeEvent: "closeEvent" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "<div class=\"sa-menu\" [ngClass]=\"menu.showTray ? 'sa-menu-tray sa-round-border' : ''\"\r\n    [ngStyle]=\"{width: menu.width || 'max-content'}\">\r\n    @if(menu?.title){\r\n    <div class=\"sa-menu-title\">\r\n        <h1>{{menu?.title}}</h1>\r\n        <sa-icon [icon]=\"'closeOutlined'\" [size]=\"'20'\" color=\"var(--grey-200, #D0D5DD)\" class=\"sa-menu-close-icon\"\r\n            (click)=\"closeEvent.emit($event)\"></sa-icon>\r\n    </div>\r\n    }\r\n\r\n    <!-- @if(menu?.itemGroups && menu.itemGroups.length){\r\n        @for (groupItem of menu.itemGroups; track groupItem) {\r\n            <div class=\"sa-menu-group\">\r\n                <h2>{{groupItem.groupTitle}}</h2>\r\n        \r\n                @for (item of groupItem.items; track $index) {\r\n                <sa-menu-item [item]=\"item\" [showRound]=\"menu.showTray\" (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\r\n                }\r\n            </div>\r\n        }\r\n    } @else if(menu?.items && menu.items.length){\r\n        <div class=\"sa-menu-items\">\r\n            @for (item of menu.items; track item) {\r\n                <sa-menu-item [item]=\"item\" (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\r\n            }\r\n        </div>\r\n    } -->\r\n\r\n\r\n    <!-- Tab Content or Item Groups -->\r\n    <div class=\"sa-menu-content\">\r\n        <div class=\"sa-menu-content-inner {{menu?.showSearch ? 'sa-menu-content-with-search' : ''}}\">\r\n            @if(menu?.showSearch){\r\n                <div class=\"search-container\">\r\n                    <sa-icon icon=\"search\"></sa-icon>\r\n                    <input name=\"menu-search-bar\" class=\"search-input\" (keyup)=\"onSearch($event)\" type=\"text\" [placeholder]=\"menu.searchPlaceholder\"  \r\n                    />\r\n                    <button *ngIf=\"menu?.showAddIcon\"><i class=\"fas fa-plus\"></i></button>\r\n                </div>\r\n            }\r\n            \r\n            <!-- Tabs -->\r\n            @if(menu?.tabs){\r\n            <div class=\"sa-menu-tabs\">\r\n                <button *ngFor=\"let tab of menu.tabs; let i = index\" [class.active]=\"i === activeTabIndex\"\r\n                    (click)=\"setActiveTab(i,tab.label)\">\r\n                    {{ tab.label }}\r\n                    <!-- ({{ tab.itemGroups.length }}) -->\r\n                </button>\r\n            </div>\r\n            }\r\n            <!-- Tabs End -->\r\n\r\n            @if(menu?.tabs?.length){\r\n            @if(menu?.loading && menu?.itemGroupsSkeletonConfig && !menu.tabs[activeTabIndex]?.itemGroups?.length){\r\n            <sa-skeleton-loader [config]=\"menu.itemGroupsSkeletonConfig\"></sa-skeleton-loader>\r\n            } @else if(menu.tabs[activeTabIndex]?.itemGroups?.length){\r\n            <ng-container *ngFor=\"let groupItem of menu.tabs[activeTabIndex].itemGroups\">\r\n                <div class=\"sa-menu-group\">\r\n                    <h2>{{groupItem.groupTitle}}</h2>\r\n                    <ng-container *ngFor=\"let item of groupItem.items\">\r\n                        <sa-menu-item [item]=\"item\" [showRound]=\"menu.showTray\"\r\n                            (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n            }\r\n            } @else if(menu?.loading && menu?.itemGroupsSkeletonConfig && !menu?.itemGroups?.length){\r\n            <sa-skeleton-loader [config]=\"menu.itemGroupsSkeletonConfig\"></sa-skeleton-loader>\r\n            } @else if(menu?.itemGroups?.length){\r\n            <ng-container *ngFor=\"let groupItem of menu.itemGroups\">\r\n                <div class=\"sa-menu-group\">\r\n                    <h2>{{groupItem.groupTitle}}</h2>\r\n                    <ng-container *ngFor=\"let item of groupItem.items\">\r\n                        <sa-menu-item [item]=\"item\" [showRound]=\"menu.showTray\"\r\n                            (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n            }\r\n        </div>\r\n    </div>\r\n\r\n    @if(menu?.items && menu?.items?.length){\r\n    <div *ngIf=\"menu?.user\" class=\"profile-badge\">\r\n        <div class=\"avatar\">\r\n            <sa-avatar [altText]=\"menu?.user?.altText\" [imagePath]=\"''\" [size]=\"'large'\"></sa-avatar>\r\n        </div>\r\n        <div class=\"profile-info\">\r\n            <p class=\"profile-name\">{{menu?.user?.name}}</p>\r\n            <p class=\"profile-email\">{{menu?.user?.email}}</p>\r\n        </div>\r\n    </div>\r\n    <div class=\"sa-menu-items\">\r\n        @for (item of menu.items; track item) {\r\n            <sa-menu-item [item]=\"item\" (onEvent)=\"itemClicked($event)\"> </sa-menu-item>\r\n        }\r\n    </div>\r\n    }\r\n\r\n</div>", styles: [".sa-menu{background-color:var(--primary-800);box-shadow:3px 4px 16px 4px #00000014;width:max-content;border-radius:5px;overflow-y:auto;max-height:100%}.sa-round-border{border-radius:8px}.sa-menu-tray{height:calc(100vh - 16px);margin-top:8px;border-top-left-radius:0;border-bottom-left-radius:0;background:var(--grey-700, #1D2939);padding:0 1rem 1rem;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}.sa-menu-tray::-webkit-scrollbar{width:6px}.sa-menu-tray::-webkit-scrollbar-track{background:transparent}.sa-menu-tray::-webkit-scrollbar-thumb{background-color:#ffffff4d;border-radius:3px}sa-menu-item{cursor:pointer;display:block;color:var(--grey-100, #EAECF0)}.sa-menu-title{display:flex;justify-content:space-between;align-items:center;position:fixed;padding:1rem 0 .5rem;height:64px;width:calc(100% - 2rem);border-bottom:1px solid var(--primary-50, #F4EBFF);background:var(--grey-700, #1D2939);z-index:1}.sa-menu-title h1{color:var(--grey-100, #EAECF0);font-family:var(--font-family, Roboto);font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px;margin-bottom:0;margin-top:0}.sa-menu-close-icon{cursor:pointer;margin-left:auto;height:20px}.search-container{position:relative;display:flex;align-items:center;margin-bottom:1rem;margin-top:4.75rem}.search-container input{flex:1;padding:.5rem .5rem .5rem 2rem;background-color:#4a5568;border-radius:.25rem;font-size:.875rem;border:none;outline:none;border-radius:4px;color:var(--grey-200, #D0D5DD);border:1px solid var(--grey-900, #0C111D);background:var(--grey-900, #0C111D);box-sizing:border-box}.search-container .search-icon{position:absolute;left:.5rem;font-size:1rem;color:#888;pointer-events:none}.search-container button{margin-left:.5rem;background-color:#6b46c1;padding:.5rem;border-radius:.25rem;border:none;cursor:pointer}.sa-menu-group{margin-bottom:1rem;padding-bottom:.8rem;border-bottom:1px solid var(--grey-400, #475467)}.sa-menu-group:last-child{border-bottom:none}.sa-menu-group h2{color:var(--grey-300, #D0D5DD);font-family:var(--font-family, Roboto);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;text-transform:uppercase;margin-bottom:.5rem}.MenuBar{width:max-content;margin-top:8px;background-color:var(--grey-400);border-top-left-radius:0;border-bottom-left-radius:0;background-color:#2d3748;padding:0}.sa-menu-tabs{display:flex;border-bottom:1px solid #ccc;margin-bottom:1rem}.sa-menu-tabs button{flex:1;padding:.5rem 1rem;background:none;border:none;cursor:pointer;font-size:12px;font-style:normal;font-weight:400;line-height:16px;color:#888;border-bottom:2px solid transparent;transition:all .5s ease}.sa-menu-tabs button.active{color:#f7f3f3;border-bottom:2px solid #f7f7f7;font-size:12px;font-style:normal;font-weight:600;line-height:16px;letter-spacing:.5px}.sa-menu-content{padding:0rem 0}.sa-menu-content-inner{padding-top:0}.sa-menu-content .sa-menu-content-with-search,.sa-menu-content-with-search.sa-menu-content-inner{padding:0}.features-tray-menu .sa-menu-content-inner{padding-top:5rem}.features-tray-menu .sa-menu-content-with-search.sa-menu-content-inner{padding-top:0}.sa-menu-group h2{margin-top:1rem}.sa-menu-group:first-child h2{margin-top:0}.sa-menu-group{margin-bottom:1rem}.profile-badge{display:flex;align-items:center;gap:8px;padding:12px;width:100%;border-bottom:1px solid var(--grey-400)}.avatar{display:flex;justify-content:center;align-items:center}.profile-info{display:flex;flex-direction:column;justify-content:center;font-weight:300}.profile-name{color:var(--structural-white);font-weight:500;font-size:12px;line-height:1.2;margin:0}.profile-email{color:var(--grey-200);font-size:11px;line-height:1.2;font-weight:400;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SAMenuItemComponent, selector: "sa-menu-item", inputs: ["item", "showRound"], outputs: ["onEvent"] }, { kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "imgWidth", "imgHeight", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "component", type: AvatarComponent, selector: "sa-avatar", inputs: ["id", "imagePath", "altText", "size"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "component", type: SkeletonLoaderComponent, selector: "sa-skeleton-loader", inputs: ["preset", "config", "darkMode"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SAMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sa-menu', standalone: true, imports: [
+                        CommonModule,
+                        SAMenuItemComponent,
+                        MatMenu,
+                        MatMenuItem,
+                        ChipsComponent,
+                        HttpClientModule,
+                        IconComponent,
+                        AvatarComponent,
+                        SkeletonLoaderComponent,
+                    ], providers: [IconService], template: "<div class=\"sa-menu\" [ngClass]=\"menu.showTray ? 'sa-menu-tray sa-round-border' : ''\"\r\n    [ngStyle]=\"{width: menu.width || 'max-content'}\">\r\n    @if(menu?.title){\r\n    <div class=\"sa-menu-title\">\r\n        <h1>{{menu?.title}}</h1>\r\n        <sa-icon [icon]=\"'closeOutlined'\" [size]=\"'20'\" color=\"var(--grey-200, #D0D5DD)\" class=\"sa-menu-close-icon\"\r\n            (click)=\"closeEvent.emit($event)\"></sa-icon>\r\n    </div>\r\n    }\r\n\r\n    <!-- @if(menu?.itemGroups && menu.itemGroups.length){\r\n        @for (groupItem of menu.itemGroups; track groupItem) {\r\n            <div class=\"sa-menu-group\">\r\n                <h2>{{groupItem.groupTitle}}</h2>\r\n        \r\n                @for (item of groupItem.items; track $index) {\r\n                <sa-menu-item [item]=\"item\" [showRound]=\"menu.showTray\" (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\r\n                }\r\n            </div>\r\n        }\r\n    } @else if(menu?.items && menu.items.length){\r\n        <div class=\"sa-menu-items\">\r\n            @for (item of menu.items; track item) {\r\n                <sa-menu-item [item]=\"item\" (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\r\n            }\r\n        </div>\r\n    } -->\r\n\r\n\r\n    <!-- Tab Content or Item Groups -->\r\n    <div class=\"sa-menu-content\">\r\n        <div class=\"sa-menu-content-inner {{menu?.showSearch ? 'sa-menu-content-with-search' : ''}}\">\r\n            @if(menu?.showSearch){\r\n                <div class=\"search-container\">\r\n                    <sa-icon icon=\"search\"></sa-icon>\r\n                    <input name=\"menu-search-bar\" class=\"search-input\" (keyup)=\"onSearch($event)\" type=\"text\" [placeholder]=\"menu.searchPlaceholder\"  \r\n                    />\r\n                    <button *ngIf=\"menu?.showAddIcon\"><i class=\"fas fa-plus\"></i></button>\r\n                </div>\r\n            }\r\n            \r\n            <!-- Tabs -->\r\n            @if(menu?.tabs){\r\n            <div class=\"sa-menu-tabs\">\r\n                <button *ngFor=\"let tab of menu.tabs; let i = index\" [class.active]=\"i === activeTabIndex\"\r\n                    (click)=\"setActiveTab(i,tab.label)\">\r\n                    {{ tab.label }}\r\n                    <!-- ({{ tab.itemGroups.length }}) -->\r\n                </button>\r\n            </div>\r\n            }\r\n            <!-- Tabs End -->\r\n\r\n            @if(menu?.tabs?.length){\r\n            @if(menu?.loading && menu?.itemGroupsSkeletonConfig && !menu.tabs[activeTabIndex]?.itemGroups?.length){\r\n            <sa-skeleton-loader [config]=\"menu.itemGroupsSkeletonConfig\"></sa-skeleton-loader>\r\n            } @else if(menu.tabs[activeTabIndex]?.itemGroups?.length){\r\n            <ng-container *ngFor=\"let groupItem of menu.tabs[activeTabIndex].itemGroups\">\r\n                <div class=\"sa-menu-group\">\r\n                    <h2>{{groupItem.groupTitle}}</h2>\r\n                    <ng-container *ngFor=\"let item of groupItem.items\">\r\n                        <sa-menu-item [item]=\"item\" [showRound]=\"menu.showTray\"\r\n                            (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n            }\r\n            } @else if(menu?.loading && menu?.itemGroupsSkeletonConfig && !menu?.itemGroups?.length){\r\n            <sa-skeleton-loader [config]=\"menu.itemGroupsSkeletonConfig\"></sa-skeleton-loader>\r\n            } @else if(menu?.itemGroups?.length){\r\n            <ng-container *ngFor=\"let groupItem of menu.itemGroups\">\r\n                <div class=\"sa-menu-group\">\r\n                    <h2>{{groupItem.groupTitle}}</h2>\r\n                    <ng-container *ngFor=\"let item of groupItem.items\">\r\n                        <sa-menu-item [item]=\"item\" [showRound]=\"menu.showTray\"\r\n                            (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n            }\r\n        </div>\r\n    </div>\r\n\r\n    @if(menu?.items && menu?.items?.length){\r\n    <div *ngIf=\"menu?.user\" class=\"profile-badge\">\r\n        <div class=\"avatar\">\r\n            <sa-avatar [altText]=\"menu?.user?.altText\" [imagePath]=\"''\" [size]=\"'large'\"></sa-avatar>\r\n        </div>\r\n        <div class=\"profile-info\">\r\n            <p class=\"profile-name\">{{menu?.user?.name}}</p>\r\n            <p class=\"profile-email\">{{menu?.user?.email}}</p>\r\n        </div>\r\n    </div>\r\n    <div class=\"sa-menu-items\">\r\n        @for (item of menu.items; track item) {\r\n            <sa-menu-item [item]=\"item\" (onEvent)=\"itemClicked($event)\"> </sa-menu-item>\r\n        }\r\n    </div>\r\n    }\r\n\r\n</div>", styles: [".sa-menu{background-color:var(--primary-800);box-shadow:3px 4px 16px 4px #00000014;width:max-content;border-radius:5px;overflow-y:auto;max-height:100%}.sa-round-border{border-radius:8px}.sa-menu-tray{height:calc(100vh - 16px);margin-top:8px;border-top-left-radius:0;border-bottom-left-radius:0;background:var(--grey-700, #1D2939);padding:0 1rem 1rem;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}.sa-menu-tray::-webkit-scrollbar{width:6px}.sa-menu-tray::-webkit-scrollbar-track{background:transparent}.sa-menu-tray::-webkit-scrollbar-thumb{background-color:#ffffff4d;border-radius:3px}sa-menu-item{cursor:pointer;display:block;color:var(--grey-100, #EAECF0)}.sa-menu-title{display:flex;justify-content:space-between;align-items:center;position:fixed;padding:1rem 0 .5rem;height:64px;width:calc(100% - 2rem);border-bottom:1px solid var(--primary-50, #F4EBFF);background:var(--grey-700, #1D2939);z-index:1}.sa-menu-title h1{color:var(--grey-100, #EAECF0);font-family:var(--font-family, Roboto);font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px;margin-bottom:0;margin-top:0}.sa-menu-close-icon{cursor:pointer;margin-left:auto;height:20px}.search-container{position:relative;display:flex;align-items:center;margin-bottom:1rem;margin-top:4.75rem}.search-container input{flex:1;padding:.5rem .5rem .5rem 2rem;background-color:#4a5568;border-radius:.25rem;font-size:.875rem;border:none;outline:none;border-radius:4px;color:var(--grey-200, #D0D5DD);border:1px solid var(--grey-900, #0C111D);background:var(--grey-900, #0C111D);box-sizing:border-box}.search-container .search-icon{position:absolute;left:.5rem;font-size:1rem;color:#888;pointer-events:none}.search-container button{margin-left:.5rem;background-color:#6b46c1;padding:.5rem;border-radius:.25rem;border:none;cursor:pointer}.sa-menu-group{margin-bottom:1rem;padding-bottom:.8rem;border-bottom:1px solid var(--grey-400, #475467)}.sa-menu-group:last-child{border-bottom:none}.sa-menu-group h2{color:var(--grey-300, #D0D5DD);font-family:var(--font-family, Roboto);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;text-transform:uppercase;margin-bottom:.5rem}.MenuBar{width:max-content;margin-top:8px;background-color:var(--grey-400);border-top-left-radius:0;border-bottom-left-radius:0;background-color:#2d3748;padding:0}.sa-menu-tabs{display:flex;border-bottom:1px solid #ccc;margin-bottom:1rem}.sa-menu-tabs button{flex:1;padding:.5rem 1rem;background:none;border:none;cursor:pointer;font-size:12px;font-style:normal;font-weight:400;line-height:16px;color:#888;border-bottom:2px solid transparent;transition:all .5s ease}.sa-menu-tabs button.active{color:#f7f3f3;border-bottom:2px solid #f7f7f7;font-size:12px;font-style:normal;font-weight:600;line-height:16px;letter-spacing:.5px}.sa-menu-content{padding:0rem 0}.sa-menu-content-inner{padding-top:0}.sa-menu-content .sa-menu-content-with-search,.sa-menu-content-with-search.sa-menu-content-inner{padding:0}.features-tray-menu .sa-menu-content-inner{padding-top:5rem}.features-tray-menu .sa-menu-content-with-search.sa-menu-content-inner{padding-top:0}.sa-menu-group h2{margin-top:1rem}.sa-menu-group:first-child h2{margin-top:0}.sa-menu-group{margin-bottom:1rem}.profile-badge{display:flex;align-items:center;gap:8px;padding:12px;width:100%;border-bottom:1px solid var(--grey-400)}.avatar{display:flex;justify-content:center;align-items:center}.profile-info{display:flex;flex-direction:column;justify-content:center;font-weight:300}.profile-name{color:var(--structural-white);font-weight:500;font-size:12px;line-height:1.2;margin:0}.profile-email{color:var(--grey-200);font-size:11px;line-height:1.2;font-weight:400;margin:0}\n"] }]
+        }], ctorParameters: () => [{ type: i1$4.Overlay }], propDecorators: { position: [{
+                type: Input
+            }], menu: [{
+                type: Input
+            }], hostEl: [{
+                type: Input
+            }], onEvent: [{
+                type: Output
+            }], onKeyUpEvent: [{
+                type: Output
+            }], closeEvent: [{
+                type: Output
+            }] } });
+
+class MenuDirective {
+    get saMenu() {
+        return this._saMenu;
+    }
+    set saMenu(value) {
+        this._saMenu = value;
+        // Emit the new configuration to the stream
+        this.menuConfig$.next(value);
+    }
+    get position() {
+        return this._position;
+    }
+    set position(value) {
+        this._position = value;
+    }
+    constructor(overlay, overlayContainer, elRef) {
+        this.overlay = overlay;
         this.overlayContainer = overlayContainer;
         this.elRef = elRef;
         // Stream to track menu configuration changes
@@ -6333,462 +6785,52 @@ class ScrollingCardsComponent {
             return;
         const container = this.cardContainer.nativeElement;
         this.isVertical = this.direction === 'up' || this.direction === 'down';
-        // Set vertical/horizontal classes
-        container.classList.toggle('vertical', this.isVertical);
-        container.classList.toggle('horizontal', !this.isVertical);
-        const containerSize = this.isVertical ? container.scrollHeight : container.scrollWidth;
-        const duration = containerSize / this.duration;
-        container.style.setProperty('--scroll-duration', `${duration}s`);
-        container.style.setProperty('--scroll-direction', this.direction === 'down' || this.direction === 'right' ? 'reverse' : 'normal');
-        // Reset animation
-        container.style.animation = 'none';
-        container.offsetHeight; // Trigger reflow
-        container.style.animation = null;
-        this.cdr.markForCheck();
-    }
-    pauseScroll() {
-        if (!this.cardContainer?.nativeElement)
-            return;
-        this.animationPaused = true;
-        this.cardContainer.nativeElement.style.animationPlayState = 'paused';
-    }
-    resumeScroll() {
-        if (!this.cardContainer?.nativeElement)
-            return;
-        this.animationPaused = false;
-        this.cardContainer.nativeElement.style.animationPlayState = 'running';
-    }
-    ngOnDestroy() {
-        if (this.animationFrame) {
-            cancelAnimationFrame(this.animationFrame);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ScrollingCardsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: ScrollingCardsComponent, isStandalone: true, selector: "sa-scrolling-cards", inputs: { cards: "cards", duration: "duration", direction: "direction" }, providers: [IconService], viewQueries: [{ propertyName: "cardContainer", first: true, predicate: ["cardContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"scrolling-cards-container {{this.isVertical ? 'vertical': 'horizontal'}}\" (mouseenter)=\"pauseScroll()\"\r\n    (mouseleave)=\"resumeScroll()\">\r\n    <div #cardContainer class=\"card-container\">\r\n        @for (card of displayCards; track card.title) {\r\n        <sa-card [title]=\"card.title\" [body]=\"card.body\" [avatar]=\"card?.avatar\" [icon]=\"card.icon\" [iconSize]=\"'54'\"\r\n            [customWrapperClass]=\"'sa-card-secondary-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\r\n            [showCardBody]=\"true\">\r\n        </sa-card>\r\n        }\r\n    </div>\r\n</div>", styles: [".scrolling-cards-container{overflow:hidden;width:fit-content}.scrolling-cards-container.vertical{height:100%;position:relative}.scrolling-cards-container.vertical:before,.scrolling-cards-container.vertical:after{content:\"\";position:absolute;width:100%;height:var(--medium-36px);z-index:1}.scrolling-cards-container.vertical:before{background:#fbfaff;background:-moz-linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:-webkit-linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"var(--structural-primarytint)\",endColorstr=\"#ffffff\",GradientType=1)}.scrolling-cards-container.vertical:after{bottom:0;background:#fbfaff;background:-moz-linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:-webkit-linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"var(--structural-primarytint)\",endColorstr=\"#ffffff\",GradientType=1)}.card-container{display:flex;gap:var(--small-16px);animation-duration:var(--scroll-duration, 30s);animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:var(--scroll-direction, normal);width:fit-content}.card-container.horizontal{flex-direction:row;animation-name:scroll-horizontal}@keyframes scroll-vertical{0%{transform:translateY(0)}to{transform:translateY(calc(-50% - var(--small-16px)))}}@keyframes scroll-horizontal{0%{transform:translate(0)}to{transform:translate(calc(-50% - var(--small-16px)))}}sa-card{flex-shrink:0}.card-container.vertical{flex-direction:column;animation-name:scroll-vertical}@keyframes scroll-continuous{0%{transform:translate(100%)}to{transform:translate(-100%)}}\n"], dependencies: [{ kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "href", "hrefTarget", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ScrollingCardsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sa-scrolling-cards', standalone: true, imports: [HttpClientModule, CardComponent], providers: [IconService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"scrolling-cards-container {{this.isVertical ? 'vertical': 'horizontal'}}\" (mouseenter)=\"pauseScroll()\"\r\n    (mouseleave)=\"resumeScroll()\">\r\n    <div #cardContainer class=\"card-container\">\r\n        @for (card of displayCards; track card.title) {\r\n        <sa-card [title]=\"card.title\" [body]=\"card.body\" [avatar]=\"card?.avatar\" [icon]=\"card.icon\" [iconSize]=\"'54'\"\r\n            [customWrapperClass]=\"'sa-card-secondary-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\r\n            [showCardBody]=\"true\">\r\n        </sa-card>\r\n        }\r\n    </div>\r\n</div>", styles: [".scrolling-cards-container{overflow:hidden;width:fit-content}.scrolling-cards-container.vertical{height:100%;position:relative}.scrolling-cards-container.vertical:before,.scrolling-cards-container.vertical:after{content:\"\";position:absolute;width:100%;height:var(--medium-36px);z-index:1}.scrolling-cards-container.vertical:before{background:#fbfaff;background:-moz-linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:-webkit-linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"var(--structural-primarytint)\",endColorstr=\"#ffffff\",GradientType=1)}.scrolling-cards-container.vertical:after{bottom:0;background:#fbfaff;background:-moz-linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:-webkit-linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"var(--structural-primarytint)\",endColorstr=\"#ffffff\",GradientType=1)}.card-container{display:flex;gap:var(--small-16px);animation-duration:var(--scroll-duration, 30s);animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:var(--scroll-direction, normal);width:fit-content}.card-container.horizontal{flex-direction:row;animation-name:scroll-horizontal}@keyframes scroll-vertical{0%{transform:translateY(0)}to{transform:translateY(calc(-50% - var(--small-16px)))}}@keyframes scroll-horizontal{0%{transform:translate(0)}to{transform:translate(calc(-50% - var(--small-16px)))}}sa-card{flex-shrink:0}.card-container.vertical{flex-direction:column;animation-name:scroll-vertical}@keyframes scroll-continuous{0%{transform:translate(100%)}to{transform:translate(-100%)}}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { cards: [{
-                type: Input,
-                args: [{ required: true }]
-            }], duration: [{
-                type: Input
-            }], direction: [{
-                type: Input
-            }], cardContainer: [{
-                type: ViewChild,
-                args: ['cardContainer']
-            }] } });
-
-class SkeletonBaseComponent {
-    constructor() {
-        this.width = '100%';
-        this.height = '1rem';
-    }
-    get getWidth() {
-        return this.width;
-    }
-    get getHeight() {
-        return this.height;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkeletonBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SkeletonBaseComponent, isStandalone: true, selector: "sa-skeleton-base", inputs: { width: "width", height: "height" }, host: { properties: { "style.width": "this.getWidth", "style.height": "this.getHeight" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{display:block;position:relative;overflow:hidden;background:var(--sa-skeleton-background, #e9ecef);border-radius:var(--sa-skeleton-radius, 4px)}:host:after{content:\"\";position:absolute;inset:0;transform:translate(-100%);background:linear-gradient(90deg,transparent,var(--sa-skeleton-shine, rgba(255, 255, 255, .3)),transparent);animation:shimmer var(--sa-skeleton-animation-duration, 1.5s) infinite}@keyframes shimmer{to{transform:translate(100%)}}\n"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkeletonBaseComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sa-skeleton-base', standalone: true, template: `<ng-content></ng-content>`, styles: [":host{display:block;position:relative;overflow:hidden;background:var(--sa-skeleton-background, #e9ecef);border-radius:var(--sa-skeleton-radius, 4px)}:host:after{content:\"\";position:absolute;inset:0;transform:translate(-100%);background:linear-gradient(90deg,transparent,var(--sa-skeleton-shine, rgba(255, 255, 255, .3)),transparent);animation:shimmer var(--sa-skeleton-animation-duration, 1.5s) infinite}@keyframes shimmer{to{transform:translate(100%)}}\n"] }]
-        }], propDecorators: { width: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }], getWidth: [{
-                type: HostBinding,
-                args: ['style.width']
-            }], getHeight: [{
-                type: HostBinding,
-                args: ['style.height']
-            }] } });
-
-class SkeletonContainerComponent {
-    constructor() {
-        this.direction = 'column';
-    }
-    get containerStyles() {
-        return {
-            gap: this.gap,
-            padding: this.padding,
-            flexDirection: this.direction
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkeletonContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SkeletonContainerComponent, isStandalone: true, selector: "sa-skeleton-container", inputs: { gap: "gap", padding: "padding", direction: "direction" }, ngImport: i0, template: `
-    <div class="skeleton-container" [ngStyle]="containerStyles">
-      <ng-content></ng-content>
-    </div>
-  `, isInline: true, styles: [".skeleton-container{display:flex;flex-direction:column;gap:var(--sa-skeleton-gap, 1rem);padding:var(--sa-skeleton-padding, 1rem)}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkeletonContainerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sa-skeleton-container', standalone: true, imports: [NgStyle], template: `
-    <div class="skeleton-container" [ngStyle]="containerStyles">
-      <ng-content></ng-content>
-    </div>
-  `, styles: [".skeleton-container{display:flex;flex-direction:column;gap:var(--sa-skeleton-gap, 1rem);padding:var(--sa-skeleton-padding, 1rem)}\n"] }]
-        }], propDecorators: { gap: [{
-                type: Input
-            }], padding: [{
-                type: Input
-            }], direction: [{
-                type: Input
-            }] } });
-
-class SkeletonTextComponent {
-    constructor() {
-        this.width = '100%';
-        this.height = '1rem';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkeletonTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SkeletonTextComponent, isStandalone: true, selector: "sa-skeleton-text", inputs: { width: "width", height: "height" }, ngImport: i0, template: `<sa-skeleton-base [width]="width" [height]="height"></sa-skeleton-base>`, isInline: true, dependencies: [{ kind: "component", type: SkeletonBaseComponent, selector: "sa-skeleton-base", inputs: ["width", "height"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkeletonTextComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'sa-skeleton-text',
-                    standalone: true,
-                    imports: [SkeletonBaseComponent],
-                    template: `<sa-skeleton-base [width]="width" [height]="height"></sa-skeleton-base>`,
-                }]
-        }], propDecorators: { width: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }] } });
-class SkeletonCircleComponent {
-    constructor() {
-        this.size = '3rem';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkeletonCircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SkeletonCircleComponent, isStandalone: true, selector: "sa-skeleton-circle", inputs: { size: "size" }, ngImport: i0, template: `<sa-skeleton-base [width]="size" [height]="size" style="border-radius: 50%"></sa-skeleton-base>`, isInline: true, dependencies: [{ kind: "component", type: SkeletonBaseComponent, selector: "sa-skeleton-base", inputs: ["width", "height"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkeletonCircleComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'sa-skeleton-circle',
-                    standalone: true,
-                    imports: [SkeletonBaseComponent],
-                    template: `<sa-skeleton-base [width]="size" [height]="size" style="border-radius: 50%"></sa-skeleton-base>`,
-                }]
-        }], propDecorators: { size: [{
-                type: Input
-            }] } });
-class SkeletonRectangleComponent {
-    constructor() {
-        this.width = '100%';
-        this.height = '100px';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkeletonRectangleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SkeletonRectangleComponent, isStandalone: true, selector: "sa-skeleton-rectangle", inputs: { width: "width", height: "height" }, ngImport: i0, template: `<sa-skeleton-base [width]="width" [height]="height"></sa-skeleton-base>`, isInline: true, dependencies: [{ kind: "component", type: SkeletonBaseComponent, selector: "sa-skeleton-base", inputs: ["width", "height"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkeletonRectangleComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'sa-skeleton-rectangle',
-                    standalone: true,
-                    imports: [SkeletonBaseComponent],
-                    template: `<sa-skeleton-base [width]="width" [height]="height"></sa-skeleton-base>`,
-                }]
-        }], propDecorators: { width: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }] } });
-class SkeletonEllipticalComponent {
-    constructor() {
-        this.width = '200px';
-        this.height = '48px';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkeletonEllipticalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SkeletonEllipticalComponent, isStandalone: true, selector: "sa-skeleton-elliptical", inputs: { width: "width", height: "height" }, ngImport: i0, template: `<sa-skeleton-base [width]="width" [height]="height" style="border-radius: 100px;"></sa-skeleton-base>`, isInline: true, dependencies: [{ kind: "component", type: SkeletonBaseComponent, selector: "sa-skeleton-base", inputs: ["width", "height"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkeletonEllipticalComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'sa-skeleton-elliptical',
-                    standalone: true,
-                    imports: [SkeletonBaseComponent],
-                    template: `<sa-skeleton-base [width]="width" [height]="height" style="border-radius: 100px;"></sa-skeleton-base>`,
-                }]
-        }], propDecorators: { width: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }] } });
-
-const SKELETON_PRESETS = {
-    // Preset for a card with title, subtitle and content
-    card: {
-        items: [
-            { type: 'text', width: '60%', height: '1.5rem' },
-            { type: 'text', width: '40%', height: '1rem' },
-            { type: 'rectangle', height: '100px' }
-        ],
-        containerConfig: {
-            padding: '1rem',
-            gap: '0.75rem'
-        }
-    },
-    // Preset for a list item with avatar
-    listItem: {
-        items: [
-            { type: 'circle', size: '2.5rem' },
-            { type: 'text', width: '70%', height: '1rem' }
-        ],
-        containerConfig: {
-            direction: 'row',
-            gap: '1rem',
-            padding: '0.5rem'
-        }
-    },
-    // Preset for form fields
-    formField: {
-        items: [
-            { type: 'text', width: '30%', height: '1rem' },
-            { type: 'rectangle', height: '2.5rem' }
-        ],
-        containerConfig: {
-            gap: '0.5rem'
-        }
+        // Set vertical/horizontal classes
+        container.classList.toggle('vertical', this.isVertical);
+        container.classList.toggle('horizontal', !this.isVertical);
+        const containerSize = this.isVertical ? container.scrollHeight : container.scrollWidth;
+        const duration = containerSize / this.duration;
+        container.style.setProperty('--scroll-duration', `${duration}s`);
+        container.style.setProperty('--scroll-direction', this.direction === 'down' || this.direction === 'right' ? 'reverse' : 'normal');
+        // Reset animation
+        container.style.animation = 'none';
+        container.offsetHeight; // Trigger reflow
+        container.style.animation = null;
+        this.cdr.markForCheck();
     }
-};
-
-class SkeletonLoaderComponent {
-    ngOnInit() {
-        this.updateConfig();
+    pauseScroll() {
+        if (!this.cardContainer?.nativeElement)
+            return;
+        this.animationPaused = true;
+        this.cardContainer.nativeElement.style.animationPlayState = 'paused';
     }
-    ngOnChanges(changes) {
-        this.updateConfig();
+    resumeScroll() {
+        if (!this.cardContainer?.nativeElement)
+            return;
+        this.animationPaused = false;
+        this.cardContainer.nativeElement.style.animationPlayState = 'running';
     }
-    updateConfig() {
-        if (this.preset && (!this.config || !this.config.items?.length)) {
-            this.config = SKELETON_PRESETS[this.preset];
+    ngOnDestroy() {
+        if (this.animationFrame) {
+            cancelAnimationFrame(this.animationFrame);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkeletonLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: SkeletonLoaderComponent, isStandalone: true, selector: "sa-skeleton-loader", inputs: { preset: "preset", config: "config" }, usesOnChanges: true, ngImport: i0, template: `
-    <sa-skeleton-container
-      [gap]="config?.containerConfig?.gap"
-      [padding]="config?.containerConfig?.padding"
-      [direction]="config?.containerConfig?.direction || 'column'"
-    >
-      @for (item of config?.items; track $index) {
-        @switch (item.type) {
-          @case ('text') {
-            <sa-skeleton-text
-              [width]="item.width"
-              [height]="item.height"
-            ></sa-skeleton-text>
-          }
-          @case ('circle') {
-            <sa-skeleton-circle
-              [size]="item.size"
-            ></sa-skeleton-circle>
-          }
-          @case ('rectangle') {
-            <sa-skeleton-rectangle
-              [width]="item.width"
-              [height]="item.height"
-            ></sa-skeleton-rectangle>
-          }
-          @case ('elliptical') {
-            <sa-skeleton-elliptical
-              [width]="item.width"
-              [height]="item.height"
-            ></sa-skeleton-elliptical>
-          }
-          @case ('container') {
-            <sa-skeleton-container [direction]="item.direction" [gap]="item.gap">
-              @for (subItem of item.items; track $index) {
-                @switch (subItem.type) {
-                  @case ('text') {
-                    <sa-skeleton-text
-                      [width]="subItem.width"
-                      [height]="subItem.height"
-                    ></sa-skeleton-text>
-                  }
-                  @case ('circle') {
-                    <sa-skeleton-circle
-                      [size]="subItem.size"
-                    ></sa-skeleton-circle>
-                  }
-                  @case ('rectangle') {
-                    <sa-skeleton-rectangle
-                      [width]="subItem.width"
-                      [height]="subItem.height"
-                    ></sa-skeleton-rectangle>
-                  }
-                  @case ('elliptical') {
-                    <sa-skeleton-elliptical
-                      [width]="subItem.width"
-                      [height]="subItem.height"
-                    ></sa-skeleton-elliptical>
-                  }
-                  @case ('container') {
-                    <sa-skeleton-container [direction]="subItem.direction" [gap]="subItem.gap">
-                      @for (subSubItem of subItem.items; track $index) {
-                        @switch (subSubItem.type) {
-                          @case ('text') {
-                            <sa-skeleton-text
-                              [width]="subSubItem.width"
-                              [height]="subSubItem.height"
-                            ></sa-skeleton-text>
-                          }
-                          @case ('circle') {
-                            <sa-skeleton-circle
-                              [size]="subSubItem.size"
-                            ></sa-skeleton-circle>
-                          }
-                          @case ('rectangle') {
-                            <sa-skeleton-rectangle
-                              [width]="subSubItem.width"
-                              [height]="subSubItem.height"
-                            ></sa-skeleton-rectangle>
-                          }
-                          @case ('elliptical') {
-                            <sa-skeleton-elliptical
-                              [width]="subSubItem.width"
-                              [height]="subSubItem.height"
-                            ></sa-skeleton-elliptical>
-                          }
-                        }
-                      }
-                    </sa-skeleton-container>
-                  }
-                }
-              }
-            </sa-skeleton-container>
-          }
-        }
-      }
-    </sa-skeleton-container>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SkeletonTextComponent, selector: "sa-skeleton-text", inputs: ["width", "height"] }, { kind: "component", type: SkeletonCircleComponent, selector: "sa-skeleton-circle", inputs: ["size"] }, { kind: "component", type: SkeletonRectangleComponent, selector: "sa-skeleton-rectangle", inputs: ["width", "height"] }, { kind: "component", type: SkeletonEllipticalComponent, selector: "sa-skeleton-elliptical", inputs: ["width", "height"] }, { kind: "component", type: SkeletonContainerComponent, selector: "sa-skeleton-container", inputs: ["gap", "padding", "direction"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ScrollingCardsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: ScrollingCardsComponent, isStandalone: true, selector: "sa-scrolling-cards", inputs: { cards: "cards", duration: "duration", direction: "direction" }, providers: [IconService], viewQueries: [{ propertyName: "cardContainer", first: true, predicate: ["cardContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"scrolling-cards-container {{this.isVertical ? 'vertical': 'horizontal'}}\" (mouseenter)=\"pauseScroll()\"\r\n    (mouseleave)=\"resumeScroll()\">\r\n    <div #cardContainer class=\"card-container\">\r\n        @for (card of displayCards; track card.title) {\r\n        <sa-card [title]=\"card.title\" [body]=\"card.body\" [avatar]=\"card?.avatar\" [icon]=\"card.icon\" [iconSize]=\"'54'\"\r\n            [customWrapperClass]=\"'sa-card-secondary-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\r\n            [showCardBody]=\"true\">\r\n        </sa-card>\r\n        }\r\n    </div>\r\n</div>", styles: [".scrolling-cards-container{overflow:hidden;width:fit-content}.scrolling-cards-container.vertical{height:100%;position:relative}.scrolling-cards-container.vertical:before,.scrolling-cards-container.vertical:after{content:\"\";position:absolute;width:100%;height:var(--medium-36px);z-index:1}.scrolling-cards-container.vertical:before{background:#fbfaff;background:-moz-linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:-webkit-linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"var(--structural-primarytint)\",endColorstr=\"#ffffff\",GradientType=1)}.scrolling-cards-container.vertical:after{bottom:0;background:#fbfaff;background:-moz-linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:-webkit-linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"var(--structural-primarytint)\",endColorstr=\"#ffffff\",GradientType=1)}.card-container{display:flex;gap:var(--small-16px);animation-duration:var(--scroll-duration, 30s);animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:var(--scroll-direction, normal);width:fit-content}.card-container.horizontal{flex-direction:row;animation-name:scroll-horizontal}@keyframes scroll-vertical{0%{transform:translateY(0)}to{transform:translateY(calc(-50% - var(--small-16px)))}}@keyframes scroll-horizontal{0%{transform:translate(0)}to{transform:translate(calc(-50% - var(--small-16px)))}}sa-card{flex-shrink:0}.card-container.vertical{flex-direction:column;animation-name:scroll-vertical}@keyframes scroll-continuous{0%{transform:translate(100%)}to{transform:translate(-100%)}}\n"], dependencies: [{ kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "href", "hrefTarget", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkeletonLoaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ScrollingCardsComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'sa-skeleton-loader',
-                    standalone: true,
-                    imports: [
-                        CommonModule,
-                        SkeletonBaseComponent,
-                        SkeletonTextComponent,
-                        SkeletonCircleComponent,
-                        SkeletonRectangleComponent,
-                        SkeletonEllipticalComponent,
-                        SkeletonContainerComponent
-                    ],
-                    template: `
-    <sa-skeleton-container
-      [gap]="config?.containerConfig?.gap"
-      [padding]="config?.containerConfig?.padding"
-      [direction]="config?.containerConfig?.direction || 'column'"
-    >
-      @for (item of config?.items; track $index) {
-        @switch (item.type) {
-          @case ('text') {
-            <sa-skeleton-text
-              [width]="item.width"
-              [height]="item.height"
-            ></sa-skeleton-text>
-          }
-          @case ('circle') {
-            <sa-skeleton-circle
-              [size]="item.size"
-            ></sa-skeleton-circle>
-          }
-          @case ('rectangle') {
-            <sa-skeleton-rectangle
-              [width]="item.width"
-              [height]="item.height"
-            ></sa-skeleton-rectangle>
-          }
-          @case ('elliptical') {
-            <sa-skeleton-elliptical
-              [width]="item.width"
-              [height]="item.height"
-            ></sa-skeleton-elliptical>
-          }
-          @case ('container') {
-            <sa-skeleton-container [direction]="item.direction" [gap]="item.gap">
-              @for (subItem of item.items; track $index) {
-                @switch (subItem.type) {
-                  @case ('text') {
-                    <sa-skeleton-text
-                      [width]="subItem.width"
-                      [height]="subItem.height"
-                    ></sa-skeleton-text>
-                  }
-                  @case ('circle') {
-                    <sa-skeleton-circle
-                      [size]="subItem.size"
-                    ></sa-skeleton-circle>
-                  }
-                  @case ('rectangle') {
-                    <sa-skeleton-rectangle
-                      [width]="subItem.width"
-                      [height]="subItem.height"
-                    ></sa-skeleton-rectangle>
-                  }
-                  @case ('elliptical') {
-                    <sa-skeleton-elliptical
-                      [width]="subItem.width"
-                      [height]="subItem.height"
-                    ></sa-skeleton-elliptical>
-                  }
-                  @case ('container') {
-                    <sa-skeleton-container [direction]="subItem.direction" [gap]="subItem.gap">
-                      @for (subSubItem of subItem.items; track $index) {
-                        @switch (subSubItem.type) {
-                          @case ('text') {
-                            <sa-skeleton-text
-                              [width]="subSubItem.width"
-                              [height]="subSubItem.height"
-                            ></sa-skeleton-text>
-                          }
-                          @case ('circle') {
-                            <sa-skeleton-circle
-                              [size]="subSubItem.size"
-                            ></sa-skeleton-circle>
-                          }
-                          @case ('rectangle') {
-                            <sa-skeleton-rectangle
-                              [width]="subSubItem.width"
-                              [height]="subSubItem.height"
-                            ></sa-skeleton-rectangle>
-                          }
-                          @case ('elliptical') {
-                            <sa-skeleton-elliptical
-                              [width]="subSubItem.width"
-                              [height]="subSubItem.height"
-                            ></sa-skeleton-elliptical>
-                          }
-                        }
-                      }
-                    </sa-skeleton-container>
-                  }
-                }
-              }
-            </sa-skeleton-container>
-          }
-        }
-      }
-    </sa-skeleton-container>
-  `
-                }]
-        }], propDecorators: { preset: [{
+            args: [{ selector: 'sa-scrolling-cards', standalone: true, imports: [HttpClientModule, CardComponent], providers: [IconService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"scrolling-cards-container {{this.isVertical ? 'vertical': 'horizontal'}}\" (mouseenter)=\"pauseScroll()\"\r\n    (mouseleave)=\"resumeScroll()\">\r\n    <div #cardContainer class=\"card-container\">\r\n        @for (card of displayCards; track card.title) {\r\n        <sa-card [title]=\"card.title\" [body]=\"card.body\" [avatar]=\"card?.avatar\" [icon]=\"card.icon\" [iconSize]=\"'54'\"\r\n            [customWrapperClass]=\"'sa-card-secondary-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\r\n            [showCardBody]=\"true\">\r\n        </sa-card>\r\n        }\r\n    </div>\r\n</div>", styles: [".scrolling-cards-container{overflow:hidden;width:fit-content}.scrolling-cards-container.vertical{height:100%;position:relative}.scrolling-cards-container.vertical:before,.scrolling-cards-container.vertical:after{content:\"\";position:absolute;width:100%;height:var(--medium-36px);z-index:1}.scrolling-cards-container.vertical:before{background:#fbfaff;background:-moz-linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:-webkit-linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"var(--structural-primarytint)\",endColorstr=\"#ffffff\",GradientType=1)}.scrolling-cards-container.vertical:after{bottom:0;background:#fbfaff;background:-moz-linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:-webkit-linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"var(--structural-primarytint)\",endColorstr=\"#ffffff\",GradientType=1)}.card-container{display:flex;gap:var(--small-16px);animation-duration:var(--scroll-duration, 30s);animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:var(--scroll-direction, normal);width:fit-content}.card-container.horizontal{flex-direction:row;animation-name:scroll-horizontal}@keyframes scroll-vertical{0%{transform:translateY(0)}to{transform:translateY(calc(-50% - var(--small-16px)))}}@keyframes scroll-horizontal{0%{transform:translate(0)}to{transform:translate(calc(-50% - var(--small-16px)))}}sa-card{flex-shrink:0}.card-container.vertical{flex-direction:column;animation-name:scroll-vertical}@keyframes scroll-continuous{0%{transform:translate(100%)}to{transform:translate(-100%)}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { cards: [{
+                type: Input,
+                args: [{ required: true }]
+            }], duration: [{
                 type: Input
-            }], config: [{
+            }], direction: [{
                 type: Input
+            }], cardContainer: [{
+                type: ViewChild,
+                args: ['cardContainer']
             }] } });
 
 let nextId$1 = 0; // used to give unique ids to inputs used in html