@hitsoft/e-donusum 1.0.5

package/_metronic/partials/content/widgets/tiles/tiles-widget1/tiles-widget1.component.ts

@@ -0,0 +1,202 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { LayoutService } from '../../../../../layout';
+
+@Component({
+  selector: 'app-tiles-widget1',
+  templateUrl: './tiles-widget1.component.html',
+})
+export class TilesWidget1Component implements OnInit {
+  @Input() cssClass = '';
+  @Input() chartColor = 'primary';
+  chartOptions: any = {};
+  fontFamily = '';
+  colorsGrayGray500 = '';
+  colorsGrayGray200 = '';
+  colorsGrayGray300 = '';
+  colorsThemeBaseDanger = '';
+  colorsThemeBaseColor = '';
+  colorsThemeLightColor = '';
+
+  constructor(private layout: LayoutService) {}
+
+  setupLayoutProps() {
+    this.fontFamily = this.layout.getProp('js.fontFamily') as string;
+    this.colorsGrayGray500 = this.layout.getProp(
+      'js.colors.gray.gray500'
+    ) as string;
+    this.colorsGrayGray200 = this.layout.getProp(
+      'js.colors.gray.gray200'
+    ) as string;
+    this.colorsGrayGray300 = this.layout.getProp(
+      'js.colors.gray.gray300'
+    ) as string;
+    this.colorsThemeBaseDanger = this.layout.getProp(
+      'js.colors.theme.base.danger'
+    ) as string;
+    this.colorsThemeBaseColor = this.layout.getProp(
+      `js.colors.theme.base.${this.chartColor}`
+    ) as string;
+    this.colorsThemeLightColor = this.layout.getProp(
+      `js.colors.theme.light.${this.chartColor}`
+    ) as string;
+  }
+
+  ngOnInit(): void {
+    this.setupLayoutProps();
+    this.chartOptions = this.getChartOptions();
+  }
+
+  getChartOptions() {
+    const height = '120px';
+    return {
+      series: [
+        {
+          name: 'Net Profit',
+          data: [20, 22, 30, 28, 25, 26, 30, 28, 22, 24, 25, 35],
+        },
+      ],
+      chart: {
+        type: 'area',
+        height,
+        toolbar: {
+          show: false,
+        },
+        zoom: {
+          enabled: false,
+        },
+        sparkline: {
+          enabled: true,
+        },
+      },
+      plotOptions: {},
+      legend: {
+        show: false,
+      },
+      dataLabels: {
+        enabled: false,
+      },
+      fill: {
+        type: 'gradient',
+        opacity: 1,
+        gradient: {
+          type: 'vertical',
+          shadeIntensity: 0.55,
+          gradientToColors: undefined,
+          inverseColors: true,
+          opacityFrom: 1,
+          opacityTo: 0.2,
+          stops: [25, 50, 100],
+          colorStops: [],
+        },
+      },
+      stroke: {
+        curve: 'smooth',
+        show: true,
+        width: 3,
+        colors: [this.colorsThemeBaseColor],
+      },
+      xaxis: {
+        categories: [
+          'Jan',
+          'Feb',
+          'Mar',
+          'Apr',
+          'May',
+          'Jun',
+          'Jul',
+          'Aug',
+          'Sep',
+          'Oct',
+          'Nov',
+          'Dec',
+        ],
+        axisBorder: {
+          show: false,
+        },
+        axisTicks: {
+          show: false,
+        },
+        labels: {
+          show: false,
+          style: {
+            colors: this.colorsGrayGray500,
+            fontSize: '12px',
+            fontFamily: this.fontFamily,
+          },
+        },
+        crosshairs: {
+          show: false,
+          position: 'front',
+          stroke: {
+            color: this.colorsGrayGray300,
+            width: 1,
+            dashArray: 3,
+          },
+        },
+        tooltip: {
+          enabled: true,
+          formatter: undefined,
+          offsetY: 0,
+          style: {
+            fontSize: '12px',
+            fontFamily: this.fontFamily,
+          },
+        },
+      },
+      yaxis: {
+        min: 0,
+        max: 37,
+        labels: {
+          show: false,
+          style: {
+            colors: this.colorsGrayGray500,
+            fontSize: '12px',
+            fontFamily: this.fontFamily,
+          },
+        },
+      },
+      states: {
+        normal: {
+          filter: {
+            type: 'none',
+            value: 0,
+          },
+        },
+        hover: {
+          filter: {
+            type: 'none',
+            value: 0,
+          },
+        },
+        active: {
+          allowMultipleDataPointsSelection: false,
+          filter: {
+            type: 'none',
+            value: 0,
+          },
+        },
+      },
+      tooltip: {
+        style: {
+          fontSize: '12px',
+          fontFamily: this.fontFamily,
+        },
+        y: {
+          formatter: (val: number) => {
+            return `$ ${val} thousands`;
+          },
+        },
+      },
+      colors: [this.colorsThemeLightColor],
+      markers: {
+        colors: [this.colorsThemeLightColor],
+        strokeColor: [this.colorsThemeBaseColor],
+        strokeWidth: 3,
+      },
+      padding: {
+        top: 0,
+        bottom: 0,
+      },
+    };
+  }
+}

