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

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

@@ -1,291 +0,0 @@
-import {
-    AfterContentInit,
-    booleanAttribute,
-    ChangeDetectionStrategy,
-    Component,
-    ContentChildren,
-    EventEmitter,
-    forwardRef,
-    inject,
-    Input,
-    OnDestroy,
-    Output,
-    QueryList,
-    ViewEncapsulation,
-} from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { Observable } from 'rxjs';
-import { startWith, takeUntil } from 'rxjs/operators';
-import { TAB } from '@angular/cdk/keycodes';
-import { MDChipSet } from './chip-set';
-import { MD_CHIPS_DEFAULT_OPTIONS } from './tokens';
-import { MDChipOption, MDChipSelectionChange } from './chip-option';
-import { MDChip, MDChipEvent } from './chip';
-import { MDChipAction } from './chip-action';
-
-export class MDChipListboxChange {
-    constructor(public source: MDChipListbox, public value: any) {}
-}
-
-export const MD_CHIP_LISTBOX_CONTROL_VALUE_ACCESSOR: any = {
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => MDChipListbox),
-    multi: true,
-};
-
-@Component({
-    selector: 'md-chip-listbox',
-    template: `
-        <div class="mdc-evolution-chip-set__chips" role="presentation">
-            <ng-content></ng-content>
-        </div>
-    `,
-    styleUrl: 'chip-set.scss',
-    host: {
-        class: 'mdc-evolution-chip-set md-mdc-chip-listbox',
-        '[attr.role]': 'role',
-        '[tabIndex]': '(disabled || empty) ? -1 : tabIndex',
-        '[attr.aria-required]': 'role ? required : null',
-        '[attr.aria-disabled]': 'disabled.toString()',
-        '[attr.aria-multiselectable]': 'multiple',
-        '[attr.aria-orientation]': 'ariaOrientation',
-        '[class.md-mdc-chip-list-disabled]': 'disabled',
-        '[class.md-mdc-chip-list-required]': 'required',
-        '(focus)': 'focus()',
-        '(blur)': '_blur()',
-        '(keydown)': '_keydown($event)',
-    },
-    providers: [MD_CHIP_LISTBOX_CONTROL_VALUE_ACCESSOR],
-    encapsulation: ViewEncapsulation.None,
-    changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MDChipListbox extends MDChipSet implements AfterContentInit, OnDestroy, ControlValueAccessor {
-    _onTouched = () => {};
-
-    _onChange: (value: any) => void = () => {};
-
-    protected override _defaultRole = 'listbox';
-
-    private _defaultOptions = inject(MD_CHIPS_DEFAULT_OPTIONS, { optional: true });
-
-    @Input({ transform: booleanAttribute })
-    get multiple(): boolean {
-        return this._multiple;
-    }
-    set multiple(value: boolean) {
-        this._multiple = value;
-        this._syncListboxProperties();
-    }
-    private _multiple: boolean = false;
-
-    get selected(): MDChipOption[] | MDChipOption {
-        const selectedChips = this._chips.toArray().filter((chip) => chip.selected);
-        return this.multiple ? selectedChips : selectedChips[0];
-    }
-
-    @Input('aria-orientation') ariaOrientation: 'horizontal' | 'vertical' = 'horizontal';
-
-    @Input({ transform: booleanAttribute })
-    get selectable(): boolean {
-        return this._selectable;
-    }
-    set selectable(value: boolean) {
-        this._selectable = value;
-        this._syncListboxProperties();
-    }
-    protected _selectable: boolean = true;
-
-    @Input() compareWith: (o1: any, o2: any) => boolean = (o1: any, o2: any) => o1 === o2;
-
-    @Input({ transform: booleanAttribute })
-    required: boolean = false;
-
-    @Input({ transform: booleanAttribute })
-    get hideSingleSelectionIndicator(): boolean {
-        return this._hideSingleSelectionIndicator;
-    }
-    set hideSingleSelectionIndicator(value: boolean) {
-        this._hideSingleSelectionIndicator = value;
-        this._syncListboxProperties();
-    }
-    private _hideSingleSelectionIndicator: boolean = this._defaultOptions?.hideSingleSelectionIndicator ?? false;
-
-    get chipSelectionChanges(): Observable<MDChipSelectionChange> {
-        return this._getChipStream<MDChipSelectionChange, MDChipOption>((chip) => chip.selectionChange);
-    }
-
-    get chipBlurChanges(): Observable<MDChipEvent> {
-        return this._getChipStream((chip) => chip._onBlur);
-    }
-
-    @Input()
-    get value(): any {
-        return this._value;
-    }
-    set value(value: any) {
-        if (this._chips && this._chips.length) {
-            this._setSelectionByValue(value, false);
-        }
-        this._value = value;
-    }
-    protected _value: any;
-
-    @Output() readonly change: EventEmitter<MDChipListboxChange> = new EventEmitter<MDChipListboxChange>();
-
-    @ContentChildren(MDChipOption, {
-        descendants: true,
-    })
-    override _chips: QueryList<MDChipOption> = undefined!;
-
-    ngAfterContentInit() {
-        this._chips.changes.pipe(startWith(null), takeUntil(this._destroyed)).subscribe(() => {
-            if (this.value !== undefined) {
-                Promise.resolve().then(() => {
-                    this._setSelectionByValue(this.value, false);
-                });
-            }
-            this._syncListboxProperties();
-        });
-
-        this.chipBlurChanges.pipe(takeUntil(this._destroyed)).subscribe(() => this._blur());
-        this.chipSelectionChanges.pipe(takeUntil(this._destroyed)).subscribe((event) => {
-            if (!this.multiple) {
-                this._chips.forEach((chip) => {
-                    if (chip !== event.source) {
-                        chip._setSelectedState(false, false, false);
-                    }
-                });
-            }
-
-            if (event.isUserInput) {
-                this._propagateChanges();
-            }
-        });
-    }
-
-    override focus(): void {
-        if (this.disabled) {
-            return;
-        }
-
-        const firstSelectedChip = this._getFirstSelectedChip();
-
-        if (firstSelectedChip && !firstSelectedChip.disabled) {
-            firstSelectedChip.focus();
-        } else if (this._chips.length > 0) {
-            this._keyManager.setFirstItemActive();
-        } else {
-            this._elementRef.nativeElement.focus();
-        }
-    }
-
-    writeValue(value: any): void {
-        if (value != null) {
-            this.value = value;
-        } else {
-            this.value = undefined;
-        }
-    }
-
-    registerOnChange(fn: (value: any) => void): void {
-        this._onChange = fn;
-    }
-
-    registerOnTouched(fn: () => void): void {
-        this._onTouched = fn;
-    }
-
-    setDisabledState(isDisabled: boolean): void {
-        this.disabled = isDisabled;
-    }
-
-    _setSelectionByValue(value: any, isUserInput: boolean = true) {
-        this._clearSelection();
-
-        if (Array.isArray(value)) {
-            value.forEach((currentValue) => this._selectValue(currentValue, isUserInput));
-        } else {
-            this._selectValue(value, isUserInput);
-        }
-    }
-
-    _blur() {
-        if (!this.disabled) {
-            setTimeout(() => {
-                if (!this.focused) {
-                    this._markAsTouched();
-                }
-            });
-        }
-    }
-
-    _keydown(event: KeyboardEvent) {
-        if (event.keyCode === TAB) {
-            super._allowFocusEscape();
-        }
-    }
-
-    private _markAsTouched() {
-        this._onTouched();
-        this._changeDetectorRef.markForCheck();
-    }
-
-    private _propagateChanges(): void {
-        let valueToEmit: any = null;
-
-        if (Array.isArray(this.selected)) {
-            valueToEmit = this.selected.map((chip) => chip.value);
-        } else {
-            valueToEmit = this.selected ? this.selected.value : undefined;
-        }
-        this._value = valueToEmit;
-        this.change.emit(new MDChipListboxChange(this, valueToEmit));
-        this._onChange(valueToEmit);
-        this._changeDetectorRef.markForCheck();
-    }
-
-    private _clearSelection(skip?: MDChip): void {
-        this._chips.forEach((chip) => {
-            if (chip !== skip) {
-                chip.deselect();
-            }
-        });
-    }
-
-    private _selectValue(value: any, isUserInput: boolean): MDChip | undefined {
-        const correspondingChip = this._chips.find((chip) => {
-            return chip.value != null && this.compareWith(chip.value, value);
-        });
-
-        if (correspondingChip) {
-            isUserInput ? correspondingChip.selectViaInteraction() : correspondingChip.select();
-        }
-
-        return correspondingChip;
-    }
-
-    private _syncListboxProperties() {
-        if (this._chips) {
-            Promise.resolve().then(() => {
-                this._chips.forEach((chip) => {
-                    chip._chipListMultiple = this.multiple;
-                    chip.chipListSelectable = this._selectable;
-                    chip._chipListHideSingleSelectionIndicator = this.hideSingleSelectionIndicator;
-                    chip._changeDetectorRef.markForCheck();
-                });
-            });
-        }
-    }
-
-    private _getFirstSelectedChip(): MDChipOption | undefined {
-        if (Array.isArray(this.selected)) {
-            return this.selected.length ? this.selected[0] : undefined;
-        } else {
-            return this.selected;
-        }
-    }
-
-    protected override _skipPredicate(action: MDChipAction): boolean {
-        return false;
-    }
-}

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

@@ -1,37 +0,0 @@
-<span class="md-mdc-chip-focus-overlay"></span>
-
-<span class="mdc-evolution-chip__cell mdc-evolution-chip__cell--primary">
-  <button
-    mdChipAction
-    [_allowFocusWhenDisabled]="true"
-    [attr.aria-description]="ariaDescription"
-    [attr.aria-label]="ariaLabel"
-    [attr.aria-selected]="ariaSelected"
-    role="option">
-    @if (_hasLeadingGraphic()) {
-      <span class="mdc-evolution-chip__graphic md-mdc-chip-graphic">
-        <ng-content select="md-chip-avatar, [mdChipAvatar]"></ng-content>
-        <span class="mdc-evolution-chip__checkmark">
-          <svg
-            class="mdc-evolution-chip__checkmark-svg"
-            viewBox="-2 -3 30 30"
-            focusable="false"
-            aria-hidden="true">
-            <path class="mdc-evolution-chip__checkmark-path"
-                  fill="none" stroke="currentColor" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
-          </svg>
-        </span>
-      </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>
-  </button>
-</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>
-}

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

@@ -1,163 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  Input,
-  Output,
-  ViewEncapsulation,
-  OnInit,
-  inject,
-  booleanAttribute,
-} from '@angular/core';
-import { MDChip } from './chip';
-import { MD_CHIP, MD_CHIPS_DEFAULT_OPTIONS } from './tokens';
-import { MDChipAction } from './chip-action';
-
-
-export class MDChipSelectionChange {
-  constructor(
-    public source: MDChipOption,
-    public selected: boolean,
-    public isUserInput = false,
-  ) {}
-}
-
-@Component({
-  selector: 'md-basic-chip-option, [md-basic-chip-option], md-chip-option, [md-chip-option]',
-  templateUrl: 'chip-option.html',
-  styleUrl: 'chip.scss',
-  host: {
-    'class': 'md-mdc-chip md-mdc-chip-option',
-    '[class.mdc-evolution-chip]': '!_isBasicChip',
-    '[class.mdc-evolution-chip--filter]': '!_isBasicChip',
-    '[class.mdc-evolution-chip--selectable]': '!_isBasicChip',
-    '[class.md-mdc-chip-selected]': 'selected',
-    '[class.md-mdc-chip-multiple]': '_chipListMultiple',
-    '[class.md-mdc-chip-disabled]': 'disabled',
-    '[class.md-mdc-chip-with-avatar]': 'leadingIcon',
-    '[class.mdc-evolution-chip--disabled]': 'disabled',
-    '[class.mdc-evolution-chip--selected]': 'selected',
-    '[class.mdc-evolution-chip--selecting]': '!_animationsDisabled',
-    '[class.mdc-evolution-chip--with-trailing-action]': '_hasTrailingIcon()',
-    '[class.mdc-evolution-chip--with-primary-icon]': 'leadingIcon',
-    '[class.mdc-evolution-chip--with-primary-graphic]': '_hasLeadingGraphic()',
-    '[class.mdc-evolution-chip--with-avatar]': 'leadingIcon',
-    '[class.md-mdc-chip-highlighted]': 'highlighted',
-    '[class.md-mdc-chip-with-trailing-icon]': '_hasTrailingIcon()',
-    '[attr.tabindex]': 'null',
-    '[attr.aria-label]': 'null',
-    '[attr.aria-description]': 'null',
-    '[attr.role]': 'role',
-    '[id]': 'id',
-  },
-  providers: [
-    {provide: MDChip, useExisting: MDChipOption},
-    {provide: MD_CHIP, useExisting: MDChipOption},
-  ],
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [MDChipAction],
-})
-export class MDChipOption extends MDChip implements OnInit {
-  private _defaultOptions = inject(MD_CHIPS_DEFAULT_OPTIONS, {optional: true});
-
-  chipListSelectable: boolean = true;
-
-  _chipListMultiple: boolean = false;
-
-  _chipListHideSingleSelectionIndicator: boolean =
-    this._defaultOptions?.hideSingleSelectionIndicator ?? false;
-
-
-  @Input({transform: booleanAttribute})
-  get selectable(): boolean {
-    return this._selectable && this.chipListSelectable;
-  }
-  set selectable(value: boolean) {
-    this._selectable = value;
-    this._changeDetectorRef.markForCheck();
-  }
-  protected _selectable: boolean = true;
-
-  /** Whether the chip is selected. */
-  @Input({transform: booleanAttribute})
-  get selected(): boolean {
-    return this._selected;
-  }
-  set selected(value: boolean) {
-    this._setSelectedState(value, false, true);
-  }
-  private _selected = false;
-
-
-  get ariaSelected(): string | null {
-    return this.selectable ? this.selected.toString() : null;
-  }
-
-  protected override basicChipAttrName = 'md-basic-chip-option';
-
-  @Output() readonly selectionChange: EventEmitter<MDChipSelectionChange> =
-    new EventEmitter<MDChipSelectionChange>();
-
-  override ngOnInit() {
-    super.ngOnInit();
-    this.role = 'presentation';
-  }
-
-
-  select(): void {
-    this._setSelectedState(true, false, true);
-  }
-
-
-  deselect(): void {
-    this._setSelectedState(false, false, true);
-  }
-
-
-  selectViaInteraction(): void {
-    this._setSelectedState(true, true, true);
-  }
-
-
-  toggleSelected(isUserInput: boolean = false): boolean {
-    this._setSelectedState(!this.selected, isUserInput, true);
-    return this.selected;
-  }
-
-  override _handlePrimaryActionInteraction() {
-    if (!this.disabled) {
-
-      this.focus();
-
-      if (this.selectable) {
-        this.toggleSelected(true);
-      }
-    }
-  }
-
-  _hasLeadingGraphic() {
-    if (this.leadingIcon) {
-      return true;
-    }
-
-
-    return !this._chipListHideSingleSelectionIndicator || this._chipListMultiple;
-  }
-
-  _setSelectedState(isSelected: boolean, isUserInput: boolean, emitEvent: boolean) {
-    if (isSelected !== this.selected) {
-      this._selected = isSelected;
-
-      if (emitEvent) {
-        this.selectionChange.emit({
-          source: this,
-          isUserInput,
-          selected: this.selected,
-        });
-      }
-
-      this._changeDetectorRef.markForCheck();
-    }
-  }
-}

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

@@ -1,42 +0,0 @@
-@if (!_isEditing) {
-  <span class="md-mdc-chip-focus-overlay"></span>
-}
-
-@if (_hasLeadingActionIcon()) {
-  <span class="mdc-evolution-chip__cell mdc-evolution-chip__cell--leading" role="gridcell">
-    <ng-content select="[mdChipEdit]"></ng-content>
-  </span>
-}
-<span class="mdc-evolution-chip__cell mdc-evolution-chip__cell--primary" role="gridcell"
-    mdChipAction
-    [disabled]="disabled"
-    [attr.aria-description]="ariaDescription"
-    [attr.aria-label]="ariaLabel">
-  @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">
-    @if (_isEditing) {
-      @if (contentEditInput) {
-        <ng-content select="[mdChipEditInput]"></ng-content>
-      } @else {
-        <span mdChipEditInput></span>
-      }
-    } @else {
-      <ng-content></ng-content>
-    }
-
-    <span class="md-mdc-chip-primary-focus-indicator md-focus-indicator" aria-hidden="true"></span>
-  </span>
-</span>
-
-@if (_hasTrailingIcon()) {
-  <span
-    class="mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing"
-    role="gridcell">
-    <ng-content select="md-chip-trailing-icon,[mdChipRemove],[mdChipTrailingIcon]"></ng-content>
-  </span>
-}