@globalpayments/vega 2.36.0 → 2.37.1

package/dist/collection/components/vega-app-footer/vega-app-footer.js

@@ -25,6 +25,7 @@ export class VegaAppFooter {
      *    with a reference to the current year.
      *
      * @vegaVersion 1.15.0
+     * @defaultValue © {{currentYear}} Heartland Payment Systems, LLC – a Global Payments company. All rights reserved.
      */
     this.content = `© ${new Date().getFullYear()} Heartland Payment Systems, LLC – a Global Payments company. All rights reserved.`;
     /**
@@ -39,6 +40,7 @@ export class VegaAppFooter {
      *    in the app footer should navigate to when clicked.
      *
      * @vegaVersion 1.15.0
+     * @defaultValue https://www.heartland.us/terms
      */
     this.termOfUseUrl = HEARTLAND_TOS_URL;
     /**
@@ -62,6 +64,7 @@ export class VegaAppFooter {
      *    navigate to when clicked.
      *
      * @vegaVersion 1.15.0
+     * @defaultValue https://www.heartland.us/privacy-policy
      */
     this.privacyPolicyUrl = HEARTLAND_PRIVACY_URL;
     /**
@@ -174,6 +177,9 @@ export class VegaAppFooter {
         "tags": [{
             "name": "vegaVersion",
             "text": "1.15.0"
+          }, {
+            "name": "defaultValue",
+            "text": "\u00A9 {{currentYear}} Heartland Payment Systems, LLC \u2013 a Global Payments company. All rights reserved."
           }],
         "text": "Specifies the content to be displayed in the app footer.\n\nBy default, it includes Heartland's official copyright message\n   with a reference to the current year."
       },
@@ -216,6 +222,9 @@ export class VegaAppFooter {
         "tags": [{
             "name": "vegaVersion",
             "text": "1.15.0"
+          }, {
+            "name": "defaultValue",
+            "text": "https://www.heartland.us/terms"
           }],
         "text": "Specifies the URL or web address that the Terms of Use link\n   in the app footer should navigate to when clicked."
       },
@@ -284,6 +293,9 @@ export class VegaAppFooter {
         "tags": [{
             "name": "vegaVersion",
             "text": "1.15.0"
+          }, {
+            "name": "defaultValue",
+            "text": "https://www.heartland.us/privacy-policy"
           }],
         "text": "Specifies the URL or web address that the\n   Privacy Policy link in the app footer should\n   navigate to when clicked."
       },

package/dist/collection/components/vega-app-header-button/slimmers/renderers/vega-app-header-button-dropdown-renderer.js

@@ -0,0 +1,124 @@
+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 { h } from '@stencil/core';
+import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaDropdownClick, VegaDropdownHide, VegaDropdownShow, } from '../../../../helpers/event-manager/event-id/vega-event-id';
+/**
+ * Renderer class for the Vega App Header Button Dropdown.
+ * This class extends the VegaSlimmer and is responsible for rendering the dropdown component and managing its state and events.
+ */
+export class VegaAppHeaderButtonDropdownRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * emit dropdown click event when component get dropdown item click
+     *
+     * @param {NotifyObserverPayload<string>} input the click detail
+     */
+    this.triggerDropdownClickEvent = (input) => {
+      this.dropdownClickEventEmitter.emit(input.detail);
+    };
+    /**
+     * Shows the dropdown component.
+     */
+    this.onDropdownShow = () => {
+      this.isDropdownShow = true;
+    };
+    /**
+     * Hides the dropdown component.
+     */
+    this.onDropdownHide = () => {
+      this.isDropdownShow = false;
+    };
+  }
+  connectedCallback() {
+    this.isTemplateMode = this.hasSlotItems();
+  }
+  /**
+   * The function appends host items to a dropdown element.
+   */
+  appendHostItemsToDropdown() {
+    const items = this.host.querySelector('[slot=items]');
+    if (items && this.itemsSlotRef && this.dropdownRef) {
+      this.itemsSlotRef.remove();
+      this.dropdownRef.append(items);
+    }
+  }
+  /**
+   * Determines if the dropdown should be rendered based on the presence of the dropdown configuration.
+   *
+   * @returns {boolean} True if the dropdown configuration is present, otherwise false.
+   */
+  shouldRenderDropdown() {
+    return !!((this.dropdown && this.dropdown.source && this.dropdown.source.length) ||
+      this.isTemplateMode);
+  }
+  getDropdownRef() {
+    return this.dropdownRef;
+  }
+  /**
+   * Renders the dropdown component with the provided children.
+   *
+   * @param {HTMLElement} children HTML element children to be rendered inside the dropdown.
+   * @returns {HTMLElement} The rendered dropdown component.
+   */
+  render(children) {
+    return (h("vega-dropdown", Object.assign({ trigger: "click" }, this.dropdown, { ref: (ref) => {
+        this.dropdownRef = ref;
+        this.dropdownEventPrevent.setup();
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaDropdownShow, () => {
+          this.onDropdownShow();
+        });
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaDropdownHide, () => {
+          this.onDropdownHide();
+        });
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaDropdownClick, this.triggerDropdownClickEvent);
+      } }),
+      children,
+      this.renderItemsSlot()));
+  }
+  /**
+   * Renders the items slot.
+   *
+   * @returns {Nullable<HTMLElement>} The rendered items slot.
+   */
+  renderItemsSlot() {
+    return (this.isTemplateMode && (h("div", { slot: "items", ref: (ref) => {
+        this.itemsSlotRef = ref;
+      } })));
+  }
+  /**
+   * Checks if the dropdown has items.
+   *
+   * @returns {boolean} True if the dropdown has items, otherwise false.
+   */
+  hasSlotItems() {
+    return !!this.host.querySelector('[slot=items]');
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaAppHeaderButtonDropdownRenderer.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaAppHeaderButtonDropdownRenderer.prototype, "dropdown", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaAppHeaderButtonDropdownRenderer.prototype, "isDropdownShow", void 0);
+__decorate([
+  MapToComponentField()
+], VegaAppHeaderButtonDropdownRenderer.prototype, "dropdownEventPrevent", void 0);
+__decorate([
+  MapToComponentField()
+], VegaAppHeaderButtonDropdownRenderer.prototype, "dropdownClickEventEmitter", void 0);
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], VegaAppHeaderButtonDropdownRenderer.prototype, "connectedCallback", null);
+__decorate([
+  MapToComponentMethod('componentDidLoad')
+], VegaAppHeaderButtonDropdownRenderer.prototype, "appendHostItemsToDropdown", null);

