@openkit-labs/ngx-kit-ui 0.0.42 → 0.0.43

package/fesm2022/openkit-labs-ngx-kit-ui.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, HostBinding, Output, Input, Component, Directive, TemplateRef, HostListener, ContentChild, ContentChildren, NgModule, Injectable, ViewChild, Optional, Self, signal, computed, effect, ElementRef, PLATFORM_ID, Inject, Pipe } from '@angular/core';
-import { NgClass, NgTemplateOutlet, CommonModule, NgStyle, isPlatformBrowser, NgOptimizedImage } from '@angular/common';
+import { EventEmitter, HostBinding, Output, Input, Component, Directive, TemplateRef, HostListener, ContentChild, ContentChildren, NgModule, Injectable, ViewChild, Optional, Self, signal, computed, effect, ElementRef, PLATFORM_ID, Inject, input, Pipe } from '@angular/core';
+import { NgClass, NgTemplateOutlet, CommonModule, NgStyle, isPlatformBrowser } from '@angular/common';
 import { Subject, fromEvent, debounceTime, Subscription, timer } from 'rxjs';
 import { takeUntil, switchMap, filter } from 'rxjs/operators';
 import * as i1 from '@angular/forms';
@@ -5711,143 +5711,107 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 }]
         }] });
 
-class KitImageLoadingDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitImageLoadingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.4", type: KitImageLoadingDirective, isStandalone: true, selector: "[kitImageLoading]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitImageLoadingDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kitImageLoading]'
-                }]
-        }] });
-
-class KitImageErrorDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitImageErrorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.4", type: KitImageErrorDirective, isStandalone: true, selector: "[kitImageError]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitImageErrorDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kitImageError]'
-                }]
-        }] });
-
 class KitImageComponent {
-    // Allow missing/empty src. If src is empty we won't render the <img>
-    // which avoids passing undefined/empty values to NgOptimizedImage.
-    _src = '';
-    set src(value) {
-        this._src = value ?? '';
-        this.updateStateForSrc();
-    }
-    get src() {
-        return this._src;
-    }
-    alt = '';
-    width = 'auto';
-    height = 'auto';
-    borderRadius = 0;
-    fit = 'cover';
-    priority = false; // loads eagerly if true
-    loaded = new EventEmitter();
-    error = new EventEmitter();
-    activeTemplate;
-    inactiveTemplate;
-    isLoading = true;
-    hasError = false;
-    onLoad() {
-        this.isLoading = false;
-        this.hasError = false;
-        this.loaded.emit();
-    }
-    onError() {
-        this.isLoading = false;
-        this.hasError = true;
-        this.error.emit();
-    }
-    updateStateForSrc() {
-        // If there is no src we shouldn't show loading or error states.
-        if (!this._src) {
-            this.isLoading = false;
-            this.hasError = false;
-        }
-        else {
-            // New source -> show loading until load or error events fire
-            this.isLoading = true;
-            this.hasError = false;
-        }
-    }
-    get hasCustomLoading() {
-        return this.activeTemplate !== undefined;
-    }
-    get hasCustomError() {
-        return this.inactiveTemplate !== undefined;
-    }
-    get containerWidth() {
-        if (typeof this.width === 'number') {
-            return `${this.width}px`;
-        }
-        if (typeof this.width === 'string' && !isNaN(Number(this.width))) {
-            return `${this.width}px`;
-        }
-        return this.width;
-    }
-    get containerHeight() {
-        if (typeof this.height === 'number') {
-            return `${this.height}px`;
-        }
-        if (typeof this.height === 'string' && !isNaN(Number(this.height))) {
-            return `${this.height}px`;
-        }
-        return this.height;
+    /** Input image src as a signal */
+    src = input(null, ...(ngDevMode ? [{ debugName: "src" }] : []));
+    objectFit = input('cover', ...(ngDevMode ? [{ debugName: "objectFit" }] : []));
+    width = input('100%', ...(ngDevMode ? [{ debugName: "width" }] : []));
+    height = input('auto', ...(ngDevMode ? [{ debugName: "height" }] : []));
+    aspectRatio = input(null, ...(ngDevMode ? [{ debugName: "aspectRatio" }] : []));
+    borderRadius = input(null, ...(ngDevMode ? [{ debugName: "borderRadius" }] : []));
+    errorSrc = signal(null, ...(ngDevMode ? [{ debugName: "errorSrc" }] : []));
+    /** Internal signals */
+    isLoading = signal(true, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    errored = signal(false, ...(ngDevMode ? [{ debugName: "errored" }] : []));
+    showImage = signal(false, ...(ngDevMode ? [{ debugName: "showImage" }] : []));
+    /** Store natural width/height of the image to prevent collapse */
+    imageWidth = signal(null, ...(ngDevMode ? [{ debugName: "imageWidth" }] : []));
+    imageHeight = signal(null, ...(ngDevMode ? [{ debugName: "imageHeight" }] : []));
+    constructor() {
+        effect(() => {
+            const url = this.src();
+            if (!url) {
+                console.log('[ImageComponent] src is null → error state');
+                this.handleError();
+                return;
+            }
+            console.log('[ImageComponent] new src detected:', url);
+            this.isLoading.set(true);
+            this.errored.set(false);
+            this.showImage.set(false);
+            this.imageWidth.set(null);
+            this.imageHeight.set(null);
+            // Preload main image
+            const img = new Image();
+            img.src = url;
+            img.onload = () => {
+                console.log('[ImageComponent] image loaded successfully');
+                this.imageWidth.set(img.naturalWidth);
+                this.imageHeight.set(img.naturalHeight);
+                setTimeout(() => {
+                    console.log('[ImageComponent] rendering image after 1s delay');
+                    this.showImage.set(true);
+                    this.isLoading.set(false);
+                    this.errored.set(false);
+                }, 100);
+            };
+            img.onerror = () => {
+                console.error('[ImageComponent] main image failed to load');
+                this.handleError();
+            };
+        });
     }
-    get containerBorderRadius() {
-        if (typeof this.borderRadius === 'number') {
-            return `${this.borderRadius}px`;
+    /** Handle error state and optional placeholder */
+    handleError() {
+        this.isLoading.set(false);
+        this.errored.set(true);
+        this.showImage.set(false);
+        // Use default size fallback
+        this.imageWidth.set(200);
+        this.imageHeight.set(200);
+        const placeholder = this.errorSrc();
+        if (placeholder) {
+            console.log('[ImageComponent] using provided error placeholder:', placeholder);
+            // Preload the placeholder image
+            const img = new Image();
+            img.src = placeholder;
+            img.onload = () => {
+                this.imageWidth.set(img.naturalWidth);
+                this.imageHeight.set(img.naturalHeight);
+                this.showImage.set(true);
+                this.errored.set(false);
+                console.log('[ImageComponent] error placeholder loaded');
+            };
+            img.onerror = () => {
+                console.error('[ImageComponent] error placeholder failed to load, using default');
+            };
         }
-        if (typeof this.borderRadius === 'string' && !isNaN(Number(this.borderRadius))) {
-            return `${this.borderRadius}px`;
+        else {
+            console.log('[ImageComponent] no error placeholder provided, using default fallback');
         }
-        return this.borderRadius;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: KitImageComponent, isStandalone: true, selector: "kit-image", inputs: { src: "src", alt: "alt", width: "width", height: "height", borderRadius: "borderRadius", fit: "fit", priority: "priority" }, outputs: { loaded: "loaded", error: "error" }, queries: [{ propertyName: "activeTemplate", first: true, predicate: KitImageLoadingDirective, descendants: true, read: TemplateRef }, { propertyName: "inactiveTemplate", first: true, predicate: KitImageErrorDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: "<div class=\"image-container\"\n     [style.width]=\"containerWidth\"\n     [style.height]=\"containerHeight\"\n     [style.border-radius]=\"containerBorderRadius\">\n\n     @if(isLoading){\n\n     @if(hasCustomLoading){\n     <ng-container *ngTemplateOutlet=\"activeTemplate\"></ng-container>\n     }\n     @else{\n     <div class=\"loading\"></div>\n     }\n     }\n\n     @if(hasError){\n\n     @if(hasCustomError){\n     <ng-container *ngTemplateOutlet=\"inactiveTemplate\"></ng-container>\n     }\n     @else{\n     <div class=\"error\"></div>\n     }\n     }\n\n     @if(!hasError){\n     @if(src){\n     <img [ngSrc]=\"src\"\n          [alt]=\"alt\"\n          fill\n          [priority]=\"priority\"\n          [style.object-fit]=\"fit\"\n          (load)=\"onLoad()\"\n          (error)=\"onError()\" />\n     }\n     }\n\n</div>", styles: [".image-container{position:relative;display:inline-block;overflow:hidden;min-height:var(--kit-image-min-height, 50px);min-width:var(--kit-image-min-width, 50px)}:host{display:inline-block}img{display:block;border-radius:var(--kit-image-border-radius, 8px)}.loading{min-height:var(--kit-image-min-height, 50px);min-width:var(--kit-image-min-width, 50px);height:100%;width:100%;display:block;border-radius:var(--kit-image-border-radius, 8px);background-color:var(--kit-image-loading-background, #dedede)}.error{min-height:var(--kit-image-min-height, 50px);min-width:var(--kit-image-min-width, 50px);height:100%;width:100%;display:block;border-radius:var(--kit-image-border-radius, 8px);background-color:var(--kit-image-error-background, #dedede)}\n"], dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: KitImageComponent, isStandalone: true, selector: "kit-image", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, objectFit: { classPropertyName: "objectFit", publicName: "objectFit", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-image-container\"\n     [style.object-fit]=\"objectFit()\"\n     [style.width]=\"width() ? width() : (imageWidth() ? imageWidth() + 'px' : '200px')\"\n     [style.height]=\"height() ? height() : (imageHeight() ? imageHeight() + 'px' : '200px')\"\n     [style.aspectRatio]=\"aspectRatio() ?? null\"\n     [style.borderRadius]=\"borderRadius() ?? null\">\n\n    <!-- Image -->\n    @if(showImage())\n    {\n    <ng-container>\n        <img [src]=\"src()\"\n             [style.object-fit]=\"objectFit()\"\n             [style.borderRadius]=\"borderRadius() ?? null\"\n             class=\"kit-image\">\n    </ng-container>\n    }\n\n    <!-- Skeleton shimmer while loading -->\n\n    @if(isLoading())\n    {\n    <ng-container>\n        <div class=\"kit-image-skeleton\"></div>\n    </ng-container>\n    }\n\n    @if(errored() && errorSrc())\n    {\n    <ng-container>\n        <img [src]=\"errorSrc()\"\n             [style.object-fit]=\"objectFit()\"\n             [style.borderRadius]=\"borderRadius() ?? null\"\n             class=\"kit-image\">\n    </ng-container>\n    }\n\n    @if(errored() && !errorSrc())\n    {\n    <ng-container>\n        <div class=\"kit-image-error\"></div>\n    </ng-container>\n    }\n</div>", styles: [":host{display:inline-block}.kit-image-container{position:relative;display:inline-block;overflow:hidden;border-radius:var(--kit-image-border-radius);min-width:100px;min-height:100px}.kit-image{width:100%;height:100%;object-fit:contain;display:block;transition:opacity .2s ease-in-out}.kit-image-skeleton{position:absolute;inset:0;background:linear-gradient(90deg,#ffffff0d,#0000000a 40%,#ffffff0d);background-size:200% 100%;animation:shimmer 1.2s linear infinite;border-radius:inherit}.kit-image-error{position:absolute;inset:0;background:#ffffff0d 100%;border-radius:inherit}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitImageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kit-image', imports: [NgOptimizedImage, NgTemplateOutlet], template: "<div class=\"image-container\"\n     [style.width]=\"containerWidth\"\n     [style.height]=\"containerHeight\"\n     [style.border-radius]=\"containerBorderRadius\">\n\n     @if(isLoading){\n\n     @if(hasCustomLoading){\n     <ng-container *ngTemplateOutlet=\"activeTemplate\"></ng-container>\n     }\n     @else{\n     <div class=\"loading\"></div>\n     }\n     }\n\n     @if(hasError){\n\n     @if(hasCustomError){\n     <ng-container *ngTemplateOutlet=\"inactiveTemplate\"></ng-container>\n     }\n     @else{\n     <div class=\"error\"></div>\n     }\n     }\n\n     @if(!hasError){\n     @if(src){\n     <img [ngSrc]=\"src\"\n          [alt]=\"alt\"\n          fill\n          [priority]=\"priority\"\n          [style.object-fit]=\"fit\"\n          (load)=\"onLoad()\"\n          (error)=\"onError()\" />\n     }\n     }\n\n</div>", styles: [".image-container{position:relative;display:inline-block;overflow:hidden;min-height:var(--kit-image-min-height, 50px);min-width:var(--kit-image-min-width, 50px)}:host{display:inline-block}img{display:block;border-radius:var(--kit-image-border-radius, 8px)}.loading{min-height:var(--kit-image-min-height, 50px);min-width:var(--kit-image-min-width, 50px);height:100%;width:100%;display:block;border-radius:var(--kit-image-border-radius, 8px);background-color:var(--kit-image-loading-background, #dedede)}.error{min-height:var(--kit-image-min-height, 50px);min-width:var(--kit-image-min-width, 50px);height:100%;width:100%;display:block;border-radius:var(--kit-image-border-radius, 8px);background-color:var(--kit-image-error-background, #dedede)}\n"] }]
-        }], propDecorators: { src: [{
-                type: Input
-            }], alt: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }], borderRadius: [{
-                type: Input
-            }], fit: [{
-                type: Input
-            }], priority: [{
-                type: Input
-            }], loaded: [{
-                type: Output
-            }], error: [{
-                type: Output
-            }], activeTemplate: [{
-                type: ContentChild,
-                args: [KitImageLoadingDirective, { read: TemplateRef }]
-            }], inactiveTemplate: [{
-                type: ContentChild,
-                args: [KitImageErrorDirective, { read: TemplateRef }]
-            }] } });
+            args: [{ selector: 'kit-image', template: "<div class=\"kit-image-container\"\n     [style.object-fit]=\"objectFit()\"\n     [style.width]=\"width() ? width() : (imageWidth() ? imageWidth() + 'px' : '200px')\"\n     [style.height]=\"height() ? height() : (imageHeight() ? imageHeight() + 'px' : '200px')\"\n     [style.aspectRatio]=\"aspectRatio() ?? null\"\n     [style.borderRadius]=\"borderRadius() ?? null\">\n\n    <!-- Image -->\n    @if(showImage())\n    {\n    <ng-container>\n        <img [src]=\"src()\"\n             [style.object-fit]=\"objectFit()\"\n             [style.borderRadius]=\"borderRadius() ?? null\"\n             class=\"kit-image\">\n    </ng-container>\n    }\n\n    <!-- Skeleton shimmer while loading -->\n\n    @if(isLoading())\n    {\n    <ng-container>\n        <div class=\"kit-image-skeleton\"></div>\n    </ng-container>\n    }\n\n    @if(errored() && errorSrc())\n    {\n    <ng-container>\n        <img [src]=\"errorSrc()\"\n             [style.object-fit]=\"objectFit()\"\n             [style.borderRadius]=\"borderRadius() ?? null\"\n             class=\"kit-image\">\n    </ng-container>\n    }\n\n    @if(errored() && !errorSrc())\n    {\n    <ng-container>\n        <div class=\"kit-image-error\"></div>\n    </ng-container>\n    }\n</div>", styles: [":host{display:inline-block}.kit-image-container{position:relative;display:inline-block;overflow:hidden;border-radius:var(--kit-image-border-radius);min-width:100px;min-height:100px}.kit-image{width:100%;height:100%;object-fit:contain;display:block;transition:opacity .2s ease-in-out}.kit-image-skeleton{position:absolute;inset:0;background:linear-gradient(90deg,#ffffff0d,#0000000a 40%,#ffffff0d);background-size:200% 100%;animation:shimmer 1.2s linear infinite;border-radius:inherit}.kit-image-error{position:absolute;inset:0;background:#ffffff0d 100%;border-radius:inherit}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
+        }], ctorParameters: () => [] });
 
 class KitAvatarComponent {
     src = '';
-    alt = '';
     size = 40;
     borderRadius;
+    /** Return size as a valid CSS value (e.g. `40px` or `3rem`) */
+    get sizePx() {
+        if (typeof this.size === 'number') {
+            return `${this.size}px`;
+        }
+        if (typeof this.size === 'string' && !isNaN(Number(this.size))) {
+            return `${Number(this.size)}px`;
+        }
+        return this.size;
+    }
     get containerBorderRadius() {
         if (this.borderRadius) {
             if (typeof this.borderRadius === 'number') {
@@ -5861,15 +5825,13 @@ class KitAvatarComponent {
         return 'var(--kit-avatar-border-radius)';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: KitAvatarComponent, isStandalone: true, selector: "kit-avatar", inputs: { src: "src", alt: "alt", size: "size", borderRadius: "borderRadius" }, ngImport: i0, template: "<kit-image [src]=\"src\"\n           [alt]=\"alt\"\n           [width]=\"size\"\n           [height]=\"size\"\n           [borderRadius]=\"containerBorderRadius\"></kit-image>", styles: [":host{display:inline-block}\n"], dependencies: [{ kind: "component", type: KitImageComponent, selector: "kit-image", inputs: ["src", "alt", "width", "height", "borderRadius", "fit", "priority"], outputs: ["loaded", "error"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: KitAvatarComponent, isStandalone: true, selector: "kit-avatar", inputs: { src: "src", size: "size", borderRadius: "borderRadius" }, ngImport: i0, template: "<kit-image [src]=\"src\"\n           [width]=\"sizePx\"\n           [height]=\"sizePx\"\n           [borderRadius]=\"containerBorderRadius\"></kit-image>", styles: [":host{display:inline-block}\n"], dependencies: [{ kind: "component", type: KitImageComponent, selector: "kit-image", inputs: ["src", "objectFit", "width", "height", "aspectRatio", "borderRadius"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitAvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kit-avatar', imports: [KitImageComponent], template: "<kit-image [src]=\"src\"\n           [alt]=\"alt\"\n           [width]=\"size\"\n           [height]=\"size\"\n           [borderRadius]=\"containerBorderRadius\"></kit-image>", styles: [":host{display:inline-block}\n"] }]
+            args: [{ selector: 'kit-avatar', imports: [KitImageComponent], template: "<kit-image [src]=\"src\"\n           [width]=\"sizePx\"\n           [height]=\"sizePx\"\n           [borderRadius]=\"containerBorderRadius\"></kit-image>", styles: [":host{display:inline-block}\n"] }]
         }], propDecorators: { src: [{
                 type: Input
-            }], alt: [{
-                type: Input
             }], size: [{
                 type: Input
             }], borderRadius: [{
@@ -5879,11 +5841,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
 class KitMediaModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitMediaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: KitMediaModule, imports: [KitImageComponent,
-            KitImageLoadingDirective,
-            KitImageErrorDirective,
             KitAvatarComponent], exports: [KitImageComponent,
-            KitImageLoadingDirective,
-            KitImageErrorDirective,
             KitAvatarComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitMediaModule });
 }
@@ -5892,14 +5850,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             args: [{
                     imports: [
                         KitImageComponent,
-                        KitImageLoadingDirective,
-                        KitImageErrorDirective,
                         KitAvatarComponent
                     ],
                     exports: [
                         KitImageComponent,
-                        KitImageLoadingDirective,
-                        KitImageErrorDirective,
                         KitAvatarComponent
                     ]
                 }]
@@ -6684,5 +6638,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { KitAppRootComponent, KitAvatarComponent, KitBadgeComponent, KitBaseInputComponent, KitBottomBarComponent, KitBottomSheetComponent, KitButtonComponent, KitButtonGroupComponent, KitButtonGroupItemActiveDirective, KitButtonGroupItemComponent, KitButtonGroupItemIdleDirective, KitButtonModule, KitCardComponent, KitCarouselComponent, KitCenterComponent, KitColumnComponent, KitConstrainedBoxComponent, KitContainerComponent, KitCopyToClipboardDirective, KitDataGridCellHostDirective, KitDataGridCellRendererRegistry, KitDataGridComponent, KitDataGridHeaderHostDirective, KitDataGridHeaderRendererRegistry, KitDataModule, KitDialogComponent, KitDirectivesModule, KitDividerComponent, KitExpandedComponent, KitFileSizePipe, KitFloatingActionButtonComponent, KitGestureDetectorComponent, KitGridComponent, KitImageComponent, KitImageErrorDirective, KitImageLoadingDirective, KitInputDateComponent, KitInputEmailComponent, KitInputFieldTitleComponent, KitInputModule, KitInputMultiSelectComponent, KitInputNumberComponent, KitInputOtpComponent, KitInputPasswordComponent, KitInputPhoneComponent, KitInputSelectComponent, KitInputTextComponent, KitInputTextareaComponent, KitInputTimeComponent, KitInteractorsModule, KitKMBPipe, KitLayoutModule, KitMediaModule, KitNavigationModule, KitNavigationService, KitOverlaysModule, KitPaddingComponent, KitPageComponent, KitPanelModule, KitPipesModule, KitPositionedComponent, KitPressAndHoldDirective, KitProgressBarComponent, KitRadioButtonComponent, KitRoundButtonComponent, KitRouterOutletComponent, KitRowComponent, KitScreenService, KitSelectItemActiveDirective, KitSelectItemDirective, KitSideMenuComponent, KitSideMenuService, KitSizedBoxComponent, KitSpacerComponent, KitStickyContainerComponent, KitTabContentComponent, KitTabViewComponent, KitTextBodyComponent, KitTextButtonComponent, KitTextCaptionComponent, KitTextDisplayComponent, KitTextHeadingComponent, KitTextLabelComponent, KitTextLinkComponent, KitTextModule, KitTextSubheadingComponent, KitThemeService, KitTimeAgoPipe, KitTopBarComponent, SimpleTableComponent, StackComponent, TextCellRendererComponent, TextHeaderRendererComponent };
+export { KitAppRootComponent, KitAvatarComponent, KitBadgeComponent, KitBaseInputComponent, KitBottomBarComponent, KitBottomSheetComponent, KitButtonComponent, KitButtonGroupComponent, KitButtonGroupItemActiveDirective, KitButtonGroupItemComponent, KitButtonGroupItemIdleDirective, KitButtonModule, KitCardComponent, KitCarouselComponent, KitCenterComponent, KitColumnComponent, KitConstrainedBoxComponent, KitContainerComponent, KitCopyToClipboardDirective, KitDataGridCellHostDirective, KitDataGridCellRendererRegistry, KitDataGridComponent, KitDataGridHeaderHostDirective, KitDataGridHeaderRendererRegistry, KitDataModule, KitDialogComponent, KitDirectivesModule, KitDividerComponent, KitExpandedComponent, KitFileSizePipe, KitFloatingActionButtonComponent, KitGestureDetectorComponent, KitGridComponent, KitImageComponent, KitInputDateComponent, KitInputEmailComponent, KitInputFieldTitleComponent, KitInputModule, KitInputMultiSelectComponent, KitInputNumberComponent, KitInputOtpComponent, KitInputPasswordComponent, KitInputPhoneComponent, KitInputSelectComponent, KitInputTextComponent, KitInputTextareaComponent, KitInputTimeComponent, KitInteractorsModule, KitKMBPipe, KitLayoutModule, KitMediaModule, KitNavigationModule, KitNavigationService, KitOverlaysModule, KitPaddingComponent, KitPageComponent, KitPanelModule, KitPipesModule, KitPositionedComponent, KitPressAndHoldDirective, KitProgressBarComponent, KitRadioButtonComponent, KitRoundButtonComponent, KitRouterOutletComponent, KitRowComponent, KitScreenService, KitSelectItemActiveDirective, KitSelectItemDirective, KitSideMenuComponent, KitSideMenuService, KitSizedBoxComponent, KitSpacerComponent, KitStickyContainerComponent, KitTabContentComponent, KitTabViewComponent, KitTextBodyComponent, KitTextButtonComponent, KitTextCaptionComponent, KitTextDisplayComponent, KitTextHeadingComponent, KitTextLabelComponent, KitTextLinkComponent, KitTextModule, KitTextSubheadingComponent, KitThemeService, KitTimeAgoPipe, KitTopBarComponent, SimpleTableComponent, StackComponent, TextCellRendererComponent, TextHeaderRendererComponent };
 //# sourceMappingURL=openkit-labs-ngx-kit-ui.mjs.map