@ng-atomic/components 16.2.0 → 16.3.1

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

@@ -1 +1 @@
-{"version":3,"file":"ng-atomic-components-frames-divider.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/frames/divider/divider.frame.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/divider/ng-atomic-components-frames-divider.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ElementRef, ViewChild, inject } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatDividerModule } from '@angular/material/divider';\nimport { CdkDrag, CdkDragMove, CdkDragStart } from '@angular/cdk/drag-drop';\nimport { NgAtomicComponent } from '@ng-atomic/core';\n\nenum ActionId {\n  DRAG_STARTED = '[@ng-atomic/divider] drag start',\n  DRAG_MOVED = '[@ng-atomic/divider] drag move',\n  DRAG_ENDED = '[@ng-atomic/divider] drag end',\n}\n\n@Component({\n  selector: 'frames-divider',\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatDividerModule,\n    CdkDrag,\n  ],\n  template: `\n    <div class=\"first\">\n      <ng-content select=\"[first]\"></ng-content>\n    </div>\n    <mat-divider\n      cdkDrag\n      cdkDragHandle\n      [cdkDragStartDelay]=\"0\"\n      (cdkDragStarted)=\"onDragStart($event)\"\n      (cdkDragMoved)=\"onDragMoved($event)\"\n      (cdkDragEnded)=\"onDragEnd($event)\"\n      cdkDragLockAxis=\"y\"\n      #el\n    ></mat-divider>\n    <div class=\"second\">\n      <ng-content select=\"[second]\"></ng-content>\n    </div>\n  `,\n  styleUrls: ['./divider.frame.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DividerFrame extends NgAtomicComponent {\n  static ActionId = ActionId;\n\n  private el = inject(ElementRef);\n\n  protected firstContentHeight: number;\n  protected distance: {x: number, y: number} = {x: 0, y: 0};\n\n\n  @ViewChild('el', {read: ElementRef})\n  divider: ElementRef<HTMLElement>;\n\n  protected onDragStart($event: CdkDragStart) {\n    this.dispatch({id: ActionId.DRAG_STARTED, payload: $event}, 'default');\n    const parentRect = this.divider.nativeElement.parentElement.getBoundingClientRect();\n    const elementRect = this.divider.nativeElement.getBoundingClientRect();\n    this.firstContentHeight = elementRect.top - parentRect.top;\n  }\n\n  protected onDragMoved($event: CdkDragMove) {\n    this.dispatch({id: ActionId.DRAG_MOVED, payload: $event}, 'default');\n    this.divider.nativeElement.style.transform = `translate3d(0, 0, 0)`;\n    const height = Math.max(1, this.firstContentHeight + $event.distance.y);\n    this.el.nativeElement.style.setProperty('--first-content-height', `${height}px`);\n  }\n\n  protected onDragEnd($event: CdkDragMove) {\n    this.dispatch({id: ActionId.DRAG_ENDED, payload: $event}, 'default');\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;AAMA,IAAK,QAIJ,CAAA;AAJD,CAAA,UAAK,QAAQ,EAAA;AACX,IAAA,QAAA,CAAA,cAAA,CAAA,GAAA,iCAAgD,CAAA;AAChD,IAAA,QAAA,CAAA,YAAA,CAAA,GAAA,gCAA6C,CAAA;AAC7C,IAAA,QAAA,CAAA,YAAA,CAAA,GAAA,+BAA4C,CAAA;AAC9C,CAAC,EAJI,QAAQ,KAAR,QAAQ,GAIZ,EAAA,CAAA,CAAA,CAAA;AA+BK,MAAO,YAAa,SAAQ,iBAAiB,CAAA;AA7BnD,IAAA,WAAA,GAAA;;AAgCU,QAAA,IAAA,CAAA,EAAE,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;QAGtB,IAAQ,CAAA,QAAA,GAA2B,EAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAC,CAAC;AAuB3D,KAAA;aA5BQ,IAAQ,CAAA,QAAA,GAAG,QAAH,CAAY,EAAA;AAWjB,IAAA,WAAW,CAAC,MAAoB,EAAA;AACxC,QAAA,IAAI,CAAC,QAAQ,CAAC,EAAC,EAAE,EAAE,QAAQ,CAAC,YAAY,EAAE,OAAO,EAAE,MAAM,EAAC,EAAE,SAAS,CAAC,CAAC;AACvE,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,aAAa,CAAC,qBAAqB,EAAE,CAAC;QACpF,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,qBAAqB,EAAE,CAAC;QACvE,IAAI,CAAC,kBAAkB,GAAG,WAAW,CAAC,GAAG,GAAG,UAAU,CAAC,GAAG,CAAC;KAC5D;AAES,IAAA,WAAW,CAAC,MAAmB,EAAA;AACvC,QAAA,IAAI,CAAC,QAAQ,CAAC,EAAC,EAAE,EAAE,QAAQ,CAAC,UAAU,EAAE,OAAO,EAAE,MAAM,EAAC,EAAE,SAAS,CAAC,CAAC;QACrE,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,SAAS,GAAG,CAAA,oBAAA,CAAsB,CAAC;AACpE,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,kBAAkB,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;AACxE,QAAA,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,WAAW,CAAC,wBAAwB,EAAE,CAAA,EAAG,MAAM,CAAA,EAAA,CAAI,CAAC,CAAC;KAClF;AAES,IAAA,SAAS,CAAC,MAAmB,EAAA;AACrC,QAAA,IAAI,CAAC,QAAQ,CAAC,EAAC,EAAE,EAAE,QAAQ,CAAC,UAAU,EAAE,OAAO,EAAE,MAAM,EAAC,EAAE,SAAS,CAAC,CAAC;KACtE;+GA5BU,YAAY,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;mGAAZ,YAAY,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,SAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,IAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,IAAA,EASC,UAAU,EA9BxB,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;AAiBT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,ugBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EArBC,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACZ,gBAAgB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAChB,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,iBAAA,EAAA,oBAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,yBAAA,EAAA,iBAAA,EAAA,0BAAA,EAAA,qBAAA,EAAA,yBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,gBAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,gBAAA,EAAA,cAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;4FAuBE,YAAY,EAAA,UAAA,EAAA,CAAA;kBA7BxB,SAAS;+BACE,gBAAgB,EAAA,UAAA,EACd,IAAI,EACP,OAAA,EAAA;wBACP,YAAY;wBACZ,gBAAgB;wBAChB,OAAO;qBACR,EACS,QAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;GAiBT,EAEgB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,MAAA,EAAA,CAAA,ugBAAA,CAAA,EAAA,CAAA;8BAY/C,OAAO,EAAA,CAAA;sBADN,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,IAAI,EAAE,EAAC,IAAI,EAAE,UAAU,EAAC,CAAA;;;AClDrC;;AAEG;;;;"}
+{"version":3,"file":"ng-atomic-components-frames-divider.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/frames/divider/divider.frame.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/divider/ng-atomic-components-frames-divider.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ElementRef, Signal, inject, viewChild } from '@angular/core';\nimport { MatDividerModule } from '@angular/material/divider';\nimport { CdkDrag, CdkDragMove, CdkDragStart } from '@angular/cdk/drag-drop';\nimport { NgAtomicComponent } from '@ng-atomic/core';\n\nenum ActionId {\n  DRAG_STARTED = '[@ng-atomic/divider] drag start',\n  DRAG_MOVED = '[@ng-atomic/divider] drag move',\n  DRAG_ENDED = '[@ng-atomic/divider] drag end',\n}\n\n@Component({\n  selector: 'frames-divider',\n  standalone: true,\n  imports: [\n    MatDividerModule,\n    CdkDrag,\n  ],\n  template: `\n    <div class=\"first\" #first>\n      <ng-content select=\"[first]\"></ng-content>\n    </div>\n    <mat-divider\n      cdkDrag\n      cdkDragHandle\n      [cdkDragStartDelay]=\"0\"\n      (cdkDragStarted)=\"onDragStart($event)\"\n      (cdkDragMoved)=\"onDragMoved($event)\"\n      (cdkDragEnded)=\"onDragEnd($event)\"\n      cdkDragLockAxis=\"y\"\n      #el\n    ></mat-divider>\n    <div class=\"second\">\n      <ng-content select=\"[second]\"></ng-content>\n    </div>\n  `,\n  styleUrls: ['./divider.frame.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DividerFrame extends NgAtomicComponent {\n  static ActionId = ActionId;\n\n  private el = inject<ElementRef<HTMLElement>>(ElementRef);\n  protected firstContentHeight: number;\n  readonly firstContent: Signal<ElementRef<HTMLDivElement>> = viewChild('first', {read: ElementRef});\n  readonly divider: Signal<ElementRef<HTMLDivElement>> = viewChild.required('el', {read: ElementRef});\n\n  protected onDragStart($event: CdkDragStart) {\n    this.dispatch({id: ActionId.DRAG_STARTED, payload: $event}, 'default');\n    const parentRect = this.divider().nativeElement.parentElement.getBoundingClientRect();\n    const elementRect = this.divider().nativeElement.getBoundingClientRect();\n    this.firstContentHeight = elementRect.top - parentRect.top;\n  }\n\n  protected onDragMoved($event: CdkDragMove) {\n    this.dispatch({id: ActionId.DRAG_MOVED, payload: $event}, 'default');\n    this.divider().nativeElement.style.transform = `translate3d(0, 0, 0)`;\n    const height = Math.max(1, this.firstContentHeight + $event.distance.y);\n    this.setFirstContentHeight(height, 'px');\n  }\n\n  protected onDragEnd($event: CdkDragMove) {\n    this.dispatch({id: ActionId.DRAG_ENDED, payload: $event}, 'default');\n  }\n\n  setFirstContentHeight(height: number, unit: 'px' | '%' = 'px', {\n    animate = false\n  }: {animate?: boolean} = {}) {\n    if (this.firstContent() && animate) {\n      this.firstContent().nativeElement.style.transition = 'height 0.5s';\n      setTimeout(() => this.firstContent().nativeElement.style.transition = 'none', 500);\n    }\n    this.el.nativeElement.style.setProperty('--first-content-height', `${height}${unit}`);\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-drawer.mjs

@@ -1,62 +1,67 @@
-import { CommonModule } from '@angular/common';
+import { __decorate } from 'tslib';
 import * as i0 from '@angular/core';
-import { Component, ViewChild, Input } from '@angular/core';
+import { input, Directive, inject, Component, ChangeDetectionStrategy } from '@angular/core';
 import * as i1 from '@angular/material/sidenav';
-import { MatDrawer, MatSidenavModule } from '@angular/material/sidenav';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { InjectableComponent, TokenizedType, NgAtomicComponent } from '@ng-atomic/core';
 
-class DrawerFrame {
+let DrawerFrameStore = class DrawerFrameStore extends InjectableComponent {
     constructor() {
-        this._isOpen = false;
+        super(...arguments);
+        this.opened = input(false);
+        this.mode = input('side');
+        this.hasBackdrop = input(true);
+        this.position = input('start');
     }
-    set isOpen(_isOpen) {
-        _isOpen ? this.drawer?.open() : this.drawer?.close();
-        this._isOpen = _isOpen;
-    }
-    get isOpen() {
-        return this._isOpen;
-    }
-    ngAfterViewInit() {
-        // setTimeout(() => {
-        //   this.drawer.open();
-        //   this.isOpen ? this.drawer?.open() : this.drawer?.close();
-        //   console.debug('this.drawer:', this.drawer);
-        // },0);
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: DrawerFrameStore, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.2.2", type: DrawerFrameStore, isStandalone: true, selector: "frames-drawer", inputs: { opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+};
+DrawerFrameStore = __decorate([
+    TokenizedType()
+], DrawerFrameStore);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: DrawerFrameStore, decorators: [{
+            type: Directive,
+            args: [{ standalone: true, selector: 'frames-drawer' }]
+        }] });
+class DrawerFrame extends NgAtomicComponent {
+    constructor() {
+        super(...arguments);
+        this.store = inject(DrawerFrameStore);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrawerFrame, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DrawerFrame, isStandalone: true, selector: "frames-drawer", inputs: { isOpen: "isOpen" }, viewQueries: [{ propertyName: "drawer", first: true, predicate: MatDrawer, descendants: true }], ngImport: i0, template: `
-  <mat-drawer-container [autosize]="false">
-    <mat-drawer #drawer mode="side">
-      <ng-content select=[drawer]></ng-content>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: DrawerFrame, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.2", type: DrawerFrame, isStandalone: true, selector: "frames-drawer", usesInheritance: true, hostDirectives: [{ directive: DrawerFrameStore, inputs: ["opened", "opened", "mode", "mode", "hasBackdrop", "hasBackdrop", "position", "position"] }], ngImport: i0, template: `
+  <mat-drawer-container [autosize]="false" [hasBackdrop]="store.hasBackdrop()">
+    <mat-drawer #drawer [opened]="store.opened()" [mode]="store.mode()" [position]="store.position()">
+      <ng-content select=[drawer] />
     </mat-drawer>
     <mat-drawer-content>
-      <ng-content select=[contents]></ng-content>
+      <ng-content select=[contents] />
     </mat-drawer-content>
-  </mat-drawer-container>`, isInline: true, styles: [":host{--content-width: 360px;--content-width-SCOPED-IN-drawer-pHGv: var(--content-width);--height: 100%;--height-SCOPED-IN-drawer-pHGv: var(--height)}:host{display:contents;height:var(--height-SCOPED-IN-drawer-pHGv)}:host mat-drawer-container{width:100%;height:100%}:host mat-drawer-content{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i1.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i1.MatDrawerContent, selector: "mat-drawer-content" }] }); }
+  </mat-drawer-container>`, isInline: true, styles: [":host{--content-width: 360px;--content-width-SCOPED-IN-drawer-xifZ: var(--content-width);--height: 100%;--height-SCOPED-IN-drawer-xifZ: var(--height);--background-color: #f0f0f0;--background-color-SCOPED-IN-drawer-xifZ: var(--background-color);--surface-color: transparent;--surface-color-SCOPED-IN-drawer-xifZ: var(--surface-color)}:host{display:contents;height:var(--height-SCOPED-IN-drawer-xifZ)}:host mat-drawer-container{--mat-sidenav-content-background-color: transparent;width:100%;height:100%}:host mat-drawer-content{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i1.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i1.MatDrawerContent, selector: "mat-drawer-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrawerFrame, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: DrawerFrame, decorators: [{
             type: Component,
             args: [{ selector: 'frames-drawer', standalone: true, imports: [
-                        CommonModule,
                         MatSidenavModule,
                     ], template: `
-  <mat-drawer-container [autosize]="false">
-    <mat-drawer #drawer mode="side">
-      <ng-content select=[drawer]></ng-content>
+  <mat-drawer-container [autosize]="false" [hasBackdrop]="store.hasBackdrop()">
+    <mat-drawer #drawer [opened]="store.opened()" [mode]="store.mode()" [position]="store.position()">
+      <ng-content select=[drawer] />
     </mat-drawer>
     <mat-drawer-content>
-      <ng-content select=[contents]></ng-content>
+      <ng-content select=[contents] />
     </mat-drawer-content>
-  </mat-drawer-container>`, styles: [":host{--content-width: 360px;--content-width-SCOPED-IN-drawer-pHGv: var(--content-width);--height: 100%;--height-SCOPED-IN-drawer-pHGv: var(--height)}:host{display:contents;height:var(--height-SCOPED-IN-drawer-pHGv)}:host mat-drawer-container{width:100%;height:100%}:host mat-drawer-content{width:100%;height:100%}\n"] }]
-        }], propDecorators: { drawer: [{
-                type: ViewChild,
-                args: [MatDrawer]
-            }], isOpen: [{
-                type: Input
-            }] } });
+  </mat-drawer-container>`, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+                        {
+                            directive: DrawerFrameStore,
+                            inputs: ['opened', 'mode', 'hasBackdrop', 'position'],
+                        }
+                    ], styles: [":host{--content-width: 360px;--content-width-SCOPED-IN-drawer-xifZ: var(--content-width);--height: 100%;--height-SCOPED-IN-drawer-xifZ: var(--height);--background-color: #f0f0f0;--background-color-SCOPED-IN-drawer-xifZ: var(--background-color);--surface-color: transparent;--surface-color-SCOPED-IN-drawer-xifZ: var(--surface-color)}:host{display:contents;height:var(--height-SCOPED-IN-drawer-xifZ)}:host mat-drawer-container{--mat-sidenav-content-background-color: transparent;width:100%;height:100%}:host mat-drawer-content{width:100%;height:100%}\n"] }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { DrawerFrame };
+export { DrawerFrame, DrawerFrameStore };
 //# sourceMappingURL=ng-atomic-components-frames-drawer.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ng-atomic-components-frames-drawer.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/frames/drawer/drawer.frame.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/drawer/ng-atomic-components-frames-drawer.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { AfterViewInit, Component, Input, ViewChild } from '@angular/core';\nimport { MatDrawer, MatSidenavModule } from '@angular/material/sidenav';\n\n@Component({\n  selector: 'frames-drawer',\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatSidenavModule,\n  ],\n  template: `\n  <mat-drawer-container [autosize]=\"false\">\n    <mat-drawer #drawer mode=\"side\">\n      <ng-content select=[drawer]></ng-content>\n    </mat-drawer>\n    <mat-drawer-content>\n      <ng-content select=[contents]></ng-content>\n    </mat-drawer-content>\n  </mat-drawer-container>`,\n  styleUrls: ['./drawer.frame.scss'],\n  // changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DrawerFrame implements AfterViewInit {\n\n  @ViewChild(MatDrawer)\n  drawer!: MatDrawer;\n\n  private _isOpen = false;\n\n  @Input()\n  set isOpen(_isOpen: boolean) {\n    _isOpen ? this.drawer?.open() : this.drawer?.close();\n    this._isOpen = _isOpen\n  }\n\n  get isOpen(): boolean {\n    return this._isOpen\n  }\n\n  ngAfterViewInit() {\n    // setTimeout(() => {\n    //   this.drawer.open();\n    //   this.isOpen ? this.drawer?.open() : this.drawer?.close();\n    //   console.debug('this.drawer:', this.drawer);\n\n    // },0);\n  }\n\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;MAuBa,WAAW,CAAA;AAnBxB,IAAA,WAAA,GAAA;QAwBU,IAAO,CAAA,OAAA,GAAG,KAAK,CAAC;AAqBzB,KAAA;IAnBC,IACI,MAAM,CAAC,OAAgB,EAAA;AACzB,QAAA,OAAO,GAAG,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,CAAC;AACrD,QAAA,IAAI,CAAC,OAAO,GAAG,OAAO,CAAA;KACvB;AAED,IAAA,IAAI,MAAM,GAAA;QACR,OAAO,IAAI,CAAC,OAAO,CAAA;KACpB;IAED,eAAe,GAAA;;;;;;KAOd;+GAxBU,WAAW,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;mGAAX,WAAW,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,QAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAEX,SAAS,EAdV,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;;;;;0BAQc,EAXtB,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,8TAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,YAAY,8BACZ,gBAAgB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,MAAA,EAAA,cAAA,EAAA,WAAA,EAAA,QAAA,CAAA,EAAA,OAAA,EAAA,CAAA,cAAA,EAAA,QAAA,EAAA,aAAA,EAAA,QAAA,EAAA,aAAA,EAAA,iBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,sBAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,aAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;4FAcP,WAAW,EAAA,UAAA,EAAA,CAAA;kBAnBvB,SAAS;+BACE,eAAe,EAAA,UAAA,EACb,IAAI,EACP,OAAA,EAAA;wBACP,YAAY;wBACZ,gBAAgB;qBACjB,EACS,QAAA,EAAA,CAAA;;;;;;;;AAQc,yBAAA,CAAA,EAAA,MAAA,EAAA,CAAA,8TAAA,CAAA,EAAA,CAAA;8BAOxB,MAAM,EAAA,CAAA;sBADL,SAAS;uBAAC,SAAS,CAAA;gBAMhB,MAAM,EAAA,CAAA;sBADT,KAAK;;;AC9BR;;AAEG;;;;"}
+{"version":3,"file":"ng-atomic-components-frames-drawer.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/frames/drawer/drawer.frame.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/drawer/ng-atomic-components-frames-drawer.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Directive, effect, inject, input } from '@angular/core';\nimport { MatSidenavModule } from '@angular/material/sidenav';\nimport { InjectableComponent, NgAtomicComponent, TokenizedType } from '@ng-atomic/core';\n\n@TokenizedType()\n@Directive({ standalone: true, selector: 'frames-drawer' })\nexport class DrawerFrameStore extends InjectableComponent {\n  readonly opened = input<boolean>(false);\n  readonly mode = input<'side' | 'over' | 'push'>('side');\n  readonly hasBackdrop = input<boolean>(true);\n  readonly position = input<'start' | 'end'>('start');\n}\n\n@Component({\n  selector: 'frames-drawer',\n  standalone: true,\n  imports: [\n    MatSidenavModule,\n  ],\n  template: `\n  <mat-drawer-container [autosize]=\"false\" [hasBackdrop]=\"store.hasBackdrop()\">\n    <mat-drawer #drawer [opened]=\"store.opened()\" [mode]=\"store.mode()\" [position]=\"store.position()\">\n      <ng-content select=[drawer] />\n    </mat-drawer>\n    <mat-drawer-content>\n      <ng-content select=[contents] />\n    </mat-drawer-content>\n  </mat-drawer-container>`,\n  styleUrls: ['./drawer.frame.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [\n    {\n      directive: DrawerFrameStore,\n      inputs: ['opened', 'mode', 'hasBackdrop', 'position'],\n    }\n  ],\n})\nexport class DrawerFrame extends NgAtomicComponent {\n  readonly store = inject(DrawerFrameStore);\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-entrance.mjs

@@ -0,0 +1,74 @@
+import * as i0 from '@angular/core';
+import { input, Directive, inject, Component, ChangeDetectionStrategy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { OverlayFrame } from '@ng-atomic/components/frames/overlay';
+import { EntranceTemplateStore } from '@ng-atomic/components/templates/entrance';
+import { InjectableComponent, NgAtomicComponent } from '@ng-atomic/core';
+import { FormGroup, FormControl } from '@angular/forms';
+
+class EntranceFrameStore extends InjectableComponent {
+    constructor() {
+        super(...arguments);
+        this.isEntrance = input(true);
+        this.actions = input([]);
+        this.form = input(new FormGroup({
+            email: new FormControl(''),
+            password: new FormControl(''),
+        }));
+        this.title = input('ログイン');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: EntranceFrameStore, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.2.2", type: EntranceFrameStore, isStandalone: true, inputs: { isEntrance: { classPropertyName: "isEntrance", publicName: "isEntrance", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: EntranceFrameStore, decorators: [{
+            type: Directive,
+            args: [{ standalone: true }]
+        }] });
+class EntranceFrame extends NgAtomicComponent {
+    constructor() {
+        super(...arguments);
+        this.store = inject(EntranceFrameStore);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: EntranceFrame, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.2", type: EntranceFrame, isStandalone: true, selector: "frames-entrance", usesInheritance: true, hostDirectives: [{ directive: EntranceFrameStore, inputs: ["isEntrance", "isEntrance", "actions", "actions", "form", "form", "title", "title"] }], ngImport: i0, template: `
+    <frames-overlay [hasNext]="store.isEntrance()" ngSkipHydration>
+      <ng-content main/>
+      <templates-entrance next injectable
+        [actions]="store.actions()"
+        [form]="store.form()"
+        [title]="store.title()"
+        (action)="dispatch($event)"
+      />
+    </frames-overlay>
+  `, isInline: true, styles: [":host{display:block}:host{display:block;width:100%;height:100%}:host templates-entrance{position:relative;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: OverlayFrame, selector: "frames-overlay" }, { kind: "directive", type: EntranceTemplateStore, selector: "templates-entrance", inputs: ["form", "actions", "title"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: EntranceFrame, decorators: [{
+            type: Component,
+            args: [{ selector: 'frames-entrance', standalone: true, imports: [
+                        CommonModule,
+                        OverlayFrame,
+                        EntranceTemplateStore,
+                    ], template: `
+    <frames-overlay [hasNext]="store.isEntrance()" ngSkipHydration>
+      <ng-content main/>
+      <templates-entrance next injectable
+        [actions]="store.actions()"
+        [form]="store.form()"
+        [title]="store.title()"
+        (action)="dispatch($event)"
+      />
+    </frames-overlay>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+                        {
+                            directive: EntranceFrameStore,
+                            inputs: ['isEntrance', 'actions', 'form', 'title'],
+                        },
+                    ], styles: [":host{display:block}:host{display:block;width:100%;height:100%}:host templates-entrance{position:relative;width:100%;height:100%}\n"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { EntranceFrame, EntranceFrameStore };
+//# sourceMappingURL=ng-atomic-components-frames-entrance.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ng-atomic-components-frames-entrance.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/frames/entrance/entrance.frame.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/entrance/ng-atomic-components-frames-entrance.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Directive, inject, input } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { OverlayFrame } from '@ng-atomic/components/frames/overlay';\nimport { EntranceTemplateStore } from '@ng-atomic/components/templates/entrance';\nimport { Action, InjectableComponent, NgAtomicComponent } from '@ng-atomic/core';\nimport { FormControl, FormGroup } from '@angular/forms';\n\n@Directive({standalone: true})\nexport class EntranceFrameStore extends InjectableComponent {\n  readonly isEntrance = input(true);\n  readonly actions = input<Action[]>([]);\n  readonly form = input(new FormGroup({\n    email: new FormControl(''),\n    password: new FormControl(''),\n  }));\n  readonly title = input('ログイン');\n}\n\n@Component({\n  selector: 'frames-entrance',\n  standalone: true,\n  imports: [\n    CommonModule,\n    OverlayFrame,\n    EntranceTemplateStore,\n  ],\n  template: `\n    <frames-overlay [hasNext]=\"store.isEntrance()\" ngSkipHydration>\n      <ng-content main/>\n      <templates-entrance next injectable\n        [actions]=\"store.actions()\"\n        [form]=\"store.form()\"\n        [title]=\"store.title()\"\n        (action)=\"dispatch($event)\"\n      />\n    </frames-overlay>\n  `,\n  styleUrls: ['./entrance.frame.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [\n    {\n      directive: EntranceFrameStore,\n      inputs: ['isEntrance', 'actions', 'form', 'title'],\n    },\n  ],\n})\nexport class EntranceFrame extends NgAtomicComponent {\n  protected store = inject(EntranceFrameStore);\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-fab.mjs

@@ -1,12 +1,11 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, Component, Input } from '@angular/core';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i3 from '@angular/material/button';
+import { Injectable, input, Directive, inject, Component, ChangeDetectionStrategy } from '@angular/core';
+import * as i2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i2 from '@angular/material/icon';
+import * as i1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import { NgAtomicComponent } from '@ng-atomic/core';
+import { _computed, NgAtomicComponent } from '@ng-atomic/core';
+import { makeConfig } from '@ng-atomic/common/services/ui';
 
 class FabService {
     constructor() {
@@ -25,51 +24,74 @@ class FabService {
     pop() {
         return this.contexts.pop();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FabService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FabService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: FabService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: FabService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FabService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: FabService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
 
+class FabFrameStore {
+    constructor() {
+        this.config = FabFrameStore.Config.inject();
+        this.actions = input(_computed(() => this.config().actions));
+        this.hide = input(_computed(() => this.config().hide));
+    }
+    static { this.Config = makeConfig(() => {
+        return () => ({
+            actions: [],
+            hide: false,
+        });
+    }, ['components', 'frames', 'fab']); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: FabFrameStore, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.2.2", type: FabFrameStore, isStandalone: true, selector: "frames-fab", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, hide: { classPropertyName: "hide", publicName: "hide", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: FabFrameStore, decorators: [{
+            type: Directive,
+            args: [{ standalone: true, selector: 'frames-fab' }]
+        }] });
 class FabFrame extends NgAtomicComponent {
     constructor() {
         super(...arguments);
         this.fab = inject(FabService);
-        this.actions = [];
+        this.store = inject(FabFrameStore);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FabFrame, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FabFrame, isStandalone: true, selector: "frames-fab", inputs: { actions: "actions" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: FabFrame, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.2", type: FabFrame, isStandalone: true, selector: "frames-fab", host: { properties: { "attr.hide": "store.hide()" } }, usesInheritance: true, hostDirectives: [{ directive: FabFrameStore, inputs: ["actions", "actions", "hide", "hide"] }], ngImport: i0, template: `
     <ng-content></ng-content>
-    <ng-container *ngFor="let action of fab.actions">
-      <button mat-fab color="primary" (click)="dispatch(action)">
+    @for (action of store.actions(); track action.id) {
+      <button mat-fab [color]="action?.color ?? 'primary'" (click)="dispatch(action)">
         <mat-icon>{{ action?.icon ?? 'add' }}</mat-icon>
       </button>
-    </ng-container>
-  `, isInline: true, styles: [":host{--primary-color: #039be5;--primary-color-SCOPED-IN-fab-IomT: var(--primary-color);--container-color: var(--primary-color-SCOPED-IN-fab-IomT);--container-color-SCOPED-IN-fab-IomT: var(--container-color);--icon-color: #fff;--icon-color-SCOPED-IN-fab-IomT: var(--icon-color);--fab-button-bottom: 16px;--fab-button-bottom-SCOPED-IN-fab-IomT: var(--fab-button-bottom);--fab-button-right: 16px;--fab-button-right-SCOPED-IN-fab-IomT: var(--fab-button-right)}:host{display:block;width:100%;height:100%;position:relative}:host button{position:absolute;z-index:2000;bottom:var(--fab-button-bottom-SCOPED-IN-fab-IomT);right:var(--fab-button-right-SCOPED-IN-fab-IomT);--mdc-fab-container-color: var(--container-color);--mdc-fab-icon-color: var(--icon-color);--mat-mdc-fab-color: var(--icon-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatFabButton, selector: "button[mat-fab]", inputs: ["disabled", "disableRipple", "color", "tabIndex", "extended"], exportAs: ["matButton"] }] }); }
+    }
+  `, isInline: true, styles: [":host{--primary-color: #039be5;--primary-color-SCOPED-IN-fab-lshF: var(--primary-color);--container-color: var(--primary-color-SCOPED-IN-fab-lshF);--container-color-SCOPED-IN-fab-lshF: var(--container-color);--icon-color: #fff;--icon-color-SCOPED-IN-fab-lshF: var(--icon-color);--fab-button-bottom: 16px;--fab-button-bottom-SCOPED-IN-fab-lshF: var(--fab-button-bottom);--fab-button-right: 16px;--fab-button-right-SCOPED-IN-fab-lshF: var(--fab-button-right)}:host{display:block;width:100%;height:100%;position:relative}:host button{position:absolute;z-index:2000;bottom:var(--fab-button-bottom-SCOPED-IN-fab-lshF);right:var(--fab-button-right-SCOPED-IN-fab-lshF);transition:all .3s ease;--mdc-fab-container-color: var(--container-color);--mdc-fab-icon-color: var(--icon-color);--mat-mdc-fab-color: var(--icon-color)}:host[hide=true] button{bottom:-120px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FabFrame, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: FabFrame, decorators: [{
             type: Component,
             args: [{ selector: 'frames-fab', standalone: true, imports: [
-                        CommonModule,
                         MatIconModule,
                         MatButtonModule,
                     ], template: `
     <ng-content></ng-content>
-    <ng-container *ngFor="let action of fab.actions">
-      <button mat-fab color="primary" (click)="dispatch(action)">
+    @for (action of store.actions(); track action.id) {
+      <button mat-fab [color]="action?.color ?? 'primary'" (click)="dispatch(action)">
         <mat-icon>{{ action?.icon ?? 'add' }}</mat-icon>
       </button>
-    </ng-container>
-  `, styles: [":host{--primary-color: #039be5;--primary-color-SCOPED-IN-fab-IomT: var(--primary-color);--container-color: var(--primary-color-SCOPED-IN-fab-IomT);--container-color-SCOPED-IN-fab-IomT: var(--container-color);--icon-color: #fff;--icon-color-SCOPED-IN-fab-IomT: var(--icon-color);--fab-button-bottom: 16px;--fab-button-bottom-SCOPED-IN-fab-IomT: var(--fab-button-bottom);--fab-button-right: 16px;--fab-button-right-SCOPED-IN-fab-IomT: var(--fab-button-right)}:host{display:block;width:100%;height:100%;position:relative}:host button{position:absolute;z-index:2000;bottom:var(--fab-button-bottom-SCOPED-IN-fab-IomT);right:var(--fab-button-right-SCOPED-IN-fab-IomT);--mdc-fab-container-color: var(--container-color);--mdc-fab-icon-color: var(--icon-color);--mat-mdc-fab-color: var(--icon-color)}\n"] }]
-        }], propDecorators: { actions: [{
-                type: Input
-            }] } });
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+                        {
+                            directive: FabFrameStore,
+                            inputs: ['actions', 'hide'],
+                        },
+                    ], host: {
+                        '[attr.hide]': 'store.hide()',
+                    }, styles: [":host{--primary-color: #039be5;--primary-color-SCOPED-IN-fab-lshF: var(--primary-color);--container-color: var(--primary-color-SCOPED-IN-fab-lshF);--container-color-SCOPED-IN-fab-lshF: var(--container-color);--icon-color: #fff;--icon-color-SCOPED-IN-fab-lshF: var(--icon-color);--fab-button-bottom: 16px;--fab-button-bottom-SCOPED-IN-fab-lshF: var(--fab-button-bottom);--fab-button-right: 16px;--fab-button-right-SCOPED-IN-fab-lshF: var(--fab-button-right)}:host{display:block;width:100%;height:100%;position:relative}:host button{position:absolute;z-index:2000;bottom:var(--fab-button-bottom-SCOPED-IN-fab-lshF);right:var(--fab-button-right-SCOPED-IN-fab-lshF);transition:all .3s ease;--mdc-fab-container-color: var(--container-color);--mdc-fab-icon-color: var(--icon-color);--mat-mdc-fab-color: var(--icon-color)}:host[hide=true] button{bottom:-120px}\n"] }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { FabFrame, FabService };
+export { FabFrame, FabFrameStore, FabService };
 //# sourceMappingURL=ng-atomic-components-frames-fab.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ng-atomic-components-frames-fab.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/frames/fab/fab.service.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/fab/fab.frame.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/fab/ng-atomic-components-frames-fab.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { Action } from '@ng-atomic/core';\n\n@Injectable({providedIn: 'root'})\nexport class FabService {\n  private actionMap = new Map<string, Action[]>;\n  private contexts: string[] = [];\n  get actions(): Action[] {\n    return this.actionMap.get(this.contexts.at(-1)) ?? [];\n  }\n\n  set(name, actions: Action[]) {\n    return this.actionMap.set(name, actions);\n  }\n\n  push(name: string) {\n    return this.contexts.push(name);\n  }\n\n  pop() {\n    return this.contexts.pop();\n  }\n}\n","import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnDestroy, OnInit, Output, inject } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { Action } from '@ng-atomic/core';\nimport { FabService } from './fab.service';\nimport { ReplaySubject, takeUntil } from 'rxjs';\nimport { NgAtomicComponent } from '@ng-atomic/core';\n\n@Component({\n  selector: 'frames-fab',\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatIconModule,\n    MatButtonModule,\n  ],\n  template: `\n    <ng-content></ng-content>\n    <ng-container *ngFor=\"let action of fab.actions\">\n      <button mat-fab color=\"primary\" (click)=\"dispatch(action)\">\n        <mat-icon>{{ action?.icon ?? 'add' }}</mat-icon>\n      </button>\n    </ng-container>\n  `,\n  styleUrls: ['./fab.frame.scss'],\n  // changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class FabFrame extends NgAtomicComponent {\n  protected fab = inject(FabService);\n\n  @Input()\n  actions: Action[] = [];\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-frames-fab.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/frames/fab/fab.service.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/fab/fab.frame.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/fab/ng-atomic-components-frames-fab.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { Action } from '@ng-atomic/core';\n\n@Injectable({providedIn: 'root'})\nexport class FabService {\n  private actionMap = new Map<string, Action[]>;\n  private contexts: string[] = [];\n  get actions(): Action[] {\n    return this.actionMap.get(this.contexts.at(-1)) ?? [];\n  }\n\n  set(name, actions: Action[]) {\n    return this.actionMap.set(name, actions);\n  }\n\n  push(name: string) {\n    return this.contexts.push(name);\n  }\n\n  pop() {\n    return this.contexts.pop();\n  }\n}\n","import { ChangeDetectionStrategy, Component, Directive, inject, input } from '@angular/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { Action, _computed } from '@ng-atomic/core';\nimport { FabService } from './fab.service';\nimport { NgAtomicComponent } from '@ng-atomic/core';\nimport { makeConfig } from '@ng-atomic/common/services/ui';\n\n@Directive({ standalone: true, selector: 'frames-fab' })\nexport class FabFrameStore {\n  static readonly Config = makeConfig(() => {\n    return () => ({\n      actions: [] as Action[],\n      hide: false,\n    });\n  }, ['components', 'frames', 'fab']);\n  \n  readonly config = FabFrameStore.Config.inject();\n  readonly actions = input(_computed(() => this.config().actions));\n  readonly hide = input(_computed(() => this.config().hide));\n}\n\n@Component({\n  selector: 'frames-fab',\n  standalone: true,\n  imports: [\n    MatIconModule,\n    MatButtonModule,\n  ],\n  template: `\n    <ng-content></ng-content>\n    @for (action of store.actions(); track action.id) {\n      <button mat-fab [color]=\"action?.color ?? 'primary'\" (click)=\"dispatch(action)\">\n        <mat-icon>{{ action?.icon ?? 'add' }}</mat-icon>\n      </button>\n    }\n  `,\n  styleUrls: ['./fab.frame.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [\n    {\n      directive: FabFrameStore,\n      inputs: ['actions', 'hide'],\n    },\n  ],\n  host: {\n    '[attr.hide]': 'store.hide()',\n  }\n})\nexport class FabFrame extends NgAtomicComponent {\n  protected fab = inject(FabService);\n  protected store = inject(FabFrameStore);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}