@indice/ng-components 0.2.138-beta → 0.2.139

package/src/lib/layouts/views/view-layout/view-layout.component.ts

@@ -0,0 +1,82 @@
+import { SwitchViewAction } from '../../../types';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Component, Input, OnInit, Output, EventEmitter, ViewChild, ElementRef } from '@angular/core';
+import { fromEvent } from 'rxjs';
+import { debounceTime, distinctUntilChanged, filter, map } from 'rxjs/operators';
+import { HeaderMetaItem, RouterViewAction, ViewAction } from '../../../types';
+
+@Component({
+  selector: 'lib-view-layout',
+  templateUrl: './view-layout.component.html'
+})
+export class ViewLayoutComponent implements OnInit {
+  // tslint:disable-next-line:no-input-rename
+  @ViewChild('search') private searchInput$?: ElementRef;
+  // tslint:disable-next-line:no-input-rename
+  @Input('show-header') header = true;
+  @Input() fluid = false;
+  @Input() title = 'no title';
+  @Input() icon: string | null = null;
+  @Input() actions: ViewAction[] | null = null;
+  @Input() busy = false;
+  // tslint:disable-next-line:no-input-rename
+  @Input('search-placeholder') searchPlaceholder: string | null = 'αναζήτηση';
+  @Input() view: string | null = null;
+  // tslint:disable-next-line:no-input-rename
+  @Input('meta-items') metaItems: HeaderMetaItem[] | null = [];
+  // tslint:disable-next-line:no-output-on-prefix
+  @Output() onAction: EventEmitter<ViewAction> = new EventEmitter<ViewAction>();
+  // tslint:disable-next-line:no-output-on-prefix
+  @Output() onSearch: EventEmitter<string> = new EventEmitter<string>();
+
+  constructor(private route$: ActivatedRoute, private router$: Router) { }
+
+  ngOnInit(): void {
+    if (this.searchInput$?.nativeElement){
+      fromEvent(this.searchInput$.nativeElement, 'keyup').pipe(
+        map((event: any) => {
+          return event.target.value; // Get input value.
+        }),
+        filter(inputValue => inputValue.length >= 3 || inputValue.length === 0),
+        // If character length greater than minimumSearchCharacters setting.
+        debounceTime(1000), // Time in milliseconds between key events.
+        distinctUntilChanged() // If previous query is different from current.
+      ).subscribe();
+    }
+  }
+
+  public emitActionClick(action: ViewAction): void {
+    this.onAction.emit(action);
+  }
+
+  public routerLinkActionClick(action: RouterViewAction | any): void {
+    // console.log('routerLinkActionClick', action);
+    if (action.outlet) {
+      this.router$.navigate(['', { outlets: { rightpane: action.link } }]);
+    } else {
+      this.router$.navigate([action.link]);
+    }
+  }
+
+  searchActionClick(action: ViewAction, text: string): void {
+    this.onSearch.emit(text);
+  }
+
+  searchActionType(text: string): void {
+    this.onSearch.emit(this.searchInput$?.nativeElement.value);
+  }
+
+  public handleClear(event: any): void {
+    console.log('handle clear!!!');
+    event.stopPropagation();
+    this.onSearch.emit(event.target?.value);
+  }
+
+  public switchViewActionClick(action: SwitchViewAction | any): void {
+    // console.log('switchViewActionClick', action);
+    this.view = action.param;
+    if (action && action.param) {
+      this.router$.navigate([], { queryParams: { view: action.param }, queryParamsHandling: 'merge', skipLocationChange: false });
+    }
+  }
+}

package/src/lib/ng-components.module.ts

