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

package/src/lib/pg-components/tabs/tabs-nav.component.ts

@@ -1,324 +0,0 @@
-/** code from https://github.com/angular/material2 */
-import { Direction, Directionality } from '@angular/cdk/bidi';
-import {
-  AfterContentChecked,
-  AfterContentInit,
-  Component,
-  ContentChild,
-  ContentChildren,
-  ElementRef,
-  HostBinding,
-  Input,
-  NgZone,
-  Optional,
-  QueryList,
-  Renderer2,
-  TemplateRef,
-  ViewChild,
-  ViewEncapsulation
-} from '@angular/core';
-import { Subscription, fromEvent, merge, of as observableOf } from 'rxjs';
-import { auditTime, startWith } from 'rxjs/operators';
-import { toBoolean } from '../util/convert';
-import { MefDevTabLabelDirective } from './tab-label.directive';
-import { MefDevTabsInkBarDirective } from './tabs-ink-bar.directive';
-
-const EXAGGERATED_OVERSCROLL = 64;
-export type ScrollDirection = 'after' | 'before';
-
-/** duplicated defined https://github.com/angular/angular-cli/issues/2034 **/
-export type TabPositionMode = 'horizontal' | 'vertical';
-
-@Component({
-    selector: 'mefdev-tabs-nav',
-    encapsulation: ViewEncapsulation.None,
-    templateUrl: "./tabs-nav.component.html",
-    standalone: false
-})
-export class MefDevTabsNavComponent implements AfterContentChecked, AfterContentInit {
-  private _animated = true;
-  private _hideBar = false;
-  private _showPagination = true;
-
-  _showPaginationControls = false;
-  _disableScrollAfter = true;
-  _disableScrollBefore = true;
-  _scrollDistance = 0;
-  _selectedIndexChanged = false;
-  _realignInkBar: Subscription | null = null;
-  _tabLabelCount: number;
-  _scrollDistanceChanged: boolean;
-  _selectedIndex = 0;
-  _tabPositionMode: TabPositionMode = 'horizontal';
-  _tabPosition = 'top';
-  @Input() Size = 'default';
-  _type = 'line';
-
-  @Input()
-  set Animated(value: boolean) {
-    this._animated = toBoolean(value);
-  }
-
-  get Animated(): boolean {
-    return this._animated;
-  }
-
-  @Input()
-  set Position(value: string) {
-    this._tabPosition = value;
-  }
-
-  get Position(): string {
-    return this._tabPosition;
-  }
-
-  @Input()
-  set HideBar(value: boolean) {
-    this._hideBar = toBoolean(value);
-  }
-
-  get HideBar(): boolean {
-    return this._hideBar;
-  }
-
-  @Input()
-  set Type(value: string) {
-    this._type = value;
-  }
-
-  get Type(): string {
-    return this._type;
-  }
-
-  @ContentChild('tabBarExtraContent', { static: true }) _tabBarExtraContent: TemplateRef<void>;
-  @ContentChildren(MefDevTabLabelDirective) _labelWrappers: QueryList<MefDevTabLabelDirective>;
-  @ViewChild(MefDevTabsInkBarDirective, { static: true }) _inkBar: MefDevTabsInkBarDirective;
-  @ViewChild('tabListContainer', { static: true }) _tabListContainer: ElementRef;
-  @ViewChild('tabList', { static: true }) _tabList: ElementRef;
-
-  @Input()
-  set ShowPagination(value: boolean) {
-    this._showPagination = toBoolean(value);
-  }
-
-  get ShowPagination(): boolean {
-    return this._showPagination;
-  }
-
-  @Input()
-  set PositionMode(value: TabPositionMode) {
-    this._tabPositionMode = value;
-    this._alignInkBarToSelectedTab();
-    if (this.ShowPagination) {
-      this._updatePagination();
-    }
-  }
-
-  get PositionMode(): TabPositionMode {
-    return this._tabPositionMode;
-  }
-
-  @Input()
-  set selectedIndex(value: number) {
-    this._selectedIndexChanged = this._selectedIndex !== value;
-
-    this._selectedIndex = value;
-  }
-
-  get selectedIndex(): number {
-    return this._selectedIndex;
-  }
-
-  constructor(
-    public _elementRef: ElementRef,
-    private _ngZone: NgZone,
-    private _renderer: Renderer2,
-    @Optional() private _dir: Directionality
-  ) {}
-
-  _onContentChanges(): void {
-    if (this.ShowPagination) {
-      this._updatePagination();
-    }
-    this._alignInkBarToSelectedTab();
-  }
-
-  _scrollHeader(scrollDir: ScrollDirection): void {
-    // Move the scroll distance one-third the length of the tab list's viewport.
-    this.scrollDistance += ((scrollDir === 'before' ? -1 : 1) * this.viewWidthHeightPix) / 3;
-  }
-
-  ngAfterContentChecked(): void {
-    if (this._tabLabelCount !== this._labelWrappers.length) {
-      if (this.ShowPagination) {
-        this._updatePagination();
-      }
-      this._tabLabelCount = this._labelWrappers.length;
-    }
-    if (this._selectedIndexChanged) {
-      this._scrollToLabel(this._selectedIndex);
-      if (this.ShowPagination) {
-        this._checkScrollingControls();
-      }
-      this._alignInkBarToSelectedTab();
-      this._selectedIndexChanged = false;
-    }
-    if (this._scrollDistanceChanged) {
-      if (this.ShowPagination) {
-        this._updateTabScrollPosition();
-      }
-      this._scrollDistanceChanged = false;
-    }
-  }
-
-  ngAfterContentInit(): void {
-    this._realignInkBar = this._ngZone.runOutsideAngular(() => {
-      const dirChange = this._dir ? this._dir.change : observableOf(null);
-      const resize = typeof window !== 'undefined' ? fromEvent(window, 'resize').pipe(auditTime(10)) : observableOf(null);
-      //@ts-ignore
-      return merge(dirChange, resize)
-        .pipe(startWith(null))
-        .subscribe(() => {
-          if (this.ShowPagination) {
-            this._updatePagination();
-          }
-          this._alignInkBarToSelectedTab();
-        });
-    });
-  }
-
-  _updateTabScrollPosition(): void {
-    const scrollDistance = this.scrollDistance;
-    if (this.PositionMode === 'horizontal') {
-      const translateX = this._getLayoutDirection() === 'ltr' ? -scrollDistance : scrollDistance;
-      this._renderer.setStyle(this._tabList.nativeElement, 'transform', `translate3d(${translateX}px, 0, 0)`);
-    } else {
-      this._renderer.setStyle(this._tabList.nativeElement, 'transform', `translate3d(0,${-scrollDistance}px, 0)`);
-    }
-  }
-
-  _updatePagination(): void {
-    this._checkPaginationEnabled();
-    this._checkScrollingControls();
-    this._updateTabScrollPosition();
-  }
-
-  _checkPaginationEnabled(): void {
-    this._showPaginationControls = this.tabListScrollWidthHeightPix > this.elementRefOffSetWidthHeight;
-
-    if (!this._showPaginationControls) {
-      this.scrollDistance = 0;
-    }
-  }
-
-  _scrollToLabel(labelIndex: number): void {
-    const selectedLabel = this._labelWrappers ? this._labelWrappers.toArray()[labelIndex] : null;
-
-    if (!selectedLabel) {
-      return;
-    }
-
-    // The view length is the visible width of the tab labels.
-
-    let labelBeforePos: number;
-    let labelAfterPos: number;
-    if (this.PositionMode === 'horizontal') {
-      if (this._getLayoutDirection() === 'ltr') {
-        labelBeforePos = selectedLabel.getOffsetLeft();
-        labelAfterPos = labelBeforePos + selectedLabel.getOffsetWidth();
-      } else {
-        labelAfterPos = this._tabList.nativeElement.offsetWidth - selectedLabel.getOffsetLeft();
-        labelBeforePos = labelAfterPos - selectedLabel.getOffsetWidth();
-      }
-    } else {
-      labelBeforePos = selectedLabel.getOffsetTop();
-      labelAfterPos = labelBeforePos + selectedLabel.getOffsetHeight();
-    }
-    const beforeVisiblePos = this.scrollDistance;
-    const afterVisiblePos = this.scrollDistance + this.viewWidthHeightPix;
-
-    if (labelBeforePos < beforeVisiblePos) {
-      // Scroll header to move label to the before direction
-      this.scrollDistance -= beforeVisiblePos - labelBeforePos + EXAGGERATED_OVERSCROLL;
-    } else if (labelAfterPos > afterVisiblePos) {
-      // Scroll header to move label to the after direction
-      this.scrollDistance += labelAfterPos - afterVisiblePos + EXAGGERATED_OVERSCROLL;
-    }
-  }
-
-  _checkScrollingControls(): void {
-    // Check if the pagination arrows should be activated.
-    this._disableScrollBefore = this.scrollDistance === 0;
-    this._disableScrollAfter = this.scrollDistance === this._getMaxScrollDistance();
-  }
-
-  /**
-   * Determines what is the maximum length in pixels that can be set for the scroll distance. This
-   * is equal to the difference in width between the tab list container and tab header container.
-   *
-   * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
-   * should be called sparingly.
-   */
-  _getMaxScrollDistance(): number {
-    return this.tabListScrollWidthHeightPix - this.viewWidthHeightPix || 0;
-  }
-
-  /** Sets the distance in pixels that the tab header should be transformed in the X-axis. */
-  set scrollDistance(v: number) {
-    this._scrollDistance = Math.max(0, Math.min(this._getMaxScrollDistance(), v));
-
-    // Mark that the scroll distance has changed so that after the view is checked, the CSS
-    // transformation can move the header.
-    this._scrollDistanceChanged = true;
-
-    this._checkScrollingControls();
-  }
-
-  get scrollDistance(): number {
-    return this._scrollDistance;
-  }
-
-  get viewWidthHeightPix(): number {
-    let PAGINATION_PIX = 0;
-    if (this._showPaginationControls) {
-      PAGINATION_PIX = 64;
-    }
-    if (this.PositionMode === 'horizontal') {
-      return this._tabListContainer.nativeElement.offsetWidth - PAGINATION_PIX;
-    } else {
-      return this._tabListContainer.nativeElement.offsetHeight - PAGINATION_PIX;
-    }
-  }
-
-  get tabListScrollWidthHeightPix(): number {
-    if (this.PositionMode === 'horizontal') {
-      return this._tabList.nativeElement.scrollWidth;
-    } else {
-      return this._tabList.nativeElement.scrollHeight;
-    }
-  }
-
-  get elementRefOffSetWidthHeight(): number {
-    if (this.PositionMode === 'horizontal') {
-      return this._elementRef.nativeElement.offsetWidth;
-    } else {
-      return this._elementRef.nativeElement.offsetHeight;
-    }
-  }
-
-  _getLayoutDirection(): Direction {
-    return this._dir && this._dir.value === 'rtl' ? 'rtl' : 'ltr';
-  }
-
-  _alignInkBarToSelectedTab(): void {
-    if (this.Type !== 'fillup') {
-      const selectedLabelWrapper =
-        this._labelWrappers && this._labelWrappers.length
-          ? this._labelWrappers.toArray()[this.selectedIndex].elementRef.nativeElement
-          : null;
-      if (this._inkBar) {
-        this._inkBar.alignToElement(selectedLabelWrapper);
-      }
-    }
-  }
-}

