From ae04ea7f09c22a05b0b3c2c0f396551dffd8bfd1 Mon Sep 17 00:00:00 2001 From: Vladislav Tasev Date: Thu, 2 Jan 2025 13:51:59 +0200 Subject: [PATCH 01/20] chore: remove dependencies for jsxRender --- packages/ai/src/Button.ts | 6 ++-- packages/ai/src/PromptInput.ts | 9 +----- packages/base/src/UI5Element.ts | 18 ++---------- packages/base/src/jsx-utils.ts | 2 -- packages/fiori/src/BarcodeScannerDialog.ts | 9 +----- packages/fiori/src/DynamicPage.ts | 3 +- .../fiori/src/DynamicPageHeaderActions.ts | 5 ++-- packages/fiori/src/DynamicPageTitle.ts | 4 +-- packages/fiori/src/FlexibleColumnLayout.ts | 2 -- packages/fiori/src/IllustratedMessage.ts | 2 -- packages/fiori/src/NotificationList.ts | 5 +--- packages/fiori/src/ProductSwitchItem.ts | 2 -- packages/fiori/src/SideNavigation.ts | 20 ++++--------- packages/fiori/src/SideNavigationGroup.ts | 4 --- packages/fiori/src/SideNavigationItem.ts | 4 --- packages/fiori/src/SideNavigationSubItem.ts | 4 --- packages/fiori/src/Timeline.ts | 3 -- packages/fiori/src/TimelineGroupItem.ts | 3 -- packages/fiori/src/TimelineItem.ts | 7 +---- packages/fiori/src/UploadCollection.ts | 14 --------- packages/fiori/src/UploadCollectionItem.ts | 15 ++-------- packages/fiori/src/UserMenu.ts | 29 ++----------------- packages/fiori/src/UserMenuItem.ts | 1 - packages/fiori/src/ViewSettingsDialog.ts | 22 ++------------ packages/fiori/src/Wizard.ts | 13 ++------- packages/fiori/src/WizardTab.ts | 2 -- 26 files changed, 28 insertions(+), 180 deletions(-) diff --git a/packages/ai/src/Button.ts b/packages/ai/src/Button.ts index a7942ce1aa03..b9e90523c2ff 100644 --- a/packages/ai/src/Button.ts +++ b/packages/ai/src/Button.ts @@ -6,10 +6,9 @@ import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; import query from "@ui5/webcomponents-base/dist/decorators/query.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; -import SplitButton from "@ui5/webcomponents/dist/SplitButton.js"; -import Icon from "@ui5/webcomponents/dist/Icon.js"; +import type SplitButton from "@ui5/webcomponents/dist/SplitButton.js"; import type ButtonDesign from "@ui5/webcomponents/dist/types/ButtonDesign.js"; -import ButtonState from "./ButtonState.js"; +import type ButtonState from "./ButtonState.js"; import ButtonTemplate from "./ButtonTemplate.js"; @@ -54,7 +53,6 @@ import ButtonCss from "./generated/themes/Button.css.js"; renderer: jsxRenderer, template: ButtonTemplate, styles: ButtonCss, - dependencies: [SplitButton, Icon, ButtonState], shadowRootOptions: { delegatesFocus: true }, }) diff --git a/packages/ai/src/PromptInput.ts b/packages/ai/src/PromptInput.ts index 076d51bfda9c..85096e1fd453 100644 --- a/packages/ai/src/PromptInput.ts +++ b/packages/ai/src/PromptInput.ts @@ -8,9 +8,7 @@ import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; import type ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js"; import type { IInputSuggestionItem, InputEventDetail } from "@ui5/webcomponents/dist/Input.js"; -import Input from "@ui5/webcomponents/dist/Input.js"; -import Label from "@ui5/webcomponents/dist/Label.js"; -import Button from "@ui5/webcomponents/dist/Button.js"; +import type Input from "@ui5/webcomponents/dist/Input.js"; import { isEnter, } from "@ui5/webcomponents-base/dist/Keys.js"; @@ -46,11 +44,6 @@ import PromptInputCss from "./generated/themes/PromptInput.css.js"; renderer: jsxRenderer, styles: PromptInputCss, template: PromptInputTemplate, - dependencies: [ - Input, - Label, - Button, - ], }) /** diff --git a/packages/base/src/UI5Element.ts b/packages/base/src/UI5Element.ts index 5d39325ba202..18b3a5e85ba1 100644 --- a/packages/base/src/UI5Element.ts +++ b/packages/base/src/UI5Element.ts @@ -277,19 +277,6 @@ abstract class UI5Element extends HTMLElement { * @private */ async connectedCallback() { - if (DEV_MODE) { - const rootNode = this.getRootNode(); - // when an element is connected, check if it exists in the `dependencies` of the parent - if (rootNode instanceof ShadowRoot && instanceOfUI5Element(rootNode.host)) { - const klass = rootNode.host.constructor as typeof UI5Element; - const hasDependency = klass.tagsToScope.includes((this.constructor as typeof UI5Element).getMetadata().getPureTag()); - if (!hasDependency) { - // eslint-disable-next-line no-console - console.error(`[UI5-FWK] ${(this.constructor as typeof UI5Element).getMetadata().getTag()} not found in dependencies of ${klass.getMetadata().getTag()}`); - } - } - } - if (DEV_MODE) { const props = (this.constructor as typeof UI5Element).getMetadata().getProperties(); for (const [prop, propData] of Object.entries(props)) { // eslint-disable-line @@ -1246,9 +1233,8 @@ abstract class UI5Element extends HTMLElement { static styles: ComponentStylesData = ""; /** - * Returns an array with the dependencies for this UI5 Web Component, which could be: - * - composed components (used in its shadow root or static area item) - * - slotted components that the component may need to communicate with + * Returns an array with the dependencies for this UI5 Web Component (slotted components that the component may need to communicate with) + * The component will always await for the dependencies to be defined before defining itself * * @protected */ diff --git a/packages/base/src/jsx-utils.ts b/packages/base/src/jsx-utils.ts index 79fa989b9892..239c70715346 100644 --- a/packages/base/src/jsx-utils.ts +++ b/packages/base/src/jsx-utils.ts @@ -3,8 +3,6 @@ import hash2str from "./util/hash2str.js"; import { pascalToKebabCase } from "./util/StringHelper.js"; function convertEventScoping(type: typeof UI5Element, props: Record, key: string) { - const tag = type.getMetadata().getTag(); - const events = type.getMetadata().getEvents(); Object.keys(props).forEach(prop => { diff --git a/packages/fiori/src/BarcodeScannerDialog.ts b/packages/fiori/src/BarcodeScannerDialog.ts index 31757be85f83..7f2db9b07473 100644 --- a/packages/fiori/src/BarcodeScannerDialog.ts +++ b/packages/fiori/src/BarcodeScannerDialog.ts @@ -2,9 +2,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; -import Dialog from "@ui5/webcomponents/dist/Dialog.js"; -import Button from "@ui5/webcomponents/dist/Button.js"; -import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js"; +import type Dialog from "@ui5/webcomponents/dist/Dialog.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; @@ -80,11 +78,6 @@ type BarcodeScannerDialogScanErrorEventDetail = { renderer: jsxRenderer, template: BarcodeScannerDialogTemplate, styles: [BarcodeScannerDialogCss], - dependencies: [ - Dialog, - BusyIndicator, - Button, - ], }) /** diff --git a/packages/fiori/src/DynamicPage.ts b/packages/fiori/src/DynamicPage.ts index b4b9e9259c95..76dce5a4b06e 100644 --- a/packages/fiori/src/DynamicPage.ts +++ b/packages/fiori/src/DynamicPage.ts @@ -25,7 +25,7 @@ import DynamicPageCss from "./generated/themes/DynamicPage.css.js"; import DynamicPageHeader from "./DynamicPageHeader.js"; import DynamicPageTitle from "./DynamicPageTitle.js"; -import DynamicPageHeaderActions from "./DynamicPageHeaderActions.js"; +import type DynamicPageHeaderActions from "./DynamicPageHeaderActions.js"; // Texts import { @@ -101,7 +101,6 @@ const SCROLL_THRESHOLD = 10; // px renderer: jsxRenderer, styles: DynamicPageCss, template: DynamicPageTemplate, - dependencies: [DynamicPageHeaderActions], }) /** diff --git a/packages/fiori/src/DynamicPageHeaderActions.ts b/packages/fiori/src/DynamicPageHeaderActions.ts index fb7f451e4c8c..98beda2822e1 100644 --- a/packages/fiori/src/DynamicPageHeaderActions.ts +++ b/packages/fiori/src/DynamicPageHeaderActions.ts @@ -5,8 +5,8 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; -import Button from "@ui5/webcomponents/dist/Button.js"; -import ToggleButton from "@ui5/webcomponents/dist/ToggleButton.js"; +import type Button from "@ui5/webcomponents/dist/Button.js"; +import type ToggleButton from "@ui5/webcomponents/dist/ToggleButton.js"; import { isLegacyThemeFamily } from "@ui5/webcomponents-base/dist/config/Theme.js"; import type { AccessibilityAttributes } from "@ui5/webcomponents-base/dist/types.js"; @@ -51,7 +51,6 @@ type DynamicPageHeaderActionsAccessibilityAttributes = Pick { renderer: jsxRenderer, styles: IllustratedMessageCss, template: IllustratedMessageTemplate, - dependencies: [Title], }) class IllustratedMessage extends UI5Element { /** diff --git a/packages/fiori/src/NotificationList.ts b/packages/fiori/src/NotificationList.ts index 61e827345ab4..62cc0d411ea0 100644 --- a/packages/fiori/src/NotificationList.ts +++ b/packages/fiori/src/NotificationList.ts @@ -12,7 +12,7 @@ import type { ListItemCloseEventDetail, } from "@ui5/webcomponents/dist/List.js"; import type NotificationListItemBase from "./NotificationListItemBase.js"; -import NotificationListInternal from "./NotificationListInternal.js"; +import type NotificationListInternal from "./NotificationListInternal.js"; // Template import NotificationListTemplate from "./NotificationListTemplate.js"; @@ -70,9 +70,6 @@ type NotificationItemCloseEventDetail = NotificationItemEventDetail; languageAware: true, styles: [NotificationListCss], template: NotificationListTemplate, - dependencies: [ - NotificationListInternal, - ], }) /** diff --git a/packages/fiori/src/ProductSwitchItem.ts b/packages/fiori/src/ProductSwitchItem.ts index 05e78fbc0441..674c56f48a8d 100644 --- a/packages/fiori/src/ProductSwitchItem.ts +++ b/packages/fiori/src/ProductSwitchItem.ts @@ -2,7 +2,6 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import { isSpace, isEnter, isSpaceShift } from "@ui5/webcomponents-base/dist/Keys.js"; import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js"; -import Icon from "@ui5/webcomponents/dist/Icon.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; @@ -40,7 +39,6 @@ import ProductSwitchItemCss from "./generated/themes/ProductSwitchItem.css.js"; renderer: jsxRenderer, styles: ProductSwitchItemCss, template: ProductSwitchItemTemplate, - dependencies: [Icon], }) /** * Fired when the `ui5-product-switch-item` is activated either with a diff --git a/packages/fiori/src/SideNavigation.ts b/packages/fiori/src/SideNavigation.ts index 02636e11387d..d5c9301d43e6 100644 --- a/packages/fiori/src/SideNavigation.ts +++ b/packages/fiori/src/SideNavigation.ts @@ -2,9 +2,8 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import jsxRender from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; -import ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js"; -import NavigationMenu from "@ui5/webcomponents/dist/NavigationMenu.js"; -import NavigationMenuItem from "@ui5/webcomponents/dist/NavigationMenuItem.js"; +import type ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js"; +import type NavigationMenu from "@ui5/webcomponents/dist/NavigationMenu.js"; import type { MenuItemClickEventDetail } from "@ui5/webcomponents/dist/Menu.js"; import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; @@ -27,9 +26,10 @@ import type SideNavigationItemBase from "./SideNavigationItemBase.js"; import { isInstanceOfSideNavigationSelectableItemBase } from "./SideNavigationSelectableItemBase.js"; import { isInstanceOfSideNavigationItemBase } from "./SideNavigationItemBase.js"; import type SideNavigationSelectableItemBase from "./SideNavigationSelectableItemBase.js"; -import SideNavigationItem, { isInstanceOfSideNavigationItem } from "./SideNavigationItem.js"; -import SideNavigationSubItem from "./SideNavigationSubItem.js"; -import SideNavigationGroup from "./SideNavigationGroup.js"; +import { isInstanceOfSideNavigationItem } from "./SideNavigationItem.js"; +import type SideNavigationItem from "./SideNavigationItem.js"; +import type SideNavigationSubItem from "./SideNavigationSubItem.js"; +import type SideNavigationGroup from "./SideNavigationGroup.js"; import SideNavigationTemplate from "./SideNavigationTemplate.js"; import { @@ -115,14 +115,6 @@ type NavigationMenuClickEventDetail = MenuItemClickEventDetail & { renderer: jsxRender, template: SideNavigationTemplate, styles: [SideNavigationCss, SideNavigationPopoverCss], - dependencies: [ - ResponsivePopover, - SideNavigationGroup, - SideNavigationItem, - SideNavigationSubItem, - NavigationMenu, - NavigationMenuItem, - ], }) /** * Fired when the selection has changed via user interaction diff --git a/packages/fiori/src/SideNavigationGroup.ts b/packages/fiori/src/SideNavigationGroup.ts index 08bfae7120f8..07cbc2ef3805 100644 --- a/packages/fiori/src/SideNavigationGroup.ts +++ b/packages/fiori/src/SideNavigationGroup.ts @@ -8,7 +8,6 @@ import { } from "@ui5/webcomponents-base/dist/Keys.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; -import Icon from "@ui5/webcomponents/dist/Icon.js"; import SideNavigationItemBase from "./SideNavigationItemBase.js"; import type SideNavigationSelectableItemBase from "./SideNavigationSelectableItemBase.js"; import type SideNavigationItem from "./SideNavigationItem.js"; @@ -44,9 +43,6 @@ import SideNavigationGroupCss from "./generated/themes/SideNavigationGroup.css.j renderer: jsxRender, template: SideNavigationGroupTemplate, styles: SideNavigationGroupCss, - dependencies: [ - Icon, - ], }) class SideNavigationGroup extends SideNavigationItemBase { /** diff --git a/packages/fiori/src/SideNavigationItem.ts b/packages/fiori/src/SideNavigationItem.ts index e30b7983041e..1d2c63cfd83c 100644 --- a/packages/fiori/src/SideNavigationItem.ts +++ b/packages/fiori/src/SideNavigationItem.ts @@ -3,7 +3,6 @@ import jsxRender from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; import { isLeft, isRight } from "@ui5/webcomponents-base/dist/Keys.js"; -import Icon from "@ui5/webcomponents/dist/Icon.js"; import type SideNavigationItemBase from "./SideNavigationItemBase.js"; import SideNavigationSelectableItemBase from "./SideNavigationSelectableItemBase.js"; import type SideNavigation from "./SideNavigation.js"; @@ -36,9 +35,6 @@ import SideNavigationItemCss from "./generated/themes/SideNavigationItem.css.js" renderer: jsxRender, template: SideNavigationItemTemplate, styles: SideNavigationItemCss, - dependencies: [ - Icon, - ], }) class SideNavigationItem extends SideNavigationSelectableItemBase { /** diff --git a/packages/fiori/src/SideNavigationSubItem.ts b/packages/fiori/src/SideNavigationSubItem.ts index b32863bf2bfa..e70535864a07 100644 --- a/packages/fiori/src/SideNavigationSubItem.ts +++ b/packages/fiori/src/SideNavigationSubItem.ts @@ -1,6 +1,5 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import jsxRender from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; -import Icon from "@ui5/webcomponents/dist/Icon.js"; import SideNavigationSelectableItemBase from "./SideNavigationSelectableItemBase.js"; import SideNavigationSubItemTemplate from "./SideNavigationSubItemTemplate.js"; @@ -29,9 +28,6 @@ import SideNavigationSubItemCss from "./generated/themes/SideNavigationSubItem.c renderer: jsxRender, template: SideNavigationSubItemTemplate, styles: SideNavigationSubItemCss, - dependencies: [ - Icon, - ], }) class SideNavigationSubItem extends SideNavigationSelectableItemBase { _onkeydown(e: KeyboardEvent) { diff --git a/packages/fiori/src/Timeline.ts b/packages/fiori/src/Timeline.ts index e8fc776e9a60..2e56e7f71fda 100644 --- a/packages/fiori/src/Timeline.ts +++ b/packages/fiori/src/Timeline.ts @@ -15,8 +15,6 @@ import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js"; import { TIMELINE_ARIA_LABEL } from "./generated/i18n/i18n-defaults.js"; import TimelineTemplate from "./TimelineTemplate.js"; -import TimelineItem from "./TimelineItem.js"; -import TimelineGroupItem from "./TimelineGroupItem.js"; // Styles import TimelineCss from "./generated/themes/Timeline.css.js"; @@ -65,7 +63,6 @@ const LARGE_LINE_WIDTH = "LargeLineWidth"; renderer: jsxRenderer, styles: TimelineCss, template: TimelineTemplate, - dependencies: [TimelineItem, TimelineGroupItem], }) class Timeline extends UI5Element { /** diff --git a/packages/fiori/src/TimelineGroupItem.ts b/packages/fiori/src/TimelineGroupItem.ts index 1f469706f5c9..b73bced44a6f 100644 --- a/packages/fiori/src/TimelineGroupItem.ts +++ b/packages/fiori/src/TimelineGroupItem.ts @@ -4,9 +4,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; -import ToggleButton from "@ui5/webcomponents/dist/ToggleButton.js"; import TimelineLayout from "./types/TimelineLayout.js"; -import TimelineItem from "./TimelineItem.js"; import type { ITimelineItem } from "./Timeline.js"; import TimelineGroupItemTemplate from "./TimelineGroupItemTemplate.js"; @@ -38,7 +36,6 @@ const LARGE_LINE_WIDTH = "LargeLineWidth"; renderer: jsxRenderer, styles: TimelineGroupItemCss, template: TimelineGroupItemTemplate, - dependencies: [TimelineItem, ToggleButton], }) /** * Fired when the group item is expanded or collapsed. diff --git a/packages/fiori/src/TimelineItem.ts b/packages/fiori/src/TimelineItem.ts index 7474db2ddf72..352e6a683249 100644 --- a/packages/fiori/src/TimelineItem.ts +++ b/packages/fiori/src/TimelineItem.ts @@ -4,8 +4,7 @@ import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; -import Icon from "@ui5/webcomponents/dist/Icon.js"; -import Link from "@ui5/webcomponents/dist/Link.js"; +import type Link from "@ui5/webcomponents/dist/Link.js"; import type { ITimelineItem } from "./Timeline.js"; import TimelineItemTemplate from "./TimelineItemTemplate.js"; import type TimelineLayout from "./types/TimelineLayout.js"; @@ -28,10 +27,6 @@ import TimelineItemCss from "./generated/themes/TimelineItem.css.js"; renderer: jsxRenderer, styles: TimelineItemCss, template: TimelineItemTemplate, - dependencies: [ - Icon, - Link, - ], }) /** * Fired when the item name is pressed either with a diff --git a/packages/fiori/src/UploadCollection.ts b/packages/fiori/src/UploadCollection.ts index f902021e55d9..892ed6c403ab 100644 --- a/packages/fiori/src/UploadCollection.ts +++ b/packages/fiori/src/UploadCollection.ts @@ -6,13 +6,7 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; -import Icon from "@ui5/webcomponents/dist/Icon.js"; -import Label from "@ui5/webcomponents/dist/Label.js"; -import List from "@ui5/webcomponents/dist/List.js"; -import ListItemCustom from "@ui5/webcomponents/dist/ListItemCustom.js"; import type { ListSelectionChangeEventDetail } from "@ui5/webcomponents/dist/List.js"; -import Title from "@ui5/webcomponents/dist/Title.js"; -import IllustratedMessage from "./IllustratedMessage.js"; import "./illustrations/Tent.js"; import type UploadCollectionItem from "./UploadCollectionItem.js"; import "@ui5/webcomponents-icons/dist/document.js"; @@ -68,14 +62,6 @@ type UploadCollectionItemDeleteEventDetail = { renderer: jsxRenderer, styles: UploadCollectionCss, template: UploadCollectionTemplate, - dependencies: [ - Icon, - Label, - List, - ListItemCustom, - Title, - IllustratedMessage, - ], }) /** * Fired when an element is dropped inside the drag and drop overlay. diff --git a/packages/fiori/src/UploadCollectionItem.ts b/packages/fiori/src/UploadCollectionItem.ts index 6ed9a70385a8..096e463e3fac 100644 --- a/packages/fiori/src/UploadCollectionItem.ts +++ b/packages/fiori/src/UploadCollectionItem.ts @@ -7,11 +7,8 @@ import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js"; import ListItemType from "@ui5/webcomponents/dist/types/ListItemType.js"; -import Button from "@ui5/webcomponents/dist/Button.js"; -import Input from "@ui5/webcomponents/dist/Input.js"; -import Label from "@ui5/webcomponents/dist/Label.js"; -import Link from "@ui5/webcomponents/dist/Link.js"; -import ProgressIndicator from "@ui5/webcomponents/dist/ProgressIndicator.js"; +import type Button from "@ui5/webcomponents/dist/Button.js"; +import type Input from "@ui5/webcomponents/dist/Input.js"; import ListItem from "@ui5/webcomponents/dist/ListItem.js"; import getFileExtension from "@ui5/webcomponents-base/dist/util/getFileExtension.js"; import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js"; @@ -63,14 +60,6 @@ import UploadCollectionItemCss from "./generated/themes/UploadCollectionItem.css renderer: jsxRenderer, styles: [ListItem.styles, UploadCollectionItemCss], template: UploadCollectionItemTemplate, - dependencies: [ - ...ListItem.dependencies, - Button, - Input, - Link, - Label, - ProgressIndicator, - ], }) /** diff --git a/packages/fiori/src/UserMenu.ts b/packages/fiori/src/UserMenu.ts index 5a076bd6ba38..5d56aede2716 100644 --- a/packages/fiori/src/UserMenu.ts +++ b/packages/fiori/src/UserMenu.ts @@ -5,20 +5,11 @@ import { import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import query from "@ui5/webcomponents-base/dist/decorators/query.js"; import DOMReferenceConverter from "@ui5/webcomponents-base/dist/converters/DOMReference.js"; -import Avatar from "@ui5/webcomponents/dist/Avatar.js"; -import Title from "@ui5/webcomponents/dist/Title.js"; -import Text from "@ui5/webcomponents/dist/Text.js"; -import Button from "@ui5/webcomponents/dist/Button.js"; -import Label from "@ui5/webcomponents/dist/Label.js"; -import Panel from "@ui5/webcomponents/dist/Panel.js"; -import Icon from "@ui5/webcomponents/dist/Icon.js"; -import Bar from "@ui5/webcomponents/dist/Bar.js"; -import List from "@ui5/webcomponents/dist/List.js"; +import type Title from "@ui5/webcomponents/dist/Title.js"; +import type Button from "@ui5/webcomponents/dist/Button.js"; import type { ListItemClickEventDetail } from "@ui5/webcomponents/dist/List.js"; -import ListItemCustom from "@ui5/webcomponents/dist/ListItemCustom.js"; import type ListItemBase from "@ui5/webcomponents/dist/ListItemBase.js"; -import Tag from "@ui5/webcomponents/dist/Tag.js"; -import ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js"; +import type ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import { isPhone } from "@ui5/webcomponents-base/dist/Device.js"; @@ -73,20 +64,6 @@ type UserMenuOtherAccountClickEventDetail = { renderer: jsxRenderer, template: UserMenuTemplate, styles: [UserMenuCss], - dependencies: [ - ResponsivePopover, - Avatar, - Title, - Text, - Label, - Button, - Panel, - Icon, - Bar, - List, - ListItemCustom, - Tag, - ], }) /** diff --git a/packages/fiori/src/UserMenuItem.ts b/packages/fiori/src/UserMenuItem.ts index 94a89d39ab61..655cd54087e5 100644 --- a/packages/fiori/src/UserMenuItem.ts +++ b/packages/fiori/src/UserMenuItem.ts @@ -33,7 +33,6 @@ import userMenuItemCss from "./generated/themes/UserMenuItem.css.js"; tag: "ui5-user-menu-item", template: UserMenuItemTemplate, styles: [MenuItem.styles, userMenuItemCss], - dependencies: [...MenuItem.dependencies], }) class UserMenuItem extends MenuItem { /** diff --git a/packages/fiori/src/ViewSettingsDialog.ts b/packages/fiori/src/ViewSettingsDialog.ts index 5285b35398dd..0ceca40128b5 100644 --- a/packages/fiori/src/ViewSettingsDialog.ts +++ b/packages/fiori/src/ViewSettingsDialog.ts @@ -8,16 +8,9 @@ import { isPhone } from "@ui5/webcomponents-base/dist/Device.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import type { ChangeInfo } from "@ui5/webcomponents-base/dist/UI5Element.js"; -import Dialog from "@ui5/webcomponents/dist/Dialog.js"; -import Button from "@ui5/webcomponents/dist/Button.js"; -import Label from "@ui5/webcomponents/dist/Label.js"; -import ListItemGroup from "@ui5/webcomponents/dist/ListItemGroup.js"; -import List from "@ui5/webcomponents/dist/List.js"; +import type Dialog from "@ui5/webcomponents/dist/Dialog.js"; +import type List from "@ui5/webcomponents/dist/List.js"; import type { ListItemClickEventDetail } from "@ui5/webcomponents/dist/List.js"; -import ListItemStandard from "@ui5/webcomponents/dist/ListItemStandard.js"; -import Title from "@ui5/webcomponents/dist/Title.js"; -import SegmentedButton from "@ui5/webcomponents/dist/SegmentedButton.js"; -import SegmentedButtonItem from "@ui5/webcomponents/dist/SegmentedButtonItem.js"; import ViewSettingsDialogMode from "./types/ViewSettingsDialogMode.js"; import "@ui5/webcomponents-icons/dist/sort.js"; @@ -107,17 +100,6 @@ type VSDInternalSettings = { renderer: jsxRenderer, styles: viewSettingsDialogCSS, template: ViewSettingsDialogTemplate, - dependencies: [ - Button, - Title, - Dialog, - Label, - List, - ListItemStandard, - ListItemGroup, - SegmentedButton, - SegmentedButtonItem, - ], }) /** diff --git a/packages/fiori/src/Wizard.ts b/packages/fiori/src/Wizard.ts index 96df0f59e7bc..60560ed3c114 100644 --- a/packages/fiori/src/Wizard.ts +++ b/packages/fiori/src/Wizard.ts @@ -14,8 +14,7 @@ import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.j import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js"; import debounce from "@ui5/webcomponents-base/dist/util/debounce.js"; import { getFirstFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js"; -import Button from "@ui5/webcomponents/dist/Button.js"; -import ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js"; +import type ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js"; import type WizardContentLayout from "./types/WizardContentLayout.js"; // Texts @@ -33,8 +32,8 @@ import { } from "./generated/i18n/i18n-defaults.js"; // Step in header and content -import WizardTab from "./WizardTab.js"; -import WizardStep from "./WizardStep.js"; +import type WizardTab from "./WizardTab.js"; +import type WizardStep from "./WizardStep.js"; // Template and Styles import WizardTemplate from "./WizardTemplate.js"; @@ -192,12 +191,6 @@ type StepInfo = { getEffectiveScrollbarStyle(), ], template: WizardTemplate, - dependencies: [ - WizardTab, - WizardStep, - ResponsivePopover, - Button, - ], }) /** diff --git a/packages/fiori/src/WizardTab.ts b/packages/fiori/src/WizardTab.ts index f42a353f0473..784570b03465 100644 --- a/packages/fiori/src/WizardTab.ts +++ b/packages/fiori/src/WizardTab.ts @@ -6,7 +6,6 @@ import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import { isSpace, isEnter, isSpaceShift } from "@ui5/webcomponents-base/dist/Keys.js"; import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js"; import type { AccessibilityAttributes } from "@ui5/webcomponents-base/dist/types.js"; -import Icon from "@ui5/webcomponents/dist/Icon.js"; import WizardTabTemplate from "./WizardTabTemplate.js"; import WizardTabCss from "./generated/themes/WizardTab.css.js"; @@ -34,7 +33,6 @@ type WizardTabAccessibilityAttributes = Pick Date: Thu, 2 Jan 2025 14:32:25 +0200 Subject: [PATCH 02/20] chore: add items for some components --- packages/fiori/src/Timeline.ts | 2 ++ packages/fiori/src/Wizard.ts | 1 + 2 files changed, 3 insertions(+) diff --git a/packages/fiori/src/Timeline.ts b/packages/fiori/src/Timeline.ts index 2e56e7f71fda..28d9a324048e 100644 --- a/packages/fiori/src/Timeline.ts +++ b/packages/fiori/src/Timeline.ts @@ -15,6 +15,8 @@ import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js"; import { TIMELINE_ARIA_LABEL } from "./generated/i18n/i18n-defaults.js"; import TimelineTemplate from "./TimelineTemplate.js"; +import "./TimelineItem.js"; +import "./TimelineGroupItem.js"; // Styles import TimelineCss from "./generated/themes/Timeline.css.js"; diff --git a/packages/fiori/src/Wizard.ts b/packages/fiori/src/Wizard.ts index 60560ed3c114..7277164bed70 100644 --- a/packages/fiori/src/Wizard.ts +++ b/packages/fiori/src/Wizard.ts @@ -16,6 +16,7 @@ import debounce from "@ui5/webcomponents-base/dist/util/debounce.js"; import { getFirstFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js"; import type ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js"; import type WizardContentLayout from "./types/WizardContentLayout.js"; +import "./WizardStep.js"; // Texts import { From 316fcf01f0bdd2d759f897ec640edd7387447061 Mon Sep 17 00:00:00 2001 From: Vladislav Tasev Date: Thu, 2 Jan 2025 14:43:22 +0200 Subject: [PATCH 03/20] chore: the SideNavigationGroup added to bundle --- packages/fiori/README.md | 1 + packages/fiori/src/bundle.esm.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/fiori/README.md b/packages/fiori/README.md index 03b70a85a879..3cc40105e53a 100644 --- a/packages/fiori/README.md +++ b/packages/fiori/README.md @@ -27,6 +27,7 @@ such as a common header (ShellBar). | Side Navigation | `ui5-side-navigation` | `import "@ui5/webcomponents-fiori/dist/SideNavigation.js";` | | Side Navigation Item | `ui5-side-navigation-item` | `import "@ui5/webcomponents-fiori/dist/SideNavigationItem.js";` | | Side Navigation Sub Item | `ui5-side-navigation-sub-item` | `import "@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js";` | +| Side Navigation Group | `ui5-side-navigation-group` | `import "@ui5/webcomponents-fiori/dist/SideNavigationGroup.js";` | | Timeline | `ui5-timeline` | `import "@ui5/webcomponents-fiori/dist/Timeline.js";` | | Timeline Item | `ui5-timeline-item` | comes with `ui5-timeline` | | Upload Collection | `ui5-upload-collection` | `import "@ui5/webcomponents-fiori/dist/UploadCollection.js";` | diff --git a/packages/fiori/src/bundle.esm.ts b/packages/fiori/src/bundle.esm.ts index 0706e94ff785..44fbc5c75406 100644 --- a/packages/fiori/src/bundle.esm.ts +++ b/packages/fiori/src/bundle.esm.ts @@ -32,6 +32,7 @@ import ShellBarItem from "./ShellBarItem.js"; import SideNavigation from "./SideNavigation.js"; import SideNavigationItem from "./SideNavigationItem.js"; import SideNavigationSubItem from "./SideNavigationSubItem.js"; +import SideNavigationGroup from "./SideNavigationGroup.js"; import SortItem from "./SortItem.js"; import Timeline from "./Timeline.js"; import NavigationLayout from "./NavigationLayout.js"; From 3e28a08cb26a4adb082470d6b69d0b589ac77cd4 Mon Sep 17 00:00:00 2001 From: Vladislav Tasev Date: Thu, 2 Jan 2025 14:59:29 +0200 Subject: [PATCH 04/20] chore: fix bad test --- packages/main/test/specs/DateRangePicker.spec.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/main/test/specs/DateRangePicker.spec.js b/packages/main/test/specs/DateRangePicker.spec.js index 78aee31cf379..c68ce2c4757b 100644 --- a/packages/main/test/specs/DateRangePicker.spec.js +++ b/packages/main/test/specs/DateRangePicker.spec.js @@ -350,9 +350,9 @@ describe("DateRangePicker general interaction", () => { const yearPicker = await browser.$(`#daterange-picker10`).shadow$(`ui5-calendar`).shadow$(`ui5-yearpicker`); const years = await yearPicker.shadow$(`.ui5-yp-root`).$$("div > .ui5-yp-item"); - const startSelectionYear = await years[10]; - const yearInBetween = await years[12]; - const endSelectionYear = await years[14]; + const startSelectionYear = years[9]; + const yearInBetween = years[11]; + const endSelectionYear = years[13]; assert.ok((await startSelectionYear.getAttribute("class")).includes("ui5-yp-item--selected"), "The start year has the correct selection class"); assert.ok((await yearInBetween.getAttribute("class")).includes("ui5-yp-item--selected-between"), "The in-between year has the correct selection class"); From 895109834559d065569252c984bb5ccb0baf1d66 Mon Sep 17 00:00:00 2001 From: Vladislav Tasev Date: Thu, 2 Jan 2025 15:18:28 +0200 Subject: [PATCH 05/20] chore: compat --- packages/compat/src/Table.ts | 3 --- packages/compat/src/TableGroupRow.ts | 4 ---- packages/compat/src/TableRow.ts | 2 -- 3 files changed, 9 deletions(-) diff --git a/packages/compat/src/Table.ts b/packages/compat/src/Table.ts index b3bc5fff3e02..11cdd41449e8 100644 --- a/packages/compat/src/Table.ts +++ b/packages/compat/src/Table.ts @@ -32,8 +32,6 @@ import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement import { getLastTabbableElement, getTabbableElements } from "@ui5/webcomponents-base/dist/util/TabbableElements.js"; import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js"; import debounce from "@ui5/webcomponents-base/dist/util/debounce.js"; -import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js"; -import CheckBox from "@ui5/webcomponents/dist/CheckBox.js"; import TableGrowingMode from "./types/TableGrowingMode.js"; import type { TableRowClickEventDetail, @@ -176,7 +174,6 @@ enum TableFocusTargetElement { styles: tableStyles, renderer: jsxRenderer, template: TableTemplate, - dependencies: [BusyIndicator, CheckBox], }) /** Fired when a row in `Active` mode is clicked or `Enter` key is pressed. * @param {HTMLElement} row the activated row. diff --git a/packages/compat/src/TableGroupRow.ts b/packages/compat/src/TableGroupRow.ts index 4ff4dac22b72..f66743dd318b 100644 --- a/packages/compat/src/TableGroupRow.ts +++ b/packages/compat/src/TableGroupRow.ts @@ -5,7 +5,6 @@ import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; -import CheckBox from "@ui5/webcomponents/dist/CheckBox.js"; import type { ITableRow, TableColumnInfo } from "./Table.js"; import TableGroupRowTemplate from "./TableGroupRowTemplate.js"; import TableMode from "./types/TableMode.js"; @@ -39,9 +38,6 @@ import tableGroupRowStyles from "./generated/themes/TableGroupRow.css.js"; styles: tableGroupRowStyles, renderer: jsxRenderer, template: TableGroupRowTemplate, - dependencies: [ - CheckBox, - ], }) @event("_focused", { bubbles: true, diff --git a/packages/compat/src/TableRow.ts b/packages/compat/src/TableRow.ts index ae72126d29a1..ded01076b7be 100644 --- a/packages/compat/src/TableRow.ts +++ b/packages/compat/src/TableRow.ts @@ -15,7 +15,6 @@ import { } from "@ui5/webcomponents-base/dist/Keys.js"; import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js"; import { getLastTabbableElement } from "@ui5/webcomponents-base/dist/util/TabbableElements.js"; -import CheckBox from "@ui5/webcomponents/dist/CheckBox.js"; import type TableCell from "./TableCell.js"; import type { ITableRow, TableColumnInfo } from "./Table.js"; import TableMode from "./types/TableMode.js"; @@ -69,7 +68,6 @@ type TableRowF7PressEventDetail = { styles: tableRowStyles, renderer: jsxRenderer, template: TableRowTemplate, - dependencies: [CheckBox], }) /** * Fired when a row in `Active` mode is clicked or `Enter` key is pressed. From ab3874462b9af42ed9136baef5743530c21d12cd Mon Sep 17 00:00:00 2001 From: Vladislav Tasev Date: Thu, 2 Jan 2025 15:52:52 +0200 Subject: [PATCH 06/20] chore: main pt1 --- packages/main/README.md | 9 ++++-- packages/main/src/Avatar.ts | 3 +- packages/main/src/AvatarGroup.ts | 3 +- packages/main/src/Breadcrumbs.ts | 24 ++++------------ packages/main/src/BusyIndicator.ts | 2 -- packages/main/src/Button.ts | 2 -- packages/main/src/Calendar.ts | 19 ++----------- packages/main/src/CalendarLegend.ts | 4 +-- packages/main/src/Card.ts | 3 -- packages/main/src/Carousel.ts | 7 +---- packages/main/src/CheckBox.ts | 6 ---- packages/main/src/ColorPalettePopover.ts | 12 ++------ packages/main/src/ColorPicker.ts | 10 ++----- packages/main/src/ComboBox.ts | 35 +++++------------------- packages/main/src/DatePicker.ts | 17 ++---------- packages/main/src/DateRangePicker.ts | 2 -- packages/main/src/DateTimePicker.ts | 15 ---------- 17 files changed, 34 insertions(+), 139 deletions(-) diff --git a/packages/main/README.md b/packages/main/README.md index aa17e21471ec..b2b51229627c 100644 --- a/packages/main/README.md +++ b/packages/main/README.md @@ -10,15 +10,18 @@ Provides general purpose UI building blocks such as buttons, labels, inputs and |--------------------------|-----------------------------|------------------------------------------------------------| | Avatar | `ui5-avatar` | `import "@ui5/webcomponents/dist/Avatar.js";` | | Avatar Group | `ui5-avatar-group` | `import "@ui5/webcomponents/dist/AvatarGroup.js";` | -| Tag | `ui5-tag` | `import "@ui5/webcomponents/dist/Tag.js";` | | Bar | `ui5-bar` | `import "@ui5/webcomponents/dist/Bar.js";` | | Breadcrumbs | `ui5-breadcrumbs` | `import "@ui5/webcomponents/dist/Breadcrumbs.js";` | | Breadcrumbs Item | `ui5-breadcrumbs-item` | comes with `ui5-breadcrumbs` | -| Tag | `ui5-tag` | `import "@ui5/webcomponents/dist/Tag.js";` | +| Tag | `ui5-tag` | `import "@ui5/webcomponents/dist/Tag.js";` | | Busy Indicator | `ui5-busy-indicator` | `import "@ui5/webcomponents/dist/BusyIndicator.js";` | | Button | `ui5-button` | `import "@ui5/webcomponents/dist/Button.js";` | | Calendar | `ui5-calendar` | `import "@ui5/webcomponents/dist/Calendar.js";` | -| Calendar Date | `ui5-calendar-date` | comes with `ui5-calendar` | +| Calendar Date | `ui5-date` | comes with `ui5-calendar` | +| Calendar Date Range | `ui5-date-range` | comes with `ui5-calendar` | +| Calendar Special Date | `ui5-date-special` | comes with `ui5-calendar` | +| Calendar Legend | `ui5-calendar-legend` | `import "@ui5/webcomponents/dist/CalendarLegend.js";` | +| Calendar Legend Item | `ui5-calendar-legend-item` | comes with `ui5-calendar-legend` | | Card | `ui5-card` | `import "@ui5/webcomponents/dist/Card.js";` | | CardHeader | `ui5-card-header` | `import "@ui5/webcomponents/dist/CardHeader.js";` | | Carousel | `ui5-carousel` | `import "@ui5/webcomponents/dist/Carousel.js";` | diff --git a/packages/main/src/Avatar.ts b/packages/main/src/Avatar.ts index af1d7937cf77..7cace21bca6d 100644 --- a/packages/main/src/Avatar.ts +++ b/packages/main/src/Avatar.ts @@ -22,7 +22,7 @@ import { AVATAR_TOOLTIP } from "./generated/i18n/i18n-defaults.js"; // Styles import AvatarCss from "./generated/themes/Avatar.css.js"; -import Icon from "./Icon.js"; +import type Icon from "./Icon.js"; import AvatarSize from "./types/AvatarSize.js"; import type AvatarShape from "./types/AvatarShape.js"; import type AvatarColorScheme from "./types/AvatarColorScheme.js"; @@ -61,7 +61,6 @@ type AvatarAccessibilityAttributes = Pick; renderer: jsxRenderer, styles: AvatarCss, template: AvatarTemplate, - dependencies: [Icon], }) /** * Fired on mouseup, space and enter if avatar is interactive diff --git a/packages/main/src/AvatarGroup.ts b/packages/main/src/AvatarGroup.ts index f3f6df964b08..00c409d4e0b8 100644 --- a/packages/main/src/AvatarGroup.ts +++ b/packages/main/src/AvatarGroup.ts @@ -16,7 +16,7 @@ import { isSpace, } from "@ui5/webcomponents-base/dist/Keys.js"; import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js"; -import Button from "./Button.js"; +import type Button from "./Button.js"; import AvatarSize from "./types/AvatarSize.js"; import AvatarGroupType from "./types/AvatarGroupType.js"; import AvatarColorScheme from "./types/AvatarColorScheme.js"; @@ -148,7 +148,6 @@ type AvatarGroupClickEventDetail = { renderer: jsxRenderer, template: AvatarGroupTemplate, styles: AvatarGroupCss, - dependencies: [Button], }) /** * Fired when the component is activated either with a diff --git a/packages/main/src/Breadcrumbs.ts b/packages/main/src/Breadcrumbs.ts index acbb5e72b384..847e93749b4a 100644 --- a/packages/main/src/Breadcrumbs.ts +++ b/packages/main/src/Breadcrumbs.ts @@ -21,8 +21,10 @@ import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.j import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js"; import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js"; import BreadcrumbsDesign from "./types/BreadcrumbsDesign.js"; +import "./BreadcrumbsItem.js"; +import type BreadcrumbsItem from "./BreadcrumbsItem.js"; import type BreadcrumbsSeparator from "./types/BreadcrumbsSeparator.js"; -import BreadcrumbsItem from "./BreadcrumbsItem.js"; + import { BREADCRUMB_ITEM_POS, BREADCRUMBS_ARIA_LABEL, @@ -30,15 +32,11 @@ import { BREADCRUMBS_CANCEL_BUTTON, FORM_SELECTABLE_AVALIABLE_VALUES, } from "./generated/i18n/i18n-defaults.js"; -import Link from "./Link.js"; +import type Link from "./Link.js"; import type { LinkClickEventDetail } from "./Link.js"; -import Label from "./Label.js"; -import ResponsivePopover from "./ResponsivePopover.js"; -import List from "./List.js"; +import type Label from "./Label.js"; +import type ResponsivePopover from "./ResponsivePopover.js"; import type { ListSelectionChangeEventDetail } from "./List.js"; -import ListItemStandard from "./ListItemStandard.js"; -import Icon from "./Icon.js"; -import Button from "./Button.js"; // Templates import BreadcrumbsTemplate from "./BreadcrumbsTemplate.js"; @@ -95,16 +93,6 @@ type FocusAdaptor = ITabbable & { renderer: jsxRenderer, template: BreadcrumbsTemplate, styles: [breadcrumbsCss, breadcrumbsPopoverCss], - dependencies: [ - BreadcrumbsItem, - Link, - Label, - ResponsivePopover, - List, - ListItemStandard, - Icon, - Button, - ], }) /** * Fires when a `BreadcrumbsItem` is clicked. diff --git a/packages/main/src/BusyIndicator.ts b/packages/main/src/BusyIndicator.ts index 9b3a97a71509..a3887c156728 100644 --- a/packages/main/src/BusyIndicator.ts +++ b/packages/main/src/BusyIndicator.ts @@ -11,7 +11,6 @@ import { } from "@ui5/webcomponents-base/dist/Device.js"; import type BusyIndicatorSize from "./types/BusyIndicatorSize.js"; import BusyIndicatorTextPlacement from "./types/BusyIndicatorTextPlacement.js"; -import Label from "./Label.js"; // Template import BusyIndicatorTemplate from "./BusyIndicatorTemplate.js"; @@ -65,7 +64,6 @@ import busyIndicatorCss from "./generated/themes/BusyIndicator.css.js"; styles: busyIndicatorCss, renderer: jsxRenderer, template: BusyIndicatorTemplate, - dependencies: [Label], }) class BusyIndicator extends UI5Element { /** diff --git a/packages/main/src/Button.ts b/packages/main/src/Button.ts index cf1eecab0831..1eeb5a1c67e3 100644 --- a/packages/main/src/Button.ts +++ b/packages/main/src/Button.ts @@ -30,7 +30,6 @@ import ButtonDesign from "./types/ButtonDesign.js"; import ButtonType from "./types/ButtonType.js"; import type ButtonAccessibleRole from "./types/ButtonAccessibleRole.js"; import ButtonTemplate from "./ButtonTemplate.js"; -import Icon from "./Icon.js"; import { BUTTON_ARIA_TYPE_ACCEPT, BUTTON_ARIA_TYPE_REJECT, BUTTON_ARIA_TYPE_EMPHASIZED } from "./generated/i18n/i18n-defaults.js"; @@ -88,7 +87,6 @@ type ButtonAccessibilityAttributes = Pick Date: Thu, 2 Jan 2025 16:01:40 +0200 Subject: [PATCH 07/20] chore: main pt2 --- packages/main/src/Dialog.ts | 5 ----- packages/main/src/DropIndicator.ts | 1 - packages/main/src/ExpandableText.ts | 11 +---------- packages/main/src/FileUploader.ts | 10 ++-------- packages/main/src/Form.ts | 2 -- packages/main/src/Link.ts | 2 -- packages/main/src/Popup.ts | 4 ---- packages/main/src/bundle.esm.ts | 1 + 8 files changed, 4 insertions(+), 32 deletions(-) diff --git a/packages/main/src/Dialog.ts b/packages/main/src/Dialog.ts index 9875e46bc1a2..902ce8718ed5 100644 --- a/packages/main/src/Dialog.ts +++ b/packages/main/src/Dialog.ts @@ -12,7 +12,6 @@ import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; import toLowercaseEnumValue from "@ui5/webcomponents-base/dist/util/toLowercaseEnumValue.js"; import Popup from "./Popup.js"; -import Icon from "./Icon.js"; import "@ui5/webcomponents-icons/dist/error.js"; import "@ui5/webcomponents-icons/dist/alert.js"; import "@ui5/webcomponents-icons/dist/sys-enter-2.js"; @@ -112,10 +111,6 @@ const ICON_PER_STATE: Record = { dialogCSS, getEffectiveScrollbarStyle(), ], - dependencies: [ - Icon, - ...Popup.dependencies, - ], }) class Dialog extends Popup { eventDetails!: Popup["eventDetails"]; diff --git a/packages/main/src/DropIndicator.ts b/packages/main/src/DropIndicator.ts index fe29c31711d9..caf1f92838ca 100644 --- a/packages/main/src/DropIndicator.ts +++ b/packages/main/src/DropIndicator.ts @@ -30,7 +30,6 @@ import DropIndicatorCss from "./generated/themes/DropIndicator.css.js"; renderer: jsxRenderer, styles: DropIndicatorCss, template: DropIndicatorTemplate, - dependencies: [], }) class DropIndicator extends UI5Element { /** diff --git a/packages/main/src/ExpandableText.ts b/packages/main/src/ExpandableText.ts index ae90c3009eb0..73cd35cab673 100644 --- a/packages/main/src/ExpandableText.ts +++ b/packages/main/src/ExpandableText.ts @@ -5,11 +5,8 @@ import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import jsxRender from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; import { isPhone } from "@ui5/webcomponents-base/dist/Device.js"; -import Text from "./Text.js"; -import Link from "./Link.js"; import type { LinkAccessibilityAttributes } from "./Link.js"; -import ResponsivePopover from "./ResponsivePopover.js"; -import Button from "./Button.js"; +import type ResponsivePopover from "./ResponsivePopover.js"; import ExpandableTextOverflowMode from "./types/ExpandableTextOverflowMode.js"; import type TextEmptyIndicatorMode from "./types/TextEmptyIndicatorMode.js"; import { @@ -60,12 +57,6 @@ import ExpandableTextCss from "./generated/themes/ExpandableText.css.js"; renderer: jsxRender, styles: ExpandableTextCss, template: ExpandableTextTemplate, - dependencies: [ - Text, - Link, - ResponsivePopover, - Button, - ], }) class ExpandableText extends UI5Element { /** diff --git a/packages/main/src/FileUploader.ts b/packages/main/src/FileUploader.ts index 4f9d9aed9331..c155bb035f15 100644 --- a/packages/main/src/FileUploader.ts +++ b/packages/main/src/FileUploader.ts @@ -18,9 +18,8 @@ import { VALUE_STATE_WARNING, } from "./generated/i18n/i18n-defaults.js"; -import Input from "./Input.js"; -import Popover from "./Popover.js"; -import Icon from "./Icon.js"; +import type Input from "./Input.js"; +import type Popover from "./Popover.js"; // Template import FileUploaderTemplate from "./FileUploaderTemplate.js"; @@ -80,11 +79,6 @@ type FileUploaderChangeEventDetail = { ValueStateMessageCss, ], template: FileUploaderTemplate, - dependencies: [ - Input, - Popover, - Icon, - ], }) /** * Event is fired when the value of the file path has been changed. diff --git a/packages/main/src/Form.ts b/packages/main/src/Form.ts index e583c1605abd..b27497268429 100644 --- a/packages/main/src/Form.ts +++ b/packages/main/src/Form.ts @@ -10,7 +10,6 @@ import FormTemplate from "./FormTemplate.js"; // Styles import FormCss from "./generated/themes/Form.css.js"; -import Title from "./Title.js"; import type FormItemSpacing from "./types/FormItemSpacing.js"; import type FormGroup from "./FormGroup.js"; @@ -206,7 +205,6 @@ type ItemsInfo = { renderer: jsxRenderer, styles: FormCss, template: FormTemplate, - dependencies: [Title], }) class Form extends UI5Element { /** diff --git a/packages/main/src/Link.ts b/packages/main/src/Link.ts index ad6eeeda73c6..bbc25c9079f5 100644 --- a/packages/main/src/Link.ts +++ b/packages/main/src/Link.ts @@ -23,7 +23,6 @@ import { LINK_SUBTLE, LINK_EMPHASIZED } from "./generated/i18n/i18n-defaults.js" // Styles import linkCss from "./generated/themes/Link.css.js"; -import Icon from "./Icon.js"; type LinkClickEventDetail = { altKey: boolean; @@ -80,7 +79,6 @@ type LinkAccessibilityAttributes = Pick Date: Thu, 2 Jan 2025 16:14:47 +0200 Subject: [PATCH 08/20] chore: main pt3 --- packages/main/README.md | 4 +++- packages/main/src/List.ts | 7 +++---- packages/main/src/ListItem.ts | 10 ++-------- packages/main/src/ListItemGroup.ts | 6 ++---- packages/main/src/ListItemStandard.ts | 7 ------- packages/main/src/Menu.ts | 18 ++++-------------- packages/main/src/MenuItem.ts | 6 +----- packages/main/src/MenuSeparator.ts | 4 ---- packages/main/src/MessageStrip.ts | 3 --- packages/main/src/Option.ts | 4 ---- packages/main/src/Panel.ts | 3 --- packages/main/src/ProgressIndicator.ts | 2 -- packages/main/src/RadioButton.ts | 2 -- packages/main/src/RangeSlider.ts | 4 +--- packages/main/src/RatingIndicator.ts | 2 -- packages/main/src/ResponsivePopover.ts | 8 +------- packages/main/src/SegmentedButton.ts | 4 ++-- packages/main/src/SegmentedButtonItem.ts | 3 --- packages/main/src/Slider.ts | 4 +--- 19 files changed, 20 insertions(+), 81 deletions(-) diff --git a/packages/main/README.md b/packages/main/README.md index b2b51229627c..7534d61383bb 100644 --- a/packages/main/README.md +++ b/packages/main/README.md @@ -46,7 +46,9 @@ Provides general purpose UI building blocks such as buttons, labels, inputs and | List - Standard Item | `ui5-li` | `import "@ui5/webcomponents/dist/ListItemStandard.js";` | | List - Custom Item | `ui5-li-custom` | `import "@ui5/webcomponents/dist/ListItemCustom.js";` | | List - Group Item | `ui5-li-group` | `import "@ui5/webcomponents/dist/ListItemGroup.js";` | -| Menu | `ui5-menu ` | `import "@ui5/webcomponents/dist/Menu.js";` | +| Menu | `ui5-menu` | `import "@ui5/webcomponents/dist/Menu.js";` | +| Menu Item | `ui5-menu-item` | comes with `ui5-menu` | +| Menu Separator | `ui5-menu-separator` | comes with `ui5-menu` | | Message Strip | `ui5-message-strip` | `import "@ui5/webcomponents/dist/MessageStrip.js";` | | Multi ComboBox | `ui5-multi-combobox` | `import "@ui5/webcomponents/dist/MultiComboBox.js";` | | Multi ComboBox Item | `ui5-mcb-item` | comes with `ui5-multi-combobox` | diff --git a/packages/main/src/List.ts b/packages/main/src/List.ts index d7e935c9ec47..5b771d00c8b9 100644 --- a/packages/main/src/List.ts +++ b/packages/main/src/List.ts @@ -49,13 +49,12 @@ import type ListItemBase from "./ListItemBase.js"; import type { ListItemBasePressEventDetail, } from "./ListItemBase.js"; -import DropIndicator from "./DropIndicator.js"; +import type DropIndicator from "./DropIndicator.js"; import type ListItem from "./ListItem.js"; import type { SelectionRequestEventDetail, } from "./ListItem.js"; import ListSeparator from "./types/ListSeparator.js"; -import BusyIndicator from "./BusyIndicator.js"; // Template import ListTemplate from "./ListTemplate.js"; @@ -71,7 +70,8 @@ import { } from "./generated/i18n/i18n-defaults.js"; import type CheckBox from "./CheckBox.js"; import type RadioButton from "./RadioButton.js"; -import ListItemGroup, { isInstanceOfListItemGroup } from "./ListItemGroup.js"; +import { isInstanceOfListItemGroup } from "./ListItemGroup.js"; +import type ListItemGroup from "./ListItemGroup.js"; const INFINITE_SCROLL_DEBOUNCE_RATE = 250; // ms @@ -173,7 +173,6 @@ type ListItemClickEventDetail = { listCss, getEffectiveScrollbarStyle(), ], - dependencies: [BusyIndicator, DropIndicator, ListItemGroup], }) /** * Fired when an item is activated, unless the item's `type` property diff --git a/packages/main/src/ListItem.ts b/packages/main/src/ListItem.ts index 6193740e4a89..f12ca5bb46b8 100644 --- a/packages/main/src/ListItem.ts +++ b/packages/main/src/ListItem.ts @@ -17,9 +17,8 @@ import Highlight from "./types/Highlight.js"; import ListItemType from "./types/ListItemType.js"; import ListSelectionMode from "./types/ListSelectionMode.js"; import ListItemBase from "./ListItemBase.js"; -import RadioButton from "./RadioButton.js"; -import CheckBox from "./CheckBox.js"; -import Button from "./Button.js"; +import type RadioButton from "./RadioButton.js"; +import type CheckBox from "./CheckBox.js"; import type { IButton } from "./Button.js"; import { DELETE, @@ -86,11 +85,6 @@ type ListItemAccessibilityAttributes = Pick; renderer: jsxRenderer, template: MessageStripTemplate, styles: messageStripCss, - dependencies: [Icon, Button], }) /** * Fired when the close button is pressed either with a diff --git a/packages/main/src/Option.ts b/packages/main/src/Option.ts index cc569f61f410..128e998099a4 100644 --- a/packages/main/src/Option.ts +++ b/packages/main/src/Option.ts @@ -3,7 +3,6 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import type { IOption } from "./Select.js"; import ListItemBase from "./ListItemBase.js"; -import Icon from "./Icon.js"; // Template import OptionTemplate from "./OptionTemplate.js"; @@ -37,9 +36,6 @@ import listItemAdditionalTextCss from "./generated/themes/ListItemAdditionalText listItemIconCss, optionBaseCss, ], - dependencies: [ - Icon, - ], }) class Option extends ListItemBase implements IOption { eventDetails!: ListItemBase["eventDetails"]; diff --git a/packages/main/src/Panel.ts b/packages/main/src/Panel.ts index 04ee1e172b9c..1f6f2a9e4e7d 100644 --- a/packages/main/src/Panel.ts +++ b/packages/main/src/Panel.ts @@ -11,8 +11,6 @@ import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js"; import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; -import Button from "./Button.js"; -import Icon from "./Icon.js"; import type TitleLevel from "./types/TitleLevel.js"; import type PanelAccessibleRole from "./types/PanelAccessibleRole.js"; import PanelTemplate from "./PanelTemplate.js"; @@ -84,7 +82,6 @@ import panelCss from "./generated/themes/Panel.css.js"; renderer: jsxRenderer, template: PanelTemplate, styles: panelCss, - dependencies: [Button, Icon], }) /** * Fired when the component is expanded/collapsed by user interaction. diff --git a/packages/main/src/ProgressIndicator.ts b/packages/main/src/ProgressIndicator.ts index dd79a60b5e50..5ff2c459dc97 100644 --- a/packages/main/src/ProgressIndicator.ts +++ b/packages/main/src/ProgressIndicator.ts @@ -7,7 +7,6 @@ import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js"; import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; -import Icon from "./Icon.js"; import { VALUE_STATE_ERROR, VALUE_STATE_WARNING, @@ -46,7 +45,6 @@ import ProgressIndicatorCss from "./generated/themes/ProgressIndicator.css.js"; renderer: jsxRenderer, styles: ProgressIndicatorCss, template: ProgressIndicatorTemplate, - dependencies: [Icon], }) class ProgressIndicator extends UI5Element { diff --git a/packages/main/src/RadioButton.ts b/packages/main/src/RadioButton.ts index a9060e356f31..4df2410d4b7a 100644 --- a/packages/main/src/RadioButton.ts +++ b/packages/main/src/RadioButton.ts @@ -17,7 +17,6 @@ import { isUp, isRight, } from "@ui5/webcomponents-base/dist/Keys.js"; -import Label from "./Label.js"; import RadioButtonGroup from "./RadioButtonGroup.js"; import type WrappingType from "./types/WrappingType.js"; @@ -77,7 +76,6 @@ let activeRadio: RadioButton; renderer: jsxRenderer, template: RadioButtonTemplate, styles: radioButtonCss, - dependencies: [Label], }) /** * Fired when the component checked state changes. diff --git a/packages/main/src/RangeSlider.ts b/packages/main/src/RangeSlider.ts index 31718cb19edb..c1ff3ded949a 100644 --- a/packages/main/src/RangeSlider.ts +++ b/packages/main/src/RangeSlider.ts @@ -10,9 +10,8 @@ import { isEnd, } from "@ui5/webcomponents-base/dist/Keys.js"; import SliderBase from "./SliderBase.js"; -import Icon from "./Icon.js"; import RangeSliderTemplate from "./RangeSliderTemplate.js"; -import Input from "./Input.js"; +import type Input from "./Input.js"; // Texts import { @@ -92,7 +91,6 @@ type AffectedValue = "startValue" | "endValue"; languageAware: true, formAssociated: true, template: RangeSliderTemplate, - dependencies: [Icon, Input], styles: [SliderBase.styles, rangeSliderStyles], }) class RangeSlider extends SliderBase implements IFormInputElement { diff --git a/packages/main/src/RatingIndicator.ts b/packages/main/src/RatingIndicator.ts index 997435d355c4..f53a2b36b067 100644 --- a/packages/main/src/RatingIndicator.ts +++ b/packages/main/src/RatingIndicator.ts @@ -23,7 +23,6 @@ import { RATING_INDICATOR_ARIA_DESCRIPTION, } from "./generated/i18n/i18n-defaults.js"; import RatingIndicatorTemplate from "./RatingIndicatorTemplate.js"; -import Icon from "./Icon.js"; // Styles import RatingIndicatorCss from "./generated/themes/RatingIndicator.css.js"; @@ -76,7 +75,6 @@ type Star = { renderer: jsxRenderer, styles: RatingIndicatorCss, template: RatingIndicatorTemplate, - dependencies: [Icon], }) /** * The event is fired when the value changes. diff --git a/packages/main/src/ResponsivePopover.ts b/packages/main/src/ResponsivePopover.ts index ed609a4d6132..79a938bfe00e 100644 --- a/packages/main/src/ResponsivePopover.ts +++ b/packages/main/src/ResponsivePopover.ts @@ -8,8 +8,7 @@ import { RESPONSIVE_POPOVER_CLOSE_DIALOG_BUTTON } from "./generated/i18n/i18n-de import ResponsivePopoverTemplate from "./ResponsivePopoverTemplate.js"; import Popover from "./Popover.js"; -import Dialog from "./Dialog.js"; -import Button from "./Button.js"; +import type Dialog from "./Dialog.js"; // Styles import ResponsivePopoverCss from "./generated/themes/ResponsivePopover.css.js"; @@ -40,11 +39,6 @@ import type { PopupBeforeCloseEventDetail } from "./Popup.js"; tag: "ui5-responsive-popover", styles: [Popover.styles, ResponsivePopoverCss], template: ResponsivePopoverTemplate, - dependencies: [ - ...Popover.dependencies, - Button, - Dialog, - ], }) class ResponsivePopover extends Popover { eventDetails!: Popover["eventDetails"] diff --git a/packages/main/src/SegmentedButton.ts b/packages/main/src/SegmentedButton.ts index 52812a6417db..ea09b55e4d81 100644 --- a/packages/main/src/SegmentedButton.ts +++ b/packages/main/src/SegmentedButton.ts @@ -14,7 +14,8 @@ import { isEnter, } from "@ui5/webcomponents-base/dist/Keys.js"; import { SEGMENTEDBUTTON_ARIA_DESCRIPTION, SEGMENTEDBUTTON_ARIA_DESCRIBEDBY } from "./generated/i18n/i18n-defaults.js"; -import SegmentedButtonItem from "./SegmentedButtonItem.js"; +import "./SegmentedButtonItem.js"; +import type SegmentedButtonItem from "./SegmentedButtonItem.js"; import SegmentedButtonSelectionMode from "./types/SegmentedButtonSelectionMode.js"; // Template @@ -60,7 +61,6 @@ type SegmentedButtonSelectionChangeEventDetail = { renderer: jsxRenderer, template: SegmentedButtonTemplate, styles: SegmentedButtonCss, - dependencies: [SegmentedButtonItem], }) /** * Fired when the selected item changes. diff --git a/packages/main/src/SegmentedButtonItem.ts b/packages/main/src/SegmentedButtonItem.ts index ed40769d9eb3..edf93a1a3d06 100644 --- a/packages/main/src/SegmentedButtonItem.ts +++ b/packages/main/src/SegmentedButtonItem.ts @@ -15,8 +15,6 @@ import type { ISegmentedButtonItem } from "./SegmentedButton.js"; import SegmentedButtonItemTemplate from "./SegmentedButtonItemTemplate.js"; import type { IButton } from "./Button.js"; -import Icon from "./Icon.js"; - import segmentedButtonItemCss from "./generated/themes/SegmentedButtonItem.css.js"; /** * @class @@ -44,7 +42,6 @@ import segmentedButtonItemCss from "./generated/themes/SegmentedButtonItem.css.j renderer: jsxRenderer, template: SegmentedButtonItemTemplate, styles: segmentedButtonItemCss, - dependencies: [Icon], }) class SegmentedButtonItem extends UI5Element implements IButton, ISegmentedButtonItem { /** diff --git a/packages/main/src/Slider.ts b/packages/main/src/Slider.ts index e3048e58a640..284bb0ae14b9 100644 --- a/packages/main/src/Slider.ts +++ b/packages/main/src/Slider.ts @@ -6,8 +6,7 @@ import { isEscape } from "@ui5/webcomponents-base/dist/Keys.js"; import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js"; import type ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js"; import SliderBase from "./SliderBase.js"; -import Icon from "./Icon.js"; -import Input from "./Input.js"; +import type Input from "./Input.js"; // Template import SliderTemplate from "./SliderTemplate.js"; @@ -78,7 +77,6 @@ import { languageAware: true, formAssociated: true, template: SliderTemplate, - dependencies: [Icon, Input], }) class Slider extends SliderBase implements IFormInputElement { /** From 70a237b8d2355f2c3b445772d5c88dfa8cbeefc0 Mon Sep 17 00:00:00 2001 From: Vladislav Tasev Date: Thu, 2 Jan 2025 16:22:01 +0200 Subject: [PATCH 09/20] chore: main pt4 --- packages/main/README.md | 1 + packages/main/src/SplitButton.ts | 3 +-- packages/main/src/StepInput.ts | 7 +------ packages/main/src/Switch.ts | 2 -- packages/main/src/Tab.ts | 9 +-------- packages/main/src/TabContainer.ts | 18 ++++-------------- packages/main/src/Tag.ts | 4 ---- packages/main/src/TextArea.ts | 4 +--- packages/main/src/TimePicker.ts | 20 ++++---------------- packages/main/src/TimeSelectionClocks.ts | 12 ++---------- packages/main/src/TimeSelectionInputs.ts | 9 +-------- packages/main/src/Token.ts | 2 -- packages/main/src/Tokenizer.ts | 16 ++-------------- packages/main/src/ToolbarButton.ts | 2 -- packages/main/src/ToolbarSelect.ts | 3 --- packages/main/src/Tree.ts | 14 ++++---------- packages/main/src/TreeItemBase.ts | 5 ----- 17 files changed, 22 insertions(+), 109 deletions(-) diff --git a/packages/main/README.md b/packages/main/README.md index 7534d61383bb..f146c8b662f3 100644 --- a/packages/main/README.md +++ b/packages/main/README.md @@ -81,6 +81,7 @@ Provides general purpose UI building blocks such as buttons, labels, inputs and | Token | `ui5-token` | comes with `ui5-multi-input` | | Tree | `ui5-tree` | `import "@ui5/webcomponents/dist/Tree.js";` | | Tree Item | `ui5-tree-item` | comes with `ui5-tree` | +| Tree Item Custom | `ui5-tree-item-custom` | comes with `ui5-tree` | ## Provided assets diff --git a/packages/main/src/SplitButton.ts b/packages/main/src/SplitButton.ts index 3053020f3d69..f71c1cc0aab2 100644 --- a/packages/main/src/SplitButton.ts +++ b/packages/main/src/SplitButton.ts @@ -21,7 +21,7 @@ import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; import type ButtonDesign from "./types/ButtonDesign.js"; -import Button from "./Button.js"; +import type Button from "./Button.js"; import { SPLIT_BUTTON_DESCRIPTION, @@ -84,7 +84,6 @@ import SplitButtonCss from "./generated/themes/SplitButton.css.js"; renderer: jsxRenderer, styles: SplitButtonCss, template: SplitButtonTemplate, - dependencies: [Button], }) /** * Fired when the user clicks on the default action. diff --git a/packages/main/src/StepInput.ts b/packages/main/src/StepInput.ts index 19b394696016..86bf1773fc7d 100644 --- a/packages/main/src/StepInput.ts +++ b/packages/main/src/StepInput.ts @@ -29,8 +29,7 @@ import { STEPINPUT_DEC_ICON_TITLE, STEPINPUT_INC_ICON_TITLE } from "./generated/ import "@ui5/webcomponents-icons/dist/less.js"; import "@ui5/webcomponents-icons/dist/add.js"; -import Icon from "./Icon.js"; -import Input from "./Input.js"; +import type Input from "./Input.js"; import type { InputAccInfo, InputEventDetail } from "./Input.js"; import InputType from "./types/InputType.js"; @@ -95,10 +94,6 @@ type StepInputValueStateChangeEventDetail = { renderer: jsxRenderer, styles: StepInputCss, template: StepInputTemplate, - dependencies: [ - Icon, - Input, - ], }) /** * Fired when the input operation has finished by pressing Enter or on focusout. diff --git a/packages/main/src/Switch.ts b/packages/main/src/Switch.ts index d35f7f386c49..56fdcd221da8 100644 --- a/packages/main/src/Switch.ts +++ b/packages/main/src/Switch.ts @@ -11,7 +11,6 @@ import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/Acc import "@ui5/webcomponents-icons/dist/accept.js"; import "@ui5/webcomponents-icons/dist/decline.js"; import "@ui5/webcomponents-icons/dist/less.js"; -import Icon from "./Icon.js"; import SwitchDesign from "./types/SwitchDesign.js"; import { FORM_CHECKABLE_REQUIRED } from "./generated/i18n/i18n-defaults.js"; @@ -56,7 +55,6 @@ import switchCss from "./generated/themes/Switch.css.js"; styles: switchCss, renderer: jsxRenderer, template: SwitchTemplate, - dependencies: [Icon], shadowRootOptions: { delegatesFocus: true }, }) /** diff --git a/packages/main/src/Tab.ts b/packages/main/src/Tab.ts index fc5b2086e46d..55789673bb2f 100644 --- a/packages/main/src/Tab.ts +++ b/packages/main/src/Tab.ts @@ -26,9 +26,7 @@ import SemanticColor from "./types/SemanticColor.js"; import ListItemType from "./types/ListItemType.js"; import TabContainer from "./TabContainer.js"; import type { TabContainerStripInfo, TabContainerOverflowInfo, ITab } from "./TabContainer.js"; -import Icon from "./Icon.js"; -import Button from "./Button.js"; -import ListItemCustom from "./ListItemCustom.js"; +import type ListItemCustom from "./ListItemCustom.js"; // Templates import TabTemplate from "./TabTemplate.js"; @@ -73,11 +71,6 @@ interface TabInOverflow extends ListItemCustom { renderer: jsxRenderer, template: TabTemplate, styles: css, - dependencies: [ - Icon, - Button, - ListItemCustom, - ], }) class Tab extends UI5Element implements ITabbable, ITab { /** diff --git a/packages/main/src/TabContainer.ts b/packages/main/src/TabContainer.ts index c0b057aac999..2bf0653238cf 100644 --- a/packages/main/src/TabContainer.ts +++ b/packages/main/src/TabContainer.ts @@ -45,16 +45,14 @@ import { TABCONTAINER_POPOVER_CANCEL_BUTTON, TABCONTAINER_SUBTABS_DESCRIPTION, } from "./generated/i18n/i18n-defaults.js"; -import Button from "./Button.js"; -import Icon from "./Icon.js"; -import List from "./List.js"; -import DropIndicator from "./DropIndicator.js"; +import type Button from "./Button.js"; +import type List from "./List.js"; +import type DropIndicator from "./DropIndicator.js"; import type Tab from "./Tab.js"; import type { TabInStrip, TabInOverflow } from "./Tab.js"; import type { TabSeparatorInOverflow, TabSeparatorInStrip } from "./TabSeparator.js"; import type { ListItemClickEventDetail, ListMoveEventDetail } from "./List.js"; -import ListItemCustom from "./ListItemCustom.js"; -import ResponsivePopover from "./ResponsivePopover.js"; +import type ResponsivePopover from "./ResponsivePopover.js"; import TabContainerTabsPlacement from "./types/TabContainerTabsPlacement.js"; import SemanticColor from "./types/SemanticColor.js"; import type BackgroundDesign from "./types/BackgroundDesign.js"; @@ -169,14 +167,6 @@ interface ITab extends UI5Element { ], renderer: jsxRenderer, template: TabContainerTemplate, - dependencies: [ - Button, - Icon, - List, - ResponsivePopover, - DropIndicator, - ListItemCustom, - ], }) /** * Fired when a tab is selected. diff --git a/packages/main/src/Tag.ts b/packages/main/src/Tag.ts index ccc7dc95f3c8..d5469bb1f9dd 100644 --- a/packages/main/src/Tag.ts +++ b/packages/main/src/Tag.ts @@ -11,7 +11,6 @@ import { isDesktop, } from "@ui5/webcomponents-base/dist/Device.js"; import type { IIcon } from "./Icon.js"; -import Icon from "./Icon.js"; import "@ui5/webcomponents-icons/dist/sys-help-2.js"; import "@ui5/webcomponents-icons/dist/sys-enter-2.js"; import "@ui5/webcomponents-icons/dist/error.js"; @@ -63,9 +62,6 @@ import tagCss from "./generated/themes/Tag.css.js"; renderer: jsxRenderer, template: TagTemplate, styles: tagCss, - dependencies: [ - Icon, - ], }) /** diff --git a/packages/main/src/TextArea.ts b/packages/main/src/TextArea.ts index f0dbd5664fd7..22a8e552beaa 100644 --- a/packages/main/src/TextArea.ts +++ b/packages/main/src/TextArea.ts @@ -13,8 +13,7 @@ import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; import { isEscape } from "@ui5/webcomponents-base/dist/Keys.js"; import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js"; -import Popover from "./Popover.js"; -import Icon from "./Icon.js"; +import type Popover from "./Popover.js"; import type PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js"; import TextAreaTemplate from "./TextAreaTemplate.js"; @@ -78,7 +77,6 @@ type ExceededText = { ], renderer: jsxRenderer, template: TextAreaTemplate, - dependencies: [Popover, Icon], }) /** * Fired when the text has changed and the focus leaves the component. diff --git a/packages/main/src/TimePicker.ts b/packages/main/src/TimePicker.ts index dc382f0926bd..2478a776bece 100644 --- a/packages/main/src/TimePicker.ts +++ b/packages/main/src/TimePicker.ts @@ -31,15 +31,12 @@ import { } from "@ui5/webcomponents-base/dist/Keys.js"; import "@ui5/webcomponents-icons/dist/time-entry-request.js"; import UI5Date from "@ui5/webcomponents-localization/dist/dates/UI5Date.js"; -import Icon from "./Icon.js"; -import Popover from "./Popover.js"; -import ResponsivePopover from "./ResponsivePopover.js"; +import type Popover from "./Popover.js"; +import type ResponsivePopover from "./ResponsivePopover.js"; import TimePickerTemplate from "./TimePickerTemplate.js"; -import Input from "./Input.js"; +import type Input from "./Input.js"; import type { InputAccInfo } from "./Input.js"; -import Button from "./Button.js"; -import TimeSelectionClocks from "./TimeSelectionClocks.js"; -import TimeSelectionInputs from "./TimeSelectionInputs.js"; +import type TimeSelectionInputs from "./TimeSelectionInputs.js"; import type { TimeSelectionChangeEventDetail } from "./TimePickerInternals.js"; import { @@ -137,15 +134,6 @@ type TimePickerInputEventDetail = TimePickerChangeInputEventDetail; ResponsivePopoverCommonCss, TimePickerPopoverCss, ], - dependencies: [ - Icon, - Popover, - ResponsivePopover, - TimeSelectionClocks, - TimeSelectionInputs, - Input, - Button, - ], }) /** * Fired when the input operation has finished by clicking the "OK" button or diff --git a/packages/main/src/TimeSelectionClocks.ts b/packages/main/src/TimeSelectionClocks.ts index d1255bb6b9d3..8e7ecb423f4a 100644 --- a/packages/main/src/TimeSelectionClocks.ts +++ b/packages/main/src/TimeSelectionClocks.ts @@ -21,10 +21,8 @@ import { isColon, } from "@ui5/webcomponents-base/dist/Keys.js"; import TimePickerInternals from "./TimePickerInternals.js"; -import TimePickerClock from "./TimePickerClock.js"; -import ToggleSpinButton from "./ToggleSpinButton.js"; -import SegmentedButton from "./SegmentedButton.js"; -import SegmentedButtonItem from "./SegmentedButtonItem.js"; +import type TimePickerClock from "./TimePickerClock.js"; +import type ToggleSpinButton from "./ToggleSpinButton.js"; import type { TimePickerClockChangeEventDetail } from "./TimePickerClock.js"; // Template @@ -61,12 +59,6 @@ import TimeSelectionClocksCss from "./generated/themes/TimeSelectionClocks.css.j tag: "ui5-time-selection-clocks", styles: TimeSelectionClocksCss, template: TimeSelectionClocksTemplate, - dependencies: [ - TimePickerClock, - ToggleSpinButton, - SegmentedButton, - SegmentedButtonItem, - ], }) class TimeSelectionClocks extends TimePickerInternals { diff --git a/packages/main/src/TimeSelectionInputs.ts b/packages/main/src/TimeSelectionInputs.ts index 9da5ddd6c968..f763c73ae14c 100644 --- a/packages/main/src/TimeSelectionInputs.ts +++ b/packages/main/src/TimeSelectionInputs.ts @@ -7,9 +7,7 @@ import { isNumber, } from "@ui5/webcomponents-base/dist/Keys.js"; import TimePickerInternals from "./TimePickerInternals.js"; -import Input from "./Input.js"; -import SegmentedButton from "./SegmentedButton.js"; -import SegmentedButtonItem from "./SegmentedButtonItem.js"; +import type Input from "./Input.js"; import InputType from "./types/InputType.js"; @@ -46,11 +44,6 @@ import TimeSelectionInputsCss from "./generated/themes/TimeSelectionInputs.css.j tag: "ui5-time-selection-inputs", styles: TimeSelectionInputsCss, template: TimeSelectionInputsTemplate, - dependencies: [ - Input, - SegmentedButton, - SegmentedButtonItem, - ], }) @event("close-inputs", { bubbles: true, diff --git a/packages/main/src/Token.ts b/packages/main/src/Token.ts index 46b6f54e200e..e1c8d9401508 100644 --- a/packages/main/src/Token.ts +++ b/packages/main/src/Token.ts @@ -15,7 +15,6 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import { TOKEN_ARIA_DELETABLE, TOKEN_ARIA_LABEL } from "./generated/i18n/i18n-defaults.js"; -import Icon from "./Icon.js"; import type { IIcon } from "./Icon.js"; import type { IToken } from "./MultiInput.js"; import TokenTemplate from "./TokenTemplate.js"; @@ -50,7 +49,6 @@ type TokenDeleteEventDetail = { renderer: jsxRenderer, template: TokenTemplate, styles: tokenStyles, - dependencies: [Icon], }) /** * Fired when the the component is selected by user interaction with mouse or by clicking space. diff --git a/packages/main/src/Tokenizer.ts b/packages/main/src/Tokenizer.ts index d03bbc09ec23..791e483967c3 100644 --- a/packages/main/src/Tokenizer.ts +++ b/packages/main/src/Tokenizer.ts @@ -48,14 +48,10 @@ import { isEscape, } from "@ui5/webcomponents-base/dist/Keys.js"; import { isPhone } from "@ui5/webcomponents-base/dist/Device.js"; -import ResponsivePopover from "./ResponsivePopover.js"; -import List from "./List.js"; +import type ResponsivePopover from "./ResponsivePopover.js"; +import type List from "./List.js"; import type { ListItemDeleteEventDetail } from "./List.js"; import ListSelectionMode from "./types/ListSelectionMode.js"; -import Title from "./Title.js"; -import Button from "./Button.js"; -import Icon from "./Icon.js"; -import ListItemStandard from "./ListItemStandard.js"; import type Token from "./Token.js"; import type { IToken } from "./MultiInput.js"; import type { TokenDeleteEventDetail } from "./Token.js"; @@ -149,14 +145,6 @@ enum ClipboardDataOperation { TokenizerPopoverCss, getEffectiveScrollbarStyle(), ], - dependencies: [ - ResponsivePopover, - List, - ListItemStandard, - Title, - Button, - Icon, - ], }) /** diff --git a/packages/main/src/ToolbarButton.ts b/packages/main/src/ToolbarButton.ts index a46bd47143cb..1b664569296d 100644 --- a/packages/main/src/ToolbarButton.ts +++ b/packages/main/src/ToolbarButton.ts @@ -1,7 +1,6 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; -import Button from "./Button.js"; import type { ButtonAccessibilityAttributes } from "./Button.js"; import type ButtonDesign from "./types/ButtonDesign.js"; @@ -33,7 +32,6 @@ type ToolbarButtonAccessibilityAttributes = ButtonAccessibilityAttributes; */ @customElement({ tag: "ui5-toolbar-button", - dependencies: [Button], styles: ToolbarButtonPopoverCss, }) diff --git a/packages/main/src/ToolbarSelect.ts b/packages/main/src/ToolbarSelect.ts index bd1169713ac2..45510732c2dc 100644 --- a/packages/main/src/ToolbarSelect.ts +++ b/packages/main/src/ToolbarSelect.ts @@ -11,8 +11,6 @@ import { registerToolbarItem } from "./ToolbarRegistry.js"; import ToolbarSelectTemplate from "./ToolbarSelectTemplate.js"; import ToolbarPopoverSelectTemplate from "./ToolbarPopoverSelectTemplate.js"; import ToolbarItem from "./ToolbarItem.js"; -import Select from "./Select.js"; -import Option from "./Option.js"; import type ToolbarSelectOption from "./ToolbarSelectOption.js"; import type { SelectChangeEventDetail } from "./Select.js"; @@ -37,7 +35,6 @@ type ToolbarSelectChangeEventDetail = SelectChangeEventDetail; */ @customElement({ tag: "ui5-toolbar-select", - dependencies: [Select, Option], }) /** diff --git a/packages/main/src/Tree.ts b/packages/main/src/Tree.ts index d4b917250878..b23854535666 100644 --- a/packages/main/src/Tree.ts +++ b/packages/main/src/Tree.ts @@ -10,11 +10,11 @@ import Orientation from "@ui5/webcomponents-base/dist/types/Orientation.js"; import MovePlacement from "@ui5/webcomponents-base/dist/types/MovePlacement.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; -import DropIndicator from "./DropIndicator.js"; -import TreeItem from "./TreeItem.js"; +import type DropIndicator from "./DropIndicator.js"; +import "./TreeItem.js"; import type TreeItemBase from "./TreeItemBase.js"; -import TreeItemCustom from "./TreeItemCustom.js"; -import TreeList from "./TreeList.js"; +import "./TreeItemCustom.js"; +import type TreeList from "./TreeList.js"; import type ListSelectionMode from "./types/ListSelectionMode.js"; import ListAccessibleRole from "./types/ListAccessibleRole.js"; import type { @@ -109,12 +109,6 @@ type WalkCallback = (item: TreeItemBase, level: number, index: number) => void; renderer: jsxRenderer, styles: TreeCss, template: TreeTemplate, - dependencies: [ - TreeList, - TreeItem, - TreeItemCustom, - DropIndicator, - ], }) /** * Fired when a tree item is expanded or collapsed. diff --git a/packages/main/src/TreeItemBase.ts b/packages/main/src/TreeItemBase.ts index e7885af3c118..21f425c42865 100644 --- a/packages/main/src/TreeItemBase.ts +++ b/packages/main/src/TreeItemBase.ts @@ -10,7 +10,6 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; import type ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js"; import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js"; import ListItem from "./ListItem.js"; -import Icon from "./Icon.js"; import "@ui5/webcomponents-icons/dist/navigation-right-arrow.js"; import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js"; import { @@ -48,10 +47,6 @@ type TreeItemBaseStepOutEventDetail = TreeItemBaseEventDetail; ListItem.styles, treeItemCss, ], - dependencies: [ - ...ListItem.dependencies, - Icon, - ], }) /** * Fired when the user interacts with the expand/collapse button of the tree list item. From 783253489c8f7e0f36c03cae904350e2a806eeda Mon Sep 17 00:00:00 2001 From: Vladislav Tasev Date: Thu, 2 Jan 2025 16:40:20 +0200 Subject: [PATCH 10/20] chore: fix tests --- packages/main/cypress/specs/List.cy.ts | 1 + packages/main/cypress/specs/Toast.cy.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/main/cypress/specs/List.cy.ts b/packages/main/cypress/specs/List.cy.ts index c0781ac579c6..a99050127a9d 100644 --- a/packages/main/cypress/specs/List.cy.ts +++ b/packages/main/cypress/specs/List.cy.ts @@ -1,5 +1,6 @@ import { html } from "lit"; import "../../src/List.js"; +import "../../src/ListItemStandard.js"; import type List from "../../src/List.js"; describe("List Tests", () => { diff --git a/packages/main/cypress/specs/Toast.cy.ts b/packages/main/cypress/specs/Toast.cy.ts index f38efd1763ef..af14c0a21d33 100644 --- a/packages/main/cypress/specs/Toast.cy.ts +++ b/packages/main/cypress/specs/Toast.cy.ts @@ -2,6 +2,7 @@ import { html } from "lit"; import "../../src/Toast.js"; import "../../src/Button.js"; import "../../src/List.js"; +import "../../src/ListItemStandard.js"; import type Toast from "../../src/Toast.js"; describe("Toast - test popover API", () => { From 72941e1929e98478623859e57da15835cedabc8a Mon Sep 17 00:00:00 2001 From: Vladislav Tasev Date: Thu, 2 Jan 2025 16:59:59 +0200 Subject: [PATCH 11/20] chore: use lint disable --- packages/main/src/ComboBox.ts | 3 +++ packages/main/src/List.ts | 3 +++ 2 files changed, 6 insertions(+) diff --git a/packages/main/src/ComboBox.ts b/packages/main/src/ComboBox.ts index 294a44717e3b..f3b22f4f1e4f 100644 --- a/packages/main/src/ComboBox.ts +++ b/packages/main/src/ComboBox.ts @@ -73,6 +73,9 @@ import type Popover from "./Popover.js"; import type ResponsivePopover from "./ResponsivePopover.js"; import type List from "./List.js"; import type { ListItemClickEventDetail } from "./List.js"; +// eslint-disable-next-line +import "./ComboBoxItemGroup.js"; +// eslint-disable-next-line import { isInstanceOfComboBoxItemGroup } from "./ComboBoxItemGroup.js"; import type ComboBoxFilter from "./types/ComboBoxFilter.js"; import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js"; diff --git a/packages/main/src/List.ts b/packages/main/src/List.ts index 5b771d00c8b9..4bcb15ad8d3c 100644 --- a/packages/main/src/List.ts +++ b/packages/main/src/List.ts @@ -70,6 +70,9 @@ import { } from "./generated/i18n/i18n-defaults.js"; import type CheckBox from "./CheckBox.js"; import type RadioButton from "./RadioButton.js"; +// eslint-disable-next-line +import "./ListItemGroup.js"; +// eslint-disable-next-line import { isInstanceOfListItemGroup } from "./ListItemGroup.js"; import type ListItemGroup from "./ListItemGroup.js"; From 8bb159b2d74c2f8387359690ab0dd4425074065e Mon Sep 17 00:00:00 2001 From: Vladislav Tasev Date: Thu, 2 Jan 2025 17:01:55 +0200 Subject: [PATCH 12/20] chore: use lint disable --- packages/main/src/List.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/main/src/List.ts b/packages/main/src/List.ts index 4bcb15ad8d3c..5b771d00c8b9 100644 --- a/packages/main/src/List.ts +++ b/packages/main/src/List.ts @@ -70,9 +70,6 @@ import { } from "./generated/i18n/i18n-defaults.js"; import type CheckBox from "./CheckBox.js"; import type RadioButton from "./RadioButton.js"; -// eslint-disable-next-line -import "./ListItemGroup.js"; -// eslint-disable-next-line import { isInstanceOfListItemGroup } from "./ListItemGroup.js"; import type ListItemGroup from "./ListItemGroup.js"; From 928976463045a11c5e6fcdb294040c15f3acd450 Mon Sep 17 00:00:00 2001 From: Vladislav Tasev Date: Fri, 3 Jan 2025 10:29:37 +0200 Subject: [PATCH 13/20] chore: toolbar --- packages/main/src/Toolbar.ts | 14 ++------------ packages/main/src/ToolbarRegistry.ts | 5 ----- 2 files changed, 2 insertions(+), 17 deletions(-) diff --git a/packages/main/src/Toolbar.ts b/packages/main/src/Toolbar.ts index e5ea84f6e774..1eacfdca57dc 100644 --- a/packages/main/src/Toolbar.ts +++ b/packages/main/src/Toolbar.ts @@ -34,11 +34,10 @@ import type ToolbarSeparator from "./ToolbarSeparator.js"; import { getRegisteredToolbarItem, getRegisteredStyles, - getRegisteredDependencies, } from "./ToolbarRegistry.js"; -import Button from "./Button.js"; -import Popover from "./Popover.js"; +import type Button from "./Button.js"; +import type Popover from "./Popover.js"; type ToolbarMinWidthChangeEventDetail = { minWidth: number, @@ -177,15 +176,6 @@ class Toolbar extends UI5Element { ]; } - static get dependencies() { - const deps = getRegisteredDependencies(); - return [ - Popover, - Button, - ...deps, - ]; - } - constructor() { super(); diff --git a/packages/main/src/ToolbarRegistry.ts b/packages/main/src/ToolbarRegistry.ts index 514f77f7955e..0339efbd578e 100644 --- a/packages/main/src/ToolbarRegistry.ts +++ b/packages/main/src/ToolbarRegistry.ts @@ -20,13 +20,8 @@ const getRegisteredStyles = () => { return [...registry.values()].map((ElementClass: typeof ToolbarItem) => ElementClass.styles); }; -const getRegisteredDependencies = () => { - return [...registry.values()].map((ElementClass: typeof ToolbarItem) => ElementClass.dependencies).flat(); -}; - export { registerToolbarItem, getRegisteredToolbarItem, getRegisteredStyles, - getRegisteredDependencies, }; From b67176e2b52bf3dcc1fa579e577b7addc8b999d8 Mon Sep 17 00:00:00 2001 From: Vladislav Tasev Date: Fri, 3 Jan 2025 10:41:43 +0200 Subject: [PATCH 14/20] chore: the other features --- packages/main/src/ColorPalette.ts | 8 ++------ packages/main/src/Input.ts | 10 +++------- packages/main/src/MultiInput.ts | 16 ++++------------ .../src/features/ColorPaletteMoreColors.ts | 12 ------------ .../main/src/features/InputSuggestions.ts | 19 ++++--------------- 5 files changed, 13 insertions(+), 52 deletions(-) diff --git a/packages/main/src/ColorPalette.ts b/packages/main/src/ColorPalette.ts index 8f02df02ddeb..91574c430588 100644 --- a/packages/main/src/ColorPalette.ts +++ b/packages/main/src/ColorPalette.ts @@ -19,8 +19,8 @@ import { } from "@ui5/webcomponents-base/dist/Keys.js"; import { getComponentFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js"; import ColorPaletteTemplate from "./ColorPaletteTemplate.js"; -import ColorPaletteItem from "./ColorPaletteItem.js"; -import Button from "./Button.js"; +import type ColorPaletteItem from "./ColorPaletteItem.js"; +import type Button from "./Button.js"; import type Dialog from "./Dialog.js"; import type ColorPaletteMoreColors from "./features/ColorPaletteMoreColors.js"; import type ColorPicker from "./ColorPicker.js"; @@ -76,10 +76,6 @@ type ColorPaletteItemClickEventDetail = { features: ["ColorPaletteMoreColors"], template: ColorPaletteTemplate, styles: [ColorPaletteCss, ColorPaletteDialogCss], - get dependencies() { - const colorPaletteMoreColors = getComponentFeature("ColorPaletteMoreColors"); - return ([ColorPaletteItem, Button] as Array).concat(colorPaletteMoreColors ? colorPaletteMoreColors.dependencies : []); - }, }) /** diff --git a/packages/main/src/Input.ts b/packages/main/src/Input.ts index 11659693e014..a4989aa54cda 100644 --- a/packages/main/src/Input.ts +++ b/packages/main/src/Input.ts @@ -53,8 +53,8 @@ import type SuggestionItem from "./SuggestionItem.js"; import type { SuggestionComponent } from "./features/InputSuggestions.js"; import type InputSuggestions from "./features/InputSuggestions.js"; import InputType from "./types/InputType.js"; -import Popover from "./Popover.js"; -import Icon from "./Icon.js"; +import type Popover from "./Popover.js"; +import type Icon from "./Icon.js"; import type { IIcon } from "./Icon.js"; import type PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js"; // Templates @@ -86,7 +86,7 @@ import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverComm import ValueStateMessageCss from "./generated/themes/ValueStateMessage.css.js"; import SuggestionsCss from "./generated/themes/Suggestions.css.js"; import type { ListItemClickEventDetail, ListSelectionChangeEventDetail } from "./List.js"; -import ResponsivePopover from "./ResponsivePopover.js"; +import type ResponsivePopover from "./ResponsivePopover.js"; /** * Interface for components that represent a suggestion item, usable in `ui5-input` @@ -207,10 +207,6 @@ type InputSuggestionScrollEventDetail = { SuggestionsCss, ], features: ["InputSuggestions"], - get dependencies() { - const Suggestions = getComponentFeature("InputSuggestions"); - return ([Popover, ResponsivePopover, Icon] as Array).concat(Suggestions ? Suggestions.dependencies : []); - }, }) /** diff --git a/packages/main/src/MultiInput.ts b/packages/main/src/MultiInput.ts index 31c34b73626b..63b089c58c0f 100644 --- a/packages/main/src/MultiInput.ts +++ b/packages/main/src/MultiInput.ts @@ -21,10 +21,11 @@ import { MULTIINPUT_ROLEDESCRIPTION_TEXT, MULTIINPUT_VALUE_HELP_LABEL } from "./ import Input from "./Input.js"; import MultiInputTemplate from "./MultiInputTemplate.js"; import styles from "./generated/themes/MultiInput.css.js"; -import Token from "./Token.js"; -import Tokenizer, { getTokensCountText } from "./Tokenizer.js"; +import type Token from "./Token.js"; +import type Tokenizer from "./Tokenizer.js"; +import { getTokensCountText } from "./Tokenizer.js"; import type { TokenizerTokenDeleteEventDetail } from "./Tokenizer.js"; -import Icon from "./Icon.js"; +import type Icon from "./Icon.js"; import type { InputSelectionChangeEventDetail as MultiInputSelectionChangeEventDetail, @@ -67,15 +68,6 @@ type MultiInputTokenDeleteEventDetail = { formAssociated: true, template: MultiInputTemplate, styles: [Input.styles, styles], - get dependencies() { - return [ - ...Input.dependencies, - Input, - Tokenizer, - Token, - Icon, - ]; - }, }) /** * Fired when the value help icon is pressed diff --git a/packages/main/src/features/ColorPaletteMoreColors.ts b/packages/main/src/features/ColorPaletteMoreColors.ts index 73535bb477e3..65a1b622ee14 100644 --- a/packages/main/src/features/ColorPaletteMoreColors.ts +++ b/packages/main/src/features/ColorPaletteMoreColors.ts @@ -1,10 +1,6 @@ import { ComponentFeature, registerComponentFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; -import Dialog from "../Dialog.js"; -import Button from "../Button.js"; -import ColorPicker from "../ColorPicker.js"; - import { COLOR_PALETTE_DIALOG_CANCEL_BUTTON, COLOR_PALETTE_DIALOG_OK_BUTTON, @@ -12,14 +8,6 @@ import { } from "../generated/i18n/i18n-defaults.js"; class ColorPaletteMoreColors extends ComponentFeature { - static get dependencies() { - return [ - Dialog, - Button, - ColorPicker, - ]; - } - static i18nBundle: I18nBundle; get colorPaletteDialogTitle() { diff --git a/packages/main/src/features/InputSuggestions.ts b/packages/main/src/features/InputSuggestions.ts index 3c0cb8eaf98a..93b325f578ff 100644 --- a/packages/main/src/features/InputSuggestions.ts +++ b/packages/main/src/features/InputSuggestions.ts @@ -2,12 +2,11 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import { ComponentFeature, registerComponentFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; import generateHighlightedMarkup from "@ui5/webcomponents-base/dist/util/generateHighlightedMarkup.js"; -import List from "../List.js"; +import type List from "../List.js"; import type { ListItemClickEventDetail, ListSelectionChangeEventDetail } from "../List.js"; import type ResponsivePopover from "../ResponsivePopover.js"; -import SuggestionItem from "../SuggestionItem.js"; -import Button from "../Button.js"; -import Icon from "../Icon.js"; +import "../SuggestionItem.js"; +import type SuggestionItem from "../SuggestionItem.js"; import type ListItemGroupHeader from "../ListItemGroupHeader.js"; import { @@ -15,7 +14,7 @@ import { LIST_ITEM_GROUP_HEADER, } from "../generated/i18n/i18n-defaults.js"; import type ListItemBase from "../ListItemBase.js"; -import SuggestionItemGroup from "../SuggestionItemGroup.js"; +import type SuggestionItemGroup from "../SuggestionItemGroup.js"; import type { IInputSuggestionItem, IInputSuggestionItemSelectable } from "../Input.js"; interface SuggestionComponent extends UI5Element { @@ -550,16 +549,6 @@ class Suggestions extends ComponentFeature { this.accInfo = undefined; this.selectedItemIndex = 0; } - - static get dependencies() { - return [ - SuggestionItem, - SuggestionItemGroup, - List, - Button, - Icon, - ]; - } } // Add suggestions support to the global features registry so that Input.js can use it From c65a9055554299947c4501ec73bc57908fc2f66d Mon Sep 17 00:00:00 2001 From: Vladislav Tasev Date: Fri, 3 Jan 2025 10:55:00 +0200 Subject: [PATCH 15/20] chore: rework the more colors feature --- .../main/src/ColorPaletteDialogTemplate.tsx | 35 ------------------- packages/main/src/ColorPaletteTemplate.tsx | 3 +- .../src/features/ColorPaletteMoreColors.ts | 5 +++ .../ColorPaletteMoreColorsTemplate.tsx | 30 ++++++++++++++++ 4 files changed, 36 insertions(+), 37 deletions(-) delete mode 100644 packages/main/src/ColorPaletteDialogTemplate.tsx create mode 100644 packages/main/src/features/ColorPaletteMoreColorsTemplate.tsx diff --git a/packages/main/src/ColorPaletteDialogTemplate.tsx b/packages/main/src/ColorPaletteDialogTemplate.tsx deleted file mode 100644 index 0e436ddf69c3..000000000000 --- a/packages/main/src/ColorPaletteDialogTemplate.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import type ColorPalette from "./ColorPalette.js"; -import Button from "./Button.js"; -import Dialog from "./Dialog.js"; -import ColorPicker from "./ColorPicker.js"; - -export default function ColorPaletteDialogTemplate(this: ColorPalette) { - return ( - <> - { - this._effectiveShowMoreColors && - -
- -
- -
- - - -
- - } - - ); -} diff --git a/packages/main/src/ColorPaletteTemplate.tsx b/packages/main/src/ColorPaletteTemplate.tsx index cc31409d41a2..1614fb45b5d4 100644 --- a/packages/main/src/ColorPaletteTemplate.tsx +++ b/packages/main/src/ColorPaletteTemplate.tsx @@ -3,7 +3,6 @@ import { isPhone } from "@ui5/webcomponents-base/dist/Device.js"; import type ColorPalette from "./ColorPalette.js"; import Button from "./Button.js"; import ColorPaletteItem from "./ColorPaletteItem.js"; -import ColorPaletteDialogTemplate from "./ColorPaletteDialogTemplate.js"; export default function ColorPaletteTemplate(this: ColorPalette) { return ( @@ -67,7 +66,7 @@ export default function ColorPaletteTemplate(this: ColorPalette) { } - { ColorPaletteDialogTemplate.call(this) } + { this._effectiveShowMoreColors && this.moreColorsFeature?.template.call(this) } ); } diff --git a/packages/main/src/features/ColorPaletteMoreColors.ts b/packages/main/src/features/ColorPaletteMoreColors.ts index 65a1b622ee14..b73186667447 100644 --- a/packages/main/src/features/ColorPaletteMoreColors.ts +++ b/packages/main/src/features/ColorPaletteMoreColors.ts @@ -1,5 +1,6 @@ import { ComponentFeature, registerComponentFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; +import ColorPaletteMoreColorsTemplate from "./ColorPaletteMoreColorsTemplate.js"; import { COLOR_PALETTE_DIALOG_CANCEL_BUTTON, @@ -10,6 +11,10 @@ import { class ColorPaletteMoreColors extends ComponentFeature { static i18nBundle: I18nBundle; + get template() { + return ColorPaletteMoreColorsTemplate; + } + get colorPaletteDialogTitle() { return ColorPaletteMoreColors.i18nBundle.getText(COLOR_PALETTE_DIALOG_TITLE); } diff --git a/packages/main/src/features/ColorPaletteMoreColorsTemplate.tsx b/packages/main/src/features/ColorPaletteMoreColorsTemplate.tsx new file mode 100644 index 000000000000..8a9526a801f3 --- /dev/null +++ b/packages/main/src/features/ColorPaletteMoreColorsTemplate.tsx @@ -0,0 +1,30 @@ +import type ColorPalette from "../ColorPalette.js"; +import Button from "../Button.js"; +import Dialog from "../Dialog.js"; +import ColorPicker from "../ColorPicker.js"; + +export default function ColorPaletteMoreColorsTemplate(this: ColorPalette) { + return ( + +
+ +
+ +
+ + + +
+ + ); +} From ff9f83829425b890b82f0220bbd17e1eb5c70529 Mon Sep 17 00:00:00 2001 From: Vladislav Tasev Date: Fri, 3 Jan 2025 11:14:16 +0200 Subject: [PATCH 16/20] chore: rework input suggestions --- packages/main/src/InputPopoverTemplate.tsx | 104 +------------- .../main/src/features/InputSuggestions.ts | 6 + .../src/features/InputSuggestionsTemplate.tsx | 133 ++++++++++++++++++ 3 files changed, 141 insertions(+), 102 deletions(-) create mode 100644 packages/main/src/features/InputSuggestionsTemplate.tsx diff --git a/packages/main/src/InputPopoverTemplate.tsx b/packages/main/src/InputPopoverTemplate.tsx index 8b46b0d779bc..b40486a8bcbf 100644 --- a/packages/main/src/InputPopoverTemplate.tsx +++ b/packages/main/src/InputPopoverTemplate.tsx @@ -1,103 +1,17 @@ -import Input from "./Input.js"; +import type Input from "./Input.js"; import Icon from "./Icon.js"; -import decline from "@ui5/webcomponents-icons/dist/decline.js"; import error from "@ui5/webcomponents-icons/dist/error.js"; import alert from "@ui5/webcomponents-icons/dist/alert.js"; import sysEnter2 from "@ui5/webcomponents-icons/dist/sys-enter-2.js"; import information from "@ui5/webcomponents-icons/dist/information.js"; import Popover from "./Popover.js"; -import List from "./List.js"; -import ResponsivePopover from "./ResponsivePopover.js"; -import Button from "./Button.js"; import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js"; export default function InputPopoverTemplate(this: Input) { return ( <> - {this._effectiveShowSuggestions && - - {this._isPhone && - <> -
-
- {this._headerTitleText} - -
-
-
- -
-
-
- - {this.hasValueStateMessage && -
- - { this.open && valueStateMessage.call(this) } -
- } - - } - - {!this._isPhone && this.hasValueStateMessage && -
- - { this.open && valueStateMessage.call(this) } -
- } - - { suggestionsList.call(this) } - - {this._isPhone && -
- -
- } - - } + {this._effectiveShowSuggestions && this.Suggestions?.template.call(this) } {this.hasValueStateMessage && - - - ); -} - function valueStateMessageInputIcon(this: Input) { const iconPerValueState = { Negative: error, diff --git a/packages/main/src/features/InputSuggestions.ts b/packages/main/src/features/InputSuggestions.ts index 93b325f578ff..45dbc8d2c4a3 100644 --- a/packages/main/src/features/InputSuggestions.ts +++ b/packages/main/src/features/InputSuggestions.ts @@ -6,8 +6,10 @@ import type List from "../List.js"; import type { ListItemClickEventDetail, ListSelectionChangeEventDetail } from "../List.js"; import type ResponsivePopover from "../ResponsivePopover.js"; import "../SuggestionItem.js"; +import "../SuggestionItemGroup.js"; import type SuggestionItem from "../SuggestionItem.js"; import type ListItemGroupHeader from "../ListItemGroupHeader.js"; +import InputSuggestionsTemplate from "./InputSuggestionsTemplate.js"; import { LIST_ITEM_POSITION, @@ -57,6 +59,10 @@ class Suggestions extends ComponentFeature { static i18nBundle: I18nBundle; static SCROLL_STEP = 60; + get template() { + return InputSuggestionsTemplate; + } + constructor(component: SuggestionComponent, slotName: string, highlight: boolean, handleFocus: boolean) { super(); // The component, that the suggestion would plug into. diff --git a/packages/main/src/features/InputSuggestionsTemplate.tsx b/packages/main/src/features/InputSuggestionsTemplate.tsx new file mode 100644 index 000000000000..ebc2254ba6fe --- /dev/null +++ b/packages/main/src/features/InputSuggestionsTemplate.tsx @@ -0,0 +1,133 @@ +import Input from "../Input.js"; +import Icon from "../Icon.js"; +import decline from "@ui5/webcomponents-icons/dist/decline.js"; +import error from "@ui5/webcomponents-icons/dist/error.js"; +import alert from "@ui5/webcomponents-icons/dist/alert.js"; +import sysEnter2 from "@ui5/webcomponents-icons/dist/sys-enter-2.js"; +import information from "@ui5/webcomponents-icons/dist/information.js"; + +import List from "../List.js"; +import ResponsivePopover from "../ResponsivePopover.js"; +import Button from "../Button.js"; +import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js"; + +export default function InputSuggestionsTemplate(this: Input) { + return ( + + {this._isPhone && + <> +
+
+ {this._headerTitleText} + +
+
+
+ +
+
+
+ + {this.hasValueStateMessage && +
+ + { this.open && valueStateMessage.call(this) } +
+ } + + } + + {!this._isPhone && this.hasValueStateMessage && +
+ + { this.open && valueStateMessage.call(this) } +
+ } + + { suggestionsList.call(this) } + + {this._isPhone && +
+ +
+ } + + ); +} + +function valueStateMessage(this: Input) { + return ( + <> + { + this.shouldDisplayDefaultValueStateMessage ? this.valueStateText : + } + + ); +} + +function suggestionsList(this: Input) { + return ( + + + + ); +} + +function valueStateMessageInputIcon(this: Input) { + const iconPerValueState = { + Negative: error, + Critical: alert, + Positive: sysEnter2, + Information: information, + }; + + return this.valueState !== ValueState.None ? iconPerValueState[this.valueState] : ""; +} From 63c763984163b847afa79642c03f46acaea07501 Mon Sep 17 00:00:00 2001 From: Vladislav Tasev Date: Fri, 3 Jan 2025 11:47:27 +0200 Subject: [PATCH 17/20] chore: deprecate dependencies in the decorator --- packages/base/src/decorators/customElement.ts | 37 +++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/packages/base/src/decorators/customElement.ts b/packages/base/src/decorators/customElement.ts index 2ed5980ef4f6..2a786d242ab6 100644 --- a/packages/base/src/decorators/customElement.ts +++ b/packages/base/src/decorators/customElement.ts @@ -10,17 +10,54 @@ import type { ComponentStylesData as Styles } from "../types.js"; * @returns { ClassDecorator } */ const customElement = (tagNameOrComponentSettings: string | { + /** + * The tag name of the custom element (will be suffixed if the scoping feature is used). + */ tag?: string, + /** + * The renderer of the custom element - officially supported are: jsxRenderer and litRender (deprecated). + */ renderer?: Renderer, + /** + * The styles to be injected into the shadow root of the custom element. + */ styles?: Styles, + /** + * The template function of the custom element - must match the renderer. + */ template?: Template, + /** + * Other custom elements used in the shadow root of the custom element. + * @deprecated no longer necessary for jsxRenderer-enabled components + */ dependencies?: Array, + /** + * Whether the custom element should be re-rendered when the language changes. + */ languageAware?: boolean, + /** + * Whether the custom element should be re-rendered when the theme changes. + */ themeAware?: boolean, + /** + * Whether the custom element needs the CLDR assets. + */ cldr?: boolean, + /** + * Whether the custom element supports the F6 Fast navigation feature (is a fast-navigation group). + */ fastNavigation?: boolean, + /** + * Whether the custom element is form-associated and implements form-relevant features. + */ formAssociated?: boolean, + /** + * The shadow root options of the custom element. + */ shadowRootOptions?: Partial, + /** + * A list of all features, supported by the custom element. + */ features?: Array, } = {}): ClassDecorator => { return (target: any) => { From 69147a3dd5fb58ae8309823945bf2a66ac9f7474 Mon Sep 17 00:00:00 2001 From: Vladislav Tasev Date: Fri, 3 Jan 2025 11:58:29 +0200 Subject: [PATCH 18/20] chore: deprecate dependencies in ComponentFeature --- packages/base/src/FeaturesRegistry.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/base/src/FeaturesRegistry.ts b/packages/base/src/FeaturesRegistry.ts index ac67a3d30fce..b64e2e2b8839 100644 --- a/packages/base/src/FeaturesRegistry.ts +++ b/packages/base/src/FeaturesRegistry.ts @@ -9,6 +9,9 @@ abstract class ComponentFeature { * @deprecated assign the feature's "i18nBundle" static member directly from the component that uses the feature */ static define?: () => Promise; + /** + * @deprecated no longer necessary for jsxRenderer-enabled components + */ static dependencies?: Array } From 322483f0658a6d6d15eeb343d596f35f62467c11 Mon Sep 17 00:00:00 2001 From: Vladislav Tasev Date: Fri, 3 Jan 2025 12:10:26 +0200 Subject: [PATCH 19/20] chore: optimize input suggestions template --- packages/main/src/InputPopoverTemplate.tsx | 2 +- .../src/features/InputSuggestionsTemplate.tsx | 29 ++----------------- 2 files changed, 3 insertions(+), 28 deletions(-) diff --git a/packages/main/src/InputPopoverTemplate.tsx b/packages/main/src/InputPopoverTemplate.tsx index b40486a8bcbf..26ef78b736be 100644 --- a/packages/main/src/InputPopoverTemplate.tsx +++ b/packages/main/src/InputPopoverTemplate.tsx @@ -11,7 +11,7 @@ import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js"; export default function InputPopoverTemplate(this: Input) { return ( <> - {this._effectiveShowSuggestions && this.Suggestions?.template.call(this) } + {this._effectiveShowSuggestions && this.Suggestions?.template.call(this, valueStateMessage, valueStateMessageInputIcon) } {this.hasValueStateMessage && JsxTemplateResult, valueStateMessageInputIcon: (this: Input) => string) { return ( - { - this.shouldDisplayDefaultValueStateMessage ? this.valueStateText : - } - - ); -} - function suggestionsList(this: Input) { return ( ); } - -function valueStateMessageInputIcon(this: Input) { - const iconPerValueState = { - Negative: error, - Critical: alert, - Positive: sysEnter2, - Information: information, - }; - - return this.valueState !== ValueState.None ? iconPerValueState[this.valueState] : ""; -} From 46d7618e92a8d45e14591996ed15ba80ddc22b3d Mon Sep 17 00:00:00 2001 From: Vladislav Tasev Date: Fri, 3 Jan 2025 14:34:18 +0200 Subject: [PATCH 20/20] chore: comments --- packages/base/src/UI5Element.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/base/src/UI5Element.ts b/packages/base/src/UI5Element.ts index 18b3a5e85ba1..2e7fe84cff47 100644 --- a/packages/base/src/UI5Element.ts +++ b/packages/base/src/UI5Element.ts @@ -850,7 +850,7 @@ abstract class UI5Element extends HTMLElement { */ this._changedState = []; - // Update shadow root and static area item + // Update shadow root if (ctor._needsShadowDOM()) { updateShadowRoot(this); } @@ -1233,9 +1233,11 @@ abstract class UI5Element extends HTMLElement { static styles: ComponentStylesData = ""; /** - * Returns an array with the dependencies for this UI5 Web Component (slotted components that the component may need to communicate with) - * The component will always await for the dependencies to be defined before defining itself + * Returns an array with the dependencies for this UI5 Web Component, which could be: + * - composed components (used in its shadow root) + * - slotted components that the component may need to communicate with * + * @deprecated no longer necessary for jsxRenderer-enabled components * @protected */ static get dependencies(): Array {