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

package/src/lib/v2/card/card.ts

@@ -1,274 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Directive,
-  InjectionToken,
-  Input,
-  ViewEncapsulation,
-  inject,
-} from '@angular/core';
-
-/**
- * Public API type that controls the overall visual style of the card.
- * - `'outlined'` — draws an outline around the card.
- * - `'raised'`   — default look with elevation (shadow).
- * - `'filled'`   — filled background emphasis.
- */
-export type CardAppearance = 'outlined' | 'raised' | 'filled';
-
-/**
- * Optional DI-provided configuration for MDCard defaults.
- * Allows setting application-wide defaults without touching each instance.
- */
-export interface CardConfig {
-  /** Default appearance applied to all cards unless overridden per instance. */
-  appearance?: CardAppearance;
-}
-
-/**
- * Injection token for providing a global {@link CardConfig}.
- *
- * @example App-wide default
- * ```ts
- * providers: [{ provide: CARD_CONFIG, useValue: { appearance: 'filled' } as CardConfig }]
- * ```
- */
-export const CARD_CONFIG = new InjectionToken<CardConfig>('CARD_CONFIG');
-
-/**
- * Root Card component.
- *
- * @remarks
- * - Renders a Material Design–like card container.
- * - Applies host CSS classes based on the {@link appearance} input.
- * - Reads optional defaults from DI via {@link CARD_CONFIG}.
- *
- * Template & styles:
- * - `templateUrl: 'card.html'` — defines the card structure/slots.
- * - `styleUrl: 'card.scss'`    — variants and section styling.
- *
- * Performance:
- * - `ChangeDetectionStrategy.OnPush` to minimize change detection work.
- *
- * Export:
- * - `exportAs: 'mdCard'` — allows `#card="mdCard"` in templates.
- */
-@Component({
-  selector: 'md-card',
-  templateUrl: 'card.html',
-  styleUrl: 'card.scss',
-  host: {
-    class: 'mdc-card mdc-card',
-    '[class.mdc-card-outlined]': 'appearance === "outlined"',
-    '[class.mdc-card--outlined]': 'appearance === "outlined"',
-    '[class.mdc-card-filled]': 'appearance === "filled"',
-    '[class.mdc-card--filled]': 'appearance === "filled"',
-  },
-  exportAs: 'mdCard',
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MDCard {
-  /**
-   * Controls the visual style of the card.
-   *
-   * @default 'raised' (or {@link CARD_CONFIG}.appearance if provided)
-   */
-  @Input() appearance: CardAppearance;
-
-  constructor() {
-    const config = inject<CardConfig>(CARD_CONFIG, { optional: true });
-    this.appearance = config?.appearance || 'raised';
-  }
-}
-
-/**
- * Title directive.
- *
- * @example
- * ```html
- * <md-card-title>Title</md-card-title>
- * <div md-card-title>Title</div>
- * <div [mdCardTitle]>Title</div>
- * ```
- *
- * Adds a semantic class for styling the title area.
- */
-@Directive({
-  selector: `md-card-title, [md-card-title], [mdCardTitle]`,
-  host: { class: 'mdc-card-title' },
-})
-export class MDCardTitle {}
-
-/**
- * Title group component.
- * Encapsulates grouped title-related content (e.g., title + subtitle + avatar).
- * Template is defined in `card-title-group.html`.
- */
-@Component({
-  selector: 'md-card-title-group',
-  templateUrl: 'card-title-group.html',
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: { class: 'mdc-card-title-group' },
-})
-export class MDCardTitleGroup {}
-
-/**
- * Content directive for the main textual/body area of the card.
- *
- * @example
- * ```html
- * <md-card-content>...</md-card-content>
- * ```
- */
-@Directive({
-  selector: 'md-card-content',
-  host: { class: 'mdc-card-content' },
-})
-export class MDCardContent {}
-
-/**
- * Subtitle directive.
- *
- * @example
- * ```html
- * <md-card-subtitle>Subtitle</md-card-subtitle>
- * <div md-card-subtitle>Subtitle</div>
- * <div [mdCardSubtitle]>Subtitle</div>
- * ```
- *
- * Adds a semantic class for styling the subtitle text.
- */
-@Directive({
-  selector: `md-card-subtitle, [md-card-subtitle], [mdCardSubtitle]`,
-  host: { class: 'mdc-card-subtitle' },
-})
-export class MDCardSubtitle {}
-
-/**
- * Actions directive.
- * Represents the action row (e.g., buttons) at the bottom or top of a card.
- *
- * Host classes:
- * - Base: `'mdc-card-actions mdc-card__actions'`
- * - If `align === 'end'`, also applies `'mdc-card-actions-align-end'`.
- */
-@Directive({
-  selector: 'md-card-actions',
-  exportAs: 'mdCardActions',
-  host: {
-    class: 'mdc-card-actions mdc-card__actions',
-    '[class.mdc-card-actions-align-end]': 'align === "end"',
-  },
-})
-export class MDCardActions {
-  /**
-   * Controls horizontal alignment of actions.
-   * - `'start'` — actions align to the start edge
-   * - `'end'`   — actions align to the end edge
-   *
-   * @default 'start'
-   *
-   * @example
-   * ```html
-   * <md-card-actions align="end">
-   *   <button md-button>Save</button>
-   * </md-card-actions>
-   * ```
-   */
-  @Input() align: 'start' | 'end' = 'start';
-}
-
-/**
- * Header component.
- * A dedicated container for card header content (e.g., avatar, title/subtitle group).
- * Template is defined in `card-header.html`.
- */
-@Component({
-  selector: 'md-card-header',
-  templateUrl: 'card-header.html',
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: { class: 'mdc-card-header' },
-})
-export class MDCardHeader {}
-
-/**
- * Footer directive.
- * A semantic area for card footers—secondary info, meta, or supplementary actions.
- */
-@Directive({
-  selector: 'md-card-footer',
-  host: { class: 'mdc-card-footer' },
-})
-export class MDCardFooter {}
-
-/**
- * Image directive (default size).
- * Applies media-related classes to display a cover/media area inside the card.
- *
- * @example
- * ```html
- * <div md-card-image style="background-image:url(...)"></div>
- * <div [mdCardImage]></div>
- * ```
- *
- * Note: Actual sizing (height/ratio) should be defined in `card.scss`.
- */
-@Directive({
-  selector: '[md-card-image], [mdCardImage]',
-  host: { class: 'mdc-card-image mdc-card__media' },
-})
-export class MDCardImage {}
-
-/**
- * Small image directive.
- * Adds the same base media classes; size differences should be implemented in CSS.
- */
-@Directive({
-  selector: '[md-card-sm-image], [mdCardImageSmall]',
-  host: { class: 'mdc-card-sm-image mdc-card__media' },
-})
-export class MDCardSmImage {}
-
-/**
- * Medium image directive.
- * Adds the same base media classes; size differences should be implemented in CSS.
- */
-@Directive({
-  selector: '[md-card-md-image], [mdCardImageMedium]',
-  host: { class: 'mdc-card-md-image mdc-card__media' },
-})
-export class MDCardMdImage {}
-
-/**
- * Large image directive.
- * Adds the same base media classes; size differences should be implemented in CSS.
- */
-@Directive({
-  selector: '[md-card-lg-image], [mdCardImageLarge]',
-  host: { class: 'mdc-card-lg-image mdc-card__media' },
-})
-export class MDCardLgImage {}
-
-/**
- * Extra-large image directive.
- * Adds the same base media classes; size differences should be implemented in CSS.
- */
-@Directive({
-  selector: '[md-card-xl-image], [mdCardImageXLarge]',
-  host: { class: 'mdc-card-xl-image mdc-card__media' },
-})
-export class MDCardXlImage {}
-
-/**
- * Avatar directive.
- * Intended for small, typically circular images near the title/header area.
- * The concrete size/shape should be controlled via CSS (e.g., width/height/border-radius).
- */
-@Directive({
-  selector: '[md-card-avatar], [mdCardAvatar]',
-  host: { class: 'mdc-card-avatar' },
-})
-export class MDCardAvatar {}

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

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

package/src/lib/v2/checkbox/checkbox.html

@@ -1,38 +0,0 @@
-<div class="checkbox-internal-field" (click)="_preventBubblingFromLabel($event)">
-    <div #checkbox class="mdc-checkbox">
-        <div class="mdc-checkbox-touch-target" (click)="_onTouchTargetClick()"></div>
-        <input
-            #input
-            type="checkbox"
-            class="mdc-checkbox__native-control"
-            [class.mdc-checkbox--selected]="checked"
-            [attr.aria-label]="ariaLabel || null"
-            [attr.aria-labelledby]="ariaLabelledby"
-            [attr.aria-describedby]="ariaDescribedby"
-            [attr.aria-controls]="ariaControls"
-            [attr.aria-disabled]="disabled && disabledInteractive ? true : null"
-            [attr.aria-expanded]="ariaExpanded"
-            [attr.aria-owns]="ariaOwns"
-            [attr.name]="name"
-            [attr.value]="value"
-            [checked]="checked"
-            [disabled]="disabled && !disabledInteractive"
-            [id]="inputId"
-            [required]="required"
-            [tabIndex]="disabled && !disabledInteractive ? -1 : tabIndex"
-            (blur)="_onBlur()"
-            (click)="_onInputClick()"
-            (change)="_onInteractionEvent($event)"
-        />
-        <div class="mdc-checkbox__background">
-            <svg class="mdc-checkbox__checkmark" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
-                <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
-            </svg>
-            <div class="mdc-checkbox__mixedmark"></div>
-        </div>
-    </div>
-
-    <label class="mdc-label" #label [for]="inputId">
-        <ng-content></ng-content>
-    </label>
-</div>

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

@@ -1,8 +0,0 @@
-import { NgModule } from '@angular/core';
-import { MDCheckBox } from './checkbox';
-
-@NgModule({
-    imports: [MDCheckBox],
-    exports: [MDCheckBox],
-})
-export class MDCheckBoxModule {}

package/src/lib/v2/checkbox/checkbox.scss

@@ -1,318 +0,0 @@
-@use 'sass:math';
-@use '@angular/cdk';
-@use './../../styles/vars.scss' as color-vars;
-
-$_path-length: 29.7833385;
-$_transition-duration: 90ms;
-$_icon-size: 16px;
-$_mark-stroke-size: math.div(2, 15) * $_icon-size;
-$_enter-curve: cubic-bezier(0, 0, 0.2, 1);
-$_exit-curve: cubic-bezier(0.4, 0, 0.6, 1);
-$_fallback-size: 32px;
-
-.md-mdc-checkbox {
-    display: inline-block;
-    position: relative;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-
-.checkbox-internal-field {
-    display: inline-flex;
-    align-items: center;
-    vertical-align: middle;
-
-    line-height: 1.25rem;
-    font-family: 'Montserrat';
-    font-size: 0.875rem;
-    letter-spacing: 0.016rem;
-    font-weight: 400;
-}
-
-.mdc-checkbox {
-    display: inline-block;
-    position: relative;
-    -webkit-tap-highlight-color: transparent;
-
-    label {
-        cursor: pointer;
-    }
-
-    &.mdc-checkbox-disabled {
-        &.mdc-checkbox-disabled-interactive {
-            pointer-events: auto;
-
-            input {
-                cursor: default;
-            }
-        }
-
-        label {
-            cursor: default;
-            color: color-mix(in srgb, color-vars.$Black-Color 38%, transparent);
-        }
-    }
-
-    label:empty {
-        display: none;
-    }
-}
-
-.mdc-checkbox-touch-target {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    height: 48px;
-    width: 48px;
-    transform: translate(-50%, -50%);
-    display: block;
-}
-
-.mdc-checkbox__native-control:focus ~ .focus-indicator::before {
-    content: '';
-}
-
-.mdc-checkbox {
-    display: inline-block;
-    position: relative;
-    flex: 0 0 $_icon-size;
-    box-sizing: content-box;
-    width: $_icon-size;
-    height: $_icon-size;
-    line-height: 0;
-    white-space: nowrap;
-    cursor: pointer;
-    vertical-align: bottom;
-
-    $layer-size: 40px;
-    padding: calc((#{$layer-size} - #{$_icon-size}) / 2);
-    margin: calc((#{$layer-size} - #{$layer-size}) / 2);
-
-    .mdc-checkbox__native-control {
-        position: absolute;
-        margin: 0;
-        padding: 0;
-        opacity: 0;
-        cursor: inherit;
-        z-index: 1;
-
-        width: 40px;
-        height: 40px;
-        top: 0;
-        right: 0;
-        left: 0;
-
-        &:focus-visible ~ .mdc-checkbox__background {
-            outline: 1px solid #020617;
-            outline-offset: 2px;
-        }
-    }
-}
-
-.mdc-checkbox--disabled {
-    cursor: default;
-    pointer-events: none;
-
-    @include cdk.high-contrast {
-        opacity: 0.5;
-    }
-}
-
-.mdc-checkbox__background {
-    display: inline-flex;
-    position: absolute;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    width: $_icon-size;
-    height: $_icon-size;
-    border: 2px solid currentColor;
-    border-radius: 2px;
-    background-color: transparent;
-    pointer-events: none;
-    will-change: background-color, border-color;
-    transition: background-color $_transition-duration $_exit-curve, border-color $_transition-duration $_exit-curve;
-
-    $layer-size: 40px;
-    $offset: calc((#{$layer-size} - #{$_icon-size}) / 2);
-
-    border-color: #514346;
-    top: $offset;
-    left: $offset;
-}
-
-.mdc-checkbox__native-control:enabled:checked ~ .mdc-checkbox__background {
-    border-color: color-vars.$Link;
-    background-color: color-vars.$Link;
-}
-
-.mdc-checkbox--disabled .mdc-checkbox__background {
-    border-color: color-mix(in srgb, color-vars.$Black-Color 38%, transparent);
-}
-
-.mdc-checkbox__native-control:disabled:checked ~ .mdc-checkbox__background {
-    background-color: color-mix(in srgb, color-vars.$Black-Color 38%, transparent);
-    border-color: transparent;
-}
-
-.mdc-checkbox:hover > .mdc-checkbox__native-control:not(:checked) ~ .mdc-checkbox__background {
-    border-color: color-vars.$Black-Color;
-    background-color: transparent;
-}
-
-.mdc-checkbox:hover > .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background {
-    border-color: color-vars.$Link;
-    background-color: color-vars.$Link;
-}
-
-.mdc-checkbox__native-control:focus:focus:not(:checked) ~ .mdc-checkbox__background {
-    border-color: color-vars.$Black-Color;
-}
-
-.mdc-checkbox__native-control:focus:focus:checked ~ .mdc-checkbox__background {
-    border-color: color-vars.$Link;
-    background-color: color-vars.$Link;
-}
-
-.mdc-checkbox--disabled.mat-mdc-checkbox-disabled-interactive {
-    .mdc-checkbox:hover > .mdc-checkbox__native-control ~ .mdc-checkbox__background,
-    .mdc-checkbox .mdc-checkbox__native-control:focus ~ .mdc-checkbox__background,
-    .mdc-checkbox__background {
-        border-color: color-mix(in srgb, color-vars.$Black-Color 38%, transparent);
-    }
-
-    .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background {
-        background-color: color-mix(in srgb, color-vars.$Black-Color 38%, transparent);
-        border-color: transparent;
-    }
-}
-
-.mdc-checkbox__checkmark {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    opacity: 0;
-    transition: opacity $_transition-duration * 2 $_exit-curve;
-
-    color: #ffffff;
-
-    @include cdk.high-contrast {
-        color: CanvasText;
-    }
-}
-
-.mdc-checkbox--disabled {
-    & {
-        .mdc-checkbox__checkmark {
-            color: #fff8f8;
-
-            @include cdk.high-contrast {
-                color: CanvasText;
-            }
-        }
-    }
-}
-
-.mdc-checkbox__checkmark-path {
-    transition: stroke-dashoffset $_transition-duration * 2 $_exit-curve;
-    stroke: currentColor;
-    stroke-width: $_mark-stroke-size * 1.3;
-    stroke-dashoffset: $_path-length;
-    stroke-dasharray: $_path-length;
-}
-
-.mdc-checkbox__mixedmark {
-    width: 100%;
-    height: 0;
-    transform: scaleX(0) rotate(0deg);
-    border-width: math.div(math.floor($_mark-stroke-size), 2);
-    border-style: solid;
-    opacity: 0;
-    transition: opacity $_transition-duration $_exit-curve, transform $_transition-duration $_exit-curve;
-
-    border-color: #ffffff;
-
-    @include cdk.high-contrast {
-        margin: 0 1px;
-    }
-}
-
-.mdc-checkbox--disabled {
-    &,
-    &.mat-mdc-checkbox-disabled-interactive {
-        .mdc-checkbox__mixedmark {
-            border-color: #ffffff;
-        }
-    }
-}
-
-.mdc-checkbox--anim-unchecked-checked,
-.mdc-checkbox--anim-checked-unchecked {
-    .mdc-checkbox__background {
-        animation-duration: $_transition-duration * 2;
-        animation-timing-function: linear;
-    }
-}
-
-.mdc-checkbox--anim-unchecked-checked {
-    .mdc-checkbox__checkmark-path {
-        animation: mdc-checkbox-unchecked-checked-checkmark-path $_transition-duration * 2 linear;
-        transition: none;
-    }
-}
-
-.mdc-checkbox--anim-checked-unchecked {
-    .mdc-checkbox__checkmark-path {
-        animation: mdc-checkbox-checked-unchecked-checkmark-path $_transition-duration linear;
-        transition: none;
-    }
-}
-
-.mdc-checkbox__native-control:checked ~ .mdc-checkbox__background {
-    transition: border-color $_transition-duration $_enter-curve, background-color $_transition-duration $_enter-curve;
-
-    > .mdc-checkbox__checkmark > .mdc-checkbox__checkmark-path {
-        stroke-dashoffset: 0;
-    }
-}
-
-.mdc-checkbox__native-control:checked ~ .mdc-checkbox__background {
-    > .mdc-checkbox__checkmark {
-        transition: opacity $_transition-duration * 2 $_enter-curve, transform $_transition-duration * 2 $_enter-curve;
-        opacity: 1;
-    }
-
-    > .mdc-checkbox__mixedmark {
-        transform: scaleX(1) rotate(-45deg);
-    }
-}
-
-@keyframes mdc-checkbox-unchecked-checked-checkmark-path {
-    0%,
-    50% {
-        stroke-dashoffset: $_path-length;
-    }
-
-    50% {
-        animation-timing-function: $_enter-curve;
-    }
-
-    100% {
-        stroke-dashoffset: 0;
-    }
-}
-
-@keyframes mdc-checkbox-checked-unchecked-checkmark-path {
-    from {
-        animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
-        opacity: 1;
-        stroke-dashoffset: 0;
-    }
-
-    to {
-        opacity: 0;
-        stroke-dashoffset: $_path-length * -1;
-    }
-}