@hitsoft/e-donusum 1.0.5

package/_metronic/partials/content/widgets/_new/cards/cards-widget17/cards-widget17.component.ts

@@ -0,0 +1,89 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { getCSSVariableValue } from '../../../../../../kt/_utils';
+
+@Component({
+  selector: 'app-cards-widget17',
+  templateUrl: './cards-widget17.component.html',
+  styleUrls: ['./cards-widget17.component.scss'],
+})
+export class CardsWidget17Component implements OnInit {
+  chartOptions: any = {};
+
+  @Input() cssClass: string = '';
+  @Input() chartSize: number = 70;
+  @Input() chartLine: number = 11;
+  @Input() chartRotate?: number = 145;
+
+  constructor() {}
+
+  ngOnInit(): void {
+    setTimeout(() => {
+      initChart(this.chartSize, this.chartLine, this.chartRotate);
+    }, 10);
+  }
+}
+
+const initChart = function (
+  chartSize: number = 70,
+  chartLine: number = 11,
+  chartRotate: number = 145
+) {
+  const el = document.getElementById('kt_card_widget_17_chart');
+
+  if (!el) {
+    return;
+  }
+
+  var options = {
+    size: chartSize,
+    lineWidth: chartLine,
+    rotate: chartRotate,
+    //percent:  el.getAttribute('data-kt-percent') ,
+  };
+
+  const canvas = document.createElement('canvas');
+  const span = document.createElement('span');
+
+  // @ts-ignore
+  if (typeof G_vmlCanvasManager !== 'undefined') {
+    // @ts-ignore
+    G_vmlCanvasManager.initElement(canvas);
+  }
+
+  const ctx = canvas.getContext('2d');
+  canvas.width = canvas.height = options.size;
+
+  el.appendChild(span);
+  el.appendChild(canvas);
+
+  // @ts-ignore
+  ctx.translate(options.size / 2, options.size / 2); // change center
+  // @ts-ignore
+  ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); // rotate -90 deg
+
+  //imd = ctx.getImageData(0, 0, 240, 240);
+  const radius = (options.size - options.lineWidth) / 2;
+
+  const drawCircle = function (
+    color: string,
+    lineWidth: number,
+    percent: number
+  ) {
+    percent = Math.min(Math.max(0, percent || 1), 1);
+    if (!ctx) {
+      return;
+    }
+
+    ctx.beginPath();
+    ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
+    ctx.strokeStyle = color;
+    ctx.lineCap = 'round'; // butt, round or square
+    ctx.lineWidth = lineWidth;
+    ctx.stroke();
+  };
+
+  // Init
+  drawCircle('#E4E6EF', options.lineWidth, 100 / 100);
+  drawCircle(getCSSVariableValue('--bs-primary'), options.lineWidth, 100 / 150);
+  drawCircle(getCSSVariableValue('--bs-success'), options.lineWidth, 100 / 250);
+};

package/_metronic/partials/content/widgets/_new/cards/cards-widget18/cards-widget18.component.html

