@unovis/ts 1.1.1-beta.7 → 1.1.1-beta.8

package/core/component/index.js

@@ -0,0 +1,118 @@
+import { select } from 'd3-selection';
+import { CoreDataModel } from '../../data-models/core.js';
+import { throttle } from '../../utils/data.js';
+import { guid } from '../../utils/misc.js';
+import { ComponentType, Sizing } from '../../types/component.js';
+
+class ComponentCore {
+    constructor(type = ComponentType.SVG) {
+        var _a, _b;
+        this.type = ComponentType.SVG;
+        this.datamodel = new CoreDataModel();
+        this.sizing = Sizing.Fit; // Supported by SingleContainer and a subset of components only (Sankey)
+        this.events = {};
+        /** Component width in pixels. This property is set automatically by the container. */
+        this._width = 400;
+        /** Component height in pixels. This property is set automatically by the container. */
+        this._height = 200;
+        /** Container width in pixels. This property is set automatically by the container. */
+        this._containerWidth = undefined;
+        /** Container height in pixels. This property is set automatically by the container. */
+        this._containerHeight = undefined;
+        this._setUpComponentEventsThrottled = throttle(this._setUpComponentEvents, 500);
+        this._setCustomAttributesThrottled = throttle(this._setCustomAttributes, 500);
+        if (type === ComponentType.SVG) {
+            this.element = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+        }
+        else {
+            this.element = document.createElement('div');
+        }
+        this.uid = guid();
+        this.g = select(this.element);
+        // Setting the root class if available
+        // eslint-disable-next-line dot-notation
+        const rootClass = (_b = (_a = this.constructor) === null || _a === void 0 ? void 0 : _a['selectors']) === null || _b === void 0 ? void 0 : _b.root;
+        if (rootClass)
+            this.g.attr('class', rootClass);
+    }
+    setConfig(config) {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        const ConfigModel = this.config.constructor;
+        this.prevConfig = this.config; // Store the previous config instance
+        this.config = new ConfigModel().init(config);
+    }
+    setData(data) {
+        this.datamodel.data = data;
+    }
+    setSize(width, height, containerWidth, containerHeight) {
+        if (isFinite(width))
+            this._width = width;
+        if (isFinite(height))
+            this._height = height;
+        if (isFinite(containerWidth))
+            this._containerWidth = containerWidth;
+        if (isFinite(containerHeight))
+            this._containerHeight = containerHeight;
+    }
+    render(duration = this.config.duration) {
+        this._render(duration);
+        // While transition is in progress, we add the 'animating' attribute to the component's SVG group
+        const ANIMATING_ATTR = 'animating';
+        if (duration) {
+            this.g.attr(ANIMATING_ATTR, '');
+            const transition = this.g
+                .transition(ANIMATING_ATTR)
+                .duration(duration);
+            transition.on('end interrupt', () => {
+                this.g.attr(ANIMATING_ATTR, null);
+            });
+        }
+        this._setUpComponentEventsThrottled();
+        this._setCustomAttributesThrottled();
+    }
+    get bleed() {
+        return { top: 0, bottom: 0, left: 0, right: 0 };
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    _render(duration = this.config.duration) {
+    }
+    _setCustomAttributes() {
+        const attributeMap = this.config.attributes;
+        Object.keys(attributeMap).forEach(className => {
+            Object.keys(attributeMap[className]).forEach(attr => {
+                this.g
+                    .selectAll(`.${className}`)
+                    .attr(attr, attributeMap[className][attr]);
+            });
+        });
+    }
+    _setUpComponentEvents() {
+        // Set up default events
+        this._bindEvents(this.events);
+        // Set up user-defined events
+        this._bindEvents(this.config.events, '.user');
+    }
+    _bindEvents(events = this.events, suffix = '') {
+        Object.keys(events).forEach(className => {
+            Object.keys(events[className]).forEach(eventType => {
+                const selection = this.g.selectAll(`.${className}`);
+                selection.on(eventType + suffix, (event, d) => {
+                    const els = selection.nodes();
+                    const i = els.indexOf(event.currentTarget);
+                    return events[className][eventType](d, event, i, els);
+                });
+            });
+        });
+    }
+    destroy() {
+        var _a;
+        (_a = this.g) === null || _a === void 0 ? void 0 : _a.remove();
+        this.element = undefined;
+    }
+    isDestroyed() {
+        return !this.element;
+    }
+}
+
+export { ComponentCore };
+//# sourceMappingURL=index.js.map

package/core/component/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/core/component/index.ts"],"sourcesContent":["import { select, Selection } from 'd3-selection'\nimport { Transition } from 'd3-transition'\n\n// Core\nimport { CoreDataModel } from 'data-models/core'\n\n// Utils\nimport { throttle } from 'utils/data'\nimport { guid } from 'utils/misc'\n\n// Types\nimport { ComponentType, Sizing } from 'types/component'\nimport { Spacing } from 'types/spacing'\n\n// Local Types\nimport { VisEventCallback, VisEventType } from './types'\n\n// Config\nimport { ComponentConfig, ComponentConfigInterface } from './config'\n\nexport class ComponentCore<\n  CoreDatum,\n  ConfigClass extends ComponentConfig = ComponentConfig,\n  ConfigInterface extends ComponentConfigInterface = ComponentConfigInterface,\n> {\n  element: SVGGElement | HTMLElement\n  type: ComponentType = ComponentType.SVG\n  g: Selection<SVGGElement, unknown, null, undefined> | Selection<HTMLElement, unknown, null, undefined>\n  config: ConfigClass\n  prevConfig: ConfigClass\n  datamodel: CoreDataModel<CoreDatum> = new CoreDataModel()\n  sizing: Sizing | string = Sizing.Fit // Supported by SingleContainer and a subset of components only (Sankey)\n  uid: string\n\n  events: {\n    [selector: string]: {\n      [eventType in VisEventType]?: VisEventCallback;\n    };\n  } = {}\n\n  /** Component width in pixels. This property is set automatically by the container. */\n  protected _width = 400\n  /** Component height in pixels. This property is set automatically by the container. */\n  protected _height = 200\n  /** Container width in pixels. This property is set automatically by the container. */\n  protected _containerWidth: number | undefined = undefined\n  /** Container height in pixels. This property is set automatically by the container. */\n  protected _containerHeight: number | undefined = undefined\n\n  _setUpComponentEventsThrottled = throttle(this._setUpComponentEvents, 500)\n  _setCustomAttributesThrottled = throttle(this._setCustomAttributes, 500)\n\n  constructor (type = ComponentType.SVG) {\n    if (type === ComponentType.SVG) {\n      this.element = document.createElementNS('http://www.w3.org/2000/svg', 'g')\n    } else {\n      this.element = document.createElement('div')\n    }\n    this.uid = guid()\n    this.g = select(this.element) as Selection<SVGGElement, unknown, null, undefined> | Selection<HTMLElement, unknown, null, undefined>\n\n    // Setting the root class if available\n    // eslint-disable-next-line dot-notation\n    const rootClass = this.constructor?.['selectors']?.root as string\n    if (rootClass) this.g.attr('class', rootClass)\n  }\n\n  setConfig (config: ConfigInterface): void {\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    const ConfigModel = (this.config.constructor as typeof ComponentConfig)\n    this.prevConfig = this.config // Store the previous config instance\n    this.config = new ConfigModel().init(config) as ConfigClass\n  }\n\n  setData (data: CoreDatum): void {\n    this.datamodel.data = data\n  }\n\n  setSize (width: number, height: number, containerWidth: number, containerHeight: number): void {\n    if (isFinite(width)) this._width = width\n    if (isFinite(height)) this._height = height\n    if (isFinite(containerWidth)) this._containerWidth = containerWidth\n    if (isFinite(containerHeight)) this._containerHeight = containerHeight\n  }\n\n  render (duration = this.config.duration): void {\n    this._render(duration)\n\n    // While transition is in progress, we add the 'animating' attribute to the component's SVG group\n    const ANIMATING_ATTR = 'animating'\n    if (duration) {\n      this.g.attr(ANIMATING_ATTR, '')\n      const transition = this.g\n        .transition(ANIMATING_ATTR)\n        .duration(duration) as Transition<SVGGElement | HTMLElement, unknown, null, undefined>\n\n      transition.on('end interrupt', () => {\n        this.g.attr(ANIMATING_ATTR, null)\n      })\n    }\n    this._setUpComponentEventsThrottled()\n    this._setCustomAttributesThrottled()\n  }\n\n  get bleed (): Spacing {\n    return { top: 0, bottom: 0, left: 0, right: 0 }\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  _render (duration = this.config.duration): void {\n  }\n\n  private _setCustomAttributes (): void {\n    const attributeMap = this.config.attributes\n\n    Object.keys(attributeMap).forEach(className => {\n      Object.keys(attributeMap[className]).forEach(attr => {\n        (this.g as Selection<SVGGElement | HTMLElement, unknown, null, undefined>)\n          .selectAll(`.${className}`)\n          .attr(attr, attributeMap[className][attr])\n      })\n    })\n  }\n\n  private _setUpComponentEvents (): void {\n    // Set up default events\n    this._bindEvents(this.events)\n\n    // Set up user-defined events\n    this._bindEvents(this.config.events, '.user')\n  }\n\n  private _bindEvents (events = this.events, suffix = ''): void {\n    Object.keys(events).forEach(className => {\n      Object.keys(events[className]).forEach(eventType => {\n        const selection = (this.g as Selection<SVGGElement | HTMLElement, unknown, null, undefined>).selectAll(`.${className}`)\n        selection.on(eventType + suffix, (event: Event, d) => {\n          const els = selection.nodes()\n          const i = els.indexOf(event.currentTarget as SVGGElement | HTMLElement)\n          return events[className][eventType](d, event, i, els)\n        })\n      })\n    })\n  }\n\n  public destroy (): void {\n    this.g?.remove()\n    this.element = undefined\n  }\n\n  public isDestroyed (): boolean {\n    return !this.element\n  }\n}\n"],"names":[],"mappings":"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"}

package/core/component/types.d.ts

@@ -0,0 +1,2 @@
+export declare type VisEventType = 'touchstart' | 'touchmove' | 'touchend' | 'mouseover' | 'mousemove' | 'mousedown' | 'mouseup' | 'click' | 'auxclick' | 'contextmenu' | 'dblclick' | 'mouseenter' | 'mouseleave' | 'mouseout' | 'scroll' | 'select' | 'wheel' | 'pointerdown' | 'pointerup' | 'pointerout' | 'pointermove';
+export declare type VisEventCallback<Datum = any> = ((data: Datum, event: MouseEvent, i: number, els: (SVGElement | HTMLElement)[]) => void) | ((data: Datum, event: WheelEvent, i: number, els: (SVGElement | HTMLElement)[]) => void) | ((data: Datum, event: PointerEvent, i: number, els: (SVGElement | HTMLElement)[]) => void) | ((data: Datum, event: TouchEvent, i: number, els: (SVGElement | HTMLElement)[]) => void);

package/core/component/types.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=types.js.map

package/core/component/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/core/config/index.d.ts

@@ -0,0 +1,3 @@
+export declare class Config {
+    init<T>(config: T): this;
+}

package/core/config/index.js

@@ -0,0 +1,16 @@
+import { isPlainObject, merge } from '../../utils/data.js';
+
+class Config {
+    init(config) {
+        Object.keys(config).forEach(key => {
+            if (isPlainObject(this[key]) && isPlainObject(config[key]))
+                this[key] = merge(this[key], config[key]);
+            else
+                this[key] = config[key];
+        });
+        return this;
+    }
+}
+
+export { Config };
+//# sourceMappingURL=index.js.map

package/core/config/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/core/config/index.ts"],"sourcesContent":["import { isPlainObject, merge } from 'utils/data'\n\nexport class Config {\n  init<T> (config: T): this {\n    Object.keys(config).forEach(key => {\n      if (isPlainObject(this[key]) && isPlainObject(config[key])) this[key] = merge(this[key], config[key])\n      else this[key] = config[key]\n    })\n\n    return this\n  }\n}\n"],"names":[],"mappings":";;MAEa,MAAM,CAAA;AACjB,IAAA,IAAI,CAAK,MAAS,EAAA;QAChB,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,GAAG,IAAG;AAChC,YAAA,IAAI,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,aAAa,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;AAAE,gBAAA,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,CAAA;;gBAChG,IAAI,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;AAC9B,SAAC,CAAC,CAAA;AAEF,QAAA,OAAO,IAAI,CAAA;KACZ;AACF;;;;"}

package/core/container/config.d.ts

@@ -0,0 +1,48 @@
+import { Config } from "../config";
+import { Sizing } from "../../types/component";
+import { Spacing } from "../../types/spacing";
+export interface ContainerConfigInterface {
+    /** Animation duration of all the components within the container. Default: `undefined` */
+    duration?: number;
+    /** Margins. Default: `{ top: 0, bottom: 0, left: 0, right: 0 }` */
+    margin?: Spacing;
+    /** Padding. Default: `{ top: 0, bottom: 0, left: 0, right: 0 }` */
+    padding?: Spacing;
+    /** Defines whether components should fit into the container or the container should expand to fit to the component's size. Default: `Sizing.Fit` */
+    sizing?: Sizing | string;
+    /** Width in pixels or in CSS units.
+     * Percentage units `"%"` are not supported here. If you want to set `width` as a percentage, do it via `style`
+     * of the corresponding DOM element.
+     * By default, Container automatically fits to the size of the parent element.
+     * Default: `undefined`
+    */
+    width?: number | string;
+    /** Height in pixels or in CSS units.
+     * Percentage units `"%"` are not supported here. If you want to set `height` as a percentage, do it via `style`
+     * of the corresponding DOM element.
+     * By default, Container automatically fits to the size of the parent element.
+     * Default: `undefined`
+    */
+    height?: number | string;
+    /** Custom SVG defs available to all the components within the container. Default: `undefined`. */
+    svgDefs?: string;
+}
+export declare class ContainerConfig extends Config implements ContainerConfigInterface {
+    duration: any;
+    margin: {
+        top: number;
+        bottom: number;
+        left: number;
+        right: number;
+    };
+    padding: {
+        top: number;
+        bottom: number;
+        left: number;
+        right: number;
+    };
+    sizing: Sizing;
+    width: any;
+    height: any;
+    svgDefs: any;
+}

package/core/container/config.js

@@ -0,0 +1,29 @@
+import { Config } from '../config/index.js';
+import { Sizing } from '../../types/component.js';
+
+// Core
+class ContainerConfig extends Config {
+    constructor() {
+        super(...arguments);
+        this.duration = undefined;
+        this.margin = {
+            top: 0,
+            bottom: 0,
+            left: 0,
+            right: 0,
+        };
+        this.padding = {
+            top: 0,
+            bottom: 0,
+            left: 0,
+            right: 0,
+        };
+        this.sizing = Sizing.Fit;
+        this.width = undefined;
+        this.height = undefined;
+        this.svgDefs = undefined;
+    }
+}
+
+export { ContainerConfig };
+//# sourceMappingURL=config.js.map

package/core/container/config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","sources":["../../../src/core/container/config.ts"],"sourcesContent":["// Core\nimport { Config } from 'core/config'\n\n// Types\nimport { Sizing } from 'types/component'\nimport { Spacing } from 'types/spacing'\n\nexport interface ContainerConfigInterface {\n  /** Animation duration of all the components within the container. Default: `undefined` */\n  duration?: number;\n  /** Margins. Default: `{ top: 0, bottom: 0, left: 0, right: 0 }` */\n  margin?: Spacing;\n  /** Padding. Default: `{ top: 0, bottom: 0, left: 0, right: 0 }` */\n  padding?: Spacing;\n  /** Defines whether components should fit into the container or the container should expand to fit to the component's size. Default: `Sizing.Fit` */\n  sizing?: Sizing | string;\n  /** Width in pixels or in CSS units.\n   * Percentage units `\"%\"` are not supported here. If you want to set `width` as a percentage, do it via `style`\n   * of the corresponding DOM element.\n   * By default, Container automatically fits to the size of the parent element.\n   * Default: `undefined`\n  */\n  width?: number | string;\n  /** Height in pixels or in CSS units.\n   * Percentage units `\"%\"` are not supported here. If you want to set `height` as a percentage, do it via `style`\n   * of the corresponding DOM element.\n   * By default, Container automatically fits to the size of the parent element.\n   * Default: `undefined`\n  */\n  height?: number | string;\n  /** Custom SVG defs available to all the components within the container. Default: `undefined`. */\n  svgDefs?: string;\n}\n\nexport class ContainerConfig extends Config implements ContainerConfigInterface {\n  duration = undefined\n  margin = {\n    top: 0,\n    bottom: 0,\n    left: 0,\n    right: 0,\n  }\n\n  padding = {\n    top: 0,\n    bottom: 0,\n    left: 0,\n    right: 0,\n  }\n\n  sizing = Sizing.Fit\n  width = undefined\n  height = undefined\n\n  svgDefs = undefined\n}\n"],"names":[],"mappings":";;;AAAA;AAkCM,MAAO,eAAgB,SAAQ,MAAM,CAAA;AAA3C,IAAA,WAAA,GAAA;;QACE,IAAQ,CAAA,QAAA,GAAG,SAAS,CAAA;AACpB,QAAA,IAAA,CAAA,MAAM,GAAG;AACP,YAAA,GAAG,EAAE,CAAC;AACN,YAAA,MAAM,EAAE,CAAC;AACT,YAAA,IAAI,EAAE,CAAC;AACP,YAAA,KAAK,EAAE,CAAC;SACT,CAAA;AAED,QAAA,IAAA,CAAA,OAAO,GAAG;AACR,YAAA,GAAG,EAAE,CAAC;AACN,YAAA,MAAM,EAAE,CAAC;AACT,YAAA,IAAI,EAAE,CAAC;AACP,YAAA,KAAK,EAAE,CAAC;SACT,CAAA;AAED,QAAA,IAAA,CAAA,MAAM,GAAG,MAAM,CAAC,GAAG,CAAA;QACnB,IAAK,CAAA,KAAA,GAAG,SAAS,CAAA;QACjB,IAAM,CAAA,MAAA,GAAG,SAAS,CAAA;QAElB,IAAO,CAAA,OAAA,GAAG,SAAS,CAAA;KACpB;AAAA;;;;"}

package/core/container/index.d.ts

@@ -0,0 +1,26 @@
+import { Selection } from 'd3-selection';
+import { ContainerConfig, ContainerConfigInterface } from './config';
+export declare class ContainerCore {
+    svg: Selection<SVGSVGElement, unknown, null, undefined>;
+    element: SVGSVGElement;
+    prevConfig: ContainerConfig;
+    config: ContainerConfig;
+    protected _container: HTMLElement;
+    protected _requestedAnimationFrame: number;
+    protected _isFirstRender: boolean;
+    private _containerSize;
+    private _resizeObserver;
+    static DEFAULT_CONTAINER_HEIGHT: number;
+    constructor(element: HTMLElement);
+    updateContainer<T extends ContainerConfigInterface>(config: T): void;
+    _render(duration?: number): void;
+    render(duration?: any): void;
+    get containerWidth(): number;
+    get containerHeight(): number;
+    get width(): number;
+    get height(): number;
+    removeAllChildren(): void;
+    _onResize(): void;
+    _setUpResizeObserver(): void;
+    destroy(): void;
+}

package/core/container/index.js

@@ -0,0 +1,106 @@
+import { select } from 'd3-selection';
+import { ResizeObserver } from '@juggle/resize-observer';
+import { Sizing } from '../../types/component.js';
+import { clamp, isEqual } from '../../utils/data.js';
+
+class ContainerCore {
+    constructor(element) {
+        this._isFirstRender = true;
+        this._requestedAnimationFrame = null;
+        this._container = element;
+        // Create SVG element for visualizations
+        this.svg = select(this._container).append('svg')
+            // We set `display` to `block` because inline elements have an invisible
+            //   inline space that adds 4px to the height of the container
+            .style('display', 'block')
+            .attr('xmlns', 'http://www.w3.org/2000/svg')
+            .attr('height', ContainerCore.DEFAULT_CONTAINER_HEIGHT);
+        this.element = this.svg.node();
+    }
+    updateContainer(config) {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        const ConfigModel = this.config.constructor;
+        this.prevConfig = this.config;
+        this.config = new ConfigModel().init(config);
+    }
+    _render(duration) {
+        if (this.config.svgDefs) {
+            this.svg.select('.svgDefs').remove();
+            this.svg.append('defs').attr('class', 'svgDefs').html(this.config.svgDefs);
+        }
+        this._isFirstRender = false;
+    }
+    render(duration = this.config.duration) {
+        const width = this.config.width || this.containerWidth;
+        const height = this.config.height || this.containerHeight;
+        // We set SVG size in `render()` instead of `_render()`, because the size values in pixels will become
+        // available only in the next animation when being accessed via `element.clientWidth` and `element.clientHeight`,
+        // and we rely on those values when setting width and size of the components.
+        this.svg
+            .attr('width', width)
+            .attr('height', height);
+        // Set up Resize Observer. We do it in `render()` to capture container size change if it happened
+        // in the next animation frame after the initial `render` was called.
+        if (!this._resizeObserver)
+            this._setUpResizeObserver();
+        // Schedule the actual rendering in the next frame
+        cancelAnimationFrame(this._requestedAnimationFrame);
+        this._requestedAnimationFrame = requestAnimationFrame(() => {
+            this._render(duration);
+        });
+    }
+    get containerWidth() {
+        return this.config.width
+            ? this.element.clientWidth
+            : clamp(this._container.clientWidth || this._container.getBoundingClientRect().width, 0, Number.POSITIVE_INFINITY);
+    }
+    get containerHeight() {
+        return this.config.height
+            ? this.element.clientHeight
+            : clamp(this._container.clientHeight || this._container.getBoundingClientRect().height, 0, Number.POSITIVE_INFINITY);
+    }
+    get width() {
+        return clamp(this.containerWidth - this.config.margin.left - this.config.margin.right, 0, Number.POSITIVE_INFINITY);
+    }
+    get height() {
+        return clamp(this.containerHeight - this.config.margin.top - this.config.margin.bottom, 0, Number.POSITIVE_INFINITY);
+    }
+    removeAllChildren() {
+        while (this.element.firstChild) {
+            this.element.removeChild(this.element.firstChild);
+        }
+    }
+    _onResize() {
+        const { config } = this;
+        const redrawOnResize = config.sizing === Sizing.Fit || config.sizing === Sizing.FitWidth;
+        if (redrawOnResize)
+            this.render(0);
+    }
+    _setUpResizeObserver() {
+        const containerRect = this._container.getBoundingClientRect();
+        this._containerSize = { width: containerRect.width, height: containerRect.height };
+        this._resizeObserver = new ResizeObserver((entries, observer) => {
+            const resizedContainerRect = this._container.getBoundingClientRect();
+            const resizedContainerSize = { width: resizedContainerRect.width, height: resizedContainerRect.height };
+            const hasSizeChanged = !isEqual(this._containerSize, resizedContainerSize);
+            // Do resize only if element is attached to the DOM
+            // will come in useful when some ancestor of container becomes detached
+            if (hasSizeChanged && resizedContainerSize.width && resizedContainerSize.height) {
+                this._containerSize = resizedContainerSize;
+                this._onResize();
+            }
+        });
+        this._resizeObserver.observe(this._container);
+    }
+    destroy() {
+        var _a;
+        cancelAnimationFrame(this._requestedAnimationFrame);
+        (_a = this._resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.svg.remove();
+    }
+}
+// eslint-disable-next-line @typescript-eslint/naming-convention
+ContainerCore.DEFAULT_CONTAINER_HEIGHT = 300;
+
+export { ContainerCore };
+//# sourceMappingURL=index.js.map

package/core/container/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/core/container/index.ts"],"sourcesContent":["import { select, Selection } from 'd3-selection'\nimport { ResizeObserver } from '@juggle/resize-observer'\n\n// Types\nimport { Sizing } from 'types/component'\n\n// Utils\nimport { isEqual, clamp } from 'utils/data'\n\n// Config\nimport { ContainerConfig, ContainerConfigInterface } from './config'\n\nexport class ContainerCore {\n  svg: Selection<SVGSVGElement, unknown, null, undefined>\n  element: SVGSVGElement\n  prevConfig: ContainerConfig\n  config: ContainerConfig\n\n  protected _container: HTMLElement\n  protected _requestedAnimationFrame: number\n  protected _isFirstRender = true\n  private _containerSize: { width: number; height: number }\n  private _resizeObserver: ResizeObserver | undefined\n\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  static DEFAULT_CONTAINER_HEIGHT = 300\n\n  constructor (element: HTMLElement) {\n    this._requestedAnimationFrame = null\n    this._container = element\n\n    // Create SVG element for visualizations\n    this.svg = select(this._container).append('svg')\n      // We set `display` to `block` because inline elements have an invisible\n      //   inline space that adds 4px to the height of the container\n      .style('display', 'block')\n      .attr('xmlns', 'http://www.w3.org/2000/svg')\n      .attr('height', ContainerCore.DEFAULT_CONTAINER_HEIGHT)\n\n    this.element = this.svg.node()\n  }\n\n  updateContainer<T extends ContainerConfigInterface> (config: T): void {\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    const ConfigModel = (this.config.constructor as typeof ContainerConfig)\n    this.prevConfig = this.config\n    this.config = new ConfigModel().init(config)\n  }\n\n  _render (duration?: number): void {\n    if (this.config.svgDefs) {\n      this.svg.select('.svgDefs').remove()\n      this.svg.append('defs').attr('class', 'svgDefs').html(this.config.svgDefs)\n    }\n\n    this._isFirstRender = false\n  }\n\n  render (duration = this.config.duration): void {\n    const width = this.config.width || this.containerWidth\n    const height = this.config.height || this.containerHeight\n\n    // We set SVG size in `render()` instead of `_render()`, because the size values in pixels will become\n    // available only in the next animation when being accessed via `element.clientWidth` and `element.clientHeight`,\n    // and we rely on those values when setting width and size of the components.\n    this.svg\n      .attr('width', width)\n      .attr('height', height)\n\n    // Set up Resize Observer. We do it in `render()` to capture container size change if it happened\n    // in the next animation frame after the initial `render` was called.\n    if (!this._resizeObserver) this._setUpResizeObserver()\n\n    // Schedule the actual rendering in the next frame\n    cancelAnimationFrame(this._requestedAnimationFrame)\n    this._requestedAnimationFrame = requestAnimationFrame(() => {\n      this._render(duration)\n    })\n  }\n\n  get containerWidth (): number {\n    return this.config.width\n      ? this.element.clientWidth\n      : clamp(this._container.clientWidth || this._container.getBoundingClientRect().width, 0, Number.POSITIVE_INFINITY)\n  }\n\n  get containerHeight (): number {\n    return this.config.height\n      ? this.element.clientHeight\n      : clamp(this._container.clientHeight || this._container.getBoundingClientRect().height, 0, Number.POSITIVE_INFINITY)\n  }\n\n  get width (): number {\n    return clamp(this.containerWidth - this.config.margin.left - this.config.margin.right, 0, Number.POSITIVE_INFINITY)\n  }\n\n  get height (): number {\n    return clamp(this.containerHeight - this.config.margin.top - this.config.margin.bottom, 0, Number.POSITIVE_INFINITY)\n  }\n\n  removeAllChildren (): void {\n    while (this.element.firstChild) {\n      this.element.removeChild(this.element.firstChild)\n    }\n  }\n\n  _onResize (): void {\n    const { config } = this\n    const redrawOnResize = config.sizing === Sizing.Fit || config.sizing === Sizing.FitWidth\n    if (redrawOnResize) this.render(0)\n  }\n\n  _setUpResizeObserver (): void {\n    const containerRect = this._container.getBoundingClientRect()\n    this._containerSize = { width: containerRect.width, height: containerRect.height }\n\n    this._resizeObserver = new ResizeObserver((entries, observer) => {\n      const resizedContainerRect = this._container.getBoundingClientRect()\n      const resizedContainerSize = { width: resizedContainerRect.width, height: resizedContainerRect.height }\n      const hasSizeChanged = !isEqual(this._containerSize, resizedContainerSize)\n      // Do resize only if element is attached to the DOM\n      // will come in useful when some ancestor of container becomes detached\n      if (hasSizeChanged && resizedContainerSize.width && resizedContainerSize.height) {\n        this._containerSize = resizedContainerSize\n        this._onResize()\n      }\n    })\n    this._resizeObserver.observe(this._container)\n  }\n\n  destroy (): void {\n    cancelAnimationFrame(this._requestedAnimationFrame)\n    this._resizeObserver?.disconnect()\n    this.svg.remove()\n  }\n}\n"],"names":[],"mappings":"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"}

package/core/xy-component/config.d.ts

@@ -0,0 +1,38 @@
+import { ContinuousScale } from "../../types/scale";
+import { ColorAccessor, NumericAccessor } from "../../types/accessor";
+import { ComponentConfig, ComponentConfigInterface } from '../component/config';
+export interface XYComponentConfigInterface<Datum> extends ComponentConfigInterface {
+    /** Accessor function for getting the values along the X axis. Default: `undefined` */
+    x: NumericAccessor<Datum>;
+    /** A single of multiple accessor functions for getting the values along the Y axis. Default: `undefined` */
+    y: NumericAccessor<Datum> | NumericAccessor<Datum>[];
+    /** Accessor function for getting the unique data record id. Used for more persistent data updates. Default: `(d, i) => d.id ?? i` */
+    id?: ((d: Datum, i: number, ...any: any[]) => string);
+    /** Component color accessor function. Default: `d => d.color` */
+    color?: ColorAccessor<Datum> | ColorAccessor<Datum[]>;
+    /** Scale for X dimension, e.g. Scale.scaleLinear(). If you set xScale you'll be responsible for setting it's `domain` and `range` as well.
+     * Only continuous scales are supported.
+     * Default: `undefined`
+    */
+    xScale?: ContinuousScale;
+    /** Scale for Y dimension, e.g. Scale.scaleLinear(). If you set yScale you'll be responsible for setting it's `domain` and `range` as well.
+     * Only continuous scales are supported.
+     * Default: `undefined`
+    */
+    yScale?: ContinuousScale;
+    /** Identifies whether the component should be excluded from overall X and Y domain calculations or not.
+     * This property can be useful when you want pass individual data to a component and you don't want it to affect
+     * the scales of the chart.
+     * Default: `false`
+    */
+    excludeFromDomainCalculation?: boolean;
+}
+export declare class XYComponentConfig<Datum> extends ComponentConfig implements XYComponentConfigInterface<Datum> {
+    x: any;
+    y: any;
+    id: (d: Datum, i: number) => string;
+    color: (d: Datum | Datum[]) => string;
+    xScale: any;
+    yScale: any;
+    excludeFromDomainCalculation: boolean;
+}

package/core/xy-component/config.js

@@ -0,0 +1,20 @@
+import { ComponentConfig } from '../component/config.js';
+
+// Config
+class XYComponentConfig extends ComponentConfig {
+    constructor() {
+        super(...arguments);
+        this.x = undefined;
+        this.y = undefined;
+        // eslint-disable-next-line dot-notation
+        this.id = (d, i) => { var _a; return (_a = d['id']) !== null && _a !== void 0 ? _a : `${i}`; };
+        // eslint-disable-next-line dot-notation
+        this.color = (d) => d['color'];
+        this.xScale = undefined;
+        this.yScale = undefined;
+        this.excludeFromDomainCalculation = false;
+    }
+}
+
+export { XYComponentConfig };
+//# sourceMappingURL=config.js.map

package/core/xy-component/config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","sources":["../../../src/core/xy-component/config.ts"],"sourcesContent":["import { ContinuousScale } from 'types/scale'\n\n// Types\nimport { ColorAccessor, NumericAccessor } from 'types/accessor'\n\n// Config\nimport { ComponentConfig, ComponentConfigInterface } from '../component/config'\n\nexport interface XYComponentConfigInterface<Datum> extends ComponentConfigInterface {\n  /** Accessor function for getting the values along the X axis. Default: `undefined` */\n  x: NumericAccessor<Datum>;\n  /** A single of multiple accessor functions for getting the values along the Y axis. Default: `undefined` */\n  y: NumericAccessor<Datum> | NumericAccessor<Datum>[];\n  /** Accessor function for getting the unique data record id. Used for more persistent data updates. Default: `(d, i) => d.id ?? i` */\n  id?: ((d: Datum, i: number, ...any: any[]) => string);\n  /** Component color accessor function. Default: `d => d.color` */\n  color?: ColorAccessor<Datum> | ColorAccessor<Datum[]>;\n  /** Scale for X dimension, e.g. Scale.scaleLinear(). If you set xScale you'll be responsible for setting it's `domain` and `range` as well.\n   * Only continuous scales are supported.\n   * Default: `undefined`\n  */\n  xScale?: ContinuousScale;\n  /** Scale for Y dimension, e.g. Scale.scaleLinear(). If you set yScale you'll be responsible for setting it's `domain` and `range` as well.\n   * Only continuous scales are supported.\n   * Default: `undefined`\n  */\n  yScale?: ContinuousScale;\n  /** Identifies whether the component should be excluded from overall X and Y domain calculations or not.\n   * This property can be useful when you want pass individual data to a component and you don't want it to affect\n   * the scales of the chart.\n   * Default: `false`\n  */\n  excludeFromDomainCalculation?: boolean;\n}\n\nexport class XYComponentConfig<Datum> extends ComponentConfig implements XYComponentConfigInterface<Datum> {\n  x = undefined\n  y = undefined\n  // eslint-disable-next-line dot-notation\n  id = (d: Datum, i: number): string => d['id'] ?? `${i}`\n  // eslint-disable-next-line dot-notation\n  color = (d: Datum | Datum[]): string => d['color']\n  xScale = undefined\n  yScale = undefined\n  excludeFromDomainCalculation = false\n}\n"],"names":[],"mappings":";;AAKA;AA8BM,MAAO,iBAAyB,SAAQ,eAAe,CAAA;AAA7D,IAAA,WAAA,GAAA;;QACE,IAAC,CAAA,CAAA,GAAG,SAAS,CAAA;QACb,IAAC,CAAA,CAAA,GAAG,SAAS,CAAA;;QAEb,IAAE,CAAA,EAAA,GAAG,CAAC,CAAQ,EAAE,CAAS,eAAa,OAAA,CAAA,EAAA,GAAA,CAAC,CAAC,IAAI,CAAC,MAAI,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAA,CAAA,EAAG,CAAC,CAAE,CAAA,CAAA,EAAA,CAAA;;QAEvD,IAAK,CAAA,KAAA,GAAG,CAAC,CAAkB,KAAa,CAAC,CAAC,OAAO,CAAC,CAAA;QAClD,IAAM,CAAA,MAAA,GAAG,SAAS,CAAA;QAClB,IAAM,CAAA,MAAA,GAAG,SAAS,CAAA;QAClB,IAA4B,CAAA,4BAAA,GAAG,KAAK,CAAA;KACrC;AAAA;;;;"}

package/core/xy-component/index.d.ts

@@ -0,0 +1,27 @@
+import { Selection } from 'd3-selection';
+import { ComponentCore } from "../component";
+import { SeriesDataModel } from "../../data-models/series";
+import { ContinuousScale, ScaleDimension } from "../../types/scale";
+import { XYComponentConfig, XYComponentConfigInterface } from './config';
+export declare class XYComponentCore<Datum, ConfigClass extends XYComponentConfig<Datum> = XYComponentConfig<Datum>, ConfigInterface extends Partial<XYComponentConfigInterface<Datum>> = Partial<XYComponentConfigInterface<Datum>>> extends ComponentCore<Datum[], ConfigClass, ConfigInterface> {
+    element: SVGGraphicsElement;
+    g: Selection<SVGGElement, unknown, null, undefined>;
+    config: ConfigClass;
+    prevConfig: ConfigClass;
+    datamodel: SeriesDataModel<Datum>;
+    /** Clippable components can be affected by a clipping path (set up in the container) */
+    clippable: boolean;
+    /** Identifies whether the component displayed stacked data (eg StackedBar, Area) */
+    stacked: boolean;
+    private _xScale;
+    private _yScale;
+    get xScale(): ContinuousScale;
+    get yScale(): ContinuousScale;
+    setConfig(config: ConfigInterface): void;
+    setScaleDomain(dimension: ScaleDimension, domain: number[]): void;
+    setScaleRange(dimension: ScaleDimension, range: number[]): void;
+    setScale(dimension: ScaleDimension, scale: ContinuousScale): void;
+    getDataExtent(dimension: ScaleDimension, scaleByVisibleData: boolean): number[];
+    getXDataExtent(): number[];
+    getYDataExtent(scaleByVisibleData: boolean): number[];
+}

package/core/xy-component/index.js

@@ -0,0 +1,74 @@
+import { ComponentCore } from '../component/index.js';
+import { SeriesDataModel } from '../../data-models/series.js';
+import { getExtent, filterDataByRange, isArray } from '../../utils/data.js';
+import { Scale, ScaleDimension } from '../../types/scale.js';
+
+// Core
+class XYComponentCore extends ComponentCore {
+    constructor() {
+        super(...arguments);
+        this.datamodel = new SeriesDataModel();
+        /** Clippable components can be affected by a clipping path (set up in the container) */
+        this.clippable = true;
+        /** Identifies whether the component displayed stacked data (eg StackedBar, Area) */
+        this.stacked = false;
+        this._xScale = Scale.scaleLinear();
+        this._yScale = Scale.scaleLinear();
+    }
+    get xScale() {
+        return this.config.xScale || this._xScale;
+    }
+    get yScale() {
+        return this.config.yScale || this._yScale;
+    }
+    setConfig(config) {
+        var _a, _b;
+        // We don't allow changing scales after the component has been initialized
+        if ((_a = this.config) === null || _a === void 0 ? void 0 : _a.xScale)
+            config.xScale = this.config.xScale;
+        if ((_b = this.config) === null || _b === void 0 ? void 0 : _b.yScale)
+            config.yScale = this.config.yScale;
+        super.setConfig(config);
+    }
+    setScaleDomain(dimension, domain) {
+        var _a, _b;
+        if (dimension === ScaleDimension.X)
+            (_a = this._xScale) === null || _a === void 0 ? void 0 : _a.domain(domain);
+        if (dimension === ScaleDimension.Y)
+            (_b = this._yScale) === null || _b === void 0 ? void 0 : _b.domain(domain);
+    }
+    setScaleRange(dimension, range) {
+        var _a, _b;
+        if (dimension === ScaleDimension.X)
+            (_a = this._xScale) === null || _a === void 0 ? void 0 : _a.range(range);
+        if (dimension === ScaleDimension.Y)
+            (_b = this._yScale) === null || _b === void 0 ? void 0 : _b.range(range);
+    }
+    setScale(dimension, scale) {
+        if (scale && (dimension === ScaleDimension.X))
+            this._xScale = scale;
+        if (scale && (dimension === ScaleDimension.Y))
+            this._yScale = scale;
+    }
+    getDataExtent(dimension, scaleByVisibleData) {
+        const { config, datamodel } = this;
+        switch (dimension) {
+            case ScaleDimension.X: return this.getXDataExtent();
+            case ScaleDimension.Y: return this.getYDataExtent(scaleByVisibleData);
+            default: return getExtent(datamodel.data, config[dimension]);
+        }
+    }
+    getXDataExtent() {
+        const { config, datamodel } = this;
+        return getExtent(datamodel.data, config.x);
+    }
+    getYDataExtent(scaleByVisibleData) {
+        const { config, datamodel } = this;
+        const data = scaleByVisibleData ? filterDataByRange(datamodel.data, this.xScale.domain(), config.x) : datamodel.data;
+        const yAccessors = (isArray(config.y) ? config.y : [config.y]);
+        return getExtent(data, ...yAccessors);
+    }
+}
+
+export { XYComponentCore };
+//# sourceMappingURL=index.js.map

package/core/xy-component/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/core/xy-component/index.ts"],"sourcesContent":["import { Selection } from 'd3-selection'\n\n// Core\nimport { ComponentCore } from 'core/component'\nimport { SeriesDataModel } from 'data-models/series'\n\n// Utils\nimport { filterDataByRange, getExtent, isArray } from 'utils/data'\n\n// Types\nimport { NumericAccessor } from 'types/accessor'\nimport { ContinuousScale, Scale, ScaleDimension } from 'types/scale'\n\n// Config\nimport { XYComponentConfig, XYComponentConfigInterface } from './config'\n\nexport class XYComponentCore<\n  Datum,\n  ConfigClass extends XYComponentConfig<Datum> = XYComponentConfig<Datum>,\n  ConfigInterface extends Partial<XYComponentConfigInterface<Datum>> = Partial<XYComponentConfigInterface<Datum>>,\n> extends ComponentCore<Datum[], ConfigClass, ConfigInterface> {\n  element: SVGGraphicsElement\n  g: Selection<SVGGElement, unknown, null, undefined>\n  config: ConfigClass\n  prevConfig: ConfigClass\n  datamodel: SeriesDataModel<Datum> = new SeriesDataModel()\n\n  /** Clippable components can be affected by a clipping path (set up in the container) */\n  clippable = true\n\n  /** Identifies whether the component displayed stacked data (eg StackedBar, Area) */\n  stacked = false\n\n  private _xScale: ContinuousScale = Scale.scaleLinear()\n  private _yScale: ContinuousScale = Scale.scaleLinear()\n\n  get xScale (): ContinuousScale {\n    return this.config.xScale || this._xScale\n  }\n\n  get yScale (): ContinuousScale {\n    return this.config.yScale || this._yScale\n  }\n\n  setConfig (config: ConfigInterface): void {\n    // We don't allow changing scales after the component has been initialized\n    if (this.config?.xScale) config.xScale = this.config.xScale\n    if (this.config?.yScale) config.yScale = this.config.yScale\n\n    super.setConfig(config)\n  }\n\n  setScaleDomain (dimension: ScaleDimension, domain: number[]): void {\n    if (dimension === ScaleDimension.X) this._xScale?.domain(domain)\n    if (dimension === ScaleDimension.Y) this._yScale?.domain(domain)\n  }\n\n  setScaleRange (dimension: ScaleDimension, range: number[]): void {\n    if (dimension === ScaleDimension.X) this._xScale?.range(range)\n    if (dimension === ScaleDimension.Y) this._yScale?.range(range)\n  }\n\n  setScale (dimension: ScaleDimension, scale: ContinuousScale): void {\n    if (scale && (dimension === ScaleDimension.X)) this._xScale = scale\n    if (scale && (dimension === ScaleDimension.Y)) this._yScale = scale\n  }\n\n  getDataExtent (dimension: ScaleDimension, scaleByVisibleData: boolean): number[] {\n    const { config, datamodel } = this\n\n    switch (dimension) {\n      case ScaleDimension.X: return this.getXDataExtent()\n      case ScaleDimension.Y: return this.getYDataExtent(scaleByVisibleData)\n      default: return getExtent(datamodel.data, config[dimension])\n    }\n  }\n\n  getXDataExtent (): number[] {\n    const { config, datamodel } = this\n    return getExtent(datamodel.data, config.x)\n  }\n\n  getYDataExtent (scaleByVisibleData: boolean): number[] {\n    const { config, datamodel } = this\n\n    const data = scaleByVisibleData ? filterDataByRange(datamodel.data, this.xScale.domain() as [number, number], config.x) : datamodel.data\n    const yAccessors = (isArray(config.y) ? config.y : [config.y]) as NumericAccessor<Datum>[]\n    return getExtent(data, ...yAccessors)\n  }\n}\n"],"names":[],"mappings":";;;;;AAEA;AAcM,MAAO,eAIX,SAAQ,aAAoD,CAAA;AAJ9D,IAAA,WAAA,GAAA;;AASE,QAAA,IAAA,CAAA,SAAS,GAA2B,IAAI,eAAe,EAAE,CAAA;;QAGzD,IAAS,CAAA,SAAA,GAAG,IAAI,CAAA;;QAGhB,IAAO,CAAA,OAAA,GAAG,KAAK,CAAA;AAEP,QAAA,IAAA,CAAA,OAAO,GAAoB,KAAK,CAAC,WAAW,EAAE,CAAA;AAC9C,QAAA,IAAA,CAAA,OAAO,GAAoB,KAAK,CAAC,WAAW,EAAE,CAAA;KAuDvD;AArDC,IAAA,IAAI,MAAM,GAAA;QACR,OAAO,IAAI,CAAC,MAAM,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,CAAA;KAC1C;AAED,IAAA,IAAI,MAAM,GAAA;QACR,OAAO,IAAI,CAAC,MAAM,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,CAAA;KAC1C;AAED,IAAA,SAAS,CAAE,MAAuB,EAAA;;;AAEhC,QAAA,IAAI,CAAA,EAAA,GAAA,IAAI,CAAC,MAAM,0CAAE,MAAM;YAAE,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAA;AAC3D,QAAA,IAAI,CAAA,EAAA,GAAA,IAAI,CAAC,MAAM,0CAAE,MAAM;YAAE,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAA;AAE3D,QAAA,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;KACxB;IAED,cAAc,CAAE,SAAyB,EAAE,MAAgB,EAAA;;AACzD,QAAA,IAAI,SAAS,KAAK,cAAc,CAAC,CAAC;YAAE,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,MAAM,CAAC,MAAM,CAAC,CAAA;AAChE,QAAA,IAAI,SAAS,KAAK,cAAc,CAAC,CAAC;YAAE,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,MAAM,CAAC,MAAM,CAAC,CAAA;KACjE;IAED,aAAa,CAAE,SAAyB,EAAE,KAAe,EAAA;;AACvD,QAAA,IAAI,SAAS,KAAK,cAAc,CAAC,CAAC;YAAE,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,KAAK,CAAC,KAAK,CAAC,CAAA;AAC9D,QAAA,IAAI,SAAS,KAAK,cAAc,CAAC,CAAC;YAAE,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,KAAK,CAAC,KAAK,CAAC,CAAA;KAC/D;IAED,QAAQ,CAAE,SAAyB,EAAE,KAAsB,EAAA;QACzD,IAAI,KAAK,KAAK,SAAS,KAAK,cAAc,CAAC,CAAC,CAAC;AAAE,YAAA,IAAI,CAAC,OAAO,GAAG,KAAK,CAAA;QACnE,IAAI,KAAK,KAAK,SAAS,KAAK,cAAc,CAAC,CAAC,CAAC;AAAE,YAAA,IAAI,CAAC,OAAO,GAAG,KAAK,CAAA;KACpE;IAED,aAAa,CAAE,SAAyB,EAAE,kBAA2B,EAAA;AACnE,QAAA,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAA;AAElC,QAAA,QAAQ,SAAS;YACf,KAAK,cAAc,CAAC,CAAC,EAAE,OAAO,IAAI,CAAC,cAAc,EAAE,CAAA;AACnD,YAAA,KAAK,cAAc,CAAC,CAAC,EAAE,OAAO,IAAI,CAAC,cAAc,CAAC,kBAAkB,CAAC,CAAA;AACrE,YAAA,SAAS,OAAO,SAAS,CAAC,SAAS,CAAC,IAAI,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC,CAAA;AAC7D,SAAA;KACF;IAED,cAAc,GAAA;AACZ,QAAA,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAA;QAClC,OAAO,SAAS,CAAC,SAAS,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,CAAA;KAC3C;AAED,IAAA,cAAc,CAAE,kBAA2B,EAAA;AACzC,QAAA,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAA;AAElC,QAAA,MAAM,IAAI,GAAG,kBAAkB,GAAG,iBAAiB,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAsB,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,IAAI,CAAA;QACxI,MAAM,UAAU,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAA6B,CAAA;AAC1F,QAAA,OAAO,SAAS,CAAC,IAAI,EAAE,GAAG,UAAU,CAAC,CAAA;KACtC;AACF;;;;"}

package/data-models/core.d.ts

@@ -0,0 +1,6 @@
+export declare class CoreDataModel<T> {
+    protected _data: T | undefined;
+    get data(): T;
+    set data(value: T);
+    constructor(data?: T);
+}

package/data-models/core.js

@@ -0,0 +1,14 @@
+class CoreDataModel {
+    constructor(data) {
+        this.data = data;
+    }
+    get data() {
+        return this._data;
+    }
+    set data(value) {
+        this._data = value;
+    }
+}
+
+export { CoreDataModel };
+//# sourceMappingURL=core.js.map

package/data-models/core.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"core.js","sources":["../../src/data-models/core.ts"],"sourcesContent":["export class CoreDataModel<T> {\n  protected _data: T | undefined\n\n  get data (): T {\n    return this._data\n  }\n\n  set data (value: T) {\n    this._data = value\n  }\n\n  constructor (data?: T) {\n    this.data = data\n  }\n}\n"],"names":[],"mappings":"MAAa,aAAa,CAAA;AAWxB,IAAA,WAAA,CAAa,IAAQ,EAAA;AACnB,QAAA,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;KACjB;AAVD,IAAA,IAAI,IAAI,GAAA;QACN,OAAO,IAAI,CAAC,KAAK,CAAA;KAClB;IAED,IAAI,IAAI,CAAE,KAAQ,EAAA;AAChB,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;KACnB;AAKF;;;;"}