@infineon/infineon-design-system-stencil 39.4.4-canary.0 → 39.5.0

package/dist/collection/components/table-advanced-version/list/list.js.map

@@ -1 +1 @@
-{"version":3,"file":"list.js","sourceRoot":"","sources":["../../../../src/components/table-advanced-version/list/list.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Event, EventEmitter, Element, Watch } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'ifx-list',\r\n  styleUrl: 'list.scss',\r\n  shadow: true,\r\n})\r\nexport class List {\r\n  @Element() private el: HTMLElement;\r\n  @State() expanded: boolean = false;\r\n  @State() showMore = false;\r\n  @State() selectedCount: number = 0;\r\n  @State() totalItems = 0;\r\n  @Prop() name = \"\";\r\n  @Prop() maxVisibleItems = 6;\r\n  @Prop() type: string = \"checkbox\"; //default value\r\n  @Prop({ mutable: true }) resetTrigger: boolean;\r\n  @State() internalResetTrigger: boolean = false;\r\n\r\n  @Event() ifxListUpdate: EventEmitter;\r\n\r\n  observer: MutationObserver;\r\n\r\n  @Watch('type')\r\n  handleTypeChange(newType: string) {\r\n    this.updateListEntriesType(newType);\r\n  }\r\n\r\n  @Watch('resetTrigger')\r\n  resetTriggerChanged(newValue: boolean) {\r\n    if (newValue) {\r\n      this.reset();\r\n      this.resetTrigger = false; // Resetting the trigger after the action is performed\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.setupListenersAndObservers();\r\n    this.initializeList();\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.cleanupListenersAndObservers();\r\n  }\r\n\r\n  reset() {\r\n    this.resetListEntries();\r\n    this.expanded = false;\r\n    this.showMore = false;\r\n    this.selectedCount = 0;\r\n    this.ifxListUpdate.emit({ name: this.name, selectedItems: [] });\r\n  }\r\n\r\n\r\n  render() {\r\n    return this.renderList();\r\n  }\r\n\r\n\r\n    // Refactored methods for clarity and maintainability\r\n    private setupListenersAndObservers() {\r\n      this.el.addEventListener('ifxListEntryChange', this.handleCheckedChange);\r\n      this.observer = new MutationObserver(this.handleMutation);\r\n      this.observer.observe(this.el, { childList: true });\r\n    }\r\n\r\n    private cleanupListenersAndObservers() {\r\n      this.el.removeEventListener('ifxListEntryChange', this.handleCheckedChange);\r\n      this.observer.disconnect();\r\n    }\r\n  \r\n    private initializeList() {\r\n      this.selectedCount = this.getSelectedItems(this.el).length;\r\n      this.totalItems = this.getTotalItems();\r\n      this.updateListEntriesType(this.type);\r\n      this.checkRadioButtonConstraint();\r\n    }\r\n\r\n    \r\n  private updateListEntriesType(newType: string) {\r\n    const listEntries = Array.from(this.el.querySelectorAll('ifx-list-entry'));\r\n    listEntries.forEach(entry => entry.setAttribute('type', newType));\r\n  }\r\n\r\n  private resetListEntries() {\r\n    const listEntries = Array.from(this.el.querySelectorAll('ifx-list-entry'));\r\n    listEntries.forEach(entry => {\r\n      entry.value = false;\r\n      entry.setAttribute('value', 'false');\r\n    });\r\n  }\r\n\r\n  private handleMutation = () => {\r\n    const newTotalItems = this.getTotalItems();\r\n    if (newTotalItems !== this.totalItems) {\r\n      this.totalItems = newTotalItems;\r\n      this.handleCheckedChange();\r\n    }\r\n    this.updateListEntriesType(this.type);\r\n  }\r\n\r\n  private checkRadioButtonConstraint() {\r\n    if (this.type === 'radio-button' && this.selectedCount > 1) {\r\n      this.resetListEntries(); // Reset all and let the user select again\r\n      this.selectedCount = 0;\r\n    }\r\n  }\r\n\r\n  getTotalItems() {\r\n    return this.el.querySelectorAll('ifx-list-entry').length;\r\n  }\r\n\r\n\r\n  toggleList = (event: MouseEvent) => {\r\n    event.stopPropagation();\r\n    this.expanded = !this.expanded;\r\n  }\r\n\r\n  toggleShowMore = (event: MouseEvent) => {\r\n    event.stopPropagation();\r\n    this.showMore = !this.showMore;\r\n  }\r\n\r\n  getSelectedItems(el: HTMLElement) {\r\n    return Array.from(el.querySelectorAll('ifx-list-entry'))\r\n      .filter(entry => entry.getAttribute('value') === 'true')\r\n      .map(entry => ({\r\n        label: entry.getAttribute('label'),\r\n        value: entry.getAttribute('value'),\r\n        type: entry.getAttribute('type'),\r\n        element: entry\r\n      }));\r\n  }\r\n\r\n\r\n  handleCheckedChange = (event?: CustomEvent) => {\r\n    // If the type of the changed entry is 'radio-button' and its value is true, deselect all other radio buttons\r\n    if (event && event.detail.type === 'radio-button' && event.detail.value) {\r\n      const otherRadioButtons = Array.from(this.el.querySelectorAll('ifx-list-entry'))\r\n        .filter(entry => entry.getAttribute('type') === 'radio-button' && entry !== event.target);\r\n      otherRadioButtons.forEach(radioButton => radioButton.setAttribute('value', 'false'));\r\n    }\r\n\r\n    const selectedItems = this.getSelectedItems(this.el);\r\n    this.selectedCount = selectedItems.length;\r\n\r\n    this.ifxListUpdate.emit({ name: this.name, selectedItems });\r\n  }\r\n\r\n  private renderList() {\r\n    const listEntries = Array.from(this.el.querySelectorAll('ifx-list-entry'));\r\n    const visibleItems = this.showMore ? listEntries : listEntries.slice(0, this.maxVisibleItems);\r\n    const remainingItems = listEntries.length - visibleItems.length;\r\n\r\n    return (\r\n      <div class=\"list-wrapper\">\r\n        {visibleItems.map(entry => <slot name={entry.getAttribute('slot')}></slot>)}\r\n        {(remainingItems > 0 || this.showMore) && (\r\n          <div class=\"link-wrapper\" onClick={this.toggleShowMore}>\r\n            <ifx-icon key={this.showMore.toString()} icon={this.showMore ? 'chevron-up-16' : 'chevron-down-16'} />\r\n            <ifx-link size=\"s\" href=\"\" target=\"_blank\" variant=\"underlined\" disabled={false} >\r\n              {this.showMore ? 'Show less' : `Show ${remainingItems} more`}\r\n            </ifx-link>\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}"]}
+{"version":3,"file":"list.js","sourceRoot":"","sources":["../../../../src/components/table-advanced-version/list/list.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Event, EventEmitter, Element, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-list',\n  styleUrl: 'list.scss',\n  shadow: true,\n})\nexport class List {\n  @Element() private el: HTMLElement;\n  @State() expanded: boolean = false;\n  @State() showMore = false;\n  @State() selectedCount: number = 0;\n  @State() totalItems = 0;\n  @Prop() name = \"\";\n  @Prop() maxVisibleItems = 6;\n  @Prop() type: string = \"checkbox\"; //default value\n  @Prop({ mutable: true }) resetTrigger: boolean;\n  @State() internalResetTrigger: boolean = false;\n\n  @Event() ifxListUpdate: EventEmitter;\n\n  observer: MutationObserver;\n\n  @Watch('type')\n  handleTypeChange(newType: string) {\n    this.updateListEntriesType(newType);\n  }\n\n  @Watch('resetTrigger')\n  resetTriggerChanged(newValue: boolean) {\n    if (newValue) {\n      this.reset();\n      this.resetTrigger = false; // Resetting the trigger after the action is performed\n    }\n  }\n\n  componentWillLoad() {\n    this.setupListenersAndObservers();\n    this.initializeList();\n  }\n\n  disconnectedCallback() {\n    this.cleanupListenersAndObservers();\n  }\n\n  reset() {\n    this.resetListEntries();\n    this.expanded = false;\n    this.showMore = false;\n    this.selectedCount = 0;\n    this.ifxListUpdate.emit({ name: this.name, selectedItems: [] });\n  }\n\n\n  render() {\n    return this.renderList();\n  }\n\n\n    // Refactored methods for clarity and maintainability\n    private setupListenersAndObservers() {\n      this.el.addEventListener('ifxListEntryChange', this.handleCheckedChange);\n      this.observer = new MutationObserver(this.handleMutation);\n      this.observer.observe(this.el, { childList: true });\n    }\n\n    private cleanupListenersAndObservers() {\n      this.el.removeEventListener('ifxListEntryChange', this.handleCheckedChange);\n      this.observer.disconnect();\n    }\n  \n    private initializeList() {\n      this.selectedCount = this.getSelectedItems(this.el).length;\n      this.totalItems = this.getTotalItems();\n      this.updateListEntriesType(this.type);\n      this.checkRadioButtonConstraint();\n    }\n\n    \n  private updateListEntriesType(newType: string) {\n    const listEntries = Array.from(this.el.querySelectorAll('ifx-list-entry'));\n    listEntries.forEach(entry => entry.setAttribute('type', newType));\n  }\n\n  private resetListEntries() {\n    const listEntries = Array.from(this.el.querySelectorAll('ifx-list-entry'));\n    listEntries.forEach(entry => {\n      entry.value = false;\n      entry.setAttribute('value', 'false');\n    });\n  }\n\n  private handleMutation = () => {\n    const newTotalItems = this.getTotalItems();\n    if (newTotalItems !== this.totalItems) {\n      this.totalItems = newTotalItems;\n      this.handleCheckedChange();\n    }\n    this.updateListEntriesType(this.type);\n  }\n\n  private checkRadioButtonConstraint() {\n    if (this.type === 'radio-button' && this.selectedCount > 1) {\n      this.resetListEntries(); // Reset all and let the user select again\n      this.selectedCount = 0;\n    }\n  }\n\n  getTotalItems() {\n    return this.el.querySelectorAll('ifx-list-entry').length;\n  }\n\n\n  toggleList = (event: MouseEvent) => {\n    event.stopPropagation();\n    this.expanded = !this.expanded;\n  }\n\n  toggleShowMore = (event: MouseEvent) => {\n    event.stopPropagation();\n    this.showMore = !this.showMore;\n  }\n\n  getSelectedItems(el: HTMLElement) {\n    return Array.from(el.querySelectorAll('ifx-list-entry'))\n      .filter(entry => entry.getAttribute('value') === 'true')\n      .map(entry => ({\n        label: entry.getAttribute('label'),\n        value: entry.getAttribute('value'),\n        type: entry.getAttribute('type'),\n        element: entry\n      }));\n  }\n\n\n  handleCheckedChange = (event?: CustomEvent) => {\n    // If the type of the changed entry is 'radio-button' and its value is true, deselect all other radio buttons\n    if (event && event.detail.type === 'radio-button' && event.detail.value) {\n      const otherRadioButtons = Array.from(this.el.querySelectorAll('ifx-list-entry'))\n        .filter(entry => entry.getAttribute('type') === 'radio-button' && entry !== event.target);\n      otherRadioButtons.forEach(radioButton => radioButton.setAttribute('value', 'false'));\n    }\n\n    const selectedItems = this.getSelectedItems(this.el);\n    this.selectedCount = selectedItems.length;\n\n    this.ifxListUpdate.emit({ name: this.name, selectedItems });\n  }\n\n  private renderList() {\n    const listEntries = Array.from(this.el.querySelectorAll('ifx-list-entry'));\n    const visibleItems = this.showMore ? listEntries : listEntries.slice(0, this.maxVisibleItems);\n    const remainingItems = listEntries.length - visibleItems.length;\n\n    return (\n      <div class=\"list-wrapper\">\n        {visibleItems.map(entry => <slot name={entry.getAttribute('slot')}></slot>)}\n        {(remainingItems > 0 || this.showMore) && (\n          <div class=\"link-wrapper\" onClick={this.toggleShowMore}>\n            <ifx-icon key={this.showMore.toString()} icon={this.showMore ? 'chevron-up-16' : 'chevron-down-16'} />\n            <ifx-link size=\"s\" href=\"\" target=\"_blank\" variant=\"underlined\" disabled={false} >\n              {this.showMore ? 'Show less' : `Show ${remainingItems} more`}\n            </ifx-link>\n          </div>\n        )}\n      </div>\n    );\n  }\n}"]}

