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

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

@@ -0,0 +1,345 @@
+/** 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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,237 @@
+/** 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

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

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

@@ -0,0 +1,31 @@
+
+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/src/lib/styles/pg/modules/_buttons.scss

@@ -2,38 +2,38 @@
 
 
 @mixin _button($main_color, $hover_color, $text_color, $hover_text_color, $hover_color_opacity) {
-    padding-left: 2em ;
-    padding-right: 2em ;
-    min-height: 36px ;
-    border: 0 ;
-    border-radius: 5px ;
-    color: $text_color ;
-    background-color: $main_color ;
-    font-family: montserrat-regular ;
-    font-weight: 500 ;
-    font-size: 14px ;
-    line-height: 24px ;
+    padding-left: 2em !important;
+    padding-right: 2em !important;
+    min-height: 36px !important;
+    border: 0 !important;
+    border-radius: 5px !important;
+    color: $text_color !important;
+    background-color: $main_color !important;
+    font-family: montserrat-regular !important;
+    font-weight: 500 !important;
+    font-size: 14px !important;
+    line-height: 24px !important;
     &:hover{
-        color: $hover_text_color ;
-        background-color: $hover_color ;
-        opacity: $hover_color_opacity;
+        color: $hover_text_color !important;
+        background-color: $hover_color !important;
+        opacity: $hover_color_opacity !important;
     }
 }
 
 @mixin _button_status($main_color, $hover_color, $text_color, $hover_text_color) {
-    padding-left: 2em ;
-    padding-right: 2em ;
-    min-height: 23px ;
-    border: 0 ;
-    border-radius: 5px ;
-    color: $text_color ;
-    background-color: $main_color ;
-    font-family: Lato-regular ;
-    font-size: 11px ;
-    line-height: 13px ;
+    padding-left: 2em !important;
+    padding-right: 2em !important;
+    min-height: 23px !important;
+    border: 0 !important;
+    border-radius: 5px !important;
+    color: $text_color !important;
+    background-color: $main_color !important;
+    font-family: Lato-regular !important;
+    font-size: 11px !important;
+    line-height: 13px !important;
     &:hover{
-        color: $hover_text_color ;
-        background-color: $hover_color ;
+        color: $hover_text_color !important;
+        background-color: $hover_color !important;
     }
 }
 .btn-primary {