@sapudex/web-components 2.12.1 → 2.14.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/EventRibbon.cy.tsx +10 -2
- package/cypress/specs/FilterMenu.cy.tsx +17 -1
- package/cypress/specs/HeroBanner.cy.tsx +174 -0
- package/cypress/specs/SelectBox.cy.tsx +17 -0
- package/cypress/specs/SocialMediaButton.cy.tsx +6 -0
- package/cypress/support/component-imports.instrumented.ts +2 -0
- package/cypress/support/component-imports.src.ts +2 -0
- package/dist/Accordion.d.ts +4 -3
- package/dist/Accordion.js.map +1 -1
- package/dist/AccordionItem.js.map +1 -1
- package/dist/Breadcrumbs.d.ts +2 -1
- package/dist/Breadcrumbs.js +2 -2
- package/dist/Breadcrumbs.js.map +1 -1
- package/dist/Checkbox.js +1 -1
- package/dist/Checkbox.js.map +1 -1
- package/dist/ContactItem.d.ts +1 -0
- package/dist/ContactItem.js.map +1 -1
- package/dist/ControlButton.js +3 -3
- package/dist/ControlButton.js.map +1 -1
- package/dist/CountrySelector.d.ts +1 -0
- package/dist/CountrySelector.js +1 -1
- package/dist/CountrySelector.js.map +1 -1
- package/dist/DatePicker.d.ts +3 -2
- package/dist/DatePicker.js.map +1 -1
- package/dist/Dropdown.js.map +1 -1
- package/dist/EventRibbon.js +1 -1
- package/dist/EventRibbon.js.map +1 -1
- package/dist/EventRibbonTemplate.js +3 -2
- package/dist/EventRibbonTemplate.js.map +1 -1
- package/dist/FilterMenu.d.ts +11 -5
- package/dist/FilterMenu.js +7 -0
- package/dist/FilterMenu.js.map +1 -1
- package/dist/FilterMenuGroupHeader.js.map +1 -1
- package/dist/FilterMenuItem.js.map +1 -1
- package/dist/Footer.d.ts +1 -0
- package/dist/Footer.js.map +1 -1
- package/dist/HeroBanner.d.ts +8 -0
- package/dist/HeroBanner.js +6 -0
- package/dist/HeroBanner.js.map +1 -1
- package/dist/InputGroup.js.map +1 -1
- package/dist/LinkList.js.map +1 -1
- package/dist/LinkListItem.d.ts +1 -0
- package/dist/LinkListItem.js.map +1 -1
- package/dist/List.d.ts +1 -0
- package/dist/List.js +1 -1
- package/dist/List.js.map +1 -1
- package/dist/ListGroupHeader.d.ts +1 -0
- package/dist/ListGroupHeader.js.map +1 -1
- package/dist/ListGroupHeaderBase.js.map +1 -1
- package/dist/ListItem.d.ts +1 -0
- package/dist/ListItem.js +1 -1
- package/dist/ListItem.js.map +1 -1
- package/dist/ListItemBase.d.ts +5 -4
- package/dist/ListItemBase.js.map +1 -1
- package/dist/ListSelectAll.d.ts +1 -0
- package/dist/ListSelectAll.js.map +1 -1
- package/dist/MastheadCountrySelector.d.ts +10 -9
- package/dist/MastheadCountrySelector.js.map +1 -1
- package/dist/MastheadItem.d.ts +2 -1
- package/dist/MastheadItem.js.map +1 -1
- package/dist/MastheadMenu.d.ts +1 -0
- package/dist/MastheadMenu.js.map +1 -1
- package/dist/MastheadMenuItem.js.map +1 -1
- package/dist/MastheadMobileMenu.d.ts +1 -0
- package/dist/MastheadMobileMenu.js.map +1 -1
- package/dist/MastheadProfileMenu.d.ts +4 -3
- package/dist/MastheadProfileMenu.js +2 -2
- package/dist/MastheadProfileMenu.js.map +1 -1
- package/dist/MastheadShell.d.ts +12 -11
- package/dist/MastheadShell.js.map +1 -1
- package/dist/MediaPlayer.d.ts +2 -1
- package/dist/MediaPlayer.js.map +1 -1
- package/dist/MediaPlayerVimeo.d.ts +1 -0
- package/dist/MediaPlayerVimeo.js.map +1 -1
- package/dist/MediaPlayerYoutube.d.ts +1 -0
- package/dist/MediaPlayerYoutube.js.map +1 -1
- package/dist/Pagination.d.ts +3 -2
- package/dist/Pagination.js.map +1 -1
- package/dist/PromoTile.d.ts +12 -22
- package/dist/PromoTile.js +6 -7
- package/dist/PromoTile.js.map +1 -1
- package/dist/RatingIndicator.js.map +1 -1
- package/dist/Search.d.ts +11 -5
- package/dist/Search.js +6 -6
- package/dist/Search.js.map +1 -1
- package/dist/SearchableListBase.d.ts +5 -4
- package/dist/SearchableListBase.js.map +1 -1
- package/dist/SecondaryNavigation.d.ts +1 -0
- package/dist/SecondaryNavigation.js.map +1 -1
- package/dist/SecondaryNavigationItem.d.ts +3 -2
- package/dist/SecondaryNavigationItem.js.map +1 -1
- package/dist/SecondaryNavigationItemBase.js.map +1 -1
- package/dist/SecondaryNavigationSubItem.d.ts +3 -2
- package/dist/SecondaryNavigationSubItem.js.map +1 -1
- package/dist/SelectBox.d.ts +6 -0
- package/dist/SelectBox.js +7 -0
- package/dist/SelectBox.js.map +1 -1
- package/dist/SelectBoxGroupHeader.js.map +1 -1
- package/dist/SideNavigationMobile.d.ts +1 -1
- package/dist/SideNavigationMobile.js.map +1 -1
- package/dist/SocialMediaButton.d.ts +8 -0
- package/dist/SocialMediaButton.js +10 -1
- package/dist/SocialMediaButton.js.map +1 -1
- package/dist/SocialMediaButtonTemplate.js +1 -1
- package/dist/SocialMediaButtonTemplate.js.map +1 -1
- package/dist/StepInput.d.ts +3 -2
- package/dist/StepInput.js.map +1 -1
- package/dist/StepInputTemplate.js +1 -1
- package/dist/StepInputTemplate.js.map +1 -1
- package/dist/Switch.js.map +1 -1
- package/dist/Tab.d.ts +1 -2
- package/dist/Tab.js.map +1 -1
- package/dist/TabNavigation.d.ts +1 -0
- package/dist/TabNavigation.js.map +1 -1
- package/dist/Table.d.ts +2 -2
- package/dist/Table.js.map +1 -1
- package/dist/TableCellBase.js.map +1 -1
- package/dist/TableRowBase.js.map +1 -1
- package/dist/Tag.d.ts +1 -0
- package/dist/Tag.js.map +1 -1
- package/dist/TagGroup.d.ts +1 -0
- package/dist/TagGroup.js.map +1 -1
- package/dist/TextField.d.ts +2 -1
- package/dist/TextField.js.map +1 -1
- package/dist/Tile.d.ts +2 -0
- package/dist/Tile.js.map +1 -1
- package/dist/Tooltip.d.ts +11 -0
- package/dist/Tooltip.js +42 -0
- package/dist/Tooltip.js.map +1 -1
- package/dist/Upload.d.ts +1 -0
- package/dist/Upload.js.map +1 -1
- package/dist/UploadItem.js +1 -1
- package/dist/UploadItem.js.map +1 -1
- package/dist/Wizard.d.ts +2 -2
- package/dist/Wizard.js.map +1 -1
- package/dist/WizardTab.js +1 -1
- package/dist/WizardTab.js.map +1 -1
- package/dist/assets/{InputSuggestions-CgAp8PwR.js → InputSuggestions-AxcsfuTc.js} +1 -1
- package/dist/assets/{ListItemStandardExpandableTextTemplate-D5HEHY33.js → ListItemStandardExpandableTextTemplate-CaS49yZt.js} +1 -1
- package/dist/assets/{bundle.esm-CjcqU0ib.js → bundle.esm-DzkSPQ0p.js} +157 -157
- package/dist/css/themes/EventRibbon.css +1 -1
- package/dist/css/themes/Link.css +1 -1
- package/dist/css/themes/RatingIndicator.css +1 -1
- package/dist/css/themes/Slider.css +1 -1
- package/dist/css/themes/SocialMediaButton.css +1 -1
- package/dist/custom-elements-internal.json +136 -12
- package/dist/custom-elements.json +101 -12
- package/dist/generated/templates/HeroBannerTemplate.lit.js +2 -1
- package/dist/generated/templates/HeroBannerTemplate.lit.js.map +1 -1
- package/dist/generated/templates/TooltipTemplate.lit.js +1 -1
- package/dist/generated/templates/TooltipTemplate.lit.js.map +1 -1
- package/dist/generated/themes/EventRibbon.css.d.ts +1 -1
- package/dist/generated/themes/EventRibbon.css.js +1 -1
- package/dist/generated/themes/EventRibbon.css.js.map +1 -1
- package/dist/generated/themes/Link.css.d.ts +1 -1
- package/dist/generated/themes/Link.css.js +1 -1
- package/dist/generated/themes/Link.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/generated/themes/SocialMediaButton.css.d.ts +1 -1
- package/dist/generated/themes/SocialMediaButton.css.js +1 -1
- package/dist/generated/themes/SocialMediaButton.css.js.map +1 -1
- package/dist/types/PromoTile.d.ts +1 -1
- package/dist/types/PromoTile.js +57 -57
- package/dist/types/PromoTile.js.map +1 -1
- package/dist/vscode.html-custom-data.json +6 -6
- package/dist/web-types.json +72 -19
- package/package.json +1 -1
- package/src/Accordion.ts +5 -4
- package/src/AccordionItem.ts +1 -0
- package/src/Breadcrumbs.ts +4 -10
- package/src/Checkbox.ts +3 -2
- package/src/ContactItem.ts +1 -0
- package/src/ControlButton.ts +3 -3
- package/src/CountrySelector.ts +2 -5
- package/src/DatePicker.ts +3 -2
- package/src/Dropdown.ts +0 -1
- package/src/EventRibbon.ts +1 -1
- package/src/EventRibbonTemplate.tsx +6 -7
- package/src/FilterMenu.ts +16 -7
- package/src/FilterMenuGroupHeader.ts +0 -1
- package/src/FilterMenuItem.ts +1 -0
- package/src/Footer.ts +1 -0
- package/src/HeroBanner.hbs +3 -0
- package/src/HeroBanner.ts +14 -1
- package/src/InputGroup.ts +0 -1
- package/src/LinkList.ts +1 -0
- package/src/LinkListItem.ts +1 -0
- package/src/List.ts +3 -8
- package/src/ListGroupHeader.ts +1 -0
- package/src/ListGroupHeaderBase.ts +0 -1
- package/src/ListItem.ts +2 -3
- package/src/ListItemBase.ts +6 -6
- package/src/ListSelectAll.ts +1 -0
- package/src/MastheadCountrySelector.ts +12 -11
- package/src/MastheadItem.ts +2 -1
- package/src/MastheadMenu.ts +1 -0
- package/src/MastheadMenuItem.ts +1 -0
- package/src/MastheadMobileMenu.ts +1 -0
- package/src/MastheadProfileMenu.ts +7 -5
- package/src/MastheadShell.ts +14 -12
- package/src/MediaPlayer.ts +2 -2
- package/src/MediaPlayerVimeo.ts +1 -0
- package/src/MediaPlayerYoutube.ts +1 -0
- package/src/Pagination.ts +3 -2
- package/src/PromoTile.ts +16 -26
- package/src/RatingIndicator.ts +0 -1
- package/src/Search.ts +14 -17
- package/src/SearchableListBase.ts +8 -5
- package/src/SecondaryNavigation.ts +1 -0
- package/src/SecondaryNavigationItem.ts +4 -11
- package/src/SecondaryNavigationItemBase.ts +0 -1
- package/src/SecondaryNavigationSubItem.ts +3 -2
- package/src/SelectBox.ts +10 -12
- package/src/SelectBoxGroupHeader.ts +0 -1
- package/src/SideNavigationMobile.ts +1 -1
- package/src/SocialMediaButton.ts +17 -1
- package/src/SocialMediaButtonTemplate.tsx +3 -1
- package/src/StepInput.ts +4 -14
- package/src/StepInputTemplate.tsx +1 -1
- package/src/Switch.ts +0 -1
- package/src/Tab.ts +1 -2
- package/src/TabNavigation.ts +5 -14
- package/src/Table.ts +2 -2
- package/src/TableCellBase.ts +0 -1
- package/src/TableRowBase.ts +0 -1
- package/src/Tag.ts +1 -0
- package/src/TagGroup.ts +1 -0
- package/src/TextField.ts +2 -1
- package/src/Tile.ts +3 -1
- package/src/Tooltip.hbs +5 -1
- package/src/Tooltip.ts +52 -0
- package/src/Upload.ts +1 -0
- package/src/UploadItem.ts +1 -4
- package/src/Wizard.ts +2 -2
- package/src/WizardTab.ts +1 -1
- package/src/generated/templates/HeroBannerTemplate.lit.ts +2 -1
- package/src/generated/templates/TooltipTemplate.lit.ts +1 -1
- package/src/generated/themes/EventRibbon.css.ts +1 -1
- package/src/generated/themes/Link.css.ts +1 -1
- package/src/generated/themes/RatingIndicator.css.ts +1 -1
- package/src/generated/themes/Slider.css.ts +1 -1
- package/src/generated/themes/SocialMediaButton.css.ts +1 -1
- package/src/themes/EventRibbon.css +20 -9
- package/src/themes/Link.css +4 -2
- package/src/themes/SocialMediaButton.css +4 -1
- package/src/types/PromoTile.ts +1 -1
|
@@ -114,12 +114,20 @@ describe("EventRibbon", () => {
|
|
|
114
114
|
cy.mount(defaultEventRibbon)
|
|
115
115
|
cy.get("[udex-event-ribbon]").shadow().find(".udex-event-ribbon__container").should("have.attr", "target", "_blank");
|
|
116
116
|
cy.get("[udex-event-ribbon]").shadow().find(".udex-event-ribbon__container").should("have.attr", "href", "#");
|
|
117
|
-
|
|
117
|
+
|
|
118
|
+
cy.get("[udex-event-ribbon]")
|
|
119
|
+
.invoke('prop', '_id')
|
|
120
|
+
.then((_id) => {
|
|
121
|
+
cy.get("[udex-event-ribbon]")
|
|
122
|
+
.shadow()
|
|
123
|
+
.find('.udex-event-ribbon__container')
|
|
124
|
+
.should('have.attr', 'aria-labelledby', `${_id}-text ${_id}-link-text`)
|
|
125
|
+
});
|
|
118
126
|
});
|
|
119
127
|
|
|
120
128
|
it("correctly renders custom logo image", () => {
|
|
121
129
|
cy.mount(customLogoEventRibbon)
|
|
122
|
-
cy.get("[udex-event-ribbon]").shadow().find(".udex-event-
|
|
130
|
+
cy.get("[udex-event-ribbon]").shadow().find(".udex-event-ribbon__custom-logo").should("have.attr", "src", "https://cdn.udex.services.sap.com/dds/design-tokens/assets/logos/sap-logo.svg");
|
|
123
131
|
});
|
|
124
132
|
|
|
125
133
|
it("correctly renders custom logo image alt text", () => {
|
|
@@ -487,12 +487,28 @@ describe("Filter Menu component", () => {
|
|
|
487
487
|
|
|
488
488
|
cy.get("[udex-filter-menu]").shadow().find("udex-search").shadow().find(".udex-search__reset-button").as("clearSearchBtn");
|
|
489
489
|
|
|
490
|
-
cy.get("
|
|
490
|
+
cy.get("[udex-filter-menu]").then(($el) => {
|
|
491
|
+
const element = $el[0] as UDExFilterMenu;
|
|
492
|
+
element.resetSearch();
|
|
493
|
+
});
|
|
494
|
+
|
|
491
495
|
cy.get("@triggerBtn").click();
|
|
492
496
|
|
|
493
497
|
cy.get("@searchInput").should("have.value", "");
|
|
494
498
|
});
|
|
495
499
|
|
|
500
|
+
it("test if dropdown close using close method", () => {
|
|
501
|
+
cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").as("triggerBtn");
|
|
502
|
+
cy.get("@triggerBtn").click();
|
|
503
|
+
|
|
504
|
+
cy.get("[udex-filter-menu]").then(($el) => {
|
|
505
|
+
const element = $el[0] as UDExFilterMenu;
|
|
506
|
+
element.close();
|
|
507
|
+
});
|
|
508
|
+
|
|
509
|
+
cy.get("@triggerBtn").should("have.attr", "aria-expanded", "false");
|
|
510
|
+
});
|
|
511
|
+
|
|
496
512
|
it("focuses on element with corresponding starting letter", () => {
|
|
497
513
|
cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").as("triggerBtn");
|
|
498
514
|
cy.get("@triggerBtn").click();
|
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
import {UDExHeroBanner, UDExButton, UDExBreadcrumbs, UDExBreadcrumbsItem} from "../support/component-imports.js";
|
|
2
|
+
import UDExButtonDesign from "../../src/types/ButtonDesign.js";
|
|
3
|
+
|
|
4
|
+
const primaryContentHeader = "Grow your business through enterprise";
|
|
5
|
+
const secondaryContentHeader = "Entertain an idea";
|
|
6
|
+
const backgroundVideoLabel = "Hero Banner background video label";
|
|
7
|
+
const backgroundImageLabel = "Hero Banner background image label";
|
|
8
|
+
const backgroundImageSrc = "./stories/hero-banner/bg1.png";
|
|
9
|
+
const backgroundVideoSrc = "./stories/hero-banner-bg-video.mp4";
|
|
10
|
+
const mediaContentImage = "./stories/hero-banner/bg6.jpg";
|
|
11
|
+
const linearGradient = "linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%)";
|
|
12
|
+
const contentText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere in massa id fringilla. Nunc rutrum turpis purus, et dignissim arcu gravida ut. Morbi sed sem ac magna consectetur tincidunt dapibus sed ipsum.";
|
|
13
|
+
const backgroundColor = "#fbdab9";
|
|
14
|
+
|
|
15
|
+
const heroBanner = <>
|
|
16
|
+
<UDExHeroBanner
|
|
17
|
+
id="heroBannerDefault"
|
|
18
|
+
backgroundImage={backgroundImageSrc}
|
|
19
|
+
backgroundImageLabel={backgroundImageLabel}
|
|
20
|
+
backgroundColor={backgroundColor}>
|
|
21
|
+
<div slot="content">
|
|
22
|
+
<UDExBreadcrumbs show-items="5" slot="breadcrumbs">
|
|
23
|
+
<UDExBreadcrumbsItem href="https://www.sap.com" icon="home" target="_blank" accessibleName="Home page">SAP Home</UDExBreadcrumbsItem>
|
|
24
|
+
<UDExBreadcrumbsItem href="htttps://www.sap.com" target="_blank">Second level</UDExBreadcrumbsItem>
|
|
25
|
+
<UDExBreadcrumbsItem href="htttps://www.sap.com" target="_blank">Third level</UDExBreadcrumbsItem>
|
|
26
|
+
<UDExBreadcrumbsItem href="htttps://www.sap.com" target="_blank">Fourth level</UDExBreadcrumbsItem>
|
|
27
|
+
<UDExBreadcrumbsItem href="htttps://www.sap.com" target="_blank">Fifth level</UDExBreadcrumbsItem>
|
|
28
|
+
</UDExBreadcrumbs>
|
|
29
|
+
<h1>{primaryContentHeader}</h1>
|
|
30
|
+
<p>{contentText}</p>
|
|
31
|
+
<div>
|
|
32
|
+
<UDExButton design={UDExButtonDesign.Positive}>Request a demo</UDExButton>
|
|
33
|
+
<UDExButton design={UDExButtonDesign.Transparent}>Watch the video</UDExButton>
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
<div slot="mediaContent">
|
|
37
|
+
<img src={mediaContentImage} alt="SAP support portal"/>
|
|
38
|
+
</div>
|
|
39
|
+
</UDExHeroBanner>
|
|
40
|
+
</>
|
|
41
|
+
|
|
42
|
+
const heroBannerWithGradient = <>
|
|
43
|
+
<UDExHeroBanner
|
|
44
|
+
id="heroBannerWithGradient"
|
|
45
|
+
backgroundImage={backgroundImageSrc}
|
|
46
|
+
backgroundImageLabel={backgroundVideoLabel}
|
|
47
|
+
backgroundGradient={linearGradient}>
|
|
48
|
+
<div slot="content">
|
|
49
|
+
<h1>{primaryContentHeader}</h1>
|
|
50
|
+
<p>{contentText}</p>
|
|
51
|
+
</div>
|
|
52
|
+
</UDExHeroBanner>
|
|
53
|
+
</>
|
|
54
|
+
|
|
55
|
+
const heroBannerWithAdditionalContent = <>
|
|
56
|
+
<UDExHeroBanner id="heroBannerWithAdditionalContent">
|
|
57
|
+
<div slot="content">
|
|
58
|
+
<h1>{primaryContentHeader}</h1>
|
|
59
|
+
<p>{contentText}</p>
|
|
60
|
+
<div>
|
|
61
|
+
<UDExButton design={UDExButtonDesign.Positive}>Request a demo</UDExButton>
|
|
62
|
+
<UDExButton design={UDExButtonDesign.Transparent}>Watch the video</UDExButton>
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
|
|
66
|
+
<div slot="additionalContent">
|
|
67
|
+
<h1>{secondaryContentHeader}</h1>
|
|
68
|
+
<p>{contentText}</p>
|
|
69
|
+
</div>
|
|
70
|
+
</UDExHeroBanner>
|
|
71
|
+
</>
|
|
72
|
+
|
|
73
|
+
const heroBannerWithVideoBackground = <>
|
|
74
|
+
<UDExHeroBanner
|
|
75
|
+
id="heroBannerVideoBackground"
|
|
76
|
+
backgroundVideo={backgroundVideoSrc}
|
|
77
|
+
backgroundVideoLabel={backgroundVideoLabel}>
|
|
78
|
+
<div slot="content">
|
|
79
|
+
<h1>{primaryContentHeader}</h1>
|
|
80
|
+
<p>{contentText}</p>
|
|
81
|
+
<div>
|
|
82
|
+
<UDExButton design={UDExButtonDesign.Positive}>Request a demo</UDExButton>
|
|
83
|
+
<UDExButton design={UDExButtonDesign.Transparent}>Watch the video</UDExButton>
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
</UDExHeroBanner>
|
|
87
|
+
</>
|
|
88
|
+
|
|
89
|
+
describe("Hero Banner component", () => {
|
|
90
|
+
describe("Hero Banner default", async () => {
|
|
91
|
+
beforeEach(() => {
|
|
92
|
+
cy.mount(heroBanner);
|
|
93
|
+
cy.get("#heroBannerDefault").shadow().as("heroBannerDefault");
|
|
94
|
+
});
|
|
95
|
+
|
|
96
|
+
it("tests if web component is correctly rendered", () => {
|
|
97
|
+
cy.get("@heroBannerDefault").find(".udex-hero-banner").should("be.visible");
|
|
98
|
+
});
|
|
99
|
+
|
|
100
|
+
it("tests if component renders primary content", () => {
|
|
101
|
+
cy.get("#heroBannerDefault").find("div[slot=content] h1").should("have.text", primaryContentHeader);
|
|
102
|
+
cy.get("#heroBannerDefault").find("div[slot=content]").find("h1, p, udex-button").should("have.length", 4);
|
|
103
|
+
});
|
|
104
|
+
|
|
105
|
+
it("tests if component renders background image", () => {
|
|
106
|
+
cy.get("@heroBannerDefault").find("img.udex-hero-banner__background-image").should("be.visible");
|
|
107
|
+
});
|
|
108
|
+
|
|
109
|
+
it("tests if correct background image is used", () => {
|
|
110
|
+
cy.get("@heroBannerDefault").find(".udex-hero-banner__background-image").should("have.attr", "src", backgroundImageSrc);
|
|
111
|
+
});
|
|
112
|
+
|
|
113
|
+
it("tests if correct background image label is applied", () => {
|
|
114
|
+
cy.get("@heroBannerDefault").find(".udex-hero-banner__background-image").should("have.attr", "alt", backgroundImageLabel);
|
|
115
|
+
});
|
|
116
|
+
|
|
117
|
+
it("tests if correct background color is applied", () => {
|
|
118
|
+
cy.get("@heroBannerDefault").find(".udex-hero-banner").should("have.attr", "style", `background-color: ${backgroundColor}; `);
|
|
119
|
+
});
|
|
120
|
+
|
|
121
|
+
it("tests if correct breadcrumbs is applied", () => {
|
|
122
|
+
cy.get("#heroBannerDefault").find("udex-breadcrumbs").find("udex-breadcrumbs-item").should("have.length", 5);
|
|
123
|
+
});
|
|
124
|
+
|
|
125
|
+
it("tests if component renders media content", () => {
|
|
126
|
+
cy.get("#heroBannerDefault").find("div[slot=mediaContent] img").should("have.attr", "src", mediaContentImage);
|
|
127
|
+
});
|
|
128
|
+
});
|
|
129
|
+
|
|
130
|
+
describe("Hero Banner with background video", () => {
|
|
131
|
+
beforeEach(() => {
|
|
132
|
+
cy.viewport(1920, 1080);
|
|
133
|
+
cy.mount(heroBannerWithVideoBackground);
|
|
134
|
+
cy.get("#heroBannerVideoBackground").shadow().as("videoBackground");
|
|
135
|
+
});
|
|
136
|
+
|
|
137
|
+
it("tests if component renders background video", () => {
|
|
138
|
+
cy.get("@videoBackground").find("video.udex-hero-banner__background-video").should("be.visible");
|
|
139
|
+
});
|
|
140
|
+
|
|
141
|
+
it("tests if correct background video is used", () => {
|
|
142
|
+
cy.get("@videoBackground").find("video.udex-hero-banner__background-video source").should("have.attr", "src", backgroundVideoSrc);
|
|
143
|
+
});
|
|
144
|
+
|
|
145
|
+
it("tests if correct background video label is applied", () => {
|
|
146
|
+
cy.get("@videoBackground").find("video.udex-hero-banner__background-video").should("have.attr", "alt", backgroundVideoLabel);
|
|
147
|
+
});
|
|
148
|
+
});
|
|
149
|
+
|
|
150
|
+
describe("Hero Banner with gradient", () => {
|
|
151
|
+
it("tests if correct gradient background is applied", () => {
|
|
152
|
+
cy.mount(heroBannerWithGradient);
|
|
153
|
+
cy.get("#heroBannerWithGradient").shadow().find(".udex-hero-banner").should("have.attr", "style", `background-color: transparent; background-image:${linearGradient}`);
|
|
154
|
+
});
|
|
155
|
+
});
|
|
156
|
+
|
|
157
|
+
describe("Hero Banner with additional content", () => {
|
|
158
|
+
beforeEach(() => {
|
|
159
|
+
cy.mount(heroBannerWithAdditionalContent);
|
|
160
|
+
});
|
|
161
|
+
|
|
162
|
+
it("tests if component renders secondary content", () => {
|
|
163
|
+
cy.get("#heroBannerWithAdditionalContent").find("div[slot=additionalContent] h1").should("have.text", secondaryContentHeader);
|
|
164
|
+
});
|
|
165
|
+
|
|
166
|
+
it("tests if defaults for properties are correctly applied", () => {
|
|
167
|
+
cy.get("#heroBannerWithAdditionalContent").shadow().find(".udex-hero-banner").should("have.attr", "style", "background-color: transparent; ");
|
|
168
|
+
|
|
169
|
+
cy.get("#heroBannerWithAdditionalContent").shadow().find(".udex-hero-banner__background-image").should("not.exist");
|
|
170
|
+
|
|
171
|
+
cy.get("#heroBannerWithAdditionalContent").shadow().find(".udex-hero-banner__background-video-wrapper").should("not.exist");
|
|
172
|
+
});
|
|
173
|
+
});
|
|
174
|
+
});
|
|
@@ -311,6 +311,23 @@ describe("SelectBox", () => {
|
|
|
311
311
|
.should("have.value", "");
|
|
312
312
|
});
|
|
313
313
|
|
|
314
|
+
it('test if close dropdown using close method', () => {
|
|
315
|
+
cy.mount(fullComponent);
|
|
316
|
+
cy.get("#select-box").shadow()
|
|
317
|
+
.find(".udex-text-field__trigger")
|
|
318
|
+
.click();
|
|
319
|
+
|
|
320
|
+
cy.get("#select-box")
|
|
321
|
+
.then($el => {
|
|
322
|
+
const select = $el as any;
|
|
323
|
+
select[0].close();
|
|
324
|
+
})
|
|
325
|
+
|
|
326
|
+
cy.get("#select-box").shadow()
|
|
327
|
+
.find(".udex-select-box__dropdown")
|
|
328
|
+
.should("not.have.attr","open");
|
|
329
|
+
});
|
|
330
|
+
|
|
314
331
|
it('should show empty msg if the search does not produce results', () => {
|
|
315
332
|
cy.mount(fullComponent);
|
|
316
333
|
cy.get("#select-box").shadow()
|
|
@@ -5,6 +5,7 @@ const target = "_self";
|
|
|
5
5
|
const accessibleName = "Test Social Media Button";
|
|
6
6
|
const defaultSMB = <UDExSocialMediaButton url={url}></UDExSocialMediaButton>
|
|
7
7
|
const customSMB = <UDExSocialMediaButton type="facebook" url={url} target={target} accessible-name={accessibleName}></UDExSocialMediaButton>
|
|
8
|
+
const customImageSMB = <UDExSocialMediaButton url={url}><div class="custom-img"><svg></svg></div></UDExSocialMediaButton>
|
|
8
9
|
|
|
9
10
|
describe("SocialMediaButton", () => {
|
|
10
11
|
it("renders default social media button", () => {
|
|
@@ -41,4 +42,9 @@ describe("SocialMediaButton", () => {
|
|
|
41
42
|
cy.mount(customSMB)
|
|
42
43
|
cy.get("[udex-social-media-button]").shadow().find(".udex-social-media-button").should("have.class", "udex-social-media-button-facebook")
|
|
43
44
|
});
|
|
45
|
+
|
|
46
|
+
it("renders social media button with custom image", () => {
|
|
47
|
+
cy.mount(customImageSMB)
|
|
48
|
+
cy.get("[udex-social-media-button]").find(".custom-img").should("be.visible")
|
|
49
|
+
});
|
|
44
50
|
});
|
|
@@ -56,6 +56,7 @@ import UDExPromoTile from "../../instrumented/PromoTile.js";
|
|
|
56
56
|
import UDExQuote from "../../instrumented/Quote.js";
|
|
57
57
|
import UDExMastheadProfileMenu from "../../instrumented/MastheadProfileMenu.js";
|
|
58
58
|
import UDExMessageStrip from "../../instrumented/MessageStrip.js";
|
|
59
|
+
import UDExHeroBanner from "../../instrumented/HeroBanner.js";
|
|
59
60
|
|
|
60
61
|
export {
|
|
61
62
|
UDExAccordion,
|
|
@@ -116,4 +117,5 @@ export {
|
|
|
116
117
|
UDExQuote,
|
|
117
118
|
UDExMastheadProfileMenu,
|
|
118
119
|
UDExMessageStrip,
|
|
120
|
+
UDExHeroBanner,
|
|
119
121
|
};
|
|
@@ -56,6 +56,7 @@ import UDExPromoTile from "../../src/PromoTile.js";
|
|
|
56
56
|
import UDExQuote from "../../src/Quote.js";
|
|
57
57
|
import UDExMastheadProfileMenu from "../../src/MastheadProfileMenu.js";
|
|
58
58
|
import UDExMessageStrip from "../../src/MessageStrip.js";
|
|
59
|
+
import UDExHeroBanner from "../../src/HeroBanner.js";
|
|
59
60
|
|
|
60
61
|
export {
|
|
61
62
|
UDExAccordion,
|
|
@@ -116,4 +117,5 @@ export {
|
|
|
116
117
|
UDExQuote,
|
|
117
118
|
UDExMastheadProfileMenu,
|
|
118
119
|
UDExMessageStrip,
|
|
120
|
+
UDExHeroBanner,
|
|
119
121
|
};
|
package/dist/Accordion.d.ts
CHANGED
|
@@ -2,9 +2,6 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
|
|
|
2
2
|
import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
|
|
3
3
|
import "@ui5/webcomponents-icons/dist/feeder-arrow.js";
|
|
4
4
|
import type UDExAccordionItem from "./AccordionItem.js";
|
|
5
|
-
type UDExAccordionToggleItemsEventDetail = {
|
|
6
|
-
isOpen: boolean;
|
|
7
|
-
};
|
|
8
5
|
export declare enum UDExAccordionHeadlineLevel {
|
|
9
6
|
H1 = "H1",
|
|
10
7
|
H2 = "H2",
|
|
@@ -13,6 +10,9 @@ export declare enum UDExAccordionHeadlineLevel {
|
|
|
13
10
|
H5 = "H5",
|
|
14
11
|
H6 = "H6"
|
|
15
12
|
}
|
|
13
|
+
type UDExAccordionToggleItemsEventDetail = {
|
|
14
|
+
isOpen: boolean;
|
|
15
|
+
};
|
|
16
16
|
/**
|
|
17
17
|
* @class
|
|
18
18
|
*
|
|
@@ -92,3 +92,4 @@ declare class UDExAccordion extends UI5Element {
|
|
|
92
92
|
}[];
|
|
93
93
|
}
|
|
94
94
|
export default UDExAccordion;
|
|
95
|
+
export type { UDExAccordionToggleItemsEventDetail };
|
package/dist/Accordion.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../src/Accordion.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,IAAI,MAAM,iDAAiD,CAAC;AAEnE,OAAO,WAAW,MAAM,iDAAiD,CAAC;AAC1E,OAAO,+CAA+C,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AAEvD,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAE7E,SAAS;AACT,OAAO,YAAY,MAAM,qCAAqC,CAAC;
|
|
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 { isEnter, isSpace } 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 (e.key !== \"Tab\") {\n e.preventDefault();\n }\n const len = this._items.length;\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 switch (e.key) {\n case \"Home\":\n focusOnItem(0);\n break;\n case \"End\":\n focusOnItem(len - 1);\n break;\n case \"ArrowUp\":\n if (this._activeItemIndex > 0) {\n focusOnItem(this._activeItemIndex - 1);\n } else if (this._activeItemIndex === 0) {\n focusOnItem(len - 1);\n }\n break;\n case \"ArrowDown\":\n if (this._activeItemIndex < len - 1) {\n focusOnItem(this._activeItemIndex + 1);\n } else if (this._activeItemIndex === len - 1) {\n focusOnItem(0);\n }\n break;\n default:\n break;\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 +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;
|
|
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 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 constructor() {\n super();\n }\n\n onAfterRendering() {\n this.handleDirection();\n this.setContentHeight();\n }\n\n onEnterDOM(): void {\n if (isDesktop()) {\n this.setAttribute(\"desktop\", \"\");\n }\n }\n\n setContentHeight() {\n this.style.setProperty(\"--udex-accordion-item-content-max-height\", `${this.shadowRoot?.querySelector(\".udex-accordion-item__content\")?.scrollHeight}px`);\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/Breadcrumbs.d.ts
CHANGED
|
@@ -7,7 +7,7 @@ import "@ui5/webcomponents-icons/dist/home.js";
|
|
|
7
7
|
import UDExBreadcrumbsItem from "./BreadcrumbsItem.js";
|
|
8
8
|
import UDExDropdown from "./Dropdown.js";
|
|
9
9
|
import UDExLink from "./Link.js";
|
|
10
|
-
|
|
10
|
+
type UDExBreadcrumbsItemClickEventDetail = {
|
|
11
11
|
item: UDExBreadcrumbsItem;
|
|
12
12
|
altKey?: boolean;
|
|
13
13
|
ctrlKey?: boolean;
|
|
@@ -99,3 +99,4 @@ declare class UDExBreadcrumbs extends UI5Element {
|
|
|
99
99
|
get _dropdownArrowAccessibleNameText(): string;
|
|
100
100
|
}
|
|
101
101
|
export default UDExBreadcrumbs;
|
|
102
|
+
export type { UDExBreadcrumbsItemClickEventDetail };
|
package/dist/Breadcrumbs.js
CHANGED
|
@@ -11,7 +11,7 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
|
|
|
11
11
|
import property from "@ui5/webcomponents-base/dist/decorators/property.js";
|
|
12
12
|
import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
|
|
13
13
|
import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
|
|
14
|
-
import { isTabNext, isTabPrevious, isEscape
|
|
14
|
+
import { isTabNext, isTabPrevious, isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
|
|
15
15
|
import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
|
|
16
16
|
import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
|
|
17
17
|
import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
|
|
@@ -23,7 +23,7 @@ import BreadcrumbsTemplate from "./generated/templates/BreadcrumbsTemplate.lit.j
|
|
|
23
23
|
import UDExBreadcrumbsItem from "./BreadcrumbsItem.js";
|
|
24
24
|
import UDExDropdown from "./Dropdown.js";
|
|
25
25
|
import UDExLink from "./Link.js";
|
|
26
|
-
import { BREADCRUMBS_ARIA_LABEL, BREADCRUMBS_OVERFLOW_ARIA_LABEL
|
|
26
|
+
import { BREADCRUMBS_ARIA_LABEL, BREADCRUMBS_OVERFLOW_ARIA_LABEL } from "./generated/i18n/i18n-defaults.js";
|
|
27
27
|
// Styles
|
|
28
28
|
import BreadcrumbsCss from "./generated/themes/Breadcrumbs.css.js";
|
|
29
29
|
import BreadcrumbsPopoverCss from "./generated/themes/BreadcrumbsPopover.css.js";
|
package/dist/Breadcrumbs.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Breadcrumbs.js","sourceRoot":"","sources":["../src/Breadcrumbs.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.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 {\n isTabNext,\n isTabPrevious,\n isEscape,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport UI5Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport type { LinkClickEventDetail } from \"@ui5/webcomponents/dist/Link.js\";\nimport NavigationMode from \"@ui5/webcomponents-base/dist/types/NavigationMode.js\";\nimport ItemNavigation from \"@ui5/webcomponents-base/dist/delegate/ItemNavigation.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport UI5BreadcrumbsCss from \"@ui5/webcomponents/dist/generated/themes/Breadcrumbs.css.js\";\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-down.js\";\nimport \"@ui5/webcomponents-icons/dist/home.js\";\nimport BreadcrumbsTemplate from \"./generated/templates/BreadcrumbsTemplate.lit.js\";\nimport UDExBreadcrumbsItem from \"./BreadcrumbsItem.js\";\nimport UDExDropdown from \"./Dropdown.js\";\nimport UDExLink from \"./Link.js\";\nimport {\n BREADCRUMBS_ARIA_LABEL,\n BREADCRUMBS_OVERFLOW_ARIA_LABEL,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport BreadcrumbsCss from \"./generated/themes/Breadcrumbs.css.js\";\nimport BreadcrumbsPopoverCss from \"./generated/themes/BreadcrumbsPopover.css.js\";\n\nconst triggerActiveClass = \"udex-breadcrumbs__trigger--opened\";\n\nexport type UDExBreadcrumbsItemClickEventDetail = {\n item: UDExBreadcrumbsItem;\n altKey?: boolean;\n ctrlKey?: boolean;\n metaKey?: boolean;\n shiftKey?: 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-breadcrumbs</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Breadcrumbs.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n tag: \"udex-breadcrumbs\",\n renderer: litRender,\n styles: [UI5BreadcrumbsCss, BreadcrumbsCss, BreadcrumbsPopoverCss],\n template: BreadcrumbsTemplate,\n dependencies: [UDExBreadcrumbsItem, UDExLink, UDExDropdown, UI5Icon],\n})\n/**\n * @public\n */\n@event(\"item-click\", { cancelable: true, bubbles: true })\n\n/**\n * Fired after the dropdown is opened.\n *\n * @public\n */\n@event(\"open\", { bubbles: true })\n\n/**\n * Fired after the dropdown is closed.\n *\n * @public\n */\n@event(\"close\", { bubbles: true })\n\nclass UDExBreadcrumbs extends UI5Element {\n eventDetails!: {\n \"item-click\": UDExBreadcrumbsItemClickEventDetail,\n \"open\": void,\n \"close\": void,\n };\n /**\n * Defines how many breadcrumb items should be visible\n *\n * @default 3\n * @public\n */\n @property({ type: Number })\n showItems: number = 3;\n\n /**\n * Indicates if dropdown is opened\n *\n * @default false\n * @private\n */\n @property({ noAttribute: true, type: Boolean })\n _dropdownOpened!: boolean;\n\n /**\n * Defines the component items.\n *\n * **Note:** Use the `udex-breadcrumbs-item` component to define the desired items.\n * @public\n */\n @slot({ type: HTMLElement, invalidateOnChildChange: true, \"default\": true })\n items!: Array<UDExBreadcrumbsItem>;\n\n @i18n(\"@sapudex/web-components\")\n static i18nBundle: I18nBundle;\n\n _responsivePopover?: UDExDropdown;\n _itemNavigation?: ItemNavigation;\n _shouldFocusFirstVisibleItem!: boolean;\n\n onBeforeRendering(): void {\n this._preprocessItems();\n }\n\n onAfterRendering(): void {\n this._responsivePopover = this._getResponsePopover();\n this._initItemNavigation();\n this._dropdownArrowLink.forcedTabIndex = \"0\";\n this._handleOutsideClick();\n\n if (this._shouldFocusFirstVisibleItem) {\n this._getFocusableItems()[1].focus();\n this._shouldFocusFirstVisibleItem = false;\n }\n }\n\n _preprocessItems(): void {\n this.items.forEach(item => {\n item._getRealDomRef = () => this.getDomRef()!.querySelector(`[data-ui5-stable*=${item.stableDomRef}]`)!;\n });\n }\n\n _getResponsePopover(): UDExDropdown {\n return this.shadowRoot!.querySelector<UDExDropdown>(`#udex-${this.__id!}-breadcrumbs__popover`)!;\n }\n\n _getFocusableItems(): Array<UDExLink> {\n const items = this._links;\n items.unshift(this._dropdownArrowLink);\n\n return items;\n }\n\n _initItemNavigation(): void {\n if (!this._itemNavigation) {\n this._itemNavigation = new ItemNavigation(this, {\n navigationMode: NavigationMode.Horizontal,\n getItemsCallback: () => this._getFocusableItems(),\n });\n }\n }\n\n _getItems(): Array<UDExBreadcrumbsItem> {\n return this.getSlottedNodes<UDExBreadcrumbsItem>(\"items\");\n }\n\n _onDropdownLinkPress(e: CustomEvent<LinkClickEventDetail>): void {\n const listItem = e.target as HTMLElement,\n items = this._getItems(),\n item = items.find(x => `${x._id}-li` === listItem.id)!;\n\n if (item._isCurrentPageItem) {\n return;\n }\n\n if (this.fireDecoratorEvent(\"item-click\", { item })) {\n window.open(item.href, item.target || \"_self\", \"noopener,noreferrer\");\n this._toggleDropdown();\n }\n\n this.setDropdownCloseState();\n }\n\n _onLinkPress(e: CustomEvent<LinkClickEventDetail>): void {\n const link = e.target as UDExLink,\n items = this._getItems(),\n item = items.find(x => `${x._id}-link` === link.id)!,\n {\n altKey,\n ctrlKey,\n metaKey,\n shiftKey,\n } = e.detail;\n\n if (!this.fireDecoratorEvent(\"item-click\", {\n item,\n altKey,\n ctrlKey,\n metaKey,\n shiftKey,\n })) {\n e.preventDefault();\n }\n\n this.setDropdownCloseState();\n }\n\n _isItemVisible(item: UDExBreadcrumbsItem): boolean {\n return !item.hidden;\n }\n\n _afterDropdownOpen(): void {\n this._dropdownOpened = true;\n this.fireDecoratorEvent(\"open\");\n }\n\n _afterDropdownClose(): void {\n this._dropdownOpened = false;\n this.fireDecoratorEvent(\"close\");\n }\n\n _toggleDropdown(): void {\n if (this._responsivePopover) {\n this._responsivePopover.open = !this._responsivePopover.open;\n this._dropdownOpened = !this._dropdownOpened;\n }\n }\n\n _onfocusin(e: FocusEvent): void {\n const currentItem = e.target as UDExLink;\n\n this._itemNavigation?.setCurrentItem(currentItem);\n }\n\n _handleKeydown(e: KeyboardEvent): void {\n const itemIndex = (e.target as HTMLElement).getAttribute(\"index\");\n const isLastItem = itemIndex === (this.items.length - 2).toString();\n const isFirstItem = itemIndex === \"0\";\n\n if (isTabNext(e) && isLastItem) {\n this._shouldFocusFirstVisibleItem = true;\n this._toggleDropdown();\n return;\n }\n\n if ((isTabNext(e) && isLastItem) || (isTabPrevious(e) && isFirstItem) || isEscape(e)) {\n this._toggleDropdown();\n }\n }\n\n _handleOutsideClick(): void {\n document.addEventListener(\"mousedown\", (e: Event) => {\n if (e.target !== this) {\n this.setDropdownCloseState();\n }\n });\n }\n\n setDropdownCloseState(): void {\n if (this._responsivePopover) {\n this._dropdownOpened = false;\n }\n }\n\n /**\n * Getter for the interactive element that opens the overflow\n * @private\n */\n get _dropdownArrowLink(): UDExLink {\n return this.shadowRoot!.querySelector<UDExLink>(\".udex-breadcrumbs__trigger\")!;\n }\n\n /**\n * Getter for the list of links corresponding to the abstract breadcrumb items\n */\n get _links(): Array<UDExLink> {\n return Array.from(this.shadowRoot!.querySelectorAll<UDExLink>(\".udex-breadcrumbs__link-wrapper [udex-link]\"));\n }\n\n /**\n * Getter for the list of abstract breadcrumb items to be rendered as links outside the overflow\n */\n get _linksData(): Array<UDExBreadcrumbsItem> {\n const items = this._visibleItems;\n const itemsCount = items.length;\n\n return items\n .map((item, index) => {\n item._isCurrentPageItem = index === (itemsCount - 1);\n return item;\n });\n }\n\n get _visibleItems(): Array<UDExBreadcrumbsItem> {\n const items = this._getItems();\n const itemsLength = this.showItems ?? 0;\n\n return this._getItems()\n .slice(Math.max(items.length - itemsLength - 1, 0))\n .filter(i => this._isItemVisible(i));\n }\n\n get _dropdownItems(): Array<UDExBreadcrumbsItem> {\n return this._getItems().filter(i => this._isItemVisible(i));\n }\n\n get _triggerClass(): string {\n return this._dropdownOpened ? triggerActiveClass : \"\";\n }\n\n get _accessibleNameText(): string {\n return UDExBreadcrumbs.i18nBundle.getText(BREADCRUMBS_ARIA_LABEL);\n }\n\n get _dropdownArrowAccessibleNameText(): string {\n return UDExBreadcrumbs.i18nBundle.getText(BREADCRUMBS_OVERFLOW_ARIA_LABEL);\n }\n}\n\nUDExBreadcrumbs.define();\n\nexport default UDExBreadcrumbs;\n"]}
|
|
1
|
+
{"version":3,"file":"Breadcrumbs.js","sourceRoot":"","sources":["../src/Breadcrumbs.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport { isTabNext, isTabPrevious, isEscape } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport UI5Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport type { LinkClickEventDetail } from \"@ui5/webcomponents/dist/Link.js\";\nimport NavigationMode from \"@ui5/webcomponents-base/dist/types/NavigationMode.js\";\nimport ItemNavigation from \"@ui5/webcomponents-base/dist/delegate/ItemNavigation.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport UI5BreadcrumbsCss from \"@ui5/webcomponents/dist/generated/themes/Breadcrumbs.css.js\";\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-down.js\";\nimport \"@ui5/webcomponents-icons/dist/home.js\";\nimport BreadcrumbsTemplate from \"./generated/templates/BreadcrumbsTemplate.lit.js\";\nimport UDExBreadcrumbsItem from \"./BreadcrumbsItem.js\";\nimport UDExDropdown from \"./Dropdown.js\";\nimport UDExLink from \"./Link.js\";\nimport { BREADCRUMBS_ARIA_LABEL, BREADCRUMBS_OVERFLOW_ARIA_LABEL } from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport BreadcrumbsCss from \"./generated/themes/Breadcrumbs.css.js\";\nimport BreadcrumbsPopoverCss from \"./generated/themes/BreadcrumbsPopover.css.js\";\n\nconst triggerActiveClass = \"udex-breadcrumbs__trigger--opened\";\n\ntype UDExBreadcrumbsItemClickEventDetail = {\n item: UDExBreadcrumbsItem;\n altKey?: boolean;\n ctrlKey?: boolean;\n metaKey?: boolean;\n shiftKey?: 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-breadcrumbs</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Breadcrumbs.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n tag: \"udex-breadcrumbs\",\n renderer: litRender,\n styles: [UI5BreadcrumbsCss, BreadcrumbsCss, BreadcrumbsPopoverCss],\n template: BreadcrumbsTemplate,\n dependencies: [UDExBreadcrumbsItem, UDExLink, UDExDropdown, UI5Icon],\n})\n/**\n * @public\n */\n@event(\"item-click\", { cancelable: true, bubbles: true })\n\n/**\n * Fired after the dropdown is opened.\n *\n * @public\n */\n@event(\"open\", { bubbles: true })\n\n/**\n * Fired after the dropdown is closed.\n *\n * @public\n */\n@event(\"close\", { bubbles: true })\n\nclass UDExBreadcrumbs extends UI5Element {\n eventDetails!: {\n \"item-click\": UDExBreadcrumbsItemClickEventDetail,\n \"open\": void,\n \"close\": void,\n };\n /**\n * Defines how many breadcrumb items should be visible\n *\n * @default 3\n * @public\n */\n @property({ type: Number })\n showItems: number = 3;\n\n /**\n * Indicates if dropdown is opened\n *\n * @default false\n * @private\n */\n @property({ noAttribute: true, type: Boolean })\n _dropdownOpened!: boolean;\n\n /**\n * Defines the component items.\n *\n * **Note:** Use the `udex-breadcrumbs-item` component to define the desired items.\n * @public\n */\n @slot({ type: HTMLElement, invalidateOnChildChange: true, \"default\": true })\n items!: Array<UDExBreadcrumbsItem>;\n\n @i18n(\"@sapudex/web-components\")\n static i18nBundle: I18nBundle;\n\n _responsivePopover?: UDExDropdown;\n _itemNavigation?: ItemNavigation;\n _shouldFocusFirstVisibleItem!: boolean;\n\n onBeforeRendering(): void {\n this._preprocessItems();\n }\n\n onAfterRendering(): void {\n this._responsivePopover = this._getResponsePopover();\n this._initItemNavigation();\n this._dropdownArrowLink.forcedTabIndex = \"0\";\n this._handleOutsideClick();\n\n if (this._shouldFocusFirstVisibleItem) {\n this._getFocusableItems()[1].focus();\n this._shouldFocusFirstVisibleItem = false;\n }\n }\n\n _preprocessItems(): void {\n this.items.forEach(item => {\n item._getRealDomRef = () => this.getDomRef()!.querySelector(`[data-ui5-stable*=${item.stableDomRef}]`)!;\n });\n }\n\n _getResponsePopover(): UDExDropdown {\n return this.shadowRoot!.querySelector<UDExDropdown>(`#udex-${this.__id!}-breadcrumbs__popover`)!;\n }\n\n _getFocusableItems(): Array<UDExLink> {\n const items = this._links;\n items.unshift(this._dropdownArrowLink);\n\n return items;\n }\n\n _initItemNavigation(): void {\n if (!this._itemNavigation) {\n this._itemNavigation = new ItemNavigation(this, {\n navigationMode: NavigationMode.Horizontal,\n getItemsCallback: () => this._getFocusableItems(),\n });\n }\n }\n\n _getItems(): Array<UDExBreadcrumbsItem> {\n return this.getSlottedNodes<UDExBreadcrumbsItem>(\"items\");\n }\n\n _onDropdownLinkPress(e: CustomEvent<LinkClickEventDetail>): void {\n const listItem = e.target as HTMLElement,\n items = this._getItems(),\n item = items.find(x => `${x._id}-li` === listItem.id)!;\n\n if (item._isCurrentPageItem) {\n return;\n }\n\n if (this.fireDecoratorEvent(\"item-click\", { item })) {\n window.open(item.href, item.target || \"_self\", \"noopener,noreferrer\");\n this._toggleDropdown();\n }\n\n this.setDropdownCloseState();\n }\n\n _onLinkPress(e: CustomEvent<LinkClickEventDetail>): void {\n const link = e.target as UDExLink,\n items = this._getItems(),\n item = items.find(x => `${x._id}-link` === link.id)!,\n {\n altKey,\n ctrlKey,\n metaKey,\n shiftKey,\n } = e.detail;\n\n if (!this.fireDecoratorEvent(\"item-click\", {\n item,\n altKey,\n ctrlKey,\n metaKey,\n shiftKey,\n })) {\n e.preventDefault();\n }\n\n this.setDropdownCloseState();\n }\n\n _isItemVisible(item: UDExBreadcrumbsItem): boolean {\n return !item.hidden;\n }\n\n _afterDropdownOpen(): void {\n this._dropdownOpened = true;\n this.fireDecoratorEvent(\"open\");\n }\n\n _afterDropdownClose(): void {\n this._dropdownOpened = false;\n this.fireDecoratorEvent(\"close\");\n }\n\n _toggleDropdown(): void {\n if (this._responsivePopover) {\n this._responsivePopover.open = !this._responsivePopover.open;\n this._dropdownOpened = !this._dropdownOpened;\n }\n }\n\n _onfocusin(e: FocusEvent): void {\n const currentItem = e.target as UDExLink;\n\n this._itemNavigation?.setCurrentItem(currentItem);\n }\n\n _handleKeydown(e: KeyboardEvent): void {\n const itemIndex = (e.target as HTMLElement).getAttribute(\"index\");\n const isLastItem = itemIndex === (this.items.length - 2).toString();\n const isFirstItem = itemIndex === \"0\";\n\n if (isTabNext(e) && isLastItem) {\n this._shouldFocusFirstVisibleItem = true;\n this._toggleDropdown();\n return;\n }\n\n if ((isTabNext(e) && isLastItem) || (isTabPrevious(e) && isFirstItem) || isEscape(e)) {\n this._toggleDropdown();\n }\n }\n\n _handleOutsideClick(): void {\n document.addEventListener(\"mousedown\", (e: Event) => {\n if (e.target !== this) {\n this.setDropdownCloseState();\n }\n });\n }\n\n setDropdownCloseState(): void {\n if (this._responsivePopover) {\n this._dropdownOpened = false;\n }\n }\n\n /**\n * Getter for the interactive element that opens the overflow\n * @private\n */\n get _dropdownArrowLink(): UDExLink {\n return this.shadowRoot!.querySelector<UDExLink>(\".udex-breadcrumbs__trigger\")!;\n }\n\n /**\n * Getter for the list of links corresponding to the abstract breadcrumb items\n */\n get _links(): Array<UDExLink> {\n return Array.from(this.shadowRoot!.querySelectorAll<UDExLink>(\".udex-breadcrumbs__link-wrapper [udex-link]\"));\n }\n\n /**\n * Getter for the list of abstract breadcrumb items to be rendered as links outside the overflow\n */\n get _linksData(): Array<UDExBreadcrumbsItem> {\n const items = this._visibleItems;\n const itemsCount = items.length;\n\n return items\n .map((item, index) => {\n item._isCurrentPageItem = index === (itemsCount - 1);\n return item;\n });\n }\n\n get _visibleItems(): Array<UDExBreadcrumbsItem> {\n const items = this._getItems();\n const itemsLength = this.showItems ?? 0;\n\n return this._getItems()\n .slice(Math.max(items.length - itemsLength - 1, 0))\n .filter(i => this._isItemVisible(i));\n }\n\n get _dropdownItems(): Array<UDExBreadcrumbsItem> {\n return this._getItems().filter(i => this._isItemVisible(i));\n }\n\n get _triggerClass(): string {\n return this._dropdownOpened ? triggerActiveClass : \"\";\n }\n\n get _accessibleNameText(): string {\n return UDExBreadcrumbs.i18nBundle.getText(BREADCRUMBS_ARIA_LABEL);\n }\n\n get _dropdownArrowAccessibleNameText(): string {\n return UDExBreadcrumbs.i18nBundle.getText(BREADCRUMBS_OVERFLOW_ARIA_LABEL);\n }\n}\n\nUDExBreadcrumbs.define();\n\nexport default UDExBreadcrumbs;\nexport type { UDExBreadcrumbsItemClickEventDetail };\n"]}
|
package/dist/Checkbox.js
CHANGED
|
@@ -13,9 +13,9 @@ import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
|
|
|
13
13
|
import { VALUE_STATE_ERROR, VALUE_STATE_SUCCESS } from "./generated/i18n/i18n-defaults.js";
|
|
14
14
|
import UDExCheckboxValueState from "./types/Checkbox.js";
|
|
15
15
|
import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
|
|
16
|
+
import WrappingType from "@ui5/webcomponents/dist/types/WrappingType.js";
|
|
16
17
|
// Styles
|
|
17
18
|
import CheckboxCss from "./generated/themes/Checkbox.css.js";
|
|
18
|
-
import WrappingType from "@ui5/webcomponents/dist/types/WrappingType.js";
|
|
19
19
|
const LABEL_TEXT_HEIGHT = 18.5;
|
|
20
20
|
/**
|
|
21
21
|
* @class
|
package/dist/Checkbox.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../src/Checkbox.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,QAAQ,MAAM,qCAAqC,CAAC;AAC3D,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AAE3F,OAAO,sBAAsB,MAAM,qBAAqB,CAAC;AAEzD,OAAO,aAAa,MAAM,wDAAwD,CAAC;
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../src/Checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport CheckBox from \"@ui5/webcomponents/dist/CheckBox.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport { VALUE_STATE_ERROR, VALUE_STATE_SUCCESS } from \"./generated/i18n/i18n-defaults.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport UDExCheckboxValueState from \"./types/Checkbox.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport WrappingType from \"@ui5/webcomponents/dist/types/WrappingType.js\";\nimport type Label from \"@ui5/webcomponents/dist/Label.js\";\n\n// Styles\nimport CheckboxCss from \"./generated/themes/Checkbox.css.js\";\n\nconst LABEL_TEXT_HEIGHT = 18.5;\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-checkbox</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Checkbox.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends CheckBox\n * @tagname udex-checkbox\n * @public\n */\n@customElement({\n tag: \"udex-checkbox\",\n renderer: jsxRenderer,\n styles: [CheckBox.styles, CheckboxCss],\n})\n\nclass UDExCheckbox extends CheckBox {\n /**\n * Defines the value state of the component.\n *\n * @default \"None\"\n * @public\n */\n @property()\n /** @ts-expect-error */\n valueState: `${UDExCheckboxValueState}` = UDExCheckboxValueState.None;\n\n /**\n * Defines whether the component text wraps when there is not enough space..\n *\n * @default \"None\"\n * @public\n */\n @property()\n wrappingType: `${WrappingType}` = WrappingType.None;\n\n @i18n(\"@sapudex/web-components\")\n static i18nBundle: I18nBundle;\n\n _handleResizeBound: ResizeObserverCallback;\n\n constructor() {\n super();\n this._handleResizeBound = this._handleResize.bind(this);\n }\n\n onEnterDOM(): void {\n ResizeHandler.register(this, this._handleResizeBound);\n }\n\n onAfterRendering() {\n this.shadowRoot?.querySelector(\".ui5-checkbox-label\")?.removeAttribute(\"required\");\n }\n\n onExitDOM(): void {\n ResizeHandler.deregister(this, this._handleResizeBound);\n }\n\n valueStateMappings(): Record<string, string> {\n return {\n [UDExCheckboxValueState.Error]: UDExCheckbox.i18nBundle.getText(VALUE_STATE_ERROR),\n [UDExCheckboxValueState.Success]: UDExCheckbox.i18nBundle.getText(VALUE_STATE_SUCCESS),\n };\n }\n\n _handleResize(): void {\n const labelOverflows = this.labelHeight > LABEL_TEXT_HEIGHT;\n\n if (labelOverflows && this.wrappingType === WrappingType.Normal) {\n this.label?.classList.add(\"udex-checkbox__label-multiline\");\n } else {\n this.label?.classList.remove(\"udex-checkbox__label-multiline\");\n }\n }\n\n get valueStateText(): string | undefined {\n if (this.valueState !== UDExCheckboxValueState.None) {\n return this.valueStateMappings()[this.valueState];\n }\n }\n\n get label(): Label | null {\n return this.shadowRoot!.querySelector<Label>(\"[ui5-label]\");\n }\n\n get labelHeight(): number {\n return this.label?.getBoundingClientRect().height || 0;\n }\n}\n\nUDExCheckbox.define();\n\nexport default UDExCheckbox;\n"]}
|
package/dist/ContactItem.d.ts
CHANGED
package/dist/ContactItem.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContactItem.js","sourceRoot":"","sources":["../src/ContactItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,IAAI,MAAM,4CAA4C,CAAC;AAC9D,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,KAAK,MAAM,yDAAyD,CAAC;AAC5E,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,mBAAmB,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,mBAAmB,MAAM,4BAA4B,CAAC;AAC7D,OAAO,0CAA0C,CAAC;AAClD,OAAO,+CAA+C,CAAC;AACvD,OAAO,wCAAwC,CAAC;AAEhD,SAAS;AACT,OAAO,cAAc,MAAM,uCAAuC,CAAC;AAOnE;;;;;;;;;;;;;;;;;GAiBG;AAkBH,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QA6BE;;;;WAIG;QAED,WAAM,GAAoB,UAAU,CAAC,KAAK,CAAC;IAuB/C,CAAC;IAZC,mBAAmB,CAAC,CAAQ;QAC1B,IAAI,CAAC,kBAAkB,CAAC,YAAY,EAAE;YACpC,IAAI,EAAE,IAAI;YACV,aAAa,EAAE,CAAC;SACjB,CAAC,CAAC;IACL,CAAC;IAED,IAAI,SAAS;QACX,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,OAAO,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,EAAE,CAAC;QACtD,CAAC;IACH,CAAC;CACF,CAAA;AA/CG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CACV;AAQf;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACX;AAQd;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACO;AAQhC;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACkB;AAS3C;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;gDACd;AA5CpB,eAAe;IAjBpB,aAAa,CAAC;QACb,GAAG,EAAE,mBAAmB;QACxB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,cAAc;QACtB,QAAQ,EAAE,mBAAmB;KAC9B,CAAC;IAEF;;;;OAIG;;IACF,KAAK,CAAC,YAAY,EAAE;QACnB,OAAO,EAAE,IAAI;QACb,UAAU,EAAE,IAAI;KACjB,CAAC;GAEI,eAAe,CA0DpB;AAED,eAAe,CAAC,MAAM,EAAE,CAAC;AAEzB,eAAe,eAAe,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport slot from \"@ui5/webcomponents-base/decorators/slot.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport ContactItemTemplate from \"./ContactItemTemplate.js\";\nimport { UDExTarget } from \"./types/common.js\";\nimport UDExContactItemIcon from \"./types/ContactItemIcon.js\";\nimport \"@ui5/webcomponents-icons/dist/headset.js\";\nimport \"@ui5/webcomponents-icons/dist/discussion-2.js\";\nimport \"@ui5/webcomponents-icons/dist/email.js\";\n\n// Styles\nimport ContactItemCss from \"./generated/themes/ContactItem.css.js\";\n\ntype UDExContactItemClickEventDetail = {\n originalEvent: Event,\n item: UDExContactItem,\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-contact-item</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/ContactItem.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @tagname udex-contact-item\n * @public\n */\n@customElement({\n tag: \"udex-contact-item\",\n renderer: jsxRenderer,\n styles: ContactItemCss,\n template: ContactItemTemplate,\n})\n\n/**\n * Fires when item is clicked\n *\n * @public\n */\n@event(\"item-click\", {\n bubbles: true,\n cancelable: true,\n})\n\nclass UDExContactItem extends UI5Element {\n eventDetails!: {\n \"item-click\": UDExContactItemClickEventDetail,\n };\n\n /**\n * Defines the label for the item.\n *\n * @public\n */\n @property({ type: String })\n label!: string;\n\n /**\n * Defines the href for the item.\n *\n * @public\n */\n @property({ type: String })\n href!: string;\n\n /**\n * Defines the icon name for the item.\n *\n * @public\n */\n @property({ type: String })\n icon?: `${UDExContactItemIcon}`;\n\n /**\n * Defines target for the item\n *\n * @public\n */\n @property({ type: String })\n target: `${UDExTarget}` = UDExTarget._self;\n\n /**\n * Slot for the item content.\n *\n * @slot\n * @public\n */\n @slot({ type: Node, \"default\": true })\n content!: Array<Node>;\n\n _fireItemClickEvent(e: Event): void {\n this.fireDecoratorEvent(\"item-click\", {\n item: this,\n originalEvent: e,\n });\n }\n\n get _iconName(): string | undefined {\n if (this.icon) {\n return UDExContactItemIcon[this.icon].toLowerCase();\n }\n }\n}\n\nUDExContactItem.define();\n\nexport default UDExContactItem;\n"]}
|
|
1
|
+
{"version":3,"file":"ContactItem.js","sourceRoot":"","sources":["../src/ContactItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,IAAI,MAAM,4CAA4C,CAAC;AAC9D,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,KAAK,MAAM,yDAAyD,CAAC;AAC5E,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,mBAAmB,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,mBAAmB,MAAM,4BAA4B,CAAC;AAC7D,OAAO,0CAA0C,CAAC;AAClD,OAAO,+CAA+C,CAAC;AACvD,OAAO,wCAAwC,CAAC;AAEhD,SAAS;AACT,OAAO,cAAc,MAAM,uCAAuC,CAAC;AAOnE;;;;;;;;;;;;;;;;;GAiBG;AAkBH,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QA6BE;;;;WAIG;QAED,WAAM,GAAoB,UAAU,CAAC,KAAK,CAAC;IAuB/C,CAAC;IAZC,mBAAmB,CAAC,CAAQ;QAC1B,IAAI,CAAC,kBAAkB,CAAC,YAAY,EAAE;YACpC,IAAI,EAAE,IAAI;YACV,aAAa,EAAE,CAAC;SACjB,CAAC,CAAC;IACL,CAAC;IAED,IAAI,SAAS;QACX,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,OAAO,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,EAAE,CAAC;QACtD,CAAC;IACH,CAAC;CACF,CAAA;AA/CG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CACV;AAQf;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACX;AAQd;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACO;AAQhC;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACkB;AAS3C;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;gDACd;AA5CpB,eAAe;IAjBpB,aAAa,CAAC;QACb,GAAG,EAAE,mBAAmB;QACxB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,cAAc;QACtB,QAAQ,EAAE,mBAAmB;KAC9B,CAAC;IAEF;;;;OAIG;;IACF,KAAK,CAAC,YAAY,EAAE;QACnB,OAAO,EAAE,IAAI;QACb,UAAU,EAAE,IAAI;KACjB,CAAC;GAEI,eAAe,CA0DpB;AAED,eAAe,CAAC,MAAM,EAAE,CAAC;AAEzB,eAAe,eAAe,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport slot from \"@ui5/webcomponents-base/decorators/slot.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport ContactItemTemplate from \"./ContactItemTemplate.js\";\nimport { UDExTarget } from \"./types/common.js\";\nimport UDExContactItemIcon from \"./types/ContactItemIcon.js\";\nimport \"@ui5/webcomponents-icons/dist/headset.js\";\nimport \"@ui5/webcomponents-icons/dist/discussion-2.js\";\nimport \"@ui5/webcomponents-icons/dist/email.js\";\n\n// Styles\nimport ContactItemCss from \"./generated/themes/ContactItem.css.js\";\n\ntype UDExContactItemClickEventDetail = {\n originalEvent: Event,\n item: UDExContactItem,\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-contact-item</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/ContactItem.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @tagname udex-contact-item\n * @public\n */\n@customElement({\n tag: \"udex-contact-item\",\n renderer: jsxRenderer,\n styles: ContactItemCss,\n template: ContactItemTemplate,\n})\n\n/**\n * Fires when item is clicked\n *\n * @public\n */\n@event(\"item-click\", {\n bubbles: true,\n cancelable: true,\n})\n\nclass UDExContactItem extends UI5Element {\n eventDetails!: {\n \"item-click\": UDExContactItemClickEventDetail,\n };\n\n /**\n * Defines the label for the item.\n *\n * @public\n */\n @property({ type: String })\n label!: string;\n\n /**\n * Defines the href for the item.\n *\n * @public\n */\n @property({ type: String })\n href!: string;\n\n /**\n * Defines the icon name for the item.\n *\n * @public\n */\n @property({ type: String })\n icon?: `${UDExContactItemIcon}`;\n\n /**\n * Defines target for the item\n *\n * @public\n */\n @property({ type: String })\n target: `${UDExTarget}` = UDExTarget._self;\n\n /**\n * Slot for the item content.\n *\n * @slot\n * @public\n */\n @slot({ type: Node, \"default\": true })\n content!: Array<Node>;\n\n _fireItemClickEvent(e: Event): void {\n this.fireDecoratorEvent(\"item-click\", {\n item: this,\n originalEvent: e,\n });\n }\n\n get _iconName(): string | undefined {\n if (this.icon) {\n return UDExContactItemIcon[this.icon].toLowerCase();\n }\n }\n}\n\nUDExContactItem.define();\n\nexport default UDExContactItem;\nexport type { UDExContactItemClickEventDetail };\n"]}
|