@sapudex/web-components 2.2.0 → 2.4.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/.eslintignore +3 -0
- package/bundle.esm.js +3 -0
- package/cypress/fixtures/contact-numbers.ts +10 -0
- package/cypress/fixtures/event-ribbon-links.ts +5 -0
- package/cypress/specs/Accordion.cy.tsx +25 -2
- package/cypress/specs/AccordionItem.cy.tsx +1 -1
- package/cypress/specs/Avatar.cy.tsx +1 -1
- package/cypress/specs/AvatarGroup.cy.tsx +1 -2
- package/cypress/specs/Badge.cy.tsx +1 -1
- package/cypress/specs/Contact.cy.tsx +92 -0
- package/cypress/specs/ContactItem.cy.tsx +56 -0
- package/cypress/specs/CountrySelector.cy.tsx +10 -4
- package/cypress/specs/EventRibbon.cy.tsx +110 -0
- package/cypress/specs/Footer.cy.tsx +1 -1
- package/cypress/specs/ListItem.cy.tsx +1 -1
- package/cypress/specs/PhoneNumberField.cy.tsx +4 -2
- package/cypress/specs/Review.cy.tsx +1 -3
- package/cypress/specs/ReviewItem.cy.tsx +1 -1
- package/cypress/specs/SecondaryNavigationDesktop.cy.tsx +123 -116
- package/cypress/specs/SecondaryNavigationMobile.cy.tsx +27 -38
- package/cypress/specs/SelectBox.cy.tsx +93 -88
- package/cypress/specs/Slider.cy.tsx +1 -1
- package/cypress/specs/StatusBadge.cy.tsx +1 -1
- package/cypress/specs/StatusMessage.cy.tsx +1 -1
- package/cypress/specs/Switch.cy.tsx +1 -2
- package/cypress/specs/Table.cy.tsx +1 -9
- package/cypress/specs/Tag.cy.tsx +1 -1
- package/cypress/specs/TagGroup.cy.tsx +1 -2
- package/cypress/specs/TextField.cy.tsx +1 -1
- package/cypress/specs/Textarea.cy.tsx +1 -1
- package/cypress/specs/Toast.cy.tsx +1 -1
- package/cypress/specs/Tooltip.cy.tsx +1 -2
- package/cypress/specs/TruncatedText.cy.tsx +2 -1
- package/cypress/specs/Upload.cy.tsx +1 -2
- package/cypress/specs/UploadItem.cy.tsx +1 -1
- package/cypress/specs/Wizard.cy.tsx +7 -4
- package/cypress/support/commands.ts +31 -2
- package/cypress/support/component-imports.instrumented.ts +95 -0
- package/cypress/support/component-imports.src.ts +95 -0
- package/cypress/support/component.ts +1 -1
- package/cypress.config.ts +6 -0
- package/dist/Accordion.d.ts +7 -1
- package/dist/Accordion.js +3 -3
- package/dist/Accordion.js.map +1 -1
- package/dist/Assets.js +31 -0
- package/dist/Assets.js.map +1 -1
- package/dist/AssetsVariables.js +4 -0
- package/dist/AssetsVariables.js.map +1 -1
- package/dist/Button.d.ts +7 -0
- package/dist/Button.js +3 -0
- package/dist/Button.js.map +1 -1
- package/dist/Contact.d.ts +102 -0
- package/dist/Contact.js +152 -0
- package/dist/Contact.js.map +1 -0
- package/dist/ContactItem.d.ts +67 -0
- package/dist/ContactItem.js +96 -0
- package/dist/ContactItem.js.map +1 -0
- package/dist/ContactItemTemplate.d.ts +2 -0
- package/dist/ContactItemTemplate.js +13 -0
- package/dist/ContactItemTemplate.js.map +1 -0
- package/dist/ContactTemplate.d.ts +4 -0
- package/dist/ContactTemplate.js +29 -0
- package/dist/ContactTemplate.js.map +1 -0
- package/dist/CountrySelector.d.ts +2 -4
- package/dist/CountrySelector.js +3 -5
- package/dist/CountrySelector.js.map +1 -1
- package/dist/DatePicker.js +2 -1
- package/dist/DatePicker.js.map +1 -1
- package/dist/EventRibbon.d.ts +80 -0
- package/dist/EventRibbon.js +111 -0
- package/dist/EventRibbon.js.map +1 -0
- package/dist/EventRibbonTemplate.d.ts +2 -0
- package/dist/EventRibbonTemplate.js +7 -0
- package/dist/EventRibbonTemplate.js.map +1 -0
- package/dist/Footer.d.ts +0 -1
- package/dist/Footer.js +7 -9
- package/dist/Footer.js.map +1 -1
- package/dist/HeroBanner.d.ts +1 -1
- package/dist/List.d.ts +1 -1
- package/dist/List.js +1 -1
- package/dist/List.js.map +1 -1
- package/dist/MastheadItem.d.ts +1 -3
- package/dist/MastheadItem.js +6 -11
- package/dist/MastheadItem.js.map +1 -1
- package/dist/MastheadMenu.d.ts +0 -1
- package/dist/MastheadMenu.js +2 -4
- package/dist/MastheadMenu.js.map +1 -1
- package/dist/MastheadProfileMenu.d.ts +0 -1
- package/dist/MastheadProfileMenu.js +2 -4
- package/dist/MastheadProfileMenu.js.map +1 -1
- package/dist/MastheadShell.d.ts +4 -1
- package/dist/MastheadShell.js +21 -5
- package/dist/MastheadShell.js.map +1 -1
- package/dist/Pagination.d.ts +17 -3
- package/dist/Pagination.js +33 -31
- package/dist/Pagination.js.map +1 -1
- package/dist/PhoneNumberField.d.ts +5 -5
- package/dist/PhoneNumberField.js +1 -1
- package/dist/PhoneNumberField.js.map +1 -1
- package/dist/SearchableListBase.d.ts +9 -0
- package/dist/SearchableListBase.js +15 -3
- package/dist/SearchableListBase.js.map +1 -1
- package/dist/SecondaryNavigation.d.ts +0 -1
- package/dist/SecondaryNavigation.js +2 -4
- package/dist/SecondaryNavigation.js.map +1 -1
- package/dist/TextField.d.ts +7 -0
- package/dist/TextField.js +3 -0
- package/dist/TextField.js.map +1 -1
- package/dist/Wizard.d.ts +20 -1
- package/dist/Wizard.js +22 -9
- package/dist/Wizard.js.map +1 -1
- package/dist/WizardTemplate.js +1 -1
- package/dist/WizardTemplate.js.map +1 -1
- package/dist/assets/{InputSuggestions-KGCQrV_T.js → InputSuggestions-CYW_6A8K.js} +1 -1
- package/dist/assets/{ListItemStandardExpandableTextTemplate-D4zLIdLd.js → ListItemStandardExpandableTextTemplate-BDrgWGjT.js} +1 -1
- package/dist/assets/{bundle.esm-Diw1zQ-o.js → bundle.esm-DRCvw6Ji.js} +235 -225
- package/dist/assets/messagebundle_en-BK8-Eyic.js +1 -0
- package/dist/css/themes/Accordion.css +1 -1
- package/dist/css/themes/Button.css +1 -1
- package/dist/css/themes/Contact.css +1 -0
- package/dist/css/themes/ContactItem.css +1 -0
- package/dist/css/themes/DatePickerPopover.css +1 -1
- package/dist/css/themes/EventRibbon.css +1 -0
- package/dist/css/themes/MastheadCountrySelector.css +1 -1
- package/dist/css/themes/MastheadItem.css +1 -1
- package/dist/css/themes/MastheadShell.css +1 -1
- package/dist/css/themes/Modal.css +1 -1
- package/dist/css/themes/Pagination.css +1 -1
- package/dist/css/themes/RatingIndicator.css +1 -1
- package/dist/css/themes/Slider.css +1 -1
- package/dist/css/themes/TextField.css +1 -1
- package/dist/custom-elements-internal.json +823 -99
- package/dist/custom-elements.json +783 -83
- package/dist/data/CountryListISO3166.d.ts +13 -4
- package/dist/data/CountryListISO3166.js +8 -0
- package/dist/data/CountryListISO3166.js.map +1 -1
- package/dist/generated/assets/i18n/messagebundle_en.json +1 -1
- package/dist/generated/i18n/i18n-defaults.d.ts +3 -1
- package/dist/generated/i18n/i18n-defaults.js +3 -1
- package/dist/generated/i18n/i18n-defaults.js.map +1 -1
- package/dist/generated/templates/AccordionTemplate.lit.js +4 -2
- package/dist/generated/templates/AccordionTemplate.lit.js.map +1 -1
- package/dist/generated/templates/MastheadItemTemplate.lit.js +25 -22
- package/dist/generated/templates/MastheadItemTemplate.lit.js.map +1 -1
- package/dist/generated/templates/PaginationTemplate.lit.js +1 -1
- package/dist/generated/templates/PaginationTemplate.lit.js.map +1 -1
- package/dist/generated/templates/PhoneNumberFieldTemplate.lit.js +2 -2
- package/dist/generated/templates/PhoneNumberFieldTemplate.lit.js.map +1 -1
- package/dist/generated/themes/Accordion.css.d.ts +1 -1
- package/dist/generated/themes/Accordion.css.js +1 -1
- package/dist/generated/themes/Accordion.css.js.map +1 -1
- package/dist/generated/themes/Button.css.d.ts +1 -1
- package/dist/generated/themes/Button.css.js +1 -1
- package/dist/generated/themes/Button.css.js.map +1 -1
- package/dist/generated/themes/Contact.css.d.ts +2 -0
- package/dist/generated/themes/Contact.css.js +8 -0
- package/dist/generated/themes/Contact.css.js.map +1 -0
- package/dist/generated/themes/ContactItem.css.d.ts +2 -0
- package/dist/generated/themes/ContactItem.css.js +8 -0
- package/dist/generated/themes/ContactItem.css.js.map +1 -0
- package/dist/generated/themes/DatePickerPopover.css.d.ts +1 -1
- package/dist/generated/themes/DatePickerPopover.css.js +1 -1
- package/dist/generated/themes/DatePickerPopover.css.js.map +1 -1
- package/dist/generated/themes/EventRibbon.css.d.ts +2 -0
- package/dist/generated/themes/EventRibbon.css.js +8 -0
- package/dist/generated/themes/EventRibbon.css.js.map +1 -0
- package/dist/generated/themes/MastheadCountrySelector.css.d.ts +1 -1
- package/dist/generated/themes/MastheadCountrySelector.css.js +1 -1
- package/dist/generated/themes/MastheadCountrySelector.css.js.map +1 -1
- package/dist/generated/themes/MastheadItem.css.d.ts +1 -1
- package/dist/generated/themes/MastheadItem.css.js +1 -1
- package/dist/generated/themes/MastheadItem.css.js.map +1 -1
- package/dist/generated/themes/MastheadShell.css.d.ts +1 -1
- package/dist/generated/themes/MastheadShell.css.js +1 -1
- package/dist/generated/themes/MastheadShell.css.js.map +1 -1
- package/dist/generated/themes/Modal.css.d.ts +1 -1
- package/dist/generated/themes/Modal.css.js +1 -1
- package/dist/generated/themes/Modal.css.js.map +1 -1
- package/dist/generated/themes/Pagination.css.d.ts +1 -1
- package/dist/generated/themes/Pagination.css.js +1 -1
- package/dist/generated/themes/Pagination.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/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/messagebundle.properties +5 -0
- package/dist/messagebundle_en.properties +3 -0
- package/dist/types/ContactItemIcon.d.ts +6 -0
- package/dist/types/ContactItemIcon.js +8 -0
- package/dist/types/ContactItemIcon.js.map +1 -0
- package/dist/types/EventRibbon.d.ts +37 -0
- package/dist/types/EventRibbon.js +43 -0
- package/dist/types/EventRibbon.js.map +1 -0
- package/dist/utils/parseArrayFromString.d.ts +2 -0
- package/dist/utils/parseArrayFromString.js +5 -0
- package/dist/utils/parseArrayFromString.js.map +1 -0
- package/dist/vscode.html-custom-data.json +183 -1
- package/dist/web-types.json +321 -2
- package/filter-coverage.js +58 -0
- package/package.json +8 -3
- package/src/Accordion.hbs +13 -9
- package/src/Accordion.ts +7 -4
- package/src/Assets.ts +29 -0
- package/src/AssetsVariables.ts +4 -0
- package/src/Button.ts +9 -0
- package/src/Contact.ts +200 -0
- package/src/ContactItem.ts +119 -0
- package/src/ContactItemTemplate.tsx +22 -0
- package/src/ContactTemplate.tsx +105 -0
- package/src/CountrySelector.ts +5 -8
- package/src/DatePicker.ts +2 -1
- package/src/EventRibbon.ts +143 -0
- package/src/EventRibbonTemplate.tsx +18 -0
- package/src/Footer.ts +7 -10
- package/src/List.ts +1 -1
- package/src/MastheadItem.hbs +8 -0
- package/src/MastheadItem.ts +8 -16
- package/src/MastheadMenu.ts +2 -5
- package/src/MastheadProfileMenu.ts +2 -5
- package/src/MastheadShell.ts +25 -5
- package/src/Pagination.hbs +7 -3
- package/src/Pagination.ts +48 -31
- package/src/PhoneNumberField.hbs +1 -1
- package/src/PhoneNumberField.ts +7 -2
- package/src/SearchableListBase.ts +24 -3
- package/src/SecondaryNavigation.ts +3 -5
- package/src/TextField.ts +9 -0
- package/src/Wizard.ts +39 -11
- package/src/WizardTemplate.tsx +5 -1
- package/src/data/CountryListISO3166.ts +10 -2
- package/src/generated/i18n/i18n-defaults.ts +2 -2
- package/src/generated/templates/AccordionTemplate.lit.ts +4 -2
- package/src/generated/templates/MastheadItemTemplate.lit.ts +25 -22
- package/src/generated/templates/PaginationTemplate.lit.ts +1 -1
- package/src/generated/templates/PhoneNumberFieldTemplate.lit.ts +1 -1
- package/src/generated/themes/Accordion.css.ts +1 -1
- package/src/generated/themes/Button.css.ts +1 -1
- package/src/generated/themes/Contact.css.ts +9 -0
- package/src/generated/themes/ContactItem.css.ts +9 -0
- package/src/generated/themes/DatePickerPopover.css.ts +1 -1
- package/src/generated/themes/EventRibbon.css.ts +9 -0
- package/src/generated/themes/MastheadCountrySelector.css.ts +1 -1
- package/src/generated/themes/MastheadItem.css.ts +1 -1
- package/src/generated/themes/MastheadShell.css.ts +1 -1
- package/src/generated/themes/Modal.css.ts +1 -1
- package/src/generated/themes/Pagination.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/TextField.css.ts +1 -1
- package/src/i18n/messagebundle.properties +5 -0
- package/src/i18n/messagebundle_en.properties +3 -0
- package/src/themes/Accordion.css +1 -0
- package/src/themes/Button.css +74 -26
- package/src/themes/Contact.css +184 -0
- package/src/themes/ContactItem.css +44 -0
- package/src/themes/DatePickerPopover.css +64 -6
- package/src/themes/EventRibbon.css +411 -0
- package/src/themes/MastheadCountrySelector.css +8 -5
- package/src/themes/MastheadItem.css +12 -4
- package/src/themes/MastheadShell.css +3 -1
- package/src/themes/Modal.css +8 -4
- package/src/themes/Pagination.css +19 -0
- package/src/themes/TextField.css +2 -13
- package/src/types/ContactItemIcon.ts +7 -0
- package/src/types/EventRibbon.ts +51 -0
- package/src/utils/parseArrayFromString.ts +5 -0
- package/swap-component-imports.js +18 -0
- package/dist/assets/messagebundle_en-CVKgy_9L.js +0 -1
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
|
|
2
|
+
import type UDExContactItem from "./ContactItem.js";
|
|
3
|
+
import type UI5ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
|
|
4
|
+
import type I18nBundle from "@ui5/webcomponents-base/i18nBundle.js";
|
|
5
|
+
export type ContactNumber = {
|
|
6
|
+
number: string;
|
|
7
|
+
country: string;
|
|
8
|
+
};
|
|
9
|
+
/**
|
|
10
|
+
* @class
|
|
11
|
+
*
|
|
12
|
+
* <h3 class="comment-api-title">Overview</h3>
|
|
13
|
+
*
|
|
14
|
+
*
|
|
15
|
+
* <h3>Usage</h3>
|
|
16
|
+
*
|
|
17
|
+
* For the <code>udex-contact</code>
|
|
18
|
+
* <h3>ES6 Module Import</h3>
|
|
19
|
+
*
|
|
20
|
+
* <code>import "@sapudex/web-components/dist/Contact.js";</code>
|
|
21
|
+
*
|
|
22
|
+
* @constructor
|
|
23
|
+
* @extends UI5Element
|
|
24
|
+
* @tagname udex-contact
|
|
25
|
+
* @public
|
|
26
|
+
*/
|
|
27
|
+
declare class UDExContact extends UI5Element {
|
|
28
|
+
/**
|
|
29
|
+
* Defines the <code>text</code> for the contact button.
|
|
30
|
+
*
|
|
31
|
+
* @public
|
|
32
|
+
*/
|
|
33
|
+
buttonText: string;
|
|
34
|
+
/**
|
|
35
|
+
* List of the contact numbers
|
|
36
|
+
*
|
|
37
|
+
* @default "[]"
|
|
38
|
+
* @public
|
|
39
|
+
*/
|
|
40
|
+
contactNumbers: string;
|
|
41
|
+
/**
|
|
42
|
+
* Defines the local country numbers link's href
|
|
43
|
+
*
|
|
44
|
+
* @default ""
|
|
45
|
+
* @public
|
|
46
|
+
*/
|
|
47
|
+
localCountryNumbersLink: string;
|
|
48
|
+
/**
|
|
49
|
+
* Defines if the initial focus should be prevented.
|
|
50
|
+
* @public
|
|
51
|
+
*/
|
|
52
|
+
preventInitialFocus: boolean;
|
|
53
|
+
/**
|
|
54
|
+
* Defines if the focus should be returned to the previously focused element.
|
|
55
|
+
* @public
|
|
56
|
+
*/
|
|
57
|
+
preventFocusRestore: boolean;
|
|
58
|
+
/**
|
|
59
|
+
* Defines the accessible name of the component.
|
|
60
|
+
* @default undefined
|
|
61
|
+
* @public
|
|
62
|
+
*/
|
|
63
|
+
accessibleName?: string;
|
|
64
|
+
/**
|
|
65
|
+
* Defines the IDs of the elements that label the component.
|
|
66
|
+
* @default undefined
|
|
67
|
+
* @public
|
|
68
|
+
*/
|
|
69
|
+
accessibleNameRef?: string;
|
|
70
|
+
/**
|
|
71
|
+
* Slot for list items.
|
|
72
|
+
*
|
|
73
|
+
* @slot items
|
|
74
|
+
* @public
|
|
75
|
+
*/
|
|
76
|
+
items: Array<UDExContactItem>;
|
|
77
|
+
/**
|
|
78
|
+
* Defines the mobile mode for component
|
|
79
|
+
*
|
|
80
|
+
* @private
|
|
81
|
+
*/
|
|
82
|
+
_isMobileMode: boolean;
|
|
83
|
+
_screenResizeHandler: () => void;
|
|
84
|
+
_screenResizeHandlerAttached?: boolean;
|
|
85
|
+
static i18nBundle: I18nBundle;
|
|
86
|
+
constructor();
|
|
87
|
+
onEnterDOM(): void;
|
|
88
|
+
onExitDOM(): void;
|
|
89
|
+
_openPopover(): void;
|
|
90
|
+
_closePopover(): void;
|
|
91
|
+
_screenResize(): void;
|
|
92
|
+
_attachScreenResizeHandler(): void;
|
|
93
|
+
_detachScreenResizeHandler(): void;
|
|
94
|
+
get _contactNumbersArray(): ContactNumber[];
|
|
95
|
+
get _responsivePopover(): UI5ResponsivePopover;
|
|
96
|
+
get _completeListTitle(): string;
|
|
97
|
+
get _localCountryTitle(): string;
|
|
98
|
+
get _numbersTitle(): string;
|
|
99
|
+
get _contactUsTitle(): string;
|
|
100
|
+
get _hasNumbersList(): boolean;
|
|
101
|
+
}
|
|
102
|
+
export default UDExContact;
|
package/dist/Contact.js
ADDED
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
var UDExContact_1;
|
|
8
|
+
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
|
|
9
|
+
import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
|
|
10
|
+
import property from "@ui5/webcomponents-base/dist/decorators/property.js";
|
|
11
|
+
import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
|
|
12
|
+
import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
|
|
13
|
+
import ContactTemplate from "./ContactTemplate.js";
|
|
14
|
+
import parseArrayFromString from "./utils/parseArrayFromString.js";
|
|
15
|
+
import { LOCAL_COUNTRY_NAMES, COMPLETE_LIST_OF, CALL_US_TODAY, CONTACT_US, } from "./generated/i18n/i18n-defaults.js";
|
|
16
|
+
import i18n from "@ui5/webcomponents-base/decorators/i18n.js";
|
|
17
|
+
// Styles
|
|
18
|
+
import ContactCss from "./generated/themes/Contact.css.js";
|
|
19
|
+
import { BreakpointUtils } from "./utils/Breakpoints.js";
|
|
20
|
+
/**
|
|
21
|
+
* @class
|
|
22
|
+
*
|
|
23
|
+
* <h3 class="comment-api-title">Overview</h3>
|
|
24
|
+
*
|
|
25
|
+
*
|
|
26
|
+
* <h3>Usage</h3>
|
|
27
|
+
*
|
|
28
|
+
* For the <code>udex-contact</code>
|
|
29
|
+
* <h3>ES6 Module Import</h3>
|
|
30
|
+
*
|
|
31
|
+
* <code>import "@sapudex/web-components/dist/Contact.js";</code>
|
|
32
|
+
*
|
|
33
|
+
* @constructor
|
|
34
|
+
* @extends UI5Element
|
|
35
|
+
* @tagname udex-contact
|
|
36
|
+
* @public
|
|
37
|
+
*/
|
|
38
|
+
let UDExContact = UDExContact_1 = class UDExContact extends UI5Element {
|
|
39
|
+
constructor() {
|
|
40
|
+
super();
|
|
41
|
+
/**
|
|
42
|
+
* List of the contact numbers
|
|
43
|
+
*
|
|
44
|
+
* @default "[]"
|
|
45
|
+
* @public
|
|
46
|
+
*/
|
|
47
|
+
this.contactNumbers = "";
|
|
48
|
+
/**
|
|
49
|
+
* Defines the local country numbers link's href
|
|
50
|
+
*
|
|
51
|
+
* @default ""
|
|
52
|
+
* @public
|
|
53
|
+
*/
|
|
54
|
+
this.localCountryNumbersLink = "";
|
|
55
|
+
/**
|
|
56
|
+
* Defines the mobile mode for component
|
|
57
|
+
*
|
|
58
|
+
* @private
|
|
59
|
+
*/
|
|
60
|
+
this._isMobileMode = BreakpointUtils.isAtMost("M");
|
|
61
|
+
this._screenResizeHandler = this._screenResize.bind(this);
|
|
62
|
+
}
|
|
63
|
+
onEnterDOM() {
|
|
64
|
+
this._attachScreenResizeHandler();
|
|
65
|
+
}
|
|
66
|
+
onExitDOM() {
|
|
67
|
+
this._detachScreenResizeHandler();
|
|
68
|
+
}
|
|
69
|
+
_openPopover() {
|
|
70
|
+
this._responsivePopover.open = !this._responsivePopover.open;
|
|
71
|
+
}
|
|
72
|
+
_closePopover() {
|
|
73
|
+
this._responsivePopover.open = false;
|
|
74
|
+
}
|
|
75
|
+
_screenResize() {
|
|
76
|
+
this._isMobileMode = BreakpointUtils.isAtMost("M");
|
|
77
|
+
}
|
|
78
|
+
_attachScreenResizeHandler() {
|
|
79
|
+
if (!this._screenResizeHandlerAttached) {
|
|
80
|
+
window.addEventListener("resize", this._screenResizeHandler);
|
|
81
|
+
this._screenResizeHandlerAttached = true;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
_detachScreenResizeHandler() {
|
|
85
|
+
if (this._screenResizeHandlerAttached) {
|
|
86
|
+
window.removeEventListener("resize", this._screenResizeHandler);
|
|
87
|
+
this._screenResizeHandlerAttached = false;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
get _contactNumbersArray() {
|
|
91
|
+
return parseArrayFromString(this.contactNumbers);
|
|
92
|
+
}
|
|
93
|
+
get _responsivePopover() {
|
|
94
|
+
return this.shadowRoot.querySelector(".udex-contact__popover");
|
|
95
|
+
}
|
|
96
|
+
get _completeListTitle() {
|
|
97
|
+
return `${UDExContact_1.i18nBundle.getText(COMPLETE_LIST_OF)} `;
|
|
98
|
+
}
|
|
99
|
+
get _localCountryTitle() {
|
|
100
|
+
return UDExContact_1.i18nBundle.getText(LOCAL_COUNTRY_NAMES);
|
|
101
|
+
}
|
|
102
|
+
get _numbersTitle() {
|
|
103
|
+
return UDExContact_1.i18nBundle.getText(CALL_US_TODAY);
|
|
104
|
+
}
|
|
105
|
+
get _contactUsTitle() {
|
|
106
|
+
return UDExContact_1.i18nBundle.getText(CONTACT_US);
|
|
107
|
+
}
|
|
108
|
+
get _hasNumbersList() {
|
|
109
|
+
return this._contactNumbersArray.length > 0;
|
|
110
|
+
}
|
|
111
|
+
};
|
|
112
|
+
__decorate([
|
|
113
|
+
property({ type: String })
|
|
114
|
+
], UDExContact.prototype, "buttonText", void 0);
|
|
115
|
+
__decorate([
|
|
116
|
+
property({ type: String })
|
|
117
|
+
], UDExContact.prototype, "contactNumbers", void 0);
|
|
118
|
+
__decorate([
|
|
119
|
+
property({ type: String })
|
|
120
|
+
], UDExContact.prototype, "localCountryNumbersLink", void 0);
|
|
121
|
+
__decorate([
|
|
122
|
+
property({ type: Boolean })
|
|
123
|
+
], UDExContact.prototype, "preventInitialFocus", void 0);
|
|
124
|
+
__decorate([
|
|
125
|
+
property({ type: Boolean })
|
|
126
|
+
], UDExContact.prototype, "preventFocusRestore", void 0);
|
|
127
|
+
__decorate([
|
|
128
|
+
property({ type: String })
|
|
129
|
+
], UDExContact.prototype, "accessibleName", void 0);
|
|
130
|
+
__decorate([
|
|
131
|
+
property({ type: String })
|
|
132
|
+
], UDExContact.prototype, "accessibleNameRef", void 0);
|
|
133
|
+
__decorate([
|
|
134
|
+
slot({ type: HTMLElement, "default": true })
|
|
135
|
+
], UDExContact.prototype, "items", void 0);
|
|
136
|
+
__decorate([
|
|
137
|
+
property({ type: Boolean })
|
|
138
|
+
], UDExContact.prototype, "_isMobileMode", void 0);
|
|
139
|
+
__decorate([
|
|
140
|
+
i18n("@sapudex/web-components")
|
|
141
|
+
], UDExContact, "i18nBundle", void 0);
|
|
142
|
+
UDExContact = UDExContact_1 = __decorate([
|
|
143
|
+
customElement({
|
|
144
|
+
tag: "udex-contact",
|
|
145
|
+
renderer: jsxRenderer,
|
|
146
|
+
styles: ContactCss,
|
|
147
|
+
template: ContactTemplate,
|
|
148
|
+
})
|
|
149
|
+
], UDExContact);
|
|
150
|
+
UDExContact.define();
|
|
151
|
+
export default UDExContact;
|
|
152
|
+
//# sourceMappingURL=Contact.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Contact.js","sourceRoot":"","sources":["../src/Contact.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 jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport ContactTemplate from \"./ContactTemplate.js\";\nimport type UDExContactItem from \"./ContactItem.js\";\nimport type UI5ResponsivePopover from \"@ui5/webcomponents/dist/ResponsivePopover.js\";\nimport parseArrayFromString from \"./utils/parseArrayFromString.js\";\nimport {\n LOCAL_COUNTRY_NAMES, COMPLETE_LIST_OF, CALL_US_TODAY, CONTACT_US,\n} from \"./generated/i18n/i18n-defaults.js\";\nimport i18n from \"@ui5/webcomponents-base/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/i18nBundle.js\";\n\n// Styles\nimport ContactCss from \"./generated/themes/Contact.css.js\";\nimport { BreakpointUtils } from \"./utils/Breakpoints.js\";\n\nexport type ContactNumber = {\n number: string;\n country: string;\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</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Contact.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @tagname udex-contact\n * @public\n */\n@customElement({\n tag: \"udex-contact\",\n renderer: jsxRenderer,\n styles: ContactCss,\n template: ContactTemplate,\n})\n\nclass UDExContact extends UI5Element {\n /**\n * Defines the <code>text</code> for the contact button.\n *\n * @public\n */\n @property({ type: String })\n buttonText!: string;\n\n /**\n * List of the contact numbers\n *\n * @default \"[]\"\n * @public\n */\n @property({ type: String })\n contactNumbers: string = \"\";\n\n /**\n * Defines the local country numbers link's href\n *\n * @default \"\"\n * @public\n */\n @property({ type: String })\n localCountryNumbersLink: string = \"\";\n\n /**\n * Defines if the initial focus should be prevented.\n * @public\n */\n @property({ type: Boolean })\n preventInitialFocus!: boolean;\n\n /**\n * Defines if the focus should be returned to the previously focused element.\n * @public\n */\n @property({ type: Boolean })\n preventFocusRestore!: boolean;\n\n /**\n * Defines the accessible name of the component.\n * @default undefined\n * @public\n */\n @property({ type: String })\n accessibleName?: string;\n\n /**\n * Defines the IDs of the elements that label the component.\n * @default undefined\n * @public\n */\n @property({ type: String })\n accessibleNameRef?: string;\n\n /**\n * Slot for list items.\n *\n * @slot items\n * @public\n */\n @slot({ type: HTMLElement, \"default\": true })\n items!: Array<UDExContactItem>;\n\n /**\n * Defines the mobile mode for component\n *\n * @private\n */\n @property({ type: Boolean })\n _isMobileMode: boolean = BreakpointUtils.isAtMost(\"M\");\n\n _screenResizeHandler: () => void;\n _screenResizeHandlerAttached?: boolean;\n\n @i18n(\"@sapudex/web-components\")\n static i18nBundle: I18nBundle;\n\n constructor() {\n super();\n this._screenResizeHandler = this._screenResize.bind(this);\n }\n\n onEnterDOM() {\n this._attachScreenResizeHandler();\n }\n\n onExitDOM() {\n this._detachScreenResizeHandler();\n }\n\n _openPopover(): void {\n this._responsivePopover.open = !this._responsivePopover.open;\n }\n\n _closePopover(): void {\n this._responsivePopover.open = false;\n }\n\n _screenResize(): void {\n this._isMobileMode = BreakpointUtils.isAtMost(\"M\");\n }\n\n _attachScreenResizeHandler(): void {\n if (!this._screenResizeHandlerAttached) {\n window.addEventListener(\"resize\", this._screenResizeHandler);\n this._screenResizeHandlerAttached = true;\n }\n }\n\n _detachScreenResizeHandler(): void {\n if (this._screenResizeHandlerAttached) {\n window.removeEventListener(\"resize\", this._screenResizeHandler);\n this._screenResizeHandlerAttached = false;\n }\n }\n\n get _contactNumbersArray(): ContactNumber[] {\n return parseArrayFromString<ContactNumber>(this.contactNumbers);\n }\n\n get _responsivePopover(): UI5ResponsivePopover {\n return this.shadowRoot!.querySelector<UI5ResponsivePopover>(\".udex-contact__popover\")!;\n }\n\n get _completeListTitle(): string {\n return `${UDExContact.i18nBundle.getText(COMPLETE_LIST_OF)} `;\n }\n\n get _localCountryTitle(): string {\n return UDExContact.i18nBundle.getText(LOCAL_COUNTRY_NAMES);\n }\n\n get _numbersTitle(): string {\n return UDExContact.i18nBundle.getText(CALL_US_TODAY);\n }\n\n get _contactUsTitle(): string {\n return UDExContact.i18nBundle.getText(CONTACT_US);\n }\n\n get _hasNumbersList(): boolean {\n return this._contactNumbersArray.length > 0;\n }\n}\n\nUDExContact.define();\n\nexport default UDExContact;\n"]}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
|
|
2
|
+
import { UDExTarget } from "./types/common.js";
|
|
3
|
+
import UDExContactItemIcon from "./types/ContactItemIcon.js";
|
|
4
|
+
import "@ui5/webcomponents-icons/dist/headset.js";
|
|
5
|
+
import "@ui5/webcomponents-icons/dist/discussion-2.js";
|
|
6
|
+
import "@ui5/webcomponents-icons/dist/email.js";
|
|
7
|
+
type UDExContactItemClickEventDetail = {
|
|
8
|
+
originalEvent: Event;
|
|
9
|
+
item: UDExContactItem;
|
|
10
|
+
};
|
|
11
|
+
/**
|
|
12
|
+
* @class
|
|
13
|
+
*
|
|
14
|
+
* <h3 class="comment-api-title">Overview</h3>
|
|
15
|
+
*
|
|
16
|
+
*
|
|
17
|
+
* <h3>Usage</h3>
|
|
18
|
+
*
|
|
19
|
+
* For the <code>udex-contact-item</code>
|
|
20
|
+
* <h3>ES6 Module Import</h3>
|
|
21
|
+
*
|
|
22
|
+
* <code>import "@sapudex/web-components/dist/ContactItem.js";</code>
|
|
23
|
+
*
|
|
24
|
+
* @constructor
|
|
25
|
+
* @extends UI5Element
|
|
26
|
+
* @tagname udex-contact-item
|
|
27
|
+
* @public
|
|
28
|
+
*/
|
|
29
|
+
declare class UDExContactItem extends UI5Element {
|
|
30
|
+
eventDetails: {
|
|
31
|
+
"item-click": UDExContactItemClickEventDetail;
|
|
32
|
+
};
|
|
33
|
+
/**
|
|
34
|
+
* Defines the label for the item.
|
|
35
|
+
*
|
|
36
|
+
* @public
|
|
37
|
+
*/
|
|
38
|
+
label: string;
|
|
39
|
+
/**
|
|
40
|
+
* Defines the href for the item.
|
|
41
|
+
*
|
|
42
|
+
* @public
|
|
43
|
+
*/
|
|
44
|
+
href: string;
|
|
45
|
+
/**
|
|
46
|
+
* Defines the icon name for the item.
|
|
47
|
+
*
|
|
48
|
+
* @public
|
|
49
|
+
*/
|
|
50
|
+
icon?: `${UDExContactItemIcon}`;
|
|
51
|
+
/**
|
|
52
|
+
* Defines target for the item
|
|
53
|
+
*
|
|
54
|
+
* @public
|
|
55
|
+
*/
|
|
56
|
+
target: `${UDExTarget}`;
|
|
57
|
+
/**
|
|
58
|
+
* Slot for the item content.
|
|
59
|
+
*
|
|
60
|
+
* @slot
|
|
61
|
+
* @public
|
|
62
|
+
*/
|
|
63
|
+
content: Array<Node>;
|
|
64
|
+
_fireItemClickEvent(e: Event): void;
|
|
65
|
+
get _iconName(): string | undefined;
|
|
66
|
+
}
|
|
67
|
+
export default UDExContactItem;
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
|
|
8
|
+
import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
|
|
9
|
+
import slot from "@ui5/webcomponents-base/decorators/slot.js";
|
|
10
|
+
import property from "@ui5/webcomponents-base/dist/decorators/property.js";
|
|
11
|
+
import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
|
|
12
|
+
import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
|
|
13
|
+
import ContactItemTemplate from "./ContactItemTemplate.js";
|
|
14
|
+
import { UDExTarget } from "./types/common.js";
|
|
15
|
+
import UDExContactItemIcon from "./types/ContactItemIcon.js";
|
|
16
|
+
import "@ui5/webcomponents-icons/dist/headset.js";
|
|
17
|
+
import "@ui5/webcomponents-icons/dist/discussion-2.js";
|
|
18
|
+
import "@ui5/webcomponents-icons/dist/email.js";
|
|
19
|
+
// Styles
|
|
20
|
+
import ContactItemCss from "./generated/themes/ContactItem.css.js";
|
|
21
|
+
/**
|
|
22
|
+
* @class
|
|
23
|
+
*
|
|
24
|
+
* <h3 class="comment-api-title">Overview</h3>
|
|
25
|
+
*
|
|
26
|
+
*
|
|
27
|
+
* <h3>Usage</h3>
|
|
28
|
+
*
|
|
29
|
+
* For the <code>udex-contact-item</code>
|
|
30
|
+
* <h3>ES6 Module Import</h3>
|
|
31
|
+
*
|
|
32
|
+
* <code>import "@sapudex/web-components/dist/ContactItem.js";</code>
|
|
33
|
+
*
|
|
34
|
+
* @constructor
|
|
35
|
+
* @extends UI5Element
|
|
36
|
+
* @tagname udex-contact-item
|
|
37
|
+
* @public
|
|
38
|
+
*/
|
|
39
|
+
let UDExContactItem = class UDExContactItem extends UI5Element {
|
|
40
|
+
constructor() {
|
|
41
|
+
super(...arguments);
|
|
42
|
+
/**
|
|
43
|
+
* Defines target for the item
|
|
44
|
+
*
|
|
45
|
+
* @public
|
|
46
|
+
*/
|
|
47
|
+
this.target = UDExTarget._self;
|
|
48
|
+
}
|
|
49
|
+
_fireItemClickEvent(e) {
|
|
50
|
+
this.fireDecoratorEvent("item-click", {
|
|
51
|
+
item: this,
|
|
52
|
+
originalEvent: e,
|
|
53
|
+
});
|
|
54
|
+
}
|
|
55
|
+
get _iconName() {
|
|
56
|
+
if (this.icon) {
|
|
57
|
+
return UDExContactItemIcon[this.icon].toLowerCase();
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
__decorate([
|
|
62
|
+
property({ type: String })
|
|
63
|
+
], UDExContactItem.prototype, "label", void 0);
|
|
64
|
+
__decorate([
|
|
65
|
+
property({ type: String })
|
|
66
|
+
], UDExContactItem.prototype, "href", void 0);
|
|
67
|
+
__decorate([
|
|
68
|
+
property({ type: String })
|
|
69
|
+
], UDExContactItem.prototype, "icon", void 0);
|
|
70
|
+
__decorate([
|
|
71
|
+
property({ type: String })
|
|
72
|
+
], UDExContactItem.prototype, "target", void 0);
|
|
73
|
+
__decorate([
|
|
74
|
+
slot({ type: Node, "default": true })
|
|
75
|
+
], UDExContactItem.prototype, "content", void 0);
|
|
76
|
+
UDExContactItem = __decorate([
|
|
77
|
+
customElement({
|
|
78
|
+
tag: "udex-contact-item",
|
|
79
|
+
renderer: jsxRenderer,
|
|
80
|
+
styles: ContactItemCss,
|
|
81
|
+
template: ContactItemTemplate,
|
|
82
|
+
})
|
|
83
|
+
/**
|
|
84
|
+
* Fires when item is clicked
|
|
85
|
+
*
|
|
86
|
+
* @public
|
|
87
|
+
*/
|
|
88
|
+
,
|
|
89
|
+
event("item-click", {
|
|
90
|
+
bubbles: true,
|
|
91
|
+
cancelable: true,
|
|
92
|
+
})
|
|
93
|
+
], UDExContactItem);
|
|
94
|
+
UDExContactItem.define();
|
|
95
|
+
export default UDExContactItem;
|
|
96
|
+
//# sourceMappingURL=ContactItem.js.map
|
|
@@ -0,0 +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"]}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
|
|
2
|
+
import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
|
|
3
|
+
import UDExLink from "./Link.js";
|
|
4
|
+
export default function ContactItemTemplate() {
|
|
5
|
+
return (_jsxs("div", { class: "udex-contact-item", children: [this.icon && _jsx(UI5Icon, { class: "udex-contact-item__icon", name: this._iconName, mode: "Decorative" }), _jsxs("div", { class: "udex-contact-item__content", children: [labelContent.call(this), _jsx("p", { class: "udex-contact-item__description", children: _jsx("slot", {}) })] })] }));
|
|
6
|
+
}
|
|
7
|
+
function labelContent() {
|
|
8
|
+
if (this.href) {
|
|
9
|
+
return _jsx(UDExLink, { onClick: this._fireItemClickEvent, target: this.target, class: "udex-contact-item__link", href: this.href, children: this.label });
|
|
10
|
+
}
|
|
11
|
+
return _jsx("span", { class: "udex-contact-item__text", children: this.label });
|
|
12
|
+
}
|
|
13
|
+
//# sourceMappingURL=ContactItemTemplate.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ContactItemTemplate.js","sourceRoot":"","sources":["../src/ContactItemTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,OAAO,MAAM,iCAAiC,CAAC;AACtD,OAAO,QAAQ,MAAM,WAAW,CAAC;AAEjC,MAAM,CAAC,OAAO,UAAU,mBAAmB;IACzC,OAAO,CACL,eAAK,KAAK,EAAC,mBAAmB,aAC3B,IAAI,CAAC,IAAI,IAAI,KAAC,OAAO,IAAC,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,EAAC,YAAY,GAAW,EACzG,eAAK,KAAK,EAAC,4BAA4B,aACpC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,EACxB,YAAG,KAAK,EAAC,gCAAgC,YAAC,gBAAa,GAAI,IACvD,IACF,CACP,CAAC;AACJ,CAAC;AAED,SAAS,YAAY;IACnB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;QACd,OAAO,KAAC,QAAQ,IAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,YAAG,IAAI,CAAC,KAAK,GAAY,CAAC;IACpJ,CAAC;IACD,OAAO,eAAM,KAAK,EAAC,yBAAyB,YAAE,IAAI,CAAC,KAAK,GAAQ,CAAC;AACnE,CAAC","sourcesContent":["import type ContactItem from \"./ContactItem.js\";\nimport UI5Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport UDExLink from \"./Link.js\";\n\nexport default function ContactItemTemplate(this: ContactItem) {\n return (\n <div class=\"udex-contact-item\">\n {this.icon && <UI5Icon class=\"udex-contact-item__icon\" name={this._iconName} mode=\"Decorative\"></UI5Icon>}\n <div class=\"udex-contact-item__content\">\n {labelContent.call(this)}\n <p class=\"udex-contact-item__description\"><slot></slot></p>\n </div>\n </div>\n );\n}\n\nfunction labelContent(this: ContactItem) {\n if (this.href) {\n return <UDExLink onClick={this._fireItemClickEvent} target={this.target} class=\"udex-contact-item__link\" href={this.href}>{this.label}</UDExLink>;\n }\n return <span class=\"udex-contact-item__text\">{this.label}</span>;\n}\n"]}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "@ui5/webcomponents-base/jsx-runtime";
|
|
2
|
+
import UDExButtonSize from "./types/ButtonSize.js";
|
|
3
|
+
import UDExButtonDesign from "./types/ButtonDesign.js";
|
|
4
|
+
import UDExButton from "./Button.js";
|
|
5
|
+
import UDExLink from "./Link.js";
|
|
6
|
+
import ButtonType from "@ui5/webcomponents/dist/types/ButtonType.js";
|
|
7
|
+
import UI5ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
|
|
8
|
+
import PopoverPlacement from "@ui5/webcomponents/dist/types/PopoverPlacement.js";
|
|
9
|
+
import PopoverHorizontalAlign from "@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js";
|
|
10
|
+
import PopupAccessibleRole from "@ui5/webcomponents/dist/types/PopupAccessibleRole.js";
|
|
11
|
+
import UDExButtonAccessibleRole from "./types/ButtonAccessibleRole.js";
|
|
12
|
+
import "@ui5/webcomponents-icons/dist/discussion-2.js";
|
|
13
|
+
import "@ui5/webcomponents-icons/dist/decline.js";
|
|
14
|
+
export default function ContactTemplate() {
|
|
15
|
+
return (_jsxs("div", { class: "udex-contact", children: [responsivePopover.call(this), openerButton.call(this)] }));
|
|
16
|
+
}
|
|
17
|
+
function responsivePopover() {
|
|
18
|
+
return (_jsxs(UI5ResponsivePopover, { id: `${this._id}-popover`, opener: `${this._id}-opener`, class: "udex-contact__popover", placement: PopoverPlacement.Top, horizontalAlign: PopoverHorizontalAlign.End, "accessible-role": PopupAccessibleRole.Dialog, preventInitialFocus: this.preventInitialFocus, preventFocusRestore: this.preventFocusRestore, accessibleName: this.accessibleName, accessibleNameRef: this.accessibleNameRef, hideArrow: true, children: [_jsxs("div", { class: {
|
|
19
|
+
"udex-contact__call-us": true,
|
|
20
|
+
"udex-contact__call-us_empty": !this._hasNumbersList,
|
|
21
|
+
}, children: [!this._hasNumbersList && _jsx("span", { class: "udex-contact__call-us-heading", children: this._contactUsTitle }), _jsx(UDExButton, { class: "udex-contact__close-btn", icon: "sap-icon://decline", type: "Button", onClick: this._closePopover, size: UDExButtonSize.Medium, design: UDExButtonDesign.Invisible, "accessible-role": UDExButtonAccessibleRole.Button, "icon-only": true }), this._hasNumbersList && callUsSection.call(this)] }), _jsx("div", { class: "udex-contact__items", children: _jsx("slot", {}) })] }));
|
|
22
|
+
}
|
|
23
|
+
function openerButton() {
|
|
24
|
+
return (_jsx("div", { id: `${this._id}-opener`, class: "udex-contact__opener", children: _jsx(UDExButton, { onClick: this._openPopover, class: "udex-contact__button", design: UDExButtonDesign.Primary, size: UDExButtonSize.Large, type: ButtonType.Button, accessibleName: this._isMobileMode ? this.buttonText : undefined, tooltip: this._isMobileMode ? this.buttonText : undefined, icon: "sap-icon://discussion-2", children: !this._isMobileMode && this.buttonText }) }));
|
|
25
|
+
}
|
|
26
|
+
function callUsSection() {
|
|
27
|
+
return (_jsxs(_Fragment, { children: [_jsx("h4", { class: "udex-contact__call-us-title", children: this._numbersTitle }), _jsx("div", { class: "udex-contact__numbers", children: this._contactNumbersArray.map(({ number, country }) => (_jsxs("div", { class: "udex-contact__number-wrapper", children: [_jsx("span", { class: "udex-contact__country", children: country }), _jsx(UDExLink, { class: "udex-contact__number", href: "tel:".concat(number), children: number })] }))) }), _jsxs("p", { class: "udex-contact__complete-list", children: [this._completeListTitle, _jsx(UDExLink, { class: "udex-contact__local-country-link", href: this.localCountryNumbersLink, children: this._localCountryTitle })] })] }));
|
|
28
|
+
}
|
|
29
|
+
//# sourceMappingURL=ContactTemplate.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ContactTemplate.js","sourceRoot":"","sources":["../src/ContactTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,cAAc,MAAM,uBAAuB,CAAC;AACnD,OAAO,gBAAgB,MAAM,yBAAyB,CAAC;AACvD,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,QAAQ,MAAM,WAAW,CAAC;AACjC,OAAO,UAAU,MAAM,6CAA6C,CAAC;AACrE,OAAO,oBAAoB,MAAM,8CAA8C,CAAC;AAChF,OAAO,gBAAgB,MAAM,mDAAmD,CAAC;AACjF,OAAO,sBAAsB,MAAM,yDAAyD,CAAC;AAC7F,OAAO,mBAAmB,MAAM,sDAAsD,CAAC;AACvF,OAAO,wBAAwB,MAAM,iCAAiC,CAAC;AACvE,OAAO,+CAA+C,CAAC;AACvD,OAAO,0CAA0C,CAAC;AAElD,MAAM,CAAC,OAAO,UAAU,eAAe;IACrC,OAAO,CACL,eAAK,KAAK,EAAC,cAAc,aACtB,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,EAC5B,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,IACpB,CACP,CAAC;AACJ,CAAC;AAED,SAAS,iBAAiB;IACxB,OAAO,CACL,MAAC,oBAAoB,IACnB,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,UAAU,EACzB,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,SAAS,EAC5B,KAAK,EAAC,uBAAuB,EAC7B,SAAS,EAAE,gBAAgB,CAAC,GAAG,EAC/B,eAAe,EAAE,sBAAsB,CAAC,GAAG,qBAC1B,mBAAmB,CAAC,MAAM,EAC3C,mBAAmB,EAAE,IAAI,CAAC,mBAAmB,EAC7C,mBAAmB,EAAE,IAAI,CAAC,mBAAmB,EAC7C,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,SAAS,EAAE,IAAI,aACf,eACE,KAAK,EAAE;oBACL,uBAAuB,EAAE,IAAI;oBAC7B,6BAA6B,EAAE,CAAC,IAAI,CAAC,eAAe;iBACrD,aACA,CAAC,IAAI,CAAC,eAAe,IAAI,eAAM,KAAK,EAAC,+BAA+B,YAAE,IAAI,CAAC,eAAe,GAAQ,EACnG,KAAC,UAAU,IACT,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAC,oBAAoB,EACzB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,IAAI,EAAE,cAAc,CAAC,MAAM,EAC3B,MAAM,EAAE,gBAAgB,CAAC,SAAS,qBACjB,wBAAwB,CAAC,MAAM,sBAErC,EACZ,IAAI,CAAC,eAAe,IAAI,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,IAC7C,EACN,cAAK,KAAK,EAAC,qBAAqB,YAAC,gBAAa,GAAM,IAC/B,CACxB,CAAC;AACJ,CAAC;AAED,SAAS,YAAY;IACnB,OAAO,CACL,cAAK,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,SAAS,EAAE,KAAK,EAAC,sBAAsB,YACzD,KAAC,UAAU,IACT,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,KAAK,EAAC,sBAAsB,EAC5B,MAAM,EAAE,gBAAgB,CAAC,OAAO,EAChC,IAAI,EAAE,cAAc,CAAC,KAAK,EAC1B,IAAI,EAAE,UAAU,CAAC,MAAM,EACvB,cAAc,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EAChE,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EACzD,IAAI,EAAC,yBAAyB,YAC7B,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,UAAU,GAC5B,GACT,CACP,CAAC;AACJ,CAAC;AAED,SAAS,aAAa;IACpB,OAAO,CACL,8BACE,aAAI,KAAK,EAAC,6BAA6B,YAAE,IAAI,CAAC,aAAa,GAAM,EACjE,cAAK,KAAK,EAAC,uBAAuB,YAC/B,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CACtD,eAAK,KAAK,EAAC,8BAA8B,aACvC,eAAM,KAAK,EAAC,uBAAuB,YAAE,OAAO,GAAQ,EACpD,KAAC,QAAQ,IACP,KAAK,EAAC,sBAAsB,EAC5B,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,YAC1B,MAAM,GACE,IACP,CACP,CAAC,GACE,EACN,aAAG,KAAK,EAAC,6BAA6B,aACnC,IAAI,CAAC,kBAAkB,EACxB,KAAC,QAAQ,IACP,KAAK,EAAC,kCAAkC,EACxC,IAAI,EAAE,IAAI,CAAC,uBAAuB,YACjC,IAAI,CAAC,kBAAkB,GACf,IACT,IACH,CACJ,CAAC;AACJ,CAAC","sourcesContent":["import type Contact from \"./Contact.js\";\nimport UDExButtonSize from \"./types/ButtonSize.js\";\nimport UDExButtonDesign from \"./types/ButtonDesign.js\";\nimport UDExButton from \"./Button.js\";\nimport UDExLink from \"./Link.js\";\nimport ButtonType from \"@ui5/webcomponents/dist/types/ButtonType.js\";\nimport UI5ResponsivePopover from \"@ui5/webcomponents/dist/ResponsivePopover.js\";\nimport PopoverPlacement from \"@ui5/webcomponents/dist/types/PopoverPlacement.js\";\nimport PopoverHorizontalAlign from \"@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js\";\nimport PopupAccessibleRole from \"@ui5/webcomponents/dist/types/PopupAccessibleRole.js\";\nimport UDExButtonAccessibleRole from \"./types/ButtonAccessibleRole.js\";\nimport \"@ui5/webcomponents-icons/dist/discussion-2.js\";\nimport \"@ui5/webcomponents-icons/dist/decline.js\";\n\nexport default function ContactTemplate(this: Contact) {\n return (\n <div class=\"udex-contact\">\n {responsivePopover.call(this)}\n {openerButton.call(this)}\n </div>\n );\n}\n\nfunction responsivePopover(this: Contact) {\n return (\n <UI5ResponsivePopover\n id={`${this._id}-popover`}\n opener={`${this._id}-opener`}\n class=\"udex-contact__popover\"\n placement={PopoverPlacement.Top}\n horizontalAlign={PopoverHorizontalAlign.End}\n accessible-role={PopupAccessibleRole.Dialog}\n preventInitialFocus={this.preventInitialFocus}\n preventFocusRestore={this.preventFocusRestore}\n accessibleName={this.accessibleName}\n accessibleNameRef={this.accessibleNameRef}\n hideArrow={true}>\n <div\n class={{\n \"udex-contact__call-us\": true,\n \"udex-contact__call-us_empty\": !this._hasNumbersList,\n }}>\n {!this._hasNumbersList && <span class=\"udex-contact__call-us-heading\">{this._contactUsTitle}</span>}\n <UDExButton\n class=\"udex-contact__close-btn\"\n icon=\"sap-icon://decline\"\n type=\"Button\"\n onClick={this._closePopover}\n size={UDExButtonSize.Medium}\n design={UDExButtonDesign.Invisible}\n accessible-role={UDExButtonAccessibleRole.Button}\n icon-only>\n </UDExButton>\n {this._hasNumbersList && callUsSection.call(this)}\n </div>\n <div class=\"udex-contact__items\"><slot></slot></div>\n </UI5ResponsivePopover>\n );\n}\n\nfunction openerButton(this: Contact) {\n return (\n <div id={`${this._id}-opener`} class=\"udex-contact__opener\">\n <UDExButton\n onClick={this._openPopover}\n class=\"udex-contact__button\"\n design={UDExButtonDesign.Primary}\n size={UDExButtonSize.Large}\n type={ButtonType.Button}\n accessibleName={this._isMobileMode ? this.buttonText : undefined}\n tooltip={this._isMobileMode ? this.buttonText : undefined}\n icon=\"sap-icon://discussion-2\">\n {!this._isMobileMode && this.buttonText}\n </UDExButton>\n </div>\n );\n}\n\nfunction callUsSection(this: Contact) {\n return (\n <>\n <h4 class=\"udex-contact__call-us-title\">{this._numbersTitle}</h4>\n <div class=\"udex-contact__numbers\">\n {this._contactNumbersArray.map(({ number, country }) => (\n <div class=\"udex-contact__number-wrapper\">\n <span class=\"udex-contact__country\">{country}</span>\n <UDExLink\n class=\"udex-contact__number\"\n href={\"tel:\".concat(number)}>\n {number}\n </UDExLink>\n </div>\n ))}\n </div>\n <p class=\"udex-contact__complete-list\">\n {this._completeListTitle}\n <UDExLink\n class=\"udex-contact__local-country-link\"\n href={this.localCountryNumbersLink}>\n {this._localCountryTitle}\n </UDExLink>\n </p>\n </>\n );\n}\n"]}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
|
|
2
1
|
import type Popover from "@ui5/webcomponents/dist/Popover.js";
|
|
3
2
|
import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
|
|
4
3
|
import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
|
|
@@ -146,17 +145,16 @@ declare class UDExCountrySelector extends UDExSearchableListBase {
|
|
|
146
145
|
_open?: boolean;
|
|
147
146
|
countryList: Country[];
|
|
148
147
|
selectedCountry: Country | undefined;
|
|
149
|
-
_trigger:
|
|
148
|
+
_trigger: UDExTextField;
|
|
150
149
|
_dropdown: UDExDropdown;
|
|
151
150
|
_search: Search;
|
|
152
151
|
_handleResizeBound: ResizeObserverCallback;
|
|
153
|
-
static i18nBundle: I18nBundle;
|
|
154
152
|
constructor();
|
|
155
153
|
onEnterDOM(): void;
|
|
156
154
|
onExitDOM(): void;
|
|
157
155
|
onBeforeRendering(): void;
|
|
158
156
|
onAfterRendering(): void;
|
|
159
|
-
getTrigger():
|
|
157
|
+
getTrigger(): UDExTextField;
|
|
160
158
|
_dropdownClose(): void;
|
|
161
159
|
_dropdownOpen(): void;
|
|
162
160
|
_dropdownBeforeOpen(): void;
|
package/dist/CountrySelector.js
CHANGED
|
@@ -8,7 +8,6 @@ var UDExCountrySelector_1;
|
|
|
8
8
|
import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
|
|
9
9
|
import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
|
|
10
10
|
import property from "@ui5/webcomponents-base/dist/decorators/property.js";
|
|
11
|
-
import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
|
|
12
11
|
import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
|
|
13
12
|
import { isEscape, isTabPrevious, isTabNext, } from "@ui5/webcomponents-base/dist/Keys.js";
|
|
14
13
|
import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
|
|
@@ -95,13 +94,15 @@ let UDExCountrySelector = UDExCountrySelector_1 = class UDExCountrySelector exte
|
|
|
95
94
|
this._trigger = this.getTrigger();
|
|
96
95
|
}
|
|
97
96
|
getTrigger() {
|
|
98
|
-
return this.shadowRoot.querySelector("
|
|
97
|
+
return this.shadowRoot.querySelector("[udex-text-field]");
|
|
99
98
|
}
|
|
100
99
|
_dropdownClose() {
|
|
101
100
|
this.fireDecoratorEvent("close");
|
|
101
|
+
this._trigger.iconActive = false;
|
|
102
102
|
}
|
|
103
103
|
_dropdownOpen() {
|
|
104
104
|
this.fireDecoratorEvent("open");
|
|
105
|
+
this._trigger.iconActive = true;
|
|
105
106
|
}
|
|
106
107
|
_dropdownBeforeOpen() {
|
|
107
108
|
this._open = true;
|
|
@@ -299,9 +300,6 @@ __decorate([
|
|
|
299
300
|
__decorate([
|
|
300
301
|
property({ type: Boolean })
|
|
301
302
|
], UDExCountrySelector.prototype, "_open", void 0);
|
|
302
|
-
__decorate([
|
|
303
|
-
i18n("@sapudex/web-components")
|
|
304
|
-
], UDExCountrySelector, "i18nBundle", void 0);
|
|
305
303
|
UDExCountrySelector = UDExCountrySelector_1 = __decorate([
|
|
306
304
|
customElement({
|
|
307
305
|
tag: "udex-country-selector",
|