npm - @infineon/infineon-design-system-stencil - Versions diffs - 39.4.4--canary.1723.b577eb08ea34aa81e7d1054220d0f31ca92579a9.0 → 39.4.4-canary.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1205) hide show

package/dist/infineon-design-system-stencil/p-cc748b24.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["ButtonCellRenderer","init","params","this","createButton","getGui","eGui","refresh","updateButton","config","data","colDef","field","options","cellRendererParams","document","createElement","eButton","hasRequiredKeys","setButtonAttributes","appendChild","attachEventListener","textContent","String","detachEventListener","setAttribute","disabled","toString","variant","theme","type","size","fullWidth","target","href","text","eventListener","event","onButtonClick","addEventListener","removeEventListener","CheckboxCellRenderer","createCheckbox","updateCheckbox","style","display","alignItems","justifyContent","eCheckbox","setCheckboxAttributes","error","checked","indeterminate","onCheckboxClick","CheckboxHeaderRenderer","createHeader","Object","assign","detail","onSelectAll","IconButtonCellRenderer","createIconButton","updateIconButton","eIconButton","setIconButtonAttributes","shape","icon","onIconButtonClick","LinkCellRenderer","createLink","updateLink","_a","_b","value","_c","eLink","setLinkAttributes","download","StatusCellRenderer","render","cfg","el","label","color","border","CustomNoRowsOverlay","innerHTML","noRowsMessageFunc","_params","CustomLoadingOverlay","tableCss","Table","constructor","hostRef","currentPage","rowData","colData","filterOptions","currentFilters","allRowData","rowHeight","tableHeight","pagination","paginationPageSize","filterOrientation","headline","showSidebarFilters","matchingResultsCount","serverSidePagination","enableSelection","selectedRows","Set","selectAll","showLoading","originalRowData","internalItemsPerPage","JSON","stringify","selected","handleSelectAll","map","row","__rowId","updateCheckboxStates","updateHeaderCheckboxState","emitSelectionChange","handleRowCheckboxClick","clickedRowData","rowId","newSelectedRows","has","delete","add","length","rowsChanged","_newVal","parsed","parseArrayInput","rows","forEach","index","Date","now","Math","random","__checkbox","updateTableView","updateFilterOptions","colsChanged","getColData","gridApi","setGridOption","sizeColumnsToFit","defaultMinWidth","handleResultsPerPageChange","e","Number","handleChipChange","name","currentSelection","previousSelection","updatedFilters","customEvent","CustomEvent","filterName","bubbles","composed","host","dispatchEvent","filterValues","selection","applyAllFilters","onButtonRendererOptionsChanged","setColumnDefs","onIconButtonRendererOptionsChanged","onCheckboxRendererOptionsChanged","input","parse","Array","isArray","console","toggleSidebarFilters","col","setTimeout","headerCheckbox","container","querySelector","allSelected","someSelected","handleSidebarFilterChange","filterGroups","filterGroup","filterGroupName","selectedItems","item","handleTopbarFilterChange","filters","filter","filterInfo","selectedValues","toLowerCase","textFilterMatched","property","hasOwnProperty","rowValue","some","filterValue","startsWith","includesUndefined","includes","serverPageChangeHandler","total","page","pageSize","paginationElement","shadowRoot","startIndex","endIndex","visibleRowData","slice","clearAllFilters","onBtShowLoading","showLoadingOverlay","setPaginationItemsPerPage","newItemsPerPage","paginationItemsPerPage","itemsPerPageArray","selectedOption","find","option","componentWillLoad","uniqueKey","floor","getRowData","gridOptions","suppressCellFocus","headerHeight","components","checkboxCellRenderer","checkboxHeaderRenderer","customLoadingOverlay","customNoRowsOverlay","defaultColDef","resizable","autoHeight","suppressDragLeaveHidesColumns","enableCellTextSelection","onFirstDataRendered","bind","columnDefs","loadingOverlayComponent","noRowsOverlayComponent","noRowsOverlayComponentParams","icons","sortAscending","sortDescending","sortUnSort","rowDragManaged","dndSource","animateRows","navigateToNextCell","focusCellIfContainingButton","api","nextCellPosition","tabToNextCell","cellPosition","column","getColDef","rowNode","getDisplayedRowAtIndex","rowIndex","cellRenderers","getCellRendererInstances","rowNodes","columns","renderedContent","button","focusableChild","focus","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","createGrid","handlePageChange","sidebarFilterElements","querySelectorAll","sidebarFilterElement","topbarFilterElements","topbarFilterElement","componentWillUnmount","sidebarFilters","sidebarFilter","topbarFilters","topbarFilter","isJSONParseable","str","undefined","refreshCells","force","selectedRowsData","from","r","__rest","selectedCount","isSelectAll","cols","checkboxColumn","headerName","width","pinned","cellRenderer","headerComponent","headerComponentParams","sortable","valueFormatter","cellDataType","unshift","buttonRendererOptions","checkboxRendererOptions","_d","iconButtonRendererOptions","handleResetButtonClick","resetEvent","window","disconnectedCallback","resetButton","getTableClassNames","classNames","height","filterClass","h","Host","key","class","onClick","keys","isMultiSelect","placeholder","readOnly","id","ref","hasButtonCol","onDragOver","dragSupported","dataTransfer","dropEffect","preventDefault","onDrop","jsonData","getData","eJsonRow","classList","innerText","eJsonDisplay"],"sources":["src/components/table-advanced-version/buttonCellRenderer.ts","src/components/table-advanced-version/checkboxCellRenderer.ts","src/components/table-advanced-version/checkboxHeaderRenderer.ts","src/components/table-advanced-version/iconButtonCellRenderer.ts","src/components/table-advanced-version/linkCellRenderer.ts","src/components/table-advanced-version/statusCellRenderer.ts","src/components/table-advanced-version/customNoRowsOverlay.ts","src/components/table-advanced-version/customLoadingOverlay.ts","src/components/table-advanced-version/table.scss?tag=ifx-table&encapsulation=shadow","src/components/table-advanced-version/table.tsx"],"sourcesContent":["import { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\r\nimport { ButtonInterface } from './interfaces';\r\n\r\nexport class ButtonCellRenderer implements ICellRendererComp {\r\n eGui!: HTMLDivElement;\r\n eButton!: HTMLElement; // Change to a generic HTMLElement to accommodate custom elements\r\n eventListener!: (event: Event) => void;\r\n\r\n init(params: ICellRendererParams) {\r\n this.createButton(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.updateButton(params);\r\n return true;\r\n }\r\n\r\n private createButton(params: ICellRendererParams) {\r\n const config = params.data[params.colDef.field];\r\n const options = params.colDef.cellRendererParams || {};\r\n \r\n this.eGui = document.createElement('div');\r\n this.eButton = document.createElement('ifx-button') as HTMLElement;\r\n \r\n if (this.hasRequiredKeys(config)) {\r\n this.setButtonAttributes(config);\r\n this.eGui.appendChild(this.eButton);\r\n this.attachEventListener(options, params);\r\n } else {\r\n this.eGui.textContent = config ? String(config) : '';\r\n }\r\n }\r\n\r\n private updateButton(params: ICellRendererParams) {\r\n const config = params.data[params.colDef.field];\r\n const options = params.colDef.cellRendererParams || {};\r\n \r\n if (this.hasRequiredKeys(config)) {\r\n this.setButtonAttributes(config);\r\n this.detachEventListener();\r\n this.attachEventListener(options, params);\r\n } else {\r\n this.eGui.textContent = config ? String(config) : '';\r\n }\r\n }\r\n\r\n private setButtonAttributes(config: ButtonInterface) {\r\n this.eButton.setAttribute('disabled', config.disabled.toString());\r\n this.eButton.setAttribute('variant', config.variant);\r\n this.eButton.setAttribute('theme', config.theme);\r\n this.eButton.setAttribute('type', config.type);\r\n this.eButton.setAttribute('size', config.size);\r\n this.eButton.setAttribute('full-width', config.fullWidth.toString());\r\n this.eButton.setAttribute('target', config.target);\r\n this.eButton.setAttribute('href', config.href);\r\n this.eButton.textContent = config.text;\r\n }\r\n\r\n private attachEventListener(options: any, params: ICellRendererParams) {\r\n this.eventListener = (event: Event) => {\r\n if (options.onButtonClick) {\r\n options.onButtonClick(params, event);\r\n }\r\n };\r\n this.eButton.addEventListener('click', this.eventListener);\r\n }\r\n\r\n private detachEventListener() {\r\n if (this.eventListener) {\r\n this.eButton.removeEventListener('click', this.eventListener);\r\n }\r\n }\r\n\r\n private hasRequiredKeys(config: ButtonInterface): boolean {\r\n return config && config.text !== '' && config.variant !== '' && config.size !== '' && config.type !== '';\r\n }\r\n}\r\n","import { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\r\nimport { CheckboxInterface } from './interfaces';\r\n\r\nexport class CheckboxCellRenderer implements ICellRendererComp {\r\n eGui!: HTMLDivElement;\r\n eCheckbox!: HTMLElement;\r\n eventListener!: (event: Event) => void;\r\n\r\n init(params: ICellRendererParams) {\r\n this.createCheckbox(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.updateCheckbox(params);\r\n return true;\r\n }\r\n\r\n private createCheckbox(params: ICellRendererParams) {\r\n const config = params.data[params.colDef.field];\r\n const options = params.colDef.cellRendererParams || {};\r\n this.eGui = document.createElement('div');\r\n this.eGui.style.display = 'flex';\r\n this.eGui.style.alignItems = 'center';\r\n this.eGui.style.justifyContent = 'center';\r\n this.eCheckbox = document.createElement('ifx-checkbox') as HTMLElement;\r\n\r\n if (this.hasRequiredKeys(config)) {\r\n this.setCheckboxAttributes(config);\r\n this.eGui.appendChild(this.eCheckbox);\r\n this.attachEventListener(options, params);\r\n } else {\r\n this.eGui.textContent = config ? String(config) : 'No checkbox data';\r\n }\r\n }\r\n\r\n private updateCheckbox(params: ICellRendererParams) {\r\n const config = params.data[params.colDef.field];\r\n const options = params.colDef.cellRendererParams || {};\r\n\r\n if (this.hasRequiredKeys(config)) {\r\n this.setCheckboxAttributes(config);\r\n this.detachEventListener();\r\n this.attachEventListener(options, params);\r\n } else {\r\n this.eGui.textContent = config ? String(config) : '';\r\n }\r\n }\r\n\r\n private setCheckboxAttributes(config: CheckboxInterface) {\r\n this.eCheckbox.setAttribute('disabled', config.disabled.toString());\r\n this.eCheckbox.setAttribute('error', config.error.toString());\r\n this.eCheckbox.setAttribute('size', config.size);\r\n this.eCheckbox.setAttribute('checked', config.checked.toString());\r\n this.eCheckbox.setAttribute('indeterminate', config.indeterminate.toString());\r\n }\r\n\r\n private attachEventListener(options: any, params: ICellRendererParams) {\r\n this.eventListener = (event: Event) => {\r\n if (options.onCheckboxClick) {\r\n options.onCheckboxClick(params, event);\r\n }\r\n };\r\n this.eCheckbox.addEventListener('click', this.eventListener);\r\n }\r\n\r\n private detachEventListener() {\r\n if (this.eventListener) {\r\n this.eCheckbox.removeEventListener('click', this.eventListener);\r\n }\r\n }\r\n\r\n private hasRequiredKeys(config: CheckboxInterface): boolean {\r\n return config && config.size !== '';\r\n }\r\n}\r\n","import { IHeaderComp, IHeaderParams } from 'ag-grid-community';\r\n\r\nexport class CheckboxHeaderRenderer implements IHeaderComp {\r\n eGui!: HTMLDivElement;\r\n eCheckbox!: HTMLElement;\r\n params!: IHeaderParams & { onSelectAll?: (checked: boolean) => void };\r\n\r\n init(params: IHeaderParams & { onSelectAll?: (checked: boolean) => void }) {\r\n this.params = params;\r\n this.createHeader();\r\n }\r\n\r\n getGui() {\r\n return this.eGui;\r\n }\r\n\r\n refresh(params: IHeaderParams): boolean {\r\n this.params = { ...this.params, ...params };\r\n return true;\r\n }\r\n\r\n private createHeader() {\r\n this.eGui = document.createElement('div');\r\n this.eGui.style.display = 'flex';\r\n this.eGui.style.alignItems = 'center';\r\n this.eGui.style.justifyContent = 'center';\r\n\r\n this.eCheckbox = document.createElement('ifx-checkbox');\r\n this.eCheckbox.setAttribute('size', 's');\r\n this.eCheckbox.setAttribute('checked', 'false');\r\n\r\n this.eCheckbox.addEventListener('ifxChange', (event: any) => {\r\n const checked = event.detail;\r\n if (this.params.onSelectAll) {\r\n this.params.onSelectAll(checked);\r\n }\r\n });\r\n\r\n this.eGui.appendChild(this.eCheckbox);\r\n }\r\n}\r\n","import { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\r\nimport { IconButtonInterface } from './interfaces';\r\n\r\nexport class IconButtonCellRenderer implements ICellRendererComp {\r\n eGui!: HTMLDivElement;\r\n eIconButton!: HTMLElement; \r\n eventListener!: (event: Event) => void;\r\n\r\n init(params: ICellRendererParams) {\r\n this.createIconButton(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.updateIconButton(params);\r\n return true;\r\n }\r\n\r\n private createIconButton(params: ICellRendererParams) {\r\n const config = params.data[params.colDef.field];\r\n const options = params.colDef.cellRendererParams || {};\r\n \r\n this.eGui = document.createElement('div');\r\n this.eIconButton = document.createElement('ifx-icon-button') as HTMLElement;\r\n \r\n if (this.hasRequiredKeys(config)) {\r\n this.setIconButtonAttributes(config);\r\n this.eGui.appendChild(this.eIconButton);\r\n this.attachEventListener(options, params);\r\n } else {\r\n this.eGui.textContent = config ? String(config) : '';\r\n }\r\n }\r\n\r\n private updateIconButton(params: ICellRendererParams) {\r\n const config = params.data[params.colDef.field];\r\n const options = params.colDef.cellRendererParams || {};\r\n \r\n if (this.hasRequiredKeys(config)) {\r\n this.setIconButtonAttributes(config);\r\n this.detachEventListener();\r\n this.attachEventListener(options, params);\r\n } else {\r\n this.eGui.textContent = config ? String(config) : '';\r\n }\r\n }\r\n\r\n private setIconButtonAttributes(config: IconButtonInterface) {\r\n this.eIconButton.setAttribute('disabled', config.disabled.toString());\r\n this.eIconButton.setAttribute('variant', config.variant);\r\n this.eIconButton.setAttribute('shape', config.shape);\r\n this.eIconButton.setAttribute('size', config.size);\r\n this.eIconButton.setAttribute('target', config.target);\r\n this.eIconButton.setAttribute('href', config.href);\r\n this.eIconButton.setAttribute('icon', config.icon);\r\n }\r\n\r\n private attachEventListener(options: any, params: ICellRendererParams) {\r\n this.eventListener = (event: Event) => {\r\n if (options.onIconButtonClick) {\r\n options.onIconButtonClick(params, event);\r\n }\r\n };\r\n this.eIconButton.addEventListener('click', this.eventListener);\r\n }\r\n\r\n private detachEventListener() {\r\n if (this.eventListener) {\r\n this.eIconButton.removeEventListener('click', this.eventListener);\r\n }\r\n }\r\n\r\n private hasRequiredKeys(config: IconButtonInterface): boolean {\r\n return config && config.variant !== '' && config.size !== '' && config.shape !== '';\r\n }\r\n}\r\n","import { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\r\nimport { LinkInterface } from './interfaces';\r\n\r\nexport class LinkCellRenderer implements ICellRendererComp {\r\n eGui!: HTMLDivElement;\r\n eLink!: HTMLElement;\r\n\r\n init(params: ICellRendererParams) {\r\n this.createLink(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.updateLink(params);\r\n return true;\r\n }\r\n\r\n private createLink(params: ICellRendererParams) {\r\n const field = params.colDef?.field as string | undefined;\r\n const config = (params.value ?? params.data?.[field]) as any;\r\n\r\n this.eGui = document.createElement('div');\r\n this.eLink = document.createElement('ifx-link') as HTMLElement;\r\n\r\n if (this.hasRequiredKeys(config)) {\r\n this.setLinkAttributes(config);\r\n this.eGui.appendChild(this.eLink);\r\n } else {\r\n this.eGui.textContent = config ? String(config) : '';\r\n }\r\n }\r\n\r\n private updateLink(params: ICellRendererParams) {\r\n const field = params.colDef?.field as string | undefined;\r\n const config = (params.value ?? params.data?.[field]) as any;\r\n\r\n if (this.hasRequiredKeys(config)) {\r\n this.setLinkAttributes(config);\r\n } else {\r\n this.eGui.textContent = config ? String(config) : '';\r\n }\r\n }\r\n\r\n private setLinkAttributes(config: LinkInterface) {\r\n this.eLink.setAttribute('disabled', config.disabled?.toString());\r\n this.eLink.setAttribute('variant', config.variant);\r\n this.eLink.setAttribute('size', config.size);\r\n this.eLink.setAttribute('target', config.target);\r\n this.eLink.setAttribute('href', config.href);\r\n if (config.download) this.eLink.setAttribute('download', config.download);\r\n this.eLink.textContent = config.text || '';\r\n }\r\n\r\n private hasRequiredKeys(config: LinkInterface): boolean {\r\n return !!(\r\n config &&\r\n config.text &&\r\n config.variant &&\r\n config.size\r\n );\r\n }\r\n}\r\n","// 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","import { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\r\n\r\nexport class CustomNoRowsOverlay implements ICellRendererComp {\r\n eGui!: HTMLElement;\r\n\r\n init(params: ICellRendererParams & { noRowsMessageFunc: () => string }) {\r\n this.eGui = document.createElement('div');\r\n this.eGui.innerHTML = `\r\n <div role=\"presentation\" class=\"ag-overlay-loading-center\" >\r\n ${params.noRowsMessageFunc()}\r\n </div>\r\n `;\r\n }\r\n\r\n getGui() {\r\n return this.eGui;\r\n }\r\n\r\n refresh(_params: ICellRendererParams): boolean {\r\n return false;\r\n }\r\n}","import { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\r\n\r\nexport class CustomLoadingOverlay implements ICellRendererComp {\r\n eGui!: HTMLElement;\r\n\r\n init(_params: ICellRendererParams & { loadingMessage: string }) {\r\n this.eGui = document.createElement('div');\r\n this.eGui.innerHTML = `<div class=\"ag-overlay-loading-center\" role=\"presentation\">\r\n<ifx-spinner></ifx-spinner>\r\n </div>`;\r\n }\r\n\r\n getGui() {\r\n return this.eGui;\r\n }\r\n\r\n refresh(_params: ICellRendererParams): boolean {\r\n return false;\r\n }\r\n}","@use '~@infineon/design-system-tokens/dist/tokens';\r\n@use '../../global/font.scss';\r\n\r\n@import '~ag-grid-community/styles/ag-grid.css';\r\n\r\n.zebra {\r\n & .ag-row-odd {\r\n background-color: tokens.$ifxColorEngineering100 !important;\r\n }\r\n\r\n & .ag-row {\r\n border-bottom: none !important;\r\n }\r\n}\r\n\r\n.ag-header-viewport {\r\n background-color: tokens.$ifxColorEngineering200 !important;\r\n}\r\n\r\n.table-container {\r\n display: block;\r\n}\r\n\r\n.sidebar-btn {\r\n margin-bottom: 24px;\r\n}\r\n\r\n.sidebar-container {\r\n margin-right: 24px;\r\n}\r\n\r\n.sidebar-layout {\r\n display: flex;\r\n flex-direction: row;\r\n}\r\n\r\n.topbar-layout {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n.table-pagination-wrapper {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: stretch;\r\n width: 100%;\r\n\r\n & .pagination-wrapper {\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-end;\r\n }\r\n}\r\n\r\n#table-wrapper {\r\n flex: 1;\r\n padding-bottom: tokens.$ifxSpace100;\r\n overflow-x: auto;\r\n width: 100%;\r\n}\r\n\r\n.table-wrapper {\r\n overflow-x: auto;\r\n width: 100%;\r\n}\r\n\r\n.ag-horizontal-left-spacer {\r\n display: none;\r\n}\r\n\r\n.table-wrapper .ag-root-wrapper-body {\r\n height: auto !important;\r\n min-height: 100px !important;\r\n min-width: 100px;\r\n}\r\n\r\n.filter-chips {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: tokens.$ifxSpace100;\r\n margin-bottom: 12px;\r\n}\r\n\r\n.filter-chips > ifx-button {\r\n margin-left: -8px;\r\n}\r\n\r\n.set-filter-wrapper-sidebar {\r\n display: flex;\r\n flex-direction: column;\r\n margin-bottom: tokens.$ifxSpace100;\r\n}\r\n\r\n.set-filter-wrapper-topbar {\r\n display: flex;\r\n flex-wrap: wrap;\r\n flex-direction: row;\r\n margin-bottom: tokens.$ifxSpace100;\r\n background: tokens.$ifxColorEngineering100;\r\n padding-top: 32px;\r\n padding-bottom: 32px;\r\n gap: 24px;\r\n}\r\n\r\n.headline-wrapper {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 15px 0px;\r\n}\r\n\r\n.inner-buttons-wrapper {\r\n flex: 1;\r\n display: flex;\r\n justify-content: flex-end;\r\n align-items: center;\r\n gap: 5px;\r\n}\r\n\r\n.ifx-ag-grid {\r\n display: grid;\r\n height: 100%;\r\n width: 100%;\r\n min-width: 100px;\r\n overflow-x: auto;\r\n}\r\n\r\n.ifx-ag-grid .ag-header-cell::after {\r\n outline: none !important;\r\n border: none !important;\r\n box-shadow: none !important;\r\n}\r\n\r\n.ifx-ag-grid .ag-header-cell:focus {\r\n outline: none !important;\r\n}\r\n\r\n.ifx-ag-grid *:not(.ag-header-cell):focus {\r\n outline: none;\r\n}\r\n\r\n.ifx-ag-grid .ag-header-cell:not(:last-child)::before {\r\n content: '';\r\n position: absolute;\r\n right: 0;\r\n top: calc(50% - 12px);\r\n height: 24px;\r\n width: 1px;\r\n background-color: tokens.$ifxColorEngineering300;\r\n}\r\n\r\n.ag-pinned-left-header {\r\n background-color: tokens.$ifxColorEngineering200;\r\n min-width: 50px !important;\r\n max-width: 50px !important;\r\n width: 50px !important;\r\n &::before {\r\n content: '';\r\n position: absolute;\r\n right: 0;\r\n top: calc(50% - 12px);\r\n height: 24px;\r\n width: 1px;\r\n background-color: tokens.$ifxColorEngineering300;\r\n }\r\n}\r\n\r\n.ag-header-row {\r\n width: 50px !important;\r\n}\r\n\r\n.ag-pinned-left-cols-container {\r\n width: 50px !important;\r\n max-width: 50px !important;\r\n min-width: 50px !important;\r\n}\r\n\r\n.ag-overlay-loading-center {\r\n border: none;\r\n background: none;\r\n border-radius: none;\r\n box-shadow: none;\r\n}\r\n\r\n.ag-root-wrapper {\r\n border: 1px solid tokens.$ifxColorEngineering200;\r\n}\r\n\r\n.ag-header {\r\n background-color: tokens.$ifxColorEngineering100;\r\n border-bottom: none;\r\n\r\n &.ag-header-active {\r\n outline: none !important;\r\n border-color: #0a8276 !important;\r\n }\r\n}\r\n\r\n.ag-header-cell {\r\n padding-left: 16px;\r\n padding-right: 16px;\r\n gap: 4px;\r\n}\r\n\r\n.ag-header-cell-focus {\r\n border: none !important;\r\n outline: none !important;\r\n}\r\n\r\n.ag-header-cell-text {\r\n font-size: 13px;\r\n font-style: normal;\r\n font-weight: 600;\r\n line-height: 20px;\r\n color: tokens.$ifxColorBaseBlack;\r\n font-family: var(--ifx-font-family);\r\n}\r\n\r\n.ag-row-focus {\r\n background-color: inherit !important;\r\n}\r\n\r\n.ag-row-hover {\r\n background-color: tokens.$ifxColorBaseWhite !important;\r\n}\r\n\r\n.ag-cell-focus {\r\n border: none !important;\r\n outline: none !important;\r\n background-color: inherit !important;\r\n}\r\n\r\n.ag-row {\r\n background-color: tokens.$ifxColorBaseWhite;\r\n border-bottom: 1px solid tokens.$ifxColorEngineering200;\r\n font-size: 13px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n z-index: 1;\r\n}\r\n\r\n.ag-row-odd {\r\n background-color: tokens.$ifxColorBaseWhite;\r\n}\r\n\r\n.ag-cell {\r\n display: flex;\r\n padding-left: 16px;\r\n padding-right: 16px;\r\n white-space: pre-line;\r\n min-height: 40px;\r\n height: auto;\r\n}\r\n\r\n.ag-ltr .ag-sort-indicator-icon {\r\n padding-left: 0px;\r\n vertical-align: bottom;\r\n line-height: 12px;\r\n}\r\n\r\n.ag-sort-indicator-container .ag-sort-order {\r\n display: none;\r\n}\r\n\r\n.unsort-icon-custom-color {\r\n color: tokens.$ifxColorEngineering400;\r\n}\r\n\r\n.filters-title {\r\n font-size: 24px;\r\n font-weight: 600;\r\n}\r\n\r\n.matching-results-container {\r\n flex: 1;\r\n font-family: 'Source Sans 3';\r\n display: flex;\r\n gap: 4px;\r\n font-size: 24px;\r\n font-weight: 600;\r\n line-height: 32px;\r\n letter-spacing: -1px;\r\n padding-right: 56px;\r\n}\r\n\r\n.matching-results-count {\r\n font-weight: 600;\r\n}\r\n\r\n.matching-results-text {\r\n font-weight: 400;\r\n}\r\n\r\n.ag-body-horizontal-scroll {\r\n display: none;\r\n}\r\n\r\n@media (max-width: tokens.$ifxBreakpointM) {\r\n .table-wrapper,\r\n #table-wrapper {\r\n overflow-x: auto;\r\n -webkit-overflow-scrolling: touch;\r\n }\r\n\r\n .ag-root-wrapper {\r\n min-width: 100%;\r\n }\r\n\r\n .ag-body-horizontal-scroll {\r\n display: block;\r\n }\r\n\r\n .ag-header-cell,\r\n .ag-cell {\r\n min-width: 100px;\r\n white-space: nowrap;\r\n }\r\n\r\n .sidebar-layout {\r\n flex-direction: column;\r\n }\r\n\r\n .sidebar-container {\r\n margin-right: 0;\r\n margin-bottom: 24px;\r\n }\r\n\r\n .set-filter-wrapper-topbar {\r\n padding-left: 16px;\r\n padding-right: 16px;\r\n }\r\n\r\n .table-pagination-wrapper {\r\n gap: tokens.$ifxSpace200;\r\n }\r\n}\r\n","import { Component, h, Host, Method, Element, Prop, State, Listen, Watch } from '@stencil/core';\r\nimport classNames from 'classnames';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\nimport { CellPosition, createGrid, FirstDataRenderedEvent, GridApi, GridOptions } from 'ag-grid-community';\r\nimport { ButtonCellRenderer } from './buttonCellRenderer';\r\nimport { CheckboxCellRenderer } from './checkboxCellRenderer';\r\nimport { CheckboxHeaderRenderer } from './checkboxHeaderRenderer';\r\nimport { IconButtonCellRenderer } from './iconButtonCellRenderer';\r\nimport { LinkCellRenderer } from './linkCellRenderer';\r\nimport { StatusCellRenderer } from './statusCellRenderer';\r\nimport { CustomNoRowsOverlay } from './customNoRowsOverlay';\r\nimport { CustomLoadingOverlay } from './customLoadingOverlay';\r\n\r\n@Component({\r\n tag: 'ifx-table',\r\n styleUrl: 'table.scss',\r\n shadow: true,\r\n})\r\nexport class Table {\r\n gridOptions: GridOptions;\r\n gridApi: GridApi;\r\n @State() currentPage: number = 1;\r\n @Prop() cols: any;\r\n @Prop() rows: any;\r\n @Prop() buttonRendererOptions?: { onButtonClick?: (params: any, event: Event) => void };\r\n @Prop() iconButtonRendererOptions?: { onIconButtonClick?: (params: any, event: Event) => void };\r\n @Prop() checkboxRendererOptions?: { onCheckboxClick?: (params: any, event: Event) => void };\r\n @State() rowData: any[] = [];\r\n @State() colData: any[] = [];\r\n @State() filterOptions: { [key: string]: string[] } = {};\r\n @State() currentFilters = {};\r\n @State() uniqueKey: string;\r\n allRowData: any[] = [];\r\n @Prop() rowHeight: string = 'default';\r\n @Prop() tableHeight: string = 'auto';\r\n @Prop() pagination: boolean = true;\r\n @Prop() paginationItemsPerPage: string;\r\n @State() paginationPageSize: number = 10;\r\n @Prop() filterOrientation: string = 'sidebar';\r\n @Prop() headline: string = '';\r\n @State() showSidebarFilters: boolean = true;\r\n @State() matchingResultsCount: number = 0;\r\n @Prop() variant: string = 'default';\r\n @Prop() serverSidePagination: boolean = false;\r\n @Prop() serverPageChangeHandler?: (params: { page: number; pageSize: number }) => Promise<{ rows: any[]; total: number }>;\r\n @Prop() enableSelection: boolean = false;\r\n @State() selectedRows: Set<string> = new Set();\r\n @State() selectAll: boolean = false;\r\n @Prop() showLoading: boolean = false;\r\n private container: HTMLDivElement;\r\n @Element() host: HTMLElement;\r\n originalRowData: any[] = [];\r\n\r\n private internalItemsPerPage = JSON.stringify([\r\n { value: 10, label: '10', selected: true },\r\n { value: 20, label: '20', selected: false },\r\n { value: 30, label: '30', selected: false },\r\n ]);\r\n\r\n @Watch('rows')\r\n rowsChanged(_newVal: any) {\r\n const parsed = this.parseArrayInput<any>(this.rows);\r\n\r\n parsed.forEach((row, index) => {\r\n if (!row.__rowId) {\r\n row.__rowId = `row_${index}_${Date.now()}_${Math.random()}`;\r\n }\r\n });\r\n\r\n if (this.enableSelection) {\r\n parsed.forEach(row => {\r\n row.__checkbox = {\r\n disabled: false,\r\n checked: this.selectedRows?.has(row.__rowId) || false,\r\n size: 's',\r\n indeterminate: false,\r\n error: false,\r\n };\r\n });\r\n }\r\n this.currentFilters = {};\r\n this.currentPage = 1;\r\n this.originalRowData = [...parsed];\r\n this.allRowData = [...parsed];\r\n this.matchingResultsCount = this.allRowData.length;\r\n this.updateTableView();\r\n this.updateFilterOptions();\r\n }\r\n\r\n @Watch('cols')\r\n colsChanged(_newVal: any) {\r\n this.colData = this.getColData();\r\n\r\n if (this.gridApi) {\r\n this.gridApi.setGridOption('columnDefs', this.colData);\r\n this.gridApi.sizeColumnsToFit({\r\n defaultMinWidth: 100,\r\n });\r\n }\r\n\r\n this.updateFilterOptions();\r\n }\r\n\r\n @Listen('ifxItemsPerPageChange')\r\n handleResultsPerPageChange(e: CustomEvent<string>) {\r\n this.paginationPageSize = Number(e.detail);\r\n this.currentPage = 1;\r\n this.updateTableView();\r\n }\r\n\r\n @Listen('ifxChange')\r\n handleChipChange(event: CustomEvent<{ previousSelection: Array<any>; currentSelection: Array<any>; name: string }>) {\r\n const { name, currentSelection, previousSelection } = event.detail;\r\n if (currentSelection && previousSelection) {\r\n // Clone the current filters state\r\n const updatedFilters = { ...this.currentFilters };\r\n\r\n if (currentSelection.length === 0) {\r\n // If there are no selections for this filter, delete the filter\r\n delete updatedFilters[name];\r\n\r\n // Emit event with specific filter name\r\n const customEvent = new CustomEvent('ifxUpdateSidebarFilter', { detail: { filterName: name }, bubbles: true, composed: true });\r\n this.host.dispatchEvent(customEvent);\r\n } else {\r\n // Otherwise, update the filter values with the current selection\r\n updatedFilters[name].filterValues = currentSelection.map(selection => selection.value);\r\n }\r\n\r\n // Update the component's filters\r\n this.currentFilters = updatedFilters;\r\n // Ensure table data is updated\r\n this.allRowData = this.applyAllFilters(this.originalRowData, this.currentFilters);\r\n this.updateTableView();\r\n }\r\n }\r\n\r\n @Watch('buttonRendererOptions')\r\n onButtonRendererOptionsChanged() {\r\n this.colData = this.getColData();\r\n if (this.gridApi) {\r\n this.gridApi.setColumnDefs(this.colData);\r\n }\r\n }\r\n\r\n @Watch('iconButtonRendererOptions')\r\n onIconButtonRendererOptionsChanged() {\r\n this.colData = this.getColData();\r\n if (this.gridApi) {\r\n this.gridApi.setColumnDefs(this.colData);\r\n }\r\n }\r\n\r\n @Watch('checkboxRendererOptions')\r\n onCheckboxRendererOptionsChanged() {\r\n this.colData = this.getColData();\r\n if (this.gridApi) {\r\n this.gridApi.setColumnDefs(this.colData);\r\n }\r\n }\r\n\r\n private parseArrayInput<T>(input: any): T[] {\r\n if (typeof input === 'string') {\r\n try {\r\n const parsed = JSON.parse(input);\r\n return Array.isArray(parsed) ? parsed : [];\r\n } catch {\r\n console.error('Failed to parse input:', input);\r\n return [];\r\n }\r\n }\r\n if (Array.isArray(input)) return input;\r\n if (typeof input === 'object' && input !== null) return [input as T];\r\n return [];\r\n }\r\n\r\n toggleSidebarFilters() {\r\n this.showSidebarFilters = !this.showSidebarFilters;\r\n }\r\n\r\n updateFilterOptions() {\r\n const options = {};\r\n for (let col of this.colData) {\r\n options[col.field] = [...new Set(this.rowData.map(row => row[col.field]))];\r\n }\r\n this.filterOptions = options;\r\n }\r\n\r\n private updateHeaderCheckboxState() {\r\n if (this.gridApi && this.enableSelection) {\r\n setTimeout(() => {\r\n const headerCheckbox = this.container?.querySelector('.ag-header-cell[col-id=\"__checkbox\"] ifx-checkbox') as any;\r\n if (headerCheckbox) {\r\n const allSelected = this.selectedRows.size === this.allRowData.length && this.allRowData.length > 0;\r\n const someSelected = this.selectedRows.size > 0 && this.selectedRows.size < this.allRowData.length;\r\n headerCheckbox.checked = allSelected;\r\n headerCheckbox.indeterminate = someSelected;\r\n }\r\n }, 0);\r\n }\r\n }\r\n\r\n handleSidebarFilterChange(event: CustomEvent) {\r\n const filterGroups = event.detail;\r\n const updatedFilters = {};\r\n\r\n filterGroups.forEach(filterGroup => {\r\n const filterName = filterGroup.filterGroupName;\r\n let filterValues;\r\n let type;\r\n\r\n if (filterGroup.selectedItems && filterGroup.selectedItems.length > 0) {\r\n filterValues = filterGroup.selectedItems.map(item => item.label);\r\n type = 'multi-select';\r\n } else if (filterGroup.value) {\r\n filterValues = [filterGroup.value];\r\n type = 'text';\r\n } else {\r\n filterValues = [];\r\n }\r\n\r\n if (!(filterValues.length === 0 || (filterValues.length === 1 && type === 'text' && filterValues[0] === ''))) {\r\n updatedFilters[filterName] = { filterValues, type };\r\n }\r\n });\r\n\r\n this.allRowData = this.applyAllFilters(this.originalRowData, updatedFilters);\r\n this.updateTableView();\r\n this.currentFilters = updatedFilters;\r\n }\r\n\r\n handleTopbarFilterChange(event: CustomEvent) {\r\n const filters = event.detail;\r\n\r\n // Start by resetting the filter conditions to a blank object\r\n this.currentFilters = {};\r\n\r\n // Loop through each filter group provided in the event detail\r\n filters.forEach(filter => {\r\n const filterName = filter.filterName;\r\n let filterValues;\r\n\r\n let type = filter.type;\r\n\r\n if (type === 'text') {\r\n // Search/Text filter\r\n filterValues = filter.filterValues;\r\n } else {\r\n // Multi-select/Single-Select\r\n filterValues = filter.filterValues.map(item => item.label);\r\n }\r\n\r\n // If there are no filter values, or the filter is a text filter with an empty value, remove the filter\r\n if (!(filterValues.length === 0 || (filterValues.length === 1 && type === 'text' && filterValues[0] === ''))) {\r\n // Add or update the filter in the currentFilters object\r\n this.currentFilters[filterName] = { filterValues, type };\r\n }\r\n });\r\n\r\n // Now that the currentFilters object has been updated, apply all filters to the data\r\n this.allRowData = this.applyAllFilters(this.originalRowData, this.currentFilters);\r\n\r\n // After filtering, update the table view with the new filtered data\r\n this.updateTableView();\r\n }\r\n\r\n applyAllFilters(data, filters) {\r\n return data.filter(row => {\r\n for (const filterName in filters) {\r\n const filterInfo = filters[filterName];\r\n let selectedValues = (filterInfo.filterValues || []).map(value => {\r\n if (typeof value === 'string') {\r\n return value.toLowerCase();\r\n } else if (typeof value === 'number' || typeof value === 'boolean') {\r\n return value.toString();\r\n }\r\n return '';\r\n });\r\n\r\n // For text filters, check if row values start with any of the selectedValues\r\n if (filterInfo.type === 'text') {\r\n let textFilterMatched = false;\r\n for (let property in row) {\r\n if (row.hasOwnProperty(property)) {\r\n let rowValue = row[property] != null ? String(row[property]).toLowerCase() : '';\r\n if (selectedValues.some(filterValue => rowValue.startsWith(filterValue))) {\r\n textFilterMatched = true;\r\n break;\r\n }\r\n }\r\n }\r\n if (!textFilterMatched) return false;\r\n }\r\n // For multi-select filters, this remains unchanged\r\n else if (filterInfo.type === 'multi-select') {\r\n let rowValue = row[filterName] != null ? String(row[filterName]).toLowerCase() : '';\r\n // Check if 'undefined' is a selected value and include rows with empty values in that case\r\n let includesUndefined = selectedValues.includes('undefined');\r\n if (!selectedValues.includes(rowValue) && !(includesUndefined && rowValue === '')) {\r\n return false;\r\n }\r\n }\r\n }\r\n return true;\r\n });\r\n }\r\n\r\n async updateTableView() {\r\n if (this.serverSidePagination && this.serverPageChangeHandler) {\r\n const { rows, total } = await this.serverPageChangeHandler({\r\n page: this.currentPage,\r\n pageSize: this.paginationPageSize,\r\n });\r\n\r\n if (this.enableSelection) {\r\n rows.forEach((row, index) => {\r\n if (!row.__rowId) {\r\n row.__rowId = `row_${(this.currentPage - 1) * this.paginationPageSize + index}_${Date.now()}`;\r\n }\r\n row.__checkbox = {\r\n disabled: false,\r\n checked: this.selectedRows?.has(row.__rowId) || false,\r\n size: 's',\r\n indeterminate: false,\r\n error: false,\r\n };\r\n });\r\n }\r\n\r\n this.rowData = rows;\r\n this.matchingResultsCount = total;\r\n if (this.gridApi) {\r\n this.gridApi.setGridOption('rowData', rows);\r\n }\r\n const paginationElement = this.host.shadowRoot.querySelector('ifx-pagination');\r\n if (paginationElement) {\r\n paginationElement.setAttribute('total', total.toString());\r\n }\r\n } else {\r\n const startIndex = (this.currentPage - 1) * this.paginationPageSize;\r\n const endIndex = startIndex + this.paginationPageSize;\r\n const visibleRowData = this.allRowData.slice(startIndex, endIndex);\r\n\r\n if (this.enableSelection) {\r\n visibleRowData.forEach(row => {\r\n if (!row.__checkbox) {\r\n row.__checkbox = {\r\n disabled: false,\r\n checked: this.selectedRows?.has(row.__rowId) || false,\r\n size: 's',\r\n indeterminate: false,\r\n error: false,\r\n };\r\n } else {\r\n row.__checkbox.checked = this.selectedRows?.has(row.__rowId) || false;\r\n }\r\n });\r\n }\r\n\r\n this.rowData = visibleRowData;\r\n this.matchingResultsCount = this.allRowData.length;\r\n if (this.gridApi) {\r\n this.gridApi.setGridOption('rowData', this.rowData);\r\n }\r\n }\r\n }\r\n\r\n clearAllFilters() {\r\n this.currentFilters = {};\r\n this.allRowData = [...this.originalRowData];\r\n }\r\n\r\n @Method()\r\n async onBtShowLoading() {\r\n this.gridApi.showLoadingOverlay();\r\n }\r\n\r\n setPaginationItemsPerPage() {\r\n const newItemsPerPage = this.paginationItemsPerPage;\r\n if (newItemsPerPage) {\r\n this.internalItemsPerPage = this.paginationItemsPerPage;\r\n const itemsPerPageArray = JSON.parse(this.internalItemsPerPage);\r\n\r\n const selectedOption = itemsPerPageArray.find(option => option.selected);\r\n if (selectedOption) {\r\n this.paginationPageSize = Number(selectedOption.value);\r\n } else if (itemsPerPageArray.length > 0) {\r\n this.paginationPageSize = Number(itemsPerPageArray[0].value);\r\n }\r\n }\r\n }\r\n\r\n componentWillLoad() {\r\n this.setPaginationItemsPerPage();\r\n\r\n this.uniqueKey = `unique-${Math.floor(Math.random() * 1000000)}`;\r\n this.rowData = this.getRowData();\r\n this.colData = this.getColData();\r\n this.updateFilterOptions();\r\n\r\n this.gridOptions = {\r\n suppressCellFocus: true,\r\n rowHeight: this.rowHeight === 'default' ? 40 : 32,\r\n headerHeight: 40,\r\n components: {\r\n checkboxCellRenderer: CheckboxCellRenderer,\r\n checkboxHeaderRenderer: CheckboxHeaderRenderer,\r\n customLoadingOverlay: CustomLoadingOverlay,\r\n customNoRowsOverlay: CustomNoRowsOverlay,\r\n },\r\n defaultColDef: {\r\n resizable: true,\r\n autoHeight: true,\r\n },\r\n suppressDragLeaveHidesColumns: true,\r\n enableCellTextSelection: true,\r\n onFirstDataRendered: this.onFirstDataRendered.bind(this),\r\n columnDefs: this.colData,\r\n rowData: this.rowData,\r\n loadingOverlayComponent: CustomLoadingOverlay,\r\n noRowsOverlayComponent: CustomNoRowsOverlay,\r\n noRowsOverlayComponentParams: {\r\n noRowsMessageFunc: () => 'No rows found', //at: ' + new Date().toLocaleTimeString(),\r\n },\r\n icons: {\r\n sortAscending: '<ifx-icon icon=\"arrow-triangle-up-16\"></ifx-icon>',\r\n sortDescending: '<ifx-icon icon=\"arrow-triangle-down-16\"></ifx-icon>',\r\n sortUnSort: '<a class=\"unsort-icon-custom-color\"><ifx-icon icon=\"arrow-triangle-vertikal-16\"></ifx-icon></a>',\r\n },\r\n rowDragManaged: this.colData.some(col => col.dndSource === true) ? true : false,\r\n animateRows: this.colData.some(col => col.dndSource === true) ? true : false,\r\n navigateToNextCell: params => {\r\n return this.focusCellIfContainingButton(params.api, params.nextCellPosition);\r\n },\r\n tabToNextCell: params => {\r\n // Returning null is deprecated so we return false if the result is null (browser handles tab behavior).\r\n return this.focusCellIfContainingButton(params.api, params.nextCellPosition) ?? false;\r\n },\r\n };\r\n }\r\n\r\n focusCellIfContainingButton<T>(api: GridApi<T>, cellPosition: CellPosition): CellPosition | null {\r\n if (!cellPosition) {\r\n return null;\r\n }\r\n\r\n if (cellPosition.column.getColDef().field === 'button') {\r\n const rowNode = api.getDisplayedRowAtIndex(cellPosition.rowIndex);\r\n\r\n if (!rowNode) {\r\n // Row not yet rendered due to virtualization.\r\n return null;\r\n }\r\n\r\n const cellRenderers = api.getCellRendererInstances({\r\n rowNodes: [rowNode],\r\n columns: [cellPosition.column],\r\n });\r\n\r\n if (cellRenderers.length > 0) {\r\n const renderedContent = (cellRenderers[0] as ButtonCellRenderer)?.getGui();\r\n\r\n if (renderedContent) {\r\n const button = renderedContent.querySelector('ifx-button');\r\n\r\n if (button) {\r\n setTimeout(() => {\r\n // Just calling button.focus() will not work because the focus of <ifx-button> will not be\r\n // forwared to its child <a>-element (containing the tabindex attribute) due to shadow root.\r\n // We must therefore grab the <a>-element manually first and then call focus() on it.\r\n const focusableChild = button.shadowRoot?.querySelector<HTMLElement>('a[tabindex]');\r\n focusableChild?.focus();\r\n }, 0);\r\n }\r\n }\r\n }\r\n }\r\n\r\n return cellPosition;\r\n }\r\n\r\n async componentDidLoad() {\r\n if (this.container) {\r\n if (!isNestedInIfxComponent(this.host)) {\r\n const framework = detectFramework();\r\n trackComponent('ifx-table', await framework);\r\n }\r\n this.gridApi = createGrid(this.container, this.gridOptions);\r\n if (this.gridApi) {\r\n this.gridApi.sizeColumnsToFit({\r\n defaultMinWidth: 100,\r\n });\r\n this.gridApi.setGridOption('columnDefs', this.colData);\r\n this.gridApi.setGridOption('rowData', this.rowData);\r\n\r\n if (this.pagination) {\r\n const paginationElement = this.host.shadowRoot.querySelector('ifx-pagination');\r\n if (paginationElement) {\r\n paginationElement.addEventListener('ifxPageChange', this.handlePageChange.bind(this));\r\n }\r\n }\r\n const sidebarFilterElements = this.host.querySelectorAll('ifx-filter-type-group');\r\n // Add an event listener to each SetFilter component\r\n sidebarFilterElements.forEach(sidebarFilterElement => {\r\n sidebarFilterElement.addEventListener('ifxSidebarFilterChange', this.handleSidebarFilterChange.bind(this));\r\n });\r\n const topbarFilterElements = this.host.querySelectorAll('ifx-filter-bar');\r\n // Add an event listener to each SetFilter component\r\n topbarFilterElements.forEach(topbarFilterElement => {\r\n topbarFilterElement.addEventListener('ifxTopbarFilterChange', this.handleTopbarFilterChange.bind(this));\r\n });\r\n }\r\n }\r\n this.updateTableView();\r\n }\r\n\r\n componentWillUnmount() {\r\n if (this.pagination) {\r\n const paginationElement = this.host.shadowRoot.querySelector('ifx-pagination');\r\n if (paginationElement) {\r\n paginationElement.removeEventListener('ifxPageChange', this.handlePageChange.bind(this));\r\n }\r\n }\r\n const sidebarFilters = this.host.shadowRoot.querySelectorAll('ifx-filter-type-group');\r\n // Remove the event listener from each SetFilter component\r\n sidebarFilters.forEach(sidebarFilter => {\r\n sidebarFilter.removeEventListener('ifxSidebarFilterChange', this.handleSidebarFilterChange.bind(this));\r\n });\r\n const topbarFilters = this.host.shadowRoot.querySelectorAll('ifx-filter-type-group');\r\n // Remove the event listener from each SetFilter component\r\n topbarFilters.forEach(topbarFilter => {\r\n topbarFilter.removeEventListener('ifxTopbarFilterChange', this.handleTopbarFilterChange.bind(this));\r\n });\r\n }\r\n\r\n async handlePageChange(event) {\r\n this.currentPage = event.detail.currentPage;\r\n\r\n if (this.serverSidePagination && this.serverPageChangeHandler) {\r\n const { rows, total } = await this.serverPageChangeHandler({\r\n page: this.currentPage,\r\n pageSize: this.paginationPageSize,\r\n });\r\n\r\n this.rowData = rows;\r\n this.matchingResultsCount = total;\r\n\r\n if (this.gridApi) {\r\n this.gridApi.setGridOption('rowData', this.rowData);\r\n }\r\n\r\n const paginationElement = this.host.shadowRoot.querySelector('ifx-pagination');\r\n if (paginationElement) {\r\n paginationElement.setAttribute('total', total.toString());\r\n }\r\n } else {\r\n const startIndex = (this.currentPage - 1) * this.paginationPageSize;\r\n const endIndex = startIndex + this.paginationPageSize;\r\n const visibleRowData = this.allRowData.slice(startIndex, endIndex);\r\n if (this.gridApi) {\r\n this.gridApi.setGridOption('rowData', visibleRowData);\r\n }\r\n }\r\n }\r\n\r\n isJSONParseable(str) {\r\n try {\r\n JSON.parse(str);\r\n return true;\r\n } catch (e) {\r\n return false;\r\n }\r\n }\r\n\r\n handleSelectAll = (checked: boolean) => {\r\n this.selectAll = checked;\r\n if (checked) {\r\n this.selectedRows = new Set(this.allRowData.map(row => row.__rowId));\r\n } else {\r\n this.selectedRows = new Set();\r\n }\r\n this.updateCheckboxStates();\r\n this.updateHeaderCheckboxState();\r\n this.emitSelectionChange();\r\n };\r\n\r\n getRowData() {\r\n let rows: any[] = [];\r\n if (this.rows === undefined || this.rows === null) {\r\n return rows;\r\n }\r\n if (this.isJSONParseable(this.rows)) {\r\n rows = [...JSON.parse(this.rows)];\r\n } else if (Array.isArray(this.rows) || typeof this.rows === 'object') {\r\n rows = [...this.rows];\r\n } else {\r\n console.error('Unexpected value for rows: ', this.rows);\r\n }\r\n\r\n rows.forEach((row, index) => {\r\n if (!row.__rowId) {\r\n row.__rowId = `row_${index}_${Date.now()}_${Math.random()}`;\r\n }\r\n });\r\n\r\n if (this.enableSelection) {\r\n rows.forEach(row => {\r\n row.__checkbox = {\r\n disabled: false,\r\n checked: this.selectedRows?.has(row.__rowId) || false,\r\n size: 's',\r\n indeterminate: false,\r\n error: false,\r\n };\r\n });\r\n }\r\n this.allRowData = rows;\r\n this.originalRowData = [...rows];\r\n this.matchingResultsCount = this.allRowData.length;\r\n return rows.slice(0, this.paginationPageSize);\r\n }\r\n\r\n handleRowCheckboxClick = (params: any) => {\r\n const clickedRowData = params.data;\r\n const rowId = clickedRowData.__rowId;\r\n\r\n const newSelectedRows = new Set(this.selectedRows);\r\n if (newSelectedRows.has(rowId)) {\r\n newSelectedRows.delete(rowId);\r\n } else {\r\n newSelectedRows.add(rowId);\r\n }\r\n this.selectedRows = newSelectedRows;\r\n this.selectAll = newSelectedRows.size === this.allRowData.length;\r\n this.updateCheckboxStates();\r\n this.updateHeaderCheckboxState();\r\n this.emitSelectionChange();\r\n };\r\n\r\n private updateCheckboxStates() {\r\n this.allRowData.forEach(row => {\r\n if (row.__checkbox) {\r\n row.__checkbox.checked = this.selectedRows.has(row.__rowId);\r\n }\r\n });\r\n if (this.gridApi) {\r\n this.gridApi.refreshCells({\r\n columns: ['__checkbox'],\r\n force: true,\r\n });\r\n }\r\n }\r\n\r\n private emitSelectionChange() {\r\n const selectedRowsData = Array.from(this.selectedRows)\r\n .map(rowId => {\r\n const row = this.allRowData.find(r => r.__rowId === rowId);\r\n if (!row) return null;\r\n const { __checkbox, __rowId, ...rowData } = row;\r\n return rowData;\r\n })\r\n .filter(row => row !== null);\r\n\r\n this.host.dispatchEvent(\r\n new CustomEvent('ifxSelectionChange', {\r\n detail: {\r\n selectedRows: selectedRowsData,\r\n selectedCount: selectedRowsData.length,\r\n isSelectAll: this.selectedRows.size === this.allRowData.length && this.allRowData.length > 0,\r\n },\r\n bubbles: true,\r\n }),\r\n );\r\n }\r\n\r\n getColData() {\r\n let cols: any[] = [];\r\n if (this.cols === undefined || this.cols === null) return cols;\r\n if (this.isJSONParseable(this.cols)) {\r\n cols = [...JSON.parse(this.cols)];\r\n } else if (Array.isArray(this.cols) || typeof this.cols === 'object') {\r\n cols = [...this.cols];\r\n } else {\r\n console.error('Unexpected value for cols: ', this.cols);\r\n }\r\n\r\n if (this.enableSelection) {\r\n const checkboxColumn = {\r\n headerName: '',\r\n field: '__checkbox',\r\n width: 50,\r\n pinned: 'left',\r\n cellRenderer: 'checkboxCellRenderer',\r\n cellRendererParams: {\r\n onCheckboxClick: this.handleRowCheckboxClick?.bind(this),\r\n },\r\n headerComponent: 'checkboxHeaderRenderer',\r\n headerComponentParams: {\r\n onSelectAll: this.handleSelectAll?.bind(this),\r\n },\r\n sortable: false,\r\n filter: false,\r\n resizable: false,\r\n valueFormatter: undefined,\r\n cellDataType: false,\r\n };\r\n cols.unshift(checkboxColumn);\r\n }\r\n\r\n cols.forEach(column => {\r\n const field = column.field?.toLowerCase() || '';\r\n // --- Button columns ---\r\n if (field.startsWith('button')) {\r\n column.cellRenderer = ButtonCellRenderer;\r\n column.valueFormatter = undefined;\r\n column.cellDataType = false;\r\n if (this.buttonRendererOptions?.onButtonClick) {\r\n column.cellRendererParams = {\r\n onButtonClick: this.buttonRendererOptions.onButtonClick,\r\n };\r\n }\r\n }\r\n // --- Checkbox columns ---\r\n else if (field.startsWith('checkbox')) {\r\n column.cellRenderer = CheckboxCellRenderer;\r\n column.valueFormatter = undefined;\r\n column.cellDataType = false;\r\n if (this.checkboxRendererOptions?.onCheckboxClick) {\r\n column.cellRendererParams = {\r\n onCheckboxClick: this.checkboxRendererOptions.onCheckboxClick,\r\n };\r\n }\r\n }\r\n // --- Icon Button columns ---\r\n else if (field.startsWith('iconbutton') || field === 'iconButton') {\r\n column.cellRenderer = IconButtonCellRenderer;\r\n column.valueFormatter = undefined;\r\n column.cellDataType = false;\r\n if (this.iconButtonRendererOptions?.onIconButtonClick) {\r\n column.cellRendererParams = {\r\n onIconButtonClick: this.iconButtonRendererOptions.onIconButtonClick,\r\n };\r\n }\r\n }\r\n // --- Status columns ---\r\n else if (field.startsWith('status')) {\r\n column.cellRenderer = StatusCellRenderer;\r\n column.valueFormatter = undefined;\r\n column.cellDataType = false;\r\n }\r\n // --- Link columns ---\r\n else if (field.startsWith('link')) {\r\n column.cellRenderer = LinkCellRenderer;\r\n column.valueFormatter = undefined;\r\n column.cellDataType = false;\r\n }\r\n });\r\n return cols;\r\n }\r\n\r\n onFirstDataRendered(params: FirstDataRenderedEvent) {\r\n params.api.sizeColumnsToFit();\r\n }\r\n\r\n handleResetButtonClick() {\r\n const resetEvent = new CustomEvent('ifxResetFiltersEvent', { bubbles: true, composed: true });\r\n window.dispatchEvent(resetEvent);\r\n\r\n this.clearAllFilters();\r\n this.updateTableView();\r\n }\r\n\r\n disconnectedCallback() {\r\n if (this.pagination) {\r\n const paginationElement = this.host.shadowRoot.querySelector('ifx-pagination');\r\n if (paginationElement) {\r\n paginationElement.removeEventListener('ifxPageChange', this.handlePageChange);\r\n }\r\n }\r\n\r\n const resetButton = this.host.shadowRoot.querySelector('#reset-filters-button');\r\n if (resetButton) {\r\n resetButton.removeEventListener('click', this.handleResetButtonClick.bind(this));\r\n }\r\n }\r\n\r\n getTableClassNames() {\r\n return classNames(this.tableHeight === 'auto' && 'table-wrapper ag-root-wrapper-body', 'table-wrapper');\r\n }\r\n\r\n render() {\r\n let style = {};\r\n if (this.tableHeight !== 'auto') {\r\n style = {\r\n height: this.tableHeight,\r\n };\r\n }\r\n\r\n const filterClass = this.filterOrientation === 'topbar' ? 'topbar-layout' : this.filterOrientation === 'none' ? '' : 'sidebar-layout';\r\n\r\n return (\r\n <Host>\r\n <div class=\"table-container\">\r\n {this.filterOrientation === 'sidebar' && (\r\n <div class=\"sidebar-btn\">\r\n <ifx-button\r\n type=\"button\"\r\n disabled={false}\r\n variant=\"secondary\"\r\n size=\"m\"\r\n target=\"_blank\"\r\n theme=\"default\"\r\n full-width=\"false\"\r\n onClick={() => this.toggleSidebarFilters()}\r\n >\r\n <ifx-icon icon=\"cross-16\"></ifx-icon>\r\n {this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'}\r\n </ifx-button>\r\n </div>\r\n )}\r\n\r\n <div class={filterClass}>\r\n {this.filterOrientation === 'sidebar' && this.showSidebarFilters && (\r\n <div class=\"sidebar-container\">\r\n <div class=\"filters-title-container\">\r\n <span class=\"filters-title\">Filters</span>\r\n </div>\r\n <div class=\"set-filter-wrapper-sidebar\">{(this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && <slot name=\"sidebar-filter\"></slot>}</div>\r\n </div>\r\n )}\r\n\r\n {this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (\r\n <div class=\"set-filter-wrapper-topbar\">{(this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && <slot name=\"topbar-filter\"></slot>}</div>\r\n )}\r\n\r\n <div class=\"table-pagination-wrapper\">\r\n {this.filterOrientation !== 'none' && this.filterOrientation !== 'topbar' && this.showSidebarFilters && (\r\n <div class=\"filter-chips\">\r\n {Object.keys(this.currentFilters).map(name => {\r\n const filter = this.currentFilters[name];\r\n const filterValues = filter.filterValues;\r\n const isMultiSelect = filter.type !== 'text';\r\n\r\n return filterValues.length > 0 ? (\r\n <ifx-chip placeholder={name} size=\"large\" variant={isMultiSelect ? 'multi' : 'single'} readOnly={true} value={filterValues} key={name}>\r\n {filterValues.map(filterValue => (\r\n <ifx-chip-item value={filterValue} selected={true} key={filterValue}>\r\n {filterValue}\r\n </ifx-chip-item>\r\n ))}\r\n </ifx-chip>\r\n ) : null;\r\n })}\r\n </div>\r\n )}\r\n\r\n <div class=\"headline-wrapper\">\r\n {this.filterOrientation !== 'none' && this.headline && (\r\n <div class=\"matching-results-container\">\r\n <span class=\"matching-results-count\">({this.matchingResultsCount})</span>\r\n <span class=\"matching-results-text\">{this.headline}</span>\r\n </div>\r\n )}\r\n\r\n <div class=\"inner-buttons-wrapper\">\r\n <slot name=\"inner-button\" />\r\n </div>\r\n </div>\r\n\r\n <div id=\"table-wrapper\" class={this.getTableClassNames()}>\r\n <div id={`ifxTable-${this.uniqueKey}`} class={`ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ''}`} style={style} ref={el => (this.container = el)}></div>\r\n </div>\r\n <div class=\"pagination-wrapper\">\r\n {this.pagination ? (\r\n <ifx-pagination\r\n total={this.serverSidePagination ? this.matchingResultsCount : this.allRowData.length}\r\n current-page={this.currentPage}\r\n items-per-page={this.internalItemsPerPage}\r\n ></ifx-pagination>\r\n ) : null}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n\r\n hasButtonCol(): boolean {\r\n return this.getColData().some(column => column.field === 'button');\r\n }\r\n\r\n onDragOver(event) {\r\n var dragSupported = event.dataTransfer.length;\r\n\r\n if (dragSupported) {\r\n event.dataTransfer.dropEffect = 'move';\r\n }\r\n\r\n event.preventDefault();\r\n }\r\n\r\n onDrop(event) {\r\n var jsonData = event.dataTransfer.getData('application/json');\r\n\r\n var eJsonRow = document.createElement('div');\r\n eJsonRow.classList.add('json-row');\r\n eJsonRow.innerText = jsonData;\r\n\r\n var eJsonDisplay = document.querySelector('#eJsonDisplay');\r\n\r\n eJsonDisplay.appendChild(eJsonRow);\r\n event.preventDefault();\r\n }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-d1be48d9.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,h as s}from"./p-PqnYwNKt.js";const e=":host{display:inline-block}.rotate{transition:transform 0.2s ease-in-out;transform:rotate(-180deg);margin-top:0em}.icon{margin-top:0em;transition:transform 0.2s ease-in-out}";const i=class{constructor(s){t(this,s);this.isOpen=false;this.theme="default";this.size="m";this.hideArrow=false}render(){return s("ifx-button",{key:"8f1566ffba39304744537dea9b0582d7fb5385c7",variant:this.variant,theme:this.theme,size:this.size,disabled:this.disabled,class:"dropdown-trigger-button"},s("slot",{key:"cfd9b40e6ce2f74efd15c4e1f6b7106b4dcf4dc9"}),!this.hideArrow&&s("ifx-icon",{key:"29a120aaf9d98f2638c980e74a7635450522334e",icon:"chevron-down-16",class:`icon${this.isOpen?" rotate":""}`}))}};i.style=e;export{i as ifx_dropdown_trigger_button};
2	+ //# sourceMappingURL=p-d1be48d9.entry.js.map

package/dist/infineon-design-system-stencil/p-d1be48d9.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["dropdownTriggerButtonCss","DropdownItem","constructor","hostRef","this","isOpen","theme","size","hideArrow","render","h","key","variant","disabled","class","icon"],"sources":["src/components/dropdown/dropdown-trigger-button/dropdown-trigger-button.scss?tag=ifx-dropdown-trigger-button&encapsulation=shadow","src/components/dropdown/dropdown-trigger-button/dropdown-trigger-button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n\r\n:host {\r\n display: inline-block;\r\n}\r\n\r\n.rotate {\r\n transition: transform 0.2s ease-in-out;\r\n transform: rotate(-180deg);\r\n margin-top: 0em;\r\n}\r\n\r\n.icon {\r\n margin-top: 0em;\r\n transition: transform 0.2s ease-in-out;\r\n}\r\n","// dropdown-trigger-button.tsx\r\nimport { Component, Prop, h } from \"@stencil/core\";\r\nimport { IOpenable } from '../IOpenable';\r\n\r\n@Component({\r\n tag: 'ifx-dropdown-trigger-button',\r\n styleUrl: 'dropdown-trigger-button.scss',\r\n shadow: true\r\n})\r\n\r\nexport class DropdownItem implements IOpenable {\r\n @Prop() isOpen: boolean = false;\r\n\r\n @Prop() theme: 'default' | 'danger' | 'inverse' = 'default';\r\n @Prop() variant: 'primary';\r\n @Prop() size: 's' | 'm' = 'm';\r\n @Prop() disabled: boolean;\r\n @Prop() hideArrow: boolean = false;\r\n\r\n render() {\r\n return (\r\n <ifx-button\r\n variant={this.variant}\r\n theme={this.theme}\r\n size={this.size}\r\n disabled={this.disabled}\r\n class=\"dropdown-trigger-button\"\r\n >\r\n <slot />\r\n {!this.hideArrow &&\r\n <ifx-icon icon=\"chevron-down-16\" class={`icon${this.isOpen ? ' rotate' : ''}`} />\r\n }\r\n </ifx-button>\r\n )\r\n }\r\n}"],"mappings":"2CAAA,MAAMA,EAA2B,gL,MCUpBC,EAAY,MANzB,WAAAC,CAAAC,G,UAOUC,KAAMC,OAAY,MAElBD,KAAKE,MAAqC,UAE1CF,KAAIG,KAAc,IAElBH,KAASI,UAAY,KAkB9B,CAhBC,MAAAC,GACE,OACEC,EAAA,cAAAC,IAAA,2CACEC,QAASR,KAAKQ,QACdN,MAAOF,KAAKE,MACZC,KAAMH,KAAKG,KACXM,SAAUT,KAAKS,SACfC,MAAM,2BAENJ,EAAQ,QAAAC,IAAA,8CACNP,KAAKI,WACLE,EAAU,YAAAC,IAAA,2CAAAI,KAAK,kBAAkBD,MAAO,OAAOV,KAAKC,OAAS,UAAY,O","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-da112045.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as s,h as i,a as o}from"./p-PqnYwNKt.js";import{d as t,t as r}from"./p-DcmcuUOA.js";import{i as a}from"./p-Bw2fh5LT.js";const e=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}.action-list{background:#FFFFFF;border-radius:0;border:1px solid #EEEDED;overflow:hidden;display:flex;flex-direction:column}';const c=class{constructor(i){s(this,i)}async componentDidLoad(){if(!a(this.el)){const s=t();r("ifx-action-list",await s)}}render(){return i("div",{key:"3b5dd123b84e88c458e22fd83e592735c006684b",class:"action-list",role:"list","aria-label":this.listAriaLabel},i("slot",{key:"ed92d35c40ad4b1330296414f61f565c4bf30468"}))}get el(){return o(this)}};c.style=e;export{c as ifx_action_list};
2	+ //# sourceMappingURL=p-da112045.entry.js.map

package/dist/infineon-design-system-stencil/p-da112045.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["actionListCss","ActionList","componentDidLoad","isNestedInIfxComponent","this","el","framework","detectFramework","trackComponent","render","h","key","class","role","listAriaLabel"],"sources":["src/components/action-list/action-list.scss?tag=ifx-action-list&encapsulation=shadow","src/components/action-list/action-list.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n.action-list {\r\n background: tokens.$ifxColorBaseWhite;\r\n border-radius: tokens.$ifxBorderRadiusNone;\r\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering200;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n}","import { Component, h, Prop, Element } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n tag: 'ifx-action-list',\r\n styleUrl: 'action-list.scss',\r\n shadow: true,\r\n})\r\nexport class ActionList {\r\n @Element() el: HTMLElement;\r\n\r\n /**\r\n * Aria label for accessibility support\r\n */\r\n @Prop() listAriaLabel?: string;\r\n\r\n async componentDidLoad() {\r\n if (!isNestedInIfxComponent(this.el)) {\r\n const framework = detectFramework();\r\n trackComponent('ifx-action-list', await framework);\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <div\r\n class=\"action-list\"\r\n role=\"list\"\r\n aria-label={this.listAriaLabel}\r\n >\r\n <slot></slot>\r\n </div>\r\n );\r\n }\r\n}"],"mappings":"iIAAA,MAAMA,EAAgB,4L,MCUTC,EAAU,M,yBAQrB,sBAAMC,GACJ,IAAKC,EAAuBC,KAAKC,IAAK,CACpC,MAAMC,EAAYC,IAClBC,EAAe,wBAAyBF,E,EAI5C,MAAAG,GACE,OACEC,EAAA,OAAAC,IAAA,2CACEC,MAAM,cACNC,KAAK,OAAM,aACCT,KAAKU,eAEjBJ,EAAa,QAAAC,IAAA,6C","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-4fba0543.entry.js → p-db796fec.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as s,c as i,h as e,a as t}from"./p-PqnYwNKt.js";import{d as n,t as o}from"./p-DcmcuUOA.js";import{i as r}from"./p-Bw2fh5LT.js";import{c as h}from"./p-DMLRPGid.js";import"./p-B85MJLTf.js";const a=':root {\n  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";\n}\n\n:host {\n  display: flex;\n}\n\n.search-field {\n  box-sizing: border-box;\n  background-color: #FFFFFF;\n  width: 100%;\n  font-family: var(--ifx-font-family);\n  position: relative;\n}\n.search-field .search-field__wrapper {\n  box-sizing: border-box;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  border: 1px solid #8d8786;\n  border-radius: 1px;\n  padding: 8px 16px;\n  gap: 12px;\n  flex: none;\n  order: 0;\n  align-self: stretch;\n  flex-grow: 0;\n  position: relative;\n  width: 100%;\n  outline: none;\n}\n.search-field .search-field__wrapper:focus-visible:not(.disabled) {\n  outline: 2px solid #0A8276;\n  outline-offset: 2px;\n}\n.search-field .search-field__wrapper.search-field__wrapper-s {\n  height: 36px;\n}\n.search-field .search-field__wrapper:hover:not(.focused, :focus) {\n  border: 1px solid #3c3a39;\n}\n.search-field .search-field__wrapper .delete-icon {\n  outline: 1px solid transparent;\n  right: 12px;\n  cursor: pointer;\n}\n.search-field .search-field__wrapper .delete-icon:focus-visible {\n  outline: 2px solid #0A8276;\n  outline-offset: 1px;\n}\n.search-field .search-field__wrapper input[type=text] {\n  font-style: normal;\n  font-weight: 400;\n  font-size: 16px;\n  color: #8d8786;\n  border: none;\n  width: 100%;\n  outline: none;\n  height: 16px;\n}\n.search-field .search-field__wrapper input[type=text]:focus {\n  outline: none;\n  color: #1d1d1d;\n}\n.search-field .search-field__wrapper input[type=text]:disabled {\n  background: #BFBBBB;\n  color: #FFFFFF;\n}\n.search-field .search-field__wrapper input[type=text]:disabled::placeholder {\n  color: #FFFFFF;\n}\n.search-field .search-field__wrapper.disabled {\n  background: #BFBBBB;\n  border: none;\n  color: #FFFFFF;\n}\n.search-field .search-field__wrapper.disabled:hover {\n  border: none;\n  outline: none;\n}\n.search-field .search-field__wrapper.disabled .delete-icon {\n  cursor: default;\n}\n.search-field .search-field__wrapper.disabled .delete-icon:focus-visible {\n  outline: 1px solid transparent;\n}\n.search-field .suggestions-dropdown {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  background: #FFFFFF;\n  margin-top: 4px;\n  border: 1px solid #EEEDED;\n  box-shadow: 0px 6px 9px 0px rgba(29, 29, 29, 0.1);\n  z-index: 1000;\n  max-height: 300px;\n  overflow-y: auto;\n  container-type: inline-size;\n}\n.search-field .suggestions-dropdown .suggestions-header {\n  font-family: Source Sans 3;\n  font-size: 0.8125rem;\n  font-weight: 600;\n  line-height: 1.25rem;\n  letter-spacing: 0.25em;\n  text-transform: uppercase;\n  color: #575352;\n  border-bottom: 1px solid #EEEDED;\n  padding: 12px 16px;\n}\n.search-field .suggestions-dropdown .suggestion-item {\n  padding: 12px 16px;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n}\n.search-field .suggestions-dropdown .suggestion-item:last-child {\n  border-bottom: none;\n}\n.search-field .suggestions-dropdown .suggestion-item:hover, .search-field .suggestions-dropdown .suggestion-item--selected {\n  background-color: #EEEDED;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-icon {\n  color: #575352;\n  flex-shrink: 0;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-icon--history {\n  color: #575352;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  min-width: 0;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text .suggestion-main-text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  flex-shrink: 1;\n  min-width: 0;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text .suggestion-scope {\n  color: #8D8786;\n  flex-shrink: 0;\n  white-space: nowrap;\n  margin-left: 2px;\n  font-weight: 600;\n  font-size: 0.75rem;\n}\n@container (max-width: 320px) {\n  .search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n  .search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text .suggestion-main-text {\n    width: 100%;\n    max-width: 100%;\n  }\n  .search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text .suggestion-scope {\n    margin-left: 0;\n    margin-top: 0;\n    width: 100%;\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    flex-shrink: 1;\n  }\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-count {\n  color: #8D8786;\n  margin-left: auto;\n  flex-shrink: 0;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-delete-icon {\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 0.2s ease, visibility 0.2s ease;\n  cursor: pointer;\n  margin-left: auto;\n  flex-shrink: 0;\n  color: #575352;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-delete-icon:hover {\n  color: #3C3A39;\n}\n.search-field .suggestions-dropdown .suggestion-item:hover .suggestion-delete-icon {\n  opacity: 1;\n  visibility: visible;\n}\n.search-field .search-field__wrapper.dropdown-open {\n  border-radius: 1px 1px 0 0;\n  border-color: #0A8276;\n}';const l=class{constructor(e){s(this,e);this.ifxInput=i(this,"ifxInput",7);this.ifxSuggestionRequested=i(this,"ifxSuggestionRequested",7);this.ifxSuggestionSelected=i(this,"ifxSuggestionSelected",7);this.ifxFocus=i(this,"ifxFocus",7);this.ifxBlur=i(this,"ifxBlur",7);this.value="";this.suggestions=[];this.showSuggestions=false;this.maxSuggestions=10;this.maxHistoryItems=5;this.enableHistory=true;this.historyKey="ifx-search-history";this.historyHeaderText="Recent Searches";this.ariaLabel="Search Field";this.deleteIconAriaLabel="Clear search";this.historyDeleteAriaLabel="Remove from history";this.dropdownAriaLabel="Search suggestions and history";this.suggestionAriaLabel="Search suggestion";this.historyItemAriaLabel="Search history item";this.showDropdown=false;this.filteredSuggestions=[];this.selectedSuggestionIndex=-1;this.searchHistory=[];this.showDeleteIcon=false;this.showDeleteIconInternalState=false;this.disabled=false;this.size="l";this.isFocused=false;this.placeholder="Search...";this.autocomplete="off";this.maxlength=null;this.focusEmitted=false;this.handleInput=()=>{const s=this.inputElement.value;this.value=s;this.ifxInput.emit(this.value);if(this.showSuggestions){this.showDropdown=true;this.selectedSuggestionIndex=-1;this.requestSuggestions(s)}};this.handleDelete=()=>{if(!this.disabled){this.inputElement.value="";this.value="";this.ifxInput.emit(this.value);this.hideDropdown()}};this.handleSearch=()=>{if(this.value.trim()&&this.enableHistory){if(this.filteredSuggestions.length>0){this.addToHistory(this.value)}}this.hideDropdown()};this.handleHistoryDelete=(s,i)=>{s.stopPropagation();this.removeFromHistory(i)}}handleOutsideClick(s){const i=s.composedPath();if(!i.includes(this.inputElement)&&!i.includes(this.dropdownElement)){this.hideDropdown()}}handleKeyDown(s){if(!this.showDropdown)return;switch(s.key){case"ArrowDown":s.preventDefault();this.navigateSuggestions(1);break;case"ArrowUp":s.preventDefault();this.navigateSuggestions(-1);break;case"Enter":s.preventDefault();if(this.selectedSuggestionIndex>=0){this.selectSuggestion(this.filteredSuggestions[this.selectedSuggestionIndex])}else{this.handleSearch()}break;case"Escape":this.hideDropdown();break}}valueWatcher(s){if(this.inputElement&&s!==this.inputElement.value){this.inputElement.value=s}this.updateSuggestions()}suggestionsWatcher(){this.updateSuggestions()}focusInput(){if(!this.focusEmitted){this.focusEmitted=true;this.isFocused=true;this.ifxFocus.emit()}if(this.showSuggestions){if(this.value.length===0){this.showHistoryDropdown();this.showDropdown=this.enableHistory&&this.searchHistory.length>0}else{this.updateSuggestions();this.showDropdown=this.filteredSuggestions.length>0}}}blurInput(){setTimeout((()=>{this.isFocused=false;this.focusEmitted=false;this.ifxBlur.emit()}),150)}loadSearchHistory(){if(this.enableHistory&&typeof localStorage!=="undefined"){const s=localStorage.getItem(this.historyKey);this.searchHistory=s?JSON.parse(s):[];this.updateSuggestions();if(this.value.length===0&&this.searchHistory.length===0){this.showDropdown=false}}}clearSearchHistory(){if(this.enableHistory&&typeof localStorage!=="undefined"){localStorage.removeItem(this.historyKey);this.searchHistory=[];this.filteredSuggestions=[];this.selectedSuggestionIndex=-1;this.showDropdown=false;this.updateSuggestions()}}addToHistory(s){if(!this.enableHistory||!s.trim())return;const i=[...this.searchHistory];const e=i.indexOf(s);if(e>-1){i.splice(e,1)}i.unshift(s);this.searchHistory=i.slice(0,this.maxHistoryItems);if(typeof localStorage!=="undefined"){localStorage.setItem(this.historyKey,JSON.stringify(this.searchHistory))}}removeFromHistory(s){if(!this.enableHistory)return;const i=[...this.searchHistory];const e=i.indexOf(s);if(e>-1){i.splice(e,1);this.searchHistory=i;if(typeof localStorage!=="undefined"){localStorage.setItem(this.historyKey,JSON.stringify(this.searchHistory))}this.updateSuggestions();if(this.searchHistory.length===0&&this.value.length===0){this.showDropdown=false}}}requestSuggestions(s){this.ifxSuggestionRequested.emit(s);this.updateSuggestions()}updateSuggestions(){const s=this.value.toLowerCase();let i=[];if(s.length>0){if(this.suggestions&&this.suggestions.length>0){const e=this.suggestions.filter((i=>i.text.toLowerCase().includes(s)));i=[...i,...e]}if(this.enableHistory&&this.searchHistory.length>0){const e=this.searchHistory.filter((i=>i.toLowerCase().includes(s))).map(((s,i)=>({id:`history-${i}`,text:s,type:"history"})));i=[...i,...e]}i.sort(((i,e)=>{const t=i.text.toLowerCase();const n=e.text.toLowerCase();if(t===s&&n!==s)return-1;if(n===s&&t!==s)return 1;const o=t.startsWith(s);const r=n.startsWith(s);if(o&&!r)return-1;if(r&&!o)return 1;if(i.type==="suggestion"&&e.type==="history")return-1;if(i.type==="history"&&e.type==="suggestion")return 1;return t.localeCompare(n)}))}else{if(this.enableHistory&&this.searchHistory.length>0){const s=this.searchHistory.map(((s,i)=>({id:`history-${i}`,text:s,type:"history"})));i=s}}const e=i.reduce(((s,i)=>{const e=s.findIndex((s=>s.text.toLowerCase()===i.text.toLowerCase()&&s.scope===i.scope));if(e===-1){s.push(i)}else{if(i.type==="history"&&s[e].type!=="history"){s[e]=i}}return s}),[]);this.filteredSuggestions=e.slice(0,this.maxSuggestions);this.selectedSuggestionIndex=-1}navigateSuggestions(s){const i=this.filteredSuggestions.length-1;if(s>0){this.selectedSuggestionIndex=this.selectedSuggestionIndex<i?this.selectedSuggestionIndex+1:0}else{this.selectedSuggestionIndex=this.selectedSuggestionIndex>0?this.selectedSuggestionIndex-1:i}}selectSuggestion(s){this.value=s.text;this.inputElement.value=s.text;this.ifxSuggestionSelected.emit(s);this.ifxInput.emit(this.value);if(this.enableHistory){this.addToHistory(s.text)}this.hideDropdown()}hideDropdown(){this.showDropdown=false;this.selectedSuggestionIndex=-1;this.isFocused=false}showHistoryDropdown(){if(this.enableHistory&&this.searchHistory.length>0){const s=this.searchHistory.map(((s,i)=>({id:`history-${i}`,text:s,type:"history"})));this.filteredSuggestions=s.slice(0,this.maxSuggestions);this.selectedSuggestionIndex=-1}else{this.filteredSuggestions=[]}}isShowingOnlyHistory(){return this.value.length===0&&this.filteredSuggestions.length>0&&this.filteredSuggestions.every((s=>s.type==="history"))}renderHighlightedText(s,i){if(!i||i.length===0){return s}const t=s.toLowerCase();const n=i.toLowerCase();const o=t.indexOf(n);if(o===-1){return s}const r=s.substring(0,o);const h=s.substring(o,o+i.length);const a=s.substring(o+i.length);return[r,e("strong",null,h),a]}componentWillLoad(){this.loadSearchHistory()}async componentDidLoad(){if(!r(this.el)){const s=n();o("ifx-search-field",await s)}}componentWillUpdate(){if(this.value!==""){this.showDeleteIconInternalState=true}else this.showDeleteIconInternalState=false}render(){return e("div",{key:"d355ec7cdbe980ea99e4238cf02d907ddd76d59b","aria-disabled":this.disabled,"aria-value":this.value,class:"search-field"},e("div",{key:"2aa3d943caab35213ca10f071586c80358515f1c",class:this.getWrapperClassNames(),tabindex:1,onClick:()=>this.focusInput()},e("ifx-icon",{key:"eaa300dd0f8466a2396c55f3f2fffe9dcf5bbf44",icon:"search-16",class:"search-icon"}),e("input",{key:"cce86ee892ec624fe8671d7567434ae5433b8702",ref:s=>this.inputElement=s,type:"text",autocomplete:this.autocomplete,onInput:()=>this.handleInput(),onFocus:()=>this.focusInput(),onBlur:()=>this.blurInput(),placeholder:this.placeholder,disabled:this.disabled,maxlength:this.maxlength,value:this.value,role:"combobox","aria-controls":this.showDropdown?"suggestions-dropdown":undefined,"aria-expanded":this.showDropdown,"aria-autocomplete":"list","aria-haspopup":"listbox","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledBy,"aria-describedby":this.ariaDescribedBy,"aria-owns":this.showDropdown?"suggestions-dropdown":undefined,"aria-activedescendant":this.selectedSuggestionIndex>=0?`suggestion-${this.selectedSuggestionIndex}`:undefined}),this.showDeleteIcon&&this.showDeleteIconInternalState?e("ifx-icon",{icon:"cRemove16",class:"delete-icon",onClick:this.handleDelete,role:"button",tabindex:"0","aria-label":this.deleteIconAriaLabel,onKeyDown:s=>{if(s.key==="Enter"||s.key===" "){s.preventDefault();this.handleDelete()}}}):null),this.showDropdown&&this.filteredSuggestions.length>0&&e("div",{key:"d447e63087ac5b41d2109a16b8db37df4c9db860",ref:s=>this.dropdownElement=s,id:"suggestions-dropdown",class:"suggestions-dropdown",role:"listbox","aria-label":this.dropdownAriaLabel},this.isShowingOnlyHistory()&&e("div",{key:"6a4662d31fd8c755ec1ec9da4bb871750aa63a57",class:"suggestions-header"},this.historyHeaderText),this.filteredSuggestions.map(((s,i)=>e("div",{key:s.id,id:`suggestion-${i}`,class:this.getSuggestionClassNames(i),role:"option","aria-selected":i===this.selectedSuggestionIndex,"aria-label":`${s.type==="history"?this.historyItemAriaLabel:this.suggestionAriaLabel}: ${s.text}${s.scope?`, ${s.scope}`:""}${s.resultCount?`, ${s.resultCount} results`:""}`,onClick:()=>this.selectSuggestion(s),onMouseEnter:()=>this.selectedSuggestionIndex=i},e("div",{class:"suggestion-content"},s.type==="history"&&e("ifx-icon",{icon:"history-16",class:"suggestion-icon suggestion-icon--history"}),s.type==="suggestion"&&e("ifx-icon",{icon:"search-16",class:"suggestion-icon suggestion-icon--suggestion"}),e("span",{class:"suggestion-text"},e("span",{class:"suggestion-main-text"},this.renderHighlightedText(s.text,this.value)),s.scope&&e("span",{class:"suggestion-scope"},"– ",s.scope)),s.resultCount!==undefined&&s.scope&&e("span",{class:"suggestion-count"},s.resultCount),s.type==="history"&&e("ifx-icon",{icon:"cross16",class:"suggestion-delete-icon",role:"button",tabindex:"0","aria-label":`${this.historyDeleteAriaLabel}: ${s.text}`,onClick:i=>this.handleHistoryDelete(i,s.text),onKeyDown:i=>{if(i.key==="Enter"||i.key===" "){i.preventDefault();this.handleHistoryDelete(i,s.text)}}})))))))}getSizeClass(){return`${this.size}`==="s"?"search-field__wrapper-s":""}getWrapperClassNames(){return h(`search-field__wrapper`,`search-field__wrapper ${this.getSizeClass()}`,`${this.isFocused?"focused":""}`,`${this.showDropdown?"dropdown-open":""}`,`${this.disabled?"disabled":""}`)}getSuggestionClassNames(s){var i;return h("suggestion-item",{"suggestion-item--selected":s===this.selectedSuggestionIndex,"suggestion-item--history":((i=this.filteredSuggestions[s])===null||i===void 0?void 0:i.type)==="history"})}get el(){return t(this)}static get watchers(){return{value:["valueWatcher"],suggestions:["suggestionsWatcher"]}}};l.style=a;export{l as ifx_search_field};
-//# sourceMappingURL=p-4fba0543.entry.js.map
+import{r as s,c as i,h as e,a as t}from"./p-PqnYwNKt.js";import{d as n,t as o}from"./p-DcmcuUOA.js";import{i as r}from"./p-Bw2fh5LT.js";import{c as h}from"./p-DMLRPGid.js";import"./p-B85MJLTf.js";const a=':root {\n  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";\n}\n\n:host {\n  display: flex;\n}\n\n.search-field {\n  box-sizing: border-box;\n  background-color: #FFFFFF;\n  width: 100%;\n  font-family: var(--ifx-font-family);\n  position: relative;\n}\n.search-field .search-field__wrapper {\n  box-sizing: border-box;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  border: 1px solid #8d8786;\n  border-radius: 1px;\n  padding: 8px 16px;\n  gap: 12px;\n  flex: none;\n  order: 0;\n  align-self: stretch;\n  flex-grow: 0;\n  position: relative;\n  width: 100%;\n  outline: none;\n}\n.search-field .search-field__wrapper:focus-visible:not(.disabled) {\n  outline: 2px solid #0A8276;\n  outline-offset: 2px;\n}\n.search-field .search-field__wrapper.search-field__wrapper-s {\n  height: 36px;\n}\n.search-field .search-field__wrapper:hover:not(.focused, :focus) {\n  border: 1px solid #3c3a39;\n}\n.search-field .search-field__wrapper .delete-icon {\n  outline: 1px solid transparent;\n  right: 12px;\n  cursor: pointer;\n}\n.search-field .search-field__wrapper .delete-icon:focus-visible {\n  outline: 2px solid #0A8276;\n  outline-offset: 1px;\n}\n.search-field .search-field__wrapper input[type=text] {\n  font-style: normal;\n  font-weight: 400;\n  font-size: 16px;\n  color: #8d8786;\n  border: none;\n  width: 100%;\n  outline: none;\n  height: 16px;\n}\n.search-field .search-field__wrapper input[type=text]:focus {\n  outline: none;\n  color: #1d1d1d;\n}\n.search-field .search-field__wrapper input[type=text]:disabled {\n  background: #BFBBBB;\n  color: #FFFFFF;\n}\n.search-field .search-field__wrapper input[type=text]:disabled::placeholder {\n  color: #FFFFFF;\n}\n.search-field .search-field__wrapper.disabled {\n  background: #BFBBBB;\n  border: none;\n  color: #FFFFFF;\n}\n.search-field .search-field__wrapper.disabled:hover {\n  border: none;\n  outline: none;\n}\n.search-field .search-field__wrapper.disabled .delete-icon {\n  cursor: default;\n}\n.search-field .search-field__wrapper.disabled .delete-icon:focus-visible {\n  outline: 1px solid transparent;\n}\n.search-field .suggestions-dropdown {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  background: #FFFFFF;\n  margin-top: 4px;\n  border: 1px solid #EEEDED;\n  box-shadow: 0px 6px 9px 0px rgba(29, 29, 29, 0.1);\n  z-index: 1000;\n  max-height: 300px;\n  overflow-y: auto;\n  container-type: inline-size;\n}\n.search-field .suggestions-dropdown .suggestions-header {\n  font-family: Source Sans 3;\n  font-size: 0.8125rem;\n  font-weight: 600;\n  line-height: 1.25rem;\n  letter-spacing: 0.25em;\n  text-transform: uppercase;\n  color: #575352;\n  border-bottom: 1px solid #EEEDED;\n  padding: 12px 16px;\n}\n.search-field .suggestions-dropdown .suggestion-item {\n  padding: 12px 16px;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n}\n.search-field .suggestions-dropdown .suggestion-item:last-child {\n  border-bottom: none;\n}\n.search-field .suggestions-dropdown .suggestion-item:hover, .search-field .suggestions-dropdown .suggestion-item--selected {\n  background-color: #EEEDED;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-icon {\n  color: #575352;\n  flex-shrink: 0;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-icon--history {\n  color: #575352;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  min-width: 0;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text .suggestion-main-text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  flex-shrink: 1;\n  min-width: 0;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text .suggestion-scope {\n  color: #8D8786;\n  flex-shrink: 0;\n  white-space: nowrap;\n  margin-left: 2px;\n  font-weight: 600;\n  font-size: 0.75rem;\n}\n@container (max-width: 320px) {\n  .search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n  .search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text .suggestion-main-text {\n    width: 100%;\n    max-width: 100%;\n  }\n  .search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text .suggestion-scope {\n    margin-left: 0;\n    margin-top: 0;\n    width: 100%;\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    flex-shrink: 1;\n  }\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-count {\n  color: #8D8786;\n  margin-left: auto;\n  flex-shrink: 0;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-delete-icon {\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 0.2s ease, visibility 0.2s ease;\n  cursor: pointer;\n  margin-left: auto;\n  flex-shrink: 0;\n  color: #575352;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-delete-icon:hover {\n  color: #3C3A39;\n}\n.search-field .suggestions-dropdown .suggestion-item:hover .suggestion-delete-icon {\n  opacity: 1;\n  visibility: visible;\n}\n.search-field .search-field__wrapper.dropdown-open {\n  border-radius: 1px 1px 0 0;\n  border-color: #0A8276;\n}';const l=class{constructor(e){s(this,e);this.ifxInput=i(this,"ifxInput",7);this.ifxSuggestionRequested=i(this,"ifxSuggestionRequested",7);this.ifxSuggestionSelected=i(this,"ifxSuggestionSelected",7);this.ifxFocus=i(this,"ifxFocus",7);this.ifxBlur=i(this,"ifxBlur",7);this.value="";this.suggestions=[];this.showSuggestions=false;this.maxSuggestions=10;this.maxHistoryItems=5;this.enableHistory=true;this.historyKey="ifx-search-history";this.historyHeaderText="Recent Searches";this.ariaLabel="Search Field";this.deleteIconAriaLabel="Clear search";this.historyDeleteAriaLabel="Remove from history";this.dropdownAriaLabel="Search suggestions and history";this.suggestionAriaLabel="Search suggestion";this.historyItemAriaLabel="Search history item";this.showDropdown=false;this.filteredSuggestions=[];this.selectedSuggestionIndex=-1;this.searchHistory=[];this.showDeleteIcon=false;this.showDeleteIconInternalState=false;this.disabled=false;this.size="l";this.isFocused=false;this.placeholder="Search...";this.autocomplete="off";this.maxlength=null;this.focusEmitted=false;this.handleInput=()=>{const s=this.inputElement.value;this.value=s;this.ifxInput.emit(this.value);if(this.showSuggestions){this.showDropdown=true;this.selectedSuggestionIndex=-1;this.requestSuggestions(s)}};this.handleDelete=()=>{if(!this.disabled){this.inputElement.value="";this.value="";this.ifxInput.emit(this.value);this.hideDropdown()}};this.handleSearch=()=>{if(this.value.trim()&&this.enableHistory){if(this.filteredSuggestions.length>0){this.addToHistory(this.value)}}this.hideDropdown()};this.handleHistoryDelete=(s,i)=>{s.stopPropagation();this.removeFromHistory(i)}}handleOutsideClick(s){const i=s.composedPath();if(!i.includes(this.inputElement)&&!i.includes(this.dropdownElement)){this.hideDropdown()}}handleKeyDown(s){if(!this.showDropdown)return;switch(s.key){case"ArrowDown":s.preventDefault();this.navigateSuggestions(1);break;case"ArrowUp":s.preventDefault();this.navigateSuggestions(-1);break;case"Enter":s.preventDefault();if(this.selectedSuggestionIndex>=0){this.selectSuggestion(this.filteredSuggestions[this.selectedSuggestionIndex])}else{this.handleSearch()}break;case"Escape":this.hideDropdown();break}}valueWatcher(s){if(this.inputElement&&s!==this.inputElement.value){this.inputElement.value=s}this.updateSuggestions()}suggestionsWatcher(){this.updateSuggestions()}focusInput(){if(!this.focusEmitted){this.focusEmitted=true;this.isFocused=true;this.ifxFocus.emit()}if(this.showSuggestions){if(this.value.length===0){this.showHistoryDropdown();this.showDropdown=this.enableHistory&&this.searchHistory.length>0}else{this.updateSuggestions();this.showDropdown=this.filteredSuggestions.length>0}}}blurInput(){setTimeout((()=>{this.isFocused=false;this.focusEmitted=false;this.ifxBlur.emit()}),150)}loadSearchHistory(){if(this.enableHistory&&typeof localStorage!=="undefined"){const s=localStorage.getItem(this.historyKey);this.searchHistory=s?JSON.parse(s):[];this.updateSuggestions();if(this.value.length===0&&this.searchHistory.length===0){this.showDropdown=false}}}clearSearchHistory(){if(this.enableHistory&&typeof localStorage!=="undefined"){localStorage.removeItem(this.historyKey);this.searchHistory=[];this.filteredSuggestions=[];this.selectedSuggestionIndex=-1;this.showDropdown=false;this.updateSuggestions()}}addToHistory(s){if(!this.enableHistory||!s.trim())return;const i=[...this.searchHistory];const e=i.indexOf(s);if(e>-1){i.splice(e,1)}i.unshift(s);this.searchHistory=i.slice(0,this.maxHistoryItems);if(typeof localStorage!=="undefined"){localStorage.setItem(this.historyKey,JSON.stringify(this.searchHistory))}}removeFromHistory(s){if(!this.enableHistory)return;const i=[...this.searchHistory];const e=i.indexOf(s);if(e>-1){i.splice(e,1);this.searchHistory=i;if(typeof localStorage!=="undefined"){localStorage.setItem(this.historyKey,JSON.stringify(this.searchHistory))}this.updateSuggestions();if(this.searchHistory.length===0&&this.value.length===0){this.showDropdown=false}}}requestSuggestions(s){this.ifxSuggestionRequested.emit(s);this.updateSuggestions()}updateSuggestions(){const s=this.value.toLowerCase();let i=[];if(s.length>0){if(this.suggestions&&this.suggestions.length>0){const e=this.suggestions.filter((i=>i.text.toLowerCase().includes(s)));i=[...i,...e]}if(this.enableHistory&&this.searchHistory.length>0){const e=this.searchHistory.filter((i=>i.toLowerCase().includes(s))).map(((s,i)=>({id:`history-${i}`,text:s,type:"history"})));i=[...i,...e]}i.sort(((i,e)=>{const t=i.text.toLowerCase();const n=e.text.toLowerCase();if(t===s&&n!==s)return-1;if(n===s&&t!==s)return 1;const o=t.startsWith(s);const r=n.startsWith(s);if(o&&!r)return-1;if(r&&!o)return 1;if(i.type==="suggestion"&&e.type==="history")return-1;if(i.type==="history"&&e.type==="suggestion")return 1;return t.localeCompare(n)}))}else{if(this.enableHistory&&this.searchHistory.length>0){const s=this.searchHistory.map(((s,i)=>({id:`history-${i}`,text:s,type:"history"})));i=s}}const e=i.reduce(((s,i)=>{const e=s.findIndex((s=>s.text.toLowerCase()===i.text.toLowerCase()&&s.scope===i.scope));if(e===-1){s.push(i)}else{if(i.type==="history"&&s[e].type!=="history"){s[e]=i}}return s}),[]);this.filteredSuggestions=e.slice(0,this.maxSuggestions);this.selectedSuggestionIndex=-1}navigateSuggestions(s){const i=this.filteredSuggestions.length-1;if(s>0){this.selectedSuggestionIndex=this.selectedSuggestionIndex<i?this.selectedSuggestionIndex+1:0}else{this.selectedSuggestionIndex=this.selectedSuggestionIndex>0?this.selectedSuggestionIndex-1:i}}selectSuggestion(s){this.value=s.text;this.inputElement.value=s.text;this.ifxSuggestionSelected.emit(s);this.ifxInput.emit(this.value);if(this.enableHistory){this.addToHistory(s.text)}this.hideDropdown()}hideDropdown(){this.showDropdown=false;this.selectedSuggestionIndex=-1;this.isFocused=false}showHistoryDropdown(){if(this.enableHistory&&this.searchHistory.length>0){const s=this.searchHistory.map(((s,i)=>({id:`history-${i}`,text:s,type:"history"})));this.filteredSuggestions=s.slice(0,this.maxSuggestions);this.selectedSuggestionIndex=-1}else{this.filteredSuggestions=[]}}isShowingOnlyHistory(){return this.value.length===0&&this.filteredSuggestions.length>0&&this.filteredSuggestions.every((s=>s.type==="history"))}renderHighlightedText(s,i){if(!i||i.length===0){return s}const t=s.toLowerCase();const n=i.toLowerCase();const o=t.indexOf(n);if(o===-1){return s}const r=s.substring(0,o);const h=s.substring(o,o+i.length);const a=s.substring(o+i.length);return[r,e("strong",null,h),a]}componentWillLoad(){this.loadSearchHistory()}async componentDidLoad(){if(!r(this.el)){const s=n();o("ifx-search-field",await s)}}componentWillUpdate(){if(this.value!==""){this.showDeleteIconInternalState=true}else this.showDeleteIconInternalState=false}render(){return e("div",{key:"7e4c393707a14e0fb180b2871db1a0cdd071a245","aria-disabled":this.disabled,"aria-value":this.value,class:"search-field"},e("div",{key:"f16ac525d64cdba8c62a52b2c60ede614386d7ba",class:this.getWrapperClassNames(),tabindex:1,onClick:()=>this.focusInput()},e("ifx-icon",{key:"7556bc15840895f5ca6d7716471c1fbd51e85c4c",icon:"search-16",class:"search-icon"}),e("input",{key:"a0f2ae89e3d8b515d66f59919d54d209f834a9e0",ref:s=>this.inputElement=s,type:"text",autocomplete:this.autocomplete,onInput:()=>this.handleInput(),onFocus:()=>this.focusInput(),onBlur:()=>this.blurInput(),placeholder:this.placeholder,disabled:this.disabled,maxlength:this.maxlength,value:this.value,role:"combobox","aria-controls":this.showDropdown?"suggestions-dropdown":undefined,"aria-expanded":this.showDropdown,"aria-autocomplete":"list","aria-haspopup":"listbox","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledBy,"aria-describedby":this.ariaDescribedBy,"aria-owns":this.showDropdown?"suggestions-dropdown":undefined,"aria-activedescendant":this.selectedSuggestionIndex>=0?`suggestion-${this.selectedSuggestionIndex}`:undefined}),this.showDeleteIcon&&this.showDeleteIconInternalState?e("ifx-icon",{icon:"cRemove16",class:"delete-icon",onClick:this.handleDelete,role:"button",tabindex:"0","aria-label":this.deleteIconAriaLabel,onKeyDown:s=>{if(s.key==="Enter"||s.key===" "){s.preventDefault();this.handleDelete()}}}):null),this.showDropdown&&this.filteredSuggestions.length>0&&e("div",{key:"9bf17746181be5acb6b9e33d7155396186daaf3b",ref:s=>this.dropdownElement=s,id:"suggestions-dropdown",class:"suggestions-dropdown",role:"listbox","aria-label":this.dropdownAriaLabel},this.isShowingOnlyHistory()&&e("div",{key:"2bb36b6c16c734b47eebf72046e9dc59b23b0998",class:"suggestions-header"},this.historyHeaderText),this.filteredSuggestions.map(((s,i)=>e("div",{key:s.id,id:`suggestion-${i}`,class:this.getSuggestionClassNames(i),role:"option","aria-selected":i===this.selectedSuggestionIndex,"aria-label":`${s.type==="history"?this.historyItemAriaLabel:this.suggestionAriaLabel}: ${s.text}${s.scope?`, ${s.scope}`:""}${s.resultCount?`, ${s.resultCount} results`:""}`,onClick:()=>this.selectSuggestion(s),onMouseEnter:()=>this.selectedSuggestionIndex=i},e("div",{class:"suggestion-content"},s.type==="history"&&e("ifx-icon",{icon:"history-16",class:"suggestion-icon suggestion-icon--history"}),s.type==="suggestion"&&e("ifx-icon",{icon:"search-16",class:"suggestion-icon suggestion-icon--suggestion"}),e("span",{class:"suggestion-text"},e("span",{class:"suggestion-main-text"},this.renderHighlightedText(s.text,this.value)),s.scope&&e("span",{class:"suggestion-scope"},"– ",s.scope)),s.resultCount!==undefined&&s.scope&&e("span",{class:"suggestion-count"},s.resultCount),s.type==="history"&&e("ifx-icon",{icon:"cross16",class:"suggestion-delete-icon",role:"button",tabindex:"0","aria-label":`${this.historyDeleteAriaLabel}: ${s.text}`,onClick:i=>this.handleHistoryDelete(i,s.text),onKeyDown:i=>{if(i.key==="Enter"||i.key===" "){i.preventDefault();this.handleHistoryDelete(i,s.text)}}})))))))}getSizeClass(){return`${this.size}`==="s"?"search-field__wrapper-s":""}getWrapperClassNames(){return h(`search-field__wrapper`,`search-field__wrapper ${this.getSizeClass()}`,`${this.isFocused?"focused":""}`,`${this.showDropdown?"dropdown-open":""}`,`${this.disabled?"disabled":""}`)}getSuggestionClassNames(s){var i;return h("suggestion-item",{"suggestion-item--selected":s===this.selectedSuggestionIndex,"suggestion-item--history":((i=this.filteredSuggestions[s])===null||i===void 0?void 0:i.type)==="history"})}get el(){return t(this)}static get watchers(){return{value:["valueWatcher"],suggestions:["suggestionsWatcher"]}}};l.style=a;export{l as ifx_search_field};
+//# sourceMappingURL=p-db796fec.entry.js.map

package/dist/infineon-design-system-stencil/p-db796fec.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["searchFieldCss","SearchField","constructor","hostRef","this","value","suggestions","showSuggestions","maxSuggestions","maxHistoryItems","enableHistory","historyKey","historyHeaderText","ariaLabel","deleteIconAriaLabel","historyDeleteAriaLabel","dropdownAriaLabel","suggestionAriaLabel","historyItemAriaLabel","showDropdown","filteredSuggestions","selectedSuggestionIndex","searchHistory","showDeleteIcon","showDeleteIconInternalState","disabled","size","isFocused","placeholder","autocomplete","maxlength","focusEmitted","handleInput","query","inputElement","ifxInput","emit","requestSuggestions","handleDelete","hideDropdown","handleSearch","trim","length","addToHistory","handleHistoryDelete","event","term","stopPropagation","removeFromHistory","handleOutsideClick","path","composedPath","includes","dropdownElement","handleKeyDown","key","preventDefault","navigateSuggestions","selectSuggestion","valueWatcher","newValue","updateSuggestions","suggestionsWatcher","focusInput","ifxFocus","showHistoryDropdown","blurInput","setTimeout","ifxBlur","loadSearchHistory","localStorage","stored","getItem","JSON","parse","clearSearchHistory","removeItem","history","existingIndex","indexOf","splice","unshift","slice","setItem","stringify","index","ifxSuggestionRequested","toLowerCase","filteredExternal","filter","s","text","filteredHistory","map","id","type","sort","a","b","aText","bText","aStartsWith","startsWith","bStartsWith","localeCompare","historySuggestions","uniqueSuggestions","reduce","unique","current","findIndex","item","scope","push","direction","maxIndex","suggestion","ifxSuggestionSelected","isShowingOnlyHistory","every","renderHighlightedText","lowerText","lowerQuery","before","substring","match","after","h","componentWillLoad","componentDidLoad","isNestedInIfxComponent","el","framework","detectFramework","trackComponent","componentWillUpdate","render","class","getWrapperClassNames","tabindex","onClick","icon","ref","onInput","onFocus","onBlur","role","undefined","ariaLabelledBy","ariaDescribedBy","onKeyDown","getSuggestionClassNames","resultCount","onMouseEnter","getSizeClass","classNames","_a"],"sources":["src/components/search-field/search-field.scss?tag=ifx-search-field&encapsulation=shadow","src/components/search-field/search-field.tsx"],"sourcesContent":["@use '~@infineon/design-system-tokens/dist/tokens';\r\n@use '../../global/font.scss';\r\n\r\n:host {\r\n display: flex;\r\n}\r\n\r\n.search-field {\r\n box-sizing: border-box;\r\n background-color: tokens.$ifxColorBaseWhite;\r\n width: 100%;\r\n font-family: var(--ifx-font-family);\r\n position: relative; // Wichtig für absolute positioning des Dropdowns\r\n\r\n .search-field__wrapper {\r\n box-sizing: border-box;\r\n height: tokens.$ifxSize500;\r\n display: flex;\r\n align-items: center;\r\n border: 1px solid #8d8786;\r\n border-radius: tokens.$ifxBorderRadius12;\r\n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\r\n gap: tokens.$ifxSpace150;\r\n flex: none;\r\n order: 0;\r\n align-self: stretch;\r\n flex-grow: 0;\r\n position: relative;\r\n width: 100%;\r\n outline: none;\r\n\r\n &:focus-visible:not(.disabled) {\r\n outline: 2px solid tokens.$ifxColorOcean500;\r\n outline-offset: 2px;\r\n }\r\n\r\n &.search-field__wrapper-s {\r\n height: 36px;\r\n }\r\n\r\n &:hover:not(.focused, :focus) {\r\n border: 1px solid #3c3a39;\r\n }\r\n\r\n & .delete-icon {\r\n outline: 1px solid transparent;\r\n right: 12px;\r\n cursor: pointer;\r\n &:focus-visible {\r\n outline: 2px solid tokens.$ifxColorOcean500;\r\n outline-offset: 1px;\r\n }\r\n }\r\n\r\n input[type='text'] {\r\n font-style: normal;\r\n font-weight: 400;\r\n font-size: 16px;\r\n //line-height: 24px;\r\n color: #8d8786;\r\n border: none;\r\n width: 100%;\r\n outline: none;\r\n //height: 100%;\r\n height: 16px;\r\n\r\n &:focus {\r\n outline: none;\r\n color: #1d1d1d;\r\n }\r\n\r\n &:disabled {\r\n background: tokens.$ifxColorEngineering300;\r\n color: tokens.$ifxColorBaseWhite;\r\n\r\n &::placeholder {\r\n color: tokens.$ifxColorBaseWhite;\r\n }\r\n }\r\n }\r\n\r\n &.disabled {\r\n background: tokens.$ifxColorEngineering300;\r\n border: none;\r\n color: tokens.$ifxColorBaseWhite;\r\n\r\n &:hover {\r\n border: none;\r\n outline: none;\r\n }\r\n\r\n & .delete-icon { \r\n cursor: default;\r\n &:focus-visible { \r\n outline: 1px solid transparent;\r\n }\r\n }\r\n }\r\n }\r\n\r\n // Suggestions Dropdown Styles\r\n .suggestions-dropdown {\r\n position: absolute;\r\n top: 100%;\r\n left: 0;\r\n right: 0;\r\n background: tokens.$ifxColorBaseWhite;\r\n margin-top: tokens.$ifxSpace50;\r\n border: 1px solid tokens.$ifxColorEngineering200;\r\n box-shadow: 0px 6px 9px 0px rgba(29, 29, 29, 0.1);\r\n z-index: 1000;\r\n max-height: 300px;\r\n overflow-y: auto;\r\n container-type: inline-size; // Enable container queries\r\n\r\n .suggestions-header {\r\n // font: tokens.$ifxEyebrowEyebrow02; TODO\r\n font-family: Source Sans 3;\r\n font-size: 0.8125rem;\r\n font-weight: 600;\r\n line-height: 1.25rem;\r\n\r\n letter-spacing: 0.25em;\r\n text-transform: uppercase;\r\n color: tokens.$ifxColorEngineering500;\r\n border-bottom: 1px solid tokens.$ifxColorEngineering200;\r\n padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\r\n }\r\n\r\n .suggestion-item {\r\n padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\r\n cursor: pointer;\r\n transition: background-color 0.2s ease;\r\n\r\n &:last-child {\r\n border-bottom: none;\r\n }\r\n\r\n &:hover,\r\n &--selected {\r\n background-color: tokens.$ifxColorEngineering200;\r\n }\r\n\r\n .suggestion-content {\r\n display: flex;\r\n align-items: center;\r\n gap: tokens.$ifxSpace150;\r\n\r\n .suggestion-icon {\r\n color: tokens.$ifxColorEngineering500;\r\n flex-shrink: 0;\r\n\r\n &--history {\r\n color: tokens.$ifxColorEngineering500;\r\n }\r\n }\r\n\r\n .suggestion-text {\r\n flex: 1;\r\n display: flex;\r\n align-items: center;\r\n min-width: 0; // Important for flexbox truncation\r\n\r\n .suggestion-main-text {\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n flex-shrink: 1;\r\n min-width: 0;\r\n }\r\n\r\n .suggestion-scope {\r\n color: tokens.$ifxColorEngineering400;\r\n flex-shrink: 0; // Never truncate the scope\r\n white-space: nowrap;\r\n margin-left: tokens.$ifxSpace25; // Add space before the scope\r\n font-weight: tokens.$ifxFontWeightSemibold;\r\n font-size: tokens.$ifxFontSizeXs;\r\n }\r\n\r\n // When container is narrow, stack scope below main text\r\n @container (max-width: 320px) {\r\n flex-direction: column;\r\n align-items: flex-start;\r\n\r\n .suggestion-main-text {\r\n width: 100%;\r\n max-width: 100%;\r\n }\r\n\r\n .suggestion-scope {\r\n margin-left: 0;\r\n margin-top: 0;\r\n width: 100%;\r\n max-width: 100%;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n flex-shrink: 1; // Allow truncation when narrow\r\n }\r\n }\r\n }\r\n\r\n .suggestion-count {\r\n color: tokens.$ifxColorEngineering400;\r\n margin-left: auto;\r\n flex-shrink: 0;\r\n }\r\n\r\n .suggestion-delete-icon {\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: opacity 0.2s ease, visibility 0.2s ease;\r\n cursor: pointer;\r\n margin-left: auto;\r\n flex-shrink: 0;\r\n color: tokens.$ifxColorEngineering500;\r\n\r\n &:hover {\r\n color: tokens.$ifxColorEngineering600;\r\n }\r\n }\r\n }\r\n\r\n &:hover {\r\n .suggestion-delete-icon {\r\n opacity: 1;\r\n visibility: visible;\r\n }\r\n }\r\n }\r\n }\r\n\r\n // Wrapper modifications when dropdown is open\r\n .search-field__wrapper.dropdown-open {\r\n border-radius: tokens.$ifxBorderRadius12 tokens.$ifxBorderRadius12 0 0;\r\n border-color: tokens.$ifxColorOcean500;\r\n }\r\n}\r\n","import { Component, EventEmitter, h, Event, Prop, Watch, State, Listen, Element } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\nimport classNames from 'classnames';\r\n\r\nexport interface SuggestionItem {\r\n id: string;\r\n text: string;\r\n type?: 'suggestion' | 'history';\r\n scope?: string;\r\n resultCount?: number;\r\n metadata?: any;\r\n}\r\n\r\n@Component({\r\n tag: 'ifx-search-field',\r\n styleUrl: 'search-field.scss',\r\n shadow: true\r\n})\r\n\r\nexport class SearchField {\r\n @Element() el;\r\n private inputElement: HTMLInputElement;\r\n private dropdownElement: HTMLDivElement;\r\n\r\n @Prop({ mutable: true }) value: string = '';\r\n @Prop() suggestions: SuggestionItem[] = [];\r\n @Prop() showSuggestions: boolean = false;\r\n @Prop() maxSuggestions: number = 10;\r\n @Prop() maxHistoryItems: number = 5;\r\n @Prop() enableHistory: boolean = true;\r\n @Prop() historyKey: string = 'ifx-search-history';\r\n @Prop() historyHeaderText: string = 'Recent Searches';\r\n\r\n // ARIA Labels and Accessibility Props\r\n @Prop() ariaLabel: string | null = \"Search Field\"\r\n @Prop() ariaLabelledBy?: string | null;\r\n @Prop() ariaDescribedBy?: string | null;\r\n @Prop() deleteIconAriaLabel: string = 'Clear search';\r\n @Prop() historyDeleteAriaLabel: string = 'Remove from history';\r\n @Prop() dropdownAriaLabel: string = 'Search suggestions and history';\r\n @Prop() suggestionAriaLabel: string = 'Search suggestion';\r\n @Prop() historyItemAriaLabel: string = 'Search history item';\r\n\r\n @Event() ifxInput: EventEmitter<string>;\r\n @Event() ifxSuggestionRequested: EventEmitter<string>;\r\n @Event() ifxSuggestionSelected: EventEmitter<SuggestionItem>;\r\n @Event() ifxFocus: EventEmitter<void>;\r\n @Event() ifxBlur: EventEmitter<void>;\r\n\r\n @State() showDropdown: boolean = false;\r\n @State() filteredSuggestions: SuggestionItem[] = [];\r\n @State() selectedSuggestionIndex: number = -1;\r\n @State() searchHistory: string[] = [];\r\n\r\n @Prop() showDeleteIcon: boolean = false;\r\n @State() showDeleteIconInternalState: boolean = false;\r\n @Prop() disabled: boolean = false;\r\n @Prop() size: string = 'l';\r\n @State() isFocused: boolean = false;\r\n @Prop() placeholder: string = \"Search...\";\r\n @Prop() autocomplete: string = \"off\";\r\n @Prop() maxlength?: number = null;\r\n\r\n private focusEmitted: boolean = false;\r\n\r\n @Listen('mousedown', { target: 'document' })\r\n handleOutsideClick(event: MouseEvent) {\r\n const path = event.composedPath();\r\n if (!path.includes(this.inputElement) && !path.includes(this.dropdownElement)) {\r\n this.hideDropdown();\r\n }\r\n }\r\n\r\n @Listen('keydown')\r\n handleKeyDown(event: KeyboardEvent) {\r\n if (!this.showDropdown) return;\r\n\r\n switch (event.key) {\r\n case 'ArrowDown':\r\n event.preventDefault();\r\n this.navigateSuggestions(1);\r\n break;\r\n case 'ArrowUp':\r\n event.preventDefault();\r\n this.navigateSuggestions(-1);\r\n break;\r\n case 'Enter':\r\n event.preventDefault();\r\n if (this.selectedSuggestionIndex >= 0) {\r\n this.selectSuggestion(this.filteredSuggestions[this.selectedSuggestionIndex]);\r\n } else {\r\n this.handleSearch();\r\n }\r\n break;\r\n case 'Escape':\r\n this.hideDropdown();\r\n break;\r\n }\r\n }\r\n\r\n @Watch('value')\r\n valueWatcher(newValue: string) {\r\n if (this.inputElement && newValue !== this.inputElement.value) {\r\n this.inputElement.value = newValue;\r\n }\r\n this.updateSuggestions();\r\n }\r\n\r\n @Watch('suggestions')\r\n suggestionsWatcher() {\r\n this.updateSuggestions();\r\n }\r\n\r\n\r\n handleInput = () => {\r\n const query = this.inputElement.value;\r\n this.value = query;\r\n this.ifxInput.emit(this.value);\r\n\r\n if (this.showSuggestions) {\r\n this.showDropdown = true;\r\n this.selectedSuggestionIndex = -1;\r\n this.requestSuggestions(query);\r\n }\r\n };\r\n\r\n handleDelete = () => {\r\n if(!this.disabled) { \r\n this.inputElement.value = '';\r\n this.value = \"\";\r\n this.ifxInput.emit(this.value);\r\n this.hideDropdown();\r\n }\r\n }\r\n\r\n handleSearch = () => {\r\n if (this.value.trim() && this.enableHistory) {\r\n // Only add to history if there are actual results\r\n if (this.filteredSuggestions.length > 0) {\r\n this.addToHistory(this.value);\r\n }\r\n }\r\n this.hideDropdown();\r\n }\r\n\r\n focusInput() {\r\n // Only emit focus event if it hasn't been emitted already\r\n if (!this.focusEmitted) {\r\n this.focusEmitted = true;\r\n this.isFocused = true;\r\n this.ifxFocus.emit();\r\n }\r\n\r\n if (this.showSuggestions) {\r\n // On focus without input: Show only history\r\n if (this.value.length === 0) {\r\n this.showHistoryDropdown();\r\n // Only show dropdown if history is actually present\r\n this.showDropdown = this.enableHistory && this.searchHistory.length > 0;\r\n } else {\r\n // With existing input: Normal suggestion logic\r\n this.updateSuggestions();\r\n this.showDropdown = this.filteredSuggestions.length > 0;\r\n }\r\n }\r\n }\r\n\r\n blurInput() {\r\n setTimeout(() => {\r\n this.isFocused = false;\r\n this.focusEmitted = false; // Reset focus flag when blur occurs\r\n this.ifxBlur.emit();\r\n }, 150);\r\n }\r\n\r\n // Public method to update history from external sources\r\n public loadSearchHistory() {\r\n if (this.enableHistory && typeof localStorage !== 'undefined') {\r\n const stored = localStorage.getItem(this.historyKey);\r\n this.searchHistory = stored ? JSON.parse(stored) : [];\r\n\r\n // Update suggestions when history is loaded\r\n this.updateSuggestions();\r\n\r\n // If no input and no history left, close dropdown\r\n if (this.value.length === 0 && this.searchHistory.length === 0) {\r\n this.showDropdown = false;\r\n }\r\n }\r\n }\r\n\r\n // Public method to completely clear history\r\n public clearSearchHistory() {\r\n if (this.enableHistory && typeof localStorage !== 'undefined') {\r\n // Clear from localStorage\r\n localStorage.removeItem(this.historyKey);\r\n\r\n // Clear internal history\r\n this.searchHistory = [];\r\n\r\n // Reset all dropdown-relevant states\r\n this.filteredSuggestions = [];\r\n this.selectedSuggestionIndex = -1;\r\n this.showDropdown = false;\r\n\r\n // Update suggestions after reset\r\n this.updateSuggestions();\r\n }\r\n }\r\n\r\n // Suggestion Management Methods\r\n private addToHistory(term: string) {\r\n if (!this.enableHistory || !term.trim()) return;\r\n\r\n const history = [...this.searchHistory];\r\n const existingIndex = history.indexOf(term);\r\n\r\n if (existingIndex > -1) {\r\n history.splice(existingIndex, 1);\r\n }\r\n\r\n history.unshift(term);\r\n // Limit history to maxHistoryItems (default 5)\r\n this.searchHistory = history.slice(0, this.maxHistoryItems);\r\n\r\n if (typeof localStorage !== 'undefined') {\r\n localStorage.setItem(this.historyKey, JSON.stringify(this.searchHistory));\r\n }\r\n }\r\n\r\n // Remove individual history entry\r\n private removeFromHistory(term: string) {\r\n if (!this.enableHistory) return;\r\n\r\n const history = [...this.searchHistory];\r\n const index = history.indexOf(term);\r\n\r\n if (index > -1) {\r\n history.splice(index, 1);\r\n this.searchHistory = history;\r\n\r\n // Update localStorage\r\n if (typeof localStorage !== 'undefined') {\r\n localStorage.setItem(this.historyKey, JSON.stringify(this.searchHistory));\r\n }\r\n\r\n // Update suggestions after removal\r\n this.updateSuggestions();\r\n\r\n // Close dropdown if no history remains\r\n if (this.searchHistory.length === 0 && this.value.length === 0) {\r\n this.showDropdown = false;\r\n }\r\n }\r\n }\r\n\r\n // Handle click on history delete button\r\n private handleHistoryDelete = (event: Event, term: string) => {\r\n event.stopPropagation(); // Prevent selection of the entry\r\n this.removeFromHistory(term);\r\n }\r\n\r\n private requestSuggestions(query: string) {\r\n this.ifxSuggestionRequested.emit(query);\r\n this.updateSuggestions();\r\n }\r\n\r\n private updateSuggestions() {\r\n const query = this.value.toLowerCase();\r\n let suggestions: SuggestionItem[] = [];\r\n\r\n if (query.length > 0) {\r\n // For text input: Mix external suggestions and relevant history\r\n\r\n // 1. Filter external suggestions\r\n if (this.suggestions && this.suggestions.length > 0) {\r\n const filteredExternal = this.suggestions.filter(s =>\r\n s.text.toLowerCase().includes(query)\r\n );\r\n suggestions = [...suggestions, ...filteredExternal];\r\n }\r\n\r\n // 2. Filter relevant history entries\r\n if (this.enableHistory && this.searchHistory.length > 0) {\r\n const filteredHistory = this.searchHistory\r\n .filter(term => term.toLowerCase().includes(query))\r\n .map((term, index) => ({\r\n id: `history-${index}`,\r\n text: term,\r\n type: 'history' as const\r\n }));\r\n suggestions = [...suggestions, ...filteredHistory];\r\n }\r\n\r\n // 3. Sort by relevance (exact matches first, then prefix matches)\r\n suggestions.sort((a, b) => {\r\n const aText = a.text.toLowerCase();\r\n const bText = b.text.toLowerCase();\r\n\r\n // Exact match has highest priority\r\n if (aText === query && bText !== query) return -1;\r\n if (bText === query && aText !== query) return 1;\r\n\r\n // Prefix match has second highest priority\r\n const aStartsWith = aText.startsWith(query);\r\n const bStartsWith = bText.startsWith(query);\r\n\r\n if (aStartsWith && !bStartsWith) return -1;\r\n if (bStartsWith && !aStartsWith) return 1;\r\n\r\n // With equal relevance: external suggestions before history\r\n if (a.type === 'suggestion' && b.type === 'history') return -1;\r\n if (a.type === 'history' && b.type === 'suggestion') return 1;\r\n\r\n // Alphabetical sorting as last criterion\r\n return aText.localeCompare(bText);\r\n });\r\n\r\n } else {\r\n // For empty query: Show only history (no external suggestions)\r\n if (this.enableHistory && this.searchHistory.length > 0) {\r\n const historySuggestions = this.searchHistory.map((term, index) => ({\r\n id: `history-${index}`,\r\n text: term,\r\n type: 'history' as const\r\n }));\r\n\r\n suggestions = historySuggestions;\r\n }\r\n // For empty query DO NOT show external suggestions\r\n }\r\n\r\n // Remove duplicates based on text and scope combination (history takes precedence over external)\r\n const uniqueSuggestions = suggestions.reduce((unique: SuggestionItem[], current) => {\r\n const existingIndex = unique.findIndex(item =>\r\n item.text.toLowerCase() === current.text.toLowerCase() &&\r\n item.scope === current.scope\r\n );\r\n if (existingIndex === -1) {\r\n unique.push(current);\r\n } else {\r\n // If already exists, prefer history over external suggestions\r\n if (current.type === 'history' && unique[existingIndex].type !== 'history') {\r\n unique[existingIndex] = current;\r\n }\r\n }\r\n return unique;\r\n }, []);\r\n\r\n this.filteredSuggestions = uniqueSuggestions.slice(0, this.maxSuggestions);\r\n this.selectedSuggestionIndex = -1;\r\n }\r\n\r\n private navigateSuggestions(direction: number) {\r\n const maxIndex = this.filteredSuggestions.length - 1;\r\n\r\n if (direction > 0) {\r\n this.selectedSuggestionIndex = this.selectedSuggestionIndex < maxIndex\r\n ? this.selectedSuggestionIndex + 1\r\n : 0;\r\n } else {\r\n this.selectedSuggestionIndex = this.selectedSuggestionIndex > 0\r\n ? this.selectedSuggestionIndex - 1\r\n : maxIndex;\r\n }\r\n }\r\n\r\n private selectSuggestion(suggestion: SuggestionItem) {\r\n this.value = suggestion.text;\r\n this.inputElement.value = suggestion.text;\r\n this.ifxSuggestionSelected.emit(suggestion);\r\n this.ifxInput.emit(this.value);\r\n\r\n if (this.enableHistory) {\r\n // Always add selected suggestions to history since they are valid results\r\n this.addToHistory(suggestion.text);\r\n }\r\n\r\n this.hideDropdown();\r\n }\r\n\r\n private hideDropdown() {\r\n this.showDropdown = false;\r\n this.selectedSuggestionIndex = -1;\r\n this.isFocused = false;\r\n }\r\n\r\n // Show only history in dropdown (e.g. on focus without input)\r\n private showHistoryDropdown() {\r\n if (this.enableHistory && this.searchHistory.length > 0) {\r\n // Show only history entries\r\n const historySuggestions = this.searchHistory.map((term, index) => ({\r\n id: `history-${index}`,\r\n text: term,\r\n type: 'history' as const\r\n }));\r\n\r\n this.filteredSuggestions = historySuggestions.slice(0, this.maxSuggestions);\r\n this.selectedSuggestionIndex = -1;\r\n } else {\r\n this.filteredSuggestions = [];\r\n }\r\n }\r\n\r\n // Check if only history entries are displayed (without text input)\r\n private isShowingOnlyHistory(): boolean {\r\n return this.value.length === 0 &&\r\n this.filteredSuggestions.length > 0 &&\r\n this.filteredSuggestions.every(s => s.type === 'history');\r\n }\r\n\r\n // Render text with highlighted matches\r\n private renderHighlightedText(text: string, query: string) {\r\n if (!query || query.length === 0) {\r\n return text;\r\n }\r\n\r\n const lowerText = text.toLowerCase();\r\n const lowerQuery = query.toLowerCase();\r\n const index = lowerText.indexOf(lowerQuery);\r\n\r\n if (index === -1) {\r\n return text;\r\n }\r\n\r\n const before = text.substring(0, index);\r\n const match = text.substring(index, index + query.length);\r\n const after = text.substring(index + query.length);\r\n\r\n return [\r\n before,\r\n <strong>{match}</strong>,\r\n after\r\n ];\r\n }\r\n\r\n componentWillLoad() {\r\n this.loadSearchHistory();\r\n }\r\n\r\n async componentDidLoad() { \r\n if(!isNestedInIfxComponent(this.el)) {\r\n const framework = detectFramework()\r\n trackComponent('ifx-search-field', await framework)\r\n }\r\n }\r\n\r\n componentWillUpdate() {\r\n if (this.value !== \"\") {\r\n this.showDeleteIconInternalState = true;\r\n } else this.showDeleteIconInternalState = false;\r\n }\r\n\r\n render() {\r\n return (\r\n <div\r\n aria-disabled={this.disabled}\r\n aria-value={this.value}\r\n class='search-field'\r\n >\r\n <div\r\n class={this.getWrapperClassNames()}\r\n tabindex={1}\r\n onClick={() => this.focusInput()}\r\n >\r\n <ifx-icon icon=\"search-16\" class=\"search-icon\"></ifx-icon>\r\n <input\r\n ref={(el) => (this.inputElement = el)}\r\n type=\"text\"\r\n autocomplete={this.autocomplete}\r\n onInput={() => this.handleInput()}\r\n onFocus={() => this.focusInput()}\r\n onBlur={() => this.blurInput()}\r\n placeholder={this.placeholder}\r\n disabled={this.disabled}\r\n maxlength={this.maxlength}\r\n value={this.value}\r\n role=\"combobox\"\r\n aria-controls={this.showDropdown ? 'suggestions-dropdown' : undefined}\r\n aria-expanded={this.showDropdown}\r\n aria-autocomplete=\"list\"\r\n aria-haspopup=\"listbox\"\r\n aria-label={this.ariaLabel}\r\n aria-labelledby={this.ariaLabelledBy}\r\n aria-describedby={this.ariaDescribedBy}\r\n aria-owns={this.showDropdown ? 'suggestions-dropdown' : undefined}\r\n aria-activedescendant={this.selectedSuggestionIndex >= 0 ? `suggestion-${this.selectedSuggestionIndex}` : undefined}\r\n />\r\n {this.showDeleteIcon && this.showDeleteIconInternalState ? (\r\n <ifx-icon\r\n icon=\"cRemove16\"\r\n class=\"delete-icon\"\r\n onClick={this.handleDelete}\r\n role=\"button\"\r\n tabindex=\"0\"\r\n aria-label={this.deleteIconAriaLabel}\r\n onKeyDown={(event) => {\r\n if (event.key === 'Enter' || event.key === ' ') {\r\n event.preventDefault();\r\n this.handleDelete();\r\n }\r\n }}>\r\n </ifx-icon>\r\n ) : null}\r\n </div>\r\n\r\n {/* Suggestions Dropdown */}\r\n {this.showDropdown && this.filteredSuggestions.length > 0 && (\r\n <div\r\n ref={(el) => (this.dropdownElement = el)}\r\n id=\"suggestions-dropdown\"\r\n class=\"suggestions-dropdown\"\r\n role=\"listbox\"\r\n aria-label={this.dropdownAriaLabel}\r\n >\r\n {/* History Header - only show when exclusively showing history entries */}\r\n {this.isShowingOnlyHistory() && (\r\n <div class=\"suggestions-header\">\r\n {this.historyHeaderText}\r\n </div>\r\n )}\r\n\r\n {this.filteredSuggestions.map((suggestion, index) => (\r\n <div\r\n key={suggestion.id}\r\n id={`suggestion-${index}`}\r\n class={this.getSuggestionClassNames(index)}\r\n role=\"option\"\r\n aria-selected={index === this.selectedSuggestionIndex}\r\n aria-label={`${suggestion.type === 'history' ? this.historyItemAriaLabel : this.suggestionAriaLabel}: ${suggestion.text}${suggestion.scope ? `, ${suggestion.scope}` : ''}${suggestion.resultCount ? `, ${suggestion.resultCount} results` : ''}`}\r\n onClick={() => this.selectSuggestion(suggestion)}\r\n onMouseEnter={() => this.selectedSuggestionIndex = index}\r\n >\r\n <div class=\"suggestion-content\">\r\n {suggestion.type === 'history' && (\r\n <ifx-icon icon=\"history-16\" class=\"suggestion-icon suggestion-icon--history\"></ifx-icon>\r\n )}\r\n {suggestion.type === 'suggestion' && (\r\n <ifx-icon icon=\"search-16\" class=\"suggestion-icon suggestion-icon--suggestion\"></ifx-icon>\r\n )}\r\n <span class=\"suggestion-text\">\r\n <span class=\"suggestion-main-text\">\r\n {this.renderHighlightedText(suggestion.text, this.value)}\r\n </span>\r\n {suggestion.scope && (\r\n <span class=\"suggestion-scope\">– {suggestion.scope}</span>\r\n )}\r\n </span>\r\n\r\n {suggestion.resultCount !== undefined && suggestion.scope && (\r\n <span class=\"suggestion-count\">{suggestion.resultCount}</span>\r\n )}\r\n\r\n {/* Delete Button only for history entries */}\r\n {suggestion.type === 'history' && (\r\n <ifx-icon\r\n icon=\"cross16\"\r\n class=\"suggestion-delete-icon\"\r\n role=\"button\"\r\n tabindex=\"0\"\r\n aria-label={`${this.historyDeleteAriaLabel}: ${suggestion.text}`}\r\n onClick={(event) => this.handleHistoryDelete(event, suggestion.text)}\r\n onKeyDown={(event) => {\r\n if (event.key === 'Enter' || event.key === ' ') {\r\n event.preventDefault();\r\n this.handleHistoryDelete(event, suggestion.text);\r\n }\r\n }}\r\n ></ifx-icon>\r\n )}\r\n </div>\r\n </div>\r\n ))}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n\r\n getSizeClass() {\r\n return `${this.size}` === \"s\"\r\n ? \"search-field__wrapper-s\"\r\n : \"\";\r\n }\r\n\r\n getWrapperClassNames() {\r\n return classNames(\r\n `search-field__wrapper`,\r\n `search-field__wrapper ${this.getSizeClass()}`,\r\n `${this.isFocused ? 'focused' : \"\"}`,\r\n `${this.showDropdown ? 'dropdown-open' : \"\"}`,\r\n `${this.disabled ? 'disabled' : \"\"}`\r\n );\r\n }\r\n\r\n getSuggestionClassNames(index: number) {\r\n return classNames(\r\n 'suggestion-item',\r\n {\r\n 'suggestion-item--selected': index === this.selectedSuggestionIndex,\r\n 'suggestion-item--history': this.filteredSuggestions[index]?.type === 'history'\r\n }\r\n );\r\n }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-2503d869.entry.js → p-e6254813.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as e,h as r,d as a,a as o}from"./p-PqnYwNKt.js";import{d,t as i}from"./p-DcmcuUOA.js";import{i as t}from"./p-Bw2fh5LT.js";const c=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:inline-flex}.card{position:relative;display:inline-flex;flex-direction:column;word-wrap:break-word;background-color:#FFFFFF;background-clip:border-box;border:2px solid #EEEDED;border-radius:2px;width:350px;height:auto;font-family:var(--ifx-font-family)}.card:has(.card-href:focus),.card:has(.card-href:hover){outline:none;border-color:#0A8276}.card:has(.card-href:focus) ::slotted(ifx-card-headline),.card:has(.card-href:hover) ::slotted(ifx-card-headline){color:#0A8276}.card.noBtns .vertical .lower__body-wrapper{padding-bottom:24px}.card.noBtns .horizontal .lower__body-wrapper{padding-bottom:24px}.card .horizontal{display:flex;flex-direction:row;min-height:218px}.card .horizontal .card-img{flex:1;text-decoration:none}.card .horizontal .card-img.noImage{display:none}.card .horizontal .card-img ::slotted([slot=img]){width:100%;vertical-align:bottom}.card .horizontal .lower__body-wrapper{flex:1;display:grid;grid-template-rows:1fr auto}.card .horizontal .lower__body-wrapper .upper-body{display:flex;flex-direction:column;text-decoration:none;color:#1D1D1D;padding:24px 24px 0px 24px}.card .vertical .upper__body-wrapper{text-decoration:none;color:#1D1D1D}.card .vertical .upper__body-wrapper .card-img{height:190px}.card .vertical .upper__body-wrapper .card-img.noImage{display:none}.card .vertical .upper__body-wrapper .upper-body{padding:24px 24px 0px 24px}.card .vertical .lower__body-wrapper:hover{border-color:#EEEDED}.card.horizontal{flex-direction:row;width:538px}.card.horizontal .card-img{flex:1;order:2}.card.horizontal .card-img ::slotted([slot=img]){width:100%;height:100%;vertical-align:bottom;object-fit:cover}.card.horizontal.left .horizontal .card-img{order:1}.card.horizontal.left .horizontal .lower__body-wrapper{order:2}.card .card-href:focus{outline:none}';const l=class{constructor(r){e(this,r);this.direction="vertical";this.href="";this.internalHref="";this.target="_self"}setImgPosition(e){this.alignment=e.detail}handleComponentAdjustment(){const e=this.el.querySelector("ifx-card-image");const r=this.el.querySelector("ifx-card-links");this.noImg=!e;this.noBtns=!r;if(this.href.trim()===""){this.internalHref=undefined}else{this.internalHref=this.href}}componentWillLoad(){this.handleComponentAdjustment()}async componentDidLoad(){if(!t(this.el)){const e=d();i("ifx-card",await e)}}componentWillUpdate(){this.handleComponentAdjustment()}render(){return r(a,{key:"d1342011d31f6978702f5a193191c97c40620d3a"},r("div",{key:"0fad34f8282119b8a32647abaadb9c4d8c596b40","aria-label":this.ariaLabel,class:`card \n            ${this.noBtns?"noBtns":""}\n            ${this.direction} \n            ${this.alignment}`,role:"group"},this.direction==="horizontal"&&r("div",{key:"14bbc106ff828fc268bd5636d71ed66b85b3971e",class:"horizontal"},r("a",{key:"7cd3f0f394d067ef375490fc96d71c15937b784a",class:`card-img ${this.noImg?"noImage":""} ${this.internalHref?"card-href":""}`,href:this.internalHref},r("slot",{key:"ce3be286399a863d0535b7886be602eda1da1e3a",name:"img"})),r("div",{key:"19d526f169cfdfc5921b3104e642b0390d40f57c",class:"lower__body-wrapper"},r("a",{key:"e4af1b4915b38e8f31b6e539072142c8ab85e334",class:`upper-body ${this.internalHref?"card-href":""}`,href:this.internalHref,id:"upper-body-content"},r("slot",{key:"28c6e43c2e4f4a47968c7b1054d8fe8eb2d148c6"})),r("div",{key:"708536495fed3c351f85823b7dfd52b56e7e7d97"},r("slot",{key:"926da9864476efaa413ac167101a71ed265d8fa8",name:"buttons"})))),this.direction==="vertical"&&r("div",{key:"23350f711ef5cfbb298812f23d120927a67879c3",class:"vertical"},r("a",{key:"c740bb3957d400c7f0cc06a2052bbe80a1b184a7",class:`upper__body-wrapper ${this.internalHref?"card-href":""}`,href:this.internalHref,target:this.target},r("div",{key:"9027ad5864dab44e18b2c9bd10c704d8329122f5",class:`card-img ${this.noImg?"noImage":""}`},r("slot",{key:"509b69f84d36075351cbec657232b2c859c8cd9e",name:"img"})),r("div",{key:"3d7590db496cd6aaf0603ebf224a015324a86ce9",class:"upper-body",id:"upper-body-content"},r("slot",{key:"142c46ccd143f00c62e07c70b5ffcec5674666fd"}))),r("div",{key:"8245deceb8ff7e14408386eaeba2f5025ab75229",class:"lower__body-wrapper",role:"group","aria-labelledby":"upper-body-content"},r("slot",{key:"0a0e0124cde655ccfddc59cbc91f2cd373e545b5",name:"buttons"})))))}get el(){return o(this)}};l.style=c;export{l as ifx_card};
-//# sourceMappingURL=p-2503d869.entry.js.map
+import{r as e,h as a,d as r,a as o}from"./p-PqnYwNKt.js";import{d,t as i}from"./p-DcmcuUOA.js";import{i as t}from"./p-Bw2fh5LT.js";const c=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:inline-flex}.card{position:relative;display:inline-flex;flex-direction:column;word-wrap:break-word;background-color:#FFFFFF;background-clip:border-box;border:2px solid #EEEDED;border-radius:2px;width:350px;height:auto;font-family:var(--ifx-font-family)}.card:has(.card-href:focus),.card:has(.card-href:hover){outline:none;border-color:#0A8276}.card:has(.card-href:focus) ::slotted(ifx-card-headline),.card:has(.card-href:hover) ::slotted(ifx-card-headline){color:#0A8276}.card.noBtns .vertical .lower__body-wrapper{padding-bottom:24px}.card.noBtns .horizontal .lower__body-wrapper{padding-bottom:24px}.card .horizontal{display:flex;flex-direction:row;min-height:218px}.card .horizontal .card-img{flex:1;text-decoration:none}.card .horizontal .card-img.noImage{display:none}.card .horizontal .card-img ::slotted([slot=img]){width:100%;vertical-align:bottom}.card .horizontal .lower__body-wrapper{flex:1;display:grid;grid-template-rows:1fr auto}.card .horizontal .lower__body-wrapper .upper-body{display:flex;flex-direction:column;text-decoration:none;color:#1D1D1D;padding:24px 24px 0px 24px}.card .vertical .upper__body-wrapper{text-decoration:none;color:#1D1D1D}.card .vertical .upper__body-wrapper .card-img{height:190px}.card .vertical .upper__body-wrapper .card-img.noImage{display:none}.card .vertical .upper__body-wrapper .upper-body{padding:24px 24px 0px 24px}.card .vertical .lower__body-wrapper:hover{border-color:#EEEDED}.card.horizontal{flex-direction:row;width:538px}.card.horizontal .card-img{flex:1;order:2}.card.horizontal .card-img ::slotted([slot=img]){width:100%;height:100%;vertical-align:bottom;object-fit:cover}.card.horizontal.left .horizontal .card-img{order:1}.card.horizontal.left .horizontal .lower__body-wrapper{order:2}.card .card-href:focus{outline:none}';const l=class{constructor(a){e(this,a);this.direction="vertical";this.href="";this.internalHref="";this.target="_self"}setImgPosition(e){this.alignment=e.detail}handleComponentAdjustment(){const e=this.el.querySelector("ifx-card-image");const a=this.el.querySelector("ifx-card-links");this.noImg=!e;this.noBtns=!a;if(this.href.trim()===""){this.internalHref=undefined}else{this.internalHref=this.href}}componentWillLoad(){this.handleComponentAdjustment()}async componentDidLoad(){if(!t(this.el)){const e=d();i("ifx-card",await e)}}componentWillUpdate(){this.handleComponentAdjustment()}render(){return a(r,{key:"a0867e2b30baa55cfda18303340586a23b3cf501"},a("div",{key:"df2511659c0ece48955c313de9d67bc338858201","aria-label":this.ariaLabel,class:`card \n            ${this.noBtns?"noBtns":""}\n            ${this.direction} \n            ${this.alignment}`,role:"group"},this.direction==="horizontal"&&a("div",{key:"1332b8643ad72eb0659915c82caba62db959fec4",class:"horizontal"},a("a",{key:"7c6cef7c4332c93f2f6de6069647d8554faa4886",class:`card-img ${this.noImg?"noImage":""} ${this.internalHref?"card-href":""}`,href:this.internalHref},a("slot",{key:"f3013c93645e78748dc19f2f5b42810a2a251a60",name:"img"})),a("div",{key:"16e7444a54d3360a31a1a07407a0b49f35a650e3",class:"lower__body-wrapper"},a("a",{key:"263f15a09371605b8bc87dd94e9fea5bcc25fb7a",class:`upper-body ${this.internalHref?"card-href":""}`,href:this.internalHref,id:"upper-body-content"},a("slot",{key:"34cd76c02d8fdc927d461e184918f12d7e196184"})),a("div",{key:"bab33a01f255fd5ed2fc866f3d2d7b2fc62f8963"},a("slot",{key:"ae8ec1595f6a70370aefb47f14354b66b688f6f6",name:"buttons"})))),this.direction==="vertical"&&a("div",{key:"ba3665f7e757454bf5727b72e1bd2b4871ea075e",class:"vertical"},a("a",{key:"3bcdb561473d50a45656cf0e51fb01d0bec4aa31",class:`upper__body-wrapper ${this.internalHref?"card-href":""}`,href:this.internalHref,target:this.target},a("div",{key:"45f39609addede060b1a6d99e934e4699a02eb90",class:`card-img ${this.noImg?"noImage":""}`},a("slot",{key:"3810e2b4ea80fd6c8e0581b9767c1df3ce67687b",name:"img"})),a("div",{key:"abf08dcb3aafba84a5b5e6391e03ef638517a688",class:"upper-body",id:"upper-body-content"},a("slot",{key:"069c46ec890037e85087e87395c6cb12f67febd9"}))),a("div",{key:"bfe6816f195766ed9de36601e002c63957f69fd7",class:"lower__body-wrapper",role:"group","aria-labelledby":"upper-body-content"},a("slot",{key:"509c367955c8013a19389b06de4db70de7b706ec",name:"buttons"})))))}get el(){return o(this)}};l.style=c;export{l as ifx_card};
+//# sourceMappingURL=p-e6254813.entry.js.map

package/dist/infineon-design-system-stencil/p-e6254813.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["cardCss","Card","constructor","hostRef","this","direction","href","internalHref","target","setImgPosition","event","alignment","detail","handleComponentAdjustment","image","el","querySelector","links","noImg","noBtns","trim","undefined","componentWillLoad","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","componentWillUpdate","render","h","Host","key","ariaLabel","class","role","name","id"],"sources":["src/components/card/card.scss?tag=ifx-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n:host {\r\n display: inline-flex;\r\n}\r\n\r\n.card {\r\n position: relative;\r\n display: inline-flex;\r\n flex-direction: column;\r\n word-wrap: break-word;\r\n background-color: tokens.$ifxColorBaseWhite;\r\n background-clip: border-box;\r\n border: 2px solid tokens.$ifxColorEngineering200;\r\n border-radius: 2px;\r\n //width: 22rem;\r\n width: 350px;\r\n height: auto;\r\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n\r\n // when the link is focused or hovered, the border color changes\r\n &:has(.card-href:focus), &:has(.card-href:hover) {\r\n outline: none;\r\n border-color: tokens.$ifxColorOcean500;\r\n\r\n ::slotted(ifx-card-headline) {\r\n color: tokens.$ifxColorOcean500;\r\n }\r\n }\r\n\r\n &.noBtns {\r\n & .vertical {\r\n & .lower__body-wrapper {\r\n padding-bottom: 24px;\r\n }\r\n }\r\n\r\n & .horizontal {\r\n & .lower__body-wrapper {\r\n padding-bottom: 24px;\r\n }\r\n }\r\n }\r\n\r\n & .horizontal {\r\n display: flex;\r\n flex-direction: row;\r\n min-height: 218px;\r\n\r\n & .card-img {\r\n flex: 1;\r\n text-decoration: none;\r\n\r\n &.noImage {\r\n display: none;\r\n }\r\n\r\n & ::slotted([slot=img]) {\r\n width: 100%;\r\n vertical-align: bottom;\r\n }\r\n }\r\n\r\n & .lower__body-wrapper {\r\n flex: 1;\r\n display: grid;\r\n grid-template-rows: 1fr auto;\r\n\r\n & .upper-body {\r\n display: flex;\r\n flex-direction: column;\r\n text-decoration: none;\r\n color: tokens.$ifxColorBaseBlack;\r\n padding: 24px 24px 0px 24px;\r\n }\r\n }\r\n }\r\n\r\n & .vertical {\r\n & .upper__body-wrapper {\r\n text-decoration: none;\r\n color: tokens.$ifxColorBaseBlack;\r\n\r\n & .card-img {\r\n height: 190px;\r\n\r\n &.noImage {\r\n display: none;\r\n }\r\n }\r\n\r\n & .upper-body {\r\n padding: 24px 24px 0px 24px;\r\n }\r\n }\r\n\r\n & .lower__body-wrapper {\r\n &:hover {\r\n border-color: tokens.$ifxColorEngineering200;\r\n }\r\n }\r\n }\r\n\r\n &.horizontal {\r\n flex-direction: row;\r\n width: 538px;\r\n\r\n & .card-img {\r\n flex: 1;\r\n order: 2;\r\n\r\n & ::slotted([slot=img]) {\r\n width: 100%;\r\n height: 100%;\r\n vertical-align: bottom;\r\n object-fit: cover;\r\n }\r\n }\r\n\r\n &.left {\r\n & .horizontal {\r\n & .card-img {\r\n order: 1;\r\n }\r\n\r\n & .lower__body-wrapper {\r\n order: 2;\r\n }\r\n }\r\n }\r\n }\r\n\r\n & .card-href:focus {\r\n outline: none;\r\n }\r\n}","import { Component, h, Host, Element, Prop, State, Listen } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n tag: 'ifx-card',\r\n styleUrl: 'card.scss',\r\n shadow: true,\r\n})\r\n\r\nexport class Card {\r\n @Element() el;\r\n @State() noBtns: boolean;\r\n @Prop() direction: 'horizontal' | 'vertical' = 'vertical';\r\n @State() alignment: string;\r\n @State() noImg: boolean;\r\n @Prop() href: string = \"\";\r\n @State() internalHref: string = \"\";\r\n @Prop() target: string = \"_self\";\r\n @Prop() ariaLabel: string | null;\r\n\r\n @Listen('imgPosition')\r\n setImgPosition(event) {\r\n this.alignment = event.detail;\r\n }\r\n\r\n handleComponentAdjustment() {\r\n const image = this.el.querySelector('ifx-card-image');\r\n const links = this.el.querySelector('ifx-card-links');\r\n\r\n this.noImg = !image;\r\n this.noBtns = !links;\r\n\r\n if (this.href.trim() === \"\") {\r\n this.internalHref = undefined;\r\n } else {\r\n this.internalHref = this.href;\r\n }\r\n }\r\n\r\n componentWillLoad() {\r\n this.handleComponentAdjustment();\r\n }\r\n\r\n async componentDidLoad() { \r\n if(!isNestedInIfxComponent(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-card', await framework);\r\n }\r\n }\r\n\r\n componentWillUpdate() {\r\n this.handleComponentAdjustment();\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div \r\n aria-label={this.ariaLabel} \r\n class={\r\n `card \r\n ${this.noBtns ? 'noBtns' : \"\"}\r\n ${this.direction} \r\n ${this.alignment}`\r\n }\r\n role=\"group\"\r\n >\r\n\r\n {this.direction === 'horizontal' &&\r\n <div class=\"horizontal\">\r\n <a \r\n class={`card-img ${this.noImg ? 'noImage' : \"\"} ${this.internalHref ? 'card-href' : ''}`} \r\n href={this.internalHref}\r\n >\r\n <slot name=\"img\" />\r\n </a>\r\n\r\n <div class='lower__body-wrapper'>\r\n <a \r\n class={`upper-body ${this.internalHref ? 'card-href' : ''}`} \r\n href={this.internalHref}\r\n id=\"upper-body-content\"\r\n >\r\n <slot />\r\n </a>\r\n <div>\r\n <slot name='buttons' />\r\n </div>\r\n </div>\r\n </div>}\r\n\r\n {this.direction === 'vertical' &&\r\n <div class=\"vertical\">\r\n <a \r\n class={`upper__body-wrapper ${this.internalHref ? 'card-href' : ''}`} \r\n href={this.internalHref} \r\n target={this.target}\r\n >\r\n <div class={`card-img ${this.noImg ? 'noImage' : \"\"}`}>\r\n <slot name=\"img\" />\r\n </div>\r\n\r\n <div class='upper-body' id=\"upper-body-content\">\r\n <slot />\r\n </div>\r\n </a>\r\n\r\n <div class='lower__body-wrapper' role=\"group\" aria-labelledby=\"upper-body-content\">\r\n <slot name='buttons' />\r\n </div>\r\n </div>}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"mappings":"mIAAA,MAAMA,EAAU,q0D,MCWHC,EAAI,MANjB,WAAAC,CAAAC,G,UASUC,KAASC,UAA8B,WAGvCD,KAAIE,KAAW,GACdF,KAAYG,aAAW,GACxBH,KAAMI,OAAW,OAkG1B,CA9FC,cAAAC,CAAeC,GACbN,KAAKO,UAAYD,EAAME,M,CAGzB,yBAAAC,GACE,MAAMC,EAAQV,KAAKW,GAAGC,cAAc,kBACpC,MAAMC,EAAQb,KAAKW,GAAGC,cAAc,kBAEpCZ,KAAKc,OAASJ,EACdV,KAAKe,QAAUF,EAEf,GAAIb,KAAKE,KAAKc,SAAW,GAAI,CAC3BhB,KAAKG,aAAec,S,KACf,CACLjB,KAAKG,aAAeH,KAAKE,I,EAI7B,iBAAAgB,GACElB,KAAKS,2B,CAGP,sBAAMU,GACJ,IAAIC,EAAuBpB,KAAKW,IAAK,CACnC,MAAMU,EAAYC,IAClBC,EAAe,iBAAkBF,E,EAIrC,mBAAAG,GACExB,KAAKS,2B,CAGP,MAAAgB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,wDACc5B,KAAK6B,UACjBC,MACE,sBACE9B,KAAKe,OAAS,SAAW,mBACzBf,KAAKC,2BACLD,KAAKO,YAETwB,KAAK,SAGJ/B,KAAKC,YAAc,cAClByB,EAAK,OAAAE,IAAA,2CAAAE,MAAM,cACTJ,EAAA,KAAAE,IAAA,2CACEE,MAAO,YAAY9B,KAAKc,MAAQ,UAAY,MAAMd,KAAKG,aAAe,YAAc,KACpFD,KAAMF,KAAKG,cAEXuB,EAAA,QAAAE,IAAA,2CAAMI,KAAK,SAGbN,EAAK,OAAAE,IAAA,2CAAAE,MAAM,uBACTJ,EACE,KAAAE,IAAA,2CAAAE,MAAO,cAAc9B,KAAKG,aAAe,YAAc,KACvDD,KAAMF,KAAKG,aACX8B,GAAG,sBAEHP,EAAA,QAAAE,IAAA,8CAEFF,EAAA,OAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,2CAAMI,KAAK,eAKlBhC,KAAKC,YAAc,YAClByB,EAAK,OAAAE,IAAA,2CAAAE,MAAM,YACTJ,EACE,KAAAE,IAAA,2CAAAE,MAAO,uBAAuB9B,KAAKG,aAAe,YAAc,KAChED,KAAMF,KAAKG,aACXC,OAAQJ,KAAKI,QAEbsB,EAAA,OAAAE,IAAA,2CAAKE,MAAO,YAAY9B,KAAKc,MAAQ,UAAY,MAC/CY,EAAA,QAAAE,IAAA,2CAAMI,KAAK,SAGbN,EAAA,OAAAE,IAAA,2CAAKE,MAAM,aAAaG,GAAG,sBACzBP,EAAA,QAAAE,IAAA,+CAIJF,EAAK,OAAAE,IAAA,2CAAAE,MAAM,sBAAsBC,KAAK,QAAO,kBAAiB,sBAC5DL,EAAM,QAAAE,IAAA,2CAAAI,KAAK,e","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-9deaa65e.entry.js → p-e66a51e4.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as t,h as i,a as o}from"./p-PqnYwNKt.js";import{d as e,t as r}from"./p-DcmcuUOA.js";import{i as a}from"./p-Bw2fh5LT.js";const n=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}.radio-button-group-container{display:flex;flex-direction:column}.radio-button-group{display:flex;gap:8px}.radio-button-group.horizontal{flex-direction:row;column-gap:12px}.radio-button-group.vertical{flex-direction:column;row-gap:12px}.group-label{font-size:1rem;color:#1D1D1D;line-height:1.5rem;font-weight:400;margin-bottom:8px;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}.group-label .required{color:#575352;margin-left:4px}.group-label .required.error{color:#CD002F}.caption{margin-top:8px;align-self:flex-start;display:flex;width:100%;column-gap:8px;justify-content:space-between;align-items:center}.caption.default{color:#1D1D1D}.caption.error{color:#CD002F}.caption-text{font-size:0.75rem;line-height:1rem;flex:1;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}.caption-icon{flex:0;display:flex}';const s=class{constructor(i){t(this,i);this.errorStates=new Map;this.alignment="vertical";this.groupLabelText="Group Label Text";this.required=false;this.hasErrors=false;this.handleSlotChange=()=>{this.initializeState()}}handleRadioButtonError(t){const i=t.target;if(i.tagName.toLowerCase()==="ifx-radio-button"){this.errorStates.set(i,t.detail);this.updateHasErrors()}}async setGroupError(t){const i=Array.from(this.el.querySelectorAll("ifx-radio-button"));i.forEach((i=>{i.error=t}))}componentWillLoad(){this.initializeState()}async componentDidLoad(){if(!a(this.el)){const t=e();r("ifx-radio-button-group",await t)}}initializeState(){this.errorStates.clear();const t=Array.from(this.el.querySelectorAll("ifx-radio-button"));t.forEach((t=>{if(!this.errorStates.has(t)){this.errorStates.set(t,t.error||false)}}));this.updateHasErrors()}updateHasErrors(){console.log("here");this.hasErrors=Array.from(this.errorStates.values()).some((t=>t))}render(){return i("div",{key:"dcd66919142f41e8d51054f7de1663361c273232",class:"radio-button-group-container"},this.showGroupLabel&&i("div",{key:"7765acb090b78c495b03b17f242b0efacba29a10",class:"group-label"},this.groupLabelText,this.required&&i("span",{key:"e500cc4867c756991d6e76b77640b6fc1f052296",class:`required ${this.hasErrors?"error":""}`},"*")),i("div",{key:"05211a3727a84a135588bccee63d22c36511cbee",class:`radio-button-group ${this.alignment} ${this.size}`},i("slot",{key:"4d9cbd4f52276f6c101306208bd6156e01287f2f",onSlotchange:this.handleSlotChange})),this.showCaption?i("div",{class:`caption ${this.hasErrors?"error":"default"}`},this.showCaptionIcon?i("div",{class:"caption-icon"},i("ifx-icon",{icon:"c-info-16"})):"",i("div",{class:"caption-text"},this.captionText)):"")}get el(){return o(this)}};s.style=n;export{s as ifx_radio_button_group};
-//# sourceMappingURL=p-9deaa65e.entry.js.map
+import{r as t,h as i,a as o}from"./p-PqnYwNKt.js";import{d as e,t as r}from"./p-DcmcuUOA.js";import{i as a}from"./p-Bw2fh5LT.js";const n=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}.radio-button-group-container{display:flex;flex-direction:column}.radio-button-group{display:flex;gap:8px}.radio-button-group.horizontal{flex-direction:row;column-gap:12px}.radio-button-group.vertical{flex-direction:column;row-gap:12px}.group-label{font-size:1rem;color:#1D1D1D;line-height:1.5rem;font-weight:400;margin-bottom:8px;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}.group-label .required{color:#575352;margin-left:4px}.group-label .required.error{color:#CD002F}.caption{margin-top:8px;align-self:flex-start;display:flex;width:100%;column-gap:8px;justify-content:space-between;align-items:center}.caption.default{color:#1D1D1D}.caption.error{color:#CD002F}.caption-text{font-size:0.75rem;line-height:1rem;flex:1;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}.caption-icon{flex:0;display:flex}';const s=class{constructor(i){t(this,i);this.errorStates=new Map;this.alignment="vertical";this.groupLabelText="Group Label Text";this.required=false;this.hasErrors=false;this.handleSlotChange=()=>{this.initializeState()}}handleRadioButtonError(t){const i=t.target;if(i.tagName.toLowerCase()==="ifx-radio-button"){this.errorStates.set(i,t.detail);this.updateHasErrors()}}async setGroupError(t){const i=Array.from(this.el.querySelectorAll("ifx-radio-button"));i.forEach((i=>{i.error=t}))}componentWillLoad(){this.initializeState()}async componentDidLoad(){if(!a(this.el)){const t=e();r("ifx-radio-button-group",await t)}}initializeState(){this.errorStates.clear();const t=Array.from(this.el.querySelectorAll("ifx-radio-button"));t.forEach((t=>{if(!this.errorStates.has(t)){this.errorStates.set(t,t.error||false)}}));this.updateHasErrors()}updateHasErrors(){console.log("here");this.hasErrors=Array.from(this.errorStates.values()).some((t=>t))}render(){return i("div",{key:"9d56fb1bbb2ad9ce178e55f2e703bcba8be4e6b2",class:"radio-button-group-container"},this.showGroupLabel&&i("div",{key:"314ff595785c24d188cf98dc232a9dae19205f44",class:"group-label"},this.groupLabelText,this.required&&i("span",{key:"fe839163d77957b80d72b7bcf8369a68e7a3d992",class:`required ${this.hasErrors?"error":""}`},"*")),i("div",{key:"018d84f32df0e17743080ac09d98bc030fe09e30",class:`radio-button-group ${this.alignment} ${this.size}`},i("slot",{key:"d632718b08c8100e6c8604059f86abfc324e2ba8",onSlotchange:this.handleSlotChange})),this.showCaption?i("div",{class:`caption ${this.hasErrors?"error":"default"}`},this.showCaptionIcon?i("div",{class:"caption-icon"},i("ifx-icon",{icon:"c-info-16"})):"",i("div",{class:"caption-text"},this.captionText)):"")}get el(){return o(this)}};s.style=n;export{s as ifx_radio_button_group};
+//# sourceMappingURL=p-e66a51e4.entry.js.map

package/dist/infineon-design-system-stencil/p-e66a51e4.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["radioButtonGroupCss","RadioButtonGroup","constructor","hostRef","this","errorStates","Map","alignment","groupLabelText","required","hasErrors","handleSlotChange","initializeState","handleRadioButtonError","event","radioButton","target","tagName","toLowerCase","set","detail","updateHasErrors","setGroupError","error","radioButtons","Array","from","el","querySelectorAll","forEach","componentWillLoad","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","clear","has","console","log","values","some","render","h","key","class","showGroupLabel","size","onSlotchange","showCaption","showCaptionIcon","icon","captionText"],"sources":["src/components/radio-button-group/radio-button-group.scss?tag=ifx-radio-button-group&encapsulation=shadow","src/components/radio-button-group/radio-button-group.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n.radio-button-group-container {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n.radio-button-group {\r\n display: flex;\r\n gap: tokens.$ifxSpace100;\r\n\r\n &.horizontal {\r\n flex-direction: row;\r\n column-gap: tokens.$ifxSpace150;\r\n }\r\n\r\n &.vertical {\r\n flex-direction: column;\r\n row-gap: tokens.$ifxSpace150;\r\n }\r\n}\r\n\r\n.group-label {\r\n font-size: tokens.$ifxFontSizeM;\r\n color: tokens.$ifxColorBaseBlack;\r\n line-height: tokens.$ifxLineHeightM;\r\n font-weight: tokens.$ifxFontWeightRegular;\r\n margin-bottom: tokens.$ifxSpace100;\r\n text-align: left;\r\n text-underline-position: from-font;\r\n text-decoration-skip-ink: none;\r\n}\r\n\r\n.group-label .required {\r\n color: tokens.$ifxColorEngineering500;\r\n margin-left: tokens.$ifxSpace50;\r\n}\r\n\r\n.group-label .required.error {\r\n color: tokens.$ifxColorRed500;\r\n}\r\n\r\n.caption {\r\n margin-top: tokens.$ifxSpace100;\r\n align-self: flex-start;\r\n display: flex;\r\n width: 100%;\r\n column-gap: tokens.$ifxSpace100;\r\n justify-content: space-between;\r\n align-items: center;\r\n\r\n &.default {\r\n color: tokens.$ifxColorBaseBlack;\r\n }\r\n\r\n &.error {\r\n color: tokens.$ifxColorRed500;\r\n }\r\n}\r\n\r\n.caption-text {\r\n font-size: tokens.$ifxFontSizeXs;\r\n line-height: tokens.$ifxLineHeightXs;\r\n flex: 1;\r\n text-align: left;\r\n text-underline-position: from-font;\r\n text-decoration-skip-ink: none;\r\n}\r\n\r\n.caption-icon {\r\n flex:0;\r\n display: flex;\r\n}","import { Component, State, Prop, h, Element, Listen, Method } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n tag: 'ifx-radio-button-group',\r\n styleUrl: 'radio-button-group.scss',\r\n shadow: true,\r\n // formAssociated: true\r\n})\r\n\r\nexport class RadioButtonGroup {\r\n private errorStates: Map<HTMLElement, boolean> = new Map();\r\n\r\n @Element() el: HTMLElement;\r\n @Prop() alignment: 'horizontal' | 'vertical' = 'vertical';\r\n @Prop() size: string;\r\n @Prop() showGroupLabel: boolean;\r\n @Prop() groupLabelText: string = 'Group Label Text';\r\n @Prop() showCaption: boolean;\r\n @Prop() captionText: string;\r\n @Prop() showCaptionIcon: boolean;\r\n @Prop() required: boolean = false;\r\n @State() hasErrors: boolean = false;\r\n \r\n @Listen('ifxError')\r\n handleRadioButtonError(event: CustomEvent) {\r\n const radioButton = event.target as HTMLElement;\r\n if (radioButton.tagName.toLowerCase() === 'ifx-radio-button') {\r\n this.errorStates.set(radioButton, event.detail);\r\n this.updateHasErrors();\r\n }\r\n }\r\n\r\n // Method to set the error state of all radio-butttons in the group\r\n @Method()\r\n async setGroupError(error: boolean) {\r\n const radioButtons = Array.from(this.el.querySelectorAll('ifx-radio-button'));\r\n radioButtons.forEach((radioButton) => {\r\n (radioButton as any).error = error;\r\n });\r\n }\r\n\r\n componentWillLoad() {\r\n this.initializeState();\r\n }\r\n\r\n async componentDidLoad() { \r\n if(!isNestedInIfxComponent(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-radio-button-group', await framework)\r\n }\r\n }\r\n\r\n handleSlotChange = () => {\r\n this.initializeState();\r\n };\r\n\r\n private initializeState() {\r\n this.errorStates.clear();\r\n const radioButtons = Array.from(this.el.querySelectorAll('ifx-radio-button'));\r\n radioButtons.forEach((radioButton) => {\r\n if (!this.errorStates.has(radioButton)) {\r\n this.errorStates.set(radioButton, (radioButton as any).error || false);\r\n }\r\n });\r\n this.updateHasErrors();\r\n }\r\n\r\n private updateHasErrors() {\r\n console.log('here')\r\n this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);\r\n }\r\n\r\n render() {\r\n return (\r\n <div class='radio-button-group-container'>\r\n {this.showGroupLabel && (\r\n <div class=\"group-label\">\r\n {this.groupLabelText}\r\n {this.required && <span class={`required ${this.hasErrors ? 'error' : ''}`}>*</span>}\r\n </div>\r\n )}\r\n <div class={`radio-button-group ${this.alignment} ${this.size}`}>\r\n <slot onSlotchange={this.handleSlotChange} ></slot>\r\n </div>\r\n {this.showCaption ? (\r\n <div class={`caption ${this.hasErrors ? 'error' : 'default'}`}>\r\n {this.showCaptionIcon ? <div class='caption-icon'><ifx-icon icon=\"c-info-16\">\r\n </ifx-icon></div> : ''}\r\n <div class='caption-text'>{this.captionText}</div>\r\n </div>) : ''}\r\n </div>\r\n );\r\n }\r\n}"],"mappings":"iIAAA,MAAMA,EAAsB,u6B,MCYfC,EAAgB,MAP7B,WAAAC,CAAAC,G,UAQYC,KAAAC,YAAyC,IAAIC,IAG7CF,KAASG,UAA8B,WAGvCH,KAAcI,eAAW,mBAIzBJ,KAAQK,SAAY,MACnBL,KAASM,UAAY,MA+B9BN,KAAgBO,iBAAG,KACfP,KAAKQ,iBAAiB,CAwC7B,CArEG,sBAAAC,CAAuBC,GACnB,MAAMC,EAAcD,EAAME,OAC1B,GAAID,EAAYE,QAAQC,gBAAkB,mBAAoB,CAC1Dd,KAAKC,YAAYc,IAAIJ,EAAaD,EAAMM,QACxChB,KAAKiB,iB,EAMX,mBAAMC,CAAcC,GAClB,MAAMC,EAAeC,MAAMC,KAAKtB,KAAKuB,GAAGC,iBAAiB,qBACzDJ,EAAaK,SAASd,IACnBA,EAAoBQ,MAAQA,CAAK,G,CAIxC,iBAAAO,GACI1B,KAAKQ,iB,CAGT,sBAAMmB,GACF,IAAIC,EAAuB5B,KAAKuB,IAAK,CACjC,MAAMM,EAAYC,IAClBC,EAAe,+BAAgCF,E,EAQ/C,eAAArB,GACJR,KAAKC,YAAY+B,QACjB,MAAMZ,EAAeC,MAAMC,KAAKtB,KAAKuB,GAAGC,iBAAiB,qBACzDJ,EAAaK,SAASd,IAClB,IAAKX,KAAKC,YAAYgC,IAAItB,GAAc,CACpCX,KAAKC,YAAYc,IAAIJ,EAAcA,EAAoBQ,OAAS,M,KAGxEnB,KAAKiB,iB,CAGD,eAAAA,GACJiB,QAAQC,IAAI,QACZnC,KAAKM,UAAYe,MAAMC,KAAKtB,KAAKC,YAAYmC,UAAUC,MAAMlB,GAAUA,G,CAG3E,MAAAmB,GACI,OACIC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,gCACNzC,KAAK0C,gBACFH,EAAK,OAAAC,IAAA,2CAAAC,MAAM,eACNzC,KAAKI,eACLJ,KAAKK,UAAYkC,EAAA,QAAAC,IAAA,2CAAMC,MAAO,YAAYzC,KAAKM,UAAY,QAAU,MAAc,MAG5FiC,EAAK,OAAAC,IAAA,2CAAAC,MAAO,sBAAsBzC,KAAKG,aAAaH,KAAK2C,QACrDJ,EAAA,QAAAC,IAAA,2CAAMI,aAAc5C,KAAKO,oBAE5BP,KAAK6C,YACFN,EAAA,OAAKE,MAAO,WAAWzC,KAAKM,UAAY,QAAU,aAC7CN,KAAK8C,gBAAkBP,EAAK,OAAAE,MAAM,gBAAeF,EAAU,YAAAQ,KAAK,eAC7C,GACpBR,EAAA,OAAKE,MAAM,gBAAgBzC,KAAKgD,cAC1B,G","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-e759a91a.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as a,h as o}from"./p-PqnYwNKt.js";const e=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}.dropdown-header{display:flex;padding:8px 16px;align-items:center;gap:8px;align-self:stretch;border-bottom:1px solid #EEEDED;font-family:var(--ifx-font-family)}.dropdown-header span{color:#575352;font-family:var(--ifx-font-family);font-size:14px;font-style:normal;font-weight:400;line-height:20px;}';const r=class{constructor(o){a(this,o)}render(){return o("div",{key:"d58d209bafd95f683e1dc354a1202f04196a8b0a",class:"dropdown-header"},o("span",{key:"28cc9c63a12069353c9c1305b45b6dc718bace6d"},o("slot",{key:"41d2a221685739d726b282153f75c5d3c2ca08ae"})))}};r.style=e;export{r as ifx_dropdown_header};
2	+ //# sourceMappingURL=p-e759a91a.entry.js.map

package/dist/infineon-design-system-stencil/p-e759a91a.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["dropdownHeaderCss","DropdownHeader","render","h","key","class"],"sources":["src/components/dropdown/dropdown-header/dropdown-header.scss?tag=ifx-dropdown-header&encapsulation=shadow","src/components/dropdown/dropdown-header/dropdown-header.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../../global/font.scss\";\r\n\r\n.dropdown-header {\r\n display: flex;\r\n padding: 8px 16px;\r\n align-items: center;\r\n gap: 8px;\r\n align-self: stretch;\r\n border-bottom: 1px solid tokens.$ifxColorEngineering200;\r\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n\r\n\r\n & span {\r\n color: tokens.$ifxColorEngineering500;\r\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n /* 142.857% */\r\n }\r\n}","// dropdown-separator.tsx\r\nimport { Component, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: 'ifx-dropdown-header',\r\n styleUrl: 'dropdown-header.scss',\r\n shadow: true\r\n})\r\n\r\nexport class DropdownHeader {\r\n render() {\r\n return (\r\n <div class='dropdown-header'>\r\n <span>\r\n <slot />\r\n </span>\r\n </div>\r\n )\r\n }\r\n}"],"mappings":"2CAAA,MAAMA,EAAoB,0W,MCSbC,EAAc,M,yBACzB,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,mBACTF,EAAA,QAAAC,IAAA,4CACED,EAAQ,QAAAC,IAAA,8C","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-8ceb2ccc.entry.js → p-e8a60f3b.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as t,c as e,h as i,d as s,a as r}from"./p-PqnYwNKt.js";const a=":host{display:flex}.filter-type-group{width:260px;align-items:flex-start;gap:8px}.filter-type-group>::slotted(*){margin-bottom:8px}";const c=class{constructor(i){t(this,i);this.ifxSidebarFilterChange=e(this,"ifxSidebarFilterChange",7);this.selectedOptions=[];this.handleResetEvent=()=>{const t=this.el.shadowRoot.querySelector('slot[name="filter-accordion"]');const e=t.assignedElements({flatten:true});e.forEach((t=>{const e=t.querySelectorAll("ifx-list");e.forEach((t=>{t.resetTrigger=!t.resetTrigger}))}));const i=this.el.shadowRoot.querySelector('slot[name="filter-search"]');const s=i.assignedElements({flatten:true});s.forEach((t=>{const e=t.querySelector("ifx-filter-search");const i=e.shadowRoot.querySelectorAll("ifx-search-field");if(i.length>0){i.forEach((t=>{t.value=""}))}}));this.selectedOptions=[];this.ifxSidebarFilterChange.emit(this.selectedOptions)};this.handleUpdateSidebarFilter=t=>{const{filterName:e}=t.detail;const i=this.el.shadowRoot.querySelector('slot[name="filter-accordion"]');const s=i?i.assignedElements({flatten:true}):[];s.forEach((t=>{const i=t.querySelectorAll("ifx-list");i.forEach((t=>{if(t.getAttribute("name")===e){t.resetTrigger=!t.resetTrigger}}))}));const r=this.el.shadowRoot.querySelector('slot[name="filter-search"]');const a=r?r.assignedNodes({flatten:true}):[];a.forEach((t=>{if(t.nodeType===Node.ELEMENT_NODE){const e=t;const i=e.firstElementChild;if(i){i.setAttribute("value","");i.dispatchEvent(new CustomEvent("ifxInput",{bubbles:true,composed:true,detail:""}))}}}));const c=this.selectedOptions.map((t=>{if(t.filterGroupName===e){return Object.assign(Object.assign({},t),{selectedItems:[],value:""})}return t}));this.selectedOptions=c;this.ifxSidebarFilterChange.emit(this.selectedOptions)};this.handleAccordionChange=t=>{this.handleFilterChange(t)};this.handleSearchChange=t=>{this.handleFilterChange(t)};this.handleFilterChange=t=>{const e=[...this.selectedOptions];if(t.type==="ifxFilterSearchChange"){const{filterName:i,filterValue:s}=t.detail;const r=e.findIndex((t=>typeof t!=="string"&&t.filterGroupName===i));if(r!==-1){e[r].value=s}else{e.push({filterGroupName:i,value:s})}}else if(t.type==="ifxFilterAccordionChange"){const{filterGroupName:i,selectedItems:s}=t.detail;const r=e.findIndex((t=>t.filterGroupName===i));if(r!==-1){e[r]={filterGroupName:i,selectedItems:s}}else{e.push({filterGroupName:i,selectedItems:s})}}this.selectedOptions=e;this.ifxSidebarFilterChange.emit(this.selectedOptions)}}connectedCallback(){this.el.addEventListener("ifxFilterAccordionChange",this.handleAccordionChange);this.el.addEventListener("ifxFilterSearchChange",this.handleSearchChange);window.addEventListener("ifxResetFiltersEvent",this.handleResetEvent);window.addEventListener("ifxUpdateSidebarFilter",this.handleUpdateSidebarFilter)}componentWillUnload(){this.el.removeEventListener("ifxFilterAccordionChange",this.handleAccordionChange);this.el.removeEventListener("ifxFilterSearchChange",this.handleSearchChange);window.removeEventListener("ifxResetFiltersEvent",this.handleResetEvent)}render(){return i(s,{key:"94b9242c4dfad88c33d3cc60ce16f275c6599e19"},i("div",{key:"e2e65ea326edd9bb145f3f9dac2828195acd32b3",class:"filter-type-group"},i("slot",{key:"74ab49bf1a2d7e5ee43f7dfdda975a85791aab55",name:"filter-search"}),i("slot",{key:"b245f5b5ce1fa14e5c707512947069b9ddd28bc6",name:"filter-accordion"})))}get el(){return r(this)}};c.style=a;export{c as ifx_filter_type_group};
-//# sourceMappingURL=p-8ceb2ccc.entry.js.map
+import{r as t,c as e,h as i,d as s,a as r}from"./p-PqnYwNKt.js";const a=":host{display:flex}.filter-type-group{width:260px;align-items:flex-start;gap:8px}.filter-type-group>::slotted(*){margin-bottom:8px}";const n=class{constructor(i){t(this,i);this.ifxSidebarFilterChange=e(this,"ifxSidebarFilterChange",7);this.selectedOptions=[];this.handleResetEvent=()=>{const t=this.el.shadowRoot.querySelector('slot[name="filter-accordion"]');const e=t.assignedElements({flatten:true});e.forEach((t=>{const e=t.querySelectorAll("ifx-list");e.forEach((t=>{t.resetTrigger=!t.resetTrigger}))}));const i=this.el.shadowRoot.querySelector('slot[name="filter-search"]');const s=i.assignedElements({flatten:true});s.forEach((t=>{const e=t.querySelector("ifx-filter-search");const i=e.shadowRoot.querySelectorAll("ifx-search-field");if(i.length>0){i.forEach((t=>{t.value=""}))}}));this.selectedOptions=[];this.ifxSidebarFilterChange.emit(this.selectedOptions)};this.handleUpdateSidebarFilter=t=>{const{filterName:e}=t.detail;const i=this.el.shadowRoot.querySelector('slot[name="filter-accordion"]');const s=i?i.assignedElements({flatten:true}):[];s.forEach((t=>{const i=t.querySelectorAll("ifx-list");i.forEach((t=>{if(t.getAttribute("name")===e){t.resetTrigger=!t.resetTrigger}}))}));const r=this.el.shadowRoot.querySelector('slot[name="filter-search"]');const a=r?r.assignedNodes({flatten:true}):[];a.forEach((t=>{if(t.nodeType===Node.ELEMENT_NODE){const e=t;const i=e.firstElementChild;if(i){i.setAttribute("value","");i.dispatchEvent(new CustomEvent("ifxInput",{bubbles:true,composed:true,detail:""}))}}}));const n=this.selectedOptions.map((t=>{if(t.filterGroupName===e){return Object.assign(Object.assign({},t),{selectedItems:[],value:""})}return t}));this.selectedOptions=n;this.ifxSidebarFilterChange.emit(this.selectedOptions)};this.handleAccordionChange=t=>{this.handleFilterChange(t)};this.handleSearchChange=t=>{this.handleFilterChange(t)};this.handleFilterChange=t=>{const e=[...this.selectedOptions];if(t.type==="ifxFilterSearchChange"){const{filterName:i,filterValue:s}=t.detail;const r=e.findIndex((t=>typeof t!=="string"&&t.filterGroupName===i));if(r!==-1){e[r].value=s}else{e.push({filterGroupName:i,value:s})}}else if(t.type==="ifxFilterAccordionChange"){const{filterGroupName:i,selectedItems:s}=t.detail;const r=e.findIndex((t=>t.filterGroupName===i));if(r!==-1){e[r]={filterGroupName:i,selectedItems:s}}else{e.push({filterGroupName:i,selectedItems:s})}}this.selectedOptions=e;this.ifxSidebarFilterChange.emit(this.selectedOptions)}}connectedCallback(){this.el.addEventListener("ifxFilterAccordionChange",this.handleAccordionChange);this.el.addEventListener("ifxFilterSearchChange",this.handleSearchChange);window.addEventListener("ifxResetFiltersEvent",this.handleResetEvent);window.addEventListener("ifxUpdateSidebarFilter",this.handleUpdateSidebarFilter)}componentWillUnload(){this.el.removeEventListener("ifxFilterAccordionChange",this.handleAccordionChange);this.el.removeEventListener("ifxFilterSearchChange",this.handleSearchChange);window.removeEventListener("ifxResetFiltersEvent",this.handleResetEvent)}render(){return i(s,{key:"9645afa69f474c30c1263325a5785888cb2556e4"},i("div",{key:"072f98a53ccef18f29a3d22d463e8a98a0e12eed",class:"filter-type-group"},i("slot",{key:"489eadbeb2e78546e6893b7131c81256df09b1a4",name:"filter-search"}),i("slot",{key:"dba54b3eea4d88441f1df263e159858e91e04ebc",name:"filter-accordion"})))}get el(){return r(this)}};n.style=a;export{n as ifx_filter_type_group};
+//# sourceMappingURL=p-e8a60f3b.entry.js.map