@ui5/webcomponents 2.24.0 → 2.25.0-rc.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.
Files changed (47) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/.tsbuildinfo +1 -1
  3. package/dist/Carousel.js +3 -1
  4. package/dist/Carousel.js.map +1 -1
  5. package/dist/ColorPalette.d.ts +1 -0
  6. package/dist/ColorPalette.js +23 -12
  7. package/dist/ColorPalette.js.map +1 -1
  8. package/dist/ColorPalettePopover.js +6 -5
  9. package/dist/ColorPalettePopover.js.map +1 -1
  10. package/dist/DayPicker.d.ts +1 -0
  11. package/dist/DayPicker.js +10 -2
  12. package/dist/DayPicker.js.map +1 -1
  13. package/dist/Dialog.d.ts +39 -0
  14. package/dist/Dialog.js +107 -3
  15. package/dist/Dialog.js.map +1 -1
  16. package/dist/DialogTemplate.js +4 -2
  17. package/dist/DialogTemplate.js.map +1 -1
  18. package/dist/FileUploader.d.ts +5 -2
  19. package/dist/FileUploader.js +22 -1
  20. package/dist/FileUploader.js.map +1 -1
  21. package/dist/FileUploaderTemplate.js +3 -2
  22. package/dist/FileUploaderTemplate.js.map +1 -1
  23. package/dist/Popup.d.ts +2 -0
  24. package/dist/Popup.js +7 -1
  25. package/dist/Popup.js.map +1 -1
  26. package/dist/css/themes/Dialog.css +1 -1
  27. package/dist/css/themes/TableHeaderCell.css +1 -1
  28. package/dist/custom-elements-internal.json +21 -1
  29. package/dist/custom-elements.json +20 -1
  30. package/dist/generated/i18n/i18n-defaults.d.ts +3 -1
  31. package/dist/generated/i18n/i18n-defaults.js +3 -1
  32. package/dist/generated/i18n/i18n-defaults.js.map +1 -1
  33. package/dist/generated/themes/Dialog.css.d.ts +1 -1
  34. package/dist/generated/themes/Dialog.css.js +1 -1
  35. package/dist/generated/themes/Dialog.css.js.map +1 -1
  36. package/dist/generated/themes/TableHeaderCell.css.d.ts +1 -1
  37. package/dist/generated/themes/TableHeaderCell.css.js +1 -1
  38. package/dist/generated/themes/TableHeaderCell.css.js.map +1 -1
  39. package/dist/vscode.html-custom-data.json +6 -1
  40. package/dist/web-types.json +12 -2
  41. package/package-scripts.cjs +1 -0
  42. package/package.json +11 -9
  43. package/src/DialogTemplate.tsx +13 -0
  44. package/src/FileUploaderTemplate.tsx +4 -0
  45. package/src/i18n/messagebundle.properties +7 -0
  46. package/src/themes/Dialog.css +22 -1
  47. package/src/themes/TableHeaderCell.css +1 -0
