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

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

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

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

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

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

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

@@ -1,37 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-    selector: 'mefdev-spec-flow-test',
-    templateUrl: './spec-flow-test.component.html',
-    styleUrls: ['./spec-flow-test.component.scss'],
-    standalone: false
-})
-export class MefDevSpecFlowTestComponent 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

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

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

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

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

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

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

@@ -1,286 +0,0 @@
-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
-  * @skipTemplateDoc: true
-  * Example of usage:
-  * <example-url>https://platform.mef.dev/ui_kit_demo/view/controls/switch</example-url>
-*/
-@Component({
-    selector: "mefdev-switch",
-    encapsulation: ViewEncapsulation.None,
-    templateUrl: "./switch.component.html",
-    providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => MefDevSwitchComponent),
-            multi: true
-        }
-    ],
-    standalone: false
-})
-export class MefDevSwitchComponent implements OnInit, ControlValueAccessor {
-	  // Private variables
-	private _disabled = false;
-	_prefixCls = "toggle-switch";
-	_color = "primary";
-	_innerPrefixCls = `${this._prefixCls}-inner `;
-	_classMap:any;
-	_size: string;
-	_checked = false;
-
-	// ngModel Access
-	// Output event triggered when the switch value changes
-	@Output()
-	/**
-   * Event emitted when the value of the switch changes.
-   * 
-   * @output
-   * @param value The new value of the switch.
-   * 
-   * Usage example:
-   * ```
-   * <mefdev-switch (onChange)="handleSwitchChange($event)"></mefdev-switch>
-   * ```
-   */
-	onChange: (value: boolean) => void = () => null;
-	onTouched: () => void = () => null;
-
-	// Input properties
-
-	/**
-   * Sets the value of the switch.
-   * 
-   * @input
-   * @param value The value of the switch.
-   * 
-   * Usage example:
-   * ```
-   * <mefdev-switch [Value]="true"></mefdev-switch>
-   * ```
-   */
-  @Input()
-	set Value(value: boolean) {
-		this.updateValue(value);
-	}
-
-	/**
-   * Sets the size of the switch.
-   * 
-   * @input
-   * @param value The size of the switch (e.g., "small", "large").
-   * 
-   * Usage example:
-   * ```
-   * <mefdev-switch [Size]="'small'"></mefdev-switch>
-   * ```
-   */
-	@Input()
-	set Size(value: string) {
-		this._size = value;
-		this.setClassMap();
-	}
-
-	/**
-   * Sets the color of the switch.
-   * 
-   * @input
-   * @param value The color of the switch (e.g., "primary", "secondary").
-   * 
-   * Usage example:
-   * ```
-   * <mefdev-switch [Color]="'primary'"></mefdev-switch>
-   * ```
-   */
-	@Input()
-	set Color(value: string) {
-		this._color = value;
-		this.setClassMap();
-	}
-
-	/**
-   * Gets the current size of the switch.
-   * 
-   * @input
-   * @returns The size of the switch.
-   * 
-   * Usage example:
-   * ```
-   * const size = mySwitchComponent.Size;
-   * ```
-   */
-	get Size(): string {
-		return this._size;
-	}
-
-	/**
-   * Sets the disabled state of the switch.
-   * 
-   * @input
-   * @param value The disabled state of the switch.
-   * 
-   * Usage example:
-   * ```
-   * <mefdev-switch [Disabled]="true"></mefdev-switch>
-   * ```
-   */
-	@Input()
-	set Disabled(value: boolean) {
-		this._disabled = toBoolean(value);
-		this.setClassMap();
-	}
-
-	  /**
-   * Gets the current disabled state of the switch.
-   * 
-   * @input
-   * @returns The disabled state of the switch.
-   * 
-   * Usage example:
-   * ```
-   * const disabled = mySwitchComponent.Disabled;
-   * ```
-   */
-	get Disabled(): boolean {
-		return this._disabled;
-	}
-
-	  // Host listener for click event
-	@HostListener("click", ["$event"])
-
-	/**
-   * Handles the click event of the switch.
-   * 
-   * @param e The click event object.
-   * 
-   * Usage example:
-   * ```
-   * <mefdev-switch (click)="handleSwitchClick($event)"></mefdev-switch>
-   * ```
-   */
-	onClick(e: MouseEvent): void {
-		e.preventDefault();
-		if (!this._disabled) {
-			this.updateValue(!this._checked);
-			this.onChange(this._checked);
-		}
-	}
-
-	
-	// Helper functions
-
-  /**
-   * Updates the value of the switch.
-   * 
-   * @param value The new value of the switch.
-   * 
-   * Usage example:
-   * ```
-   * this.updateValue(true);
-   * ```
-   */
-	updateValue(value: boolean): void {
-		if (this._checked === value) {
-			return;
-		}
-		this._checked = value;
-		this.setClassMap();
-	}
-
-	/**
-   * Sets the class map for the switch.
-   * 
-   * Usage example:
-   * ```
-   * 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
-		};
-	}
-
-	
-	// ControlValueAccessor interface implementation
-
-  /**
-   * Writes a new value to the switch.
-   * 
-   * @param value The new value of the switch.
-   * 
-   * Usage example:
-   * ```
-   * this.writeValue(true);
-   * ```
-   */
-	public writeValue(value: boolean): void {
-		this.updateValue(value);
-	}
-
-	/**
-   * Registers a callback function to be executed when the switch value changes.
-   * 
-   * @param fn The callback function.
-   * 
-   * Usage example:
-   * ```
-   * this.registerOnChange(value => {
-   *   // Do something with the new value
-   * });
-   * ```
-   */
-	registerOnChange(fn: (_: boolean) => void): void {
-		this.onChange = fn;
-	}
-
-	/**
-   * Registers a callback function to be executed when the switch is touched.
-   * 
-   * @param fn The callback function.
-   * 
-   * Usage example:
-   * ```
-   * this.registerOnTouched(() => {
-   *   // Do something when the switch is touched
-   * });
-   * ```
-   */
-	registerOnTouched(fn: () => void): void {
-		this.onTouched = fn;
-	}
-
-	/**
-   * Sets the disabled state of the switch.
-   * 
-   * @param isDisabled The disabled state of the switch.
-   * 
-   * Usage example:
-   * ```
-   * this.setDisabledState(true);
-   * ```
-   */
-	setDisabledState(isDisabled: boolean): void {
-		this.Disabled = isDisabled;
-	}
-
-	  // OnInit lifecycle hook
-	ngOnInit(): void {
-		this.setClassMap();
-	}
-}

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

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

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

