### File

`src/lib/window-container/window-container.component.ts`

### Implements

`OnInit`

### Metadata

changeDetection | `ChangeDetectionStrategy.Default`
host | `{ }`
selector | `rxap-window-container`
standalone | `true`
imports | `CdkDrag` `NgStyle` `CdkDragHandle` `WindowToolBarComponent` `NgIf` `MatToolbarModule` `PortalModule` `MatProgressBarModule` `WindowResizerComponent` `AsyncPipe`
styleUrls | `./window-container.component.scss`
templateUrl | `./window-container.component.html`

### Index

###### Properties
Public containerRef Public Readonly context Public footerContent Public height Public width Public windowContainerResizer Public Readonly windowInstance Public Readonly windowRef
###### Methods
Public onDragEnded
###### HostBindings
attr.data-id
###### Accessors
id

### HostBindings

attr.data-id
Type : `string`
Defined in src/lib/window-container/window-container.component.ts:78

### Methods

Public onDragEnded
`onDragEnded($event: CdkDragEnd)`
Defined in src/lib/window-container/window-container.component.ts:102
Parameters :
Name | Type | Optional
$event | `CdkDragEnd` | No
Returns : `void`

### Properties

Public containerRef
Type : `ElementRef`
Decorators : `@ViewChild('container', {static: true})`
Defined in src/lib/window-container/window-container.component.ts:66

Public Readonly context
Default value : `inject(RXAP_WINDOW_CONTEXT)`
Defined in src/lib/window-container/window-container.component.ts:73

Public footerContent
Type : `ElementRef`
Decorators : `@ContentChild('[footer]', {static: true})`
Defined in src/lib/window-container/window-container.component.ts:64

Public height
Type : `Signal<string>`
Defined in src/lib/window-container/window-container.component.ts:70

Public width
Type : `Signal<string>`
Defined in src/lib/window-container/window-container.component.ts:69

Public windowContainerResizer
Type : `WindowResizerComponent`
Decorators : `@ViewChild(WindowResizerComponent, {static: true})`
Defined in src/lib/window-container/window-container.component.ts:67

Public Readonly windowInstance
Default value : `inject(LoadingIndicatorService)`
Defined in src/lib/window-container/window-container.component.ts:75

Public Readonly windowRef
Default value : `inject(RXAP_WINDOW_REF)`
Defined in src/lib/window-container/window-container.component.ts:74

### Accessors

id
get `id()`
Defined in src/lib/window-container/window-container.component.ts:78

    import {
      CdkDrag,
      CdkDragEnd,
      CdkDragHandle,
    } from '@angular/cdk/drag-drop';
    import { PortalModule } from '@angular/cdk/portal';
    import {
      AsyncPipe,
      NgIf,
      NgStyle,
    } from '@angular/common';
    import {
      ChangeDetectionStrategy,
      Component,
      ContentChild,
      ElementRef,
      HostBinding,
      inject,
      INJECTOR,
      OnInit,
      runInInjectionContext,
      Signal,
      ViewChild,
    } from '@angular/core';
    import { toSignal } from '@angular/core/rxjs-interop';
    import { MatProgressBarModule } from '@angular/material/progress-bar';
    import { MatToolbarModule } from '@angular/material/toolbar';
    import { isDefined } from '@rxap/rxjs';
    import { LoadingIndicatorService } from '@rxap/services';
    import { merge } from 'rxjs';
    import { filter } from 'rxjs/operators';
    import {
      RXAP_WINDOW_CONTEXT,
      RXAP_WINDOW_REF,
    } from '../tokens';
    import { WindowResizerComponent } from '../window-resizer/window-resizer.component';
    import { WindowToolBarComponent } from '../window-tool-bar/window-tool-bar.component';

    @Component({
      selector: 'rxap-window-container',
      templateUrl: './window-container.component.html',
      styleUrls: [ './window-container.component.scss' ],
      changeDetection: ChangeDetectionStrategy.Default,
      // eslint-disable-next-line @angular-eslint/no-host-metadata-property
      host: {
        class: 'rxap-window-container',
      },
      standalone: true,
      imports: [
        CdkDrag,
        NgStyle,
        CdkDragHandle,
        WindowToolBarComponent,
        NgIf,
        MatToolbarModule,
        PortalModule,
        MatProgressBarModule,
        WindowResizerComponent,
        AsyncPipe,
      ],
    })
    export class WindowContainerComponent implements OnInit {

      @ContentChild('[footer]', { static: true }) public footerContent!: ElementRef;

      @ViewChild('container', { static: true }) public containerRef!: ElementRef;
      @ViewChild(WindowResizerComponent, { static: true }) public windowContainerResizer!: WindowResizerComponent;

      public width!: Signal<string>;
      public height!: Signal<string>;

      private readonly injector = inject(INJECTOR);
      public readonly context = inject(RXAP_WINDOW_CONTEXT);
      public readonly windowRef = inject(RXAP_WINDOW_REF);
      public readonly windowInstance = inject(LoadingIndicatorService);

      @HostBinding('attr.data-id')
      public get id(): string {
        return this.context.id;
      }

      ngOnInit() {
        runInInjectionContext(this.injector, () => {
          this.width = toSignal(
            merge(
              this.windowContainerResizer.width$,
              this.windowRef.width$,
            ).pipe(isDefined(), filter(value => !!value?.match(/^\d+/))),
            { initialValue: '100%' },
          );

          this.height = toSignal(
            merge(
              this.windowContainerResizer.height$,
              this.windowRef.height$,
            ).pipe(isDefined(), filter(value => !!value?.match(/^\d+/))),
            { initialValue: '100%' },
          );
        });
      }

      public onDragEnded($event: CdkDragEnd) {
        const nativeElement = $event.source.element.nativeElement;
        const pos = nativeElement.getBoundingClientRect();
        $event.source.reset();
        this.windowRef.setPos(pos.left + 'px', pos.top + 'px');
      }

    }

    <div #container
         (cdkDragEnded)="onDragEnded($event)"
         [cdkDragDisabled]="windowRef.draggable === false"
         [ngStyle]="{
         'width': width(),
         'height': height(),
         'minWidth': windowRef.minWidth,
         'minHeight': windowRef.minHeight,
         'maxWidth': windowRef.maxWidth,
         'maxHeight': windowRef.maxHeight
         }"
         cdkDrag
         cdkDragBoundary=".cdk-overlay-container"
         class="mat-elevation-z4 mat-drawer-container z-[1]">
      <div class="flex flex-col h-full max-h-full">

        <div cdkDragHandle class="grow-0 w-full h-[64px] min-h-[64px] cursor-move">
          <rxap-window-tool-bar></rxap-window-tool-bar>
        </div>

        <div class="grow overflow-auto w-full">
          <ng-content></ng-content>
        </div>

        <mat-toolbar *ngIf="windowRef.footerPortal$ | async as footerPortal"
                     class="mat-elevation-z1 grow-0 w-full h-[64px] min-h-[64px]">
          <ng-template [cdkPortalOutlet]="footerPortal"></ng-template>
        </mat-toolbar>

        <mat-progress-bar *ngIf="windowInstance.isLoading$ | async" mode="indeterminate"></mat-progress-bar>

        <rxap-window-resizer [containerRef]="containerRef"></rxap-window-resizer>
      </div>
    </div>

`./window-container.component.scss`

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""