@sapudex/web-components 0.111.0 → 0.117.1
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/.npmrc +1 -2
- package/bundle.esm.js +4 -0
- package/dist/AccordionItem.d.ts +7 -0
- package/dist/AccordionItem.js +6 -2
- package/dist/AccordionItem.js.map +1 -1
- package/dist/Avatar.d.ts +8 -1
- package/dist/Avatar.js +5 -2
- package/dist/Avatar.js.map +1 -1
- package/dist/CountrySelector.d.ts +6 -7
- package/dist/CountrySelector.js +15 -7
- package/dist/CountrySelector.js.map +1 -1
- package/dist/Dropdown.d.ts +10 -0
- package/dist/Dropdown.js +10 -0
- package/dist/Dropdown.js.map +1 -1
- package/dist/FilterMenu.d.ts +14 -4
- package/dist/FilterMenu.js +46 -7
- package/dist/FilterMenu.js.map +1 -1
- package/dist/Footer.d.ts +40 -1
- package/dist/Footer.js +151 -1
- package/dist/Footer.js.map +1 -1
- package/dist/InputGroup.d.ts +75 -0
- package/dist/InputGroup.js +101 -0
- package/dist/InputGroup.js.map +1 -0
- package/dist/List.d.ts +7 -0
- package/dist/List.js +78 -18
- package/dist/List.js.map +1 -1
- package/dist/ListItem.d.ts +0 -1
- package/dist/ListItem.js +0 -6
- package/dist/ListItem.js.map +1 -1
- package/dist/ListItemBase.d.ts +3 -0
- package/dist/ListItemBase.js +12 -0
- package/dist/ListItemBase.js.map +1 -1
- package/dist/MastheadMobileMenu.d.ts +4 -1
- package/dist/MastheadMobileMenu.js +10 -3
- package/dist/MastheadMobileMenu.js.map +1 -1
- package/dist/PhoneNumberField.d.ts +8 -0
- package/dist/PhoneNumberField.js +23 -10
- package/dist/PhoneNumberField.js.map +1 -1
- package/dist/Search.d.ts +60 -1
- package/dist/Search.js +191 -19
- package/dist/Search.js.map +1 -1
- package/dist/SecondaryNavigation.d.ts +37 -45
- package/dist/SecondaryNavigation.js +148 -153
- package/dist/SecondaryNavigation.js.map +1 -1
- package/dist/SecondaryNavigationItem.d.ts +101 -0
- package/dist/SecondaryNavigationItem.js +287 -0
- package/dist/SecondaryNavigationItem.js.map +1 -0
- package/dist/SecondaryNavigationItemBase.d.ts +68 -0
- package/dist/SecondaryNavigationItemBase.js +78 -0
- package/dist/SecondaryNavigationItemBase.js.map +1 -0
- package/dist/SecondaryNavigationSubItem.d.ts +52 -0
- package/dist/SecondaryNavigationSubItem.js +102 -0
- package/dist/SecondaryNavigationSubItem.js.map +1 -0
- package/dist/SelectBox.d.ts +7 -0
- package/dist/SelectBox.js +27 -2
- package/dist/SelectBox.js.map +1 -1
- package/dist/StatusBadge.d.ts +67 -0
- package/dist/StatusBadge.js +104 -0
- package/dist/StatusBadge.js.map +1 -0
- package/dist/Tab.js +1 -1
- package/dist/Tab.js.map +1 -1
- package/dist/Table.d.ts +5 -5
- package/dist/Table.js +5 -5
- package/dist/Table.js.map +1 -1
- package/dist/Tag.d.ts +7 -1
- package/dist/Tag.js +6 -2
- package/dist/Tag.js.map +1 -1
- package/dist/TextArea.js.map +1 -1
- package/dist/assets/{bundle.esm-b7920968.js → bundle.esm-f65ae7da.js} +189 -184
- package/dist/assets/messagebundle_en-7249941b.js +1 -0
- package/dist/css/themes/AccordionItem.css +1 -1
- package/dist/css/themes/Avatar.css +1 -1
- package/dist/css/themes/Breadcrumbs.css +1 -1
- package/dist/css/themes/Checkbox.css +1 -1
- package/dist/css/themes/CountrySelector.css +1 -1
- package/dist/css/themes/DatePicker.css +1 -1
- package/dist/css/themes/Dropdown.css +1 -1
- package/dist/css/themes/FilterMenu.css +1 -1
- package/dist/css/themes/HeroBanner.css +1 -1
- package/dist/css/themes/InputGroup.css +1 -0
- package/dist/css/themes/MastheadItem.css +1 -1
- package/dist/css/themes/MastheadMenuItem.css +1 -1
- package/dist/css/themes/MastheadShell.css +1 -1
- package/dist/css/themes/MediaPlayer.css +1 -1
- package/dist/css/themes/PhoneNumberField.css +1 -1
- package/dist/css/themes/RatingIndicator.css +1 -1
- package/dist/css/themes/Search.css +1 -1
- package/dist/css/themes/SearchSuggestions.css +1 -1
- package/dist/css/themes/SecondaryNavigation.css +1 -1
- package/dist/css/themes/SecondaryNavigationItem.css +1 -0
- package/dist/css/themes/SecondaryNavigationSubItem.css +1 -0
- package/dist/css/themes/Slider.css +1 -1
- package/dist/css/themes/StatusBadge.css +1 -0
- package/dist/css/themes/Tag.css +1 -1
- package/dist/css/themes/TextField.css +1 -1
- package/dist/custom-elements-internal.json +1070 -116
- package/dist/custom-elements.json +1047 -169
- package/dist/features/SearchSuggestionsPopover.d.ts +3 -3
- package/dist/features/SearchSuggestionsPopover.js +16 -18
- package/dist/features/SearchSuggestionsPopover.js.map +1 -1
- package/dist/generated/assets/i18n/messagebundle_en.json +1 -1
- package/dist/generated/i18n/i18n-defaults.d.ts +8 -1
- package/dist/generated/i18n/i18n-defaults.js +8 -1
- package/dist/generated/i18n/i18n-defaults.js.map +1 -1
- package/dist/generated/templates/AccordionItemTemplate.lit.js +2 -1
- package/dist/generated/templates/AccordionItemTemplate.lit.js.map +1 -1
- package/dist/generated/templates/CountrySelectorTemplate.lit.js +1 -1
- package/dist/generated/templates/CountrySelectorTemplate.lit.js.map +1 -1
- package/dist/generated/templates/DropdownTemplate.lit.js +1 -1
- package/dist/generated/templates/DropdownTemplate.lit.js.map +1 -1
- package/dist/generated/templates/FilterMenuTemplate.lit.js +3 -3
- package/dist/generated/templates/FilterMenuTemplate.lit.js.map +1 -1
- package/dist/generated/templates/FooterTemplate.lit.js +15 -15
- package/dist/generated/templates/FooterTemplate.lit.js.map +1 -1
- package/dist/generated/templates/HeroBannerTemplate.lit.js +2 -2
- package/dist/generated/templates/HeroBannerTemplate.lit.js.map +1 -1
- package/dist/generated/templates/InputGroupTemplate.lit.d.ts +4 -0
- package/dist/generated/templates/InputGroupTemplate.lit.js +7 -0
- package/dist/generated/templates/InputGroupTemplate.lit.js.map +1 -0
- package/dist/generated/templates/ListGroupHeaderTemplate.lit.js +4 -4
- package/dist/generated/templates/ListGroupHeaderTemplate.lit.js.map +1 -1
- package/dist/generated/templates/ListItemTemplate.lit.js +1 -1
- package/dist/generated/templates/ListItemTemplate.lit.js.map +1 -1
- package/dist/generated/templates/ListSelectAllTemplate.lit.js +1 -1
- package/dist/generated/templates/ListSelectAllTemplate.lit.js.map +1 -1
- package/dist/generated/templates/MastheadMobileMenuTemplate.lit.js +15 -10
- package/dist/generated/templates/MastheadMobileMenuTemplate.lit.js.map +1 -1
- package/dist/generated/templates/MastheadProfileMenuTemplate.lit.js +1 -1
- package/dist/generated/templates/MastheadProfileMenuTemplate.lit.js.map +1 -1
- package/dist/generated/templates/SearchSuggestionsTemplate.lit.js +11 -10
- package/dist/generated/templates/SearchSuggestionsTemplate.lit.js.map +1 -1
- package/dist/generated/templates/SearchTemplate.lit.js +11 -10
- package/dist/generated/templates/SearchTemplate.lit.js.map +1 -1
- package/dist/generated/templates/SearchableListBaseTemplate.lit.js +2 -2
- package/dist/generated/templates/SearchableListBaseTemplate.lit.js.map +1 -1
- package/dist/generated/templates/SecondaryNavigationItemTemplate.lit.d.ts +4 -0
- package/dist/generated/templates/SecondaryNavigationItemTemplate.lit.js +11 -0
- package/dist/generated/templates/SecondaryNavigationItemTemplate.lit.js.map +1 -0
- package/dist/generated/templates/SecondaryNavigationSubItemTemplate.lit.d.ts +4 -0
- package/dist/generated/templates/SecondaryNavigationSubItemTemplate.lit.js +9 -0
- package/dist/generated/templates/SecondaryNavigationSubItemTemplate.lit.js.map +1 -0
- package/dist/generated/templates/SecondaryNavigationTemplate.lit.js +7 -9
- package/dist/generated/templates/SecondaryNavigationTemplate.lit.js.map +1 -1
- package/dist/generated/templates/SelectBoxTemplate.lit.js +1 -1
- package/dist/generated/templates/SelectBoxTemplate.lit.js.map +1 -1
- package/dist/generated/templates/StatusBadgeTemplate.lit.d.ts +4 -0
- package/dist/generated/templates/StatusBadgeTemplate.lit.js +5 -0
- package/dist/generated/templates/StatusBadgeTemplate.lit.js.map +1 -0
- package/dist/generated/themes/AccordionItem.css.js +1 -1
- package/dist/generated/themes/AccordionItem.css.js.map +1 -1
- package/dist/generated/themes/Avatar.css.js +1 -1
- package/dist/generated/themes/Avatar.css.js.map +1 -1
- package/dist/generated/themes/Breadcrumbs.css.js +1 -1
- package/dist/generated/themes/Breadcrumbs.css.js.map +1 -1
- package/dist/generated/themes/Checkbox.css.js +1 -1
- package/dist/generated/themes/Checkbox.css.js.map +1 -1
- package/dist/generated/themes/CountrySelector.css.js +1 -1
- package/dist/generated/themes/CountrySelector.css.js.map +1 -1
- package/dist/generated/themes/DatePicker.css.js +1 -1
- package/dist/generated/themes/DatePicker.css.js.map +1 -1
- package/dist/generated/themes/Dropdown.css.js +1 -1
- package/dist/generated/themes/Dropdown.css.js.map +1 -1
- package/dist/generated/themes/FilterMenu.css.js +1 -1
- package/dist/generated/themes/FilterMenu.css.js.map +1 -1
- package/dist/generated/themes/HeroBanner.css.js +1 -1
- package/dist/generated/themes/HeroBanner.css.js.map +1 -1
- package/dist/generated/themes/InputGroup.css.d.ts +3 -0
- package/dist/generated/themes/InputGroup.css.js +9 -0
- package/dist/generated/themes/InputGroup.css.js.map +1 -0
- package/dist/generated/themes/MastheadItem.css.js +1 -1
- package/dist/generated/themes/MastheadItem.css.js.map +1 -1
- package/dist/generated/themes/MastheadMenuItem.css.js +1 -1
- package/dist/generated/themes/MastheadMenuItem.css.js.map +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/MediaPlayer.css.js +1 -1
- package/dist/generated/themes/MediaPlayer.css.js.map +1 -1
- package/dist/generated/themes/PhoneNumberField.css.js +1 -1
- package/dist/generated/themes/PhoneNumberField.css.js.map +1 -1
- package/dist/generated/themes/RatingIndicator.css.js +1 -1
- package/dist/generated/themes/RatingIndicator.css.js.map +1 -1
- package/dist/generated/themes/Search.css.js +1 -1
- package/dist/generated/themes/Search.css.js.map +1 -1
- package/dist/generated/themes/SearchSuggestions.css.js +1 -1
- package/dist/generated/themes/SearchSuggestions.css.js.map +1 -1
- package/dist/generated/themes/SecondaryNavigation.css.js +1 -1
- package/dist/generated/themes/SecondaryNavigation.css.js.map +1 -1
- package/dist/generated/themes/SecondaryNavigationItem.css.d.ts +3 -0
- package/dist/generated/themes/SecondaryNavigationItem.css.js +9 -0
- package/dist/generated/themes/SecondaryNavigationItem.css.js.map +1 -0
- package/dist/generated/themes/SecondaryNavigationSubItem.css.d.ts +3 -0
- package/dist/generated/themes/SecondaryNavigationSubItem.css.js +9 -0
- package/dist/generated/themes/SecondaryNavigationSubItem.css.js.map +1 -0
- package/dist/generated/themes/Slider.css.js +1 -1
- package/dist/generated/themes/Slider.css.js.map +1 -1
- package/dist/generated/themes/StatusBadge.css.d.ts +3 -0
- package/dist/generated/themes/StatusBadge.css.js +9 -0
- package/dist/generated/themes/StatusBadge.css.js.map +1 -0
- package/dist/generated/themes/Tag.css.js +1 -1
- package/dist/generated/themes/Tag.css.js.map +1 -1
- package/dist/generated/themes/TextField.css.js +1 -1
- package/dist/generated/themes/TextField.css.js.map +1 -1
- package/dist/i18n/messagebundle.properties +12 -1
- package/dist/i18n/messagebundle_en.properties +8 -1
- package/dist/types/callback.d.ts +2 -0
- package/dist/types/callback.js +2 -0
- package/dist/types/callback.js.map +1 -0
- package/dist/utils/debounce.d.ts +2 -2
- package/dist/utils/debounce.js.map +1 -1
- package/dist/utils/retryUntilSuccessful.d.ts +3 -0
- package/dist/utils/retryUntilSuccessful.js +21 -0
- package/dist/utils/retryUntilSuccessful.js.map +1 -0
- package/dist/vscode.html-custom-data.json +178 -14
- package/dist/web-types.json +406 -32
- package/package.json +1 -1
- package/src/AccordionItem.hbs +12 -1
- package/src/AccordionItem.ts +11 -2
- package/src/Avatar.ts +12 -3
- package/src/CountrySelector.hbs +3 -3
- package/src/CountrySelector.ts +22 -21
- package/src/Dropdown.hbs +0 -1
- package/src/Dropdown.ts +10 -0
- package/src/FilterMenu.hbs +5 -1
- package/src/FilterMenu.ts +60 -10
- package/src/Footer.hbs +154 -91
- package/src/Footer.ts +158 -1
- package/src/HeroBanner.hbs +24 -21
- package/src/InputGroup.hbs +20 -0
- package/src/InputGroup.ts +137 -0
- package/src/List.ts +92 -21
- package/src/ListGroupHeader.hbs +9 -5
- package/src/ListItem.hbs +2 -1
- package/src/ListItem.ts +0 -7
- package/src/ListItemBase.ts +14 -0
- package/src/ListSelectAll.hbs +1 -0
- package/src/MastheadMobileMenu.hbs +51 -28
- package/src/MastheadMobileMenu.ts +12 -3
- package/src/MastheadProfileMenu.hbs +1 -1
- package/src/PhoneNumberField.ts +27 -3
- package/src/Search.hbs +26 -3
- package/src/Search.ts +236 -21
- package/src/SearchSuggestions.hbs +47 -49
- package/src/SearchableListBase.hbs +2 -0
- package/src/SecondaryNavigation.hbs +52 -72
- package/src/SecondaryNavigation.ts +182 -186
- package/src/SecondaryNavigationItem.hbs +63 -0
- package/src/SecondaryNavigationItem.ts +358 -0
- package/src/SecondaryNavigationItemBase.ts +115 -0
- package/src/SecondaryNavigationSubItem.hbs +41 -0
- package/src/SecondaryNavigationSubItem.ts +123 -0
- package/src/SelectBox.hbs +1 -0
- package/src/SelectBox.ts +38 -1
- package/src/StatusBadge.hbs +9 -0
- package/src/StatusBadge.ts +129 -0
- package/src/Tab.ts +1 -1
- package/src/Table.ts +7 -7
- package/src/Tag.ts +12 -3
- package/src/TextArea.ts +1 -1
- package/src/features/SearchSuggestionsPopover.ts +18 -20
- package/src/generated/i18n/i18n-defaults.ts +2 -2
- package/src/generated/templates/AccordionItemTemplate.lit.ts +2 -1
- package/src/generated/templates/CountrySelectorTemplate.lit.ts +1 -1
- package/src/generated/templates/DropdownTemplate.lit.ts +1 -1
- package/src/generated/templates/FilterMenuTemplate.lit.ts +3 -3
- package/src/generated/templates/FooterTemplate.lit.ts +15 -15
- package/src/generated/templates/HeroBannerTemplate.lit.ts +2 -2
- package/src/generated/templates/InputGroupTemplate.lit.ts +12 -0
- package/src/generated/templates/ListGroupHeaderTemplate.lit.ts +4 -4
- package/src/generated/templates/ListItemTemplate.lit.ts +1 -1
- package/src/generated/templates/ListSelectAllTemplate.lit.ts +1 -1
- package/src/generated/templates/MastheadMobileMenuTemplate.lit.ts +15 -10
- package/src/generated/templates/MastheadProfileMenuTemplate.lit.ts +1 -1
- package/src/generated/templates/SearchSuggestionsTemplate.lit.ts +11 -10
- package/src/generated/templates/SearchTemplate.lit.ts +10 -9
- package/src/generated/templates/SearchableListBaseTemplate.lit.ts +2 -2
- package/src/generated/templates/SecondaryNavigationItemTemplate.lit.ts +16 -0
- package/src/generated/templates/SecondaryNavigationSubItemTemplate.lit.ts +14 -0
- package/src/generated/templates/SecondaryNavigationTemplate.lit.ts +7 -9
- package/src/generated/templates/SelectBoxTemplate.lit.ts +1 -1
- package/src/generated/templates/StatusBadgeTemplate.lit.ts +10 -0
- package/src/generated/themes/AccordionItem.css.ts +1 -1
- package/src/generated/themes/Avatar.css.ts +1 -1
- package/src/generated/themes/Breadcrumbs.css.ts +1 -1
- package/src/generated/themes/Checkbox.css.ts +1 -1
- package/src/generated/themes/CountrySelector.css.ts +1 -1
- package/src/generated/themes/DatePicker.css.ts +1 -1
- package/src/generated/themes/Dropdown.css.ts +1 -1
- package/src/generated/themes/FilterMenu.css.ts +1 -1
- package/src/generated/themes/HeroBanner.css.ts +1 -1
- package/src/generated/themes/InputGroup.css.ts +13 -0
- package/src/generated/themes/MastheadItem.css.ts +1 -1
- package/src/generated/themes/MastheadMenuItem.css.ts +1 -1
- package/src/generated/themes/MastheadShell.css.ts +1 -1
- package/src/generated/themes/MediaPlayer.css.ts +1 -1
- package/src/generated/themes/PhoneNumberField.css.ts +1 -1
- package/src/generated/themes/RatingIndicator.css.ts +1 -1
- package/src/generated/themes/Search.css.ts +1 -1
- package/src/generated/themes/SearchSuggestions.css.ts +1 -1
- package/src/generated/themes/SecondaryNavigation.css.ts +1 -1
- package/src/generated/themes/SecondaryNavigationItem.css.ts +13 -0
- package/src/generated/themes/SecondaryNavigationSubItem.css.ts +13 -0
- package/src/generated/themes/Slider.css.ts +1 -1
- package/src/generated/themes/StatusBadge.css.ts +13 -0
- package/src/generated/themes/Tag.css.ts +1 -1
- package/src/generated/themes/TextField.css.ts +1 -1
- package/src/i18n/messagebundle.properties +12 -1
- package/src/i18n/messagebundle_en.properties +8 -1
- package/src/themes/AccordionItem.css +20 -15
- package/src/themes/Avatar.css +20 -0
- package/src/themes/Breadcrumbs.css +4 -2
- package/src/themes/Checkbox.css +12 -0
- package/src/themes/CountrySelector.css +16 -1
- package/src/themes/DatePicker.css +1 -1
- package/src/themes/Dropdown.css +3 -1
- package/src/themes/FilterMenu.css +10 -0
- package/src/themes/HeroBanner.css +42 -6
- package/src/themes/InputGroup.css +19 -0
- package/src/themes/MastheadItem.css +2 -7
- package/src/themes/MastheadMenuItem.css +0 -4
- package/src/themes/MastheadShell.css +9 -10
- package/src/themes/MediaPlayer.css +3 -2
- package/src/themes/PhoneNumberField.css +17 -3
- package/src/themes/Search.css +168 -21
- package/src/themes/SearchSuggestions.css +7 -1
- package/src/themes/SecondaryNavigation.css +44 -302
- package/src/themes/SecondaryNavigationItem.css +220 -0
- package/src/themes/SecondaryNavigationSubItem.css +118 -0
- package/src/themes/StatusBadge.css +135 -0
- package/src/themes/Tag.css +6 -1
- package/src/themes/TextField.css +10 -1
- package/src/types/callback.ts +3 -0
- package/src/utils/debounce.ts +1 -1
- package/src/utils/retryUntilSuccessful.ts +23 -0
- package/dist/assets/messagebundle_en-26cd7a92.js +0 -1
|
@@ -4,16 +4,14 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
|
|
|
4
4
|
import type SecondaryNavigation from "../../SecondaryNavigation.js";
|
|
5
5
|
import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
|
|
6
6
|
|
|
7
|
-
function block0 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="
|
|
7
|
+
function block0 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-secondary-navigation__root">${ this.hasBreadcrumbsSlot ? block1.call(this, context, tags, suffix) : undefined }<div class="udex-secondary-navigation__holder"><div class="udex-secondary-navigation__heading">${ this.titleHref.length ? block2.call(this, context, tags, suffix) : block3.call(this, context, tags, suffix) }</div><div class="udex-secondary-navigation__wrap"><ul role="menubar" class="udex-secondary-navigation__list" @keydown="${this.handleKeyDown}">${ repeat(this.visibleItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block4.call(this, context, tags, suffix, item, index)) }${ this._showMoreButton ? block5.call(this, context, tags, suffix) : undefined }</ul>${ this.hasDesktopButtonsSlot ? block6.call(this, context, tags, suffix) : undefined }</div></div><${scopeTag("udex-secondary-navigation-item", tags, suffix)} class="udex-secondary-navigation__mobile-nav" role="button" aria-label="${ifDefined(this.mobileMenuOpenerAriaLabel)}" label="${ifDefined(this.title)}" @ui5-sub-item-click="${ifDefined(this.handleSubItemClick)}" .subItems="${ifDefined(this.parsedItems)}">${ this.hasMobileButtonsSlot ? block7.call(this, context, tags, suffix) : undefined }</${scopeTag("udex-secondary-navigation-item", tags, suffix)}></div> ` : html`<div class="udex-secondary-navigation__root">${ this.hasBreadcrumbsSlot ? block1.call(this, context, tags, suffix) : undefined }<div class="udex-secondary-navigation__holder"><div class="udex-secondary-navigation__heading">${ this.titleHref.length ? block2.call(this, context, tags, suffix) : block3.call(this, context, tags, suffix) }</div><div class="udex-secondary-navigation__wrap"><ul role="menubar" class="udex-secondary-navigation__list" @keydown="${this.handleKeyDown}">${ repeat(this.visibleItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block4.call(this, context, tags, suffix, item, index)) }${ this._showMoreButton ? block5.call(this, context, tags, suffix) : undefined }</ul>${ this.hasDesktopButtonsSlot ? block6.call(this, context, tags, suffix) : undefined }</div></div><udex-secondary-navigation-item class="udex-secondary-navigation__mobile-nav" role="button" aria-label="${ifDefined(this.mobileMenuOpenerAriaLabel)}" label="${ifDefined(this.title)}" @ui5-sub-item-click="${ifDefined(this.handleSubItemClick)}" .subItems="${ifDefined(this.parsedItems)}">${ this.hasMobileButtonsSlot ? block7.call(this, context, tags, suffix) : undefined }</udex-secondary-navigation-item></div> `;}
|
|
8
8
|
function block1 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-secondary-navigation__breadcrumbs"><slot name="breadcrumbs"></slot></div>`;}
|
|
9
|
-
function block2 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined
|
|
10
|
-
function block3 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined
|
|
11
|
-
function block4 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<
|
|
12
|
-
function block5 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<li role="none" class="
|
|
13
|
-
function block6 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-secondary-
|
|
14
|
-
function block7 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined
|
|
15
|
-
function block8 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<a role="menuitem" href="${ifDefined(item.path)}" target="${ifDefined(item.target)}" class="udex-secondary-navigation__dropdown-item udex-secondary-navigation__link-btn" @click="${this.handleNavigationClick}">${ifDefined(item.title)}</a>`;}
|
|
16
|
-
function block9 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<button role="menuitem" class="udex-secondary-navigation__dropdown-item" @click="${this.handleNavigationClick}">${ifDefined(item.title)}</button>`;}
|
|
9
|
+
function block2 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a class="udex-secondary-navigation__title" href="${ifDefined(this.titleHref)}">${ifDefined(this.title)}</a>`;}
|
|
10
|
+
function block3 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-secondary-navigation__title">${ifDefined(this.title)}</span>`;}
|
|
11
|
+
function block4 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<li role="none" class="udex-secondary-navigation__list-item"><${scopeTag("udex-secondary-navigation-item", tags, suffix)} ?active="${item.active}" path="${ifDefined(item.path)}" label="${ifDefined(item.title)}" target="${ifDefined(item.target)}" .subItems="${ifDefined(item.items)}" @ui5-sub-item-click="${ifDefined(this.handleSubItemClick)}" @ui5-nav-item-click="${ifDefined(this.handleItemClick)}"></${scopeTag("udex-secondary-navigation-item", tags, suffix)}></li>` : html`<li role="none" class="udex-secondary-navigation__list-item"><udex-secondary-navigation-item ?active="${item.active}" path="${ifDefined(item.path)}" label="${ifDefined(item.title)}" target="${ifDefined(item.target)}" .subItems="${ifDefined(item.items)}" @ui5-sub-item-click="${ifDefined(this.handleSubItemClick)}" @ui5-nav-item-click="${ifDefined(this.handleItemClick)}"></udex-secondary-navigation-item></li>`;}
|
|
12
|
+
function block5 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<li role="none" class="udex-secondary-navigation__list-item"><${scopeTag("udex-secondary-navigation-item", tags, suffix)} @ui5-sub-item-click="${ifDefined(this.handleSubItemClick)}" @ui5-nav-item-click="${ifDefined(this.handleItemClick)}" label="${ifDefined(this.moreButtonText)}" .subItems="${ifDefined(this._overflowItems)}"></${scopeTag("udex-secondary-navigation-item", tags, suffix)}></li>` : html`<li role="none" class="udex-secondary-navigation__list-item"><udex-secondary-navigation-item @ui5-sub-item-click="${ifDefined(this.handleSubItemClick)}" @ui5-nav-item-click="${ifDefined(this.handleItemClick)}" label="${ifDefined(this.moreButtonText)}" .subItems="${ifDefined(this._overflowItems)}"></udex-secondary-navigation-item></li>`;}
|
|
13
|
+
function block6 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-secondary-navigation__buttons"><slot name="buttons"></slot></div>`;}
|
|
14
|
+
function block7 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-secondary-navigation__buttons"><slot name="buttons"></slot></div>`;}
|
|
17
15
|
|
|
18
16
|
|
|
19
17
|
export default block0;
|
|
@@ -4,7 +4,7 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
|
|
|
4
4
|
import type SelectBox from "../../SelectBox.js";
|
|
5
5
|
import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
|
|
6
6
|
|
|
7
|
-
function block0 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-select-box__root"><div class="udex-text-field__container"><div @click="${this.getHandleSingleSelectOpen}" class="udex-text-field__input" @ui5-iconClick="${ifDefined(this.handleRemoveTag)}" @keydown="${this.handleKeyDownTrigger}" ?open="${this._open}" tabindex="${ifDefined(this.effectiveTabIndex)}" @focusin="${this.handleFocusIn}" @focusout="${this.handleFocusOut}" ?disabled="${this.disabled}" ?displayonly="${this.displayonly}" ?readonly="${this.readonly}" role="combobox" aria-label="${ifDefined(this.accInfo.ariaLabel)}" aria-labelledby="${ifDefined(this.accInfo.ariaLabelledBy)}" aria-readonly="${ifDefined(this.isReadOrDisplayOnly)}" aria-disabled="${ifDefined(this.disabled)}" aria-haspopup="listbox" aria-controls="udex-select-box__dropdown" aria-expanded="${ifDefined(this.tokenizerExpanded)}" aria-activedescendant>${ this.label ? block1.call(this, context, tags, suffix) : undefined }${ this.showSingleSelectedOption ? block3.call(this, context, tags, suffix) : undefined }${ this.showMultiSelectedOptions ? block4.call(this, context, tags, suffix) : undefined }${ this.showTrigger ? block7.call(this, context, tags, suffix) : undefined }</div>${ this.supportingText ? block8.call(this, context, tags, suffix) : undefined }</div><${scopeTag("udex-dropdown", tags, suffix)} id="udex-select-box__dropdown" class="udex-select-box__dropdown" ?disable-target-overlap="${this.disableTargetOverlap}" @keydown="${this.handleKeyDownDropdown}" @ui5-select-all="${ifDefined(this.handleSelectAll)}" @ui5-item-press="${ifDefined(this.handleItemPress)}" @ui5-header-press="${ifDefined(this.handleHeaderPress)}" @ui5-submit-search-value="${ifDefined(this.handleSubmitSearch)}" @ui5-handle-value-search="${ifDefined(this.handleValueSearch)}" @ui5-handle-value-reset="${ifDefined(this.handleResetSearch)}" @before-open="${this.handleDropdownBeforeOpen}" @after-close="${this.handleDropdownAfterClose}" height="${ifDefined(this.height)}" accessible-role="Dialog" horizontal-align="Left">${ this._showTagsDropdownContent ? block9.call(this, context, tags, suffix) : block10.call(this, context, tags, suffix) }</${scopeTag("udex-dropdown", tags, suffix)}>${ this.displayonly ? block11.call(this, context, tags, suffix) : undefined }</div>` : html`<div class="udex-select-box__root"><div class="udex-text-field__container"><div @click="${this.getHandleSingleSelectOpen}" class="udex-text-field__input" @ui5-iconClick="${ifDefined(this.handleRemoveTag)}" @keydown="${this.handleKeyDownTrigger}" ?open="${this._open}" tabindex="${ifDefined(this.effectiveTabIndex)}" @focusin="${this.handleFocusIn}" @focusout="${this.handleFocusOut}" ?disabled="${this.disabled}" ?displayonly="${this.displayonly}" ?readonly="${this.readonly}" role="combobox" aria-label="${ifDefined(this.accInfo.ariaLabel)}" aria-labelledby="${ifDefined(this.accInfo.ariaLabelledBy)}" aria-readonly="${ifDefined(this.isReadOrDisplayOnly)}" aria-disabled="${ifDefined(this.disabled)}" aria-haspopup="listbox" aria-controls="udex-select-box__dropdown" aria-expanded="${ifDefined(this.tokenizerExpanded)}" aria-activedescendant>${ this.label ? block1.call(this, context, tags, suffix) : undefined }${ this.showSingleSelectedOption ? block3.call(this, context, tags, suffix) : undefined }${ this.showMultiSelectedOptions ? block4.call(this, context, tags, suffix) : undefined }${ this.showTrigger ? block7.call(this, context, tags, suffix) : undefined }</div>${ this.supportingText ? block8.call(this, context, tags, suffix) : undefined }</div><udex-dropdown id="udex-select-box__dropdown" class="udex-select-box__dropdown" ?disable-target-overlap="${this.disableTargetOverlap}" @keydown="${this.handleKeyDownDropdown}" @ui5-select-all="${ifDefined(this.handleSelectAll)}" @ui5-item-press="${ifDefined(this.handleItemPress)}" @ui5-header-press="${ifDefined(this.handleHeaderPress)}" @ui5-submit-search-value="${ifDefined(this.handleSubmitSearch)}" @ui5-handle-value-search="${ifDefined(this.handleValueSearch)}" @ui5-handle-value-reset="${ifDefined(this.handleResetSearch)}" @before-open="${this.handleDropdownBeforeOpen}" @after-close="${this.handleDropdownAfterClose}" height="${ifDefined(this.height)}" accessible-role="Dialog" horizontal-align="Left">${ this._showTagsDropdownContent ? block9.call(this, context, tags, suffix) : block10.call(this, context, tags, suffix) }</udex-dropdown>${ this.displayonly ? block11.call(this, context, tags, suffix) : undefined }</div>`;}
|
|
7
|
+
function block0 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-select-box__root"><div class="udex-text-field__container"><div @click="${this.getHandleSingleSelectOpen}" class="udex-text-field__input" @ui5-iconClick="${ifDefined(this.handleRemoveTag)}" @keydown="${this.handleKeyDownTrigger}" ?open="${this._open}" tabindex="${ifDefined(this.effectiveTabIndex)}" @focusin="${this.handleFocusIn}" @focusout="${this.handleFocusOut}" ?disabled="${this.disabled}" ?displayonly="${this.displayonly}" ?readonly="${this.readonly}" role="combobox" aria-label="${ifDefined(this.accInfo.ariaLabel)}" aria-labelledby="${ifDefined(this.accInfo.ariaLabelledBy)}" aria-readonly="${ifDefined(this.isReadOrDisplayOnly)}" aria-disabled="${ifDefined(this.disabled)}" aria-haspopup="listbox" aria-controls="udex-select-box__dropdown" aria-expanded="${ifDefined(this.tokenizerExpanded)}" aria-activedescendant>${ this.label ? block1.call(this, context, tags, suffix) : undefined }${ this.showSingleSelectedOption ? block3.call(this, context, tags, suffix) : undefined }${ this.showMultiSelectedOptions ? block4.call(this, context, tags, suffix) : undefined }${ this.showTrigger ? block7.call(this, context, tags, suffix) : undefined }</div>${ this.supportingText ? block8.call(this, context, tags, suffix) : undefined }</div><${scopeTag("udex-dropdown", tags, suffix)} id="udex-select-box__dropdown" class="udex-select-box__dropdown" ?disable-target-overlap="${this.disableTargetOverlap}" @keydown="${this.handleKeyDownDropdown}" @ui5-select-all="${ifDefined(this.handleSelectAll)}" @ui5-item-press="${ifDefined(this.handleItemPress)}" @ui5-header-press="${ifDefined(this.handleHeaderPress)}" @ui5-submit-search-value="${ifDefined(this.handleSubmitSearch)}" @ui5-handle-value-search="${ifDefined(this.handleValueSearch)}" @ui5-handle-value-reset="${ifDefined(this.handleResetSearch)}" @before-open="${this.handleDropdownBeforeOpen}" @after-close="${this.handleDropdownAfterClose}" @search-keydown="${this.handleKeyDownSearch}" height="${ifDefined(this.height)}" accessible-role="Dialog" horizontal-align="Left">${ this._showTagsDropdownContent ? block9.call(this, context, tags, suffix) : block10.call(this, context, tags, suffix) }</${scopeTag("udex-dropdown", tags, suffix)}>${ this.displayonly ? block11.call(this, context, tags, suffix) : undefined }</div>` : html`<div class="udex-select-box__root"><div class="udex-text-field__container"><div @click="${this.getHandleSingleSelectOpen}" class="udex-text-field__input" @ui5-iconClick="${ifDefined(this.handleRemoveTag)}" @keydown="${this.handleKeyDownTrigger}" ?open="${this._open}" tabindex="${ifDefined(this.effectiveTabIndex)}" @focusin="${this.handleFocusIn}" @focusout="${this.handleFocusOut}" ?disabled="${this.disabled}" ?displayonly="${this.displayonly}" ?readonly="${this.readonly}" role="combobox" aria-label="${ifDefined(this.accInfo.ariaLabel)}" aria-labelledby="${ifDefined(this.accInfo.ariaLabelledBy)}" aria-readonly="${ifDefined(this.isReadOrDisplayOnly)}" aria-disabled="${ifDefined(this.disabled)}" aria-haspopup="listbox" aria-controls="udex-select-box__dropdown" aria-expanded="${ifDefined(this.tokenizerExpanded)}" aria-activedescendant>${ this.label ? block1.call(this, context, tags, suffix) : undefined }${ this.showSingleSelectedOption ? block3.call(this, context, tags, suffix) : undefined }${ this.showMultiSelectedOptions ? block4.call(this, context, tags, suffix) : undefined }${ this.showTrigger ? block7.call(this, context, tags, suffix) : undefined }</div>${ this.supportingText ? block8.call(this, context, tags, suffix) : undefined }</div><udex-dropdown id="udex-select-box__dropdown" class="udex-select-box__dropdown" ?disable-target-overlap="${this.disableTargetOverlap}" @keydown="${this.handleKeyDownDropdown}" @ui5-select-all="${ifDefined(this.handleSelectAll)}" @ui5-item-press="${ifDefined(this.handleItemPress)}" @ui5-header-press="${ifDefined(this.handleHeaderPress)}" @ui5-submit-search-value="${ifDefined(this.handleSubmitSearch)}" @ui5-handle-value-search="${ifDefined(this.handleValueSearch)}" @ui5-handle-value-reset="${ifDefined(this.handleResetSearch)}" @before-open="${this.handleDropdownBeforeOpen}" @after-close="${this.handleDropdownAfterClose}" @search-keydown="${this.handleKeyDownSearch}" height="${ifDefined(this.height)}" accessible-role="Dialog" horizontal-align="Left">${ this._showTagsDropdownContent ? block9.call(this, context, tags, suffix) : block10.call(this, context, tags, suffix) }</udex-dropdown>${ this.displayonly ? block11.call(this, context, tags, suffix) : undefined }</div>`;}
|
|
8
8
|
function block1 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="${ifDefined(this.labelClass)}">${ifDefined(this.label)}${ this.required ? block2.call(this, context, tags, suffix) : undefined }</span>`;}
|
|
9
9
|
function block2 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined) { return html` * `;}
|
|
10
10
|
function block3 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-text-field__text-holder"><span class="udex-text-field__single-label">${unsafeHTML(this._singleSelectedOption)}</span></div>`;}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/* eslint no-unused-vars: 0 */
|
|
2
|
+
import { html, svg, repeat, classMap, styleMap, ifDefined, unsafeHTML, scopeTag } from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
|
|
3
|
+
import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
|
|
4
|
+
import type StatusBadge from "../../StatusBadge.js";
|
|
5
|
+
import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
|
|
6
|
+
|
|
7
|
+
function block0 (this: StatusBadge, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-status-badge" title="${ifDefined(this.ariaTitle)}"><${scopeTag("ui5-icon", tags, suffix)} name="${ifDefined(this.iconFieldName)}" class="udex-status-badge__icon" accessible-name="${ifDefined(this.badgeAccessibleName)}"></${scopeTag("ui5-icon", tags, suffix)}></div>` : html`<div class="udex-status-badge" title="${ifDefined(this.ariaTitle)}"><ui5-icon name="${ifDefined(this.iconFieldName)}" class="udex-status-badge__icon" accessible-name="${ifDefined(this.badgeAccessibleName)}"></ui5-icon></div>`;}
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
export default block0;
|
|
@@ -7,7 +7,7 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
|
|
|
7
7
|
registerThemePropertiesLoader("@ui5/webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
|
|
8
8
|
registerThemePropertiesLoader("@sapudex/web-components", "sap_horizon", async () => defaultTheme);
|
|
9
9
|
|
|
10
|
-
const styleData: StyleData = {packageName:"@sapudex/web-components",fileName:"themes/AccordionItem.css.ts",content:`:host{--udex-accordion-icon-color: var(--sapContent_MarkerIconColor, var(--udexColorBlue9));--udex-accordion-headline-color: var(--sapTextColor, var(--udexCoreTextDark));--udex-accordion-headline-font-size: var(--sapFontHeader5Size, var(--udexTypographyHeadingMediumXXXSFontSize, 18px));--udex-accordion-title-font-weight: var(--udexTypographyFontWeightMedium, 500);--udex-accordion-border-color: var(--sapList_BorderColor, var(--udexColorGrey4));--udex-accordion-border-width: .5px;--udex-accordion-item-header-padding: 12px 12px 12px 8px;--udex-accordion-item-content-margin: var(--udexSpacer12, 12px) var(--udexSpacer16, 16px);font-family:var(--sapFontFamily, sans-serif);font-size:var(--sapProgress_FontSize, 16px)}.udex-accordion-item{list-style-type:none}.udex-accordion-item__header{align-items:center;color:var(--udex-accordion-headline-color);display:flex;font-size:var(--udex-accordion-headline-font-size);gap:var(--udexSpacer12, 12px);padding:var(--udex-accordion-item-header-padding);line-height:var(--udexTypographyHeadingLineHeight, 1.1);border-bottom:var(--udex-accordion-border-width) solid var(--udex-accordion-border-color);cursor:pointer}:host([desktop]) .udex-accordion-item__header:focus,.udex-accordion-item__header:focus-visible{outline:2px solid #002A86;border-radius:8px}.udex-accordion-item__icon{height:var(--udex-button-icon-l-size, 18px);width:var(--udex-button-icon-l-size, 18px);color:var(--udex-accordion-icon-color);transform:rotate(0)}.udex-accordion-item__icon-wrapper{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center}.rtl .udex-accordion-item__icon{transform:rotate(0)}.active .udex-accordion-item__icon{transform:rotate(90deg)}.rtl.active .udex-accordion-item__icon{transform:rotate(-90deg)}.udex-accordion-item__title{
|
|
10
|
+
const styleData: StyleData = {packageName:"@sapudex/web-components",fileName:"themes/AccordionItem.css.ts",content:`:host{--udex-accordion-item-icon-color: var(--sapContent_MarkerIconColor, var(--udexColorBlue9));--udex-accordion-item-headline-color: var(--sapTextColor, var(--udexCoreTextDark));--udex-accordion-item-headline-font-size: var(--sapFontHeader5Size, var(--udexTypographyHeadingMediumXXXSFontSize, 18px));--udex-accordion-item-title-font-weight: var(--udexTypographyFontWeightMedium, 500);--udex-accordion-item-border-color: var(--sapList_BorderColor, var(--udexColorGrey4));--udex-accordion-item-border-width: .5px;--udex-accordion-item-header-padding: 12px 12px 12px 8px;--udex-accordion-item-content-margin: var(--udexSpacer12, 12px) var(--udexSpacer16, 16px);font-family:var(--sapFontFamily, sans-serif);font-size:var(--sapProgress_FontSize, 16px)}.udex-accordion-item{list-style-type:none}.udex-accordion-item__header{align-items:center;color:var(--udex-accordion-item-headline-color);display:flex;font-size:var(--udex-accordion-item-headline-font-size);gap:var(--udexSpacer12, 12px);padding:var(--udex-accordion-item-header-padding);line-height:var(--udexTypographyHeadingLineHeight, 1.1);border-bottom:var(--udex-accordion-item-border-width) solid var(--udex-accordion-item-border-color);cursor:pointer}:host([desktop]) .udex-accordion-item__header:focus,.udex-accordion-item__header:focus-visible{outline:2px solid var(--udexColorBlue10, #002A86);border-radius:var(--udexRadiusM, 8px)}.udex-accordion-item__icon{height:var(--udex-button-icon-l-size, 18px);width:var(--udex-button-icon-l-size, 18px);color:var(--udex-accordion-item-icon-color);transform:rotate(0)}.udex-accordion-item__icon-wrapper{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center}.rtl .udex-accordion-item__icon{transform:rotate(0)}.active .udex-accordion-item__icon{transform:rotate(90deg)}.rtl.active .udex-accordion-item__icon{transform:rotate(-90deg)}.udex-accordion-item__title{font-weight:var(--udex-accordion-item-title-font-weight);align-items:center;display:flex}.udex-accordion-item__content{display:none;margin:var(--udex-accordion-item-content-margin)}.active.udex-accordion-item{border:none}.active .udex-accordion-item__content{display:block}.udex-accordion-item__badge{display:inline-flex;margin-inline-start:var(--udexSpacer8)}
|
|
11
11
|
`};
|
|
12
12
|
export default styleData;
|
|
13
13
|
|
|
@@ -7,7 +7,7 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
|
|
|
7
7
|
registerThemePropertiesLoader("@ui5/webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
|
|
8
8
|
registerThemePropertiesLoader("@sapudex/web-components", "sap_horizon", async () => defaultTheme);
|
|
9
9
|
|
|
10
|
-
const styleData: StyleData = {packageName:"@sapudex/web-components",fileName:"themes/Avatar.css.ts",content:`:host{--udex-avatar-badge-size-background-xs-and-s-and-m: 18px;--udex-avatar-badge-size-background-l: 20px;--udex-avatar-badge-size-background-xl: 28px;--udex-avatar-badge-size-icon-xs-and-s-and-m: 12px;--udex-avatar-badge-size-icon-l: 14px;--udex-avatar-badge-size-icon-xl: 16px;--udex-avatar-size-xs: 32px;--udex-avatar-size-s: 48px;--udex-avatar-size-m: 64px;--udex-avatar-size-l: 84px;--udex-avatar-size-xl: 120px;--udex-avatar-font-size-xs: 12px;--udex-avatar-font-size-s: 18px;--udex-avatar-font-size-m: 24px;--udex-avatar-font-size-l: 32px;--udex-avatar-font-size-xl: 48px;--udex-avatar-icon-size-xs: 16px;--udex-avatar-icon-size-s: 18px;--udex-avatar-icon-size-m: 24px;--udex-avatar-icon-size-l: 36px;--udex-avatar-icon-size-xl: 52px;--udex-avatar-radius-xs: var(--udexRadiusXS, 4px);--udex-avatar-radius-s: var(--udexRadiusXS, 4px);--udex-avatar-radius-m: var(--udexRadiusM, 8px);--udex-avatar-radius-l: var(--udexRadiusM, 8px);--udex-avatar-radius-xl: var(--udexRadiusXL, 16px);--udex-avatar-image-default-border-color: var(--udexColorGrey2, #EAECEE);--udex-avatar-image-hover-border-color: var(--udexColorGrey7, #475E75);--udex-avatar-blue-default-background-color: var(--sapAvatar_6_Background, var(--udexColorBlue2));--udex-avatar-blue-default-border-color: var(--sapAvatar_6_Background, var(--udexColorBlue2));--udex-avatar-blue-default-icon-color: var(--sapAvatar_6_TextColor, var(--udexColorBlue7));--udex-avatar-blue-hover-backgound-color: var(--sapAvatar_6_Background, var(--udexColorBlue2));--udex-avatar-blue-hover-border-color: var(--sapAvatar_6_TextColor, var(--udexColorBlue7));--udex-avatar-blue-hover-icon-color: var(--sapAvatar_6_TextColor, var(--udexColorBlue7));--udex-avatar-mango-default-background-color: var(--sapAvatar_1_Background, var(--udexColorMango2));--udex-avatar-mango-default-border-color: var(--sapAvatar_1_Background, var(--udexColorMango2));--udex-avatar-mango-default-icon-color: var(--sapAvatar_1_TextColor, var(--udexColorMango7));--udex-avatar-mango-hover-backgound-color: var(--sapAvatar_1_Background, var(--udexColorMango2));--udex-avatar-mango-hover-border-color: var(--sapAvatar_1_TextColor, var(--udexColorMango7));--udex-avatar-mango-hover-icon-color: var(--sapAvatar_1_TextColor, var(--udexColorMango7));--udex-avatar-red-default-background-color: var(--sapAvatar_2_Background, var(--udexColorRed2));--udex-avatar-red-default-border-color: var(--sapAvatar_2_Background, var(--udexColorRed2));--udex-avatar-red-default-icon-color: var(--sapAvatar_2_TextColor, var(--udexColorRed7));--udex-avatar-red-hover-backgound-color: var(--sapAvatar_2_Background, var(--udexColorRed2));--udex-avatar-red-hover-border-color: var(--sapAvatar_2_TextColor, var(--udexColorRed7));--udex-avatar-red-hover-icon-color: var(--sapAvatar_2_TextColor, var(--udexColorRed7));--udex-avatar-raspberry-default-background-color: var(--sapAvatar_3_Background, var(--udexColorRaspberry2));--udex-avatar-raspberry-default-border-color: var(--sapAvatar_3_Background, var(--udexColorRaspberry2));--udex-avatar-raspberry-default-icon-color: var(--sapAvatar_3_TextColor, var(--udexColorRaspberry7));--udex-avatar-raspberry-hover-backgound-color: var(--sapAvatar_3_Background, var(--udexColorRaspberry2));--udex-avatar-raspberry-hover-border-color: var(--sapAvatar_3_TextColor, var(--udexColorRaspberry7));--udex-avatar-raspberry-hover-icon-color: var(--sapAvatar_3_TextColor, var(--udexColorRaspberry7));--udex-avatar-pink-default-background-color: var(--sapAvatar_4_Background, var(--udexColorPink2));--udex-avatar-pink-default-border-color: var(--sapAvatar_4_Background, var(--udexColorPink2));--udex-avatar-pink-default-icon-color: var(--sapAvatar_4_TextColor, var(--udexColorPink7));--udex-avatar-pink-hover-backgound-color: var(--sapAvatar_4_Background, var(--udexColorPink2));--udex-avatar-pink-hover-border-color: var(--sapAvatar_4_TextColor, var(--udexColorPink7));--udex-avatar-pink-hover-icon-color: var(--sapAvatar_4_TextColor, var(--udexColorPink7));--udex-avatar-indigo-default-background-color: var(--sapAvatar_5_Background, var(--udexColorIndigo2));--udex-avatar-indigo-default-border-color: var(--sapAvatar_5_Background, var(--udexColorIndigo2));--udex-avatar-indigo-default-icon-color: var(--sapAvatar_5_TextColor, var(--udexColorIndigo7));--udex-avatar-indigo-hover-backgound-color: var(--sapAvatar_5_Background, var(--udexColorIndigo2));--udex-avatar-indigo-hover-border-color: var(--sapAvatar_5_TextColor, var(--udexColorIndigo7));--udex-avatar-indigo-hover-icon-color: var(--sapAvatar_5_TextColor, var(--udexColorIndigo7));--udex-avatar-teal-default-background-color: var(--sapAvatar_7_Background, var(--udexColorTeal2));--udex-avatar-teal-default-border-color: var(--sapAvatar_7_Background, var(--udexColorTeal2));--udex-avatar-teal-default-icon-color: var(--sapAvatar_7_TextColor, var(--udexColorTeal7));--udex-avatar-teal-hover-backgound-color: var(--sapAvatar_7_Background, var(--udexColorTeal2));--udex-avatar-teal-hover-border-color: var(--sapAvatar_7_TextColor, var(--udexColorTeal7));--udex-avatar-teal-hover-icon-color: var(--sapAvatar_7_TextColor, var(--udexColorTeal7));--udex-avatar-green-default-background-color: var(--sapAvatar_8_Background, var(--udexColorGreen2));--udex-avatar-green-default-border-color: var(--sapAvatar_8_Background, var(--udexColorGreen2));--udex-avatar-green-default-icon-color: var(--sapAvatar_8_TextColor, var(--udexColorGreen7));--udex-avatar-green-hover-backgound-color: var(--sapAvatar_8_Background, var(--udexColorGreen2));--udex-avatar-green-hover-border-color: var(--sapAvatar_8_TextColor, var(--udexColorGreen7));--udex-avatar-green-hover-icon-color: var(--sapAvatar_8_TextColor, var(--udexColorGreen7));--udex-avatar-grey-default-background-color: var(--sapAvatar_9_Background, var(--udexColorGrey2));--udex-avatar-grey-default-border-color: var(--sapAvatar_9_Background, var(--udexColorGrey2));--udex-avatar-grey-default-icon-color: var(--sapAvatar_9_TextColor, var(--udexColorGrey7));--udex-avatar-grey-hover-backgound-color: var(--sapAvatar_9_Background, var(--udexColorGrey2));--udex-avatar-grey-hover-border-color: var(--sapAvatar_9_TextColor, var(--udexColorGrey7));--udex-avatar-grey-hover-icon-color: var(--sapAvatar_9_TextColor, var(--udexColorGrey7));--udex-avatar-transparent-default-background-color: hsla(0, 0%, 0%, 0);--udex-avatar-transparent-default-border-color: hsla(0, 0%, 0%, 0);--udex-avatar-transparent-default-icon-color: var(--udexColorGrey9, #223548);--udex-avatar-transparent-hover-backgound-color: hsla(0, 0%, 0%, 0);--udex-avatar-transparent-hover-border-color: var(--udexColorGrey9, #223548);--udex-avatar-transparent-hover-icon-color: var(--udexColorGrey9, #223548);--udex-avatar-neutral-default-background-color: var(--sapAvatar_10_Background, var(--udexColorNeuturalWhite));--udex-avatar-neutral-default-border-color: var(--sapAvatar_10_BorderColor, var(--udexColorGrey3));--udex-avatar-neutral-default-icon-color: var(--sapAvatar_10_TextColor , #0070F2);--udex-avatar-neutral-hover-backgound-color: var(--sapAvatar_10_Background, var(--udexColorNeuturalWhite));--udex-avatar-neutral-hover-border-color: var(, var(--udexColorGrey5, #8396a8));--udex-avatar-neutral-hover-icon-color: var(--sapAvatar_10_TextColor, #0070F2);--udex-avatar-neutral-active-border-color: var(--udexColorBlue9, #0040B0);--udex-avatar-neutral-active-background-color: var(--sapAvatar_10_Background, var(--udexColorNeuturalWhite));--udex-avatar-neutral-active-icon-color: var(--udexColorBlue9, #0040B0)}:host{font-family:var(--sapFontFamily, sans-serif);font-size:var(--sapFontSize, 16px);display:inline-block}:host([interactive]) .udex-avatar:hover{box-shadow:none}:host([color-scheme]) .udex-avatar.udex-avatar--with-image{background-color:#0000;border-color:var(--udex-avatar-image-default-border-color)}:host([color-scheme][interactive]) .udex-avatar.udex-avatar--with-image:hover{border-color:var(--udex-avatar-image-hover-border-color);background-color:#0000}.udex-avatar ::slotted([slot="badge"]){display:flex;justify-content:center;align-items:center}:host([size="XS"]) .udex-avatar ::slotted([slot="badge"]){width:var(--udex-avatar-badge-size-background-xs-and-s-and-m);height:var(--udex-avatar-badge-size-background-xs-and-s-and-m);font-size:var(--udex-avatar-badge-size-icon-xs-and-s-and-m);padding:3px}:host([size="S"]) .udex-avatar ::slotted([slot="badge"]){width:var(--udex-avatar-badge-size-background-xs-and-s-and-m);height:var(--udex-avatar-badge-size-background-xs-and-s-and-m);font-size:var(--udex-avatar-badge-size-icon-xs-and-s-and-m);padding:3px}:host([size="M"]) .udex-avatar ::slotted([slot="badge"]){width:var(--udex-avatar-badge-size-background-xs-and-s-and-m);height:var(--udex-avatar-badge-size-background-xs-and-s-and-m);font-size:var(--udex-avatar-badge-size-icon-xs-and-s-and-m);padding:3px}:host([size="L"]) .udex-avatar ::slotted([slot="badge"]){width:var(--udex-avatar-badge-size-background-l);height:var(--udex-avatar-badge-size-background-l);font-size:var(--udex-avatar-badge-size-icon-l);padding:3px}:host([size="XL"]) .udex-avatar ::slotted([slot="badge"]){width:var(--udex-avatar-badge-size-background-xl);height:var(--udex-avatar-badge-size-background-xl);font-size:var(--udex-avatar-badge-size-icon-xl);padding:6px}:host([size="XS"]) .udex-avatar{width:var(--udex-avatar-size-xs);height:var(--udex-avatar-size-xs);font-size:var(--udex-avatar-font-size-xs)}:host([size="XS"][icon]) .udex-avatar{font-size:var(--udex-avatar-icon-size-xs)}:host([size="S"]) .udex-avatar{width:var(--udex-avatar-size-s);height:var(--udex-avatar-size-s);font-size:var(--udex-avatar-font-size-s)}:host([size="S"][icon]) .udex-avatar{font-size:var(--udex-avatar-icon-size-s)}:host([size="M"]) .udex-avatar{width:var(--udex-avatar-size-m);height:var(--udex-avatar-size-m);font-size:var(--udex-avatar-font-size-m)}:host([size="M"][icon]) .udex-avatar{font-size:var(--udex-avatar-icon-size-m)}:host([size="L"]) .udex-avatar{width:var(--udex-avatar-size-l);height:var(--udex-avatar-size-l);font-size:var(--udex-avatar-font-size-l)}:host([size="L"][icon]) .udex-avatar{font-size:var(--udex-avatar-icon-size-l)}:host([size="XL"]) .udex-avatar{width:var(--udex-avatar-size-xl);height:var(--udex-avatar-size-xl);font-size:var(--udex-avatar-font-size-xl)}:host([size="XL"][icon]) .udex-avatar{font-size:var(--udex-avatar-icon-size-xl)}:host([size="XS"][shape="Square"]) .udex-avatar{border-radius:var(--udex-avatar-radius-xs)}:host([size="XS"][shape="Square"]) .udex-avatar ::slotted(*:not([slot="badge"])){border-radius:var(--udex-avatar-radius-xs)}:host([size="S"][shape="Square"]) .udex-avatar{border-radius:var(--udex-avatar-radius-s)}:host([size="S"][shape="Square"]) .udex-avatar ::slotted(*:not([slot="badge"])){border-radius:var(--udex-avatar-radius-s)}:host([size="M"][shape="Square"]) .udex-avatar{border-radius:var(--udex-avatar-radius-m)}:host([size="M"][shape="Square"]) .udex-avatar ::slotted(*:not([slot="badge"])){border-radius:var(--udex-avatar-radius-m)}:host([size="L"][shape="Square"]) .udex-avatar{border-radius:var(--udex-avatar-radius-l)}:host([size="L"][shape="Square"]) .udex-avatar ::slotted(*:not([slot="badge"])){border-radius:var(--udex-avatar-radius-l)}:host([size="XL"][shape="Square"]) .udex-avatar{border-radius:var(--udex-avatar-radius-xl)}:host([size="XL"][shape="Square"]) .udex-avatar ::slotted(*:not([slot="badge"])){border-radius:var(--udex-avatar-radius-xl)}:host([color-scheme="Blue"]) .udex-avatar{background-color:var(--udex-avatar-blue-default-background-color);color:var(--udex-avatar-blue-default-icon-color);border-color:var(--udex-avatar-blue-default-border-color)}:host([color-scheme="Blue"][interactive]) .udex-avatar:hover{background-color:var(--udex-avatar-blue-default-background-color);border-color:var(--udex-avatar-blue-hover-border-color);color:var(--udex-avatar-blue-default-icon-color)}:host([color-scheme="Mango"]) .udex-avatar{background-color:var(--udex-avatar-mango-default-background-color);color:var(--udex-avatar-mango-default-icon-color);border-color:var(--udex-avatar-mango-default-border-color)}:host([color-scheme="Mango"][interactive]) .udex-avatar:hover{background-color:var(--udex-avatar-mango-default-background-color);border-color:var(--udex-avatar-mango-hover-border-color);color:var(--udex-avatar-mango-default-icon-color)}:host([disabled]) .udex-avatar:hover{border:0}:host([color-scheme="Red"]) .udex-avatar{background-color:var(--udex-avatar-red-default-background-color);color:var(--udex-avatar-red-default-icon-color);border-color:var(--udex-avatar-red-default-border-color)}:host([color-scheme="Red"][interactive]) .udex-avatar:hover{background-color:var(--udex-avatar-red-default-background-color);border-color:var(--udex-avatar-red-hover-border-color);color:var(--udex-avatar-red-default-icon-color)}:host([color-scheme="Raspberry"]) .udex-avatar{background-color:var(--udex-avatar-raspberry-default-background-color);color:var(--udex-avatar-raspberry-default-icon-color);border-color:var(--udex-avatar-raspberry-default-border-color)}:host([color-scheme="Raspberry"][interactive]) .udex-avatar:hover{background-color:var(--udex-avatar-raspberry-default-background-color);border-color:var(--udex-avatar-raspberry-hover-border-color);color:var(--udex-avatar-raspberry-default-icon-color)}:host([color-scheme="Pink"]) .udex-avatar{background-color:var(--udex-avatar-pink-default-background-color);color:var(--udex-avatar-pink-default-icon-color);border-color:var(--udex-avatar-pink-default-border-color)}:host([color-scheme="Pink"][interactive]) .udex-avatar:hover{background-color:var(--udex-avatar-pink-default-background-color);border-color:var(--udex-avatar-pink-hover-border-color);color:var(--udex-avatar-pink-default-icon-color)}:host([color-scheme="Indigo"]) .udex-avatar{background-color:var(--udex-avatar-indigo-default-background-color);color:var(--udex-avatar-indigo-default-icon-color);border-color:var(--udex-avatar-indigo-default-border-color)}:host([color-scheme="Indigo"][interactive]) .udex-avatar:hover{background-color:var(--udex-avatar-indigo-default-background-color);border-color:var(--udex-avatar-indigo-hover-border-color);color:var(--udex-avatar-indigo-default-icon-color)}:host([color-scheme="Teal"]) .udex-avatar{background-color:var(--udex-avatar-teal-default-background-color);color:var(--udex-avatar-teal-default-icon-color);border-color:var(--udex-avatar-teal-default-border-color)}:host([color-scheme="Teal"][interactive]) .udex-avatar:hover{background-color:var(--udex-avatar-teal-default-background-color);border-color:var(--udex-avatar-teal-hover-border-color);color:var(--udex-avatar-teal-default-icon-color)}:host([color-scheme="Green"]) .udex-avatar{background-color:var(--udex-avatar-green-default-background-color);color:var(--udex-avatar-green-default-icon-color);border-color:var(--udex-avatar-green-default-border-color)}:host([color-scheme="Green"][interactive]) .udex-avatar:hover{background-color:var(--udex-avatar-green-default-background-color);border-color:var(--udex-avatar-green-hover-border-color);color:var(--udex-avatar-green-default-icon-color)}:host([color-scheme="Grey"]) .udex-avatar{background-color:var(--udex-avatar-grey-default-background-color);color:var(--udex-avatar-grey-default-icon-color);border-color:var(--udex-avatar-grey-default-border-color)}:host([color-scheme="Grey"][interactive]) .udex-avatar:hover{background-color:var(--udex-avatar-grey-default-background-color);border-color:var(--udex-avatar-grey-hover-border-color);color:var(--udex-avatar-grey-default-icon-color)}:host([color-scheme="Transparent"]) .udex-avatar{background-color:var(--udex-avatar-transparent-default-background-color);color:var(--udex-avatar-transparent-default-icon-color);border-color:var(--udex-avatar-transparent-default-border-color)}:host([color-scheme="Transparent"][interactive]) .udex-avatar:hover{background-color:var(--udex-avatar-transparent-default-background-color);border-color:var(--udex-avatar-transparent-hover-border-color);color:var(--udex-avatar-transparent-default-icon-color)}:host([color-scheme="Neutral"]) .udex-avatar{background-color:var(--udex-avatar-neutral-default-background-color);color:var(--udex-avatar-neutral-default-icon-color);border-color:var(--udex-avatar-neutral-default-border-color)}:host([color-scheme="Neutral"][interactive]) .udex-avatar:hover{background-color:var(--udex-avatar-neutral-default-background-color);border-color:var(--udex-avatar-neutral-hover-border-color);color:var(--udex-avatar-neutral-default-icon-color)}:host([interactive]:not([hidden])) .udex-avatar:active,:host([interactive]:not([hidden])) .udex-avatar.udex-avatar--with-image:active{border-color:var(--udex-avatar-neutral-active-border-color);background-color:var(--udex-avatar-neutral-active-background-color);color:var(--udex-avatar-neutral-active-icon-color)}
|
|
10
|
+
const styleData: StyleData = {packageName:"@sapudex/web-components",fileName:"themes/Avatar.css.ts",content:`:host{--udex-avatar-badge-size-background-xs-and-s-and-m: 18px;--udex-avatar-badge-size-background-l: 20px;--udex-avatar-badge-size-background-xl: 28px;--udex-avatar-badge-size-icon-xs-and-s-and-m: 12px;--udex-avatar-badge-size-icon-l: 14px;--udex-avatar-badge-size-icon-xl: 16px;--udex-avatar-size-xs: 32px;--udex-avatar-size-s: 48px;--udex-avatar-size-m: 64px;--udex-avatar-size-l: 84px;--udex-avatar-size-xl: 120px;--udex-avatar-font-size-xs: 12px;--udex-avatar-font-size-s: 18px;--udex-avatar-font-size-m: 24px;--udex-avatar-font-size-l: 32px;--udex-avatar-font-size-xl: 48px;--udex-avatar-icon-size-xs: 16px;--udex-avatar-icon-size-s: 18px;--udex-avatar-icon-size-m: 24px;--udex-avatar-icon-size-l: 36px;--udex-avatar-icon-size-xl: 52px;--udex-avatar-radius-xs: var(--udexRadiusXS, 4px);--udex-avatar-radius-s: var(--udexRadiusXS, 4px);--udex-avatar-radius-m: var(--udexRadiusM, 8px);--udex-avatar-radius-l: var(--udexRadiusM, 8px);--udex-avatar-radius-xl: var(--udexRadiusXL, 16px);--udex-avatar-image-default-border-color: var(--udexColorGrey2, #EAECEE);--udex-avatar-image-hover-border-color: var(--udexColorGrey7, #475E75);--udex-avatar-blue-default-background-color: var(--sapAvatar_6_Background, var(--udexColorBlue2));--udex-avatar-blue-default-border-color: var(--sapAvatar_6_Background, var(--udexColorBlue2));--udex-avatar-blue-default-icon-color: var(--sapAvatar_6_TextColor, var(--udexColorBlue7));--udex-avatar-blue-hover-backgound-color: var(--sapAvatar_6_Background, var(--udexColorBlue2));--udex-avatar-blue-hover-border-color: var(--sapAvatar_6_TextColor, var(--udexColorBlue7));--udex-avatar-blue-hover-icon-color: var(--sapAvatar_6_TextColor, var(--udexColorBlue7));--udex-avatar-mango-default-background-color: var(--sapAvatar_1_Background, var(--udexColorMango2));--udex-avatar-mango-default-border-color: var(--sapAvatar_1_Background, var(--udexColorMango2));--udex-avatar-mango-default-icon-color: var(--sapAvatar_1_TextColor, var(--udexColorMango7));--udex-avatar-mango-hover-backgound-color: var(--sapAvatar_1_Background, var(--udexColorMango2));--udex-avatar-mango-hover-border-color: var(--sapAvatar_1_TextColor, var(--udexColorMango7));--udex-avatar-mango-hover-icon-color: var(--sapAvatar_1_TextColor, var(--udexColorMango7));--udex-avatar-red-default-background-color: var(--sapAvatar_2_Background, var(--udexColorRed2));--udex-avatar-red-default-border-color: var(--sapAvatar_2_Background, var(--udexColorRed2));--udex-avatar-red-default-icon-color: var(--sapAvatar_2_TextColor, var(--udexColorRed7));--udex-avatar-red-hover-backgound-color: var(--sapAvatar_2_Background, var(--udexColorRed2));--udex-avatar-red-hover-border-color: var(--sapAvatar_2_TextColor, var(--udexColorRed7));--udex-avatar-red-hover-icon-color: var(--sapAvatar_2_TextColor, var(--udexColorRed7));--udex-avatar-raspberry-default-background-color: var(--sapAvatar_3_Background, var(--udexColorRaspberry2));--udex-avatar-raspberry-default-border-color: var(--sapAvatar_3_Background, var(--udexColorRaspberry2));--udex-avatar-raspberry-default-icon-color: var(--sapAvatar_3_TextColor, var(--udexColorRaspberry7));--udex-avatar-raspberry-hover-backgound-color: var(--sapAvatar_3_Background, var(--udexColorRaspberry2));--udex-avatar-raspberry-hover-border-color: var(--sapAvatar_3_TextColor, var(--udexColorRaspberry7));--udex-avatar-raspberry-hover-icon-color: var(--sapAvatar_3_TextColor, var(--udexColorRaspberry7));--udex-avatar-pink-default-background-color: var(--sapAvatar_4_Background, var(--udexColorPink2));--udex-avatar-pink-default-border-color: var(--sapAvatar_4_Background, var(--udexColorPink2));--udex-avatar-pink-default-icon-color: var(--sapAvatar_4_TextColor, var(--udexColorPink7));--udex-avatar-pink-hover-backgound-color: var(--sapAvatar_4_Background, var(--udexColorPink2));--udex-avatar-pink-hover-border-color: var(--sapAvatar_4_TextColor, var(--udexColorPink7));--udex-avatar-pink-hover-icon-color: var(--sapAvatar_4_TextColor, var(--udexColorPink7));--udex-avatar-indigo-default-background-color: var(--sapAvatar_5_Background, var(--udexColorIndigo2));--udex-avatar-indigo-default-border-color: var(--sapAvatar_5_Background, var(--udexColorIndigo2));--udex-avatar-indigo-default-icon-color: var(--sapAvatar_5_TextColor, var(--udexColorIndigo7));--udex-avatar-indigo-hover-backgound-color: var(--sapAvatar_5_Background, var(--udexColorIndigo2));--udex-avatar-indigo-hover-border-color: var(--sapAvatar_5_TextColor, var(--udexColorIndigo7));--udex-avatar-indigo-hover-icon-color: var(--sapAvatar_5_TextColor, var(--udexColorIndigo7));--udex-avatar-teal-default-background-color: var(--sapAvatar_7_Background, var(--udexColorTeal2));--udex-avatar-teal-default-border-color: var(--sapAvatar_7_Background, var(--udexColorTeal2));--udex-avatar-teal-default-icon-color: var(--sapAvatar_7_TextColor, var(--udexColorTeal7));--udex-avatar-teal-hover-backgound-color: var(--sapAvatar_7_Background, var(--udexColorTeal2));--udex-avatar-teal-hover-border-color: var(--sapAvatar_7_TextColor, var(--udexColorTeal7));--udex-avatar-teal-hover-icon-color: var(--sapAvatar_7_TextColor, var(--udexColorTeal7));--udex-avatar-green-default-background-color: var(--sapAvatar_8_Background, var(--udexColorGreen2));--udex-avatar-green-default-border-color: var(--sapAvatar_8_Background, var(--udexColorGreen2));--udex-avatar-green-default-icon-color: var(--sapAvatar_8_TextColor, var(--udexColorGreen7));--udex-avatar-green-hover-backgound-color: var(--sapAvatar_8_Background, var(--udexColorGreen2));--udex-avatar-green-hover-border-color: var(--sapAvatar_8_TextColor, var(--udexColorGreen7));--udex-avatar-green-hover-icon-color: var(--sapAvatar_8_TextColor, var(--udexColorGreen7));--udex-avatar-grey-default-background-color: var(--sapAvatar_9_Background, var(--udexColorGrey2));--udex-avatar-grey-default-border-color: var(--sapAvatar_9_Background, var(--udexColorGrey2));--udex-avatar-grey-default-icon-color: var(--sapAvatar_9_TextColor, var(--udexColorGrey7));--udex-avatar-grey-hover-backgound-color: var(--sapAvatar_9_Background, var(--udexColorGrey2));--udex-avatar-grey-hover-border-color: var(--sapAvatar_9_TextColor, var(--udexColorGrey7));--udex-avatar-grey-hover-icon-color: var(--sapAvatar_9_TextColor, var(--udexColorGrey7));--udex-avatar-transparent-default-background-color: hsla(0, 0%, 0%, 0);--udex-avatar-transparent-default-border-color: hsla(0, 0%, 0%, 0);--udex-avatar-transparent-default-icon-color: var(--udexColorGrey9, #223548);--udex-avatar-transparent-hover-backgound-color: hsla(0, 0%, 0%, 0);--udex-avatar-transparent-hover-border-color: var(--udexColorGrey9, #223548);--udex-avatar-transparent-hover-icon-color: var(--udexColorGrey9, #223548);--udex-avatar-neutral-default-background-color: var(--sapAvatar_10_Background, var(--udexColorNeuturalWhite));--udex-avatar-neutral-default-border-color: var(--sapAvatar_10_BorderColor, var(--udexColorGrey3));--udex-avatar-neutral-default-icon-color: var(--sapAvatar_10_TextColor , #0070F2);--udex-avatar-neutral-hover-backgound-color: var(--sapAvatar_10_Background, var(--udexColorNeuturalWhite));--udex-avatar-neutral-hover-border-color: var(, var(--udexColorGrey5, #8396a8));--udex-avatar-neutral-hover-icon-color: var(--sapAvatar_10_TextColor, #0070F2);--udex-avatar-neutral-active-border-color: var(--udexColorBlue9, #0040B0);--udex-avatar-neutral-active-background-color: var(--sapAvatar_10_Background, var(--udexColorNeuturalWhite));--udex-avatar-neutral-active-icon-color: var(--udexColorBlue9, #0040B0)}:host{font-family:var(--sapFontFamily, sans-serif);font-size:var(--sapFontSize, 16px);display:inline-block}:host([interactive]) .udex-avatar:hover{box-shadow:none}::slotted(*){pointer-events:all}:host([color-scheme]) .udex-avatar.udex-avatar--with-image{background-color:#0000;border-color:var(--udex-avatar-image-default-border-color)}:host([color-scheme][interactive]) .udex-avatar.udex-avatar--with-image:hover{border-color:var(--udex-avatar-image-hover-border-color);background-color:#0000}.udex-avatar ::slotted([slot="badge"]){display:flex;justify-content:center;align-items:center;bottom:0;right:0}:host([size="XS"]) .udex-avatar ::slotted([slot="badge"]){width:var(--udex-avatar-badge-size-background-xs-and-s-and-m);height:var(--udex-avatar-badge-size-background-xs-and-s-and-m);font-size:var(--udex-avatar-badge-size-icon-xs-and-s-and-m);padding:3px}:host([size="S"]) .udex-avatar ::slotted([slot="badge"]){width:var(--udex-avatar-badge-size-background-xs-and-s-and-m);height:var(--udex-avatar-badge-size-background-xs-and-s-and-m);font-size:var(--udex-avatar-badge-size-icon-xs-and-s-and-m);padding:3px}:host([size="M"]) .udex-avatar ::slotted([slot="badge"]){width:var(--udex-avatar-badge-size-background-xs-and-s-and-m);height:var(--udex-avatar-badge-size-background-xs-and-s-and-m);font-size:var(--udex-avatar-badge-size-icon-xs-and-s-and-m);padding:3px}:host([size="L"]) .udex-avatar ::slotted([slot="badge"]){width:var(--udex-avatar-badge-size-background-l);height:var(--udex-avatar-badge-size-background-l);font-size:var(--udex-avatar-badge-size-icon-l);padding:3px}:host([size="XL"]) .udex-avatar ::slotted([slot="badge"]){width:var(--udex-avatar-badge-size-background-xl);height:var(--udex-avatar-badge-size-background-xl);font-size:var(--udex-avatar-badge-size-icon-xl);padding:6px}:host([show-attention-badge][size="XS"]) .udex-avatar:before{position:absolute;content:"";inset-block-start:0;inset-inline-end:0;z-index:1;width:6px;height:6px;border:1px solid #fff;border-radius:50%;background-color:var(--udexColorRed7)}:host([size="XS"]) .udex-avatar{width:var(--udex-avatar-size-xs);height:var(--udex-avatar-size-xs);font-size:var(--udex-avatar-font-size-xs)}:host([size="XS"][icon]) .udex-avatar{font-size:var(--udex-avatar-icon-size-xs)}:host([size="S"]) .udex-avatar{width:var(--udex-avatar-size-s);height:var(--udex-avatar-size-s);font-size:var(--udex-avatar-font-size-s)}:host([size="S"][icon]) .udex-avatar{font-size:var(--udex-avatar-icon-size-s)}:host([size="M"]) .udex-avatar{width:var(--udex-avatar-size-m);height:var(--udex-avatar-size-m);font-size:var(--udex-avatar-font-size-m)}:host([size="M"][icon]) .udex-avatar{font-size:var(--udex-avatar-icon-size-m)}:host([size="L"]) .udex-avatar{width:var(--udex-avatar-size-l);height:var(--udex-avatar-size-l);font-size:var(--udex-avatar-font-size-l)}:host([size="L"][icon]) .udex-avatar{font-size:var(--udex-avatar-icon-size-l)}:host([size="XL"]) .udex-avatar{width:var(--udex-avatar-size-xl);height:var(--udex-avatar-size-xl);font-size:var(--udex-avatar-font-size-xl)}:host([size="XL"][icon]) .udex-avatar{font-size:var(--udex-avatar-icon-size-xl)}:host([size="XS"][shape="Square"]) .udex-avatar{border-radius:var(--udex-avatar-radius-xs)}:host([size="XS"][shape="Square"]) .udex-avatar ::slotted(*:not([slot="badge"])){border-radius:var(--udex-avatar-radius-xs)}:host([size="S"][shape="Square"]) .udex-avatar{border-radius:var(--udex-avatar-radius-s)}:host([size="S"][shape="Square"]) .udex-avatar ::slotted(*:not([slot="badge"])){border-radius:var(--udex-avatar-radius-s)}:host([size="M"][shape="Square"]) .udex-avatar{border-radius:var(--udex-avatar-radius-m)}:host([size="M"][shape="Square"]) .udex-avatar ::slotted(*:not([slot="badge"])){border-radius:var(--udex-avatar-radius-m)}:host([size="L"][shape="Square"]) .udex-avatar{border-radius:var(--udex-avatar-radius-l)}:host([size="L"][shape="Square"]) .udex-avatar ::slotted(*:not([slot="badge"])){border-radius:var(--udex-avatar-radius-l)}:host([size="XL"][shape="Square"]) .udex-avatar{border-radius:var(--udex-avatar-radius-xl)}:host([size="XL"][shape="Square"]) .udex-avatar ::slotted(*:not([slot="badge"])){border-radius:var(--udex-avatar-radius-xl)}:host([color-scheme="Blue"]) .udex-avatar{background-color:var(--udex-avatar-blue-default-background-color);color:var(--udex-avatar-blue-default-icon-color);border-color:var(--udex-avatar-blue-default-border-color)}:host([color-scheme="Blue"][interactive]) .udex-avatar:hover{background-color:var(--udex-avatar-blue-default-background-color);border-color:var(--udex-avatar-blue-hover-border-color);color:var(--udex-avatar-blue-default-icon-color)}:host([color-scheme="Mango"]) .udex-avatar{background-color:var(--udex-avatar-mango-default-background-color);color:var(--udex-avatar-mango-default-icon-color);border-color:var(--udex-avatar-mango-default-border-color)}:host([color-scheme="Mango"][interactive]) .udex-avatar:hover{background-color:var(--udex-avatar-mango-default-background-color);border-color:var(--udex-avatar-mango-hover-border-color);color:var(--udex-avatar-mango-default-icon-color)}:host([disabled]) .udex-avatar:hover{border:0}:host([color-scheme="Red"]) .udex-avatar{background-color:var(--udex-avatar-red-default-background-color);color:var(--udex-avatar-red-default-icon-color);border-color:var(--udex-avatar-red-default-border-color)}:host([color-scheme="Red"][interactive]) .udex-avatar:hover{background-color:var(--udex-avatar-red-default-background-color);border-color:var(--udex-avatar-red-hover-border-color);color:var(--udex-avatar-red-default-icon-color)}:host([color-scheme="Raspberry"]) .udex-avatar{background-color:var(--udex-avatar-raspberry-default-background-color);color:var(--udex-avatar-raspberry-default-icon-color);border-color:var(--udex-avatar-raspberry-default-border-color)}:host([color-scheme="Raspberry"][interactive]) .udex-avatar:hover{background-color:var(--udex-avatar-raspberry-default-background-color);border-color:var(--udex-avatar-raspberry-hover-border-color);color:var(--udex-avatar-raspberry-default-icon-color)}:host([color-scheme="Pink"]) .udex-avatar{background-color:var(--udex-avatar-pink-default-background-color);color:var(--udex-avatar-pink-default-icon-color);border-color:var(--udex-avatar-pink-default-border-color)}:host([color-scheme="Pink"][interactive]) .udex-avatar:hover{background-color:var(--udex-avatar-pink-default-background-color);border-color:var(--udex-avatar-pink-hover-border-color);color:var(--udex-avatar-pink-default-icon-color)}:host([color-scheme="Indigo"]) .udex-avatar{background-color:var(--udex-avatar-indigo-default-background-color);color:var(--udex-avatar-indigo-default-icon-color);border-color:var(--udex-avatar-indigo-default-border-color)}:host([color-scheme="Indigo"][interactive]) .udex-avatar:hover{background-color:var(--udex-avatar-indigo-default-background-color);border-color:var(--udex-avatar-indigo-hover-border-color);color:var(--udex-avatar-indigo-default-icon-color)}:host([color-scheme="Teal"]) .udex-avatar{background-color:var(--udex-avatar-teal-default-background-color);color:var(--udex-avatar-teal-default-icon-color);border-color:var(--udex-avatar-teal-default-border-color)}:host([color-scheme="Teal"][interactive]) .udex-avatar:hover{background-color:var(--udex-avatar-teal-default-background-color);border-color:var(--udex-avatar-teal-hover-border-color);color:var(--udex-avatar-teal-default-icon-color)}:host([color-scheme="Green"]) .udex-avatar{background-color:var(--udex-avatar-green-default-background-color);color:var(--udex-avatar-green-default-icon-color);border-color:var(--udex-avatar-green-default-border-color)}:host([color-scheme="Green"][interactive]) .udex-avatar:hover{background-color:var(--udex-avatar-green-default-background-color);border-color:var(--udex-avatar-green-hover-border-color);color:var(--udex-avatar-green-default-icon-color)}:host([color-scheme="Grey"]) .udex-avatar{background-color:var(--udex-avatar-grey-default-background-color);color:var(--udex-avatar-grey-default-icon-color);border-color:var(--udex-avatar-grey-default-border-color)}:host([color-scheme="Grey"][interactive]) .udex-avatar:hover{background-color:var(--udex-avatar-grey-default-background-color);border-color:var(--udex-avatar-grey-hover-border-color);color:var(--udex-avatar-grey-default-icon-color)}:host([color-scheme="Transparent"]) .udex-avatar{background-color:var(--udex-avatar-transparent-default-background-color);color:var(--udex-avatar-transparent-default-icon-color);border-color:var(--udex-avatar-transparent-default-border-color)}:host([color-scheme="Transparent"][interactive]) .udex-avatar:hover{background-color:var(--udex-avatar-transparent-default-background-color);border-color:var(--udex-avatar-transparent-hover-border-color);color:var(--udex-avatar-transparent-default-icon-color)}:host([color-scheme="Neutral"]) .udex-avatar{background-color:var(--udex-avatar-neutral-default-background-color);color:var(--udex-avatar-neutral-default-icon-color);border-color:var(--udex-avatar-neutral-default-border-color)}:host([color-scheme="Neutral"][interactive]) .udex-avatar:hover{background-color:var(--udex-avatar-neutral-default-background-color);border-color:var(--udex-avatar-neutral-hover-border-color);color:var(--udex-avatar-neutral-default-icon-color)}:host([interactive]:not([hidden])) .udex-avatar:active,:host([interactive]:not([hidden])) .udex-avatar.udex-avatar--with-image:active{border-color:var(--udex-avatar-neutral-active-border-color);background-color:var(--udex-avatar-neutral-active-background-color);color:var(--udex-avatar-neutral-active-icon-color)}
|
|
11
11
|
`};
|
|
12
12
|
export default styleData;
|
|
13
13
|
|
|
@@ -7,7 +7,7 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
|
|
|
7
7
|
registerThemePropertiesLoader("@ui5/webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
|
|
8
8
|
registerThemePropertiesLoader("@sapudex/web-components", "sap_horizon", async () => defaultTheme);
|
|
9
9
|
|
|
10
|
-
const styleData: StyleData = {packageName:"@sapudex/web-components",fileName:"themes/Breadcrumbs.css.ts",content:`:host{--udex-breadcrumbs-item-color: var(--sapNeutralElementColor, var(--udexColorGrey6, #5B738B ));--udex-breadcrumbs-item-font-size: var(--udexTypographyBodyXXSFontSize, 12px);--udex-
|
|
10
|
+
const styleData: StyleData = {packageName:"@sapudex/web-components",fileName:"themes/Breadcrumbs.css.ts",content:`:host{--udex-breadcrumbs-item-color: var(--sapNeutralElementColor, var(--udexColorGrey6, #5B738B ));--udex-breadcrumbs-item-font-size: var(--udexTypographyBodyXXSFontSize, 12px);--udex-breadcrumbs-margin: 0}.udex-breadcrumbs{font-family:var(--sapFontFamily);white-space:nowrap;outline:none;margin:var(--udex-breadcrumbs-margin)}.udex-breadcrumbs>ol{margin:0;padding:2px 0;list-style-type:none;display:-webkit-box;display:-webkit-flex;display:flex}.udex-breadcrumbs>ol>li{display:inline-flex;align-items:baseline}.udex-breadcrumbs__separator:after{content:"/";padding:0 .125rem;color:var(--udex-breadcrumbs-item-color);display:inline-block;font-family:var(--sapFontFamily);font-size:var(--udex-breadcrumbs-item-font-size);line-height:18px}:host([separators="DoubleSlash"]) .udex-breadcrumbs__separator:after{content:"//"}:host([separators="BackSlash"]) .udex-breadcrumbs__separator:after{content:"\\\\"}:host([separators="DoubleBackSlash"]) .udex-breadcrumbs__separator:after{content:"\\\\\\\\"}:host([separators="GreaterThan"]) .udex-breadcrumbs__separator:after{content:">"}:host([separators="DoubleGreaterThan"]) .udex-breadcrumbs__separator:after{content:">>"}.udex-breadcrumbs__trigger,.udex-breadcrumbs__arrow-wrapper [ui5-link][focused] [ui5-icon],.udex-breadcrumbs__item[focused],.udex-breadcrumbs__item{color:var(--udex-breadcrumbs-item-color);--sapLink_Hover_Color: var(--udex-breadcrumbs-item-color);--sapFontSize: var(--udex-breadcrumbs-item-font-size);--sapLinkColor: var(--udex-breadcrumbs-item-color);--sapLink_Active_Color: var(--udex-breadcrumbs-item-color);--udex-link-text-decoration: none;position:relative}.udex-breadcrumbs__item{line-height:18px}.ui5-breadcrumbs-dropdown-arrow-link-wrapper{display:flex}.udex-breadcrumbs__trigger{border:none;background:none;padding:0;cursor:pointer;height:12px;width:12px;margin:auto}.udex-breadcrumbs__trigger:focus{outline:solid var(--udexSpacer2, 2px) var(--sapContent_FocusColor, #0040B0);border-radius:var(--udexRadiusXXS, 2px)}.udex-breadcrumbs__trigger--opened [ui5-icon]{transform:rotate(180deg)}.udex-breadcrumbs__trigger,[ui5-link].udex-breadcrumbs__item{text-decoration:none;display:inline-flex}[ui5-link]:not([icon]).udex-breadcrumbs__item:hover:after{content:"";position:absolute;height:.0625rem;left:.125rem;right:.125rem;bottom:.125rem;background-color:var(--udex-breadcrumbs-item-color)}.udex-breadcrumbs .udex-breadcrumbs__arrow-wrapper [ui5-icon]:before{content:""}.udex-breadcrumbs .udex-breadcrumbs__arrow-wrapper [ui5-icon]{padding-left:0}.udex-breadcrumbs__arrow-wrapper [ui5-link][focused] [ui5-icon]:after,.udex-breadcrumbs__arrow-wrapper:hover [ui5-icon]:after{border-bottom:0}
|
|
11
11
|
`};
|
|
12
12
|
export default styleData;
|
|
13
13
|
|
|
@@ -7,7 +7,7 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
|
|
|
7
7
|
registerThemePropertiesLoader("@ui5/webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
|
|
8
8
|
registerThemePropertiesLoader("@sapudex/web-components", "sap_horizon", async () => defaultTheme);
|
|
9
9
|
|
|
10
|
-
const styleData: StyleData = {packageName:"@sapudex/web-components",fileName:"themes/Checkbox.css.ts",content:`:host([readonly]){--sapField_TextColor: var(--sapField_ReadOnly_BorderColor)}:host([display-only])::part(icon){height:24px;width:24px}:host([readonly]) .ui5-checkbox-inner,:host([readonly][value-state="Warning"][value-state="Error"][value-state="Success"]) .ui5-checkbox-inner{background:var(--sapField_ReadOnly_Background);border:var(--sapElement_BorderWidth) var(--sapField_ReadOnly_BorderColor) dashed;color:var(--sapField_TextColor)}
|
|
10
|
+
const styleData: StyleData = {packageName:"@sapudex/web-components",fileName:"themes/Checkbox.css.ts",content:`:host([readonly]){--sapField_TextColor: var(--sapField_ReadOnly_BorderColor)}:host([display-only])::part(icon){height:24px;width:24px}:host([readonly]) .ui5-checkbox-inner,:host([readonly][value-state="Warning"][value-state="Error"][value-state="Success"]) .ui5-checkbox-inner{background:var(--sapField_ReadOnly_Background);border:var(--sapElement_BorderWidth) var(--sapField_ReadOnly_BorderColor) dashed;color:var(--sapField_TextColor)}:host([required]) .ui5-checkbox-label:after{padding-left:var(--udexSpacer8);padding-right:var(--udexSpacer2);content:"*"}:host([required]) .ui5-checkbox-label:dir(rtl):after{padding-left:var(--udexSpacer2);padding-right:var(--udexSpacer8);content:"*"}
|
|
11
11
|
`};
|
|
12
12
|
export default styleData;
|
|
13
13
|
|
|
@@ -7,7 +7,7 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
|
|
|
7
7
|
registerThemePropertiesLoader("@ui5/webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
|
|
8
8
|
registerThemePropertiesLoader("@sapudex/web-components", "sap_horizon", async () => defaultTheme);
|
|
9
9
|
|
|
10
|
-
const styleData: StyleData = {packageName:"@sapudex/web-components",fileName:"themes/CountrySelector.css.ts",content:`:host{--udex-country-selector-flag-width: 30px;--udex-country-selector-flag-height: 20px;--udex-country-selector-input-disabled-opacity: var(--sapContent_DisabledOpacity, .4)}.udex-country-selector__text{width:100%}.udex-country-selector__dropdown--hide-flag udex-list-item::part(item){padding-left:var(--udexSpacer12);padding-right:var(--udexSpacer12)}.udex-country-selector__dropdown--hide-flag .udex-country-selector__trigger:after{left:var(--udexSpacer12);right:var(--udexSpacer32)}.udex-country-selector__trigger{display:flex;align-items:center;position:relative;width:max-
|
|
10
|
+
const styleData: StyleData = {packageName:"@sapudex/web-components",fileName:"themes/CountrySelector.css.ts",content:`:host{--udex-country-selector-flag-width: 30px;--udex-country-selector-flag-height: 20px;--udex-country-selector-input-disabled-opacity: var(--sapContent_DisabledOpacity, .4);--udex-country-selector-min-width: 320px;--udex-country-selector-max-width: 100%;--udex-country-selector-min-width-xs-and-s: 100%}.udex-country-selector__text{width:100%}.udex-country-selector__dropdown--hide-flag udex-list-item::part(item){padding-left:var(--udexSpacer12);padding-right:var(--udexSpacer12)}.udex-country-selector__dropdown--hide-flag .udex-country-selector__trigger:after{left:var(--udexSpacer12);right:var(--udexSpacer32)}@media (width < 640px){.udex-country-selector__trigger{min-width:var(--udex-country-selector-min-width-xs-and-s)}}.udex-country-selector__trigger{display:flex;align-items:center;position:relative;max-width:var(--udex-country-selector-max-width);min-width:var(--udex-country-selector-min-width);width:100%}:host(:not([disabled]):not([displayonly]):not([readonly])) .udex-country-selector__trigger{cursor:pointer}.udex-country-selector__trigger--disabled{opacity:var(--udex-country-selector-input-disabled-opacity)}.udex-list::part(content){padding:0}.udex-country-selector__icon{position:absolute;right:12px}.udex-country-selector__icon:dir(rtl){right:auto;left:12px}.udex-country-selector__icon{pointer-events:none}udex-dropdown[open] .udex-country-selector__icon{transform:rotate(180deg)}.udex-country-selector__trigger:after{content:attr(value);position:absolute;left:calc(24px + var(--udex-country-selector-flag-width));right:40px;font-family:var(--sapFontFamily, sans-serif);font-weight:var(--udexTypographyFontWeightRegular, 400);font-size:var(--udexTypographyBodySFontSize, 16px);line-height:var(--udexTypographyBodyLineHeight, 24px);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;pointer-events:none}:dir(rtl) .udex-country-selector__trigger:after{right:calc(24px + var(--udex-country-selector-flag-width));left:40px}.udex-text-field__input{inset-inline-start:var(--udexSpacer12)}udex-text-field::part(label){transform:translateY(-110%);padding:0 var(--udexSpacer4, 4px);font-size:var(--udexTypographyBodyXXSFontSize, 12px);line-height:18px;background:linear-gradient(transparent 55%,var(--sapField_Background) 45%)}.udex-country-selector-item__image,.udex-country-selector__image{background-image:url(https://cdn.udex.services.sap.com/dds/design-tokens/assets/country_flag_iso3166.webp);position:absolute;top:50%;transform:translateY(-50%);z-index:1;width:var(--udex-country-selector-flag-width);height:var(--udex-country-selector-flag-height);inset-inline-start:var(--udexSpacer12);inset-inline-end:30px;pointer-events:none}udex-list-item::part(item){position:relative;padding-inline-start:calc(24px + var(--udex-country-selector-flag-width));padding-inline-end:var(--udexSpacer12, 12px)}udex-text-field[readonly]::part(label){background:linear-gradient(var(--sapField_Background) 65%,var(--sapField_ReadOnly_Background) 35%)}udex-dropdown{--udex-dropdown-pane-max-width: 100%}
|
|
11
11
|
`};
|
|
12
12
|
export default styleData;
|
|
13
13
|
|
|
@@ -7,7 +7,7 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
|
|
|
7
7
|
registerThemePropertiesLoader("@ui5/webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
|
|
8
8
|
registerThemePropertiesLoader("@sapudex/web-components", "sap_horizon", async () => defaultTheme);
|
|
9
9
|
|
|
10
|
-
const styleData: StyleData = {packageName:"@sapudex/web-components",fileName:"themes/DatePicker.css.ts",content:`:host{--udex-date-picker-width: 354px;position:relative;font-family:var(--sapFontFamily)}.udex-date-picker__container{display:flex;flex-direction:column}.udex-date-picker__calendar{min-width:var(--udex-date-picker-width
|
|
10
|
+
const styleData: StyleData = {packageName:"@sapudex/web-components",fileName:"themes/DatePicker.css.ts",content:`:host{--udex-date-picker-width: 354px;position:relative;font-family:var(--sapFontFamily)}.udex-date-picker__container{display:flex;flex-direction:column}.udex-date-picker__calendar{min-width:var(--udex-date-picker-width);background-color:var(--udexNeutralColorWhite, #ffffff);border-radius:8px;box-shadow:0 2px 8px #2236494d;position:absolute;top:42px;z-index:100}.udex-date-picker__input{--udex-input-padding: 9px 48px 9px 12px}
|
|
11
11
|
`};
|
|
12
12
|
export default styleData;
|
|
13
13
|
|
|
@@ -7,7 +7,7 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
|
|
|
7
7
|
registerThemePropertiesLoader("@ui5/webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
|
|
8
8
|
registerThemePropertiesLoader("@sapudex/web-components", "sap_horizon", async () => defaultTheme);
|
|
9
9
|
|
|
10
|
-
const styleData: StyleData = {packageName:"@sapudex/web-components",fileName:"themes/Dropdown.css.ts",content:`:host{--udex-dropdown-box-shadow: var(--sapContent_Shadow1, 0px 2px 8px 0px rgba(34,54,73,.3));--udex-dropdown-border-color-default: var(--sapField_BorderColor, var(--udexCoreBorderDefault));--udex-dropdown-border-radius: var(--udexRadiusM, 8px);--udex-dropdown-border-width: var(--sapElement_BorderWidth, 1px);--udex-dropdown-default-background-color: var(--udexColorNeutralWhite, #fff);--udex-dropdown-horizontal-distance: 0;--udex-dropdown-vertical-distance: 0;--udex-dropdown-pane-max-width: 640px;--udex-dropdown-pane-
|
|
10
|
+
const styleData: StyleData = {packageName:"@sapudex/web-components",fileName:"themes/Dropdown.css.ts",content:`:host{--udex-dropdown-box-shadow: var(--sapContent_Shadow1, 0px 2px 8px 0px rgba(34,54,73,.3));--udex-dropdown-border-color-default: var(--sapField_BorderColor, var(--udexCoreBorderDefault));--udex-dropdown-border-radius: var(--udexRadiusM, 8px);--udex-dropdown-border-width: var(--sapElement_BorderWidth, 1px);--udex-dropdown-default-background-color: var(--udexColorNeutralWhite, #fff);--udex-dropdown-horizontal-distance: 0;--udex-dropdown-vertical-distance: 0;--udex-dropdown-pane-min-width: 320px;--udex-dropdown-pane-max-width: 640px;--udex-dropdown-pane-width: fit-content;--udex-dropdown-pane-max-height: none;--udex-dropdown-pane-overflow: visible;--udex-dropdown-pane-content-overflow: auto}.udex-dropdown__pane{border:var(--udex-dropdown-border-width) solid var(--udex-dropdown-border-color-default);box-shadow:var(--udex-dropdown-box-shadow);border-radius:var(--udex-dropdown-border-radius);background:var(--udex-dropdown-default-background-color);min-width:var(--udex-dropdown-pane-min-width);max-width:var(--udex-dropdown-pane-max-width);width:var(--udex-dropdown-pane-width);max-height:var(--udex-dropdown-pane-max-height);margin:var(--udex-dropdown-vertical-distance) var(--udex-dropdown-horizontal-distance);overflow:var(--udex-dropdown-pane-overflow)}.udex-dropdown__pane::part(content){padding:0;overflow:var(--udex-dropdown-pane-content-overflow)}.udex-dropdown__pane::part(header),.udex-dropdown__pane::part(footer){padding:var(--udexSpacer16, 16px) var(--udexSpacer12, 12px)}.udex-dropdown__pane::part(footer){justify-content:flex-start;border-color:var(--udex-dropdown-border-color-default);box-shadow:var(--udex-dropdown-box-shadow)}::slotted([slot="header"]){width:100%}::slotted(.udex-no-result){font-family:var(--sapFontFamily);font-weight:var(--udexTypographyFontWeightRegular, 400);font-size:var(--udexTypographyBodyXSFontSize, 14px);line-height:var(--udexTypographyBodyLineHeight, 1.5);color:var(--sapContent_TitleColor, #000000);padding:0 var(--udexSpacer16, 16px) var(--udexSpacer16, 16px)}
|
|
11
11
|
`};
|
|
12
12
|
export default styleData;
|
|
13
13
|
|
|
@@ -7,7 +7,7 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
|
|
|
7
7
|
registerThemePropertiesLoader("@ui5/webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
|
|
8
8
|
registerThemePropertiesLoader("@sapudex/web-components", "sap_horizon", async () => defaultTheme);
|
|
9
9
|
|
|
10
|
-
const styleData: StyleData = {packageName:"@sapudex/web-components",fileName:"themes/FilterMenu.css.ts",content:`:host{--udex-filter-menu-trigger-color-default: var(--sapTextColor, #223548);--udex-filter-menu-trigger-color-hover: var(--sapHoverColor, #0070f2);--udex-filter-menu-trigger-color-active: var(--sapShell_Active_TextColor, #0040b0);--udex-filter-menu-trigger-color-disabled: var(--sapTextColor, #223548);--udex-filter-menu-trigger-icon-default: var(--sapContent_IconColor, #223548);--udex-filter-menu-trigger-icon-hover: var(--sapHoverColor, #0070f2);--udex-filter-menu-trigger-icon-active: var(--sapSelectedColor, #0040b0);--udex-filter-menu-trigger-icon-disabled: var(--sapContent_IconColor, #223548);--udex-filter-menu-trigger-prefix-color-default: var(--sapShell_NeutralColor, #475e75);--udex-filter-menu-trigger-prefix-color-hover: var(--sapShell_NeutralColor, #475e75);--udex-filter-menu-trigger-prefix-color-active: var(--sapShell_NeutralColor, #475e75);--udex-filter-menu-trigger-prefix-color-disabled: var(--sapShell_NeutralColor, #475e75);--udex-filter-menu-trigger-selection-bar-background: var(--sapHoverColor, #0070f2);--udex-filter-menu-trigger-outline-border-color: var(--udexColorBlue10, #002A86)}:host([desktop]) .udex-filter-menu__trigger:focus,.udex-filter-menu__trigger:focus-visible{outline:2px solid var(--udex-filter-menu-trigger-outline-border-color);outline-offset:var(--udexSpacer2, 2px);border-radius:var(--udexRadiusM, 8px)}.udex-filter-menu__trigger{font-family:var(--sapFontFamily);font-weight:var(--udexTypographyFontWeightRegular, 400);font-size:var(--udexTypographyBodyXSFontSize, 14px);line-height:var(--udexTypographyBodyLineHeight, 1.5);display:inline-flex;align-items:center;padding:5px 0;position:relative;background:none;border:none}.udex-filter-menu__trigger-wrap{cursor:pointer;display:inline-flex;align-items:center}.udex-filter-menu__trigger-wrap[disabled]{pointer-events:none}.udex-filter-menu__trigger-wrap[disabled]:hover .udex-filter-menu__trigger-name,.udex-filter-menu__trigger-wrap[disabled] .udex-filter-menu__trigger-name{color:var(--udex-filter-menu-trigger-color-disabled);opacity:var(--sapContent_DisabledOpacity, .4)}.udex-filter-menu__trigger-wrap[disabled] .udex-filter-menu__trigger-prefix{color:var(--udex-filter-menu-trigger-prefix-color-disabled)}.udex-filter-menu__trigger-wrap[disabled]:hover .udex-filter-menu__trigger-icon,.udex-filter-menu__trigger-wrap[disabled] .udex-filter-menu__trigger-icon{color:var(--udex-filter-menu-trigger-icon-disabled);opacity:var(--sapContent_DisabledOpacity, .4)}.udex-filter-menu__trigger-prefix{margin-right:var(--udexSpacer8, 8px);color:var(--udex-filter-menu-trigger-prefix-color-default)}.udex-filter-menu__trigger-wrap:hover .udex-filter-menu__trigger-prefix{color:var(--udex-filter-menu-trigger-prefix-color-hover)}.udex-filter-menu[open] .udex-filter-menu__trigger-prefix{color:var(--udex-filter-menu-trigger-prefix-color-active)}.udex-filter-menu__trigger-name{color:var(--udex-filter-menu-trigger-color-default)}.udex-filter-menu__trigger:before{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;border-radius:2px 2px 0;background:var(--udex-filter-menu-trigger-selection-bar-background);opacity:0}.udex-filter-menu[open] .udex-filter-menu__trigger:before{opacity:1}.udex-filter-menu__trigger-icon{width:16px;height:16px;margin-inline-start:var(--udexSpacer8, 8px);color:var(--udex-filter-menu-trigger-icon-default)}.udex-filter-menu__trigger-wrap:hover .udex-filter-menu__trigger-name{color:var(--udex-filter-menu-trigger-color-hover)}.udex-filter-menu__trigger-wrap:hover .udex-filter-menu__trigger-icon{color:var(--udex-filter-menu-trigger-icon-hover)}.udex-filter-menu[open] .udex-filter-menu__trigger-icon{transform:rotate(180deg);color:var(--udex-filter-menu-trigger-icon-active)}.udex-filter-menu[open] .udex-filter-menu__trigger-name{color:var(--udex-filter-menu-trigger-color-active)}.udex-filter-menu__search{width:100%}.udex-filter-menu__footer{width:100%;display:flex;gap:10px}.udex-filter-menu__badge{margin-inline-start:var(--udexSpacer4, 4px)}
|
|
10
|
+
const styleData: StyleData = {packageName:"@sapudex/web-components",fileName:"themes/FilterMenu.css.ts",content:`:host{--udex-filter-menu-trigger-color-default: var(--sapTextColor, #223548);--udex-filter-menu-trigger-color-hover: var(--sapHoverColor, #0070f2);--udex-filter-menu-trigger-color-active: var(--sapShell_Active_TextColor, #0040b0);--udex-filter-menu-trigger-color-disabled: var(--sapTextColor, #223548);--udex-filter-menu-trigger-icon-default: var(--sapContent_IconColor, #223548);--udex-filter-menu-trigger-icon-hover: var(--sapHoverColor, #0070f2);--udex-filter-menu-trigger-icon-active: var(--sapSelectedColor, #0040b0);--udex-filter-menu-trigger-icon-disabled: var(--sapContent_IconColor, #223548);--udex-filter-menu-trigger-prefix-color-default: var(--sapShell_NeutralColor, #475e75);--udex-filter-menu-trigger-prefix-color-hover: var(--sapShell_NeutralColor, #475e75);--udex-filter-menu-trigger-prefix-color-active: var(--sapShell_NeutralColor, #475e75);--udex-filter-menu-trigger-prefix-color-disabled: var(--sapShell_NeutralColor, #475e75);--udex-filter-menu-trigger-selection-bar-background: var(--sapHoverColor, #0070f2);--udex-filter-menu-trigger-outline-border-color: var(--udexColorBlue10, #002A86);--udex-filter-menu-dropdown-width: fit-content;--udex-filter-menu-dropdown-max-width: 640px;display:inline-block}:host([desktop]) .udex-filter-menu__trigger:focus,.udex-filter-menu__trigger:focus-visible{outline:2px solid var(--udex-filter-menu-trigger-outline-border-color);outline-offset:var(--udexSpacer2, 2px);border-radius:var(--udexRadiusM, 8px)}.udex-filter-menu__trigger{font-family:var(--sapFontFamily);font-weight:var(--udexTypographyFontWeightRegular, 400);font-size:var(--udexTypographyBodyXSFontSize, 14px);line-height:var(--udexTypographyBodyLineHeight, 1.5);display:inline-flex;align-items:center;padding:5px 0;position:relative;background:none;border:none}.udex-filter-menu__trigger-wrap{cursor:pointer;display:inline-flex;align-items:center}.udex-filter-menu__trigger-wrap[disabled]{pointer-events:none}.udex-filter-menu__trigger-wrap[disabled]:hover .udex-filter-menu__trigger-name,.udex-filter-menu__trigger-wrap[disabled] .udex-filter-menu__trigger-name{color:var(--udex-filter-menu-trigger-color-disabled);opacity:var(--sapContent_DisabledOpacity, .4)}.udex-filter-menu__trigger-wrap[disabled] .udex-filter-menu__trigger-prefix{color:var(--udex-filter-menu-trigger-prefix-color-disabled)}.udex-filter-menu__trigger-wrap[disabled]:hover .udex-filter-menu__trigger-icon,.udex-filter-menu__trigger-wrap[disabled] .udex-filter-menu__trigger-icon{color:var(--udex-filter-menu-trigger-icon-disabled);opacity:var(--sapContent_DisabledOpacity, .4)}.udex-filter-menu__trigger-prefix{margin-right:var(--udexSpacer8, 8px);color:var(--udex-filter-menu-trigger-prefix-color-default)}.udex-filter-menu__trigger-wrap:hover .udex-filter-menu__trigger-prefix{color:var(--udex-filter-menu-trigger-prefix-color-hover)}.udex-filter-menu[open] .udex-filter-menu__trigger-prefix{color:var(--udex-filter-menu-trigger-prefix-color-active)}.udex-filter-menu__trigger-name{color:var(--udex-filter-menu-trigger-color-default)}.udex-filter-menu__trigger:before{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;border-radius:2px 2px 0;background:var(--udex-filter-menu-trigger-selection-bar-background);opacity:0}.udex-filter-menu[open] .udex-filter-menu__trigger:before{opacity:1}.udex-filter-menu__trigger-icon{width:16px;height:16px;margin-inline-start:var(--udexSpacer8, 8px);color:var(--udex-filter-menu-trigger-icon-default)}.udex-filter-menu__trigger-wrap:hover .udex-filter-menu__trigger-name{color:var(--udex-filter-menu-trigger-color-hover)}.udex-filter-menu__trigger-wrap:hover .udex-filter-menu__trigger-icon{color:var(--udex-filter-menu-trigger-icon-hover)}.udex-filter-menu[open] .udex-filter-menu__trigger-icon{transform:rotate(180deg);color:var(--udex-filter-menu-trigger-icon-active)}.udex-filter-menu[open] .udex-filter-menu__trigger-name{color:var(--udex-filter-menu-trigger-color-active)}.udex-filter-menu__search{width:100%}.udex-filter-menu__footer{width:100%;display:flex;gap:10px}.udex-filter-menu__badge{margin-inline-start:var(--udexSpacer4, 4px)}udex-dropdown{--udex-dropdown-pane-max-width: var(--udex-filter-menu-dropdown-max-width);--udex-dropdown-pane-width: var(--udex-filter-menu-dropdown-width)}
|
|
11
11
|
`};
|
|
12
12
|
export default styleData;
|
|
13
13
|
|
|
@@ -7,7 +7,7 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
|
|
|
7
7
|
registerThemePropertiesLoader("@ui5/webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
|
|
8
8
|
registerThemePropertiesLoader("@sapudex/web-components", "sap_horizon", async () => defaultTheme);
|
|
9
9
|
|
|
10
|
-
const styleData: StyleData = {packageName:"@sapudex/web-components",fileName:"themes/HeroBanner.css.ts",content:`:host{--udexHeroBannerMinHeight: 200px;--udexHeroBannerBackgroundImageObjectFit: contain;--udexHeroBannerVerticalLayoutBackgroundImageAlignment: bottom right;--udexHeroBannerHorizontalLayoutBackgroundImageAlignment: top right;--udexHeroBannerBackroundImageZIndex: 1;--udexHeroBannerBackroundVideoZIndex: 1;--udexHeroBannerContentZIndex: 2;--udexHeroBannerContentPaddingHorizontal: var(--udexGridXSMargins, 24px);--udexHeroBannerContentPaddingVertical: var(--udexGridXSMargins, 24px);--udexHeroBannerBackgroundVideoColor: var(--udexColorNeutralBlack);--udexHeroBannerSlotMaxWidth: calc( 50% - (2 * var(--udexHeroBannerContentPaddingVertical)) );--udexHeroBannerSlotMaxHeight: calc( 100% - (2 * var(--udexHeroBannerContentPaddingHorizontal)) )}.udex-hero-banner{container-type:inline-size;
|
|
10
|
+
const styleData: StyleData = {packageName:"@sapudex/web-components",fileName:"themes/HeroBanner.css.ts",content:`:host{--udexHeroBannerMinHeight: 200px;--udexHeroBannerBackgroundImageObjectFit: contain;--udexHeroBannerVerticalLayoutBackgroundImageAlignment: bottom right;--udexHeroBannerHorizontalLayoutBackgroundImageAlignment: top right;--udexHeroBannerBackroundImageZIndex: 1;--udexHeroBannerBackroundVideoZIndex: 1;--udexHeroBannerContentZIndex: 2;--udexHeroBannerContentPaddingHorizontal: var(--udexGridXSMargins, 24px);--udexHeroBannerContentPaddingVertical: var(--udexGridXSMargins, 24px);--udexHeroBannerContentPaddingVerticalXLtoM: var(--udexSpacer56, 56px);--udexHeroBannerPaddingHorizontalLandM: var(--udexSpacer72);--udexHeroBannerPaddingHorizontalS: var(--udexSpacer48);--udexHeroBannerPaddingHorizontalXS: var(--udexSpacer24);--udexHeroBannerBackgroundVideoColor: var(--udexColorNeutralBlack);--udexHeroBannerSlotMaxWidth: calc( 50% - (2 * var(--udexHeroBannerContentPaddingVertical)) );--udexHeroBannerSlotMaxHeight: calc( 100% - (2 * var(--udexHeroBannerContentPaddingHorizontal)) )}.udex-hero-banner{container-type:inline-size;min-height:var(--udexHeroBannerMinHeight, 200px)}.udex-hero-banner__container{position:relative;max-width:1428px;padding:0}.udex-hero-banner--video{color:var(--udexColorNeutralWhite);justify-content:center}.udex-hero-banner__background-image{position:absolute;width:100%;height:100%;object-fit:var(--udexHeroBannerBackgroundImageObjectFit, contain);object-position:var( --udexHeroBannerVerticalLayoutBackgroundImageAlignment, bottom right );z-index:var(--udexHeroBannerBackroundImageZIndex, 1)}.udex-hero-banner__background-video-wrapper{position:relative;width:100%;max-width:100rem;height:100%}.udex-hero-banner__media-button:dir(rtl){left:0;right:initial}.udex-hero-banner__media-button:hover{cursor:pointer;background:var(--udexColorNeutralBlack70)}.udex-hero-banner__media-button ui5-icon{color:var(--udexColorNeutralWhite);display:flex;align-items:center;justify-content:center;height:1.5rem;width:1.5rem}.udex-hero-banner__background-image:dir(rtl),.udex-hero-banner__background-video-overlay:dir(rtl){transform:scaleX(-1)}.udex-hero-banner__background-video,.udex-hero-banner__background-video-overlay,.udex-hero-banner__media-button{display:none}#udex-hero-banner__content,#udex-hero-banner__additionalContent{display:flex;max-height:var(--udexHeroBannerSlotMaxHeight);flex-basis:100%;flex-grow:1;z-index:var(--udexHeroBannerContentZIndex, 2);padding:0}.udex-hero-banner__content-container{display:flex;gap:var(--udexSpacer48, 48px);padding:var(--udexHeroBannerContentPaddingVerticalXLtoM) var(--udexSpacer84)}@media (max-width: 1599px){.udex-hero-banner__content-container{padding:var(--udexHeroBannerContentPaddingVerticalXLtoM) var(--udexHeroBannerPaddingHorizontalLandM)}}@media (max-width: 979px){.udex-hero-banner__content-container{padding:var(--udexHeroBannerContentPaddingVertical) var(--udexHeroBannerPaddingHorizontalS)}}@media (max-width: 639px){.udex-hero-banner__container{max-width:100%}.udex-hero-banner__content-container{display:flex;flex-direction:column;gap:var(--udexSpacer32, 32px);padding:var(--udexHeroBannerContentPaddingVertical) var(--udexHeroBannerPaddingHorizontalXS)}}@container (min-width: 980px){.udex-hero-banner--video{height:28.125rem;background-color:var(--udexHeroBannerBackgroundVideoColor)!important}.udex-hero-banner__media-button{border:3px solid var(--udexColorNeutralWhite);color:var(--udexColorNeutralWhite);background:var(--udexColorNeutralBlack40);display:flex;justify-content:center;align-items:center;border-radius:50%;padding:0;width:3rem;height:3rem;position:absolute;bottom:0;right:0;margin:var(--udexHeroBannerContentPaddingHorizontal);z-index:3}.udex-hero-banner__background-video{position:absolute;display:block;width:100%;object-fit:cover;object-position:center;height:100%}.udex-hero-banner__background-video-overlay{position:absolute;display:block;width:100%;height:100%;background:linear-gradient(90deg,rgba(18,23,28,.765) 0%,rgba(18,23,28,.09) 100%)}.udex-hero-banner__background-image{object-position:var( --udexHeroBannerHorizontalLayoutBackgroundImageAlignment, top right )}#udex-hero-banner__content,#udex-hero-banner__additionalContent{max-width:var(--udexHeroBannerSlotMaxWidth);flex-basis:var(--udexHeroBannerSlotMaxWidth)}}
|
|
11
11
|
`};
|
|
12
12
|
export default styleData;
|
|
13
13
|
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { StyleData } from "@ui5/webcomponents-base/dist/types.js";
|
|
2
|
+
import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
|
|
3
|
+
|
|
4
|
+
import defaultThemeBase from "@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js";
|
|
5
|
+
import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
|
|
6
|
+
|
|
7
|
+
registerThemePropertiesLoader("@ui5/webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
|
|
8
|
+
registerThemePropertiesLoader("@sapudex/web-components", "sap_horizon", async () => defaultTheme);
|
|
9
|
+
|
|
10
|
+
const styleData: StyleData = {packageName:"@sapudex/web-components",fileName:"themes/InputGroup.css.ts",content:`.udex-input-group__content{display:flex;flex-direction:column;gap:var(--udexSpacer4)}:host([orientation="Horizontal"]) .udex-input-group__content{flex-direction:row;flex-wrap:wrap;gap:var(--udexSpacer12)}.udex-input-group__content{padding-bottom:var(--udexSpacer4)}.hidden-text{display:none}
|
|
11
|
+
`};
|
|
12
|
+
export default styleData;
|
|
13
|
+
|
|
@@ -7,7 +7,7 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
|
|
|
7
7
|
registerThemePropertiesLoader("@ui5/webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
|
|
8
8
|
registerThemePropertiesLoader("@sapudex/web-components", "sap_horizon", async () => defaultTheme);
|
|
9
9
|
|
|
10
|
-
const styleData: StyleData = {packageName:"@sapudex/web-components",fileName:"themes/MastheadItem.css.ts",content:`:host{--udex-masthead-item-background: none;--udex-masthead-item-border: none;--udex-masthead-item-padding: 1.35rem;--udex-masthead-item-font-size: var(--udexTypographyNavigationRegularMFontSize, 14px);--udex-masthead-item-color: var(--udexColorGrey8, #354A5F);--udex-masthead-item-color-hover: var(--udexColorBlue7, #0070f2);--udex-masthead-item-color-active: var(--udexColorBlue9, #0040B0);--udex-masthead-item-border-color: var(--udexColorBlue7, #0070f2);--udex-masthead-item-border-radius: var(--udexRadiusXXS) var(--udexRadiusXXS) 0 0;--udex-masthead-item-border-width: .188rem;--udex-masthead-item-align-content: center;--udex-masthead-item-justify-content: center;--udex-masthead-item-display: inline-flex;--udex-masthead-item-icon-size: 1.125rem;--udex-masthead-item-icon-container-size: 2rem;--udex-masthead-item-outline-border-color: var(--udexColorBlue10, #002A86);--udex-masthead-item-dropdown-box-shadow: var(--sapContent_Shadow2, 0 10px 30px 0 #22364940);--udex-masthead-item-dropdown-position-left: -55px;--udex-masthead-item-dropdown-position-right: -55px;--udex-masthead-item-dropdown-mobile-width: 360px;--udex-masthead-item-dropdown-position: fixed;--udex-masthead-item-dropdown-height:calc(100vh - 60px);--udex-masthead-item-dropdown-zindex: 100;position:relative;display:var(--udex-masthead-item-display);align-items:var(--udex-masthead-item-align-content);justify-content:var(--udex-masthead-item-justify-content)}.udex-masthead-item__dropdown{position:absolute;top:100%;left:var(--udex-masthead-item-dropdown-position-left);z-index:var(--udex-masthead-item-dropdown-zindex)}.udex-masthead-item__button--profile+.udex-masthead-item__dropdown{left:auto;right:0;top:46px;min-width:var(--udex-masthead-item-dropdown-mobile-width)}.udex-masthead-item__button--explore+.udex-masthead-item__dropdown{position:absolute;top:60px;inset-inline-start:0;box-sizing:border-box;inline-size:100%}:host([slot="exploreSAP"]){position:inherit}.udex-masthead-item__dropdown-holder{position:relative;box-shadow:var(--udex-masthead-item-dropdown-box-shadow)}.udex-masthead-item{font-family:var(--sapFontFamily);font-size:var(--udex-masthead-item-font-size);color:var(--udex-masthead-item-color);background:var(--udex-masthead-item-background);border:var(--udex-masthead-item-border);padding:var(--udex-masthead-item-padding) 0;cursor:pointer;text-decoration:none;white-space:nowrap;position:relative}.udex-masthead-item__button--icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px}.udex-masthead-item.udex-masthead-item__button--profile,.udex-masthead-item.udex-masthead-item__button--icon{padding:0}.udex-masthead-item:focus{outline:none}.udex-masthead-item__text{display:flex;align-items:center}:host([desktop]) .udex-masthead-item:focus .udex-masthead-item__text,:host([desktop]) .udex-masthead-item:focus .udex-masthead-item__icon-container,.udex-masthead-item:focus-visible .udex-masthead-item__text,.udex-masthead-item:focus-visible .udex-masthead-item__icon-container{outline:var(--udexRadiusXXS) solid var(--udex-masthead-item-outline-border-color);outline-offset:2px;border-radius:var(--udexRadiusXXS)}:host([desktop]) .udex-masthead-item:focus .udex-masthead-item__icon-container,.udex-masthead-item:focus .udex-masthead-item__icon-container{outline-offset:6px}.udex-masthead-item__button--profile .udex-masthead-item__text{display:inline-block}.udex-masthead-item.udex-masthead-item__button--profile:focus .udex-masthead-item__text{border-radius:50%}.udex-masthead-item__dropdown-icon{margin-inline-start:var(--udexSpacer4)}:host(:hover) .udex-masthead-item,:host(:hover) .udex-masthead-item__icon,:host(:hover) .udex-masthead-item__dropdown-icon{color:var(--udex-masthead-item-color-hover)}:host(:active) .udex-masthead-item,:host([selected]) .udex-masthead-item,:host(:active) .udex-masthead-item-icon,:host([selected]) .udex-masthead-item-icon,:host(:active) .udex-masthead-item__dropdown-icon,:host([selected]) .udex-masthead-item__dropdown-icon{color:var(--udex-masthead-item-color-active)}:host(:active) .udex-masthead-item__dropdown-icon,:host([selected]) .udex-masthead-item__dropdown-icon{transform:rotate(180deg)}:host(:active):not([hide-active-border]) .udex-masthead-item:after,:host([selected]:not([hide-active-border])) .udex-masthead-item:after{content:"";position:absolute;bottom:0;left:0;right:0;height:var(--udex-masthead-item-border-width);background-color:var(--udex-masthead-item-border-color);border-radius:var(--udex-masthead-item-border-radius)}:host(:active) .udex-masthead-item.udex-masthead-item__button--profile:after,:host([selected]) .udex-masthead-item.udex-masthead-item__button--profile:after{bottom:-14px;left:0;right:0}:host([selected]) .udex-masthead-item__icon,:host(:active) .udex-masthead-item__icon{color:var(--udex-masthead-item-color-active)}
|
|
10
|
+
const styleData: StyleData = {packageName:"@sapudex/web-components",fileName:"themes/MastheadItem.css.ts",content:`:host{--udex-masthead-item-background: none;--udex-masthead-item-border: none;--udex-masthead-item-padding: 1.35rem;--udex-masthead-item-font-size: var(--udexTypographyNavigationRegularMFontSize, 14px);--udex-masthead-item-color: var(--udexColorGrey8, #354A5F);--udex-masthead-item-color-hover: var(--udexColorBlue7, #0070f2);--udex-masthead-item-color-active: var(--udexColorBlue9, #0040B0);--udex-masthead-item-border-color: var(--udexColorBlue7, #0070f2);--udex-masthead-item-border-radius: var(--udexRadiusXXS) var(--udexRadiusXXS) 0 0;--udex-masthead-item-border-width: .188rem;--udex-masthead-item-align-content: center;--udex-masthead-item-justify-content: center;--udex-masthead-item-display: inline-flex;--udex-masthead-item-icon-size: 1.125rem;--udex-masthead-item-icon-container-size: 2rem;--udex-masthead-item-outline-border-color: var(--udexColorBlue10, #002A86);--udex-masthead-item-dropdown-box-shadow: var(--sapContent_Shadow2, 0 10px 30px 0 #22364940);--udex-masthead-item-dropdown-position-left: -55px;--udex-masthead-item-dropdown-position-right: -55px;--udex-masthead-item-dropdown-mobile-width: 360px;--udex-masthead-item-dropdown-position: fixed;--udex-masthead-item-dropdown-height:calc(100vh - 60px);--udex-masthead-item-dropdown-zindex: 100;position:relative;display:var(--udex-masthead-item-display);align-items:var(--udex-masthead-item-align-content);justify-content:var(--udex-masthead-item-justify-content)}.udex-masthead-item__dropdown{position:absolute;top:100%;left:var(--udex-masthead-item-dropdown-position-left);z-index:var(--udex-masthead-item-dropdown-zindex)}.udex-masthead-item__button--profile+.udex-masthead-item__dropdown{left:auto;right:0;top:46px;min-width:var(--udex-masthead-item-dropdown-mobile-width)}.udex-masthead-item__button--explore+.udex-masthead-item__dropdown{position:absolute;top:60px;inset-inline-start:0;box-sizing:border-box;inline-size:100%}:host([slot="exploreSAP"]){position:inherit}.udex-masthead-item__dropdown-holder{position:relative;box-shadow:var(--udex-masthead-item-dropdown-box-shadow)}.udex-masthead-item{font-family:var(--sapFontFamily);font-size:var(--udex-masthead-item-font-size);color:var(--udex-masthead-item-color);background:var(--udex-masthead-item-background);border:var(--udex-masthead-item-border);padding:var(--udex-masthead-item-padding) 0;cursor:pointer;text-decoration:none;white-space:nowrap;position:relative}.udex-masthead-item__button--icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px}.udex-masthead-item.udex-masthead-item__button--profile,.udex-masthead-item.udex-masthead-item__button--icon{padding:0}.udex-masthead-item:focus{outline:none}.udex-masthead-item__text{display:flex;align-items:center}:host([desktop]) .udex-masthead-item:focus .udex-masthead-item__text,:host([desktop]) .udex-masthead-item:focus .udex-masthead-item__icon-container,.udex-masthead-item:focus-visible .udex-masthead-item__text,.udex-masthead-item:focus-visible .udex-masthead-item__icon-container{outline:var(--udexRadiusXXS) solid var(--udex-masthead-item-outline-border-color);outline-offset:2px;border-radius:var(--udexRadiusXXS)}:host([desktop]) .udex-masthead-item:focus .udex-masthead-item__icon-container,.udex-masthead-item:focus .udex-masthead-item__icon-container{outline-offset:6px}.udex-masthead-item__button--profile .udex-masthead-item__text{display:inline-block}.udex-masthead-item.udex-masthead-item__button--profile:focus .udex-masthead-item__text{border-radius:50%}.udex-masthead-item__dropdown-icon{margin-inline-start:var(--udexSpacer4)}:host(:hover) .udex-masthead-item,:host(:hover) .udex-masthead-item__icon,:host(:hover) .udex-masthead-item__dropdown-icon{color:var(--udex-masthead-item-color-hover)}:host(:active) .udex-masthead-item,:host([selected]) .udex-masthead-item,:host(:active) .udex-masthead-item-icon,:host([selected]) .udex-masthead-item-icon,:host(:active) .udex-masthead-item__dropdown-icon,:host([selected]) .udex-masthead-item__dropdown-icon{color:var(--udex-masthead-item-color-active)}:host(:active) .udex-masthead-item__dropdown-icon,:host([selected]) .udex-masthead-item__dropdown-icon{transform:rotate(180deg)}:host(:active):not([hide-active-border]) .udex-masthead-item:after,:host([selected]:not([hide-active-border])) .udex-masthead-item:after{content:"";position:absolute;bottom:0;left:0;right:0;height:var(--udex-masthead-item-border-width);background-color:var(--udex-masthead-item-border-color);border-radius:var(--udex-masthead-item-border-radius)}:host(:active) .udex-masthead-item.udex-masthead-item__button--icon:after,:host([selected]) .udex-masthead-item.udex-masthead-item__button--icon:after,:host(:active) .udex-masthead-item.udex-masthead-item__button--profile:after,:host([selected]) .udex-masthead-item.udex-masthead-item__button--profile:after{bottom:-14px;left:0;right:0}:host([selected]) .udex-masthead-item__icon,:host(:active) .udex-masthead-item__icon{color:var(--udex-masthead-item-color-active)}.udex-masthead-item__icon-container{display:flex;align-items:center;justify-content:center}.udex-masthead-item__icon{width:var(--udex-masthead-item-icon-size);height:var(--udex-masthead-item-icon-size);color:var(--udex-masthead-item-color)}.udex-masthead-item__avatar-container{display:flex;align-items:center;justify-content:center;width:auto;height:auto}:host(:dir(rtl)) .udex-masthead-item__dropdown{right:var(--udex-masthead-item-dropdown-position-right);left:auto}:host(:dir(rtl)) .udex-masthead-item__button--explore+.udex-masthead-item__dropdown,:host(:dir(rtl)) .udex-masthead-item__button--profile+.udex-masthead-item__dropdown{left:0;right:auto}:host([slot="exploreSAP"]) ::slotted([slot="dropdown"]){--udex-masthead-menu-padding-desktop: 32px var(--udexSpacer72);--udex-masthead-menu-column-width: auto;--udex-masthead-menu-grid-template-columns: repeat(4, calc(25% - var(--udex-masthead-menu-column_gap)*3/4))}@media (max-width: 1279px){.udex-masthead-item__button--profile+.udex-masthead-item__dropdown,.udex-masthead-item__dropdown{top:60px;right:0;left:auto}:host(:dir(rtl)) .udex-masthead-item__dropdown{left:0;right:auto}.udex-masthead-item__dropdown{position:var(--udex-masthead-item-dropdown-position);height:var(--udex-masthead-item-dropdown-height);width:var(--udex-masthead-item-dropdown-mobile-width);top:60px}.udex-masthead-item__dropdown-holder{height:100%;box-shadow:none;overflow:auto}.udex-masthead-item__dropdown:after{box-shadow:var(--udex-masthead-shell-dropdown-shadow);pointer-events:none;content:"";position:absolute;inset:-60px 0 0}}@media (max-width: 979px){.udex-masthead-item__dropdown{width:100%}}
|
|
11
11
|
`};
|
|
12
12
|
export default styleData;
|
|
13
13
|
|
|
@@ -7,7 +7,7 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
|
|
|
7
7
|
registerThemePropertiesLoader("@ui5/webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
|
|
8
8
|
registerThemePropertiesLoader("@sapudex/web-components", "sap_horizon", async () => defaultTheme);
|
|
9
9
|
|
|
10
|
-
const styleData: StyleData = {packageName:"@sapudex/web-components",fileName:"themes/MastheadMenuItem.css.ts",content:`:host{--udex-masthead-menu-item-header-padding-desktop: var(--udexSpacer8) var(--udexSpacer12) var(--udexSpacer12) var(--udexSpacer8);--udex-masthead-menu-item-header-padding-mobile: var(--udexSpacer16) var(--udexSpacer12) var(--udexSpacer16) var(--udexSpacer8);--udex-masthead-menu-item-padding-desktop: var(--udexSpacer8) var(--udexSpacer12) var(--udexSpacer8) var(--udexSpacer8);--udex-masthead-menu-item-padding-mobile: var(--udexSpacer16) var(--udexSpacer12) var(--udexSpacer16) var(--udexSpacer8);--udex-masthead-menu-item-padding-mobile-with-badge-vertical: var(--udexSpacer16);--udex-masthead-menu-item-padding-mobile-start-with-badge: var(--udexSpacer8);--udex-masthead-menu-item-padding-mobile-end-with-badge: var(--udexSpacer48);--udex-masthead-menu-item-color: var(--sapList_TextColor, #000);--udex-masthead-menu-item-border-color: var(--udexColorGrey2, #EAECEE);--udex-masthead-menu-item-focus: var(--udexColorBlue10, #002A86);--udex-masthead-menu-item-font-family: var(--sapFontFamily, sans-serif);--udex-masthead-menu-item-font-size: var(--udexTypographyBodyXSFontSize, 14px);--udex-masthead-menu-item-explore-background: var(--udexColorBlue7, #0070F2);--udex-masthead-menu-item-explore-background-hover: var(--udexColorBlue9, #0040B0);--udex-masthead-menu-item-explore-background-active: var(--udexColorNeutralWhite, #FFF);--udex-masthead-menu-item-explore-border-color-active: var(--udexColorBlue9, #0040B0);--udex-masthead-menu-item-explore-color-active: var(--udexColorBlue9, #0040B0);--udex-masthead-menu-item-explore-color: var(--sapShell_Color, #FFF);--udex-masthead-menu-item-explore-icon-color: var(--sapShell_Color, #FFF);--udex-masthead-menu-item-explore-icon-active-color: var(--udexColorBlue9, #0040B0);--udex-masthead-menu-item-explore-padding: var(--sapShell_Color, #FFF);--udex-masthead-menu-item-explore-focus: var(--sapShell_Color, #FFF);display:flex;justify-content:space-between;align-items:center;position:relative}:host([is-explore]) .udex-masthead-menu-item{color:var(--udex-masthead-menu-item-explore-color);background:var(--udex-masthead-menu-item-explore-background);padding:var(--udexSpacer24);box-sizing:border-box}:host([is-explore]:hover) .udex-masthead-menu-item{background:var(--udex-masthead-menu-item-explore-background-hover);text-decoration:none}:host([is-explore]:hover:active) .udex-masthead-menu-item{background:var(--udex-masthead-menu-item-explore-background-active);border:1px solid var(--udex-masthead-menu-item-explore-border-color-active);color:var(--udex-masthead-menu-item-explore-color-active)}:host([is-explore][desktop]) .udex-masthead-menu-item:focus,:host([is-explore]) .udex-masthead-menu-item:focus-visible{outline:none;outline-offset:0;border-radius:0}:host([is-explore][desktop]) .udex-masthead-menu-item:focus:before,:host([is-explore]) .udex-masthead-menu-item:focus-visible:before{outline:var(--udexRadiusXXS) solid var(--udex-masthead-menu-item-explore-focus);border-radius:var(--udexRadiusM, 8px);content:"";position:absolute;inset:0;outline-offset:-4px;pointer-events:none}:host([is-explore]:hover:active)::part(right){color:var(--udex-masthead-menu-item-explore-icon-active-color)}:host([is-explore])::part(right){color:var(--udex-masthead-menu-item-explore-icon-color)}:host([has-border])::part(menu-item-button),:host([has-border])::part(menu-item-link),:host([has-border])::part(menu-item){border-bottom:1px solid var(--udex-masthead-menu-item-border-color)}.udex-masthead-menu-item{font-family:var(--udex-masthead-menu-item-font-family);font-size:var(--udex-masthead-menu-item-font-size);line-height:var(--udexTypographyHeadingLineHeight, 1.1);font-weight:var(--udexTypographyFontWeightRegular, 400);color:var(--udex-masthead-menu-item-color);padding:var(--udex-masthead-menu-item-padding-desktop);text-decoration:none;box-sizing:border-box}span.udex-masthead-menu-item:hover{text-decoration:none}button.udex-masthead-menu-item{border:none;background:none;cursor:pointer;display:flex;justify-content:space-between;width:100%}.udex-masthead-menu-item:hover{text-decoration:underline}:host([desktop]) .udex-masthead-menu-item:focus,.udex-masthead-menu-item:focus-visible{outline:var(--udexRadiusXXS) solid var(--udex-masthead-menu-item-focus);outline-offset:- var(--udexSpacer2, 2px);border-radius:var(--udexRadiusM, 8px)}.udex-masthead-menu-item.udex-masthead-menu-item_is-header{padding:var(--udex-masthead-menu-item-header-padding-desktop);width:100%}.udex-masthead-menu-item_is-header{font-weight:var(--udexTypographyFontWeightMedium, 500);display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;white-space:normal;margin:0}.udex-masthead-menu-item__label{display:block;width:100%}.udex-masthead-menu-item__text-with-icon{white-space:nowrap}.udex-masthead-menu-item__icon{margin-inline-start:var(--udexSpacer4);min-width:14px;width:14px;height:14px;margin-bottom:-3px}.udex-masthead-menu-item_is-list{display:inline-flex;align-items:center;justify-content:space-between}.udex-masthead-menu-item-badge{margin-inline-start:var(--udexSpacer8)}.udex-masthead-menu-item_is-header .udex-masthead-menu-item_icon-action{margin-inline-end:auto}@media (max-width: 1279px){
|
|
10
|
+
const styleData: StyleData = {packageName:"@sapudex/web-components",fileName:"themes/MastheadMenuItem.css.ts",content:`:host{--udex-masthead-menu-item-header-padding-desktop: var(--udexSpacer8) var(--udexSpacer12) var(--udexSpacer12) var(--udexSpacer8);--udex-masthead-menu-item-header-padding-mobile: var(--udexSpacer16) var(--udexSpacer12) var(--udexSpacer16) var(--udexSpacer8);--udex-masthead-menu-item-padding-desktop: var(--udexSpacer8) var(--udexSpacer12) var(--udexSpacer8) var(--udexSpacer8);--udex-masthead-menu-item-padding-mobile: var(--udexSpacer16) var(--udexSpacer12) var(--udexSpacer16) var(--udexSpacer8);--udex-masthead-menu-item-padding-mobile-with-badge-vertical: var(--udexSpacer16);--udex-masthead-menu-item-padding-mobile-start-with-badge: var(--udexSpacer8);--udex-masthead-menu-item-padding-mobile-end-with-badge: var(--udexSpacer48);--udex-masthead-menu-item-color: var(--sapList_TextColor, #000);--udex-masthead-menu-item-border-color: var(--udexColorGrey2, #EAECEE);--udex-masthead-menu-item-focus: var(--udexColorBlue10, #002A86);--udex-masthead-menu-item-font-family: var(--sapFontFamily, sans-serif);--udex-masthead-menu-item-font-size: var(--udexTypographyBodyXSFontSize, 14px);--udex-masthead-menu-item-explore-background: var(--udexColorBlue7, #0070F2);--udex-masthead-menu-item-explore-background-hover: var(--udexColorBlue9, #0040B0);--udex-masthead-menu-item-explore-background-active: var(--udexColorNeutralWhite, #FFF);--udex-masthead-menu-item-explore-border-color-active: var(--udexColorBlue9, #0040B0);--udex-masthead-menu-item-explore-color-active: var(--udexColorBlue9, #0040B0);--udex-masthead-menu-item-explore-color: var(--sapShell_Color, #FFF);--udex-masthead-menu-item-explore-icon-color: var(--sapShell_Color, #FFF);--udex-masthead-menu-item-explore-icon-active-color: var(--udexColorBlue9, #0040B0);--udex-masthead-menu-item-explore-padding: var(--sapShell_Color, #FFF);--udex-masthead-menu-item-explore-focus: var(--sapShell_Color, #FFF);display:flex;justify-content:space-between;align-items:center;position:relative}:host([is-explore]) .udex-masthead-menu-item{color:var(--udex-masthead-menu-item-explore-color);background:var(--udex-masthead-menu-item-explore-background);padding:var(--udexSpacer24);box-sizing:border-box}:host([is-explore]:hover) .udex-masthead-menu-item{background:var(--udex-masthead-menu-item-explore-background-hover);text-decoration:none}:host([is-explore]:hover:active) .udex-masthead-menu-item{background:var(--udex-masthead-menu-item-explore-background-active);border:1px solid var(--udex-masthead-menu-item-explore-border-color-active);color:var(--udex-masthead-menu-item-explore-color-active)}:host([is-explore][desktop]) .udex-masthead-menu-item:focus,:host([is-explore]) .udex-masthead-menu-item:focus-visible{outline:none;outline-offset:0;border-radius:0}:host([is-explore][desktop]) .udex-masthead-menu-item:focus:before,:host([is-explore]) .udex-masthead-menu-item:focus-visible:before{outline:var(--udexRadiusXXS) solid var(--udex-masthead-menu-item-explore-focus);border-radius:var(--udexRadiusM, 8px);content:"";position:absolute;inset:0;outline-offset:-4px;pointer-events:none}:host([is-explore]:hover:active)::part(right){color:var(--udex-masthead-menu-item-explore-icon-active-color)}:host([is-explore])::part(right){color:var(--udex-masthead-menu-item-explore-icon-color)}:host([has-border])::part(menu-item-button),:host([has-border])::part(menu-item-link),:host([has-border])::part(menu-item){border-bottom:1px solid var(--udex-masthead-menu-item-border-color)}.udex-masthead-menu-item{font-family:var(--udex-masthead-menu-item-font-family);font-size:var(--udex-masthead-menu-item-font-size);line-height:var(--udexTypographyHeadingLineHeight, 1.1);font-weight:var(--udexTypographyFontWeightRegular, 400);color:var(--udex-masthead-menu-item-color);padding:var(--udex-masthead-menu-item-padding-desktop);text-decoration:none;box-sizing:border-box}span.udex-masthead-menu-item:hover{text-decoration:none}button.udex-masthead-menu-item{border:none;background:none;cursor:pointer;display:flex;justify-content:space-between;width:100%}.udex-masthead-menu-item:hover{text-decoration:underline}:host([desktop]) .udex-masthead-menu-item:focus,.udex-masthead-menu-item:focus-visible{outline:var(--udexRadiusXXS) solid var(--udex-masthead-menu-item-focus);outline-offset:- var(--udexSpacer2, 2px);border-radius:var(--udexRadiusM, 8px)}.udex-masthead-menu-item.udex-masthead-menu-item_is-header{padding:var(--udex-masthead-menu-item-header-padding-desktop);width:100%}.udex-masthead-menu-item_is-header{font-weight:var(--udexTypographyFontWeightMedium, 500);display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;white-space:normal;margin:0}.udex-masthead-menu-item__label{display:block;width:100%}.udex-masthead-menu-item__text-with-icon{white-space:nowrap}.udex-masthead-menu-item__icon{margin-inline-start:var(--udexSpacer4);min-width:14px;width:14px;height:14px;margin-bottom:-3px}.udex-masthead-menu-item_is-list{display:inline-flex;align-items:center;justify-content:space-between}.udex-masthead-menu-item-badge{margin-inline-start:var(--udexSpacer8)}.udex-masthead-menu-item_is-header .udex-masthead-menu-item_icon-action{margin-inline-end:auto}@media (max-width: 1279px){.udex-masthead-menu-item{padding:var(--udex-masthead-menu-item-padding-mobile)}.udex-masthead-menu-item.udex-masthead-menu-item_badge{padding-block-start:var(--udex-masthead-menu-item-padding-mobile-with-badge-vertical);padding-inline-end:var(--udex-masthead-menu-item-padding-mobile-end-with-badge);padding-inline-start:var(--udex-masthead-menu-item-padding-mobile-start-with-badge)}.udex-masthead-menu-item.udex-masthead-menu-item_is-header{padding:var(--udex-masthead-menu-item-header-padding-mobile)}.udex-masthead-menu-item_is-header{width:100%}.udex-masthead-menu-item_is-list{display:flex;align-items:center;justify-content:space-between;width:100%}.udex-masthead-menu-item_icon-left{margin-inline-end:auto}.udex-masthead-menu-item_icon-right{margin-inline-start:auto}.udex-masthead-menu-item_icon-left+.udex-masthead-menu-item_icon-action{margin-inline-end:inherit}.udex-masthead-menu-item-badge{position:absolute;top:50%;right:var(--udexSpacer16);transform:translateY(-50%);margin-inline-start:0;pointer-events:none}.udex-masthead-menu-item-badge:dir(rtl){right:auto;left:var(--udexSpacer16)}}
|
|
11
11
|
`};
|
|
12
12
|
export default styleData;
|
|
13
13
|
|
|
@@ -7,7 +7,7 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
|
|
|
7
7
|
registerThemePropertiesLoader("@ui5/webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
|
|
8
8
|
registerThemePropertiesLoader("@sapudex/web-components", "sap_horizon", async () => defaultTheme);
|
|
9
9
|
|
|
10
|
-
const styleData: StyleData = {packageName:"@sapudex/web-components",fileName:"themes/MastheadShell.css.ts",content:`:host{--udex-masthead-shell-background: var(--udexColorGrey1, #F5F6F7);--udex-masthead-shell-dropdown-shadow: var(--sapContent_Shadow2, 0 10px 30px 0 #22364940);--udex-masthead-shell-site-label-font-size: var(--udexTypographyNavigationRegularXLFontSize, 16px);--udex-masthead-shell-site-label-line-height: 24px;--udex-masthead-shell-site-label-font-weight: var(--udexTypographyFontWeightBold, 700);--udex-masthead-shell-site-label-text-decoration: none;--udex-masthead-shell-site-label-color: var(--udexColorGrey8, #354A5F);--udex-masthead-shell-site-label-color-hover: var(--udexColorBlue7, #0070F2);--udex-grid-gutter: 3rem;--udex-grid-margin-m: 4.5rem;--udex-grid-margin-l: 4.5rem;--udex-grid-margin-xl: 5.25rem;--udex-column-width-l: calc((100% - 2 * var(--udex-grid-margin-l) - 11 * var(--udex-grid-gutter)) / 12);--udex-column-width-xl: calc((100% - 2 * var(--udex-grid-margin-xl) - 11 * var(--udex-grid-gutter)) / 12);--udex-masthead-shell-search-container-width-l: calc(8 * var(--udex-column-width-l) + 7 * var(--udex-grid-gutter));--udex-masthead-shell-search-container-width-xl: calc(8 * var(--udex-column-width-xl) + 7 * var(--udex-grid-gutter));--udex-masthead-shell-search-column-width-l: calc((100% - 7 * var(--udex-grid-gutter)) / 8);--udex-masthead-shell-search-column-width-xl: calc((100% - 7 * var(--udex-grid-gutter)) / 8);--udex-masthead-shell-search-width-l: calc(5 * var(--udex-masthead-shell-search-column-width-l) + 4 * var(--udex-grid-gutter));--udex-masthead-shell-search-width-xl: calc(5 * var(--udex-masthead-shell-search-column-width-xl) + 4 * var(--udex-grid-gutter));--udex-masthead-shell-close-button-divider-color: var(--udexCoreDividerLight, #D5DADD);--udex-masthead-shell-z-ndex: 10}:host{position:relative;display:block;width:100%;container-type:inline-size;background:var(--udex-masthead-shell-background);z-index:var(--udex-masthead-shell-z-ndex)}:host([sticky-position]){position:sticky;top:0}.udex-masthead-shell__search-container{position:absolute;top:0;right:var(--udexSpacer84);display:flex;align-items:center;justify-content:space-between;width:var(--udex-masthead-shell-search-container-width-xl);height:100%;background:var(--udex-masthead-shell-background);z-index:1}.udex-masthead-shell__search-container:dir(rtl){left:var(--udexSpacer84);right:auto}.udex-masthead-shell{display:flex;justify-content:space-between;align-items:center;position:relative;padding:0 var(--udexSpacer84);max-width:1428px;margin:0 auto;height:60px}:host ::slotted(udex-search){width:var(--udex-masthead-shell-search-width-xl)}.udex-masthead-shell__logo{margin-inline-end:var(--udexSpacer16);width:64px}.udex-masthead-shell__logo-image{width:100%}.udex-masthead-shell__logo--link{cursor:pointer}.udex-masthead-shell__logo--link:focus,.udex-masthead-shell__logo--link:focus-visible,.udex-masthead-shell__site-label--link:focus,.udex-masthead-shell__site-label--link:focus-visible{outline:var(--udexRadiusXXS) solid var(--udexColorBlue10);outline-offset:2px;border-radius:var(--udexRadiusXXS)}.udex-masthead-shell__site-label{font-family:var(--sapFontFamily);font-size:var(--udex-masthead-shell-site-label-font-size);line-height:var(--udex-masthead-shell-site-label-line-height);color:var(--udex-masthead-shell-site-label-color);font-weight:var(--udex-masthead-shell-site-label-font-weight);text-decoration:var(--udex-masthead-shell-site-label-text-decoration);margin-inline-end:var(--udexSpacer24);white-space:nowrap}.udex-masthead-shell__site-label--link:hover{color:var(--udex-masthead-shell-site-label-color-hover)}.udex-masthead-shell__main-content{display:grid;grid:"logo siteLabel mainMenu " / auto auto 1fr;align-items:center;padding-inline-end:var(--udexSpacer20)}.udex-masthead-shell__main-menu{display:flex;align-items:center;gap:var(--udexSpacer24);max-width:100%}.udex-masthead-shell__right-menu{display:flex;align-items:center}.udex-masthead-shell__explore{white-space:nowrap;margin-inline-end:var(--
|
|
10
|
+
const styleData: StyleData = {packageName:"@sapudex/web-components",fileName:"themes/MastheadShell.css.ts",content:`:host{--udex-masthead-shell-background: var(--udexColorGrey1, #F5F6F7);--udex-masthead-shell-dropdown-shadow: var(--sapContent_Shadow2, 0 10px 30px 0 #22364940);--udex-masthead-shell-site-label-font-size: var(--udexTypographyNavigationRegularXLFontSize, 16px);--udex-masthead-shell-site-label-line-height: 24px;--udex-masthead-shell-site-label-font-weight: var(--udexTypographyFontWeightBold, 700);--udex-masthead-shell-site-label-text-decoration: none;--udex-masthead-shell-site-label-color: var(--udexColorGrey8, #354A5F);--udex-masthead-shell-site-label-color-hover: var(--udexColorBlue7, #0070F2);--udex-grid-gutter: 3rem;--udex-grid-margin-m: 4.5rem;--udex-grid-margin-l: 4.5rem;--udex-grid-margin-xl: 5.25rem;--udex-column-width-l: calc((100% - 2 * var(--udex-grid-margin-l) - 11 * var(--udex-grid-gutter)) / 12);--udex-column-width-xl: calc((100% - 2 * var(--udex-grid-margin-xl) - 11 * var(--udex-grid-gutter)) / 12);--udex-masthead-shell-search-container-width-l: calc(8 * var(--udex-column-width-l) + 7 * var(--udex-grid-gutter));--udex-masthead-shell-search-container-width-xl: calc(8 * var(--udex-column-width-xl) + 7 * var(--udex-grid-gutter));--udex-masthead-shell-search-column-width-l: calc((100% - 7 * var(--udex-grid-gutter)) / 8);--udex-masthead-shell-search-column-width-xl: calc((100% - 7 * var(--udex-grid-gutter)) / 8);--udex-masthead-shell-search-width-l: calc(5 * var(--udex-masthead-shell-search-column-width-l) + 4 * var(--udex-grid-gutter));--udex-masthead-shell-search-width-xl: calc(5 * var(--udex-masthead-shell-search-column-width-xl) + 4 * var(--udex-grid-gutter));--udex-masthead-shell-close-button-divider-color: var(--udexCoreDividerLight, #D5DADD);--udex-masthead-shell-z-ndex: 10}:host{position:relative;display:block;width:100%;container-type:inline-size;background:var(--udex-masthead-shell-background);z-index:var(--udex-masthead-shell-z-ndex)}:host([sticky-position]){position:sticky;top:0}.udex-masthead-shell__search-container{position:absolute;top:0;right:var(--udexSpacer84);display:flex;align-items:center;justify-content:space-between;width:var(--udex-masthead-shell-search-container-width-xl);height:100%;background:var(--udex-masthead-shell-background);z-index:1}.udex-masthead-shell__search-container:dir(rtl){left:var(--udexSpacer84);right:auto}.udex-masthead-shell{display:flex;justify-content:space-between;align-items:center;position:relative;padding:0 var(--udexSpacer84);max-width:1428px;margin:0 auto;height:60px}:host ::slotted(udex-search){width:var(--udex-masthead-shell-search-width-xl)}.udex-masthead-shell__logo{margin-inline-end:var(--udexSpacer16);width:64px}.udex-masthead-shell__logo-image{width:100%}.udex-masthead-shell__logo--link{cursor:pointer}.udex-masthead-shell__logo--link:focus,.udex-masthead-shell__logo--link:focus-visible,.udex-masthead-shell__site-label--link:focus,.udex-masthead-shell__site-label--link:focus-visible{outline:var(--udexRadiusXXS) solid var(--udexColorBlue10);outline-offset:2px;border-radius:var(--udexRadiusXXS)}.udex-masthead-shell__site-label{font-family:var(--sapFontFamily);font-size:var(--udex-masthead-shell-site-label-font-size);line-height:var(--udex-masthead-shell-site-label-line-height);color:var(--udex-masthead-shell-site-label-color);font-weight:var(--udex-masthead-shell-site-label-font-weight);text-decoration:var(--udex-masthead-shell-site-label-text-decoration);margin-inline-end:var(--udexSpacer24);white-space:nowrap}.udex-masthead-shell__site-label--link:hover{color:var(--udex-masthead-shell-site-label-color-hover)}.udex-masthead-shell__main-content{display:grid;grid:"logo siteLabel mainMenu " / auto auto 1fr;align-items:center;padding-inline-end:var(--udexSpacer20)}.udex-masthead-shell__main-menu{display:flex;align-items:center;gap:var(--udexSpacer24);max-width:100%}.udex-masthead-shell__right-menu{display:flex;align-items:center;gap:var(--udexSpacer8)}.udex-masthead-shell__explore{white-space:nowrap;margin-inline-end:var(--udexSpacer12)}.udex-masthead-shell__cart,.udex-masthead-shell__search-icon,.udex-masthead-shell__profile{display:flex;align-items:center}.udex-masthead-shell__item{margin-inline-end:var(--udexSpacer4)}.udex-masthead-shell__menu-btn{height:18px}.udex-masthead-shell__close-btn{position:relative;margin-inline-start:var(--udexSpacer12)}.udex-masthead-shell__close-btn:before{content:"";position:absolute;left:-12px;top:0;bottom:0;height:32px;border-radius:var(--udexRadiusXXS);width:1px;background:var(--udex-masthead-shell-close-button-divider-color)}:dir(rtl) .udex-masthead-shell__close-btn:before{left:auto;right:-12px}:dir(rtl) .udex-masthead-mobile-wrap{right:auto;left:0}.udex-masthead-shell__close-btn:hover{color:var(--udex-masthead-shell-site-label-color-hover)}.udex-masthead-shell__close-btn,.udex-masthead-shell__menu-btn{display:none}@media (max-width: 1599px){.udex-masthead-shell{padding-left:var(--udexSpacer72);padding-right:var(--udexSpacer72)}.udex-masthead-shell__search-container{right:var(--udexSpacer72);width:var(--udex-masthead-shell-search-container-width-l)}.udex-masthead-shell__search-container:dir(rtl){left:var(--udexSpacer72);right:auto}:host ::slotted(udex-search){width:var(--udex-masthead-shell-search-width-l)}}@media (max-width: 1279px){.udex-masthead-shell__cart,.udex-masthead-shell__profile,.udex-masthead-shell__search-icon,.udex-masthead-shell__explore,.udex-masthead-shell__main-menu,.udex-masthead-shell__site-label{display:none}.udex-masthead-shell__menu-btn,.udex-masthead-shell_mobile-menu-open .udex-masthead-shell__cart,.udex-masthead-shell_mobile-menu-open .udex-masthead-shell__profile,.udex-masthead-shell_mobile-menu-open .udex-masthead-shell__close-btn{display:flex}.udex-masthead-shell__right-menu{gap:var(--udexSpacer12)}}@media (max-width: 979px){.udex-masthead-shell{padding:0 var(--udexSpacer48)}.udex-masthead-shell_mobile-menu-open .udex-masthead-shell__logo{display:none}}@media (max-width: 639px){.udex-masthead-shell{padding:0 var(--udexSpacer24)}}
|
|
11
11
|
`};
|
|
12
12
|
export default styleData;
|
|
13
13
|
|