package/src/lib/pg-components/tabs/tabs.module.ts

@@ -1,15 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { MefDevTabBodyComponent } from './tab-body.component';
-import { MefDevTabLabelDirective } from './tab-label.directive';
-import { MefDevTabComponent } from './tab.component';
-import { MefDevTabsInkBarDirective } from './tabs-ink-bar.directive';
-import { MefDevTabsNavComponent } from './tabs-nav.component';
-import { MefDevTabSetComponent } from './tabset.component';
-
-@NgModule({
-  declarations: [MefDevTabComponent, MefDevTabSetComponent, MefDevTabsNavComponent, MefDevTabLabelDirective, MefDevTabsInkBarDirective, MefDevTabBodyComponent],
-  exports: [MefDevTabComponent, MefDevTabSetComponent, MefDevTabsNavComponent, MefDevTabLabelDirective, MefDevTabsInkBarDirective, MefDevTabBodyComponent],
-  imports: [CommonModule]
-})
-export class MefDevTabsModule {}

package/src/lib/pg-components/tabs/tabset.component.html

@@ -1,39 +0,0 @@
-<div class="tab-wrapper tab-{{ _tabPositionMode }} {{ _tabPosition }} {{ _type }} {{ _extra_tab_class }}" #hostContent>
-    <mefdev-tabs-nav
-      #tabNav
-      [Size]="Size"
-      [Type]="Type"
-      [ShowPagination]="ShowPagination"
-      [PositionMode]="_tabPositionMode"
-      [Position]="_tabPosition"
-      [Animated]="inkBarAnimated"
-      [HideBar]="Hide"
-      [selectedIndex]="SelectedIndex"
-    >
-      <ng-template #tabBarExtraContent>
-        <ng-template [ngTemplateOutlet]="TabBarExtraTemplate || TabBarExtraContent"></ng-template>
-      </ng-template>
-      <li mefdev-tab-label [disabled]="tab.disabled" (click)="clickLabel(i)" *ngFor="let tab of _tabs; let i = index">
-        <a href="javascript:void(0);" class="" [class.active]="SelectedIndex == i && !Hide">
-          <ng-template [ngTemplateOutlet]="tab._tabHeading"></ng-template>
-        </a>
-      </mefdev-tabs-nav>
-    <div class="tab-content-wrapper {{ _extra_tabcontent_class }}">
-      <div
-        class="tab-content {{ _tabAnimation }}"
-        #tabContent
-        [class.animated]="tabPaneAnimated"
-        [class.not-animated]="!tabPaneAnimated"
-        [style.margin-left.%]="tabPaneAnimated && -(SelectedIndex ?? -1) * 100"
-      >
-        <mefdev-tab-body
-          class="tab-pane"
-          [class.active]="SelectedIndex == i && !Hide"
-          [class.inactive]="SelectedIndex != i || Hide"
-          [content]="tab.content"
-          *ngFor="let tab of _tabs; let i = index"
-        >
-        </mefdev-tab-body>
-      </div>
-    </div>
-  </div>

