@hitsoft/e-donusum 1.0.5

package/_metronic/partials/layout/extras/dropdown-inner/user-inner/user-inner.component.html

@@ -0,0 +1,161 @@
+<ng-container *ngIf="user$ | async as _user">
+  <div class="menu-item px-3">
+    <div class="menu-content d-flex align-items-center px-3">
+      <div class="symbol symbol-50px me-5">
+        <img alt="Logo" [src]="_user.pic" />
+      </div>
+
+      <div class="d-flex flex-column">
+        <div class="fw-bolder d-flex align-items-center fs-5">
+          {{ _user.firstname }} {{ _user.lastname }}
+          <span class="badge badge-light-success fw-bolder fs-8 px-2 py-1 ms-2"
+            >Pro</span
+          >
+        </div>
+        <a class="fw-bold text-muted text-hover-primary fs-7 cursor-pointer">
+          {{ _user.email }}
+        </a>
+      </div>
+    </div>
+  </div>
+
+  <div class="separator my-2"></div>
+
+  <div class="menu-item px-5">
+    <a routerLink="/crafted/pages/profile" class="menu-link px-5">
+      My Profile
+    </a>
+  </div>
+
+  <div class="menu-item px-5">
+    <a class="menu-link px-5 cursor-pointer" placement="top-start" ngbTooltip="Coming soon">
+      <span class="menu-text">My Projects</span>
+      <span class="menu-badge">
+        <span class="badge badge-light-danger badge-circle fw-bolder fs-7">3</span>
+      </span>
+    </a>
+  </div>
+
+  <div
+    class="menu-item px-5"
+    data-kt-menu-trigger="hover"
+    data-kt-menu-placement="left-start"
+    data-kt-menu-flip="bottom"
+  >
+    <a class="menu-link px-5 cursor-pointer">
+      <span class="menu-title">My Subscription</span>
+      <span class="menu-arrow"></span>
+    </a>
+
+    <div class="menu-sub menu-sub-dropdown w-175px py-4">
+      <div class="menu-item px-3">
+        <a class="menu-link px-5 cursor-pointer" placement="top-start" ngbTooltip="Coming soon">Referrals</a>
+      </div>
+
+      <div class="menu-item px-3">
+        <a class="menu-link px-5 cursor-pointer" placement="top-start" ngbTooltip="Coming soon">Billing</a>
+      </div>
+
+      <div class="menu-item px-3">
+        <a class="menu-link px-5 cursor-pointer" placement="top-start" ngbTooltip="Coming soon">Payments</a>
+      </div>
+
+      <div class="menu-item px-3">
+        <a class="menu-link d-flex flex-stack px-5 cursor-pointer" placement="top-start" ngbTooltip="Coming soon">
+          Statements
+          <i
+            class="fas fa-exclamation-circle ms-2 fs-7"
+            data-bs-toggle="tooltip"
+            title="View your statements"
+          ></i>
+        </a>
+      </div>
+
+      <div class="separator my-2"></div>
+
+      <div class="menu-item px-3">
+        <div class="menu-content px-3">
+          <label
+            class="form-check form-switch form-check-custom form-check-solid"
+          >
+            <input
+              class="form-check-input w-30px h-20px"
+              type="checkbox"
+              value="1"
+              defaultChecked="{true}"
+              name="notifications"
+            />
+            <span class="form-check-label text-muted fs-7">Notifications</span>
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="menu-item px-5">
+    <a class="menu-link px-5 cursor-pointer" placement="top-start" ngbTooltip="Coming soon">My Statements</a>
+  </div>
+
+  <div class="separator my-2"></div>
+
+  <div
+    class="menu-item px-5"
+    data-kt-menu-trigger="hover"
+    data-kt-menu-placement="left-start"
+    data-kt-menu-flip="bottom"
+  >
+    <a class="menu-link px-5 cursor-pointer">
+      <span class="menu-title position-relative">
+        Language
+        <span
+          class="
+            fs-8
+            rounded
+            bg-light
+            px-3
+            py-2
+            position-absolute
+            translate-middle-y
+            top-50
+            end-0
+          "
+        >
+          {{ language.name }}{{ " " }}
+          <img
+            class="w-15px h-15px rounded-1 ms-2"
+            [src]="language.flag"
+            alt="metronic"
+          />
+        </span>
+      </span>
+    </a>
+
+    <div class="menu-sub menu-sub-dropdown w-175px py-4">
+      <div
+        *ngFor="let l of langs"
+        class="menu-item px-3 cursor-pointer"
+        (click)="selectLanguage(l.lang)"
+      >
+        <a
+          class="menu-link d-flex px-5"
+          [ngClass]="l.lang === language.lang ? 'active' : ''"
+        >
+          <span class="symbol symbol-20px me-4">
+            <img class="rounded-1" [src]="l.flag" alt="metronic" />
+          </span>
+          {{ l.name }}
+        </a>
+      </div>
+    </div>
+  </div>
+
+  <div class="menu-item px-5 my-1">
+    <a routerLink="/crafted/account/settings" class="menu-link px-5">
+      Account Settings
+    </a>
+  </div>
+
+  <div class="menu-item px-5">
+    <a (click)="logout()" class="menu-link px-5 cursor-pointer"> Sign Out </a>
+  </div>
+</ng-container>

