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

package/src/lib/v2/chips/chip.ts

@@ -1,281 +0,0 @@
-import { FocusMonitor, _IdGenerator } from '@angular/cdk/a11y';
-import { BACKSPACE, DELETE } from '@angular/cdk/keycodes';
-import { _CdkPrivateStyleLoader, _VisuallyHiddenLoader } from '@angular/cdk/private';
-
-import {
-    AfterContentInit,
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    ContentChild,
-    ContentChildren,
-    DoCheck,
-    ElementRef,
-    EventEmitter,
-    HOST_TAG_NAME,
-    Injector,
-    Input,
-    NgZone,
-    OnDestroy,
-    OnInit,
-    Output,
-    QueryList,
-    ViewChild,
-    ViewEncapsulation,
-    booleanAttribute,
-    inject,
-    DOCUMENT,
-} from '@angular/core';
-import { Subject, Subscription, merge } from 'rxjs';
-import { MD_CHIP, MD_CHIP_AVATAR, MD_CHIP_EDIT, MD_CHIP_REMOVE, MD_CHIP_TRAILING_ICON } from './tokens';
-import { MDChipAvatar, MDChipEdit, MDChipRemove, MDChipTrailingIcon } from './chip-icons';
-import { MDChipAction, MDChipContent } from './chip-action';
-
-export interface MDChipEvent {
-    chip: MDChip;
-}
-
-@Component({
-    selector: 'md-basic-chip, [md-basic-chip], md-chip, [md-chip]',
-    exportAs: 'mdChip',
-    templateUrl: 'chip.html',
-    styleUrl: 'chip.scss',
-    host: {
-        class: 'md-mdc-chip',
-        '[class]': '"md-" + (color || "primary")',
-        '[class.mdc-evolution-chip]': '!_isBasicChip',
-        '[class.mdc-evolution-chip--disabled]': 'disabled',
-        '[class.mdc-evolution-chip--with-trailing-action]': '_hasTrailingIcon()',
-        '[class.mdc-evolution-chip--with-primary-graphic]': 'leadingIcon',
-        '[class.mdc-evolution-chip--with-primary-icon]': 'leadingIcon',
-        '[class.mdc-evolution-chip--with-avatar]': 'leadingIcon',
-        '[class.md-mdc-chip-with-avatar]': 'leadingIcon',
-        '[class.md-mdc-chip-highlighted]': 'highlighted',
-        '[class.md-mdc-chip-disabled]': 'disabled',
-        '[class.md-mdc-basic-chip]': '_isBasicChip',
-        '[class.md-mdc-standard-chip]': '!_isBasicChip',
-        '[class.md-mdc-chip-with-trailing-icon]': '_hasTrailingIcon()',
-        '[class._md-animation-noopable]': '_animationsDisabled',
-        '[id]': 'id',
-        '[attr.role]': 'role',
-        '[attr.aria-label]': 'ariaLabel',
-        '(keydown)': '_handleKeydown($event)',
-    },
-    encapsulation: ViewEncapsulation.None,
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    providers: [{ provide: MD_CHIP, useExisting: MDChip }],
-    imports: [MDChipContent],
-})
-export class MDChip implements OnInit, AfterViewInit, AfterContentInit, OnDestroy {
-    _changeDetectorRef = inject(ChangeDetectorRef);
-    _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
-    private readonly _tagName = inject(HOST_TAG_NAME);
-    protected _ngZone = inject(NgZone);
-    private _focusMonitor = inject(FocusMonitor);
-
-    protected _document = inject(DOCUMENT);
-
-    readonly _onFocus = new Subject<MDChipEvent>();
-
-    readonly _onBlur = new Subject<MDChipEvent>();
-
-    _isBasicChip: boolean;
-
-    @Input() role: string | null = null;
-
-    private _hasFocusInternal = false;
-
-    private _pendingFocus: boolean;
-
-    private _actionChanges: Subscription | undefined;
-
-    _animationsDisabled = false;
-
-    @ContentChildren(MD_CHIP_AVATAR, { descendants: true })
-    protected _allLeadingIcons: QueryList<MDChipAvatar>;
-
-    @ContentChildren(MD_CHIP_TRAILING_ICON, { descendants: true })
-    protected _allTrailingIcons: QueryList<MDChipTrailingIcon>;
-
-    @ContentChildren(MD_CHIP_EDIT, { descendants: true })
-    protected _allEditIcons: QueryList<MDChipEdit>;
-
-    @ContentChildren(MD_CHIP_REMOVE, { descendants: true })
-    protected _allRemoveIcons: QueryList<MDChipRemove>;
-
-    _hasFocus() {
-        return this._hasFocusInternal;
-    }
-
-    @Input() id: string = inject(_IdGenerator).getId('md-mdc-chip-');
-
-    @Input('aria-label') ariaLabel: string | null = null;
-
-    @Input('aria-description') ariaDescription: string | null = null;
-
-    _chipListDisabled: boolean = false;
-
-    _hadFocusOnRemove = false;
-
-    private _textElement!: HTMLElement;
-
-    @Input()
-    get value(): any {
-        return this._value !== undefined ? this._value : this._textElement.textContent!.trim();
-    }
-    set value(value: any) {
-        this._value = value;
-    }
-    protected _value: any;
-
-    @Input({ transform: booleanAttribute })
-    removable: boolean = true;
-
-    @Input({ transform: booleanAttribute })
-    highlighted: boolean = false;
-
-    @Input({ transform: booleanAttribute })
-    get disabled(): boolean {
-        return this._disabled || this._chipListDisabled;
-    }
-    set disabled(value: boolean) {
-        this._disabled = value;
-    }
-    private _disabled = false;
-
-    @Output() readonly removed: EventEmitter<MDChipEvent> = new EventEmitter<MDChipEvent>();
-
-    @Output() readonly destroyed: EventEmitter<MDChipEvent> = new EventEmitter<MDChipEvent>();
-
-    protected basicChipAttrName = 'md-basic-chip';
-
-    @ContentChild(MD_CHIP_AVATAR) leadingIcon: MDChipAvatar;
-
-    @ContentChild(MD_CHIP_EDIT) editIcon: MDChipEdit;
-
-    @ContentChild(MD_CHIP_TRAILING_ICON) trailingIcon: MDChipTrailingIcon;
-
-    @ContentChild(MD_CHIP_REMOVE) removeIcon: MDChipRemove;
-
-    @ViewChild(MDChipAction) primaryAction: MDChipAction;
-
-    protected _injector = inject(Injector);
-
-    constructor() {
-        this._monitorFocus();
-    }
-
-    ngOnInit() {
-        this._isBasicChip =
-            this._elementRef.nativeElement.hasAttribute(this.basicChipAttrName) ||
-            this._tagName.toLowerCase() === this.basicChipAttrName;
-    }
-
-    ngAfterViewInit() {
-        this._textElement = this._elementRef.nativeElement.querySelector('.md-mdc-chip-action-label')!;
-
-        if (this._pendingFocus) {
-            this._pendingFocus = false;
-            this.focus();
-        }
-    }
-
-    ngAfterContentInit(): void {
-        this._actionChanges = merge(
-            this._allLeadingIcons.changes,
-            this._allTrailingIcons.changes,
-            this._allEditIcons.changes,
-            this._allRemoveIcons.changes
-        ).subscribe(() => this._changeDetectorRef.markForCheck());
-    }
-
-    ngOnDestroy() {
-        this._focusMonitor.stopMonitoring(this._elementRef);
-        this._actionChanges?.unsubscribe();
-        this.destroyed.emit({ chip: this });
-        this.destroyed.complete();
-    }
-
-    remove(): void {
-        if (this.removable) {
-            this._hadFocusOnRemove = this._hasFocus();
-            this.removed.emit({ chip: this });
-        }
-    }
-
-    _hasTrailingIcon() {
-        return !!(this.trailingIcon || this.removeIcon);
-    }
-
-    _handleKeydown(event: KeyboardEvent) {
-        if ((event.keyCode === BACKSPACE && !event.repeat) || event.keyCode === DELETE) {
-            event.preventDefault();
-            this.remove();
-        }
-    }
-
-    focus(): void {
-        if (!this.disabled) {
-            if (this.primaryAction) {
-                this.primaryAction.focus();
-            } else {
-                this._pendingFocus = true;
-            }
-        }
-    }
-
-    _getSourceAction(target: Node): MDChipAction | undefined {
-        return this._getActions().find((action) => {
-            const element = action._elementRef.nativeElement;
-            return element === target || element.contains(target);
-        });
-    }
-
-    _getActions(): MDChipAction[] {
-        const result: MDChipAction[] = [];
-
-        if (this.editIcon) {
-            result.push(this.editIcon);
-        }
-
-        if (this.primaryAction) {
-            result.push(this.primaryAction);
-        }
-
-        if (this.removeIcon) {
-            result.push(this.removeIcon);
-        }
-
-        return result;
-    }
-
-    _handlePrimaryActionInteraction() {
-        // Empty here, but is overwritten in child classes.
-    }
-
-    _hasInteractiveActions(): boolean {
-        return this._getActions().length > 0;
-    }
-
-    _edit(event: Event) {
-        // Empty here, but is overwritten in child classes.
-    }
-
-    private _monitorFocus() {
-        this._focusMonitor.monitor(this._elementRef, true).subscribe((origin) => {
-            const hasFocus = origin !== null;
-
-            if (hasFocus !== this._hasFocusInternal) {
-                this._hasFocusInternal = hasFocus;
-
-                if (hasFocus) {
-                    this._onFocus.next({ chip: this });
-                } else {
-                    this._changeDetectorRef.markForCheck();
-                    setTimeout(() => this._ngZone.run(() => this._onBlur.next({ chip: this })));
-                }
-            }
-        });
-    }
-}

