@koalarx/ui 20.2.7 → 20.2.9

package/fesm2022/koalarx-ui-shared-components-on-this-page.mjs

@@ -7,8 +7,8 @@ import { AppConfig } from '@koalarx/ui/core/config';
 class OnThisPage {
     router = inject(Router);
     translations = inject(AppConfig).translation.onThisPage;
-    links = input.required();
-    activeSection = signal(null);
+    links = input.required(...(ngDevMode ? [{ debugName: "links" }] : []));
+    activeSection = signal(null, ...(ngDevMode ? [{ debugName: "activeSection" }] : []));
     linkSections = linkedSignal(() => {
         const links = this.links();
         const currentSection = this.activeSection();
@@ -63,10 +63,10 @@ class OnThisPage {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: OnThisPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: OnThisPage, isStandalone: true, selector: "kl-on-this-page", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"fixed\">\n  <small class=\"opacity-70\">\n    <ng-content select=\"[title]\">\n      {{translations.title}}\n    </ng-content>\n  </small>\n\n  <div class=\"flex flex-col gap-2 mt-2\">\n    @for (item of linkSections(); track $index) {\n      <a class=\"hover:cursor-pointer hover:opacity-90 transition duration-100 opacity-60\" [class]=\"{'opacity-100': item.isActive}\" (click)=\"scrollTo(item.elementId)\">\n        {{ item.label }}\n      </a>\n    }\n  </div>\n</div>\n" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: OnThisPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: OnThisPage, isStandalone: true, selector: "kl-on-this-page", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"fixed\">\n  <small class=\"opacity-70\">\n    <ng-content select=\"[title]\">\n      {{translations.title}}\n    </ng-content>\n  </small>\n\n  <div class=\"flex flex-col gap-2 mt-2\">\n    @for (item of linkSections(); track $index) {\n      <a class=\"hover:cursor-pointer hover:opacity-90 transition duration-100 opacity-60\" [class]=\"{'opacity-100': item.isActive}\" (click)=\"scrollTo(item.elementId)\">\n        {{ item.label }}\n      </a>\n    }\n  </div>\n</div>\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: OnThisPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: OnThisPage, decorators: [{
             type: Component,
             args: [{ selector: 'kl-on-this-page', template: "<div class=\"fixed\">\n  <small class=\"opacity-70\">\n    <ng-content select=\"[title]\">\n      {{translations.title}}\n    </ng-content>\n  </small>\n\n  <div class=\"flex flex-col gap-2 mt-2\">\n    @for (item of linkSections(); track $index) {\n      <a class=\"hover:cursor-pointer hover:opacity-90 transition duration-100 opacity-60\" [class]=\"{'opacity-100': item.isActive}\" (click)=\"scrollTo(item.elementId)\">\n        {{ item.label }}\n      </a>\n    }\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [] });

package/fesm2022/koalarx-ui-shared-components-on-this-page.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"koalarx-ui-shared-components-on-this-page.mjs","sources":["../../projects/koala-ui/shared/components/on-this-page/on-this-page.ts","../../projects/koala-ui/shared/components/on-this-page/on-this-page.html","../../projects/koala-ui/shared/components/on-this-page/koalarx-ui-shared-components-on-this-page.ts"],"sourcesContent":["import {\n  Component,\n  inject,\n  input,\n  linkedSignal,\n  OnDestroy,\n  OnInit,\n  signal,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { NavigationEnd, Router } from '@angular/router';\nimport { AppConfig } from '@koalarx/ui/core/config';\n\nexport interface OnThisPageLink {\n  label: string;\n  elementId: string;\n}\n\n@Component({\n  selector: 'kl-on-this-page',\n  templateUrl: './on-this-page.html',\n})\nexport class OnThisPage implements OnInit, OnDestroy {\n  private readonly router = inject(Router);\n\n  readonly translations = inject(AppConfig).translation.onThisPage;\n\n  links = input.required<OnThisPageLink[]>();\n  activeSection = signal<string | null>(null);\n\n  linkSections = linkedSignal(() => {\n    const links = this.links();\n    const currentSection = this.activeSection();\n\n    return links.map((link) => ({\n      label: link.label,\n      elementId: link.elementId,\n      isActive: link.elementId === currentSection,\n    }));\n  });\n\n  private onScroll = () => {\n    const links = this.links();\n    let current: string | null = null;\n    for (const link of links) {\n      const el = document.getElementById(link.elementId);\n      if (el) {\n        const rect = el.getBoundingClientRect();\n        if (rect.top <= 250) {\n          current = link.elementId;\n        }\n      }\n    }\n    if (current) {\n      this.activeSection.set(current);\n    }\n  };\n\n  constructor() {\n    this.router.events.pipe(takeUntilDestroyed()).subscribe((event) => {\n      if (event instanceof NavigationEnd) {\n        window.scrollTo({ top: 0 });\n      }\n    });\n  }\n\n  ngOnDestroy(): void {\n    window.removeEventListener('scroll', this.onScroll);\n  }\n\n  ngOnInit(): void {\n    this.activeSection.set(\n      location.hash.match(/#[a-zA-Z]+/)?.[0]?.replace(/#/g, '') || null\n    );\n    window.addEventListener('scroll', this.onScroll, { passive: true });\n  }\n\n  scrollTo(elementId: string) {\n    const element = document.getElementById(elementId);\n    if (element) {\n      this.activeSection.set(elementId);\n      const link = location.hash.match(/#[a-zA-Z]+/)\n        ? location.hash.replace(/#([^#]*)$/, `#${elementId}`)\n        : `${location.hash}#${elementId}`;\n\n      history.pushState({}, '', link);\n\n      const scrollPosition =\n        element.getBoundingClientRect().top + window.scrollY - 100;\n\n      window.scrollTo({\n        top: scrollPosition,\n        behavior: 'smooth',\n      });\n    }\n  }\n}\n","<div class=\"fixed\">\n  <small class=\"opacity-70\">\n    <ng-content select=\"[title]\">\n      {{translations.title}}\n    </ng-content>\n  </small>\n\n  <div class=\"flex flex-col gap-2 mt-2\">\n    @for (item of linkSections(); track $index) {\n      <a class=\"hover:cursor-pointer hover:opacity-90 transition duration-100 opacity-60\" [class]=\"{'opacity-100': item.isActive}\" (click)=\"scrollTo(item.elementId)\">\n        {{ item.label }}\n      </a>\n    }\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;MAsBa,UAAU,CAAA;AACJ,IAAA,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;IAE/B,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,UAAU;AAEhE,IAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,EAAoB;AAC1C,IAAA,aAAa,GAAG,MAAM,CAAgB,IAAI,CAAC;AAE3C,IAAA,YAAY,GAAG,YAAY,CAAC,MAAK;AAC/B,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE;AAC1B,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,aAAa,EAAE;QAE3C,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,MAAM;YAC1B,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,SAAS,EAAE,IAAI,CAAC,SAAS;AACzB,YAAA,QAAQ,EAAE,IAAI,CAAC,SAAS,KAAK,cAAc;AAC5C,SAAA,CAAC,CAAC;AACL,KAAC,CAAC;IAEM,QAAQ,GAAG,MAAK;AACtB,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE;QAC1B,IAAI,OAAO,GAAkB,IAAI;AACjC,QAAA,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;YACxB,MAAM,EAAE,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC;YAClD,IAAI,EAAE,EAAE;AACN,gBAAA,MAAM,IAAI,GAAG,EAAE,CAAC,qBAAqB,EAAE;AACvC,gBAAA,IAAI,IAAI,CAAC,GAAG,IAAI,GAAG,EAAE;AACnB,oBAAA,OAAO,GAAG,IAAI,CAAC,SAAS;;;;QAI9B,IAAI,OAAO,EAAE;AACX,YAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,OAAO,CAAC;;AAEnC,KAAC;AAED,IAAA,WAAA,GAAA;AACE,QAAA,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,KAAK,KAAI;AAChE,YAAA,IAAI,KAAK,YAAY,aAAa,EAAE;gBAClC,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC;;AAE/B,SAAC,CAAC;;IAGJ,WAAW,GAAA;QACT,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC;;IAGrD,QAAQ,GAAA;QACN,IAAI,CAAC,aAAa,CAAC,GAAG,CACpB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,IAAI,CAClE;AACD,QAAA,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;;AAGrE,IAAA,QAAQ,CAAC,SAAiB,EAAA;QACxB,MAAM,OAAO,GAAG,QAAQ,CAAC,cAAc,CAAC,SAAS,CAAC;QAClD,IAAI,OAAO,EAAE;AACX,YAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,SAAS,CAAC;YACjC,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY;AAC3C,kBAAE,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,CAAA,CAAA,EAAI,SAAS,CAAA,CAAE;kBAClD,GAAG,QAAQ,CAAC,IAAI,CAAI,CAAA,EAAA,SAAS,EAAE;YAEnC,OAAO,CAAC,SAAS,CAAC,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC;AAE/B,YAAA,MAAM,cAAc,GAClB,OAAO,CAAC,qBAAqB,EAAE,CAAC,GAAG,GAAG,MAAM,CAAC,OAAO,GAAG,GAAG;YAE5D,MAAM,CAAC,QAAQ,CAAC;AACd,gBAAA,GAAG,EAAE,cAAc;AACnB,gBAAA,QAAQ,EAAE,QAAQ;AACnB,aAAA,CAAC;;;uGAvEK,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAU,8MCtBvB,yeAeA,EAAA,CAAA;;2FDOa,UAAU,EAAA,UAAA,EAAA,CAAA;kBAJtB,SAAS;+BACE,iBAAiB,EAAA,QAAA,EAAA,yeAAA,EAAA;;;AEnB7B;;AAEG;;;;"}
+{"version":3,"file":"koalarx-ui-shared-components-on-this-page.mjs","sources":["../../projects/koala-ui/shared/components/on-this-page/on-this-page.ts","../../projects/koala-ui/shared/components/on-this-page/on-this-page.html","../../projects/koala-ui/shared/components/on-this-page/koalarx-ui-shared-components-on-this-page.ts"],"sourcesContent":["import {\n  Component,\n  inject,\n  input,\n  linkedSignal,\n  OnDestroy,\n  OnInit,\n  signal,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { NavigationEnd, Router } from '@angular/router';\nimport { AppConfig } from '@koalarx/ui/core/config';\n\nexport interface OnThisPageLink {\n  label: string;\n  elementId: string;\n}\n\n@Component({\n  selector: 'kl-on-this-page',\n  templateUrl: './on-this-page.html',\n})\nexport class OnThisPage implements OnInit, OnDestroy {\n  private readonly router = inject(Router);\n\n  readonly translations = inject(AppConfig).translation.onThisPage;\n\n  links = input.required<OnThisPageLink[]>();\n  activeSection = signal<string | null>(null);\n\n  linkSections = linkedSignal(() => {\n    const links = this.links();\n    const currentSection = this.activeSection();\n\n    return links.map((link) => ({\n      label: link.label,\n      elementId: link.elementId,\n      isActive: link.elementId === currentSection,\n    }));\n  });\n\n  private onScroll = () => {\n    const links = this.links();\n    let current: string | null = null;\n    for (const link of links) {\n      const el = document.getElementById(link.elementId);\n      if (el) {\n        const rect = el.getBoundingClientRect();\n        if (rect.top <= 250) {\n          current = link.elementId;\n        }\n      }\n    }\n    if (current) {\n      this.activeSection.set(current);\n    }\n  };\n\n  constructor() {\n    this.router.events.pipe(takeUntilDestroyed()).subscribe((event) => {\n      if (event instanceof NavigationEnd) {\n        window.scrollTo({ top: 0 });\n      }\n    });\n  }\n\n  ngOnDestroy(): void {\n    window.removeEventListener('scroll', this.onScroll);\n  }\n\n  ngOnInit(): void {\n    this.activeSection.set(\n      location.hash.match(/#[a-zA-Z]+/)?.[0]?.replace(/#/g, '') || null\n    );\n    window.addEventListener('scroll', this.onScroll, { passive: true });\n  }\n\n  scrollTo(elementId: string) {\n    const element = document.getElementById(elementId);\n    if (element) {\n      this.activeSection.set(elementId);\n      const link = location.hash.match(/#[a-zA-Z]+/)\n        ? location.hash.replace(/#([^#]*)$/, `#${elementId}`)\n        : `${location.hash}#${elementId}`;\n\n      history.pushState({}, '', link);\n\n      const scrollPosition =\n        element.getBoundingClientRect().top + window.scrollY - 100;\n\n      window.scrollTo({\n        top: scrollPosition,\n        behavior: 'smooth',\n      });\n    }\n  }\n}\n","<div class=\"fixed\">\n  <small class=\"opacity-70\">\n    <ng-content select=\"[title]\">\n      {{translations.title}}\n    </ng-content>\n  </small>\n\n  <div class=\"flex flex-col gap-2 mt-2\">\n    @for (item of linkSections(); track $index) {\n      <a class=\"hover:cursor-pointer hover:opacity-90 transition duration-100 opacity-60\" [class]=\"{'opacity-100': item.isActive}\" (click)=\"scrollTo(item.elementId)\">\n        {{ item.label }}\n      </a>\n    }\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;MAsBa,UAAU,CAAA;AACJ,IAAA,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;IAE/B,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,UAAU;AAEhE,IAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,gDAAoB;AAC1C,IAAA,aAAa,GAAG,MAAM,CAAgB,IAAI,yDAAC;AAE3C,IAAA,YAAY,GAAG,YAAY,CAAC,MAAK;AAC/B,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE;AAC1B,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,aAAa,EAAE;QAE3C,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,MAAM;YAC1B,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,SAAS,EAAE,IAAI,CAAC,SAAS;AACzB,YAAA,QAAQ,EAAE,IAAI,CAAC,SAAS,KAAK,cAAc;AAC5C,SAAA,CAAC,CAAC;AACL,KAAC,CAAC;IAEM,QAAQ,GAAG,MAAK;AACtB,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE;QAC1B,IAAI,OAAO,GAAkB,IAAI;AACjC,QAAA,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;YACxB,MAAM,EAAE,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC;YAClD,IAAI,EAAE,EAAE;AACN,gBAAA,MAAM,IAAI,GAAG,EAAE,CAAC,qBAAqB,EAAE;AACvC,gBAAA,IAAI,IAAI,CAAC,GAAG,IAAI,GAAG,EAAE;AACnB,oBAAA,OAAO,GAAG,IAAI,CAAC,SAAS;;;;QAI9B,IAAI,OAAO,EAAE;AACX,YAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,OAAO,CAAC;;AAEnC,KAAC;AAED,IAAA,WAAA,GAAA;AACE,QAAA,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,KAAK,KAAI;AAChE,YAAA,IAAI,KAAK,YAAY,aAAa,EAAE;gBAClC,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC;;AAE/B,SAAC,CAAC;;IAGJ,WAAW,GAAA;QACT,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC;;IAGrD,QAAQ,GAAA;QACN,IAAI,CAAC,aAAa,CAAC,GAAG,CACpB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,IAAI,CAClE;AACD,QAAA,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;;AAGrE,IAAA,QAAQ,CAAC,SAAiB,EAAA;QACxB,MAAM,OAAO,GAAG,QAAQ,CAAC,cAAc,CAAC,SAAS,CAAC;QAClD,IAAI,OAAO,EAAE;AACX,YAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,SAAS,CAAC;YACjC,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY;AAC3C,kBAAE,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,CAAA,CAAA,EAAI,SAAS,CAAA,CAAE;kBAClD,GAAG,QAAQ,CAAC,IAAI,CAAA,CAAA,EAAI,SAAS,EAAE;YAEnC,OAAO,CAAC,SAAS,CAAC,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC;AAE/B,YAAA,MAAM,cAAc,GAClB,OAAO,CAAC,qBAAqB,EAAE,CAAC,GAAG,GAAG,MAAM,CAAC,OAAO,GAAG,GAAG;YAE5D,MAAM,CAAC,QAAQ,CAAC;AACd,gBAAA,GAAG,EAAE,cAAc;AACnB,gBAAA,QAAQ,EAAE,QAAQ;AACnB,aAAA,CAAC;;;uGAvEK,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAU,8MCtBvB,yeAeA,EAAA,CAAA;;2FDOa,UAAU,EAAA,UAAA,EAAA,CAAA;kBAJtB,SAAS;+BACE,iBAAiB,EAAA,QAAA,EAAA,yeAAA,EAAA;;;AEnB7B;;AAEG;;;;"}

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

@@ -3,10 +3,10 @@ import { Component, InjectionToken, inject, ApplicationRef, EnvironmentInjector,
 import { randomString } from '@koalarx/utils/KlString';
 
 class SideWindowContent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SideWindowContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.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" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SideWindowContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.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" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SideWindowContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SideWindowContent, decorators: [{
             type: Component,
             args: [{ selector: 'kl-side-window-content', 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" }]
         }] });
@@ -76,10 +76,10 @@ class SideWindow {
             document.body.style.overflowY = 'hidden';
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SideWindow, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SideWindow, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SideWindow, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SideWindow, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SideWindow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SideWindow, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -103,10 +103,10 @@ class SideWindowRef {
             }
         }, 50);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SideWindowRef, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SideWindowRef });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SideWindowRef, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SideWindowRef });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SideWindowRef, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SideWindowRef, decorators: [{
             type: Injectable
         }] });
 

package/fesm2022/koalarx-ui-shared-components-snackbar.mjs

@@ -84,10 +84,10 @@ class Snackbar {
             componentRef.changeDetectorRef.detectChanges();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Snackbar, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Snackbar, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: Snackbar, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: Snackbar, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Snackbar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: Snackbar, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -100,21 +100,21 @@ class SnackbarRef {
         this.componentRef().destroy();
         this.appRef.detachView(this.componentRef().hostView);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SnackbarRef, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SnackbarRef });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SnackbarRef, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SnackbarRef });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SnackbarRef, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SnackbarRef, decorators: [{
             type: Injectable
         }] });
 
 class SnackbarContent {
-    alertContentRef = viewChild('alertContent');
-    alertIconRef = viewChild('alertIcon');
+    alertContentRef = viewChild('alertContent', ...(ngDevMode ? [{ debugName: "alertContentRef" }] : []));
+    alertIconRef = viewChild('alertIcon', ...(ngDevMode ? [{ debugName: "alertIconRef" }] : []));
     snackbarRef = inject(SnackbarRef);
-    type = input.required();
-    message = input.required();
-    timeout = input(0);
-    timePast = signal(0);
+    type = input.required(...(ngDevMode ? [{ debugName: "type" }] : []));
+    message = input.required(...(ngDevMode ? [{ debugName: "message" }] : []));
+    timeout = input(0, ...(ngDevMode ? [{ debugName: "timeout" }] : []));
+    timePast = signal(0, ...(ngDevMode ? [{ debugName: "timePast" }] : []));
     constructor() {
         effect(() => this.addAlertClass());
         effect(() => this.addIconClass());
@@ -177,10 +177,10 @@ class SnackbarContent {
     dismiss() {
         this.snackbarRef.dismiss();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SnackbarContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SnackbarContent, isStandalone: true, selector: "kl-snackbar-content", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, timeout: { classPropertyName: "timeout", publicName: "timeout", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "alertContentRef", first: true, predicate: ["alertContent"], descendants: true, isSignal: true }, { propertyName: "alertIconRef", first: true, predicate: ["alertIcon"], descendants: true, isSignal: true }], ngImport: i0, template: "<div role=\"alert\" #alertContent class=\"relative alert alert-outline bg-base-100! w-full lg:max-w-1/4 rounded-sm text-sm py-3 border-neutral-600\">\n  <i #alertIcon class=\"h-4 w-4 shrink-0 stroke-current text-base fa-solid\"></i>\n  <span [innerHTML]=\"message()\"></span>\n  <div>\n    <button class=\"btn btn-xs btn-outline\" (click)=\"dismiss()\">OK</button>\n  </div>\n  @if (timePast() > 0) {\n    <progress class=\"absolute left-0 bottom-0 progress w-full opacity-20\"\n      [value]=\"timePast()\"\n      [max]=\"timeout()\">\n    </progress>\n  }\n</div>\n" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SnackbarContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: SnackbarContent, isStandalone: true, selector: "kl-snackbar-content", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, timeout: { classPropertyName: "timeout", publicName: "timeout", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "alertContentRef", first: true, predicate: ["alertContent"], descendants: true, isSignal: true }, { propertyName: "alertIconRef", first: true, predicate: ["alertIcon"], descendants: true, isSignal: true }], ngImport: i0, template: "<div role=\"alert\" #alertContent class=\"relative alert alert-outline bg-base-100! w-full lg:max-w-1/4 rounded-sm text-sm py-3 border-neutral-600\">\n  <i #alertIcon class=\"h-4 w-4 shrink-0 stroke-current text-base fa-solid\"></i>\n  <span [innerHTML]=\"message()\"></span>\n  <div>\n    <button class=\"btn btn-xs btn-outline\" (click)=\"dismiss()\">OK</button>\n  </div>\n  @if (timePast() > 0) {\n    <progress class=\"absolute left-0 bottom-0 progress w-full opacity-20\"\n      [value]=\"timePast()\"\n      [max]=\"timeout()\">\n    </progress>\n  }\n</div>\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SnackbarContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SnackbarContent, decorators: [{
             type: Component,
             args: [{ selector: 'kl-snackbar-content', template: "<div role=\"alert\" #alertContent class=\"relative alert alert-outline bg-base-100! w-full lg:max-w-1/4 rounded-sm text-sm py-3 border-neutral-600\">\n  <i #alertIcon class=\"h-4 w-4 shrink-0 stroke-current text-base fa-solid\"></i>\n  <span [innerHTML]=\"message()\"></span>\n  <div>\n    <button class=\"btn btn-xs btn-outline\" (click)=\"dismiss()\">OK</button>\n  </div>\n  @if (timePast() > 0) {\n    <progress class=\"absolute left-0 bottom-0 progress w-full opacity-20\"\n      [value]=\"timePast()\"\n      [max]=\"timeout()\">\n    </progress>\n  }\n</div>\n" }]
         }], ctorParameters: () => [] });

