@ng-atomic/components 16.2.0 → 16.3.1

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

@@ -0,0 +1,182 @@
+import * as i0 from '@angular/core';
+import { inject, input, effect, Directive, PLATFORM_ID, Component, ChangeDetectionStrategy } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { LoadingFrame } from '@ng-atomic/components/frames/loading';
+import { SideNavFrame } from '@ng-atomic/components/frames/side-nav';
+import { EntranceFrame } from '@ng-atomic/components/frames/entrance';
+import { InjectableComponent, _computed, NgAtomicComponent } from '@ng-atomic/core';
+import { FormBuilder } from '@angular/forms';
+import { makeConfig } from '@ng-atomic/common/services/ui';
+import { isPlatformServer, isPlatformBrowser } from '@angular/common';
+import { BackgroundTemplateStore } from '@ng-atomic/components/templates/background';
+import { DrawerFrame } from '@ng-atomic/components/frames/drawer';
+import { FabFrame } from '@ng-atomic/components/frames/fab';
+
+var ActionId;
+(function (ActionId) {
+    ActionId["SIGN_IN_WITH_GOOGLE"] = "[@temokari/scheduler] Sign In With Google";
+    ActionId["NAVIGATE"] = "[@temokari/scheduler] Navigate";
+    ActionId["SIGN_OUT"] = "[@temokari/scheduler] Sign Out";
+})(ActionId || (ActionId = {}));
+class AppFrameStore extends InjectableComponent {
+    static { this.ActionId = ActionId; }
+    static { this.Config = makeConfig(() => {
+        return () => ({
+            fabActions: [],
+            fabHide: true,
+            isEntrance: true,
+            isLoading: false,
+            sideAppOpened: false,
+            title: 'title',
+            form: inject(FormBuilder).group({}),
+            entranceActions: [
+                { id: ActionId.SIGN_IN_WITH_GOOGLE, name: 'Googleでサインイン', icon: '' },
+            ],
+            sideNavActions: [
+                { id: ActionId.SIGN_OUT, name: 'ログアウト', icon: 'exit_to_app' },
+            ],
+            sideNavMode: 'collapsed',
+            sideAppOutletName: 'side-app',
+        });
+    }, ['components', 'frames', 'app']); }
+    constructor() {
+        super();
+        this.config = AppFrameStore.Config.inject();
+        this.isLoading = input(_computed(() => this.config().isLoading));
+        this.isEntrance = input(_computed(() => this.config().isEntrance));
+        this.sideAppOpened = input(_computed(() => this.config().sideAppOpened));
+        this.title = input(_computed(() => this.config().title));
+        this.form = input(_computed(() => this.config().form));
+        this.entranceActions = input(_computed(() => this.config().entranceActions));
+        this.sideNavActions = input(_computed(() => this.config().sideNavActions));
+        this.sideNavMode = input(_computed(() => this.config().sideNavMode));
+        this.sideAppOutletName = input(_computed(() => this.config().sideAppOutletName));
+        this.fabActions = input(_computed(() => this.config().fabActions));
+        this.fabHide = input(_computed(() => this.config().fabHide));
+        effect(() => {
+            console.debug('this.title:', this.title());
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: AppFrameStore, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.2.2", type: AppFrameStore, isStandalone: true, selector: "frames-app", inputs: { isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isEntrance: { classPropertyName: "isEntrance", publicName: "isEntrance", isSignal: true, isRequired: false, transformFunction: null }, sideAppOpened: { classPropertyName: "sideAppOpened", publicName: "sideAppOpened", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, entranceActions: { classPropertyName: "entranceActions", publicName: "entranceActions", isSignal: true, isRequired: false, transformFunction: null }, sideNavActions: { classPropertyName: "sideNavActions", publicName: "sideNavActions", isSignal: true, isRequired: false, transformFunction: null }, sideNavMode: { classPropertyName: "sideNavMode", publicName: "sideNavMode", isSignal: true, isRequired: false, transformFunction: null }, sideAppOutletName: { classPropertyName: "sideAppOutletName", publicName: "sideAppOutletName", isSignal: true, isRequired: false, transformFunction: null }, fabActions: { classPropertyName: "fabActions", publicName: "fabActions", isSignal: true, isRequired: false, transformFunction: null }, fabHide: { classPropertyName: "fabHide", publicName: "fabHide", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: AppFrameStore, decorators: [{
+            type: Directive,
+            args: [{ standalone: true, selector: 'frames-app' }]
+        }], ctorParameters: () => [] });
+class AppFrame extends NgAtomicComponent {
+    constructor() {
+        super(...arguments);
+        this.store = inject(AppFrameStore);
+        this.platformId = inject(PLATFORM_ID);
+    }
+    isPlatformServer() {
+        return isPlatformServer(this.platformId);
+    }
+    isPlatformBrowser() {
+        return isPlatformBrowser(this.platformId);
+    }
+    dispatch(action, scope, componentId) {
+        return super.dispatch(action, scope, componentId);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: AppFrame, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.2", type: AppFrame, isStandalone: true, selector: "frames-app", usesInheritance: true, hostDirectives: [{ directive: AppFrameStore }], ngImport: i0, template: `
+  <router-outlet/>
+  @if (isPlatformBrowser()) {
+    @defer {
+      <templates-background injectable/>
+    }
+  }
+  <frames-loading [isLoading]="store.isLoading()">
+    <frames-fab [actions]="store.fabActions()" [hide]="store.fabHide()">
+      <frames-entrance
+        [isEntrance]="store.isEntrance()"
+        [form]="store.form()"
+        [title]="store.title()"
+        [actions]="store.entranceActions()"
+        (action)="dispatch($event)"
+      >
+        <frames-drawer
+          [opened]="store.sideAppOpened()"
+          [position]="'end'"
+          [hasBackdrop]="false"
+        >
+          <frames-side-nav
+            [actions]="store.sideNavActions()"
+            [mode]="store.sideNavMode()"
+            [menuTitle]="store.title()"
+            (action)="dispatch($event)"
+            contents
+          >
+            <router-outlet contents/>
+          </frames-side-nav>
+          <div drawer style="width: var(--page-width-lv1);height: 100%;">
+            <router-outlet [name]="store.sideAppOutletName()" />
+        </div>
+        </frames-drawer>
+      </frames-entrance>
+    </frames-fab>
+  </frames-loading>
+  `, isInline: true, styles: [":host{--primary-color-SCOPED-IN-frames-app-RHaY: var(--primary-color);--on-primary-color-SCOPED-IN-frames-app-RHaY: var(--on-primary-color);--surface-color-SCOPED-IN-frames-app-RHaY: var(--surface-color);--on-surface-color-SCOPED-IN-frames-app-RHaY: var(--on-surface-color);--background-color-SCOPED-IN-frames-app-RHaY: var(--background-color);--on-background-color-SCOPED-IN-frames-app-RHaY: var(--on-background-color);--menu-width-SCOPED-IN-frames-app-RHaY: var(--menu-width);--menu-background-color-SCOPED-IN-frames-app-RHaY: var(--menu-background-color);--menu-on-background-color-SCOPED-IN-frames-app-RHaY: var(--menu-on-background-color);--background-primary-color-SCOPED-IN-frames-app-RHaY: var(--background-primary-color);--background-on-primary-color-SCOPED-IN-frames-app-RHaY: var(--background-on-primary-color);--background-background-color-SCOPED-IN-frames-app-RHaY: var(--background-background-color);--loading-primary-color-SCOPED-IN-frames-app-RHaY: var(--loading-primary-color);--menu-padding-top: 56px;--menu-padding-top-SCOPED-IN-frames-app-RHaY: var(--menu-padding-top);--loading-z-index: 1000;--loading-z-index-SCOPED-IN-frames-app-RHaY: var(--loading-z-index)}:host{display:block;width:100%;height:100%;position:fixed;color:var(--primary-color-SCOPED-IN-frames-app-RHaY);touch-action:none}:host *{--primary-color: var(--primary-color-SCOPED-IN-frames-app-RHaY);--on-primary-color: var(--on-primary-color-SCOPED-IN-frames-app-RHaY);--surface-color: var(--surface-color-SCOPED-IN-frames-app-RHaY);--on-surface-color: var(--on-surface-color-SCOPED-IN-frames-app-RHaY);--background-color: var(--background-color-SCOPED-IN-frames-app-RHaY);--on-background-color: var(--on-background-color-SCOPED-IN-frames-app-RHaY);--menu-background-color: var(--menu-background-color-SCOPED-IN-frames-app-RHaY);--menu-on-background-color: var(--menu-on-background-color-SCOPED-IN-frames-app-RHaY)}:host frames-side-nav{color:#000;--menu-width: var(--menu-width-SCOPED-IN-frames-app-RHaY)}:host frames-loading{--primary-color: var(--loading-primary-color-SCOPED-IN-frames-app-RHaY)}:host templates-background{--primary-color: var(--background-primary-color-SCOPED-IN-frames-app-RHaY);--on-primary-color: var(--background-on-primary-color-SCOPED-IN-frames-app-RHaY);--background-color: var(--background-background-color-SCOPED-IN-frames-app-RHaY);position:absolute;top:0;left:0}\n"], dependencies: [{ kind: "component", type: FabFrame, selector: "frames-fab" }, { kind: "component", type: LoadingFrame, selector: "frames-loading" }, { kind: "component", type: SideNavFrame, selector: "frames-side-nav" }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: EntranceFrame, selector: "frames-entrance" }, { kind: "component", type: 
+                // DrawerFrameStore,
+                DrawerFrame, selector: "frames-drawer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: AppFrame, decorators: [{
+            type: Component,
+            args: [{ selector: 'frames-app', standalone: true, imports: [
+                        FabFrame,
+                        LoadingFrame,
+                        SideNavFrame,
+                        RouterOutlet,
+                        EntranceFrame,
+                        // DrawerFrameStore,
+                        DrawerFrame,
+                        BackgroundTemplateStore,
+                    ], template: `
+  <router-outlet/>
+  @if (isPlatformBrowser()) {
+    @defer {
+      <templates-background injectable/>
+    }
+  }
+  <frames-loading [isLoading]="store.isLoading()">
+    <frames-fab [actions]="store.fabActions()" [hide]="store.fabHide()">
+      <frames-entrance
+        [isEntrance]="store.isEntrance()"
+        [form]="store.form()"
+        [title]="store.title()"
+        [actions]="store.entranceActions()"
+        (action)="dispatch($event)"
+      >
+        <frames-drawer
+          [opened]="store.sideAppOpened()"
+          [position]="'end'"
+          [hasBackdrop]="false"
+        >
+          <frames-side-nav
+            [actions]="store.sideNavActions()"
+            [mode]="store.sideNavMode()"
+            [menuTitle]="store.title()"
+            (action)="dispatch($event)"
+            contents
+          >
+            <router-outlet contents/>
+          </frames-side-nav>
+          <div drawer style="width: var(--page-width-lv1);height: 100%;">
+            <router-outlet [name]="store.sideAppOutletName()" />
+        </div>
+        </frames-drawer>
+      </frames-entrance>
+    </frames-fab>
+  </frames-loading>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+                        AppFrameStore,
+                    ], styles: [":host{--primary-color-SCOPED-IN-frames-app-RHaY: var(--primary-color);--on-primary-color-SCOPED-IN-frames-app-RHaY: var(--on-primary-color);--surface-color-SCOPED-IN-frames-app-RHaY: var(--surface-color);--on-surface-color-SCOPED-IN-frames-app-RHaY: var(--on-surface-color);--background-color-SCOPED-IN-frames-app-RHaY: var(--background-color);--on-background-color-SCOPED-IN-frames-app-RHaY: var(--on-background-color);--menu-width-SCOPED-IN-frames-app-RHaY: var(--menu-width);--menu-background-color-SCOPED-IN-frames-app-RHaY: var(--menu-background-color);--menu-on-background-color-SCOPED-IN-frames-app-RHaY: var(--menu-on-background-color);--background-primary-color-SCOPED-IN-frames-app-RHaY: var(--background-primary-color);--background-on-primary-color-SCOPED-IN-frames-app-RHaY: var(--background-on-primary-color);--background-background-color-SCOPED-IN-frames-app-RHaY: var(--background-background-color);--loading-primary-color-SCOPED-IN-frames-app-RHaY: var(--loading-primary-color);--menu-padding-top: 56px;--menu-padding-top-SCOPED-IN-frames-app-RHaY: var(--menu-padding-top);--loading-z-index: 1000;--loading-z-index-SCOPED-IN-frames-app-RHaY: var(--loading-z-index)}:host{display:block;width:100%;height:100%;position:fixed;color:var(--primary-color-SCOPED-IN-frames-app-RHaY);touch-action:none}:host *{--primary-color: var(--primary-color-SCOPED-IN-frames-app-RHaY);--on-primary-color: var(--on-primary-color-SCOPED-IN-frames-app-RHaY);--surface-color: var(--surface-color-SCOPED-IN-frames-app-RHaY);--on-surface-color: var(--on-surface-color-SCOPED-IN-frames-app-RHaY);--background-color: var(--background-color-SCOPED-IN-frames-app-RHaY);--on-background-color: var(--on-background-color-SCOPED-IN-frames-app-RHaY);--menu-background-color: var(--menu-background-color-SCOPED-IN-frames-app-RHaY);--menu-on-background-color: var(--menu-on-background-color-SCOPED-IN-frames-app-RHaY)}:host frames-side-nav{color:#000;--menu-width: var(--menu-width-SCOPED-IN-frames-app-RHaY)}:host frames-loading{--primary-color: var(--loading-primary-color-SCOPED-IN-frames-app-RHaY)}:host templates-background{--primary-color: var(--background-primary-color-SCOPED-IN-frames-app-RHaY);--on-primary-color: var(--background-on-primary-color-SCOPED-IN-frames-app-RHaY);--background-color: var(--background-background-color-SCOPED-IN-frames-app-RHaY);position:absolute;top:0;left:0}\n"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AppFrame, AppFrameStore };
+//# sourceMappingURL=ng-atomic-components-frames-app.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ng-atomic-components-frames-app.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/frames/app/app.frame.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/app/ng-atomic-components-frames-app.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, PLATFORM_ID, effect, input } from '@angular/core';\nimport { Directive, inject } from '@angular/core';\nimport { RouterOutlet } from '@angular/router';\nimport { LoadingFrame } from '@ng-atomic/components/frames/loading';\nimport { SideNavFrame } from '@ng-atomic/components/frames/side-nav';\nimport { EntranceFrame } from '@ng-atomic/components/frames/entrance';\nimport { Action, InjectableComponent, NgAtomicComponent, _computed } from '@ng-atomic/core';\nimport { FormBuilder } from '@angular/forms';\nimport { makeConfig } from '@ng-atomic/common/services/ui';\nimport { isPlatformBrowser, isPlatformServer } from '@angular/common';\nimport { BackgroundTemplateStore } from '@ng-atomic/components/templates/background';\nimport { DrawerFrame } from '@ng-atomic/components/frames/drawer';\nimport { FabFrame } from '@ng-atomic/components/frames/fab';\n\nenum ActionId {\n  SIGN_IN_WITH_GOOGLE = '[@temokari/scheduler] Sign In With Google',\n  NAVIGATE = '[@temokari/scheduler] Navigate',\n  SIGN_OUT = '[@temokari/scheduler] Sign Out',\n}\n\n@Directive({ standalone: true, selector: 'frames-app' })\nexport class AppFrameStore extends InjectableComponent {\n  static readonly ActionId = ActionId;\n  static readonly Config = makeConfig(() => {\n    return () => ({\n      fabActions: [],\n      fabHide: true,\n      isEntrance: true,\n      isLoading: false,\n      sideAppOpened: false,\n      title: 'title',\n      form: inject(FormBuilder).group({}),\n      entranceActions: [\n        { id: ActionId.SIGN_IN_WITH_GOOGLE, name: 'Googleでサインイン', icon: '' },\n      ],\n      sideNavActions: [\n        { id: ActionId.SIGN_OUT, name: 'ログアウト', icon: 'exit_to_app' },\n      ],\n      sideNavMode: 'collapsed' as 'expanded' | 'collapsed',\n      sideAppOutletName: 'side-app',\n    });\n  }, ['components', 'frames', 'app'])\n\n  readonly config = AppFrameStore.Config.inject();\n  readonly isLoading = input(_computed(() => this.config().isLoading));\n  readonly isEntrance = input(_computed(() => this.config().isEntrance));\n  readonly sideAppOpened = input(_computed(() => this.config().sideAppOpened));\n  readonly title = input(_computed(() => this.config().title));\n  readonly form = input(_computed(() => this.config().form));\n  readonly entranceActions = input(_computed(() => this.config().entranceActions));\n  readonly sideNavActions = input(_computed(() => this.config().sideNavActions));\n  readonly sideNavMode = input(_computed(() => this.config().sideNavMode));\n  readonly sideAppOutletName = input(_computed(() => this.config().sideAppOutletName));\n  readonly fabActions = input(_computed(() => this.config().fabActions));\n  readonly fabHide = input(_computed(() => this.config().fabHide));\n\n  constructor() {\n    super();\n    effect(() => {\n      console.debug('this.title:', this.title());\n    })\n  }\n}\n\n\n@Component({\n  selector: 'frames-app',\n  standalone: true,\n  imports: [\n    FabFrame,\n    LoadingFrame,\n    SideNavFrame,\n    RouterOutlet,\n    EntranceFrame,\n    // DrawerFrameStore,\n    DrawerFrame,\n    BackgroundTemplateStore,\n  ],\n  template: `\n  <router-outlet/>\n  @if (isPlatformBrowser()) {\n    @defer {\n      <templates-background injectable/>\n    }\n  }\n  <frames-loading [isLoading]=\"store.isLoading()\">\n    <frames-fab [actions]=\"store.fabActions()\" [hide]=\"store.fabHide()\">\n      <frames-entrance\n        [isEntrance]=\"store.isEntrance()\"\n        [form]=\"store.form()\"\n        [title]=\"store.title()\"\n        [actions]=\"store.entranceActions()\"\n        (action)=\"dispatch($event)\"\n      >\n        <frames-drawer\n          [opened]=\"store.sideAppOpened()\"\n          [position]=\"'end'\"\n          [hasBackdrop]=\"false\"\n        >\n          <frames-side-nav\n            [actions]=\"store.sideNavActions()\"\n            [mode]=\"store.sideNavMode()\"\n            [menuTitle]=\"store.title()\"\n            (action)=\"dispatch($event)\"\n            contents\n          >\n            <router-outlet contents/>\n          </frames-side-nav>\n          <div drawer style=\"width: var(--page-width-lv1);height: 100%;\">\n            <router-outlet [name]=\"store.sideAppOutletName()\" />\n        </div>\n        </frames-drawer>\n      </frames-entrance>\n    </frames-fab>\n  </frames-loading>\n  `,\n  styleUrl: './app.frame.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [\n    AppFrameStore,\n  ],\n})\nexport class AppFrame extends NgAtomicComponent {\n  protected store = inject(AppFrameStore);\n  readonly platformId = inject(PLATFORM_ID);\n\n  protected isPlatformServer() {\n    return isPlatformServer(this.platformId);\n  }\n\n  protected isPlatformBrowser() {\n    return isPlatformBrowser(this.platformId);\n  }\n\n  dispatch(action: Action<any>, scope?: string, componentId?: string | number): Promise<void> {\n    return super.dispatch(action, scope, componentId);\n  }\n}\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-auto-layout.mjs

@@ -3,14 +3,14 @@ import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy } from '@angular/core';
 
 class AutoLayoutFrame {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AutoLayoutFrame, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AutoLayoutFrame, isStandalone: true, selector: "frames-auto-layout", ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{--gap: 24px;--gap-SCOPED-IN-auto-layout-t8vi: var(--gap);--vertical-padding: 24px;--vertical-padding-SCOPED-IN-auto-layout-t8vi: var(--vertical-padding)}:host{display:flex;width:100%;height:100%;justify-content:center;gap:var(--gap-SCOPED-IN-auto-layout-t8vi);box-sizing:border-box;padding:var(--vertical-padding-SCOPED-IN-auto-layout-t8vi) 0}:host[horizontal]{flex-direction:row}:host[vertical]{flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: AutoLayoutFrame, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.2", type: AutoLayoutFrame, isStandalone: true, selector: "frames-auto-layout", ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{--gap: 24px;--gap-SCOPED-IN-auto-layout-gA4L: var(--gap);--vertical-padding: 24px;--vertical-padding-SCOPED-IN-auto-layout-gA4L: var(--vertical-padding)}:host{display:flex;width:100%;height:100%;justify-content:center;gap:var(--gap-SCOPED-IN-auto-layout-gA4L);box-sizing:border-box;padding:var(--vertical-padding-SCOPED-IN-auto-layout-gA4L) 0}:host[horizontal]{flex-direction:row}:host[vertical]{flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AutoLayoutFrame, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: AutoLayoutFrame, decorators: [{
             type: Component,
             args: [{ selector: 'frames-auto-layout', standalone: true, imports: [
                         CommonModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", styles: [":host{--gap: 24px;--gap-SCOPED-IN-auto-layout-t8vi: var(--gap);--vertical-padding: 24px;--vertical-padding-SCOPED-IN-auto-layout-t8vi: var(--vertical-padding)}:host{display:flex;width:100%;height:100%;justify-content:center;gap:var(--gap-SCOPED-IN-auto-layout-t8vi);box-sizing:border-box;padding:var(--vertical-padding-SCOPED-IN-auto-layout-t8vi) 0}:host[horizontal]{flex-direction:row}:host[vertical]{flex-direction:column}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", styles: [":host{--gap: 24px;--gap-SCOPED-IN-auto-layout-gA4L: var(--gap);--vertical-padding: 24px;--vertical-padding-SCOPED-IN-auto-layout-gA4L: var(--vertical-padding)}:host{display:flex;width:100%;height:100%;justify-content:center;gap:var(--gap-SCOPED-IN-auto-layout-gA4L);box-sizing:border-box;padding:var(--vertical-padding-SCOPED-IN-auto-layout-gA4L) 0}:host[horizontal]{flex-direction:row}:host[vertical]{flex-direction:column}\n"] }]
         }] });
 
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"ng-atomic-components-frames-auto-layout.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/frames/auto-layout/auto-layout.frame.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/auto-layout/auto-layout.frame.html","../../../../../packages/@ng-atomic/components/src/lib/frames/auto-layout/ng-atomic-components-frames-auto-layout.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n  selector: 'frames-auto-layout',\n  standalone: true,\n  imports: [\n    CommonModule,\n  ],\n  templateUrl: './auto-layout.frame.html',\n  styleUrls: ['./auto-layout.frame.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AutoLayoutFrame { }\n","<ng-content></ng-content>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAaa,eAAe,CAAA;+GAAf,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;mGAAf,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECb5B,2BAAyB,EAAA,MAAA,EAAA,CAAA,4aAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDOrB,YAAY,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;4FAMH,eAAe,EAAA,UAAA,EAAA,CAAA;kBAV3B,SAAS;+BACE,oBAAoB,EAAA,UAAA,EAClB,IAAI,EACP,OAAA,EAAA;wBACP,YAAY;qBACb,EAGgB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,2BAAA,EAAA,MAAA,EAAA,CAAA,4aAAA,CAAA,EAAA,CAAA;;;AEXjD;;AAEG;;;;"}
+{"version":3,"file":"ng-atomic-components-frames-auto-layout.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/frames/auto-layout/auto-layout.frame.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/auto-layout/auto-layout.frame.html","../../../../../packages/@ng-atomic/components/src/lib/frames/auto-layout/ng-atomic-components-frames-auto-layout.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n  selector: 'frames-auto-layout',\n  standalone: true,\n  imports: [\n    CommonModule,\n  ],\n  templateUrl: './auto-layout.frame.html',\n  styleUrls: ['./auto-layout.frame.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AutoLayoutFrame { }\n","<ng-content></ng-content>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAaa,eAAe,CAAA;8GAAf,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAAf,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECb5B,2BAAyB,EAAA,MAAA,EAAA,CAAA,4aAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDOrB,YAAY,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;2FAMH,eAAe,EAAA,UAAA,EAAA,CAAA;kBAV3B,SAAS;+BACE,oBAAoB,EAAA,UAAA,EAClB,IAAI,EACP,OAAA,EAAA;wBACP,YAAY;qBACb,EAGgB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,2BAAA,EAAA,MAAA,EAAA,CAAA,4aAAA,CAAA,EAAA,CAAA;;;AEXjD;;AAEG;;;;"}

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