package/dist/collection/components/table-advanced-version/list/list.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"list.stories.js","sourceRoot":"","sources":["../../../../src/components/table-advanced-version/list/list.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from \"@storybook/addon-actions\";\r\n\r\n\r\nexport default {\r\n  title: 'Components/List',\r\n\r\n  tags: ['autodocs'],\r\n  parameters: {\r\n    docs: {\r\n      page: null,\r\n    },\r\n  },\r\n  args: {\r\n    name: 'checkbox-list',\r\n    maxVisibleItems: 5,\r\n    type: 'checkbox'\r\n  },\r\n  argTypes: {\r\n    type: {\r\n      description: 'Type options currently available: Checkbox and Radio button',\r\n      options: ['checkbox', 'radio-button'],\r\n      control: { type: 'radio' },\r\n    },\r\n    ifxListUpdate: {\r\n      action: 'ifxListUpdate',\r\n      description: 'Custom event emitted when the selected items in the list change',\r\n      table: {\r\n        type: {\r\n          summary: 'Framework integration',\r\n          detail:\r\n            'React: onIfxListUpdate={handleChange}\\nVue:@ifxListUpdate=\"handleChange\"\\nAngular:(ifxListUpdate)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxListUpdate\", (event) => {//handle change});',\r\n        },\r\n      },\r\n    },\r\n  },\r\n\r\n};\r\n\r\nconst CheckboxListTemplate = (args) => {\r\n  const list = document.createElement('ifx-list');\r\n  list.setAttribute('name', args.name);\r\n  list.setAttribute('max-visible-items', args.maxVisibleItems);\r\n  list.setAttribute('type', args.type);\r\n\r\n  for (let i = 1; i <= 7; i++) {\r\n    const listEntry = document.createElement('ifx-list-entry');\r\n    listEntry.setAttribute('type', args.type);\r\n    listEntry.setAttribute('label', `Checkbox ${i}`);\r\n    listEntry.setAttribute('value', 'false');\r\n    listEntry.setAttribute('slot', `slot${i}`); // Assign a unique slot name to each entry\r\n    listEntry.textContent = `Checkbox ${i}`;\r\n\r\n    list.appendChild(listEntry);\r\n  }\r\n\r\n  list.addEventListener('ifxListUpdate', action('ifxListUpdate'));\r\n\r\n  // Add a new list entry after 3 seconds\r\n  setTimeout(() => {\r\n    const listEntry = document.createElement('ifx-list-entry');\r\n    listEntry.setAttribute('type', args.type);\r\n    listEntry.setAttribute('label', `Checkbox 8`);\r\n    listEntry.setAttribute('value', 'false');\r\n    listEntry.setAttribute('slot', `slot8`); // Assign a unique slot name to the new entry\r\n    listEntry.textContent = `Checkbox 8`;\r\n\r\n    list.appendChild(listEntry);\r\n  }, 3000);\r\n\r\n  return list;\r\n};\r\nexport const CheckboxList = CheckboxListTemplate.bind({});\r\nCheckboxList.args = {\r\n  name: 'checkbox-list',\r\n  type: 'checkbox',\r\n};\r\n\r\n\r\n\r\nconst RadioButtonListTemplate = (args) => {\r\n  args.type = 'radio-button';\r\n  const list = document.createElement('ifx-list');\r\n  list.setAttribute('name', args.name);\r\n  list.setAttribute('max-visible-items', args.maxVisibleItems);\r\n  list.setAttribute('type', args.type);\r\n\r\n\r\n  for (let i = 1; i <= 7; i++) {\r\n    const listEntry = document.createElement('ifx-list-entry');\r\n    listEntry.setAttribute('type', args.type);\r\n    listEntry.setAttribute('label', `Radio Button ${i}`);\r\n    listEntry.setAttribute('value', 'false');\r\n    listEntry.setAttribute('slot', `slot${i}`); // Assign a unique slot name to each entry\r\n    listEntry.textContent = `Radio Button ${i}`;\r\n\r\n    list.appendChild(listEntry);\r\n\r\n  }\r\n  list.addEventListener('ifxListUpdate', action('ifxListUpdate'));\r\n\r\n  return list;\r\n};\r\n\r\nexport const RadioButtonList = RadioButtonListTemplate.bind({});\r\nRadioButtonList.args = {\r\n  name: 'radio-button-list',\r\n  type: 'radio-button',\r\n};\r\n"]}
+{"version":3,"file":"list.stories.js","sourceRoot":"","sources":["../../../../src/components/table-advanced-version/list/list.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from \"@storybook/addon-actions\";\n\n\nexport default {\n  title: 'Components/List',\n\n  tags: ['autodocs'],\n  parameters: {\n    docs: {\n      page: null,\n    },\n  },\n  args: {\n    name: 'checkbox-list',\n    maxVisibleItems: 5,\n    type: 'checkbox'\n  },\n  argTypes: {\n    type: {\n      description: 'Type options currently available: Checkbox and Radio button',\n      options: ['checkbox', 'radio-button'],\n      control: { type: 'radio' },\n    },\n    ifxListUpdate: {\n      action: 'ifxListUpdate',\n      description: 'Custom event emitted when the selected items in the list change',\n      table: {\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxListUpdate={handleChange}\\nVue:@ifxListUpdate=\"handleChange\"\\nAngular:(ifxListUpdate)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxListUpdate\", (event) => {//handle change});',\n        },\n      },\n    },\n  },\n\n};\n\nconst CheckboxListTemplate = (args) => {\n  const list = document.createElement('ifx-list');\n  list.setAttribute('name', args.name);\n  list.setAttribute('max-visible-items', args.maxVisibleItems);\n  list.setAttribute('type', args.type);\n\n  for (let i = 1; i <= 7; i++) {\n    const listEntry = document.createElement('ifx-list-entry');\n    listEntry.setAttribute('type', args.type);\n    listEntry.setAttribute('label', `Checkbox ${i}`);\n    listEntry.setAttribute('value', 'false');\n    listEntry.setAttribute('slot', `slot${i}`); // Assign a unique slot name to each entry\n    listEntry.textContent = `Checkbox ${i}`;\n\n    list.appendChild(listEntry);\n  }\n\n  list.addEventListener('ifxListUpdate', action('ifxListUpdate'));\n\n  // Add a new list entry after 3 seconds\n  setTimeout(() => {\n    const listEntry = document.createElement('ifx-list-entry');\n    listEntry.setAttribute('type', args.type);\n    listEntry.setAttribute('label', `Checkbox 8`);\n    listEntry.setAttribute('value', 'false');\n    listEntry.setAttribute('slot', `slot8`); // Assign a unique slot name to the new entry\n    listEntry.textContent = `Checkbox 8`;\n\n    list.appendChild(listEntry);\n  }, 3000);\n\n  return list;\n};\nexport const CheckboxList = CheckboxListTemplate.bind({});\nCheckboxList.args = {\n  name: 'checkbox-list',\n  type: 'checkbox',\n};\n\n\n\nconst RadioButtonListTemplate = (args) => {\n  args.type = 'radio-button';\n  const list = document.createElement('ifx-list');\n  list.setAttribute('name', args.name);\n  list.setAttribute('max-visible-items', args.maxVisibleItems);\n  list.setAttribute('type', args.type);\n\n\n  for (let i = 1; i <= 7; i++) {\n    const listEntry = document.createElement('ifx-list-entry');\n    listEntry.setAttribute('type', args.type);\n    listEntry.setAttribute('label', `Radio Button ${i}`);\n    listEntry.setAttribute('value', 'false');\n    listEntry.setAttribute('slot', `slot${i}`); // Assign a unique slot name to each entry\n    listEntry.textContent = `Radio Button ${i}`;\n\n    list.appendChild(listEntry);\n\n  }\n  list.addEventListener('ifxListUpdate', action('ifxListUpdate'));\n\n  return list;\n};\n\nexport const RadioButtonList = RadioButtonListTemplate.bind({});\nRadioButtonList.args = {\n  name: 'radio-button-list',\n  type: 'radio-button',\n};\n"]}

