@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
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RatingIndicator.css.js","sourceRoot":"","sources":["../../../src/generated/themes/RatingIndicator.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,yDAAyD,CAAC;AAExG,OAAO,gBAAgB,MAAM,uFAAuF,CAAC;AACrH,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAElE,6BAA6B,CAAC,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,uBAAuB,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,gBAAgB,CAAC,CAAC;AACxH,6BAA6B,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,YAAY,CAAC,CAAC;AAChN,eAAe;CACd,CAAA","sourcesContent":["import { registerThemePropertiesLoader } from \"@ui5/webcomponents-base/dist/asset-registries/Themes.js\";\n\nimport defaultThemeBase from \"@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js\";\nimport defaultTheme from \"./sap_horizon/parameters-bundle.css.js\";\n\nregisterThemePropertiesLoader(\"@\" + \"ui5\" + \"/\" + \"webcomponents-theming\", \"sap_horizon\", async () => defaultThemeBase);\nregisterThemePropertiesLoader(\"@\" + \"s\" + \"a\" + \"p\" + \"u\" + \"d\" + \"e\" + \"x\" + \"/\" + \"w\" + \"e\" + \"b\" + \"-\" + \"c\" + \"o\" + \"m\" + \"p\" + \"o\" + \"n\" + \"e\" + \"n\" + \"t\" + \"s\", \"sap_horizon\", async () => defaultTheme);\nexport 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-
|
|
1
|
+
{"version":3,"file":"RatingIndicator.css.js","sourceRoot":"","sources":["../../../src/generated/themes/RatingIndicator.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,yDAAyD,CAAC;AAExG,OAAO,gBAAgB,MAAM,uFAAuF,CAAC;AACrH,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAElE,6BAA6B,CAAC,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,uBAAuB,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,gBAAgB,CAAC,CAAC;AACxH,6BAA6B,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,YAAY,CAAC,CAAC;AAChN,eAAe;CACd,CAAA","sourcesContent":["import { registerThemePropertiesLoader } from \"@ui5/webcomponents-base/dist/asset-registries/Themes.js\";\n\nimport defaultThemeBase from \"@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js\";\nimport defaultTheme from \"./sap_horizon/parameters-bundle.css.js\";\n\nregisterThemePropertiesLoader(\"@\" + \"ui5\" + \"/\" + \"webcomponents-theming\", \"sap_horizon\", async () => defaultThemeBase);\nregisterThemePropertiesLoader(\"@\" + \"s\" + \"a\" + \"p\" + \"u\" + \"d\" + \"e\" + \"x\" + \"/\" + \"w\" + \"e\" + \"b\" + \"-\" + \"c\" + \"o\" + \"m\" + \"p\" + \"o\" + \"n\" + \"e\" + \"n\" + \"t\" + \"s\", \"sap_horizon\", async () => defaultTheme);\nexport 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)}\n`"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const _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-
|
|
1
|
+
declare const _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)}\n";
|
|
2
2
|
export default _default;
|
|
@@ -3,6 +3,6 @@ import defaultThemeBase from "@ui5/webcomponents-theming/dist/generated/themes/s
|
|
|
3
3
|
import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
|
|
4
4
|
registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
|
|
5
5
|
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);
|
|
6
|
-
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-
|
|
6
|
+
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)}
|
|
7
7
|
`;
|
|
8
8
|
//# sourceMappingURL=Slider.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.css.js","sourceRoot":"","sources":["../../../src/generated/themes/Slider.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,yDAAyD,CAAC;AAExG,OAAO,gBAAgB,MAAM,uFAAuF,CAAC;AACrH,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAElE,6BAA6B,CAAC,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,uBAAuB,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,gBAAgB,CAAC,CAAC;AACxH,6BAA6B,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,YAAY,CAAC,CAAC;AAChN,eAAe;CACd,CAAA","sourcesContent":["import { registerThemePropertiesLoader } from \"@ui5/webcomponents-base/dist/asset-registries/Themes.js\";\n\nimport defaultThemeBase from \"@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js\";\nimport defaultTheme from \"./sap_horizon/parameters-bundle.css.js\";\n\nregisterThemePropertiesLoader(\"@\" + \"ui5\" + \"/\" + \"webcomponents-theming\", \"sap_horizon\", async () => defaultThemeBase);\nregisterThemePropertiesLoader(\"@\" + \"s\" + \"a\" + \"p\" + \"u\" + \"d\" + \"e\" + \"x\" + \"/\" + \"w\" + \"e\" + \"b\" + \"-\" + \"c\" + \"o\" + \"m\" + \"p\" + \"o\" + \"n\" + \"e\" + \"n\" + \"t\" + \"s\", \"sap_horizon\", async () => defaultTheme);\nexport 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-
|
|
1
|
+
{"version":3,"file":"Slider.css.js","sourceRoot":"","sources":["../../../src/generated/themes/Slider.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,yDAAyD,CAAC;AAExG,OAAO,gBAAgB,MAAM,uFAAuF,CAAC;AACrH,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAElE,6BAA6B,CAAC,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,uBAAuB,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,gBAAgB,CAAC,CAAC;AACxH,6BAA6B,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,YAAY,CAAC,CAAC;AAChN,eAAe;CACd,CAAA","sourcesContent":["import { registerThemePropertiesLoader } from \"@ui5/webcomponents-base/dist/asset-registries/Themes.js\";\n\nimport defaultThemeBase from \"@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js\";\nimport defaultTheme from \"./sap_horizon/parameters-bundle.css.js\";\n\nregisterThemePropertiesLoader(\"@\" + \"ui5\" + \"/\" + \"webcomponents-theming\", \"sap_horizon\", async () => defaultThemeBase);\nregisterThemePropertiesLoader(\"@\" + \"s\" + \"a\" + \"p\" + \"u\" + \"d\" + \"e\" + \"x\" + \"/\" + \"w\" + \"e\" + \"b\" + \"-\" + \"c\" + \"o\" + \"m\" + \"p\" + \"o\" + \"n\" + \"e\" + \"n\" + \"t\" + \"s\", \"sap_horizon\", async () => defaultTheme);\nexport 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)}\n`"]}
|
|
@@ -1192,6 +1192,78 @@
|
|
|
1192
1192
|
"attributes": [],
|
|
1193
1193
|
"references": []
|
|
1194
1194
|
},
|
|
1195
|
+
{
|
|
1196
|
+
"name": "udex-link-list",
|
|
1197
|
+
"description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-link-list</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/LinkList.js\";</code>\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - Slot for list items.",
|
|
1198
|
+
"attributes": [
|
|
1199
|
+
{
|
|
1200
|
+
"name": "accessible-name",
|
|
1201
|
+
"description": "Defines the accessible ARIA name of the component.",
|
|
1202
|
+
"values": []
|
|
1203
|
+
},
|
|
1204
|
+
{
|
|
1205
|
+
"name": "accessible-role",
|
|
1206
|
+
"description": "Defines the role of the item.",
|
|
1207
|
+
"values": []
|
|
1208
|
+
},
|
|
1209
|
+
{
|
|
1210
|
+
"name": "type",
|
|
1211
|
+
"description": "Defines the type of the item.",
|
|
1212
|
+
"values": [
|
|
1213
|
+
{ "name": "Link" },
|
|
1214
|
+
{ "name": "TileS" },
|
|
1215
|
+
{ "name": "TileL" }
|
|
1216
|
+
]
|
|
1217
|
+
}
|
|
1218
|
+
],
|
|
1219
|
+
"references": []
|
|
1220
|
+
},
|
|
1221
|
+
{
|
|
1222
|
+
"name": "udex-link-list-item",
|
|
1223
|
+
"description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-link-list-item</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/LinkListItem.js\";</code>\n\n\n---\n\n\n\n\n### **Events:**\n - **item-click** - Triggered when the user clicks on an item.",
|
|
1224
|
+
"attributes": [
|
|
1225
|
+
{
|
|
1226
|
+
"name": "href",
|
|
1227
|
+
"description": "Defines the href for the item.",
|
|
1228
|
+
"values": []
|
|
1229
|
+
},
|
|
1230
|
+
{
|
|
1231
|
+
"name": "target",
|
|
1232
|
+
"description": "Defines target for the item",
|
|
1233
|
+
"values": [
|
|
1234
|
+
{ "name": "_blank" },
|
|
1235
|
+
{ "name": "_parent" },
|
|
1236
|
+
{ "name": "_self" },
|
|
1237
|
+
{ "name": "_top" }
|
|
1238
|
+
]
|
|
1239
|
+
},
|
|
1240
|
+
{
|
|
1241
|
+
"name": "icon",
|
|
1242
|
+
"description": "Defines the icon, displayed as graphical element within the component before the item's label.",
|
|
1243
|
+
"values": []
|
|
1244
|
+
},
|
|
1245
|
+
{
|
|
1246
|
+
"name": "type",
|
|
1247
|
+
"description": "Defines the type of the item.",
|
|
1248
|
+
"values": [
|
|
1249
|
+
{ "name": "Link" },
|
|
1250
|
+
{ "name": "TileS" },
|
|
1251
|
+
{ "name": "TileL" }
|
|
1252
|
+
]
|
|
1253
|
+
},
|
|
1254
|
+
{
|
|
1255
|
+
"name": "accessible-name",
|
|
1256
|
+
"description": "Defines the accessible aria-label of the component.",
|
|
1257
|
+
"values": []
|
|
1258
|
+
},
|
|
1259
|
+
{
|
|
1260
|
+
"name": "label",
|
|
1261
|
+
"description": "Defines the label of the item.",
|
|
1262
|
+
"values": []
|
|
1263
|
+
}
|
|
1264
|
+
],
|
|
1265
|
+
"references": []
|
|
1266
|
+
},
|
|
1195
1267
|
{
|
|
1196
1268
|
"name": "udex-list",
|
|
1197
1269
|
"description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-list</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/List.js\";</code>\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - Slot for list items.",
|
package/dist/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
|
|
3
3
|
"name": "@sapudex/web-components",
|
|
4
|
-
"version": "2.
|
|
4
|
+
"version": "2.8.0",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -2652,6 +2652,146 @@
|
|
|
2652
2652
|
"events": [],
|
|
2653
2653
|
"js": { "properties": [], "events": [] }
|
|
2654
2654
|
},
|
|
2655
|
+
{
|
|
2656
|
+
"name": "udex-link-list",
|
|
2657
|
+
"description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-link-list</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/LinkList.js\";</code>\n---\n\n\n### **Slots:**\n - **default** - Slot for list items.",
|
|
2658
|
+
"doc-url": "",
|
|
2659
|
+
"attributes": [
|
|
2660
|
+
{
|
|
2661
|
+
"name": "accessible-name",
|
|
2662
|
+
"description": "Defines the accessible ARIA name of the component.",
|
|
2663
|
+
"value": { "type": "string | undefined", "default": "undefined" }
|
|
2664
|
+
},
|
|
2665
|
+
{
|
|
2666
|
+
"name": "accessible-role",
|
|
2667
|
+
"description": "Defines the role of the item.",
|
|
2668
|
+
"value": { "type": "string", "default": "\"list\"" }
|
|
2669
|
+
},
|
|
2670
|
+
{
|
|
2671
|
+
"name": "type",
|
|
2672
|
+
"description": "Defines the type of the item.",
|
|
2673
|
+
"value": {
|
|
2674
|
+
"type": "\"Link\" | \"TileS\" | \"TileL\"",
|
|
2675
|
+
"default": "\"link-based\""
|
|
2676
|
+
}
|
|
2677
|
+
}
|
|
2678
|
+
],
|
|
2679
|
+
"slots": [
|
|
2680
|
+
{ "name": "default", "description": "Slot for list items." }
|
|
2681
|
+
],
|
|
2682
|
+
"events": [],
|
|
2683
|
+
"js": {
|
|
2684
|
+
"properties": [
|
|
2685
|
+
{
|
|
2686
|
+
"name": "accessible-name",
|
|
2687
|
+
"description": "Defines the accessible ARIA name of the component.",
|
|
2688
|
+
"value": { "type": "string | undefined" }
|
|
2689
|
+
},
|
|
2690
|
+
{
|
|
2691
|
+
"name": "accessible-role",
|
|
2692
|
+
"description": "Defines the role of the item.",
|
|
2693
|
+
"value": { "type": "string" }
|
|
2694
|
+
},
|
|
2695
|
+
{
|
|
2696
|
+
"name": "type",
|
|
2697
|
+
"description": "Defines the type of the item.",
|
|
2698
|
+
"value": { "type": "\"Link\" | \"TileS\" | \"TileL\"" }
|
|
2699
|
+
}
|
|
2700
|
+
],
|
|
2701
|
+
"events": []
|
|
2702
|
+
}
|
|
2703
|
+
},
|
|
2704
|
+
{
|
|
2705
|
+
"name": "udex-link-list-item",
|
|
2706
|
+
"description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-link-list-item</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/LinkListItem.js\";</code>\n---\n\n\n### **Events:**\n - **item-click** - Triggered when the user clicks on an item.",
|
|
2707
|
+
"doc-url": "",
|
|
2708
|
+
"attributes": [
|
|
2709
|
+
{
|
|
2710
|
+
"name": "href",
|
|
2711
|
+
"description": "Defines the href for the item.",
|
|
2712
|
+
"value": { "type": "string | undefined", "default": "undefined" }
|
|
2713
|
+
},
|
|
2714
|
+
{
|
|
2715
|
+
"name": "target",
|
|
2716
|
+
"description": "Defines target for the item",
|
|
2717
|
+
"value": {
|
|
2718
|
+
"type": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
|
|
2719
|
+
"default": "\"_self\""
|
|
2720
|
+
}
|
|
2721
|
+
},
|
|
2722
|
+
{
|
|
2723
|
+
"name": "icon",
|
|
2724
|
+
"description": "Defines the icon, displayed as graphical element within the component before the item's label.",
|
|
2725
|
+
"value": { "type": "string | undefined", "default": "undefined" }
|
|
2726
|
+
},
|
|
2727
|
+
{
|
|
2728
|
+
"name": "type",
|
|
2729
|
+
"description": "Defines the type of the item.",
|
|
2730
|
+
"value": {
|
|
2731
|
+
"type": "\"Link\" | \"TileS\" | \"TileL\"",
|
|
2732
|
+
"default": "\"link\""
|
|
2733
|
+
}
|
|
2734
|
+
},
|
|
2735
|
+
{
|
|
2736
|
+
"name": "accessible-name",
|
|
2737
|
+
"description": "Defines the accessible aria-label of the component.",
|
|
2738
|
+
"value": { "type": "string | undefined", "default": "undefined" }
|
|
2739
|
+
},
|
|
2740
|
+
{
|
|
2741
|
+
"name": "label",
|
|
2742
|
+
"description": "Defines the label of the item.",
|
|
2743
|
+
"value": { "type": "string | undefined", "default": "undefined" }
|
|
2744
|
+
}
|
|
2745
|
+
],
|
|
2746
|
+
"events": [
|
|
2747
|
+
{
|
|
2748
|
+
"name": "item-click",
|
|
2749
|
+
"description": "Triggered when the user clicks on an item."
|
|
2750
|
+
}
|
|
2751
|
+
],
|
|
2752
|
+
"js": {
|
|
2753
|
+
"properties": [
|
|
2754
|
+
{
|
|
2755
|
+
"name": "href",
|
|
2756
|
+
"description": "Defines the href for the item.",
|
|
2757
|
+
"value": { "type": "string | undefined" }
|
|
2758
|
+
},
|
|
2759
|
+
{
|
|
2760
|
+
"name": "target",
|
|
2761
|
+
"description": "Defines target for the item",
|
|
2762
|
+
"value": {
|
|
2763
|
+
"type": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\""
|
|
2764
|
+
}
|
|
2765
|
+
},
|
|
2766
|
+
{
|
|
2767
|
+
"name": "icon",
|
|
2768
|
+
"description": "Defines the icon, displayed as graphical element within the component before the item's label.",
|
|
2769
|
+
"value": { "type": "string | undefined" }
|
|
2770
|
+
},
|
|
2771
|
+
{
|
|
2772
|
+
"name": "type",
|
|
2773
|
+
"description": "Defines the type of the item.",
|
|
2774
|
+
"value": { "type": "\"Link\" | \"TileS\" | \"TileL\"" }
|
|
2775
|
+
},
|
|
2776
|
+
{
|
|
2777
|
+
"name": "accessible-name",
|
|
2778
|
+
"description": "Defines the accessible aria-label of the component.",
|
|
2779
|
+
"value": { "type": "string | undefined" }
|
|
2780
|
+
},
|
|
2781
|
+
{
|
|
2782
|
+
"name": "label",
|
|
2783
|
+
"description": "Defines the label of the item.",
|
|
2784
|
+
"value": { "type": "string | undefined" }
|
|
2785
|
+
}
|
|
2786
|
+
],
|
|
2787
|
+
"events": [
|
|
2788
|
+
{
|
|
2789
|
+
"name": "item-click",
|
|
2790
|
+
"description": "Triggered when the user clicks on an item."
|
|
2791
|
+
}
|
|
2792
|
+
]
|
|
2793
|
+
}
|
|
2794
|
+
},
|
|
2655
2795
|
{
|
|
2656
2796
|
"name": "udex-list",
|
|
2657
2797
|
"description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-list</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/List.js\";</code>\n---\n\n\n### **Slots:**\n - **default** - Slot for list items.",
|
package/package.json
CHANGED
package/src/LinkList.ts
ADDED
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
|
|
2
|
+
import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
|
|
3
|
+
import property from "@ui5/webcomponents-base/dist/decorators/property.js";
|
|
4
|
+
import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
|
|
5
|
+
import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
|
|
6
|
+
import type UDExLinkListItem from "./LinkListItem.js";
|
|
7
|
+
import LinkListTemplate from "./LinkListTemplate.js";
|
|
8
|
+
|
|
9
|
+
// Styles
|
|
10
|
+
import LinkListCss from "./generated/themes/LinkList.css.js";
|
|
11
|
+
|
|
12
|
+
export enum UDExLinkListType {
|
|
13
|
+
Link = "Link",
|
|
14
|
+
TileS = "TileS",
|
|
15
|
+
TileL = "TileL",
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* @class
|
|
19
|
+
*
|
|
20
|
+
* <h3 class="comment-api-title">Overview</h3>
|
|
21
|
+
*
|
|
22
|
+
*
|
|
23
|
+
* <h3>Usage</h3>
|
|
24
|
+
*
|
|
25
|
+
* For the <code>udex-link-list</code>
|
|
26
|
+
* <h3>ES6 Module Import</h3>
|
|
27
|
+
*
|
|
28
|
+
* <code>import "@sapudex/web-components/dist/LinkList.js";</code>
|
|
29
|
+
*
|
|
30
|
+
* @constructor
|
|
31
|
+
* @extends UI5Element
|
|
32
|
+
* @tagname udex-link-list
|
|
33
|
+
* @public
|
|
34
|
+
*/
|
|
35
|
+
@customElement({
|
|
36
|
+
tag: "udex-link-list",
|
|
37
|
+
renderer: jsxRenderer,
|
|
38
|
+
styles: LinkListCss,
|
|
39
|
+
template: LinkListTemplate,
|
|
40
|
+
})
|
|
41
|
+
|
|
42
|
+
class UDExLinkList extends UI5Element {
|
|
43
|
+
/**
|
|
44
|
+
* Defines the accessible ARIA name of the component.
|
|
45
|
+
*
|
|
46
|
+
* @default undefined
|
|
47
|
+
* @public
|
|
48
|
+
*/
|
|
49
|
+
@property()
|
|
50
|
+
accessibleName?: string;
|
|
51
|
+
|
|
52
|
+
/**
|
|
53
|
+
* Defines the role of the item.
|
|
54
|
+
* @public
|
|
55
|
+
* @default "list"
|
|
56
|
+
*
|
|
57
|
+
*/
|
|
58
|
+
@property()
|
|
59
|
+
accessibleRole = "list";
|
|
60
|
+
|
|
61
|
+
/**
|
|
62
|
+
* Slot for list items.
|
|
63
|
+
*
|
|
64
|
+
* @slot items
|
|
65
|
+
* @public
|
|
66
|
+
*/
|
|
67
|
+
@slot({ type: HTMLElement, "default": true })
|
|
68
|
+
items!: Array<UDExLinkListItem>;
|
|
69
|
+
|
|
70
|
+
/**
|
|
71
|
+
* Defines the type of the item.
|
|
72
|
+
*
|
|
73
|
+
* @default "link-based"
|
|
74
|
+
* @public
|
|
75
|
+
*/
|
|
76
|
+
@property()
|
|
77
|
+
type: `${UDExLinkListType}` = UDExLinkListType.Link;
|
|
78
|
+
|
|
79
|
+
onBeforeRendering(): void {
|
|
80
|
+
this.prepareListItems();
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
prepareListItems(): void {
|
|
84
|
+
this.items.forEach(item => {
|
|
85
|
+
item.type = this.type;
|
|
86
|
+
item._accessibleRole = "listitem";
|
|
87
|
+
});
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
UDExLinkList.define();
|
|
92
|
+
|
|
93
|
+
export default UDExLinkList;
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
|
|
2
|
+
import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
|
|
3
|
+
import property from "@ui5/webcomponents-base/dist/decorators/property.js";
|
|
4
|
+
import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
|
|
5
|
+
import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
|
|
6
|
+
import { UDExLinkListType } from "./LinkList.js";
|
|
7
|
+
import LinkListItemTemplate from "./LinkListItemTemplate.js";
|
|
8
|
+
import { UDExTarget } from "./types/common.js";
|
|
9
|
+
|
|
10
|
+
// Styles
|
|
11
|
+
import LinkListItemCss from "./generated/themes/LinkListItem.css.js";
|
|
12
|
+
|
|
13
|
+
type UDExListLinkItemClickEventDetail = {
|
|
14
|
+
originalEvent: Event,
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
/**
|
|
18
|
+
* @class
|
|
19
|
+
*
|
|
20
|
+
* <h3 class="comment-api-title">Overview</h3>
|
|
21
|
+
*
|
|
22
|
+
*
|
|
23
|
+
* <h3>Usage</h3>
|
|
24
|
+
*
|
|
25
|
+
* For the <code>udex-link-list-item</code>
|
|
26
|
+
* <h3>ES6 Module Import</h3>
|
|
27
|
+
*
|
|
28
|
+
* <code>import "@sapudex/web-components/dist/LinkListItem.js";</code>
|
|
29
|
+
*
|
|
30
|
+
* @constructor
|
|
31
|
+
* @extends UI5Element
|
|
32
|
+
* @tagname udex-link-list-item
|
|
33
|
+
* @public
|
|
34
|
+
*/
|
|
35
|
+
@customElement({
|
|
36
|
+
tag: "udex-link-list-item",
|
|
37
|
+
renderer: jsxRenderer,
|
|
38
|
+
styles: LinkListItemCss,
|
|
39
|
+
template: LinkListItemTemplate,
|
|
40
|
+
})
|
|
41
|
+
|
|
42
|
+
/**
|
|
43
|
+
* Triggered when the user clicks on an item.
|
|
44
|
+
* @public
|
|
45
|
+
*/
|
|
46
|
+
@event("item-click", { bubbles: true })
|
|
47
|
+
|
|
48
|
+
class UDExLinkListItem extends UI5Element {
|
|
49
|
+
eventDetails!: {
|
|
50
|
+
"item-click": UDExListLinkItemClickEventDetail,
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
/**
|
|
54
|
+
* Defines the href for the item.
|
|
55
|
+
* @default undefined
|
|
56
|
+
* @public
|
|
57
|
+
*/
|
|
58
|
+
@property()
|
|
59
|
+
href?: string;
|
|
60
|
+
|
|
61
|
+
/**
|
|
62
|
+
* Defines target for the item
|
|
63
|
+
* @default "_self"
|
|
64
|
+
* @public
|
|
65
|
+
*/
|
|
66
|
+
@property()
|
|
67
|
+
target: `${UDExTarget}` = UDExTarget._self;
|
|
68
|
+
|
|
69
|
+
/**
|
|
70
|
+
* Defines the icon, displayed as graphical element within the component before the item's label.
|
|
71
|
+
*
|
|
72
|
+
* @default undefined
|
|
73
|
+
* @public
|
|
74
|
+
*/
|
|
75
|
+
@property()
|
|
76
|
+
icon?: string;
|
|
77
|
+
|
|
78
|
+
/**
|
|
79
|
+
* Defines the type of the item.
|
|
80
|
+
* @default "link"
|
|
81
|
+
* @public
|
|
82
|
+
*/
|
|
83
|
+
@property()
|
|
84
|
+
type: `${UDExLinkListType}` = UDExLinkListType.Link;
|
|
85
|
+
|
|
86
|
+
/**
|
|
87
|
+
* Defines the accessible aria-label of the component.
|
|
88
|
+
*
|
|
89
|
+
* @default undefined
|
|
90
|
+
* @public
|
|
91
|
+
*/
|
|
92
|
+
@property()
|
|
93
|
+
accessibleName?: string;
|
|
94
|
+
|
|
95
|
+
/**
|
|
96
|
+
* Defines the role of the item.
|
|
97
|
+
* @private
|
|
98
|
+
* @default "listitem"
|
|
99
|
+
*
|
|
100
|
+
*/
|
|
101
|
+
@property()
|
|
102
|
+
_accessibleRole?: string;
|
|
103
|
+
|
|
104
|
+
/**
|
|
105
|
+
* Defines the label of the item.
|
|
106
|
+
*
|
|
107
|
+
* @default undefined
|
|
108
|
+
* @public
|
|
109
|
+
*/
|
|
110
|
+
@property()
|
|
111
|
+
label?: string;
|
|
112
|
+
|
|
113
|
+
fireItemClickEvent(e: CustomEvent): void {
|
|
114
|
+
this.fireDecoratorEvent("item-click", {
|
|
115
|
+
originalEvent: this.isLink ? e : e.detail.originalEvent,
|
|
116
|
+
});
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
get isLink(): boolean {
|
|
120
|
+
return this.type === UDExLinkListType.Link;
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
UDExLinkListItem.define();
|
|
125
|
+
|
|
126
|
+
export default UDExLinkListItem;
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import type LinkListItem from "./LinkListItem.js";
|
|
2
|
+
import { UDExLinkListType } from "./LinkList.js";
|
|
3
|
+
import UDExDivider from "./Divider.js";
|
|
4
|
+
import UDExLink from "./Link.js";
|
|
5
|
+
import UDExTile from "./Tile.js";
|
|
6
|
+
import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
|
|
7
|
+
import slimArrowRight from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
|
|
8
|
+
import type { AriaRole } from "@ui5/webcomponents-base/dist/types.js";
|
|
9
|
+
|
|
10
|
+
export default function LinkListItemTemplate(this: LinkListItem) {
|
|
11
|
+
const isTileL = this.type === UDExLinkListType.TileL;
|
|
12
|
+
const rootClass = "udex-link-list-item";
|
|
13
|
+
const tileClass = isTileL ? `${rootClass}__tile-l` : `${rootClass}__tile-s`;
|
|
14
|
+
const iconClass = isTileL ? `${rootClass}__tile-icon-l` : `${rootClass}__tile-icon-s`;
|
|
15
|
+
const holderClass = isTileL ? `${rootClass}__tile-holder-l` : `${rootClass}__tile-holder-s`;
|
|
16
|
+
const textClass = isTileL ? `${rootClass}__tile-text-l` : `${rootClass}__tile-text-s`;
|
|
17
|
+
|
|
18
|
+
return (
|
|
19
|
+
<div
|
|
20
|
+
className={rootClass}
|
|
21
|
+
role={this._accessibleRole as AriaRole}>
|
|
22
|
+
{this.isLink && (
|
|
23
|
+
<>
|
|
24
|
+
<UDExLink
|
|
25
|
+
class={`${rootClass}__link`}
|
|
26
|
+
endIcon={slimArrowRight}
|
|
27
|
+
accessibleName={this.accessibleName}
|
|
28
|
+
href={this.href}
|
|
29
|
+
target={this.target}
|
|
30
|
+
onClick={this.fireItemClickEvent}>
|
|
31
|
+
{this.label}
|
|
32
|
+
</UDExLink>
|
|
33
|
+
<UDExDivider class={`${rootClass}__divider`}></UDExDivider>
|
|
34
|
+
</>
|
|
35
|
+
)}
|
|
36
|
+
{!this.isLink && (
|
|
37
|
+
<UDExTile
|
|
38
|
+
class={tileClass}
|
|
39
|
+
href={this.href}
|
|
40
|
+
target={this.target}
|
|
41
|
+
accessibleName={this.accessibleName}
|
|
42
|
+
onui5-click={this.fireItemClickEvent}
|
|
43
|
+
interactive>
|
|
44
|
+
<div class={holderClass}>
|
|
45
|
+
{this.icon && <UI5Icon class={iconClass} name={this.icon}></UI5Icon>}
|
|
46
|
+
<span class={textClass}>{this.label}</span>
|
|
47
|
+
</div>
|
|
48
|
+
</UDExTile>
|
|
49
|
+
)}
|
|
50
|
+
</div>
|
|
51
|
+
);
|
|
52
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type LinkList from "./LinkList.js";
|
|
2
|
+
import type { AriaRole } from "@ui5/webcomponents-base/dist/types.js";
|
|
3
|
+
|
|
4
|
+
export default function LinkListTemplate(this: LinkList) {
|
|
5
|
+
return (
|
|
6
|
+
<div
|
|
7
|
+
className="udex-link-list"
|
|
8
|
+
role={this.accessibleRole as AriaRole}
|
|
9
|
+
aria-label={this.accessibleName}>
|
|
10
|
+
<slot></slot>
|
|
11
|
+
</div>
|
|
12
|
+
);
|
|
13
|
+
}
|