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

package/src/lib/v2/autocomplete/autocomplete.ts

@@ -1,201 +0,0 @@
-import {
-  AfterContentInit,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ContentChildren,
-  ElementRef,
-  EventEmitter,
-  InjectionToken,
-  Input,
-  OnDestroy,
-  Output,
-  QueryList,
-  TemplateRef,
-  ViewChild,
-  ViewEncapsulation,
-  booleanAttribute,
-  inject,
-} from '@angular/core';
-import {_IdGenerator, ActiveDescendantKeyManager} from '@angular/cdk/a11y';
-import {Platform} from '@angular/cdk/platform';
-import {Subscription} from 'rxjs';
-import { MDOption, MDOptionGroup } from 'ui-kit-lib';
-
-export class MDAutocompleteSelectedEvent {
-  constructor(
-    public source: MDAutocomplete,
-    public option: MDOption,
-  ) {}
-}
-
-export interface MDAutocompleteActivatedEvent {
-  source: MDAutocomplete;
-  option: MDOption | null;
-}
-
-export interface MdAutocompleteDefaultOptions {
-  autoActiveFirstOption?: boolean;
-  autoSelectActiveOption?: boolean;
-  requireSelection?: boolean;
-  backdropClass?: string;
-  hasBackdrop?: boolean;
-  overlayPanelClass?: string | string[];
-  hideSingleSelectionIndicator?: boolean;
-}
-
-export const MD_AUTOCOMPLETE_DEFAULT_OPTIONS = new InjectionToken<MdAutocompleteDefaultOptions>(
-  'md-autocomplete-default-options',
-  {
-    providedIn: 'root',
-    factory: () => ({
-      autoActiveFirstOption: false,
-      autoSelectActiveOption: false,
-      hideSingleSelectionIndicator: false,
-      requireSelection: false,
-      hasBackdrop: false,
-    }),
-  },
-);
-
-export interface MDOptionParentComponent {
-  multiple?: boolean;
-  inertGroups?: boolean;
-  hideSingleSelectionIndicator?: boolean;
-}
-
-export const MD_OPTION_PARENT_COMPONENT = new InjectionToken<MDOptionParentComponent>(
-  'MD_OPTION_PARENT_COMPONENT',
-);
-
-@Component({
-  selector: 'md-autocomplete',
-  templateUrl: 'autocomplete.html',
-  styleUrl: 'autocomplete.scss',
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  exportAs: 'mdAutocomplete',
-  host: {
-    'class': 'md-mdc-autocomplete',
-  },
-  providers: [{provide: MD_OPTION_PARENT_COMPONENT, useExisting: MDAutocomplete}],
-})
-export class MDAutocomplete implements AfterContentInit, OnDestroy {
-  private _changeDetectorRef = inject(ChangeDetectorRef);
-  private _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
-  protected _defaults = inject<MdAutocompleteDefaultOptions>(MD_AUTOCOMPLETE_DEFAULT_OPTIONS);
-  private _activeOptionChanges = Subscription.EMPTY;
-
-  _keyManager: ActiveDescendantKeyManager<MDOption>;
-  showPanel: boolean = false;
-
-  get isOpen(): boolean {
-    return this._isOpen && this.showPanel;
-  }
-  _isOpen: boolean = false;
-  _latestOpeningTrigger: unknown;
-
-  @ViewChild(TemplateRef, {static: true}) template: TemplateRef<any>;
-  @ViewChild('panel') panel: ElementRef;
-  @ContentChildren(MDOption, {descendants: true}) options: QueryList<MDOption>;
-  @ContentChildren(MDOptionGroup, {descendants: true}) optionGroups: QueryList<MDOptionGroup>;
-  @Input('aria-label') ariaLabel: string;
-  @Input('aria-labelledby') ariaLabelledby: string;
-  @Input() displayWith: ((value: any) => string) | null = null;
-  @Input({transform: booleanAttribute}) autoActiveFirstOption: boolean;
-  @Input({transform: booleanAttribute}) autoSelectActiveOption: boolean;
-  @Input({transform: booleanAttribute}) requireSelection: boolean;
-  @Input() panelWidth: string | number;
-  @Input() _animationsDisabled: boolean = false;
-
-  @Output() readonly optionSelected = new EventEmitter<MDAutocompleteSelectedEvent>();
-  @Output() readonly opened = new EventEmitter<void>();
-  @Output() readonly closed = new EventEmitter<void>();
-  @Output() readonly optionActivated = new EventEmitter<MDAutocompleteActivatedEvent>();
-
-  @Input('class')
-  set classList(value: string | string[]) {
-    this._classList = value;
-    this._elementRef.nativeElement.className = '';
-  }
-  _classList: string | string[];
-
-  @Input({transform: booleanAttribute})
-  get hideSingleSelectionIndicator(): boolean {
-    return this._hideSingleSelectionIndicator;
-  }
-  set hideSingleSelectionIndicator(value: boolean) {
-    this._hideSingleSelectionIndicator = value;
-    this._syncParentProperties();
-  }
-  private _hideSingleSelectionIndicator: boolean;
-
-  _syncParentProperties(): void {
-    if (this.options) {
-      for (const option of this.options) {
-        option._changeDetectorRef.markForCheck();
-      }
-    }
-  }
-
-  id: string = inject(_IdGenerator).getId('md-autocomplete-');
-  readonly inertGroups: boolean;
-
-  constructor() {
-    const platform = inject(Platform);
-    this.inertGroups = platform?.SAFARI || false;
-    this.autoActiveFirstOption = !!this._defaults.autoActiveFirstOption;
-    this.autoSelectActiveOption = !!this._defaults.autoSelectActiveOption;
-    this.requireSelection = !!this._defaults.requireSelection;
-    this._hideSingleSelectionIndicator = this._defaults.hideSingleSelectionIndicator ?? false;
-  }
-
-  ngAfterContentInit() {
-    this._keyManager = new ActiveDescendantKeyManager<MDOption>(this.options)
-      .withWrap()
-      .skipPredicate(this._skipPredicate);
-    this._activeOptionChanges = this._keyManager.change.subscribe(index => {
-      if (this.isOpen) {
-        this.optionActivated.emit({source: this, option: this.options.toArray()[index] || null});
-      }
-    });
-    this._setVisibility();
-  }
-
-  ngOnDestroy() {
-    this._keyManager?.destroy();
-    this._activeOptionChanges.unsubscribe();
-  }
-
-  _setScrollTop(scrollTop: number): void {
-    if (this.panel) {
-      this.panel.nativeElement.scrollTop = scrollTop;
-    }
-  }
-
-  _getScrollTop(): number {
-    return this.panel ? this.panel.nativeElement.scrollTop : 0;
-  }
-
-  _setVisibility() {
-    this.showPanel = !!this.options?.length;
-    this._changeDetectorRef.markForCheck();
-  }
-
-  _emitSelectEvent(option: MDOption): void {
-    const event = new MDAutocompleteSelectedEvent(this, option);
-    this.optionSelected.emit(event);
-  }
-
-  _getPanelAriaLabelledby(labelId: string | null): string | null {
-    if (this.ariaLabel) {
-      return null;
-    }
-    const labelExpression = labelId ? labelId + ' ' : '';
-    return this.ariaLabelledby ? labelExpression + this.ariaLabelledby : labelId;
-  }
-
-  protected _skipPredicate() {
-    return false;
-  }
-}

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

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

