last ...

projects/x-framework-components/src/lib/classes/x-size.model..ts

@@ -0,0 +1,4 @@
+export interface XSizeModel {
+    width?: number;
+    height?: number;
+}

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

@@ -9,7 +9,7 @@
   [class.fullscreen]="getValue(isFullscreen) | async"
 >
   <!-- Card Header -->
-  <mat-card-header class="x-header" *ngIf="getValue(showHeader) | async">
+  <mat-card-header #cardHeader class="x-header" *ngIf="getValue(showHeader) | async">
     <!-- Avatar Image -->
     <section
       *ngIf="notEmptyValue(avatarUrl) | async"
@@ -57,6 +57,7 @@
   <!-- Card Image -->
   <img
     mat-card-image
+    #cardImage
     class="x-image"
     [src]="getValue(imageUrl) | async"
     *ngIf="notEmptyValue(imageUrl) | async"
@@ -64,18 +65,18 @@
   />
 
   <!-- Card Content -->
-  <mat-card-content class="x-content" *ngIf="getValue(showContent) | async">
+  <mat-card-content #cardContent class="x-content" *ngIf="getValue(showContent) | async">
     <ng-content></ng-content>
   </mat-card-content>
 
   <!-- Card Actions -->
-  <mat-card-actions class="x-actions" *ngIf="getValue(showActions) | async">
+  <mat-card-actions #cardActions class="x-actions" *ngIf="getValue(showActions) | async">
     <ng-content select="[actions]"></ng-content>
   </mat-card-actions>
 
   <!-- Card Footer -->
   <mat-card-footer
-    #footer
+    #cardFooter
     class="x-footer"
     *ngIf="getValue(showFooter) | async"
   >

projects/x-framework-components/src/lib/x-card/x-card.component.scss