@@ -0,0 +1,135 @@
+import { AvatarInitialsComponent } from './controls/avatar-initials/avatar-initials.component';
+import { ToasterService } from './services/toaster.service';
+import { ToasterComponent } from './controls/toaster/toaster.component';
+import { ToasterContainerComponent } from './controls/toaster/toaster-container.component';
+import { DatepickerComponent } from './controls/date-picker/date-picker.component';
+import { SidePaneComponent } from './controls/side-pane/side-pane.component';
+import { ListDetailsSectionComponent } from './controls/list-view/list-details-section.component';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { UnauthorizedComponent } from './pages/http-status/unauthorized/unauthorized.component';
+import { PageNotFoundComponent } from './pages/http-status/page-not-found/page-not-found.component';
+import { ErrorComponent } from './pages/http-status/error/error.component';
+import { LoggedOutComponent } from './pages/auth/logged-out/logged-out.component';
+import { AuthCallbackComponent } from './pages/auth/auth-callback/auth-callback.component';
+import { IndiceAuthModule } from '@indice/ng-auth';
+import { SkeletonLoaderComponent } from './controls/skeleton-loader/skeleton-loader.component';
+import { ListTileComponent } from './controls/list-view/list-tile.component';
+import { ListColumnComponent } from './controls/list-view/list-column.component';
+import { NgModule } from '@angular/core';
+import { DropDownMenuComponent } from './controls/drop-down-menu/drop-down-menu.component';
+import { ListViewComponent } from './controls/list-view/list-view.component';
+import { PagerComponent } from './controls/pager/pager.component';
+import { ClickOutsideDirective } from './directives/click-outside.directive';
+import { ShellFooterComponent } from './layouts/shell/shell-footer/shell-footer.component';
+import { ShellHeaderComponent } from './layouts/shell/shell-header/shell-header.component';
+import { ShellLayoutComponent } from './layouts/shell/shell-layout/shell-layout.component';
+import { FormLayoutComponent } from './layouts/views/form-layout/form-layout.component';
+import { ModelViewLayoutComponent } from './layouts/views/model-view-layout/model-view-layout.component';
+import { SideViewLayoutComponent } from './layouts/views/side-view-layout/side-view-layout.component';
+import { ViewLayoutComponent } from './layouts/views/view-layout/view-layout.component';
+import { AuthRenewComponent } from './pages/auth/auth-renew/auth-renew.component';
+import { AddressPipe } from './pipes/address.pipe';
+import { DurationFormatPipe } from './pipes/duration-format.pipe';
+import { CollapsiblePanelComponent } from './controls/collapsible-panel/collapsible-panel.component';
+import { KpiTileComponent } from './controls/kpi-tile/kpi-tile.component';
+import { DynamicComponentHostDirective } from './directives/dynamic-component-host.directive';
+import { ListViewEmptyStateComponent } from './controls/list-view/list-view-empty-state.component';
+import { ToggleComponent } from './controls/toggle/toggle.component';
+import { NavLinksListComponent } from './controls/nav-links-list/nav-links-list.component';
+import { NotificationsIndicatorComponent } from './controls/notifications-indicator/notifications-indicator.component';
+
+@NgModule({
+  declarations: [
+    // diectives
+    ClickOutsideDirective,
+    DynamicComponentHostDirective,
+    // controls
+    DropDownMenuComponent,
+    PagerComponent,
+    ListViewComponent,
+    ListColumnComponent,
+    ListTileComponent,
+    ListDetailsSectionComponent,
+    ListViewEmptyStateComponent,
+    SkeletonLoaderComponent,
+    CollapsiblePanelComponent,
+    KpiTileComponent,
+    SidePaneComponent,
+    DatepickerComponent,
+    AvatarInitialsComponent,
+    ToggleComponent,
+    // Toaster
+    ToasterContainerComponent,
+    ToasterComponent,
+    // shell layout
+    ShellLayoutComponent,
+    ShellHeaderComponent,
+    ShellFooterComponent,
+    // view layouts
+    ViewLayoutComponent,
+    SideViewLayoutComponent,
+    ModelViewLayoutComponent,
+    FormLayoutComponent,
+    // pages (common)
+    AuthCallbackComponent,
+    AuthRenewComponent,
+    LoggedOutComponent,
+    ErrorComponent,
+    PageNotFoundComponent,
+    UnauthorizedComponent,
+    // pipes
+    AddressPipe,
+    DurationFormatPipe,
+    NavLinksListComponent,
+    NotificationsIndicatorComponent
+  ],
+  imports: [
+    CommonModule,
+    RouterModule,
+    IndiceAuthModule
+  ],
+  exports: [
+    ClickOutsideDirective,
+    DropDownMenuComponent,
+    PagerComponent,
+    ListViewComponent,
+    ListColumnComponent,
+    ListTileComponent,
+    ListDetailsSectionComponent,
+    ListViewEmptyStateComponent,
+    KpiTileComponent,
+    SkeletonLoaderComponent,
+    ShellLayoutComponent,
+    ShellHeaderComponent,
+    ShellFooterComponent,
+    ViewLayoutComponent,
+    SideViewLayoutComponent,
+    ModelViewLayoutComponent,
+    FormLayoutComponent,
+    AuthCallbackComponent,
+    AuthRenewComponent,
+    LoggedOutComponent,
+    ErrorComponent,
+    PageNotFoundComponent,
+    UnauthorizedComponent,
+    AddressPipe,
+    DurationFormatPipe,
+    CollapsiblePanelComponent,
+    SidePaneComponent,
+    DatepickerComponent,
+    ToasterContainerComponent,
+    ToasterComponent,
+    AvatarInitialsComponent,
+    ToggleComponent
+  ]
+})
+export class IndiceComponentsModule {
+  // tslint:disable-next-line:typedef
+  static forRoot() {
+    return {
+      ngModule: IndiceComponentsModule,
+      providers: [ToasterService]
+    };
+ }
+}