package/_metronic/partials/layout/extras/dropdown-inner/user-inner/user-inner.component.ts

@@ -0,0 +1,95 @@
+import { Component, HostBinding, OnDestroy, OnInit } from '@angular/core';
+import { Observable, Subscription } from 'rxjs';
+import { TranslationService } from '../../../../../../modules/i18n';
+import { AuthService, UserType } from '../../../../../../modules/auth';
+
+@Component({
+  selector: 'app-user-inner',
+  templateUrl: './user-inner.component.html',
+})
+export class UserInnerComponent implements OnInit, OnDestroy {
+  @HostBinding('class')
+  class = `menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg menu-state-primary fw-bold py-4 fs-6 w-275px`;
+  @HostBinding('attr.data-kt-menu') dataKtMenu = 'true';
+
+  language: LanguageFlag;
+  user$: Observable<UserType>;
+  langs = languages;
+  private unsubscribe: Subscription[] = [];
+
+  constructor(
+    private auth: AuthService,
+    private translationService: TranslationService
+  ) {}
+
+  ngOnInit(): void {
+    this.user$ = this.auth.currentUserSubject.asObservable();
+    this.setLanguage(this.translationService.getSelectedLanguage());
+  }
+
+  logout() {
+    this.auth.logout();
+    document.location.reload();
+  }
+
+  selectLanguage(lang: string) {
+    this.translationService.setLanguage(lang);
+    this.setLanguage(lang);
+    // document.location.reload();
+  }
+
+  setLanguage(lang: string) {
+    this.langs.forEach((language: LanguageFlag) => {
+      if (language.lang === lang) {
+        language.active = true;
+        this.language = language;
+      } else {
+        language.active = false;
+      }
+    });
+  }
+
+  ngOnDestroy() {
+    this.unsubscribe.forEach((sb) => sb.unsubscribe());
+  }
+}
+
+interface LanguageFlag {
+  lang: string;
+  name: string;
+  flag: string;
+  active?: boolean;
+}
+
+const languages = [
+  {
+    lang: 'en',
+    name: 'English',
+    flag: './assets/media/flags/united-states.svg',
+  },
+  {
+    lang: 'zh',
+    name: 'Mandarin',
+    flag: './assets/media/flags/china.svg',
+  },
+  {
+    lang: 'es',
+    name: 'Spanish',
+    flag: './assets/media/flags/spain.svg',
+  },
+  {
+    lang: 'ja',
+    name: 'Japanese',
+    flag: './assets/media/flags/japan.svg',
+  },
+  {
+    lang: 'de',
+    name: 'German',
+    flag: './assets/media/flags/germany.svg',
+  },
+  {
+    lang: 'fr',
+    name: 'French',
+    flag: './assets/media/flags/france.svg',
+  },
+];

package/_metronic/partials/layout/extras/extras.module.ts

