|
| 1 | +import type { PropertyValue, SlotValue } from '@ui5/webcomponents-base/dist/UI5ElementMetadata.js'; |
| 2 | + |
| 3 | +type ChangeInfo = { |
| 4 | + type: 'property' | 'slot'; |
| 5 | + name: string; |
| 6 | + reason?: string; |
| 7 | + child?: SlotValue; |
| 8 | + target?: Ui5DomRef; |
| 9 | + newValue?: PropertyValue; |
| 10 | + oldValue?: PropertyValue; |
| 11 | +}; |
| 12 | + |
| 13 | +type InvalidationInfo = ChangeInfo & { target: Ui5DomRef }; |
| 14 | + |
| 15 | +export interface Ui5DomRef extends Omit<HTMLElement, 'focus'> { |
| 16 | + /** |
| 17 | + * Called every time before the component renders. |
| 18 | + * @public |
| 19 | + */ |
| 20 | + onBeforeRendering(): void; |
| 21 | + /** |
| 22 | + * Called every time after the component renders. |
| 23 | + * @public |
| 24 | + */ |
| 25 | + onAfterRendering(): void; |
| 26 | + /** |
| 27 | + * Called on connectedCallback - added to the DOM. |
| 28 | + * @public |
| 29 | + */ |
| 30 | + onEnterDOM(): void; |
| 31 | + /** |
| 32 | + * Called on disconnectedCallback - removed from the DOM. |
| 33 | + * @public |
| 34 | + */ |
| 35 | + onExitDOM(): void; |
| 36 | + /** |
| 37 | + * Attach a callback that will be executed whenever the component is invalidated |
| 38 | + * |
| 39 | + * @param callback |
| 40 | + * @public |
| 41 | + */ |
| 42 | + attachInvalidate(callback: (param: InvalidationInfo) => void): void; |
| 43 | + /** |
| 44 | + * Detach the callback that is executed whenever the component is invalidated |
| 45 | + * |
| 46 | + * @param callback |
| 47 | + * @public |
| 48 | + */ |
| 49 | + detachInvalidate(callback: (param: InvalidationInfo) => void): void; |
| 50 | + /** |
| 51 | + * A callback that is executed each time an already rendered component is invalidated (scheduled for re-rendering) |
| 52 | + * |
| 53 | + * @param changeInfo An object with information about the change that caused invalidation. |
| 54 | + * The object can have the following properties: |
| 55 | + * - type: (property|slot) tells what caused the invalidation |
| 56 | + * 1) property: a property value was changed either directly or as a result of changing the corresponding attribute |
| 57 | + * 2) slot: a slotted node(nodes) changed in one of several ways (see "reason") |
| 58 | + * |
| 59 | + * - name: the name of the property or slot that caused the invalidation |
| 60 | + * |
| 61 | + * - reason: (children|textcontent|childchange|slotchange) relevant only for type="slot" only and tells exactly what changed in the slot |
| 62 | + * 1) children: immediate children (HTML elements or text nodes) were added, removed or reordered in the slot |
| 63 | + * 2) textcontent: text nodes in the slot changed value (or nested text nodes were added or changed value). Can only trigger for slots of "type: Node" |
| 64 | + * 3) slotchange: a slot element, slotted inside that slot had its "slotchange" event listener called. This practically means that transitively slotted children changed. |
| 65 | + * Can only trigger if the child of a slot is a slot element itself. |
| 66 | + * 4) childchange: indicates that a UI5Element child in that slot was invalidated and in turn invalidated the component. |
| 67 | + * Can only trigger for slots with "invalidateOnChildChange" metadata descriptor |
| 68 | + * |
| 69 | + * - newValue: the new value of the property (for type="property" only) |
| 70 | + * |
| 71 | + * - oldValue: the old value of the property (for type="property" only) |
| 72 | + * |
| 73 | + * - child the child that was changed (for type="slot" and reason="childchange" only) |
| 74 | + * |
| 75 | + * @public |
| 76 | + */ |
| 77 | + onInvalidation(changeInfo: ChangeInfo): void; |
| 78 | + /** |
| 79 | + * Returns the DOM Element inside the Shadow Root that corresponds to the opening tag in the UI5 Web Component's template |
| 80 | + * *Note:* For logical (abstract) elements (items, options, etc...), returns the part of the parent's DOM that represents this option |
| 81 | + * Use this method instead of "this.shadowRoot" to read the Shadow DOM, if ever necessary |
| 82 | + * |
| 83 | + * @public |
| 84 | + */ |
| 85 | + getDomRef(): HTMLElement | undefined; |
| 86 | + |
| 87 | + /** |
| 88 | + * Returns the DOM Element marked with "data-sap-focus-ref" inside the template. |
| 89 | + * This is the element that will receive the focus by default. |
| 90 | + * @public |
| 91 | + */ |
| 92 | + getFocusDomRef(): HTMLElement | undefined; |
| 93 | + |
| 94 | + /** |
| 95 | + * Waits for dom ref and then returns the DOM Element marked with "data-sap-focus-ref" inside the template. |
| 96 | + * This is the element that will receive the focus by default. |
| 97 | + * @public |
| 98 | + */ |
| 99 | + getFocusDomRefAsync(): Promise<HTMLElement | undefined>; |
| 100 | + /** |
| 101 | + * Set the focus to the element, returned by "getFocusDomRef()" (marked by "data-sap-focus-ref") |
| 102 | + * @param focusOptions additional options for the focus |
| 103 | + * @public |
| 104 | + */ |
| 105 | + focus(focusOptions?: FocusOptions): Promise<void>; |
| 106 | + /** |
| 107 | + * |
| 108 | + * @public |
| 109 | + * @param name - name of the event |
| 110 | + * @param data - additional data for the event |
| 111 | + * @param cancelable - true, if the user can call preventDefault on the event object |
| 112 | + * @param bubbles - true, if the event bubbles |
| 113 | + * @returns false, if the event was cancelled (preventDefault called), true otherwise |
| 114 | + */ |
| 115 | + fireEvent<T>(name: string, data?: T, cancelable?: boolean, bubbles?: boolean): boolean; |
| 116 | + /** |
| 117 | + * Returns the actual children, associated with a slot. |
| 118 | + * Useful 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. |
| 119 | + * @public |
| 120 | + */ |
| 121 | + getSlottedNodes<T = Node>(slotName: string): Array<T>; |
| 122 | + /** |
| 123 | + * Attach a callback that will be executed whenever the component's state is finalized |
| 124 | + * |
| 125 | + * @param callback |
| 126 | + * @public |
| 127 | + */ |
| 128 | + attachComponentStateFinalized(callback: () => void): void; |
| 129 | + /** |
| 130 | + * Detach the callback that is executed whenever the component's state is finalized |
| 131 | + * |
| 132 | + * @param callback |
| 133 | + * @public |
| 134 | + */ |
| 135 | + detachComponentStateFinalized(callback: () => void): void; |
| 136 | + /** |
| 137 | + * Determines whether the component should be rendered in RTL mode or not. |
| 138 | + * Returns: "rtl", "ltr" or undefined |
| 139 | + * |
| 140 | + * @public |
| 141 | + * @default undefined |
| 142 | + */ |
| 143 | + readonly effectiveDir: string | undefined; |
| 144 | + |
| 145 | + /** |
| 146 | + * Used to duck-type UI5 elements without using instanceof |
| 147 | + * @public |
| 148 | + * @default true |
| 149 | + */ |
| 150 | + readonly isUI5Element: boolean; |
| 151 | +} |
0 commit comments