@ui5/webcomponents-base 1.23.1 → 1.24.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,22 @@
1
+ /**
2
+ * Placements of a moved element relative to a target element.
3
+ *
4
+ * @public
5
+ */
6
+ var MovePlacement;
7
+ (function (MovePlacement) {
8
+ /**
9
+ * @public
10
+ */
11
+ MovePlacement["On"] = "On";
12
+ /**
13
+ * @public
14
+ */
15
+ MovePlacement["Before"] = "Before";
16
+ /**
17
+ * @public
18
+ */
19
+ MovePlacement["After"] = "After";
20
+ })(MovePlacement || (MovePlacement = {}));
21
+ export default MovePlacement;
22
+ //# sourceMappingURL=MovePlacement.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MovePlacement.js","sourceRoot":"","sources":["../../src/types/MovePlacement.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,IAAK,aAeJ;AAfD,WAAK,aAAa;IACjB;;OAEG;IACH,0BAAS,CAAA;IAET;;OAEG;IACH,kCAAiB,CAAA;IAEjB;;OAEG;IACH,gCAAe,CAAA;AAChB,CAAC,EAfI,aAAa,KAAb,aAAa,QAejB;AAED,eAAe,aAAa,CAAC","sourcesContent":["/**\n * Placements of a moved element relative to a target element.\n *\n * @public\n */\nenum MovePlacement {\n\t/**\n\t * @public\n\t */\n\tOn = \"On\",\n\n\t/**\n\t * @public\n\t */\n\tBefore = \"Before\",\n\n\t/**\n\t * @public\n\t */\n\tAfter = \"After\",\n}\n\nexport default MovePlacement;\n"]}
@@ -0,0 +1,16 @@
1
+ /**
2
+ * Determines the orientation of an operation.
3
+ *
4
+ * @private
5
+ */
6
+ declare enum Orientation {
7
+ /**
8
+ * @private
9
+ */
10
+ Vertical = "Vertical",
11
+ /**
12
+ * @private
13
+ */
14
+ Horizontal = "Horizontal"
15
+ }
16
+ export default Orientation;
@@ -0,0 +1,18 @@
1
+ /**
2
+ * Determines the orientation of an operation.
3
+ *
4
+ * @private
5
+ */
6
+ var Orientation;
7
+ (function (Orientation) {
8
+ /**
9
+ * @private
10
+ */
11
+ Orientation["Vertical"] = "Vertical";
12
+ /**
13
+ * @private
14
+ */
15
+ Orientation["Horizontal"] = "Horizontal";
16
+ })(Orientation || (Orientation = {}));
17
+ export default Orientation;
18
+ //# sourceMappingURL=Orientation.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Orientation.js","sourceRoot":"","sources":["../../src/types/Orientation.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,IAAK,WAUJ;AAVD,WAAK,WAAW;IACf;;OAEG;IACH,oCAAqB,CAAA;IAErB;;OAEG;IACH,wCAAyB,CAAA;AAC1B,CAAC,EAVI,WAAW,KAAX,WAAW,QAUf;AAED,eAAe,WAAW,CAAC","sourcesContent":["/**\n * Determines the orientation of an operation.\n *\n * @private\n */\nenum Orientation {\n\t/**\n\t * @private\n\t */\n\tVertical = \"Vertical\",\n\n\t/**\n\t * @private\n\t */\n\tHorizontal = \"Horizontal\",\n}\n\nexport default Orientation;\n"]}
@@ -0,0 +1,12 @@
1
+ import type UI5Element from "../../UI5Element";
2
+ declare const setDraggedElement: (element: HTMLElement | null) => void;
3
+ type SetDraggedElementFunction = typeof setDraggedElement;
4
+ declare const DragRegistry: {
5
+ subscribe: (subscriber: UI5Element) => void;
6
+ unsubscribe: (subscriber: UI5Element) => void;
7
+ addSelfManagedArea: (area: HTMLElement | ShadowRoot) => (element: HTMLElement | null) => void;
8
+ removeSelfManagedArea: (area: HTMLElement | ShadowRoot) => void;
9
+ getDraggedElement: () => HTMLElement | null;
10
+ };
11
+ export default DragRegistry;
12
+ export type { SetDraggedElementFunction, };
@@ -0,0 +1,68 @@
1
+ let draggedElement = null;
2
+ let globalHandlersAttached = false;
3
+ const subscribers = new Set();
4
+ const selfManagedDragAreas = new Set();
5
+ const ondragstart = (e) => {
6
+ if (!e.dataTransfer || !(e.target instanceof HTMLElement)) {
7
+ return;
8
+ }
9
+ e.dataTransfer.dropEffect = "move";
10
+ e.dataTransfer.effectAllowed = "move";
11
+ if (!selfManagedDragAreas.has(e.target)) {
12
+ draggedElement = e.target;
13
+ }
14
+ };
15
+ const ondragend = () => {
16
+ draggedElement = null;
17
+ };
18
+ const ondrop = () => {
19
+ draggedElement = null;
20
+ };
21
+ const setDraggedElement = (element) => {
22
+ draggedElement = element;
23
+ };
24
+ const getDraggedElement = () => {
25
+ return draggedElement;
26
+ };
27
+ const attachGlobalHandlers = () => {
28
+ if (globalHandlersAttached) {
29
+ return;
30
+ }
31
+ document.body.addEventListener("dragstart", ondragstart);
32
+ document.body.addEventListener("dragend", ondragend);
33
+ document.body.addEventListener("drop", ondrop);
34
+ };
35
+ const detachGlobalHandlers = () => {
36
+ document.body.removeEventListener("dragstart", ondragstart);
37
+ document.body.removeEventListener("dragend", ondragend);
38
+ document.body.removeEventListener("drop", ondrop);
39
+ globalHandlersAttached = false;
40
+ };
41
+ const subscribe = (subscriber) => {
42
+ subscribers.add(subscriber);
43
+ if (!globalHandlersAttached) {
44
+ attachGlobalHandlers();
45
+ }
46
+ };
47
+ const unsubscribe = (subscriber) => {
48
+ subscribers.delete(subscriber);
49
+ if (subscribers.size === 0 && globalHandlersAttached) {
50
+ detachGlobalHandlers();
51
+ }
52
+ };
53
+ const addSelfManagedArea = (area) => {
54
+ selfManagedDragAreas.add(area);
55
+ return setDraggedElement;
56
+ };
57
+ const removeSelfManagedArea = (area) => {
58
+ selfManagedDragAreas.delete(area);
59
+ };
60
+ const DragRegistry = {
61
+ subscribe,
62
+ unsubscribe,
63
+ addSelfManagedArea,
64
+ removeSelfManagedArea,
65
+ getDraggedElement,
66
+ };
67
+ export default DragRegistry;
68
+ //# sourceMappingURL=DragRegistry.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DragRegistry.js","sourceRoot":"","sources":["../../../src/util/dragAndDrop/DragRegistry.ts"],"names":[],"mappings":"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","sourcesContent":["import type UI5Element from \"../../UI5Element\";\n\nlet draggedElement: HTMLElement | null = null;\nlet globalHandlersAttached = false;\nconst subscribers = new Set<UI5Element>();\nconst selfManagedDragAreas = new Set<HTMLElement | ShadowRoot>();\n\nconst ondragstart = (e: DragEvent) => {\n\tif (!e.dataTransfer || !(e.target instanceof HTMLElement)) {\n\t\treturn;\n\t}\n\n\te.dataTransfer.dropEffect = \"move\";\n\te.dataTransfer.effectAllowed = \"move\";\n\n\tif (!selfManagedDragAreas.has(e.target)) {\n\t\tdraggedElement = e.target;\n\t}\n};\n\nconst ondragend = () => {\n\tdraggedElement = null;\n};\n\nconst ondrop = () => {\n\tdraggedElement = null;\n};\n\nconst setDraggedElement = (element: HTMLElement | null) => {\n\tdraggedElement = element;\n};\ntype SetDraggedElementFunction = typeof setDraggedElement;\n\nconst getDraggedElement = () => {\n\treturn draggedElement;\n};\n\nconst attachGlobalHandlers = () => {\n\tif (globalHandlersAttached) {\n\t\treturn;\n\t}\n\n\tdocument.body.addEventListener(\"dragstart\", ondragstart);\n\tdocument.body.addEventListener(\"dragend\", ondragend);\n\tdocument.body.addEventListener(\"drop\", ondrop);\n};\n\nconst detachGlobalHandlers = () => {\n\tdocument.body.removeEventListener(\"dragstart\", ondragstart);\n\tdocument.body.removeEventListener(\"dragend\", ondragend);\n\tdocument.body.removeEventListener(\"drop\", ondrop);\n\tglobalHandlersAttached = false;\n};\n\nconst subscribe = (subscriber: UI5Element) => {\n\tsubscribers.add(subscriber);\n\n\tif (!globalHandlersAttached) {\n\t\tattachGlobalHandlers();\n\t}\n};\n\nconst unsubscribe = (subscriber: UI5Element) => {\n\tsubscribers.delete(subscriber);\n\n\tif (subscribers.size === 0 && globalHandlersAttached) {\n\t\tdetachGlobalHandlers();\n\t}\n};\n\nconst addSelfManagedArea = (area: HTMLElement | ShadowRoot) => {\n\tselfManagedDragAreas.add(area);\n\n\treturn setDraggedElement;\n};\n\nconst removeSelfManagedArea = (area: HTMLElement | ShadowRoot) => {\n\tselfManagedDragAreas.delete(area);\n};\n\nconst DragRegistry = {\n\tsubscribe,\n\tunsubscribe,\n\taddSelfManagedArea,\n\tremoveSelfManagedArea,\n\tgetDraggedElement,\n};\n\nexport default DragRegistry;\nexport type {\n\tSetDraggedElementFunction,\n};\n"]}
@@ -0,0 +1,7 @@
1
+ import MovePlacement from "../../types/MovePlacement.js";
2
+ import Orientation from "../../types/Orientation.js";
3
+ declare const findClosestPosition: (elements: Array<HTMLElement>, point: number, layoutOrientation: Orientation) => {
4
+ element: HTMLElement;
5
+ placements: MovePlacement[];
6
+ } | null;
7
+ export default findClosestPosition;
@@ -0,0 +1,59 @@
1
+ import MovePlacement from "../../types/MovePlacement.js";
2
+ import Orientation from "../../types/Orientation.js";
3
+ const closestPlacement = (point, beforePoint, centerPoint, afterPoint) => {
4
+ const distToBeforePoint = Math.abs(point - beforePoint);
5
+ const distToCenterPoint = Math.abs(point - centerPoint);
6
+ const distToAfterPoint = Math.abs(point - afterPoint);
7
+ const closestPoint = Math.min(distToBeforePoint, distToCenterPoint, distToAfterPoint);
8
+ let placements = [];
9
+ switch (closestPoint) {
10
+ case distToBeforePoint:
11
+ placements = [MovePlacement.Before];
12
+ break;
13
+ case distToCenterPoint:
14
+ placements = [MovePlacement.On, distToBeforePoint < distToAfterPoint ? MovePlacement.Before : MovePlacement.After];
15
+ break;
16
+ case distToAfterPoint:
17
+ placements = [MovePlacement.After];
18
+ break;
19
+ }
20
+ return placements;
21
+ };
22
+ const findClosestPosition = (elements, point, layoutOrientation) => {
23
+ let shortestDist = Number.POSITIVE_INFINITY;
24
+ let closestElement = null;
25
+ // determine which element is most closest to the point
26
+ for (let i = 0; i < elements.length; i++) {
27
+ const el = elements[i];
28
+ const { left, width, top, height, } = el.getBoundingClientRect();
29
+ let elemCenter;
30
+ if (layoutOrientation === Orientation.Vertical) {
31
+ elemCenter = top + height / 2;
32
+ }
33
+ else { // Horizontal
34
+ elemCenter = left + width / 2;
35
+ }
36
+ const distanceToCenter = Math.abs(point - elemCenter);
37
+ if (distanceToCenter < shortestDist) {
38
+ shortestDist = distanceToCenter;
39
+ closestElement = el;
40
+ }
41
+ }
42
+ if (!closestElement) {
43
+ return null;
44
+ }
45
+ const { width, height, left, right, top, bottom, } = closestElement.getBoundingClientRect();
46
+ let placements;
47
+ if (layoutOrientation === Orientation.Vertical) {
48
+ placements = closestPlacement(point, top, top + height / 2, bottom);
49
+ }
50
+ else { // Horizontal
51
+ placements = closestPlacement(point, left, left + width / 2, right);
52
+ }
53
+ return {
54
+ element: closestElement,
55
+ placements,
56
+ };
57
+ };
58
+ export default findClosestPosition;
59
+ //# sourceMappingURL=findClosestPosition.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"findClosestPosition.js","sourceRoot":"","sources":["../../../src/util/dragAndDrop/findClosestPosition.ts"],"names":[],"mappings":"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","sourcesContent":["import MovePlacement from \"../../types/MovePlacement.js\";\nimport Orientation from \"../../types/Orientation.js\";\n\nconst closestPlacement = (point: number, beforePoint: number, centerPoint: number, afterPoint: number) => {\n\tconst distToBeforePoint = Math.abs(point - beforePoint);\n\tconst distToCenterPoint = Math.abs(point - centerPoint);\n\tconst distToAfterPoint = Math.abs(point - afterPoint);\n\tconst closestPoint = Math.min(\n\t\tdistToBeforePoint,\n\t\tdistToCenterPoint,\n\t\tdistToAfterPoint,\n\t);\n\tlet placements: Array<MovePlacement> = [];\n\n\tswitch (closestPoint) {\n\tcase distToBeforePoint:\n\t\tplacements = [MovePlacement.Before];\n\t\tbreak;\n\tcase distToCenterPoint:\n\t\tplacements = [MovePlacement.On, distToBeforePoint < distToAfterPoint ? MovePlacement.Before : MovePlacement.After];\n\t\tbreak;\n\tcase distToAfterPoint:\n\t\tplacements = [MovePlacement.After];\n\t\tbreak;\n\t}\n\n\treturn placements;\n};\n\nconst findClosestPosition = (elements: Array<HTMLElement>, point: number, layoutOrientation: Orientation) => {\n\tlet shortestDist = Number.POSITIVE_INFINITY;\n\tlet closestElement: HTMLElement | null = null;\n\n\t// determine which element is most closest to the point\n\tfor (let i = 0; i < elements.length; i++) {\n\t\tconst el = elements[i];\n\t\tconst {\n\t\t\tleft, width, top, height,\n\t\t} = el.getBoundingClientRect();\n\n\t\tlet elemCenter;\n\t\tif (layoutOrientation === Orientation.Vertical) {\n\t\t\telemCenter = top + height / 2;\n\t\t} else { // Horizontal\n\t\t\telemCenter = left + width / 2;\n\t\t}\n\n\t\tconst distanceToCenter = Math.abs(point - elemCenter);\n\n\t\tif (distanceToCenter < shortestDist) {\n\t\t\tshortestDist = distanceToCenter;\n\t\t\tclosestElement = el;\n\t\t}\n\t}\n\n\tif (!closestElement) {\n\t\treturn null;\n\t}\n\n\tconst {\n\t\twidth, height, left, right, top, bottom,\n\t} = closestElement.getBoundingClientRect();\n\tlet placements;\n\n\tif (layoutOrientation === Orientation.Vertical) {\n\t\tplacements = closestPlacement(point, top, top + height / 2, bottom);\n\t} else { // Horizontal\n\t\tplacements = closestPlacement(point, left, left + width / 2, right);\n\t}\n\n\treturn {\n\t\telement: closestElement,\n\t\tplacements,\n\t};\n};\n\nexport default findClosestPosition;\n"]}
@@ -0,0 +1,2 @@
1
+ declare const longDragOverHandler: (targetsSelector: string) => (target: any, propertyKey: string, descriptor: TypedPropertyDescriptor<(arg0: DragEvent, arg1: boolean) => any>) => TypedPropertyDescriptor<(arg0: DragEvent, arg1: boolean) => any>;
2
+ export default longDragOverHandler;
@@ -0,0 +1,25 @@
1
+ let lastTarget = null;
2
+ let lastTargetDragOverStart = Date.now();
3
+ const LONG_DRAG_OVER_THRESHOLD = 300;
4
+ const longDragOverHandler = (targetsSelector) => {
5
+ return (target, propertyKey, descriptor) => {
6
+ const origHandler = descriptor.value;
7
+ descriptor.value = function handleDragOver(e) {
8
+ let isLongDragOver = false;
9
+ if (e.target instanceof HTMLElement) {
10
+ const currentTarget = e.target.closest(targetsSelector);
11
+ if (currentTarget === lastTarget && Date.now() - lastTargetDragOverStart >= LONG_DRAG_OVER_THRESHOLD) {
12
+ isLongDragOver = true;
13
+ }
14
+ else if (currentTarget !== lastTarget) {
15
+ lastTarget = currentTarget;
16
+ lastTargetDragOverStart = Date.now();
17
+ }
18
+ }
19
+ origHandler.apply(this, [e, isLongDragOver]);
20
+ };
21
+ return descriptor;
22
+ };
23
+ };
24
+ export default longDragOverHandler;
25
+ //# sourceMappingURL=longDragOverHandler.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"longDragOverHandler.js","sourceRoot":"","sources":["../../../src/util/dragAndDrop/longDragOverHandler.ts"],"names":[],"mappings":"AAAA,IAAI,UAAU,GAAuB,IAAI,CAAC;AAC1C,IAAI,uBAAuB,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;AACzC,MAAM,wBAAwB,GAAG,GAAG,CAAC;AAErC,MAAM,mBAAmB,GAAG,CAAC,eAAuB,EAAE,EAAE;IACvD,OAAO,CAAC,MAAW,EAAE,WAAmB,EAAE,UAA4E,EAAE,EAAE;QACzH,MAAM,WAAW,GAAG,UAAU,CAAC,KAAM,CAAC;QAEtC,UAAU,CAAC,KAAK,GAAG,SAAS,cAAc,CAAC,CAAY;YACtD,IAAI,cAAc,GAAG,KAAK,CAAC;YAE3B,IAAI,CAAC,CAAC,MAAM,YAAY,WAAW,EAAE;gBACpC,MAAM,aAAa,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAc,eAAe,CAAC,CAAC;gBAErE,IAAI,aAAa,KAAK,UAAU,IAAI,IAAI,CAAC,GAAG,EAAE,GAAG,uBAAuB,IAAI,wBAAwB,EAAE;oBACrG,cAAc,GAAG,IAAI,CAAC;iBACtB;qBAAM,IAAI,aAAa,KAAK,UAAU,EAAE;oBACxC,UAAU,GAAG,aAAa,CAAC;oBAC3B,uBAAuB,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;iBACrC;aACD;YAED,WAAW,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC;QAC9C,CAAC,CAAC;QAEF,OAAO,UAAU,CAAC;IACnB,CAAC,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,mBAAmB,CAAC","sourcesContent":["let lastTarget: HTMLElement | null = null;\nlet lastTargetDragOverStart = Date.now();\nconst LONG_DRAG_OVER_THRESHOLD = 300;\n\nconst longDragOverHandler = (targetsSelector: string) => {\n\treturn (target: any, propertyKey: string, descriptor: TypedPropertyDescriptor<(arg0: DragEvent, arg1: boolean) => any>) => {\n\t\tconst origHandler = descriptor.value!;\n\n\t\tdescriptor.value = function handleDragOver(e: DragEvent) {\n\t\t\tlet isLongDragOver = false;\n\n\t\t\tif (e.target instanceof HTMLElement) {\n\t\t\t\tconst currentTarget = e.target.closest<HTMLElement>(targetsSelector);\n\n\t\t\t\tif (currentTarget === lastTarget && Date.now() - lastTargetDragOverStart >= LONG_DRAG_OVER_THRESHOLD) {\n\t\t\t\t\tisLongDragOver = true;\n\t\t\t\t} else if (currentTarget !== lastTarget) {\n\t\t\t\t\tlastTarget = currentTarget;\n\t\t\t\t\tlastTargetDragOverStart = Date.now();\n\t\t\t\t}\n\t\t\t}\n\n\t\t\torigHandler.apply(this, [e, isLongDragOver]);\n\t\t};\n\n\t\treturn descriptor;\n\t};\n};\n\nexport default longDragOverHandler;\n"]}
@@ -407,7 +407,7 @@ declare const getClassCopy: (klass: typeof UI5Element, constructorCallback: () =
407
407
  _needsStaticArea(): boolean;
408
408
  _generateAccessors(): void;
409
409
  metadata: import("../UI5ElementMetadata.js").Metadata;
410
- readonly styles: import("../types.js").ComponentStylesData;
410
+ styles: import("../types.js").ComponentStylesData;
411
411
  readonly staticAreaStyles: import("../types.js").ComponentStylesData;
412
412
  readonly dependencies: (typeof UI5Element)[];
413
413
  getUniqueDependencies(this: typeof UI5Element): (typeof UI5Element)[];
@@ -0,0 +1,22 @@
1
+ {
2
+ "version": 1.1,
3
+ "tags": [
4
+ {
5
+ "name": "ui5element",
6
+ "description": "Base class for all UI5 Web Components\n\n\n---\n\n\n\n\n### **Methods:**\n - **onBeforeRendering(): _void_** - Called every time before the component renders.\n- **onAfterRendering(): _void_** - Called every time after the component renders.\n- **onEnterDOM(): _void_** - Called on connectedCallback - added to the DOM.\n- **onExitDOM(): _void_** - Called on disconnectedCallback - removed from the DOM.\n- **attachInvalidate(callback: _(param: InvalidationInfo) => void_): _void_** - Attach a callback that will be executed whenever the component is invalidated\n- **detachInvalidate(callback: _(param: InvalidationInfo) => void_): _void_** - Detach the callback that is executed whenever the component is invalidated\n- **onInvalidation(changeInfo: _ChangeInfo_): _void_** - A callback that is executed each time an already rendered component is invalidated (scheduled for re-rendering)\n- **getDomRef(): _HTMLElement | undefined_** - Returns the DOM Element inside the Shadow Root that corresponds to the opening tag in the UI5 Web Component's template\n*Note:* For logical (abstract) elements (items, options, etc...), returns the part of the parent's DOM that represents this option\nUse this method instead of \"this.shadowRoot\" to read the Shadow DOM, if ever necessary\n- **getFocusDomRef(): _HTMLElement | undefined_** - Returns the DOM Element marked with \"data-sap-focus-ref\" inside the template.\nThis is the element that will receive the focus by default.\n- **getFocusDomRefAsync(): _Promise<HTMLElement | undefined>_** - Waits for dom ref and then returns the DOM Element marked with \"data-sap-focus-ref\" inside the template.\nThis is the element that will receive the focus by default.\n- **focus(focusOptions: _FocusOptions_): _Promise<void>_** - Set the focus to the element, returned by \"getFocusDomRef()\" (marked by \"data-sap-focus-ref\")\n- **getSlottedNodes(): _Array<T>_** - Returns the actual children, associated with a slot.\nUseful when there are transitive slots in nested component scenarios and you don't want to get a list of the slots, but rather of their content.\n- **attachComponentStateFinalized(callback: _() => void_): _void_** - Attach a callback that will be executed whenever the component's state is finalized\n- **detachComponentStateFinalized(callback: _() => void_): _void_** - Detach the callback that is executed whenever the component's state is finalized\n- **getUniqueDependencies(): _Array<typeof UI5Element>_** - Returns a list of the unique dependencies for this UI5 Web Component\n- **define(): _Promise<typeof UI5Element>_** - Registers a UI5 Web Component in the browser window object\n- **getMetadata(): _UI5ElementMetadata_** - Returns an instance of UI5ElementMetadata.js representing this UI5 Web Component's full metadata (its and its parents')\nNote: not to be confused with the \"get metadata()\" method, which returns an object for this class's metadata only",
7
+ "attributes": [
8
+ {
9
+ "name": "effective-dir",
10
+ "description": "Determines whether the component should be rendered in RTL mode or not.\nReturns: \"rtl\", \"ltr\" or undefined",
11
+ "values": [{ "name": "any" }]
12
+ },
13
+ {
14
+ "name": "is-ui5-element",
15
+ "description": "Used to duck-type UI5 elements without using instanceof",
16
+ "values": [{ "name": "any" }]
17
+ }
18
+ ],
19
+ "references": []
20
+ }
21
+ ]
22
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ui5/webcomponents-base",
3
- "version": "1.23.1",
3
+ "version": "1.24.0-rc.1",
4
4
  "description": "UI5 Web Components: webcomponents.base",
5
5
  "author": "SAP SE (https://www.sap.com)",
6
6
  "license": "Apache-2.0",
@@ -45,7 +45,7 @@
45
45
  },
46
46
  "devDependencies": {
47
47
  "@openui5/sap.ui.core": "1.120.3",
48
- "@ui5/webcomponents-tools": "1.23.1",
48
+ "@ui5/webcomponents-tools": "1.24.0-rc.1",
49
49
  "chromedriver": "^121.0.2",
50
50
  "clean-css": "^5.2.2",
51
51
  "copy-and-watch": "^0.1.5",
@@ -55,5 +55,5 @@
55
55
  "replace-in-file": "^6.3.5",
56
56
  "resolve": "^1.20.0"
57
57
  },
58
- "gitHead": "e2a6552d95088eed035e98e1ca2604e500313a35"
58
+ "gitHead": "7020e89f544abd4484848dc40d38a7550399cb6a"
59
59
  }
package/tsconfig.json CHANGED
@@ -1,5 +1,7 @@
1
1
  {
2
2
  "include": ["src/**/*", "src/global.d.ts"],
3
+ // ssr-dom is imported with bare specifier so that conditional exports are used, but this treats it as input and output
4
+ "exclude": ["src/ssr-dom*.d.ts"],
3
5
  "compilerOptions": {
4
6
  "target": "ES2021",
5
7
  "lib": ["DOM", "DOM.Iterable", "ES2023"],