feat(ui5-barcode-scanner-dialog): added support for custom header and footer slots

[kgogov]

Description

This Pull Request introduces support for custom header and footer slots in the ui5-barcode-scanner-dialog component. By adding header and footer slots, developers can now inject custom content into the dialog’s header and footer areas, enhancing flexibility and allowing for more personalized dialog interfaces.

If no custom content is provided, the dialog will use its default header and footer layout, ensuring backward compatibility.

Usage

To utilize custom header and footer content, provide elements with the slot attribute set to header and/or footer:

<ui5-barcode-scanner-dialog id="dlgScanCustom">
  <div slot="header" class="custom-dialog-header">
    <ui5-title level="H2">My Custom Header</ui5-title>
  </div>
  <div slot="footer" class="custom-dialog-footer">
    <ui5-button id="btnCloseDialogCustom" design="Emphasized">My Custom Close Button</ui5-button>
  </div>
</ui5-barcode-scanner-dialog>

Important Note

When you provide custom content for the footer slot, the default close button is not rendered. This means you need to include your own mechanism within the custom footer to close the dialog. Typically, this involves adding a button and attaching an event listener that closes the dialog:

const dialog = document.getElementById('dlgScanCustom');
const closeButton = document.getElementById('btnCloseDialogCustom');

closeButton.addEventListener('click', () => {
  dialog.open = false; // Closes the dialog
});

If you do not provide a custom footer, the dialog will include the default footer with a close button, allowing users to close the dialog without any additional implementation.

Related: #8919

[xtatica]

Added one suggestion.