@heartlandone/vega 2.2.0 → 2.4.0

package/dist/collection/components/vega-segment-control/vega-segment-control.js

@@ -0,0 +1,265 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, Element, Event, Host, h, Prop, Watch, State } from '@stencil/core';
+import { sanitizeVegaComponent } from '../../utils/component';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
+import { VegaSegmentControlRenderer } from './slimmers/renderers/vega-segment-control-renderer';
+import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/eventEmitSlimmer';
+import { VegaChange } from '../../helpers/event-manager/eventID/vegaEventId';
+import { VegaSegmentControlSelectedController } from './slimmers/controllers/vega-segment-control-selected-controller';
+import { PageResizeObserverSlimmer } from '../../helpers/slimmers/pageResizeObserverSlimmer';
+import { VegaSegmentOverflowController } from './slimmers/controllers/vega-segment-overflow-controller';
+import { VegaSegmentRenderer } from './slimmers/renderers/vega-segment-renderer';
+export class VegaSegmentControl {
+  constructor() {
+    this.globalSlimmers = {};
+    this.segmentControlRenderer = new VegaSegmentControlRenderer();
+    this.segmentOverflowController = new VegaSegmentOverflowController();
+    this.segmentRenderer = new VegaSegmentRenderer();
+    this.selectedController = new VegaSegmentControlSelectedController();
+    this.changeEventEmitter = createEventEmitSlimmer(VegaSegmentControl, VegaChange);
+    this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer({
+      callback: /* istanbul ignore next */ () => {
+        this.segmentControlWidth = this.host.clientWidth;
+        this.segmentOverflowController.setIsOverflowBlockSegments();
+      },
+      shouldTrigger: /* istanbul ignore next */ () => {
+        return this.host.clientWidth !== this.segmentControlWidth;
+      },
+    });
+    this.segmentControlWidth = 0;
+    this.isOverflowBlockSegments = false;
+    /**
+     * Specifies whether the segment control spans the
+     *    full width of its parent element.
+     */
+    this.block = false;
+    /**
+     * Specifies the size of the segment control.
+     */
+    this.size = 'medium';
+    /**
+     * Specifies the options available within the segment control.
+     *    Please note that we advise against having more than four segments in a segment control.
+     */
+    this.segments = [];
+    /**
+     * Specifies the variant of the segment control.
+     *
+     * The following options are available for the `variant` property:
+     * - `default`:
+     *      The segment control is rendered with both icon and text if configured,
+     * - `text-only`:
+     *      The segment control is rendered with text only regardless of the configuration of icon.
+     * - `icon-only`:
+     *      The segment control is rendered with icon only, text will be showed as the icon's tooltip if configured.
+     */
+    this.variant = 'default';
+  }
+  /** The below method is e2e-test covered in
+   *  @see{module:vega-segment-control-set-block-e2e}
+   *  @see{module:vega-segment-control-set-block-resize-screen-e2e}
+   */
+  /* istanbul ignore next */
+  watchBlock() {
+    methodPlaceholder();
+  }
+  watchSize() {
+    methodPlaceholder();
+  }
+  watchSegments() {
+    methodPlaceholder();
+  }
+  watchSelected() {
+    methodPlaceholder();
+  }
+  componentWillLoad() {
+    methodPlaceholder();
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, { class: { 'vega-segment-control-block': this.block } }, this.segmentControlRenderer.render()), this.host);
+  }
+  static get is() { return "vega-segment-control"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vega-segment-control.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vega-segment-control.css"]
+  }; }
+  static get properties() { return {
+    "block": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies whether the segment control spans the\n   full width of its parent element."
+      },
+      "attribute": "block",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'medium' | 'small'",
+        "resolved": "\"medium\" | \"small\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the size of the segment control."
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'medium'"
+    },
+    "segments": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "VegaSegmentProps[]",
+        "resolved": "VegaSegmentProps[]",
+        "references": {
+          "VegaSegmentProps": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the options available within the segment control.\n   Please note that we advise against having more than four segments in a segment control."
+      },
+      "defaultValue": "[]"
+    },
+    "selected": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the key of the currently selected segment\n   within the segment control."
+      },
+      "attribute": "selected",
+      "reflect": false
+    },
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "VegaSegmentControlVariant",
+        "resolved": "\"default\" | \"icon-only\" | \"text-only\"",
+        "references": {
+          "VegaSegmentControlVariant": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the variant of the segment control.\n\nThe following options are available for the `variant` property:\n- `default`:\n     The segment control is rendered with both icon and text if configured,\n- `text-only`:\n     The segment control is rendered with text only regardless of the configuration of icon.\n- `icon-only`:\n     The segment control is rendered with icon only, text will be showed as the icon's tooltip if configured."
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "'default'"
+    }
+  }; }
+  static get states() { return {
+    "isOverflowBlockSegments": {}
+  }; }
+  static get events() { return [{
+      "method": "vegaChange",
+      "name": "vegaChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "An event emitter notifying changes\n   in the selected segment."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }, {
+      "method": "change",
+      "name": "change",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }],
+        "text": "A native event emitter notifying changes\n   in the selected segment."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "block",
+      "methodName": "watchBlock"
+    }, {
+      "propName": "size",
+      "methodName": "watchSize"
+    }, {
+      "propName": "segments",
+      "methodName": "watchSegments"
+    }, {
+      "propName": "selected",
+      "methodName": "watchSelected"
+    }]; }
+}
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaSegmentControl.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSegmentControl.prototype, "segmentControlRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSegmentControl.prototype, "segmentOverflowController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSegmentControl.prototype, "segmentRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSegmentControl.prototype, "selectedController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSegmentControl.prototype, "changeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSegmentControl.prototype, "pageResizeObserverSlimmer", void 0);

