@sapudex/web-components 2.19.0 → 2.20.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cypress/specs/AccordionItem.cy.tsx +6 -2
- package/cypress/specs/Footer.cy.tsx +2 -1
- package/dist/Accordion.d.ts +1 -0
- package/dist/Accordion.js +7 -1
- package/dist/Accordion.js.map +1 -1
- package/dist/AccordionItem.d.ts +8 -0
- package/dist/AccordionItem.js +11 -0
- package/dist/AccordionItem.js.map +1 -1
- package/dist/AccordionItemTemplate.js +2 -2
- package/dist/AccordionItemTemplate.js.map +1 -1
- package/dist/AccordionTemplate.js +2 -2
- package/dist/AccordionTemplate.js.map +1 -1
- package/dist/assets/{InputSuggestions-EAcC3wZN.js → InputSuggestions-DOj9B3SE.js} +2 -2
- package/dist/assets/{ListItemStandardExpandableTextTemplate-Bb5Y2JOR.js → ListItemStandardExpandableTextTemplate-C6q5EhEr.js} +3 -3
- package/dist/assets/{bundle.esm-BXDoCHfu.js → bundle.esm-CmHUshBw.js} +187 -187
- package/dist/assets/parameters-bundle.css-195ykfle.js +2 -0
- package/dist/assets/parameters-bundle.css-2XlTf-8J.js +2 -0
- package/dist/assets/parameters-bundle.css-7-HTnP5E.js +2 -0
- package/dist/assets/parameters-bundle.css-B7OzyC0l.js +2 -0
- package/dist/assets/parameters-bundle.css-BJjePPyo.js +2 -0
- package/dist/assets/parameters-bundle.css-BVsx_KaG.js +2 -0
- package/dist/assets/parameters-bundle.css-BbOftqiJ.js +2 -0
- package/dist/assets/parameters-bundle.css-BpraBfJY.js +2 -0
- package/dist/assets/parameters-bundle.css-Btm09-js.js +2 -0
- package/dist/assets/parameters-bundle.css-BtvY__7H.js +2 -0
- package/dist/assets/parameters-bundle.css-CAs_WpVc.js +2 -0
- package/dist/assets/parameters-bundle.css-Cqg5HiU_.js +2 -0
- package/dist/assets/parameters-bundle.css-DIUy2Etb.js +2 -0
- package/dist/assets/parameters-bundle.css-Dn173v0e.js +2 -0
- package/dist/assets/parameters-bundle.css-QEiUG73s.js +2 -0
- package/dist/assets/parameters-bundle.css-VUmjvCcs.js +2 -0
- package/dist/css/themes/Quote.css +1 -1
- package/dist/css/themes/RatingIndicator.css +1 -1
- package/dist/css/themes/Slider.css +1 -1
- package/dist/custom-elements-internal.json +28 -2
- package/dist/custom-elements.json +28 -2
- package/dist/generated/themes/Quote.css.d.ts +1 -1
- package/dist/generated/themes/Quote.css.js +1 -1
- package/dist/generated/themes/Quote.css.js.map +1 -1
- package/dist/generated/themes/RatingIndicator.css.d.ts +1 -1
- package/dist/generated/themes/RatingIndicator.css.js +1 -1
- package/dist/generated/themes/RatingIndicator.css.js.map +1 -1
- package/dist/generated/themes/Slider.css.d.ts +1 -1
- package/dist/generated/themes/Slider.css.js +1 -1
- package/dist/generated/themes/Slider.css.js.map +1 -1
- package/dist/vscode.html-custom-data.json +14 -5
- package/dist/web-types.json +18 -5
- package/package.json +8 -8
- package/src/Accordion.ts +9 -1
- package/src/AccordionItem.ts +10 -0
- package/src/AccordionItemTemplate.tsx +2 -2
- package/src/AccordionTemplate.tsx +3 -2
- package/src/generated/themes/Quote.css.ts +1 -1
- package/src/generated/themes/RatingIndicator.css.ts +1 -1
- package/src/generated/themes/Slider.css.ts +1 -1
- package/src/themes/Quote.css +7 -2
- package/dist/assets/parameters-bundle.css-7tmaWxIc.js +0 -2
- package/dist/assets/parameters-bundle.css-BERBdAGd.js +0 -2
- package/dist/assets/parameters-bundle.css-B_2Jldx4.js +0 -2
- package/dist/assets/parameters-bundle.css-BbhFHnRW.js +0 -2
- package/dist/assets/parameters-bundle.css-Bg4Huwh4.js +0 -2
- package/dist/assets/parameters-bundle.css-BwKgmVCr.js +0 -2
- package/dist/assets/parameters-bundle.css-C759-AfS.js +0 -2
- package/dist/assets/parameters-bundle.css-CCDcKh9J.js +0 -2
- package/dist/assets/parameters-bundle.css-COmXsTqR.js +0 -2
- package/dist/assets/parameters-bundle.css-CPZYPVEO.js +0 -2
- package/dist/assets/parameters-bundle.css-C_z8R1zV.js +0 -2
- package/dist/assets/parameters-bundle.css-CuV0KqCS.js +0 -2
- package/dist/assets/parameters-bundle.css-DT8OC7CO.js +0 -2
- package/dist/assets/parameters-bundle.css-Df2zY3XY.js +0 -2
- package/dist/assets/parameters-bundle.css-H0NCnWYS.js +0 -2
- package/dist/assets/parameters-bundle.css-pC6uofhy.js +0 -2
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { UDExAccordionItemTitleSize } from "../../instrumented/AccordionItem.js";
|
|
2
2
|
import { UDExAccordionItem } from "../support/component-imports.js";
|
|
3
3
|
|
|
4
|
-
const accordionItem = <UDExAccordionItem label="Some label for item 1" numberBadge="72">
|
|
4
|
+
const accordionItem = <UDExAccordionItem label="Some label for item 1" numberBadge="72" number-badge-design="Red">
|
|
5
5
|
<div>some content<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam aut eum ipsum natus necessitatibus neque officiis repellendus totam voluptatum!</p></div>
|
|
6
6
|
</UDExAccordionItem>
|
|
7
7
|
|
|
@@ -68,6 +68,10 @@ describe('AccordionItem', () => {
|
|
|
68
68
|
it("has a badge", () => {
|
|
69
69
|
cy.get("[udex-accordion-item]").shadow().find(".udex-accordion-item__badge").should("exist").and("be.visible")
|
|
70
70
|
});
|
|
71
|
+
|
|
72
|
+
it("has a badge with number badge design", () => {
|
|
73
|
+
cy.get("[udex-accordion-item]").shadow().find(".udex-accordion-item__badge").should("have.attr", "number-design", "Red")
|
|
74
|
+
});
|
|
71
75
|
|
|
72
76
|
it("click on accordion adjust content height for animations", () => {
|
|
73
77
|
cy.mount(accordionItemWithAccordion)
|
|
@@ -83,4 +87,4 @@ describe('AccordionItem', () => {
|
|
|
83
87
|
cy.get("[udex-accordion-item]").click().realPress("Tab")
|
|
84
88
|
cy.get("@itemFocus").should("have.been.called")
|
|
85
89
|
});
|
|
86
|
-
});
|
|
90
|
+
});
|
|
@@ -83,7 +83,8 @@ describe("Footer", () => {
|
|
|
83
83
|
});
|
|
84
84
|
|
|
85
85
|
it("renders copyright", () => {
|
|
86
|
-
|
|
86
|
+
const currentYear = new Date().getFullYear();
|
|
87
|
+
cy.get("#footer").shadow().find(".udex-footer__copyright-text").first().should("have.text", `© ${currentYear} SAP SE or an SAP affiliate company. All rights reserved.`);
|
|
87
88
|
});
|
|
88
89
|
|
|
89
90
|
it("sets data-id attribute to social links", () => {
|
package/dist/Accordion.d.ts
CHANGED
|
@@ -84,6 +84,7 @@ declare class UDExAccordion extends UI5Element {
|
|
|
84
84
|
toggleOpenItems(isOpen: boolean): void;
|
|
85
85
|
toggleKeyAllHandler(e: KeyboardEvent): void;
|
|
86
86
|
keydownHandler(e: KeyboardEvent): void;
|
|
87
|
+
handleTabKey(e: KeyboardEvent): void;
|
|
87
88
|
itemFocusHandler(e: CustomEvent): void;
|
|
88
89
|
updateAllExpandedStatus(): void;
|
|
89
90
|
get toggleAllText(): string;
|
package/dist/Accordion.js
CHANGED
|
@@ -13,7 +13,7 @@ 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";
|
|
15
15
|
import "@ui5/webcomponents-icons/dist/feeder-arrow.js";
|
|
16
|
-
import { isEnter, isSpace, isEnd, isHome, isTabPrevious, isTabNext, } from "@ui5/webcomponents-base/dist/Keys.js";
|
|
16
|
+
import { isEnter, isSpace, isEnd, isHome, isTabPrevious, isTabNext, isDown, isUp, } from "@ui5/webcomponents-base/dist/Keys.js";
|
|
17
17
|
import AccordionTemplate from "./AccordionTemplate.js";
|
|
18
18
|
import { COLLAPSE_ALL, EXPAND_ALL } from "./generated/i18n/i18n-defaults.js";
|
|
19
19
|
// Styles
|
|
@@ -79,6 +79,12 @@ let UDExAccordion = UDExAccordion_1 = class UDExAccordion extends UI5Element {
|
|
|
79
79
|
}
|
|
80
80
|
}
|
|
81
81
|
keydownHandler(e) {
|
|
82
|
+
if (isDown(e) || isUp(e)) {
|
|
83
|
+
return;
|
|
84
|
+
}
|
|
85
|
+
this.handleTabKey(e);
|
|
86
|
+
}
|
|
87
|
+
handleTabKey(e) {
|
|
82
88
|
const activeItem = this._items[this._activeItemIndex];
|
|
83
89
|
const previousItem = this._items[this._activeItemIndex - 1];
|
|
84
90
|
const isLastItem = this._activeItemIndex === this._items.length - 1;
|
package/dist/Accordion.js.map
CHANGED
|
@@ -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 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,\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\";\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 */\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!: Array<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 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 ? UDExAccordion.i18nBundle.getText(COLLAPSE_ALL)\n : UDExAccordion.i18nBundle.getText(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 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\";\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 */\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!: Array<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 ? UDExAccordion.i18nBundle.getText(COLLAPSE_ALL)\n : UDExAccordion.i18nBundle.getText(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"]}
|
package/dist/AccordionItem.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
|
|
2
|
+
import { UDExNumberBadgeDesign } from "./types/BadgeDesign.js";
|
|
2
3
|
export declare enum UDExAccordionItemTitleSize {
|
|
3
4
|
Standard = "Standard",
|
|
4
5
|
Large = "Large"
|
|
@@ -38,6 +39,13 @@ declare class UDExAccordionItem extends UI5Element {
|
|
|
38
39
|
* @public
|
|
39
40
|
*/
|
|
40
41
|
numberBadge: string;
|
|
42
|
+
/**
|
|
43
|
+
* Defines the design of the number badge.
|
|
44
|
+
*
|
|
45
|
+
* @default "Blue"
|
|
46
|
+
* @public
|
|
47
|
+
*/
|
|
48
|
+
numberBadgeDesign: `${UDExNumberBadgeDesign}`;
|
|
41
49
|
/**
|
|
42
50
|
* Defines the label of the accordion item component.
|
|
43
51
|
*
|
package/dist/AccordionItem.js
CHANGED
|
@@ -14,6 +14,7 @@ import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
|
|
|
14
14
|
import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
|
|
15
15
|
import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
|
|
16
16
|
import AccordionItemTemplate from "./AccordionItemTemplate.js";
|
|
17
|
+
import { UDExNumberBadgeDesign } from "./types/BadgeDesign.js";
|
|
17
18
|
// Styles
|
|
18
19
|
import AccordionItemCss from "./generated/themes/AccordionItem.css.js";
|
|
19
20
|
export var UDExAccordionItemTitleSize;
|
|
@@ -43,6 +44,13 @@ export var UDExAccordionItemTitleSize;
|
|
|
43
44
|
let UDExAccordionItem = class UDExAccordionItem extends UI5Element {
|
|
44
45
|
constructor() {
|
|
45
46
|
super();
|
|
47
|
+
/**
|
|
48
|
+
* Defines the design of the number badge.
|
|
49
|
+
*
|
|
50
|
+
* @default "Blue"
|
|
51
|
+
* @public
|
|
52
|
+
*/
|
|
53
|
+
this.numberBadgeDesign = UDExNumberBadgeDesign.Blue;
|
|
46
54
|
/**
|
|
47
55
|
* Defines the size of label.
|
|
48
56
|
*
|
|
@@ -123,6 +131,9 @@ let UDExAccordionItem = class UDExAccordionItem extends UI5Element {
|
|
|
123
131
|
__decorate([
|
|
124
132
|
property()
|
|
125
133
|
], UDExAccordionItem.prototype, "numberBadge", void 0);
|
|
134
|
+
__decorate([
|
|
135
|
+
property()
|
|
136
|
+
], UDExAccordionItem.prototype, "numberBadgeDesign", void 0);
|
|
126
137
|
__decorate([
|
|
127
138
|
property()
|
|
128
139
|
], UDExAccordionItem.prototype, "label", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionItem.js","sourceRoot":"","sources":["../src/AccordionItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,KAAK,MAAM,yDAAyD,CAAC;AAC5E,OAAO,WAAW,MAAM,iDAAiD,CAAC;AAC1E,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,aAAa,MAAM,wDAAwD,CAAC;AACnF,OAAO,qBAAqB,MAAM,4BAA4B,CAAC;AAE/D,SAAS;AACT,OAAO,gBAAgB,MAAM,yCAAyC,CAAC;AAEvE,MAAM,CAAN,IAAY,0BAGX;AAHD,WAAY,0BAA0B;IACpC,mDAAqB,CAAA;IACrB,6CAAe,CAAA;AACjB,CAAC,EAHW,0BAA0B,KAA1B,0BAA0B,QAGrC;AAOD;;;;;;;;;;;;;;;;;;GAkBG;AAoBH,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;
|
|
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 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 */\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!: Array<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"]}
|
|
@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ui5/webcompo
|
|
|
2
2
|
import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
|
|
3
3
|
import IconMode from "@ui5/webcomponents/dist/types/IconMode.js";
|
|
4
4
|
import slimArrowRight from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
|
|
5
|
-
import {
|
|
5
|
+
import { UDExSizeBadgeDesign, UDExTypeBadgeDesign } from "./types/BadgeDesign.js";
|
|
6
6
|
import UDExBadge from "./Badge.js";
|
|
7
7
|
import UDExDivider from "./Divider.js";
|
|
8
8
|
export default function AccordionItemTemplate() {
|
|
@@ -14,6 +14,6 @@ export default function AccordionItemTemplate() {
|
|
|
14
14
|
return (_jsxs(_Fragment, { children: [_jsxs("button", { id: ariaLabelledbyId, "aria-controls": ariaControlsId, className: `${headlineClass}`, onFocusIn: this.focusHandler, onClick: this.itemClickHandler, onKeyDown: this.keydownHandler, "aria-expanded": this.expanded, type: "button", children: [this.labelIcon ?
|
|
15
15
|
_jsx("div", { className: `${rootClass}__icon-wrapper ${rootClass}__label-icon-wrapper`, children: _jsx(UI5Icon, { class: `${rootClass}__icon ${rootClass}__label-icon`, mode: IconMode.Decorative, name: this.labelIcon }) })
|
|
16
16
|
: "", _jsxs("span", { className: `${rootClass}__title`, children: [this.label, this.numberBadge &&
|
|
17
|
-
_jsx(UDExBadge, { class: `${rootClass}__badge`, "number-design":
|
|
17
|
+
_jsx(UDExBadge, { class: `${rootClass}__badge`, "number-design": this.numberBadgeDesign, type: UDExTypeBadgeDesign.Number, size: UDExSizeBadgeDesign.Medium, children: this.numberBadge })] }), _jsx("div", { className: `${rootClass}__icon-wrapper`, children: _jsx(UI5Icon, { class: `${rootClass}__icon`, mode: IconMode.Decorative, name: slimArrowRight }) })] }), _jsx("div", { id: ariaControlsId, "aria-hidden": !this.expanded, "aria-labelledby": ariaLabelledbyId, className: `${rootClass}__content ${titleClass}`, onKeyDown: this.contentKeydown, role: "region", children: _jsx("div", { className: `${rootClass}__content-inner`, children: _jsx("slot", {}) }) }), _jsx(UDExDivider, {})] }));
|
|
18
18
|
}
|
|
19
19
|
//# sourceMappingURL=AccordionItemTemplate.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionItemTemplate.js","sourceRoot":"","sources":["../src/AccordionItemTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,OAAO,MAAM,iCAAiC,CAAC;AACtD,OAAO,QAAQ,MAAM,2CAA2C,CAAC;AACjE,OAAO,cAAc,MAAM,mDAAmD,CAAC;AAC/E,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"AccordionItemTemplate.js","sourceRoot":"","sources":["../src/AccordionItemTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,OAAO,MAAM,iCAAiC,CAAC;AACtD,OAAO,QAAQ,MAAM,2CAA2C,CAAC;AACjE,OAAO,cAAc,MAAM,mDAAmD,CAAC;AAC/E,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAClF,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,WAAW,MAAM,cAAc,CAAC;AAEvC,MAAM,CAAC,OAAO,UAAU,qBAAqB;IAC3C,MAAM,cAAc,GAAG,wBAAwB,IAAI,CAAC,GAAG,UAAU,CAAC;IAClE,MAAM,gBAAgB,GAAG,wBAAwB,IAAI,CAAC,GAAG,EAAE,CAAC;IAC5D,MAAM,SAAS,GAAG,qBAAqB,CAAC;IACxC,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,SAAS,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC;IACpE,MAAM,aAAa,GAAG,GAAG,SAAS,YAAY,SAAS,aAAa,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,EAAE,CAAC;IAEnG,OAAO,CACL,8BACE,kBACE,EAAE,EAAE,gBAAgB,mBACL,cAAc,EAC7B,SAAS,EAAE,GAAG,aAAa,EAAE,EAC7B,SAAS,EAAE,IAAI,CAAC,YAAY,EAC5B,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,SAAS,EAAE,IAAI,CAAC,cAAc,mBACf,IAAI,CAAC,QAAQ,EAC5B,IAAI,EAAC,QAAQ,aACZ,IAAI,CAAC,SAAS,CAAC,CAAC;wBACf,cAAK,SAAS,EAAE,GAAG,SAAS,kBAAkB,SAAS,sBAAsB,YAC3E,KAAC,OAAO,IACN,KAAK,EAAE,GAAG,SAAS,UAAU,SAAS,cAAc,EACpD,IAAI,EAAE,QAAQ,CAAC,UAAU,EACzB,IAAI,EAAE,IAAI,CAAC,SAAS,GACZ,GACN;wBACN,CAAC,CAAC,EAAE,EACN,gBAAM,SAAS,EAAE,GAAG,SAAS,SAAS,aACnC,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,WAAW;gCACf,KAAC,SAAS,IACR,KAAK,EAAE,GAAG,SAAS,SAAS,mBACb,IAAI,CAAC,iBAAiB,EACrC,IAAI,EAAE,mBAAmB,CAAC,MAAM,EAChC,IAAI,EAAE,mBAAmB,CAAC,MAAM,YAC/B,IAAI,CAAC,WAAW,GACP,IAET,EACP,cAAK,SAAS,EAAE,GAAG,SAAS,gBAAgB,YAC1C,KAAC,OAAO,IACN,KAAK,EAAE,GAAG,SAAS,QAAQ,EAC3B,IAAI,EAAE,QAAQ,CAAC,UAAU,EACzB,IAAI,EAAE,cAAc,GACZ,GACN,IACC,EACT,cACE,EAAE,EAAE,cAAc,iBACL,CAAC,IAAI,CAAC,QAAQ,qBACV,gBAAgB,EACjC,SAAS,EAAE,GAAG,SAAS,aAAa,UAAU,EAAE,EAChD,SAAS,EAAE,IAAI,CAAC,cAAc,EAC9B,IAAI,EAAC,QAAQ,YACb,cAAK,SAAS,EAAE,GAAG,SAAS,iBAAiB,YAC3C,gBAAa,GACT,GACF,EACN,KAAC,WAAW,KAAe,IAC1B,CACJ,CAAC;AACJ,CAAC","sourcesContent":["import type AccordionItem from \"./AccordionItem.js\";\nimport UI5Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport IconMode from \"@ui5/webcomponents/dist/types/IconMode.js\";\nimport slimArrowRight from \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\nimport { UDExSizeBadgeDesign, UDExTypeBadgeDesign } from \"./types/BadgeDesign.js\";\nimport UDExBadge from \"./Badge.js\";\nimport UDExDivider from \"./Divider.js\";\n\nexport default function AccordionItemTemplate(this: AccordionItem) {\n const ariaControlsId = `udex-accordion-item__${this._id}-content`;\n const ariaLabelledbyId = `udex-accordion-item__${this._id}`;\n const rootClass = \"udex-accordion-item\";\n const titleClass = this.labelIcon ? `${rootClass}--with-title` : \"\";\n const headlineClass = `${rootClass}__header ${rootClass}__header--${this.labelSize.toLowerCase()}`;\n\n return (\n <>\n <button\n id={ariaLabelledbyId}\n aria-controls={ariaControlsId}\n className={`${headlineClass}`}\n onFocusIn={this.focusHandler}\n onClick={this.itemClickHandler}\n onKeyDown={this.keydownHandler}\n aria-expanded={this.expanded}\n type=\"button\">\n {this.labelIcon ?\n <div className={`${rootClass}__icon-wrapper ${rootClass}__label-icon-wrapper`}>\n <UI5Icon\n class={`${rootClass}__icon ${rootClass}__label-icon`}\n mode={IconMode.Decorative}\n name={this.labelIcon}>\n </UI5Icon>\n </div>\n : \"\"}\n <span className={`${rootClass}__title`}>\n {this.label}\n {this.numberBadge &&\n <UDExBadge\n class={`${rootClass}__badge`}\n number-design={this.numberBadgeDesign}\n type={UDExTypeBadgeDesign.Number}\n size={UDExSizeBadgeDesign.Medium}>\n {this.numberBadge}\n </UDExBadge>\n }\n </span>\n <div className={`${rootClass}__icon-wrapper`}>\n <UI5Icon\n class={`${rootClass}__icon`}\n mode={IconMode.Decorative}\n name={slimArrowRight}>\n </UI5Icon>\n </div>\n </button>\n <div\n id={ariaControlsId}\n aria-hidden={!this.expanded}\n aria-labelledby={ariaLabelledbyId}\n className={`${rootClass}__content ${titleClass}`}\n onKeyDown={this.contentKeydown}\n role=\"region\">\n <div className={`${rootClass}__content-inner`}>\n <slot></slot>\n </div>\n </div>\n <UDExDivider></UDExDivider>\n </>\n );\n}\n"]}
|
|
@@ -5,9 +5,9 @@ import UDExButtonDesign from "./types/ButtonDesign.js";
|
|
|
5
5
|
import { UDExAccordionHeadlineLevel } from "./Accordion.js";
|
|
6
6
|
export default function AccordionTemplate() {
|
|
7
7
|
const rootClass = "udex-accordion";
|
|
8
|
-
return (_jsxs("div", { className: rootClass,
|
|
8
|
+
return (_jsxs("div", { className: rootClass, "onui5-accordion-item-click": this.updateAllExpandedStatus, "onui5-accordion-item-focus": this.itemFocusHandler, children: [_jsxs("div", { className: `${rootClass}__head`, part: "head", children: [this.headline &&
|
|
9
9
|
headline.call(this, rootClass), !this.hideExpandButton &&
|
|
10
|
-
_jsx(UDExButton, { class: `${rootClass}__btn`, size: UDExButtonSize.Large, design: UDExButtonDesign.Tertiary, onClick: this.toggleAllHandler, onKeyDown: this.toggleKeyAllHandler, accessibleName: this.toggleAllText, children: this.toggleAllText })] }), _jsx("div", { className: `${rootClass}__content`, children: this.items.map(itemInfo => _jsx("slot", { name: itemInfo.item._individualSlot })) })] }));
|
|
10
|
+
_jsx(UDExButton, { class: `${rootClass}__btn`, size: UDExButtonSize.Large, design: UDExButtonDesign.Tertiary, onClick: this.toggleAllHandler, onKeyDown: this.toggleKeyAllHandler, accessibleName: this.toggleAllText, children: this.toggleAllText })] }), _jsx("div", { className: `${rootClass}__content`, onKeyDown: this.keydownHandler, children: this.items.map(itemInfo => _jsx("slot", { name: itemInfo.item._individualSlot })) })] }));
|
|
11
11
|
}
|
|
12
12
|
function headline(rootClass) {
|
|
13
13
|
const { headline: title, headlineLevel } = this;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionTemplate.js","sourceRoot":"","sources":["../src/AccordionTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,cAAc,MAAM,uBAAuB,CAAC;AACnD,OAAO,gBAAgB,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,0BAA0B,EAAE,MAAM,gBAAgB,CAAC;AAE5D,MAAM,CAAC,OAAO,UAAU,iBAAiB;IACvC,MAAM,SAAS,GAAG,gBAAgB,CAAC;IAEnC,OAAO,CACL,eACE,SAAS,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"AccordionTemplate.js","sourceRoot":"","sources":["../src/AccordionTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,cAAc,MAAM,uBAAuB,CAAC;AACnD,OAAO,gBAAgB,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,0BAA0B,EAAE,MAAM,gBAAgB,CAAC;AAE5D,MAAM,CAAC,OAAO,UAAU,iBAAiB;IACvC,MAAM,SAAS,GAAG,gBAAgB,CAAC;IAEnC,OAAO,CACL,eACE,SAAS,EAAE,SAAS,gCACQ,IAAI,CAAC,uBAAuB,gCAC5B,IAAI,CAAC,gBAAgB,aACjD,eAAK,SAAS,EAAE,GAAG,SAAS,QAAQ,EAAE,IAAI,EAAC,MAAM,aAC9C,IAAI,CAAC,QAAQ;wBACZ,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,SAAS,CAAC,EAE/B,CAAC,IAAI,CAAC,gBAAgB;wBACrB,KAAC,UAAU,IAAC,KAAK,EAAE,GAAG,SAAS,OAAO,EACpC,IAAI,EAAE,cAAc,CAAC,KAAK,EAC1B,MAAM,EAAE,gBAAgB,CAAC,QAAQ,EACjC,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,SAAS,EAAE,IAAI,CAAC,mBAAmB,EACnC,cAAc,EAAE,IAAI,CAAC,aAAa,YACjC,IAAI,CAAC,aAAa,GACR,IAEX,EACN,cACE,SAAS,EAAE,GAAG,SAAS,WAAW,EAClC,SAAS,EAAE,IAAI,CAAC,cAAc,YAC7B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CACzB,eAAM,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC,eAAe,GAAS,CACnD,GACG,IACF,CACP,CAAC;AACJ,CAAC;AAED,SAAS,QAAQ,CAAkB,SAAiB;IAClD,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC;IAChD,QAAQ,aAAa,EAAE,CAAC;QACxB,KAAK,0BAA0B,CAAC,EAAE;YAChC,OAAO,aAAI,SAAS,EAAE,GAAG,SAAS,YAAY,YAAG,KAAK,GAAM,CAAC;QAC/D,KAAK,0BAA0B,CAAC,EAAE;YAChC,OAAO,aAAI,SAAS,EAAE,GAAG,SAAS,YAAY,YAAG,KAAK,GAAM,CAAC;QAC/D,KAAK,0BAA0B,CAAC,EAAE;YAChC,OAAO,aAAI,SAAS,EAAE,GAAG,SAAS,YAAY,YAAG,KAAK,GAAM,CAAC;QAC/D,KAAK,0BAA0B,CAAC,EAAE;YAChC,OAAO,aAAI,SAAS,EAAE,GAAG,SAAS,YAAY,YAAG,KAAK,GAAM,CAAC;QAC/D,KAAK,0BAA0B,CAAC,EAAE;YAChC,OAAO,aAAI,SAAS,EAAE,GAAG,SAAS,YAAY,YAAG,KAAK,GAAM,CAAC;QAC/D,KAAK,0BAA0B,CAAC,EAAE;YAChC,OAAO,aAAI,SAAS,EAAE,GAAG,SAAS,YAAY,YAAG,KAAK,GAAM,CAAC;QAC/D;YACE,OAAO,aAAI,SAAS,EAAE,GAAG,SAAS,YAAY,YAAG,KAAK,GAAM,CAAC;IAC/D,CAAC;AACH,CAAC","sourcesContent":["import type Accordion from \"./Accordion.js\";\nimport UDExButton from \"./Button.js\";\nimport UDExButtonSize from \"./types/ButtonSize.js\";\nimport UDExButtonDesign from \"./types/ButtonDesign.js\";\nimport { UDExAccordionHeadlineLevel } from \"./Accordion.js\";\n\nexport default function AccordionTemplate(this: Accordion) {\n const rootClass = \"udex-accordion\";\n\n return (\n <div\n className={rootClass}\n onui5-accordion-item-click={this.updateAllExpandedStatus}\n onui5-accordion-item-focus={this.itemFocusHandler}>\n <div className={`${rootClass}__head`} part=\"head\">\n {this.headline &&\n headline.call(this, rootClass)\n }\n {!this.hideExpandButton &&\n <UDExButton class={`${rootClass}__btn`}\n size={UDExButtonSize.Large}\n design={UDExButtonDesign.Tertiary}\n onClick={this.toggleAllHandler}\n onKeyDown={this.toggleKeyAllHandler}\n accessibleName={this.toggleAllText}>\n {this.toggleAllText}\n </UDExButton>\n }\n </div>\n <div\n className={`${rootClass}__content`}\n onKeyDown={this.keydownHandler}>\n {this.items.map(itemInfo =>\n <slot name={itemInfo.item._individualSlot}></slot>\n )}\n </div>\n </div>\n );\n}\n\nfunction headline(this: Accordion, rootClass: string) {\n const { headline: title, headlineLevel } = this;\n switch (headlineLevel) {\n case UDExAccordionHeadlineLevel.H1:\n return <h1 className={`${rootClass}__headline`}>{title}</h1>;\n case UDExAccordionHeadlineLevel.H2:\n return <h2 className={`${rootClass}__headline`}>{title}</h2>;\n case UDExAccordionHeadlineLevel.H3:\n return <h3 className={`${rootClass}__headline`}>{title}</h3>;\n case UDExAccordionHeadlineLevel.H4:\n return <h4 className={`${rootClass}__headline`}>{title}</h4>;\n case UDExAccordionHeadlineLevel.H5:\n return <h5 className={`${rootClass}__headline`}>{title}</h5>;\n case UDExAccordionHeadlineLevel.H6:\n return <h6 className={`${rootClass}__headline`}>{title}</h6>;\n default:\n return <h3 className={`${rootClass}__headline`}>{title}</h3>;\n }\n}\n"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as w,j as l,a,p as x,d as P,b as R,s as p,m as v,u as S,v as y,w as O,x as L,D,c as A,z as G,I as b,A as I,F as H,B as f,R as E,C as V,G as $,H as B,J as N}from"./bundle.esm-
|
|
2
|
-
`;var g=function(n,e,t,s){var i=arguments.length,o=i<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,t):s,r;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(n,e,t,s);else for(var c=n.length-1;c>=0;c--)(r=n[c])&&(o=(i<3?r(o):i>3?r(e,t,o):r(e,t))||o);return i>3&&o&&Object.defineProperty(e,t,o),o};let h=class extends S{constructor(){super(...arguments),this.markupText=""}onEnterDOM(){y()&&this.setAttribute("desktop","")}get _effectiveTabIndex(){return-1}};g([p()],h.prototype,"text",void 0);g([p()],h.prototype,"additionalText",void 0);g([p()],h.prototype,"markupText",void 0);h=g([v({tag:"ui5-suggestion-item",template:U,styles:[S.styles,W]})],h);h.define();function J(n){const e=(n==null?void 0:n.items)||X;return a("ul",{role:"group",class:"ui5-group-li-root",onDragEnter:this._ondragenter,onDragOver:this._ondragover,onDrop:this._ondrop,onDragLeave:this._ondragleave,children:[this.hasHeader&&l(L,{focused:this.focused,part:"header",accessibleRole:O.Group,children:this.hasFormattedHeader?l("slot",{name:"header"}):this.headerText}),e.call(this),l(D,{orientation:"Horizontal",ownerReference:this})]})}function X(){return l("slot",{})}var T=function(n,e,t,s){var i=arguments.length,o=i<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,t):s,r;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(n,e,t,s);else for(var c=n.length-1;c>=0;c--)(r=n[c])&&(o=(i<3?r(o):i>3?r(e,t,o):r(e,t))||o);return i>3&&o&&Object.defineProperty(e,t,o),o};let m=class extends G{};T([A({default:!0,invalidateOnChildChange:!0,type:HTMLElement})],m.prototype,"items",void 0);m=T([v({tag:"ui5-suggestion-item-group",template:J})],m);m.define();function j(n){const e=(n==null?void 0:n.suggestionsList)||Q,t=n==null?void 0:n.mobileHeader,s=n==null?void 0:n.valueStateMessage,i=n==null?void 0:n.valueStateMessageInputIcon;return a(E,{class:this.classes.popover,hideArrow:!0,preventFocusRestore:!0,preventInitialFocus:!0,placement:"Bottom",horizontalAlign:"Start",tabindex:-1,style:this.styles.suggestionsPopover,onOpen:this._afterOpenPicker,onClose:this._afterClosePicker,onScroll:this._scroll,open:this.open,opener:this,accessibleName:this._popupLabel,children:[this._isPhone&&l(H,{children:a("div",{slot:"header",class:"ui5-responsive-popover-header",children:[l("div",{class:"row",children:l("span",{children:this._headerTitleText})}),l("div",{class:"row",children:a("div",{class:"input-root-phone native-input-wrapper",children:[l(b,{class:"ui5-input-inner-phone",type:this.inputType,value:this.value,showClearIcon:this.showClearIcon,placeholder:this.placeholder,onInput:this._handleInput}),t==null?void 0:t.call(this)]})}),this.hasValueStateMessage&&a("div",{class:this.classes.popoverValueState,style:this.styles.suggestionPopoverHeader,children:[l(I,{class:"ui5-input-value-state-message-icon",name:i==null?void 0:i.call(this)}),this.open&&(s==null?void 0:s.call(this))]})]})}),!this._isPhone&&this.hasValueStateMessage&&a("div",{slot:"header",class:{"ui5-responsive-popover-header":!0,...this.classes.popoverValueState},style:this.styles.suggestionPopoverHeader,children:[l(I,{class:"ui5-input-value-state-message-icon",name:i==null?void 0:i.call(this)}),this.open&&(s==null?void 0:s.call(this))]}),this.showSuggestions&&e.call(this),this._isPhone&&a("div",{slot:"footer",class:"ui5-responsive-popover-footer",children:[l(f,{design:"Emphasized",onClick:this._confirmMobileValue,children:this._suggestionsOkButtonText}),l(f,{class:"ui5-responsive-popover-close-btn",design:"Transparent",onClick:this._cancelMobileValue,children:this._suggestionsCancelButtonText})]})]})}function Q(){return l($,{accessibleRole:V.ListBox,separators:this.suggestionSeparators,selectionMode:"Single",onMouseDown:this.onItemMouseDown,onItemClick:this._handleSuggestionItemPress,onSelectionChange:this._handleSelectionChange,children:l("slot",{})})}class u{get template(){return j}constructor(e,t,s,i){this.component=e,this.slotName=t,this.handleFocus=i,this.highlight=s,this.selectedItemIndex=-1}onUp(e,t){e.preventDefault();const s=!this.isOpened&&this._hasValueState&&t===-1?0:t;return this._handleItemNavigation(!1,s),!0}onDown(e,t){e.preventDefault();const s=!this.isOpened&&this._hasValueState&&t===-1?0:t;return this._handleItemNavigation(!0,s),!0}onSpace(e){return this._isItemOnTarget()?(e.preventDefault(),this.onItemSelected(this._selectedItem,!0),!0):!1}onEnter(e){return this._isGroupItem?(e.preventDefault(),!1):this._isItemOnTarget()?(this.onItemSelected(this._selectedItem,!0),!0):!1}onPageUp(e){e.preventDefault();const t=this.selectedItemIndex-10>-1;return this._moveItemSelection(this.selectedItemIndex,t?this.selectedItemIndex-=10:this.selectedItemIndex=0),!0}onPageDown(e){e.preventDefault();const t=this._getItems();if(!t)return!0;const s=t.length-1,i=this.selectedItemIndex+10<=s;return this._moveItemSelection(this.selectedItemIndex,i?this.selectedItemIndex+=10:this.selectedItemIndex=s),!0}onHome(e){return e.preventDefault(),this._moveItemSelection(this.selectedItemIndex,this.selectedItemIndex=0),!0}onEnd(e){e.preventDefault();const t=this._getItems().length-1;return t&&this._moveItemSelection(this.selectedItemIndex,this.selectedItemIndex=t),!0}onTab(){return this._isItemOnTarget()?(this.onItemSelected(this._selectedItem,!0),!0):!1}toggle(e,t){(e!==void 0?e:!this.isOpened())?this._getComponent().open=!0:this.close(t.preventFocusRestore)}get _selectedItem(){return this._getNonGroupItems().find(e=>e.selected)}_isScrollable(){const e=this._getScrollContainer();return e.offsetHeight<e.scrollHeight}close(e=!1){const t=this._getItems()&&this._getItems()[this.selectedItemIndex];this._getComponent().open=!1;const s=this._getPicker();s.preventFocusRestore=e,s.open=!1,t&&t.focused&&(t.focused=!1)}updateSelectedItemPosition(e){this.selectedItemIndex=e}onItemSelected(e,t){const s=e,i=this._getNonGroupItems();s&&(this.accInfo={isGroup:s.hasAttribute("ui5-suggestion-item-group"),currentPos:i.indexOf(s)+1,listSize:i.length,itemText:s.text||"",additionalText:s.additionalText},this._getComponent().onItemSelected(s,t),this._getComponent().open=!1)}onItemSelect(e){this._getComponent().onItemSelect(e)}onItemPress(e){let t;const s=e.type==="ui5-item-click";s&&!e.detail.item.selected||this._handledPress&&!s||(s&&e.detail.item.selected?(t=e.detail.item,this._handledPress=!0):t=e.detail.selectedItems[0],this.onItemSelected(t,!1))}_onClose(){this._handledPress=!1}_isItemOnTarget(){return this.isOpened()&&this.selectedItemIndex!==null&&this.selectedItemIndex!==-1&&!this._isGroupItem}get _isGroupItem(){const e=this._getItems();return!e||!e[this.selectedItemIndex]?!1:e[this.selectedItemIndex].hasAttribute("ui5-suggestion-item-group")}isOpened(){var e;return!!((e=this._getPicker())!=null&&e.open)}_handleItemNavigation(e,t){this.selectedItemIndex=t,this._getItems().length&&(e?this._selectNextItem():this._selectPreviousItem())}_selectNextItem(){const e=this._getItems().length,t=this.selectedItemIndex;t!==-1&&t+1>e-1||this._moveItemSelection(t,++this.selectedItemIndex)}_selectPreviousItem(){const e=this._getItems(),t=this.selectedItemIndex;if(!(t===-1||t===null)){if(t-1<0){(e[t].hasAttribute("ui5-suggestion-item")||e[t].hasAttribute("ui5-suggestion-item-custom"))&&(e[t].selected=!1),e[t].focused=!1,this.component.focused=!0,this.component.hasSuggestionItemSelected=!1,this.selectedItemIndex-=1;return}this._moveItemSelection(t,--this.selectedItemIndex)}}_moveItemSelection(e,t){const s=this._getItems(),i=s[t],o=s[e],r=this._getNonGroupItems(),c=i.hasAttribute("ui5-suggestion-item-group");if(!i)return;this.component.focused=!1;const d=this._getItems()[this.selectedItemIndex];if(this.accInfo={isGroup:c,currentPos:s.indexOf(i)+1,itemText:(c?d.headerText:d.text)||""},(i.hasAttribute("ui5-suggestion-item")||i.hasAttribute("ui5-suggestion-item-custom"))&&(this.accInfo.additionalText=i.additionalText||"",this.accInfo.currentPos=r.indexOf(i)+1,this.accInfo.listSize=r.length),o&&(o.focused=!1),(o!=null&&o.hasAttribute("ui5-suggestion-item")||o!=null&&o.hasAttribute("ui5-suggestion-item-custom"))&&(o.selected=!1),i&&(i.focused=!0,c||(i.selected=!0),this.handleFocus&&i.focus()),this.component.hasSuggestionItemSelected=!0,this.onItemSelect(i),!this._isItemIntoView(i)){const C=this._isGroupItem?i.shadowRoot.querySelector("[ui5-li-group-header]"):i;this._scrollItemIntoView(C)}}_deselectItems(){this._getItems().forEach(t=>{t.hasAttribute("ui5-suggestion-item")&&(t.selected=!1),t.focused=!1})}_clearItemFocus(){const e=this._getItems().find(t=>t.focused);e&&(e.focused=!1)}_isItemIntoView(e){const t=e.getDomRef().getBoundingClientRect(),s=this._getComponent().getDomRef().getBoundingClientRect(),i=window.innerHeight||document.documentElement.clientHeight;let o=0;return this._hasValueState&&(o=this._getPicker().querySelector("[slot=header]").getBoundingClientRect().height),t.top+u.SCROLL_STEP<=i&&t.top>=s.top+o}_scrollItemIntoView(e){e.scrollIntoView({behavior:"auto",block:"nearest",inline:"nearest"})}_getScrollContainer(){return this._scrollContainer||(this._scrollContainer=this._getPicker().shadowRoot.querySelector(".ui5-popup-content")),this._scrollContainer}_getItems(){return this._getComponent().getSlottedNodes("suggestionItems").flatMap(t=>t.hasAttribute("ui5-suggestion-item-group")?[t,...t.items]:[t])}_getNonGroupItems(){return this._getItems().filter(e=>!e.hasAttribute("ui5-suggestion-item-group"))}_getComponent(){return this.component}_getList(){return this._getPicker().querySelector("[ui5-list]")}_getListWidth(){var e;return(e=this._getList())==null?void 0:e.offsetWidth}_getPicker(){return this._getComponent().shadowRoot.querySelector("[ui5-responsive-popover]")}get itemSelectionAnnounce(){if(!this.accInfo)return"";if(this.accInfo.isGroup)return`${u.i18nBundle.getText(B)} ${this.accInfo.itemText}`;const e=u.i18nBundle.getText(N,this.accInfo.currentPos||0,this.accInfo.listSize||0);return`${this.accInfo.additionalText} ${e}`}hightlightInput(e,t){return M(e,t)}get _hasValueState(){return this.component.hasValueStateMessage}_clearSelectedSuggestionAndaccInfo(){this.accInfo=void 0,this.selectedItemIndex=0}}u.SCROLL_STEP=60;b.SuggestionsClass=u;export{u as default};
|
|
1
|
+
import{r as w,j as l,a as c,p as x,d as P,b as R,s as p,m as v,u as S,v as y,w as O,x as L,D,c as A,z as G,I as b,A as I,F as H,B as f,R as E,C as V,G as $,H as B,J as N}from"./bundle.esm-CmHUshBw.js";const F=n=>n.replace(/[.*+?^${}()|[\]\\]/g,"\\$&");function _(n,e,t,s){return n.replaceAll(new RegExp(F(e),`${s?"i":""}g`),t)}function M(n,e){if(!n||!e)return n;const t=r=>{const[a,d]=r.split("");for(;n.indexOf(r)>=0||e.indexOf(r)>=0;)r=`${a}${r}${d}`;return r},s=t("12"),i=t("34");let o=w(_(n,e,r=>`${s}${r}${i}`,!0));return[[s,"<b>"],[i,"</b>"]].forEach(([r,a])=>{o=_(o,r,a,!1)}),o}function z(n,e){const t=(n==null?void 0:n.listItemContent)||q;return l("li",{part:"native-li","data-sap-focus-ref":!0,tabindex:this._effectiveTabIndex,class:this.classes.main,draggable:this.movable,role:e==null?void 0:e.role,title:e==null?void 0:e.title,onFocusIn:this._onfocusin,onKeyUp:this._onkeyup,onKeyDown:this._onkeydown,onClick:this._onclick,children:t.call(this)})}function q(){return l("div",{part:"content",id:`${this._id}-content`,class:"ui5-li-content",children:l("div",{class:"ui5-li-text-wrapper",children:l("span",{part:"title",class:"ui5-li-title",children:l("slot",{})})})})}function U(){return[z.call(this,{listItemContent:K},{role:"option"})]}function K(){return l("div",{part:"content",id:"content",class:"ui5-li-content",children:c("div",{class:"ui5-li-text-wrapper",children:[l("span",{part:"title",className:"ui5-li-title",dangerouslySetInnerHTML:{__html:this.markupText}}),this.additionalText&&l("span",{part:"additional-text",class:"ui5-li-additional-text",children:this.additionalText})]})})}x("@ui5/webcomponents-theming","sap_horizon",async()=>P);x("@ui5/webcomponents","sap_horizon",async()=>R);const W=`:host([ui5-suggestion-item]){height:auto;min-height:var(--_ui5-v2-17-0_list_item_base_height)}:host([ui5-suggestion-item]) .ui5-li-root{min-height:var(--_ui5-v2-17-0_list_item_base_height)}:host([ui5-suggestion-item]) .ui5-li-content{padding-bottom:.5rem;padding-top:.5rem;box-sizing:border-box}
|
|
2
|
+
`;var g=function(n,e,t,s){var i=arguments.length,o=i<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,t):s,r;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(n,e,t,s);else for(var a=n.length-1;a>=0;a--)(r=n[a])&&(o=(i<3?r(o):i>3?r(e,t,o):r(e,t))||o);return i>3&&o&&Object.defineProperty(e,t,o),o};let h=class extends S{constructor(){super(...arguments),this.markupText=""}onEnterDOM(){y()&&this.setAttribute("desktop","")}get _effectiveTabIndex(){return-1}};g([p()],h.prototype,"text",void 0);g([p()],h.prototype,"additionalText",void 0);g([p()],h.prototype,"markupText",void 0);h=g([v({tag:"ui5-suggestion-item",template:U,styles:[S.styles,W]})],h);h.define();function J(n){const e=(n==null?void 0:n.items)||X;return c("ul",{role:"group",class:"ui5-group-li-root",onDragEnter:this._ondragenter,onDragOver:this._ondragover,onDrop:this._ondrop,onDragLeave:this._ondragleave,children:[this.hasHeader&&l(L,{focused:this.focused,part:"header",accessibleRole:O.Group,children:this.hasFormattedHeader?l("slot",{name:"header"}):this.headerText}),e.call(this),l(D,{orientation:"Horizontal",ownerReference:this})]})}function X(){return l("slot",{})}var T=function(n,e,t,s){var i=arguments.length,o=i<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,t):s,r;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(n,e,t,s);else for(var a=n.length-1;a>=0;a--)(r=n[a])&&(o=(i<3?r(o):i>3?r(e,t,o):r(e,t))||o);return i>3&&o&&Object.defineProperty(e,t,o),o};let m=class extends G{};T([A({default:!0,invalidateOnChildChange:!0,type:HTMLElement})],m.prototype,"items",void 0);m=T([v({tag:"ui5-suggestion-item-group",template:J})],m);m.define();function j(n){const e=(n==null?void 0:n.suggestionsList)||Q,t=n==null?void 0:n.mobileHeader,s=n==null?void 0:n.valueStateMessage,i=n==null?void 0:n.valueStateMessageInputIcon;return c(E,{class:this.classes.popover,hideArrow:!0,preventFocusRestore:!0,preventInitialFocus:!0,placement:"Bottom",horizontalAlign:"Start",tabindex:-1,style:this.styles.suggestionsPopover,onOpen:this._afterOpenPicker,onClose:this._afterClosePicker,onScroll:this._scroll,open:this.open,opener:this,accessibleName:this._popupLabel,children:[this._isPhone&&l(H,{children:c("div",{slot:"header",class:"ui5-responsive-popover-header",children:[l("div",{class:"row",children:l("span",{children:this._headerTitleText})}),l("div",{class:"row",children:c("div",{class:"input-root-phone native-input-wrapper",children:[l(b,{class:"ui5-input-inner-phone",type:this.inputType,value:this.value,showClearIcon:this.showClearIcon,placeholder:this.placeholder,onInput:this._handleInput}),t==null?void 0:t.call(this)]})}),this.hasValueStateMessage&&c("div",{class:this.classes.popoverValueState,style:this.styles.suggestionPopoverHeader,children:[l(I,{class:"ui5-input-value-state-message-icon",name:i==null?void 0:i.call(this)}),this.open&&(s==null?void 0:s.call(this))]})]})}),!this._isPhone&&this.hasValueStateMessage&&c("div",{slot:"header",class:{"ui5-responsive-popover-header":!0,...this.classes.popoverValueState},style:this.styles.suggestionPopoverHeader,children:[l(I,{class:"ui5-input-value-state-message-icon",name:i==null?void 0:i.call(this)}),this.open&&(s==null?void 0:s.call(this))]}),this.showSuggestions&&e.call(this),this._isPhone&&c("div",{slot:"footer",class:"ui5-responsive-popover-footer",children:[l(f,{design:"Emphasized",onClick:this._confirmMobileValue,children:this._suggestionsOkButtonText}),l(f,{class:"ui5-responsive-popover-close-btn",design:"Transparent",onClick:this._cancelMobileValue,children:this._suggestionsCancelButtonText})]})]})}function Q(){return l($,{accessibleRole:V.ListBox,separators:this.suggestionSeparators,selectionMode:"Single",onMouseDown:this.onItemMouseDown,onItemClick:this._handleSuggestionItemPress,onSelectionChange:this._handleSelectionChange,children:l("slot",{})})}class u{get template(){return j}constructor(e,t,s,i){this.component=e,this.slotName=t,this.handleFocus=i,this.highlight=s,this.selectedItemIndex=-1}onUp(e,t){e.preventDefault();const s=!this.isOpened&&this._hasValueState&&t===-1?0:t;return this._handleItemNavigation(!1,s),!0}onDown(e,t){e.preventDefault();const s=!this.isOpened&&this._hasValueState&&t===-1?0:t;return this._handleItemNavigation(!0,s),!0}onSpace(e){return this._isItemOnTarget()?(e.preventDefault(),this.onItemSelected(this._selectedItem,!0),!0):!1}onEnter(e){return this._isGroupItem?(e.preventDefault(),!1):this._isItemOnTarget()?(this.onItemSelected(this._selectedItem,!0),!0):!1}onPageUp(e){e.preventDefault();const t=this.selectedItemIndex-10>-1;return this._moveItemSelection(this.selectedItemIndex,t?this.selectedItemIndex-=10:this.selectedItemIndex=0),!0}onPageDown(e){e.preventDefault();const t=this._getItems();if(!t)return!0;const s=t.length-1,i=this.selectedItemIndex+10<=s;return this._moveItemSelection(this.selectedItemIndex,i?this.selectedItemIndex+=10:this.selectedItemIndex=s),!0}onHome(e){return e.preventDefault(),this._moveItemSelection(this.selectedItemIndex,this.selectedItemIndex=0),!0}onEnd(e){e.preventDefault();const t=this._getItems().length-1;return t&&this._moveItemSelection(this.selectedItemIndex,this.selectedItemIndex=t),!0}onTab(){return this._isItemOnTarget()?(this.onItemSelected(this._selectedItem,!0),!0):!1}toggle(e,t){(e!==void 0?e:!this.isOpened())?this._getComponent().open=!0:this.close(t.preventFocusRestore)}get _selectedItem(){return this._getNonGroupItems().find(e=>e.selected)}_isScrollable(){const e=this._getScrollContainer();return e.offsetHeight<e.scrollHeight}close(e=!1){const t=this._getItems()&&this._getItems()[this.selectedItemIndex];this._getComponent().open=!1;const s=this._getPicker();s.preventFocusRestore=e,s.open=!1,t&&t.focused&&(t.focused=!1)}updateSelectedItemPosition(e){this.selectedItemIndex=e}onItemSelected(e,t){const s=e,i=this._getNonGroupItems();s&&(this.accInfo={isGroup:s.hasAttribute("ui5-suggestion-item-group"),currentPos:i.indexOf(s)+1,listSize:i.length,itemText:s.text||"",additionalText:s.additionalText},this._getComponent().onItemSelected(s,t),this._getComponent().open=!1)}onItemSelect(e){this._getComponent().onItemSelect(e)}onItemPress(e){let t;const s=e.type==="ui5-item-click";s&&!e.detail.item.selected||this._handledPress&&!s||(s&&e.detail.item.selected?(t=e.detail.item,this._handledPress=!0):t=e.detail.selectedItems[0],this.onItemSelected(t,!1))}_onClose(){this._handledPress=!1}_isItemOnTarget(){return this.isOpened()&&this.selectedItemIndex!==null&&this.selectedItemIndex!==-1&&!this._isGroupItem}get _isGroupItem(){const e=this._getItems();return!e||!e[this.selectedItemIndex]?!1:e[this.selectedItemIndex].hasAttribute("ui5-suggestion-item-group")}isOpened(){var e;return!!((e=this._getPicker())!=null&&e.open)}_handleItemNavigation(e,t){this.selectedItemIndex=t,this._getItems().length&&(e?this._selectNextItem():this._selectPreviousItem())}_selectNextItem(){const e=this._getItems().length,t=this.selectedItemIndex;t!==-1&&t+1>e-1||this._moveItemSelection(t,++this.selectedItemIndex)}_selectPreviousItem(){const e=this._getItems(),t=this.selectedItemIndex;if(!(t===-1||t===null)){if(t-1<0){(e[t].hasAttribute("ui5-suggestion-item")||e[t].hasAttribute("ui5-suggestion-item-custom"))&&(e[t].selected=!1),e[t].focused=!1,this.component.focused=!0,this.component.hasSuggestionItemSelected=!1,this.selectedItemIndex-=1;return}this._moveItemSelection(t,--this.selectedItemIndex)}}_moveItemSelection(e,t){const s=this._getItems(),i=s[t],o=s[e],r=this._getNonGroupItems(),a=i.hasAttribute("ui5-suggestion-item-group");if(!i)return;this.component.focused=!1;const d=this._getItems()[this.selectedItemIndex];if(this.accInfo={isGroup:a,currentPos:s.indexOf(i)+1,itemText:(a?d.headerText:d.text)||""},(i.hasAttribute("ui5-suggestion-item")||i.hasAttribute("ui5-suggestion-item-custom"))&&(this.accInfo.additionalText=i.additionalText||"",this.accInfo.currentPos=r.indexOf(i)+1,this.accInfo.listSize=r.length),o&&(o.focused=!1),(o!=null&&o.hasAttribute("ui5-suggestion-item")||o!=null&&o.hasAttribute("ui5-suggestion-item-custom"))&&(o.selected=!1),i&&(i.focused=!0,a||(i.selected=!0),this.handleFocus&&i.focus()),this.component.hasSuggestionItemSelected=!0,this.onItemSelect(i),!this._isItemIntoView(i)){const C=this._isGroupItem?i.shadowRoot.querySelector("[ui5-li-group-header]"):i;this._scrollItemIntoView(C)}}_deselectItems(){this._getItems().forEach(t=>{t.hasAttribute("ui5-suggestion-item")&&(t.selected=!1),t.focused=!1})}_clearItemFocus(){const e=this._getItems().find(t=>t.focused);e&&(e.focused=!1)}_isItemIntoView(e){const t=e.getDomRef().getBoundingClientRect(),s=this._getComponent().getDomRef().getBoundingClientRect(),i=window.innerHeight||document.documentElement.clientHeight;let o=0;return this._hasValueState&&(o=this._getPicker().querySelector("[slot=header]").getBoundingClientRect().height),t.top+u.SCROLL_STEP<=i&&t.top>=s.top+o}_scrollItemIntoView(e){e.scrollIntoView({behavior:"auto",block:"nearest",inline:"nearest"})}_getScrollContainer(){return this._scrollContainer||(this._scrollContainer=this._getPicker().shadowRoot.querySelector(".ui5-popup-content")),this._scrollContainer}_getItems(){return this._getComponent().getSlottedNodes("suggestionItems").flatMap(t=>t.hasAttribute("ui5-suggestion-item-group")?[t,...t.items]:[t])}_getNonGroupItems(){return this._getItems().filter(e=>!e.hasAttribute("ui5-suggestion-item-group"))}_getComponent(){return this.component}_getList(){return this._getPicker().querySelector("[ui5-list]")}_getListWidth(){var e;return(e=this._getList())==null?void 0:e.offsetWidth}_getPicker(){return this._getComponent().shadowRoot.querySelector("[ui5-responsive-popover]")}get itemSelectionAnnounce(){if(!this.accInfo)return"";if(this.accInfo.isGroup)return`${u.i18nBundle.getText(B)} ${this.accInfo.itemText}`;const e=u.i18nBundle.getText(N,this.accInfo.currentPos||0,this.accInfo.listSize||0);return`${this.accInfo.additionalText} ${e}`}hightlightInput(e,t){return M(e,t)}get _hasValueState(){return this.component.hasValueStateMessage}_clearSelectedSuggestionAndaccInfo(){this.accInfo=void 0,this.selectedItemIndex=0}}u.SCROLL_STEP=60;b.SuggestionsClass=u;export{u as default};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import{j as o,a as _,F as y,p as m,d as b,b as E,s as x,c as C,i as P,m as O,y as B,e as w,f as I,t as A,E as L,g as R,L as S,R as M,B as N,h as F,k as D,l as X,n as j,o as z,q as k}from"./bundle.esm-
|
|
2
|
-
`;var u=function(t,e,n,s){var
|
|
3
|
-
`;var h=function(t,e,n,s){var
|
|
1
|
+
import{j as o,a as _,F as y,p as m,d as b,b as E,s as x,c as C,i as P,m as O,y as B,e as w,f as I,t as A,E as L,g as R,L as S,R as M,B as N,h as F,k as D,l as X,n as j,o as z,q as k}from"./bundle.esm-CmHUshBw.js";var T;(function(t){t.InPlace="InPlace",t.Popover="Popover"})(T||(T={}));const $=T;var g;(function(t){t.Off="Off",t.On="On"})(g||(g={}));const H=g;function W(){return o(y,{children:o("span",{children:this._renderEmptyIndicator?_(y,{children:[o("span",{className:"empty-indicator","aria-hidden":"true",children:this._emptyIndicatorSymbol}),o("span",{className:"empty-indicator-aria-label",children:this._emptyIndicatorAriaLabel})]}):o("slot",{})})})}m("@ui5/webcomponents-theming","sap_horizon",async()=>b);m("@ui5/webcomponents","sap_horizon",async()=>E);const q=`:host{max-width:100%;font-size:var(--sapFontSize);font-family:var(--sapFontFamily);color:var(--sapTextColor);line-height:normal;cursor:text;overflow:hidden}:host([max-lines="1"]){display:inline-block;text-overflow:ellipsis;white-space:nowrap}:host(:not([max-lines="1"])){display:-webkit-box;-webkit-line-clamp:var(--_ui5-v2-17-0_text_max_lines);line-clamp:var(--_ui5-v2-17-0_text_max_lines);-webkit-box-orient:vertical;white-space:normal;word-wrap:break-word}.empty-indicator-aria-label{position:absolute!important;clip:rect(1px,1px,1px,1px);user-select:none;left:0;top:0;font-size:0}
|
|
2
|
+
`;var u=function(t,e,n,s){var a=arguments.length,i=a<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,n):s,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(t,e,n,s);else for(var d=t.length-1;d>=0;d--)(l=t[d])&&(i=(a<3?l(i):a>3?l(e,n,i):l(e,n))||i);return a>3&&i&&Object.defineProperty(e,n,i),i},f;let p=f=class extends w{constructor(){super(...arguments),this.maxLines=1/0,this.emptyIndicatorMode="Off"}onBeforeRendering(){this.style.setProperty(I("--_ui5_text_max_lines"),`${this.maxLines}`)}get hasText(){return A(this.text)}get _renderEmptyIndicator(){return!this.hasText&&this.emptyIndicatorMode===H.On}get _emptyIndicatorAriaLabel(){return f.i18nBundle.getText(L)}get _emptyIndicatorSymbol(){return f.i18nBundle.getText(R)}};u([x({type:Number})],p.prototype,"maxLines",void 0);u([x()],p.prototype,"emptyIndicatorMode",void 0);u([C({type:Node,default:!0})],p.prototype,"text",void 0);u([P("@ui5/webcomponents")],p,"i18nBundle",void 0);p=f=u([O({tag:"ui5-text",renderer:B,template:W,styles:q})],p);p.define();const v=p;function Y(){return _("div",{children:[o(v,{class:"ui5-exp-text-text",emptyIndicatorMode:this.emptyIndicatorMode,children:this._displayedText}),this._maxCharactersExceeded&&_(y,{children:[o("span",{class:"ui5-exp-text-ellipsis",children:this._ellipsisText}),o(S,{id:"toggle",class:"ui5-exp-text-toggle",accessibleRole:"Button",accessibleName:this._accessibleNameForToggle,accessibilityAttributes:this._accessibilityAttributesForToggle,onClick:this._handleToggleClick,children:this._textForToggle}),this._usePopover&&_(M,{open:this._expanded,opener:"toggle",accessibleNameRef:"popover-text",contentOnlyOnDesktop:!0,_hideHeader:!0,class:"ui5-exp-text-popover",onClose:this._handlePopoverClose,children:[o(v,{id:"popover-text",children:this.text}),o("div",{slot:"footer",class:"ui5-exp-text-footer",children:o(N,{design:"Transparent",onClick:this._handleCloseButtonClick,children:this._closeButtonText})})]})]})]})}m("@ui5/webcomponents-theming","sap_horizon",async()=>b);m("@ui5/webcomponents","sap_horizon",async()=>E);const V=`:host{display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapTextColor)}:host([hidden]){display:none}.ui5-exp-text-text{display:inline}.ui5-exp-text-text,.ui5-exp-text-toggle{font-family:inherit;font-size:inherit}.ui5-exp-text-text,.ui5-exp-text-ellipsis{color:inherit}.ui5-exp-text-popover::part(content){padding-inline:1rem}.ui5-exp-text-footer{width:100%;display:flex;align-items:center;justify-content:flex-end}
|
|
3
|
+
`;var h=function(t,e,n,s){var a=arguments.length,i=a<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,n):s,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(t,e,n,s);else for(var d=t.length-1;d>=0;d--)(l=t[d])&&(i=(a<3?l(i):a>3?l(e,n,i):l(e,n))||i);return a>3&&i&&Object.defineProperty(e,n,i),i},c;let r=c=class extends w{constructor(){super(...arguments),this.maxCharacters=100,this.overflowMode="InPlace",this.emptyIndicatorMode="Off",this._expanded=!1}getFocusDomRef(){var e,n;return this._usePopover?(e=this.shadowRoot)==null?void 0:e.querySelector("[ui5-responsive-popover]"):(n=this.shadowRoot)==null?void 0:n.querySelector("[ui5-link]")}get _displayedText(){var e;return this._expanded&&!this._usePopover?this.text:(e=this.text)==null?void 0:e.substring(0,this.maxCharacters)}get _maxCharactersExceeded(){var e;return(((e=this.text)==null?void 0:e.length)||0)>this.maxCharacters}get _usePopover(){return this.overflowMode===$.Popover}get _ellipsisText(){return this._expanded&&!this._usePopover?" ":"... "}get _textForToggle(){return this._expanded?c.i18nBundle.getText(F):c.i18nBundle.getText(D)}get _closeButtonText(){return c.i18nBundle.getText(X)}get _accessibilityAttributesForToggle(){return this._usePopover?{expanded:this._expanded,hasPopup:"dialog"}:{expanded:this._expanded}}get _accessibleNameForToggle(){if(this._usePopover)return this._expanded?c.i18nBundle.getText(j):c.i18nBundle.getText(z)}_handlePopoverClose(){k()||(this._expanded=!1)}_handleToggleClick(){this._expanded=!this._expanded}_handleCloseButtonClick(e){this._expanded=!1,e.stopPropagation()}};h([x()],r.prototype,"text",void 0);h([x({type:Number})],r.prototype,"maxCharacters",void 0);h([x()],r.prototype,"overflowMode",void 0);h([x()],r.prototype,"emptyIndicatorMode",void 0);h([x({type:Boolean})],r.prototype,"_expanded",void 0);h([P("@ui5/webcomponents")],r,"i18nBundle",void 0);r=c=h([O({tag:"ui5-expandable-text",renderer:B,styles:V,template:Y})],r);r.define();function Q(t){const{className:e,text:n,maxCharacters:s,part:a}=t;return o(r,{part:a,class:e,text:n,maxCharacters:s})}export{Q as default};
|