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

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

@@ -0,0 +1,14 @@
+import { OverlayModule } from "@angular/cdk/overlay";
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+import { FormsModule } from "@angular/forms";
+import { pgOptionComponent } from "./option.component";
+import { OptionPipe } from "./option.pipe";
+import { pgSelectComponent } from "./select.component";
+
+@NgModule({
+  imports: [CommonModule, FormsModule, OverlayModule],
+  declarations: [OptionPipe, pgOptionComponent, pgSelectComponent],
+  exports: [OptionPipe, pgOptionComponent, pgSelectComponent]
+})
+export class PgSelectModule {}

package/{lib/pg-components/spec-flow-test/index.d.ts → src/lib/pg-components/spec-flow-test/index.ts}

@@ -1,2 +1,2 @@
 export * from './spec-flow-test/spec-flow-test.component';
-export * from './spec-flow-test.module';
+export * from './spec-flow-test.module';

package/src/lib/pg-components/spec-flow-test/spec-flow-test/spec-flow-test.component.html

@@ -0,0 +1,6 @@
+<!-- Block for test -->
+<div style="display: none;">
+  <input id="ResponseTimestamp" type="hidden" value="{{ResponseTimestamp}}" />
+  <input id="ResponseError" type="hidden" value="{{ResponseError}}" />
+  <input id="ReportError" type="hidden" value="{{ReportError}}" />
+</div>

package/src/lib/pg-components/spec-flow-test/spec-flow-test/spec-flow-test.component.ts

@@ -0,0 +1,36 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-spec-flow-test',
+  templateUrl: './spec-flow-test.component.html',
+  styleUrls: ['./spec-flow-test.component.scss']
+})
+export class SpecFlowTestComponent implements OnInit {
+  /**
+   *  UTC datetime
+   */
+  ResponseTimestamp: any;
+  /**
+   * 0/1 1 - ошибка, 0 - успех (200, 201 и тд)
+   */
+  ResponseError: any;
+  /**
+   * string для ResponseError=1
+   */
+  ReportError: any;
+  constructor() { }
+
+  ngOnInit() {
+  }
+  public setError(error:any) {
+    this.ResponseTimestamp = Date.now();
+    this.ResponseError = 1;
+    this.ReportError = error;
+  }
+  public setSuccess(){
+    this.ResponseTimestamp = Date.now();
+    this.ResponseError = 0;
+    this.ReportError = undefined;
+  }
+
+}

package/src/lib/pg-components/spec-flow-test/spec-flow-test.module.ts

@@ -0,0 +1,18 @@
+import { ModuleWithProviders, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SpecFlowTestComponent } from './spec-flow-test/spec-flow-test.component';
+
+@NgModule({
+  declarations: [SpecFlowTestComponent],
+  exports: [SpecFlowTestComponent],
+  imports: [
+    CommonModule
+  ]
+})
+export class SpecFlowTestModule {
+  static forRoot(): ModuleWithProviders<SpecFlowTestModule> {
+    return {
+      ngModule: SpecFlowTestModule
+    };
+  }
+ }

package/{lib/pg-components/switch/index.d.ts → src/lib/pg-components/switch/index.ts}

@@ -1,2 +1,2 @@
 export * from './switch.component';
-export * from './switch.module';
+export * from './switch.module';

package/src/lib/pg-components/switch/switch.component.ts

