@ui5/webcomponents 2.0.0-rc.5 → 2.0.0

package/dist/Link.d.ts

@@ -4,8 +4,8 @@ import type { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import LinkDesign from "./types/LinkDesign.js";
-import WrappingType from "./types/WrappingType.js";
-import LinkAccessibleRole from "./types/LinkAccessibleRole.js";
+import type WrappingType from "./types/WrappingType.js";
+import type LinkAccessibleRole from "./types/LinkAccessibleRole.js";
 type LinkClickEventDetail = {
     altKey: boolean;
     ctrlKey: boolean;
@@ -47,6 +47,8 @@ type LinkAccessibilityAttributes = Pick<AccessibilityAttributes, "expanded" | "h
  * @constructor
  * @extends UI5Element
  * @public
+ * @csspart icon - Used to style the provided icon within the link
+ * @csspart endIcon - Used to style the provided endIcon within the link
  * @slot {Array<Node>} default - Defines the text of the component.
  *
  * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
@@ -62,19 +64,19 @@ declare class Link extends UI5Element implements ITabbable {
     disabled: boolean;
     /**
      * Defines the tooltip of the component.
-     * @default ""
+     * @default undefined
      * @public
      * @since 2.0.0
      */
-    tooltip: string;
+    tooltip?: string;
     /**
      * Defines the component href.
      *
      * **Note:** Standard hyperlink behavior is supported.
-     * @default ""
+     * @default undefined
      * @public
      */
-    href: string;
+    href?: string;
     /**
      * Defines the component target.
      *
@@ -87,10 +89,10 @@ declare class Link extends UI5Element implements ITabbable {
      * - `_search`
      *
      * **This property must only be used when the `href` property is set.**
-     * @default ""
+     * @default undefined
      * @public
      */
-    target: string;
+    target?: string;
     /**
      * Defines the component design.
      *
@@ -109,23 +111,23 @@ declare class Link extends UI5Element implements ITabbable {
     wrappingType: `${WrappingType}`;
     /**
      * Defines the accessible ARIA name of the component.
-     * @default ""
+     * @default undefined
      * @public
      * @since 1.2.0
      */
-    accessibleName: string;
+    accessibleName?: string;
     /**
      * Receives id(or many ids) of the elements that label the input
-     * @default ""
+     * @default undefined
      * @public
      * @since 1.0.0-rc.15
      */
-    accessibleNameRef: string;
+    accessibleNameRef?: string;
     /**
      * Defines the ARIA role of the component.
      *
      * **Note:** Use the <code>LinkAccessibleRole.Button</code> role in cases when navigation is not expected to occur and the href property is not defined.
-     * @default "link"
+     * @default "Link"
      * @public
      * @since 1.9.0
      */
@@ -145,8 +147,36 @@ declare class Link extends UI5Element implements ITabbable {
      * @default {}
      */
     accessibilityAttributes: LinkAccessibilityAttributes;
+    /**
+     * Defines the icon, displayed as graphical element within the component before the link's text.
+     * The SAP-icons font provides numerous options.
+     *
+     * **Note:** Usage of icon-only link is not supported, the link must always have a text.
+     *
+     * **Note:** We recommend using аn icon in the beginning or the end only, and with text.
+     *
+     * See all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
+     * @default undefined
+     * @since 2.0.0
+     * @public
+     */
+    icon?: string;
+    /**
+     * Defines the icon, displayed as graphical element within the component after the link's text.
+     * The SAP-icons font provides numerous options.
+     *
+     * **Note:** Usage of icon-only link is not supported, the link must always have a text.
+     *
+     * **Note:** We recommend using аn icon in the beginning or the end only, and with text.
+     *
+     * See all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
+     * @default undefined
+     * @since 2.0.0
+     * @public
+     */
+    endIcon?: string;
     _rel: string | undefined;
-    forcedTabIndex: string;
+    forcedTabIndex?: string;
     /**
      * Indicates if the element is on focus.
      * @private
@@ -156,7 +186,7 @@ declare class Link extends UI5Element implements ITabbable {
     static i18nBundle: I18nBundle;
     constructor();
     onBeforeRendering(): void;
-    _isCrossOrigin(): boolean;
+    _isCrossOrigin(href: string): boolean;
     get effectiveTabIndex(): string;
     get ariaLabelText(): string | undefined;
     get hasLinkType(): boolean;

package/dist/Link.js

@@ -15,13 +15,12 @@ import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/Ari
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { markEvent } from "@ui5/webcomponents-base/dist/MarkedEvents.js";
 import LinkDesign from "./types/LinkDesign.js";
-import WrappingType from "./types/WrappingType.js";
-import LinkAccessibleRole from "./types/LinkAccessibleRole.js";
 // Template
 import LinkTemplate from "./generated/templates/LinkTemplate.lit.js";
 import { LINK_SUBTLE, LINK_EMPHASIZED } from "./generated/i18n/i18n-defaults.js";
 // Styles
 import linkCss from "./generated/themes/Link.css.js";
+import Icon from "./Icon.js";
 /**
  * @class
  *
@@ -56,6 +55,8 @@ import linkCss from "./generated/themes/Link.css.js";
  * @constructor
  * @extends UI5Element
  * @public
+ * @csspart icon - Used to style the provided icon within the link
+ * @csspart endIcon - Used to style the provided endIcon within the link
  * @slot {Array<Node>} default - Defines the text of the component.
  *
  * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
@@ -63,17 +64,70 @@ import linkCss from "./generated/themes/Link.css.js";
 let Link = Link_1 = class Link extends UI5Element {
     constructor() {
         super();
+        /**
+         * Defines whether the component is disabled.
+         *
+         * **Note:** When disabled, the click event cannot be triggered by the user.
+         * @default false
+         * @public
+         */
+        this.disabled = false;
+        /**
+         * Defines the component design.
+         *
+         * **Note:** Avaialble options are `Default`, `Subtle`, and `Emphasized`.
+         * @default "Default"
+         * @public
+         */
+        this.design = "Default";
+        /**
+         * Defines how the text of a component will be displayed when there is not enough space.
+         *
+         * **Note:** By default the text will wrap. If "None" is set - the text will truncate.
+         * @default "Normal"
+         * @public
+         */
+        this.wrappingType = "Normal";
+        /**
+         * Defines the ARIA role of the component.
+         *
+         * **Note:** Use the <code>LinkAccessibleRole.Button</code> role in cases when navigation is not expected to occur and the href property is not defined.
+         * @default "Link"
+         * @public
+         * @since 1.9.0
+         */
+        this.accessibleRole = "Link";
+        /**
+         * Defines the additional accessibility attributes that will be applied to the component.
+         * The following fields are supported:
+         *
+         * - **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.
+         * Accepts the following string values: `true` or `false`.
+         *
+         * - **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.
+         * Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.
+         *
+         * @public
+         * @since 1.1.0
+         * @default {}
+         */
+        this.accessibilityAttributes = {};
+        /**
+         * Indicates if the element is on focus.
+         * @private
+         */
+        this.focused = false;
         this._dummyAnchor = document.createElement("a");
     }
     onBeforeRendering() {
         const needsNoReferrer = this.target !== "_self"
             && this.href
-            && this._isCrossOrigin();
+            && this._isCrossOrigin(this.href);
         this._rel = needsNoReferrer ? "noreferrer noopener" : undefined;
     }
-    _isCrossOrigin() {
+    _isCrossOrigin(href) {
         const loc = window.location;
-        this._dummyAnchor.href = this.href;
+        this._dummyAnchor.href = href;
         return !(this._dummyAnchor.hostname === loc.hostname
             && this._dummyAnchor.port === loc.port
             && this._dummyAnchor.protocol === loc.protocol);
@@ -167,10 +221,10 @@ __decorate([
     property()
 ], Link.prototype, "target", void 0);
 __decorate([
-    property({ type: LinkDesign, defaultValue: LinkDesign.Default })
+    property()
 ], Link.prototype, "design", void 0);
 __decorate([
-    property({ type: WrappingType, defaultValue: WrappingType.Normal })
+    property()
 ], Link.prototype, "wrappingType", void 0);
 __decorate([
     property()
@@ -179,11 +233,17 @@ __decorate([
     property()
 ], Link.prototype, "accessibleNameRef", void 0);
 __decorate([
-    property({ type: LinkAccessibleRole, defaultValue: LinkAccessibleRole.Link })
+    property()
 ], Link.prototype, "accessibleRole", void 0);
 __decorate([
     property({ type: Object })
 ], Link.prototype, "accessibilityAttributes", void 0);
+__decorate([
+    property()
+], Link.prototype, "icon", void 0);
+__decorate([
+    property()
+], Link.prototype, "endIcon", void 0);
 __decorate([
     property({ noAttribute: true })
 ], Link.prototype, "_rel", void 0);
@@ -200,6 +260,7 @@ Link = Link_1 = __decorate([
         renderer: litRender,
         template: LinkTemplate,
         styles: linkCss,
+        dependencies: [Icon],
     })
     /**
      * Fired when the component is triggered either with a mouse/tap

package/dist/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sourceRoot":"","sources":["../src/Link.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport type { AccessibilityAttributes } from \"@ui5/webcomponents-base/dist/types.js\";\nimport { isSpace, isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { getEffectiveAriaLabelText } from \"@ui5/webcomponents-base/dist/util/AriaLabelHelper.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { I18nText } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { ITabbable } from \"@ui5/webcomponents-base/dist/delegate/ItemNavigation.js\";\nimport { markEvent } from \"@ui5/webcomponents-base/dist/MarkedEvents.js\";\nimport LinkDesign from \"./types/LinkDesign.js\";\nimport WrappingType from \"./types/WrappingType.js\";\nimport LinkAccessibleRole from \"./types/LinkAccessibleRole.js\";\n// Template\nimport LinkTemplate from \"./generated/templates/LinkTemplate.lit.js\";\n\nimport { LINK_SUBTLE, LINK_EMPHASIZED } from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport linkCss from \"./generated/themes/Link.css.js\";\n\ntype LinkClickEventDetail = {\n\taltKey: boolean;\n\tctrlKey: boolean;\n\tmetaKey: boolean;\n\tshiftKey: boolean;\n}\n\ntype LinkAccessibilityAttributes = Pick<AccessibilityAttributes, \"expanded\" | \"hasPopup\">;\n\n/**\n * @class\n *\n * ### Overview\n * The `ui5-link` is a hyperlink component that is used to navigate to other\n * apps and web pages, or to trigger actions.\n * It is a clickable text element, visualized in such a way that it stands out\n * from the standard text.\n * On hover, it changes its style to an underlined text to provide additional feedback to the user.\n *\n * ### Usage\n *\n * You can set the `ui5-link` to be enabled or disabled.\n *\n * To create a visual hierarchy in large lists of links, you can set the less important links as\n * `Subtle` or the more important ones as `Emphasized`,\n * by using the `design` property.\n *\n * If the `href` property is set, the link behaves as the HTML\n * anchor tag (`<a></a>`) and opens the specified URL in the given target frame (`target` property).\n * To specify where the linked content is opened, you can use the `target` property.\n *\n * ### Responsive behavior\n *\n * If there is not enough space, the text of the `ui5-link` becomes truncated.\n * If the `wrappingType` property is set to `\"Normal\"`, the text is displayed\n * on several lines instead of being truncated.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/Link\";`\n * @constructor\n * @extends UI5Element\n * @public\n * @slot {Array<Node>} default - Defines the text of the component.\n *\n * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n */\n@customElement({\n\ttag: \"ui5-link\",\n\tlanguageAware: true,\n\trenderer: litRender,\n\ttemplate: LinkTemplate,\n\tstyles: linkCss,\n})\n/**\n * Fired when the component is triggered either with a mouse/tap\n * or by using the Enter key.\n * @public\n * @allowPreventDefault\n * @param {boolean} altKey Returns whether the \"ALT\" key was pressed when the event was triggered.\n * @param {boolean} ctrlKey Returns whether the \"CTRL\" key was pressed when the event was triggered.\n * @param {boolean} metaKey Returns whether the \"META\" key was pressed when the event was triggered.\n * @param {boolean} shiftKey Returns whether the \"SHIFT\" key was pressed when the event was triggered.\n */\n@event<LinkClickEventDetail>(\"click\", {\n\tdetail: {\n\t\t/**\n\t\t * @public\n\t\t */\n\t\taltKey: { type: Boolean },\n\t\t/**\n\t\t * @public\n\t\t */\n\t\tctrlKey: { type: Boolean },\n\t\t/**\n\t\t * @public\n\t\t */\n\t\tmetaKey: { type: Boolean },\n\t\t/**\n\t\t * @public\n\t\t */\n\t\tshiftKey: { type: Boolean },\n\t},\n})\nclass Link extends UI5Element implements ITabbable {\n\t/**\n\t * Defines whether the component is disabled.\n\t *\n\t * **Note:** When disabled, the click event cannot be triggered by the user.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdisabled!: boolean;\n\n\t/**\n\t * Defines the tooltip of the component.\n\t * @default \"\"\n\t * @public\n\t * @since 2.0.0\n\t */\n\t @property()\n\t tooltip!: string;\n\n\t/**\n\t * Defines the component href.\n\t *\n\t * **Note:** Standard hyperlink behavior is supported.\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\thref!: string;\n\n\t/**\n\t * Defines the component target.\n\t *\n\t * **Notes:**\n\t *\n\t * - `_self`\n\t * - `_top`\n\t * - `_blank`\n\t * - `_parent`\n\t * - `_search`\n\t *\n\t * **This property must only be used when the `href` property is set.**\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\ttarget!: string;\n\n\t/**\n\t * Defines the component design.\n\t *\n\t * **Note:** Avaialble options are `Default`, `Subtle`, and `Emphasized`.\n\t * @default \"Default\"\n\t * @public\n\t */\n\t@property({ type: LinkDesign, defaultValue: LinkDesign.Default })\n\tdesign!: `${LinkDesign}`;\n\n\t/**\n\t * Defines how the text of a component will be displayed when there is not enough space.\n\t *\n\t * **Note:** By default the text will wrap. If \"None\" is set - the text will truncate.\n\t * @default \"Normal\"\n\t * @public\n\t */\n\t@property({ type: WrappingType, defaultValue: WrappingType.Normal })\n\twrappingType!: `${WrappingType}`;\n\n\t/**\n\t * Defines the accessible ARIA name of the component.\n\t * @default \"\"\n\t * @public\n\t * @since 1.2.0\n\t */\n\t@property()\n\taccessibleName!: string;\n\n\t/**\n\t * Receives id(or many ids) of the elements that label the input\n\t * @default \"\"\n\t * @public\n\t * @since 1.0.0-rc.15\n\t */\n\t@property()\n\taccessibleNameRef!: string;\n\n\t/**\n\t * Defines the ARIA role of the component.\n\t *\n\t * **Note:** Use the <code>LinkAccessibleRole.Button</code> role in cases when navigation is not expected to occur and the href property is not defined.\n\t * @default \"link\"\n\t * @public\n\t * @since 1.9.0\n\t */\n\t@property({ type: LinkAccessibleRole, defaultValue: LinkAccessibleRole.Link })\n\taccessibleRole!: `${LinkAccessibleRole}`;\n\n\t/**\n\t * Defines the additional accessibility attributes that will be applied to the component.\n\t * The following fields are supported:\n\t *\n\t * - **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\n\t * Accepts the following string values: `true` or `false`.\n\t *\n\t * - **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\n\t * Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\t *\n\t * @public\n\t * @since 1.1.0\n\t * @default {}\n\t */\n\t@property({ type: Object })\n\taccessibilityAttributes!: LinkAccessibilityAttributes;\n\n\t@property({ noAttribute: true })\n\t_rel: string | undefined;\n\n\t@property({ noAttribute: true })\n\tforcedTabIndex!: string;\n\n\t/**\n\t * Indicates if the element is on focus.\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tfocused!: boolean\n\n\t_dummyAnchor: HTMLAnchorElement;\n\n\tstatic i18nBundle: I18nBundle;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis._dummyAnchor = document.createElement(\"a\");\n\t}\n\n\tonBeforeRendering() {\n\t\tconst needsNoReferrer = this.target !== \"_self\"\n\t\t\t&& this.href\n\t\t\t&& this._isCrossOrigin();\n\n\t\tthis._rel = needsNoReferrer ? \"noreferrer noopener\" : undefined;\n\t}\n\n\t_isCrossOrigin() {\n\t\tconst loc = window.location;\n\n\t\tthis._dummyAnchor.href = this.href;\n\n\t\treturn !(this._dummyAnchor.hostname === loc.hostname\n\t\t\t&& this._dummyAnchor.port === loc.port\n\t\t\t&& this._dummyAnchor.protocol === loc.protocol);\n\t}\n\n\tget effectiveTabIndex() {\n\t\tif (this.forcedTabIndex) {\n\t\t\treturn this.forcedTabIndex;\n\t\t}\n\t\treturn (this.disabled || !this.textContent?.length) ? \"-1\" : \"0\";\n\t}\n\n\tget ariaLabelText() {\n\t\treturn getEffectiveAriaLabelText(this);\n\t}\n\n\tget hasLinkType() {\n\t\treturn this.design !== LinkDesign.Default;\n\t}\n\n\tstatic typeTextMappings(): Record<string, I18nText> {\n\t\treturn {\n\t\t\t\"Subtle\": LINK_SUBTLE,\n\t\t\t\"Emphasized\": LINK_EMPHASIZED,\n\t\t};\n\t}\n\n\tget linkTypeText() {\n\t\treturn Link.i18nBundle.getText(Link.typeTextMappings()[this.design]);\n\t}\n\n\tget parsedRef() {\n\t\treturn (this.href && this.href.length > 0) ? this.href : undefined;\n\t}\n\n\tget effectiveAccRole() {\n\t\treturn this.accessibleRole.toLowerCase();\n\t}\n\n\tget _hasPopup() {\n\t\treturn this.accessibilityAttributes.hasPopup;\n\t}\n\n\tstatic async onDefine() {\n\t\tLink.i18nBundle = await getI18nBundle(\"@ui5/webcomponents\");\n\t}\n\n\t_onclick(e: MouseEvent | KeyboardEvent) {\n\t\tconst {\n\t\t\taltKey,\n\t\t\tctrlKey,\n\t\t\tmetaKey,\n\t\t\tshiftKey,\n\t\t} = e;\n\n\t\te.stopImmediatePropagation();\n\t\tmarkEvent(e, \"link\");\n\n\t\tconst executeEvent = this.fireEvent<LinkClickEventDetail>(\"click\", {\n\t\t\taltKey,\n\t\t\tctrlKey,\n\t\t\tmetaKey,\n\t\t\tshiftKey,\n\t\t}, true);\n\n\t\tif (!executeEvent) {\n\t\t\te.preventDefault();\n\t\t}\n\t}\n\n\t_onfocusin(e: FocusEvent) {\n\t\tmarkEvent(e, \"link\");\n\t\tthis.focused = true;\n\t}\n\n\t_onfocusout() {\n\t\tthis.focused = false;\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (isEnter(e) && !this.href) {\n\t\t\tthis._onclick(e);\n\t\t} else if (isSpace(e)) {\n\t\t\te.preventDefault();\n\t\t}\n\n\t\tmarkEvent(e, \"link\");\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tif (!isSpace(e)) {\n\t\t\tmarkEvent(e, \"link\");\n\t\t\treturn;\n\t\t}\n\n\t\tthis._onclick(e);\n\n\t\tif (this.href && !e.defaultPrevented) {\n\t\t\tconst customEvent = new MouseEvent(\"click\");\n\n\t\t\tcustomEvent.stopImmediatePropagation();\n\t\t\tthis.getDomRef()!.dispatchEvent(customEvent);\n\t\t}\n\t}\n}\n\nLink.define();\n\nexport default Link;\n\nexport type {\n\tLinkClickEventDetail,\n\tLinkAccessibilityAttributes,\n};\n"]}
+{"version":3,"file":"Link.js","sourceRoot":"","sources":["../src/Link.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport type { AccessibilityAttributes } from \"@ui5/webcomponents-base/dist/types.js\";\nimport { isSpace, isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { getEffectiveAriaLabelText } from \"@ui5/webcomponents-base/dist/util/AriaLabelHelper.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { I18nText } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { ITabbable } from \"@ui5/webcomponents-base/dist/delegate/ItemNavigation.js\";\nimport { markEvent } from \"@ui5/webcomponents-base/dist/MarkedEvents.js\";\nimport LinkDesign from \"./types/LinkDesign.js\";\nimport type WrappingType from \"./types/WrappingType.js\";\nimport type LinkAccessibleRole from \"./types/LinkAccessibleRole.js\";\n// Template\nimport LinkTemplate from \"./generated/templates/LinkTemplate.lit.js\";\n\nimport { LINK_SUBTLE, LINK_EMPHASIZED } from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport linkCss from \"./generated/themes/Link.css.js\";\nimport Icon from \"./Icon.js\";\n\ntype LinkClickEventDetail = {\n\taltKey: boolean;\n\tctrlKey: boolean;\n\tmetaKey: boolean;\n\tshiftKey: boolean;\n}\n\ntype LinkAccessibilityAttributes = Pick<AccessibilityAttributes, \"expanded\" | \"hasPopup\">;\n\n/**\n * @class\n *\n * ### Overview\n * The `ui5-link` is a hyperlink component that is used to navigate to other\n * apps and web pages, or to trigger actions.\n * It is a clickable text element, visualized in such a way that it stands out\n * from the standard text.\n * On hover, it changes its style to an underlined text to provide additional feedback to the user.\n *\n * ### Usage\n *\n * You can set the `ui5-link` to be enabled or disabled.\n *\n * To create a visual hierarchy in large lists of links, you can set the less important links as\n * `Subtle` or the more important ones as `Emphasized`,\n * by using the `design` property.\n *\n * If the `href` property is set, the link behaves as the HTML\n * anchor tag (`<a></a>`) and opens the specified URL in the given target frame (`target` property).\n * To specify where the linked content is opened, you can use the `target` property.\n *\n * ### Responsive behavior\n *\n * If there is not enough space, the text of the `ui5-link` becomes truncated.\n * If the `wrappingType` property is set to `\"Normal\"`, the text is displayed\n * on several lines instead of being truncated.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/Link\";`\n * @constructor\n * @extends UI5Element\n * @public\n * @csspart icon - Used to style the provided icon within the link\n * @csspart endIcon - Used to style the provided endIcon within the link\n * @slot {Array<Node>} default - Defines the text of the component.\n *\n * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n */\n@customElement({\n\ttag: \"ui5-link\",\n\tlanguageAware: true,\n\trenderer: litRender,\n\ttemplate: LinkTemplate,\n\tstyles: linkCss,\n\tdependencies: [Icon],\n})\n/**\n * Fired when the component is triggered either with a mouse/tap\n * or by using the Enter key.\n * @public\n * @allowPreventDefault\n * @param {boolean} altKey Returns whether the \"ALT\" key was pressed when the event was triggered.\n * @param {boolean} ctrlKey Returns whether the \"CTRL\" key was pressed when the event was triggered.\n * @param {boolean} metaKey Returns whether the \"META\" key was pressed when the event was triggered.\n * @param {boolean} shiftKey Returns whether the \"SHIFT\" key was pressed when the event was triggered.\n */\n@event<LinkClickEventDetail>(\"click\", {\n\tdetail: {\n\t\t/**\n\t\t * @public\n\t\t */\n\t\taltKey: { type: Boolean },\n\t\t/**\n\t\t * @public\n\t\t */\n\t\tctrlKey: { type: Boolean },\n\t\t/**\n\t\t * @public\n\t\t */\n\t\tmetaKey: { type: Boolean },\n\t\t/**\n\t\t * @public\n\t\t */\n\t\tshiftKey: { type: Boolean },\n\t},\n})\nclass Link extends UI5Element implements ITabbable {\n\t/**\n\t * Defines whether the component is disabled.\n\t *\n\t * **Note:** When disabled, the click event cannot be triggered by the user.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdisabled = false;\n\n\t/**\n\t * Defines the tooltip of the component.\n\t * @default undefined\n\t * @public\n\t * @since 2.0.0\n\t */\n\t @property()\n\t tooltip?: string;\n\n\t/**\n\t * Defines the component href.\n\t *\n\t * **Note:** Standard hyperlink behavior is supported.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\thref?: string;\n\n\t/**\n\t * Defines the component target.\n\t *\n\t * **Notes:**\n\t *\n\t * - `_self`\n\t * - `_top`\n\t * - `_blank`\n\t * - `_parent`\n\t * - `_search`\n\t *\n\t * **This property must only be used when the `href` property is set.**\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ttarget?: string;\n\n\t/**\n\t * Defines the component design.\n\t *\n\t * **Note:** Avaialble options are `Default`, `Subtle`, and `Emphasized`.\n\t * @default \"Default\"\n\t * @public\n\t */\n\t@property()\n\tdesign: `${LinkDesign}` = \"Default\";\n\n\t/**\n\t * Defines how the text of a component will be displayed when there is not enough space.\n\t *\n\t * **Note:** By default the text will wrap. If \"None\" is set - the text will truncate.\n\t * @default \"Normal\"\n\t * @public\n\t */\n\t@property()\n\twrappingType: `${WrappingType}` = \"Normal\";\n\n\t/**\n\t * Defines the accessible ARIA name of the component.\n\t * @default undefined\n\t * @public\n\t * @since 1.2.0\n\t */\n\t@property()\n\taccessibleName?: string;\n\n\t/**\n\t * Receives id(or many ids) of the elements that label the input\n\t * @default undefined\n\t * @public\n\t * @since 1.0.0-rc.15\n\t */\n\t@property()\n\taccessibleNameRef?: string;\n\n\t/**\n\t * Defines the ARIA role of the component.\n\t *\n\t * **Note:** Use the <code>LinkAccessibleRole.Button</code> role in cases when navigation is not expected to occur and the href property is not defined.\n\t * @default \"Link\"\n\t * @public\n\t * @since 1.9.0\n\t */\n\t@property()\n\taccessibleRole: `${LinkAccessibleRole}` = \"Link\";\n\n\t/**\n\t * Defines the additional accessibility attributes that will be applied to the component.\n\t * The following fields are supported:\n\t *\n\t * - **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\n\t * Accepts the following string values: `true` or `false`.\n\t *\n\t * - **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\n\t * Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\t *\n\t * @public\n\t * @since 1.1.0\n\t * @default {}\n\t */\n\t@property({ type: Object })\n\taccessibilityAttributes: LinkAccessibilityAttributes = {};\n\n\t/**\n\t * Defines the icon, displayed as graphical element within the component before the link's text.\n\t * The SAP-icons font provides numerous options.\n\t *\n\t * **Note:** Usage of icon-only link is not supported, the link must always have a text.\n\t *\n\t * **Note:** We recommend using аn icon in the beginning or the end only, and with text.\n\t *\n\t * See all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).\n\t * @default undefined\n\t * @since 2.0.0\n\t * @public\n\t */\n\t@property()\n\ticon?: string;\n\n\t/**\n\t * Defines the icon, displayed as graphical element within the component after the link's text.\n\t * The SAP-icons font provides numerous options.\n\t *\n\t * **Note:** Usage of icon-only link is not supported, the link must always have a text.\n\t *\n\t * **Note:** We recommend using аn icon in the beginning or the end only, and with text.\n\t *\n\t * See all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).\n\t * @default undefined\n\t * @since 2.0.0\n\t * @public\n\t */\n\t@property()\n\tendIcon?: string;\n\n\t@property({ noAttribute: true })\n\t_rel: string | undefined;\n\n\t@property({ noAttribute: true })\n\tforcedTabIndex?: string;\n\n\t/**\n\t * Indicates if the element is on focus.\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tfocused = false;\n\n\t_dummyAnchor: HTMLAnchorElement;\n\n\tstatic i18nBundle: I18nBundle;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis._dummyAnchor = document.createElement(\"a\");\n\t}\n\n\tonBeforeRendering() {\n\t\tconst needsNoReferrer = this.target !== \"_self\"\n\t\t\t&& this.href\n\t\t\t&& this._isCrossOrigin(this.href);\n\n\t\tthis._rel = needsNoReferrer ? \"noreferrer noopener\" : undefined;\n\t}\n\n\t_isCrossOrigin(href: string) {\n\t\tconst loc = window.location;\n\t\tthis._dummyAnchor.href = href;\n\n\t\treturn !(this._dummyAnchor.hostname === loc.hostname\n\t\t\t&& this._dummyAnchor.port === loc.port\n\t\t\t&& this._dummyAnchor.protocol === loc.protocol);\n\t}\n\n\tget effectiveTabIndex() {\n\t\tif (this.forcedTabIndex) {\n\t\t\treturn this.forcedTabIndex;\n\t\t}\n\t\treturn (this.disabled || !this.textContent?.length) ? \"-1\" : \"0\";\n\t}\n\n\tget ariaLabelText() {\n\t\treturn getEffectiveAriaLabelText(this);\n\t}\n\n\tget hasLinkType() {\n\t\treturn this.design !== LinkDesign.Default;\n\t}\n\n\tstatic typeTextMappings(): Record<string, I18nText> {\n\t\treturn {\n\t\t\t\"Subtle\": LINK_SUBTLE,\n\t\t\t\"Emphasized\": LINK_EMPHASIZED,\n\t\t};\n\t}\n\n\tget linkTypeText() {\n\t\treturn Link.i18nBundle.getText(Link.typeTextMappings()[this.design]);\n\t}\n\n\tget parsedRef() {\n\t\treturn (this.href && this.href.length > 0) ? this.href : undefined;\n\t}\n\n\tget effectiveAccRole() {\n\t\treturn this.accessibleRole.toLowerCase();\n\t}\n\n\tget _hasPopup() {\n\t\treturn this.accessibilityAttributes.hasPopup;\n\t}\n\n\tstatic async onDefine() {\n\t\tLink.i18nBundle = await getI18nBundle(\"@ui5/webcomponents\");\n\t}\n\n\t_onclick(e: MouseEvent | KeyboardEvent) {\n\t\tconst {\n\t\t\taltKey,\n\t\t\tctrlKey,\n\t\t\tmetaKey,\n\t\t\tshiftKey,\n\t\t} = e;\n\n\t\te.stopImmediatePropagation();\n\t\tmarkEvent(e, \"link\");\n\n\t\tconst executeEvent = this.fireEvent<LinkClickEventDetail>(\"click\", {\n\t\t\taltKey,\n\t\t\tctrlKey,\n\t\t\tmetaKey,\n\t\t\tshiftKey,\n\t\t}, true);\n\n\t\tif (!executeEvent) {\n\t\t\te.preventDefault();\n\t\t}\n\t}\n\n\t_onfocusin(e: FocusEvent) {\n\t\tmarkEvent(e, \"link\");\n\t\tthis.focused = true;\n\t}\n\n\t_onfocusout() {\n\t\tthis.focused = false;\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (isEnter(e) && !this.href) {\n\t\t\tthis._onclick(e);\n\t\t} else if (isSpace(e)) {\n\t\t\te.preventDefault();\n\t\t}\n\n\t\tmarkEvent(e, \"link\");\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tif (!isSpace(e)) {\n\t\t\tmarkEvent(e, \"link\");\n\t\t\treturn;\n\t\t}\n\n\t\tthis._onclick(e);\n\n\t\tif (this.href && !e.defaultPrevented) {\n\t\t\tconst customEvent = new MouseEvent(\"click\");\n\n\t\t\tcustomEvent.stopImmediatePropagation();\n\t\t\tthis.getDomRef()!.dispatchEvent(customEvent);\n\t\t}\n\t}\n}\n\nLink.define();\n\nexport default Link;\n\nexport type {\n\tLinkClickEventDetail,\n\tLinkAccessibilityAttributes,\n};\n"]}

package/dist/List.d.ts

@@ -6,12 +6,12 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import MovePlacement from "@ui5/webcomponents-base/dist/types/MovePlacement.js";
 import ListSelectionMode from "./types/ListSelectionMode.js";
 import ListGrowingMode from "./types/ListGrowingMode.js";
-import ListAccessibleRole from "./types/ListAccessibleRole.js";
-import ListItemBase from "./ListItemBase.js";
+import type ListAccessibleRole from "./types/ListAccessibleRole.js";
+import type ListItemBase from "./ListItemBase.js";
 import type { ListItemBasePressEventDetail } from "./ListItemBase.js";
 import DropIndicator from "./DropIndicator.js";
 import type { SelectionRequestEventDetail } from "./ListItem.js";
-import ListSeparators from "./types/ListSeparators.js";
+import ListSeparator from "./types/ListSeparator.js";
 import ListItemGroup from "./ListItemGroup.js";
 type ListItemFocusEventDetail = {
     item: ListItemBase;
@@ -90,9 +90,9 @@ type ListItemClickEventDetail = {
  *
  * `import "@ui5/webcomponents/dist/List.js";`
  *
- * `import "@ui5/webcomponents/dist/StandardListItem.js";` (for `ui5-li`)
+ * `import "@ui5/webcomponents/dist/ListItemStandard.js";` (for `ui5-li`)
  *
- * `import "@ui5/webcomponents/dist/CustomListItem.js";` (for `ui5-li-custom`)
+ * `import "@ui5/webcomponents/dist/ListItemCustom.js";` (for `ui5-li-custom`)
  *
  * `import "@ui5/webcomponents/dist/ListItemGroup.js";` (for `ui5-li-group`)
  * @constructor
@@ -104,16 +104,16 @@ declare class List extends UI5Element {
      * Defines the component header text.
      *
      * **Note:** If `header` is set this property is ignored.
-     * @default ""
+     * @default undefined
      * @public
      */
-    headerText: string;
+    headerText?: string;
     /**
      * Defines the footer text.
-     * @default ""
+     * @default undefined
      * @public
      */
-    footerText: string;
+    footerText?: string;
     /**
      * Determines whether the component is indented.
      * @default false
@@ -128,16 +128,16 @@ declare class List extends UI5Element {
     selectionMode: `${ListSelectionMode}`;
     /**
      * Defines the text that is displayed when the component contains no items.
-     * @default ""
+     * @default undefined
      * @public
      */
-    noDataText: string;
+    noDataText?: string;
     /**
      * Defines the item separator style that is used.
      * @default "All"
      * @public
      */
-    separators: `${ListSeparators}`;
+    separators: `${ListSeparator}`;
     /**
      * Defines whether the component will have growing capability either by pressing a `More` button,
      * or via user scroll. In both cases `load-more` event is fired.
@@ -155,11 +155,11 @@ declare class List extends UI5Element {
      * **Note:** If not specified a built-in text will be displayed.
      *
      * **Note:** This property takes effect if the `growing` property is set to the `Button`.
-     * @default ""
+     * @default undefined
      * @since 1.24
      * @public
      */
-    growingButtonText: string;
+    growingButtonText?: string;
     /**
      * Defines if the component would display a loading indicator over the list.
      * @default false
@@ -175,18 +175,18 @@ declare class List extends UI5Element {
     loadingDelay: number;
     /**
      * Defines the accessible name of the component.
-     * @default ""
+     * @default undefined
      * @public
      * @since 1.0.0-rc.15
      */
-    accessibleName: string;
+    accessibleName?: string;
     /**
      * Defines the IDs of the elements that label the input.
-     * @default ""
+     * @default undefined
      * @public
      * @since 1.0.0-rc.15
      */
-    accessibleNameRef: string;
+    accessibleNameRef?: string;
     /**
      * Defines the accessible role of the component.
      * @public
@@ -251,13 +251,13 @@ declare class List extends UI5Element {
     attachGroupHeaderEvents(): void;
     detachGroupHeaderEvents(): void;
     attachForResize(): void;
-    get shouldRenderH1(): string | false;
+    get shouldRenderH1(): string | false | undefined;
     get headerID(): string;
     get modeLabelID(): string;
     get listEndDOM(): Element | null;
     get dropIndicatorDOM(): DropIndicator | null;
     get hasData(): boolean;
-    get showNoDataText(): string | false;
+    get showNoDataText(): string | false | undefined;
     get isDelete(): boolean;
     get isSingleSelect(): boolean;
     get isMultiple(): boolean;

package/dist/List.js

@@ -15,7 +15,6 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import { isTabNext, isSpace, isEnter, isTabPrevious, } from "@ui5/webcomponents-base/dist/Keys.js";
-import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import DragRegistry from "@ui5/webcomponents-base/dist/util/dragAndDrop/DragRegistry.js";
 import findClosestPosition from "@ui5/webcomponents-base/dist/util/dragAndDrop/findClosestPosition.js";
 import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
@@ -29,10 +28,8 @@ import Orientation from "@ui5/webcomponents-base/dist/types/Orientation.js";
 import MovePlacement from "@ui5/webcomponents-base/dist/types/MovePlacement.js";
 import ListSelectionMode from "./types/ListSelectionMode.js";
 import ListGrowingMode from "./types/ListGrowingMode.js";
-import ListAccessibleRole from "./types/ListAccessibleRole.js";
-import "./ListItemBase.js";
 import DropIndicator from "./DropIndicator.js";
-import ListSeparators from "./types/ListSeparators.js";
+import ListSeparator from "./types/ListSeparator.js";
 import BusyIndicator from "./BusyIndicator.js";
 // Template
 import ListTemplate from "./generated/templates/ListTemplate.lit.js";
@@ -41,8 +38,6 @@ import listCss from "./generated/themes/List.css.js";
 import browserScrollbarCSS from "./generated/themes/BrowserScrollbar.css.js";
 // Texts
 import { LOAD_MORE_TEXT, ARIA_LABEL_LIST_SELECTABLE, ARIA_LABEL_LIST_MULTISELECTABLE, ARIA_LABEL_LIST_DELETABLE, } from "./generated/i18n/i18n-defaults.js";
-import "./CheckBox.js";
-import "./RadioButton.js";
 import ListItemGroup, { isInstanceOfListItemGroup } from "./ListItemGroup.js";
 const INFINITE_SCROLL_DEBOUNCE_RATE = 250; // ms
 const PAGE_UP_DOWN_SIZE = 10;
@@ -92,9 +87,9 @@ const PAGE_UP_DOWN_SIZE = 10;
  *
  * `import "@ui5/webcomponents/dist/List.js";`
  *
- * `import "@ui5/webcomponents/dist/StandardListItem.js";` (for `ui5-li`)
+ * `import "@ui5/webcomponents/dist/ListItemStandard.js";` (for `ui5-li`)
  *
- * `import "@ui5/webcomponents/dist/CustomListItem.js";` (for `ui5-li-custom`)
+ * `import "@ui5/webcomponents/dist/ListItemCustom.js";` (for `ui5-li-custom`)
  *
  * `import "@ui5/webcomponents/dist/ListItemGroup.js";` (for `ui5-li-group`)
  * @constructor
@@ -107,6 +102,65 @@ let List = List_1 = class List extends UI5Element {
     }
     constructor() {
         super();
+        /**
+         * Determines whether the component is indented.
+         * @default false
+         * @public
+         */
+        this.indent = false;
+        /**
+         * Defines the selection mode of the component.
+         * @default "None"
+         * @public
+         */
+        this.selectionMode = "None";
+        /**
+         * Defines the item separator style that is used.
+         * @default "All"
+         * @public
+         */
+        this.separators = "All";
+        /**
+         * Defines whether the component will have growing capability either by pressing a `More` button,
+         * or via user scroll. In both cases `load-more` event is fired.
+         *
+         * **Restrictions:** `growing="Scroll"` is not supported for Internet Explorer,
+         * on IE the component will fallback to `growing="Button"`.
+         * @default "None"
+         * @since 1.0.0-rc.13
+         * @public
+         */
+        this.growing = "None";
+        /**
+         * Defines if the component would display a loading indicator over the list.
+         * @default false
+         * @public
+         * @since 1.0.0-rc.6
+         */
+        this.loading = false;
+        /**
+         * Defines the delay in milliseconds, after which the loading indicator will show up for this component.
+         * @default 1000
+         * @public
+         */
+        this.loadingDelay = 1000;
+        /**
+         * Defines the accessible role of the component.
+         * @public
+         * @default "List"
+         * @since 1.0.0-rc.15
+         */
+        this.accessibleRole = "List";
+        /**
+         * Defines if the entire list is in view port.
+         * @private
+         */
+        this._inViewport = false;
+        /**
+         * Defines the active state of the `More` button.
+         * @private
+         */
+        this._loadMoreActive = false;
         this._previouslyFocusedItem = null;
         // Indicates that the List is forwarding the focus before or after the internal ul.
         this._forwardingFocus = false;
@@ -297,8 +351,8 @@ let List = List_1 = class List extends UI5Element {
         const slottedItems = this.getItemsForProcessing();
         slottedItems.forEach((item, key) => {
             const isLastChild = key === slottedItems.length - 1;
-            const showBottomBorder = this.separators === ListSeparators.All
-                || (this.separators === ListSeparators.Inner && !isLastChild);
+            const showBottomBorder = this.separators === ListSeparator.All
+                || (this.separators === ListSeparator.Inner && !isLastChild);
             if (item.hasConfigurableMode) {
                 item._selectionMode = this.selectionMode;
             }
@@ -773,16 +827,16 @@ __decorate([
     property({ type: Boolean })
 ], List.prototype, "indent", void 0);
 __decorate([
-    property({ type: ListSelectionMode, defaultValue: ListSelectionMode.None })
+    property()
 ], List.prototype, "selectionMode", void 0);
 __decorate([
     property()
 ], List.prototype, "noDataText", void 0);
 __decorate([
-    property({ type: ListSeparators, defaultValue: ListSeparators.All })
+    property()
 ], List.prototype, "separators", void 0);
 __decorate([
-    property({ type: ListGrowingMode, defaultValue: ListGrowingMode.None })
+    property()
 ], List.prototype, "growing", void 0);
 __decorate([
     property()
@@ -791,16 +845,16 @@ __decorate([
     property({ type: Boolean })
 ], List.prototype, "loading", void 0);
 __decorate([
-    property({ validator: Integer, defaultValue: 1000 })
+    property({ type: Number })
 ], List.prototype, "loadingDelay", void 0);
 __decorate([
     property()
 ], List.prototype, "accessibleName", void 0);
 __decorate([
-    property({ defaultValue: "" })
+    property()
 ], List.prototype, "accessibleNameRef", void 0);
 __decorate([
-    property({ type: ListAccessibleRole, defaultValue: ListAccessibleRole.List })
+    property()
 ], List.prototype, "accessibleRole", void 0);
 __decorate([
     property({ type: Boolean })
@@ -809,7 +863,11 @@ __decorate([
     property({ type: Boolean })
 ], List.prototype, "_loadMoreActive", void 0);
 __decorate([
-    slot({ type: HTMLElement, "default": true })
+    slot({
+        type: HTMLElement,
+        "default": true,
+        invalidateOnChildChange: true,
+    })
 ], List.prototype, "items", void 0);
 __decorate([
     slot()