@sapudex/web-components 2.53.0 → 2.54.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (208) hide show
  1. package/cypress/specs/FilterMenu.cy.tsx +34 -0
  2. package/cypress/specs/SelectBox.cy.tsx +43 -0
  3. package/dist/Accordion.js +1 -1
  4. package/dist/Accordion.js.map +1 -1
  5. package/dist/AccordionItem.js +1 -1
  6. package/dist/AccordionItem.js.map +1 -1
  7. package/dist/Avatar.d.ts +2 -2
  8. package/dist/Avatar.js +1 -1
  9. package/dist/Avatar.js.map +1 -1
  10. package/dist/Badge.js +1 -1
  11. package/dist/Badge.js.map +1 -1
  12. package/dist/Breadcrumbs.js +1 -1
  13. package/dist/Breadcrumbs.js.map +1 -1
  14. package/dist/Carousel.js +1 -1
  15. package/dist/Carousel.js.map +1 -1
  16. package/dist/Contact.js +1 -1
  17. package/dist/Contact.js.map +1 -1
  18. package/dist/ContactItem.js +1 -1
  19. package/dist/ContactItem.js.map +1 -1
  20. package/dist/Feed.d.ts +2 -1
  21. package/dist/Feed.js +1 -1
  22. package/dist/Feed.js.map +1 -1
  23. package/dist/FeedItem.d.ts +2 -1
  24. package/dist/FeedItem.js +1 -1
  25. package/dist/FeedItem.js.map +1 -1
  26. package/dist/FilterMenuGroupHeader.js +1 -1
  27. package/dist/FilterMenuGroupHeader.js.map +1 -1
  28. package/dist/Footer.d.ts +2 -1
  29. package/dist/Footer.js +1 -1
  30. package/dist/Footer.js.map +1 -1
  31. package/dist/ImageGridCloud.js +1 -1
  32. package/dist/ImageGridCloud.js.map +1 -1
  33. package/dist/ImageGridTable.js +1 -1
  34. package/dist/ImageGridTable.js.map +1 -1
  35. package/dist/ImageGridTableItem.js +1 -1
  36. package/dist/ImageGridTableItem.js.map +1 -1
  37. package/dist/ImageGridTicker.js +1 -1
  38. package/dist/ImageGridTicker.js.map +1 -1
  39. package/dist/InputGroup.js +1 -1
  40. package/dist/InputGroup.js.map +1 -1
  41. package/dist/LinkList.js +1 -1
  42. package/dist/LinkList.js.map +1 -1
  43. package/dist/List.js +1 -1
  44. package/dist/List.js.map +1 -1
  45. package/dist/ListGroupHeaderBase.js +1 -1
  46. package/dist/ListGroupHeaderBase.js.map +1 -1
  47. package/dist/ListItem.d.ts +3 -3
  48. package/dist/ListItem.js +1 -1
  49. package/dist/ListItem.js.map +1 -1
  50. package/dist/MastheadItem.d.ts +3 -3
  51. package/dist/MastheadItem.js +1 -1
  52. package/dist/MastheadItem.js.map +1 -1
  53. package/dist/MastheadMobileMenu.d.ts +3 -3
  54. package/dist/MastheadMobileMenu.js +1 -1
  55. package/dist/MastheadMobileMenu.js.map +1 -1
  56. package/dist/MastheadProfileMenu.d.ts +3 -2
  57. package/dist/MastheadProfileMenu.js +1 -1
  58. package/dist/MastheadProfileMenu.js.map +1 -1
  59. package/dist/MastheadShell.d.ts +9 -9
  60. package/dist/MastheadShell.js +1 -1
  61. package/dist/MastheadShell.js.map +1 -1
  62. package/dist/MediaPlayer.d.ts +1 -1
  63. package/dist/MediaPlayer.js +5 -3
  64. package/dist/MediaPlayer.js.map +1 -1
  65. package/dist/MediaPlayerVimeo.d.ts +6 -0
  66. package/dist/MediaPlayerVimeo.js +27 -6
  67. package/dist/MediaPlayerVimeo.js.map +1 -1
  68. package/dist/MediaPlayerYoutube.d.ts +3 -0
  69. package/dist/MediaPlayerYoutube.js +24 -5
  70. package/dist/MediaPlayerYoutube.js.map +1 -1
  71. package/dist/MessageStrip.d.ts +2 -1
  72. package/dist/MessageStrip.js +1 -1
  73. package/dist/MessageStrip.js.map +1 -1
  74. package/dist/Modal.d.ts +2 -0
  75. package/dist/Modal.js +10 -3
  76. package/dist/Modal.js.map +1 -1
  77. package/dist/PromoTile.d.ts +2 -2
  78. package/dist/PromoTile.js +1 -1
  79. package/dist/PromoTile.js.map +1 -1
  80. package/dist/Quote.d.ts +4 -4
  81. package/dist/Quote.js +1 -1
  82. package/dist/Quote.js.map +1 -1
  83. package/dist/Review.d.ts +3 -3
  84. package/dist/Review.js +1 -1
  85. package/dist/Review.js.map +1 -1
  86. package/dist/ReviewItem.d.ts +4 -3
  87. package/dist/ReviewItem.js +1 -1
  88. package/dist/ReviewItem.js.map +1 -1
  89. package/dist/Search.js +1 -1
  90. package/dist/Search.js.map +1 -1
  91. package/dist/SearchableListBase.js +5 -1
  92. package/dist/SearchableListBase.js.map +1 -1
  93. package/dist/SecondaryNavigation.d.ts +3 -3
  94. package/dist/SecondaryNavigation.js +1 -1
  95. package/dist/SecondaryNavigation.js.map +1 -1
  96. package/dist/SecondaryNavigationItem.d.ts +2 -1
  97. package/dist/SecondaryNavigationItem.js +1 -1
  98. package/dist/SecondaryNavigationItem.js.map +1 -1
  99. package/dist/SelectBase.js +1 -1
  100. package/dist/SelectBase.js.map +1 -1
  101. package/dist/SelectBoxGroupHeader.js +1 -1
  102. package/dist/SelectBoxGroupHeader.js.map +1 -1
  103. package/dist/SelectBoxItem.d.ts +3 -3
  104. package/dist/SelectBoxItem.js +1 -1
  105. package/dist/SelectBoxItem.js.map +1 -1
  106. package/dist/SideNavigationMobile.d.ts +2 -2
  107. package/dist/SideNavigationMobile.js +1 -1
  108. package/dist/SideNavigationMobile.js.map +1 -1
  109. package/dist/SocialMediaButton.js +1 -1
  110. package/dist/SocialMediaButton.js.map +1 -1
  111. package/dist/Tab.d.ts +2 -2
  112. package/dist/Tab.js +1 -1
  113. package/dist/Tab.js.map +1 -1
  114. package/dist/TabNavigation.d.ts +2 -2
  115. package/dist/TabNavigation.js +1 -1
  116. package/dist/TabNavigation.js.map +1 -1
  117. package/dist/Table.d.ts +5 -5
  118. package/dist/Table.js +1 -1
  119. package/dist/Table.js.map +1 -1
  120. package/dist/TableCellBase.js +1 -1
  121. package/dist/TableCellBase.js.map +1 -1
  122. package/dist/TableGroupRow.js +1 -1
  123. package/dist/TableGroupRow.js.map +1 -1
  124. package/dist/TableRowBase.js +1 -1
  125. package/dist/TableRowBase.js.map +1 -1
  126. package/dist/TagGroup.js +1 -1
  127. package/dist/TagGroup.js.map +1 -1
  128. package/dist/Tile.d.ts +2 -1
  129. package/dist/Tile.js +1 -1
  130. package/dist/Tile.js.map +1 -1
  131. package/dist/Tooltip.d.ts +2 -1
  132. package/dist/Tooltip.js +1 -1
  133. package/dist/Tooltip.js.map +1 -1
  134. package/dist/Wizard.js +1 -1
  135. package/dist/Wizard.js.map +1 -1
  136. package/dist/assets/{InputSuggestions-0yCPXAmq.js → InputSuggestions-CqOrRXxa.js} +1 -1
  137. package/dist/assets/{ListItemStandardExpandableTextTemplate-DjZEnCXN.js → ListItemStandardExpandableTextTemplate-DKUm4L2B.js} +1 -1
  138. package/dist/assets/{bundle.esm-DJuMR5ko.js → bundle.esm-CI60uvdr.js} +229 -229
  139. package/dist/css/themes/AccordionItem.css +1 -1
  140. package/dist/css/themes/Footer.css +1 -1
  141. package/dist/custom-elements-internal.json +185 -163
  142. package/dist/custom-elements.json +153 -139
  143. package/dist/generated/themes/AccordionItem.css.d.ts +1 -1
  144. package/dist/generated/themes/AccordionItem.css.js +1 -1
  145. package/dist/generated/themes/AccordionItem.css.js.map +1 -1
  146. package/dist/generated/themes/Footer.css.d.ts +1 -1
  147. package/dist/generated/themes/Footer.css.js +1 -1
  148. package/dist/generated/themes/Footer.css.js.map +1 -1
  149. package/dist/vscode.html-custom-data.json +2 -2
  150. package/dist/web-types.json +23 -7
  151. package/package.json +1 -1
  152. package/src/Accordion.ts +1 -1
  153. package/src/AccordionItem.ts +1 -1
  154. package/src/Avatar.ts +3 -3
  155. package/src/Badge.ts +1 -1
  156. package/src/Breadcrumbs.ts +1 -1
  157. package/src/Carousel.ts +1 -1
  158. package/src/Contact.ts +1 -1
  159. package/src/ContactItem.ts +1 -1
  160. package/src/Feed.ts +3 -2
  161. package/src/FeedItem.ts +3 -2
  162. package/src/FilterMenuGroupHeader.ts +1 -1
  163. package/src/Footer.ts +3 -2
  164. package/src/ImageGridCloud.ts +1 -1
  165. package/src/ImageGridTable.ts +1 -1
  166. package/src/ImageGridTableItem.ts +1 -1
  167. package/src/ImageGridTicker.ts +1 -1
  168. package/src/InputGroup.ts +1 -1
  169. package/src/LinkList.ts +1 -1
  170. package/src/List.ts +1 -1
  171. package/src/ListGroupHeaderBase.ts +1 -1
  172. package/src/ListItem.ts +4 -4
  173. package/src/MastheadItem.ts +4 -4
  174. package/src/MastheadMobileMenu.ts +4 -4
  175. package/src/MastheadProfileMenu.ts +4 -3
  176. package/src/MastheadShell.ts +10 -10
  177. package/src/MediaPlayer.ts +5 -4
  178. package/src/MediaPlayerVimeo.ts +31 -6
  179. package/src/MediaPlayerYoutube.ts +24 -5
  180. package/src/MessageStrip.ts +3 -2
  181. package/src/Modal.ts +18 -3
  182. package/src/PromoTile.ts +3 -3
  183. package/src/Quote.ts +5 -5
  184. package/src/Review.ts +4 -4
  185. package/src/ReviewItem.ts +5 -4
  186. package/src/Search.ts +1 -1
  187. package/src/SearchableListBase.ts +6 -1
  188. package/src/SecondaryNavigation.ts +4 -4
  189. package/src/SecondaryNavigationItem.ts +3 -2
  190. package/src/SelectBase.ts +1 -1
  191. package/src/SelectBoxGroupHeader.ts +1 -1
  192. package/src/SelectBoxItem.ts +4 -4
  193. package/src/SideNavigationMobile.ts +3 -3
  194. package/src/SocialMediaButton.ts +1 -1
  195. package/src/Tab.ts +3 -3
  196. package/src/TabNavigation.ts +3 -3
  197. package/src/Table.ts +6 -6
  198. package/src/TableCellBase.ts +1 -1
  199. package/src/TableGroupRow.ts +1 -1
  200. package/src/TableRowBase.ts +1 -1
  201. package/src/TagGroup.ts +1 -1
  202. package/src/Tile.ts +3 -2
  203. package/src/Tooltip.ts +3 -2
  204. package/src/Wizard.ts +1 -1
  205. package/src/generated/themes/AccordionItem.css.ts +1 -1
  206. package/src/generated/themes/Footer.css.ts +1 -1
  207. package/src/themes/AccordionItem.css +2 -2
  208. package/src/themes/Footer.css +1 -1
@@ -860,6 +860,40 @@ describe("Filter Menu component", () => {
860
860
  expect(selectionChangedItem).to.equal(selectedIds[0]);
861
861
  });
862
862
 
