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

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

@@ -1,191 +0,0 @@
-import {ENTER} from '@angular/cdk/keycodes';
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  Component,
-  ContentChild,
-  EventEmitter,
-  Input,
-  Output,
-  ViewChild,
-  ViewEncapsulation,
-  afterNextRender,
-} from '@angular/core';
-import {takeUntil} from 'rxjs/operators';
-import { MDChip, MDChipEvent } from './chip';
-import { MD_CHIP } from './tokens';
-import { MDChipAction } from './chip-action';
-import { MDChipEditInput } from './chip-edit-input';
-
-export interface MDChipEditedEvent extends MDChipEvent {
-  value: string;
-}
-
-
-@Component({
-  selector: 'md-chip-row, [md-chip-row], md-basic-chip-row, [md-basic-chip-row]',
-  templateUrl: 'chip-row.html',
-  styleUrl: 'chip.scss',
-  host: {
-    'class': 'md-mdc-chip md-mdc-chip-row mdc-evolution-chip',
-    '[class.md-mdc-chip-with-avatar]': 'leadingIcon',
-    '[class.md-mdc-chip-disabled]': 'disabled',
-    '[class.md-mdc-chip-editing]': '_isEditing',
-    '[class.md-mdc-chip-editable]': 'editable',
-    '[class.mdc-evolution-chip--disabled]': 'disabled',
-    '[class.mdc-evolution-chip--with-leading-action]': '_hasLeadingActionIcon()',
-    '[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-highlighted]': 'highlighted',
-    '[class.md-mdc-chip-with-trailing-icon]': '_hasTrailingIcon()',
-    '[id]': 'id',
-
-    '[attr.tabindex]': 'disabled ? null : -1',
-    '[attr.aria-label]': 'null',
-    '[attr.aria-description]': 'null',
-    '[attr.role]': 'role',
-    '(focus)': '_handleFocus()',
-    '(click)': 'this._hasInteractiveActions() ? _handleClick($event) : null',
-    '(dblclick)': '_handleDoubleclick($event)',
-  },
-  providers: [
-    {provide: MDChip, useExisting: MDChipRow},
-    {provide: MD_CHIP, useExisting: MDChipRow},
-  ],
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [MDChipAction, MDChipEditInput],
-})
-export class MDChipRow extends MDChip implements AfterViewInit {
-  protected override basicChipAttrName = 'md-basic-chip-row';
-
-  private _editStartPending = false;
-
-  @Input() editable: boolean = false;
-
-  @Output() readonly edited: EventEmitter<MDChipEditedEvent> =
-    new EventEmitter<MDChipEditedEvent>();
-
-
-  @ViewChild(MDChipEditInput) defaultEditInput?: MDChipEditInput;
-
-  @ContentChild(MDChipEditInput) contentEditInput?: MDChipEditInput;
-
-
-  private _alreadyFocused = false;
-
-  _isEditing = false;
-
-  constructor() {
-    super();
-
-    this.role = 'row';
-    this._onBlur.pipe(takeUntil(this.destroyed)).subscribe(() => {
-      if (this._isEditing && !this._editStartPending) {
-        this._onEditFinish();
-      }
-      this._alreadyFocused = false;
-    });
-  }
-
-  override ngAfterViewInit() {
-    super.ngAfterViewInit();
-
-    this._ngZone.runOutsideAngular(() => {
-      this._elementRef.nativeElement.addEventListener(
-        'mousedown',
-        () => (this._alreadyFocused = this._hasFocus()),
-      );
-    });
-  }
-
-  protected _hasLeadingActionIcon() {
-    return !this._isEditing && !!this.editIcon;
-  }
-
-  override _hasTrailingIcon() {
-    return !this._isEditing && super._hasTrailingIcon();
-  }
-
-  _handleFocus() {
-    if (!this._isEditing && !this.disabled) {
-      this.focus();
-    }
-  }
-
-  override _handleKeydown(event: KeyboardEvent): void {
-    if (event.keyCode === ENTER && !this.disabled) {
-      if (this._isEditing) {
-        event.preventDefault();
-        this._onEditFinish();
-      } else if (this.editable) {
-        this._startEditing(event);
-      }
-    } else if (this._isEditing) {
-      event.stopPropagation();
-    } else {
-      super._handleKeydown(event);
-    }
-  }
-
-  _handleClick(event: MouseEvent) {
-    if (!this.disabled && this.editable && !this._isEditing && this._alreadyFocused) {
-      event.preventDefault();
-      event.stopPropagation();
-      this._startEditing(event);
-    }
-  }
-
-  _handleDoubleclick(event: MouseEvent) {
-    if (!this.disabled && this.editable) {
-      this._startEditing(event);
-    }
-  }
-
-  override _edit(): void {
-    this._changeDetectorRef.markForCheck();
-    this._startEditing();
-  }
-
-  private _startEditing(event?: Event) {
-    if (
-      !this.primaryAction ||
-      (this.removeIcon &&
-        !!event &&
-        this._getSourceAction(event.target as Node) === this.removeIcon)
-    ) {
-      return;
-    }
-
-    const value = this.value;
-
-    this._isEditing = this._editStartPending = true;
-
-    afterNextRender(
-      () => {
-        this._getEditInput().initialize(value);
-
-        setTimeout(() => this._ngZone.run(() => (this._editStartPending = false)));
-      },
-      {injector: this._injector},
-    );
-  }
-
-  private _onEditFinish() {
-    this._isEditing = this._editStartPending = false;
-    this.edited.emit({chip: this, value: this._getEditInput().getValue()});
-
-    if (
-      this._document.activeElement === this._getEditInput().getNativeElement() ||
-      this._document.activeElement === this._document.body
-    ) {
-      this.primaryAction.focus();
-    }
-  }
-
-  private _getEditInput(): MDChipEditInput {
-    return this.contentEditInput || this.defaultEditInput!;
-  }
-}