package/dist/collection/components/table-advanced-version/set-filter/setFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"setFilter.js","sourceRoot":"","sources":["../../../../src/components/table-advanced-version/set-filter/setFilter.tsx"],"names":[],"mappings":"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","sourcesContent":["// SetFilter.tsx\r\nimport { Component, h, Event, EventEmitter, Prop, State } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'ifx-set-filter',\r\n  styleUrl: 'set-filter.scss',\r\n  shadow: true\r\n})\r\nexport class SetFilter {\r\n  @Prop() filterName: string;\r\n  @Prop() filterLabel: string;\r\n  @Prop() placeholder: string;\r\n  @Prop() type: 'text' | 'single-select' | 'multi-select' = 'text';\r\n  @Prop() options: any[] | string;\r\n  @State() filterValues: string[] = [];\r\n\r\n  @Event() ifxFilterSelect: EventEmitter;\r\n\r\n\r\n  handleTextInputChange(event: Event) {\r\n    const target = event.target as HTMLInputElement;\r\n    const value = target.value;\r\n    this.ifxFilterSelect.emit({ filterName: this.filterName, filterValues: [value], type: this.type }); // Emit an array for consistency with the multi select component\r\n\r\n  }\r\n\r\n  handleSingleSelectChange(event: CustomEvent) {\r\n    const value = event.detail.value;\r\n    this.ifxFilterSelect.emit({ filterName: this.filterName, filterValues: [value], type: this.type }); // Emit an array for consistency with the multi select component\r\n  }\r\n\r\n\r\n  handleMultiselectOptionChange(event: CustomEvent) {\r\n    this.filterValues = event.detail.map(option => ({\r\n      label: option.value,\r\n      value: option.value\r\n    }));\r\n    this.ifxFilterSelect.emit({ filterName: this.filterName, filterValues: this.filterValues, type: this.type });\r\n  }\r\n\r\n\r\n  render() {\r\n    let optionsArray = [];\r\n\r\n    // Parse options if it's a string\r\n    if (typeof this.options === 'string') {\r\n      try {\r\n        optionsArray = JSON.parse(this.options);\r\n      } catch (e) {\r\n        console.error('Failed to parse options:', e);\r\n        optionsArray = [];\r\n      }\r\n    } else if (Array.isArray(this.options)) {\r\n      optionsArray = this.options;\r\n    }\r\n\r\n    switch (this.type) {\r\n      case 'text':\r\n        return (\r\n          <ifx-text-field error={false} disabled={false} placeholder={this.placeholder}\r\n            onIfxInput={event => this.handleTextInputChange(event)}\r\n          >{this.filterLabel}</ifx-text-field>\r\n        );\r\n      case 'single-select':\r\n        return (\r\n          <ifx-select\r\n            placeholder=\"true\"\r\n            search-enabled=\"true\"\r\n            search-placeholder-value=\"Search...\"\r\n            onIfxSelect={event => this.handleSingleSelectChange(event)}\r\n            ifx-placeholder-value={this.placeholder}\r\n            ifx-label={this.filterLabel}\r\n            ifx-options={this.options}\r\n          ></ifx-select>\r\n        );\r\n      case 'multi-select':\r\n        return (\r\n          <ifx-multiselect\r\n            label={this.filterLabel}\r\n            placeholder={this.placeholder}\r\n            onIfxSelect={event => this.handleMultiselectOptionChange(event)}\r\n          >\r\n            {optionsArray.map(option => (\r\n              <ifx-multiselect-option value={option.value || option}>\r\n                {option.label || option}\r\n              </ifx-multiselect-option>\r\n            ))}\r\n          </ifx-multiselect>\r\n        );\r\n      default:\r\n        return null;\r\n    }\r\n  }\r\n}\r\n\r\n"]}
+{"version":3,"file":"setFilter.js","sourceRoot":"","sources":["../../../../src/components/table-advanced-version/set-filter/setFilter.tsx"],"names":[],"mappings":"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","sourcesContent":["// SetFilter.tsx\nimport { Component, h, Event, EventEmitter, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-set-filter',\n  styleUrl: 'set-filter.scss',\n  shadow: true\n})\nexport class SetFilter {\n  @Prop() filterName: string;\n  @Prop() filterLabel: string;\n  @Prop() placeholder: string;\n  @Prop() type: 'text' | 'single-select' | 'multi-select' = 'text';\n  @Prop() options: any[] | string;\n  @State() filterValues: string[] = [];\n\n  @Event() ifxFilterSelect: EventEmitter;\n\n\n  handleTextInputChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n    const value = target.value;\n    this.ifxFilterSelect.emit({ filterName: this.filterName, filterValues: [value], type: this.type }); // Emit an array for consistency with the multi select component\n\n  }\n\n  handleSingleSelectChange(event: CustomEvent) {\n    const value = event.detail.value;\n    this.ifxFilterSelect.emit({ filterName: this.filterName, filterValues: [value], type: this.type }); // Emit an array for consistency with the multi select component\n  }\n\n\n  handleMultiselectOptionChange(event: CustomEvent) {\n    this.filterValues = event.detail.map(option => ({\n      label: option.value,\n      value: option.value\n    }));\n    this.ifxFilterSelect.emit({ filterName: this.filterName, filterValues: this.filterValues, type: this.type });\n  }\n\n\n  render() {\n    let optionsArray = [];\n\n    // Parse options if it's a string\n    if (typeof this.options === 'string') {\n      try {\n        optionsArray = JSON.parse(this.options);\n      } catch (e) {\n        console.error('Failed to parse options:', e);\n        optionsArray = [];\n      }\n    } else if (Array.isArray(this.options)) {\n      optionsArray = this.options;\n    }\n\n    switch (this.type) {\n      case 'text':\n        return (\n          <ifx-text-field error={false} disabled={false} placeholder={this.placeholder}\n            onIfxInput={event => this.handleTextInputChange(event)}\n          >{this.filterLabel}</ifx-text-field>\n        );\n      case 'single-select':\n        return (\n          <ifx-select\n            placeholder=\"true\"\n            search-enabled=\"true\"\n            search-placeholder-value=\"Search...\"\n            onIfxSelect={event => this.handleSingleSelectChange(event)}\n            ifx-placeholder-value={this.placeholder}\n            ifx-label={this.filterLabel}\n            ifx-options={this.options}\n          ></ifx-select>\n        );\n      case 'multi-select':\n        return (\n          <ifx-multiselect\n            label={this.filterLabel}\n            placeholder={this.placeholder}\n            onIfxSelect={event => this.handleMultiselectOptionChange(event)}\n          >\n            {optionsArray.map(option => (\n              <ifx-multiselect-option value={option.value || option}>\n                {option.label || option}\n              </ifx-multiselect-option>\n            ))}\n          </ifx-multiselect>\n        );\n      default:\n        return null;\n    }\n  }\n}\n\n"]}

