@ui5/webcomponents-base - npm Package Compare versions

Comparing version 2.0.0-rc.3 to 2.0.0-rc.4

dist/Boot.js

@@ -34,2 +34,3 @@ import whenDOMReady from "./util/whenDOMReady.js";
     const bootExecutor = async (resolve) => {
+        registerCurrentRuntime();
         if (typeof document === "undefined") {
@@ -40,3 +41,2 @@ resolve();
         attachThemeRegistered(onThemeRegistered);
-        registerCurrentRuntime();
         const openUI5Support = getFeature("OpenUI5Support");
@@ -43,0 +43,0 @@ const isOpenUI5Loaded = openUI5Support ? openUI5Support.isOpenUI5Detected() : false;

dist/config/AnimationMode.js

@@ -21,3 +21,4 @@ import { getAnimationMode as getConfiguredAnimationMode } from "../InitialConfiguration.js";
 const setAnimationMode = (animationMode) => {
-    if (animationMode in AnimationMode) {
+    const options = Object.values(AnimationMode);
+    if (options.includes(animationMode)) {
         curAnimationMode = animationMode;
@@ -24,0 +25,0 @@ }

dist/decorators/customElement.d.ts

@@ -20,4 +20,5 @@ import type UI5Element from "../UI5Element.js";
     fastNavigation?: boolean;
+    formAssociated?: boolean;
     shadowRootOptions?: Partial<ShadowRootInit>;
 }) => ClassDecorator;
 export default customElement;

dist/decorators/customElement.js

@@ -16,3 +16,3 @@ /**
         }
-        const { tag, languageAware, themeAware, fastNavigation, shadowRootOptions, } = tagNameOrComponentSettings;
+        const { tag, languageAware, themeAware, fastNavigation, formAssociated, shadowRootOptions, } = tagNameOrComponentSettings;
         target.metadata.tag = tag;
@@ -28,2 +28,5 @@ if (languageAware) {
         }
+        if (formAssociated) {
+            target.metadata.formAssociated = formAssociated;
+        }
         if (shadowRootOptions) {
@@ -35,3 +38,3 @@ target.metadata.shadowRootOptions = shadowRootOptions;
             customElementEntityValue && Object.defineProperty(target, customElementEntity, {
-                get: () => customElementEntityValue,
+                get: () => tagNameOrComponentSettings[customElementEntity],
             });
@@ -38,0 +41,0 @@ });

dist/generated/VersionInfo.js

 const VersionInfo = {
-    version: "2.0.0-rc.3",
+    version: "2.0.0-rc.4",
     major: 2,
     minor: 0,
     patch: 0,
-    suffix: "-rc.3",
+    suffix: "-rc.4",
     isNext: false,
-    buildTime: 1715324678,
+    buildTime: 1716998972,
 };
 export default VersionInfo;
 //# sourceMappingURL=VersionInfo.js.map

dist/Keys.d.ts

@@ -52,2 +52,3 @@ declare const isEnter: (event: KeyboardEvent) => boolean;
 declare const isF4Shift: (event: KeyboardEvent) => boolean;
+declare const isF10Shift: (event: KeyboardEvent) => boolean;
 declare const isF6Next: (event: KeyboardEvent) => boolean;
@@ -63,2 +64,2 @@ declare const isF6Previous: (event: KeyboardEvent) => boolean;
 declare const isColon: (event: KeyboardEvent) => boolean;
-export { isEnter, isEnterShift, isSpace, isSpaceShift, isSpaceCtrl, isLeft, isRight, isUp, isDown, isLeftCtrl, isRightCtrl, isUpCtrl, isDownCtrl, isUpShift, isDownShift, isUpAlt, isDownAlt, isLeftShift, isRightShift, isLeftShiftCtrl, isRightShiftCtrl, isUpShiftCtrl, isDownShiftCtrl, isHome, isEnd, isPlus, isMinus, isHomeCtrl, isEndCtrl, isHomeShift, isEndShift, isEscape, isTabNext, isTabPrevious, isBackSpace, isDelete, isShow, isF2, isF4, isF4Shift, isF6Previous, isF6Next, isF7, isPageUp, isPageDown, isPageUpShift, isPageUpAlt, isPageDownShift, isPageDownAlt, isPageUpShiftCtrl, isPageDownShiftCtrl, isShift, isCtrlA, isCtrlV, isKeyA, isKeyP, isDeleteShift, isInsertShift, isInsertCtrl, isNumber, isColon, };
+export { isEnter, isEnterShift, isSpace, isSpaceShift, isSpaceCtrl, isLeft, isRight, isUp, isDown, isLeftCtrl, isRightCtrl, isUpCtrl, isDownCtrl, isUpShift, isDownShift, isUpAlt, isDownAlt, isLeftShift, isRightShift, isLeftShiftCtrl, isRightShiftCtrl, isUpShiftCtrl, isDownShiftCtrl, isHome, isEnd, isPlus, isMinus, isHomeCtrl, isEndCtrl, isHomeShift, isEndShift, isEscape, isTabNext, isTabPrevious, isBackSpace, isDelete, isShow, isF2, isF4, isF4Shift, isF10Shift, isF6Previous, isF6Next, isF7, isPageUp, isPageDown, isPageUpShift, isPageUpAlt, isPageDownShift, isPageDownAlt, isPageUpShiftCtrl, isPageDownShiftCtrl, isShift, isCtrlA, isCtrlV, isKeyA, isKeyP, isDeleteShift, isInsertShift, isInsertCtrl, isNumber, isColon, };

dist/Keys.js

@@ -165,2 +165,3 @@ const KeyCodes = {
 const isF4Shift = (event) => (event.key ? event.key === "F4" : event.keyCode === KeyCodes.F4) && checkModifierKeys(event, false, false, true);
+const isF10Shift = (event) => (event.key ? event.key === "F10" : event.keyCode === KeyCodes.F10) && checkModifierKeys(event, false, false, true);
 const isF6Next = (event) => ((event.key ? event.key === "F6" : event.keyCode === KeyCodes.F6) && checkModifierKeys(event, false, false, false))
@@ -184,3 +185,3 @@ || ((event.key ? (event.key === "ArrowDown" || event.key === "Down") : event.keyCode === KeyCodes.ARROW_DOWN) && checkModifierKeys(event, true, true, false));
 const isColon = (event) => ((event.key ? event.key === ":" : event.keyCode === KeyCodes.COLON) && checkModifierKeys(event, false, false, true));
-export { isEnter, isEnterShift, isSpace, isSpaceShift, isSpaceCtrl, isLeft, isRight, isUp, isDown, isLeftCtrl, isRightCtrl, isUpCtrl, isDownCtrl, isUpShift, isDownShift, isUpAlt, isDownAlt, isLeftShift, isRightShift, isLeftShiftCtrl, isRightShiftCtrl, isUpShiftCtrl, isDownShiftCtrl, isHome, isEnd, isPlus, isMinus, isHomeCtrl, isEndCtrl, isHomeShift, isEndShift, isEscape, isTabNext, isTabPrevious, isBackSpace, isDelete, isShow, isF2, isF4, isF4Shift, isF6Previous, isF6Next, isF7, isPageUp, isPageDown, isPageUpShift, isPageUpAlt, isPageDownShift, isPageDownAlt, isPageUpShiftCtrl, isPageDownShiftCtrl, isShift, isCtrlA, isCtrlV, isKeyA, isKeyP, isDeleteShift, isInsertShift, isInsertCtrl, isNumber, isColon, };
+export { isEnter, isEnterShift, isSpace, isSpaceShift, isSpaceCtrl, isLeft, isRight, isUp, isDown, isLeftCtrl, isRightCtrl, isUpCtrl, isDownCtrl, isUpShift, isDownShift, isUpAlt, isDownAlt, isLeftShift, isRightShift, isLeftShiftCtrl, isRightShiftCtrl, isUpShiftCtrl, isDownShiftCtrl, isHome, isEnd, isPlus, isMinus, isHomeCtrl, isEndCtrl, isHomeShift, isEndShift, isEscape, isTabNext, isTabPrevious, isBackSpace, isDelete, isShow, isF2, isF4, isF4Shift, isF10Shift, isF6Previous, isF6Next, isF7, isPageUp, isPageDown, isPageUpShift, isPageUpAlt, isPageDownShift, isPageDownAlt, isPageUpShiftCtrl, isPageDownShiftCtrl, isShift, isCtrlA, isCtrlV, isKeyA, isKeyP, isDeleteShift, isInsertShift, isInsertCtrl, isNumber, isColon, };
 //# sourceMappingURL=Keys.js.map

dist/renderer/executeTemplate.d.ts

@@ -12,3 +12,11 @@ import type UI5Element from "../UI5Element.js";
 declare const executeTemplate: (template: TemplateFunction, component: UI5Element) => TemplateFunctionResult;
+/**
+ * Returns all tags, used inside component's template subject to scoping.
+ * @param component - the component
+ * @returns {Array[]}
+ * @private
+ */
+declare const getTagsToScope: (component: UI5Element) => string[];
 export default executeTemplate;
+export { getTagsToScope };
 export type { TemplateFunction, TemplateFunctionResult };

dist/renderer/executeTemplate.js

@@ -30,2 +30,3 @@ import { getCustomElementsScopingSuffix, shouldScopeCustomElement } from "../CustomElementsScopeUtils.js";
 export default executeTemplate;
+export { getTagsToScope };
 //# sourceMappingURL=executeTemplate.js.map

dist/UI5Element.d.ts

@@ -44,2 +44,3 @@ import "@ui5/webcomponents-base/dist/ssr-dom.js";
     _childChangeListeners: Map<string, ChildChangeListener>;
+    _slotsAssignedNodes: WeakMap<HTMLSlotElement, Array<SlotValue>>;
     _slotChangeListeners: Map<string, SlotChangeListener>;
@@ -51,2 +52,3 @@ _domRefReadyPromise: Promise<void> & {
     _state: State;
+    _internals?: ElementInternals;
     _getRealDomRef?: () => HTMLElement;
@@ -144,2 +146,4 @@ static template?: TemplateFunction;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    formAssociatedCallback(): void;
+    static get formAssociated(): boolean;
     /**
@@ -174,3 +178,3 @@ * @private
      */
-    _attachSlotChange(child: HTMLSlotElement, slotName: string): void;
+    _attachSlotChange(slot: HTMLSlotElement, slotName: string, invalidateOnChildChange: boolean): void;
     /**
@@ -365,2 +369,6 @@ * @private
     static getMetadata(): UI5ElementMetadata;
+    get validity(): ValidityState | undefined;
+    get validationMessage(): string | undefined;
+    checkValidity(): boolean | undefined;
+    reportValidity(): boolean | undefined;
 }
@@ -367,0 +375,0 @@ /**

dist/UI5Element.js

@@ -19,3 +19,5 @@ // eslint-disable-next-line import/no-extraneous-dependencies
 import { markAsRtlAware } from "./locale/RTLAwareRegistry.js";
-import executeTemplate from "./renderer/executeTemplate.js";
+import executeTemplate, { getTagsToScope } from "./renderer/executeTemplate.js";
+import { attachFormElementInternals, setFormValue } from "./features/InputElementsFormSupport.js";
+const DEV_MODE = true;
 let autoId = 0;
@@ -82,2 +84,3 @@ const elementTimeouts = new Map();
         this._doNotSyncAttributes = new Set(); // attributes that are excluded from attributeChangedCallback synchronization
+        this._slotsAssignedNodes = new WeakMap(); // map of all nodes, slotted (directly or transitively) per component slot
         this._state = { ...ctor.getMetadata().getInitialState() };
@@ -111,2 +114,23 @@ this._upgradeAllProperties();
     async connectedCallback() {
+        if (DEV_MODE) {
+            const rootNode = this.getRootNode();
+            // when an element is connected, check if it exists in the `dependencies` of the parent
+            if (rootNode instanceof ShadowRoot && instanceOfUI5Element(rootNode.host)) {
+                const klass = rootNode.host.constructor;
+                const hasDependency = getTagsToScope(rootNode.host).includes(this.constructor.getMetadata().getPureTag());
+                if (!hasDependency) {
+                    // eslint-disable-next-line no-console
+                    console.error(`[UI5-FWK] ${this.constructor.getMetadata().getTag()} not found in dependencies of ${klass.getMetadata().getTag()}`);
+                }
+            }
+        }
+        if (DEV_MODE) {
+            const props = this.constructor.getMetadata().getProperties();
+            for (const [prop, propData] of Object.entries(props)) { // eslint-disable-line
+                if (Object.hasOwn(this, prop)) {
+                    // eslint-disable-next-line no-console
+                    console.error(`[UI5-FWK] ${this.constructor.getMetadata().getTag()} has a property [${prop}] that is shadowed by the instance. Updates to this property will not invalidate the component. Possible reason is TS target ES2022 or TS useDefineForClassFields`);
+                }
+            }
+        }
         const ctor = this.constructor;
@@ -264,9 +288,7 @@ this.setAttribute(ctor.getMetadata().getPureTag(), "");
                 const childChangeListener = this._getChildChangeListener(slotName);
-                if (childChangeListener) {
-                    child.attachInvalidate.call(child, childChangeListener);
-                }
+                child.attachInvalidate.call(child, childChangeListener);
             }
             // Listen for the slotchange event if the child is a slot itself
             if (child instanceof HTMLSlotElement) {
-                this._attachSlotChange(child, slotName);
+                this._attachSlotChange(child, slotName, !!slotData.invalidateOnChildChange);
             }
@@ -298,2 +320,5 @@ const propertyName = slotData.propertyName || slotName;
                 invalidated = true;
+                if (ctor.getMetadata().isFormAssociated()) {
+                    setFormValue(this);
+                }
             }
@@ -321,5 +346,3 @@ }
                 const childChangeListener = this._getChildChangeListener(slotName);
-                if (childChangeListener) {
-                    child.detachInvalidate.call(child, childChangeListener);
-                }
+                child.detachInvalidate.call(child, childChangeListener);
             }
@@ -401,2 +424,12 @@ if (child instanceof HTMLSlotElement) {
     }
+    formAssociatedCallback() {
+        const ctor = this.constructor;
+        if (!ctor.getMetadata().isFormAssociated()) {
+            return;
+        }
+        attachFormElementInternals(this);
+    }
+    static get formAssociated() {
+        return this.getMetadata().isFormAssociated();
+    }
     /**
@@ -488,7 +521,28 @@ * @private
      */
-    _attachSlotChange(child, slotName) {
+    _attachSlotChange(slot, slotName, invalidateOnChildChange) {
         const slotChangeListener = this._getSlotChangeListener(slotName);
-        if (slotChangeListener) {
-            child.addEventListener("slotchange", slotChangeListener);
-        }
+        slot.addEventListener("slotchange", (e) => {
+            slotChangeListener.call(slot, e);
+            if (invalidateOnChildChange) {
+                // Detach listeners for UI5 Elements that used to be in this slot
+                const previousChildren = this._slotsAssignedNodes.get(slot);
+                if (previousChildren) {
+                    previousChildren.forEach(child => {
+                        if (instanceOfUI5Element(child)) {
+                            const childChangeListener = this._getChildChangeListener(slotName);
+                            child.detachInvalidate.call(child, childChangeListener);
+                        }
+                    });
+                }
+                // Attach listeners for UI5 Elements that are now in this slot
+                const newChildren = getSlottedNodesList([slot]);
+                this._slotsAssignedNodes.set(slot, newChildren);
+                newChildren.forEach(child => {
+                    if (instanceOfUI5Element(child)) {
+                        const childChangeListener = this._getChildChangeListener(slotName);
+                        child.attachInvalidate.call(child, childChangeListener);
+                    }
+                });
+            }
+        });
     }
@@ -858,2 +912,5 @@ /**
                         });
+                        if (ctor.getMetadata().isFormAssociated()) {
+                            setFormValue(this);
+                        }
                         this._updateAttribute(prop, value);
@@ -964,2 +1021,6 @@ }
     }
+    get validity() { return this._internals?.validity; }
+    get validationMessage() { return this._internals?.validationMessage; }
+    checkValidity() { return this._internals?.checkValidity(); }
+    reportValidity() { return this._internals?.reportValidity(); }
 }
@@ -966,0 +1027,0 @@ /**

dist/UI5ElementMetadata.d.ts

@@ -34,2 +34,3 @@ import DataType from "./types/DataType.js";
     languageAware?: boolean;
+    formAssociated?: boolean;
     shadowRootOptions?: Partial<ShadowRootInit>;
@@ -136,2 +137,6 @@ };
     /**
+     * Determines whether this UI5 Element has any theme dependant carachteristics.
+     */
+    isFormAssociated(): boolean;
+    /**
      * Matches a changed entity (property/slot) with the given name against the "invalidateOnChildChange" configuration
@@ -138,0 +143,0 @@ * and determines whether this should cause and invalidation

dist/UI5ElementMetadata.js

@@ -210,2 +210,8 @@ import { camelToKebabCase } from "./util/StringHelper.js";
     /**
+     * Determines whether this UI5 Element has any theme dependant carachteristics.
+     */
+    isFormAssociated() {
+        return !!this.metadata.formAssociated;
+    }
+    /**
      * Matches a changed entity (property/slot) with the given name against the "invalidateOnChildChange" configuration
@@ -212,0 +218,0 @@ * and determines whether this should cause and invalidation

dist/util/getClassCopy.d.ts

@@ -16,2 +16,3 @@ import type UI5Element from "../UI5Element.js";
         }) => void>;
+        _slotsAssignedNodes: WeakMap<HTMLSlotElement, Node[]>;
         _slotChangeListeners: Map<string, (this: HTMLSlotElement, ev: Event) => void>;
@@ -23,2 +24,3 @@ _domRefReadyPromise: Promise<void> & {
         _state: import("../UI5ElementMetadata.js").State;
+        _internals?: ElementInternals | undefined;
         _getRealDomRef?: (() => HTMLElement) | undefined;
@@ -46,2 +48,3 @@ readonly _id: string;
         attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+        formAssociatedCallback(): void;
         _updateAttribute(name: string, newValue: import("../UI5ElementMetadata.js").PropertyValue): void;
@@ -54,3 +57,3 @@ _upgradeProperty(this: Record<string, any>, propertyName: string): void;
         _getSlotChangeListener(slotName: string): (this: HTMLSlotElement, ev: Event) => void;
-        _attachSlotChange(child: HTMLSlotElement, slotName: string): void;
+        _attachSlotChange(slot: HTMLSlotElement, slotName: string, invalidateOnChildChange: boolean): void;
         _detachSlotChange(child: HTMLSlotElement, slotName: string): void;
@@ -77,2 +80,6 @@ _onSlotChange(slotName: string): void;
         readonly accessibilityInfo: import("../types.js").AccessibilityInfo;
+        readonly validity: ValidityState | undefined;
+        readonly validationMessage: string | undefined;
+        checkValidity(): boolean | undefined;
+        reportValidity(): boolean | undefined;
         accessKey: string;
@@ -406,2 +413,3 @@ readonly accessKeyLabel: string;
     renderer: import("../UI5Element.js").Renderer;
+    readonly formAssociated: boolean;
     readonly observedAttributes: string[];
@@ -408,0 +416,0 @@ _needsShadowDOM(): boolean;

dist/util/InvisibleMessage.js

@@ -28,4 +28,4 @@ import InvisibleMessageMode from "../types/InvisibleMessageMode.js";
     setOutOfViewportStyles(assertiveSpan);
-    getSingletonElementInstance("ui5-static-area").appendChild(politeSpan);
-    getSingletonElementInstance("ui5-static-area").appendChild(assertiveSpan);
+    getSingletonElementInstance("ui5-announcement-area").appendChild(politeSpan);
+    getSingletonElementInstance("ui5-announcement-area").appendChild(assertiveSpan);
 });
@@ -32,0 +32,0 @@ /**

package.json

 {
   "name": "@ui5/webcomponents-base",
-  "version": "2.0.0-rc.3",
+  "version": "2.0.0-rc.4",
   "description": "UI5 Web Components: webcomponents.base",
@@ -19,2 +19,3 @@ "author": "SAP SE (https://www.sap.com)",
   },
+  "types": "./dist",
   "exports": {
@@ -27,3 +28,7 @@ "./dist/ssr-dom.js": {
     ".": "./index.js",
-    "./dist/*": "./dist/*",
+    "./dist/*": {
+      "production": "./dist/prod/*",
+      "development": "./dist/*",
+      "default": "./dist/*"
+    },
     "./package.json": "./package.json",
@@ -40,2 +45,3 @@ "./bundle.esm.js": "./bundle.esm.js",
     "generateAPI": "nps generateAPI",
+    "generateProd": "nps generateProd",
     "bundle": "nps build.bundle",
@@ -51,4 +57,4 @@ "test": "nps test",
     "@openui5/sap.ui.core": "1.120.5",
-    "@ui5/webcomponents-tools": "2.0.0-rc.3",
-    "chromedriver": "^123.0.3",
+    "@ui5/webcomponents-tools": "2.0.0-rc.4",
+    "chromedriver": "^125.0.0",
     "clean-css": "^5.2.2",
@@ -63,3 +69,3 @@ "copy-and-watch": "^0.1.5",
   },
-  "gitHead": "4a5356f64d72a8cbf752bb9f3dee5f57528743aa"
+  "gitHead": "328a4aa4a6d81244939ba9201542ec2b1726b97e"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2528031

increased by50.45%

Number of package files

830

increased by65.01%

Lines of code

28301

increased by25.28%

Worsened metrics

Number of medium supply chain risk alerts

6

increased by100%

No dependency changes