package/src/lib/pages/auth/auth-callback/auth-callback.component.html

@@ -0,0 +1 @@
+<lib-view-layout [title]="status" [busy]="true"></lib-view-layout>

package/src/lib/pages/auth/auth-callback/auth-callback.component.ts

@@ -0,0 +1,22 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { AuthService } from '@indice/ng-auth';
+
+@Component({
+  selector: 'lib-auth-callback',
+  templateUrl: './auth-callback.component.html'
+})
+export class AuthCallbackComponent implements OnInit {
+  constructor(@Inject(AuthService) private authService: AuthService, private router: Router) { }
+
+  public status = 'παρακαλώ περιμένετε...';
+
+  public ngOnInit(): void {
+    this.authService.signinRedirectCallback().subscribe((user) => {
+      if (user) {
+        this.router.navigateByUrl(user.state?.url || '/');
+      }
+    });
+  }
+}

package/src/lib/pages/auth/auth-renew/auth-renew.component.ts

@@ -0,0 +1,20 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { AuthService } from '@indice/ng-auth';
+
+@Component({
+  selector: 'lib-auth-renew',
+  template: ''
+})
+export class AuthRenewComponent implements OnInit {
+  constructor(@Inject(AuthService) private authService: AuthService, private router: Router) { }
+
+  public ngOnInit(): void {
+    this.authService.signinSilentCallback().subscribe(user => {
+      if (!user) {
+        this.router.navigate(['/unauthorized']);
+      }
+    });
+  }
+}

package/src/lib/pages/auth/logged-out/logged-out.component.html

@@ -0,0 +1 @@
+<lib-view-layout title="Έχετε αποσυνδεθεί με επιτυχία!"></lib-view-layout>

package/src/lib/pages/auth/logged-out/logged-out.component.ts

@@ -0,0 +1,22 @@
+import { AuthService } from '@indice/ng-auth';
+import { Component, Inject, OnInit } from '@angular/core';
+
+
+@Component({
+  // tslint:disable-next-line:component-selector
+  selector: 'lib-logged-out',
+  templateUrl: './logged-out.component.html'
+})
+export class LoggedOutComponent implements OnInit {
+  constructor(@Inject(AuthService) private authService: AuthService) { }
+
+  public status = 'working on it, please give me a sec...';
+  public finished = false;
+
+  public ngOnInit(): void {
+    this.authService.removeUser().subscribe(() => {
+      this.status = 'Thank you!';
+      this.finished = true;
+    });
+  }
+}