package/src/lib/v2/chips/chip-set.scss

@@ -1,86 +0,0 @@
-.md-mdc-chip-set {
-    display: flex;
-
-    &:focus {
-        outline: none;
-    }
-
-    .mdc-evolution-chip-set__chips {
-        min-width: 100%;
-        margin-left: -8px;
-        margin-right: 0;
-    }
-
-    .mdc-evolution-chip {
-        margin: 4px 0 4px 8px;
-    }
-
-    [dir='rtl'] & {
-        .mdc-evolution-chip-set__chips {
-            margin-left: 0;
-            margin-right: -8px;
-        }
-
-        .mdc-evolution-chip {
-            margin-left: 0;
-            margin-right: 8px;
-        }
-    }
-}
-
-.mdc-evolution-chip-set__chips {
-    display: flex;
-    flex-flow: wrap;
-    min-width: 0;
-}
-
-.md-mdc-chip-set-stacked {
-    flex-direction: column;
-    align-items: flex-start;
-
-    .md-mdc-chip {
-        width: 100%;
-    }
-
-    .mdc-evolution-chip__graphic {
-        flex-grow: 0;
-    }
-
-    .mdc-evolution-chip__action--primary {
-        flex-basis: 100%;
-        justify-content: start;
-    }
-}
-
-input.md-mdc-chip-input {
-    flex: 1 0 150px;
-    margin-left: 8px;
-
-    [dir='rtl'] & {
-        margin-left: 0;
-        margin-right: 8px;
-    }
-
-    .md-mdc-form-field & {
-        &::placeholder {
-            opacity: 1;
-        }
-
-        &::-moz-placeholder {
-            opacity: 1;
-        }
-
-        &::-webkit-input-placeholder {
-            opacity: 1;
-        }
-
-        &:-ms-input-placeholder {
-            opacity: 1;
-        }
-    }
-
-    .md-mdc-chip-set + & {
-        margin-left: 0;
-        margin-right: 0;
-    }
-}

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

