@sapudex/web-components 0.231.3 → 0.231.5

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.
Files changed (175) hide show
  1. package/dist/Assets.d.ts +1 -0
  2. package/dist/Assets.js +1 -0
  3. package/dist/Assets.js.map +1 -1
  4. package/dist/ControlButton.d.ts +3 -1
  5. package/dist/ControlButton.js +13 -3
  6. package/dist/ControlButton.js.map +1 -1
  7. package/dist/CountrySelector.d.ts +2 -2
  8. package/dist/CountrySelector.js +8 -5
  9. package/dist/CountrySelector.js.map +1 -1
  10. package/dist/DatePicker.js +2 -2
  11. package/dist/DatePicker.js.map +1 -1
  12. package/dist/FilterMenu.d.ts +23 -4
  13. package/dist/FilterMenu.js +70 -13
  14. package/dist/FilterMenu.js.map +1 -1
  15. package/dist/MastheadShell.d.ts +6 -3
  16. package/dist/MastheadShell.js +14 -4
  17. package/dist/MastheadShell.js.map +1 -1
  18. package/dist/TextField.d.ts +19 -10
  19. package/dist/TextField.js +42 -29
  20. package/dist/TextField.js.map +1 -1
  21. package/dist/assets/ar-4f0abe88.js +1 -0
  22. package/dist/assets/ar_EG-33c30640.js +1 -0
  23. package/dist/assets/ar_SA-4fb0119e.js +1 -0
  24. package/dist/assets/bg-4dfbac34.js +1 -0
  25. package/dist/assets/{bundle.esm-d507a7fc.js → bundle.esm-c89b7e7f.js} +191 -191
  26. package/dist/assets/ca-0adfb0a5.js +1 -0
  27. package/dist/assets/cnr-7b8ee13c.js +1 -0
  28. package/dist/assets/cs-7ce6fc77.js +1 -0
  29. package/dist/assets/da-d531cb4b.js +1 -0
  30. package/dist/assets/de-0956bb86.js +1 -0
  31. package/dist/assets/de_AT-1d4a673c.js +1 -0
  32. package/dist/assets/de_CH-b0aa3afe.js +1 -0
  33. package/dist/assets/el-087bca7a.js +1 -0
  34. package/dist/assets/el_CY-e2999371.js +1 -0
  35. package/dist/assets/en-5e51a9cc.js +1 -0
  36. package/dist/assets/en_AU-d8fe8569.js +1 -0
  37. package/dist/assets/en_GB-ba18957c.js +1 -0
  38. package/dist/assets/en_HK-95927212.js +1 -0
  39. package/dist/assets/en_IE-72dac8b7.js +1 -0
  40. package/dist/assets/en_IN-c51dcb94.js +1 -0
  41. package/dist/assets/en_NZ-799668bd.js +1 -0
  42. package/dist/assets/en_PG-322a9c1d.js +1 -0
  43. package/dist/assets/en_SG-e2817500.js +1 -0
  44. package/dist/assets/en_ZA-7a8893ed.js +1 -0
  45. package/dist/assets/es-a49e4234.js +1 -0
  46. package/dist/assets/es_AR-987273ce.js +1 -0
  47. package/dist/assets/es_BO-6407ce81.js +1 -0
  48. package/dist/assets/es_CL-bbd249e2.js +1 -0
  49. package/dist/assets/es_CO-5aadb676.js +1 -0
  50. package/dist/assets/es_MX-64ffbc24.js +1 -0
  51. package/dist/assets/es_PE-220c371e.js +1 -0
  52. package/dist/assets/es_UY-9608e924.js +1 -0
  53. package/dist/assets/es_VE-87def8b1.js +1 -0
  54. package/dist/assets/et-ed2e4c5e.js +1 -0
  55. package/dist/assets/fa-372c2ca8.js +1 -0
  56. package/dist/assets/fi-49cc59c4.js +1 -0
  57. package/dist/assets/fr-cb891f3c.js +1 -0
  58. package/dist/assets/fr_BE-49546add.js +1 -0
  59. package/dist/assets/fr_CA-de78fbe1.js +1 -0
  60. package/dist/assets/fr_CH-36c5581d.js +1 -0
  61. package/dist/assets/fr_LU-84ec0ca9.js +1 -0
  62. package/dist/assets/he-7010fec0.js +1 -0
  63. package/dist/assets/hi-011032b8.js +1 -0
  64. package/dist/assets/hr-cf6424f4.js +1 -0
  65. package/dist/assets/hu-de5c6410.js +1 -0
  66. package/dist/assets/id-d519ad13.js +1 -0
  67. package/dist/assets/it-7571a45f.js +1 -0
  68. package/dist/assets/it_CH-2d02acb4.js +1 -0
  69. package/dist/assets/ja-ed518694.js +1 -0
  70. package/dist/assets/kk-11548ca1.js +1 -0
  71. package/dist/assets/ko-ff650cea.js +1 -0
  72. package/dist/assets/lt-a55a76f9.js +1 -0
  73. package/dist/assets/lv-988dcda6.js +1 -0
  74. package/dist/assets/mk-6f2db893.js +1 -0
  75. package/dist/assets/ms-79ea2811.js +1 -0
  76. package/dist/assets/nb-d8116e03.js +1 -0
  77. package/dist/assets/nl-60ec308f.js +1 -0
  78. package/dist/assets/nl_BE-b51c75e9.js +1 -0
  79. package/dist/assets/pl-78f5b229.js +1 -0
  80. package/dist/assets/pt-a8c3a084.js +1 -0
  81. package/dist/assets/pt_PT-73b47e3d.js +1 -0
  82. package/dist/assets/ro-bb1a86ed.js +1 -0
  83. package/dist/assets/ru-3f49aae1.js +1 -0
  84. package/dist/assets/ru_UA-3eeb1b85.js +1 -0
  85. package/dist/assets/sk-e6cafcc8.js +1 -0
  86. package/dist/assets/sl-0bc16b8c.js +1 -0
  87. package/dist/assets/sr-08575b3a.js +1 -0
  88. package/dist/assets/sr_Latn-1440b74b.js +1 -0
  89. package/dist/assets/sv-f1bbb7c1.js +1 -0
  90. package/dist/assets/th-a4513b78.js +1 -0
  91. package/dist/assets/tr-f0f57c58.js +1 -0
  92. package/dist/assets/uk-f6e80b51.js +1 -0
  93. package/dist/assets/vi-52a2fc96.js +1 -0
  94. package/dist/assets/zh_CN-c4c6c916.js +1 -0
  95. package/dist/assets/zh_HK-e173672f.js +1 -0
  96. package/dist/assets/zh_SG-fcc2a69f.js +1 -0
  97. package/dist/assets/zh_TW-f1555202.js +1 -0
  98. package/dist/css/themes/DatePicker.css +1 -1
  99. package/dist/css/themes/Dropdown.css +1 -1
  100. package/dist/css/themes/FilterMenu.css +1 -1
  101. package/dist/css/themes/MastheadItem.css +1 -1
  102. package/dist/css/themes/MastheadMenu.css +1 -1
  103. package/dist/css/themes/RatingIndicator.css +1 -1
  104. package/dist/css/themes/SelectBox.css +1 -1
  105. package/dist/css/themes/Slider.css +1 -1
  106. package/dist/css/themes/TextField.css +1 -1
  107. package/dist/custom-elements-internal.json +6 -6
  108. package/dist/custom-elements.json +6 -6
  109. package/dist/generated/templates/CountrySelectorTemplate.lit.js +1 -2
  110. package/dist/generated/templates/CountrySelectorTemplate.lit.js.map +1 -1
  111. package/dist/generated/templates/DatePickerTemplate.lit.js +1 -2
  112. package/dist/generated/templates/DatePickerTemplate.lit.js.map +1 -1
  113. package/dist/generated/templates/FilterMenuTemplate.lit.js +2 -2
  114. package/dist/generated/templates/FilterMenuTemplate.lit.js.map +1 -1
  115. package/dist/generated/templates/SearchableListBaseTemplate.lit.js +1 -1
  116. package/dist/generated/templates/SearchableListBaseTemplate.lit.js.map +1 -1
  117. package/dist/generated/templates/SelectBoxTemplate.lit.js +3 -3
  118. package/dist/generated/templates/SelectBoxTemplate.lit.js.map +1 -1
  119. package/dist/generated/templates/TextFieldTemplate.lit.js +1 -1
  120. package/dist/generated/templates/TextFieldTemplate.lit.js.map +1 -1
  121. package/dist/generated/themes/DatePicker.css.js +1 -1
  122. package/dist/generated/themes/DatePicker.css.js.map +1 -1
  123. package/dist/generated/themes/Dropdown.css.js +1 -1
  124. package/dist/generated/themes/Dropdown.css.js.map +1 -1
  125. package/dist/generated/themes/FilterMenu.css.js +1 -1
  126. package/dist/generated/themes/FilterMenu.css.js.map +1 -1
  127. package/dist/generated/themes/MastheadItem.css.js +1 -1
  128. package/dist/generated/themes/MastheadItem.css.js.map +1 -1
  129. package/dist/generated/themes/MastheadMenu.css.js +1 -1
  130. package/dist/generated/themes/MastheadMenu.css.js.map +1 -1
  131. package/dist/generated/themes/RatingIndicator.css.js +1 -1
  132. package/dist/generated/themes/RatingIndicator.css.js.map +1 -1
  133. package/dist/generated/themes/SelectBox.css.js +1 -1
  134. package/dist/generated/themes/SelectBox.css.js.map +1 -1
  135. package/dist/generated/themes/Slider.css.js +1 -1
  136. package/dist/generated/themes/Slider.css.js.map +1 -1
  137. package/dist/generated/themes/TextField.css.js +1 -1
  138. package/dist/generated/themes/TextField.css.js.map +1 -1
  139. package/dist/web-types.json +4 -4
  140. package/package.json +2 -1
  141. package/src/Assets.ts +1 -0
  142. package/src/ControlButton.ts +16 -3
  143. package/src/CountrySelector.hbs +3 -9
  144. package/src/CountrySelector.ts +9 -6
  145. package/src/DatePicker.hbs +17 -27
  146. package/src/DatePicker.ts +2 -2
  147. package/src/FilterMenu.hbs +32 -36
  148. package/src/FilterMenu.ts +80 -17
  149. package/src/MastheadShell.ts +19 -7
  150. package/src/SearchableListBase.hbs +1 -1
  151. package/src/SelectBox.hbs +10 -12
  152. package/src/TextField.hbs +16 -14
  153. package/src/TextField.ts +86 -65
  154. package/src/generated/templates/CountrySelectorTemplate.lit.ts +1 -2
  155. package/src/generated/templates/DatePickerTemplate.lit.ts +1 -2
  156. package/src/generated/templates/FilterMenuTemplate.lit.ts +2 -2
  157. package/src/generated/templates/SearchableListBaseTemplate.lit.ts +1 -1
  158. package/src/generated/templates/SelectBoxTemplate.lit.ts +3 -3
  159. package/src/generated/templates/TextFieldTemplate.lit.ts +1 -1
  160. package/src/generated/themes/DatePicker.css.ts +1 -1
  161. package/src/generated/themes/Dropdown.css.ts +1 -1
  162. package/src/generated/themes/FilterMenu.css.ts +1 -1
  163. package/src/generated/themes/MastheadItem.css.ts +1 -1
  164. package/src/generated/themes/MastheadMenu.css.ts +1 -1
  165. package/src/generated/themes/RatingIndicator.css.ts +1 -1
  166. package/src/generated/themes/SelectBox.css.ts +1 -1
  167. package/src/generated/themes/Slider.css.ts +1 -1
  168. package/src/generated/themes/TextField.css.ts +1 -1
  169. package/src/themes/DatePicker.css +0 -6
  170. package/src/themes/Dropdown.css +1 -1
  171. package/src/themes/FilterMenu.css +2 -2
  172. package/src/themes/MastheadItem.css +2 -1
  173. package/src/themes/MastheadMenu.css +4 -4
  174. package/src/themes/SelectBox.css +1 -2
  175. package/src/themes/TextField.css +0 -26
