@indice/ng-components 0.2.139 → 0.2.141

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

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

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

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

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

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

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

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

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

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

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