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

package/src/lib/v2/radio-button/radio.ts

@@ -1,640 +0,0 @@
-import { _IdGenerator, FocusMonitor, FocusOrigin } from '@angular/cdk/a11y';
-import { UniqueSelectionDispatcher } from '@angular/cdk/collections';
-import {
-  AfterContentInit,
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ContentChildren,
-  Directive,
-  DoCheck,
-  ElementRef,
-  EventEmitter,
-  InjectionToken,
-  Injector,
-  Input,
-  NgZone,
-  OnDestroy,
-  OnInit,
-  Output,
-  QueryList,
-  ViewChild,
-  ViewEncapsulation,
-  afterNextRender,
-  booleanAttribute,
-  forwardRef,
-  inject,
-  numberAttribute,
-  HostAttributeToken,
-  Renderer2,
-} from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { Subscription } from 'rxjs';
-import { _CdkPrivateStyleLoader } from '@angular/cdk/private';
-
-/**
- * Change payload emitted by both group and individual radio buttons.
- * `source` is the button that triggered the change; `value` is its current value.
- */
-export class RadioChange<T = any> {
-  constructor(public source: MDRadioButton, public value: T) {}
-}
-
-/** ControlValueAccessor provider for the radio group. */
-export const RADIO_GROUP_CONTROL_VALUE_ACCESSOR: any = {
-  provide: NG_VALUE_ACCESSOR,
-  useExisting: forwardRef(() => MDRadioGroup),
-  multi: true,
-};
-
-/** Token to inject the parent group into child radio buttons. */
-export const MD_RADIO_GROUP = new InjectionToken<MDRadioGroup>('MDRadioGroup');
-
-/**
- * Radio group directive: manages a set of `md-radio-button` children.
- *
- * Responsibilities:
- * - Keeps a single selection (mutual exclusivity).
- * - Syncs `name` across all child radios.
- * - Integrates with Angular forms via ControlValueAccessor.
- * - Forwards `disabled`, `required`, and `disabledInteractive` to children.
- */
-@Directive({
-  selector: 'md-radio-group',
-  exportAs: 'mdRadioGroup',
-  providers: [RADIO_GROUP_CONTROL_VALUE_ACCESSOR, { provide: MD_RADIO_GROUP, useExisting: MDRadioGroup }],
-  host: {
-    role: 'radiogroup',
-    class: 'mdc-radio-group',
-  },
-})
-export class MDRadioGroup implements AfterContentInit, OnDestroy, ControlValueAccessor {
-  /** Triggers CD when value/flags change via setters. */
-  private _changeDetector = inject(ChangeDetectorRef);
-
-  /** Currently selected value (model). */
-  private _value: any = null;
-
-  /** Shared `name` for all child radios (defaults to unique id). */
-  private _name: string = inject(_IdGenerator).getId('radio-group-');
-
-  /** Reference to the selected radio (if any). */
-  private _selected: MDRadioButton | null = null;
-
-  /** True after first content init; used to gate change emissions. */
-  private _isInitialized: boolean = false;
-
-  /** Group-level disabled flag; propagated to children. */
-  private _disabled: boolean = false;
-
-  /** Group-level required flag; propagated to children. */
-  private _required: boolean = false;
-
-  /** Subscription to children changes (add/remove). */
-  private _buttonChanges: Subscription;
-
-  /** ngModel/FormControl onChange callback. */
-  _controlValueAccessorChangeFn: (value: any) => void = () => {};
-
-  /** ngModel/FormControl onTouched callback. */
-  onTouched: () => any = () => {};
-
-  /** Emits when selection changes after init. */
-  @Output() readonly change: EventEmitter<RadioChange> = new EventEmitter<RadioChange>();
-
-  /** Child radios discovered in content. */
-  @ContentChildren(forwardRef(() => MDRadioButton), { descendants: true }) _radios: QueryList<MDRadioButton>;
-
-  /** Group name getter/setter (propagates to children). */
-  @Input()
-  get name(): string {
-    return this._name;
-  }
-  set name(value: string) {
-    this._name = value;
-    this._updateRadioButtonNames();
-  }
-
-  /** Model value getter/setter; updates selected radio accordingly. */
-  @Input()
-  get value(): any {
-    return this._value;
-  }
-  set value(newValue: any) {
-    if (this._value !== newValue) {
-      this._value = newValue;
-      this._updateSelectedRadioFromValue();
-      this._checkSelectedRadioButton();
-    }
-  }
-
-  /** Ensures the selected radio is actually checked. */
-  _checkSelectedRadioButton() {
-    if (this._selected && !this._selected.checked) {
-      this._selected.checked = true;
-    }
-  }
-
-  /** Selected radio getter/setter; also sets group value. */
-  @Input()
-  get selected() {
-    return this._selected;
-  }
-  set selected(selected: MDRadioButton | null) {
-    this._selected = selected;
-    this.value = selected ? selected.value : null;
-    this._checkSelectedRadioButton();
-  }
-
-  /** Group disabled getter/setter; marks children for check. */
-  @Input({ transform: booleanAttribute })
-  get disabled(): boolean {
-    return this._disabled;
-  }
-  set disabled(value: boolean) {
-    this._disabled = value;
-    this._markRadiosForCheck();
-  }
-
-  /** Group required getter/setter; marks children for check. */
-  @Input({ transform: booleanAttribute })
-  get required(): boolean {
-    return this._required;
-  }
-  set required(value: boolean) {
-    this._required = value;
-    this._markRadiosForCheck();
-  }
-
-  /**
-   * If true, disabled items may still be focusable/interactive
-   * (special a11y scenarios). Propagated to children.
-   */
-  @Input({ transform: booleanAttribute })
-  get disabledInteractive(): boolean {
-    return this._disabledInteractive;
-  }
-  set disabledInteractive(value: boolean) {
-    this._disabledInteractive = value;
-    this._markRadiosForCheck();
-  }
-  private _disabledInteractive = false;
-
-  /** Overloads kept for compatibility; actual ctor is empty. */
-  constructor(...args: unknown[]);
-  constructor() {}
-
-  /** After content init, watch for dynamic child list changes. */
-  ngAfterContentInit() {
-    this._isInitialized = true;
-    this._buttonChanges = this._radios.changes.subscribe(() => {
-      if (this.selected && !this._radios.find((radio) => radio === this.selected)) {
-        this._selected = null;
-      }
-    });
-  }
-
-  /** Clean up subscriptions. */
-  ngOnDestroy() {
-    this._buttonChanges?.unsubscribe();
-  }
-
-  /** Mark group as touched (used by children on blur). */
-  _touch() {
-    if (this.onTouched) {
-      this.onTouched();
-    }
-  }
-
-  /** Propagate `name` to child radios and mark them for check. */
-  private _updateRadioButtonNames(): void {
-    if (this._radios) {
-      this._radios.forEach((radio) => {
-        radio.name = this.name;
-        radio._markForCheck();
-      });
-    }
-  }
-
-  /** Update `checked` on children based on current group value. */
-  private _updateSelectedRadioFromValue(): void {
-    const isAlreadySelected = this._selected !== null && this._selected.value === this._value;
-    if (this._radios && !isAlreadySelected) {
-      this._selected = null;
-      this._radios.forEach((radio) => {
-        radio.checked = this.value === radio.value;
-        if (radio.checked) {
-          this._selected = radio;
-        }
-      });
-    }
-  }
-
-  /** Emit `change` when selection altered by user after init. */
-  _emitChangeEvent(): void {
-    if (this._isInitialized) {
-      this.change.emit(new RadioChange(this._selected!, this._value));
-    }
-  }
-
-  /** Ask all children to run CD (OnPush-safe updates). */
-  _markRadiosForCheck() {
-    if (this._radios) {
-      this._radios.forEach((radio) => radio._markForCheck());
-    }
-  }
-
-  /** Write model value from forms API. */
-  writeValue(value: any) {
-    this.value = value;
-    this._changeDetector.markForCheck();
-  }
-
-  /** Register forms onChange callback. */
-  registerOnChange(fn: (value: any) => void) {
-    this._controlValueAccessorChangeFn = fn;
-  }
-
-  /** Register forms onTouched callback. */
-  registerOnTouched(fn: any) {
-    this.onTouched = fn;
-  }
-
-  /** Set disabled via forms API. */
-  setDisabledState(isDisabled: boolean) {
-    this.disabled = isDisabled;
-    this._changeDetector.markForCheck();
-  }
-}
-
-/**
- * Single radio button component.
- *
- * Responsibilities:
- * - Manages its own checked/disabled state.
- * - Coordinates with its parent `MDRadioGroup`.
- * - Emits `change` when user selects it.
- * - Handles focus/keyboard via CDK FocusMonitor.
- */
-@Component({
-  selector: 'md-radio-button',
-  templateUrl: 'radio.html',
-  styleUrl: 'radio.scss',
-  host: {
-    class: 'mdc-radio-button',
-    '[attr.id]': 'id',
-    '[class.mdc-radio-checked]': 'checked',
-    '[class.mdc-radio-disabled]': 'disabled',
-    '[class.mdc-radio-disabled-interactive]': 'disabledInteractive',
-    '[class.animation-noopable]': '_noopAnimations',
-    '[attr.tabindex]': 'null',
-    '[attr.aria-label]': 'null',
-    '[attr.aria-labelledby]': 'null',
-    '[attr.aria-describedby]': 'null',
-    '(focus)': '_inputElement.nativeElement.focus()',
-  },
-  exportAs: 'mdRadioButton',
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MDRadioButton implements OnInit, AfterViewInit, DoCheck, OnDestroy {
-  /** Host element reference (used by FocusMonitor and listeners). */
-  protected _elementRef = inject(ElementRef);
-
-  /** Change detector to request view updates under OnPush. */
-  private _changeDetector = inject(ChangeDetectorRef);
-
-  /** CDK FocusMonitor to handle programmatic focus origins. */
-  private _focusMonitor = inject(FocusMonitor);
-
-  /** Ensures unique selection across same-name radios. */
-  private _radioDispatcher = inject(UniqueSelectionDispatcher);
-
-  /** Zone for running event listeners outside Angular (perf). */
-  private _ngZone = inject(NgZone);
-
-  /** Renderer for low-level DOM events binding. */
-  private _renderer = inject(Renderer2);
-
-  /** Unique id seed for host/input ids. */
-  private _uniqueId = inject(_IdGenerator).getId('radio-');
-
-  /** Cleanup function for native click listener. */
-  private _cleanupClick: (() => void) | undefined;
-
-  /** Element id (defaults to unique id). */
-  @Input() id: string = this._uniqueId;
-
-  /** Shared group name; set by group or consumer. */
-  @Input() name: string;
-
-  /** ARIA label text for input (if no external label). */
-  @Input('aria-label') ariaLabel: string;
-
-  /** Id of element that labels this input. */
-  @Input('aria-labelledby') ariaLabelledby: string;
-
-  /** Id of element that describes this input. */
-  @Input('aria-describedby') ariaDescribedby: string;
-
-  /**
-   * Tabindex for internal input; normalized via numberAttribute.
-   * Default is 0 so item can be focused when selected.
-   */
-  @Input({
-    transform: (value: unknown) => (value == null ? 0 : numberAttribute(value)),
-  })
-  tabIndex: number = 0;
-
-  /** Checked state with group coordination and dispatcher notify. */
-  @Input({ transform: booleanAttribute })
-  get checked(): boolean {
-    return this._checked;
-  }
-  set checked(value: boolean) {
-    if (this._checked !== value) {
-      this._checked = value;
-
-      // Sync with parent group value and selected reference.
-      if (value && this.radioGroup && this.radioGroup.value !== this.value) {
-        this.radioGroup.selected = this;
-      } else if (!value && this.radioGroup && this.radioGroup.value === this.value) {
-        this.radioGroup.selected = null;
-      }
-
-      // Notify other radios with the same name.
-      if (value) {
-        this._radioDispatcher.notify(this.id, this.name);
-      }
-
-      this._changeDetector.markForCheck();
-    }
-  }
-
-  /** Arbitrary value associated with this radio. */
-  @Input()
-  get value(): any {
-    return this._value;
-  }
-  set value(value: any) {
-    if (this._value !== value) {
-      this._value = value;
-
-      // If part of a group, keep checked state in sync with group's value.
-      if (this.radioGroup !== null) {
-        if (!this.checked) {
-          this.checked = this.radioGroup.value === value;
-        }
-        if (this.checked) {
-          this.radioGroup.selected = this;
-        }
-      }
-    }
-  }
-
-  /** Disabled state; considers group-level disabled as well. */
-  @Input({ transform: booleanAttribute })
-  get disabled(): boolean {
-    return this._disabled || (this.radioGroup !== null && this.radioGroup.disabled);
-  }
-  set disabled(value: boolean) {
-    this._setDisabled(value);
-  }
-
-  /** Required state; considers group-level required as well. */
-  @Input({ transform: booleanAttribute })
-  get required(): boolean {
-    return this._required || (this.radioGroup && this.radioGroup.required);
-  }
-  set required(value: boolean) {
-    if (value !== this._required) {
-      this._changeDetector.markForCheck();
-    }
-    this._required = value;
-  }
-
-  /**
-   * If true, item remains interactive/focusable even when disabled.
-   * Also considers group-level disabledInteractive.
-   */
-  @Input({ transform: booleanAttribute })
-  get disabledInteractive(): boolean {
-    return this._disabledInteractive || (this.radioGroup !== null && this.radioGroup.disabledInteractive);
-  }
-  set disabledInteractive(value: boolean) {
-    this._disabledInteractive = value;
-  }
-  private _disabledInteractive: boolean;
-
-  /** Emits when this particular radio is selected by the user. */
-  @Output() readonly change: EventEmitter<RadioChange> = new EventEmitter<RadioChange>();
-
-  /** Optional reference to parent group (injected). */
-  radioGroup: MDRadioGroup;
-
-  /** Id for internal input element. */
-  get inputId(): string {
-    return `${this.id || this._uniqueId}-input`;
-  }
-
-  /** Backing fields for state. */
-  private _checked: boolean = false;
-  private _disabled: boolean;
-  private _required: boolean;
-  private _value: any = null;
-
-  /** Callback to unlisten from unique selection dispatcher. */
-  private _removeUniqueSelectionListener: () => void = () => {};
-
-  /** Tracks last applied tabindex for optimization. */
-  private _previousTabIndex: number | undefined;
-
-  /** Template refs. */
-  @ViewChild('input') _inputElement: ElementRef<HTMLInputElement>;
-
-  /** Placeholder for potential animations flag (wired via template). */
-  @ViewChild('formField', { read: ElementRef, static: true })
-  _noopAnimations = false;
-
-  /** Injector used for afterNextRender microtask scheduling. */
-  private _injector = inject(Injector);
-
-  /**
-   * Inject parent group (optional) and host tabindex.
-   * Also initializes disabledInteractive default.
-   */
-  constructor() {
-    const radioGroup = inject<MDRadioGroup>(MD_RADIO_GROUP, { optional: true })!;
-    const tabIndex = inject(new HostAttributeToken('tabindex'), { optional: true });
-    this.radioGroup = radioGroup;
-    this._disabledInteractive = false;
-    if (tabIndex) {
-      this.tabIndex = numberAttribute(tabIndex, 0);
-    }
-  }
-
-  /**
-   * Programmatic focus API.
-   * If `origin` provided, uses FocusMonitor to set proper focus classes.
-   */
-  focus(options?: FocusOptions, origin?: FocusOrigin): void {
-    if (origin) {
-      this._focusMonitor.focusVia(this._inputElement, origin, options);
-    } else {
-      this._inputElement.nativeElement.focus(options);
-    }
-  }
-
-  /** Ask view to update (used by group). */
-  _markForCheck() {
-    this._changeDetector.markForCheck();
-  }
-
-  /** Initialize from group (name/value) and subscribe to unique selection dispatcher. */
-  ngOnInit() {
-    if (this.radioGroup) {
-      this.checked = this.radioGroup.value === this._value;
-      if (this.checked) {
-        this.radioGroup.selected = this;
-      }
-      this.name = this.radioGroup.name;
-    }
-    this._removeUniqueSelectionListener = this._radioDispatcher.listen((id, name) => {
-      if (id !== this.id && name === this.name) {
-        this.checked = false;
-      }
-    });
-  }
-
-  /** Keep tabindexes updated so only selected item is in tab order. */
-  ngDoCheck(): void {
-    this._updateTabIndex();
-  }
-
-  /** Attach focus monitor and click handler outside Angular for perf. */
-  ngAfterViewInit() {
-    this._updateTabIndex();
-
-    this._focusMonitor.monitor(this._elementRef, true).subscribe((focusOrigin) => {
-      // When focus leaves the host entirely, mark the group as touched.
-      if (!focusOrigin && this.radioGroup) {
-        this.radioGroup._touch();
-      }
-    });
-
-    // Prevent change detection storms: add listener outside Angular.
-    this._ngZone.runOutsideAngular(() => {
-      this._cleanupClick = this._renderer.listen(this._inputElement.nativeElement, 'click', this._onInputClick);
-    });
-  }
-
-  /** Cleanup listeners and monitors. */
-  ngOnDestroy() {
-    this._cleanupClick?.();
-    this._focusMonitor.stopMonitoring(this._elementRef);
-    this._removeUniqueSelectionListener();
-  }
-
-  /** Emit own change and, if part of a group, notify the group. */
-  private _emitChangeEvent(): void {
-    this.change.emit(new RadioChange(this, this._value));
-  }
-
-  /**
-   * Handles interaction on the real input.
-   * Ensures single selection, emits change, updates group model.
-   */
-  _onInputInteraction(event: Event) {
-    event.stopPropagation();
-
-    if (!this.checked && !this.disabled) {
-      const groupValueChanged = this.radioGroup && this.value !== this.radioGroup.value;
-
-      this.checked = true;
-      this._emitChangeEvent();
-
-      if (this.radioGroup) {
-        this.radioGroup._controlValueAccessorChangeFn(this.value);
-        if (groupValueChanged) {
-          this.radioGroup._emitChangeEvent();
-        }
-      }
-    }
-  }
-
-  /**
-   * Click on the visual/touch target should behave like clicking the input.
-   * Also refocus the input if allowed.
-   */
-  _onTouchTargetClick(event: Event) {
-    this._onInputInteraction(event);
-    if (!this.disabled || this.disabledInteractive) {
-      this._inputElement?.nativeElement.focus();
-    }
-  }
-
-  /** Setter for disabled that triggers CD when value changes. */
-  protected _setDisabled(value: boolean) {
-    if (this._disabled !== value) {
-      this._disabled = value;
-      this._changeDetector.markForCheck();
-    }
-  }
-
-  /**
-   * Prevent native input click from toggling when disabled but `disabledInteractive` is true.
-   * Keeps UI consistent with intended behavior.
-   */
-  private _onInputClick = (event: Event) => {
-    if (this.disabled && this.disabledInteractive) {
-      event.preventDefault();
-    }
-  };
-
-  /**
-   * Maintain roving tabindex:
-   * - Selected radio keeps its configured tabIndex (defaults to 0).
-   * - Non-selected radios get tabindex="-1".
-   * Also re-routes focus to the selected item if needed after render.
-   */
-  private _updateTabIndex() {
-    const group = this.radioGroup;
-    let value: number;
-
-    if (!group || !group.selected || this.disabled) {
-      value = this.tabIndex;
-    } else {
-      value = group.selected === this ? this.tabIndex : -1;
-    }
-
-    if (value !== this._previousTabIndex) {
-      const input: HTMLInputElement | undefined = this._inputElement?.nativeElement;
-
-      if (input) {
-        input.setAttribute('tabindex', value + '');
-        this._previousTabIndex = value;
-
-        // After the DOM updates, if focus landed on a non-selected radio, redirect it.
-        afterNextRender(
-          () => {
-            queueMicrotask(() => {
-              if (
-                group &&
-                group.selected &&
-                group.selected !== this &&
-                document.activeElement === input
-              ) {
-                group.selected?._inputElement.nativeElement.focus();
-                if (document.activeElement === input) {
-                  this._inputElement.nativeElement.blur();
-                }
-              }
-            });
-          },
-          { injector: this._injector }
-        );
-      }
-    }
-  }
-}

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

@@ -1,5 +0,0 @@
-export * from "./option-group";
-export * from "./option";
-export * from "./select";
-export * from "./pseudo-checkbox";
-export * from "./select.module";

package/src/lib/v2/select/option-group.html

@@ -1,9 +0,0 @@
-<span
-  class="mdc-optgroup-label"
-  role="presentation"
-  [class.mdc-list-item--disabled]="disabled"
-  [id]="_labelId">
-  <span class="mdc-list-item__primary-text">{{ label }} <ng-content></ng-content></span>
-</span>
-
-<ng-content select="md-option, ng-container"></ng-content>

package/src/lib/v2/select/option-group.scss

@@ -1,33 +0,0 @@
-@use './../../styles/vars.scss' as color-vars;
-
-.mdc-optgroup-label {
-    display: flex;
-    position: relative;
-    align-items: center;
-    justify-content: flex-start;
-    overflow: hidden;
-    min-height: 36px;
-    padding: 0 8px;
-    outline: none;
-}
-
-.mdc-optgroup {
-    color: color-vars.$Dark-Gray-1;
-    font-family: 'Open Sans';
-    line-height: 1.25rem;
-    font-size: .875rem;
-    letter-spacing: .006rem;
-    font-weight: 500;
-}
-
-.mdc-optgroup-label .mdc-list-item__primary-text {
-    font-size: inherit;
-    font-weight: inherit;
-    letter-spacing: inherit;
-    line-height: inherit;
-    font-family: inherit;
-    text-decoration: inherit;
-    text-transform: inherit;
-    white-space: normal;
-    color: inherit;
-}