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/FeaturesRegistry.ts b/packages/base/src/FeaturesRegistry.ts index 76d764e5af90..5ac7223fe0e4 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 } diff --git a/packages/base/src/UI5Element.ts b/packages/base/src/UI5Element.ts index 5d39325ba202..2e7fe84cff47 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 @@ -863,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); } @@ -1247,9 +1234,10 @@ abstract class UI5Element extends HTMLElement { /** * 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) + * - 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 { 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) => { 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/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. 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/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..28d9a324048e 100644 --- a/packages/fiori/src/Timeline.ts +++ b/packages/fiori/src/Timeline.ts @@ -15,8 +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 from "./TimelineItem.js"; -import TimelineGroupItem from "./TimelineGroupItem.js"; +import "./TimelineItem.js"; +import "./TimelineGroupItem.js"; // Styles import TimelineCss from "./generated/themes/Timeline.css.js"; @@ -65,7 +65,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..7277164bed70 100644 --- a/packages/fiori/src/Wizard.ts +++ b/packages/fiori/src/Wizard.ts @@ -14,9 +14,9 @@ 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"; +import "./WizardStep.js"; // Texts import { @@ -33,8 +33,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 +192,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 { 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", () => { 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("ColorPaletteMoreColors"); - return ([ColorPaletteItem, Button] as Array).concat(colorPaletteMoreColors ? colorPaletteMoreColors.dependencies : []); - }, }) /** 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/ColorPalettePopover.ts b/packages/main/src/ColorPalettePopover.ts index 45e5f5f244d7..88548a27f330 100644 --- a/packages/main/src/ColorPalettePopover.ts +++ b/packages/main/src/ColorPalettePopover.ts @@ -18,10 +18,8 @@ import { COLOR_PALETTE_DIALOG_CANCEL_BUTTON, } from "./generated/i18n/i18n-defaults.js"; -import Button from "./Button.js"; -import Title from "./Title.js"; -import ResponsivePopover from "./ResponsivePopover.js"; -import ColorPalette from "./ColorPalette.js"; +import type ResponsivePopover from "./ResponsivePopover.js"; +import type ColorPalette from "./ColorPalette.js"; import type { ColorPaletteItemClickEventDetail, IColorPaletteItem } from "./ColorPalette.js"; import type ColorPaletteItem from "./ColorPaletteItem.js"; @@ -57,12 +55,6 @@ type ColorPalettePopoverItemClickEventDetail = ColorPaletteItemClickEventDetail; renderer: jsxRenderer, styles: [ResponsivePopoverCommonCss, ColorPalettePopoverCss], template: ColorPalettePopoverTemplate, - dependencies: [ - ResponsivePopover, - Button, - Title, - ColorPalette, - ], }) /** 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/ColorPicker.ts b/packages/main/src/ColorPicker.ts index dbbba81bf11a..9049a3056a73 100644 --- a/packages/main/src/ColorPicker.ts +++ b/packages/main/src/ColorPicker.ts @@ -21,9 +21,8 @@ import type { ColorRGB, } from "@ui5/webcomponents-base/dist/util/ColorConversion.js"; import ColorPickerTemplate from "./ColorPickerTemplate.js"; -import Input from "./Input.js"; -import Slider from "./Slider.js"; -import Label from "./Label.js"; +import type Input from "./Input.js"; +import type Slider from "./Slider.js"; import { COLORPICKER_ALPHA_SLIDER, @@ -77,11 +76,6 @@ type ColorCoordinates = { formAssociated: true, styles: ColorPickerCss, template: ColorPickerTemplate, - dependencies: [ - Input, - Slider, - Label, - ], shadowRootOptions: { delegatesFocus: true }, }) /** diff --git a/packages/main/src/ComboBox.ts b/packages/main/src/ComboBox.ts index 1596fb92d958..f3b22f4f1e4f 100644 --- a/packages/main/src/ComboBox.ts +++ b/packages/main/src/ComboBox.ts @@ -67,23 +67,20 @@ import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverComm import ValueStateMessageCss from "./generated/themes/ValueStateMessage.css.js"; import SuggestionsCss from "./generated/themes/Suggestions.css.js"; -import ComboBoxItem from "./ComboBoxItem.js"; -import Icon from "./Icon.js"; -import Popover from "./Popover.js"; -import ResponsivePopover from "./ResponsivePopover.js"; -import List from "./List.js"; +import "./ComboBoxItem.js"; +import type ComboBoxItem from "./ComboBoxItem.js"; +import type Popover from "./Popover.js"; +import type ResponsivePopover from "./ResponsivePopover.js"; +import type List from "./List.js"; import type { ListItemClickEventDetail } from "./List.js"; -import BusyIndicator from "./BusyIndicator.js"; -import Button from "./Button.js"; -import ListItemStandard from "./ListItemStandard.js"; -import ComboBoxItemGroup, { isInstanceOfComboBoxItemGroup } from "./ComboBoxItemGroup.js"; -import ListItemGroup from "./ListItemGroup.js"; -import ListItemGroupHeader from "./ListItemGroupHeader.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"; -import Input from "./Input.js"; +import type Input from "./Input.js"; import type { InputEventDetail } from "./Input.js"; -import SuggestionItem from "./SuggestionItem.js"; const SKIP_ITEMS_SIZE = 10; @@ -167,21 +164,6 @@ type ComboBoxSelectionChangeEventDetail = { SuggestionsCss, ], template: ComboBoxTemplate, - dependencies: [ - ComboBoxItem, - Icon, - ResponsivePopover, - List, - BusyIndicator, - Button, - ListItemStandard, - ListItemGroup, - ListItemGroupHeader, - Popover, - ComboBoxItemGroup, - Input, - SuggestionItem, - ], }) /** * Fired when the input operation has finished by pressing Enter, focusout or an item is selected. diff --git a/packages/main/src/DatePicker.ts b/packages/main/src/DatePicker.ts index 953e90139a1e..e9650603a5d9 100644 --- a/packages/main/src/DatePicker.ts +++ b/packages/main/src/DatePicker.ts @@ -41,14 +41,11 @@ import { DATEPICKER_POPOVER_ACCESSIBLE_NAME, } from "./generated/i18n/i18n-defaults.js"; import DateComponentBase from "./DateComponentBase.js"; -import Icon from "./Icon.js"; -import Button from "./Button.js"; -import ResponsivePopover from "./ResponsivePopover.js"; -import Calendar from "./Calendar.js"; +import type ResponsivePopover from "./ResponsivePopover.js"; +import type Calendar from "./Calendar.js"; import type { CalendarSelectionChangeEventDetail } from "./Calendar.js"; import type CalendarSelectionMode from "./types/CalendarSelectionMode.js"; -import CalendarDateComponent from "./CalendarDate.js"; -import Input from "./Input.js"; +import type Input from "./Input.js"; import type { InputAccInfo } from "./Input.js"; import InputType from "./types/InputType.js"; import IconMode from "./types/IconMode.js"; @@ -170,14 +167,6 @@ type Picker = "day" | "month" | "year"; ResponsivePopoverCommonCss, datePickerPopoverCss, ], - dependencies: [ - Icon, - ResponsivePopover, - Calendar, - CalendarDateComponent, - Input, - Button, - ], }) /** * Fired when the input operation has finished by pressing Enter or on focusout. diff --git a/packages/main/src/DateRangePicker.ts b/packages/main/src/DateRangePicker.ts index 7320473769c5..5149df0c3ec6 100644 --- a/packages/main/src/DateRangePicker.ts +++ b/packages/main/src/DateRangePicker.ts @@ -14,7 +14,6 @@ import DateRangePickerTemplate from "./DateRangePickerTemplate.js"; // Styles import DateRangePickerCss from "./generated/themes/DateRangePicker.css.js"; import DatePicker from "./DatePicker.js"; -import CalendarDateRange from "./CalendarDateRange.js"; import type { DatePickerChangeEventDetail as DateRangePickerChangeEventDetail, @@ -61,7 +60,6 @@ const DEFAULT_DELIMITER = "-"; tag: "ui5-daterange-picker", styles: [DatePicker.styles, DateRangePickerCss], template: DateRangePickerTemplate, - dependencies: [...DatePicker.dependencies, CalendarDateRange], }) class DateRangePicker extends DatePicker implements IFormInputElement { /** diff --git a/packages/main/src/DateTimePicker.ts b/packages/main/src/DateTimePicker.ts index 30825371bb48..4f017c5a6aa1 100644 --- a/packages/main/src/DateTimePicker.ts +++ b/packages/main/src/DateTimePicker.ts @@ -10,20 +10,14 @@ import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/In import "@ui5/webcomponents-icons/dist/date-time.js"; import UI5Date from "@ui5/webcomponents-localization/dist/dates/UI5Date.js"; import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js"; -import Button from "./Button.js"; import type ResponsivePopover from "./ResponsivePopover.js"; -import ToggleButton from "./ToggleButton.js"; -import SegmentedButton from "./SegmentedButton.js"; import type { SegmentedButtonSelectionChangeEventDetail } from "./SegmentedButton.js"; -import SegmentedButtonItem from "./SegmentedButtonItem.js"; -import Calendar from "./Calendar.js"; import type { CalendarSelectionChangeEventDetail } from "./Calendar.js"; import DatePicker from "./DatePicker.js"; import type { DatePickerChangeEventDetail as DateTimePickerChangeEventDetail, DatePickerInputEventDetail as DateTimePickerInputEventDetail, } from "./DatePicker.js"; -import TimeSelectionClocks from "./TimeSelectionClocks.js"; import type { TimeSelectionChangeEventDetail } from "./TimePickerInternals.js"; // i18n texts @@ -122,15 +116,6 @@ type PreviewValues = { DateTimePickerCss, DateTimePickerPopoverCss, ], - dependencies: [ - ...DatePicker.dependencies, - Calendar, - Button, - ToggleButton, - SegmentedButton, - SegmentedButtonItem, - TimeSelectionClocks, - ], }) class DateTimePicker extends DatePicker implements IFormInputElement { /** 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/Input.ts b/packages/main/src/Input.ts index 9f729c127fb5..634a45eacd8e 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/InputPopoverTemplate.tsx b/packages/main/src/InputPopoverTemplate.tsx index 8b46b0d779bc..26ef78b736be 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, valueStateMessage, valueStateMessageInputIcon) } {this.hasValueStateMessage && - - - ); -} - function valueStateMessageInputIcon(this: Input) { const iconPerValueState = { Negative: error, 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; 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/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/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/Popup.ts b/packages/main/src/Popup.ts index a3901189639e..2a4fd41b42b6 100644 --- a/packages/main/src/Popup.ts +++ b/packages/main/src/Popup.ts @@ -20,7 +20,6 @@ import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.j import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js"; import MediaRange from "@ui5/webcomponents-base/dist/MediaRange.js"; import toLowercaseEnumValue from "@ui5/webcomponents-base/dist/util/toLowercaseEnumValue.js"; -import Title from "./Title.js"; import PopupTemplate from "./PopupTemplate.js"; import PopupAccessibleRole from "./types/PopupAccessibleRole.js"; import { addOpenedPopup, removeOpenedPopup } from "./popup-utils/OpenedPopupsRegistry.js"; @@ -78,9 +77,6 @@ type PopupBeforeCloseEventDetail = { renderer: jsxRender, styles: [popupStlyes, popupBlockLayerStyles], template: PopupTemplate, - dependencies: [ - Title, - ], }) /** * Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. 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 { /** 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/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/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/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, }; 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. diff --git a/packages/main/src/bundle.esm.ts b/packages/main/src/bundle.esm.ts index 1306e3420dbd..5569c81e4993 100644 --- a/packages/main/src/bundle.esm.ts +++ b/packages/main/src/bundle.esm.ts @@ -35,6 +35,7 @@ import Breadcrumbs from "./Breadcrumbs.js"; import BusyIndicator from "./BusyIndicator.js"; import Button from "./Button.js"; import Card from "./Card.js"; +import CalendarLegend from "./CalendarLegend.js"; import CardHeader from "./CardHeader.js"; import Carousel from "./Carousel.js"; import CheckBox from "./CheckBox.js"; diff --git a/packages/main/src/features/ColorPaletteMoreColors.ts b/packages/main/src/features/ColorPaletteMoreColors.ts index 73535bb477e3..b73186667447 100644 --- a/packages/main/src/features/ColorPaletteMoreColors.ts +++ b/packages/main/src/features/ColorPaletteMoreColors.ts @@ -1,9 +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 ColorPaletteMoreColorsTemplate from "./ColorPaletteMoreColorsTemplate.js"; import { COLOR_PALETTE_DIALOG_CANCEL_BUTTON, @@ -12,16 +9,12 @@ import { } from "../generated/i18n/i18n-defaults.js"; class ColorPaletteMoreColors extends ComponentFeature { - static get dependencies() { - return [ - Dialog, - Button, - ColorPicker, - ]; - } - 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 ( + +
+ +
+ +
+ + + +
+ + ); +} diff --git a/packages/main/src/features/InputSuggestions.ts b/packages/main/src/features/InputSuggestions.ts index 3c0cb8eaf98a..45dbc8d2c4a3 100644 --- a/packages/main/src/features/InputSuggestions.ts +++ b/packages/main/src/features/InputSuggestions.ts @@ -2,20 +2,21 @@ 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 "../SuggestionItemGroup.js"; +import type SuggestionItem from "../SuggestionItem.js"; import type ListItemGroupHeader from "../ListItemGroupHeader.js"; +import InputSuggestionsTemplate from "./InputSuggestionsTemplate.js"; import { LIST_ITEM_POSITION, 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 { @@ -58,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. @@ -550,16 +555,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 diff --git a/packages/main/src/features/InputSuggestionsTemplate.tsx b/packages/main/src/features/InputSuggestionsTemplate.tsx new file mode 100644 index 000000000000..7958ee14a0d5 --- /dev/null +++ b/packages/main/src/features/InputSuggestionsTemplate.tsx @@ -0,0 +1,108 @@ +import type { JsxTemplateResult } from "@ui5/webcomponents-base/dist/index.js"; +import Input from "../Input.js"; +import Icon from "../Icon.js"; +import decline from "@ui5/webcomponents-icons/dist/decline.js"; + +import List from "../List.js"; +import ResponsivePopover from "../ResponsivePopover.js"; +import Button from "../Button.js"; + +export default function InputSuggestionsTemplate(this: Input, valueStateMessage: (this: Input) => JsxTemplateResult, valueStateMessageInputIcon: (this: Input) => string) { + 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 suggestionsList(this: Input) { + return ( + + + + ); +}