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

package/src/lib/v2/collapse/expansion-panel-header.scss

@@ -1,165 +0,0 @@
-@use '@angular/cdk';
-@use './../../styles/vars.scss' as color-vars;
-
-.expansion-panel-header {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding: 0 24px;
-    border-radius: inherit;
-
-    .expansion-panel-animations-enabled & {
-        transition: height 225ms cubic-bezier(0.4, 0, 0.2, 1);
-    }
-
-    &::before {
-        border-radius: inherit;
-    }
-
-    height: 48px;
-    font-family: "Montserrat";
-    font-size: 1rem;
-    font-weight: 600;
-    line-height: 1.5rem;
-    letter-spacing: 0.009rem;
-
-    &.expanded {
-        height: 64px;
-    }
-
-    &[aria-disabled='true'] {
-        color: color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent);
-    }
-
-    &:not([aria-disabled='true']) {
-        cursor: pointer;
-
-        .expansion-panel:not(.expanded) &:hover {
-            background: color-mix(
-                in srgb,
-                var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%),
-                transparent
-            );
-
-        }
-
-        .expansion-panel &.cdk-keyboard-focused,
-        .expansion-panel &.cdk-program-focused {
-            background: color-mix(
-                in srgb,
-                var(--mat-sys-on-surface) calc(var(--mat-sys-focus-state-layer-opacity) * 100%),
-                transparent
-            );
-        }
-    }
-
-    &._animation-noopable {
-        transition: none;
-    }
-
-    &:focus,
-    &:hover {
-        outline: none;
-    }
-
-    &.expanded:focus,
-    &.expanded:hover {
-        background: inherit;
-    }
-
-    &.expansion-toggle-indicator-before {
-        flex-direction: row-reverse;
-
-        .expansion-indicator {
-            margin: 0 16px 0 0;
-
-            [dir='rtl'] & {
-                margin: 0 0 0 16px;
-            }
-        }
-    }
-}
-
-.content {
-    display: flex;
-    flex: 1;
-    flex-direction: row;
-    overflow: hidden;
-
-    &.content-hide-toggle {
-        margin-right: 8px;
-
-        [dir='rtl'] & {
-            margin-right: 0;
-            margin-left: 8px;
-        }
-
-        .expansion-toggle-indicator-before & {
-            margin-left: 24px;
-            margin-right: 0;
-
-            [dir='rtl'] & {
-                margin-right: 24px;
-                margin-left: 0;
-            }
-        }
-    }
-}
-
-.expansion-panel-header-title {
-    color: color-vars.$Dark-Gray-1;
-}
-
-.expansion-panel-header-title,
-.expansion-panel-header-description {
-    display: flex;
-    flex-grow: 1;
-    flex-basis: 0;
-    margin-right: 16px;
-    align-items: center;
-
-    [dir='rtl'] & {
-        margin-right: 0;
-        margin-left: 16px;
-    }
-
-    .expansion-panel-header[aria-disabled='true'] & {
-        color: inherit;
-    }
-}
-
-.expansion-panel-header-description {
-    flex-grow: 2;
-
-    color: color-vars.$Dark-Gray-1;
-}
-
-.expansion-indicator {
-    .expansion-panel-animations-enabled & {
-        transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1);
-    }
-
-    .expansion-panel-header.expanded & {
-        transform: rotate(180deg);
-    }
-
-    svg {
-        width: 24px;
-        height: 24px;
-
-        margin: 0 -8px;
-
-        vertical-align: middle;
-
-        fill: color-vars.$Black-Color;
-        display: inline-block;
-    }
-}
-
-@include cdk.high-contrast {
-    .expansion-panel-content {
-        border-top: 1px solid;
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-    }
-}

package/src/lib/v2/collapse/expansion-panel-header.ts

