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

package/src/lib/pg-components/card/card.components.ts

@@ -1,451 +0,0 @@
-import {
-  Component,
-  Input,
-  ViewEncapsulation,
-  ElementRef,
-  ViewChild,
-  TemplateRef,
-  ContentChild,
-  EventEmitter,
-  Output
-} from "@angular/core";
-
-import {
-  animate,
-  state,
-  style,
-  transition,
-  trigger
-} from "@angular/animations";
-
-/**
- * Component representing a custom card.
- * It provides various styling and animation options for the card layout.
- *
- * Example usage:
- * ```
- * <mefdev-inner-card [Title]="'Card Title'" [Type]="'default'" [MinimalHeader]="false" [ProgressType]="'circle'">
- *   Card content goes here...
- * </mefdev-inner-card>
- * ```
- */
-@Component({
-    selector: "mefdev-inner-card",
-    encapsulation: ViewEncapsulation.None,
-    templateUrl: "./card.components.html",
-    animations: [
-        trigger("collapseState", [
-            state("inactive", style({
-                opacity: "0",
-                height: 0,
-                paddingBottom: "0"
-            })),
-            state("active", style({
-                opacity: "1",
-                height: "*",
-                paddingBottom: "*"
-            })),
-            transition("inactive => active", animate("125ms ease-in")),
-            transition("active => inactive", animate("125ms ease-out"))
-        ]),
-        trigger("fadeAnimation", [
-            state("false", style({
-                opacity: "0",
-                visibility: "hidden"
-            })),
-            state("true", style({
-                opacity: "1",
-                visibility: "visible"
-            })),
-            transition("false => true", animate("500ms ease-in")),
-            transition("true => false", animate("500ms ease-out"))
-        ])
-    ],
-    standalone: false
-})
-export class MefdevInnerCard {
-
-  // constructor() {
-  //   console.log('1')
-  // }
-
-  /**
-   * Indicates whether the card is collapsed or not.
-   * Default: false
-  */
-  _isCollapsed: boolean = false;
-
-  /**
-   * Indicates whether the card is maximized or not.
-   * Default: false
-  */
-  _isMaximixed: boolean = false;
-
-  /**
-   * Indicates whether the card is in loading state or not.
-   * Default: false
-  */
-  _isLoading: boolean = false;
-
-  /**
-   * Indicates whether the card has a minimal header or not.
-   * Default: false
-  */
-  _minimalHeader: boolean = false;
-
-  /**
-   * The message to be displayed in the card.
-  */
-  _message: string = "";
-
-  /**
-   * The type of message to be displayed in the card (e.g., success, danger, warning).
-   * Default: "danger"
-  */
-  _messageType: string = "danger";
-
-  /**
-   * Indicates whether the message in the card is visible or not.
-   * Default: false
-  */
-  _messageVisible: boolean = false;
-
-  /**
-   * The type of progress indicator to be displayed in the card (e.g., circle, bar, none).
-   * Default: "circle"
-  */
-  _progressType: string = "circle";
-
-  /**
-   * The color of the progress indicator in the card.
-  */
-  _progressColor: string = "";
-
-  /**
-   * Indicates whether the tools (e.g., refresh, close, maximize) are shown in the card header or not.
-   * Default: true
-  */
-  _showTools: boolean = true;
-
-
-  _close_card: boolean = false;
-  _refresh: boolean = false;
-  _refreshColor: string = "light";
-
-  /**
-   * Indicates whether the close button in the card is visible or not.
-   * Default: true
-  */
-  _close: boolean = true;
-
-  /**
-   * Indicates whether the toggle button in the card is visible or not.
-   * Default: true
-  */
-  _toggle: boolean = true;
-
-  /**
-   * Indicates whether the maximize button in the card is visible or not.
-   * Default: true
-  */
-  _maximize: boolean = true;
-
-  /**
-   * The timeout value in milliseconds for the loading state of the card.
-   * If set to 0, the loading state will not automatically turn off.
-   * Default: 0
-  */
-  _timeout: number = 0;
-
-  /**
-   * The title text to be displayed in the card header.
-  */
-  _titleText: string = "";
-
-  /**
-   * The border style of the card.
-  */
-  _card_border_style: string = "";
-
-  /**
-   * The type of the card (e.g., default, bordered, minimal).
-   * Default: "default"
-  */
-  _type: string = "default";
-
-
-
-  /**
-   * Additional CSS class(es) to be added to the card header.
-  */
-  _extraHeaderClass = "";
-
-  /**
-   * Additional CSS class(es) to be added to the card body.
-  */
-  _extraBodyClass = "";
-
-  /**
-   * Additional CSS class(es) to be added to the card.
-  */
-  _additionalClasses = "";
-
-  /**
-   * ViewChild reference to the host content element.
-  */
-  @ViewChild("hostContent") _hostContent: ElementRef;
-  /**
-   * ViewChild reference to the minimal circle loading element.
-  */
-  @ViewChild("minimalCircleLoading") minimalCircleLoading: ElementRef;
-  /**
-   * ViewChild reference to the minimal circle loading trigger element.
-  */
-  @ViewChild("minimalCircleLoadingTrigger")
-  minimalCircleLoadingTrigger: ElementRef;
-  /**
-   * ContentChild reference to the CardTitle template.
-  */
-  @ContentChild("CardTitle") CardTitle: TemplateRef<void>;
-  /**
-   * ContentChild reference to the CardExtraControls template.
-  */
-  @ContentChild("CardExtraControls") CardExtraControls: TemplateRef<void>;
-
-
-    // Input properties
-
-  /**
-   * The title text to be displayed in the card header.
-  */
-  @Input()
-  set Title(value: string) {
-    this._titleText = value;
-  }
-  get Title() {
-    return this._titleText;
-  }
-
-  /**
-   * The type of the card (e.g., default, bordered, minimal).
-   * Default: "default"
-  */
-  @Input()
-  set Type(value: string) {
-    this._type = value;
-  }
-
-  /**
-   * Indicates whether the card has a minimal header or not.
-   * Default: false
-  */
-  @Input()
-  set MinimalHeader(value: boolean) {
-    this._minimalHeader = value;
-  }
-
-  /**
-   * The type of progress indicator to be displayed in the card (e.g., circle, bar, none).
-   * Default: "circle"
-  */
-  @Input()
-  set ProgressType(value: string) {
-    this._progressType = value;
-  }
-
-  /**
-   * The color of the progress indicator in the card.
-  */
-  @Input()
-  set ProgressColor(value: string) {
-    this._progressColor = value;
-  }
-
-  /**
-   * Indicates whether the card should have a refresh button or not.
-  */
-  @Input()
-  set Refresh(value: boolean) {
-    this._refresh = value;
-  }
-
-  /**
-   * The color of the refresh button in the card (e.g., light, dark).
-   * Default: "light"
-  */
-  @Input()
-  set RefreshColor(value: string) {
-    this._refreshColor = value;
-  }
-
-  /**
-   * Indicates whether the card should have a maximize button or not.
-  */
-  @Input()
-  set Maximize(value: boolean) {
-    this._maximize = value;
-  }
-
-  /**
-   * Indicates whether the card should have a close button or not.
-  */
-  @Input()
-  set Close(value: boolean) {
-    this._close = value;
-  }
-
-  /**
-   * Indicates whether the card should have a toggle button or not.
-  */
-  @Input()
-  set Toggle(value: boolean) {
-    this._toggle = value;
-  }
-
-  /**
-   * Additional CSS class(es) to be added to the card header.
-  */
-  @Input()
-  set HeaderClass(value: string) {
-    this._extraHeaderClass = value;
-  }
-
-  /**
-   * Additional CSS class(es) to be added to the card body.
-  */
-  @Input()
-  set BodyClass(value: string) {
-    this._extraBodyClass = value;
-  }
-
-  /**
-   * Additional CSS class(es) to be added to the card.
-  */
-  @Input()
-  set AdditionalClasses(value: string) {
-    this._additionalClasses = value;
-  }
-
-  /**
-   * Indicates whether the tools (e.g., refresh, close, maximize) are shown in the card header or not.
-  */
-  @Input()
-  set Controls(value: boolean) {
-    this._showTools = value;
-  }
-
-  /**
-   * Indicates whether the message in the card is visible or not.
-  */
-  @Input()
-  set ShowMessage(value: boolean) {
-    this._messageVisible = value;
-  }
-
-  /**
-   * The message text to be displayed in the card.
-  */
-  @Input()
-  set Message(value: string) {
-    this._message = value;
-  }
-
-  /**
-   * Indicates whether the loading indicator is shown in the card or not.
-  */
-  @Input()
-  set Loading(value: boolean) {
-    this._isLoading = value;
-  }
-
-  /**
-   * The timeout duration for the loading indicator (in milliseconds).
-   * If set to 0, the loading indicator will be displayed indefinitely until manually dismissed.
-   * Default: 0
-  */
-  @Input()
-  set TimeOut(value: number) {
-    this._timeout = value;
-  }
-
-  /**
-   * The border style of the card.
-  */
-  @Input()
-  set CardBorderStyle(value: string) {
-    this._card_border_style = value;
-  }
-
-
-  // Output properties
-
-  /**
-   * Event emitted when the refresh button is clicked.
-  */
-  @Output() onRefresh: EventEmitter<void> = new EventEmitter();
-
-  // Other methods and lifecycle hooks
-
-  /**
-   * Toggles the collapsed state of the card.
-  */
-  toggle(): void {
-    this._isCollapsed = this._isCollapsed === true ? false : true;
-  }
-
-  /**
-   * Maximizes or restores the card to its original position.
-  */
-  maximize(): void {
-    let nativeElement = this._hostContent.nativeElement;
-    if (this._isMaximixed) {
-      this._isMaximixed = false;
-      nativeElement.style.left = null;
-      nativeElement.style.top = null;
-    } else {
-      this._isMaximixed = true;
-      let pagecontainer: Element  = document.querySelector(".content") ?? new Element();
-      console.log(pagecontainer);
-      let rect = pagecontainer.getBoundingClientRect();
-      let elementRect = nativeElement.getBoundingClientRect();
-      let style = window.getComputedStyle(pagecontainer);
-
-      nativeElement.style.left =
-        parseFloat(style["marginLeft"]) +
-        parseFloat(style["paddingLeft"]) +
-        rect.left +
-        "px";
-      nativeElement.style.top =
-        parseFloat(style.paddingTop) + rect.top + "px";
-    }
-  }
-
-  /**
-   * Dismisses the message in the card.
-  */
-  alertDismiss(): void {
-    this._messageVisible = false;
-  }
-
-  /**
-   * Triggers the refresh action of the card.
-  */
-  refresh(): void {
-    if (!this._isLoading) {
-      this._isLoading = true;
-      this.onRefresh.emit();
-    }
-    if (this._timeout > 0) {
-      setTimeout(() => {
-        this._isLoading = false;
-      }, this._timeout);
-    }
-  }
-
-  /**
-   * Closes the card.
-  */
-  close(): void {
-    this._close_card = true;
-  }
-}

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

