@globalpayments/vega 2.91.0 → 2.93.0

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

@@ -651,7 +651,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; [Symbol.iterator]: () => IterableIterator<string>; small: () => 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; })",
+        "resolved": "\"auto\" | \"inherit\" | \"initial\" | \"normal\" | \"revert\" | \"revert-layer\" | \"unset\" | { S?: AlignSelfType; M?: AlignSelfType; L?: AlignSelfType; XL?: AlignSelfType; default?: AlignSelfType; } | ({ [x: number]: string; 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; }; [Symbol.iterator]: () => IterableIterator<string>; small: () => 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; }; 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",
@@ -715,7 +715,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; [Symbol.iterator]: () => IterableIterator<string>; small: () => 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; })",
+        "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; 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; }; [Symbol.iterator]: () => IterableIterator<string>; small: () => 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; }; 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",
@@ -747,7 +747,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; [Symbol.iterator]: () => IterableIterator<string>; small: () => 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; })",
+        "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; 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; }; [Symbol.iterator]: () => IterableIterator<string>; small: () => 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; }; 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",

package/dist/collection/components/vega-code-block/slimmers/renderers/vega-code-block-copy-button-renderer.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 import { h } from '@stencil/core';
 import { VegaInternalIconManager } from '../../../../helpers/icon/internal-icon-manager';
-import copy from '../../assets/copy';
+import copy from '../../../../global/icons/copy';
 import { VegaClick } from '../../../../helpers/event-manager/event-id/vega-event-id';
 import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
 export class VegaCodeBlockCopyButtonRenderer extends VegaSlimmer {

package/dist/collection/components/vega-combo-box/slimmers/renderers/vega-combo-box-dropdown-renderer.js

@@ -8,7 +8,7 @@ import { Fragment, h } from '@stencil/core';
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
 import { createEnterKeyHandlerToTriggerClick } from '../../../../utils/accessibility';
 import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
-import { VegaClose, VegaCreate, VegaDropdownClick, VegaDropdownHide, } from '../../../../helpers/event-manager/event-id/vega-event-id';
+import { VegaClose, VegaCreate, VegaDropdownClick, VegaDropdownHide, VegaDropdownSelectAllClick, } from '../../../../helpers/event-manager/event-id/vega-event-id';
 import { VegaInternalDropdownTemplateItemsChange } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
 import { htmlSanitizer, labelSanitizeStrategy } from '../../../../utils/sanitize';
 import { formatAndValidResponsiveToken } from '../../../../utils/design-token';
@@ -84,6 +84,9 @@ export class VegaComboBoxDropdownRenderer extends VegaSlimmer {
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaDropdownClick, async () => {
           await this.onItemClick();
         });
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaDropdownSelectAllClick, async () => {
+          await this.onItemClick();
+        });
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaInternalDropdownTemplateItemsChange, 
         /*
          * The below method is e2e-test covered in

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

@@ -187,6 +187,9 @@ export class VegaComboBox {
   watchContainerMaxHeight() {
     methodPlaceholder();
   }
+  watchVegaDropdownProps() {
+    methodPlaceholder();
+  }
   /**
    * Invoke this method to close the dropdown menu associated with the combo box.
    *
@@ -517,7 +520,7 @@ export class VegaComboBox {
       "mutable": false,
       "complexType": {
         "original": "VegaDropdownPropsForComboBox",
-        "resolved": "{ maxHeight?: number; positionRelativeTo?: string; matchContainerHeight?: boolean; dynamicOption?: boolean; isLoading?: boolean; }",
+        "resolved": "{ maxHeight?: number; positionRelativeTo?: string; matchContainerHeight?: boolean; dynamicOption?: boolean; isLoading?: boolean; allowSelectAll?: boolean; }",
         "references": {
           "VegaDropdownPropsForComboBox": {
             "location": "import",
@@ -732,6 +735,9 @@ export class VegaComboBox {
     }, {
       "propName": "containerMaxHeight",
       "methodName": "watchContainerMaxHeight"
+    }, {
+      "propName": "vegaDropdownProps",
+      "methodName": "watchVegaDropdownProps"
     }]; }
 }
 __decorate([

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

@@ -289,7 +289,7 @@ export class VegaDialog {
       "mutable": false,
       "complexType": {
         "original": "Partial<VegaComponentInterface<HTMLVegaModalElement>>",
-        "resolved": "{ size?: ResponsiveType<SizeType>; margin?: ResponsiveType<MarginType>; animation?: boolean; backdrop?: VegaModalBackdrop; backdropColor?: VegaModalBackdropColor; contentMaxHeight?: ResponsiveType<string | number>; handleClose?: () => boolean; height?: ResponsiveType<string | number>; isVerticallyCenter?: boolean; isVerticallyCentered?: boolean; modal?: (option: \"show\" | \"hide\") => Promise<void>; modalTitle?: string; open?: boolean; padding?: ResponsiveType<PaddingType> | VegaModalSectionPadding; showCloseButton?: boolean; }",
+        "resolved": "{ size?: ResponsiveType<SizeType>; margin?: ResponsiveType<MarginType>; animation?: boolean; backdrop?: VegaModalBackdrop; backdropColor?: VegaModalBackdropColor; contentMaxHeight?: ResponsiveType<string | number>; corners?: ResponsiveType<CornersType>; handleClose?: () => boolean; height?: ResponsiveType<string | number>; isVerticallyCenter?: boolean; isVerticallyCentered?: boolean; modal?: (option: \"show\" | \"hide\") => Promise<void>; modalTitle?: string; open?: boolean; padding?: ResponsiveType<PaddingType> | VegaModalSectionPadding; showCloseButton?: boolean; }",
         "references": {
           "Partial": {
             "location": "global"

package/dist/collection/components/vega-dropdown/constants.js

@@ -0,0 +1 @@
+export const VEGA_DROPDOWN_SELECT_ALL_KEY = '__SELECT_ALL__';

package/dist/collection/components/vega-dropdown/slimmers/controllers/vega-dropdown-appender-controller.js

@@ -65,6 +65,9 @@ export class VegaDropdownAppenderController extends ElementAppenderSlimmer {
    */
   async watchIsDropdownShow() {
     if (this.isDropdownShow) {
+      if (this.selectAllController.isEnabled()) {
+        this.sourceController.setRenderSource();
+      }
       this.showEventEmitter.emit();
       this.updateLastFocusedElement();
     }
@@ -177,6 +180,12 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "renderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownAppenderController.prototype, "sourceController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownAppenderController.prototype, "selectAllController", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "searchRenderer", void 0);