@@ -0,0 +1,122 @@
+import {
+	forwardRef,
+	Component,
+	HostListener,
+	Input,
+	OnInit,
+	ViewEncapsulation,
+	Output
+} from "@angular/core";
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
+import { toBoolean } from "../util/convert";
+
+@Component({
+	selector: "pg-switch",
+	encapsulation: ViewEncapsulation.None,
+	template: `
+		<span [ngClass]="_classMap" tabindex="0">
+			<span [ngClass]="_innerPrefixCls">
+				<ng-template [ngIf]="_checked">
+					<ng-content select="[checked]"></ng-content>
+				</ng-template>
+				<ng-template [ngIf]="!_checked">
+					<ng-content select="[unchecked]"></ng-content>
+				</ng-template>
+			</span>
+		</span>
+	`,
+	providers: [
+		{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => pgSwitchComponent),
+			multi: true
+		}
+	]
+})
+export class pgSwitchComponent implements OnInit, ControlValueAccessor {
+	private _disabled = false;
+	_prefixCls = "toggle-switch";
+	_color = "primary";
+	_innerPrefixCls = `${this._prefixCls}-inner `;
+	_classMap:any;
+	_size: string;
+	_checked = false;
+
+	// ngModel Access
+	@Output()
+	onChange: (value: boolean) => void = () => null;
+	onTouched: () => void = () => null;
+
+	@Input()
+	set Size(value: string) {
+		this._size = value;
+		this.setClassMap();
+	}
+
+	@Input()
+	set Color(value: string) {
+		this._color = value;
+		this.setClassMap();
+	}
+
+	get Size(): string {
+		return this._size;
+	}
+
+	@Input()
+	set Disabled(value: boolean) {
+		this._disabled = toBoolean(value);
+		this.setClassMap();
+	}
+
+	get Disabled(): boolean {
+		return this._disabled;
+	}
+
+	@HostListener("click", ["$event"])
+	onClick(e: MouseEvent): void {
+		e.preventDefault();
+		if (!this._disabled) {
+			this.updateValue(!this._checked);
+			this.onChange(this._checked);
+		}
+	}
+
+	updateValue(value: boolean): void {
+		if (this._checked === value) {
+			return;
+		}
+		this._checked = value;
+		this.setClassMap();
+	}
+
+	setClassMap(): void {
+		this._classMap = {
+			[this._prefixCls]: true,
+			[`${this._prefixCls}-checked`]: this._checked,
+			[`${this._prefixCls}-disabled`]: this._disabled,
+			[`${this._prefixCls}-small`]: this._size === "small",
+			[this._color]: this._color
+		};
+	}
+
+	writeValue(value: boolean): void {
+		this.updateValue(value);
+	}
+
+	registerOnChange(fn: (_: boolean) => void): void {
+		this.onChange = fn;
+	}
+
+	registerOnTouched(fn: () => void): void {
+		this.onTouched = fn;
+	}
+
+	setDisabledState(isDisabled: boolean): void {
+		this.Disabled = isDisabled;
+	}
+
+	ngOnInit(): void {
+		this.setClassMap();
+	}
+}

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

@@ -0,0 +1,11 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { pgSwitchComponent } from './switch.component';
+
+@NgModule({
+  exports     : [ pgSwitchComponent ],
+  declarations: [ pgSwitchComponent ],
+  imports     : [ CommonModule ]
+})
+export class pgSwitchModule {
+}

package/{lib/pg-components/tabs/index.d.ts → src/lib/pg-components/tabs/index.ts}

@@ -4,4 +4,4 @@ export { pgTabComponent } from './tab.component';
 export { pgTabsInkBarDirective } from './tabs-ink-bar.directive';
 export { pgTabsNavComponent } from './tabs-nav.component';
 export { pgTabSetComponent } from './tabset.component';
-export { pgTabsModule } from './tabs.module';
+export { pgTabsModule } from './tabs.module';

package/src/lib/pg-components/tabs/tab-body.component.ts

