@ui5/webcomponents 2.29.0-rc.0 → 2.29.0-rc.1
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/CHANGELOG.md +22 -0
- package/README.md +12 -0
- package/dist/.tsbuildinfo +1 -1
- package/dist/Carousel.d.ts +4 -1
- package/dist/Carousel.js +9 -2
- package/dist/Carousel.js.map +1 -1
- package/dist/CarouselTemplate.js +5 -5
- package/dist/CarouselTemplate.js.map +1 -1
- package/dist/ComboBox.js +1 -2
- package/dist/ComboBox.js.map +1 -1
- package/dist/ComboBoxItem.js +1 -1
- package/dist/ComboBoxItem.js.map +1 -1
- package/dist/ComboBoxItemTemplate.js +6 -1
- package/dist/ComboBoxItemTemplate.js.map +1 -1
- package/dist/ComboBoxPopoverTemplate.js +2 -3
- package/dist/ComboBoxPopoverTemplate.js.map +1 -1
- package/dist/Input.js +1 -3
- package/dist/Input.js.map +1 -1
- package/dist/ListItemTemplate.js +1 -1
- package/dist/ListItemTemplate.js.map +1 -1
- package/dist/Popup.js +3 -0
- package/dist/Popup.js.map +1 -1
- package/dist/SuggestionItem.js +1 -1
- package/dist/SuggestionItem.js.map +1 -1
- package/dist/SuggestionItemTemplate.js +6 -1
- package/dist/SuggestionItemTemplate.js.map +1 -1
- package/dist/TabContainer.d.ts +1 -1
- package/dist/Table.d.ts +2 -0
- package/dist/Table.js +2 -0
- package/dist/Table.js.map +1 -1
- package/dist/TableDragAndDrop.d.ts +3 -0
- package/dist/TableDragAndDrop.js +44 -1
- package/dist/TableDragAndDrop.js.map +1 -1
- package/dist/TableNavigation.js +1 -1
- package/dist/TableNavigation.js.map +1 -1
- package/dist/TableRow.d.ts +1 -0
- package/dist/TableRow.js +15 -4
- package/dist/TableRow.js.map +1 -1
- package/dist/Tree.js +2 -1
- package/dist/Tree.js.map +1 -1
- package/dist/css/themes/ListItem.css +1 -1
- package/dist/css/themes/OptionBase.css +1 -1
- package/dist/css/themes/TabInStrip.css +1 -1
- package/dist/custom-elements-internal.json +107 -103
- package/dist/custom-elements.json +107 -103
- package/dist/features/InputSuggestions.d.ts +0 -1
- package/dist/features/InputSuggestions.js +0 -4
- package/dist/features/InputSuggestions.js.map +1 -1
- package/dist/generated/themes/ListItem.css.d.ts +1 -1
- package/dist/generated/themes/ListItem.css.js +1 -1
- package/dist/generated/themes/ListItem.css.js.map +1 -1
- package/dist/generated/themes/OptionBase.css.d.ts +1 -1
- package/dist/generated/themes/OptionBase.css.js +1 -1
- package/dist/generated/themes/OptionBase.css.js.map +1 -1
- package/dist/generated/themes/TabInStrip.css.d.ts +1 -1
- package/dist/generated/themes/TabInStrip.css.js +1 -1
- package/dist/generated/themes/TabInStrip.css.js.map +1 -1
- package/dist/vscode.html-custom-data.json +2 -2
- package/dist/web-types.json +7 -3
- package/llms.txt +180 -0
- package/package.json +13 -10
- package/src/CarouselTemplate.tsx +3 -4
- package/src/ComboBoxItemTemplate.tsx +9 -2
- package/src/ComboBoxPopoverTemplate.tsx +2 -3
- package/src/ListItemTemplate.tsx +1 -1
- package/src/SuggestionItemTemplate.tsx +8 -1
- package/src/themes/ListItem.css +2 -1
- package/src/themes/OptionBase.css +17 -2
|
@@ -3663,6 +3663,10 @@
|
|
|
3663
3663
|
{
|
|
3664
3664
|
"description": "Used to style the content of the component",
|
|
3665
3665
|
"name": "content"
|
|
3666
|
+
},
|
|
3667
|
+
{
|
|
3668
|
+
"description": "Used to style the item of the component",
|
|
3669
|
+
"name": "item"
|
|
3666
3670
|
}
|
|
3667
3671
|
],
|
|
3668
3672
|
"slots": [
|
|
@@ -27692,7 +27696,7 @@
|
|
|
27692
27696
|
},
|
|
27693
27697
|
{
|
|
27694
27698
|
"kind": "class",
|
|
27695
|
-
"description": "### Overview\n\nThe `ui5-table` component provides a set of sophisticated features for displaying and dealing with vast amounts of data in a responsive manner.\nTo render the `ui5-table`, you need to define the columns and rows. You can use the provided `ui5-table-header-row` and `ui5-table-row` components for this purpose.\n\n### Features\n\nThe `ui5-table` can be enhanced in its functionalities by applying different features.\nFeatures can be slotted into the `features` slot, to enable them in the component.\nFeatures need to be imported separately, as they are not enabled by default.\n\nThe following features are currently available:\n\n* [TableSelectionMulti](../TableSelectionMulti) - adds multi-selection capabilities to the table\n* [TableSelectionSingle](../TableSelectionSingle) - adds single-selection capabilities to the table\n* [TableGrowing](../TableGrowing) - provides growing capabilities to load more data\n* [TableVirtualizer](../TableVirtualizer) - adds virtualization capabilities to the table\n\n### Keyboard Handling\n\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\nFurthermore, you can interact with `ui5-table` via the following keys:\n\nIf the focus is on a row, the following keyboard shortcuts are available:\n* <kbd>Down</kbd> - Navigates down\n* <kbd>Up</kbd> - Navigates up\n* <kbd>Right</kbd> - Selects the first cell of the row\n* <kbd>Space</kbd> - Toggles the selection of the row\n* <kbd>Ctrl/Cmd + A</kbd> - In multi selection mode, toggles the selection of all rows\n* <kbd>Home</kbd> - Navigates to the first row, if the focus is on the first row, navigates to the header row\n* <kbd>End</kbd> - Navigates to the last row, if the focus is on the last row, navigates to the growing button\n* <kbd>Page Up</kbd> - Navigates one page up, if the focus is on the first row, navigates to the header row\n* <kbd>Page Down</kbd> - Navigates one page down, if the focus is on the last row, navigates to the growing button\n* <kbd>F2</kbd> - Focuses the first tabbable element in the row\n* <kbd>F7</kbd> - If focus position is remembered, moves focus to the corresponding focus position row, otherwise to the first tabbable element within the row\n* <kbd>[Shift]Tab</kbd> - Move focus to the element in the tab chain outside the table\n\nIf the focus is on a cell, the following keyboard shortcuts are available:\n* <kbd>Down</kbd> - Navigates down\n* <kbd>Up</kbd> - Navigates up\n* <kbd>Right</kbd> - Navigates right\n* <kbd>Left</kbd> - Navigates left, if the focus is on the first cell of the row, the focus is moved to the row.\n* <kbd>Home</kbd> - Navigates to the first cell of the current row, if the focus is on the first cell, navigates to the corresponding row\n* <kbd>End</kbd> - Navigates to the last cell of the current row, if the focus is on the last cell, navigates to the corresponding row\n* <kbd>Page Up</kbd> - Navigates one page up while keeping the focus in same column\n* <kbd>Page Down</kbd> - Navigates one page down while keeping the focus in same column\n* <kbd>F2</kbd> - Toggles the focus between the first tabbable cell content and the cell\n* <kbd>Enter</kbd> - Focuses the first tabbable cell content\n* <kbd>F7</kbd> - If the focus is on an interactive element inside a row, moves focus to the corresponding row and remembers the focus position of the element within the row\n* <kbd>[Shift]Tab</kbd> - Move focus to the element in the tab chain outside the table\n\nIf the focus is on an interactive cell content, the following keyboard shortcuts are available:\n* <kbd>Down</kbd> - Move the focus to the interactive element in the same column of the previous row, unless the focused element prevents the default\n* <kbd>Up</kbd> - Move the focus to the interactive element in the same column of the next row, unless the focused element prevents the default\n* <kbd>[Shift]Tab</kbd> - Move the focus to the element in the tab chain\n\n### Accessibility\n\nThe `ui5-table` follows the [ARIA grid design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/).\nThis pattern enables cell-based keyboard navigation and, as explained above, we also support row-based keyboard navigation.\nSince the grid design pattern does not inherently provide row-based keyboard behavior, if the focus is on a row, not only the row information but also the corresponding column headers for each cell must be announced.\nThis can only be achieved through a custom accessibility announcement.\nTo support this, UI5 Web Components expose its own accessibility metadata via the `accessibilityInfo` property.\nThe `ui5-table` uses this information to create the required custom announcements dynamically.\nIf you include custom web components inside table cells that are not part of the standard UI5 Web Components set, their accessibility information can be provided using the `data-ui5-acc-text` attribute.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Table.js\";` (`ui5-table`)\\\n`import \"@ui5/webcomponents/dist/TableRow.js\";` (`ui5-table-row`)\\\n`import \"@ui5/webcomponents/dist/TableCell.js\";` (`ui5-table-cell`)\\\n`import \"@ui5/webcomponents/dist/TableHeaderRow.js\";` (`ui5-table-header-row`)\\\n`import \"@ui5/webcomponents/dist/TableHeaderCell.js\";` (`ui5-table-header-cell`)",
|
|
27699
|
+
"description": "### Overview\n\nThe `ui5-table` component provides a set of sophisticated features for displaying and dealing with vast amounts of data in a responsive manner.\nTo render the `ui5-table`, you need to define the columns and rows. You can use the provided `ui5-table-header-row` and `ui5-table-row` components for this purpose.\n\n### Features\n\nThe `ui5-table` can be enhanced in its functionalities by applying different features.\nFeatures can be slotted into the `features` slot, to enable them in the component.\nFeatures need to be imported separately, as they are not enabled by default.\n\nThe following features are currently available:\n\n* [TableSelectionMulti](../TableSelectionMulti) - adds multi-selection capabilities to the table\n* [TableSelectionSingle](../TableSelectionSingle) - adds single-selection capabilities to the table\n* [TableGrowing](../TableGrowing) - provides growing capabilities to load more data\n* [TableVirtualizer](../TableVirtualizer) - adds virtualization capabilities to the table\n\n### Keyboard Handling\n\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\nFurthermore, you can interact with `ui5-table` via the following keys:\n\nIf the focus is on a row, the following keyboard shortcuts are available:\n* <kbd>Down</kbd> - Navigates down\n* <kbd>Up</kbd> - Navigates up\n* <kbd>Right</kbd> - Selects the first cell of the row\n* <kbd>Space</kbd> - Toggles the selection of the row\n* <kbd>Ctrl/Cmd + A</kbd> - In multi selection mode, toggles the selection of all rows\n* <kbd>Home</kbd> - Navigates to the first row, if the focus is on the first row, navigates to the header row\n* <kbd>End</kbd> - Navigates to the last row, if the focus is on the last row, navigates to the growing button\n* <kbd>Page Up</kbd> - Navigates one page up, if the focus is on the first row, navigates to the header row\n* <kbd>Page Down</kbd> - Navigates one page down, if the focus is on the last row, navigates to the growing button\n* <kbd>F2</kbd> - Focuses the first tabbable element in the row\n* <kbd>F7</kbd> - If focus position is remembered, moves focus to the corresponding focus position row, otherwise to the first tabbable element within the row\n* <kbd>[Shift]Tab</kbd> - Move focus to the element in the tab chain outside the table\n* <kbd>Alt + Enter</kbd> - Triggers the navigation action of the row, if available\n\nIf the focus is on a cell, the following keyboard shortcuts are available:\n* <kbd>Down</kbd> - Navigates down\n* <kbd>Up</kbd> - Navigates up\n* <kbd>Right</kbd> - Navigates right\n* <kbd>Left</kbd> - Navigates left, if the focus is on the first cell of the row, the focus is moved to the row.\n* <kbd>Home</kbd> - Navigates to the first cell of the current row, if the focus is on the first cell, navigates to the corresponding row\n* <kbd>End</kbd> - Navigates to the last cell of the current row, if the focus is on the last cell, navigates to the corresponding row\n* <kbd>Page Up</kbd> - Navigates one page up while keeping the focus in same column\n* <kbd>Page Down</kbd> - Navigates one page down while keeping the focus in same column\n* <kbd>F2</kbd> - Toggles the focus between the first tabbable cell content and the cell\n* <kbd>Enter</kbd> - Focuses the first tabbable cell content\n* <kbd>F7</kbd> - If the focus is on an interactive element inside a row, moves focus to the corresponding row and remembers the focus position of the element within the row\n* <kbd>[Shift]Tab</kbd> - Move focus to the element in the tab chain outside the table\n* <kbd>Alt + Enter</kbd> - Triggers the navigation action of the row, if available\n\nIf the focus is on an interactive cell content, the following keyboard shortcuts are available:\n* <kbd>Down</kbd> - Move the focus to the interactive element in the same column of the previous row, unless the focused element prevents the default\n* <kbd>Up</kbd> - Move the focus to the interactive element in the same column of the next row, unless the focused element prevents the default\n* <kbd>[Shift]Tab</kbd> - Move the focus to the element in the tab chain\n\n### Accessibility\n\nThe `ui5-table` follows the [ARIA grid design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/).\nThis pattern enables cell-based keyboard navigation and, as explained above, we also support row-based keyboard navigation.\nSince the grid design pattern does not inherently provide row-based keyboard behavior, if the focus is on a row, not only the row information but also the corresponding column headers for each cell must be announced.\nThis can only be achieved through a custom accessibility announcement.\nTo support this, UI5 Web Components expose its own accessibility metadata via the `accessibilityInfo` property.\nThe `ui5-table` uses this information to create the required custom announcements dynamically.\nIf you include custom web components inside table cells that are not part of the standard UI5 Web Components set, their accessibility information can be provided using the `data-ui5-acc-text` attribute.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Table.js\";` (`ui5-table`)\\\n`import \"@ui5/webcomponents/dist/TableRow.js\";` (`ui5-table-row`)\\\n`import \"@ui5/webcomponents/dist/TableCell.js\";` (`ui5-table-cell`)\\\n`import \"@ui5/webcomponents/dist/TableHeaderRow.js\";` (`ui5-table-header-row`)\\\n`import \"@ui5/webcomponents/dist/TableHeaderCell.js\";` (`ui5-table-header-cell`)",
|
|
27696
27700
|
"name": "Table",
|
|
27697
27701
|
"slots": [
|
|
27698
27702
|
{
|
|
@@ -38025,108 +38029,6 @@
|
|
|
38025
38029
|
}
|
|
38026
38030
|
]
|
|
38027
38031
|
},
|
|
38028
|
-
{
|
|
38029
|
-
"kind": "javascript-module",
|
|
38030
|
-
"path": "dist/features/ColorPaletteMoreColors.js",
|
|
38031
|
-
"declarations": [],
|
|
38032
|
-
"exports": []
|
|
38033
|
-
},
|
|
38034
|
-
{
|
|
38035
|
-
"kind": "javascript-module",
|
|
38036
|
-
"path": "dist/features/ColorPaletteMoreColorsTemplate.js",
|
|
38037
|
-
"declarations": [],
|
|
38038
|
-
"exports": [
|
|
38039
|
-
{
|
|
38040
|
-
"kind": "js",
|
|
38041
|
-
"name": "default",
|
|
38042
|
-
"declaration": {
|
|
38043
|
-
"name": "ColorPaletteMoreColorsTemplate",
|
|
38044
|
-
"module": "dist/features/ColorPaletteMoreColorsTemplate.js"
|
|
38045
|
-
}
|
|
38046
|
-
}
|
|
38047
|
-
]
|
|
38048
|
-
},
|
|
38049
|
-
{
|
|
38050
|
-
"kind": "javascript-module",
|
|
38051
|
-
"path": "dist/features/ComboBoxLazyLoading.js",
|
|
38052
|
-
"declarations": [],
|
|
38053
|
-
"exports": [
|
|
38054
|
-
{
|
|
38055
|
-
"kind": "js",
|
|
38056
|
-
"name": "default",
|
|
38057
|
-
"declaration": {
|
|
38058
|
-
"name": "ComboBoxLazyLoading",
|
|
38059
|
-
"module": "dist/features/ComboBoxLazyLoading.js"
|
|
38060
|
-
}
|
|
38061
|
-
}
|
|
38062
|
-
]
|
|
38063
|
-
},
|
|
38064
|
-
{
|
|
38065
|
-
"kind": "javascript-module",
|
|
38066
|
-
"path": "dist/features/InputComposition.js",
|
|
38067
|
-
"declarations": [],
|
|
38068
|
-
"exports": [
|
|
38069
|
-
{
|
|
38070
|
-
"kind": "js",
|
|
38071
|
-
"name": "default",
|
|
38072
|
-
"declaration": {
|
|
38073
|
-
"name": "InputComposition",
|
|
38074
|
-
"module": "dist/features/InputComposition.js"
|
|
38075
|
-
}
|
|
38076
|
-
}
|
|
38077
|
-
]
|
|
38078
|
-
},
|
|
38079
|
-
{
|
|
38080
|
-
"kind": "javascript-module",
|
|
38081
|
-
"path": "dist/features/InputSuggestions.js",
|
|
38082
|
-
"declarations": [],
|
|
38083
|
-
"exports": [
|
|
38084
|
-
{
|
|
38085
|
-
"kind": "js",
|
|
38086
|
-
"name": "default",
|
|
38087
|
-
"declaration": {
|
|
38088
|
-
"name": "Suggestions",
|
|
38089
|
-
"module": "dist/features/InputSuggestions.js"
|
|
38090
|
-
}
|
|
38091
|
-
}
|
|
38092
|
-
]
|
|
38093
|
-
},
|
|
38094
|
-
{
|
|
38095
|
-
"kind": "javascript-module",
|
|
38096
|
-
"path": "dist/features/InputSuggestionsTemplate.js",
|
|
38097
|
-
"declarations": [],
|
|
38098
|
-
"exports": [
|
|
38099
|
-
{
|
|
38100
|
-
"kind": "js",
|
|
38101
|
-
"name": "default",
|
|
38102
|
-
"declaration": {
|
|
38103
|
-
"name": "InputSuggestionsTemplate",
|
|
38104
|
-
"module": "dist/features/InputSuggestionsTemplate.js"
|
|
38105
|
-
}
|
|
38106
|
-
}
|
|
38107
|
-
]
|
|
38108
|
-
},
|
|
38109
|
-
{
|
|
38110
|
-
"kind": "javascript-module",
|
|
38111
|
-
"path": "dist/features/ListItemStandardExpandableText.js",
|
|
38112
|
-
"declarations": [],
|
|
38113
|
-
"exports": []
|
|
38114
|
-
},
|
|
38115
|
-
{
|
|
38116
|
-
"kind": "javascript-module",
|
|
38117
|
-
"path": "dist/features/ListItemStandardExpandableTextTemplate.js",
|
|
38118
|
-
"declarations": [],
|
|
38119
|
-
"exports": [
|
|
38120
|
-
{
|
|
38121
|
-
"kind": "js",
|
|
38122
|
-
"name": "default",
|
|
38123
|
-
"declaration": {
|
|
38124
|
-
"name": "ListItemStandardExpandableTextTemplate",
|
|
38125
|
-
"module": "dist/features/ListItemStandardExpandableTextTemplate.js"
|
|
38126
|
-
}
|
|
38127
|
-
}
|
|
38128
|
-
]
|
|
38129
|
-
},
|
|
38130
38032
|
{
|
|
38131
38033
|
"kind": "javascript-module",
|
|
38132
38034
|
"path": "dist/dynamic-date-range-options/DateRange.js",
|
|
@@ -38514,6 +38416,108 @@
|
|
|
38514
38416
|
"declarations": [],
|
|
38515
38417
|
"exports": []
|
|
38516
38418
|
},
|
|
38419
|
+
{
|
|
38420
|
+
"kind": "javascript-module",
|
|
38421
|
+
"path": "dist/features/ColorPaletteMoreColors.js",
|
|
38422
|
+
"declarations": [],
|
|
38423
|
+
"exports": []
|
|
38424
|
+
},
|
|
38425
|
+
{
|
|
38426
|
+
"kind": "javascript-module",
|
|
38427
|
+
"path": "dist/features/ColorPaletteMoreColorsTemplate.js",
|
|
38428
|
+
"declarations": [],
|
|
38429
|
+
"exports": [
|
|
38430
|
+
{
|
|
38431
|
+
"kind": "js",
|
|
38432
|
+
"name": "default",
|
|
38433
|
+
"declaration": {
|
|
38434
|
+
"name": "ColorPaletteMoreColorsTemplate",
|
|
38435
|
+
"module": "dist/features/ColorPaletteMoreColorsTemplate.js"
|
|
38436
|
+
}
|
|
38437
|
+
}
|
|
38438
|
+
]
|
|
38439
|
+
},
|
|
38440
|
+
{
|
|
38441
|
+
"kind": "javascript-module",
|
|
38442
|
+
"path": "dist/features/ComboBoxLazyLoading.js",
|
|
38443
|
+
"declarations": [],
|
|
38444
|
+
"exports": [
|
|
38445
|
+
{
|
|
38446
|
+
"kind": "js",
|
|
38447
|
+
"name": "default",
|
|
38448
|
+
"declaration": {
|
|
38449
|
+
"name": "ComboBoxLazyLoading",
|
|
38450
|
+
"module": "dist/features/ComboBoxLazyLoading.js"
|
|
38451
|
+
}
|
|
38452
|
+
}
|
|
38453
|
+
]
|
|
38454
|
+
},
|
|
38455
|
+
{
|
|
38456
|
+
"kind": "javascript-module",
|
|
38457
|
+
"path": "dist/features/InputComposition.js",
|
|
38458
|
+
"declarations": [],
|
|
38459
|
+
"exports": [
|
|
38460
|
+
{
|
|
38461
|
+
"kind": "js",
|
|
38462
|
+
"name": "default",
|
|
38463
|
+
"declaration": {
|
|
38464
|
+
"name": "InputComposition",
|
|
38465
|
+
"module": "dist/features/InputComposition.js"
|
|
38466
|
+
}
|
|
38467
|
+
}
|
|
38468
|
+
]
|
|
38469
|
+
},
|
|
38470
|
+
{
|
|
38471
|
+
"kind": "javascript-module",
|
|
38472
|
+
"path": "dist/features/InputSuggestions.js",
|
|
38473
|
+
"declarations": [],
|
|
38474
|
+
"exports": [
|
|
38475
|
+
{
|
|
38476
|
+
"kind": "js",
|
|
38477
|
+
"name": "default",
|
|
38478
|
+
"declaration": {
|
|
38479
|
+
"name": "Suggestions",
|
|
38480
|
+
"module": "dist/features/InputSuggestions.js"
|
|
38481
|
+
}
|
|
38482
|
+
}
|
|
38483
|
+
]
|
|
38484
|
+
},
|
|
38485
|
+
{
|
|
38486
|
+
"kind": "javascript-module",
|
|
38487
|
+
"path": "dist/features/InputSuggestionsTemplate.js",
|
|
38488
|
+
"declarations": [],
|
|
38489
|
+
"exports": [
|
|
38490
|
+
{
|
|
38491
|
+
"kind": "js",
|
|
38492
|
+
"name": "default",
|
|
38493
|
+
"declaration": {
|
|
38494
|
+
"name": "InputSuggestionsTemplate",
|
|
38495
|
+
"module": "dist/features/InputSuggestionsTemplate.js"
|
|
38496
|
+
}
|
|
38497
|
+
}
|
|
38498
|
+
]
|
|
38499
|
+
},
|
|
38500
|
+
{
|
|
38501
|
+
"kind": "javascript-module",
|
|
38502
|
+
"path": "dist/features/ListItemStandardExpandableText.js",
|
|
38503
|
+
"declarations": [],
|
|
38504
|
+
"exports": []
|
|
38505
|
+
},
|
|
38506
|
+
{
|
|
38507
|
+
"kind": "javascript-module",
|
|
38508
|
+
"path": "dist/features/ListItemStandardExpandableTextTemplate.js",
|
|
38509
|
+
"declarations": [],
|
|
38510
|
+
"exports": [
|
|
38511
|
+
{
|
|
38512
|
+
"kind": "js",
|
|
38513
|
+
"name": "default",
|
|
38514
|
+
"declaration": {
|
|
38515
|
+
"name": "ListItemStandardExpandableTextTemplate",
|
|
38516
|
+
"module": "dist/features/ListItemStandardExpandableTextTemplate.js"
|
|
38517
|
+
}
|
|
38518
|
+
}
|
|
38519
|
+
]
|
|
38520
|
+
},
|
|
38517
38521
|
{
|
|
38518
38522
|
"kind": "javascript-module",
|
|
38519
38523
|
"path": "dist/form-utils/FormUtils.js",
|
|
@@ -3154,6 +3154,10 @@
|
|
|
3154
3154
|
{
|
|
3155
3155
|
"description": "Used to style the content of the component",
|
|
3156
3156
|
"name": "content"
|
|
3157
|
+
},
|
|
3158
|
+
{
|
|
3159
|
+
"description": "Used to style the item of the component",
|
|
3160
|
+
"name": "item"
|
|
3157
3161
|
}
|
|
3158
3162
|
],
|
|
3159
3163
|
"slots": [
|
|
@@ -23953,7 +23957,7 @@
|
|
|
23953
23957
|
"declarations": [
|
|
23954
23958
|
{
|
|
23955
23959
|
"kind": "class",
|
|
23956
|
-
"description": "### Overview\n\nThe `ui5-table` component provides a set of sophisticated features for displaying and dealing with vast amounts of data in a responsive manner.\nTo render the `ui5-table`, you need to define the columns and rows. You can use the provided `ui5-table-header-row` and `ui5-table-row` components for this purpose.\n\n### Features\n\nThe `ui5-table` can be enhanced in its functionalities by applying different features.\nFeatures can be slotted into the `features` slot, to enable them in the component.\nFeatures need to be imported separately, as they are not enabled by default.\n\nThe following features are currently available:\n\n* [TableSelectionMulti](../TableSelectionMulti) - adds multi-selection capabilities to the table\n* [TableSelectionSingle](../TableSelectionSingle) - adds single-selection capabilities to the table\n* [TableGrowing](../TableGrowing) - provides growing capabilities to load more data\n* [TableVirtualizer](../TableVirtualizer) - adds virtualization capabilities to the table\n\n### Keyboard Handling\n\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\nFurthermore, you can interact with `ui5-table` via the following keys:\n\nIf the focus is on a row, the following keyboard shortcuts are available:\n* <kbd>Down</kbd> - Navigates down\n* <kbd>Up</kbd> - Navigates up\n* <kbd>Right</kbd> - Selects the first cell of the row\n* <kbd>Space</kbd> - Toggles the selection of the row\n* <kbd>Ctrl/Cmd + A</kbd> - In multi selection mode, toggles the selection of all rows\n* <kbd>Home</kbd> - Navigates to the first row, if the focus is on the first row, navigates to the header row\n* <kbd>End</kbd> - Navigates to the last row, if the focus is on the last row, navigates to the growing button\n* <kbd>Page Up</kbd> - Navigates one page up, if the focus is on the first row, navigates to the header row\n* <kbd>Page Down</kbd> - Navigates one page down, if the focus is on the last row, navigates to the growing button\n* <kbd>F2</kbd> - Focuses the first tabbable element in the row\n* <kbd>F7</kbd> - If focus position is remembered, moves focus to the corresponding focus position row, otherwise to the first tabbable element within the row\n* <kbd>[Shift]Tab</kbd> - Move focus to the element in the tab chain outside the table\n\nIf the focus is on a cell, the following keyboard shortcuts are available:\n* <kbd>Down</kbd> - Navigates down\n* <kbd>Up</kbd> - Navigates up\n* <kbd>Right</kbd> - Navigates right\n* <kbd>Left</kbd> - Navigates left, if the focus is on the first cell of the row, the focus is moved to the row.\n* <kbd>Home</kbd> - Navigates to the first cell of the current row, if the focus is on the first cell, navigates to the corresponding row\n* <kbd>End</kbd> - Navigates to the last cell of the current row, if the focus is on the last cell, navigates to the corresponding row\n* <kbd>Page Up</kbd> - Navigates one page up while keeping the focus in same column\n* <kbd>Page Down</kbd> - Navigates one page down while keeping the focus in same column\n* <kbd>F2</kbd> - Toggles the focus between the first tabbable cell content and the cell\n* <kbd>Enter</kbd> - Focuses the first tabbable cell content\n* <kbd>F7</kbd> - If the focus is on an interactive element inside a row, moves focus to the corresponding row and remembers the focus position of the element within the row\n* <kbd>[Shift]Tab</kbd> - Move focus to the element in the tab chain outside the table\n\nIf the focus is on an interactive cell content, the following keyboard shortcuts are available:\n* <kbd>Down</kbd> - Move the focus to the interactive element in the same column of the previous row, unless the focused element prevents the default\n* <kbd>Up</kbd> - Move the focus to the interactive element in the same column of the next row, unless the focused element prevents the default\n* <kbd>[Shift]Tab</kbd> - Move the focus to the element in the tab chain\n\n### Accessibility\n\nThe `ui5-table` follows the [ARIA grid design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/).\nThis pattern enables cell-based keyboard navigation and, as explained above, we also support row-based keyboard navigation.\nSince the grid design pattern does not inherently provide row-based keyboard behavior, if the focus is on a row, not only the row information but also the corresponding column headers for each cell must be announced.\nThis can only be achieved through a custom accessibility announcement.\nTo support this, UI5 Web Components expose its own accessibility metadata via the `accessibilityInfo` property.\nThe `ui5-table` uses this information to create the required custom announcements dynamically.\nIf you include custom web components inside table cells that are not part of the standard UI5 Web Components set, their accessibility information can be provided using the `data-ui5-acc-text` attribute.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Table.js\";` (`ui5-table`)\\\n`import \"@ui5/webcomponents/dist/TableRow.js\";` (`ui5-table-row`)\\\n`import \"@ui5/webcomponents/dist/TableCell.js\";` (`ui5-table-cell`)\\\n`import \"@ui5/webcomponents/dist/TableHeaderRow.js\";` (`ui5-table-header-row`)\\\n`import \"@ui5/webcomponents/dist/TableHeaderCell.js\";` (`ui5-table-header-cell`)",
|
|
23960
|
+
"description": "### Overview\n\nThe `ui5-table` component provides a set of sophisticated features for displaying and dealing with vast amounts of data in a responsive manner.\nTo render the `ui5-table`, you need to define the columns and rows. You can use the provided `ui5-table-header-row` and `ui5-table-row` components for this purpose.\n\n### Features\n\nThe `ui5-table` can be enhanced in its functionalities by applying different features.\nFeatures can be slotted into the `features` slot, to enable them in the component.\nFeatures need to be imported separately, as they are not enabled by default.\n\nThe following features are currently available:\n\n* [TableSelectionMulti](../TableSelectionMulti) - adds multi-selection capabilities to the table\n* [TableSelectionSingle](../TableSelectionSingle) - adds single-selection capabilities to the table\n* [TableGrowing](../TableGrowing) - provides growing capabilities to load more data\n* [TableVirtualizer](../TableVirtualizer) - adds virtualization capabilities to the table\n\n### Keyboard Handling\n\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\nFurthermore, you can interact with `ui5-table` via the following keys:\n\nIf the focus is on a row, the following keyboard shortcuts are available:\n* <kbd>Down</kbd> - Navigates down\n* <kbd>Up</kbd> - Navigates up\n* <kbd>Right</kbd> - Selects the first cell of the row\n* <kbd>Space</kbd> - Toggles the selection of the row\n* <kbd>Ctrl/Cmd + A</kbd> - In multi selection mode, toggles the selection of all rows\n* <kbd>Home</kbd> - Navigates to the first row, if the focus is on the first row, navigates to the header row\n* <kbd>End</kbd> - Navigates to the last row, if the focus is on the last row, navigates to the growing button\n* <kbd>Page Up</kbd> - Navigates one page up, if the focus is on the first row, navigates to the header row\n* <kbd>Page Down</kbd> - Navigates one page down, if the focus is on the last row, navigates to the growing button\n* <kbd>F2</kbd> - Focuses the first tabbable element in the row\n* <kbd>F7</kbd> - If focus position is remembered, moves focus to the corresponding focus position row, otherwise to the first tabbable element within the row\n* <kbd>[Shift]Tab</kbd> - Move focus to the element in the tab chain outside the table\n* <kbd>Alt + Enter</kbd> - Triggers the navigation action of the row, if available\n\nIf the focus is on a cell, the following keyboard shortcuts are available:\n* <kbd>Down</kbd> - Navigates down\n* <kbd>Up</kbd> - Navigates up\n* <kbd>Right</kbd> - Navigates right\n* <kbd>Left</kbd> - Navigates left, if the focus is on the first cell of the row, the focus is moved to the row.\n* <kbd>Home</kbd> - Navigates to the first cell of the current row, if the focus is on the first cell, navigates to the corresponding row\n* <kbd>End</kbd> - Navigates to the last cell of the current row, if the focus is on the last cell, navigates to the corresponding row\n* <kbd>Page Up</kbd> - Navigates one page up while keeping the focus in same column\n* <kbd>Page Down</kbd> - Navigates one page down while keeping the focus in same column\n* <kbd>F2</kbd> - Toggles the focus between the first tabbable cell content and the cell\n* <kbd>Enter</kbd> - Focuses the first tabbable cell content\n* <kbd>F7</kbd> - If the focus is on an interactive element inside a row, moves focus to the corresponding row and remembers the focus position of the element within the row\n* <kbd>[Shift]Tab</kbd> - Move focus to the element in the tab chain outside the table\n* <kbd>Alt + Enter</kbd> - Triggers the navigation action of the row, if available\n\nIf the focus is on an interactive cell content, the following keyboard shortcuts are available:\n* <kbd>Down</kbd> - Move the focus to the interactive element in the same column of the previous row, unless the focused element prevents the default\n* <kbd>Up</kbd> - Move the focus to the interactive element in the same column of the next row, unless the focused element prevents the default\n* <kbd>[Shift]Tab</kbd> - Move the focus to the element in the tab chain\n\n### Accessibility\n\nThe `ui5-table` follows the [ARIA grid design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/).\nThis pattern enables cell-based keyboard navigation and, as explained above, we also support row-based keyboard navigation.\nSince the grid design pattern does not inherently provide row-based keyboard behavior, if the focus is on a row, not only the row information but also the corresponding column headers for each cell must be announced.\nThis can only be achieved through a custom accessibility announcement.\nTo support this, UI5 Web Components expose its own accessibility metadata via the `accessibilityInfo` property.\nThe `ui5-table` uses this information to create the required custom announcements dynamically.\nIf you include custom web components inside table cells that are not part of the standard UI5 Web Components set, their accessibility information can be provided using the `data-ui5-acc-text` attribute.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Table.js\";` (`ui5-table`)\\\n`import \"@ui5/webcomponents/dist/TableRow.js\";` (`ui5-table-row`)\\\n`import \"@ui5/webcomponents/dist/TableCell.js\";` (`ui5-table-cell`)\\\n`import \"@ui5/webcomponents/dist/TableHeaderRow.js\";` (`ui5-table-header-row`)\\\n`import \"@ui5/webcomponents/dist/TableHeaderCell.js\";` (`ui5-table-header-cell`)",
|
|
23957
23961
|
"name": "Table",
|
|
23958
23962
|
"slots": [
|
|
23959
23963
|
{
|
|
@@ -32971,108 +32975,6 @@
|
|
|
32971
32975
|
}
|
|
32972
32976
|
]
|
|
32973
32977
|
},
|
|
32974
|
-
{
|
|
32975
|
-
"kind": "javascript-module",
|
|
32976
|
-
"path": "dist/features/ColorPaletteMoreColors.js",
|
|
32977
|
-
"declarations": [],
|
|
32978
|
-
"exports": []
|
|
32979
|
-
},
|
|
32980
|
-
{
|
|
32981
|
-
"kind": "javascript-module",
|
|
32982
|
-
"path": "dist/features/ColorPaletteMoreColorsTemplate.js",
|
|
32983
|
-
"declarations": [],
|
|
32984
|
-
"exports": [
|
|
32985
|
-
{
|
|
32986
|
-
"kind": "js",
|
|
32987
|
-
"name": "default",
|
|
32988
|
-
"declaration": {
|
|
32989
|
-
"name": "ColorPaletteMoreColorsTemplate",
|
|
32990
|
-
"module": "dist/features/ColorPaletteMoreColorsTemplate.js"
|
|
32991
|
-
}
|
|
32992
|
-
}
|
|
32993
|
-
]
|
|
32994
|
-
},
|
|
32995
|
-
{
|
|
32996
|
-
"kind": "javascript-module",
|
|
32997
|
-
"path": "dist/features/ComboBoxLazyLoading.js",
|
|
32998
|
-
"declarations": [],
|
|
32999
|
-
"exports": [
|
|
33000
|
-
{
|
|
33001
|
-
"kind": "js",
|
|
33002
|
-
"name": "default",
|
|
33003
|
-
"declaration": {
|
|
33004
|
-
"name": "ComboBoxLazyLoading",
|
|
33005
|
-
"module": "dist/features/ComboBoxLazyLoading.js"
|
|
33006
|
-
}
|
|
33007
|
-
}
|
|
33008
|
-
]
|
|
33009
|
-
},
|
|
33010
|
-
{
|
|
33011
|
-
"kind": "javascript-module",
|
|
33012
|
-
"path": "dist/features/InputComposition.js",
|
|
33013
|
-
"declarations": [],
|
|
33014
|
-
"exports": [
|
|
33015
|
-
{
|
|
33016
|
-
"kind": "js",
|
|
33017
|
-
"name": "default",
|
|
33018
|
-
"declaration": {
|
|
33019
|
-
"name": "InputComposition",
|
|
33020
|
-
"module": "dist/features/InputComposition.js"
|
|
33021
|
-
}
|
|
33022
|
-
}
|
|
33023
|
-
]
|
|
33024
|
-
},
|
|
33025
|
-
{
|
|
33026
|
-
"kind": "javascript-module",
|
|
33027
|
-
"path": "dist/features/InputSuggestions.js",
|
|
33028
|
-
"declarations": [],
|
|
33029
|
-
"exports": [
|
|
33030
|
-
{
|
|
33031
|
-
"kind": "js",
|
|
33032
|
-
"name": "default",
|
|
33033
|
-
"declaration": {
|
|
33034
|
-
"name": "Suggestions",
|
|
33035
|
-
"module": "dist/features/InputSuggestions.js"
|
|
33036
|
-
}
|
|
33037
|
-
}
|
|
33038
|
-
]
|
|
33039
|
-
},
|
|
33040
|
-
{
|
|
33041
|
-
"kind": "javascript-module",
|
|
33042
|
-
"path": "dist/features/InputSuggestionsTemplate.js",
|
|
33043
|
-
"declarations": [],
|
|
33044
|
-
"exports": [
|
|
33045
|
-
{
|
|
33046
|
-
"kind": "js",
|
|
33047
|
-
"name": "default",
|
|
33048
|
-
"declaration": {
|
|
33049
|
-
"name": "InputSuggestionsTemplate",
|
|
33050
|
-
"module": "dist/features/InputSuggestionsTemplate.js"
|
|
33051
|
-
}
|
|
33052
|
-
}
|
|
33053
|
-
]
|
|
33054
|
-
},
|
|
33055
|
-
{
|
|
33056
|
-
"kind": "javascript-module",
|
|
33057
|
-
"path": "dist/features/ListItemStandardExpandableText.js",
|
|
33058
|
-
"declarations": [],
|
|
33059
|
-
"exports": []
|
|
33060
|
-
},
|
|
33061
|
-
{
|
|
33062
|
-
"kind": "javascript-module",
|
|
33063
|
-
"path": "dist/features/ListItemStandardExpandableTextTemplate.js",
|
|
33064
|
-
"declarations": [],
|
|
33065
|
-
"exports": [
|
|
33066
|
-
{
|
|
33067
|
-
"kind": "js",
|
|
33068
|
-
"name": "default",
|
|
33069
|
-
"declaration": {
|
|
33070
|
-
"name": "ListItemStandardExpandableTextTemplate",
|
|
33071
|
-
"module": "dist/features/ListItemStandardExpandableTextTemplate.js"
|
|
33072
|
-
}
|
|
33073
|
-
}
|
|
33074
|
-
]
|
|
33075
|
-
},
|
|
33076
32978
|
{
|
|
33077
32979
|
"kind": "javascript-module",
|
|
33078
32980
|
"path": "dist/dynamic-date-range-options/DateRange.js",
|
|
@@ -33370,6 +33272,108 @@
|
|
|
33370
33272
|
"declarations": [],
|
|
33371
33273
|
"exports": []
|
|
33372
33274
|
},
|
|
33275
|
+
{
|
|
33276
|
+
"kind": "javascript-module",
|
|
33277
|
+
"path": "dist/features/ColorPaletteMoreColors.js",
|
|
33278
|
+
"declarations": [],
|
|
33279
|
+
"exports": []
|
|
33280
|
+
},
|
|
33281
|
+
{
|
|
33282
|
+
"kind": "javascript-module",
|
|
33283
|
+
"path": "dist/features/ColorPaletteMoreColorsTemplate.js",
|
|
33284
|
+
"declarations": [],
|
|
33285
|
+
"exports": [
|
|
33286
|
+
{
|
|
33287
|
+
"kind": "js",
|
|
33288
|
+
"name": "default",
|
|
33289
|
+
"declaration": {
|
|
33290
|
+
"name": "ColorPaletteMoreColorsTemplate",
|
|
33291
|
+
"module": "dist/features/ColorPaletteMoreColorsTemplate.js"
|
|
33292
|
+
}
|
|
33293
|
+
}
|
|
33294
|
+
]
|
|
33295
|
+
},
|
|
33296
|
+
{
|
|
33297
|
+
"kind": "javascript-module",
|
|
33298
|
+
"path": "dist/features/ComboBoxLazyLoading.js",
|
|
33299
|
+
"declarations": [],
|
|
33300
|
+
"exports": [
|
|
33301
|
+
{
|
|
33302
|
+
"kind": "js",
|
|
33303
|
+
"name": "default",
|
|
33304
|
+
"declaration": {
|
|
33305
|
+
"name": "ComboBoxLazyLoading",
|
|
33306
|
+
"module": "dist/features/ComboBoxLazyLoading.js"
|
|
33307
|
+
}
|
|
33308
|
+
}
|
|
33309
|
+
]
|
|
33310
|
+
},
|
|
33311
|
+
{
|
|
33312
|
+
"kind": "javascript-module",
|
|
33313
|
+
"path": "dist/features/InputComposition.js",
|
|
33314
|
+
"declarations": [],
|
|
33315
|
+
"exports": [
|
|
33316
|
+
{
|
|
33317
|
+
"kind": "js",
|
|
33318
|
+
"name": "default",
|
|
33319
|
+
"declaration": {
|
|
33320
|
+
"name": "InputComposition",
|
|
33321
|
+
"module": "dist/features/InputComposition.js"
|
|
33322
|
+
}
|
|
33323
|
+
}
|
|
33324
|
+
]
|
|
33325
|
+
},
|
|
33326
|
+
{
|
|
33327
|
+
"kind": "javascript-module",
|
|
33328
|
+
"path": "dist/features/InputSuggestions.js",
|
|
33329
|
+
"declarations": [],
|
|
33330
|
+
"exports": [
|
|
33331
|
+
{
|
|
33332
|
+
"kind": "js",
|
|
33333
|
+
"name": "default",
|
|
33334
|
+
"declaration": {
|
|
33335
|
+
"name": "Suggestions",
|
|
33336
|
+
"module": "dist/features/InputSuggestions.js"
|
|
33337
|
+
}
|
|
33338
|
+
}
|
|
33339
|
+
]
|
|
33340
|
+
},
|
|
33341
|
+
{
|
|
33342
|
+
"kind": "javascript-module",
|
|
33343
|
+
"path": "dist/features/InputSuggestionsTemplate.js",
|
|
33344
|
+
"declarations": [],
|
|
33345
|
+
"exports": [
|
|
33346
|
+
{
|
|
33347
|
+
"kind": "js",
|
|
33348
|
+
"name": "default",
|
|
33349
|
+
"declaration": {
|
|
33350
|
+
"name": "InputSuggestionsTemplate",
|
|
33351
|
+
"module": "dist/features/InputSuggestionsTemplate.js"
|
|
33352
|
+
}
|
|
33353
|
+
}
|
|
33354
|
+
]
|
|
33355
|
+
},
|
|
33356
|
+
{
|
|
33357
|
+
"kind": "javascript-module",
|
|
33358
|
+
"path": "dist/features/ListItemStandardExpandableText.js",
|
|
33359
|
+
"declarations": [],
|
|
33360
|
+
"exports": []
|
|
33361
|
+
},
|
|
33362
|
+
{
|
|
33363
|
+
"kind": "javascript-module",
|
|
33364
|
+
"path": "dist/features/ListItemStandardExpandableTextTemplate.js",
|
|
33365
|
+
"declarations": [],
|
|
33366
|
+
"exports": [
|
|
33367
|
+
{
|
|
33368
|
+
"kind": "js",
|
|
33369
|
+
"name": "default",
|
|
33370
|
+
"declaration": {
|
|
33371
|
+
"name": "ListItemStandardExpandableTextTemplate",
|
|
33372
|
+
"module": "dist/features/ListItemStandardExpandableTextTemplate.js"
|
|
33373
|
+
}
|
|
33374
|
+
}
|
|
33375
|
+
]
|
|
33376
|
+
},
|
|
33373
33377
|
{
|
|
33374
33378
|
"kind": "javascript-module",
|
|
33375
33379
|
"path": "dist/form-utils/FormUtils.js",
|
|
@@ -90,7 +90,6 @@ declare class Suggestions {
|
|
|
90
90
|
_getListWidth(): number;
|
|
91
91
|
_getPicker(): ResponsivePopover;
|
|
92
92
|
get itemSelectionAnnounce(): string;
|
|
93
|
-
hightlightInput(text: string, input: string): string;
|
|
94
93
|
get _hasValueState(): boolean;
|
|
95
94
|
_clearSelectedSuggestionAndaccInfo(): void;
|
|
96
95
|
}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import generateHighlightedMarkup from "@ui5/webcomponents-base/dist/util/generateHighlightedMarkup.js";
|
|
2
1
|
import "../SuggestionItem.js";
|
|
3
2
|
import "../SuggestionItemGroup.js";
|
|
4
3
|
import InputSuggestionsTemplate from "./InputSuggestionsTemplate.js";
|
|
@@ -337,9 +336,6 @@ class Suggestions {
|
|
|
337
336
|
const itemPositionText = Suggestions.i18nBundle.getText(LIST_ITEM_POSITION, this.accInfo.currentPos || 0, this.accInfo.listSize || 0);
|
|
338
337
|
return `${this.accInfo.additionalText} ${itemPositionText}`.trim();
|
|
339
338
|
}
|
|
340
|
-
hightlightInput(text, input) {
|
|
341
|
-
return generateHighlightedMarkup(text, input);
|
|
342
|
-
}
|
|
343
339
|
get _hasValueState() {
|
|
344
340
|
return this.component.hasValueStateMessage;
|
|
345
341
|
}
|