package/dist/collection/components/vega-dropdown/slimmers/controllers/vega-dropdown-children-controller.js

@@ -5,10 +5,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { InjectVegaSlimmer, MapToComponentField, MapToComponentMethod, VegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
+import { forceUpdate } from '@stencil/core';
 import { MutationObserverSlimmer } from '../../../../helpers/slimmers/mutation-observer/mutation-observer-slimmer';
 import ChangeManager from '../../../../helpers/change-manager/change-manager';
 import DomNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 import { VegaInternalDropdownTemplateItemsChange } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { findParent } from '../../../../utils/ui';
+import { isArrayEqual } from '../../../../utils/array';
 /**
  * The controller for the table children components.
  */
@@ -31,15 +34,18 @@ export class VegaDropdownChildrenController extends VegaSlimmer {
     });
     this.labelSet = new Set();
     this.keySet = new Set();
+    this.previousSelectableKeys = [];
     /**
      * The `syncUpDropdownCurrentDataBySlot` method is responsible for
      * synchronizing the current data in a dropdown based on the items present in the slot.
      */
     this.collectKeyAndLabelFromSlot = () => {
-      const container = this.renderer.getDropdownContentBoxRef() || this.host;
+      const container = this.getContainerElement();
       Array.from(container.querySelectorAll('vega-dropdown-item')).forEach((item) => {
-        item.label && this.labelSet.add(item.label);
-        item.itemKey && this.keySet.add(item.itemKey);
+        if (this.isCurrentDropdownTemplateItem(item)) {
+          item.label && this.labelSet.add(item.label);
+          item.itemKey && this.keySet.add(item.itemKey);
+        }
       });
     };
   }
@@ -70,6 +76,20 @@ export class VegaDropdownChildrenController extends VegaSlimmer {
       this.syncUpDropdownCurrentData();
     }
   }