package/src/lib/pages/http-status/error/error.component.html

@@ -0,0 +1,13 @@
+<lib-view-layout [show-header]="false" title="500 - παρουσιάστηκε σφάλμα!">
+  <div class="bg-gray-600 view-container">
+    <div class="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
+      <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
+        <span class="block">500</span>
+      </h2>
+      <p class="mt-4 text-lg leading-6 text-gray-200">σφάλμα, κατι δεν πήγε καλά...!</p>
+      <a href="/" class="mt-8 inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-sm rounded-sm text-gray-600 bg-white hover:bg-gray-50 sm:w-auto">
+        πατήστε εδώ για να επιστρέψετε
+      </a>
+    </div>
+  </div>
+</lib-view-layout>

package/src/lib/pages/http-status/error/error.component.ts

@@ -0,0 +1,13 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'lib-error',
+  templateUrl: './error.component.html'
+})
+export class ErrorComponent implements OnInit {
+  public error = 'Error!';
+
+  ngOnInit(): void {
+  }
+
+}

package/src/lib/pages/http-status/page-not-found/page-not-found.component.html

@@ -0,0 +1,14 @@
+<lib-view-layout [show-header]="false" title="404 - δεν βρέθηκε!">
+  <div class="text-gray-900">
+    <div class="max-w-4xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
+      <h2 class="text-3xl font-extrabold sm:text-4xl">
+        <span class="block">404</span>
+      </h2>
+      <p class="mt-4 text-lg leading-6 text-gray-800">δεν βρέθηκε η σελίδα που ζητήσατε!</p>
+      <a href="/"
+         class="mt-8 inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-sm rounded-sm text-gray-600 bg-white hover:bg-gray-50 sm:w-auto">
+        πατήστε εδώ για να επιστρέψετε
+      </a>
+    </div>
+  </div>
+</lib-view-layout>

package/src/lib/pages/http-status/page-not-found/page-not-found.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'lib-page-not-found',
+  templateUrl: './page-not-found.component.html'
+})
+export class PageNotFoundComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

package/src/lib/pages/http-status/unauthorized/unauthorized.component.html

@@ -0,0 +1,15 @@
+<lib-view-layout [show-header]="false" title="401 - δεν επιτρέπεται η πρόσβαση!">
+  <div class="bg-gray-600 view-container">
+    <div class="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
+      <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
+        <span class="block">401</span>
+      </h2>
+      <p class="mt-4 text-lg leading-6 text-gray-200">δεν έχετε τα κατάλληλα δικαιώματα πρόσβασης!</p>
+      <a href="/" class="mt-8 inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-sm rounded-sm text-gray-600 bg-white hover:bg-gray-50 sm:w-auto">
+        πατήστε εδώ για να επιστρέψετε
+      </a>
+    </div>
+  </div>
+  </lib-view-layout>
+
+

package/src/lib/pages/http-status/unauthorized/unauthorized.component.ts

@@ -0,0 +1,11 @@
+import { Component, Inject, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'lib-unauthorized',
+  templateUrl: './unauthorized.component.html'
+})
+export class UnauthorizedComponent implements OnInit {
+  constructor() { }
+
+  public ngOnInit(): void { }
+}

package/src/lib/pipes/address.pipe.ts

@@ -0,0 +1,17 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { IAddress } from '../types';
+
+@Pipe({
+    name: 'address',
+    pure: false
+})
+export class AddressPipe implements PipeTransform {
+
+    transform(value: IAddress | undefined): string {
+        if (value === undefined || null || '') {
+            return '';
+        }
+        // tslint:disable-next-line:no-non-null-assertion
+        return `${value.street || ''}${value.streetNumber ? ' ' + value.streetNumber : ''}${value.city ? ', ' + value.city : ''}${+value.postalCode! ? ', ' + +value.postalCode! : ''}`;
+    }
+}