package/_metronic/partials/content/widgets/tiles/tiles-widget10/tiles-widget10.component.html

@@ -0,0 +1,27 @@
+<!--begin::Mixed Widget 10-->
+<div
+  class="card card-custom"
+  [ngClass]="cssClass"
+  [ngStyle]="{ height: widgetHeight }"
+>
+  <!--begin::Body-->
+  <div
+    class="
+      card-body
+      d-flex
+      align-items-center
+      justify-content-between
+      flex-wrap
+    "
+  >
+    <div class="mr-2">
+      <h3 class="font-weight-bolder">Create CRM Reports</h3>
+      <div class="text-gray-900-50 font-size-lg mt-2">
+        Generate the latest CRM Report
+      </div>
+    </div>
+    <a href="#" class="btn btn-primary font-weight-bold py-3 px-6">Start Now</a>
+  </div>
+  <!--end::Body-->
+</div>
+<!--end::Mixed Widget 10-->

package/_metronic/partials/content/widgets/tiles/tiles-widget10/tiles-widget10.component.ts

@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-tiles-widget10',
+  templateUrl: './tiles-widget10.component.html',
+})
+export class TilesWidget10Component {
+  @Input() cssClass = '';
+  @Input() widgetHeight = '130px';
+
+  constructor() {}
+}

package/_metronic/partials/content/widgets/tiles/tiles-widget11/tiles-widget11.component.html

@@ -0,0 +1,28 @@
+<!--begin::Tiles Widget 11-->
+<div
+  class="card card-custom bg-"
+  [ngClass]="cssClass"
+  [ngStyle]="{ height: widgetHeight }"
+>
+  <div class="card-body">
+    <span
+      [inlineSVG]="'./assets/icons/duotune/general/element-11'"
+      class="svg-icon fs-3x text-white ml-n2"
+    ></span>
+
+    <div
+      [ngClass]="textInverseCSSClass"
+      class="font-weight-bolder font-size-h2 mt-3"
+    >
+      790
+    </div>
+
+    <a
+      href="#"
+      [ngClass]="textInverseCSSClass"
+      class="font-weight-bold font-size-lg mt-1"
+      >New Products</a
+    >
+  </div>
+</div>
+<!--end::Tiles Widget 11-->

package/_metronic/partials/content/widgets/tiles/tiles-widget11/tiles-widget11.component.ts

@@ -0,0 +1,19 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-tiles-widget11',
+  templateUrl: './tiles-widget11.component.html',
+})
+export class TilesWidget11Component implements OnInit {
+  @Input() cssClass = '';
+  @Input() widgetHeight = '150px';
+  @Input() baseColor = 'success';
+  textInverseCSSClass = '';
+
+  constructor() {}
+
+  ngOnInit() {
+    this.cssClass = `bg-${this.baseColor} ${this.cssClass}`;
+    this.textInverseCSSClass = `text-inverse-${this.baseColor}`;
+  }
+}

package/_metronic/partials/content/widgets/tiles/tiles-widget12/tiles-widget12.component.html

@@ -0,0 +1,21 @@
+<!--begin::Tiles Widget 12-->
+<div
+  class="card card-custom"
+  [ngClass]="cssClass"
+  [ngStyle]="{ height: widgetHeight }"
+>
+  <div class="card-body">
+    <span
+      [inlineSVG]="'./assets/media/icons/duotune/finance/briefcase'"
+      class="svg-icon fs-3x"
+      [ngClass]="svgCSSClass"
+    ></span>
+    <div class="text-gray-900 font-weight-bolder font-size-h2 mt-3">8,600</div>
+    <a
+      href="#"
+      class="text-muted text-hover-primary font-weight-bold font-size-lg mt-1"
+      >New Customers</a
+    >
+  </div>
+</div>
+<!--end::Tiles Widget 12-->

package/_metronic/partials/content/widgets/tiles/tiles-widget12/tiles-widget12.component.ts

