@natec/mef-dev-ui-kit 20.0.0-beta.1 → 20.0.1

package/src/lib/v2/tabs/tab-header.ts

@@ -1,91 +0,0 @@
-import {
-  AfterContentChecked,
-  AfterContentInit,
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  Component,
-  ContentChildren,
-  ElementRef,
-  Input,
-  OnDestroy,
-  QueryList,
-  ViewChild,
-  ViewEncapsulation,
-} from '@angular/core';
-import { MDTabLabelWrapper } from './tab-label-wrapper';
-import { InkBar } from './ink-bar';
-import { PaginatedTabHeader } from './paginated-tab-header';
-import { CdkObserveContent } from '@angular/cdk/observers';
-
-@Component({
-  selector: 'md-tab-header',
-  templateUrl: 'tab-header.html',
-  styleUrl: 'tab-header.scss',
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.Default,
-  host: {
-    class: 'mdc-tab-header',
-    '[class.mdc-tab-header-pagination-controls-enabled]': '_showPaginationControls',
-    '[class.mdc-tab-header-rtl]': "_getLayoutDirection() == 'rtl'",
-  },
-  imports: [CdkObserveContent],
-})
-/**
- * Scrollable (paginated) tab header that renders tab labels and coordinates
- * focus/keyboard navigation with {@link PaginatedTabHeader}. Positions the
- * active underline via {@link InkBar}.
- *
- * @remarks
- * - Projects {@link MDTabLabelWrapper} items as header labels.
- * - Exposes ARIA labeling inputs for accessibility.
- * - Pagination controls appear automatically when content overflows.
- */
-export class MDTabHeader
-  extends PaginatedTabHeader
-  implements AfterContentChecked, AfterContentInit, AfterViewInit, OnDestroy
-{
-  /** All direct tab label wrappers (no deep descendants). */
-  @ContentChildren(MDTabLabelWrapper, { descendants: false }) _items: QueryList<MDTabLabelWrapper>;
-
-  /** Container element around the scrolling tab list (used for clipping/scroll). */
-  @ViewChild('tabListContainer', { static: true }) _tabListContainer: ElementRef;
-
-  /** The scrollable tab list element. */
-  @ViewChild('tabList', { static: true }) _tabList: ElementRef;
-
-  /** Inner wrapper of the tab list (helps with measurements). */
-  @ViewChild('tabListInner', { static: true }) _tabListInner: ElementRef;
-
-  /** Next-page paginator button element (when overflow occurs). */
-  @ViewChild('nextPaginator') _nextPaginator: ElementRef<HTMLElement>;
-
-  /** Previous-page paginator button element (when overflow occurs). */
-  @ViewChild('previousPaginator') _previousPaginator: ElementRef<HTMLElement>;
-
-  /** Ink bar instance responsible for active-underline positioning. */
-  _inkBar: InkBar;
-
-  /** Accessible name for the tablist region (if no external labelling). */
-  @Input('aria-label') ariaLabel: string;
-
-  /** Id of element that labels this tablist for a11y. */
-  @Input('aria-labelledby') ariaLabelledby: string;
-
-  /**
-   * After content is available, initialize the ink bar with current items
-   * and let the base header wire scrolling/pagination behaviors.
-   */
-  override ngAfterContentInit() {
-    this._inkBar = new InkBar(this._items);
-    super.ngAfterContentInit();
-  }
-
-  /**
-   * Keyboard selection handler at the header level.
-   * Prevents default browser behavior; actual selection logic is handled
-   * by the parent container or the base class.
-   */
-  protected _itemSelected(event: KeyboardEvent) {
-    event.preventDefault();
-  }
-}

package/src/lib/v2/tabs/tab-label-wrapper.ts

@@ -1,49 +0,0 @@
-import { Directive, ElementRef, Input, booleanAttribute, inject } from '@angular/core';
-import { InkBarItem } from './ink-bar';
-
-@Directive({
-  selector: '[mdTabLabelWrapper]',
-  host: {
-    '[class.mdc-tab-disabled]': 'disabled',
-    '[attr.aria-disabled]': '!!disabled',
-  },
-})
-/**
- * Wrapper directive for a tab label element.
- * Extends {@link InkBarItem} so it can host and animate the ink bar underline.
- *
- * @remarks
- * - Provides focus/measurement APIs consumed by the tab header.
- * - Exposes a `disabled` input that affects CSS state and `aria-disabled`.
- *
- * @example
- * ```html
- * <div mdTabLabelWrapper [disabled]="isDisabled">Label</div>
- * ```
- */
-export class MDTabLabelWrapper extends InkBarItem {
-  /** Native element reference for focus & measurement. */
-  elementRef = inject(ElementRef);
-
-  /**
-   * Disables the tab label (affects CSS and sets `aria-disabled`).
-   * @default false
-   */
-  @Input({ transform: booleanAttribute })
-  disabled: boolean = false;
-
-  /** Programmatically moves focus to the label element. */
-  focus(): void {
-    this.elementRef.nativeElement.focus();
-  }
-
-  /** Horizontal offset used to position the ink bar. */
-  getOffsetLeft(): number {
-    return this.elementRef.nativeElement.offsetLeft;
-  }
-
-  /** Element width used to size the ink bar. */
-  getOffsetWidth(): number {
-    return this.elementRef.nativeElement.offsetWidth;
-  }
-}

