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

package/src/lib/v2/checkbox/checkbox.ts

@@ -1,507 +0,0 @@
-import { _IdGenerator, FocusableOption } from '@angular/cdk/a11y';
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input,
-  NgZone,
-  OnChanges,
-  Output,
-  SimpleChanges,
-  ViewChild,
-  ViewEncapsulation,
-  booleanAttribute,
-  forwardRef,
-  numberAttribute,
-  inject,
-  HostAttributeToken,
-} from '@angular/core';
-import {
-  AbstractControl,
-  ControlValueAccessor,
-  NG_VALIDATORS,
-  NG_VALUE_ACCESSOR,
-  ValidationErrors,
-  Validator,
-} from '@angular/forms';
-import { _CdkPrivateStyleLoader } from '@angular/cdk/private';
-
-/**
- * Finite states for the checkbox visual state machine.
- *
- * - `Init`: initial (pre-render) state
- * - `Checked`: box is checked
- * - `Unchecked`: box is unchecked
- *
- * Used to pick the proper animation class during transitions.
- */
-export enum TransitionCheckState {
-  Init,
-  Checked,
-  Unchecked,
-}
-
-/**
- * Payload for `(change)` output.
- *
- * - `source`: reference to emitting checkbox instance
- * - `checked`: current boolean state after the change
- */
-export class MDCheckboxChange {
-  /** Source checkbox that emitted the change. */
-  source: MDCheckBox;
-  /** Current checked state after the update. */
-  checked: boolean;
-}
-
-/**
- * Controls how a host click affects the checked state.
- *
- * - `'noop'`  — ignore host clicks (useful for fully-controlled mode)
- * - `'check'` — toggle on click (default)
- * - `undefined` — treated as default
- */
-export type CheckboxClickAction = 'noop' | 'check' | undefined;
-
-@Component({
-  selector: 'md-checkbox',
-  templateUrl: 'checkbox.html',
-  styleUrl: 'checkbox.scss',
-  host: {
-    class: 'md-mdc-checkbox',
-    '[attr.tabindex]': 'null',
-    '[attr.aria-label]': 'null',
-    '[attr.aria-labelledby]': 'null',
-    '[class.animation-noopable]': '_animationsDisabled',
-    '[class.mdc-checkbox--disabled]': 'disabled',
-    '[id]': 'id',
-    '[class.mdc-checkbox-disabled]': 'disabled',
-    '[class.mdc-checkbox-checked]': 'checked',
-    '[class.mdc-checkbox-disabled-interactive]': 'disabledInteractive',
-    '[class]': 'color ? color : "accent"',
-  },
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => MDCheckBox),
-      multi: true,
-    },
-    {
-      provide: NG_VALIDATORS,
-      useExisting: MDCheckBox,
-      multi: true,
-    },
-  ],
-  exportAs: 'mdCheckbox',
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-/**
- * Material-like Checkbox with CVA + validation support.
- *
- * @remarks
- * - Implements Angular Forms interfaces (`ControlValueAccessor`, `Validator`).
- * - Emits {@link MDCheckBox.change | change} on user-driven updates.
- * - Applies CSS animation classes for state transitions (configurable).
- *
- * @example Template usage
- * ```html
- * <md-checkbox [(ngModel)]="checked" (change)="onChanged($event)">Remember me</md-checkbox>
- * ```
- */
-export class MDCheckBox implements OnChanges, ControlValueAccessor, Validator, FocusableOption {
-  /** Host `ElementRef` for low-level DOM ops (focus mgmt, class toggles via templates). */
-  _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
-
-  /** Change detector to mark view dirty on imperative state changes. */
-  private _changeDetectorRef = inject(ChangeDetectorRef);
-
-  /** Zone used to schedule work outside Angular for animation class cleanup. */
-  private _ngZone = inject(NgZone);
-
-  /** When true, skips adding animation classes to avoid motion. */
-  protected _animationsDisabled = false;
-
-  /**
-   * Local options bag (can be extended to accept DI-config in the future).
-   *
-   * - `color`: theme class on host (`'accent'` by default)
-   * - `clickAction`: how clicks affect toggle (default `'check'`)
-   * - `disabledInteractive`: allow certain focus/aria semantics even if disabled
-   */
-  private _options = {
-    color: 'accent',
-    clickAction: 'check',
-    disabledInteractive: false,
-  };
-
-  // ───────────────────────────── FocusableOption ─────────────────────────────
-
-  /**
-   * FocusableOption API (CDK lists, key manager, etc.).
-   * Delegates focus to the internal native `<input>`.
-   */
-  focus() {
-    this._inputElement.nativeElement.focus();
-  }
-
-  // ───────────────────────────── Events & helpers ─────────────────────────────
-
-  /**
-   * Factory for `(change)` event payloads.
-   * @param isChecked Final boolean state after user interaction/programmatic toggle.
-   */
-  protected _createChangeEvent(isChecked: boolean) {
-    const event = new MDCheckboxChange();
-    event.source = this;
-    event.checked = isChecked;
-    return event;
-  }
-
-  /**
-   * Returns the element on which animation classes are applied.
-   * Typically the native input or visual container around it.
-   */
-  protected _getAnimationTargetElement() {
-    return this._inputElement?.nativeElement;
-  }
-
-  /** Mapping of transition names to MDC animation classes. */
-  protected _animationClasses = {
-    uncheckedToChecked: 'mdc-checkbox--anim-unchecked-checked',
-    checkedToUnchecked: 'mdc-checkbox--anim-checked-unchecked',
-  };
-
-  // ───────────────────────────── A11y Inputs ─────────────────────────────
-
-  /** Accessible label text (if no external label is used). */
-  @Input('aria-label') ariaLabel: string = '';
-
-  /** Element id that labels this checkbox (preferred over `aria-label`). */
-  @Input('aria-labelledby') ariaLabelledby: string | null = null;
-
-  /** Element id that provides a description for this control. */
-  @Input('aria-describedby') ariaDescribedby: string;
-
-  /** Expanded state for composite widgets; rarely needed on a checkbox. */
-  @Input({ alias: 'aria-expanded', transform: booleanAttribute }) ariaExpanded: boolean;
-
-  /** Id of element(s) whose contents are controlled by this checkbox. */
-  @Input('aria-controls') ariaControls: string;
-
-  /** Id of element(s) owned by this checkbox. */
-  @Input('aria-owns') ariaOwns: string;
-
-  // ───────────────────────────── Identity / naming ─────────────────────────────
-
-  /** Unique id seed used for host and internal input id wiring. */
-  private _uniqueId: string;
-
-  /** Host element id; also used to derive input id if provided. */
-  @Input() id: string;
-
-  /** Computed id for the internal `<input>`. */
-  get inputId(): string {
-    return `${this.id || this._uniqueId}-input`;
-  }
-
-  // ───────────────────────────── Form-related inputs ─────────────────────────────
-
-  /** Whether the control is required; used by `Validator` implementation. */
-  @Input({ transform: booleanAttribute }) required: boolean;
-
-  /** Label placement relative to the box. @default 'after' */
-  @Input() labelPosition: 'before' | 'after' = 'after';
-
-  /** HTML `name` attribute of the internal input. */
-  @Input() name: string | null = null;
-
-  /**
-   * Fired when the user toggles the checkbox (after internal state is updated).
-   * Emits {@link MDCheckboxChange}.
-   */
-  @Output() readonly change = new EventEmitter<MDCheckboxChange>();
-
-  /** Optional value associated with this checkbox (for forms/radio-like patterns). */
-  @Input() value: string;
-
-  /** Reference to the native input (used for focus, syncing native state). */
-  @ViewChild('input') _inputElement: ElementRef<HTMLInputElement>;
-
-  /** Reference to the label element (used to stop click bubbling). */
-  @ViewChild('label') _labelElement: ElementRef<HTMLInputElement>;
-
-  /**
-   * Tab order for the internal input. If `null/undefined` — defaults to `0`.
-   * Accepts string/number; normalized via `numberAttribute`.
-   */
-  @Input({ transform: (value: unknown) => (value == null ? undefined : numberAttribute(value)) })
-  tabIndex: number;
-
-  /** Theme color token applied as a host class (e.g., `'accent'`, `'primary'`). */
-  @Input() color: string | undefined;
-
-  /**
-   * When true, allows certain interactions even in disabled state.
-   * Useful when a disabled checkbox still needs focus/aria semantics.
-   */
-  @Input({ transform: booleanAttribute }) disabledInteractive: boolean;
-
-  /** onTouched callback provided by Angular Forms. */
-  _onTouched: () => any = () => {};
-
-  /** Currently applied animation class; cleared after timeout. */
-  private _currentAnimationClass: string = '';
-
-  /** Last known check state to compute transition direction. */
-  private _currentCheckState: TransitionCheckState = TransitionCheckState.Init;
-
-  /** onChange callback provided by Angular Forms (propagates model updates). */
-  private _controlValueAccessorChangeFn: (value: any) => void = () => {};
-
-  /** Hook to notify Angular Forms that validator inputs changed. */
-  private _validatorChangeFn = () => {};
-
-  constructor() {
-    const tabIndex = inject(new HostAttributeToken('tabindex'), { optional: true });
-    this._options = this._options;
-    this.color = this._options.color;
-    this.tabIndex = tabIndex == null ? 0 : parseInt(tabIndex) || 0;
-    this.id = this._uniqueId = inject(_IdGenerator).getId('mdc-checkbox-');
-    this.disabledInteractive = this._options?.disabledInteractive ?? false;
-  }
-
-  // ───────────────────────────── Angular lifecycle ─────────────────────────────
-
-  /** On input changes (e.g., `required` toggled), re-run validator if needed. */
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes['required']) {
-      this._validatorChangeFn();
-    }
-  }
-
-  // ───────────────────────────── State: checked/disabled ─────────────────────────────
-
-  /** Current boolean state (getter). */
-  @Input({ transform: booleanAttribute })
-  get checked(): boolean {
-    return this._checked;
-  }
-  /**
-   * Setter that marks view for check under OnPush strategy.
-   * Avoids unnecessary marks if value didn't change.
-   */
-  set checked(value: boolean) {
-    if (value != this.checked) {
-      this._checked = value;
-      this._changeDetectorRef.markForCheck();
-    }
-  }
-  private _checked: boolean = false;
-
-  /** Disabled state (getter). */
-  @Input({ transform: booleanAttribute })
-  get disabled(): boolean {
-    return this._disabled;
-  }
-  /**
-   * Setter that marks view for check under OnPush strategy.
-   * Avoids unnecessary marks if value didn't change.
-   */
-  set disabled(value: boolean) {
-    if (value !== this.disabled) {
-      this._disabled = value;
-      this._changeDetectorRef.markForCheck();
-    }
-  }
-  private _disabled: boolean = false;
-
-  // ───────────────────────────── Misc handlers ─────────────────────────────
-
-  /**
-   * Force change detection when projected label text mutates (e.g., via i18n async).
-   * Called from template via `(cdkObserveContent)` or similar.
-   */
-  _onLabelTextChange() {
-    this._changeDetectorRef.detectChanges();
-  }
-
-  // ───────────────────────────── ControlValueAccessor ─────────────────────────────
-
-  /** Writes a new value from the model into the view. */
-  writeValue(value: any) {
-    this.checked = !!value;
-  }
-
-  /** Registers a callback to be triggered when the value changes in the UI. */
-  registerOnChange(fn: (value: any) => void) {
-    this._controlValueAccessorChangeFn = fn;
-  }
-
-  /** Registers a callback for the control being touched (blurred). */
-  registerOnTouched(fn: any) {
-    this._onTouched = fn;
-  }
-
-  /** Enables or disables the control from the Angular Forms API. */
-  setDisabledState(isDisabled: boolean) {
-    this.disabled = isDisabled;
-  }
-
-  // ───────────────────────────── Validator ─────────────────────────────
-
-  /**
-   * Synchronous validation: if `required`, only `true` is valid.
-   */
-  validate(control: AbstractControl<boolean>): ValidationErrors | null {
-    return this.required && control.value !== true ? { required: true } : null;
-  }
-
-  /** Informs Angular Forms that validators should be re-run. */
-  registerOnValidatorChange(fn: () => void): void {
-    this._validatorChangeFn = fn;
-  }
-
-  // ───────────────────────────── Animations ─────────────────────────────
-
-  /**
-   * Applies/removes the appropriate animation CSS class for the transition.
-   * Cleans up the class after a timeout (~duration of the CSS animation).
-   */
-  private _transitionCheckState(newState: TransitionCheckState) {
-    let oldState = this._currentCheckState;
-    let element = this._getAnimationTargetElement();
-
-    if (oldState === newState || !element) {
-      return;
-    }
-    if (this._currentAnimationClass) {
-      element.classList.remove(this._currentAnimationClass);
-    }
-
-    this._currentAnimationClass = this._getAnimationClassForCheckStateTransition(oldState, newState);
-    this._currentCheckState = newState;
-
-    if (this._currentAnimationClass.length > 0) {
-      element.classList.add(this._currentAnimationClass);
-      const animationClass = this._currentAnimationClass;
-
-      this._ngZone.runOutsideAngular(() => {
-        setTimeout(() => {
-          element!.classList.remove(animationClass);
-        }, 1000);
-      });
-    }
-  }
-
-  /**
-   * Picks the correct CSS animation class for a given `old → new` transition.
-   * Returns empty string when animations are disabled.
-   */
-  private _getAnimationClassForCheckStateTransition(
-    oldState: TransitionCheckState,
-    newState: TransitionCheckState
-  ): string {
-    if (this._animationsDisabled) {
-      return '';
-    }
-
-    switch (oldState) {
-      case TransitionCheckState.Init:
-        if (newState === TransitionCheckState.Checked) {
-          return this._animationClasses.uncheckedToChecked;
-        }
-        break;
-      case TransitionCheckState.Unchecked:
-        return this._animationClasses.uncheckedToChecked;
-      case TransitionCheckState.Checked:
-        return this._animationClasses.checkedToUnchecked;
-    }
-
-    return '';
-  }
-
-  // ───────────────────────────── UI events ─────────────────────────────
-
-  /** Host handler for click on the native `<input>`. */
-  _onInputClick() {
-    this._handleInputClick();
-  }
-
-  /**
-   * Click on the larger touch target (ripple/visual area) should toggle as well.
-   * Also refocuses the real input if not disabled to preserve keyboard flow.
-   */
-  _onTouchTargetClick() {
-    this._handleInputClick();
-
-    if (!this.disabled) {
-      this._inputElement.nativeElement.focus();
-    }
-  }
-
-  /**
-   * Prevent outer components from reacting to internal mouse/keyboard events.
-   */
-  _onInteractionEvent(event: Event) {
-    event.stopPropagation();
-  }
-
-  /**
-   * Mark as touched after blur has fully propagated to avoid change collisions.
-   */
-  _onBlur() {
-    Promise.resolve().then(() => {
-      this._onTouched();
-      this._changeDetectorRef.markForCheck();
-    });
-  }
-
-  /**
-   * Centralized click handler used by input/touch-target.
-   * Respects disabled state and `clickAction` behavior.
-   */
-  protected _handleInputClick() {
-    const clickAction = this._options?.clickAction;
-
-    if (!this.disabled && clickAction !== 'noop') {
-      this._checked = !this._checked;
-      this._transitionCheckState(this._checked ? TransitionCheckState.Checked : TransitionCheckState.Unchecked);
-      this._emitChangeEvent();
-    } else if ((this.disabled && this.disabledInteractive) || (!this.disabled && clickAction === 'noop')) {
-      this._inputElement.nativeElement.checked = this.checked;
-    }
-  }
-
-  /**
-   * Emits Angular Forms change, fires `(change)` output, and syncs native input state.
-   */
-  private _emitChangeEvent() {
-    this._controlValueAccessorChangeFn(this.checked);
-    this.change.emit(this._createChangeEvent(this.checked));
-    if (this._inputElement) {
-      this._inputElement.nativeElement.checked = this.checked;
-    }
-  }
-
-  /**
-   * Programmatic toggle (e.g., from parent component).
-   * Also notifies Angular Forms via registered `onChange` callback.
-   */
-  toggle(): void {
-    this.checked = !this.checked;
-    this._controlValueAccessorChangeFn(this.checked);
-  }
-
-  /**
-   * If a click originates from inside the label element, stop it from bubbling
-   * to avoid double-handling (host click + input click).
-   */
-  _preventBubblingFromLabel(event: MouseEvent) {
-    if (!!event.target && this._labelElement.nativeElement.contains(event.target as HTMLElement)) {
-      event.stopPropagation();
-    }
-  }
-}

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