package/src/lib/pg-components/tabs/tabset.component.ts

@@ -1,270 +0,0 @@
-/** code from https://github.com/angular/material2 */
-
-import {
-  AfterContentChecked,
-  AfterViewInit,
-  Component,
-  ContentChild,
-  ElementRef,
-  EventEmitter,
-  Input,
-  OnInit,
-  Output,
-  Renderer2,
-  TemplateRef,
-  ViewChild,
-  ViewEncapsulation
-} from '@angular/core';
-import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
-import { MefDevTabComponent } from './tab.component';
-import { MefDevTabsNavComponent } from './tabs-nav.component';
-
-export interface AnimatedInterface {
-  inkBar: boolean;
-  tabPane: boolean;
-}
-
-export class TabChangeEvent {
-  index: number;
-  tab: MefDevTabComponent;
-}
-
-export type TabPosition = 'top' | 'bottom' | 'left' | 'right';
-export type TabPositionMode = 'horizontal' | 'vertical';
-export type TabType = 'line' | 'fillup' | 'linetriangle';
-
-
-/**
-  * Represents a tab set or tab group component.
-  * @example
-  * <mefdev-tabset TabPosition="top" Animated="true" ShowPagination="true">
-  *   <mefdev-tab label="Tab 1">Tab 1 content</mefdev-tab>
-  *   <mefdev-tab label="Tab 2">Tab 2 content</mefdev-tab>
-  * </mefdev-tabset>
-  *
-  * Example of usage:
-  * <example-url>https://platform.mef.dev/ui_kit_demo/view/page_components/tabset</example-url>
-  */
-@Component({
-    selector: 'mefdev-tabset',
-    encapsulation: ViewEncapsulation.None,
-    templateUrl: "./tabset.component.html",
-    standalone: false
-})
-export class MefDevTabSetComponent implements AfterContentChecked, OnInit, AfterViewInit {
-  _el:any;
-  _classMap:any;
-  _prefixCls = 'nav-tabs';
-  _width:any;
-  _tabPosition: TabPosition = 'top';
-  _tabPositionMode: TabPositionMode = 'horizontal';
-  _indexToSelect: number | null = 0;
-  _selectedIndex: number | null = null;
-  _isViewInit = false;
-  _tabs: MefDevTabComponent[] = [];
-  _tabAnimation = '';
-  _extra_tab_class = '';
-  _extra_tabcontent_class = '';
-
-  /**
-   * Template reference for additional content to be displayed in the tab bar.
-   */
-  @Input() TabBarExtraTemplate: TemplateRef<void>;
-  @ContentChild('TabBarExtraContent', { static: true }) TabBarExtraContent: TemplateRef<void>;
-  @ViewChild('tabNav', { static: true }) _tabNav: MefDevTabsNavComponent;
-  @ViewChild('tabContent', { static: true }) _tabContent: ElementRef;
-  @ViewChild('hostContent', { static: true }) _hostContent: ElementRef;
-
-  /**
-   * Whether the tab set is animated. Can be a boolean or an object of type AnimatedInterface.
-   * @example
-   * - true (enables animation for both ink bar and tab pane)
-   * - { inkBar: true, tabPane: false } (enables animation for ink bar only)
-   * Default: true
-   */
-
-  @Input() Animated: AnimatedInterface | boolean = true;
-
-  /**
-   * Whether to show pagination controls for scrolling tabs.
-   * @example true
-   * Default: true
-   */
-  @Input() ShowPagination = true;
-
-  /**
-   * Whether the tab set is hidden.
-   * @example true
-   * Default: false
-   */
-  @Input() Hide = false;
-
-  /**
-   * The index of the selected tab.
-   */
-  @Input()
-  set SelectedIndex(value: number | null) {
-    this._indexToSelect = value;
-  }
-
-  get SelectedIndex(): number | null {
-    return this._selectedIndex;
-  }
-
-  /**
-   * Event emitted when the selected tab index changes.
-   * @returns An Observable emitting the index of the selected tab.
-   */
-  @Output()
-  get SelectedIndexChange(): Observable<number> {
-    //@ts-ignore
-    return this.SelectChange.pipe(map((event:any) => event.index));
-  }
-
-  /**
-   * Event emitted when a tab is selected.
-   * @example
-   * <mefdev-tabset (SelectChange)="onTabSelect($event)"></mefdev-tabset>
-   */
-  @Output() SelectChange: EventEmitter<TabChangeEvent> = new EventEmitter<TabChangeEvent>(true);
-
-  /**
-   * Size of the tab set. Can be 'default', 'small', or 'large'.
-   * @example 'large'
-   * Default: 'default'
-   */
-  @Input() Size = 'default';
-  _type: TabType = 'line';
-  tabs: MefDevTabComponent[] = [];
-
-  /**
-   * Position of the tab set. Can be 'top', 'bottom', 'left', or 'right'.
-   */
-  @Input()
-  set TabPosition(value: TabPosition) {
-    this._tabPosition = value;
-    this._tabPositionMode = (value === 'top' || value === 'bottom') ? 'horizontal' : 'vertical';
-  }
-  get TabPosition(): TabPosition {
-    return this._tabPosition;
-  }
-
-  /**
-   * Additional CSS class for the tabs.
-   */
-  @Input()
-  set extraTabClass(value: string) {
-    this._extra_tab_class = value;
-  }
-
-  /**
-   * Additional CSS class for the tab content.
-   */
-  @Input()
-  set extraTabContentClass(value: string) {
-    this._extra_tabcontent_class = value;
-  }
-
-  /**
-   * Type of the tab set. Can be 'line', 'fillup', or 'linetriangle'.
-   */
-  @Input()
-  set Type(value: TabType) {
-    if (this._type === value) {
-      return;
-    }
-    this._type = value;
-    this._setClassMap();
-  }
-
-  /**
-   * Animation to apply to the tabs. Accepts CSS animation name.
-   */
-  @Input()
-  set tabAnimation(value: string) {
-    this._tabAnimation = value;
-  }
-
-  get Type(): TabType {
-    return this._type;
-  }
-
-  _setPosition(value: TabPosition): void {}
-
-  _setClassMap(): void {}
-
-  // Other properties, methods, and lifecycle hooks...
-
-  /**
-   * Selects the tab at the specified index.
-   * @param index The index of the tab to select.
-   * ```
-   * <button (click)="clickLabel(0)">Select Tab 1</button>
-   *```
-   */
-  clickLabel(index: number): void {
-    if (this._tabs[index].Disabled) {
-    } else {
-      this.SelectedIndex = index;
-      this._tabs[index].pgClick.emit();
-    }
-  }
-
-  ngOnInit(): void {
-    this._setClassMap();
-  }
-
-  ngAfterContentChecked(): void {
-    // Clamp the next selected index to the bounds of 0 and the tabs length. Note the `|| 0`, which
-    // ensures that values like NaN can't get through and which would otherwise throw the
-    // component into an infinite loop (since Math.max(NaN, 0) === NaN).
-    const indexToSelect = (this._indexToSelect = Math.min(this._tabs.length - 1, Math.max(this._indexToSelect || 0, 0)));
-
-    // If there is a change in selected index, emit a change event. Should not trigger if
-    // the selected index has not yet been initialized.
-    if (this._selectedIndex !== indexToSelect && this._selectedIndex != null) {
-      this.SelectChange.emit(this._createChangeEvent(indexToSelect));
-    }
-
-    // Setup the position for each tab and optionally setup an origin on the next selected tab.
-    this._tabs.forEach((tab: MefDevTabComponent, index: number) => {
-      tab.position = index - indexToSelect;
-      // If there is already a selected tab, then set up an origin for the next selected tab
-      // if it doesn't have one already.
-      if (this._selectedIndex != null && tab.position === 0 && !tab.origin) {
-        tab.origin = indexToSelect - this._selectedIndex;
-      }
-    });
-    this._selectedIndex = indexToSelect;
-  }
-
-  ngAfterViewInit(): void {
-    this._isViewInit = true;
-  }
-
-  private _createChangeEvent(index: number): TabChangeEvent {
-    const event = new TabChangeEvent();
-    event.index = index;
-    if (this._tabs && this._tabs.length) {
-      event.tab = this._tabs[index];
-      this._tabs.forEach((item, i) => {
-        if (i !== index) {
-          item.pgDeselect.emit();
-        }
-      });
-      event.tab.pgSelect.emit();
-    }
-    return event;
-  }
-
-  get inkBarAnimated(): boolean {
-    return this.Animated === true || (this.Animated as AnimatedInterface).inkBar === true;
-  }
-
-  get tabPaneAnimated(): boolean {
-    return this.Animated === true || (this.Animated as AnimatedInterface).tabPane === true;
-  }
-
-  constructor(private _renderer: Renderer2) {}
-}