@@ -1,237 +0,0 @@
-import {FocusableOption, FocusMonitor, FocusOrigin} from '@angular/cdk/a11y';
-import {ENTER, hasModifierKey, SPACE} from '@angular/cdk/keycodes';
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  Directive,
-  ElementRef,
-  Input,
-  numberAttribute,
-  OnDestroy,
-  ViewEncapsulation,
-  inject,
-  HostAttributeToken,
-} from '@angular/core';
-import {EMPTY, merge, Subscription} from 'rxjs';
-import {filter} from 'rxjs/operators';
-import {AccordionTogglePosition} from './accordion-base';
-import {
-  MDExpansionPanel,
-  ExpansionPanelDefaultOptions,
-  EXPANSION_PANEL_DEFAULT_OPTIONS,
-} from './expansion-panel';
-import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
-
-/**
- * Header component for an expansion panel.
- * - Acts as the interactive control (button role) that toggles the panel.
- * - Manages aria attributes and keyboard interaction.
- * - Syncs with parent accordion/panel inputs and emits change detection marks.
- */
-@Component({
-  selector: 'md-expansion-panel-header',
-  styleUrl: 'expansion-panel-header.scss',
-  templateUrl: 'expansion-panel-header.html',
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    // Semantic and a11y
-    'class': 'expansion-panel-header focus-indicator',
-    'role': 'button',
-    '[attr.id]': 'panel._headerId',
-    '[attr.tabindex]': 'disabled ? -1 : tabIndex',
-    '[attr.aria-controls]': '_getPanelId()',
-    '[attr.aria-expanded]': '_isExpanded()',
-    '[attr.aria-disabled]': 'panel.disabled',
-
-    // Visual state
-    '[class.expanded]': '_isExpanded()',
-    '[class.expansion-toggle-indicator-after]': `_getTogglePosition() === 'after'`,
-    '[class.expansion-toggle-indicator-before]': `_getTogglePosition() === 'before'`,
-    '[style.height]': '_getHeaderHeight()',
-
-    // Interaction
-    '(click)': '_toggle()',
-    '(keydown)': '_keydown($event)',
-  },
-})
-export class MDExpansionPanelHeader implements AfterViewInit, OnDestroy, FocusableOption {
-  /** Owning panel (injected from host). */
-  panel = inject(MDExpansionPanel, {host: true});
-  /** Host element reference (focus & DOM ops). */
-  private _element = inject(ElementRef);
-  /** FocusMonitor for origin-aware focus management. */
-  private _focusMonitor = inject(FocusMonitor);
-  /** Marks for check on state changes (OnPush). */
-  private _changeDetectorRef = inject(ChangeDetectorRef);
-
-  /** Subscriptions to panel/accordion streams. */
-  private _parentChangeSubscription = Subscription.EMPTY;
-
-  constructor() {
-    const panel = this.panel;
-
-    // Optional defaults for header heights.
-    const defaultOptions = inject<ExpansionPanelDefaultOptions>(
-      EXPANSION_PANEL_DEFAULT_OPTIONS,
-      {optional: true},
-    );
-
-    // Allow host to set tabindex; default to 0.
-    const tabIndex = inject(new HostAttributeToken('tabindex'), {optional: true});
-    this.tabIndex = parseInt(tabIndex || '') || 0;
-
-    // Re-render when panel opens/closes or when inherited inputs change.
-    const accordionHideToggleChange = panel.accordion
-      ? panel.accordion._stateChanges.pipe(
-          filter(changes => !!(changes['hideToggle'] || changes['togglePosition'])),
-        )
-      : EMPTY;
-
-    this._parentChangeSubscription = merge(
-      panel.opened,
-      panel.closed,
-      accordionHideToggleChange,
-      panel._inputChanges.pipe(
-        filter(changes => {
-          return !!(changes['hideToggle'] || changes['disabled'] || changes['togglePosition']);
-        }),
-      ),
-    ).subscribe(() => this._changeDetectorRef.markForCheck());
-
-    // If focus is inside the body when the panel closes, return focus to header.
-    panel.closed
-      .pipe(filter(() => panel._containsFocus()))
-      .subscribe(() => this._focusMonitor.focusVia(this._element, 'program'));
-
-    // Apply defaults for expanded/collapsed heights, if provided.
-    if (defaultOptions) {
-      this.expandedHeight = defaultOptions.expandedHeight;
-      this.collapsedHeight = defaultOptions.collapsedHeight;
-    }
-  }
-
-  /** Custom height when the panel is expanded (CSS length). */
-  @Input() expandedHeight: string;
-  /** Custom height when the panel is collapsed (CSS length). */
-  @Input() collapsedHeight: string;
-
-  /**
-   * Keyboard tab stop order for the header.
-   * Normalized via numberAttribute; defaults to 0 if null/undefined.
-   */
-  @Input({
-    transform: (value: unknown) => (value == null ? 0 : numberAttribute(value)),
-  })
-  tabIndex: number = 0;
-
-  /** Whether the header is effectively disabled (delegates to panel). */
-  get disabled(): boolean {
-    return this.panel.disabled;
-  }
-
-  /** Click/keyboard toggle handler. */
-  _toggle(): void {
-    if (!this.disabled) {
-      this.panel.toggle();
-    }
-  }
-
-  /** Current expanded state as boolean. */
-  _isExpanded(): boolean {
-    return this.panel.expanded;
-  }
-
-  /** Expanded state string used by templates/host bindings. */
-  _getExpandedState(): string {
-    return this.panel._getExpandedState();
-  }
-
-  /** ID of the associated panel body (for aria-controls). */
-  _getPanelId(): string {
-    return this.panel.id;
-  }
-
-  /** Toggle indicator placement relative to header content. */
-  _getTogglePosition(): AccordionTogglePosition {
-    return this.panel.togglePosition;
-  }
-
-  /** Whether to show the toggle indicator (inherits hideToggle/disabled). */
-  _showToggle(): boolean {
-    return !this.panel.hideToggle && !this.panel.disabled;
-  }
-
-  /** Compute header height based on state and provided inputs. */
-  _getHeaderHeight(): string | null {
-    const isExpanded = this._isExpanded();
-    if (isExpanded && this.expandedHeight) {
-      return this.expandedHeight;
-    } else if (!isExpanded && this.collapsedHeight) {
-      return this.collapsedHeight;
-    }
-    return null;
-  }
-
-  /** Keydown handler: Space/Enter toggles; delegate others to accordion. */
-  _keydown(event: KeyboardEvent) {
-    switch (event.keyCode) {
-      case SPACE:
-      case ENTER:
-        if (!hasModifierKey(event)) {
-          event.preventDefault();
-          this._toggle();
-        }
-        break;
-      default:
-        if (this.panel.accordion) {
-          this.panel.accordion._handleHeaderKeydown(event);
-        }
-        return;
-    }
-  }
-
-  /** FocusableOption implementation with origin-aware focus. */
-  focus(origin?: FocusOrigin, options?: FocusOptions) {
-    if (origin) {
-      this._focusMonitor.focusVia(this._element, origin, options);
-    } else {
-      this._element.nativeElement.focus(options);
-    }
-  }
-
-  /** Start monitoring focus and notify accordion when header gains focus. */
-  ngAfterViewInit() {
-    this._focusMonitor.monitor(this._element).subscribe(origin => {
-      if (origin && this.panel.accordion) {
-        this.panel.accordion._handleHeaderFocus(this);
-      }
-    });
-  }
-
-  /** Cleanup subscriptions and focus monitoring. */
-  ngOnDestroy() {
-    this._parentChangeSubscription.unsubscribe();
-    this._focusMonitor.stopMonitoring(this._element);
-  }
-}
-
-/** Projected description container inside the header (styling hook). */
-@Directive({
-  selector: 'panel-description',
-  host: {
-    class: 'expansion-panel-header-description',
-  },
-})
-export class ExpansionPanelDescription {}
-
-/** Projected title container inside the header (styling hook). */
-@Directive({
-  selector: 'panel-title',
-  host: {
-    class: 'expansion-panel-header-title',
-  },
-})
-export class ExpansionPanelTitle {}

