@sapudex/web-components 2.12.1 → 2.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cypress/specs/EventRibbon.cy.tsx +1 -1
- package/cypress/specs/HeroBanner.cy.tsx +174 -0
- package/cypress/support/component-imports.instrumented.ts +2 -0
- package/cypress/support/component-imports.src.ts +2 -0
- package/dist/EventRibbonTemplate.js +2 -1
- package/dist/EventRibbonTemplate.js.map +1 -1
- package/dist/HeroBanner.d.ts +8 -0
- package/dist/HeroBanner.js +6 -0
- package/dist/HeroBanner.js.map +1 -1
- package/dist/PromoTile.d.ts +12 -22
- package/dist/PromoTile.js +6 -7
- package/dist/PromoTile.js.map +1 -1
- package/dist/Search.js +1 -1
- package/dist/Search.js.map +1 -1
- package/dist/assets/{InputSuggestions-CgAp8PwR.js → InputSuggestions-FI3fjOZ9.js} +1 -1
- package/dist/assets/{ListItemStandardExpandableTextTemplate-D5HEHY33.js → ListItemStandardExpandableTextTemplate-CkvW90wq.js} +1 -1
- package/dist/assets/{bundle.esm-CjcqU0ib.js → bundle.esm-BrqOd5tw.js} +129 -129
- package/dist/css/themes/EventRibbon.css +1 -1
- package/dist/css/themes/Link.css +1 -1
- package/dist/css/themes/RatingIndicator.css +1 -1
- package/dist/css/themes/Slider.css +1 -1
- package/dist/custom-elements-internal.json +179 -151
- package/dist/custom-elements.json +160 -136
- package/dist/generated/templates/HeroBannerTemplate.lit.js +2 -1
- package/dist/generated/templates/HeroBannerTemplate.lit.js.map +1 -1
- package/dist/generated/themes/EventRibbon.css.d.ts +1 -1
- package/dist/generated/themes/EventRibbon.css.js +1 -1
- package/dist/generated/themes/EventRibbon.css.js.map +1 -1
- package/dist/generated/themes/Link.css.d.ts +1 -1
- package/dist/generated/themes/Link.css.js +1 -1
- package/dist/generated/themes/Link.css.js.map +1 -1
- package/dist/generated/themes/RatingIndicator.css.d.ts +1 -1
- package/dist/generated/themes/RatingIndicator.css.js +1 -1
- package/dist/generated/themes/RatingIndicator.css.js.map +1 -1
- package/dist/generated/themes/Slider.css.d.ts +1 -1
- package/dist/generated/themes/Slider.css.js +1 -1
- package/dist/generated/themes/Slider.css.js.map +1 -1
- package/dist/types/PromoTile.d.ts +1 -1
- package/dist/types/PromoTile.js +57 -57
- package/dist/types/PromoTile.js.map +1 -1
- package/dist/vscode.html-custom-data.json +2 -2
- package/dist/web-types.json +26 -13
- package/package.json +1 -1
- package/src/EventRibbonTemplate.tsx +2 -1
- package/src/HeroBanner.hbs +3 -0
- package/src/HeroBanner.ts +14 -0
- package/src/PromoTile.ts +16 -26
- package/src/Search.ts +1 -1
- package/src/generated/templates/HeroBannerTemplate.lit.ts +2 -1
- package/src/generated/themes/EventRibbon.css.ts +1 -1
- package/src/generated/themes/Link.css.ts +1 -1
- package/src/generated/themes/RatingIndicator.css.ts +1 -1
- package/src/generated/themes/Slider.css.ts +1 -1
- package/src/themes/EventRibbon.css +17 -6
- package/src/themes/Link.css +4 -2
- package/src/types/PromoTile.ts +1 -1
|
@@ -5,5 +5,5 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
|
|
|
5
5
|
|
|
6
6
|
registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
|
|
7
7
|
registerThemePropertiesLoader("@" + "s" + "a" + "p" + "u" + "d" + "e" + "x" + "/" + "w" + "e" + "b" + "-" + "c" + "o" + "m" + "p" + "o" + "n" + "e" + "n" + "t" + "s", "sap_horizon", async () => defaultTheme);
|
|
8
|
-
export default `:host{--udex_rating_indicator_readonly_item_width: 1.5rem;--udex_rating_indicator_readonly_item_height: 1.5rem;--udex_rating_indicator_item_width: 1.5rem;--udex_rating_indicator_item_height: 1.5rem;--udex_rating_indicator_mobile_item_padding: 10px;--udex_rating_indicator_disabled_opacity: .4;--udex-rating_indicator_items_gap: 8px;--udex-rating_indicator_mobile_items_gap: 8px;--udex-rating_indicator_rated_color: var(--sapContent_RatedColor, #E76500);--udex-rating_indicator_unrated_color: var(--sapContent_RatedColor, #E76500);--udex-rating_indicator_read-only-unrated_color: var(--udexColorGrey6 ,#5B738B);--udex-rating_indicator_disabled-unrated_color: var(--udexColorMango6, #E76500);--udex-rating_indicator_rated_hover_color: var(--udexColorMango7, #C35500);--udex-rating_indicator_unrated_hover_color: var(--udexColorMango7, #C35500)}:host(:not([hidden])){display:inline-flex;margin:var(--_ui5-v2-
|
|
8
|
+
export default `:host{--udex_rating_indicator_readonly_item_width: 1.5rem;--udex_rating_indicator_readonly_item_height: 1.5rem;--udex_rating_indicator_item_width: 1.5rem;--udex_rating_indicator_item_height: 1.5rem;--udex_rating_indicator_mobile_item_padding: 10px;--udex_rating_indicator_disabled_opacity: .4;--udex-rating_indicator_items_gap: 8px;--udex-rating_indicator_mobile_items_gap: 8px;--udex-rating_indicator_rated_color: var(--sapContent_RatedColor, #E76500);--udex-rating_indicator_unrated_color: var(--sapContent_RatedColor, #E76500);--udex-rating_indicator_read-only-unrated_color: var(--udexColorGrey6 ,#5B738B);--udex-rating_indicator_disabled-unrated_color: var(--udexColorMango6, #E76500);--udex-rating_indicator_rated_hover_color: var(--udexColorMango7, #C35500);--udex-rating_indicator_unrated_hover_color: var(--udexColorMango7, #C35500)}:host(:not([hidden])){display:inline-flex;margin:var(--_ui5-v2-13-0_rating_indicator_component_spacing);cursor:pointer}:host([disabled]){opacity:var(--udex_rating_indicator_disabled_opacity);cursor:initial;outline:none}:host([readonly]){cursor:initial}:host([disabled]) .udex-rating-indicator__item-unsel,:host([readonly]) .udex-rating-indicator__item-unsel{width:var(--udex_rating_indicator_readonly_item_width);height:var(--udex_rating_indicator_readonly_item_height);padding-inline:0}:host([disabled]) .udex-rating-indicator__item-unsel{color:var(--udex-rating_indicator_disabled-unrated_color)}:host([readonly]) .udex-rating-indicator__item-unsel{color:var(--udex-rating_indicator_read-only-unrated_color)}:host([_focused]){outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);outline-offset:.125rem;border-radius:.25rem}[ui5-icon]{display:flex;text-shadow:var(--sapContent_TextShadow)}.udex-rating-indicator{font-family:var(--sapFontFamily);font-size:var(--sapFontSize, 16px);padding:0;outline:none;position:relative;display:inline-flex;gap:12px;align-items:center}.udex-rating-indicator__total{color:var(--udexColorGrey6);line-height:24px}.udex-rating-indicator__list{list-style-type:none;display:flex;align-items:center;margin:0;padding:0}.udex-rating-indicator__item{position:relative;width:var(--udex_rating_indicator_item_width);height:var(--udex_rating_indicator_item_height)}.udex-rating-indicator__item:not(:last-child){margin-inline-end:var(--udex-rating_indicator_items_gap)}.udex-rating-indicator__item [ui5-icon]{width:100%;height:100%;color:inherit;user-select:none}.udex-rating-indicator__item.udex-rating-indicator__item-unsel{color:var(--udex-rating_indicator_unrated_color)}.udex-rating-indicator__item.udex-rating-indicator__item-sel,.udex-rating-indicator__item.udex-rating-indicator__item-half{color:var(--udex-rating_indicator_rated_color)}.udex-rating-indicator__item [ui5-icon].udex-rating-indicator__half-icon{position:absolute;inset-inline-start:50%;color:var(--udex-rating_indicator_rated_color)}:host(:not([readonly]):not([disabled])) .udex-rating-indicator:hover .udex-rating-indicator__item-sel,:host(:not([readonly]):not([disabled])) .udex-rating-indicator:hover .udex-rating-indicator__half-icon,:host(:not([readonly]):not([disabled])) .udex-rating-indicator:hover .udex-rating-indicator__item-half{color:var(--udex-rating_indicator_rated_hover_color)}:host(:not([readonly]):not([disabled])) .ui5-rating-indicator-root:hover{opacity:1}:host(:not([readonly]):not([disabled])) .udex-rating-indicator:hover .udex-rating-indicator__item-unsel{color:var(--udex-rating_indicator_unrated_hover_color)}.udex-rating-indicator__half-icon-wrapper{width:100%;height:100%;position:absolute;inset-inline-start:-50%;top:0;z-index:32;overflow:hidden}.udex-rating-indicator--mobile .udex-rating-indicator__half-icon-wrapper{top:var(--udex_rating_indicator_mobile_item_padding)}.udex-rating-indicator--mobile .udex-rating-indicator__item [ui5-icon].udex-rating-indicator__half-icon{height:var(--udex_rating_indicator_item_height)}.udex-rating-indicator--mobile .udex-rating-indicator__item{padding:var(--udex_rating_indicator_mobile_item_padding)}:host([readonly]) .udex-rating-indicator--mobile .udex-rating-indicator__item-unsel,:host([disabled]) .udex-rating-indicator--mobile .udex-rating-indicator__item-unsel{padding-left:var(--udex_rating_indicator_mobile_item_padding);padding-right:var(--udex_rating_indicator_mobile_item_padding)}.udex-rating-indicator--mobile .udex-rating-indicator__item:not(:last-child){margin-inline-end:var(--udex-rating_indicator_mobile_items_gap)}
|
|
9
9
|
`
|
|
@@ -5,5 +5,5 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
|
|
|
5
5
|
|
|
6
6
|
registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
|
|
7
7
|
registerThemePropertiesLoader("@" + "s" + "a" + "p" + "u" + "d" + "e" + "x" + "/" + "w" + "e" + "b" + "-" + "c" + "o" + "m" + "p" + "o" + "n" + "e" + "n" + "t" + "s", "sap_horizon", async () => defaultTheme);
|
|
8
|
-
export default `:host{--udex-slider-color-track-start-point: var(--sapSlider_Selected_Background, #0070f2);--udex-slider-color-track-active: var(--sapSlider_Selected_Background, #0070f2);--udex-slider-color-handle-focus-range: var(--sapSlider_Selected_BorderColor, #0070f2);--udex-slider-color-handle-active-background: var(--sapSlider_Active_HandleBackground, #ffffff);--udex-slider-color-handle-default-icon: var(--sapContent_Selected_ForegroundColor, #0040b0);--udex-slider-radius-range-size: var(--udexRadiusM, 8px);--udex-slider-handle-width: 2.75rem;--udex-slider-handle-top: -.875rem;--udex-slider-handle-height: var(--udexSpacer32, 2rem);--udex-slider-start-end-point-left: -.875rem;--udex-slider-start-end-point-right: -.875rem;--udex-slider-progress-after-background: var(--sapContent_MeasureIndicatorColor,#5b738b);--udex-slider-handle-icon-size: var(--udexSpacer20, 1.25rem);--udex-slider-tooltip-bottom: 2.5rem;--udex-slider-tooltip-border: 1px solid var(--sapField_BorderColor, #5B738B);--udex-slider-tooltip-border-radius: var(--udexSpacer4, .25rem);--udex-slider-tooltip-font-size: var(--udexTypographyNavigationRegularMFontSize,14px);--udex-slider-tooltip-color: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-tooltip-height: var(--udexSpacer32, 2rem);--udex-slider-tooltip-min-width: 2.75rem;--udex-slider-tickmark-in-range-bg: var(--sapSlider_Selected_BorderColor,#0070f2);--udex-slider-tickmark-bg: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-label-color: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-handle-focus-border: 2px solid var(--sapSlider_Active_HandleBorderColor);--udex-slider-progress-focus-top: -1.18rem;--udex-slider-progress-focus-left:calc(-1.375rem - 5px);--udex-slider-progress-focus-height: 42px;--udex-slider-progress-focus-width:calc(100% + 2.75rem + 10px)}:host{font-family:var(--sapFontFamily);font-weight:var(--udexTypographyFontWeightRegular, 400);font-size:var(--udexTypographyNavigationRegularMFontSize, 14px);line-height:var(--udexTypographyHeadingLineHeight, 1.1);color:var(--sapContent_MeasureIndicatorColor, #5b738b);height:74px}.ui5-slider-progress-container:before{background-color:var(--udex-slider-color-track-start-point)}.ui5-slider-progress{background-color:var(--udex-slider-color-track-active)}.ui5-slider-progress:focus:after{border:2px solid var(--udex-slider-color-handle-focus-range);border-radius:var(--udex-slider-radius-range-size);top:var(--udex-slider-progress-focus-top);height:var(--udex-slider-progress-focus-height);width:var(--udex-slider-progress-focus-width);left:var(--udex-slider-progress-focus-left)}:host([desktop]) .ui5-slider-handle:focus,.ui5-slider-handle:focus-visible{background-color:var(--_ui5-v2-
|
|
8
|
+
export default `:host{--udex-slider-color-track-start-point: var(--sapSlider_Selected_Background, #0070f2);--udex-slider-color-track-active: var(--sapSlider_Selected_Background, #0070f2);--udex-slider-color-handle-focus-range: var(--sapSlider_Selected_BorderColor, #0070f2);--udex-slider-color-handle-active-background: var(--sapSlider_Active_HandleBackground, #ffffff);--udex-slider-color-handle-default-icon: var(--sapContent_Selected_ForegroundColor, #0040b0);--udex-slider-radius-range-size: var(--udexRadiusM, 8px);--udex-slider-handle-width: 2.75rem;--udex-slider-handle-top: -.875rem;--udex-slider-handle-height: var(--udexSpacer32, 2rem);--udex-slider-start-end-point-left: -.875rem;--udex-slider-start-end-point-right: -.875rem;--udex-slider-progress-after-background: var(--sapContent_MeasureIndicatorColor,#5b738b);--udex-slider-handle-icon-size: var(--udexSpacer20, 1.25rem);--udex-slider-tooltip-bottom: 2.5rem;--udex-slider-tooltip-border: 1px solid var(--sapField_BorderColor, #5B738B);--udex-slider-tooltip-border-radius: var(--udexSpacer4, .25rem);--udex-slider-tooltip-font-size: var(--udexTypographyNavigationRegularMFontSize,14px);--udex-slider-tooltip-color: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-tooltip-height: var(--udexSpacer32, 2rem);--udex-slider-tooltip-min-width: 2.75rem;--udex-slider-tickmark-in-range-bg: var(--sapSlider_Selected_BorderColor,#0070f2);--udex-slider-tickmark-bg: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-label-color: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-handle-focus-border: 2px solid var(--sapSlider_Active_HandleBorderColor);--udex-slider-progress-focus-top: -1.18rem;--udex-slider-progress-focus-left:calc(-1.375rem - 5px);--udex-slider-progress-focus-height: 42px;--udex-slider-progress-focus-width:calc(100% + 2.75rem + 10px)}:host{font-family:var(--sapFontFamily);font-weight:var(--udexTypographyFontWeightRegular, 400);font-size:var(--udexTypographyNavigationRegularMFontSize, 14px);line-height:var(--udexTypographyHeadingLineHeight, 1.1);color:var(--sapContent_MeasureIndicatorColor, #5b738b);height:74px}.ui5-slider-progress-container:before{background-color:var(--udex-slider-color-track-start-point)}.ui5-slider-progress{background-color:var(--udex-slider-color-track-active)}.ui5-slider-progress:focus:after{border:2px solid var(--udex-slider-color-handle-focus-range);border-radius:var(--udex-slider-radius-range-size);top:var(--udex-slider-progress-focus-top);height:var(--udex-slider-progress-focus-height);width:var(--udex-slider-progress-focus-width);left:var(--udex-slider-progress-focus-left)}:host([desktop]) .ui5-slider-handle:focus,.ui5-slider-handle:focus-visible{background-color:var(--_ui5-v2-13-0_range_slider_handle_background_focus)}:host .ui5-slider-inner .ui5-slider-labels{top:34px}:host .ui5-slider-inner .ui5-slider-labels li{height:1.375rem;font-family:var(--sapFontFamily);font-size:var(--udexTypographyNavigationRegularMFontSize, 14px)}[slider-icon]{color:var(--udex-slider-color-handle-default-icon)}.ui5-slider-root:focus .ui5-slider-inner .ui5-slider-handle,.ui5-slider-handle:focus{border:var(--udex-slider-handle-focus-border)}.ui5-slider-labels li{color:var(--udex-slider-label-color)}.ui5-slider-tickmarks li{border-inline-start:1px solid var(--udex-slider-tickmark-bg)}.ui5-slider-tickmarks li.ui5-slider-tickmark-in-range{border-inline-start:1px solid var(--udex-slider-tickmark-in-range-bg)}:host(:not([hidden])) .ui5-slider-handle-container .ui5-slider-tooltip{bottom:var(--udex-slider-tooltip-bottom);border:var(--udex-slider-tooltip-border);border-radius:var(--udex-slider-tooltip-border-radius);font-size:var(--udex-slider-tooltip-font-size);color:var(--udex-slider-tooltip-color);height:var(--udex-slider-tooltip-height);min-width:var(--udex-slider-tooltip-min-width)}[slider-icon]{width:var(--udex-slider-handle-icon-size);height:var(--udex-slider-handle-icon-size)}.ui5-slider-progress-container:after{background-color:var(--udex-slider-progress-after-background)}.ui5-slider-progress-container:before{inset-inline-start:var(--udex-slider-start-end-point-left)}.ui5-slider-progress-container:after{inset-inline-end:var(--udex-slider-start-end-point-right)}.ui5-slider-handle-container{margin-inline-start:calc(-1 * var(--udex-slider-handle-width) / 2);top:var(--udex-slider-handle-top)}.ui5-slider-handle{height:var(--udex-slider-handle-height);width:var(--udex-slider-handle-width)}
|
|
9
9
|
`
|
|
@@ -241,12 +241,19 @@
|
|
|
241
241
|
--udex-event-ribbon-background-color: transparent;
|
|
242
242
|
--udex-event-ribbon-hover-background-color: transparent;
|
|
243
243
|
|
|
244
|
+
--udex-event-ribbon-background-blend-mode: multiply;
|
|
245
|
+
--udex-event-ribbon-background-position: center;
|
|
246
|
+
--udex-event-ribbon-background-size: 100%;
|
|
247
|
+
--udex-event-ribbon-hover-background-size: 112%;
|
|
248
|
+
|
|
244
249
|
--udex-event-ribbon-margin-xl: 84px;
|
|
245
250
|
--udex-event-ribbon-margin-m-l: 72px;
|
|
246
251
|
--udex-event-ribbon-margin-s: 48px;
|
|
247
252
|
--udex-event-ribbon-margin-xs: 24px;
|
|
248
253
|
|
|
249
254
|
--udex-event-ribbon-logo-height: auto;
|
|
255
|
+
--udex-event-ribbon-custom-logo-dark-filter: none;
|
|
256
|
+
--udex-event-ribbon-logo-dark-filter: brightness(0) invert(1);
|
|
250
257
|
|
|
251
258
|
--udex-event-ribbon-column-width: calc((100vw - (2 * var(--udex-event-ribbon-margin-xl)) - (11 * var(--udexGridXLGutters))) / 12);
|
|
252
259
|
}
|
|
@@ -273,9 +280,9 @@
|
|
|
273
280
|
|
|
274
281
|
.udex-event-ribbon__container-with-background-image {
|
|
275
282
|
background-image: var(--udex-event-ribbon-background-image);
|
|
276
|
-
background-blend-mode:
|
|
277
|
-
background-position:
|
|
278
|
-
background-size:
|
|
283
|
+
background-blend-mode: var(--udex-event-ribbon-background-blend-mode);
|
|
284
|
+
background-position: var(--udex-event-ribbon-background-position);
|
|
285
|
+
background-size: var(--udex-event-ribbon-background-size);
|
|
279
286
|
background-repeat: no-repeat;
|
|
280
287
|
transition: background ease-out 300ms;
|
|
281
288
|
}
|
|
@@ -291,7 +298,7 @@
|
|
|
291
298
|
}
|
|
292
299
|
|
|
293
300
|
.udex-event-ribbon__container-with-background-image:hover {
|
|
294
|
-
background-size:
|
|
301
|
+
background-size: var(--udex-event-ribbon-hover-background-size);
|
|
295
302
|
}
|
|
296
303
|
|
|
297
304
|
:host([mode="dark"]) .udex-event-ribbon__container {
|
|
@@ -327,8 +334,12 @@
|
|
|
327
334
|
max-width: 100%;
|
|
328
335
|
}
|
|
329
336
|
|
|
330
|
-
:host([mode="dark"]) .udex-event-
|
|
331
|
-
filter:
|
|
337
|
+
:host([mode="dark"]) .udex-event-ribbon__custom-logo {
|
|
338
|
+
filter: var(--udex-event-ribbon-custom-logo-dark-filter);
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
:host([mode="dark"]) .udex-event-ribbon__logo-img:not(.udex-event-ribbon__custom-logo) {
|
|
342
|
+
filter: var(--udex-event-ribbon-logo-dark-filter);
|
|
332
343
|
}
|
|
333
344
|
|
|
334
345
|
.udex-event-ribbon__text {
|
package/src/themes/Link.css
CHANGED
|
@@ -6,12 +6,12 @@
|
|
|
6
6
|
--udex-link-focus-outline-offset: var(--udexLinkOutlineOffset, 0px);
|
|
7
7
|
--udex-link-focus-border-radius: var(--udexLinkOutlineRadius, 2px);
|
|
8
8
|
--udex-link-emphasized-text-decoration: none;
|
|
9
|
-
--udex-link-icon-height:
|
|
9
|
+
--udex-link-icon-height: 16px;
|
|
10
10
|
--udex-link-line-height: var(--udexTypographyBodyLineHeight, 1.5);
|
|
11
11
|
--udex-link-color: var(--udexColorBlue8);
|
|
12
12
|
--udex-link-hover-color: var(--udexColorBlue10);
|
|
13
13
|
--udex-link-active-color: var(--udexColorBlue11);
|
|
14
|
-
--udex-link-icon-width:
|
|
14
|
+
--udex-link-icon-width: 16px;
|
|
15
15
|
--udex-link-white-space: break-spaces;
|
|
16
16
|
--udex-link-subtle-color: var(--udexColorGrey8, #354A5F);
|
|
17
17
|
--udex-link-subtle-hover-color: var(--udexColorGrey11, #12171C);
|
|
@@ -69,6 +69,8 @@
|
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
.ui5-link-root {
|
|
72
|
+
display: inline-flex;
|
|
73
|
+
align-items: center;
|
|
72
74
|
overflow: visible;
|
|
73
75
|
line-height: var(--udex-link-line-height);
|
|
74
76
|
}
|
package/src/types/PromoTile.ts
CHANGED