package/src/lib/v2/tabs/tab-label.ts

@@ -1,34 +0,0 @@
-import { Directive, InjectionToken, inject } from '@angular/core';
-import { CdkPortal } from '@angular/cdk/portal';
-
-/**
- * Injection token bound to the current {@link MDTabLabel} instance.
- * Useful for querying/injecting the label from descendants.
- */
-export const MD_TAB_LABEL = new InjectionToken<MDTabLabel>('MDTabLabel');
-
-/** Token representing the closest parent Tab instance (provided by the Tab). */
-export const MD_TAB = new InjectionToken<any>('MD_TAB');
-
-@Directive({
-  selector: '[md-tab-label], [mdTabLabel]',
-  providers: [{ provide: MD_TAB_LABEL, useExisting: MDTabLabel }],
-})
-/**
- * Structural directive marking a template as a tab label.
- * Extends {@link CdkPortal} so the label content can be projected/attached where needed.
- *
- * @example
- * ```html
- * <ng-template mdTabLabel>
- *   <span>Users</span>
- * </ng-template>
- * ```
- */
-export class MDTabLabel extends CdkPortal {
-  /**
-   * Reference to the nearest parent tab instance if provided via {@link MD_TAB}.
-   * `undefined` when used outside of a tab context.
-   */
-  _closestTab = inject(MD_TAB, { optional: true });
-}

package/src/lib/v2/tabs/tab.html

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

package/src/lib/v2/tabs/tab.ts

@@ -1,155 +0,0 @@
-import {
-  booleanAttribute,
-  ChangeDetectionStrategy,
-  Component,
-  ContentChild,
-  inject,
-  InjectionToken,
-  Input,
-  SimpleChanges,
-  TemplateRef,
-  ViewChild,
-  ViewContainerRef,
-  ViewEncapsulation,
-} from '@angular/core';
-import { MDTabContent } from './tab-content';
-import { TemplatePortal } from '@angular/cdk/portal';
-import { _CdkPrivateStyleLoader } from '@angular/cdk/private';
-import { Subject } from 'rxjs';
-import { MDTabLabel } from './tab-label';
-
-/** Injection token for the closest parent tab-group (provided by the group). */
-export const TAB_GROUP = new InjectionToken<any>('TAB_GROUP');
-
-@Component({
-  selector: 'md-tab',
-  templateUrl: './tab.html',
-  changeDetection: ChangeDetectionStrategy.Default,
-  encapsulation: ViewEncapsulation.None,
-  standalone: true,
-})
-/**
- * Single tab container.
- *
- * @remarks
- * - Supports either **implicit content** (component template) or an **explicit content**
- *   template via `MDTabContent`.
- * - Label can be plain text (`label`) or a projected template (`MDTabLabel`).
- * - Coordinates with a parent tab group via {@link TAB_GROUP}.
- *
- * @example Text label
- * ```html
- * <md-tab label="Users"> Users content </md-tab>
- * ```
- *
- * @example Template label & explicit content
- * ```html
- * <md-tab>
- *   <ng-template mdTabLabel><span class="pill">Reports</span></ng-template>
- *   <ng-template md-tab-content> Reports body </ng-template>
- * </md-tab>
- * ```
- */
-export class MDTab {
-  /** View container used as the portal outlet context for tab content. */
-  private _viewContainerRef = inject(ViewContainerRef);
-
-  /** Optional reference to the closest parent tab group (for coordination). */
-  _closestTabGroup = inject(TAB_GROUP, { optional: true });
-
-  /**
-   * Disables this tab.
-   * Header becomes non-interactive and body is not focusable.
-   * @default false
-   */
-  @Input({ transform: booleanAttribute }) disabled: boolean = false;
-
-  /**
-   * Explicit tab body provided via `<ng-template md-tab-content>`.
-   * If absent, the component's own template (implicit content) is used.
-   */
-  @ContentChild(MDTabContent, { read: TemplateRef, static: true }) private _explicitContent: TemplateRef<any>;
-
-  /** Implicit content template captured from the component template. */
-  @ViewChild(TemplateRef, { static: true }) _implicitContent: TemplateRef<any>;
-
-  /** Plain text label for the tab header (alternative to template label). */
-  @Input('label') textLabel: string = '';
-
-  /** Accessible label for the tab header element. */
-  @Input('aria-label') ariaLabel: string;
-
-  /** Id of element that labels the tab header (for a11y). */
-  @Input('aria-labelledby') ariaLabelledby: string;
-
-  /** Additional CSS class(es) applied to the label host. */
-  @Input() labelClass: string | string[];
-
-  /** Additional CSS class(es) applied to the body/content host. */
-  @Input() bodyClass: string | string[];
-
-  /** Optional id for this tab; can be used for linking and testing. */
-  @Input() id: string | null = null;
-
-  /**
-   * Custom label template projected via `<ng-template md-tab-label>`.
-   * Setter ensures the template belongs to this tab instance.
-   */
-  @ContentChild(MDTabLabel)
-  get templateLabel(): MDTabLabel {
-    return this._templateLabel;
-  }
-  set templateLabel(value: MDTabLabel) {
-    this._setTemplateLabelInput(value);
-  }
-  private _templateLabel: MDTabLabel;
-
-  /** Lazily-created portal wrapping either explicit or implicit content. */
-  private _contentPortal: TemplatePortal | null = null;
-
-  /** Public getter for the content portal (used by parent tab group). */
-  get content(): TemplatePortal | null {
-    return this._contentPortal;
-  }
-
-  /** Notifies parent/consumers that an input affecting rendering has changed. */
-  readonly _stateChanges = new Subject<void>();
-
-  /** Position relative to the active tab (used for ink bar/animations). */
-  position: number | null = null;
-
-  /** Index from which this tab originated during a transition. */
-  origin: number | null = null;
-
-  /** Whether this tab is currently the active/selected one. */
-  isActive = false;
-
-  constructor() {}
-
-  /** Emits `stateChanges` when key inputs mutate. */
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes.hasOwnProperty('textLabel') || changes.hasOwnProperty('disabled')) {
-      this._stateChanges.next();
-    }
-  }
-
-  /** Completes internal subject to avoid leaks. */
-  ngOnDestroy(): void {
-    this._stateChanges.complete();
-  }
-
-  /** Initializes the content portal using explicit or implicit template. */
-  ngOnInit(): void {
-    this._contentPortal = new TemplatePortal(
-      this._explicitContent || this._implicitContent,
-      this._viewContainerRef
-    );
-  }
-
-  /** Accepts a label template only if it belongs to this `MDTab` instance. */
-  private _setTemplateLabelInput(value: MDTabLabel | undefined) {
-    if (value && value._closestTab === this) {
-      this._templateLabel = value;
-    }
-  }
-}