@@ -1,17 +0,0 @@
-import { CommonModule } from "@angular/common";
-import { NgModule, ModuleWithProviders } from "@angular/core";
-import { MefdevInnerCard } from "./card.components";
-import { MefDevProgressModule } from "../progress/progress.module";
-
-@NgModule({
-  declarations: [MefdevInnerCard],
-  exports: [MefdevInnerCard],
-  imports: [CommonModule, MefDevProgressModule]
-})
-export class MefdevInnerCardModule {
-  static forRoot(): ModuleWithProviders<MefdevInnerCardModule> {
-    return {
-      ngModule: MefdevInnerCardModule
-    };
-  }
-}

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

@@ -1,2 +0,0 @@
-export * from "./card.components";
-export * from "./card.module";

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

@@ -1,3 +0,0 @@
-export * from "./progress.component";
-export * from "./progress.config";
-export * from "./progress.module";

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

@@ -1,28 +0,0 @@
-<div *ngIf="type === 'bar'; else circleBlock">
-  <div *ngIf="indeterminate; else determineBarBlock">
-    <div class="progress" [class.progress-small]="!thick">
-      <div class="progress-bar-{{ color }}" [class.progress-bar-indeterminate]="indeterminate"></div>
-    </div>
-  </div>
-  <ng-template #determineBarBlock>
-    <div class="progress" [class.progress-small]="!thick">
-      <div class="progress-bar progress-bar-{{ color }}" [ngStyle]="{ width: value + '%' }"></div>
-    </div>
-  </ng-template>
-</div>
-<ng-template #circleBlock>
-  <div class="progress-circle-{{ color }}" [class.progress-circle-indeterminate]="indeterminate"
-    [class.progress-circle]="!indeterminate" [class.progress-circle-thick]="thick">
-    <div *ngIf="indeterminate; else determineBlock"></div>
-    <ng-template #determineBlock>
-      <div class="pie" [ngStyle]="_value2 && { clip: 'rect(auto, auto, auto, auto)' }">
-        <div class="left-side half-circle" [ngStyle]="_value2 && { transform: 'rotate(' + value + 'deg)' }"></div>
-        <div class="right-side half-circle" [ngStyle]="{
-            transform:
-              _value2 === true ? 'rotate(180deg)' : 'rotate(' + value + 'deg)'
-          }"></div>
-      </div>
-      <div class="shadow"></div>
-    </ng-template>
-  </div>
-</ng-template>

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

