add new icons ...

projects/x-framework-components/src/lib/assets/icon/svg/csv.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M230-360h120v-60H250v-120h100v-60H230q-17 0-28.5 11.5T190-560v160q0 17 11.5 28.5T230-360Zm156 0h120q17 0 28.5-11.5T546-400v-60q0-17-11.5-31.5T506-506h-60v-34h100v-60H426q-17 0-28.5 11.5T386-560v60q0 17 11.5 30.5T426-456h60v36H386v60Zm264 0h60l70-240h-60l-40 138-40-138h-60l70 240ZM160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h640v-480H160v480Zm0 0v-480 480Z"/></svg>

projects/x-framework-components/src/lib/assets/icon/svg/png.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M260-500v-40h40v40h-40Zm400 140h40q25 0 42.5-17.5T760-420v-60h-60v60h-40v-120h100q0-25-17.5-42.5T700-600h-40q-25 0-42.5 17.5T600-540v120q0 25 17.5 42.5T660-360Zm-460 0h60v-80h60q17 0 28.5-11.5T360-480v-80q0-17-11.5-28.5T320-600H200v240Zm200 0h60v-96l40 96h60v-240h-60v94l-40-94h-60v240ZM160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h640v-480H160v480Zm0 0v-480 480Zm0 0v-480 480Z"/></svg>

projects/x-framework-components/src/lib/assets/icon/svg/range_selection.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M120-120v-720h80v720h-80Zm640 0v-720h80v720h-80ZM280-440v-80h80v80h-80Zm160 0v-80h80v80h-80Zm160 0v-80h80v80h-80Z"/></svg>

projects/x-framework-components/src/lib/assets/icon/svg/x_axis.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="m320-160-56-57 103-103H80v-80h287L264-503l56-57 200 200-200 200Zm320-240L440-600l200-200 56 57-103 103h287v80H593l103 103-56 57Z"/></svg>

projects/x-framework-components/src/lib/assets/icon/svg/xy_axis.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="m136-80-56-56 264-264H160v-80h320v320h-80v-184L136-80Zm344-400v-320h80v184l264-264 56 56-264 264h184v80H480Z"/></svg>

projects/x-framework-components/src/lib/assets/icon/svg/y_axis.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M320-561h80v287l62-62 58 56-160 160-160-160 58-56 62 62v-287Zm320 160h-80v-287l-64 64-56-56 160-160 160 160-56 56-64-64v287Z"/></svg>

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

@@ -4,30 +4,30 @@ import {
   ElementRef,
   ChangeDetectionStrategy,
 } from '@angular/core';
+import {
+  nameof,
+  XMimeType,
+  downloadFile,
+  generateUuid,
+  downloadFileByUrl,
+  isNullOrUndefined,
+  isNullOrEmptyString,
+  downloadArrayBufferedFile,
+} from 'x-framework-core';
 import {
   isChartType,
   XChartAction,
   XChartOptions,
   XChartSeriesType,
-  XChartContainerComponent,
   XChartActionBarItem,
+  XChartContainerComponent,
 } from './x-chart.typings';
 import { Subscription } from 'rxjs';
 import ApexCharts from 'apexcharts';
 import {
-  downloadArrayBufferedFile,
-  downloadFile,
-  downloadFileByUrl,
-  generateUuid,
-  isNullOrEmptyString,
-  isNullOrUndefined,
-  nameof,
-  XMimeType,
-} from 'x-framework-core';
-import {
-  XActionBarActionFiredModel,
   XActionBarItem,
   XActionBarItemSlot,
+  XActionBarActionFiredModel,
 } from '../x-action-bar/x-action-bar.typings';
 import { XIconNames } from '../x-icon/x-icon.typings';
 
@@ -459,9 +459,9 @@ export class XChartComponent extends XChartContainerComponent {
       onlyIcon: true,
       disabled: this.uiDisabled,
       slot: this.ActionBarItemSlots.START,
+      icon: this.IconNames.range_selection,
       id: this.ActionBarItems.ZoomSelection,
       title: this.ResourceIDs.zoom_selection,
-      icon: this.IconNames.friendship_reject,
       iconColor: this.defaultActionBarItemColor,
     };
 
