tango-app-ui-shared 3.0.0 → 3.0.2

package/src/lib/modules/layout/sidebar/sidebar-menu/sidebar-menu.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SidebarMenuComponent } from './sidebar-menu.component';
-
-describe('SidebarMenuComponent', () => {
-  let component: SidebarMenuComponent;
-  let fixture: ComponentFixture<SidebarMenuComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ SidebarMenuComponent ]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(SidebarMenuComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/modules/layout/sidebar/sidebar-menu/sidebar-menu.component.ts

@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'lib-sidebar-menu',
-  templateUrl: './sidebar-menu.component.html',
-  styleUrls: ['./sidebar-menu.component.scss']
-})
-export class SidebarMenuComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

package/src/lib/modules/layout/sidebar/sidebar.component.html

@@ -1,16 +0,0 @@
-<!--begin::Logo-->
-<lib-sidebar-logo class="app-sidebar-logo px-6" id="kt_app_sidebar_logo"
-  [toggleButtonClass]="toggleButtonClass" [toggleEnabled]="toggleEnabled" [toggleType]="toggleType"
-  [toggleState]="toggleState">
-</lib-sidebar-logo>
-<!--end::Logo-->
-
-<!--begin::sidebar menu-->
-<lib-sidebar-menu class="app-sidebar-menu overflow-hidden flex-column-fluid">
-</lib-sidebar-menu>
-<!--end::sidebar menu-->
-
-<!--begin::Footer-->
-<lib-sidebar-footer class="app-sidebar-footer flex-column-auto pt-2 pb-6 px-6" id="kt_app_sidebar_footer">
-</lib-sidebar-footer>
-<!--end::Footer-->