@@ -19,7 +19,6 @@
 
   &:fullscreen {
     border-radius: 0;
-    background-color: var(--full-screen-bg, #ffffff);
     width: 100vw;
     height: 100vh;
 
@@ -54,7 +53,7 @@
   height: var(--height, inherit);
 }
 
-.x-card.page-card {
+.x-card.page-card:not(.fullscreen) {
   @include push-auto();
   @include applyWidthHeight();
   @include m-tb($d-l);

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

@@ -5,8 +5,18 @@ import {
 } from './x-card.typings';
 import { Subject, Subscription } from 'rxjs';
 import { concatMap, map } from 'rxjs/operators';
-import { nameof, isNullOrEmptyString } from 'x-framework-core';
-import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { XSizeModel } from '../classes/x-size.model.';
+import {
+  nameof,
+  isNullOrEmptyString,
+  isNullOrUndefined,
+} from 'x-framework-core';
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ElementRef,
+  ViewChild,
+} from '@angular/core';
 
 @Component({
   // tslint:disable-next-line:component-selector
@@ -22,22 +32,107 @@ export class XCardComponent extends XCardContainerComponent {
   private ACTION_PROVIDER_SUBSCRIPTION: Subscription;
 
   //
-  // Full Screen ...
-  private IS_FULLSCREEN: boolean = false;
-  public set isFullscreen(v: boolean) {
-    //
-    const isChanged = v != this.IS_FULLSCREEN;
+  //#region Card Elements ....
+  private CARD_IMAGE: ElementRef<HTMLElement> = undefined;
+  private CARD_HEADER: ElementRef<HTMLElement> = undefined;
+  private CARD_FOOTER: ElementRef<HTMLElement> = undefined;
+  private CARD_CONTENT: ElementRef<HTMLElement> = undefined;
+  private CARD_ACTIONS: ElementRef<HTMLElement> = undefined;
 
-    //
-    this.IS_FULLSCREEN = v;
+  @ViewChild('cardImage', { static: false })
+  set cardImage(v: ElementRef<HTMLElement>) {
+    this.CARD_IMAGE = v;
   }
-  public get isFullscreen() {
-    return this.IS_FULLSCREEN;
+
+  @ViewChild('cardHeader', { static: false })
+  set cardHeader(v: ElementRef<HTMLElement>) {
+    this.CARD_HEADER = v;
+  }
+
+  @ViewChild('cardFooter', { static: false })
+  set cardFooter(v: ElementRef<HTMLElement>) {
+    this.CARD_FOOTER = v;
+  }
+
+  @ViewChild('cardContent', { static: false })
+  set cardContent(v: ElementRef<HTMLElement>) {
+    this.CARD_CONTENT = v;
+  }
+
+  @ViewChild('cardActions', { static: false })
+  set cardActions(v: ElementRef<HTMLElement>) {
+    this.CARD_ACTIONS = v;
+  }
+
+  get cardImage() {
+    return this.CARD_IMAGE;
+  }
+
+  get cardHeader() {
+    return this.CARD_HEADER;
+  }
+
+  get cardFooter() {
+    return this.CARD_FOOTER;
+  }
+
+  get cardContent() {
+    return this.CARD_CONTENT;
+  }
+
+  get cardActions() {
+    return this.CARD_ACTIONS;
   }
   //#endregion
 
+  //
+  //#region Full Screen ...
+  //
+  private IS_FULLSCREEN: boolean = false;
+
+  set isFullscreen(v: boolean) {
+    //
+    const isChanged = v != this.IS_FULLSCREEN;
+    if (isChanged) {
+      //
+      this.actionProvider.next({
+        action: XCardAction.FullScreenToggled,
+        payload: v,
+      });
+    }
+
+    //
+    this.IS_FULLSCREEN = v;
+  }
+
+  get isFullscreen() {
+    return this.IS_FULLSCREEN;
+  }
+  //#endregion
+  //#endregion
+
   //
   //#region LifeCycles ...
+  onInit() {
+    super.onInit();
+
+    //
+    // Listen for fullscreen change events (handles ESC key and browser UI)
+    document.addEventListener('fullscreenchange', this.fullscreenChangeHandler);
+    document.addEventListener(
+      'webkitfullscreenchange',
+      this.fullscreenChangeHandler,
+    );
+    document.addEventListener(
+      'mozfullscreenchange',
+      this.fullscreenChangeHandler,
+    );
+    document.addEventListener(
+      'MSFullscreenChange',
+      this.fullscreenChangeHandler,
+    );
+  }
+
   onChange(changeKeys: string[]) {
     super.onChange(changeKeys);
 
@@ -58,6 +153,24 @@ export class XCardComponent extends XCardContainerComponent {
 
     //
     this.unregisterActionProvider();
+
+    //
+    document.removeEventListener(
+      'fullscreenchange',
+      this.fullscreenChangeHandler,
+    );
+    document.removeEventListener(
+      'webkitfullscreenchange',
+      this.fullscreenChangeHandler,
+    );
+    document.removeEventListener(
+      'mozfullscreenchange',
+      this.fullscreenChangeHandler,
+    );
+    document.removeEventListener(
+      'MSFullscreenChange',
+      this.fullscreenChangeHandler,
+    );
   }
 
   registerViewHandlers() {
@@ -149,6 +262,124 @@ export class XCardComponent extends XCardContainerComponent {
       await this.enterFullscreen();
     }
   }
+
+  //
+  //#region Size Calculating ...
+  public calculateImageSize() {
+    //
+    let result: XSizeModel = undefined;
+
+    //
+    // Validate ...
+    if (
+      isNullOrUndefined(this.CARD_IMAGE) ||
+      isNullOrUndefined(this.CARD_IMAGE.nativeElement)
+    ) {
+      return result;
+    }
+
+    //
+    result = {
+      width: this.CARD_IMAGE.nativeElement.offsetWidth,
+      height: this.CARD_IMAGE.nativeElement.offsetHeight,
+    };
+
+    //
+    return result;
+  }
+
+  public calculateHeaderSize() {
+    //
+    let result: XSizeModel = undefined;
+
+    //
+    // Validate ...
+    if (
+      isNullOrUndefined(this.CARD_HEADER) ||
+      isNullOrUndefined(this.CARD_HEADER.nativeElement)
+    ) {
+      return result;
+    }
+
+    //
+    result = {
+      width: this.CARD_HEADER.nativeElement.offsetWidth,
+      height: this.CARD_HEADER.nativeElement.offsetHeight,
+    };
+
+    //
+    return result;
+  }
+
+  public calculateFooterSize() {
+    //
+    let result: XSizeModel = undefined;
+
+    //
+    // Validate ...
+    if (
+      isNullOrUndefined(this.CARD_FOOTER) ||
+      isNullOrUndefined(this.CARD_FOOTER.nativeElement)
+    ) {
+      return result;
+    }
+
+    //
+    result = {
+      width: this.CARD_FOOTER.nativeElement.offsetWidth,
+      height: this.CARD_FOOTER.nativeElement.offsetHeight,
+    };
+
+    //
+    return result;
+  }
+
+  public calculateContentSize() {
+    //
+    let result: XSizeModel = undefined;
+
+    //
+    // Validate ...
+    if (
+      isNullOrUndefined(this.CARD_CONTENT) ||
+      isNullOrUndefined(this.CARD_CONTENT.nativeElement)
+    ) {
+      return result;
+    }
+
+    //
+    result = {
+      width: this.CARD_CONTENT.nativeElement.offsetWidth,
+      height: this.CARD_CONTENT.nativeElement.offsetHeight,
+    };
+
+    //
+    return result;
+  }
+
+  public calculateActionsSize() {
+    //
+    let result: XSizeModel = undefined;
+
+    //
+    // Validate ...
+    if (
+      isNullOrUndefined(this.CARD_ACTIONS) ||
+      isNullOrUndefined(this.CARD_ACTIONS.nativeElement)
+    ) {
+      return result;
+    }
+
+    //
+    result = {
+      width: this.CARD_ACTIONS.nativeElement.offsetWidth,
+      height: this.CARD_ACTIONS.nativeElement.offsetHeight,
+    };
+
+    //
+    return result;
+  }
+  //#endregion
   //#endregion
 
   //
@@ -211,6 +442,22 @@ export class XCardComponent extends XCardContainerComponent {
   }
   //#endregion
 
+  //
+  //#region Fullscreen ...
+  private fullscreenChangeHandler = () => {
+    //
+    const isFullscreen = !!(
+      document.fullscreenElement ||
+      (document as any).webkitFullscreenElement ||
+      (document as any).mozFullScreenElement ||
+      (document as any).msFullscreenElement
+    );
+
+    //
+    this.isFullscreen = isFullscreen;
+    this.detectChanges();
+  };
+
   private canUseFullscreen(): boolean {
     return !!(
       document.fullscreenEnabled ||
@@ -220,4 +467,5 @@ export class XCardComponent extends XCardContainerComponent {
     );
   }
   //#endregion
+  //#endregion
 }

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

@@ -33,16 +33,19 @@ import { X_FRAMEWORK_COMPONENTS_CONFIG } from '../tokens/x-injectable-tokens';
 import { XFrameworkComponentsConfig } from '../config/x-framework-components.config';
 
 export enum XCardAction {
+  //
   Refresh = 'refresh',
+  //
   ExitFullScreen = 'exit_full_screen',
   EnterFullScreen = 'enter_full_screen',
   ToggleFullScreen = 'toggle_full_screen',
+  //
+  FullScreenToggled = 'full_screen_toggled',
 }
 
 export type XCardActionIdentifier = XCardAction | string;
 
-export interface XCardActionModel
-  extends XBaseActionModel<XCardActionIdentifier> {}
+export interface XCardActionModel extends XBaseActionModel<XCardActionIdentifier> {}
 
 //
 //#region Container ...
@@ -190,7 +193,7 @@ export abstract class XCardContainerComponent
     public ruler: ViewportRuler,
     public zone: NgZone,
     public changeDetector: ChangeDetectorRef,
-    protected propertyProvider: XCardContainer
+    protected propertyProvider: XCardContainer,
   ) {
     super(
       config,
@@ -199,7 +202,7 @@ export abstract class XCardContainerComponent
       renderer,
       ruler,
       zone,
-      changeDetector
+      changeDetector,
     );
   }
   //#endregion
@@ -207,37 +210,37 @@ export abstract class XCardContainerComponent
   //
   //#region Abstract ...
   public extractProps(
-    container?: IXCardContainer
+    container?: IXCardContainer,
   ): Observable<IXCardContainer> {
     return forkJoin({
       //
       cssClass: this.getArrayValue(
-        container ? container.cssClass : this.cssClass
+        container ? container.cssClass : this.cssClass,
       ),
 
       //
       color: this.getValue(container ? container.color : this.color),
       foregroundColor: this.getValue(
-        container ? container.foregroundColor : this.foregroundColor
+        container ? container.foregroundColor : this.foregroundColor,
       ),
 
       //
       showHeader: this.getValue(
-        container ? container.showHeader : this.showHeader
+        container ? container.showHeader : this.showHeader,
       ),
       title: this.getValue(container ? container.title : this.title),
       subTitle: this.getValue(container ? container.subTitle : this.subTitle),
       avatarUrl: this.getValue(
-        container ? container.avatarUrl : this.avatarUrl
+        container ? container.avatarUrl : this.avatarUrl,
       ),
       avatarTemplate: this.getValue(
-        container ? container.avatarTemplate : this.avatarTemplate
+        container ? container.avatarTemplate : this.avatarTemplate,
       ),
 
       //
       imageUrl: this.getValue(container ? container.imageUrl : this.imageUrl),
       imageDescription: this.getValue(
-        container ? container.imageDescription : this.imageDescription
+        container ? container.imageDescription : this.imageDescription,
       ),
 
       //
@@ -245,13 +248,13 @@ export abstract class XCardContainerComponent
 
       //
       showContent: this.getValue(
-        container ? container.showContent : this.showContent
+        container ? container.showContent : this.showContent,
       ),
       showActions: this.getValue(
-        container ? container.showActions : this.showActions
+        container ? container.showActions : this.showActions,
       ),
       showFooter: this.getValue(
-        container ? container.showFooter : this.showFooter
+        container ? container.showFooter : this.showFooter,
       ),
     }).pipe(
       map((data) => {
@@ -264,7 +267,7 @@ export abstract class XCardContainerComponent
             ? container.actionProvider
             : this.actionProvider,
         };
-      })
+      }),
     );
   }
   //#endregion
@@ -288,8 +291,7 @@ type TXComponentCardContainer = {
 };
 
 export interface IXComponentCardContainer
-  extends TXComponentCardContainer,
-    IXBaseComponentContainer {
+  extends TXComponentCardContainer, IXBaseComponentContainer {
   isInPage: XStandardType<boolean>;
   wrapWithCard: XStandardType<boolean>;
 }
@@ -403,7 +405,7 @@ export abstract class XComponentCardContainerComponent
     public ruler: ViewportRuler,
     public zone: NgZone,
     public changeDetector: ChangeDetectorRef,
-    protected propertyProvider: XComponentCardContainer
+    protected propertyProvider: XComponentCardContainer,
   ) {
     super(
       config,
@@ -412,7 +414,7 @@ export abstract class XComponentCardContainerComponent
       renderer,
       ruler,
       zone,
-      changeDetector
+      changeDetector,
     );
   }
   //#endregion
@@ -420,34 +422,34 @@ export abstract class XComponentCardContainerComponent
   //
   //#region Abstract ...
   public extractProps(
-    container?: IXComponentCardContainer
+    container?: IXComponentCardContainer,
   ): Observable<IXComponentCardContainer> {
     return forkJoin({
       //
       isInPage: this.getValue(container ? container.isInPage : this.isInPage),
       wrapWithCard: this.getValue(
-        container ? container.wrapWithCard : this.wrapWithCard
+        container ? container.wrapWithCard : this.wrapWithCard,
       ),
       cardCssClass: this.getValue(
-        container ? container.cardCssClass : this.cardCssClass
+        container ? container.cardCssClass : this.cardCssClass,
       ),
       cardColor: this.getValue(
-        container ? container.cardColor : this.cardColor
+        container ? container.cardColor : this.cardColor,
       ),
       cardForegroundColor: this.getValue(
-        container ? container.cardForegroundColor : this.cardForegroundColor
+        container ? container.cardForegroundColor : this.cardForegroundColor,
       ),
       cardTitle: this.getValue(
-        container ? container.cardTitle : this.cardTitle
+        container ? container.cardTitle : this.cardTitle,
       ),
       cardSubTitle: this.getValue(
-        container ? container.cardSubTitle : this.cardSubTitle
+        container ? container.cardSubTitle : this.cardSubTitle,
       ),
       cardShowFooter: this.getValue(
-        container ? container.cardShowFooter : this.cardShowFooter
+        container ? container.cardShowFooter : this.cardShowFooter,
       ),
       cardShowActions: this.getValue(
-        container ? container.cardShowActions : this.cardShowActions
+        container ? container.cardShowActions : this.cardShowActions,
       ),
     }).pipe(
       map((data) => {
@@ -460,7 +462,7 @@ export abstract class XComponentCardContainerComponent
             ? container.cardActionProvider
             : this.cardActionProvider,
         };
-      })
+      }),
     );
   }
   //#endregion

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

@@ -1,8 +1,10 @@
 <!-- Component Template -->
 <ng-container *ngIf="getValue(wrapWithCard) | async; else componentsRef">
   <x-card
+    #chartCard
     class="x-card"
     [showActions]="true"
+    [actionProvider]="cardActionProvider"
     [color]="getValue(cardColor) | async"
     [ngClass]="getValue(cssClass) | async"
     [isInPage]="getValue(isInPage) | async"
@@ -41,6 +43,7 @@
   >
     <!-- Toolbar -->
     <x-action-bar
+      #chartActionBar
       [color]="actionBarColor"
       [cssClass]="actionBarCssClass"
       [actionProvider]="actionBarActionProvider"

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

@@ -13,6 +13,7 @@ import {
 import {
   XStandardType,
   isValueInEnum,
+  getXColorValue,
   XOneOrManyType,
   XColorIdentifier,
   XResourceIdentifier,
@@ -101,6 +102,41 @@ export type XChartXAxisAnnotations = XCahrtAxisBaseAnnotations & {
   x2?: null | number | string;
 };
 
+export type XChartMarkerAnnotations = {
+  size?: number;
+  fillColor?: string;
+  strokeColor?: string;
+  strokeWidth?: number;
+  shape?: string;
+  offsetX?: number;
+  offsetY?: number;
+  cssClass?: string;
+};
+
+export type XChartTooltipAnnotations = {
+  enabled?: boolean;
+  /**
+   * Static tooltip content (HTML allowed; an array is joined with line
+   * breaks). Falls back to `label.text` when omitted.
+   */
+  text?: string | string[];
+  /**
+   * Returns the tooltip markup (HTML). Takes precedence over `text`.
+   */
+  formatter?: (opts: {
+    annotation: XChartPointAnnotations;
+    seriesIndex?: number;
+    id?: number | string;
+    w: any;
+  }) => string;
+  /**
+   * Tooltip theme. Falls back to the global `tooltip.theme`.
+   */
+  theme?: 'light' | 'dark';
+  offsetX?: number;
+  offsetY?: number;
+};
+
 export type XChartPointAnnotations = {
   id?: number | string;
   x?: number | string;
@@ -115,16 +151,7 @@ export type XChartPointAnnotations = {
   mouseEnter?: (annotation: XChartPointAnnotations, e: MouseEvent) => void;
   mouseLeave?: (annotation: XChartPointAnnotations, e: MouseEvent) => void;
   click?: (annotation: XChartPointAnnotations, e: MouseEvent) => void;
-  marker?: {
-    size?: number;
-    fillColor?: string;
-    strokeColor?: string;
-    strokeWidth?: number;
-    shape?: string;
-    offsetX?: number;
-    offsetY?: number;
-    cssClass?: string;
-  };
+  marker?: XChartMarkerAnnotations;
   label?: XChartAnnotationLabel;
   image?: {
     path?: string;
@@ -137,29 +164,7 @@ export type XChartPointAnnotations = {
    * Show a hover tooltip over the annotation marker, like a regular data
    * point. Useful for surfacing more detail than fits in the label.
    */
-  tooltip?: {
-    enabled?: boolean;
-    /**
-     * Static tooltip content (HTML allowed; an array is joined with line
-     * breaks). Falls back to `label.text` when omitted.
-     */
-    text?: string | string[];
-    /**
-     * Returns the tooltip markup (HTML). Takes precedence over `text`.
-     */
-    formatter?: (opts: {
-      annotation: XChartPointAnnotations;
-      seriesIndex?: number;
-      id?: number | string;
-      w: any;
-    }) => string;
-    /**
-     * Tooltip theme. Falls back to the global `tooltip.theme`.
-     */
-    theme?: 'light' | 'dark';
-    offsetX?: number;
-    offsetY?: number;
-  };
+  tooltip?: XChartTooltipAnnotations;
   /**
    * Render arbitrary SVG markup at the annotation's position. Deprecated in
    * favor of `image`/`marker`, but still supported.
@@ -370,71 +375,71 @@ export type XChartAxisChartSeries = {
   zIndex?: number;
   parsing?: XChartParsing;
   data:
-    | (number | null)[]
-    | {
-        /**
-         * A category label, a timestamp, or a `Date`. On a `datetime` axis all
-         * three keep millisecond resolution.
-         */
-        x: string | number | Date;
-        /**
-         * A plain value for most charts. For `candlestick`/`boxPlot`, the
-         * summary array (`[O,H,L,C]` / `[min,Q1,median,Q3,max]`). For `violin`, an
-         * object carrying the precomputed density profile (`[value, weight]` pairs)
-         * plus the raw observations rendered as jitter. For a `scatter` strip plot
-         * (`plotOptions.scatter.jitter`), the array of observations in this category.
-         */
-        y:
-          | number
-          | null
-          | number[]
-          | { density: [number, number][]; points?: number[] };
-        /**
-         * Optional raw observations for a `boxPlot` data point, rendered as jitter
-         * dots when `plotOptions.boxPlot.points.show` is enabled.
-         */
-        points?: number[];
-        fill?: XChartFill;
-        fillColor?: string;
-        strokeColor?: string;
-        meta?: unknown;
-        /**
-         * A second metric that drives this point's COLOUR, independent of `y`
-         * which drives its size (`treemap`). See
-         * `plotOptions.treemap.colorScale.colorValue` to read a different key.
-         */
-        colorValue?: number;
-        /**
-         * Nested hierarchy: this point is a branch containing these children,
-         * to any depth (`treemap`, `sunburst`). A branch normally omits `y` and
-         * takes the sum of its children instead.
-         */
-        children?: XChartHierarchyNode[];
-        /**
-         * Drilldown target: the `id` of a `drilldown.series` entry. Clicking this
-         * point drills into that level. Requires the Drilldown feature.
-         */
-        drilldown?: string | number;
-        goals?: {
-          name?: string;
-          value: number;
-          strokeHeight?: number;
-          strokeWidth?: number;
-          strokeColor?: string;
-          strokeDashArray?: number;
-          strokeLineCap?: 'butt' | 'square' | 'round';
-        }[];
-        barHeightOffset?: number;
-        columnWidthOffset?: number;
-      }[]
-    | [number, number | null][]
-    | [number, (number | null)[]][]
-    | number[][]
-    // A `children` hierarchy for the partition charts, where a branch carries no
-    // value of its own. Listed before the catch-all so authors get completion on
-    // the node shape instead of falling through to `Record<string, any>`.
-    | XChartHierarchyNode[]
-    | Record<string, any>[];
+  | (number | null)[]
+  | {
+    /**
+     * A category label, a timestamp, or a `Date`. On a `datetime` axis all
+     * three keep millisecond resolution.
+     */
+    x: string | number | Date;
+    /**
+     * A plain value for most charts. For `candlestick`/`boxPlot`, the
+     * summary array (`[O,H,L,C]` / `[min,Q1,median,Q3,max]`). For `violin`, an
+     * object carrying the precomputed density profile (`[value, weight]` pairs)
+     * plus the raw observations rendered as jitter. For a `scatter` strip plot
+     * (`plotOptions.scatter.jitter`), the array of observations in this category.
+     */
+    y:
+    | number
+    | null
+    | number[]
+    | { density: [number, number][]; points?: number[] };
+    /**
+     * Optional raw observations for a `boxPlot` data point, rendered as jitter
+     * dots when `plotOptions.boxPlot.points.show` is enabled.
+     */
+    points?: number[];
+    fill?: XChartFill;
+    fillColor?: string;
+    strokeColor?: string;
+    meta?: unknown;
+    /**
+     * A second metric that drives this point's COLOUR, independent of `y`
+     * which drives its size (`treemap`). See
+     * `plotOptions.treemap.colorScale.colorValue` to read a different key.
+     */
+    colorValue?: number;
+    /**
+     * Nested hierarchy: this point is a branch containing these children,
+     * to any depth (`treemap`, `sunburst`). A branch normally omits `y` and
+     * takes the sum of its children instead.
+     */
+    children?: XChartHierarchyNode[];
+    /**
+     * Drilldown target: the `id` of a `drilldown.series` entry. Clicking this
+     * point drills into that level. Requires the Drilldown feature.
+     */
+    drilldown?: string | number;
+    goals?: {
+      name?: string;
+      value: number;
+      strokeHeight?: number;
+      strokeWidth?: number;
+      strokeColor?: string;
+      strokeDashArray?: number;
+      strokeLineCap?: 'butt' | 'square' | 'round';
+    }[];
+    barHeightOffset?: number;
+    columnWidthOffset?: number;
+  }[]
+  | [number, number | null][]
+  | [number, (number | null)[]][]
+  | number[][]
+  // A `children` hierarchy for the partition charts, where a branch carries no
+  // value of its own. Listed before the catch-all so authors get completion on
+  // the node shape instead of falling through to `Record<string, any>`.
+  | XChartHierarchyNode[]
+  | Record<string, any>[];
 }[];
 
 export type XChartNonAxisChartSeries = number[] | XChartAxisChartSeries;
@@ -931,11 +936,11 @@ export type XChartPlotOptions = {
        * property, or an accessor to compute one.
        */
       colorValue?:
-        | string
-        | ((
-            datum: any,
-            opts: { seriesIndex: number; dataPointIndex: number; w: any },
-          ) => number);
+      | string
+      | ((
+        datum: any,
+        opts: { seriesIndex: number; dataPointIndex: number; w: any },
+      ) => number);
       /**
        * Continuous interpolation between colour stops, for the metric above.
        * Active as soon as any datum carries a colour metric; `enabled: false`
@@ -1068,13 +1073,13 @@ export type XChartPlotOptions = {
      * 'custom': positions come from `positions`.
      */
     layout?:
-      | 'grouped'
-      | 'packed'
-      | 'columns'
-      | 'grid'
-      | 'scatter'
-      | 'arc'
-      | 'custom';
+    | 'grouped'
+    | 'packed'
+    | 'columns'
+    | 'grid'
+    | 'scatter'
+    | 'arc'
+    | 'custom';
     /**
      * `layout: 'custom'` only. The layout provider: either a function returning
      * plot-pixel positions, or the name of one registered with
@@ -2102,19 +2107,19 @@ export interface XChartDrilldown {
   /** Inline child levels referenced by data-point `drilldown` ids. */
   series?: XChartDrilldownSeries[];
   breadcrumb?:
-    | false
-    | {
-        show?: boolean;
-        position?: 'top-left' | 'top-right';
-        separator?: string;
-        rootLabel?: string;
-        offsetX?: number;
-        offsetY?: number;
-        formatter?(
-          label: string,
-          opts: { index: number; depth: number },
-        ): string;
-      };
+  | false
+  | {
+    show?: boolean;
+    position?: 'top-left' | 'top-right';
+    separator?: string;
+    rootLabel?: string;
+    offsetX?: number;
+    offsetY?: number;
+    formatter?(
+      label: string,
+      opts: { index: number; depth: number },
+    ): string;
+  };
   animation?: {
     enabled?: boolean;
     /**
@@ -2163,11 +2168,11 @@ export interface XChartDrilldown {
    * name, so the default ships no user-visible English.
    */
   loading?:
-    | false
-    | {
-        show?: boolean;
-        text?: string;
-      };
+  | false
+  | {
+    show?: boolean;
+    text?: string;
+  };
   /**
    * Cache levels resolved by `onDrillDown`, keyed by id, so drilling back down
    * a branch does not re-fetch. Default true. Clear it with the drilldown
@@ -2273,12 +2278,12 @@ export type XChartStates = {
 export type XChartStroke = {
   show?: boolean;
   curve?:
-    | 'smooth'
-    | 'straight'
-    | 'stepline'
-    | 'linestep'
-    | 'monotoneCubic'
-    | ('smooth' | 'straight' | 'stepline' | 'linestep' | 'monotoneCubic')[];
+  | 'smooth'
+  | 'straight'
+  | 'stepline'
+  | 'linestep'
+  | 'monotoneCubic'
+  | ('smooth' | 'straight' | 'stepline' | 'linestep' | 'monotoneCubic')[];
   lineCap?: 'butt' | 'square' | 'round';
   colors?: string[];
   width?: number | number[];
@@ -2329,11 +2334,11 @@ export type XChartTheme = {
   };
   accessibility?: {
     colorBlindMode?:
-      | 'deuteranopia'
-      | 'protanopia'
-      | 'tritanopia'
-      | 'highContrast'
-      | '';
+    | 'deuteranopia'
+    | 'protanopia'
+    | 'tritanopia'
+    | 'highContrast'
+    | '';
   };
 };
 
@@ -2362,14 +2367,14 @@ export type XChartTooltip = {
   inverseOrder?: boolean;
   arrow?: boolean;
   custom?:
-    | ((
-        opts: XChartTooltipCustomOpts,
-      ) => string | number | Element | { nodeName: string })
-    | Array<
-        (
-          opts: XChartTooltipCustomOpts,
-        ) => string | number | Element | { nodeName: string }
-      >;
+  | ((
+    opts: XChartTooltipCustomOpts,
+  ) => string | number | Element | { nodeName: string })
+  | Array<
+    (
+      opts: XChartTooltipCustomOpts,
+    ) => string | number | Element | { nodeName: string }
+  >;
   fillSeriesColor?: boolean;
   theme?: 'light' | 'dark';
   cssClass?: string;
@@ -2407,6 +2412,8 @@ export type XChartTooltip = {
   };
 };
 
+export type XChartColorType = Array<string | ((opts: XChartColorFormatterOpts) => string)>;
+
 export interface XChartOptions {
   annotations?: XChartAnnotations;
   chart?: XChart;
@@ -2415,7 +2422,7 @@ export interface XChartOptions {
    * named) or a function returning one per-datapoint. The list cycles when
    * there are more series than colors.
    */
-  colors?: Array<string | ((opts: XChartColorFormatterOpts) => string)>;
+  colors?: XChartColorType;
   dataLabels?: XChartDataLabels;
   /** Opt-in drilldown navigation. Requires `import 'apexcharts/features/drilldown'`. */
   drilldown?: XChartDrilldown;
@@ -2446,30 +2453,30 @@ export type XChart = {
   width?: string | number;
   height?: string | number;
   type?:
-    | 'line'
-    | 'area'
-    | 'bar'
-    | 'pie'
-    | 'donut'
-    | 'radialBar'
-    | 'scatter'
-    | 'bubble'
-    | 'heatmap'
-    | 'candlestick'
-    | 'boxPlot'
-    | 'violin'
-    | 'histogram'
-    | 'radar'
-    | 'polarArea'
-    | 'rangeBar'
-    | 'rangeArea'
-    | 'treemap'
-    | 'unit'
-    | 'waffle'
-    | 'sunburst'
-    | 'funnel'
-    | 'pyramid'
-    | 'gauge';
+  | 'line'
+  | 'area'
+  | 'bar'
+  | 'pie'
+  | 'donut'
+  | 'radialBar'
+  | 'scatter'
+  | 'bubble'
+  | 'heatmap'
+  | 'candlestick'
+  | 'boxPlot'
+  | 'violin'
+  | 'histogram'
+  | 'radar'
+  | 'polarArea'
+  | 'rangeBar'
+  | 'rangeArea'
+  | 'treemap'
+  | 'unit'
+  | 'waffle'
+  | 'sunburst'
+  | 'funnel'
+  | 'pyramid'
+  | 'gauge';
   /**
    * Internal — populated when `type` is a first-class alias (`'funnel'`,
    * `'pyramid'`, `'gauge'`, `'waffle'`, `'histogram'`). The original requested
@@ -2752,9 +2759,9 @@ export type XChart = {
     dimension?: (row: any) => any;
     /** FILTER mode: reduction over a bucket's rows. @default 'count' */
     reduce?:
-      | 'count'
-      | { sum?: string; avg?: string; min?: string; max?: string }
-      | ((rows: any[]) => number);
+    | 'count'
+    | { sum?: string; avg?: string; min?: string; max?: string }
+    | ((rows: any[]) => number);
     /**
      * FILTER mode: bucket kind. Else inferred: `bins` present => 'range', a
      * heatmap chart => 'matrix' (2D), otherwise 'category'.
@@ -2872,21 +2879,21 @@ export type XChart = {
       | 'yline'
       | 'measure'
       | {
-          id?: string;
-          label?: string;
-          icon?: string;
-          onClick?: (
-            chart: ApexCharts,
-            context: {
-              x: any;
-              y: any;
-              seriesIndex: number | null;
-              dataPointIndex: number | null;
-              clientX: number;
-              clientY: number;
-            },
-          ) => void;
-        }
+        id?: string;
+        label?: string;
+        icon?: string;
+        onClick?: (
+          chart: ApexCharts,
+          context: {
+            x: any;
+            y: any;
+            seriesIndex: number | null;
+            dataPointIndex: number | null;
+            clientX: number;
+            clientY: number;
+          },
+        ) => void;
+      }
     >;
     /** Override the built-in item labels. */
     labels?: {
@@ -3225,7 +3232,7 @@ export enum XChartAction {
 
 export type XChartActionIdentifier = XChartAction | string;
 
-export interface XChartActionModel extends XBaseActionModel<XChartActionIdentifier> {}
+export interface XChartActionModel extends XBaseActionModel<XChartActionIdentifier> { }
 
 export type XChartSeriesType = XChartAxisChartSeries | XChartNonAxisChartSeries;
 
@@ -3323,6 +3330,18 @@ export interface IXChartContainer extends TXChartContainer {
   series: XStandardType<XChartSeriesType>;
   type: XStandardType<XChartTypeIdentifier>;
 
+  //
+  stroke: XStandardType<XChartStroke>;
+  colors: XStandardType<XChartColorType>;
+
+  //
+  xAxis: XStandardType<XChartXAxis>;
+  yAxis: XStandardType<XOneOrManyType<XChartYAxis>>;
+
+  //
+  tooltip: XStandardType<XChartTooltip>;
+  annotations: XStandardType<XChartAnnotations>;
+
   //
   title: XStandardType<XResourceIdentifier>;
   titleAlign: XStandardType<XChartTextAlignIdentifier>;
@@ -3460,8 +3479,7 @@ export interface IXChartContainer extends TXChartContainer {
 })
 export class XChartContainer
   extends XBaseContainer
-  implements Readonly<IXChartContainer>
-{
+  implements Readonly<IXChartContainer> {
   //
   readonly actionProvider = new Subject<XChartActionModel>();
   readonly cssClass: XStandardType<XOneOrManyType<string>>;
@@ -3471,7 +3489,22 @@ export class XChartContainer
   readonly options: XStandardType<XChartOptions>;
   readonly zoomStep: XStandardType<number> = 0.125;
   readonly series: XStandardType<XChartSeriesType>;
+
+  //
+  readonly stroke: XStandardType<XChartStroke> = {
+    width: 3,
+    curve: 'smooth'
+  };
   readonly type: XStandardType<XChartTypeIdentifier> = XChartType.Line;
+  readonly colors: XStandardType<XChartColorType> = [getXColorValue(XColorWithBrightness.PrimaryShade)];
+
+  //
+  readonly xAxis: XStandardType<XChartXAxis>;
+  readonly yAxis: XStandardType<XOneOrManyType<XChartYAxis>>;
+
+  //
+  readonly tooltip: XStandardType<XChartTooltip>;
+  readonly annotations: XStandardType<XChartAnnotations>;
 
   //
   readonly title: XStandardType<XResourceIdentifier>;
@@ -3671,8 +3704,7 @@ export class XChartContainer
 @Component({ template: `` })
 export abstract class XChartContainerComponent
   extends XBaseContainerComponent
-  implements IXChartContainer
-{
+  implements IXChartContainer {
   //
   //#region Props ...
   @Input()
@@ -3698,6 +3730,24 @@ export abstract class XChartContainerComponent
   @Input()
   zoomStep: XStandardType<number> = this.propertyProvider.zoomStep;
 
+  @Input()
+  xAxis: XStandardType<XChartXAxis> = this.propertyProvider.xAxis;
+
+  @Input()
+  yAxis: XStandardType<XOneOrManyType<XChartYAxis>> = this.propertyProvider.yAxis;
+
+  @Input()
+  colors: XStandardType<XChartColorType> = this.propertyProvider.colors;
+
+  @Input()
+  stroke: XStandardType<XChartStroke> = this.propertyProvider.stroke;
+
+  @Input()
+  tooltip: XStandardType<XChartTooltip> = this.propertyProvider.tooltip;
+
+  @Input()
+  annotations: XStandardType<XChartAnnotations> = this.propertyProvider.annotations;
+
   @Input()
   defaultActionBarItemColor: XStandardType<XColorIdentifier> =
     this.propertyProvider.defaultActionBarItemColor;
@@ -4030,9 +4080,21 @@ export abstract class XChartContainerComponent
 
       //
       type: this.getValue(container ? container.type : this.type),
-      options: this.getValue(container ? container.options : this.options),
       series: this.getValue(container ? container.series : this.series),
+      options: this.getValue(container ? container.options : this.options),
       zoomStep: this.getValue(container ? container.zoomStep : this.zoomStep),
+      
+      //
+      stroke: this.getValue(container ? container.stroke : this.stroke),
+      colors: this.getArrayValue(container ? container.colors : this.colors),
+
+      //
+      xAxis: this.getValue(container ? container.xAxis : this.xAxis),
+      yAxis: this.getValue(container ? container.yAxis : this.yAxis),
+
+      //
+      tooltip: this.getValue(container ? container.tooltip : this.tooltip),
+      annotations: this.getValue(container ? container.annotations : this.annotations),
 
       //
       title: this.getValue(container ? container.title : this.title),