@@ -0,0 +1,18 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-tiles-widget12',
+  templateUrl: './tiles-widget12.component.html',
+})
+export class TilesWidget12Component implements OnInit {
+  @Input() cssClass = '';
+  @Input() widgetHeight = '150px';
+  @Input() iconColor = 'success';
+  svgCSSClass = '';
+
+  constructor() {}
+
+  ngOnInit() {
+    this.svgCSSClass = `svg-icon--${this.iconColor}`;
+  }
+}

package/_metronic/partials/content/widgets/tiles/tiles-widget13/tiles-widget13.component.html

@@ -0,0 +1,26 @@
+<!--begin::Tiles Widget 13-->
+<div
+  class="card card-custom bgi-no-repeat"
+  [ngClass]="cssClass"
+  [ngStyle]="{ height: widgetHeight }"
+  style="
+    background-color: #663259;
+    background-position: calc(100% + 0.5rem) 100%;
+    background-size: 100% auto;
+    background-image: url('./assets/media/svg/misc/taieri.svg');
+  "
+>
+  <!--begin::Body-->
+  <div class="card-body d-flex align-items-center">
+    <div>
+      <h3 class="text-white font-weight-bolder line-height-lg mb-5">
+        Create SaaS<br />Based Reports
+      </h3>
+      <a href="#" class="btn btn-success font-weight-bold px-6 py-3"
+        >Create Report</a
+      >
+    </div>
+  </div>
+  <!--end::Body-->
+</div>
+<!--end::Tiles Widget 13-->

package/_metronic/partials/content/widgets/tiles/tiles-widget13/tiles-widget13.component.ts

@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-tiles-widget13',
+  templateUrl: './tiles-widget13.component.html',
+})
+export class TilesWidget13Component {
+  @Input() cssClass = '';
+  @Input() widgetHeight = '225px';
+
+  constructor() {}
+}

package/_metronic/partials/content/widgets/tiles/tiles-widget14/tiles-widget14.component.html

@@ -0,0 +1,24 @@
+<!--begin::Mixed Widget 14-->
+<div
+  class="card card-custom bgi-no-repeat bgi-size-cover"
+  [ngClass]="cssClass"
+  style="background-image: url('./assets/media/stock/600x600/img-16.jpg')"
+>
+  <!--begin::Body-->
+  <div
+    class="card-body d-flex flex-column align-items-start justify-content-start"
+  >
+    <div class="p-1 flex-grow-1">
+      <h3 class="text-white font-weight-bolder line-height-lg mb-5">
+        Create Reports<br />With App
+      </h3>
+    </div>
+
+    <a class="btn btn-link btn-link-warning font-weight-bold cursor-pointer">
+      Create Report
+      <app-keenicon name="arrow-right" class=" ssvg-icon-lg text-warning"></app-keenicon>
+    </a>
+  </div>
+  <!--end::Body-->
+</div>
+<!--end::Mixed Widget 14-->

package/_metronic/partials/content/widgets/tiles/tiles-widget14/tiles-widget14.component.ts

@@ -0,0 +1,10 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-tiles-widget14',
+  templateUrl: './tiles-widget14.component.html',
+})
+export class TilesWidget14Component {
+  @Input() cssClass = '';
+  constructor() {}
+}

package/_metronic/partials/content/widgets/tiles/tiles-widget3/tiles-widget3.component.html

@@ -0,0 +1,23 @@
+<!--begin::Tiles Widget 3-->
+<div
+  class="card card-custom bgi-no-repeat bgi-no-repeat bgi-size-cover"
+  [ngClass]="cssClass"
+  [ngStyle]="{ height: widgetHeight }"
+  style="background-image: url('./assets/media/misc/bg-2.jpg')"
+>
+  <!--begin::Body-->
+  <div class="card-body d-flex flex-column">
+    <!--begin::Title-->
+    <a
+      class="
+        text-gray-900-75 text-hover-primary
+        font-weight-bolder font-size-h3
+        cursor-pointer
+      "
+      >Properties</a
+    >
+    <!--end::Title-->
+  </div>
+  <!--end::Body-->
+</div>
+<!--end::Tiles Widget 3-->

package/_metronic/partials/content/widgets/tiles/tiles-widget3/tiles-widget3.component.ts

@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-tiles-widget3',
+  templateUrl: './tiles-widget3.component.html',
+})
+export class TilesWidget3Component {
+  @Input() cssClass = '';
+  @Input() widgetHeight = '130px';
+
+  constructor() {}
+}