@infineon/infineon-design-system-stencil 36.0.0--canary.1926.2fa6a0dcd4452d2af4bd88004a2546da78dec492.0 → 36.0.0--canary.1926.f081616d24f4027c378085d67f935a5b3da8a95e.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.
- package/dist/cjs/ifx-accordion_2.cjs.entry.js +25 -25
- package/dist/cjs/ifx-accordion_2.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-basic-table.cjs.entry.js +4 -4
- package/dist/cjs/ifx-basic-table.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-multiselect_2.cjs.entry.js +1 -11
- package/dist/cjs/ifx-multiselect_2.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-step.cjs.entry.js +1 -1
- package/dist/cjs/ifx-step.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-table.cjs.entry.js +5 -5
- package/dist/cjs/ifx-table.cjs.entry.js.map +1 -1
- package/dist/collection/components/accordion/accordionItem.css +0 -4
- package/dist/collection/components/accordion/accordionItem.js +24 -24
- package/dist/collection/components/accordion/accordionItem.js.map +1 -1
- package/dist/collection/components/footer/footer.stories.js +4 -4
- package/dist/collection/components/footer/footer.stories.js.map +1 -1
- package/dist/collection/components/select/multi-select/multiselect.js +1 -11
- package/dist/collection/components/select/multi-select/multiselect.js.map +1 -1
- package/dist/collection/components/stepper/step/step.js +1 -1
- package/dist/collection/components/stepper/step/step.js.map +1 -1
- package/dist/collection/components/table-advanced-version/table.js +5 -5
- package/dist/collection/components/table-advanced-version/table.js.map +1 -1
- package/dist/collection/components/table-basic-version/table.js +4 -4
- package/dist/collection/components/table-basic-version/table.js.map +1 -1
- package/dist/components/ifx-accordion-item.js +1 -1
- package/dist/components/ifx-basic-table.js +4 -4
- package/dist/components/ifx-basic-table.js.map +1 -1
- package/dist/components/ifx-faq.js +1 -1
- package/dist/components/ifx-multiselect.js +1 -1
- package/dist/components/ifx-set-filter.js +1 -1
- package/dist/components/ifx-step.js +1 -1
- package/dist/components/ifx-step.js.map +1 -1
- package/dist/components/ifx-table.js +5 -5
- package/dist/components/ifx-table.js.map +1 -1
- package/dist/components/{p-1c80b52e.js → p-4eec7e6a.js} +2 -12
- package/dist/components/p-4eec7e6a.js.map +1 -0
- package/dist/components/p-5c96860f.js +119 -0
- package/dist/components/p-5c96860f.js.map +1 -0
- package/dist/esm/ifx-accordion_2.entry.js +25 -25
- package/dist/esm/ifx-accordion_2.entry.js.map +1 -1
- package/dist/esm/ifx-basic-table.entry.js +4 -4
- package/dist/esm/ifx-basic-table.entry.js.map +1 -1
- package/dist/esm/ifx-multiselect_2.entry.js +1 -11
- package/dist/esm/ifx-multiselect_2.entry.js.map +1 -1
- package/dist/esm/ifx-step.entry.js +1 -1
- package/dist/esm/ifx-step.entry.js.map +1 -1
- package/dist/esm/ifx-table.entry.js +5 -5
- package/dist/esm/ifx-table.entry.js.map +1 -1
- package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js +1 -1
- package/dist/infineon-design-system-stencil/p-0d3e5a0d.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-0d3e5a0d.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/{p-b7cb706f.entry.js → p-18a81f5f.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-b7cb706f.entry.js.map → p-18a81f5f.entry.js.map} +1 -1
- package/dist/infineon-design-system-stencil/{p-3349d2da.entry.js → p-28ca6f49.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-28ca6f49.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/{p-cf937da8.entry.js → p-4d9a4329.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-4d9a4329.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/{p-d7b49615.entry.js → p-ad7b58c3.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-d7b49615.entry.js.map → p-ad7b58c3.entry.js.map} +1 -1
- package/dist/types/components/accordion/accordionItem.d.ts +2 -1
- package/package.json +1 -1
- package/dist/components/p-1c80b52e.js.map +0 -1
- package/dist/components/p-4cf462ca.js +0 -119
- package/dist/components/p-4cf462ca.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-3349d2da.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-a356a82d.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-a356a82d.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-cf937da8.entry.js.map +0 -1
package/dist/infineon-design-system-stencil/{p-d7b49615.entry.js.map → p-ad7b58c3.entry.js.map}
RENAMED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["CustomNoRowsOverlay","init","params","this","eGui","document","createElement","innerHTML","noRowsMessageFunc","getGui","refresh","_params","CustomLoadingOverlay","tableCss","IfxBasicTableStyle0","Table","constructor","hostRef","columnDefs","rowData","rowHeight","tableHeight","variant","gridInitialized","componentWillLoad","uniqueKey","Math","floor","random","setColsAndRows","setGridOptions","gridOptions","headerHeight","defaultColDef","resizable","suppressCellFocus","enableCellTextSelection","suppressDragLeaveHidesColumns","suppressRowHoverHighlight","onFirstDataRendered","loadingOverlayComponent","noRowsOverlayComponent","noRowsOverlayComponentParams","Date","toLocaleTimeString","icons","sortAscending","sortDescending","sortUnSort","rowDragManaged","some","col","dndSource","animateRows","rows","cols","JSON","parse","err","console","error","Array","isArray","getRowData","getColData","api","sizeColumnsToFit","componentWillUpdate","gridApi","setGridOption","componentDidLoad","container","createGrid","defaultMinWidth","getClassNames","classNames","getTableStyle","height","render","h","Host","key","id","class","style","ref","el"],"sources":["src/components/table-basic-version/customNoRowsOverlay.ts","src/components/table-basic-version/customLoadingOverlay.ts","src/components/table-basic-version/table.scss?tag=ifx-basic-table","src/components/table-basic-version/table.tsx"],"sourcesContent":["import { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\n\nexport class CustomNoRowsOverlay implements ICellRendererComp {\n eGui!: HTMLElement;\n\n init(params: ICellRendererParams & { noRowsMessageFunc: () => string }) {\n this.eGui = document.createElement('div');\n this.eGui.innerHTML = `\n <div role=\"presentation\" class=\"ag-overlay-loading-center\" >\n ${params.noRowsMessageFunc()}\n </div>\n `;\n }\n\n getGui() {\n return this.eGui;\n }\n\n refresh(_params: ICellRendererParams): boolean {\n return false;\n }\n}","import { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\n\nexport class CustomLoadingOverlay implements ICellRendererComp {\n eGui!: HTMLElement;\n\n init(_params: ICellRendererParams & { loadingMessage: string }) {\n this.eGui = document.createElement('div');\n this.eGui.innerHTML = `<div class=\"ag-overlay-loading-center\" role=\"presentation\">\n<ifx-spinner></ifx-spinner>\n </div>`;\n }\n\n getGui() {\n return this.eGui;\n }\n\n refresh(_params: ICellRendererParams): boolean {\n return false;\n }\n}","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n@import \"~ag-grid-community/styles/ag-grid.css\";\n// @import \"~ag-grid-community/styles/ag-theme-alpine.css\";\n\n// :host {\n// --table-height: '200px';\n// /* Default value */\n// } ag-ltr .ag-header-cell-resize\n\n.zebra { \n & .ag-row-odd { \n background-color: tokens.$ifxColorEngineering100!important;\n }\n\n & .ag-row { \n border-bottom: none!important;\n }\n}\n\n.ag-header-viewport { \n background-color: tokens.$ifxColorEngineering200!important;\n}\n\n.table-wrapper .ag-root-wrapper-body {\n height: auto !important;\n min-height: 100px !important;\n min-width: 100px;\n}\n\n.ifx-ag-grid {\n display: grid;\n height: 100%;\n width: 100%;\n min-width: 100px;\n padding-bottom: tokens.$ifxSpace100;\n}\n\n\n.ifx-ag-grid .ag-header-cell::after {\n outline: none !important;\n border: none !important;\n box-shadow: none !important;\n}\n\n.ifx-ag-grid .ag-header-cell:focus {\n outline: none !important;\n}\n\n.ifx-ag-grid *:not(.ag-header-cell):focus {\n outline: none;\n}\n\n.ifx-ag-grid .ag-header-cell:not(:last-child)::before {\n content: '';\n position: absolute;\n right: 0;\n top: calc(50% - 12px);\n height: 24px; \n width: 1px;\n background-color: tokens.$ifxColorEngineering300; \n}\n\n.ag-overlay-loading-center {\n border: none;\n background: none;\n border-radius: none;\n box-shadow: none;\n}\n\n\n.ag-root-wrapper {\n border: 1px solid tokens.$ifxColorEngineering200;\n}\n\n.ag-header {\n background-color: tokens.$ifxColorEngineering100;\n border-bottom: none;\n\n &.ag-header-active {\n outline: none !important;\n border-color: #0A8276 !important;\n }\n}\n\n.ag-header-cell {\n padding-left: 16px;\n padding-right: 16px;\n gap: 4px;\n}\n\n\n.ag-header-cell-focus {\n border: none !important;\n outline: none !important;\n}\n\n.ag-header-cell-text {\n font-size: 13px;\n font-style: normal;\n font-weight: 600;\n line-height: 20px;\n color: tokens.$ifxColorBaseBlack;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n}\n\n.ag-row-focus {\n background-color: inherit !important;\n /* Reset the hover color to the row's original color */\n}\n\n.ag-row-hover {\n background-color: tokens.$ifxColorBaseWhite !important; //inherit !important;\n /* Reset the hover color to the row's original color */\n}\n\n\n.ag-cell-focus {\n border: none !important;\n outline: none !important;\n background-color: inherit !important;\n}\n\n\n\n.ag-row {\n background-color: tokens.$ifxColorBaseWhite;\n border-bottom: 1px solid tokens.$ifxColorEngineering200;\n font-size: 13px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n z-index: 1; //ensure the stacking order when used inside js frameworks\n}\n\n.ag-row-odd {\n background-color: tokens.$ifxColorBaseWhite;\n}\n\n.ag-cell {\n display: flex;\n padding-left: 16px;\n padding-right: 16px;\n align-items: center;\n\n}\n\n.ag-ltr .ag-sort-indicator-icon {\n padding-left: 0px;\n vertical-align: bottom;\n line-height: 12px;\n}\n\n.unsort-icon-custom-color {\n color: tokens.$ifxColorEngineering400;\n}","import { Component, h, Element, Host, Prop, State } from '@stencil/core';\nimport { createGrid, FirstDataRenderedEvent, GridApi, GridOptions } from 'ag-grid-community';\nimport { CustomNoRowsOverlay } from './customNoRowsOverlay';\nimport { CustomLoadingOverlay } from './customLoadingOverlay';\nimport classNames from 'classnames';\n\n@Component({\n tag: 'ifx-basic-table',\n styleUrl: 'table.scss',\n shadow: false // only works with shadowdom off because we are using an external library\n})\nexport class Table {\n @State() gridOptions: GridOptions;\n @Prop() cols: any[] | string;\n @Prop() rows: any[] | string;\n @State() columnDefs: any[] = [];\n @State() rowData: any[] = [];\n @Prop() rowHeight: string = 'default';\n @Prop() tableHeight: string = 'auto';\n @Prop() variant: string = 'default'\n @State() uniqueKey: string;\n @Element() host: HTMLElement;\n \n private container: HTMLDivElement;\n private gridApi: GridApi; \n private gridInitialized = false;\n\n componentWillLoad() {\n this.uniqueKey = `unique-${Math.floor(Math.random() * 1000000)}`;\n this.setColsAndRows(); //needed?\n this.setGridOptions();\n }\n\n setGridOptions() {\n this.gridOptions = {\n rowHeight: this.rowHeight === 'default' ? 40 : 32,\n headerHeight: 40,\n defaultColDef: {\n resizable: true,\n },\n suppressCellFocus: true,\n enableCellTextSelection: true,\n suppressDragLeaveHidesColumns: true,\n suppressRowHoverHighlight: true,\n onFirstDataRendered: this.onFirstDataRendered,\n columnDefs: this.columnDefs,\n rowData: this.rowData,\n loadingOverlayComponent: CustomLoadingOverlay,\n noRowsOverlayComponent: CustomNoRowsOverlay,\n noRowsOverlayComponentParams: {\n noRowsMessageFunc: () =>\n 'No rows found at: ' + new Date().toLocaleTimeString(),\n },\n icons: {\n sortAscending: '<ifx-icon icon=\"arrowTriangleUp16\"></ifx-icon>',\n sortDescending: '<ifx-icon icon=\"arrowTriangleDown16\"></ifx-icon>',\n sortUnSort: '<a class=\"unsort-icon-custom-color\"><ifx-icon icon=\"arrowTriangleVertikal16\"></ifx-icon></a>',\n },\n rowDragManaged: this.columnDefs.some((col) => col.dndSource === true) ? true : false,\n animateRows: this.columnDefs.some((col) => col.dndSource === true) ? true : false,\n };\n }\n\n setColsAndRows() {\n if (typeof this.rows === 'string' && typeof this.cols === 'string') {\n try {\n if(this.cols) {\n this.columnDefs = JSON.parse(this.cols);\n }\n if(this.rows) {\n this.rowData = JSON.parse(this.rows);\n }\n } catch (err) {\n console.error('Failed to parse input:', err);\n }\n } else if ((Array.isArray(this.rows) || typeof this.rows === 'object') && (Array.isArray(this.cols) || typeof this.cols === 'object')) {\n this.columnDefs = this.cols;\n this.rowData = this.rows;\n } else {\n console.error('Unexpected value for cols and rows:', this.rows, this.cols);\n }\n }\n\n getRowData() {\n let rows: any[] = [];\n if (typeof this.rows === 'string') {\n try {\n if(this.rows) {\n rows = JSON.parse(this.rows);\n }\n } catch (err) {\n console.error('Failed to parse input:', err);\n }\n } else if (Array.isArray(this.rows) || typeof this.rows === 'object') {\n rows = this.rows;\n } else {\n console.error('Unexpected value for rows: ', this.rows);\n }\n\n return rows;\n }\n\n getColData() {\n let cols: any[] = [];\n\n if (typeof this.cols === 'string') {\n try {\n if(this.cols) { \n cols = JSON.parse(this.cols);\n }\n } catch (err) {\n console.error('Failed to parse input:', err);\n }\n } else if (Array.isArray(this.cols) || typeof this.cols === 'object') {\n cols = this.cols;\n } else {\n console.error('Unexpected value for cols: ', this.cols);\n }\n return cols;\n }\n\n onFirstDataRendered(params: FirstDataRenderedEvent) {\n params.api.sizeColumnsToFit();\n }\n\n componentWillUpdate() {\n this.setColsAndRows();\n this.gridOptions.columnDefs = this.columnDefs;\n this.gridOptions.rowData = this.rowData;\n if (this.gridApi) {\n this.gridApi.setGridOption('rowData', this.rowData);\n this.gridApi.setGridOption('columnDefs', this.columnDefs);\n }\n }\n\n componentDidLoad() {\n if (this.container && !this.gridInitialized) {\n this.gridApi = createGrid(this.container, this.gridOptions);\n if (this.gridApi) {\n this.gridApi.sizeColumnsToFit({\n defaultMinWidth: 100,\n });\n this.gridApi.setGridOption('columnDefs', this.getColData());\n this.gridApi.setGridOption('rowData', this.getRowData());\n this.gridInitialized = true; \n }\n }\n }\n\n getClassNames() {\n return classNames(\n this.tableHeight === 'auto' && 'table-wrapper ag-root-wrapper-body',\n 'table-wrapper',\n );\n }\n\n getTableStyle() {\n if (this.tableHeight !== 'auto') {\n return {\n height: this.tableHeight,\n };\n }\n return {};\n }\n\n render() {\n return (\n <Host>\n <div id=\"table-wrapper\" class={this.getClassNames()}>\n <div id={`ifxTable-${this.uniqueKey}`} class={`ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : \"\"}`} style={this.getTableStyle()} ref={(el) => (this.container = el)}></div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
1
|
+
{"version":3,"names":["CustomNoRowsOverlay","init","params","this","eGui","document","createElement","innerHTML","noRowsMessageFunc","getGui","refresh","_params","CustomLoadingOverlay","tableCss","IfxBasicTableStyle0","Table","constructor","hostRef","columnDefs","rowData","rowHeight","tableHeight","variant","gridInitialized","componentWillLoad","uniqueKey","Math","floor","random","setColsAndRows","setGridOptions","gridOptions","headerHeight","defaultColDef","resizable","suppressCellFocus","enableCellTextSelection","suppressDragLeaveHidesColumns","suppressRowHoverHighlight","onFirstDataRendered","loadingOverlayComponent","noRowsOverlayComponent","noRowsOverlayComponentParams","Date","toLocaleTimeString","icons","sortAscending","sortDescending","sortUnSort","rowDragManaged","some","col","dndSource","animateRows","rows","cols","JSON","parse","err","console","error","Array","isArray","getRowData","getColData","api","sizeColumnsToFit","componentWillUpdate","gridApi","setGridOption","componentDidLoad","container","createGrid","defaultMinWidth","getClassNames","classNames","getTableStyle","height","render","h","Host","key","id","class","style","ref","el"],"sources":["src/components/table-basic-version/customNoRowsOverlay.ts","src/components/table-basic-version/customLoadingOverlay.ts","src/components/table-basic-version/table.scss?tag=ifx-basic-table","src/components/table-basic-version/table.tsx"],"sourcesContent":["import { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\n\nexport class CustomNoRowsOverlay implements ICellRendererComp {\n eGui!: HTMLElement;\n\n init(params: ICellRendererParams & { noRowsMessageFunc: () => string }) {\n this.eGui = document.createElement('div');\n this.eGui.innerHTML = `\n <div role=\"presentation\" class=\"ag-overlay-loading-center\" >\n ${params.noRowsMessageFunc()}\n </div>\n `;\n }\n\n getGui() {\n return this.eGui;\n }\n\n refresh(_params: ICellRendererParams): boolean {\n return false;\n }\n}","import { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\n\nexport class CustomLoadingOverlay implements ICellRendererComp {\n eGui!: HTMLElement;\n\n init(_params: ICellRendererParams & { loadingMessage: string }) {\n this.eGui = document.createElement('div');\n this.eGui.innerHTML = `<div class=\"ag-overlay-loading-center\" role=\"presentation\">\n<ifx-spinner></ifx-spinner>\n </div>`;\n }\n\n getGui() {\n return this.eGui;\n }\n\n refresh(_params: ICellRendererParams): boolean {\n return false;\n }\n}","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n@import \"~ag-grid-community/styles/ag-grid.css\";\n// @import \"~ag-grid-community/styles/ag-theme-alpine.css\";\n\n// :host {\n// --table-height: '200px';\n// /* Default value */\n// } ag-ltr .ag-header-cell-resize\n\n.zebra { \n & .ag-row-odd { \n background-color: tokens.$ifxColorEngineering100!important;\n }\n\n & .ag-row { \n border-bottom: none!important;\n }\n}\n\n.ag-header-viewport { \n background-color: tokens.$ifxColorEngineering200!important;\n}\n\n.table-wrapper .ag-root-wrapper-body {\n height: auto !important;\n min-height: 100px !important;\n min-width: 100px;\n}\n\n.ifx-ag-grid {\n display: grid;\n height: 100%;\n width: 100%;\n min-width: 100px;\n padding-bottom: tokens.$ifxSpace100;\n}\n\n\n.ifx-ag-grid .ag-header-cell::after {\n outline: none !important;\n border: none !important;\n box-shadow: none !important;\n}\n\n.ifx-ag-grid .ag-header-cell:focus {\n outline: none !important;\n}\n\n.ifx-ag-grid *:not(.ag-header-cell):focus {\n outline: none;\n}\n\n.ifx-ag-grid .ag-header-cell:not(:last-child)::before {\n content: '';\n position: absolute;\n right: 0;\n top: calc(50% - 12px);\n height: 24px; \n width: 1px;\n background-color: tokens.$ifxColorEngineering300; \n}\n\n.ag-overlay-loading-center {\n border: none;\n background: none;\n border-radius: none;\n box-shadow: none;\n}\n\n\n.ag-root-wrapper {\n border: 1px solid tokens.$ifxColorEngineering200;\n}\n\n.ag-header {\n background-color: tokens.$ifxColorEngineering100;\n border-bottom: none;\n\n &.ag-header-active {\n outline: none !important;\n border-color: #0A8276 !important;\n }\n}\n\n.ag-header-cell {\n padding-left: 16px;\n padding-right: 16px;\n gap: 4px;\n}\n\n\n.ag-header-cell-focus {\n border: none !important;\n outline: none !important;\n}\n\n.ag-header-cell-text {\n font-size: 13px;\n font-style: normal;\n font-weight: 600;\n line-height: 20px;\n color: tokens.$ifxColorBaseBlack;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n}\n\n.ag-row-focus {\n background-color: inherit !important;\n /* Reset the hover color to the row's original color */\n}\n\n.ag-row-hover {\n background-color: tokens.$ifxColorBaseWhite !important; //inherit !important;\n /* Reset the hover color to the row's original color */\n}\n\n\n.ag-cell-focus {\n border: none !important;\n outline: none !important;\n background-color: inherit !important;\n}\n\n\n\n.ag-row {\n background-color: tokens.$ifxColorBaseWhite;\n border-bottom: 1px solid tokens.$ifxColorEngineering200;\n font-size: 13px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n z-index: 1; //ensure the stacking order when used inside js frameworks\n}\n\n.ag-row-odd {\n background-color: tokens.$ifxColorBaseWhite;\n}\n\n.ag-cell {\n display: flex;\n padding-left: 16px;\n padding-right: 16px;\n align-items: center;\n\n}\n\n.ag-ltr .ag-sort-indicator-icon {\n padding-left: 0px;\n vertical-align: bottom;\n line-height: 12px;\n}\n\n.unsort-icon-custom-color {\n color: tokens.$ifxColorEngineering400;\n}","import { Component, h, Element, Host, Prop, State } from '@stencil/core';\nimport { createGrid, FirstDataRenderedEvent, GridApi, GridOptions } from 'ag-grid-community';\nimport { CustomNoRowsOverlay } from './customNoRowsOverlay';\nimport { CustomLoadingOverlay } from './customLoadingOverlay';\nimport classNames from 'classnames';\n\n@Component({\n tag: 'ifx-basic-table',\n styleUrl: 'table.scss',\n shadow: false // only works with shadowdom off because we are using an external library\n})\nexport class Table {\n @State() gridOptions: GridOptions;\n @Prop() cols: any[] | string;\n @Prop() rows: any[] | string;\n @State() columnDefs: any[] = [];\n @State() rowData: any[] = [];\n @Prop() rowHeight: string = 'default';\n @Prop() tableHeight: string = 'auto';\n @Prop() variant: string = 'default'\n @State() uniqueKey: string;\n @Element() host: HTMLElement;\n \n private container: HTMLDivElement;\n private gridApi: GridApi; \n private gridInitialized = false;\n\n componentWillLoad() {\n this.uniqueKey = `unique-${Math.floor(Math.random() * 1000000)}`;\n this.setColsAndRows(); //needed?\n this.setGridOptions();\n }\n\n setGridOptions() {\n this.gridOptions = {\n rowHeight: this.rowHeight === 'default' ? 40 : 32,\n headerHeight: 40,\n defaultColDef: {\n resizable: true,\n },\n suppressCellFocus: true,\n enableCellTextSelection: true,\n suppressDragLeaveHidesColumns: true,\n suppressRowHoverHighlight: true,\n onFirstDataRendered: this.onFirstDataRendered,\n columnDefs: this.columnDefs,\n rowData: this.rowData,\n loadingOverlayComponent: CustomLoadingOverlay,\n noRowsOverlayComponent: CustomNoRowsOverlay,\n noRowsOverlayComponentParams: {\n noRowsMessageFunc: () =>\n 'No rows found at: ' + new Date().toLocaleTimeString(),\n },\n icons: {\n sortAscending: '<ifx-icon icon=\"arrow-triangle-up-16\"></ifx-icon>',\n sortDescending: '<ifx-icon icon=\"arrow-triangle-down-16\"></ifx-icon>',\n sortUnSort: '<a class=\"unsort-icon-custom-color\"><ifx-icon icon=\"arrow-triangle-vertikal-16\"></ifx-icon></a>',\n },\n rowDragManaged: this.columnDefs.some((col) => col.dndSource === true) ? true : false,\n animateRows: this.columnDefs.some((col) => col.dndSource === true) ? true : false,\n };\n }\n\n setColsAndRows() {\n if (typeof this.rows === 'string' && typeof this.cols === 'string') {\n try {\n if(this.cols) {\n this.columnDefs = JSON.parse(this.cols);\n }\n if(this.rows) {\n this.rowData = JSON.parse(this.rows);\n }\n } catch (err) {\n console.error('Failed to parse input:', err);\n }\n } else if ((Array.isArray(this.rows) || typeof this.rows === 'object') && (Array.isArray(this.cols) || typeof this.cols === 'object')) {\n this.columnDefs = this.cols;\n this.rowData = this.rows;\n } else {\n console.error('Unexpected value for cols and rows:', this.rows, this.cols);\n }\n }\n\n getRowData() {\n let rows: any[] = [];\n if (typeof this.rows === 'string') {\n try {\n if(this.rows) {\n rows = JSON.parse(this.rows);\n }\n } catch (err) {\n console.error('Failed to parse input:', err);\n }\n } else if (Array.isArray(this.rows) || typeof this.rows === 'object') {\n rows = this.rows;\n } else {\n console.error('Unexpected value for rows: ', this.rows);\n }\n\n return rows;\n }\n\n getColData() {\n let cols: any[] = [];\n\n if (typeof this.cols === 'string') {\n try {\n if(this.cols) { \n cols = JSON.parse(this.cols);\n }\n } catch (err) {\n console.error('Failed to parse input:', err);\n }\n } else if (Array.isArray(this.cols) || typeof this.cols === 'object') {\n cols = this.cols;\n } else {\n console.error('Unexpected value for cols: ', this.cols);\n }\n return cols;\n }\n\n onFirstDataRendered(params: FirstDataRenderedEvent) {\n params.api.sizeColumnsToFit();\n }\n\n componentWillUpdate() {\n this.setColsAndRows();\n this.gridOptions.columnDefs = this.columnDefs;\n this.gridOptions.rowData = this.rowData;\n if (this.gridApi) {\n this.gridApi.setGridOption('rowData', this.rowData);\n this.gridApi.setGridOption('columnDefs', this.columnDefs);\n }\n }\n\n componentDidLoad() {\n if (this.container && !this.gridInitialized) {\n this.gridApi = createGrid(this.container, this.gridOptions);\n if (this.gridApi) {\n this.gridApi.sizeColumnsToFit({\n defaultMinWidth: 100,\n });\n this.gridApi.setGridOption('columnDefs', this.getColData());\n this.gridApi.setGridOption('rowData', this.getRowData());\n this.gridInitialized = true; \n }\n }\n }\n\n getClassNames() {\n return classNames(\n this.tableHeight === 'auto' && 'table-wrapper ag-root-wrapper-body',\n 'table-wrapper',\n );\n }\n\n getTableStyle() {\n if (this.tableHeight !== 'auto') {\n return {\n height: this.tableHeight,\n };\n }\n return {};\n }\n\n render() {\n return (\n <Host>\n <div id=\"table-wrapper\" class={this.getClassNames()}>\n <div id={`ifxTable-${this.uniqueKey}`} class={`ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : \"\"}`} style={this.getTableStyle()} ref={(el) => (this.container = el)}></div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
@@ -9,13 +9,14 @@ export declare class IfxAccordionItem {
|
|
9
9
|
ifxClose: EventEmitter;
|
10
10
|
private contentEl;
|
11
11
|
private titleEl;
|
12
|
+
private resizeObserver;
|
12
13
|
componentWillLoad(): void;
|
13
14
|
componentDidLoad(): void;
|
14
15
|
componentDidUpdate(): void;
|
15
16
|
openChanged(newValue: boolean): void;
|
16
17
|
toggleOpen(): void;
|
17
18
|
openAccordionItem(): void;
|
18
|
-
|
19
|
+
attachResizeObserver(): void;
|
19
20
|
handleKeydown(ev: KeyboardEvent): void;
|
20
21
|
render(): any;
|
21
22
|
}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@infineon/infineon-design-system-stencil",
|
3
|
-
"version": "36.0.0--canary.1926.
|
3
|
+
"version": "36.0.0--canary.1926.f081616d24f4027c378085d67f935a5b3da8a95e.0",
|
4
4
|
"private": false,
|
5
5
|
"description": "Infineon design system Stencil web components",
|
6
6
|
"homepage": "https://infineon.github.io/infineon-design-system-stencil",
|
@@ -1 +0,0 @@
|
|
1
|
-
{"file":"p-1c80b52e.js","mappings":"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","names":[],"sources":["src/components/select/multi-select/multiselect.scss?tag=ifx-multiselect&encapsulation=shadow","src/components/select/multi-select/multiselect.tsx"],"sourcesContent":["// @import '~choices.js/public/assets/styles/choices.css';\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.ifx-multiselect-container {\n position: relative;\n box-sizing: border-box;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n &:hover {\n cursor: pointer;\n }\n\n .ifx-label-wrapper {\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n white-space: pre-wrap;\n word-wrap: break-word;\n overflow-wrap: anywhere;\n max-width: 100%;\n }\n\n .ifx-error-message-wrapper {\n color: #CD002F;\n font-size: tokens.$ifxFontSizeXs;\n line-height: tokens.$ifxLineHeightXs;\n white-space: pre-wrap;\n word-wrap: break-word;\n overflow-wrap: anywhere;\n max-width: 100%;\n }\n\n .ifx-multiselect-wrapper {\n background-color: tokens.$ifxColorBaseWhite;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n border: 1px solid tokens.$ifxColorEngineering400;\n border-radius: tokens.$ifxBorderRadius12;\n width: 100%;\n font-weight: 400;\n font-style: normal;\n height: 40px;\n line-height: 24px;\n padding: 8px 16px;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n\n &:focus-visible {\n outline: none;\n }\n\n &:focus-visible:not(.active):not(:active) {\n outline: none;\n\n &::before {\n content: '';\n position: absolute;\n width: calc(100% + 4px);\n height: calc(100% + 4px);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border: 2px solid tokens.$ifxColorOcean500;\n border-radius: 2px;\n\n }\n }\n\n &.disabled {\n background: tokens.$ifxColorEngineering200;\n color: #575352;\n border-color: #575352;\n cursor: default;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n }\n\n &.error {\n border-color: #CD002F;\n }\n\n &:hover:not(.focus, :focus) {\n border-color: tokens.$ifxColorEngineering500;\n }\n\n &.active {\n border-color: tokens.$ifxColorOcean500 !important; // Active border color\n\n & .icon-wrapper-up {\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: tokens.$ifxSpace100;\n }\n\n & .icon-wrapper-down {\n display: none\n }\n }\n\n\n & .icon-wrapper-up {\n display: none;\n }\n\n & .icon-wrapper-down {\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: tokens.$ifxSpace100;\n }\n\n &.is-flipped {\n .ifx-multiselect-dropdown-menu {\n top: auto;\n bottom: 100%;\n }\n }\n }\n\n .ifx-multiselect-input {\n flex-grow: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n\n &.placeholder {\n opacity: 0.5;\n }\n\n }\n\n\n .ifx-multiselect-icon-container {\n margin-left: auto;\n display: flex;\n align-items: center;\n gap: tokens.$ifxSpace100;\n\n .ifx-multiselect-icon-container {\n display: flex;\n }\n\n .icon-wrapper {\n display: flex;\n align-items: center;\n transition: transform 0.2s ease-in-out;\n }\n\n .icon-wrapper--open {\n transform: rotate(180deg);\n }\n }\n\n .ifx-clear-button {\n display: flex;\n align-items: center;\n\n &.hide {\n display: none;\n }\n }\n\n .ifx-multiselect-dropdown-menu {\n box-sizing: border-box;\n position: absolute;\n top: 100%;\n left: 0;\n width: 100%;\n margin-top: tokens.$ifxSpace50;\n border: 1px solid tokens.$ifxColorEngineering200;\n background-color: #fff;\n box-shadow: 0px 6px 9px 0px rgba(29, 29, 29, 0.10);\n max-height: 300px;\n z-index: 1000;\n display: flex;\n flex-direction: column;\n }\n}\n\n.ifx-multiselect-dropdown-functions {\n padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\n border-bottom: 1px solid tokens.$ifxColorEngineering200;\n flex-shrink: 0;\n}\n\n.ifx-multiselect-dropdown-search {\n margin-bottom: tokens.$ifxSpace150;\n}\n\n.ifx-multiselect-dropdown-controls {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: tokens.$ifxSpace100;\n\n .select-all-wrapper {\n display: flex;\n }\n\n .expand-collapse-controls {\n display: flex;\n gap: tokens.$ifxSpace150;\n }\n\n .control-item {\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n\n &:focus {\n outline: none;\n }\n\n &:focus-visible {\n outline: 2px solid tokens.$ifxColorOcean500;\n outline-offset: 2px;\n border-radius: tokens.$ifxBorderRadius12;\n }\n }\n}\n\n.ifx-multiselect-options {\n flex: 1;\n overflow-y: auto;\n padding-top: tokens.$ifxSpace150;\n padding-bottom: tokens.$ifxSpace150;\n\n &.show-no-results {\n .ifx-multiselect-no-results {\n display: block;\n }\n }\n}\n\n.ifx-multiselect-no-results {\n padding-left: tokens.$ifxSpace200;\n padding-right: tokens.$ifxSpace200;\n display: none;\n}\n\n","import { Component, Prop, State, Event, EventEmitter, Element, AttachInternals, h, Watch, Method } from '@stencil/core';\nimport { Option } from './interfaces';\n\nfunction debounce(func, wait) {\n let timeout;\n return function executedFunction(...args) {\n const later = () => {\n clearTimeout(timeout);\n func(...args);\n };\n clearTimeout(timeout);\n timeout = setTimeout(later, wait);\n };\n}\n\n@Component({\n tag: 'ifx-multiselect',\n styleUrl: 'multiselect.scss',\n shadow: true,\n formAssociated: true\n})\n\nexport class Multiselect {\n @Prop() name: string;\n @Prop() disabled: boolean = false;\n @Prop() error: boolean = false;\n @Prop() errorMessage: string = \"Error\";\n @Prop() label: string = \"\";\n @Prop() placeholder: string = \"\";\n @Prop() showSearch: boolean = true;\n @Prop() showSelectAll: boolean = true;\n @Prop() showClearButton: boolean = true;\n @Prop() showExpandCollapse: boolean = true;\n @Prop() noResultsMessage: string = \"No results found.\";\n @Prop() showNoResultsMessage: boolean = true;\n @Prop() searchPlaceholder: string = \"Search\";\n @Prop() selectAllLabel: string = \"Select all\";\n @Prop() expandLabel: string = \"Expand\";\n @Prop() collapseLabel: string = \"Collapse\";\n @Prop() ariaMultiSelectLabel: string = \"Multi-select dropdown\";\n @Prop() ariaMultiSelectLabelledBy: string = \"\";\n @Prop() ariaMultiSelectDescribedBy: string = \"\";\n @Prop() ariaSearchLabel: string = \"Search options\";\n @Prop() ariaClearLabel: string = \"Clear all selections\";\n @Prop() ariaToggleLabel: string = \"Toggle dropdown\";\n @Prop() ariaSelectAllLabel: string = \"Select all options\";\n @Prop() ariaExpandAllLabel: string = \"Expand all categories\";\n @Prop() ariaCollapseAllLabel: string = \"Collapse all categories\";\n\n @State() internalError: boolean = false;\n @State() internalErrorMessage: string;\n @State() persistentSelectedOptions: Option[] = [];\n @State() dropdownOpen = false;\n @State() dropdownFlipped: boolean;\n @State() searchTerm: string = '';\n\n @Event() ifxSelect: EventEmitter;\n @Event() ifxOpen: EventEmitter;\n\n @Element() el: HTMLElement;\n dropdownElement!: HTMLElement;\n\n @AttachInternals() internals: ElementInternals;\n private parseChildOptions(): Option[] {\n const options: Option[] = [];\n const childElements = Array.from(this.el.children);\n\n childElements.forEach((child, index) => {\n if (child.tagName === 'IFX-MULTISELECT-OPTION') {\n const option = this.parseOptionElement(child as HTMLElement, index);\n if (option) {\n options.push(option);\n }\n }\n });\n\n return options;\n }\n\n private parseOptionElement(element: HTMLElement, index: number): Option | null {\n const value = element.getAttribute('value') || `option-${index}`;\n const selected = element.hasAttribute('selected');\n const disabled = element.hasAttribute('disabled');\n const indeterminate = element.hasAttribute('indeterminate');\n\n const option: Option = {\n value,\n selected,\n disabled,\n indeterminate\n };\n\n const nestedOptions = Array.from(element.children)\n .filter(child => child.tagName === 'IFX-MULTISELECT-OPTION')\n .map((child, childIndex) => this.parseOptionElement(child as HTMLElement, childIndex))\n .filter(opt => opt !== null) as Option[];\n\n if (nestedOptions.length > 0) {\n option.children = nestedOptions;\n }\n\n return option;\n }\n\n loadInitialOptions() {\n this.internalError = this.error;\n this.internalErrorMessage = this.errorMessage;\n\n const allOptions = this.parseChildOptions();\n const initiallySelected = this.collectSelectedOptions(allOptions);\n const initiallySelectedNotInState = initiallySelected.filter(init =>\n !this.persistentSelectedOptions.some(opt => opt.value == init.value)\n );\n this.persistentSelectedOptions = [...this.persistentSelectedOptions, ...initiallySelectedNotInState];\n }\n\n private collectSelectedOptions(options: Option[]): Option[] {\n let selectedOptions: Option[] = [];\n\n for (const option of options) {\n if (option.selected) {\n if (option.children && option.children.length > 0) {\n selectedOptions = selectedOptions.concat(this.collectLeafOptions(option.children));\n } else {\n if (!selectedOptions.some(existingOption => existingOption.value === option.value)) {\n selectedOptions.push(option);\n }\n }\n } else {\n if (option.children && option.children.length > 0) {\n selectedOptions = selectedOptions.concat(this.collectSelectedOptions(option.children));\n }\n }\n }\n\n return selectedOptions;\n }\n\n private collectLeafOptions(children: Option[]): Option[] {\n let leafOptions = [];\n\n for (const child of children) {\n if (child.children && child.children.length > 0) {\n leafOptions = leafOptions.concat(this.collectLeafOptions(child.children));\n } else {\n leafOptions.push(child);\n }\n }\n return leafOptions;\n }\n\n handleSearch = debounce((targetElement: HTMLInputElement) => {\n const searchTerm = targetElement.value.toLowerCase();\n const isSearchActive = searchTerm !== '';\n\n this.searchTerm = searchTerm;\n\n const wrapper = this.el.shadowRoot.querySelector('.ifx-multiselect-wrapper');\n if (wrapper) {\n if (isSearchActive) {\n wrapper.classList.remove('active');\n } else {\n const searchField = this.el.shadowRoot.querySelector('ifx-search-field');\n const searchFieldHasFocus = searchField && searchField.matches(':focus-within');\n if (!searchFieldHasFocus) {\n wrapper.classList.add('active');\n }\n }\n }\n\n const optionsContainer = this.el.shadowRoot.querySelector('.ifx-multiselect-options');\n if (optionsContainer) {\n if (isSearchActive) {\n optionsContainer.classList.add('has-search-filter');\n } else {\n optionsContainer.classList.remove('has-search-filter');\n }\n }\n\n requestAnimationFrame(() => {\n const allOptions = this.el.querySelectorAll('ifx-multiselect-option');\n allOptions.forEach(option => {\n const searchEvent = new CustomEvent('ifx-search-filter', {\n detail: { searchTerm, isActive: isSearchActive }\n });\n option.dispatchEvent(searchEvent);\n });\n\n if (isSearchActive) {\n setTimeout(() => {\n const allOptions = this.el.querySelectorAll('ifx-multiselect-option');\n let visibleCount = 0;\n\n allOptions.forEach(option => {\n const style = window.getComputedStyle(option);\n const rect = option.getBoundingClientRect();\n\n if (style.display !== 'none' &&\n style.visibility !== 'hidden' &&\n style.opacity !== '0' &&\n rect.height > 0) {\n visibleCount++;\n }\n });\n\n const optionsContainer = this.el.shadowRoot.querySelector('.ifx-multiselect-options');\n if (optionsContainer) {\n if (visibleCount === 0) {\n optionsContainer.classList.add('show-no-results');\n } else {\n optionsContainer.classList.remove('show-no-results');\n }\n }\n }, 200);\n } else {\n const optionsContainer = this.el.shadowRoot.querySelector('.ifx-multiselect-options');\n if (optionsContainer) {\n optionsContainer.classList.remove('show-no-results');\n }\n }\n });\n }, 150);\n\n private handleSearchFocus(hasFocus: boolean) {\n const wrapper = this.el.shadowRoot.querySelector('.ifx-multiselect-wrapper');\n if (wrapper) {\n if (hasFocus || this.searchTerm !== '') {\n wrapper.classList.remove('active');\n } else {\n wrapper.classList.add('active');\n }\n }\n }\n\n positionDropdown() {\n const wrapperRect = this.el.shadowRoot.querySelector('.ifx-multiselect-wrapper')?.getBoundingClientRect();\n const spaceBelow = window.innerHeight - wrapperRect.bottom;\n const spaceAbove = wrapperRect.top;\n\n if ((spaceAbove > spaceBelow && wrapperRect.height > spaceBelow) || (wrapperRect.bottom > window.innerHeight)) {\n this.dropdownFlipped = true;\n } else {\n this.dropdownFlipped = false;\n }\n }\n\n public updateSlotBasedSelections(emitEvent: boolean = false) {\n const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');\n const selectedLeafOptions: Option[] = [];\n\n allOptionElements.forEach((optionEl: any) => {\n const instance = optionEl['__stencil_instance'];\n if (instance && instance.selected && !instance.hasChildren) {\n selectedLeafOptions.push({\n value: instance.value,\n selected: true,\n disabled: instance.disabled\n });\n }\n });\n\n this.persistentSelectedOptions = selectedLeafOptions;\n\n if (emitEvent) {\n this.ifxSelect.emit(this.persistentSelectedOptions);\n }\n }\n\n private updateInitialParentStates() {\n const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');\n const optionsByDepth = Array.from(allOptionElements)\n .map(el => ({\n element: el,\n instance: (el as any)['__stencil_instance'],\n depth: parseInt(el.getAttribute('data-level') || '0')\n }))\n .filter(item => item.instance)\n .sort((a, b) => b.depth - a.depth);\n\n optionsByDepth.forEach(({ instance }) => {\n if (instance.hasChildren) {\n this.updateParentState(instance);\n }\n });\n }\n\n private updateParentState(parentInstance: any) {\n const directChildren = Array.from(parentInstance.el.children as HTMLCollection)\n .filter((child: Element) => child.tagName === 'IFX-MULTISELECT-OPTION')\n .map(child => (child as any)['__stencil_instance'])\n .filter(instance => instance !== null);\n\n const selectedCount = directChildren.filter(child => child.selected).length;\n const indeterminateCount = directChildren.filter(child => child.indeterminate).length;\n const totalCount = directChildren.length;\n\n if (selectedCount === totalCount && indeterminateCount === 0) {\n parentInstance.selected = true;\n parentInstance.indeterminate = false;\n } else if (selectedCount === 0 && indeterminateCount === 0) {\n parentInstance.selected = false;\n parentInstance.indeterminate = false;\n } else {\n parentInstance.selected = false;\n parentInstance.indeterminate = true;\n }\n }\n\n componentDidLoad() {\n setTimeout(() => {\n this.positionDropdown();\n }, 500);\n\n this.el.addEventListener('ifx-option-changed', () => {\n requestAnimationFrame(() => {\n this.updateSlotBasedSelections(true);\n });\n });\n\n setTimeout(() => {\n this.updateSlotBasedSelections(false);\n this.updateInitialParentStates();\n }, 100);\n }\n\n componentWillLoad() {\n this.loadInitialOptions();\n }\n\n @Watch('error')\n updateInternalError() {\n this.internalError = this.error;\n }\n\n @Watch('errorMessage')\n updateInternalErrorMessage() {\n this.internalErrorMessage = this.errorMessage;\n }\n\n @Watch('persistentSelectedOptions')\n onSelectionChange(newValue: Option[], _: Option[]) {\n const formData = new FormData();\n newValue.forEach(option => formData.append(this.name, option.value));\n this.internals.setFormValue(formData);\n }\n collapseAll() {\n const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');\n allOptionElements.forEach((optionEl: any) => {\n const instance = optionEl['__stencil_instance'];\n if (instance && instance.hasChildren) {\n instance.isExpanded = false;\n }\n });\n }\n\n expandAll() {\n const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');\n allOptionElements.forEach((optionEl: any) => {\n const instance = optionEl['__stencil_instance'];\n if (instance && instance.hasChildren) {\n instance.isExpanded = true;\n }\n });\n }\n\n selectAll() {\n this.resetSearch();\n\n const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');\n\n allOptionElements.forEach((optionEl: any) => {\n const instance = optionEl['__stencil_instance'];\n if (instance) {\n if (instance.hasChildren) {\n instance.isExpanded = true;\n } else {\n instance.selected = true;\n }\n }\n });\n\n setTimeout(() => {\n this.updateInitialParentStates();\n this.updateSlotBasedSelections(false);\n this.ifxSelect.emit(this.persistentSelectedOptions);\n }, 0);\n }\n\n @Method()\n async clearSelection() {\n const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');\n allOptionElements.forEach((optionEl: any) => {\n const instance = optionEl['__stencil_instance'];\n if (instance) {\n instance.selected = false;\n instance.indeterminate = false;\n if (instance.hasChildren) {\n instance.isExpanded = false;\n }\n }\n });\n\n this.persistentSelectedOptions = [];\n\n setTimeout(() => {\n this.updateSlotBasedSelections(false);\n this.ifxSelect.emit(this.persistentSelectedOptions);\n }, 0);\n }\n\n handleDocumentClick = (event: Event) => {\n const path = event.composedPath();\n if (!path.includes(this.dropdownElement)) {\n this.dropdownOpen = false;\n document.removeEventListener('click', this.handleDocumentClick);\n this.resetSearch();\n this.ifxOpen.emit(this.dropdownOpen);\n }\n }\n\n toggleDropdown() {\n this.dropdownOpen = !this.dropdownOpen;\n setTimeout(() => {\n if (this.dropdownOpen) {\n document.addEventListener('click', this.handleDocumentClick);\n } else {\n this.resetSearch();\n }\n this.ifxOpen.emit(this.dropdownOpen);\n }, 0);\n }\n\n private resetSearch() {\n this.searchTerm = '';\n\n const searchField = this.el.shadowRoot.querySelector('ifx-search-field') as any;\n if (searchField) {\n searchField.value = '';\n }\n\n const optionsContainer = this.el.shadowRoot.querySelector('.ifx-multiselect-options');\n if (optionsContainer) {\n optionsContainer.classList.remove('has-search-filter');\n }\n\n const allOptions = this.el.querySelectorAll('ifx-multiselect-option');\n allOptions.forEach(option => {\n const searchEvent = new CustomEvent('ifx-search-filter', {\n detail: { searchTerm: '', isActive: false }\n });\n option.dispatchEvent(searchEvent);\n });\n }\n\n handleWrapperClick(event: MouseEvent) {\n this.positionDropdown();\n\n if (event.currentTarget === event.target) {\n this.toggleDropdown();\n }\n }\n\n handleKeyDown(event: KeyboardEvent) {\n if (this.disabled) return;\n\n // If dropdown is closed, only allow opening\n if (!this.dropdownOpen) {\n switch (event.code) {\n case 'Enter':\n case 'Space':\n case 'ArrowDown':\n event.preventDefault();\n this.toggleDropdown();\n break;\n }\n return;\n }\n\n // Dropdown is open - handle navigation and controls\n switch (event.code) {\n case 'Escape':\n event.preventDefault();\n this.toggleDropdown();\n break;\n case 'Enter':\n case 'Space':\n // Don't close dropdown when pressing space/enter in controls area\n const target = event.target as HTMLElement;\n if (!target.closest('.ifx-multiselect-dropdown-functions')) {\n event.preventDefault();\n this.toggleDropdown();\n }\n break;\n case 'ArrowDown':\n case 'ArrowUp':\n // Focus first/last option for navigation\n event.preventDefault();\n this.focusFirstOption();\n break;\n }\n }\n\n private focusFirstOption() {\n const firstOption = this.el.querySelector('ifx-multiselect-option:not(.search-hidden)');\n if (firstOption) {\n const labelElement = firstOption.shadowRoot?.querySelector('.option-label') as HTMLElement;\n labelElement?.focus();\n }\n }\n\n private renderSelectAll() {\n const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');\n const leafOptions = Array.from(allOptionElements).filter((el: any) => !el.hasChildren);\n const selectedLeafOptions = Array.from(allOptionElements).filter((el: any) => !el.hasChildren && el.selected);\n\n const allSelected = leafOptions.length > 0 && selectedLeafOptions.length === leafOptions.length;\n\n const toggleSelectAll = (event?: Event) => {\n if (event) {\n event.preventDefault();\n event.stopPropagation();\n }\n\n if (allSelected) {\n this.clearSelection();\n } else {\n this.selectAll();\n }\n };\n\n return (\n <div class=\"select-all-wrapper\">\n <ifx-checkbox\n id='selectAll'\n checked={allSelected}\n size=\"s\"\n aria-label={this.ariaSelectAllLabel}\n onClick={toggleSelectAll}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n e.stopPropagation();\n toggleSelectAll(e);\n }\n }}\n >\n {this.selectAllLabel}\n </ifx-checkbox>\n </div>\n );\n }\n\n private renderNoResultsMessage() {\n return (\n <div class=\"ifx-multiselect-no-results\">\n <div class=\"no-results-content\">\n <span class=\"no-results-text\">{this.noResultsMessage}</span>\n </div>\n </div>\n );\n }\n\n render() {\n const selectedOptionsLabels = this.persistentSelectedOptions\n .map((option) => {\n const optionElement = this.el.querySelector(`ifx-multiselect-option[value=\"${option.value}\"]`);\n return optionElement?.textContent?.trim() || option.value;\n })\n .join(', ');\n\n const hasSelections = this.persistentSelectedOptions.length > 0;\n\n let isFlatMultiselect = false;\n const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');\n if (allOptionElements.length > 0) {\n isFlatMultiselect = Array.from(allOptionElements).every(option => option.children.length === 0);\n }\n\n return (\n <div class={`ifx-multiselect-container`} ref={el => this.dropdownElement = el as HTMLElement}>\n {\n this.label ?\n <div class=\"ifx-label-wrapper\">\n <span>{this.label}</span>\n </div> : null\n }\n <div class={`ifx-multiselect-wrapper\n ${this.dropdownOpen ? 'active' : ''}\n ${this.dropdownFlipped ? 'is-flipped' : ''}\n ${this.internalError ? 'error' : \"\"}\n ${this.disabled ? 'disabled' : \"\"}`}\n role=\"combobox\"\n aria-label={this.ariaMultiSelectLabel}\n aria-labelledby={this.ariaMultiSelectLabelledBy || undefined}\n aria-describedby={this.ariaMultiSelectDescribedBy || undefined}\n aria-expanded={this.dropdownOpen}\n aria-haspopup=\"listbox\"\n aria-disabled={this.disabled}\n tabindex=\"0\"\n onClick={this.disabled ? undefined : (event) => this.handleWrapperClick(event)}\n onKeyDown={this.disabled ? undefined : (event) => this.handleKeyDown(event)} >\n <div class={`ifx-multiselect-input\n ${hasSelections ? '' : 'placeholder'}\n `}\n onClick={this.disabled ? undefined : () => this.toggleDropdown()}\n >\n {hasSelections ? selectedOptionsLabels : this.placeholder}\n </div>\n {this.dropdownOpen && (\n <div class=\"ifx-multiselect-dropdown-menu\">\n\n {(this.showSearch || this.showSelectAll || (this.showExpandCollapse && !isFlatMultiselect)) && (\n <div class=\"ifx-multiselect-dropdown-functions\" onClick={(e) => e.stopPropagation()}>\n {this.showSearch && (\n <div class=\"ifx-multiselect-dropdown-search\">\n <ifx-search-field\n class=\"search-input\"\n placeholder={this.searchPlaceholder}\n size=\"s\"\n show-delete-icon=\"true\"\n aria-label={this.ariaSearchLabel}\n onKeyDown={(e) => { e.stopPropagation() }}\n onIfxInput={(event) => this.handleSearch(event.target)}\n onFocus={() => this.handleSearchFocus(true)}\n onBlur={() => this.handleSearchFocus(false)}\n ></ifx-search-field>\n </div>\n )}\n\n <div class=\"ifx-multiselect-dropdown-controls\">\n {this.showSelectAll && this.renderSelectAll()}\n {this.showExpandCollapse && !isFlatMultiselect && (\n <div class=\"expand-collapse-controls\">\n <span\n class=\"control-item\"\n role=\"button\"\n tabIndex={0}\n aria-label={this.ariaExpandAllLabel}\n onClick={(e) => { e.stopPropagation(); this.expandAll(); }}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n e.stopPropagation();\n this.expandAll();\n }\n }}\n >\n {this.expandLabel}\n </span>\n <span\n class=\"control-item\"\n role=\"button\"\n tabIndex={0}\n aria-label={this.ariaCollapseAllLabel}\n onClick={(e) => { e.stopPropagation(); this.collapseAll(); }}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n e.stopPropagation();\n this.collapseAll();\n }\n }}\n >\n {this.collapseLabel}\n </span>\n </div>\n )}\n </div>\n </div>\n )}\n\n <div class=\"ifx-multiselect-options\" role=\"listbox\" aria-multiselectable=\"true\">\n <slot />\n {this.searchTerm && this.showNoResultsMessage && this.renderNoResultsMessage()}\n </div>\n </div>\n )}\n <div class='ifx-multiselect-icon-container'>\n\n {/* Clear Button - will show only if there's a selection */}\n {hasSelections && (\n <div class={`ifx-clear-button ${!this.showClearButton ? 'hide' : ''}`}\n aria-label={this.ariaClearLabel}\n role=\"button\"\n tabIndex={0}\n onClick={this.disabled ? undefined : (e) => { e.stopPropagation(); this.clearSelection(); }}\n onKeyDown={this.disabled ? undefined : (e) => { if (e.key === 'Enter' || e.key === ' ') { e.stopPropagation(); this.clearSelection(); } }}>\n <ifx-icon icon=\"c-remove-16\" key=\"clear-icon\"></ifx-icon>\n </div>\n )}\n <div class={`icon-wrapper ${this.dropdownOpen ? 'icon-wrapper--open' : 'icon-wrapper--closed'}`}\n aria-label={this.ariaToggleLabel}\n role=\"button\"\n tabIndex={0}\n onClick={this.disabled ? undefined : (e) => { e.stopPropagation(); this.toggleDropdown(); }}\n onKeyDown={this.disabled ? undefined : (e) => { if (e.key === 'Enter' || e.key === ' ') { e.stopPropagation(); this.toggleDropdown(); } }}>\n <ifx-icon icon='chevron-down-16' key=\"chevron-icon\"></ifx-icon>\n </div>\n </div>\n\n </div>\n {\n this.internalError ?\n <div class=\"ifx-error-message-wrapper\">\n <span>{this.internalErrorMessage}</span>\n </div> : null\n }\n </div>\n );\n }\n}\n"],"version":3}
|
@@ -1,119 +0,0 @@
|
|
1
|
-
import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
|
2
|
-
import { d as defineCustomElement$1 } from './p-12e75dad.js';
|
3
|
-
|
4
|
-
const accordionItemCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.accordion-item{border-radius:3px;overflow:hidden;transition:all 0.3s;font-family:var(--ifx-font-family)}.accordion-title:focus{outline:none}.accordion-title:focus::after{content:\"\";display:block;position:absolute;top:-4px;bottom:-4px;left:-4px;right:-4px;border-radius:5px;border:2px solid #0A8276;box-sizing:border-box}.accordion-title:hover{border:1px solid #EEEDED;color:#08665C}.accordion-title{display:flex;align-items:center;position:relative;padding:12px 16px;gap:12px;color:#0A8276;background-color:#FFFFFF;border:1px solid #EEEDED;cursor:pointer;margin:4px}.accordion-caption{font-weight:600;font-size:1.125rem}.accordion-content{gap:8px;max-height:0;overflow:hidden;transition:max-height 0.3s ease-in-out;line-height:24px;font-size:1rem;font-weight:400}.inner-content{background-color:#FFFFFF;padding:24px;word-wrap:break-word;overflow-wrap:anywhere;align-self:stretch;}.accordion-icon{font-weight:bold;display:flex;transition:transform 0.3s}.accordion-icon:hover{color:#08665C}.accordion-item.open .accordion-icon{transform:rotate(-180deg)}";
|
5
|
-
const IfxAccordionItemStyle0 = accordionItemCss;
|
6
|
-
|
7
|
-
const IfxAccordionItem = /*@__PURE__*/ proxyCustomElement(class IfxAccordionItem extends H {
|
8
|
-
constructor() {
|
9
|
-
super();
|
10
|
-
this.__registerHost();
|
11
|
-
this.__attachShadow();
|
12
|
-
this.ifxOpen = createEvent(this, "ifxOpen", 7);
|
13
|
-
this.ifxClose = createEvent(this, "ifxClose", 7);
|
14
|
-
this.open = false;
|
15
|
-
this.AriaLevel = 3;
|
16
|
-
this.internalOpen = false;
|
17
|
-
}
|
18
|
-
componentWillLoad() {
|
19
|
-
this.internalOpen = this.open;
|
20
|
-
}
|
21
|
-
componentDidLoad() {
|
22
|
-
this.openAccordionItem();
|
23
|
-
}
|
24
|
-
componentDidUpdate() {
|
25
|
-
this.openAccordionItem();
|
26
|
-
}
|
27
|
-
openChanged(newValue) {
|
28
|
-
this.internalOpen = newValue;
|
29
|
-
}
|
30
|
-
toggleOpen() {
|
31
|
-
this.internalOpen = !this.internalOpen;
|
32
|
-
this.open = this.internalOpen;
|
33
|
-
if (this.internalOpen) {
|
34
|
-
this.ifxOpen.emit({ isOpen: this.internalOpen });
|
35
|
-
}
|
36
|
-
else {
|
37
|
-
this.ifxClose.emit({ isClosed: !this.internalOpen });
|
38
|
-
}
|
39
|
-
}
|
40
|
-
openAccordionItem() {
|
41
|
-
if (this.internalOpen) {
|
42
|
-
this.contentEl.style.maxHeight = `${this.contentEl.scrollHeight}px`;
|
43
|
-
}
|
44
|
-
else {
|
45
|
-
this.contentEl.style.maxHeight = '0';
|
46
|
-
}
|
47
|
-
}
|
48
|
-
handleSlotChange(e) {
|
49
|
-
const slotElement = e.target;
|
50
|
-
const nodes = slotElement.assignedNodes();
|
51
|
-
if (nodes.length > 0) {
|
52
|
-
nodes.forEach(node => {
|
53
|
-
const observer = new MutationObserver((mutationsList, _) => {
|
54
|
-
for (let mutation of mutationsList) {
|
55
|
-
if (mutation.type === 'childList') {
|
56
|
-
if (this.internalOpen) {
|
57
|
-
this.openAccordionItem();
|
58
|
-
}
|
59
|
-
}
|
60
|
-
}
|
61
|
-
});
|
62
|
-
observer.observe(node, { attributes: true, childList: true, subtree: true });
|
63
|
-
});
|
64
|
-
}
|
65
|
-
if (this.internalOpen) {
|
66
|
-
this.openAccordionItem();
|
67
|
-
}
|
68
|
-
}
|
69
|
-
handleKeydown(ev) {
|
70
|
-
const path = ev.composedPath();
|
71
|
-
if (!path.includes(this.titleEl)) {
|
72
|
-
return;
|
73
|
-
}
|
74
|
-
switch (ev.key) {
|
75
|
-
case 'Enter': // fallthrough
|
76
|
-
case ' ': // space
|
77
|
-
ev.preventDefault();
|
78
|
-
this.toggleOpen();
|
79
|
-
break;
|
80
|
-
}
|
81
|
-
}
|
82
|
-
render() {
|
83
|
-
return (h("div", { key: '7d6ed35b5c84e3dbfe0cc42f74408ab4655a61d2', class: `accordion-item ${this.internalOpen ? 'open' : ''}` }, h("div", { key: '19350af96518b086d24cfb653ba8c41ce9a8d4e8', role: "button", "aria-expanded": this.internalOpen, "aria-controls": "accordion-content", class: "accordion-title", onClick: () => this.toggleOpen(), tabindex: '0', ref: (el) => (this.titleEl = el) }, h("span", { key: '56d40596ed604a5c24274dbde190802dd000e801', "aria-hidden": "true", role: "heading", "aria-level": String(this.AriaLevel), class: "accordion-icon" }, h("ifx-icon", { key: 'c93ace2e23cc1b9d5e50f8ea3e6a4e3b6c65e811', icon: "chevron-down-16" })), h("span", { key: '9ac2410b6c4e9f9918ec7ca7370470c744a2cf6b', id: "accordion-caption", class: "accordion-caption" }, this.caption)), h("div", { key: 'a8a9058e232dcaae9aaa0ebf43a4f3fba958136a', id: "accordion-content", class: "accordion-content", ref: (el) => (this.contentEl = el), role: "region", "aria-labelledby": "accordion-caption" }, h("div", { key: '81c6d61ccae983dae7ffeff557fa7e51fd10ab77', class: "inner-content" }, h("slot", { key: '54ddfcf9375576b2118822057f17ddd765e2ca47', onSlotchange: (e) => this.handleSlotChange(e) })))));
|
84
|
-
}
|
85
|
-
get el() { return this; }
|
86
|
-
static get watchers() { return {
|
87
|
-
"open": ["openChanged"]
|
88
|
-
}; }
|
89
|
-
static get style() { return IfxAccordionItemStyle0; }
|
90
|
-
}, [1, "ifx-accordion-item", {
|
91
|
-
"caption": [1],
|
92
|
-
"open": [1028],
|
93
|
-
"AriaLevel": [2, "aria-level"],
|
94
|
-
"internalOpen": [32]
|
95
|
-
}, [[0, "keydown", "handleKeydown"]], {
|
96
|
-
"open": ["openChanged"]
|
97
|
-
}]);
|
98
|
-
function defineCustomElement() {
|
99
|
-
if (typeof customElements === "undefined") {
|
100
|
-
return;
|
101
|
-
}
|
102
|
-
const components = ["ifx-accordion-item", "ifx-icon"];
|
103
|
-
components.forEach(tagName => { switch (tagName) {
|
104
|
-
case "ifx-accordion-item":
|
105
|
-
if (!customElements.get(tagName)) {
|
106
|
-
customElements.define(tagName, IfxAccordionItem);
|
107
|
-
}
|
108
|
-
break;
|
109
|
-
case "ifx-icon":
|
110
|
-
if (!customElements.get(tagName)) {
|
111
|
-
defineCustomElement$1();
|
112
|
-
}
|
113
|
-
break;
|
114
|
-
} });
|
115
|
-
}
|
116
|
-
|
117
|
-
export { IfxAccordionItem as I, defineCustomElement as d };
|
118
|
-
|
119
|
-
//# sourceMappingURL=p-4cf462ca.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"file":"p-4cf462ca.js","mappings":"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","names":[],"sources":["src/components/accordion/accordionItem.scss?tag=ifx-accordion-item&encapsulation=shadow","src/components/accordion/accordionItem.tsx"],"sourcesContent":["// ifxAccordionItem.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n\n.accordion-item {\n border-radius: 3px;\n overflow: hidden;\n transition: all 0.3s;\n font-family: var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\n\n}\n\n.accordion-title:focus {\n outline: none;\n}\n\n// workaround to add corner radius to outline\n.accordion-title:focus::after {\n content: '';\n display: block;\n position: absolute;\n top: -4px;\n bottom: -4px;\n left: -4px;\n right: -4px;\n border-radius: 5px;\n border: 2px solid tokens.$ifxColorOcean500;\n box-sizing: border-box;\n}\n\n.accordion-title:hover {\n border: 1px solid tokens.$ifxColorEngineering200;\n color: tokens.$ifxColorOcean600;\n}\n\n.accordion-title {\n display: flex;\n align-items: center;\n position: relative;\n padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\n gap: tokens.$ifxSpace150;\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering200;\n cursor: pointer;\n margin: 4px;\n}\n\n.accordion-caption {\n font-weight: tokens.$ifxFontWeightSemibold;\n font-size: tokens.$ifxFontSizeL;\n}\n\n.accordion-content {\n gap: tokens.$ifxSpace100;\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.3s ease-in-out;\n line-height: 24px;\n font-size: tokens.$ifxFontSizeM;\n font-weight: 400;\n}\n\n.inner-content {\n background-color: tokens.$ifxColorBaseWhite;\n padding: tokens.$ifxSpace300;\n // white-space: pre-wrap;\n /* wraps text at spaces and within words */\n word-wrap: break-word;\n /* breaks text within a word if necessary */\n overflow-wrap: anywhere;\n align-self: stretch;\n\n /* breaks text at arbitrary points when needed */\n}\n\n.accordion-icon {\n font-weight: bold;\n display: flex;\n transition: transform 0.3s;\n\n &:hover {\n color: tokens.$ifxColorOcean600;\n\n }\n}\n\n\n\n.accordion-item.open .accordion-icon {\n transform: rotate(-180deg);\n}","//ifxAccordionItem\nimport { Component, Prop, h, State, Event, EventEmitter, Watch, Listen, Element } from '@stencil/core';\n\n@Component({\n tag: 'ifx-accordion-item',\n styleUrl: 'accordionItem.scss',\n shadow: true,\n})\nexport class IfxAccordionItem {\n @Element() el;\n @Prop() caption: string;\n @Prop({\n mutable: true,\n }) open: boolean = false;\n @Prop() AriaLevel = 3;\n @State() internalOpen: boolean = false;\n @Event() ifxOpen: EventEmitter;\n @Event() ifxClose: EventEmitter;\n private contentEl!: HTMLElement;\n private titleEl!: HTMLElement;\n\n\n componentWillLoad() {\n this.internalOpen = this.open;\n }\n\n componentDidLoad() {\n this.openAccordionItem()\n }\n\n componentDidUpdate() {\n this.openAccordionItem()\n }\n\n\n\n @Watch('open')\n openChanged(newValue: boolean) {\n this.internalOpen = newValue;\n }\n\n toggleOpen() {\n this.internalOpen = !this.internalOpen;\n this.open = this.internalOpen;\n\n if (this.internalOpen) {\n this.ifxOpen.emit({ isOpen: this.internalOpen });\n } else {\n this.ifxClose.emit({ isClosed: !this.internalOpen });\n }\n }\n\n openAccordionItem() {\n if (this.internalOpen) {\n this.contentEl.style.maxHeight = `${this.contentEl.scrollHeight}px`;\n } else {\n this.contentEl.style.maxHeight = '0';\n }\n }\n\n handleSlotChange(e) {\n const slotElement = e.target;\n const nodes = slotElement.assignedNodes();\n \n if(nodes.length > 0) {\n nodes.forEach(node => {\n const observer = new MutationObserver((mutationsList, _) => {\n for(let mutation of mutationsList) {\n if (mutation.type === 'childList') {\n if (this.internalOpen) {\n this.openAccordionItem();\n }\n }\n }\n });\n observer.observe(node, { attributes: true, childList: true, subtree: true });\n });\n }\n\n if (this.internalOpen) {\n this.openAccordionItem();\n }\n }\n\n \n\n @Listen('keydown')\n handleKeydown(ev: KeyboardEvent) {\n const path = ev.composedPath();\n\n if(!path.includes(this.titleEl)) { \n return;\n }\n\n switch (ev.key) {\n case 'Enter': // fallthrough\n case ' ': // space\n ev.preventDefault();\n this.toggleOpen();\n break;\n }\n }\n\n\n render() {\n return (\n <div class={`accordion-item ${this.internalOpen ? 'open' : ''}`}>\n <div role=\"button\" aria-expanded={this.internalOpen} aria-controls=\"accordion-content\" class=\"accordion-title\" onClick={() => this.toggleOpen()} tabindex='0' ref={(el) => (this.titleEl = el as HTMLElement)}>\n <span aria-hidden=\"true\" role=\"heading\" aria-level={String(this.AriaLevel) as string} class=\"accordion-icon\">\n <ifx-icon icon=\"chevron-down-16\"/>\n </span>\n <span id=\"accordion-caption\" class=\"accordion-caption\">{this.caption}</span>\n </div>\n <div id=\"accordion-content\" class=\"accordion-content\" ref={(el) => (this.contentEl = el as HTMLElement)} role=\"region\" aria-labelledby=\"accordion-caption\">\n <div class=\"inner-content\">\n <slot onSlotchange={(e) => this.handleSlotChange(e)} />\n </div>\n </div>\n </div>\n );\n }\n}"],"version":3}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["multiselectCss","IfxMultiselectStyle0","debounce","func","wait","timeout","executedFunction","args","later","clearTimeout","setTimeout","Multiselect","constructor","hostRef","this","disabled","error","errorMessage","label","placeholder","showSearch","showSelectAll","showClearButton","showExpandCollapse","noResultsMessage","showNoResultsMessage","searchPlaceholder","selectAllLabel","expandLabel","collapseLabel","ariaMultiSelectLabel","ariaMultiSelectLabelledBy","ariaMultiSelectDescribedBy","ariaSearchLabel","ariaClearLabel","ariaToggleLabel","ariaSelectAllLabel","ariaExpandAllLabel","ariaCollapseAllLabel","internalError","persistentSelectedOptions","dropdownOpen","searchTerm","handleSearch","targetElement","value","toLowerCase","isSearchActive","wrapper","el","shadowRoot","querySelector","classList","remove","searchField","searchFieldHasFocus","matches","add","optionsContainer","requestAnimationFrame","allOptions","querySelectorAll","forEach","option","searchEvent","CustomEvent","detail","isActive","dispatchEvent","visibleCount","style","window","getComputedStyle","rect","getBoundingClientRect","display","visibility","opacity","height","handleDocumentClick","event","path","composedPath","includes","dropdownElement","document","removeEventListener","resetSearch","ifxOpen","emit","parseChildOptions","options","childElements","Array","from","children","child","index","tagName","parseOptionElement","push","element","getAttribute","selected","hasAttribute","indeterminate","nestedOptions","filter","map","childIndex","opt","length","loadInitialOptions","internalErrorMessage","initiallySelected","collectSelectedOptions","initiallySelectedNotInState","init","some","selectedOptions","concat","collectLeafOptions","existingOption","leafOptions","handleSearchFocus","hasFocus","positionDropdown","wrapperRect","_a","spaceBelow","innerHeight","bottom","spaceAbove","top","dropdownFlipped","updateSlotBasedSelections","emitEvent","allOptionElements","selectedLeafOptions","optionEl","instance","hasChildren","ifxSelect","updateInitialParentStates","optionsByDepth","depth","parseInt","item","sort","a","b","updateParentState","parentInstance","directChildren","selectedCount","indeterminateCount","totalCount","componentDidLoad","addEventListener","componentWillLoad","updateInternalError","updateInternalErrorMessage","onSelectionChange","newValue","_","formData","FormData","append","name","internals","setFormValue","collapseAll","isExpanded","expandAll","selectAll","clearSelection","toggleDropdown","handleWrapperClick","currentTarget","target","handleKeyDown","code","preventDefault","closest","focusFirstOption","firstOption","labelElement","focus","renderSelectAll","allSelected","toggleSelectAll","stopPropagation","h","class","id","checked","size","onClick","onKeyDown","e","key","renderNoResultsMessage","render","selectedOptionsLabels","optionElement","textContent","trim","join","hasSelections","isFlatMultiselect","every","ref","role","undefined","tabindex","onIfxInput","onFocus","onBlur","tabIndex","icon","multiselectOptionCss","IfxMultiselectOptionStyle0","MultiselectOption","isSearchDisabled","handleSearchFilter","updateSearchClasses","handleCheckboxClick","newSelectedState","selectAllChildren","expandAllChildren","updateParentStates","notifyMultiselect","handleHeaderClick","handleClick","calculateDepth","setAttribute","toString","hasSelectedChildren","hasAnySelectedChildren","disconnectedCallback","optionDiv","removeHighlighting","getTextContent","matchesSearch","hasMatchingParent","hasMatchingChildren","highlightSearchTerm","slotElement","originalText","searchTermLower","originalTextLower","searchIndex","indexOf","beforeMatch","substring","matchText","afterMatch","highlightedContent","createElement","className","appendChild","createTextNode","boldElement","highlightedElement","removeChild","removeAttribute","text","childNodes","node","nodeType","Node","TEXT_NODE","childOptions","childInstance","childText","childMatches","grandChildrenMatch","parent","parentElement","parentText","type","toggleExpansion","updateEvent","bubbles","call","expanded","siblings","sibling","hasSelected","hasSelectedDescendants","checkForSelectedDescendants","nestedChild","isSelected","hasSelectedNested","parentMultiselect","basePadding","additionalPadding","totalPadding","optionItemStyle","paddingLeft","Host"],"sources":["src/components/select/multi-select/multiselect.scss?tag=ifx-multiselect&encapsulation=shadow","src/components/select/multi-select/multiselect.tsx","src/components/select/multi-select/multiselect-option.scss?tag=ifx-multiselect-option&encapsulation=shadow","src/components/select/multi-select/multiselect-option.tsx"],"sourcesContent":["// @import '~choices.js/public/assets/styles/choices.css';\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.ifx-multiselect-container {\n position: relative;\n box-sizing: border-box;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n &:hover {\n cursor: pointer;\n }\n\n .ifx-label-wrapper {\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n white-space: pre-wrap;\n word-wrap: break-word;\n overflow-wrap: anywhere;\n max-width: 100%;\n }\n\n .ifx-error-message-wrapper {\n color: #CD002F;\n font-size: tokens.$ifxFontSizeXs;\n line-height: tokens.$ifxLineHeightXs;\n white-space: pre-wrap;\n word-wrap: break-word;\n overflow-wrap: anywhere;\n max-width: 100%;\n }\n\n .ifx-multiselect-wrapper {\n background-color: tokens.$ifxColorBaseWhite;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n border: 1px solid tokens.$ifxColorEngineering400;\n border-radius: tokens.$ifxBorderRadius12;\n width: 100%;\n font-weight: 400;\n font-style: normal;\n height: 40px;\n line-height: 24px;\n padding: 8px 16px;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n\n &:focus-visible {\n outline: none;\n }\n\n &:focus-visible:not(.active):not(:active) {\n outline: none;\n\n &::before {\n content: '';\n position: absolute;\n width: calc(100% + 4px);\n height: calc(100% + 4px);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border: 2px solid tokens.$ifxColorOcean500;\n border-radius: 2px;\n\n }\n }\n\n &.disabled {\n background: tokens.$ifxColorEngineering200;\n color: #575352;\n border-color: #575352;\n cursor: default;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n }\n\n &.error {\n border-color: #CD002F;\n }\n\n &:hover:not(.focus, :focus) {\n border-color: tokens.$ifxColorEngineering500;\n }\n\n &.active {\n border-color: tokens.$ifxColorOcean500 !important; // Active border color\n\n & .icon-wrapper-up {\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: tokens.$ifxSpace100;\n }\n\n & .icon-wrapper-down {\n display: none\n }\n }\n\n\n & .icon-wrapper-up {\n display: none;\n }\n\n & .icon-wrapper-down {\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: tokens.$ifxSpace100;\n }\n\n &.is-flipped {\n .ifx-multiselect-dropdown-menu {\n top: auto;\n bottom: 100%;\n }\n }\n }\n\n .ifx-multiselect-input {\n flex-grow: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n\n &.placeholder {\n opacity: 0.5;\n }\n\n }\n\n\n .ifx-multiselect-icon-container {\n margin-left: auto;\n display: flex;\n align-items: center;\n gap: tokens.$ifxSpace100;\n\n .ifx-multiselect-icon-container {\n display: flex;\n }\n\n .icon-wrapper {\n display: flex;\n align-items: center;\n transition: transform 0.2s ease-in-out;\n }\n\n .icon-wrapper--open {\n transform: rotate(180deg);\n }\n }\n\n .ifx-clear-button {\n display: flex;\n align-items: center;\n\n &.hide {\n display: none;\n }\n }\n\n .ifx-multiselect-dropdown-menu {\n box-sizing: border-box;\n position: absolute;\n top: 100%;\n left: 0;\n width: 100%;\n margin-top: tokens.$ifxSpace50;\n border: 1px solid tokens.$ifxColorEngineering200;\n background-color: #fff;\n box-shadow: 0px 6px 9px 0px rgba(29, 29, 29, 0.10);\n max-height: 300px;\n z-index: 1000;\n display: flex;\n flex-direction: column;\n }\n}\n\n.ifx-multiselect-dropdown-functions {\n padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\n border-bottom: 1px solid tokens.$ifxColorEngineering200;\n flex-shrink: 0;\n}\n\n.ifx-multiselect-dropdown-search {\n margin-bottom: tokens.$ifxSpace150;\n}\n\n.ifx-multiselect-dropdown-controls {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: tokens.$ifxSpace100;\n\n .select-all-wrapper {\n display: flex;\n }\n\n .expand-collapse-controls {\n display: flex;\n gap: tokens.$ifxSpace150;\n }\n\n .control-item {\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n\n &:focus {\n outline: none;\n }\n\n &:focus-visible {\n outline: 2px solid tokens.$ifxColorOcean500;\n outline-offset: 2px;\n border-radius: tokens.$ifxBorderRadius12;\n }\n }\n}\n\n.ifx-multiselect-options {\n flex: 1;\n overflow-y: auto;\n padding-top: tokens.$ifxSpace150;\n padding-bottom: tokens.$ifxSpace150;\n\n &.show-no-results {\n .ifx-multiselect-no-results {\n display: block;\n }\n }\n}\n\n.ifx-multiselect-no-results {\n padding-left: tokens.$ifxSpace200;\n padding-right: tokens.$ifxSpace200;\n display: none;\n}\n\n","import { Component, Prop, State, Event, EventEmitter, Element, AttachInternals, h, Watch, Method } from '@stencil/core';\nimport { Option } from './interfaces';\n\nfunction debounce(func, wait) {\n let timeout;\n return function executedFunction(...args) {\n const later = () => {\n clearTimeout(timeout);\n func(...args);\n };\n clearTimeout(timeout);\n timeout = setTimeout(later, wait);\n };\n}\n\n@Component({\n tag: 'ifx-multiselect',\n styleUrl: 'multiselect.scss',\n shadow: true,\n formAssociated: true\n})\n\nexport class Multiselect {\n @Prop() name: string;\n @Prop() disabled: boolean = false;\n @Prop() error: boolean = false;\n @Prop() errorMessage: string = \"Error\";\n @Prop() label: string = \"\";\n @Prop() placeholder: string = \"\";\n @Prop() showSearch: boolean = true;\n @Prop() showSelectAll: boolean = true;\n @Prop() showClearButton: boolean = true;\n @Prop() showExpandCollapse: boolean = true;\n @Prop() noResultsMessage: string = \"No results found.\";\n @Prop() showNoResultsMessage: boolean = true;\n @Prop() searchPlaceholder: string = \"Search\";\n @Prop() selectAllLabel: string = \"Select all\";\n @Prop() expandLabel: string = \"Expand\";\n @Prop() collapseLabel: string = \"Collapse\";\n @Prop() ariaMultiSelectLabel: string = \"Multi-select dropdown\";\n @Prop() ariaMultiSelectLabelledBy: string = \"\";\n @Prop() ariaMultiSelectDescribedBy: string = \"\";\n @Prop() ariaSearchLabel: string = \"Search options\";\n @Prop() ariaClearLabel: string = \"Clear all selections\";\n @Prop() ariaToggleLabel: string = \"Toggle dropdown\";\n @Prop() ariaSelectAllLabel: string = \"Select all options\";\n @Prop() ariaExpandAllLabel: string = \"Expand all categories\";\n @Prop() ariaCollapseAllLabel: string = \"Collapse all categories\";\n\n @State() internalError: boolean = false;\n @State() internalErrorMessage: string;\n @State() persistentSelectedOptions: Option[] = [];\n @State() dropdownOpen = false;\n @State() dropdownFlipped: boolean;\n @State() searchTerm: string = '';\n\n @Event() ifxSelect: EventEmitter;\n @Event() ifxOpen: EventEmitter;\n\n @Element() el: HTMLElement;\n dropdownElement!: HTMLElement;\n\n @AttachInternals() internals: ElementInternals;\n private parseChildOptions(): Option[] {\n const options: Option[] = [];\n const childElements = Array.from(this.el.children);\n\n childElements.forEach((child, index) => {\n if (child.tagName === 'IFX-MULTISELECT-OPTION') {\n const option = this.parseOptionElement(child as HTMLElement, index);\n if (option) {\n options.push(option);\n }\n }\n });\n\n return options;\n }\n\n private parseOptionElement(element: HTMLElement, index: number): Option | null {\n const value = element.getAttribute('value') || `option-${index}`;\n const selected = element.hasAttribute('selected');\n const disabled = element.hasAttribute('disabled');\n const indeterminate = element.hasAttribute('indeterminate');\n\n const option: Option = {\n value,\n selected,\n disabled,\n indeterminate\n };\n\n const nestedOptions = Array.from(element.children)\n .filter(child => child.tagName === 'IFX-MULTISELECT-OPTION')\n .map((child, childIndex) => this.parseOptionElement(child as HTMLElement, childIndex))\n .filter(opt => opt !== null) as Option[];\n\n if (nestedOptions.length > 0) {\n option.children = nestedOptions;\n }\n\n return option;\n }\n\n loadInitialOptions() {\n this.internalError = this.error;\n this.internalErrorMessage = this.errorMessage;\n\n const allOptions = this.parseChildOptions();\n const initiallySelected = this.collectSelectedOptions(allOptions);\n const initiallySelectedNotInState = initiallySelected.filter(init =>\n !this.persistentSelectedOptions.some(opt => opt.value == init.value)\n );\n this.persistentSelectedOptions = [...this.persistentSelectedOptions, ...initiallySelectedNotInState];\n }\n\n private collectSelectedOptions(options: Option[]): Option[] {\n let selectedOptions: Option[] = [];\n\n for (const option of options) {\n if (option.selected) {\n if (option.children && option.children.length > 0) {\n selectedOptions = selectedOptions.concat(this.collectLeafOptions(option.children));\n } else {\n if (!selectedOptions.some(existingOption => existingOption.value === option.value)) {\n selectedOptions.push(option);\n }\n }\n } else {\n if (option.children && option.children.length > 0) {\n selectedOptions = selectedOptions.concat(this.collectSelectedOptions(option.children));\n }\n }\n }\n\n return selectedOptions;\n }\n\n private collectLeafOptions(children: Option[]): Option[] {\n let leafOptions = [];\n\n for (const child of children) {\n if (child.children && child.children.length > 0) {\n leafOptions = leafOptions.concat(this.collectLeafOptions(child.children));\n } else {\n leafOptions.push(child);\n }\n }\n return leafOptions;\n }\n\n handleSearch = debounce((targetElement: HTMLInputElement) => {\n const searchTerm = targetElement.value.toLowerCase();\n const isSearchActive = searchTerm !== '';\n\n this.searchTerm = searchTerm;\n\n const wrapper = this.el.shadowRoot.querySelector('.ifx-multiselect-wrapper');\n if (wrapper) {\n if (isSearchActive) {\n wrapper.classList.remove('active');\n } else {\n const searchField = this.el.shadowRoot.querySelector('ifx-search-field');\n const searchFieldHasFocus = searchField && searchField.matches(':focus-within');\n if (!searchFieldHasFocus) {\n wrapper.classList.add('active');\n }\n }\n }\n\n const optionsContainer = this.el.shadowRoot.querySelector('.ifx-multiselect-options');\n if (optionsContainer) {\n if (isSearchActive) {\n optionsContainer.classList.add('has-search-filter');\n } else {\n optionsContainer.classList.remove('has-search-filter');\n }\n }\n\n requestAnimationFrame(() => {\n const allOptions = this.el.querySelectorAll('ifx-multiselect-option');\n allOptions.forEach(option => {\n const searchEvent = new CustomEvent('ifx-search-filter', {\n detail: { searchTerm, isActive: isSearchActive }\n });\n option.dispatchEvent(searchEvent);\n });\n\n if (isSearchActive) {\n setTimeout(() => {\n const allOptions = this.el.querySelectorAll('ifx-multiselect-option');\n let visibleCount = 0;\n\n allOptions.forEach(option => {\n const style = window.getComputedStyle(option);\n const rect = option.getBoundingClientRect();\n\n if (style.display !== 'none' &&\n style.visibility !== 'hidden' &&\n style.opacity !== '0' &&\n rect.height > 0) {\n visibleCount++;\n }\n });\n\n const optionsContainer = this.el.shadowRoot.querySelector('.ifx-multiselect-options');\n if (optionsContainer) {\n if (visibleCount === 0) {\n optionsContainer.classList.add('show-no-results');\n } else {\n optionsContainer.classList.remove('show-no-results');\n }\n }\n }, 200);\n } else {\n const optionsContainer = this.el.shadowRoot.querySelector('.ifx-multiselect-options');\n if (optionsContainer) {\n optionsContainer.classList.remove('show-no-results');\n }\n }\n });\n }, 150);\n\n private handleSearchFocus(hasFocus: boolean) {\n const wrapper = this.el.shadowRoot.querySelector('.ifx-multiselect-wrapper');\n if (wrapper) {\n if (hasFocus || this.searchTerm !== '') {\n wrapper.classList.remove('active');\n } else {\n wrapper.classList.add('active');\n }\n }\n }\n\n positionDropdown() {\n const wrapperRect = this.el.shadowRoot.querySelector('.ifx-multiselect-wrapper')?.getBoundingClientRect();\n const spaceBelow = window.innerHeight - wrapperRect.bottom;\n const spaceAbove = wrapperRect.top;\n\n if ((spaceAbove > spaceBelow && wrapperRect.height > spaceBelow) || (wrapperRect.bottom > window.innerHeight)) {\n this.dropdownFlipped = true;\n } else {\n this.dropdownFlipped = false;\n }\n }\n\n public updateSlotBasedSelections(emitEvent: boolean = false) {\n const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');\n const selectedLeafOptions: Option[] = [];\n\n allOptionElements.forEach((optionEl: any) => {\n const instance = optionEl['__stencil_instance'];\n if (instance && instance.selected && !instance.hasChildren) {\n selectedLeafOptions.push({\n value: instance.value,\n selected: true,\n disabled: instance.disabled\n });\n }\n });\n\n this.persistentSelectedOptions = selectedLeafOptions;\n\n if (emitEvent) {\n this.ifxSelect.emit(this.persistentSelectedOptions);\n }\n }\n\n private updateInitialParentStates() {\n const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');\n const optionsByDepth = Array.from(allOptionElements)\n .map(el => ({\n element: el,\n instance: (el as any)['__stencil_instance'],\n depth: parseInt(el.getAttribute('data-level') || '0')\n }))\n .filter(item => item.instance)\n .sort((a, b) => b.depth - a.depth);\n\n optionsByDepth.forEach(({ instance }) => {\n if (instance.hasChildren) {\n this.updateParentState(instance);\n }\n });\n }\n\n private updateParentState(parentInstance: any) {\n const directChildren = Array.from(parentInstance.el.children as HTMLCollection)\n .filter((child: Element) => child.tagName === 'IFX-MULTISELECT-OPTION')\n .map(child => (child as any)['__stencil_instance'])\n .filter(instance => instance !== null);\n\n const selectedCount = directChildren.filter(child => child.selected).length;\n const indeterminateCount = directChildren.filter(child => child.indeterminate).length;\n const totalCount = directChildren.length;\n\n if (selectedCount === totalCount && indeterminateCount === 0) {\n parentInstance.selected = true;\n parentInstance.indeterminate = false;\n } else if (selectedCount === 0 && indeterminateCount === 0) {\n parentInstance.selected = false;\n parentInstance.indeterminate = false;\n } else {\n parentInstance.selected = false;\n parentInstance.indeterminate = true;\n }\n }\n\n componentDidLoad() {\n setTimeout(() => {\n this.positionDropdown();\n }, 500);\n\n this.el.addEventListener('ifx-option-changed', () => {\n requestAnimationFrame(() => {\n this.updateSlotBasedSelections(true);\n });\n });\n\n setTimeout(() => {\n this.updateSlotBasedSelections(false);\n this.updateInitialParentStates();\n }, 100);\n }\n\n componentWillLoad() {\n this.loadInitialOptions();\n }\n\n @Watch('error')\n updateInternalError() {\n this.internalError = this.error;\n }\n\n @Watch('errorMessage')\n updateInternalErrorMessage() {\n this.internalErrorMessage = this.errorMessage;\n }\n\n @Watch('persistentSelectedOptions')\n onSelectionChange(newValue: Option[], _: Option[]) {\n const formData = new FormData();\n newValue.forEach(option => formData.append(this.name, option.value));\n this.internals.setFormValue(formData);\n }\n collapseAll() {\n const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');\n allOptionElements.forEach((optionEl: any) => {\n const instance = optionEl['__stencil_instance'];\n if (instance && instance.hasChildren) {\n instance.isExpanded = false;\n }\n });\n }\n\n expandAll() {\n const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');\n allOptionElements.forEach((optionEl: any) => {\n const instance = optionEl['__stencil_instance'];\n if (instance && instance.hasChildren) {\n instance.isExpanded = true;\n }\n });\n }\n\n selectAll() {\n this.resetSearch();\n\n const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');\n\n allOptionElements.forEach((optionEl: any) => {\n const instance = optionEl['__stencil_instance'];\n if (instance) {\n if (instance.hasChildren) {\n instance.isExpanded = true;\n } else {\n instance.selected = true;\n }\n }\n });\n\n setTimeout(() => {\n this.updateInitialParentStates();\n this.updateSlotBasedSelections(false);\n this.ifxSelect.emit(this.persistentSelectedOptions);\n }, 0);\n }\n\n @Method()\n async clearSelection() {\n const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');\n allOptionElements.forEach((optionEl: any) => {\n const instance = optionEl['__stencil_instance'];\n if (instance) {\n instance.selected = false;\n instance.indeterminate = false;\n if (instance.hasChildren) {\n instance.isExpanded = false;\n }\n }\n });\n\n this.persistentSelectedOptions = [];\n\n setTimeout(() => {\n this.updateSlotBasedSelections(false);\n this.ifxSelect.emit(this.persistentSelectedOptions);\n }, 0);\n }\n\n handleDocumentClick = (event: Event) => {\n const path = event.composedPath();\n if (!path.includes(this.dropdownElement)) {\n this.dropdownOpen = false;\n document.removeEventListener('click', this.handleDocumentClick);\n this.resetSearch();\n this.ifxOpen.emit(this.dropdownOpen);\n }\n }\n\n toggleDropdown() {\n this.dropdownOpen = !this.dropdownOpen;\n setTimeout(() => {\n if (this.dropdownOpen) {\n document.addEventListener('click', this.handleDocumentClick);\n } else {\n this.resetSearch();\n }\n this.ifxOpen.emit(this.dropdownOpen);\n }, 0);\n }\n\n private resetSearch() {\n this.searchTerm = '';\n\n const searchField = this.el.shadowRoot.querySelector('ifx-search-field') as any;\n if (searchField) {\n searchField.value = '';\n }\n\n const optionsContainer = this.el.shadowRoot.querySelector('.ifx-multiselect-options');\n if (optionsContainer) {\n optionsContainer.classList.remove('has-search-filter');\n }\n\n const allOptions = this.el.querySelectorAll('ifx-multiselect-option');\n allOptions.forEach(option => {\n const searchEvent = new CustomEvent('ifx-search-filter', {\n detail: { searchTerm: '', isActive: false }\n });\n option.dispatchEvent(searchEvent);\n });\n }\n\n handleWrapperClick(event: MouseEvent) {\n this.positionDropdown();\n\n if (event.currentTarget === event.target) {\n this.toggleDropdown();\n }\n }\n\n handleKeyDown(event: KeyboardEvent) {\n if (this.disabled) return;\n\n // If dropdown is closed, only allow opening\n if (!this.dropdownOpen) {\n switch (event.code) {\n case 'Enter':\n case 'Space':\n case 'ArrowDown':\n event.preventDefault();\n this.toggleDropdown();\n break;\n }\n return;\n }\n\n // Dropdown is open - handle navigation and controls\n switch (event.code) {\n case 'Escape':\n event.preventDefault();\n this.toggleDropdown();\n break;\n case 'Enter':\n case 'Space':\n // Don't close dropdown when pressing space/enter in controls area\n const target = event.target as HTMLElement;\n if (!target.closest('.ifx-multiselect-dropdown-functions')) {\n event.preventDefault();\n this.toggleDropdown();\n }\n break;\n case 'ArrowDown':\n case 'ArrowUp':\n // Focus first/last option for navigation\n event.preventDefault();\n this.focusFirstOption();\n break;\n }\n }\n\n private focusFirstOption() {\n const firstOption = this.el.querySelector('ifx-multiselect-option:not(.search-hidden)');\n if (firstOption) {\n const labelElement = firstOption.shadowRoot?.querySelector('.option-label') as HTMLElement;\n labelElement?.focus();\n }\n }\n\n private renderSelectAll() {\n const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');\n const leafOptions = Array.from(allOptionElements).filter((el: any) => !el.hasChildren);\n const selectedLeafOptions = Array.from(allOptionElements).filter((el: any) => !el.hasChildren && el.selected);\n\n const allSelected = leafOptions.length > 0 && selectedLeafOptions.length === leafOptions.length;\n\n const toggleSelectAll = (event?: Event) => {\n if (event) {\n event.preventDefault();\n event.stopPropagation();\n }\n\n if (allSelected) {\n this.clearSelection();\n } else {\n this.selectAll();\n }\n };\n\n return (\n <div class=\"select-all-wrapper\">\n <ifx-checkbox\n id='selectAll'\n checked={allSelected}\n size=\"s\"\n aria-label={this.ariaSelectAllLabel}\n onClick={toggleSelectAll}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n e.stopPropagation();\n toggleSelectAll(e);\n }\n }}\n >\n {this.selectAllLabel}\n </ifx-checkbox>\n </div>\n );\n }\n\n private renderNoResultsMessage() {\n return (\n <div class=\"ifx-multiselect-no-results\">\n <div class=\"no-results-content\">\n <span class=\"no-results-text\">{this.noResultsMessage}</span>\n </div>\n </div>\n );\n }\n\n render() {\n const selectedOptionsLabels = this.persistentSelectedOptions\n .map((option) => {\n const optionElement = this.el.querySelector(`ifx-multiselect-option[value=\"${option.value}\"]`);\n return optionElement?.textContent?.trim() || option.value;\n })\n .join(', ');\n\n const hasSelections = this.persistentSelectedOptions.length > 0;\n\n let isFlatMultiselect = false;\n const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');\n if (allOptionElements.length > 0) {\n isFlatMultiselect = Array.from(allOptionElements).every(option => option.children.length === 0);\n }\n\n return (\n <div class={`ifx-multiselect-container`} ref={el => this.dropdownElement = el as HTMLElement}>\n {\n this.label ?\n <div class=\"ifx-label-wrapper\">\n <span>{this.label}</span>\n </div> : null\n }\n <div class={`ifx-multiselect-wrapper\n ${this.dropdownOpen ? 'active' : ''}\n ${this.dropdownFlipped ? 'is-flipped' : ''}\n ${this.internalError ? 'error' : \"\"}\n ${this.disabled ? 'disabled' : \"\"}`}\n role=\"combobox\"\n aria-label={this.ariaMultiSelectLabel}\n aria-labelledby={this.ariaMultiSelectLabelledBy || undefined}\n aria-describedby={this.ariaMultiSelectDescribedBy || undefined}\n aria-expanded={this.dropdownOpen}\n aria-haspopup=\"listbox\"\n aria-disabled={this.disabled}\n tabindex=\"0\"\n onClick={this.disabled ? undefined : (event) => this.handleWrapperClick(event)}\n onKeyDown={this.disabled ? undefined : (event) => this.handleKeyDown(event)} >\n <div class={`ifx-multiselect-input\n ${hasSelections ? '' : 'placeholder'}\n `}\n onClick={this.disabled ? undefined : () => this.toggleDropdown()}\n >\n {hasSelections ? selectedOptionsLabels : this.placeholder}\n </div>\n {this.dropdownOpen && (\n <div class=\"ifx-multiselect-dropdown-menu\">\n\n {(this.showSearch || this.showSelectAll || (this.showExpandCollapse && !isFlatMultiselect)) && (\n <div class=\"ifx-multiselect-dropdown-functions\" onClick={(e) => e.stopPropagation()}>\n {this.showSearch && (\n <div class=\"ifx-multiselect-dropdown-search\">\n <ifx-search-field\n class=\"search-input\"\n placeholder={this.searchPlaceholder}\n size=\"s\"\n show-delete-icon=\"true\"\n aria-label={this.ariaSearchLabel}\n onKeyDown={(e) => { e.stopPropagation() }}\n onIfxInput={(event) => this.handleSearch(event.target)}\n onFocus={() => this.handleSearchFocus(true)}\n onBlur={() => this.handleSearchFocus(false)}\n ></ifx-search-field>\n </div>\n )}\n\n <div class=\"ifx-multiselect-dropdown-controls\">\n {this.showSelectAll && this.renderSelectAll()}\n {this.showExpandCollapse && !isFlatMultiselect && (\n <div class=\"expand-collapse-controls\">\n <span\n class=\"control-item\"\n role=\"button\"\n tabIndex={0}\n aria-label={this.ariaExpandAllLabel}\n onClick={(e) => { e.stopPropagation(); this.expandAll(); }}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n e.stopPropagation();\n this.expandAll();\n }\n }}\n >\n {this.expandLabel}\n </span>\n <span\n class=\"control-item\"\n role=\"button\"\n tabIndex={0}\n aria-label={this.ariaCollapseAllLabel}\n onClick={(e) => { e.stopPropagation(); this.collapseAll(); }}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n e.stopPropagation();\n this.collapseAll();\n }\n }}\n >\n {this.collapseLabel}\n </span>\n </div>\n )}\n </div>\n </div>\n )}\n\n <div class=\"ifx-multiselect-options\" role=\"listbox\" aria-multiselectable=\"true\">\n <slot />\n {this.searchTerm && this.showNoResultsMessage && this.renderNoResultsMessage()}\n </div>\n </div>\n )}\n <div class='ifx-multiselect-icon-container'>\n\n {/* Clear Button - will show only if there's a selection */}\n {hasSelections && (\n <div class={`ifx-clear-button ${!this.showClearButton ? 'hide' : ''}`}\n aria-label={this.ariaClearLabel}\n role=\"button\"\n tabIndex={0}\n onClick={this.disabled ? undefined : (e) => { e.stopPropagation(); this.clearSelection(); }}\n onKeyDown={this.disabled ? undefined : (e) => { if (e.key === 'Enter' || e.key === ' ') { e.stopPropagation(); this.clearSelection(); } }}>\n <ifx-icon icon=\"c-remove-16\" key=\"clear-icon\"></ifx-icon>\n </div>\n )}\n <div class={`icon-wrapper ${this.dropdownOpen ? 'icon-wrapper--open' : 'icon-wrapper--closed'}`}\n aria-label={this.ariaToggleLabel}\n role=\"button\"\n tabIndex={0}\n onClick={this.disabled ? undefined : (e) => { e.stopPropagation(); this.toggleDropdown(); }}\n onKeyDown={this.disabled ? undefined : (e) => { if (e.key === 'Enter' || e.key === ' ') { e.stopPropagation(); this.toggleDropdown(); } }}>\n <ifx-icon icon='chevron-down-16' key=\"chevron-icon\"></ifx-icon>\n </div>\n </div>\n\n </div>\n {\n this.internalError ?\n <div class=\"ifx-error-message-wrapper\">\n <span>{this.internalErrorMessage}</span>\n </div> : null\n }\n </div>\n );\n }\n}\n","@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n display: block;\n width: 100%;\n}\n\n.option {\n display: flex;\n flex-direction: column;\n position: relative;\n cursor: pointer;\n list-style: none;\n\n &.option--expanded {\n position: relative;\n }\n\n &.option--has-children {\n position: relative;\n\n .option-item > .chevron-wrapper {\n display: flex;\n }\n }\n\n &--disabled {\n cursor: not-allowed;\n pointer-events: none;\n color: tokens.$ifxColorEngineering300;\n }\n\n &--selected {\n // Additional styles for selected state if needed\n // .option-item {\n // background: red;\n // }\n }\n\n &.search-hidden {\n display: none !important;\n }\n\n &.search-match {\n .option-item {\n .option-label {\n .search-highlight {\n font-weight: bold;\n // color: tokens.$ifxColorOcean400;\n }\n }\n }\n }\n}\n\n.option-item {\n display: flex;\n flex-direction: row;\n align-items: center;\n white-space: nowrap;\n min-height: tokens.$ifxSize250;\n padding: tokens.$ifxSize50 tokens.$ifxSpace200;\n background-color: tokens.$ifxColorBaseWhite;\n transition: background-color 0.2s ease-in-out;\n\n &:hover {\n background-color: tokens.$ifxColorEngineering100;\n }\n\n .option--disabled & {\n &:hover {\n background-color: transparent;\n }\n }\n}\n\n.option-children {\n display: block;\n}\n\n.chevron-wrapper {\n display: none;\n align-items: center;\n justify-content: center;\n margin-right: tokens.$ifxSpace100;\n width: tokens.$ifxSize250;\n height: tokens.$ifxSize250;\n flex-shrink: 0;\n\n &:focus {\n outline: none;\n }\n\n &:focus-visible {\n outline: 2px solid tokens.$ifxColorOcean500;\n outline-offset: 2px;\n border-radius: tokens.$ifxBorderRadius12;\n }\n\n .option--has-children & {\n display: flex;\n }\n\n .chevron {\n transition: transform 0.2s ease-in-out;\n color: tokens.$ifxColorEngineering600;\n\n &.chevron--expanded {\n transform: rotate(90deg);\n }\n\n &.chevron--collapsed {\n transform: rotate(0deg);\n }\n }\n}\n\n.checkbox-wrapper {\n display: flex;\n align-items: center;\n margin-right: tokens.$ifxSpace100;\n flex-shrink: 0;\n}\n\n.option-label {\n flex-grow: 1;\n display: flex;\n align-items: center;\n cursor: pointer;\n padding: tokens.$ifxSpace25 0;\n font-size: tokens.$ifxFontSizeS;\n\n &:focus {\n outline: none;\n }\n\n &:focus-visible {\n outline: 2px solid tokens.$ifxColorOcean500;\n outline-offset: 2px;\n border-radius: tokens.$ifxBorderRadius12;\n }\n\n .option--disabled & {\n cursor: not-allowed;\n color: tokens.$ifxColorEngineering300;\n }\n}\n","import { Component, Prop, Element, h, Host, State, Listen } from '@stencil/core';\n\n@Component({\n tag: 'ifx-multiselect-option',\n styleUrl: 'multiselect-option.scss',\n shadow: true,\n})\nexport class MultiselectOption {\n @Element() el: HTMLElement;\n\n @Prop() value: string;\n @Prop({ reflect: true, mutable: true }) selected: boolean = false;\n @Prop({ reflect: true, mutable: true }) disabled: boolean = false;\n @Prop({ reflect: true, mutable: true }) indeterminate: boolean = false;\n\n @State() private isExpanded: boolean = false;\n @State() private hasChildren: boolean = false;\n @State() private depth: number = 0;\n @State() private searchTerm: string = '';\n @State() private isSearchActive: boolean = false;\n @State() private isSearchDisabled: boolean = false;\n\n componentWillLoad() {\n this.hasChildren = this.el.children.length > 0;\n this.depth = this.calculateDepth();\n\n this.el.setAttribute('data-level', this.depth.toString());\n\n if (this.hasChildren) {\n const hasSelectedChildren = this.hasAnySelectedChildren();\n if (hasSelectedChildren) {\n this.isExpanded = true;\n }\n }\n }\n\n componentDidLoad() {\n (this.el as any)['__stencil_instance'] = this;\n this.notifyMultiselect();\n this.el.addEventListener('ifx-search-filter', this.handleSearchFilter);\n }\n\n disconnectedCallback() {\n this.el.removeEventListener('ifx-search-filter', this.handleSearchFilter);\n }\n\n private handleSearchFilter = (event: CustomEvent) => {\n const { searchTerm, isActive } = event.detail;\n this.searchTerm = searchTerm.toLowerCase();\n this.isSearchActive = isActive;\n\n requestAnimationFrame(() => {\n this.updateSearchClasses();\n });\n }\n\n private updateSearchClasses() {\n const optionDiv = this.el.shadowRoot?.querySelector('.option');\n if (!optionDiv) return;\n\n if (!this.isSearchActive) {\n optionDiv.classList.remove('search-hidden', 'search-parent', 'search-match');\n this.removeHighlighting();\n this.isSearchDisabled = false;\n return;\n }\n\n const textContent = this.getTextContent().toLowerCase();\n const matchesSearch = textContent.includes(this.searchTerm);\n const hasMatchingParent = this.hasMatchingParent();\n\n requestAnimationFrame(() => {\n const hasMatchingChildren = this.hasMatchingChildren();\n\n optionDiv.classList.remove('search-hidden', 'search-parent', 'search-match');\n this.isSearchDisabled = false;\n\n if (matchesSearch && !this.hasChildren) {\n optionDiv.classList.add('search-match');\n this.highlightSearchTerm();\n } else if (matchesSearch && this.hasChildren) {\n optionDiv.classList.add('search-match');\n this.highlightSearchTerm();\n this.isExpanded = true;\n } else if (!matchesSearch && this.hasChildren && hasMatchingChildren) {\n optionDiv.classList.add('search-parent');\n this.removeHighlighting();\n this.isExpanded = true;\n this.isSearchDisabled = true;\n } else if (hasMatchingParent) {\n optionDiv.classList.add('search-match');\n this.removeHighlighting();\n } else {\n optionDiv.classList.add('search-hidden');\n this.removeHighlighting();\n }\n });\n }\n\n private highlightSearchTerm() {\n if (!this.searchTerm) return;\n\n const labelElement = this.el.shadowRoot?.querySelector('.option-label');\n if (!labelElement) return;\n\n const slotElement = labelElement.querySelector('slot');\n if (!slotElement) return;\n\n this.removeHighlighting();\n\n const originalText = this.getTextContent();\n const searchTermLower = this.searchTerm.toLowerCase();\n const originalTextLower = originalText.toLowerCase();\n\n if (!originalTextLower.includes(searchTermLower)) return;\n\n const searchIndex = originalTextLower.indexOf(searchTermLower);\n\n if (searchIndex === -1) return;\n\n const beforeMatch = originalText.substring(0, searchIndex);\n const matchText = originalText.substring(searchIndex, searchIndex + searchTermLower.length);\n const afterMatch = originalText.substring(searchIndex + searchTermLower.length);\n\n const highlightedContent = document.createElement('span');\n highlightedContent.className = 'highlighted-text';\n\n if (beforeMatch) {\n highlightedContent.appendChild(document.createTextNode(beforeMatch));\n }\n\n const boldElement = document.createElement('strong');\n boldElement.className = 'search-highlight';\n boldElement.textContent = matchText;\n highlightedContent.appendChild(boldElement);\n\n if (afterMatch) {\n highlightedContent.appendChild(document.createTextNode(afterMatch));\n }\n\n labelElement.setAttribute('data-original-content', 'true');\n slotElement.style.display = 'none';\n labelElement.appendChild(highlightedContent);\n }\n\n private removeHighlighting() {\n const labelElement = this.el.shadowRoot?.querySelector('.option-label');\n if (!labelElement) return;\n\n const slotElement = labelElement.querySelector('slot');\n const highlightedElement = labelElement.querySelector('.highlighted-text');\n\n if (highlightedElement) {\n labelElement.removeChild(highlightedElement);\n }\n\n if (slotElement) {\n slotElement.style.display = '';\n }\n\n labelElement.removeAttribute('data-original-content');\n }\n\n private getTextContent(): string {\n let text = '';\n Array.from(this.el.childNodes).forEach(node => {\n if (node.nodeType === Node.TEXT_NODE) {\n text += node.textContent?.trim() || '';\n }\n });\n return text || this.value || '';\n }\n\n private hasMatchingChildren(): boolean {\n if (!this.hasChildren) return false;\n\n const childOptions = Array.from(this.el.children)\n .filter(child => child.tagName === 'IFX-MULTISELECT-OPTION') as HTMLElement[];\n\n return childOptions.some(child => {\n const childInstance = (child as any)['__stencil_instance'];\n if (!childInstance) return false;\n\n const childText = childInstance.getTextContent().toLowerCase();\n const childMatches = childText.includes(this.searchTerm);\n const grandChildrenMatch = childInstance.hasMatchingChildren();\n\n return childMatches || grandChildrenMatch;\n });\n }\n\n private hasMatchingParent(): boolean {\n let parent = this.el.parentElement;\n while (parent && parent.tagName === 'IFX-MULTISELECT-OPTION') {\n const parentInstance = (parent as any)['__stencil_instance'];\n if (parentInstance) {\n const parentText = parentInstance.getTextContent().toLowerCase();\n if (parentText.includes(this.searchTerm)) {\n return true;\n }\n }\n parent = parent.parentElement;\n }\n return false;\n }\n\n private calculateDepth(): number {\n let depth = 0;\n let parent = this.el.parentElement;\n while (parent && parent.tagName !== 'IFX-MULTISELECT') {\n if (parent.tagName === 'IFX-MULTISELECT-OPTION') {\n depth++;\n }\n parent = parent.parentElement;\n }\n return depth;\n }\n\n @Listen('click')\n handleClick(event: Event) {\n if (this.disabled || (this.isSearchActive && this.isSearchDisabled)) return;\n\n event.stopPropagation();\n\n if (event.type === 'click' && (event.target as HTMLElement).closest('.chevron-wrapper')) {\n this.toggleExpansion();\n return;\n }\n\n let newSelectedState: boolean;\n\n if (this.indeterminate) {\n newSelectedState = true;\n } else {\n newSelectedState = !this.selected;\n }\n\n this.selected = newSelectedState;\n this.indeterminate = false;\n\n if (this.hasChildren) {\n this.isExpanded = newSelectedState;\n\n requestAnimationFrame(() => {\n this.selectAllChildren(newSelectedState);\n this.expandAllChildren(newSelectedState);\n });\n }\n\n this.updateParentStates();\n this.notifyMultiselect();\n }\n\n @Listen('keydown')\n handleKeyDown(event: KeyboardEvent) {\n if (this.disabled || (this.isSearchActive && this.isSearchDisabled)) return;\n\n const target = event.target as HTMLElement;\n\n if (target.closest('.chevron-wrapper') || target.closest('.checkbox-wrapper')) {\n return;\n }\n\n if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') {\n event.stopPropagation();\n }\n\n if (event.key === 'ArrowRight' && this.hasChildren) {\n this.isExpanded = true;\n }\n\n if (event.key === 'ArrowLeft' && this.hasChildren) {\n this.isExpanded = false;\n }\n }\n\n private notifyMultiselect() {\n const updateEvent = new CustomEvent('ifx-option-changed', {\n bubbles: true,\n detail: {\n value: this.value,\n selected: this.selected,\n indeterminate: this.indeterminate\n }\n });\n this.el.dispatchEvent(updateEvent);\n }\n\n private selectAllChildren(selected: boolean) {\n const directChildren = Array.from(this.el.children)\n .filter(child => child.tagName === 'IFX-MULTISELECT-OPTION') as any[];\n\n directChildren.forEach((child: any) => {\n const childInstance = child['__stencil_instance'];\n if (childInstance) {\n childInstance.selected = selected;\n childInstance.indeterminate = false;\n\n if (childInstance.hasChildren) {\n childInstance.isExpanded = selected;\n childInstance.selectAllChildren(selected);\n }\n childInstance.notifyMultiselect?.();\n }\n });\n }\n\n private expandAllChildren(expanded: boolean) {\n const directChildren = Array.from(this.el.children)\n .filter(child => child.tagName === 'IFX-MULTISELECT-OPTION') as any[];\n\n directChildren.forEach((child: any) => {\n const childInstance = child['__stencil_instance'];\n if (childInstance && childInstance.hasChildren) {\n childInstance.isExpanded = expanded;\n childInstance.expandAllChildren(expanded);\n }\n });\n }\n\n private updateParentStates() {\n let parent = this.el.parentElement;\n while (parent && parent.tagName === 'IFX-MULTISELECT-OPTION') {\n const parentInstance = (parent as any)['__stencil_instance'];\n if (!parentInstance) {\n parent = parent.parentElement;\n continue;\n }\n\n const siblings = Array.from(parent.children)\n .filter(child => child.tagName === 'IFX-MULTISELECT-OPTION')\n .map(child => (child as any)['__stencil_instance'])\n .filter(instance => instance !== null);\n\n const selectedCount = siblings.filter(sibling => sibling.selected).length;\n const indeterminateCount = siblings.filter(sibling => sibling.indeterminate).length;\n const totalCount = siblings.length;\n\n if (selectedCount === totalCount && indeterminateCount === 0) {\n parentInstance.selected = true;\n parentInstance.indeterminate = false;\n } else if (selectedCount === 0 && indeterminateCount === 0) {\n parentInstance.selected = false;\n parentInstance.indeterminate = false;\n } else {\n parentInstance.selected = false;\n parentInstance.indeterminate = true;\n }\n\n parentInstance.notifyMultiselect?.();\n parent = parent.parentElement;\n }\n }\n\n private toggleExpansion() {\n this.isExpanded = !this.isExpanded;\n }\n\n private handleCheckboxClick = (event: Event) => {\n if (this.disabled || (this.isSearchActive && this.isSearchDisabled)) return;\n\n event.stopPropagation();\n\n let newSelectedState: boolean;\n\n if (this.indeterminate) {\n newSelectedState = true;\n } else {\n newSelectedState = !this.selected;\n }\n\n this.selected = newSelectedState;\n this.indeterminate = false;\n\n if (this.hasChildren) {\n this.isExpanded = newSelectedState;\n\n requestAnimationFrame(() => {\n this.selectAllChildren(newSelectedState);\n this.expandAllChildren(newSelectedState);\n });\n }\n\n this.updateParentStates();\n this.notifyMultiselect();\n }\n\n private handleHeaderClick = (event: Event) => {\n event.stopPropagation();\n if (!this.disabled && !(this.isSearchActive && this.isSearchDisabled)) {\n this.handleClick(event);\n }\n }\n\n private hasAnySelectedChildren(): boolean {\n const childOptions = Array.from(this.el.children)\n .filter(child => child.tagName === 'IFX-MULTISELECT-OPTION') as HTMLElement[];\n\n return childOptions.some(child => {\n const hasSelected = child.hasAttribute('selected');\n const hasSelectedDescendants = this.checkForSelectedDescendants(child);\n\n return hasSelected || hasSelectedDescendants;\n });\n }\n\n private checkForSelectedDescendants(element: HTMLElement): boolean {\n const nestedOptions = Array.from(element.children)\n .filter(child => child.tagName === 'IFX-MULTISELECT-OPTION') as HTMLElement[];\n\n return nestedOptions.some(nestedChild => {\n const isSelected = nestedChild.hasAttribute('selected');\n const hasSelectedNested = this.checkForSelectedDescendants(nestedChild);\n\n return isSelected || hasSelectedNested;\n });\n }\n\n render() {\n let isFlatMultiselect = false;\n const parentMultiselect = this.el.closest('ifx-multiselect');\n if (parentMultiselect) {\n const allOptions = Array.from(parentMultiselect.querySelectorAll('ifx-multiselect-option'));\n isFlatMultiselect = allOptions.every(option => option.children.length === 0);\n }\n\n const basePadding = this.depth * 28 + 16;\n const additionalPadding = this.hasChildren ? 0 : 28;\n let totalPadding = basePadding + additionalPadding;\n\n const optionItemStyle = isFlatMultiselect ? undefined : { paddingLeft: `${totalPadding}px` };\n\n return (\n <Host>\n <div\n class={{\n 'option': true,\n 'option--has-children': this.hasChildren,\n 'option--expanded': this.isExpanded,\n 'option--disabled': this.disabled,\n 'option--selected': this.selected,\n }}\n role=\"option\"\n aria-expanded={this.hasChildren ? (this.isExpanded ? 'true' : 'false') : undefined}\n aria-selected={this.selected ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : 'false'}\n data-level={this.depth}\n data-value={this.value}\n >\n <div\n class=\"option-item\"\n style={optionItemStyle}\n >\n <div\n class=\"chevron-wrapper\"\n tabIndex={this.hasChildren ? 0 : -1}\n role={this.hasChildren ? \"button\" : undefined}\n aria-label={this.hasChildren ? (this.isExpanded ? \"Collapse\" : \"Expand\") : undefined}\n onClick={(e) => { e.stopPropagation(); this.toggleExpansion(); }}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n e.stopPropagation();\n this.toggleExpansion();\n }\n }}\n >\n {this.hasChildren && (\n <ifx-icon\n class={`chevron ${this.isExpanded ? 'chevron--expanded' : 'chevron--collapsed'}`}\n icon=\"chevron-right-16\"\n />\n )}\n </div>\n\n <div class=\"checkbox-wrapper\" onClick={(e) => e.stopPropagation()}>\n <ifx-checkbox\n size='s'\n checked={(this.isSearchActive && this.isSearchDisabled) ? false : (this.indeterminate ? false : this.selected)}\n indeterminate={(this.isSearchActive && this.isSearchDisabled) ? false : this.indeterminate}\n onClick={this.handleCheckboxClick}\n disabled={this.disabled || (this.isSearchActive && this.isSearchDisabled)}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n e.stopPropagation();\n this.handleCheckboxClick(e);\n }\n }}\n />\n </div>\n\n <div\n class=\"option-label\"\n onClick={this.handleHeaderClick}\n tabIndex={-1}\n >\n <slot/>\n </div>\n </div>\n\n {this.isExpanded && <div class=\"option-children\"><slot name=\"children\"/></div>}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as o,h as e,g as i,c as t}from"./p-b7a462e5.js";const a=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:block}.accordion-wrapper{display:flex;flex-direction:column;gap:8px;font-family:var(--ifx-font-family)}';const n=a;const c=class{constructor(e){o(this,e);this.autoCollapse=false}async onItemOpen(o){if(this.autoCollapse){const e=Array.from(this.el.querySelectorAll("ifx-accordion-item"));for(const i of e){const e=i;if(e!==o.target&&await e.open){e.open=false}}}}render(){return e("div",{key:"663e6aac2f3002d3898856b854dbfd96d9519a68",class:"accordion-wrapper"},e("slot",{key:"0f54044bc1e0d2860ccd3096ee2711eb0a1cb927"}))}static get delegatesFocus(){return true}get el(){return i(this)}};c.style=n;const s=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}.accordion-item{border-radius:3px;overflow:hidden;transition:all 0.3s;font-family:var(--ifx-font-family)}.accordion-title:focus{outline:none}.accordion-title:focus::after{content:"";display:block;position:absolute;top:-4px;bottom:-4px;left:-4px;right:-4px;border-radius:5px;border:2px solid #0A8276;box-sizing:border-box}.accordion-title:hover{border:1px solid #EEEDED;color:#08665C}.accordion-title{display:flex;align-items:center;position:relative;padding:12px 16px;gap:12px;color:#0A8276;background-color:#FFFFFF;border:1px solid #EEEDED;cursor:pointer;margin:4px}.accordion-caption{font-weight:600;font-size:1.125rem}.accordion-content{gap:8px;max-height:0;overflow:hidden;transition:max-height 0.3s ease-in-out;line-height:24px;font-size:1rem;font-weight:400}.inner-content{background-color:#FFFFFF;padding:24px;word-wrap:break-word;overflow-wrap:anywhere;align-self:stretch;}.accordion-icon{font-weight:bold;display:flex;transition:transform 0.3s}.accordion-icon:hover{color:#08665C}.accordion-item.open .accordion-icon{transform:rotate(-180deg)}';const r=s;const d=class{constructor(e){o(this,e);this.ifxOpen=t(this,"ifxOpen",7);this.ifxClose=t(this,"ifxClose",7);this.open=false;this.AriaLevel=3;this.internalOpen=false}componentWillLoad(){this.internalOpen=this.open}componentDidLoad(){this.openAccordionItem()}componentDidUpdate(){this.openAccordionItem()}openChanged(o){this.internalOpen=o}toggleOpen(){this.internalOpen=!this.internalOpen;this.open=this.internalOpen;if(this.internalOpen){this.ifxOpen.emit({isOpen:this.internalOpen})}else{this.ifxClose.emit({isClosed:!this.internalOpen})}}openAccordionItem(){if(this.internalOpen){this.contentEl.style.maxHeight=`${this.contentEl.scrollHeight}px`}else{this.contentEl.style.maxHeight="0"}}handleSlotChange(o){const e=o.target;const i=e.assignedNodes();if(i.length>0){i.forEach((o=>{const e=new MutationObserver(((o,e)=>{for(let e of o){if(e.type==="childList"){if(this.internalOpen){this.openAccordionItem()}}}}));e.observe(o,{attributes:true,childList:true,subtree:true})}))}if(this.internalOpen){this.openAccordionItem()}}handleKeydown(o){const e=o.composedPath();if(!e.includes(this.titleEl)){return}switch(o.key){case"Enter":case" ":o.preventDefault();this.toggleOpen();break}}render(){return e("div",{key:"7d6ed35b5c84e3dbfe0cc42f74408ab4655a61d2",class:`accordion-item ${this.internalOpen?"open":""}`},e("div",{key:"19350af96518b086d24cfb653ba8c41ce9a8d4e8",role:"button","aria-expanded":this.internalOpen,"aria-controls":"accordion-content",class:"accordion-title",onClick:()=>this.toggleOpen(),tabindex:"0",ref:o=>this.titleEl=o},e("span",{key:"56d40596ed604a5c24274dbde190802dd000e801","aria-hidden":"true",role:"heading","aria-level":String(this.AriaLevel),class:"accordion-icon"},e("ifx-icon",{key:"c93ace2e23cc1b9d5e50f8ea3e6a4e3b6c65e811",icon:"chevron-down-16"})),e("span",{key:"9ac2410b6c4e9f9918ec7ca7370470c744a2cf6b",id:"accordion-caption",class:"accordion-caption"},this.caption)),e("div",{key:"a8a9058e232dcaae9aaa0ebf43a4f3fba958136a",id:"accordion-content",class:"accordion-content",ref:o=>this.contentEl=o,role:"region","aria-labelledby":"accordion-caption"},e("div",{key:"81c6d61ccae983dae7ffeff557fa7e51fd10ab77",class:"inner-content"},e("slot",{key:"54ddfcf9375576b2118822057f17ddd765e2ca47",onSlotchange:o=>this.handleSlotChange(o)}))))}get el(){return i(this)}static get watchers(){return{open:["openChanged"]}}};d.style=r;export{c as ifx_accordion,d as ifx_accordion_item};
|
2
|
-
//# sourceMappingURL=p-a356a82d.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["accordionCss","IfxAccordionStyle0","Accordion","constructor","hostRef","this","autoCollapse","onItemOpen","event","items","Array","from","el","querySelectorAll","item","itemElement","target","open","render","h","key","class","accordionItemCss","IfxAccordionItemStyle0","IfxAccordionItem","AriaLevel","internalOpen","componentWillLoad","componentDidLoad","openAccordionItem","componentDidUpdate","openChanged","newValue","toggleOpen","ifxOpen","emit","isOpen","ifxClose","isClosed","contentEl","style","maxHeight","scrollHeight","handleSlotChange","e","slotElement","nodes","assignedNodes","length","forEach","node","observer","MutationObserver","mutationsList","_","mutation","type","observe","attributes","childList","subtree","handleKeydown","ev","path","composedPath","includes","titleEl","preventDefault","role","onClick","tabindex","ref","String","icon","id","caption","onSlotchange"],"sources":["src/components/accordion/accordion.scss?tag=ifx-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx","src/components/accordion/accordionItem.scss?tag=ifx-accordion-item&encapsulation=shadow","src/components/accordion/accordionItem.tsx"],"sourcesContent":["// ifxAccordion.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: block;\n}\n\n.accordion-wrapper {\n display: flex;\n flex-direction: column;\n gap: tokens.$ifxSpace100;\n font-family: var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\n}","//ifxAccordion.tsx\nimport { Component, h, Listen, Element, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ifx-accordion',\n styleUrl: 'accordion.scss',\n shadow: { delegatesFocus: true },\n})\nexport class Accordion {\n @Element() el: HTMLElement;\n @Prop() autoCollapse: boolean = false;\n\n\n @Listen('ifxOpen')\n async onItemOpen(event: CustomEvent) {\n if (this.autoCollapse) {\n const items = Array.from(this.el.querySelectorAll('ifx-accordion-item'));\n for (const item of items) {\n const itemElement = item as HTMLIfxAccordionItemElement;\n if (itemElement !== event.target && (await itemElement.open)) {\n itemElement.open = false;\n }\n }\n }\n }\n\n render() {\n return (\n <div class=\"accordion-wrapper\">\n <slot />\n </div>\n );\n }\n}\n","// ifxAccordionItem.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n\n.accordion-item {\n border-radius: 3px;\n overflow: hidden;\n transition: all 0.3s;\n font-family: var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\n\n}\n\n.accordion-title:focus {\n outline: none;\n}\n\n// workaround to add corner radius to outline\n.accordion-title:focus::after {\n content: '';\n display: block;\n position: absolute;\n top: -4px;\n bottom: -4px;\n left: -4px;\n right: -4px;\n border-radius: 5px;\n border: 2px solid tokens.$ifxColorOcean500;\n box-sizing: border-box;\n}\n\n.accordion-title:hover {\n border: 1px solid tokens.$ifxColorEngineering200;\n color: tokens.$ifxColorOcean600;\n}\n\n.accordion-title {\n display: flex;\n align-items: center;\n position: relative;\n padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\n gap: tokens.$ifxSpace150;\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering200;\n cursor: pointer;\n margin: 4px;\n}\n\n.accordion-caption {\n font-weight: tokens.$ifxFontWeightSemibold;\n font-size: tokens.$ifxFontSizeL;\n}\n\n.accordion-content {\n gap: tokens.$ifxSpace100;\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.3s ease-in-out;\n line-height: 24px;\n font-size: tokens.$ifxFontSizeM;\n font-weight: 400;\n}\n\n.inner-content {\n background-color: tokens.$ifxColorBaseWhite;\n padding: tokens.$ifxSpace300;\n // white-space: pre-wrap;\n /* wraps text at spaces and within words */\n word-wrap: break-word;\n /* breaks text within a word if necessary */\n overflow-wrap: anywhere;\n align-self: stretch;\n\n /* breaks text at arbitrary points when needed */\n}\n\n.accordion-icon {\n font-weight: bold;\n display: flex;\n transition: transform 0.3s;\n\n &:hover {\n color: tokens.$ifxColorOcean600;\n\n }\n}\n\n\n\n.accordion-item.open .accordion-icon {\n transform: rotate(-180deg);\n}","//ifxAccordionItem\nimport { Component, Prop, h, State, Event, EventEmitter, Watch, Listen, Element } from '@stencil/core';\n\n@Component({\n tag: 'ifx-accordion-item',\n styleUrl: 'accordionItem.scss',\n shadow: true,\n})\nexport class IfxAccordionItem {\n @Element() el;\n @Prop() caption: string;\n @Prop({\n mutable: true,\n }) open: boolean = false;\n @Prop() AriaLevel = 3;\n @State() internalOpen: boolean = false;\n @Event() ifxOpen: EventEmitter;\n @Event() ifxClose: EventEmitter;\n private contentEl!: HTMLElement;\n private titleEl!: HTMLElement;\n\n\n componentWillLoad() {\n this.internalOpen = this.open;\n }\n\n componentDidLoad() {\n this.openAccordionItem()\n }\n\n componentDidUpdate() {\n this.openAccordionItem()\n }\n\n\n\n @Watch('open')\n openChanged(newValue: boolean) {\n this.internalOpen = newValue;\n }\n\n toggleOpen() {\n this.internalOpen = !this.internalOpen;\n this.open = this.internalOpen;\n\n if (this.internalOpen) {\n this.ifxOpen.emit({ isOpen: this.internalOpen });\n } else {\n this.ifxClose.emit({ isClosed: !this.internalOpen });\n }\n }\n\n openAccordionItem() {\n if (this.internalOpen) {\n this.contentEl.style.maxHeight = `${this.contentEl.scrollHeight}px`;\n } else {\n this.contentEl.style.maxHeight = '0';\n }\n }\n\n handleSlotChange(e) {\n const slotElement = e.target;\n const nodes = slotElement.assignedNodes();\n \n if(nodes.length > 0) {\n nodes.forEach(node => {\n const observer = new MutationObserver((mutationsList, _) => {\n for(let mutation of mutationsList) {\n if (mutation.type === 'childList') {\n if (this.internalOpen) {\n this.openAccordionItem();\n }\n }\n }\n });\n observer.observe(node, { attributes: true, childList: true, subtree: true });\n });\n }\n\n if (this.internalOpen) {\n this.openAccordionItem();\n }\n }\n\n \n\n @Listen('keydown')\n handleKeydown(ev: KeyboardEvent) {\n const path = ev.composedPath();\n\n if(!path.includes(this.titleEl)) { \n return;\n }\n\n switch (ev.key) {\n case 'Enter': // fallthrough\n case ' ': // space\n ev.preventDefault();\n this.toggleOpen();\n break;\n }\n }\n\n\n render() {\n return (\n <div class={`accordion-item ${this.internalOpen ? 'open' : ''}`}>\n <div role=\"button\" aria-expanded={this.internalOpen} aria-controls=\"accordion-content\" class=\"accordion-title\" onClick={() => this.toggleOpen()} tabindex='0' ref={(el) => (this.titleEl = el as HTMLElement)}>\n <span aria-hidden=\"true\" role=\"heading\" aria-level={String(this.AriaLevel) as string} class=\"accordion-icon\">\n <ifx-icon icon=\"chevron-down-16\"/>\n </span>\n <span id=\"accordion-caption\" class=\"accordion-caption\">{this.caption}</span>\n </div>\n <div id=\"accordion-content\" class=\"accordion-content\" ref={(el) => (this.contentEl = el as HTMLElement)} role=\"region\" aria-labelledby=\"accordion-caption\">\n <div class=\"inner-content\">\n <slot onSlotchange={(e) => this.handleSlotChange(e)} />\n </div>\n </div>\n </div>\n );\n }\n}"],"mappings":"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","ignoreList":[]}
|