@hitsoft/e-donusum 1.0.8 → 1.0.10

package/_metronic/kt/components/index.ts

@@ -0,0 +1,11 @@
+export * from './_CookieComponent'
+export * from './_DrawerComponent'
+export * from './_FeedbackComponent'
+export * from './_ScrollComponent'
+export * from './_ScrollTopComponent'
+export * from './_StepperComponent'
+export * from './_StickyComponent'
+export * from './_ToggleComponent'
+export * from './_PasswordMeterComponent'
+export * from './_SwapperComponent'
+export * from './MenuComponent'

package/_metronic/kt/index.ts

@@ -0,0 +1,3 @@
+export * as KTUtil from './_utils/index';
+export * as components from './components/index';
+export * as KTHelpers from './kt-helpers';

package/_metronic/kt/kt-helpers.ts

@@ -0,0 +1,12 @@
+import { DrawerComponent, MenuComponent, ScrollComponent, ToggleComponent } from "./components";
+
+const menuReinitialization = () => {
+  setTimeout(() => {
+    MenuComponent.reinitialization();
+    DrawerComponent.reinitialization();
+    ToggleComponent.reinitialization();
+    ScrollComponent.reinitialization();
+  }, 50);
+}
+
+export { menuReinitialization }

package/_metronic/kt/layout/ThemeMode.ts