@@ -1 +0,0 @@
-export * from './checkbox.module';

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

@@ -1,102 +0,0 @@
-import {
-  Directive,
-  ElementRef,
-  Input,
-  booleanAttribute,
-  numberAttribute,
-  inject,
-} from '@angular/core';
-import {ENTER, SPACE} from '@angular/cdk/keycodes';
-import {MD_CHIP} from './tokens';
-
-@Directive({
-  selector: '[mdChipContent]',
-  host: {
-    'class':
-      'md-mdc-chip-action mdc-evolution-chip__action mdc-evolution-chip__action--presentational',
-    '[class.mdc-evolution-chip__action--primary]': '_isPrimary',
-    '[class.mdc-evolution-chip__action--secondary]': '!_isPrimary',
-    '[class.mdc-evolution-chip__action--trailing]': '!_isPrimary && !_isLeading',
-    '[attr.disabled]': '_getDisabledAttribute()',
-    '[attr.aria-disabled]': 'disabled',
-  },
-})
-export class MDChipContent {
-  _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
-  protected _parentChip = inject<{
-    _handlePrimaryActionInteraction(): void;
-    remove(): void;
-    disabled: boolean;
-    _edit(): void;
-    _isEditing?: boolean;
-  }>(MD_CHIP);
-
-  _isPrimary = true;
-
-  _isLeading = false;
-
-  @Input({transform: booleanAttribute})
-  get disabled(): boolean {
-    return this._disabled || this._parentChip?.disabled || false;
-  }
-  set disabled(value: boolean) {
-    this._disabled = value;
-  }
-  private _disabled = false;
-
-  @Input({
-    transform: (value: unknown) => (value == null ? -1 : numberAttribute(value)),
-  })
-  tabIndex: number = -1;
-
-  @Input()
-  _allowFocusWhenDisabled = false;
-
-  protected _getDisabledAttribute(): string | null {
-    return this.disabled && !this._allowFocusWhenDisabled ? '' : null;
-  }
-
-  constructor() {
-    if (this._elementRef.nativeElement.nodeName === 'BUTTON') {
-      this._elementRef.nativeElement.setAttribute('type', 'button');
-    }
-  }
-
-  focus() {
-    this._elementRef.nativeElement.focus();
-  }
-}
-
-@Directive({
-  selector: '[mdChipAction]',
-  host: {
-    '[attr.tabindex]': '_getTabindex()',
-    '[class.mdc-evolution-chip__action--presentational]': 'false',
-    '(click)': '_handleClick($event)',
-    '(keydown)': '_handleKeydown($event)',
-  },
-})
-export class MDChipAction extends MDChipContent {
-  protected _getTabindex(): string | null {
-    return this.disabled && !this._allowFocusWhenDisabled ? null : this.tabIndex.toString();
-  }
-
-  _handleClick(event: MouseEvent) {
-    if (!this.disabled && this._isPrimary) {
-      event.preventDefault();
-      this._parentChip._handlePrimaryActionInteraction();
-    }
-  }
-
-  _handleKeydown(event: KeyboardEvent) {
-    if (
-      (event.keyCode === ENTER || event.keyCode === SPACE) &&
-      !this.disabled &&
-      this._isPrimary &&
-      !this._parentChip._isEditing
-    ) {
-      event.preventDefault();
-      this._parentChip._handlePrimaryActionInteraction();
-    }
-  }
-}

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

@@ -1,44 +0,0 @@
-import {Directive, ElementRef, inject, DOCUMENT} from '@angular/core';
-
-@Directive({
-  selector: 'span[mdChipEditInput]',
-  host: {
-    'class': 'md-chip-edit-input',
-    'role': 'textbox',
-    'tabindex': '-1',
-    'contenteditable': 'true',
-  },
-})
-export class MDChipEditInput {
-  private readonly _elementRef = inject(ElementRef);
-  private readonly _document = inject(DOCUMENT);
-
-  constructor() {}
-
-  initialize(initialValue: string) {
-    this.getNativeElement().focus();
-    this.setValue(initialValue);
-  }
-
-  getNativeElement(): HTMLElement {
-    return this._elementRef.nativeElement;
-  }
-
-  setValue(value: string) {
-    this.getNativeElement().textContent = value;
-    this._moveCursorToEndOfInput();
-  }
-
-  getValue(): string {
-    return this.getNativeElement().textContent || '';
-  }
-
-  private _moveCursorToEndOfInput() {
-    const range = this._document.createRange();
-    range.selectNodeContents(this.getNativeElement());
-    range.collapse(false);
-    const sel = window.getSelection()!;
-    sel.removeAllRanges();
-    sel.addRange(range);
-  }
-}