@sapudex/web-components 2.16.0 → 2.17.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 +18 -1
- package/cypress/specs/PasswordField.cy.tsx +91 -0
- package/cypress/specs/Quote.cy.tsx +2 -2
- package/cypress/specs/SecondaryNavigationDesktop.cy.tsx +2 -2
- package/cypress/support/component-imports.instrumented.ts +3 -1
- package/cypress/support/component-imports.src.ts +3 -1
- package/dist/AccordionItem.d.ts +4 -0
- package/dist/AccordionItem.js +16 -1
- package/dist/AccordionItem.js.map +1 -1
- package/dist/AvatarGroup.d.ts +1 -0
- package/dist/AvatarGroup.js +8 -4
- package/dist/AvatarGroup.js.map +1 -1
- package/dist/LinkListItemTemplate.js +1 -1
- package/dist/LinkListItemTemplate.js.map +1 -1
- package/dist/List.js +7 -1
- package/dist/List.js.map +1 -1
- package/dist/ListGroupHeader.js +7 -1
- package/dist/ListGroupHeader.js.map +1 -1
- package/dist/ListSelectAll.js +7 -1
- package/dist/ListSelectAll.js.map +1 -1
- package/dist/MastheadShell.js +2 -1
- package/dist/MastheadShell.js.map +1 -1
- package/dist/PasswordField.d.ts +3 -5
- package/dist/PasswordField.js +6 -8
- package/dist/PasswordField.js.map +1 -1
- package/dist/PasswordFieldTemplate.d.ts +4 -0
- package/dist/PasswordFieldTemplate.js +8 -0
- package/dist/PasswordFieldTemplate.js.map +1 -0
- package/dist/Quote.js +3 -4
- package/dist/Quote.js.map +1 -1
- package/dist/QuoteTemplate.d.ts +2 -0
- package/dist/QuoteTemplate.js +6 -0
- package/dist/QuoteTemplate.js.map +1 -0
- package/dist/Search.d.ts +0 -1
- package/dist/Search.js +0 -13
- package/dist/Search.js.map +1 -1
- package/dist/Tag.js +3 -3
- package/dist/Tag.js.map +1 -1
- package/dist/TagGroup.d.ts +0 -2
- package/dist/TagGroup.js +3 -9
- package/dist/TagGroup.js.map +1 -1
- package/dist/TagGroupTemplate.d.ts +2 -0
- package/dist/TagGroupTemplate.js +12 -0
- package/dist/TagGroupTemplate.js.map +1 -0
- package/dist/TagTemplate.d.ts +2 -0
- package/dist/TagTemplate.js +18 -0
- package/dist/TagTemplate.js.map +1 -0
- package/dist/TextField.d.ts +5 -3
- package/dist/TextField.js +5 -3
- package/dist/TextField.js.map +1 -1
- package/dist/Tooltip.d.ts +5 -0
- package/dist/Tooltip.js.map +1 -1
- package/dist/assets/{InputSuggestions-lpqKgn1j.js → InputSuggestions-EyZxsb7i.js} +1 -1
- package/dist/assets/{ListItemStandardExpandableTextTemplate-BPs3CyVq.js → ListItemStandardExpandableTextTemplate-DgdZLN5V.js} +1 -1
- package/dist/assets/{bundle.esm-C3RAGF4b.js → bundle.esm-ChjL9w9f.js} +206 -206
- package/dist/css/themes/CountrySelector.css +1 -1
- package/dist/css/themes/PhoneNumberField.css +1 -1
- package/dist/css/themes/Quote.css +1 -1
- package/dist/css/themes/RatingIndicator.css +1 -1
- package/dist/css/themes/Search.css +1 -1
- package/dist/css/themes/Slider.css +1 -1
- package/dist/css/themes/TextArea.css +1 -1
- package/dist/css/themes/TextField.css +1 -1
- package/dist/custom-elements-internal.json +73 -0
- package/dist/custom-elements.json +61 -0
- package/dist/generated/templates/SearchTemplate.lit.js +1 -1
- package/dist/generated/templates/SearchTemplate.lit.js.map +1 -1
- package/dist/generated/themes/CountrySelector.css.d.ts +1 -1
- package/dist/generated/themes/CountrySelector.css.js +1 -1
- package/dist/generated/themes/CountrySelector.css.js.map +1 -1
- package/dist/generated/themes/PhoneNumberField.css.d.ts +1 -1
- package/dist/generated/themes/PhoneNumberField.css.js +1 -1
- package/dist/generated/themes/PhoneNumberField.css.js.map +1 -1
- 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/Search.css.d.ts +1 -1
- package/dist/generated/themes/Search.css.js +1 -1
- package/dist/generated/themes/Search.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/generated/themes/TextArea.css.d.ts +1 -1
- package/dist/generated/themes/TextArea.css.js +1 -1
- package/dist/generated/themes/TextArea.css.js.map +1 -1
- package/dist/generated/themes/TextField.css.d.ts +1 -1
- package/dist/generated/themes/TextField.css.js +1 -1
- package/dist/generated/themes/TextField.css.js.map +1 -1
- package/dist/vscode.html-custom-data.json +21 -3
- package/dist/web-types.json +60 -6
- package/package.json +1 -1
- package/src/AccordionItem.ts +21 -1
- package/src/AvatarGroup.ts +10 -5
- package/src/LinkListItemTemplate.tsx +4 -1
- package/src/List.ts +5 -0
- package/src/ListGroupHeader.ts +5 -0
- package/src/ListSelectAll.ts +5 -1
- package/src/MastheadShell.ts +2 -1
- package/src/PasswordField.ts +7 -10
- package/src/PasswordFieldTemplate.tsx +29 -0
- package/src/Quote.ts +3 -5
- package/src/QuoteTemplate.tsx +28 -0
- package/src/Search.hbs +1 -1
- package/src/Search.ts +0 -14
- package/src/Tag.ts +3 -3
- package/src/TagGroup.ts +3 -11
- package/src/TagGroupTemplate.tsx +75 -0
- package/src/TagTemplate.tsx +79 -0
- package/src/TextField.ts +5 -3
- package/src/Tooltip.ts +5 -0
- package/src/generated/templates/SearchTemplate.lit.ts +1 -1
- package/src/generated/themes/CountrySelector.css.ts +1 -1
- package/src/generated/themes/PhoneNumberField.css.ts +1 -1
- package/src/generated/themes/Quote.css.ts +1 -1
- package/src/generated/themes/RatingIndicator.css.ts +1 -1
- package/src/generated/themes/Search.css.ts +1 -1
- package/src/generated/themes/Slider.css.ts +1 -1
- package/src/generated/themes/TextArea.css.ts +1 -1
- package/src/generated/themes/TextField.css.ts +1 -1
- package/src/themes/CountrySelector.css +0 -8
- package/src/themes/PhoneNumberField.css +1 -21
- package/src/themes/Quote.css +38 -29
- package/src/themes/Search.css +1 -5
- package/src/themes/TextArea.css +1 -25
- package/src/themes/TextField.css +4 -18
- package/dist/generated/templates/PasswordFieldTemplate.lit.d.ts +0 -3
- package/dist/generated/templates/PasswordFieldTemplate.lit.js +0 -7
- package/dist/generated/templates/PasswordFieldTemplate.lit.js.map +0 -1
- package/dist/generated/templates/QuoteTemplate.lit.d.ts +0 -3
- package/dist/generated/templates/QuoteTemplate.lit.js +0 -10
- package/dist/generated/templates/QuoteTemplate.lit.js.map +0 -1
- package/dist/generated/templates/TagGroupTemplate.lit.d.ts +0 -3
- package/dist/generated/templates/TagGroupTemplate.lit.js +0 -10
- package/dist/generated/templates/TagGroupTemplate.lit.js.map +0 -1
- package/dist/generated/templates/TagTemplate.lit.d.ts +0 -3
- package/dist/generated/templates/TagTemplate.lit.js +0 -19
- package/dist/generated/templates/TagTemplate.lit.js.map +0 -1
- package/src/PasswordField.hbs +0 -18
- package/src/Quote.hbs +0 -20
- package/src/Tag.hbs +0 -76
- package/src/TagGroup.hbs +0 -57
- package/src/generated/templates/PasswordFieldTemplate.lit.ts +0 -11
- package/src/generated/templates/QuoteTemplate.lit.ts +0 -14
- package/src/generated/templates/TagGroupTemplate.lit.ts +0 -14
- package/src/generated/templates/TagTemplate.lit.ts +0 -23
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { UDExAccordionItemTitleSize } from "../../instrumented/AccordionItem.js";
|
|
1
2
|
import { UDExAccordionItem } from "../support/component-imports.js";
|
|
2
3
|
|
|
3
4
|
const accordionItem = <UDExAccordionItem label="Some label for item 1" numberBadge="72">
|
|
@@ -8,10 +9,20 @@ const expandedAccordionItem = <UDExAccordionItem label="Some label for item 1" n
|
|
|
8
9
|
<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>
|
|
9
10
|
</UDExAccordionItem>
|
|
10
11
|
|
|
11
|
-
const accordionItemLarge = <UDExAccordionItem label="Some label for item 1" labelSize=
|
|
12
|
+
const accordionItemLarge = <UDExAccordionItem label="Some label for item 1" labelSize={UDExAccordionItemTitleSize.Large}>
|
|
12
13
|
<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>
|
|
13
14
|
</UDExAccordionItem>
|
|
14
15
|
|
|
16
|
+
const accordionItemWithAccordion = <UDExAccordionItem label="Some label for item 1">
|
|
17
|
+
<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>
|
|
18
|
+
<UDExAccordionItem label="Some label for item 2">Item2</UDExAccordionItem>
|
|
19
|
+
<UDExAccordionItem label="Some label for item 3">Item3</UDExAccordionItem>
|
|
20
|
+
<UDExAccordionItem label="Some label for item 4">Item4</UDExAccordionItem>
|
|
21
|
+
<UDExAccordionItem label="Some label for item 5">Item5</UDExAccordionItem>
|
|
22
|
+
<UDExAccordionItem label="Some label for item 6">Item6</UDExAccordionItem>
|
|
23
|
+
<UDExAccordionItem label="Some label for item 7"><p>Item 7</p><p>Item 8</p><p>Item 9</p><p>Item 10</p><p id="last-item">Item 11</p></UDExAccordionItem>
|
|
24
|
+
</UDExAccordionItem>
|
|
25
|
+
|
|
15
26
|
describe('AccordionItem', () => {
|
|
16
27
|
|
|
17
28
|
beforeEach(() => {
|
|
@@ -57,6 +68,12 @@ describe('AccordionItem', () => {
|
|
|
57
68
|
it("has a badge", () => {
|
|
58
69
|
cy.get("[udex-accordion-item]").shadow().find(".udex-accordion-item__badge").should("exist").and("be.visible")
|
|
59
70
|
});
|
|
71
|
+
|
|
72
|
+
it("click on accordion adjust content height for animations", () => {
|
|
73
|
+
cy.mount(accordionItemWithAccordion)
|
|
74
|
+
cy.get("[udex-accordion-item]").click({ multiple: true });
|
|
75
|
+
cy.get("#last-item").should("be.visible");
|
|
76
|
+
});
|
|
60
77
|
|
|
61
78
|
it("emit accordion-item-focus when item focused", () => {
|
|
62
79
|
const itemFocusHandler = cy.stub().as("itemFocus")
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import { UDExPasswordField } from "../support/component-imports.js";
|
|
2
|
+
|
|
3
|
+
const fieldAutocomplete = "on";
|
|
4
|
+
const fieldValue = "test";
|
|
5
|
+
const fieldMaxLength = 5;
|
|
6
|
+
const fieldLabel = "Label";
|
|
7
|
+
const fieldState = "Error";
|
|
8
|
+
const fieldText = "Supporting Text";
|
|
9
|
+
const fieldIcon = "show";
|
|
10
|
+
const fieldTooltip = "Tooltip";
|
|
11
|
+
const fieldACCName = "Accessible Name";
|
|
12
|
+
const fieldACCNameRef = "Accessible Name Ref";
|
|
13
|
+
|
|
14
|
+
const defaultPasswordField = <UDExPasswordField></UDExPasswordField>
|
|
15
|
+
const customPasswordField = <UDExPasswordField
|
|
16
|
+
autocomplete={fieldAutocomplete}
|
|
17
|
+
value={fieldValue}
|
|
18
|
+
maxlength={fieldMaxLength}
|
|
19
|
+
label={fieldLabel}
|
|
20
|
+
show-asterisk
|
|
21
|
+
value-state={fieldState}
|
|
22
|
+
supporting-text={fieldText}
|
|
23
|
+
show-button-enabled
|
|
24
|
+
show-button-tooltip={fieldTooltip}
|
|
25
|
+
accessible-name={fieldACCName}
|
|
26
|
+
accessible-name-ref={fieldACCNameRef}></UDExPasswordField>
|
|
27
|
+
const disabledPasswordField = <UDExPasswordField id="disabled" label={fieldLabel} disabled></UDExPasswordField>
|
|
28
|
+
const readonlyPasswordField = <UDExPasswordField id="readonly" label={fieldLabel} readonly></UDExPasswordField>
|
|
29
|
+
const displayonlyPasswordField = <UDExPasswordField id="displayonly" label={fieldLabel} displayonly></UDExPasswordField>
|
|
30
|
+
|
|
31
|
+
describe("Password Field", () => {
|
|
32
|
+
beforeEach(() => {
|
|
33
|
+
cy.mount(defaultPasswordField);
|
|
34
|
+
});
|
|
35
|
+
it("renders password field", () => {
|
|
36
|
+
cy.get("[udex-password-field]").shadow().find("[udex-text-field]").should("be.visible");
|
|
37
|
+
});
|
|
38
|
+
|
|
39
|
+
it("renders with default attributes", () => {
|
|
40
|
+
cy.get("[udex-password-field]").should("have.attr", "value-state", "Standard");
|
|
41
|
+
cy.get("[udex-password-field]").should("have.attr", "autocomplete", "off");
|
|
42
|
+
});
|
|
43
|
+
});
|
|
44
|
+
|
|
45
|
+
describe("Attributes propagation", () => {
|
|
46
|
+
beforeEach(() => {
|
|
47
|
+
cy.mount(customPasswordField);
|
|
48
|
+
});
|
|
49
|
+
|
|
50
|
+
it("renders with autocomplete on", () => {
|
|
51
|
+
cy.get("[udex-password-field]").shadow().find("[udex-text-field]").shadow().find(".udex-text-field__container input").should("have.attr", "autocomplete", fieldAutocomplete);
|
|
52
|
+
});
|
|
53
|
+
|
|
54
|
+
it("renders with custom value", () => {
|
|
55
|
+
cy.get("[udex-password-field]").shadow().find("[udex-text-field]").shadow().find(".udex-text-field__container input").should("have.value", fieldValue);
|
|
56
|
+
});
|
|
57
|
+
|
|
58
|
+
it("renders as required with label", () => {
|
|
59
|
+
cy.get("[udex-password-field]").shadow().find("[udex-text-field]").shadow().find(".udex-text-field__container label").should("have.text", `${fieldLabel} *`);
|
|
60
|
+
});
|
|
61
|
+
|
|
62
|
+
it("renders with error stare", () => {
|
|
63
|
+
cy.get("[udex-password-field]").shadow().find("[udex-text-field]").should("have.attr", "value-state", fieldState);
|
|
64
|
+
});
|
|
65
|
+
|
|
66
|
+
it("renders with supporting text", () => {
|
|
67
|
+
cy.get("[udex-password-field]").shadow().find("[udex-text-field]").shadow().find("[udex-status-message]").should("have.attr", "supporting-text", fieldText);
|
|
68
|
+
});
|
|
69
|
+
|
|
70
|
+
it("renders with enabled button", () => {
|
|
71
|
+
cy.get("[udex-password-field]").shadow().find("[udex-text-field]").shadow().find("[udex-control-button]").should("have.attr", "icon", fieldIcon);
|
|
72
|
+
cy.get("[udex-password-field]").shadow().find("[udex-text-field]").shadow().find("[udex-control-button]").should("have.attr", "accessible-name", fieldTooltip);
|
|
73
|
+
});
|
|
74
|
+
|
|
75
|
+
it("renders with acessible name", () => {
|
|
76
|
+
cy.get("[udex-password-field]").shadow().find("[udex-text-field]").shadow().find(".udex-text-field__container input").should("have.attr", "aria-label", fieldACCName);
|
|
77
|
+
});
|
|
78
|
+
|
|
79
|
+
});
|
|
80
|
+
|
|
81
|
+
describe("General interaction", () => {
|
|
82
|
+
beforeEach(() => {
|
|
83
|
+
cy.mount(customPasswordField);
|
|
84
|
+
});
|
|
85
|
+
|
|
86
|
+
it("change icon and type on click", () => {
|
|
87
|
+
cy.get("[udex-password-field]").shadow().find("[udex-text-field]").shadow().find("[udex-control-button]").click();
|
|
88
|
+
cy.get("[udex-password-field]").shadow().find("[udex-text-field]").should("have.attr", "icon", "hide");
|
|
89
|
+
});
|
|
90
|
+
});
|
|
91
|
+
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {UDExQuote} from "../support/component-imports.js";
|
|
2
2
|
import { UDExLink } from "../support/component-imports.js";
|
|
3
3
|
import { UDExMaskType, UDExSizeType, UDExImagePlacement } from "../../src/Quote.js";
|
|
4
4
|
|
|
@@ -32,7 +32,7 @@ describe("Quote", () => {
|
|
|
32
32
|
})
|
|
33
33
|
|
|
34
34
|
it("Default slot content renders correctly", () => {
|
|
35
|
-
cy.get("[udex-quote]").shadow().find(".
|
|
35
|
+
cy.get("[udex-quote]").shadow().find(".udex-quote__text").should("exist");
|
|
36
36
|
});
|
|
37
37
|
|
|
38
38
|
it("Image slot content renders correctly", () => {
|
|
@@ -268,10 +268,10 @@ describe("Desktop", () => {
|
|
|
268
268
|
cy.viewport(1080, 640);
|
|
269
269
|
})
|
|
270
270
|
|
|
271
|
-
|
|
271
|
+
xit("has the attr \"data-horizontal-align=`right`\" when doesn't fit", () => {
|
|
272
272
|
const moreNavItem = cy.get("#secondary-nav-without-breadcrumbs").shadow().find("[udex-secondary-navigation-item]").eq(5);
|
|
273
273
|
moreNavItem.click();
|
|
274
|
-
moreNavItem.shadow().find(".udex-secondary-navigation__dropdown")
|
|
274
|
+
moreNavItem.shadow().find(".udex-secondary-navigation__dropdown", { timeout: 1000 })
|
|
275
275
|
.should("have.attr", "data-horizontal-align", "right")
|
|
276
276
|
});
|
|
277
277
|
|
|
@@ -59,6 +59,7 @@ import UDExMessageStrip from "../../instrumented/MessageStrip.js";
|
|
|
59
59
|
import UDExHeroBanner from "../../instrumented/HeroBanner.js";
|
|
60
60
|
import UDExCheckbox from "../../instrumented/Checkbox.js";
|
|
61
61
|
import UDExInputGroup from "../../instrumented/InputGroup.js";
|
|
62
|
+
import UDExPasswordField from "../../instrumented/PasswordField.js";
|
|
62
63
|
|
|
63
64
|
export {
|
|
64
65
|
UDExAccordion,
|
|
@@ -121,5 +122,6 @@ export {
|
|
|
121
122
|
UDExMessageStrip,
|
|
122
123
|
UDExHeroBanner,
|
|
123
124
|
UDExCheckbox,
|
|
124
|
-
UDExInputGroup
|
|
125
|
+
UDExInputGroup,
|
|
126
|
+
UDExPasswordField
|
|
125
127
|
};
|
|
@@ -59,6 +59,7 @@ import UDExMessageStrip from "../../src/MessageStrip.js";
|
|
|
59
59
|
import UDExHeroBanner from "../../src/HeroBanner.js";
|
|
60
60
|
import UDExCheckbox from "../../src/Checkbox.js";
|
|
61
61
|
import UDExInputGroup from "../../src/InputGroup.js";
|
|
62
|
+
import UDExPasswordField from "../../src/PasswordField.js";
|
|
62
63
|
|
|
63
64
|
export {
|
|
64
65
|
UDExAccordion,
|
|
@@ -121,5 +122,6 @@ export {
|
|
|
121
122
|
UDExMessageStrip,
|
|
122
123
|
UDExHeroBanner,
|
|
123
124
|
UDExCheckbox,
|
|
124
|
-
UDExInputGroup
|
|
125
|
+
UDExInputGroup,
|
|
126
|
+
UDExPasswordField
|
|
125
127
|
};
|
package/dist/AccordionItem.d.ts
CHANGED
|
@@ -82,10 +82,14 @@ declare class UDExAccordionItem extends UI5Element {
|
|
|
82
82
|
* @public
|
|
83
83
|
*/
|
|
84
84
|
content: Array<Node>;
|
|
85
|
+
_resizeHandler: () => void;
|
|
86
|
+
contentElement: HTMLElement | null | undefined;
|
|
85
87
|
constructor();
|
|
86
88
|
onAfterRendering(): void;
|
|
87
89
|
onEnterDOM(): void;
|
|
90
|
+
onExitDOM(): void;
|
|
88
91
|
setContentHeight(): void;
|
|
92
|
+
_onResize(): void;
|
|
89
93
|
contentKeydown(e: KeyboardEvent): void;
|
|
90
94
|
itemClickHandler(e: Event): void;
|
|
91
95
|
focusHandler(): void;
|
package/dist/AccordionItem.js
CHANGED
|
@@ -12,6 +12,7 @@ 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";
|
|
14
14
|
import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
|
|
15
|
+
import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
|
|
15
16
|
import AccordionItemTemplate from "./AccordionItemTemplate.js";
|
|
16
17
|
// Styles
|
|
17
18
|
import AccordionItemCss from "./generated/themes/AccordionItem.css.js";
|
|
@@ -63,18 +64,32 @@ let UDExAccordionItem = class UDExAccordionItem extends UI5Element {
|
|
|
63
64
|
* @private
|
|
64
65
|
*/
|
|
65
66
|
this.isOpen = false;
|
|
67
|
+
this._resizeHandler = this._onResize.bind(this);
|
|
68
|
+
this.contentElement = null;
|
|
66
69
|
}
|
|
67
70
|
onAfterRendering() {
|
|
68
71
|
this.handleDirection();
|
|
72
|
+
this.contentElement = this.shadowRoot?.querySelector(".udex-accordion-item__content-inner");
|
|
69
73
|
this.setContentHeight();
|
|
70
74
|
}
|
|
71
75
|
onEnterDOM() {
|
|
72
76
|
if (isDesktop()) {
|
|
73
77
|
this.setAttribute("desktop", "");
|
|
74
78
|
}
|
|
79
|
+
if (this.contentElement) {
|
|
80
|
+
ResizeHandler.register(this.contentElement, this._resizeHandler);
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
onExitDOM() {
|
|
84
|
+
if (this.contentElement) {
|
|
85
|
+
ResizeHandler.deregister(this.contentElement, this._resizeHandler);
|
|
86
|
+
}
|
|
75
87
|
}
|
|
76
88
|
setContentHeight() {
|
|
77
|
-
this.style.setProperty("--udex-accordion-item-content-max-height", `${this.
|
|
89
|
+
this.style.setProperty("--udex-accordion-item-content-max-height", `${this.contentElement?.scrollHeight}px`);
|
|
90
|
+
}
|
|
91
|
+
_onResize() {
|
|
92
|
+
this.setContentHeight();
|
|
78
93
|
}
|
|
79
94
|
contentKeydown(e) {
|
|
80
95
|
e.stopPropagation();
|
|
@@ -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,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;AAED;;;;;;;;;;;;;;;;;;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\";\n\n// Styles\nimport AccordionItemCss from \"./generated/themes/AccordionItem.css.js\";\n\nexport enum UDExAccordionItemTitleSize {\n Standard = \"Standard\",\n Large = \"Large\"\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\": void,\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 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\");\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;\n"]}
|
package/dist/AvatarGroup.d.ts
CHANGED
package/dist/AvatarGroup.js
CHANGED
|
@@ -57,9 +57,9 @@ let UDExAvatarGroup = class UDExAvatarGroup extends AvatarGroup {
|
|
|
57
57
|
super();
|
|
58
58
|
this._itemNavigation = new ItemNavigation(this, {
|
|
59
59
|
getItemsCallback: () => {
|
|
60
|
-
return this.
|
|
61
|
-
?
|
|
62
|
-
:
|
|
60
|
+
return this._isIndividual
|
|
61
|
+
? this.items.slice(0, this._hiddenStartIndex).map(item => item.shadowRoot?.firstElementChild)
|
|
62
|
+
: [];
|
|
63
63
|
},
|
|
64
64
|
});
|
|
65
65
|
}
|
|
@@ -102,10 +102,14 @@ let UDExAvatarGroup = class UDExAvatarGroup extends AvatarGroup {
|
|
|
102
102
|
avatar.setAttribute("color-scheme", visibleColors[this._colorIndex]);
|
|
103
103
|
}
|
|
104
104
|
if (index !== this._itemsCount - 1 || this._customOverflowButton) {
|
|
105
|
-
|
|
105
|
+
const avatarSize = avatar.effectiveSize || UDExAvatarSize.S;
|
|
106
|
+
avatar.style.marginInlineEnd = avatarOffsets[avatarSize][this.type];
|
|
106
107
|
}
|
|
107
108
|
});
|
|
108
109
|
}
|
|
110
|
+
get _isIndividual() {
|
|
111
|
+
return this.type === AvatarGroupType.Individual;
|
|
112
|
+
}
|
|
109
113
|
};
|
|
110
114
|
UDExAvatarGroup = __decorate([
|
|
111
115
|
customElement({
|
package/dist/AvatarGroup.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../src/AvatarGroup.ts"],"names":[],"mappings":";;;;;;AACA,OAAO,WAAW,MAAM,wCAAwC,CAAC;AACjE,OAAO,eAAe,MAAM,kDAAkD,CAAC;AAC/E,OAAO,cAAc,MAAM,yDAAyD,CAAC;AACrF,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAE/E,SAAS;AACT,OAAO,iBAAiB,MAAM,6DAA6D,CAAC;AAE5F,OAAO,UAAU,EAAE,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEhF,MAAM,aAAa,GAAG;IACpB,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE;QACnB,CAAC,eAAe,CAAC,UAAU,CAAC,EAAE,WAAW;QACzC,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,UAAU;KACpC;IACD,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;QAClB,CAAC,eAAe,CAAC,UAAU,CAAC,EAAE,UAAU;QACxC,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,UAAU;KACpC;IACD,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;QAClB,CAAC,eAAe,CAAC,UAAU,CAAC,EAAE,UAAU;QACxC,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,WAAW;KACrC;IACD,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;QAClB,CAAC,eAAe,CAAC,UAAU,CAAC,EAAE,UAAU;QACxC,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,OAAO;KACjC;IACD,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE;QACnB,CAAC,eAAe,CAAC,UAAU,CAAC,EAAE,SAAS;QACvC,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,UAAU;KACpC;CACF,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AAQH,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,WAAW;IACvC;QACE,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,eAAe,GAAG,IAAI,cAAc,CAAC,IAAI,EAAE;YAC9C,gBAAgB,EAAE,GAAG,EAAE;gBACrB,OAAO,IAAI,CAAC,
|
|
1
|
+
{"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../src/AvatarGroup.ts"],"names":[],"mappings":"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","sourcesContent":["import type { IAvatarGroupItem } from \"@ui5/webcomponents/dist/AvatarGroup.js\";\nimport AvatarGroup from \"@ui5/webcomponents/dist/AvatarGroup.js\";\nimport AvatarGroupType from \"@ui5/webcomponents/dist/types/AvatarGroupType.js\";\nimport ItemNavigation from \"@ui5/webcomponents-base/dist/delegate/ItemNavigation.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\n\n// Styles\nimport UI5AvatarGroupCss from \"@ui5/webcomponents/dist/generated/themes/AvatarGroup.css.js\";\n\nimport UDExAvatar, { UDExAvatarColorScheme, UDExAvatarSize } from \"./Avatar.js\";\n\nconst avatarOffsets = {\n [UDExAvatarSize.XS]: {\n [AvatarGroupType.Individual]: \"0.0625rem\",\n [AvatarGroupType.Group]: \"-0.75rem\",\n },\n [UDExAvatarSize.S]: {\n [AvatarGroupType.Individual]: \"0.125rem\",\n [AvatarGroupType.Group]: \"-1.25rem\",\n },\n [UDExAvatarSize.M]: {\n [AvatarGroupType.Individual]: \"0.125rem\",\n [AvatarGroupType.Group]: \"-1.625rem\",\n },\n [UDExAvatarSize.L]: {\n [AvatarGroupType.Individual]: \"0.125rem\",\n [AvatarGroupType.Group]: \"-2rem\",\n },\n [UDExAvatarSize.XL]: {\n [AvatarGroupType.Individual]: \"0.25rem\",\n [AvatarGroupType.Group]: \"-2.75rem\",\n },\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-group</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/AvatarGroup.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends AvatarGroup\n * @public\n */\n@customElement({\n tag: \"udex-avatar-group\",\n renderer: jsxRenderer,\n styles: [UI5AvatarGroupCss],\n dependencies: [UDExAvatar],\n})\n\nclass UDExAvatarGroup extends AvatarGroup {\n constructor() {\n super();\n\n this._itemNavigation = new ItemNavigation(this, {\n getItemsCallback: () => {\n return this._isIndividual\n ? this.items.slice(0, this._hiddenStartIndex).map(\n item => item.shadowRoot?.firstElementChild as IAvatarGroupItem,\n )\n : [];\n },\n });\n }\n onEnterDOM(): void {\n super.onEnterDOM();\n const container: HTMLElement = this.shadowRoot?.querySelector(\".ui5-avatar-group-items\") as HTMLElement;\n container?.addEventListener(\"mouseenter\", this._onHover.bind(this, true));\n container?.addEventListener(\"mouseleave\", this._onHover.bind(this, false));\n }\n\n onExitDOM(): void {\n super.onExitDOM();\n const container: HTMLElement = this.shadowRoot?.querySelector(\".ui5-avatar-group-items\") as HTMLElement;\n container?.removeEventListener(\"mouseenter\", this._onHover.bind(this, true));\n container?.removeEventListener(\"mouseleave\", this._onHover.bind(this, false));\n }\n\n _onHover(hover: boolean) {\n if (this._isGroup) {\n this.items.every(avatar => {\n avatar.toggleAttribute(\"hover\", hover);\n return !avatar.hidden;\n });\n }\n }\n\n _onfocusin(e: FocusEvent) {\n const targetItem = this._isGroup\n ? e.currentTarget\n : (e.target as HTMLElement).shadowRoot?.firstElementChild;\n this._itemNavigation.setCurrentItem(targetItem as IAvatarGroupItem);\n }\n\n _prepareAvatars() {\n this._colorIndex = 0;\n const visibleColors = Object.values(UDExAvatarColorScheme);\n\n this.items.forEach((avatar, index) => {\n if (++this._colorIndex > visibleColors.length - 3) {\n this._colorIndex = 1;\n }\n avatar.interactive = !this._isGroup;\n avatar.toggleAttribute(\"ui5-avatar\", true);\n\n if (!avatar.getAttribute(\"color-scheme\")) {\n avatar.setAttribute(\"color-scheme\", visibleColors[this._colorIndex]);\n }\n\n if (index !== this._itemsCount - 1 || this._customOverflowButton) {\n const avatarSize = avatar.effectiveSize || UDExAvatarSize.S;\n avatar.style.marginInlineEnd = avatarOffsets[avatarSize][this.type];\n }\n });\n }\n\n get _isIndividual() {\n return this.type === AvatarGroupType.Individual;\n }\n}\n\nUDExAvatarGroup.define();\n\nexport default UDExAvatarGroup;\n"]}
|
|
@@ -12,6 +12,6 @@ export default function LinkListItemTemplate() {
|
|
|
12
12
|
const iconClass = isTileL ? `${rootClass}__tile-icon-l` : `${rootClass}__tile-icon-s`;
|
|
13
13
|
const holderClass = isTileL ? `${rootClass}__tile-holder-l` : `${rootClass}__tile-holder-s`;
|
|
14
14
|
const textClass = isTileL ? `${rootClass}__tile-text-l` : `${rootClass}__tile-text-s`;
|
|
15
|
-
return (_jsxs("div", { className: rootClass, role: this._accessibleRole, children: [this.isLink && (_jsxs(_Fragment, { children: [_jsx(UDExLink, { class: `${rootClass}__link`, endIcon: slimArrowRight, accessibleName: this.accessibleName, href: this.href, target: this.target, onClick: this.fireItemClickEvent, children: this.label }), _jsx(UDExDivider, { class: `${rootClass}__divider
|
|
15
|
+
return (_jsxs("div", { className: rootClass, role: this._accessibleRole, children: [this.isLink && (_jsxs(_Fragment, { children: [_jsx(UDExLink, { class: `${rootClass}__link`, endIcon: slimArrowRight, accessibleName: this.accessibleName, href: this.href, target: this.target, onClick: this.fireItemClickEvent, children: this.label }), _jsx(UDExDivider, { class: `${rootClass}__divider`, accessibleRole: "presentation" })] })), !this.isLink && (_jsx(UDExTile, { class: tileClass, href: this.href, target: this.target, accessibleName: this.accessibleName, "onui5-click": this.fireItemClickEvent, interactive: true, children: _jsxs("div", { class: holderClass, children: [this.icon && _jsx(UI5Icon, { class: iconClass, name: this.icon }), _jsx("span", { class: textClass, children: this.label })] }) }))] }));
|
|
16
16
|
}
|
|
17
17
|
//# sourceMappingURL=LinkListItemTemplate.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinkListItemTemplate.js","sourceRoot":"","sources":["../src/LinkListItemTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,WAAW,MAAM,cAAc,CAAC;AACvC,OAAO,QAAQ,MAAM,WAAW,CAAC;AACjC,OAAO,QAAQ,MAAM,WAAW,CAAC;AACjC,OAAO,OAAO,MAAM,iCAAiC,CAAC;AACtD,OAAO,cAAc,MAAM,mDAAmD,CAAC;AAG/E,MAAM,CAAC,OAAO,UAAU,oBAAoB;IAC1C,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,KAAK,gBAAgB,CAAC,KAAK,CAAC;IACrD,MAAM,SAAS,GAAG,qBAAqB,CAAC;IACxC,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,SAAS,UAAU,CAAC,CAAC,CAAC,GAAG,SAAS,UAAU,CAAC;IAC5E,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,SAAS,eAAe,CAAC,CAAC,CAAC,GAAG,SAAS,eAAe,CAAC;IACtF,MAAM,WAAW,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,SAAS,iBAAiB,CAAC,CAAC,CAAC,GAAG,SAAS,iBAAiB,CAAC;IAC5F,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,SAAS,eAAe,CAAC,CAAC,CAAC,GAAG,SAAS,eAAe,CAAC;IAEtF,OAAO,CACL,eACE,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,CAAC,eAA2B,aACrC,IAAI,CAAC,MAAM,IAAI,CACd,8BACE,KAAC,QAAQ,IACP,KAAK,EAAE,GAAG,SAAS,QAAQ,EAC3B,OAAO,EAAE,cAAc,EACvB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,kBAAkB,YAC/B,IAAI,CAAC,KAAK,GACF,EACX,KAAC,WAAW,
|
|
1
|
+
{"version":3,"file":"LinkListItemTemplate.js","sourceRoot":"","sources":["../src/LinkListItemTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,WAAW,MAAM,cAAc,CAAC;AACvC,OAAO,QAAQ,MAAM,WAAW,CAAC;AACjC,OAAO,QAAQ,MAAM,WAAW,CAAC;AACjC,OAAO,OAAO,MAAM,iCAAiC,CAAC;AACtD,OAAO,cAAc,MAAM,mDAAmD,CAAC;AAG/E,MAAM,CAAC,OAAO,UAAU,oBAAoB;IAC1C,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,KAAK,gBAAgB,CAAC,KAAK,CAAC;IACrD,MAAM,SAAS,GAAG,qBAAqB,CAAC;IACxC,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,SAAS,UAAU,CAAC,CAAC,CAAC,GAAG,SAAS,UAAU,CAAC;IAC5E,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,SAAS,eAAe,CAAC,CAAC,CAAC,GAAG,SAAS,eAAe,CAAC;IACtF,MAAM,WAAW,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,SAAS,iBAAiB,CAAC,CAAC,CAAC,GAAG,SAAS,iBAAiB,CAAC;IAC5F,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,SAAS,eAAe,CAAC,CAAC,CAAC,GAAG,SAAS,eAAe,CAAC;IAEtF,OAAO,CACL,eACE,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,CAAC,eAA2B,aACrC,IAAI,CAAC,MAAM,IAAI,CACd,8BACE,KAAC,QAAQ,IACP,KAAK,EAAE,GAAG,SAAS,QAAQ,EAC3B,OAAO,EAAE,cAAc,EACvB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,kBAAkB,YAC/B,IAAI,CAAC,KAAK,GACF,EACX,KAAC,WAAW,IACV,KAAK,EAAE,GAAG,SAAS,WAAW,EAC9B,cAAc,EAAC,cAAc,GACjB,IACb,CACJ,EACA,CAAC,IAAI,CAAC,MAAM,IAAI,CACf,KAAC,QAAQ,IACP,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,cAAc,EAAE,IAAI,CAAC,cAAc,iBACtB,IAAI,CAAC,kBAAkB,EACpC,WAAW,kBACX,eAAK,KAAK,EAAE,WAAW,aACpB,IAAI,CAAC,IAAI,IAAI,KAAC,OAAO,IAAC,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,EACpE,eAAM,KAAK,EAAE,SAAS,YAAG,IAAI,CAAC,KAAK,GAAQ,IACvC,GACG,CACZ,IACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["import type LinkListItem from \"./LinkListItem.js\";\nimport { UDExLinkListType } from \"./LinkList.js\";\nimport UDExDivider from \"./Divider.js\";\nimport UDExLink from \"./Link.js\";\nimport UDExTile from \"./Tile.js\";\nimport UI5Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport slimArrowRight from \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\nimport type { AriaRole } from \"@ui5/webcomponents-base/dist/types.js\";\n\nexport default function LinkListItemTemplate(this: LinkListItem) {\n const isTileL = this.type === UDExLinkListType.TileL;\n const rootClass = \"udex-link-list-item\";\n const tileClass = isTileL ? `${rootClass}__tile-l` : `${rootClass}__tile-s`;\n const iconClass = isTileL ? `${rootClass}__tile-icon-l` : `${rootClass}__tile-icon-s`;\n const holderClass = isTileL ? `${rootClass}__tile-holder-l` : `${rootClass}__tile-holder-s`;\n const textClass = isTileL ? `${rootClass}__tile-text-l` : `${rootClass}__tile-text-s`;\n\n return (\n <div\n className={rootClass}\n role={this._accessibleRole as AriaRole}>\n {this.isLink && (\n <>\n <UDExLink\n class={`${rootClass}__link`}\n endIcon={slimArrowRight}\n accessibleName={this.accessibleName}\n href={this.href}\n target={this.target}\n onClick={this.fireItemClickEvent}>\n {this.label}\n </UDExLink>\n <UDExDivider\n class={`${rootClass}__divider`}\n accessibleRole=\"presentation\">\n </UDExDivider>\n </>\n )}\n {!this.isLink && (\n <UDExTile\n class={tileClass}\n href={this.href}\n target={this.target}\n accessibleName={this.accessibleName}\n onui5-click={this.fireItemClickEvent}\n interactive>\n <div class={holderClass}>\n {this.icon && <UI5Icon class={iconClass} name={this.icon}></UI5Icon>}\n <span class={textClass}>{this.label}</span>\n </div>\n </UDExTile>\n )}\n </div>\n );\n}\n"]}
|
package/dist/List.js
CHANGED
|
@@ -387,7 +387,13 @@ UDExList = UDExList_1 = __decorate([
|
|
|
387
387
|
styles: [ListCss, getEffectiveScrollbarStyle()],
|
|
388
388
|
template: ListTemplate,
|
|
389
389
|
dependencies: [],
|
|
390
|
-
})
|
|
390
|
+
})
|
|
391
|
+
/**
|
|
392
|
+
* Fired when selection is changed by user interaction
|
|
393
|
+
*
|
|
394
|
+
* @public
|
|
395
|
+
*/
|
|
396
|
+
,
|
|
391
397
|
event("selection-change", { bubbles: true })
|
|
392
398
|
], UDExList);
|
|
393
399
|
UDExList.define();
|
package/dist/List.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"List.js","sourceRoot":"","sources":["../src/List.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.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 litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport {\n isUp, isDown, isHome, isEnd,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport type UDExListItem from \"./ListItem.js\";\nimport { UDExListStyleType, UDExListMode } from \"./types/List.js\";\nimport type UDExListGroupHeader from \"./ListGroupHeader.js\";\nimport type UDExListGroupHeaderBase from \"./ListGroupHeaderBase.js\";\nimport type UDExUploadItem from \"./UploadItem.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { ARIA_LABEL_LIST_MULTISELECTABLE, ARIA_LABEL_LIST_SELECTABLE } from \"./generated/i18n/i18n-defaults.js\";\nimport ListTemplate from \"./generated/templates/ListTemplate.lit.js\";\n\n// Styles\nimport ListCss from \"./generated/themes/List.css.js\";\nimport isLetterKey from \"./utils/isLetterKeyPressed.js\";\nimport type { UDExListWithFirstLetterFocus } from \"./utils/ListWithFirstLetterFocus.js\";\nimport UDExFirstLetterFocusHandler from \"./utils/ListWithFirstLetterFocus.js\";\nimport getEffectiveScrollbarStyle from \"./utils/getEffectiveScrollbarStyle.js\";\n\nexport type UDExListItemBase = UDExListItem & UDExListGroupHeader & UDExUploadItem;\n\ntype UDExListSelectionChangeEventDetail = {\n listItems: Array<UDExListItemBase>,\n selectedItems: Array<UDExListItemBase>,\n item: HTMLElement,\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-list</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/List.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends UI5Element\n * @tagname udex-list\n * @public\n */\n@customElement({\n tag: \"udex-list\",\n renderer: litRender,\n styles: [ListCss, getEffectiveScrollbarStyle()],\n template: ListTemplate,\n dependencies: [],\n})\n\n@event(\"selection-change\", { bubbles: true })\n\nclass UDExList extends UI5Element {\n eventDetails!: {\n \"selection-change\": UDExListSelectionChangeEventDetail\n };\n /**\n * Defines the accessible role of the component.\n *\n * @default \"listbox\"\n * @public\n */\n @property()\n accessibleRole: string = \"listbox\";\n\n /**\n * Defines the accessible name of the component.\n *\n * @default \"\"\n * @public\n */\n @property()\n accessibleName: string = \"\";\n\n /**\n * Defines the mode of the component.\n *\n * @default \"SingleSelect\"\n * @public\n */\n @property()\n mode: `${UDExListMode}` = UDExListMode.SingleSelect;\n\n /**\n * Defines the type of the item.\n *\n * @default \"None\"\n * @public\n */\n @property()\n type: `${UDExListStyleType}` = UDExListStyleType.None;\n\n /**\n * Allows control over the height.\n *\n * @public\n */\n @property({ type: String })\n height?: string;\n\n /**\n * Defines the controlled of the component.\n *\n * @default false\n * @public\n */\n @property({ type: Boolean })\n controlled?: boolean;\n\n /**\n * Defines the headerText, displayed in the top of the list.\n *\n * @public\n */\n @property({ type: String })\n headerText?: string;\n\n /**\n * Defines the name of the UI5 Icon, that will be displayed for each item of the list.\n *\n * @default \"\"\n * @public\n */\n @property({ type: String })\n itemIcon: string = \"\";\n\n /**\n * Enables tab navigation for the list.\n *\n * @default \"\"\n * @public\n */\n @property({ type: Boolean })\n tabNavigationEnabled?: boolean;\n\n /**\n * Slot for list items.\n *\n * @slot items\n * @public\n */\n @slot({ type: HTMLElement, \"default\": true })\n items!: Array<UDExListItemBase>;\n\n _focusHandler: UDExListWithFirstLetterFocus = new UDExFirstLetterFocusHandler();\n\n @i18n(\"@sapudex/web-components\")\n static i18nBundle: I18nBundle;\n\n onBeforeRendering(): void {\n this.prepareListItemsMode();\n this._focusHandler.resetMatchingItems();\n this._focusHandler._focusableListItems = this.getItemsWithoutHeader();\n }\n\n handleItemPress(e: CustomEvent): void {\n const clickedItem: UDExListItemBase = e.detail.item;\n this.onItemPress(clickedItem);\n }\n\n handleKeyDown(e: KeyboardEvent): void {\n if (this.tabNavigationEnabled) {\n return;\n }\n if (isUp(e)) {\n this.handleUpArrow(e);\n }\n if (isDown(e)) {\n this.handleDownArrow(e);\n }\n if (isHome(e)) {\n this.handleHomeKey(e);\n }\n if (isEnd(e)) {\n this.handleEndKey(e);\n }\n if (isLetterKey(e.key)) {\n this.handleLetterKey(e);\n }\n }\n\n handleUpArrow(e: KeyboardEvent): void {\n e.preventDefault();\n const items = this.getKeyboardNavigationItems();\n const currentSelectedIndex = this.getCurrentIndex(items, e.target as UDExListItemBase);\n const lastItemIndex = items.length - 1;\n const previousSelectIndex = currentSelectedIndex - 1 < 0 ? lastItemIndex : currentSelectedIndex - 1;\n const isHeaderItem = items[previousSelectIndex].isGroup;\n const nonInteractiveHeader = items[previousSelectIndex].nonInteractive;\n\n if (nonInteractiveHeader && previousSelectIndex === 0) {\n this.unsetTabIndexByIndex(items, currentSelectedIndex);\n this.setTabIndexByIndex(items, lastItemIndex);\n items[lastItemIndex].focus();\n return;\n }\n\n if (nonInteractiveHeader) {\n this.unsetTabIndexByIndex(items, currentSelectedIndex);\n this.setTabIndexByIndex(items, previousSelectIndex - 1);\n items[previousSelectIndex - 1].focus();\n return;\n }\n\n if (isHeaderItem) {\n this.unsetTabIndexByIndex(items, currentSelectedIndex);\n this.setTabIndexByIndex(items, previousSelectIndex);\n this.focusHeader(items[previousSelectIndex]);\n return;\n }\n\n if (this.modeRadioGroup) {\n items[currentSelectedIndex].selected = false;\n items[previousSelectIndex].selected = true;\n }\n\n this.unsetTabIndexByIndex(items, currentSelectedIndex);\n this.setTabIndexByIndex(items, previousSelectIndex);\n items[previousSelectIndex].focus();\n }\n\n handleDownArrow(e: KeyboardEvent): void {\n e.preventDefault();\n const items = this.getKeyboardNavigationItems();\n const currentSelectedIndex = this.getCurrentIndex(items, e.target as UDExListItemBase);\n const nextSelectIndex = currentSelectedIndex + 1 > items.length - 1 ? 0 : currentSelectedIndex + 1;\n const isHeaderItem = items[nextSelectIndex].isGroup;\n const nonInteractiveHeader = items[nextSelectIndex].nonInteractive;\n\n if (nonInteractiveHeader) {\n this.unsetTabIndexByIndex(items, currentSelectedIndex);\n this.setTabIndexByIndex(items, nextSelectIndex + 1);\n items[nextSelectIndex + 1].focus();\n return;\n }\n\n if (isHeaderItem) {\n this.unsetTabIndexByIndex(items, currentSelectedIndex);\n this.setTabIndexByIndex(items, nextSelectIndex);\n this.focusHeader(items[nextSelectIndex]);\n return;\n }\n\n if (this.modeRadioGroup) {\n items[currentSelectedIndex].selected = false;\n items[nextSelectIndex].selected = true;\n }\n\n this.unsetTabIndexByIndex(items, currentSelectedIndex);\n this.setTabIndexByIndex(items, nextSelectIndex);\n items[nextSelectIndex].focus();\n }\n\n handleHomeKey(e: KeyboardEvent): void {\n e.preventDefault();\n const items = this.getKeyboardNavigationItems();\n const currentSelectedIndex = this.getCurrentIndex(items, e.target as UDExListItemBase);\n const firstItem = items[0];\n const isHeaderItem = firstItem.isGroup;\n const nonInteractiveItem = firstItem.nonInteractive;\n\n if (nonInteractiveItem) {\n this.unsetTabIndexByIndex(items, currentSelectedIndex);\n this.setTabIndexByIndex(items, 1);\n items[1].focus();\n return;\n }\n\n if (isHeaderItem) {\n this.unsetTabIndexByIndex(items, currentSelectedIndex);\n this.setTabIndexByIndex(items, 0);\n this.focusHeader(items[0]);\n return;\n }\n\n if (this.modeRadioGroup) {\n items[currentSelectedIndex].selected = false;\n items[0].selected = true;\n }\n\n this.unsetTabIndexByIndex(items, currentSelectedIndex);\n this.setTabIndexByIndex(items, 0);\n items[0].focus();\n }\n\n handleEndKey(e: KeyboardEvent): void {\n e.preventDefault();\n const items = this.getKeyboardNavigationItems();\n const currentSelectedIndex = this.getCurrentIndex(items, e.target as UDExListItemBase);\n\n if (this.modeRadioGroup) {\n items[currentSelectedIndex].selected = false;\n items[items.length - 1].selected = true;\n }\n\n this.unsetTabIndexByIndex(items, currentSelectedIndex);\n this.setTabIndexByIndex(items, items.length - 1);\n items[items.length - 1].focus();\n }\n\n handleLetterKey(e: KeyboardEvent): void {\n const letterKey = e.key;\n e.stopPropagation();\n e.preventDefault();\n this._focusHandler.focusMatchingListItem(letterKey);\n }\n\n onItemPress(clickedItem: UDExListItemBase): void {\n if (this.modeSingleSelect && !this.controlled) {\n this.revertSelectedItems(this.getSelectedItems());\n clickedItem.selected = true;\n }\n\n if (this.modeRadioGroup && !this.controlled) {\n const groupHeader = clickedItem.parentElement as UDExListGroupHeaderBase;\n const groupItems = groupHeader.getItems() as Array<UDExListItemBase>;\n this.revertSelectedItems(groupItems);\n clickedItem.selected = true;\n }\n\n if (!this.tabNavigationEnabled) {\n this.resetTabIndexes();\n clickedItem._tabIndex = \"0\";\n }\n\n this.fireDecoratorEvent(\"selection-change\", {\n listItems: this.getItemsFromList(),\n selectedItems: this.getSelectedItems(),\n item: clickedItem,\n });\n }\n\n revertSelectedItems(items: Array<UDExListItemBase>): void {\n items.forEach((item: UDExListItemBase) => {\n if (!item.disabled) {\n item.selected = false;\n }\n });\n }\n\n focusSelectedItem(): void {\n const selectedItemIndex = this.items.findIndex(item => item.selected);\n this.resetTabIndexes();\n if (selectedItemIndex !== -1 && this.modeSingleSelect) {\n this.setTabIndexByIndex(this.items, selectedItemIndex);\n }\n }\n\n focusHeader(item: UDExListItemBase): void {\n const header = item.shadowRoot?.querySelector(\".udex-list__group-header\") as HTMLElement;\n header.focus();\n }\n\n unsetTabIndexByIndex(items: UDExListItemBase[], index: number): void {\n items[index]._tabIndex = \"-1\";\n }\n\n setTabIndexByIndex(items: UDExListItemBase[], index: number): void {\n items[index]._tabIndex = \"0\";\n }\n\n getItems(): Array<UDExListItemBase> {\n return this.getSlottedNodes<UDExListItemBase>(\"items\");\n }\n\n getSelectedItems(): Array<UDExListItemBase> {\n return this.getItemsFromList().filter(item => item.selected);\n }\n\n getCurrentIndex(items: Array<UDExListItemBase>, item: UDExListItemBase): number {\n return items.indexOf(item);\n }\n\n getItemsWithoutHeader(): Array<UDExListItemBase> {\n return this.getItemsFromList().filter(item => !item.isGroup);\n }\n\n getKeyboardNavigationItems(): Array<UDExListItemBase> {\n const items = this.modeMultiSelect ? this.getItemsFromList() : this.getItemsWithoutHeader();\n return items.filter(item => !item.disabled);\n }\n\n getItemsFromList(): Array<UDExListItemBase> {\n const items: UDExListItemBase[] = [];\n const slottedItems = this.getItems();\n\n slottedItems.forEach(item => {\n const childItems = item.isGroup ? item.children : [];\n items.push(item, ...childItems as UDExListItemBase[]);\n });\n\n return items;\n }\n\n prepareListItemsMode(): void {\n this.getItemsFromList().forEach((item, index) => {\n item.mode = this.mode;\n item.controlled = this.controlled;\n item.type = this.type;\n item._icon = this.itemIcon;\n item._tabIndex = this.getTabIndex(index, item);\n });\n }\n\n getTabIndex(index: number, item: UDExListItemBase): string {\n if (this.tabNavigationEnabled) {\n return \"0\";\n }\n\n const isFirstItem = this.modeSelected && index === 0;\n const isFirstItemInGroupList = this.isGroupList && index === 1;\n const listGroupHeader = item.closest(\"[udex-list-group-header]\") as UDExListGroupHeader;\n const modeSingleOrRadio = this.modeSingleSelect || this.modeRadioGroup;\n const isFirstHeader = item.isGroup && isFirstItem;\n const isFirstHeaderMultiMode = isFirstHeader && this.modeMultiSelect && !item.nonInteractive;\n const isFirstItemGroupSingleOrRadioMode = isFirstItemInGroupList && modeSingleOrRadio;\n const isFirstItemGroupMultiMode = isFirstItemInGroupList && this.modeMultiSelect && listGroupHeader?.nonInteractive;\n\n if (isFirstHeaderMultiMode || isFirstItemGroupSingleOrRadioMode || isFirstItemGroupMultiMode || isFirstItem) {\n return \"0\";\n }\n\n return \"-1\";\n }\n\n resetTabIndexes(): void {\n this.getItemsFromList().forEach(item => {\n item._tabIndex = \"-1\";\n });\n }\n\n get isGroupList(): boolean {\n return this.getItemsFromList().some(item => item.isGroup);\n }\n\n get ariaLabelModeText(): string {\n const defaultText = this.modeSingleSelect || this.modeRadioGroup\n ? ARIA_LABEL_LIST_SELECTABLE\n : ARIA_LABEL_LIST_MULTISELECTABLE;\n\n return this.accessibleName || UDExList.i18nBundle.getText(defaultText);\n }\n\n get ariaLabelledBy(): string {\n return `${this._id}-mode-label`;\n }\n\n get modeRadioGroup(): boolean {\n return this.mode === UDExListMode.RadioGroup;\n }\n\n get modeMultiSelect(): boolean {\n return this.mode === UDExListMode.MultiSelect;\n }\n\n get modeSingleSelect(): boolean {\n return this.mode === UDExListMode.SingleSelect;\n }\n\n get modeSingleContent(): boolean {\n return this.mode === UDExListMode.SingleContent;\n }\n\n get modeSelected(): boolean {\n return [UDExListMode.SingleSelect, UDExListMode.MultiSelect, UDExListMode.RadioGroup].includes(this.mode as UDExListMode);\n }\n\n get holderHeight(): string {\n return this.height ? this.height : \"auto\";\n }\n}\n\nUDExList.define();\n\nexport default UDExList;\nexport type { UDExListSelectionChangeEventDetail };\n"]}
|
|
1
|
+
{"version":3,"file":"List.js","sourceRoot":"","sources":["../src/List.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.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 litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport {\n isUp, isDown, isHome, isEnd,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport type UDExListItem from \"./ListItem.js\";\nimport { UDExListStyleType, UDExListMode } from \"./types/List.js\";\nimport type UDExListGroupHeader from \"./ListGroupHeader.js\";\nimport type UDExListGroupHeaderBase from \"./ListGroupHeaderBase.js\";\nimport type UDExUploadItem from \"./UploadItem.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { ARIA_LABEL_LIST_MULTISELECTABLE, ARIA_LABEL_LIST_SELECTABLE } from \"./generated/i18n/i18n-defaults.js\";\nimport ListTemplate from \"./generated/templates/ListTemplate.lit.js\";\n\n// Styles\nimport ListCss from \"./generated/themes/List.css.js\";\nimport isLetterKey from \"./utils/isLetterKeyPressed.js\";\nimport type { UDExListWithFirstLetterFocus } from \"./utils/ListWithFirstLetterFocus.js\";\nimport UDExFirstLetterFocusHandler from \"./utils/ListWithFirstLetterFocus.js\";\nimport getEffectiveScrollbarStyle from \"./utils/getEffectiveScrollbarStyle.js\";\n\nexport type UDExListItemBase = UDExListItem & UDExListGroupHeader & UDExUploadItem;\n\ntype UDExListSelectionChangeEventDetail = {\n listItems: Array<UDExListItemBase>,\n selectedItems: Array<UDExListItemBase>,\n item: HTMLElement,\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-list</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/List.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends UI5Element\n * @tagname udex-list\n * @public\n */\n@customElement({\n tag: \"udex-list\",\n renderer: litRender,\n styles: [ListCss, getEffectiveScrollbarStyle()],\n template: ListTemplate,\n dependencies: [],\n})\n\n/**\n * Fired when selection is changed by user interaction\n *\n * @public\n */\n@event(\"selection-change\", { bubbles: true })\n\nclass UDExList extends UI5Element {\n eventDetails!: {\n \"selection-change\": UDExListSelectionChangeEventDetail\n };\n /**\n * Defines the accessible role of the component.\n *\n * @default \"listbox\"\n * @public\n */\n @property()\n accessibleRole: string = \"listbox\";\n\n /**\n * Defines the accessible name of the component.\n *\n * @default \"\"\n * @public\n */\n @property()\n accessibleName: string = \"\";\n\n /**\n * Defines the mode of the component.\n *\n * @default \"SingleSelect\"\n * @public\n */\n @property()\n mode: `${UDExListMode}` = UDExListMode.SingleSelect;\n\n /**\n * Defines the type of the item.\n *\n * @default \"None\"\n * @public\n */\n @property()\n type: `${UDExListStyleType}` = UDExListStyleType.None;\n\n /**\n * Allows control over the height.\n *\n * @public\n */\n @property({ type: String })\n height?: string;\n\n /**\n * Defines the controlled of the component.\n *\n * @default false\n * @public\n */\n @property({ type: Boolean })\n controlled?: boolean;\n\n /**\n * Defines the headerText, displayed in the top of the list.\n *\n * @public\n */\n @property({ type: String })\n headerText?: string;\n\n /**\n * Defines the name of the UI5 Icon, that will be displayed for each item of the list.\n *\n * @default \"\"\n * @public\n */\n @property({ type: String })\n itemIcon: string = \"\";\n\n /**\n * Enables tab navigation for the list.\n *\n * @default \"\"\n * @public\n */\n @property({ type: Boolean })\n tabNavigationEnabled?: boolean;\n\n /**\n * Slot for list items.\n *\n * @slot items\n * @public\n */\n @slot({ type: HTMLElement, \"default\": true })\n items!: Array<UDExListItemBase>;\n\n _focusHandler: UDExListWithFirstLetterFocus = new UDExFirstLetterFocusHandler();\n\n @i18n(\"@sapudex/web-components\")\n static i18nBundle: I18nBundle;\n\n onBeforeRendering(): void {\n this.prepareListItemsMode();\n this._focusHandler.resetMatchingItems();\n this._focusHandler._focusableListItems = this.getItemsWithoutHeader();\n }\n\n handleItemPress(e: CustomEvent): void {\n const clickedItem: UDExListItemBase = e.detail.item;\n this.onItemPress(clickedItem);\n }\n\n handleKeyDown(e: KeyboardEvent): void {\n if (this.tabNavigationEnabled) {\n return;\n }\n if (isUp(e)) {\n this.handleUpArrow(e);\n }\n if (isDown(e)) {\n this.handleDownArrow(e);\n }\n if (isHome(e)) {\n this.handleHomeKey(e);\n }\n if (isEnd(e)) {\n this.handleEndKey(e);\n }\n if (isLetterKey(e.key)) {\n this.handleLetterKey(e);\n }\n }\n\n handleUpArrow(e: KeyboardEvent): void {\n e.preventDefault();\n const items = this.getKeyboardNavigationItems();\n const currentSelectedIndex = this.getCurrentIndex(items, e.target as UDExListItemBase);\n const lastItemIndex = items.length - 1;\n const previousSelectIndex = currentSelectedIndex - 1 < 0 ? lastItemIndex : currentSelectedIndex - 1;\n const isHeaderItem = items[previousSelectIndex].isGroup;\n const nonInteractiveHeader = items[previousSelectIndex].nonInteractive;\n\n if (nonInteractiveHeader && previousSelectIndex === 0) {\n this.unsetTabIndexByIndex(items, currentSelectedIndex);\n this.setTabIndexByIndex(items, lastItemIndex);\n items[lastItemIndex].focus();\n return;\n }\n\n if (nonInteractiveHeader) {\n this.unsetTabIndexByIndex(items, currentSelectedIndex);\n this.setTabIndexByIndex(items, previousSelectIndex - 1);\n items[previousSelectIndex - 1].focus();\n return;\n }\n\n if (isHeaderItem) {\n this.unsetTabIndexByIndex(items, currentSelectedIndex);\n this.setTabIndexByIndex(items, previousSelectIndex);\n this.focusHeader(items[previousSelectIndex]);\n return;\n }\n\n if (this.modeRadioGroup) {\n items[currentSelectedIndex].selected = false;\n items[previousSelectIndex].selected = true;\n }\n\n this.unsetTabIndexByIndex(items, currentSelectedIndex);\n this.setTabIndexByIndex(items, previousSelectIndex);\n items[previousSelectIndex].focus();\n }\n\n handleDownArrow(e: KeyboardEvent): void {\n e.preventDefault();\n const items = this.getKeyboardNavigationItems();\n const currentSelectedIndex = this.getCurrentIndex(items, e.target as UDExListItemBase);\n const nextSelectIndex = currentSelectedIndex + 1 > items.length - 1 ? 0 : currentSelectedIndex + 1;\n const isHeaderItem = items[nextSelectIndex].isGroup;\n const nonInteractiveHeader = items[nextSelectIndex].nonInteractive;\n\n if (nonInteractiveHeader) {\n this.unsetTabIndexByIndex(items, currentSelectedIndex);\n this.setTabIndexByIndex(items, nextSelectIndex + 1);\n items[nextSelectIndex + 1].focus();\n return;\n }\n\n if (isHeaderItem) {\n this.unsetTabIndexByIndex(items, currentSelectedIndex);\n this.setTabIndexByIndex(items, nextSelectIndex);\n this.focusHeader(items[nextSelectIndex]);\n return;\n }\n\n if (this.modeRadioGroup) {\n items[currentSelectedIndex].selected = false;\n items[nextSelectIndex].selected = true;\n }\n\n this.unsetTabIndexByIndex(items, currentSelectedIndex);\n this.setTabIndexByIndex(items, nextSelectIndex);\n items[nextSelectIndex].focus();\n }\n\n handleHomeKey(e: KeyboardEvent): void {\n e.preventDefault();\n const items = this.getKeyboardNavigationItems();\n const currentSelectedIndex = this.getCurrentIndex(items, e.target as UDExListItemBase);\n const firstItem = items[0];\n const isHeaderItem = firstItem.isGroup;\n const nonInteractiveItem = firstItem.nonInteractive;\n\n if (nonInteractiveItem) {\n this.unsetTabIndexByIndex(items, currentSelectedIndex);\n this.setTabIndexByIndex(items, 1);\n items[1].focus();\n return;\n }\n\n if (isHeaderItem) {\n this.unsetTabIndexByIndex(items, currentSelectedIndex);\n this.setTabIndexByIndex(items, 0);\n this.focusHeader(items[0]);\n return;\n }\n\n if (this.modeRadioGroup) {\n items[currentSelectedIndex].selected = false;\n items[0].selected = true;\n }\n\n this.unsetTabIndexByIndex(items, currentSelectedIndex);\n this.setTabIndexByIndex(items, 0);\n items[0].focus();\n }\n\n handleEndKey(e: KeyboardEvent): void {\n e.preventDefault();\n const items = this.getKeyboardNavigationItems();\n const currentSelectedIndex = this.getCurrentIndex(items, e.target as UDExListItemBase);\n\n if (this.modeRadioGroup) {\n items[currentSelectedIndex].selected = false;\n items[items.length - 1].selected = true;\n }\n\n this.unsetTabIndexByIndex(items, currentSelectedIndex);\n this.setTabIndexByIndex(items, items.length - 1);\n items[items.length - 1].focus();\n }\n\n handleLetterKey(e: KeyboardEvent): void {\n const letterKey = e.key;\n e.stopPropagation();\n e.preventDefault();\n this._focusHandler.focusMatchingListItem(letterKey);\n }\n\n onItemPress(clickedItem: UDExListItemBase): void {\n if (this.modeSingleSelect && !this.controlled) {\n this.revertSelectedItems(this.getSelectedItems());\n clickedItem.selected = true;\n }\n\n if (this.modeRadioGroup && !this.controlled) {\n const groupHeader = clickedItem.parentElement as UDExListGroupHeaderBase;\n const groupItems = groupHeader.getItems() as Array<UDExListItemBase>;\n this.revertSelectedItems(groupItems);\n clickedItem.selected = true;\n }\n\n if (!this.tabNavigationEnabled) {\n this.resetTabIndexes();\n clickedItem._tabIndex = \"0\";\n }\n\n this.fireDecoratorEvent(\"selection-change\", {\n listItems: this.getItemsFromList(),\n selectedItems: this.getSelectedItems(),\n item: clickedItem,\n });\n }\n\n revertSelectedItems(items: Array<UDExListItemBase>): void {\n items.forEach((item: UDExListItemBase) => {\n if (!item.disabled) {\n item.selected = false;\n }\n });\n }\n\n focusSelectedItem(): void {\n const selectedItemIndex = this.items.findIndex(item => item.selected);\n this.resetTabIndexes();\n if (selectedItemIndex !== -1 && this.modeSingleSelect) {\n this.setTabIndexByIndex(this.items, selectedItemIndex);\n }\n }\n\n focusHeader(item: UDExListItemBase): void {\n const header = item.shadowRoot?.querySelector(\".udex-list__group-header\") as HTMLElement;\n header.focus();\n }\n\n unsetTabIndexByIndex(items: UDExListItemBase[], index: number): void {\n items[index]._tabIndex = \"-1\";\n }\n\n setTabIndexByIndex(items: UDExListItemBase[], index: number): void {\n items[index]._tabIndex = \"0\";\n }\n\n getItems(): Array<UDExListItemBase> {\n return this.getSlottedNodes<UDExListItemBase>(\"items\");\n }\n\n getSelectedItems(): Array<UDExListItemBase> {\n return this.getItemsFromList().filter(item => item.selected);\n }\n\n getCurrentIndex(items: Array<UDExListItemBase>, item: UDExListItemBase): number {\n return items.indexOf(item);\n }\n\n getItemsWithoutHeader(): Array<UDExListItemBase> {\n return this.getItemsFromList().filter(item => !item.isGroup);\n }\n\n getKeyboardNavigationItems(): Array<UDExListItemBase> {\n const items = this.modeMultiSelect ? this.getItemsFromList() : this.getItemsWithoutHeader();\n return items.filter(item => !item.disabled);\n }\n\n getItemsFromList(): Array<UDExListItemBase> {\n const items: UDExListItemBase[] = [];\n const slottedItems = this.getItems();\n\n slottedItems.forEach(item => {\n const childItems = item.isGroup ? item.children : [];\n items.push(item, ...childItems as UDExListItemBase[]);\n });\n\n return items;\n }\n\n prepareListItemsMode(): void {\n this.getItemsFromList().forEach((item, index) => {\n item.mode = this.mode;\n item.controlled = this.controlled;\n item.type = this.type;\n item._icon = this.itemIcon;\n item._tabIndex = this.getTabIndex(index, item);\n });\n }\n\n getTabIndex(index: number, item: UDExListItemBase): string {\n if (this.tabNavigationEnabled) {\n return \"0\";\n }\n\n const isFirstItem = this.modeSelected && index === 0;\n const isFirstItemInGroupList = this.isGroupList && index === 1;\n const listGroupHeader = item.closest(\"[udex-list-group-header]\") as UDExListGroupHeader;\n const modeSingleOrRadio = this.modeSingleSelect || this.modeRadioGroup;\n const isFirstHeader = item.isGroup && isFirstItem;\n const isFirstHeaderMultiMode = isFirstHeader && this.modeMultiSelect && !item.nonInteractive;\n const isFirstItemGroupSingleOrRadioMode = isFirstItemInGroupList && modeSingleOrRadio;\n const isFirstItemGroupMultiMode = isFirstItemInGroupList && this.modeMultiSelect && listGroupHeader?.nonInteractive;\n\n if (isFirstHeaderMultiMode || isFirstItemGroupSingleOrRadioMode || isFirstItemGroupMultiMode || isFirstItem) {\n return \"0\";\n }\n\n return \"-1\";\n }\n\n resetTabIndexes(): void {\n this.getItemsFromList().forEach(item => {\n item._tabIndex = \"-1\";\n });\n }\n\n get isGroupList(): boolean {\n return this.getItemsFromList().some(item => item.isGroup);\n }\n\n get ariaLabelModeText(): string {\n const defaultText = this.modeSingleSelect || this.modeRadioGroup\n ? ARIA_LABEL_LIST_SELECTABLE\n : ARIA_LABEL_LIST_MULTISELECTABLE;\n\n return this.accessibleName || UDExList.i18nBundle.getText(defaultText);\n }\n\n get ariaLabelledBy(): string {\n return `${this._id}-mode-label`;\n }\n\n get modeRadioGroup(): boolean {\n return this.mode === UDExListMode.RadioGroup;\n }\n\n get modeMultiSelect(): boolean {\n return this.mode === UDExListMode.MultiSelect;\n }\n\n get modeSingleSelect(): boolean {\n return this.mode === UDExListMode.SingleSelect;\n }\n\n get modeSingleContent(): boolean {\n return this.mode === UDExListMode.SingleContent;\n }\n\n get modeSelected(): boolean {\n return [UDExListMode.SingleSelect, UDExListMode.MultiSelect, UDExListMode.RadioGroup].includes(this.mode as UDExListMode);\n }\n\n get holderHeight(): string {\n return this.height ? this.height : \"auto\";\n }\n}\n\nUDExList.define();\n\nexport default UDExList;\nexport type { UDExListSelectionChangeEventDetail };\n"]}
|
package/dist/ListGroupHeader.js
CHANGED
|
@@ -69,7 +69,13 @@ UDExListGroupHeader = __decorate([
|
|
|
69
69
|
styles: ListGroupHeaderCss,
|
|
70
70
|
template: ListGroupHeaderTemplate,
|
|
71
71
|
dependencies: [Icon],
|
|
72
|
-
})
|
|
72
|
+
})
|
|
73
|
+
/**
|
|
74
|
+
* Fired when selectable group header is pressed
|
|
75
|
+
*
|
|
76
|
+
* @public
|
|
77
|
+
*/
|
|
78
|
+
,
|
|
73
79
|
event("header-press", { bubbles: true })
|
|
74
80
|
], UDExListGroupHeader);
|
|
75
81
|
UDExListGroupHeader.define();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListGroupHeader.js","sourceRoot":"","sources":["../src/ListGroupHeader.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,KAAK,MAAM,yDAAyD,CAAC;AAC5E,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,uBAAuB,MAAM,0BAA0B,CAAC;AAC/D,OAAO,uBAAuB,MAAM,sDAAsD,CAAC;AAC3F,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGnD,SAAS;AACT,OAAO,kBAAkB,MAAM,2CAA2C,CAAC;AAE3E,MAAM,mBAAmB,GAAW,wBAAwB,CAAC;AAM7D;;;;;;;;;;;;;;;;;;GAkBG;
|
|
1
|
+
{"version":3,"file":"ListGroupHeader.js","sourceRoot":"","sources":["../src/ListGroupHeader.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,KAAK,MAAM,yDAAyD,CAAC;AAC5E,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,uBAAuB,MAAM,0BAA0B,CAAC;AAC/D,OAAO,uBAAuB,MAAM,sDAAsD,CAAC;AAC3F,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGnD,SAAS;AACT,OAAO,kBAAkB,MAAM,2CAA2C,CAAC;AAE3E,MAAM,mBAAmB,GAAW,wBAAwB,CAAC;AAM7D;;;;;;;;;;;;;;;;;;GAkBG;AAgBH,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,uBAAuB;IAKvD,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,IAAI,CAAC,yBAAyB,EAAE,CAAC;QACnC,CAAC;QACD,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAED,kBAAkB,CAAC,CAAgB;QACjC,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;YACf,CAAC,CAAC,cAAc,EAAE,CAAC;QACrB,CAAC;QACD,IAAI,OAAO,CAAC,CAAC,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;YAC7B,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC3B,CAAC;IACH,CAAC;IAED,eAAe;QACb,IAAI,CAAC,kBAAkB,CAAC,cAAc,EAAE;YACtC,IAAI,EAAE,IAAI;SACX,CAAC,CAAC;IACL,CAAC;IAED,wBAAwB;QACtB,MAAM,SAAS,GAAG,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC;QAC3D,OAAO,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;IAC1D,CAAC;IAED,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,IAAI,KAAK,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,CAAC;IACzE,CAAC;CACF,CAAA;AAnCK,mBAAmB;IAfxB,aAAa,CAAC;QACb,GAAG,EAAE,wBAAwB;QAC7B,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,kBAAkB;QAC1B,QAAQ,EAAE,uBAAuB;QACjC,YAAY,EAAE,CAAC,IAAI,CAAC;KACrB,CAAC;IAEF;;;;SAIK;;IACJ,KAAK,CAAC,cAAc,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;GAEnC,mBAAmB,CAmCxB;AAED,mBAAmB,CAAC,MAAM,EAAE,CAAC;AAE7B,eAAe,mBAAmB,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { isEnter, isSpace } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport UDExListGroupHeaderBase from \"./ListGroupHeaderBase.js\";\nimport ListGroupHeaderTemplate from \"./generated/templates/ListGroupHeaderTemplate.lit.js\";\nimport { UDExListItemSize } from \"./types/List.js\";\nimport type { UDExListItemBaseEvents } from \"./ListItemBase.js\";\n\n// Styles\nimport ListGroupHeaderCss from \"./generated/themes/ListGroupHeader.css.js\";\n\nconst listGroupLargeClass: string = \"udex-list__group_large\";\n\ntype UDExListGroupHeaderBaseHeaderPressEventDetail = {\n item: HTMLElement,\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-list-group-header</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/ListGroupHeader.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends UDExListGroupHeaderBase\n * @tagname udex-list-group-header\n * @public\n */\n@customElement({\n tag: \"udex-list-group-header\",\n renderer: litRender,\n styles: ListGroupHeaderCss,\n template: ListGroupHeaderTemplate,\n dependencies: [Icon],\n})\n\n/**\n * Fired when selectable group header is pressed\n *\n * @public\n */\n@event(\"header-press\", { bubbles: true })\n\nclass UDExListGroupHeader extends UDExListGroupHeaderBase {\n eventDetails!: {\n \"header-press\": UDExListGroupHeaderBaseHeaderPressEventDetail,\n } & UDExListItemBaseEvents;\n\n handleHeaderPress() {\n if (!this.controlled) {\n this.handleSelectionGroupState();\n }\n this.fireHeaderPress();\n }\n\n handleKeyDownPress(e: KeyboardEvent) {\n if (isSpace(e)) {\n e.preventDefault();\n }\n if (isSpace(e) || isEnter(e)) {\n this.handleHeaderPress();\n }\n }\n\n fireHeaderPress() {\n this.fireDecoratorEvent(\"header-press\", {\n item: this,\n });\n }\n\n getHandleGroupItemsClick() {\n const hasHandle = this.modeMultiSelect && !this.controlled;\n return hasHandle ? this.handleHeaderState() : undefined;\n }\n\n get sizeClass(): string {\n return this.size === UDExListItemSize.Large ? listGroupLargeClass : \"\";\n }\n}\n\nUDExListGroupHeader.define();\n\nexport default UDExListGroupHeader;\nexport type { UDExListGroupHeaderBaseHeaderPressEventDetail };\n"]}
|
package/dist/ListSelectAll.js
CHANGED
|
@@ -85,7 +85,13 @@ UDExListSelectAll = UDExListSelectAll_1 = __decorate([
|
|
|
85
85
|
styles: ListGroupHeaderCss,
|
|
86
86
|
template: ListSelectAllTemplate,
|
|
87
87
|
dependencies: [UDExListItem],
|
|
88
|
-
})
|
|
88
|
+
})
|
|
89
|
+
/**
|
|
90
|
+
* Fired when the user clicks on the Select All header.
|
|
91
|
+
*
|
|
92
|
+
* @public
|
|
93
|
+
*/
|
|
94
|
+
,
|
|
89
95
|
event("select-all", { bubbles: true })
|
|
90
96
|
], UDExListSelectAll);
|
|
91
97
|
UDExListSelectAll.define();
|