package/src/lib/v2/collapse/expansion-panel.html

@@ -1,14 +0,0 @@
-<ng-content select="md-expansion-panel-header"></ng-content>
-<div class="expansion-panel-content-wrapper" [attr.inert]="expanded ? null : ''" #bodyWrapper>
-  <div class="expansion-panel-content"
-       role="region"
-       [attr.aria-labelledby]="_headerId"
-       [id]="id"
-       #body>
-    <div class="expansion-panel-body">
-      <ng-content></ng-content>
-      <ng-template [cdkPortalOutlet]="_portal"></ng-template>
-    </div>
-    <ng-content select="action-row"></ng-content>
-  </div>
-</div>

package/src/lib/v2/collapse/expansion-panel.scss

@@ -1,113 +0,0 @@
-@use './../../styles/vars.scss' as color-vars;
-
-.expansion-panel {
-    box-sizing: content-box;
-    display: block;
-    margin: 0;
-    overflow: hidden;
-
-    &.expansion-panel-animations-enabled {
-        transition: margin 225ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
-    }
-
-    position: relative;
-
-    background: color-vars.$Light-Gray-3;
-    color: color-vars.$Black-Color;
-
-    &:not([class*='elevation-z']) {
-        box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
-            0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-    }
-
-    .accordion & {
-        &:not(.expanded),
-        &:not(.expansion-panel-spacing) {
-            border-radius: 0;
-        }
-    }
-}
-
-.expansion-panel-content-wrapper {
-    display: grid;
-    grid-template-rows: 0fr;
-    grid-template-columns: 100%;
-
-    .expansion-panel-animations-enabled & {
-        transition: grid-template-rows 225ms cubic-bezier(0.4, 0, 0.2, 1);
-    }
-
-    .expansion-panel.expanded > & {
-        grid-template-rows: 1fr;
-    }
-
-    @supports not (grid-template-rows: 0fr) {
-        height: 0;
-
-        .expansion-panel.expanded > & {
-            height: auto;
-        }
-    }
-}
-
-.expansion-panel-content {
-    display: flex;
-    flex-direction: column;
-    overflow: visible;
-    min-height: 0;
-
-    visibility: hidden;
-
-    .expansion-panel-animations-enabled & {
-        transition: visibility 190ms linear;
-    }
-
-    .expansion-panel.expanded > .expansion-panel-content-wrapper > & {
-        visibility: visible;
-    }
-
-    font-family: Robot;
-    font-size: 1rem;
-    font-weight: 400;
-    line-height: 1.5rem;
-    letter-spacing: 0.031rem;
-}
-
-.expansion-panel-body {
-    padding: 0 24px 16px;
-}
-
-.expansion-panel-spacing {
-    margin: 16px 0;
-
-    .accordion > &:first-child,
-    .accordion > *:first-child:not(.expansion-panel) & {
-        margin-top: 0;
-    }
-
-    .accordion > &:last-child,
-    .accordion > *:last-child:not(.expansion-panel) & {
-        margin-bottom: 0;
-    }
-}
-
-.action-row {
-    border-top-style: solid;
-    border-top-width: 1px;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    padding: 12px 16px;
-
-    border-top-color: color-vars.$Light-Gray-2;
-
-    .button-base,
-    .mdc-button-base {
-        margin-left: 8px;
-
-        [dir='rtl'] & {
-            margin-left: 0;
-            margin-right: 8px;
-        }
-    }
-}