@@ -0,0 +1,154 @@
+<!--begin::Card widget 18-->
+<div class="card card-flush" [ngClass]="cssClass">
+  <!--begin::Body-->
+  <div class="card-body py-9">
+    <!--begin::Row-->
+    <div class="row gx-9 h-100">
+      <!--begin::Col-->
+      <div class="col-sm-6 mb-10 mb-sm-0">
+        <!--begin::Image-->
+        <div class="bgi-no-repeat bgi-position-center bgi-size-cover card-rounded min-h-400px min-h-sm-100 h-100"
+          [ngStyle]="{'background-size': '100% 100%', 'background-image': 'url(' + image + ')'}">
+        </div>
+        <!--end::Image-->
+      </div>
+      <!--end::Col-->
+
+      <!--begin::Col-->
+      <div class="col-sm-6">
+        <!--begin::Wrapper-->
+        <div class="d-flex flex-column h-100">
+          <!--begin::Header-->
+          <div class="mb-7">
+            <!--begin::Headin-->
+            <div class="d-flex flex-stack mb-6">
+              <!--begin::Title-->
+              <div class="flex-shrink-0 me-5">
+                <span class="text-gray-500 fs-7 fw-bold me-2 d-block lh-1 pb-1">Featured</span>
+
+                <span class="text-gray-800 fs-1 fw-bold">9 Degree</span>
+              </div>
+              <!--end::Title-->
+
+              <span class="badge badge-light-primary flex-shrink-0 align-self-center py-3 px-4 fs-7">In Process</span>
+            </div>
+            <!--end::Heading-->
+
+            <!--begin::Items-->
+            <div class="d-flex align-items-center flex-wrap d-grid gap-2">
+              <!--begin::Item-->
+              <div class="d-flex align-items-center me-5 me-xl-13">
+                <!--begin::Symbol-->
+                <div class="symbol symbol-30px symbol-circle me-3">
+                  <img src="./assets/media/avatars/300-3.jpg" class="" alt="" />
+                </div>
+                <!--end::Symbol-->
+
+                <!--begin::Info-->
+                <div class="m-0">
+                  <span class="fw-semibold text-gray-500 d-block fs-8">Manager</span>
+                  <a href="#" class="fw-bold text-gray-800 text-hover-primary fs-7">Robert Fox</a>
+                </div>
+                <!--end::Info-->
+              </div>
+              <!--end::Item-->
+
+              <!--begin::Item-->
+              <div class="d-flex align-items-center">
+                <!--begin::Symbol-->
+                <div class="symbol symbol-30px symbol-circle me-3">
+                  <span class="symbol-label bg-success">
+                    <app-keenicon name="abstract-41" class="fs-5 text-white"></app-keenicon>
+                  </span>
+                </div>
+                <!--end::Symbol-->
+
+                <!--begin::Info-->
+                <div class="m-0">
+                  <span class="fw-semibold text-gray-500 d-block fs-8">Budget</span>
+                  <span class="fw-bold text-gray-800 fs-7">$64.800</span>
+                </div>
+                <!--end::Info-->
+              </div>
+              <!--end::Item-->
+            </div>
+            <!--end::Items-->
+          </div>
+          <!--end::Header-->
+
+          <!--begin::Body-->
+          <div class="mb-6">
+            <!--begin::Text-->
+            <span class="fw-semibold text-gray-600 fs-6 mb-8 d-block">
+              Flat cartoony illustrations with vivid
+              unblended colors and asymmetrical beautiful purple hair lady
+            </span>
+            <!--end::Text-->
+
+            <!--begin::Stats-->
+            <div class="d-flex">
+              <!--begin::Stat-->
+              <div class="border border-gray-300 border-dashed rounded min-w-100px w-100 py-2 px-4 me-6 mb-3">
+                <!--begin::Date-->
+                <span class="fs-6 text-gray-700 fw-bold">Feb 6, 2021 </span>
+                <!--end::Date-->
+
+                <!--begin::Label-->
+                <div class="fw-semibold text-gray-500">Due Date</div>
+                <!--end::Label-->
+              </div>
+              <!--end::Stat-->
+
+              <!--begin::Stat-->
+              <div class="border border-gray-300 border-dashed rounded min-w-100px w-100 py-2 px-4 mb-3">
+                <!--begin::Number-->
+                <span class="fs-6 text-gray-700 fw-bold">$<span class="ms-n1" data-kt-countup="true"
+                    data-kt-countup-value="284,900.00">0</span></span>
+                <!--end::Number-->
+
+                <!--begin::Label-->
+                <div class="fw-semibold text-gray-500">Budget</div>
+                <!--end::Label-->
+              </div>
+              <!--end::Stat-->
+            </div>
+            <!--end::Stats-->
+          </div>
+          <!--end::Body-->
+
+          <!--begin::Footer-->
+          <div class="d-flex flex-stack mt-auto bd-highlight">
+            <!--begin::Users group-->
+            <div class="symbol-group symbol-hover flex-nowrap">
+              <div *ngFor="let card of cards" class="symbol symbol-35px symbol-circle" data-bs-toggle="tooltip"
+                [title]="card.name">
+                <ng-container *ngIf="card.src">
+                  <img alt="Pic" [src]="card.src" />
+                </ng-container>
+                <ng-container *ngIf="!card.src">
+                  <span class="symbol-label fw-bold"
+                    [ngClass]="'bg-' + card.state + ' ' + 'text-inverse-' + card.state">{{card.initials}}</span>
+
+                </ng-container>
+              </div>
+            </div>
+            <!--end::Users group-->
+
+            <!--begin::Actions-->
+            <a href="#" class="text-primary opacity-75-hover fs-6 fw-semibold">
+              View Project
+              <app-keenicon name="arr095.svg" class="fs-4 text-gray800 ms-1"></app-keenicon>
+            </a>
+            <!--end::Actions-->
+          </div>
+          <!--end::Footer-->
+        </div>
+        <!--end::Wrapper-->
+      </div>
+      <!--end::Col-->
+    </div>
+    <!--end::Row-->
+  </div>
+  <!--end::Body-->
+</div>
+<!--end::Card widget 18-->

