npm - @ng-atomic/components - Versions diffs - 19.51.0 → 19.81.0 - Mend

@ng-atomic/components 19.51.0 → 19.81.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (120) hide show

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

@@ -64,7 +64,7 @@ class DividerFrame extends NgAtomicComponent {
       <ng-content select="[second]"></ng-content>
       @if (dragging()) { <div class="cover"></div> }
     </div>
-  `, isInline: true, styles: [":host{--primary-color: #404040;--primary-color-SCOPED-IN-divider-bjUk: var(--primary-color);--secondary-color: #B0B0B0;--secondary-color-SCOPED-IN-divider-bjUk: var(--secondary-color);--background-color: #B0B0B0;--background-color-SCOPED-IN-divider-bjUk: var(--background-color);--on-background-color: #f0f0f0;--on-background-color-SCOPED-IN-divider-bjUk: var(--on-background-color);--surface-color: transparent;--surface-color-SCOPED-IN-divider-bjUk: var(--surface-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-divider-bjUk: var(--on-primary-color);--on-surface-color: #f0f0f0;--on-surface-color-SCOPED-IN-divider-bjUk: var(--on-surface-color);--first-content-height: 0px;--first-content-height-SCOPED-IN-divider-bjUk: var(--first-content-height);--min-first-content-height: 0px;--min-first-content-height-SCOPED-IN-divider-bjUk: var(--min-first-content-height);--max-first-content-height: calc(100% - 80px) ;--max-first-content-height-SCOPED-IN-divider-bjUk: var(--max-first-content-height)}:host{position:relative;display:flex;flex-direction:column;height:100%;width:100%}:host .container{position:relative;transition:height .3s ease}:host .container.first{height:min(max(var(--first-content-height-SCOPED-IN-divider-bjUk),var(--min-first-content-height-SCOPED-IN-divider-bjUk)),var(--max-first-content-height-SCOPED-IN-divider-bjUk));overflow:hidden;display:flex;flex-direction:column}:host .container.second{display:flex;flex-direction:column;height:calc(100% - min(max(var(--first-content-height-SCOPED-IN-divider-bjUk),var(--min-first-content-height-SCOPED-IN-divider-bjUk)),var(--max-first-content-height-SCOPED-IN-divider-bjUk)));overflow:hidden}:host .container .cover{position:absolute;top:0;left:0;width:100%;height:100%}:host mat-divider{z-index:1000;width:100%;cursor:row-resize;position:relative;border:0px}:host mat-divider:before{content:\"\";position:absolute;top:-8px;left:0;width:100%;height:8px;background-color:transparent;transition:.1s background-color}:host mat-divider:hover:before{background-color:var(--primary-color-SCOPED-IN-divider-bjUk)}:host.dragging .container{transition:none}\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", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{--primary-color: #404040;--primary-color-SCOPED-IN-divider-SUvk: var(--primary-color);--secondary-color: #B0B0B0;--secondary-color-SCOPED-IN-divider-SUvk: var(--secondary-color);--background-color: #B0B0B0;--background-color-SCOPED-IN-divider-SUvk: var(--background-color);--on-background-color: #f0f0f0;--on-background-color-SCOPED-IN-divider-SUvk: var(--on-background-color);--surface-color: transparent;--surface-color-SCOPED-IN-divider-SUvk: var(--surface-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-divider-SUvk: var(--on-primary-color);--on-surface-color: #f0f0f0;--on-surface-color-SCOPED-IN-divider-SUvk: var(--on-surface-color);--first-content-height: 0px;--first-content-height-SCOPED-IN-divider-SUvk: var(--first-content-height);--min-first-content-height: 0px;--min-first-content-height-SCOPED-IN-divider-SUvk: var(--min-first-content-height);--max-first-content-height: calc(100% - 80px) ;--max-first-content-height-SCOPED-IN-divider-SUvk: var(--max-first-content-height)}:host{position:relative;display:flex;flex-direction:column;height:100%;width:100%}:host .container{position:relative;transition:height .3s ease}:host .container.first{height:min(max(var(--first-content-height-SCOPED-IN-divider-SUvk),var(--min-first-content-height-SCOPED-IN-divider-SUvk)),var(--max-first-content-height-SCOPED-IN-divider-SUvk));overflow:hidden;display:flex;flex-direction:column}:host .container.second{display:flex;flex-direction:column;height:calc(100% - min(max(var(--first-content-height-SCOPED-IN-divider-SUvk),var(--min-first-content-height-SCOPED-IN-divider-SUvk)),var(--max-first-content-height-SCOPED-IN-divider-SUvk)));overflow:hidden}:host .container .cover{position:absolute;top:0;left:0;width:100%;height:100%}:host mat-divider{z-index:1000;width:100%;cursor:row-resize;position:relative;border:0px}:host mat-divider:before{content:\"\";position:absolute;top:-8px;left:0;width:100%;height:8px;background-color:transparent;transition:.1s background-color}:host mat-divider:hover:before{background-color:var(--primary-color-SCOPED-IN-divider-SUvk)}:host.dragging .container{transition:none}\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", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: DividerFrame, decorators: [{
             type: Component,
@@ -92,7 +92,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
       <ng-content select="[second]"></ng-content>
       @if (dragging()) { <div class="cover"></div> }
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--primary-color: #404040;--primary-color-SCOPED-IN-divider-bjUk: var(--primary-color);--secondary-color: #B0B0B0;--secondary-color-SCOPED-IN-divider-bjUk: var(--secondary-color);--background-color: #B0B0B0;--background-color-SCOPED-IN-divider-bjUk: var(--background-color);--on-background-color: #f0f0f0;--on-background-color-SCOPED-IN-divider-bjUk: var(--on-background-color);--surface-color: transparent;--surface-color-SCOPED-IN-divider-bjUk: var(--surface-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-divider-bjUk: var(--on-primary-color);--on-surface-color: #f0f0f0;--on-surface-color-SCOPED-IN-divider-bjUk: var(--on-surface-color);--first-content-height: 0px;--first-content-height-SCOPED-IN-divider-bjUk: var(--first-content-height);--min-first-content-height: 0px;--min-first-content-height-SCOPED-IN-divider-bjUk: var(--min-first-content-height);--max-first-content-height: calc(100% - 80px) ;--max-first-content-height-SCOPED-IN-divider-bjUk: var(--max-first-content-height)}:host{position:relative;display:flex;flex-direction:column;height:100%;width:100%}:host .container{position:relative;transition:height .3s ease}:host .container.first{height:min(max(var(--first-content-height-SCOPED-IN-divider-bjUk),var(--min-first-content-height-SCOPED-IN-divider-bjUk)),var(--max-first-content-height-SCOPED-IN-divider-bjUk));overflow:hidden;display:flex;flex-direction:column}:host .container.second{display:flex;flex-direction:column;height:calc(100% - min(max(var(--first-content-height-SCOPED-IN-divider-bjUk),var(--min-first-content-height-SCOPED-IN-divider-bjUk)),var(--max-first-content-height-SCOPED-IN-divider-bjUk)));overflow:hidden}:host .container .cover{position:absolute;top:0;left:0;width:100%;height:100%}:host mat-divider{z-index:1000;width:100%;cursor:row-resize;position:relative;border:0px}:host mat-divider:before{content:\"\";position:absolute;top:-8px;left:0;width:100%;height:8px;background-color:transparent;transition:.1s background-color}:host mat-divider:hover:before{background-color:var(--primary-color-SCOPED-IN-divider-bjUk)}:host.dragging .container{transition:none}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--primary-color: #404040;--primary-color-SCOPED-IN-divider-SUvk: var(--primary-color);--secondary-color: #B0B0B0;--secondary-color-SCOPED-IN-divider-SUvk: var(--secondary-color);--background-color: #B0B0B0;--background-color-SCOPED-IN-divider-SUvk: var(--background-color);--on-background-color: #f0f0f0;--on-background-color-SCOPED-IN-divider-SUvk: var(--on-background-color);--surface-color: transparent;--surface-color-SCOPED-IN-divider-SUvk: var(--surface-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-divider-SUvk: var(--on-primary-color);--on-surface-color: #f0f0f0;--on-surface-color-SCOPED-IN-divider-SUvk: var(--on-surface-color);--first-content-height: 0px;--first-content-height-SCOPED-IN-divider-SUvk: var(--first-content-height);--min-first-content-height: 0px;--min-first-content-height-SCOPED-IN-divider-SUvk: var(--min-first-content-height);--max-first-content-height: calc(100% - 80px) ;--max-first-content-height-SCOPED-IN-divider-SUvk: var(--max-first-content-height)}:host{position:relative;display:flex;flex-direction:column;height:100%;width:100%}:host .container{position:relative;transition:height .3s ease}:host .container.first{height:min(max(var(--first-content-height-SCOPED-IN-divider-SUvk),var(--min-first-content-height-SCOPED-IN-divider-SUvk)),var(--max-first-content-height-SCOPED-IN-divider-SUvk));overflow:hidden;display:flex;flex-direction:column}:host .container.second{display:flex;flex-direction:column;height:calc(100% - min(max(var(--first-content-height-SCOPED-IN-divider-SUvk),var(--min-first-content-height-SCOPED-IN-divider-SUvk)),var(--max-first-content-height-SCOPED-IN-divider-SUvk)));overflow:hidden}:host .container .cover{position:absolute;top:0;left:0;width:100%;height:100%}:host mat-divider{z-index:1000;width:100%;cursor:row-resize;position:relative;border:0px}:host mat-divider:before{content:\"\";position:absolute;top:-8px;left:0;width:100%;height:8px;background-color:transparent;transition:.1s background-color}:host mat-divider:hover:before{background-color:var(--primary-color-SCOPED-IN-divider-SUvk)}:host.dragging .container{transition:none}\n"] }]
         }], propDecorators: { firstContent: [{ type: i0.ViewChild, args: ['first', { ...{ read: ElementRef }, isSignal: true }] }], divider: [{ type: i0.ViewChild, args: ['el', { ...{ read: ElementRef }, isSignal: true }] }] } });
 /**

package/fesm2022/ng-atomic-components-frames-drawer.mjs CHANGED Viewed

@@ -37,7 +37,6 @@ class DrawerFrame extends NgAtomicComponent {
         this.isResizing = false;
         this.startX = 0;
         this.startWidth = 0;
-        // widthの変更を監視
         effect(() => {
             this.currentWidth.set(this.store.width());
         });
@@ -48,15 +47,12 @@ class DrawerFrame extends NgAtomicComponent {
         event.preventDefault();
         this.isResizing = true;
         this.startX = event.clientX;
-        // 現在の幅を取得
         const drawer = this.el.nativeElement.querySelector('mat-drawer');
         if (drawer) {
             this.startWidth = drawer.offsetWidth;
         }
-        // ドラッグ中のスタイル
         this.renderer.setStyle(this.document.body, 'cursor', 'col-resize');
         this.renderer.setStyle(this.document.body, 'user-select', 'none');
-        // ドキュメントレベルでイベントリスナーを追加
         const mouseMoveListener = this.renderer.listen('document', 'mousemove', (e) => {
             this.onMouseMove(e);
         });
@@ -75,7 +71,6 @@ class DrawerFrame extends NgAtomicComponent {
     }
     onMouseUp() {
         this.isResizing = false;
-        // スタイルをリセット
         this.renderer.removeStyle(this.document.body, 'cursor');
         this.renderer.removeStyle(this.document.body, 'user-select');
     }
@@ -101,7 +96,7 @@ class DrawerFrame extends NgAtomicComponent {
     <mat-drawer-content>
       <ng-content select=[contents] />
     </mat-drawer-content>
-  </mat-drawer-container>`, isInline: true, styles: [":host{--primary-color: #000000;--primary-color-SCOPED-IN-drawer-kepR: var(--primary-color);--on-primary-color: #ffffff;--on-primary-color-SCOPED-IN-drawer-kepR: var(--on-primary-color);--content-width: 360px;--content-width-SCOPED-IN-drawer-kepR: var(--content-width);--height: 100%;--height-SCOPED-IN-drawer-kepR: var(--height);--background-color: #ffffff;--background-color-SCOPED-IN-drawer-kepR: var(--background-color);--on-background-color: #000000;--on-background-color-SCOPED-IN-drawer-kepR: var(--on-background-color);--surface-color: transparent;--surface-color-SCOPED-IN-drawer-kepR: var(--surface-color)}:host{display:contents;height:var(--height-SCOPED-IN-drawer-kepR)}:host mat-drawer{background-color:var(--background-color-SCOPED-IN-drawer-kepR)}:host mat-drawer.resizing{transition:width 0s}:host mat-drawer ::ng-deep .mat-drawer-inner-container{height:100%}:host mat-drawer-container{--mat-sidenav-content-background-color: transparent;width:100%;height:100%}:host mat-drawer-content{width:100%;height:100%}:host .resize-handle{position:absolute;left:0;top:0;width:8px;height:100%;background:transparent;cursor:col-resize;z-index:1000;transition:background .2s}:host .resize-handle:hover{background:var(--on-background-color-SCOPED-IN-drawer-kepR)}:host .resize-handle:active{background:var(--on-background-color-SCOPED-IN-drawer-kepR)}\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 }); }
+  </mat-drawer-container>`, isInline: true, styles: [":host{--primary-color: #000000;--primary-color-SCOPED-IN-drawer-lepj: var(--primary-color);--on-primary-color: #ffffff;--on-primary-color-SCOPED-IN-drawer-lepj: var(--on-primary-color);--content-width: 360px;--content-width-SCOPED-IN-drawer-lepj: var(--content-width);--height: 100%;--height-SCOPED-IN-drawer-lepj: var(--height);--background-color: #ffffff;--background-color-SCOPED-IN-drawer-lepj: var(--background-color);--on-background-color: #000000;--on-background-color-SCOPED-IN-drawer-lepj: var(--on-background-color);--surface-color: transparent;--surface-color-SCOPED-IN-drawer-lepj: var(--surface-color)}:host{display:contents;height:var(--height-SCOPED-IN-drawer-lepj)}:host mat-drawer{background-color:var(--background-color-SCOPED-IN-drawer-lepj)}:host mat-drawer.resizing{transition:width 0s}:host mat-drawer ::ng-deep .mat-drawer-inner-container{height:100%}:host mat-drawer-container{--mat-sidenav-content-background-color: transparent;width:100%;height:100%}:host mat-drawer-content{width:100%;height:100%}:host .resize-handle{position:absolute;left:0;top:0;width:8px;height:100%;background:transparent;cursor:col-resize;z-index:1000;transition:background .2s}:host .resize-handle:hover{background:var(--on-background-color-SCOPED-IN-drawer-lepj)}:host .resize-handle:active{background:var(--on-background-color-SCOPED-IN-drawer-lepj)}\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: "21.1.6", ngImport: i0, type: DrawerFrame, decorators: [{
             type: Component,
@@ -133,7 +128,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
                             directive: DrawerFrameStore,
                             inputs: ['opened', 'mode', 'hasBackdrop', 'position', 'width', 'resizable'],
                         }
-                    ], styles: [":host{--primary-color: #000000;--primary-color-SCOPED-IN-drawer-kepR: var(--primary-color);--on-primary-color: #ffffff;--on-primary-color-SCOPED-IN-drawer-kepR: var(--on-primary-color);--content-width: 360px;--content-width-SCOPED-IN-drawer-kepR: var(--content-width);--height: 100%;--height-SCOPED-IN-drawer-kepR: var(--height);--background-color: #ffffff;--background-color-SCOPED-IN-drawer-kepR: var(--background-color);--on-background-color: #000000;--on-background-color-SCOPED-IN-drawer-kepR: var(--on-background-color);--surface-color: transparent;--surface-color-SCOPED-IN-drawer-kepR: var(--surface-color)}:host{display:contents;height:var(--height-SCOPED-IN-drawer-kepR)}:host mat-drawer{background-color:var(--background-color-SCOPED-IN-drawer-kepR)}:host mat-drawer.resizing{transition:width 0s}:host mat-drawer ::ng-deep .mat-drawer-inner-container{height:100%}:host mat-drawer-container{--mat-sidenav-content-background-color: transparent;width:100%;height:100%}:host mat-drawer-content{width:100%;height:100%}:host .resize-handle{position:absolute;left:0;top:0;width:8px;height:100%;background:transparent;cursor:col-resize;z-index:1000;transition:background .2s}:host .resize-handle:hover{background:var(--on-background-color-SCOPED-IN-drawer-kepR)}:host .resize-handle:active{background:var(--on-background-color-SCOPED-IN-drawer-kepR)}\n"] }]
+                    ], styles: [":host{--primary-color: #000000;--primary-color-SCOPED-IN-drawer-lepj: var(--primary-color);--on-primary-color: #ffffff;--on-primary-color-SCOPED-IN-drawer-lepj: var(--on-primary-color);--content-width: 360px;--content-width-SCOPED-IN-drawer-lepj: var(--content-width);--height: 100%;--height-SCOPED-IN-drawer-lepj: var(--height);--background-color: #ffffff;--background-color-SCOPED-IN-drawer-lepj: var(--background-color);--on-background-color: #000000;--on-background-color-SCOPED-IN-drawer-lepj: var(--on-background-color);--surface-color: transparent;--surface-color-SCOPED-IN-drawer-lepj: var(--surface-color)}:host{display:contents;height:var(--height-SCOPED-IN-drawer-lepj)}:host mat-drawer{background-color:var(--background-color-SCOPED-IN-drawer-lepj)}:host mat-drawer.resizing{transition:width 0s}:host mat-drawer ::ng-deep .mat-drawer-inner-container{height:100%}:host mat-drawer-container{--mat-sidenav-content-background-color: transparent;width:100%;height:100%}:host mat-drawer-content{width:100%;height:100%}:host .resize-handle{position:absolute;left:0;top:0;width:8px;height:100%;background:transparent;cursor:col-resize;z-index:1000;transition:background .2s}:host .resize-handle:hover{background:var(--on-background-color-SCOPED-IN-drawer-lepj)}:host .resize-handle:active{background:var(--on-background-color-SCOPED-IN-drawer-lepj)}\n"] }]
         }], ctorParameters: () => [] });
 /**

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

	@@ -1 +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 { ChangeDetectionStrategy, Component, Directive, effect, inject, input, signal, ElementRef, Renderer2, HostListener } from '@angular/core';\nimport { MatSidenavModule } from '@angular/material/sidenav';\nimport { InjectableComponent, NgAtomicComponent, TokenizedType } from '@ng-atomic/core';\nimport { DOCUMENT } from '@angular/common';\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 readonly width = input<string>('360px');\n readonly resizable = input<boolean>(false);\n}\n\n@Component({\n selector: 'frames-drawer',\n imports: [\n MatSidenavModule\n],\n template: `\n <mat-drawer-container [autosize]=\"true\" [hasBackdrop]=\"store.hasBackdrop()\">\n <mat-drawer \n #drawer \n [opened]=\"store.opened()\" \n [mode]=\"store.mode()\" \n [position]=\"store.position()\"\n [style.width]=\"currentWidth()\"\n [class.resizing]=\"isResizing\"\n >\n @if (store.resizable() && store.position() === 'end') {\n <div \n class=\"resize-handle\"\n (mousedown)=\"startResize($event)\"\n ></div>\n }\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', 'width', 'resizable'],\n }\n ]\n})\nexport class DrawerFrame extends NgAtomicComponent {\n readonly store = inject(DrawerFrameStore);\n private readonly renderer = inject(Renderer2);\n private readonly document = inject(DOCUMENT);\n private readonly el = inject(ElementRef);\n \n readonly currentWidth = signal<string>('360px');\n protected isResizing = false;\n private startX = 0;\n private startWidth = 0;\n\n constructor() {\n super();\n \n ~~// widthの変更を監視\~~n effect(() => {\n this.currentWidth.set(this.store.width());\n });\n }\n\n startResize(event: MouseEvent) {\n if (!this.store.resizable()) return;\n \n event.preventDefault();\n this.isResizing = true;\n this.startX = event.clientX;\n \n ~~// 現在の幅を取得\~~n const drawer = this.el.nativeElement.querySelector('mat-drawer');\n if (drawer) {\n this.startWidth = drawer.offsetWidth;\n }\n \n ~~// ドラッグ中のスタイル\~~n this.renderer.setStyle(this.document.body, 'cursor', 'col-resize');\n this.renderer.setStyle(this.document.body, 'user-select', 'none');\n \n ~~// ドキュメントレベルでイベントリスナーを追加\~~n const mouseMoveListener = this.renderer.listen('document', 'mousemove', (e: MouseEvent) => {\n this.onMouseMove(e);\n });\n \n const mouseUpListener = this.renderer.listen('document', 'mouseup', () => {\n this.onMouseUp();\n mouseMoveListener();\n mouseUpListener();\n });\n }\n\n private onMouseMove(event: MouseEvent) {\n if (!this.isResizing) return;\n \n const deltaX = this.startX - event.clientX;\n const newWidth = Math.max(200, this.startWidth + deltaX);\n \n this.currentWidth.set(`min(${newWidth}px, calc(100% - 64px))`);\n }\n\n private onMouseUp() {\n this.isResizing = false;\n \n ~~// スタイルをリセット\~~n this.renderer.removeStyle(this.document.body, 'cursor');\n this.renderer.removeStyle(this.document.body, 'user-select');\n }\n}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
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 { ChangeDetectionStrategy, Component, Directive, effect, inject, input, signal, ElementRef, Renderer2, HostListener } from '@angular/core';\nimport { MatSidenavModule } from '@angular/material/sidenav';\nimport { InjectableComponent, NgAtomicComponent, TokenizedType } from '@ng-atomic/core';\nimport { DOCUMENT } from '@angular/common';\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 readonly width = input<string>('360px');\n readonly resizable = input<boolean>(false);\n}\n\n@Component({\n selector: 'frames-drawer',\n imports: [\n MatSidenavModule\n],\n template: `\n <mat-drawer-container [autosize]=\"true\" [hasBackdrop]=\"store.hasBackdrop()\">\n <mat-drawer \n #drawer \n [opened]=\"store.opened()\" \n [mode]=\"store.mode()\" \n [position]=\"store.position()\"\n [style.width]=\"currentWidth()\"\n [class.resizing]=\"isResizing\"\n >\n @if (store.resizable() && store.position() === 'end') {\n <div \n class=\"resize-handle\"\n (mousedown)=\"startResize($event)\"\n ></div>\n }\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', 'width', 'resizable'],\n }\n ]\n})\nexport class DrawerFrame extends NgAtomicComponent {\n readonly store = inject(DrawerFrameStore);\n private readonly renderer = inject(Renderer2);\n private readonly document = inject(DOCUMENT);\n private readonly el = inject(ElementRef);\n \n readonly currentWidth = signal<string>('360px');\n protected isResizing = false;\n private startX = 0;\n private startWidth = 0;\n\n constructor() {\n super();\n \n \n effect(() => {\n this.currentWidth.set(this.store.width());\n });\n }\n\n startResize(event: MouseEvent) {\n if (!this.store.resizable()) return;\n \n event.preventDefault();\n this.isResizing = true;\n this.startX = event.clientX;\n \n \n const drawer = this.el.nativeElement.querySelector('mat-drawer');\n if (drawer) {\n this.startWidth = drawer.offsetWidth;\n }\n \n \n this.renderer.setStyle(this.document.body, 'cursor', 'col-resize');\n this.renderer.setStyle(this.document.body, 'user-select', 'none');\n \n \n const mouseMoveListener = this.renderer.listen('document', 'mousemove', (e: MouseEvent) => {\n this.onMouseMove(e);\n });\n \n const mouseUpListener = this.renderer.listen('document', 'mouseup', () => {\n this.onMouseUp();\n mouseMoveListener();\n mouseUpListener();\n });\n }\n\n private onMouseMove(event: MouseEvent) {\n if (!this.isResizing) return;\n \n const deltaX = this.startX - event.clientX;\n const newWidth = Math.max(200, this.startWidth + deltaX);\n \n this.currentWidth.set(`min(${newWidth}px, calc(100% - 64px))`);\n }\n\n private onMouseUp() {\n this.isResizing = false;\n \n \n this.renderer.removeStyle(this.document.body, 'cursor');\n this.renderer.removeStyle(this.document.body, 'user-select');\n }\n}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;;;;AAOO,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,mBAAmB,CAAA;AAAlD,IAAA,WAAA,GAAA;;AACI,QAAA,IAAA,CAAA,MAAM,GAAG,KAAK,CAAU,KAAK,kDAAC;AAC9B,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAA2B,MAAM,gDAAC;AAC9C,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAU,IAAI,uDAAC;AAClC,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAkB,OAAO,oDAAC;AAC1C,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAS,OAAO,iDAAC;AAC9B,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAU,KAAK,qDAAC;AAC3C,IAAA;8GAPY,gBAAgB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAhB,gBAAgB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,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;;AAAhB,gBAAgB,GAAA,UAAA,CAAA;AAF5B,IAAA,aAAa;AAED,CAAA,EAAA,gBAAgB,CAO5B;2FAPY,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAD5B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,eAAe,EAAE;;AA8CpD,MAAO,WAAY,SAAQ,iBAAiB,CAAA;AAWhD,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,EAAE;AAXA,QAAA,IAAA,CAAA,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC;AACxB,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAC,SAAS,CAAC;AAC5B,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;AAC3B,QAAA,IAAA,CAAA,EAAE,GAAG,MAAM,CAAC,UAAU,CAAC;AAE/B,QAAA,IAAA,CAAA,YAAY,GAAG,MAAM,CAAS,OAAO,wDAAC;QACrC,IAAA,CAAA,UAAU,GAAG,KAAK;QACpB,IAAA,CAAA,MAAM,GAAG,CAAC;QACV,IAAA,CAAA,UAAU,GAAG,CAAC;QAMpB,MAAM,CAAC,MAAK;AACV,YAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;AAC3C,QAAA,CAAC,CAAC;IACJ;AAEA,IAAA,WAAW,CAAC,KAAiB,EAAA;AAC3B,QAAA,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE;YAAE;QAE7B,KAAK,CAAC,cAAc,EAAE;AACtB,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI;AACtB,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,OAAO;AAG3B,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,aAAa,CAAC,YAAY,CAAC;QAChE,IAAI,MAAM,EAAE;AACV,YAAA,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,WAAW;QACtC;AAGA,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,QAAQ,EAAE,YAAY,CAAC;AAClE,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,aAAa,EAAE,MAAM,CAAC;AAGjE,QAAA,MAAM,iBAAiB,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,UAAU,EAAE,WAAW,EAAE,CAAC,CAAa,KAAI;AACxF,YAAA,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;AACrB,QAAA,CAAC,CAAC;AAEF,QAAA,MAAM,eAAe,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,UAAU,EAAE,SAAS,EAAE,MAAK;YACvE,IAAI,CAAC,SAAS,EAAE;AAChB,YAAA,iBAAiB,EAAE;AACnB,YAAA,eAAe,EAAE;AACnB,QAAA,CAAC,CAAC;IACJ;AAEQ,IAAA,WAAW,CAAC,KAAiB,EAAA;QACnC,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE;QAEtB,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,OAAO;AAC1C,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC;QAExD,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA,IAAA,EAAO,QAAQ,CAAA,sBAAA,CAAwB,CAAC;IAChE;IAEQ,SAAS,GAAA;AACf,QAAA,IAAI,CAAC,UAAU,GAAG,KAAK;AAGvB,QAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC;AACvD,QAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAC;IAC9D;8GAhEW,WAAW,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAX,WAAW,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,eAAA,EAAA,IAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EA7CX,gBAAgB,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,MAAA,EAAA,aAAA,EAAA,aAAA,EAAA,UAAA,EAAA,UAAA,EAAA,OAAA,EAAA,OAAA,EAAA,WAAA,EAAA,WAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAcf;;;;;;;;;;;;;;;;;;;;;AAqBY,yBAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,60CAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAvBtB,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,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAiCP,WAAW,EAAA,UAAA,EAAA,CAAA;kBApCvB,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,eAAe,EAAA,OAAA,EAChB;wBACT;qBACH,EAAA,QAAA,EACa;;;;;;;;;;;;;;;;;;;;;0BAqBY,EAAA,eAAA,EAEL,uBAAuB,CAAC,MAAM,EAAA,cAAA,EAC/B;AACZ,wBAAA;AACI,4BAAA,SAAS,EAAE,gBAAgB;AAC3B,4BAAA,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,CAAC;AAC9E;AACJ,qBAAA,EAAA,MAAA,EAAA,CAAA,60CAAA,CAAA,EAAA;;;AClDL;;AAEG;;;;"}

package/fesm2022/ng-atomic-components-frames-entrance.mjs CHANGED Viewed

@@ -43,7 +43,7 @@ class EntranceFrame extends NgAtomicComponent {
         (action)="dispatch($event)"
       />
     </frames-overlay>
-  `, isInline: true, styles: [":host{display:block;--primary-color: inherit;--primary-color-SCOPED-IN-entrance-caf7: var(--primary-color);--on-primary-color: inherit;--on-primary-color-SCOPED-IN-entrance-caf7: var(--on-primary-color);--surface-color: inherit;--surface-color-SCOPED-IN-entrance-caf7: var(--surface-color);--on-surface-color: inherit;--on-surface-color-SCOPED-IN-entrance-caf7: var(--on-surface-color);--background-color: inherit;--background-color-SCOPED-IN-entrance-caf7: var(--background-color);--on-background-color: inherit;--on-background-color-SCOPED-IN-entrance-caf7: var(--on-background-color);--menu-width: inherit;--menu-width-SCOPED-IN-entrance-caf7: var(--menu-width);--menu-background-color: inherit;--menu-background-color-SCOPED-IN-entrance-caf7: var(--menu-background-color);--menu-on-background-color: inherit;--menu-on-background-color-SCOPED-IN-entrance-caf7: var(--menu-on-background-color);--background-primary-color: inherit;--background-primary-color-SCOPED-IN-entrance-caf7: var(--background-primary-color);--background-on-primary-color: inherit;--background-on-primary-color-SCOPED-IN-entrance-caf7: var(--background-on-primary-color);--background-background-color: inherit;--background-background-color-SCOPED-IN-entrance-caf7: var(--background-background-color)}:host{display:block;width:100%;height:100%}:host templates-entrance{position:relative;width:100%;height:100%}:host *{--primary-color: var(--primary-color-SCOPED-IN-entrance-caf7);--on-primary-color: var(--on-primary-color-SCOPED-IN-entrance-caf7);--surface-color: var(--surface-color-SCOPED-IN-entrance-caf7);--on-surface-color: var(--on-surface-color-SCOPED-IN-entrance-caf7);--background-color: var(--background-color-SCOPED-IN-entrance-caf7);--on-background-color: var(--on-background-color-SCOPED-IN-entrance-caf7);--menu-background-color: var(--menu-background-color-SCOPED-IN-entrance-caf7);--menu-on-background-color: var(--menu-on-background-color-SCOPED-IN-entrance-caf7)}\n"], dependencies: [{ kind: "component", type: OverlayFrame, selector: "frames-overlay" }, { kind: "directive", type: EntranceTemplateStore, selector: "templates-entrance", inputs: ["form", "actions", "fieldMap", "title"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block;--primary-color: inherit;--primary-color-SCOPED-IN-entrance-wy0B: var(--primary-color);--on-primary-color: inherit;--on-primary-color-SCOPED-IN-entrance-wy0B: var(--on-primary-color);--surface-color: inherit;--surface-color-SCOPED-IN-entrance-wy0B: var(--surface-color);--on-surface-color: inherit;--on-surface-color-SCOPED-IN-entrance-wy0B: var(--on-surface-color);--background-color: inherit;--background-color-SCOPED-IN-entrance-wy0B: var(--background-color);--on-background-color: inherit;--on-background-color-SCOPED-IN-entrance-wy0B: var(--on-background-color);--menu-width: inherit;--menu-width-SCOPED-IN-entrance-wy0B: var(--menu-width);--menu-background-color: inherit;--menu-background-color-SCOPED-IN-entrance-wy0B: var(--menu-background-color);--menu-on-background-color: inherit;--menu-on-background-color-SCOPED-IN-entrance-wy0B: var(--menu-on-background-color);--background-primary-color: inherit;--background-primary-color-SCOPED-IN-entrance-wy0B: var(--background-primary-color);--background-on-primary-color: inherit;--background-on-primary-color-SCOPED-IN-entrance-wy0B: var(--background-on-primary-color);--background-background-color: inherit;--background-background-color-SCOPED-IN-entrance-wy0B: var(--background-background-color)}:host{display:block;width:100%;height:100%}:host templates-entrance{position:relative;width:100%;height:100%}:host *{--primary-color: var(--primary-color-SCOPED-IN-entrance-wy0B);--on-primary-color: var(--on-primary-color-SCOPED-IN-entrance-wy0B);--surface-color: var(--surface-color-SCOPED-IN-entrance-wy0B);--on-surface-color: var(--on-surface-color-SCOPED-IN-entrance-wy0B);--background-color: var(--background-color-SCOPED-IN-entrance-wy0B);--on-background-color: var(--on-background-color-SCOPED-IN-entrance-wy0B);--menu-background-color: var(--menu-background-color-SCOPED-IN-entrance-wy0B);--menu-on-background-color: var(--menu-on-background-color-SCOPED-IN-entrance-wy0B)}\n"], dependencies: [{ kind: "component", type: OverlayFrame, selector: "frames-overlay" }, { kind: "directive", type: EntranceTemplateStore, selector: "templates-entrance", inputs: ["form", "actions", "fieldMap", "title"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: EntranceFrame, decorators: [{
             type: Component,
@@ -69,7 +69,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
                             directive: EntranceFrameStore,
                             inputs: ['isEntrance', 'actions', 'form', 'title'],
                         },
-                    ], styles: [":host{display:block;--primary-color: inherit;--primary-color-SCOPED-IN-entrance-caf7: var(--primary-color);--on-primary-color: inherit;--on-primary-color-SCOPED-IN-entrance-caf7: var(--on-primary-color);--surface-color: inherit;--surface-color-SCOPED-IN-entrance-caf7: var(--surface-color);--on-surface-color: inherit;--on-surface-color-SCOPED-IN-entrance-caf7: var(--on-surface-color);--background-color: inherit;--background-color-SCOPED-IN-entrance-caf7: var(--background-color);--on-background-color: inherit;--on-background-color-SCOPED-IN-entrance-caf7: var(--on-background-color);--menu-width: inherit;--menu-width-SCOPED-IN-entrance-caf7: var(--menu-width);--menu-background-color: inherit;--menu-background-color-SCOPED-IN-entrance-caf7: var(--menu-background-color);--menu-on-background-color: inherit;--menu-on-background-color-SCOPED-IN-entrance-caf7: var(--menu-on-background-color);--background-primary-color: inherit;--background-primary-color-SCOPED-IN-entrance-caf7: var(--background-primary-color);--background-on-primary-color: inherit;--background-on-primary-color-SCOPED-IN-entrance-caf7: var(--background-on-primary-color);--background-background-color: inherit;--background-background-color-SCOPED-IN-entrance-caf7: var(--background-background-color)}:host{display:block;width:100%;height:100%}:host templates-entrance{position:relative;width:100%;height:100%}:host *{--primary-color: var(--primary-color-SCOPED-IN-entrance-caf7);--on-primary-color: var(--on-primary-color-SCOPED-IN-entrance-caf7);--surface-color: var(--surface-color-SCOPED-IN-entrance-caf7);--on-surface-color: var(--on-surface-color-SCOPED-IN-entrance-caf7);--background-color: var(--background-color-SCOPED-IN-entrance-caf7);--on-background-color: var(--on-background-color-SCOPED-IN-entrance-caf7);--menu-background-color: var(--menu-background-color-SCOPED-IN-entrance-caf7);--menu-on-background-color: var(--menu-on-background-color-SCOPED-IN-entrance-caf7)}\n"] }]
+                    ], styles: [":host{display:block;--primary-color: inherit;--primary-color-SCOPED-IN-entrance-wy0B: var(--primary-color);--on-primary-color: inherit;--on-primary-color-SCOPED-IN-entrance-wy0B: var(--on-primary-color);--surface-color: inherit;--surface-color-SCOPED-IN-entrance-wy0B: var(--surface-color);--on-surface-color: inherit;--on-surface-color-SCOPED-IN-entrance-wy0B: var(--on-surface-color);--background-color: inherit;--background-color-SCOPED-IN-entrance-wy0B: var(--background-color);--on-background-color: inherit;--on-background-color-SCOPED-IN-entrance-wy0B: var(--on-background-color);--menu-width: inherit;--menu-width-SCOPED-IN-entrance-wy0B: var(--menu-width);--menu-background-color: inherit;--menu-background-color-SCOPED-IN-entrance-wy0B: var(--menu-background-color);--menu-on-background-color: inherit;--menu-on-background-color-SCOPED-IN-entrance-wy0B: var(--menu-on-background-color);--background-primary-color: inherit;--background-primary-color-SCOPED-IN-entrance-wy0B: var(--background-primary-color);--background-on-primary-color: inherit;--background-on-primary-color-SCOPED-IN-entrance-wy0B: var(--background-on-primary-color);--background-background-color: inherit;--background-background-color-SCOPED-IN-entrance-wy0B: var(--background-background-color)}:host{display:block;width:100%;height:100%}:host templates-entrance{position:relative;width:100%;height:100%}:host *{--primary-color: var(--primary-color-SCOPED-IN-entrance-wy0B);--on-primary-color: var(--on-primary-color-SCOPED-IN-entrance-wy0B);--surface-color: var(--surface-color-SCOPED-IN-entrance-wy0B);--on-surface-color: var(--on-surface-color-SCOPED-IN-entrance-wy0B);--background-color: var(--background-color-SCOPED-IN-entrance-wy0B);--on-background-color: var(--on-background-color-SCOPED-IN-entrance-wy0B);--menu-background-color: var(--menu-background-color-SCOPED-IN-entrance-wy0B);--menu-on-background-color: var(--menu-on-background-color-SCOPED-IN-entrance-wy0B)}\n"] }]
         }] });
 /**

package/fesm2022/ng-atomic-components-frames-fab.mjs CHANGED Viewed

@@ -81,7 +81,7 @@ class FabFrame extends NgAtomicComponent {
         }
       }
     }
-  `, isInline: true, styles: [":host{--primary-color: #039be5;--primary-color-SCOPED-IN-fab-qrWS: var(--primary-color);--container-color: var(--primary-color-SCOPED-IN-fab-qrWS);--container-color-SCOPED-IN-fab-qrWS: var(--container-color);--icon-color: #fff;--icon-color-SCOPED-IN-fab-qrWS: var(--icon-color);--fab-button-bottom: 16px;--fab-button-bottom-SCOPED-IN-fab-qrWS: var(--fab-button-bottom);--fab-button-right: 16px;--fab-button-right-SCOPED-IN-fab-qrWS: 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-qrWS);right:var(--fab-button-right-SCOPED-IN-fab-qrWS);transition:all .3s ease;--mat-fab-container-color: var(--container-color);--mat-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.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{--primary-color: #039be5;--primary-color-SCOPED-IN-fab-1uEN: var(--primary-color);--container-color: var(--primary-color-SCOPED-IN-fab-1uEN);--container-color-SCOPED-IN-fab-1uEN: var(--container-color);--icon-color: #fff;--icon-color-SCOPED-IN-fab-1uEN: var(--icon-color);--fab-button-bottom: 16px;--fab-button-bottom-SCOPED-IN-fab-1uEN: var(--fab-button-bottom);--fab-button-right: 16px;--fab-button-right-SCOPED-IN-fab-1uEN: 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-1uEN);right:var(--fab-button-right-SCOPED-IN-fab-1uEN);transition:all .3s ease;--mat-fab-container-color: var(--container-color);--mat-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.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: FabFrame, decorators: [{
             type: Component,
@@ -121,7 +121,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
                         },
                     ], host: {
                         '[attr.hide]': 'store.hide()',
-                    }, styles: [":host{--primary-color: #039be5;--primary-color-SCOPED-IN-fab-qrWS: var(--primary-color);--container-color: var(--primary-color-SCOPED-IN-fab-qrWS);--container-color-SCOPED-IN-fab-qrWS: var(--container-color);--icon-color: #fff;--icon-color-SCOPED-IN-fab-qrWS: var(--icon-color);--fab-button-bottom: 16px;--fab-button-bottom-SCOPED-IN-fab-qrWS: var(--fab-button-bottom);--fab-button-right: 16px;--fab-button-right-SCOPED-IN-fab-qrWS: 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-qrWS);right:var(--fab-button-right-SCOPED-IN-fab-qrWS);transition:all .3s ease;--mat-fab-container-color: var(--container-color);--mat-fab-icon-color: var(--icon-color);--mat-mdc-fab-color: var(--icon-color)}:host[hide=true] button{bottom:-120px}\n"] }]
+                    }, styles: [":host{--primary-color: #039be5;--primary-color-SCOPED-IN-fab-1uEN: var(--primary-color);--container-color: var(--primary-color-SCOPED-IN-fab-1uEN);--container-color-SCOPED-IN-fab-1uEN: var(--container-color);--icon-color: #fff;--icon-color-SCOPED-IN-fab-1uEN: var(--icon-color);--fab-button-bottom: 16px;--fab-button-bottom-SCOPED-IN-fab-1uEN: var(--fab-button-bottom);--fab-button-right: 16px;--fab-button-right-SCOPED-IN-fab-1uEN: 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-1uEN);right:var(--fab-button-right-SCOPED-IN-fab-1uEN);transition:all .3s ease;--mat-fab-container-color: var(--container-color);--mat-fab-icon-color: var(--icon-color);--mat-mdc-fab-color: var(--icon-color)}:host[hide=true] button{bottom:-120px}\n"] }]
         }] });
 /**

package/fesm2022/ng-atomic-components-frames-horizontal-divider.mjs CHANGED Viewed

@@ -64,7 +64,7 @@ class HorizontalDividerFrame extends NgAtomicComponent {
       <ng-content select="[second]"></ng-content>
       @if (dragging()) { <div class="cover"></div> }
     </div>
-  `, isInline: true, styles: [":host{--primary-color: #404040;--primary-color-SCOPED-IN-divider-rFKB: var(--primary-color);--secondary-color: #B0B0B0;--secondary-color-SCOPED-IN-divider-rFKB: var(--secondary-color);--background-color: #B0B0B0;--background-color-SCOPED-IN-divider-rFKB: var(--background-color);--on-background-color: #f0f0f0;--on-background-color-SCOPED-IN-divider-rFKB: var(--on-background-color);--surface-color: transparent;--surface-color-SCOPED-IN-divider-rFKB: var(--surface-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-divider-rFKB: var(--on-primary-color);--on-surface-color: #f0f0f0;--on-surface-color-SCOPED-IN-divider-rFKB: var(--on-surface-color);--first-content-width: calc(100% - 360px) ;--first-content-width-SCOPED-IN-divider-rFKB: var(--first-content-width);--min-first-content-width: 200px;--min-first-content-width-SCOPED-IN-divider-rFKB: var(--min-first-content-width);--max-first-content-width: 100%;--max-first-content-width-SCOPED-IN-divider-rFKB: var(--max-first-content-width)}:host{display:flex;flex-direction:row;position:relative;width:100%;height:100%}:host .container{position:relative}:host .container.first{flex:0 0 clamp(var(--min-first-content-width-SCOPED-IN-divider-rFKB),var(--first-content-width-SCOPED-IN-divider-rFKB),var(--max-first-content-width-SCOPED-IN-divider-rFKB));overflow:hidden}:host .container.second{flex:1;overflow:hidden}:host .cover{position:absolute;inset:0;z-index:1}:host mat-divider{flex:none;align-self:stretch;z-index:1000;height:100%;width:1px;cursor:col-resize;position:relative;border:none;background-color:var(--primary-color-SCOPED-IN-divider-rFKB);transition:background-color .1s}:host mat-divider:before{content:\"\";position:absolute;top:0;left:-8px;width:8px;height:100%;background-color:transparent;transition:background-color .1s}:host mat-divider:hover{background-color:var(--primary-color-SCOPED-IN-divider-rFKB)}:host mat-divider:hover:before{background-color:var(--primary-color-SCOPED-IN-divider-rFKB)}\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", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{--primary-color: #404040;--primary-color-SCOPED-IN-divider-NDAl: var(--primary-color);--secondary-color: #B0B0B0;--secondary-color-SCOPED-IN-divider-NDAl: var(--secondary-color);--background-color: #B0B0B0;--background-color-SCOPED-IN-divider-NDAl: var(--background-color);--on-background-color: #f0f0f0;--on-background-color-SCOPED-IN-divider-NDAl: var(--on-background-color);--surface-color: transparent;--surface-color-SCOPED-IN-divider-NDAl: var(--surface-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-divider-NDAl: var(--on-primary-color);--on-surface-color: #f0f0f0;--on-surface-color-SCOPED-IN-divider-NDAl: var(--on-surface-color);--first-content-width: calc(100% - 360px) ;--first-content-width-SCOPED-IN-divider-NDAl: var(--first-content-width);--min-first-content-width: 200px;--min-first-content-width-SCOPED-IN-divider-NDAl: var(--min-first-content-width);--max-first-content-width: 100%;--max-first-content-width-SCOPED-IN-divider-NDAl: var(--max-first-content-width)}:host{display:flex;flex-direction:row;position:relative;width:100%;height:100%}:host .container{position:relative}:host .container.first{flex:0 0 clamp(var(--min-first-content-width-SCOPED-IN-divider-NDAl),var(--first-content-width-SCOPED-IN-divider-NDAl),var(--max-first-content-width-SCOPED-IN-divider-NDAl));overflow:hidden}:host .container.second{flex:1;overflow:hidden}:host .cover{position:absolute;inset:0;z-index:1}:host mat-divider{flex:none;align-self:stretch;z-index:1000;height:100%;width:1px;cursor:col-resize;position:relative;border:none;background-color:var(--primary-color-SCOPED-IN-divider-NDAl);transition:background-color .1s}:host mat-divider:before{content:\"\";position:absolute;top:0;left:-8px;width:8px;height:100%;background-color:transparent;transition:background-color .1s}:host mat-divider:hover{background-color:var(--primary-color-SCOPED-IN-divider-NDAl)}:host mat-divider:hover:before{background-color:var(--primary-color-SCOPED-IN-divider-NDAl)}\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", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: HorizontalDividerFrame, decorators: [{
             type: Component,
@@ -90,7 +90,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
       <ng-content select="[second]"></ng-content>
       @if (dragging()) { <div class="cover"></div> }
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--primary-color: #404040;--primary-color-SCOPED-IN-divider-rFKB: var(--primary-color);--secondary-color: #B0B0B0;--secondary-color-SCOPED-IN-divider-rFKB: var(--secondary-color);--background-color: #B0B0B0;--background-color-SCOPED-IN-divider-rFKB: var(--background-color);--on-background-color: #f0f0f0;--on-background-color-SCOPED-IN-divider-rFKB: var(--on-background-color);--surface-color: transparent;--surface-color-SCOPED-IN-divider-rFKB: var(--surface-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-divider-rFKB: var(--on-primary-color);--on-surface-color: #f0f0f0;--on-surface-color-SCOPED-IN-divider-rFKB: var(--on-surface-color);--first-content-width: calc(100% - 360px) ;--first-content-width-SCOPED-IN-divider-rFKB: var(--first-content-width);--min-first-content-width: 200px;--min-first-content-width-SCOPED-IN-divider-rFKB: var(--min-first-content-width);--max-first-content-width: 100%;--max-first-content-width-SCOPED-IN-divider-rFKB: var(--max-first-content-width)}:host{display:flex;flex-direction:row;position:relative;width:100%;height:100%}:host .container{position:relative}:host .container.first{flex:0 0 clamp(var(--min-first-content-width-SCOPED-IN-divider-rFKB),var(--first-content-width-SCOPED-IN-divider-rFKB),var(--max-first-content-width-SCOPED-IN-divider-rFKB));overflow:hidden}:host .container.second{flex:1;overflow:hidden}:host .cover{position:absolute;inset:0;z-index:1}:host mat-divider{flex:none;align-self:stretch;z-index:1000;height:100%;width:1px;cursor:col-resize;position:relative;border:none;background-color:var(--primary-color-SCOPED-IN-divider-rFKB);transition:background-color .1s}:host mat-divider:before{content:\"\";position:absolute;top:0;left:-8px;width:8px;height:100%;background-color:transparent;transition:background-color .1s}:host mat-divider:hover{background-color:var(--primary-color-SCOPED-IN-divider-rFKB)}:host mat-divider:hover:before{background-color:var(--primary-color-SCOPED-IN-divider-rFKB)}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--primary-color: #404040;--primary-color-SCOPED-IN-divider-NDAl: var(--primary-color);--secondary-color: #B0B0B0;--secondary-color-SCOPED-IN-divider-NDAl: var(--secondary-color);--background-color: #B0B0B0;--background-color-SCOPED-IN-divider-NDAl: var(--background-color);--on-background-color: #f0f0f0;--on-background-color-SCOPED-IN-divider-NDAl: var(--on-background-color);--surface-color: transparent;--surface-color-SCOPED-IN-divider-NDAl: var(--surface-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-divider-NDAl: var(--on-primary-color);--on-surface-color: #f0f0f0;--on-surface-color-SCOPED-IN-divider-NDAl: var(--on-surface-color);--first-content-width: calc(100% - 360px) ;--first-content-width-SCOPED-IN-divider-NDAl: var(--first-content-width);--min-first-content-width: 200px;--min-first-content-width-SCOPED-IN-divider-NDAl: var(--min-first-content-width);--max-first-content-width: 100%;--max-first-content-width-SCOPED-IN-divider-NDAl: var(--max-first-content-width)}:host{display:flex;flex-direction:row;position:relative;width:100%;height:100%}:host .container{position:relative}:host .container.first{flex:0 0 clamp(var(--min-first-content-width-SCOPED-IN-divider-NDAl),var(--first-content-width-SCOPED-IN-divider-NDAl),var(--max-first-content-width-SCOPED-IN-divider-NDAl));overflow:hidden}:host .container.second{flex:1;overflow:hidden}:host .cover{position:absolute;inset:0;z-index:1}:host mat-divider{flex:none;align-self:stretch;z-index:1000;height:100%;width:1px;cursor:col-resize;position:relative;border:none;background-color:var(--primary-color-SCOPED-IN-divider-NDAl);transition:background-color .1s}:host mat-divider:before{content:\"\";position:absolute;top:0;left:-8px;width:8px;height:100%;background-color:transparent;transition:background-color .1s}:host mat-divider:hover{background-color:var(--primary-color-SCOPED-IN-divider-NDAl)}:host mat-divider:hover:before{background-color:var(--primary-color-SCOPED-IN-divider-NDAl)}\n"] }]
         }], propDecorators: { firstContent: [{ type: i0.ViewChild, args: ['first', { ...{ read: ElementRef }, isSignal: true }] }], divider: [{ type: i0.ViewChild, args: ['el', { ...{ read: ElementRef }, isSignal: true }] }] } });
 /**

package/fesm2022/ng-atomic-components-frames-line-up.mjs CHANGED Viewed

@@ -1,11 +1,8 @@
 import * as i0 from '@angular/core';
-import { signal, Injectable, input, Directive, inject, ElementRef, PLATFORM_ID, viewChild, ChangeDetectionStrategy, Component } from '@angular/core';
+import { Injectable, input, Directive, inject, ElementRef, PLATFORM_ID, viewChild, ChangeDetectionStrategy, Component } from '@angular/core';
 import { isPlatformBrowser } from '@angular/common';
-import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { map, startWith, distinctUntilChanged as distinctUntilChanged$1, switchMap, filter } from 'rxjs/operators';
-import { trigger, transition, query, style, animate } from '@angular/animations';
-import { distinctUntilChanged, NEVER, Observable, of, fromEvent, combineLatest } from 'rxjs';
 import ResizeObserver from 'resize-observer-polyfill';
+import { trigger, transition, query, style, animate } from '@angular/animations';
 const LINE_UP_ANIMATIONS = [
     trigger('hasNext', [
@@ -22,46 +19,53 @@ const LINE_UP_ANIMATIONS = [
 class LineUpFrameService {
     constructor() {
-        this.sizeMap = signal({}, ...(ngDevMode ? [{ debugName: "sizeMap" }] : []));
-        this.sizeMap$ = toObservable(this.sizeMap).pipe(distinctUntilChanged(), takeUntilDestroyed());
+        this.state = new Map();
     }
     register(frame, scope) {
-        this.sizeMap.update(record => {
-            record[scope] ??= { frames: [], sizeMap: {} };
-            record[scope].frames.push(frame);
-            return { ...record };
-        });
+        const s = this.scopeState(scope);
+        if (!s.frames.includes(frame))
+            s.frames.push(frame);
     }
     update(frame, mainWidth, scope) {
-        const index = this.findIndex(frame, scope);
-        this.sizeMap.update(record => {
-            record[scope] ??= { frames: [], sizeMap: {} };
-            record[scope].sizeMap[index] = mainWidth;
-            return { ...record };
-        });
+        const s = this.scopeState(scope);
+        if (s.widths.get(frame) === mainWidth)
+            return;
+        s.widths.set(frame, mainWidth);
+        this.recompute(scope);
     }
     unregister(frame, scope) {
-        const index = this.findIndex(frame, scope);
-        this.sizeMap.update(record => {
-            record[scope].frames = [...record[scope].frames.filter((value) => value !== frame)];
-            delete record[scope].sizeMap[index];
-            return { ...record };
-        });
-    }
-    findIndex(frame, scope) {
-        return this.sizeMap()[scope].frames.findIndex((value) => value === frame);
+        const s = this.scopeState(scope);
+        s.frames = s.frames.filter((f) => f !== frame);
+        s.widths.delete(frame);
+        this.recompute(scope);
     }
     isFirst(frame, scope) {
-        const index = this.findIndex(frame, scope);
-        return Math.min(...Object.keys(this.getSizeMap(scope)).map(key => parseInt(key, 10))) === index;
-    }
-    getSizeMap(scope) {
-        return this.sizeMap()[scope].sizeMap ?? {};
+        return this.firstMeasured(scope) === frame;
     }
     getFollowingWidth(scope, frame) {
-        return Object.entries(this.getSizeMap(scope))
-            .filter(([key]) => parseInt(key, 10) >= this.findIndex(frame, scope))
-            .reduce((acc, [_, width]) => width + acc, 0);
+        const s = this.scopeState(scope);
+        const index = s.frames.indexOf(frame);
+        if (index < 0)
+            return 0;
+        return s.frames
+            .slice(index)
+            .reduce((acc, f) => acc + (s.widths.get(f) ?? 0), 0);
+    }
+    recompute(scope) {
+        const first = this.firstMeasured(scope);
+        if (!first)
+            return;
+        const delta = Math.min(first.hostWidth() - this.getFollowingWidth(scope, first), 0);
+        first.applyTranslateX(delta);
+    }
+    firstMeasured(scope) {
+        const s = this.scopeState(scope);
+        return s.frames.find((f) => s.widths.has(f));
+    }
+    scopeState(scope) {
+        if (!this.state.has(scope))
+            this.state.set(scope, { frames: [], widths: new Map() });
+        return this.state.get(scope);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: LineUpFrameService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: LineUpFrameService, providedIn: 'root' }); }
@@ -71,18 +75,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
-function fromResize(el) {
-    if (!el)
-        return NEVER;
-    return new Observable((observer) => {
-        const resizeObserver = new ResizeObserver(entries => {
-            entries.forEach((entry) => observer.next(entry));
-        });
-        resizeObserver.observe(el.nativeElement);
-        return () => resizeObserver.disconnect();
-    }).pipe(map((el) => el.contentRect?.width ?? 0), startWith(0), distinctUntilChanged$1());
-}
 class LineUpFrameStore {
     constructor() {
         this.scope = input('default', ...(ngDevMode ? [{ debugName: "scope" }] : []));
@@ -101,40 +93,36 @@ class LineUpFrame {
         this.service = inject(LineUpFrameService);
         this.el = inject(ElementRef);
         this.platformId = inject(PLATFORM_ID);
-        this.resizeWindow$ = of(null).pipe(switchMap(() => {
-            return isPlatformBrowser(this.platformId)
-                ? fromEvent(window, 'resize').pipe(startWith(null))
-                : of(null);
-        }));
-        this.elWidth$ = this.resizeWindow$.pipe(switchMap(() => fromResize(this.el).pipe(startWith(null))), map(() => this.el.nativeElement?.clientWidth ?? 0), takeUntilDestroyed());
         this.main = viewChild('main', { ...(ngDevMode ? { debugName: "main" } : {}), read: ElementRef });
-        this.main$ = toObservable(this.main);
-        this.mainWidth$ = combineLatest({
-            main: this.main$,
-            resize: this.resizeWindow$
-        }).pipe(switchMap(({ main }) => fromResize(main).pipe(startWith(null))), map(() => this.main()), map((main) => main?.nativeElement?.clientWidth ?? 0), takeUntilDestroyed());
-        this.allWidth$ = combineLatest({
-            map: this.service.sizeMap$,
-            window: this.resizeWindow$
-        }).pipe(map(() => this.service.getFollowingWidth(this.store.scope(), this)), takeUntilDestroyed());
-        this.delta$ = combineLatest({
-            el: this.elWidth$,
-            all: this.allWidth$,
-        }).pipe(filter(() => this.service.isFirst(this, this.store.scope())), map(({ el, all }) => Math.min(el - all, 0)), distinctUntilChanged$1(), takeUntilDestroyed());
+        this.observers = [];
     }
     ngOnInit() {
         this.service.register(this, this.store.scope());
     }
     ngAfterViewInit() {
-        if (isPlatformBrowser(this.platformId)) {
-            this.mainWidth$.subscribe((width) => this.service.update(this, width, this.store.scope()));
-            this.delta$.subscribe((delta) => this.setTranslateX(delta));
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        const scope = this.store.scope();
+        const mainEl = this.main()?.nativeElement;
+        if (mainEl) {
+            const mainObserver = new ResizeObserver(() => this.service.update(this, mainEl.clientWidth, scope));
+            mainObserver.observe(mainEl);
+            this.observers.push(mainObserver);
+            this.service.update(this, mainEl.clientWidth, scope);
         }
+        const hostObserver = new ResizeObserver(() => this.service.recompute(scope));
+        hostObserver.observe(this.el.nativeElement);
+        this.observers.push(hostObserver);
     }
     ngOnDestroy() {
+        this.observers.forEach((observer) => observer.disconnect());
+        this.observers = [];
         this.service.unregister(this, this.store.scope());
     }
-    setTranslateX(value) {
+    hostWidth() {
+        return this.el.nativeElement?.clientWidth ?? 0;
+    }
+    applyTranslateX(value) {
         this.el.nativeElement.style.setProperty('--translate-x', `${value}px`);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: LineUpFrame, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -143,7 +131,7 @@ class LineUpFrame {
     @if (store.hasNext()) {
       <div class="next" @hasNext><ng-content select=[next] /></div>
     }
-  `, isInline: true, styles: [":host{--gap: 0px;--gap-SCOPED-IN-line-up-z8Nh: var(--gap);--background-color: #ccc;--background-color-SCOPED-IN-line-up-z8Nh: var(--background-color);--next-width: 100%;--next-width-SCOPED-IN-line-up-z8Nh: var(--next-width);--next-max-width: fit-content;--next-max-width-SCOPED-IN-line-up-z8Nh: var(--next-max-width);--translate-x: 0px;--translate-x-SCOPED-IN-line-up-z8Nh: var(--translate-x)}:host{position:relative;transform:translate(var(--translate-x-SCOPED-IN-line-up-z8Nh));transition:transform .3s ease-in-out;display:flex;justify-content:flex-start;gap:var(--gap-SCOPED-IN-line-up-z8Nh);width:100%;height:100%}:host .main{max-width:100%;height:100%;z-index:2}:host .next{width:100%;height:100%;z-index:1}\n"], animations: LINE_UP_ANIMATIONS, changeDetection: i0.ChangeDetectionStrategy.Default }); }
+  `, isInline: true, styles: [":host{--gap: 0px;--gap-SCOPED-IN-line-up-jbwV: var(--gap);--background-color: #ccc;--background-color-SCOPED-IN-line-up-jbwV: var(--background-color);--next-width: 100%;--next-width-SCOPED-IN-line-up-jbwV: var(--next-width);--next-max-width: fit-content;--next-max-width-SCOPED-IN-line-up-jbwV: var(--next-max-width);--translate-x: 0px;--translate-x-SCOPED-IN-line-up-jbwV: var(--translate-x)}:host{position:relative;transform:translate(var(--translate-x-SCOPED-IN-line-up-jbwV));transition:transform .3s ease-in-out;display:flex;justify-content:flex-start;gap:var(--gap-SCOPED-IN-line-up-jbwV);width:100%;height:100%}:host .main{max-width:100%;height:100%;z-index:2}:host .next{width:100%;height:100%;z-index:1}\n"], animations: LINE_UP_ANIMATIONS, changeDetection: i0.ChangeDetectionStrategy.Default }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: LineUpFrame, decorators: [{
             type: Component,
@@ -159,7 +147,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
                         },
                     ], host: {
                         'attr.has-next': 'store.hasNext()',
-                    }, styles: [":host{--gap: 0px;--gap-SCOPED-IN-line-up-z8Nh: var(--gap);--background-color: #ccc;--background-color-SCOPED-IN-line-up-z8Nh: var(--background-color);--next-width: 100%;--next-width-SCOPED-IN-line-up-z8Nh: var(--next-width);--next-max-width: fit-content;--next-max-width-SCOPED-IN-line-up-z8Nh: var(--next-max-width);--translate-x: 0px;--translate-x-SCOPED-IN-line-up-z8Nh: var(--translate-x)}:host{position:relative;transform:translate(var(--translate-x-SCOPED-IN-line-up-z8Nh));transition:transform .3s ease-in-out;display:flex;justify-content:flex-start;gap:var(--gap-SCOPED-IN-line-up-z8Nh);width:100%;height:100%}:host .main{max-width:100%;height:100%;z-index:2}:host .next{width:100%;height:100%;z-index:1}\n"] }]
+                    }, styles: [":host{--gap: 0px;--gap-SCOPED-IN-line-up-jbwV: var(--gap);--background-color: #ccc;--background-color-SCOPED-IN-line-up-jbwV: var(--background-color);--next-width: 100%;--next-width-SCOPED-IN-line-up-jbwV: var(--next-width);--next-max-width: fit-content;--next-max-width-SCOPED-IN-line-up-jbwV: var(--next-max-width);--translate-x: 0px;--translate-x-SCOPED-IN-line-up-jbwV: var(--translate-x)}:host{position:relative;transform:translate(var(--translate-x-SCOPED-IN-line-up-jbwV));transition:transform .3s ease-in-out;display:flex;justify-content:flex-start;gap:var(--gap-SCOPED-IN-line-up-jbwV);width:100%;height:100%}:host .main{max-width:100%;height:100%;z-index:2}:host .next{width:100%;height:100%;z-index:1}\n"] }]
         }], propDecorators: { main: [{ type: i0.ViewChild, args: ['main', { ...{ read: ElementRef }, isSignal: true }] }] } });
 /**

package/fesm2022/ng-atomic-components-frames-line-up.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ng-atomic-components-frames-line-up.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/frames/line-up/line-up.animations.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/line-up/line-up.service.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/line-up/resize-observer.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/line-up/line-up.frame.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/line-up/ng-atomic-components-frames-line-up.ts"],"sourcesContent":["import { animate, query, sequence, state, style, transition, trigger, group } from '@angular/animations';\n\nexport const LINE_UP_ANIMATIONS = [\n trigger('hasNext', [\n transition(':enter', [\n query(':enter', [style({ transform: 'translateX(-100%)', })], { optional: true }),\n query(':enter', [animate('300ms linear', style({ transform: 'translateX(0%)', })),], { optional: true }),\n ]),\n transition(':leave', [\n query(':leave', [style({transform: 'translateX(0%)'})], { optional: true }),\n query(':leave', [animate('300ms linear', style({transform: 'translateX(-100%)'}))], { optional: true }),\n ]),\n ])\n];\n","import { Injectable, signal } from \"@angular/core\";\nimport { LineUpFrame } from \"./line-up.frame\";\nimport { takeUntilDestroyed, toObservable } from \"@angular/core/rxjs-interop\";\nimport { distinctUntilChanged } from \"rxjs\";\n\ninterface State {\n [scope: string]: {\n frames: LineUpFrame[];\n sizeMap: Record<number, number>;\n }\n}\n\n\n@Injectable({providedIn: 'root'})\nexport class LineUpFrameService {\n readonly sizeMap = signal<State>({});\n readonly sizeMap$ = toObservable(this.sizeMap).pipe(\n distinctUntilChanged(),\n takeUntilDestroyed(),\n );\n\n register(frame: LineUpFrame, scope: string) {\n this.sizeMap.update(record => {\n record[scope] ??= {frames: [], sizeMap: {}};\n record[scope].frames.push(frame);\n return {...record};\n });\n }\n\n update(frame: LineUpFrame, mainWidth: number, scope: string) {\n const index = this.findIndex(frame, scope);\n this.sizeMap.update(record => {\n record[scope] ??= {frames: [], sizeMap: {}};\n record[scope].sizeMap[index] = mainWidth;\n return {...record};\n })\n }\n\n unregister(frame: LineUpFrame, scope: string) {\n const index = this.findIndex(frame, scope);\n this.sizeMap.update(record => {\n record[scope].frames = [...record[scope].frames.filter((value) => value !== frame)];\n delete record[scope].sizeMap[index];\n return {...record};\n })\n }\n\n findIndex(frame: LineUpFrame, scope: string): number {\n return this.sizeMap()[scope].frames.findIndex((value) => value === frame);\n }\n\n isFirst(frame: LineUpFrame, scope: string): boolean {\n const index = this.findIndex(frame, scope);\n return Math.min(...Object.keys(this.getSizeMap(scope)).map(key => parseInt(key, 10))) === index;\n }\n\n getSizeMap(scope: string) {\n return this.sizeMap()[scope].sizeMap ?? {};\n }\n\n getFollowingWidth(scope: string, frame: LineUpFrame): number {\n return Object.entries(this.getSizeMap(scope))\n .filter(([key]) => parseInt(key, 10) >= this.findIndex(frame, scope))\n .reduce((acc, [_, width]) => width + acc, 0);\n }\n}\n","import { NEVER, Observable } from 'rxjs';\nimport { startWith } from 'rxjs/operators';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport { distinctUntilChanged, map } from 'rxjs/operators';\nimport { ElementRef } from '@angular/core';\n\nexport function fromResize(el: ElementRef<Element>): Observable<number> {\n if (!el) return NEVER;\n return new Observable<any>((observer) => {\n const resizeObserver = new ResizeObserver(entries => {\n entries.forEach((entry) => observer.next(entry));\n });\n resizeObserver.observe(el.nativeElement);\n return () => resizeObserver.disconnect();\n }).pipe(\n map((el) => el.contentRect?.width ?? 0),\n startWith(0),\n distinctUntilChanged(),\n );\n}\n","import { ChangeDetectionStrategy, Component, Directive, ElementRef, OnDestroy, OnInit, PLATFORM_ID, inject, input, viewChild, AfterViewInit } from '@angular/core';\nimport { isPlatformBrowser } from '@angular/common';\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';\nimport { distinctUntilChanged, filter, map, startWith, switchMap } from 'rxjs/operators';\nimport { LINE_UP_ANIMATIONS } from './line-up.animations';\nimport { LineUpFrameService } from './line-up.service';\nimport { fromResize } from './resize-observer';\nimport { combineLatest, fromEvent, of } from 'rxjs';\n\n@Directive({standalone: true, selector: 'frames-line-up'})\nexport class LineUpFrameStore {\n readonly scope = input('default');\n readonly hasNext = input(false);\n}\n\n@Component({\n imports: [],\n selector: 'frames-line-up',\n template: `\n <div class=\"main\" #main><ng-content select=[main] /></div>\n @if (store.hasNext()) {\n <div class=\"next\" @hasNext><ng-content select=[next] /></div>\n }\n `,\n styleUrls: ['./line-up.frame.scss'],\n changeDetection: ChangeDetectionStrategy.Default,\n animations: LINE_UP_ANIMATIONS,\n hostDirectives: [\n {\n directive: LineUpFrameStore,\n inputs: ['scope', 'hasNext'],\n },\n ],\n host: {\n 'attr.has-next': 'store.hasNext()',\n }\n})\nexport class LineUpFrame implements OnInit, OnDestroy, AfterViewInit {\n protected store = inject(LineUpFrameStore);\n private service = inject(LineUpFrameService);\n private el = inject(ElementRef);\n private platformId = inject(PLATFORM_ID);\n\n readonly resizeWindow$ = of(null).pipe(\n switchMap(() => {\n return isPlatformBrowser(this.platformId)\n ? fromEvent(window, 'resize').pipe(startWith(null))\n : of(null);\n }),\n )\n\n readonly elWidth$ = this.resizeWindow$.pipe(\n switchMap(() => fromResize(this.el).pipe(startWith(null))),\n map(() => this.el.nativeElement?.clientWidth ?? 0),\n takeUntilDestroyed(),\n );\n \n readonly main = viewChild('main', {read: ElementRef});\n readonly main$ = toObservable(this.main);\n readonly mainWidth$ = combineLatest({\n main: this.main$,\n resize: this.resizeWindow$\n }).pipe(\n switchMap(({main}) => fromResize(main as ElementRef).pipe(startWith(null))),\n map(() => this.main()),\n map((main) => main?.nativeElement?.clientWidth ?? 0),\n takeUntilDestroyed(),\n );\n readonly allWidth$ = combineLatest({\n map: this.service.sizeMap$,\n window: this.resizeWindow$\n }) .pipe(\n map(() => this.service.getFollowingWidth(this.store.scope(), this)),\n takeUntilDestroyed(),\n );\n\n readonly delta$ = combineLatest({\n el: this.elWidth$,\n all: this.allWidth$,\n }).pipe(\n filter(() => this.service.isFirst(this, this.store.scope())),\n map(({el, all}) => Math.min(el - all, 0)),\n distinctUntilChanged(),\n takeUntilDestroyed(),\n );\n\n ngOnInit(): void {\n this.service.register(this, this.store.scope());\n }\n\n ngAfterViewInit(): void {\n if (isPlatformBrowser(this.platformId)) {\n this.mainWidth$.subscribe((width) => this.service.update(this, width, this.store.scope()));\n this.delta$.subscribe((delta) => this.setTranslateX(delta));\n }\n }\n\n ngOnDestroy(): void {\n this.service.unregister(this, this.store.scope());\n }\n\n protected setTranslateX(value: number) {\n this.el.nativeElement.style.setProperty('--translate-x', `${value}px`);\n }\n}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":["distinctUntilChanged"],"mappings":"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"}
1	+ {"version":3,"file":"ng-atomic-components-frames-line-up.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/frames/line-up/line-up.animations.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/line-up/line-up.service.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/line-up/line-up.frame.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/line-up/ng-atomic-components-frames-line-up.ts"],"sourcesContent":["import { animate, query, sequence, state, style, transition, trigger, group } from '@angular/animations';\n\nexport const LINE_UP_ANIMATIONS = [\n trigger('hasNext', [\n transition(':enter', [\n query(':enter', [style({ transform: 'translateX(-100%)', })], { optional: true }),\n query(':enter', [animate('300ms linear', style({ transform: 'translateX(0%)', })),], { optional: true }),\n ]),\n transition(':leave', [\n query(':leave', [style({transform: 'translateX(0%)'})], { optional: true }),\n query(':leave', [animate('300ms linear', style({transform: 'translateX(-100%)'}))], { optional: true }),\n ]),\n ])\n];\n","import { Injectable } from \"@angular/core\";\nimport { LineUpFrame } from \"./line-up.frame\";\n\ninterface ScopeState {\n frames: LineUpFrame[];\n widths: Map<LineUpFrame, number>;\n}\n\n\n@Injectable({providedIn: 'root'})\nexport class LineUpFrameService {\n private readonly state = new Map<string, ScopeState>();\n\n register(frame: LineUpFrame, scope: string) {\n const s = this.scopeState(scope);\n if (!s.frames.includes(frame)) s.frames.push(frame);\n }\n\n update(frame: LineUpFrame, mainWidth: number, scope: string) {\n const s = this.scopeState(scope);\n if (s.widths.get(frame) === mainWidth) return;\n s.widths.set(frame, mainWidth);\n this.recompute(scope);\n }\n\n unregister(frame: LineUpFrame, scope: string) {\n const s = this.scopeState(scope);\n s.frames = s.frames.filter((f) => f !== frame);\n s.widths.delete(frame);\n this.recompute(scope);\n }\n\n isFirst(frame: LineUpFrame, scope: string): boolean {\n return this.firstMeasured(scope) === frame;\n }\n\n getFollowingWidth(scope: string, frame: LineUpFrame): number {\n const s = this.scopeState(scope);\n const index = s.frames.indexOf(frame);\n if (index < 0) return 0;\n return s.frames\n .slice(index)\n .reduce((acc, f) => acc + (s.widths.get(f) ?? 0), 0);\n }\n\n \n recompute(scope: string) {\n const first = this.firstMeasured(scope);\n if (!first) return;\n const delta = Math.min(first.hostWidth() - this.getFollowingWidth(scope, first), 0);\n first.applyTranslateX(delta);\n }\n\n \n private firstMeasured(scope: string): LineUpFrame \| undefined {\n const s = this.scopeState(scope);\n return s.frames.find((f) => s.widths.has(f));\n }\n\n private scopeState(scope: string): ScopeState {\n if (!this.state.has(scope)) this.state.set(scope, { frames: [], widths: new Map() });\n return this.state.get(scope)!;\n }\n}\n","import { ChangeDetectionStrategy, Component, Directive, ElementRef, OnDestroy, OnInit, PLATFORM_ID, inject, input, viewChild, AfterViewInit } from '@angular/core';\nimport { isPlatformBrowser } from '@angular/common';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport { LINE_UP_ANIMATIONS } from './line-up.animations';\nimport { LineUpFrameService } from './line-up.service';\n\n@Directive({standalone: true, selector: 'frames-line-up'})\nexport class LineUpFrameStore {\n readonly scope = input('default');\n readonly hasNext = input(false);\n}\n\n@Component({\n imports: [],\n selector: 'frames-line-up',\n template: `\n <div class=\"main\" #main><ng-content select=[main] /></div>\n @if (store.hasNext()) {\n <div class=\"next\" @hasNext><ng-content select=[next] /></div>\n }\n `,\n styleUrls: ['./line-up.frame.scss'],\n changeDetection: ChangeDetectionStrategy.Default,\n animations: LINE_UP_ANIMATIONS,\n hostDirectives: [\n {\n directive: LineUpFrameStore,\n inputs: ['scope', 'hasNext'],\n },\n ],\n host: {\n 'attr.has-next': 'store.hasNext()',\n }\n})\nexport class LineUpFrame implements OnInit, OnDestroy, AfterViewInit {\n protected store = inject(LineUpFrameStore);\n private service = inject(LineUpFrameService);\n private el = inject(ElementRef);\n private platformId = inject(PLATFORM_ID);\n\n readonly main = viewChild('main', {read: ElementRef});\n private observers: ResizeObserver[] = [];\n\n ngOnInit(): void {\n this.service.register(this, this.store.scope());\n }\n\n \n \n \n \n \n ngAfterViewInit(): void {\n if (!isPlatformBrowser(this.platformId)) return;\n const scope = this.store.scope();\n const mainEl = this.main()?.nativeElement;\n if (mainEl) {\n const mainObserver = new ResizeObserver(() =>\n this.service.update(this, mainEl.clientWidth, scope));\n mainObserver.observe(mainEl);\n this.observers.push(mainObserver);\n \n this.service.update(this, mainEl.clientWidth, scope);\n }\n \n const hostObserver = new ResizeObserver(() => this.service.recompute(scope));\n hostObserver.observe(this.el.nativeElement);\n this.observers.push(hostObserver);\n }\n\n ngOnDestroy(): void {\n this.observers.forEach((observer) => observer.disconnect());\n this.observers = [];\n this.service.unregister(this, this.store.scope());\n }\n\n \n hostWidth(): number {\n return this.el.nativeElement?.clientWidth ?? 0;\n }\n\n \n applyTranslateX(value: number) {\n this.el.nativeElement.style.setProperty('--translate-x', `${value}px`);\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-loading.mjs CHANGED Viewed

@@ -26,7 +26,7 @@ class LoadingFrame extends NgAtomicComponent {
     @if(store.isLoading()) {
       <div class="loading"><mat-spinner /></div>
     }
-  `, isInline: true, styles: [":host{--primary-color: inherit;--primary-color-SCOPED-IN-loading-TnL5: var(--primary-color);--on-primary-color: inherit;--on-primary-color-SCOPED-IN-loading-TnL5: var(--on-primary-color)}:host{position:relative;display:block;width:100%;height:100%}:host .loading{position:absolute;z-index:10000;display:flex;width:100%;height:100%;justify-content:center;align-items:center;background-color:#0006}:host .loading mat-spinner{--mat-progress-spinner-active-indicator-color: var(--primary-color)}:host .contents{position:absolute;top:0;left:0;display:block;width:100%;height:100%}:host *{--primary-color: var(--primary-color-SCOPED-IN-loading-TnL5);--on-primary-color: var(--on-primary-color-SCOPED-IN-loading-TnL5)}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{--primary-color: inherit;--primary-color-SCOPED-IN-loading-kMv4: var(--primary-color);--on-primary-color: inherit;--on-primary-color-SCOPED-IN-loading-kMv4: var(--on-primary-color)}:host{position:relative;display:block;width:100%;height:100%}:host .loading{position:absolute;z-index:10000;display:flex;width:100%;height:100%;justify-content:center;align-items:center;background-color:#0006}:host .loading mat-spinner{--mat-progress-spinner-active-indicator-color: var(--primary-color)}:host .contents{position:absolute;top:0;left:0;display:block;width:100%;height:100%}:host *{--primary-color: var(--primary-color-SCOPED-IN-loading-kMv4);--on-primary-color: var(--on-primary-color-SCOPED-IN-loading-kMv4)}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: LoadingFrame, decorators: [{
             type: Component,
@@ -42,7 +42,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
                             directive: LoadingFrameStore,
                             inputs: ['isLoading'],
                         }
-                    ], styles: [":host{--primary-color: inherit;--primary-color-SCOPED-IN-loading-TnL5: var(--primary-color);--on-primary-color: inherit;--on-primary-color-SCOPED-IN-loading-TnL5: var(--on-primary-color)}:host{position:relative;display:block;width:100%;height:100%}:host .loading{position:absolute;z-index:10000;display:flex;width:100%;height:100%;justify-content:center;align-items:center;background-color:#0006}:host .loading mat-spinner{--mat-progress-spinner-active-indicator-color: var(--primary-color)}:host .contents{position:absolute;top:0;left:0;display:block;width:100%;height:100%}:host *{--primary-color: var(--primary-color-SCOPED-IN-loading-TnL5);--on-primary-color: var(--on-primary-color-SCOPED-IN-loading-TnL5)}\n"] }]
+                    ], styles: [":host{--primary-color: inherit;--primary-color-SCOPED-IN-loading-kMv4: var(--primary-color);--on-primary-color: inherit;--on-primary-color-SCOPED-IN-loading-kMv4: var(--on-primary-color)}:host{position:relative;display:block;width:100%;height:100%}:host .loading{position:absolute;z-index:10000;display:flex;width:100%;height:100%;justify-content:center;align-items:center;background-color:#0006}:host .loading mat-spinner{--mat-progress-spinner-active-indicator-color: var(--primary-color)}:host .contents{position:absolute;top:0;left:0;display:block;width:100%;height:100%}:host *{--primary-color: var(--primary-color-SCOPED-IN-loading-kMv4);--on-primary-color: var(--on-primary-color-SCOPED-IN-loading-kMv4)}\n"] }]
         }] });
 /**

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

@@ -107,7 +107,7 @@ class RouterOutletFrame extends NgAtomicComponent {
     }
     <ng-template #main><ng-content main/></ng-template>
     <ng-template #next><router-outlet [name]="store.name()"/></ng-template>
-  `, isInline: true, styles: [":host{display:contents;--primary-color: #ccc;--primary-color-SCOPED-IN-router-outlet-xcZx: var(--primary-color);--on-primary-color: #ccc;--on-primary-color-SCOPED-IN-router-outlet-xcZx: var(--on-primary-color);--surface-color: #ccc;--surface-color-SCOPED-IN-router-outlet-xcZx: var(--surface-color);--background-color: #ccc;--background-color-SCOPED-IN-router-outlet-xcZx: var(--background-color)}:host *{--primary-color: var(--primary-color-SCOPED-IN-router-outlet-xcZx);--on-primary-color: var(--on-primary-color-SCOPED-IN-router-outlet-xcZx);--surface-color: var(--surface-color-SCOPED-IN-router-outlet-xcZx);--background-color: var(--background-color-SCOPED-IN-router-outlet-xcZx)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: OverlayFrame, selector: "frames-overlay" }, { kind: "component", type: LineUpFrame, selector: "frames-line-up" }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:contents;--primary-color: #ccc;--primary-color-SCOPED-IN-router-outlet-vQp8: var(--primary-color);--on-primary-color: #ccc;--on-primary-color-SCOPED-IN-router-outlet-vQp8: var(--on-primary-color);--surface-color: #ccc;--surface-color-SCOPED-IN-router-outlet-vQp8: var(--surface-color);--background-color: #ccc;--background-color-SCOPED-IN-router-outlet-vQp8: var(--background-color)}:host *{--primary-color: var(--primary-color-SCOPED-IN-router-outlet-vQp8);--on-primary-color: var(--on-primary-color-SCOPED-IN-router-outlet-vQp8);--surface-color: var(--surface-color-SCOPED-IN-router-outlet-vQp8);--background-color: var(--background-color-SCOPED-IN-router-outlet-vQp8)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: OverlayFrame, selector: "frames-overlay" }, { kind: "component", type: LineUpFrame, selector: "frames-line-up" }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: RouterOutletFrame, decorators: [{
             type: Component,
@@ -142,7 +142,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
                             directive: RouterOutletFrameStore,
                             inputs: ['frame', 'name', 'skip'],
                         },
-                    ], styles: [":host{display:contents;--primary-color: #ccc;--primary-color-SCOPED-IN-router-outlet-xcZx: var(--primary-color);--on-primary-color: #ccc;--on-primary-color-SCOPED-IN-router-outlet-xcZx: var(--on-primary-color);--surface-color: #ccc;--surface-color-SCOPED-IN-router-outlet-xcZx: var(--surface-color);--background-color: #ccc;--background-color-SCOPED-IN-router-outlet-xcZx: var(--background-color)}:host *{--primary-color: var(--primary-color-SCOPED-IN-router-outlet-xcZx);--on-primary-color: var(--on-primary-color-SCOPED-IN-router-outlet-xcZx);--surface-color: var(--surface-color-SCOPED-IN-router-outlet-xcZx);--background-color: var(--background-color-SCOPED-IN-router-outlet-xcZx)}\n"] }]
+                    ], styles: [":host{display:contents;--primary-color: #ccc;--primary-color-SCOPED-IN-router-outlet-vQp8: var(--primary-color);--on-primary-color: #ccc;--on-primary-color-SCOPED-IN-router-outlet-vQp8: var(--on-primary-color);--surface-color: #ccc;--surface-color-SCOPED-IN-router-outlet-vQp8: var(--surface-color);--background-color: #ccc;--background-color-SCOPED-IN-router-outlet-vQp8: var(--background-color)}:host *{--primary-color: var(--primary-color-SCOPED-IN-router-outlet-vQp8);--on-primary-color: var(--on-primary-color-SCOPED-IN-router-outlet-vQp8);--surface-color: var(--surface-color-SCOPED-IN-router-outlet-vQp8);--background-color: var(--background-color-SCOPED-IN-router-outlet-vQp8)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { events: [{
                 type: Output
             }], outlet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => RouterOutlet), { isSignal: true }] }] } });
@@ -163,7 +163,6 @@ const canDeactivateFn = (component) => {
         current.set(frame);
         frame.events.emit('deactivated');
     }
-    // MEMO(NozomuMiyamoto): RouterOutletFrameの幅を変更するアニメーションの最適化のために遅延させている。
     return of(true).pipe(delay(0));
 };
 const canActivateFn = () => {
@@ -171,7 +170,6 @@ const canActivateFn = () => {
     if (current()) {
         current().events.emit('activated');
     }
-    // MEMO(NozomuMiyamoto): RouterOutletFrameの幅を変更するアニメーションの最適化のために遅延させている。
     return of(true).pipe(delay(0));
 };
 function ngAtomicRoute(route) {