@@ -5,15 +5,15 @@ import * as i1 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 
 class CardFrame {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardFrame, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CardFrame, isStandalone: true, selector: "frames-card", ngImport: i0, template: "<mat-card><ng-content></ng-content></mat-card>", styles: [":host{display:block}:host mat-card{display:flex;justify-content:center;align-items:center;flex-direction:column;box-sizing:border-box;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: CardFrame, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.2", type: CardFrame, isStandalone: true, selector: "frames-card", ngImport: i0, template: `<mat-card><ng-content></ng-content></mat-card>`, isInline: true, styles: [":host{display:block}:host mat-card{display:flex;justify-content:center;align-items:center;flex-direction:column;padding:24px;box-sizing:border-box;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardFrame, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: CardFrame, decorators: [{
             type: Component,
             args: [{ selector: 'frames-card', standalone: true, imports: [
                         CommonModule,
                         MatCardModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-card><ng-content></ng-content></mat-card>", styles: [":host{display:block}:host mat-card{display:flex;justify-content:center;align-items:center;flex-direction:column;box-sizing:border-box;width:100%;height:100%}\n"] }]
+                    ], template: `<mat-card><ng-content></ng-content></mat-card>`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}:host mat-card{display:flex;justify-content:center;align-items:center;flex-direction:column;padding:24px;box-sizing:border-box;width:100%}\n"] }]
         }] });
 
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"ng-atomic-components-frames-card.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/frames/card/card.frame.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/card/card.frame.html","../../../../../packages/@ng-atomic/components/src/lib/frames/card/ng-atomic-components-frames-card.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { MatCardModule } from '@angular/material/card';\n\n@Component({\n  selector: 'frames-card',\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatCardModule,\n  ],\n  templateUrl: './card.frame.html',\n  styleUrls: ['./card.frame.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CardFrame { }\n","<mat-card><ng-content></ng-content></mat-card>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;MAea,SAAS,CAAA;+GAAT,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAT,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,SAAS,ECftB,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,gDAA8C,EDQ1C,MAAA,EAAA,CAAA,iKAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,YAAY,8BACZ,aAAa,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,YAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;4FAMJ,SAAS,EAAA,UAAA,EAAA,CAAA;kBAXrB,SAAS;+BACE,aAAa,EAAA,UAAA,EACX,IAAI,EACP,OAAA,EAAA;wBACP,YAAY;wBACZ,aAAa;qBACd,EAGgB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,gDAAA,EAAA,MAAA,EAAA,CAAA,iKAAA,CAAA,EAAA,CAAA;;;AEbjD;;AAEG;;;;"}
+{"version":3,"file":"ng-atomic-components-frames-card.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/frames/card/card.frame.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/card/ng-atomic-components-frames-card.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { MatCardModule } from '@angular/material/card';\n\n@Component({\n  selector: 'frames-card',\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatCardModule,\n  ],\n  template: `<mat-card><ng-content></ng-content></mat-card>`,\n  styleUrls: ['./card.frame.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CardFrame { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;MAea,SAAS,CAAA;8GAAT,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAT,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,SAAS,EAJV,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA,8CAAA,CAAgD,EAHxD,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,kKAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,YAAY,8BACZ,aAAa,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,YAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;2FAMJ,SAAS,EAAA,UAAA,EAAA,CAAA;kBAXrB,SAAS;+BACE,aAAa,EAAA,UAAA,EACX,IAAI,EACP,OAAA,EAAA;wBACP,YAAY;wBACZ,aAAa;AACd,qBAAA,EAAA,QAAA,EACS,CAAgD,8CAAA,CAAA,EAAA,eAAA,EAEzC,uBAAuB,CAAC,MAAM,EAAA,MAAA,EAAA,CAAA,kKAAA,CAAA,EAAA,CAAA;;;ACbjD;;AAEG;;;;"}

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

