@indice/ng-components 0.2.138-beta → 0.2.139

package/src/lib/layouts/shell/shell-header/shell-header.component.ts

@@ -0,0 +1,111 @@
+import { AuthService } from '@indice/ng-auth';
+import { Component, OnInit, OnDestroy, Inject, Input } from '@angular/core';
+import { User } from 'oidc-client';
+import { ActivatedRoute, Event, NavigationStart, Router } from '@angular/router';
+import { filter, share } from 'rxjs/operators';
+import { NavLink } from '../../../types';
+import { APP_LINKS, SHELL_CONFIG } from '../../../tokens';
+import { BehaviorSubject, isObservable, observable, Observable, of } from 'rxjs';
+import { Subscription } from 'rxjs';
+
+@Component({
+  // tslint:disable-next-line:component-selector
+  selector: 'lib-shell-header',
+  templateUrl: './shell-header.component.html',
+})
+export class ShellHeaderComponent implements OnInit, OnDestroy {
+  // tslint:disable-next-line:no-input-rename
+  @Input('section-links') sectionLinksPath = 'main';
+  // tslint:disable-next-line:no-input-rename
+  @Input('profile-menu') profileMenuVisible = true;
+  // tslint:disable-next-line:no-input-rename
+  @Input('show-userName') showUserNameOnHeader: boolean | undefined = false;
+  // tslint:disable-next-line:no-input-rename
+  @Input('show-alerts') showAlerts: boolean | undefined = false;
+  @Input() langs: string[] | undefined;
+  // tslint:disable-next-line:no-input-rename
+  @Input('current-lang') currentLang: string | undefined;
+  @Input() border = true;
+  public sectionLinks: Observable<NavLink[]> = of([]);
+  public mobileMenuExpanded = false;
+  public userMenuExpanded = false;
+  protected routeSubject: Observable<Event>;
+  protected routerSub$: Subscription | null = null;
+  protected userSub$: Subscription | null = null;
+  protected statusSub$: Subscription | null = null;
+  public user: User | null = null;
+  public avatarName: string | null = null;
+  public activeFragment: any | null = null;
+
+  constructor(
+    @Inject(AuthService) protected authService: AuthService,
+    @Inject(Router) protected router: Router,
+    @Inject(ActivatedRoute) protected route: ActivatedRoute,
+    @Inject(SHELL_CONFIG) public config: any,
+    @Inject(APP_LINKS) public links: any) {
+    this.routeSubject = this.router.events.pipe(filter((event) => event instanceof NavigationStart));
+  }
+
+  ngOnInit(): void {
+    this.activeFragment = this.route.fragment.pipe(share());
+    this.sectionLinks = this.links[this.sectionLinksPath] as Observable<NavLink[]>;
+    this.routerSub$ = this.routeSubject.subscribe((event) => {
+      this.mobileMenuExpanded = false;
+      this.userMenuExpanded = false;
+    });
+    this.authService.loadUser().subscribe((user) => {
+      this.setCurrentUser(user);
+    }, error => {
+      console.error(error);
+    });
+    // Detect user changes and display / or not user info accordingly...
+    this.userSub$ = this.authService.user$.subscribe((user: any) => {
+      // console.log('ShellHeaderComponent user subscription');
+      this.setCurrentUser(user);
+    });
+    // set current lang if no current value from langs if any
+    if (!this.currentLang && this.langs && this.langs.length > 0) {
+      this.setCurrentLang(this.langs[0]);
+    }
+  }
+
+  ngOnDestroy(): void {
+
+    if (this.routerSub$) {
+      this.routerSub$.unsubscribe();
+    }
+    // TODO: check authenticated user here before we start polling server status
+    if (this.statusSub$) {
+      this.statusSub$.unsubscribe();
+    }
+    if (this.userSub$) {
+      this.userSub$.unsubscribe();
+    }
+  }
+
+
+
+  // tslint:disable-next-line:typedef
+  public onClickOutside($event: any) {
+    this.userMenuExpanded = false;
+  }
+
+  public signin(event: any | null | undefined): void {
+    if (event) {
+      event.preventDefault();
+    }
+    this.authService.signinRedirect();
+  }
+
+  private setCurrentUser(user: any): void {
+    this.user = user;
+    if (this.user && this.user.profile) {
+      this.avatarName = `${this.user.profile.given_name?.charAt(0)}${this.user.profile.family_name?.charAt(0)}`.toUpperCase();
+    }
+  }
+
+  public setCurrentLang(lang: any): void {
+    this.currentLang = lang;
+  }
+}
+