package/dist/collection/components/table-advanced-version/statusCellRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"statusCellRenderer.js","sourceRoot":"","sources":["../../../src/components/table-advanced-version/statusCellRenderer.ts"],"names":[],"mappings":"AASA,MAAM,OAAO,kBAAkB;IAG7B,IAAI,CAAC,MAA2B;QAC9B,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC1C,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IACtB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,IAAI,CAAC;IACnB,CAAC;IAED,OAAO,CAAC,MAA2B;QACjC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;QACpB,OAAO,IAAI,CAAC;IACd,CAAC;IAEK,MAAM,CAAC,MAA2B;;QACxC,MAAM,KAAK,GAAG,MAAA,MAAM,CAAC,MAAM,0CAAE,KAA2B,CAAC;QACzD,MAAM,GAAG,GAAG,CAAC,MAAA,MAAM,CAAC,KAAK,mCAAI,MAAA,MAAM,CAAC,IAAI,0CAAG,KAAK,CAAC,CAAsC,CAAC;QAExF,IAAI,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;QAE3B,IAAI,GAAG,IAAI,OAAO,GAAG,KAAK,QAAQ,IAAI,OAAO,IAAI,GAAG,EAAE,CAAC;YACrD,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAQ,CAAC;YACvD,EAAE,CAAC,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC;YACrB,IAAI,GAAG,CAAC,KAAK,IAAI,IAAI;gBAAE,EAAE,CAAC,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC;YAC5C,EAAE,CAAC,MAAM,GAAG,CAAC,CAAE,GAAoB,CAAC,MAAM,CAAC;YAC3C,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QAC5B,CAAC;aAAM,IAAI,GAAG,IAAI,IAAI,EAAE,CAAC;YACvB,IAAI,CAAC,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;QACtC,CAAC;IACH,CAAC;CACA","sourcesContent":["// statusCellRenderer.ts\r\nimport { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\r\n\r\ntype StatusConfig = {\r\n  label: string;\r\n  color?: string;\r\n  border?: boolean;\r\n};\r\n\r\nexport class StatusCellRenderer implements ICellRendererComp {\r\n  private eGui!: HTMLDivElement;\r\n\r\n  init(params: ICellRendererParams) {\r\n    this.eGui = document.createElement('div');\r\n    this.render(params);\r\n  }\r\n\r\n  getGui() {\r\n    return this.eGui;\r\n  }\r\n\r\n  refresh(params: ICellRendererParams) {\r\n    this.render(params);\r\n    return true;\r\n  }\r\n\r\nprivate render(params: ICellRendererParams) {\r\n  const field = params.colDef?.field as string | undefined;\r\n  const cfg = (params.value ?? params.data?.[field]) as StatusConfig | string | undefined;\r\n\r\n  this.eGui.textContent = '';\r\n\r\n  if (cfg && typeof cfg === 'object' && 'label' in cfg) {\r\n    const el = document.createElement('ifx-status') as any;\r\n    el.label = cfg.label;\r\n    if (cfg.color != null) el.color = cfg.color;\r\n    el.border = !!(cfg as StatusConfig).border;\r\n    this.eGui.appendChild(el);\r\n  } else if (cfg != null) {\r\n    this.eGui.textContent = String(cfg);\r\n  }\r\n}\r\n}\r\n"]}
+{"version":3,"file":"statusCellRenderer.js","sourceRoot":"","sources":["../../../src/components/table-advanced-version/statusCellRenderer.ts"],"names":[],"mappings":"AASA,MAAM,OAAO,kBAAkB;IAG7B,IAAI,CAAC,MAA2B;QAC9B,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC1C,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IACtB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,IAAI,CAAC;IACnB,CAAC;IAED,OAAO,CAAC,MAA2B;QACjC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;QACpB,OAAO,IAAI,CAAC;IACd,CAAC;IAEK,MAAM,CAAC,MAA2B;;QACxC,MAAM,KAAK,GAAG,MAAA,MAAM,CAAC,MAAM,0CAAE,KAA2B,CAAC;QACzD,MAAM,GAAG,GAAG,CAAC,MAAA,MAAM,CAAC,KAAK,mCAAI,MAAA,MAAM,CAAC,IAAI,0CAAG,KAAK,CAAC,CAAsC,CAAC;QAExF,IAAI,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;QAE3B,IAAI,GAAG,IAAI,OAAO,GAAG,KAAK,QAAQ,IAAI,OAAO,IAAI,GAAG,EAAE,CAAC;YACrD,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAQ,CAAC;YACvD,EAAE,CAAC,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC;YACrB,IAAI,GAAG,CAAC,KAAK,IAAI,IAAI;gBAAE,EAAE,CAAC,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC;YAC5C,EAAE,CAAC,MAAM,GAAG,CAAC,CAAE,GAAoB,CAAC,MAAM,CAAC;YAC3C,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QAC5B,CAAC;aAAM,IAAI,GAAG,IAAI,IAAI,EAAE,CAAC;YACvB,IAAI,CAAC,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;QACtC,CAAC;IACH,CAAC;CACA","sourcesContent":["// statusCellRenderer.ts\nimport { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\n\ntype StatusConfig = {\n  label: string;\n  color?: string;\n  border?: boolean;\n};\n\nexport class StatusCellRenderer implements ICellRendererComp {\n  private eGui!: HTMLDivElement;\n\n  init(params: ICellRendererParams) {\n    this.eGui = document.createElement('div');\n    this.render(params);\n  }\n\n  getGui() {\n    return this.eGui;\n  }\n\n  refresh(params: ICellRendererParams) {\n    this.render(params);\n    return true;\n  }\n\nprivate render(params: ICellRendererParams) {\n  const field = params.colDef?.field as string | undefined;\n  const cfg = (params.value ?? params.data?.[field]) as StatusConfig | string | undefined;\n\n  this.eGui.textContent = '';\n\n  if (cfg && typeof cfg === 'object' && 'label' in cfg) {\n    const el = document.createElement('ifx-status') as any;\n    el.label = cfg.label;\n    if (cfg.color != null) el.color = cfg.color;\n    el.border = !!(cfg as StatusConfig).border;\n    this.eGui.appendChild(el);\n  } else if (cfg != null) {\n    this.eGui.textContent = String(cfg);\n  }\n}\n}\n"]}