package/src/lib/pg-components/util/convert.ts

@@ -1,3 +0,0 @@
-export function toBoolean(value: any): boolean {
-  return value === '' || (value && value !== 'false');
-}

package/src/lib/pg-components/util/request-animation.ts

@@ -1,31 +0,0 @@
-
-const availablePrefixs = ['moz', 'ms', 'webkit'];
-
-function requestAnimationFramePolyfill(): typeof requestAnimationFrame {
-  let lastTime = 0;
-  return function (callback: FrameRequestCallback): number {
-    const currTime = new Date().getTime();
-    const timeToCall = Math.max(0, 16 - (currTime - lastTime));
-    const id = window.setTimeout(() => { callback(currTime + timeToCall); }, timeToCall);
-    lastTime = currTime + timeToCall;
-    return id;
-  };
-}
-
-function getRequestAnimationFrame(): typeof requestAnimationFrame {
-  if (typeof window === 'undefined') {
-    //@ts-ignore
-    return () => null;
-  }
-  if (window.requestAnimationFrame) {
-    return window.requestAnimationFrame.bind(window);
-  }
-
-  const prefix = availablePrefixs.filter(key => `${key}RequestAnimationFrame` in window)[0];
-
-  return prefix
-    ? (window as any)[`${prefix}RequestAnimationFrame`]
-    : requestAnimationFramePolyfill();
-}
-
-export const reqAnimFrame = getRequestAnimationFrame();

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

@@ -1,12 +0,0 @@
-import {Directive, ElementRef, inject} from '@angular/core';
-
-
-@Directive({
-  selector: '[mdAutocompleteOrigin]',
-  exportAs: 'mdAutocompleteOrigin',
-})
-export class MDAutocompleteOrigin {
-  elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
-
-  constructor() {}
-}