package/fesm2022/koalarx-ui-shared-components-snackbar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"koalarx-ui-shared-components-snackbar.mjs","sources":["../../projects/koala-ui/shared/components/snackbar/snackbar.ts","../../projects/koala-ui/shared/components/snackbar/snackbar-ref.ts","../../projects/koala-ui/shared/components/snackbar/snackbar-content.ts","../../projects/koala-ui/shared/components/snackbar/snackbar-content.html","../../projects/koala-ui/shared/components/snackbar/koalarx-ui-shared-components-snackbar.ts"],"sourcesContent":["import {\n  ApplicationRef,\n  createComponent,\n  EnvironmentInjector,\n  inject,\n  Injectable,\n  InjectionToken,\n  Injector,\n  inputBinding,\n} from '@angular/core';\nimport { randomString } from '@koalarx/utils/KlString';\nimport { SnackbarContent } from './snackbar-content';\nimport { SNACKBAR_REF_TOKEN, SnackbarRef } from './snackbar-ref';\n\nexport const SNACKBAR_CONFIG = new InjectionToken('SnackbarConfig');\nexport const SNACKBAR_APP_REF = new InjectionToken('SnackbarAppRef');\n\nexport type SnackbarType = 'info' | 'success' | 'warning' | 'error';\n\nexport interface SnackbarConfig {\n  type: SnackbarType;\n  message: string;\n  timeout?: number;\n}\n\n@Injectable({ providedIn: 'root' })\nexport class Snackbar {\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  success(message: string, timeout = 5000) {\n    this.open({\n      type: 'success',\n      message,\n      timeout,\n    });\n  }\n\n  warning(message: string, timeout = 5000) {\n    this.open({\n      type: 'warning',\n      message,\n      timeout,\n    });\n  }\n\n  error(message: string, timeout = 5000) {\n    this.open({\n      type: 'error',\n      message,\n      timeout,\n    });\n  }\n\n  info(message: string, timeout = 5000) {\n    this.open({\n      type: 'info',\n      message,\n      timeout,\n    });\n  }\n\n  open(config: SnackbarConfig) {\n    const main = document.querySelector<HTMLElement>(\n      'kl-snackbar-container div'\n    );\n\n    if (main) {\n      const elementId = this.generateElementId();\n      const container = main.appendChild(document.createElement('div'));\n      container.id = elementId;\n      container.classList.add('flex', 'item-center', 'justify-end');\n\n      const componentRef = createComponent(SnackbarContent, {\n        environmentInjector: this.injector,\n        hostElement: container,\n        elementInjector: Injector.create({\n          providers: [\n            { provide: SNACKBAR_CONFIG, useValue: config },\n            { provide: SNACKBAR_APP_REF, useValue: this.appRef },\n            {\n              provide: SNACKBAR_REF_TOKEN,\n              useValue: () => componentRef,\n            },\n            {\n              provide: SnackbarRef,\n              deps: [SNACKBAR_CONFIG, SNACKBAR_APP_REF, SNACKBAR_REF_TOKEN],\n            },\n          ],\n        }),\n        bindings: [\n          inputBinding('type', () => config.type),\n          inputBinding('message', () => config.message),\n          inputBinding('timeout', () => config.timeout ?? 0),\n        ],\n      });\n\n      this.appRef.attachView(componentRef.hostView);\n\n      componentRef.changeDetectorRef.detectChanges();\n    }\n  }\n}\n","import {\n  ApplicationRef,\n  ComponentRef,\n  inject,\n  Injectable,\n  InjectionToken,\n} from '@angular/core';\nimport { SNACKBAR_APP_REF } from './snackbar';\nimport { SnackbarContent } from './snackbar-content';\n\nexport const SNACKBAR_REF_TOKEN = new InjectionToken('SnackbarRefToken');\n\n@Injectable()\nexport class SnackbarRef {\n  private readonly appRef = inject<ApplicationRef>(SNACKBAR_APP_REF);\n  private readonly componentRef =\n    inject<() => ComponentRef<SnackbarContent>>(SNACKBAR_REF_TOKEN);\n\n  dismiss() {\n    this.componentRef().destroy();\n    this.appRef.detachView(this.componentRef().hostView);\n  }\n}\n","import {\n  Component,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  OnInit,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { SnackbarType } from './snackbar';\nimport { SnackbarRef } from './snackbar-ref';\nimport { interval } from 'rxjs/internal/observable/interval';\nimport { startWith } from 'rxjs/internal/operators/startWith';\nimport { map } from 'rxjs/internal/operators/map';\n\n@Component({\n  selector: 'kl-snackbar-content',\n  templateUrl: './snackbar-content.html',\n})\nexport class SnackbarContent implements OnInit {\n  private readonly alertContentRef =\n    viewChild<ElementRef<HTMLDivElement>>('alertContent');\n  private readonly alertIconRef =\n    viewChild<ElementRef<HTMLElement>>('alertIcon');\n  private readonly snackbarRef = inject(SnackbarRef);\n\n  type = input.required<SnackbarType>();\n  message = input.required<string>();\n  timeout = input<number>(0);\n  timePast = signal(0);\n\n  constructor() {\n    effect(() => this.addAlertClass());\n    effect(() => this.addIconClass());\n  }\n\n  private addAlertClass() {\n    const alertContent = this.alertContentRef()?.nativeElement;\n\n    if (alertContent) {\n      let className = `alert-${this.type()}`;\n\n      switch (this.type()) {\n        case 'info':\n          className = 'alert-info';\n          break;\n        case 'success':\n          className = 'alert-success';\n          break;\n        case 'warning':\n          className = 'alert-warning';\n          break;\n        case 'error':\n          className = 'alert-error';\n          break;\n      }\n\n      alertContent.classList.add(className);\n    }\n  }\n\n  private addIconClass() {\n    const alertIcon = this.alertIconRef()?.nativeElement;\n\n    if (alertIcon) {\n      let className = '';\n\n      switch (this.type()) {\n        case 'info':\n          className = 'fa-circle-info';\n          break;\n        case 'success':\n          className = 'fa-circle-check';\n          break;\n        case 'warning':\n          className = 'fa-triangle-exclamation';\n          break;\n        case 'error':\n          className = 'fa-circle-xmark';\n          break;\n      }\n\n      alertIcon.classList.add(className);\n    }\n  }\n\n  ngOnInit(): void {\n    const timeout = this.timeout();\n\n    if (timeout > 0) {\n      const timePastInterval = interval(1000)\n        .pipe(\n          startWith(0),\n          map(() => this.timePast.update((past) => past + 1000)),\n          map(() => this.timePast())\n        )\n        .subscribe((timePast) => {\n          if (timePast > timeout) {\n            timePastInterval?.unsubscribe();\n            this.dismiss();\n          }\n        });\n    }\n  }\n\n  dismiss() {\n    this.snackbarRef.dismiss();\n  }\n}\n","<div role=\"alert\" #alertContent class=\"relative alert alert-outline bg-base-100! w-full lg:max-w-1/4 rounded-sm text-sm py-3 border-neutral-600\">\n  <i #alertIcon class=\"h-4 w-4 shrink-0 stroke-current text-base fa-solid\"></i>\n  <span [innerHTML]=\"message()\"></span>\n  <div>\n    <button class=\"btn btn-xs btn-outline\" (click)=\"dismiss()\">OK</button>\n  </div>\n  @if (timePast() > 0) {\n    <progress class=\"absolute left-0 bottom-0 progress w-full opacity-20\"\n      [value]=\"timePast()\"\n      [max]=\"timeout()\">\n    </progress>\n  }\n</div>\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-snackbar.mjs","sources":["../../projects/koala-ui/shared/components/snackbar/snackbar.ts","../../projects/koala-ui/shared/components/snackbar/snackbar-ref.ts","../../projects/koala-ui/shared/components/snackbar/snackbar-content.ts","../../projects/koala-ui/shared/components/snackbar/snackbar-content.html","../../projects/koala-ui/shared/components/snackbar/koalarx-ui-shared-components-snackbar.ts"],"sourcesContent":["import {\n  ApplicationRef,\n  createComponent,\n  EnvironmentInjector,\n  inject,\n  Injectable,\n  InjectionToken,\n  Injector,\n  inputBinding,\n} from '@angular/core';\nimport { randomString } from '@koalarx/utils/KlString';\nimport { SnackbarContent } from './snackbar-content';\nimport { SNACKBAR_REF_TOKEN, SnackbarRef } from './snackbar-ref';\n\nexport const SNACKBAR_CONFIG = new InjectionToken('SnackbarConfig');\nexport const SNACKBAR_APP_REF = new InjectionToken('SnackbarAppRef');\n\nexport type SnackbarType = 'info' | 'success' | 'warning' | 'error';\n\nexport interface SnackbarConfig {\n  type: SnackbarType;\n  message: string;\n  timeout?: number;\n}\n\n@Injectable({ providedIn: 'root' })\nexport class Snackbar {\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  success(message: string, timeout = 5000) {\n    this.open({\n      type: 'success',\n      message,\n      timeout,\n    });\n  }\n\n  warning(message: string, timeout = 5000) {\n    this.open({\n      type: 'warning',\n      message,\n      timeout,\n    });\n  }\n\n  error(message: string, timeout = 5000) {\n    this.open({\n      type: 'error',\n      message,\n      timeout,\n    });\n  }\n\n  info(message: string, timeout = 5000) {\n    this.open({\n      type: 'info',\n      message,\n      timeout,\n    });\n  }\n\n  open(config: SnackbarConfig) {\n    const main = document.querySelector<HTMLElement>(\n      'kl-snackbar-container div'\n    );\n\n    if (main) {\n      const elementId = this.generateElementId();\n      const container = main.appendChild(document.createElement('div'));\n      container.id = elementId;\n      container.classList.add('flex', 'item-center', 'justify-end');\n\n      const componentRef = createComponent(SnackbarContent, {\n        environmentInjector: this.injector,\n        hostElement: container,\n        elementInjector: Injector.create({\n          providers: [\n            { provide: SNACKBAR_CONFIG, useValue: config },\n            { provide: SNACKBAR_APP_REF, useValue: this.appRef },\n            {\n              provide: SNACKBAR_REF_TOKEN,\n              useValue: () => componentRef,\n            },\n            {\n              provide: SnackbarRef,\n              deps: [SNACKBAR_CONFIG, SNACKBAR_APP_REF, SNACKBAR_REF_TOKEN],\n            },\n          ],\n        }),\n        bindings: [\n          inputBinding('type', () => config.type),\n          inputBinding('message', () => config.message),\n          inputBinding('timeout', () => config.timeout ?? 0),\n        ],\n      });\n\n      this.appRef.attachView(componentRef.hostView);\n\n      componentRef.changeDetectorRef.detectChanges();\n    }\n  }\n}\n","import {\n  ApplicationRef,\n  ComponentRef,\n  inject,\n  Injectable,\n  InjectionToken,\n} from '@angular/core';\nimport { SNACKBAR_APP_REF } from './snackbar';\nimport { SnackbarContent } from './snackbar-content';\n\nexport const SNACKBAR_REF_TOKEN = new InjectionToken('SnackbarRefToken');\n\n@Injectable()\nexport class SnackbarRef {\n  private readonly appRef = inject<ApplicationRef>(SNACKBAR_APP_REF);\n  private readonly componentRef =\n    inject<() => ComponentRef<SnackbarContent>>(SNACKBAR_REF_TOKEN);\n\n  dismiss() {\n    this.componentRef().destroy();\n    this.appRef.detachView(this.componentRef().hostView);\n  }\n}\n","import {\n  Component,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  OnInit,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { SnackbarType } from './snackbar';\nimport { SnackbarRef } from './snackbar-ref';\nimport { interval } from 'rxjs/internal/observable/interval';\nimport { startWith } from 'rxjs/internal/operators/startWith';\nimport { map } from 'rxjs/internal/operators/map';\n\n@Component({\n  selector: 'kl-snackbar-content',\n  templateUrl: './snackbar-content.html',\n})\nexport class SnackbarContent implements OnInit {\n  private readonly alertContentRef =\n    viewChild<ElementRef<HTMLDivElement>>('alertContent');\n  private readonly alertIconRef =\n    viewChild<ElementRef<HTMLElement>>('alertIcon');\n  private readonly snackbarRef = inject(SnackbarRef);\n\n  type = input.required<SnackbarType>();\n  message = input.required<string>();\n  timeout = input<number>(0);\n  timePast = signal(0);\n\n  constructor() {\n    effect(() => this.addAlertClass());\n    effect(() => this.addIconClass());\n  }\n\n  private addAlertClass() {\n    const alertContent = this.alertContentRef()?.nativeElement;\n\n    if (alertContent) {\n      let className = `alert-${this.type()}`;\n\n      switch (this.type()) {\n        case 'info':\n          className = 'alert-info';\n          break;\n        case 'success':\n          className = 'alert-success';\n          break;\n        case 'warning':\n          className = 'alert-warning';\n          break;\n        case 'error':\n          className = 'alert-error';\n          break;\n      }\n\n      alertContent.classList.add(className);\n    }\n  }\n\n  private addIconClass() {\n    const alertIcon = this.alertIconRef()?.nativeElement;\n\n    if (alertIcon) {\n      let className = '';\n\n      switch (this.type()) {\n        case 'info':\n          className = 'fa-circle-info';\n          break;\n        case 'success':\n          className = 'fa-circle-check';\n          break;\n        case 'warning':\n          className = 'fa-triangle-exclamation';\n          break;\n        case 'error':\n          className = 'fa-circle-xmark';\n          break;\n      }\n\n      alertIcon.classList.add(className);\n    }\n  }\n\n  ngOnInit(): void {\n    const timeout = this.timeout();\n\n    if (timeout > 0) {\n      const timePastInterval = interval(1000)\n        .pipe(\n          startWith(0),\n          map(() => this.timePast.update((past) => past + 1000)),\n          map(() => this.timePast())\n        )\n        .subscribe((timePast) => {\n          if (timePast > timeout) {\n            timePastInterval?.unsubscribe();\n            this.dismiss();\n          }\n        });\n    }\n  }\n\n  dismiss() {\n    this.snackbarRef.dismiss();\n  }\n}\n","<div role=\"alert\" #alertContent class=\"relative alert alert-outline bg-base-100! w-full lg:max-w-1/4 rounded-sm text-sm py-3 border-neutral-600\">\n  <i #alertIcon class=\"h-4 w-4 shrink-0 stroke-current text-base fa-solid\"></i>\n  <span [innerHTML]=\"message()\"></span>\n  <div>\n    <button class=\"btn btn-xs btn-outline\" (click)=\"dismiss()\">OK</button>\n  </div>\n  @if (timePast() > 0) {\n    <progress class=\"absolute left-0 bottom-0 progress w-full opacity-20\"\n      [value]=\"timePast()\"\n      [max]=\"timeout()\">\n    </progress>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/koalarx-ui-shared-components-stepper.mjs

@@ -7,19 +7,19 @@ class StepGroup {
     ngOnInit() {
         this.elementRef.nativeElement.classList.add('steps');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.6", type: StepGroup, isStandalone: true, selector: "ul[klStepGroup]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: StepGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.6", type: StepGroup, isStandalone: true, selector: "ul[klStepGroup]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: StepGroup, decorators: [{
             type: Directive,
             args: [{ selector: 'ul[klStepGroup]' }]
         }] });
 
 class StepItem {
     elementRef = inject((ElementRef));
-    label = input.required();
-    indexStep = signal(0);
-    currentStep = input.required();
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+    indexStep = signal(0, ...(ngDevMode ? [{ debugName: "indexStep" }] : []));
+    currentStep = input.required(...(ngDevMode ? [{ debugName: "currentStep" }] : []));
     constructor() {
         effect(() => {
             const currentStep = this.currentStep();
@@ -54,16 +54,16 @@ class StepItem {
         this.elementRef.nativeElement.classList.add('step');
         this.elementRef.nativeElement.innerText = this.label();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: StepItem, isStandalone: true, selector: "li[klStepItem]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, currentStep: { classPropertyName: "currentStep", publicName: "currentStep", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: StepItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.6", type: StepItem, isStandalone: true, selector: "li[klStepItem]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, currentStep: { classPropertyName: "currentStep", publicName: "currentStep", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: StepItem, decorators: [{
             type: Directive,
             args: [{ selector: 'li[klStepItem]' }]
         }], ctorParameters: () => [] });
 
 class Stepper {
-    _currentStep = signal(1);
+    _currentStep = signal(1, ...(ngDevMode ? [{ debugName: "_currentStep" }] : []));
     get currentStep() {
         return this._currentStep.asReadonly();
     }
@@ -73,10 +73,10 @@ class Stepper {
     previous() {
         this._currentStep.update((step) => (step > 1 ? step - 1 : step));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Stepper, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Stepper });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: Stepper, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: Stepper });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Stepper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: Stepper, decorators: [{
             type: Injectable
         }] });
 