@@ -0,0 +1,211 @@
+import {EventHandlerUtil} from '../_utils'
+
+type Mode = 'light' | 'dark' | 'system'
+
+class ThemeMode {
+  menu: HTMLElement | null = null
+  element: HTMLElement | null = null
+
+  private getParamName = (postfix: string): string => {
+    const ktName = document.body.hasAttribute('data-kt-name')
+    const name = ktName ? ktName + '_' : ''
+    return 'kt_' + name + 'theme_mode_' + postfix
+  }
+
+  public getMode = (): Mode => {
+    const modeParam: string = this.getParamName('value')
+    const menuMode: Mode | '' = this.getMenuMode()
+    const defaultMode = 'light'
+    if (!localStorage) {
+      return defaultMode
+    }
+
+    const ls = localStorage.getItem(modeParam)
+    if (ls) {
+      return ls as Mode
+    }
+
+    const dataTheme = this.element?.getAttribute('data-bs-theme')
+    if (dataTheme) {
+      return dataTheme as Mode
+    }
+
+    if (!menuMode) {
+      return defaultMode
+    }
+
+    if (menuMode === 'system') {
+      return this.getSystemMode()
+    }
+
+    return menuMode
+  }
+
+  public setMode = (mode: Mode, menuMode: Mode | ''): void => {
+    // Check input values
+    if (mode !== 'light' && mode !== 'dark') {
+      return
+    }
+
+    // Get param names
+    const modeParam: string = this.getParamName('value')
+    const menuModeParam: string = this.getParamName('menu')
+
+    // Reset mode if system mode was changed
+    if (menuMode === 'system') {
+      if (this.getSystemMode() !== mode) {
+        mode = this.getSystemMode()
+      }
+    }
+
+    // Check menu mode
+    if (!menuMode) {
+      menuMode = mode
+    }
+
+    // Read active menu mode value
+    const activeMenuItem: HTMLElement | null =
+      this.menu?.querySelector('[data-kt-element="mode"][data-kt-value="' + menuMode + '"]') || null
+
+    // Enable switching state
+		this.element?.setAttribute("data-kt-theme-mode-switching", "true");
+
+    // Set mode to the target element
+    this.element?.setAttribute('data-bs-theme', mode);
+
+    // Disable switching state
+    const self = this;
+		setTimeout(function() {
+			self.element?.removeAttribute("data-kt-theme-mode-switching");
+		}, 300);
+
+    // Store mode value in storage
+    if (localStorage) {
+      localStorage.setItem(modeParam, mode)
+    }
+
+    // Set active menu item
+    if (activeMenuItem && localStorage) {
+      localStorage.setItem(menuModeParam, menuMode)
+      this.setActiveMenuItem(activeMenuItem)
+    }
+
+    // Flip images
+    this.flipImages()
+  }
+
+  public getMenuMode = (): Mode | '' => {
+    const menuModeParam = this.getParamName('menu')
+    const menuItem = this.menu?.querySelector('.active[data-kt-element="mode"]')
+    const dataKTValue = menuItem?.getAttribute('data-kt-value')
+    if (dataKTValue) {
+      return dataKTValue as Mode
+    }
+
+    if (!menuModeParam) {
+      return ''
+    }
+
+    const ls = localStorage ? localStorage.getItem(menuModeParam) : null
+    return (ls as Mode) || ''
+  }
+
+  public getSystemMode = (): Mode => {
+    return window.matchMedia('(prefers-color-scheme: dark)') ? 'dark' : 'light'
+  }
+
+  private initMode = (): void => {
+    this.setMode(this.getMode(), this.getMenuMode())
+    if (this.element) {
+      EventHandlerUtil.trigger(this.element, 'kt.thememode.init')
+    }
+  }
+
+  private getActiveMenuItem = (): HTMLElement | null => {
+    return (
+      this.menu?.querySelector(
+        '[data-kt-element="mode"][data-kt-value="' + this.getMenuMode() + '"]'
+      ) || null
+    )
+  }
+
+  private setActiveMenuItem = (item: HTMLElement): void => {
+    const menuModeParam = this.getParamName('menu')
+    const menuMode = item.getAttribute('data-kt-value')
+    const activeItem = this.menu?.querySelector('.active[data-kt-element="mode"]')
+    if (activeItem) {
+      activeItem.classList.remove('active')
+    }
+
+    item.classList.add('active')
+    if (localStorage && menuMode && menuModeParam) {
+      localStorage.setItem(menuModeParam, menuMode)
+    }
+  }
+
+  private handleMenu = (): void => {
+    this.menu
+      ?.querySelectorAll<HTMLElement>('[data-kt-element="mode"]')
+      ?.forEach((item: HTMLElement) => {
+        item.addEventListener('click', (e) => {
+          e.preventDefault()
+
+          const menuMode: string | null = item.getAttribute('data-kt-value')
+          const mode = menuMode === 'system' ? this.getSystemMode() : menuMode
+
+          if (mode) {
+            this.setMode(mode as Mode, menuMode as Mode | '')
+          }
+        })
+      })
+  }
+
+  public flipImages = () => {
+    document.querySelectorAll<HTMLElement>('[data-kt-img-dark]')?.forEach((item: HTMLElement) => {
+      if (item.tagName === 'IMG') {
+        if (this.getMode() === 'dark' && item.hasAttribute('data-kt-img-dark')) {
+          item.setAttribute('data-kt-img-light', item.getAttribute('src') || '')
+          item.setAttribute('src', item.getAttribute('data-kt-img-dark') || '')
+        } else if (this.getMode() === 'light' && item.hasAttribute('data-kt-img-light')) {
+          item.setAttribute('data-kt-img-dark', item.getAttribute('src') || '')
+          item.setAttribute('src', item.getAttribute('data-kt-img-light') || '')
+        }
+      } else {
+        if (this.getMode() === 'dark' && item.hasAttribute('data-kt-img-dark')) {
+          item.setAttribute('data-kt-img-light', item.getAttribute('src') || '')
+          item.style.backgroundImage = "url('" + item.getAttribute('data-kt-img-dark') + "')"
+        } else if (this.getMode() === 'light' && item.hasAttribute('data-kt-img-light')) {
+          item.setAttribute('data-kt-img-dark', item.getAttribute('src') || '')
+          item.style.backgroundImage = "url('" + item.getAttribute('data-kt-img-light') + "')"
+        }
+      }
+    })
+  }
+
+  public on = (name: string, hander: Function) => {
+    if (this.element) {
+      return EventHandlerUtil.on(this.element, name, hander)
+    }
+  }
+
+  public off = (name: string, handlerId: string) => {
+    if (this.element) {
+      return EventHandlerUtil.off(this.element, name, handlerId)
+    }
+  }
+
+  public init = () => {
+    this.menu = document.querySelector<HTMLElement>('[data-kt-element="theme-mode-menu"]')
+    this.element = document.documentElement
+
+    this.initMode()
+
+    if (this.menu) {
+      this.handleMenu()
+    }
+  }
+}
+
+const ThemeModeComponent = new ThemeMode()
+// Initialize app on document ready => ThemeModeComponent.init()
+export {ThemeModeComponent}