package/src/lib/v2/chips/chips-module.ts

@@ -1,44 +0,0 @@
-import { BidiModule } from "@angular/cdk/bidi";
-import { MDChip } from "./chip";
-import { MDChipAction } from "./chip-action";
-import { MDChipEditInput } from "./chip-edit-input";
-import { ErrorStateMatcher, MDChipGrid } from "./chip-grid";
-import { MDChipAvatar, MDChipEdit, MDChipRemove, MDChipTrailingIcon } from "./chip-icons";
-import { MDChipInput } from "./chip-input";
-import { MDChipListbox } from "./chip-listbox";
-import { MDChipOption } from "./chip-option";
-import { MDChipRow } from "./chip-row";
-import { MDChipSet } from "./chip-set";
-import { MD_CHIPS_DEFAULT_OPTIONS, MDChipsDefaultOptions } from "./tokens";
-import { ENTER } from "@angular/cdk/keycodes";
-import { NgModule } from "@angular/core";
-
-const CHIP_DECLARATIONS = [
-  MDChip,
-  MDChipAvatar,
-  MDChipEdit,
-  MDChipEditInput,
-  MDChipGrid,
-  MDChipInput,
-  MDChipListbox,
-  MDChipOption,
-  MDChipRemove,
-  MDChipRow,
-  MDChipSet,
-  MDChipTrailingIcon,
-];
-
-@NgModule({
-  imports: [MDChipAction, CHIP_DECLARATIONS],
-  exports: [BidiModule, CHIP_DECLARATIONS],
-  providers: [
-    ErrorStateMatcher,
-    {
-      provide: MD_CHIPS_DEFAULT_OPTIONS,
-      useValue: {
-        separatorKeyCodes: [ENTER],
-      } as MDChipsDefaultOptions,
-    },
-  ],
-})
-export class MDChipsModule {}

