@ngrdt/tabs 0.0.1

package/README.md

@@ -0,0 +1,7 @@
+# @ngrdt/tabs
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test @ngrdt/tabs` to execute the unit tests.

package/eslint.config.js

@@ -0,0 +1,44 @@
+const nx = require('@nx/eslint-plugin');
+const baseConfig = require('../../eslint.config.js');
+
+module.exports = [
+  ...baseConfig,
+  {
+    files: ['**/*.json'],
+    rules: {
+      '@nx/dependency-checks': [
+        'error',
+        { ignoredFiles: ['{projectRoot}/eslint.config.{js,cjs,mjs}'] },
+      ],
+    },
+    languageOptions: { parser: require('jsonc-eslint-parser') },
+  },
+  ...nx.configs['flat/angular'],
+  ...nx.configs['flat/angular-template'],
+  {
+    files: ['**/*.ts'],
+    rules: {
+      '@angular-eslint/directive-selector': [
+        'error',
+        {
+          type: 'attribute',
+          prefix: 'lib',
+          style: 'camelCase',
+        },
+      ],
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          type: 'element',
+          prefix: 'lib',
+          style: 'kebab-case',
+        },
+      ],
+    },
+  },
+  {
+    files: ['**/*.html'],
+    // Override or add rules here
+    rules: {},
+  },
+];

package/jest.config.ts

@@ -0,0 +1,21 @@
+export default {
+  displayName: '@ngrdt/tabs',
+  preset: '../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  coverageDirectory: '../../coverage/@ngrdt/tabs',
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+};

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/@ngrdt/tabs",
+  "lib": {
+    "entryFile": "src/index.ts"
+  }
+}

package/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@ngrdt/tabs",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^18.2.0",
+    "@angular/core": "^18.2.0"
+  },
+  "sideEffects": false
+}

package/project.json

@@ -0,0 +1,36 @@
+{
+  "name": "@ngrdt/tabs",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "@ngrdt/tabs/src",
+  "prefix": "lib",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@nx/angular:package",
+      "outputs": ["{workspaceRoot}/dist/{projectRoot}"],
+      "options": {
+        "project": "@ngrdt/tabs/ng-package.json"
+      },
+      "configurations": {
+        "production": {
+          "tsConfig": "@ngrdt/tabs/tsconfig.lib.prod.json"
+        },
+        "development": {
+          "tsConfig": "@ngrdt/tabs/tsconfig.lib.json"
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "@ngrdt/tabs/jest.config.ts"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1,8 @@
+export * from './lib/components/tab-container/rdt-tab-container.component';
+export * from './lib/components/tab/rdt-tab.component';
+export * from './lib/directives/rdt-destroy-inactive.directive';
+export * from './lib/directives/rdt-tab-controller.directive';
+export * from './lib/rdt-tabs-models';
+export * from './lib/rdt-tabs.module';
+export * from './lib/strategies/rdt-tabs-shortcut-strategy';
+export * from './lib/strategies/static-rdt-tabs-shortcut-strategy';

package/src/lib/components/tab/rdt-tab.component.html

@@ -0,0 +1,3 @@
+<ng-template>
+  <ng-content></ng-content>
+</ng-template>

package/src/lib/components/tab/rdt-tab.component.ts

@@ -0,0 +1,158 @@
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  ContentChild,
+  DestroyRef,
+  inject,
+  Injector,
+  Input,
+  OnChanges,
+  OnInit,
+  SimpleChanges,
+  TemplateRef,
+  ViewChild,
+} from '@angular/core';
+import { RDT_GUARDED_COMPONENT, RdtContainerDirective } from '@ngrdt/core';
+import { Nullable } from '@ngrdt/utils';
+import { RdtDestroyInactiveDirective } from '../../directives/rdt-destroy-inactive.directive';
+import { RdtTabContainerState, RdtTabState } from '../../rdt-tabs-models';
+import { RdtTabContainerComponent } from '../tab-container/rdt-tab-container.component';
+
+@Component({
+  selector: 'rdt-tab',
+  templateUrl: './rdt-tab.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: RDT_GUARDED_COMPONENT,
+      useExisting: RdtTabComponent,
+    },
+  ],
+  hostDirectives: [RdtContainerDirective],
+})
+export class RdtTabComponent implements OnChanges, OnInit {
+  private readonly injector = inject(Injector);
+  readonly destroyRef = inject(DestroyRef);
+
+  private _contDir!: RdtContainerDirective;
+  get contDir() {
+    return this._contDir;
+  }
+
+  @Input()
+  get stateId() {
+    if (this._stateId === null) {
+      if (this.label !== '') {
+        this._stateId = this.label;
+      } else {
+        const index = this.tabContainer?.tabsList?.toArray().indexOf(this);
+        this._stateId = `tab-${index}`;
+      }
+    }
+    return this._stateId;
+  }
+  set stateId(value: string) {
+    this._stateId = value;
+  }
+  private _stateId: string = null as unknown as string;
+
+  @Input({ transform: booleanAttribute })
+  disabled = false;
+
+  @Input({ transform: booleanAttribute })
+  visible = true;
+
+  @Input({ required: true })
+  label!: string;
+
+  @Input({ transform: booleanAttribute })
+  formAutofocus = true;
+
+  @Input()
+  buttonClass: Nullable<string> = null;
+
+  @ViewChild(TemplateRef, { static: true })
+  private readonly implicitContent!: TemplateRef<any>;
+
+  @ContentChild(RdtDestroyInactiveDirective, {
+    read: TemplateRef,
+    static: true,
+  })
+  private readonly explicitContent!: TemplateRef<any>;
+
+  get templateRef() {
+    return this.explicitContent ?? this.implicitContent;
+  }
+
+  readonly tabContainer = inject(RdtTabContainerComponent);
+
+  //get forms() {
+  //  return this.getChildrenByClass(RdtBaseFormComponent);
+  //}
+
+  get childContainers() {
+    return this.contDir.getChildrenByClass(RdtTabContainerComponent);
+  }
+
+  ngOnInit() {
+    this._contDir = this.injector.get(RdtContainerDirective);
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (
+      'label' in changes ||
+      'value' in changes ||
+      'visible' in changes ||
+      'stateId' in changes
+    ) {
+      this.tabContainer.cd.markForCheck();
+    }
+  }
+
+  get isTopLevel() {
+    return this.tabContainer.isTopLevel;
+  }
+
+  getState(): RdtTabState {
+    return {
+      id: this.stateId,
+      containerStates: this.childContainers.map((cont) => cont.getState()),
+    };
+  }
+
+  applyState(state: RdtTabState) {
+    const states: (RdtTabContainerState | null)[] = [...state.containerStates];
+    const conts: (RdtTabContainerComponent | null)[] = this.childContainers;
+    const minLen = Math.min(states.length, conts.length);
+
+    for (let i = 0; i < minLen; i++) {
+      if (conts[i]!.stateId === states[i]!.id) {
+        conts[i]!.applyState(states[i]!);
+        conts[i] = states[i] = null;
+      }
+    }
+    conts.forEach((cont, contI) => {
+      if (!cont) {
+        return;
+      }
+      for (let offset = 0; offset < states.length; offset++) {
+        const prev = contI - offset;
+        const next = contI + offset;
+        if (prev > 0 && states[prev]?.id === cont.stateId) {
+          cont.applyState(states[prev]!);
+          states[prev] = null;
+          return;
+        } else if (next < states.length && states[next]?.id === cont.stateId) {
+          cont.applyState(states[next]!);
+          states[next] = null;
+          return;
+        }
+      }
+    });
+  }
+
+  focusForm() {
+    //TODO: getRdtAutofocusable(this.forms)?.rdtFocus();
+  }
+}

package/src/lib/components/tab-container/rdt-tab-container.component.html

@@ -0,0 +1,29 @@
+<div class="tab-header-panel" *ngIf="tabsList">
+  <button
+    *ngFor="let tab of tabsList"
+    #headerButton
+    class="px-2 py-1 tab-header-button"
+    (click)="activateTab(tab.stateId)"
+    [class.active]="value === tab.stateId"
+    [disabled]="tab.disabled"
+    [hidden]="!tab.visible"
+    role="tab"
+    [attr.aria-selected]="value === tab.stateId"
+    [attr.aria-controls]="'panel-' + tab.stateId"
+    [attr.tabindex]="value === tab.stateId ? 0 : -1"
+    [id]="'tab-' + tab.stateId"
+    [class]="tab.buttonClass"
+    type="button"
+  >
+    {{ tab.label }}
+  </button>
+</div>
+<div
+  class="tab-content"
+  role="tabpanel"
+  [id]="'panel-' + value"
+  [attr.aria-labelledby]="'tab-' + value"
+  #tabContent
+>
+  <ng-template [ngTemplateOutlet]="currentTemplate"></ng-template>
+</div>

package/src/lib/components/tab-container/rdt-tab-container.component.scss

@@ -0,0 +1,155 @@
+dp3-tab-container {
+  --tab-header-border-height: 2px;
+  --tab-header-border-color: #e2e8f0;
+  --tab-text-color: rgb(100, 116, 139);
+  --active-tab-text-color: var(--primary-blue);
+  --active-tab-border-color: var(--primary-blue);
+  --disabled-tab-text-color: #b1b9c5;
+  --tab-vertical-button-width: 200px;
+
+  display: block;
+  position: relative;
+
+  &.active > .tab-header-panel {
+    background-color: var(--hover-blue);
+  }
+
+  &.panel-vertical {
+    display: flex;
+
+    > .tab-header-panel {
+      position: absolute;
+      top: 0;
+      height: 100%;
+      width: var(--tab-vertical-button-width);
+      overflow-y: auto;
+
+      > button {
+        text-align: left;
+        width: 100%;
+        white-space: nowrap;
+        overflow-x: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+
+    > .tab-content {
+      width: calc(100% - var(--tab-vertical-button-width));
+    }
+  }
+
+  &.panel-right {
+    flex-direction: row-reverse;
+    > .tab-header-panel {
+      right: 0;
+    }
+  }
+
+  &.panel-left {
+    > .tab-header-panel {
+      left: 0;
+    }
+
+    > .tab-content {
+      margin-left: var(--tab-vertical-button-width);
+    }
+  }
+
+  &.panel-horizontal {
+    > .tab-header-panel {
+      width: 100%;
+      white-space: nowrap;
+      overflow-x: auto;
+    }
+  }
+
+  &.panel-bottom {
+    display: flex;
+    flex-direction: column-reverse;
+  }
+
+  .tab-header-panel {
+    position: relative;
+    background-color: rgba(var(--primary-blue-rgb), 0.045);
+
+    &::after {
+      content: '';
+      position: absolute;
+      width: 100%;
+      height: var(--tab-header-border-height);
+      background-color: var(--tab-header-border-color);
+      margin-top: var(--tab-header-border-height);
+      bottom: 0;
+      left: 0;
+      z-index: -1;
+    }
+  }
+
+  .dot {
+    position: absolute;
+    //min-width: 1.1rem;
+    width: 0.85rem; //zakomentovat
+    height: 0.85rem; //zakomentovat
+    padding: 0 0.1rem;
+    background-color: var(--primary-blue);
+    color: var(--white);
+    font-size: x-small;
+    border-radius: 100%;
+    top: 0.25rem;
+    right: 0rem;
+  }
+
+  .tab-header-button {
+    position: relative;
+    background: none;
+    font: inherit;
+    outline: inherit;
+    border: none;
+    color: var(--tab-text-color);
+    font-weight: 700;
+    font-size: 1.1rem;
+
+    &.active {
+      position: relative;
+      color: var(--active-tab-text-color);
+
+      &::after {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: var(--tab-header-border-height);
+        background-color: var(--active-tab-text-color);
+        margin-top: var(--tab-header-border-height);
+        bottom: 0;
+        left: 0;
+      }
+    }
+
+    &:disabled {
+      color: var(--disabled-tab-text-color);
+    }
+
+    &.padding-small {
+      padding-right: 1.1rem !important;
+    }
+
+    &.padding-large {
+      padding-right: 1.3rem !important;
+    }
+  }
+
+  > .tab-content {
+    min-width: 0;
+    width: 100%;
+    padding: 0.5rem;
+
+    &:has(> .dp3-tab-container) {
+      padding: 0;
+    }
+
+    > .dp3-tab-container {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}