package/src/lib/v2/card/card-header.html

@@ -1,9 +0,0 @@
-<ng-content select="[card-avatar], [cardAvatar]"></ng-content>
-<div class="mdc-card-header-text">
-    <ng-content
-        select="card-title, card-subtitle,
-      [card-title], [card-subtitle],
-      [cardTitle], [cardSubtitle]"
-    ></ng-content>
-</div>
-<ng-content></ng-content>

package/src/lib/v2/card/card-title-group.html

@@ -1,15 +0,0 @@
-<div>
-    <ng-content
-        select="card-title, card-subtitle,
-      [card-title], [card-subtitle],
-      [cardTitle], [cardSubtitle]"
-    ></ng-content>
-</div>
-<ng-content
-    select="[card-image], [cardImage],
-                    [card-sm-image], [cardImageSmall],
-                    [card-md-image], [cardImageMedium],
-                    [card-lg-image], [cardImageLarge],
-                    [card-xl-image], [cardImageXLarge]"
-></ng-content>
-<ng-content></ng-content>

package/src/lib/v2/card/card.html

@@ -1 +0,0 @@
-<ng-content></ng-content>

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

@@ -1,40 +0,0 @@
-import { NgModule } from '@angular/core';
-import {
-    MDCard,
-    MDCardActions,
-    MDCardAvatar,
-    MDCardContent,
-    MDCardFooter,
-    MDCardHeader,
-    MDCardImage,
-    MDCardLgImage,
-    MDCardMdImage,
-    MDCardSmImage,
-    MDCardSubtitle,
-    MDCardTitle,
-    MDCardTitleGroup,
-    MDCardXlImage,
-} from './card';
-
-const CARD_DIRECTIVES = [
-    MDCard,
-    MDCardActions,
-    MDCardAvatar,
-    MDCardContent,
-    MDCardFooter,
-    MDCardHeader,
-    MDCardImage,
-    MDCardLgImage,
-    MDCardMdImage,
-    MDCardSmImage,
-    MDCardSubtitle,
-    MDCardTitle,
-    MDCardTitleGroup,
-    MDCardXlImage,
-];
-
-@NgModule({
-    imports: CARD_DIRECTIVES,
-    exports: CARD_DIRECTIVES,
-})
-export class MDCardModule {}