@@ -1,7 +0,0 @@
-export { MefDevTabBodyComponent } from './tab-body.component';
-export { MefDevTabLabelDirective } from './tab-label.directive';
-export { MefDevTabComponent } from './tab.component';
-export { MefDevTabsInkBarDirective } from './tabs-ink-bar.directive';
-export { MefDevTabsNavComponent } from './tabs-nav.component';
-export { MefDevTabSetComponent, AnimatedInterface, TabChangeEvent, TabPosition, TabPositionMode, TabType, } from './tabset.component';
-export { MefDevTabsModule } from './tabs.module';

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

@@ -1 +0,0 @@
-<ng-template [ngTemplateOutlet]="content"></ng-template>

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

@@ -1,17 +0,0 @@
-import { Component, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
-
-/**
- * Component representing the body of a tab, which displays the tab's content.
- */
-@Component({
-    selector: 'mefdev-tab-body',
-    encapsulation: ViewEncapsulation.None,
-    templateUrl: "./tab-body.component.html",
-    standalone: false
-})
-export class MefDevTabBodyComponent {
-    /**
-   * The content of the tab, which can be passed as a template.
-   */
-  @Input() content: TemplateRef<void>;
-}

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

@@ -1,41 +0,0 @@
-import { Directive, ElementRef, HostBinding, Input } from '@angular/core';
-import { toBoolean } from '../util/convert';
-
-@Directive({
-    selector: '[mefdev-tab-label]',
-    host: {
-        '[class.nav-item]': 'true'
-    },
-    standalone: false
-})
-export class MefDevTabLabelDirective {
-  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.html

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

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

@@ -1,109 +0,0 @@
-import {
-  Component,
-  ContentChild,
-  EventEmitter,
-  HostBinding,
-  Input,
-  OnDestroy,
-  OnInit,
-  Output,
-  TemplateRef,
-  ViewChild
-} from '@angular/core';
-import { toBoolean } from '../util/convert';
-import { MefDevTabSetComponent } from './tabset.component';
-
-@Component({
-    selector: 'mefdev-tab',
-    templateUrl: "./tab.component.html",
-    styles: [],
-    host: {
-        '[class.ant-tabs-tabpane]': 'true'
-    },
-    standalone: false
-})
-export class MefDevTabComponent implements OnDestroy, OnInit {
-  private disabled = false;
-
-  position: number | null = null;
-  origin: number | null = null;
-
-  /**
-   * Sets the disabled state of the tab.
-   *```html
-   * <mefdev-tab [Disabled]="true"></mefdev-tab>
-   * ```
-   */
-  @Input()
-  set Disabled(value: boolean) {
-    this.disabled = toBoolean(value);
-  }
-
-   /**
-   * Gets the disabled state of the tab.
-   */
-  get Disabled(): boolean {
-    return this.disabled;
-  }
-
-  /**
-   * Event emitted when the tab is selected.
-   *```html
-   * <mefdev-tab (pgSelect)="onTabSelect()"></mefdev-tab>
-   * ```
-   */
-  @Output() pgSelect = new EventEmitter();
-
-  /**
-   * Event emitted when the tab is clicked.
-   *```html
-   * <mefdev-tab (pgClick)="onTabClick()"></mefdev-tab>
-   * ```
-   */
-  @Output() pgClick = new EventEmitter();
-
-  /**
-   * Event emitted when the tab is deselected.
-   *```html
-   * <mefdev-tab (pgDeselect)="onTabDeselect()"></mefdev-tab>
-   *```
-   */
-  @Output() pgDeselect = new EventEmitter();
-
-  /**
-   * Reference to the template for the tab heading.
-   */
-  @ContentChild('TabHeading', { static: true }) _tabHeading: TemplateRef<void>;
-
-  /**
-   * Reference to the template for the tab content.
-   */
-  @ViewChild(TemplateRef, { static: true }) _content: TemplateRef<void>;
-
-  /**
-   * Gets the template for the tab content.
-   *```html
-   * <ng-container *ngTemplateOutlet="content"></ng-container>
-   *```
-   */
-  get content(): TemplateRef<void> | null {
-    return this._content;
-  }
-
-  constructor(private MefDevTabSetComponent: MefDevTabSetComponent) {}
-
-  /**
-   * Initializes the tab component.
-   */
-  ngOnInit(): void {
-    this.MefDevTabSetComponent._tabs.push(this);
-  }
-
-  /**
-   * Cleans up resources when the tab component is destroyed.
-   */
-  ngOnDestroy(): void {
-    // Remove the tab from the parent tabset component when destroyed
-    this.MefDevTabSetComponent._tabs.splice(this.MefDevTabSetComponent._tabs.indexOf(this), 1);
-  }
-}

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

@@ -1,78 +0,0 @@
-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: '[mefdev-tabs-ink-bar]',
-    host: {
-        '[class.nav-item]': 'true'
-    },
-    standalone: false
-})
-export class MefDevTabsInkBarDirective {
-  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';
-  }
-}

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

@@ -1,20 +0,0 @@
-<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"
-          mefdev-tabs-ink-bar
-          [hidden]="HideBar"
-          [Animated]="Animated"
-          [PositionMode]="PositionMode"
-          style="display: block;"
-        ></div>
-        <ng-content></ng-content>
-      </ul>
-    </div>
-  </div>