package/src/lib/layouts/shell/shell-layout/shell-layout.component.html

@@ -0,0 +1,36 @@
+<div *ngIf="loaded" [style.display]="!loaded ? 'none':'block'" class="shell-container active-side-pane">
+
+  <div class="shell-header-container" *ngIf="activeConfig.showHeader">
+    <div [class]="activeConfig.fluid ? 'shell-header-container-inner-fluid' : 'shell-header-container-inner'">
+      <ng-container *ngIf="activeConfig.customHeaderComponent">
+        <div appDynamicComponentHost ="Header"></div>
+      </ng-container>
+      <lib-shell-header *ngIf="!activeConfig.customHeaderComponent"
+        [langs]="activeConfig.langs"
+        [show-userName]="activeConfig.showUserNameOnHeader"
+        [show-alerts]="activeConfig.showAlertsOnHeader"></lib-shell-header>
+    </div>
+  </div>
+
+  <main [class]="activeConfig.showHeader ? 'shell-content-container' : 'shell-content-container-no-header'">
+    <div [class]="activeConfig.fluid ? 'shell-content-container-inner-fluid' : 'shell-content-container-inner'">
+      <router-outlet></router-outlet>
+    </div>
+  </main>
+
+  <div class="shell-footer-container" *ngIf="activeConfig.showFooter">
+    <div [class]="activeConfig.fluid ? 'shell-footer-container-inner-fluid' : 'shell-footer-container-inner'">
+      <ng-container *ngIf="activeConfig.customFooterComponent">
+        <div appDynamicComponentHost hostName="Footer"></div>
+      </ng-container>
+      <lib-shell-footer *ngIf="!activeConfig.customFooterComponent"></lib-shell-footer>
+    </div>
+  </div>
+
+  <lib-side-pane #rightPane>
+    <router-outlet name="rightpane" (activate)="rightPane.onSidePaneActivated($event)" (deactivate)="rightPane.onSidePaneDeactivated($event)"></router-outlet>
+  </lib-side-pane>
+
+  <lib-toaster-container></lib-toaster-container>
+
+</div>

package/src/lib/layouts/shell/shell-layout/shell-layout.component.ts