@@ -0,0 +1,169 @@
+import { __decorate } from 'tslib';
+import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, Directive, inject, PLATFORM_ID, TemplateRef, contentChild, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { makeConfig } from '@ng-atomic/common/services/ui';
+import { InjectableComponent, _computed, TokenizedType, NgAtomicComponent } from '@ng-atomic/core';
+
+var ColumnsFrameStore_1;
+let ColumnsFrameStore = class ColumnsFrameStore extends InjectableComponent {
+    constructor() {
+        super(...arguments);
+        this.config = ColumnsFrameStore_1.Config.inject();
+        this.type = input(_computed(() => this.config().type));
+    }
+    static { ColumnsFrameStore_1 = this; }
+    static { this.Config = makeConfig(() => (_, context) => {
+        const getType = () => {
+            switch (context.breakpoint) {
+                case 'xSmall':
+                case 'small': return 'column';
+                default: return 'row';
+            }
+        };
+        return { type: getType() };
+    }, ['components', 'frames', 'columns']); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: ColumnsFrameStore, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.2.2", type: ColumnsFrameStore, isStandalone: true, selector: "frames-columns", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+};
+ColumnsFrameStore = ColumnsFrameStore_1 = __decorate([
+    TokenizedType()
+], ColumnsFrameStore);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: ColumnsFrameStore, decorators: [{
+            type: Directive,
+            args: [{ standalone: true, selector: 'frames-columns' }]
+        }] });
+class LeftColumn {
+    constructor() {
+        this.platformId = inject(PLATFORM_ID);
+        this.isPlatformBrowser = isPlatformBrowser(this.platformId);
+        this.templateRef = inject((TemplateRef));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: LeftColumn, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.2", type: LeftColumn, isStandalone: true, selector: "[left], [leftColumn]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: LeftColumn, decorators: [{
+            type: Directive,
+            args: [{ standalone: true, selector: '[left], [leftColumn]' }]
+        }] });
+class MainColumn {
+    constructor() {
+        this.platformId = inject(PLATFORM_ID);
+        this.isPlatformBrowser = isPlatformBrowser(this.platformId);
+        this.templateRef = inject((TemplateRef));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: MainColumn, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.2", type: MainColumn, isStandalone: true, selector: "[main], [mainColumn]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: MainColumn, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[main], [mainColumn]',
+                }]
+        }] });
+class RightColumn {
+    constructor() {
+        this.platformId = inject(PLATFORM_ID);
+        this.isPlatformBrowser = isPlatformBrowser(this.platformId);
+        this.templateRef = inject((TemplateRef));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: RightColumn, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.2", type: RightColumn, isStandalone: true, selector: "[right], [rightColumn]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: RightColumn, decorators: [{
+            type: Directive,
+            args: [{ standalone: true, selector: '[right], [rightColumn]' }]
+        }] });
+class ColumnsFrame extends NgAtomicComponent {
+    constructor() {
+        super(...arguments);
+        this.platformId = inject(PLATFORM_ID);
+        this.store = inject(ColumnsFrameStore);
+        this.left = contentChild(LeftColumn);
+        this.main = contentChild(MainColumn);
+        this.right = contentChild(RightColumn);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: ColumnsFrame, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.2", type: ColumnsFrame, isStandalone: true, selector: "frames-columns", host: { properties: { "attr.type": "store.type()" } }, queries: [{ propertyName: "left", first: true, predicate: LeftColumn, descendants: true, isSignal: true }, { propertyName: "main", first: true, predicate: MainColumn, descendants: true, isSignal: true }, { propertyName: "right", first: true, predicate: RightColumn, descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: ColumnsFrameStore, inputs: ["type", "type"] }], ngImport: i0, template: `
+    @if(left()?.templateRef && left()?.isPlatformBrowser) {
+      <div class="left container">
+        <ng-container [ngTemplateOutlet]="left()?.templateRef" />
+      </div>
+    }
+
+    @if (main()?.templateRef && main()?.isPlatformBrowser) {
+      <main class="main container">
+        <ng-container [ngTemplateOutlet]="main()?.templateRef" />
+      </main>
+    }
+    
+    @if (right()?.templateRef && right()?.isPlatformBrowser) {
+      <div class="right container">
+        <ng-container [ngTemplateOutlet]="right()?.templateRef" />
+      </div>
+    }
+  `, isInline: true, styles: [":host{display:block;--side-width: 360px;--side-width-SCOPED-IN-columns-1WZn: var(--side-width)}:host{display:flex;flex-direction:row;justify-content:space-between;width:100%;height:100%}:host[type=row]{flex-direction:row;justify-content:space-between}:host[type=row] .container{width:100%}:host[type=row] .container.left{max-width:var(--side-width-SCOPED-IN-columns-1WZn)}:host[type=row] .container.right{max-width:var(--side-width-SCOPED-IN-columns-1WZn)}:host[type=column]{flex-direction:column;justify-content:flex-start}:host[type=column] .container.main{width:100%}:host[type=column] .container.left{width:100%}:host[type=column] .container.right{width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: ColumnsFrame, decorators: [{
+            type: Component,
+            args: [{ selector: 'frames-columns', standalone: true, imports: [
+                        NgTemplateOutlet,
+                    ], template: `
+    @if(left()?.templateRef && left()?.isPlatformBrowser) {
+      <div class="left container">
+        <ng-container [ngTemplateOutlet]="left()?.templateRef" />
+      </div>
+    }
+
+    @if (main()?.templateRef && main()?.isPlatformBrowser) {
+      <main class="main container">
+        <ng-container [ngTemplateOutlet]="main()?.templateRef" />
+      </main>
+    }
+    
+    @if (right()?.templateRef && right()?.isPlatformBrowser) {
+      <div class="right container">
+        <ng-container [ngTemplateOutlet]="right()?.templateRef" />
+      </div>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+                        {
+                            directive: ColumnsFrameStore,
+                            inputs: ['type'],
+                        }
+                    ], host: {
+                        '[attr.type]': 'store.type()',
+                    }, styles: [":host{display:block;--side-width: 360px;--side-width-SCOPED-IN-columns-1WZn: var(--side-width)}:host{display:flex;flex-direction:row;justify-content:space-between;width:100%;height:100%}:host[type=row]{flex-direction:row;justify-content:space-between}:host[type=row] .container{width:100%}:host[type=row] .container.left{max-width:var(--side-width-SCOPED-IN-columns-1WZn)}:host[type=row] .container.right{max-width:var(--side-width-SCOPED-IN-columns-1WZn)}:host[type=column]{flex-direction:column;justify-content:flex-start}:host[type=column] .container.main{width:100%}:host[type=column] .container.left{width:100%}:host[type=column] .container.right{width:100%}\n"] }]
+        }] });
+class ColumnsFrameModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: ColumnsFrameModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.2", ngImport: i0, type: ColumnsFrameModule, imports: [ColumnsFrame, LeftColumn, MainColumn, RightColumn], exports: [ColumnsFrame, LeftColumn, MainColumn, RightColumn] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: ColumnsFrameModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: ColumnsFrameModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        // ColumnsFrameStore,
+                        ColumnsFrame,
+                        LeftColumn,
+                        MainColumn,
+                        RightColumn,
+                    ],
+                    exports: [
+                        // ColumnsFrameStore,
+                        ColumnsFrame,
+                        LeftColumn,
+                        MainColumn,
+                        RightColumn,
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ColumnsFrame, ColumnsFrameModule, ColumnsFrameStore, LeftColumn, MainColumn, RightColumn };
+//# sourceMappingURL=ng-atomic-components-frames-columns.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ng-atomic-components-frames-columns.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/frames/columns/columns.frame.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/columns/ng-atomic-components-frames-columns.ts"],"sourcesContent":["import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Directive, NgModule, PLATFORM_ID, TemplateRef, contentChild, inject, input } from '@angular/core';\nimport { makeConfig } from '@ng-atomic/common/services/ui';\nimport { InjectableComponent, NgAtomicComponent, TokenizedType, _computed } from '@ng-atomic/core';\n\n@TokenizedType()\n@Directive({standalone: true, selector: 'frames-columns'})\nexport class ColumnsFrameStore extends InjectableComponent {\n  static readonly Config = makeConfig(() => (_, context) => {\n    const getType = (): 'row' | 'column' => {\n      switch (context.breakpoint) {\n        case 'xSmall':\n        case 'small': return 'column';\n        default: return 'row';\n      }\n    }\n    return { type: getType() };\n  }, ['components', 'frames', 'columns']);\n  readonly config = ColumnsFrameStore.Config.inject();\n  readonly type = input<'row' | 'column'>(_computed(() => this.config().type));\n}\n\n@Directive({standalone: true, selector: '[left], [leftColumn]'})\nexport class LeftColumn {\n  readonly platformId = inject(PLATFORM_ID);\n  readonly isPlatformBrowser = isPlatformBrowser(this.platformId);\n  readonly templateRef = inject(TemplateRef<unknown>)\n}\n\n@Directive({\n  standalone: true,\n  selector: '[main], [mainColumn]',\n})\nexport class MainColumn {\n  readonly platformId = inject(PLATFORM_ID);\n  readonly isPlatformBrowser = isPlatformBrowser(this.platformId);\n  readonly templateRef = inject(TemplateRef<unknown>)\n}\n\n@Directive({standalone: true, selector: '[right], [rightColumn]'})\nexport class RightColumn {\n  readonly platformId = inject(PLATFORM_ID);\n  readonly isPlatformBrowser = isPlatformBrowser(this.platformId);\n  readonly templateRef = inject(TemplateRef<unknown>)\n}\n\n@Component({\n  selector: 'frames-columns',\n  standalone: true,\n  imports: [\n    NgTemplateOutlet,\n  ],\n  template: `\n    @if(left()?.templateRef && left()?.isPlatformBrowser) {\n      <div class=\"left container\">\n        <ng-container [ngTemplateOutlet]=\"left()?.templateRef\" />\n      </div>\n    }\n\n    @if (main()?.templateRef && main()?.isPlatformBrowser) {\n      <main class=\"main container\">\n        <ng-container [ngTemplateOutlet]=\"main()?.templateRef\" />\n      </main>\n    }\n    \n    @if (right()?.templateRef && right()?.isPlatformBrowser) {\n      <div class=\"right container\">\n        <ng-container [ngTemplateOutlet]=\"right()?.templateRef\" />\n      </div>\n    }\n  `,\n  styleUrl: './columns.frame.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [\n    {\n      directive: ColumnsFrameStore,\n      inputs: ['type'],\n    }\n  ],\n  host: {\n    '[attr.type]': 'store.type()',\n  },\n})\nexport class ColumnsFrame extends NgAtomicComponent {\n  protected readonly platformId = inject(PLATFORM_ID);\n  protected readonly store = inject(ColumnsFrameStore);\n  protected readonly left = contentChild(LeftColumn);\n  protected readonly main = contentChild(MainColumn);\n  protected readonly right = contentChild(RightColumn);\n}\n\n@NgModule({\n  imports: [\n    // ColumnsFrameStore,\n    ColumnsFrame,\n    LeftColumn,\n    MainColumn,\n    RightColumn,\n  ],\n  exports: [\n    // ColumnsFrameStore,\n    ColumnsFrame,\n    LeftColumn,\n    MainColumn,\n    RightColumn,\n  ]\n})\nexport class ColumnsFrameModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;AAOO,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,mBAAmB,CAAA;AAAnD,IAAA,WAAA,GAAA;;AAWI,QAAA,IAAA,CAAA,MAAM,GAAG,mBAAiB,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;AAC3C,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAmB,SAAS,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;AAC9E,KAAA;;aAZiB,IAAM,CAAA,MAAA,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,KAAI;QACvD,MAAM,OAAO,GAAG,MAAuB;YACrC,QAAQ,OAAO,CAAC,UAAU;AACxB,gBAAA,KAAK,QAAQ,CAAC;AACd,gBAAA,KAAK,OAAO,EAAE,OAAO,QAAQ,CAAC;AAC9B,gBAAA,SAAS,OAAO,KAAK,CAAC;AACvB,aAAA;AACH,SAAC,CAAA;AACD,QAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,CAAC;KAC5B,EAAE,CAAC,YAAY,EAAE,QAAQ,EAAE,SAAS,CAAC,CAThB,CASkB,EAAA;8GAV7B,iBAAiB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,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,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;AAAjB,iBAAiB,GAAA,mBAAA,GAAA,UAAA,CAAA;AAF7B,IAAA,aAAa,EAAE;AAEH,CAAA,EAAA,iBAAiB,CAa7B,CAAA;2FAbY,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAD7B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA,EAAC,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,gBAAgB,EAAC,CAAA;;MAiB5C,UAAU,CAAA;AADvB,IAAA,WAAA,GAAA;AAEW,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC;AACjC,QAAA,IAAA,CAAA,iBAAiB,GAAG,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;AACvD,QAAA,IAAA,CAAA,WAAW,GAAG,MAAM,EAAC,WAAoB,EAAC,CAAA;AACpD,KAAA;8GAJY,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAAV,UAAU,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,sBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;2FAAV,UAAU,EAAA,UAAA,EAAA,CAAA;kBADtB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA,EAAC,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,sBAAsB,EAAC,CAAA;;MAWlD,UAAU,CAAA;AAJvB,IAAA,WAAA,GAAA;AAKW,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC;AACjC,QAAA,IAAA,CAAA,iBAAiB,GAAG,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;AACvD,QAAA,IAAA,CAAA,WAAW,GAAG,MAAM,EAAC,WAAoB,EAAC,CAAA;AACpD,KAAA;8GAJY,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAAV,UAAU,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,sBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;2FAAV,UAAU,EAAA,UAAA,EAAA,CAAA;kBAJtB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,QAAQ,EAAE,sBAAsB;AACjC,iBAAA,CAAA;;MAQY,WAAW,CAAA;AADxB,IAAA,WAAA,GAAA;AAEW,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC;AACjC,QAAA,IAAA,CAAA,iBAAiB,GAAG,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;AACvD,QAAA,IAAA,CAAA,WAAW,GAAG,MAAM,EAAC,WAAoB,EAAC,CAAA;AACpD,KAAA;8GAJY,WAAW,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAAX,WAAW,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,wBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;2FAAX,WAAW,EAAA,UAAA,EAAA,CAAA;kBADvB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA,EAAC,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,wBAAwB,EAAC,CAAA;;AA4C3D,MAAO,YAAa,SAAQ,iBAAiB,CAAA;AArCnD,IAAA,WAAA,GAAA;;AAsCqB,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC;AACjC,QAAA,IAAA,CAAA,KAAK,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC;AAClC,QAAA,IAAA,CAAA,IAAI,GAAG,YAAY,CAAC,UAAU,CAAC,CAAC;AAChC,QAAA,IAAA,CAAA,IAAI,GAAG,YAAY,CAAC,UAAU,CAAC,CAAC;AAChC,QAAA,IAAA,CAAA,KAAK,GAAG,YAAY,CAAC,WAAW,CAAC,CAAC;AACtD,KAAA;8GANY,YAAY,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAAZ,YAAY,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,WAAA,EAAA,cAAA,EAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,MAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAGgB,UAAU,EACV,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,MAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,UAAU,wFACT,WAAW,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EAjFxC,iBAAiB,EA6ClB,MAAA,EAAA,CAAA,MAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;;AAkBT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,2pBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EApBC,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;2FAiCP,YAAY,EAAA,UAAA,EAAA,CAAA;kBArCxB,SAAS;+BACE,gBAAgB,EAAA,UAAA,EACd,IAAI,EACP,OAAA,EAAA;wBACP,gBAAgB;qBACjB,EACS,QAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;;GAkBT,EAEgB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAC/B,cAAA,EAAA;AACd,wBAAA;AACE,4BAAA,SAAS,EAAE,iBAAiB;4BAC5B,MAAM,EAAE,CAAC,MAAM,CAAC;AACjB,yBAAA;qBACF,EACK,IAAA,EAAA;AACJ,wBAAA,aAAa,EAAE,cAAc;AAC9B,qBAAA,EAAA,MAAA,EAAA,CAAA,2pBAAA,CAAA,EAAA,CAAA;;MA0BU,kBAAkB,CAAA;8GAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA,EAAA;AAAlB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,EAxBlB,OAAA,EAAA,CAAA,YAAY,EA5DZ,UAAU,EAUV,UAAU,EAOV,WAAW,CAAA,EAAA,OAAA,EAAA,CA2CX,YAAY,EA5DZ,UAAU,EAUV,UAAU,EAOV,WAAW,CAAA,EAAA,CAAA,CAAA,EAAA;+GAmEX,kBAAkB,EAAA,CAAA,CAAA,EAAA;;2FAAlB,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAhB9B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE;;wBAEP,YAAY;wBACZ,UAAU;wBACV,UAAU;wBACV,WAAW;AACZ,qBAAA;AACD,oBAAA,OAAO,EAAE;;wBAEP,YAAY;wBACZ,UAAU;wBACV,UAAU;wBACV,WAAW;AACZ,qBAAA;AACF,iBAAA,CAAA;;;AC1GD;;AAEG;;;;"}

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