package/src/lib/pipes/duration-format.pipe.ts

@@ -0,0 +1,67 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'durationFormat',
+  pure: false
+})
+export class DurationFormatPipe implements PipeTransform {
+
+  transform(value: any, arg1: any, arg2: any): string {
+
+    let days: any;
+    let seconds: any;
+    let minutes: any;
+    let hours: any;
+
+    if (arg1 === 'ms' && arg2 === 'hhmmss') {
+      seconds = Math.floor((value / 1000) % 60);
+      minutes = Math.floor(((value / (1000 * 60)) % 60));
+      hours = Math.floor((value / (1000 * 60 * 60)));
+      return this.format(arg2, seconds, minutes, hours, days);
+
+    } else if (arg1 === 's' && arg2 === 'hhmmss') {
+      seconds = Math.floor((value % 60));
+      minutes = Math.floor(((value / 60) % 60));
+      hours = Math.floor(((value / 60) / 60));
+      return this.format(arg2, seconds, minutes, hours, days);
+
+    } else if (arg1 === 'ms' && (arg2 === 'ddhhmmss' || arg2 === 'ddhhmmssLong')) {
+      seconds = Math.floor(((value / 1000) % 60));
+      minutes = Math.floor((value / (1000 * 60) % 60));
+      hours = Math.floor((value / (1000 * 60 * 60) % 24));
+      days = Math.floor((value / (1000 * 60 * 60 * 24)));
+      return this.format(arg2, seconds, minutes, hours, days);
+
+    } else if (arg1 === 's' && (arg2 === 'ddhhmmss' || arg2 === 'ddhhmmssLong')) {
+      seconds = Math.floor(value % 60);
+      minutes = Math.floor(((value / 60) % 60));
+      hours = Math.floor(((value / 60) / 60) % 24);
+      days = Math.floor((((value / 60) / 60) / 24));
+      return this.format(arg2, seconds, minutes, hours, days);
+
+    }
+    else {
+      return value;
+    }
+  }
+
+  private format(arg2: string, seconds: any, minutes: any, hours: any, days: any): any {
+    (days < 10) ? days = '0' + days : days;
+    (hours < 10) ? hours = '0' + hours : hours;
+    (minutes < 10) ? minutes = '0' + minutes : minutes;
+    (seconds < 10) ? seconds = '0' + seconds : seconds;
+
+    switch (arg2) {
+      case 'hhmmss':
+        return `${hours}:${minutes}:${seconds}`;
+
+      case 'ddhhmmss':
+        return `${days}d, ${hours}h, ${minutes}m, ${seconds}s`;
+
+      case 'ddhhmmssLong':
+        return `${days} days, ${hours} hours, ${minutes} minutes, ${seconds} seconds`;
+    }
+    return undefined;
+  }
+
+}

package/src/lib/services/component-loader/component-loader-options.class.ts

@@ -0,0 +1,31 @@
+import { TemplateRef } from '@angular/core';
+
+/**
+ * Options passed to {@link ComponentLoader.show}.
+ * 
+ * @internal
+ */
+export class ComponentLoaderOptions {
+  /**
+   * The content to be drawn inside `<ng-content>` of `ComponentLoader` attached component.
+	 * @remarks
+	 * `content` can be `Component` , `TemplateRef` or `String`.
+   */
+  content?: string | TemplateRef<unknown>;
+  /**
+   * The data to be passed to view for `TemplateRef` case.
+   */
+  context?: unknown;
+  /**
+   * Initial data to be passed to `content` for `Component` case.
+   */
+  initialState?: unknown;
+  /**
+   * Other properties passed to attached component.
+   */
+  [key: string]: unknown;
+  /**
+   * id` - The id of the attached component ref.
+   */
+  id?: number | string;
+}