@@ -0,0 +1,91 @@
+import { SHELL_CONFIG } from './../../../tokens';
+import { IShellConfig, DefaultShellConfig } from './../../../types';
+import { AfterViewInit, Component, OnInit, OnDestroy, Inject, ViewChildren, QueryList, AfterViewChecked } from '@angular/core';
+import { DOCUMENT, Location } from '@angular/common';
+import { ActivationStart, Router } from '@angular/router';
+import { filter } from 'rxjs/operators';
+import { Subscription, timer } from 'rxjs';
+import { DynamicComponentHostDirective } from '../../../directives/dynamic-component-host.directive';
+import { ComponentLoaderFactory } from '../../../services/component-loader/component-loader.factory';
+
+@Component({
+  // tslint:disable-next-line:component-selector
+  selector: 'lib-shell-layout',
+  templateUrl: './shell-layout.component.html',
+})
+export class ShellLayoutComponent implements OnInit, OnDestroy, AfterViewInit, AfterViewChecked {
+  @ViewChildren(DynamicComponentHostDirective)
+  dynamicComponentHosts: QueryList<DynamicComponentHostDirective> | null = null;
+  public showRightPaneSM = false;
+  private routerSub$: Subscription | null = null;
+  public activeConfig: IShellConfig = new DefaultShellConfig();
+  public loaded = false;
+  constructor(
+    @Inject(DOCUMENT) private document: any,
+    private router: Router,
+    private location: Location,
+    @Inject(SHELL_CONFIG) private config: IShellConfig | null,
+    private componentLoaderFactory: ComponentLoaderFactory
+  ) {
+    if (!config) {
+      config = new DefaultShellConfig();
+    }
+    this.activeConfig = config;
+  }
+
+  ngAfterViewChecked(): void {
+    setTimeout(() => { this.loaded = true; }, 200);
+  }
+
+  ngOnInit(): void {
+    this.routerSub$ = this.router.events.pipe(filter((event) => event instanceof ActivationStart)).subscribe((e) => {
+      // console.log('ShellLayoutComponent ActivationStart', e);
+      if ((e as ActivationStart)?.snapshot) {
+        // console.log('ShellLayoutComponent ActivationStart snapshot', (e as ActivationStart)?.snapshot);
+        if ((e as ActivationStart)?.snapshot?.data) {
+          // console.log('ShellLayoutComponent ActivationStart snapshot data', (e as ActivationStart)?.snapshot.data);
+          if ((e as ActivationStart)?.snapshot?.data.shell) {
+            // console.log('ShellLayoutComponent ActivationStart snapshot data shell params',
+            // (e as ActivationStart)?.snapshot.data.shell);
+            this.activeConfig = (e as ActivationStart)?.snapshot.data.shell as IShellConfig;
+            // console.log('ShellLayoutComponent activeConfig from route: ', this.activeConfig);
+            if (this.activeConfig.customHeaderComponent) {
+              this.initCustomComponents();
+            }
+          } else {
+            this.activeConfig = this.config ? this.config : new DefaultShellConfig();
+            // console.log('ShellLayoutComponent default activeConfig: ', this.activeConfig);
+          }
+        }
+      }
+    });
+  }
+
+  ngAfterViewInit(): void {
+    this.initCustomComponents();
+  }
+
+  private initCustomComponents(): void {
+    if (this.dynamicComponentHosts && this.dynamicComponentHosts.length > 0) {
+      this.loadCustomComponent(this.dynamicComponentHosts.find((_) => _.hostName === 'Header'));
+      // since you're not using it...
+      // this.loadCustomComponent(this.dynamicComponentHosts.find(_ => _.hostName === 'Footer'));
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (this.routerSub$) {
+      this.routerSub$.unsubscribe();
+    }
+  }
+
+  private loadCustomComponent(host: DynamicComponentHostDirective | undefined): void {
+    if (host) {
+      const viewContainerRef = host.viewContainerRef;
+      if (viewContainerRef && this.activeConfig.customHeaderComponent) {
+        const clf = this.componentLoaderFactory.createLoader(viewContainerRef);
+        const headerCompRef = clf.attach(this.activeConfig.customHeaderComponent).to(viewContainerRef.element).show();
+      }
+    }
+  }
+}

package/src/lib/layouts/views/form-layout/form-layout.component.html

@@ -0,0 +1,67 @@
+<div class="form-layout-container">
+  <div class="form-header" *ngIf="title || subTitle || actions">
+    <div class="form-header-inner">
+      <h3 class="form-title">
+        {{ title }}
+      </h3>
+      <p class="form-subtitle">
+        {{ subTitle }}
+      </p>
+    </div>
+    <div class="form-header-actions">
+      <ng-container *ngFor="let action of actions" [ngSwitch]="action.type">
+        <ng-container *ngSwitchCase="'search'">
+          <label for="search" class="sr-only">Search</label>
+          <div class="search-container">
+            <div class="pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center">
+              <!--<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                            <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
+                          </svg>-->
+            </div>
+            <input id="search"
+                   #search
+                   class="form-search-input"
+                   [placeholder]="searchPlaceholder"
+                   type="search"
+                   name="search"
+                   (input)="searchActionType(search.value)">
+          </div>
+          <button type="button"
+                  href="#"
+                  class="btn-form-view-header-search"
+                  [title]="action.tooltip"
+                  (click)="searchActionClick(action, search.value)">
+            <i [class]="action.icon"></i>
+          </button>
+        </ng-container>
+        <ng-container *ngSwitchCase="'router-link'">
+          <button type="button"
+                  href="#"
+                  class="ml-1 btn-form-view-header"
+                  [title]="action.tooltip"
+                  (click)="routerLinkActionClick(action)">
+            <i [class]="action.icon"></i>
+          </button>
+        </ng-container>
+        <ng-container *ngSwitchDefault>
+          <button type="button"
+                  class="ml-1 btn-form-view-header"
+                  [title]="action.tooltip"
+                  (click)="emitActionClick(action)">
+            <i [class]="action.icon"></i>
+          </button>
+        </ng-container>
+      </ng-container>
+    </div>
+  </div>
+  <div class="form-content-container">
+    <div [ngClass]="{'form-content-container-inner': actions}">
+      <ng-content></ng-content>
+    </div>
+  </div>
+  <lib-side-pane #formPane (onComplete)="onSidePaneDeactivated($event)">
+    <router-outlet name="formRightPane"
+                   (activate)="formPane.onSidePaneActivated($event)"
+                   (deactivate)="formPane.onSidePaneDeactivated($event)"></router-outlet>
+  </lib-side-pane>
+</div>

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

@@ -0,0 +1,66 @@
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { Router } from '@angular/router';
+import { fromEvent } from 'rxjs';
+import { map, filter, debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { RouterViewAction, ViewAction } from '../../../types';
+
+@Component({
+  selector: 'lib-form-layout',
+  templateUrl: './form-layout.component.html'
+})
+export class FormLayoutComponent implements OnInit {
+  // tslint:disable-next-line:no-input-rename
+  @ViewChild('search') private searchInput$?: ElementRef;
+  @Input() title: string | null = null;
+  // tslint:disable-next-line:no-input-rename
+  @Input('search-placeholder') searchPlaceholder: string | null = 'αναζήτηση'
+  @Input() actions: ViewAction[] | null = null;
+  // tslint:disable-next-line:no-input-rename
+  @Input('sub-title') subTitle: string | null = 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>();
+  @Output() onComplete: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+  constructor(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 onSidePaneDeactivated($event: any): void {
+    this.onComplete.emit(true);
+  }
+
+  public emitActionClick(action: ViewAction): void {
+    this.onAction.emit(action);
+  }
+
+  searchActionClick(action: ViewAction, text: string): void {
+    this.onSearch.emit(text);
+  }
+
+  searchActionType(text: string): void {
+    this.onSearch.emit(this.searchInput$?.nativeElement.value);
+  }
+
+  public routerLinkActionClick(action: RouterViewAction | any, relative: boolean = false): void {
+    if (action.outlet) {
+      this.router$.navigate(['', { outlets: { formRightPane: action.link } }]);
+    } else {
+      this.router$.navigate([action.link]);
+    }
+  }
+
+}

package/src/lib/layouts/views/model-view-layout/model-view-layout.component.html

@@ -0,0 +1,43 @@
+<lib-view-layout [title]="title" [meta-items]="metaItems">
+  <main class="model-view-container">
+    <div class="model-view-container-inner">
+      <aside class="model-view-aside">
+        <section aria-labelledby="menu" class="details-view-aside-header-section">
+          <div class="model-view-aside-header-container">
+            <div class="model-view-aside-header-container-inner">
+              <ng-content></ng-content>
+            </div>
+            <!-- menu items -->
+            <div class="model-view-menu-container">
+              <nav class="model-view-menu-nav">
+                <div class="model-view-menu-item">
+                  <ng-container *ngFor="let section of primary">
+                    <a href="#"
+                       [routerLinkActive]="['view-nav-link-active']"
+                       [routerLink]="section.link"
+                       class="view-nav-link">
+                      {{section.text}}
+                    </a>
+                  </ng-container>
+                </div>
+                <div class="model-view-menu-item-far">
+                  <ng-container *ngFor="let section of secondary">
+                    <a href="#"
+                       [routerLinkActive]="['view-nav-link-active']"
+                       [routerLinkActiveOptions]="{ exact: true }"
+                       [routerLink]="section.link"
+                       class="view-nav-link">
+                      {{section.text}}
+                    </a>
+                  </ng-container>
+                </div>
+              </nav>
+            </div>
+          </div>
+        </section>
+      </aside>
+      <div class="model-view-details-container">
+        <router-outlet></router-outlet>
+      </div>
+    </div>
+  </main>

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

@@ -0,0 +1,37 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
+import { HeaderMetaItem } from '../../../types';
+
+@Component({
+  // tslint:disable-next-line:component-selector
+  selector: 'lib-model-view-layout',
+  templateUrl: './model-view-layout.component.html'
+})
+export class ModelViewLayoutComponent implements OnInit {
+  public showRightPaneSM = false;
+  @Input() title = 'no title';
+  // tslint:disable-next-line:no-input-rename
+  @Input('primary-links') primary: { text: string, link: string }[] | null = null;
+  // tslint:disable-next-line:no-input-rename
+  @Input('secondary-links') secondary: { text: string, link: string }[] | null = null;
+  // tslint:disable-next-line:no-input-rename
+  @Input('meta-items') metaItems: HeaderMetaItem[] | null = [
+    // { key: 'test', icon: Icons.Badges, text: 'βρέθηκαν 200 αποτελέσματα' }
+  ];
+  constructor( private location: Location) { }
+
+  ngOnInit(): void {
+  }
+
+  public onSidePaneActivated($event: any): void  {
+    this.showRightPaneSM = true;
+  }
+
+  public onSidePaneDeactivated($event: any): void  {
+    this.showRightPaneSM = false;
+  }
+
+  public closeSidePane(): void {
+    this.location.back();
+  }
+}

package/src/lib/layouts/views/side-view-layout/side-view-layout.component.html

@@ -0,0 +1,36 @@
+<div class="side-view-layout-size-box">
+  <div class="side-view-layout-container">
+    <div class="side-view-layout-container-inner">
+      <div class="side-view-layout-header-margins">
+        <div class="side-view-layout-header-container">
+          <h2 class="side-view-layout-header-title" id="slide-over-title">
+            {{title}}
+          </h2>
+          <div class="side-view-layout-close-button-container">
+            <button (click)="emitClose()" class="side-view-layout-close-button">
+              <span class="sr-only">Close panel</span>
+              <!-- Heroicon name: outline/x -->
+              <svg class="side-view-layout-close-button-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+      <div class="side-view-layout-content-container">
+        <!-- Replace with your content -->
+        <ng-content></ng-content>
+        <!-- /End replace -->
+      </div>
+    </div>
+    <div *ngIf="showActions" class="side-view-layout-actions-container">
+      <button *ngIf="cancelShow" (click)="emitCancel()" type="button" class="side-view-layout-action-button-cancel">
+        {{cancelLabel}}
+      </button>
+      <button *ngIf="okShow" (click)="emitOK()" class="side-view-layout-action-button-submit" [disabled]="disabled">
+        {{okLabel}}
+      </button>
+    </div>
+  </div>
+</div>
+

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

@@ -0,0 +1,67 @@
+import { Router } from '@angular/router';
+import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
+import { Location } from '@angular/common';
+
+@Component({
+  selector: 'lib-side-view-layout',
+  templateUrl: './side-view-layout.component.html'
+})
+export class SideViewLayoutComponent implements OnInit {
+  @Input() title: string | null = 'Πληροφορίες';
+  @Input() showActions = true;
+  @Input() disabled = false;
+  // tslint:disable-next-line:no-input-rename
+  @Input('return-path') returnPath: string | undefined;
+  // tslint:disable-next-line:no-input-rename
+  @Input('ok-label') okLabel = 'Αποθήκευση';
+  // tslint:disable-next-line:no-input-rename
+  @Input('ok-show') okShow = true;
+  // tslint:disable-next-line:no-input-rename
+  @Input('ok-close-dialog') closeOnOk = true;
+  // tslint:disable-next-line:no-input-rename
+  @Input('cancel-label') cancelLabel = 'Ακύρωση';
+  // tslint:disable-next-line:no-input-rename
+  @Input('cancel-show') cancelShow = true;
+  // tslint:disable-next-line:no-input-rename
+  @Input('force-location-back') forceLocationBack = false;
+  // @Output() close = new EventEmitter<any>();
+  @Output() cancel: EventEmitter<boolean> = new EventEmitter();
+  @Output() ok: EventEmitter<boolean> = new EventEmitter();
+
+  constructor(private location: Location, private router: Router) { }
+
+  ngOnInit(): void {
+  }
+
+  public closeSidePane(): void {
+    if (this.returnPath) {
+      this.router.navigateByUrl('/', { skipLocationChange: true }).then(() => this.router.navigateByUrl(this.returnPath || '/'));
+    } else {
+      if ((this.router.url.split('/(')[0] !== this.router.url) && !this.forceLocationBack) {
+        this.router.navigateByUrl(this.router.url.split('/(')[0]);
+      } else if ((this.router.url.split('(')[0] !== this.router.url) && !this.forceLocationBack) {
+        this.router.navigateByUrl(this.router.url.split('(')[0]);
+      } else {
+        this.location.back();
+      }
+    }
+  }
+
+  public emitClose(): void {
+    this.cancel.emit(false);
+    this.closeSidePane();
+  }
+
+  public emitCancel(): void {
+    this.cancel.emit(false);
+    this.closeSidePane();
+  }
+
+  public emitOK(): void {
+    this.ok.emit(true);
+    if (this.closeOnOk) {
+      this.closeSidePane();
+    }
+  }
+
+}

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

@@ -0,0 +1,68 @@
+<header *ngIf="header" class="view-layout-paddings">
+
+  <div class="view-layout-title-container">
+
+    <div class="view-layout-title-container-inner">
+      <div class="flex items-center">
+        <i *ngIf="icon" [class]="icon + ' title-icon'" aria-hidden="true"></i>
+        <h1 [class]="busy ? 'view-layout-title-busy' : 'view-layout-title'">{{title}}</h1>
+      </div>
+      <div *ngIf="metaItems && metaItems.length > 0" class="meta-container">
+        <ng-container *ngFor="let meta of metaItems">
+          <div class="meta-item-container">
+            <i *ngIf="meta.icon" [class]="meta.icon + ' meta-icon'" aria-hidden="true"></i>
+            <span class="meta-text">{{meta.text}}</span>
+          </div>
+        </ng-container>
+      </div>
+    </div>
+
+    <div class="flex items-center justify-end">
+      <ng-container *ngFor="let action of actions"  [ngSwitch]="action.type">
+
+        <ng-container *ngSwitchCase="'switch-view'">
+          <button [disabled]="view === action.param" type="button" href="#" class="ml-1 disabled:opacity-50 btn-view-header" (click)="switchViewActionClick(action)">
+            <span class="inline-block relative">
+              <i [class]="action.icon"></i>
+              <span *ngIf="view === action.param" class="selected-view-indicator"></span>
+            </span>
+          </button>
+        </ng-container>
+
+        <ng-container *ngSwitchCase="'search'">
+          <label for="search" class="sr-only">Search</label>
+          <div class="search-container">
+            <div class="pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center">
+              <!--<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
+              </svg>-->
+            </div>
+            <input id="search" #search class="search-input" [placeholder]="searchPlaceholder"
+                   type="search" name="search" (input)="searchActionType(search.value)" (onsearch)="handleClear($event)">
+          </div>
+          <button type="button"  href="#" class="btn-view-header rounded-l-none" [title]="action.tooltip" (click)="searchActionClick(action, search.value)">
+            <i [class]="action.icon"></i>
+          </button>
+        </ng-container>
+
+        <ng-container *ngSwitchCase="'router-link'">
+          <button type="button"  href="#" class="ml-1 btn-view-header" [title]="action.tooltip" (click)="routerLinkActionClick(action)">
+            <i [class]="action.icon"></i>
+          </button>
+        </ng-container>
+
+
+        <ng-container *ngSwitchDefault>
+          <button type="button"  class="ml-1 btn-view-header" [title]="action.tooltip" (click)="emitActionClick(action)">
+            <i [class]="action.icon"></i>
+          </button>
+        </ng-container>
+      </ng-container>
+    </div>
+  </div>
+</header>
+
+<!-- component -->
+<div [class]="fluid ? 'view-container-fluid' : 'view-container'">
+  <ng-content></ng-content>
+</div>