+  /**
+   * Manually sync template/slot-based data after dynamic DOM mutations.
+   */
+  syncTemplateData() {
+    this.syncUpDropdownCurrentData();
+    if (this.selectAllController.isEnabled()) {
+      this.syncTemplateSelectAllState();
+      this.updateTemplateSelectableKeysAndRefresh();
+    }
+    else {
+      // Reset Select All visibility state so re-enabling allowSelectAll can re-trigger UI refresh.
+      this.previousSelectableKeys = [];
+    }
+  }
   /**
    * The function checks if a given label exists in a label set.
    *
@@ -88,6 +108,22 @@ export class VegaDropdownChildrenController extends VegaSlimmer {
   isKeyExist(key) {
     return this.keySet.has(key);
   }
+  /**
+   * Returns the keys of all non-disabled slot items.
+   * Used by the Select All controller to enumerate selectable items in template/slot mode.
+   *
+   * @returns {string[]} Keys of selectable (non-disabled) template items.
+   */
+  getSelectableKeys() {
+    const container = this.getContainerElement();
+    const keys = [];
+    Array.from(container.querySelectorAll('vega-dropdown-item')).forEach((item) => {
+      if (this.isCurrentDropdownTemplateItem(item) && !item.disabled && item.itemKey) {
+        keys.push(item.itemKey);
+      }
+    });
+    return keys;
+  }
   /**
    * The function syncs up the current data of a dropdown based on the render mode.
    */
@@ -101,6 +137,48 @@ export class VegaDropdownChildrenController extends VegaSlimmer {
       this.notifyTemplateItemsChange();
     }
   }
+  /**
+   * Updates previous selectable template keys and triggers re-render when Select All visibility changes.
+   *
+   */
+  updateTemplateSelectableKeysAndRefresh() {
+    const hadSelectableKeys = this.previousSelectableKeys.length > 0;
+    const currentSelectableKeys = this.getSelectableKeys();
+    const hasSelectableKeys = currentSelectableKeys.length > 0;
+    this.previousSelectableKeys = currentSelectableKeys;
+    if (hadSelectableKeys !== hasSelectableKeys) {
+      forceUpdate(this.host);
+    }
+  }
+  /**
+   * Re-syncs Select All sentinel state for template mode after slot item mutations.
+   */
+  syncTemplateSelectAllState() {
+    if (this.selectAllController.isEnabled() &&
+      Array.isArray(this.selectedController.selectedSourceKey)) {
+      const currentSelectedKeys = this.selectedController.selectedSourceKey;
+      const syncedSelectedKeys = this.selectAllController.syncSelectedKeysWithSelectAll([], currentSelectedKeys);
+      if (!isArrayEqual(currentSelectedKeys, syncedSelectedKeys)) {
+        this.selectedController.selectedSourceKey = syncedSelectedKeys;
+      }
+    }
+  }
+  /**
+   * Check whether a template item belongs to the current dropdown instead of a nested dropdown.
+   *
+   * @param {HTMLVegaDropdownItemElement} item - Template mode dropdown item element.
+   * @returns {boolean} True only when the nearest dropdown ancestor is current host.
+   */
+  isCurrentDropdownTemplateItem(item) {
+    const appender = findParent(item, 'vega-dropdown-content-box');
+    if (appender) {
+      const ownerDropdown = appender['data-parent-ref'];
+      const parentElement = item.parentElement;
+      const isNestedTriggerItem = parentElement.tagName === 'VEGA-DROPDOWN';
+      return ownerDropdown === this.host && !isNestedTriggerItem;
+    }
+    return findParent(item, 'vega-dropdown') === this.host;
+  }
   /**
    * The function collects unique labels and keys from a nested array of objects.
    *
@@ -128,11 +206,20 @@ export class VegaDropdownChildrenController extends VegaSlimmer {
     this.keySet.clear();
     this.labelSet.clear();
   }
+  /**
+   * Returns the dropdown content box element, or falls back to the host element if not yet available.
+   * Handles cases where `getDropdownContentBoxRef()` returns null during early lifecycle phases.
+   *
+   * @returns {HTMLElement} The dropdown content box or host element.
+   */
+  getContainerElement() {
+    return this.renderer.getDropdownContentBoxRef() || this.host;
+  }
   /**
    * The function `notifyTemplateItemsChange` notifies changes to dropdown items within a container element.
    */
   notifyTemplateItemsChange() {
-    const container = this.renderer.getDropdownContentBoxRef() || this.host;
+    const container = this.getContainerElement();
     ChangeManager.notify(DomNodeSubjectFactory.getSubject(this.host, VegaInternalDropdownTemplateItemsChange), container.querySelectorAll('vega-dropdown-item'));
   }
 }