@@ -469,7 +469,7 @@ export class XChartComponent extends XChartContainerComponent {
     const defaultXAxisSelectionItem: XActionBarItem = {
       onlyIcon: true,
       disabled: this.uiDisabled,
-      icon: this.IconNames.x_axist,
+      icon: this.IconNames.x_axis,
       title: this.ResourceIDs.x_axis,
       id: this.ActionBarItems.XSelection,
       slot: this.ActionBarItemSlots.START,

projects/x-framework-components/src/lib/x-icon/x-icon.typings.ts

@@ -36,12 +36,14 @@ export enum XIconAction {
 export type XIconActionIdentifier = XIconAction | string;
 
 export interface XIconActionModel
-  extends XBaseActionModel<XIconActionIdentifier> {}
+  extends XBaseActionModel<XIconActionIdentifier> { }
 
 export enum XIconNames {
   tv = 'tv',
   ol = 'ol',
   ul = 'ul',
+  csv = 'csv',
+  png = 'png',
   job = 'job',
   add = 'add',
   sad = 'sad',
@@ -141,6 +143,9 @@ export enum XIconNames {
   flight = 'flight',
   memory = 'memory',
   replay = 'replay',
+  x_axis = 'x_axis',
+  y_axis = 'y_axis',
+  xy_axis = 'xy_axis',
   visible = 'visible',
   checked = 'checked',
   unliked = 'unliked',
@@ -353,6 +358,7 @@ export enum XIconNames {
   menu_horizontal = 'menu_horizontal',
   logo_javascript = 'logo_javascript',
   phone_forwarded = 'phone_forwarded',
+  range_selection = 'range_selection',
   string_resources = 'string_resources',
   chatbox_ellipses = 'chatbox_ellipses',
   checkmark_circle = 'checkmark_circle',
@@ -430,6 +436,8 @@ export const XProvidedIcons = {
   mop: 'mop',
   sad: 'sad',
   map: 'map',
+  csv: 'csv',
+  png: 'png',
   mail: 'mail',
   undo: 'undo',
   redo: 'redo',
@@ -509,12 +517,15 @@ export const XProvidedIcons = {
   flight: 'flight',
   memory: 'memory',
   replay: 'replay',
+  x_axis: 'x_axis',
+  y_axis: 'y_axis',
   unknown: 'attach',
   video: 'videocam',
   done: 'checkmark',
   logout: 'log-out',
   avatars: 'images',
   account: 'person',
+  xy_axis: 'xy_axis',
   invite: 'contract',
   archive: 'archive',
   toolbar: 'toolbar',
@@ -738,6 +749,7 @@ export const XProvidedIcons = {
   local_shipping: 'local_shipping',
   cast_connected: 'cast_connected',
   voice_chat_off: 'voice_chat_off',
+  range_selection: 'range_selection',
   logo_javascript: 'logo-javascript',
   phone_forwarded: 'phone_forwarded',
   menu_vertical: 'ellipsis-vertical',
@@ -791,6 +803,8 @@ export const XCustomIcons: string[] = [
   XIconNames.ol,
   XIconNames.ul,
   XIconNames.tv,
+  XIconNames.csv,
+  XIconNames.png,
   XIconNames.dns,
   XIconNames.dvr,
   XIconNames.fax,
@@ -840,6 +854,9 @@ export const XCustomIcons: string[] = [
   XIconNames.replay,
   XIconNames.expand,
   XIconNames.italic,
+  XIconNames.x_axis,
+  XIconNames.y_axis,
+  XIconNames.xy_axis,
   XIconNames.toolbar,
   XIconNames.devices,
   XIconNames.dialogs,
@@ -953,6 +970,7 @@ export const XCustomIcons: string[] = [
   XIconNames.cast_connected,
   XIconNames.voice_chat_off,
   XIconNames.phone_forwarded,
+  XIconNames.range_selection,
   XIconNames.document_scanner,
   XIconNames.splitscreen_left,
   XIconNames.close_fullscreen,
@@ -1025,8 +1043,7 @@ export interface IXIconContainer extends IXBaseContainer {
 })
 export class XIconContainer
   extends XBaseContainer
-  implements Readonly<IXIconContainer>
+  implements Readonly<IXIconContainer> {
-{
   //
   //#region Props ...
   readonly actionProvider: Subject<XIconActionModel> =
@@ -1057,8 +1074,7 @@ export class XIconContainer
 })
 export abstract class XIconContainerComponent
   extends XBaseContainerComponent
-  implements IXIconContainer
+  implements IXIconContainer {
-{
   //
   //#region Props ...
   //