@ng-atomic/components 19.51.0 → 19.81.0

package/fesm2022/ng-atomic-components-frames-router-outlet.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-atomic-components-frames-router-outlet.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/frames/router-outlet/router-outlet.frame.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/router-outlet/router-outlet.helper.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/router-outlet/ng-atomic-components-frames-router-outlet.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Directive, EventEmitter, inject, input, Output, viewChild } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { OverlayFrame } from '@ng-atomic/components/frames/overlay';\nimport { LineUpFrame } from '@ng-atomic/components/frames/line-up';\nimport { PRIMARY_OUTLET, RouterOutlet } from '@angular/router';\nimport { Breakpoint } from '@ng-atomic/common/services/breakpoint';\nimport { makeConfig } from '@ng-atomic/common/services/ui';\nimport { InjectableComponent, NgAtomicComponent, _computed } from '@ng-atomic/core';\nimport { combineLatest, debounceTime, distinctUntilChanged, filter, map, startWith, switchMap, tap } from 'rxjs';\nimport { toObservable, toSignal } from '@angular/core/rxjs-interop';\n\nenum ActionId {\n  DEACTIVATED = 'deactivated',\n}\n\n@Directive({standalone: true, selector: 'frames-router-outlet'})\nexport class RouterOutletFrameStore extends InjectableComponent {\n  static readonly ActionId = ActionId;\n  static readonly Config = makeConfig(() => {\n    const getFrame = (breakpoint: Breakpoint) => {\n      switch(breakpoint) {\n        case 'xSmall': return 'overlay' as 'lineup' | 'overlay';\n        default: return 'lineup' as 'lineup' | 'overlay';\n      }\n    }\n    return (context) => {\n      return ({\n        frame: getFrame(context.breakpoint),\n        name: PRIMARY_OUTLET as string,\n        isActivated: (outlet: RouterOutlet) => !!outlet.isActivated,\n      });\n    }\n  }, ['components', 'frames', 'router-outlet']);\n\n  static provideSideAppConfig = (name: string = PRIMARY_OUTLET) => {\n    return RouterOutletFrameStore.Config.provide(() => (config) => ({\n      ...config,\n      name,\n      frame: 'overlay',\n    }));\n  }\n\n  static provideDefault() {\n    return [\n      RouterOutletFrameStore.Config.provide(),\n    ]\n  }\n\n  readonly config = RouterOutletFrameStore.Config.inject();\n  readonly frame = input(_computed(() => this.config().frame));\n  readonly name = input(_computed(() => this.config().name, { equal: (a, b) => a === b }));\n  readonly isActivated = input(_computed(() => this.config().isActivated));\n  readonly skip = input(false);\n} \n\n@Component({\n    selector: 'frames-router-outlet',\n    imports: [\n        NgTemplateOutlet,\n        OverlayFrame,\n        LineUpFrame,\n        RouterOutlet,\n    ],\n    template: `\n    @switch (store.frame()) {\n      @case ('lineup') {\n        <frames-line-up [hasNext]=\"hasNext()\" [scope]=\"store.name()\">\n          @if (!store.skip()) {\n            <ng-container *ngTemplateOutlet=\"main\" main/>\n          }\n          <ng-container *ngTemplateOutlet=\"next\" next/>\n        </frames-line-up>\n      }\n      @default {\n        <frames-overlay [hasNext]=\"hasNext()\">\n          @if (!store.skip()) {\n            <ng-container *ngTemplateOutlet=\"main\" main/>\n          }\n          <ng-container *ngTemplateOutlet=\"next\" next/>\n        </frames-overlay>\n      }\n    }\n    <ng-template #main><ng-content main/></ng-template>\n    <ng-template #next><router-outlet [name]=\"store.name()\"/></ng-template>\n  `,\n    styleUrls: ['./router-outlet.frame.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    hostDirectives: [\n        {\n            directive: RouterOutletFrameStore,\n            inputs: ['frame', 'name', 'skip'],\n        },\n    ]\n})\nexport class RouterOutletFrame extends NgAtomicComponent {\n  protected store = inject(RouterOutletFrameStore);\n  readonly parent = inject(RouterOutletFrame, { optional: true, skipSelf: true });\n\n  @Output() readonly events = new EventEmitter<string>();\n  readonly events$ = this.events;\n  readonly deactivated$ = this.events$.pipe(\n    distinctUntilChanged(),\n    debounceTime(2),\n    tap((event) => { console.log('[RouterOutletFrame] deactivated:', event) }),\n    filter((event) => event === 'deactivated'),\n    // takeUntilDestroyed(),\n  );\n\n  readonly outlet = viewChild(RouterOutlet);\n  readonly outlet$ = toObservable(this.outlet);\n  readonly _activated$ = this.outlet$.pipe(\n    switchMap((outlet) => outlet!.activateEvents),\n  );\n  readonly _deactivated$ = this.outlet$.pipe(\n    switchMap((outlet) => outlet!.deactivateEvents),\n  );\n  readonly hasNext$ = this.outlet$.pipe(\n    filter((outlet) => !!outlet),\n    switchMap((outlet) => {\n      return combineLatest({\n        activated: this._activated$.pipe(startWith(null)), \n        deactivated: this._deactivated$.pipe(startWith(null)),\n      }).pipe(\n        map(() => this.store.isActivated()(outlet)),\n        distinctUntilChanged(),\n      );\n    }),\n  );\n  readonly hasNext = toSignal(this.hasNext$);\n\n  constructor() {\n    super();\n    this.events$.subscribe((event) => {\n      if (this.store.skip() && this.parent) {\n        this.parent.events.emit(event);\n      }\n    });\n\n    this.deactivated$.subscribe(() => {\n      this.dispatch({id: ActionId.DEACTIVATED})\n    });\n  }\n}\n","import { inject, InjectionToken, runInInjectionContext, Signal, signal, WritableSignal } from '@angular/core';\nimport { CanActivateFn, CanDeactivateFn, Route, Routes } from '@angular/router';\nimport { NgAtomicComponent, _computed, recursiveWrapRoutes } from '@ng-atomic/core';\nimport { delay, of } from 'rxjs';\nimport { RouterOutletFrame } from './router-outlet.frame';\n\nfunction InjectableSignal<T>(name: string, defaultValue: T = null as T): InjectionToken<WritableSignal<T>> {\n  return new InjectionToken<Signal<T>>(name, {\n    providedIn: 'root',\n    factory: () => signal(defaultValue),\n  }) as InjectionToken<WritableSignal<T>>;\n}\nconst CURRENT_ROUTER_OUTLET = InjectableSignal<RouterOutletFrame>('CURRENT_ROUTER_OUTLET', null as unknown as RouterOutletFrame);\n\nexport const canDeactivateFn: CanDeactivateFn<NgAtomicComponent | undefined> = (component) => {\n\tconst current = inject(CURRENT_ROUTER_OUTLET);\n\tconst frame = component?.__injector ? runInInjectionContext(component?.__injector, () => {\n    return inject(RouterOutletFrame, { optional: true });\n  }) : null;\n\tif (frame) {\n\t\tcurrent.set(frame);\n\t\tframe.events.emit('deactivated');\n\t}\n  // MEMO(NozomuMiyamoto): RouterOutletFrameの幅を変更するアニメーションの最適化のために遅延させている。\n  return of(true).pipe(delay(0));\n}\n\nexport const canActivateFn: CanActivateFn = () => {\n\tconst current = inject(CURRENT_ROUTER_OUTLET);\n\tif (current()) {\n\t\tcurrent().events.emit('activated');\n\t}\n  // MEMO(NozomuMiyamoto): RouterOutletFrameの幅を変更するアニメーションの最適化のために遅延させている。\n\treturn of(true).pipe(delay(0))\n}\n\nexport function ngAtomicRoute(route: Route): Route {\n  if (route.redirectTo) return route;\n\n  return {\n    ...route,\n    canActivate: [canActivateFn, ...(route.canActivate || [])],\n    canDeactivate: [canDeactivateFn, ...(route.canDeactivate || [])],\n    data: { preload: true, ...route.data },\n  };\n}\n\nexport function ngAtomicRoutes(routes: Routes): Routes {\n  return recursiveWrapRoutes(routes, ngAtomicRoute);\n}","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ng-atomic-components-frames-router-outlet.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/frames/router-outlet/router-outlet.frame.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/router-outlet/router-outlet.helper.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/router-outlet/ng-atomic-components-frames-router-outlet.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Directive, EventEmitter, inject, input, Output, viewChild } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { OverlayFrame } from '@ng-atomic/components/frames/overlay';\nimport { LineUpFrame } from '@ng-atomic/components/frames/line-up';\nimport { PRIMARY_OUTLET, RouterOutlet } from '@angular/router';\nimport { Breakpoint } from '@ng-atomic/common/services/breakpoint';\nimport { makeConfig } from '@ng-atomic/common/services/ui';\nimport { InjectableComponent, NgAtomicComponent, _computed } from '@ng-atomic/core';\nimport { combineLatest, debounceTime, distinctUntilChanged, filter, map, startWith, switchMap, tap } from 'rxjs';\nimport { toObservable, toSignal } from '@angular/core/rxjs-interop';\n\nenum ActionId {\n  DEACTIVATED = 'deactivated',\n}\n\n@Directive({standalone: true, selector: 'frames-router-outlet'})\nexport class RouterOutletFrameStore extends InjectableComponent {\n  static readonly ActionId = ActionId;\n  static readonly Config = makeConfig(() => {\n    const getFrame = (breakpoint: Breakpoint) => {\n      switch(breakpoint) {\n        case 'xSmall': return 'overlay' as 'lineup' | 'overlay';\n        default: return 'lineup' as 'lineup' | 'overlay';\n      }\n    }\n    return (context) => {\n      return ({\n        frame: getFrame(context.breakpoint),\n        name: PRIMARY_OUTLET as string,\n        isActivated: (outlet: RouterOutlet) => !!outlet.isActivated,\n      });\n    }\n  }, ['components', 'frames', 'router-outlet']);\n\n  static provideSideAppConfig = (name: string = PRIMARY_OUTLET) => {\n    return RouterOutletFrameStore.Config.provide(() => (config) => ({\n      ...config,\n      name,\n      frame: 'overlay',\n    }));\n  }\n\n  static provideDefault() {\n    return [\n      RouterOutletFrameStore.Config.provide(),\n    ]\n  }\n\n  readonly config = RouterOutletFrameStore.Config.inject();\n  readonly frame = input(_computed(() => this.config().frame));\n  readonly name = input(_computed(() => this.config().name, { equal: (a, b) => a === b }));\n  readonly isActivated = input(_computed(() => this.config().isActivated));\n  readonly skip = input(false);\n} \n\n@Component({\n    selector: 'frames-router-outlet',\n    imports: [\n        NgTemplateOutlet,\n        OverlayFrame,\n        LineUpFrame,\n        RouterOutlet,\n    ],\n    template: `\n    @switch (store.frame()) {\n      @case ('lineup') {\n        <frames-line-up [hasNext]=\"hasNext()\" [scope]=\"store.name()\">\n          @if (!store.skip()) {\n            <ng-container *ngTemplateOutlet=\"main\" main/>\n          }\n          <ng-container *ngTemplateOutlet=\"next\" next/>\n        </frames-line-up>\n      }\n      @default {\n        <frames-overlay [hasNext]=\"hasNext()\">\n          @if (!store.skip()) {\n            <ng-container *ngTemplateOutlet=\"main\" main/>\n          }\n          <ng-container *ngTemplateOutlet=\"next\" next/>\n        </frames-overlay>\n      }\n    }\n    <ng-template #main><ng-content main/></ng-template>\n    <ng-template #next><router-outlet [name]=\"store.name()\"/></ng-template>\n  `,\n    styleUrls: ['./router-outlet.frame.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    hostDirectives: [\n        {\n            directive: RouterOutletFrameStore,\n            inputs: ['frame', 'name', 'skip'],\n        },\n    ]\n})\nexport class RouterOutletFrame extends NgAtomicComponent {\n  protected store = inject(RouterOutletFrameStore);\n  readonly parent = inject(RouterOutletFrame, { optional: true, skipSelf: true });\n\n  @Output() readonly events = new EventEmitter<string>();\n  readonly events$ = this.events;\n  readonly deactivated$ = this.events$.pipe(\n    distinctUntilChanged(),\n    debounceTime(2),\n    tap((event) => { console.log('[RouterOutletFrame] deactivated:', event) }),\n    filter((event) => event === 'deactivated'),\n    \n  );\n\n  readonly outlet = viewChild(RouterOutlet);\n  readonly outlet$ = toObservable(this.outlet);\n  readonly _activated$ = this.outlet$.pipe(\n    switchMap((outlet) => outlet!.activateEvents),\n  );\n  readonly _deactivated$ = this.outlet$.pipe(\n    switchMap((outlet) => outlet!.deactivateEvents),\n  );\n  readonly hasNext$ = this.outlet$.pipe(\n    filter((outlet) => !!outlet),\n    switchMap((outlet) => {\n      return combineLatest({\n        activated: this._activated$.pipe(startWith(null)), \n        deactivated: this._deactivated$.pipe(startWith(null)),\n      }).pipe(\n        map(() => this.store.isActivated()(outlet)),\n        distinctUntilChanged(),\n      );\n    }),\n  );\n  readonly hasNext = toSignal(this.hasNext$);\n\n  constructor() {\n    super();\n    this.events$.subscribe((event) => {\n      if (this.store.skip() && this.parent) {\n        this.parent.events.emit(event);\n      }\n    });\n\n    this.deactivated$.subscribe(() => {\n      this.dispatch({id: ActionId.DEACTIVATED})\n    });\n  }\n}\n","import { inject, InjectionToken, runInInjectionContext, Signal, signal, WritableSignal } from '@angular/core';\nimport { CanActivateFn, CanDeactivateFn, Route, Routes } from '@angular/router';\nimport { NgAtomicComponent, _computed, recursiveWrapRoutes } from '@ng-atomic/core';\nimport { delay, of } from 'rxjs';\nimport { RouterOutletFrame } from './router-outlet.frame';\n\nfunction InjectableSignal<T>(name: string, defaultValue: T = null as T): InjectionToken<WritableSignal<T>> {\n  return new InjectionToken<Signal<T>>(name, {\n    providedIn: 'root',\n    factory: () => signal(defaultValue),\n  }) as InjectionToken<WritableSignal<T>>;\n}\nconst CURRENT_ROUTER_OUTLET = InjectableSignal<RouterOutletFrame>('CURRENT_ROUTER_OUTLET', null as unknown as RouterOutletFrame);\n\nexport const canDeactivateFn: CanDeactivateFn<NgAtomicComponent | undefined> = (component) => {\n\tconst current = inject(CURRENT_ROUTER_OUTLET);\n\tconst frame = component?.__injector ? runInInjectionContext(component?.__injector, () => {\n    return inject(RouterOutletFrame, { optional: true });\n  }) : null;\n\tif (frame) {\n\t\tcurrent.set(frame);\n\t\tframe.events.emit('deactivated');\n\t}\n  \n  return of(true).pipe(delay(0));\n}\n\nexport const canActivateFn: CanActivateFn = () => {\n\tconst current = inject(CURRENT_ROUTER_OUTLET);\n\tif (current()) {\n\t\tcurrent().events.emit('activated');\n\t}\n  \n\treturn of(true).pipe(delay(0))\n}\n\nexport function ngAtomicRoute(route: Route): Route {\n  if (route.redirectTo) return route;\n\n  return {\n    ...route,\n    canActivate: [canActivateFn, ...(route.canActivate || [])],\n    canDeactivate: [canDeactivateFn, ...(route.canDeactivate || [])],\n    data: { preload: true, ...route.data },\n  };\n}\n\nexport function ngAtomicRoutes(routes: Routes): Routes {\n  return recursiveWrapRoutes(routes, ngAtomicRoute);\n}","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ng-atomic-components-frames-scroll.mjs

@@ -24,7 +24,7 @@ class ScrollFrame {
   <div class="bottom">
     <ng-content select=[bottom]></ng-content>
   </div>
-  `, isInline: true, styles: [":host{--height: 100%;--height-SCOPED-IN-scroll-eV5m: var(--height);--top-height: 56px;--top-height-SCOPED-IN-scroll-eV5m: var(--top-height);--bottom-height: 56px;--bottom-height-SCOPED-IN-scroll-eV5m: var(--bottom-height);--contents-gap: 16px;--contents-gap-SCOPED-IN-scroll-eV5m: var(--contents-gap)}:host{display:flex;width:100%;flex-direction:column;justify-content:space-between;height:var(--height-SCOPED-IN-scroll-eV5m);overflow:hidden}:host .top{height:fit-content;transition:.5s height;touch-action:none}:host .contents{display:flex;flex:auto;flex-direction:column;gap:var(--contents-gap-SCOPED-IN-scroll-eV5m);transition:.5s height;overflow:scroll;box-sizing:border-box;-webkit-overflow-scrolling:touch}:host .contents::-webkit-scrollbar{display:none}:host .bottom{height:fit-content}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{--height: 100%;--height-SCOPED-IN-scroll-elte: var(--height);--top-height: 56px;--top-height-SCOPED-IN-scroll-elte: var(--top-height);--bottom-height: 56px;--bottom-height-SCOPED-IN-scroll-elte: var(--bottom-height);--contents-gap: 16px;--contents-gap-SCOPED-IN-scroll-elte: var(--contents-gap)}:host{display:flex;width:100%;flex-direction:column;justify-content:space-between;height:var(--height-SCOPED-IN-scroll-elte);overflow:hidden}:host .top{height:fit-content;transition:.5s height;touch-action:none}:host .contents{display:flex;flex:auto;flex-direction:column;gap:var(--contents-gap-SCOPED-IN-scroll-elte);transition:.5s height;overflow:scroll;box-sizing:border-box;-webkit-overflow-scrolling:touch}:host .contents::-webkit-scrollbar{display:none}:host .bottom{height:fit-content}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ScrollFrame, decorators: [{
             type: Component,
@@ -38,7 +38,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
   <div class="bottom">
     <ng-content select=[bottom]></ng-content>
   </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--height: 100%;--height-SCOPED-IN-scroll-eV5m: var(--height);--top-height: 56px;--top-height-SCOPED-IN-scroll-eV5m: var(--top-height);--bottom-height: 56px;--bottom-height-SCOPED-IN-scroll-eV5m: var(--bottom-height);--contents-gap: 16px;--contents-gap-SCOPED-IN-scroll-eV5m: var(--contents-gap)}:host{display:flex;width:100%;flex-direction:column;justify-content:space-between;height:var(--height-SCOPED-IN-scroll-eV5m);overflow:hidden}:host .top{height:fit-content;transition:.5s height;touch-action:none}:host .contents{display:flex;flex:auto;flex-direction:column;gap:var(--contents-gap-SCOPED-IN-scroll-eV5m);transition:.5s height;overflow:scroll;box-sizing:border-box;-webkit-overflow-scrolling:touch}:host .contents::-webkit-scrollbar{display:none}:host .bottom{height:fit-content}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--height: 100%;--height-SCOPED-IN-scroll-elte: var(--height);--top-height: 56px;--top-height-SCOPED-IN-scroll-elte: var(--top-height);--bottom-height: 56px;--bottom-height-SCOPED-IN-scroll-elte: var(--bottom-height);--contents-gap: 16px;--contents-gap-SCOPED-IN-scroll-elte: var(--contents-gap)}:host{display:flex;width:100%;flex-direction:column;justify-content:space-between;height:var(--height-SCOPED-IN-scroll-elte);overflow:hidden}:host .top{height:fit-content;transition:.5s height;touch-action:none}:host .contents{display:flex;flex:auto;flex-direction:column;gap:var(--contents-gap-SCOPED-IN-scroll-elte);transition:.5s height;overflow:scroll;box-sizing:border-box;-webkit-overflow-scrolling:touch}:host .contents::-webkit-scrollbar{display:none}:host .bottom{height:fit-content}\n"] }]
         }], propDecorators: { contents: [{ type: i0.ViewChild, args: ['contents', { isSignal: true }] }] } });
 
 /**

package/fesm2022/ng-atomic-components-frames-side-nav.mjs

@@ -122,7 +122,7 @@ class SideNavFrame extends NgAtomicComponent {
     }
   </ng-template>
   <ng-template #contents><ng-content/></ng-template>
-  `, isInline: true, styles: [":host{--primary-color: #404040;--primary-color-SCOPED-IN-side-nav-XOy4: var(--primary-color);--secondary-color: #B0B0B0;--secondary-color-SCOPED-IN-side-nav-XOy4: var(--secondary-color);--background-color: #B0B0B0;--background-color-SCOPED-IN-side-nav-XOy4: var(--background-color);--on-background-color: #f0f0f0;--on-background-color-SCOPED-IN-side-nav-XOy4: var(--on-background-color);--surface-color: transparent;--surface-color-SCOPED-IN-side-nav-XOy4: var(--surface-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-side-nav-XOy4: var(--on-primary-color);--on-surface-color: #f0f0f0;--on-surface-color-SCOPED-IN-side-nav-XOy4: var(--on-surface-color);--menu-width: 220px;--menu-width-SCOPED-IN-side-nav-XOy4: var(--menu-width);--menu-background-color: var(--primary-color-SCOPED-IN-side-nav-XOy4);--menu-background-color-SCOPED-IN-side-nav-XOy4: var(--menu-background-color);--menu-on-background-color: var(--on-primary-color-SCOPED-IN-side-nav-XOy4);--menu-on-background-color-SCOPED-IN-side-nav-XOy4: var(--menu-on-background-color)}:host{display:block;width:100%;height:100%}:host *{--primary-color: var(--primary-color-SCOPED-IN-side-nav-XOy4);--secondary-color: var(--secondary-color-SCOPED-IN-side-nav-XOy4);--surface-color: var(--surface-color-SCOPED-IN-side-nav-XOy4);--background-color: var(--background-color-SCOPED-IN-side-nav-XOy4);--on-background-color: var(--on-background-color-SCOPED-IN-side-nav-XOy4);--on-primary-color: var(--on-primary-color-SCOPED-IN-side-nav-XOy4);--on-surface-color: var(--on-surface-color-SCOPED-IN-side-nav-XOy4)}:host .content{width:100%;height:100%}:host templates-icon-button-menu,:host templates-menu{width:var(--menu-width-SCOPED-IN-side-nav-XOy4);--background-color: var(--menu-background-color-SCOPED-IN-side-nav-XOy4);--on-background-color: var(--menu-on-background-color-SCOPED-IN-side-nav-XOy4)}:host[frame=lineup] .content{width:calc(100vw - var(--menu-width-SCOPED-IN-side-nav-XOy4));overflow:hidden}:host[frame=drawer] .menu,:host[frame=drawer] templates-menu{width:300px;height:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DrawerFrame, selector: "frames-drawer" }, { kind: "component", type: LineUpFrame, selector: "frames-line-up" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [import('@ng-atomic/components/templates/icon-button-menu').then(m => m.IconButtonMenuTemplateStore)], () => [import('@ng-atomic/components/templates/menu').then(m => m.MenuTemplateStore)]] }); }
+  `, isInline: true, styles: [":host{--primary-color: #404040;--primary-color-SCOPED-IN-side-nav-sBA9: var(--primary-color);--secondary-color: #B0B0B0;--secondary-color-SCOPED-IN-side-nav-sBA9: var(--secondary-color);--background-color: #B0B0B0;--background-color-SCOPED-IN-side-nav-sBA9: var(--background-color);--on-background-color: #f0f0f0;--on-background-color-SCOPED-IN-side-nav-sBA9: var(--on-background-color);--surface-color: transparent;--surface-color-SCOPED-IN-side-nav-sBA9: var(--surface-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-side-nav-sBA9: var(--on-primary-color);--on-surface-color: #f0f0f0;--on-surface-color-SCOPED-IN-side-nav-sBA9: var(--on-surface-color);--menu-width: 220px;--menu-width-SCOPED-IN-side-nav-sBA9: var(--menu-width);--menu-background-color: var(--primary-color-SCOPED-IN-side-nav-sBA9);--menu-background-color-SCOPED-IN-side-nav-sBA9: var(--menu-background-color);--menu-on-background-color: var(--on-primary-color-SCOPED-IN-side-nav-sBA9);--menu-on-background-color-SCOPED-IN-side-nav-sBA9: var(--menu-on-background-color)}:host{display:block;width:100%;height:100%}:host *{--primary-color: var(--primary-color-SCOPED-IN-side-nav-sBA9);--secondary-color: var(--secondary-color-SCOPED-IN-side-nav-sBA9);--surface-color: var(--surface-color-SCOPED-IN-side-nav-sBA9);--background-color: var(--background-color-SCOPED-IN-side-nav-sBA9);--on-background-color: var(--on-background-color-SCOPED-IN-side-nav-sBA9);--on-primary-color: var(--on-primary-color-SCOPED-IN-side-nav-sBA9);--on-surface-color: var(--on-surface-color-SCOPED-IN-side-nav-sBA9)}:host .content{width:100%;height:100%}:host templates-icon-button-menu,:host templates-menu{width:var(--menu-width-SCOPED-IN-side-nav-sBA9);--background-color: var(--menu-background-color-SCOPED-IN-side-nav-sBA9);--on-background-color: var(--menu-on-background-color-SCOPED-IN-side-nav-sBA9)}:host[frame=lineup] .content{width:calc(100vw - var(--menu-width-SCOPED-IN-side-nav-sBA9));overflow:hidden}:host[frame=drawer] .menu,:host[frame=drawer] templates-menu{width:300px;height:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DrawerFrame, selector: "frames-drawer" }, { kind: "component", type: LineUpFrame, selector: "frames-line-up" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [import('@ng-atomic/components/templates/icon-button-menu').then(m => m.IconButtonMenuTemplateStore)], () => [import('@ng-atomic/components/templates/menu').then(m => m.MenuTemplateStore)]] }); }
 }
 i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.1.6", ngImport: i0, type: SideNavFrame, resolveDeferredDeps: () => [import('@ng-atomic/components/templates/icon-button-menu').then(m => m.IconButtonMenuTemplateStore), import('@ng-atomic/components/templates/menu').then(m => m.MenuTemplateStore)], resolveMetadata: (IconButtonMenuTemplateStore, MenuTemplateStore) => ({ decorators: [{
                 type: Component,
@@ -190,7 +190,7 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.1.6", ng
                                     'iconButtonMenuTopPadding',
                                 ],
                             },
-                        ], styles: [":host{--primary-color: #404040;--primary-color-SCOPED-IN-side-nav-XOy4: var(--primary-color);--secondary-color: #B0B0B0;--secondary-color-SCOPED-IN-side-nav-XOy4: var(--secondary-color);--background-color: #B0B0B0;--background-color-SCOPED-IN-side-nav-XOy4: var(--background-color);--on-background-color: #f0f0f0;--on-background-color-SCOPED-IN-side-nav-XOy4: var(--on-background-color);--surface-color: transparent;--surface-color-SCOPED-IN-side-nav-XOy4: var(--surface-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-side-nav-XOy4: var(--on-primary-color);--on-surface-color: #f0f0f0;--on-surface-color-SCOPED-IN-side-nav-XOy4: var(--on-surface-color);--menu-width: 220px;--menu-width-SCOPED-IN-side-nav-XOy4: var(--menu-width);--menu-background-color: var(--primary-color-SCOPED-IN-side-nav-XOy4);--menu-background-color-SCOPED-IN-side-nav-XOy4: var(--menu-background-color);--menu-on-background-color: var(--on-primary-color-SCOPED-IN-side-nav-XOy4);--menu-on-background-color-SCOPED-IN-side-nav-XOy4: var(--menu-on-background-color)}:host{display:block;width:100%;height:100%}:host *{--primary-color: var(--primary-color-SCOPED-IN-side-nav-XOy4);--secondary-color: var(--secondary-color-SCOPED-IN-side-nav-XOy4);--surface-color: var(--surface-color-SCOPED-IN-side-nav-XOy4);--background-color: var(--background-color-SCOPED-IN-side-nav-XOy4);--on-background-color: var(--on-background-color-SCOPED-IN-side-nav-XOy4);--on-primary-color: var(--on-primary-color-SCOPED-IN-side-nav-XOy4);--on-surface-color: var(--on-surface-color-SCOPED-IN-side-nav-XOy4)}:host .content{width:100%;height:100%}:host templates-icon-button-menu,:host templates-menu{width:var(--menu-width-SCOPED-IN-side-nav-XOy4);--background-color: var(--menu-background-color-SCOPED-IN-side-nav-XOy4);--on-background-color: var(--menu-on-background-color-SCOPED-IN-side-nav-XOy4)}:host[frame=lineup] .content{width:calc(100vw - var(--menu-width-SCOPED-IN-side-nav-XOy4));overflow:hidden}:host[frame=drawer] .menu,:host[frame=drawer] templates-menu{width:300px;height:100%}\n"] }]
+                        ], styles: [":host{--primary-color: #404040;--primary-color-SCOPED-IN-side-nav-sBA9: var(--primary-color);--secondary-color: #B0B0B0;--secondary-color-SCOPED-IN-side-nav-sBA9: var(--secondary-color);--background-color: #B0B0B0;--background-color-SCOPED-IN-side-nav-sBA9: var(--background-color);--on-background-color: #f0f0f0;--on-background-color-SCOPED-IN-side-nav-sBA9: var(--on-background-color);--surface-color: transparent;--surface-color-SCOPED-IN-side-nav-sBA9: var(--surface-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-side-nav-sBA9: var(--on-primary-color);--on-surface-color: #f0f0f0;--on-surface-color-SCOPED-IN-side-nav-sBA9: var(--on-surface-color);--menu-width: 220px;--menu-width-SCOPED-IN-side-nav-sBA9: var(--menu-width);--menu-background-color: var(--primary-color-SCOPED-IN-side-nav-sBA9);--menu-background-color-SCOPED-IN-side-nav-sBA9: var(--menu-background-color);--menu-on-background-color: var(--on-primary-color-SCOPED-IN-side-nav-sBA9);--menu-on-background-color-SCOPED-IN-side-nav-sBA9: var(--menu-on-background-color)}:host{display:block;width:100%;height:100%}:host *{--primary-color: var(--primary-color-SCOPED-IN-side-nav-sBA9);--secondary-color: var(--secondary-color-SCOPED-IN-side-nav-sBA9);--surface-color: var(--surface-color-SCOPED-IN-side-nav-sBA9);--background-color: var(--background-color-SCOPED-IN-side-nav-sBA9);--on-background-color: var(--on-background-color-SCOPED-IN-side-nav-sBA9);--on-primary-color: var(--on-primary-color-SCOPED-IN-side-nav-sBA9);--on-surface-color: var(--on-surface-color-SCOPED-IN-side-nav-sBA9)}:host .content{width:100%;height:100%}:host templates-icon-button-menu,:host templates-menu{width:var(--menu-width-SCOPED-IN-side-nav-sBA9);--background-color: var(--menu-background-color-SCOPED-IN-side-nav-sBA9);--on-background-color: var(--menu-on-background-color-SCOPED-IN-side-nav-sBA9)}:host[frame=lineup] .content{width:calc(100vw - var(--menu-width-SCOPED-IN-side-nav-sBA9));overflow:hidden}:host[frame=drawer] .menu,:host[frame=drawer] templates-menu{width:300px;height:100%}\n"] }]
             }], ctorParameters: null, propDecorators: null }) });
 
 /**

package/fesm2022/ng-atomic-components-frames-smart-menu.mjs

@@ -14,13 +14,13 @@ class SmartMenuFrame {
         return page === 'Blank' ? 'Blank' : this.isMainHidden ? `Next` : `NextWithMainPage`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: SmartMenuFrame, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.6", type: SmartMenuFrame, isStandalone: true, selector: "frames-smart-menu", inputs: { label: "label", outlet: "outlet", minNextWidth: "minNextWidth" }, host: { properties: { "attr.is-main-hidden": "this.isMainHidden" } }, viewQueries: [{ propertyName: "next", first: true, predicate: ["next"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"menu\" #menu>\n  <ng-content select=\"[menu]\"></ng-content>\n</div>\n<div class=\"contents\" #contents>\n  <ng-content select=\"[contents]\"></ng-content>\n</div>", styles: [":host{--gap: 1px;--gap-SCOPED-IN-smart-menu-odSI: var(--gap);--background: #ccc;--background-SCOPED-IN-smart-menu-odSI: var(--background);--contents-background: transparent;--contents-background-SCOPED-IN-smart-menu-odSI: var(--contents-background)}:host{position:relative;display:flex;justify-content:flex-start;gap:var(--gap-SCOPED-IN-smart-menu-odSI);width:fit-content;height:100%;background:var(--background-SCOPED-IN-smart-menu-odSI)}:host .contents{display:flex;max-width:fit-content;height:100%;background:var(--contents-background-SCOPED-IN-smart-menu-odSI)}:host .contents.menu{overflow:hidden;justify-content:flex-end}:host .contents.contents{overflow:visible;justify-content:flex-start}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.6", type: SmartMenuFrame, isStandalone: true, selector: "frames-smart-menu", inputs: { label: "label", outlet: "outlet", minNextWidth: "minNextWidth" }, host: { properties: { "attr.is-main-hidden": "this.isMainHidden" } }, viewQueries: [{ propertyName: "next", first: true, predicate: ["next"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"menu\" #menu>\n  <ng-content select=\"[menu]\"></ng-content>\n</div>\n<div class=\"contents\" #contents>\n  <ng-content select=\"[contents]\"></ng-content>\n</div>", styles: [":host{--gap: 1px;--gap-SCOPED-IN-smart-menu-qWUQ: var(--gap);--background: #ccc;--background-SCOPED-IN-smart-menu-qWUQ: var(--background);--contents-background: transparent;--contents-background-SCOPED-IN-smart-menu-qWUQ: var(--contents-background)}:host{position:relative;display:flex;justify-content:flex-start;gap:var(--gap-SCOPED-IN-smart-menu-qWUQ);width:fit-content;height:100%;background:var(--background-SCOPED-IN-smart-menu-qWUQ)}:host .contents{display:flex;max-width:fit-content;height:100%;background:var(--contents-background-SCOPED-IN-smart-menu-qWUQ)}:host .contents.menu{overflow:hidden;justify-content:flex-end}:host .contents.contents{overflow:visible;justify-content:flex-start}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: SmartMenuFrame, decorators: [{
             type: Component,
             args: [{ imports: [
                         CommonModule,
-                    ], selector: 'frames-smart-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"menu\" #menu>\n  <ng-content select=\"[menu]\"></ng-content>\n</div>\n<div class=\"contents\" #contents>\n  <ng-content select=\"[contents]\"></ng-content>\n</div>", styles: [":host{--gap: 1px;--gap-SCOPED-IN-smart-menu-odSI: var(--gap);--background: #ccc;--background-SCOPED-IN-smart-menu-odSI: var(--background);--contents-background: transparent;--contents-background-SCOPED-IN-smart-menu-odSI: var(--contents-background)}:host{position:relative;display:flex;justify-content:flex-start;gap:var(--gap-SCOPED-IN-smart-menu-odSI);width:fit-content;height:100%;background:var(--background-SCOPED-IN-smart-menu-odSI)}:host .contents{display:flex;max-width:fit-content;height:100%;background:var(--contents-background-SCOPED-IN-smart-menu-odSI)}:host .contents.menu{overflow:hidden;justify-content:flex-end}:host .contents.contents{overflow:visible;justify-content:flex-start}\n"] }]
+                    ], selector: 'frames-smart-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"menu\" #menu>\n  <ng-content select=\"[menu]\"></ng-content>\n</div>\n<div class=\"contents\" #contents>\n  <ng-content select=\"[contents]\"></ng-content>\n</div>", styles: [":host{--gap: 1px;--gap-SCOPED-IN-smart-menu-qWUQ: var(--gap);--background: #ccc;--background-SCOPED-IN-smart-menu-qWUQ: var(--background);--contents-background: transparent;--contents-background-SCOPED-IN-smart-menu-qWUQ: var(--contents-background)}:host{position:relative;display:flex;justify-content:flex-start;gap:var(--gap-SCOPED-IN-smart-menu-qWUQ);width:fit-content;height:100%;background:var(--background-SCOPED-IN-smart-menu-qWUQ)}:host .contents{display:flex;max-width:fit-content;height:100%;background:var(--contents-background-SCOPED-IN-smart-menu-qWUQ)}:host .contents.menu{overflow:hidden;justify-content:flex-end}:host .contents.contents{overflow:visible;justify-content:flex-start}\n"] }]
         }], propDecorators: { isMainHidden: [{
                 type: HostBinding,
                 args: ['attr.is-main-hidden']

package/fesm2022/ng-atomic-components-frames-vertical-hide.mjs

@@ -10,7 +10,7 @@ class VerticalHideFrame {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.6", type: VerticalHideFrame, isStandalone: true, selector: "frames-vertical-hide", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.mode": "mode()" } }, ngImport: i0, template: `
     <ng-content />
     <organisms-vertical-divider />
-  `, isInline: true, styles: [":host{--collapsed-height: 56px;--collapsed-height-SCOPED-IN-vertical-hide-NYQY: var(--collapsed-height);--expanded-height: fit-height;--expanded-height-SCOPED-IN-vertical-hide-NYQY: var(--expanded-height)}:host{position:relative;display:block;transition:.5s max-height linear;overflow:hidden}:host organisms-vertical-divider{position:absolute;bottom:0;width:100%}:host[mode=collapsed]{max-height:var(--collapsed-height-SCOPED-IN-vertical-hide-NYQY)}:host[mode=expanded]{max-height:100vh}\n"], dependencies: [{ kind: "component", type: VerticalDividerOrganism, selector: "organisms-vertical-divider" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{--collapsed-height: 56px;--collapsed-height-SCOPED-IN-vertical-hide-wqrp: var(--collapsed-height);--expanded-height: fit-height;--expanded-height-SCOPED-IN-vertical-hide-wqrp: var(--expanded-height)}:host{position:relative;display:block;transition:.5s max-height linear;overflow:hidden}:host organisms-vertical-divider{position:absolute;bottom:0;width:100%}:host[mode=collapsed]{max-height:var(--collapsed-height-SCOPED-IN-vertical-hide-wqrp)}:host[mode=expanded]{max-height:100vh}\n"], dependencies: [{ kind: "component", type: VerticalDividerOrganism, selector: "organisms-vertical-divider" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: VerticalHideFrame, decorators: [{
             type: Component,
@@ -19,7 +19,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
                     ], template: `
     <ng-content />
     <organisms-vertical-divider />
-  `, host: { '[attr.mode]': 'mode()' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--collapsed-height: 56px;--collapsed-height-SCOPED-IN-vertical-hide-NYQY: var(--collapsed-height);--expanded-height: fit-height;--expanded-height-SCOPED-IN-vertical-hide-NYQY: var(--expanded-height)}:host{position:relative;display:block;transition:.5s max-height linear;overflow:hidden}:host organisms-vertical-divider{position:absolute;bottom:0;width:100%}:host[mode=collapsed]{max-height:var(--collapsed-height-SCOPED-IN-vertical-hide-NYQY)}:host[mode=expanded]{max-height:100vh}\n"] }]
+  `, host: { '[attr.mode]': 'mode()' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--collapsed-height: 56px;--collapsed-height-SCOPED-IN-vertical-hide-wqrp: var(--collapsed-height);--expanded-height: fit-height;--expanded-height-SCOPED-IN-vertical-hide-wqrp: var(--expanded-height)}:host{position:relative;display:block;transition:.5s max-height linear;overflow:hidden}:host organisms-vertical-divider{position:absolute;bottom:0;width:100%}:host[mode=collapsed]{max-height:var(--collapsed-height-SCOPED-IN-vertical-hide-wqrp)}:host[mode=expanded]{max-height:100vh}\n"] }]
         }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }] } });
 
 /**

package/fesm2022/ng-atomic-components-frames.mjs

@@ -34,7 +34,6 @@ function provideFrames() {
         provideComponent(ColumnsFrameStore, () => import('@ng-atomic/components/frames/columns').then(m => m.ColumnsFrame)),
         FabFrameStore.Config.provide(),
         provideComponent(FabFrameStore, () => import('@ng-atomic/components/frames/fab').then(m => m.FabFrame)),
-        // DrawerFrameStore.Config.provide(),
         provideComponent(DrawerFrameStore, () => import('@ng-atomic/components/frames/drawer').then(m => m.DrawerFrame)),
         SideNavFrameStore.Config.provide(),
         provideComponent(SideNavFrame, () => import('@ng-atomic/components/frames/side-nav').then(m => m.SideNavFrame)),
@@ -43,7 +42,6 @@ function provideFrames() {
         RouterOutletFrameStore.provideDefault(),
         BreadcrumbNavbarFrameStore.Config.provide(),
         provideComponent(BreadcrumbNavbarFrameStore, () => import('@ng-atomic/components/frames/breadcrumb-navbar').then(m => m.BreadcrumbNavbarFrame)),
-        // provideComponent(SideAppFrameStore, () => import('@ng-atomic/components/frames/side-app').then(m => m.SideAppFrame)),
     ];
 }
 

package/fesm2022/ng-atomic-components-frames.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-atomic-components-frames.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/frames/frames.module.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/ng-atomic-components-frames.ts"],"sourcesContent":["import { NgModule, Provider } from '@angular/core';\nimport { provideComponent } from '@ng-atomic/core';\nimport { SideNavFrame, SideNavFrameStore } from '@ng-atomic/components/frames/side-nav';\nimport { RouterOutletFrameStore } from '@ng-atomic/components/frames/router-outlet';\nimport { ColumnsFrameStore } from '@ng-atomic/components/frames/columns';\nimport { AppFrameStore } from '@ng-atomic/components/frames/app';\nimport { DrawerFrameStore } from '@ng-atomic/components/frames/drawer';\nimport { FabFrameStore } from '@ng-atomic/components/frames/fab';\nimport { BreadcrumbNavbarFrameStore } from '@ng-atomic/components/frames/breadcrumb-navbar';\nimport { SideAppFrameStore } from '@ng-atomic/components/frames/side-app';\n\n@NgModule({})\nexport class NgAtomicFramesModule {\n  static forRoot() {\n    return {\n      ngModule: NgAtomicFramesModule,\n      providers: [\n        ...provideFrames()\n      ]\n    };\n  }\n}\n\nexport function provideFrames(): Provider[] {\n  return [\n    AppFrameStore.provideDefault(),\n    provideComponent(AppFrameStore, () => import('@ng-atomic/components/frames/app').then(m => m.AppFrame)),\n    ColumnsFrameStore.Config.provide(),\n    provideComponent(ColumnsFrameStore, () => import('@ng-atomic/components/frames/columns').then(m => m.ColumnsFrame)),\n    FabFrameStore.Config.provide(),\n    provideComponent(FabFrameStore, () => import('@ng-atomic/components/frames/fab').then(m => m.FabFrame)),\n    // DrawerFrameStore.Config.provide(),\n    provideComponent(DrawerFrameStore, () => import('@ng-atomic/components/frames/drawer').then(m => m.DrawerFrame)),\n    SideNavFrameStore.Config.provide(),\n    provideComponent(SideNavFrame, () => import('@ng-atomic/components/frames/side-nav').then(m => m.SideNavFrame)),\n    RouterOutletFrameStore.Config.provide(),\n    provideComponent(RouterOutletFrameStore, () => import('@ng-atomic/components/frames/router-outlet').then(m => m.RouterOutletFrame)),\n    RouterOutletFrameStore.provideDefault(),\n    BreadcrumbNavbarFrameStore.Config.provide(),\n    provideComponent(BreadcrumbNavbarFrameStore, () => import('@ng-atomic/components/frames/breadcrumb-navbar').then(m => m.BreadcrumbNavbarFrame)),\n    // provideComponent(SideAppFrameStore, () => import('@ng-atomic/components/frames/side-app').then(m => m.SideAppFrame)),\n  ];\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;MAYa,oBAAoB,CAAA;AAC/B,IAAA,OAAO,OAAO,GAAA;QACZ,OAAO;AACL,YAAA,QAAQ,EAAE,oBAAoB;AAC9B,YAAA,SAAS,EAAE;AACT,gBAAA,GAAG,aAAa;AACjB;SACF;IACH;8GARW,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;+GAApB,oBAAoB,EAAA,CAAA,CAAA;+GAApB,oBAAoB,EAAA,CAAA,CAAA;;2FAApB,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBADhC,QAAQ;mBAAC,EAAE;;SAYI,aAAa,GAAA;IAC3B,OAAO;QACL,aAAa,CAAC,cAAc,EAAE;QAC9B,gBAAgB,CAAC,aAAa,EAAE,MAAM,OAAO,kCAAkC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC;AACvG,QAAA,iBAAiB,CAAC,MAAM,CAAC,OAAO,EAAE;QAClC,gBAAgB,CAAC,iBAAiB,EAAE,MAAM,OAAO,sCAAsC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,YAAY,CAAC,CAAC;AACnH,QAAA,aAAa,CAAC,MAAM,CAAC,OAAO,EAAE;QAC9B,gBAAgB,CAAC,aAAa,EAAE,MAAM,OAAO,kCAAkC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC;;QAEvG,gBAAgB,CAAC,gBAAgB,EAAE,MAAM,OAAO,qCAAqC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,CAAC;AAChH,QAAA,iBAAiB,CAAC,MAAM,CAAC,OAAO,EAAE;QAClC,gBAAgB,CAAC,YAAY,EAAE,MAAM,OAAO,uCAAuC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,YAAY,CAAC,CAAC;AAC/G,QAAA,sBAAsB,CAAC,MAAM,CAAC,OAAO,EAAE;QACvC,gBAAgB,CAAC,sBAAsB,EAAE,MAAM,OAAO,4CAA4C,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,iBAAiB,CAAC,CAAC;QACnI,sBAAsB,CAAC,cAAc,EAAE;AACvC,QAAA,0BAA0B,CAAC,MAAM,CAAC,OAAO,EAAE;QAC3C,gBAAgB,CAAC,0BAA0B,EAAE,MAAM,OAAO,gDAAgD,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,qBAAqB,CAAC,CAAC;;KAEhJ;AACH;;AC1CA;;AAEG;;;;"}
+{"version":3,"file":"ng-atomic-components-frames.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/frames/frames.module.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/ng-atomic-components-frames.ts"],"sourcesContent":["import { NgModule, Provider } from '@angular/core';\nimport { provideComponent } from '@ng-atomic/core';\nimport { SideNavFrame, SideNavFrameStore } from '@ng-atomic/components/frames/side-nav';\nimport { RouterOutletFrameStore } from '@ng-atomic/components/frames/router-outlet';\nimport { ColumnsFrameStore } from '@ng-atomic/components/frames/columns';\nimport { AppFrameStore } from '@ng-atomic/components/frames/app';\nimport { DrawerFrameStore } from '@ng-atomic/components/frames/drawer';\nimport { FabFrameStore } from '@ng-atomic/components/frames/fab';\nimport { BreadcrumbNavbarFrameStore } from '@ng-atomic/components/frames/breadcrumb-navbar';\n\n@NgModule({})\nexport class NgAtomicFramesModule {\n  static forRoot() {\n    return {\n      ngModule: NgAtomicFramesModule,\n      providers: [\n        ...provideFrames()\n      ]\n    };\n  }\n}\n\nexport function provideFrames(): Provider[] {\n  return [\n    AppFrameStore.provideDefault(),\n    provideComponent(AppFrameStore, () => import('@ng-atomic/components/frames/app').then(m => m.AppFrame)),\n    ColumnsFrameStore.Config.provide(),\n    provideComponent(ColumnsFrameStore, () => import('@ng-atomic/components/frames/columns').then(m => m.ColumnsFrame)),\n    FabFrameStore.Config.provide(),\n    provideComponent(FabFrameStore, () => import('@ng-atomic/components/frames/fab').then(m => m.FabFrame)),\n    provideComponent(DrawerFrameStore, () => import('@ng-atomic/components/frames/drawer').then(m => m.DrawerFrame)),\n    SideNavFrameStore.Config.provide(),\n    provideComponent(SideNavFrame, () => import('@ng-atomic/components/frames/side-nav').then(m => m.SideNavFrame)),\n    RouterOutletFrameStore.Config.provide(),\n    provideComponent(RouterOutletFrameStore, () => import('@ng-atomic/components/frames/router-outlet').then(m => m.RouterOutletFrame)),\n    RouterOutletFrameStore.provideDefault(),\n    BreadcrumbNavbarFrameStore.Config.provide(),\n    provideComponent(BreadcrumbNavbarFrameStore, () => import('@ng-atomic/components/frames/breadcrumb-navbar').then(m => m.BreadcrumbNavbarFrame)),\n  ];\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;MAWa,oBAAoB,CAAA;AAC/B,IAAA,OAAO,OAAO,GAAA;QACZ,OAAO;AACL,YAAA,QAAQ,EAAE,oBAAoB;AAC9B,YAAA,SAAS,EAAE;AACT,gBAAA,GAAG,aAAa;AACjB;SACF;IACH;8GARW,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;+GAApB,oBAAoB,EAAA,CAAA,CAAA;+GAApB,oBAAoB,EAAA,CAAA,CAAA;;2FAApB,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBADhC,QAAQ;mBAAC,EAAE;;SAYI,aAAa,GAAA;IAC3B,OAAO;QACL,aAAa,CAAC,cAAc,EAAE;QAC9B,gBAAgB,CAAC,aAAa,EAAE,MAAM,OAAO,kCAAkC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC;AACvG,QAAA,iBAAiB,CAAC,MAAM,CAAC,OAAO,EAAE;QAClC,gBAAgB,CAAC,iBAAiB,EAAE,MAAM,OAAO,sCAAsC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,YAAY,CAAC,CAAC;AACnH,QAAA,aAAa,CAAC,MAAM,CAAC,OAAO,EAAE;QAC9B,gBAAgB,CAAC,aAAa,EAAE,MAAM,OAAO,kCAAkC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC;QACvG,gBAAgB,CAAC,gBAAgB,EAAE,MAAM,OAAO,qCAAqC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,CAAC;AAChH,QAAA,iBAAiB,CAAC,MAAM,CAAC,OAAO,EAAE;QAClC,gBAAgB,CAAC,YAAY,EAAE,MAAM,OAAO,uCAAuC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,YAAY,CAAC,CAAC;AAC/G,QAAA,sBAAsB,CAAC,MAAM,CAAC,OAAO,EAAE;QACvC,gBAAgB,CAAC,sBAAsB,EAAE,MAAM,OAAO,4CAA4C,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,iBAAiB,CAAC,CAAC;QACnI,sBAAsB,CAAC,cAAc,EAAE;AACvC,QAAA,0BAA0B,CAAC,MAAM,CAAC,OAAO,EAAE;QAC3C,gBAAgB,CAAC,0BAA0B,EAAE,MAAM,OAAO,gDAAgD,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,qBAAqB,CAAC,CAAC;KAChJ;AACH;;ACvCA;;AAEG;;;;"}

package/fesm2022/ng-atomic-components-molecules-action-input-field.mjs

@@ -26,9 +26,6 @@ class ActionInputFieldMolecule extends NgAtomicComponent {
         this._actions = value;
     }
     ngAfterViewInit() {
-        // this.formField._getDisplayedMessages = function (): 'error' | 'hint' {
-        //   return this._errorChildren && this._errorChildren.length > 0 ? 'error' : 'hint';
-        // };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ActionInputFieldMolecule, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: ActionInputFieldMolecule, isStandalone: true, selector: "molecules-action-input-field", inputs: { appearance: "appearance", type: "type", name: "name", label: "label", control: "control", placeholder: "placeholder", hint: "hint", actions: "actions" }, viewQueries: [{ propertyName: "formField", first: true, predicate: MatFormField, descendants: true }, { propertyName: "input", first: true, predicate: ["matInput"], descendants: true, read: MatInput }], usesInheritance: true, ngImport: i0, template: `

package/fesm2022/ng-atomic-components-molecules-action-input-field.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-atomic-components-molecules-action-input-field.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/molecules/action-input-field/action-input-field.molecule.ts","../../../../../packages/@ng-atomic/components/src/lib/molecules/action-input-field/ng-atomic-components-molecules-action-input-field.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input, Pipe, ViewChild, AfterViewInit } from '@angular/core';\n\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { MatInput, MatInputModule } from '@angular/material/input';\nimport { Action } from '@ng-atomic/core';\nimport { SmartMenuButtonAtom } from '@ng-atomic/components/atoms/menu-button';\nimport { NgAtomicComponent } from '@ng-atomic/core';\nimport { MatFormField } from '@angular/material/form-field';\nimport { ErrorPipe } from '@ng-atomic/common/pipes/error';\nimport { startWith } from 'rxjs';\n\n\n@Component({\n    selector: 'molecules-action-input-field',\n    imports: [\n    ReactiveFormsModule,\n    MatInputModule,\n    SmartMenuButtonAtom,\n    ErrorPipe\n],\n    template: `\n  <mat-form-field class=\"mat-form-field-disabled\" [appearance]=\"appearance\">\n    <mat-label>{{ label }}</mat-label>\n    <input matInput [name]=\"name\" type=\"text\" [formControl]=\"control\" [placeholder]=\"placeholder\">\n    <!-- <mat-icon matSuffix>sentiment_very_satisfied</mat-icon> -->\n    @if (hint) {\n      <mat-hint>{{ hint }}</mat-hint>\n    }\n    <mat-error>{{ control.errors | error }}</mat-error>\n  </mat-form-field>\n  <atoms-menu-button\n    [actions]=\"actions\"\n    (action)=\"dispatch($event)\"\n  ></atoms-menu-button>\n  `,\n    styleUrls: ['./action-input-field.molecule.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ActionInputFieldMolecule extends NgAtomicComponent implements AfterViewInit {\n\n  @ViewChild(MatFormField)\n  formField!: MatFormField;\n\n  @ViewChild('matInput', { read: MatInput })\n  input!: MatInput;\n\n  @Input()\n  appearance: 'outline' | 'fill' = 'outline';\n\n  @Input()\n  type: 'text' | 'number' | 'password' = 'text';\n\n  @Input()\n  name?: string;\n\n  @Input()\n  label = 'label';\n\n  @Input()\n  control = new FormControl<string>('');\n\n  @Input()\n  placeholder = 'placeholder';\n\n  @Input()\n  hint?: string;\n\n  @Input()\n  get actions(): Action[] {\n    return this._actions.map((action) => ({...action}));\n  }\n  set actions(value: Action[]) {\n    this._actions = value;\n  }\n  private _actions: Action[] = [];\n\n  ngAfterViewInit() {\n    // this.formField._getDisplayedMessages = function (): 'error' | 'hint' {\n    //   return this._errorChildren && this._errorChildren.length > 0 ? 'error' : 'hint';\n    // };\n  }\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":"ng-atomic-components-molecules-action-input-field.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/molecules/action-input-field/action-input-field.molecule.ts","../../../../../packages/@ng-atomic/components/src/lib/molecules/action-input-field/ng-atomic-components-molecules-action-input-field.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input, Pipe, ViewChild, AfterViewInit } from '@angular/core';\n\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { MatInput, MatInputModule } from '@angular/material/input';\nimport { Action } from '@ng-atomic/core';\nimport { SmartMenuButtonAtom } from '@ng-atomic/components/atoms/menu-button';\nimport { NgAtomicComponent } from '@ng-atomic/core';\nimport { MatFormField } from '@angular/material/form-field';\nimport { ErrorPipe } from '@ng-atomic/common/pipes/error';\nimport { startWith } from 'rxjs';\n\n\n@Component({\n    selector: 'molecules-action-input-field',\n    imports: [\n    ReactiveFormsModule,\n    MatInputModule,\n    SmartMenuButtonAtom,\n    ErrorPipe\n],\n    template: `\n  <mat-form-field class=\"mat-form-field-disabled\" [appearance]=\"appearance\">\n    <mat-label>{{ label }}</mat-label>\n    <input matInput [name]=\"name\" type=\"text\" [formControl]=\"control\" [placeholder]=\"placeholder\">\n    <!-- <mat-icon matSuffix>sentiment_very_satisfied</mat-icon> -->\n    @if (hint) {\n      <mat-hint>{{ hint }}</mat-hint>\n    }\n    <mat-error>{{ control.errors | error }}</mat-error>\n  </mat-form-field>\n  <atoms-menu-button\n    [actions]=\"actions\"\n    (action)=\"dispatch($event)\"\n  ></atoms-menu-button>\n  `,\n    styleUrls: ['./action-input-field.molecule.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ActionInputFieldMolecule extends NgAtomicComponent implements AfterViewInit {\n\n  @ViewChild(MatFormField)\n  formField!: MatFormField;\n\n  @ViewChild('matInput', { read: MatInput })\n  input!: MatInput;\n\n  @Input()\n  appearance: 'outline' | 'fill' = 'outline';\n\n  @Input()\n  type: 'text' | 'number' | 'password' = 'text';\n\n  @Input()\n  name?: string;\n\n  @Input()\n  label = 'label';\n\n  @Input()\n  control = new FormControl<string>('');\n\n  @Input()\n  placeholder = 'placeholder';\n\n  @Input()\n  hint?: string;\n\n  @Input()\n  get actions(): Action[] {\n    return this._actions.map((action) => ({...action}));\n  }\n  set actions(value: Action[]) {\n    this._actions = value;\n  }\n  private _actions: Action[] = [];\n\n  ngAfterViewInit() {\n    \n    \n    \n  }\n\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;AAsCM,MAAO,wBAAyB,SAAQ,iBAAiB,CAAA;AA1B/D,IAAA,WAAA,GAAA;;QAmCE,IAAA,CAAA,UAAU,GAAuB,SAAS;QAG1C,IAAA,CAAA,IAAI,GAAmC,MAAM;QAM7C,IAAA,CAAA,KAAK,GAAG,OAAO;AAGf,QAAA,IAAA,CAAA,OAAO,GAAG,IAAI,WAAW,CAAS,EAAE,CAAC;QAGrC,IAAA,CAAA,WAAW,GAAG,aAAa;QAYnB,IAAA,CAAA,QAAQ,GAAa,EAAE;AAQhC,IAAA;AAfC,IAAA,IACI,OAAO,GAAA;AACT,QAAA,OAAO,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,MAAM,MAAM,EAAC,GAAG,MAAM,EAAC,CAAC,CAAC;IACrD;IACA,IAAI,OAAO,CAAC,KAAe,EAAA;AACzB,QAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;IACvB;IAGA,eAAe,GAAA;IAIf;8GA1CW,wBAAwB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAxB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,wBAAwB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,8BAAA,EAAA,MAAA,EAAA,EAAA,UAAA,EAAA,YAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,OAAA,EAAA,SAAA,EAAA,WAAA,EAAA,aAAA,EAAA,IAAA,EAAA,MAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,WAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAExB,YAAY,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,IAAA,EAGQ,QAAQ,EAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAvB3B;;;;;;;;;;;;;;AAcX,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,uNAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAnBC,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,8MAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,UAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACnB,cAAc,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,QAAA,EAAA,QAAA,EAAA,yHAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,IAAA,EAAA,aAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,mBAAA,EAAA,kBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,qBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,YAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,OAAA,EAAA,YAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,WAAA,CAAA,EAAA,QAAA,EAAA,CAAA,cAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,QAAA,EAAA,QAAA,EAAA,WAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,IAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,QAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,CAAA,IAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACd,mBAAmB,4EACnB,SAAS,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAoBA,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBA1BpC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,8BAA8B,EAAA,OAAA,EAC/B;wBACT,mBAAmB;wBACnB,cAAc;wBACd,mBAAmB;wBACnB;qBACH,EAAA,QAAA,EACa;;;;;;;;;;;;;;GAcX,EAAA,eAAA,EAEkB,uBAAuB,CAAC,MAAM,EAAA,MAAA,EAAA,CAAA,uNAAA,CAAA,EAAA;;sBAIhD,SAAS;uBAAC,YAAY;;sBAGtB,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,UAAU,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;;sBAGxC;;sBAGA;;sBAGA;;sBAGA;;sBAGA;;sBAGA;;sBAGA;;sBAGA;;;ACnEH;;AAEG;;;;"}

package/fesm2022/ng-atomic-components-molecules-date-input-field.mjs

@@ -48,7 +48,7 @@ class DateInputFieldMolecule {
     @if (store.hint()) { <mat-hint>{{ store.hint() }}</mat-hint> }
     <mat-error>{{ store.control().errors | error }}</mat-error>
   </mat-form-field>
-  `, isInline: true, styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-date-input-field-m5mf: var(--horizontal-padding)}:host{display:block;width:100%}:host mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "pipe", type: ErrorPipe, name: "error" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-date-input-field-BS7j: var(--horizontal-padding)}:host{display:block;width:100%}:host mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "pipe", type: ErrorPipe, name: "error" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: DateInputFieldMolecule, decorators: [{
             type: Component,
@@ -78,7 +78,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
                             directive: DateInputFieldMoleculeStore,
                             inputs: ['control', 'label', 'placeholder', 'hint', 'toggle'],
                         }
-                    ], host: { class: 'molecule field' }, providers: [], styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-date-input-field-m5mf: var(--horizontal-padding)}:host{display:block;width:100%}:host mat-form-field{width:100%}\n"] }]
+                    ], host: { class: 'molecule field' }, providers: [], styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-date-input-field-BS7j: var(--horizontal-padding)}:host{display:block;width:100%}:host mat-form-field{width:100%}\n"] }]
         }] });
 
 /**

package/fesm2022/ng-atomic-components-molecules-date-range-input-field.mjs

@@ -47,7 +47,7 @@ class DateRangeInputFieldMolecule {
       <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
       <mat-date-range-picker #picker></mat-date-range-picker>
     </mat-form-field>
-  `, isInline: true, styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-date-range-input-field-lHHj: var(--horizontal-padding)}:host{display:block;width:100%}:host mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i3.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i3.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i3.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i3.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "pipe", type: ErrorPipe, name: "error" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-date-range-input-field-MWqi: var(--horizontal-padding)}:host{display:block;width:100%}:host mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i3.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i3.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i3.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i3.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "pipe", type: ErrorPipe, name: "error" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: DateRangeInputFieldMolecule, decorators: [{
             type: Component,
@@ -79,7 +79,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
                             directive: DateRangeInputFieldMoleculeStore,
                             inputs: ['control', 'label', 'hint']
                         }
-                    ], styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-date-range-input-field-lHHj: var(--horizontal-padding)}:host{display:block;width:100%}:host mat-form-field{width:100%}\n"] }]
+                    ], styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-date-range-input-field-MWqi: var(--horizontal-padding)}:host{display:block;width:100%}:host mat-form-field{width:100%}\n"] }]
         }] });
 
 /**

package/fesm2022/ng-atomic-components-molecules-file-input-field.mjs

@@ -83,7 +83,6 @@ class FileInputFieldMolecule extends NgAtomicComponent {
     }
     onFileSelected(event) {
         this.dispatch({ id: ActionId.FILE_SELECTED, payload: event.target.files });
-        // this.fileUpload().nativeElement.value = '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: FileInputFieldMolecule, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: FileInputFieldMolecule, isStandalone: true, selector: "molecules-file-input-field", viewQueries: [{ propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: FileInputFieldStore, inputs: ["control", "control", "label", "label", "placeholder", "placeholder", "hint", "hint", "progress", "progress", "name", "name", "appearance", "appearance"] }], ngImport: i0, template: `

package/fesm2022/ng-atomic-components-molecules-file-input-field.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-atomic-components-molecules-file-input-field.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/molecules/file-input-field/file-input-field.molecule.ts","../../../../../packages/@ng-atomic/components/src/lib/molecules/file-input-field/ng-atomic-components-molecules-file-input-field.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Directive, ElementRef, computed, effect, inject, input, viewChild } from '@angular/core';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { MatInputModule } from '@angular/material/input';\nimport { SmartMenuButtonAtom } from '@ng-atomic/components/atoms/menu-button';\nimport { Effect, NgAtomicComponent } from '@ng-atomic/core';\nimport { ErrorPipe } from '@ng-atomic/common/pipes/error';\nimport { derivedAsync } from 'ngxtension/derived-async';\nimport { getRawValue$ } from '@ng-atomic/common/utils';\n\nenum ActionId {\n  FILE_SELECT_BUTTON_CLICK = '[@ng-atomic/components/molecules/file-input-field] File select button click',\n  FILE_SELECTED = '[@ng-atomic/components/molecules/file-input-field] File selected',\n  CANCEL = '[@ng-atomic/components/molecules/file-input-field] Cancel',\n}\n\n@Directive({ standalone: true })\nexport class FileInputFieldStore {\n  readonly control = input(new FormControl(null));\n  readonly controlValue = derivedAsync(() => getRawValue$(this.control()));\n  readonly label = input('label');\n  readonly placeholder = input('placeholder');\n  readonly hint = input<string | null>(null);\n  readonly progress = input<number | false>(false);\n  readonly name = input<string | null>(null);\n  readonly appearance = input<'outline' | 'fill'>('outline');\n  readonly fakeControl = new FormControl<string | number>({ value: '', disabled: true });\n\n  constructor() {\n    effect(() => {\n      const control = this.control() as unknown as Record<string, never>;\n      this.fakeControl.setValidators(control['_rawValidators']);\n      this.fakeControl.setAsyncValidators(control['_rawAsyncValidators']);\n    });\n\n    effect(() => {\n      const file = this.controlValue() as unknown as File | string;\n      if (typeof file === 'string') {\n        this.fakeControl.setValue(file);\n        return;\n      }\n      this.fakeControl.setValue(file.name);\n    });\n  }\n\n  readonly actions = computed(() => {\n    if (this.progress()) {\n      return [\n        {\n          id: ActionId.CANCEL,\n          icon: 'cancel',\n          name: 'Cancel',\n          disabled: this.control().disabled,\n        },\n      ];\n    } else {\n      return [\n        {\n          id: ActionId.FILE_SELECT_BUTTON_CLICK,\n          icon: 'attach_file',\n          name: 'Select file',\n          disabled: this.control().disabled,\n        },\n      ];\n    }\n  });\n}\n\n@Component({\n  selector: 'molecules-file-input-field',\n  imports: [\n    ReactiveFormsModule,\n    MatInputModule,\n    SmartMenuButtonAtom,\n    ErrorPipe,\n  ],\n  template: `\n  <mat-form-field [appearance]=\"store.appearance()\">\n    <mat-label>{{ store.label() }}</mat-label>\n      <input matInput [name]=\"store.name()\" type=\"text\" [formControl]=\"store.fakeControl\" [placeholder]=\"store.placeholder()\">\n    <!-- <mat-icon matSuffix>sentiment_very_satisfied</mat-icon> -->\n    @if (store.progress()) {\n      <mat-hint>Uploading...({{ store.progress() ? store.progress()?.toFixed(2) : '' }}%)</mat-hint>\n    } @else if (store.hint()) {\n      <mat-hint>{{ store.hint() }}</mat-hint>\n    }\n    <mat-error>{{ store.control().errors | error }}</mat-error>\n  </mat-form-field>\n  <atoms-menu-button\n    [actions]=\"store.actions()\"\n    (action)=\"dispatch($event)\"\n  />\n  <input style=\"display: none\" type=\"file\" (change)=\"onFileSelected($event)\" #fileUpload>\n  `,\n  styleUrls: ['./file-input-field.molecule.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [\n    {\n      directive: FileInputFieldStore,\n      inputs: ['control', 'label', 'placeholder', 'hint', 'progress', 'name', 'appearance'],\n    }\n  ]\n})\nexport class FileInputFieldMolecule extends NgAtomicComponent {\n  static readonly ActionId = ActionId;\n  protected readonly store = inject(FileInputFieldStore);\n  protected readonly fileUpload = viewChild.required<ElementRef<HTMLInputElement>>('fileUpload');\n\n  @Effect(ActionId.FILE_SELECT_BUTTON_CLICK)\n  protected onFileSelectButtonClick() {\n    this.fileUpload().nativeElement.click();\n  }\n\n  protected onFileSelected(event: Event & { target: HTMLInputElement }) {\n    this.dispatch({ id: ActionId.FILE_SELECTED, payload: event.target.files });\n    // this.fileUpload().nativeElement.value = '';\n  }\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":"ng-atomic-components-molecules-file-input-field.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/molecules/file-input-field/file-input-field.molecule.ts","../../../../../packages/@ng-atomic/components/src/lib/molecules/file-input-field/ng-atomic-components-molecules-file-input-field.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Directive, ElementRef, computed, effect, inject, input, viewChild } from '@angular/core';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { MatInputModule } from '@angular/material/input';\nimport { SmartMenuButtonAtom } from '@ng-atomic/components/atoms/menu-button';\nimport { Effect, NgAtomicComponent } from '@ng-atomic/core';\nimport { ErrorPipe } from '@ng-atomic/common/pipes/error';\nimport { derivedAsync } from 'ngxtension/derived-async';\nimport { getRawValue$ } from '@ng-atomic/common/utils';\n\nenum ActionId {\n  FILE_SELECT_BUTTON_CLICK = '[@ng-atomic/components/molecules/file-input-field] File select button click',\n  FILE_SELECTED = '[@ng-atomic/components/molecules/file-input-field] File selected',\n  CANCEL = '[@ng-atomic/components/molecules/file-input-field] Cancel',\n}\n\n@Directive({ standalone: true })\nexport class FileInputFieldStore {\n  readonly control = input(new FormControl(null));\n  readonly controlValue = derivedAsync(() => getRawValue$(this.control()));\n  readonly label = input('label');\n  readonly placeholder = input('placeholder');\n  readonly hint = input<string | null>(null);\n  readonly progress = input<number | false>(false);\n  readonly name = input<string | null>(null);\n  readonly appearance = input<'outline' | 'fill'>('outline');\n  readonly fakeControl = new FormControl<string | number>({ value: '', disabled: true });\n\n  constructor() {\n    effect(() => {\n      const control = this.control() as unknown as Record<string, never>;\n      this.fakeControl.setValidators(control['_rawValidators']);\n      this.fakeControl.setAsyncValidators(control['_rawAsyncValidators']);\n    });\n\n    effect(() => {\n      const file = this.controlValue() as unknown as File | string;\n      if (typeof file === 'string') {\n        this.fakeControl.setValue(file);\n        return;\n      }\n      this.fakeControl.setValue(file.name);\n    });\n  }\n\n  readonly actions = computed(() => {\n    if (this.progress()) {\n      return [\n        {\n          id: ActionId.CANCEL,\n          icon: 'cancel',\n          name: 'Cancel',\n          disabled: this.control().disabled,\n        },\n      ];\n    } else {\n      return [\n        {\n          id: ActionId.FILE_SELECT_BUTTON_CLICK,\n          icon: 'attach_file',\n          name: 'Select file',\n          disabled: this.control().disabled,\n        },\n      ];\n    }\n  });\n}\n\n@Component({\n  selector: 'molecules-file-input-field',\n  imports: [\n    ReactiveFormsModule,\n    MatInputModule,\n    SmartMenuButtonAtom,\n    ErrorPipe,\n  ],\n  template: `\n  <mat-form-field [appearance]=\"store.appearance()\">\n    <mat-label>{{ store.label() }}</mat-label>\n      <input matInput [name]=\"store.name()\" type=\"text\" [formControl]=\"store.fakeControl\" [placeholder]=\"store.placeholder()\">\n    <!-- <mat-icon matSuffix>sentiment_very_satisfied</mat-icon> -->\n    @if (store.progress()) {\n      <mat-hint>Uploading...({{ store.progress() ? store.progress()?.toFixed(2) : '' }}%)</mat-hint>\n    } @else if (store.hint()) {\n      <mat-hint>{{ store.hint() }}</mat-hint>\n    }\n    <mat-error>{{ store.control().errors | error }}</mat-error>\n  </mat-form-field>\n  <atoms-menu-button\n    [actions]=\"store.actions()\"\n    (action)=\"dispatch($event)\"\n  />\n  <input style=\"display: none\" type=\"file\" (change)=\"onFileSelected($event)\" #fileUpload>\n  `,\n  styleUrls: ['./file-input-field.molecule.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [\n    {\n      directive: FileInputFieldStore,\n      inputs: ['control', 'label', 'placeholder', 'hint', 'progress', 'name', 'appearance'],\n    }\n  ]\n})\nexport class FileInputFieldMolecule extends NgAtomicComponent {\n  static readonly ActionId = ActionId;\n  protected readonly store = inject(FileInputFieldStore);\n  protected readonly fileUpload = viewChild.required<ElementRef<HTMLInputElement>>('fileUpload');\n\n  @Effect(ActionId.FILE_SELECT_BUTTON_CLICK)\n  protected onFileSelectButtonClick() {\n    this.fileUpload().nativeElement.click();\n  }\n\n  protected onFileSelected(event: Event & { target: HTMLInputElement }) {\n    this.dispatch({ id: ActionId.FILE_SELECTED, payload: event.target.files });\n    \n  }\n\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;AASA,IAAK,QAIJ;AAJD,CAAA,UAAK,QAAQ,EAAA;AACX,IAAA,QAAA,CAAA,0BAAA,CAAA,GAAA,6EAAwG;AACxG,IAAA,QAAA,CAAA,eAAA,CAAA,GAAA,kEAAkF;AAClF,IAAA,QAAA,CAAA,QAAA,CAAA,GAAA,2DAAoE;AACtE,CAAC,EAJI,QAAQ,KAAR,QAAQ,GAAA,EAAA,CAAA,CAAA;MAOA,mBAAmB,CAAA;AAW9B,IAAA,WAAA,GAAA;QAVS,IAAA,CAAA,OAAO,GAAG,KAAK,CAAC,IAAI,WAAW,CAAC,IAAI,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,SAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAC;AACtC,QAAA,IAAA,CAAA,YAAY,GAAG,YAAY,CAAC,MAAM,YAAY,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;AAC/D,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAC,OAAO,iDAAC;AACtB,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAC,aAAa,uDAAC;AAClC,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAgB,IAAI,gDAAC;AACjC,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAiB,KAAK,oDAAC;AACvC,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAgB,IAAI,gDAAC;AACjC,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAqB,SAAS,sDAAC;AACjD,QAAA,IAAA,CAAA,WAAW,GAAG,IAAI,WAAW,CAAkB,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AAmB7E,QAAA,IAAA,CAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;AAC/B,YAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;gBACnB,OAAO;AACL,oBAAA;wBACE,EAAE,EAAE,QAAQ,CAAC,MAAM;AACnB,wBAAA,IAAI,EAAE,QAAQ;AACd,wBAAA,IAAI,EAAE,QAAQ;AACd,wBAAA,QAAQ,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,QAAQ;AAClC,qBAAA;iBACF;YACH;iBAAO;gBACL,OAAO;AACL,oBAAA;wBACE,EAAE,EAAE,QAAQ,CAAC,wBAAwB;AACrC,wBAAA,IAAI,EAAE,aAAa;AACnB,wBAAA,IAAI,EAAE,aAAa;AACnB,wBAAA,QAAQ,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,QAAQ;AAClC,qBAAA;iBACF;YACH;AACF,QAAA,CAAC,mDAAC;QApCA,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,EAAsC;YAClE,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;YACzD,IAAI,CAAC,WAAW,CAAC,kBAAkB,CAAC,OAAO,CAAC,qBAAqB,CAAC,CAAC;AACrE,QAAA,CAAC,CAAC;QAEF,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,EAA8B;AAC5D,YAAA,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;AAC5B,gBAAA,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC;gBAC/B;YACF;YACA,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;AACtC,QAAA,CAAC,CAAC;IACJ;8GA1BW,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAnB,mBAAmB,EAAA,YAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAAnB,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAD/B,SAAS;mBAAC,EAAE,UAAU,EAAE,IAAI,EAAE;;AAuFzB,MAAO,sBAAuB,SAAQ,iBAAiB,CAAA;AAnC7D,IAAA,WAAA,GAAA;;AAqCqB,QAAA,IAAA,CAAA,KAAK,GAAG,MAAM,CAAC,mBAAmB,CAAC;AACnC,QAAA,IAAA,CAAA,UAAU,GAAG,SAAS,CAAC,QAAQ,CAA+B,YAAY,CAAC;AAY/F,IAAA;aAdiB,IAAA,CAAA,QAAQ,GAAG,QAAH,CAAY;IAK1B,uBAAuB,GAAA;QAC/B,IAAI,CAAC,UAAU,EAAE,CAAC,aAAa,CAAC,KAAK,EAAE;IACzC;AAEU,IAAA,cAAc,CAAC,KAA2C,EAAA;AAClE,QAAA,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE,EAAE,QAAQ,CAAC,aAAa,EAAE,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;IAE5E;8GAbW,sBAAsB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAtB,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,4BAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,YAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,YAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EAtFtB,mBAAmB,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,SAAA,EAAA,OAAA,EAAA,OAAA,EAAA,aAAA,EAAA,aAAA,EAAA,MAAA,EAAA,MAAA,EAAA,UAAA,EAAA,UAAA,EAAA,MAAA,EAAA,MAAA,EAAA,YAAA,EAAA,YAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EA2DpB;;;;;;;;;;;;;;;;;AAiBT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,uNAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAtBC,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,8MAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,UAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACnB,cAAc,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,QAAA,EAAA,QAAA,EAAA,yHAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,IAAA,EAAA,aAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,mBAAA,EAAA,kBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,qBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,YAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,OAAA,EAAA,YAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,WAAA,CAAA,EAAA,QAAA,EAAA,CAAA,cAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,QAAA,EAAA,QAAA,EAAA,WAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,IAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,QAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,CAAA,IAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACd,mBAAmB,4EACnB,SAAS,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;AAmCD,UAAA,CAAA;AADT,IAAA,MAAM,CAAC,QAAQ,CAAC,wBAAwB,CAAC;;;;AAGzC,CAAA,EAAA,sBAAA,CAAA,SAAA,EAAA,yBAAA,EAAA,IAAA,CAAA;2FARU,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAnClC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,4BAA4B,EAAA,OAAA,EAC7B;wBACP,mBAAmB;wBACnB,cAAc;wBACd,mBAAmB;wBACnB,SAAS;qBACV,EAAA,QAAA,EACS;;;;;;;;;;;;;;;;;GAiBT,EAAA,eAAA,EAEgB,uBAAuB,CAAC,MAAM,EAAA,cAAA,EAC/B;AACd,wBAAA;AACE,4BAAA,SAAS,EAAE,mBAAmB;AAC9B,4BAAA,MAAM,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,YAAY,CAAC;AACtF;AACF,qBAAA,EAAA,MAAA,EAAA,CAAA,uNAAA,CAAA,EAAA;wEAKgF,YAAY,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,uBAAA,EAAA,EAAA,EAAA,EAAA,CAAA;;ACzG/F;;AAEG;;;;"}

package/fesm2022/ng-atomic-components-molecules-grid-item.mjs

@@ -39,7 +39,7 @@ class GridItemMolecule extends NgAtomicComponent {
       <div class="sub"><span>{{ item() | dataAccessor:'sub' }}</span></div>
     </div>
   </div>
-  `, isInline: true, styles: [":host{display:block;--primary-color: #444;--primary-color-SCOPED-IN-grid-item-wIdu: var(--primary-color);--on-surface-color: #444;--on-surface-color-SCOPED-IN-grid-item-wIdu: var(--on-surface-color)}:host{position:relative;text-align:center;cursor:pointer;aspect-ratio:1/1}:host button{position:absolute;top:0;right:0}:host ::ng-deep>mat-card{display:flex;justify-content:flex-start;align-items:flex-start}:host .eye-catch{position:relative;width:100%;aspect-ratio:16/9;background-color:#444;border-radius:0 0 8px 8px;overflow:hidden}:host .eye-catch img{width:100%;aspect-ratio:16/9;object-fit:cover}:host .eye-catch .label{position:absolute;right:6px;bottom:8px;line-height:1.5em;font-size:1.2em;color:#fff;background:#000;opacity:.6;border-radius:6px;padding:4px 8px}:host .meta{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:8px 8px 24px;box-sizing:border-box}:host .meta .title{display:-webkit-box;text-align:start;font-size:1.4em;font-weight:700;line-height:1.5em;letter-spacing:.04em;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis;white-space:normal;overflow:hidden;color:var(--on-surface-color-SCOPED-IN-grid-item-wIdu)}:host .meta .description,:host .meta .sub{overflow:hidden;text-align:start;font-size:1.2em;letter-spacing:.04em;color:gray}:host .meta .description span,:host .meta .sub span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: FallbackSrcDirective, selector: "[fallbackSrc]" }, { kind: "pipe", type: DataAccessorPipe, name: "dataAccessor" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block;--primary-color: #444;--primary-color-SCOPED-IN-grid-item-mSyt: var(--primary-color);--on-surface-color: #444;--on-surface-color-SCOPED-IN-grid-item-mSyt: var(--on-surface-color)}:host{position:relative;text-align:center;cursor:pointer;aspect-ratio:1/1}:host button{position:absolute;top:0;right:0}:host ::ng-deep>mat-card{display:flex;justify-content:flex-start;align-items:flex-start}:host .eye-catch{position:relative;width:100%;aspect-ratio:16/9;background-color:#444;border-radius:0 0 8px 8px;overflow:hidden}:host .eye-catch img{width:100%;aspect-ratio:16/9;object-fit:cover}:host .eye-catch .label{position:absolute;right:6px;bottom:8px;line-height:1.5em;font-size:1.2em;color:#fff;background:#000;opacity:.6;border-radius:6px;padding:4px 8px}:host .meta{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:8px 8px 24px;box-sizing:border-box}:host .meta .title{display:-webkit-box;text-align:start;font-size:1.4em;font-weight:700;line-height:1.5em;letter-spacing:.04em;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis;white-space:normal;overflow:hidden;color:var(--on-surface-color-SCOPED-IN-grid-item-mSyt)}:host .meta .description,:host .meta .sub{overflow:hidden;text-align:start;font-size:1.2em;letter-spacing:.04em;color:gray}:host .meta .description span,:host .meta .sub span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: FallbackSrcDirective, selector: "[fallbackSrc]" }, { kind: "pipe", type: DataAccessorPipe, name: "dataAccessor" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: GridItemMolecule, decorators: [{
             type: Component,
@@ -64,7 +64,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
       <div class="sub"><span>{{ item() | dataAccessor:'sub' }}</span></div>
     </div>
   </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;--primary-color: #444;--primary-color-SCOPED-IN-grid-item-wIdu: var(--primary-color);--on-surface-color: #444;--on-surface-color-SCOPED-IN-grid-item-wIdu: var(--on-surface-color)}:host{position:relative;text-align:center;cursor:pointer;aspect-ratio:1/1}:host button{position:absolute;top:0;right:0}:host ::ng-deep>mat-card{display:flex;justify-content:flex-start;align-items:flex-start}:host .eye-catch{position:relative;width:100%;aspect-ratio:16/9;background-color:#444;border-radius:0 0 8px 8px;overflow:hidden}:host .eye-catch img{width:100%;aspect-ratio:16/9;object-fit:cover}:host .eye-catch .label{position:absolute;right:6px;bottom:8px;line-height:1.5em;font-size:1.2em;color:#fff;background:#000;opacity:.6;border-radius:6px;padding:4px 8px}:host .meta{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:8px 8px 24px;box-sizing:border-box}:host .meta .title{display:-webkit-box;text-align:start;font-size:1.4em;font-weight:700;line-height:1.5em;letter-spacing:.04em;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis;white-space:normal;overflow:hidden;color:var(--on-surface-color-SCOPED-IN-grid-item-wIdu)}:host .meta .description,:host .meta .sub{overflow:hidden;text-align:start;font-size:1.2em;letter-spacing:.04em;color:gray}:host .meta .description span,:host .meta .sub span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;--primary-color: #444;--primary-color-SCOPED-IN-grid-item-mSyt: var(--primary-color);--on-surface-color: #444;--on-surface-color-SCOPED-IN-grid-item-mSyt: var(--on-surface-color)}:host{position:relative;text-align:center;cursor:pointer;aspect-ratio:1/1}:host button{position:absolute;top:0;right:0}:host ::ng-deep>mat-card{display:flex;justify-content:flex-start;align-items:flex-start}:host .eye-catch{position:relative;width:100%;aspect-ratio:16/9;background-color:#444;border-radius:0 0 8px 8px;overflow:hidden}:host .eye-catch img{width:100%;aspect-ratio:16/9;object-fit:cover}:host .eye-catch .label{position:absolute;right:6px;bottom:8px;line-height:1.5em;font-size:1.2em;color:#fff;background:#000;opacity:.6;border-radius:6px;padding:4px 8px}:host .meta{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:8px 8px 24px;box-sizing:border-box}:host .meta .title{display:-webkit-box;text-align:start;font-size:1.4em;font-weight:700;line-height:1.5em;letter-spacing:.04em;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis;white-space:normal;overflow:hidden;color:var(--on-surface-color-SCOPED-IN-grid-item-mSyt)}:host .meta .description,:host .meta .sub{overflow:hidden;text-align:start;font-size:1.2em;letter-spacing:.04em;color:gray}:host .meta .description span,:host .meta .sub span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}\n"] }]
         }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: false }] }] } });
 
 /**

package/fesm2022/ng-atomic-components-molecules-loading-box.mjs

@@ -37,7 +37,7 @@ class LoadingBoxMolecule {
   <div class="loading-dots">
     @for (i of [0, 1, 2]; track $index) { <div class="dot"></div> }
   </div>
-  `, isInline: true, styles: [":host{display:block;--mat-form-field-outlined-label-text-color-SCOPED-IN-definition-list-gBL6: rgba(0, 0, 0, .6);--mat-form-field-outlined-label-text-color-SCOPED-IN-definition-list-gBL6-SCOPED-IN-loading-box-IWv9: var(--mat-form-field-outlined-label-text-color-SCOPED-IN-definition-list-gBL6)}:host{display:flex;width:100%;justify-content:center}:host .initializing{color:var(--mat-form-field-outlined-label-text-color-SCOPED-IN-definition-list-gBL6-SCOPED-IN-loading-box-IWv9);font-size:12px}@keyframes dotFlashing{0%,to{opacity:0}50%{opacity:1}}:host .loading-box{display:flex;justify-content:center;align-items:center;flex-direction:column}:host .loading-dots .dot{height:10px;width:10px;margin:0 5px;background-color:#333;border-radius:50%;display:inline-block;animation:dotFlashing 1s infinite}:host .loading-dots .dot:nth-child(1){animation-delay:0s}:host .loading-dots .dot:nth-child(2){animation-delay:.2s}:host .loading-dots .dot:nth-child(3){animation-delay:.4s}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block;--mat-form-field-outlined-label-text-color-SCOPED-IN-definition-list-gBL6: rgba(0, 0, 0, .6);--mat-form-field-outlined-label-text-color-SCOPED-IN-definition-list-gBL6-SCOPED-IN-loading-box-sEwm: var(--mat-form-field-outlined-label-text-color-SCOPED-IN-definition-list-gBL6)}:host{display:flex;width:100%;justify-content:center}:host .initializing{color:var(--mat-form-field-outlined-label-text-color-SCOPED-IN-definition-list-gBL6-SCOPED-IN-loading-box-sEwm);font-size:12px}@keyframes dotFlashing{0%,to{opacity:0}50%{opacity:1}}:host .loading-box{display:flex;justify-content:center;align-items:center;flex-direction:column}:host .loading-dots .dot{height:10px;width:10px;margin:0 5px;background-color:#333;border-radius:50%;display:inline-block;animation:dotFlashing 1s infinite}:host .loading-dots .dot:nth-child(1){animation-delay:0s}:host .loading-dots .dot:nth-child(2){animation-delay:.2s}:host .loading-dots .dot:nth-child(3){animation-delay:.4s}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: LoadingBoxMolecule, decorators: [{
             type: Component,
@@ -51,7 +51,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
                             directive: LoadingBoxMoleculeStore,
                             inputs: ['loadingMessage'],
                         }
-                    ], styles: [":host{display:block;--mat-form-field-outlined-label-text-color-SCOPED-IN-definition-list-gBL6: rgba(0, 0, 0, .6);--mat-form-field-outlined-label-text-color-SCOPED-IN-definition-list-gBL6-SCOPED-IN-loading-box-IWv9: var(--mat-form-field-outlined-label-text-color-SCOPED-IN-definition-list-gBL6)}:host{display:flex;width:100%;justify-content:center}:host .initializing{color:var(--mat-form-field-outlined-label-text-color-SCOPED-IN-definition-list-gBL6-SCOPED-IN-loading-box-IWv9);font-size:12px}@keyframes dotFlashing{0%,to{opacity:0}50%{opacity:1}}:host .loading-box{display:flex;justify-content:center;align-items:center;flex-direction:column}:host .loading-dots .dot{height:10px;width:10px;margin:0 5px;background-color:#333;border-radius:50%;display:inline-block;animation:dotFlashing 1s infinite}:host .loading-dots .dot:nth-child(1){animation-delay:0s}:host .loading-dots .dot:nth-child(2){animation-delay:.2s}:host .loading-dots .dot:nth-child(3){animation-delay:.4s}\n"] }]
+                    ], styles: [":host{display:block;--mat-form-field-outlined-label-text-color-SCOPED-IN-definition-list-gBL6: rgba(0, 0, 0, .6);--mat-form-field-outlined-label-text-color-SCOPED-IN-definition-list-gBL6-SCOPED-IN-loading-box-sEwm: var(--mat-form-field-outlined-label-text-color-SCOPED-IN-definition-list-gBL6)}:host{display:flex;width:100%;justify-content:center}:host .initializing{color:var(--mat-form-field-outlined-label-text-color-SCOPED-IN-definition-list-gBL6-SCOPED-IN-loading-box-sEwm);font-size:12px}@keyframes dotFlashing{0%,to{opacity:0}50%{opacity:1}}:host .loading-box{display:flex;justify-content:center;align-items:center;flex-direction:column}:host .loading-dots .dot{height:10px;width:10px;margin:0 5px;background-color:#333;border-radius:50%;display:inline-block;animation:dotFlashing 1s infinite}:host .loading-dots .dot:nth-child(1){animation-delay:0s}:host .loading-dots .dot:nth-child(2){animation-delay:.2s}:host .loading-dots .dot:nth-child(3){animation-delay:.4s}\n"] }]
         }] });
 
 /**

package/fesm2022/ng-atomic-components-molecules-navigation-list-item.mjs

@@ -48,7 +48,7 @@ class NavigationListItemMolecule extends NgAtomicComponent {
         }
       </div>
     </mat-list-item>
-  `, isInline: true, styles: [":host{display:block;--primary-color: #404040;--primary-color-SCOPED-IN-navigation-list-item-scIo: var(--primary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-navigation-list-item-scIo: var(--surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-navigation-list-item-scIo: var(--background-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-navigation-list-item-scIo: var(--on-primary-color);--on-background-color: #404040;--on-background-color-SCOPED-IN-navigation-list-item-scIo: var(--on-background-color);--on-surface-color: #404040;--on-surface-color-SCOPED-IN-navigation-list-item-scIo: var(--on-surface-color);--mat-badge-background-color-SCOPED-IN-navigation-list-item-scIo: var(--mat-badge-background-color)}:host{--mat-list-list-item-hover-label-text-color: var(--on-background-color);--mat-list-list-item-label-text-color: var(--on-background-color);--mat-list-list-item-supporting-text-color: var(--on-background-color);--mat-list-list-item-leading-icon-end-space: 16px}:host [matListItemTitle]{display:flex;align-items:center;gap:4px}:host mat-list-item.activated{background-color:var(--on-background-color-SCOPED-IN-navigation-list-item-scIo);color:var(--on-surface-color-SCOPED-IN-navigation-list-item-scIo)}:host mat-list-item.activated atoms-icon{--on-background-color: var(--background-color-SCOPED-IN-navigation-list-item-scIo)}:host ::ng-deep .mat-list-item .mat-list-item-content{display:flex;align-items:center;grid-gap:8px;padding-top:8px;padding-bottom:8px;cursor:pointer;color:var(--on-background-color-SCOPED-IN-navigation-list-item-scIo);font-size:12px}:host ::ng-deep .mat-list-item .mat-list-text{padding-left:8px!important}:host *{--background-color: var(--background-color-SCOPED-IN-navigation-list-item-scIo);--on-background-color: var(--on-background-color-SCOPED-IN-navigation-list-item-scIo);--surface-color: var(--surface-color-SCOPED-IN-navigation-list-item-scIo);--on-surface-color: var(--on-surface-color-SCOPED-IN-navigation-list-item-scIo);--primary-color: var(--on-primary-color-SCOPED-IN-navigation-list-item-scIo);--on-primary-color: var(--primary-color-SCOPED-IN-navigation-list-item-scIo)}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i1.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i1.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i1.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "component", type: IconAtom, selector: "atoms-icon", inputs: ["name", "color"] }, { kind: "component", type: BadgeAtom, selector: "atoms-badge", inputs: ["value"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block;--primary-color: #404040;--primary-color-SCOPED-IN-navigation-list-item-jwNz: var(--primary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-navigation-list-item-jwNz: var(--surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-navigation-list-item-jwNz: var(--background-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-navigation-list-item-jwNz: var(--on-primary-color);--on-background-color: #404040;--on-background-color-SCOPED-IN-navigation-list-item-jwNz: var(--on-background-color);--on-surface-color: #404040;--on-surface-color-SCOPED-IN-navigation-list-item-jwNz: var(--on-surface-color);--mat-badge-background-color-SCOPED-IN-navigation-list-item-jwNz: var(--mat-badge-background-color)}:host{--mat-list-list-item-hover-label-text-color: var(--on-background-color);--mat-list-list-item-label-text-color: var(--on-background-color);--mat-list-list-item-supporting-text-color: var(--on-background-color);--mat-list-list-item-leading-icon-end-space: 16px}:host [matListItemTitle]{display:flex;align-items:center;gap:4px}:host mat-list-item.activated{background-color:var(--on-background-color-SCOPED-IN-navigation-list-item-jwNz);color:var(--on-surface-color-SCOPED-IN-navigation-list-item-jwNz)}:host mat-list-item.activated atoms-icon{--on-background-color: var(--background-color-SCOPED-IN-navigation-list-item-jwNz)}:host ::ng-deep .mat-list-item .mat-list-item-content{display:flex;align-items:center;grid-gap:8px;padding-top:8px;padding-bottom:8px;cursor:pointer;color:var(--on-background-color-SCOPED-IN-navigation-list-item-jwNz);font-size:12px}:host ::ng-deep .mat-list-item .mat-list-text{padding-left:8px!important}:host *{--background-color: var(--background-color-SCOPED-IN-navigation-list-item-jwNz);--on-background-color: var(--on-background-color-SCOPED-IN-navigation-list-item-jwNz);--surface-color: var(--surface-color-SCOPED-IN-navigation-list-item-jwNz);--on-surface-color: var(--on-surface-color-SCOPED-IN-navigation-list-item-jwNz);--primary-color: var(--on-primary-color-SCOPED-IN-navigation-list-item-jwNz);--on-primary-color: var(--primary-color-SCOPED-IN-navigation-list-item-jwNz)}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i1.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i1.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i1.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "component", type: IconAtom, selector: "atoms-icon", inputs: ["name", "color"] }, { kind: "component", type: BadgeAtom, selector: "atoms-badge", inputs: ["value"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NavigationListItemMolecule, decorators: [{
             type: Component,
@@ -79,7 +79,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
                             directive: NavigationListItemMoleculeStore,
                             inputs: ['action', 'selected', 'activated'],
                         },
-                    ], styles: [":host{display:block;--primary-color: #404040;--primary-color-SCOPED-IN-navigation-list-item-scIo: var(--primary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-navigation-list-item-scIo: var(--surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-navigation-list-item-scIo: var(--background-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-navigation-list-item-scIo: var(--on-primary-color);--on-background-color: #404040;--on-background-color-SCOPED-IN-navigation-list-item-scIo: var(--on-background-color);--on-surface-color: #404040;--on-surface-color-SCOPED-IN-navigation-list-item-scIo: var(--on-surface-color);--mat-badge-background-color-SCOPED-IN-navigation-list-item-scIo: var(--mat-badge-background-color)}:host{--mat-list-list-item-hover-label-text-color: var(--on-background-color);--mat-list-list-item-label-text-color: var(--on-background-color);--mat-list-list-item-supporting-text-color: var(--on-background-color);--mat-list-list-item-leading-icon-end-space: 16px}:host [matListItemTitle]{display:flex;align-items:center;gap:4px}:host mat-list-item.activated{background-color:var(--on-background-color-SCOPED-IN-navigation-list-item-scIo);color:var(--on-surface-color-SCOPED-IN-navigation-list-item-scIo)}:host mat-list-item.activated atoms-icon{--on-background-color: var(--background-color-SCOPED-IN-navigation-list-item-scIo)}:host ::ng-deep .mat-list-item .mat-list-item-content{display:flex;align-items:center;grid-gap:8px;padding-top:8px;padding-bottom:8px;cursor:pointer;color:var(--on-background-color-SCOPED-IN-navigation-list-item-scIo);font-size:12px}:host ::ng-deep .mat-list-item .mat-list-text{padding-left:8px!important}:host *{--background-color: var(--background-color-SCOPED-IN-navigation-list-item-scIo);--on-background-color: var(--on-background-color-SCOPED-IN-navigation-list-item-scIo);--surface-color: var(--surface-color-SCOPED-IN-navigation-list-item-scIo);--on-surface-color: var(--on-surface-color-SCOPED-IN-navigation-list-item-scIo);--primary-color: var(--on-primary-color-SCOPED-IN-navigation-list-item-scIo);--on-primary-color: var(--primary-color-SCOPED-IN-navigation-list-item-scIo)}\n"] }]
+                    ], styles: [":host{display:block;--primary-color: #404040;--primary-color-SCOPED-IN-navigation-list-item-jwNz: var(--primary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-navigation-list-item-jwNz: var(--surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-navigation-list-item-jwNz: var(--background-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-navigation-list-item-jwNz: var(--on-primary-color);--on-background-color: #404040;--on-background-color-SCOPED-IN-navigation-list-item-jwNz: var(--on-background-color);--on-surface-color: #404040;--on-surface-color-SCOPED-IN-navigation-list-item-jwNz: var(--on-surface-color);--mat-badge-background-color-SCOPED-IN-navigation-list-item-jwNz: var(--mat-badge-background-color)}:host{--mat-list-list-item-hover-label-text-color: var(--on-background-color);--mat-list-list-item-label-text-color: var(--on-background-color);--mat-list-list-item-supporting-text-color: var(--on-background-color);--mat-list-list-item-leading-icon-end-space: 16px}:host [matListItemTitle]{display:flex;align-items:center;gap:4px}:host mat-list-item.activated{background-color:var(--on-background-color-SCOPED-IN-navigation-list-item-jwNz);color:var(--on-surface-color-SCOPED-IN-navigation-list-item-jwNz)}:host mat-list-item.activated atoms-icon{--on-background-color: var(--background-color-SCOPED-IN-navigation-list-item-jwNz)}:host ::ng-deep .mat-list-item .mat-list-item-content{display:flex;align-items:center;grid-gap:8px;padding-top:8px;padding-bottom:8px;cursor:pointer;color:var(--on-background-color-SCOPED-IN-navigation-list-item-jwNz);font-size:12px}:host ::ng-deep .mat-list-item .mat-list-text{padding-left:8px!important}:host *{--background-color: var(--background-color-SCOPED-IN-navigation-list-item-jwNz);--on-background-color: var(--on-background-color-SCOPED-IN-navigation-list-item-jwNz);--surface-color: var(--surface-color-SCOPED-IN-navigation-list-item-jwNz);--on-surface-color: var(--on-surface-color-SCOPED-IN-navigation-list-item-jwNz);--primary-color: var(--on-primary-color-SCOPED-IN-navigation-list-item-jwNz);--on-primary-color: var(--primary-color-SCOPED-IN-navigation-list-item-jwNz)}\n"] }]
         }] });
 
 /**

package/fesm2022/ng-atomic-components-molecules-select-input-field.mjs

@@ -39,7 +39,7 @@ class SelectInputFieldMolecule {
     @if (store.hint()) { <mat-hint>{{ store.hint() }}</mat-hint> }
     @if (store.control()?.errors?.length) { <mat-error>{{ store.control().errors | error }}</mat-error> }
   </mat-form-field>
-  `, isInline: true, styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-select-input-field-P7p6: var(--horizontal-padding)}:host{display:block;width:100%}:host mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "pipe", type: ErrorPipe, name: "error" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-select-input-field-NSTz: var(--horizontal-padding)}:host{display:block;width:100%}:host mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "pipe", type: ErrorPipe, name: "error" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: SelectInputFieldMolecule, decorators: [{
             type: Component,
@@ -63,7 +63,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
                             directive: SelectInputFieldMoleculeStore,
                             inputs: ['control', 'label', 'appearance', 'options', 'hint', 'placeholder', 'multiple'],
                         },
-                    ], styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-select-input-field-P7p6: var(--horizontal-padding)}:host{display:block;width:100%}:host mat-form-field{width:100%}\n"] }]
+                    ], styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-select-input-field-NSTz: var(--horizontal-padding)}:host{display:block;width:100%}:host mat-form-field{width:100%}\n"] }]
         }] });
 
 /**

package/fesm2022/ng-atomic-components-molecules-thread-message.mjs

@@ -83,7 +83,7 @@ class ThreadMessageMolecule extends NgAtomicComponent {
         }
       </div> -->
     </div>
-  `, isInline: true, styles: [":host{--primary-color: inherit;--primary-color-SCOPED-IN-nested-menu-Bgoi: var(--primary-color);--on-primary-color: inherit;--on-primary-color-SCOPED-IN-nested-menu-Bgoi: var(--on-primary-color);--surface-color: inherit;--surface-color-SCOPED-IN-nested-menu-Bgoi: var(--surface-color);--on-surface-color: inherit;--on-surface-color-SCOPED-IN-nested-menu-Bgoi: var(--on-surface-color);--background-color: inherit;--background-color-SCOPED-IN-nested-menu-Bgoi: var(--background-color);--on-background-color: inherit;--on-background-color-SCOPED-IN-nested-menu-Bgoi: var(--on-background-color)}:host{display:block;padding:8px 16px}:host .header{display:flex;justify-content:flex-start;align-items:center;padding:8px 0;box-sizing:border-box;gap:8px}:host .header .name{font-size:14px;font-weight:700}:host .header .description{display:flex;justify-content:flex-start;gap:4px;font-size:12px}:host .header img{width:40px;height:40px;border-radius:50%;background-color:var(--primary-color-SCOPED-IN-nested-menu-Bgoi)}:host .content{font-size:14px;padding-bottom:24px;box-sizing:border-box}:host .content .screenshot{display:block;max-width:100%;border-radius:8px;margin-top:8px;box-shadow:0 2px 10px #0000001a;transition:transform .3s ease}:host .content .screenshot:hover{transform:scale(1.05)}:host .bottom.actions{display:flex;justify-content:flex-end;align-items:center;gap:8px}:host .bottom.actions button{height:32px;padding:0 8px;--mat-button-outlined-label-text-size: 12px}\n"], dependencies: [{ kind: "directive", type: FallbackSrcDirective, selector: "[fallbackSrc]" }, { kind: "pipe", type: DataAccessorPipe, name: "dataAccessor" }, { kind: "pipe", type: BlobToDataUrlPipe, name: "blobToDataUrl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{--primary-color: inherit;--primary-color-SCOPED-IN-nested-menu-oL1X: var(--primary-color);--on-primary-color: inherit;--on-primary-color-SCOPED-IN-nested-menu-oL1X: var(--on-primary-color);--surface-color: inherit;--surface-color-SCOPED-IN-nested-menu-oL1X: var(--surface-color);--on-surface-color: inherit;--on-surface-color-SCOPED-IN-nested-menu-oL1X: var(--on-surface-color);--background-color: inherit;--background-color-SCOPED-IN-nested-menu-oL1X: var(--background-color);--on-background-color: inherit;--on-background-color-SCOPED-IN-nested-menu-oL1X: var(--on-background-color)}:host{display:block;padding:8px 16px}:host .header{display:flex;justify-content:flex-start;align-items:center;padding:8px 0;box-sizing:border-box;gap:8px}:host .header .name{font-size:14px;font-weight:700}:host .header .description{display:flex;justify-content:flex-start;gap:4px;font-size:12px}:host .header img{width:40px;height:40px;border-radius:50%;background-color:var(--primary-color-SCOPED-IN-nested-menu-oL1X)}:host .content{font-size:14px;padding-bottom:24px;box-sizing:border-box}:host .content .screenshot{display:block;max-width:100%;border-radius:8px;margin-top:8px;box-shadow:0 2px 10px #0000001a;transition:transform .3s ease}:host .content .screenshot:hover{transform:scale(1.05)}:host .bottom.actions{display:flex;justify-content:flex-end;align-items:center;gap:8px}:host .bottom.actions button{height:32px;padding:0 8px;--mat-button-outlined-label-text-size: 12px}\n"], dependencies: [{ kind: "directive", type: FallbackSrcDirective, selector: "[fallbackSrc]" }, { kind: "pipe", type: DataAccessorPipe, name: "dataAccessor" }, { kind: "pipe", type: BlobToDataUrlPipe, name: "blobToDataUrl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ThreadMessageMolecule, decorators: [{
             type: Component,
@@ -123,7 +123,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
                             directive: ThreadMessageMoleculeStore,
                             inputs: ['name', 'message']
                         },
-                    ], styles: [":host{--primary-color: inherit;--primary-color-SCOPED-IN-nested-menu-Bgoi: var(--primary-color);--on-primary-color: inherit;--on-primary-color-SCOPED-IN-nested-menu-Bgoi: var(--on-primary-color);--surface-color: inherit;--surface-color-SCOPED-IN-nested-menu-Bgoi: var(--surface-color);--on-surface-color: inherit;--on-surface-color-SCOPED-IN-nested-menu-Bgoi: var(--on-surface-color);--background-color: inherit;--background-color-SCOPED-IN-nested-menu-Bgoi: var(--background-color);--on-background-color: inherit;--on-background-color-SCOPED-IN-nested-menu-Bgoi: var(--on-background-color)}:host{display:block;padding:8px 16px}:host .header{display:flex;justify-content:flex-start;align-items:center;padding:8px 0;box-sizing:border-box;gap:8px}:host .header .name{font-size:14px;font-weight:700}:host .header .description{display:flex;justify-content:flex-start;gap:4px;font-size:12px}:host .header img{width:40px;height:40px;border-radius:50%;background-color:var(--primary-color-SCOPED-IN-nested-menu-Bgoi)}:host .content{font-size:14px;padding-bottom:24px;box-sizing:border-box}:host .content .screenshot{display:block;max-width:100%;border-radius:8px;margin-top:8px;box-shadow:0 2px 10px #0000001a;transition:transform .3s ease}:host .content .screenshot:hover{transform:scale(1.05)}:host .bottom.actions{display:flex;justify-content:flex-end;align-items:center;gap:8px}:host .bottom.actions button{height:32px;padding:0 8px;--mat-button-outlined-label-text-size: 12px}\n"] }]
+                    ], styles: [":host{--primary-color: inherit;--primary-color-SCOPED-IN-nested-menu-oL1X: var(--primary-color);--on-primary-color: inherit;--on-primary-color-SCOPED-IN-nested-menu-oL1X: var(--on-primary-color);--surface-color: inherit;--surface-color-SCOPED-IN-nested-menu-oL1X: var(--surface-color);--on-surface-color: inherit;--on-surface-color-SCOPED-IN-nested-menu-oL1X: var(--on-surface-color);--background-color: inherit;--background-color-SCOPED-IN-nested-menu-oL1X: var(--background-color);--on-background-color: inherit;--on-background-color-SCOPED-IN-nested-menu-oL1X: var(--on-background-color)}:host{display:block;padding:8px 16px}:host .header{display:flex;justify-content:flex-start;align-items:center;padding:8px 0;box-sizing:border-box;gap:8px}:host .header .name{font-size:14px;font-weight:700}:host .header .description{display:flex;justify-content:flex-start;gap:4px;font-size:12px}:host .header img{width:40px;height:40px;border-radius:50%;background-color:var(--primary-color-SCOPED-IN-nested-menu-oL1X)}:host .content{font-size:14px;padding-bottom:24px;box-sizing:border-box}:host .content .screenshot{display:block;max-width:100%;border-radius:8px;margin-top:8px;box-shadow:0 2px 10px #0000001a;transition:transform .3s ease}:host .content .screenshot:hover{transform:scale(1.05)}:host .bottom.actions{display:flex;justify-content:flex-end;align-items:center;gap:8px}:host .bottom.actions button{height:32px;padding:0 8px;--mat-button-outlined-label-text-size: 12px}\n"] }]
         }] });
 
 /**