@@ -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("@" + "u" + "i" + "5" + "/" + "w" + "e" + "b" + "c" + "o" + "m" + "p" + "o" + "n" + "e" + "n" + "t" + "s", "sap_horizon", async () => defaultTheme, "host");
6
- export default `.ui5-hidden-text{position:absolute;clip:rect(1px,1px,1px,1px);user-select:none;left:-1000px;top:-1000px;pointer-events:none;font-size:0}:host{min-width:min(20rem,90vw);min-height:min(6rem,90vh);max-height:94%;max-width:90%;flex-direction:column;box-shadow:var(--sapContent_Shadow3);border-radius:var(--sapElement_BorderCornerRadius)}:host([stretch]){width:90%;height:94%}:host([stretch][on-phone]){width:100%;height:100%;max-height:100%;max-width:100%;border-radius:0;min-width:0}:host([draggable]) .ui5-popup-header-root,:host([draggable]) ::slotted([slot="header"]){cursor:move}:host([draggable]) .ui5-popup-header-root *{cursor:auto}:host([draggable]) .ui5-popup-root{user-select:text}::slotted([slot="header"]){max-width:100%}.ui5-popup-root{display:flex;flex-direction:column;max-width:100vw}.ui5-popup-header-root{position:relative}.ui5-popup-header-root:before{content:"";position:absolute;inset-block-start:auto;inset-block-end:0;inset-inline-start:0;inset-inline-end:0;height:var(--_ui5_dialog_header_state_line_height);background:var(--sapObjectHeader_BorderColor)}:host([state="Negative"]) .ui5-popup-header-root:before{background:var(--sapErrorBorderColor)}:host([state="Information"]) .ui5-popup-header-root:before{background:var(--sapInformationBorderColor)}:host([state="Positive"]) .ui5-popup-header-root:before{background:var(--sapSuccessBorderColor)}:host([state="Critical"]) .ui5-popup-header-root:before{background:var(--sapWarningBorderColor)}.ui5-dialog-value-state-icon{margin-inline-end:.5rem;flex-shrink:0}:host([state="Negative"]) .ui5-dialog-value-state-icon{color:var(--sapNegativeElementColor)}:host([state="Information"]) .ui5-dialog-value-state-icon{color:var(--sapInformativeElementColor)}:host([state="Positive"]) .ui5-dialog-value-state-icon{color:var(--sapPositiveElementColor)}:host([state="Critical"]) .ui5-dialog-value-state-icon{color:var(--sapCriticalElementColor)}.ui5-popup-header-root{outline:none}.ui5-popup-drag-resize-handler:focus{outline:none}.ui5-popup-root:has(.ui5-popup-drag-resize-handler:focus):before{content:"";position:absolute;inset:var(--_ui5_dialog_focus_outline_offset);border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);border-radius:var(--sapElement_BorderCornerRadius);pointer-events:none;z-index:5}:host([resizable]) .ui5-popup-root:has(.ui5-popup-drag-resize-handler:focus):before{border-end-end-radius:var(--_ui5_dialog_resizable_bottom_right_radius)}:host([stretch]) .ui5-popup-content{width:100%;height:100%}.ui5-popup-content{min-height:var(--_ui5_dialog_content_min_height);flex:1 1 auto}.ui5-popup-resize-handle{position:absolute;bottom:-.5rem;inset-inline-end:-.5rem;cursor:var(--_ui5_dialog_resize_cursor);width:1.5rem;height:1.5rem;border-radius:50%}.ui5-popup-resize-handle [ui5-icon]{color:var(--sapButton_Lite_TextColor)}:host::backdrop{background-color:var(--_ui5_popup_block_layer_background);opacity:var(--_ui5_popup_block_layer_opacity)}.ui5-block-layer{display:block}
6
+ export default `.ui5-hidden-text{position:absolute;clip:rect(1px,1px,1px,1px);user-select:none;left:-1000px;top:-1000px;pointer-events:none;font-size:0}:host{min-width:min(20rem,90vw);min-height:min(6rem,90vh);max-height:94%;max-width:90%;flex-direction:column;box-shadow:var(--sapContent_Shadow3);border-radius:var(--sapElement_BorderCornerRadius)}:host([stretch]){width:90%;height:94%}:host([stretch][on-phone]){width:100%;height:100%;max-height:100%;max-width:100%;border-radius:0;min-width:0}:host([draggable]) .ui5-popup-header-root,:host([draggable]) ::slotted([slot="header"]){cursor:move}:host([draggable]) .ui5-popup-header-root *:not(.ui5-dialog-fullscreen-btn){cursor:auto}:host([draggable]) .ui5-popup-root{user-select:text}::slotted([slot="header"]){max-width:100%}.ui5-popup-root{display:flex;flex-direction:column;max-width:100vw}.ui5-popup-header-root{position:relative}.ui5-popup-header-root:before{content:"";position:absolute;inset-block-start:auto;inset-block-end:0;inset-inline-start:0;inset-inline-end:0;height:var(--_ui5_dialog_header_state_line_height);background:var(--sapObjectHeader_BorderColor)}:host([state="Negative"]) .ui5-popup-header-root:before{background:var(--sapErrorBorderColor)}:host([state="Information"]) .ui5-popup-header-root:before{background:var(--sapInformationBorderColor)}:host([state="Positive"]) .ui5-popup-header-root:before{background:var(--sapSuccessBorderColor)}:host([state="Critical"]) .ui5-popup-header-root:before{background:var(--sapWarningBorderColor)}.ui5-dialog-value-state-icon{margin-inline-end:.5rem;flex-shrink:0}:host([state="Negative"]) .ui5-dialog-value-state-icon{color:var(--sapNegativeElementColor)}:host([state="Information"]) .ui5-dialog-value-state-icon{color:var(--sapInformativeElementColor)}:host([state="Positive"]) .ui5-dialog-value-state-icon{color:var(--sapPositiveElementColor)}:host([state="Critical"]) .ui5-dialog-value-state-icon{color:var(--sapCriticalElementColor)}.ui5-popup-header-root{outline:none}.ui5-popup-drag-resize-handler:focus{outline:none}.ui5-popup-root:has(.ui5-popup-drag-resize-handler:focus):before{content:"";position:absolute;inset:var(--_ui5_dialog_focus_outline_offset);border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);border-radius:var(--sapElement_BorderCornerRadius);pointer-events:none;z-index:5}:host([resizable]) .ui5-popup-root:has(.ui5-popup-drag-resize-handler:focus):before{border-end-end-radius:var(--_ui5_dialog_resizable_bottom_right_radius)}:host([stretch]) .ui5-popup-content{width:100%;height:100%}:host(:not([header-text])[_show-fullscreen-button]) .ui5-popup-header-root{justify-content:flex-end}:host([header-text][_show-fullscreen-button]) .ui5-popup-header-root{justify-content:space-between}.ui5-popup-header-root{gap:.5rem}.ui5-popup-content{min-height:var(--_ui5_dialog_content_min_height);flex:1 1 auto}.ui5-popup-resize-handle{position:absolute;bottom:-.5rem;inset-inline-end:-.5rem;cursor:var(--_ui5_dialog_resize_cursor);width:1.5rem;height:1.5rem;border-radius:50%}.ui5-popup-resize-handle [ui5-icon]{color:var(--sapButton_Lite_TextColor)}.ui5-popup-header-text{min-width:0;justify-content:flex-start}:host([on-phone]) .ui5-dialog-fullscreen-btn{display:none}:host::backdrop{background-color:var(--_ui5_popup_block_layer_background);opacity:var(--_ui5_popup_block_layer_opacity)}.ui5-block-layer{display:block}
7
7
  `;
8
8
  //# sourceMappingURL=Dialog.css.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Dialog.css.js","sourceRoot":"","sources":["../../../src/generated/themes/Dialog.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,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;AAC1L,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(\"@\" + \"u\" + \"i\" + \"5\" + \"/\" + \"w\" + \"e\" + \"b\" + \"c\" + \"o\" + \"m\" + \"p\" + \"o\" + \"n\" + \"e\" + \"n\" + \"t\" + \"s\", \"sap_horizon\", async () => defaultTheme, \"host\");\nexport default `.ui5-hidden-text{position:absolute;clip:rect(1px,1px,1px,1px);user-select:none;left:-1000px;top:-1000px;pointer-events:none;font-size:0}:host{min-width:min(20rem,90vw);min-height:min(6rem,90vh);max-height:94%;max-width:90%;flex-direction:column;box-shadow:var(--sapContent_Shadow3);border-radius:var(--sapElement_BorderCornerRadius)}:host([stretch]){width:90%;height:94%}:host([stretch][on-phone]){width:100%;height:100%;max-height:100%;max-width:100%;border-radius:0;min-width:0}:host([draggable]) .ui5-popup-header-root,:host([draggable]) ::slotted([slot=\"header\"]){cursor:move}:host([draggable]) .ui5-popup-header-root *{cursor:auto}:host([draggable]) .ui5-popup-root{user-select:text}::slotted([slot=\"header\"]){max-width:100%}.ui5-popup-root{display:flex;flex-direction:column;max-width:100vw}.ui5-popup-header-root{position:relative}.ui5-popup-header-root:before{content:\"\";position:absolute;inset-block-start:auto;inset-block-end:0;inset-inline-start:0;inset-inline-end:0;height:var(--_ui5_dialog_header_state_line_height);background:var(--sapObjectHeader_BorderColor)}:host([state=\"Negative\"]) .ui5-popup-header-root:before{background:var(--sapErrorBorderColor)}:host([state=\"Information\"]) .ui5-popup-header-root:before{background:var(--sapInformationBorderColor)}:host([state=\"Positive\"]) .ui5-popup-header-root:before{background:var(--sapSuccessBorderColor)}:host([state=\"Critical\"]) .ui5-popup-header-root:before{background:var(--sapWarningBorderColor)}.ui5-dialog-value-state-icon{margin-inline-end:.5rem;flex-shrink:0}:host([state=\"Negative\"]) .ui5-dialog-value-state-icon{color:var(--sapNegativeElementColor)}:host([state=\"Information\"]) .ui5-dialog-value-state-icon{color:var(--sapInformativeElementColor)}:host([state=\"Positive\"]) .ui5-dialog-value-state-icon{color:var(--sapPositiveElementColor)}:host([state=\"Critical\"]) .ui5-dialog-value-state-icon{color:var(--sapCriticalElementColor)}.ui5-popup-header-root{outline:none}.ui5-popup-drag-resize-handler:focus{outline:none}.ui5-popup-root:has(.ui5-popup-drag-resize-handler:focus):before{content:\"\";position:absolute;inset:var(--_ui5_dialog_focus_outline_offset);border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);border-radius:var(--sapElement_BorderCornerRadius);pointer-events:none;z-index:5}:host([resizable]) .ui5-popup-root:has(.ui5-popup-drag-resize-handler:focus):before{border-end-end-radius:var(--_ui5_dialog_resizable_bottom_right_radius)}:host([stretch]) .ui5-popup-content{width:100%;height:100%}.ui5-popup-content{min-height:var(--_ui5_dialog_content_min_height);flex:1 1 auto}.ui5-popup-resize-handle{position:absolute;bottom:-.5rem;inset-inline-end:-.5rem;cursor:var(--_ui5_dialog_resize_cursor);width:1.5rem;height:1.5rem;border-radius:50%}.ui5-popup-resize-handle [ui5-icon]{color:var(--sapButton_Lite_TextColor)}:host::backdrop{background-color:var(--_ui5_popup_block_layer_background);opacity:var(--_ui5_popup_block_layer_opacity)}.ui5-block-layer{display:block}\n`"]}
