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

package/src/lib/v2/switch/base-editor-helper.ts

@@ -1,148 +0,0 @@
-import {
-  booleanAttribute,
-  ChangeDetectorRef,
-  computed,
-  Directive,
-  inject,
-  input,
-  signal,
-} from '@angular/core';
-import { ControlValueAccessor } from '@angular/forms';
-
-@Directive({ standalone: true })
-/**
- * Base class for editable form-like components using Angular Signals and CVA.
- *
- * @remarks
- * - Implements `ControlValueAccessor` so children participate in Angular Forms.
- * - Exposes a signal-based `modelValue` and signalized inputs for UI state.
- * - Provides helpers for disabled-state handling and change detection.
- *
- * @example
- * ```ts
- * @Component({...})
- * export class MyToggle extends BaseEditableHolder {
- *   // call this.writeModelValue(newValue) on user action
- *   // and this.onModelChange(this.modelValue()) to propagate to the form.
- * }
- * ```
- *
- * @public
- */
-export class BaseEditableHolder implements ControlValueAccessor {
-  /** Change detector used by children to mark for check after updates. */
-  cd = inject(ChangeDetectorRef);
-
-  /**
-   * Reactive internal value for the control (Signal).
-   * @default undefined
-   */
-  modelValue = signal<string | string[] | any | undefined>(undefined);
-
-  /**
-   * Optional "required" flag as a signalized input.
-   * @remarks Value is transformed via `booleanAttribute`.
-   */
-  required = input(undefined, { transform: booleanAttribute });
-
-  /**
-   * Optional "invalid" flag as a signalized input (used for UI state).
-   * @remarks Value is transformed via `booleanAttribute`.
-   */
-  invalid = input(undefined, { transform: booleanAttribute });
-
-  /**
-   * Disabled input as a signal (explicit/external).
-   * @remarks Value is transformed via `booleanAttribute`.
-   */
-  disabled = input(undefined, { transform: booleanAttribute });
-
-  /** Optional control name (useful for forms & a11y attributes). */
-  name = input<string | undefined>();
-
-  /**
-   * Internal disabled state set via CVA's `setDisabledState`.
-   * @default false
-   * @internal
-   */
-  _disabled = signal<boolean>(false);
-
-  /**
-   * Effective disabled state:
-   * `true` if either the input `disabled()` is truthy OR `setDisabledState(true)` was called.
-   */
-  $disabled = computed(() => {
-    return this.disabled() || this._disabled();
-  });
-
-  /** CVA onChange callback (assigned by Angular Forms). */
-  onModelChange: Function = () => {};
-
-  /** CVA onTouched callback (assigned by Angular Forms). */
-  onModelTouched: Function = () => {};
-
-  /**
-   * Programmatically set the internal disabled state (used by `setDisabledState`).
-   * @param value New disabled state.
-   */
-  writeDisabledState(value: boolean) {
-    this._disabled.set(value);
-  }
-
-  /**
-   * Overridable hook invoked by `writeValue`.
-   * Child components can coerce or transform incoming values here.
-   * Call `setModelValue(value)` to persist.
-   *
-   * @param value Incoming value from the external model.
-   * @param setModelValue Callback to update the internal `modelValue`.
-   * @protected
-   */
-  protected writeControlValue(value: any, setModelValue?: (value: any) => void) {}
-
-  /**
-   * CVA: writes an external value into the control.
-   * Delegates to {@link writeControlValue} so children can customize behavior.
-   *
-   * @param value Value coming from the Angular Forms model.
-   */
-  writeValue(value: any) {
-    this.writeControlValue(value, this.writeModelValue.bind(this));
-  }
-
-  /**
-   * Updates the internal value signal (`modelValue`) from the component itself
-   * (e.g., on user input). This does **not** notify the Forms API by itself.
-   * Invoke {@link onModelChange} after this to propagate when appropriate.
-   *
-   * @param value New internal value to set.
-   */
-  writeModelValue(value: any) {
-    this.modelValue.set(value);
-  }
-
-  /**
-   * CVA: registers the callback to propagate value changes to Angular Forms.
-   * @param fn Callback invoked when the control's value changes.
-   */
-  registerOnChange(fn: Function) {
-    this.onModelChange = fn;
-  }
-
-  /**
-   * CVA: registers the callback to mark the control as touched.
-   * @param fn Callback invoked when the control is touched.
-   */
-  registerOnTouched(fn: Function) {
-    this.onModelTouched = fn;
-  }
-
-  /**
-   * CVA: enables/disables the control from the Forms API.
-   * @param val `true` to disable, `false` to enable.
-   */
-  setDisabledState(val: boolean) {
-    this.writeDisabledState(val);
-    this.cd.markForCheck();
-  }
-}

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

