Window

import { Component } from '@angular/core';
import { WR_WINDOW_DATA, WR_WINDOW_REF, WrWindowManager, WrWindowTaskbar } from 'ngwr/window';

@Component({ imports: [WrWindowTaskbar] })
export class MyComponent {}

import { WrWindowManager, WrWindowTaskbar } from 'ngwr/window';

@Component({
  imports: [WrWindowTaskbar],
  template: '<wr-window-taskbar />',
})
export class AppRoot {
  private readonly windows = inject(WrWindowManager);

  open(): void {
    this.windows.open(EditorComponent, { title: 'Editor' });
  }
}

const ref = manager.open(EditorComponent, {
  title: 'Untitled.md',
  size: 'md',
  id: 'editor', // the same id reuses the open window
});

const result = await ref.afterClosed();

manager.open(EditorComponent, { os: 'macos' }); // 'auto' | 'macos' | 'windows' | 'linux'

manager.active(); // the window with the keyboard, or null
ref.isActive();
ref.activate(); // back from the taskbar, raised, focused

// Ctrl+F6 steps through the windows, with ngwr/hotkey
inject(WrHotkey).bind('ctrl+f6', () => manager.activateNext());

// Alt+F7 / Alt+F8 work on every window. Offer it from a menu too:
ref.startMove();
ref.startResize();

manager.open(EditorComponent, { keyboardStep: 20 }); // keyboard: false turns it off

manager.open(EditorComponent, { snap: 'all' });

ref.snapTo('left'); // 'right' | 'top' | 'top-left' | … | null
ref.snap(); // 'left'

manager.open(EditorComponent, { bounds: { top: 64 } }); // an app header
manager.open(EditorComponent, { bounds: deskElement });  // a desktop in a panel

// App-wide:
provideWr(withWindows({ bounds: { top: 64 } }));

<wr-window-taskbar />
<wr-window-taskbar show="all" />
<wr-window-taskbar position="top" />
<wr-window-taskbar show="all" [maxTabs]="5" />

manager.cascade();
manager.tile(); // 'grid' | 'columns' | 'rows'
manager.minimizeAll();
manager.restoreAll();

<ng-template #badge let-ref>
  <wr-tag color="warning">Draft</wr-tag>
</ng-template>

manager.open(EditorComponent, {
  titleExtra: this.badge(),
  statusBar: StatusBarComponent, // a component can inject WR_WINDOW_REF
});

ref.update({ movable: false, resizable: false, showClose: false, title: 'Uploading…' });
await upload();
ref.update({ movable: true, resizable: true, showClose: true, title: 'Upload' });

ref.closed.subscribe(result => …);    // once, then completes
ref.moved.subscribe(({ x, y }) => …);   // a drag or a keyboard move ended
ref.resized.subscribe(({ width, height }) => …);
ref.stateChanges.subscribe(state => …); // 'normal' | 'minimized' | 'maximized'

const result = await ref.awaitClose();

manager.open(EditorComponent, {
  id: 'editor',
  storage: {
    key: 'editor',
    prefix: 'my-app',
    persist: 'all', // 'position' | 'size' | 'all'
  },
});

// Forget the saved geometry:
manager.clearPersistedPosition({ key: 'editor', prefix: 'my-app' });

manager.saveLayout('default');

// The callback re-opens windows that are closed.
manager.restoreLayout('default', (id, snap) => {
  if (id.startsWith('editor:')) {
    manager.open(EditorComponent, { id, title: snap.title });
  } else if (id === 'settings') {
    manager.open(SettingsComponent, { id, title: snap.title });
  }
});

manager.clearLayout('default');

// Opened in the background: focus stays where it is.
manager.open(LogComponent, { title: 'Build log', autoFocus: false });

const ref = inject<WrWindowRef<MyComponent, MyResult>>(WR_WINDOW_REF);
const data = inject<MyData>(WR_WINDOW_DATA);

ref.beforeClose(async () => {
  if (!isDirty) return true;
  return await confirmDiscard();
});

ref.setTitle(`${docName} — ${isDirty ? 'unsaved' : 'saved'}`);

await save();
ref.close(savedDocId);