package/src/lib/v2/chips/index.ts

@@ -1,12 +0,0 @@
-export * from './chip';
-export * from './chip-option';
-export * from './chip-row';
-export * from './chip-set';
-export * from './chip-listbox';
-export * from './chip-grid';
-export * from './chips-module';
-export * from './chip-input';
-export * from './tokens';
-export * from './chip-icons';
-export * from './chip-text-control';
-export * from './chip-edit-input';

package/src/lib/v2/chips/tokens.ts

@@ -1,29 +0,0 @@
-import {ENTER, ModifierKey} from '@angular/cdk/keycodes';
-import {InjectionToken} from '@angular/core';
-
-export interface SeparatorKey {
-  keyCode: number;
-  modifiers: readonly ModifierKey[];
-}
-
-export interface MDChipsDefaultOptions {
-  separatorKeyCodes: readonly (number | SeparatorKey)[] | ReadonlySet<number | SeparatorKey>;
-  hideSingleSelectionIndicator?: boolean;
-  inputDisabledInteractive?: boolean;
-}
-
-export const MD_CHIPS_DEFAULT_OPTIONS = new InjectionToken<MDChipsDefaultOptions>(
-  'md-chips-default-options',
-  {
-    providedIn: 'root',
-    factory: () => ({
-      separatorKeyCodes: [ENTER],
-    }),
-  },
-);
-
-export const MD_CHIP_AVATAR = new InjectionToken('MDChipAvatar');
-export const MD_CHIP_TRAILING_ICON = new InjectionToken('MDChipTrailingIcon');
-export const MD_CHIP_EDIT = new InjectionToken('MDChipEdit');
-export const MD_CHIP_REMOVE = new InjectionToken('MDChipRemove');
-export const MD_CHIP = new InjectionToken('MDChip');

