@ui5/webcomponents-base - npm Package Compare versions

Comparing version 1.24.0 to 2.0.0-rc.0

bundle.esm.js

@@ -13,3 +13,2 @@ import { registerThemePropertiesLoader } from "./dist/AssetRegistry.js";
 import "./test/elements/Child.js";
-import "./test/elements/WithStaticArea.js";
 import "./test/elements/WithComplexTemplate.js";
@@ -16,0 +15,0 @@ import "./test/elements/GenericExt.js";

dist/decorators/customElement.d.ts

@@ -17,4 +17,2 @@ import type UI5Element from "../UI5Element.js";
     dependencies?: Array<typeof UI5Element>;
-    staticAreaStyles?: Styles;
-    staticAreaTemplate?: Template;
     languageAware?: boolean;
@@ -21,0 +19,0 @@ themeAware?: boolean;

dist/decorators/customElement.js

@@ -27,5 +27,4 @@ /**
         }
-        ["render", "renderer", "template", "staticAreaTemplate", "styles", "staticAreaStyles", "dependencies"].forEach((customElementEntity) => {
-            const _customElementEntity = customElementEntity === "render" ? "renderer" : customElementEntity;
-            const customElementEntityValue = tagNameOrComponentSettings[_customElementEntity];
+        ["renderer", "template", "styles", "dependencies"].forEach((customElementEntity) => {
+            const customElementEntityValue = tagNameOrComponentSettings[customElementEntity];
             customElementEntityValue && Object.defineProperty(target, customElementEntity, {
@@ -32,0 +31,0 @@ get: () => customElementEntityValue,

dist/Device.d.ts

 declare const supportsTouch: () => boolean;
-declare const isIE: () => boolean;
 declare const isSafari: () => boolean;
@@ -13,2 +12,2 @@ declare const isChrome: () => boolean;
 declare const isAndroid: () => boolean;
-export { supportsTouch, isIE, isSafari, isChrome, isFirefox, isPhone, isTablet, isDesktop, isCombi, isIOS, isAndroid, isMac, };
+export { supportsTouch, isSafari, isChrome, isFirefox, isPhone, isTablet, isDesktop, isCombi, isIOS, isAndroid, isMac, };

dist/Device.js

@@ -15,8 +15,2 @@ const isSSR = typeof document === "undefined";
     },
-    get ie() {
-        if (isSSR) {
-            return false;
-        }
-        return /(msie|trident)/i.test(internals.userAgent);
-    },
     get chrome() {
@@ -26,3 +20,3 @@ if (isSSR) {
         }
-        return !internals.ie && /(Chrome|CriOS)/.test(internals.userAgent);
+        return /(Chrome|CriOS)/.test(internals.userAgent);
     },
@@ -39,3 +33,3 @@ get firefox() {
         }
-        return !internals.ie && !internals.chrome && /(Version|PhantomJS)\/(\d+\.\d+).*Safari/.test(internals.userAgent);
+        return !internals.chrome && /(Version|PhantomJS)\/(\d+\.\d+).*Safari/.test(internals.userAgent);
     },
@@ -46,3 +40,3 @@ get webkit() {
         }
-        return !internals.ie && /webkit/.test(internals.userAgent);
+        return /webkit/.test(internals.userAgent);
     },
@@ -145,6 +139,5 @@ get windows() {
     }
-    tablet = (internals.ie && internals.userAgent.indexOf("Touch") !== -1) || (internals.android && !internals.androidPhone);
+    tablet = internals.userAgent.indexOf("Touch") !== -1 || (internals.android && !internals.androidPhone);
 };
 const supportsTouch = () => internals.touch;
-const isIE = () => internals.ie;
 const isSafari = () => internals.safari;
@@ -179,3 +172,3 @@ const isChrome = () => internals.chrome;
 };
-export { supportsTouch, isIE, isSafari, isChrome, isFirefox, isPhone, isTablet, isDesktop, isCombi, isIOS, isAndroid, isMac, };
+export { supportsTouch, isSafari, isChrome, isFirefox, isPhone, isTablet, isDesktop, isCombi, isIOS, isAndroid, isMac, };
 //# sourceMappingURL=Device.js.map

dist/features/OpenUI5Support.d.ts

@@ -33,5 +33,3 @@ import { CLDRData } from "../asset-registries/LocaleData.js";
     static cssVariablesLoaded(): boolean | undefined;
-    static getNextZIndex(): number | undefined;
-    static setInitialZIndex(): void;
 }
 export default OpenUI5Support;

dist/features/OpenUI5Support.js

 import { registerFeature } from "../FeaturesRegistry.js";
 import { setTheme } from "../config/Theme.js";
-import { getCurrentZIndex } from "../util/PopupUtils.js";
 class OpenUI5Support {
@@ -23,3 +22,3 @@ static isAtLeastVersion116() {
                 const callback = () => {
-                    let deps = ["sap/ui/core/Popup", "sap/ui/core/LocaleData"];
+                    let deps = ["sap/ui/core/LocaleData"];
                     if (OpenUI5Support.isAtLeastVersion116()) { // for versions since 1.116.0 and onward, use the modular core
@@ -35,6 +34,3 @@ deps = [
                     }
-                    window.sap.ui.require(deps, (Popup) => {
-                        Popup.setInitialZIndex(getCurrentZIndex());
-                        resolve();
-                    });
+                    window.sap.ui.require(deps, resolve);
                 };
@@ -137,19 +133,2 @@ if (OpenUI5Support.isAtLeastVersion116()) {
     }
-    static getNextZIndex() {
-        if (!OpenUI5Support.isOpenUI5Detected()) {
-            return;
-        }
-        const Popup = window.sap.ui.require("sap/ui/core/Popup");
-        if (!Popup) {
-            console.warn(`The OpenUI5Support feature hasn't been initialized properly. Make sure you import the "@ui5/webcomponents-base/dist/features/OpenUI5Support.js" module before all components' modules.`); // eslint-disable-line
-        }
-        return Popup.getNextZIndex();
-    }
-    static setInitialZIndex() {
-        if (!OpenUI5Support.isOpenUI5Detected()) {
-            return;
-        }
-        const Popup = window.sap.ui.require("sap/ui/core/Popup");
-        Popup.setInitialZIndex(getCurrentZIndex());
-    }
 }
@@ -156,0 +135,0 @@ registerFeature("OpenUI5Support", OpenUI5Support);

dist/generated/VersionInfo.js

 const VersionInfo = {
-    version: "1.24.0",
-    major: 1,
-    minor: 24,
+    version: "2.0.0-rc.0",
+    major: 2,
+    minor: 0,
     patch: 0,
-    suffix: "",
+    suffix: "-rc.0",
     isNext: false,
-    buildTime: 1712256366,
+    buildTime: 1712656957,
 };
 export default VersionInfo;
 //# sourceMappingURL=VersionInfo.js.map

dist/ManagedStyles.js

@@ -1,5 +0,1 @@
-import createStyleInHead from "./util/createStyleInHead.js";
-import createLinkInHead from "./util/createLinkInHead.js";
-import { shouldUseLinks, getUrl } from "./CSP.js";
-import { isSafari } from "./Device.js";
 import { getCurrentRuntimeIndex, compareRuntimes } from "./Runtimes.js";
@@ -19,31 +15,10 @@ const isSSR = typeof document === "undefined";
     const currentRuntimeIndex = getCurrentRuntimeIndex();
-    if (shouldUseLinks()) {
-        const attributes = {};
-        attributes[name] = value;
-        if (theme) {
-            attributes["data-ui5-runtime-index"] = currentRuntimeIndex;
-            attributes["data-ui5-theme"] = theme;
-        }
-        const href = getUrl(data.packageName, data.fileName);
-        createLinkInHead(href, attributes);
+    const stylesheet = new CSSStyleSheet();
+    stylesheet.replaceSync(content);
+    stylesheet._ui5StyleId = getStyleId(name, value); // set an id so that we can find the style later
+    if (theme) {
+        stylesheet._ui5RuntimeIndex = currentRuntimeIndex;
+        stylesheet._ui5Theme = theme;
     }
-    else if (document.adoptedStyleSheets && !isSafari()) {
-        const stylesheet = new CSSStyleSheet();
-        stylesheet.replaceSync(content);
-        stylesheet._ui5StyleId = getStyleId(name, value); // set an id so that we can find the style later
-        if (theme) {
-            stylesheet._ui5RuntimeIndex = currentRuntimeIndex;
-            stylesheet._ui5Theme = theme;
-        }
-        document.adoptedStyleSheets = [...document.adoptedStyleSheets, stylesheet];
-    }
-    else {
-        const attributes = {};
-        attributes[name] = value;
-        if (theme) {
-            attributes["data-ui5-runtime-index"] = currentRuntimeIndex;
-            attributes["data-ui5-theme"] = theme;
-        }
-        createStyleInHead(content, attributes);
-    }
+    document.adoptedStyleSheets = [...document.adoptedStyleSheets, stylesheet];
 };
@@ -53,53 +28,17 @@ const updateStyle = (data, name, value = "", theme) => {
     const currentRuntimeIndex = getCurrentRuntimeIndex();
-    if (shouldUseLinks()) {
-        const link = document.querySelector(`head>link[${name}="${value}"]`);
-        const href = getUrl(data.packageName, data.fileName);
-        if (!theme) {
-            link.href = href;
-        }
-        else {
-            const linkRuntimeIndex = link.getAttribute("data-ui5-runtime-index") || undefined;
-            const linkTheme = link.getAttribute("data-ui5-theme");
-            if (linkTheme !== theme || shouldUpdate(linkRuntimeIndex)) {
-                link.href = href;
-                link.setAttribute("data-ui5-runtime-index", String(currentRuntimeIndex));
-                link.setAttribute("data-ui5-theme", theme);
-            }
-        }
+    const stylesheet = document.adoptedStyleSheets.find(sh => sh._ui5StyleId === getStyleId(name, value));
+    if (!stylesheet) {
+        return;
     }
-    else if (document.adoptedStyleSheets && !isSafari()) {
-        const stylesheet = document.adoptedStyleSheets.find(sh => sh._ui5StyleId === getStyleId(name, value));
-        if (!stylesheet) {
-            return;
-        }
-        if (!theme) {
-            stylesheet.replaceSync(content || "");
-        }
-        else {
-            const stylesheetRuntimeIndex = stylesheet._ui5RuntimeIndex;
-            const stylesheetTheme = stylesheet._ui5Theme;
-            if (stylesheetTheme !== theme || shouldUpdate(stylesheetRuntimeIndex)) {
-                stylesheet.replaceSync(content || "");
-                stylesheet._ui5RuntimeIndex = String(currentRuntimeIndex);
-                stylesheet._ui5Theme = theme;
-            }
-        }
+    if (!theme) {
+        stylesheet.replaceSync(content || "");
     }
     else {
-        const style = document.querySelector(`head>style[${name}="${value}"]`);
-        if (!style) {
-            return;
+        const stylesheetRuntimeIndex = stylesheet._ui5RuntimeIndex;
+        const stylesheetTheme = stylesheet._ui5Theme;
+        if (stylesheetTheme !== theme || shouldUpdate(stylesheetRuntimeIndex)) {
+            stylesheet.replaceSync(content || "");
+            stylesheet._ui5RuntimeIndex = String(currentRuntimeIndex);
+            stylesheet._ui5Theme = theme;
         }
-        if (!theme) {
-            style.textContent = content || "";
-        }
-        else {
-            const styleRuntimeIndex = style.getAttribute("data-ui5-runtime-index") || undefined;
-            const styleTheme = style.getAttribute("data-ui5-theme");
-            if (styleTheme !== theme || shouldUpdate(styleRuntimeIndex)) {
-                style.textContent = content || "";
-                style.setAttribute("data-ui5-runtime-index", String(currentRuntimeIndex));
-                style.setAttribute("data-ui5-theme", theme);
-            }
-        }
     }
@@ -111,23 +50,6 @@ };
     }
-    if (shouldUseLinks()) {
-        return !!document.querySelector(`head>link[${name}="${value}"]`);
-    }
-    const styleElement = document.querySelector(`head>style[${name}="${value}"]`);
-    if (document.adoptedStyleSheets && !isSafari()) {
-        return !!styleElement || !!document.adoptedStyleSheets.find(sh => sh._ui5StyleId === getStyleId(name, value));
-    }
-    return !!styleElement;
+    return !!document.adoptedStyleSheets.find(sh => sh._ui5StyleId === getStyleId(name, value));
 };
 const removeStyle = (name, value = "") => {
-    if (shouldUseLinks()) {
-        const linkElement = document.querySelector(`head>link[${name}="${value}"]`);
-        linkElement?.parentElement?.removeChild(linkElement);
-    }
-    else if (document.adoptedStyleSheets && !isSafari()) {
-        document.adoptedStyleSheets = document.adoptedStyleSheets.filter(sh => sh._ui5StyleId !== getStyleId(name, value));
-    }
-    else {
-        const styleElement = document.querySelector(`head > style[${name}="${value}"]`);
-        styleElement?.parentElement?.removeChild(styleElement);
-    }
+    document.adoptedStyleSheets = document.adoptedStyleSheets.filter(sh => sh._ui5StyleId !== getStyleId(name, value));
 };
@@ -134,0 +56,0 @@ const createOrUpdateStyle = (data, name, value = "", theme) => {

dist/renderer/LitRenderer.js

@@ -13,13 +13,7 @@ import { render, html, svg, } from "lit-html";
 };
-const litRender = (templateResult, container, styleStrOrHrefsArr, forStaticArea, options) => {
+const litRender = (templateResult, container, options) => {
     const openUI5Enablement = getFeature("OpenUI5Enablement");
-    if (openUI5Enablement && !forStaticArea) {
+    if (openUI5Enablement) {
         templateResult = openUI5Enablement.wrapTemplateResultInBusyMarkup(effectiveHtml, options.host, templateResult);
     }
-    if (typeof styleStrOrHrefsArr === "string") {
-        templateResult = effectiveHtml `<style>${styleStrOrHrefsArr}</style>${templateResult}`;
-    }
-    else if (Array.isArray(styleStrOrHrefsArr) && styleStrOrHrefsArr.length) {
-        templateResult = effectiveHtml `${styleStrOrHrefsArr.map(href => effectiveHtml `<link type="text/css" rel="stylesheet" href="${href}">`)}${templateResult}`;
-    }
     render(templateResult, container, options);
@@ -26,0 +20,0 @@ };

dist/theming/getConstructableStyle.d.ts

@@ -8,3 +8,3 @@ import UI5Element from "../UI5Element.js";
  */