@@ -0,0 +1,12 @@
+import { Component, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'pg-tab-body',
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <ng-template [ngTemplateOutlet]="content"></ng-template>
+  `
+})
+export class pgTabBodyComponent {
+  @Input() content: TemplateRef<void>;
+}

package/src/lib/pg-components/tabs/tab-label.directive.ts

@@ -0,0 +1,40 @@
+import { Directive, ElementRef, HostBinding, Input } from '@angular/core';
+import { toBoolean } from '../util/convert';
+
+@Directive({
+  selector: '[pg-tab-label]',
+  host: {
+    '[class.nav-item]': 'true'
+  }
+})
+export class pgTabLabelDirective {
+  private _disabled = false;
+
+  @Input()
+  @HostBinding('class.nav-item-disabled')
+  set disabled(value: boolean) {
+    this._disabled = toBoolean(value);
+  }
+
+  get disabled(): boolean {
+    return this._disabled;
+  }
+
+  constructor(public elementRef: ElementRef) {}
+
+  getOffsetLeft(): number {
+    return this.elementRef.nativeElement.offsetLeft;
+  }
+
+  getOffsetWidth(): number {
+    return this.elementRef.nativeElement.offsetWidth;
+  }
+
+  getOffsetTop(): number {
+    return this.elementRef.nativeElement.offsetTop;
+  }
+
+  getOffsetHeight(): number {
+    return this.elementRef.nativeElement.offsetHeight;
+  }
+}

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

@@ -0,0 +1,62 @@
+import {
+  Component,
+  ContentChild,
+  EventEmitter,
+  HostBinding,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+  TemplateRef,
+  ViewChild
+} from '@angular/core';
+import { toBoolean } from '../util/convert';
+import { pgTabSetComponent } from './tabset.component';
+
+@Component({
+  selector: 'pg-tab',
+  template: `
+    <ng-template>
+      <ng-content></ng-content>
+    </ng-template>
+  `,
+  styles: [],
+  host: {
+    '[class.ant-tabs-tabpane]': 'true'
+  }
+})
+export class pgTabComponent implements OnDestroy, OnInit {
+  private disabled = false;
+
+  position: number | null = null;
+  origin: number | null = null;
+
+  @Input()
+  set Disabled(value: boolean) {
+    this.disabled = toBoolean(value);
+  }
+
+  get Disabled(): boolean {
+    return this.disabled;
+  }
+
+  @Output() pgSelect = new EventEmitter();
+  @Output() pgClick = new EventEmitter();
+  @Output() pgDeselect = new EventEmitter();
+  @ContentChild('TabHeading', { static: true }) _tabHeading: TemplateRef<void>;
+  @ViewChild(TemplateRef, { static: true }) _content: TemplateRef<void>;
+
+  get content(): TemplateRef<void> | null {
+    return this._content;
+  }
+
+  constructor(private pgTabSetComponent: pgTabSetComponent) {}
+
+  ngOnInit(): void {
+    this.pgTabSetComponent._tabs.push(this);
+  }
+
+  ngOnDestroy(): void {
+    this.pgTabSetComponent._tabs.splice(this.pgTabSetComponent._tabs.indexOf(this), 1);
+  }
+}

package/src/lib/pg-components/tabs/tabs-ink-bar.directive.ts

@@ -0,0 +1,77 @@
+import { Directive, ElementRef, HostBinding, Input, NgZone, Renderer2 } from '@angular/core';
+import { reqAnimFrame } from '../util/request-animation';
+import { toBoolean } from '../util/convert';
+
+export type TabPositionMode = 'horizontal' | 'vertical';
+
+@Directive({
+  selector: '[pg-tabs-ink-bar]',
+  host: {
+    '[class.nav-item]': 'true'
+  }
+})
+export class pgTabsInkBarDirective {
+  private _animated = false;
+
+  @Input()
+  @HostBinding('class.nav-item-animated')
+  set Animated(value: boolean) {
+    this._animated = toBoolean(value);
+  }
+
+  get Animated(): boolean {
+    return this._animated;
+  }
+
+  @Input() PositionMode: TabPositionMode = 'horizontal';
+
+  constructor(private _renderer: Renderer2, private _elementRef: ElementRef, private _ngZone: NgZone) {}
+
+  alignToElement(element: HTMLElement): void {
+    this.show();
+
+    this._ngZone.runOutsideAngular(() => {
+      reqAnimFrame(() => {
+        /** when horizontal remove height style and add transfrom left **/
+        if (this.PositionMode === 'horizontal') {
+          this._renderer.removeStyle(this._elementRef.nativeElement, 'height');
+          this._renderer.setStyle(this._elementRef.nativeElement, 'transform', `translate3d(${this._getLeftPosition(element)}, 0px, 0px)`);
+          this._renderer.setStyle(this._elementRef.nativeElement, 'width', this._getElementWidth(element));
+        } else {
+          /** when vertical remove width style and add transfrom top **/
+          this._renderer.removeStyle(this._elementRef.nativeElement, 'width');
+          this._renderer.setStyle(this._elementRef.nativeElement, 'transform', `translate3d(0px, ${this._getTopPosition(element)}, 0px)`);
+          this._renderer.setStyle(this._elementRef.nativeElement, 'height', this._getElementHeight(element));
+        }
+      });
+    });
+  }
+
+  show(): void {
+    this._renderer.setStyle(this._elementRef.nativeElement, 'visibility', 'visible');
+  }
+
+  setDisplay(value: string): void {
+    this._renderer.setStyle(this._elementRef.nativeElement, 'display', value);
+  }
+
+  hide(): void {
+    this._renderer.setStyle(this._elementRef.nativeElement, 'visibility', 'hidden');
+  }
+
+  _getLeftPosition(element: HTMLElement): string {
+    return element ? element.offsetLeft + 'px' : '0';
+  }
+
+  _getElementWidth(element: HTMLElement): string {
+    return element ? element.offsetWidth + 'px' : '0';
+  }
+
+  _getTopPosition(element: HTMLElement): string {
+    return element ? element.offsetTop + 'px' : '0';
+  }
+
+  _getElementHeight(element: HTMLElement): string {
+    return element ? element.offsetHeight + 'px' : '0';
+  }
+}