@sapudex/web-components 2.7.2 → 2.8.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/bundle.esm.js +2 -0
- package/cypress/specs/LinkList.cy.tsx +49 -0
- package/cypress/specs/LinkListItem.cy.tsx +102 -0
- package/cypress/support/component-imports.instrumented.ts +4 -0
- package/cypress/support/component-imports.src.ts +4 -0
- package/dist/LinkList.d.ts +58 -0
- package/dist/LinkList.js +89 -0
- package/dist/LinkList.js.map +1 -0
- package/dist/LinkListItem.d.ts +78 -0
- package/dist/LinkListItem.js +97 -0
- package/dist/LinkListItem.js.map +1 -0
- package/dist/LinkListItemTemplate.d.ts +2 -0
- package/dist/LinkListItemTemplate.js +17 -0
- package/dist/LinkListItemTemplate.js.map +1 -0
- package/dist/LinkListTemplate.d.ts +2 -0
- package/dist/LinkListTemplate.js +5 -0
- package/dist/LinkListTemplate.js.map +1 -0
- package/dist/Tile.d.ts +2 -2
- package/dist/Tile.js +3 -3
- package/dist/Tile.js.map +1 -1
- package/dist/TileTemplate.d.ts +2 -0
- package/dist/TileTemplate.js +7 -0
- package/dist/TileTemplate.js.map +1 -0
- package/dist/assets/{InputSuggestions-D0OZo5eY.js → InputSuggestions-CmCRxU5Z.js} +1 -1
- package/dist/assets/{ListItemStandardExpandableTextTemplate-BOc_KoW1.js → ListItemStandardExpandableTextTemplate-i35T7dr8.js} +1 -1
- package/dist/assets/{bundle.esm-BLn1Dq6A.js → bundle.esm-BIStxKRx.js} +204 -202
- package/dist/css/themes/LinkList.css +1 -0
- package/dist/css/themes/LinkListItem.css +1 -0
- package/dist/css/themes/ListGroupHeader.css +1 -1
- package/dist/css/themes/ListItem.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 +305 -0
- package/dist/custom-elements.json +287 -0
- package/dist/generated/themes/LinkList.css.d.ts +2 -0
- package/dist/generated/themes/LinkList.css.js +8 -0
- package/dist/generated/themes/LinkList.css.js.map +1 -0
- package/dist/generated/themes/LinkListItem.css.d.ts +2 -0
- package/dist/generated/themes/LinkListItem.css.js +8 -0
- package/dist/generated/themes/LinkListItem.css.js.map +1 -0
- package/dist/generated/themes/ListGroupHeader.css.d.ts +1 -1
- package/dist/generated/themes/ListGroupHeader.css.js +1 -1
- package/dist/generated/themes/ListGroupHeader.css.js.map +1 -1
- package/dist/generated/themes/ListItem.css.d.ts +1 -1
- package/dist/generated/themes/ListItem.css.js +1 -1
- package/dist/generated/themes/ListItem.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/vscode.html-custom-data.json +72 -0
- package/dist/web-types.json +141 -1
- package/package.json +1 -1
- package/src/LinkList.ts +93 -0
- package/src/LinkListItem.ts +126 -0
- package/src/LinkListItemTemplate.tsx +52 -0
- package/src/LinkListTemplate.tsx +13 -0
- package/src/Tile.ts +5 -5
- package/src/TileTemplate.tsx +31 -0
- package/src/generated/themes/LinkList.css.ts +9 -0
- package/src/generated/themes/LinkListItem.css.ts +9 -0
- package/src/generated/themes/ListGroupHeader.css.ts +1 -1
- package/src/generated/themes/ListItem.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/LinkList.css +53 -0
- package/src/themes/LinkListItem.css +84 -0
- package/src/themes/ListGroupHeader.css +1 -1
- package/src/themes/ListItem.css +2 -2
- package/dist/generated/templates/TileTemplate.lit.d.ts +0 -3
- package/dist/generated/templates/TileTemplate.lit.js +0 -9
- package/dist/generated/templates/TileTemplate.lit.js.map +0 -1
- package/src/Tile.hbs +0 -21
- package/src/generated/templates/TileTemplate.lit.ts +0 -13
package/src/Tile.ts
CHANGED
|
@@ -2,12 +2,12 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
|
|
|
2
2
|
import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
|
|
3
3
|
import property from "@ui5/webcomponents-base/dist/decorators/property.js";
|
|
4
4
|
import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
|
|
5
|
-
import
|
|
5
|
+
import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
|
|
6
6
|
import { isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
|
|
7
7
|
import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
|
|
8
8
|
import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
|
|
9
9
|
|
|
10
|
-
import TileTemplate from "./
|
|
10
|
+
import TileTemplate from "./TileTemplate.js";
|
|
11
11
|
|
|
12
12
|
// Styles
|
|
13
13
|
import TileCss from "./generated/themes/Tile.css.js";
|
|
@@ -15,7 +15,7 @@ import TileCss from "./generated/themes/Tile.css.js";
|
|
|
15
15
|
type AnchorNode = HTMLAnchorElement | undefined | null;
|
|
16
16
|
|
|
17
17
|
type UDExTileClickEventDetail = {
|
|
18
|
-
originalEvent:
|
|
18
|
+
originalEvent: MouseEvent,
|
|
19
19
|
}
|
|
20
20
|
/**
|
|
21
21
|
* @class
|
|
@@ -27,7 +27,7 @@ type UDExTileClickEventDetail = {
|
|
|
27
27
|
*/
|
|
28
28
|
@customElement({
|
|
29
29
|
tag: "udex-tile",
|
|
30
|
-
renderer:
|
|
30
|
+
renderer: jsxRenderer,
|
|
31
31
|
styles: TileCss,
|
|
32
32
|
template: TileTemplate,
|
|
33
33
|
})
|
|
@@ -128,7 +128,7 @@ class UDExTile extends UI5Element {
|
|
|
128
128
|
}
|
|
129
129
|
}
|
|
130
130
|
|
|
131
|
-
_onclick(e:
|
|
131
|
+
_onclick(e: MouseEvent) {
|
|
132
132
|
e.stopImmediatePropagation();
|
|
133
133
|
|
|
134
134
|
if (this.interactive) {
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import type Tile from "./Tile.js";
|
|
2
|
+
|
|
3
|
+
export default function TileTemplate(this: Tile) {
|
|
4
|
+
const rootClass = "udex-tile";
|
|
5
|
+
const part = "tile";
|
|
6
|
+
return (
|
|
7
|
+
this.interactive ? (
|
|
8
|
+
<>
|
|
9
|
+
<span className="hidden" id="tileDescription">{this.accessibleName}</span>
|
|
10
|
+
<a
|
|
11
|
+
className={rootClass}
|
|
12
|
+
part={part}
|
|
13
|
+
href={this.href}
|
|
14
|
+
target={this.target}
|
|
15
|
+
role="link"
|
|
16
|
+
aria-describedby="tileDescription"
|
|
17
|
+
onKeyDown={this._onkeydown}
|
|
18
|
+
onClick={this._onclick}>
|
|
19
|
+
<slot></slot>
|
|
20
|
+
</a>
|
|
21
|
+
</>
|
|
22
|
+
) : (
|
|
23
|
+
<div
|
|
24
|
+
className={rootClass}
|
|
25
|
+
part={part}
|
|
26
|
+
onClick={this._onclick}>
|
|
27
|
+
<slot></slot>
|
|
28
|
+
</div>
|
|
29
|
+
)
|
|
30
|
+
);
|
|
31
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
|
|
2
|
+
|
|
3
|
+
import defaultThemeBase from "@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js";
|
|
4
|
+
import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
|
|
5
|
+
|
|
6
|
+
registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
|
|
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-link-list-columns-xl: 4;--udex-link-list-columns-l: 4;--udex-link-list-columns-m: 3;--udex-link-list-columns-s: 2;--udex-link-list-columns-xs: 1;--udex-link-list-column-gap-xl: var(--udexSpacer48);--udex-link-list-column-gap-l: var(--udexSpacer48);--udex-link-list-column-gap-m: var(--udexSpacer48);--udex-link-list-column-gap-s: var(--udexSpacer16);--udex-link-list-column-gap-xs: var(--udexSpacer16);--udex-link-list-row-gap: inherit;--udex-link-list-grid: grid}.udex-link-list{display:var(--udex-link-list-grid);grid-template-columns:repeat(var(--udex-link-list-columns-xl),1fr);column-gap:var(--udex-link-list-column-gap-xl);row-gap:var(--udex-link-list-row-gap)}:host([type="TileS"]) .udex-link-list{--udex-link-list-row-gap: var(--udexSpacer20)}:host([type="TileL"]) .udex-link-list{--udex-link-list-row-gap: var(--udexSpacer40)}@media (max-width: 1599px){.udex-link-list{grid-template-columns:repeat(var(--udex-link-list-columns-l),1fr)}}@media (max-width: 1279px){.udex-link-list{grid-template-columns:repeat(var(--udex-link-list-columns-m),1fr)}}@media (max-width: 979px){.udex-link-list{grid-template-columns:repeat(var(--udex-link-list-columns-s),1fr)}}@media (max-width: 639px){.udex-link-list{grid-template-columns:repeat(var(--udex-link-list-columns-xs),1fr)}}
|
|
9
|
+
`
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
|
|
2
|
+
|
|
3
|
+
import defaultThemeBase from "@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js";
|
|
4
|
+
import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
|
|
5
|
+
|
|
6
|
+
registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
|
|
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-link-list-item-tile-icon-l-size: 40px;--udex-link-list-item-tile-icon-s-size: 24px;--udex-link-list-item-tile-based-l-min-height: 148px;--udex-link-list-item-tile-text-color: var(--udexColorGrey9, #223548);--udex-link-list-item-tile-icon-color: var(--udexColorBlue8, #0057D2)}.udex-link-list-item{display:flex;flex-direction:column;align-items:self-start;height:100%}.udex-link-list-item__divider{padding:var(--udexSpacer4) 0;margin-top:auto;width:100%}[udex-tile]::part(tile){height:100%;box-sizing:border-box}[udex-tile]{display:block;width:100%;height:100%}.udex-link-list-item__tile-l{--udex-tile-content-padding-vertical: var(--udexSpacer24);--udex-tile-content-padding-horizontal: var(--udexSpacer24)}.udex-link-list-item__tile-l::part(tile){min-height:var(--udex-link-list-item-tile-based-l-min-height)}.udex-link-list-item__tile-s{--udex-tile-content-padding-vertical: var(--udexSpacer16);--udex-tile-content-padding-horizontal: var(--udexSpacer16)}.udex-link-list-item__tile-icon-l{color:var(--udex-link-list-item-tile-icon-color);width:var(--udex-link-list-item-tile-icon-l-size);height:var(--udex-link-list-item-tile-icon-l-size);margin-bottom:var(--udexSpacer16)}.udex-link-list-item__tile-icon-s{color:var(--udex-link-list-item-tile-icon-color);width:var(--udex-link-list-item-tile-icon-s-size);min-width:var(--udex-link-list-item-tile-icon-s-size);height:var(--udex-link-list-item-tile-icon-s-size);margin-inline-end:var(--udexSpacer24)}.udex-link-list-item__tile-text-l{font-family:var(--sapFontFamily);line-height:var(--udexTypographyHeadingLineHeight);font-size:var(--udexTypographyHeadingMediumXXSFontSize);font-weight:var(--udexTypographyFontWeightMedium)}.udex-link-list-item__tile-text-s{font-family:var(--sapFontFamily, sans-serif);font-size:var(--udexTypographyBodySFontSize);font-weight:var(--udexTypographyFontWeightRegular);line-height:var(--udexTypographyBodyLineHeight)}.udex-link-list-item__tile-holder-l,.udex-link-list-item__tile-holder-s{color:var(--udex-link-list-item-tile-text-color);display:flex}.udex-link-list-item__tile-holder-l{flex-direction:column}
|
|
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-list-item-group-header-padding-vertical: var(--udexSpacer8, 8px);--udex-list-item-group-header-padding-horizontal: var(--udexSpacer12, 12px);--udex-list-item-group-header-supporting-text-color: var(--sapContent_LabelColor, #223548);--udex-list-item-group-header-border-color: var(--sapList_BorderColor, #A9B4BE)}.udex-list__header{font-weight:var(--udexTypographyFontWeightMedium, 500);display:flex;flex-direction:column}.udex-list__supporting-text{font-family:var(--sapFontFamily, sans-serif);font-size:var(--udexTypographyBodyXSFontSize, 14px);line-height:var(--udexTypographyBodyLineHeight, 21px);font-weight:var(--udexTypographyFontWeightRegular, 400);color:var(--udex-list-item-group-header-supporting-text-color);padding-top:var(--
|
|
8
|
+
export default `:host{--udex-list-item-group-header-padding-vertical: var(--udexSpacer8, 8px);--udex-list-item-group-header-padding-horizontal: var(--udexSpacer12, 12px);--udex-list-item-group-header-supporting-text-color: var(--sapContent_LabelColor, #223548);--udex-list-item-group-header-border-color: var(--sapList_BorderColor, #A9B4BE)}.udex-list__header{font-weight:var(--udexTypographyFontWeightMedium, 500);display:flex;flex-direction:column}.udex-list__supporting-text{font-family:var(--sapFontFamily, sans-serif);font-size:var(--udexTypographyBodyXSFontSize, 14px);line-height:var(--udexTypographyBodyLineHeight, 21px);font-weight:var(--udexTypographyFontWeightRegular, 400);color:var(--udex-list-item-group-header-supporting-text-color);padding-top:var(--udexSpacer2, 2px)}.udex-list__group-list{list-style-type:none;padding:0;margin:0}.udex-list__header,.udex-list__group-header{font-weight:var(--udexTypographyFontWeightMedium, 500)}.udex-list__group-list.udex-list__sticky{padding-top:59px}.udex-list__group-content{display:flex;border-bottom:1px solid var(--udex-list-item-group-header-border-color);padding:var(--udex-list-item-group-header-padding-vertical) var(--udex-list-item-group-header-padding-horizontal)}.udex-list__number{margin-inline-end:var(--udexSpacer8, 8px)}.udex-list__circle{display:block;min-width:20px;height:22px;position:relative}:host([mode="SingleContent"])::part(group-item){padding:var(--udexSpacer4, 4px) 0}:host([mode="MultiSelect"]) .udex-list__group-header{border-bottom:1px solid var(--udex-list-item-group-header-border-color)}.udex-list__group_large{font-size:var(--udexTypographyBodyLFontSize, 20px);line-height:var(--udexTypographyHeadingLineHeight, 22px);font-weight:var(--udexTypographyFontWeightMedium, 500)}.udex-list__group_large.udex-list__supporting-text{font-size:var(--udexTypographyBodySFontSize, 16px);line-height:var(--udexTypographyBodyLineHeight, 24px);font-weight:var(--udexTypographyFontWeightRegular, 400)}.udex-list__icon{margin-inline-end:var(--udexSpacer8, 8px);padding-top:2px;min-width:18px;height:18px}.udex-list__inactive-header{font-family:var(--sapFontFamily, sans-serif);font-size:var(--udexTypographyBodySFontSize, 16px);line-height:var(--udexTypographyBodyLineHeight, 24px);font-weight:var(--udexTypographyFontWeightMedium, 500);padding:var(--udexSpacer8, 8px) var(--udexSpacer20, 20px);border-bottom:1px solid var(--sapList_BorderColor, #A9B4BE);display:flex;flex-direction:column}
|
|
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-list-item-padding-vertical: var(--udexSpacer8, 8px);--udex-list-item-padding-horizontal: var(--udexSpacer12, 12px);--udex-list-item-background-active: var(--sapList_Active_Background, #EAECEE);--udex-list-item-border-color-active: var(--sapList_BorderColor, #A9B4BE);--udex-list-item-color-active: var(--sapList_Active_TextColor, #000);--udex-list-item-supporting-text-color-active: var(--sapContent_LabelColor, #475E75);--udex-list-item-background-selected-hover: var(--sapButton_Selected_Hover_Background, #D1EFFF);--udex-list-item-border-color-selected-hover: var(--udexColorBlue8, #0057D2);--udex-list-item-background-default: var(--sapList_Background, #FFF);--udex-list-item-color-default: var(--sapList_HeaderTextColor, #223548);--udex-list-item-supporting-text-color-default: var(--sapContent_LabelColor, #475E75);--udex-list-item-supporting-text-color-hover: var(--sapContent_LabelColor, #475E75);--udex-list-item-background-hover: var(--sapList_Hover_Background, #F5F6F7);--udex-list-item-color-hover: var(--sapList_HeaderTextColor, #223548);--udex-list-item-border-color-selected: var(--sapList_SelectionBorderColor, #0070F2);--udex-list-item-background-selected: var(--sapList_SelectionBackgroundColor, #EBF8FF);--udex-list-item-color-selected: var(--sapList_HeaderTextColor, #223548);--udex-list-item-supporting-text-color-selected: var(--sapContent_LabelColor, #475E75);--udex-list-item-divider-border-color: var(--sapList_BorderColor, #A9B4BE);--udex-list-item-divider-border-color-hover: var(--sapList_BorderColor, #A9B4BE);--udex-list-item-outline-border-color: var(--udexColorBlue10, #002A86);--udex-list-item-disabled-opacity: var(--sapContent_DisabledOpacity, .4);background:var(--udex-list-item-background-default);color:var(--udex-list-item-color-default);display:block;border-bottom:1px solid transparent;position:relative}:host([disabled]:not([mode="SingleContent"])){opacity:var(--udex-list-item-disabled-opacity);pointer-events:none}:host(:not([disabled]):not([mode="SingleContent"])){cursor:pointer}:host([active]) .udex-list__supporting-text{color:var(--udex-list-item-supporting-text-color-active)}:host([active][selected]){background:var(--udex-list-item-background-active)}:host(:not([disabled]):not([selected]):not([mode="SingleContent"]):hover){background:var(--udex-list-item-background-hover);color:var(--udex-list-item-color-hover)}:host(:not([mode="SingleContent"]):not([disabled])[desktop]) .udex-list__item:focus:before,:host(:not([mode="SingleContent"]):not([disabled])) .udex-list__item:focus-visible:before{content:"";position:absolute;inset:0;outline:var(--udexRadiusXXS) solid var(--udex-list-item-outline-border-color);outline-offset:-4px;border-radius:var(--udexRadiusM, 8px);pointer-events:none}:host([active]){background:var(--udex-list-item-background-active);color:var(--udex-list-item-color-active)}:host(:hover[active][focused]:not([mode="SingleContent"])){background:var(--udex-list-item-background-active);border-color:var(--udex-list-item-border-color-active);color:var(--udex-list-item-color-active)}:host(:not([disabled]):hover) .udex-list__supporting-text{color:var(--udex-list-item-supporting-text-color-hover)}:host([selected]:not([mode="SingleContent"])){background:var(--udex-list-item-background-selected);border-color:var(--udex-list-item-border-color-selected);color:var(--udex-list-item-color-selected)}:host(:hover[selected]:not([disabled]):not([mode="SingleContent"])){background:var(--udex-list-item-background-selected-hover);border-color:var(--udex-list-item-border-color-selected-hover)}:host([selected]) .udex-list__supporting-text{color:var(--udex-list-item-supporting-text-color-selected)}:host([divider]){border-color:var(--udex-list-item-divider-border-color)}:host([divider]):hover{border-color:var(--udex-list-item-divider-border-color-hover)}:host([additional-text-state="Success"])::part(additional-text){color:var(--udexColorGreen9, #1E592F)}:host([additional-text-state="Error"])::part(additional-text){color:var(--udexColorRed9, #840606)}:host([additional-text-state="Information"])::part(additional-text){color:var(--udexColorBlue9, #0040B0)}:host([additional-text-state="Warning"])::part(additional-text){color:var(--udexColorMango9, #8D2A00)}:host::part(checkbox),:host::part(radio){padding-inline-end:var(--udexSpacer12, 12px);min-width:42px}:host([mode="SingleContent"])::part(item){padding:var(--udexSpacer4, 4px) 0;border:none}:host([mode="SingleContent"])::part(avatar){padding-inline-start:var(--udexSpacer12, 12px)}:host::part(additional-text){margin-inline-start:0;margin-inline-end:var(--udexSpacer8, 8px)}:host([mode="SingleContent"])::part(button){padding:0}:host(.udex-list__sticky){position:absolute;top:0;right:12px;left:0;z-index:1;border-radius:var(--udexRadiusM, 8px) 0 0}::slotted([udex-list]){padding-top:var(--udexSpacer12, 12px);display:block}::slotted(b){display:inherit}::slotted([udex-button]:hover:not([active])){background-color:var(--udex-button-color-tertiary-standard-default-background)}.udex-list__item:focus-visible{outline:none}.udex-list__item{padding:var(--udexSpacer8, 8px) var(--udexSpacer12, 12px);display:flex;align-items:center}.udex-list__content-wrap{display:flex;width:100%}.udex-list__number{margin-inline-end:var(--udexSpacer8, 8px)}.udex-list__circle{display:block;min-width:20px;height:22px;position:relative}.udex-list__supporting-text{font-family:var(--sapFontFamily, sans-serif);font-size:var(--udexTypographyBodyXSFontSize, 14px);line-height:var(--udexTypographyBodyLineHeight, 21px);font-weight:var(--udexTypographyFontWeightRegular, 400);color:var(--udex-list-item-supporting-text-color-default);padding-top:var(--
|
|
8
|
+
export default `:host{--udex-list-item-padding-vertical: var(--udexSpacer8, 8px);--udex-list-item-padding-horizontal: var(--udexSpacer12, 12px);--udex-list-item-background-active: var(--sapList_Active_Background, #EAECEE);--udex-list-item-border-color-active: var(--sapList_BorderColor, #A9B4BE);--udex-list-item-color-active: var(--sapList_Active_TextColor, #000);--udex-list-item-supporting-text-color-active: var(--sapContent_LabelColor, #475E75);--udex-list-item-background-selected-hover: var(--sapButton_Selected_Hover_Background, #D1EFFF);--udex-list-item-border-color-selected-hover: var(--udexColorBlue8, #0057D2);--udex-list-item-background-default: var(--sapList_Background, #FFF);--udex-list-item-color-default: var(--sapList_HeaderTextColor, #223548);--udex-list-item-supporting-text-color-default: var(--sapContent_LabelColor, #475E75);--udex-list-item-supporting-text-color-hover: var(--sapContent_LabelColor, #475E75);--udex-list-item-background-hover: var(--sapList_Hover_Background, #F5F6F7);--udex-list-item-color-hover: var(--sapList_HeaderTextColor, #223548);--udex-list-item-border-color-selected: var(--sapList_SelectionBorderColor, #0070F2);--udex-list-item-background-selected: var(--sapList_SelectionBackgroundColor, #EBF8FF);--udex-list-item-color-selected: var(--sapList_HeaderTextColor, #223548);--udex-list-item-supporting-text-color-selected: var(--sapContent_LabelColor, #475E75);--udex-list-item-divider-border-color: var(--sapList_BorderColor, #A9B4BE);--udex-list-item-divider-border-color-hover: var(--sapList_BorderColor, #A9B4BE);--udex-list-item-outline-border-color: var(--udexColorBlue10, #002A86);--udex-list-item-disabled-opacity: var(--sapContent_DisabledOpacity, .4);background:var(--udex-list-item-background-default);color:var(--udex-list-item-color-default);display:block;border-bottom:1px solid transparent;position:relative}:host([disabled]:not([mode="SingleContent"])){opacity:var(--udex-list-item-disabled-opacity);pointer-events:none}:host(:not([disabled]):not([mode="SingleContent"])){cursor:pointer}:host([active]) .udex-list__supporting-text{color:var(--udex-list-item-supporting-text-color-active)}:host([active][selected]){background:var(--udex-list-item-background-active)}:host(:not([disabled]):not([selected]):not([mode="SingleContent"]):hover){background:var(--udex-list-item-background-hover);color:var(--udex-list-item-color-hover)}:host(:not([mode="SingleContent"]):not([disabled])[desktop]) .udex-list__item:focus:before,:host(:not([mode="SingleContent"]):not([disabled])) .udex-list__item:focus-visible:before{content:"";position:absolute;inset:0;outline:var(--udexRadiusXXS) solid var(--udex-list-item-outline-border-color);outline-offset:-4px;border-radius:var(--udexRadiusM, 8px);pointer-events:none}:host([active]){background:var(--udex-list-item-background-active);color:var(--udex-list-item-color-active)}:host(:hover[active][focused]:not([mode="SingleContent"])){background:var(--udex-list-item-background-active);border-color:var(--udex-list-item-border-color-active);color:var(--udex-list-item-color-active)}:host(:not([disabled]):hover) .udex-list__supporting-text{color:var(--udex-list-item-supporting-text-color-hover)}:host([selected]:not([mode="SingleContent"])){background:var(--udex-list-item-background-selected);border-color:var(--udex-list-item-border-color-selected);color:var(--udex-list-item-color-selected)}:host(:hover[selected]:not([disabled]):not([mode="SingleContent"])){background:var(--udex-list-item-background-selected-hover);border-color:var(--udex-list-item-border-color-selected-hover)}:host([selected]) .udex-list__supporting-text{color:var(--udex-list-item-supporting-text-color-selected)}:host([divider]){border-color:var(--udex-list-item-divider-border-color)}:host([divider]):hover{border-color:var(--udex-list-item-divider-border-color-hover)}:host([additional-text-state="Success"])::part(additional-text){color:var(--udexColorGreen9, #1E592F)}:host([additional-text-state="Error"])::part(additional-text){color:var(--udexColorRed9, #840606)}:host([additional-text-state="Information"])::part(additional-text){color:var(--udexColorBlue9, #0040B0)}:host([additional-text-state="Warning"])::part(additional-text){color:var(--udexColorMango9, #8D2A00)}:host::part(checkbox),:host::part(radio){padding-inline-end:var(--udexSpacer12, 12px);min-width:42px}:host([mode="SingleContent"])::part(item){padding:var(--udexSpacer4, 4px) 0;border:none}:host([mode="SingleContent"])::part(avatar){padding-inline-start:var(--udexSpacer12, 12px)}:host::part(additional-text){margin-inline-start:0;margin-inline-end:var(--udexSpacer8, 8px)}:host([mode="SingleContent"])::part(button){padding:0}:host(.udex-list__sticky){position:absolute;top:0;right:12px;left:0;z-index:1;border-radius:var(--udexRadiusM, 8px) 0 0}::slotted([udex-list]){padding-top:var(--udexSpacer12, 12px);display:block}::slotted(b){display:inherit}::slotted([udex-button]:hover:not([active])){background-color:var(--udex-button-color-tertiary-standard-default-background)}.udex-list__item:focus-visible{outline:none}.udex-list__item{padding:var(--udexSpacer8, 8px) var(--udexSpacer12, 12px);display:flex;align-items:center}.udex-list__content-wrap{display:flex;width:100%}.udex-list__number{margin-inline-end:var(--udexSpacer8, 8px)}.udex-list__circle{display:block;min-width:20px;height:22px;position:relative}.udex-list__supporting-text{font-family:var(--sapFontFamily, sans-serif);font-size:var(--udexTypographyBodyXSFontSize, 14px);line-height:var(--udexTypographyBodyLineHeight, 21px);font-weight:var(--udexTypographyFontWeightRegular, 400);color:var(--udex-list-item-supporting-text-color-default);padding-top:var(--udexSpacer2, 2px)}.udex-list__content{display:flex;align-items:center;flex:auto}.udex-list__text-holder{display:flex;flex-direction:column;flex-basis:100%}.udex-list__add-text{font-size:var(--udexTypographyBodyXSFontSize, 14px);line-height:var(--udexTypographyHeadingLineHeight, 21px);padding-inline-start:var(--udexSpacer12, 12px);white-space:nowrap}.udex-list__icon{margin-inline-end:var(--udexSpacer8, 8px);padding-top:2px;min-width:18px;height:18px}.udex-list__avatar{display:flex;align-items:center;margin-inline-end:var(--udexSpacer8, 8px)}.udex-list__item.udex-list__sticky.udex-list__item_controlled .udex-list__checkbox,.udex-list__item.udex-searchable-list__header.udex-list__item_controlled .udex-list__checkbox,.udex-list__item .udex-list__radio,.udex-list__item .udex-list__checkbox{pointer-events:none}.udex-list__item.udex-list__item_controlled .udex-list__radio,.udex-list__item.udex-list__item_controlled .udex-list__checkbox{pointer-events:auto}.udex-list__item_large{font-size:var(--udexTypographyBodyLFontSize, 20px);line-height:var(--udexTypographyHeadingLineHeight, 22px);font-weight:var(--udexTypographyFontWeightMedium, 500)}.udex-list__item_large .udex-list__supporting-text{font-size:var(--udexTypographyBodySFontSize, 16px);line-height:var(--udexTypographyBodyLineHeight, 24px)}.udex-list__flag-wrap{min-width:30px;margin-inline-end:var(--udexSpacer12, 12px);position:relative}.udex-list__flag{background-image:url(https://cdn.udex.services.sap.com/dds/design-tokens/assets/country_flag_iso3166.webp);width:30px;height:20px;margin-inline-end:var(--udexSpacer12, 12px);position:absolute;top:50%;transform:translateY(-50%)}.hidden{display:none}
|
|
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_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-8-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-8-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
|
`
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
:host {
|
|
2
|
+
--udex-link-list-columns-xl: 4;
|
|
3
|
+
--udex-link-list-columns-l: 4;
|
|
4
|
+
--udex-link-list-columns-m: 3;
|
|
5
|
+
--udex-link-list-columns-s: 2;
|
|
6
|
+
--udex-link-list-columns-xs: 1;
|
|
7
|
+
--udex-link-list-column-gap-xl: var(--udexSpacer48);
|
|
8
|
+
--udex-link-list-column-gap-l: var(--udexSpacer48);
|
|
9
|
+
--udex-link-list-column-gap-m: var(--udexSpacer48);
|
|
10
|
+
--udex-link-list-column-gap-s: var(--udexSpacer16);
|
|
11
|
+
--udex-link-list-column-gap-xs: var(--udexSpacer16);
|
|
12
|
+
--udex-link-list-row-gap: inherit;
|
|
13
|
+
--udex-link-list-grid: grid;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.udex-link-list {
|
|
17
|
+
display: var(--udex-link-list-grid);
|
|
18
|
+
grid-template-columns: repeat(var(--udex-link-list-columns-xl), 1fr);
|
|
19
|
+
column-gap: var(--udex-link-list-column-gap-xl);
|
|
20
|
+
row-gap: var(--udex-link-list-row-gap);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
:host([type="TileS"]) .udex-link-list {
|
|
24
|
+
--udex-link-list-row-gap: var(--udexSpacer20);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
:host([type="TileL"]) .udex-link-list {
|
|
28
|
+
--udex-link-list-row-gap: var(--udexSpacer40);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
@media (max-width: 1599px) {
|
|
32
|
+
.udex-link-list {
|
|
33
|
+
grid-template-columns: repeat(var(--udex-link-list-columns-l), 1fr);
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
@media (max-width: 1279px) {
|
|
38
|
+
.udex-link-list {
|
|
39
|
+
grid-template-columns: repeat(var(--udex-link-list-columns-m), 1fr);
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
@media (max-width: 979px) {
|
|
44
|
+
.udex-link-list {
|
|
45
|
+
grid-template-columns: repeat(var(--udex-link-list-columns-s), 1fr);
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
@media (max-width: 639px) {
|
|
50
|
+
.udex-link-list {
|
|
51
|
+
grid-template-columns: repeat(var(--udex-link-list-columns-xs), 1fr);
|
|
52
|
+
}
|
|
53
|
+
}
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
:host {
|
|
2
|
+
--udex-link-list-item-tile-icon-l-size: 40px;
|
|
3
|
+
--udex-link-list-item-tile-icon-s-size: 24px;
|
|
4
|
+
--udex-link-list-item-tile-based-l-min-height: 148px;
|
|
5
|
+
--udex-link-list-item-tile-text-color: var(--udexColorGrey9, #223548);
|
|
6
|
+
--udex-link-list-item-tile-icon-color: var(--udexColorBlue8, #0057D2);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.udex-link-list-item {
|
|
10
|
+
display: flex;
|
|
11
|
+
flex-direction: column;
|
|
12
|
+
align-items: self-start;
|
|
13
|
+
height: 100%;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.udex-link-list-item__divider {
|
|
17
|
+
padding: var(--udexSpacer4) 0;
|
|
18
|
+
margin-top: auto;
|
|
19
|
+
width: 100%;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
[udex-tile]::part(tile) {
|
|
23
|
+
height: 100%;
|
|
24
|
+
box-sizing: border-box;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
[udex-tile] {
|
|
28
|
+
display: block;
|
|
29
|
+
width: 100%;
|
|
30
|
+
height: 100%;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.udex-link-list-item__tile-l {
|
|
34
|
+
--udex-tile-content-padding-vertical: var(--udexSpacer24);
|
|
35
|
+
--udex-tile-content-padding-horizontal: var(--udexSpacer24);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.udex-link-list-item__tile-l::part(tile) {
|
|
39
|
+
min-height: var(--udex-link-list-item-tile-based-l-min-height);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.udex-link-list-item__tile-s {
|
|
43
|
+
--udex-tile-content-padding-vertical: var(--udexSpacer16);
|
|
44
|
+
--udex-tile-content-padding-horizontal: var(--udexSpacer16);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.udex-link-list-item__tile-icon-l {
|
|
48
|
+
color: var(--udex-link-list-item-tile-icon-color);
|
|
49
|
+
width: var(--udex-link-list-item-tile-icon-l-size);
|
|
50
|
+
height: var(--udex-link-list-item-tile-icon-l-size);
|
|
51
|
+
margin-bottom: var(--udexSpacer16);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.udex-link-list-item__tile-icon-s {
|
|
55
|
+
color: var(--udex-link-list-item-tile-icon-color);
|
|
56
|
+
width: var(--udex-link-list-item-tile-icon-s-size);
|
|
57
|
+
min-width: var(--udex-link-list-item-tile-icon-s-size);
|
|
58
|
+
height: var(--udex-link-list-item-tile-icon-s-size);
|
|
59
|
+
margin-inline-end: var(--udexSpacer24);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.udex-link-list-item__tile-text-l {
|
|
63
|
+
font-family: var(--sapFontFamily);
|
|
64
|
+
line-height: var(--udexTypographyHeadingLineHeight);
|
|
65
|
+
font-size: var(--udexTypographyHeadingMediumXXSFontSize);
|
|
66
|
+
font-weight: var(--udexTypographyFontWeightMedium);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.udex-link-list-item__tile-text-s {
|
|
70
|
+
font-family: var(--sapFontFamily, sans-serif);
|
|
71
|
+
font-size: var(--udexTypographyBodySFontSize);
|
|
72
|
+
font-weight: var(--udexTypographyFontWeightRegular);
|
|
73
|
+
line-height: var(--udexTypographyBodyLineHeight);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.udex-link-list-item__tile-holder-l,
|
|
77
|
+
.udex-link-list-item__tile-holder-s {
|
|
78
|
+
color: var(--udex-link-list-item-tile-text-color);
|
|
79
|
+
display: flex;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.udex-link-list-item__tile-holder-l {
|
|
83
|
+
flex-direction: column;
|
|
84
|
+
}
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
line-height: var(--udexTypographyBodyLineHeight, 21px);
|
|
18
18
|
font-weight: var(--udexTypographyFontWeightRegular, 400);
|
|
19
19
|
color: var(--udex-list-item-group-header-supporting-text-color);
|
|
20
|
-
padding-top: var(--
|
|
20
|
+
padding-top: var(--udexSpacer2, 2px);
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
.udex-list__group-list {
|
package/src/themes/ListItem.css
CHANGED
|
@@ -199,7 +199,7 @@
|
|
|
199
199
|
line-height: var(--udexTypographyBodyLineHeight, 21px);
|
|
200
200
|
font-weight: var(--udexTypographyFontWeightRegular, 400);
|
|
201
201
|
color: var(--udex-list-item-supporting-text-color-default);
|
|
202
|
-
padding-top: var(--
|
|
202
|
+
padding-top: var(--udexSpacer2, 2px);
|
|
203
203
|
}
|
|
204
204
|
|
|
205
205
|
.udex-list__content {
|
|
@@ -275,4 +275,4 @@
|
|
|
275
275
|
|
|
276
276
|
.hidden {
|
|
277
277
|
display: none;
|
|
278
|
-
}
|
|
278
|
+
}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
/* eslint no-unused-vars: 0 */
|
|
2
|
-
import { html, ifDefined } from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
|
|
3
|
-
import { getCustomElementsScopingSuffix } from "@ui5/webcomponents-base/dist/CustomElementsScopeUtils.js";
|
|
4
|
-
function block0(context, tags, suffix) { return html `${this.interactive ? block1.call(this, context, tags, suffix) : block2.call(this, context, tags, suffix)}`; }
|
|
5
|
-
function block1(context, tags, suffix) { return html `<span class="hidden" id="tileDescription">${ifDefined(this.accessibleName)}</span><a class="udex-tile" part="tile" href="${ifDefined(this.href)}" target="${ifDefined(this.target)}" role="link" aria-describedby="tileDescription" @keydown="${this._onkeydown}" @click="${this._onclick}"><slot></slot></a>`; }
|
|
6
|
-
function block2(context, tags, suffix) { return html `<div class="udex-tile" part="tile" @click="${this._onclick}"><slot></slot></div>`; }
|
|
7
|
-
function template() { return block0.call(this, this, this.constructor.tagsToScope, getCustomElementsScopingSuffix()); }
|
|
8
|
-
export default template;
|
|
9
|
-
//# sourceMappingURL=TileTemplate.lit.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TileTemplate.lit.js","sourceRoot":"","sources":["../../../src/generated/templates/TileTemplate.lit.ts"],"names":[],"mappings":"AAAA,8BAA8B;AAC9B,OAAO,EAAE,IAAI,EAAmC,SAAS,EAAwB,MAAM,sDAAsD,CAAC;AAC9I,OAAO,EAAE,8BAA8B,EAAE,MAAM,0DAA0D,CAAC;AAK1G,SAAS,MAAM,CAAc,OAAmB,EAAE,IAAc,EAAE,MAA0B,IAAI,OAAO,IAAI,CAAA,GAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,CAAE,EAAE,CAAC,CAAA,CAAC;AAC1N,SAAS,MAAM,CAAc,OAAmB,EAAE,IAAc,EAAE,MAA0B,IAAI,OAAO,IAAI,CAAA,6CAA6C,SAAS,CAAC,IAAI,CAAC,cAAc,CAAC,iDAAiD,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,8DAA8D,IAAI,CAAC,UAAU,aAAa,IAAI,CAAC,QAAQ,qBAAqB,CAAC,CAAA,CAAC;AAC5Z,SAAS,MAAM,CAAc,OAAmB,EAAE,IAAc,EAAE,MAA0B,IAAI,OAAO,IAAI,CAAA,8CAA8C,IAAI,CAAC,QAAQ,uBAAuB,CAAC,CAAA,CAAC;AAE/L,SAAS,QAAQ,KAAe,OAAO,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,EAAG,IAAI,CAAC,WAAiC,CAAC,WAAW,EAAE,8BAA8B,EAAE,CAAC,CAAC,CAAC,CAAC;AACxJ,eAAe,QAAQ,CAAC","sourcesContent":["/* eslint no-unused-vars: 0 */\nimport { html, svg, repeat, classMap, styleMap, ifDefined, unsafeHTML, scopeTag } from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { getCustomElementsScopingSuffix } from \"@ui5/webcomponents-base/dist/CustomElementsScopeUtils.js\";\nimport type UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type Tile from \"../../Tile.js\";\nimport type { ClassMapValue } from \"@ui5/webcomponents-base/dist/types.js\";\n\t\nfunction block0 (this: Tile, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.interactive ? block1.call(this, context, tags, suffix) : block2.call(this, context, tags, suffix) }`;}\nfunction block1 (this: Tile, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class=\"hidden\" id=\"tileDescription\">${ifDefined(this.accessibleName)}</span><a class=\"udex-tile\" part=\"tile\" href=\"${ifDefined(this.href)}\" target=\"${ifDefined(this.target)}\" role=\"link\" aria-describedby=\"tileDescription\" @keydown=\"${this._onkeydown}\" @click=\"${this._onclick}\"><slot></slot></a>`;}\nfunction block2 (this: Tile, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class=\"udex-tile\" part=\"tile\" @click=\"${this._onclick}\"><slot></slot></div>`;}\n\nfunction template(this: Tile) { return block0.call(this, this, (this.constructor as typeof UI5Element).tagsToScope, getCustomElementsScopingSuffix()); }\nexport default template;"]}
|
package/src/Tile.hbs
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
{{#if interactive}}
|
|
2
|
-
<span class="hidden" id="tileDescription">{{accessibleName}}</span>
|
|
3
|
-
<a
|
|
4
|
-
class="udex-tile"
|
|
5
|
-
part="tile"
|
|
6
|
-
href="{{href}}"
|
|
7
|
-
target="{{target}}"
|
|
8
|
-
role="link"
|
|
9
|
-
aria-describedby="tileDescription"
|
|
10
|
-
@keydown="{{_onkeydown}}"
|
|
11
|
-
@click="{{_onclick}}">
|
|
12
|
-
<slot></slot>
|
|
13
|
-
</a>
|
|
14
|
-
{{else}}
|
|
15
|
-
<div
|
|
16
|
-
class="udex-tile"
|
|
17
|
-
part="tile"
|
|
18
|
-
@click="{{_onclick}}">
|
|
19
|
-
<slot></slot>
|
|
20
|
-
</div>
|
|
21
|
-
{{/if}}
|
|
@@ -1,13 +0,0 @@
|
|
|
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 { getCustomElementsScopingSuffix } from "@ui5/webcomponents-base/dist/CustomElementsScopeUtils.js";
|
|
4
|
-
import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
|
|
5
|
-
import type Tile from "../../Tile.js";
|
|
6
|
-
import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
|
|
7
|
-
|
|
8
|
-
function block0 (this: Tile, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.interactive ? block1.call(this, context, tags, suffix) : block2.call(this, context, tags, suffix) }`;}
|
|
9
|
-
function block1 (this: Tile, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="hidden" id="tileDescription">${ifDefined(this.accessibleName)}</span><a class="udex-tile" part="tile" href="${ifDefined(this.href)}" target="${ifDefined(this.target)}" role="link" aria-describedby="tileDescription" @keydown="${this._onkeydown}" @click="${this._onclick}"><slot></slot></a>`;}
|
|
10
|
-
function block2 (this: Tile, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-tile" part="tile" @click="${this._onclick}"><slot></slot></div>`;}
|
|
11
|
-
|
|
12
|
-
function template(this: Tile) { return block0.call(this, this, (this.constructor as typeof UI5Element).tagsToScope, getCustomElementsScopingSuffix()); }
|
|
13
|
-
export default template;
|