@@ -1 +1 @@
1
- {"version":3,"file":"Slider.css.js","sourceRoot":"","sources":["../../../src/generated/themes/Slider.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,6BAA6B,EAAE,MAAM,yDAAyD,CAAC;AAExG,OAAO,gBAAgB,MAAM,uFAAuF,CAAC;AACrH,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAElE,6BAA6B,CAAC,4BAA4B,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,gBAAgB,CAAC,CAAC;AACzG,6BAA6B,CAAC,yBAAyB,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,YAAY,CAAC,CAAC;AAElG,MAAM,SAAS,GAAc,EAAC,WAAW,EAAC,yBAAyB,EAAC,QAAQ,EAAC,sBAAsB,EAAC,OAAO,EAAC;CAC3G,EAAC,CAAC;AACH,eAAe,SAAS,CAAC","sourcesContent":["import type { StyleData } from \"@ui5/webcomponents-base/dist/types.js\";\nimport { 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(\"@sapudex/web-components\", \"sap_horizon\", async () => defaultTheme);\n\nconst styleData: StyleData = {packageName:\"@sapudex/web-components\",fileName:\"themes/Slider.css.ts\",content:`: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, .5rem)}: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)}:host([desktop]) .ui5-slider-handle:focus,.ui5-slider-handle:focus-visible{background-color:var(--_ui5-v0-231-3_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)}\n`};\nexport default styleData;\n\t"]}
1
+ {"version":3,"file":"Slider.css.js","sourceRoot":"","sources":["../../../src/generated/themes/Slider.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,6BAA6B,EAAE,MAAM,yDAAyD,CAAC;AAExG,OAAO,gBAAgB,MAAM,uFAAuF,CAAC;AACrH,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAElE,6BAA6B,CAAC,4BAA4B,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,gBAAgB,CAAC,CAAC;AACzG,6BAA6B,CAAC,yBAAyB,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,YAAY,CAAC,CAAC;AAElG,MAAM,SAAS,GAAc,EAAC,WAAW,EAAC,yBAAyB,EAAC,QAAQ,EAAC,sBAAsB,EAAC,OAAO,EAAC;CAC3G,EAAC,CAAC;AACH,eAAe,SAAS,CAAC","sourcesContent":["import type { StyleData } from \"@ui5/webcomponents-base/dist/types.js\";\nimport { 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(\"@sapudex/web-components\", \"sap_horizon\", async () => defaultTheme);\n\nconst styleData: StyleData = {packageName:\"@sapudex/web-components\",fileName:\"themes/Slider.css.ts\",content:`: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, .5rem)}: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)}:host([desktop]) .ui5-slider-handle:focus,.ui5-slider-handle:focus-visible{background-color:var(--_ui5-v0-231-5_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)}\n`};\nexport default styleData;\n\t"]}
@@ -3,7 +3,7 @@ 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("@sapudex/web-components", "sap_horizon", async () => defaultTheme);
6
- const styleData = { packageName: "@sapudex/web-components", fileName: "themes/TextField.css.ts", content: `:host{--udex-input-color-standard-default-border: var(--sapField_BorderColor, var(--udexColorGrey6));--udex-input-color-standard-default-label: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-standard-default-supporting-text: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-standard-default-typed-text: var(--sapField_TextColor, var(--udexCoreTextDark));--udex-input-color-standard-default-background-light: var(--sapField_Background, var(--udexColorNeutralWhite));--udex-input-color-standard-hover-border: var(--sapField_Hover_BorderColor, var(--udexColorBlue6));--udex-input-color-standard-active-border: var(--sapField_Active_BorderColor, var(--udexColorBlue9));--udex-input-color-error-default-border: var(--udexCoreSemanticError6, #EE3939);--udex-input-color-error-hover-border: var(--sapField_InvalidColor, var(--udexCoreSemanticError7));--udex-input-color-error-active-border: var(--udexCoreSemanticError9, #840606);--udex-input-color-error-default-supporting-text: var(--sapField_InvalidColor, var(--udexCoreSemanticError7));--udex-input-color-warning-default-border: var(--udexCoreSemanticWarning6, #E76500);--udex-input-color-warning-hover-border: var(--sapField_WarningColor, var(--udexCoreSemanticWarning7));--udex-input-color-warning-active-border: var(--udexCoreSemanticWarning9, #8D2A00);--udex-input-color-warning-default-supporting-text: var(--sapField_WarningColor, var(--udexCoreSemanticWarning7));--udex-input-color-success-default-border: var(--udexCoreSemanticSuccess6, #36A41D);--udex-input-color-success-hover-border: var(--sapField_SuccessColor, var(--udexCoreSemanticSuccess7));--udex-input-color-success-active-border: var(--udexCoreSemanticSuccess9, #1E592F);--udex-input-color-success-default-supporting-text: var(--sapField_SuccessColor, var(--udexCoreSemanticSuccess7));--udex-input-color-disabled-border: var(--udexColorGrey6, #5B738B);--udex-input-color-disabled-label: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-read-only-default-border: var(--sapField_ReadOnly_BorderColor, var(--udexColorGrey6));--udex-input-color-read-only-default-background: var(--sapField_ReadOnly_Background, var(--udexColorGrey2));--udex-input-padding: 0 var(--udexSpacer12, 12px);--udex-input-min-width-xs-and-s: 100%;--udex-input-max-width: 100%}.udex-text-field__wrap{display:flex;position:relative;border-radius:var(--udexRadiusXS, 4px);border:1px solid var(--udex-input-color-standard-default-border)}.udex-text-field__wrap:hover{border-color:var(--udex-input-color-standard-hover-border)}.udex-text-field__container{position:relative;font-family:var(--sapFontFamily, sans-serif);max-width:var(--udex-input-max-width);width:100%}@media (width < 640px){.udex-text-field__container{min-width:var(--udex-input-min-width-xs-and-s)}}:host([disabled]) .udex-text-field__container{opacity:var(--sapContent_DisabledOpacity)}.udex-text-field__input{width:100%;height:40px;font-size:var(--sapProgress_FontSize, 16px);font-family:inherit;line-height:24px;color:var(--udex-input-color-standard-default-typed-text);padding:var(--udex-input-padding);border-radius:var(--udexRadiusXS, 4px);box-sizing:border-box;font-weight:var(--udexTypographyFontWeightRegular, 400);background:transparent;border:none}.udex-text-field__input:focus{outline:none}:host(:not([_is-touched]):not([aria-expanded="true"])[active]) .udex-text-field__wrap:before{content:"";position:absolute;z-index:-1;inset:-5px;border:2px solid var(--udexColorBlue10);border-radius:var(--udexRadiusS, 6px)}.udex-text-field__wrap[open],:host([active]) .udex-text-field__wrap{border-color:var(--udex-input-color-standard-active-border);outline:0}:host([active]) .udex-text-field_icon-container{border-color:transparent;color:var(--udexColorGrey7, #475E75)}.udex-text-field__wrap[open]:hover{border-color:var(--udex-input-color-standard-active-border)}:host([disabled]) .udex-text-field__wrap{border-color:var(--udex-input-color-disabled-border);background-color:var(--udex-input-color-standard-default-background-light)}:host([readonly]) .udex-text-field__wrap{border-color:var(--udex-input-color-read-only-default-border);background-color:var(--udex-input-color-read-only-default-background)}:host([value-state="Success"][displayonly]) .udex-text-field__wrap,:host([value-state="Warning"][displayonly]) .udex-text-field__wrap,:host([value-state="Error"][displayonly]) .udex-text-field__wrap,:host([displayonly]) .udex-text-field__wrap{border:0;background-color:transparent;font-family:inherit}:host([displayonly]) .udex-text-field__wrap[open],:host([displayonly]) .udex-text-field__wrap{outline:0;border:0}:host([displayonly][value-state="Success"]) .udex-text-field__wrap:hover,:host([displayonly][value-state="Warning"]) .udex-text-field__wrap:hover,:host([displayonly][value-state="Error"]) .udex-text-field__wrap:hover{border:none}:host([value-state="Error"]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-error-default-border)}:host([value-state="Error"]) .udex-text-field__wrap:hover{border:1px solid var(--udex-input-color-error-hover-border)}:host([value-state="Error"]) .udex-text-field__wrap[open],:host([value-state="Error"][active]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-error-active-border);outline:0}:host([value-state="Warning"]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-warning-default-border)}:host([value-state="Warning"]) .udex-text-field__wrap:hover{border:1px solid var(--udex-input-color-warning-hover-border)}:host([value-state="Warning"]) .udex-text-field__wrap[open],:host([value-state="Warning"][active]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-warning-active-border);outline:0}:host([value-state="Success"]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-success-default-border)}:host([value-state="Success"]) .udex-text-field__wrap:hover{border:1px solid var(--udex-input-color-success-hover-border)}:host([value-state="Success"]) .udex-text-field__wrap[open],:host([value-state="Success"][active]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-success-active-border);outline:0}.udex-text-field__label{position:absolute;z-index:2;color:var(--udex-input-color-standard-default-label);transition:transform .15s ease-out,font-size .15s ease-out;line-height:24px;font-weight:var(--udexTypographyFontWeightRegular, 400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - var(--udexSpacer12) * 2)}.udex-text-field__container:dir(rtl) .udex-text-field_icon-container{left:1px;right:auto}.udex-text-field__container:dir(ltr) .udex-text-field__label,.udex-text-field__container:dir(rtl) .udex-text-field__label{top:9px}.udex-text-field__container:dir(ltr) .udex-text-field__label{left:12px}.udex-text-field__container:dir(rtl) .udex-text-field__label{right:12px}:host([displayonly]:dir(ltr)) .udex-text-field__label,:host([displayonly]:dir(rtl)) .udex-text-field__label{padding:0}.udex-text-field__label.udex-text-field__label_active,:host:has(.udex-text-field__input:-webkit-autofill) .udex-text-field__label{line-height:18px;transform:translateY(-110%);padding:6px 4px 0;font-size:12px;background:linear-gradient(transparent 55%,var(--udex-input-color-standard-default-background-light) 45%)}:host([readonly]) .udex-text-field__label.udex-text-field__label_active{background:linear-gradient(transparent 55%,var(--udex-input-color-read-only-default-background) 45%)}:host([displayonly][readonly]) .udex-text-field__label.udex-text-field__label_active,:host([displayonly]) .udex-text-field__label.udex-text-field__label_active{background-color:transparent;background:none}:host([disabled]) .udex-text-field__label{color:var(--udex-input-color-disabled-label)}.udex-text-field_icon-container{--sapContent_DisabledOpacity: 1;--sapButton_BorderWidth: 0 0 0 1px;--udex-control-button-large-height: 40px;--udex-control-button-large-width: 40px;position:relative;padding:var(--udexSpacer4, 4px)}:host(:dir(rtl):not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__wrap:hover .udex-text-field_icon-container{--udex-control-button-border-color: var(--udexColorGrey4, #A9B4BE);--sapButton_BorderWidth: 0 1px 0 0}:host(:dir(rtl):not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__wrap .udex-text-field_icon-container{--sapButton_BorderWidth: 0 1px 0 0}:host([active]) [active].udex-text-field_icon-container{border-color:transparent;color:var(--udexColorGrey7, #475E75)}:host [active].udex-text-field_icon-container{border-color:var(--udexColorBlue4, #89D1FF);color:var(--udexColorBlue9, #0040B0)}:host([active]) .udex-text-field_icon-container:hover{border-color:var(--udexColorGrey7, #475E75);color:var(--udexColorGrey7, #475E75)}.udex-text-field__supporting-text{font-size:12px;line-height:18px;color:var(--udex-input-color-standard-default-supporting-text);padding:4px 12px;display:block;position:relative}:host([value-state="Error"]) .udex-text-field__supporting-text{color:var(--udex-input-color-error-default-supporting-text)}:host([value-state="Warning"]) .udex-text-field__supporting-text{color:var(--udex-input-color-warning-default-supporting-text)}:host([value-state="Success"]) .udex-text-field__supporting-text{color:var(--udex-input-color-success-default-supporting-text)}.udex-text-field__icon{color:inherit;vertical-align:top;margin-inline-end:var(--udexSpacer4, 4px)}.udex-text-field__supporting-text-icon{color:inherit;vertical-align:top;margin-inline-end:var(--udexSpacer4, 4px);width:var(--sapContent_IconHeight, 16px);height:var(--sapContent_IconHeight, 16px)}.udex-text-field__input[type=number]::-webkit-outer-spin-button,.udex-text-field__input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.udex-text-field__input[type=number]{-moz-appearance:textfield;appearance:textfield}.hidden-text{display:none}
6
+ const styleData = { packageName: "@sapudex/web-components", fileName: "themes/TextField.css.ts", content: `:host{--udex-input-color-standard-default-border: var(--sapField_BorderColor, var(--udexColorGrey6));--udex-input-color-standard-default-label: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-standard-default-supporting-text: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-standard-default-typed-text: var(--sapField_TextColor, var(--udexCoreTextDark));--udex-input-color-standard-default-background-light: var(--sapField_Background, var(--udexColorNeutralWhite));--udex-input-color-standard-hover-border: var(--sapField_Hover_BorderColor, var(--udexColorBlue6));--udex-input-color-standard-active-border: var(--sapField_Active_BorderColor, var(--udexColorBlue9));--udex-input-color-error-default-border: var(--udexCoreSemanticError6, #EE3939);--udex-input-color-error-hover-border: var(--sapField_InvalidColor, var(--udexCoreSemanticError7));--udex-input-color-error-active-border: var(--udexCoreSemanticError9, #840606);--udex-input-color-error-default-supporting-text: var(--sapField_InvalidColor, var(--udexCoreSemanticError7));--udex-input-color-warning-default-border: var(--udexCoreSemanticWarning6, #E76500);--udex-input-color-warning-hover-border: var(--sapField_WarningColor, var(--udexCoreSemanticWarning7));--udex-input-color-warning-active-border: var(--udexCoreSemanticWarning9, #8D2A00);--udex-input-color-warning-default-supporting-text: var(--sapField_WarningColor, var(--udexCoreSemanticWarning7));--udex-input-color-success-default-border: var(--udexCoreSemanticSuccess6, #36A41D);--udex-input-color-success-hover-border: var(--sapField_SuccessColor, var(--udexCoreSemanticSuccess7));--udex-input-color-success-active-border: var(--udexCoreSemanticSuccess9, #1E592F);--udex-input-color-success-default-supporting-text: var(--sapField_SuccessColor, var(--udexCoreSemanticSuccess7));--udex-input-color-disabled-border: var(--udexColorGrey6, #5B738B);--udex-input-color-disabled-label: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-read-only-default-border: var(--sapField_ReadOnly_BorderColor, var(--udexColorGrey6));--udex-input-color-read-only-default-background: var(--sapField_ReadOnly_Background, var(--udexColorGrey2));--udex-input-padding: 0 var(--udexSpacer12, 12px);--udex-input-min-width-xs-and-s: 100%;--udex-input-max-width: 100%}.udex-text-field__wrap{display:flex;position:relative;border-radius:var(--udexRadiusXS, 4px);border:1px solid var(--udex-input-color-standard-default-border)}.udex-text-field__wrap:hover{border-color:var(--udex-input-color-standard-hover-border)}.udex-text-field__container{position:relative;font-family:var(--sapFontFamily, sans-serif);max-width:var(--udex-input-max-width);width:100%}@media (width < 640px){.udex-text-field__container{min-width:var(--udex-input-min-width-xs-and-s)}}:host([disabled]) .udex-text-field__container{opacity:var(--sapContent_DisabledOpacity)}.udex-text-field__input{width:100%;height:40px;font-size:var(--sapProgress_FontSize, 16px);font-family:inherit;line-height:24px;color:var(--udex-input-color-standard-default-typed-text);padding:var(--udex-input-padding);border-radius:var(--udexRadiusXS, 4px);box-sizing:border-box;font-weight:var(--udexTypographyFontWeightRegular, 400);background:transparent;border:none}.udex-text-field__input:focus{outline:none}:host(:not([_is-touched]):not([aria-expanded="true"])[active]) .udex-text-field__wrap:before{content:"";position:absolute;z-index:-1;inset:-5px;border:2px solid var(--udexColorBlue10);border-radius:var(--udexRadiusS, 6px)}.udex-text-field__wrap[open],:host([active]) .udex-text-field__wrap{border-color:var(--udex-input-color-standard-active-border);outline:0}.udex-text-field__wrap[open]:hover{border-color:var(--udex-input-color-standard-active-border)}:host([disabled]) .udex-text-field__wrap{border-color:var(--udex-input-color-disabled-border);background-color:var(--udex-input-color-standard-default-background-light)}:host([readonly]) .udex-text-field__wrap{border-color:var(--udex-input-color-read-only-default-border);background-color:var(--udex-input-color-read-only-default-background)}:host([value-state="Success"][displayonly]) .udex-text-field__wrap,:host([value-state="Warning"][displayonly]) .udex-text-field__wrap,:host([value-state="Error"][displayonly]) .udex-text-field__wrap,:host([displayonly]) .udex-text-field__wrap{border:0;background-color:transparent;font-family:inherit}:host([displayonly]) .udex-text-field__wrap[open],:host([displayonly]) .udex-text-field__wrap{outline:0;border:0}:host([displayonly][value-state="Success"]) .udex-text-field__wrap:hover,:host([displayonly][value-state="Warning"]) .udex-text-field__wrap:hover,:host([displayonly][value-state="Error"]) .udex-text-field__wrap:hover{border:none}:host([value-state="Error"]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-error-default-border)}:host([value-state="Error"]) .udex-text-field__wrap:hover{border:1px solid var(--udex-input-color-error-hover-border)}:host([value-state="Error"]) .udex-text-field__wrap[open],:host([value-state="Error"][active]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-error-active-border);outline:0}:host([value-state="Warning"]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-warning-default-border)}:host([value-state="Warning"]) .udex-text-field__wrap:hover{border:1px solid var(--udex-input-color-warning-hover-border)}:host([value-state="Warning"]) .udex-text-field__wrap[open],:host([value-state="Warning"][active]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-warning-active-border);outline:0}:host([value-state="Success"]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-success-default-border)}:host([value-state="Success"]) .udex-text-field__wrap:hover{border:1px solid var(--udex-input-color-success-hover-border)}:host([value-state="Success"]) .udex-text-field__wrap[open],:host([value-state="Success"][active]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-success-active-border);outline:0}.udex-text-field__label{position:absolute;z-index:2;color:var(--udex-input-color-standard-default-label);transition:transform .15s ease-out,font-size .15s ease-out;line-height:24px;font-weight:var(--udexTypographyFontWeightRegular, 400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - var(--udexSpacer12) * 2)}.udex-text-field__container:dir(rtl) .udex-text-field_icon-container{left:1px;right:auto}.udex-text-field__container:dir(ltr) .udex-text-field__label,.udex-text-field__container:dir(rtl) .udex-text-field__label{top:9px}.udex-text-field__container:dir(ltr) .udex-text-field__label{left:12px}.udex-text-field__container:dir(rtl) .udex-text-field__label{right:12px}:host([displayonly]:dir(ltr)) .udex-text-field__label,:host([displayonly]:dir(rtl)) .udex-text-field__label{padding:0}.udex-text-field__label.udex-text-field__label_active,:host:has(.udex-text-field__input:-webkit-autofill) .udex-text-field__label{line-height:18px;transform:translateY(-110%);padding:6px 4px 0;font-size:12px;background:linear-gradient(transparent 55%,var(--udex-input-color-standard-default-background-light) 45%)}:host([readonly]) .udex-text-field__label.udex-text-field__label_active{background:linear-gradient(transparent 55%,var(--udex-input-color-read-only-default-background) 45%)}:host([displayonly][readonly]) .udex-text-field__label.udex-text-field__label_active,:host([displayonly]) .udex-text-field__label.udex-text-field__label_active{background-color:transparent;background:none}:host([disabled]) .udex-text-field__label{color:var(--udex-input-color-disabled-label)}.udex-text-field_icon-container{--sapContent_DisabledOpacity: 1;--sapButton_BorderWidth: 0 0 0 1px;--udex-control-button-large-height: 40px;--udex-control-button-large-width: 40px;position:relative;padding:var(--udexSpacer4, 4px)}:host(:dir(rtl):not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__wrap:hover .udex-text-field_icon-container{--udex-control-button-border-color: var(--udexColorGrey4, #A9B4BE);--sapButton_BorderWidth: 0 1px 0 0}:host(:dir(rtl):not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__wrap .udex-text-field_icon-container{--sapButton_BorderWidth: 0 1px 0 0}.udex-text-field__supporting-text{font-size:12px;line-height:18px;color:var(--udex-input-color-standard-default-supporting-text);padding:4px 12px;display:block;position:relative}:host([value-state="Error"]) .udex-text-field__supporting-text{color:var(--udex-input-color-error-default-supporting-text)}:host([value-state="Warning"]) .udex-text-field__supporting-text{color:var(--udex-input-color-warning-default-supporting-text)}:host([value-state="Success"]) .udex-text-field__supporting-text{color:var(--udex-input-color-success-default-supporting-text)}.udex-text-field__icon{color:inherit;vertical-align:top;margin-inline-end:var(--udexSpacer4, 4px)}.udex-text-field__supporting-text-icon{color:inherit;vertical-align:top;margin-inline-end:var(--udexSpacer4, 4px);width:var(--sapContent_IconHeight, 16px);height:var(--sapContent_IconHeight, 16px)}.udex-text-field__input[type=number]::-webkit-outer-spin-button,.udex-text-field__input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.udex-text-field__input[type=number]{-moz-appearance:textfield;appearance:textfield}.hidden-text{display:none}
7
7
  ` };
8
8
  export default styleData;
9
9
  //# sourceMappingURL=TextField.css.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"TextField.css.js","sourceRoot":"","sources":["../../../src/generated/themes/TextField.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,6BAA6B,EAAE,MAAM,yDAAyD,CAAC;AAExG,OAAO,gBAAgB,MAAM,uFAAuF,CAAC;AACrH,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAElE,6BAA6B,CAAC,4BAA4B,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,gBAAgB,CAAC,CAAC;AACzG,6BAA6B,CAAC,yBAAyB,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,YAAY,CAAC,CAAC;AAElG,MAAM,SAAS,GAAc,EAAC,WAAW,EAAC,yBAAyB,EAAC,QAAQ,EAAC,yBAAyB,EAAC,OAAO,EAAC;CAC9G,EAAC,CAAC;AACH,eAAe,SAAS,CAAC","sourcesContent":["import type { StyleData } from \"@ui5/webcomponents-base/dist/types.js\";\nimport { 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(\"@sapudex/web-components\", \"sap_horizon\", async () => defaultTheme);\n\nconst styleData: StyleData = {packageName:\"@sapudex/web-components\",fileName:\"themes/TextField.css.ts\",content:`:host{--udex-input-color-standard-default-border: var(--sapField_BorderColor, var(--udexColorGrey6));--udex-input-color-standard-default-label: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-standard-default-supporting-text: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-standard-default-typed-text: var(--sapField_TextColor, var(--udexCoreTextDark));--udex-input-color-standard-default-background-light: var(--sapField_Background, var(--udexColorNeutralWhite));--udex-input-color-standard-hover-border: var(--sapField_Hover_BorderColor, var(--udexColorBlue6));--udex-input-color-standard-active-border: var(--sapField_Active_BorderColor, var(--udexColorBlue9));--udex-input-color-error-default-border: var(--udexCoreSemanticError6, #EE3939);--udex-input-color-error-hover-border: var(--sapField_InvalidColor, var(--udexCoreSemanticError7));--udex-input-color-error-active-border: var(--udexCoreSemanticError9, #840606);--udex-input-color-error-default-supporting-text: var(--sapField_InvalidColor, var(--udexCoreSemanticError7));--udex-input-color-warning-default-border: var(--udexCoreSemanticWarning6, #E76500);--udex-input-color-warning-hover-border: var(--sapField_WarningColor, var(--udexCoreSemanticWarning7));--udex-input-color-warning-active-border: var(--udexCoreSemanticWarning9, #8D2A00);--udex-input-color-warning-default-supporting-text: var(--sapField_WarningColor, var(--udexCoreSemanticWarning7));--udex-input-color-success-default-border: var(--udexCoreSemanticSuccess6, #36A41D);--udex-input-color-success-hover-border: var(--sapField_SuccessColor, var(--udexCoreSemanticSuccess7));--udex-input-color-success-active-border: var(--udexCoreSemanticSuccess9, #1E592F);--udex-input-color-success-default-supporting-text: var(--sapField_SuccessColor, var(--udexCoreSemanticSuccess7));--udex-input-color-disabled-border: var(--udexColorGrey6, #5B738B);--udex-input-color-disabled-label: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-read-only-default-border: var(--sapField_ReadOnly_BorderColor, var(--udexColorGrey6));--udex-input-color-read-only-default-background: var(--sapField_ReadOnly_Background, var(--udexColorGrey2));--udex-input-padding: 0 var(--udexSpacer12, 12px);--udex-input-min-width-xs-and-s: 100%;--udex-input-max-width: 100%}.udex-text-field__wrap{display:flex;position:relative;border-radius:var(--udexRadiusXS, 4px);border:1px solid var(--udex-input-color-standard-default-border)}.udex-text-field__wrap:hover{border-color:var(--udex-input-color-standard-hover-border)}.udex-text-field__container{position:relative;font-family:var(--sapFontFamily, sans-serif);max-width:var(--udex-input-max-width);width:100%}@media (width < 640px){.udex-text-field__container{min-width:var(--udex-input-min-width-xs-and-s)}}:host([disabled]) .udex-text-field__container{opacity:var(--sapContent_DisabledOpacity)}.udex-text-field__input{width:100%;height:40px;font-size:var(--sapProgress_FontSize, 16px);font-family:inherit;line-height:24px;color:var(--udex-input-color-standard-default-typed-text);padding:var(--udex-input-padding);border-radius:var(--udexRadiusXS, 4px);box-sizing:border-box;font-weight:var(--udexTypographyFontWeightRegular, 400);background:transparent;border:none}.udex-text-field__input:focus{outline:none}:host(:not([_is-touched]):not([aria-expanded=\"true\"])[active]) .udex-text-field__wrap:before{content:\"\";position:absolute;z-index:-1;inset:-5px;border:2px solid var(--udexColorBlue10);border-radius:var(--udexRadiusS, 6px)}.udex-text-field__wrap[open],:host([active]) .udex-text-field__wrap{border-color:var(--udex-input-color-standard-active-border);outline:0}:host([active]) .udex-text-field_icon-container{border-color:transparent;color:var(--udexColorGrey7, #475E75)}.udex-text-field__wrap[open]:hover{border-color:var(--udex-input-color-standard-active-border)}:host([disabled]) .udex-text-field__wrap{border-color:var(--udex-input-color-disabled-border);background-color:var(--udex-input-color-standard-default-background-light)}:host([readonly]) .udex-text-field__wrap{border-color:var(--udex-input-color-read-only-default-border);background-color:var(--udex-input-color-read-only-default-background)}:host([value-state=\"Success\"][displayonly]) .udex-text-field__wrap,:host([value-state=\"Warning\"][displayonly]) .udex-text-field__wrap,:host([value-state=\"Error\"][displayonly]) .udex-text-field__wrap,:host([displayonly]) .udex-text-field__wrap{border:0;background-color:transparent;font-family:inherit}:host([displayonly]) .udex-text-field__wrap[open],:host([displayonly]) .udex-text-field__wrap{outline:0;border:0}:host([displayonly][value-state=\"Success\"]) .udex-text-field__wrap:hover,:host([displayonly][value-state=\"Warning\"]) .udex-text-field__wrap:hover,:host([displayonly][value-state=\"Error\"]) .udex-text-field__wrap:hover{border:none}:host([value-state=\"Error\"]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-error-default-border)}:host([value-state=\"Error\"]) .udex-text-field__wrap:hover{border:1px solid var(--udex-input-color-error-hover-border)}:host([value-state=\"Error\"]) .udex-text-field__wrap[open],:host([value-state=\"Error\"][active]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-error-active-border);outline:0}:host([value-state=\"Warning\"]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-warning-default-border)}:host([value-state=\"Warning\"]) .udex-text-field__wrap:hover{border:1px solid var(--udex-input-color-warning-hover-border)}:host([value-state=\"Warning\"]) .udex-text-field__wrap[open],:host([value-state=\"Warning\"][active]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-warning-active-border);outline:0}:host([value-state=\"Success\"]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-success-default-border)}:host([value-state=\"Success\"]) .udex-text-field__wrap:hover{border:1px solid var(--udex-input-color-success-hover-border)}:host([value-state=\"Success\"]) .udex-text-field__wrap[open],:host([value-state=\"Success\"][active]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-success-active-border);outline:0}.udex-text-field__label{position:absolute;z-index:2;color:var(--udex-input-color-standard-default-label);transition:transform .15s ease-out,font-size .15s ease-out;line-height:24px;font-weight:var(--udexTypographyFontWeightRegular, 400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - var(--udexSpacer12) * 2)}.udex-text-field__container:dir(rtl) .udex-text-field_icon-container{left:1px;right:auto}.udex-text-field__container:dir(ltr) .udex-text-field__label,.udex-text-field__container:dir(rtl) .udex-text-field__label{top:9px}.udex-text-field__container:dir(ltr) .udex-text-field__label{left:12px}.udex-text-field__container:dir(rtl) .udex-text-field__label{right:12px}:host([displayonly]:dir(ltr)) .udex-text-field__label,:host([displayonly]:dir(rtl)) .udex-text-field__label{padding:0}.udex-text-field__label.udex-text-field__label_active,:host:has(.udex-text-field__input:-webkit-autofill) .udex-text-field__label{line-height:18px;transform:translateY(-110%);padding:6px 4px 0;font-size:12px;background:linear-gradient(transparent 55%,var(--udex-input-color-standard-default-background-light) 45%)}:host([readonly]) .udex-text-field__label.udex-text-field__label_active{background:linear-gradient(transparent 55%,var(--udex-input-color-read-only-default-background) 45%)}:host([displayonly][readonly]) .udex-text-field__label.udex-text-field__label_active,:host([displayonly]) .udex-text-field__label.udex-text-field__label_active{background-color:transparent;background:none}:host([disabled]) .udex-text-field__label{color:var(--udex-input-color-disabled-label)}.udex-text-field_icon-container{--sapContent_DisabledOpacity: 1;--sapButton_BorderWidth: 0 0 0 1px;--udex-control-button-large-height: 40px;--udex-control-button-large-width: 40px;position:relative;padding:var(--udexSpacer4, 4px)}:host(:dir(rtl):not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__wrap:hover .udex-text-field_icon-container{--udex-control-button-border-color: var(--udexColorGrey4, #A9B4BE);--sapButton_BorderWidth: 0 1px 0 0}:host(:dir(rtl):not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__wrap .udex-text-field_icon-container{--sapButton_BorderWidth: 0 1px 0 0}:host([active]) [active].udex-text-field_icon-container{border-color:transparent;color:var(--udexColorGrey7, #475E75)}:host [active].udex-text-field_icon-container{border-color:var(--udexColorBlue4, #89D1FF);color:var(--udexColorBlue9, #0040B0)}:host([active]) .udex-text-field_icon-container:hover{border-color:var(--udexColorGrey7, #475E75);color:var(--udexColorGrey7, #475E75)}.udex-text-field__supporting-text{font-size:12px;line-height:18px;color:var(--udex-input-color-standard-default-supporting-text);padding:4px 12px;display:block;position:relative}:host([value-state=\"Error\"]) .udex-text-field__supporting-text{color:var(--udex-input-color-error-default-supporting-text)}:host([value-state=\"Warning\"]) .udex-text-field__supporting-text{color:var(--udex-input-color-warning-default-supporting-text)}:host([value-state=\"Success\"]) .udex-text-field__supporting-text{color:var(--udex-input-color-success-default-supporting-text)}.udex-text-field__icon{color:inherit;vertical-align:top;margin-inline-end:var(--udexSpacer4, 4px)}.udex-text-field__supporting-text-icon{color:inherit;vertical-align:top;margin-inline-end:var(--udexSpacer4, 4px);width:var(--sapContent_IconHeight, 16px);height:var(--sapContent_IconHeight, 16px)}.udex-text-field__input[type=number]::-webkit-outer-spin-button,.udex-text-field__input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.udex-text-field__input[type=number]{-moz-appearance:textfield;appearance:textfield}.hidden-text{display:none}\n`};\nexport default styleData;\n\t"]}
1
+ {"version":3,"file":"TextField.css.js","sourceRoot":"","sources":["../../../src/generated/themes/TextField.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,6BAA6B,EAAE,MAAM,yDAAyD,CAAC;AAExG,OAAO,gBAAgB,MAAM,uFAAuF,CAAC;AACrH,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAElE,6BAA6B,CAAC,4BAA4B,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,gBAAgB,CAAC,CAAC;AACzG,6BAA6B,CAAC,yBAAyB,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,YAAY,CAAC,CAAC;AAElG,MAAM,SAAS,GAAc,EAAC,WAAW,EAAC,yBAAyB,EAAC,QAAQ,EAAC,yBAAyB,EAAC,OAAO,EAAC;CAC9G,EAAC,CAAC;AACH,eAAe,SAAS,CAAC","sourcesContent":["import type { StyleData } from \"@ui5/webcomponents-base/dist/types.js\";\nimport { 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(\"@sapudex/web-components\", \"sap_horizon\", async () => defaultTheme);\n\nconst styleData: StyleData = {packageName:\"@sapudex/web-components\",fileName:\"themes/TextField.css.ts\",content:`:host{--udex-input-color-standard-default-border: var(--sapField_BorderColor, var(--udexColorGrey6));--udex-input-color-standard-default-label: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-standard-default-supporting-text: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-standard-default-typed-text: var(--sapField_TextColor, var(--udexCoreTextDark));--udex-input-color-standard-default-background-light: var(--sapField_Background, var(--udexColorNeutralWhite));--udex-input-color-standard-hover-border: var(--sapField_Hover_BorderColor, var(--udexColorBlue6));--udex-input-color-standard-active-border: var(--sapField_Active_BorderColor, var(--udexColorBlue9));--udex-input-color-error-default-border: var(--udexCoreSemanticError6, #EE3939);--udex-input-color-error-hover-border: var(--sapField_InvalidColor, var(--udexCoreSemanticError7));--udex-input-color-error-active-border: var(--udexCoreSemanticError9, #840606);--udex-input-color-error-default-supporting-text: var(--sapField_InvalidColor, var(--udexCoreSemanticError7));--udex-input-color-warning-default-border: var(--udexCoreSemanticWarning6, #E76500);--udex-input-color-warning-hover-border: var(--sapField_WarningColor, var(--udexCoreSemanticWarning7));--udex-input-color-warning-active-border: var(--udexCoreSemanticWarning9, #8D2A00);--udex-input-color-warning-default-supporting-text: var(--sapField_WarningColor, var(--udexCoreSemanticWarning7));--udex-input-color-success-default-border: var(--udexCoreSemanticSuccess6, #36A41D);--udex-input-color-success-hover-border: var(--sapField_SuccessColor, var(--udexCoreSemanticSuccess7));--udex-input-color-success-active-border: var(--udexCoreSemanticSuccess9, #1E592F);--udex-input-color-success-default-supporting-text: var(--sapField_SuccessColor, var(--udexCoreSemanticSuccess7));--udex-input-color-disabled-border: var(--udexColorGrey6, #5B738B);--udex-input-color-disabled-label: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-read-only-default-border: var(--sapField_ReadOnly_BorderColor, var(--udexColorGrey6));--udex-input-color-read-only-default-background: var(--sapField_ReadOnly_Background, var(--udexColorGrey2));--udex-input-padding: 0 var(--udexSpacer12, 12px);--udex-input-min-width-xs-and-s: 100%;--udex-input-max-width: 100%}.udex-text-field__wrap{display:flex;position:relative;border-radius:var(--udexRadiusXS, 4px);border:1px solid var(--udex-input-color-standard-default-border)}.udex-text-field__wrap:hover{border-color:var(--udex-input-color-standard-hover-border)}.udex-text-field__container{position:relative;font-family:var(--sapFontFamily, sans-serif);max-width:var(--udex-input-max-width);width:100%}@media (width < 640px){.udex-text-field__container{min-width:var(--udex-input-min-width-xs-and-s)}}:host([disabled]) .udex-text-field__container{opacity:var(--sapContent_DisabledOpacity)}.udex-text-field__input{width:100%;height:40px;font-size:var(--sapProgress_FontSize, 16px);font-family:inherit;line-height:24px;color:var(--udex-input-color-standard-default-typed-text);padding:var(--udex-input-padding);border-radius:var(--udexRadiusXS, 4px);box-sizing:border-box;font-weight:var(--udexTypographyFontWeightRegular, 400);background:transparent;border:none}.udex-text-field__input:focus{outline:none}:host(:not([_is-touched]):not([aria-expanded=\"true\"])[active]) .udex-text-field__wrap:before{content:\"\";position:absolute;z-index:-1;inset:-5px;border:2px solid var(--udexColorBlue10);border-radius:var(--udexRadiusS, 6px)}.udex-text-field__wrap[open],:host([active]) .udex-text-field__wrap{border-color:var(--udex-input-color-standard-active-border);outline:0}.udex-text-field__wrap[open]:hover{border-color:var(--udex-input-color-standard-active-border)}:host([disabled]) .udex-text-field__wrap{border-color:var(--udex-input-color-disabled-border);background-color:var(--udex-input-color-standard-default-background-light)}:host([readonly]) .udex-text-field__wrap{border-color:var(--udex-input-color-read-only-default-border);background-color:var(--udex-input-color-read-only-default-background)}:host([value-state=\"Success\"][displayonly]) .udex-text-field__wrap,:host([value-state=\"Warning\"][displayonly]) .udex-text-field__wrap,:host([value-state=\"Error\"][displayonly]) .udex-text-field__wrap,:host([displayonly]) .udex-text-field__wrap{border:0;background-color:transparent;font-family:inherit}:host([displayonly]) .udex-text-field__wrap[open],:host([displayonly]) .udex-text-field__wrap{outline:0;border:0}:host([displayonly][value-state=\"Success\"]) .udex-text-field__wrap:hover,:host([displayonly][value-state=\"Warning\"]) .udex-text-field__wrap:hover,:host([displayonly][value-state=\"Error\"]) .udex-text-field__wrap:hover{border:none}:host([value-state=\"Error\"]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-error-default-border)}:host([value-state=\"Error\"]) .udex-text-field__wrap:hover{border:1px solid var(--udex-input-color-error-hover-border)}:host([value-state=\"Error\"]) .udex-text-field__wrap[open],:host([value-state=\"Error\"][active]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-error-active-border);outline:0}:host([value-state=\"Warning\"]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-warning-default-border)}:host([value-state=\"Warning\"]) .udex-text-field__wrap:hover{border:1px solid var(--udex-input-color-warning-hover-border)}:host([value-state=\"Warning\"]) .udex-text-field__wrap[open],:host([value-state=\"Warning\"][active]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-warning-active-border);outline:0}:host([value-state=\"Success\"]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-success-default-border)}:host([value-state=\"Success\"]) .udex-text-field__wrap:hover{border:1px solid var(--udex-input-color-success-hover-border)}:host([value-state=\"Success\"]) .udex-text-field__wrap[open],:host([value-state=\"Success\"][active]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-success-active-border);outline:0}.udex-text-field__label{position:absolute;z-index:2;color:var(--udex-input-color-standard-default-label);transition:transform .15s ease-out,font-size .15s ease-out;line-height:24px;font-weight:var(--udexTypographyFontWeightRegular, 400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - var(--udexSpacer12) * 2)}.udex-text-field__container:dir(rtl) .udex-text-field_icon-container{left:1px;right:auto}.udex-text-field__container:dir(ltr) .udex-text-field__label,.udex-text-field__container:dir(rtl) .udex-text-field__label{top:9px}.udex-text-field__container:dir(ltr) .udex-text-field__label{left:12px}.udex-text-field__container:dir(rtl) .udex-text-field__label{right:12px}:host([displayonly]:dir(ltr)) .udex-text-field__label,:host([displayonly]:dir(rtl)) .udex-text-field__label{padding:0}.udex-text-field__label.udex-text-field__label_active,:host:has(.udex-text-field__input:-webkit-autofill) .udex-text-field__label{line-height:18px;transform:translateY(-110%);padding:6px 4px 0;font-size:12px;background:linear-gradient(transparent 55%,var(--udex-input-color-standard-default-background-light) 45%)}:host([readonly]) .udex-text-field__label.udex-text-field__label_active{background:linear-gradient(transparent 55%,var(--udex-input-color-read-only-default-background) 45%)}:host([displayonly][readonly]) .udex-text-field__label.udex-text-field__label_active,:host([displayonly]) .udex-text-field__label.udex-text-field__label_active{background-color:transparent;background:none}:host([disabled]) .udex-text-field__label{color:var(--udex-input-color-disabled-label)}.udex-text-field_icon-container{--sapContent_DisabledOpacity: 1;--sapButton_BorderWidth: 0 0 0 1px;--udex-control-button-large-height: 40px;--udex-control-button-large-width: 40px;position:relative;padding:var(--udexSpacer4, 4px)}:host(:dir(rtl):not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__wrap:hover .udex-text-field_icon-container{--udex-control-button-border-color: var(--udexColorGrey4, #A9B4BE);--sapButton_BorderWidth: 0 1px 0 0}:host(:dir(rtl):not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__wrap .udex-text-field_icon-container{--sapButton_BorderWidth: 0 1px 0 0}.udex-text-field__supporting-text{font-size:12px;line-height:18px;color:var(--udex-input-color-standard-default-supporting-text);padding:4px 12px;display:block;position:relative}:host([value-state=\"Error\"]) .udex-text-field__supporting-text{color:var(--udex-input-color-error-default-supporting-text)}:host([value-state=\"Warning\"]) .udex-text-field__supporting-text{color:var(--udex-input-color-warning-default-supporting-text)}:host([value-state=\"Success\"]) .udex-text-field__supporting-text{color:var(--udex-input-color-success-default-supporting-text)}.udex-text-field__icon{color:inherit;vertical-align:top;margin-inline-end:var(--udexSpacer4, 4px)}.udex-text-field__supporting-text-icon{color:inherit;vertical-align:top;margin-inline-end:var(--udexSpacer4, 4px);width:var(--sapContent_IconHeight, 16px);height:var(--sapContent_IconHeight, 16px)}.udex-text-field__input[type=number]::-webkit-outer-spin-button,.udex-text-field__input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.udex-text-field__input[type=number]{-moz-appearance:textfield;appearance:textfield}.hidden-text{display:none}\n`};\nexport default styleData;\n\t"]}
@@ -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": "0.231.3",
4
+ "version": "0.231.5",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
@@ -3551,17 +3551,17 @@
3551
3551
  {
3552
3552
  "name": "body-overflow",
3553
3553
  "description": "Defines overflow style for the body after clicking mobile menu opener button",
3554
- "value": { "type": "boolean", "default": "\"\"" }
3554
+ "value": { "type": "boolean", "default": "false" }
3555
3555
  },
3556
3556
  {
3557
3557
  "name": "show-search-by-default",
3558
3558
  "description": "Defines the visibility of the Search by default.",
3559
- "value": { "type": "boolean", "default": "\"\"" }
3559
+ "value": { "type": "boolean", "default": "false" }
3560
3560
  },
3561
3561
  {
3562
3562
  "name": "sticky-position",
3563
3563
  "description": "Defines sticky position for component",
3564
- "value": { "type": "boolean", "default": "\"\"" }
3564
+ "value": { "type": "boolean", "default": "false" }
3565
3565
  },
3566
3566
  {
3567
3567
  "name": "logo-url",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sapudex/web-components",
3
- "version": "0.231.3",
3
+ "version": "0.231.5",
4
4
  "publishConfig": {
5
5
  "registry": "https://registry.npmjs.org/"
6
6
  },
@@ -34,6 +34,7 @@
34
34
  "@ui5/webcomponents-base": "1.24.23",
35
35
  "@ui5/webcomponents-fiori": "1.24.23",
36
36
  "@ui5/webcomponents-icons": "1.24.23",
37
+ "@ui5/webcomponents-localization": "1.24.23",
37
38
  "@ui5/webcomponents-theming": "1.24.23",
38
39
  "@vimeo/player": "^2.24.0",
39
40
  "video.js": "8.22.0"
package/src/Assets.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import "@ui5/webcomponents-theming/dist/Assets.js"; // Theming
2
+ import "@ui5/webcomponents-localization/dist/Assets.js";
2
3
 
3
4
  // own web-components package assets
4
5
  import "./generated/json-imports/Themes.js";
@@ -65,12 +65,25 @@ class UDExControlButton extends Button {
65
65
 
66
66
  onAfterRendering() {
67
67
  if (this._isComboboxRole) {
68
- this.setComboboxRole();
68
+ this._setComboboxRole();
69
69
  }
70
+
71
+ const accessibleDescription = this.getAttribute("accessible-description");
72
+ if (accessibleDescription) {
73
+ this._setAccessibleDescription(accessibleDescription);
74
+ }
75
+ }
76
+
77
+ _setAccessibleDescription(value: string): void {
78
+ this.setButtonAttribute("aria-description", value);
79
+ }
80
+
81
+ _setComboboxRole(): void {
82
+ this.setButtonAttribute("role", "combobox");
70
83
  }
71
84
 
72
- setComboboxRole(): void {
73
- this.shadowRoot?.querySelector(".ui5-button-root")?.setAttribute("role", "combobox");
85
+ private setButtonAttribute(attribute: string, value: string): void {
86
+ this.shadowRoot?.querySelector(".ui5-button-root")?.setAttribute(attribute, value);
74
87
  }
75
88
  }
76
89
 
@@ -17,13 +17,6 @@
17
17
  {{> trigger}}
18
18
  {{searchableList}}
19
19
  </udex-dropdown>
20
- {{#if supportingText}}
21
- <udex-status-message
22
- ?disabled="{{disabled}}"
23
- supporting-text="{{supportingText}}"
24
- value-state="{{valueState}}">
25
- </udex-status-message>
26
- {{/if}}
27
20
  </div>
28
21
 
29
22
  {{#*inline "trigger"}}
@@ -43,12 +36,12 @@
43
36
  class="udex-country-selector__text"
44
37
  value="{{selectedCountryName}}"
45
38
  value-state="{{valueState}}"
39
+ supporting-text="{{supportingText}}"
46
40
  direction="left"
47
41
  aria-label="{{effectiveAriaLabel}}"
48
42
  accessible-name="{{supportingText}}"
49
43
  accessible-name-ref="{{accessibleNameRef}}"
50
44
  aria-controls="{{ariaControls}}"
51
- role="combobox"
52
45
  aria-haspopup="true"
53
46
  aria-expanded="{{_open}}"
54
47
  ?required="{{required}}"
@@ -59,7 +52,8 @@
59
52
  @mousedown="{{handleInputMouseDown}}"
60
53
  icon="{{triggerIcon}}"
61
54
  accessible-icon-name="{{effectiveAriaLabel}}"
62
- maxlength="0">
55
+ maxlength="0"
56
+ _is-combobox-role>
63
57
  </udex-text-field>
64
58
  </div>
65
59
  {{/inline}}
@@ -365,8 +365,10 @@ class UDExCountrySelector extends UDExSearchableListBase {
365
365
  return this.getCountryLabel(this.selectedCountry?.countryName, this.selectedCountry?.localName) || "None";
366
366
  }
367
367
 
368
- get triggerIcon(): string {
369
- return this._open ? "navigation-up-arrow" : "navigation-down-arrow";
368
+ get triggerIcon(): string | undefined {
369
+ if (!this.displayonly) {
370
+ return this._open ? "navigation-up-arrow" : "navigation-down-arrow";
371
+ }
370
372
  }
371
373
 
372
374
  get countrySelectorClasses(): string {
@@ -411,7 +413,7 @@ class UDExCountrySelector extends UDExSearchableListBase {
411
413
 
412
414
  handleCloseSearch() {
413
415
  this.dropdownClose();
414
- this.getInput()?.shadowRoot!.querySelector<Button>("[udex-control-button]")?.focus();
416
+ this.getTextField()?.shadowRoot!.querySelector<Button>("[udex-control-button]")?.focus();
415
417
  }
416
418
 
417
419
  handleItemPress(e: CustomEvent) {
@@ -419,12 +421,12 @@ class UDExCountrySelector extends UDExSearchableListBase {
419
421
  const target = e.target as HTMLElement;
420
422
  const item: any = this.getItemFromList(target?.getAttribute("data-token-id") as string);
421
423
  this.selectedCountry = this.countryList.find(country => country.iso === item._id);
422
- this.dropdownClose();
424
+ this.getDropdownPopover()?.close();
423
425
  }
424
426
 
425
427
  handleKeyPress(keyEvent: KeyboardEvent) {
426
428
  const key = keyEvent.key;
427
- this._dropdown.onOpen(this.getInput());
429
+ this._dropdown.onOpen(this.getTextField());
428
430
  this._search.focus();
429
431
  this._search.value = key;
430
432
  this.fireChangeSearch();
@@ -435,6 +437,7 @@ class UDExCountrySelector extends UDExSearchableListBase {
435
437
  }
436
438
 
437
439
  handleTriggerClick() {
440
+ this._dropdown.onOpen(this.getTextField()._inputHolder);
438
441
  this._dropdown.open = !this._dropdown.open;
439
442
  }
440
443
 
@@ -502,7 +505,7 @@ class UDExCountrySelector extends UDExSearchableListBase {
502
505
  return this.shadowRoot!.querySelector<UDExDropdown>("[udex-dropdown]")!;
503
506
  }
504
507
 
505
- getInput(): UDExTextField {
508
+ getTextField(): UDExTextField {
506
509
  return this.shadowRoot!.querySelector<UDExTextField>("[udex-text-field]")!;
507
510
  }
508
511
 
@@ -1,27 +1,17 @@
1
- <div
2
- class="udex-date-picker__container">
3
- <udex-text-field
4
- value="{{value}}"
5
- @ui5-change="{{_onInputChange}}"
6
- class="udex-date-picker__input"
7
- label="{{label}}"
8
- accessible-name="{{dateAccessibleName}}"
9
- accessible-name-ref="{{accessibleNameRef}}"
10
- accessible-icon-name="{{accessibleIconName}}"
11
- _aria-has-popup="grid"
12
- ?disabled="{{disabled}}"
13
- ?required="{{required}}"
14
- ?readonly="{{readonly}}"
15
- icon="appointment-2"
16
- @ui5-click-icon="{{handleInputClick}}"
17
- value-state="{{valueState}}"
18
- >
19
- </udex-text-field>
20
- {{#if supportingText}}
21
- <udex-status-message
22
- ?disabled="{{disabled}}"
23
- supporting-text="{{supportingText}}"
24
- value-state="{{valueState}}">
25
- </udex-status-message>
26
- {{/if}}
27
- </div>
1
+ <udex-text-field
2
+ value="{{value}}"
3
+ @ui5-change="{{_onInputChange}}"
4
+ class="udex-date-picker__input"
5
+ label="{{label}}"
6
+ accessible-name="{{dateAccessibleName}}"
7
+ accessible-name-ref="{{accessibleNameRef}}"
8
+ accessible-icon-name="{{accessibleIconName}}"
9
+ _aria-has-popup="grid"
10
+ ?disabled="{{disabled}}"
11
+ ?required="{{required}}"
12
+ ?readonly="{{readonly}}"
13
+ icon="appointment-2"
14
+ @ui5-click-icon="{{handleInputClick}}"
15
+ value-state="{{valueState}}"
16
+ supporting-text="{{supportingText}}">
17
+ </udex-text-field>
package/src/DatePicker.ts CHANGED
@@ -224,7 +224,7 @@ class UDExDatePicker extends DateComponentBase {
224
224
  * @private
225
225
  */
226
226
  get _dropdownTrigger(): UDExTextField {
227
- return this.shadowRoot!.querySelector<UDExTextField>(".udex-date-picker__input")!;
227
+ return this.shadowRoot!.querySelector<UDExTextField>("[udex-text-field]")!;
228
228
  }
229
229
 
230
230
  _afterDropdownClose(): void {
@@ -244,7 +244,7 @@ class UDExDatePicker extends DateComponentBase {
244
244
  async _openRespPopover(): Promise<void> {
245
245
  this._dropdownTrigger.active = true;
246
246
  this.responsivePopover = await this._getResponsePopover();
247
- this.responsivePopover?.onOpen(this._dropdownTrigger);
247
+ this.responsivePopover?.onOpen(this._dropdownTrigger._inputHolder);
248
248
  }
249
249
 
250
250
  hideCalendar(): void {
@@ -1,38 +1,38 @@
1
1
  <div>
2
2
  <button
3
- id="filterMenuTrigger"
4
- @click="{{handleTriggerClick}}"
5
- @keydown="{{handleTriggerKeydown}}"
6
- aria-label="{{triggerButtonAccessibleName}}"
7
- aria-labelledby="{{accessibleNameRef}}"
8
- aria-expanded="{{_open}}"
9
- aria-haspopup="true"
10
- role="{{triggerAccessibleRole}}"
11
- aria-controls="{{this._id}}_udex-filter-menu-dropdown"
12
- ?disabled="{{disabled}}"
13
- class="udex-filter-menu__trigger"
14
- tabindex="0">
15
- {{#if hasFilterNamePrefix}}
16
- <span class="udex-filter-menu__trigger-prefix">{{filterNamePrefix}}</span>
17
- {{/if}}
18
- <span class="udex-filter-menu__trigger-wrap" ?disabled="{{disabled}}">
19
- <span class="udex-filter-menu__trigger-name">{{filterName}}</span>
20
- {{#if badgeValue}}
21
- <udex-badge
22
- class="udex-filter-menu__badge"
23
- type="Number"
24
- design="Info"
25
- size="Small">
26
- {{badgeValue}}
27
- </udex-badge>
3
+ id="filterMenuTrigger"
4
+ @click="{{handleTriggerClick}}"
5
+ @keydown="{{handleTriggerKeydown}}"
6
+ aria-label="{{triggerButtonAccessibleName}}"
7
+ aria-labelledby="{{accessibleNameRef}}"
8
+ aria-expanded="{{_open}}"
9
+ aria-haspopup="true"
10
+ role="{{triggerAccessibleRole}}"
11
+ aria-controls="{{this._id}}_udex-filter-menu-dropdown"
12
+ ?disabled="{{disabled}}"
13
+ class="udex-filter-menu__trigger"
14
+ tabindex="0">
15
+ {{#if hasFilterNamePrefix}}
16
+ <span class="udex-filter-menu__trigger-prefix">{{filterNamePrefix}}</span>
28
17
  {{/if}}
29
- <ui5-icon
30
- class="udex-filter-menu__trigger-icon"
31
- name="navigation-down-arrow"
32
- accessible-name="{{_iconAccessibleNameText}}">
33
- </ui5-icon>
34
- </span>
35
- </button>
18
+ <span class="udex-filter-menu__trigger-wrap" ?disabled="{{disabled}}">
19
+ <span class="udex-filter-menu__trigger-name">{{filterName}}</span>
20
+ {{#if badgeValue}}
21
+ <udex-badge
22
+ class="udex-filter-menu__badge"
23
+ type="Number"
24
+ design="Info"
25
+ size="Small">
26
+ {{badgeValue}}
27
+ </udex-badge>
28
+ {{/if}}
29
+ <ui5-icon
30
+ class="udex-filter-menu__trigger-icon"
31
+ name="navigation-down-arrow"
32
+ accessible-name="{{_iconAccessibleNameText}}">
33
+ </ui5-icon>
34
+ </span>
35
+ </button>
36
36
  <ui5-popover
37
37
  id="{{this._id}}_udex-filter-menu-dropdown"
38
38
  hide-arrow
@@ -59,8 +59,6 @@
59
59
  </ui5-popover>
60
60
  </div>
61
61
 
62
-
63
-
64
62
  {{#*inline "buttons"}}
65
63
  {{#unless hideActionBar}}
66
64
  <div class="udex-filter-menu__footer" slot="footer" name="footer">
@@ -69,7 +67,6 @@
69
67
  class="udex-filter-menu__result-btn"
70
68
  size="Medium"
71
69
  design="Primary"
72
- ?disabled="{{disabledButtons}}"
73
70
  @keydown="{{handleKeyDownResultBtn}}"
74
71
  @click="{{handleResult}}">
75
72
  {{getResultLabelText}}
@@ -81,7 +78,6 @@
81
78
  size="Medium"
82
79
  design="Tertiary"
83
80
  @keydown="{{handleKeyDownResetBtn}}"
84
- ?disabled="{{disabledButtons}}"
85
81
  @click="{{handleReset}}">
86
82
  {{getResetLabelText}}
87
83
  </udex-button>
package/src/FilterMenu.ts CHANGED
@@ -27,6 +27,7 @@ import UDExFilterMenuSelectAll from "./FilterMenuSelectAll.js";
27
27
  import UDExListSelectAll from "./ListSelectAll.js";
28
28
  import UDExBadge from "./Badge.js";
29
29
  import UDExListItemBase from "./ListItemBase.js";
30
+ import type UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
30
31
 
31
32
  import { RESET, SHOW_RESULTS, SELECT_OPTIONS } from "./generated/i18n/i18n-defaults.js";
32
33
  import FilterMenuTemplate from "./generated/templates/FilterMenuTemplate.lit.js";
@@ -36,6 +37,11 @@ import SearchableListBaseTemplate from "./generated/templates/SearchableListBase
36
37
  import FilterMenuCss from "./generated/themes/FilterMenu.css.js";
37
38
  import SearchableListCss from "./generated/themes/SearchableList.css.js";
38
39
 
40
+ type initialItemState = {
41
+ id: string,
42
+ selected: boolean,
43
+ indeterminate?: boolean,
44
+ }
39
45
  /**
40
46
  * @class
41
47
  *
@@ -251,7 +257,6 @@ class UDExFilterMenu extends UDExSearchableListBase {
251
257
  * Hides the result button in the footer.
252
258
  *
253
259
  * @type {boolean}
254
- * @name sap.ui.webc.web-components.UDExFilterMenu.prototype.hideResultBtn
255
260
  * @defaultvalue false
256
261
  * @public
257
262
  */
@@ -262,7 +267,6 @@ class UDExFilterMenu extends UDExSearchableListBase {
262
267
  * Hides the reset button in the footer.
263
268
  *
264
269
  * @type {boolean}
265
- * @name sap.ui.webc.web-components.UDExFilterMenu.prototype.hideResetBtn
266
270
  * @defaultvalue false
267
271
  * @public
268
272
  */
@@ -303,10 +307,27 @@ class UDExFilterMenu extends UDExSearchableListBase {
303
307
  @property({ type: String, defaultValue: "combobox" })
304
308
  triggerAccessibleRole!: string;
305
309
 
310
+ /**
311
+ * Determines whether the filter should be applied.
312
+ * @default false
313
+ * @private
314
+ */
315
+ @property({ type: Boolean })
316
+ _shouldApplyFilter: boolean = false;
317
+
318
+ /**
319
+ * Internal flag to request a re-render of the component.
320
+ * @default false
321
+ * @private
322
+ */
323
+ @property({ type: Boolean, noAttribute: true })
324
+ _requestRender = false;
325
+
306
326
  _trigger!: UDExButton;
307
327
  _search!: UDExSearch;
308
328
  _popover!: Popover;
309
329
  _breakpointSizeXS = 640;
330
+ _initialState: Array<initialItemState> = [];
310
331
 
311
332
  onEnterDOM(): void {
312
333
  if (isDesktop()) {
@@ -355,6 +376,8 @@ class UDExFilterMenu extends UDExSearchableListBase {
355
376
  }
356
377
 
357
378
  handleReset(): void {
379
+ this._shouldApplyFilter = true;
380
+ this.onDropdownClose();
358
381
  this.fireEvent("reset-click", {
359
382
  restoredItems: this.selectedItems,
360
383
  });
@@ -362,12 +385,11 @@ class UDExFilterMenu extends UDExSearchableListBase {
362
385
  }
363
386
 
364
387
  handleResult(): void {
365
- if (!this.disabledButtons) {
366
- this._popover.close();
367
- this.fireEvent("result-click", {
368
- selectedItems: this.selectedItems,
369
- });
370
- }
388
+ this._shouldApplyFilter = true;
389
+ this.onDropdownClose();
390
+ this.fireEvent("result-click", {
391
+ selectedItems: this.selectedItems,
392
+ });
371
393
  }
372
394
 
373
395
  handleKeyDownList(e: KeyboardEvent): void {
@@ -443,6 +465,8 @@ class UDExFilterMenu extends UDExSearchableListBase {
443
465
  const content = this._popover.shadowRoot!.querySelector("[part=content]") as HTMLElement;
444
466
  content.style.maxHeight = this.height;
445
467
  }
468
+
469
+ this._initialState = this._getInitialState(this.items);
446
470
  this.fireEvent("before-open");
447
471
  }
448
472
 
@@ -459,11 +483,54 @@ class UDExFilterMenu extends UDExSearchableListBase {
459
483
  }
460
484
 
461
485
  _dropdownAfterClose(): void {
486
+ if (!this._shouldApplyFilter && this.modeMultiSelect && !this.modeSelectAll) {
487
+ this._setInitialState();
488
+ }
489
+
490
+ this._shouldApplyFilter = false;
462
491
  this._open = false;
463
492
  this._trigger.classList.remove("udex-filter-menu__trigger-active");
464
493
  this.fireEvent("after-close");
465
494
  }
466
495
 
496
+ _getInitialState(items: Array<UDExListItemBase | UDExListGroupHeaderBase>): Array<initialItemState> {
497
+ return items.flatMap(item => {
498
+ if (item.isGroup) {
499
+ const groupState: initialItemState = {
500
+ id: item._id,
501
+ selected: item.selected,
502
+ indeterminate: item.indeterminate,
503
+ };
504
+ const subItemsState = (item as UDExListGroupHeaderBase).getItems().map(subItem => ({
505
+ id: subItem._id,
506
+ selected: subItem.selected,
507
+ }));
508
+ return [groupState, ...subItemsState];
509
+ }
510
+ return {
511
+ id: item._id,
512
+ selected: item.selected,
513
+ };
514
+ });
515
+ }
516
+
517
+ _setInitialListState(): void {
518
+ this.getSlottedItems(this.items).forEach((item, index) => {
519
+ const initialState = this._initialState[index];
520
+ if (item._id === initialState?.id) {
521
+ item.selected = initialState.selected;
522
+ if (item.isGroup) {
523
+ item.indeterminate = initialState.indeterminate;
524
+ }
525
+ }
526
+ });
527
+ }
528
+
529
+ _setInitialState(): void {
530
+ this._setInitialListState();
531
+ this._requestRender = true;
532
+ }
533
+
467
534
  get disableAllowTargetOverlap(): boolean {
468
535
  return !this.disableTargetOverlap;
469
536
  }
@@ -482,10 +549,6 @@ class UDExFilterMenu extends UDExSearchableListBase {
482
549
  return hasLabel ? this.resetBtnLabel : UDExFilterMenu.i18nBundle.getText(RESET);
483
550
  }
484
551
 
485
- get disabledButtons(): boolean {
486
- return !this.selectedItems.length && !this.selectAll;
487
- }
488
-
489
552
  get _iconAccessibleNameText(): string {
490
553
  return UDExFilterMenu.i18nBundle.getText(SELECT_OPTIONS);
491
554
  }
@@ -503,17 +566,17 @@ class UDExFilterMenu extends UDExSearchableListBase {
503
566
  }
504
567
 
505
568
  get hasFooterButtons(): boolean {
506
- return (this.hasResultBtn || this.hasResetBtn) && !this.disabledButtons;
507
- }
508
-
509
- get hasResultBtn(): boolean {
510
- return !this.hideResultBtn && !this.disabledButtons;
569
+ return !!this.shadowRoot!.querySelector("[udex-button]");
511
570
  }
512
571
 
513
572
  get hasResetBtn(): boolean {
514
573
  return !this.hideResetBtn;
515
574
  }
516
575
 
576
+ get modeSelectAll(): boolean {
577
+ return !!this.querySelector<UDExFilterMenuSelectAll>("[udex-filter-menu-select-all]");
578
+ }
579
+
517
580
  getTriggerButton(): UDExButton {
518
581
  return this.shadowRoot!.querySelector<UDExButton>("#filterMenuTrigger")!;
519
582
  }