package/_metronic/partials/content/widgets/_new/cards/cards-widget18/cards-widget18.component.spec.ts

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

package/_metronic/partials/content/widgets/_new/cards/cards-widget18/cards-widget18.component.ts

@@ -0,0 +1,28 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-cards-widget18',
+  templateUrl: './cards-widget18.component.html',
+  styleUrls: ['./cards-widget18.component.scss'],
+})
+export class CardsWidget18Component implements OnInit {
+  @Input() cssClass: string = '';
+  @Input() image: string = '';
+
+  cards: Array<{
+    name: string;
+    src?: string;
+    initials?: string;
+    state?: string;
+  }> = [];
+
+  constructor() {
+    this.cards = [
+      { name: 'Melody Macy', src: './assets/media/avatars/300-2.jpg' },
+      { name: 'Michael Eberon', src: './assets/media/avatars/300-3.jpg' },
+      { name: 'Susan Redwood', initials: 'S', state: 'primary' },
+    ];
+  }
+
+  ngOnInit(): void {}
+}

package/_metronic/partials/content/widgets/_new/cards/cards-widget20/cards-widget20.component.html

@@ -0,0 +1,40 @@
+<!--begin::Card widget 20-->
+<div class="card card-flush bgi-no-repeat bgi-size-contain bgi-position-x-end" [ngClass]="cssClass"
+  [ngStyle]="{'background-color': color, 'background-image': 'url(' + img + ')'}">
+  <!--begin::Header-->
+  <div class="card-header pt-5">
+    <!--begin::Title-->
+    <div class="card-title d-flex flex-column">
+      <!--begin::Amount-->
+      <span class="fs-2hx fw-bold text-white me-2 lh-1 ls-n2">69</span>
+      <!--end::Amount-->
+
+      <!--begin::Subtitle-->
+      <span class="text-white opacity-75 pt-1 fw-semibold fs-6">
+        {{description}}
+      </span>
+      <!--end::Subtitle-->
+    </div>
+    <!--end::Title-->
+  </div>
+  <!--end::Header-->
+
+  <!--begin::Card body-->
+  <div class="card-body d-flex align-items-end pt-0">
+    <!--begin::Progress-->
+    <div class="d-flex align-items-center flex-column mt-3 w-100">
+      <div class="d-flex justify-content-between fw-bold fs-6 text-white opacity-75 w-100 mt-auto mb-2">
+        <span>43 Pending</span>
+        <span>72%</span>
+      </div>
+
+      <div class="h-8px mx-3 w-100 bg-white bg-opacity-50 rounded">
+        <div class="bg-white rounded h-8px" role="progressbar" style="width: 72%;" aria-valuenow="50" aria-valuemin="0"
+          aria-valuemax="100"></div>
+      </div>
+    </div>
+    <!--end::Progress-->
+  </div>
+  <!--end::Card body-->
+</div>
+<!--end::Card widget 20-->

package/_metronic/partials/content/widgets/_new/cards/cards-widget20/cards-widget20.component.scss

@@ -0,0 +1,3 @@
+:host {
+  height: 50% !important;
+}

package/_metronic/partials/content/widgets/_new/cards/cards-widget20/cards-widget20.component.spec.ts

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