@@ -1,2 +0,0 @@
-export * from './switch.component';
-export * from './switch.module';

package/src/lib/v2/switch/switch.component.html

@@ -1,15 +0,0 @@
-<input
-    #input
-    class="toggleswitch-input"
-    [checked]="checked()"
-    type="checkbox"
-    role="switch"
-    [attr.required]="required() ? '' : undefined"
-    [attr.disabled]="$disabled() ? '' : undefined"
-    [attr.aria-checked]="checked()"
-    (focus)="onFocus()"
-    (blur)="onBlur()"
-/>
-<div class="toggleswitch-slider">
-    <div class="toggleswitch-handle"></div>
-</div>

package/src/lib/v2/switch/switch.component.scss

@@ -1,93 +0,0 @@
-@use './../../styles/vars.scss' as color-vars;
-
-$toggle-width: 40px;
-$toggle-height: 20px;
-
-$toggleswitch-handle-size: 1rem;
-$toggleswitch-slide-duration: 0.2s;
-$toggleswitch-border-radius: 10px;
-$toggleswitch-gap: 0.25rem;
-$toggleswitch-focus-ring-offset: 2px;
-$toggleswitch-focus-ring-width: 1px;
-$toggleswitch-focus-ring-style: solid;
-$toggleswitch-focus-ring-color: color-vars.$Link;
-
-md-switch {
-    display: inline-block;
-
-    position: relative;
-    width: $toggle-width;
-    height: $toggle-height;
-}
-
-.toggleswitch-input {
-    cursor: pointer;
-    appearance: none;
-    position: absolute;
-    top: 0;
-    inset-inline-start: 0;
-    width: 100%;
-    height: 100%;
-    padding: 0;
-    margin: 0;
-    opacity: 0;
-    z-index: 1;
-    outline: 0 none;
-    border-radius: 10px;
-}
-
-md-switch.toggleswitch-checked .toggleswitch-slider {
-    background: color-vars.$Link;
-    border-color: transparent;
-}
-
-md-switch.toggleswitch-checked .toggleswitch-handle {
-    inset-inline-start: calc($toggle-width - calc($toggleswitch-handle-size + $toggleswitch-gap));
-    background: #ffffff;
-    color: color-vars.$Link;
-}
-
-
-md-switch.disabled .toggleswitch-handle {
-    background: #64748b;
-}
-
-md-switch.disabled .toggleswitch-slider {
-    background: #e2e8f0;
-}
-
-
-.toggleswitch-slider {
-    cursor: pointer;
-    width: 100%;
-    height: 100%;
-    border-width: 1px;
-    border-style: solid;
-    border-color: transparent;
-    background: #cbd5e1;
-    border-radius: $toggleswitch-border-radius;
-    outline-color: transparent;
-    box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05);
-    transition: background $toggleswitch-slide-duration, color $toggleswitch-slide-duration,
-        border-color $toggleswitch-slide-duration, outline-color $toggleswitch-slide-duration,
-        box-shadow $toggleswitch-slide-duration;
-}
-
-.toggleswitch-handle {
-    position: absolute;
-    top: 50%;
-    background: #ffffff;
-    color: color-vars.$Link;
-    width: 1rem;
-    height: 1rem;
-    inset-inline-start: $toggleswitch-gap;
-    margin-block-start: calc((-1 * $toggleswitch-handle-size) / 2);
-    border-radius: $toggleswitch-border-radius;
-    transition: background $toggleswitch-slide-duration, color $toggleswitch-slide-duration,
-        inset-inline-start $toggleswitch-slide-duration, box-shadow $toggleswitch-slide-duration;
-}
-
-md-switch:not(.disabled):has(.toggleswitch-input:focus-visible) .toggleswitch-slider {
-    outline: $toggleswitch-focus-ring-width $toggleswitch-focus-ring-style $toggleswitch-focus-ring-color;
-    outline-offset: $toggleswitch-focus-ring-offset;
-}

package/src/lib/v2/switch/switch.component.ts