package/fesm2022/koalarx-ui-shared-components-stepper.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"koalarx-ui-shared-components-stepper.mjs","sources":["../../projects/koala-ui/shared/components/stepper/step-group.ts","../../projects/koala-ui/shared/components/stepper/step-item.ts","../../projects/koala-ui/shared/components/stepper/stepper.ts","../../projects/koala-ui/shared/components/stepper/koalarx-ui-shared-components-stepper.ts"],"sourcesContent":["import { Directive, ElementRef, inject, OnInit } from '@angular/core';\n\n@Directive({ selector: 'ul[klStepGroup]' })\nexport class StepGroup implements OnInit {\n  private readonly elementRef = inject<ElementRef<HTMLUListElement>>(\n    ElementRef<HTMLButtonElement>\n  );\n\n  ngOnInit(): void {\n    this.elementRef.nativeElement.classList.add('steps');\n  }\n}\n","import {\n  Directive,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  OnInit,\n  signal,\n} from '@angular/core';\nimport { generateQuerySelector } from '@koalarx/ui/shared/utils';\n\n@Directive({ selector: 'li[klStepItem]' })\nexport class StepItem implements OnInit {\n  private readonly elementRef = inject<ElementRef<HTMLLIElement>>(\n    ElementRef<HTMLButtonElement>\n  );\n\n  label = input.required<string>();\n  indexStep = signal<number>(0);\n  currentStep = input.required<number>();\n\n  constructor() {\n    effect(() => {\n      const currentStep = this.currentStep();\n      const stepIndex = this.getStepIndex();\n\n      if (stepIndex < currentStep) {\n        this.elementRef.nativeElement.classList.add('step-primary');\n        this.elementRef.nativeElement.dataset['content'] = '✓';\n      } else if (currentStep === stepIndex) {\n        this.elementRef.nativeElement.classList.add('step-primary');\n        delete this.elementRef.nativeElement.dataset['content'];\n      } else {\n        this.elementRef.nativeElement.classList.remove('step-primary');\n        delete this.elementRef.nativeElement.dataset['content'];\n      }\n    });\n  }\n\n  private getStepIndex(): number {\n    const elementSelector = generateQuerySelector(\n      this.elementRef.nativeElement\n    );\n    const elements = document.querySelectorAll(elementSelector);\n\n    let elementCountPosition = 0;\n\n    elements.forEach((el, index) => {\n      if (el === this.elementRef.nativeElement) {\n        elementCountPosition = index + 1;\n        return;\n      }\n    });\n\n    return elementCountPosition;\n  }\n\n  ngOnInit(): void {\n    this.elementRef.nativeElement.classList.add('step');\n    this.elementRef.nativeElement.innerText = this.label();\n  }\n}\n","import { Injectable, signal } from '@angular/core';\n\n@Injectable()\nexport class Stepper {\n  private readonly _currentStep = signal<number>(1);\n\n  get currentStep() {\n    return this._currentStep.asReadonly();\n  }\n\n  next() {\n    this._currentStep.update((step) => step + 1);\n  }\n\n  previous() {\n    this._currentStep.update((step) => (step > 1 ? step - 1 : step));\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-stepper.mjs","sources":["../../projects/koala-ui/shared/components/stepper/step-group.ts","../../projects/koala-ui/shared/components/stepper/step-item.ts","../../projects/koala-ui/shared/components/stepper/stepper.ts","../../projects/koala-ui/shared/components/stepper/koalarx-ui-shared-components-stepper.ts"],"sourcesContent":["import { Directive, ElementRef, inject, OnInit } from '@angular/core';\n\n@Directive({ selector: 'ul[klStepGroup]' })\nexport class StepGroup implements OnInit {\n  private readonly elementRef = inject<ElementRef<HTMLUListElement>>(\n    ElementRef<HTMLButtonElement>\n  );\n\n  ngOnInit(): void {\n    this.elementRef.nativeElement.classList.add('steps');\n  }\n}\n","import {\n  Directive,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  OnInit,\n  signal,\n} from '@angular/core';\nimport { generateQuerySelector } from '@koalarx/ui/shared/utils';\n\n@Directive({ selector: 'li[klStepItem]' })\nexport class StepItem implements OnInit {\n  private readonly elementRef = inject<ElementRef<HTMLLIElement>>(\n    ElementRef<HTMLButtonElement>\n  );\n\n  label = input.required<string>();\n  indexStep = signal<number>(0);\n  currentStep = input.required<number>();\n\n  constructor() {\n    effect(() => {\n      const currentStep = this.currentStep();\n      const stepIndex = this.getStepIndex();\n\n      if (stepIndex < currentStep) {\n        this.elementRef.nativeElement.classList.add('step-primary');\n        this.elementRef.nativeElement.dataset['content'] = '✓';\n      } else if (currentStep === stepIndex) {\n        this.elementRef.nativeElement.classList.add('step-primary');\n        delete this.elementRef.nativeElement.dataset['content'];\n      } else {\n        this.elementRef.nativeElement.classList.remove('step-primary');\n        delete this.elementRef.nativeElement.dataset['content'];\n      }\n    });\n  }\n\n  private getStepIndex(): number {\n    const elementSelector = generateQuerySelector(\n      this.elementRef.nativeElement\n    );\n    const elements = document.querySelectorAll(elementSelector);\n\n    let elementCountPosition = 0;\n\n    elements.forEach((el, index) => {\n      if (el === this.elementRef.nativeElement) {\n        elementCountPosition = index + 1;\n        return;\n      }\n    });\n\n    return elementCountPosition;\n  }\n\n  ngOnInit(): void {\n    this.elementRef.nativeElement.classList.add('step');\n    this.elementRef.nativeElement.innerText = this.label();\n  }\n}\n","import { Injectable, signal } from '@angular/core';\n\n@Injectable()\nexport class Stepper {\n  private readonly _currentStep = signal<number>(1);\n\n  get currentStep() {\n    return this._currentStep.asReadonly();\n  }\n\n  next() {\n    this._currentStep.update((step) => step + 1);\n  }\n\n  previous() {\n    this._currentStep.update((step) => (step > 1 ? step - 1 : step));\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/koalarx-ui-shared-components-vertical-menu.mjs

@@ -3,20 +3,20 @@ import { Component, input } from '@angular/core';
 import { RouterLink, RouterLinkActive } from '@angular/router';
 
 class VerticalMenuContainer {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: VerticalMenuContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: VerticalMenuContainer, isStandalone: true, selector: "kl-vertical-menu-container", ngImport: i0, template: "<ul class=\"menu rounded-box w-full\">\n  <li class=\"menu-title\">\n    <ng-content select=\"[title]\" />\n  </li>\n  <ng-content select=\"[items]\" />\n</ul>\n" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: VerticalMenuContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: VerticalMenuContainer, isStandalone: true, selector: "kl-vertical-menu-container", ngImport: i0, template: "<ul class=\"menu rounded-box w-full\">\n  <li class=\"menu-title\">\n    <ng-content select=\"[title]\" />\n  </li>\n  <ng-content select=\"[items]\" />\n</ul>\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: VerticalMenuContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: VerticalMenuContainer, decorators: [{
             type: Component,
             args: [{ selector: 'kl-vertical-menu-container', template: "<ul class=\"menu rounded-box w-full\">\n  <li class=\"menu-title\">\n    <ng-content select=\"[title]\" />\n  </li>\n  <ng-content select=\"[items]\" />\n</ul>\n" }]
         }] });
 
 class VerticalMenuItem {
-    link = input.required();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: VerticalMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: VerticalMenuItem, isStandalone: true, selector: "kl-vertical-menu-item", inputs: { link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<li>\n  <a class=\"opacity-70\"\n    [routerLink]=\"link()\"\n    routerLinkActive=\"opacity-100\">\n    <ng-content />\n  </a>\n</li>\n", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
+    link = input.required(...(ngDevMode ? [{ debugName: "link" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: VerticalMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", type: VerticalMenuItem, isStandalone: true, selector: "kl-vertical-menu-item", inputs: { link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<li>\n  <a class=\"opacity-70\"\n    [routerLink]=\"link()\"\n    routerLinkActive=\"opacity-100\">\n    <ng-content />\n  </a>\n</li>\n", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: VerticalMenuItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: VerticalMenuItem, decorators: [{
             type: Component,
             args: [{ selector: 'kl-vertical-menu-item', imports: [RouterLink, RouterLinkActive], template: "<li>\n  <a class=\"opacity-70\"\n    [routerLink]=\"link()\"\n    routerLinkActive=\"opacity-100\">\n    <ng-content />\n  </a>\n</li>\n" }]
         }] });

package/fesm2022/koalarx-ui-shared-components-vertical-menu.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"koalarx-ui-shared-components-vertical-menu.mjs","sources":["../../projects/koala-ui/shared/components/vertical-menu/vertical-menu-container.ts","../../projects/koala-ui/shared/components/vertical-menu/vertical-menu-container.html","../../projects/koala-ui/shared/components/vertical-menu/vertical-menu-item.ts","../../projects/koala-ui/shared/components/vertical-menu/vertical-menu-item.html","../../projects/koala-ui/shared/components/vertical-menu/koalarx-ui-shared-components-vertical-menu.ts"],"sourcesContent":["import { Component } from '@angular/core';\n\n@Component({\n  selector: 'kl-vertical-menu-container',\n  templateUrl: './vertical-menu-container.html',\n})\nexport class VerticalMenuContainer {}\n","<ul class=\"menu rounded-box w-full\">\n  <li class=\"menu-title\">\n    <ng-content select=\"[title]\" />\n  </li>\n  <ng-content select=\"[items]\" />\n</ul>\n","import { Component, input } from '@angular/core';\nimport { RouterLink, RouterLinkActive } from '@angular/router';\n\n@Component({\n  selector: 'kl-vertical-menu-item',\n  templateUrl: './vertical-menu-item.html',\n  imports: [RouterLink, RouterLinkActive],\n})\nexport class VerticalMenuItem {\n  link = input.required<string>();\n}\n","<li>\n  <a class=\"opacity-70\"\n    [routerLink]=\"link()\"\n    routerLinkActive=\"opacity-100\">\n    <ng-content />\n  </a>\n</li>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAMa,qBAAqB,CAAA;uGAArB,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAArB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,sFCNlC,mKAMA,EAAA,CAAA;;2FDAa,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAJjC,SAAS;+BACE,4BAA4B,EAAA,QAAA,EAAA,mKAAA,EAAA;;;MEK3B,gBAAgB,CAAA;AAC3B,IAAA,IAAI,GAAG,KAAK,CAAC,QAAQ,EAAU;uGADpB,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAhB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gBAAgB,ECR7B,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,0IAOA,EDDY,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,UAAU,oOAAE,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,uBAAA,EAAA,kBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAE3B,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAL5B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,uBAAuB,EAExB,OAAA,EAAA,CAAC,UAAU,EAAE,gBAAgB,CAAC,EAAA,QAAA,EAAA,0IAAA,EAAA;;;AENzC;;AAEG;;;;"}
+{"version":3,"file":"koalarx-ui-shared-components-vertical-menu.mjs","sources":["../../projects/koala-ui/shared/components/vertical-menu/vertical-menu-container.ts","../../projects/koala-ui/shared/components/vertical-menu/vertical-menu-container.html","../../projects/koala-ui/shared/components/vertical-menu/vertical-menu-item.ts","../../projects/koala-ui/shared/components/vertical-menu/vertical-menu-item.html","../../projects/koala-ui/shared/components/vertical-menu/koalarx-ui-shared-components-vertical-menu.ts"],"sourcesContent":["import { Component } from '@angular/core';\n\n@Component({\n  selector: 'kl-vertical-menu-container',\n  templateUrl: './vertical-menu-container.html',\n})\nexport class VerticalMenuContainer {}\n","<ul class=\"menu rounded-box w-full\">\n  <li class=\"menu-title\">\n    <ng-content select=\"[title]\" />\n  </li>\n  <ng-content select=\"[items]\" />\n</ul>\n","import { Component, input } from '@angular/core';\nimport { RouterLink, RouterLinkActive } from '@angular/router';\n\n@Component({\n  selector: 'kl-vertical-menu-item',\n  templateUrl: './vertical-menu-item.html',\n  imports: [RouterLink, RouterLinkActive],\n})\nexport class VerticalMenuItem {\n  link = input.required<string>();\n}\n","<li>\n  <a class=\"opacity-70\"\n    [routerLink]=\"link()\"\n    routerLinkActive=\"opacity-100\">\n    <ng-content />\n  </a>\n</li>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAMa,qBAAqB,CAAA;uGAArB,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAArB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,sFCNlC,mKAMA,EAAA,CAAA;;2FDAa,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAJjC,SAAS;+BACE,4BAA4B,EAAA,QAAA,EAAA,mKAAA,EAAA;;;MEK3B,gBAAgB,CAAA;AAC3B,IAAA,IAAI,GAAG,KAAK,CAAC,QAAQ,+CAAU;uGADpB,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAhB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gBAAgB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECR7B,0IAOA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDDY,UAAU,oOAAE,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,uBAAA,EAAA,kBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAE3B,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAL5B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,uBAAuB,EAAA,OAAA,EAExB,CAAC,UAAU,EAAE,gBAAgB,CAAC,EAAA,QAAA,EAAA,0IAAA,EAAA;;;AENzC;;AAEG;;;;"}

package/fesm2022/koalarx-ui-shared-directives.mjs

@@ -8,7 +8,7 @@ import { Loader } from '@koalarx/ui/core/components/loader';
 
 class HookChange {
     viewContainerRef = inject(ViewContainerRef);
-    hookChange = input.required();
+    hookChange = input.required(...(ngDevMode ? [{ debugName: "hookChange" }] : []));
     constructor() {
         effect(() => {
             this.hookChange();
@@ -18,10 +18,10 @@ class HookChange {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: HookChange, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: HookChange, isStandalone: true, selector: "[hookChange]", inputs: { hookChange: { classPropertyName: "hookChange", publicName: "hookChange", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: HookChange, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.6", type: HookChange, isStandalone: true, selector: "[hookChange]", inputs: { hookChange: { classPropertyName: "hookChange", publicName: "hookChange", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: HookChange, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: HookChange, decorators: [{
             type: Directive,
             args: [{ selector: '[hookChange]' }]
         }], ctorParameters: () => [] });
@@ -35,7 +35,7 @@ class InputMask {
     get input() {
         return this.elementRef.nativeElement;
     }
-    mask = input.required();
+    mask = input.required(...(ngDevMode ? [{ debugName: "mask" }] : []));
     constructor() {
         effect(() => {
             const mask = this.mask();
@@ -53,10 +53,10 @@ class InputMask {
     setValue(value) {
         this.input.value = value;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: InputMask, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: InputMask, isStandalone: true, selector: "input[mask]", inputs: { mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: true, transformFunction: null } }, providers: [NgxMaskPipe], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: InputMask, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.6", type: InputMask, isStandalone: true, selector: "input[mask]", inputs: { mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: true, transformFunction: null } }, providers: [NgxMaskPipe], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: InputMask, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: InputMask, decorators: [{
             type: Directive,
             args: [{ selector: 'input[mask]', providers: [NgxMaskPipe] }]
         }], ctorParameters: () => [] });
@@ -65,7 +65,7 @@ class InputCurrencyMask {
     elementRef = inject((ElementRef));
     appConfig = inject(AppConfig);
     writedValue = 0.0;
-    decimalCount = input(2);
+    decimalCount = input(2, ...(ngDevMode ? [{ debugName: "decimalCount" }] : []));
     currencyValue = output();
     maskCoin(value) {
         let prefix = '$';
@@ -178,10 +178,10 @@ class InputCurrencyMask {
         this.onReset();
         setTimeout(() => this.applyMask());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: InputCurrencyMask, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: InputCurrencyMask, isStandalone: true, selector: "input[currencyMask]", inputs: { decimalCount: { classPropertyName: "decimalCount", publicName: "decimalCount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currencyValue: "currencyValue" }, providers: [NgxMaskPipe], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: InputCurrencyMask, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.6", type: InputCurrencyMask, isStandalone: true, selector: "input[currencyMask]", inputs: { decimalCount: { classPropertyName: "decimalCount", publicName: "decimalCount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currencyValue: "currencyValue" }, providers: [NgxMaskPipe], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: InputCurrencyMask, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: InputCurrencyMask, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[currencyMask]',
@@ -191,8 +191,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
 
 class Tooltip {
     elementRef = inject((ElementRef));
-    tooltip = input.required();
-    tooltipPosition = input('top');
+    tooltip = input.required(...(ngDevMode ? [{ debugName: "tooltip" }] : []));
+    tooltipPosition = input('top', ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : []));
     constructor() {
         effect(() => {
             const element = this.elementRef.nativeElement;
@@ -215,10 +215,10 @@ class Tooltip {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Tooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: Tooltip, isStandalone: true, selector: "[tooltip]", inputs: { tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: true, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: Tooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.6", type: Tooltip, isStandalone: true, selector: "[tooltip]", inputs: { tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: true, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Tooltip, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: Tooltip, decorators: [{
             type: Directive,
             args: [{ selector: '[tooltip]' }]
         }], ctorParameters: () => [] });
@@ -228,14 +228,14 @@ class Button {
     appRef = inject(ApplicationRef);
     injector = inject(EnvironmentInjector);
     loaderComponent = null;
-    color = input('neutral');
-    type = input('button');
-    circle = input(false, { transform: booleanAttribute });
-    outline = input(false, { transform: booleanAttribute });
-    soft = input(false, { transform: booleanAttribute });
-    showLoader = input(false, { transform: booleanAttribute });
-    disabled = input(false, { transform: booleanAttribute });
-    size = input('medium');
+    color = input('neutral', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : []));
+    circle = input(false, ...(ngDevMode ? [{ debugName: "circle", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    outline = input(false, ...(ngDevMode ? [{ debugName: "outline", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    soft = input(false, ...(ngDevMode ? [{ debugName: "soft", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    showLoader = input(false, ...(ngDevMode ? [{ debugName: "showLoader", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
     constructor() {
         effect(() => this.toggleLoader(this.showLoader()));
         effect(() => {
@@ -325,10 +325,10 @@ class Button {
             this.elementRef.nativeElement.classList.add('btn-soft');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Button, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: Button, isStandalone: true, selector: "button[klButton], a[klButton]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, circle: { classPropertyName: "circle", publicName: "circle", isSignal: true, isRequired: false, transformFunction: null }, outline: { classPropertyName: "outline", publicName: "outline", isSignal: true, isRequired: false, transformFunction: null }, soft: { classPropertyName: "soft", publicName: "soft", isSignal: true, isRequired: false, transformFunction: null }, showLoader: { classPropertyName: "showLoader", publicName: "showLoader", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: Button, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.6", type: Button, isStandalone: true, selector: "button[klButton], a[klButton]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, circle: { classPropertyName: "circle", publicName: "circle", isSignal: true, isRequired: false, transformFunction: null }, outline: { classPropertyName: "outline", publicName: "outline", isSignal: true, isRequired: false, transformFunction: null }, soft: { classPropertyName: "soft", publicName: "soft", isSignal: true, isRequired: false, transformFunction: null }, showLoader: { classPropertyName: "showLoader", publicName: "showLoader", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Button, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: Button, decorators: [{
             type: Directive,
             args: [{ selector: 'button[klButton], a[klButton]' }]
         }], ctorParameters: () => [] });