1
+ {"version":3,"file":"Dialog.css.js","sourceRoot":"","sources":["../../../src/generated/themes/Dialog.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,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;AAC1L,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(\"@\" + \"u\" + \"i\" + \"5\" + \"/\" + \"w\" + \"e\" + \"b\" + \"c\" + \"o\" + \"m\" + \"p\" + \"o\" + \"n\" + \"e\" + \"n\" + \"t\" + \"s\", \"sap_horizon\", async () => defaultTheme, \"host\");\nexport default `.ui5-hidden-text{position:absolute;clip:rect(1px,1px,1px,1px);user-select:none;left:-1000px;top:-1000px;pointer-events:none;font-size:0}:host{min-width:min(20rem,90vw);min-height:min(6rem,90vh);max-height:94%;max-width:90%;flex-direction:column;box-shadow:var(--sapContent_Shadow3);border-radius:var(--sapElement_BorderCornerRadius)}:host([stretch]){width:90%;height:94%}:host([stretch][on-phone]){width:100%;height:100%;max-height:100%;max-width:100%;border-radius:0;min-width:0}:host([draggable]) .ui5-popup-header-root,:host([draggable]) ::slotted([slot=\"header\"]){cursor:move}:host([draggable]) .ui5-popup-header-root *:not(.ui5-dialog-fullscreen-btn){cursor:auto}:host([draggable]) .ui5-popup-root{user-select:text}::slotted([slot=\"header\"]){max-width:100%}.ui5-popup-root{display:flex;flex-direction:column;max-width:100vw}.ui5-popup-header-root{position:relative}.ui5-popup-header-root:before{content:\"\";position:absolute;inset-block-start:auto;inset-block-end:0;inset-inline-start:0;inset-inline-end:0;height:var(--_ui5_dialog_header_state_line_height);background:var(--sapObjectHeader_BorderColor)}:host([state=\"Negative\"]) .ui5-popup-header-root:before{background:var(--sapErrorBorderColor)}:host([state=\"Information\"]) .ui5-popup-header-root:before{background:var(--sapInformationBorderColor)}:host([state=\"Positive\"]) .ui5-popup-header-root:before{background:var(--sapSuccessBorderColor)}:host([state=\"Critical\"]) .ui5-popup-header-root:before{background:var(--sapWarningBorderColor)}.ui5-dialog-value-state-icon{margin-inline-end:.5rem;flex-shrink:0}:host([state=\"Negative\"]) .ui5-dialog-value-state-icon{color:var(--sapNegativeElementColor)}:host([state=\"Information\"]) .ui5-dialog-value-state-icon{color:var(--sapInformativeElementColor)}:host([state=\"Positive\"]) .ui5-dialog-value-state-icon{color:var(--sapPositiveElementColor)}:host([state=\"Critical\"]) .ui5-dialog-value-state-icon{color:var(--sapCriticalElementColor)}.ui5-popup-header-root{outline:none}.ui5-popup-drag-resize-handler:focus{outline:none}.ui5-popup-root:has(.ui5-popup-drag-resize-handler:focus):before{content:\"\";position:absolute;inset:var(--_ui5_dialog_focus_outline_offset);border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);border-radius:var(--sapElement_BorderCornerRadius);pointer-events:none;z-index:5}:host([resizable]) .ui5-popup-root:has(.ui5-popup-drag-resize-handler:focus):before{border-end-end-radius:var(--_ui5_dialog_resizable_bottom_right_radius)}:host([stretch]) .ui5-popup-content{width:100%;height:100%}:host(:not([header-text])[_show-fullscreen-button]) .ui5-popup-header-root{justify-content:flex-end}:host([header-text][_show-fullscreen-button]) .ui5-popup-header-root{justify-content:space-between}.ui5-popup-header-root{gap:.5rem}.ui5-popup-content{min-height:var(--_ui5_dialog_content_min_height);flex:1 1 auto}.ui5-popup-resize-handle{position:absolute;bottom:-.5rem;inset-inline-end:-.5rem;cursor:var(--_ui5_dialog_resize_cursor);width:1.5rem;height:1.5rem;border-radius:50%}.ui5-popup-resize-handle [ui5-icon]{color:var(--sapButton_Lite_TextColor)}.ui5-popup-header-text{min-width:0;justify-content:flex-start}:host([on-phone]) .ui5-dialog-fullscreen-btn{display:none}:host::backdrop{background-color:var(--_ui5_popup_block_layer_background);opacity:var(--_ui5_popup_block_layer_opacity)}.ui5-block-layer{display:block}\n`"]}
@@ -1,2 +1,2 @@
1
- declare const _default: ":host{font-family:var(--sapFontSemiboldDuplexFamily);color:var(--sapList_HeaderTextColor);align-items:center;flex-wrap:nowrap;max-width:100%;gap:.125rem}:host(:empty){padding:0}[ui5-icon]{margin-inline-start:.375rem;width:1rem;height:1rem;flex-shrink:0}::slotted([ui5-label]){color:inherit;font-family:inherit;overflow:hidden}\n";
1
+ declare const _default: ":host{font-family:var(--sapFontSemiboldDuplexFamily);color:var(--sapList_HeaderTextColor);align-items:center;flex-wrap:nowrap;max-width:100%;gap:.125rem;min-height:var(--_ui5_list_item_base_height)}:host(:empty){padding:0}[ui5-icon]{margin-inline-start:.375rem;width:1rem;height:1rem;flex-shrink:0}::slotted([ui5-label]){color:inherit;font-family:inherit;overflow:hidden}\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("@" + "u" + "i" + "5" + "/" + "w" + "e" + "b" + "c" + "o" + "m" + "p" + "o" + "n" + "e" + "n" + "t" + "s", "sap_horizon", async () => defaultTheme, "host");
6
- export default `:host{font-family:var(--sapFontSemiboldDuplexFamily);color:var(--sapList_HeaderTextColor);align-items:center;flex-wrap:nowrap;max-width:100%;gap:.125rem}:host(:empty){padding:0}[ui5-icon]{margin-inline-start:.375rem;width:1rem;height:1rem;flex-shrink:0}::slotted([ui5-label]){color:inherit;font-family:inherit;overflow:hidden}
6
+ export default `:host{font-family:var(--sapFontSemiboldDuplexFamily);color:var(--sapList_HeaderTextColor);align-items:center;flex-wrap:nowrap;max-width:100%;gap:.125rem;min-height:var(--_ui5_list_item_base_height)}:host(:empty){padding:0}[ui5-icon]{margin-inline-start:.375rem;width:1rem;height:1rem;flex-shrink:0}::slotted([ui5-label]){color:inherit;font-family:inherit;overflow:hidden}
7
7
  `;
8
8
  //# sourceMappingURL=TableHeaderCell.css.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"TableHeaderCell.css.js","sourceRoot":"","sources":["../../../src/generated/themes/TableHeaderCell.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,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;AAC1L,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(\"@\" + \"u\" + \"i\" + \"5\" + \"/\" + \"w\" + \"e\" + \"b\" + \"c\" + \"o\" + \"m\" + \"p\" + \"o\" + \"n\" + \"e\" + \"n\" + \"t\" + \"s\", \"sap_horizon\", async () => defaultTheme, \"host\");\nexport default `:host{font-family:var(--sapFontSemiboldDuplexFamily);color:var(--sapList_HeaderTextColor);align-items:center;flex-wrap:nowrap;max-width:100%;gap:.125rem}:host(:empty){padding:0}[ui5-icon]{margin-inline-start:.375rem;width:1rem;height:1rem;flex-shrink:0}::slotted([ui5-label]){color:inherit;font-family:inherit;overflow:hidden}\n`"]}
1
+ {"version":3,"file":"TableHeaderCell.css.js","sourceRoot":"","sources":["../../../src/generated/themes/TableHeaderCell.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,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;AAC1L,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(\"@\" + \"u\" + \"i\" + \"5\" + \"/\" + \"w\" + \"e\" + \"b\" + \"c\" + \"o\" + \"m\" + \"p\" + \"o\" + \"n\" + \"e\" + \"n\" + \"t\" + \"s\", \"sap_horizon\", async () => defaultTheme, \"host\");\nexport default `:host{font-family:var(--sapFontSemiboldDuplexFamily);color:var(--sapList_HeaderTextColor);align-items:center;flex-wrap:nowrap;max-width:100%;gap:.125rem;min-height:var(--_ui5_list_item_base_height)}:host(:empty){padding:0}[ui5-icon]{margin-inline-start:.375rem;width:1rem;height:1rem;flex-shrink:0}::slotted([ui5-label]){color:inherit;font-family:inherit;overflow:hidden}\n`"]}
@@ -1825,7 +1825,7 @@
1825
1825
  },
1826
1826
  {
1827
1827
  "name": "ui5-dialog",
1828
- "description": "### Overview\nThe `ui5-dialog` component is used to temporarily display some information in a\nsize-limited window in front of the regular app screen.\nIt is used to prompt the user for an action or a confirmation.\nThe `ui5-dialog` interrupts the current app processing as it is the only focused UI element and\nthe main screen is dimmed/blocked.\nThe dialog combines concepts known from other technologies where the windows have\nnames such as dialog box, dialog window, pop-up, pop-up window, alert box, or message box.\n\nThe `ui5-dialog` is modal, which means that a user action is required before it is possible to return to the parent window.\nTo open multiple dialogs, each dialog element should be separate in the markup. This will ensure the correct modal behavior. Avoid nesting dialogs within each other.\nThe content of the `ui5-dialog` is fully customizable.\n\n### Structure\nA `ui5-dialog` consists of a header, content, and a footer for action buttons.\nThe `ui5-dialog` is usually displayed at the center of the screen.\nIts position can be changed by the user. To enable this, you need to set the property `draggable` accordingly.\n\n\n### Responsive Behavior\nThe `stretch` property can be used to stretch the `ui5-dialog` to full screen. For better usability, it's recommended to stretch the dialog to full screen on phone devices.\n\n**Note:** When a `ui5-bar` is used in the header or in the footer, you should remove the default dialog's paddings.\n\nFor more information see the sample \"Bar in Header/Footer\".\n\n### Keyboard Handling\n\n#### Basic Navigation\nWhen the `ui5-dialog` has the `draggable` property set to `true`, the user can move the dialog\nwith the following keyboard shortcuts:\n\n- [Up] or [Down] arrow keys - Move the dialog up/down.\n- [Left] or [Right] arrow keys - Move the dialog left/right.\n\n#### Resizing\nWhen the `ui5-dialog` has the `resizable` property set to `true`, the user can change the size of the dialog\nwith the following keyboard shortcuts:\n\n- [Shift] + [Up] or [Down] - Decrease/Increase the height of the dialog.\n- [Shift] + [Left] or [Right] - Decrease/Increase the width of the dialog.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Dialog\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.\n- **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.\n- **close** - Fired after the component is closed.\n- **open** - Fired after the component is opened.\n\n### **Methods:**\n - **applyFocus(): _Promise<void>_** - Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.\n\n### **Slots:**\n - **default** - Defines the content of the Popup.\n- **footer** - Defines the footer HTML Element.\n- **header** - Defines the header HTML Element.\n\n**Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer.\n`accessibleName` should be used.\n\n### **CSS Parts:**\n - **content** - Used to style the content of the component\n- **footer** - Used to style the footer of the component\n- **header** - Used to style the header of the component",
1828
+ "description": "### Overview\nThe `ui5-dialog` component is used to temporarily display some information in a\nsize-limited window in front of the regular app screen.\nIt is used to prompt the user for an action or a confirmation.\nThe `ui5-dialog` interrupts the current app processing as it is the only focused UI element and\nthe main screen is dimmed/blocked.\nThe dialog combines concepts known from other technologies where the windows have\nnames such as dialog box, dialog window, pop-up, pop-up window, alert box, or message box.\n\nThe `ui5-dialog` is modal, which means that a user action is required before it is possible to return to the parent window.\nTo open multiple dialogs, each dialog element should be separate in the markup. This will ensure the correct modal behavior. Avoid nesting dialogs within each other.\nThe content of the `ui5-dialog` is fully customizable.\n\n### Structure\nA `ui5-dialog` consists of a header, content, and a footer for action buttons.\nThe `ui5-dialog` is usually displayed at the center of the screen.\nIts position can be changed by the user. To enable this, you need to set the property `draggable` accordingly.\n\n\n### Responsive Behavior\nThe `stretch` property can be used to stretch the `ui5-dialog` to full screen. For better usability, it's recommended to stretch the dialog to full screen on phone devices.\n\n**Note:** When a `ui5-bar` is used in the header or in the footer, you should remove the default dialog's paddings.\n\nFor more information see the sample \"Bar in Header/Footer\".\n\n### Keyboard Handling\n\n#### Basic Navigation\nWhen the `ui5-dialog` has the `draggable` property set to `true`, the user can move the dialog\nwith the following keyboard shortcuts:\n\n- [Up] or [Down] arrow keys - Move the dialog up/down.\n- [Left] or [Right] arrow keys - Move the dialog left/right.\n\n#### Resizing\nWhen the `ui5-dialog` has the `resizable` property set to `true`, the user can change the size of the dialog\nwith the following keyboard shortcuts:\n\n- [Shift] + [Up] or [Down] - Decrease/Increase the height of the dialog.\n- [Shift] + [Left] or [Right] - Decrease/Increase the width of the dialog.\n\n#### Fullscreen\nWhen the `ui5-dialog` has the `showFullscreenButton` property set to `true`, the user can toggle fullscreen mode\nwith the following keyboard shortcut:\n\n- [Shift] + [Ctrl] + [F] - Toggle fullscreen mode.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Dialog\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.\n- **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.\n- **close** - Fired after the component is closed.\n- **open** - Fired after the component is opened.\n\n### **Methods:**\n - **applyFocus(): _Promise<void>_** - Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.\n\n### **Slots:**\n - **default** - Defines the content of the Popup.\n- **footer** - Defines the footer HTML Element.\n- **header** - Defines the header HTML Element.\n\n**Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer.\n`accessibleName` should be used.\n\n### **CSS Parts:**\n - **content** - Used to style the content of the component\n- **footer** - Used to style the footer of the component\n- **header** - Used to style the header of the component",
1829
1829
  "attributes": [
1830
1830
  {
1831
1831
  "name": "accessible-description",
@@ -1891,6 +1891,11 @@
1891
1891
  "description": "Configures the component to be resizable.\nIf this property is set to true, the Dialog will have a resize handle in its bottom right corner in LTR languages.\nIn RTL languages, the resize handle will be placed in the bottom left corner.\n\n**Note:** The component can be resizable only in desktop mode.\n\n**Note:** Upon resizing, externally defined height and width styling will be ignored.",
1892
1892
  "values": []
1893
1893
  },
1894
+ {
1895
+ "name": "show-fullscreen-button",
1896
+ "description": "Defines whether a fullscreen toggle button is shown in the dialog header.\nWhen pressed, it toggles the `stretch` property.\nThe fullscreen button is not available on phone devices.\n\n**Note:** The fullscreen button is not available on phone devices,\nnor when a custom header slot is provided — the application is expected\nto render its own toggle inside the custom header in those cases.",
1897
+ "values": []
1898
+ },
1894
1899
  {
1895
1900
  "name": "state",
1896
1901
  "description": "Defines the state of the `Dialog`.\n\n**Note:** If `\"Negative\"` and `\"Critical\"` states is set, it will change the\naccessibility role to \"alertdialog\", if the accessibleRole property is set to `\"Dialog\"`.",
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
3
3
  "name": "@ui5/webcomponents",