@@ -1,203 +0,0 @@
-import {
-  forwardRef,
-  Component,
-  Input,
-  OnInit,
-  ViewEncapsulation,
-  Output,
-  OnDestroy,
-  inject,
-  HostListener,
-  booleanAttribute,
-  EventEmitter,
-  ViewChild,
-  ElementRef,
-  numberAttribute,
-} from '@angular/core';
-import { ControlValueAccessor, NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { _IdGenerator } from '@angular/cdk/a11y';
-import { BaseEditableHolder } from './base-editor-helper';
-
-@Component({
-  selector: 'md-switch',
-  templateUrl: './switch.component.html',
-  styleUrls: ['./switch.component.scss'],
-  standalone: false,
-  encapsulation: ViewEncapsulation.None,
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => MDSwitch),
-      multi: true,
-    },
-    {
-      provide: NG_VALIDATORS,
-      useExisting: MDSwitch,
-      multi: true,
-    },
-  ],
-  host: {
-    '[class.toggleswitch-checked]': 'checked()',
-    '[class.disabled]': '$disabled()',
-    '[class.invalid]': 'invalid()',
-  },
-})
-/**
- * Toggle switch compatible with Angular Forms.
- *
- * @remarks
- * - Implements `ControlValueAccessor` (works with Reactive Forms and `ngModel`).
- * - Emits {@link MDSwitch.onChange | onChange} only for **user-driven** interactions.
- *   For programmatic updates, rely on `ngModelChange` or form `valueChanges`.
- *
- * @example
- * ```html
- * <md-switch [(ngModel)]="enabled" (onChange)="log($event)"></md-switch>
- * ```
- *
- * @public
- * @fires MDSwitch#onChange
- */
-export class MDSwitch extends BaseEditableHolder implements OnInit, OnDestroy, ControlValueAccessor {
-  /**
-   * Backing unique id used as a default for {@link id}.
-   * @internal
-   */
-  private _uniqueId: string;
-
-  /**
-   * Host element id. Can be overridden by the consumer.
-   * @default auto-generated value like `"slide-toggle-..."`
-   */
-  @Input() id: string;
-
-  /**
-   * Keyboard tab order for the internal input.
-   * @remarks Value is transformed via `numberAttribute`.
-   */
-  @Input({ transform: numberAttribute }) tabindex: number | undefined;
-
-  /**
-   * Read-only mode: prevents user interaction while still allowing focus.
-   * @remarks Value is transformed via `booleanAttribute`.
-   */
-  @Input({ transform: booleanAttribute }) readonly: boolean | undefined;
-
-  /**
-   * Host click handler.
-   *
-   * @param event Browser `MouseEvent`.
-   * @remarks Delegates to {@link _handleClick}.
-   * @internal
-   */
-  @HostListener('click', ['$event'])
-  onHostClick(event: MouseEvent) {
-    this._handleClick(event);
-  }
-
-  /**
-   * Emits when the user toggles the switch via UI interaction.
-   *
-   * @example
-   * ```html
-   * <md-switch (onChange)="handleChange($event)"></md-switch>
-   * ```
-   */
-  @Output() onChange: EventEmitter<ToggleSwitchChangeEvent> = new EventEmitter<ToggleSwitchChangeEvent>();
-
-  /**
-   * Template reference to the internal input element (for focus management).
-   * @internal
-   */
-  @ViewChild('input') input!: ElementRef;
-
-  /**
-   * Focus ring helper for template/styles.
-   * @internal
-   */
-  focused: boolean = false;
-
-  constructor() {
-    super();
-    this.id = this._uniqueId = inject(_IdGenerator).getId('slide-toggle-');
-  }
-
-  /** Lifecycle: initialization (reserved for future use). */
-  ngOnInit(): void {}
-
-  /**
-   * Synchronous validator hook (provided via `NG_VALIDATORS`).
-   * @remarks Currently a stub.
-   */
-  validate() {}
-
-  /** Lifecycle: teardown (reserved for future use). */
-  ngOnDestroy(): void {}
-
-  /**
-   * ControlValueAccessor: write an external value into the component.
-   *
-   * @param value Value coming from the form model.
-   * @param setModelValue Callback to update the base class model value.
-   * @remarks Calls `markForCheck` to ensure change detection runs.
-   */
-  override writeControlValue(value: any, setModelValue: (value: any) => void): void {
-    setModelValue(value);
-    this.cd.markForCheck();
-  }
-
-  /** Focus-in handler (called from the template). */
-  onFocus() {
-    this.focused = true;
-  }
-
-  /**
-   * Focus-out handler (called from the template).
-   * @remarks Triggers `onModelTouched()` for forms.
-   */
-  onBlur() {
-    this.focused = false;
-    this.onModelTouched();
-  }
-
-  /**
-   * Centralized click logic:
-   * - toggles the model via `BaseEditableHolder`;
-   * - calls `onModelChange()` for the form;
-   * - emits {@link onChange} with details;
-   * - returns focus to the input for accessible keyboard flow.
-   *
-   * @param event Original browser `Event`.
-   * @internal
-   */
-  _handleClick(event: Event) {
-    if (!this.$disabled() && !this.readonly) {
-      this.writeModelValue(!this.modelValue());
-      this.onModelChange(this.modelValue());
-      this.onChange.emit({
-        originalEvent: event,
-        checked: this.modelValue(),
-      });
-
-      this.input.nativeElement.focus();
-    }
-  }
-
-  /**
-   * Convenience getter for host class binding.
-   * @returns Current checked state.
-   */
-  checked() {
-    return this.modelValue();
-  }
-}
-
-/**
- * Event emitted by {@link MDSwitch} on user-initiated change.
- */
-export interface ToggleSwitchChangeEvent {
-  /** Original browser event. */
-  originalEvent: Event;
-  /** New checked state. */
-  checked: boolean;
-}