@@ -0,0 +1,41 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {RouterModule} from '@angular/router';
+import {InlineSVGModule} from 'ng-inline-svg-2';
+import {NotificationsInnerComponent} from './dropdown-inner/notifications-inner/notifications-inner.component';
+import {QuickLinksInnerComponent} from './dropdown-inner/quick-links-inner/quick-links-inner.component';
+import {UserInnerComponent} from './dropdown-inner/user-inner/user-inner.component';
+import {LayoutScrollTopComponent} from './scroll-top/scroll-top.component';
+import {TranslationModule} from '../../../../modules/i18n';
+import {SearchResultInnerComponent} from "./dropdown-inner/search-result-inner/search-result-inner.component";
+import {NgbTooltipModule} from "@ng-bootstrap/ng-bootstrap";
+import {FormsModule} from "@angular/forms";
+import { SharedModule } from "../../../shared/shared.module";
+
+@NgModule({
+  declarations: [
+    NotificationsInnerComponent,
+    QuickLinksInnerComponent,
+    SearchResultInnerComponent,
+    UserInnerComponent,
+    LayoutScrollTopComponent,
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    InlineSVGModule,
+    RouterModule,
+    TranslationModule,
+    NgbTooltipModule,
+    SharedModule
+  ],
+  exports: [
+    NotificationsInnerComponent,
+    QuickLinksInnerComponent,
+    SearchResultInnerComponent,
+    UserInnerComponent,
+    LayoutScrollTopComponent,
+  ],
+})
+export class ExtrasModule {
+}

package/_metronic/partials/layout/extras/scroll-top/scroll-top.component.html

@@ -0,0 +1 @@
+<app-keenicon name="arrow-up" class=""></app-keenicon>

package/_metronic/partials/layout/extras/scroll-top/scroll-top.component.ts

@@ -0,0 +1,75 @@
+import { Component, OnInit, OnDestroy, HostBinding } from '@angular/core';
+import { NavigationCancel, NavigationEnd, Router } from '@angular/router';
+import { Subscription } from 'rxjs';
+import {
+  StickyComponent,
+  ScrollTopComponent,
+  MenuComponent,
+  ToggleComponent,
+  DrawerComponent,
+} from '../../../../kt/components';
+
+@Component({
+  selector: 'app-scroll-top',
+  templateUrl: './scroll-top.component.html',
+})
+export class LayoutScrollTopComponent implements OnInit, OnDestroy {
+  @HostBinding('class') class = 'kt_scrolltop';
+  @HostBinding('id') id = 'scrolltop';
+  @HostBinding('attr.data-kt-scrolltop') dataKtScrolltop = 'true';
+
+  private unsubscribe: Subscription[] = [];
+  constructor(private router: Router) {}
+
+  ngOnInit(): void {
+    this.routingChanges();
+  }
+
+  routingChanges() {
+    const routerSubscription = this.router.events.subscribe((event) => {
+      if (event instanceof NavigationEnd || event instanceof NavigationCancel) {
+        this.pluginsReinitialization();
+        this.updateHeaderSticky();
+        setTimeout(() => {
+          this.scrollTop();
+        }, 0);
+      }
+    });
+    this.unsubscribe.push(routerSubscription);
+  }
+
+  updateHeaderSticky() {
+    const stickyHeader = document.body.querySelectorAll(
+      `[data-kt-sticky-name="header"]`
+    );
+    if (stickyHeader && stickyHeader.length > 0) {
+      const sticky = StickyComponent.getInstance(
+        stickyHeader[0] as HTMLElement
+      );
+      if (sticky) {
+        sticky.update();
+      }
+    }
+  }
+
+  scrollTop() {
+    ScrollTopComponent.goTop();
+  }
+
+  pluginsReinitialization() {
+    setTimeout(() => {
+      // ScrollTopComponent.reinitialization()
+      MenuComponent.reinitialization();
+      StickyComponent.reInitialization();
+      setTimeout(() => {
+        ToggleComponent.reinitialization();
+        DrawerComponent.reinitialization();
+        // ScrollComponent.reinitialization()
+      }, 70);
+    }, 140);
+  }
+
+  ngOnDestroy() {
+    this.unsubscribe.forEach((sb) => sb.unsubscribe());
+  }
+}

