@natec/mef-dev-ui-kit 0.0.67 → 0.0.69

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

@@ -1,345 +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 { pgTabLabelDirective } from './tab-label.directive';
-import { pgTabsInkBarDirective } 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: 'pg-tabs-nav',
-  encapsulation: ViewEncapsulation.None,
-  template: `
-    <div class="nav-tabs-wrapper" [class.scrolling]="_showPaginationControls" #tabListContainer>
-      <div class="nav-wrap">
-        <ul
-          class="nav nav-tabs nav-tabs-{{ _type }} nav-tabs-{{ _tabPosition }}"
-          [class.tabs-nav-animated]="Animated"
-          #tabList
-          (cdkObserveContent)="_onContentChanges()"
-        >
-          <div
-            class="active-bar"
-            pg-tabs-ink-bar
-            [hidden]="HideBar"
-            [Animated]="Animated"
-            [PositionMode]="PositionMode"
-            style="display: block;"
-          ></div>
-          <ng-content></ng-content>
-        </ul>
-      </div>
-    </div>
-  `,
-  host: {}
-})
-export class pgTabsNavComponent 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(pgTabLabelDirective) _labelWrappers: QueryList<pgTabLabelDirective>;
-  @ViewChild(pgTabsInkBarDirective, { static: true }) _inkBar: pgTabsInkBarDirective;
-  @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,16 +0,0 @@
-import { ObserversModule } from '@angular/cdk/observers';
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { pgTabBodyComponent } from './tab-body.component';
-import { pgTabLabelDirective } from './tab-label.directive';
-import { pgTabComponent } from './tab.component';
-import { pgTabsInkBarDirective } from './tabs-ink-bar.directive';
-import { pgTabsNavComponent } from './tabs-nav.component';
-import { pgTabSetComponent } from './tabset.component';
-
-@NgModule({
-  declarations: [pgTabComponent, pgTabSetComponent, pgTabsNavComponent, pgTabLabelDirective, pgTabsInkBarDirective, pgTabBodyComponent],
-  exports: [pgTabComponent, pgTabSetComponent, pgTabsNavComponent, pgTabLabelDirective, pgTabsInkBarDirective, pgTabBodyComponent],
-  imports: [CommonModule, ObserversModule]
-})
-export class pgTabsModule {}

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

@@ -1,237 +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 { toBoolean } from '../util/convert';
-import { pgTabComponent } from './tab.component';
-import { pgTabsNavComponent } from './tabs-nav.component';
-
-export interface AnimatedInterface {
-  inkBar: boolean;
-  tabPane: boolean;
-}
-
-export class TabChangeEvent {
-  index: number;
-  tab: pgTabComponent;
-}
-
-export type TabPosition = 'top' | 'bottom' | 'left' | 'right';
-export type TabPositionMode = 'horizontal' | 'vertical';
-export type TabType = 'line' | 'fillup' | 'linetriangle';
-
-@Component({
-  selector: 'pg-tabset',
-  encapsulation: ViewEncapsulation.None,
-  template: `
-    <div class="tab-wrapper tab-{{ _tabPositionMode }} {{ _tabPosition }} {{ _type }} {{ _extra_tab_class }}" #hostContent>
-      <pg-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 pg-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>
-        </li>
-      </pg-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"
-        >
-          <pg-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"
-          >
-          </pg-tab-body>
-        </div>
-      </div>
-    </div>
-  `
-})
-export class pgTabSetComponent 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: pgTabComponent[] = [];
-  _tabAnimation = '';
-  _extra_tab_class = '';
-  _extra_tabcontent_class = '';
-
-  @Input() TabBarExtraTemplate: TemplateRef<void>;
-  @ContentChild('TabBarExtraContent', { static: true }) TabBarExtraContent: TemplateRef<void>;
-  @ViewChild('tabNav', { static: true }) _tabNav: pgTabsNavComponent;
-  @ViewChild('tabContent', { static: true }) _tabContent: ElementRef;
-  @ViewChild('hostContent', { static: true }) _hostContent: ElementRef;
-  @Input() Animated: AnimatedInterface | boolean = true;
-  @Input() ShowPagination = true;
-  @Input() Hide = false;
-
-  @Input()
-  set SelectedIndex(value: number | null) {
-    this._indexToSelect = value;
-  }
-
-  get SelectedIndex(): number | null {
-    return this._selectedIndex;
-  }
-
-  @Output()
-  get SelectedIndexChange(): Observable<number> {
-    return this.SelectChange.pipe(map(event => event.index));
-  }
-
-  @Output() SelectChange: EventEmitter<TabChangeEvent> = new EventEmitter<TabChangeEvent>(true);
-
-  @Input() Size = 'default';
-  _type: TabType = 'line';
-  tabs: pgTabComponent[] = [];
-
-  @Input()
-  set TabPosition(value: TabPosition) {
-    this._tabPosition = value;
-    if (this._tabPosition === 'top' || this._tabPosition === 'bottom') {
-      this._tabPositionMode = 'horizontal';
-    } else {
-      this._tabPositionMode = 'vertical';
-    }
-  }
-
-  get TabPosition(): TabPosition {
-    return this._tabPosition;
-  }
-
-  @Input()
-  set extraTabClass(value: string) {
-    this._extra_tab_class = value;
-  }
-  @Input()
-  set extraTabContentClass(value: string) {
-    this._extra_tabcontent_class = value;
-  }
-
-  @Input()
-  set Type(value: TabType) {
-    if (this._type === value) {
-      return;
-    }
-    this._type = value;
-    this._setClassMap();
-  }
-
-  @Input()
-  set tabAnimation(value: string) {
-    this._tabAnimation = value;
-  }
-
-  get Type(): TabType {
-    return this._type;
-  }
-
-  _setPosition(value: TabPosition): void {}
-
-  _setClassMap(): void {}
-
-  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: pgTabComponent, 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[`${prefix}RequestAnimationFrame`]
-    : requestAnimationFramePolyfill();
-}
-
-export const reqAnimFrame = getRequestAnimationFrame();

package/tsconfig.lib.json

@@ -1,15 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/lib",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "types": []
-  },
-  "exclude": [
-    "src/test.ts",
-    "**/*.spec.ts"
-  ]
-}

package/tsconfig.lib.prod.json

@@ -1,10 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  }
-}

package/tsconfig.spec.json

@@ -1,17 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
-  },
-  "files": [
-    "src/test.ts"
-  ],
-  "include": [
-    "**/*.spec.ts",
-    "**/*.d.ts"
-  ]
-}