@ngrdt/tabs 0.0.1

package/src/lib/directives/rdt-tab-controller.directive.ts

@@ -0,0 +1,440 @@
+import {
+  AfterContentInit,
+  ContentChildren,
+  Directive,
+  inject,
+  Input,
+  OnDestroy,
+  OnInit,
+  QueryList,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import {
+  canTransition$,
+  RDT_GUARDED_COMPONENT,
+  RdtContainerDirective,
+} from '@ngrdt/core';
+import { RdtShortcut, RdtShortcutService } from '@ngrdt/shortcuts';
+import { firstValueFrom, Subscription, takeWhile } from 'rxjs';
+import { RdtTabContainerComponent } from '../components/tab-container/rdt-tab-container.component';
+import { RdtTabComponent } from '../components/tab/rdt-tab.component';
+import { AutoRdtTabsShortcutStrategy } from '../strategies/auto-rdt-tabs-shortcut-strategy';
+import { RdtTabsShortcutStrategy } from '../strategies/rdt-tabs-shortcut-strategy';
+
+@Directive({
+  selector: '[rdtTabController]',
+  providers: [
+    {
+      provide: RDT_GUARDED_COMPONENT,
+      useExisting: RdtTabControllerDirective,
+    },
+  ],
+})
+export class RdtTabControllerDirective
+  extends RdtContainerDirective
+  implements OnInit, AfterContentInit, OnDestroy
+{
+  private shortcutService = inject(RdtShortcutService);
+  private shortcutSub = new Subscription();
+
+  // String value lets you use the directive without param.
+  @Input()
+  set rdtTabController(value: RdtTabsShortcutStrategy | string | null) {
+    if (value && typeof value !== 'string') {
+      this._strategy = value;
+      this.updateShortcuts();
+    }
+  }
+
+  protected get tabContainers() {
+    return this.getChildrenRecursive().filter(
+      (ch) => ch instanceof RdtTabContainerComponent
+    ) as unknown as RdtTabContainerComponent[];
+  }
+  protected get tabs() {
+    return this.getChildrenRecursive().filter(
+      (ch) => ch instanceof RdtTabComponent
+    ) as unknown as RdtTabComponent[];
+  }
+
+  @ContentChildren(RdtTabControllerDirective, { descendants: true })
+  protected childControllers!: QueryList<RdtTabControllerDirective>;
+
+  get strategy() {
+    return this._strategy;
+  }
+  private _strategy: RdtTabsShortcutStrategy =
+    new AutoRdtTabsShortcutStrategy();
+
+  private _lastActiveTabContainer: {
+    timestamp: number | null;
+    container: RdtTabContainerComponent;
+  } | null = null;
+
+  private _contentWasInit = false;
+
+  get disabled() {
+    return this._disabled;
+  }
+  private _disabled = false;
+
+  get shortcuts() {
+    return this._shortcuts;
+  }
+  set shortcuts(value: RdtShortcut[]) {
+    const oldSet = new Set<string>(this._shortcuts.map((s) => s.hotkeysValue));
+    this._shortcuts = value;
+
+    if (
+      oldSet.size !== value.length ||
+      value.some((s) => !oldSet.has(s.hotkeysValue))
+    ) {
+      this.bindAll();
+    }
+  }
+  private _shortcuts: RdtShortcut[] = [];
+
+  get activeContainer() {
+    return this._lastActiveTabContainer?.container;
+  }
+
+  override ngOnInit() {
+    super.ngOnInit();
+    this.updateShortcuts();
+  }
+
+  ngAfterContentInit() {
+    this.setDefaultActive();
+    this.disableSelfWhenChildCtrlExists();
+    this._contentWasInit = true;
+    if (this.tabs.length > 0) {
+      this.onTabChanges();
+    }
+    if (this.tabContainers.length > 0) {
+      this.onTabContainerChanges();
+    }
+  }
+
+  override ngOnDestroy(): void {
+    super.ngOnDestroy();
+    this.unbindAll();
+    this._shortcuts.length = 0;
+  }
+
+  getTabContainerIndex(cont: RdtTabContainerComponent): number {
+    const level = this.getSameLevelContainers(cont);
+    return level.indexOf(cont);
+  }
+
+  /**
+   * Activates first parent container of current container
+   * that is not disabled and has any non disabled tabs.
+   */
+  goLevelUp(): boolean {
+    let cont = this.activeContainer;
+    while (cont) {
+      cont = cont.parentTab?.tabContainer;
+      if (cont && !cont.disabled && cont.hasNonDisabledTabs) {
+        this.activateTabContainer(cont);
+        return true;
+      }
+    }
+    return false;
+  }
+
+  /**
+   * Activates first container under current tab which
+   * is not disabled and has any non disabled tabs.
+   */
+  goLevelDown(): boolean {
+    const cont = this.activeContainer;
+    if (!cont || cont.disabled) {
+      return false;
+    }
+    let tab = cont.tabsList.find((t) => t.stateId === cont.value);
+    if (!tab || tab.disabled) {
+      tab = cont.tabsList.find((t) => !t.disabled);
+    }
+    if (!tab) {
+      return false;
+    }
+    const targetCont = tab.childContainers.find(
+      (c) => !c.disabled && c.hasNonDisabledTabs
+    );
+    if (targetCont) {
+      this.activateTabContainer(targetCont);
+      return true;
+    }
+    return false;
+  }
+
+  /**
+   * Activates next container on current level
+   * (under parent container of currently active container).
+   * Is cyclic.
+   */
+  goToNextContainer(): boolean {
+    return this.goToAdjacentContainer(1);
+  }
+
+  /**
+   * Activates previous container on current level
+   * (under parent container of currently active container).
+   * Is cyclic.
+   */
+  goToPrevContainer(): boolean {
+    return this.goToAdjacentContainer(-1);
+  }
+
+  /**
+   * Activates tab within active container at the index of argument.
+   */
+  goToTabWithIndex(index: number): boolean {
+    const cont = this.activeContainer;
+    if (!cont) {
+      return false;
+    }
+    const tab = cont.tabsList.get(index);
+    if (!tab) {
+      return false;
+    }
+    this.activateTab(tab);
+    return true;
+  }
+
+  /**
+   * Activates next tab within active container. Is cyclic.
+   */
+  goToNextTab(): boolean {
+    return this.goToAdjacentTab(1);
+  }
+
+  /**
+   * Activates previous tab within active container. Is cyclic.
+   */
+  goToPrevTab(): boolean {
+    return this.goToAdjacentTab(-1);
+  }
+
+  private goToAdjacentContainer(dir: -1 | 1) {
+    const cont = this.activeContainer;
+    if (!cont) {
+      return false;
+    }
+
+    const level = this.getSameLevelContainers(cont);
+    if (!level) {
+      return false;
+    }
+
+    const currentIndex = level.indexOf(cont);
+    if (currentIndex < 0) {
+      throw new Error('Current container is not within its own level?');
+    }
+    for (
+      let i = (currentIndex + dir + level.length) % level.length;
+      i !== currentIndex;
+      i = (i + dir + level.length) % level.length
+    ) {
+      const next = level[i];
+      if (!next.disabled && next.hasNonDisabledTabs) {
+        this.activateTabContainer(next);
+        return true;
+      }
+    }
+    return false;
+  }
+
+  private goToAdjacentTab(dir: -1 | 1) {
+    const cont = this.activeContainer;
+    if (!cont) {
+      return false;
+    }
+
+    const tabs = cont.tabsList.toArray();
+    const currentIndex = tabs.findIndex((tab) => tab.stateId === cont.value);
+    if (currentIndex < 0) {
+      throw new Error('Current tab is not found in its container?!');
+    }
+
+    for (
+      let i = (currentIndex + dir + tabs.length) % tabs.length;
+      i !== currentIndex;
+      i = (i + dir + tabs.length) % tabs.length
+    ) {
+      const next = tabs[i];
+      if (!next.disabled) {
+        this.activateTab(next);
+        return true;
+      }
+    }
+    return false;
+  }
+
+  private getSameLevelContainers(cont: RdtTabContainerComponent) {
+    if (cont.parentTab) {
+      return cont.parentTab.childContainers;
+    } else {
+      return this.tabContainers.filter((cont) => cont.isTopLevel);
+    }
+  }
+
+  getTabByValue(value: string) {
+    for (const container of this.tabContainers) {
+      const tab = container.tabsList.find((ch) => ch.stateId === value);
+      if (tab) {
+        return tab;
+      }
+    }
+    return null;
+  }
+
+  activateTabContainer(tabs: RdtTabContainerComponent, scrollIntoView = true) {
+    if (this._lastActiveTabContainer) {
+      this._lastActiveTabContainer.container.active = false;
+    }
+
+    tabs.active = true;
+    if (scrollIntoView) {
+      tabs.scrollIntoView();
+    }
+
+    this._lastActiveTabContainer = {
+      container: tabs,
+      timestamp: null,
+    };
+  }
+
+  activateTabContainerFromClick(
+    tabs: RdtTabContainerComponent,
+    timestamp: number
+  ) {
+    if (this._lastActiveTabContainer) {
+      if (
+        this._lastActiveTabContainer.timestamp !== null &&
+        this._lastActiveTabContainer.timestamp >= timestamp
+      ) {
+        return;
+      }
+
+      this._lastActiveTabContainer.container.active = false;
+    }
+
+    tabs.active = true;
+
+    this._lastActiveTabContainer = {
+      container: tabs,
+      timestamp,
+    };
+  }
+
+  async activateTab(tab: RdtTabComponent) {
+    if (!this.canActivateTab(tab)) {
+      console.warn('Trying to activate disabled tab.');
+      return;
+    }
+
+    const formsCheck = await this.canActivateTabForms(tab);
+    if (!formsCheck) {
+      console.warn(
+        'Trying to activate tab while current tab has unsaved forms'
+      );
+      return;
+    }
+
+    let current: RdtTabComponent | null = tab;
+
+    do {
+      const container: RdtTabContainerComponent = current!.tabContainer;
+      container.value = current!.stateId;
+      current = container.parentTab;
+    } while (current !== null);
+  }
+
+  canActivateTab(tab: RdtTabComponent) {
+    let current: RdtTabComponent | null = tab;
+
+    do {
+      const container: RdtTabContainerComponent = current.tabContainer;
+      if (current.disabled || container.disabled) {
+        return false;
+      }
+      current = container.parentTab;
+    } while (current !== null);
+
+    return true;
+  }
+
+  async canActivateTabForms(tab: RdtTabComponent) {
+    const container = tab.tabContainer;
+    return firstValueFrom(
+      canTransition$(container.activeTab?.contDir, tab?.contDir)
+    );
+  }
+
+  onTabChanges() {
+    this.updateShortcuts();
+  }
+
+  onTabContainerChanges() {
+    this.setDefaultActiveWhenAvailable();
+  }
+
+  private disableSelfWhenChildCtrlExists() {
+    this.childControllers.changes
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((val: QueryList<RdtTabControllerDirective>) => {
+        this._disabled = val.length > 0;
+
+        if (this._disabled) {
+          this.unbindAll();
+        } else {
+          this.bindAll();
+        }
+      });
+  }
+
+  private setDefaultActive() {
+    if (this.tabContainers) {
+      const defaultCont = this.tabContainers.find(this.canContainerBeDefault);
+      if (defaultCont) {
+        this.activateTabContainer(defaultCont, false);
+      }
+    }
+  }
+
+  private setDefaultActiveWhenAvailable() {
+    const active = this.activeContainer;
+    if (active && this.tabContainers.some((cont) => cont === active)) {
+      return;
+    }
+    const newDefault = this.tabContainers.find(this.canContainerBeDefault);
+    if (newDefault) {
+      this.activateTabContainer(newDefault, false);
+    }
+  }
+
+  private canContainerBeDefault(c: RdtTabContainerComponent) {
+    return c.isTopLevel && !c.disabled && c.hasNonDisabledTabs;
+  }
+
+  private updateShortcuts() {
+    this.shortcuts = this._strategy.updateShortcuts(this);
+  }
+
+  private bindAll() {
+    this.shortcutSub.unsubscribe();
+    if (!this._disabled) {
+      this.shortcutSub = this.shortcutService
+        .listen(this._shortcuts)
+        .pipe(takeWhile(() => !this._disabled))
+        .subscribe((event) => {
+          this._strategy.onShortcut(event.shortcut, this);
+        });
+    }
+  }
+
+  private unbindAll() {
+    this.shortcutSub.unsubscribe();
+  }
+}

package/src/lib/rdt-tabs-models.ts

@@ -0,0 +1,12 @@
+export interface RdtTabContainerState {
+  id: any;
+  value: any;
+  tabStates: RdtTabState[];
+}
+
+export interface RdtTabState {
+  id: any;
+  containerStates: RdtTabContainerState[];
+}
+
+export enum RdtTabMode {}

package/src/lib/rdt-tabs.module.ts

@@ -0,0 +1,24 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { TooltipModule } from 'primeng/tooltip';
+import { RdtTabContainerComponent } from './components/tab-container/rdt-tab-container.component';
+import { RdtTabComponent } from './components/tab/rdt-tab.component';
+import { RdtDestroyInactiveDirective } from './directives/rdt-destroy-inactive.directive';
+import { RdtTabControllerDirective } from './directives/rdt-tab-controller.directive';
+
+@NgModule({
+  declarations: [
+    RdtTabComponent,
+    RdtTabContainerComponent,
+    RdtTabControllerDirective,
+    RdtDestroyInactiveDirective,
+  ],
+  exports: [
+    RdtTabComponent,
+    RdtTabContainerComponent,
+    RdtTabControllerDirective,
+    RdtDestroyInactiveDirective,
+  ],
+  imports: [CommonModule, TooltipModule],
+})
+export class RdtTabsModule {}

package/src/lib/strategies/auto-rdt-tabs-shortcut-strategy.ts

@@ -0,0 +1,81 @@
+import { RdtShortcut } from '@ngrdt/shortcuts';
+import { RdtTabControllerDirective } from '../directives/rdt-tab-controller.directive';
+import { RdtTabsShortcutStrategy } from './rdt-tabs-shortcut-strategy';
+
+const TAB_BASE = 'alt';
+const TAB_KEY_SETS = [
+  ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
+  ['+', 'ě', 'š', 'č', 'ř', 'ž', 'ý', 'á', 'í', 'é'],
+];
+const NEXT_CONTAINER = RdtShortcut.create('alt', 's');
+const PREV_CONTAINER = RdtShortcut.create('alt', 'w');
+const LEVEL_UP = RdtShortcut.create('ctrl', 'alt', 'up');
+const LEVEL_DOWN = RdtShortcut.create('ctrl', 'alt', 'down');
+const NEXT_TAB = RdtShortcut.create('ctrl', 'alt', 'right');
+const PREV_TAB = RdtShortcut.create('ctrl', 'alt', 'left');
+
+interface RdtShortcutActions {
+  [key: string]: (ctrl: RdtTabControllerDirective) => boolean;
+}
+
+export class AutoRdtTabsShortcutStrategy extends RdtTabsShortcutStrategy {
+  override updateShortcuts(): RdtShortcut[] {
+    return AutoRdtTabsShortcutStrategy.shortcuts;
+  }
+
+  override onShortcut(
+    shortcut: RdtShortcut,
+    ctrl: RdtTabControllerDirective
+  ): void {
+    const key = shortcut.lastKey;
+    if (!key) {
+      throw new Error('Key should not be undefined!');
+    }
+    const action = AutoRdtTabsShortcutStrategy.actions[key];
+    if (!action) {
+      throw new Error(`Unknown action for key ${key}`);
+    }
+    action(ctrl);
+  }
+
+  private static generateActions() {
+    const actions: RdtShortcutActions = {
+      [LEVEL_UP.lastKey]: (ctrl) => ctrl.goLevelUp(),
+      [LEVEL_DOWN.lastKey]: (ctrl) => ctrl.goLevelDown(),
+      [NEXT_CONTAINER.lastKey]: (ctrl) => ctrl.goToNextContainer(),
+      [PREV_CONTAINER.lastKey]: (ctrl) => ctrl.goToPrevContainer(),
+      [NEXT_TAB.lastKey]: (ctrl) => ctrl.goToNextTab(),
+      [PREV_TAB.lastKey]: (ctrl) => ctrl.goToPrevTab(),
+    };
+
+    TAB_KEY_SETS.forEach((set) => {
+      set.forEach((char, i) => {
+        actions[char] = (ctrl) => ctrl.goToTabWithIndex(i);
+      });
+    });
+    return actions;
+  }
+
+  private static generateShortcuts() {
+    const shortcuts: RdtShortcut[] = [
+      LEVEL_UP,
+      LEVEL_DOWN,
+      NEXT_CONTAINER,
+      PREV_CONTAINER,
+      NEXT_TAB,
+      PREV_TAB,
+    ];
+
+    TAB_KEY_SETS.forEach((set) => {
+      set.forEach((tabKey) => {
+        shortcuts.push(RdtShortcut.create(TAB_BASE, tabKey));
+      });
+    });
+
+    return shortcuts;
+  }
+
+  private static shortcuts: RdtShortcut[] =
+    AutoRdtTabsShortcutStrategy.generateShortcuts();
+  private static actions = AutoRdtTabsShortcutStrategy.generateActions();
+}

package/src/lib/strategies/rdt-tabs-shortcut-strategy.ts

@@ -0,0 +1,20 @@
+import { RdtShortcut } from '@ngrdt/shortcuts';
+import { RdtTabControllerDirective } from '../directives/rdt-tab-controller.directive';
+
+export abstract class RdtTabsShortcutStrategy {
+  /**
+   * Gets called onInit and whenever tabs are added/removed from Controller.
+   * @param ctrl Controller using this strategy.
+   * @returns List of shortcuts to register.
+   */
+  abstract updateShortcuts(ctrl: RdtTabControllerDirective): RdtShortcut[];
+  /**
+   * Gets called whenever hotkeys detects one of the registered shortcuts.
+   * @param shortcut Registered shortcut.
+   * @param ctrl Controller using this strategy.
+   */
+  abstract onShortcut(
+    shortcut: RdtShortcut,
+    ctrl: RdtTabControllerDirective
+  ): void;
+}

package/src/lib/strategies/static-rdt-tabs-shortcut-strategy.ts

@@ -0,0 +1,30 @@
+import { RdtShortcut } from '@ngrdt/shortcuts';
+import { RdtTabControllerDirective } from '../directives/rdt-tab-controller.directive';
+import { RdtTabsShortcutStrategy } from './rdt-tabs-shortcut-strategy';
+
+export interface StaticRdtTabsConfig {
+  shortcuts: Map<RdtShortcut, string>;
+}
+
+export class StaticRdtTabsShortcutStrategy implements RdtTabsShortcutStrategy {
+  constructor(private config: StaticRdtTabsConfig) {}
+
+  updateShortcuts(): RdtShortcut[] {
+    return Array.from(this.config.shortcuts.keys());
+  }
+
+  onShortcut(shortcut: RdtShortcut, ctrl: RdtTabControllerDirective): void {
+    const value = this.config.shortcuts.get(shortcut)!;
+    const tab = ctrl.getTabByValue(value);
+    if (tab) {
+      ctrl.activateTab(tab);
+      ctrl.activateTabContainer(tab.tabContainer);
+    } else {
+      console.warn(
+        `Registered shortcut has been detected,
+          but there is no tab with appropriate value.
+          Shortcut: ${shortcut}, value: ${value}`
+      );
+    }
+  }
+}

package/src/test-setup.ts

@@ -0,0 +1,8 @@
+// @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment
+globalThis.ngJest = {
+  testEnvironmentOptions: {
+    errorOnUnknownElements: true,
+    errorOnUnknownProperties: true,
+  },
+};
+import 'jest-preset-angular/setup-jest';

package/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json",
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

package/tsconfig.lib.json

@@ -0,0 +1,17 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/test-setup.ts",
+    "jest.config.ts",
+    "src/**/*.test.ts"
+  ],
+  "include": ["src/**/*.ts"]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,16 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "target": "es2016",
+    "types": ["jest", "node"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}