package/src/lib/v2/collapse/accordion-base.ts

@@ -1,20 +0,0 @@
-import {InjectionToken} from '@angular/core';
-import {CdkAccordion} from '@angular/cdk/accordion';
-
-export type AccordionDisplayMode = 'default' | 'flat';
-
-export type AccordionTogglePosition = 'before' | 'after';
-
-export interface AccordionBase extends CdkAccordion {
-  hideToggle: boolean;
-
-  displayMode: AccordionDisplayMode;
-
-  togglePosition: AccordionTogglePosition;
-
-  _handleHeaderKeydown: (event: KeyboardEvent) => void;
-
-  _handleHeaderFocus: (header: any) => void;
-}
-
-export const ACCORDION = new InjectionToken<AccordionBase>('ACCORDION');

package/src/lib/v2/collapse/accordion.ts

@@ -1,92 +0,0 @@
-import {
-  Directive,
-  Input,
-  ContentChildren,
-  QueryList,
-  AfterContentInit,
-  OnDestroy,
-  booleanAttribute,
-} from '@angular/core';
-import { CdkAccordion } from '@angular/cdk/accordion';
-import { FocusKeyManager } from '@angular/cdk/a11y';
-import { startWith } from 'rxjs/operators';
-import { ACCORDION, AccordionBase, AccordionDisplayMode, AccordionTogglePosition } from './accordion-base';
-import { MDExpansionPanelHeader } from './expansion-panel-header';
-
-/**
- * Accordion container that coordinates multiple expansion panels.
- * - Provides the ACCORDION token for children to read common settings.
- * - Manages roving focus across panel headers with FocusKeyManager.
- * - Filters projected headers so only this accordion’s own headers are managed.
- */
-@Directive({
-  selector: 'md-accordion',
-  exportAs: 'mdAccordion',
-  providers: [
-    {
-      provide: ACCORDION,
-      useExisting: Accordion,
-    },
-  ],
-  host: {
-    class: 'accordion',
-    // Visual hint when multi-selection is enabled (inherited from CdkAccordion).
-    '[class.accordion-multi]': 'this.multi',
-  },
-})
-export class Accordion extends CdkAccordion implements AccordionBase, AfterContentInit, OnDestroy {
-  /** Keyboard manager for roving focus (Home/End/Arrow navigation). */
-  private _keyManager: FocusKeyManager<MDExpansionPanelHeader>;
-
-  /**
-   * Local QueryList containing only headers owned by this accordion.
-   * We derive it from `_headers` because projected content could include
-   * nested accordions or headers belonging to another parent.
-   */
-  private _ownHeaders = new QueryList<MDExpansionPanelHeader>();
-
-  /** All descendant headers from projected content (may include foreign ones). */
-  @ContentChildren(MDExpansionPanelHeader, { descendants: true })
-  _headers: QueryList<MDExpansionPanelHeader>;
-
-  /** Hides the toggle arrow/indicator on all child panels. */
-  @Input({ transform: booleanAttribute })
-  hideToggle: boolean = false;
-
-  /** Display mode that affects spacing/styling of panels. */
-  @Input() displayMode: AccordionDisplayMode = 'default';
-
-  /** Placement of the toggle indicator relative to header content. */
-  @Input() togglePosition: AccordionTogglePosition = 'after';
-
-  /** After content init, filter and wire focus management. */
-  ngAfterContentInit() {
-    // Keep `_ownHeaders` in sync with only the headers whose `panel.accordion === this`.
-    this._headers.changes
-      .pipe(startWith(this._headers))
-      .subscribe((headers: QueryList<MDExpansionPanelHeader>) => {
-        this._ownHeaders.reset(headers.filter(header => header.panel.accordion === this));
-        this._ownHeaders.notifyOnChanges();
-      });
-
-    // Enable wrap-around and Home/End navigation across owned headers.
-    this._keyManager = new FocusKeyManager(this._ownHeaders).withWrap().withHomeAndEnd();
-  }
-
-  /** Delegate keydown from a header to the key manager (arrow/home/end handling). */
-  _handleHeaderKeydown(event: KeyboardEvent) {
-    this._keyManager.onKeydown(event);
-  }
-
-  /** Update the active item when a particular header gains focus. */
-  _handleHeaderFocus(header: MDExpansionPanelHeader) {
-    this._keyManager.updateActiveItem(header);
-  }
-
-  /** Tear down key manager and QueryList on destroy; call base cleanup too. */
-  override ngOnDestroy() {
-    super.ngOnDestroy();
-    this._keyManager?.destroy();
-    this._ownHeaders.destroy();
-  }
-}

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