package/_metronic/partials/layout/modals/invite-users-modal/invite-users-modal.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-invite-users-modal',
+  templateUrl: './invite-users-modal.component.html',
+})
+export class InviteUsersModalComponent {
+  constructor() {}
+}

package/_metronic/partials/layout/modals/main-modal/main-modal.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-main-modal',
+  templateUrl: './main-modal.component.html',
+})
+export class MainModalComponent {
+  constructor() {}
+}

package/_metronic/partials/layout/modals/modal/modal.component.html

@@ -0,0 +1,31 @@
+<ng-template #modal>
+  <div class="modal-content">
+    <div class="modal-header">
+      <!--begin::Modal title-->
+      <h2>{{ modalConfig.modalTitle }}</h2>
+      <!--end::Modal title-->
+      <!--begin::Close-->
+      <div class="btn btn-sm btn-icon btn-active-color-primary" (click)="dismiss()"
+        *ngIf="modalConfig.hideDismissButton === undefined || !modalConfig.hideDismissButton()">
+        <app-keenicon name="cross" class="fs-1"></app-keenicon>
+        <!--end::Svg Icon-->
+      </div>
+      <!--end::Close-->
+    </div>
+    <div class="modal-body">
+      <ng-content></ng-content>
+    </div>
+    <div class="modal-footer">
+      <button type="button" class="btn btn-outline-secondary" (click)="dismiss()"
+        *ngIf="modalConfig.hideDismissButton === undefined || !modalConfig.hideDismissButton()"
+        [disabled]="modalConfig.disableDismissButton !== undefined && modalConfig.disableDismissButton()">
+        {{ modalConfig.dismissButtonLabel }}
+      </button>
+      <button type="button" class="btn btn-outline-primary" (click)="close()"
+        *ngIf="modalConfig.hideCloseButton === undefined || !modalConfig.hideCloseButton()"
+        [disabled]="modalConfig.disableCloseButton !== undefined && modalConfig.disableCloseButton()">
+        {{ modalConfig.closeButtonLabel }}
+      </button>
+    </div>
+  </div>
+</ng-template>

package/_metronic/partials/layout/modals/modal/modal.component.ts

@@ -0,0 +1,50 @@
+import { Component, Input, TemplateRef, ViewChild } from '@angular/core';
+import { ModalConfig } from '../modal.config';
+import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'app-modal',
+  templateUrl: './modal.component.html',
+})
+export class ModalComponent {
+  @Input() public modalConfig: ModalConfig;
+  @ViewChild('modal') private modalContent: TemplateRef<ModalComponent>;
+  private modalRef: NgbModalRef;
+
+  constructor(private modalService: NgbModal) {}
+
+  open(): Promise<boolean> {
+    return new Promise<boolean>((resolve) => {
+      this.modalRef = this.modalService.open(this.modalContent);
+      this.modalRef.result.then(resolve, resolve);
+    });
+  }
+
+  async close(): Promise<void> {
+    if (
+      this.modalConfig.shouldClose === undefined ||
+      (await this.modalConfig.shouldClose())
+    ) {
+      const result =
+        this.modalConfig.onClose === undefined ||
+        (await this.modalConfig.onClose());
+      this.modalRef.close(result);
+    }
+  }
+
+  async dismiss(): Promise<void> {
+    if (this.modalConfig.disableDismissButton !== undefined) {
+      return;
+    }
+
+    if (
+      this.modalConfig.shouldDismiss === undefined ||
+      (await this.modalConfig.shouldDismiss())
+    ) {
+      const result =
+        this.modalConfig.onDismiss === undefined ||
+        (await this.modalConfig.onDismiss());
+      this.modalRef.dismiss(result);
+    }
+  }
+}

package/_metronic/partials/layout/modals/modal.config.ts