package/src/lib/v2/tabs/tabs.module.ts

@@ -1,12 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { MDTabContent } from './tab-content';
-import { MDTabLabel } from './tab-label';
-import { MDTab } from './tab';
-import { MDTabGroup } from './tab-group';
-
-@NgModule({
-    imports: [CommonModule, MDTabContent, MDTabLabel, MDTab, MDTabGroup],
-    exports: [MDTabContent, MDTabLabel, MDTab, MDTabGroup],
-})
-export class MDTabsModule {}

package/src/public-api.ts

@@ -1,33 +0,0 @@
-export * from './lib/markup-kit/collapse/index';
-export * from './lib/markup-kit/utils/filtered-field/index';
-export * from './lib/markup-kit/utils/help-block/index';
-export * from './lib/markup-kit/utils/datepicker/index';
-export * from './lib/markup-kit/card/index';
-export * from './lib/markup-kit/modals/index';
-export * from './lib/markup-kit/page-layouts/index';
-export * from './lib/markup-kit/executors';
-
-export * from './lib/markup-kit/slider/index';
-
-// pg modules
-export * from './lib/pg-components/card/index';
-export * from './lib/pg-components/progress/index';
-export * from './lib/pg-components/select/index';
-export * from './lib/pg-components/spec-flow-test/index';
-export * from './lib/pg-components/switch/index';
-export * from './lib/pg-components/tabs/index';
-
-
-// v2
-
-export * from './lib/v2/collapse/index';
-export * from './lib/v2/card/index';
-export * from './lib/v2/modals/index';
-export * from './lib/v2/executors';
-
-export * from './lib/v2/select/index';
-export * from './lib/v2/switch/index';
-export * from './lib/v2/tabs/index';
-
-
-

package/tsconfig.doc.json

@@ -1,4 +0,0 @@
-{
-    "include": ["src/**/*.ts"],
-    "exclude": ["src/test.ts", "src/**/*.spec.ts", "src/app/file-to-exclude.ts", "src/lib/pg-components/card"]
-  }

package/tsconfig.lib.json

@@ -1,19 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/lib",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "sourceMap": true,
-    "moduleResolution": "node",
-    "skipLibCheck": true
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  },
-  "exclude": [
-    "src/test.ts",
-    "**/*.spec.ts"
-  ]
-}

package/tsconfig.lib.prod.json

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

package/tsconfig.spec.json

@@ -1,17 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
-  },
-  "files": [
-    "src/test.ts"
-  ],
-  "include": [
-    "**/*.spec.ts",
-    "**/*.d.ts"
-  ]
-}