@sapudex/web-components 0.111.0

package/src/themes/overrides/@ui5/webcomponents/sap_glow/parameters-bundle.css

@@ -0,0 +1,205 @@
+:root {
+  --browser_scrollbar_border_radius: var(--udexRadiusM, 8px);
+  --_ui5_popup_header_font_family: var(--sapFontFamily);
+  --_ui5_popup_header_font_weight: var(--udexTypographyFontWeightRegular);
+
+  /* Checkbox */
+  --_ui5_checkbox_inner_background: var(--sapBackgroundColor);
+  --_ui5_checkbox_inner_border: var(--sapElement_BorderWidth) solid var(--sapField_BorderColor);
+  --_ui5_checkbox_inner_selected_border_color: var(--sapField_BorderColor);
+  --_ui5_checkbox_checkmark_color: var(--udexColorBlue7);
+  --_ui5_checkbox_inner_hover_checked_border_color: var(--sapContent_Selected_ForegroundColor, #0070f2);
+  --_ui5_checkbox_inner_hover_border_color: var(--sapContent_Selected_ForegroundColor, #0070f2);
+  --_ui5_checkbox_hover_background: var(--sapInformationBackground, #EBF8FF);
+  --_ui5_checkbox_inner_active_border_color: var(--sapSelectedColor);
+  --_ui5_checkbox_label_color: var(--sapField_TextColor);
+  --_ui5_checkbox_inner_disabled_border_color: var(--sapField_BorderColor);
+  --_ui5_checkbox_disabled_label_color: var(--sapField_TextColor);
+  --_ui5_checkbox_inner_width_height: 24px;
+  --_ui5_checkbox_width_height: 42px;
+  --_ui5_checkbox_icon_size: 16px;
+  --_ui5_checkbox_partially_icon_size: 16px;
+  --_ui5_checkbox_inner_border_radius: 4px;
+  --_ui5_checkbox_disabled_opacity: var(--sapContent_DisabledOpacity);
+  --_ui5_checkbox_inner_readonly_border: var(--sapElement_BorderWidth) var(--sapField_ReadOnly_BorderColor) dashed;
+  --_ui5_checkbox_inner_success_border: var(--sapField_SuccessBorderWidth) solid var(--udexCoreSemanticSuccess6);
+  --_ui5_checkbox_inner_success_background_hover: var(--sapSuccessBackground, #F5FAE5);
+  --_ui5_checkbox_inner_error_border: var(--sapField_InvalidBorderWidth) solid var(--udexCoreSemanticError5);
+  --_ui5_checkbox_inner_error_background_hover: var(--sapErrorBackground, #FFEAF4);
+  --_ui5_checkbox_label_offset: 0.563rem;
+  --_ui5_checkbox_right_focus_distance: var(--udexSpacer8);
+
+  /* Radio button */
+  --_ui5_radio_button_outer_ring_bg: var(--sapField_Background, #ffffff);
+  --_ui5_radio_button_inner_size: 24px;
+  --_ui5_radio_button_checked_fill: var(--sapContent_Selected_ForegroundColor, #0070f2);
+  --_ui5_radio_button_height: 42px;
+  --_ui5_radio_button_svg_size: 24px;
+  --_ui5_radio_button_inner_ring_radius: 25%;
+  --_ui5_radio_button_outer_ring_padding_with_label: 9px 11px 9px 9px;
+  --_ui5_radio_button_outer_ring_padding: 9px;
+  --_ui5_radio_button_label_offset: 0;
+  --_ui5_radio_button_hover_fill: #EBF8FF;
+  --_ui5_radio_button_outer_ring_checked_color: var(--sapContent_Selected_ForegroundColor, #0070f2);
+  --_ui5_radio_button_outer_ring_checked_hover_color: var(--sapContent_Selected_ForegroundColor, #0070f2);
+  --_ui5_radio_button_outer_ring_color: var(--sapField_BorderColor, #5b738b);
+  --_ui5_radio_button_outer_ring_hover_color: var(--sapContent_Selected_ForegroundColor, #0070f2);
+  --_ui5_radio_button_inner_ring_color: var(--sapContent_Selected_ForegroundColor, #0070f2);
+  --_ui5_radio_button_read_only_inner_ring_color: var(--sapField_ReadOnly_BorderColor, #5B738B);
+  --_ui5_radio_button_hover_fill_success: var(--sapSuccessBackground, #F5FAE5);
+  --_ui5_radio_button_hover_fill_error: var(--sapErrorBackground, #FFEAF4);
+
+  /* Link */
+  --_ui5_link_focus_background_color: transparent;
+  --_ui5_link_focus_color: var(--sapLinkColor);
+  --_ui5_link_focus_text_decoration: underline;
+  --_ui5_link_focused_hover_text_color: var(--sapLink_Hover_Color);
+  --_ui5_link_focused_hover_text_decoration: underline;
+
+  /* Progress Indicator */
+  --_ui5_progress_indicator_bar_border_radius: 6px;
+  --_ui5_progress_indicator_root_height: 0.5rem;
+  --_ui5_progress_indicator_bar_height: 0.75rem;
+  --_ui5_progress_indicator_icon_size: 1.125rem;
+  --_ui5_progress_indicator_icon_right_position: -24px;
+  --_ui5_progress_indicator_padding_end: 24px;
+
+  /* Toast */
+  --_ui5_toast_vertical_offset: 2.5rem;
+  --_ui5_toast_background: var(--udexColorNeutralWhite);
+  --_ui5_toast_shadow: var(--sapContent_Shadow2);
+
+  /* Tooltip */
+  --_ui5_popover_box_shadow: 0px 0px 0px 1px var(--udexColorGrey4);
+
+  /* Message Strip */
+  --_ui5_message_strip_padding_inline_no_icon: var(--udexSpacer12, 12px);
+  --_ui5_message_strip_padding_block_no_icon: var(--udexSpacer8, 8px);
+  --_ui5_message_strip_padding: var(--udexSpacer8, 8px) 36px;
+  --_ui5_message_strip_icon_top: calc(50% - 8px);
+
+  /* Calendar & Date Picker */
+  --_ui5_daypicker_daynames_container_height: 42px;
+  --_ui5_daypicker_dayname_color: var(--udexColorGrey6, #5B738B);
+  --_ui5_daypicker_weekname_color: var(--udexColorGrey6, #5B738B);
+  --_ui5_daypicker_item_now_border_color: var(--udexColorPink8, #A100C2);
+  --_ui5_daypicker_item_weeekend_filter: none;
+  --_ui5_daypicker_item_select_between_border: 1px solid var(--udexColorBlue9, #0040B0);
+  --_ui5_calendar_header_middle_button_focus_outline: 1px solid var(--udexColorBlue9, #0040B0);
+  --_ui5_calendar_header_arrow_button_box_shadow: none;
+
+  /* Carousel */
+  --ui5_carousel_active_dot_background: var(--udexColorBlue9);
+
+  /* Tokenizer */
+  --_ui5_tokenizer_padding: var(--udexSpacer12, 12px);;
+
+  /* Slider */
+  --_ui5_slider_handle_icon_size: var(--udexSpacer20, 1.25rem);
+  --_ui5_slider_handle_width: 2.75rem;
+  --_ui5_slider_handle_height: var(--udexSpacer32, 2rem);
+  --_ui5_slider_handle_top: -0.875rem;
+  --_ui5_slider_label_color: var(--sapContent_MeasureIndicatorColor, #5b738b);
+  --_ui5_range_slider_progress_focus_top: -1.18rem;
+  --_ui5_slider_progress_after_background: var(--sapContent_MeasureIndicatorColor,
+      #5b738b);
+  --_ui5_slider_tickmark_bg: var(--sapContent_MeasureIndicatorColor, #5b738b);
+  --_ui5_slider_tickmark_in_range_bg: var(--sapSlider_Selected_BorderColor,
+      #0070f2);
+  --_ui5_slider_start_end_point_left: -0.875rem;
+  --_ui5_slider_tooltip_bottom: 2.5rem;
+  --_ui5_slider_tooltip_border: 1px solid var(--sapField_BorderColor, #5B738B);
+  --_ui5_slider_tooltip_border_radius: var(--udexSpacer4, 0.25rem);
+  --_ui5_slider_tooltip_color: var(--sapContent_MeasureIndicatorColor, #5b738b);
+  --_ui5_slider_tooltip_fontsize: var(--udexTypographyNavigationRegularMFontSize,
+      14px);
+  --_ui5_slider_tooltip_height: var(--udexSpacer32, 2rem);
+  --_ui5_slider_tooltip_min_width: 2.75rem;
+  --_ui5_slider_handle_focus_border: 2px solid var(--sapSlider_Active_HandleBorderColor);
+}
+
+/* Select Box more button */
+udex-select-box {
+  --sapFontSize: 12px;
+}
+
+/* Phone Number Field Button */
+udex-phone-number-field {
+  --_ui5_button_border_radius: var(--udexRadiusXS);
+}
+
+udex-search,
+udex-password-field,
+udex-select-box,
+udex-filter-menu,
+udex-country-selector {
+--_ui5_button_pressed_focused_border_color: transparent;
+}
+
+udex-password-field {
+  --_ui5_icon_transform_scale: none;
+}
+
+.sapUiSizeCompact,
+.ui5-content-density-compact,
+[data-ui5-compact-size] {
+  --_ui5_button_base_height: 3rem;
+  --_ui5_button_base_padding: 3rem;
+
+  /* Checkbox */
+  --_ui5_checkbox_inner_width_height: 24px;
+  --_ui5_checkbox_width_height: 42px;
+  --_ui5_checkbox_icon_size: 16px;
+  --_ui5_checkbox_partially_icon_size: 16px;
+
+  /* Radio button */
+  --_ui5_radio_button_min_width: 42px;
+  --_ui5_radio_button_outer_ring_padding:  9px;
+  --_ui5_radio_button_inner_size: 24px;
+  --_ui5_radio_button_height: 42px;
+  --_ui5_radio_button_svg_size: 24px;
+  --_ui5_radio_button_inner_ring_radius: 25%;
+  --_ui5_radio_button_outer_ring_padding_with_label: 9px 11px 9px 9px;
+  --_ui5_radio_button_label_offset: 0;
+
+  /* Progress Indicator */
+  --_ui5_progress_indicator_bar_border_radius: 6px;
+  --_ui5_progress_indicator_root_height: 0.5rem;
+  --_ui5_progress_indicator_bar_height: 0.75rem;
+  --_ui5_progress_indicator_icon_size: 1.125rem;
+  --_ui5_progress_indicator_icon_right_position: -24px;
+  --_ui5_progress_indicator_padding_end: 24px;
+
+  /* Toast */
+  --_ui5_toast_vertical_offset: 2.5rem;
+
+  /* Tooltip */
+  --_ui5_tc_item_text_line_height: 1.25rem;
+
+  /* Calendar & Date Picker */
+  --_ui5_calendar_top_bottom_padding: var(--udexSpacer8, 8px);
+  --_ui5_calendar_left_right_padding: var(--udexSpacer8, 8px);
+  --_ui5_day_picker_item_width: 42px;
+  --_ui5_day_picker_item_height: 42px;
+  --_ui5_calendar_width: 371px;
+  --_ui5_calendar_height: auto;
+  --_ui5_calendar_header_height: 42px;
+  --_ui5_calendar_header_arrow_button_width: 42px;
+  --_ui5_month_picker_item_height: 36px;
+  --_ui5_monthpicker_item_margin: -8px 0 var(--udexSpacer16, 16px) 0;
+  --_ui5_year_picker_item_height: 36px;
+  --_ui5_yearpicker_item_margin: -8px 0 var(--udexSpacer16, 16px) 0;
+
+  /* Slider */
+  --_ui5_slider_handle_icon_size: var(--udexSpacer20, 1.25rem);
+  --_ui5_slider_handle_width: 2.75rem;
+  --_ui5_slider_handle_height: var(--udexSpacer32, 2rem);
+  --_ui5_slider_handle_top: -0.875rem;
+  --_ui5_range_slider_progress_focus_top: -1.18rem;
+  --_ui5_slider_start_end_point_left: -0.875rem;
+  --_ui5_slider_tooltip_bottom: 2.5rem;
+  --_ui5_slider_tooltip_border_radius: var(--udexSpacer4, 0.25rem);
+  --_ui5_slider_tooltip_height: var(--udexSpacer32, 2rem);
+  --_ui5_slider_tooltip_min_width: 2.75rem;
+  --_ui5_slider_handle_focus_border: 2px solid var(--sapSlider_Active_HandleBorderColor);
+}

package/src/themes/sap_glow/parameters-bundle.css

@@ -0,0 +1,3 @@
+:root {
+
+}

package/src/types/Dropdown.ts

@@ -0,0 +1,13 @@
+export enum PlacementType {
+  Left = "Left",
+  Right = "Right",
+  Top = "Top",
+  Bottom = "Bottom",
+}
+
+export enum HorizontalAlign {
+  Center = "Center",
+  Left = "Left",
+  Right = "Right",
+  Stretch = "Stretch",
+}

package/src/types/List.ts

@@ -0,0 +1,26 @@
+export enum ListMode {
+  SingleSelect = "SingleSelect",
+  MultiSelect = "MultiSelect",
+  SingleContent = "SingleContent",
+  RadioGroup = "RadioGroup",
+}
+
+export enum ListStyleType {
+  None = "None",
+  Circle = "Circle",
+  Number = "Number",
+  Icon = "Icon",
+}
+
+export enum ListItemSize {
+  Standard = "Standard",
+  Large = "Large",
+}
+
+export enum AdditionalTextState {
+  None = "None",
+  Success = "Success",
+  Warning = "Warning",
+  Error = "Error",
+  Information = "Information",
+}

package/src/types/SearchableListBase.ts

@@ -0,0 +1,10 @@
+import UDExListItemBase from "../ListItemBase.js";
+import UDExListGroupHeaderBase from "../ListGroupHeaderBase.js";
+
+export interface ProcessedItem {
+  item: UDExListItemBase | UDExListGroupHeaderBase,
+  groupItems: UDExListItemBase[],
+  isGroup: boolean,
+}
+
+export const SHOW_SEARCH_AFTER_COUNT = 13;

package/src/types/Table.ts

@@ -0,0 +1,9 @@
+enum TableCellHorizontalAlign {
+  Left = "Left",
+  Start = "Start",
+  Right = "Right",
+  End = "End",
+  Center = "Center",
+}
+
+export default TableCellHorizontalAlign;

package/src/types/common.ts

@@ -0,0 +1,8 @@
+enum ValueState {
+  Standard = "Standard",
+  Warning = "Warning",
+  Error = "Error",
+  Success = "Success",
+}
+
+export default ValueState;

package/src/utils/debounce.ts

@@ -0,0 +1,11 @@
+type CallbackFunction = (args: any) => any;
+
+const debounce = <T extends CallbackFunction>(cb: T, timeout = 300) => {
+  let timer: ReturnType<typeof setTimeout>;
+  return (...args: any) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => { cb(args); }, timeout);
+  };
+};
+
+export default debounce;

package/src/utils/redirectAttributes.ts

@@ -0,0 +1,10 @@
+const redirectAttributes = (sourceElement: HTMLElement, targetElementId: string) => {
+  const targetElement = sourceElement.shadowRoot?.getElementById(targetElementId);
+  Array.from(sourceElement.attributes).forEach(attribute => {
+    if (attribute.name !== "id" && attribute.name !== "class") {
+      targetElement?.setAttribute(attribute.name, attribute.value);
+    }
+  });
+};
+
+export default redirectAttributes;

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+    "include": ["src/**/*", "global.d.ts"],
+    "compilerOptions": {
+      "target": "ES2021",
+      "module": "esnext",
+      // Generate d.ts files
+      "declaration": true,
+      "outDir": "dist",
+      "skipLibCheck": true,
+      "sourceMap": true,
+      "inlineSources": true,
+      "strict": true,
+      "moduleResolution": "node",
+      "experimentalDecorators": true,
+      "resolveJsonModule": true,
+      "allowSyntheticDefaultImports": true,
+    },
+}

package/turbo.json

@@ -0,0 +1,9 @@
+{
+  "extends": ["//"],
+  "pipeline": {
+    "start": {
+      "dependsOn": [ "prepare" ]
+    },
+    "prepare": {}
+  }
+}