@@ -1,73 +0,0 @@
-import { Component, Input } from "@angular/core";
-
-/**
- * Component representing a progress bar.
- * 
- * Example of usage:
- * 
- * ```
- * <mefdev-progress type="linear" color="blue" [thick]="true"></mefdev-progress>
- * <mefdev-progress type="circle" color="red" [indeterminate]="true"></mefdev-progress>
- * ```
- */
-@Component({
-    selector: "mefdev-progress",
-    templateUrl: "./progress.component.html",
-    standalone: false
-})
-export class MefDevProgressComponent {
-  _value: number;
-  _value2: any;
-
-  /**
-   * The type of progress bar.
-   * Possible values: "linear" | "circle".
-   * Default value: "linear".
-   */
-  @Input() type: string;
-
-  /**
-   * The color of the progress bar.
-   * Possible values: any valid CSS color value.
-   * Default value: none.
-   */
-
-  @Input() color: string;
-
-  /**
-   * Determines whether the progress bar is thick.
-   * Default value: false.
-   */
-  @Input() thick: boolean;
-
-  /**
-   * Determines whether the progress bar is indeterminate.
-   * Default value: false.
-   */
-  @Input() indeterminate: boolean;
-
-
-  /**
-   * The value of the progress bar.
-   * For the "circle" type, it should be a number between 0 and 100.
-   */
-  @Input() set value(value: number) {
-    if (this.type == "circle") {
-      this._value = (value / 100) * 360;
-      if (this.value >= 50) {
-        this._value2 = true;
-      }
-    } else this._value = value;
-  }
-  get value() {
-    return this._value;
-  }
-
-  /**
-   * Additional value property.
-   */
-  get value2() {
-    return this._value2;
-  }
-  constructor() {}
-}

package/src/lib/pg-components/progress/progress.config.ts

@@ -1,7 +0,0 @@
-import { Injectable } from "@angular/core";
-
-@Injectable()
-export class ProgressConfig {
-  color = "primary";
-  thickness = 1;
-}

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

@@ -1,16 +0,0 @@
-import { CommonModule } from "@angular/common";
-import { NgModule, ModuleWithProviders } from "@angular/core";
-
-import { MefDevProgressComponent } from "./progress.component";
-import { ProgressConfig } from "./progress.config";
-
-@NgModule({
-  imports: [CommonModule],
-  declarations: [MefDevProgressComponent],
-  exports: [MefDevProgressComponent]
-})
-export class MefDevProgressModule {
-  static forRoot(): ModuleWithProviders<MefDevProgressModule> {
-    return { ngModule: MefDevProgressModule, providers: [ProgressConfig] };
-  }
-}

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

@@ -1,4 +0,0 @@
-export * from "./option.component";
-export * from "./option.pipe";
-export * from "./select.component";
-export * from "./select.module";

package/src/lib/pg-components/select/option.component.html

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