package/dist/collection/components/vega-virtual-scroll/slimmers/controllers/vega-virtual-scroll-mode-controller.js

@@ -0,0 +1,70 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+/**
+ * The class is responsible for managing the visibility and behavior of the tooltip content box.
+ */
+export class VegaVirtualScrollModeController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.mode = 'normal';
+  }
+  /**
+   * The componentWillLoad function is used to initialize mode.
+   */
+  componentWillLoad() {
+    this.setMode();
+  }
+  /**
+   * While watchVirtualizationThreshold changed, we should reset the mode.
+   */
+  watchVirtualizationThreshold() {
+    this.setMode();
+  }
+  /**
+   * While source changed, we should reset the mode.
+   */
+  watchSourceChange() {
+    this.setMode();
+  }
+  /**
+   * Get current mode
+   *
+   * @returns {VirtualScrollMode} - mode
+   */
+  getMode() {
+    return this.mode;
+  }
+  /**
+   * Set the mode of the pager to virtual or normal depending on the length of
+   */
+  setMode() {
+    const originalMode = this.mode;
+    this.mode = this.source.length > this.virtualizationThreshold ? 'virtual' : 'normal';
+    if (originalMode === 'normal' && this.mode === 'virtual') {
+      this.positionController.changeModeFromNormalToVirtual();
+    }
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaVirtualScrollModeController.prototype, "source", void 0);
+__decorate([
+  MapToComponentField()
+], VegaVirtualScrollModeController.prototype, "virtualizationThreshold", void 0);
+__decorate([
+  MapToComponentField()
+], VegaVirtualScrollModeController.prototype, "positionController", void 0);
+__decorate([
+  MapToComponentMethod('componentWillLoad')
+], VegaVirtualScrollModeController.prototype, "componentWillLoad", null);
+__decorate([
+  MapToComponentMethod('watchVirtualizationThreshold')
+], VegaVirtualScrollModeController.prototype, "watchVirtualizationThreshold", null);
+__decorate([
+  MapToComponentMethod('watchSourceChange')
+], VegaVirtualScrollModeController.prototype, "watchSourceChange", null);

package/dist/collection/components/vega-virtual-scroll/slimmers/controllers/vega-virtual-scroll-position-controller.js