package/_metronic/kt/layout/index.ts

@@ -0,0 +1 @@
+export * from './ThemeMode'

package/_metronic/layout/components/content/content.component.html

@@ -0,0 +1,12 @@
+<ng-container *ngIf="appContentContiner">
+  <!--begin::Content container-->
+  <div id="kt_app_content_container" class="app-container"
+    [ngClass]="appContentContainerClass + ' ' + contentContainerCSSClass"
+    [ngClass]="{'container-xxl': appContentContiner === 'fixed', 'container-fluid': appContentContiner === 'fluid'}">
+    <router-outlet></router-outlet>
+  </div>
+  <!--end::Content container-->
+</ng-container>
+<ng-container *ngIf="!appContentContiner">
+  <router-outlet></router-outlet>
+</ng-container>

package/_metronic/layout/components/content/content.component.ts

@@ -0,0 +1,35 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { NavigationCancel, NavigationEnd, Router } from '@angular/router';
+import { Subscription } from 'rxjs/internal/Subscription';
+// import { DrawerComponent } from '../../../kt/components';
+@Component({
+  selector: 'app-content',
+  templateUrl: './content.component.html',
+  styleUrls: ['./content.component.scss'],
+})
+export class ContentComponent implements OnInit, OnDestroy {
+  @Input() contentContainerCSSClass: string = '';
+  @Input() appContentContiner?: 'fixed' | 'fluid';
+  @Input() appContentContainerClass: string = '';
+
+  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) {
+        // DrawerComponent.hideAll();
+      }
+    });
+    this.unsubscribe.push(routerSubscription);
+  }
+
+  ngOnDestroy() {
+    this.unsubscribe.forEach((sb) => sb.unsubscribe());
+  }
+}

package/_metronic/layout/components/footer/footer.component.html

@@ -0,0 +1,32 @@
+<ng-container *ngIf="appFooterContainerCSSClass">
+  <!--begin::Footer container-->
+  <div class="app-container" [ngClass]="appFooterContainerCSSClass">
+    <ng-container *ngTemplateOutlet="footerView"></ng-container>
+  </div>
+  <!--end::Footer container-->
+</ng-container>
+
+<ng-container *ngIf="!appFooterContainerCSSClass">
+  <ng-container *ngTemplateOutlet="footerView"></ng-container>
+</ng-container>
+
+<ng-template #footerView>
+  <!--begin::Copyright-->
+  <div class="text-gray-900 order-2 order-md-1">
+    <span class="text-muted fw-semibold me-1">{{currentDateStr}}&copy;</span>
+    <a href="https://keenthemes.com/" target="_blank" class="text-gray-800 text-hover-primary">Keenthemes</a>
+  </div>
+  <!--end::Copyright-->
+
+  <!--begin::Menu-->
+  <ul class="menu menu-gray-600 menu-hover-primary fw-semibold order-1">
+    <li class="menu-item"><a href="https://keenthemes.com/" target="_blank" class="menu-link px-2">About</a></li>
+
+    <li class="menu-item"><a href="https://devs.keenthemes.com/" target="_blank" class="menu-link px-2">Support</a></li>
+
+    <li class="menu-item"><a href="https://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469"
+        target="_blank" class="menu-link px-2">Purchase</a></li>
+  </ul>
+  <!--end::Menu-->
+
+</ng-template>

package/_metronic/layout/components/footer/footer.component.spec.ts

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

package/_metronic/layout/components/footer/footer.component.ts

@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-footer',
+  templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.scss'],
+})
+export class FooterComponent {
+  @Input() appFooterContainerCSSClass: string = '';
+
+  currentDateStr: string = new Date().getFullYear().toString();
+  constructor() {}
+}