@@ -1,6 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Component, ChangeDetectionStrategy, ViewChild } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { inject, ElementRef, viewChild, Component, ChangeDetectionStrategy } from '@angular/core';
 import * as i1 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
 import { CdkDrag } from '@angular/cdk/drag-drop';
@@ -16,27 +15,35 @@ class DividerFrame extends NgAtomicComponent {
     constructor() {
         super(...arguments);
         this.el = inject(ElementRef);
-        this.distance = { x: 0, y: 0 };
+        this.firstContent = viewChild('first', { read: ElementRef });
+        this.divider = viewChild.required('el', { read: ElementRef });
     }
     static { this.ActionId = ActionId; }
     onDragStart($event) {
         this.dispatch({ id: ActionId.DRAG_STARTED, payload: $event }, 'default');
-        const parentRect = this.divider.nativeElement.parentElement.getBoundingClientRect();
-        const elementRect = this.divider.nativeElement.getBoundingClientRect();
+        const parentRect = this.divider().nativeElement.parentElement.getBoundingClientRect();
+        const elementRect = this.divider().nativeElement.getBoundingClientRect();
         this.firstContentHeight = elementRect.top - parentRect.top;
     }
     onDragMoved($event) {
         this.dispatch({ id: ActionId.DRAG_MOVED, payload: $event }, 'default');
-        this.divider.nativeElement.style.transform = `translate3d(0, 0, 0)`;
+        this.divider().nativeElement.style.transform = `translate3d(0, 0, 0)`;
         const height = Math.max(1, this.firstContentHeight + $event.distance.y);
-        this.el.nativeElement.style.setProperty('--first-content-height', `${height}px`);
+        this.setFirstContentHeight(height, 'px');
     }
     onDragEnd($event) {
         this.dispatch({ id: ActionId.DRAG_ENDED, payload: $event }, 'default');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DividerFrame, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DividerFrame, isStandalone: true, selector: "frames-divider", viewQueries: [{ propertyName: "divider", first: true, predicate: ["el"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
-    <div class="first">
+    setFirstContentHeight(height, unit = 'px', { animate = false } = {}) {
+        if (this.firstContent() && animate) {
+            this.firstContent().nativeElement.style.transition = 'height 0.5s';
+            setTimeout(() => this.firstContent().nativeElement.style.transition = 'none', 500);
+        }
+        this.el.nativeElement.style.setProperty('--first-content-height', `${height}${unit}`);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: DividerFrame, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.2.2", type: DividerFrame, isStandalone: true, selector: "frames-divider", viewQueries: [{ propertyName: "firstContent", first: true, predicate: ["first"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "divider", first: true, predicate: ["el"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <div class="first" #first>
       <ng-content select="[first]"></ng-content>
     </div>
     <mat-divider
@@ -52,16 +59,15 @@ class DividerFrame extends NgAtomicComponent {
     <div class="second">
       <ng-content select="[second]"></ng-content>
     </div>
-  `, isInline: true, styles: [":host{--first-content-height: 0px;--first-content-height-SCOPED-IN-divider-pvGY: var(--first-content-height)}:host{position:relative;display:flex;flex-direction:column;height:100%;width:100%}:host div.first{height:var(--first-content-height-SCOPED-IN-divider-pvGY);overflow:hidden;display:flex;flex-direction:column}:host mat-divider{z-index:1000;width:100%;cursor:row-resize}:host div.second{display:flex;flex-direction:column;height:calc(100% - var(--first-content-height-SCOPED-IN-divider-pvGY));overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{--first-content-height: 0px;--first-content-height-SCOPED-IN-divider-UQ4a: var(--first-content-height);--min-first-content-height: 0px;--min-first-content-height-SCOPED-IN-divider-UQ4a: var(--min-first-content-height);--max-first-content-height: calc(100% - 80px) ;--max-first-content-height-SCOPED-IN-divider-UQ4a: var(--max-first-content-height)}:host{position:relative;display:flex;flex-direction:column;height:100%;width:100%}:host div.first{height:min(max(var(--first-content-height-SCOPED-IN-divider-UQ4a),var(--min-first-content-height-SCOPED-IN-divider-UQ4a)),var(--max-first-content-height-SCOPED-IN-divider-UQ4a));overflow:hidden;display:flex;flex-direction:column}:host mat-divider{z-index:1000;width:100%;cursor:row-resize}:host div.second{display:flex;flex-direction:column;height:calc(100% - min(max(var(--first-content-height-SCOPED-IN-divider-UQ4a),var(--min-first-content-height-SCOPED-IN-divider-UQ4a)),var(--max-first-content-height-SCOPED-IN-divider-UQ4a)));overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DividerFrame, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: DividerFrame, decorators: [{
             type: Component,
             args: [{ selector: 'frames-divider', standalone: true, imports: [
-                        CommonModule,
                         MatDividerModule,
                         CdkDrag,
                     ], template: `
-    <div class="first">
+    <div class="first" #first>
       <ng-content select="[first]"></ng-content>
     </div>
     <mat-divider
@@ -77,11 +83,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
     <div class="second">
       <ng-content select="[second]"></ng-content>
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--first-content-height: 0px;--first-content-height-SCOPED-IN-divider-pvGY: var(--first-content-height)}:host{position:relative;display:flex;flex-direction:column;height:100%;width:100%}:host div.first{height:var(--first-content-height-SCOPED-IN-divider-pvGY);overflow:hidden;display:flex;flex-direction:column}:host mat-divider{z-index:1000;width:100%;cursor:row-resize}:host div.second{display:flex;flex-direction:column;height:calc(100% - var(--first-content-height-SCOPED-IN-divider-pvGY));overflow:hidden}\n"] }]
-        }], propDecorators: { divider: [{
-                type: ViewChild,
-                args: ['el', { read: ElementRef }]
-            }] } });
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--first-content-height: 0px;--first-content-height-SCOPED-IN-divider-UQ4a: var(--first-content-height);--min-first-content-height: 0px;--min-first-content-height-SCOPED-IN-divider-UQ4a: var(--min-first-content-height);--max-first-content-height: calc(100% - 80px) ;--max-first-content-height-SCOPED-IN-divider-UQ4a: var(--max-first-content-height)}:host{position:relative;display:flex;flex-direction:column;height:100%;width:100%}:host div.first{height:min(max(var(--first-content-height-SCOPED-IN-divider-UQ4a),var(--min-first-content-height-SCOPED-IN-divider-UQ4a)),var(--max-first-content-height-SCOPED-IN-divider-UQ4a));overflow:hidden;display:flex;flex-direction:column}:host mat-divider{z-index:1000;width:100%;cursor:row-resize}:host div.second{display:flex;flex-direction:column;height:calc(100% - min(max(var(--first-content-height-SCOPED-IN-divider-UQ4a),var(--min-first-content-height-SCOPED-IN-divider-UQ4a)),var(--max-first-content-height-SCOPED-IN-divider-UQ4a)));overflow:hidden}\n"] }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.