package/dist/collection/components/vega-app-header-button/vega-app-header-button.js

@@ -15,10 +15,10 @@ import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
 import { PageResizeObserverSlimmer } from '../../helpers/slimmers/page-resize-observer-slimmer';
 import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
-import { DomNodeSubjectObserverFactory } from '../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
-import { VegaClick, VegaDropdownClick, VegaDropdownHide, VegaDropdownShow, } from '../../helpers/event-manager/event-id/vega-event-id';
+import { VegaClick, VegaDropdownClick } from '../../helpers/event-manager/event-id/vega-event-id';
 import { VegaMenuArrowIconRenderer } from './slimmers/renderers/vega-menu-arrow-icon-renderer';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
+import { VegaAppHeaderButtonDropdownRenderer } from './slimmers/renderers/vega-app-header-button-dropdown-renderer';
 /**
  * @vegaVersion 1.11.0
  */
@@ -30,7 +30,7 @@ export class VegaAppHeaderButton {
      * @see{module:vega-app-header-button-resize-e2e}
      */
     this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer();
-    this.dropdownEventPrevent = new ChildNodesEventPreventSlimmer([VegaClick, VegaDropdownClick], () => this.dropdownRef, {
+    this.dropdownEventPrevent = new ChildNodesEventPreventSlimmer([VegaClick, VegaDropdownClick], () => this.dropdownRenderer.getDropdownRef(), {
       customPreventHandle: (e) => {
         e.stopPropagation();
       },
@@ -39,6 +39,7 @@ export class VegaAppHeaderButton {
     this.dropdownClickEventEmitter = createEventEmitSlimmer(VegaAppHeaderButton, VegaDropdownClick);
     this.vegaMenuArrowIconRenderer = new VegaMenuArrowIconRenderer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.dropdownRenderer = new VegaAppHeaderButtonDropdownRenderer();
     /**
      * Used to determine whether the avatar image is loaded or not.
      */
@@ -172,23 +173,9 @@ export class VegaAppHeaderButton {
         h("vega-icon", { icon: this.avatar.icon, size: iconSize })));
     };
     this.renderDropdownContainer = (children) => {
-      return this.dropdown ? (h("vega-dropdown", Object.assign({ trigger: "click" }, this.dropdown, { ref: (ref) => {
-          this.dropdownRef = ref;
-          this.dropdownEventPrevent.setup();
-          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaDropdownShow, () => {
-            this.onDropdownShow();
-          });
-          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaDropdownHide, () => {
-            this.onDropdownHide();
-          });
-          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaDropdownClick, this.triggerDropdownClickEvent);
-        } }), children)) : (children);
-    };
-    this.onDropdownShow = () => {
-      this.isDropdownShow = true;
-    };
-    this.onDropdownHide = () => {
-      this.isDropdownShow = false;
+      return this.dropdownRenderer.shouldRenderDropdown()
+        ? this.dropdownRenderer.render(children)
+        : children;
     };
     /**
      * The below method is e2e-test covered in
@@ -207,14 +194,6 @@ export class VegaAppHeaderButton {
       this.setAvatarImgLoaded(false);
       forceUpdate(this.host);
     };
-    /**
-     * emit dropdown click event when component get dropdown item click
-     *
-     * @param {NotifyObserverPayload<string>} input the click detail
-     */
-    this.triggerDropdownClickEvent = (input) => {
-      this.dropdownClickEventEmitter.emit(input.detail);
-    };
   }
   /**
    * The below method is e2e-test covered in
@@ -228,8 +207,7 @@ export class VegaAppHeaderButton {
     }
   }
   render() {
-    var _a;
-    const arrowDownIconVisible = this.showMenuArrowIcon && ((_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.source.length) > 0;
+    const arrowDownIconVisible = this.showMenuArrowIcon && this.dropdownRenderer.shouldRenderDropdown();
     const labelVisible = this.label && this.showLabel;
     const withTooltip = this.label && !this.showLabel;
     const classNames = arrayToClassString([
@@ -252,7 +230,7 @@ export class VegaAppHeaderButton {
       "mutable": false,
       "complexType": {
         "original": "VegaAppHeaderButtonDropdownConfig",
-        "resolved": "{ matchTargetWidth?: boolean; maxHeight?: number; maxWidth?: ResponsiveType<SizeType>; minWidth?: ResponsiveType<SizeType>; positionRelativeTo?: string; size?: ResponsiveType<SizeType>; source?: VegaDropdownSourceItem[]; translocation?: ResponsiveType<TranslocationType>; trigger?: \"click\" | \"hover\" | \"none\"; }",
+        "resolved": "{ size?: ResponsiveType<SizeType>; trigger?: \"hover\" | \"click\" | \"none\"; source?: VegaDropdownSourceItem[]; matchTargetWidth?: boolean; maxHeight?: number; positionRelativeTo?: string; minWidth?: ResponsiveType<SizeType>; maxWidth?: ResponsiveType<SizeType>; translocation?: ResponsiveType<TranslocationType>; }",
         "references": {
           "VegaAppHeaderButtonDropdownConfig": {
             "location": "import",
@@ -562,3 +540,6 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaAppHeaderButton.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaAppHeaderButton.prototype, "dropdownRenderer", void 0);

package/dist/collection/components/vega-box/vega-box.js

@@ -498,6 +498,9 @@ export class VegaBox {
         "tags": [{
             "name": "vegaVersion",
             "text": "2.3.0"
+          }, {
+            "name": "nativeTypeRedirection",
+            "text": "https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis"
           }],
         "text": "Specifies the base size of the box."
       },
@@ -527,6 +530,9 @@ export class VegaBox {
         "tags": [{
             "name": "vegaVersion",
             "text": "2.3.0"
+          }, {
+            "name": "nativeTypeRedirection",
+            "text": "https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow"
           }],
         "text": "Specifies how the box is grow."
       },
@@ -556,6 +562,9 @@ export class VegaBox {
         "tags": [{
             "name": "vegaVersion",
             "text": "2.3.0"
+          }, {
+            "name": "nativeTypeRedirection",
+            "text": "https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink"
           }],
         "text": "Specifies how much the box shrinks."
       },
@@ -585,6 +594,9 @@ export class VegaBox {
         "tags": [{
             "name": "vegaVersion",
             "text": "2.3.0"
+          }, {
+            "name": "nativeTypeRedirection",
+            "text": "https://developer.mozilla.org/en-US/docs/Web/CSS/order"
           }],
         "text": "Specifies the display order of the box."
       },
@@ -614,6 +626,9 @@ export class VegaBox {
         "tags": [{
             "name": "vegaVersion",
             "text": "2.3.0"
+          }, {
+            "name": "nativeTypeRedirection",
+            "text": "https://developer.mozilla.org/en-US/docs/Web/CSS/flex"
           }],
         "text": "Specifies how the box adjusts its size, growth, and alignment within a flex container."
       },
@@ -625,7 +640,7 @@ export class VegaBox {
       "mutable": false,
       "complexType": {
         "original": "ResponsiveType<AlignSelfType>",
-        "resolved": "\"auto\" | \"inherit\" | \"initial\" | \"normal\" | \"revert\" | \"revert-layer\" | \"unset\" | { S?: AlignSelfType; M?: AlignSelfType; L?: AlignSelfType; XL?: AlignSelfType; default?: AlignSelfType; } | ({ [x: number]: string; normalize: { (form: \"NFC\" | \"NFD\" | \"NFKC\" | \"NFKD\"): string; (form?: string): string; }; search: { (regexp: string | RegExp): number; (searcher: { [Symbol.search](string: string): number; }): number; }; small: () => string; [Symbol.iterator]: () => IterableIterator<string>; toString: () => string; charAt: (pos: number) => string; charCodeAt: (index: number) => number; concat: (...strings: string[]) => string; indexOf: (searchString: string, position?: number) => number; lastIndexOf: (searchString: string, position?: number) => number; localeCompare: { (that: string): number; (that: string, locales?: string | string[], options?: CollatorOptions): number; }; match: { (regexp: string | RegExp): RegExpMatchArray; (matcher: { [Symbol.match](string: string): RegExpMatchArray; }): RegExpMatchArray; }; replace: { (searchValue: string | RegExp, replaceValue: string): string; (searchValue: string | RegExp, replacer: (substring: string, ...args: any[]) => string): string; (searchValue: { [Symbol.replace](string: string, replaceValue: string): string; }, replaceValue: string): string; (searchValue: { [Symbol.replace](string: string, replacer: (substring: string, ...args: any[]) => string): string; }, replacer: (substring: string, ...args: any[]) => string): string; }; slice: (start?: number, end?: number) => string; split: { (separator: string | RegExp, limit?: number): string[]; (splitter: { [Symbol.split](string: string, limit?: number): string[]; }, limit?: number): string[]; }; substring: (start: number, end?: number) => string; toLowerCase: () => string; toLocaleLowerCase: (locales?: string | string[]) => string; toUpperCase: () => string; toLocaleUpperCase: (locales?: string | string[]) => string; trim: () => string; readonly length: number; substr: (from: number, length?: number) => string; valueOf: () => string; codePointAt: (pos: number) => number; includes: (searchString: string, position?: number) => boolean; endsWith: (searchString: string, endPosition?: number) => boolean; repeat: (count: number) => string; startsWith: (searchString: string, position?: number) => boolean; anchor: (name: string) => string; big: () => string; blink: () => string; bold: () => string; fixed: () => string; fontcolor: (color: string) => string; fontsize: { (size: number): string; (size: string): string; }; italics: () => string; link: (url: string) => string; strike: () => string; sub: () => string; sup: () => string; padStart: (maxLength: number, fillString?: string) => string; padEnd: (maxLength: number, fillString?: string) => string; trimEnd: () => string; trimStart: () => string; trimLeft: () => string; trimRight: () => string; matchAll: (regexp: RegExp) => IterableIterator<RegExpMatchArray>; at: (index: number) => string; })",
+        "resolved": "\"auto\" | \"inherit\" | \"initial\" | \"normal\" | \"revert\" | \"revert-layer\" | \"unset\" | { S?: AlignSelfType; M?: AlignSelfType; L?: AlignSelfType; XL?: AlignSelfType; default?: AlignSelfType; } | ({ [x: number]: string; small: () => string; [Symbol.iterator]: () => IterableIterator<string>; toString: () => string; charAt: (pos: number) => string; charCodeAt: (index: number) => number; concat: (...strings: string[]) => string; indexOf: (searchString: string, position?: number) => number; lastIndexOf: (searchString: string, position?: number) => number; localeCompare: { (that: string): number; (that: string, locales?: string | string[], options?: CollatorOptions): number; }; match: { (regexp: string | RegExp): RegExpMatchArray; (matcher: { [Symbol.match](string: string): RegExpMatchArray; }): RegExpMatchArray; }; replace: { (searchValue: string | RegExp, replaceValue: string): string; (searchValue: string | RegExp, replacer: (substring: string, ...args: any[]) => string): string; (searchValue: { [Symbol.replace](string: string, replaceValue: string): string; }, replaceValue: string): string; (searchValue: { [Symbol.replace](string: string, replacer: (substring: string, ...args: any[]) => string): string; }, replacer: (substring: string, ...args: any[]) => string): string; }; search: { (regexp: string | RegExp): number; (searcher: { [Symbol.search](string: string): number; }): number; }; slice: (start?: number, end?: number) => string; split: { (separator: string | RegExp, limit?: number): string[]; (splitter: { [Symbol.split](string: string, limit?: number): string[]; }, limit?: number): string[]; }; substring: (start: number, end?: number) => string; toLowerCase: () => string; toLocaleLowerCase: (locales?: string | string[]) => string; toUpperCase: () => string; toLocaleUpperCase: (locales?: string | string[]) => string; trim: () => string; readonly length: number; substr: (from: number, length?: number) => string; valueOf: () => string; codePointAt: (pos: number) => number; includes: (searchString: string, position?: number) => boolean; endsWith: (searchString: string, endPosition?: number) => boolean; normalize: { (form: \"NFC\" | \"NFD\" | \"NFKC\" | \"NFKD\"): string; (form?: string): string; }; repeat: (count: number) => string; startsWith: (searchString: string, position?: number) => boolean; anchor: (name: string) => string; big: () => string; blink: () => string; bold: () => string; fixed: () => string; fontcolor: (color: string) => string; fontsize: { (size: number): string; (size: string): string; }; italics: () => string; link: (url: string) => string; strike: () => string; sub: () => string; sup: () => string; padStart: (maxLength: number, fillString?: string) => string; padEnd: (maxLength: number, fillString?: string) => string; trimEnd: () => string; trimStart: () => string; trimLeft: () => string; trimRight: () => string; matchAll: (regexp: RegExp) => IterableIterator<RegExpMatchArray>; at: (index: number) => string; })",
         "references": {
           "ResponsiveType": {
             "location": "import",
@@ -643,6 +658,9 @@ export class VegaBox {
         "tags": [{
             "name": "vegaVersion",
             "text": "2.3.0"
+          }, {
+            "name": "nativeTypeRedirection",
+            "text": "https://developer.mozilla.org/en-US/docs/Web/CSS/align-self"
           }],
         "text": "Specifies how the box aligns itself within its container."
       },
@@ -672,6 +690,9 @@ export class VegaBox {
         "tags": [{
             "name": "vegaVersion",
             "text": "2.3.0"
+          }, {
+            "name": "nativeTypeRedirection",
+            "text": "https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self"
           }],
         "text": "Specifies how a single box justifies its content along the main axis within its container."
       },
@@ -683,7 +704,7 @@ export class VegaBox {
       "mutable": false,
       "complexType": {
         "original": "ResponsiveType<GridColumnType>",
-        "resolved": "\"auto / auto\" | \"auto\" | `${number} / ${number}` | `${number} / auto` | `${number} / span ${number}` | `auto / ${number}` | `auto / span ${number}` | `span ${number} / ${number}` | `span ${number} / auto` | `span ${number} / span ${number}` | `span ${number}` | number | { S?: GridColumnType; M?: GridColumnType; L?: GridColumnType; XL?: GridColumnType; default?: GridColumnType; } | ({ [x: number]: string; normalize: { (form: \"NFC\" | \"NFD\" | \"NFKC\" | \"NFKD\"): string; (form?: string): string; }; search: { (regexp: string | RegExp): number; (searcher: { [Symbol.search](string: string): number; }): number; }; small: () => string; [Symbol.iterator]: () => IterableIterator<string>; toString: () => string; charAt: (pos: number) => string; charCodeAt: (index: number) => number; concat: (...strings: string[]) => string; indexOf: (searchString: string, position?: number) => number; lastIndexOf: (searchString: string, position?: number) => number; localeCompare: { (that: string): number; (that: string, locales?: string | string[], options?: CollatorOptions): number; }; match: { (regexp: string | RegExp): RegExpMatchArray; (matcher: { [Symbol.match](string: string): RegExpMatchArray; }): RegExpMatchArray; }; replace: { (searchValue: string | RegExp, replaceValue: string): string; (searchValue: string | RegExp, replacer: (substring: string, ...args: any[]) => string): string; (searchValue: { [Symbol.replace](string: string, replaceValue: string): string; }, replaceValue: string): string; (searchValue: { [Symbol.replace](string: string, replacer: (substring: string, ...args: any[]) => string): string; }, replacer: (substring: string, ...args: any[]) => string): string; }; slice: (start?: number, end?: number) => string; split: { (separator: string | RegExp, limit?: number): string[]; (splitter: { [Symbol.split](string: string, limit?: number): string[]; }, limit?: number): string[]; }; substring: (start: number, end?: number) => string; toLowerCase: () => string; toLocaleLowerCase: (locales?: string | string[]) => string; toUpperCase: () => string; toLocaleUpperCase: (locales?: string | string[]) => string; trim: () => string; readonly length: number; substr: (from: number, length?: number) => string; valueOf: () => string; codePointAt: (pos: number) => number; includes: (searchString: string, position?: number) => boolean; endsWith: (searchString: string, endPosition?: number) => boolean; repeat: (count: number) => string; startsWith: (searchString: string, position?: number) => boolean; anchor: (name: string) => string; big: () => string; blink: () => string; bold: () => string; fixed: () => string; fontcolor: (color: string) => string; fontsize: { (size: number): string; (size: string): string; }; italics: () => string; link: (url: string) => string; strike: () => string; sub: () => string; sup: () => string; padStart: (maxLength: number, fillString?: string) => string; padEnd: (maxLength: number, fillString?: string) => string; trimEnd: () => string; trimStart: () => string; trimLeft: () => string; trimRight: () => string; matchAll: (regexp: RegExp) => IterableIterator<RegExpMatchArray>; at: (index: number) => string; })",
+        "resolved": "\"auto / auto\" | \"auto\" | `${number} / ${number}` | `${number} / auto` | `${number} / span ${number}` | `auto / ${number}` | `auto / span ${number}` | `span ${number} / ${number}` | `span ${number} / auto` | `span ${number} / span ${number}` | `span ${number}` | number | { S?: GridColumnType; M?: GridColumnType; L?: GridColumnType; XL?: GridColumnType; default?: GridColumnType; } | ({ [x: number]: string; small: () => string; [Symbol.iterator]: () => IterableIterator<string>; toString: () => string; charAt: (pos: number) => string; charCodeAt: (index: number) => number; concat: (...strings: string[]) => string; indexOf: (searchString: string, position?: number) => number; lastIndexOf: (searchString: string, position?: number) => number; localeCompare: { (that: string): number; (that: string, locales?: string | string[], options?: CollatorOptions): number; }; match: { (regexp: string | RegExp): RegExpMatchArray; (matcher: { [Symbol.match](string: string): RegExpMatchArray; }): RegExpMatchArray; }; replace: { (searchValue: string | RegExp, replaceValue: string): string; (searchValue: string | RegExp, replacer: (substring: string, ...args: any[]) => string): string; (searchValue: { [Symbol.replace](string: string, replaceValue: string): string; }, replaceValue: string): string; (searchValue: { [Symbol.replace](string: string, replacer: (substring: string, ...args: any[]) => string): string; }, replacer: (substring: string, ...args: any[]) => string): string; }; search: { (regexp: string | RegExp): number; (searcher: { [Symbol.search](string: string): number; }): number; }; slice: (start?: number, end?: number) => string; split: { (separator: string | RegExp, limit?: number): string[]; (splitter: { [Symbol.split](string: string, limit?: number): string[]; }, limit?: number): string[]; }; substring: (start: number, end?: number) => string; toLowerCase: () => string; toLocaleLowerCase: (locales?: string | string[]) => string; toUpperCase: () => string; toLocaleUpperCase: (locales?: string | string[]) => string; trim: () => string; readonly length: number; substr: (from: number, length?: number) => string; valueOf: () => string; codePointAt: (pos: number) => number; includes: (searchString: string, position?: number) => boolean; endsWith: (searchString: string, endPosition?: number) => boolean; normalize: { (form: \"NFC\" | \"NFD\" | \"NFKC\" | \"NFKD\"): string; (form?: string): string; }; repeat: (count: number) => string; startsWith: (searchString: string, position?: number) => boolean; anchor: (name: string) => string; big: () => string; blink: () => string; bold: () => string; fixed: () => string; fontcolor: (color: string) => string; fontsize: { (size: number): string; (size: string): string; }; italics: () => string; link: (url: string) => string; strike: () => string; sub: () => string; sup: () => string; padStart: (maxLength: number, fillString?: string) => string; padEnd: (maxLength: number, fillString?: string) => string; trimEnd: () => string; trimStart: () => string; trimLeft: () => string; trimRight: () => string; matchAll: (regexp: RegExp) => IterableIterator<RegExpMatchArray>; at: (index: number) => string; })",
         "references": {
           "ResponsiveType": {
             "location": "import",
@@ -701,6 +722,9 @@ export class VegaBox {
         "tags": [{
             "name": "vegaVersion",
             "text": "2.5.0"
+          }, {
+            "name": "nativeTypeRedirection",
+            "text": "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column"
           }],
         "text": "Determines the placement of the item within the grid along the horizontal axis."
       },
@@ -712,7 +736,7 @@ export class VegaBox {
       "mutable": false,
       "complexType": {
         "original": "ResponsiveType<GridRowType>",
-        "resolved": "\"auto / auto\" | \"auto\" | `${number} / ${number}` | `${number} / auto` | `${number} / span ${number}` | `auto / ${number}` | `auto / span ${number}` | `span ${number} / ${number}` | `span ${number} / auto` | `span ${number} / span ${number}` | `span ${number}` | number | { S?: GridRowType; M?: GridRowType; L?: GridRowType; XL?: GridRowType; default?: GridRowType; } | ({ [x: number]: string; normalize: { (form: \"NFC\" | \"NFD\" | \"NFKC\" | \"NFKD\"): string; (form?: string): string; }; search: { (regexp: string | RegExp): number; (searcher: { [Symbol.search](string: string): number; }): number; }; small: () => string; [Symbol.iterator]: () => IterableIterator<string>; toString: () => string; charAt: (pos: number) => string; charCodeAt: (index: number) => number; concat: (...strings: string[]) => string; indexOf: (searchString: string, position?: number) => number; lastIndexOf: (searchString: string, position?: number) => number; localeCompare: { (that: string): number; (that: string, locales?: string | string[], options?: CollatorOptions): number; }; match: { (regexp: string | RegExp): RegExpMatchArray; (matcher: { [Symbol.match](string: string): RegExpMatchArray; }): RegExpMatchArray; }; replace: { (searchValue: string | RegExp, replaceValue: string): string; (searchValue: string | RegExp, replacer: (substring: string, ...args: any[]) => string): string; (searchValue: { [Symbol.replace](string: string, replaceValue: string): string; }, replaceValue: string): string; (searchValue: { [Symbol.replace](string: string, replacer: (substring: string, ...args: any[]) => string): string; }, replacer: (substring: string, ...args: any[]) => string): string; }; slice: (start?: number, end?: number) => string; split: { (separator: string | RegExp, limit?: number): string[]; (splitter: { [Symbol.split](string: string, limit?: number): string[]; }, limit?: number): string[]; }; substring: (start: number, end?: number) => string; toLowerCase: () => string; toLocaleLowerCase: (locales?: string | string[]) => string; toUpperCase: () => string; toLocaleUpperCase: (locales?: string | string[]) => string; trim: () => string; readonly length: number; substr: (from: number, length?: number) => string; valueOf: () => string; codePointAt: (pos: number) => number; includes: (searchString: string, position?: number) => boolean; endsWith: (searchString: string, endPosition?: number) => boolean; repeat: (count: number) => string; startsWith: (searchString: string, position?: number) => boolean; anchor: (name: string) => string; big: () => string; blink: () => string; bold: () => string; fixed: () => string; fontcolor: (color: string) => string; fontsize: { (size: number): string; (size: string): string; }; italics: () => string; link: (url: string) => string; strike: () => string; sub: () => string; sup: () => string; padStart: (maxLength: number, fillString?: string) => string; padEnd: (maxLength: number, fillString?: string) => string; trimEnd: () => string; trimStart: () => string; trimLeft: () => string; trimRight: () => string; matchAll: (regexp: RegExp) => IterableIterator<RegExpMatchArray>; at: (index: number) => string; })",
+        "resolved": "\"auto / auto\" | \"auto\" | `${number} / ${number}` | `${number} / auto` | `${number} / span ${number}` | `auto / ${number}` | `auto / span ${number}` | `span ${number} / ${number}` | `span ${number} / auto` | `span ${number} / span ${number}` | `span ${number}` | number | { S?: GridRowType; M?: GridRowType; L?: GridRowType; XL?: GridRowType; default?: GridRowType; } | ({ [x: number]: string; small: () => string; [Symbol.iterator]: () => IterableIterator<string>; toString: () => string; charAt: (pos: number) => string; charCodeAt: (index: number) => number; concat: (...strings: string[]) => string; indexOf: (searchString: string, position?: number) => number; lastIndexOf: (searchString: string, position?: number) => number; localeCompare: { (that: string): number; (that: string, locales?: string | string[], options?: CollatorOptions): number; }; match: { (regexp: string | RegExp): RegExpMatchArray; (matcher: { [Symbol.match](string: string): RegExpMatchArray; }): RegExpMatchArray; }; replace: { (searchValue: string | RegExp, replaceValue: string): string; (searchValue: string | RegExp, replacer: (substring: string, ...args: any[]) => string): string; (searchValue: { [Symbol.replace](string: string, replaceValue: string): string; }, replaceValue: string): string; (searchValue: { [Symbol.replace](string: string, replacer: (substring: string, ...args: any[]) => string): string; }, replacer: (substring: string, ...args: any[]) => string): string; }; search: { (regexp: string | RegExp): number; (searcher: { [Symbol.search](string: string): number; }): number; }; slice: (start?: number, end?: number) => string; split: { (separator: string | RegExp, limit?: number): string[]; (splitter: { [Symbol.split](string: string, limit?: number): string[]; }, limit?: number): string[]; }; substring: (start: number, end?: number) => string; toLowerCase: () => string; toLocaleLowerCase: (locales?: string | string[]) => string; toUpperCase: () => string; toLocaleUpperCase: (locales?: string | string[]) => string; trim: () => string; readonly length: number; substr: (from: number, length?: number) => string; valueOf: () => string; codePointAt: (pos: number) => number; includes: (searchString: string, position?: number) => boolean; endsWith: (searchString: string, endPosition?: number) => boolean; normalize: { (form: \"NFC\" | \"NFD\" | \"NFKC\" | \"NFKD\"): string; (form?: string): string; }; repeat: (count: number) => string; startsWith: (searchString: string, position?: number) => boolean; anchor: (name: string) => string; big: () => string; blink: () => string; bold: () => string; fixed: () => string; fontcolor: (color: string) => string; fontsize: { (size: number): string; (size: string): string; }; italics: () => string; link: (url: string) => string; strike: () => string; sub: () => string; sup: () => string; padStart: (maxLength: number, fillString?: string) => string; padEnd: (maxLength: number, fillString?: string) => string; trimEnd: () => string; trimStart: () => string; trimLeft: () => string; trimRight: () => string; matchAll: (regexp: RegExp) => IterableIterator<RegExpMatchArray>; at: (index: number) => string; })",
         "references": {
           "ResponsiveType": {
             "location": "import",
@@ -730,6 +754,9 @@ export class VegaBox {
         "tags": [{
             "name": "vegaVersion",
             "text": "2.5.0"
+          }, {
+            "name": "nativeTypeRedirection",
+            "text": "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row"
           }],
         "text": "Determines the placement of the item within the grid along the vertical axis."
       },
@@ -759,6 +786,9 @@ export class VegaBox {
         "tags": [{
             "name": "vegaVersion",
             "text": "2.5.0"
+          }, {
+            "name": "nativeTypeRedirection",
+            "text": "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area"
           }],
         "text": "Defines the area within the grid occupied by the item. It accepts CSS values and can be set as ResponsiveType."
       },

package/dist/collection/components/vega-button-circle/vega-button-circle.js

@@ -374,7 +374,7 @@ export class VegaButtonCircle {
             "name": "vegaVersion",
             "text": "1.52.0"
           }],
-        "text": "Specifies the properties of the tooltip displayed for the button circle."
+        "text": "Specifies the properties of the `vega-tooltip` displayed for the button circle."
       }
     }
   }; }

package/dist/collection/components/vega-button-group/vega-button-group-item/vega-button-group-item.js

@@ -127,7 +127,7 @@ export class VegaButtonGroupItem {
       "mutable": false,
       "complexType": {
         "original": "DropdownPropsForButtonGroup",
-        "resolved": "{ matchContainerHeight?: boolean; matchTargetWidth?: boolean; maxHeight?: number; positionRelativeTo?: string; trigger: \"click\" | \"hover\"; }",
+        "resolved": "{ matchContainerHeight?: boolean; matchTargetWidth?: boolean; maxHeight?: number; positionRelativeTo?: string; trigger: \"hover\" | \"click\"; }",
         "references": {
           "DropdownPropsForButtonGroup": {
             "location": "import",

package/dist/collection/components/vega-button-link/vega-button-link.js

@@ -25,6 +25,7 @@ export class VegaButtonLink {
      * Specifies the URL associated with the button link.
      *
      * @vegaVersion 1.0.4
+     * @defaultValue javascript:void(0);
      */
     this.link = VegaButtonLink.defaultLink;
     /**
@@ -187,6 +188,9 @@ export class VegaButtonLink {
         "tags": [{
             "name": "vegaVersion",
             "text": "1.0.4"
+          }, {
+            "name": "defaultValue",
+            "text": "javascript:void(0);"
           }],
         "text": "Specifies the URL associated with the button link."
       },

package/dist/collection/components/vega-calendar/slimmers/common/renderers/vega-calendar-view-renderer.js

@@ -8,13 +8,21 @@ import { h } from '@stencil/core';
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 /** renders different views based on the specified view mode using month, week, and day view render. */
 export class VegaCalendarViewRenderer extends VegaSlimmer {
+  /**
+   * Get the calendar view content element ref
+   *
+   * @returns {HTMLElement|null} The div element.
+   */
+  getCalendarViewElementRef() {
+    return this.calendarViewElementRef;
+  }
   /**
    * render the calendar month/week/day view
    *
    * @returns {HTMLElement} html element
    */
   render() {
-    return (h("div", { class: `calendar-view calendar-view-${this.viewMode} ${this.showWeekends === false ? 'calendar-hide-weekends' : ''}` }, this.viewMode === 'month'
+    return (h("div", { class: `calendar-view calendar-view-${this.viewMode} ${this.showWeekends === false ? 'calendar-hide-weekends' : ''}`, ref: (node) => (this.calendarViewElementRef = node) }, this.viewMode === 'month'
       ? this.monthViewRenderer.render()
       : this.viewWithTimeRenderer.render()));
   }

package/dist/collection/components/vega-calendar/slimmers/day-view/renderers/vega-calendar-time-line-renderer.js

@@ -5,26 +5,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { h } from '@stencil/core';
-import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 import { pad } from '../../../../../utils/date';
 /** The `VegaCalendarTimeLineRenderer` class in TypeScript React renders a time line with custom time format options and includes methods for rendering time markers and the time line itself. */
 export class VegaCalendarTimeLineRenderer extends VegaSlimmer {
-  /**
-   * takes an array of `CalendarDate` objects as input and returns an HTML element
-   *
-   * @param {CalendarDate[]} source
-   * @returns {HTMLElement} the html element
-   */
-  renderTimeMarker(source) {
-    const isVisible = source.findIndex((calendarDate) => calendarDate.isToday()) >= 0;
-    return (h("div", { class: {
-        'time-marker-container': true,
-        'hidden': !isVisible,
-      } },
-      h("div", { class: "time-marker", style: { top: this.getTimeMarkerPosition() }, ref: (div) => (this.timeMarkerRef = div) }, source.map((item) => {
-        return h("div", { key: item.date, class: { active: item.isToday() } });
-      }))));
-  }
   /**
    * rendering the time line component as an HTML element
    *
@@ -32,50 +16,13 @@ export class VegaCalendarTimeLineRenderer extends VegaSlimmer {
    */
   render() {
     const timeLineSource = this.getTimeLineTitles();
-    return (h("div", { class: "time-line", ref: (div) => (this.timeLineRef = div) },
+    return (h("div", { class: "time-line" },
       h("div", { class: "hour-empty" }),
       timeLineSource.map((time, index) => {
         return (h("div", { key: time },
           h("div", { class: "time-text", "data-time": index === 0 ? 24 : index }, time)));
       })));
   }
-  /**
-   * scroll to current time line block if change view mode to week or day
-   *
-   * @param {VegaCalendarViewModeType} viewMode the view mode
-   */
-  updateTimeLine(viewMode) {
-    this.scrollToTargetTimeBlock(viewMode);
-    this.syncTimeMarkerPosition(viewMode);
-  }
-  /**
-   * remove setInterval when component destroy
-   */
-  clearTimer() {
-    clearInterval(this.timeMarkerPositionTimer);
-  }
-  /**
-   * Add the time mark position update logic if the component add back to page
-   */
-  updateTimeLineIfComponentAddBack() {
-    this.syncTimeMarkerPosition(this.viewMode);
-  }
-  /**
-   * Should display the current time block in the view if the default view mode is not month
-   */
-  displayCurrentTimeBlockByDefault() {
-    this.scrollToTargetTimeBlock(this.viewMode);
-  }
-  /**
-   * The function `getTimeMarkerPosition` calculates the position of the current time marker as a percentage of the day.
-   *
-   * @returns {string} a string representing the current time marker position as a percentage of the day.
-   */
-  getTimeMarkerPosition() {
-    const now = new Date();
-    const minutesOneDay = 24 * 60;
-    return ((now.getHours() * 60 + now.getMinutes()) / minutesOneDay) * 100 + '%';
-  }
   /**
    * The function `getTimeLineTitles` generates a time line array based on the specified time format (24-hour) and stores it in the `timeLineSource` property.
    *
@@ -100,63 +47,7 @@ export class VegaCalendarTimeLineRenderer extends VegaSlimmer {
     }
     return timeLine;
   }
-  /*
-   * The below method is e2e-test covered in
-   * @see{module:vega-calendar-scroll-to-current-time}
-   */
-  /* istanbul ignore next */
-  /**
-   * Update the time marker position with the time
-   *
-   * @param {VegaCalendarViewModeType} viewMode view mode value
-   */
-  syncTimeMarkerPosition(viewMode) {
-    clearInterval(this.timeMarkerPositionTimer);
-    if (viewMode !== 'month') {
-      this.timeMarkerPositionTimer = setInterval(() => {
-        if (this.timeMarkerRef) {
-          this.timeMarkerRef.style.top = this.getTimeMarkerPosition();
-        }
-      }, 60 * 1000);
-    }
-  }
-  /*
-   * The below method is e2e-test covered in
-   * @see{module:vega-calendar-scroll-to-current-time}
-   */
-  /* istanbul ignore next */
-  /**
-   * scroll the time line in to current view
-   *
-   * @param {VegaCalendarViewModeType} viewMode view mode value
-   */
-  scrollToTargetTimeBlock(viewMode) {
-    if (viewMode !== 'month') {
-      // add setTimeout here to make sure call the scroll into view after time line rendered.
-      const oneFrame = 16;
-      setTimeout(() => {
-        var _a, _b;
-        const hour = new Date().getHours();
-        (_b = (_a = this.timeLineRef) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-time='${hour < 23 ? hour + 1 : hour}']`)) === null || _b === void 0 ? void 0 : _b.scrollIntoView({ block: 'end' });
-      }, oneFrame);
-    }
-  }
 }
 __decorate([
   MapToComponentField()
 ], VegaCalendarTimeLineRenderer.prototype, "timeFormat", void 0);
-__decorate([
-  MapToComponentField()
-], VegaCalendarTimeLineRenderer.prototype, "viewMode", void 0);
-__decorate([
-  MapToComponentMethod('watchViewModeChange')
-], VegaCalendarTimeLineRenderer.prototype, "updateTimeLine", null);
-__decorate([
-  MapToComponentMethod('disconnectedCallback')
-], VegaCalendarTimeLineRenderer.prototype, "clearTimer", null);
-__decorate([
-  MapToComponentMethod('connectedCallback')
-], VegaCalendarTimeLineRenderer.prototype, "updateTimeLineIfComponentAddBack", null);
-__decorate([
-  MapToComponentMethod('componentDidLoad')
-], VegaCalendarTimeLineRenderer.prototype, "displayCurrentTimeBlockByDefault", null);