first implementation of x-chart component ...

projects/x-framework-components/src/lib/x-chart/x-chart.component.html

@@ -0,0 +1,44 @@
+<!-- Component Template -->
+<ng-container *ngIf="getValue(wrapWithCard) | async; else componentsRef">
+  <x-card
+    class="x-card"
+    [showActions]="true"
+    [color]="getValue(cardColor) | async"
+    [ngClass]="getValue(cssClass) | async"
+    [isInPage]="getValue(isInPage) | async"
+    [showHeader]="
+      (notEmptyValue(cardTitle) | async) ||
+      (notEmptyValue(cardSubTitle) | async)
+    "
+    [subTitle]="getResourceValue(cardSubTitle)"
+    [title]="getResourceValue(cardTitle) | async"
+    [showFooter]="getValue(cardShowFooter) | async"
+    [showActions]="getValue(cardShowActions) | async"
+    [foregroundColor]="getValue(cardForegroundColor) | async"
+  >
+    <!-- Content -->
+    <ng-container *ngTemplateOutlet="componentsRef"></ng-container>
+
+    <!-- Actions -->
+    <div class="x-actions" [ngClass]="getValue(cssClass) | async" actions>
+      <ng-content select="[actions]"></ng-content>
+    </div>
+
+    <!-- Footer -->
+    <div footer *ngIf="getValue(cardShowFooter) | async">
+      <ng-content select="[footer]"></ng-content>
+    </div>
+  </x-card>
+</ng-container>
+
+<!-- Component's itSelf Template -->
+<ng-template #componentsRef>
+  <!-- Component Box ... -->
+  <div
+    class="x-chart x-wrapper"
+    [class.mobile]="isMobileUi$ | async"
+    [ngClass]="getValue(cssClass) | async"
+  >
+    <div #chartContainer class="x-chart-container"></div>
+  </div>
+</ng-template>