@@ -1,22 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { Accordion } from './accordion';
-import { MDExpansionPanel, ExpansionPanelActionRow } from './expansion-panel';
-import { ExpansionPanelDescription, MDExpansionPanelHeader, ExpansionPanelTitle } from './expansion-panel-header';
-import { MDExpansionPanelContent } from './expansion-panel-content';
-
-export const components = [
-    Accordion,
-    MDExpansionPanel,
-    ExpansionPanelActionRow,
-    MDExpansionPanelHeader,
-    ExpansionPanelTitle,
-    ExpansionPanelDescription,
-    MDExpansionPanelContent,
-];
-
-@NgModule({
-    exports: [...components],
-    imports: [CommonModule, ...components],
-})
-export class MDCollapseModule {}

package/src/lib/v2/collapse/expansion-panel-base.ts

@@ -1,10 +0,0 @@
-import {InjectionToken} from '@angular/core';
-import {CdkAccordionItem} from '@angular/cdk/accordion';
-
-
-export interface ExpansionPanelBase extends CdkAccordionItem {
-  hideToggle: boolean;
-}
-
-
-export const MD_EXPANSION_PANEL = new InjectionToken<ExpansionPanelBase>('MD_EXPANSION_PANEL');

package/src/lib/v2/collapse/expansion-panel-content.ts

@@ -1,12 +0,0 @@
-import {Directive, TemplateRef, inject} from '@angular/core';
-import {MD_EXPANSION_PANEL, ExpansionPanelBase} from './expansion-panel-base';
-
-@Directive({
-  selector: 'ng-template[mdExpansionPanelContent]',
-})
-export class MDExpansionPanelContent {
-  _template = inject<TemplateRef<any>>(TemplateRef);
-  _expansionPanel = inject<ExpansionPanelBase>(MD_EXPANSION_PANEL, {optional: true});
-
-  constructor() {}
-}

package/src/lib/v2/collapse/expansion-panel-header.html

@@ -1,17 +0,0 @@
-<span class="content" [class.content-hide-toggle]="!_showToggle()">
-  <ng-content select="md-panel-title"></ng-content>
-  <ng-content select="md-panel-description"></ng-content>
-  <ng-content></ng-content>
-</span>
-
-@if (_showToggle()) {
-  <span class="expansion-indicator">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 -960 960 960"
-      aria-hidden="true"
-      focusable="false">
-      <path d="M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z"/>
-    </svg>
-  </span>
-}