package/src/lib/v2/switch/switch.module.ts

@@ -1,10 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { MDSwitch } from './switch.component';
-
-@NgModule({
-  exports: [MDSwitch],
-  declarations: [MDSwitch],
-  imports: [CommonModule],
-})
-export class MDSwitchModule {}

package/src/lib/v2/tabs/config.ts

@@ -1,94 +0,0 @@
-import { InjectionToken } from '@angular/core';
-
-/**
- * Configuration options for the Tabs module.
- *
- * @remarks
- * Provide this via the {@link TABS_CONFIG} injection token at the app or feature level.
- * Each field is optional; omit to use component defaults.
- *
- * @example Provide defaults app-wide
- * ```ts
- * bootstrapApplication(AppComponent, {
- *   providers: [
- *     { provide: TABS_CONFIG, useValue: {
- *         animationDuration: '250ms',
- *         fitInkBarToContent: true,
- *         alignTabs: 'center'
- *     } as TabsConfig }
- *   ]
- * });
- * ```
- */
-export interface TabsConfig {
-  /**
-   * Duration of tab header/ink bar animations.
-   * @example "200ms", "300ms ease-out"
-   */
-  animationDuration?: string;
-
-  /**
-   * Disables header pagination arrows when there are many tabs.
-   * If `true`, all tabs must fit without scrolling.
-   * @default false
-   */
-  disablePagination?: boolean;
-
-  /**
-   * If `true`, ink bar width matches the label content rather than the full tab.
-   * @default false
-   */
-  fitInkBarToContent?: boolean;
-
-  /**
-   * Automatically resizes the tab-body container to match the active tab's height.
-   * @default false
-   */
-  dynamicHeight?: boolean;
-
-  /**
-   * `tabindex` applied to the tab body content container for accessibility.
-   * @default 0
-   */
-  contentTabIndex?: number;
-
-  /**
-   * Preserves inactive tab contents in the DOM instead of destroying them.
-   * Useful for keeping component state or form controls alive.
-   * @default false
-   */
-  preserveContent?: boolean;
-
-  /**
-   * Stretches tabs to evenly fill the header width.
-   * @default false
-   */
-  stretchTabs?: boolean;
-
-  /**
-   * Horizontal alignment of tab labels in the header.
-   * @default 'start'
-   */
-  alignTabs?: 'start' | 'center' | 'end';
-}
-
-/**
- * Injection token for providing {@link TabsConfig} defaults.
- *
- * @example Feature-level override
- * ```ts
- * @NgModule({
- *   providers: [{ provide: TABS_CONFIG, useValue: { stretchTabs: true } }]
- * })
- * export class TabsFeatureModule {}
- * ```
- *
- * @example Injecting the config
- * ```ts
- * @Component({...})
- * export class TabsHeaderComponent {
- *   constructor(@Inject(TABS_CONFIG) readonly cfg: TabsConfig) {}
- * }
- * ```
- */
-export const TABS_CONFIG = new InjectionToken<TabsConfig>('TABS_CONFIG');

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

@@ -1,28 +0,0 @@
-
-
-export {ScrollDirection, PaginatedTabHeader} from './paginated-tab-header';
-export {
-  TabBodyPortal,
-  MDTabBody,
-  TabBodyPositionState,
-  TabBodyOriginState,
-} from './tab-body';
-export {TabsConfig, TABS_CONFIG} from './config';
-export {MDTabContent, TAB_CONTENT} from './tab-content';
-export {MDTabLabel, MD_TAB, MD_TAB_LABEL} from './tab-label';
-export {MDTab, TAB_GROUP} from './tab';
-export {
-  InkBar,
-  INK_BAR_POSITIONER_FACTORY,
-  INK_BAR_POSITIONER,
-} from './ink-bar';
-export {MDTabHeader} from './tab-header';
-export {
-  MDTabGroup,
-  MDTabChangeEvent,
-  TabGroupBaseHeader,
-  TabHeaderPosition,
-} from './tab-group';
-export {MDTabLabelWrapper} from './tab-label-wrapper';
-export { MDTabsModule } from './tabs.module';
-