diff --git a/packages/ai/src/Button.ts b/packages/ai/src/Button.ts index aaa897fde48b4..833f96a59bac6 100644 --- a/packages/ai/src/Button.ts +++ b/packages/ai/src/Button.ts @@ -60,6 +60,7 @@ type AIButtonAccessibilityAttributes = { root?: AIButtonRootAccessibilityAttribu * @public * @experimental The **@ui5/webcomponents-ai** package (including Button and ButtonState) is under active development and considered experimental. Component APIs are subject to change. * Furthermore, the package supports **Horizon** themes only. + * @ui5subcomponent ButtonState */ @customElement({ diff --git a/packages/ai/src/ToolbarLabel.ts b/packages/ai/src/ToolbarLabel.ts index d1224c71bc548..ef70fe307c10f 100644 --- a/packages/ai/src/ToolbarLabel.ts +++ b/packages/ai/src/ToolbarLabel.ts @@ -17,7 +17,7 @@ import ToolbarLabelTemplate from "./ToolbarLabelTemplate.js"; * @constructor * @extends ToolbarItem * @private - * @since 1.0.0-rc.1 + * @since 1.0.0 */ @customElement({ tag: "ui5-ai-toolbar-label", diff --git a/packages/compat/src/Table.ts b/packages/compat/src/Table.ts index 7f7def495ae8a..13f547e6a2b16 100644 --- a/packages/compat/src/Table.ts +++ b/packages/compat/src/Table.ts @@ -170,6 +170,10 @@ enum TableFocusTargetElement { * @extends UI5Element * @public * @deprecated Deprecated as of version 2.12.0, use `@ui5/webcomponents/dist/Table.js` instead. + * @ui5subcomponent TableCell + * @ui5subcomponent TableColumn + * @ui5subcomponent TableGroupRow + * @ui5subcomponent TableRow */ @customElement({ tag: "ui5-table", diff --git a/packages/fiori/src/BarcodeScannerDialog.ts b/packages/fiori/src/BarcodeScannerDialog.ts index 0acd3dc3da288..dadbb11438e76 100644 --- a/packages/fiori/src/BarcodeScannerDialog.ts +++ b/packages/fiori/src/BarcodeScannerDialog.ts @@ -73,7 +73,7 @@ type BarcodeScannerDialogScanErrorEventDetail = { * @constructor * @extends UI5Element * @public - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @customElement({ tag: "ui5-barcode-scanner-dialog", diff --git a/packages/fiori/src/DynamicPage.ts b/packages/fiori/src/DynamicPage.ts index 05c203029d215..9f8966407c663 100644 --- a/packages/fiori/src/DynamicPage.ts +++ b/packages/fiori/src/DynamicPage.ts @@ -118,6 +118,8 @@ const SCROLL_THRESHOLD = 10; // px * @csspart content - Used to style the content of the component * @csspart fit-content - Used to style the fit content container of the component. * @csspart footer - Used to style the footer of the component + * @ui5subcomponent DynamicPageHeader + * @ui5subcomponent DynamicPageTitle */ @customElement({ tag: "ui5-dynamic-page", diff --git a/packages/fiori/src/FilterItem.ts b/packages/fiori/src/FilterItem.ts index e035fb9b8d4e3..ae826fb451447 100644 --- a/packages/fiori/src/FilterItem.ts +++ b/packages/fiori/src/FilterItem.ts @@ -23,7 +23,7 @@ import type FilterItemOption from "./FilterItemOption.js"; * @constructor * @extends UI5Element * @abstract - * @since 1.0.0-rc.16 + * @since 1.0.0 * @public */ @customElement("ui5-filter-item") diff --git a/packages/fiori/src/FilterItemOption.ts b/packages/fiori/src/FilterItemOption.ts index 67d516c9f2d48..d57749f818b2a 100644 --- a/packages/fiori/src/FilterItemOption.ts +++ b/packages/fiori/src/FilterItemOption.ts @@ -21,7 +21,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement * @constructor * @extends UI5Element * @abstract - * @since 1.0.0-rc.16 + * @since 1.0.0 * @public */ @customElement("ui5-filter-item-option") diff --git a/packages/fiori/src/FlexibleColumnLayout.ts b/packages/fiori/src/FlexibleColumnLayout.ts index 5ac03a61d396d..4732ca7be1930 100644 --- a/packages/fiori/src/FlexibleColumnLayout.ts +++ b/packages/fiori/src/FlexibleColumnLayout.ts @@ -179,7 +179,7 @@ type FCLAccessibilityAttributes = { * @constructor * @extends UI5Element * @public - * @since 1.0.0-rc.8 + * @since 1.0.0 */ @customElement({ tag: "ui5-flexible-column-layout", diff --git a/packages/fiori/src/IllustratedMessage.ts b/packages/fiori/src/IllustratedMessage.ts index 9453c84c6c1ee..2594034e0e0e1 100644 --- a/packages/fiori/src/IllustratedMessage.ts +++ b/packages/fiori/src/IllustratedMessage.ts @@ -75,7 +75,7 @@ const getEffectiveIllustrationName = (name: string): string => { * @constructor * @extends UI5Element * @public - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @customElement({ @@ -257,7 +257,7 @@ class IllustratedMessage extends UI5Element { * * **Note:** Using this slot, the default subtitle text of illustration and the value of `subtitleText` property will be overwritten. * @public - * @since 1.0.0-rc.16 + * @since 1.0.0 */ @slot({ type: HTMLElement }) subtitle!: Slot; diff --git a/packages/fiori/src/MediaGallery.ts b/packages/fiori/src/MediaGallery.ts index 1c41ef2f396ef..8acb8d1171864 100644 --- a/packages/fiori/src/MediaGallery.ts +++ b/packages/fiori/src/MediaGallery.ts @@ -84,6 +84,7 @@ const COLUMNS_COUNT: Record = { * @extends UI5Element * @public * @since 1.1.0 + * @ui5subcomponent MediaGalleryItem */ @customElement({ tag: "ui5-media-gallery", diff --git a/packages/fiori/src/NotificationList.ts b/packages/fiori/src/NotificationList.ts index 4b4e35d61131a..b2232a211f4b4 100644 --- a/packages/fiori/src/NotificationList.ts +++ b/packages/fiori/src/NotificationList.ts @@ -64,6 +64,8 @@ type NotificationItemCloseEventDetail = NotificationItemEventDetail; * @extends UI5Element * @since 2.0.0 * @public + * @ui5subcomponent NotificationListGroupItem + * @ui5subcomponent NotificationListItem */ @customElement({ tag: "ui5-notification-list", diff --git a/packages/fiori/src/NotificationListGroupItem.ts b/packages/fiori/src/NotificationListGroupItem.ts index cad99a7c58ffb..24cbb9cbf3bfa 100644 --- a/packages/fiori/src/NotificationListGroupItem.ts +++ b/packages/fiori/src/NotificationListGroupItem.ts @@ -65,7 +65,7 @@ type NotificationListGroupItemToggleEventDetail = { * `import "@ui5/webcomponents-fiori/dist/NotificationListGroupItem.js";` * @constructor * @extends NotificationListItemBase - * @since 1.0.0-rc.8 + * @since 1.0.0 * @public */ @customElement({ diff --git a/packages/fiori/src/NotificationListItem.ts b/packages/fiori/src/NotificationListItem.ts index d41f736804163..48bc15b55b081 100644 --- a/packages/fiori/src/NotificationListItem.ts +++ b/packages/fiori/src/NotificationListItem.ts @@ -127,7 +127,7 @@ const ICON_PER_STATUS_DESIGN = { * * @constructor * @extends NotificationListItemBase - * @since 1.0.0-rc.8 + * @since 1.0.0 * @public * @csspart title-text - Used to style the titleText of the notification list item */ @@ -187,7 +187,7 @@ class NotificationListItem extends NotificationListItemBase { * and a `ShowMore/Less` button would be displayed. * @default "None" * @public - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @property() wrappingType: `${WrappingType}` = "None"; diff --git a/packages/fiori/src/NotificationListItemBase.ts b/packages/fiori/src/NotificationListItemBase.ts index a01f5bdf52df4..a765cc5dfd7a3 100644 --- a/packages/fiori/src/NotificationListItemBase.ts +++ b/packages/fiori/src/NotificationListItemBase.ts @@ -19,7 +19,7 @@ import { * The base class of the `NotificationListItem` and `NotificationListGroupItem`. * @constructor * @extends ListItemBase - * @since 1.0.0-rc.8 + * @since 1.0.0 * @public */ @customElement({}) @@ -48,7 +48,7 @@ class NotificationListItemBase extends ListItemBase { * Defines if a busy indicator would be displayed over the item. * @default false * @public - * @since 1.0.0-rc.8 + * @since 1.0.0 */ @property({ type: Boolean }) loading = false; diff --git a/packages/fiori/src/Page.ts b/packages/fiori/src/Page.ts index ded8dec4026d2..31f6fcab7078a 100644 --- a/packages/fiori/src/Page.ts +++ b/packages/fiori/src/Page.ts @@ -39,7 +39,7 @@ import PageCss from "./generated/themes/Page.css.js"; * `import "@ui5/webcomponents-fiori/dist/Page.js";` * @constructor * @extends UI5Element - * @since 1.0.0-rc.12 + * @since 1.0.0 * @public * @csspart content - Used to style the content section of the component */ diff --git a/packages/fiori/src/ProductSwitch.ts b/packages/fiori/src/ProductSwitch.ts index a84ae46ab27e9..a448ee018f916 100644 --- a/packages/fiori/src/ProductSwitch.ts +++ b/packages/fiori/src/ProductSwitch.ts @@ -61,7 +61,8 @@ interface IProductSwitchItem extends HTMLElement, ITabbable { * @constructor * @extends UI5Element * @public - * @since 1.0.0-rc.5 + * @since 1.0.0 + * @ui5subcomponent ProductSwitchItem */ @customElement({ tag: "ui5-product-switch", diff --git a/packages/fiori/src/ProductSwitchItem.ts b/packages/fiori/src/ProductSwitchItem.ts index 0d1d79dd34bde..e6ea75d08781e 100644 --- a/packages/fiori/src/ProductSwitchItem.ts +++ b/packages/fiori/src/ProductSwitchItem.ts @@ -34,7 +34,7 @@ import ProductSwitchItemCss from "./generated/themes/ProductSwitchItem.css.js"; * @extends UI5Element * @public * @implements {IProductSwitchItem} - * @since 1.0.0-rc.5 + * @since 1.0.0 */ @customElement({ tag: "ui5-product-switch-item", @@ -61,7 +61,7 @@ class ProductSwitchItem extends UI5Element implements IProductSwitchItem { /** * Defines the title of the component. * @default undefined - * @since 1.0.0-rc.15 + * @since 1.0.0 * @public */ @property() @@ -70,7 +70,7 @@ class ProductSwitchItem extends UI5Element implements IProductSwitchItem { /** * Defines the subtitle of the component. * @default undefined - * @since 1.0.0-rc.15 + * @since 1.0.0 * @public */ @property() diff --git a/packages/fiori/src/Search.ts b/packages/fiori/src/Search.ts index 2cf15fa3563c6..b42199bb7538b 100755 --- a/packages/fiori/src/Search.ts +++ b/packages/fiori/src/Search.ts @@ -77,6 +77,11 @@ type SearchEventDetails = { * @experimental * @csspart popover - Used to style the suggestions popup * @since 2.24.0 + * @ui5subcomponent SearchItem + * @ui5subcomponent SearchItemGroup + * @ui5subcomponent SearchItemShowMore + * @ui5subcomponent SearchMessageArea + * @ui5subcomponent SearchScope */ @customElement({ tag: "ui5-search", diff --git a/packages/fiori/src/ShellBar.ts b/packages/fiori/src/ShellBar.ts index 3bf8a17ac653a..b95e264fbdfc4 100644 --- a/packages/fiori/src/ShellBar.ts +++ b/packages/fiori/src/ShellBar.ts @@ -178,7 +178,11 @@ type ShellBarSearchFieldClearEventDetail = { * @constructor * @extends UI5Element * @public - * @since 0.8.0 + * @since 1.0.0 + * @ui5subcomponent ShellBarBranding + * @ui5subcomponent ShellBarItem + * @ui5subcomponent ShellBarSearch + * @ui5subcomponent ShellBarSpacer */ @customElement({ @@ -236,7 +240,7 @@ type ShellBarSearchFieldClearEventDetail = { /** * Fired, when the logo is activated. * @param {HTMLElement} targetRef dom ref of the activated element - * @since 0.10 + * @since 1.0.0 * @public */ @event("logo-click", { @@ -248,7 +252,7 @@ type ShellBarSearchFieldClearEventDetail = { * * **Note:** You can prevent closing of overflow popover by calling `event.preventDefault()`. * @param {HTMLElement} item DOM ref of the activated list item - * @since 0.10 + * @since 1.0.0 * @public */ @event("menu-item-click", { @@ -387,7 +391,7 @@ class ShellBar extends UI5Element { * * **Note:** We recommend not using the `size` attribute of `ui5-avatar` because * it should have specific size by design in the context of `ui5-shellbar` profile. - * @since 1.0.0-rc.6 + * @since 1.0.0 * @public */ @slot() @@ -601,7 +605,7 @@ class ShellBar extends UI5Element { /** * Defines the logo of the `ui5-shellbar`. * For example, you can use `ui5-avatar` or `img` elements as logo. - * @since 1.0.0-rc.8 + * @since 1.0.0 * @public */ @slot() @@ -611,7 +615,7 @@ class ShellBar extends UI5Element { * Defines the items displayed in menu after a click on a start button. * * **Note:** You can use the `` and its ancestors. - * @since 0.10 + * @since 1.0.0 * @public */ @slot() @@ -1131,7 +1135,7 @@ class ShellBar extends UI5Element { * Returns the `logo` DOM ref. * @public * @default null - * @since 1.0.0-rc.16 + * @since 1.0.0 */ get logoDomRef(): HTMLElement | null { return this.shadowRoot!.querySelector(`*[data-ui5-stable="logo"]`); @@ -1141,7 +1145,7 @@ class ShellBar extends UI5Element { * Returns the `notifications` icon DOM ref. * @public * @default null - * @since 1.0.0-rc.16 + * @since 1.0.0 */ get notificationsDomRef(): HTMLElement | null { if (this.isHidden(ShellBarActions.Notifications)) { @@ -1154,7 +1158,7 @@ class ShellBar extends UI5Element { * Returns the `overflow` icon DOM ref. * @public * @default null - * @since 1.0.0-rc.16 + * @since 1.0.0 */ get overflowDomRef(): HTMLElement | null { return this.shadowRoot!.querySelector(`*[data-ui5-stable="overflow"]`); @@ -1164,7 +1168,7 @@ class ShellBar extends UI5Element { * Returns the `profile` icon DOM ref. * @public * @default null - * @since 1.0.0-rc.16 + * @since 1.0.0 */ get profileDomRef(): HTMLElement | null { return this.shadowRoot!.querySelector(`*[data-ui5-stable="profile"]`); @@ -1174,7 +1178,7 @@ class ShellBar extends UI5Element { * Returns the `product-switch` icon DOM ref. * @public * @default null - * @since 1.0.0-rc.16 + * @since 1.0.0 */ get productSwitchDomRef(): HTMLElement | null { return this.shadowRoot!.querySelector(`*[data-ui5-stable="product-switch"]`); diff --git a/packages/fiori/src/ShellBarItem.ts b/packages/fiori/src/ShellBarItem.ts index 0707b2141b2b3..6480c8d0797d5 100644 --- a/packages/fiori/src/ShellBarItem.ts +++ b/packages/fiori/src/ShellBarItem.ts @@ -69,7 +69,7 @@ class ShellBarItem extends UI5Element { /** * Defines the count displayed in badge. * @default undefined - * @since 1.0.0-rc.6 + * @since 1.0.0 * @public */ @property() diff --git a/packages/fiori/src/SideNavigation.ts b/packages/fiori/src/SideNavigation.ts index 56c2c82ce824c..8976eddf024cd 100644 --- a/packages/fiori/src/SideNavigation.ts +++ b/packages/fiori/src/SideNavigation.ts @@ -107,8 +107,11 @@ type PopupSideNavigationItem = SideNavigationItem & { associatedItem: SideNaviga * `import "@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js";` (for `ui5-side-navigation-sub-item`) * @constructor * @extends UI5Element - * @since 1.0.0-rc.8 + * @since 1.0.0 * @public + * @ui5subcomponent SideNavigationGroup + * @ui5subcomponent SideNavigationItem + * @ui5subcomponent SideNavigationSubItem */ @customElement({ @@ -214,7 +217,7 @@ class SideNavigation extends UI5Element { * **Note:** The header is displayed when the component is expanded - the property `collapsed` is false; * * @public - * @since 1.0.0-rc.11 + * @since 1.0.0 */ @slot() header!: Slot; diff --git a/packages/fiori/src/SideNavigationItem.ts b/packages/fiori/src/SideNavigationItem.ts index 078b11afe063e..74c99df666af6 100644 --- a/packages/fiori/src/SideNavigationItem.ts +++ b/packages/fiori/src/SideNavigationItem.ts @@ -46,7 +46,7 @@ import createInstanceChecker from "@ui5/webcomponents-base/dist/util/createInsta * @extends SideNavigationSelectableItemBase * @abstract * @public - * @since 1.0.0-rc.8 + * @since 1.0.0 */ @customElement({ tag: "ui5-side-navigation-item", diff --git a/packages/fiori/src/SideNavigationSubItem.ts b/packages/fiori/src/SideNavigationSubItem.ts index eb33f39ef86d7..b3430c49dfd72 100644 --- a/packages/fiori/src/SideNavigationSubItem.ts +++ b/packages/fiori/src/SideNavigationSubItem.ts @@ -24,7 +24,7 @@ import SideNavigationSubItemCss from "./generated/themes/SideNavigationSubItem.c * @extends SideNavigationSelectableItemBase * @public * @abstract - * @since 1.0.0-rc.8 + * @since 1.0.0 */ @customElement({ tag: "ui5-side-navigation-sub-item", diff --git a/packages/fiori/src/SortItem.ts b/packages/fiori/src/SortItem.ts index d9d04f6768014..75ed73ba22bd0 100644 --- a/packages/fiori/src/SortItem.ts +++ b/packages/fiori/src/SortItem.ts @@ -21,7 +21,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement * @constructor * @extends UI5Element * @abstract - * @since 1.0.0-rc.16 + * @since 1.0.0 * @public */ @customElement("ui5-sort-item") diff --git a/packages/fiori/src/Timeline.ts b/packages/fiori/src/Timeline.ts index 11b23a24aeea9..874820d44d7e0 100644 --- a/packages/fiori/src/Timeline.ts +++ b/packages/fiori/src/Timeline.ts @@ -90,7 +90,9 @@ const GROWING_WITH_SCROLL_DEBOUNCE_RATE = 250; // ms * @constructor * @extends UI5Element * @public - * @since 0.8.0 + * @since 1.0.0 + * @ui5subcomponent TimelineGroupItem + * @ui5subcomponent TimelineItem */ @customElement({ tag: "ui5-timeline", @@ -118,7 +120,7 @@ class Timeline extends UI5Element { /** * Defines the items orientation. * @default "Vertical" - * @since 1.0.0-rc.15 + * @since 1.0.0 * @public */ @property() diff --git a/packages/fiori/src/UploadCollection.ts b/packages/fiori/src/UploadCollection.ts index 24b0704e80641..a4a3e896887a9 100644 --- a/packages/fiori/src/UploadCollection.ts +++ b/packages/fiori/src/UploadCollection.ts @@ -56,7 +56,8 @@ type UploadCollectionItemDeleteEventDetail = { * @constructor * @extends UI5Element * @public - * @since 1.0.0-rc.7 + * @since 1.0.0 + * @ui5subcomponent UploadCollectionItem */ @customElement({ tag: "ui5-upload-collection", @@ -150,7 +151,7 @@ class UploadCollection extends UI5Element { * Defines the accessible ARIA name of the component. * @default undefined * @public - * @since 1.0.0-rc.16 + * @since 1.0.0 */ @property() accessibleName?: string; diff --git a/packages/fiori/src/UploadCollectionItem.ts b/packages/fiori/src/UploadCollectionItem.ts index e1393b6d1ca5b..b05d35d5ee7cf 100644 --- a/packages/fiori/src/UploadCollectionItem.ts +++ b/packages/fiori/src/UploadCollectionItem.ts @@ -54,7 +54,7 @@ import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js"; * @extends ListItem * @public * @slot {Node[]} default - Hold the description of the `ui5-upload-collection-item`. Will be shown below the file name. - * @since 1.0.0-rc.7 + * @since 1.0.0 */ @customElement({ tag: "ui5-upload-collection-item", @@ -106,7 +106,7 @@ import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js"; }) /** - * @since 1.0.0-rc.8 + * @since 1.0.0 * @private */ @event("focus-requested", { diff --git a/packages/fiori/src/UserMenu.ts b/packages/fiori/src/UserMenu.ts index e8b26d0be842a..61ff34b297cd8 100644 --- a/packages/fiori/src/UserMenu.ts +++ b/packages/fiori/src/UserMenu.ts @@ -63,6 +63,9 @@ type UserMenuOtherAccountClickEventDetail = { * @extends UI5Element * @public * @since 2.5.0 + * @ui5subcomponent UserMenuAccount + * @ui5subcomponent UserMenuItem + * @ui5subcomponent UserMenuItemGroup */ @customElement({ diff --git a/packages/fiori/src/UserSettingsDialog.ts b/packages/fiori/src/UserSettingsDialog.ts index ca76e4b50f819..2a10d5459ca1b 100644 --- a/packages/fiori/src/UserSettingsDialog.ts +++ b/packages/fiori/src/UserSettingsDialog.ts @@ -53,6 +53,12 @@ type UserSettingsBeforeCloseEventDetail = PopupBeforeCloseEventDetail; * @extends UI5Element * @public * @since 2.8.0 + * @ui5subcomponent UserSettingsAccountView + * @ui5subcomponent UserSettingsAppearanceView + * @ui5subcomponent UserSettingsAppearanceViewGroup + * @ui5subcomponent UserSettingsAppearanceViewItem + * @ui5subcomponent UserSettingsItem + * @ui5subcomponent UserSettingsView */ @customElement({ tag: "ui5-user-settings-dialog", diff --git a/packages/fiori/src/ViewSettingsDialog.ts b/packages/fiori/src/ViewSettingsDialog.ts index 7f4d5f7f90d90..b303b2f7850f5 100644 --- a/packages/fiori/src/ViewSettingsDialog.ts +++ b/packages/fiori/src/ViewSettingsDialog.ts @@ -119,9 +119,14 @@ type ViewSettingsDialogInternalMode = `${ViewSettingsDialogMode}` | ViewSettings * `import "@ui5/webcomponents-fiori/dist/ViewSettingsDialog.js";` * @constructor * @extends UI5Element - * @since 1.0.0-rc.16 + * @since 1.0.0 * @public * @csspart header - Used to style the header. + * @ui5subcomponent FilterItem + * @ui5subcomponent FilterItemOption + * @ui5subcomponent GroupItem + * @ui5subcomponent SortItem + * @ui5subcomponent ViewSettingsDialogCustomTab */ @customElement({ tag: "ui5-view-settings-dialog", @@ -292,7 +297,7 @@ class ViewSettingsDialog extends UI5Element { /** * Defnies the current mode of the component. - * @since 1.0.0-rc.16 + * @since 1.0.0 * @private */ @property({ noAttribute: true }) @@ -300,7 +305,7 @@ class ViewSettingsDialog extends UI5Element { /** * When in Filter By mode, defines whether we need to show the list of keys, or the list with values. - * @since 1.0.0-rc.16 + * @since 1.0.0 * @private */ @property({ type: Boolean, noAttribute: true }) diff --git a/packages/fiori/src/Wizard.ts b/packages/fiori/src/Wizard.ts index af7dd5a0377ce..68100cc0de027 100644 --- a/packages/fiori/src/Wizard.ts +++ b/packages/fiori/src/Wizard.ts @@ -169,10 +169,11 @@ type StepInfo = { * `import "@ui5/webcomponents-fiori/dist/Wizard.js";` (includes ) * @constructor * @extends UI5Element - * @since 1.0.0-rc.10 + * @since 1.0.0 * @public * @csspart navigator - Used to style the progress navigator of the `ui5-wizard`. * @csspart step-content - Used to style a `ui5-wizard-step` container. + * @ui5subcomponent WizardStep */ @customElement({ tag: "ui5-wizard", @@ -248,7 +249,7 @@ class Wizard extends UI5Element { * and values out of the range will be normalized to 0.5 and 1 respectively. * @private * @default 0.7 - * @since 1.0.0-rc.13 + * @since 1.0.0 */ @property({ type: Number }) stepSwitchThreshold = STEP_SWITCH_THRESHOLDS.DEFAULT; diff --git a/packages/fiori/src/WizardStep.ts b/packages/fiori/src/WizardStep.ts index 8864dde061d56..6ebd3c6fb2706 100644 --- a/packages/fiori/src/WizardStep.ts +++ b/packages/fiori/src/WizardStep.ts @@ -23,7 +23,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js"; * @constructor * @extends UI5Element * @abstract - * @since 1.0.0-rc.10 + * @since 1.0.0 * @public * @slot {Node[]} default - Defines the step content. */ @@ -36,7 +36,7 @@ class WizardStep extends UI5Element { * **Note:** The text is displayed in the `ui5-wizard` navigation header. * @default undefined * @public - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @property() titleText?: string @@ -47,7 +47,7 @@ class WizardStep extends UI5Element { * **Note:** the text is displayed in the `ui5-wizard` navigation header. * @default undefined * @public - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @property() subtitleText?: string diff --git a/packages/fiori/src/WizardTab.ts b/packages/fiori/src/WizardTab.ts index 784570b03465d..d26c229dd5a24 100644 --- a/packages/fiori/src/WizardTab.ts +++ b/packages/fiori/src/WizardTab.ts @@ -66,7 +66,7 @@ class WizardTab extends UI5Element implements ITabbable { * Defines the `titleText` of the step. * @default undefined * @private - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @property() titleText?: string @@ -75,7 +75,7 @@ class WizardTab extends UI5Element implements ITabbable { * Defines the `subtitleText` of the step. * @default undefined * @private - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @property() subtitleText?: string diff --git a/packages/fiori/src/types/ViewSettingsDialogMode.ts b/packages/fiori/src/types/ViewSettingsDialogMode.ts index 5631bc97a6d9c..ef34f2fdd0cc4 100644 --- a/packages/fiori/src/types/ViewSettingsDialogMode.ts +++ b/packages/fiori/src/types/ViewSettingsDialogMode.ts @@ -5,14 +5,14 @@ enum ViewSettingsDialogMode { /** * Default type - * @since 1.0.0-rc.16 + * @since 1.0.0 * @public */ Sort = "Sort", /** * Filter type - * @since 1.0.0-rc.16 + * @since 1.0.0 * @public */ Filter = "Filter", diff --git a/packages/main/src/Avatar.ts b/packages/main/src/Avatar.ts index 07c62f72ed79b..bb9d7fd161cc8 100644 --- a/packages/main/src/Avatar.ts +++ b/packages/main/src/Avatar.ts @@ -57,9 +57,10 @@ type AvatarAccessibilityAttributes = Pick; * `import "@ui5/webcomponents/dist/Avatar.js";` * @constructor * @extends UI5Element - * @since 1.0.0-rc.6 + * @since 1.0.0 * @implements {IAvatarGroupItem} * @public + * @ui5subcomponent AvatarBadge */ @customElement({ tag: "ui5-avatar", @@ -120,7 +121,7 @@ class Avatar extends UI5Element implements ITabbable, IAvatarGroupItem { * In that case, the avatar will always be rendered as interactive. * @default "Image" * @public - * @since 2.20 + * @since 2.20.0 */ @property() mode: `${AvatarMode}` = "Image"; @@ -214,7 +215,7 @@ class Avatar extends UI5Element implements ITabbable, IAvatarGroupItem { * If not provided a default text alternative will be set, if present. * @default undefined * @public - * @since 1.0.0-rc.7 + * @since 1.0.0 */ @property() accessibleName?: string; @@ -256,7 +257,7 @@ class Avatar extends UI5Element implements ITabbable, IAvatarGroupItem { *     `visibility: hidden;`
* `}` * @public - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @slot({ type: HTMLElement, "default": true }) image!: DefaultSlot; diff --git a/packages/main/src/AvatarGroup.ts b/packages/main/src/AvatarGroup.ts index 7804a6d60844f..0f55a91300476 100644 --- a/packages/main/src/AvatarGroup.ts +++ b/packages/main/src/AvatarGroup.ts @@ -142,7 +142,7 @@ type AvatarGroupClickEventDetail = { * - [Space] / [Enter] or [Return] - Trigger `ui5-click` event * @constructor * @extends UI5Element - * @since 1.0.0-rc.11 + * @since 1.0.0 * @public */ @@ -158,7 +158,7 @@ type AvatarGroupClickEventDetail = { * @param {HTMLElement} targetRef The DOM ref of the clicked item. * @param {boolean} overflowButtonClicked indicates if the overflow button is clicked * @public - * @since 1.0.0-rc.11 + * @since 1.0.0 */ @event("click") @@ -166,7 +166,7 @@ type AvatarGroupClickEventDetail = { * Fired when the count of visible `ui5-avatar` elements in the * component has changed * @public - * @since 1.0.0-rc.13 + * @since 1.0.0 */ @event("overflow") class AvatarGroup extends UI5Element { @@ -247,7 +247,7 @@ class AvatarGroup extends UI5Element { * * **Note:** If this slot is not used, the component will display the built-in overflow button. * @public - * @since 1.0.0-rc.13 + * @since 1.0.0 */ @slot() overflowButton!: Slot; diff --git a/packages/main/src/Bar.ts b/packages/main/src/Bar.ts index fc6b293e5fd1b..1f7607c81d061 100644 --- a/packages/main/src/Bar.ts +++ b/packages/main/src/Bar.ts @@ -51,7 +51,7 @@ import type { AriaRole } from "@ui5/webcomponents-base/dist/types.js"; * @constructor * @extends UI5Element * @public - * @since 1.0.0-rc.11 + * @since 1.0.0 */ @customElement({ tag: "ui5-bar", diff --git a/packages/main/src/Breadcrumbs.ts b/packages/main/src/Breadcrumbs.ts index b92bd2bb08a72..c616bf0797d9b 100644 --- a/packages/main/src/Breadcrumbs.ts +++ b/packages/main/src/Breadcrumbs.ts @@ -87,7 +87,8 @@ type FocusAdaptor = ITabbable & { * @extends UI5Element * @implements {IToolbarItemContent} * @public - * @since 1.0.0-rc.15 + * @since 1.0.0 + * @ui5subcomponent BreadcrumbsItem */ @customElement({ tag: "ui5-breadcrumbs", diff --git a/packages/main/src/BreadcrumbsItem.ts b/packages/main/src/BreadcrumbsItem.ts index 9cccf9dd35fa0..dbe102a841fcc 100644 --- a/packages/main/src/BreadcrumbsItem.ts +++ b/packages/main/src/BreadcrumbsItem.ts @@ -23,7 +23,7 @@ type BreadcrumbsItemClickEventDetail = { * @constructor * @extends UI5Element * @public - * @since 1.0.0-rc.15 + * @since 1.0.0 * @abstract */ @customElement("ui5-breadcrumbs-item") diff --git a/packages/main/src/BusyIndicator.ts b/packages/main/src/BusyIndicator.ts index 736e3e925d77c..8b7db454861e1 100644 --- a/packages/main/src/BusyIndicator.ts +++ b/packages/main/src/BusyIndicator.ts @@ -57,7 +57,7 @@ import busyIndicatorCss from "./generated/themes/BusyIndicator.css.js"; * @extends UI5Element * @public * @slot {Array} default - Determines the content over which the component will appear. - * @since 0.12.0 + * @since 1.0.0 */ @customElement({ tag: "ui5-busy-indicator", @@ -71,7 +71,7 @@ class BusyIndicator extends UI5Element { * Defines text to be displayed below the component. It can be used to inform the user of the current operation. * @public * @default undefined - * @since 1.0.0-rc.7 + * @since 1.0.0 */ @property() text?: string; diff --git a/packages/main/src/Button.ts b/packages/main/src/Button.ts index e880b19bc5ad8..173e6fe68e9b4 100644 --- a/packages/main/src/Button.ts +++ b/packages/main/src/Button.ts @@ -105,6 +105,7 @@ type ButtonClickEventDetail = { * @extends UI5Element * @implements { IButton } * @public + * @ui5subcomponent ButtonBadge */ @customElement({ tag: "ui5-button", @@ -232,7 +233,7 @@ class Button extends UI5Element implements IButton { * Defines the accessible ARIA name of the component. * @default undefined * @public - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @property() accessibleName?: string; @@ -298,7 +299,7 @@ class Button extends UI5Element implements IButton { * * @default "Button" * @public - * @since 1.23 + * @since 1.23.0 */ @property() accessibleRole: `${ButtonAccessibleRole}` = "Button"; @@ -380,7 +381,7 @@ class Button extends UI5Element implements IButton { forcedTabIndex = "0"; /** - * @since 1.0.0-rc.13 + * @since 1.0.0 * @private */ @property({ type: Boolean }) diff --git a/packages/main/src/Calendar.ts b/packages/main/src/Calendar.ts index 06cd361ae13e0..4b701b39dae58 100644 --- a/packages/main/src/Calendar.ts +++ b/packages/main/src/Calendar.ts @@ -224,7 +224,10 @@ type DisabledDateRangeT = { * @csspart year-range-picker-root - Used to style the year range picker root container. * @csspart calendar-header-middle-button - Used to style the calendar header middle buttons (month/year/year-range buttons). * @csspart calendar-header-arrow-button - Used to style the calendar header navigation arrow buttons (previous/next buttons). - * @since 1.0.0-rc.11 + * @since 1.0.0 + * @ui5subcomponent CalendarDate + * @ui5subcomponent CalendarDateRange + * @ui5subcomponent SpecialCalendarDate */ @customElement({ tag: "ui5-calendar", diff --git a/packages/main/src/CalendarLegend.ts b/packages/main/src/CalendarLegend.ts index cde10c6f05e6b..2fb38df3638ec 100644 --- a/packages/main/src/CalendarLegend.ts +++ b/packages/main/src/CalendarLegend.ts @@ -43,6 +43,7 @@ type CalendarLegendItemSelectionChangeEventDetail = { * @extends UI5Element * @public * @since 1.23.0 + * @ui5subcomponent CalendarLegendItem */ @customElement({ tag: "ui5-calendar-legend", diff --git a/packages/main/src/Card.ts b/packages/main/src/Card.ts index b5b40de43ad17..e61f8e55bc3ae 100644 --- a/packages/main/src/Card.ts +++ b/packages/main/src/Card.ts @@ -39,6 +39,7 @@ import cardCss from "./generated/themes/Card.css.js"; * @public * @csspart root - Used to style the root DOM element of the card component * @csspart content - Used to style the content of the card + * @ui5subcomponent CardHeader */ @customElement({ tag: "ui5-card", @@ -54,7 +55,7 @@ class Card extends UI5Element { * **Note:** `accessibleName` should be always set, unless `accessibleNameRef` is set. * @default undefined * @public - * @since 1.0.0-rc.16 + * @since 1.0.0 */ @property() accessibleName?: string; @@ -63,7 +64,7 @@ class Card extends UI5Element { * Defines the IDs of the elements that label the component. * @default undefined * @public - * @since 1.0.0-rc.16 + * @since 1.0.0 */ @property() accessibleNameRef?: string; @@ -79,7 +80,7 @@ class Card extends UI5Element { * Defines the header of the component. * * **Note:** Use `ui5-card-header` for the intended design. - * @since 1.0.0-rc.15 + * @since 1.0.0 * @public */ @slot({ type: HTMLElement, invalidateOnChildChange: true }) diff --git a/packages/main/src/CardHeader.ts b/packages/main/src/CardHeader.ts index dea46d4467f5f..7261f1781ac47 100644 --- a/packages/main/src/CardHeader.ts +++ b/packages/main/src/CardHeader.ts @@ -37,7 +37,7 @@ import cardHeaderCss from "./generated/themes/CardHeader.css.js"; * @constructor * @extends UI5Element * @public - * @since 1.0.0-rc.15 + * @since 1.0.0 * @csspart root - Used to style the root DOM element of the CardHeader * @csspart title - Used to style the title of the CardHeader * @csspart subtitle - Used to style the subtitle of the CardHeader diff --git a/packages/main/src/Carousel.ts b/packages/main/src/Carousel.ts index 261cba06d25a0..296a570ba174b 100644 --- a/packages/main/src/Carousel.ts +++ b/packages/main/src/Carousel.ts @@ -117,7 +117,7 @@ type ItemsInfo = { * `import "@ui5/webcomponents/dist/Carousel.js";` * @constructor * @extends UI5Element - * @since 1.0.0-rc.6 + * @since 1.0.0 * @public * @csspart content - Used to style the content of the component */ @@ -135,7 +135,7 @@ type ItemsInfo = { * based on the `items-per-page` property. * @param {Integer} selectedIndex the current selected index * @public - * @since 1.0.0-rc.7 + * @since 1.0.0 */ @event("navigate", { bubbles: true, @@ -149,7 +149,7 @@ class Carousel extends UI5Element { * Defines the accessible name of the component. * @default undefined * @public - * @since 1.24 + * @since 1.24.0 */ @property() accessibleName?: string; @@ -158,7 +158,7 @@ class Carousel extends UI5Element { * Defines the IDs of the elements that label the input. * @default undefined * @public - * @since 1.24 + * @since 1.24.0 */ @property() accessibleNameRef?: string; @@ -190,7 +190,7 @@ class Carousel extends UI5Element { * Defines the visibility of the navigation arrows. * If set to true the navigation arrows will be hidden. * - * @since 1.0.0-rc.15 + * @since 1.0.0 * @default false * @public */ @@ -200,7 +200,7 @@ class Carousel extends UI5Element { /** * Defines the visibility of the page indicator. * If set to true the page indicator will be hidden. - * @since 1.0.0-rc.15 + * @since 1.0.0 * @default false * @public */ @@ -213,7 +213,7 @@ class Carousel extends UI5Element { * * - `Default` - The page indicator will be visualized as dots if there are fewer than 9 pages. If there are more pages, the page indicator will switch to displaying the current page and the total number of pages. (e.g. X of Y) * - `Numeric` - The page indicator will display the current page and the total number of pages. (e.g. X of Y) - * @since 1.10 + * @since 1.10.0 * @default "Default" * @public */ @@ -222,7 +222,7 @@ class Carousel extends UI5Element { /** * Defines the carousel's background design. - * @since 1.14 + * @since 1.14.0 * @default "Translucent" * @public */ @@ -231,7 +231,7 @@ class Carousel extends UI5Element { /** * Defines the page indicator background design. - * @since 1.14 + * @since 1.14.0 * @default "Solid" * @public */ @@ -240,7 +240,7 @@ class Carousel extends UI5Element { /** * Defines the page indicator border design. - * @since 1.14 + * @since 1.14.0 * @default "Solid" * @public */ @@ -285,7 +285,7 @@ class Carousel extends UI5Element { /** * If set to true navigation arrows are shown. * @private - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @property({ type: Boolean, noAttribute: true }) _visibleNavigationArrows = false; @@ -301,7 +301,7 @@ class Carousel extends UI5Element { /** * Defines the current page index, which determines the first visible item. * @private - * @since 2.16.0-r.c1 + * @since 2.16.0 */ @property({ type: Number, noAttribute: true }) _currentPageIndex: number = 0; @@ -675,7 +675,7 @@ class Carousel extends UI5Element { /** * Changes the currently displayed page. * @param itemIndex The index of the target item - * @since 1.0.0-rc.15 + * @since 1.0.0 * @public */ navigateTo(itemIndex: number): void { @@ -725,7 +725,7 @@ class Carousel extends UI5Element { /** * The indices of the currently visible items of the component. * @public - * @since 1.0.0-rc.15 + * @since 1.0.0 * @default [] */ get visibleItemsIndices() : Array { diff --git a/packages/main/src/CheckBox.ts b/packages/main/src/CheckBox.ts index 0938c24e047a1..86c29c9805831 100644 --- a/packages/main/src/CheckBox.ts +++ b/packages/main/src/CheckBox.ts @@ -194,7 +194,7 @@ class CheckBox extends UI5Element implements IFormInputElement { * - If the component is not checked, it will be displayed as not checked regardless value of the indeterminate attribute * @default false * @public - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @property({ type: Boolean }) indeterminate = false; diff --git a/packages/main/src/ColorPalette.ts b/packages/main/src/ColorPalette.ts index a6e2254d26b97..e239adf29a6c2 100644 --- a/packages/main/src/ColorPalette.ts +++ b/packages/main/src/ColorPalette.ts @@ -76,8 +76,9 @@ type ColorPaletteItemClickEventDetail = { * `import "@ui5/webcomponents/dist/ColorPalette.js";` * @constructor * @extends UI5Element - * @since 1.0.0-rc.12 + * @since 1.0.0 * @public + * @ui5subcomponent ColorPaletteItem */ @customElement({ tag: "ui5-color-palette", @@ -89,7 +90,7 @@ type ColorPaletteItemClickEventDetail = { /** * Fired when the user selects a color. * @public - * @since 1.0.0-rc.15 + * @since 1.0.0 * @param {string} color the selected color */ @event("item-click") @@ -101,7 +102,7 @@ class ColorPalette extends UI5Element { /** * Defines whether the user can see the last used colors in the bottom of the component * @private - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @property({ type: Boolean }) showRecentColors = false; @@ -110,7 +111,7 @@ class ColorPalette extends UI5Element { * Defines whether the user can choose a custom color from a color picker * * @private - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @property({ type: Boolean }) showMoreColors = false; @@ -119,7 +120,7 @@ class ColorPalette extends UI5Element { * Defines whether the user can choose the default color from a button. * @default false * @private - * @since 1.0.0-rc.16 + * @since 1.0.0 */ @property({ type: Boolean }) showDefaultColor = false; @@ -129,7 +130,7 @@ class ColorPalette extends UI5Element { * * **Note:** The default color should be a part of the ColorPalette colors` * @private - * @since 1.0.0-rc.16 + * @since 1.0.0 */ @property() defaultColor?: string; diff --git a/packages/main/src/ColorPaletteItem.ts b/packages/main/src/ColorPaletteItem.ts index 055558794e3d5..f90060a44097b 100644 --- a/packages/main/src/ColorPaletteItem.ts +++ b/packages/main/src/ColorPaletteItem.ts @@ -27,7 +27,7 @@ type ColorPaletteItemNativeClickEventDetail = { * The `ui5-color-palette-item` component represents a color in the the `ui5-color-palette`. * @constructor * @extends UI5Element - * @since 1.0.0-rc.12 + * @since 1.0.0 * @implements { IColorPaletteItem } * @public */ @@ -112,7 +112,7 @@ class ColorPaletteItem extends UI5Element implements IColorPaletteItem { /** * @private - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @property({ type: Boolean }) _disabled = false; diff --git a/packages/main/src/ColorPalettePopover.ts b/packages/main/src/ColorPalettePopover.ts index 0b4d18ceee759..9a11af077c51e 100644 --- a/packages/main/src/ColorPalettePopover.ts +++ b/packages/main/src/ColorPalettePopover.ts @@ -49,7 +49,7 @@ type ColorPalettePopoverItemClickEventDetail = ColorPaletteItemClickEventDetail; * @constructor * @extends UI5Element * @public - * @since 1.0.0-rc.16 + * @since 1.0.0 */ @customElement({ tag: "ui5-color-palette-popover", @@ -225,7 +225,7 @@ class ColorPalettePopover extends UI5Element { /** * Returns if the component is opened. * @protected - * @since 1.0.0-rc.16 + * @since 1.0.0 */ isOpen() { return this.open; diff --git a/packages/main/src/ColorPicker.ts b/packages/main/src/ColorPicker.ts index de337073b2e64..1caf642fb90c9 100644 --- a/packages/main/src/ColorPicker.ts +++ b/packages/main/src/ColorPicker.ts @@ -85,7 +85,7 @@ type ColorChannelInput = { * * `import "@ui5/webcomponents/dist/ColorPicker.js";` * @constructor - * @since 1.0.0-rc.12 + * @since 1.0.0 * @extends UI5Element * @public */ diff --git a/packages/main/src/ComboBox.ts b/packages/main/src/ComboBox.ts index 9674c08eab19f..33ff26be1ee42 100644 --- a/packages/main/src/ComboBox.ts +++ b/packages/main/src/ComboBox.ts @@ -198,7 +198,10 @@ type ComboBoxSelectionChangeEventDetail = { * @constructor * @extends UI5Element * @public - * @since 1.0.0-rc.6 + * @since 1.0.0 + * @ui5subcomponent ComboBoxItem + * @ui5subcomponent ComboBoxItemCustom + * @ui5subcomponent ComboBoxItemGroup */ @customElement({ tag: "ui5-combobox", @@ -412,7 +415,7 @@ class ComboBox extends UI5Element implements IFormInputElement { * Defines the accessible ARIA name of the component. * @default undefined * @public - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @property() accessibleName?: string; @@ -421,7 +424,7 @@ class ComboBox extends UI5Element implements IFormInputElement { * Receives id(or many ids) of the elements that label the component * @default undefined * @public - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @property() accessibleNameRef?: string; @@ -497,7 +500,7 @@ class ComboBox extends UI5Element implements IFormInputElement { * * **Note:** The `valueStateMessage` would be displayed, * when the `ui5-combobox` is in `Information`, `Critical` or `Negative` value state. - * @since 1.0.0-rc.9 + * @since 1.0.0 * @public */ @slot() @@ -506,7 +509,7 @@ class ComboBox extends UI5Element implements IFormInputElement { /** * Defines the icon to be displayed in the input field. * @public - * @since 1.0.0-rc.9 + * @since 1.0.0 */ @slot() icon!: Slot; diff --git a/packages/main/src/ComboBoxItem.ts b/packages/main/src/ComboBoxItem.ts index c8331934b8f1e..2a39d90c12f5a 100644 --- a/packages/main/src/ComboBoxItem.ts +++ b/packages/main/src/ComboBoxItem.ts @@ -32,7 +32,7 @@ class ComboBoxItem extends ListItemBase implements IComboBoxItem { /** * Defines the additional text of the component. * @default undefined - * @since 1.0.0-rc.11 + * @since 1.0.0 * @public */ @property() diff --git a/packages/main/src/ComboBoxItemGroup.ts b/packages/main/src/ComboBoxItemGroup.ts index f00c8846fa952..b17cfdbf9a94d 100644 --- a/packages/main/src/ComboBoxItemGroup.ts +++ b/packages/main/src/ComboBoxItemGroup.ts @@ -16,7 +16,7 @@ import ComboBoxItemGroupTemplate from "./ComboBoxItemGroupTemplate.js"; * @abstract * @public * @implements {IComboBoxItem} - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @customElement({ tag: "ui5-cb-item-group", diff --git a/packages/main/src/DateComponentBase.ts b/packages/main/src/DateComponentBase.ts index 91be57d5c0a45..edf1ca43b70ff 100644 --- a/packages/main/src/DateComponentBase.ts +++ b/packages/main/src/DateComponentBase.ts @@ -45,7 +45,7 @@ class DateComponentBase extends UI5Element { /** * Defines the secondary calendar type. * If not set, the calendar will only show the primary calendar type. - * @since 1.0.0-rc.16 + * @since 1.0.0 * @default undefined * @public */ @@ -84,7 +84,7 @@ class DateComponentBase extends UI5Element { * * **Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd). * @default "" - * @since 1.0.0-rc.6 + * @since 1.0.0 * @public */ @property() @@ -95,7 +95,7 @@ class DateComponentBase extends UI5Element { * * **Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd). * @default "" - * @since 1.0.0-rc.6 + * @since 1.0.0 * @public */ @property() diff --git a/packages/main/src/DatePicker.ts b/packages/main/src/DatePicker.ts index a94c801877365..73b3d0029ac00 100644 --- a/packages/main/src/DatePicker.ts +++ b/packages/main/src/DatePicker.ts @@ -265,7 +265,7 @@ class DatePicker extends DateComponentBase implements IFormInputElement { /** * Defines whether the component is required. - * @since 1.0.0-rc.9 + * @since 1.0.0 * @default false * @public */ @@ -317,7 +317,7 @@ class DatePicker extends DateComponentBase implements IFormInputElement { * the week numbers are not displayed regardless of what is set. * @default false * @public - * @since 1.0.0-rc.8 + * @since 1.0.0 */ @property({ type: Boolean }) hideWeekNumbers = false; @@ -335,7 +335,7 @@ class DatePicker extends DateComponentBase implements IFormInputElement { * Defines the aria-label attribute for the component. * @default undefined * @public - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @property() accessibleName?: string; @@ -344,7 +344,7 @@ class DatePicker extends DateComponentBase implements IFormInputElement { * Receives id(or many ids) of the elements that label the component. * @default undefined * @public - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @property() accessibleNameRef?: string; @@ -393,7 +393,7 @@ class DatePicker extends DateComponentBase implements IFormInputElement { * * **Note:** The `valueStateMessage` would be displayed, * when the component is in `Information`, `Critical` or `Negative` value state. - * @since 1.0.0-rc.7 + * @since 1.0.0 * @public */ @slot() diff --git a/packages/main/src/DateRangePicker.ts b/packages/main/src/DateRangePicker.ts index 6e7d2fa97b75e..a61623f4e28e8 100644 --- a/packages/main/src/DateRangePicker.ts +++ b/packages/main/src/DateRangePicker.ts @@ -66,7 +66,7 @@ const DEFAULT_DELIMITER = "-"; * - [Shift] + [Ctrl] + [Page Up] - Increments the corresponding year by one * @constructor * @extends DatePicker - * @since 1.0.0-rc.8 + * @since 1.0.0 * @public */ @customElement({ diff --git a/packages/main/src/DateTimePicker.ts b/packages/main/src/DateTimePicker.ts index 80ba6da635d8b..536bc855ed11c 100644 --- a/packages/main/src/DateTimePicker.ts +++ b/packages/main/src/DateTimePicker.ts @@ -112,7 +112,7 @@ type PreviewValues = { * `import "@ui5/webcomponents/dist/DateTimePicker.js";` * @constructor * @extends DatePicker - * @since 1.0.0-rc.7 + * @since 1.0.0 * @public */ @customElement({ diff --git a/packages/main/src/DayPicker.ts b/packages/main/src/DayPicker.ts index 0ac016216fd44..f2f72e01c763d 100644 --- a/packages/main/src/DayPicker.ts +++ b/packages/main/src/DayPicker.ts @@ -163,7 +163,7 @@ class DayPicker extends CalendarPart implements ICalendarPicker { * **Note:** For calendars other than Gregorian, * the week numbers are not displayed regardless of what is set. * @default false - * @since 1.0.0-rc.8 + * @since 1.0.0 */ @property({ type: Boolean }) hideWeekNumbers = false; diff --git a/packages/main/src/Dialog.ts b/packages/main/src/Dialog.ts index be6f4111cebea..1e5f7f41373c8 100644 --- a/packages/main/src/Dialog.ts +++ b/packages/main/src/Dialog.ts @@ -170,7 +170,7 @@ class Dialog extends Popup { * When "draggable" is set to true, the native browser "draggable" * behavior is prevented and only the Dialog custom logic ("draggable by its header") works. * @default false - * @since 1.0.0-rc.9 + * @since 1.0.0 * @public */ @property({ type: Boolean }) @@ -185,7 +185,7 @@ class Dialog extends Popup { * * **Note:** Upon resizing, externally defined height and width styling will be ignored. * @default false - * @since 1.0.0-rc.10 + * @since 1.0.0 * @public */ @property({ type: Boolean }) @@ -213,7 +213,7 @@ class Dialog extends Popup { * accessibility role to "alertdialog", if the accessibleRole property is set to `"Dialog"`. * @default "None" * @public - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @property() state: `${ValueState}` = "None"; diff --git a/packages/main/src/FileUploader.ts b/packages/main/src/FileUploader.ts index 20491c83a9cce..66f14fd615f87 100644 --- a/packages/main/src/FileUploader.ts +++ b/packages/main/src/FileUploader.ts @@ -94,7 +94,7 @@ type FileUploaderChangeEventDetail = { * * `import "@ui5/webcomponents/dist/FileUploader.js";` * @constructor - * @since 1.0.0-rc.6 + * @since 1.0.0 * @extends UI5Element * @public */ @@ -287,7 +287,7 @@ class FileUploader extends UI5Element implements IFormInputElement { * * **Note:** The `valueStateMessage` would be displayed, * when the component is in `Information`, `Critical` or `Negative` value state. - * @since 1.0.0-rc.9 + * @since 1.0.0 * @public */ @slot() diff --git a/packages/main/src/Form.ts b/packages/main/src/Form.ts index e099040b1fb9a..32764f98a05b1 100644 --- a/packages/main/src/Form.ts +++ b/packages/main/src/Form.ts @@ -188,6 +188,8 @@ type ItemsInfo = { * @public * @since 2.0.0 * @extends UI5Element + * @ui5subcomponent FormGroup + * @ui5subcomponent FormItem */ @customElement({ tag: "ui5-form", diff --git a/packages/main/src/Input.ts b/packages/main/src/Input.ts index 9379a44bc5a4d..4e8b519385590 100644 --- a/packages/main/src/Input.ts +++ b/packages/main/src/Input.ts @@ -206,6 +206,10 @@ type InputSuggestionScrollEventDetail = { * @csspart root - Used to style the root DOM element of the Input component * @csspart input - Used to style the native input element * @csspart clear-icon - Used to style the clear icon, which can be pressed to clear user input text + * @ui5subcomponent InputIcon + * @ui5subcomponent SuggestionItem + * @ui5subcomponent SuggestionItemCustom + * @ui5subcomponent SuggestionItemGroup */ @customElement({ tag: "ui5-input", @@ -278,7 +282,7 @@ type InputSuggestionScrollEventDetail = { * @param {Integer} scrollTop The current scroll position. * @param {HTMLElement} scrollContainer The scroll container. * @protected - * @since 1.0.0-rc.8 + * @since 1.0.0 */ @event("suggestion-scroll", { bubbles: true, @@ -329,7 +333,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement * **Note:** takes effect when `showSuggestions` is set to `true` * @default false * @private - * @since 1.0.0-rc.8 + * @since 1.0.0 */ @property({ type: Boolean }) highlight = false; @@ -358,7 +362,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement * Defines whether the component is required. * @default false * @public - * @since 1.0.0-rc.3 + * @since 1.0.0 */ @property({ type: Boolean }) required = false; @@ -432,7 +436,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement * * **Note:** This property is not compatible with the ui5-input type InputType.Number. If the ui5-input type is set to Number, the maxlength value is ignored. * @default undefined - * @since 1.0.0-rc.5 + * @since 1.0.0 * @public */ @property({ type: Number }) @@ -442,7 +446,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement * Defines the accessible ARIA name of the component. * @default undefined * @public - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @property() accessibleName?: string; @@ -451,7 +455,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement * Receives id(or many ids) of the elements that label the input. * @default undefined * @public - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @property() accessibleNameRef?: string; @@ -619,7 +623,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement * * **Note:** If the component has `suggestionItems`, * the `valueStateMessage` would be displayed as part of the same popover, if used on desktop, or dialog - on phone. - * @since 1.0.0-rc.6 + * @since 1.0.0 * @public */ @slot({ diff --git a/packages/main/src/Link.ts b/packages/main/src/Link.ts index 7b11102b66828..5208a2bd25d2a 100644 --- a/packages/main/src/Link.ts +++ b/packages/main/src/Link.ts @@ -194,7 +194,7 @@ class Link extends UI5Element implements ITabbable { * Receives id(or many ids) of the elements that label the input * @default undefined * @public - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @property() accessibleNameRef?: string; diff --git a/packages/main/src/List.ts b/packages/main/src/List.ts index d03c8979c0253..d78e51f6fba1c 100644 --- a/packages/main/src/List.ts +++ b/packages/main/src/List.ts @@ -213,6 +213,9 @@ type ListAccessibilityAttributes = { * @public * @csspart growing-button - Used to style the button, that is used for growing of the component * @csspart growing-button-inner - Used to style the button inner element + * @ui5subcomponent ListItemCustom + * @ui5subcomponent ListItemGroup + * @ui5subcomponent ListItemStandard */ @customElement({ tag: "ui5-list", @@ -245,7 +248,7 @@ type ListAccessibilityAttributes = { * not to be confused with `item-delete`. * @param {HTMLElement} item the item about to be closed. * @public - * @since 1.0.0-rc.8 + * @since 1.0.0 */ @event("item-close", { bubbles: true, @@ -257,7 +260,7 @@ type ListAccessibilityAttributes = { * **Note:** This event is only applicable to list items that can be toggled (such as notification group list items). * @param {HTMLElement} item the toggled item. * @public - * @since 1.0.0-rc.8 + * @since 1.0.0 */ @event("item-toggle", { bubbles: true, @@ -292,7 +295,7 @@ type ListAccessibilityAttributes = { * * **Note:** The event is fired when the `growing='Scroll'` property is enabled. * @public - * @since 1.0.0-rc.6 + * @since 1.0.0 */ @event("load-more", { bubbles: true, @@ -400,7 +403,7 @@ class List extends UI5Element { * **Restrictions:** `growing="Scroll"` is not supported for Internet Explorer, * on IE the component will fallback to `growing="Button"`. * @default "None" - * @since 1.0.0-rc.13 + * @since 1.0.0 * @public */ @property() @@ -413,7 +416,7 @@ class List extends UI5Element { * * **Note:** This property takes effect if the `growing` property is set to the `Button`. * @default undefined - * @since 1.24 + * @since 1.24.0 * @public */ @property() @@ -423,7 +426,7 @@ class List extends UI5Element { * Defines if the component would display a loading indicator over the list. * @default false * @public - * @since 1.0.0-rc.6 + * @since 1.0.0 */ @property({ type: Boolean }) loading = false; @@ -451,7 +454,7 @@ class List extends UI5Element { * Defines the accessible name of the component. * @default undefined * @public - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @property() accessibleName?: string; @@ -483,7 +486,7 @@ class List extends UI5Element { * Defines the IDs of the elements that label the component. * @default undefined * @public - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @property() accessibleNameRef?: string; @@ -524,7 +527,7 @@ class List extends UI5Element { * Defines the accessible role of the component. * @public * @default "List" - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @property() accessibleRole: `${ListAccessibleRole}` = "List"; diff --git a/packages/main/src/ListItem.ts b/packages/main/src/ListItem.ts index 7004bba656e0d..b785230c1deef 100644 --- a/packages/main/src/ListItem.ts +++ b/packages/main/src/ListItem.ts @@ -168,7 +168,7 @@ abstract class ListItem extends ListItemBase { * Available options are: `"None"` (by default), `"Positive"`, `"Critical"`, `"Information"` and `"Negative"`. * @default "None" * @public - * @since 1.24 + * @since 1.24.0 */ @property() highlight: `${Highlight}` = "None"; diff --git a/packages/main/src/ListItemBase.ts b/packages/main/src/ListItemBase.ts index 47df8f56a4e68..5492bc526c5cd 100644 --- a/packages/main/src/ListItemBase.ts +++ b/packages/main/src/ListItemBase.ts @@ -114,7 +114,7 @@ class ListItemBase extends UI5Element implements ITabbable { * **Note:** A disabled `ui5-li` is noninteractive. * @default false * @protected - * @since 1.0.0-rc.12 + * @since 1.0.0 */ @property({ type: Boolean }) disabled = false; diff --git a/packages/main/src/ListItemCustom.ts b/packages/main/src/ListItemCustom.ts index 169af11258e61..09e1fd988acca 100644 --- a/packages/main/src/ListItemCustom.ts +++ b/packages/main/src/ListItemCustom.ts @@ -87,7 +87,7 @@ class ListItemCustom extends ListItem { * **Note**: If not provided a default text alternative will be set, if present. * @default undefined * @public - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @property() accessibleName?: string; diff --git a/packages/main/src/ListItemStandard.ts b/packages/main/src/ListItemStandard.ts index 5cb370644fd4f..8ce128a361e9d 100644 --- a/packages/main/src/ListItemStandard.ts +++ b/packages/main/src/ListItemStandard.ts @@ -67,7 +67,7 @@ class ListItemStandard extends ListItem implements IAccessibleListItem { * Defines the description displayed right under the item text, if such is present. * @default undefined * @public - * @since 0.8.0 + * @since 1.0.0 */ @property() description?: string; @@ -97,7 +97,7 @@ class ListItemStandard extends ListItem implements IAccessibleListItem { * Defines the `additionalText`, displayed in the end of the list item. * @default undefined * @public - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @property() additionalText?: string; @@ -108,7 +108,7 @@ class ListItemStandard extends ListItem implements IAccessibleListItem { * Available options are: `"None"` (by default), `"Positive"`, `"Critical"`, `"Information"` and `"Negative"`. * @default "None" * @public - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @property() additionalTextState: `${ValueState}` = "None"; @@ -127,7 +127,7 @@ class ListItemStandard extends ListItem implements IAccessibleListItem { * Note: If not provided a default text alternative will be set, if present. * @default undefined * @public - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @property() declare accessibleName?: string; diff --git a/packages/main/src/Menu.ts b/packages/main/src/Menu.ts index 39b8fb5927e91..615a9ab7e07ea 100644 --- a/packages/main/src/Menu.ts +++ b/packages/main/src/Menu.ts @@ -115,6 +115,9 @@ type MenuBeforeCloseEventDetail = { escPressed: boolean }; * @extends UI5Element * @since 1.3.0 * @public + * @ui5subcomponent MenuItem + * @ui5subcomponent MenuItemGroup + * @ui5subcomponent MenuSeparator */ @customElement({ tag: "ui5-menu", diff --git a/packages/main/src/MessageStrip.ts b/packages/main/src/MessageStrip.ts index bc2ddfb1b018b..3772059be477b 100644 --- a/packages/main/src/MessageStrip.ts +++ b/packages/main/src/MessageStrip.ts @@ -70,7 +70,7 @@ type DesignCloseButtonTooltip = Record; * @constructor * @extends UI5Element * @public - * @since 0.9.0 + * @since 1.0.0 * @slot {Array} default * Defines the text of the component. * @@ -99,7 +99,7 @@ class MessageStrip extends UI5Element { * Defines the component type. * @default "Information" * @public - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @property() design: `${MessageStripDesign}` = "Information"; @@ -124,7 +124,7 @@ class MessageStrip extends UI5Element { * * @default false * @public - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @property({ type: Boolean }) hideIcon = false diff --git a/packages/main/src/MonthPicker.ts b/packages/main/src/MonthPicker.ts index 63a514d75b27c..e86401679ea96 100644 --- a/packages/main/src/MonthPicker.ts +++ b/packages/main/src/MonthPicker.ts @@ -86,7 +86,7 @@ type MonthPickerNavigateEventDetail = { }) /** * Fired when the timestamp changes - the user navigates with the keyboard or clicks with the mouse. - * @since 1.0.0-rc.9 + * @since 1.0.0 */ @event("navigate", { bubbles: true, diff --git a/packages/main/src/MultiComboBox.ts b/packages/main/src/MultiComboBox.ts index 8d3755cb4a212..47eb1819954e2 100644 --- a/packages/main/src/MultiComboBox.ts +++ b/packages/main/src/MultiComboBox.ts @@ -189,8 +189,11 @@ type MultiComboBoxValueStateChangeEventDetail = { * @constructor * @extends UI5Element * @public - * @since 0.11.0 + * @since 1.0.0 * @csspart token-\{index\} - Used to style each token(where `token-0` corresponds to the first item) + * @ui5subcomponent MultiComboBoxItem + * @ui5subcomponent MultiComboBoxItemCustom + * @ui5subcomponent MultiComboBoxItemGroup */ @customElement({ tag: "ui5-multi-combobox", @@ -388,7 +391,7 @@ class MultiComboBox extends UI5Element implements IFormInputElement { * Defines whether the component is required. * @default false * @public - * @since 1.0.0-rc.5 + * @since 1.0.0 */ @property({ type: Boolean }) required = false; @@ -555,7 +558,7 @@ class MultiComboBox extends UI5Element implements IFormInputElement { /** * Defines the icon to be displayed in the component. * @public - * @since 1.0.0-rc.9 + * @since 1.0.0 */ @slot() icon!: Slot; @@ -568,7 +571,7 @@ class MultiComboBox extends UI5Element implements IFormInputElement { * * **Note:** The `valueStateMessage` would be displayed, * when the component is in `Information`, `Critical` or `Negative` value state. - * @since 1.0.0-rc.9 + * @since 1.0.0 * @public */ @slot() diff --git a/packages/main/src/MultiInput.ts b/packages/main/src/MultiInput.ts index 5986cef4abe9c..eee001ebf93f5 100644 --- a/packages/main/src/MultiInput.ts +++ b/packages/main/src/MultiInput.ts @@ -67,7 +67,7 @@ type MultiInputTokenDeleteEventDetail = { * `import "@ui5/webcomponents/dist/MultiInput.js";` * @constructor * @extends Input - * @since 1.0.0-rc.9 + * @since 1.0.0 * @public */ @customElement({ diff --git a/packages/main/src/Option.ts b/packages/main/src/Option.ts index e9f3c8a0d94df..cb40a78476634 100644 --- a/packages/main/src/Option.ts +++ b/packages/main/src/Option.ts @@ -75,7 +75,7 @@ class Option extends ListItemBase implements IOption { * Defines the `additionalText`, displayed in the end of the option. * @default undefined * @public - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @property() additionalText?: string; diff --git a/packages/main/src/Panel.ts b/packages/main/src/Panel.ts index de8eafbd93b2f..ef018d517e921 100644 --- a/packages/main/src/Panel.ts +++ b/packages/main/src/Panel.ts @@ -131,7 +131,7 @@ class Panel extends UI5Element { * Indicates whether the transition between the expanded and the collapsed state of the component is animated. By default the animation is enabled. * @default false * @public - * @since 1.0.0-rc.16 + * @since 1.0.0 */ @property({ type: Boolean }) noAnimation = false; @@ -159,7 +159,7 @@ class Panel extends UI5Element { * Defines the accessible ARIA name of the component. * @default undefined * @public - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @property() accessibleName?: string; @@ -171,7 +171,7 @@ class Panel extends UI5Element { * a solid color will be used for its design. * @default false * @public - * @since 1.16.0-rc.1 + * @since 1.16.0 */ @property({ type: Boolean }) stickyHeader = false; diff --git a/packages/main/src/Popover.ts b/packages/main/src/Popover.ts index 1c4a667034a0e..e51b9ac637199 100644 --- a/packages/main/src/Popover.ts +++ b/packages/main/src/Popover.ts @@ -86,7 +86,7 @@ type CalculatedPlacement = { * * @constructor * @extends Popup - * @since 1.0.0-rc.6 + * @since 1.0.0 * @public * @csspart header - Used to style the header of the component * @csspart content - Used to style the content of the component @@ -151,7 +151,7 @@ class Popover extends Popup { * Determines whether the component arrow is hidden. * @default false * @public - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @property({ type: Boolean }) hideArrow = false; diff --git a/packages/main/src/Popup.ts b/packages/main/src/Popup.ts index 9242b3d5a8472..a2bca3412dc8b 100644 --- a/packages/main/src/Popup.ts +++ b/packages/main/src/Popup.ts @@ -145,7 +145,7 @@ abstract class Popup extends UI5Element { * when the popup closes. * @default false * @public - * @since 1.0.0-rc.8 + * @since 1.0.0 */ @property({ type: Boolean }) preventFocusRestore = false; @@ -154,7 +154,7 @@ abstract class Popup extends UI5Element { * Defines the accessible name of the component. * @default undefined * @public - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @property() accessibleName?: string; diff --git a/packages/main/src/ProgressIndicator.ts b/packages/main/src/ProgressIndicator.ts index 5ff2c459dc970..fbe2091792171 100644 --- a/packages/main/src/ProgressIndicator.ts +++ b/packages/main/src/ProgressIndicator.ts @@ -38,7 +38,7 @@ import ProgressIndicatorCss from "./generated/themes/ProgressIndicator.css.js"; * @constructor * @extends UI5Element * @public - * @since 1.0.0-rc.8 + * @since 1.0.0 */ @customElement({ tag: "ui5-progress-indicator", diff --git a/packages/main/src/RadioButton.ts b/packages/main/src/RadioButton.ts index 6ea02e02069ac..19076cba5a03e 100644 --- a/packages/main/src/RadioButton.ts +++ b/packages/main/src/RadioButton.ts @@ -81,7 +81,7 @@ let activeRadio: RadioButton; /** * Fired when the component checked state changes. * @public - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @event("change", { bubbles: true, @@ -134,7 +134,7 @@ class RadioButton extends UI5Element implements IFormInputElement { * @formEvents change * @formProperty * @public - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @property({ type: Boolean }) checked = false; diff --git a/packages/main/src/RangeSlider.ts b/packages/main/src/RangeSlider.ts index e40b62d1a719d..d295a94e1d2a1 100644 --- a/packages/main/src/RangeSlider.ts +++ b/packages/main/src/RangeSlider.ts @@ -83,7 +83,7 @@ type AffectedValue = "startValue" | "endValue"; * `import "@ui5/webcomponents/dist/RangeSlider.js";` * @constructor * @extends SliderBase - * @since 1.0.0-rc.11 + * @since 1.0.0 * @public * @csspart progress-container - Used to style the progress container, the horizontal bar that visually represents the range between the minimum and maximum values, of the `ui5-range-slider`. * @csspart progress-bar - Used to style the progress bar, which shows the progress of the `ui5-range-slider`. diff --git a/packages/main/src/RatingIndicator.ts b/packages/main/src/RatingIndicator.ts index b10656b7ff24b..4992786a2696e 100644 --- a/packages/main/src/RatingIndicator.ts +++ b/packages/main/src/RatingIndicator.ts @@ -68,7 +68,7 @@ type Star = { * @constructor * @extends UI5Element * @public - * @since 1.0.0-rc.8 + * @since 1.0.0 */ @customElement({ @@ -108,7 +108,7 @@ class RatingIndicator extends UI5Element { * The number of displayed rating symbols. * @default 5 * @public - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @property({ type: Number }) max: number = 5; @@ -159,7 +159,7 @@ class RatingIndicator extends UI5Element { * Defines the accessible ARIA name of the component. * @default undefined * @public - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @property() accessibleName?: string; @@ -196,7 +196,7 @@ class RatingIndicator extends UI5Element { * * @default "favorite" * @public - * @since 2.20 + * @since 2.20.0 */ @property() ratedIcon = "favorite"; @@ -205,7 +205,7 @@ class RatingIndicator extends UI5Element { * Defines the icon to be displayed for the unselected (empty) rating symbol. * @default "unfavorite" * @public - * @since 2.20 + * @since 2.20.0 */ @property() unratedIcon = "unfavorite"; diff --git a/packages/main/src/ResponsivePopover.ts b/packages/main/src/ResponsivePopover.ts index 3c062864d2a52..3844c60c8d57d 100644 --- a/packages/main/src/ResponsivePopover.ts +++ b/packages/main/src/ResponsivePopover.ts @@ -29,7 +29,7 @@ import type { PopupBeforeCloseEventDetail } from "./Popup.js"; * `import "@ui5/webcomponents/dist/ResponsivePopover.js";` * @constructor * @extends Popover - * @since 1.0.0-rc.6 + * @since 1.0.0 * @public * @csspart header - Used to style the header of the component * @csspart content - Used to style the content of the component @@ -63,7 +63,7 @@ class ResponsivePopover extends Popover { * **Note:** If you are using the `header` slot, this property will have no effect * @private * @default false - * @since 1.0.0-rc.16 + * @since 1.0.0 */ @property({ type: Boolean }) _hideCloseButton = false; diff --git a/packages/main/src/SegmentedButton.ts b/packages/main/src/SegmentedButton.ts index 1511864375e7d..c98f272984ebe 100644 --- a/packages/main/src/SegmentedButton.ts +++ b/packages/main/src/SegmentedButton.ts @@ -62,8 +62,9 @@ type SegmentedButtonSelectionChangeEventDetail = { * `import "@ui5/webcomponents/dist/SegmentedButton.js";` * @constructor * @extends UI5Element - * @since 1.0.0-rc.6 + * @since 1.0.0 * @public + * @ui5subcomponent SegmentedButtonItem */ @customElement({ tag: "ui5-segmented-button", diff --git a/packages/main/src/SegmentedButtonItem.ts b/packages/main/src/SegmentedButtonItem.ts index cba42e93a8635..c41bb5b0282ee 100644 --- a/packages/main/src/SegmentedButtonItem.ts +++ b/packages/main/src/SegmentedButtonItem.ts @@ -106,7 +106,7 @@ class SegmentedButtonItem extends UI5Element implements IButton, ISegmentedButto * Defines the accessible ARIA name of the component. * @default undefined * @public - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @property() accessibleName?: string; diff --git a/packages/main/src/Select.ts b/packages/main/src/Select.ts index 5b5f722dd313f..0d6cae9354c63 100644 --- a/packages/main/src/Select.ts +++ b/packages/main/src/Select.ts @@ -167,7 +167,10 @@ const isPrintableCharacter = (e: KeyboardEvent) => { * @extends UI5Element * @public * @csspart popover - Used to style the popover element - * @since 0.8.0 + * @since 1.0.0 + * @ui5subcomponent Option + * @ui5subcomponent OptionCustom + * @ui5subcomponent OptionGroup */ @customElement({ tag: "ui5-select", @@ -297,7 +300,7 @@ class Select extends UI5Element implements IFormInputElement { /** * Defines whether the component is required. - * @since 1.0.0-rc.9 + * @since 1.0.0 * @default false * @public */ @@ -318,7 +321,7 @@ class Select extends UI5Element implements IFormInputElement { /** * Defines the accessible ARIA name of the component. - * @since 1.0.0-rc.9 + * @since 1.0.0 * @public * @default undefined */ @@ -329,7 +332,7 @@ class Select extends UI5Element implements IFormInputElement { * Receives id(or many ids) of the elements that label the select. * @default undefined * @public - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @property() accessibleNameRef?: string; diff --git a/packages/main/src/Slider.ts b/packages/main/src/Slider.ts index 13b9e1277290f..013a5e2fe01bf 100644 --- a/packages/main/src/Slider.ts +++ b/packages/main/src/Slider.ts @@ -68,7 +68,7 @@ import { * `import "@ui5/webcomponents/dist/Slider.js";` * @constructor * @extends SliderBase - * @since 1.0.0-rc.11 + * @since 1.0.0 * @public * @csspart progress-container - Used to style the progress container, the horizontal bar that visually represents the range between the minimum and maximum values, of the `ui5-slider`. * @csspart progress-bar - Used to style the progress bar, which shows the progress of the `ui5-slider`. diff --git a/packages/main/src/StepInput.ts b/packages/main/src/StepInput.ts index e125e14433e85..84587b052b37d 100644 --- a/packages/main/src/StepInput.ts +++ b/packages/main/src/StepInput.ts @@ -98,7 +98,7 @@ type StepInputValueStateChangeEventDetail = { * `import "@ui5/webcomponents/dist/StepInput.js";` * @constructor * @extends UI5Element - * @since 1.0.0-rc.13 + * @since 1.0.0 * @public */ @customElement({ @@ -244,7 +244,7 @@ class StepInput extends UI5Element implements IFormInputElement { * Defines the accessible ARIA name of the component. * @default undefined * @public - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @property() accessibleName?: string; @@ -253,7 +253,7 @@ class StepInput extends UI5Element implements IFormInputElement { * Receives id(or many ids) of the elements that label the component. * @default undefined * @public - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @property() accessibleNameRef?: string; diff --git a/packages/main/src/SuggestionItem.ts b/packages/main/src/SuggestionItem.ts index 55f6084211c06..e5d64c13e23d8 100644 --- a/packages/main/src/SuggestionItem.ts +++ b/packages/main/src/SuggestionItem.ts @@ -36,7 +36,7 @@ class SuggestionItem extends ListItemBase implements IInputSuggestionItemSelecta /** * Defines the `additionalText`, displayed in the end of the item. * @default undefined - * @since 1.0.0-rc.15 + * @since 1.0.0 * @public */ @property() diff --git a/packages/main/src/SuggestionListItem.ts b/packages/main/src/SuggestionListItem.ts index c8db0e49e0723..5527560376a09 100644 --- a/packages/main/src/SuggestionListItem.ts +++ b/packages/main/src/SuggestionListItem.ts @@ -24,7 +24,7 @@ class SuggestionListItem extends ListItemStandard { /** * Defines a description that can contain HTML. * **Note:** If not specified, the `description` property will be used. - * @since 1.0.0-rc.8 + * @since 1.0.0 * @public */ @slot() diff --git a/packages/main/src/Switch.ts b/packages/main/src/Switch.ts index e5896da647288..8857eb2f8d3b8 100644 --- a/packages/main/src/Switch.ts +++ b/packages/main/src/Switch.ts @@ -50,7 +50,7 @@ import switchCss from "./generated/themes/Switch.css.js"; * @constructor * @extends UI5Element * @public - * @since 0.8.0 + * @since 1.0.0 * @csspart slider - Used to style the track, where the handle is being slid * @csspart text-on - Used to style the `textOn` property text * @csspart text-off - Used to style the `textOff` property text diff --git a/packages/main/src/Tab.ts b/packages/main/src/Tab.ts index eb733c542dcc8..dcc5a6ea8bc02 100644 --- a/packages/main/src/Tab.ts +++ b/packages/main/src/Tab.ts @@ -301,7 +301,7 @@ class Tab extends UI5Element implements ITabbable, ITab { * * **Note:** If you need a DOM ref to the tab content please use the `getDomRef` method. * @public - * @since 1.0.0-rc.16 + * @since 1.0.0 */ getDomRefInStrip(): HTMLElement | undefined { return this._getElementInStrip?.(); diff --git a/packages/main/src/TabContainer.ts b/packages/main/src/TabContainer.ts index 5f71485ea7203..a8846a4f2f861 100644 --- a/packages/main/src/TabContainer.ts +++ b/packages/main/src/TabContainer.ts @@ -154,6 +154,8 @@ interface ITab extends UI5Element { * @public * @csspart content - Used to style the content of the component * @csspart tabstrip - Used to style the tabstrip of the component + * @ui5subcomponent Tab + * @ui5subcomponent TabSeparator */ @customElement({ tag: "ui5-tabcontainer", @@ -267,7 +269,7 @@ class TabContainer extends UI5Element { * layout for most scenarios. Set to `Bottom` only when the component is at the * bottom of the page and you want the tab strip to act as a menu. * @default "Top" - * @since 1.0.0-rc.7 + * @since 1.0.0 * @private */ @property() @@ -336,7 +338,7 @@ class TabContainer extends UI5Element { * Defines the button which will open the overflow menu. If nothing is provided to this slot, * the default button will be used. * @public - * @since 1.0.0-rc.9 + * @since 1.0.0 */ @slot() overflowButton!: Slot; diff --git a/packages/main/src/Table.ts b/packages/main/src/Table.ts index 7a05fd73a7214..06ffee8ee2c40 100644 --- a/packages/main/src/Table.ts +++ b/packages/main/src/Table.ts @@ -184,6 +184,19 @@ type TableRowActionClickEventDetail = { * @extends UI5Element * @since 2.0.0 * @public + * @ui5subcomponent TableCell + * @ui5subcomponent TableGroupRow + * @ui5subcomponent TableGrowing + * @ui5subcomponent TableHeaderCell + * @ui5subcomponent TableHeaderCellActionAI + * @ui5subcomponent TableHeaderRow + * @ui5subcomponent TableRow + * @ui5subcomponent TableRowAction + * @ui5subcomponent TableRowActionNavigation + * @ui5subcomponent TableSelection + * @ui5subcomponent TableSelectionMulti + * @ui5subcomponent TableSelectionSingle + * @ui5subcomponent TableVirtualizer */ @customElement({ tag: "ui5-table", @@ -383,7 +396,7 @@ class Table extends UI5Element { * Determines whether the table rows are displayed with alternating background colors. * * @default false - * @since 2.17 + * @since 2.17.0 * @public */ @property({ type: Boolean }) diff --git a/packages/main/src/TableSelectionBase.ts b/packages/main/src/TableSelectionBase.ts index 7578210a1c2d5..a9c0801fadf17 100644 --- a/packages/main/src/TableSelectionBase.ts +++ b/packages/main/src/TableSelectionBase.ts @@ -54,7 +54,7 @@ abstract class TableSelectionBase extends UI5Element implements ITableFeature { * * @default "RowSelector" * @public - * @since 2.11 + * @since 2.11.0 */ @property() behavior: `${TableSelectionBehavior}` = "RowSelector"; diff --git a/packages/main/src/TableSelectionMulti.ts b/packages/main/src/TableSelectionMulti.ts index 34e46b5377d82..8a890c1bedd91 100644 --- a/packages/main/src/TableSelectionMulti.ts +++ b/packages/main/src/TableSelectionMulti.ts @@ -61,7 +61,7 @@ class TableSelectionMulti extends TableSelectionBase { * * @default "SelectAll" * @public - * @since 2.12 + * @since 2.12.0 */ @property() headerSelector: `${TableSelectionMultiHeaderSelector}` = "SelectAll"; diff --git a/packages/main/src/TextArea.ts b/packages/main/src/TextArea.ts index d42797eeba134..9507ad3199550 100644 --- a/packages/main/src/TextArea.ts +++ b/packages/main/src/TextArea.ts @@ -104,7 +104,7 @@ type TextAreaInputEventDetail = { /** * Fired when the value of the component changes at each keystroke or when * something is pasted. - * @since 1.0.0-rc.5 + * @since 1.0.0 * @param {boolean} escapePressed Indicates whether the Escape key was pressed, which triggers a revert to the previous value * @public */ @@ -173,7 +173,7 @@ class TextArea extends UI5Element implements IFormInputElement { * Defines whether the component is required. * @default false * @public - * @since 1.0.0-rc.3 + * @since 1.0.0 */ @property({ type: Boolean }) required = false; @@ -193,7 +193,7 @@ class TextArea extends UI5Element implements IFormInputElement { * the component turns into "Critical" state once the characters exceeds the limit. * In this case, only the "Negative" state is considered and can be applied. * @default "None" - * @since 1.0.0-rc.7 + * @since 1.0.0 * @public */ @property() @@ -265,7 +265,7 @@ class TextArea extends UI5Element implements IFormInputElement { * Defines the accessible ARIA name of the component. * @default undefined * @public - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @property() accessibleName?: string; @@ -274,7 +274,7 @@ class TextArea extends UI5Element implements IFormInputElement { * Receives id(or many ids) of the elements that label the textarea. * @default undefined * @public - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @property() accessibleNameRef?: string; @@ -343,7 +343,7 @@ class TextArea extends UI5Element implements IFormInputElement { * * **Note:** The `valueStateMessage` would be displayed if the component has * `valueState` of type `Information`, `Critical` or `Negative`. - * @since 1.0.0-rc.7 + * @since 1.0.0 * @public */ @slot() diff --git a/packages/main/src/TimePicker.ts b/packages/main/src/TimePicker.ts index 66fe80902621c..8c5ba75f227a9 100644 --- a/packages/main/src/TimePicker.ts +++ b/packages/main/src/TimePicker.ts @@ -142,7 +142,7 @@ const DEFAULT_ISO_FORMAT = "HH:mm:ss"; * @constructor * @extends UI5Element * @public - * @since 1.0.0-rc.6 + * @since 1.0.0 * @csspart input - Used to style the input element. This part is forwarded to the underlying ui5-input element. */ @customElement({ @@ -356,7 +356,7 @@ class TimePicker extends UI5Element implements IFormInputElement { * * **Note:** The `valueStateMessage` would be displayed, * when the `ui5-time-picker` is in `Information`, `Critical` or `Negative` value state. - * @since 1.0.0-rc.8 + * @since 1.0.0 * @public */ @slot() diff --git a/packages/main/src/Toast.ts b/packages/main/src/Toast.ts index 565a21688666c..95875bb7019a7 100644 --- a/packages/main/src/Toast.ts +++ b/packages/main/src/Toast.ts @@ -72,7 +72,7 @@ const handleGlobalKeydown = (e: KeyboardEvent) => { * @constructor * @extends UI5Element * @public - * @since 1.0.0-rc.6 + * @since 1.0.0 * @slot {Array} default * Defines the text of the component. * diff --git a/packages/main/src/Token.ts b/packages/main/src/Token.ts index 2c3f2a88431cb..8c739ac83f5a8 100644 --- a/packages/main/src/Token.ts +++ b/packages/main/src/Token.ts @@ -39,7 +39,7 @@ type TokenDeleteEventDetail = { * `import "@ui5/webcomponents/dist/Token.js";` * @constructor * @extends UI5Element - * @since 1.0.0-rc.9 + * @since 1.0.0 * @implements {IToken} * @public */ @@ -146,7 +146,7 @@ class Token extends UI5Element implements IToken { * Defines the close icon for the token. If nothing is provided to this slot, the default close icon will be used. * Accepts `ui5-icon`. * @public - * @since 1.0.0-rc.9 + * @since 1.0.0 */ @slot() closeIcon!: Slot; diff --git a/packages/main/src/Toolbar.ts b/packages/main/src/Toolbar.ts index 977fbab7554ed..84e5d866698ac 100644 --- a/packages/main/src/Toolbar.ts +++ b/packages/main/src/Toolbar.ts @@ -75,6 +75,12 @@ function parsePxValue(styleSet: CSSStyleDeclaration, propertyName: string): numb * @extends UI5Element * @public * @since 1.17.0 + * @ui5subcomponent ToolbarButton + * @ui5subcomponent ToolbarItem + * @ui5subcomponent ToolbarSelect + * @ui5subcomponent ToolbarSelectOption + * @ui5subcomponent ToolbarSeparator + * @ui5subcomponent ToolbarSpacer */ @customElement({ tag: "ui5-toolbar", diff --git a/packages/main/src/Tree.ts b/packages/main/src/Tree.ts index 480fc1d7846a3..fdba1bde01481 100644 --- a/packages/main/src/Tree.ts +++ b/packages/main/src/Tree.ts @@ -100,7 +100,9 @@ type WalkCallback = (item: TreeItemBase, level: number, index: number) => void; * @constructor * @extends UI5Element * @public - * @since 1.0.0-rc.8 + * @since 1.0.0 + * @ui5subcomponent TreeItem + * @ui5subcomponent TreeItemCustom */ @customElement({ tag: "ui5-tree", @@ -124,7 +126,7 @@ type WalkCallback = (item: TreeItemBase, level: number, index: number) => void; /** * Fired when the mouse cursor enters the tree item borders. * @param {HTMLElement} item the hovered item. - * @since 1.0.0-rc.16 + * @since 1.0.0 * @public */ @event("item-mouseover", { @@ -133,7 +135,7 @@ type WalkCallback = (item: TreeItemBase, level: number, index: number) => void; /** * Fired when the mouse cursor leaves the tree item borders. * @param {HTMLElement} item the hovered item. - * @since 1.0.0-rc.16 + * @since 1.0.0 * @public */ @event("item-mouseout", { diff --git a/packages/main/src/TreeItem.ts b/packages/main/src/TreeItem.ts index aaf63b5b3bd31..2e228398c92a1 100644 --- a/packages/main/src/TreeItem.ts +++ b/packages/main/src/TreeItem.ts @@ -24,7 +24,7 @@ import treeItemCss from "./generated/themes/TreeItem.css.js"; * @constructor * @extends TreeItemBase * @public - * @since 1.0.0-rc.8 + * @since 1.0.0 */ @customElement({ renderer: jsxRenderer, @@ -45,7 +45,7 @@ class TreeItem extends TreeItemBase { * Defines the `additionalText`, displayed in the end of the tree item. * @default undefined * @public - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @property() additionalText?: string; diff --git a/packages/main/src/TreeItemBase.ts b/packages/main/src/TreeItemBase.ts index 89ac62617f060..0b314d51827a1 100644 --- a/packages/main/src/TreeItemBase.ts +++ b/packages/main/src/TreeItemBase.ts @@ -159,7 +159,7 @@ class TreeItemBase extends ListItem { * Available options are: `"None"` (by default), `"Positive"`, `"Critical"`, `"Information"` and `"Negative"`. * @default "None" * @public - * @since 1.0.0-rc.15 + * @since 1.0.0 */ @property() additionalTextState: `${ValueState}` = "None"; @@ -175,14 +175,14 @@ class TreeItemBase extends ListItem { /** * @private - * @since 1.0.0-rc.11 + * @since 1.0.0 */ @property({ type: Number, noAttribute: true }) forcedSetsize = 1; /** * @private - * @since 1.0.0-rc.11 + * @since 1.0.0 */ @property({ type: Number, noAttribute: true }) forcedPosinset = 1; diff --git a/packages/main/src/YearPicker.ts b/packages/main/src/YearPicker.ts index 4780c867b0c4f..2c67d4d60cafd 100644 --- a/packages/main/src/YearPicker.ts +++ b/packages/main/src/YearPicker.ts @@ -79,7 +79,7 @@ type YearPickerNavigateEventDetail = { }) /** * Fired when the timestamp changes - the user navigates with the keyboard or clicks with the mouse. - * @since 1.0.0-rc.9 + * @since 1.0.0 */ @event("navigate", { bubbles: true, diff --git a/packages/main/src/types/ButtonAccessibleRole.ts b/packages/main/src/types/ButtonAccessibleRole.ts index c5fb3b9e75ec8..7c2651fd2e4fd 100644 --- a/packages/main/src/types/ButtonAccessibleRole.ts +++ b/packages/main/src/types/ButtonAccessibleRole.ts @@ -2,7 +2,7 @@ * Button accessible roles. * * @public - * @since 1.23 + * @since 1.23.0 */ enum ButtonAccessibleRole { diff --git a/packages/main/src/types/TableSelectionBehavior.ts b/packages/main/src/types/TableSelectionBehavior.ts index ec17cacb2b8d2..f860df9606786 100644 --- a/packages/main/src/types/TableSelectionBehavior.ts +++ b/packages/main/src/types/TableSelectionBehavior.ts @@ -2,7 +2,7 @@ * Selection behavior of the `ui5-table` selection components. * * @public - * @since 2.11 + * @since 2.11.0 */ enum TableSelectionBehavior { /** diff --git a/packages/main/src/types/TableSelectionMultiHeaderSelector.ts b/packages/main/src/types/TableSelectionMultiHeaderSelector.ts index 94c2f427a4c87..259592ecc3f40 100644 --- a/packages/main/src/types/TableSelectionMultiHeaderSelector.ts +++ b/packages/main/src/types/TableSelectionMultiHeaderSelector.ts @@ -2,7 +2,7 @@ * Selectors of the table header row in multi-selection scenarios. * * @public - * @since 2.12 + * @since 2.12.0 */ enum TableSelectionMultiHeaderSelector { /** diff --git a/packages/tools/lib/cem/custom-elements-manifest.config.mjs b/packages/tools/lib/cem/custom-elements-manifest.config.mjs index 071178d9b3fba..1d6a186b7aa55 100644 --- a/packages/tools/lib/cem/custom-elements-manifest.config.mjs +++ b/packages/tools/lib/cem/custom-elements-manifest.config.mjs @@ -6,6 +6,7 @@ import { getDeprecatedStatus, getExperimentalStatus, getSinceStatus, + getSubcomponentStatus, getPrivacyStatus, getReference, validateJSDocComment, @@ -105,9 +106,10 @@ function processClass(ts, classNode, moduleDoc) { currClass.kind = "class"; currClass.deprecated = getDeprecatedStatus(classParsedJsDoc); currClass._ui5experimental = getExperimentalStatus(classParsedJsDoc); - currClass._ui5since = getSinceStatus(classParsedJsDoc); + currClass._ui5since = getSinceStatus(classParsedJsDoc, moduleDoc.path); currClass._ui5privacy = getPrivacyStatus(classParsedJsDoc); currClass._ui5abstract = hasTag(classParsedJsDoc, "abstract") ? true : undefined; + currClass._ui5subcomponents = getSubcomponentStatus(classParsedJsDoc); currClass.description = normalizeDescription(classParsedJsDoc.description || findTag(classParsedJsDoc, "class")?.description); currClass._ui5implements = findAllTags(classParsedJsDoc, "implements") .map(tag => { @@ -210,7 +212,7 @@ function processClass(ts, classNode, moduleDoc) { const memberParsedJsDoc = parse(classNodeMemberJSdoc?.getText())[0]; - member._ui5since = getSinceStatus(memberParsedJsDoc); + member._ui5since = getSinceStatus(memberParsedJsDoc, moduleDoc.path); member.deprecated === "true" && (member.deprecated = true) // Slots with accessors are treated like fields by the tool, so we have to convert them into slots. @@ -386,7 +388,7 @@ function processInterface(ts, interfaceNode, moduleDoc) { description: normalizeDescription(interfaceParsedJsDoc?.description), _ui5experimental: getExperimentalStatus(interfaceParsedJsDoc), _ui5privacy: getPrivacyStatus(interfaceParsedJsDoc), - _ui5since: getSinceStatus(interfaceParsedJsDoc), + _ui5since: getSinceStatus(interfaceParsedJsDoc, moduleDoc.path), deprecated: getDeprecatedStatus(interfaceParsedJsDoc), }); } @@ -407,7 +409,7 @@ function processEnum(ts, enumNode, moduleDoc) { description: normalizeDescription(enumJSdoc?.comment), _ui5experimental: getExperimentalStatus(enumParsedJsDoc), _ui5privacy: getPrivacyStatus(enumParsedJsDoc), - _ui5since: getSinceStatus(enumParsedJsDoc), + _ui5since: getSinceStatus(enumParsedJsDoc, moduleDoc.path), deprecated: getDeprecatedStatus(enumParsedJsDoc) || undefined, members: (enumNode?.members || []).map(member => { const memberJSdoc = member?.jsDoc?.[0]; @@ -422,7 +424,7 @@ function processEnum(ts, enumNode, moduleDoc) { kind: "field", static: true, privacy: getPrivacyStatus(memberParsedJsDoc), - _ui5since: getSinceStatus(memberParsedJsDoc), + _ui5since: getSinceStatus(memberParsedJsDoc, moduleDoc.path), description: memberJSdoc?.comment, default: member.initializer?.text, deprecated: getDeprecatedStatus(memberParsedJsDoc), @@ -447,7 +449,7 @@ const processPublicAPI = object => { if (((key === "privacy" && object[key] !== "public") || (key === "_ui5privacy" && object[key] !== "public")) && !object.customElement) { return true; } else if (typeof object[key] === "object") { - if (key === "cssParts" || key === "cssStates" || key === "attributes" || key === "_ui5implements") { + if (key === "cssParts" || key === "cssStates" || key === "attributes" || key === "_ui5implements" || key === "_ui5subcomponents") { continue; } @@ -591,6 +593,25 @@ export default { }) }); + const publicCustomElements = new Set( + customElementsManifest.modules.flatMap(m => m.declarations) + .filter(d => d.customElement && d.tagName && d._ui5privacy === "public") + .map(d => d.name) + ); + + customElementsManifest.modules.forEach(moduleDoc => { + moduleDoc.declarations.forEach(declaration => { + declaration._ui5subcomponents?.forEach(name => { + if (!publicCustomElements.has(name)) { + logDocumentationError( + moduleDoc.path?.replace(/^dist/, "src").replace(/\.js$/, ".ts"), + `@ui5subcomponent '${name}' is not a public custom element with a tag name in this package.` + ); + } + }); + }); + }); + if (devMode) { displayDocumentationErrors(); } diff --git a/packages/tools/lib/cem/schema-internal.json b/packages/tools/lib/cem/schema-internal.json index 1ab912130e20c..b9906639c0f64 100644 --- a/packages/tools/lib/cem/schema-internal.json +++ b/packages/tools/lib/cem/schema-internal.json @@ -523,6 +523,13 @@ "_ui5abstract": { "type": "boolean" }, + "_ui5subcomponents": { + "description": "Names of sub-components that belong to this component's documentation group", + "items": { + "type": "string" + }, + "type": "array" + }, "_ui5privacy": { "$ref": "#/definitions/Privacy" }, diff --git a/packages/tools/lib/cem/types-internal.d.ts b/packages/tools/lib/cem/types-internal.d.ts index eba21ddfc22db..1bd2890522d80 100644 --- a/packages/tools/lib/cem/types-internal.d.ts +++ b/packages/tools/lib/cem/types-internal.d.ts @@ -224,6 +224,10 @@ export interface CustomElementDeclaration * Marks when the field was introduced */ _ui5since?: string + /** + * Names of sub-components that belong to this component's documentation group + */ + _ui5subcomponents?: string[] } /** diff --git a/packages/tools/lib/cem/utils.mjs b/packages/tools/lib/cem/utils.mjs index 95e57ca59729a..f87cbc087aadc 100644 --- a/packages/tools/lib/cem/utils.mjs +++ b/packages/tools/lib/cem/utils.mjs @@ -67,13 +67,27 @@ const getTypeRefs = (ts, node, member) => { return typeRefs?.length ? typeRefs : undefined; }; -const getSinceStatus = (jsdocComment) => { +const sinceVersionRegExp = /^\d+\.\d+\.\d+$/; + +const getSinceStatus = (jsdocComment, modulePath) => { const sinceTag = findTag(jsdocComment, "since"); - return sinceTag - ? sinceTag.description - ? `${sinceTag.name} ${sinceTag.description}` - : sinceTag.name - : undefined; + if (!sinceTag) return undefined; + + const value = sinceTag.description + ? `${sinceTag.name} ${sinceTag.description}` + : sinceTag.name; + + if (modulePath && !sinceVersionRegExp.test(value)) { + logDocumentationError(modulePath, `@since value "${value}" must follow the pattern number.number.number (e.g. 2.0.0)`); + } + + return value; +}; + +const getSubcomponentStatus = (jsdocComment) => { + const tags = findAllTags(jsdocComment, "ui5subcomponent"); + if (!tags.length) return undefined; + return tags.map(tag => tag.name).filter(Boolean); }; const getPrivacyStatus = (jsdocComment) => { @@ -240,7 +254,7 @@ const allowedTags = { event: [...commonTags, "param", "native", "allowPreventDefault"], eventParam: [...commonTags], method: [...commonTags, "param", "returns", "override"], - class: [...commonTags, "constructor", "class", "abstract", "experimental", "implements", "extends", "slot", "csspart", "cssstate", "cssState"], + class: [...commonTags, "constructor", "class", "abstract", "experimental", "implements", "extends", "slot", "csspart", "cssstate", "cssState", "ui5subcomponent"], enum: [...commonTags, "experimental",], enumMember: [...commonTags, "experimental",], interface: [...commonTags, "experimental",], @@ -335,6 +349,8 @@ const validateJSDocTag = (tag) => { return !tag.type && tag.name && tag.description; case "since": return !tag.type && tag.name; + case "ui5subcomponent": + return !tag.type && tag.name && !tag.description; case "returns": return !tag.type && tag.name; case "default": @@ -411,6 +427,7 @@ const formatSlotTypes = (typeText) => { export { getPrivacyStatus, getSinceStatus, + getSubcomponentStatus, getDeprecatedStatus, getExperimentalStatus, getType, diff --git a/packages/website/.gitignore b/packages/website/.gitignore index 43c90ad6e9dcd..d144590d5eba1 100644 --- a/packages/website/.gitignore +++ b/packages/website/.gitignore @@ -6,10 +6,14 @@ src/components/Editor/ui5-autocomplete.json # Production /build -/docs/components/fiori -/docs/components/main -/docs/components/compat -/docs/components/ai +/docs/components/fiori/* +!/docs/components/fiori/samples.json +/docs/components/main/* +!/docs/components/main/samples.json +/docs/components/compat/* +!/docs/components/compat/samples.json +/docs/components/ai/* +!/docs/components/ai/samples.json /docs/docs/ /docs/samples/**/*.mdx /local-cdn diff --git a/packages/website/build-scripts/api-reference-generation/component-file.mjs b/packages/website/build-scripts/api-reference-generation/component-file.mjs index 9ba5c22899497..72174decd9ccc 100644 --- a/packages/website/build-scripts/api-reference-generation/component-file.mjs +++ b/packages/website/build-scripts/api-reference-generation/component-file.mjs @@ -1,3 +1,30 @@ +import { readFileSync } from "fs"; +import { resolve } from "path"; + +const { version: currentVersion } = JSON.parse(readFileSync(resolve("./package.json"), { encoding: "utf-8" })); + +const newComponentCssClass = "newComponentBadge"; + +// Returns true if sinceVersion is within the last minorWindow minor releases of currentVersion. +const isNewComponent = (sinceVersion, minorWindow = 6) => { + if (!sinceVersion) return false; + const parse = v => { + const [major, minor] = v.replace(/-.*$/, "").split(".").map(Number); + return { major, minor }; + }; + const current = parse(currentVersion); + const since = parse(sinceVersion); + if (since.major !== current.major) return false; + return current.minor - since.minor < minorWindow; +}; + +const addNewComponentClassName = (fileContent, declaration) => { + if (!isNewComponent(declaration._ui5since)) { + return fileContent; + } + return enhanceFrontMatter(fileContent, "sidebar_class_name", newComponentCssClass); +}; + const parseDeclarationDescription = (description) => { if (!description) { return ""; @@ -423,6 +450,10 @@ ${parseDeclarationDescription(declaration.description)}`) fileContent = fileContent.replace("<%COMPONENT_OVERVIEW%>", parseDeclarationDescription(declaration.description)) } + if (!declaration.deprecated) { + fileContent = addNewComponentClassName(fileContent, declaration); + } + const metadataSections = [ "field", "slot", diff --git a/packages/website/build-scripts/api-reference-generation/components.mjs b/packages/website/build-scripts/api-reference-generation/components.mjs index bc03a7f344276..90e32fb444756 100644 --- a/packages/website/build-scripts/api-reference-generation/components.mjs +++ b/packages/website/build-scripts/api-reference-generation/components.mjs @@ -1,58 +1,143 @@ import fs from "fs" import path from "path" import { parseComponentDeclaration } from "./component-file.mjs" -import { removeFileExtension } from "./utils.mjs"; -import { findDeclaration, realPackagesName } from "./manifest.mjs"; +import { findDeclaration, realPackagesName } from "./manifest.mjs" const packages = ["main", "fiori", "compat", "ai"]; -const generateComponents = (source = "./docs/_components_pages", level = 1) => { - const sourcePath = path.resolve(source); - const targetPath = source.replace("_components_pages", "components"); +const samplesCache = new Map(); - if (!fs.existsSync(targetPath)) { - fs.mkdirSync(targetPath, { recursive: true }); +const getSamples = (packageName) => { + if (!samplesCache.has(packageName)) { + const jsonPath = path.resolve(`./docs/components/${packageName}/samples.json`); + try { + samplesCache.set(packageName, JSON.parse(fs.readFileSync(jsonPath, { encoding: "utf-8" }))); + } catch { + samplesCache.set(packageName, {}); + } } + return samplesCache.get(packageName); +}; - const folderFiles = fs.readdirSync(sourcePath); +const buildSamplesImports = (packageName, componentName, samples, samplesPrefix) => { + return samples + .map(s => { + const importName = s.name.replace(/[^a-zA-Z0-9]/g, "_"); + return `import ${importName} from "${samplesPrefix}_samples/${packageName}/${componentName}/${s.name}/${s.name}.md";`; + }) + .join("\n"); +}; - for (let file of folderFiles) { - const isDirectory = fs.lstatSync(path.join(sourcePath, file)).isDirectory(); - const fileName = removeFileExtension(file); +const buildSamplesContent = (samples) => { + const basicSample = samples.find(s => s.isBasic); + const moreSamples = samples.filter(s => !s.isBasic); - if (isDirectory) { - if (!packages.includes(file)) { - fs.mkdirSync(path.join(targetPath, file), { recursive: true }); - fs.writeFileSync(path.join(targetPath, file, "_category_.json"), `{ - "label": "${fileName}", - "link": null -}`) - } + let content = ""; - generateComponents(path.join(sourcePath, file), level + 1); - } else { - let packageName; - - if (sourcePath.includes("main")) { - packageName = "main" - } else if (sourcePath.includes("fiori")) { - packageName = "fiori"; - } else if (sourcePath.includes("compat")) { - packageName = "compat"; - } else if (sourcePath.includes("ai")) { - packageName = "ai"; - } + if (basicSample) { + const importName = basicSample.name.replace(/[^a-zA-Z0-9]/g, "_"); + content += `\n## Basic Sample\n<${importName} />\n`; + } - if (packageName) { - const fileContent = fs.readFileSync(path.join(sourcePath, file), { encoding: "utf-8" }); - const declaration = findDeclaration({ package: realPackagesName(packageName), name: fileName }) + content += "\n<%COMPONENT_METADATA%>"; - fs.writeFileSync(path.join(targetPath, `${fileName}.mdx`), parseComponentDeclaration(declaration, fileContent)) + if (moreSamples.length) { + content += "\n\n## More Samples\n"; + moreSamples.forEach(s => { + const importName = s.name.replace(/[^a-zA-Z0-9]/g, "_"); + const title = s.title || s.name; + content += `\n### ${title}\n`; + if (s.description) { + content += `${s.description}\n\n`; } - } + content += `<${importName} />\n`; + }); } -} + + return content; +}; + +const buildParentMdx = (packageName, componentName, samplesPrefix) => { + const allSamples = getSamples(packageName); + const componentSamples = allSamples[componentName]?.samples; + + let fileContent = ``; + + if (componentSamples?.length) { + fileContent += buildSamplesImports(packageName, componentName, componentSamples, samplesPrefix); + fileContent += "\n\n<%COMPONENT_OVERVIEW%>\n"; + fileContent += buildSamplesContent(componentSamples); + } else { + fileContent += "<%COMPONENT_OVERVIEW%>\n\n<%COMPONENT_METADATA%>"; + } + + return fileContent; +}; + +const buildSubcomponentMdx = () => { + return `<%COMPONENT_OVERVIEW%>\n\n<%COMPONENT_METADATA%>`; +}; + +const generateComponents = () => { + packages.forEach(packageName => { + const packageFullName = realPackagesName(packageName); + const outputDir = `./docs/components/${packageName}`; + + const allSubcomponents = new Set(); + const parentDeclarations = []; + const allDeclarations = []; + + const manifest = JSON.parse( + fs.readFileSync(path.resolve(`./../${packageName}/dist/custom-elements-internal.json`), { encoding: "utf-8" }) + ); + + manifest.modules.forEach(module => { + module.declarations.forEach(declaration => { + if (declaration._ui5privacy === "public" && declaration.customElement && declaration.tagName) { + allDeclarations.push(declaration.name); + if (declaration._ui5subcomponents?.length) { + declaration._ui5subcomponents.forEach(name => allSubcomponents.add(name)); + parentDeclarations.push(declaration.name); + } + } + }); + }); + + allDeclarations.forEach(componentName => { + const declaration = findDeclaration({ package: packageFullName, name: componentName }); + if (!declaration) return; + + const isParent = parentDeclarations.includes(componentName); + const isSubcomponent = allSubcomponents.has(componentName); + + if (isParent) { + const folderPath = path.join(outputDir, componentName); + fs.mkdirSync(folderPath, { recursive: true }); + + fs.writeFileSync(path.join(folderPath, "_category_.json"), JSON.stringify({ label: componentName, link: null }, null, 4)); + + const parentMdx = buildParentMdx(packageName, componentName, "../../../"); + const parentContent = parseComponentDeclaration(declaration, parentMdx); + fs.writeFileSync(path.join(folderPath, `${componentName}.mdx`), parentContent); + + declaration._ui5subcomponents.forEach(subName => { + const subDeclaration = findDeclaration({ package: packageFullName, name: subName }); + if (!subDeclaration) return; + + const subMdx = buildSubcomponentMdx(); + const subContent = parseComponentDeclaration(subDeclaration, subMdx); + fs.writeFileSync(path.join(folderPath, `${subName}.mdx`), subContent); + }); + + } else if (!isSubcomponent) { + const flatMdx = buildParentMdx(packageName, componentName, "../../"); + const flatContent = parseComponentDeclaration(declaration, flatMdx); + fs.writeFileSync(path.join(outputDir, `${componentName}.mdx`), flatContent); + } + }); + }); +}; export { generateComponents -} \ No newline at end of file +} diff --git a/packages/website/build-scripts/clean-components.mjs b/packages/website/build-scripts/clean-components.mjs new file mode 100644 index 0000000000000..bb4f9d156d54a --- /dev/null +++ b/packages/website/build-scripts/clean-components.mjs @@ -0,0 +1,15 @@ +/** + * Deletes all generated files from docs/components/{package} folders + * while preserving the hand-authored samples.json files. + */ +import { rimraf } from "rimraf"; +import { readdirSync } from "fs"; +import path from "path"; + +const packages = ["fiori", "main", "compat", "ai"]; + +for (const pkg of packages) { + const dir = `./docs/components/${pkg}`; + const entries = readdirSync(dir).filter(f => f !== "samples.json"); + await rimraf(entries.map(f => path.join(dir, f))); +} diff --git a/packages/website/docs/_components_pages/ai/Button/Button.mdx b/packages/website/docs/_components_pages/ai/Button/Button.mdx deleted file mode 100644 index d031340b68a70..0000000000000 --- a/packages/website/docs/_components_pages/ai/Button/Button.mdx +++ /dev/null @@ -1,22 +0,0 @@ ---- -slug: ../Button ---- - -import ButtonMenu from "../../../_samples/ai/Button/ButtonMenu/ButtonMenu.md"; -import ButtonSplitMenu from "../../../_samples/ai/Button/ButtonSplitMenu/ButtonSplitMenu.md"; -import IconOnlyButton from "../../../_samples/ai/Button/IconOnlyButton/IconOnlyButton.md"; - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -<%COMPONENT_METADATA%> - -## More Samples - -## AI Button With Split Mode State - - -### Icon-only AI Button With Menu - \ No newline at end of file diff --git a/packages/website/docs/_components_pages/ai/Button/ButtonState.mdx b/packages/website/docs/_components_pages/ai/Button/ButtonState.mdx deleted file mode 100644 index eec7c67ffaa91..0000000000000 --- a/packages/website/docs/_components_pages/ai/Button/ButtonState.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../ButtonState ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/ai/Input.mdx b/packages/website/docs/_components_pages/ai/Input.mdx deleted file mode 100644 index dd7eb26c0f097..0000000000000 --- a/packages/website/docs/_components_pages/ai/Input.mdx +++ /dev/null @@ -1,9 +0,0 @@ - -import Basic from "../../_samples/ai/Input/Basic/Basic.md"; - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -<%COMPONENT_METADATA%> diff --git a/packages/website/docs/_components_pages/ai/PromptInput.mdx b/packages/website/docs/_components_pages/ai/PromptInput.mdx deleted file mode 100644 index 862d9fef74aee..0000000000000 --- a/packages/website/docs/_components_pages/ai/PromptInput.mdx +++ /dev/null @@ -1,8 +0,0 @@ -import Basic from "../../_samples/ai/PromptInput/Basic/Basic.md"; - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/ai/TextArea.mdx b/packages/website/docs/_components_pages/ai/TextArea.mdx deleted file mode 100644 index 434d69f04e0e7..0000000000000 --- a/packages/website/docs/_components_pages/ai/TextArea.mdx +++ /dev/null @@ -1,13 +0,0 @@ -import Basic from "../../_samples/ai/TextArea/Basic/Basic.md"; -import Extended from "../../_samples/ai/TextArea/Extended/Extended.md"; - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -<%COMPONENT_METADATA%> -## Extended Sample -This extended sample showcases advanced AI TextArea features including multiple AI actions and version management. - - \ No newline at end of file diff --git a/packages/website/docs/_components_pages/compat/Table/Table.mdx b/packages/website/docs/_components_pages/compat/Table/Table.mdx deleted file mode 100644 index f2ee2ecb6abb1..0000000000000 --- a/packages/website/docs/_components_pages/compat/Table/Table.mdx +++ /dev/null @@ -1,50 +0,0 @@ ---- -slug: ../Table ---- - -import Basic from "../../../_samples/compat/Table/Basic/Basic.md"; -import ActiveRows from "../../../_samples/compat/Table/ActiveRows/ActiveRows.md"; -import Grouping from "../../../_samples/compat/Table/Grouping/Grouping.md"; -import GrowingOnButtonPress from "../../../_samples/compat/Table/GrowingOnButtonPress/GrowingOnButtonPress.md"; -import GrowingOnScroll from "../../../_samples/compat/Table/GrowingOnScroll/GrowingOnScroll.md"; -import NoData from "../../../_samples/compat/Table/NoData/NoData.md"; -import Popin from "../../../_samples/compat/Table/Popin/Popin.md"; -import SingleSelection from "../../../_samples/compat/Table/SingleSelection/SingleSelection.md"; -import MultipleSelection from "../../../_samples/compat/Table/MultipleSelection/MultipleSelection.md"; -import StickyHeader from "../../../_samples/compat/Table/StickyHeader/StickyHeader.md"; - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -<%COMPONENT_METADATA%> - -## More Samples - -### Active Rows - - -### Columns Popin - - -### Single Selection - - -### Multiple Selection - - -### Grouping - - -### Growing on Button Press - - -### Growing on Scroll - - -### No Data - - -### Sticky Header - \ No newline at end of file diff --git a/packages/website/docs/_components_pages/compat/Table/TableCell.mdx b/packages/website/docs/_components_pages/compat/Table/TableCell.mdx deleted file mode 100644 index b2480f9272763..0000000000000 --- a/packages/website/docs/_components_pages/compat/Table/TableCell.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../TableCell ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/compat/Table/TableColumn.mdx b/packages/website/docs/_components_pages/compat/Table/TableColumn.mdx deleted file mode 100644 index 07a9a481ca1fb..0000000000000 --- a/packages/website/docs/_components_pages/compat/Table/TableColumn.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../TableColumn ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/compat/Table/TableGroupRow.mdx b/packages/website/docs/_components_pages/compat/Table/TableGroupRow.mdx deleted file mode 100644 index c69f0148608ab..0000000000000 --- a/packages/website/docs/_components_pages/compat/Table/TableGroupRow.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../TableGroupRow ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/compat/Table/TableRow.mdx b/packages/website/docs/_components_pages/compat/Table/TableRow.mdx deleted file mode 100644 index 20bca9218aa0a..0000000000000 --- a/packages/website/docs/_components_pages/compat/Table/TableRow.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../TableRow ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/BarcodeScannerDialog.mdx b/packages/website/docs/_components_pages/fiori/BarcodeScannerDialog.mdx deleted file mode 100644 index 3308d0f249de5..0000000000000 --- a/packages/website/docs/_components_pages/fiori/BarcodeScannerDialog.mdx +++ /dev/null @@ -1,8 +0,0 @@ -import Basic from "../../_samples/fiori/BardcodeScannerDialog/Basic/Basic.md"; - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/DynamicPage/DynamicPage.mdx b/packages/website/docs/_components_pages/fiori/DynamicPage/DynamicPage.mdx deleted file mode 100644 index db38a61a0bfcd..0000000000000 --- a/packages/website/docs/_components_pages/fiori/DynamicPage/DynamicPage.mdx +++ /dev/null @@ -1,12 +0,0 @@ ---- -slug: ../DynamicPage ---- - -import Basic from "../../../_samples/fiori/DynamicPage/Basic/Basic.md"; - -<%COMPONENT_OVERVIEW%> - -## Basic Usage - - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/DynamicPage/DynamicPageHeader.mdx b/packages/website/docs/_components_pages/fiori/DynamicPage/DynamicPageHeader.mdx deleted file mode 100644 index 48e9e4892a52e..0000000000000 --- a/packages/website/docs/_components_pages/fiori/DynamicPage/DynamicPageHeader.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../DynamicPageHeader ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/DynamicPage/DynamicPageTitle.mdx b/packages/website/docs/_components_pages/fiori/DynamicPage/DynamicPageTitle.mdx deleted file mode 100644 index 431926935ad95..0000000000000 --- a/packages/website/docs/_components_pages/fiori/DynamicPage/DynamicPageTitle.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../DynamicPageTitle ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/DynamicSideContent.mdx b/packages/website/docs/_components_pages/fiori/DynamicSideContent.mdx deleted file mode 100644 index 29e1b28714cb1..0000000000000 --- a/packages/website/docs/_components_pages/fiori/DynamicSideContent.mdx +++ /dev/null @@ -1,22 +0,0 @@ -import Basic from "../../_samples/fiori/DynamicSideContent/Basic/Basic.md"; -import SideContentPosition from "../../_samples/fiori/DynamicSideContent/SideContentPosition/SideContentPosition.md"; -import EqualSplit from "../../_samples/fiori/DynamicSideContent/EqualSplit/EqualSplit.md"; - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -<%COMPONENT_METADATA%> - -## More Samples - -### Side Content Position -The side content can be placed at the "Start" or at the "End" via the sideContentPosition property. - - - -### Equal Split -When equalSplit property is set, the main and side contents take equal space. - - \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/FlexibleColumnLayout.mdx b/packages/website/docs/_components_pages/fiori/FlexibleColumnLayout.mdx deleted file mode 100644 index 384236dd1f0cc..0000000000000 --- a/packages/website/docs/_components_pages/fiori/FlexibleColumnLayout.mdx +++ /dev/null @@ -1,16 +0,0 @@ -import Basic from "../../_samples/fiori/FlexibleColumnLayout/Basic/Basic.md"; -import LayoutsConfiguration from "../../_samples/fiori/FlexibleColumnLayout/LayoutsConfiguration/LayoutsConfiguration.md"; - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -<%COMPONENT_METADATA%> - -## More Samples - -### LayoutsConfiguration -The FlexibleColumnLayout supports customization of the column sizes within the limits of the current layout. - - \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/HeroBanner.mdx b/packages/website/docs/_components_pages/fiori/HeroBanner.mdx deleted file mode 100644 index 597d9be87e705..0000000000000 --- a/packages/website/docs/_components_pages/fiori/HeroBanner.mdx +++ /dev/null @@ -1,37 +0,0 @@ ---- -ui5_tag_name: ui5-hero-banner -ui5_since: 2.23.0 -sidebar_class_name: expComponentBadge newComponentBadge ---- - -import Basic from "../../_samples/fiori/HeroBanner/Basic/Basic.md"; -import ColumnsRatio from "../../_samples/fiori/HeroBanner/ColumnsRatio/ColumnsRatio.md"; -import UseCases from "../../_samples/fiori/HeroBanner/UseCases/UseCases.md"; -import BackgroundImage from "../../_samples/fiori/HeroBanner/BackgroundImage/BackgroundImage.md"; -import HeaderBlockAndActionsPlacement from "../../_samples/fiori/HeroBanner/HeaderBlockAndActionsPlacement/HeaderBlockAndActionsPlacement.md"; - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -<%COMPONENT_METADATA%> - -## More Samples - -### Columns Ratio - - - -### Header Block and Actions Placement - - - -### Custom Background Image - - - -### Different Use Cases - - - diff --git a/packages/website/docs/_components_pages/fiori/IllustratedMessage.mdx b/packages/website/docs/_components_pages/fiori/IllustratedMessage.mdx deleted file mode 100644 index a567496881517..0000000000000 --- a/packages/website/docs/_components_pages/fiori/IllustratedMessage.mdx +++ /dev/null @@ -1,22 +0,0 @@ -import Basic from "../../_samples/fiori/IllustratedMessage/Basic/Basic.md"; -import CustomTitle from "../../_samples/fiori/IllustratedMessage/CustomTitle/CustomTitle.md"; -import WithDialog from "../../_samples/fiori/IllustratedMessage/WithDialog/WithDialog.md"; - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -<%COMPONENT_METADATA%> - -## More Samples - -### Custom Title -By default the IllustratedMessage displays built-in title, but a custom title can be also set. - - - -### IllustratedMessage in Dialog -In genral IllustratedMessage can be displayed in many places and cases - one of them is inside Dialog. - - \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/MediaGallery/MediaGallery.mdx b/packages/website/docs/_components_pages/fiori/MediaGallery/MediaGallery.mdx deleted file mode 100644 index 0d5387c2a565a..0000000000000 --- a/packages/website/docs/_components_pages/fiori/MediaGallery/MediaGallery.mdx +++ /dev/null @@ -1,54 +0,0 @@ -import Basic from "../../../_samples/fiori/MediaGallery/Basic/Basic.md"; -import Interactive from "../../../_samples/fiori/MediaGallery/Interactive/Interactive.md"; -import Horizontal from "../../../_samples/fiori/MediaGallery/Horizontal/Horizontal.md"; -import ThumbnailCustom from "../../../_samples/fiori/MediaGallery/ThumbnailCustom/ThumbnailCustom.md"; -import VideoContent from "../../../_samples/fiori/MediaGallery/VideoContent/VideoContent.md"; -import Vertical from "../../../_samples/fiori/MediaGallery/Vertical/Vertical.md"; -import WithSelectedItem from "../../../_samples/fiori/MediaGallery/WithSelectedItem/WithSelectedItem.md"; -import WithDisabledItem from "../../../_samples/fiori/MediaGallery/WithDisabledItem/WithDisabledItem.md"; - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -<%COMPONENT_METADATA%> - -## More Samples - -### Vertical Layout -The thumbnails and selected item are vertically placed. To enable this layout - set layout="Vertical". - - - -### Horizontal Layout -The thumbnails and selected item are vertically placed. To enable this layout - set layout="Horizontal". -Furthermore, you can also define on which side of the selected item you preffer to place the thumnails. -For instance, setting menu-horizontal-align="Right" will place the thumbnails on the rigtht. - - - -### Custom Thumbnail -By default the image, passed to the MediaGalleryItem, is reused as a thumbnail that the user clicks. -However, you can display another image as thumbnail via the thumbnail slot of the MediaGalleryItem. - - - -### Selected Item -You can predefine the selected item. - - - -### Disabled Item -The MediaGallery can show diasbled items as well. In this sample, the first item is disabled and second is shown. - - - -### Interactive Display Area -Setting interactiveDisplayArea property makes the diplay area (where the media content is displayed) interactive, e.g. clickable. -In the sample, clicking on the diplay area fires an event, and in this case we show a dialog, but the application can do whatever suitable in the given scenario. - - - -### Show Video Content - \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/MediaGallery/MediaGalleryItem.mdx b/packages/website/docs/_components_pages/fiori/MediaGallery/MediaGalleryItem.mdx deleted file mode 100644 index 695676939b69a..0000000000000 --- a/packages/website/docs/_components_pages/fiori/MediaGallery/MediaGalleryItem.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../MediaGalleryItem ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/NavigationLayout.mdx b/packages/website/docs/_components_pages/fiori/NavigationLayout.mdx deleted file mode 100644 index 54733b1f8deaa..0000000000000 --- a/packages/website/docs/_components_pages/fiori/NavigationLayout.mdx +++ /dev/null @@ -1,8 +0,0 @@ -import Basic from "../../_samples/fiori/NavigationLayout/Basic/Basic.md"; - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/NotificationList/NotificationList.mdx b/packages/website/docs/_components_pages/fiori/NotificationList/NotificationList.mdx deleted file mode 100644 index f3c41585dc30f..0000000000000 --- a/packages/website/docs/_components_pages/fiori/NotificationList/NotificationList.mdx +++ /dev/null @@ -1,20 +0,0 @@ -import Basic from "../../../_samples/fiori/NotificationList/Basic/Basic.md"; -import GroupItems from "../../../_samples/fiori/NotificationList/GroupItems/Basic.md"; -import InShellBar from "../../../_samples/fiori/NotificationList/InShellBar/InShellBar.md"; - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -<%COMPONENT_METADATA%> - -## More Samples - -### Notification List with Group Items - - -### Notifications in ShellBar -The main usage of the Notifications is in the ShellBar. -Press the "notifications" icon on the right side of the ShellBar to show the Notifications. - \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/NotificationList/NotificationListGroupItem.mdx b/packages/website/docs/_components_pages/fiori/NotificationList/NotificationListGroupItem.mdx deleted file mode 100644 index 9877e63d2afc0..0000000000000 --- a/packages/website/docs/_components_pages/fiori/NotificationList/NotificationListGroupItem.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../NotificationListGroupItem ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/NotificationList/NotificationListItem.mdx b/packages/website/docs/_components_pages/fiori/NotificationList/NotificationListItem.mdx deleted file mode 100644 index 90ff986b5b3e3..0000000000000 --- a/packages/website/docs/_components_pages/fiori/NotificationList/NotificationListItem.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../NotificationListItem ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> diff --git a/packages/website/docs/_components_pages/fiori/Page.mdx b/packages/website/docs/_components_pages/fiori/Page.mdx deleted file mode 100644 index 85113392244c6..0000000000000 --- a/packages/website/docs/_components_pages/fiori/Page.mdx +++ /dev/null @@ -1,15 +0,0 @@ -import Basic from "../../_samples/fiori/Page/Basic/Basic.md"; -import FixedFooter from "../../_samples/fiori/Page/FixedFooter/FixedFooter.md"; - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -<%COMPONENT_METADATA%> - -## More Samples - -### Fixed Footer - - \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/ProductSwitch/ProductSwitch.mdx b/packages/website/docs/_components_pages/fiori/ProductSwitch/ProductSwitch.mdx deleted file mode 100644 index 759bf23eea423..0000000000000 --- a/packages/website/docs/_components_pages/fiori/ProductSwitch/ProductSwitch.mdx +++ /dev/null @@ -1,21 +0,0 @@ -import Basic from "../../../_samples/fiori/ProductSwitch/Basic/Basic.md"; -import WithShellBar from "../../../_samples/fiori/ProductSwitch/WithShellBar/WithShellBar.md"; -import WithImageSlot from "../../../_samples/fiori/ProductSwitch/WithImageSlot/WithImageSlot.md"; - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -<%COMPONENT_METADATA%> - -## More Samples - -### ProductSwitch in ShellBar -Press the "grid" on the right-most part of the ShellBar to show the ProductSwitch. - - - -### ProductSwitchItem with "image" slot - - \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/ProductSwitch/ProductSwitchItem.mdx b/packages/website/docs/_components_pages/fiori/ProductSwitch/ProductSwitchItem.mdx deleted file mode 100644 index 41cc7481ac68d..0000000000000 --- a/packages/website/docs/_components_pages/fiori/ProductSwitch/ProductSwitchItem.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../ProductSwitchItem ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/Search/Search.mdx b/packages/website/docs/_components_pages/fiori/Search/Search.mdx deleted file mode 100644 index 3a3acced05e8e..0000000000000 --- a/packages/website/docs/_components_pages/fiori/Search/Search.mdx +++ /dev/null @@ -1,49 +0,0 @@ -import Basic from "../../../_samples/fiori/Search/Basic/Basic.md"; -import Advanced from "../../../_samples/fiori/Search/Advanced/Advanced.md"; -import Byline from "../../../_samples/fiori/Search/Byline/Byline.md"; -import AdvancedFilter from "../../../_samples/fiori/Search/AdvancedFilter/AdvancedFilter.md" -import ShowMore from "../../../_samples/fiori/Search/ShowMore/ShowMore.md" -import Actions from "../../../_samples/fiori/Search/Actions/Actions.md" -import Loading from "../../../_samples/fiori/Search/Loading/Loading.md" - -<%COMPONENT_OVERVIEW%> - -## Basic Sample -A Search component with enabled scope and items and filtering by scope. - - - -<%COMPONENT_METADATA%> - -## More Samples - -### Filtering -The examples show the search message area, the search action, filtering per user input, typeahead and highlighting suggestions per user input. - - - -### Advanced Filtering Button -This example shows how to use a custom advanced filtering button via the `filterButton` slot. - - - -### Byline items -The example shows how to display byline items with an image and description. - - - -### Show More Item -This example shows how to use a Show More Item. - - - -### Actions -This example shows how to use a interactive elements in search items. - - - -### Loading State -This example shows the loading indicator during async search operations. - - - diff --git a/packages/website/docs/_components_pages/fiori/Search/SearchItem.mdx b/packages/website/docs/_components_pages/fiori/Search/SearchItem.mdx deleted file mode 100644 index aff808c32d004..0000000000000 --- a/packages/website/docs/_components_pages/fiori/Search/SearchItem.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../SearchItem ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/Search/SearchItemGroup.mdx b/packages/website/docs/_components_pages/fiori/Search/SearchItemGroup.mdx deleted file mode 100644 index 30476aa3bce8c..0000000000000 --- a/packages/website/docs/_components_pages/fiori/Search/SearchItemGroup.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../SearchItemGroup ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/Search/SearchItemShowMore.mdx b/packages/website/docs/_components_pages/fiori/Search/SearchItemShowMore.mdx deleted file mode 100644 index 9bc8d23104652..0000000000000 --- a/packages/website/docs/_components_pages/fiori/Search/SearchItemShowMore.mdx +++ /dev/null @@ -1,4 +0,0 @@ - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/Search/SearchMessageArea.mdx b/packages/website/docs/_components_pages/fiori/Search/SearchMessageArea.mdx deleted file mode 100644 index 5f7cc5fd68d19..0000000000000 --- a/packages/website/docs/_components_pages/fiori/Search/SearchMessageArea.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../SearchMessageArea ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/Search/SearchScope.mdx b/packages/website/docs/_components_pages/fiori/Search/SearchScope.mdx deleted file mode 100644 index c8f851341ed3e..0000000000000 --- a/packages/website/docs/_components_pages/fiori/Search/SearchScope.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../SearchScope ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/ShellBar/ShellBar.mdx b/packages/website/docs/_components_pages/fiori/ShellBar/ShellBar.mdx deleted file mode 100644 index ffcec3748a364..0000000000000 --- a/packages/website/docs/_components_pages/fiori/ShellBar/ShellBar.mdx +++ /dev/null @@ -1,48 +0,0 @@ -import Basic from "../../../_samples/fiori/ShellBar/Basic/Basic.md"; -import Advanced from "../../../_samples/fiori/ShellBar/Advanced/Advanced.md"; -import EmbeddedBackNavigation from "../../../_samples/fiori/ShellBar/EmbeddedBackNavigation/EmbeddedBackNavigation.md"; -import MultipleNonProductiveInstances from "../../../_samples/fiori/ShellBar/MultipleNonProductiveInstances/MultipleNonProductiveInstances.md"; -import MultipleProductiveInstances from "../../../_samples/fiori/ShellBar/MultipleProductiveInstances/MultipleProductiveInstances.md"; -import TrialExample from "../../../_samples/fiori/ShellBar/TrialExample/TrialExample.md"; -import Overflow from "../../../_samples/fiori/ShellBar/Overflow/Overflow.md"; - -<%COMPONENT_OVERVIEW%> - -## Basic Sample -The ShellBar includes Back button, Logo, Title and Profile image. - - - -<%COMPONENT_METADATA%> - -## More Samples - -### All Features -A comprehensive ShellBar demonstrating all available features including notifications, search, content items, and profile. - - - -### Embedded Back Navigation -ShellBar with embedded back navigation button in the start area. - - - -### Trial Example -ShellBar configured for trial environments with trial tags and remaining days indicator. - - - -### Multiple Productive Instances -ShellBar setup for multiple productive system instances with region indicators. - - - -### Multiple Non-Productive Instances -ShellBar setup for multiple non-productive system instances with system and region tags. - - - -### Application-Level Overflow -This sample demonstrates how applications can implement custom overflow handling for content items. When the ShellBar becomes narrow, content items are hidden and the application renders them in a custom popover. The sample listens to the `content-item-visibility-change` event and manages its own overflow button and popover. Use the slider to resize and observe the overflow behavior. - - \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/ShellBar/ShellBarBranding.mdx b/packages/website/docs/_components_pages/fiori/ShellBar/ShellBarBranding.mdx deleted file mode 100644 index c5a50199a9353..0000000000000 --- a/packages/website/docs/_components_pages/fiori/ShellBar/ShellBarBranding.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../ShellBarBranding ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/ShellBar/ShellBarItem.mdx b/packages/website/docs/_components_pages/fiori/ShellBar/ShellBarItem.mdx deleted file mode 100644 index 8436d90eaa4e1..0000000000000 --- a/packages/website/docs/_components_pages/fiori/ShellBar/ShellBarItem.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../ShellBarItem ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/ShellBar/ShellBarSearch.mdx b/packages/website/docs/_components_pages/fiori/ShellBar/ShellBarSearch.mdx deleted file mode 100644 index d7e830d54b17b..0000000000000 --- a/packages/website/docs/_components_pages/fiori/ShellBar/ShellBarSearch.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../ShellBarSearch ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/ShellBar/ShellBarSpacer.mdx b/packages/website/docs/_components_pages/fiori/ShellBar/ShellBarSpacer.mdx deleted file mode 100644 index 355a5f9cc80b4..0000000000000 --- a/packages/website/docs/_components_pages/fiori/ShellBar/ShellBarSpacer.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../ShellBarSpacer ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/SideNavigation/SideNavigation.mdx b/packages/website/docs/_components_pages/fiori/SideNavigation/SideNavigation.mdx deleted file mode 100644 index 17ff70da37e17..0000000000000 --- a/packages/website/docs/_components_pages/fiori/SideNavigation/SideNavigation.mdx +++ /dev/null @@ -1,44 +0,0 @@ -import Basic from "../../../_samples/fiori/SideNavigation/Basic/Basic.md"; -import QuickAction from "../../../_samples/fiori/SideNavigation/QuickAction/QuickAction.md"; -import UnselectableParentItems from "../../../_samples/fiori/SideNavigation/UnselectableParentItems/UnselectableParentItems.md"; -import OverlayMode from "../../../_samples/fiori/SideNavigation/OverlayMode/OverlayMode.md"; -import CustomWidth from "../../../_samples/fiori/SideNavigation/CustomWidth/CustomWidth.md"; -import Tags from "../../../_samples/fiori/SideNavigation/Tags/Tags.md"; - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -<%COMPONENT_METADATA%> - -## More Samples - -### Unselectable Parent Items -When a parent item is selected, it will expand or collapse the list of child items, instead of the parent being selected itself. - - - -### Quick Action -Quick action items allow for providing access to frequent functionality. - - - -### Overlay Mode -SideNavigation is enabled to be used inside a responsive popover. This example shows how to achieve overlay mode with correct design and interaction. - - - -### Defining Custom Width -The width of the side navigation panel can be customized using CSS. The panel must be at least 16 rem wide to maintain readability and layout stability. You can set a larger width as needed, but it cannot be reduced below 16 rem. If the panel does not have sufficient space, long texts will wrap automatically. - - - -### Indication Tags -Navigation items can display indication tags to highlight status or phases such as "New", "Beta", or "Deprecated". Tags use the `tag` slot and should follow these guidelines: -- Use `ui5-tag` with `design="Set2"`, `hide-state-icon`, and `colorScheme` values 5-10 (avoiding semantic colors 1-4 which may be confused with error/success/warning states) -- It is recommended to limit tag width to 64px (4rem). If tag text exceeds this, use shortened forms or abbreviations (e.g., "Experimental" → "Exp") -- Tags are non-interactive - they serve purely as visual indicators and do not trigger any action or tooltip -- Only one tag is allowed per navigation item - - diff --git a/packages/website/docs/_components_pages/fiori/SideNavigation/SideNavigationGroup.mdx b/packages/website/docs/_components_pages/fiori/SideNavigation/SideNavigationGroup.mdx deleted file mode 100644 index 4ac0b97952388..0000000000000 --- a/packages/website/docs/_components_pages/fiori/SideNavigation/SideNavigationGroup.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../SideNavigationGroup ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/SideNavigation/SideNavigationItem.mdx b/packages/website/docs/_components_pages/fiori/SideNavigation/SideNavigationItem.mdx deleted file mode 100644 index 62fbe074f69a7..0000000000000 --- a/packages/website/docs/_components_pages/fiori/SideNavigation/SideNavigationItem.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../SideNavigationItem ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/SideNavigation/SideNavigationSubItem.mdx b/packages/website/docs/_components_pages/fiori/SideNavigation/SideNavigationSubItem.mdx deleted file mode 100644 index d8e6d4a7322be..0000000000000 --- a/packages/website/docs/_components_pages/fiori/SideNavigation/SideNavigationSubItem.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../SideNavigationSubItem ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/Timeline/Timeline.mdx b/packages/website/docs/_components_pages/fiori/Timeline/Timeline.mdx deleted file mode 100644 index 723702f7a6db0..0000000000000 --- a/packages/website/docs/_components_pages/fiori/Timeline/Timeline.mdx +++ /dev/null @@ -1,61 +0,0 @@ -import Basic from "../../../_samples/fiori/Timeline/Basic/Basic.md"; -import Horizontal from "../../../_samples/fiori/Timeline/Horizontal/Horizontal.md"; -import InCard from "../../../_samples/fiori/Timeline/InCard/InCard.md"; -import WithGroups from "../../../_samples/fiori/Timeline/WithGroups/WithGroups.md"; -import WithState from "../../../_samples/fiori/Timeline/WithState/WithState.md"; -import WithGrowing from "../../../_samples/fiori/Timeline/WithGrowing/WithGrowing.md"; -import WithHeader from "../../../_samples/fiori/Timeline/WithHeader/WithHeader.md"; -import WithFilter from "../../../_samples/fiori/Timeline/WithFilter/WithFilter.md"; -import StickyInPage from "../../../_samples/fiori/Timeline/StickyInPage/StickyInPage.md"; - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -<%COMPONENT_METADATA%> - -## More Samples - -### Horizontal layout - - -### Timeline with State - - - -### Timeline in Card - - - -### Timeline with Groups - - - -### Timeline with Growing - - - -### Timeline with Header and Info Bar - -The `header` and `infoBar` slots let applications place their own controls and status indicators above the Timeline items. - -- **`header`** — controls (search, sort, filter). Use a `ui5-toolbar`. -- **`infoBar`** — status display (active filters, item count). Use a `ui5-bar` with `design="Subheader"`. -- Use `stickyHeader` to pin both bars while scrolling. - -The Timeline does not filter, sort, or search — the application owns that logic and updates items accordingly. - -#### Minimal — search and live count - - - -#### Full pipeline — search, sort and filter - - - -#### Sticky in a scrollable Timeline - -When the Timeline owns its scrollbar (give it a constrained height), `stickyHeader` keeps the `header` and `infoBar` slots pinned to the top while the items scroll. - - diff --git a/packages/website/docs/_components_pages/fiori/Timeline/TimelineGroupItem.mdx b/packages/website/docs/_components_pages/fiori/Timeline/TimelineGroupItem.mdx deleted file mode 100644 index 2a5429ae4c61c..0000000000000 --- a/packages/website/docs/_components_pages/fiori/Timeline/TimelineGroupItem.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../TimelineGroupItem ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/Timeline/TimelineItem.mdx b/packages/website/docs/_components_pages/fiori/Timeline/TimelineItem.mdx deleted file mode 100644 index f267c9be3be8e..0000000000000 --- a/packages/website/docs/_components_pages/fiori/Timeline/TimelineItem.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../TimelineItem ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/UploadCollection/UploadCollection.mdx b/packages/website/docs/_components_pages/fiori/UploadCollection/UploadCollection.mdx deleted file mode 100644 index 6d25d6e6dee9e..0000000000000 --- a/packages/website/docs/_components_pages/fiori/UploadCollection/UploadCollection.mdx +++ /dev/null @@ -1,22 +0,0 @@ -import Basic from "../../../_samples/fiori/UploadCollection/Basic/Basic.md"; -import RenamingFiles from "../../../_samples/fiori/UploadCollection/RenamingFiles/RenamingFiles.md"; -import VariousUploadStates from "../../../_samples/fiori/UploadCollection/VariousUploadStates/VariousUploadStates.md"; -import DragAndDrop from "../../../_samples/fiori/UploadCollection/DragAndDrop/DragAndDrop.md"; - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -<%COMPONENT_METADATA%> - -## More Samples - -### Renaming Files - - -### Upload States - - -### Drag and Drop - \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/UploadCollection/UploadCollectionItem.mdx b/packages/website/docs/_components_pages/fiori/UploadCollection/UploadCollectionItem.mdx deleted file mode 100644 index ac7007b8589fc..0000000000000 --- a/packages/website/docs/_components_pages/fiori/UploadCollection/UploadCollectionItem.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../UploadCollectionItem ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/UserMenu/UserMenu.mdx b/packages/website/docs/_components_pages/fiori/UserMenu/UserMenu.mdx deleted file mode 100644 index 701b4377ceff7..0000000000000 --- a/packages/website/docs/_components_pages/fiori/UserMenu/UserMenu.mdx +++ /dev/null @@ -1,17 +0,0 @@ ---- -slug: ../UserMenu ---- - -import Basic from "../../../_samples/fiori/UserMenu/Basic/Basic.md"; - -import Advanced from "../../../_samples/fiori/UserMenu/Advanced/Advanced.md"; - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -<%COMPONENT_METADATA%> - -## More Samples - diff --git a/packages/website/docs/_components_pages/fiori/UserMenu/UserMenuAccount.mdx b/packages/website/docs/_components_pages/fiori/UserMenu/UserMenuAccount.mdx deleted file mode 100644 index f5d9ef579d488..0000000000000 --- a/packages/website/docs/_components_pages/fiori/UserMenu/UserMenuAccount.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../UserMenuAccount ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/UserMenu/UserMenuItem.mdx b/packages/website/docs/_components_pages/fiori/UserMenu/UserMenuItem.mdx deleted file mode 100644 index 37c389bd1e141..0000000000000 --- a/packages/website/docs/_components_pages/fiori/UserMenu/UserMenuItem.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../UserMenuItem ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/UserMenu/UserMenuItemGroup.mdx b/packages/website/docs/_components_pages/fiori/UserMenu/UserMenuItemGroup.mdx deleted file mode 100644 index 3c44d435284c0..0000000000000 --- a/packages/website/docs/_components_pages/fiori/UserMenu/UserMenuItemGroup.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../UserMenuItemGroup ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/UserSettingsDialog/UserSettingsAccountView.mdx b/packages/website/docs/_components_pages/fiori/UserSettingsDialog/UserSettingsAccountView.mdx deleted file mode 100644 index 61a7f9253b564..0000000000000 --- a/packages/website/docs/_components_pages/fiori/UserSettingsDialog/UserSettingsAccountView.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../UserSettingsAccountView ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/UserSettingsDialog/UserSettingsAppearanceView.mdx b/packages/website/docs/_components_pages/fiori/UserSettingsDialog/UserSettingsAppearanceView.mdx deleted file mode 100644 index 3c7a2ee3e0d17..0000000000000 --- a/packages/website/docs/_components_pages/fiori/UserSettingsDialog/UserSettingsAppearanceView.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../UserSettingsAppearanceView ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/UserSettingsDialog/UserSettingsAppearanceViewGroup.mdx b/packages/website/docs/_components_pages/fiori/UserSettingsDialog/UserSettingsAppearanceViewGroup.mdx deleted file mode 100644 index eb627d0293511..0000000000000 --- a/packages/website/docs/_components_pages/fiori/UserSettingsDialog/UserSettingsAppearanceViewGroup.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../UserSettingsAppearanceViewGroup ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/UserSettingsDialog/UserSettingsAppearanceViewItem.mdx b/packages/website/docs/_components_pages/fiori/UserSettingsDialog/UserSettingsAppearanceViewItem.mdx deleted file mode 100644 index 9cd6c67494341..0000000000000 --- a/packages/website/docs/_components_pages/fiori/UserSettingsDialog/UserSettingsAppearanceViewItem.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../UserSettingsAppearanceViewItem ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/UserSettingsDialog/UserSettingsDialog.mdx b/packages/website/docs/_components_pages/fiori/UserSettingsDialog/UserSettingsDialog.mdx deleted file mode 100644 index cbcc66d9b502d..0000000000000 --- a/packages/website/docs/_components_pages/fiori/UserSettingsDialog/UserSettingsDialog.mdx +++ /dev/null @@ -1,22 +0,0 @@ ---- -slug: ../UserSettingsDialog ---- - -import Basic from "../../../_samples/fiori/UserSettingsDialog/Basic/Basic.md"; -import SaveMode from "../../../_samples/fiori/UserSettingsDialog/SaveMode/SaveMode.md"; - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -<%COMPONENT_METADATA%> - -## More Samples - -### Save Mode -By default the dialog shows a single Close button in its footer and follows an implicit-save flow — changes are applied as the user interacts with each view. - -Setting the saveMode property replaces the footer with Save (Emphasized) and Cancel buttons. Clicks fire the corresponding save and cancel events; the dialog does not close itself, so the application is responsible for persisting or discarding the changes and closing the dialog afterwards (typically after a successful backend call). - - diff --git a/packages/website/docs/_components_pages/fiori/UserSettingsDialog/UserSettingsItem.mdx b/packages/website/docs/_components_pages/fiori/UserSettingsDialog/UserSettingsItem.mdx deleted file mode 100644 index fc1efa70c340b..0000000000000 --- a/packages/website/docs/_components_pages/fiori/UserSettingsDialog/UserSettingsItem.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../UserSettingsItem ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/UserSettingsDialog/UserSettingsView.mdx b/packages/website/docs/_components_pages/fiori/UserSettingsDialog/UserSettingsView.mdx deleted file mode 100644 index a6f9d94388113..0000000000000 --- a/packages/website/docs/_components_pages/fiori/UserSettingsDialog/UserSettingsView.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../UserSettingsView ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/ViewSettingsDialog/FilterItem.mdx b/packages/website/docs/_components_pages/fiori/ViewSettingsDialog/FilterItem.mdx deleted file mode 100644 index c2a7fbe7892e6..0000000000000 --- a/packages/website/docs/_components_pages/fiori/ViewSettingsDialog/FilterItem.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../FilterItem ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/ViewSettingsDialog/FilterItemOption.mdx b/packages/website/docs/_components_pages/fiori/ViewSettingsDialog/FilterItemOption.mdx deleted file mode 100644 index 8b6e2ca04fdb2..0000000000000 --- a/packages/website/docs/_components_pages/fiori/ViewSettingsDialog/FilterItemOption.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../FilterItemOption ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/ViewSettingsDialog/GroupItem.mdx b/packages/website/docs/_components_pages/fiori/ViewSettingsDialog/GroupItem.mdx deleted file mode 100644 index bb3524ff1897d..0000000000000 --- a/packages/website/docs/_components_pages/fiori/ViewSettingsDialog/GroupItem.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../GroupItem ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/ViewSettingsDialog/SortItem.mdx b/packages/website/docs/_components_pages/fiori/ViewSettingsDialog/SortItem.mdx deleted file mode 100644 index c794a36421a6d..0000000000000 --- a/packages/website/docs/_components_pages/fiori/ViewSettingsDialog/SortItem.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../SortItem ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/ViewSettingsDialog/ViewSettingsDialog.mdx b/packages/website/docs/_components_pages/fiori/ViewSettingsDialog/ViewSettingsDialog.mdx deleted file mode 100644 index 94186d81e4883..0000000000000 --- a/packages/website/docs/_components_pages/fiori/ViewSettingsDialog/ViewSettingsDialog.mdx +++ /dev/null @@ -1,15 +0,0 @@ -import Basic from "../../../_samples/fiori/ViewSettingsDialog/Basic/Basic.md"; -import CustomTabs from "../../../_samples/fiori/ViewSettingsDialog/CustomTabs/CustomTabs.md"; - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -## Custom Tabs - -The ViewSettingsDialog supports custom tabs alongside the built-in Sort, Filter, and Group tabs. Use the `ui5-view-settings-dialog-custom-tab` component in the `customTabs` slot to add application-specific settings with any content. - - - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/ViewSettingsDialog/ViewSettingsDialogCustomTab.mdx b/packages/website/docs/_components_pages/fiori/ViewSettingsDialog/ViewSettingsDialogCustomTab.mdx deleted file mode 100644 index d37e1b3901b3a..0000000000000 --- a/packages/website/docs/_components_pages/fiori/ViewSettingsDialog/ViewSettingsDialogCustomTab.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../ViewSettingsDialogCustomTab ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> diff --git a/packages/website/docs/_components_pages/fiori/Wizard/Wizard.mdx b/packages/website/docs/_components_pages/fiori/Wizard/Wizard.mdx deleted file mode 100644 index 18a0c1accfe03..0000000000000 --- a/packages/website/docs/_components_pages/fiori/Wizard/Wizard.mdx +++ /dev/null @@ -1,20 +0,0 @@ -import Basic from "../../../_samples/fiori/Wizard/Basic/Basic.md"; -import PageMode from "../../../_samples/fiori/Wizard/PageMode/PageMode.md"; - -<%COMPONENT_OVERVIEW%> - -## Basic Sample -By default the navigation to another step happens with scrolling or pressing the given step in the Wizard header. -How to use the sample: to explore the steps click the "Step2' button, then enable the "5 years guarantee included -" switch to disover the "Step3" button to reach the final step. - - - -<%COMPONENT_METADATA%> - -## More Samples - -### Page Mode -Instead of scrolling each step is shown as a separate page. - - \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/Wizard/WizardStep.mdx b/packages/website/docs/_components_pages/fiori/Wizard/WizardStep.mdx deleted file mode 100644 index 738d503756d20..0000000000000 --- a/packages/website/docs/_components_pages/fiori/Wizard/WizardStep.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../WizardStep ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/main/Avatar/Avatar.mdx b/packages/website/docs/_components_pages/main/Avatar/Avatar.mdx deleted file mode 100644 index 97397a153e6a1..0000000000000 --- a/packages/website/docs/_components_pages/main/Avatar/Avatar.mdx +++ /dev/null @@ -1,80 +0,0 @@ ---- -slug: ../Avatar ---- - -import Basic from "../../../_samples/main/Avatar/Basic/Basic.md"; -import Interactive from "../../../_samples/main/Avatar/Interactive/Interactive.md"; -import Decorative from "../../../_samples/main/Avatar/Decorative/Decorative.md"; -import Variants from "../../../_samples/main/Avatar/Variants/Variants.md"; -import WithBadge from "../../../_samples/main/Avatar/WithBadge/WithBadge.md"; -import ColorSchemes from "../../../_samples/main/Avatar/ColorSchemes/ColorSchemes.md"; -import Sizes from "../../../_samples/main/Avatar/Sizes/Sizes.md"; -import Shapes from "../../../_samples/main/Avatar/Shapes/Shapes.md"; -import WithImage from "../../../_samples/main/Avatar/WithImage/WithImage.md"; -import WithIcon from "../../../_samples/main/Avatar/WithIcon/WithIcon.md"; -import Styles from "../../../_samples/main/Avatar/Styles/Styles.md"; - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -<%COMPONENT_METADATA%> - -## More Samples - -### Shapes -The Avatar comes in two shapes (Square and Circle). - - - -### Sizes -The Avatar comes in several sizes (S to XL). - - - -### Interactive Mode -The Avatar can be made interactive in two ways: -- `mode="Interactive"` - Sets the avatar to interactive mode with role="button", making it focusable and enabling keyboard interaction -- `interactive` property - A boolean property that also makes the avatar interactive - -**Note:** The `interactive` property takes precedence over the `mode` property. When `interactive=true`, the `mode` property value is ignored, and the avatar behaves as interactive. - - - -### Decorative Mode -The Avatar can be set to decorative mode with `mode="Decorative"`, making it purely visual without semantic content (role="presentation", aria-hidden="true"). This is useful when the avatar is used for visual purposes only and shouldn't be announced by screen readers. - - - -### Color Schemes -The Avatar can be displayed in multiple color schemes. - - - -### With Icon -The Avatar can show icons. - - - -### With Image -The Avatar can show images. - - - -### With Badge -The Avatar supports visual affordance through badges using the `ui5-avatar-badge` component. Badges can display icons with different value states to indicate status or notifications. **It is recommended to use badges with interactive avatars** for better user experience and accessibility. - -`ui5-avatar-badge` displays an icon tooltip by default, based on the icon semantic text. To provide a custom tooltip text, set the badge `tooltip` property. - - - -### All Variants -A comprehensive overview of all Avatar variants with their recommended use cases and accessibility annotations: - - - -### Custom Styling -The Avatar allows customization with pure CSS on tag level. - - \ No newline at end of file diff --git a/packages/website/docs/_components_pages/main/Avatar/AvatarBadge.mdx b/packages/website/docs/_components_pages/main/Avatar/AvatarBadge.mdx deleted file mode 100644 index f86f5918928ea..0000000000000 --- a/packages/website/docs/_components_pages/main/Avatar/AvatarBadge.mdx +++ /dev/null @@ -1,20 +0,0 @@ ---- -slug: ../../AvatarBadge ---- - -import Basic from "../../../_samples/main/AvatarBadge/Basic/Basic.md"; -import ValueStates from "../../../_samples/main/AvatarBadge/ValueStates/ValueStates.md"; - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -<%COMPONENT_METADATA%> - -## More Samples - -### States -The AvatarBadge supports different states to indicate status or notifications. - - diff --git a/packages/website/docs/_components_pages/main/AvatarGroup.mdx b/packages/website/docs/_components_pages/main/AvatarGroup.mdx deleted file mode 100644 index 2c0dcbf951a20..0000000000000 --- a/packages/website/docs/_components_pages/main/AvatarGroup.mdx +++ /dev/null @@ -1,26 +0,0 @@ ---- -slug: ../AvatarGroup ---- - -import Basic from "../../_samples/main/AvatarGroup/Basic/Basic.md"; -import TypesAndSizes from "../../_samples/main/AvatarGroup/TypesAndSizes/TypesAndSizes.md"; -import IndividualWithPopover from "../../_samples/main/AvatarGroup/IndividualWithPopover/IndividualWithPopover.md"; -import GroupWithPopover from "../../_samples/main/AvatarGroup/GroupWithPopover/GroupWithPopover.md"; - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -<%COMPONENT_METADATA%> - -## More Samples - -### Types And Sizes - - -### Individual - - -### Grouping - \ No newline at end of file diff --git a/packages/website/docs/_components_pages/main/Bar.mdx b/packages/website/docs/_components_pages/main/Bar.mdx deleted file mode 100644 index eb7530fb8a2ca..0000000000000 --- a/packages/website/docs/_components_pages/main/Bar.mdx +++ /dev/null @@ -1,12 +0,0 @@ -import Basic from "../../_samples/main/Bar/Basic/Basic.md"; -import AccessibleRole from "../../_samples/main/Bar/AccessibleRole/AccessibleRole.md"; - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -<%COMPONENT_METADATA%> - -## Bar with accessible role - \ No newline at end of file diff --git a/packages/website/docs/_components_pages/main/Breadcrumbs/Breadcrumbs.mdx b/packages/website/docs/_components_pages/main/Breadcrumbs/Breadcrumbs.mdx deleted file mode 100644 index bfcf44b417e5d..0000000000000 --- a/packages/website/docs/_components_pages/main/Breadcrumbs/Breadcrumbs.mdx +++ /dev/null @@ -1,40 +0,0 @@ ---- -slug: ../../Breadcrumbs ---- - -import Basic from "../../../_samples/main/Breadcrumbs/Basic/Basic.md"; -import BreadcrumbsStyles from "../../../_samples/main/Breadcrumbs/BreadcrumbsStyles/BreadcrumbsStyles.md"; -import BreadcrumbsOverflow from "../../../_samples/main/Breadcrumbs/BreadcrumbsOverflow/BreadcrumbsOverflow.md"; -import NoCurrentPage from "../../../_samples/main/Breadcrumbs/NoCurrentPage/NoCurrentPage.md"; -import ClickEvent from "../../../_samples/main/Breadcrumbs/ClickEvent/ClickEvent.md"; - - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -<%COMPONENT_METADATA%> - -## More Samples - -### Overflow -When the links don't fit the available space, they overflow. - - - - -### Separator Styles -Separator between the links can be easily changed. - - - -### Current Page Appearance -The Breadcrumbs supports two visual appearances for the last BreadcrumbsItem - as "current page" (bold and without separator) and as a regular link, followed by separator. - - - -### Item Click Event -Each `ui5-breadcrumbs-item` fires its own `click` event, allowing framework consumers to attach handlers directly on the item. - - \ No newline at end of file diff --git a/packages/website/docs/_components_pages/main/Breadcrumbs/BreadcrumbsItem.mdx b/packages/website/docs/_components_pages/main/Breadcrumbs/BreadcrumbsItem.mdx deleted file mode 100644 index 54e46710019e9..0000000000000 --- a/packages/website/docs/_components_pages/main/Breadcrumbs/BreadcrumbsItem.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../../BreadcrumbsItem ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/main/BusyIndicator.mdx b/packages/website/docs/_components_pages/main/BusyIndicator.mdx deleted file mode 100644 index 2ac8d92c7a7b5..0000000000000 --- a/packages/website/docs/_components_pages/main/BusyIndicator.mdx +++ /dev/null @@ -1,33 +0,0 @@ ---- -slug: ../BusyIndicator ---- - -import Basic from "../../_samples/main/BusyIndicator/Basic/Basic.md"; -import WithComponent from "../../_samples/main/BusyIndicator/WithComponent/WithComponent.md"; -import Sizes from "../../_samples/main/BusyIndicator/Sizes/Sizes.md"; -import TextPlacement from "../../_samples/main/BusyIndicator/TextPlacement/TextPlacement.md"; - - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -<%COMPONENT_METADATA%> - -## More Samples - -### Sizes -The BusyIndicator comes in several sizes - S, M and L. - - - -### Text Placement with display text -The BusyIndicator can display text either above (via text-placement="Top") or below the animated dots (by default). - - - -### Busy component -The BusyIndicator can be placed over another web component. - - \ No newline at end of file diff --git a/packages/website/docs/_components_pages/main/Button/Button.mdx b/packages/website/docs/_components_pages/main/Button/Button.mdx deleted file mode 100644 index a98e89f21c47e..0000000000000 --- a/packages/website/docs/_components_pages/main/Button/Button.mdx +++ /dev/null @@ -1,56 +0,0 @@ ---- -slug: ../Button ---- - -import Basic from "../../../_samples/main/Button/Basic/Basic.md"; -import Design from "../../../_samples/main/Button/Design/Design.md"; -import IconOnly from "../../../_samples/main/Button/IconOnly/IconOnly.md"; -import TextAndIcon from "../../../_samples/main/Button/TextAndIcon/TextAndIcon.md"; -import EndIcon from "../../../_samples/main/Button/EndIcon/EndIcon.md"; -import CustomStyling from "../../../_samples/main/Button/CustomStyling/CustomStyling.md"; -import MenuButton from "../../../_samples/main/Button/MenuButton/MenuButton.md"; -import ButtonBadge from "../../../_samples/main/Button/ButtonBadge/ButtonBadge.md"; -import Loading from "../../../_samples/main/Button/Loading/Loading.md" - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -<%COMPONENT_METADATA%> - -## More Samples - -### Design -The Button supports several designs to indicate the priority or the nature of the action. - - - -### Icon Only - - -### Text and Icon - - -### Icon at the End -Button allows adding of second Icon at the end. - - - -### Custom Styling -To some extent, the Button allows customization with pure CSS as shown in the sample. - - - -### Menu Button -Achieve Menu Button functionality. - - - -### Button with badge -Add a badge to the button. - - - -### Button with Loading - \ No newline at end of file diff --git a/packages/website/docs/_components_pages/main/Button/ButtonBadge.mdx b/packages/website/docs/_components_pages/main/Button/ButtonBadge.mdx deleted file mode 100644 index 50a6ddcae6d47..0000000000000 --- a/packages/website/docs/_components_pages/main/Button/ButtonBadge.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../../ButtonBadge ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/main/Calendar/Calendar.mdx b/packages/website/docs/_components_pages/main/Calendar/Calendar.mdx deleted file mode 100644 index c91016c683955..0000000000000 --- a/packages/website/docs/_components_pages/main/Calendar/Calendar.mdx +++ /dev/null @@ -1,58 +0,0 @@ ---- -slug: ../../Calendar ---- - -import Basic from "../../../_samples/main/Calendar/Basic/Basic.md"; -import Bounds from "../../../_samples/main/Calendar/Bounds/Bounds.md"; -import CalendarTypes from "../../../_samples/main/Calendar/CalendarTypes/CalendarTypes.md"; -import CalendarWithLegend from "../../../_samples/main/Calendar/CalendarWithLegend/CalendarWithLegend.md" -import SelectionModes from "../../../_samples/main/Calendar/SelectionModes/SelectionModes.md"; -import CalendarInDifferentTimezone from "../../../_samples/main/Calendar/CalendarInDifferentTimezone/CalendarInDifferentTimezone.md"; -import CalendarWeekNumbering from "../../../_samples/main/Calendar/CalendarWeekNumbering/CalendarWeekNumbering.md"; -import CalendarWithDisabledDates from "../../../_samples/main/Calendar/CalendarWithDisabledDates/CalendarWithDisabledDates.md"; -import useBaseUrl from "@docusaurus/useBaseUrl"; -import Link from '@docusaurus/Link'; - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -<%COMPONENT_METADATA%> - -## More Samples - -### Selection Modes -The Calendar supports Single, Multiple and Range selection. - - - - -### Min and Max Dates -Define min and max date boundaries to contrain user choice. - - - -### Calendar Types -Several calendars are supported: Gregorian, Islamic, Persian and Japanese. - - - -### Calendar with Legend -You can use the [CalendarLegend](../CalendarLegend/CalendarLegend.mdx) component in addition to the Calendar to highlight specific days. -Discover all the available CalendarLegendItem Types. - - - - -### Timezones -You can set to the configuration the preferred time zone, such as: Asia/Tokyo, Pacific/Apia, Asia/Kolkata, Europe/Sofia and etc. - - -### CalendarWeekNumbering -You can use the component, the preferred week numbering and first day of week. - - -### Calendar with Disabled Dates -Define disabled dates - \ No newline at end of file diff --git a/packages/website/docs/_components_pages/main/Calendar/CalendarDate.mdx b/packages/website/docs/_components_pages/main/Calendar/CalendarDate.mdx deleted file mode 100644 index 7bd3fb09e5661..0000000000000 --- a/packages/website/docs/_components_pages/main/Calendar/CalendarDate.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../../CalendarDate ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/main/Calendar/CalendarDateRange.mdx b/packages/website/docs/_components_pages/main/Calendar/CalendarDateRange.mdx deleted file mode 100644 index 49b3f398681e0..0000000000000 --- a/packages/website/docs/_components_pages/main/Calendar/CalendarDateRange.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../../CalendarDateRange ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/main/Calendar/SpecialCalendarDate.mdx b/packages/website/docs/_components_pages/main/Calendar/SpecialCalendarDate.mdx deleted file mode 100644 index f17d7b8cb24e7..0000000000000 --- a/packages/website/docs/_components_pages/main/Calendar/SpecialCalendarDate.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../../SpecialCalendarDate ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/main/CalendarLegend/CalendarLegend.mdx b/packages/website/docs/_components_pages/main/CalendarLegend/CalendarLegend.mdx deleted file mode 100644 index fe2189b0398a0..0000000000000 --- a/packages/website/docs/_components_pages/main/CalendarLegend/CalendarLegend.mdx +++ /dev/null @@ -1,25 +0,0 @@ ---- -slug: ../../CalendarLegend ---- - -import Basic from "../../../_samples/main/CalendarLegend/Basic/Basic.md"; -import ItemTypes from "../../../_samples/main/CalendarLegend/ItemTypes/ItemTypes.md"; -import HideToday from "../../../_samples/main/CalendarLegend/HideToday/HideToday.md"; - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -<%COMPONENT_METADATA%> - -## More Samples - -### CalendarLegendItem Types - - -### Hide CalendarLegendItems -By default, the CalendarLegend shows Today, SelectedDay, WorkingDay and NonWorkingDay items. -However, you can hide them as shown in the sample. - - \ No newline at end of file diff --git a/packages/website/docs/_components_pages/main/CalendarLegend/CalendarLegendItem.mdx b/packages/website/docs/_components_pages/main/CalendarLegend/CalendarLegendItem.mdx deleted file mode 100644 index 2a1c38888e2fa..0000000000000 --- a/packages/website/docs/_components_pages/main/CalendarLegend/CalendarLegendItem.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../../CalendarLegendItem ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/main/Card/Card.mdx b/packages/website/docs/_components_pages/main/Card/Card.mdx deleted file mode 100644 index f6b8e7a0194a8..0000000000000 --- a/packages/website/docs/_components_pages/main/Card/Card.mdx +++ /dev/null @@ -1,30 +0,0 @@ ---- -slug: ../../Card ---- - -import Basic from "../../../_samples/main/Card/Basic/Basic.md"; -import WithList from "../../../_samples/main/Card/WithList/WithList.md"; -import WithTable from "../../../_samples/main/Card/WithTable/WithTable.md"; -import WithTimeline from "../../../_samples/main/Card/WithTimeline/WithTimeline.md"; -import MoreCards from "../../../_samples/main/Card/MoreCards/MoreCards.md"; - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -<%COMPONENT_METADATA%> - -## More Samples - -### List Card - - -### Table Card - - -### Timeline Card - - -### Object Card - \ No newline at end of file diff --git a/packages/website/docs/_components_pages/main/Card/CardHeader.mdx b/packages/website/docs/_components_pages/main/Card/CardHeader.mdx deleted file mode 100644 index 8ac3e82aa86f6..0000000000000 --- a/packages/website/docs/_components_pages/main/Card/CardHeader.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../../CardHeader ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/main/Carousel.mdx b/packages/website/docs/_components_pages/main/Carousel.mdx deleted file mode 100644 index 2420ecb0203de..0000000000000 --- a/packages/website/docs/_components_pages/main/Carousel.mdx +++ /dev/null @@ -1,54 +0,0 @@ ---- -slug: ../Carousel ---- - -<%COMPONENT_OVERVIEW%> - -import Basic from "../../_samples/main/Carousel/Basic/Basic.md"; -import Cyclic from "../../_samples/main/Carousel/Cyclic/Cyclic.md"; -import ArrowsPlacement from "../../_samples/main/Carousel/ArrowsPlacement/ArrowsPlacement.md"; -import AccessibleName from "../../_samples/main/Carousel/AccessibleName/AccessibleName.md"; -import CardsWithHidden from "../../_samples/main/Carousel/CardsWithHidden/CardsWithHidden.md"; -import PageIndicatorType from "../../_samples/main/Carousel/PageIndicatorType/PageIndicatorType.md"; -import MultipleItemsPerPage from "../../_samples/main/Carousel/MultipleItemsPerPage/MultipleItemsPerPage.md"; - - - -<%COMPONENT_METADATA%> - -## More Samples - -### Cyclic -When the last page is reached, pressing "Forward" will navigate to the start. -When the first page is reached, pressing "Backward" will navigate to the last page. - - - -### Arrows Placement -When **arrowsPlacement** is set to **"Content"**, the arrows are placed on the sides of the current page. -When **arrowsPlacement** is set to **"Navigation"**, the arrows are placed on the sides of the page indicator. - - - -### Page Indicator -When **pageIndicatorType** is set to **"Default"**, the page indicator appear as dots. -When **pageIndicatorType** is set to **"Numeric"** - as numbers. - - - -### Multiple Items per Page - -The **items-per-page** property -define the number of items per page for given breakpoint ("S", "M", "L" and "XL"). - - - -### Accessible name -Use the **accessibleName** or the **accessibleNameRef** properties to label the Carousel and improve its accessibility. - - - -### Carousel with Hidden Items -This is a Carousel containing cards where some are hidden using the **hidden** attribute. Hidden items will not be included in the carousel navigation. - - diff --git a/packages/website/docs/_components_pages/main/CheckBox.mdx b/packages/website/docs/_components_pages/main/CheckBox.mdx deleted file mode 100644 index 173529533bd0a..0000000000000 --- a/packages/website/docs/_components_pages/main/CheckBox.mdx +++ /dev/null @@ -1,39 +0,0 @@ ---- -slug: ../CheckBox ---- - -import Basic from "../../_samples/main/CheckBox/Basic/Basic.md"; -import TextWrapping from "../../_samples/main/CheckBox/TextWrapping/TextWrapping.md"; -import States from "../../_samples/main/CheckBox/States/States.md"; -import Indeterminate from "../../_samples/main/CheckBox/Indeterminate/Indeterminate.md"; -import Group from "../../_samples/main/CheckBox/Group/Group.md"; - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -<%COMPONENT_METADATA%> - -## More Samples - -### Indeterminate -The CheckBox can also display an indeterminate state. It's usefull to indicate that not all tasks/items are done/checked. - - - - -### States -CheckBox supports several semantic value states, readonly, disabled, etc. - - - -### Text Truncation and Wrapping -The CheckBox text wraps by default. To make it truncate - set wrapping-type="None". - - - -### Group of Checkboxes in a Form -Checkboxes can be logically grouped using the same name attribute to create a multi-selection form field. When the form is submitted, each checked item will send its individual value to the server, allowing backend processing to identify exactly which options the user selected. - - \ No newline at end of file diff --git a/packages/website/docs/_components_pages/main/ColorPalette/ColorPalette.mdx b/packages/website/docs/_components_pages/main/ColorPalette/ColorPalette.mdx deleted file mode 100644 index d9e214b73428e..0000000000000 --- a/packages/website/docs/_components_pages/main/ColorPalette/ColorPalette.mdx +++ /dev/null @@ -1,12 +0,0 @@ ---- -slug: ../../ColorPalette ---- - -import Basic from "../../../_samples/main/ColorPalette/Basic/Basic.md"; - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/main/ColorPalette/ColorPaletteItem.mdx b/packages/website/docs/_components_pages/main/ColorPalette/ColorPaletteItem.mdx deleted file mode 100644 index a291f07f4b043..0000000000000 --- a/packages/website/docs/_components_pages/main/ColorPalette/ColorPaletteItem.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../../ColorPaletteItem ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/main/ColorPalettePopover.mdx b/packages/website/docs/_components_pages/main/ColorPalettePopover.mdx deleted file mode 100644 index b33d14c8273b0..0000000000000 --- a/packages/website/docs/_components_pages/main/ColorPalettePopover.mdx +++ /dev/null @@ -1,25 +0,0 @@ ---- -slug: ../ColorPalettePopover ---- - -import Basic from "../../_samples/main/ColorPalettePopover/Basic/Basic.md"; -import DefaultColor from "../../_samples/main/ColorPalettePopover/DefaultColor/DefaultColor.md"; -import MoreColors from "../../_samples/main/ColorPalettePopover/MoreColors/MoreColors.md"; - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -<%COMPONENT_METADATA%> - -## More Samples - -### Show Default Color - - -### Show More&Recent Colors -Recent colors shows the last five colors that have been selected. -More colors opens a dialog to manually choose a color from a ColorPicker. - - \ No newline at end of file diff --git a/packages/website/docs/_components_pages/main/ColorPicker.mdx b/packages/website/docs/_components_pages/main/ColorPicker.mdx deleted file mode 100644 index 075124d82e116..0000000000000 --- a/packages/website/docs/_components_pages/main/ColorPicker.mdx +++ /dev/null @@ -1,18 +0,0 @@ ---- -slug: ../ColorPicker ---- - -import Basic from "../../_samples/main/ColorPicker/Basic/Basic.md"; -import Simplified from "../../_samples/main/ColorPicker/Simplified/Simplified.md"; - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -<%COMPONENT_METADATA%> - -## More Samples - -### Simplified Picker - \ No newline at end of file diff --git a/packages/website/docs/_components_pages/main/ComboBox/ComboBox.mdx b/packages/website/docs/_components_pages/main/ComboBox/ComboBox.mdx deleted file mode 100644 index 8fd3cfa5cd4fd..0000000000000 --- a/packages/website/docs/_components_pages/main/ComboBox/ComboBox.mdx +++ /dev/null @@ -1,66 +0,0 @@ ---- -slug: ../../ComboBox ---- - -import Basic from "../../../_samples/main/ComboBox/Basic/Basic.md"; -import ClearIcon from "../../../_samples/main/ComboBox/ClearIcon/ClearIcon.md"; -import Filters from "../../../_samples/main/ComboBox/Filters/Filters.md"; -import TwoColumnsLayout from "../../../_samples/main/ComboBox/TwoColumnsLayout/TwoColumnsLayout.md"; -import Grouping from "../../../_samples/main/ComboBox/Grouping/Grouping.md"; -import SuggestionsWrapping from "../../../_samples/main/ComboBox/SuggestionsWrapping/SuggestionsWrapping.md"; -import SelectedValue from "../../../_samples/main/ComboBox/SelectedValue/SelectedValue.md"; -import SameTextDifferentValues from "../../../_samples/main/ComboBox/SameTextDifferentValues/SameTextDifferentValues.md"; -import CustomItems from "../../../_samples/main/ComboBox/CustomItems/CustomItems.md"; - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -<%COMPONENT_METADATA%> - -## More Samples - -### Clear Icon -The ComboBox can show a clear icon, visble when there is a value, typed by the user. -When pressed, the value gets cleared. - - - -### Filters -You can choose a Filter that the items will be matched against on user input (StartsWith, Contains, etc.) - - - -### Items with additional text -The ComboBox items can show additional text. - - - -### Items Grouping -Grouping of items can be implented via the ui5-cb-group-item web component. - - - -### Items Text Wrapping -The sample demonstrates how the text of the items wrap when too long. - - - -### Selected Value -Use the `value` property on items and `selected-value` on the ComboBox to decouple the display text from the underlying selection value. -This is useful for form submission, programmatic selection, and handling items with identical display text. - - - -### Items with Same Text but Different Values -When you have multiple items with identical display text (e.g., employees with the same name), use the `value` property to uniquely identify each item. -The `additional-text` property helps users distinguish between items visually. - - - -### Custom Items with Rich Content -Use `ui5-cb-item-custom` to create custom item templates with complex layouts, multiple icons, images, or any HTML content. -This allows you to build rich, visually appealing dropdown items beyond the standard text and `additional-text` format. - - \ No newline at end of file diff --git a/packages/website/docs/_components_pages/main/ComboBox/ComboBoxItem.mdx b/packages/website/docs/_components_pages/main/ComboBox/ComboBoxItem.mdx deleted file mode 100644 index e70a259dbcdd9..0000000000000 --- a/packages/website/docs/_components_pages/main/ComboBox/ComboBoxItem.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../../ComboBoxItem ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/main/ComboBox/ComboBoxItemCustom.mdx b/packages/website/docs/_components_pages/main/ComboBox/ComboBoxItemCustom.mdx deleted file mode 100644 index c5e477222e818..0000000000000 --- a/packages/website/docs/_components_pages/main/ComboBox/ComboBoxItemCustom.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../../ComboBoxItemCustom ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> diff --git a/packages/website/docs/_components_pages/main/ComboBox/ComboBoxItemGroup.mdx b/packages/website/docs/_components_pages/main/ComboBox/ComboBoxItemGroup.mdx deleted file mode 100644 index 2480e8db0b2cc..0000000000000 --- a/packages/website/docs/_components_pages/main/ComboBox/ComboBoxItemGroup.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../../ComboBoxItemGroup ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/main/DatePicker.mdx b/packages/website/docs/_components_pages/main/DatePicker.mdx deleted file mode 100644 index 1436ec6ab8fb6..0000000000000 --- a/packages/website/docs/_components_pages/main/DatePicker.mdx +++ /dev/null @@ -1,52 +0,0 @@ ---- -slug: ../DatePicker ---- - -import Basic from "../../_samples/main/DatePicker/Basic/Basic.md"; -import State from "../../_samples/main/DatePicker/State/State.md"; -import MinMax from "../../_samples/main/DatePicker/MinMax/MinMax.md"; -import CalendarTypes from "../../_samples/main/DatePicker/CalendarTypes/CalendarTypes.md"; -import CalendarWeekNumbering from "../../_samples/main/DatePicker/CalendarWeekNumbering/CalendarWeekNumbering.md"; -import DatePickerInDifferentTimezone from "../../_samples/main/DatePicker/DatePickerInDifferentTimezone/DatePickerInDifferentTimezone.md"; -import CustomFormatting from "../../_samples/main/DatePicker/CustomFormatting/CustomFormatting.md"; -import ClearIcon from "../../_samples/main/DatePicker/ClearIcon/ClearIcon.md"; - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -<%COMPONENT_METADATA%> - -## More Samples - -### States - - -### Min and Max Dates -Define min and max date boundaries to contrain user choice. - - - -### Calendar Types -You can set the preferred calendar, such as: Gregorian, Islamic, Japanese and Persian. - - -### Timezones -You can set to the configuration the preferred time zone, such as: Asia/Tokyo, Pacific/Apia, Asia/Kolkata, Europe/Sofia and etc. - - -### CalendarWeekNumbering -You can use the component, the preferred week numbering and first day of week. - - -### CustomFormatting -You can have custom formatting for the display value and the value property. -Supported format options are pattern-based on Unicode LDML Date Format notation. -For more information, see UTS #35: Unicode Locale Data Markup Language. - - -### Clear Icon - -This sample demonstrates the component with the `show-clear-icon` property enabled, which displays a clear button to reset the selected date. - \ No newline at end of file diff --git a/packages/website/docs/_components_pages/main/DateRangePicker.mdx b/packages/website/docs/_components_pages/main/DateRangePicker.mdx deleted file mode 100644 index a15bcbb2131ce..0000000000000 --- a/packages/website/docs/_components_pages/main/DateRangePicker.mdx +++ /dev/null @@ -1,45 +0,0 @@ ---- -slug: ../DateRangePicker ---- - -import Basic from "../../_samples/main/DateRangePicker/Basic/Basic.md"; -import MinMax from "../../_samples/main/DateRangePicker/MinMax/MinMax.md"; -import DateFormat from "../../_samples/main/DateRangePicker/DateFormat/DateFormat.md"; -import CustomFormatting from "../../_samples/main/DateRangePicker/CustomFormatting/CustomFormatting.md"; -import ClearIcon from "../../_samples/main/DateRangePicker/ClearIcon/ClearIcon.md"; -import ShowTwoMonths from "../../_samples/main/DateRangePicker/ShowTwoMonths/ShowTwoMonths.md"; - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -<%COMPONENT_METADATA%> - -## More Samples - -### Date Formats - - - -### Min and Max Dates -Define min and max date boundaries to contrain user choice. - - - -### CustomFormatting -You can have custom formatting for the display value and the value property. -Supported format options are pattern-based on Unicode LDML Date Format notation. -For more information, see UTS #35: Unicode Locale Data Markup Language. - - - -### Clear Icon - -This sample demonstrates the component with the `show-clear-icon` property enabled, which displays a clear button to reset the selected date. - - -### Show Two Months - -This sample demonstrates the component with the `show-two-months` property enabled, which displays two consecutive months, making it easier to select date ranges. - diff --git a/packages/website/docs/_components_pages/main/DateTimePicker.mdx b/packages/website/docs/_components_pages/main/DateTimePicker.mdx deleted file mode 100644 index 9cd3af1c2441b..0000000000000 --- a/packages/website/docs/_components_pages/main/DateTimePicker.mdx +++ /dev/null @@ -1,41 +0,0 @@ ---- -slug: ../DateTimePicker ---- - -import Basic from "../../_samples/main/DateTimePicker/Basic/Basic.md"; -import FormatPattern from "../../_samples/main/DateTimePicker/FormatPattern/FormatPattern.md"; -import MinMax from "../../_samples/main/DateTimePicker/MinMax/MinMax.md"; -import DateTimePickerInDifferentTimezone from "../../_samples/main/DateTimePicker/DateTimePickerInDifferentTimezone/DateTimePickerInDifferentTimezone.md"; -import CustomFormatting from "../../_samples/main/DateTimePicker/CustomFormatting/CustomFormatting.md"; -import ClearIcon from "../../_samples/main/DateTimePicker/ClearIcon/ClearIcon.md"; - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -<%COMPONENT_METADATA%> - -## More Samples - -### Min and Max Dates -Define min and max date-time boundaries to contrain user choice. - - - -### Timezones -You can set to the configuration the preferred time zone, such as: Asia/Tokyo, Pacific/Apia, Asia/Kolkata, Europe/Sofia and etc. - - - -### CustomFormatting -You can have custom formatting for the display value and the value property. -Supported format options are pattern-based on Unicode LDML Date Format notation. -For more information, see UTS #35: Unicode Locale Data Markup Language. - - - -### Clear Icon - -This sample demonstrates the component with the `show-clear-icon` property enabled, which displays a clear button to reset the selected date. - \ No newline at end of file diff --git a/packages/website/docs/_components_pages/main/Dialog.mdx b/packages/website/docs/_components_pages/main/Dialog.mdx deleted file mode 100644 index 539c059b0c534..0000000000000 --- a/packages/website/docs/_components_pages/main/Dialog.mdx +++ /dev/null @@ -1,34 +0,0 @@ ---- -slug: ../Dialog ---- - -import Basic from "../../_samples/main/Dialog/Basic/Basic.md"; -import DraggableAndResizable from "../../_samples/main/Dialog/DraggableAndResizable/DraggableAndResizable.md"; -import Fullscreen from "../../_samples/main/Dialog/Fullscreen/Fullscreen.md"; -import BarInDialog from "../../_samples/main/Dialog/BarInDialog/BarInDialog.md"; -import WithState from "../../_samples/main/Dialog/WithState/WithState.md"; - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -<%COMPONENT_METADATA%> - -## More Samples - -### Draggable and Resizable - - -### Fullscreen -Users can toggle between standard and full screen size. The full screen button is positioned top-right in the dialog's title bar. The fullscreen toggle can also be triggered by pressing Shift+Ctrl+F or by double-clicking the dialog header. - - -### Usage of Bar as header/footer -The Bar component can be used as header and/or footer of the Dialog - - -### States -The Dialog supports "Positive", "Critical", "Negative" and "None" states via the "state" property. - - \ No newline at end of file diff --git a/packages/website/docs/_components_pages/main/DynamicDateRange.mdx b/packages/website/docs/_components_pages/main/DynamicDateRange.mdx deleted file mode 100644 index 914d5e6752df8..0000000000000 --- a/packages/website/docs/_components_pages/main/DynamicDateRange.mdx +++ /dev/null @@ -1,14 +0,0 @@ -import Basic from "../../_samples/main/DynamicDateRange/Basic/Basic.md"; -import DynamicDateRangeValueSample from "../../_samples/main/DynamicDateRange/DynamicDateRangeValueSample/DynamicDateRangeValueSample.md"; - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -<%COMPONENT_METADATA%> - -## More Samples - -### DynamicDateRangeValueSample - \ No newline at end of file diff --git a/packages/website/docs/_components_pages/main/ExpandableText.mdx b/packages/website/docs/_components_pages/main/ExpandableText.mdx deleted file mode 100644 index ba7c6065f9104..0000000000000 --- a/packages/website/docs/_components_pages/main/ExpandableText.mdx +++ /dev/null @@ -1,19 +0,0 @@ ---- -slug: ../ExpandableText ---- - -import Basic from "../../_samples/main/ExpandableText/Basic/Basic.md"; -import OverflowModePopover from "../../_samples/main/ExpandableText/OverflowModePopover/OverflowModePopover.md"; - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -<%COMPONENT_METADATA%> - -## More Samples - -### Overflow Mode Popover - - diff --git a/packages/website/docs/_components_pages/main/FileUploader.mdx b/packages/website/docs/_components_pages/main/FileUploader.mdx deleted file mode 100644 index a1a0a1c928bbb..0000000000000 --- a/packages/website/docs/_components_pages/main/FileUploader.mdx +++ /dev/null @@ -1,42 +0,0 @@ ---- -slug: ../FileUploader ---- - -import Basic from "../../_samples/main/FileUploader/Basic/Basic.md"; -import MultipleFiles from "../../_samples/main/FileUploader/MultipleFiles/MultipleFiles.md"; -import FilesFilter from "../../_samples/main/FileUploader/FilesFilter/FilesFilter.md"; -import FileSizeLimit from "../../_samples/main/FileUploader/FileSizeLimit/FileSizeLimit.md"; -import WithoutInput from "../../_samples/main/FileUploader/WithoutInput/WithoutInput.md"; - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -<%COMPONENT_METADATA%> - -## More Samples - - -### Upload Multiple Files - -By default, only one file can be selected, -to allow multiple files to be uploaded - set the "multiple" property. - - - -### Files Filter -You can define the files, allowed for uploading via the "accept" property. - - - -### File Size Upload Limit - -You can define the maximum file size the uploader will accept. - - - -### Button Only -You can hide the input part via the "hide-input" property. - - diff --git a/packages/website/docs/_components_pages/main/Form/Form.mdx b/packages/website/docs/_components_pages/main/Form/Form.mdx deleted file mode 100644 index d166eeeb5a349..0000000000000 --- a/packages/website/docs/_components_pages/main/Form/Form.mdx +++ /dev/null @@ -1,112 +0,0 @@ ---- -slug: ../../Form ---- - -import Basic from "../../../_samples/main/Form/Basic/Basic.md"; -import Groups from "../../../_samples/main/Form/Groups/Groups.md"; -import Edit from "../../../_samples/main/Form/Edit/Edit.md"; -import Layout from "../../../_samples/main/Form/Layout/Layout.md"; -import LabelSpan from "../../../_samples/main/Form/LabelSpan/LabelSpan.md"; -import EmptySpan from "../../../_samples/main/Form/EmptySpan/EmptySpan.md"; -import LabelsOnTop from "../../../_samples/main/Form/LabelsOnTop/LabelsOnTop.md"; -import GroupColumnSpan from "../../../_samples/main/Form/GroupColumnSpan/GroupColumnSpan.md"; -import HeaderTextWrapping from "../../../_samples/main/Form/HeaderTextWrapping/HeaderTextWrapping.md"; -import ItemColumnSpan from "../../../_samples/main/Form/ItemColumnSpan/ItemColumnSpan.md"; -import FreeStyleForm from "../../../_samples/main/Form/FreeStyleForm/FreeStyleForm.md"; -import CustomHeader from "../../../_samples/main/Form/CustomHeader/CustomHeader.md"; - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -<%COMPONENT_METADATA%> - -## More Samples - -### Layout -Use the Form#**layout** property to define the number of columns to distribute the form content by breakpoint. - -- S1 M1 L2 XL3 - 1 cols in S, 1 cols in M, 2 cols in L and 3 cols in XL (default layout) -- S1 M2 L3 XL5 - 1 cols in S, 2 cols in M, 3 cols in L and 5 cols in XL -- S1 M2 L4 XL6 - 1 cols in S, 2 cols in M, 4 cols in L and 6 cols in XL -- S2 M3 L5 XL7 - 2 cols in S, 3 cols in M, 5 cols in L and 7 cols in XL - - - - - -### Groups -You can define groups via the **ui5-form-group** web component. - - - - - -### Label Span -Use the **labelSpan** property to define the width proportion of the labels and fields of a FormItem by breakpoint. - -For example: - -- S12 M4 L4 XL4 - the label takes 1/3 in M, L, XL -- S12 M6 L6 XL6 - the label takes 1/2 in M, L, XL -- S12 M12 L12 XL12 - the label takes the whole line and the texts gows on the next line (in all sizes) - - - - -### Empty Span -Use the **emptySpan** property to define the empty space at the FormItem's end. - -For example: - -- emptySpan="S1 M1 L1 XL1" + labelSpan="S4 M4 L4 XL4" will define "4 | 7 | 1" proportion between the label, the field and the empty space -- emptySpan="S3 M3 L3 XL3" + labelSpan="S4 M4 L4 XL4" will define "4 | 5 | 3" proportion between the label, the field and the empty space - - - - -### Labels On Top -Force labels always on top Form#**labelSpan=S12 M12 L12 XL12**. - - - - - -### Edit -The Form has no built-in functionality to transform texts into inputs to implement editable forms. This is delegated to the consumers as shown in the sample. -**Note:** We recommend using "Large" item spacing in "display" mode, and "Normal" for "edit" mode, to avoid "jumping" effect of switching between texts and inputs. - - - - - -### Column Span - -#### FormGroup#**columnSpan** -The FormGroup#columnSpan property defines how many columns the form group should expand to. - - - -#### FormItem#**columnSpan** -The FormItem#**columnSpan** defines to how many columns the form item should expand to. - - - - -### Header Text Wrapping - -The Form header text **is wrapping** when doesn't fit the available space. - - - -### Custom Header - -The Form provides a **header** slot that allows the usage of custom form header. - - - - -### Freestyle Form - - diff --git a/packages/website/docs/_components_pages/main/Form/FormGroup.mdx b/packages/website/docs/_components_pages/main/Form/FormGroup.mdx deleted file mode 100644 index 46dfed75a2f6a..0000000000000 --- a/packages/website/docs/_components_pages/main/Form/FormGroup.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../../FormGroup ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/main/Form/FormItem.mdx b/packages/website/docs/_components_pages/main/Form/FormItem.mdx deleted file mode 100644 index 517593307ca7b..0000000000000 --- a/packages/website/docs/_components_pages/main/Form/FormItem.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -slug: ../../FormItem ---- - -<%COMPONENT_OVERVIEW%> - -<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/main/Icon.mdx b/packages/website/docs/_components_pages/main/Icon.mdx deleted file mode 100644 index 00e108ff024fa..0000000000000 --- a/packages/website/docs/_components_pages/main/Icon.mdx +++ /dev/null @@ -1,50 +0,0 @@ ---- -slug: ../Icon ---- - -import Basic from "../../_samples/main/Icon/Basic/Basic.md"; -import TntIcons from "../../_samples/main/Icon/TntIcons/TNTIcons.md"; -import BSIcons from "../../_samples/main/Icon/BSIcons/BSIcons.md"; -import Interactive from "../../_samples/main/Icon/Interactive/Interactive.md"; -import CustomStyling from "../../_samples/main/Icon/CustomStyling/CustomStyling.md"; -import Design from "../../_samples/main/Icon/Design/Design.md"; - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -<%COMPONENT_METADATA%> - -## More Samples - - -### Design -The Icon supports multiple designs. - - - -### Custom Styling -The Icon allows style customization via pure CSS, applied on the tag. - - - -### Interactive -The Icon can be interactive - clickable and focusable. - - - -### SAP Fiori Tools Icons -The SAP Fiori Tools Icons are available in the @ui5/webcomponents-icons-tnt package. - - - -### SAP Business Suite Icons -The SAP Business Suite Icons are available in the @ui5/webcomponents-icons-business-suite package. - - - - - - - diff --git a/packages/website/docs/_components_pages/main/Input/Input.mdx b/packages/website/docs/_components_pages/main/Input/Input.mdx deleted file mode 100644 index da33630d9da69..0000000000000 --- a/packages/website/docs/_components_pages/main/Input/Input.mdx +++ /dev/null @@ -1,74 +0,0 @@ ---- -slug: ../../Input ---- - -import Basic from "../../../_samples/main/Input/Basic/Basic.md"; -import Suggestions from "../../../_samples/main/Input/Suggestions/Suggestions.md"; -import ClearIcon from "../../../_samples/main/Input/ClearIcon/ClearIcon.md"; -import SuggestionsWrapping from "../../../_samples/main/Input/SuggestionsWrapping/SuggestionsWrapping.md"; -import DynamicSuggestions from "../../../_samples/main/Input/DynamicSuggestions/DynamicSuggestions.md"; -import ValueStateMessage from "../../../_samples/main/Input/ValueStateMessage/ValueStateMessage.md"; -import Label from "../../../_samples/main/Input/Label/Label.md"; -import ValueHelpDialog from "../../../_samples/main/Input/ValueHelpDialog/ValueHelpDialog.md"; -import CustomSuggestions from "../../../_samples/main/Input/CustomSuggestions/CustomSuggestions.md"; -import CustomStyling from "../../../_samples/main/Input/CustomStyling/CustomStyling.md"; -import BuiltInFiltering from "../../../_samples/main/Input/BuiltInFiltering/BuiltInFiltering.md"; -import InteractiveIcons from "../../../_samples/main/Input/InteractiveIcons/InteractiveIcons.md"; - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -<%COMPONENT_METADATA%> - -## More Samples - -### Clear Icon -The Input can show a clear icon, visble when there is a value, typed by the user. -When pressed, the value gets cleared. - - - -### Interactive Icons -The Input can display interactive icons that users can click. Use the `ui5-input-icon` component for interactive icons with hover, focus, and active states. - - - -### Input with Suggestions -The Input can show dropdown with suggestions upon user input - see the showSuggestions property for more information. - - - -### Suggestions Wrapping -The sample demonstrates how the text of the suggestions wrap when too long. - - - -### Dynamic Suggestion Control -This sample demonstrates how applications can control when suggestions appear by dynamically toggling the showSuggestions property. -In this example, suggestions are only shown when the user has typed 3 or more characters. - - - -### Input and Label -