package/dist/collection/components/table-advanced-version/table.js

@@ -45,6 +45,7 @@ export class Table {
         this.enableSelection = false;
         this.selectedRows = new Set();
         this.selectAll = false;
+        this.selectedRowsData = new Map();
         this.showLoading = false;
         this.originalRowData = [];
         this.internalItemsPerPage = JSON.stringify([
@@ -54,12 +55,41 @@ export class Table {
         ]);
         this.handleSelectAll = (checked) => {
             this.selectAll = checked;
+            const newSelectedRows = new Set(this.selectedRows);
+            const newSelectedRowsData = new Map(this.selectedRowsData);
             if (checked) {
-                this.selectedRows = new Set(this.allRowData.map(row => row.__rowId));
+                if (this.serverSidePagination) {
+                    this.rowData.forEach(row => {
+                        const rowId = row.__rowId;
+                        newSelectedRows.add(rowId);
+                        const { __checkbox, __rowId } = row, cleanRow = __rest(row, ["__checkbox", "__rowId"]);
+                        newSelectedRowsData.set(rowId, cleanRow);
+                    });
+                }
+                else {
+                    this.allRowData.forEach(row => {
+                        const rowId = row.__rowId;
+                        newSelectedRows.add(rowId);
+                        const { __checkbox, __rowId } = row, cleanRow = __rest(row, ["__checkbox", "__rowId"]);
+                        newSelectedRowsData.set(rowId, cleanRow);
+                    });
+                }
             }
             else {
-                this.selectedRows = new Set();
+                if (this.serverSidePagination) {
+                    this.rowData.forEach(row => {
+                        const rowId = row.__rowId;
+                        newSelectedRows.delete(rowId);
+                        newSelectedRowsData.delete(rowId);
+                    });
+                }
+                else {
+                    newSelectedRows.clear();
+                    newSelectedRowsData.clear();
+                }
             }
+            this.selectedRows = newSelectedRows;
+            this.selectedRowsData = newSelectedRowsData;
             this.updateCheckboxStates();
             this.updateHeaderCheckboxState();
             this.emitSelectionChange();
@@ -68,14 +98,25 @@ export class Table {
             const clickedRowData = params.data;
             const rowId = clickedRowData.__rowId;
             const newSelectedRows = new Set(this.selectedRows);
+            const newSelectedRowsData = new Map(this.selectedRowsData);
             if (newSelectedRows.has(rowId)) {
                 newSelectedRows.delete(rowId);
+                newSelectedRowsData.delete(rowId);
             }
             else {
                 newSelectedRows.add(rowId);
+                const { __checkbox, __rowId } = clickedRowData, cleanRow = __rest(clickedRowData, ["__checkbox", "__rowId"]);
+                newSelectedRowsData.set(rowId, cleanRow);
             }
             this.selectedRows = newSelectedRows;
-            this.selectAll = newSelectedRows.size === this.allRowData.length;
+            this.selectedRowsData = newSelectedRowsData;
+            if (this.serverSidePagination) {
+                const currentPageSelectedCount = this.rowData.filter(row => newSelectedRows.has(row.__rowId)).length;
+                this.selectAll = currentPageSelectedCount === this.rowData.length && this.rowData.length > 0;
+            }
+            else {
+                this.selectAll = newSelectedRows.size === this.allRowData.length && this.allRowData.length > 0;
+            }
             this.updateCheckboxStates();
             this.updateHeaderCheckboxState();
             this.emitSelectionChange();
@@ -197,10 +238,19 @@ export class Table {
                 var _a;
                 const headerCheckbox = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelector('.ag-header-cell[col-id="__checkbox"] ifx-checkbox');
                 if (headerCheckbox) {
-                    const allSelected = this.selectedRows.size === this.allRowData.length && this.allRowData.length > 0;
-                    const someSelected = this.selectedRows.size > 0 && this.selectedRows.size < this.allRowData.length;
-                    headerCheckbox.checked = allSelected;
-                    headerCheckbox.indeterminate = someSelected;
+                    if (this.serverSidePagination) {
+                        const currentPageSelectedCount = this.rowData.filter(row => this.selectedRows.has(row.__rowId)).length;
+                        const allOnPageSelected = currentPageSelectedCount === this.rowData.length && this.rowData.length > 0;
+                        const someOnPageSelected = currentPageSelectedCount > 0 && currentPageSelectedCount < this.rowData.length;
+                        headerCheckbox.checked = allOnPageSelected;
+                        headerCheckbox.indeterminate = someOnPageSelected;
+                    }
+                    else {
+                        const allSelected = this.selectedRows.size === this.allRowData.length && this.allRowData.length > 0;
+                        const someSelected = this.selectedRows.size > 0 && this.selectedRows.size < this.allRowData.length;
+                        headerCheckbox.checked = allSelected;
+                        headerCheckbox.indeterminate = someSelected;
+                    }
                 }
             }, 0);
         }
@@ -287,10 +337,8 @@ export class Table {
                     if (!textFilterMatched)
                         return false;
                 }
-                // For multi-select filters, this remains unchanged
                 else if (filterInfo.type === 'multi-select') {
                     let rowValue = row[filterName] != null ? String(row[filterName]).toLowerCase() : '';
-                    // Check if 'undefined' is a selected value and include rows with empty values in that case
                     let includesUndefined = selectedValues.includes('undefined');
                     if (!selectedValues.includes(rowValue) && !(includesUndefined && rowValue === '')) {
                         return false;
@@ -301,30 +349,31 @@ export class Table {
         });
     }
     async updateTableView() {
+        if (this.serverSidePagination) {
+            this.selectAll = false;
+        }
         if (this.serverSidePagination && this.serverPageChangeHandler) {
             const { rows, total } = await this.serverPageChangeHandler({
                 page: this.currentPage,
                 pageSize: this.paginationPageSize,
             });
-            if (this.enableSelection) {
-                rows.forEach((row, index) => {
-                    var _a;
-                    if (!row.__rowId) {
-                        row.__rowId = `row_${(this.currentPage - 1) * this.paginationPageSize + index}_${Date.now()}`;
-                    }
-                    row.__checkbox = {
-                        disabled: false,
-                        checked: ((_a = this.selectedRows) === null || _a === void 0 ? void 0 : _a.has(row.__rowId)) || false,
-                        size: 's',
-                        indeterminate: false,
-                        error: false,
-                    };
-                });
-            }
+            rows.forEach((row, index) => {
+                var _a;
+                const rowId = row.sampleNumber || `row_${(this.currentPage - 1) * this.paginationPageSize + index}`;
+                row.__rowId = rowId;
+                row.__checkbox = {
+                    disabled: false,
+                    checked: ((_a = this.selectedRows) === null || _a === void 0 ? void 0 : _a.has(rowId)) || false,
+                    size: 's',
+                    indeterminate: false,
+                    error: false,
+                };
+            });
             this.rowData = rows;
             this.matchingResultsCount = total;
             if (this.gridApi) {
                 this.gridApi.setGridOption('rowData', rows);
+                this.updateHeaderCheckboxState();
             }
             const paginationElement = this.host.shadowRoot.querySelector('ifx-pagination');
             if (paginationElement) {
@@ -332,9 +381,15 @@ export class Table {
             }
         }
         else {
-            const startIndex = (this.currentPage - 1) * this.paginationPageSize;
-            const endIndex = startIndex + this.paginationPageSize;
-            const visibleRowData = this.allRowData.slice(startIndex, endIndex);
+            let visibleRowData;
+            if (this.pagination) {
+                const startIndex = (this.currentPage - 1) * this.paginationPageSize;
+                const endIndex = startIndex + this.paginationPageSize;
+                visibleRowData = this.allRowData.slice(startIndex, endIndex);
+            }
+            else {
+                visibleRowData = this.allRowData;
+            }
             if (this.enableSelection) {
                 visibleRowData.forEach(row => {
                     var _a, _b;
@@ -357,6 +412,7 @@ export class Table {
             if (this.gridApi) {
                 this.gridApi.setGridOption('rowData', this.rowData);
             }
+            this.updateHeaderCheckboxState();
         }
     }
     clearAllFilters() {
@@ -513,16 +569,35 @@ export class Table {
         });
     }
     async handlePageChange(event) {
+        if (!this.pagination) {
+            return;
+        }
         this.currentPage = event.detail.currentPage;
+        if (this.serverSidePagination) {
+            this.selectAll = false;
+        }
         if (this.serverSidePagination && this.serverPageChangeHandler) {
             const { rows, total } = await this.serverPageChangeHandler({
                 page: this.currentPage,
                 pageSize: this.paginationPageSize,
             });
+            rows.forEach((row, index) => {
+                var _a;
+                const rowId = row.sampleNumber || `row_${(this.currentPage - 1) * this.paginationPageSize + index}`;
+                row.__rowId = rowId;
+                row.__checkbox = {
+                    disabled: false,
+                    checked: ((_a = this.selectedRows) === null || _a === void 0 ? void 0 : _a.has(rowId)) || false,
+                    size: 's',
+                    indeterminate: false,
+                    error: false,
+                };
+            });
             this.rowData = rows;
             this.matchingResultsCount = total;
             if (this.gridApi) {
                 this.gridApi.setGridOption('rowData', this.rowData);
+                this.updateHeaderCheckboxState();
             }
             const paginationElement = this.host.shadowRoot.querySelector('ifx-pagination');
             if (paginationElement) {
@@ -533,8 +608,27 @@ export class Table {
             const startIndex = (this.currentPage - 1) * this.paginationPageSize;
             const endIndex = startIndex + this.paginationPageSize;
             const visibleRowData = this.allRowData.slice(startIndex, endIndex);
+            if (this.enableSelection) {
+                visibleRowData.forEach(row => {
+                    var _a, _b;
+                    if (!row.__checkbox) {
+                        row.__checkbox = {
+                            disabled: false,
+                            checked: ((_a = this.selectedRows) === null || _a === void 0 ? void 0 : _a.has(row.__rowId)) || false,
+                            size: 's',
+                            indeterminate: false,
+                            error: false,
+                        };
+                    }
+                    else {
+                        row.__checkbox.checked = ((_b = this.selectedRows) === null || _b === void 0 ? void 0 : _b.has(row.__rowId)) || false;
+                    }
+                });
+            }
+            this.rowData = visibleRowData;
             if (this.gridApi) {
                 this.gridApi.setGridOption('rowData', visibleRowData);
+                this.updateHeaderCheckboxState();
             }
         }
     }
@@ -584,7 +678,8 @@ export class Table {
         return rows.slice(0, this.paginationPageSize);
     }
     updateCheckboxStates() {
-        this.allRowData.forEach(row => {
+        const dataToUpdate = this.rowData;
+        dataToUpdate.forEach(row => {
             if (row.__checkbox) {
                 row.__checkbox.checked = this.selectedRows.has(row.__rowId);
             }
@@ -597,20 +692,20 @@ export class Table {
         }
     }
     emitSelectionChange() {
-        const selectedRowsData = Array.from(this.selectedRows)
-            .map(rowId => {
-            const row = this.allRowData.find(r => r.__rowId === rowId);
-            if (!row)
-                return null;
-            const { __checkbox, __rowId } = row, rowData = __rest(row, ["__checkbox", "__rowId"]);
-            return rowData;
-        })
-            .filter(row => row !== null);
+        const selectedRowsArray = Array.from(this.selectedRowsData.values());
+        let isSelectAll;
+        if (this.serverSidePagination) {
+            const currentPageSelectedCount = this.rowData.filter(row => this.selectedRows.has(row.__rowId)).length;
+            isSelectAll = currentPageSelectedCount === this.rowData.length && this.rowData.length > 0;
+        }
+        else {
+            isSelectAll = this.selectedRows.size === this.allRowData.length && this.allRowData.length > 0;
+        }
         this.host.dispatchEvent(new CustomEvent('ifxSelectionChange', {
             detail: {
-                selectedRows: selectedRowsData,
-                selectedCount: selectedRowsData.length,
-                isSelectAll: this.selectedRows.size === this.allRowData.length && this.allRowData.length > 0,
+                selectedRows: selectedRowsArray,
+                selectedCount: selectedRowsArray.length,
+                isSelectAll: isSelectAll,
             },
             bubbles: true,
         }));
@@ -734,12 +829,12 @@ export class Table {
             };
         }
         const filterClass = this.filterOrientation === 'topbar' ? 'topbar-layout' : this.filterOrientation === 'none' ? '' : 'sidebar-layout';
-        return (h(Host, { key: 'aed3105d02de1b425538c01dd241a0cc8ad56862' }, h("div", { key: '4558eb8d179b08d909d6406a36987e2b424e2e3d', class: "table-container" }, this.filterOrientation === 'sidebar' && (h("div", { key: '3507914423eeceac168b20afcfbd9ca4314b70cd', class: "sidebar-btn" }, h("ifx-button", { key: '48ba9e71c7aaa1ac3fa1cb16aaddf55d4a5587ae', type: "button", disabled: false, variant: "secondary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.toggleSidebarFilters() }, h("ifx-icon", { key: 'b08ca29c94a41b2510028d549edb8f8e161865f7', icon: "cross-16" }), this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'))), h("div", { key: '766df4ac67ac10a94418fadae0fd8a402adcf19f', class: filterClass }, this.filterOrientation === 'sidebar' && this.showSidebarFilters && (h("div", { key: '89323404fb703cd96b5423c735a2d0b3047cc427', class: "sidebar-container" }, h("div", { key: '8cb80b12813e07f5671359dec7a37347f154a89f', class: "filters-title-container" }, h("span", { key: 'ed31fcf5e3a86323ebef8a3f38f8a32d63d68a31', class: "filters-title" }, "Filters")), h("div", { key: 'd76a86a785ffc46a7f364818a9b93ecea9158132', class: "set-filter-wrapper-sidebar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && h("slot", { key: '0dc3ef1ef98bf48f99e1a9fab419d7173b20df43', name: "sidebar-filter" })))), this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (h("div", { key: '6f6046736499cb18dfb4d8910ddc587dce3ac37a', class: "set-filter-wrapper-topbar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && h("slot", { key: '6adf3eaaa45e7c43d6cdf4649de26f7bedf56e01', name: "topbar-filter" }))), h("div", { key: '18562ba4f47e25f18255ea1278962f9e2fc27cc2', class: "table-pagination-wrapper" }, this.filterOrientation !== 'none' && this.filterOrientation !== 'topbar' && this.showSidebarFilters && (h("div", { key: '8b8b49aa984ee4abd1800cbc81d874dd17ee1231', class: "filter-chips" }, Object.keys(this.currentFilters).map(name => {
+        return (h(Host, { key: 'a0421844e9c61683bd742e73f1809ffe3e0e6bad' }, h("div", { key: 'cdbddf03c9ec9508afe475280031ac789465c924', class: "table-container" }, this.filterOrientation === 'sidebar' && (h("div", { key: '9190967ad17c4bc873461f9679857aecfc42cf29', class: "sidebar-btn" }, h("ifx-button", { key: 'e6af658a82fa88e87b3b2cc3d377268d4b8e2cf4', type: "button", disabled: false, variant: "secondary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.toggleSidebarFilters() }, h("ifx-icon", { key: '20be3fda6b40d956202c70dd8f2d5b8e27fccca1', icon: "cross-16" }), this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'))), h("div", { key: 'b886df2920915f2e26b9e92a29f95971c769fe0c', class: filterClass }, this.filterOrientation === 'sidebar' && this.showSidebarFilters && (h("div", { key: '768e749d6bb7294581916fa350ab6db406fd56cc', class: "sidebar-container" }, h("div", { key: '00e5ee6ae4127e25ed6f354431fb50826a5738b7', class: "filters-title-container" }, h("span", { key: 'c40714d09dae34e2fe4ca75f4ddb12f4c81b37da', class: "filters-title" }, "Filters")), h("div", { key: '4c182b7dd4fe8996011025af996c1a2c8815c6d2', class: "set-filter-wrapper-sidebar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && h("slot", { key: '8a7dc422f3e4382554eb2af47de00ed53442d1d5', name: "sidebar-filter" })))), this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (h("div", { key: '0f1ee29a1bc041554cdc65108136c646efc7b934', class: "set-filter-wrapper-topbar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && h("slot", { key: 'c9ce08d1026ebfc80ddd3a11bbe1b26a09e58c64', name: "topbar-filter" }))), h("div", { key: '12f0b8bcb4dcebe0b57779f09ac703a76c741df0', class: "table-pagination-wrapper" }, this.filterOrientation !== 'none' && this.filterOrientation !== 'topbar' && this.showSidebarFilters && (h("div", { key: '50fae34e9d7652ad2d27a2dbe10a973cc559f61b', class: "filter-chips" }, Object.keys(this.currentFilters).map(name => {
             const filter = this.currentFilters[name];
             const filterValues = filter.filterValues;
             const isMultiSelect = filter.type !== 'text';
             return filterValues.length > 0 ? (h("ifx-chip", { placeholder: name, size: "large", variant: isMultiSelect ? 'multi' : 'single', readOnly: true, value: filterValues, key: name }, filterValues.map(filterValue => (h("ifx-chip-item", { value: filterValue, selected: true, key: filterValue }, filterValue))))) : null;
-        }))), h("div", { key: '9dea2c6e676eb5b5c9a12507db3ce36ccb77690e', class: "headline-wrapper" }, this.filterOrientation !== 'none' && this.headline && (h("div", { key: 'ac4056b29fbe87a7df4b8e6c63c2018a270619a6', class: "matching-results-container" }, h("span", { key: '318c260b1d7218f07b00024feb6ab8e3b862e2a1', class: "matching-results-count" }, "(", this.matchingResultsCount, ")"), h("span", { key: '9ab7ca1283fdf966ba613e36d76ade4eec543997', class: "matching-results-text" }, this.headline))), h("div", { key: '3ce5feb6e709df11319a9da723f9acf7b71b3e68', class: "inner-buttons-wrapper" }, h("slot", { key: 'db3ad5aa4cd1c9f2b4a97c5766a9ac130c83c446', name: "inner-button" }))), h("div", { key: '889950920e705429bfd0a35e4c740cabe6052f08', id: "table-wrapper", class: this.getTableClassNames() }, h("div", { key: '71b42826058ed0dcc642e4a10599c68f9f1d4309', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ''}`, style: style, ref: el => (this.container = el) })), h("div", { key: '9b7170f76c1c49878ba4679f11418235d1e91cb9', class: "pagination-wrapper" }, this.pagination ? (h("ifx-pagination", { total: this.serverSidePagination ? this.matchingResultsCount : this.allRowData.length, "current-page": this.currentPage, "items-per-page": this.internalItemsPerPage })) : null))))));
+        }))), h("div", { key: 'a3d61c90ad5d8744be6c55d7790551a53d5388e9', class: "headline-wrapper" }, this.filterOrientation !== 'none' && this.headline && (h("div", { key: '598c04897a782b9f7fa8ea69b202e17c5db87142', class: "matching-results-container" }, h("span", { key: '174bbc64858c0b952eef4e289ec25a88f6a13ba5', class: "matching-results-count" }, "(", this.matchingResultsCount, ")"), h("span", { key: 'fa4e1a350a97794ba1c0390176d7413c19ff9286', class: "matching-results-text" }, this.headline))), h("div", { key: '52105af6541e2a5588dc0307c20d7e4b3e72220c', class: "inner-buttons-wrapper" }, h("slot", { key: 'fe68a9b64d3ed0fcbdb6a2ac9f2092fb9c921974', name: "inner-button" }))), h("div", { key: 'd3001b399da78d9e6005f4cf262a7f74b77b9cb4', id: "table-wrapper", class: this.getTableClassNames() }, h("div", { key: '4cc86621f42cb3c4de69618957297666e7df04a3', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ''}`, style: style, ref: el => (this.container = el) })), h("div", { key: 'ffea3142fecc04ca051aeeefd17dc9860ca8a1e1', class: "pagination-wrapper" }, this.pagination ? (h("ifx-pagination", { total: this.serverSidePagination ? this.matchingResultsCount : this.allRowData.length, "current-page": this.currentPage, "items-per-page": this.internalItemsPerPage })) : null))))));
     }
     hasButtonCol() {
         return this.getColData().some(column => column.field === 'button');
@@ -1117,7 +1212,8 @@ export class Table {
             "showSidebarFilters": {},
             "matchingResultsCount": {},
             "selectedRows": {},
-            "selectAll": {}
+            "selectAll": {},
+            "selectedRowsData": {}
         };
     }
     static get methods() {