@@ -1,261 +0,0 @@
-import {FocusKeyManager} from '@angular/cdk/a11y';
-import {Directionality} from '@angular/cdk/bidi';
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ContentChildren,
-  ElementRef,
-  Input,
-  OnDestroy,
-  QueryList,
-  ViewEncapsulation,
-  booleanAttribute,
-  numberAttribute,
-  inject,
-} from '@angular/core';
-import {Observable, Subject, merge} from 'rxjs';
-import {startWith, switchMap, takeUntil} from 'rxjs/operators';
-import { MDChipAction, MDChipContent } from './chip-action';
-import { MDChip, MDChipEvent } from './chip';
-
-@Component({
-  selector: 'md-chip-set',
-  template: `
-    <div class="mdc-evolution-chip-set__chips" role="presentation">
-      <ng-content></ng-content>
-    </div>
-  `,
-  styleUrl: 'chip-set.scss',
-  host: {
-    'class': 'md-mdc-chip-set mdc-evolution-chip-set',
-    '(keydown)': '_handleKeydown($event)',
-    '[attr.role]': 'role',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MDChipSet implements AfterViewInit, OnDestroy {
-  protected _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
-  protected _changeDetectorRef = inject(ChangeDetectorRef);
-  private _dir = inject(Directionality, {optional: true});
-
-  private _lastDestroyedFocusedChipIndex: number | null = null;
-
-  protected _keyManager: FocusKeyManager<MDChipAction>;
-
-  protected _destroyed = new Subject<void>();
-
-  protected _defaultRole = 'presentation';
-
-  get chipFocusChanges(): Observable<MDChipEvent> {
-    return this._getChipStream(chip => chip._onFocus);
-  }
-
-  get chipDestroyedChanges(): Observable<MDChipEvent> {
-    return this._getChipStream(chip => chip.destroyed);
-  }
-
-  get chipRemovedChanges(): Observable<MDChipEvent> {
-    return this._getChipStream(chip => chip.removed);
-  }
-
-  @Input({transform: booleanAttribute})
-  get disabled(): boolean {
-    return this._disabled;
-  }
-  set disabled(value: boolean) {
-    this._disabled = value;
-    this._syncChipsState();
-  }
-  protected _disabled: boolean = false;
-
-  get empty(): boolean {
-    return !this._chips || this._chips.length === 0;
-  }
-
-  @Input()
-  get role(): string | null {
-    if (this._explicitRole) {
-      return this._explicitRole;
-    }
-
-    return this.empty ? null : this._defaultRole;
-  }
-
-  @Input({
-    transform: (value: unknown) => (value == null ? 0 : numberAttribute(value)),
-  })
-  tabIndex: number = 0;
-
-  set role(value: string | null) {
-    this._explicitRole = value;
-  }
-  private _explicitRole: string | null = null;
-
-  get focused(): boolean {
-    return this._hasFocusedChip();
-  }
-
-  @ContentChildren(MDChip, {
-    descendants: true,
-  })
-  _chips: QueryList<MDChip>;
-
-  _chipActions = new QueryList<MDChipAction>();
-
-  constructor() {}
-
-  ngAfterViewInit() {
-    this._setUpFocusManagement();
-    this._trackChipSetChanges();
-    this._trackDestroyedFocusedChip();
-  }
-
-  ngOnDestroy() {
-    this._keyManager?.destroy();
-    this._chipActions.destroy();
-    this._destroyed.next();
-    this._destroyed.complete();
-  }
-
-  protected _hasFocusedChip() {
-    return this._chips && this._chips.some(chip => chip._hasFocus());
-  }
-
-  protected _syncChipsState() {
-    this._chips?.forEach(chip => {
-      chip._chipListDisabled = this._disabled;
-      chip._changeDetectorRef.markForCheck();
-    });
-  }
-
-  /** Dummy method for subclasses to override. Base chip set cannot be focused. */
-  focus() {}
-
-  _handleKeydown(event: KeyboardEvent) {
-    if (this._originatesFromChip(event)) {
-      this._keyManager.onKeydown(event);
-    }
-  }
-
-  protected _isValidIndex(index: number): boolean {
-    return index >= 0 && index < this._chips.length;
-  }
-
-  protected _allowFocusEscape() {
-    const previous = this._elementRef.nativeElement.tabIndex;
-
-    if (previous !== -1) {
-      this._elementRef.nativeElement.tabIndex = -1;
-
-      setTimeout(() => (this._elementRef.nativeElement.tabIndex = previous));
-    }
-  }
-
-  protected _getChipStream<T, C extends MDChip = MDChip>(
-    mappingFunction: (chip: C) => Observable<T>,
-  ): Observable<T> {
-    return this._chips.changes.pipe(
-      startWith(null),
-      switchMap(() => merge(...(this._chips as QueryList<C>).map(mappingFunction))),
-    );
-  }
-
-  protected _originatesFromChip(event: Event): boolean {
-    let currentElement = event.target as HTMLElement | null;
-
-    while (currentElement && currentElement !== this._elementRef.nativeElement) {
-      if (currentElement.classList.contains('md-mdc-chip')) {
-        return true;
-      }
-      currentElement = currentElement.parentElement;
-    }
-    return false;
-  }
-
-  private _setUpFocusManagement() {
-    this._chips.changes.pipe(startWith(this._chips)).subscribe((chips: QueryList<MDChip>) => {
-      const actions: MDChipAction[] = [];
-      chips.forEach(chip => chip._getActions().forEach(action => actions.push(action)));
-      this._chipActions.reset(actions);
-      this._chipActions.notifyOnChanges();
-    });
-
-    this._keyManager = new FocusKeyManager(this._chipActions)
-      .withVerticalOrientation()
-      .withHorizontalOrientation(this._dir ? this._dir.value : 'ltr')
-      .withHomeAndEnd()
-      .skipPredicate(action => this._skipPredicate(action));
-
-    this.chipFocusChanges.pipe(takeUntil(this._destroyed)).subscribe(({chip}) => {
-      const action = chip._getSourceAction(document.activeElement as Element);
-
-      if (action) {
-        this._keyManager.updateActiveItem(action);
-      }
-    });
-
-    this._dir?.change
-      .pipe(takeUntil(this._destroyed))
-      .subscribe(direction => this._keyManager.withHorizontalOrientation(direction));
-  }
-
-  protected _skipPredicate(action: MDChipContent): boolean {
-    return action.disabled;
-  }
-
-  private _trackChipSetChanges() {
-    this._chips.changes.pipe(startWith(null), takeUntil(this._destroyed)).subscribe(() => {
-      if (this.disabled) {
-        Promise.resolve().then(() => this._syncChipsState());
-      }
-
-      this._redirectDestroyedChipFocus();
-    });
-  }
-
-  private _trackDestroyedFocusedChip() {
-    this.chipDestroyedChanges.pipe(takeUntil(this._destroyed)).subscribe((event: MDChipEvent) => {
-      const chipArray = this._chips.toArray();
-      const chipIndex = chipArray.indexOf(event.chip);
-      const hasFocus = event.chip._hasFocus();
-      const wasLastFocused =
-        event.chip._hadFocusOnRemove &&
-        this._keyManager.activeItem &&
-        event.chip._getActions().includes(this._keyManager.activeItem);
-
-      const shouldMoveFocus = hasFocus || wasLastFocused;
-
-      if (this._isValidIndex(chipIndex) && shouldMoveFocus) {
-        this._lastDestroyedFocusedChipIndex = chipIndex;
-      }
-    });
-  }
-
-  private _redirectDestroyedChipFocus() {
-    if (this._lastDestroyedFocusedChipIndex == null) {
-      return;
-    }
-
-    if (this._chips.length) {
-      const newIndex = Math.min(this._lastDestroyedFocusedChipIndex, this._chips.length - 1);
-      const chipToFocus = this._chips.toArray()[newIndex];
-
-      if (chipToFocus.disabled) {
-        if (this._chips.length === 1) {
-          this.focus();
-        } else {
-          this._keyManager.setPreviousItemActive();
-        }
-      } else {
-        chipToFocus.focus();
-      }
-    } else {
-      this.focus();
-    }
-
-    this._lastDestroyedFocusedChipIndex = null;
-  }
-}

package/src/lib/v2/chips/chip-text-control.ts

@@ -1,15 +0,0 @@
-export interface MDChipTextControl {
-  id: string;
-
-  placeholder: string;
-
-  focused: boolean;
-
-  empty: boolean;
-
-  focus(): void;
-
-  readonly describedByIds?: string[];
-
-  setDescribedByIds(ids: string[]): void;
-}

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

@@ -1,21 +0,0 @@
-<span class="md-mdc-chip-focus-overlay"></span>
-
-<span class="mdc-evolution-chip__cell mdc-evolution-chip__cell--primary">
-  <span mdChipContent>
-    @if (leadingIcon) {
-      <span class="mdc-evolution-chip__graphic md-mdc-chip-graphic">
-        <ng-content select="md-chip-avatar, [mdChipAvatar]"></ng-content>
-      </span>
-    }
-    <span class="mdc-evolution-chip__text-label md-mdc-chip-action-label">
-      <ng-content></ng-content>
-      <span class="md-mdc-chip-primary-focus-indicator md-focus-indicator"></span>
-    </span>
-  </span>
-</span>
-
-@if (_hasTrailingIcon()) {
-  <span class="mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing">
-    <ng-content select="md-chip-trailing-icon,[mdChipRemove],[mdChipTrailingIcon]"></ng-content>
-  </span>
-}