@@ -0,0 +1,171 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+/**
+ * The `VegaVirtualScrollPositionController` class in TypeScript implements virtual scrolling functionality
+ * by managing source data, item heights, viewport settings, and scroll positions.
+ */
+export class VegaVirtualScrollPositionController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.extendItemsCount = 10;
+    this.totalCount = 0;
+    this.viewportItemsCount = 0;
+  }
+  /**
+   * The componentWillLoad function is used to initialize virtual scrolling in a TypeScript component.
+   */
+  componentWillLoad() {
+    this.initVirtualScroll();
+    this.initPositionConfig();
+  }
+  /**
+   * The function `watchSourceChange` initializes virtual scrolling if the source items have changed.
+   *
+   * @param {SourceItemType[]} newValue - newValue is an array of items of type SourceItemType that
+   * represents the new source data.
+   * @param {SourceItemType[]} oldValue - The `oldValue` parameter in the `watchSourceChange` function
+   * represents the previous value of the source items before the change occurred. It is used to compare
+   * with the new value (`newValue`) to determine if there has been a change in the source items.
+   */
+  watchSourceChange(newValue, oldValue) {
+    if (!this.isSameSource(newValue, oldValue)) {
+      this.initVirtualScroll();
+    }
+  }
+  /**
+   * The function `watchApproxItemHeight` initializes virtual scrolling.
+   */
+  watchApproxItemHeight() {
+    this.initVirtualScroll();
+  }
+  /**
+   * The function `watchViewportMaxHeight` initializes virtual scrolling.
+   */
+  watchViewportMaxHeight() {
+    this.initVirtualScroll();
+  }
+  /**
+   * Get maxStartIndex
+   *
+   * @returns {number} - maxStartIndex
+   */
+  getMaxStartIndex() {
+    return this.maxStartIndex;
+  }
+  /**
+   * While scrollTop of container change, the startIndex, endIndex, viewPortStartIndex and transformY will be change.
+   * The following is the process of change:
+   *
+   *---scrollTop---startIndex---viewportStartIndex---endIndex---transformY
+   *---30----------0------------0--------------------18---------0
+   *---40----------0------------1--------------------19---------0
+   *---320---------0------------8--------------------26---------0
+   *---400---------0------------10-------------------28---------0
+   *---480---------2------------12-------------------30---------80
+   *---800---------10-----------20-------------------38---------400
+   */
+  setPositionByScrollTop() {
+    if (this.modeController.getMode() === 'virtual') {
+      const currentIndex = Math.floor(this.scrollTop / this.approxItemHeight);
+      const startIndex = Math.min(Math.max(currentIndex - this.extendItemsCount, 0), this.maxStartIndex);
+      const viewportStartIndex = startIndex === 0 ? currentIndex : startIndex + this.extendItemsCount;
+      const endIndex = viewportStartIndex + this.viewportItemsCount + this.extendItemsCount;
+      const transformY = Math.min(Math.max(this.scrollTop - this.extendItemsCount * this.approxItemHeight, 0), this.maxStartIndex * this.approxItemHeight);
+      this.positionConfig = { startIndex, viewportStartIndex, endIndex, transformY };
+    }
+  }
+  /**
+   * While mode change from `normal` to `virtual`, we should init virtual scroll and set the position.
+   */
+  changeModeFromNormalToVirtual() {
+    this.initVirtualScroll();
+    this.setPositionByScrollTop();
+  }
+  /**
+   * The function `initVirtualScroll` initializes variables for a virtual scrolling feature in a
+   * TypeScript component.
+   */
+  initVirtualScroll() {
+    if (this.modeController.getMode() === 'virtual') {
+      this.totalCount = this.source.length;
+      this.viewportItemsCount = Math.ceil(this.viewportMaxHeight / this.approxItemHeight);
+      this.maxStartIndex = this.totalCount - this.viewportItemsCount - this.extendItemsCount;
+    }
+  }
+  /**
+   * Init positionConfig while componentWillLoad
+   */
+  initPositionConfig() {
+    this.positionConfig = {
+      startIndex: 0,
+      viewportStartIndex: 0,
+      endIndex: this.viewportItemsCount + this.extendItemsCount,
+      transformY: 0,
+    };
+    this.scrollableController.resetScrollTop();
+  }
+  /**
+   * The function `isSameSource` compares two arrays of objects based on a specific identifier and
+   * returns true if they are the same.
+   *
+   * @param {SourceItemType[]} first - `first` is an array of `SourceItemType` elements.
+   * @param {SourceItemType[]} second - The `second` parameter in the `isSameSource` method is an array
+   * of `SourceItemType` elements.
+   * @returns {boolean} The `isSameSource` method is returning a boolean value, either `true` or `false`. It checks
+   * if the `first` and `second` arrays of `SourceItemType` objects have the same length and if the
+   * `sourceItemIdentifier` property of each object at the same index in both arrays is equal. If all
+   * conditions are met, it returns `true`, otherwise it returns `
+   */
+  isSameSource(first, second) {
+    if (first.length !== second.length)
+      return false;
+    for (let i = 0; i < first.length; i++) {
+      if (first[i][this.sourceItemIdentifier] !== second[i][this.sourceItemIdentifier]) {
+        return false;
+      }
+    }
+    /* istanbul ignore next */
+    return true;
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaVirtualScrollPositionController.prototype, "sourceItemIdentifier", void 0);
+__decorate([
+  MapToComponentField()
+], VegaVirtualScrollPositionController.prototype, "source", void 0);
+__decorate([
+  MapToComponentField()
+], VegaVirtualScrollPositionController.prototype, "approxItemHeight", void 0);
+__decorate([
+  MapToComponentField()
+], VegaVirtualScrollPositionController.prototype, "viewportMaxHeight", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaVirtualScrollPositionController.prototype, "positionConfig", void 0);
+__decorate([
+  MapToComponentField()
+], VegaVirtualScrollPositionController.prototype, "scrollTop", void 0);
+__decorate([
+  MapToComponentField()
+], VegaVirtualScrollPositionController.prototype, "scrollableController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaVirtualScrollPositionController.prototype, "modeController", void 0);
+__decorate([
+  MapToComponentMethod('componentWillLoad')
+], VegaVirtualScrollPositionController.prototype, "componentWillLoad", null);
+__decorate([
+  MapToComponentMethod('watchSourceChange')
+], VegaVirtualScrollPositionController.prototype, "watchSourceChange", null);
+__decorate([
+  MapToComponentMethod('watchApproxItemHeight')
+], VegaVirtualScrollPositionController.prototype, "watchApproxItemHeight", null);
+__decorate([
+  MapToComponentMethod('watchViewportMaxHeight')
+], VegaVirtualScrollPositionController.prototype, "watchViewportMaxHeight", null);