863
+ it("emit selection-change with group header as item when group header is clicked", () => {
864
+ let selectionChangedItem: string | undefined;
865
+
866
+ cy.mount(filterMenuGroupWithSearch);
867
+
868
+ cy.get("[udex-filter-menu]").then(menu => {
869
+ menu.get(0).addEventListener('ui5-selection-change', function(e: CustomEvent) {
870
+ selectionChangedItem = e.detail.item?._id;
871
+ });
872
+ });
873
+
874
+ cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").click();
875
+
876
+ cy.get("[udex-filter-menu]").shadow()
877
+ .find(".udex-searchable-list__header")
878
+ .as("groupHeader");
879
+
880
+ let groupHeaderId: string;
881
+ cy.get("[udex-filter-menu]").then(($el) => {
882
+ const element = $el[0] as UDExFilterMenu;
883
+ groupHeaderId = (element.items[0] as UDExFilterMenuGroupHeader)._id;
884
+ });
885
+
886
+ cy.get("@groupHeader").shadow()
887
+ .find("udex-list-item")
888
+ .shadow()
889
+ .find(".udex-list__item")
890
+ .click();
891
+
892
+ cy.then(() => {
893
+ expect(selectionChangedItem).to.equal(groupHeaderId);
894
+ });
895
+ });
896
+
863
897
  it("emit change-search when search field typing", () => {
864
898
  cy.mount(filterMenuSingleWithSearch);
865
899
  cy.window().then((win) => {
@@ -806,6 +806,49 @@ describe("SelectBox", () => {
806
806
  });
807
807
  });
808
808
 
809
+ // Added: covers the listboxRole getter change in SelectBase — aria-haspopup on the
810
+ // combobox search input reflects "tree" when the dropdown contains group headers
811
+ // (isTreeStructure === true) and "listbox" for a flat list (no group headers).
812
+ describe("Select Box aria-haspopup (listboxRole)", () => {
813
+ it("sets aria-haspopup=\"tree\" on the search input when the SelectBox has group headers", () => {
814
+ cy.mount(groupHeader);
815
+
816
+ cy.get("#select-box").shadow()
817
+ .find(".udex-text-field__search")
818
+ .should("have.attr", "aria-haspopup", "tree");
819
+ });
820
+
821
+ it("sets aria-haspopup=\"tree\" for a collapsible group header as well", () => {
822
+ cy.mount(groupHeaderCollapsible);
823
+
824
+ cy.get("#select-box").shadow()
825
+ .find(".udex-text-field__search")
826
+ .should("have.attr", "aria-haspopup", "tree");
827
+ });
828
+
829
+ it("sets aria-haspopup=\"listbox\" on the search input when the SelectBox has no group headers", () => {
830
+ cy.mount(fullComponent);
831
+
832
+ cy.get("#select-box").shadow()
833
+ .find(".udex-text-field__search")
834
+ .should("have.attr", "aria-haspopup", "listbox");
835
+ });
836
+
837
+ it("keeps aria-haspopup=\"tree\" while the dropdown is open for a grouped SelectBox", () => {
838
+ cy.mount(groupHeader);
839
+
840
+ cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
841
+
842
+ cy.get("#select-box").shadow()
843
+ .find(".udex-select-box__dropdown")
844
+ .should("have.attr", "open");
845
+
846
+ cy.get("#select-box").shadow()
847
+ .find(".udex-text-field__search")
848
+ .should("have.attr", "aria-haspopup", "tree");
849
+ });
850
+ });
851
+
809
852
  describe("Select Box focus tests", () => {
810
853
  it("focus moves to previous interactive element on the page when press Shift+Tab on a tag", () => {
811
854
  cy.mount(multiSelect);
package/dist/Accordion.js CHANGED
@@ -8,7 +8,7 @@ var UDExAccordion_1;
8
8
  import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
9
9
  import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
10
10
  import property from "@ui5/webcomponents-base/dist/decorators/property.js";
11
- import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
11
+ import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
12
12
  import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
13
13
  import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
14
14
  import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
@@ -1 +1 @@
1
- {"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../src/Accordion.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport \"@ui5/webcomponents-icons/dist/feeder-arrow.js\";\nimport {\n isEnter, isSpace, isEnd, isHome, isTabPrevious, isTabNext, isDown, isUp,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport AccordionTemplate from \"./AccordionTemplate.js\";\nimport type UDExAccordionItem from \"./AccordionItem.js\";\nimport { COLLAPSE_ALL, EXPAND_ALL } from \"./generated/i18n/i18n-defaults.js\";\nimport translate from \"./utils/translate.js\";\n\n// Styles\nimport AccordionCss from \"./generated/themes/Accordion.css.js\";\n\nexport enum UDExAccordionHeadlineLevel {\n H1 = \"H1\",\n H2 = \"H2\",\n H3 = \"H3\",\n H4 = \"H4\",\n H5 = \"H5\",\n H6 = \"H6\"\n}\n\ntype UDExAccordionToggleItemsEventDetail = {\n isOpen: boolean\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-accordion</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Accordion.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends UI5Element\n * @tagname udex-accordion\n * @public\n */\n@customElement({\n tag: \"udex-accordion\",\n renderer: jsxRenderer,\n styles: AccordionCss,\n template: AccordionTemplate,\n})\n\n/**\n * Triggered when the user clicks on the Expand/Collapse All button..\n *\n * @public\n * @param {boolean} isOpen Indicates whether all items are expanded or collapsed\n */\n@event(\"toggle-items\", { bubbles: true })\n\nclass UDExAccordion extends UI5Element {\n eventDetails!: {\n \"toggle-items\": UDExAccordionToggleItemsEventDetail,\n };\n\n /**\n * Used internally to store expand/collapse button state.\n *\n * @private\n */\n @property({ type: Boolean, noAttribute: true })\n _allExpanded!: boolean;\n\n /**\n * Defines if expandAll button should be displayed.\n *\n * @default false\n * @public\n */\n @property({ type: Boolean })\n hideExpandButton!: boolean;\n\n /**\n * Defines direction of the accordion component.\n *\n * @private\n */\n @property({ type: String })\n _direction?: string;\n\n /**\n * Defines the headline text of the accordion component.\n *\n * @default \"\"\n * @public\n */\n @property({ type: String })\n headline!: string;\n\n /**\n * Defines the semantic level of the headline.\n *\n * @default UDExAccordionHeadlineLevel.h3\n * @public\n */\n @property()\n headlineLevel: UDExAccordionHeadlineLevel = UDExAccordionHeadlineLevel.H3;\n\n /**\n * Slot for accordion items.\n *\n * @slot\n * @public\n */\n @slot({ type: HTMLElement, \"default\": true, individualSlots: true })\n _items!: DefaultSlot<UDExAccordionItem>;\n\n @i18n(\"@sapudex/web-components\")\n static i18nBundle: I18nBundle;\n\n _activeItemIndex: number;\n\n constructor() {\n super();\n this._allExpanded = false;\n this._activeItemIndex = -1;\n }\n\n onEnterDOM() {\n this.updateAllExpandedStatus();\n }\n\n toggleAllHandler(e: Event) {\n e.preventDefault();\n this._allExpanded = !this._allExpanded;\n this.toggleOpenItems(this._allExpanded);\n this.fireDecoratorEvent(\"toggle-items\", { isOpen: this._allExpanded });\n }\n\n toggleOpenItems(isOpen: boolean) {\n this._items.forEach(item => {\n item.expanded = isOpen;\n });\n }\n\n toggleKeyAllHandler(e: KeyboardEvent) {\n if (isEnter(e) || isSpace(e)) {\n this.toggleAllHandler(e);\n }\n }\n\n keydownHandler(e: KeyboardEvent) {\n if (isDown(e) || isUp(e)) {\n return;\n }\n\n this.handleTabKey(e);\n }\n\n handleTabKey(e: KeyboardEvent) {\n const activeItem = this._items[this._activeItemIndex];\n const previousItem = this._items[this._activeItemIndex - 1];\n const isLastItem = this._activeItemIndex === this._items.length - 1;\n const isFirstItem = this._activeItemIndex === 0;\n const lastItem = this._items[this._items.length - 1];\n\n const updateTabIndex = (elements: NodeListOf<Element>, value: string) => {\n elements.forEach(element => element.setAttribute(\"tabindex\", value));\n };\n\n const getInteractiveElements = (item: HTMLElement) => {\n const selectors = [\"button\", \"a[href]\", \"input\", \"select\", \"textarea\", \"[tabindex]\"];\n return item.querySelectorAll(selectors.join(\",\"));\n };\n\n const handleTabNavigation = (keyboardEvent: KeyboardEvent) => {\n if (isLastItem && isTabNext(keyboardEvent) && !lastItem.expanded) {\n updateTabIndex(getInteractiveElements(activeItem), \"-1\");\n return true;\n }\n\n if ((activeItem?.expanded && isTabNext(e))\n || (previousItem?.expanded && isTabPrevious(e))\n || (isFirstItem && isTabPrevious(e))) {\n return true;\n }\n\n if (isEnter(e) && isLastItem) {\n updateTabIndex(getInteractiveElements(activeItem), \"0\");\n }\n\n return false;\n };\n\n const focusOnItem = (itemIndex: number) => {\n const item = this._items[itemIndex];\n this._activeItemIndex = itemIndex;\n (item?.shadowRoot?.querySelector(\".udex-accordion-item__header\") as HTMLElement)?.focus();\n };\n\n if (handleTabNavigation(e)) {\n return;\n }\n\n e.preventDefault();\n const len = this._items.length;\n\n if (isHome(e)) {\n focusOnItem(0);\n }\n\n if (isEnd(e)) {\n focusOnItem(len - 1);\n }\n\n if (isTabPrevious(e)) {\n focusOnItem(this._activeItemIndex > 0 ? this._activeItemIndex - 1 : len - 1);\n }\n\n if (isTabNext(e)) {\n focusOnItem(this._activeItemIndex < len - 1 ? this._activeItemIndex + 1 : 0);\n }\n }\n\n itemFocusHandler(e: CustomEvent) {\n const target = e.target as UDExAccordionItem;\n if (target) {\n this._activeItemIndex = this._items?.indexOf(target) ?? -1;\n }\n }\n\n updateAllExpandedStatus() {\n this._allExpanded = this._items.every(item => item.expanded);\n }\n\n get toggleAllText(): string {\n return this._allExpanded\n ? translate(UDExAccordion, COLLAPSE_ALL)\n : translate(UDExAccordion, EXPAND_ALL);\n }\n\n get items(): {item: UDExAccordionItem}[] {\n return this._items.map(el => {\n return {\n item: el,\n };\n });\n }\n}\n\nUDExAccordion.define();\n\nexport default UDExAccordion;\nexport type { UDExAccordionToggleItemsEventDetail };\n"]}
1
+ {"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../src/Accordion.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport \"@ui5/webcomponents-icons/dist/feeder-arrow.js\";\nimport {\n isEnter, isSpace, isEnd, isHome, isTabPrevious, isTabNext, isDown, isUp,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport AccordionTemplate from \"./AccordionTemplate.js\";\nimport type UDExAccordionItem from \"./AccordionItem.js\";\nimport { COLLAPSE_ALL, EXPAND_ALL } from \"./generated/i18n/i18n-defaults.js\";\nimport translate from \"./utils/translate.js\";\n\n// Styles\nimport AccordionCss from \"./generated/themes/Accordion.css.js\";\n\nexport enum UDExAccordionHeadlineLevel {\n H1 = \"H1\",\n H2 = \"H2\",\n H3 = \"H3\",\n H4 = \"H4\",\n H5 = \"H5\",\n H6 = \"H6\"\n}\n\ntype UDExAccordionToggleItemsEventDetail = {\n isOpen: boolean\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-accordion</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Accordion.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends UI5Element\n * @tagname udex-accordion\n * @public\n */\n@customElement({\n tag: \"udex-accordion\",\n renderer: jsxRenderer,\n styles: AccordionCss,\n template: AccordionTemplate,\n})\n\n/**\n * Triggered when the user clicks on the Expand/Collapse All button..\n *\n * @public\n * @param {boolean} isOpen Indicates whether all items are expanded or collapsed\n */\n@event(\"toggle-items\", { bubbles: true })\n\nclass UDExAccordion extends UI5Element {\n eventDetails!: {\n \"toggle-items\": UDExAccordionToggleItemsEventDetail,\n };\n\n /**\n * Used internally to store expand/collapse button state.\n *\n * @private\n */\n @property({ type: Boolean, noAttribute: true })\n _allExpanded!: boolean;\n\n /**\n * Defines if expandAll button should be displayed.\n *\n * @default false\n * @public\n */\n @property({ type: Boolean })\n hideExpandButton!: boolean;\n\n /**\n * Defines direction of the accordion component.\n *\n * @private\n */\n @property({ type: String })\n _direction?: string;\n\n /**\n * Defines the headline text of the accordion component.\n *\n * @default \"\"\n * @public\n */\n @property({ type: String })\n headline!: string;\n\n /**\n * Defines the semantic level of the headline.\n *\n * @default UDExAccordionHeadlineLevel.h3\n * @public\n */\n @property()\n headlineLevel: UDExAccordionHeadlineLevel = UDExAccordionHeadlineLevel.H3;\n\n /**\n * Slot for accordion items.\n *\n * @slot\n * @public\n */\n @slot({ type: HTMLElement, \"default\": true, individualSlots: true })\n _items!: DefaultSlot<UDExAccordionItem>;\n\n @i18n(\"@sapudex/web-components\")\n static i18nBundle: I18nBundle;\n\n _activeItemIndex: number;\n\n constructor() {\n super();\n this._allExpanded = false;\n this._activeItemIndex = -1;\n }\n\n onEnterDOM() {\n this.updateAllExpandedStatus();\n }\n\n toggleAllHandler(e: Event) {\n e.preventDefault();\n this._allExpanded = !this._allExpanded;\n this.toggleOpenItems(this._allExpanded);\n this.fireDecoratorEvent(\"toggle-items\", { isOpen: this._allExpanded });\n }\n\n toggleOpenItems(isOpen: boolean) {\n this._items.forEach(item => {\n item.expanded = isOpen;\n });\n }\n\n toggleKeyAllHandler(e: KeyboardEvent) {\n if (isEnter(e) || isSpace(e)) {\n this.toggleAllHandler(e);\n }\n }\n\n keydownHandler(e: KeyboardEvent) {\n if (isDown(e) || isUp(e)) {\n return;\n }\n\n this.handleTabKey(e);\n }\n\n handleTabKey(e: KeyboardEvent) {\n const activeItem = this._items[this._activeItemIndex];\n const previousItem = this._items[this._activeItemIndex - 1];\n const isLastItem = this._activeItemIndex === this._items.length - 1;\n const isFirstItem = this._activeItemIndex === 0;\n const lastItem = this._items[this._items.length - 1];\n\n const updateTabIndex = (elements: NodeListOf<Element>, value: string) => {\n elements.forEach(element => element.setAttribute(\"tabindex\", value));\n };\n\n const getInteractiveElements = (item: HTMLElement) => {\n const selectors = [\"button\", \"a[href]\", \"input\", \"select\", \"textarea\", \"[tabindex]\"];\n return item.querySelectorAll(selectors.join(\",\"));\n };\n\n const handleTabNavigation = (keyboardEvent: KeyboardEvent) => {\n if (isLastItem && isTabNext(keyboardEvent) && !lastItem.expanded) {\n updateTabIndex(getInteractiveElements(activeItem), \"-1\");\n return true;\n }\n\n if ((activeItem?.expanded && isTabNext(e))\n || (previousItem?.expanded && isTabPrevious(e))\n || (isFirstItem && isTabPrevious(e))) {\n return true;\n }\n\n if (isEnter(e) && isLastItem) {\n updateTabIndex(getInteractiveElements(activeItem), \"0\");\n }\n\n return false;\n };\n\n const focusOnItem = (itemIndex: number) => {\n const item = this._items[itemIndex];\n this._activeItemIndex = itemIndex;\n (item?.shadowRoot?.querySelector(\".udex-accordion-item__header\") as HTMLElement)?.focus();\n };\n\n if (handleTabNavigation(e)) {\n return;\n }\n\n e.preventDefault();\n const len = this._items.length;\n\n if (isHome(e)) {\n focusOnItem(0);\n }\n\n if (isEnd(e)) {\n focusOnItem(len - 1);\n }\n\n if (isTabPrevious(e)) {\n focusOnItem(this._activeItemIndex > 0 ? this._activeItemIndex - 1 : len - 1);\n }\n\n if (isTabNext(e)) {\n focusOnItem(this._activeItemIndex < len - 1 ? this._activeItemIndex + 1 : 0);\n }\n }\n\n itemFocusHandler(e: CustomEvent) {\n const target = e.target as UDExAccordionItem;\n if (target) {\n this._activeItemIndex = this._items?.indexOf(target) ?? -1;\n }\n }\n\n updateAllExpandedStatus() {\n this._allExpanded = this._items.every(item => item.expanded);\n }\n\n get toggleAllText(): string {\n return this._allExpanded\n ? translate(UDExAccordion, COLLAPSE_ALL)\n : translate(UDExAccordion, EXPAND_ALL);\n }\n\n get items(): {item: UDExAccordionItem}[] {\n return this._items.map(el => {\n return {\n item: el,\n };\n });\n }\n}\n\nUDExAccordion.define();\n\nexport default UDExAccordion;\nexport type { UDExAccordionToggleItemsEventDetail };\n"]}
@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
7
7
  import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
8
8
  import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
9
9
  import property from "@ui5/webcomponents-base/dist/decorators/property.js";
10
- import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
10
+ import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
11
11
  import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
12
12
  import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
13
13
  import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
@@ -1 +1 @@
1
- {"version":3,"file":"AccordionItem.js","sourceRoot":"","sources":["../src/AccordionItem.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport { isEnter, isSpace } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport AccordionItemTemplate from \"./AccordionItemTemplate.js\";\nimport { UDExNumberBadgeDesign } from \"./types/BadgeDesign.js\";\n\n// Styles\nimport AccordionItemCss from \"./generated/themes/AccordionItem.css.js\";\n\nexport enum UDExAccordionItemTitleSize {\n Standard = \"Standard\",\n Large = \"Large\"\n}\n\ntype UDExAccordionItemClickEventDetail = {\n name: string | undefined;\n expanded: boolean;\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-accordion-item</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/AccordionItem.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends UI5Element\n * @tagname udex-accordion-item\n * @public\n */\n@customElement({\n tag: \"udex-accordion-item\",\n renderer: jsxRenderer,\n styles: AccordionItemCss,\n template: AccordionItemTemplate,\n})\n\n/**\n * Triggered when the user focuses on an accordion item.\n * @public\n */\n@event(\"accordion-item-focus\", { bubbles: true })\n\n/**\n * Triggered when the user clicks on an accordion item.\n * @public\n * @param { string } name\n * @param { boolean } expanded\n */\n@event(\"accordion-item-click\", { bubbles: true })\n\nclass UDExAccordionItem extends UI5Element {\n eventDetails!: {\n \"accordion-item-focus\": void,\n \"accordion-item-click\": UDExAccordionItemClickEventDetail,\n };\n /**\n * Defines the Badge at the end of the label item.\n *\n * @default \"\"\n * @public\n */\n @property()\n numberBadge!: string;\n\n /**\n * Defines the design of the number badge.\n *\n * @default \"Blue\"\n * @public\n */\n @property()\n numberBadgeDesign: `${UDExNumberBadgeDesign}` = UDExNumberBadgeDesign.Blue;\n\n /**\n * Defines the label of the accordion item component.\n *\n * @default \"\"\n * @public\n */\n @property()\n label!: string;\n\n /**\n * Defines the size of label.\n *\n * @default UDExAccordionItemTitleSize.Standard\n * @public\n */\n @property()\n labelSize: UDExAccordionItemTitleSize = UDExAccordionItemTitleSize.Standard;\n\n /**\n * Defines icon name to be display with title.\n *\n * @default \"\"\n * @public\n */\n @property()\n labelIcon!: string;\n\n /**\n * Defines if the accordion item is expanded by default\n *\n * @default false\n * @public\n */\n @property({ type: Boolean })\n expanded = false;\n\n /**\n * Used internally to understand the component's open or closed state.\n *\n * @default false\n * @private\n */\n @property({ type: Boolean, noAttribute: true })\n isOpen = false;\n\n /**\n * Defines direction of the accordion item.\n *\n * @public\n */\n @property({ type: String })\n _direction?: string;\n\n /**\n * Slot for accordion item content.\n *\n * @slot\n * @public\n */\n @slot({ type: Node, \"default\": true })\n content!: DefaultSlot<Node>;\n\n _resizeHandler: () => void;\n contentElement: HTMLElement | null | undefined;\n\n constructor() {\n super();\n this._resizeHandler = this._onResize.bind(this);\n this.contentElement = null;\n }\n\n onAfterRendering() {\n this.handleDirection();\n this.contentElement = this.shadowRoot?.querySelector(\".udex-accordion-item__content-inner\");\n this.setContentHeight();\n }\n\n onEnterDOM(): void {\n if (isDesktop()) {\n this.setAttribute(\"desktop\", \"\");\n }\n if (this.contentElement) {\n ResizeHandler.register(this.contentElement, this._resizeHandler);\n }\n }\n\n onExitDOM(): void {\n if (this.contentElement) {\n ResizeHandler.deregister(this.contentElement, this._resizeHandler);\n }\n }\n\n setContentHeight() {\n this.style.setProperty(\"--udex-accordion-item-content-max-height\", `${this.contentElement?.scrollHeight}px`);\n }\n\n _onResize(): void {\n this.setContentHeight();\n }\n\n contentKeydown(e: KeyboardEvent) {\n e.stopPropagation();\n }\n\n itemClickHandler(e: Event) {\n e.preventDefault();\n this.expanded = !this.expanded;\n this.setContentHeight();\n this.fireDecoratorEvent(\"accordion-item-click\", { name: this.label, expanded: this.expanded });\n }\n\n focusHandler() {\n this.fireDecoratorEvent(\"accordion-item-focus\");\n }\n\n keydownHandler(e: KeyboardEvent) {\n if (isEnter(e) || isSpace(e)) {\n this.itemClickHandler(e);\n }\n }\n\n handleDirection() {\n const directionStyles: string = window\n .getComputedStyle(this)\n .getPropertyValue(\"direction\");\n\n if (!directionStyles) {\n this._direction = \"ltr\";\n } else {\n this._direction = directionStyles;\n }\n }\n}\n\nUDExAccordionItem.define();\n\nexport default UDExAccordionItem;\nexport type { UDExAccordionItemClickEventDetail };\n"]}
1
+ {"version":3,"file":"AccordionItem.js","sourceRoot":"","sources":["../src/AccordionItem.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport { isEnter, isSpace } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport AccordionItemTemplate from \"./AccordionItemTemplate.js\";\nimport { UDExNumberBadgeDesign } from \"./types/BadgeDesign.js\";\n\n// Styles\nimport AccordionItemCss from \"./generated/themes/AccordionItem.css.js\";\n\nexport enum UDExAccordionItemTitleSize {\n Standard = \"Standard\",\n Large = \"Large\"\n}\n\ntype UDExAccordionItemClickEventDetail = {\n name: string | undefined;\n expanded: boolean;\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-accordion-item</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/AccordionItem.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends UI5Element\n * @tagname udex-accordion-item\n * @public\n */\n@customElement({\n tag: \"udex-accordion-item\",\n renderer: jsxRenderer,\n styles: AccordionItemCss,\n template: AccordionItemTemplate,\n})\n\n/**\n * Triggered when the user focuses on an accordion item.\n * @public\n */\n@event(\"accordion-item-focus\", { bubbles: true })\n\n/**\n * Triggered when the user clicks on an accordion item.\n * @public\n * @param { string } name\n * @param { boolean } expanded\n */\n@event(\"accordion-item-click\", { bubbles: true })\n\nclass UDExAccordionItem extends UI5Element {\n eventDetails!: {\n \"accordion-item-focus\": void,\n \"accordion-item-click\": UDExAccordionItemClickEventDetail,\n };\n /**\n * Defines the Badge at the end of the label item.\n *\n * @default \"\"\n * @public\n */\n @property()\n numberBadge!: string;\n\n /**\n * Defines the design of the number badge.\n *\n * @default \"Blue\"\n * @public\n */\n @property()\n numberBadgeDesign: `${UDExNumberBadgeDesign}` = UDExNumberBadgeDesign.Blue;\n\n /**\n * Defines the label of the accordion item component.\n *\n * @default \"\"\n * @public\n */\n @property()\n label!: string;\n\n /**\n * Defines the size of label.\n *\n * @default UDExAccordionItemTitleSize.Standard\n * @public\n */\n @property()\n labelSize: UDExAccordionItemTitleSize = UDExAccordionItemTitleSize.Standard;\n\n /**\n * Defines icon name to be display with title.\n *\n * @default \"\"\n * @public\n */\n @property()\n labelIcon!: string;\n\n /**\n * Defines if the accordion item is expanded by default\n *\n * @default false\n * @public\n */\n @property({ type: Boolean })\n expanded = false;\n\n /**\n * Used internally to understand the component's open or closed state.\n *\n * @default false\n * @private\n */\n @property({ type: Boolean, noAttribute: true })\n isOpen = false;\n\n /**\n * Defines direction of the accordion item.\n *\n * @public\n */\n @property({ type: String })\n _direction?: string;\n\n /**\n * Slot for accordion item content.\n *\n * @slot\n * @public\n */\n @slot({ type: Node, \"default\": true })\n content!: DefaultSlot<Node>;\n\n _resizeHandler: () => void;\n contentElement: HTMLElement | null | undefined;\n\n constructor() {\n super();\n this._resizeHandler = this._onResize.bind(this);\n this.contentElement = null;\n }\n\n onAfterRendering() {\n this.handleDirection();\n this.contentElement = this.shadowRoot?.querySelector(\".udex-accordion-item__content-inner\");\n this.setContentHeight();\n }\n\n onEnterDOM(): void {\n if (isDesktop()) {\n this.setAttribute(\"desktop\", \"\");\n }\n if (this.contentElement) {\n ResizeHandler.register(this.contentElement, this._resizeHandler);\n }\n }\n\n onExitDOM(): void {\n if (this.contentElement) {\n ResizeHandler.deregister(this.contentElement, this._resizeHandler);\n }\n }\n\n setContentHeight() {\n this.style.setProperty(\"--udex-accordion-item-content-max-height\", `${this.contentElement?.scrollHeight}px`);\n }\n\n _onResize(): void {\n this.setContentHeight();\n }\n\n contentKeydown(e: KeyboardEvent) {\n e.stopPropagation();\n }\n\n itemClickHandler(e: Event) {\n e.preventDefault();\n this.expanded = !this.expanded;\n this.setContentHeight();\n this.fireDecoratorEvent(\"accordion-item-click\", { name: this.label, expanded: this.expanded });\n }\n\n focusHandler() {\n this.fireDecoratorEvent(\"accordion-item-focus\");\n }\n\n keydownHandler(e: KeyboardEvent) {\n if (isEnter(e) || isSpace(e)) {\n this.itemClickHandler(e);\n }\n }\n\n handleDirection() {\n const directionStyles: string = window\n .getComputedStyle(this)\n .getPropertyValue(\"direction\");\n\n if (!directionStyles) {\n this._direction = \"ltr\";\n } else {\n this._direction = directionStyles;\n }\n }\n}\n\nUDExAccordionItem.define();\n\nexport default UDExAccordionItem;\nexport type { UDExAccordionItemClickEventDetail };\n"]}
package/dist/Avatar.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
2
- import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
2
+ import type { DefaultSlot, Slot } from "@ui5/webcomponents-base/dist/UI5Element.js";
3
3
  import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
4
4
  import type AvatarColorScheme from "@ui5/webcomponents/dist/types/AvatarColorScheme.js";
5
5
  import "@ui5/webcomponents-icons/dist/employee.js";
@@ -132,7 +132,7 @@ declare class UDExAvatar extends UI5Element {
132
132
  * @slot
133
133
  * @public
134
134
  */
135
- badge: Array<HTMLElement>;
135
+ badge: Slot<HTMLElement>;
136
136
  /**
137
137
  * @private
138
138
  */
package/dist/Avatar.js CHANGED
@@ -9,7 +9,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
9
9
  import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
10
10
  import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
11
11
  import property from "@ui5/webcomponents-base/dist/decorators/property.js";
12
- import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
12
+ import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
13
13
  import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
14
14
  import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
15
15
  import { ATTENTION_BADGE, AVATAR_TEXT, DISABLED } from "./generated/i18n/i18n-defaults.js";
@@ -1 +1 @@
1
- {"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../src/Avatar.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { ATTENTION_BADGE, AVATAR_TEXT, DISABLED } from \"./generated/i18n/i18n-defaults.js\";\nimport type AvatarColorScheme from \"@ui5/webcomponents/dist/types/AvatarColorScheme.js\";\nimport translate from \"./utils/translate.js\";\nimport \"@ui5/webcomponents-icons/dist/employee.js\";\n\n// Template\nimport AvatarTemplate from \"./AvatarTemplate.js\";\n\n// Styles\nimport AvatarCss from \"./generated/themes/Avatar.css.js\";\n\nexport enum UDExAvatarColorScheme {\n Mango = \"Mango\",\n Red = \"Red\",\n Raspberry = \"Raspberry\",\n Pink = \"Pink\",\n Indigo = \"Indigo\",\n Blue = \"Blue\",\n Teal = \"Teal\",\n Green = \"Green\",\n Grey = \"Grey\",\n Transparent = \"Transparent\",\n Neutral = \"Neutral\",\n}\n\nexport enum UDExAvatarShape {\n Circle = \"Circle\",\n Square = \"Square\",\n}\n\nexport enum UDExAvatarSize {\n XS = \"XS\",\n S = \"S\",\n M = \"M\",\n L = \"L\",\n XL = \"XL\",\n}\n\nconst UDExToUi5ColorSchemeMap = {\n Mango: \"Accent1\",\n Red: \"Accent2\",\n Raspberry: \"Accent3\",\n Pink: \"Accent4\",\n Indigo: \"Accent5\",\n Blue: \"Accent6\",\n Transparent: \"Accent6\",\n Neutral: \"Accent6\",\n Teal: \"Accent7\",\n Green: \"Accent8\",\n Grey: \"Accent10\",\n};\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-avatar</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Avatar.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n tag: \"udex-avatar\",\n renderer: jsxRenderer,\n styles: AvatarCss,\n template: AvatarTemplate,\n})\n\n/**\n * Fires when the avatar is clicked.\n *\n * @public\n */\n@event(\"click\", { bubbles: true })\n/**\n * Fires when the avatar is clicked.\n *\n * @public\n */\n@event(\"click-default\", { bubbles: true })\n\nclass UDExAvatar extends UI5Element {\n eventDetails!: {\n \"click\": void,\n \"click-default\": void,\n };\n /**\n * Defines the displayed initials.\n *\n * @default \"\"\n * @public\n */\n @property({ type: String })\n initials: string = \"\";\n\n /**\n * Defines if the avatar is interactive (focusable and pressable).\n *\n * @default false\n * @public\n */\n @property({ type: Boolean })\n interactive!: boolean;\n\n /**\n * Defines the text alternative of the component.\n *\n * @default undefined\n * @public\n */\n @property({ type: String })\n accessibleName?: string;\n\n /**\n * Defines the design of the component.\n *\n * @default \"Blue\"\n * @public\n */\n @property()\n colorScheme: `${UDExAvatarColorScheme}` = UDExAvatarColorScheme.Blue;\n\n /**\n * Defines whether the component is disabled.\n *\n * @default false\n * @public\n */\n @property({ type: Boolean })\n disabled!: boolean;\n\n /**\n * Defines the name of the fallback icon.\n *\n * @default \"employee\"\n * @public\n */\n @property({ type: String })\n fallbackIcon: string = \"employee\";\n\n /**\n * Defines the name of the UI5 Icon, that will be displayed.\n *\n * @default \"\"\n * @public\n */\n @property({ type: String })\n icon: string = \"\";\n\n /**\n * Defines the shape of the component.\n *\n * @default \"Circle\"\n * @public\n */\n @property()\n shape: `${UDExAvatarShape}` = UDExAvatarShape.Circle;\n\n /**\n * Defines predefined size of the component.\n *\n * @default \"S\"\n * @public\n */\n @property()\n size: `${UDExAvatarSize}` = UDExAvatarSize.S;\n\n /**\n * Defines the displaying attention badge.\n *\n * @public\n * @default false\n */\n @property({ type: Boolean })\n showAttentionBadge!: boolean;\n\n /**\n * Receives the desired <img> tag\n *\n * @slot image\n * @public\n */\n @slot({ type: HTMLElement, \"default\": true })\n image!: DefaultSlot<HTMLElement>;\n\n /**\n * Defines the optional badge that will be used for visual affordance.\n *\n * @slot\n * @public\n */\n @slot({ type: HTMLElement })\n badge!: Array<HTMLElement>;\n\n /**\n * @private\n */\n @property({ noAttribute: true })\n _imageErrored: boolean = false;\n\n @i18n(\"@sapudex/web-components\")\n static i18nBundle: I18nBundle;\n\n private _trackedImageElement: HTMLImageElement | null = null;\n\n private _handleImageError = (): void => {\n this._imageErrored = true;\n };\n\n private _handleImageLoad = (): void => {\n if (this._imageErrored) {\n this._imageErrored = false;\n }\n };\n\n private _syncImageListener(): void {\n const newImage = this.image.find((el): el is HTMLImageElement => el instanceof HTMLImageElement) ?? null;\n\n if (newImage === this._trackedImageElement) {\n return;\n }\n\n if (this._trackedImageElement) {\n this._trackedImageElement.removeEventListener(\"error\", this._handleImageError);\n this._trackedImageElement.removeEventListener(\"load\", this._handleImageLoad);\n }\n\n this._trackedImageElement = newImage;\n\n if (newImage) {\n newImage.addEventListener(\"error\", this._handleImageError);\n newImage.addEventListener(\"load\", this._handleImageLoad);\n\n if (newImage.complete && newImage.src) {\n this._imageErrored = !newImage.naturalWidth;\n return;\n }\n }\n\n if (this._imageErrored) {\n this._imageErrored = false;\n }\n }\n\n onAfterRendering(): void {\n this.title = this.initials;\n this._syncImageListener();\n }\n handleClick(e: Event) {\n e.stopPropagation();\n if (this.interactive) {\n this.fireDecoratorEvent(\"click\");\n return;\n }\n this.fireDecoratorEvent(\"click-default\");\n }\n\n /**\n * Returns the effective avatar size.\n * @default \"S\"\n * @private\n */\n get effectiveSize(): UDExAvatarSize {\n // we read the attribute, because the \"size\" property will always have a default value\n return this.getAttribute(\"size\") as UDExAvatarSize || this.size;\n }\n\n /**\n * Returns the effective background color.\n * @default \"Blue\"\n * @private\n */\n get effectiveBackgroundColor(): UDExAvatarColorScheme {\n // we read the attribute, because the \"background-color\" property will always have a default value\n return this.getAttribute(\"color-scheme\") as UDExAvatarColorScheme || this.colorScheme;\n }\n\n get getUDExAvatarColorScheme(): AvatarColorScheme {\n return UDExToUi5ColorSchemeMap[this.colorScheme] as AvatarColorScheme;\n }\n\n get imageSlot(): boolean {\n return !!this.image.length;\n }\n\n get badgeSlot(): boolean {\n return !!this.badge.length;\n }\n\n get udexAvatarClass(): string {\n let avatarClass = \"udex-avatar\";\n\n if (this.imageSlot && !this._imageErrored) {\n avatarClass += \" udex-avatar--with-image\";\n }\n\n return avatarClass;\n }\n\n get avatarAccessibleName(): string {\n let accName = `${this.accessibleName ? this.accessibleName : `${translate(UDExAvatar, AVATAR_TEXT)} ${this.initials}`}`;\n accName += ` ${this.disabled ? translate(UDExAvatar, DISABLED) : \"\"}`;\n accName += ` ${this.showAttentionBadge ? translate(UDExAvatar, ATTENTION_BADGE) : \"\"}`;\n return accName;\n }\n}\n\nUDExAvatar.define();\n\nexport default UDExAvatar;\n"]}
1
+ {"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../src/Avatar.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot, Slot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { ATTENTION_BADGE, AVATAR_TEXT, DISABLED } from \"./generated/i18n/i18n-defaults.js\";\nimport type AvatarColorScheme from \"@ui5/webcomponents/dist/types/AvatarColorScheme.js\";\nimport translate from \"./utils/translate.js\";\nimport \"@ui5/webcomponents-icons/dist/employee.js\";\n\n// Template\nimport AvatarTemplate from \"./AvatarTemplate.js\";\n\n// Styles\nimport AvatarCss from \"./generated/themes/Avatar.css.js\";\n\nexport enum UDExAvatarColorScheme {\n Mango = \"Mango\",\n Red = \"Red\",\n Raspberry = \"Raspberry\",\n Pink = \"Pink\",\n Indigo = \"Indigo\",\n Blue = \"Blue\",\n Teal = \"Teal\",\n Green = \"Green\",\n Grey = \"Grey\",\n Transparent = \"Transparent\",\n Neutral = \"Neutral\",\n}\n\nexport enum UDExAvatarShape {\n Circle = \"Circle\",\n Square = \"Square\",\n}\n\nexport enum UDExAvatarSize {\n XS = \"XS\",\n S = \"S\",\n M = \"M\",\n L = \"L\",\n XL = \"XL\",\n}\n\nconst UDExToUi5ColorSchemeMap = {\n Mango: \"Accent1\",\n Red: \"Accent2\",\n Raspberry: \"Accent3\",\n Pink: \"Accent4\",\n Indigo: \"Accent5\",\n Blue: \"Accent6\",\n Transparent: \"Accent6\",\n Neutral: \"Accent6\",\n Teal: \"Accent7\",\n Green: \"Accent8\",\n Grey: \"Accent10\",\n};\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-avatar</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Avatar.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n tag: \"udex-avatar\",\n renderer: jsxRenderer,\n styles: AvatarCss,\n template: AvatarTemplate,\n})\n\n/**\n * Fires when the avatar is clicked.\n *\n * @public\n */\n@event(\"click\", { bubbles: true })\n/**\n * Fires when the avatar is clicked.\n *\n * @public\n */\n@event(\"click-default\", { bubbles: true })\n\nclass UDExAvatar extends UI5Element {\n eventDetails!: {\n \"click\": void,\n \"click-default\": void,\n };\n /**\n * Defines the displayed initials.\n *\n * @default \"\"\n * @public\n */\n @property({ type: String })\n initials: string = \"\";\n\n /**\n * Defines if the avatar is interactive (focusable and pressable).\n *\n * @default false\n * @public\n */\n @property({ type: Boolean })\n interactive!: boolean;\n\n /**\n * Defines the text alternative of the component.\n *\n * @default undefined\n * @public\n */\n @property({ type: String })\n accessibleName?: string;\n\n /**\n * Defines the design of the component.\n *\n * @default \"Blue\"\n * @public\n */\n @property()\n colorScheme: `${UDExAvatarColorScheme}` = UDExAvatarColorScheme.Blue;\n\n /**\n * Defines whether the component is disabled.\n *\n * @default false\n * @public\n */\n @property({ type: Boolean })\n disabled!: boolean;\n\n /**\n * Defines the name of the fallback icon.\n *\n * @default \"employee\"\n * @public\n */\n @property({ type: String })\n fallbackIcon: string = \"employee\";\n\n /**\n * Defines the name of the UI5 Icon, that will be displayed.\n *\n * @default \"\"\n * @public\n */\n @property({ type: String })\n icon: string = \"\";\n\n /**\n * Defines the shape of the component.\n *\n * @default \"Circle\"\n * @public\n */\n @property()\n shape: `${UDExAvatarShape}` = UDExAvatarShape.Circle;\n\n /**\n * Defines predefined size of the component.\n *\n * @default \"S\"\n * @public\n */\n @property()\n size: `${UDExAvatarSize}` = UDExAvatarSize.S;\n\n /**\n * Defines the displaying attention badge.\n *\n * @public\n * @default false\n */\n @property({ type: Boolean })\n showAttentionBadge!: boolean;\n\n /**\n * Receives the desired <img> tag\n *\n * @slot image\n * @public\n */\n @slot({ type: HTMLElement, \"default\": true })\n image!: DefaultSlot<HTMLElement>;\n\n /**\n * Defines the optional badge that will be used for visual affordance.\n *\n * @slot\n * @public\n */\n @slot({ type: HTMLElement })\n badge!: Slot<HTMLElement>;\n\n /**\n * @private\n */\n @property({ noAttribute: true })\n _imageErrored: boolean = false;\n\n @i18n(\"@sapudex/web-components\")\n static i18nBundle: I18nBundle;\n\n private _trackedImageElement: HTMLImageElement | null = null;\n\n private _handleImageError = (): void => {\n this._imageErrored = true;\n };\n\n private _handleImageLoad = (): void => {\n if (this._imageErrored) {\n this._imageErrored = false;\n }\n };\n\n private _syncImageListener(): void {\n const newImage = this.image.find((el): el is HTMLImageElement => el instanceof HTMLImageElement) ?? null;\n\n if (newImage === this._trackedImageElement) {\n return;\n }\n\n if (this._trackedImageElement) {\n this._trackedImageElement.removeEventListener(\"error\", this._handleImageError);\n this._trackedImageElement.removeEventListener(\"load\", this._handleImageLoad);\n }\n\n this._trackedImageElement = newImage;\n\n if (newImage) {\n newImage.addEventListener(\"error\", this._handleImageError);\n newImage.addEventListener(\"load\", this._handleImageLoad);\n\n if (newImage.complete && newImage.src) {\n this._imageErrored = !newImage.naturalWidth;\n return;\n }\n }\n\n if (this._imageErrored) {\n this._imageErrored = false;\n }\n }\n\n onAfterRendering(): void {\n this.title = this.initials;\n this._syncImageListener();\n }\n handleClick(e: Event) {\n e.stopPropagation();\n if (this.interactive) {\n this.fireDecoratorEvent(\"click\");\n return;\n }\n this.fireDecoratorEvent(\"click-default\");\n }\n\n /**\n * Returns the effective avatar size.\n * @default \"S\"\n * @private\n */\n get effectiveSize(): UDExAvatarSize {\n // we read the attribute, because the \"size\" property will always have a default value\n return this.getAttribute(\"size\") as UDExAvatarSize || this.size;\n }\n\n /**\n * Returns the effective background color.\n * @default \"Blue\"\n * @private\n */\n get effectiveBackgroundColor(): UDExAvatarColorScheme {\n // we read the attribute, because the \"background-color\" property will always have a default value\n return this.getAttribute(\"color-scheme\") as UDExAvatarColorScheme || this.colorScheme;\n }\n\n get getUDExAvatarColorScheme(): AvatarColorScheme {\n return UDExToUi5ColorSchemeMap[this.colorScheme] as AvatarColorScheme;\n }\n\n get imageSlot(): boolean {\n return !!this.image.length;\n }\n\n get badgeSlot(): boolean {\n return !!this.badge.length;\n }\n\n get udexAvatarClass(): string {\n let avatarClass = \"udex-avatar\";\n\n if (this.imageSlot && !this._imageErrored) {\n avatarClass += \" udex-avatar--with-image\";\n }\n\n return avatarClass;\n }\n\n get avatarAccessibleName(): string {\n let accName = `${this.accessibleName ? this.accessibleName : `${translate(UDExAvatar, AVATAR_TEXT)} ${this.initials}`}`;\n accName += ` ${this.disabled ? translate(UDExAvatar, DISABLED) : \"\"}`;\n accName += ` ${this.showAttentionBadge ? translate(UDExAvatar, ATTENTION_BADGE) : \"\"}`;\n return accName;\n }\n}\n\nUDExAvatar.define();\n\nexport default UDExAvatar;\n"]}
package/dist/Badge.js CHANGED
@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
7
7
  import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
8
8
  import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
9
9
  import property from "@ui5/webcomponents-base/dist/decorators/property.js";
10
- import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
10
+ import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
11
11
  import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
12
12
  import BadgeTemplate from "./BadgeTemplate.js";
13
13
  import UDExIconPlacement from "./types/IconPlacement.js";
package/dist/Badge.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Badge.js","sourceRoot":"","sources":["../src/Badge.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AAEpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,aAAa,MAAM,oBAAoB,CAAC;AAC/C,OAAO,iBAAiB,MAAM,0BAA0B,CAAC;AACzD,OAAO,EACL,qBAAqB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,mBAAmB,GACrF,MAAM,wBAAwB,CAAC;AAEhC,SAAS;AACT,OAAO,QAAQ,MAAM,iCAAiC,CAAC;AAEvD;;;;;;;;;;;;;;;GAeG;AAQH,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QACE;;;;;WAKG;QAED,SAAI,GAA6B,mBAAmB,CAAC,IAAI,CAAC;QAE5D;;;;;WAKG;QAED,SAAI,GAA6B,mBAAmB,CAAC,MAAM,CAAC;QAE9D;;;;;WAKG;QAED,WAAM,GAA6B,mBAAmB,CAAC,WAAW,CAAC;QAErE;;;;;WAKG;QAED,iBAAY,GAA+B,qBAAqB,CAAC,IAAI,CAAC;QAExE;;;;;UAKE;QAEA,kBAAa,GAA2B,iBAAiB,CAAC,GAAG,CAAC;IA0ClE,CAAC;IAvBC,IAAI,SAAS;QACX,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,aAAa,KAAK,iBAAiB,CAAC,KAAK,CAAC;IACvE,CAAC;IAED,IAAI,OAAO;QACT,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,aAAa,KAAK,iBAAiB,CAAC,GAAG,CAAC;IACrE,CAAC;IAED,IAAI,WAAW;QACb,OAAO,2CAA2C,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,gBAAgB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC;IACvH,CAAC;IAED,IAAI,aAAa;QACf,OAAO,6CAA6C,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,gBAAgB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC;IAC/H,CAAC;IAED,IAAI,YAAY;QACd,IAAI,IAAI,CAAC,IAAI,KAAK,mBAAmB,CAAC,MAAM,EAAE,CAAC;YAC7C,OAAO,IAAI,CAAC,WAAW,CAAC;QAC1B,CAAC;QAED,OAAO,IAAI,CAAC,aAAa,CAAC;IAC5B,CAAC;CACF,CAAA;AA9EG;IADD,QAAQ,EAAE;uCACiD;AAS1D;IADD,QAAQ,EAAE;uCACmD;AAS5D;IADD,QAAQ,EAAE;yCAC0D;AASnE;IADD,QAAQ,EAAE;+CAC6D;AAStE;IADD,QAAQ,EAAE;gDACqD;AAS9D;IADD,QAAQ,EAAE;uCACK;AAQd;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;0CACR;AA7D1B,SAAS;IAPd,aAAa,CAAC;QACb,GAAG,EAAE,YAAY;QACjB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,QAAQ;QAChB,QAAQ,EAAE,aAAa;KACxB,CAAC;GAEI,SAAS,CAsFd;AAED,SAAS,CAAC,MAAM,EAAE,CAAC;AAEnB,eAAe,SAAS,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport BadgeTemplate from \"./BadgeTemplate.js\";\nimport UDExIconPlacement from \"./types/IconPlacement.js\";\nimport {\n UDExNumberBadgeDesign, UDExSizeBadgeDesign, UDExTextBadgeDesign, UDExTypeBadgeDesign,\n} from \"./types/BadgeDesign.js\";\n\n// Styles\nimport BadgeCss from \"./generated/themes/Badge.css.js\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-badge</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Badge.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n tag: \"udex-badge\",\n renderer: jsxRenderer,\n styles: BadgeCss,\n template: BadgeTemplate,\n})\n\nclass UDExBadge extends UI5Element {\n /**\n * Defines the type of the component.\n *\n * @default \"Text\"\n * @public\n */\n @property()\n type: `${UDExTypeBadgeDesign}` = UDExTypeBadgeDesign.Text;\n\n /**\n * Defines the size of the component.\n *\n * @default \"Medium\"\n * @public\n */\n @property()\n size: `${UDExSizeBadgeDesign}` = UDExSizeBadgeDesign.Medium;\n\n /**\n * Defines the design of text type component.\n *\n * @default \"Information\"\n * @public\n */\n @property()\n design: `${UDExTextBadgeDesign}` = UDExTextBadgeDesign.Information;\n\n /**\n * Defines the design of number type component.\n *\n * @default \"Blue\"\n * @public\n */\n @property()\n numberDesign: `${UDExNumberBadgeDesign}` = UDExNumberBadgeDesign.Blue;\n\n /**\n * Defines icon placement if icon was provided\n *\n * @default \"End\"\n * @public\n */\n @property()\n iconPlacement: `${UDExIconPlacement}` = UDExIconPlacement.End;\n\n /**\n * Defines icon name\n *\n * @default \"\"\n * @public\n */\n @property()\n icon!: string;\n\n /**\n * Defines the content of the component.\n *\n * @public\n */\n @slot({ type: Node, \"default\": true })\n default!: DefaultSlot<Node>;\n\n get startIcon(): boolean {\n return !!this.icon && this.iconPlacement === UDExIconPlacement.Start;\n }\n\n get endIcon(): boolean {\n return !!this.icon && this.iconPlacement === UDExIconPlacement.End;\n }\n\n get textClasses(): string {\n return `udex-badge udex-badge--text udex-badge--${this.design.toLowerCase()} udex-badge--${this.size.toLowerCase()}`;\n }\n\n get numberClasses(): string {\n return `udex-badge udex-badge--number udex-badge--${this.numberDesign.toLowerCase()} udex-badge--${this.size.toLowerCase()}`;\n }\n\n get badgeClasses(): string {\n if (this.type !== UDExTypeBadgeDesign.Number) {\n return this.textClasses;\n }\n\n return this.numberClasses;\n }\n}\n\nUDExBadge.define();\n\nexport default UDExBadge;\n"]}
1
+ {"version":3,"file":"Badge.js","sourceRoot":"","sources":["../src/Badge.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AAEpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,wDAAwD,CAAC;AAC1E,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,aAAa,MAAM,oBAAoB,CAAC;AAC/C,OAAO,iBAAiB,MAAM,0BAA0B,CAAC;AACzD,OAAO,EACL,qBAAqB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,mBAAmB,GACrF,MAAM,wBAAwB,CAAC;AAEhC,SAAS;AACT,OAAO,QAAQ,MAAM,iCAAiC,CAAC;AAEvD;;;;;;;;;;;;;;;GAeG;AAQH,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QACE;;;;;WAKG;QAED,SAAI,GAA6B,mBAAmB,CAAC,IAAI,CAAC;QAE5D;;;;;WAKG;QAED,SAAI,GAA6B,mBAAmB,CAAC,MAAM,CAAC;QAE9D;;;;;WAKG;QAED,WAAM,GAA6B,mBAAmB,CAAC,WAAW,CAAC;QAErE;;;;;WAKG;QAED,iBAAY,GAA+B,qBAAqB,CAAC,IAAI,CAAC;QAExE;;;;;UAKE;QAEA,kBAAa,GAA2B,iBAAiB,CAAC,GAAG,CAAC;IA0ClE,CAAC;IAvBC,IAAI,SAAS;QACX,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,aAAa,KAAK,iBAAiB,CAAC,KAAK,CAAC;IACvE,CAAC;IAED,IAAI,OAAO;QACT,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,aAAa,KAAK,iBAAiB,CAAC,GAAG,CAAC;IACrE,CAAC;IAED,IAAI,WAAW;QACb,OAAO,2CAA2C,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,gBAAgB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC;IACvH,CAAC;IAED,IAAI,aAAa;QACf,OAAO,6CAA6C,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,gBAAgB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC;IAC/H,CAAC;IAED,IAAI,YAAY;QACd,IAAI,IAAI,CAAC,IAAI,KAAK,mBAAmB,CAAC,MAAM,EAAE,CAAC;YAC7C,OAAO,IAAI,CAAC,WAAW,CAAC;QAC1B,CAAC;QAED,OAAO,IAAI,CAAC,aAAa,CAAC;IAC5B,CAAC;CACF,CAAA;AA9EG;IADD,QAAQ,EAAE;uCACiD;AAS1D;IADD,QAAQ,EAAE;uCACmD;AAS5D;IADD,QAAQ,EAAE;yCAC0D;AASnE;IADD,QAAQ,EAAE;+CAC6D;AAStE;IADD,QAAQ,EAAE;gDACqD;AAS9D;IADD,QAAQ,EAAE;uCACK;AAQd;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;0CACR;AA7D1B,SAAS;IAPd,aAAa,CAAC;QACb,GAAG,EAAE,YAAY;QACjB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,QAAQ;QAChB,QAAQ,EAAE,aAAa;KACxB,CAAC;GAEI,SAAS,CAsFd;AAED,SAAS,CAAC,MAAM,EAAE,CAAC;AAEnB,eAAe,SAAS,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport BadgeTemplate from \"./BadgeTemplate.js\";\nimport UDExIconPlacement from \"./types/IconPlacement.js\";\nimport {\n UDExNumberBadgeDesign, UDExSizeBadgeDesign, UDExTextBadgeDesign, UDExTypeBadgeDesign,\n} from \"./types/BadgeDesign.js\";\n\n// Styles\nimport BadgeCss from \"./generated/themes/Badge.css.js\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-badge</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Badge.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n tag: \"udex-badge\",\n renderer: jsxRenderer,\n styles: BadgeCss,\n template: BadgeTemplate,\n})\n\nclass UDExBadge extends UI5Element {\n /**\n * Defines the type of the component.\n *\n * @default \"Text\"\n * @public\n */\n @property()\n type: `${UDExTypeBadgeDesign}` = UDExTypeBadgeDesign.Text;\n\n /**\n * Defines the size of the component.\n *\n * @default \"Medium\"\n * @public\n */\n @property()\n size: `${UDExSizeBadgeDesign}` = UDExSizeBadgeDesign.Medium;\n\n /**\n * Defines the design of text type component.\n *\n * @default \"Information\"\n * @public\n */\n @property()\n design: `${UDExTextBadgeDesign}` = UDExTextBadgeDesign.Information;\n\n /**\n * Defines the design of number type component.\n *\n * @default \"Blue\"\n * @public\n */\n @property()\n numberDesign: `${UDExNumberBadgeDesign}` = UDExNumberBadgeDesign.Blue;\n\n /**\n * Defines icon placement if icon was provided\n *\n * @default \"End\"\n * @public\n */\n @property()\n iconPlacement: `${UDExIconPlacement}` = UDExIconPlacement.End;\n\n /**\n * Defines icon name\n *\n * @default \"\"\n * @public\n */\n @property()\n icon!: string;\n\n /**\n * Defines the content of the component.\n *\n * @public\n */\n @slot({ type: Node, \"default\": true })\n default!: DefaultSlot<Node>;\n\n get startIcon(): boolean {\n return !!this.icon && this.iconPlacement === UDExIconPlacement.Start;\n }\n\n get endIcon(): boolean {\n return !!this.icon && this.iconPlacement === UDExIconPlacement.End;\n }\n\n get textClasses(): string {\n return `udex-badge udex-badge--text udex-badge--${this.design.toLowerCase()} udex-badge--${this.size.toLowerCase()}`;\n }\n\n get numberClasses(): string {\n return `udex-badge udex-badge--number udex-badge--${this.numberDesign.toLowerCase()} udex-badge--${this.size.toLowerCase()}`;\n }\n\n get badgeClasses(): string {\n if (this.type !== UDExTypeBadgeDesign.Number) {\n return this.textClasses;\n }\n\n return this.numberClasses;\n }\n}\n\nUDExBadge.define();\n\nexport default UDExBadge;\n"]}
@@ -9,7 +9,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
9
9
  import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
10
10
  import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
11
11
  import property from "@ui5/webcomponents-base/dist/decorators/property.js";
12
- import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
12
+ import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
13
13
  import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
14
14
  import { isTabNext, isTabPrevious } from "@ui5/webcomponents-base/dist/Keys.js";
15
15
  import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
@@ -1 +1 @@
1
- {"version":3,"file":"Breadcrumbs.js","sourceRoot":"","sources":["../src/Breadcrumbs.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport { isTabNext, isTabPrevious } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport UI5Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport type { LinkClickEventDetail } from \"@ui5/webcomponents/dist/Link.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport UI5BreadcrumbsCss from \"@ui5/webcomponents/dist/generated/themes/Breadcrumbs.css.js\";\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-down.js\";\nimport \"@ui5/webcomponents-icons/dist/home.js\";\nimport BreadcrumbsTemplate from \"./BreadcrumbsTemplate.js\";\nimport UDExBreadcrumbsItem from \"./BreadcrumbsItem.js\";\nimport UDExDropdown from \"./Dropdown.js\";\nimport UDExLink from \"./Link.js\";\nimport {\n AVAILABLE_VALUES,\n BREADCRUMBS_ARIA_LABEL,\n BREADCRUMBS_OVERFLOW_ARIA_LABEL,\n OF,\n} from \"./generated/i18n/i18n-defaults.js\";\nimport translate from \"./utils/translate.js\";\nimport type { AccessibilityAttributes } from \"@ui5/webcomponents-base/dist/types.js\";\n\n// Styles\nimport BreadcrumbsCss from \"./generated/themes/Breadcrumbs.css.js\";\nimport BreadcrumbsPopoverCss from \"./generated/themes/BreadcrumbsPopover.css.js\";\n\ntype UDExBreadcrumbsItemClickEventDetail = {\n item: UDExBreadcrumbsItem;\n altKey?: boolean;\n ctrlKey?: boolean;\n metaKey?: boolean;\n shiftKey?: boolean;\n source?: UDExBreadcrumbsClickEventSource;\n}\n\nenum UDExBreadcrumbsClickEventSource {\n Main = \"main\",\n Dropdown = \"dropdown\",\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-breadcrumbs</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Breadcrumbs.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n tag: \"udex-breadcrumbs\",\n renderer: jsxRenderer,\n styles: [UI5BreadcrumbsCss, BreadcrumbsCss, BreadcrumbsPopoverCss],\n template: BreadcrumbsTemplate,\n dependencies: [UDExBreadcrumbsItem, UDExLink, UDExDropdown, UI5Icon],\n})\n/**\n * @public\n * @param { UDExBreadcrumbsItem } item The clicked breadcrumb item\n * @param { boolean } altKey\n * @param { boolean } ctrlKey\n * @param { boolean } metaKey\n * @param { boolean } shiftKey\n * @param { UDExBreadcrumbsClickEventSource } source The source of the click event\n */\n@event(\"item-click\", { cancelable: true, bubbles: true })\n\n/**\n * Fired after the dropdown is opened.\n *\n * @public\n */\n@event(\"open\", { bubbles: true })\n\n/**\n * Fired after the dropdown is closed.\n *\n * @public\n */\n@event(\"close\", { bubbles: true })\n\nclass UDExBreadcrumbs extends UI5Element {\n eventDetails!: {\n \"item-click\": UDExBreadcrumbsItemClickEventDetail,\n \"open\": void,\n \"close\": void,\n };\n /**\n * Defines how many breadcrumb items should be visible\n *\n * @default 3\n * @public\n */\n @property({ type: Number })\n showItems: number = 3;\n\n /**\n * Defines whether the current page item is displayed in the main navigation path.\n * When set to `true`, the current page is shown as a non-interactive label at the end of the breadcrumb trail.\n * By default, the current page is hidden from the main path and only visible in the dropdown.\n *\n * @default false\n * @public\n */\n @property({ type: Boolean })\n showCurrentPage: boolean = false;\n\n /**\n * Indicates if dropdown is opened\n *\n * @default false\n * @private\n */\n @property({ noAttribute: true, type: Boolean })\n _dropdownOpened: boolean = false;\n\n /**\n * Defines the component items.\n *\n * **Note:** Use the `udex-breadcrumbs-item` component to define the desired items.\n * @public\n */\n @slot({ type: HTMLElement, invalidateOnChildChange: true, \"default\": true })\n items!: DefaultSlot<UDExBreadcrumbsItem>;\n\n @i18n(\"@sapudex/web-components\")\n static i18nBundle: I18nBundle;\n\n _responsivePopover?: UDExDropdown;\n _shouldFocusFirstVisibleItem!: boolean;\n _rootClass: string;\n\n constructor() {\n super();\n this._rootClass = \"udex-breadcrumbs\";\n }\n\n onBeforeRendering(): void {\n this._preprocessItems();\n }\n\n onAfterRendering(): void {\n this._responsivePopover = this._getResponsePopover();\n this._dropdownArrowLink.forcedTabIndex = \"0\";\n this._handleOutsideClick();\n\n if (this._shouldFocusFirstVisibleItem) {\n this._getFocusableItems()[1].focus();\n this._shouldFocusFirstVisibleItem = false;\n }\n }\n\n _preprocessItems(): void {\n this.items.forEach(item => {\n item._getRealDomRef = () => this.getDomRef()!.querySelector(`[data-ui5-stable*=${item.stableDomRef}]`)!;\n });\n }\n\n _getResponsePopover(): UDExDropdown {\n return this.shadowRoot!.querySelector<UDExDropdown>(`#udex-${this.__id!}-breadcrumbs__popover`)!;\n }\n\n _getFocusableItems(): Array<UDExLink> {\n const items = this._links;\n items.unshift(this._dropdownArrowLink);\n\n return items;\n }\n\n _getItems(): Array<UDExBreadcrumbsItem> {\n return this.getSlottedNodes<UDExBreadcrumbsItem>(\"items\");\n }\n\n _onDropdownLinkPress(e: CustomEvent<LinkClickEventDetail>): void {\n const listItem = e.target as HTMLElement,\n items = this._getItems(),\n item = items.find(x => `${x._id}-li` === listItem.id)!;\n\n if (item._isCurrentPageItem) {\n return;\n }\n\n if (this.fireDecoratorEvent(\"item-click\", { item, source: UDExBreadcrumbsClickEventSource.Dropdown })) {\n window.open(item.href, item.target || \"_self\", \"noopener,noreferrer\");\n this._toggleDropdown();\n }\n\n this.setDropdownCloseState();\n }\n\n _onLinkPress(e: CustomEvent<LinkClickEventDetail>): void {\n const link = e.target as UDExLink,\n items = this._getItems(),\n item = items.find(x => `${x._id}-link` === link.id)!,\n {\n altKey,\n ctrlKey,\n metaKey,\n shiftKey,\n } = e.detail;\n\n if (!this.fireDecoratorEvent(\"item-click\", {\n item,\n altKey,\n ctrlKey,\n metaKey,\n shiftKey,\n source: UDExBreadcrumbsClickEventSource.Main,\n })) {\n e.preventDefault();\n }\n\n this.setDropdownCloseState();\n }\n\n _isItemVisible(item: UDExBreadcrumbsItem): boolean {\n return !item.hidden;\n }\n\n _afterDropdownOpen(): void {\n this._dropdownOpened = true;\n this.fireDecoratorEvent(\"open\");\n }\n\n _afterDropdownClose(): void {\n this._dropdownOpened = false;\n this.fireDecoratorEvent(\"close\");\n }\n\n _toggleDropdown(): void {\n if (this._responsivePopover) {\n this._responsivePopover.open = !this._responsivePopover.open;\n this._dropdownOpened = !this._dropdownOpened;\n }\n }\n\n _handleKeydown(e: KeyboardEvent): void {\n const itemIndex = (e.target as HTMLElement).getAttribute(\"data-index\");\n const isLastItem = itemIndex === (this.items.length - 2).toString();\n const isFirstItem = itemIndex === \"0\";\n\n if (isTabNext(e) && isLastItem) {\n this._shouldFocusFirstVisibleItem = true;\n this._toggleDropdown();\n return;\n }\n\n if (isTabPrevious(e) && isFirstItem) {\n e.preventDefault();\n this._dropdownArrowLink.focus();\n this._toggleDropdown();\n }\n }\n\n _handleOutsideClick(): void {\n document.addEventListener(\"mousedown\", (e: Event) => {\n if (e.target !== this) {\n this.setDropdownCloseState();\n }\n });\n }\n\n setDropdownCloseState(): void {\n if (this._responsivePopover) {\n this._dropdownOpened = false;\n }\n }\n\n /**\n * Getter for the interactive element that opens the overflow\n * @private\n */\n get _dropdownArrowLink(): UDExLink {\n return this.shadowRoot!.querySelector<UDExLink>(\".udex-breadcrumbs__trigger\")!;\n }\n\n /**\n * Getter for the list of links corresponding to the abstract breadcrumb items\n */\n get _links(): Array<UDExLink> {\n return Array.from(this.shadowRoot!.querySelectorAll<UDExLink>(\".udex-breadcrumbs__link-wrapper [udex-link]\"));\n }\n\n /**\n * Getter for the list of abstract breadcrumb items to be rendered as links outside the overflow\n */\n get _linksData(): Array<UDExBreadcrumbsItem> {\n const items = this._visibleItems;\n const itemsCount = items.length;\n\n return items\n .map((item, index) => {\n item._isCurrentPageItem = index === (itemsCount - 1);\n return item;\n });\n }\n\n get _visibleItems(): Array<UDExBreadcrumbsItem> {\n const items = this._getItems();\n const itemsLength = this.showItems ?? 0;\n\n return this._getItems()\n .slice(Math.max(items.length - itemsLength - 1, 0))\n .filter(i => this._isItemVisible(i));\n }\n\n get _dropdownItems(): Array<UDExBreadcrumbsItem> {\n return this._getItems().filter(i => this._isItemVisible(i));\n }\n\n get _triggerAccessibilityAttributes(): Pick<AccessibilityAttributes, \"hasPopup\" | \"expanded\"> {\n return {\n hasPopup: \"listbox\" as const,\n expanded: this._dropdownOpened ? \"true\" : \"false\",\n };\n }\n\n get _triggerClass(): string {\n const rootClass = \"udex-breadcrumbs\";\n return this._dropdownOpened ? `${rootClass} ${rootClass}__trigger--opened` : rootClass;\n }\n\n get _breadcrumbsAccessibleNameText(): string {\n return translate(UDExBreadcrumbs, BREADCRUMBS_ARIA_LABEL);\n }\n\n get _dropdownArrowAccessibleNameText(): string {\n return translate(UDExBreadcrumbs, BREADCRUMBS_OVERFLOW_ARIA_LABEL);\n }\n\n get _dropdownAccessibleNameText(): string {\n return translate(UDExBreadcrumbs, AVAILABLE_VALUES);\n }\n\n get _ofText(): string {\n return translate(UDExBreadcrumbs, OF);\n }\n}\n\nUDExBreadcrumbs.define();\n\nexport default UDExBreadcrumbs;\nexport type { UDExBreadcrumbsItemClickEventDetail };\n"]}
1
+ {"version":3,"file":"Breadcrumbs.js","sourceRoot":"","sources":["../src/Breadcrumbs.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport { isTabNext, isTabPrevious } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport UI5Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport type { LinkClickEventDetail } from \"@ui5/webcomponents/dist/Link.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport UI5BreadcrumbsCss from \"@ui5/webcomponents/dist/generated/themes/Breadcrumbs.css.js\";\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-down.js\";\nimport \"@ui5/webcomponents-icons/dist/home.js\";\nimport BreadcrumbsTemplate from \"./BreadcrumbsTemplate.js\";\nimport UDExBreadcrumbsItem from \"./BreadcrumbsItem.js\";\nimport UDExDropdown from \"./Dropdown.js\";\nimport UDExLink from \"./Link.js\";\nimport {\n AVAILABLE_VALUES,\n BREADCRUMBS_ARIA_LABEL,\n BREADCRUMBS_OVERFLOW_ARIA_LABEL,\n OF,\n} from \"./generated/i18n/i18n-defaults.js\";\nimport translate from \"./utils/translate.js\";\nimport type { AccessibilityAttributes } from \"@ui5/webcomponents-base/dist/types.js\";\n\n// Styles\nimport BreadcrumbsCss from \"./generated/themes/Breadcrumbs.css.js\";\nimport BreadcrumbsPopoverCss from \"./generated/themes/BreadcrumbsPopover.css.js\";\n\ntype UDExBreadcrumbsItemClickEventDetail = {\n item: UDExBreadcrumbsItem;\n altKey?: boolean;\n ctrlKey?: boolean;\n metaKey?: boolean;\n shiftKey?: boolean;\n source?: UDExBreadcrumbsClickEventSource;\n}\n\nenum UDExBreadcrumbsClickEventSource {\n Main = \"main\",\n Dropdown = \"dropdown\",\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-breadcrumbs</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Breadcrumbs.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n tag: \"udex-breadcrumbs\",\n renderer: jsxRenderer,\n styles: [UI5BreadcrumbsCss, BreadcrumbsCss, BreadcrumbsPopoverCss],\n template: BreadcrumbsTemplate,\n dependencies: [UDExBreadcrumbsItem, UDExLink, UDExDropdown, UI5Icon],\n})\n/**\n * @public\n * @param { UDExBreadcrumbsItem } item The clicked breadcrumb item\n * @param { boolean } altKey\n * @param { boolean } ctrlKey\n * @param { boolean } metaKey\n * @param { boolean } shiftKey\n * @param { UDExBreadcrumbsClickEventSource } source The source of the click event\n */\n@event(\"item-click\", { cancelable: true, bubbles: true })\n\n/**\n * Fired after the dropdown is opened.\n *\n * @public\n */\n@event(\"open\", { bubbles: true })\n\n/**\n * Fired after the dropdown is closed.\n *\n * @public\n */\n@event(\"close\", { bubbles: true })\n\nclass UDExBreadcrumbs extends UI5Element {\n eventDetails!: {\n \"item-click\": UDExBreadcrumbsItemClickEventDetail,\n \"open\": void,\n \"close\": void,\n };\n /**\n * Defines how many breadcrumb items should be visible\n *\n * @default 3\n * @public\n */\n @property({ type: Number })\n showItems: number = 3;\n\n /**\n * Defines whether the current page item is displayed in the main navigation path.\n * When set to `true`, the current page is shown as a non-interactive label at the end of the breadcrumb trail.\n * By default, the current page is hidden from the main path and only visible in the dropdown.\n *\n * @default false\n * @public\n */\n @property({ type: Boolean })\n showCurrentPage: boolean = false;\n\n /**\n * Indicates if dropdown is opened\n *\n * @default false\n * @private\n */\n @property({ noAttribute: true, type: Boolean })\n _dropdownOpened: boolean = false;\n\n /**\n * Defines the component items.\n *\n * **Note:** Use the `udex-breadcrumbs-item` component to define the desired items.\n * @public\n */\n @slot({ type: HTMLElement, invalidateOnChildChange: true, \"default\": true })\n items!: DefaultSlot<UDExBreadcrumbsItem>;\n\n @i18n(\"@sapudex/web-components\")\n static i18nBundle: I18nBundle;\n\n _responsivePopover?: UDExDropdown;\n _shouldFocusFirstVisibleItem!: boolean;\n _rootClass: string;\n\n constructor() {\n super();\n this._rootClass = \"udex-breadcrumbs\";\n }\n\n onBeforeRendering(): void {\n this._preprocessItems();\n }\n\n onAfterRendering(): void {\n this._responsivePopover = this._getResponsePopover();\n this._dropdownArrowLink.forcedTabIndex = \"0\";\n this._handleOutsideClick();\n\n if (this._shouldFocusFirstVisibleItem) {\n this._getFocusableItems()[1].focus();\n this._shouldFocusFirstVisibleItem = false;\n }\n }\n\n _preprocessItems(): void {\n this.items.forEach(item => {\n item._getRealDomRef = () => this.getDomRef()!.querySelector(`[data-ui5-stable*=${item.stableDomRef}]`)!;\n });\n }\n\n _getResponsePopover(): UDExDropdown {\n return this.shadowRoot!.querySelector<UDExDropdown>(`#udex-${this.__id!}-breadcrumbs__popover`)!;\n }\n\n _getFocusableItems(): Array<UDExLink> {\n const items = this._links;\n items.unshift(this._dropdownArrowLink);\n\n return items;\n }\n\n _getItems(): Array<UDExBreadcrumbsItem> {\n return this.getSlottedNodes<UDExBreadcrumbsItem>(\"items\");\n }\n\n _onDropdownLinkPress(e: CustomEvent<LinkClickEventDetail>): void {\n const listItem = e.target as HTMLElement,\n items = this._getItems(),\n item = items.find(x => `${x._id}-li` === listItem.id)!;\n\n if (item._isCurrentPageItem) {\n return;\n }\n\n if (this.fireDecoratorEvent(\"item-click\", { item, source: UDExBreadcrumbsClickEventSource.Dropdown })) {\n window.open(item.href, item.target || \"_self\", \"noopener,noreferrer\");\n this._toggleDropdown();\n }\n\n this.setDropdownCloseState();\n }\n\n _onLinkPress(e: CustomEvent<LinkClickEventDetail>): void {\n const link = e.target as UDExLink,\n items = this._getItems(),\n item = items.find(x => `${x._id}-link` === link.id)!,\n {\n altKey,\n ctrlKey,\n metaKey,\n shiftKey,\n } = e.detail;\n\n if (!this.fireDecoratorEvent(\"item-click\", {\n item,\n altKey,\n ctrlKey,\n metaKey,\n shiftKey,\n source: UDExBreadcrumbsClickEventSource.Main,\n })) {\n e.preventDefault();\n }\n\n this.setDropdownCloseState();\n }\n\n _isItemVisible(item: UDExBreadcrumbsItem): boolean {\n return !item.hidden;\n }\n\n _afterDropdownOpen(): void {\n this._dropdownOpened = true;\n this.fireDecoratorEvent(\"open\");\n }\n\n _afterDropdownClose(): void {\n this._dropdownOpened = false;\n this.fireDecoratorEvent(\"close\");\n }\n\n _toggleDropdown(): void {\n if (this._responsivePopover) {\n this._responsivePopover.open = !this._responsivePopover.open;\n this._dropdownOpened = !this._dropdownOpened;\n }\n }\n\n _handleKeydown(e: KeyboardEvent): void {\n const itemIndex = (e.target as HTMLElement).getAttribute(\"data-index\");\n const isLastItem = itemIndex === (this.items.length - 2).toString();\n const isFirstItem = itemIndex === \"0\";\n\n if (isTabNext(e) && isLastItem) {\n this._shouldFocusFirstVisibleItem = true;\n this._toggleDropdown();\n return;\n }\n\n if (isTabPrevious(e) && isFirstItem) {\n e.preventDefault();\n this._dropdownArrowLink.focus();\n this._toggleDropdown();\n }\n }\n\n _handleOutsideClick(): void {\n document.addEventListener(\"mousedown\", (e: Event) => {\n if (e.target !== this) {\n this.setDropdownCloseState();\n }\n });\n }\n\n setDropdownCloseState(): void {\n if (this._responsivePopover) {\n this._dropdownOpened = false;\n }\n }\n\n /**\n * Getter for the interactive element that opens the overflow\n * @private\n */\n get _dropdownArrowLink(): UDExLink {\n return this.shadowRoot!.querySelector<UDExLink>(\".udex-breadcrumbs__trigger\")!;\n }\n\n /**\n * Getter for the list of links corresponding to the abstract breadcrumb items\n */\n get _links(): Array<UDExLink> {\n return Array.from(this.shadowRoot!.querySelectorAll<UDExLink>(\".udex-breadcrumbs__link-wrapper [udex-link]\"));\n }\n\n /**\n * Getter for the list of abstract breadcrumb items to be rendered as links outside the overflow\n */\n get _linksData(): Array<UDExBreadcrumbsItem> {\n const items = this._visibleItems;\n const itemsCount = items.length;\n\n return items\n .map((item, index) => {\n item._isCurrentPageItem = index === (itemsCount - 1);\n return item;\n });\n }\n\n get _visibleItems(): Array<UDExBreadcrumbsItem> {\n const items = this._getItems();\n const itemsLength = this.showItems ?? 0;\n\n return this._getItems()\n .slice(Math.max(items.length - itemsLength - 1, 0))\n .filter(i => this._isItemVisible(i));\n }\n\n get _dropdownItems(): Array<UDExBreadcrumbsItem> {\n return this._getItems().filter(i => this._isItemVisible(i));\n }\n\n get _triggerAccessibilityAttributes(): Pick<AccessibilityAttributes, \"hasPopup\" | \"expanded\"> {\n return {\n hasPopup: \"listbox\" as const,\n expanded: this._dropdownOpened ? \"true\" : \"false\",\n };\n }\n\n get _triggerClass(): string {\n const rootClass = \"udex-breadcrumbs\";\n return this._dropdownOpened ? `${rootClass} ${rootClass}__trigger--opened` : rootClass;\n }\n\n get _breadcrumbsAccessibleNameText(): string {\n return translate(UDExBreadcrumbs, BREADCRUMBS_ARIA_LABEL);\n }\n\n get _dropdownArrowAccessibleNameText(): string {\n return translate(UDExBreadcrumbs, BREADCRUMBS_OVERFLOW_ARIA_LABEL);\n }\n\n get _dropdownAccessibleNameText(): string {\n return translate(UDExBreadcrumbs, AVAILABLE_VALUES);\n }\n\n get _ofText(): string {\n return translate(UDExBreadcrumbs, OF);\n }\n}\n\nUDExBreadcrumbs.define();\n\nexport default UDExBreadcrumbs;\nexport type { UDExBreadcrumbsItemClickEventDetail };\n"]}
package/dist/Carousel.js CHANGED
@@ -8,7 +8,7 @@ var UDExCarousel_1;
8
8
  import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
9
9
  import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
10
10
  import property from "@ui5/webcomponents-base/dist/decorators/property.js";
11
- import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
11
+ import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
12
12
  import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
13
13
  import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
14
14
  import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
@@ -1 +1 @@
1
- {"version":3,"file":"Carousel.js","sourceRoot":"","sources":["../src/Carousel.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport {\n isUp, isDown, isRight, isLeft,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport {\n CAROUSEL_NEXT_ARROW_TEXT,\n CAROUSEL_PREVIOUS_ARROW_TEXT,\n CAROUSEL_AUTOPLAY_TOGGLE_START,\n CAROUSEL_AUTOPLAY_TOGGLE_STOP,\n} from \"./generated/i18n/i18n-defaults.js\";\nimport redirectAttributes from \"./utils/redirectAttributes.js\";\nimport type UI5Carousel from \"@ui5/webcomponents/dist/Carousel.js\";\nimport type { CarouselNavigateEventDetail } from \"@ui5/webcomponents/dist/Carousel.js\";\nimport type { UI5CustomEvent } from \"@ui5/webcomponents-base\";\nimport translate from \"./utils/translate.js\";\n\nimport CarouselTemplate from \"./CarouselTemplate.js\";\n\n// Styles\nimport CarouselCss from \"./generated/themes/Carousel.css.js\";\nimport type CarouselPageIndicatorType from \"@ui5/webcomponents/dist/types/CarouselPageIndicatorType.js\";\n\nexport enum UDExCarouselNavigationPosition {\n top = \"top\",\n bottom = \"bottom\",\n}\n\nexport enum UDExCarouselButtonDesign {\n Secondary = \"Secondary\",\n Tertiary = \"Tertiary\",\n}\n\ntype UDExCarouselAutoplayToggleEventDetails = {\n isPaused: boolean;\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-carousel</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Carousel.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @tagname udex-carousel\n * @public\n */\n@customElement({\n tag: \"udex-carousel\",\n renderer: jsxRenderer,\n styles: CarouselCss,\n template: CarouselTemplate,\n})\n/**\n * Triggered when carousel navigates to a new slide\n * @public\n * @param { CustomEvent }\n */\n@event(\"navigate\")\n/**\n * Fired event when the user click on a play/paused button.\n *\n * @public\n * @param {boolean} isPaused - Indicates current state of autoplay\n */\n@event(\"autoplay-toggle-click\", { bubbles: true })\n\nclass UDExCarousel extends UI5Element {\n eventDetails!: {\n \"navigate\": CarouselNavigateEventDetail,\n \"autoplay-toggle-click\": UDExCarouselAutoplayToggleEventDetails,\n };\n /**\n * Defines the position of the navigation.\n * <br><br>\n * Available options are:\n * <ul>\n * <li><code>top</code> - the navigation button are placed above the component.</li>\n * <li><code>bottom</code> - the navigation button arrows are placed below the component.</li>\n * </ul>\n *\n * @public\n */\n @property()\n navigationPlacement: `${UDExCarouselNavigationPosition}` = UDExCarouselNavigationPosition.top;\n /**\n * Controls carousel autoplay functionality\n * @public\n * @default undefined\n */\n @property({ type: Boolean })\n autoplay?: boolean;\n\n /**\n * Defines carousel autoplay speed in milliseconds till next slide\n * @public\n */\n @property({ type: Number })\n autoplaySpeed: number = 2000;\n\n /**\n * Indicates current state of autoplay.\n *\n * @default true\n * @private\n */\n @property({ type: Boolean })\n _autoplayIsPaused = true;\n\n /**\n * Defines whether the carousel should loop, i.e show the first page after the last page is reached and vice versa.\n * @public\n * @default false\n */\n @property({ type: Boolean })\n cyclic?: boolean;\n\n /**\n * Defines the content of the component.\n *\n * @slot\n * @public\n */\n @slot({ \"default\": true, type: HTMLElement, individualSlots: true })\n items!: DefaultSlot<HTMLElement>;\n\n /**\n * Defines the number of items per page depending on the carousel width.\n *\n * - 'S' for screens smaller than 600 pixels.\n * - 'M' for screens greater than or equal to 600 pixels and smaller than 1024 pixels.\n * - 'L' for screens greater than or equal to 1024 pixels and smaller than 1440 pixels.\n * - 'XL' for screens greater than or equal to 1440 pixels.\n *\n * One item per page is shown by default.\n * @default \"S1 M1 L1 XL1\"\n * @public\n */\n @property()\n itemsPerPage = \"S1 M1 L1 XL1\";\n\n /**\n * Defines the style of the page indicator.\n * Available options are:\n *\n * - `Default` - The page indicator will be visualized as dots if there are fewer than 9 pages. If there are more pages, the page indicator will switch to displaying the current page and the total number of pages. (e.g. X of Y)\n * - `Numeric` - The page indicator will display the current page and the total number of pages. (e.g. X of Y)\n * @since 1.10\n * @default \"Default\"\n * @public\n */\n @property()\n pageIndicatorType: `${CarouselPageIndicatorType}` = \"Default\";\n\n /**\n * Defines the prev button is disabled\n *\n * @default false\n * @private\n */\n @property({ type: Boolean, noAttribute: true })\n isPrevButtonDisabled!: boolean;\n\n /**\n * Defines the next button is disabled\n *\n * @default false\n * @private\n */\n @property({ type: Boolean, noAttribute: true })\n isNextButtonDisabled!: boolean;\n\n /**\n * Defines the accessible ARIA name of the component.\n *\n * @default ''\n * @public\n */\n @property({ type: String })\n accessibleName: string = \"\";\n\n /**\n * Tracks whether the inner carousel has multiple pages (updated after render).\n *\n * @default false\n * @private\n */\n @property({ type: Boolean, noAttribute: true })\n _hasManyPages = false;\n\n @i18n(\"@sapudex/web-components\")\n static i18nBundle: I18nBundle;\n\n _autoplayInterval: ReturnType<typeof setInterval> | null = null;\n _autoplayLastToggle = Date.now();\n _autoplayMinTimeBetweenToggle = 250;\n _autoplayManualStop = false;\n _resizeHandler: ResizeObserverCallback;\n\n constructor() {\n super();\n this._resizeHandler = this._onResize.bind(this);\n }\n\n onAfterRendering() {\n redirectAttributes(this, \"carousel\");\n\n this._calculateDisabledButtonsState();\n\n if (this._autoplayInterval === null) {\n this._startAutoplay();\n }\n }\n\n onExitDOM(): void {\n ResizeHandler.deregister(this, this._resizeHandler);\n\n if (this._autoplayInterval) {\n clearInterval(this._autoplayInterval);\n }\n }\n\n onEnterDOM(): void {\n ResizeHandler.register(this, this._resizeHandler);\n }\n\n _onResize(): void {\n this._hasManyPages = this._carousel?.hasManyPages ?? false;\n }\n\n _autoplayLoop = () => {\n const items = this._carousel?.items;\n if (!items) {\n return;\n }\n\n const currentSlide = this._carousel._currentPageIndex;\n const itemsPerPage = this._carousel.effectiveItemsPerPage;\n const isLastSlide = currentSlide === (items.length - itemsPerPage);\n\n if (isLastSlide && !this.cyclic) {\n this._stopAutoplay();\n this._autoplayManualStop = true;\n\n return;\n }\n\n const nextSlide = isLastSlide ? 0 : (currentSlide + itemsPerPage);\n\n this._carousel?.navigateTo(nextSlide);\n this._calculateDisabledButtonsState();\n };\n\n _startAutoplay(): void {\n if (!this.autoplay) {\n return;\n }\n\n if (!this._carousel?.items) {\n console.warn(\"[UDExCarousel] Cannot start autoplay on an empty carousel\");\n return;\n }\n\n const toggleBuffer = Date.now() - this._autoplayLastToggle;\n if (this._autoplayInterval !== null && toggleBuffer <= this._autoplayMinTimeBetweenToggle) {\n this._autoplayLastToggle = Date.now();\n return;\n }\n\n if (this._autoplayInterval !== null) {\n clearInterval(this._autoplayInterval);\n }\n\n this._autoplayInterval = setInterval(this._autoplayLoop, this.autoplaySpeed);\n this._autoplayIsPaused = false;\n this._autoplayLastToggle = Date.now();\n }\n\n _stopAutoplay(): void {\n if (!this._autoplayInterval) {\n return;\n }\n\n clearInterval(this._autoplayInterval);\n this._autoplayIsPaused = true;\n this._autoplayLastToggle = Date.now();\n }\n\n _onAutoplayToggleClick(): void {\n if (this._autoplayIsPaused) {\n this._startAutoplay();\n this._autoplayManualStop = false;\n } else {\n this._stopAutoplay();\n this._autoplayManualStop = true;\n }\n\n this.fireDecoratorEvent(\"autoplay-toggle-click\", {\n isPaused: this._autoplayIsPaused,\n });\n }\n\n _onFocusIn(): void {\n this._stopAutoplay();\n }\n\n _onFocusOut(): void {\n if (!this._autoplayManualStop) {\n this._startAutoplay();\n }\n }\n\n _onMouseEnter(): void {\n this._stopAutoplay();\n }\n\n _onMouseLeave(): void {\n if (!this._autoplayManualStop) {\n this._startAutoplay();\n }\n }\n\n _calculateDisabledButtonsState() {\n this.isPrevButtonDisabled = !this._carousel?.hasPrev;\n this.isNextButtonDisabled = !this._carousel?.hasNext;\n }\n\n _prevButtonClick() {\n if (this.isPrevButtonDisabled || !this._carousel) {\n return;\n }\n\n this._carousel.navigateLeft();\n this._calculateDisabledButtonsState();\n }\n\n _nextButtonClick() {\n if (this.isNextButtonDisabled || !this._carousel) {\n return;\n }\n\n this._carousel.navigateRight();\n this._calculateDisabledButtonsState();\n }\n\n _onkeydown(e: KeyboardEvent) {\n if (isLeft(e) || isDown(e) || isRight(e) || isUp(e)) {\n this._calculateDisabledButtonsState();\n }\n }\n\n _handleNavigate(e: UI5CustomEvent<UI5Carousel, \"navigate\">): void {\n this._calculateDisabledButtonsState();\n\n this.fireDecoratorEvent(\"navigate\", e.detail);\n }\n\n get nextPageText(): string {\n return translate(UDExCarousel, CAROUSEL_NEXT_ARROW_TEXT);\n }\n\n get previousPageText(): string {\n return translate(UDExCarousel, CAROUSEL_PREVIOUS_ARROW_TEXT);\n }\n\n get carouselClass(): string {\n const classes = \"udex-carousel\";\n\n return `${classes} udex-carousel__navigation--${this.navigationPlacement}`;\n }\n\n get navigationWrapperClass(): string {\n let _class = \"udex-carousel__navigation-wrapper\";\n\n if (this.autoplay) {\n _class += \" udex-carousel__navigation-wrapper--autoplay\";\n }\n\n return _class;\n }\n\n get navigationButtonWrapperClass(): string {\n let _class = \"udex-carousel__navigation-button-wrapper\";\n\n if (this._carousel?.isPageTypeDots) {\n _class += \" udex-carousel__navigation-button-wrapper--dot-indicators\";\n }\n\n return _class;\n }\n\n get buttonDesign(): UDExCarouselButtonDesign {\n return this.navigationPlacement === UDExCarouselNavigationPosition.top\n ? UDExCarouselButtonDesign.Secondary\n : UDExCarouselButtonDesign.Tertiary;\n }\n\n get showNavigationButtons(): { top: boolean; bottom: boolean } {\n return {\n top: this.navigationPlacement === UDExCarouselNavigationPosition.top && this._hasManyPages,\n bottom: this.navigationPlacement === UDExCarouselNavigationPosition.bottom && this._hasManyPages,\n };\n }\n\n get _hidePageIndicator(): boolean {\n return this.navigationPlacement === UDExCarouselNavigationPosition.top;\n }\n\n get _carousel(): UI5Carousel | null {\n return this.shadowRoot!.querySelector<UI5Carousel>(\"[ui5-carousel]\");\n }\n\n get _isBottomNavigation(): boolean {\n return this.navigationPlacement === UDExCarouselNavigationPosition.bottom;\n }\n\n get autoplayToggleButtonTooltipText(): string {\n return this._autoplayIsPaused\n ? translate(UDExCarousel, CAROUSEL_AUTOPLAY_TOGGLE_START)\n : translate(UDExCarousel, CAROUSEL_AUTOPLAY_TOGGLE_STOP);\n }\n}\n\nUDExCarousel.define();\n\nexport default UDExCarousel;\nexport type { CarouselNavigateEventDetail, UDExCarouselAutoplayToggleEventDetails };\n"]}
1
+ {"version":3,"file":"Carousel.js","sourceRoot":"","sources":["../src/Carousel.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport {\n isUp, isDown, isRight, isLeft,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport {\n CAROUSEL_NEXT_ARROW_TEXT,\n CAROUSEL_PREVIOUS_ARROW_TEXT,\n CAROUSEL_AUTOPLAY_TOGGLE_START,\n CAROUSEL_AUTOPLAY_TOGGLE_STOP,\n} from \"./generated/i18n/i18n-defaults.js\";\nimport redirectAttributes from \"./utils/redirectAttributes.js\";\nimport type UI5Carousel from \"@ui5/webcomponents/dist/Carousel.js\";\nimport type { CarouselNavigateEventDetail } from \"@ui5/webcomponents/dist/Carousel.js\";\nimport type { UI5CustomEvent } from \"@ui5/webcomponents-base\";\nimport translate from \"./utils/translate.js\";\n\nimport CarouselTemplate from \"./CarouselTemplate.js\";\n\n// Styles\nimport CarouselCss from \"./generated/themes/Carousel.css.js\";\nimport type CarouselPageIndicatorType from \"@ui5/webcomponents/dist/types/CarouselPageIndicatorType.js\";\n\nexport enum UDExCarouselNavigationPosition {\n top = \"top\",\n bottom = \"bottom\",\n}\n\nexport enum UDExCarouselButtonDesign {\n Secondary = \"Secondary\",\n Tertiary = \"Tertiary\",\n}\n\ntype UDExCarouselAutoplayToggleEventDetails = {\n isPaused: boolean;\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-carousel</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Carousel.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @tagname udex-carousel\n * @public\n */\n@customElement({\n tag: \"udex-carousel\",\n renderer: jsxRenderer,\n styles: CarouselCss,\n template: CarouselTemplate,\n})\n/**\n * Triggered when carousel navigates to a new slide\n * @public\n * @param { CustomEvent }\n */\n@event(\"navigate\")\n/**\n * Fired event when the user click on a play/paused button.\n *\n * @public\n * @param {boolean} isPaused - Indicates current state of autoplay\n */\n@event(\"autoplay-toggle-click\", { bubbles: true })\n\nclass UDExCarousel extends UI5Element {\n eventDetails!: {\n \"navigate\": CarouselNavigateEventDetail,\n \"autoplay-toggle-click\": UDExCarouselAutoplayToggleEventDetails,\n };\n /**\n * Defines the position of the navigation.\n * <br><br>\n * Available options are:\n * <ul>\n * <li><code>top</code> - the navigation button are placed above the component.</li>\n * <li><code>bottom</code> - the navigation button arrows are placed below the component.</li>\n * </ul>\n *\n * @public\n */\n @property()\n navigationPlacement: `${UDExCarouselNavigationPosition}` = UDExCarouselNavigationPosition.top;\n /**\n * Controls carousel autoplay functionality\n * @public\n * @default undefined\n */\n @property({ type: Boolean })\n autoplay?: boolean;\n\n /**\n * Defines carousel autoplay speed in milliseconds till next slide\n * @public\n */\n @property({ type: Number })\n autoplaySpeed: number = 2000;\n\n /**\n * Indicates current state of autoplay.\n *\n * @default true\n * @private\n */\n @property({ type: Boolean })\n _autoplayIsPaused = true;\n\n /**\n * Defines whether the carousel should loop, i.e show the first page after the last page is reached and vice versa.\n * @public\n * @default false\n */\n @property({ type: Boolean })\n cyclic?: boolean;\n\n /**\n * Defines the content of the component.\n *\n * @slot\n * @public\n */\n @slot({ \"default\": true, type: HTMLElement, individualSlots: true })\n items!: DefaultSlot<HTMLElement>;\n\n /**\n * Defines the number of items per page depending on the carousel width.\n *\n * - 'S' for screens smaller than 600 pixels.\n * - 'M' for screens greater than or equal to 600 pixels and smaller than 1024 pixels.\n * - 'L' for screens greater than or equal to 1024 pixels and smaller than 1440 pixels.\n * - 'XL' for screens greater than or equal to 1440 pixels.\n *\n * One item per page is shown by default.\n * @default \"S1 M1 L1 XL1\"\n * @public\n */\n @property()\n itemsPerPage = \"S1 M1 L1 XL1\";\n\n /**\n * Defines the style of the page indicator.\n * Available options are:\n *\n * - `Default` - The page indicator will be visualized as dots if there are fewer than 9 pages. If there are more pages, the page indicator will switch to displaying the current page and the total number of pages. (e.g. X of Y)\n * - `Numeric` - The page indicator will display the current page and the total number of pages. (e.g. X of Y)\n * @since 1.10\n * @default \"Default\"\n * @public\n */\n @property()\n pageIndicatorType: `${CarouselPageIndicatorType}` = \"Default\";\n\n /**\n * Defines the prev button is disabled\n *\n * @default false\n * @private\n */\n @property({ type: Boolean, noAttribute: true })\n isPrevButtonDisabled!: boolean;\n\n /**\n * Defines the next button is disabled\n *\n * @default false\n * @private\n */\n @property({ type: Boolean, noAttribute: true })\n isNextButtonDisabled!: boolean;\n\n /**\n * Defines the accessible ARIA name of the component.\n *\n * @default ''\n * @public\n */\n @property({ type: String })\n accessibleName: string = \"\";\n\n /**\n * Tracks whether the inner carousel has multiple pages (updated after render).\n *\n * @default false\n * @private\n */\n @property({ type: Boolean, noAttribute: true })\n _hasManyPages = false;\n\n @i18n(\"@sapudex/web-components\")\n static i18nBundle: I18nBundle;\n\n _autoplayInterval: ReturnType<typeof setInterval> | null = null;\n _autoplayLastToggle = Date.now();\n _autoplayMinTimeBetweenToggle = 250;\n _autoplayManualStop = false;\n _resizeHandler: ResizeObserverCallback;\n\n constructor() {\n super();\n this._resizeHandler = this._onResize.bind(this);\n }\n\n onAfterRendering() {\n redirectAttributes(this, \"carousel\");\n\n this._calculateDisabledButtonsState();\n\n if (this._autoplayInterval === null) {\n this._startAutoplay();\n }\n }\n\n onExitDOM(): void {\n ResizeHandler.deregister(this, this._resizeHandler);\n\n if (this._autoplayInterval) {\n clearInterval(this._autoplayInterval);\n }\n }\n\n onEnterDOM(): void {\n ResizeHandler.register(this, this._resizeHandler);\n }\n\n _onResize(): void {\n this._hasManyPages = this._carousel?.hasManyPages ?? false;\n }\n\n _autoplayLoop = () => {\n const items = this._carousel?.items;\n if (!items) {\n return;\n }\n\n const currentSlide = this._carousel._currentPageIndex;\n const itemsPerPage = this._carousel.effectiveItemsPerPage;\n const isLastSlide = currentSlide === (items.length - itemsPerPage);\n\n if (isLastSlide && !this.cyclic) {\n this._stopAutoplay();\n this._autoplayManualStop = true;\n\n return;\n }\n\n const nextSlide = isLastSlide ? 0 : (currentSlide + itemsPerPage);\n\n this._carousel?.navigateTo(nextSlide);\n this._calculateDisabledButtonsState();\n };\n\n _startAutoplay(): void {\n if (!this.autoplay) {\n return;\n }\n\n if (!this._carousel?.items) {\n console.warn(\"[UDExCarousel] Cannot start autoplay on an empty carousel\");\n return;\n }\n\n const toggleBuffer = Date.now() - this._autoplayLastToggle;\n if (this._autoplayInterval !== null && toggleBuffer <= this._autoplayMinTimeBetweenToggle) {\n this._autoplayLastToggle = Date.now();\n return;\n }\n\n if (this._autoplayInterval !== null) {\n clearInterval(this._autoplayInterval);\n }\n\n this._autoplayInterval = setInterval(this._autoplayLoop, this.autoplaySpeed);\n this._autoplayIsPaused = false;\n this._autoplayLastToggle = Date.now();\n }\n\n _stopAutoplay(): void {\n if (!this._autoplayInterval) {\n return;\n }\n\n clearInterval(this._autoplayInterval);\n this._autoplayIsPaused = true;\n this._autoplayLastToggle = Date.now();\n }\n\n _onAutoplayToggleClick(): void {\n if (this._autoplayIsPaused) {\n this._startAutoplay();\n this._autoplayManualStop = false;\n } else {\n this._stopAutoplay();\n this._autoplayManualStop = true;\n }\n\n this.fireDecoratorEvent(\"autoplay-toggle-click\", {\n isPaused: this._autoplayIsPaused,\n });\n }\n\n _onFocusIn(): void {\n this._stopAutoplay();\n }\n\n _onFocusOut(): void {\n if (!this._autoplayManualStop) {\n this._startAutoplay();\n }\n }\n\n _onMouseEnter(): void {\n this._stopAutoplay();\n }\n\n _onMouseLeave(): void {\n if (!this._autoplayManualStop) {\n this._startAutoplay();\n }\n }\n\n _calculateDisabledButtonsState() {\n this.isPrevButtonDisabled = !this._carousel?.hasPrev;\n this.isNextButtonDisabled = !this._carousel?.hasNext;\n }\n\n _prevButtonClick() {\n if (this.isPrevButtonDisabled || !this._carousel) {\n return;\n }\n\n this._carousel.navigateLeft();\n this._calculateDisabledButtonsState();\n }\n\n _nextButtonClick() {\n if (this.isNextButtonDisabled || !this._carousel) {\n return;\n }\n\n this._carousel.navigateRight();\n this._calculateDisabledButtonsState();\n }\n\n _onkeydown(e: KeyboardEvent) {\n if (isLeft(e) || isDown(e) || isRight(e) || isUp(e)) {\n this._calculateDisabledButtonsState();\n }\n }\n\n _handleNavigate(e: UI5CustomEvent<UI5Carousel, \"navigate\">): void {\n this._calculateDisabledButtonsState();\n\n this.fireDecoratorEvent(\"navigate\", e.detail);\n }\n\n get nextPageText(): string {\n return translate(UDExCarousel, CAROUSEL_NEXT_ARROW_TEXT);\n }\n\n get previousPageText(): string {\n return translate(UDExCarousel, CAROUSEL_PREVIOUS_ARROW_TEXT);\n }\n\n get carouselClass(): string {\n const classes = \"udex-carousel\";\n\n return `${classes} udex-carousel__navigation--${this.navigationPlacement}`;\n }\n\n get navigationWrapperClass(): string {\n let _class = \"udex-carousel__navigation-wrapper\";\n\n if (this.autoplay) {\n _class += \" udex-carousel__navigation-wrapper--autoplay\";\n }\n\n return _class;\n }\n\n get navigationButtonWrapperClass(): string {\n let _class = \"udex-carousel__navigation-button-wrapper\";\n\n if (this._carousel?.isPageTypeDots) {\n _class += \" udex-carousel__navigation-button-wrapper--dot-indicators\";\n }\n\n return _class;\n }\n\n get buttonDesign(): UDExCarouselButtonDesign {\n return this.navigationPlacement === UDExCarouselNavigationPosition.top\n ? UDExCarouselButtonDesign.Secondary\n : UDExCarouselButtonDesign.Tertiary;\n }\n\n get showNavigationButtons(): { top: boolean; bottom: boolean } {\n return {\n top: this.navigationPlacement === UDExCarouselNavigationPosition.top && this._hasManyPages,\n bottom: this.navigationPlacement === UDExCarouselNavigationPosition.bottom && this._hasManyPages,\n };\n }\n\n get _hidePageIndicator(): boolean {\n return this.navigationPlacement === UDExCarouselNavigationPosition.top;\n }\n\n get _carousel(): UI5Carousel | null {\n return this.shadowRoot!.querySelector<UI5Carousel>(\"[ui5-carousel]\");\n }\n\n get _isBottomNavigation(): boolean {\n return this.navigationPlacement === UDExCarouselNavigationPosition.bottom;\n }\n\n get autoplayToggleButtonTooltipText(): string {\n return this._autoplayIsPaused\n ? translate(UDExCarousel, CAROUSEL_AUTOPLAY_TOGGLE_START)\n : translate(UDExCarousel, CAROUSEL_AUTOPLAY_TOGGLE_STOP);\n }\n}\n\nUDExCarousel.define();\n\nexport default UDExCarousel;\nexport type { CarouselNavigateEventDetail, UDExCarouselAutoplayToggleEventDetails };\n"]}
package/dist/Contact.js CHANGED
@@ -8,7 +8,7 @@ var UDExContact_1;
8
8
  import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
9
9
  import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
10
10
  import property from "@ui5/webcomponents-base/dist/decorators/property.js";
11
- import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
11
+ import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
12
12
  import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
13
13
  import ContactTemplate from "./ContactTemplate.js";
14
14
  import parseArrayFromString from "./utils/parseArrayFromString.js";