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

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

@@ -1,412 +0,0 @@
-import { _IdGenerator } from '@angular/cdk/a11y';
-import { DOWN_ARROW, hasModifierKey, TAB, UP_ARROW } from '@angular/cdk/keycodes';
-import {
-    AfterContentInit,
-    AfterViewInit,
-    booleanAttribute,
-    ChangeDetectionStrategy,
-    Component,
-    ContentChildren,
-    DoCheck,
-    EventEmitter,
-    Input,
-    OnDestroy,
-    Output,
-    QueryList,
-    ViewEncapsulation,
-    inject,
-    Injectable,
-} from '@angular/core';
-import { AbstractControl, ControlValueAccessor, FormGroupDirective, NgControl, NgForm, Validators } from '@angular/forms';
-import { MDChipSet } from './chip-set';
-import { MDChipTextControl } from './chip-text-control';
-import { merge, Observable, Subject, takeUntil } from 'rxjs';
-import { MDChipRow } from './chip-row';
-import { MDChipEvent } from './chip';
-
-export class MDChipGridChange {
-    constructor(public source: MDChipGrid, public value: any) {}
-}
-
-
-@Component({
-    selector: 'md-chip-grid',
-    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 md-mdc-chip-grid mdc-evolution-chip-set',
-        '[attr.role]': 'role',
-        '[attr.tabindex]': '(disabled || (_chips && _chips.length === 0)) ? -1 : tabIndex',
-        '[attr.aria-disabled]': 'disabled.toString()',
-        '[attr.aria-invalid]': 'errorState',
-        '[class.md-mdc-chip-list-disabled]': 'disabled',
-        '[class.md-mdc-chip-list-invalid]': 'errorState',
-        '[class.md-mdc-chip-list-required]': 'required',
-        '(focus)': 'focus()',
-        '(blur)': '_blur()',
-    },
-    encapsulation: ViewEncapsulation.None,
-    changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MDChipGrid
-    extends MDChipSet
-    implements AfterContentInit, AfterViewInit, ControlValueAccessor, DoCheck, OnDestroy
-{
-    ngControl = inject(NgControl, { optional: true, self: true })!;
-
-    readonly controlType: string = 'md-chip-grid';
-
-    protected _chipInput?: MDChipTextControl;
-
-    protected override _defaultRole = 'grid';
-    private _errorStateTracker: _ErrorStateTracker;
-    private _uid = inject(_IdGenerator).getId('md-chip-grid-');
-
-
-    private _ariaDescribedbyIds: string[] = [];
-
-    _onTouched = () => {};
-
-
-    _onChange: (value: any) => void = () => {};
-
-
-    @Input({ transform: booleanAttribute })
-    override get disabled(): boolean {
-        return this.ngControl ? !!this.ngControl.disabled : this._disabled;
-    }
-    override set disabled(value: boolean) {
-        this._disabled = value;
-        this._syncChipsState();
-        this.stateChanges.next();
-    }
-
-
-    get id(): string {
-        return this._chipInput ? this._chipInput.id : this._uid;
-    }
-
-
-    override get empty(): boolean {
-        return (!this._chipInput || this._chipInput.empty) && (!this._chips || this._chips.length === 0);
-    }
-
-
-    @Input()
-    get placeholder(): string {
-        return this._chipInput ? this._chipInput.placeholder : this._placeholder;
-    }
-    set placeholder(value: string) {
-        this._placeholder = value;
-        this.stateChanges.next();
-    }
-    protected _placeholder: string;
-
-
-    override get focused(): boolean {
-        return this._chipInput?.focused || this._hasFocusedChip();
-    }
-
-    @Input({ transform: booleanAttribute })
-    get required(): boolean {
-        return this._required ?? this.ngControl?.control?.hasValidator(Validators.required) ?? false;
-    }
-    set required(value: boolean) {
-        this._required = value;
-        this.stateChanges.next();
-    }
-    protected _required: boolean | undefined;
-
-    get shouldLabelFloat(): boolean {
-        return !this.empty || this.focused;
-    }
-
-
-    @Input()
-    get value(): any {
-        return this._value;
-    }
-    set value(value: any) {
-        this._value = value;
-    }
-    protected _value: any[] = [];
-
-    @Input()
-    get errorStateMatcher() {
-        return this._errorStateTracker.matcher;
-    }
-    set errorStateMatcher(value: ErrorStateMatcher) {
-        this._errorStateTracker.matcher = value;
-    }
-
-
-    get chipBlurChanges(): Observable<MDChipEvent> {
-        return this._getChipStream((chip) => chip._onBlur);
-    }
-
-
-    @Output() readonly change: EventEmitter<MDChipGridChange> = new EventEmitter<MDChipGridChange>();
-
-
-    @Output() readonly valueChange: EventEmitter<any> = new EventEmitter<any>();
-
-    @ContentChildren(MDChipRow, {
-        descendants: true,
-    })
-    override _chips: QueryList<MDChipRow> = undefined!;
-
-
-    readonly stateChanges = new Subject<void>();
-
-    get errorState() {
-        return this._errorStateTracker.errorState;
-    }
-    set errorState(value: boolean) {
-        this._errorStateTracker.errorState = value;
-    }
-
-    constructor(...args: unknown[]);
-
-    constructor() {
-        super();
-
-        const parentForm = inject(NgForm, { optional: true });
-        const parentFormGroup = inject(FormGroupDirective, { optional: true });
-        const defaultErrorStateMatcher = inject(ErrorStateMatcher);
-
-        if (this.ngControl) {
-            this.ngControl.valueAccessor = this;
-        }
-
-        this._errorStateTracker = new _ErrorStateTracker(
-            defaultErrorStateMatcher,
-            this.ngControl,
-            parentFormGroup,
-            parentForm,
-            this.stateChanges
-        );
-    }
-
-    ngAfterContentInit() {
-        this.chipBlurChanges.pipe(takeUntil(this._destroyed)).subscribe(() => {
-            this._blur();
-            this.stateChanges.next();
-        });
-
-        merge(this.chipFocusChanges, this._chips.changes)
-            .pipe(takeUntil(this._destroyed))
-            .subscribe(() => this.stateChanges.next());
-    }
-
-    ngDoCheck() {
-        if (this.ngControl) {
-            this.updateErrorState();
-        }
-    }
-
-    override ngOnDestroy() {
-        super.ngOnDestroy();
-        this.stateChanges.complete();
-    }
-
-    registerInput(inputElement: MDChipTextControl): void {
-        this._chipInput = inputElement;
-        this._chipInput.setDescribedByIds(this._ariaDescribedbyIds);
-
-        this._elementRef.nativeElement.removeAttribute('aria-describedby');
-    }
-
-
-    onContainerClick(event: MouseEvent) {
-        if (!this.disabled && !this._originatesFromChip(event)) {
-            this.focus();
-        }
-    }
-
-
-    override focus(): void {
-        if (this.disabled || this._chipInput?.focused) {
-            return;
-        }
-
-        if (!this._chips.length || this._chips.first.disabled) {
-            if (!this._chipInput) {
-                return;
-            }
-
-
-            Promise.resolve().then(() => this._chipInput!.focus());
-        } else {
-            const activeItem = this._keyManager.activeItem;
-
-            if (activeItem) {
-                activeItem.focus();
-            } else {
-                this._keyManager.setFirstItemActive();
-            }
-        }
-
-        this.stateChanges.next();
-    }
-
-    get describedByIds(): string[] {
-        if (this._chipInput) {
-            return this._chipInput.describedByIds || [];
-        }
-        const existing = this._elementRef.nativeElement.getAttribute('aria-describedby');
-        return existing ? existing.split(' ') : [];
-    }
-
-
-    setDescribedByIds(ids: string[]) {
-        this._ariaDescribedbyIds = ids;
-
-        if (this._chipInput) {
-            this._chipInput.setDescribedByIds(ids);
-        } else if (ids.length) {
-            this._elementRef.nativeElement.setAttribute('aria-describedby', ids.join(' '));
-        } else {
-            this._elementRef.nativeElement.removeAttribute('aria-describedby');
-        }
-    }
-
-    writeValue(value: any): void {
-        this._value = value;
-    }
-
-
-    registerOnChange(fn: (value: any) => void): void {
-        this._onChange = fn;
-    }
-
-    registerOnTouched(fn: () => void): void {
-        this._onTouched = fn;
-    }
-
-    setDisabledState(isDisabled: boolean): void {
-        this.disabled = isDisabled;
-        this.stateChanges.next();
-    }
-
-    updateErrorState() {
-        this._errorStateTracker.updateErrorState();
-    }
-
-    _blur() {
-        if (!this.disabled) {
-            setTimeout(() => {
-                if (!this.focused) {
-                    this._propagateChanges();
-                    this._markAsTouched();
-                }
-            });
-        }
-    }
-
-    protected override _allowFocusEscape() {
-        if (!this._chipInput?.focused) {
-            super._allowFocusEscape();
-        }
-    }
-
-    override _handleKeydown(event: KeyboardEvent) {
-        const keyCode = event.keyCode;
-        const activeItem = this._keyManager.activeItem;
-
-        if (keyCode === TAB) {
-            if (
-                this._chipInput?.focused &&
-                hasModifierKey(event, 'shiftKey') &&
-                this._chips.length &&
-                !this._chips.last.disabled
-            ) {
-                event.preventDefault();
-
-                if (activeItem) {
-                    this._keyManager.setActiveItem(activeItem);
-                } else {
-                    this._focusLastChip();
-                }
-            } else {
-                super._allowFocusEscape();
-            }
-        } else if (!this._chipInput?.focused) {
-            if ((keyCode === UP_ARROW || keyCode === DOWN_ARROW) && activeItem) {
-                const eligibleActions = this._chipActions.filter(
-                    (action) => action._isPrimary === activeItem._isPrimary && !this._skipPredicate(action)
-                );
-                const currentIndex = eligibleActions.indexOf(activeItem);
-                const delta = event.keyCode === UP_ARROW ? -1 : 1;
-
-                event.preventDefault();
-                if (currentIndex > -1 && this._isValidIndex(currentIndex + delta)) {
-                    this._keyManager.setActiveItem(eligibleActions[currentIndex + delta]);
-                }
-            } else {
-                super._handleKeydown(event);
-            }
-        }
-
-        this.stateChanges.next();
-    }
-
-    _focusLastChip() {
-        if (this._chips.length) {
-            this._chips.last.focus();
-        }
-    }
-
-    private _propagateChanges(): void {
-        const valueToEmit = this._chips.length ? this._chips.toArray().map((chip) => chip.value) : [];
-        this._value = valueToEmit;
-        this.change.emit(new MDChipGridChange(this, valueToEmit));
-        this.valueChange.emit(valueToEmit);
-        this._onChange(valueToEmit);
-        this._changeDetectorRef.markForCheck();
-    }
-
-    private _markAsTouched() {
-        this._onTouched();
-        this._changeDetectorRef.markForCheck();
-        this.stateChanges.next();
-    }
-}
-
-
-@Injectable({providedIn: 'root'})
-export class ErrorStateMatcher {
-  isErrorState(control: AbstractControl | null, form: FormGroupDirective | NgForm | null): boolean {
-    return !!(control && control.invalid && (control.touched || (form && form.submitted)));
-  }
-}
-
-export class _ErrorStateTracker {
-  errorState = false;
-
-  matcher: ErrorStateMatcher;
-
-  constructor(
-    private _defaultMatcher: ErrorStateMatcher | null,
-    public ngControl: NgControl | null,
-    private _parentFormGroup: FormGroupDirective | null,
-    private _parentForm: NgForm | null,
-    private _stateChanges: Subject<void>,
-  ) {}
-
-  updateErrorState() {
-    const oldState = this.errorState;
-    const parent = this._parentFormGroup || this._parentForm;
-    const matcher = this.matcher || this._defaultMatcher;
-    const control = this.ngControl ? (this.ngControl.control as AbstractControl) : null;
-    const newState = matcher?.isErrorState(control, parent) ?? false;
-
-    if (newState !== oldState) {
-      this.errorState = newState;
-      this._stateChanges.next();
-    }
-  }
-}

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

@@ -1,91 +0,0 @@
-import {ENTER, SPACE} from '@angular/cdk/keycodes';
-import {Directive} from '@angular/core';
-import { MD_CHIP_AVATAR, MD_CHIP_EDIT, MD_CHIP_REMOVE, MD_CHIP_TRAILING_ICON } from './tokens';
-import { MDChipAction, MDChipContent } from './chip-action';
-
-@Directive({
-  selector: 'md-chip-avatar, [mdChipAvatar]',
-  host: {
-    'class': 'md-mdc-chip-avatar mdc-evolution-chip__icon mdc-evolution-chip__icon--primary',
-    'role': 'img',
-  },
-  providers: [{provide: MD_CHIP_AVATAR, useExisting: MDChipAvatar}],
-})
-export class MDChipAvatar {}
-
-
-@Directive({
-  selector: 'md-chip-trailing-icon, [mdChipTrailingIcon]',
-  host: {
-    'class':
-      'md-mdc-chip-trailing-icon mdc-evolution-chip__icon mdc-evolution-chip__icon--trailing',
-    'aria-hidden': 'true',
-  },
-  providers: [{provide: MD_CHIP_TRAILING_ICON, useExisting: MDChipTrailingIcon}],
-})
-export class MDChipTrailingIcon extends MDChipContent {
-  override _isPrimary = false;
-}
-
-@Directive({
-  selector: '[mdChipEdit]',
-  host: {
-    'class':
-      'md-mdc-chip-edit md-mdc-chip-avatar md-focus-indicator ' +
-      'mdc-evolution-chip__icon mdc-evolution-chip__icon--primary',
-    'role': 'button',
-    '[attr.aria-hidden]': 'null',
-  },
-  providers: [{provide: MD_CHIP_EDIT, useExisting: MDChipEdit}],
-})
-export class MDChipEdit extends MDChipAction {
-  override _isPrimary = false;
-  override _isLeading = true;
-
-  override _handleClick(event: MouseEvent): void {
-    if (!this.disabled) {
-      event.stopPropagation();
-      event.preventDefault();
-      this._parentChip._edit();
-    }
-  }
-
-  override _handleKeydown(event: KeyboardEvent) {
-    if ((event.keyCode === ENTER || event.keyCode === SPACE) && !this.disabled) {
-      event.stopPropagation();
-      event.preventDefault();
-      this._parentChip._edit();
-    }
-  }
-}
-
-@Directive({
-  selector: '[mdChipRemove]',
-  host: {
-    'class':
-      'md-mdc-chip-remove md-mdc-chip-trailing-icon md-focus-indicator ' +
-      'mdc-evolution-chip__icon mdc-evolution-chip__icon--trailing',
-    'role': 'button',
-    '[attr.aria-hidden]': 'null',
-  },
-  providers: [{provide: MD_CHIP_REMOVE, useExisting: MDChipRemove}],
-})
-export class MDChipRemove extends MDChipAction {
-  override _isPrimary = false;
-
-  override _handleClick(event: MouseEvent): void {
-    if (!this.disabled) {
-      event.stopPropagation();
-      event.preventDefault();
-      this._parentChip.remove();
-    }
-  }
-
-  override _handleKeydown(event: KeyboardEvent) {
-    if ((event.keyCode === ENTER || event.keyCode === SPACE) && !this.disabled) {
-      event.stopPropagation();
-      event.preventDefault();
-      this._parentChip.remove();
-    }
-  }
-}

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

@@ -1,208 +0,0 @@
-import { BACKSPACE, hasModifierKey, ModifierKey } from '@angular/cdk/keycodes';
-import {
-    Directive,
-    ElementRef,
-    EventEmitter,
-    Input,
-    OnChanges,
-    OnDestroy,
-    Output,
-    booleanAttribute,
-    inject,
-} from '@angular/core';
-import { _IdGenerator } from '@angular/cdk/a11y';
-import { MDChipTextControl } from './chip-text-control';
-import { MDChipGrid } from './chip-grid';
-import { MD_CHIPS_DEFAULT_OPTIONS, MDChipsDefaultOptions, SeparatorKey } from './tokens';
-
-export interface MDChipInputEvent {
-    input: HTMLInputElement;
-    value: string;
-    chipInput: MDChipInput;
-}
-
-@Directive({
-    selector: 'input[mdChipInputFor]',
-    exportAs: 'mdChipInput, mdChipInputFor',
-    host: {
-        class: 'md-mdc-chip-input md-mdc-input-element mdc-text-field__input md-input-element',
-        '(keydown)': '_keydown($event)',
-        '(blur)': '_blur()',
-        '(focus)': '_focus()',
-        '(input)': '_onInput()',
-        '[id]': 'id',
-        '[attr.disabled]': 'disabled && !disabledInteractive ? "" : null',
-        '[attr.placeholder]': 'placeholder || null',
-        '[attr.aria-invalid]': '_chipGrid && _chipGrid.ngControl ? _chipGrid.ngControl.invalid : null',
-        '[attr.aria-required]': '_chipGrid && _chipGrid.required || null',
-        '[attr.aria-disabled]': 'disabled && disabledInteractive ? "true" : null',
-        '[attr.readonly]': '_getReadonlyAttribute()',
-        '[attr.required]': '_chipGrid && _chipGrid.required || null',
-    },
-})
-export class MDChipInput implements MDChipTextControl, OnChanges, OnDestroy {
-    protected _elementRef = inject<ElementRef<HTMLInputElement>>(ElementRef);
-
-    focused: boolean = false;
-
-    @Input('mdChipInputFor')
-    get chipGrid(): MDChipGrid {
-        return this._chipGrid;
-    }
-    set chipGrid(value: MDChipGrid) {
-        if (value) {
-            this._chipGrid = value;
-            this._chipGrid.registerInput(this);
-        }
-    }
-    protected _chipGrid: MDChipGrid;
-
-    @Input({ alias: 'mdChipInputAddOnBlur', transform: booleanAttribute })
-    addOnBlur: boolean = false;
-
-    @Input('mdChipInputSeparatorKeyCodes')
-    separatorKeyCodes: readonly (number | SeparatorKey)[] | ReadonlySet<number | SeparatorKey>;
-
-    @Output('mdChipInputTokenEnd')
-    readonly chipEnd: EventEmitter<MDChipInputEvent> = new EventEmitter<MDChipInputEvent>();
-
-    @Input() placeholder: string = '';
-
-    @Input() id: string = inject(_IdGenerator).getId('md-mdc-chip-list-input-');
-
-    @Input({ transform: booleanAttribute })
-    get disabled(): boolean {
-        return this._disabled || (this._chipGrid && this._chipGrid.disabled);
-    }
-    set disabled(value: boolean) {
-        this._disabled = value;
-    }
-    private _disabled: boolean = false;
-
-    @Input({ transform: booleanAttribute })
-    readonly: boolean = false;
-
-    @Input({ alias: 'mdChipInputDisabledInteractive', transform: booleanAttribute })
-    disabledInteractive: boolean;
-
-    get empty(): boolean {
-        return !this.inputElement.value;
-    }
-
-    readonly inputElement!: HTMLInputElement;
-
-    constructor() {
-        const defaultOptions = inject<MDChipsDefaultOptions>(MD_CHIPS_DEFAULT_OPTIONS);
-
-        this.inputElement = this._elementRef.nativeElement as HTMLInputElement;
-        this.separatorKeyCodes = defaultOptions.separatorKeyCodes;
-        this.disabledInteractive = defaultOptions.inputDisabledInteractive ?? false;
-    }
-
-    ngOnChanges() {
-        this._chipGrid.stateChanges.next();
-    }
-
-    ngOnDestroy(): void {
-        this.chipEnd.complete();
-    }
-
-    _keydown(event: KeyboardEvent) {
-        if (this.empty && event.keyCode === BACKSPACE) {
-            if (!event.repeat) {
-                this._chipGrid._focusLastChip();
-            }
-            event.preventDefault();
-        } else {
-            this._emitChipEnd(event);
-        }
-    }
-
-    _blur() {
-        if (this.addOnBlur) {
-            this._emitChipEnd();
-        }
-        this.focused = false;
-        if (!this._chipGrid.focused) {
-            this._chipGrid._blur();
-        }
-        this._chipGrid.stateChanges.next();
-    }
-
-    _focus() {
-        this.focused = true;
-        this._chipGrid.stateChanges.next();
-    }
-
-    _emitChipEnd(event?: KeyboardEvent) {
-        if (!event || (this._isSeparatorKey(event) && !event.repeat)) {
-            this.chipEnd.emit({
-                input: this.inputElement,
-                value: this.inputElement.value,
-                chipInput: this,
-            });
-
-            event?.preventDefault();
-        }
-    }
-
-    _onInput() {
-        this._chipGrid.stateChanges.next();
-    }
-
-    focus(): void {
-        this.inputElement.focus();
-    }
-
-    clear(): void {
-        this.inputElement.value = '';
-    }
-
-    get describedByIds(): string[] {
-        const element = this._elementRef.nativeElement;
-        const existingDescribedBy = element.getAttribute('aria-describedby');
-
-        return existingDescribedBy?.split(' ') || [];
-    }
-
-    setDescribedByIds(ids: string[]): void {
-        const element = this._elementRef.nativeElement;
-
-        if (ids.length) {
-            element.setAttribute('aria-describedby', ids.join(' '));
-        } else {
-            element.removeAttribute('aria-describedby');
-        }
-    }
-
-    private _isSeparatorKey(event: KeyboardEvent): boolean {
-        if (!this.separatorKeyCodes) {
-            return false;
-        }
-
-        for (const key of this.separatorKeyCodes) {
-            let keyCode: number;
-            let modifiers: readonly ModifierKey[] | null;
-
-            if (typeof key === 'number') {
-                keyCode = key;
-                modifiers = null;
-            } else {
-                keyCode = key.keyCode;
-                modifiers = key.modifiers;
-            }
-
-            const modifiersMatch = !modifiers?.length ? !hasModifierKey(event) : hasModifierKey(event, ...modifiers);
-
-            if (keyCode === event.keyCode && modifiersMatch) {
-                return true;
-            }
-        }
-
-        return false;
-    }
-
-    protected _getReadonlyAttribute(): string | null {
-        return this.readonly || (this.disabled && this.disabledInteractive) ? 'true' : null;
-    }
-}