package/src/lib/modules/layout/sidebar/sidebar.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SidebarComponent } from './sidebar.component';
-
-describe('SidebarComponent', () => {
-  let component: SidebarComponent;
-  let fixture: ComponentFixture<SidebarComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ SidebarComponent ]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(SidebarComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/modules/layout/sidebar/sidebar.component.ts

@@ -1,203 +0,0 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { Subscription } from 'rxjs';
-import { LayoutService } from 'tango-app-metronics';
-import { ILayout, LayoutType } from 'tango-app-metronics/lib/layout/core/configs/config';
-
-@Component({
-  selector: 'lib-sidebar',
-  templateUrl: './sidebar.component.html',
-  styleUrls: ['./sidebar.component.scss'],
-})
-export class SidebarComponent implements OnInit, OnDestroy {
-  private unsubscribe: Subscription[] = [];
-
-  // public props
-  appSidebarDisplay: boolean;
-  appSidebarDefaultFixedDesktop: boolean;
-  appSidebarDefaultMinimizeDesktopEnabled: boolean;
-  appSidebarDefaultMinimizeDesktopDefault: boolean;
-  appSidebarDefaultMinimizeDesktopHoverable: boolean;
-  appSidebarDefaultMinimizeMobileEnabled: boolean;
-  appSidebarDefaultMinimizeMobileDefault: boolean;
-  appSidebarDefaultMinimizeMobileHoverable: boolean;
-  appSidebarDefaultCollapseDesktopEnabled: boolean;
-  appSidebarDefaultCollapseDesktopDefault: boolean;
-  appSidebarDefaultCollapseMobileEnabled: boolean;
-  appSidebarDefaultCollapseMobileDefault: boolean;
-
-  appSidebarDefaultPushHeader: boolean;
-  appSidebarDefaultPushToolbar: boolean;
-  appSidebarDefaultPushFooter: boolean;
-
-  appSidebarDefaultStacked: boolean;
-
-  // logo
-  appSidebarDefaultMinimizeDefault: boolean;
-  toggleButtonClass: string;
-  toggleEnabled: boolean;
-  toggleType: string;
-  toggleState: string;
-
-  constructor(private layout: LayoutService) {}
-
-  ngOnInit(): void {
-    const subscr = this.layout.layoutConfigSubject
-      .asObservable()
-      .subscribe((config: ILayout) => {
-        this.updateProps(config);
-      });
-    this.unsubscribe.push(subscr);
-  }
-
-  updateProps(config: ILayout) {
-    this.appSidebarDisplay = this.layout.getProp('app.sidebar.display', config) as boolean;
-    if (!this.appSidebarDisplay) {
-      return;
-    }
-
-    this.appSidebarDefaultFixedDesktop = this.layout.getProp(
-      'app.sidebar.default.fixed.desktop',
-      config
-    ) as boolean;
-
-    this.appSidebarDefaultMinimizeDesktopEnabled = this.layout.getProp(
-      'app.sidebar.default.minimize.desktop.enabled',
-      config
-    ) as boolean;
-    if (this.appSidebarDefaultMinimizeDesktopEnabled) {
-      this.appSidebarDefaultMinimizeDesktopDefault = this.layout.getProp(
-        'app.sidebar.default.minimize.desktop.default',
-        config
-      ) as boolean;
-      // if (this.appSidebarDefaultMinimizeDesktopDefault) {
-        document.body.setAttribute('data-kt-app-sidebar-minimize', 'on');
-      // }
-
-      this.appSidebarDefaultMinimizeDesktopHoverable = this.layout.getProp(
-        'app.sidebar.default.minimize.desktop.hoverable',
-        config
-      ) as boolean;
-      if (this.appSidebarDefaultMinimizeDesktopHoverable) {
-        document.body.setAttribute('data-kt-app-sidebar-hoverable', 'true');
-      }
-    }
-
-    this.appSidebarDefaultMinimizeMobileEnabled = this.layout.getProp(
-      'app.sidebar.default.minimize.mobile.enabled',
-      config
-    ) as boolean;
-    if (this.appSidebarDefaultMinimizeMobileEnabled) {
-      this.appSidebarDefaultMinimizeMobileDefault = this.layout.getProp(
-        'app.sidebar.default.minimize.mobile.default',
-        config
-      ) as boolean;
-      // if (this.appSidebarDefaultMinimizeMobileDefault) {
-        document.body.setAttribute('data-kt-app-sidebar-minimize-mobile', 'on');
-      // }
-
-      this.appSidebarDefaultMinimizeMobileHoverable = this.layout.getProp(
-        'app.sidebar.default.minimize.mobile.hoverable',
-        config
-      ) as boolean;
-      if (this.appSidebarDefaultMinimizeMobileHoverable) {
-        document.body.setAttribute(
-          'data-kt-app-sidebar-hoverable-mobile',
-          'true'
-        );
-      }
-    }
-
-    this.appSidebarDefaultCollapseDesktopEnabled = this.layout.getProp(
-      'app.sidebar.default.collapse.desktop.enabled',
-      config
-    ) as boolean;
-    if (this.appSidebarDefaultCollapseDesktopEnabled) {
-      this.appSidebarDefaultCollapseDesktopDefault = this.layout.getProp(
-        'app.sidebar.default.collapse.desktop.default',
-        config
-      ) as boolean;
-      if (this.appSidebarDefaultCollapseDesktopDefault) {
-        document.body.setAttribute('data-kt-app-sidebar-collapse', 'on');
-      }
-    }
-
-    this.appSidebarDefaultCollapseMobileEnabled = this.layout.getProp(
-      'app.sidebar.default.collapse.mobile.enabled',
-      config
-    ) as boolean;
-    if (this.appSidebarDefaultCollapseMobileEnabled) {
-      this.appSidebarDefaultCollapseMobileDefault = this.layout.getProp(
-        'app.sidebar.default.collapse.mobile.default',
-        config
-      ) as boolean;
-      if (this.appSidebarDefaultCollapseMobileDefault) {
-        document.body.setAttribute('data-kt-app-sidebar-collapse-mobile', 'on');
-      }
-    }
-
-    if (this.layout.getProp('app.sidebar.default.push')) {
-      this.appSidebarDefaultPushHeader = this.layout.getProp(
-        'app.sidebar.default.push.header',
-        config
-      ) as boolean;
-      if (this.appSidebarDefaultPushHeader) {
-        document.body.setAttribute('data-kt-app-sidebar-push-header', 'true');
-      }
-
-      this.appSidebarDefaultPushToolbar = this.layout.getProp(
-        'app.sidebar.default.push.toolbar',
-        config
-      ) as boolean;
-      if (this.appSidebarDefaultPushToolbar) {
-        document.body.setAttribute('data-kt-app-sidebar-push-toolbar', 'true');
-      }
-
-      this.appSidebarDefaultPushFooter = this.layout.getProp(
-        'app.sidebar.default.push.footer',
-        config
-      ) as boolean;
-      if (this.appSidebarDefaultPushFooter) {
-        document.body.setAttribute('data-kt-app-sidebar-push-footer', 'true');
-      }
-    }
-
-    this.appSidebarDefaultStacked = this.layout.getProp(
-      'app.sidebar.default.stacked',
-      config
-    ) as boolean;
-    if (this.appSidebarDefaultStacked) {
-      document.body.setAttribute('app-sidebar-stacked', 'true');
-    }
-
-    // Logo
-    this.appSidebarDefaultMinimizeDefault = this.layout.getProp(
-      'app.sidebar.default.minimize.desktop.default',
-      config
-    ) as boolean;
-    this.toggleButtonClass = this.appSidebarDefaultMinimizeDefault
-      ? 'active'
-      : '';
-    this.toggleEnabled =
-      this.appSidebarDefaultMinimizeDesktopEnabled ||
-      this.appSidebarDefaultCollapseDesktopEnabled;
-    if (this.appSidebarDefaultMinimizeDesktopEnabled) {
-      this.toggleType = 'minimize';
-      this.toggleState = 'active';
-    }
-
-    if (this.appSidebarDefaultCollapseDesktopEnabled) {
-      this.toggleType = 'collapse';
-      this.toggleState = '';
-    }
-
-    document.body.setAttribute('data-kt-app-sidebar-enabled', 'true');
-    document.body.setAttribute(
-      'data-kt-app-sidebar-fixed',
-      this.appSidebarDefaultFixedDesktop.toString()
-    );
-  }
-
-  ngOnDestroy() {
-    this.unsubscribe.forEach((sb) => sb.unsubscribe());
-  }
-}

package/src/lib/modules/layout/toolbar/accounting/accounting.component.html

@@ -1,84 +0,0 @@
-<!--begin::Input group-->
-<div class="d-flex align-items-center flex-shrink-0">
-  <!--begin::Label-->
-  <span class="fs-7 text-gray-700 fw-bold pe-3 d-none d-md-block">Actions:</span>
-  <!--end::Label-->
-
-  <!--begin::Actions-->
-  <div class="d-flex flex-shrink-0">
-    <!--begin::Button-->
-    <div data-bs-toggle="tooltip" data-bs-placement="top" data-bs-trigger="hover" title="Add a team member">
-      <a href="#" class="btn btn-sm btn-icon btn-active-color-success">
-        <lib-keenicon name="plus-square" class="fs-2x"></lib-keenicon>
-      </a>
-    </div>
-    <!--end::Button-->
-
-    <!--begin::Button-->
-    <div data-bs-toggle="tooltip" data-bs-placement="top" data-bs-trigger="hover" title="Create new account">
-      <a href="#" class="btn btn-sm btn-icon btn-active-color-success">
-        <lib-keenicon name="gen037.svg" class="fs-2x"></lib-keenicon>
-      </a>
-    </div>
-    <!--end::Button-->
-
-    <!--begin::Button-->
-    <div data-bs-toggle="tooltip" data-bs-placement="top" data-bs-trigger="hover" title="Invite friends">
-      <a href="#" class="btn btn-sm btn-icon btn-active-color-success">
-        <lib-keenicon name="dots-square" class="fs-2x"></lib-keenicon>
-      </a>
-    </div>
-    <!--end::Button-->
-  </div>
-  <!--end::Actions-->
-</div>
-<!--end::Input group-->
-
-<!--begin::Input group-->
-<div class="d-flex align-items-center flex-shrink-0">
-  <!--begin::Desktop separartor-->
-  <div class="bullet bg-secondary h-35px w-1px mx-5"></div>
-  <!--end::Desktop separartor-->
-
-  <!--begin::Label-->
-  <span class="fs-7 text-gray-700 fw-bold pe-4 ps-1 d-none d-md-block">Progress:</span>
-  <!--end::Label-->
-
-  <div class="progress w-100px w-xl-150px w-xxl-300px h-25px bg-light-success">
-    <div class="progress-bar rounded bg-success fs-7 fw-bold" role="progressbar" style="width: 72%;" aria-valuenow="72"
-      aria-valuemin="0" aria-valuemax="100">72%</div>
-  </div>
-</div>
-<!--end::Input group-->
-<!--end::Toolbar start-->
-
-<!--begin::Toolbar end-->
-<div class="d-flex align-items-center">
-  <!--begin::Input group-->
-  <div class="me-3">
-    <!--begin::Select-->
-    <select class="form-select form-select-sm form-select-solid" data-control="select2" data-placeholder="Latest"
-      data-hide-search="true">
-      <option value=""></option>
-      <option value="1" selected>Today 16 Feb</option>
-      <option value="2">In Progress</option>
-      <option value="3">Done</option>
-    </select>
-    <!--end::Select-->
-  </div>
-  <!--end::Input group--->
-
-  <!--begin::Input group--->
-  <div class="m-0">
-    <!--begin::Select-->
-    <select class="form-select form-select-sm form-select-solid w-md-125px" data-control="select2"
-      data-placeholder="Filters" data-hide-search="true">
-      <option value=""></option>
-      <option value="1" selected>Filters</option>
-      <option value="2">In Progress</option>
-      <option value="3">Done</option>
-    </select>
-    <!--end::Content-->
-  </div>
-  <!--end::Input group--->
-</div>

package/src/lib/modules/layout/toolbar/accounting/accounting.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AccountingComponent } from './accounting.component';
-
-describe('AccountingComponent', () => {
-  let component: AccountingComponent;
-  let fixture: ComponentFixture<AccountingComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ AccountingComponent ]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(AccountingComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/modules/layout/toolbar/accounting/accounting.component.ts

@@ -1,14 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'lib-accounting',
-  templateUrl: './accounting.component.html',
-  styleUrls: ['./accounting.component.scss']
-})
-export class AccountingComponent implements OnInit {
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

package/src/lib/modules/layout/toolbar/classic/classic.component.html

@@ -1,37 +0,0 @@
-<ng-container *ngIf="appToolbarFilterButton">
-  <!--begin::Filter menu-->
-  <div class="m-0">
-    <!--begin::Menu toggle-->
-    <a href="#" class="btn btn-sm btn-flex fw-bold" [ngClass]="daterangepickerButtonClass" data-kt-menu-trigger="click"
-      data-kt-menu-placement="bottom-end">
-      <lib-keenicon name="filter" class="fs-6 text-muted me-1"></lib-keenicon>
-      Filter
-    </a>
-    <!--end::Menu toggle-->
-
-    <!-- <lib-dropdown-menu1></lib-dropdown-menu1> -->
-  </div>
-  <!--end::Filter menu-->
-</ng-container>
-
-<ng-container *ngIf="appToolbarDaterangepickerButton">
-  <div data-kt-daterangepicker="true" data-kt-daterangepicker-opens="left"
-    class="btn btn-sm fw-bold  d-flex align-items-center px-4" [ngClass]="daterangepickerButtonClass">
-    <!--begin::Display range-->
-    <div class="text-gray-600 fw-bold">
-      Loading date range...
-    </div>
-    <!--end::Display range-->
-    <lib-keenicon name="calendar-8" class="fs-1 ms-2 me-0"></lib-keenicon>
-  </div>
-</ng-container>
-
-<!--begin::Secondary button-->
-<a href="javascript:;" class="btn btn-sm btn-flex btn-light fw-bold">
-  Filter
-</a>
-<!--end::Secondary button-->
-
-<!--begin::Primary button--> 
-<a href="javascript:;" class="btn btn-sm fw-bold btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_create_app">Create</a>
-<!--end::Primary button-->

package/src/lib/modules/layout/toolbar/classic/classic.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ClassicComponent } from './classic.component';
-
-describe('ClassicComponent', () => {
-  let component: ClassicComponent;
-  let fixture: ComponentFixture<ClassicComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ ClassicComponent ]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(ClassicComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/modules/layout/toolbar/classic/classic.component.ts

@@ -1,88 +0,0 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { Subscription } from 'rxjs';
-import { LayoutService } from 'tango-app-metronics';
-
-@Component({
-  selector: 'lib-classic',
-  templateUrl: './classic.component.html',
-  styleUrls: ['./classic.component.scss'],
-})
-export class ClassicComponent implements OnInit, OnDestroy {
-  private unsubscribe: Subscription[] = [];
-  appToolbarPrimaryButton: boolean;
-  appToolbarPrimaryButtonLabel: string = '';
-  appToolbarPrimaryButtonUrl: string = '';
-  appToolbarPrimaryButtonModal: string = '';
-  appToolbarSecondaryButton: boolean;
-  appToolbarFixedDesktop: boolean;
-  appToolbarSecondaryButtonLabel: string = '';
-  appToolbarSecondaryButtonUrl: string = '';
-  appToolbarSecondaryButtonModal: string = '';
-  appToolbarFilterButton: boolean;
-  appToolbarDaterangepickerButton: boolean;
-  secondaryButtonClass: string = '';
-  filterButtonClass: string = '';
-  daterangepickerButtonClass: string = '';
-
-  constructor(private layout: LayoutService) {}
-
-  ngOnInit(): void {
-    this.updateProps();
-    const subscr = this.layout.layoutConfigSubject
-      .asObservable()
-      .subscribe(() => {
-        this.updateProps();
-      });
-    this.unsubscribe.push(subscr);
-  }
-
-  updateProps() {
-    this.appToolbarPrimaryButton = this.layout.getProp(
-      'app.toolbar.primaryButton'
-    ) as boolean;
-    this.appToolbarPrimaryButtonLabel = this.layout.getProp(
-      'app.toolbar.primaryButtonLabel'
-    ) as string;
-    this.appToolbarPrimaryButtonUrl = this.layout.getProp(
-      'app.toolbar.primaryButtonUrl'
-    ) as string;
-    this.appToolbarPrimaryButtonModal = this.layout.getProp(
-      'app.toolbar.primaryButtonModal'
-    ) as string;
-    this.appToolbarSecondaryButton = this.layout.getProp(
-      'app.toolbar.secondaryButton'
-    ) as boolean;
-    this.secondaryButtonClass = this.appToolbarFixedDesktop
-      ? 'btn-light'
-      : 'bg-body btn-color-gray-700 btn-active-color-primary';
-    this.appToolbarFixedDesktop = this.layout.getProp(
-      'appToolbarFixedDesktop'
-    ) as boolean;
-    this.appToolbarSecondaryButtonLabel = this.layout.getProp(
-      'appToolbarSecondaryButtonLabel'
-    ) as string;
-    this.appToolbarSecondaryButtonUrl = this.layout.getProp(
-      'appToolbarSecondaryButtonUrl'
-    ) as string;
-    this.appToolbarSecondaryButtonModal = this.layout.getProp(
-      'appToolbarSecondaryButtonModal'
-    ) as string;
-    this.appToolbarFilterButton = this.layout.getProp(
-      'appToolbarFilterButton'
-    ) as boolean;
-    this.appToolbarDaterangepickerButton = this.layout.getProp(
-      'appToolbarDaterangepickerButton'
-    ) as boolean;
-
-    this.filterButtonClass = this.appToolbarFixedDesktop
-      ? 'btn-light'
-      : 'bg-body btn-color-gray-600 btn-active-color-primary';
-    this.daterangepickerButtonClass = this.appToolbarFixedDesktop
-      ? 'btn-light'
-      : 'bg-body btn-color-gray-700 btn-active-color-primary';
-  }
-
-  ngOnDestroy() {
-    this.unsubscribe.forEach((sb) => sb.unsubscribe());
-  }
-}

package/src/lib/modules/layout/toolbar/extended/extended.component.html

@@ -1,100 +0,0 @@
-<!--begin::Label-->
-<span class="fs-7 fw-bold text-gray-700 pe-4 d-none d-md-block">Team:</span>
-<!--end::Label-->
-
-<!--begin::Users-->
-<div class="symbol-group symbol-hover flex-shrink-0 me-2">
-  <!--begin::User-->
-  <div class="symbol symbol-circle symbol-35px">
-    <div class="symbol-label fw-bold bg-warning text-inverse-warning">A</div>
-  </div>
-  <!--end::User-->
-
-  <!--begin::User-->
-  <div class="symbol symbol-circle symbol-35px">
-    <img src="./assets/media/avatars/300-1.jpg" alt="" />
-  </div>
-  <!--end::User-->
-
-  <!--begin::User-->
-  <div class="symbol symbol-circle symbol-35px">
-    <img src="./assets/media/avatars/300-2.jpg" alt="" />
-  </div>
-  <!--end::User-->
-
-  <!--begin::User-->
-  <div class="symbol symbol-circle symbol-35px">
-    <div class="symbol-label fw-bold bg-primary text-inverse-primary">S</div>
-  </div>
-  <!--end::User-->
-
-  <!--begin::User-->
-  <div class="symbol symbol-circle symbol-35px">
-    <img src="./assets/media/avatars/300-5.jpg" alt="" />
-  </div>
-  <!--end::User-->
-
-  <!--begin::User-->
-  <div class="symbol symbol-circle symbol-35px">
-    <div class="symbol-label fw-bold bg-danger text-inverse-danger">P</div>
-  </div>
-  <!--end::User-->
-
-  <!--begin::User-->
-  <div class="symbol symbol-circle symbol-35px">
-    <img src="./assets/media/avatars/300-20.jpg" alt="" />
-  </div>
-  <!--end::User-->
-</div>
-<!--end::Users-->
-
-<!--begin::Button-->
-<div data-bs-toggle="tooltip" data-bs-placement="top" data-bs-trigger="hover" title="Invite a team member">
-  <a href="#" class="btn btn-sm btn-icon">
-    <lib-keenicon name="plus-square" class="fs-2hx text-success"></lib-keenicon>
-  </a>
-</div>
-<!--end::Button-->
-<!--end::Toolbar start-->
-
-<!--begin::Toolbar end-->
-<div class="d-flex align-items-center overflow-auto">
-  <!--begin::Search-->
-  <div class="position-relative my-1">
-    <lib-keenicon name="magnifier" class="fs-3 text-gray500 position-absolute top-50 translate-middle ps-10"></lib-keenicon>
-    <input type="text" class="form-control form-control-sm form-control-solid w-150px ps-10" name="Search Team" value=""
-      placeholder="Search Team" />
-  </div>
-  <!--end::Search-->
-
-  <!--begin::Separartor-->
-  <div class="bullet bg-secondary h-35px w-1px mx-6"></div>
-  <!--end::Separartor-->
-
-  <!--begin::Label-->
-  <span class="fs-7 fw-bold text-gray-700 flex-shrink-0 pe-4 d-none d-md-block">Sort By:</span>
-  <!--end::Label-->
-
-  <!--begin::Select-->
-  <select class="form-select form-select-sm w-125px form-select-solid me-6" data-control="select2"
-    data-placeholder="Latest" data-hide-search="true">
-    <option value=""></option>
-    <option value="1" selected>Latest</option>
-    <option value="2">In Progress</option>
-    <option value="3">Done</option>
-  </select>
-  <!--end::Select-->
-
-  <!--begin::Actions-->
-  <div class="d-flex align-items-center">
-    <button type="button" class="btn btn-sm btn-icon btn-light-primary me-3" data-bs-toggle="tooltip"
-      data-bs-placement="top" title="Enable grid view">
-      <lib-keenicon name="element-11" class="fs-3 text-primary"></lib-keenicon>
-    </button>
-
-    <button type="button" class="btn btn-sm btn-icon btn-light" data-bs-toggle="tooltip" data-bs-placement="top"
-      title="Enable row view">
-      <lib-keenicon name="row-horizontal" class="fs-3 text-gray400"></lib-keenicon>
-    </button>
-  </div>
-  <!--end::Actions-->