diff --git a/docs/4-development/04-slots.md b/docs/4-development/04-slots.md index aa16f1ece1f8..172e236531bc 100644 --- a/docs/4-development/04-slots.md +++ b/docs/4-development/04-slots.md @@ -44,14 +44,15 @@ Defining a slot with the `slot` decorator means that this slot will be managed b - The library will invalidate this UI5 Web Component whenever its children are added, removed, or rearranged (and additionally when invalidated, if `invalidateOnChildChange` is set). ```ts +import type { Slot} from "@ui5/webcomponents-base/dist/UI5Element.js" import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; @customElement("my-demo-component") class MyDemoComponent extends UI5Element { @slot() - mySlot!: Array; + mySlot!: Slot; } ``` @@ -63,12 +64,12 @@ The `type` option accepts a type constructor (e.g., `HTMLElement`, `Node`) and i ```ts import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; @customElement("my-demo-component") class MyDemoComponent extends UI5Element { @slot({ type: HTMLElement }) - mySlot!: Array; + mySlot!: Slot;; } ``` @@ -90,15 +91,18 @@ The `"default"` option accepts a boolean value and is used to define whether thi ```ts import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; @customElement("my-demo-component") class MyDemoComponent extends UI5Element { @slot({ type: HTMLElement, "default": true }) - mySlot!: Array; + mySlot!: Slot;; } ``` +**Note:** The `Slot` and `DefaultSlot` marker types were introduced in version 2.20. In previous versions, slots were typed as `Array` (e.g., `mySlot!: Array`). The new types enable better slot discoverability in TypeScript environments while the array is now part of the type itself. + + ### Individual Slots The `individualSlots` option accepts a boolean value and determines whether each child will have its own slot, allowing you to arrange or wrap the children arbitrarily. This means that you need to handle the rendering on your own. @@ -106,12 +110,12 @@ The `individualSlots` option accepts a boolean value and determines whether each ```ts import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; @customElement("my-demo-component") class MyDemoComponent extends UI5Element { @slot({ type: HTMLElement, individualSlots: true }) - mySlot!: Array; + mySlot!: Slot;; } ``` @@ -138,17 +142,17 @@ The `invalidateOnChildChange` option accepts a boolean value or an object litera ```ts import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; @customElement("my-demo-component") class MyDemoComponent extends UI5Element { @slot({ type: HTMLElement, invalidateOnChildChange: true }) - mySlot!: Array; + mySlot!: Slot;; @slot({ type: HTMLElement, invalidateOnChildChange: { properties: true, slots: false }}) - mySlot2!: Array; + mySlot2!: Slot;; @slot({ type: HTMLElement, invalidateOnChildChange: { properties: ["myProp"], slots: ["anotherSlot"] }}) - mySlot3!: Array; + mySlot3!: Slot;; } ``` \ No newline at end of file diff --git a/docs/4-development/11-deep-dive-and-best-practices.md b/docs/4-development/11-deep-dive-and-best-practices.md index 0d91b5acb5ec..7cb52467f0fa 100644 --- a/docs/4-development/11-deep-dive-and-best-practices.md +++ b/docs/4-development/11-deep-dive-and-best-practices.md @@ -436,12 +436,13 @@ class MyComponent extends UI5Element {} We can define our slots as class members via the `@slot` decorator as follows: ```ts -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import type { Slot} from "@ui5/webcomponents-base/dist/UI5Element.js" +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; @customElement("my-component") class MyComponent extends UI5Element { @slot() - items!: Array; + items!: Slot;; } ``` @@ -540,7 +541,7 @@ export default function () { All slots are named if you simply use the `@slot` decorator without any settings, while the default slots must be explicitly marked as such with the `"default"` setting: ```ts -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; @customElement("my-component") class MyComponent extends UI5Element { @@ -554,7 +555,7 @@ class MyComponent extends UI5Element { Simply use the `@slot` decorator without any settings: ```ts -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; @customElement("my-component") class MyComponent extends UI5Element { @@ -592,7 +593,7 @@ export default function MyComponentTemplate() { ``` ```ts -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; @customElement("my-component") class MyComponent extends UI5Element { @@ -614,7 +615,7 @@ The `@slot` decorator provides an option called `individualSlots`, which is of b First, enable `individualSlots` by setting it to `true`: ```ts -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; @customElement("my-component") class MyComponent extends UI5Element { @@ -637,7 +638,7 @@ export default function MyComponentTemplate() { Here is an example using the `Carousel` web component, which leverages `individualSlots` to wrap each slotted child within the content slot to achieve a specific design: ```ts -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; @customElement("ui5-carousel") class Carousel extends UI5Element { @@ -680,7 +681,7 @@ The simplest way to use this option is to set `invalidateOnChildChange` to `"tru ```ts -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; @customElement("my-component") class MyComponent extends UI5Element { @@ -692,7 +693,7 @@ class MyComponent extends UI5Element { For more specific scenarios, you can use a more detailed configuration. The following example demonstrates how to invalidate the `"my-component"` web component only when certain properties or slots of the slotted UI5Element instances change. In this case, the component will be invalidated if the "myProp" property or the "mySlot" slot of the child elements are modified. ```ts -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; @customElement("my-component") class MyComponent extends UI5Element { @@ -920,7 +921,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; @customElement({ tag: "my-component", diff --git a/packages/ai/src/Button.ts b/packages/ai/src/Button.ts index 0c0a0e4cc404..aaa897fde48b 100644 --- a/packages/ai/src/Button.ts +++ b/packages/ai/src/Button.ts @@ -1,10 +1,11 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import { i18n } from "@ui5/webcomponents-base/dist/decorators.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import query from "@ui5/webcomponents-base/dist/decorators/query.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import type SplitButton from "@ui5/webcomponents/dist/SplitButton.js"; @@ -183,7 +184,7 @@ class Button extends UI5Element { * @public */ @slot({ type: HTMLElement, "default": true }) - states!: Array; + states!: DefaultSlot; @query("[ui5-split-button]") _splitButton?: SplitButton; diff --git a/packages/ai/src/Input.ts b/packages/ai/src/Input.ts index 08379a1c36c9..0474df526c13 100644 --- a/packages/ai/src/Input.ts +++ b/packages/ai/src/Input.ts @@ -1,7 +1,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import { isEscape, @@ -26,6 +26,7 @@ import { INPUT_WRITING_ASSISTANT_BUTTON_TOOLTIP, WRITING_ASSISTANT_GENERATING_ANNOUNCEMENT, } from "./generated/i18n/i18n-defaults.js"; +import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js"; type InputVersionChangeEventDetail = { backwards: boolean, @@ -164,7 +165,7 @@ class Input extends BaseInput { type: HTMLElement, invalidateOnChildChange: true, }) - actions!: Array; + actions!: Slot; _previousCurrentStep = 0; _previousTotalSteps = 0; diff --git a/packages/ai/src/PromptInput.ts b/packages/ai/src/PromptInput.ts index 756faca199d9..3ffe16f8eaa6 100644 --- a/packages/ai/src/PromptInput.ts +++ b/packages/ai/src/PromptInput.ts @@ -2,7 +2,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; @@ -22,6 +22,7 @@ import PromptInputTemplate from "./PromptInputTemplate.js"; // Styles import PromptInputCss from "./generated/themes/PromptInput.css.js"; import type { UI5CustomEvent } from "@ui5/webcomponents-base/dist/index.js"; +import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; /** * @class @@ -202,7 +203,7 @@ class PromptInput extends UI5Element { * @public */ @slot({ type: HTMLElement, "default": true }) - suggestionItems!: Array; + suggestionItems!: DefaultSlot; /** * Defines the value state message that will be displayed as pop up under the component. @@ -220,7 +221,7 @@ class PromptInput extends UI5Element { type: HTMLElement, invalidateOnChildChange: true, }) - valueStateMessage!: Array; + valueStateMessage!: Slot; @i18n("@ui5/webcomponents-ai") static i18nBundle: I18nBundle; diff --git a/packages/ai/src/TextArea.ts b/packages/ai/src/TextArea.ts index b797bb1d6dc3..4ddf7f4bb573 100644 --- a/packages/ai/src/TextArea.ts +++ b/packages/ai/src/TextArea.ts @@ -1,6 +1,6 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; @@ -17,6 +17,7 @@ import valueStateMessageStyles from "@ui5/webcomponents/dist/generated/themes/Va // Templates import TextAreaTemplate from "./TextAreaTemplate.js"; +import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js"; type TextAreaVersionChangeEventDetail = { backwards: boolean, @@ -131,7 +132,7 @@ class TextArea extends BaseTextArea { focused = false; @slot({ type: HTMLElement }) - menu!: Array; + menu!: Slot; static i18nBundle: I18nBundle; diff --git a/packages/base/src/UI5Element.ts b/packages/base/src/UI5Element.ts index f4d08e285af9..2f103fe8a863 100644 --- a/packages/base/src/UI5Element.ts +++ b/packages/base/src/UI5Element.ts @@ -5,7 +5,7 @@ import merge from "./thirdparty/merge.js"; import { boot } from "./Boot.js"; import UI5ElementMetadata from "./UI5ElementMetadata.js"; import type { - Slot, + Slot as SlotMetadata, SlotValue, State, PropertyValue, @@ -170,6 +170,16 @@ type TargetedEventHandler = { }["asMethod"]; type Convert = { [Property in keyof T as `on${KebabToPascal}`]: IsAny> } +// Create a unique symbol as a marker +declare const SlotMarker: unique symbol; +declare const DefaultSlotMarker: unique symbol; + +export type Slot = T[] & { [SlotMarker]: true }; +export type DefaultSlot = T[] & { [DefaultSlotMarker]: true }; + +export type IsSlot = T extends { [SlotMarker]: true } ? true : T extends { [DefaultSlotMarker]: true } ? true : false; +export type IsDefaultSlot = T extends { [DefaultSlotMarker]: true } ? true : false; + /** * @class * Base class for all UI5 Web Components @@ -183,6 +193,7 @@ abstract class UI5Element extends HTMLElement { }; _jsxEvents!: Omit, keyof Convert | "onClose" | "onToggle" | "onChange" | "onSelect" | "onInput"> & Convert; _jsxProps!: Pick, GlobalHTMLAttributeNames> & ElementProps & Partial & { key?: any }; + __id?: string; _suppressInvalidation: boolean; _changedState: Array; @@ -577,7 +588,7 @@ abstract class UI5Element extends HTMLElement { * Removes all children from the slot and detaches listeners, if any * @private */ - _clearSlot(slotName: string, slotData: Slot) { + _clearSlot(slotName: string, slotData: SlotMetadata) { const propertyName = slotData.propertyName || slotName; const children = this._state[propertyName] as Array; diff --git a/packages/base/src/decorators.ts b/packages/base/src/decorators.ts index 3f09d0e53a60..abae176c7ef2 100644 --- a/packages/base/src/decorators.ts +++ b/packages/base/src/decorators.ts @@ -3,6 +3,7 @@ import event from "./decorators/event.js"; import eventStrict from "./decorators/event-strict.js"; import property from "./decorators/property.js"; import slot from "./decorators/slot.js"; +import slotStrict from "./decorators/slot-strict.js"; import bound from "./decorators/bound.js"; import i18n from "./decorators/i18n.js"; @@ -12,6 +13,7 @@ export { eventStrict, property, slot, + slotStrict, bound, i18n, }; diff --git a/packages/base/src/decorators/slot-strict.ts b/packages/base/src/decorators/slot-strict.ts new file mode 100644 index 000000000000..0c254c02ce63 --- /dev/null +++ b/packages/base/src/decorators/slot-strict.ts @@ -0,0 +1,47 @@ +import type UI5Element from "../UI5Element.js"; +import type { Slot, DefaultSlot } from "../UI5Element.js"; +import type { Slot as SlotMetadata } from "../UI5ElementMetadata.js"; + +function slot< + T extends Record | DefaultSlot>, + K extends string +>(slotData?: SlotMetadata): (target: T, prop: K) => void { + return (target: any, slotKey: string | symbol) => { + const ctor = target.constructor as typeof UI5Element; + + if (!Object.prototype.hasOwnProperty.call(ctor, "metadata")) { + ctor.metadata = {}; + } + + const metadata = ctor.metadata; + if (!metadata.slots) { + metadata.slots = {}; + } + + const slotMetadata = metadata.slots; + + if (slotData && slotData.default && slotMetadata.default) { + throw new Error("Only one slot can be the default slot."); + } + + const key = slotData && slotData.default ? "default" : (slotKey as string); + slotData = slotData || { type: HTMLElement }; + + if (!slotData.type) { + slotData.type = HTMLElement; + } + + if (!slotMetadata[key]) { + slotMetadata[key] = slotData; + } + + if (slotData.default) { + delete slotMetadata.default.default; + slotMetadata.default.propertyName = slotKey as string; + } + + ctor.metadata.managedSlots = true; + }; +} + +export default slot; diff --git a/packages/base/src/index.ts b/packages/base/src/index.ts index 0765f6461e3d..a73b95fd0f12 100644 --- a/packages/base/src/index.ts +++ b/packages/base/src/index.ts @@ -35,6 +35,7 @@ import customElement from "./decorators/customElement.js"; import event from "./decorators/event.js"; import property from "./decorators/property.js"; import slot from "./decorators/slot.js"; +import slotStrict from "./decorators/slot-strict.js"; // delegate/ import ItemNavigation from "./delegate/ItemNavigation.js"; @@ -141,6 +142,7 @@ export { event, property, slot, + slotStrict, // delegate/ ItemNavigation, diff --git a/packages/base/src/types.ts b/packages/base/src/types.ts index 03c60a361d42..a4717ea02053 100644 --- a/packages/base/src/types.ts +++ b/packages/base/src/types.ts @@ -1,9 +1,15 @@ import type { JSX } from "./jsx-runtime.d.ts"; +import type { Slot, DefaultSlot } from "./UI5Element.js"; // General utils export type LowercaseString = T extends string ? Lowercase : never; // Core Framework types +export type { + Slot, + DefaultSlot, +}; + export type PromiseResolve = (value: void | PromiseLike) => void; export type Timeout = ReturnType; export type Interval = ReturnType; diff --git a/packages/base/src/util/createInstanceChecker.ts b/packages/base/src/util/createInstanceChecker.ts index 9a0b52fe67de..b6a72f34299f 100644 --- a/packages/base/src/util/createInstanceChecker.ts +++ b/packages/base/src/util/createInstanceChecker.ts @@ -1,3 +1,4 @@ +// createInstanceChecker("isAItem") function createChecker(prop: P) { return (object: any): object is T => { return object !== undefined && prop in object && object[prop] === true; diff --git a/packages/base/src/util/createMultiInstanceChecker.ts b/packages/base/src/util/createMultiInstanceChecker.ts new file mode 100644 index 000000000000..a1a845ec8e74 --- /dev/null +++ b/packages/base/src/util/createMultiInstanceChecker.ts @@ -0,0 +1,20 @@ +// Allows filtering of multiple types at once +// const isInstanceOfAOrB = createMultiInstanceChecker(["isAItem", "isBItem"]) +// const filteredItems = items.filter(isInstanceOfAOrB) +// +// Alternatively, use "createInstanceChecker" and filter separately: +// const isInstanceOfA = createInstanceChecker("isAItem"); +// const isInstanceOfB = createInstanceChecker("isBItem") +// const filteredItems = [...items.filter(isInstanceOfA), ...items.filter(isInstanceOfB)]; +export const createMultiInstanceChecker = (props: string[] | string) => { + return (object: any): object is T => { + if (!object) { + return false; + } + + const propsArray = Array.isArray(props) ? props : [props]; + return propsArray.some(prop => prop in object && object[prop] === true); + }; +}; + +export default createMultiInstanceChecker; diff --git a/packages/base/test/test-elements/Generic.tsx b/packages/base/test/test-elements/Generic.tsx index 2bd26f5fe615..a957c05d2acf 100644 --- a/packages/base/test/test-elements/Generic.tsx +++ b/packages/base/test/test-elements/Generic.tsx @@ -1,6 +1,6 @@ -import UI5Element from "../../src/UI5Element.js"; +import UI5Element, { DefaultSlot, Slot } from "../../src/UI5Element.js"; import customElement from "../../src/decorators/customElement.js"; -import slot from "../../src/decorators/slot.js"; +import slot from "../../src/decorators/slot-strict.js"; import property from "../../src/decorators/property.js"; import jsxRenderer from "../../src/renderer/JsxRenderer.js"; @@ -28,19 +28,19 @@ class Generic extends UI5Element { defaultValueProp = "Hello"; @slot({ type: Node, "default": true }) - content!: Array + content!: DefaultSlot; @slot({ type: HTMLElement }) - other!: Array + other!: Slot @slot({ type: HTMLElement, individualSlots: true }) - individual!: Array + individual!: Slot @slot({ type: HTMLElement, propertyName: "items" }) - named!: Array + named!: Slot @slot({ type: HTMLElement }) - "row-header"!: Array + "row-header"!: Slot static get template() { return () =>
diff --git a/packages/base/test/test-elements/GenericExt.tsx b/packages/base/test/test-elements/GenericExt.tsx index 0bc3c73d1b77..e56d3fda86a2 100644 --- a/packages/base/test/test-elements/GenericExt.tsx +++ b/packages/base/test/test-elements/GenericExt.tsx @@ -1,6 +1,7 @@ import customElement from "../../src/decorators/customElement.js"; import property from "../../src/decorators/property.js"; -import slot from "../../src/decorators/slot.js"; +import slot from "../../src/decorators/slot-strict.js"; +import { Slot } from "../../src/UI5Element.js"; import Generic from "./Generic.js"; @customElement("ui5-test-generic-ext") @@ -12,7 +13,7 @@ class GenericExt extends Generic { strProp = "Ext"; @slot() - extSlot!: Array; + extSlot!: Slot; } GenericExt.define(); diff --git a/packages/base/test/test-elements/Parent.tsx b/packages/base/test/test-elements/Parent.tsx index b48fc24b6c5f..3cfdc8fd535d 100644 --- a/packages/base/test/test-elements/Parent.tsx +++ b/packages/base/test/test-elements/Parent.tsx @@ -1,6 +1,6 @@ -import UI5Element from "../../src/UI5Element.js"; +import UI5Element, { Slot } from "../../src/UI5Element.js"; import customElement from "../../src/decorators/customElement.js"; -import slot from "../../src/decorators/slot.js"; +import slot from "../../src/decorators/slot-strict.js"; import jsxRenderer from "../../src/renderer/JsxRenderer.js"; @customElement({ @@ -16,7 +16,7 @@ class Parent extends UI5Element { slots: false, }, }) - content!: Array; + content!: Slot; @slot({ type: HTMLElement, @@ -25,7 +25,7 @@ class Parent extends UI5Element { slots: false, }, }) - items!: Array; + items!: Slot; static get template() { return () =>
diff --git a/packages/compat/src/Table.ts b/packages/compat/src/Table.ts index 53143bbdb715..f2406ca98167 100644 --- a/packages/compat/src/Table.ts +++ b/packages/compat/src/Table.ts @@ -1,9 +1,9 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; -import type { ChangeInfo } from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { ChangeInfo, DefaultSlot, Slot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js"; @@ -400,7 +400,7 @@ class Table extends UI5Element { individualSlots: true, invalidateOnChildChange: true, }) - rows!: Array; + rows!: DefaultSlot; /** * Defines the configuration for the columns of the component. @@ -416,7 +416,7 @@ class Table extends UI5Element { slots: false, }, }) - columns!: Array; + columns!: Slot; @i18n("@ui5/webcomponents") static i18nBundle: I18nBundle; diff --git a/packages/compat/src/TableCell.ts b/packages/compat/src/TableCell.ts index 003b2b3c2722..b140055a8fb9 100644 --- a/packages/compat/src/TableCell.ts +++ b/packages/compat/src/TableCell.ts @@ -1,10 +1,11 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import TableCellTemplate from "./TableCellTemplate.js"; // Styles @@ -58,7 +59,7 @@ class TableCell extends UI5Element { * @public */ @slot({ type: HTMLElement, "default": true }) - content?: Array; + content!: DefaultSlot; @i18n("@ui5/webcomponents") static i18nBundle: I18nBundle; diff --git a/packages/compat/src/TableRow.ts b/packages/compat/src/TableRow.ts index 2ebb2c4384f6..78ed73f98f40 100644 --- a/packages/compat/src/TableRow.ts +++ b/packages/compat/src/TableRow.ts @@ -1,8 +1,9 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; @@ -189,7 +190,7 @@ class TableRow extends UI5Element implements ITableRow { * @public */ @slot({ type: HTMLElement, "default": true, individualSlots: true }) - cells!: Array; + cells!: DefaultSlot; @i18n("@ui5/webcomponents") static i18nBundle: I18nBundle; diff --git a/packages/fiori/src/BarcodeScannerDialog.ts b/packages/fiori/src/BarcodeScannerDialog.ts index 56bb3220e64f..ea3cbf8617bb 100644 --- a/packages/fiori/src/BarcodeScannerDialog.ts +++ b/packages/fiori/src/BarcodeScannerDialog.ts @@ -1,5 +1,5 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; import type Dialog from "@ui5/webcomponents/dist/Dialog.js"; @@ -9,6 +9,7 @@ import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import type { Result, Exception } from "@zxing/library"; import type { Interval } from "@ui5/webcomponents-base/dist/types.js"; +import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js"; // eslint-disable-next-line import/no-extraneous-dependencies import ZXing from "@ui5/webcomponents-fiori/dist/ssr-zxing.js"; @@ -123,7 +124,7 @@ class BarcodeScannerDialog extends UI5Element { * @since 2.4.0 */ @slot() - header!: Array; + header!: Slot; /** * Defines the footer HTML Element. @@ -139,7 +140,7 @@ class BarcodeScannerDialog extends UI5Element { * @since 2.4.0 */ @slot() - footer!: Array; + footer!: Slot; /** * Indicates whether the dialog is open. diff --git a/packages/fiori/src/DynamicPage.ts b/packages/fiori/src/DynamicPage.ts index aa41142c64ed..011145823eba 100644 --- a/packages/fiori/src/DynamicPage.ts +++ b/packages/fiori/src/DynamicPage.ts @@ -1,7 +1,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import query from "@ui5/webcomponents-base/dist/decorators/query.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; @@ -30,6 +30,8 @@ import { DYNAMIC_PAGE_ARIA_LABEL_SNAPPED_HEADER, } from "./generated/i18n/i18n-defaults.js"; +import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; + const SCROLL_DEBOUNCE_RATE = 5; // ms const SCROLL_THRESHOLD = 10; // px /** @@ -156,7 +158,7 @@ class DynamicPage extends UI5Element { * @public */ @slot({ "default": true, type: HTMLElement }) - content!: HTMLElement[]; + content!: DefaultSlot; /** * Defines the title HTML Element. @@ -164,7 +166,7 @@ class DynamicPage extends UI5Element { * @public */ @slot({ type: DynamicPageTitle }) - titleArea!: Array; + titleArea!: Slot; /** * Defines the header HTML Element. @@ -172,7 +174,7 @@ class DynamicPage extends UI5Element { * @public */ @slot({ type: DynamicPageHeader }) - headerArea!: Array; + headerArea!: Slot; /** * Defines the footer HTML Element. @@ -180,7 +182,7 @@ class DynamicPage extends UI5Element { * @public */ @slot({ type: HTMLElement }) - footerArea!: HTMLElement[]; + footerArea!: Slot; @i18n("@ui5/webcomponents-fiori") static i18nBundle: I18nBundle; diff --git a/packages/fiori/src/DynamicPageHeader.ts b/packages/fiori/src/DynamicPageHeader.ts index df79933f366f..0bb6b4fc1e47 100644 --- a/packages/fiori/src/DynamicPageHeader.ts +++ b/packages/fiori/src/DynamicPageHeader.ts @@ -1,10 +1,11 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; +import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; // Template import DynamicPageHeaderTemplate from "./DynamicPageHeaderTemplate.js"; @@ -63,7 +64,7 @@ class DynamicPageHeader extends UI5Element { * @public */ @slot({ "default": true, type: HTMLElement }) - content!: HTMLElement[]; + content!: DefaultSlot; /** * Defines if the header is snapped. diff --git a/packages/fiori/src/DynamicPageTitle.ts b/packages/fiori/src/DynamicPageTitle.ts index 12493d0eef92..cc1bfaf2f933 100644 --- a/packages/fiori/src/DynamicPageTitle.ts +++ b/packages/fiori/src/DynamicPageTitle.ts @@ -1,7 +1,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; @@ -14,6 +14,7 @@ import type { ToolbarMinWidthChangeEventDetail } from "@ui5/webcomponents/dist/T import ToolbarItemOverflowBehavior from "@ui5/webcomponents/dist/types/ToolbarItemOverflowBehavior.js"; import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js"; import type Title from "@ui5/webcomponents/dist/Title.js"; +import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; // Template import DynamicPageTitleTemplate from "./DynamicPageTitleTemplate.js"; @@ -135,7 +136,7 @@ class DynamicPageTitle extends UI5Element { * @public */ @slot({ type: HTMLElement }) - heading!: HTMLElement[]; + heading!: Slot; /** * Defines the heading that is shown only when the header is snapped. @@ -143,7 +144,7 @@ class DynamicPageTitle extends UI5Element { * @public */ @slot({ type: HTMLElement }) - snappedHeading!: HTMLElement[]; + snappedHeading!: Slot; /** * Defines the content of the snapped title on mobile devices. @@ -159,7 +160,7 @@ class DynamicPageTitle extends UI5Element { * @since 2.3.0 */ @slot({ type: HTMLElement }) - snappedTitleOnMobile!: Array; + snappedTitleOnMobile!: Slot<Title>; /** * Defines the bar with actions in the Dynamic page title. @@ -167,7 +168,7 @@ class DynamicPageTitle extends UI5Element { * @public */ @slot({ type: HTMLElement }) - actionsBar!: HTMLElement[]; + actionsBar!: Slot<HTMLElement>; /** * Defines the bar with navigation actions in the Dynamic page title. @@ -175,7 +176,7 @@ class DynamicPageTitle extends UI5Element { * @public */ @slot({ type: HTMLElement }) - navigationBar!: Array<Toolbar>; + navigationBar!: Slot<Toolbar>; /** * Defines the content of the Dynamic page title. @@ -183,7 +184,7 @@ class DynamicPageTitle extends UI5Element { * @public */ @slot({ "default": true, type: HTMLElement }) - content!: HTMLElement[]; + content!: DefaultSlot<HTMLElement>; /** * Defines the content of the title that is shown only when the header is not snapped. @@ -191,7 +192,7 @@ class DynamicPageTitle extends UI5Element { * @public */ @slot({ type: HTMLElement }) - subheading!: HTMLElement[]; + subheading!: Slot<HTMLElement>; /** * Defines the content of the title that is shown only when the header is snapped. @@ -199,7 +200,7 @@ class DynamicPageTitle extends UI5Element { * @public */ @slot({ type: HTMLElement }) - snappedSubheading!: HTMLElement[]; + snappedSubheading!: Slot<HTMLElement>; /** * Defines the content of the breadcrumbs inside Dynamic Page Title. @@ -207,7 +208,7 @@ class DynamicPageTitle extends UI5Element { * @public */ @slot({ type: HTMLElement }) - breadcrumbs!: HTMLElement[]; + breadcrumbs!: Slot<HTMLElement>; /** * @private diff --git a/packages/fiori/src/DynamicSideContent.ts b/packages/fiori/src/DynamicSideContent.ts index 3b641a3c0291..10b67edb8173 100644 --- a/packages/fiori/src/DynamicSideContent.ts +++ b/packages/fiori/src/DynamicSideContent.ts @@ -1,8 +1,9 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import query from "@ui5/webcomponents-base/dist/decorators/query.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; @@ -233,7 +234,7 @@ class DynamicSideContent extends UI5Element { * @public */ @slot() - sideContent!: Array<HTMLElement>; + sideContent!: Slot<HTMLElement>; @query(".ui5-dsc-main") _mainContent!: HTMLElement; diff --git a/packages/fiori/src/FilterItem.ts b/packages/fiori/src/FilterItem.ts index dcf4233e150c..e035fb9b8d4e 100644 --- a/packages/fiori/src/FilterItem.ts +++ b/packages/fiori/src/FilterItem.ts @@ -1,6 +1,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import type FilterItemOption from "./FilterItemOption.js"; @@ -49,7 +50,7 @@ class FilterItem extends UI5Element { * @public */ @slot() - values!: Array<FilterItemOption>; + values!: Slot<FilterItemOption>; } FilterItem.define(); diff --git a/packages/fiori/src/FlexibleColumnLayout.ts b/packages/fiori/src/FlexibleColumnLayout.ts index 6067ad3c2b10..365c48f9c11c 100644 --- a/packages/fiori/src/FlexibleColumnLayout.ts +++ b/packages/fiori/src/FlexibleColumnLayout.ts @@ -1,7 +1,8 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; @@ -347,21 +348,21 @@ class FlexibleColumnLayout extends UI5Element { * @public */ @slot() - startColumn!: Array<HTMLElement>; + startColumn!: Slot<HTMLElement>; /** * Defines the content in the middle column. * @public */ @slot() - midColumn!: Array<HTMLElement>; + midColumn!: Slot<HTMLElement>; /** * Defines the content in the end column. * @public */ @slot() - endColumn!: Array<HTMLElement>; + endColumn!: Slot<HTMLElement>; initialRendering: boolean; _handleResize: () => void; diff --git a/packages/fiori/src/IllustratedMessage.ts b/packages/fiori/src/IllustratedMessage.ts index 0b119df2ce0d..73652773cd9d 100644 --- a/packages/fiori/src/IllustratedMessage.ts +++ b/packages/fiori/src/IllustratedMessage.ts @@ -1,7 +1,8 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js"; import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js"; @@ -248,7 +249,7 @@ class IllustratedMessage extends UI5Element { * @since 1.7.0 */ @slot({ type: HTMLElement }) - title!: Array<HTMLElement> & string; // Note: since title collides with HTMLElement's title attribute and it's a String, we're adding the "& string" to the type Array<HTMLElement> to avoid ts complains. In the future we will rename/deprecate this slot name, so that it doesn't collide with HTMLElement's title attribute. + title!: Slot<HTMLElement> & string; /** * Defines the subtitle of the component. @@ -258,7 +259,7 @@ class IllustratedMessage extends UI5Element { * @since 1.0.0-rc.16 */ @slot({ type: HTMLElement }) - subtitle!: Array<HTMLElement>; + subtitle!: Slot<HTMLElement>; /** * Defines the component actions. @@ -267,7 +268,7 @@ class IllustratedMessage extends UI5Element { * @public */ @slot({ type: HTMLElement, "default": true }) - actions!: Array<IButton>; + actions!: DefaultSlot<IButton>; illustrationTitle?: string; illustrationSubtitle?: string; diff --git a/packages/fiori/src/MediaGallery.ts b/packages/fiori/src/MediaGallery.ts index 33fda32f95bb..1c41ef2f396e 100644 --- a/packages/fiori/src/MediaGallery.ts +++ b/packages/fiori/src/MediaGallery.ts @@ -5,12 +5,13 @@ import MediaRange from "@ui5/webcomponents-base/dist/MediaRange.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js"; import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import Button from "@ui5/webcomponents/dist/Button.js"; import type { CarouselNavigateEventDetail } from "@ui5/webcomponents/dist/Carousel.js"; import Carousel from "@ui5/webcomponents/dist/Carousel.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js"; import MediaGalleryItem from "./MediaGalleryItem.js"; @@ -215,7 +216,7 @@ class MediaGallery extends UI5Element { invalidateOnChildChange: true, "default": true, }) - items!: Array<IMediaGalleryItem>; + items!: DefaultSlot<IMediaGalleryItem>; _itemNavigation: ItemNavigation; _onResize: () => void; diff --git a/packages/fiori/src/MediaGalleryItem.ts b/packages/fiori/src/MediaGalleryItem.ts index 8e7959475864..43c927907908 100644 --- a/packages/fiori/src/MediaGalleryItem.ts +++ b/packages/fiori/src/MediaGalleryItem.ts @@ -5,9 +5,10 @@ import { isPhone } from "@ui5/webcomponents-base/dist/Device.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import type MediaGalleryItemLayout from "./types/MediaGalleryItemLayout.js"; import type { IMediaGalleryItem } from "./MediaGallery.js"; +import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; // Styles import MediaGalleryItemCss from "./generated/themes/MediaGalleryItem.css.js"; @@ -125,14 +126,14 @@ class MediaGalleryItem extends UI5Element implements IMediaGalleryItem { * @public */ @slot({ type: HTMLElement, "default": true }) - content!: Array<HTMLElement>; + content!: DefaultSlot<HTMLElement>; /** * Defines the content of the thumbnail. * @public */ @slot() - thumbnail!: Array<HTMLElement>; + thumbnail!: Slot<HTMLElement>; _monitoredThumbnail: HTMLElement | null; _monitoredContent: HTMLElement | null; diff --git a/packages/fiori/src/NavigationLayout.ts b/packages/fiori/src/NavigationLayout.ts index bc8e27c2aa6d..302e00a1793e 100644 --- a/packages/fiori/src/NavigationLayout.ts +++ b/packages/fiori/src/NavigationLayout.ts @@ -1,11 +1,12 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import { isPhone } from "@ui5/webcomponents-base/dist/Device.js"; import NavigationLayoutMode from "./types/NavigationLayoutMode.js"; import type SideNavigation from "./SideNavigation.js"; +import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; // Template import NavigationLayoutTemplate from "./NavigationLayoutTemplate.js"; @@ -92,21 +93,21 @@ class NavigationLayout extends UI5Element { * @public */ @slot() - header!: Array<HTMLElement>; + header!: Slot<HTMLElement>; /** * Defines the side content. * @public */ @slot() - sideContent!: Array<SideNavigation>; + sideContent!: Slot<SideNavigation>; /** * Defines the content. * @public */ @slot({ type: HTMLElement, "default": true }) - content!: Array<HTMLElement>; + content!: DefaultSlot<HTMLElement>; onBeforeRendering() { this.calcSideCollapsed(); diff --git a/packages/fiori/src/NavigationMenu.ts b/packages/fiori/src/NavigationMenu.ts index bb7a685bb2ca..ecaccd52e6f0 100644 --- a/packages/fiori/src/NavigationMenu.ts +++ b/packages/fiori/src/NavigationMenu.ts @@ -1,5 +1,5 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; @@ -18,6 +18,7 @@ import menuCss from "@ui5/webcomponents/dist/generated/themes/Menu.css.js"; import { NAVIGATION_MENU_POPOVER_HIDDEN_TEXT, } from "./generated/i18n/i18n-defaults.js"; +import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; /** * @class @@ -54,7 +55,7 @@ class NavigationMenu extends Menu { * @public */ @slot({ "default": true, type: HTMLElement, invalidateOnChildChange: true }) - declare items: Array<NavigationMenuItem>; + declare items: DefaultSlot<NavigationMenuItem>; @i18n("@ui5/webcomponents-fiori") static i18nBundleFiori: I18nBundle; diff --git a/packages/fiori/src/NotificationList.ts b/packages/fiori/src/NotificationList.ts index 62cc0d411ea0..4b4e35d61131 100644 --- a/packages/fiori/src/NotificationList.ts +++ b/packages/fiori/src/NotificationList.ts @@ -1,10 +1,11 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; import type { ListItemClickEventDetail, @@ -116,7 +117,7 @@ class NotificationList extends UI5Element { * @public */ @slot({ type: HTMLElement, "default": true }) - items!: Array<NotificationListItemBase>; + items!: DefaultSlot<NotificationListItemBase>; /** * Defines the text that is displayed when the component contains no items. diff --git a/packages/fiori/src/NotificationListGroupItem.ts b/packages/fiori/src/NotificationListGroupItem.ts index 50e672753407..cad99a7c58ff 100644 --- a/packages/fiori/src/NotificationListGroupItem.ts +++ b/packages/fiori/src/NotificationListGroupItem.ts @@ -3,7 +3,7 @@ import { } from "@ui5/webcomponents-base/dist/Keys.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import type NotificationListGrowingMode from "@ui5/webcomponents/dist/types/NotificationListGrowingMode.js"; @@ -28,6 +28,7 @@ import NotificationListGroupItemTemplate from "./NotificationListGroupItemTempla // Styles import NotificationListGroupItemCss from "./generated/themes/NotificationListGroupItem.css.js"; +import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; type NotificationListGroupItemToggleEventDetail = { item: NotificationListGroupItem, @@ -124,7 +125,7 @@ class NotificationListGroupItem extends NotificationListItemBase { * @public */ @slot({ type: HTMLElement, "default": true }) - items!: Array<NotificationListItem> + items!: DefaultSlot<NotificationListItem> onBeforeRendering() { super.onBeforeRendering(); diff --git a/packages/fiori/src/NotificationListItem.ts b/packages/fiori/src/NotificationListItem.ts index acd64744d1d4..a63dcf109bc6 100644 --- a/packages/fiori/src/NotificationListItem.ts +++ b/packages/fiori/src/NotificationListItem.ts @@ -5,7 +5,7 @@ import type { UI5CustomEvent } from "@ui5/webcomponents-base"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import query from "@ui5/webcomponents-base/dist/decorators/query.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js"; import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js"; @@ -18,6 +18,7 @@ import willShowContent from "@ui5/webcomponents-base/dist/util/willShowContent.j import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import NotificationListItemImportance from "./types/NotificationListItemImportance.js"; import NotificationListItemBase from "./NotificationListItemBase.js"; +import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; // Icons import iconSysEnter2 from "@ui5/webcomponents-icons/dist/sys-enter-2.js"; @@ -225,7 +226,7 @@ class NotificationListItem extends NotificationListItemBase { * @public */ @slot() - avatar!: Array<HTMLElement>; + avatar!: Slot<HTMLElement>; /** * Defines the menu, displayed in the `ui5-li-notification`. @@ -236,14 +237,14 @@ class NotificationListItem extends NotificationListItemBase { * @public */ @slot() - menu!: Array<HTMLElement>; + menu!: Slot<HTMLElement>; /** * Defines the elements, displayed in the footer of the of the component. * @public */ @slot({ type: HTMLElement, individualSlots: true }) - footnotes!: Array<HTMLElement>; + footnotes!: Slot<HTMLElement>; /** * Defines the content of the `ui5-li-notification`, @@ -253,7 +254,7 @@ class NotificationListItem extends NotificationListItemBase { * @public */ @slot({ type: Node, "default": true }) - description!: Array<Node>; + description!: DefaultSlot<Node>; @query(".ui5-nli-title-text") titleTextDOM?: HTMLElement; diff --git a/packages/fiori/src/Page.ts b/packages/fiori/src/Page.ts index 510cc9c04152..ded8dec4026d 100644 --- a/packages/fiori/src/Page.ts +++ b/packages/fiori/src/Page.ts @@ -1,11 +1,12 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js"; import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js"; import type PageBackgroundDesign from "./types/PageBackgroundDesign.js"; +import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; // Template import PageTemplate from "./PageTemplate.js"; @@ -94,21 +95,21 @@ class Page extends UI5Element { * @public */ @slot() - header!: Array<HTMLElement>; + header!: Slot<HTMLElement>; /** * Defines the content HTML Element. * @public */ @slot({ type: Node, "default": true }) - content!: Array<Node>; + content!: DefaultSlot<Node>; /** * Defines the footer HTML Element. * @public */ @slot() - footer!: Array<HTMLElement>; + footer!: Slot<HTMLElement>; constructor() { super(); diff --git a/packages/fiori/src/ProductSwitch.ts b/packages/fiori/src/ProductSwitch.ts index 4f3583fdd5a3..84d38306502e 100644 --- a/packages/fiori/src/ProductSwitch.ts +++ b/packages/fiori/src/ProductSwitch.ts @@ -1,9 +1,10 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js"; import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js"; @@ -80,8 +81,8 @@ class ProductSwitch extends UI5Element { * Defines the items of the `ui5-product-switch`. * @public */ - @slot({ type: HTMLElement, "default": true }) - items!: Array<IProductSwitchItem> + @slot({ type: HTMLElement, "default": true, invalidateOnChildChange: true }) + items!: DefaultSlot<IProductSwitchItem> _itemNavigation: ItemNavigation; _currentIndex: number; diff --git a/packages/fiori/src/ProductSwitchItem.ts b/packages/fiori/src/ProductSwitchItem.ts index 8bd5bd0867a4..0d1d79dd34bd 100644 --- a/packages/fiori/src/ProductSwitchItem.ts +++ b/packages/fiori/src/ProductSwitchItem.ts @@ -1,11 +1,12 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import { isSpace, isEnter, isSpaceShift } from "@ui5/webcomponents-base/dist/Keys.js"; import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import ProductSwitchItemTemplate from "./ProductSwitchItemTemplate.js"; import type { IProductSwitchItem } from "./ProductSwitch.js"; @@ -144,7 +145,7 @@ class ProductSwitchItem extends UI5Element implements IProductSwitchItem { * @since 2.14.0 */ @slot({ type: HTMLElement }) - image!: Array<HTMLElement>; + image!: Slot<HTMLElement>; _deactivate: () => void; diff --git a/packages/fiori/src/Search.ts b/packages/fiori/src/Search.ts index 0c071b508657..c0604a9e8764 100755 --- a/packages/fiori/src/Search.ts +++ b/packages/fiori/src/Search.ts @@ -1,5 +1,5 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import { isPhone } from "@ui5/webcomponents-base/dist/Device.js"; @@ -38,6 +38,7 @@ import type { InputEventDetail } from "@ui5/webcomponents/dist/Input.js"; import type Input from "@ui5/webcomponents/dist/Input.js"; import type { PopupBeforeCloseEventDetail } from "@ui5/webcomponents/dist/Popup.js"; import type Select from "@ui5/webcomponents/dist/Select.js"; +import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; interface ISearchSuggestionItem extends UI5Element { selected: boolean; @@ -132,7 +133,7 @@ class Search extends SearchField { "default": true, invalidateOnChildChange: true, }) - items!: Array<SearchItem | SearchItemGroup>; + items!: DefaultSlot<SearchItem | SearchItemGroup>; /** * Defines the popup footer action button. @@ -140,7 +141,7 @@ class Search extends SearchField { * @public */ @slot() - action!: Array<Button>; + action!: Slot<Button>; /** * Defines the illustrated message to be shown in the popup. @@ -148,7 +149,7 @@ class Search extends SearchField { * @public */ @slot() - illustration!: Array<IllustratedMessage>; + illustration!: Slot<IllustratedMessage>; /** * Defines the illustrated message to be shown in the popup. @@ -156,7 +157,7 @@ class Search extends SearchField { * @public */ @slot() - messageArea!: Array<SearchMessageArea>; + messageArea!: Slot<SearchMessageArea>; /** * Indicates whether the items picker is open. diff --git a/packages/fiori/src/SearchField.ts b/packages/fiori/src/SearchField.ts index 7e12153a94cb..c64fe8338cfb 100644 --- a/packages/fiori/src/SearchField.ts +++ b/packages/fiori/src/SearchField.ts @@ -1,6 +1,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; @@ -181,7 +182,7 @@ class SearchField extends UI5Element { * @public */ @slot({ type: HTMLElement, individualSlots: true, invalidateOnChildChange: true }) - scopes!: Array<ISearchScope>; + scopes!: Slot<ISearchScope>; /** * Defines the filter button slot, used to display an additional filtering button. @@ -192,7 +193,7 @@ class SearchField extends UI5Element { * @since 2.11.0 */ @slot() - filterButton!: Array<Button>; + filterButton!: Slot<Button>; /** * @private diff --git a/packages/fiori/src/SearchItem.ts b/packages/fiori/src/SearchItem.ts index 7a7335648058..65d3f86c2ba5 100644 --- a/packages/fiori/src/SearchItem.ts +++ b/packages/fiori/src/SearchItem.ts @@ -1,5 +1,5 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import ListItemBase from "@ui5/webcomponents/dist/ListItemBase.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import SearchItemTemplate from "./SearchItemTemplate.js"; @@ -25,6 +25,7 @@ import { i18n } from "@ui5/webcomponents-base/dist/decorators.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; // @ts-expect-error import encodeXML from "@ui5/webcomponents-base/dist/sap/base/security/encodeXML.js"; +import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js"; /** * @class * @@ -125,7 +126,7 @@ class SearchItem extends ListItemBase { * @since 2.12.0 */ @slot() - image!: Array<HTMLElement>; + image!: Slot<HTMLElement>; /** * Defines the actionable elements. @@ -139,7 +140,7 @@ class SearchItem extends ListItemBase { * @since 2.16.0 */ @slot() - actions!: Array<HTMLElement>; + actions!: Slot<HTMLElement>; _markupText = ""; diff --git a/packages/fiori/src/ShellBar.ts b/packages/fiori/src/ShellBar.ts index c621c301e620..a911e435e5eb 100644 --- a/packages/fiori/src/ShellBar.ts +++ b/packages/fiori/src/ShellBar.ts @@ -1,7 +1,8 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; @@ -481,7 +482,7 @@ class ShellBar extends UI5Element { * @public */ @slot() - assistant!: Array<IButton>; + assistant!: Slot<IButton>; /** * Defines the branding slot. @@ -494,7 +495,7 @@ class ShellBar extends UI5Element { * @public */ @slot() - branding!: Array<ShellBarBranding>; + branding!: Slot<ShellBarBranding>; /** * Defines the `ui5-shellbar` additional items. @@ -504,7 +505,7 @@ class ShellBar extends UI5Element { * @public */ @slot({ type: HTMLElement, "default": true, invalidateOnChildChange: true }) - items!: Array<ShellBarItem>; + items!: DefaultSlot<ShellBarItem>; /** * You can pass `ui5-avatar` to set the profile image/icon. @@ -516,7 +517,7 @@ class ShellBar extends UI5Element { * @public */ @slot() - profile!: Array<HTMLElement>; + profile!: Slot<HTMLElement>; /** * Defines the logo of the `ui5-shellbar`. @@ -525,7 +526,7 @@ class ShellBar extends UI5Element { * @public */ @slot() - logo!: Array<HTMLElement>; + logo!: Slot<HTMLElement>; /** * Defines the items displayed in menu after a click on a start button. @@ -535,7 +536,7 @@ class ShellBar extends UI5Element { * @public */ @slot() - menuItems!: Array<ListItemBase>; + menuItems!: Slot<ListItemBase>; /** * Defines the `ui5-input`, that will be used as a search field. @@ -545,7 +546,7 @@ class ShellBar extends UI5Element { type: HTMLElement, invalidateOnChildChange: true, }) - searchField!: Array<IShellBarSearchField>; + searchField!: Slot<IShellBarSearchField>; /** * Defines a `ui5-button` in the bar that will be placed in the beginning. @@ -554,7 +555,7 @@ class ShellBar extends UI5Element { * @public */ @slot() - startButton!: Array<IButton>; + startButton!: Slot<IButton>; /** * The container is positioned in the center of the `ui5-shellbar` and occupies one-third of the total length of the `ui5-shellbar`. @@ -563,7 +564,7 @@ class ShellBar extends UI5Element { * @private */ @slot() - midContent!: Array<HTMLElement>; + midContent!: Slot<HTMLElement>; /** * Define the items displayed in the content area. @@ -577,7 +578,7 @@ class ShellBar extends UI5Element { * @since 2.7.0 */ @slot({ type: HTMLElement, individualSlots: true }) - content!: Array<HTMLElement>; + content!: Slot<HTMLElement>; @i18n("@ui5/webcomponents-fiori") static i18nBundle: I18nBundle; diff --git a/packages/fiori/src/ShellBarBranding.ts b/packages/fiori/src/ShellBarBranding.ts index 8f2b739b0a65..5809f854c162 100644 --- a/packages/fiori/src/ShellBarBranding.ts +++ b/packages/fiori/src/ShellBarBranding.ts @@ -1,6 +1,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import { @@ -102,7 +103,7 @@ class ShellBarBranding extends UI5Element { * @public */ @slot({ type: HTMLElement, "default": true }) - content!: Array<HTMLElement>; + content!: DefaultSlot<HTMLElement>; /** * Defines the logo of the `ui5-shellbar`. @@ -110,7 +111,7 @@ class ShellBarBranding extends UI5Element { * @public */ @slot({ type: HTMLElement }) - logo!: Array<HTMLElement>; + logo!: Slot<HTMLElement>; get parsedRef() { return (this.href && this.href.length > 0) ? this.href : undefined; diff --git a/packages/fiori/src/SideNavigation.ts b/packages/fiori/src/SideNavigation.ts index 52b7d34989eb..ecc6ea098e70 100644 --- a/packages/fiori/src/SideNavigation.ts +++ b/packages/fiori/src/SideNavigation.ts @@ -1,4 +1,6 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; +import { createMultiInstanceChecker } from "@ui5/webcomponents-base/dist/util/createMultiInstanceChecker.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import jsxRender from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; @@ -7,7 +9,7 @@ import type NavigationMenu from "./NavigationMenu.js"; import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js"; import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js"; @@ -152,7 +154,7 @@ class SideNavigation extends UI5Element { * @public */ @slot({ type: HTMLElement, invalidateOnChildChange: true, "default": true }) - items!: Array<SideNavigationItemBase>; + items!: DefaultSlot<SideNavigationItemBase>; /** * Defines the fixed items at the bottom of the component. @@ -162,7 +164,7 @@ class SideNavigation extends UI5Element { * @public */ @slot({ type: HTMLElement, invalidateOnChildChange: true }) - fixedItems!: Array<SideNavigationItemBase>; + fixedItems!: Slot<SideNavigationItemBase>; /** * Defines the header of the `ui5-side-navigation`. @@ -173,7 +175,7 @@ class SideNavigation extends UI5Element { * @since 1.0.0-rc.11 */ @slot() - header!: Array<HTMLElement>; + header!: Slot<HTMLElement>; /** * @private @@ -218,8 +220,8 @@ class SideNavigation extends UI5Element { onBeforeRendering() { super.onBeforeRendering(); - this._getAllItems(this.items as Array<SideNavigationItem | SideNavigationGroup>) - .concat(this._getAllItems(this.fixedItems as Array<SideNavigationItem | SideNavigationGroup>)) + this._getAllItems(this.items) + .concat(this._getAllItems(this.fixedItems)) .forEach(item => { item.sideNavCollapsed = this.collapsed; item.inPopover = this.inPopover; @@ -249,7 +251,7 @@ class SideNavigation extends UI5Element { // item navigation index should be managed, because items are // dynamically recreated and tabIndexes are not updated const tree = this.getPickerTree(); - const selectedItem = tree._findSelectedItem(tree.items as Array<SideNavigationItem | SideNavigationGroup>); + const selectedItem = tree._findSelectedItem(tree.items); if (selectedItem) { selectedItem.focus(); } else { @@ -286,7 +288,7 @@ class SideNavigation extends UI5Element { return; } - const selectedItem = this._findSelectedItem(this.items as Array<SideNavigationItem | SideNavigationGroup>); + const selectedItem = this._findSelectedItem(this.items); if (selectedItem) { this.focusItem(selectedItem); @@ -421,11 +423,11 @@ class SideNavigation extends UI5Element { } getEnabledFixedItems() : Array<ITabbable> { - return this.getEnabledItems(this.fixedItems as Array<SideNavigationItem | SideNavigationGroup>); + return this.getEnabledItems(this.fixedItems); } getEnabledFlexibleItems() : Array<ITabbable> { - const items = this.getEnabledItems(this.items as Array<SideNavigationItem | SideNavigationGroup>); + const items = this.getEnabledItems(this.items); if (this._overflowItem) { items.push(this._overflowItem); @@ -434,7 +436,7 @@ class SideNavigation extends UI5Element { return items; } - getEnabledItems(items: Array<SideNavigationItem | SideNavigationGroup>) : Array<ITabbable> { + getEnabledItems(items: Array<SideNavigationItemBase>) : Array<ITabbable> { const result = new Array<ITabbable>(); this._getFocusableItems(items).forEach(item => { @@ -458,12 +460,12 @@ class SideNavigation extends UI5Element { onAfterRendering() { if (!this.getDomRef()?.matches(":focus-within")) { - let selectedItem = this._findSelectedItem(this.items as Array<SideNavigationItem | SideNavigationGroup>); + let selectedItem = this._findSelectedItem(this.items); if (selectedItem) { this._flexibleItemNavigation.setCurrentItem(selectedItem); } - selectedItem = this._findSelectedItem(this.fixedItems as Array<SideNavigationItem | SideNavigationGroup>); + selectedItem = this._findSelectedItem(this.fixedItems); if (selectedItem) { this._fixedItemNavigation.setCurrentItem(selectedItem); } @@ -561,34 +563,34 @@ class SideNavigation extends UI5Element { this._flexibleItemNavigation._init(); } - _findFocusedItem(items: Array<SideNavigationItem | SideNavigationGroup>) : SideNavigationItemBase | undefined { + _findFocusedItem(items: Array<SideNavigationItemBase>) : SideNavigationItemBase | undefined { return this._getFocusableItems(items).find(item => item.forcedTabIndex === "0"); } - _getSelectableItems(items: Array<SideNavigationItem | SideNavigationGroup>) : Array<SideNavigationSelectableItemBase> { - return items.reduce((result, item) => { + _getSelectableItems(items: Array<SideNavigationItemBase>) : Array<SideNavigationSelectableItemBase> { + return items.filter(instanceOfItemOrGroup).reduce((result, item) => { return result.concat(item.selectableItems); }, new Array<SideNavigationSelectableItemBase>()); } - _getFocusableItems(items: Array<SideNavigationItem | SideNavigationGroup>) : Array<SideNavigationItemBase> { - return items.reduce((result, item) => { + _getFocusableItems(items: Array<SideNavigationItemBase>) : Array<SideNavigationItemBase> { + return items.filter(instanceOfItemOrGroup).reduce((result, item) => { return result.concat(item.focusableItems); }, new Array<SideNavigationItemBase>()); } - _getAllItems(items: Array<SideNavigationItem | SideNavigationGroup>) : Array<SideNavigationItemBase> { - return items.reduce((result, item) => { + _getAllItems(items: Array<SideNavigationItemBase>) : Array<SideNavigationItemBase> { + return items.filter(instanceOfItemOrGroup).reduce((result, item) => { return result.concat(item.allItems); }, new Array<SideNavigationItemBase>()); } - _findSelectedItem(items: Array<SideNavigationItem | SideNavigationGroup>) : SideNavigationSelectableItemBase | undefined { + _findSelectedItem(items: Array<SideNavigationItemBase>) : SideNavigationSelectableItemBase | undefined { return this._getSelectableItems(items).find(item => item._selected); } get overflowItems() : Array<HTMLElement> { - return (this.items as Array<SideNavigationItem | SideNavigationGroup>).reduce((result, item) => { + return this.items.filter(instanceOfItemOrGroup).reduce((result, item) => { return result.concat(item.overflowItems); }, new Array<HTMLElement>()); } @@ -687,8 +689,8 @@ class SideNavigation extends UI5Element { return; } - let items = this._getSelectableItems(this.items as Array<SideNavigationItem | SideNavigationGroup>); - items = items.concat(this._getSelectableItems(this.fixedItems as Array<SideNavigationItem | SideNavigationGroup>)); + let items = this._getSelectableItems(this.items); + items = items.concat(this._getSelectableItems(this.fixedItems)); items.forEach(current => { current.selected = false; @@ -717,6 +719,8 @@ class SideNavigation extends UI5Element { } } +const instanceOfItemOrGroup = createMultiInstanceChecker<SideNavigationItem | SideNavigationGroup>(["isSideNavigationItem", "isSideNavigationGroup"]); + SideNavigation.define(); export default SideNavigation; diff --git a/packages/fiori/src/SideNavigationGroup.ts b/packages/fiori/src/SideNavigationGroup.ts index 22e380dec52e..5897e2675883 100644 --- a/packages/fiori/src/SideNavigationGroup.ts +++ b/packages/fiori/src/SideNavigationGroup.ts @@ -1,6 +1,6 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import jsxRender from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import { isSpace, @@ -15,6 +15,7 @@ import SideNavigationItemBase from "./SideNavigationItemBase.js"; import type SideNavigationSelectableItemBase from "./SideNavigationSelectableItemBase.js"; import type SideNavigationItem from "./SideNavigationItem.js"; import SideNavigationGroupTemplate from "./SideNavigationGroupTemplate.js"; +import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import { SIDE_NAVIGATION_ICON_COLLAPSE, @@ -67,7 +68,7 @@ class SideNavigationGroup extends SideNavigationItemBase { * @public */ @slot({ type: HTMLElement, invalidateOnChildChange: true, "default": true }) - items!: Array<SideNavigationItem>; + items!: DefaultSlot<SideNavigationItem>; @i18n("@ui5/webcomponents-fiori") static i18nBundle: I18nBundle; diff --git a/packages/fiori/src/SideNavigationItem.ts b/packages/fiori/src/SideNavigationItem.ts index 2f78bd5c0361..bf2699ad4583 100644 --- a/packages/fiori/src/SideNavigationItem.ts +++ b/packages/fiori/src/SideNavigationItem.ts @@ -1,7 +1,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import jsxRender from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; import { @@ -20,6 +20,7 @@ import { SIDE_NAVIGATION_OVERFLOW_ITEM_LABEL, SIDE_NAVIGATION_PARENT_ITEM_SELECTABLE_DESCRIPTION, } from "./generated/i18n/i18n-defaults.js"; +import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; // Templates import SideNavigationItemTemplate from "./SideNavigationItemTemplate.js"; @@ -78,7 +79,7 @@ class SideNavigationItem extends SideNavigationSelectableItemBase { * @public */ @slot({ type: HTMLElement, invalidateOnChildChange: true, "default": true }) - items!: Array<SideNavigationSubItem>; + items!: DefaultSlot<SideNavigationSubItem>; @i18n("@ui5/webcomponents-fiori") static i18nBundle: I18nBundle; diff --git a/packages/fiori/src/Timeline.ts b/packages/fiori/src/Timeline.ts index bc296258fed7..77aed3ff5e68 100644 --- a/packages/fiori/src/Timeline.ts +++ b/packages/fiori/src/Timeline.ts @@ -1,7 +1,8 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; @@ -164,7 +165,7 @@ class Timeline extends UI5Element { * @public */ @slot({ type: HTMLElement, individualSlots: true, "default": true }) - items!: Array<ITimelineItem>; + items!: DefaultSlot<ITimelineItem>; @query(".ui5-timeline-end-marker") timelineEndMarker!: HTMLElement; diff --git a/packages/fiori/src/TimelineGroupItem.ts b/packages/fiori/src/TimelineGroupItem.ts index 08e2aac653c1..2cc70f9d3a24 100644 --- a/packages/fiori/src/TimelineGroupItem.ts +++ b/packages/fiori/src/TimelineGroupItem.ts @@ -1,7 +1,8 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import type TimelineLayout from "./types/TimelineLayout.js"; @@ -68,7 +69,7 @@ class TimelineGroupItem extends UI5Element implements ITimelineItem { * @public */ @slot({ type: HTMLElement, individualSlots: true, "default": true }) - items!: Array<ITimelineItem>; + items!: DefaultSlot<ITimelineItem>; /** * Defines the items orientation. diff --git a/packages/fiori/src/TimelineItem.ts b/packages/fiori/src/TimelineItem.ts index ab032f0041f8..4b0a26dce81f 100644 --- a/packages/fiori/src/TimelineItem.ts +++ b/packages/fiori/src/TimelineItem.ts @@ -1,8 +1,9 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import type Link from "@ui5/webcomponents/dist/Link.js"; @@ -114,7 +115,7 @@ class TimelineItem extends UI5Element implements ITimelineItem { * @public */ @slot({ type: HTMLElement, "default": true }) - content!: Array<Node>; + content!: DefaultSlot<Node>; /** * @private diff --git a/packages/fiori/src/UploadCollection.ts b/packages/fiori/src/UploadCollection.ts index 97b091db0f4f..24b0704e8064 100644 --- a/packages/fiori/src/UploadCollection.ts +++ b/packages/fiori/src/UploadCollection.ts @@ -1,8 +1,9 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; @@ -169,7 +170,7 @@ class UploadCollection extends UI5Element { * @public */ @slot({ type: HTMLElement, "default": true }) - items!: Array<UploadCollectionItem>; + items!: DefaultSlot<UploadCollectionItem>; /** * Defines the `ui5-upload-collection` header. @@ -180,7 +181,7 @@ class UploadCollection extends UI5Element { * @public */ @slot({ type: HTMLElement }) - header!: Array<HTMLElement>; + header!: Slot<HTMLElement>; _bodyDnDHandler: DnDEventListener; diff --git a/packages/fiori/src/UploadCollectionItem.ts b/packages/fiori/src/UploadCollectionItem.ts index 276131e2f506..7d77739817e9 100644 --- a/packages/fiori/src/UploadCollectionItem.ts +++ b/packages/fiori/src/UploadCollectionItem.ts @@ -2,7 +2,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js"; @@ -39,6 +39,7 @@ import UploadCollectionItemTemplate from "./UploadCollectionItemTemplate.js"; // Styles import UploadCollectionItemCss from "./generated/themes/UploadCollectionItem.css.js"; +import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js"; /** * @class @@ -225,7 +226,7 @@ class UploadCollectionItem extends ListItem { * @public */ @slot({ type: HTMLElement }) - thumbnail!: Array<HTMLElement>; + thumbnail!: Slot<HTMLElement>; @i18n("@ui5/webcomponents-fiori") static i18nFioriBundle: I18nBundle; diff --git a/packages/fiori/src/UserMenu.ts b/packages/fiori/src/UserMenu.ts index eff4d52c6121..d5b56488dde0 100644 --- a/packages/fiori/src/UserMenu.ts +++ b/packages/fiori/src/UserMenu.ts @@ -1,6 +1,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import { - customElement, slot, eventStrict as event, property, + customElement, slotStrict as slot, eventStrict as event, property, } from "@ui5/webcomponents-base/dist/decorators.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import query from "@ui5/webcomponents-base/dist/decorators/query.js"; @@ -205,7 +206,7 @@ class UserMenu extends UI5Element { type: HTMLElement, "default": true, }) - menuItems!: Array<UserMenuItem>; + menuItems!: DefaultSlot<UserMenuItem>; /** * Defines the user accounts. @@ -221,7 +222,7 @@ class UserMenu extends UI5Element { slots: false, }, }) - accounts!: Array<UserMenuAccount>; + accounts!: Slot<UserMenuAccount>; @i18n("@ui5/webcomponents-fiori") static i18nBundle: I18nBundle; diff --git a/packages/fiori/src/UserMenuItem.ts b/packages/fiori/src/UserMenuItem.ts index aa18ecced610..f459a2a08037 100644 --- a/packages/fiori/src/UserMenuItem.ts +++ b/packages/fiori/src/UserMenuItem.ts @@ -1,10 +1,11 @@ -import { customElement, slot } from "@ui5/webcomponents-base/dist/decorators.js"; +import { customElement, slotStrict as slot } from "@ui5/webcomponents-base/dist/decorators.js"; import MenuItem, { isInstanceOfMenuItem } from "@ui5/webcomponents/dist/MenuItem.js"; import UserMenuItemTemplate from "./UserMenuItemTemplate.js"; // Styles import userMenuItemCss from "./generated/themes/UserMenuItem.css.js"; +import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; /** * @class @@ -42,7 +43,7 @@ class UserMenuItem extends MenuItem { * @public */ @slot({ "default": true, type: HTMLElement, invalidateOnChildChange: true }) - declare items: Array<UserMenuItem>; + declare items: DefaultSlot<UserMenuItem>; get _menuItems() { return this.items.filter(isInstanceOfMenuItem); diff --git a/packages/fiori/src/UserSettingsAccountView.ts b/packages/fiori/src/UserSettingsAccountView.ts index 48335de9aee0..b4166613edeb 100644 --- a/packages/fiori/src/UserSettingsAccountView.ts +++ b/packages/fiori/src/UserSettingsAccountView.ts @@ -1,7 +1,7 @@ import UserSettingsView from "./UserSettingsView.js"; import UserSettingsAccountViewTemplate from "./UserSettingsAccountViewTemplate.js"; import { - customElement, slot, eventStrict as event, property, + customElement, slotStrict as slot, eventStrict as event, property, } from "@ui5/webcomponents-base/dist/decorators.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; @@ -15,6 +15,7 @@ import { USER_SETTINGS_ACCOUNT_MANAGE_ACCOUNT_BUTTON_TXT, } from "./generated/i18n/i18n-defaults.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; +import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js"; @customElement({ tag: "ui5-user-settings-account-view", @@ -63,7 +64,7 @@ class UserSettingsAccountView extends UserSettingsView { slots: false, }, }) - account?: Array<UserMenuAccount>; + account!: Slot<UserMenuAccount>; /** * Defines if the User Menu shows the `Manage Account` option. diff --git a/packages/fiori/src/UserSettingsAppearanceView.ts b/packages/fiori/src/UserSettingsAppearanceView.ts index 278f1ae83683..7d4cc822d042 100644 --- a/packages/fiori/src/UserSettingsAppearanceView.ts +++ b/packages/fiori/src/UserSettingsAppearanceView.ts @@ -9,9 +9,10 @@ import type { ListItemClickEventDetail } from "@ui5/webcomponents/dist/List.js"; import type ListItemBase from "@ui5/webcomponents/dist/ListItemBase.js"; import { - customElement, slot, eventStrict as event, + customElement, slotStrict as slot, eventStrict as event, } from "@ui5/webcomponents-base/dist/decorators.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; +import type { DefaultSlot, Slot } from "@ui5/webcomponents-base/dist/UI5Element.js"; type UserSettingsAppearanceViewItemSelectEventDetail = { item: UserSettingsAppearanceViewItem; @@ -63,7 +64,7 @@ class UserSettingsAppearanceView extends UserSettingsView { "default": true, invalidateOnChildChange: true, }) - items!: Array<UserSettingsAppearanceViewGroup | UserSettingsAppearanceViewItem>; + items!: DefaultSlot<UserSettingsAppearanceViewGroup | UserSettingsAppearanceViewItem>; /** * Defines additional content displayed below the items list. @@ -73,7 +74,7 @@ class UserSettingsAppearanceView extends UserSettingsView { @slot({ type: HTMLElement, }) - additionalContent?: Array<HTMLElement>; + additionalContent!: Slot<HTMLElement>; _getAllItems(): Array<UserSettingsAppearanceViewItem> { const allItems: Array<UserSettingsAppearanceViewItem> = []; diff --git a/packages/fiori/src/UserSettingsAppearanceViewGroup.ts b/packages/fiori/src/UserSettingsAppearanceViewGroup.ts index e345ba89fb20..97fb5652e914 100644 --- a/packages/fiori/src/UserSettingsAppearanceViewGroup.ts +++ b/packages/fiori/src/UserSettingsAppearanceViewGroup.ts @@ -1,8 +1,9 @@ import ListItemGroup from "@ui5/webcomponents/dist/ListItemGroup.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import createInstanceChecker from "@ui5/webcomponents-base/dist/util/createInstanceChecker.js"; import type UserSettingsAppearanceViewItem from "./UserSettingsAppearanceViewItem.js"; +import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; /** * @class @@ -34,7 +35,7 @@ class UserSettingsAppearanceViewGroup extends ListItemGroup { invalidateOnChildChange: true, type: HTMLElement, }) - declare items: Array<UserSettingsAppearanceViewItem>; + declare items: DefaultSlot<UserSettingsAppearanceViewItem>; get isUserSettingsAppearanceViewGroup(): boolean { return true; diff --git a/packages/fiori/src/UserSettingsDialog.ts b/packages/fiori/src/UserSettingsDialog.ts index a28a658b004f..7564a5f05ae0 100644 --- a/packages/fiori/src/UserSettingsDialog.ts +++ b/packages/fiori/src/UserSettingsDialog.ts @@ -1,6 +1,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import { - customElement, property, slot, eventStrict as event, + customElement, property, slotStrict as slot, eventStrict as event, } from "@ui5/webcomponents-base/dist/decorators.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import type Input from "@ui5/webcomponents/dist/Input.js"; @@ -132,7 +133,7 @@ class UserSettingsDialog extends UI5Element { slots: true, }, }) - items!: Array<UserSettingsItem>; + items!: DefaultSlot<UserSettingsItem>; /** * Defines the fixed user settings items. @@ -147,7 +148,7 @@ class UserSettingsDialog extends UI5Element { slots: true, }, }) - fixedItems!: Array<UserSettingsItem>; + fixedItems!: Slot<UserSettingsItem>; @i18n("@ui5/webcomponents-fiori") static i18nBundle: I18nBundle; diff --git a/packages/fiori/src/UserSettingsItem.ts b/packages/fiori/src/UserSettingsItem.ts index 526dcbac19ff..91b022781109 100644 --- a/packages/fiori/src/UserSettingsItem.ts +++ b/packages/fiori/src/UserSettingsItem.ts @@ -1,7 +1,8 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { DefaultSlot, Slot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import { - customElement, property, slot, eventStrict as event, + customElement, property, slotStrict as slot, eventStrict as event, } from "@ui5/webcomponents-base/dist/decorators.js"; import type { TabContainerTabSelectEventDetail } from "@ui5/webcomponents/dist/TabContainer.js"; import type Tab from "@ui5/webcomponents/dist/Tab.js"; @@ -167,7 +168,7 @@ class UserSettingsItem extends UI5Element { slots: false, }, }) - pages!: Array<UserSettingsView>; + pages!: DefaultSlot<UserSettingsView>; /** * Defines the tab views of the user settings item. @@ -182,7 +183,7 @@ class UserSettingsItem extends UI5Element { slots: false, }, }) - tabs!: Array<UserSettingsView>; + tabs!: Slot<UserSettingsView>; /** * Indicates whether any of the element siblings have icon. diff --git a/packages/fiori/src/UserSettingsView.ts b/packages/fiori/src/UserSettingsView.ts index 29f44021529c..c2c78899a77b 100644 --- a/packages/fiori/src/UserSettingsView.ts +++ b/packages/fiori/src/UserSettingsView.ts @@ -1,5 +1,6 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; -import { customElement, property, slot } from "@ui5/webcomponents-base/dist/decorators.js"; +import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; +import { customElement, property, slotStrict as slot } from "@ui5/webcomponents-base/dist/decorators.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import UserSettingsViewTemplate from "./UserSettingsViewTemplate.js"; import UserSettingViewCss from "./generated/themes/UserSettingsView.css.js"; @@ -60,7 +61,7 @@ class UserSettingsView extends UI5Element { type: HTMLElement, "default": true, }) - content!: Array<HTMLElement>; + content!: DefaultSlot<HTMLElement>; } UserSettingsView.define(); diff --git a/packages/fiori/src/ViewSettingsDialog.ts b/packages/fiori/src/ViewSettingsDialog.ts index 2a998eb02e2c..2cfae5ed43fa 100644 --- a/packages/fiori/src/ViewSettingsDialog.ts +++ b/packages/fiori/src/ViewSettingsDialog.ts @@ -1,5 +1,5 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; @@ -8,7 +8,7 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; import { isPhone } from "@ui5/webcomponents-base/dist/Device.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; -import type { ChangeInfo } from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { Slot, ChangeInfo } from "@ui5/webcomponents-base/dist/UI5Element.js"; import type Dialog from "@ui5/webcomponents/dist/Dialog.js"; import type List from "@ui5/webcomponents/dist/List.js"; import type { ListItemClickEventDetail, ListSelectionChangeEventDetail } from "@ui5/webcomponents/dist/List.js"; @@ -271,7 +271,7 @@ class ViewSettingsDialog extends UI5Element { * @public */ @slot() - sortItems!: Array<SortItem>; + sortItems!: Slot<SortItem>; /** * Defines the `filterItems` list. @@ -280,7 +280,7 @@ class ViewSettingsDialog extends UI5Element { * @public */ @slot() - filterItems!: Array<FilterItem>; + filterItems!: Slot<FilterItem>; /** * Defines the list of items against which the user could group data. @@ -289,7 +289,7 @@ class ViewSettingsDialog extends UI5Element { * @public */ @slot() - groupItems!: Array<GroupItem>; + groupItems!: Slot<GroupItem>; @query("[ui5-list]") _list!: List; diff --git a/packages/fiori/src/Wizard.ts b/packages/fiori/src/Wizard.ts index 5bfd1b49416f..be4d7aa9dc73 100644 --- a/packages/fiori/src/Wizard.ts +++ b/packages/fiori/src/Wizard.ts @@ -1,6 +1,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; @@ -259,7 +260,7 @@ class Wizard extends UI5Element { "individualSlots": true, invalidateOnChildChange: true, }) - steps!: Array<WizardStep> + steps!: DefaultSlot<WizardStep>; @i18n("@ui5/webcomponents-fiori") static i18nBundle: I18nBundle; diff --git a/packages/main/src/Avatar.ts b/packages/main/src/Avatar.ts index b73cc6b86ed1..e081924be043 100644 --- a/packages/main/src/Avatar.ts +++ b/packages/main/src/Avatar.ts @@ -1,7 +1,8 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; @@ -236,7 +237,7 @@ class Avatar extends UI5Element implements ITabbable, IAvatarGroupItem { * @since 1.0.0-rc.15 */ @slot({ type: HTMLElement, "default": true }) - image!: Array<HTMLElement>; + image!: DefaultSlot<HTMLElement>; /** * Defines the optional badge that will be used for visual affordance. @@ -247,7 +248,7 @@ class Avatar extends UI5Element implements ITabbable, IAvatarGroupItem { * @since 1.7.0 */ @slot() - badge!: Array<HTMLElement>; + badge!: Slot<HTMLElement>; @i18n("@ui5/webcomponents") static i18nBundle: I18nBundle; diff --git a/packages/main/src/AvatarGroup.ts b/packages/main/src/AvatarGroup.ts index 896a51114e25..63de652011a6 100644 --- a/packages/main/src/AvatarGroup.ts +++ b/packages/main/src/AvatarGroup.ts @@ -1,4 +1,5 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { DefaultSlot, Slot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js"; import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js"; @@ -7,7 +8,7 @@ import type { UI5CustomEvent } from "@ui5/webcomponents-base"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import type { AccessibilityAttributes } from "@ui5/webcomponents-base/dist/types.js"; @@ -68,7 +69,7 @@ const offsets = { }, [AvatarSize.L]: { [AvatarGroupType.Individual]: "0.125rem", - [AvatarGroupType.Group]: " -2rem", + [AvatarGroupType.Group]: "-2rem", }, [AvatarSize.XL]: { [AvatarGroupType.Individual]: "0.25rem", @@ -173,6 +174,12 @@ class AvatarGroup extends UI5Element { "click": AvatarGroupClickEventDetail "overflow": void } + + slotDetails!: { + overflowButton: IButton; + items: IAvatarGroupItem; + } + /** * Defines the mode of the `AvatarGroup`. * @default "Group" @@ -231,7 +238,7 @@ class AvatarGroup extends UI5Element { * @public */ @slot({ type: HTMLElement, "default": true }) - items!: Array<IAvatarGroupItem>; + items!: DefaultSlot<IAvatarGroupItem>; /** * Defines the overflow button of the component. @@ -243,7 +250,7 @@ class AvatarGroup extends UI5Element { * @since 1.0.0-rc.13 */ @slot() - overflowButton!: Array<IButton>; + overflowButton!: Slot<IButton>; @i18n("@ui5/webcomponents") static i18nBundle: I18nBundle; diff --git a/packages/main/src/Bar.ts b/packages/main/src/Bar.ts index fe1dedccffe7..f44614646925 100644 --- a/packages/main/src/Bar.ts +++ b/packages/main/src/Bar.ts @@ -1,7 +1,8 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { DefaultSlot, Slot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js"; import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js"; @@ -107,22 +108,22 @@ class Bar extends UI5Element { * Defines the content at the start of the bar. * @public */ - @slot({ type: HTMLElement }) - startContent!: Array<HTMLElement>; + @slot() + startContent!: Slot<HTMLElement>; /** * Defines the content in the middle of the bar. * @public */ @slot({ type: HTMLElement, "default": true }) - middleContent!: Array<HTMLElement> + middleContent!: DefaultSlot<HTMLElement>; /** * Defines the content at the end of the bar. * @public */ - @slot({ type: HTMLElement }) - endContent!: Array<HTMLElement> + @slot() + endContent!: Slot<HTMLElement>; _handleResizeBound: () => void; diff --git a/packages/main/src/Breadcrumbs.ts b/packages/main/src/Breadcrumbs.ts index bd23b8976380..989092db4a80 100644 --- a/packages/main/src/Breadcrumbs.ts +++ b/packages/main/src/Breadcrumbs.ts @@ -1,8 +1,8 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; -import type { ChangeInfo } from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { ChangeInfo, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js"; @@ -148,7 +148,7 @@ class Breadcrumbs extends UI5Element { * @public */ @slot({ type: HTMLElement, invalidateOnChildChange: true, "default": true }) - items!: Array<BreadcrumbsItem>; + items!: DefaultSlot<BreadcrumbsItem>; _itemNavigation: ItemNavigation _onResizeHandler: ResizeObserverCallback; diff --git a/packages/main/src/BreadcrumbsItem.ts b/packages/main/src/BreadcrumbsItem.ts index 8cdc1ff2b2bc..b1175a109be1 100644 --- a/packages/main/src/BreadcrumbsItem.ts +++ b/packages/main/src/BreadcrumbsItem.ts @@ -1,7 +1,8 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import type { AccessibilityAttributes } from "@ui5/webcomponents-base/dist/types.js"; import LinkDesign from "./types/LinkDesign.js"; @@ -62,7 +63,7 @@ class BreadcrumbsItem extends UI5Element { * @public */ @slot({ type: Node, "default": true }) - text!: Array<Node>; + text!: DefaultSlot<Node>; _accessibleNameText?: string; _isCurrentPageItem?: boolean; diff --git a/packages/main/src/Button.ts b/packages/main/src/Button.ts index b2cb9752b54c..472add2425d4 100644 --- a/packages/main/src/Button.ts +++ b/packages/main/src/Button.ts @@ -1,8 +1,9 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import { @@ -381,7 +382,7 @@ class Button extends UI5Element implements IButton { * @public */ @slot({ type: Node, "default": true }) - text!: Array<Node>; + text!: DefaultSlot<Node>; /** * Adds a badge to the button. @@ -389,7 +390,7 @@ class Button extends UI5Element implements IButton { * @public */ @slot({ type: HTMLElement, invalidateOnChildChange: true }) - badge!: Array<ButtonBadge>; + badge!: Slot<ButtonBadge>; _deactivate: () => void; _onclickBound: (e: MouseEvent) => void; diff --git a/packages/main/src/Calendar.ts b/packages/main/src/Calendar.ts index 553c65c5af6b..7089649be053 100644 --- a/packages/main/src/Calendar.ts +++ b/packages/main/src/Calendar.ts @@ -1,9 +1,9 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; -import type { ChangeInfo } from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { ChangeInfo, DefaultSlot, Slot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import transformDateToSecondaryType from "@ui5/webcomponents-localization/dist/dates/transformDateToSecondaryType.js"; import convertMonthNumbersToMonthNames from "@ui5/webcomponents-localization/dist/dates/convertMonthNumbersToMonthNames.js"; @@ -321,7 +321,7 @@ class Calendar extends CalendarPart { * @since 1.23.0 */ @slot({ type: HTMLElement, invalidateOnChildChange: true }) - calendarLegend!: Array<CalendarLegend>; + calendarLegend!: Slot<CalendarLegend>; /** * Defines the selected date or dates (depending on the `selectionMode` property) @@ -330,7 +330,7 @@ class Calendar extends CalendarPart { * @public */ @slot({ type: HTMLElement, invalidateOnChildChange: true, "default": true }) - dates!: Array<ICalendarSelectedDates>; + dates!: DefaultSlot<ICalendarSelectedDates>; /** * Defines the special dates, visually emphasized in the calendar. @@ -338,7 +338,7 @@ class Calendar extends CalendarPart { * @since 1.23.0 */ @slot({ type: HTMLElement, invalidateOnChildChange: true }) - specialDates!: Array<SpecialCalendarDate>; + specialDates!: Slot<SpecialCalendarDate>; /** * Defines the disabled date ranges that cannot be selected in the calendar. @@ -348,7 +348,7 @@ class Calendar extends CalendarPart { * @since 2.16.0 */ @slot({ type: HTMLElement, invalidateOnChildChange: true }) - disabledDates!: Array<CalendarDateRange>; + disabledDates!: Slot<CalendarDateRange>; /** * Defines the selected item type of the calendar legend item (if such exists). diff --git a/packages/main/src/CalendarLegend.ts b/packages/main/src/CalendarLegend.ts index acb263386e47..cde10c6f05e6 100644 --- a/packages/main/src/CalendarLegend.ts +++ b/packages/main/src/CalendarLegend.ts @@ -1,8 +1,9 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js"; @@ -103,7 +104,7 @@ class CalendarLegend extends UI5Element { individualSlots: true, "default": true, }) - items!: Array<CalendarLegendItem>; + items!: DefaultSlot<CalendarLegendItem>; _itemNavigation!: ItemNavigation; _lastFocusedItemIndex: number | null; diff --git a/packages/main/src/Card.ts b/packages/main/src/Card.ts index ad8cfca5a703..b5b40de43ad1 100644 --- a/packages/main/src/Card.ts +++ b/packages/main/src/Card.ts @@ -1,7 +1,8 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; @@ -72,7 +73,7 @@ class Card extends UI5Element { * @public */ @slot({ type: HTMLElement, "default": true }) - content!: Array<HTMLElement>; + content!: DefaultSlot<HTMLElement>; /** * Defines the header of the component. @@ -82,7 +83,7 @@ class Card extends UI5Element { * @public */ @slot({ type: HTMLElement, invalidateOnChildChange: true }) - header!: Array<CardHeader>; + header!: Slot<CardHeader>; /** * Defines if a loading indicator would be displayed over the card. diff --git a/packages/main/src/CardHeader.ts b/packages/main/src/CardHeader.ts index fbcf3f4cd7b6..dea46d4467f5 100644 --- a/packages/main/src/CardHeader.ts +++ b/packages/main/src/CardHeader.ts @@ -1,7 +1,8 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; @@ -113,14 +114,14 @@ class CardHeader extends UI5Element { * @public */ @slot() - avatar!: Array<HTMLElement>; + avatar!: Slot<HTMLElement>; /** * Defines an action, displayed in the right most part of the header. * @public */ @slot() - action!: Array<HTMLElement>; + action!: Slot<HTMLElement>; @i18n("@ui5/webcomponents") static i18nBundle: I18nBundle; diff --git a/packages/main/src/Carousel.ts b/packages/main/src/Carousel.ts index c9a309c69621..cb04767dc8ef 100644 --- a/packages/main/src/Carousel.ts +++ b/packages/main/src/Carousel.ts @@ -1,8 +1,9 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js"; import { @@ -320,7 +321,7 @@ class Carousel extends UI5Element { * @public */ @slot({ "default": true, type: HTMLElement, individualSlots: true }) - content!: Array<HTMLElement>; + content!: DefaultSlot<HTMLElement>; @i18n("@ui5/webcomponents") static i18nBundle: I18nBundle; diff --git a/packages/main/src/ColorPalette.ts b/packages/main/src/ColorPalette.ts index 3e6bed653a41..6d72f0e72ebb 100644 --- a/packages/main/src/ColorPalette.ts +++ b/packages/main/src/ColorPalette.ts @@ -1,7 +1,8 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import query from "@ui5/webcomponents-base/dist/decorators/query.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; @@ -183,8 +184,7 @@ class ColorPalette extends UI5Element { invalidateOnChildChange: true, individualSlots: true, }) - - colors!: Array<IColorPaletteItem>; + colors!: DefaultSlot<IColorPaletteItem>; _itemNavigation: ItemNavigation; _itemNavigationRecentColors: ItemNavigation; @@ -290,7 +290,7 @@ class ColorPalette extends UI5Element { } get effectiveColorItems() { - let colorItems = this.colors; + let colorItems: IColorPaletteItem[] = this.colors; if (this.popupMode) { colorItems = this.getSlottedNodes<ColorPaletteItem>("colors"); diff --git a/packages/main/src/ColorPalettePopover.ts b/packages/main/src/ColorPalettePopover.ts index c2fd7820709f..004c96421145 100644 --- a/packages/main/src/ColorPalettePopover.ts +++ b/packages/main/src/ColorPalettePopover.ts @@ -1,7 +1,8 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; @@ -138,7 +139,7 @@ class ColorPalettePopover extends UI5Element { * @public */ @slot({ "default": true, type: HTMLElement, individualSlots: true }) - colors!: Array<IColorPaletteItem>; + colors!: DefaultSlot<IColorPaletteItem>; @i18n("@ui5/webcomponents") static i18nBundle: I18nBundle; diff --git a/packages/main/src/ComboBox.ts b/packages/main/src/ComboBox.ts index f523521cb965..a5c814721e51 100644 --- a/packages/main/src/ComboBox.ts +++ b/packages/main/src/ComboBox.ts @@ -1,8 +1,9 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js"; import { isPhone, isAndroid, isMac } from "@ui5/webcomponents-base/dist/Device.js"; @@ -423,7 +424,7 @@ class ComboBox extends UI5Element implements IFormInputElement { individualSlots: true, invalidateOnChildChange: true, }) - items!: Array<IComboBoxItem>; + items!: DefaultSlot<IComboBoxItem>; /** * Defines the value state message that will be displayed as pop up under the component. @@ -437,7 +438,7 @@ class ComboBox extends UI5Element implements IFormInputElement { * @public */ @slot() - valueStateMessage!: Array<HTMLElement>; + valueStateMessage!: Slot<HTMLElement>; /** * Defines the icon to be displayed in the input field. @@ -445,7 +446,7 @@ class ComboBox extends UI5Element implements IFormInputElement { * @since 1.0.0-rc.9 */ @slot() - icon!: Array<IIcon>; + icon!: Slot<IIcon>; _initialRendering = true; _itemFocused = false; diff --git a/packages/main/src/ComboBoxItemGroup.ts b/packages/main/src/ComboBoxItemGroup.ts index 9ba838c72a84..f00c8846fa95 100644 --- a/packages/main/src/ComboBoxItemGroup.ts +++ b/packages/main/src/ComboBoxItemGroup.ts @@ -1,10 +1,11 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; +import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; +import createInstanceChecker from "@ui5/webcomponents-base/dist/util/createInstanceChecker.js"; import type { IComboBoxItem } from "./ComboBox.js"; import ListItemGroup from "./ListItemGroup.js"; import type ComboBoxItem from "./ComboBoxItem.js"; import ComboBoxItemGroupTemplate from "./ComboBoxItemGroupTemplate.js"; -import createInstanceChecker from "@ui5/webcomponents-base/dist/util/createInstanceChecker.js"; /** * @class @@ -33,7 +34,7 @@ class ComboBoxItemGroup extends ListItemGroup implements IComboBoxItem { individualSlots: true, type: HTMLElement, }) - items!: Array<ComboBoxItem>; + items!: DefaultSlot<ComboBoxItem>; get isGroupItem(): boolean { return true; diff --git a/packages/main/src/DatePicker.ts b/packages/main/src/DatePicker.ts index e1ba9da7292d..867122db92b0 100644 --- a/packages/main/src/DatePicker.ts +++ b/packages/main/src/DatePicker.ts @@ -1,7 +1,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import query from "@ui5/webcomponents-base/dist/decorators/query.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; @@ -76,6 +76,7 @@ import datePickerCss from "./generated/themes/DatePicker.css.js"; import datePickerPopoverCss from "./generated/themes/DatePickerPopover.css.js"; import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js"; import ValueStateMessageCss from "./generated/themes/ValueStateMessage.css.js"; +import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js"; type ValueStateAnnouncement = Record<Exclude<ValueState, ValueState.None>, string>; @@ -385,8 +386,8 @@ class DatePicker extends DateComponentBase implements IFormInputElement { * @since 1.0.0-rc.7 * @public */ - @slot({ type: HTMLElement }) - valueStateMessage!: Array<HTMLElement>; + @slot() + valueStateMessage!: Slot<HTMLElement>; responsivePopover?: ResponsivePopover; diff --git a/packages/main/src/Dialog.ts b/packages/main/src/Dialog.ts index d7ba541e174d..d74c8f4f6bdd 100644 --- a/packages/main/src/Dialog.ts +++ b/packages/main/src/Dialog.ts @@ -1,5 +1,6 @@ +import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import clamp from "@ui5/webcomponents-base/dist/util/clamp.js"; import { @@ -112,6 +113,7 @@ const ICON_PER_STATE: Record<ValueStateWithIcon, string> = { }) class Dialog extends Popup { eventDetails!: Popup["eventDetails"]; + /** * Defines the header text. * @@ -207,7 +209,7 @@ class Dialog extends Popup { * @public */ @slot() - header!: Array<HTMLElement>; + header!: Slot<HTMLElement>; /** * Defines the footer HTML Element. @@ -216,7 +218,7 @@ class Dialog extends Popup { * @public */ @slot() - footer!: Array<HTMLElement>; + footer!: Slot<HTMLElement>; @i18n("@ui5/webcomponents") static i18nBundle: I18nBundle; diff --git a/packages/main/src/FileUploader.ts b/packages/main/src/FileUploader.ts index bcc13f154f4e..1c55c49063d3 100644 --- a/packages/main/src/FileUploader.ts +++ b/packages/main/src/FileUploader.ts @@ -1,8 +1,9 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import query from "@ui5/webcomponents-base/dist/decorators/query.js"; import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js"; import { @@ -271,7 +272,7 @@ class FileUploader extends UI5Element implements IFormInputElement { * @public */ @slot({ type: HTMLElement, "default": true }) - content!: Array<HTMLElement>; + content!: DefaultSlot<HTMLElement>; /** * Defines the value state message that will be displayed as pop up under the component. @@ -284,7 +285,7 @@ class FileUploader extends UI5Element implements IFormInputElement { * @public */ @slot() - valueStateMessage!: Array<HTMLElement>; + valueStateMessage!: Slot<HTMLElement>; @query(".ui5-file-uploader-form") _form!: HTMLFormElement; diff --git a/packages/main/src/Form.ts b/packages/main/src/Form.ts index 9aa11edce70a..0ba83a4f5b20 100644 --- a/packages/main/src/Form.ts +++ b/packages/main/src/Form.ts @@ -1,4 +1,5 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; @@ -343,8 +344,8 @@ class Form extends UI5Element { * **Note:** When a `header` is provided, the `headerText` property is ignored. * @public */ - @slot({ type: HTMLElement }) - header!: Array<HTMLElement>; + @slot() + header!: Slot<HTMLElement>; /** * Defines the component content - FormGroups or FormItems. @@ -359,7 +360,7 @@ class Form extends UI5Element { individualSlots: true, invalidateOnChildChange: true, }) - items!: Array<IFormItem>; + items!: DefaultSlot<IFormItem>; @i18n("@ui5/webcomponents") static i18nBundle: I18nBundle; diff --git a/packages/main/src/FormGroup.ts b/packages/main/src/FormGroup.ts index 54e7362a54d4..ad4fca57e719 100644 --- a/packages/main/src/FormGroup.ts +++ b/packages/main/src/FormGroup.ts @@ -1,9 +1,10 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js"; import type FormItem from "./FormItem.js"; @@ -99,7 +100,7 @@ class FormGroup extends UI5Element implements IFormItem { type: HTMLElement, "default": true, }) - items!: Array<FormItem>; + items!: DefaultSlot<FormItem>; /** * @private diff --git a/packages/main/src/FormItem.ts b/packages/main/src/FormItem.ts index 18cc80a27669..2615cb0b2ce1 100644 --- a/packages/main/src/FormItem.ts +++ b/packages/main/src/FormItem.ts @@ -1,8 +1,9 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; // Template import FormItemTemplate from "./FormItemTemplate.js"; @@ -66,7 +67,7 @@ class FormItem extends UI5Element implements IFormItem { * @public */ @slot() - labelContent!: Array<HTMLElement>; + labelContent!: Slot<HTMLElement>; /** * Defines the content of the component, @@ -78,7 +79,7 @@ class FormItem extends UI5Element implements IFormItem { "default": true, individualSlots: true, }) - content!: Array<HTMLElement>; + content!: DefaultSlot<HTMLElement>; /** * @private diff --git a/packages/main/src/Input.ts b/packages/main/src/Input.ts index 75839f62714d..9eac8282caa2 100644 --- a/packages/main/src/Input.ts +++ b/packages/main/src/Input.ts @@ -1,9 +1,10 @@ /* eslint-disable spaced-comment */ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { DefaultSlot, Slot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import type { UI5CustomEvent } from "@ui5/webcomponents-base"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import type { @@ -590,14 +591,14 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement * @public */ @slot({ type: HTMLElement, "default": true }) - suggestionItems!: Array<IInputSuggestionItem>; + suggestionItems!: DefaultSlot<IInputSuggestionItem>; /** * Defines the icon to be displayed in the component. * @public */ @slot() - icon!: Array<IIcon>; + icon!: Slot<IIcon>; /** * Defines the value state message that will be displayed as pop up under the component. @@ -617,7 +618,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement type: HTMLElement, invalidateOnChildChange: true, }) - valueStateMessage!: Array<HTMLElement>; + valueStateMessage!: Slot<HTMLElement>; hasSuggestionItemSelected: boolean; valueBeforeItemSelection: string; diff --git a/packages/main/src/List.ts b/packages/main/src/List.ts index 887d557cd9a2..e081e5f419c0 100644 --- a/packages/main/src/List.ts +++ b/packages/main/src/List.ts @@ -1,4 +1,5 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js"; @@ -7,7 +8,7 @@ import toLowercaseEnumValue from "@ui5/webcomponents-base/dist/util/toLowercaseE import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import type { ClassMap } from "@ui5/webcomponents-base/dist/types.js"; import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js"; @@ -522,7 +523,7 @@ class List extends UI5Element { "default": true, invalidateOnChildChange: true, }) - items!: Array<ListItemBase | ListItemGroup>; + items!: DefaultSlot<ListItemBase | ListItemGroup>; /** * Defines the component header. @@ -532,7 +533,7 @@ class List extends UI5Element { * @public */ @slot() - header!: Array<HTMLElement>; + header!: Slot<HTMLElement>; @i18n("@ui5/webcomponents") static i18nBundle: I18nBundle; diff --git a/packages/main/src/ListItem.ts b/packages/main/src/ListItem.ts index ba655edb08f0..6e78fea4e0eb 100644 --- a/packages/main/src/ListItem.ts +++ b/packages/main/src/ListItem.ts @@ -10,7 +10,7 @@ import { getTabbableElements } from "@ui5/webcomponents-base/dist/util/TabbableE import type { AccessibilityAttributes, AriaRole, AriaHasPopup } from "@ui5/webcomponents-base"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import "@ui5/webcomponents-icons/dist/decline.js"; import "@ui5/webcomponents-icons/dist/edit.js"; @@ -38,6 +38,7 @@ import listItemAdditionalTextCss from "./generated/themes/ListItemAdditionalText // Icons import "@ui5/webcomponents-icons/dist/slim-arrow-right.js"; +import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js"; interface IAccessibleListItem { accessibleName?: string; @@ -210,7 +211,7 @@ abstract class ListItem extends ListItemBase { * @public */ @slot() - deleteButton!: Array<IButton>; + deleteButton!: Slot<IButton>; deactivateByKey: (e: KeyboardEvent) => void; deactivate: () => void; diff --git a/packages/main/src/ListItemGroup.ts b/packages/main/src/ListItemGroup.ts index dcc803b6b926..81b74e0ef46e 100644 --- a/packages/main/src/ListItemGroup.ts +++ b/packages/main/src/ListItemGroup.ts @@ -1,9 +1,10 @@ -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import DragAndDropHandler from "./delegate/DragAndDropHandler.js"; import MovePlacement from "@ui5/webcomponents-base/dist/types/MovePlacement.js"; import type DropIndicator from "./DropIndicator.js"; @@ -109,7 +110,7 @@ class ListItemGroup extends UI5Element { invalidateOnChildChange: true, type: HTMLElement, }) - items!: Array<ListItemBase>; + items!: DefaultSlot<ListItemBase>; /** * Defines if the text of the component should wrap when it's too long. @@ -144,8 +145,8 @@ class ListItemGroup extends UI5Element { * **Note:** Using this slot, the default header text of group and the value of `headerText` property will be overwritten. * @public */ - @slot({ type: HTMLElement }) - header!: Array<ListItemBase>; + @slot() + header!: Slot<ListItemBase>; _dragAndDropHandler: DragAndDropHandler; diff --git a/packages/main/src/ListItemGroupHeader.ts b/packages/main/src/ListItemGroupHeader.ts index f650e826e981..c38531e25710 100644 --- a/packages/main/src/ListItemGroupHeader.ts +++ b/packages/main/src/ListItemGroupHeader.ts @@ -1,4 +1,4 @@ -import { slot, property, customElement } from "@ui5/webcomponents-base/dist/decorators.js"; +import { slotStrict as slot, property, customElement } from "@ui5/webcomponents-base/dist/decorators.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; import type { AriaRole } from "@ui5/webcomponents-base/dist/types.js"; @@ -15,6 +15,7 @@ import ListItemGroupHeaderTemplate from "./ListItemGroupHeaderTemplate.js"; import ListItemGroupHeaderCss from "./generated/themes/ListItemGroupHeader.css.js"; import ListItemAccessibleRole from "./types/ListItemAccessibleRole.js"; import type WrappingType from "./types/WrappingType.js"; +import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js"; /** * Maximum number of characters to display for small screens (Size S) @@ -98,7 +99,7 @@ class ListItemGroupHeader extends ListItemBase { expandableTextTemplate?: ExpandableTextTemplate; @slot() - subItems!: Array<HTMLElement>; + subItems!: Slot<HTMLElement>; @i18n("@ui5/webcomponents") static i18nBundle: I18nBundle; diff --git a/packages/main/src/ListItemStandard.ts b/packages/main/src/ListItemStandard.ts index 446d9586daee..5cb370644fd4 100644 --- a/packages/main/src/ListItemStandard.ts +++ b/packages/main/src/ListItemStandard.ts @@ -1,13 +1,14 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import type ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js"; import ListItem from "./ListItem.js"; import type { IAccessibleListItem } from "./ListItem.js"; import type WrappingType from "./types/WrappingType.js"; import ListItemStandardTemplate from "./ListItemStandardTemplate.js"; import type { ExpandableTextTemplateParams } from "./types/ExpandableTextTemplateParams.js"; +import type { DefaultSlot, Slot } from "@ui5/webcomponents-base/dist/UI5Element.js"; /** * Maximum number of characters to display for small screens (Size S) @@ -180,7 +181,7 @@ class ListItemStandard extends ListItem implements IAccessibleListItem { * @public */ @slot({ type: Node, "default": true }) - content!: Array<Node>; + content!: DefaultSlot<Node>; /** * **Note:** While the slot allows option for setting custom avatar, to match the @@ -192,7 +193,7 @@ class ListItemStandard extends ListItem implements IAccessibleListItem { * @public */ @slot() - image!: Array<HTMLElement>; + image!: Slot<HTMLElement>; onBeforeRendering() { super.onBeforeRendering(); diff --git a/packages/main/src/Menu.ts b/packages/main/src/Menu.ts index fdb2198e715b..1f3e1c1f6521 100644 --- a/packages/main/src/Menu.ts +++ b/packages/main/src/Menu.ts @@ -1,7 +1,8 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import { isLeft, @@ -254,7 +255,7 @@ class Menu extends UI5Element { * @public */ @slot({ "default": true, type: HTMLElement, invalidateOnChildChange: true }) - items!: Array<IMenuItem>; + items!: DefaultSlot<IMenuItem>; @i18n("@ui5/webcomponents") static i18nBundle: I18nBundle; diff --git a/packages/main/src/MenuItem.ts b/packages/main/src/MenuItem.ts index 0b9eefd064e9..c80800c7f11b 100644 --- a/packages/main/src/MenuItem.ts +++ b/packages/main/src/MenuItem.ts @@ -1,9 +1,11 @@ import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; +import createInstanceChecker from "@ui5/webcomponents-base/dist/util/createInstanceChecker.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; +import type { DefaultSlot, Slot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import type { AccessibilityAttributes, AriaHasPopup, AriaRole } from "@ui5/webcomponents-base"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import { isLeft, @@ -42,7 +44,6 @@ import type { IMenuItem } from "./Menu.js"; // Styles import menuItemCss from "./generated/themes/MenuItem.css.js"; -import createInstanceChecker from "@ui5/webcomponents-base/dist/util/createInstanceChecker.js"; type MenuBeforeOpenEventDetail = { item?: MenuItem }; type MenuBeforeCloseEventDetail = { escPressed: boolean }; @@ -291,7 +292,7 @@ class MenuItem extends ListItem implements IMenuItem { * @public */ @slot({ "default": true, type: HTMLElement, invalidateOnChildChange: true }) - items!: Array<IMenuItem>; + items!: DefaultSlot<IMenuItem>; /** * Defines the components that should be displayed at the end of the menu item. @@ -310,8 +311,8 @@ class MenuItem extends ListItem implements IMenuItem { * @public * @since 2.0.0 */ - @slot({ type: HTMLElement }) - endContent!: Array<HTMLElement>; + @slot() + endContent!: Slot<HTMLElement>; @i18n("@ui5/webcomponents") static i18nBundle: I18nBundle; diff --git a/packages/main/src/MenuItemGroup.ts b/packages/main/src/MenuItemGroup.ts index af5ef1b74429..f86009808202 100644 --- a/packages/main/src/MenuItemGroup.ts +++ b/packages/main/src/MenuItemGroup.ts @@ -1,7 +1,8 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; @@ -68,7 +69,7 @@ class MenuItemGroup extends UI5Element implements IMenuItem { * @public */ @slot({ "default": true, type: HTMLElement, invalidateOnChildChange: true }) - items!: Array<IMenuItem>; + items!: DefaultSlot<IMenuItem>; @i18n("@ui5/webcomponents") static i18nBundle: I18nBundle; diff --git a/packages/main/src/MessageStrip.ts b/packages/main/src/MessageStrip.ts index 00a7ae242963..f891922552ca 100644 --- a/packages/main/src/MessageStrip.ts +++ b/packages/main/src/MessageStrip.ts @@ -1,6 +1,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; @@ -145,7 +146,7 @@ class MessageStrip extends UI5Element { * @public */ @slot() - icon!: Array<IIcon>; + icon!: Slot<IIcon>; @i18n("@ui5/webcomponents") static i18nBundle: I18nBundle; diff --git a/packages/main/src/MultiComboBox.ts b/packages/main/src/MultiComboBox.ts index 4780dede4e5d..e4713b23a486 100644 --- a/packages/main/src/MultiComboBox.ts +++ b/packages/main/src/MultiComboBox.ts @@ -1,7 +1,8 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import type { ClassMap, Timeout } from "@ui5/webcomponents-base/dist/types.js"; import jsxRender from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; @@ -523,7 +524,7 @@ class MultiComboBox extends UI5Element implements IFormInputElement { invalidateOnChildChange: true, individualSlots: true, }) - items!: Array<IMultiComboBoxItem>; + items!: DefaultSlot<IMultiComboBoxItem>; /** * Defines the icon to be displayed in the component. @@ -531,7 +532,7 @@ class MultiComboBox extends UI5Element implements IFormInputElement { * @since 1.0.0-rc.9 */ @slot() - icon!: Array<IIcon>; + icon!: Slot<IIcon>; /** * Defines the value state message that will be displayed as pop up under the component. @@ -545,7 +546,7 @@ class MultiComboBox extends UI5Element implements IFormInputElement { * @public */ @slot() - valueStateMessage!: Array<HTMLElement>; + valueStateMessage!: Slot<HTMLElement>; selectedValues: Array<IMultiComboBoxItem>; _inputLastValue: string; diff --git a/packages/main/src/MultiComboBoxItemGroup.ts b/packages/main/src/MultiComboBoxItemGroup.ts index 6b373d4efde0..6de62070b663 100644 --- a/packages/main/src/MultiComboBoxItemGroup.ts +++ b/packages/main/src/MultiComboBoxItemGroup.ts @@ -1,11 +1,12 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; +import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; +import createInstanceChecker from "@ui5/webcomponents-base/dist/util/createInstanceChecker.js"; import type { IMultiComboBoxItem } from "./MultiComboBox.js"; import type MultiComboBoxItem from "./MultiComboBoxItem.js"; import MultiComboBoxItemGroupTemplate from "./MultiComboBoxItemGroupTemplate.js"; import type ListItemGroupHeader from "./ListItemGroupHeader.js"; import ComboBoxItemGroup from "./ComboBoxItemGroup.js"; -import createInstanceChecker from "@ui5/webcomponents-base/dist/util/createInstanceChecker.js"; /** * @class @@ -33,7 +34,7 @@ class MultiComboBoxItemGroup extends ComboBoxItemGroup implements IMultiComboBox individualSlots: true, type: HTMLElement, }) - items!: Array<MultiComboBoxItem>; + items!: DefaultSlot<MultiComboBoxItem>; /** * Used to avoid tag name checks diff --git a/packages/main/src/MultiInput.ts b/packages/main/src/MultiInput.ts index 36831168ed38..7e4691169940 100644 --- a/packages/main/src/MultiInput.ts +++ b/packages/main/src/MultiInput.ts @@ -1,6 +1,6 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; @@ -37,6 +37,7 @@ import type Icon from "./Icon.js"; import type { InputSelectionChangeEventDetail as MultiInputSelectionChangeEventDetail, } from "./Input.js"; +import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js"; interface IToken extends UI5Element, ITabbable { text?: string; @@ -149,7 +150,7 @@ class MultiInput extends Input implements IFormInputElement { * @public */ @slot({ type: HTMLElement, individualSlots: true }) - tokens!: Array<IToken>; + tokens!: Slot<IToken>; _skipOpenSuggestions: boolean; _valueHelpIconPressed: boolean; diff --git a/packages/main/src/Option.ts b/packages/main/src/Option.ts index 128e998099a4..7d7d2eaeec20 100644 --- a/packages/main/src/Option.ts +++ b/packages/main/src/Option.ts @@ -1,5 +1,5 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import type { IOption } from "./Select.js"; import ListItemBase from "./ListItemBase.js"; @@ -11,6 +11,7 @@ import OptionTemplate from "./OptionTemplate.js"; import optionBaseCss from "./generated/themes/OptionBase.css.js"; import listItemIconCss from "./generated/themes/ListItemIcon.css.js"; import listItemAdditionalTextCss from "./generated/themes/ListItemAdditionalText.css.js"; +import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; /** * @class @@ -47,7 +48,7 @@ class Option extends ListItemBase implements IOption { * @public */ @slot({ type: Node, "default": true, invalidateOnChildChange: true }) - text!: Array<Node>; + text!: DefaultSlot<Node>; /** * Defines the value of the `ui5-select` inside an HTML Form element when this component is selected. diff --git a/packages/main/src/OptionCustom.ts b/packages/main/src/OptionCustom.ts index 23b755013c62..daedc153314b 100644 --- a/packages/main/src/OptionCustom.ts +++ b/packages/main/src/OptionCustom.ts @@ -1,5 +1,5 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import type { IOption } from "./Select.js"; import ListItemBase from "./ListItemBase.js"; @@ -9,6 +9,7 @@ import OptionCustomTemplate from "./OptionCustomTemplate.js"; // Styles import optionBaseCss from "./generated/themes/OptionBase.css.js"; +import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; /** * @class @@ -62,7 +63,7 @@ class OptionCustom extends ListItemBase implements IOption { * @public */ @slot({ type: Node, "default": true, invalidateOnChildChange: true }) - content!: Array<Node>; + content!: DefaultSlot<Node>; /** * Defines the tooltip of the option. diff --git a/packages/main/src/Panel.ts b/packages/main/src/Panel.ts index 33e19b1ee0fa..ff9ebba59eb9 100644 --- a/packages/main/src/Panel.ts +++ b/packages/main/src/Panel.ts @@ -1,8 +1,9 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import slideDown from "@ui5/webcomponents-base/dist/animations/slideDown.js"; import slideUp from "@ui5/webcomponents-base/dist/animations/slideUp.js"; @@ -205,7 +206,7 @@ class Panel extends UI5Element { * @public */ @slot() - header!: Array<HTMLElement>; + header!: Slot<HTMLElement>; @i18n("@ui5/webcomponents") static i18nBundle: I18nBundle; diff --git a/packages/main/src/Popover.ts b/packages/main/src/Popover.ts index af9b66243879..37d3379583d4 100644 --- a/packages/main/src/Popover.ts +++ b/packages/main/src/Popover.ts @@ -1,8 +1,9 @@ import { instanceOfUI5Element } from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import { isIOS } from "@ui5/webcomponents-base/dist/Device.js"; import { isClickInRect, getClosedPopupParent } from "@ui5/webcomponents-base/dist/util/PopupUtils.js"; import clamp from "@ui5/webcomponents-base/dist/util/clamp.js"; @@ -208,15 +209,15 @@ class Popover extends Popup { * Defines the header HTML Element. * @public */ - @slot({ type: HTMLElement }) - header!: Array<HTMLElement>; + @slot() + header!: Slot<HTMLElement>; /** * Defines the footer HTML Element. * @public */ - @slot({ type: HTMLElement }) - footer!: Array<HTMLElement>; + @slot() + footer!: Slot<HTMLElement>; _opener?: HTMLElement | string | null | undefined; _openerRect?: DOMRect; diff --git a/packages/main/src/Popup.ts b/packages/main/src/Popup.ts index dd5b97ecdf35..3c89d5c86f9e 100644 --- a/packages/main/src/Popup.ts +++ b/packages/main/src/Popup.ts @@ -1,11 +1,12 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import type { ClassMap } from "@ui5/webcomponents-base/dist/types.js"; import jsxRender from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import { isChrome, isDesktop, @@ -233,7 +234,7 @@ abstract class Popup extends UI5Element { * @public */ @slot({ type: HTMLElement, "default": true }) - content!: Array<HTMLElement>; + content!: DefaultSlot<HTMLElement>; /** * @private diff --git a/packages/main/src/SegmentedButton.ts b/packages/main/src/SegmentedButton.ts index 903f75adbeb9..1dc3fa61cb00 100644 --- a/packages/main/src/SegmentedButton.ts +++ b/packages/main/src/SegmentedButton.ts @@ -1,8 +1,9 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import { getEffectiveAriaLabelText, getAssociatedLabelForTexts, @@ -148,7 +149,7 @@ class SegmentedButton extends UI5Element { * @public */ @slot({ type: HTMLElement, invalidateOnChildChange: true, "default": true }) - items!: Array<ISegmentedButtonItem>; + items!: DefaultSlot<ISegmentedButtonItem>; @i18n("@ui5/webcomponents") static i18nBundle: I18nBundle; diff --git a/packages/main/src/SegmentedButtonItem.ts b/packages/main/src/SegmentedButtonItem.ts index ce145c49791d..1bcb0e005c1a 100644 --- a/packages/main/src/SegmentedButtonItem.ts +++ b/packages/main/src/SegmentedButtonItem.ts @@ -1,6 +1,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import { getEnableDefaultTooltips } from "@ui5/webcomponents-base/dist/config/Tooltips.js"; @@ -12,7 +13,7 @@ import { getEffectiveAriaDescriptionText, } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js"; import willShowContent from "@ui5/webcomponents-base/dist/util/willShowContent.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import { SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION } from "./generated/i18n/i18n-defaults.js"; import type { ISegmentedButtonItem } from "./SegmentedButton.js"; @@ -175,7 +176,7 @@ class SegmentedButtonItem extends UI5Element implements IButton, ISegmentedButto * @public */ @slot({ type: Node, "default": true }) - text!: Array<Node>; + text!: DefaultSlot<Node>; @i18n("@ui5/webcomponents") static i18nBundle: I18nBundle; diff --git a/packages/main/src/Select.ts b/packages/main/src/Select.ts index 2aa8a642ae2c..25fa0295329a 100644 --- a/packages/main/src/Select.ts +++ b/packages/main/src/Select.ts @@ -1,8 +1,9 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import { isSpace, @@ -398,7 +399,7 @@ class Select extends UI5Element implements IFormInputElement { * @public */ @slot({ "default": true, type: HTMLElement, invalidateOnChildChange: true }) - options!: Array<IOption>; + options!: DefaultSlot<IOption>; /** * Defines the value state message that will be displayed as pop up under the component. @@ -413,7 +414,7 @@ class Select extends UI5Element implements IFormInputElement { * @public */ @slot() - valueStateMessage!: Array<HTMLElement>; + valueStateMessage!: Slot<HTMLElement>; /** * Defines the HTML element that will be displayed in the component input part, @@ -428,7 +429,7 @@ class Select extends UI5Element implements IFormInputElement { * @since 1.17.0 */ @slot() - label!: Array<HTMLElement>; + label!: Slot<HTMLElement>; get formValidityMessage() { return Select.i18nBundle.getText(FORM_SELECTABLE_REQUIRED); diff --git a/packages/main/src/SplitButton.ts b/packages/main/src/SplitButton.ts index 4e3fc073d3cc..1af8e659a46c 100644 --- a/packages/main/src/SplitButton.ts +++ b/packages/main/src/SplitButton.ts @@ -1,8 +1,9 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import { isEscape, isSpace, @@ -248,7 +249,7 @@ class SplitButton extends UI5Element { * @public */ @slot({ type: Node, "default": true }) - text!: Array<Node>; + text!: DefaultSlot<Node>; @i18n("@ui5/webcomponents") static i18nBundle: I18nBundle; diff --git a/packages/main/src/StepInput.ts b/packages/main/src/StepInput.ts index cab87413729e..abe3d770d10b 100644 --- a/packages/main/src/StepInput.ts +++ b/packages/main/src/StepInput.ts @@ -1,7 +1,8 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import { @@ -297,7 +298,7 @@ class StepInput extends UI5Element implements IFormInputElement { * @public */ @slot() - valueStateMessage!: Array<HTMLElement>; + valueStateMessage!: Slot<HTMLElement>; _initialValueState?: `${ValueState}`; diff --git a/packages/main/src/SuggestionItemCustom.ts b/packages/main/src/SuggestionItemCustom.ts index ea3228fae127..4069cc611eb6 100644 --- a/packages/main/src/SuggestionItemCustom.ts +++ b/packages/main/src/SuggestionItemCustom.ts @@ -1,6 +1,6 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import type { IInputSuggestionItemSelectable } from "./Input.js"; import ListItemBase from "./ListItemBase.js"; @@ -9,6 +9,7 @@ import SuggestionItemCustomTemplate from "./SuggestionItemCustomTemplate.js"; // styles import styles from "./generated/themes/SuggestionItemCustom.css.js"; +import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; /** * @class @@ -49,7 +50,7 @@ class SuggestionItemCustom extends ListItemBase implements IInputSuggestionItemS * @public */ @slot({ type: Node, "default": true, invalidateOnChildChange: true }) - content!: Array<Node>; + content!: DefaultSlot<Node>; get _effectiveTabIndex() { return -1; diff --git a/packages/main/src/SuggestionItemGroup.ts b/packages/main/src/SuggestionItemGroup.ts index 92aee7df9bd2..3c03ff18fd73 100644 --- a/packages/main/src/SuggestionItemGroup.ts +++ b/packages/main/src/SuggestionItemGroup.ts @@ -1,8 +1,9 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import type SuggestionListItem from "./SuggestionListItem.js"; import ListItemGroup from "./ListItemGroup.js"; import ListBoxItemGroupTemplate from "./ListBoxItemGroupTemplate.js"; +import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; /** * @class @@ -27,7 +28,7 @@ class SuggestionItemGroup extends ListItemGroup { invalidateOnChildChange: true, type: HTMLElement, }) - items!: Array<SuggestionListItem>; + items!: DefaultSlot<SuggestionListItem>; } SuggestionItemGroup.define(); diff --git a/packages/main/src/SuggestionListItem.ts b/packages/main/src/SuggestionListItem.ts index d7980ba015a2..c8db0e49e072 100644 --- a/packages/main/src/SuggestionListItem.ts +++ b/packages/main/src/SuggestionListItem.ts @@ -1,8 +1,9 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import ListItemStandard from "./ListItemStandard.js"; import SuggestionListItemTemplate from "./SuggestionListItemTemplate.js"; +import type { DefaultSlot, Slot } from "@ui5/webcomponents-base/dist/UI5Element.js"; /** * @class @@ -26,15 +27,15 @@ class SuggestionListItem extends ListItemStandard { * @since 1.0.0-rc.8 * @public */ - @slot({ type: HTMLElement }) - richDescription!: Array<HTMLElement> + @slot() + richDescription!: Slot<HTMLElement>; /** * Defines the title text of the suggestion item. * @public */ @slot({ type: Node, "default": true }) - titleText!: Array<Node>; + titleText!: DefaultSlot<Node>; onBeforeRendering() { super.onBeforeRendering(); diff --git a/packages/main/src/Tab.ts b/packages/main/src/Tab.ts index ad6e6f379ec3..2ca1a6e2fe29 100644 --- a/packages/main/src/Tab.ts +++ b/packages/main/src/Tab.ts @@ -1,8 +1,9 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js"; import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js"; @@ -162,7 +163,7 @@ class Tab extends UI5Element implements ITabbable, ITab { slots: false, }, }) - content!: Array<Node>; + content!: DefaultSlot<Node>; /** * Defines hierarchies with nested sub tabs. @@ -178,7 +179,7 @@ class Tab extends UI5Element implements ITabbable, ITab { slots: false, }, }) - items!: Array<ITab> + items!: Slot<ITab>; _isInline?: boolean; _forcedMixedMode?: boolean; diff --git a/packages/main/src/TabContainer.ts b/packages/main/src/TabContainer.ts index d3a6f117049a..58805fae48ee 100644 --- a/packages/main/src/TabContainer.ts +++ b/packages/main/src/TabContainer.ts @@ -1,9 +1,9 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; -import type { AccessibilityAttributes } from "@ui5/webcomponents-base/dist/types.js"; +import type { Slot, DefaultSlot, AccessibilityAttributes } from "@ui5/webcomponents-base"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js"; import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js"; @@ -48,7 +48,7 @@ import type List from "./List.js"; import type DropIndicator from "./DropIndicator.js"; import type Tab from "./Tab.js"; import type { TabInStrip, TabInOverflow } from "./Tab.js"; -import type { TabSeparatorInOverflow, TabSeparatorInStrip } from "./TabSeparator.js"; +import type { TabSeparatorInStrip } from "./TabSeparator.js"; import type { ListItemClickEventDetail, ListMoveEventDetail } from "./List.js"; import type ResponsivePopover from "./ResponsivePopover.js"; import TabContainerTabsPlacement from "./types/TabContainerTabsPlacement.js"; @@ -329,7 +329,7 @@ class TabContainer extends UI5Element { slots: true, }, }) - items!: Array<ITab>; + items!: DefaultSlot<ITab>; /** * Defines the button which will open the overflow menu. If nothing is provided to this slot, @@ -338,7 +338,7 @@ class TabContainer extends UI5Element { * @since 1.0.0-rc.9 */ @slot() - overflowButton!: Array<IButton>; + overflowButton!: Slot<IButton>; /** * Defines the button which will open the start overflow menu if available. If nothing is provided to this slot, @@ -347,7 +347,7 @@ class TabContainer extends UI5Element { * @since 1.1.0 */ @slot() - startOverflowButton!: Array<IButton>; + startOverflowButton!: Slot<IButton>; _itemNavigation: ItemNavigation; _itemsFlat: Array<ITab> = []; @@ -632,11 +632,14 @@ class TabContainer extends UI5Element { if (e.detail.originalEvent instanceof KeyboardEvent) { const realTabReference = (source.element as TabInOverflow).realTabReference; const siblings = this._findSiblings(realTabReference); - let items = siblings; + + let items: Array<ITab> = siblings; if (this.items.includes(realTabReference)) { items = siblings.filter(sibling => { - return ((e.target as List).items as Array<TabInOverflow>).some(el => el.realTabReference === sibling); + return (e.target as List).items + .filter(isInstanceOfTab) + .some(el => el.realTabReference === sibling); }); } @@ -682,11 +685,13 @@ class TabContainer extends UI5Element { if (e.detail.originalEvent instanceof KeyboardEvent) { const realTabReference = (source.element as TabInOverflow).realTabReference; const siblings = this._findSiblings(realTabReference); - let items = siblings; + let items: Array<ITab> = siblings; if (this.items.includes(realTabReference)) { items = siblings.filter(sibling => { - return ((e.target as List).items as Array<TabInOverflow>).some(el => el.realTabReference === sibling); + return ((e.target as List).items) + .filter(isInstanceOfTab) + .some(el => el.realTabReference === sibling); }); } @@ -796,7 +801,10 @@ class TabContainer extends UI5Element { return undefined; } - return ((this.responsivePopover!.content[0] as List).items as Array<TabInOverflow | TabSeparatorInOverflow>).find(item => item.realTabReference === realTab); + const listItems = (this.responsivePopover!.content[0] as List).items; + return listItems + .filter(isInstanceOfTab) + .find(item => item.realTabReference === realTab); } _onTabStripKeyDown(e: KeyboardEvent) { @@ -1550,6 +1558,13 @@ const walk = (items: Array<ITab>, callback: (arg0: ITab, arg1: number) => void) TabContainer.define(); export default TabContainer; + +// TBD: currently, the createInstanceChecker could not be used +// as it expects the checked property to be a boolean and true - (object[prop] === true); +const isInstanceOfTab = (object: any): object is TabInOverflow => { + return object !== undefined && "realTabReference" in object; +}; + export type { TabContainerTabSelectEventDetail, TabContainerMoveEventDetail, diff --git a/packages/main/src/Table.ts b/packages/main/src/Table.ts index 2aa39c4c7c2e..501bddd81677 100644 --- a/packages/main/src/Table.ts +++ b/packages/main/src/Table.ts @@ -1,6 +1,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import { - customElement, slot, property, eventStrict, i18n, + customElement, slotStrict as slot, property, eventStrict, i18n, } from "@ui5/webcomponents-base/dist/decorators.js"; import query from "@ui5/webcomponents-base/dist/decorators/query.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; @@ -277,7 +278,7 @@ class Table extends UI5Element { slots: false, }, }) - rows!: Array<TableRow>; + rows!: DefaultSlot<TableRow>; /** * Defines the header row of the component. @@ -287,7 +288,7 @@ class Table extends UI5Element { * @public */ @slot({ type: HTMLElement, invalidateOnChildChange: { properties: false, slots: true } }) - headerRow!: Array<TableHeaderRow>; + headerRow!: Slot<TableHeaderRow>; /** * Defines the custom visualization if there is no data available. @@ -295,7 +296,7 @@ class Table extends UI5Element { * @public */ @slot() - noData!: Array<HTMLElement>; + noData!: Slot<HTMLElement>; /** * Defines the features of the component. @@ -303,7 +304,7 @@ class Table extends UI5Element { * @public */ @slot({ type: HTMLElement, individualSlots: true }) - features!: Array<ITableFeature>; + features!: Slot<ITableFeature>; /** * Defines the accessible ARIA name of the component. diff --git a/packages/main/src/TableCellBase.ts b/packages/main/src/TableCellBase.ts index 0976884644d4..97b179dbcebc 100644 --- a/packages/main/src/TableCellBase.ts +++ b/packages/main/src/TableCellBase.ts @@ -1,6 +1,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import { - customElement, slot, property, i18n, + customElement, slotStrict as slot, property, i18n, } from "@ui5/webcomponents-base/dist/decorators.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import TableCellBaseStyles from "./generated/themes/TableCellBase.css.js"; @@ -27,7 +28,7 @@ abstract class TableCellBase extends UI5Element { * @public */ @slot({ type: Node, "default": true }) - content!: Array<Node>; + content!: DefaultSlot<Node>; /** * Determines the horizontal alignment of table cells. diff --git a/packages/main/src/TableHeaderCell.ts b/packages/main/src/TableHeaderCell.ts index 359b3fa93afb..b6065cd016d5 100644 --- a/packages/main/src/TableHeaderCell.ts +++ b/packages/main/src/TableHeaderCell.ts @@ -1,4 +1,4 @@ -import { customElement, property, slot } from "@ui5/webcomponents-base/dist/decorators.js"; +import { customElement, property, slotStrict as slot } from "@ui5/webcomponents-base/dist/decorators.js"; import { toggleAttribute } from "./TableUtils.js"; import TableCellBase from "./TableCellBase.js"; import TableHeaderCellTemplate from "./TableHeaderCellTemplate.js"; @@ -6,6 +6,7 @@ import TableHeaderCellStyles from "./generated/themes/TableHeaderCell.css.js"; import SortOrder from "@ui5/webcomponents-base/dist/types/SortOrder.js"; import query from "@ui5/webcomponents-base/dist/decorators/query.js"; import type TableHeaderCellActionBase from "./TableHeaderCellActionBase.js"; +import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js"; /** * @class @@ -120,7 +121,7 @@ class TableHeaderCell extends TableCellBase { * @since 2.8.0 */ @slot() - action!: Array<TableHeaderCellActionBase>; + action!: Slot<TableHeaderCellActionBase>; @query("slot:not([name])") _defaultSlot!: HTMLSlotElement; diff --git a/packages/main/src/TableHeaderRow.ts b/packages/main/src/TableHeaderRow.ts index cef10b8f485a..b74ed87b799a 100644 --- a/packages/main/src/TableHeaderRow.ts +++ b/packages/main/src/TableHeaderRow.ts @@ -1,4 +1,4 @@ -import { customElement, slot, property } from "@ui5/webcomponents-base/dist/decorators.js"; +import { customElement, slotStrict as slot, property } from "@ui5/webcomponents-base/dist/decorators.js"; import TableRowBase from "./TableRowBase.js"; import TableHeaderRowTemplate from "./TableHeaderRowTemplate.js"; import TableHeaderRowStyles from "./generated/themes/TableHeaderRow.css.js"; @@ -12,6 +12,7 @@ import { TABLE_SELECT_ALL_ROWS, TABLE_DESELECT_ALL_ROWS, } from "./generated/i18n/i18n-defaults.js"; +import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; /** * @class @@ -62,7 +63,7 @@ class TableHeaderRow extends TableRowBase<TableHeaderCell> { }, individualSlots: true, }) - cells!: Array<TableHeaderCell>; + cells!: DefaultSlot<TableHeaderCell>; /** * Sticks the `ui5-table-header-row` to the top of a table. diff --git a/packages/main/src/TableRow.ts b/packages/main/src/TableRow.ts index a69936e9005f..2ccab661520b 100644 --- a/packages/main/src/TableRow.ts +++ b/packages/main/src/TableRow.ts @@ -1,4 +1,4 @@ -import { customElement, slot, property } from "@ui5/webcomponents-base/dist/decorators.js"; +import { customElement, slotStrict as slot, property } from "@ui5/webcomponents-base/dist/decorators.js"; import { isEnter } from "@ui5/webcomponents-base/dist/Keys.js"; import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js"; import query from "@ui5/webcomponents-base/dist/decorators/query.js"; @@ -13,6 +13,7 @@ import type { UI5CustomEvent } from "@ui5/webcomponents-base"; import { TABLE_ROW_MULTIPLE_ACTIONS, TABLE_ROW_SINGLE_ACTION, } from "./generated/i18n/i18n-defaults.js"; +import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; /** * @class @@ -52,7 +53,7 @@ class TableRow extends TableRowBase<TableCell> { slots: false, }, }) - cells!: Array<TableCell>; + cells!: DefaultSlot<TableCell>; /** * Defines the actions of the component. @@ -66,7 +67,7 @@ class TableRow extends TableRowBase<TableCell> { type: HTMLElement, individualSlots: true, }) - actions!: Array<TableRowActionBase>; + actions!: Slot<TableRowActionBase>; /** * Unique identifier of the row. diff --git a/packages/main/src/Tag.ts b/packages/main/src/Tag.ts index 7d050b47ddd7..472c8cf9363f 100644 --- a/packages/main/src/Tag.ts +++ b/packages/main/src/Tag.ts @@ -1,8 +1,9 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; @@ -159,14 +160,14 @@ class Tag extends UI5Element { * @public */ @slot({ type: Node, "default": true }) - text!: Array<Node>; + text!: DefaultSlot<Node>; /** * Defines the icon to be displayed in the component. * @public */ @slot() - icon!: Array<IIcon>; + icon!: Slot<IIcon>; @i18n("@ui5/webcomponents") static i18nBundle: I18nBundle; diff --git a/packages/main/src/Text.ts b/packages/main/src/Text.ts index 7420e7c475c0..99ee046f7c5b 100644 --- a/packages/main/src/Text.ts +++ b/packages/main/src/Text.ts @@ -1,7 +1,8 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; @@ -75,7 +76,7 @@ class Text extends UI5Element { * @public */ @slot({ type: Node, "default": true }) - text!: Array<Node>; + text!: DefaultSlot<Node>; @i18n("@ui5/webcomponents") static i18nBundle: I18nBundle; diff --git a/packages/main/src/TextArea.ts b/packages/main/src/TextArea.ts index 71419cf8a8ac..9de830fe48f8 100644 --- a/packages/main/src/TextArea.ts +++ b/packages/main/src/TextArea.ts @@ -1,7 +1,8 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; @@ -337,7 +338,7 @@ class TextArea extends UI5Element implements IFormInputElement { * @public */ @slot() - valueStateMessage!: Array<HTMLElement>; + valueStateMessage!: Slot<HTMLElement>; _fnOnResize: ResizeObserverCallback; _firstRendering: boolean; diff --git a/packages/main/src/TimePicker.ts b/packages/main/src/TimePicker.ts index 8bb809457cd3..e92a757760e6 100644 --- a/packages/main/src/TimePicker.ts +++ b/packages/main/src/TimePicker.ts @@ -1,9 +1,10 @@ import { isDesktop, isPhone, isTablet } from "@ui5/webcomponents-base/dist/Device.js"; import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import query from "@ui5/webcomponents-base/dist/decorators/query.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; @@ -338,7 +339,7 @@ class TimePicker extends UI5Element implements IFormInputElement { * @public */ @slot() - valueStateMessage!: Array<HTMLElement>; + valueStateMessage!: Slot<HTMLElement>; @query("[ui5-time-selection-clocks]") _timeSelectionClocks?: TimeSelectionClocks; diff --git a/packages/main/src/Token.ts b/packages/main/src/Token.ts index 396b5c435f08..352119238981 100644 --- a/packages/main/src/Token.ts +++ b/packages/main/src/Token.ts @@ -1,7 +1,7 @@ -// eslint-disable-next-line max-classes-per-file import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; @@ -141,7 +141,7 @@ class Token extends UI5Element implements IToken { * @since 1.0.0-rc.9 */ @slot() - closeIcon!: Array<IIcon>; + closeIcon!: Slot<IIcon>; @i18n("@ui5/webcomponents") static i18nBundle: I18nBundle; diff --git a/packages/main/src/Tokenizer.ts b/packages/main/src/Tokenizer.ts index 095904de05bd..f472da6c557f 100644 --- a/packages/main/src/Tokenizer.ts +++ b/packages/main/src/Tokenizer.ts @@ -1,6 +1,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; @@ -350,7 +351,7 @@ class Tokenizer extends UI5Element implements IFormInputElement { slots: false, }, }) - tokens!: Array<Token>; + tokens!: DefaultSlot<Token>; @i18n("@ui5/webcomponents") static i18nBundle: I18nBundle; diff --git a/packages/main/src/Toolbar.ts b/packages/main/src/Toolbar.ts index 40b81f98bcb4..39740f4f2415 100644 --- a/packages/main/src/Toolbar.ts +++ b/packages/main/src/Toolbar.ts @@ -1,6 +1,6 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; -import type { ChangeInfo } from "@ui5/webcomponents-base/dist/UI5Element.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import type { ChangeInfo, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; @@ -156,7 +156,7 @@ class Toolbar extends UI5Element { @slot({ "default": true, type: HTMLElement, invalidateOnChildChange: true, individualSlots: true, }) - items!: Array<ToolbarItem> + items!: DefaultSlot<ToolbarItem> _onResize!: ResizeObserverCallback; _onCloseOverflow!: EventListener; diff --git a/packages/main/src/ToolbarSelect.ts b/packages/main/src/ToolbarSelect.ts index ff3011be84ac..554e35135f8d 100644 --- a/packages/main/src/ToolbarSelect.ts +++ b/packages/main/src/ToolbarSelect.ts @@ -1,7 +1,7 @@ import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import type ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js"; import ToolbarSelectCss from "./generated/themes/ToolbarSelect.css.js"; @@ -13,6 +13,7 @@ import ToolbarItem from "./ToolbarItem.js"; import type { ToolbarItemEventDetail } from "./ToolbarItem.js"; import type ToolbarSelectOption from "./ToolbarSelectOption.js"; import type { SelectChangeEventDetail } from "./Select.js"; +import type { DefaultSlot, Slot } from "@ui5/webcomponents-base/dist/UI5Element.js"; type ToolbarSelectChangeEventDetail = ToolbarItemEventDetail & SelectChangeEventDetail; @@ -93,7 +94,7 @@ class ToolbarSelect extends ToolbarItem { type: HTMLElement, invalidateOnChildChange: true, }) - options!: Array<ToolbarSelectOption>; + options!: DefaultSlot<ToolbarSelectOption>; /** * Defines the HTML element that will be displayed in the component input part, @@ -102,7 +103,7 @@ class ToolbarSelect extends ToolbarItem { * @since 2.15.0 */ @slot() - label!: Array<HTMLElement>; + label!: Slot<HTMLElement>; /** * Defines the value state of the component. diff --git a/packages/main/src/ToolbarSelectOption.ts b/packages/main/src/ToolbarSelectOption.ts index 1287701ac9cf..d89aed22e697 100644 --- a/packages/main/src/ToolbarSelectOption.ts +++ b/packages/main/src/ToolbarSelectOption.ts @@ -1,6 +1,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import type ToolbarSelect from "./ToolbarSelect.js"; @@ -58,7 +59,7 @@ class ToolbarSelectOption extends UI5Element { * @public */ @slot({ type: Node, "default": true, invalidateOnChildChange: true }) - text!: Array<Node>; + text!: DefaultSlot<Node>; } ToolbarSelectOption.define(); diff --git a/packages/main/src/Tree.ts b/packages/main/src/Tree.ts index adc5824aa33e..480fc1d7846a 100644 --- a/packages/main/src/Tree.ts +++ b/packages/main/src/Tree.ts @@ -1,7 +1,8 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import DragAndDropHandler from "./delegate/DragAndDropHandler.js"; import MovePlacement from "@ui5/webcomponents-base/dist/types/MovePlacement.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; @@ -296,7 +297,7 @@ class Tree extends UI5Element { * @public */ @slot({ type: HTMLElement, invalidateOnChildChange: true, "default": true }) - items!: Array<TreeItemBase>; + items!: DefaultSlot<TreeItemBase>; /** * Defines the component header. @@ -306,7 +307,7 @@ class Tree extends UI5Element { * @public */ @slot() - header!: Array<HTMLElement>; + header!: Slot<HTMLElement>; _dragAndDropHandler: DragAndDropHandler; diff --git a/packages/main/src/TreeItemBase.ts b/packages/main/src/TreeItemBase.ts index eb89404b6b61..ece12b368d7c 100644 --- a/packages/main/src/TreeItemBase.ts +++ b/packages/main/src/TreeItemBase.ts @@ -1,7 +1,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import type { ClassMap } from "@ui5/webcomponents-base/dist/types.js"; import { isLeft, isRight } from "@ui5/webcomponents-base/dist/Keys.js"; @@ -23,6 +23,7 @@ import TreeItemBaseTemplate from "./TreeItemBaseTemplate.js"; // Styles import treeItemCss from "./generated/themes/TreeItem.css.js"; +import type { DefaultSlot, Slot } from "@ui5/webcomponents-base/dist/UI5Element.js"; type TreeItemBaseEventDetail = { item: TreeItemBase, @@ -215,7 +216,7 @@ class TreeItemBase extends ListItem { }, "default": true, }) - items!: Array<TreeItemBase>; + items!: DefaultSlot<TreeItemBase>; /** * **Note:** While the slot allows option for setting custom avatar, to match the @@ -227,7 +228,7 @@ class TreeItemBase extends ListItem { * @public */ @slot() - image!: Array<HTMLElement>; + image!: Slot<HTMLElement>; @i18n("@ui5/webcomponents") static i18nBundle: I18nBundle; diff --git a/packages/main/src/TreeItemCustom.ts b/packages/main/src/TreeItemCustom.ts index c24d2dff598d..b3cd2d02e4fa 100644 --- a/packages/main/src/TreeItemCustom.ts +++ b/packages/main/src/TreeItemCustom.ts @@ -1,7 +1,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import { isTabNext, isTabPrevious, @@ -15,6 +15,7 @@ import TreeItemCustomTemplate from "./TreeItemCustomTemplate.js"; // Styles import treeItemCustomCss from "./generated/themes/TreeItem.css.js"; +import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js"; /** * @class @@ -55,7 +56,7 @@ class TreeItemCustom extends TreeItemBase { * @public */ @slot() - content!: Array<HTMLElement>; + content!: Slot<HTMLElement>; _onkeydown(e: KeyboardEvent) { if (isDown(e) && this.content?.some(el => el.contains(e.target as Node))) { diff --git a/packages/tools/lib/cem/custom-elements-manifest.config.mjs b/packages/tools/lib/cem/custom-elements-manifest.config.mjs index ba7344ccb441..e624a00d3bcb 100644 --- a/packages/tools/lib/cem/custom-elements-manifest.config.mjs +++ b/packages/tools/lib/cem/custom-elements-manifest.config.mjs @@ -17,6 +17,7 @@ import { getTypeRefs, normalizeDescription, formatArrays, + formatSlotTypes, isClass, normalizeTagType, logDocumentationError, @@ -195,6 +196,7 @@ function processClass(ts, classNode, moduleDoc) { if (member.type?.text) { member.type.text = formatArrays(member.type.text); + member.type.text = formatSlotTypes(member.type.text); } if (member.type && typeRefs.length) { diff --git a/packages/tools/lib/cem/utils.mjs b/packages/tools/lib/cem/utils.mjs index b78e31d13013..6e27c25be65e 100644 --- a/packages/tools/lib/cem/utils.mjs +++ b/packages/tools/lib/cem/utils.mjs @@ -396,7 +396,12 @@ const displayDocumentationErrors = () => { } const formatArrays = (typeText) => { - return typeText?.replaceAll(/(\S+)\[\]/g, "Array<$1>") + return typeText?.replaceAll(/(\S+)\[\]/g, "Array<$1>"); +} + +// Convert Slot<T> and DefaultSlot<T> to Array<T> (the array is built into these types) +const formatSlotTypes = (typeText) => { + return typeText?.replace(/(Default)?Slot<(.+?)>/g, 'Array<$2>'); } export { @@ -415,6 +420,7 @@ export { getTypeRefs, normalizeDescription, formatArrays, + formatSlotTypes, isClass, normalizeTagType, displayDocumentationErrors,