@@ -157,6 +244,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDropdownChildrenController.prototype, "selectedController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownChildrenController.prototype, "selectAllController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaDropdownChildrenController.prototype, "mutationObserver", void 0);
@@ -172,3 +262,6 @@ __decorate([
 __decorate([
   MapToComponentMethod('watchSource')
 ], VegaDropdownChildrenController.prototype, "watchSource", null);
+__decorate([
+  MapToComponentMethod('syncTemplateData')
+], VegaDropdownChildrenController.prototype, "syncTemplateData", null);

package/dist/collection/components/vega-dropdown/slimmers/controllers/vega-dropdown-select-all-controller.js

@@ -0,0 +1,219 @@
+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, VegaSlimmer } from 'vega-slimmer/core';
+import { flattenChildren } from '../../../../utils/array';
+import { VEGA_DROPDOWN_SELECT_ALL_KEY } from '../../constants';
+/**
+ * Determine Select All indeterminate state from selected keys and selectable keys.
+ *
+ * @param {string[] | string} keys - Current selected keys.
+ * @param {string[]} allKeys - Selectable keys for current mode.
+ * @param {string} selectAllKey - Internal Select All sentinel key.
+ * @returns {boolean} True when selection is partial.
+ */
+export const calculateSelectAllIndeterminate = (keys, allKeys, selectAllKey = VEGA_DROPDOWN_SELECT_ALL_KEY) => {
+  if (!Array.isArray(keys)) {
+    return false;
+  }
+  const selectedRealKeys = keys.filter((key) => key !== selectAllKey);
+  if (allKeys.length === 0) {
+    // Template-mode fallback: when selectable keys are not yet enumerable,
+    // missing Select All sentinel with non-empty real keys indicates partial selection.
+    return selectedRealKeys.length > 0 && !keys.includes(selectAllKey);
+  }
+  const selectedSelectableCount = selectedRealKeys.filter((key) => allKeys.includes(key)).length;
+  return selectedSelectableCount > 0 && selectedSelectableCount < allKeys.length;
+};
+/**
+ * Determine indeterminate state specifically for the Select All item.
+ *
+ * @param {string} itemKey - Current dropdown item key.
+ * @param {string[] | string} keys - Current selected keys.
+ * @param {DropdownSourceItem[]} source - Source items (used in source mode).
+ * @param {string} selectAllKey - Internal Select All sentinel key.
+ * @returns {boolean} True when current item is Select All and selection is partial.
+ */
+export const isSelectAllItemIndeterminate = (itemKey, keys, source, selectAllKey = VEGA_DROPDOWN_SELECT_ALL_KEY) => {
+  if (!Array.isArray(keys) || itemKey !== selectAllKey) {
+    return false;
+  }
+  const allKeys = source.length
+    ? flattenChildren(source)
+      .filter((item) => !item.disabled)
+      .map((item) => item.key)
+    : [];
+  return calculateSelectAllIndeterminate(keys, allKeys, selectAllKey);
+};
+/**
+ * The `VegaDropdownSelectAllController` encapsulates all Select All behavior.
+ * It is used when allowSelectAll is enabled.
+ */
+export class VegaDropdownSelectAllController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.selectAllKey = VEGA_DROPDOWN_SELECT_ALL_KEY;
+  }
+  /**
+   * Determine if Select All behavior should be active for current dropdown mode.
+   *
+   * @returns {boolean} True when allowSelectAll is enabled and selectType is multiple.
+   */
+  isEnabled() {
+    return this.allowSelectAll && this.selectType === 'multiple';
+  }
+  /**
+   * Add synthetic Select All option to source when enabled.
+   *
+   * @param {VegaDropdownSourceItem[]} source - The original source array.
+   * @returns {VegaDropdownSourceItem[]} Source with Select All item added at the start, or original source if not enabled.
+   */
+  getSourceWithSelectAll(source) {
+    if (!this.isEnabled() || source.length === 0) {
+      return source;
+    }
+    const selectAllItem = {
+      key: this.selectAllKey,
+      label: this.translationSlimmer.t('Select All'),
+    };
+    return [selectAllItem, ...source];
+  }
+  /**
+   * Remove internal Select All key from selected keys.
+   *
+   * @param {string[]} keys - The current selected keys array.
+   * @returns {string[]} Keys with the internal Select All key removed.
+   */
+  filterOutSelectAllKey(keys) {
+    return keys.filter((k) => k !== this.selectAllKey);
+  }
+  /**
+   * Toggle key selection in multiple mode, including Select All interactions.
+   *
+   * @param {DropdownSourceItem[]} source - The full source array of dropdown items.
+   * @param {string[]} selectedKeys - The currently selected keys.
+   * @param {string} key - The key that was clicked.
+   * @returns {string[]} Updated selected keys after the toggle operation.
+   */
+  toggleSelectionForMultiple(source, selectedKeys, key) {
+    const allKeys = this.getSelectableKeys(source);
+    const currentKeys = this.filterOutSelectAllKey(selectedKeys);
+    if (!this.isEnabled()) {
+      return currentKeys.includes(key)
+        ? currentKeys.filter((k) => k !== key)
+        : [...currentKeys, key];
+    }
+    if (key === this.selectAllKey) {
+      const isAllSelected = allKeys.every((k) => currentKeys.includes(k));
+      return isAllSelected ? [] : [...allKeys, this.selectAllKey];
+    }
+    const nextKeys = currentKeys.includes(key)
+      ? currentKeys.filter((k) => k !== key)
+      : [...currentKeys, key];
+    const isNextAllSelected = allKeys.every((k) => nextKeys.includes(k));
+    if (isNextAllSelected) {
+      return [...nextKeys, this.selectAllKey];
+    }
+    return nextKeys;
+  }
+  /**
+   * Keep Select All internal key aligned with current selected keys.
+   *
+   * @param {DropdownSourceItem[]} source - The full source array of dropdown items.
+   * @param {string[]} keys - The current selected keys to synchronize.
+   * @returns {string[]} Keys with Select All key added or removed based on whether all items are selected.
+   */
+  syncSelectedKeysWithSelectAll(source, keys) {
+    if (!this.isEnabled()) {
+      return keys;
+    }
+    const allKeys = this.getSelectableKeys(source);
+    if (allKeys.length === 0) {
+      return keys;
+    }
+    const selectedRealKeys = this.filterOutSelectAllKey(keys);
+    const isAllSelected = allKeys.every((key) => selectedRealKeys.includes(key));
+    if (isAllSelected) {
+      return keys.includes(this.selectAllKey) ? keys : [...selectedRealKeys, this.selectAllKey];
+    }
+    return selectedRealKeys;
+  }
+  /**
+   * Check if a key is valid for selection in multiple mode.
+   *
+   * @param {string} key - The key to check.
+   * @returns {boolean} True if the key is the internal Select All key and feature is enabled.
+   */
+  isAllowedVirtualKey(key) {
+    return this.isEnabled() && key === this.selectAllKey;
+  }
+  /**
+   * Determine whether Select All should be rendered in an indeterminate state.
+   *
+   * @param {string[] | string} keys - Current selected keys.
+   * @param {DropdownSourceItem[]} source - Source items (used in source mode).
+   * @returns {boolean} True when some but not all selectable items are selected.
+   */
+  isSelectAllIndeterminate(keys, source) {
+    if (!this.isEnabled() || !Array.isArray(keys)) {
+      return false;
+    }
+    const allKeys = this.getSelectableKeys(source);
+    return calculateSelectAllIndeterminate(keys, allKeys, this.selectAllKey);
+  }
+  /**
+   * Returns the internal Select All item key.
+   * Used by renderers to inject the synthetic Select All item into the template/slot list.
+   *
+   * @returns {string} The Select All key.
+   */
+  getSelectAllItemKey() {
+    return this.selectAllKey;
+  }
+  /**
+   * Determine whether template/slot mode should render the synthetic Select All row.
+   *
+   * @returns {boolean} True when Select All is enabled in template mode and there is at least one selectable real item.
+   */
+  shouldRenderTemplateSelectAll() {
+    if (!this.isEnabled() || this.renderModeController.isSourceRenderMode()) {
+      return false;
+    }
+    return this.getSelectableKeys([]).length > 0;
+  }
+  /**
+   * Collect selectable keys from the source or DOM while skipping disabled items.
+   * In slot/template mode, keys are read from the rendered DOM via the children controller.
+   *
+   * @param {DropdownSourceItem[]} source - The dropdown source array (used in source mode only).
+   * @returns {string[]} The keys that can be selected.
+   */
+  getSelectableKeys(source) {
+    if (!this.renderModeController.isSourceRenderMode()) {
+      return this.childrenController
+        .getSelectableKeys()
+        .filter((key) => key !== this.selectAllKey);
+    }
+    return flattenChildren(source)
+      .filter((item) => !item.disabled)
+      .map((item) => item.key);
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaDropdownSelectAllController.prototype, "allowSelectAll", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownSelectAllController.prototype, "selectType", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownSelectAllController.prototype, "translationSlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownSelectAllController.prototype, "renderModeController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownSelectAllController.prototype, "childrenController", void 0);