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

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

@@ -1,66 +0,0 @@
-import { _IdGenerator } from '@angular/cdk/a11y';
-import {
-  booleanAttribute,
-  Component,
-  inject,
-  Input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { MDSelect } from './select';
-
-@Component({
-  selector: 'md-option-group',
-  encapsulation: ViewEncapsulation.None,
-  templateUrl: './option-group.html',
-  styleUrls: ['./option-group.scss'],
-  standalone: true,
-  host: {
-    class: 'mdc-optgroup',
-  },
-})
-/**
- * Groups related `<md-option>` items under a labeled header.
- *
- * @remarks
- * - When `disabled` is `true`, the entire group is rendered inert.
- * - The generated label id is exposed as {@link _labelId} for a11y wiring.
- *
- * @example
- * ```html
- * <md-option-group label="Fruits">
- *   <md-option value="ap">Apple</md-option>
- *   <md-option value="ba">Banana</md-option>
- * </md-option-group>
- * ```
- */
-export class MDOptionGroup {
-  /** Visible group header shown above the contained options. */
-  @Input() label: string;
-
-  /**
-   * Disables the entire group (non-interactive/inert rendering).
-   * @default false
-   */
-  @Input({ transform: booleanAttribute }) disabled: boolean = false;
-
-  /**
-   * Unique id used to associate the rendered label with the grouped options for a11y.
-   * Useful as `aria-labelledby` target on the options container.
-   */
-  _labelId: string = inject(_IdGenerator).getId('optgroup-label-');
-
-  /**
-   * Internal flag for templates to make the group non-interactive without altering ARIA.
-   * Can be toggled by the parent template if additional gating is needed.
-   * @internal
-   */
-  _inert: boolean;
-
-  /**
-   * Optional reference to the parent select; useful for contextual checks in the template.
-   * Kept for side-effects/context only; not required for basic grouping behavior.
-   */
-  constructor() {
-    const parent = inject<MDSelect>(MDSelect, { optional: true });
-  }
-}

package/src/lib/v2/select/option-module.ts

@@ -1,11 +0,0 @@
-import {BidiModule} from '@angular/cdk/bidi';
-import {NgModule} from '@angular/core';
-import {MDOption} from './option';
-import { MDOptionGroup } from 'ui-kit-lib';
-import { MDPseudoCheckboxModule } from './pseudo-checkbox-module';
-
-@NgModule({
-  imports: [MDPseudoCheckboxModule, MDOption, MDOptionGroup],
-  exports: [MDOption, MDOptionGroup, BidiModule],
-})
-export class MDOptionModule {}

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

@@ -1,22 +0,0 @@
-@if (multiple) {
-<pseudo-checkbox
-    class="mdc-option-pseudo-checkbox"
-    [disabled]="disabled"
-    [state]="selected ? 'checked' : 'unchecked'"
-    aria-hidden="true"
-></pseudo-checkbox>
-}
-
-<ng-content select="icon"></ng-content>
-
-<span class="mdc-list-item__primary-text" #text><ng-content></ng-content></span>
-
-@if (!multiple && selected) {
-<pseudo-checkbox
-    class="mdc-option-pseudo-checkbox"
-    [disabled]="disabled"
-    state="checked"
-    aria-hidden="true"
-    appearance="minimal"
-></pseudo-checkbox>
-}

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

@@ -1,59 +0,0 @@
-@use './../../styles/vars.scss' as color-vars;
-
-md-option {
-    -webkit-user-select: none;
-    user-select: none;
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-font-smoothing: antialiased;
-    display: flex;
-    position: relative;
-    align-items: center;
-    justify-content: flex-start;
-    overflow: hidden;
-    min-height: 36px;
-    padding: 0 8px;
-    cursor: pointer;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    color: color-vars.$Black-Color;
-    font-family: 'Open Sans';
-    line-height: 1.25rem;
-    font-size: 1rem;
-    letter-spacing: 0.006rem;
-    font-weight: 400;
-}
-
-.mdc-option .pseudo-checkbox-full {
-    margin-right: 16px;
-    flex-shrink: 0;
-}
-
-.mdc-option .pseudo-checkbox-minimal {
-    margin-left: 16px;
-    flex-shrink: 0;
-}
-
-.mdc-option.mdc-list-item {
-    align-items: center;
-    background: rgba(0, 0, 0, 0);
-}
-
-.mdc-option.mdc-option-active.mdc-list-item {
-    background-color: color-mix(in srgb, #1a1b1f calc(0.08 * 100%), transparent);
-    outline: 0;
-}
-
-.mdc-option .mdc-list-item__primary-text {
-    white-space: normal;
-    font-size: inherit;
-    font-weight: inherit;
-    letter-spacing: inherit;
-    line-height: inherit;
-    font-family: inherit;
-    text-decoration: inherit;
-    text-transform: inherit;
-    margin-right: auto;
-}
-
-.mdc-option:hover:not(.mdc-list-item--disabled) {
-    background-color: color-mix(in srgb, #1a1b1f calc(0.08 * 100%), transparent);
-}

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

@@ -1,288 +0,0 @@
-import {
-  booleanAttribute,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EventEmitter,
-  inject,
-  Input,
-  Output,
-  QueryList,
-  signal,
-  ViewChild,
-  ViewEncapsulation,
-} from '@angular/core';
-import { _IdGenerator, FocusOrigin } from '@angular/cdk/a11y';
-import { ENTER, hasModifierKey, SPACE } from '@angular/cdk/keycodes';
-import { Subject } from 'rxjs';
-import { MDOptionGroup } from './option-group';
-import { MDSelect } from './select';
-import { PseudoCheckbox } from './pseudo-checkbox';
-
-/**
- * Event payload emitted when an option's selection state changes.
- *
- * @template T Model value type.
- */
-export class MDOptionSelectionChange<T = any> {
-  constructor(public source: MDOption<T>, public isUserInput = false) {}
-}
-
-@Component({
-  selector: 'md-option',
-  encapsulation: ViewEncapsulation.None,
-  templateUrl: './option.html',
-  styleUrls: ['./option.scss'],
-  host: {
-    role: 'option',
-    '[class.mdc-list-item--selected]': 'selected',
-    '[class.mdc-option-multiple]': 'multiple',
-    '[class.mdc-option-active]': 'active',
-    '[class.mdc-list-item--disabled]': 'disabled',
-    '[id]': 'id',
-    '[attr.aria-selected]': 'selected',
-    '[attr.aria-disabled]': 'disabled.toString()',
-    '(click)': '_selectViaInteraction()',
-    '(keydown)': '_handleKeydown($event)',
-    class: 'mdc-option mdc-list-item',
-  },
-  standalone: true,
-  imports: [PseudoCheckbox],
-})
-/**
- * Single selectable option used inside {@link MDSelect} and similar controls.
- *
- * @remarks
- * - Supports single and multiple selection modes (derived from parent select).
- * - Inherits disabled state from the nearest {@link MDOptionGroup}, if present.
- * - Emits {@link MDOption.onSelectionChange} on user/programmatic updates.
- */
-export class MDOption<T = any> {
-  /** Host element reference for focus & DOM access. */
-  private _element = inject<ElementRef<HTMLElement>>(ElementRef);
-
-  /** Change detector for OnPush-friendly manual marks. */
-  _changeDetectorRef = inject(ChangeDetectorRef);
-
-  /** Optional parent select to derive `multiple` and for coordination. */
-  private _parent = inject<MDSelect>(MDSelect, { optional: true });
-
-  /** Optional parent group to inherit disabled state. */
-  group = inject<MDOptionGroup>(MDOptionGroup, { optional: true });
-
-  /** Internal selection state. */
-  private _selected = false;
-
-  /** Internal active (highlighted) state used by typeahead/keyboard nav. */
-  private _active = false;
-
-  /** Model value associated with this option. */
-  @Input() value: T;
-
-  /** Unique id for the option (used by host/id bindings). */
-  @Input() id: string = inject(_IdGenerator).getId('md-option-');
-
-  /**
-   * Disabled state: `true` if the group is disabled OR the individual disabled signal is `true`.
-   * Group-level disabled takes precedence and is observed reactively.
-   */
-  @Input({ transform: booleanAttribute })
-  get disabled(): boolean {
-    return (this.group && this.group.disabled) || this._disabled();
-  }
-  set disabled(value: boolean) {
-    this._disabled.set(value);
-  }
-
-  /** Internal reactive flag for individual disabled state. */
-  private _disabled = signal(false);
-
-  /** Whether the parent select is in multi-selection mode. */
-  get multiple() {
-    return this._parent && this._parent.multiple;
-  }
-
-  /** Public read-only selection flag. */
-  get selected(): boolean {
-    return this._selected;
-  }
-
-  /** Emits whenever selection state changes (user or programmatic). */
-  @Output() readonly onSelectionChange = new EventEmitter<MDOptionSelectionChange<T>>();
-
-  /**
-   * Reference to the visible text node inside option.
-   * Used to compute {@link viewValue} / {@link getLabel}.
-   */
-  @ViewChild('text', { static: true }) _text: ElementRef<HTMLElement> | undefined;
-
-  /** Stream used by parent components to observe state changes. */
-  readonly _stateChanges = new Subject<void>();
-
-  constructor() {}
-
-  /** Whether this option is currently "active" (keyboard highlight). */
-  get active(): boolean {
-    return this._active;
-  }
-
-  /**
-   * Select this option programmatically.
-   * @param emitEvent When `true` (default), emits {@link onSelectionChange}.
-   */
-  select(emitEvent = true): void {
-    if (!this._selected) {
-      this._selected = true;
-      this._changeDetectorRef.markForCheck();
-
-      if (emitEvent) {
-        this._emitSelectionChangeEvent();
-      }
-    }
-  }
-
-  /**
-   * Handle keyboard selection: `ENTER`/`SPACE` toggles selection
-   * when no modifier keys are pressed.
-   */
-  _handleKeydown(event: KeyboardEvent): void {
-    if ((event.keyCode === ENTER || event.keyCode === SPACE) && !hasModifierKey(event)) {
-      this._selectViaInteraction();
-      event.preventDefault();
-    }
-  }
-
-  /**
-   * Toggle/select via click or keyboard; respects disabled and multiple modes.
-   * Marks for check and emits user-input-flavored selection event.
-   */
-  _selectViaInteraction(): void {
-    if (!this.disabled) {
-      this._selected = this.multiple ? !this._selected : true;
-      this._changeDetectorRef.markForCheck();
-      this._emitSelectionChangeEvent(true);
-    }
-  }
-
-  /**
-   * Deselect this option programmatically.
-   * @param emitEvent When `true` (default), emits {@link onSelectionChange}.
-   */
-  deselect(emitEvent = true): void {
-    if (this._selected) {
-      this._selected = false;
-      this._changeDetectorRef.markForCheck();
-
-      if (emitEvent) {
-        this._emitSelectionChangeEvent();
-      }
-    }
-  }
-
-  /**
-   * Move focus to this option's host element.
-   * @param _origin Optional {@link FocusOrigin} (not used by default).
-   * @param options Standard {@link FocusOptions}.
-   */
-  focus(_origin?: FocusOrigin, options?: FocusOptions): void {
-    const element = this._getHostElement();
-    if (typeof element.focus === 'function') {
-      element.focus(options);
-    }
-    // No change detection needed; focus is imperative.
-  }
-
-  /** Visible string representation of the option (trimmed text content). */
-  get viewValue(): string {
-    return (this._text?.nativeElement.textContent || '').trim();
-  }
-
-  /** Alias for {@link viewValue}; kept for API parity with other option components. */
-  getLabel(): string {
-    return this.viewValue;
-  }
-
-  /** Apply "active" visual styles (used by parent for keyboard navigation). */
-  setActiveStyles(): void {
-    if (!this._active) {
-      this._active = true;
-      this._changeDetectorRef.markForCheck();
-    }
-  }
-
-  /** Remove "active" visual styles. */
-  setInactiveStyles(): void {
-    if (this._active) {
-      this._active = false;
-      this._changeDetectorRef.markForCheck();
-    }
-  }
-
-  /** Return the underlying host `HTMLElement`. */
-  _getHostElement(): HTMLElement {
-    return this._element.nativeElement;
-  }
-
-  /**
-   * Emit selection change payload; optionally mark as user-driven.
-   * @param isUserInput Whether the change originated from user interaction.
-   */
-  private _emitSelectionChangeEvent(isUserInput = false): void {
-    this.onSelectionChange.emit(new MDOptionSelectionChange<T>(this, isUserInput));
-  }
-}
-
-/**
- * Count how many group labels appear before a given option index.
- * Useful for computing aria-posinset / active-descendant offsets when groups are present.
- *
- * @param optionIndex Index of the target option among all rendered options.
- * @param options     `QueryList` of all `MDOption` items (in render order).
- * @param optionGroups `QueryList` of `MDOptionGroup` (in render order).
- * @returns Number of group headers preceding the option.
- */
-export function _countGroupLabelsBeforeOption(
-  optionIndex: number,
-  options: QueryList<MDOption>,
-  optionGroups: QueryList<MDOptionGroup>
-): number {
-  if (optionGroups.length) {
-    let optionsArray = options.toArray();
-    let groups = optionGroups.toArray();
-    let groupCounter = 0;
-
-    for (let i = 0; i < optionIndex + 1; i++) {
-      if (optionsArray[i].group && optionsArray[i].group === groups[groupCounter]) {
-        groupCounter++;
-      }
-    }
-    return groupCounter;
-  }
-  return 0;
-}
-
-/**
- * Compute the `scrollTop` needed to bring an option fully into view inside a panel.
- *
- * @param optionOffset          Distance (px) from top of panel to the top of the option.
- * @param optionHeight          Height of the option (px).
- * @param currentScrollPosition Current `scrollTop` of the panel.
- * @param panelHeight           Visible height of the panel (px).
- * @returns Desired `scrollTop` to ensure full visibility (or current if already visible).
- */
-export function _getOptionScrollPosition(
-  optionOffset: number,
-  optionHeight: number,
-  currentScrollPosition: number,
-  panelHeight: number
-): number {
-  if (optionOffset < currentScrollPosition) {
-    return optionOffset;
-  }
-
-  if (optionOffset + optionHeight > currentScrollPosition + panelHeight) {
-    return Math.max(0, optionOffset - panelHeight + optionHeight);
-  }
-
-  return currentScrollPosition;
-}

package/src/lib/v2/select/pseudo-checkbox-module.ts

@@ -1,9 +0,0 @@
-import {BidiModule} from '@angular/cdk/bidi';
-import {NgModule} from '@angular/core';
-import {PseudoCheckbox} from './pseudo-checkbox';
-
-@NgModule({
-  imports: [PseudoCheckbox],
-  exports: [PseudoCheckbox, BidiModule],
-})
-export class MDPseudoCheckboxModule {}

package/src/lib/v2/select/pseudo-checkbox.scss

@@ -1,121 +0,0 @@
-@use 'sass:math';
-
-@use './../../styles/vars.scss' as color-vars;
-
-.pseudo-checkbox {
-    border-radius: 2px;
-    cursor: pointer;
-    display: inline-block;
-    vertical-align: middle;
-    box-sizing: border-box;
-    position: relative;
-    flex-shrink: 0;
-    transition: border-color 90ms cubic-bezier(0, 0, 0.2, 0.1), background-color 90ms cubic-bezier(0, 0, 0.2, 0.1);
-
-    width: 18px;
-    height: 18px;
-
-    &::after {
-        position: absolute;
-        opacity: 0;
-        content: '';
-        border-bottom: 2px solid currentColor;
-        transition: opacity 90ms cubic-bezier(0, 0, 0.2, 0.1);
-    }
-}
-
-.pseudo-checkbox-disabled {
-    cursor: default;
-}
-
-.pseudo-checkbox-indeterminate::after {
-    left: 1px;
-    opacity: 1;
-    border-radius: 2px;
-}
-
-.pseudo-checkbox-checked::after {
-    left: 1px;
-    border-left: 2px solid currentColor;
-    transform: rotate(-45deg);
-    opacity: 1;
-    box-sizing: content-box;
-}
-
-.pseudo-checkbox-full {
-    border-color: #44474e;
-    border-width: 2px;
-    border-style: solid;
-
-    &.pseudo-checkbox-disabled {
-        border-color: color-mix(in srgb, #1a1b1f 38%, transparent);
-        opacity: 0.38;
-    }
-
-    &.pseudo-checkbox-checked,
-    &.pseudo-checkbox-indeterminate {
-        background-color: color-vars.$Link;
-        border-color: transparent;
-
-        &::after {
-            color: color-vars.$White;
-        }
-
-        &.pseudo-checkbox-disabled {
-            background-color: #e0e3e2;
-            opacity: 0.38;
-
-            &::after {
-                color: #101414;
-            }
-        }
-    }
-}
-
-.pseudo-checkbox-full {
-    &.pseudo-checkbox-checked::after {
-        width: 10px;
-        height: 4px;
-
-        transform-origin: center;
-
-        top: -1 * math.div(4px, math.sqrt(2));
-
-        left: 0;
-        bottom: 0;
-        right: 0;
-
-        margin: auto;
-    }
-    &.pseudo-checkbox-indeterminate::after {
-        top: 6px;
-        width: 12px;
-    }
-}
-
-.pseudo-checkbox-minimal {
-    &.pseudo-checkbox-checked::after {
-        width: 14px;
-        height: 6px;
-
-        transform-origin: center;
-
-        top: -1 * math.div(6px, math.sqrt(2));
-
-        left: 0;
-        bottom: 0;
-        right: 0;
-
-        margin: auto;
-    }
-}
-
-.pseudo-checkbox-minimal.pseudo-checkbox-checked::after {
-    color: color-vars.$Link;
-}
-
-
-.mdc-option .pseudo-checkbox-minimal {
-    margin-left: 16px;
-    flex-shrink: 0;
-}

package/src/lib/v2/select/pseudo-checkbox.ts

@@ -1,60 +0,0 @@
-import { Component, ViewEncapsulation, Input, ChangeDetectionStrategy } from '@angular/core';
-
-/** Visual states for the pseudo checkbox glyph. */
-export type PseudoCheckboxState = 'unchecked' | 'checked' | 'indeterminate';
-
-@Component({
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  selector: 'pseudo-checkbox',
-  styleUrl: 'pseudo-checkbox.scss',
-  template: '',
-  host: {
-    class: 'pseudo-checkbox',
-    '[class.pseudo-checkbox-indeterminate]': 'state === "indeterminate"',
-    '[class.pseudo-checkbox-checked]': 'state === "checked"',
-    '[class.pseudo-checkbox-disabled]': 'disabled',
-    '[class.pseudo-checkbox-minimal]': 'appearance === "minimal"',
-    '[class.pseudo-checkbox-full]': 'appearance === "full"',
-  },
-  standalone: true,
-})
-/**
- * Minimal visual-only checkbox glyph.
- *
- * @remarks
- * - This component renders no interactive behavior by itself; it’s intended as a purely
- *   presentational indicator (e.g., inside list options).
- * - Host classes reflect the current `state`, `disabled`, and `appearance` values.
- */
-export class PseudoCheckbox {
-  /**
-   * Visual state of the glyph.
-   * Affects host classes only; no behavior is implied.
-   * @default 'checked'
-   */
-  @Input() state: PseudoCheckboxState = 'checked';
-
-  /**
-   * Applies a disabled look.
-   * Parent/consumer is responsible for actual interactivity.
-   * @default false
-   */
-  @Input() disabled: boolean = false;
-
-  /**
-   * Size/style variant of the glyph.
-   * - `'minimal'` — compact indicator
-   * - `'full'`    — standard checkbox visuals
-   * @default 'full'
-   */
-  @Input() appearance: 'minimal' | 'full' = 'full';
-
-  constructor() {
-    // Example side effect: log the initial state after a tick.
-    // (Kept as-is; remove in production if not needed.)
-    setTimeout(() => {
-      console.log(this.state);
-    }, 1000);
-  }
-}

package/src/lib/v2/select/select.html

@@ -1,56 +0,0 @@
-<div cdk-overlay-origin
-     class="mdc-select-trigger"
-     (click)="open()"
-     #fallbackOverlayOrigin="cdkOverlayOrigin"
-     #trigger>
-
-  <div class="mdc-select-value" [attr.id]="_valueId">
-    @if (empty) {
-      <span class="mdc-select-placeholder mdc-select-min-line">{{placeholder}}</span>
-    } @else {
-      <span class="mdc-select-value-text">
-        @if (customTrigger) {
-          <ng-content select="select-trigger"></ng-content>
-        } @else {
-          <span class="mdc-select-min-line">{{triggerValue}}</span>
-        }
-      </span>
-    }
-  </div>
-
-  <div class="mdc-select-arrow-wrapper">
-    <div class="mdc-select-arrow">
-      <svg viewBox="0 0 24 24" width="24px" height="24px" focusable="false" aria-hidden="true">
-        <path d="M7 10l5 5 5-5z"/>
-      </svg>
-    </div>
-  </div>
-</div>
-<ng-template
-    cdk-connected-overlay
-    cdkConnectedOverlayLockPosition
-    cdkConnectedOverlayHasBackdrop
-    cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
-    [cdkConnectedOverlayDisableClose]="true"
-    [cdkConnectedOverlayScrollStrategy]="_scrollStrategy"
-    [cdkConnectedOverlayOrigin]="fallbackOverlayOrigin"
-    [cdkConnectedOverlayPositions]="_positions"
-    [cdkConnectedOverlayWidth]="_overlayWidth"
-    [cdkConnectedOverlayFlexibleDimensions]="true"
-    (detach)="close()"
-    (backdropClick)="close()"
-    (overlayKeydown)="_handleOverlayKeydown($event)"
->
-  <div
-    #panel
-    role="listbox"
-    tabindex="-1"
-    class="mdc-select-panel mdc-menu-surface select-panel-animations-enabled mdc-menu-surface--open"
-    [attr.id]="id + '-panel'"
-    [attr.aria-multiselectable]="multiple"
-    [attr.aria-label]="ariaLabel || null"
-    [ngClass]="panelClass"
-    (keydown)="_handleKeydown($event)">
-    <ng-content></ng-content>
-  </div>
-</ng-template>