@koalarx/ui 21.1.17 → 21.1.19

package/fesm2022/koalarx-ui-core-components-loader-page.mjs

@@ -24,11 +24,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
 class LoaderPageContent {
     loaderPage = inject(LoaderPage);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LoaderPageContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: LoaderPageContent, isStandalone: true, selector: "kl-loader-page-content", ngImport: i0, template: "<div class=\"fixed bg-base-100/40 flex w-full h-full items-center justify-center z-10000\"\n  [class]=\"{ 'hidden': !loaderPage.isLoading() }\">\n  <kl-loader size=\"extraLarge\" />\n</div>\n", dependencies: [{ kind: "component", type: Loader, selector: "kl-loader", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: LoaderPageContent, isStandalone: true, selector: "kl-loader-page-content", ngImport: i0, template: "<div class=\"fixed bg-base-100/40 flex w-full h-full items-center justify-center z-10001\"\n  [class]=\"{ 'hidden': !loaderPage.isLoading() }\">\n  <kl-loader size=\"extraLarge\" />\n</div>\n", dependencies: [{ kind: "component", type: Loader, selector: "kl-loader", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LoaderPageContent, decorators: [{
             type: Component,
-            args: [{ selector: 'kl-loader-page-content', changeDetection: ChangeDetectionStrategy.OnPush, imports: [Loader], template: "<div class=\"fixed bg-base-100/40 flex w-full h-full items-center justify-center z-10000\"\n  [class]=\"{ 'hidden': !loaderPage.isLoading() }\">\n  <kl-loader size=\"extraLarge\" />\n</div>\n" }]
+            args: [{ selector: 'kl-loader-page-content', changeDetection: ChangeDetectionStrategy.OnPush, imports: [Loader], template: "<div class=\"fixed bg-base-100/40 flex w-full h-full items-center justify-center z-10001\"\n  [class]=\"{ 'hidden': !loaderPage.isLoading() }\">\n  <kl-loader size=\"extraLarge\" />\n</div>\n" }]
         }] });
 
 /**

package/fesm2022/koalarx-ui-core-components-loader-page.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"koalarx-ui-core-components-loader-page.mjs","sources":["../../projects/koala-ui/core/components/loader-page/loader-page.ts","../../projects/koala-ui/core/components/loader-page/loader-page-content.ts","../../projects/koala-ui/core/components/loader-page/loader-page-content.html","../../projects/koala-ui/core/components/loader-page/koalarx-ui-core-components-loader-page.ts"],"sourcesContent":["import { Injectable, signal } from '@angular/core';\n\n@Injectable({ providedIn: 'root' })\nexport class LoaderPage {\n  private _loading = signal(false);\n\n  get isLoading() {\n    return this._loading.asReadonly();\n  }\n\n  show() {\n    this._loading.set(true);\n  }\n\n  dismiss() {\n    this._loading.set(false);\n  }\n}\n","import { ChangeDetectionStrategy, Component, inject } from '@angular/core';\nimport { Loader } from '@koalarx/ui/core/components/loader';\nimport { LoaderPage } from './loader-page';\n\n@Component({\n  selector: 'kl-loader-page-content',\n  templateUrl: './loader-page-content.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [Loader],\n})\nexport class LoaderPageContent {\n  loaderPage = inject(LoaderPage);\n}\n","<div class=\"fixed bg-base-100/40 flex w-full h-full items-center justify-center z-10000\"\n  [class]=\"{ 'hidden': !loaderPage.isLoading() }\">\n  <kl-loader size=\"extraLarge\" />\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAGa,UAAU,CAAA;AACb,IAAA,QAAQ,GAAG,MAAM,CAAC,KAAK,oDAAC;AAEhC,IAAA,IAAI,SAAS,GAAA;AACX,QAAA,OAAO,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE;;IAGnC,IAAI,GAAA;AACF,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC;;IAGzB,OAAO,GAAA;AACL,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC;;uGAZf,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;AAAV,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAU,cADG,MAAM,EAAA,CAAA;;2FACnB,UAAU,EAAA,UAAA,EAAA,CAAA;kBADtB,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE;;;MCQrB,iBAAiB,CAAA;AAC5B,IAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;uGADpB,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,wBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECV9B,iMAIA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDIY,MAAM,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,MAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAEL,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAN7B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,wBAAwB,mBAEjB,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,MAAM,CAAC,EAAA,QAAA,EAAA,iMAAA,EAAA;;;AERnB;;AAEG;;;;"}
+{"version":3,"file":"koalarx-ui-core-components-loader-page.mjs","sources":["../../projects/koala-ui/core/components/loader-page/loader-page.ts","../../projects/koala-ui/core/components/loader-page/loader-page-content.ts","../../projects/koala-ui/core/components/loader-page/loader-page-content.html","../../projects/koala-ui/core/components/loader-page/koalarx-ui-core-components-loader-page.ts"],"sourcesContent":["import { Injectable, signal } from '@angular/core';\n\n@Injectable({ providedIn: 'root' })\nexport class LoaderPage {\n  private _loading = signal(false);\n\n  get isLoading() {\n    return this._loading.asReadonly();\n  }\n\n  show() {\n    this._loading.set(true);\n  }\n\n  dismiss() {\n    this._loading.set(false);\n  }\n}\n","import { ChangeDetectionStrategy, Component, inject } from '@angular/core';\nimport { Loader } from '@koalarx/ui/core/components/loader';\nimport { LoaderPage } from './loader-page';\n\n@Component({\n  selector: 'kl-loader-page-content',\n  templateUrl: './loader-page-content.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [Loader],\n})\nexport class LoaderPageContent {\n  loaderPage = inject(LoaderPage);\n}\n","<div class=\"fixed bg-base-100/40 flex w-full h-full items-center justify-center z-10001\"\n  [class]=\"{ 'hidden': !loaderPage.isLoading() }\">\n  <kl-loader size=\"extraLarge\" />\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAGa,UAAU,CAAA;AACb,IAAA,QAAQ,GAAG,MAAM,CAAC,KAAK,oDAAC;AAEhC,IAAA,IAAI,SAAS,GAAA;AACX,QAAA,OAAO,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE;;IAGnC,IAAI,GAAA;AACF,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC;;IAGzB,OAAO,GAAA;AACL,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC;;uGAZf,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;AAAV,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAU,cADG,MAAM,EAAA,CAAA;;2FACnB,UAAU,EAAA,UAAA,EAAA,CAAA;kBADtB,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE;;;MCQrB,iBAAiB,CAAA;AAC5B,IAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;uGADpB,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,wBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECV9B,iMAIA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDIY,MAAM,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,MAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAEL,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAN7B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,wBAAwB,mBAEjB,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,MAAM,CAAC,EAAA,QAAA,EAAA,iMAAA,EAAA;;;AERnB;;AAEG;;;;"}

package/fesm2022/koalarx-ui-shared-components-side-window.mjs

@@ -4,11 +4,11 @@ import { randomString } from '@koalarx/utils/KlString';
 
 class SideWindowContent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SideWindowContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: SideWindowContent, isStandalone: true, selector: "kl-side-window-content", ngImport: i0, template: "<div class=\"fixed flex z-10000 bg-base-100/20 h-screen w-screen justify-end p-2\">\n  <div class=\"w-auto h-full bg-base-200 rounded-xl shadow-2xl border-4 border-neutral-200 dark:border-neutral-900 animate-slide-in-left\">\n    <ng-content />\n  </div>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: SideWindowContent, isStandalone: true, selector: "kl-side-window-content", ngImport: i0, template: "<div class=\"fixed flex z-10000 bg-base-100/20 h-screen w-screen justify-end p-2\">\n  <div class=\"side-window-content w-auto h-full bg-base-200 rounded-xl shadow-2xl border-4 border-neutral-200 dark:border-neutral-900 animate-slide-in-left\">\n    <ng-content />\n  </div>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SideWindowContent, decorators: [{
             type: Component,
-            args: [{ selector: 'kl-side-window-content', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fixed flex z-10000 bg-base-100/20 h-screen w-screen justify-end p-2\">\n  <div class=\"w-auto h-full bg-base-200 rounded-xl shadow-2xl border-4 border-neutral-200 dark:border-neutral-900 animate-slide-in-left\">\n    <ng-content />\n  </div>\n</div>\n" }]
+            args: [{ selector: 'kl-side-window-content', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fixed flex z-10000 bg-base-100/20 h-screen w-screen justify-end p-2\">\n  <div class=\"side-window-content w-auto h-full bg-base-200 rounded-xl shadow-2xl border-4 border-neutral-200 dark:border-neutral-900 animate-slide-in-left\">\n    <ng-content />\n  </div>\n</div>\n" }]
         }] });
 
 const SIDE_WINDOW_CONFIG = new InjectionToken('SideWindowConfig');
@@ -89,6 +89,27 @@ class SideWindowRef {
     appRef = inject(SIDE_WINDOW_APP_REF);
     componentRef = inject(SIDE_WINDOW_REF_TOKEN);
     afterCloseTrigger = inject(SIDE_WINDOW_AFTER_CLOSE_TRIGGER);
+    onKeyUp = (event) => {
+        if (event.key === 'Escape') {
+            this.dismiss();
+        }
+    };
+    onClick = (event) => {
+        const contentElement = this.componentRef().location.nativeElement.querySelector('.side-window-content');
+        if (contentElement && !contentElement.contains(event.target)) {
+            this.dismiss();
+        }
+    };
+    constructor() {
+        setTimeout(() => {
+            document.addEventListener('keyup', this.onKeyUp);
+            document.addEventListener('click', this.onClick);
+        }, 150);
+    }
+    ngOnDestroy() {
+        document.removeEventListener('keyup', this.onKeyUp);
+        document.removeEventListener('click', this.onClick);
+    }
     dismiss(afterCloseTrigger) {
         const componentRef = this.componentRef();
         componentRef.location.nativeElement
@@ -108,7 +129,7 @@ class SideWindowRef {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SideWindowRef, decorators: [{
             type: Injectable
-        }] });
+        }], ctorParameters: () => [] });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/koalarx-ui-shared-components-side-window.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"koalarx-ui-shared-components-side-window.mjs","sources":["../../projects/koala-ui/shared/components/side-window/side-window-content.ts","../../projects/koala-ui/shared/components/side-window/side-window-content.html","../../projects/koala-ui/shared/components/side-window/side-window.ts","../../projects/koala-ui/shared/components/side-window/side-window-ref.ts","../../projects/koala-ui/shared/components/side-window/koalarx-ui-shared-components-side-window.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n  selector: 'kl-side-window-content',\n  templateUrl: './side-window-content.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SideWindowContent {}\n","<div class=\"fixed flex z-10000 bg-base-100/20 h-screen w-screen justify-end p-2\">\n  <div class=\"w-auto h-full bg-base-200 rounded-xl shadow-2xl border-4 border-neutral-200 dark:border-neutral-900 animate-slide-in-left\">\n    <ng-content />\n  </div>\n</div>\n","import {\n  ApplicationRef,\n  createComponent,\n  EnvironmentInjector,\n  inject,\n  Injectable,\n  InjectionToken,\n  Injector,\n  Type,\n} from '@angular/core';\nimport { randomString } from '@koalarx/utils/KlString';\nimport { SIDE_WINDOW_REF_TOKEN, SideWindowRef } from './side-window-ref';\n\nexport type SideWindowAfterCloseTrigger = string | Record<string, any>;\nexport type SideWindowAfterCloseTriggerFn = (\n  trigger: SideWindowAfterCloseTrigger\n) => void;\nexport const SIDE_WINDOW_CONFIG = new InjectionToken('SideWindowConfig');\nexport const SIDE_WINDOW_DATA = new InjectionToken('SideWindowData');\nexport const SIDE_WINDOW_APP_REF = new InjectionToken('SideWindowAppRef');\nexport const SIDE_WINDOW_AFTER_CLOSE_TRIGGER =\n  new InjectionToken<SideWindowAfterCloseTriggerFn>(\n    'SideWindowAfterCloseTrigger'\n  );\n\nexport interface SideWindowConfig {\n  data?: any;\n  afterClosed?: {\n    trigger: SideWindowAfterCloseTrigger;\n    callback: (trigger: any) => void;\n  };\n}\n\n@Injectable({ providedIn: 'root' })\nexport class SideWindow {\n  private readonly appRef = inject(ApplicationRef);\n  private readonly injector = inject(EnvironmentInjector);\n\n  private generateElementId() {\n    let elementId: string;\n\n    do {\n      elementId = randomString(50, {\n        numbers: false,\n        lowercase: true,\n        uppercase: true,\n        specialCharacters: false,\n      });\n    } while (document.getElementById(elementId));\n\n    return elementId;\n  }\n\n  open(component: Type<any>, config?: SideWindowConfig) {\n    const main = document.querySelector<HTMLElement>(\n      'kl-side-window-container .side-window-container'\n    );\n\n    if (main) {\n      const elementId = this.generateElementId();\n      const container = main.appendChild(document.createElement('div'));\n\n      container.id = elementId;\n\n      const componentRef = createComponent(component, {\n        environmentInjector: this.injector,\n        hostElement: container,\n        elementInjector: Injector.create({\n          providers: [\n            { provide: SIDE_WINDOW_CONFIG, useValue: config },\n            { provide: SIDE_WINDOW_APP_REF, useValue: this.appRef },\n            {\n              provide: SIDE_WINDOW_REF_TOKEN,\n              useValue: () => componentRef,\n            },\n            { provide: SIDE_WINDOW_DATA, useValue: config?.data },\n            {\n              provide: SIDE_WINDOW_AFTER_CLOSE_TRIGGER,\n              useValue: (trigger: SideWindowAfterCloseTrigger) => {\n                if (\n                  config?.afterClosed &&\n                  (config.afterClosed.trigger === trigger ||\n                    typeof trigger === 'object')\n                ) {\n                  config.afterClosed.callback(trigger);\n                }\n              },\n            },\n            {\n              provide: SideWindowRef,\n              deps: [\n                SIDE_WINDOW_CONFIG,\n                SIDE_WINDOW_APP_REF,\n                SIDE_WINDOW_REF_TOKEN,\n                SIDE_WINDOW_AFTER_CLOSE_TRIGGER,\n                SIDE_WINDOW_DATA,\n              ],\n            },\n          ],\n        }),\n      });\n\n      this.appRef.attachView(componentRef.hostView);\n\n      componentRef.changeDetectorRef.detectChanges();\n\n      document.body.style.overflowY = 'hidden';\n    }\n  }\n}\n","import {\n  ApplicationRef,\n  ComponentRef,\n  inject,\n  Injectable,\n  InjectionToken,\n  Type,\n} from '@angular/core';\nimport {\n  SIDE_WINDOW_AFTER_CLOSE_TRIGGER,\n  SIDE_WINDOW_APP_REF,\n  SideWindowAfterCloseTrigger,\n  SideWindowAfterCloseTriggerFn,\n} from './side-window';\n\nexport const SIDE_WINDOW_REF_TOKEN = new InjectionToken('SideWindowRefToken');\n\n@Injectable()\nexport class SideWindowRef {\n  private readonly appRef = inject<ApplicationRef>(SIDE_WINDOW_APP_REF);\n  private readonly componentRef = inject<() => ComponentRef<Type<any>>>(\n    SIDE_WINDOW_REF_TOKEN\n  );\n  private readonly afterCloseTrigger = inject<SideWindowAfterCloseTriggerFn>(\n    SIDE_WINDOW_AFTER_CLOSE_TRIGGER\n  );\n\n  dismiss(afterCloseTrigger?: SideWindowAfterCloseTrigger) {\n    const componentRef = this.componentRef();\n    componentRef.location.nativeElement\n      .querySelector('div div')\n      .classList.add('animate-slide-out-right');\n\n    document.body.style.overflowY = 'auto';\n\n    setTimeout(() => {\n      componentRef.destroy();\n      this.appRef.detachView(componentRef.hostView);\n\n      if (afterCloseTrigger) {\n        this.afterCloseTrigger(afterCloseTrigger);\n      }\n    }, 50);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"koalarx-ui-shared-components-side-window.mjs","sources":["../../projects/koala-ui/shared/components/side-window/side-window-content.ts","../../projects/koala-ui/shared/components/side-window/side-window-content.html","../../projects/koala-ui/shared/components/side-window/side-window.ts","../../projects/koala-ui/shared/components/side-window/side-window-ref.ts","../../projects/koala-ui/shared/components/side-window/koalarx-ui-shared-components-side-window.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n  selector: 'kl-side-window-content',\n  templateUrl: './side-window-content.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SideWindowContent {}\n","<div class=\"fixed flex z-10000 bg-base-100/20 h-screen w-screen justify-end p-2\">\n  <div class=\"side-window-content w-auto h-full bg-base-200 rounded-xl shadow-2xl border-4 border-neutral-200 dark:border-neutral-900 animate-slide-in-left\">\n    <ng-content />\n  </div>\n</div>\n","import {\n  ApplicationRef,\n  createComponent,\n  EnvironmentInjector,\n  inject,\n  Injectable,\n  InjectionToken,\n  Injector,\n  Type,\n} from '@angular/core';\nimport { randomString } from '@koalarx/utils/KlString';\nimport { SIDE_WINDOW_REF_TOKEN, SideWindowRef } from './side-window-ref';\n\nexport type SideWindowAfterCloseTrigger = string | Record<string, any>;\nexport type SideWindowAfterCloseTriggerFn = (\n  trigger: SideWindowAfterCloseTrigger\n) => void;\nexport const SIDE_WINDOW_CONFIG = new InjectionToken('SideWindowConfig');\nexport const SIDE_WINDOW_DATA = new InjectionToken('SideWindowData');\nexport const SIDE_WINDOW_APP_REF = new InjectionToken('SideWindowAppRef');\nexport const SIDE_WINDOW_AFTER_CLOSE_TRIGGER =\n  new InjectionToken<SideWindowAfterCloseTriggerFn>(\n    'SideWindowAfterCloseTrigger'\n  );\n\nexport interface SideWindowConfig {\n  data?: any;\n  afterClosed?: {\n    trigger: SideWindowAfterCloseTrigger;\n    callback: (trigger: any) => void;\n  };\n}\n\n@Injectable({ providedIn: 'root' })\nexport class SideWindow {\n  private readonly appRef = inject(ApplicationRef);\n  private readonly injector = inject(EnvironmentInjector);\n\n  private generateElementId() {\n    let elementId: string;\n\n    do {\n      elementId = randomString(50, {\n        numbers: false,\n        lowercase: true,\n        uppercase: true,\n        specialCharacters: false,\n      });\n    } while (document.getElementById(elementId));\n\n    return elementId;\n  }\n\n  open(component: Type<any>, config?: SideWindowConfig) {\n    const main = document.querySelector<HTMLElement>(\n      'kl-side-window-container .side-window-container'\n    );\n\n    if (main) {\n      const elementId = this.generateElementId();\n      const container = main.appendChild(document.createElement('div'));\n\n      container.id = elementId;\n\n      const componentRef = createComponent(component, {\n        environmentInjector: this.injector,\n        hostElement: container,\n        elementInjector: Injector.create({\n          providers: [\n            { provide: SIDE_WINDOW_CONFIG, useValue: config },\n            { provide: SIDE_WINDOW_APP_REF, useValue: this.appRef },\n            {\n              provide: SIDE_WINDOW_REF_TOKEN,\n              useValue: () => componentRef,\n            },\n            { provide: SIDE_WINDOW_DATA, useValue: config?.data },\n            {\n              provide: SIDE_WINDOW_AFTER_CLOSE_TRIGGER,\n              useValue: (trigger: SideWindowAfterCloseTrigger) => {\n                if (\n                  config?.afterClosed &&\n                  (config.afterClosed.trigger === trigger ||\n                    typeof trigger === 'object')\n                ) {\n                  config.afterClosed.callback(trigger);\n                }\n              },\n            },\n            {\n              provide: SideWindowRef,\n              deps: [\n                SIDE_WINDOW_CONFIG,\n                SIDE_WINDOW_APP_REF,\n                SIDE_WINDOW_REF_TOKEN,\n                SIDE_WINDOW_AFTER_CLOSE_TRIGGER,\n                SIDE_WINDOW_DATA,\n              ],\n            },\n          ],\n        }),\n      });\n\n      this.appRef.attachView(componentRef.hostView);\n\n      componentRef.changeDetectorRef.detectChanges();\n\n      document.body.style.overflowY = 'hidden';\n    }\n  }\n}\n","import {\n  ApplicationRef,\n  ComponentRef,\n  inject,\n  Injectable,\n  InjectionToken,\n  OnDestroy,\n  Type,\n} from '@angular/core';\nimport {\n  SIDE_WINDOW_AFTER_CLOSE_TRIGGER,\n  SIDE_WINDOW_APP_REF,\n  SideWindowAfterCloseTrigger,\n  SideWindowAfterCloseTriggerFn,\n} from './side-window';\n\nexport const SIDE_WINDOW_REF_TOKEN = new InjectionToken('SideWindowRefToken');\n\n@Injectable()\nexport class SideWindowRef implements OnDestroy {\n  private readonly appRef = inject<ApplicationRef>(SIDE_WINDOW_APP_REF);\n  private readonly componentRef = inject<() => ComponentRef<Type<any>>>(\n    SIDE_WINDOW_REF_TOKEN,\n  );\n  private readonly afterCloseTrigger = inject<SideWindowAfterCloseTriggerFn>(\n    SIDE_WINDOW_AFTER_CLOSE_TRIGGER,\n  );\n  private readonly onKeyUp = (event: KeyboardEvent) => {\n    if (event.key === 'Escape') {\n      this.dismiss();\n    }\n  };\n  private readonly onClick = (event: MouseEvent) => {\n    const contentElement =\n      this.componentRef().location.nativeElement.querySelector(\n        '.side-window-content',\n      );\n    if (contentElement && !contentElement.contains(event.target as Node)) {\n      this.dismiss();\n    }\n  };\n\n  constructor() {\n    setTimeout(() => {\n      document.addEventListener('keyup', this.onKeyUp);\n      document.addEventListener('click', this.onClick);\n    }, 150);\n  }\n\n  ngOnDestroy() {\n    document.removeEventListener('keyup', this.onKeyUp);\n    document.removeEventListener('click', this.onClick);\n  }\n\n  dismiss(afterCloseTrigger?: SideWindowAfterCloseTrigger) {\n    const componentRef = this.componentRef();\n    componentRef.location.nativeElement\n      .querySelector('div div')\n      .classList.add('animate-slide-out-right');\n\n    document.body.style.overflowY = 'auto';\n\n    setTimeout(() => {\n      componentRef.destroy();\n      this.appRef.detachView(componentRef.hostView);\n\n      if (afterCloseTrigger) {\n        this.afterCloseTrigger(afterCloseTrigger);\n      }\n    }, 50);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koalarx/ui",
-  "version": "21.1.17",
+  "version": "21.1.19",
   "peerDependencies": {
     "@angular/common": ">=21.0.0",
     "@angular/core": ">=21.0.0"

package/types/koalarx-ui-shared-components-side-window.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Type } from '@angular/core';
+import { InjectionToken, Type, OnDestroy } from '@angular/core';
 
 declare class SideWindowContent {
     static ɵfac: i0.ɵɵFactoryDeclaration<SideWindowContent, never>;
@@ -29,10 +29,14 @@ declare class SideWindow {
 }
 
 declare const SIDE_WINDOW_REF_TOKEN: InjectionToken<unknown>;
-declare class SideWindowRef {
+declare class SideWindowRef implements OnDestroy {
     private readonly appRef;
     private readonly componentRef;
     private readonly afterCloseTrigger;
+    private readonly onKeyUp;
+    private readonly onClick;
+    constructor();
+    ngOnDestroy(): void;
     dismiss(afterCloseTrigger?: SideWindowAfterCloseTrigger): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SideWindowRef, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<SideWindowRef>;