-declare const getConstructableStyle: (ElementClass: typeof UI5Element, forStaticArea?: boolean) => CSSStyleSheet[];
+declare const getConstructableStyle: (ElementClass: typeof UI5Element) => CSSStyleSheet[];
 export default getConstructableStyle;

dist/theming/getConstructableStyle.js

@@ -13,7 +13,7 @@ import getEffectiveStyle from "./getEffectiveStyle.js";
  */
-const getConstructableStyle = (ElementClass, forStaticArea = false) => {
+const getConstructableStyle = (ElementClass) => {
     const tag = ElementClass.getMetadata().getTag();
-    const key = `${tag}_${forStaticArea ? "static" : "normal"}`;
+    const key = `${tag}_normal`;
     if (!constructableStyleMap.has(key)) {
-        const styleContent = getEffectiveStyle(ElementClass, forStaticArea);
+        const styleContent = getEffectiveStyle(ElementClass);
         const style = new CSSStyleSheet();
@@ -20,0 +20,0 @@ style.replaceSync(styleContent);

dist/theming/getEffectiveStyle.d.ts

 import type UI5Element from "../UI5Element.js";
-declare const getEffectiveStyle: (ElementClass: typeof UI5Element, forStaticArea?: boolean) => string;
+declare const getEffectiveStyle: (ElementClass: typeof UI5Element) => string;
 export default getEffectiveStyle;

dist/theming/getEffectiveStyle.js

@@ -8,8 +8,7 @@ import { getCustomCSS, attachCustomCSSChange } from "./CustomStyle.js";
 });
-const getEffectiveStyle = (ElementClass, forStaticArea = false) => {
+const getEffectiveStyle = (ElementClass) => {
     const tag = ElementClass.getMetadata().getTag();
-    const key = `${tag}_${forStaticArea ? "static" : "normal"}`;
+    const key = `${tag}_normal`;
     const openUI5Enablement = getFeature("OpenUI5Enablement");
     if (!effectiveStyleMap.has(key)) {
-        let effectiveStyle;
         let busyIndicatorStyles = "";
@@ -19,11 +18,5 @@ if (openUI5Enablement) {
         }
-        if (forStaticArea) {
-            effectiveStyle = getStylesString(ElementClass.staticAreaStyles);
-        }
-        else {
-            const customStyle = getCustomCSS(tag) || "";
-            const builtInStyles = getStylesString(ElementClass.styles);
-            effectiveStyle = `${builtInStyles} ${customStyle}`;
-        }
-        effectiveStyle = `${effectiveStyle} ${busyIndicatorStyles}`;
+        const customStyle = getCustomCSS(tag) || "";
+        const builtInStyles = getStylesString(ElementClass.styles);
+        const effectiveStyle = `${builtInStyles} ${customStyle} ${busyIndicatorStyles}`;
         effectiveStyleMap.set(key, effectiveStyle);
@@ -30,0 +23,0 @@ }

dist/UI5Element.d.ts

 import "@ui5/webcomponents-base/dist/ssr-dom.js";
 import UI5ElementMetadata, { Slot, SlotValue, State, PropertyValue, Metadata } from "./UI5ElementMetadata.js";
 import EventProvider from "./EventProvider.js";
-import StaticAreaItem from "./StaticAreaItem.js";
 import type { TemplateFunction, TemplateFunctionResult } from "./renderer/executeTemplate.js";
 import type { AccessibilityInfo, PromiseResolve, ComponentStylesData, ClassMap } from "./types.js";
-type Renderer = (templateResult: TemplateFunctionResult, container: HTMLElement | DocumentFragment, styleStrOrHrefsArr: string | Array<string> | undefined, forStaticArea: boolean, options: RendererOptions) => void;
+type Renderer = (templateResult: TemplateFunctionResult, container: HTMLElement | DocumentFragment, options: RendererOptions) => void;
 type RendererOptions = {
@@ -52,11 +51,5 @@ /**
     _getRealDomRef?: () => HTMLElement;
-    staticAreaItem?: StaticAreaItem;
     static template?: TemplateFunction;
-    static staticAreaTemplate?: TemplateFunction;
     static _metadata: UI5ElementMetadata;
-    /**
-     * @deprecated
-     */
-    static render: Renderer;
-    static renderer?: Renderer;
+    static renderer: Renderer;
     constructor();
@@ -71,3 +64,2 @@ /**
     render(): object;
-    renderStatic(): object;
     /**
@@ -208,5 +200,5 @@ * Do not call this method from derivatives of UI5Element, use "onEnterDOM" only
      *   3) slotchange: a slot element, slotted inside that slot had its "slotchange" event listener called. This practically means that transitively slotted children changed.
-     *      Can only trigger if the child of a slot is a slot element itself.
+     *	  Can only trigger if the child of a slot is a slot element itself.
      *   4) childchange: indicates that a UI5Element child in that slot was invalidated and in turn invalidated the component.
-     *      Can only trigger for slots with "invalidateOnChildChange" metadata descriptor
+     *	  Can only trigger for slots with "invalidateOnChildChange" metadata descriptor
      *
@@ -326,10 +318,2 @@ *  - newValue: the new value of the property (for type="property" only)
      */
-    static _needsStaticArea(): boolean;
-    /**
-     * @public
-     */
-    getStaticAreaItemDomRef(): Promise<ShadowRoot | null>;
-    /**
-     * @private
-     */
     static _generateAccessors(): void;
@@ -347,7 +331,2 @@ /**
     /**
-     * Returns the Static Area CSS for this UI5 Web Component Class
-     * @protected
-     */
-    static get staticAreaStyles(): ComponentStylesData;
-    /**
      * Returns an array with the dependencies for this UI5 Web Component, which could be:
@@ -393,3 +372,3 @@ *  - composed components (used in its shadow root or static area item)
 export default UI5Element;
-export { instanceOfUI5Element };
+export { instanceOfUI5Element, };
 export type { ChangeInfo, Renderer, RendererOptions, };

dist/UI5Element.js

@@ -7,7 +7,5 @@ // eslint-disable-next-line import/no-extraneous-dependencies
 import EventProvider from "./EventProvider.js";
-import getSingletonElementInstance from "./util/getSingletonElementInstance.js";
-import StaticAreaItem from "./StaticAreaItem.js";
 import updateShadowRoot from "./updateShadowRoot.js";
 import { shouldIgnoreCustomElement } from "./IgnoreCustomElements.js";
-import { renderDeferred, renderImmediately, cancelRender } from "./Render.js";
+import { renderDeferred, renderImmediately, cancelRender, } from "./Render.js";
 import { registerTag, isTagRegistered, recordTagRegistrationFailure } from "./CustomElementsRegistry.js";
@@ -22,3 +20,2 @@ import { observeDOMNode, unobserveDOMNode } from "./DOMObserver.js";
 import { markAsRtlAware } from "./locale/RTLAwareRegistry.js";
-import preloadLinks from "./theming/preloadLinks.js";
 import executeTemplate from "./renderer/executeTemplate.js";
@@ -46,2 +43,18 @@ let autoId = 0;
 /**
+ * looks up a property descsriptor including in the prototype chain
+ * @param proto the starting prototype
+ * @param name the property to look for
+ * @returns the property descriptor if found directly or in the prototype chaing, undefined if not found
+ */
+function getPropertyDescriptor(proto, name) {
+    do {
+        const descriptor = Object.getOwnPropertyDescriptor(proto, name);
+        if (descriptor) {
+            return descriptor;
+        }
+        // go up the prototype chain
+        proto = Object.getPrototypeOf(proto);
+    } while (proto);
+}
+/**
  * @class
@@ -93,6 +106,2 @@ * Base class for all UI5 Web Components
     }
-    renderStatic() {
-        const template = this.constructor.staticAreaTemplate;
-        return executeTemplate(template, this);
-    }
     /**
@@ -138,5 +147,2 @@ * Do not call this method from derivatives of UI5Element, use "onEnterDOM" only
         }
-        if (this.staticAreaItem && this.staticAreaItem.parentElement) {
-            this.staticAreaItem.parentElement.removeChild(this.staticAreaItem);
-        }
         cancelRender(this);
@@ -518,5 +524,5 @@ }
      *   3) slotchange: a slot element, slotted inside that slot had its "slotchange" event listener called. This practically means that transitively slotted children changed.
-     *      Can only trigger if the child of a slot is a slot element itself.
+     *	  Can only trigger if the child of a slot is a slot element itself.
      *   4) childchange: indicates that a UI5Element child in that slot was invalidated and in turn invalidated the component.
-     *      Can only trigger for slots with "invalidateOnChildChange" metadata descriptor
+     *	  Can only trigger for slots with "invalidateOnChildChange" metadata descriptor
      *
@@ -572,5 +578,2 @@ *  - newValue: the new value of the property (for type="property" only)
         }
-        if (this.staticAreaItem) {
-            this.staticAreaItem.update();
-        }
         // Safari requires that children get the slot attribute only after the slot tags have been rendered in the shadow DOM
@@ -615,7 +618,3 @@ if (hasIndividualSlots) {
         }
-        const children = [...this.shadowRoot.children].filter(child => !["link", "style"].includes(child.localName));
-        if (children.length !== 1) {
-            console.warn(`The shadow DOM for ${this.constructor.getMetadata().getTag()} does not have a top level element, the getDomRef() method might not work as expected`); // eslint-disable-line
-        }
-        return children[0];
+        return this.shadowRoot.children[0];
     }
@@ -766,24 +765,2 @@ /**
      */
-    static _needsStaticArea() {
-        return !!this.staticAreaTemplate || Object.prototype.hasOwnProperty.call(this.prototype, "renderStatic");
-    }
-    /**
-     * @public
-     */
-    getStaticAreaItemDomRef() {
-        if (!this.constructor._needsStaticArea()) {
-            throw new Error("This component does not use the static area");
-        }
-        if (!this.staticAreaItem) {
-            this.staticAreaItem = StaticAreaItem.createInstance();
-            this.staticAreaItem.setOwnerElement(this);
-        }
-        if (!this.staticAreaItem.parentElement) {
-            getSingletonElementInstance("ui5-static-area").appendChild(this.staticAreaItem);
-        }
-        return this.staticAreaItem.getDomRef();
-    }
-    /**
-     * @private
-     */
     static _generateAccessors() {
@@ -810,3 +787,3 @@ const proto = this.prototype;
             }
-            const descriptor = Object.getOwnPropertyDescriptor(proto, prop);
+            const descriptor = getPropertyDescriptor(proto, prop);
             // if the decorator is on a setter, proxy the new setter to it
@@ -909,9 +886,2 @@ let origSet;
     /**
-     * Returns the Static Area CSS for this UI5 Web Component Class
-     * @protected
-     */
-    static get staticAreaStyles() {
-        return "";
-    }
-    /**
      * Returns an array with the dependencies for this UI5 Web Component, which could be:
@@ -972,3 +942,2 @@ *  - composed components (used in its shadow root or static area item)
             customElements.define(tag, this);
-            preloadLinks(this);
         }
@@ -1014,3 +983,3 @@ return this;
 export default UI5Element;
-export { instanceOfUI5Element };
+export { instanceOfUI5Element, };
 //# sourceMappingURL=UI5Element.js.map

dist/updateShadowRoot.d.ts

@@ -5,5 +5,4 @@ import type UI5Element from "./UI5Element.js";
  * @param element
- * @param forStaticArea
  */
-declare const updateShadowRoot: (element: UI5Element, forStaticArea?: boolean) => void;
+declare const updateShadowRoot: (element: UI5Element) => void;
 export default updateShadowRoot;

dist/updateShadowRoot.js

 import getConstructableStyle from "./theming/getConstructableStyle.js";
-import getEffectiveStyle from "./theming/getEffectiveStyle.js";
-import getEffectiveLinksHrefs from "./theming/getEffectiveLinksHrefs.js";
-import { shouldUseLinks } from "./CSP.js";
-import { isSafari } from "./Device.js";
 /**
  * Updates the shadow root of a UI5Element or its static area item
  * @param element
- * @param forStaticArea
  */
-const updateShadowRoot = (element, forStaticArea = false) => {
-    let styleStrOrHrefsArr;
+const updateShadowRoot = (element) => {
     const ctor = element.constructor;
-    const shadowRoot = forStaticArea ? element.staticAreaItem.shadowRoot : element.shadowRoot;
-    let renderResult;
-    if (forStaticArea) {
-        renderResult = element.renderStatic(); // this is checked before calling updateShadowRoot
-    }
-    else {
-        renderResult = element.render(); // this is checked before calling updateShadowRoot
-    }
+    const shadowRoot = element.shadowRoot;
+    const renderResult = element.render(); // this is checked before calling updateShadowRoot
     if (!shadowRoot) {
@@ -26,18 +14,6 @@ console.warn(`There is no shadow root to update`); // eslint-disable-line
     }
-    if (shouldUseLinks()) {
-        styleStrOrHrefsArr = getEffectiveLinksHrefs(ctor, forStaticArea);
-    }
-    else if (document.adoptedStyleSheets && !isSafari()) { // Chrome
-        shadowRoot.adoptedStyleSheets = getConstructableStyle(ctor, forStaticArea);
-    }
-    else { // FF, Safari
-        styleStrOrHrefsArr = getEffectiveStyle(ctor, forStaticArea);
-    }
-    if (ctor.renderer) {
-        ctor.renderer(renderResult, shadowRoot, styleStrOrHrefsArr, forStaticArea, { host: element });
-        return;
-    }
-    ctor.render(renderResult, shadowRoot, styleStrOrHrefsArr, forStaticArea, { host: element });
+    shadowRoot.adoptedStyleSheets = getConstructableStyle(ctor);
+    ctor.renderer(renderResult, shadowRoot, { host: element });
 };
 export default updateShadowRoot;
 //# sourceMappingURL=updateShadowRoot.js.map

dist/util/dragAndDrop/DragRegistry.d.ts

@@ -1,2 +0,2 @@
-import type UI5Element from "../../UI5Element";
+import type UI5Element from "../../UI5Element.js";
 declare const setDraggedElement: (element: HTMLElement | null) => void;
@@ -3,0 +3,0 @@ type SetDraggedElementFunction = typeof setDraggedElement;

dist/util/getClassCopy.d.ts

@@ -23,6 +23,4 @@ import type UI5Element from "../UI5Element.js";
         _getRealDomRef?: (() => HTMLElement) | undefined;
-        staticAreaItem?: import("../StaticAreaItem.js").default | undefined;
         readonly _id: string;
         render(): object;
-        renderStatic(): object;
         connectedCallback(): Promise<void>;
@@ -76,3 +74,2 @@ disconnectedCallback(): void;
         readonly accessibilityInfo: import("../types.js").AccessibilityInfo;
-        getStaticAreaItemDomRef(): Promise<ShadowRoot | null>;
         accessKey: string;
@@ -404,13 +401,9 @@ readonly accessKeyLabel: string;
     template?: import("../renderer/executeTemplate.js").TemplateFunction | undefined;
-    staticAreaTemplate?: import("../renderer/executeTemplate.js").TemplateFunction | undefined;
     _metadata: import("../UI5ElementMetadata.js").default;
-    render: import("../UI5Element.js").Renderer;
-    renderer?: import("../UI5Element.js").Renderer | undefined;
+    renderer: import("../UI5Element.js").Renderer;
     readonly observedAttributes: string[];
     _needsShadowDOM(): boolean;
-    _needsStaticArea(): boolean;
     _generateAccessors(): void;
     metadata: import("../UI5ElementMetadata.js").Metadata;
     styles: import("../types.js").ComponentStylesData;
-    readonly staticAreaStyles: import("../types.js").ComponentStylesData;
     readonly dependencies: (typeof UI5Element)[];
@@ -417,0 +410,0 @@ getUniqueDependencies(this: typeof UI5Element): (typeof UI5Element)[];

dist/util/PopupUtils.d.ts

@@ -5,4 +5,2 @@ declare const getFocusedElement: () => HTMLElement | null;
 declare const getClosedPopupParent: (el: HTMLElement) => HTMLElement;
-declare const getNextZIndex: () => number | undefined;
-declare const getCurrentZIndex: () => number;
-export { getFocusedElement, isClickInRect, getClosedPopupParent, getNextZIndex, getCurrentZIndex, isFocusedElementWithinNode, };
+export { getFocusedElement, isClickInRect, getClosedPopupParent, isFocusedElementWithinNode, };

dist/util/PopupUtils.js

@@ -1,5 +0,2 @@
-import getSharedResource from "../getSharedResource.js";
-import { getFeature } from "../FeaturesRegistry.js";
 import getActiveElement from "./getActiveElement.js";
-const popupUtilsData = getSharedResource("PopupUtilsData", { currentZIndex: 100 });
 const getFocusedElement = () => {
@@ -62,14 +59,3 @@ const element = getActiveElement();
 };
-const getNextZIndex = () => {
-    const openUI5Support = getFeature("OpenUI5Support");
-    if (openUI5Support && openUI5Support.isOpenUI5Detected()) { // use OpenUI5 for getting z-index values, if loaded
-        return openUI5Support.getNextZIndex();
-    }
-    popupUtilsData.currentZIndex += 2;
-    return popupUtilsData.currentZIndex;
-};
-const getCurrentZIndex = () => {
-    return popupUtilsData.currentZIndex;
-};
-export { getFocusedElement, isClickInRect, getClosedPopupParent, getNextZIndex, getCurrentZIndex, isFocusedElementWithinNode, };
+export { getFocusedElement, isClickInRect, getClosedPopupParent, isFocusedElementWithinNode, };
 //# sourceMappingURL=PopupUtils.js.map

index.js

@@ -59,9 +59,2 @@ // animations/
 
-// CSP.ts
-import {
-	setPackageCSSRoot,
-	setUseLinks,
-	setPreloadLinks,
-} from "./dist/CSP.js";
-
 // CustomElementsScope.ts
@@ -79,3 +72,2 @@ import {
 	supportsTouch,
-	isIE,
 	isSafari,
@@ -178,7 +170,2 @@ isChrome,
 
-	// CSP.ts
-	setPackageCSSRoot,
-	setUseLinks,
-	setPreloadLinks,
-
 	// CustomElementsScope.ts
@@ -193,3 +180,2 @@ setCustomElementsScopingSuffix,
 	supportsTouch,
-	isIE,
 	isSafari,
@@ -196,0 +182,0 @@ isChrome,

package.json

 {
   "name": "@ui5/webcomponents-base",
-  "version": "1.24.0",
+  "version": "2.0.0-rc.0",
   "description": "UI5 Web Components: webcomponents.base",
@@ -48,3 +48,3 @@ "author": "SAP SE (https://www.sap.com)",
     "@openui5/sap.ui.core": "1.120.5",
-    "@ui5/webcomponents-tools": "1.24.0",
+    "@ui5/webcomponents-tools": "2.0.0-rc.0",
     "chromedriver": "^122.0.6",
@@ -59,3 +59,3 @@ "clean-css": "^5.2.2",
   },
-  "gitHead": "975b7c86db3497d35c974df0a6cde9dd3d21c70b"
+  "gitHead": "f07f56dbe228e7d6d5acedeac5284b131acf551a"
 }

README.md

@@ -23,5 +23,2 @@ ![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/docs/images/UI5_logo_wide.png)
  Components    | `@ui5/webcomponents-base/dist/util/InvisibleMessage.js`   | Provides a way to expose dynamic content changes that can be announced by screen readers   |
- CSP compliance| `import { setPackageCSSRoot } from "@ui5/webcomponents-base/dist/CSP.js"`| Sets directory path where the CSS resources for given package will be served from    |
- CSP compliance| `import { setUseLinks } from "@ui5/webcomponents-base/dist/CSP.js"`      | Enables or disables the usage of `<link>` tags instead of `<style>` tags             |
- CSP compliance| `import { setPreloadLinks } from "@ui5/webcomponents-base/dist/CSP.js"`  | Enables or disables the preloading of `<link>` tags                                  |
 
@@ -46,7 +43,2 @@ ### `applyDirection.js`
 
-###  `CSP.js`
- - `setPackageCSSRoot` 
- - `setUseLinks`
- - `setPreloadLinks`
-
 ### `i18nBundle.js`
@@ -53,0 +45,0 @@

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

1648355

decreased by-2.8%

Number of package files

496

decreased by-2.94%

Lines of code

22070

decreased by-3%

Number of low quality alerts

2

increased by100%

Number of lines in readme file

69

decreased by-10.39%

No dependency changes