package/_metronic/partials/content/widgets/_new/cards/cards-widget20/cards-widget20.component.ts

@@ -0,0 +1,16 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-cards-widget20',
+  templateUrl: './cards-widget20.component.html',
+  styleUrls: ['./cards-widget20.component.scss'],
+})
+export class CardsWidget20Component implements OnInit {
+  @Input() cssClass: string = '';
+  @Input() description: string = '';
+  @Input() color: string = '';
+  @Input() img: string = '';
+  constructor() {}
+
+  ngOnInit(): void {}
+}

package/_metronic/partials/content/widgets/_new/cards/cards-widget7/cards-widget7.component.html

@@ -0,0 +1,47 @@
+<!--begin::Card widget 7-->
+<div class="card card-flush" [ngClass]="cssClass">
+  <!--begin::Header-->
+  <div class="card-header pt-5">
+    <!--begin::Title-->
+    <div class="card-title d-flex flex-column">
+      <!--begin::Amount-->
+      <span class="fs-2hx fw-bold text-gray-900 me-2 lh-1 ls-n2">{{stats}}</span>
+      <!--end::Amount-->
+
+      <!--begin::Subtitle-->
+      <span class="text-gray-500 pt-1 fw-semibold fs-6">{{description}}</span>
+      <!--end::Subtitle-->
+    </div>
+    <!--end::Title-->
+  </div>
+  <!--end::Header-->
+
+  <!--begin::Card body-->
+  <div class="card-body d-flex flex-column justify-content-end pe-0">
+    <!--begin::Title-->
+    <span class="fs-6 fw-bolder text-gray-800 d-block mb-2">Today’s Heroes</span>
+    <!--end::Title-->
+
+    <!--begin::Users group-->
+    <div class="symbol-group symbol-hover flex-nowrap">
+      <div *ngFor="let item of items" class="symbol symbol-35px symbol-circle" data-bs-toggle="tooltip"
+        [title]="item.name">
+        <ng-container *ngIf="item.src">
+          <img alt="Pic" [src]="item.src" />
+        </ng-container>
+        <ng-container *ngIf="!item.src">
+          <span class="symbol-label fw-bold"
+            [ngClass]="'bg-' + item.state + ' ' + 'text-inverse-' + item.state">{{item.initials}}</span>
+        </ng-container>
+
+      </div>
+      <a href="#" class="symbol symbol-35px symbol-circle">
+        <span class="symbol-label fs-8 fw-bold" [ngClass]="'bg-' + labelColor"
+          [ngClass]="'text-' + textColor">+42</span>
+      </a>
+    </div>
+    <!--end::Users group-->
+  </div>
+  <!--end::Card body-->
+</div>
+<!--end::Card widget 7-->

package/_metronic/partials/content/widgets/_new/cards/cards-widget7/cards-widget7.component.spec.ts

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

package/_metronic/partials/content/widgets/_new/cards/cards-widget7/cards-widget7.component.ts

@@ -0,0 +1,29 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-cards-widget7',
+  templateUrl: './cards-widget7.component.html',
+  styleUrls: ['./cards-widget7.component.scss'],
+})
+export class CardsWidget7Component implements OnInit {
+  @Input() cssClass: string = '';
+  @Input() icon: boolean = false;
+  @Input() stats: number = 357;
+  @Input() description: string = 'Professionals';
+  @Input() labelColor: string = 'dark';
+  @Input() textColor: string = 'gray-300';
+  items: Array<{ name: string; initials?: string; state?: string, src?: string }>;
+
+  constructor() {}
+
+  ngOnInit(): void {
+    this.items = [
+      { name: 'Alan Warden', initials: 'A', state: 'warning' },
+      { name: 'Michael Eberon', src: './assets/media/avatars/300-11.jpg' },
+      { name: 'Susan Redwood', initials: 'S', state: 'primary' },
+      { name: 'Melody Macy', src: './assets/media/avatars/300-2.jpg' },
+      { name: 'Perry Matthew', initials: 'P', state: 'danger' },
+      { name: 'Barry Walter', src: './assets/media/avatars/300-12.jpg' },
+    ];
+  }
+}