@@ -0,0 +1,13 @@
+export interface ModalConfig {
+  modalTitle: string;
+  dismissButtonLabel?: string;
+  closeButtonLabel?: string;
+  shouldClose?(): Promise<boolean> | boolean;
+  shouldDismiss?(): Promise<boolean> | boolean;
+  onClose?(): Promise<boolean> | boolean;
+  onDismiss?(): Promise<boolean> | boolean;
+  disableCloseButton?(): boolean;
+  disableDismissButton?(): boolean;
+  hideCloseButton?(): boolean;
+  hideDismissButton?(): boolean;
+}

package/_metronic/partials/layout/modals/modals.module.ts

@@ -0,0 +1,34 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {RouterModule} from '@angular/router';
+import {InlineSVGModule} from 'ng-inline-svg-2';
+import {InviteUsersModalComponent} from './invite-users-modal/invite-users-modal.component';
+import {MainModalComponent} from './main-modal/main-modal.component';
+import {UpgradePlanModalComponent} from './upgrade-plan-modal/upgrade-plan-modal.component';
+import {ModalComponent} from './modal/modal.component';
+import {NgbModalModule} from '@ng-bootstrap/ng-bootstrap';
+import {SharedModule} from "../../../shared/shared.module";
+
+@NgModule({
+  declarations: [
+    InviteUsersModalComponent,
+    MainModalComponent,
+    UpgradePlanModalComponent,
+    ModalComponent,
+  ],
+  imports: [
+    CommonModule,
+    InlineSVGModule,
+    RouterModule,
+    NgbModalModule,
+    SharedModule,
+  ],
+  exports: [
+    InviteUsersModalComponent,
+    MainModalComponent,
+    UpgradePlanModalComponent,
+    ModalComponent,
+  ],
+})
+export class ModalsModule {
+}

package/_metronic/partials/layout/modals/upgrade-plan-modal/upgrade-plan-modal.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-upgrade-plan-modal',
+  templateUrl: './upgrade-plan-modal.component.html',
+})
+export class UpgradePlanModalComponent {
+  constructor() {}
+}

package/_metronic/partials/layout/splash-screen/splash-screen.component.html

@@ -0,0 +1,14 @@
+<!-- splash screen -->
+<div #splashScreen id="splash-screen">
+  <img src="./assets/media/logos/default.svg" alt="Logo" />
+  <svg class="splash-spinner" viewBox="0 0 50 50">
+    <circle
+      class="path"
+      cx="25"
+      cy="25"
+      r="20"
+      fill="none"
+      stroke-width="5"
+    ></circle>
+  </svg>
+</div>

package/_metronic/partials/layout/splash-screen/splash-screen.component.scss

@@ -0,0 +1,57 @@
+#splash-screen {
+  position: absolute;
+  z-index: 1000;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  background-color: #f2f3f8;
+}
+
+#splash-screen img {
+  margin-left: calc(100vw - 100%);
+  margin-bottom: 30px;
+}
+
+#splash-screen.hidden {
+  opacity: 0;
+  visibility: hidden;
+}
+
+.splash-spinner {
+  animation: rotate 2s linear infinite;
+  margin-left: calc(100vw - 100%);
+  width: 50px;
+  height: 50px;
+}
+
+.splash-spinner .path {
+  stroke: #5d78ff;
+  stroke-linecap: round;
+  animation: dash 1.5s ease-in-out infinite;
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}

package/_metronic/partials/layout/splash-screen/splash-screen.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
+import { SplashScreenService } from './splash-screen.service';
+
+@Component({
+  selector: 'app-splash-screen',
+  templateUrl: './splash-screen.component.html',
+  styleUrls: ['./splash-screen.component.scss'],
+})
+export class SplashScreenComponent implements OnInit {
+  @ViewChild('splashScreen', { static: true }) splashScreen: ElementRef;
+
+  constructor(private splashScreenService: SplashScreenService) {}
+
+  ngOnInit(): void {
+    this.splashScreenService.init(this.splashScreen);
+  }
+}

package/_metronic/partials/layout/splash-screen/splash-screen.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SplashScreenComponent } from './splash-screen.component';
+
+@NgModule({
+  declarations: [SplashScreenComponent],
+  imports: [CommonModule],
+  exports: [SplashScreenComponent],
+})
+export class SplashScreenModule {}