package/src/lib/v2/card/card.scss

@@ -1,185 +0,0 @@
-@use './../../styles/vars.scss' as vars;
-
-$card-header-size: 40px !default;
-$card-default-padding: 16px !default;
-
-.mdc-card {
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
-    position: relative;
-    border-style: solid;
-    border-width: 0;
-    background-color: #fdf1f2;
-    border-color: #fdf1f2;
-    border-radius: vars.$default-border-size;
-    box-shadow: none;
-
-    font-family: Montserrat;
-
-    &::after {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        border: solid 1px transparent;
-        content: '';
-        display: block;
-        pointer-events: none;
-        box-sizing: border-box;
-        border-radius: vars.$default-border-size;
-    }
-}
-
-.mdc-card-outlined {
-    background-color: vars.$Light-Gray-2;
-    border-radius: vars.$default-border-size;
-    border-width: 1px;
-    border-color: vars.$Light-Gray-3;
-
-    &::after {
-        border: none;
-    }
-}
-
-.mdc-card-filled {
-    background-color: #e3e2e6;
-    border-radius: vars.$default-border-size;
-    box-shadow: none;
-}
-
-.mdc-card__media {
-    position: relative;
-    box-sizing: border-box;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: cover;
-
-    &::before {
-        display: block;
-        content: '';
-    }
-
-    &:first-child {
-        border-top-left-radius: inherit;
-        border-top-right-radius: inherit;
-    }
-
-    &:last-child {
-        border-bottom-left-radius: inherit;
-        border-bottom-right-radius: inherit;
-    }
-}
-
-.mdc-card-actions {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    box-sizing: border-box;
-    min-height: 52px;
-    padding: 8px;
-}
-
-.mdc-card-title {
-    line-height: 1.75rem;
-    font-size: 1.375rem;
-    letter-spacing: 0;
-    font-weight: 700;
-}
-
-.mdc-card-subtitle {
-    color: #201a1b;
-    line-height: 1.5rem;
-    font-size: 1rem;
-    letter-spacing: 0.009rem;
-    font-weight: 500;
-}
-
-.mdc-card-title,
-.mdc-card-subtitle {
-    display: block;
-    margin: 0;
-
-    .mdc-card-avatar ~ .mdc-card-header-text & {
-        padding: 16px 16px 0;
-    }
-}
-
-.mdc-card-header {
-    display: flex;
-    padding: 16px 16px 0;
-    min-height: 64px;
-}
-
-.mdc-card-content {
-    display: block;
-    padding: 0 16px;
-
-    &:first-child {
-        padding-top: 16px;
-    }
-
-    &:last-child {
-        padding-bottom: 16px;
-    }
-}
-
-.mdc-card-title-group {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-}
-
-.mdc-card-avatar {
-    height: 40px;
-    width: 40px;
-    border-radius: 50%;
-    flex-shrink: 0;
-    margin-bottom: 16px;
-    object-fit: cover;
-
-    & ~ .mdc-card-header-text {
-        .mdc-card-subtitle,
-        .mdc-card-title {
-            line-height: normal;
-        }
-    }
-}
-
-.mdc-card-sm-image {
-    width: 80px;
-    height: 80px;
-}
-
-.mdc-card-md-image {
-    width: 112px;
-    height: 112px;
-}
-
-.mdc-card-lg-image {
-    width: 152px;
-    height: 152px;
-}
-
-.mdc-card-xl-image {
-    width: 240px;
-    height: 240px;
-}
-
-.mdc-card-subtitle ~ .mdc-card-title,
-.mdc-card-title ~ .mdc-card-subtitle,
-.mdc-card-header .mdc-card-header-text .mdc-card-title,
-.mdc-card-header .mdc-card-header-text .mdc-card-subtitle,
-.mdc-card-title-group .mdc-card-title,
-.mdc-card-title-group .mdc-card-subtitle {
-    padding-top: 0;
-}
-
-.mdc-card-content > :last-child:not(.mdc-card-footer) {
-    margin-bottom: 0;
-}
-
-.mdc-card-actions-align-end {
-    justify-content: flex-end;
-}