4
- "version": "2.24.0",
4
+ "version": "2.25.0-rc.0",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
@@ -3718,7 +3718,7 @@
3718
3718
  },
3719
3719
  {
3720
3720
  "name": "ui5-dialog",
3721
- "description": "### Overview\nThe `ui5-dialog` component is used to temporarily display some information in a\nsize-limited window in front of the regular app screen.\nIt is used to prompt the user for an action or a confirmation.\nThe `ui5-dialog` interrupts the current app processing as it is the only focused UI element and\nthe main screen is dimmed/blocked.\nThe dialog combines concepts known from other technologies where the windows have\nnames such as dialog box, dialog window, pop-up, pop-up window, alert box, or message box.\n\nThe `ui5-dialog` is modal, which means that a user action is required before it is possible to return to the parent window.\nTo open multiple dialogs, each dialog element should be separate in the markup. This will ensure the correct modal behavior. Avoid nesting dialogs within each other.\nThe content of the `ui5-dialog` is fully customizable.\n\n### Structure\nA `ui5-dialog` consists of a header, content, and a footer for action buttons.\nThe `ui5-dialog` is usually displayed at the center of the screen.\nIts position can be changed by the user. To enable this, you need to set the property `draggable` accordingly.\n\n\n### Responsive Behavior\nThe `stretch` property can be used to stretch the `ui5-dialog` to full screen. For better usability, it's recommended to stretch the dialog to full screen on phone devices.\n\n**Note:** When a `ui5-bar` is used in the header or in the footer, you should remove the default dialog's paddings.\n\nFor more information see the sample \"Bar in Header/Footer\".\n\n### Keyboard Handling\n\n#### Basic Navigation\nWhen the `ui5-dialog` has the `draggable` property set to `true`, the user can move the dialog\nwith the following keyboard shortcuts:\n\n- [Up] or [Down] arrow keys - Move the dialog up/down.\n- [Left] or [Right] arrow keys - Move the dialog left/right.\n\n#### Resizing\nWhen the `ui5-dialog` has the `resizable` property set to `true`, the user can change the size of the dialog\nwith the following keyboard shortcuts:\n\n- [Shift] + [Up] or [Down] - Decrease/Increase the height of the dialog.\n- [Shift] + [Left] or [Right] - Decrease/Increase the width of the dialog.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Dialog\";`\n---\n\n\n### **Events:**\n - **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.\n- **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.\n- **close** - Fired after the component is closed.\n- **open** - Fired after the component is opened.\n\n### **Methods:**\n - **applyFocus(): _Promise<void>_** - Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.\n\n### **Slots:**\n - **default** - Defines the content of the Popup.\n- **footer** - Defines the footer HTML Element.\n- **header** - Defines the header HTML Element.\n\n**Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer.\n`accessibleName` should be used.\n\n### **CSS Parts:**\n - **content** - Used to style the content of the component\n- **footer** - Used to style the footer of the component\n- **header** - Used to style the header of the component",
3721
+ "description": "### Overview\nThe `ui5-dialog` component is used to temporarily display some information in a\nsize-limited window in front of the regular app screen.\nIt is used to prompt the user for an action or a confirmation.\nThe `ui5-dialog` interrupts the current app processing as it is the only focused UI element and\nthe main screen is dimmed/blocked.\nThe dialog combines concepts known from other technologies where the windows have\nnames such as dialog box, dialog window, pop-up, pop-up window, alert box, or message box.\n\nThe `ui5-dialog` is modal, which means that a user action is required before it is possible to return to the parent window.\nTo open multiple dialogs, each dialog element should be separate in the markup. This will ensure the correct modal behavior. Avoid nesting dialogs within each other.\nThe content of the `ui5-dialog` is fully customizable.\n\n### Structure\nA `ui5-dialog` consists of a header, content, and a footer for action buttons.\nThe `ui5-dialog` is usually displayed at the center of the screen.\nIts position can be changed by the user. To enable this, you need to set the property `draggable` accordingly.\n\n\n### Responsive Behavior\nThe `stretch` property can be used to stretch the `ui5-dialog` to full screen. For better usability, it's recommended to stretch the dialog to full screen on phone devices.\n\n**Note:** When a `ui5-bar` is used in the header or in the footer, you should remove the default dialog's paddings.\n\nFor more information see the sample \"Bar in Header/Footer\".\n\n### Keyboard Handling\n\n#### Basic Navigation\nWhen the `ui5-dialog` has the `draggable` property set to `true`, the user can move the dialog\nwith the following keyboard shortcuts:\n\n- [Up] or [Down] arrow keys - Move the dialog up/down.\n- [Left] or [Right] arrow keys - Move the dialog left/right.\n\n#### Resizing\nWhen the `ui5-dialog` has the `resizable` property set to `true`, the user can change the size of the dialog\nwith the following keyboard shortcuts:\n\n- [Shift] + [Up] or [Down] - Decrease/Increase the height of the dialog.\n- [Shift] + [Left] or [Right] - Decrease/Increase the width of the dialog.\n\n#### Fullscreen\nWhen the `ui5-dialog` has the `showFullscreenButton` property set to `true`, the user can toggle fullscreen mode\nwith the following keyboard shortcut:\n\n- [Shift] + [Ctrl] + [F] - Toggle fullscreen mode.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Dialog\";`\n---\n\n\n### **Events:**\n - **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.\n- **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.\n- **close** - Fired after the component is closed.\n- **open** - Fired after the component is opened.\n\n### **Methods:**\n - **applyFocus(): _Promise<void>_** - Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.\n\n### **Slots:**\n - **default** - Defines the content of the Popup.\n- **footer** - Defines the footer HTML Element.\n- **header** - Defines the header HTML Element.\n\n**Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer.\n`accessibleName` should be used.\n\n### **CSS Parts:**\n - **content** - Used to style the content of the component\n- **footer** - Used to style the footer of the component\n- **header** - Used to style the header of the component",
3722
3722
  "doc-url": "",
3723
3723
  "attributes": [
3724
3724
  {
@@ -3784,6 +3784,11 @@
3784
3784
  "description": "Configures the component to be resizable.\nIf this property is set to true, the Dialog will have a resize handle in its bottom right corner in LTR languages.\nIn RTL languages, the resize handle will be placed in the bottom left corner.\n\n**Note:** The component can be resizable only in desktop mode.\n\n**Note:** Upon resizing, externally defined height and width styling will be ignored.",
3785
3785
  "value": { "type": "boolean", "default": "false" }
3786
3786
  },
3787
+ {
3788
+ "name": "show-fullscreen-button",
3789
+ "description": "Defines whether a fullscreen toggle button is shown in the dialog header.\nWhen pressed, it toggles the `stretch` property.\nThe fullscreen button is not available on phone devices.\n\n**Note:** The fullscreen button is not available on phone devices,\nnor when a custom header slot is provided — the application is expected\nto render its own toggle inside the custom header in those cases.",
3790
+ "value": { "type": "boolean", "default": "false" }
3791
+ },
3787
3792
  {
3788
3793
  "name": "state",
3789
3794
  "description": "Defines the state of the `Dialog`.\n\n**Note:** If `\"Negative\"` and `\"Critical\"` states is set, it will change the\naccessibility role to \"alertdialog\", if the accessibleRole property is set to `\"Dialog\"`.",
@@ -3892,6 +3897,11 @@
3892
3897
  "description": "Configures the component to be resizable.\nIf this property is set to true, the Dialog will have a resize handle in its bottom right corner in LTR languages.\nIn RTL languages, the resize handle will be placed in the bottom left corner.\n\n**Note:** The component can be resizable only in desktop mode.\n\n**Note:** Upon resizing, externally defined height and width styling will be ignored.",
3893
3898
  "value": { "type": "boolean" }
3894
3899
  },
3900
+ {
3901
+ "name": "show-fullscreen-button",
3902
+ "description": "Defines whether a fullscreen toggle button is shown in the dialog header.\nWhen pressed, it toggles the `stretch` property.\nThe fullscreen button is not available on phone devices.\n\n**Note:** The fullscreen button is not available on phone devices,\nnor when a custom header slot is provided — the application is expected\nto render its own toggle inside the custom header in those cases.",
3903
+ "value": { "type": "boolean" }
3904
+ },
3895
3905
  {
3896
3906
  "name": "state",
3897
3907
  "description": "Defines the state of the `Dialog`.\n\n**Note:** If `\"Negative\"` and `\"Critical\"` states is set, it will change the\naccessibility role to \"alertdialog\", if the accessibleRole property is set to `\"Dialog\"`.",
@@ -9,6 +9,7 @@ const options = {
9
9
  cssVariablesTarget: "host",
10
10
  internal: {
11
11
  cypress_code_coverage: false,
12
+ cypress_visual: process.env.CYPRESS_VISUAL === "true",
12
13
  },
13
14
  };
14
15
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ui5/webcomponents",
3
- "version": "2.24.0",
3
+ "version": "2.25.0-rc.0",
4
4
  "description": "UI5 Web Components: webcomponents.main",
5
5
  "ui5": {
6
6
  "webComponentsPackage": true
@@ -33,6 +33,8 @@
33
33
  "test:cypress:suite-3": "wc-dev test-cy-ci-suite-3",
34
34
  "test:cypress:suite-4": "wc-dev test-cy-ci-suite-4",
35
35
  "test:cypress:open": "wc-dev test-cy-open",
36
+ "test:cypress:visual": "CYPRESS_VISUAL=true yarn test:cypress",
37
+ "test:cypress:open:visual": "CYPRESS_VISUAL=true yarn test:cypress:open",
36
38
  "test:cypress:single": "npx cypress run --component --browser chrome --spec",
37
39
  "test:vitest": "yarn vitest run",
38
40
  "test:ssr": "node -e \"import('./test/ssr/component-imports.js')\"",
@@ -54,22 +56,22 @@
54
56
  "directory": "packages/main"
55
57
  },
56
58
  "dependencies": {
57
- "@ui5/webcomponents-base": "2.24.0",
58
- "@ui5/webcomponents-icons": "2.24.0",
59
- "@ui5/webcomponents-icons-business-suite": "2.24.0",
60
- "@ui5/webcomponents-icons-tnt": "2.24.0",
61
- "@ui5/webcomponents-localization": "2.24.0",
62
- "@ui5/webcomponents-theming": "2.24.0"
59
+ "@ui5/webcomponents-base": "2.25.0-rc.0",
60
+ "@ui5/webcomponents-icons": "2.25.0-rc.0",
61
+ "@ui5/webcomponents-icons-business-suite": "2.25.0-rc.0",
62
+ "@ui5/webcomponents-icons-tnt": "2.25.0-rc.0",
63
+ "@ui5/webcomponents-localization": "2.25.0-rc.0",
64
+ "@ui5/webcomponents-theming": "2.25.0-rc.0"
63
65
  },
64
66
  "devDependencies": {
65
67
  "@custom-elements-manifest/analyzer": "^0.10.10",
66
68
  "@ui5/cypress-internal": "0.1.0",
67
- "@ui5/webcomponents-tools": "2.24.0",
69
+ "@ui5/webcomponents-tools": "2.25.0-rc.0",
68
70
  "cypress": "15.9.0",
69
71
  "jsdom": "^26.0.0",
70
72
  "lit": "^2.0.0",
71
73
  "vite": "5.4.21",
72
74
  "vitest": "^3.0.2"
73
75
  },
74
- "gitHead": "0823d74956236280e547b9f58bd06ff736180396"
76
+ "gitHead": "3800f6ec28e661c8632343a4dfd00c0f78ae5e7d"
75
77
  }
@@ -3,6 +3,7 @@ import type Dialog from "./Dialog.js";
3
3
  import PopupTemplate from "./PopupTemplate.js";
4
4
  import Title from "./Title.js";
5
5
  import Icon from "./Icon.js";
6
+ import Button from "./Button.js";
6
7
 
7
8
  export default function DialogTemplate(this: Dialog) {
8
9
  return PopupTemplate.call(this, {
@@ -20,6 +21,7 @@ function beforeContent(this: Dialog) {
20
21
  role="region"
21
22
  aria-label={this._headerAriaLabel}
22
23
  onMouseDown={this._onDragMouseDown}
24
+ onDblClick={this._showFullscreenButton ? this._onHeaderDblClick : undefined}
23
25
  part="header"
24
26
  // state={this.state}
25
27
  >
@@ -31,6 +33,17 @@ function beforeContent(this: Dialog) {
31
33
  :
32
34
  <Title level="H1" id="ui5-popup-header-text" class="ui5-popup-header-text">{this.headerText}</Title>
33
35
  }
36
+ {this._showFullscreenButton &&
37
+ <Button
38
+ class="ui5-dialog-fullscreen-btn"
39
+ icon={this._fullscreenButtonIcon}
40
+ design="Transparent"
41
+ tooltip={this._fullscreenButtonTooltip}
42
+ accessibleName={this._fullscreenButtonTooltip}
43
+ accessibilityAttributes={this._fullscreenButtonAccessibilityAttributes}
44
+ onClick={this._toggleFullscreen}
45
+ ></Button>
46
+ }
34
47
  </div>
35
48
  }
36
49
  </>);
@@ -35,10 +35,14 @@ export default function FileUploaderTemplate(this: FileUploader) {
35
35
  aria-description={this.accInfo.ariaDescription}
36
36
  aria-required={this.accInfo.ariaRequired}
37
37
  aria-invalid={this.accInfo.ariaInvalid}
38
+ aria-describedby={this.accInfo.ariaDescribedBy}
38
39
  onClick={this._onNativeInputClick}
39
40
  onChange={this._onChange}
40
41
  data-sap-focus-ref
41
42
  />
43
+ {this.hasValueState &&
44
+ <span id="valueStateDesc" class="ui5-hidden-text">{this.ariaValueStateHiddenText}</span>
45
+ }
42
46
  </div>
43
47
 
44
48
  {this.hideInput ? (
@@ -873,6 +873,13 @@ DIALOG_CONTENT_ARIA_LABEL=Content
873
873
 
874
874
  #XACT: ARIA label for the Dialog footer region
875
875
  DIALOG_FOOTER_ARIA_LABEL=Footer
876
+
877
+ #XACT: Tooltip for dialog fullscreen button (maximize)
878
+ DIALOG_FULLSCREEN_MAXIMIZE=Maximize (Shift+Ctrl+F)
879
+
880
+ #XACT: Tooltip for dialog fullscreen button (restore)
881
+ DIALOG_FULLSCREEN_RESTORE=Restore (Shift+Ctrl+F)
882
+
876
883
  #XFLD: A colon to separate the "label" from an input. In some languages there might be a different symbol used for such a colon
877
884
  LABEL_COLON=:
878
885
 
@@ -29,7 +29,7 @@
29
29
  cursor: move;
30
30
  }
31
31
 
32
- :host([draggable]) .ui5-popup-header-root * {
32
+ :host([draggable]) .ui5-popup-header-root *:not(.ui5-dialog-fullscreen-btn) {
33
33
  cursor: auto;
34
34
  }
35
35
 
@@ -125,6 +125,18 @@
125
125
  height: 100%;
126
126
  }
127
127
 
128
+ :host(:not([header-text])[_show-fullscreen-button]) .ui5-popup-header-root {
129
+ justify-content: flex-end;
130
+ }
131
+
132
+ :host([header-text][_show-fullscreen-button]) .ui5-popup-header-root {
133
+ justify-content: space-between;
134
+ }
135
+
136
+ .ui5-popup-header-root {
137
+ gap: 0.5rem;
138
+ }
139
+
128
140
  .ui5-popup-content {
129
141
  min-height: var(--_ui5_dialog_content_min_height);
130
142
  flex: 1 1 auto;
@@ -144,6 +156,15 @@
144
156
  color: var(--sapButton_Lite_TextColor);
145
157
  }
146
158
 
159
+ .ui5-popup-header-text {
160
+ min-width: 0;
161
+ justify-content: flex-start;
162
+ }
163
+
164
+ :host([on-phone]) .ui5-dialog-fullscreen-btn {
165
+ display: none;
166
+ }
167
+
147
168
  :host::backdrop {
148
169
  background-color: var(--_ui5_popup_block_layer_background);
149
170
  opacity: var(--_ui5_popup_block_layer_opacity);
@@ -5,6 +5,7 @@
5
5
  flex-wrap: nowrap;
6
6
  max-width: 100%;
7
7
  gap: 0.125rem;
8
+ min-height: var(--_ui5_list_item_base_height);
8
9
  }
9
10
 
10
11
  :host(:empty) {